Neomezené možnosti tvorby webových stránek
Zatímco v roce 1995, při vzniku webových gigantů jako je například Amazon, bylo velmi nepravděpodobné, že se budete pyšnit vlastní webovou stránkou, dnes už je doba jiná. Zatímco dříve bylo zapotřebí ovládat umění komunikace ve webovém jazyce, dnes je možné (dokonce i téměř zdarma) během pár kliknutí mít v celku kvalitní prezentační web, vytvořený klidně za jedno odpoledne. Jak je tedy možné, že webový vývojáři mají stále co na práci? On totiž není web jako web.
Stručně ke kořenům webových stránek
Za počáteční bod v historii tvorby webových stránek můžeme (překvapivě) považovat rok 1989, kdy Tim Berners-Lee spolu s Robertem Cailliauem vytváří první funkční návrh systému vzájemně provázaných hypertextových dokumentů. O rok později naprogramoval Berners-Lee první webový prohlížeč a 6. srpna 1991 spustil stránku http://info.cern.ch/, která je aktivní i dnes. Na této stránce popisuje, k čemu World Wide Web slouží, jak jej používat a jak získat internetový prohlížeč.
Zároveň s tím ovšem Berners-Lee vyvíjí i něco, pro webové vývojáře velmi důležitého, a to HTML (Hyper Text Markup Language), značkovací jazyk, který používá definované značky k formátování obsahu. K HTML se časem přidává i CSS (kaskádové styly), které je zodpovědné za lepší grafickou podobu webů, a Javascript, který se zasloužil o interaktivitu. A tyto technologie (ačkoliv jejich vylepšené varianty) se používají pro webový vývoj dodnes. Oproti dřívějšku ale dnešní doba představuje výhody, které nám i bez znalosti kódování a programování umožňují využívat zázraků těchto technologií bez jejich nutné znalosti.
Redakční systémy a website buildery
Možností, jak vytvořit vlastní webovou stránku je dnes mnoho a je poněkud těžké se v jednotlivých nástrojích orientovat. Z takovýchto lákavých nabídek na „stránky za jedno odpoledne“ se tak můžou stát zároveň jakési pasti na začínající podnikatele, kteří od svých webových projektů čekají něco jiného, než jim může daná služba nabídnout. Při tvorbě webových stránek nemůžeme totiž pohlížet pouze na design, jakožto hlavní metriku kvality, ale je potřeba dbát například na optimalizaci pro vyhledávací algoritmy, rychlost načítání stránek a uživatelskou přívětivost. Optimalizace těchto aspektů jsou často na první pohled pro laika neviditelné, ale i zdánlivě neviditelné věci umí u uživatelů webových stránek nadělat solidní nepořádek.
Rychlost webu jako jedna z nejdůležitějších metrik
Rychlost webu osobně považuji za velmi důležitou metriku. Vzpomeňte si například, kolikrát jste opustili webovou stránku jen proto, že se vám zdála pomalá a dlouho se načítala. Čím pomalejší se stránka stává, tím důležitější je mít vybudovanou u jejího návštěvníka silnou motivaci pro pokračování v procházení, což se u začínajících byznys projektů buduje velmi těžko. Pro zkontrolování rychlosti webových stránek, existuje jednoduchý nástroj od Google, Pagespeed Insights. Po zadání url adresy tento nástroj ukáže, jak si daný web stojí v celkovém skóre (0–100) a prozradí, jaké kroky podniknout pro zlepšení tohoto skóre.
Samozřejmě zde nastupuje otázka určité znalosti daného problému, pro jeho efektivní vyřešení. Pagespeed Insights poskytuje doporučení od těch jednodušších, (příliš velká datová velikost obrázků), po ty složitější (zobrazování obrázků ve formátech nové generace).
Odpověď na otázku, proč je rychlost důležitou metrikou v oblasti webových technologií, se ukrývá ve dvou základních důvodech. Tím prvním je SEO, tedy optimalizace pro vyhledávače.
Rychlost webu je totiž důležitým faktorem pro hodnocení stránky vyhledávačem Google a pomalé stránky jsou za jejich špatné technické řešení penalizovány. Vzhledem k rychlosti načítání a SEO je také vhodné zmínit AMP verzi webových stránek. AMP stránky využívají speciální HTML, CSS a JS framework určený ke zrychlení načítání webů, prostřednictvím AMP Cache. V praxi to znamená to, že se stránky načítají téměř instantně (za ideálních podmínek). V Google vyhledávání jsou pak takové weby označeny ikonou blesku a v pozicích se posunují na přední příčky. Druhým důvodem ke sledování metriky rychlosti je přímo lidské přemýšlení. Ačkoliv se řešení rychlosti v řádech milisekund může zdát absurdní, velcí hráči na webovém trhu nám neustále dokazují, že každá nepatrná chvilka se počítá. Například Walmart zjistil, že každá 1 sekunda na jejich webu znamená růst konverzí o 2 %, studie od Akamai zjistila, že jenom 1 milisekunda při načítání webu může srazit konverzní poměr až o 7 %. A nejde tu pouze o konverze, s rostoucí dobou načítání rostou i metriky, jako například bounce rate (okamžité opuštění), či klesá doba strávená na stránce. Jinými slovy, je důležité řešit rychlost webu a ne vždy, zvlášť pokud pro jeho tvorbu využijeme nějaký web builder, jsme schopni ji ovlivnit.
Jak vybrat správný nástroj pro tvorbu webové stránky
Wix, Squarespace, Shopify, Wordpress, nebo český zástupce Webnode. To je jen hrstka z možností, jak rychle vytvořit webovou stránku. Ale jak určit, jaká platforma bude pro naše potřeby nejvhodnější? Na to bohužel neexistuje jednoznačná odpověď.
Při výběru vhodného nástroje je důležité uvážit požadavky, které na web budou kladeny. Wix a Squarespace například nabízejí velmi rychle vytvořené stránky bez znalosti kódování s vcelku příjemným designem, ale jejich nevýhody můžeme hledat například ve dříve zmíněné rychlosti, možnosti pokročilých úprav a SEO. Dalším problémem může být vlastnictví webu, které nikdy nebude pevně v rukou tvůrce stránky. Za měsíční paušální poplatek je možné mít web vyhotovený na serverech těchto služeb, ale není zde možnost přechodu na jiný hosting, ani možnost zobrazení a manipulování se zdrojovým kódem aplikace. Pokud je potřeba mít rychle a téměř bez práce webovou stránku, jsou tyto a jim podobné web buildery přijatelným řešením. Pokud ale je požadavkem vyhotovit o něco flexibilnější (ale také časově náročnější) web bez znalosti programování, východiskem může být například Wordpress. Wordpress je open-source redakční systém, což zní samo o sobě poněkud děsivě. Nicméně, i pro nenáročného uživatele dokáže nabídnout mnohem více než web buildery. Hosting a doménu si uživatel Wordpressu zřizuje sám (což může být pro mnohé nevýhodou, ale sníží se tím za pouze malou časovou investici náklady a zvýší možnosti manipulace s celým projektem). Jelikož je okolo Wordpressu rozšířena velká komunita, vzniká jejím prostřednictvím velké množství podpůrných rozšíření usnadňujících práci s ním, nebo například zlepšujících SEO i rychlost samotné stránky, a na internetu je mnoho návodů, jaké pluginy používat. Tím ale narážíme na kámen úrazu samotné služby, a tím je časová investice, kterou je potřeba Wordpressu věnovat. Opět není potřeba pokročilých schopností s kódováním nebo programováním, ale jen samotná instalace může být pro někoho kritickým krokem a neznalost pluginů a jejich přílišné množství může způsobit nefunkčnost, ztrátu rychlosti, nebo i narušení bezpečnosti celého webu, a proto je potřeba Wordpress nejdříve trochu studovat a poznávat.
Díky možnosti Wordpress volně editovat a upravovat je často používán i samotnými vývojáři, kteří kombinují pohodlnost redakčního systému a známého uživatelského prostředí s vlastní grafikou, úpravou šablon a pluginů a přidáváním funkcionalit.
Jak je to s vývojem od základu
Možnosti popsané v předchozím bloku jsou naprosto relevantním řešením, nicméně stále je možné využít vlastních sil a začít od nuly. Řeč je samozřejmě o webových vývojářích, kteří používají znalosti kódování a programování k vytvoření webu od základu. Abychom pochopili, jak vůbec funguje webový vývoj, je dobré znát pojmy frontend a backend.
Frontend developeři se zaměřují převážně na stránku uživatelského pohledu na web (případně aplikaci, nebo jiný software) a ke své práci primárně využívají jazyky HTML, CSS a Javascript. To znamená, že se frontend developer stará o to, jak weby vypadají. To, že jsou webové stránky responzivní (tzn. webová stránka se přizpůsobuje velikosti okna), nějak barevné, mají nějakou velikost a barvu písma, je práce právě takového developera.
Backend developeři se zase zaměřují na logiku za celou webovou stránkou a jejím spojením se serverem. Backend jako takový je téměř neviditelný, ale velmi důležitý pro uživatele. Dobrým příkladem může být například Facebook. To, co vidí uživatel (svoji zeď, příspěvky a statusy) se zobrazují díky tomu, že backend po propojení s databází přenesl a zpracoval data, která nakonec vykreslí skrze dříve zmíněný frontend.
Frontend i backend se navzájem překrývají a je samozřejmě možné a výhodné umět obě dvě varianty vývoje. Takový vývojářům se říká full-stack developeři. Časová investice pro naučení se těchto dovedností (i pro samostatné varianty) je však, oproti dříve zmíněným možnostem web builderů, obrovská a náklady na kvalitně odvedenou práci webových vývojářů se nepohybují už pouze v nákladech na hosting a doménu, ale v řádech desítek (podle požadavků někdy i stovek) tisíc korun (v případě e-shopů to mohou být i miliony). Takové webové stránky jsou vhodné převážně pro velké a střední podnikatele, kteří potřebují personalizované řešení.
Závěrem
Pro vytvoření webové stránky není potřeba ovládat programování nebo kódování, ale je potřeba ovládnout umění orientace v nepřeberném množství nástrojů a služeb, umožňující nám s webovým vývojem vypomoci. Měli bychom vědět, co se od webu očekává a jestli je námi zvolené řešení dostačující, ať už se jedná o Wix, Wordpress nebo personalizované řešení od webového vývojáře.
ZDROJE:
Total number of Websites [online]. [cit. 2020–06–11]. Dostupné z: https://www.internetlivestats.com/total-number-of-websites/
WWW internet vznikl před dvaceti roky. A nebo před osmnácti? [online]. 2009 [cit. 2020–06–11]. Dostupné z: https://www.idnes.cz/technet/internet/www-internet-vznikl-pred-dvaceti-roky-a-nebo-pred-osmnacti.A090313_163801_sw_internet_vse
Twenty years of a free, open web [online]. 2013 [cit. 2020–06–11]. Dostupné z: https://home.cern/news/news/computing/twenty-years-free-open-web
HTML History [online]. [cit. 2020–06–11]. Dostupné z: https://www.w3schools.in/html-tutorial/history/
Response Times: The 3 Important Limits [online]. [cit. 2020–06–11]. Dostupné z: https://www.nngroup.com/articles/response-times-3-important-limits/
Pagespeed Insights [online]. [cit. 2020–06–11]. Dostupné z: https://developers.google.com/speed/pagespeed/insights/?url=jakubjuscak.sk&tab=desktop
Using page speed in mobile search ranking [online]. 2018 [cit. 2020–06–11]. Dostupné z: https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
AMP weby: Co to je a proč nás to má vůbec zajímat? (+ video) [online]. 2019 [cit. 2020–06–11]. Dostupné z: https://www.vzhurudolu.cz/prirucka/amp
Walmart pagespeed-slide [online]. [cit. 2020–06–11]. Dostupné z: https://www.slideshare.net/devonauerswald/walmart-pagespeedslide/46
6 Reasons Why You Shouldn’t Use Squarespace [online]. [cit. 2020–06–11]. Dostupné z: https://heathertovey.com/blog/why-you-shouldnt-use-squarespace/
Six Reasons Why You Should Not Use WIX, Weebly or Squarespace For Your Website [online]. 2018 [cit. 2020–06–11]. Dostupné z: https://designbuildwebs.com/website-development/six-reasons-why-you-should-not-use-wix-for-your-website/
What Is WordPress? Explained for Beginners [online]. [cit. 2020–06–11]. Dostupné z: https://kinsta.com/knowledgebase/what-is-wordpress/
Backend Developer [online]. [cit. 2020–06–11]. Dostupné z: https://www.ackee.cz/blog/glossary/backend-developer/
Frontend Developer [online]. [cit. 2020–06–11]. Dostupné z: https://www.ackee.cz/blog/glossary/frontend-developer/
Responzivní web: jak vypadá a proč ho mít [online]. [cit. 2020–06–11]. Dostupné z: https://www.active24.cz/jak-na-tvorbu-webu/tvorba-stranek-pokrocila/responzivni-web-jak-vypada-a-proc-ho-mit
Front-end Developer [online]. [cit. 2020–06–11]. Dostupné z: https://www.welcometothejungle.com/cs/articles/front-end-developer-cz
Frontend vs. Backend [online]. 2014 [cit. 2020–06–11]. Dostupné z: https://www.czechitas.cz/cs/blog/zaciname-s-it/frontend-vs-backend
Profese: Full-Stack vývojář [online]. [cit. 2020–06–11]. Dostupné z: https://zooom.cz/profese-full-stack-vyvojar/
What is HTML? [online]. [cit. 2020–06–11]. Dostupné z: https://www.w3schools.com/whatis/whatis_html.asp
Co je to SEO — optimalizace pro vyhledávače? (definice) [online]. [cit. 2020–06–11]. Dostupné z: https://www.pavelungr.cz/definice-co-je-seo/
Jmenuji se Václav Greif a jsem programátor pro WordPress [online]. [cit. 2020–06–11]. Dostupné z: https://wp-programator.cz/
