4. Praktické využití HTML5 a CSS3 při tvorbě multimediální prezentace
4.1 Popis postupu tvorby stránek
Projekt je tvořen za pomoci otevřeného redakčního systému WordPress, který je postaven na technologii PHP a MySQL. Jeho základní funkcí je vytváření a publikování stránek v administračním rozhraní bez nutné znalosti PHP jazyka. Aby stránky byly dynamické, zapisují se do šablony PHP funkce, které zde nebudou zmiňovány. Pro tvorbu šablony dále postačí znalost HTML a CSS, což je téma této práce. Výslednou webovou stránku je možné najít na následující adrese: www.uceni.tode.cz.
Uspořádání stránky
Hlavní části stránky jsou tvořeny novými elementy HTML5: header, nav, article, aside a footer. Jejich rozmístění bylo zvoleno typicky tak, aby bylo ovládání stránky pro návštěvníka intuitivní44. V horní části se nachází hlavička - element header, která bude na
44 DAWSON, Alexander a Jakub URBAN. Výjimečný webdesign: jak tvořit osobité, přitažlivé, použitelné weby. Brno: Computer Press, 2012. ISBN 978-80-251-3719-2.
všech stránkách totožná. Dále obaluje logo, název webu a hlavní menu tedy element nav.
Následuje article, ve kterém se bude generovat hlavní obsah stránek a další menu. Po pravé straně je umístěn element aside, který může sloužit pro vložení aktualit. Na konci stránky se typicky nachází prvek footer. Popis jednotlivých částí bude zaměřen spíše na stylování stránky než na samotný HTML kód.
Obr. 30: Rozložení stránky “Jazykové kurzy v Anglii“
Zdroj: vlastní
Body
Tématem webových stránek je Anglie, celá stránka je tedy laděna do modré a červené, podle barev Britské vlajky, a jako doplňková barva byla zvolena světle zelená. Hlavní písmo tvoří bezpatkový font „Open Sans“, který pochází z jedné z online knihoven zdarma. Písmo je podobné klasickému fontu „Arial“, ale působí více odlehčeným dojmem.
Načítá se pomocí font-face:
@font-face {
font-family: 'OpenSans';
src: url('./fonty/OpenSans.eot');
src: url('./fonty/OpenSans.eot?#iefix') format('embedded-opentype'), url('./fonty/OpenSans.woff') format('woff'),
url('./fonty/OpenSans.ttf') format('truetype'), url('./fonty/OpenSans.svg') format('svg');
font-weight: normal;
font-style: normal;}
Následně se písmo deklaruje pomocí vlastnosti font-family: font-family:
'OpenSans', Arial, Verdana. Pokud by došlo k případu, kdy se písmo nenačte ze
požadovaného písma. Stejným principem je na stránkách použito další písmo
„SocialGlyphs“, které slouží k tomu, aby na stránkách mohla být tlačítka na sociální sítě bez nutnosti použití obrázků. Každé jedno písmeno funguje jako logo jiné sociální sítě.
Například A je znak pro Facebook atp. Sociální tlačítka jsou důležitou součástí každých stránek od společnosti Czech-us. Na tomto webu jsou buttony umístěny na dvou místech.
První menu je skryté vlevo nahoře a zobrazí se po najetí myši, druhé menu se nachází transition, která zajistí plynulé vysunutí menu po najetí myší, které bude trvat půl sekundy.
Zápis je vrstven s prefixy, aby byla zajištěna funkčnost ve všech nových verzích internetových prohlížečů. I když je kód na stránkách psán s prefixy, nebudou dále v této práci pro zkrácení zápisu zmiňovány. U starších prohlížečů bude menu funkční s výjimkou plynulého přechodu a zakulacených rohů buttonů, které byly vytvořeny pomocí vlastnosti border-radius. Použití vysunovacího menu se sociálními buttony stránku oživila a budí modernějším dojmem a to i bez nutnosti použít JavaScript nebo obrázek. Dolní menu s odkazy na sociální sítě je vytvořeno obdobně. Menu je ovšem neustále viditelné a tlačítka jsou kulatá pomocí vlastnosti border-radius: 1em. Celkové pozadí stránky je deklarováno světle modrou barvou pro starší a gradientem pro nové internetové prohlížeče.
Obr. 31: Social buttons menu
Zdroj: vlastní
body { font-family: 'OpenSans', Arial, Verdana;
font-size: 110%;
color: black;
background: #bdf3fd; background: linear-gradient(to bottom,
#bdf3fd 0%,#a2daf5 21%,#6ba8e5 60%,#6ba8e5 95%);}
Header
Hlavičku stránky, jak bylo řečeno výše, tvoří logo, název webu a menu neboli hlavní navigace. Jelikož se jedná o stránky určené pro prezentaci jazykového kurzu v Anglii, byla jako logo zvolena vlajka Velké Británie. Ta by se obtížně tvořila pomocí CSS, je tedy jako jedna z mála prvků na webu prezentována obrázkem png. Název webu je již nastylován trochu kreativněji.
#jaz {
transform: skew(-10deg, 2deg);
box-shadow: 1px 1px 1px 1px white, 1px 1px 2px 1px rgb(48,48,48);
text-shadow: 1px 1px 1px black;}
Obr. 32: Logo stránky v prohlížeči IE 10 a IE 7 Zdroj: vlastní
Snaha byla o napodobení vzhledu štítku. Element je tedy proto natočen pomocí CSS3 vlastnosti transform a metody skew. K boxu byl přidán bílý a šedý stín pomocí vlastnosti box-shadow. Stín za textem je vytvořen vlastností text-shadow. Uvedené stylování nebude viditelné ve starších verzích internetových prohlížečů. Nápis bude ale stále výrazný díky použití kontrastních barev. Nebylo tedy potřeba hledat alternativní řešení pro zachování stoprocentní podoby ve všech prohlížečích. Důležitou část hlavičky tvoří horizontální navigační menu. Pro snadnou orientaci uživatele se menu skládá pouze z pěti položek a neobsahuje žádné podmenu. V následujícím kódu je zobrazena stylizace jednoho tlačítka menu.
border: 1px solid #377daf;
box-shadow: 0 2px 4px rgba(46,185,230,0.7);}
Jak je vidět z kódu, navigace je tvořena novým HTML5 elementem nav. Dále je zde navrstveno několik pozadí, kde první řádek deklaruje pouze modrou barvu. Ten je určen pro prohlížeče, které nepodporují gradienty nebo nenačtou obrázek pozadí. Další vrstva pozadí je 1px široký obrázek menu.jpg , který se opakuje po ose x a tím vyplňuje celé tlačítko. Zastupuje vzhled gradientu, který je deklarován třetí vrstvou pozadí. Ta je konečně dána CSS3 vlastností linear-gradient. Položka menu je dále ohraničena rámečkem a stínem. Výsledné tlačítko by mělo navozovat dojem skla a díky výše zmíněným opatřením má podobný vzhled ve všech prohlížečích. Při najetí myší na tlačítko v menu se světle modrý gradient změní na tmavý.
Obr. 33: Položka menu v prohlížečích: Chrome, Mozilla, IE 10 a IE 7 Zdroj: vlastní
Main, article a aside
Hlavní část stránky tvoří element div s id main, který obaluje druhotnou navigaci, hlavní článek – article a postraní panel – aside. Menu je opět jednoduché, horizontální a s každou načtenou stránkou zůstává stejné. Byla zde snaha o tvorbu zajímavého menu hlavně za pomoci vlastnosti transition, transform a opacity. Každá položka menu představuje jednu univerzitu, na které je možné absolvovat jazykový kurz v Anglii. Jako pozadí má tedy každý odkaz přiřazen jiný obrázek s fotkou dané univerzity. Položky menu jsou dále nastylovány pomocí vlastnosti border-radius, která zakulacuje rohy obrázku. Odkazy jsou dále překryty elementem div s identifikátorem text. V tomto elementu jsou zobrazeny názvy univerzit, což je při načtení stránky viditelný text a dále je zde popis univerzity, který viditelný není.
<li> /*Položky menu*/
<a id="brighton" href="#"> /*Identifikátor konkrétní položky*/
<div class="text">
<span class="nadpis">název univerzity</span> /*Viditelný nápis*/
<p class="t">popis univerzity</p> /*Skrytý nápis*/
li a .text { /*Název univerzity + popis univerzity*/
transition: all 0.5s ease;
První pravidlo (li a .text) je deklarováno pomocí vlastnosti transition, ta způsobí pozvolný přechod změn, které jsou deklarovány v pravidle druhém (a:hover .text). Dále je u elementu text nastaveno pozadí na červenou barvu a vlastnost opacity určuje její 80%
průhlednost. Po najetí myši na položku menu se změní element text pomocí metody translate a posune se o 30px po ose y dolů, dále se zvětší výška elementu, barva pozadí se zneprůhlední a zviditelní se popis školy. Na následujícím obrázku je znázorněn výsledný efekt. U Internet Exploreru 8 a starších verzí nebude efekt stoprocentně totožný, ale na funkčnost stránky to nebude mít žádný vliv.
Obr. 34: Najetí myši na položku sekundárního menu Zdroj: vlastní
Další část, která je obsažena v elementu s identifikátorem main je article. Article, v překladu článek, je novým elementem HTML5 a je v něm generován obsah stránek.
Nachází se zde tedy všechen text, obrázky, videa apod. Jak je možné nastylovat tyto prvky bude popsáno v následující kapitole. V main se ovšem nachází ještě další element HTML5 aside. Ten je zde využit pro zobrazení aktualit. A pro to, aby si aktualit případný návštěvník stránek opravdu všiml, bylo využito CSS3 vlastnosti animation. Ta je aplikována na nadpis.
@keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.3);}
100% {transform: scale(1);}}
.widgettitle { /*Nadpis - Aktuality*/
text-align: center;
animation: pulse 1s 4;}
Animace „pulse“ způsobí to, že se nadpis díky transformaci zvětší o 30% v průběhu jedné sekundy a bude se opakovat čtyřikrát. Poté animace skončí, aby nepůsobila příliš rušivě.
Jedná se o jednoduchý efekt, který ale dokáže přilákat pozornost a není k němu potřeba žádný externí skript. Animace je ovšem viditelná jen u moderních internetových prohlížečů.
Obrázky a alba
Stránka s jazykovými kurzy bude obsahovat větší počet obrázků, které budou ale povětšinou zobrazovány jednotlivě a ne jako album. Tomu také bylo přizpůsobeno stylování.
.obrazek img {
Všechny fotky vkládané do stránky mají nastavenou šířku na 300px a budou se zobrazovat vždy vpravo stránky. Mají zelené ohraničení a zakulacené rohy. Běžně jsou obrázky nastaveny jako odkaz, kdy se při jejich pokliku otevře nové okno s fotkou ve větším rozlišení. Zde je řešení trochu jiné. Při najetí myší na fotku, se pomocí metody scale fotka zvětší o 220% a pomocí metody translate se vycentruje na stránku. Transition způsobí, že tento přechod bude plynulý. Vše probíhá na jedné stránce. Zvětšení obrázku bude funkční u moderních prohlížečů a u IE 8+.
Videogalerie
Firma Czech-us používá ke své propagaci často videa. Byla tedy vytvořena stránka, ve které se nachází zatím jedno video a jedna zvuková upoutávka. Audio i video bylo vloženo pomocí HTML5 tagů. Converter“45 bylo nutné znělku převézt minimálně do dvou audio formátů, aby bylo jisté, že se zvuk přehraje ve všech internetových prohlížečích. Zvolen byl formát mp3, který je kompatibilní se Safari, Chromem a Internetem Explorer a formát Ogg Vorbis, který je naopak podporován prohlížečem Firefox, Opera a znovu Chrome. Zdrojová videa se
45 Miro Video Converter [online]. 2014 [cit. 2014-04-02]. Dostupné z: http://www.mirovideoconverter.com/
deklarují v prvku source za atributem src. Je vhodné uvézt i typ audia, aby uživatelský agent byl předem schopen říci, zda je možné audio přehrát nebo ne. Jak je vidět, v deklaraci audia je na posledním místě uveden klasický odkaz pro možnost stažení souboru. Tento odkaz nebude běžně viditelný. Zobrazí se pouze tehdy, kdy prohlížeč nebude element audio podporovat. Z atributů je dále uvedeno pouze controls, které zobrazí ovládací prvky, aby si uživatel mohl zvuk přehrát. Díky tomu, že je element audio součástí HTML specifikace, je možné ovládání dále upravit pomocí kaskádových stylů. Základní nastylování je zobrazeno na obrázku. Pro zacílení na jednotlivé buttony v ovládání je však nutné použít JavaScript, což bude znázorněno u elementu video.
Obr. 35: Element audio v prohlížeči Chrome, Mozilla, IE 10 a IE 7 Zdroj: vlastní
Video bylo také obdrženo ve formátu mp4. Stejným programem, jaký byl použit ke konverzi audia, byl video soubor převeden do formátu webm. Tyto dva formáty společně s Flash videem jsou postačující pro to, aby bylo video možné přehrát ve všech
<a class="odkaz" href="./videa/kurz.mp4">Rozhovor - jazykové kurzy pro firmy ke stažení</a></video>
Kromě zdrojů videí a typu je v každém prvku source uveden také typ kodeku v jakém je video kódováno. Opět to napomáhá prohlížeči v rozpoznání, zda dokáže video přehrát.
V deklaraci je uveden povinný parametr šířka videa, kterou je následně možné pomocí kaskádových stylů upravit pro různě velká zobrazovací zařízení. Dále je zde atribut controls, který zobrazí ovládací prvky a poster, který místo prvního snímku videa načte daný obrázek. Poster je zde přidán z toho důvodu, že první snímek videa byla černá obrazovka a ta pro uživatele nemá žádnou vypovídací hodnotu. Pomocí náhledového obrázku uživatel alespoň částečně ví, co je možné od videa očekávat. Pokud internetový prohlížeč nebude podporovat element video, zobrazí se okno pro přehrání videa Flash ze serveru Youtube.com a pod ním odkaz na stažení videa ve formátu mp4, který je podporován staršími prohlížeči. Pokud by bylo potřeba sjednotit vzhled videa a jeho ovládacích prvků s celkovým vzhledem webu, je možné na ovládací tlačítka zacílit pomocí JavaScriptu. Pod deklaraci videa se vloží například následující kód s novými ovládacími prvky, v JavaScriptu se následně skryjí staré buttony a přiřadí se jejich funkce novým tlačítkům. Tato tlačítka je dále možné nastylovat pomocí CSS.
<div id="controls">
<button id="start">Přehrát</button>
<button id="stop" disabled>Stop</button>
… <div id="progressbar">
<div id="loadingprogress"></div></div>
Obr. 36: Element video v prohlížeči Chrome a alternativní zobrazení pro prohlížeč IE 7 Zdroj: vlastní
Výsledné video i audio jsou nastylovány pomocí box-shadow a border-radius, nová tlačítka pro přehrávání videa jsou stylována obdobně, tak aby barvy částečně korespondovaly se vzhledem stránky. Výsledný vzhled záleží na vývojáři, zde je pouze ukázka, jaké nové možnosti se přidáním specifikace elementů videa a audia do HTML nabízejí.
Formulář a komentáře
Společnost Czech-us umožňuje zákazníkům ji kontaktovat pomocí formuláře. Ve většině případů je postačující formulář se jménem, emailovou adresou zákazníka a zprávou, která má být zaslána. V projektu byl vytvořen registrační formulář, který obsahuje o trochu více políček. Všechna byla vybrána tak, aby byla funkční ve všech prohlížečích. Kromě tedy jména a příjmení je na formuláři datum narození s novým vstupním typem date <input
name="narozeni" type="date" required> dále emailová adresa s typem email <input name="email" type="email" placeholder="priklad@email.cz" required>
a telefon s typem tel <input name="phone" type="tel" placeholder="Př. 777 000 000" required>. U pole s emailem se nachází i placeholder, který zobrazí, v jakém formátu má být email vyplněn. Při pokusu o odeslání dat formulářem, bude zkontrolována správnost zapsaných informací. Pokud nebudou odpovídat vzoru nebo budou políčka prázdná, formulář se neodešle a u špatně vyplněných polí se zobrazí validační zpráva.
Obr. 37: Validační zpráva v prohlížeči Chrome Zdroj: vlastní
input, textarea {
border: 1px solid rgb(205,205,205);
border-radius: 5px;
background: linear-gradient(to bottom, rgba(107,107,107,0.2) 0%,rgba(107,107,107,0) 100%);
box-shadow: inset 1px 1px 3px 1px grey;}
Formulářová pole byla nastylována pomocí ohraničení border pro starší prohlížeče a pomocí zakulacení rohů, gradientů a vnitřního stínu, které budou viditelné pouze u nových verzí internetových prohlížečů. Výsledná pole vypadají, jako kdyby byla do stránky vtlačena. Pole často nejsou stylována, ale jak je vidno mohou stránce dodat na image. Na konci formuláře se nachází odesílací tlačítko. Při pokliku na něj se spustí animace nazvaná
„flip“, která se provede pouze jednou a bude trvat jednu sekundu.
@keyframes flip { 0% {
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;}
… 100% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;}}
#reg:active, #reg:focus { animation: flip 1s 1;}
Výsledek animace vypadá, jako kdyby se tlačítko formuláře otočilo a odletělo, což má připomínat odlet dopisu. Z kódu je vidět, že k tomu byla použita CSS3 vlastnost transform a několik jejích metod: perspective, translate, rotate a scale. Animace bude viditelná pouze u moderních prohlížečů, ale na funkčnosti to stránce neubere.
Obr. 38: Animace "flip" u tlačítka formuláře Zdroj: vlastní
Na stránku se budou moci také přidávat komentáře. Jejich nastylování je obdobné jako u ostatních prvků na webu. Obrázek avatara uživatele je zakulacen pomocí border-radius čímž napodobuje moderní vzhled avatarů, které mohou mít lidé například na sociálních sítích.
.comment-author img {width: 50px; height: 50px; border-radius: 3em;}
Obr. 39: Komentář s avatarem Zdroj: vlastní
Zobrazení pro různá zařízení a prohlížeče v moderních prohlížečích. Stránky byly testovány v prohlížečích Google Chrome, Mozilla Firefox a Internet Explorer 10 – 7, funkčnost stránek i vzhled byly v těchto prohlížečích zachovány. Důležité je podotknout, že částečná zpětná kompatibilita HTML5 elementů byla vytvořena pomocí otevřené javascriptové knihovny „Shiv“. Bez ní by nebylo možné prvky jako article nebo footer ve starších prohlížečích nastylovat.
Pro kompatibilní zobrazení na mobilních zařízeních bylo využito dotazů na média neboli media queries. Byl vytvořen další stylovací soubor style_m.css, který je určen pro zařízení s úhlopříčkou obrazovky menší než 7 palců. Dotaz na média je vložen v hlavičce HTML kódu stránky pomocí následujícího odkazu: <link rel="stylesheet"
href="./uceni/style_m.css" media="(max-width: 7in)"> Sedm palců a méně odpovídá velikosti obrazovky většiny mobilních zařízení. Pokud bude mít uživatel například tablet s větší úhlopříčkou, zobrazí se mu výchozí stylovací soubor style.css.
Změny ve stylování pro mobilní zařízení byly zejména následující: Šířka stránky je nastavena na 100%, ve výchozím stylování je šířka stránky pevně nastavena na 950px.
Stejným způsobem je upraveno hlavní i vedlejší menu a audio a video elementy. Tyto úpravy způsobí to, že se prvky budou samy přizpůsobovat velikosti obrazovky a například tlačítka navigace tedy zůstanou stále stejně velká a čitelná. Jelikož postraní menu s odkazy na sociální sítě bylo možné zobrazit pouze přejetím myše, které na mobilních zařízeních ztrácí význam, bylo toto menu skryto. Uživatelé mohou ale stále nalézt odkazy v patičce stránky. Na stránce byl také skryt element aside, který na mobilních zařízeních zbytečně zabíral místo pro hlavní text. Výsledky úprav pro mobilní zařízení je možné posoudit na následujících screenshotech.
Obr. 40: Windows Phone - IE, úhlopříčka obrazovky 4 palce - vertikální náhled vs. iOS - Safari, úhlopříčka obrazovky 3,5 palce
Zdroj: vlastní