Avocode – Získání stylu snadno, rychle a přesně

Na světe není mnoho lidí, kteří by si nechtěli usnadnit práci a přitom zlepšit výstupy svého snažení. Platí to samozřejmě i u webových vývojářů. Proto bych Vám rád přiblížil aplikaci Avocode, která nám denně ušetří spoustu času.

V rychlosti vysvětlím, v čem spočívá obsah práce kodéra. Hlavním předmětem naší práce je přetvořit grafický design do html kódu tak, aby se vytvořená stránka přesně shodovala s navrženým designem od grafika. Samozřejmě se zabýváme i další činností, ale tento článek se týká výhradně této práce.

Naši grafici vytvářejí návrhy v programu Photoshop od firmy Adobe. Je to výborný nástroj pro grafiky a také pro kodéry. Ovšem jeho funkčnosti jsou značně rozsáhlé a pro kodéry zbytečné. Dlouhá léta jsme ovšem s tímto programem pracovali a naše výsledky byly velmi dobré. Poté jsme objevili Avocode a rychlost naší práce se značně zrychlila.

Když mi o tomto programu kolega Kraft poprvé řekl, tak jsem si nemyslel, že pro nás bude takový přínos, když je vše možné zvládnout bez problémů ve Photoshopu. Pak jsem ho ovšem vyzkoušel a výsledky byly tak skvělé, že jsem si tento program okamžitě zamiloval.

Je důležité sdělit, že se nejedná o grafický editor a není v něm možné grafický návrh měnit. Což ovšem pro kodéra není vůbec důležité.

Jak tedy začít?

Vytvoříte si účet, stáhnete desktopovou aplikaci a můžete se s chutí pustit do práce.

Jednoduše vyberete PSD soubor s grafickým návrhem a přetáhnete ho do aplikace. Počkáte chvíli, než se soubor nahraje a poté již máte přístup k přesnému grafickému návrhu, ze kterého můžete dle libosti tahat obrázky, texty a kód pro Vaše stránky. Výhodou nahrání souboru je to, že k projektu můžete přistupovat z libovolného místa bez toho, abyste museli soubor vždy někam kopírovat.

První pohled na projekt

Když se návrh nahraje, tak ho dvojklikem otevřete a dostanete základní informace o návrhu např. rozměry či formát. Já nejvíce oceňuji, že je zde seznam všech fontů, které jsou v návrhu použity a proto je mohu rovnou napojit najednou a nestane se, že bych v půlce práce musel přidávat další font. Po přepnutí na panel s vrstvami se dostaneme do podobného zobrazení jako má Photoshop a zde se již objevuje to pravé kouzlo Avocode.

Práce s obrázky a textem

Nejprve se budu zabývat získáváním obrázků z návrhu. Není nic jednoduššího, než pouze kliknout na obrázek v návrhu a stisknout Ctrl+S. Poté jednoduše zvolíte jaký formát (PNG, JPG či SVG) a velikost (100%, 50% či 25%) si přejete a kliknete na export. Toť vše J Výhodou je také to, že můžete vybrat více obrázků najednou a pomocí Ctrl+S uložit všechny vybrané obrázky současně.

Kopírování textů je také velmi snadné. Pro prostý text stačí na prvek s textem kliknout a klasicky stisknout Ctrl+C. Pokud ovšem na text kliknete pravým tlačítkem myši, tak dostanete na výběr jakým způsobem text zkopírovat. Na výběr je např. uložit text jako nadpis první úrovně. Po vložení do kódu se automaticky vloží <h1>Napis</h1>. Další možnosti jsou pochopitelně h2, h3, dále také p či strong.

Každý kodér musí uznat, že je to velkou výhodou. To pravé kouzlo ovšem přichází s prací s bloky a získávání stylu.

Generování stylu

Avocode umí generovat styl přímo po kliknutí na požadovaný prvek. Není důležité, zda používáte klasické CSS, SASS či LESS. V nastavení si jednoduše zvolíte, jaký styl se má generovat. My využíváme LESS a výsledný styl je perfektní. Po kliku na prvek se Vám v pravém sloupci zobrazí kompletní kód, který překopírujete do svých stránek. Znáte rychlejší způsob, jak z návrhu získat kód, než kliknout na prvek, stisknout Ctrl+Shift+C, přepnout do svého souboru se styly a stisknout Ctrl+V? Pokud nějaký znáte, rád se přiučím.

To ovšem samozřejmě není všechno. Každý kodér používající SASS či LESS používá proměnné např. pro barvy. Proměnné jsou další z funkčností Avocode. Téměř žádná práce (cca 3 kliky) a místo color:#4d9100 se Vám již v kódu generuje rovnou color:@c_green (viz. Obrázek níže).

Měření vzdáleností a velikostí

Každý kodér denně zjišťuje vzdálenosti mezi prvky, či uvnitř prvku a také velikost prvků. Na tyto činnosti je Avocode perfektně uzpůsobený. Stačí stisknout R a zapne se nástroj Measure Tool. Když poté kliknete na prvek, tak se Vám v levém spodním rohu zobrazí přesné rozměry v pixelech. Pro získání vzdálenosti od ostatních prvků stačí kurzorem najet na další prvek a zobrazí se všechny vzdálenosti od daného prvku (viz. Obrázek níže).

Shrnutí na závěr

V článku jsem se snažil ukázat jednoduchost práce s programem Avocode. Jednoduše získáte vše, co potřebujete k tvorbě webu velmi rychlým a přehledným způsobem. Pro kodéry je to velmi dobrý pomocník a rozhodně stojí za zkoušku.

Avocode je k dispozici na dobu 14 dní zdarma a tak Vám již nic nebrání vyzkoušet si mnou vyjmenované funkce, ale i řadu dalších, které posunu Vaši práci o další stupeň vzhůru.

Pokud si chcete zrychlit a zpřesnit tvorbu kódu, pak je Avocode to pravé pro Vás. Pokud chcete vše raději vložit do rukou odborníků, přesvědčte se, jak to s Avocode umíme my v Pixelfieldu.