VŠB – Technická univerzita Ostrava Fakulta elektrotechniky a informatiky
Katedra informatiky
Absolvování individuální odborné praxe Individual Professional Practice in the
Company
2018 Lukáš Valíček
Rád bych poděkoval firmě Religis s.r.o., která mi umožnila absolvovat tuto praxi a panu doc. Ing. Petru Grajdošovi, Ph.D., za pomoc při vypravování této praxe.
Abstrakt
V této bakalářské práci popisuji průběh bakalářské praxe ve společnosti RELIGIS s.r.o, ve které jsem působil jako Front-end vývojář webových stránek. Nejprve uvedu zaměření společnosti a popis pozice, kterou jsem během praxe vykonával. Poté bude následovat popis jednotlivých projektů a úkolů, které jsem řešil.
Hlavním cílem bylo vytvořit univerzální šablonu, kde jsem musel analyzovat různé možnosti vývoje, zhodnotit jejich klady i zápory, představit je mým vedoucím a následně je realizovat.
Dále jsem se podílel i na tvorbě nového eshopu a provozních úpravách již fungujících řešení.
Klíčová slova: RELIGIS s.r.o, bakalářská praxe, front-end, HTML, Latte, SASS, JavaScript
Abstract
In this bachelor thesis I describe process of individual professional practice in the company RELIGIS s.r.o, in which I was a Front-end developer of web pages. First I will describe special- ization of company and my position, which I worked on. Then I will describe the projects and tasks I have addressed.
The main objective was create a universal template where I had to analyze different devel- opment possibilities, evaluate their pros and cons, introduce them to my supervisors and then implement them. I also worked to the creation of a new eshop and to the operational adjustments of the already working solutions.
Key Words: RELIGIS s.r.o, bachelor thesis, front-end, HTML, Latte, SASS, JavaScript
Obsah
Seznam použitých zkratek a symbolů 8
Seznam obrázků 9
Seznam výpisů zdrojového kódu 10
1 Úvod 11
2 Popis společnosti a pracovní zařazení 12
2.1 Popis společnosti . . . 12
2.2 Pracovní zařazení . . . 12
3 Zadané úkoly 13 3.1 Představení zadaných úkolů a jejich časová náročnost . . . 13
3.2 Použité technologie . . . 13
3.3 Hlavní úkol – Univerzální šablona . . . 15
3.4 Nový eshop babyplace.cz . . . 27
3.5 Vedlejší úkoly . . . 30
4 Závěr 31
Literatura 32
Seznam použitých zkratek a symbolů
CMS – Content management system
CRM – Customer Relationship Management
Git – Version Control System
SVN – Apache Subversion
HTML – Hyper Text Markup Language
Latte – Template Engine for PHP
PHP – Hypertext Preprocessor
CSS – Cascading Style Sheets
SASS – Syntactically awesome style sheets
LESS – CSS Pre-Processors
JS – JavaScript
AJAX – Asynchronous JavaScript and XML
SVG – Scalable Vector Graphics
JPEG – Joint Photographic Experts Group
PNG – Portable Network Graphics
Sprite – Bitmap with more images HTTP – Hypertext Transfer Protocol HTTP2 – Hypertext Transfer Protocol v2
W3C – World Wide Web Consortium
8
Seznam obrázků
1 Ukázka porovnání změn v programu WinMarge . . . 14
2 Více kreslících pláten v programu Adobe Illustrator CS6 . . . 16
3 Rozšíření CSS Hat do Adobe Photoshop . . . 18
4 Překrytí obrázku přes webovou stránku pomocí rozšíření PerfectPixel . . . 18
5 Ukázka nástroje Developer Tools v prohlížeči Google Chrome . . . 19
6 Ukázka makra dump . . . 23
7 Ukázka výpisu variant na eshopu babyplace.cz . . . 27
8 Ukázka vygenerovaného sprite . . . 29
Seznam výpisů zdrojového kódu
1 Import fontů do CSS . . . 17
2 Špatně napsaný kód v SASS a vygenerované CSS . . . 20
3 Správná úprava kódu z výpisu 2 . . . 21
4 Příklad použití SASS . . . 21
5 Ukázka makra n:if . . . 23
6 Ukázka makra n:foreach . . . 24
7 Ukázka překladového modulu . . . 24
8 Zjednodušená ukázka dynamického načítání produktů . . . 25
9 Ukázka volání minifikátoru pro každý soubor JS nebo CSS . . . 26
10 Část konfigurace pro vygenerování sprite . . . 28
11 Ukázka vygenerovaného SASS souboru . . . 28
12 Zjednodušená ukázka původního stavu filtru produktů . . . 30
10
1 Úvod
V této práci popíši průběh a přínos mé bakalářské práce, která proběhla formou vykonání od- borné praxe ve firmě. Tuto možnost jsem si vybral, protože jsem chtěl získat během studia i praktické znalosti z oboru, které mi při studiu chyběly.
Jelikož se již dlouhou dobu zajímám o vývoj a optimalizaci webových stránek a eshopů, hledal jsem společnost, která primárně působí v tomto oboru. Navíc jsem se chtěl naučit i nové technologie, které jsem neznal a pracovat na velkých projektech. Proto jsem ze seznamu firem, které nabízejí možnost bakalářské praxe oslovil společnost RELIGIS s.r.o., která se specializuje na vývoj eshopů na míru a následný marketing.
Do společnosti jsem nastoupil jako Front-end vývojář webových stránek a připojil se k týmu vývojářů. Hlavním cílem mé praxe bylo vytvořit univerzální šablonu pro nově vznikající eshopy, která usnadní a hlavně urychlí nasazování vzhledu nových eshopů. Dále jsem upravoval již exis- tující weby, přidával vzhled novým prvkům a opravoval validní chyby. V druhé polovině praxe jsem na již vytvořené šabloně nasazoval vzhled nového eshopu.
V následujících bodech této práce se zaměřuji na popis společnosti, použité technologie, pracovní náplň, popis jednotlivých úkolů a problémů, na které jsem narazil a jejich řešení. Hlavní pozornost je zde kladena na univerzální šablonu, které jsem se věnoval převážnou část praxe. Jsou zde popsány jednotlivé kroky, které byly realizovány a jejich alternativy. Závěr práce obsahuje zhodnocení dosažených výsledků, získané praktické a teoretické znalosti a celkový přínos praxe.
2 Popis společnosti a pracovní zařazení
2.1 Popis společnosti
Společnost RELIGIS s.r.o. (dále jen Religis) vznikla v roce 2001 a specializuje se na vývoj eshopů na míru a následný marketing, aby byl eshop co nejvíce ziskový. Základní rysy, na kterých společ- nost staví, jsou kvalitně řízené projekty a pochopení obchodní modelu klientů, aby pro ně mohla připravit ideální řešení.[1]
Proto má Religis svůj vlastí CMS systém pro eshopy, který přizpůsobuje na míru svým klientům. Systém obsahuje řadu funkcí a modulů, tak aby poskytl majitelům eshopů co největší pohodlí a širokou možnost personalizace. Jako příklad můžu uvést napojení na CRM systémy a grafiku na míru. Společnost nepoužívá šablony, které by jen mírně upravovala, ale každý zákazník má svou vlastní individuální šablonu.
Klienti společnosti jsou například eshopy motozem.cz,hobynaradi.cz nebobabyplace.cz 2.2 Pracovní zařazení
Po přihlášení na nabízenou pozici jsem absolvoval pohovor ve společnosti, kde jsem se dozvěděl používané technologie a informace o úkolech, které firma chce abych realizoval během praxe.
Po absolvování pohovoru jsem nastoupil do firmy na pozici Front-end vývojáře webových stránek a přidal jsem se to týmu vývojářů. Sdílel jsem s nimi kancelář což pro mě bylo výhodou, protože jsem hlavně ze začátku moc nevěděl, jak mám realizovat zadané úkoly a často jsem tyto úkoly konzultoval se zkušenými kolegy, kteří seděli vedle mě. Ve společnosti jsem byl na ba- kalářskou praxi jen já, takže kolegové měli dostatek času se mi věnovat, abych se toho naučil co nejvíce.
Mým úkolem nebylo jen psaní kódu, ale často jsem také analyzoval vzniklé problémy a navr- hoval alternativy jejich řešení, které jsem poté prezentoval kolegům a snažil si obhájit své řešení.
12
3 Zadané úkoly
3.1 Představení zadaných úkolů a jejich časová náročnost
• Univerzální šablona - Hlavním cílem odborné praxe bylo vytvořit novou univerzální ša- blonu pro rychlejší nasazování vzhledu eshopu. V době mého nástupu na odbornou praxi, byla výchozí šablona sestavená z tabulek, nebyla responsivní a hlavně nedodržovala jed- notný styl psaní kódu. Některé soubory používaly na odsazení mezery, jiné zase tabulátory a v souborech byla špatná orientace, protože nebylo dodržováno zanořování. Navíc některé funkční prvky nefungovaly správně, a proto se musely opravovat v každém nově vznikajícím eshopu, což zvyšovalo časovou náročnost jednotlivých realizací.
• Nasazení nové šablony na eshop babyplace.cz - Po úspěšném dokončení nové vý- chozí šablony, jsem ji začal nasazovat na nově vznikající eshop pro společnost Baby Place.
Od grafika byly připraveny grafické návrhy pro jednotlivé stránky a bylo nutné je převést do funkčních prvků.
• Vedlejší úkoly - Malou část mé odborné praxe jsem se věnoval i ostatním drobným úpravám na již fungujících eshopech, jako bylo například nastylování nové komponenty na eshopu hobynaradi.cznebo úprava validity eshopukvalitex.sk.
Přibližná časová náročnost jednotlivých úkolů
Činnost / úkol Počet dní
Příprava pc pro práci, pochopení systému a učení nových technologií 3
Hlavní úkol – univerzální šablona 35
Nový eshop babyplace.cz 10
Vedlejší úkoly 2
3.2 Použité technologie
• Verzovací systém- Předtím, než se začalo pracovat na nové výchozí šabloně pro eshopy, bylo nutné se seznámit s verzovacím systémem Git. Před nástupem do firmy, jsem znal pouze SVN, které je v některých věcech podobné, ale neumí toho tolik jako Git. Nainsta- loval jsem si tedy program TortoiseGit, který se ve firmě používá pro správu repozitářů.
Ze začátku mi stačilo vědět pouze, jak stáhnu repozitář, jak ho aktualizuji, jak odešlu mé úpravy a jak vytvořím novou větev. Postupně v průběhu praxe bylo nutné začít po- užívat i další výhody systému pro správu verzí jako jsou například zobrazení logu změn, nebo sloučení větví. Důležitým nástrojem byl pro mě i WinMerge, který přehledně zob- razí změny v souborech. Kolegové mi vždy vysvětli základní funkčnost a poté mě nechali,
abych si zkoušel různé možnosti. Získání znalostí ohledně Git-u považuji během mé praxe za jeden z nejdůležitějších bodů, protože se dnes velice často využívá.
Obrázek 1: Ukázka porovnání změn v programu WinMarge
• HTML - HyperText Markup Language (zkratka HTML) je v informatice název značko- vacího jazyka používaného pro tvorbu webových stránek, které jsou propojeny hypertex- tovými odkazy. HTML je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. [2]
• Latte- Byl využit šablonovací systém Latte, který se ve společnosti využívá pro rychlejší a bezpečnější práci. Tento systém má již v sobě ošetřené potenciální zranitelnosti jako například XSS.
• SASS - Sass je kompilovaný jazyk, který rozšiřuje syntaxi CSS o proměnné, cykly, pod- mínky, mixiny, funkce aj. Šetří čas, množství napsaného kódu, je přehlednější a snadněji se udržuje. [3]
• JavaScript a AJAX- JavaScript pracuje na straně klienta v prohlížeči a přidává webo- vým stránkám dynamiku a interaktivitu. S využitím AJAX se při změně obsahu nemusí obnovovat celá stránka, ale načte se pouze její změněná část.
• JIRA - Tiketovací systém se využívá skoro v každé firmě. Ve firmě se využívá JIRA pro správu vedení projektů a úkolů. Tento systém jsem osobně využíval hlavně v koncových fázích jednotlivých úkolů, kdy tester testoval, co jsem napsal, jestli to funguje správně a vytvářel úkoly k jednotlivým stránkám, kde sepisoval jeho poznámky a připomínky, které bylo nutné poté zpracovat.
14
• Bash - Tento jazyk byl využit jen velice okrajově a to jen pro vytvoření minifikovaných verzí JavaScriptových a CSS kódů.
3.3 Hlavní úkol – Univerzální šablona
V následujících kapitolách je detailně popsán postup prací na tomto úkole. Příprava, postupy při řešení jednotlivých částí, problémy, které se vyskytly během realizace a popis jejich řešení.
3.3.1 Příprava
Před začátkem prací bylo nutné nejprve detailně poznat systém, který je velice obsáhlý a má přes 280 šablon. Navíc skoro vše lze ovládat z administrace. Například i to, jestli se po vložení pro- duktu, který má varianty do košíku zobrazí popup okno s výběrem konkrétní varianty, nebo jestli je uživatel přesměrován na stránku pro výběr varianty. Jelikož byl úkol vytvořit novou univer- zální šablonu, musely být připraveny oba možné scénáře. Proto bylo potřeba vědět, co vše lze v systému nastavovat a jak se tyto změny projeví.
Prošel jsem si tutoriál pro šablonovací systém Latte, který se ve firmě používá. Naučil se, jak fungují makra, n:makra, n:třídy, výpis proměnných, cykly a hlavně dump, který jsem požíval skoro pořád, abych zjistil, jaké vlastnosti mají jednotlivé objekty a mohl je vypsat.
Dále bylo nutné nastudovat si syntaxi CSS preprocesoru SASS, který jsem před nástupem do firmy neznal. Znal jsem pouze jeho alternativu CSS preprocesor LESS, který je velice podobný, takže využívat SASS po prostudování rozdílů mi nedělalo žádný problém.
Protože se musí SASS překládat na CSS, aby zápisu rozuměli prohlížeče, musel jsem si připra- vit kompilátor. Pro kompilaci byla využita knihovna Compass, která řeší překlad velice dobře a hlavně rychle. Vždy, před začátkem prací bylo nutné spustit kompilátor, který kontroloval změny v souborech a pokud se nějaký soubor změnil, okamžitě provedl nový překlad do CSS.
Rychlost a automatika překladu byla pro mě důležitá, protože čekat na překlad několik sekund nebo po každé změně spouštět překlad by mě velice zdržovalo.
3.3.2 Font pro ikony
V grafický návrzích byly použity vektorové ikonky a po domluvě s kolegy bylo nutné vytvořit font, který by obsahoval pouze ikony, které se používají. Tím důvodem byla hlavně velikost fontu, protože existující alternativa jako je například Font Awesome [4] měla v září 2017, kdy se začínalo pracovat na tomto úkole celkem 675 ikon a velikost fontu byla 96 kB. K tomu je nutné připočíst ještě i CSS, kde se definují jednotlivé ikony. Velikost tohoto souboru byla 31 kB v minifikované verzi. Navíc, některé ikonky, které byly použity v grafických návrzích, byly dosti specifické a tato knihovna neobsahovala alternativy těchto ikon.
Protože jsem vlastní font pro ikony nikdy nevytvářel, bylo nutné začít hledat na internetu ně- jaké nástroje, které by mi s tímto problémem pomohly. Přečetl jsem si několik anglických článků a našel webové nástroje, které umí vytvořit vlastní font. Byly to Fontastic [5] a IcoMoon [6].
Po prostudování dokumentace jednotlivých nástrojů a vyzkoušení funkcí jsem vybral nástroj IcoMoon. Hlavně kvůli detailně sepsané dokumentaci a pěknému uživatelskému prostředí.
Začal jsem tedy pracovat s touto aplikací a zjistil, že ikony musí být připraveny ve formátu SVG. Na počítači, s kterým jsem pracoval byly nainstalovány programy Adobe Photoshop CS6, který jsem používal každý den, pro řezání grafiky i Adobe Illustrator CS6, který jsem využil jen při vytváření fontu s ikonkami. Adobe Photoshop je bohužel pouze rastrový editor a neumí uložit inteligentní objekt do SVG, ale skvěle funguje propojení s Adobe Illustrator [7], který pracuje s vektory. Každou ikonu bylo nutné si převést do vektorového editoru a upravit tak, aby byla ve vektorech a měla černou barvu. Adobe Illustrator umožňuje využít více kreslících pláten vedle sebe což je výhodou protože lze vidět rozdíly mezi ikonami. Každou upravovanou ikonu bylo nutné uložit do formátu SVG a vložit do nástroje IcoMoon App.
Obrázek 2: Více kreslících pláten v programu Adobe Illustrator CS6
Vlastní font obsahoval celkem 37 ikon a celkově byla jeho velikost přibližně o 88% nižší, než kdybychom využili knihovny Font Awesome.
Porovnání velikosti vlastního fontu a knihovny Font Awesome Font Awesome Vlastní font Rozdíl v % Rozdíl v kB
Velikost fontu 96 kB 11 kB 88,54 85
Velikost CSS 31 kB 4 kB 87,10 27
Celková velikost 127 kB 15 kB 88,19 112
3.3.3 Fonty pro texty
Při tvorbě šablon grafik použil dva fonty pro písmo Ubuntu a Hind. Ubuntu se používá pro nad- pisy a stačilo připravit pouze řezy pro tučnější a tučné písmo, zatím co font Hind se používá pro texty na webu a musí tedy obsahovat více řezů, konkrétně tři. Klasický (regular), tučnější (semibold) a tučný (bold).
16
Oba používané fonty jsou k dispozici ve formátu ttf a musely být převedeny do woff, protože se tento formát fontu používá pro webové stránky a má větší podporu ze strany prohlížečů. [8]
Na převod byl využit online nástroj na webuhttps://fontsquirrel.com, ve kterém si můžete naklikat jaké formáty potřebujete, jaké znakové sady má font umět nebo jestli chcete exportovat fonty do Base64. Jelikož se ve firmě dělají weby pro český, slovenský, popřípadě anglický trh, byly zvoleny pouze tyto znakové sady, aby vygenerovaný font nebyl příliš velký.
Nyní byly připravené fonty a musely být naimportovány do stylu webu. Každá rodina fontů byla importovaná vždy se stejným názvem a jen s upravenou šířkou, aby se při použití nemusel měnit font. Zmiňuji to kvůli časté praktice webových vývojářů, kteří naimportují stejné fonty patřící do stejné rodiny jen v jiných řezech s jinými názvy a při použití musí měnit rodinu fontu, místo toho, aby jen změnili šířku.
@font-face {
font-family: ’Hind’;
font-style: normal;
font-weight: 400;
src: url(’../../../font/default-2/Hind_400.woff’) format(’woff’);
}
@font-face {
font-family: ’Hind’;
font-style: normal;
font-weight: 600;
src: url(’../../../font/default-2/Hind_600.woff’) format(’woff’);
}
Výpis 1: Import fontů do CSS
3.3.4 Řezání grafiky
Na začátku práce jsem dostal 17 grafických návrhů stránek, které nakreslil grafik v programu Adobe Photoshop. Nejdůležitější grafické návrhy byly pro hlavní stránku, výpis produktů, detail produktu a košík. Byly ale připraveny podklady i pro přihlášení, registraci, vyhledávání nebo chybovou stránku 404.
Pro řezání grafiky byl využit program Adobe Photoshop CS6 s rozšířením CSS Hat [9].
Toto rozšíření je velice užitečné, protože stačí označit konkrétní vrstvu s textem a rozšíření okamžitě vypíše styl této vrstvy v CSS nebo preprocesorech. Navíc je možné si zvolit, jestli chcete generovat i prefixové zápisy pro starší prohlížeče. Nejčastěji jsem používal toto rozšíření u textů, aby věděl, jakou mají barvu, velikost nebo font bez nutnosti přejít do detailu konkrétní vrstvy, ale rozšíření lze využít i pro stíny nebo přechody v pozadí stránky, které přesně vygeneruje.
Vývojáři tohoto rozšíření vyvinuli i program, který je ještě propracovanější a umí si dokonce
i definovat vlastní proměnné a mixiny v presprocesorech s názvem Avocode [10]. Bohužel firma nemá licenci na tento program, takže jsem si ho pouze vyzkoušel díky 14-ti denní testovací licenci.
Obrázek 3: Rozšíření CSS Hat do Adobe Photoshop
Ve firmě je standard, že výsledný eshop musí vypadat stejně, jako připravené grafické návrhy, proto jsem začal využívat rozšíření do prohlížeče s názvem PerfectPixel [11]. Toto rozšíření umož- ňuje překrýt obrázek přes webovou stránku a podle něj stylovat a pozicovat prvky na stránce.
Každý připravený grafický návrh musí být uložen jako obrázek ve formátu JPEG nebo PNG, protože toto rozšíření dokáže pracovat pouze s těmito formáty. Uložený obrázek se poté může nahrát do nástroje PerfectPixel a použit, jako vzor.
Obrázek 4: Překrytí obrázku přes webovou stránku pomocí rozšíření PerfectPixel Bohužel při znovu načtení stránky se musí toto rozšíření znovu spouštět a v případě, že jsou uložené v obrázcích celé stránky a tudíž mají obrázky větší velikost, není inicializace rozšíření okamžitá. Proto bylo nutné najít nástroj, který by urychlil práci tím, že by se nemusely stránky obnovovat po každé změně. Našel jsem opět rozšíření do prohlížeče, které se jmenuje CSS Re- olader [12]. Toto rozšíření dokáže stisknutím jedné klávesy aktualizovat CSS styly bez nutnosti
18
znovu načtení stránky a díky tomu zůstane aktivní i rozšíření PerfectPixel. Díky kombinací těchto dvou rozšíření jde velice zrychlit a ulehčit práci.
Dalším důležitým nástrojem byl pro mě Developer Tools v prohlížeči Google Chrome (dále jen DevTool). Díky kombinaci tohoto nástroje a rozšíření PerfectPixel jsem vždy umístil prvek stránky na přesnou pozici, dal mu odpovídající velikost, vzhled a chování pomocí CSS přímo v DevTool a následně toto CSS zkopíroval do zdrojového kódu a upravil pro preprocesor (napří- klad změna barvy písma na hodnotu proměnné).
Obrázek 5: Ukázka nástroje Developer Tools v prohlížeči Google Chrome
3.3.5 Stylování webu
Ve firmě se optimalizují webové stránky pro všechny prohlížeče včetně Internetu Exploreru 9.
Z tohoto důvodu bylo vyloučeno používat některé konstrukce v CSS jako například rodinu pří- kazůflex. Pro ověření, které příkazy lze použít byl využit webhttps://caniuse.com, který vy- hledá jednotlivé příkazy a přehledně graficky zobrazí, v jakém prohlížeči je příkaz podporován, kde není a kde je podporován jen částečně.
Standard všech dnes vyvíjených stránek je responsivní design, což je přizpůsobení obsahu webové stránky pro každé rozlišení monitoru. Od velkých obrazovek, až po malé mobilní tele- fony. Proto musel být připraven i responsivní design. Ve firmě se využívá přístup desktop first, což je nejprve napsání vzhledu pro velké monitory a následné zmenšovaní a skrývaní obsahu, aby vynikly důležité informace. Osobně preferuji přístup mobile first, který nejprve přizpůsobí web pro malé rozlišení a poté zvětšuje a přidává prvky na stránku. Protože firma používá jako standard přístup desktop first a grafik kreslí vždy jen grafiku pro desktop, používal jsem během mé bakalářské praxe tento přístup také.
Protože se ve firmě používá preprocesor, konkrétně SASS a já vytvářel univerzální šablonu, vytvořil jsem si několik proměnných pro barvy a ty poté používal při určování vzhledu jednot- livých elementů na stránce. Ve výsledku to znamená, že v případě tvorby nového webu na této šabloně se může změnit jen hodnota zhruba 10-ti proměnných a změní se barvy nadpisů, textů, tlačítek nebo ikon na celém webu což velice urychlí nasazování nových šablon. SASS obsahuje i funkce, jako jsou například lighten nebo darken, které zesvětlí nebo ztmaví zvolenou barvu o počet zadaných procent. Tyto funkce se často využívají například u změny barvy tlačítka při hover efektu.
Preprocesory pro CSS umožňují také zanořování elementů, což urychlí psaní kódu, ale vývojář musí více přemýšlet nad tím, co píše. Protože díky zanořování lze také snadno napsat kód, který je po kompilaci do CSS mnohem delší, než kdybychom ho napsali v klasickém CSS.
// kod v preprocesoru SASS .location_index,
.location_category_getDetail, .location_product_getDetail { .product.listItem.layoutG, .product.listSearch.layoutG {
background: $action-color;
} }
// vygenerovane CSS
.location_index .product.listItem.layoutG,
.location_category_getDetail .product.listItem.layoutG, .location_product_getDetail .product.listItem.layoutG, .location_index .product.listSearch.layoutG,
.location_category_getDetail .product.listSearch.layoutG, .location_product_getDetail .product.listSearch.layoutG {
background: #ff0000;
}
Výpis 2: Špatně napsaný kód v SASS a vygenerované CSS
Tato ukázka kvůli jednoduchosti obsahuje pouze jedno zanoření, ale i přesto můžeme vidět, že při zvolení delších názvu tříd nebo identifikátorů je vygenerovaný CSS kód velice dlouhý.
Používají se zde závislosti, které jsou zbytečné a na jednu obalovací třídu se aplikuje jen na- příklad půlka kódu. Mám osobní zkušenost, kterou jsem získal ještě před začátkem bakalářské praxe, že při přechodu z čistého CSS do nějaké varianty preprocesoru dojde nejprve k rapidnímu nárůstu velikosti vygenerovaného kódu (někdy i o 75%), než si vývojáři uvědomí, že musí psát kód malinko jinak. V uvedeném příkladu se nastavuje styl pořád stejnému elementu, jen na ji- ných stránkách a jednou je to klasický výpis produktů a podruhé to je výsledek vyhledávání.
20
Ideální je přidat tomuto elementu vždy jednu společnou třídu a nastavit styl pouze této třídě.
Výsledný ideální kód by tedy vypadal takto.
// kod v preprocesoru SASS
.product.universalListItem.layoutG { background: $action-color;
}
// vygenerovane CSS
.product.universalListItem.layoutG { background: #ff0000;
}
Výpis 3: Správná úprava kódu z výpisu 2
Vytvořil jsem si mixiny, které mi zrychlovali práci. Jelikož bylo nutné optimalizovat i pro pro- hlížeče, které potřebují prefixový zápis některých konstrukcí jako je napříkladtransition.
Zdrojové kódy SASS jsem rozdělil do 20-ti souborů pro snazší orientaci v kódu. Soubory jsou pojmenovány podle toho, co právě definují (například _productList.scss).
Jelikož musela být hodně optimalizována rychlost načítání webu, generované CSS bylo rozdě- leno do tří souborů. Jeden se načítá v hlavičce a obsahuje styly pro základní a okamžitě viditelné prvky stránky jako je například hlavička. Druhý obsahuje zbytek stylu pro monitory a načítá se až později. Jako poslední se v případě potřeby načítá styl pro tisknutelnou verzi stránek, kde je například hodně zjednodušena hlavička, odstraněna patička s odkazy na textové stránky nebo zjednodušen výpis produktů.
@mixin transition($duration) {
-webkit-transition: all $duration ease;
-moz-transition: all $duration ease;
-ms-transition: all $duration ease;
-o-transition: all $duration ease;
transition: all $duration ease;
}
.paginator {
border-top: 1px solid $default-border-color;
.paginator-item {
@include transition(0.3s);
background: darken($action-color, 10%);
} }
Výpis 4: Příklad použití SASS
Do budoucna, až se firma rozhodne nepodporovat Internet Explorer 9, mohl by se styl upravit za pomocí rodiny příkazůflex. Díky tomu by se mohly přeskládávat prvky na stránce bez zásahu do HTML a navíc by to i ulehčilo práci při přizpůsobování v responsivním designu. Díky těmto příkazům můžeme například zobrazovat prvky v jednom řádku a při responsivním zobrazení použitím dvou příkazů změnit zobrazení tak, aby byly prvky pod sebou a v opačném pořadí.
3.3.6 Stylování emailu
Nová univerzální šablona obsahuje i informační emaily, které se posílají při vytvoření objednávky nebo při úpravě jejího stavu a tyto emaily musejí mít jednotný styl s webovou stránkou.
Vytváření vzhledu emailu je složitější než pro webové stránky, protože emailoví klienti mají většinou s HTML a CSS problémy a každý je vykreslí trošičku jinak. Proto se používají pro emaily tabulky do kterých se vnořují další tabulky. Je to z důvodu fixního zobrazení, protože tabulky se nezalamují. Do emailu se také vkládá inline styl, protože v případě externího umístění a odka- zování na něj by se emailoví klienti ptali vždy uživatele na povolení externích zdrojů a do doby, než by toto uživatel povolil, byl by email špatně zobrazený. U stylovaných emailu byl problém s fonty, protože v grafických podkladech byl požit nestandardní font [13], který by se musel vložit. Nabízeli se tři možnosti, buď vložit font přímo do emailu pomocí Base64, vložit odkaz na externí zdroj nebo nestandardní font nepoužívat. Analyzoval jsem tento problém a našel výhody a nevýhody každého řešení.
Protože při vložení fontu do emailu extrémně roste jeho velikost a někteří emailoví klienti řadí tento email do spamu nebo ho usekávají, byla tato možnost vyloučena.
Vkládání fontů z externích zdrojů jsme nakonec také zavrhli, protože byla nutnost, aby se email zobrazoval bez hlášky o povolení externích zdrojů.
Nakonec byla vybrána možnost nahradit font nějakým standardním i z důvodu že někteří emailoví klienti ignorují vložené fonty a nahrazují je za nějaké standardní. Jelikož byl font velice podobný Arialu, zvolil jsem tento.
3.3.7 HTML a Latte
Už při pohovoru před začátkem praxe mi bylo řečeno, že se ve firmě využívá Nette Framework, který obsahuje šablonovací jazyk Latte. Proto bylo nutné znát konstrukce tohoto jazyka, a pro- tože jsem je neznal, nástup na praxi předcházelo učení se tohoto jazyka.
S využitím Latte odpadla nutnost používat funkce jako je například htmlSpecialChars, pro- tože tento šablonavací jazyk se sám automaticky postará o to, aby převedl potencionálně nebez- pečné znaky na entity. Navíc díky makrům a n:makrům se velice zjednoduší a zkrátí zapsaný kód.
Rád bych zde zmínil pár zajímavých maker tohoto jazyka. Celý seznam včetně příkladů a rozdílů mezi čistým PHP je dostupný nahttps://latte.nette.org/cs/macros.
22
Mým nejpoužívanějším makrem byl klasickýdump, který do debugovací konzule vypíše hod- notu proměnné nebo třeba celý objekt. Každá šablona obsahovala několik objektů a já si musel vypsat to, co potřebuji. Například jsem dostal objekt$products, který obsahoval všechny pro- dukty a jejich vlastnosti. Bylo nutné je všechny vypsat a zobrazit například skladovou dostupnost pro každý produkt. Abych viděl, co vše objekt obsahuje a jaké jsou názvy vlastností, používal jsem toto makro.
Obrázek 6: Ukázka makra dump
Během praxe jsem také často používal n:makro n:tag-if. Což je zjednodušeně řečeno pod- mínka vypiš pokud.
<!-- kod v cistem PHP -->
<?php if ($item) { ?>
<div class="item">
Text elementu
</div>
<?php } ?>
<!-- stejny kod jen s vyuzitim Latte a n:makra n:if -->
<div n:if="$item" class="item">
Text elementu
</div>
Výpis 5: Ukázka makra n:if
Dalším velice užitečným n:makrem byln:foreach. V Latte existují i cykly whileafor, ale ne- mají vlastní n:makro, a proto jsem je během mé praxe používal jen minimálně.
<!-- kod v cistem PHP -->
<?php foreach ($items as $item) { ?>
<div class="item">
<?= htmlSpecialChars(mb_convert_case($item, MB_CASE_TITLE)) ?>
</div>
<?php } ?>
<!-- stejny kod jen s vyuzitim Latte a n:makra n:foreach -->
<div n:foreach="$items as $item" class="item">
{$item|capitalize}
</div>
Výpis 6: Ukázka makra n:foreach
Jako poslední ukázku bych zvolil překlady šablon do různých jazyků. Protože univerzální šablona, kterou jsem vyvíjel byla více jazyčná, musel být každý výpis jakéhokoliv textu nebo popisu elementu na stránce zabalen do překladového modulu, který může být párový i nepárový.
Jako ukázku uvádím odkaz do detail produktu, kde atributtitleje v párové značce pro překlad a text tlačítka je v nepárové variantě.
<a href="{plink Product:, productId => $product->id}" class="btn"
title="{_}Prejit na detail produktu{/_}">{_’Detail produktu’}</a>
Výpis 7: Ukázka překladového modulu
3.3.8 JavaScript a AJAX
Dalším velice používaným jazykem během mé praxe byl JavaScript (dále jen jako JS) s knihovnou jQuery, kterou jsem používal pro urychlení a zjednodušení práce. Díky tomu šlo snadno vytvořit například rozbalovací menu kategorií po kliku nebo zafixování hlavičky při scrollu obrazovky.
Dalším pěkným příkladem byl vlastní vzhled pro radio buttony a checkboxy. Je to sice vzhle- dová část nové šablony, ale aby vše fungovalo správně musí implementace obsahovat i hodně JS.
Ze začátku jsem si myslel, že je to jen trošičku jednoduchého kódu, který skryje původní element a po kliku na nový, změní i ten skrytý a vše vypadalo bezproblémově. Bohužel ve formulářích například v košíku jsme začali používat knihovnu CookieForm, která si po vyplnění formuláře uložila do cookie aktuální hodnotu a při opuštění a znovu načtení stránky jí do formuláře znova vypsala. Knihovna přepínala i radio buttony a checkboxy, ale bohužel vždy pozdě, kdy už bylo zjištěno, jakou hodnotu mají mít. Proto přestaly odpovídat hodnoty původních a nových ele- mentů. Zkoušel jsem různé varianty kódu, aby vše fungovalo jak má, ale bohužel se mi dlouho nedařilo nalézt takovou, která by fungovala vždy správně. Nakonec jsem to však vyřešil velice
24
jednoduchým způsobem a to tak, že se na tyto elementy navázal trigger, který hlídal jejich změny.
Během praxe jsem vytvářel i dynamický filtr produktů, který musel podle zvolených parame- trů vypisovat konkrétní produkty. Zde se již musel využít i AJAX, který měnil jen část stránky tak, aby nedocházelo k jejímu znovu načtení.
var url = $this.data(’href’) + ’?’ + $(’.JSFilterForm’).serialize(), itemsPerPage = $this.data(’items-per-page’),
page = parseInt($this.data(’page’)), from = page * itemsPerPage;
$.ajax({
type: ’GET’, url: url,
data : {’itemsPerPage’: itemsPerPage, ’from’: from, ’page’: page}, success: function(payload) {
if(payload) {
products = formatProducts(payload);
$(’.JSProductList’).html(products);
} } });
Výpis 8: Zjednodušená ukázka dynamického načítání produktů
3.3.9 Bash
V systému, pro který byla vytvářena nová výchozí šablona je složitá adresářová struktura zdrojo- vých kódů a tyto zdroje musely být minifikovány. Pro minifikaci byla využita knihovnayuicom- pressor, která zkracuje názvy proměnných a funkcí. Minifikování zdrojů bylo prováděno vždy až na konci práce před commit-em, protože v případě nutnosti debugování je značně snížena přehlednost kódu.
Místo toho, abych psal vždy cestu ke zdrojovému souboru a pak i k cílovému, napsal jsem si jed- noduchý script v jazyce Bash, který prošel všechna zanoření a soubory automaticky minifikoval.
Tento jazyk jsem neznal, takže jsem se musel naučit například i použití cyklu.
Díky vlastnímu scriptu bylo ušetřeno cca 50% času, než kdyby se vypisovaly všechny soubory zvlášť. Navíc, pokud přidáme jakýkoliv soubor do jakékoliv složky, která se minifuje, nemusíme rozšiřovat seznam, ale jen spustíme script, který si tento soubor sám najde a zminifikuje.
SET "MYPATH=%~dp0javascriptLibraries"
for /d %%a in ("%mypath%\*") do ( for /d %%a in ("%%a\raw") do (
IF EXIST %%a ( cd %%a
for %%f in (*.js, *.css) do (
java -jar ./../../../yuicompressor.jar "%%~nf%%~xf" -o "../%%~nf%%~
xf"
echo File "%%~nf%%~xf" was been compressed )
cd ../../../
) ) )
Výpis 9: Ukázka volání minifikátoru pro každý soubor JS nebo CSS
26
3.4 Nový eshop babyplace.cz
Po vytvoření nové šablony jsem dostal další úkol a to vytvoření nového eshopu na již připravené univerzální šabloně. Dalo by se říci, že to byl test, jak kvalitně byla napsána univerzální šab- lona a jak dlouho se bude tento eshop vytvářet. Stavělo se na základech, které byly vytvořeny pro univerzální šablonu a upravovaly se podle požadavků na vzhled a funkčnost.
U tohoto projektu byla velice propracovaná grafická stránka a to šlo vidět i na grafických návrzích, kterých bylo celkově 26. Při vytváření toho eshopu se používaly stejné technologie jako u univerzální šablony, a protože se jedná také o eshop, jeho funkčnost byla velice podobná.
Objevili se zde ale některé nové prvky, které se firma rozhodla přenést i do univerzální šablony, protože rozšiřovaly její funkčnost a variabilitu vzhledu.
Jako příklad mohu uvést výběr variant v detailu produktů. Na univerzální šabloně se toto řešilo výběrem ze selectu a po změně varianty se pomocí JavaScriptu změnil i obrázek, cena, skladovost, nebo katalogové číslo. Tato funkčnost na eshopu babyplace.cz zůstala, byla ale rozšířena o přímý výpis variant do boxu, kde byl na první pohled viditelný obrázek, cena nebo skladová dostupnost. Navíc u každé varianty bylo tlačítko pro přidání do košíku, takže uživatelé nemuseli vybírat ze selectu, ale rovnou se mohli podívat na obrázek a cenu konkrétní varianty a přidat si ji do košíku.
Obrázek 7: Ukázka výpisu variant na eshopu babyplace.cz
3.4.1 Práce s obrázky
Tento eshop, byl velice zaměřený na grafiku, jak jsem již psal, což je logické, protože jeho typická zákaznice je matka na mateřské dovolené. Proto eshop obsahoval hodně obrázků a ikon.
Některé ikony byly jednobarevné, a proto bylo možné je přidat do vytvořeného fontu ikon a tento font použít i na tomto eshopu, ale většina byla vícebarevná a dosti specifická. Jelikož eshop zatím nepoběží naHTTP2, které umožňuje paralelní dotazování na server [14], bylo rozhodnuto, že se vytvoří jeden sprite pro obrázky. To znamená, že jsou všechny obrázky v jednom souboru a pomocí CSS se nastavuje výška, šířka a pozice, kde je obrázek umístěn.
Začal jsem zjišťovat a přemýšlet, jak toto nejrychleji realizovat, protože přidávat ikonky ma- nuálně a psát si jejich velikost a umístění je velice zdlouhavé. Našel jsem generátor sprite obrázku i SASS v jednom. Jedná se ogrunt-sprites, což je rozšíření progrunt, který je pod balíčkemnpm.
Bylo nutné nařezat každou ikonu samostatně ve formátu PNG a umístit ji do adresáře s názvem source. Celkově bylo na tomto projektu 25 takto připravených ikon. Když bylo potřeba vygene- rovat sprite, spustil se z příkazové řádky příkaz grunt sprite, který byl nakonfigurovaný podle toho, jak bylo potřeba a ten automaticky vytvořil sprite obrázek i mixiny v SASS, které byly požadovány. Poté se jen hromadně upravila cesta ke sprite obrázku a mohlo se s ikonami začít pracovat.
sprite: { all: {
src: ’sprite/source/*.png’, // umisteni zdrojovych obrazku dest: ’sprite/result/spritesheet.png’, // cilovy sprite destCss: ’sprite/result/sprites.scss’, // cilovy SASS padding: 5, // mezery mezi obrazky
cssFormat: ’scss’,
algorithm: ’binary-tree’
} }
Výpis 10: Část konfigurace pro vygenerování sprite
@mixin icon-arrow-left-white() {
background-image: url(’spritesheet.png’);
background-position: -1778px -243px;
width: 154px;
height: 51px;
}
Výpis 11: Ukázka vygenerovaného SASS souboru
28
V případě nutnosti přidání další ikony, se tato požadovaná ikona uložila opět do adresáře source a znovu se spustil generátor. Tento generátor nepřidává jen jednu ikonu za druhou, ale hledá optimální kombinaci, aby byl cílový sprite obrázek rozměrově nejmenší. Proto se měnilo i umístění již vygenerovaných ikon, ale vždy se i adekvátně měnila jejich pozice v SASS.
Obrázek 8: Ukázka vygenerovaného sprite
3.4.2 Celkové zhodnocení úkolu
Tento eshop nebyl postaven jen na několika barvách jako univerzální šablona, a proto bylo nutné přidávat další proměnné. Například pro barvu okrajů byly vytvořeny čtyři proměnné, zatím co u univerzální šablony stačila pouze jedna. Musím ale říci, že i přes značné grafické rozdíly jsem byl rád za vytvoření univerzální šablony, protože mi velice ulehčila práci a nebylo potřeba psát vše od začátku. Některé prvky, jako je například filtr produktů funguje vždy stejně a má i podobnou grafickou podobu, což mi pomohlo v rychlosti vytvoření nového eshopu. Další výhodou pro kratší čas vytvoření byla i má znalost systému, protože jsem již věděl jak funguje a co se kde nastavuje.
3.5 Vedlejší úkoly
Během mé praxe jsem měl i dva menší úkoly, které jsem dostal za úkol zpracovat.
3.5.1 Příprava vzhledu pro nový modul na eshopu hobynaradi.cz
Jelikož se na tento eshop přidával nový modul pro správu a zobrazování aktualit, musel se při- pravit i vzhled tohoto modulu, který jsem dostal za úkol udělat já.
Byl to sice úkol jen na cca 3 hodiny a šlo čistě jen o připravení vzhledu, ale byl jsem rád, že jsem tento úkol dostal právě já, protože drobné úpravy na již bežících eshopech jsou ve firmě velice časté.
3.5.2 Úprava validity na eshopu kvalitex.sk
Tento úkol byl již o něco delší a zabral mi cca 14 hodin práce. Jednalo se o to, že tento eshop nebyl napsán přesně podle specifikace W3C, což porušuje firemní standardy, a proto se mu- sel upravit. Například se na stránce opakoval stejný identifikátor vícekrát, což není povoleno nebo řádkové elementy obsahovaly blokové. Tento eshop tvořil zaměstnanec, který již ve firmě nepracuje a pravděpodobně si po dokončení prací zapomněl zkontrolovat validitu webu.
Bylo nutné projít všechny stránky, které tento eshop obsahuje a jednu po druhé upravit, aby splňovala standardy W3C. Jako příklad úpravy můžu zmínit filtr produktů, kde bylo po- třeba upravovat i JavaScript. Tento filtr obsahoval několik duplicitních identifikátorů pro každou skupinu parametrů a navíc se v JavaScriptu odkazoval přímo na HTML elementy a ne na třídy.
Tyto elementy byly navíc špatně zanořeny, odkaz<a>obsahoval<div>, což je povoleno pouze v HTML5 [15] a navíc je to proti standardům firmy. Proto bylo nutné validitu upravit.
<!-- HTML -->
<div id="list-filter">
<a href="#filter-price">
<div class="icon"></div> Cena
</a>
</div>
<div id="list-filter">
<a href="#filter-producer">
<div class="icon"></div> Vyrobce
</a>
</div>
<!-- JavaScript -->
$(’#list-filter div’).addClass(’active’);
Výpis 12: Zjednodušená ukázka původního stavu filtru produktů
30
4 Závěr
Během absolvování praxe jsem využil znalostí informačních technologií, které jsem získal během celého studia. Nejvíce se mi hodili znalosti z předmětu Vývoj internetových aplikací, který jsem absolvoval v pátém semestru, tudíž souběžně s odbornou praxí. Tento předmět jsem měl spíše jako doplněk praxe, kde jsem se dozvěděl hlubší souvislosti o technologiích, které jsem na praxi používal. Dalším důležitým předmětem byly Uživatelské rozhraní, kde se probírá i ideální umís- tění prvku na stránce. Bohužel jsem tento předmět měl až v šestém semestru, tudíž na konci praxe, a proto jsem již většinu věděl, ale kdybych si zapsal předmět již ve druhém ročníku, byl by mi velice užitečný. Mezi další předměty, které mi pomohli se připravit na odbornou praxi bych zařadil Programování I, Programovací jazyky I a II a Algoritmy I a II, kde jsem se naučil základy programování i pokročilejší konstrukce.
Během praxe mi nejvíce scházela znalost verzovacího systému Git. Hlavně ze začátku praxe jsem se musel kolegů hodně doptávat, jak mám dělat některé pokročilejší operace. Nevím, jestli se v některém předmětu vyučují i verzovací systémy, ale já jsem se během studia s nimi nesetkal.
Toto je podle mě docela problém, protože skoro v každé IT firmě se používá Git nebo SVN, ale studenti o těchto systémech nevědí.
Další, co mi scházelo byl šablonovací systém Latte, což ovšem chápu, protože se na škole nemůže učit každý jazyk nebo framework, který existuje. Navíc tento systém byl pro mě docela jednoduchý, protože jsem znal PHP nad kterým je Latte postaveno.
Absolvování praxe, jako alternativu k bakalářské práci hodnotím velice pozitivně. Během dvou semestrů jsem se naučil hodně nových věcí, které jsem i prakticky použil. Za největší přínos považuji to, že jsem získal samostatnost při řešení problémů, protože se ve firmě sna- žili, abych sám navrhl řešení a poté ho realizoval. Když jsem něco nevěděl a zeptal se kolegů, tak mi samozřejmě poradili, ale snažili se mě pouze nasměrovat. Byla to pro mě příjemná změna, protože při studiu jsem měl vždy řečeno, jak mám který problém řešit a během praxe jsem měl jistou volnost pro své nápady. Dále jsem se naučil pracovat s verzovacím systémem Git, prohlou- bil jsem si znalost HMTL, JavaScriptu a CSS včetně využití preprocesoru SASS a naučil jsem se používat šablonovací systém Latte i tiketovací systém JIRA.
Literatura
[1] O nás - RELIGIS s.r.o.. Tvoříme ziskové eshopy a děláme online marketing - RELIGIS s.r.o.
[online] [cit. 2018-02-06]. Dostupné z: https://www.religis.cz/o-nas/
[2] HyperText Markup Language – Wikipedie. [online] [cit. 2018-02-06]. Dostupné z: https:
//cs.wikipedia.org/wiki/HyperText_Markup_Language
[3] 2. díl - Úvod do CSS preprocesoru Sass. itnetwork.cz - Ajťácká sociální síť a ma- teriálová základna pro C#, Java, PHP, HTML, CSS, JavaScript a další. [online]
[cit. 2018-02-06]. Dostupné z:https://www.itnetwork.cz/html-css/webove-portfolio/
tutorial-moderni-webove-portfolio-sass
[4] Font Awesome. Font Awesome [online] [cit. 2018-03-31]. Dostupné z:https://fontawesome.
com/
[5] Create your Icon Font in seconds - 9000 Vector Icons Available - Free Icon Font Generator.
[online] [cit. 2018-03-31]. Dostupné z: http://fontastic.me/
[6] Icon Font & SVG Icon Sets IcoMoon. Icon Font & SVG Icon Sets IcoMoon [online] [cit.
2018-03-31]. Dostupné z: https://icomoon.io/
[7] How to import artwork from Photoshop to Illustrator. [online] [cit. 2018-03-31]. Dostupné z:
https://helpx.adobe.com/illustrator/using/importing-artwork-photoshop.html
[8] Can I use... Support tables for HTML5, CSS3, etc. Can I use... Support tables for HTML5, CSS3, etc [online] [cit. 2018-03-31]. Dostupné z:https://caniuse.com/#search=woff [9] CSS Hat – Turn Photoshop Layer Styles to CSS3. Instantly.. CSS Hat – Turn Photoshop
Layer Styles to CSS3. Instantly. [online] [cit. 2018-03-31]. Dostupné z:https://csshat.com/
[10] Avocode - Hand-off and Inspect Sketch, PSD, XD, and Figma designs. Avocode - Hand- off and Inspect Sketch, PSD, XD, and Figma designs [online] [cit. 2018-04-01]. Dostupné z:
https://avocode.com/
[11] PerfectPixel by WellDoneCode. [online] [cit. 2018-04-01]. Dostupné z: http://www.
welldonecode.com/perfectpixel/
[12] GitHub - auchenberg/css-reloader: CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself.. The world’s leading software development platform·GitHub [online]
[cit. 2018-04-01]. Dostupné z:https://github.com/auchenberg/css-reloader
[13] CSS Web Safe Fonts. W3Schools Online Web Tutorials [online] [cit. 2018-04-07]. Dostupné z:https://www.w3schools.com/cssref/css_websafe_fonts.asp
32
[14] Web bude rychlejší. Starý protokol HTTP 1.1 po 16 letech nahradí mo- derní HTTP/2 - Cnews.cz. Cnews.cz | Od tranzistorů až po PC se- stavy [online] [cit. 2018-04-07]. Dostupné z: https://www.cnews.cz/
web-bude-rychlejsi-stary-protokol-http-1-1-po-16-letech-nahradi-moderni-http2/
[15] Stack Overflow - Where Developers Learn, Share, & Build Careers [online]
[cit. 2018-04-07]. Dostupné z: https://stackoverflow.com/questions/1827965/
is-putting-a-div-inside-an-anchor-ever-correct#answer-1828032
