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

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