Při tvorbě webových stránek, vývoji eshopů, nebo vývoji webových aplikací kóduje programátor šablony z návrhů od designerů. V tom nám pomáhá několik novinek, moderních technologií a nástrojů. Jedním z nich je i Zeplin, Slim nebo Sass, které máme opravdu rádi a proto je chceme trochu více představit.
Kódování webových stránek od nuly
Kódování webových stránek od nuly je proces, který není nijak zvlášť obtížný, přesto existují věci, na které je dobré si dát pozor. Nutností je znalost jazyků HTML a CSS, a vhod přijde i Javascript. Myslím si, že v dnešní době není důvod nepoužívat při práci s webem nejnovější technologie, protože to značně urychlí vývoj webových stránek a práce s nimi je příjemnější. Při vývoji Rascasone webu jsme používali:
- HTML5 - https://www.w3schools.com/html/html5_intro.asp,
- Slim preprocesor - http://slim-lang.com/index.html,
- CSS3 - http://www.css3.info/,
- Sass preprocesor - https://sass-lang.com/,
- a jQuery - https://jquery.com/.
Zeplin: pro lepší práci při tvorbě webových stránek
Zeplin je šikovná webová aplikace, kde může uživatel vytvářet a sdílet wireframes nebo celý design webu.
Alternativy k Zeplinu
Alternativ existuje několik. Pár jsme jich vyzkoušeli, pár jich ještě čeká na otestování.
Nejznámnější alternativy jsou:
- Invision - https://www.invisionapp.com,
- Avocode - původem z České republiky - https://avocode.com,
- Figma - https://www.figma.com,
- Marvel - https://marvelapp.com,
- Supernova - https://supernova.io.
Element inspektor
To ale zdaleka není vše, co tento nástroj nabízí.
Při otevření jednotlivých návrhů můžeme po kliknutí na element zjistit jeho vlastnosti jako velikost, barvu a další.
Generování CSS kódu
Zeplin dokonce vygeneruje jakýsi CSS kód, který by měl pomoct nastylovat prvek, aby vypadal jako v návrhu.
Nenahradí to psaní kódu, ale zkopírováním pár řádků kódu si můžete ušetřit chvilku času.
Responzivní šablona je v roce 2019 nutnost
Při psaní webů je důležité myslet už od začátku na responsibilitu, a při vývoji podle Zeplinu se na tom nic nemění, i když máte třeba návrh jen na velkou obrazovku.
S pružností webu hodně pomohou technologie jako
- Flexbox - https://www.w3schools.com/css/css3_flexbox.asp,
- Bootstrap - https://getbootstrap.com/,
- CSS grid - https://www.w3schools.com/css/css_grid.asp,
které se soustředí na pozicování prvků po stránce s dynamickou velikostí.
Myslet si ale, že použitím těchto layoutů se vyřeší vše, by byla chyba.
Nadále platí, že je potřeba promýšlet pozicování prvků, aby se váš web nerozpadl, když si ho uživatel otevře na telefonu.
Sass preprocesor pro snadnější stylování webu
Použití Sass preprocesoru je dobrý způsob, jak udržet pořádek ve vašem kódu.
Toto rozšíření klasického CSS nabízí extra funkcionality, které lze využít v náš prospěch.
Můžeme díky tomu například vytvořit soubor barvy.scss, kde budou předdefinované proměnné všech možných barev, které v projektu používáme.
To pomůže nejen k čistšímu kódu, ale také ke snazším úpravám v budoucnu.
Vnořování selektorů
Jedna z mnoha dalších vychytávek, která si myslím, že je velmi užitečná, je možnost vnořování selektorů.
Vytvořená hierarchie je lépe čitelná a také užitečná, protože pokud potřebujeme psát kód, který má ovlivňovat například jen jednu stránku našeho webu, není nic jednoduššího než kód obalit příslušným wrapperem, a můžeme vesele psát dál.
Postup při vývoji webu podle šablony v Zeplinu je uživatelsky přívětivý, a ničím moc nepřekvapí.
Možnost zobrazení vlastností elementů jako je barva a velikost usnadní vývojářovi práci, a předejde nesrovnalostem ve výsledném produktu.
