background design element dropbackground design element dropbackground design element drop

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


Adam Peklák
Aktualizováno:31.08.2021· 5 min. čtení
Facebook iconTwitter iconLinkedIn icon

Tvorba webových stránek nebo eshopu na zakázku je postavena na práci programátora, který kóduje šablonu z návrhu od web designerů a následně ji doplňuje o příslušnou funkcionalitu. K tomu využívá řadu moderních technologií a nástrojů, mezi něž patří i Zeplin, Slim nebo Sass. Jak tyto nástroje při tvorbě webu pomáhají?

Tvorba webových stránek a užitečné technologie

Tvorba webových stránek i eshopu stojí stejně jako vývoj webových aplikací na dvou základních stavebních kamenech – HTML a CSS. Ty se pak dále kombinují s JavaScriptem, případně jinými prostředky, které umožňují vytvářet pokročilou funkcionalitu a přidávat interaktivní prvky nebo animace.

Výhodou těchto moderních webových technologií pak není pouze možnost vytvářet moderní webové stránky s pokročilými funkcemi, ale i urychlení práce vývojářů čili levnější a efektivnější tvorba webu/eshopu či vývoj webových aplikací.

Mezi užitečné technologie, hojně využívané v oblasti tvorby digitálních produktů, bezpochyby patří:

Tvorba webových stránek na míru: kódování šablony a Zeplin

Dalším šikovným pomocníkem při tvorbě webu či eshopu je webová aplikace Zeplin. Platforma Zeplin umožňuje vytvářet a sdílet připravené wireframy i celé designy webu a usnadňuje tak spolupráci mezi jednotlivými členy týmu.

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

Sdílení a příprava wireframu či web designu ovšem není jediné, co Zeplin umí. Prostřednictvím Element inspektoru usnadňuje tvorbu webových stránek také v tom ohledu, že po kliknutí na daný prvek stránky vypíše jeho velikost nebo barvu.

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

Díky tomu může vývojář snáze přizpůsobit kód původnímu web designu. K tomuto účelu slouží i generované CSS, které sice nenahradí vlastní kódování, ale může ušetřit spoustu času.

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

Tvorba webových stránek 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.

Alternativy k Zeplinu

Zeplin pak není jedinou platformou, která umožňuje sdílení web designu nebo generování kódu. Alternativou může být:

Z desktopového softwaru lze ještě zmínit Adobe Xd, který je součástí Creative Cloudu společnosti Adobe. Stejně jako Figma či Zeplin zprostředkovává nejen sdílení, návrh wireframu a web designu, ale i realizaci prototypu, generování CSS a export jednotlivých prvků.

Sass preprocesor pro snadnější stylování webu

Práci s CSS může dále usnadnit také preprocesor Sass, který pomáhá udržovat pořádek v kódu. Jedná se o rozšíření klasických kaskádových stylů, nabízející extra funkcionalitu. Můžete díky tomu například vytvořit soubor barvy.scss, kde budou předdefinované proměnné všech barev použitých v projektu.

To pomůže nejen k čistšímu kódu, ale také snazším úpravám v budoucnu.

Vnořování selektorů

Jedna z mnoha dalších vychytávek, která je velmi užitečná, je možnost vnořování selektorů.

Vytvořená hierarchie je lépe čitelná a také praktická, protože pokud potřebujete psát kód, který má ovlivňovat například jen jednu stránku webu, není nic jednoduššího než kód obalit příslušným wrapperem, a můžete vesele psát dál.

tvorba webových stránek Zeplin

Responzivní web design jako zlatý standard

Tvorba webových stránek a eshopu se dnes již neobejde bez responzivního designu. S pružností webu hodně pomohou technologie jako:

Všechny z nich se používají k pozicování prvků na stránce s dynamickou velikostí. Pouhé použití zmíněných technologií ovšem nestačí. 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 a mobilní verzi webu navrhovat zvlášť.

Se všemi zmíněnými technologiemi a popsanými postupy máme zkušenosti i u nás v Rascasone. Pokud potřebujete s tvorbou webu či eshopu pomoct, tak nás neváhejte kontaktovat. Postaráme se o kompletní realizaci, od návrhu designu až po nasazení.


Potřebujete poradit?