Popis společnosti - 2018LukášValíček AbsolvováníindividuálníodbornépraxeIndividualProfessionalP

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

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.

• 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).

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 {

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

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

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

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

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

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

In document 2018LukášValíček AbsolvováníindividuálníodbornépraxeIndividualProfessionalPracticeintheCompany VŠB–TechnickáuniverzitaOstravaFakultaelektrotechnikyainformatikyKatedrainformatiky (Stránka 12-0)