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

Vít Uličný
·03/07/2024
·5 min.
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ří:
- 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/,
- jQuery - https://jquery.com/.
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.

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.

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 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:
- 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.
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.
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:
- Flexbox - https://www.w3schools.com/css/css3_flexbox.asp,
- Bootstrap - https://getbootstrap.com/,
- CSS grid - https://www.w3schools.com/css/css_grid.asp.
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í.
Máte nápad na nový projekt?
Popište nám ho! Rádi odpovíme na všechny vaše dotazy, nebo rovnou domluvíme termín schůzky.
Ozvěte se Vítovi! Vše s vámi projedná a probere.
Vít Uličný
Zakladatel & CEO
