4. diel - Popis vybraných technológií 1
Tento článok je súčasťou webovej reprezentácia ročníkové práce Honzu Bittnera, písané v školskom roku 2014/2015.
Popis vybraných technológií
V nasledujúcich kapitolách popíšem základy vybraných jazykov a spôsoby, ako sa s nimi dajú efektívne vyvíjať weby. Ukážem ako úplné základy, ako aj pokročilejší spôsoby, ktoré sa bežne na vývoj využívajú.
Html
Z počiatku je dobré uviesť, že HTML nie je jazyk programovací, ale jazyk značkovací. Skladá sa teda zo značiek, ktorými opisuje obsah webu. HTML nijako nerieši vzhľad webu - k tomu je určený jazyk CSS, ktorý je popísaný v ďalšej kapitole.
Každá stránka sa píše zvlášť do samostatného súboru s príponou html.
Elementy a značky
HTML je zložený z elementov, ktoré sú zložené zo značiek, niekedy označovaných ako tagy, a obsahu medzi nimi. Elementy môžu byť párové a nepárové. Nepárovým elementom je napríklad obrázok, párovým napríklad odsek. Všeobecne platí, že nepárové elementy nemôžu mať, a ani nemajú, žiadny obsah.
Značky sa zapisujú názvom elementu ohraničeným špicatými zátvorkami. Ukončovacie značka má ešte pred názvom elementu lomítko. Značky sa zapisujú malými písmenami.
Základným blokovým elementom - to sú tie elementy, ktoré vyplnia šírku stránky a sú od zvyšku stránky oddelené - je element div.
<div> </div>
V HTML sa môžu písať aj komentáre, ktoré sa píšu štýlom, ako je ukázané na ukážke nižšie. V HTML sú len blokové komentáre a neexistujú riadkové komentáre.
<!-- komentář --> <!-- víceřádkový komentář -->
V HTML5 pribudli nové sémantické elementy, čo sú elementy, ktoré majú nejaký zmysel. Dobrým príkladom je napr. Element header, ktorý sa využíva pre hlavičku. Tieto elementy sa v podstate správajú ako klasický blokový element - napr. Div. Ďalšími zástupcami nových sémantických elementov sú tiež elementy footer, article, sidebar, nav, main atď.
Atribúty
Elementy tiež obsahujú atribúty, ktoré môžu obsahovať napr. Informácie o tom, kde sa nachádza obrázok - to je konkrétne atribút src. Vo verzii HTML5 sa tiež dajú využívať vlastné atribúty, ktoré musia byť zapísané s prefixom dáta.
Špeciálnymi atribúty sú atribút id a class. Atribút id označuje unikátny element a musí byť na stránke jedinečný. Atribút class, v preklade trieda, vyznačuje skupinu elementov.
<p class="poznamka">Sem se může napsat poznámka.</p> <img src="ovoce/jablko.png" alt="Obrázek jablka." data-ovoce="jablko"/>
Názvy atribútov aj ich hodnoty je dobré písať bez diakritiky, pokiaľ nie je potrebné, ako napr. V ukážke vyššie u popisku obrázku - atribút alt.
Definovanie hlavičky
HTML stránka sa musí nastaviť - kódovanie, titulok, autor atp. - v hlavičke webu. Celý web musí byť umiestnený v elemente html, ktorý obsahuje element head (hlavička) a body (telo). Element body obsahuje viditeľný obsah webu.
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8" /> <title>Moje úžasná stránka</title> <meta name="description" content="Popisek mého skvělého webu." /> <meta name="author" content="Jan Bittner" /> </head> <body> <p>Odstavec textu.</p> </body> </html>
Samotný html element obsahuje tiež atribút, ktorý nastavuje jazyk webu. Pred elementom html sa nastavuje tzv. Doctype, ktorý deklaruje typ dokumentu.
Do HTML hlavičky sa píšu meta tagy, ktoré nastavujú web. Najčastejšie sa nastavuje kódovanie stránky - aby prehliadač vedel, v akom je nutné web zobraziť -, opis webu, autor webu, kľúčové slová atp. Nutné je zadať iba kódovanie. Meta tagy môžu slúžiť ako zdroj informácií pre vyhľadávače.
Okrem meta tagov sa v hlavičke deklaruje tiež titulok stránky, ktorý BFU, resp. návštevník webu, uvidí ako návestie záložky prehliadača. Na titulok stránky sa využíva element title.
CSS
Ak chceme web stylovať, teda meniť vzhľad, musíme použiť jazyk CSS. Štýly sa píšu do samostatného súboru. Z pravidlá, kvôli optimalizácii, využívame iba jedného výsledného CSS súborov. Súbor zapisujeme, najčastejšie s názvom štýly (alebo anglicky style), s príponou css.
Súbor sa štýly musíme so súborom HTML prepojiť práve v HTML hlavičke, nie však pomocou meta tagu, ale pomocou elementu link. Ako také prepojenie vyzerá, je ukázané v kóde nižšie.
<link rel="stylesheet" href="css/style.css" type="text/css"/>
Rovnako ako HTML, ani CSS nie je programovacím jazykom.
Selektory
Jazyk CSS stavia na jednoduchom princípe. Najskôr určíte elementy, ktoré požadujete - tomu sa hovorí selektor - a následne pre selektor vytvoríte blok, kam zapisujete, štýlom vlastnosť: hodnota, jednotlivé štýly.
Ako selektor sa môže využiť názov elementu, atribút elementu, trieda, id atď. Môže sa tiež vytvárať tzv. Multi selektor, ktorý spája viac selektorov pre jeden blok štýlov.
Preprocesor Sass
Hlavne vo väčších webových projektoch sa časom začala prejavovať neporiadnosť CSS, a preto sa začali vyvíjať CSS preprocesoru, ktoré okrem možnosti rozdeliť kód ponúka tiež prvky z programovacích jazykov. Získame možnosť premenných, funkcií, mixin (obdoba void funkcií - funkcie, ktoré nemajú návratovú hodnotu), cyklov, ponáranie, podmienok atď.
Jednotlivé triedy, ktoré sa najčastejšie používajú pre štýlovanie elementov, môžeme napr. Generovať napríklad podľa mapy (niečo ako pole) a tým urobiť kód menej redundantné (tzn. Menej zbytočného a nadbytočného kódu).
@for $i from 1 through 3 { .#{sloupec}-$i { width: 100px * $i; } }
Ukážka kódu vyššie vygeneruje triedu stĺpec-1, stĺpec-2 a stĺpec-3, každú s inou šírkou elementu.
Kompilácie z preprocesora
CSS preprocesor sa musí kompilovať na CSS kód. To z toho dôvodu, pretože webové prehliadače nevedia preprocesorové štýly zobraziť, sa musí vytvoriť s každou zmenou nový výstupný CSS súbor. Sass má dva hlavné kompilátory - Ruby a LibSass. Hlavnou kompilátor je ten v jazyku Ruby, ale jazyk Ruby je pomerne pomalý, a preto je dostupná aj druhá možnosť, a to využitie LibSass. LibSass je písaný v jazykoch C a C ++ a je teda oveľa rýchlejší.
Samotnú kompiláciu môžete tiež obstarávať napr. Pomocou Node.js doplnkov, ktoré sa za vás budú obstarávať kompiláciu, a vy sa o nič nemusíte starať.
Princíp objektovo orientovaných štýlov
OOCSS je postavené na myšlienke, že máme web zložený z niekoľkých komponentov, ktoré môžu mať drobné rozdiely. S touto metódou teda píšeme štýly tak, že vytvárame komponenty. Komponenta by mala byť nezávislá na zvolenom elementu a svojom umiestnením v kóde, čo zaručí nízku špecifickosť selektorov, čo je len dobre. Každý komponent by mala fungovať rovnako dobre nech je použitá ako v hlavičke, tak napríklad v pätičke.
Komponente môžeme tiež hovoriť objekt. Každý objekt môže mať aj svojich potomkov a objekt aj potomok môžu mať modifikátory. Modifikátory sa užívajú v prípadoch, keď je nutná len minimálna zmena štýlov a preto nemá zmysel vytvárať nový komponent.
Stretávame sa aj so systémom, akým spôsobom pomenovávať triedy tak, aby sme mohli jasne, a prehľadne, zapísať objekt, potomka, i modifikátory. Jedným z riešení je použitie metódy BEM.
Objekt zapíšeme klasicky, ako normálny triedu. Potomka zapíšeme ako zloženinu názvu objektu a názvu potomka oddelených dvoma podtržníkmi. Modifikátory potom jednoducho zapíšeme oddelením dvoma pomlčkami.
.clovek {} .clovek__ruka {} .clovek__ruka--prava {}
Na ukážke vyššie môžeme vidieť štýl zápisu BEM aplikovaného na príklad pravej ruky človeka. Ak by sme chceli využiť jednu z výhod Sass - ponáranie -, kód by vyzeral takto. Znak & zastupuje nadradený selektor.
.clovek { &__ruka { &--prava {} } }
