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