background design element dropbackground design element dropbackground design element drop

Tvorba webových stránek: nakódování šablony do HTML, CSS

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:

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.

Nástroj pro tvorbu webových stránek Zeplin
Nástroj pro tvorbu webových stránek Zeplin

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:

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ší. 

Tvorba webovych stranek Zeplin - detail vzdalenosti a velikosti
Tvorba webových stránek - Zeplin - detail vzdálenosti a velikosti

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. 

Tvorba webovych stranek Zeplin - detail CSS a stylů
​​​Zeplin - detail CSS a stylů

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

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.