IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 3 - Popis vybraných technologií 1

Tento článek je součástí webové reprezentace ročníkové práce Honzy Bittnera, psané ve školním roce 2014/2015.


Popis vybraných technologií

V následujících kapitolách popíšu základy vybraných jazyků a způsoby, jak se s nimi dají efektivně vyvíjet weby. Ukážu jak úplné základy, tak i pokročilejší způsoby, které se běžně na vývoj využívají.

HTML

Z počátku je dobré uvést, že HTML není jazyk programovací, nýbrž jazyk značkovací. Skládá se tedy ze značek, kterými popisuje obsah webu. HTML nijak neřeší vzhled webu – k tomu je určen jazyk CSS, který je popsán v další kapitole.

Každá stránka se píše zvlášť do samostatného souboru s příponou html.

Elementy a značky

HTML je složen z elementů, které jsou složeny ze značek, někdy označovaných jako tagy, a obsahu mezi nimi. Elementy mohou být párové a nepárové. Nepárovým elementem je například obrázek, párovým například odstavec. Obecně platí, že nepárové elementy nemohou mít, a ani nemají, žádný obsah.

Značky se zapisují názvem elementu ohraničeným špičatými závorkami. Ukončovací značka má ještě před názvem elementu lomítko. Značky se zapisují malými písmeny.

Základním blokovým elementem – to jsou ty elementy, které vyplní šířku stránky a jsou od zbytku stránky odděleny – je element div.

<div></div>

V HTML se mohou psát i komentáře, které se píší stylem, jak je ukázáno na ukázce níže. V HTML jsou jenom blokové komentáře a neexistují řádkové komentáře.

<!-- komentář -->

<!-- víceřádkový
     komentář -->

V HTML5 přibyly nové sémantické elementy, což jsou elementy, které mají nějaký smysl. Dobrým příkladem je např. element header, který se využívá pro hlavičku. Tyto elementy se v podstatě chovají jako klasický blokový element – např. div. Dalšími zástupci nových sémantických elementů jsou také elementy footer, article, sidebar, nav, main atd.

Atributy

Elementy také obsahují atributy, které mohou obsahovat např. informace o tom, kde se nachází obrázek – to je konkrétně atribut src. Ve verzi HTML5 se také dají využívat vlastní atributy, které musí být zapsány s prefixem data.

Speciálními atributy jsou atribut id a class. Atribut id označuje unikátní element a musí být na stránce jedinečný. Atribut class, v překladu třída, vyznačuje skupinu elementů.

<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 atributů i jejich hodnoty je dobré psát bez diakritiky, pokud není zapotřebí, jako např. v ukázce výše u popisku obrázku – atribut alt.

Definování hlavičky

HTML stránka se musí nastavit – kódování, titulek, autor atp. – v hlavičce webu. Celý web musí být umístěn v elementu html, který obsahuje element head (hlavička) a body (tělo). Element body obsahuje viditelný 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 také atribut, který nastavuje jazyk webu. Před elementem html se nastavuje tzv. doctype, který deklaruje typ dokumentu.

Do HTML hlavičky se píší meta tagy, které nastavují web. Nejčastěji se nastavuje kódování stránky – aby prohlížeč věděl, v jakém je nutné web zobrazit –, popis webu, autor webu, klíčová slova atp. Nutné je zadat pouze kódování. Meta tagy mohou sloužit jako zdroj informací pro vyhledávače.

Kromě meta tagů se v hlavičce deklaruje také titulek stránky, který BFU, resp. návštěvník webu, uvidí jako popisek záložky prohlížeče. Na titulek stránky se využívá element title.

CSS

Pokud chceme web stylovat, tedy měnit vzhled, musíme použít jazyk CSS. Styly se píší do samostatného souboru. Z pravidla, kvůli optimalizaci, využíváme pouze jednoho výsledného CSS souborů. Soubor zapisujeme, nejčastěji s názvem styly (nebo anglicky style), s příponou css.

Soubor se styly musíme se souborem HTML propojit právě v HTML hlavičce, nikoliv však pomocí meta tagu, ale pomocí elementu link. Jak takové propojení vypadá, je ukázáno v kódu níže.

<link rel="stylesheet" href="css/style.css" type="text/css"/>

Stejně jako HTML, ani CSS není programovacím jazykem.

Selektory

Jazyk CSS staví na jednoduchém principu. Nejdříve určíte elementy, které požadujete – tomu se říká selektor – a následně pro selektor vytvoříte blok, kam zapisujete, stylem vlastnost: hodnota, jednotlivé styly.

Jako selektor se může využít název elementu, atribut elementu, třída, id atd. Může se také vytvářet tzv. multi selektor, který spojuje více selektorů pro jeden blok stylů.

Preprocesor Sass

Hlavně ve větších webových projektech se časem začala projevovat nepořádnost CSS, a proto se začaly vyvíjet CSS preprocesory, které kromě možnosti rozdělit kód nabízí také prvky z programovacích jazyků. Získáme možnost proměnných, funkcí, mixinů (obdoba void funkcí – funkce, které nemají návratovou hodnotu), cyklů, zanořování, podmínek atd.

Jednotlivé třídy, které se nejčastěji používají pro stylování elementů, můžeme např. generovat například podle mapy (něco jako pole) a tím udělat kód méně redundantní (tzn. méně zbytečného a nadbytečného kódu).

@for $i from 1 through 3 {
  .#{sloupec}-$i {
    width: 100px * $i;
  }
}

Ukázka kódu výše vygeneruje třídu sloupec-1, sloupec-2 a sloupec-3, každou s jinou šířkou elementu.

Kompilace z preprocesoru

CSS preprocesor se musí kompilovat na CSS kód. To z toho důvodu, jelikož webové prohlížeče neumí preprocesorové styly zobrazit, se musí vytvořit s každou změnou nový výstupní CSS soubor. Sass má dva hlavní kompilátory – Ruby a LibSass. Hlavní kompilátor je ten v jazyce Ruby, ale jazyk Ruby je poměrně pomalý, a proto je dostupná také druhá možnost, a to využití LibSass. LibSass je psán v jazycích C a C++ a je tedy mnohem rychlejší.

Samotnou kompilaci můžete také obstarávat např. pomocí Node.js doplňků, které se za vás budou obstarávat kompilaci, a vy se o nic nemusíte starat.

Princip objektově orientovaných stylů

OOCSS je postaveno na myšlence, že máme web složen z několika komponent, které mohou mít drobné rozdíly. S touto metodou tedy píšeme styly tak, že vytváříme komponenty. Komponenta by měla být nezávislá na zvoleném elementu a svém umístěním v kódu, což zaručí nízkou specifičnost selektorů, což je jen dobře. Každá komponenta by měla fungovat stejně dobře ať je použita jak v hlavičce, tak třeba v patičce.

Komponentě můžeme také říkat objekt. Každý objekt může mít i své potomky a objekt i potomek mohou mít modifikátory. Modifikátory se užívají v případech, kdy je nutná jen minimální změna stylů a tudíž nemá smysl vytvářet novou komponentu.

Potýkáme se také se systémem, jakým způsobem pojmenovávat třídy tak, abychom mohli jasně, a přehledně, zapsat objekt, potomka, i modifikátory. Jedním z řešení je použití metody BEM.

Objekt zapíšeme klasicky, jako normální třídu. Potomka zapíšeme jako složeninu názvu objektu a názvu potomka oddělených dvěma podtržítky. Modifikátory poté jednoduše zapíšeme oddělením dvěma pomlčkami.

.clovek {}

.clovek__ruka {}

.clovek__ruka--prava {}

Na ukázce výše můžeme vidět styl zápisu BEM aplikovaného na příklad pravé ruky člověka. Pokud bychom chtěli využít jedné z výhod Sass – zanořování –, kód by vypadal takto. Znak & zastupuje nadřazený selektor.

.clovek {

  &__ruka {

    &--prava {}
  }
}

 

Předchozí článek
Výběr technologií 2
Všechny články v sekci
Technologie pro vývoj webových aplikací
Přeskočit článek
(nedoporučujeme)
Popis vybraných technologií 2
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
22 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity