1 Bankovní institut vysoká škola Praha K101 Katedra matematiky, statistiky a informačních technologií WEB 2.0 nové trendy dnes, zejména CSS3 a HTML5 D...
Bankovní institut vysoká škola Praha K101 – Katedra matematiky, statistiky a informačních technologií
WEB 2.0 – nové trendy dnes, zejména CSS3 a HTML5 Diplomová práce
Autor:
Bc. Tomáš Krištof Informační technologie a management
Vedoucí práce:
Praha
PhDr. Ing. Antonín Pavlíček, Ph.D.
Červen, 2011
Prohlášení Prohlašuji, ţe jsem diplomovou práci zpracoval samostatně a v seznamu uvedl veškerou pouţitou literaturu. Svým podpisem stvrzuji, ţe odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen se skutečností, ţe se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací.
V Karlových Varech, dne 30. června 2011
Tomáš Krištof
Anotace práce Diplomová práce s názvem „WEB 2.0 – nové trendy dnes, zejména CSS3 a HTML5“ je průřezem nových technologií současné doby v oblasti webových stránek a testování pouţitelnosti těchto technologií jiţ v dnešní době. Práce je rozdělena do několika sekcí, první dvě pojednávají o historii a současnosti WWW stránek a jejich uţití. Další z kapitol popisuje nové technologie a zároveň testuje jejich pouţitelnost, zatímco následující se pokouší odhadnout, jakým směrem se budou webové technologie ubírat do budoucna. Předposlední dvě kapitoly jsou jiţ ryze praktická, kde v první z nich byl vytvořen program na sestavení statistiky uţívání doctype v dnešní době a v druhé je shrnutí celé práce, kdy za pouţití popsaných nových technologií byla vytvořena šablona pro komerční webové stránky, které jsou nasazeny do ostrého provozu. Součástí práce jsou téţ shrnuté výsledky a doporučení z pohledu autora. Klíčová slova: Webové stránky; nové technologie; WEB 2.0; HTML5; CSS3; budoucnost WWW; statistika doctype
Annotation Diploma thesis „WEB 2.0 – new trends today, especially CSS3 and HTML5“ is a presentation of new technologies present time in the web site branch and usability testing of these technologies as early as today. This work is divided into several section, the first two are about history and present web pages and their usability. The third chapter describes new technologies and testing their applicability, while the fourth is trying to guess which direction they will take Web technologies for the future. The fifth and sixth chapters are purely practical. In the fifth was created a program to compile statistics of usage doctype in this time. And the sixth is a summary of the whole work, which was used new technologies and created template for commercial websites that are deployed into production. Part of the work are also summarized the results and recommendations from the perspective of the author. Keywords: Web pages; new technologies; WEB 2.0; HTML5; CSS3; the future of WWW; doctype statistics
Obsah Úvod ...................................................................................................................................... 7 1.
Historie a uţívání WWW stránek .................................................................................. 9 1.1.
Historie webu .......................................................................................................... 9
1.2.
Historie značkovacích jazyků ................................................................................. 9
Postup tvorby šablony a problémy při tvorbě ....................................................... 70
Výsledky ...................................................................................................................... 72
Závěry a doporučení ............................................................................................................ 73 Elektronické zdroje .......................................................................................................... 74 Tištěné materiály ............................................................................................................. 76 Seznam obrázků: ................................................................................................................. 77 Rejstřík ................................................................................................................................ 79
6
Úvod Webové stránky jsou v poslední době jedním z nejdynamičtěji se rozvíjejících odvětví počítačového průmyslu. Pouţití webových stránek je rozličné, ať jde o soukromou prezentaci nadšeného uţivatele počítače či internetu, přes zábavu, socializaci, blog či různé databáze vědomostí, receptů aj. aţ po byznys, kterým webové stránky bezesporu jsou. S vynalézáním a komerčním nasazováním nových technologií, jeţ umoţňují rychlejší a levnější přístup na internet mnohem více uţivatelům, jde ruku v ruce vývoj webových stránek. Uţivatelé se dnes nepřipojují pouze ze stolních počítačů nebo notebooků, ale čím dál častěji také z mobilních zařízení, jako jsou chytré mobilní telefon (Smartphony) či tablety. Mnoho sluţeb se v současné době přesouvá z desktopu právě do prostředí webových prohlíţečů a internetu, proto si uţivatelé ţádají sluţby a komfort na internetu, na který jsou zvyklí z prostředí desktopových aplikací. Výrobci webových stránek by měli tedy testovat uţivatelská rozhraní a za pouţití nejnovějších technologií je co nejvíce funkčně připodobňovat tomu, na co jsou uţivatelé zvyklí a co si ţádají. Pryč je jiţ doba, kdy uţivatelé byli ochotni nahrávat fotografie do galerie po jedné, čímţ vytvořením jedné online galerie strávili i hodiny. Nyní si uţivatelé ţádají, aby mohli nahrávat mnoho fotografií najednou, označením jako v prostředí operačního systému počítače, nejlépe pouhým přetaţením fotografií myši do webového prohlíţeče, které se postará o vše ostatní a o průběhu bude pouze informovat. Přičemţ uţivatel dále, ideálně, můţe s webovou aplikací pracovat, zatímco se fotografie zpracovávají. Současné schválené standardy zdaleka nevyhovují těmto novým poţadavkům uţivatelů, nové době a zařízením. Proto je nutné, aby se připravovaly standardy nové, které posunou virtuální svět webových technologií dále. Konsorcium W3 proto v současné době usilovně pracuje na vytvoření specifikace rodiny technologií HTML5 a nových kaskádových stylů s označením CSS3, které do této rodiny také patří. Zejména o těchto nově připravovaných technologiích pojednává tato diplomová práce, která si vzala za cíl seznámit čitatele a utřídit jeho vědomosti ohledně historie, vývoje webových stránek a pochopení souvislostí, o způsobu jejich uţití a přerodu aţ do takových webových stránek, které si dnešní doba a zejména uţivatelé ţádají. V diplomové práci jsou představeny některé z nově připravovaných technologií, obvykle je vysvětleno v čem je nová technologie či vlastnost lepší a jaké dává webdesignerovi či uţivateli nové moţnosti či jiná vylepšení. Zároveň je otestováno a vyhodnoceno, jak jsou tyto nové technologie 7
a vlastnosti pouţitelné v produkčním nasazení jiţ v současné době, co dnešní webové prohlíţeče jiţ umí a na implementaci kterých funkcí se ještě čeká. Vše je popsáno, testováno a hodnoceno z pohledu dlouholetého komerčního tvůrce webových stránek s důrazem na pouţitelnost, funkčnost, efektivnost apod. Součástí diplomové práce je, krom testování nových technologií, také vytvoření statistiky pouţitelnosti doctype. Tato statistika zobrazuje, jakých standardů jsou současné webové stránky napříč celým internetem a kolik procent webových stránek je prozatím vytvořeno dle poslední specifikace XHTML 1.0 nebo jiţ dle nově se připravující specifikace HTML5. Statistika je, dle domén, rozdělena na jednotlivé kontinenty, aby bylo zřejmé, kde je pokrok největší a obráceně a jak si stojí Česká republika oproti zbytku světa.
8
1. Historie a užívání WWW stránek 1.1. Historie webu Filosofií WWW stránek je jejich vzájemná provázanost, tedy propojení prvku WWW stránky jedné odkazem na WWW stránku druhou, čímţ se WWW stránky liší od ostatních dokumentů vyvěšovaných v univerzitních a jiných sítích jiţ daleko dříve. Tato vzájemná provázanost se nazývá „hypertext“ a za zakladatele jejího i WWW je povaţován Sir Tim Berners-Lee, v současné době ředitel konsorcia W3, který v roce 1991 publikoval své první WWW stránky (Longman, 1998). Kořeny samotné myšlenky hypertextu ale sahají aţ do roku 1945, kdy doktor Vannevar Bush publikoval článek „As We May Think“, ve kterém zmiňuje tzv. „Memex“, pomocí kterého lze vytvořit odkazy mezi dokumenty. Pojem „hypertext“ vymyslel ale aţ v roce 1965 Ted Nelson, který ovšem jeho softwarovou implementaci, ve vlastním systému „Xanadu“, nedokončil. První funkční hypertextový systém byl vyvinut na Brownově univerzitě týmem, který vedl Andries van Dam v roce 1967. Od té doby se objevovala různá řešení, ale aţ Tim Berners-Lee v roce 1989 pospojoval všechny nezávisle vyvíjené technologie a myšlenky, jako Bushův Memex, Cerfův protokol TCP/IP, protokol DNS, definoval URL (Uniform Resource Locator), http (HyperText Transfer Protocol) a přidal vlastní implementaci jiţ devět let existujícího standardu SGML na které spolupracoval s Robertem Caillauem, čímţ poloţil základy pro projekt zvaný WWW – World Wide Web. V roce 1990 stál u vytvoření prvního webového server a klienta (prohlíţeč WWW stránek), čímţ se začala psát plnohodnotná historie webu (Caillilau, 1995; Gromov, 1995).
1.2. Historie značkovacích jazyků Značkovací jazyk byl jiţ od samotného začátku navrhován velice chytře, platformě nezávisle a trvanlivě. Jedná se o formálně definovaný jazyk, který přímo do těla prostého textu vkládá značky, tzv. tagy, které textu definují význam, jeho samotnou strukturu a v počátcích vývoje téţ formát. Velkou výhodou, oproti jiným binárním formátům, je právě zápis v prostém textu. Nejsou potřeba ţádné specializované programy na úpravu textu, které by byly závislé pouze na některých operačních systémech či na podpoře ze strany výrobce a znalosti specifikace. Není problém, ţe by leta starý dokument definovaný značkovacím jazykem nebylo moţné v budoucnu přečíst nebo upravit. Zásluhu na tomto přístupu má William Tennicliffe, který na konferenci CGPO (Canadian Government 9
Printing Office) v roce 1967 přednášel na téma „Separace informačního obsahu dokumentu od jeho formy“ (Webylon.info, 2004).
1.2.1. GML Kořeny značkovacích jazyků, tak jak je vyuţíváme dnes, se datují od roku 1969. Trojice zaměstnanců IBM (Charles Goldfarb, Edward Mosher, Raymond Lorie) vyvíjela, ve výzkumném středisku IBM v Cambridge, GML (Generalized Markup Language) – bezesporu první značkovací jazyk. Jeho finální podoba byla představena v roce 1973 první, relativně primitivní, implementací. Jazyk GML byl jako první zaloţen na konceptu DTD (Document Type Definition) se stanovenou strukturou, posloupností a tvarem jednotlivých značek. Podobnost s HTML je očividná, tagy nejsou ale uzavřeny mezi ostré závorky, jsou uvozeny znakem dvojtečka a ukončeny znakem tečka: :body. :h1.Nadpis první úrovně, není potřeba tag ukončovat :ul. :li.První odrážka :li.Druhá odrážka :eul. :p.Odstavec textu apod.
1.2.2. SGML Koncepce jazyka GML se osvědčila, a proto se na jeho základech v roce 1978 začal vyvíjet nový jazyk (metajazyk), který měl za cíl umoţnit definici vlastních značkovacích jazyků – SGML (Standard Generalized Markup Language). V roce 1986 byl tento jazyk standardizován normou ISO 8879. SGML tedy není značkovacím jazykem, ale standard, pomocí jehoţ pravidel lze sestavit DTD a upřesňující pokyny pro parser, v kterých lze definovat různé vlastnosti vyvíjeného značkovacího jazyka – např. citlivost na velikost písmen, uvozovací a ukončující znaky tagů apod. Ovšem napsat parser pro SGML, který by plně zachovával veškerou jeho flexibilitu a obecnost, se ukázalo jako velice obtíţné (Crhonek, 2003).
1.2.3. HTML HTML je bezesporu nejznámější značkovací jazyk vycházející z metajazyka SGML, jehoţ autory byli Tim Berners-Lee a Robert Caillau, v té době oba zaměstnanci CERN (Central Européene de Rechere Nucléaire). První verze HTML 1.0 byla dokončena v roce 1993, ale jiţ v době dokončení bylo zřejmé, ţe HTML bude muset obsahovat více tagů, a proto rychle vzniklo HTML+. Vývoj HTML v počátcích ovšem nebyl moc 10
koordinovaný, z toho důvodu bylo Timem Bernersem-Leem zřízeno konsorcium W3, které mělo připravovat doporučení ohledně HTML a ostatních webových formátů, z nichţ některá se později stala standardy (Webylon.info, 2004; Wikipedia, 2010). V roce 1994 byla sestavena pracovní skupina pro vývoj HTML 2.01, do kterého měla implementovat připomínky a rozšíření předešlých verzí a přidat nové tagy jako např. tabulky, formuláře apod. Takto vývoj jazyka pokračoval, do kaţdé verze HTML přibylo něco nového, nové tagy, nové specifikace apod. V roce 1995 byl uveřejněn návrh HTML 3.0, které po jeho dokončení v lednu roku 1997 bylo vydáno jako HTML 3.22. V dubnu 1997 pak byla vydána specifikace HTML 4.03, kterou v prosinci 1999 vystřídalo HTML 4.014 - prozatím poslední oficiální HTML specifikace, která se v poměrně hojné míře (přes 17 %) pouţívá i v dnešní době, viz kapitola 5 – „Statistika uţívání doctype v dnešní době“ (Longman, 1998; Crhonek, 2003). Kvůli tlaku na sémanticky bohatý zdrojový kód a lepší přístupnost vytvářených webových stránek konsorcium W3 nejen, ţe přidává s kaţdou verzí nové tagy, ale také se snaţí veškeré tagy, které definují formát z HTML vyřadit. Z historických důvodů toto nelze z verze na verzi, proto konsorcium přišlo s konceptem, ţe kaţdá z verzí je definována ve třech řadách: „Strict“, „Transitional“ a „Frameset“ (W3.org). Řada Strict zdůrazňuje strukturu nad formátem (prezentací), neobsahuje ţádné zavrţené tagy definující formát dokumentu, kterými například jsou , ,
a zároveň také ţádné parametry tento formát definující, jako je např. border, background, color apod. Psaní v této řadě je doporučováno pro vytvoření naprosto čistého
a přístupného zdrojového kódu s nejvyšší sémantickou hodnotou (w3.org). Řada Transitional není ve své specifikaci tak striktní, dovoluje na rozdíl od řady Strict pouţívat tagy či parametry definující formát dokumentu. Neumoţňuje ale pouţití tzv. rámů (frames). Řada Frameset je stejně benevolentní jako řada Transitional, ale navíc umoţňuje pouţití překonaných rámů. Rámy kdysi, v počátcích internetu s omezenou rychlostí, definovaly strukturu dokumentu – rozčleněním do několika rámů, jako je např. hlavička, menu, hlavní část stránek, patička apod. Při prvním přístupu na stránku se načetla tato 1
stránka celá, ale při pohybování se po stránce se měnily pouze nutné rámy – většinou tedy vše bylo statické a při kliknutí na menu se změnil obsah pouze v rámu s hlavní částí stránek. To, ţe se znovu nepřenášela statická data, která se v danou chvíli nezměnila, bezesporu šetřilo čas a datový tok na dřívějších pomalých a drahých linkách, stejně jako vyuţití hardware, ať jiţ serveru nebo klienta.
1.2.4. XML Po nevalném úspěchu SGML, který se díky své obecnosti a univerzálnosti nerozšířil tak jak bylo původně jeho autory zamýšleno, se rozhodlo konsorcium W3 vytvořit jazyk, který by byl stejně univerzální jako SGML, ale vyvaroval se jeho neduhům. V polovině roku 1996 začal vývoj jazyka XML (eXtended Markup Language), jehoţ specifikace vydalo konsorcium W3 v únoru 1998. Při vývoji byl brán velký důraz na jednoduchost jazyka, pouţitelnost, kompatibilitu se SGML, čitelnost kódu (jak stroji, tak lidským okem), jasnost, omezení volitelných rysů na rozdíl od SGML apod., coţ mimo jiné vedlo k daleko jednoduššímu parseru a tím pádem rychlému zpracování dokumentu. XML si zachovalo všechny výhody značkovacích jazyků a po jeho uvedení mělo velké ambice – nahradit HTML na WWW. V současné době je XML ve dvou verzích, aktuální verzí je 1.1 (druhé vydání)5, ale z historických důvodů je stále aktivní i verze 1.0 (páté vydání)6. Nová verze 1.1 vznikla zejména z nutnosti pouţití znaků v názvech elementů, atributů atd. jazyků, které vznikly aţ po uvedení Unicode 2.0, jeţ verze 1.0 pouţívá. S jazykem XML je spojeno mnoho technologií, jimiţ jsou např. XPath, XSL(T), FO, XInclude, XLink, XPointer, XMLBase apod. Jeho obliba a nasazování stále roste, v současné době se vyvíjí a rozšiřují Office Open XML (OOXML) formát, XML databáze apod., moţnosti pouţití XML jsou velice široké a nasazení je na rozdíl od původního SGML masové (Kosek, 2000; Crhonek, 2003; Webylon.info, 2004; w3.org).
1.2.5. XHTML XHTML (eXtended HyperText Markup Language) vzniklo z původního záměru konsorcia W3, nahradit HTML na webu značkovacím jazykem XML. Ovšem přechod z HTML na XML by byl velmi zdlouhavý a obtíţný, proto konsorcium udělalo tento mezikrok a v roce 2000 uvedlo XHTML 1.07. XHTML 1.0 má naprosto stejné tagy a atributy jako poslední HTML 4.01, ale je formálně definovanou instancí XML, je nutné 5
tedy dodrţovat striktnější zásady XML, jako je zákaz kříţení tagu, jejich zápis pouze malými písmeny, veškeré hodnoty atributů musí být uzavřeny v apostrofech nebo uvozovkách, pevně definovaná posloupnost tagů apod. (Crhonek 2003; Webylon.info 2004; w3.org). XHTML bylo vydáno, stejně jako HTML ve třech řadách (Strict, Transitional a Frameset). XHTML se po uvedení poměrně velice slušně rozšířilo a většina dnešních webů (více neţ 70 %) je psaná právě v XHTML, viz kapitola 5 – „Statistika uţívání doctype v dnešní době“. Konsorcium W3 v květnu roku 2001 uvedlo doporučení XHTML verze 1.18. Tato verze jiţ nebyla pouze přepracované HTML do zásad XML, ale vycházela jiţ striktně z XML a přidala moţnost modularity. Tato specifikace nebyla nikdy masově rozšířena (v současné době je její zastoupení pod 3,5 %, viz kapitola 5 – „Statistika uţívání doctype v dnešní době“), protoţe v té době nejpouţívanější prohlíţeč – Internet Explorer – nedokázal korektně dokument typu (mime-type) application/xhtml+xml zobrazit (w3.org; wikipedia.org, 2004).
1.2.6. Další značkovací jazyky Výčet výše uvedených značkovacích jazyků není v ţádném případě kompletní, jedná se pouze o popis nejznámějších, nejzásadnějších a nejpouţívanějších jazyků. Značkovacích jazyků v průběhu vývoje klientů (počítačů, čteček, mobilních zařízení apod.) vzniklo daleko více, jako např. z XML vycházející WML (Wireless Markup Language), který byl definován za účelem WAPu (mobilní internet) v éře rozmachů mobilních telefonů, které ale dnes jiţ přistupují, díky velkému rozmachu a rychlému vývoji, na internet prakticky standardně jako počítače – tedy umí pracovat s (X)HTML a ostatními moderními prvky internetu. Dalšími, méně známými značkovacími jazyky, vycházejícím z XML, jsou např. MathML, který byl definován matematiky za účelem zobrazení různých matematických výrazů, dále pak např. TeXML, CALS, XUL, XAML, MXML, XAMJ aj (Crhonek, 2003).
1.3. Kaskádové styly (CSS) CSS (Cascading Style Sheets) neboli „kaskádové styly“ jsou další vrstvou WWW stránek. Tato vrstva, oddělená od obsahu, má na starosti formu stránek – jejich vizuální prezentaci návštěvníkovi, na rozdíl od značkovacích jazyků, které by měly definovat pouze význam a strukturu textu a nikterak nezasahovat do jeho formy. Kaskádové styly jsou
8
http://www.w3.org/TR/xhtml11/
13
velice mocným nástroj, který dokáţe správně strukturovaný dokument jakkoli nastylovat a velice rychle měnit vzhled celých stránek – pouze vyměněním šablony, bez jakékoli změny obsahu dokumentu. Pomocí CSS je moţné, za pouţití několik stylových předpisů, zobrazit jeden dokument mnoha různými způsoby, například v závislosti na zařízení, přes které se k webovým stránkám přistupuje, podle výběru návštěvníka apod. První koncept CSS publikoval v roce 1994 Håkon Wium Lie, který v té době pracoval pod vedením Tima Berners-Lea v CERNu. Specifikace první verze byla vydána v roce 1996 jiţ konsorciem W3, druhá verze (CSS2) pak byla specifikována v květnu roku 1998. Současnou platnou specifikací je CSS2 ve své první revizi (CSS 2.19), od roku 2000 se pracuje na CSS310 (Webylon.info, 2004; Lie, 2005).
1.3.1. Propojení CSS se značkovacím jazykem CSS můţe být do (X)HTML stránek vloţeno buď přímo jako specifikace konkrétního tagu, k němuţ je přidán parametr style, toto je ale hrubě nedoporučováno, ztrácí se tím v podstatě ono oddělení formy od obsahu. Druhou variantou je vepsání CSS přímo do hlavičky (X)HTML dokumentu, coţ také není vhodná varianta – stále je CSS nedělitelnou součástí dokumentu a není moţná tak jeho znovu pouţitelnost pro ostatní dokumenty. Poslední, nejsprávnější varianta, je nalinkování jednoho nebo více CSS souborů pomocí tagu v hlavičce (X)HTML dokumentu. V tomto případě je moţné pomocí parametru media, definovat pro jaká výstupní zařízení se má stylový předpis načíst. Parametr media můţe nabývat hodnot, jako jsou např.: all - pro všechna media; screen – nejčastější, pro obrazovku PC a moderních mobilních zařízení; print – pro tisku dokumentu; aural – pouţit, pokud se na stránky přistupuje pomocí čtečky obrazovky, nebo jiného audio zařízení; braille – pro zařízení pracující s Braillovým písmem; tv – pro obrazovku televize aj. O zpracování stylových předpisů se plně stará výstupní zařízení, prohlíţeč (Webylon.info, 2004; w3.org).
1.3.2. Selektory Selektor určuje, kterou část strukturovaného dokumentu definice ve stylovém předpise ovlivní. Selektor je moţné v CSS určit několika způsoby. Při určování selektoru je nezbytné akceptovat dvě nejzákladnější pravidla – pozdější definice nahradí dřívější, definice se dědí. 9
1. dle tagu: v CSS lze nastavit styl určenému tagu. Např. je moţné definovat, ţe všechny
budou modře orámované, pokud to nezmění pozdější definice. p { border: 2px solid blue; }
2. dle identifikátoru: kaţdému tagu lze pomocí paramteru id definovat unikátní identifikátor na který je potom moţné navázat, přes znak # definici. #unikatni-id { border: 1px solid blue; }
nebo tag#unikatni-id { border: 1px solid blue; }
3. dle třídy: podobně jako identifikátor lze pomocí parametru class nastavit třidu všem tagum, mající něco společného, např. orámování několika vybraných odstavců. Definice stylu se navazuje pak přes znak tečky. .nazev-tridy { border: 1px solid red; }
nebo p.nazev-tridy { border: 1px solid red; }
4. dle následníka: poţadovaný element, který je potřeba nastylovat lze určit téţ dle hierarchie v dokumentu. Lze tedy např. určit, ţe stylová definice se má týkat pouze všech tagu <span>, které jsou v tagu
, ty budou vypsány modrým písmem: p span { color: blue; }
nebo, stylová definice se týká pouze tagu <strong>, který je v tabulce s id=“tab“: table#tab strong { color: blue; }
5. dle potomka: podobné určování v hierarchii dokumentu, jako u následníka, ale aplikuje se pouze na přímého potomka, nevybere všechny následovníky. Definice stylu se navazuje přes znak >. Můţeme vybrat tedy ve vnořeném seznamu pouze tagy
v první úrovni. ul > li { color: blue; }
6. dle sousedícího sourozence: definice stylu lze aplikovat na tag první následující za určeným tagem, např. první odstavec za definici nadpisu 3. Určuje se znakem +: 15
h3 + p { background-color: yellow; }
7. dle přítomnosti parametru: definici lze přiřadit např. všem s libovolným id: img[id] { border: 3px solid blue; }
8. dle hodnoty parametru: definici lze přiřadit např. s alt=“hory“: img[alt=“hory“] { border: 3px solid black; }
9. dle části hodnoty parametru: máme-li s alt=“hory 2009“, alt=“hory 2010“ a alt=“kola 2010“ lze všechny obrázky z roku 2010 vybrat takto: img[alt~=“2010“] { border: 3px solid red; }
10. dle začátku hodnoty parametru: pokud je potřeba u předešlých obrázků zvýraznit pouze ty, kde jejich parametr alt začíná slůvkem „hory“, zapíše se selektor: img[alt|=“hory“] { border: 3px solid green; }
11. dle pseudotřídy: některé tagy mohou nabývat různých pseudotříd, např. při najetí myší nad obrázek se vyvolá pseudotřída hover, u navštíveného odkazu je to zase třída visited apod., definice pseudotříd se přidává pomocí dvojtečky: img:hover { border: 3px solid brown; } a:visited { color: white; }
12. dle pseudoelementu: jako pseudotřídy existuje několik pseudoelementů, kterými např. jsou: first-line, first-letter, before, after, určují se také dvojtečkou: ul li:first-letter { text-transform: uppercase; color: red; }
Mimoto lze selektory mezi sebou libovolně zřetězovat (např.: a[href] strong span.dulezite { color: red; text-decoration: underline; }) anebo je moţné je
seskupovat (např.: p, form, fieldset, img { margin: 10px; border: 1px solid black; }). CSS je opravdu mocný nástroj a s trochou cviku lze nastylovat naprosto
libovolně jakýkoliv dokument. Praxe je ale daleko sloţitější. Ne všechny prohlíţeče podporují všechny typy selektorů, bezchybně funkční v běţných prohlíţečích bývají selektory 1 aţ 4. Interpretace stylových předpisů se také můţe často lišit, nejsou definovány všechny, v CSS moţné, definice nebo jsou v implementacích chyby. Kodér, aby dosáhl stejného nebo maximálně
16
podobného zobrazení, ve všech běţných prohlíţečích, musí vynaloţit velké úsilí a případně pouţít tzv. hacky nebo JavaScript, jeţ problémy řeší.
1.4. Historie prohlížečů Webový prohlíţeč je klient HTTP serveru, který v základu umí načíst označkovaný a nastylovaný dokument a zobrazit jej uţivateli na počítači. Nejedná se o svázaný pár, na webovém serveru můţe běţet libovolný server (démon, sluţba apod.), který poskytuje pomocí protokolu HTTP(S) stránky jakémukoli prohlíţeči, který si o ně stanoveným způsobem zaţádá. Prohlíţeče původně byly textové, ale postupně se vyvinuly grafické, které jsou v dnešní době nejpouţívanější. První prohlíţeč internetových stránek s názvem WorldWideWeb vyvinul sám Tim Berners-Lee v roce 1990, hned po tom, co vyvinul první webový server s názvem httpd. Vytvořením posledního ozubeného kola do soukolí webu mohla začít éra webových stránek naplno, a tak Tim Berners-Lee spustil 6. srpna 1991 historicky první webové stránky na adrese http://info.cern.ch. První webový prohlíţeč, který Tim později přejmenoval na Nexus, aby nedocházelo k zaměňování názvu prohlíţeče a celé technologie, obsahoval zejména tlačítko zpět a vpřed. Tlačítka ale nefungovala jako v dnešní době, listovalo se pomocí nich po stránkách jako v knize. Od té doby se objevilo velké mnoţství různých prohlíţečů, některé přetrvaly, jiné stejně rychle, jak se objevily, tak zmizely (Šindelář, 2009; w3.org). Projekt WWW nadchl vědce výzkumného ústavu na univerzitě Illinois (NSCA) natolik, ţe se rozhodli vytvořit, a v roce 1993 vydat, vlastní grafický prohlíţeč s názvem Mosaic, který WWW stránky dostal do osobních počítačů různých platforem. Prohlíţeč Mosaic byl základním stavebním kamenem pro Netscape Navigator, který vytvořil vedoucí týmu Mosaic Marc Anderson se svým novým týmem po opuštění NSCA. Netscape si získal během jediného roku 80 % trhu. Zbylý tým na Univerzitě Illinois pracoval na Mosaicu dál, ale nevydal jiţ novou verzi, zdrojové kódy prodal Microsoftu (za podíl na zisku), který v roce 1995 uvedl nový operační systém Windows 95, jehoţ součástí byl, v rozšířením Plus!, webový prohlíţeč Internet Explorer 1.0, postavený na předělaných zdrojových kódech Mosaicu. Internet Explorer však oblíbenost Netscape Navigátoru předčil aţ s verzí 4.0, která byla kompletně přepsána a postavena na jádru Trident. Netscape upadal a Explorer pouţívalo více a více uţivatelů, proto se Netscape rozhodl pro odváţný krok – uvolnil zdrojové kódy a vznikl tím projekt Mozilla, který se kompletně 17
odprostil od Mosaicu přepsáním prohlíţeče a nasazením jádra Gecko. Toto vedlo ke zrodu úspěšného prohlíţeče Mozilla Firefox. V roce 1996, vstoupil na trh třetí silný prohlíţeč – norská Opera. V roce 2003 společnost Apple uvedla svůj prohlíţeč s názvem Safari. Prozatím posledním silným prohlíţečem, který v současné době získává na oblibě je od roku 2008 prohlíţeč Chrome od společnosti Google. Tato pětice prohlíţečů v současné době vlastní drtivou většinu trhu ať jiţ na počítačích, tak na moderních mobilních telefonech (Webylon.info, 2004; Šindelář, 2005). Obecným problémem v počátečním bouřlivém vývoji WWW bylo, ţe kaţdý výrobce si do svého prohlíţeče něco, co v aktuálním HTML nebylo, prostě přidal, nebo interpretoval jinak, neţ jiný prohlíţeč. Přidávaly se nové tagy, nové funkce (např. ActiveX od Microsoftu nebo JavaScript od Netscape) apod. Stránky tak mezi sebou nebyly kompatibilní, a pokud si webmaster nedal pozor a optimalizoval stránky pouze pro nějaký prohlíţeč, tak v jiném se vůbec nemusely zobrazit. Dalším obrovským problémem, který do značné míry přetrvává aţ dodnes, bylo po uvedení kaskádových stylů jejich implementace. Nejen, ţe různé prohlíţeče, zejména Internet Explorer, neimplementovaly celou specifikaci, ale i v implantovaných definicích jsou rozdíly v zobrazování v jednotlivých prohlíţečích. Jedním příkladem za všechny je např. tzv. „Box model“ který je dodnes ve dvou různých implementacích. Na vině je ale v tomto případě i W3C se svými specifikacemi, kterými šlo proti vývoji prohlíţečů, které se jen jeho rozhodnutí, kvůli zpětné kompatibilitě, plně nepodřídily. Dnešní webmaster má díky tomu mnoho práce, aby stránky nakódoval tak, aby ve všech nejpouţívanějších prohlíţečích vypadaly maximálně podobně (Webylon.info, 2004).
1.5. Užívání a význam WWW stránek do současné doby Od počátku byly WWW stránky uţívány převáţně pro šíření statických informací mezi výzkumnými ústavy, univerzitami apod. Uţivateli zejména byli vědci, akademičtí pracovníci a studenti. Od roku 1993 internet proţíval raketový rozmach a stává se v mnoha zemích součástí kaţdodenního ţivota i pro běţné lidi. Na internetu se neobjevují jiţ pouze informace pro vědecké a akademické pracovníky, ale také osobní stránky prvních nadšenců a hlavně komerčních firem (z počátku počítačových a později i všech ostatních), které zjistili, ţe internet můţe pomoci jejím příjmům. Postupem času má uţivatel moţnost na internetu najít prezentace firem, produktů či sluţeb, nakupovat, nebo být ve styku s bankou, stejně jako číst denní tisk a to v podstatě z jakéhokoli místa planety. Webové 18
stránky se mění ze statických na dynamické, které kaţdému uţivateli generují obsah dle jeho preferencí, okolností návštěvy či jiného výběru. Internet se stává fenoménem, lidé tráví hodiny a hodiny u počítačů a to i za cenu poměrně drahého vytáčeného připojení, které bylo v devadesátých letech nejrozšířenější (Cailliau, 1995; Gromov, 1995). Internet se stal postupem času nepřeberným mnoţstvím informací a jiných sluţeb. Přes webové stránky bylo moţné se vzdělávat, prohlíţet obrázky či videa z dalekých i blízkých krajů, zvuky, nakupovat či prodávat, dohlíţet a komunikovat s geograficky oddělenými pobočkami firem, vyměňovat si s nimi dokumenty apod. Na internetu se začalo podnikat a firmy do něj investovaly stále větší a větší peníze, ale firemní prezentace se v nepřeberném mnoţství WWW stránek ztrácely. Kdo neznal přesnou adresu, neměl v podstatě moc šancí firmu na internetu najít. Proto bylo nutné se na internetu nějak zviditelnit, a tak vznikly první vyhledávací servery s katalogem firem. Firmy si rády připlatily za to, aby je bylo na internetu vidět a byly správně v katalogu zařazeny. Prvními vyhledávacími portály byly Altavista, Yahoo, u nás Seznam. Tyto portály nabízely více a více sluţeb, některé zdarma, ale vţdy jen v základní verzi, za rozšířené sluţby se připlácí. V roce 1995 na trh vstoupila společnost Google, která se jiţ o tři roky později stala jedním z nejnavštěvovanějších vyhledávacích portálů na celém světě. Google těţí zejména z reklamy, provizí, předplacených míst apod. Od té doby reklamní trh jen roste. Shrnout historii, uţívání a význam WWW stránek lze několika výroky, kterými převáţně jsou: firmy, komerce, reklama, prodej sluţeb a produktů. Od katalogového vyhledávání se postupem času přešlo skoro výhradně na fultextové, coţ byl velký tlak ze strany vyhledávačů na výrobce WWW stránek, aby je připravovali validní a obsahově správné, nejen pro vyhledávače. Konečně tedy dostatečný tlak na to, aby se stánky vyráběly tak, jak bylo původně zamýšleno. WWW stránky se od té doby hodně změnily k lepšímu, přestaly se pouţívat rámce, tabulkový layout a veškeré grafické prvky, které nepatří do obsahu, se přidávají výhradně přes kaskádové styly. I v tomto modelu vyhledávání se točí mnoho peněţ, ať uţ na straně výrobců stránek za SEO (Search Engine Optimization), tak na straně vyhledávačů za sponzorované odkazy, přední místa ve výsledcích hledání a reklamy.
19
2. WEB 2.0: užívání WWW stránek v dnešní době 2.1. Webové stránky v dnešní době a jejich význam Základní webové stránky, prezentující komerční firmu nebo jednotlivce, stejně jako eshopy a jiné podobné stránky jsou doplňovány čím o internetové aplikace a celkově stránky, které by se daly podřadit pod společnou hlavičku WEB 2.0 (Singel, 2005). Samotný termín Web 2.0 neznamená v podstatě nic, co by muselo stránky, pod něj podřazené, technicky spojovat. Samotný název vznikl, kdyţ O’Reilly Media a MediaLive International pořádaly v říjnu roku 2004 konferenci11, která byla brána jako nový směr a nový začátek internetového podnikání po slavné tzv. „dot-com bubble“. Označení 2.0 ale naznačí nic o nové verzi nebo zcela nových technologiích, které by stránky od té doby pouţívaly a jak by měly být od té doby vytvářeny. Nejedná se o nové verze značkovacích či jiných jazyků pouţívaných k výrobě WWW stránek. Jedná se pouze o jiný způsob chápání webových stránek a porozumění zásadám, které vedou k jejich úspěchu. Mezi jednu z hlavních zásad Web 2.0 bezpochyby patří, ţe by webové stránky měly být vytvářeny tím způsobem, aby s přibývajícím počtem uţivatelů byly stránky stále lepší a samotný obsah webových stránek tvořili právě sami uţivatelé. Tedy zaměření na důleţitost dat a uţivatelskou komunitu. Nejednalo se o ţádné průlomové zásady, nebo zaručená pravidla na úspěch. Některé zásady poloţil jiţ Tim Berners-Lee v počátku WWW, ale aţ nyní se na tyto zásady více upozornilo a začaly být lépe uţívány. Web 2.0 tedy měl ukázat směr a poučit se z dosavadních chyb, kdy webové stránky nemají být pouze o komerci, ale hlavně o lidech (Zbiejczuk, 2007). Webové stránky od té doby prošly značným vývojem, je dbán velký zřetel na pouţitelnost stránek, oddělení obsahu od formy, pouţívání standardů, ale také uţivatelsky přívětivý design, komfort, pouţívání zdrojů specializovaných webových stránek (tzv. API) apod. Na internetu se vyrojilo mnoho sluţeb pro lidi, ať uţ od osobních blogů, znalostních encyklopedií, sdílení videí, obrázků, zvuků, aţ po současný fenomén, kterým bezesporu jsou sociální sítě. Sociální sítě jsou pravým naplněním filosofie Rosse Mayfielda: „Web 1.0 was commerce. Web 2.0 is people.“. Lidé mají nástroj, na který se připojí odkudkoli v síti internetu a vytvářejí svou virtuální image. Pro řadu lidí jsou sociální sítě druhým, 11
http://conferences.oreillynet.com/web2con/
20
virtuálním, domovem. Oznamují zde, v podstatě celému světu, co dělají, kde byly, kde budou, sdílejí fotky, videa, odkazy na to co je zajímá apod. Sociální sítě se staly doslova fenoménem, ale tak jako kaţdá mince má dvě strany, mají i sociální sítě své klady i zápory. Díky sociálním sítím mohou ztrácet jejich uţivatelé soukromí na internetu, dokonce i soukromí v reálném světě. Pokud někdo uţívá sociální sítě bez rozmyslu, nemůţe se divit, ţe například po návratu z dovolené můţe mít vykradený byt, nebo pokud se s někým nepohodne, ţe ráno najde poškrábané auto apod. Stejně jako, ţe sociální sítě monitorují a vyhodnocují různé organizace, které tak zjišťují drahocenné informace a spojitosti mezi uţivateli. Na druhou stranu jsou sociální sítě výborným nástrojem pro integraci lidí, vytváření vtahů, kolektivním probíráním problémů a hledáním řešení, nástrojem kvalitní komunikace pro geograficky oddělené přítele apod. Aby se nezdálo, z výše uvedeného popisu, ţe internet je v současné době pouze o lidech, kterým dávají dobrosrdečné vývojové agentury zdarma nebo za drobný poplatek nástroje na jejich sbliţování, komunikaci, zábavu pro vyplnění jejich volného času apod., za vším je potřeba hledat byznys. Prakticky nic na internetu není jen tak, bezúčelně, pro radost. Kde je velké mnoţství lidí, tam se dobře prodává reklama či sluţby. Kde jsou známy podrobné informace o uţivatelích, tam se velice dobře prodává cílená reklama, která má samozřejmě daleko vyšší účinek. Kde je mnoho lidí, kteří si mezi sebou poví, co je dnes zajímavého potkalo, tam je poměrně levné s dobrým marketingem zavést řeč na námi nabízené sluţby, produkty, nebo cokoli jiného a zvýšit si tím prodeje. Kde je masa lidí, tam se prostě obchoduje – s určitou cílovou virtuální skupinou lidí se obchoduje. Kaţdý uţivatel podobných sluţeb má na internetu svou cenu (Kolín, 2010).
2.2. Technologie vývoje WWW stránek v dnešní době Statická webová stránka je v současné době prakticky raritou. Naprostá většina dnešních webových stránek je vytvořena některým ze serverových skriptovacích jazyků a na straně klienta se jedná většinou o značkovací jazyk HTML 4.01 nebo XHTML 1.0 (v kterých jsou vytvořeny webové stránky z více jak 87 % prověřovaných webů, viz kapitola 5 – „Statistika uţívání doctype v dnešní době“), v kombinaci s dalšími technologiemi, kterými zejména jsou CSS 2.1, JavaScript, AJAX nebo jiný prvek dynamiky na klientské straně, např. Flash.
21
2.2.1. Sémantický web Samotná myšlenka sémantického webu byla poprvé vyslovena Timem BernersemLeem roku 2001. Zakladatel W3C upozornil na to, ţe bez striktních pravidel a správně definovaného obsahu webu je z něj pouze změť webových stránek, která stále roste a relevantní informace pomocí stroje v ní je velice sloţité dohledat. Filosofií sémantického webu je, aby obsahu webové stránky porozuměl nejen návštěvník, ale také počítač, aby počítačový program rozuměl významu údajů, které webová stránka obsahuje a mohl s nimi určeným způsobem naloţit (např. aby věděl kdy má zubař ordinační hodiny a tento údaj dokázal kombinovat s kalendářem uţivatele, nebo aby program vybral pro uţivatele pouze relevantní články z oblasti jeho zájmu apod.) (Procházka, 2009). Jednou z technologií dávající význam obsahu webové stránky jsou tzv. mikroformáty (microformats), které se ujaly a poměrně rozšířily (Sládek, 2008). Google či Yahoo mikroformátům rozumí, indexují je a pouţívají, stejně jako vznikají rozšíření webových prohlíţečů, které umoţňují uţivatelům s mikroformáty pracovat. Mikroformáty jsou vlastně předem stanovená sada názvů tříd, které určeným způsobem popisují označená data v rámci moţností (X)HTML. Níţe uvedený příklad demonstruje označení kontaktu, kterému všechny programy, pouţívající mikroformáty, budou rozumět a zpracovat jej, zatímco ostatní programy či webové prohlíţeče jej zobrazí jako prostý obsah (X)HTML stránky.
Telefon <span class=“type“>kancelář: <strong class=“value“>+420 123 456 789
Další z technologií sémantického webu je Resource Description Framework (RDF)12, respektive RDFa (RDF in Attributes)13, která si klade za cíl přiřadit význam obsahu WWW stránky (Sládek, 2009). RDF popisuje vztahy mezi daty, jako podmět – přísudek (vztah) – objekt. K udělení významu datům jsou vyuţívány ontologie, RDF slovníky a RDF schémata, které jsou definovány pomocí RDFS14 či OWL15. Slovníky je moţní, při 12
dodrţení stanovených pravidel, vytvářet vlastní, čímţ je pomocí RDFa moţní popsat jakákoli data a udělit jim význam. Výhody i nevýhody oproti mikroformátům jsou zřejmé. Zatímco mikroformáty mají předem a všem známé sady tříd, RDFa sice umí popsat i to co pomocí mikroformátů nelţe, ovšem za cenu decentralizace a neuniverzálnosti slovníků. Příklad pouţití RDFa:
2.2.2. AJAX Technologie AJAX (Asynchronous Javascript And XML) dokáţe načítat data a měnit návštěvníkovi část zobrazené webové stránky bez nutnosti jejich znovunačtení a plného vygenerování stránky, serverem. Návštěvníci webových stránek, v dnešní době, chtějí opravdu plnohodnotné a pohodlně se pouţívající webové aplikace tak, jak jsou z desktopových aplikací zvyklí. Pomocí technologie AJAX se lze tomuto chování aplikací na webu přiblíţit. Není např. nutné odesílat ke zpracování serveru celou stránku, pokud chce návštěvník jen přidat komentář k fotografii ve fotoalbu či pokud si chce nechat vypsat její EXIF informace, nebo pokud pouze chce změnit jeden záznam ve vypsané tabulce. Tato technologie funguje tak, ţe serveru je odeslán poţadavek na pozadí stránek, server poţadavek klasicky zpracuje a zpět vrátí kód, který je pomocí JavaScriptu zpracován a umístěn na určená místa webových stránek. Na stránce se tedy změní potřebné údaje, ale stránka nemusela být celá znovu načtena, coţ šetří nejen datový tok, ale zamezuje nepohodlnému posouvání a blikání stránky při jejím obnovení apod. (Asleson, 2006).
2.2.3. Webové frameworky K tvorbě WWW stránek jsou v dnešní době v hojné míře vyuţívané tzv. frameworky, ať uţ na straně serveru (např. Netter, Zend Framework), nebo klienta (jQuery). Framework šetří programátorovi čas a eliminuje jeho chyby, protoţe značná část rutinních operací, či operací s kterými jsou spojena bezpečnostní rizika, jsou ve frameworku vyřešeny pomocí knihoven nebo jiných částí kódu. Framework můţe obsahovat návrhové vzory či podpůrné
15
http://www.w3.org/TR/owl2-primer/
23
programy a programátor se tak můţe soustředit pouze na vývoj řešení samotného problému a nikoli ztrácet čas, aby po několikáté „vynalézal kolo“. Samotné programování je tak efektivnější, na druhou stranu ale naprosto závislé na zvoleném frameworku. Aplikaci obvykle nelze bez něj provozovat, a pokud skončí vývoj frameworku, nebo se jeho vývoj stočí směrem, kterým si programátor webových stránek nepřeje, velice sloţitě se migruje na framework jiný. Další drobným problémem, který se můţe vyskytovat u některých frameworků, jsou pomalejší odezvy webových stránek, které pro svůj chod někdy musí načíst zpracovat větší mnoţství knihoven.
2.2.4. API API, neboli Application Programming Interface, jsou typickým příkladem Web 2.0. Jedná se o sluţbu, kterou je moţné, předepsaným postupem, integrovat ve vyvíjené aplikaci. Dle doporučení Web 2.0 by se kaţdý měl věnovat tomu, co nejlépe ovládá a pokud uzná za vhodné, nabídnout jako sluţbu ostatním uţivatelům, kteří znova nemusí řešit obdobný problém. Není efektní a někdy ani moţné vyvíjet aplikace, které by uměly všechno a jejich programátoři se znova a znova zabývali vymýšlením postupů a sluţeb, které jsou jiţ několikrát, obvykle daleko lépe, vymyšlené. Efektivnějším způsobem, pokud sluţbu někdo nabízí, je vyuţít cizí sluţby přes API. Jedná se o zavolání cizí funkce, přesně definovaným způsobem, přes internet, která zpět vrátí poţadovanou odpověď. Obecně tedy nic nového, ale aţ po rozšíření sluţeb nabízejících API dostává tato technologie svůj význam. Oním přesně definovaným formátem, pokud API nevyuţívá nějaký vlastní, jsou obvykle XML-RPC, REST, JSON, SOAP apod. Postup je očekávaný – klient se serveru autentizuje, pokud je vyţadováno a definovaným způsobem zaţádá o výsledek. Server klienta ověří, jestli má přístup k poţadovanému výsledku a zašle zpět odpověď. Klient příchozí odpověď rozklíčuje a zobrazí, nebo s daty jinak naloţí. Tento způsob nevyuţívají pouze webové stránky navzájem, ale i desktopové či mobilní aplikace, roboti apod. V případě webových stránek se API mohou volat jak na straně serveru, tak na straně klienta, záleţí na konkrétních poţadavcích a dispozicích (Malý, 2007; Chow, 2008).
2.2.5. Mashup Technologií moderních webových stránek a typickým příkladem Web 2.0 je tzv. mashup (česky by se dalo nazvat míchanice). Jedná se o webovou stránku, která pomocí API kombinuje data z několika webových portálů v jeden celek, který pak poskytne návštěvníkovi. Vytvořit efektivní webovou stránku, se znalostí API poţadovaných sluţeb, 24
bývá velice rychlé. Pomocí mashupu lze např. přes API Amazonu načíst knihy určité kategorie, pomocí API Twitteru zobrazit tweaty o těchto knihách a např. pomocí Flickru zobrazit obrázky týkající se dané tématiky. Toto vše pohodlně na jedněch stránkách bez toho, aby bylo nutné spravovat obsáhlé databáze vlastními silami. Servery poskytující přes API svá data, která na vlastní náklady shromáţdily, je obvykle poskytují přes API, aby rozšířily jejich sluţby více po internetu. Např. video z YouTube si můţe kaţdý nechat přehrávat na svých stránkách, při přehrávání se samozřejmě zobrazí reklama a portál má tak více příjmů z reklamy, neţ by byl schopen zajistit pomocí zobrazování videí pouze na svém portálu (Chow, 2008).
2.2.6. Cloud computing V současné době se stále více sluţeb, aplikací a dat přesunuje na internet, aby byly přístupné odkudkoli, přes webové rozhraní, aby data byla lépe chráněna a zálohována a aby s nimi uţivatel mohl pracovat z jakéhokoli zařízení připojeného k internetu. Toto je Cloud computing – vše uloţeno a provozováno z internetu, z mraku. Web 2.0 má velkou zásluhu na vzniku Cloudu, samotná filosofie obsahu stránek tvořených uţivateli poloţila základní kámen ke Cloudu – data bylo nutné někde skladovat, pracovat s nimi poskytovat je ať jiţ přes webové rozhraní sluţby, API, nebo jinak. Ona myšlenka přesunu aplikací, sluţeb a dat na výkonné superpočítače nebo serverové farmy není ničím revolučním, její vize pochází jiţ od zakladatele TCP/IP protokolu – Vintona Gray Cerfa z 60. let dvacátého století. Ale jako kaţdá technologie musel její čas uzrát a počkat si na masové nasazení. V dnešní době vysokorychlostních připojení k internetu a levného hardwaru jiţ tato technologie nemá bariéry. Na internetu v současné době jiţ běţí mnoho sluţeb, jako jsou např. Google Apps, které nabízejí jednotlivcům zdarma, ale zejména celým firmám, za poplatek, své sluţby pro on-line kancelář – maily, dokumenty, kalendář, skupiny, messenger, datová úloţiště aj. Výrobci HW i SW připravují počítače a operační systémy, které by byly pouhým terminálem pro Cloud computing. Nespornou výhodou je v této technologii nezávislost na hardwaru – při rozbití, ztrátě, nebo odcizení jsou data stále v bezpečí v Cloudu. Jednou z hlavních nevýhod je zejména bezpečnost. Kdy jsou provozovatelům Cloudu svěřena citlivá data, která nemá uţivatel, nebo firma plně pod svou kontrolou (Kodera, 2009).
25
3. Nové technologie a možnosti jejich použití v dnešní době 3.1. XHTML 2.0 a HTML5 Jiţ po dokončení HTML 4.01 konsorcium W3 začalo pracovat na specifikaci XHTML 2.016, která měla naplnit původní plány W3C – nahradit na webu HTML za zcela nový jazyk postavený čistě na XML. Ačkoli je označení podobné předchozím verzím, měl to být revoluční krok bez zpětné kompatibility. XHTML 2 měl být zcela novým značkovacím jazykem, nezatíţený divokým a nekorigovaným vývojem HTML. Tato filosofie ale nebrala příliš ohledy na poţadavky webdesignerů, proto se proti tomuto konceptu postavili zástupci firem Opera Software, Mozilla Foundation a Apple Computer, kteří poţadovali po W3C jazyk zaloţený na současných formátech, jeţ by dovoloval lépe tvořit webové aplikace a řešil jiné neduhy současné verze. Tyto neshody vyústily po konferenci v roce 2004 v zaloţení vlastní pracovní skupiny s názvem WHATWG (Web Hypertext Application Technology Working Group) v jejímţ čele stanul Ian Hickson, v té době zaměstnanec Opera Software. Tato skupina pracuje více demokraticky neţ uzavřené W3C, na vzájemné shodě všech přispěvovatelů, mezi které patří zejména výrobci webových prohlíţečů. Pracovní skupina má za úkol připravovat koncepty pro rozšíření značkovacích jazyků, aby byly v souladu s poţadavky, které si doba ţádá. WHATWG připravovalo ve dvou vývojových větvích specifikace Web Forms 2.017 a Web Applications 1.018. Později tyto vývojové větve byly sloučeny do jedné s názvem HTML519 (Keith, 2010). Sir Tim Berners-Lee v říjnu roku 2006 přiznal, ţe pokus přesunout web z HTML do XML se nevyvíjí dle plánu a W3C začalo od roku 2007 souběţně s prací na nové specifikaci HTML – s názvem HTML 5 (mezi názvem a verzí značkovacího jazyka je mezera). W3C usoudilo, ţe nemá ale smysl začínat úplně od začátku a tak s WHATWG vyjednalo, ţe jimi připravované specifikace budou základem novým verzím HTML. Tento stav byl velice zmatený, zatímco W3C pracovalo na XHTML 2 a HTML 5, WHATWG pracovalo na specifikaci HTML5. Aţ v roce 2009 W3C oznámilo, ţe dále nebude pokračovat ve vývoji XHTML 2 a ţe se dále s WHATWG budou soustředit na HTML5 (zůstává označení bez mezery před verzí značkovacího jazyka). 16
3.2. HTML5 HTML5, na rozdíl od původního záměru s XHTML 2.0 nevzniká na zelené louce. W3C dalo na návrhy WHATWG, které obsahovaly jednu z hlavních zásad – nadále podporovat existující obsah a především – podřídit se poţadavkům dnešní doby, webdesignerům a tvůrcům webových prohlíţečů. Filosofie HTML5 je v některých ohledech velmi alibistická, s heslem „nehas, co tě nepálí“ či s některými jinými, dalo by se říci zpátečnickými, principy. V HTML5 nedošlo k ţádnému drastickému omezení tagu či atributů, ale na HTML5 se začalo celkově nahlíţet trochu jinak. Ne jiţ pouze jako na specifikaci značkovacího jazyka, kterou si kaţdý v podstatě mohl implementovat po svém, ale spíše jako na nástroj pro tvorbu webových aplikací s komplexnějším přístupem. Dostát všem stanoveným zásadám není pro specifikaci snadné. Na jedné stráně musí být zpětně kompatibilní, včetně tagu, které jiţ v dřívější době byly zavrhnuty a jejichţ uţití bylo nahrazeno jinými postupy či komponentami WWW stránek jako celku. Na druhé straně musí být tento nástroj dostatečně komplexní a sofistikovaný pro tvorbu rozsáhlých webových aplikací, které si doba ţádá (Keith, 2010). HTML5 specifikace nedefinuje pouze jak označkovat obsah tak, aby měl sémanticky správný význam, byl validní a webové prohlíţeče jej správně načetly. Ale poprvé je ve specifikaci uvedeno také, jak se mají prohlíţeče chovat, kdyţ dokument není validně označkovaný. Do této doby si s chybným dokumentem kaţdý prohlíţeč vypořádal po svém a programátoři prohlíţečů trávili zbytečně mnoho času, aby ošetřili chyby, které mohou v (X)HTML dokumentu nastat. Toto bude nyní, stejně jako definice JavaScript či Drag and Drop API, zaneseno ve specifikaci. Tyto zdánlivě překvapivé definice jsou v specifikaci zaneseny proto, ţe HTML5 je navrhováno pro pouţití při tvorbě webových aplikací, které se bez těchto moderních postupů přibliţujících uţivateli webové aplikace k desktopovým, dnes jiţ neobejdou. Coţ vysvětluje, proč specifikace HTML5 je historicky nejobsáhlejší a její finální dopracování a implementaci vývojová skupina odhaduje aţ na rok 2022.
3.2.1. Zjednodušení zápisu Definice DTD (Document Type Declaration – zkráceně: doctype) v hlavičce (X)HTML dokumentu v sobě vţdy nesla informaci o pouţité verzi značkovacího jazyka s odkazem na DTD. V případě HTML 4.01 vypadá doctype takto:
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict
.dtd">, pro XHTML 1.0 Strict vypadá doctype takto:
27
//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">. Tedy naprosto přesný zápis, z kterého se dá vyčíst verze i řada zvoleného
značkovacího jazyka. Nově v HTML je tento zápis pouze . Zápis je sice znatelně zjednodušen, ale v budoucnu z něj nebude moţné vyčíst, o kterou verzi značkovacího jazyka se jedná. Pro prohlíţeč tato informace není podstatná – dokument se snaţí zobrazit i s chybami v syntaxi, je podstatná pouze pro validátor. Ze zásad HTML5 ale jiţ ani pro validátor od verze HTML5 nebude tato informace nezbytná. HTML5 a všechny budoucí verze budou výhradně zpětně kompatibilní, není tedy potřeba přesně specifikovat verzi pouţitého značkovacího jazyka. Statistika pouţívání verzí značkovacích jazyků, připravovaná v praktické části této diplomové práce – kapitola 5, tedy verzí HTML5 končí. Následující verze nebude moţné dle DTD rozeznat. Krom zjednodušení zápisu doctype jsou zjednodušeny vybrané další zápisy. Kódování dokumentu je ve starších verzích určeno zápisem <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, v HTML5 byl zápis zjednodušen pouze na <meta charset="UTF-8">. Stejně tak načítání kaskádových stylů je ve starších verzích
řešeno zápisem , který je v HTML5 zkrácen o definování typu souboru, který beztak vţdy je pouze CSS, na zápis . Obdobně zápis JavaScriptu je ve starších verzích doplněn o definování typu souboru <script type="text/javascript" src="soubor.js">, nově v HTML5 se typ určovat nemusí, stačí určit pouze
cestu k JavaScript souboru: <script src="soubor.js">.
3.2.2. Sémantika Jiţ od samotného vzniku WWW se zvyšuje tlak na porozumění významu obsahu webové stránky nejen uţivatelům, ale také webovým prohlíţečům a jiným počítačovým programům, které mohou se sémanticky správně strukturovaným dokumentem pracovat automaticky samy (Procházka 2009; Keith, 2010). Při přípravě specifikace HTML5 je myšleno na tuto potřebu a proto vzniklo několik nových tagu i atributů, které význam interpretovaným či zadávaným datům přiřazují. Vývojová skupina se snaţí drţet tyto nové elementy v rozumných mezích tak, aby jich nebylo zbytečně mnoho ale spíše se jednalo o elementy, které jsou opravdu ve webových stránkách hojně pouţívány. Po vzoru mikroformátů nejsou tedy řešeny všechny poţadavky webdesignerů, ale pouze ty nejčetnější, ovšem zase s minimálním úsilím. Výhodou tohoto 28
omezeného počtu elementů je, oproti XML kde je moţné si vytvořit libovolné tagy či atributy, ţe jejich počet i význam je dopředu všem známý. Nejen parseru, ale také všem programátorům a programům, které mohou na webové stránky přistupovat s potřebou pracovat s jejich obsahem. Přesto, pokud by bylo potřeba udělit význam datům a nešlo pouţít ţádný ze standardních tagů či atributů HTML5, je tu stále atribut class, který můţe nabývat libovolné hodnoty a pomocí něj je téţ moţné význam datům udělit. 3.2.2.1. Nový význam a použití stávajících značek Protoţe HTML5 je navrţeno tak, aby bylo zpětně kompatibilní s předchozími verzemi (X)HTML, obsahuje také zastaralé a zavrţené tagy či atributy, které ale obecně není doporučeno pouţívat. Jedná se především o značky a atributy definující vzhled dokumentu, jeţ byly plně nahrazeny kaskádovými styly. Některé tagy ale dostávají s HTML5 nový význam, jako tomu např. u tagu , který byl jiţ v minulosti zavrţen a nahrazen tagem <strong>. Nyní ale oba tyto tagy mohou být pouţity současně, s tím, ţe je pouţito ve
významu, kdy jen potřebujeme stylisticky odlišit text od jiného textu, naproti tomu <strong> by mělo být pouţito tam, kde má text vyšší význam. Stejně tak je to s tagem <em>, který určuje textu významnost a tagem , který pouze stylisticky odlišuje text.
3.2.2.2. Header V HTML5 zcela novým tagem je header, který je kontejner pro hlavičku nejen z pohledu celé stránky, ale také z pohledu jejich jednotlivých sekcí. Tag header se na jedné HTML stránce můţe tedy zobrazovat vícekrát, dle potřeby např. jako hlavička celé webové stránky a jako hlavičky článků, které stránka obsahuje apod. Viz příklad: 29
Název stránky
Podnázev stránky
Pomocí tagu hgroup je moţné uvnitř bloku header sloučit související nadpisy. Pokud bychom výše uvedený příklad uzavřeli ještě do hgroup, v navigaci dokumentu by bylo vidět pouze „Název stránky“ a „Podnázev stránky“ by se nezobrazil. 3.2.2.3. Footer Stejně jako tag header je určen k zobrazení důleţitých informací o stránce či sekci nebo článku, tag footer je jeho opakem a mel by obsahovat informace které stránku nebo sekci ukončují. Obvykle se v případě celé stránky jedná o copyright a doplňující odkazy, v případě pouţití u článku to můţe být např. odkaz na zdroj. Viz příklad.
3.2.2.4. Nav Dalším novým tagem v HTML5 je nav, který obsahuje navigační prvky stránek, přesněji řečeno menu, ne kaţdý navigační prvek. Očekává se, ţe v tagu nav bude seznam odkazů na jednotlivé sekce stránek. Viz příklad jednoduchých stránek o čtyřech sekcích:
href=“/uvod/“>Úvodní stránka href=“/predstaveni/“>Představení společnosti href=“/reference/“>Reference href=“/kontakt/“>Kontaktujte nás
3.2.2.5. Aside V sekci stránek aside je očekáváno, ţe budou doplňkové informace k obsahu stránky, které jsou obvykle zobrazeny na boku, ale nemusí to být podmínkou. Tag by neměl být pouţíván tak, jak jeho název napovídá – pokud je potřeba mít něco v pravém či levém sloupci, např. menu, patří to do aside, tag neurčuje pozici samotného obsahu na stránce, ale jeho obsahem by měly být např. informace o autorovi, reklamy, slovníček pojmů, nebo cokoli jiného co netvoří hlavní obsah stránek.
30
3.2.2.6. Section Tag section byl do HTML5 přidán, aby zobrazoval tematicky související obsah. V podstatě je to sémantický doplněk k tagu div – tyto tagy mají podobný účel, ale pouze tag section dodává datům potřebné informace, ţe se jedná o opakující se data a ne o cokoli, co je potřeba na stránkách zobrazit, jako je tomu v případě div. Např. pokud je na stránkách potřeba zobrazit seznam prodejen s kontaktními a doplňujícími informacemi, kde je moţné zakoupit zboţí, je velice vhodné kaţdou z prodejen uzavřít do nové section. <section class=“prodejna“>
Novinkou oproti předchozím verzím je moţnost pouţití tagu h1 vícekrát na stránce, a to v kaţdé oddělené sekci. Kaţdá sekce je brána zvlášť a její obsah můţe mít nadpis nejvyšší úrovně, aniţ by nějak degradoval jiný nadpis nejvyšší úrovně kdekoli na stránce. 3.2.2.7. Article Tag article je obdobou obecnějšího tagu section, ale jak jiţ jeho název napovídá, je určen spíše k zobrazení článků na webové stránce. Pravidlo kdy pouţít acticle je, ţe article je samostatný a nezávislý obsah stránky – pokud jej ze stránky vyňat a pouţit
jinde je stále kompletní. Není výjimkou, kdy na jedné stránce je několik sekcí obsahujících články a kaţdý článek obsahuje několik sekcí. To je zcela v pořádku, viz následující příklad:
3.2.2.8. Mark Nový tag mark nepatří jiţ do skupiny tagu určujících strukturu webové stránky. Tento nový tag nemá ţádnou důleţitost, měl by být pouţit tam, kde bude z nějakého důvodu označený text. Např. pokud návštěvník stránky pouţije pole pro vyhledávání, je moţné mu ve výsledcích hledání zvýraznit zadaná slova pomocí mark. 3.2.2.9. Meter Tag meter je vhodné pouţít k označení nějaké hodnoty na stupnici. Pokud webový prohlíţeč tento nový HTML5 tag podporuje místo výpisu textové hodnoty zobrazí stupnici s hodnotou, která je definována parametrem value. Pomocí parametru min a max lze definovat minimální a maximální hodnotu stupnice, méně či více nemůţe být na stupnici zobrazeno. Pomocí parametru high a low lze určit milníky kdy je hodnota vysoká nebo nízká a pomocí atributu optimum je moţné nastavit optimální hodnotu. Prohlíţeče, jeţ toto podporují, obvykle zobrazí stupnici v jiných barvách v závislosti na hodnotě atributu value a hodnotách atributů high a low, viz následující příklad, kde je stupnice definována: <meter min="0" max="100" low="10" high="90" optimum="50" value="0">0
Bude v Opeře při hodnotách -5, 0, 5, 10, 15, 45, 55, 85, 95, 100, 105 zobrazovat:
Obrázek 1: výstup tagu meter v prohlížeči Opera. Zdroj: vlastní
32
3.2.2.10. Progress Tag progress, podobně jako tag meter zobrazuje stupnici s hodnotou. Zatímco meter je určen k zobrazení jiţ naměřené hodnoty, progress je určen k zobrazení aktuálně měřené hodnoty, kterou je moţné na stránce měnit v reálném čase (lze samozřejmě měnit i meter) – sémantický rozdíl. Stejně jako u meter je moţné v tagu progress definovat atributy min, max, value. Atributy low, hight a optimum nelze v tagu progress definovat, barva stupnice se při změnách value tedy nemění. 3.2.2.11. Time Do HTML5 byl přidán nový tag time, který řeší veškeré problémy, které trápily webdesignery, ohledně zadávání časových údajů na webových stránkách. Pomocí atributu datetime se definuje, pro počítačové programy čitelný, datum a čas v ISO formátu:
YYYY-MM-DDThh:mm:ss, nebo pouze datum: YYYY-MM-DD či čas: hh:mm, zatímco pro uţivatele je zobrazen časový údaj v jemu pohodlném formátu. Pokud je tag time pouţit v bloku article a má určovat datum a čas publikování článku, je moţné toto počítačovému programu sdělit pomocí boolenovského atributu pubdate (který můţe být v rámci jednoho article pouţit pouze). Následuje příklad stanovení publikování článku: <article> ...
3.2.3. Multimedia Jednou z nejvíce vyčítaných vlastností starších verzí (X)HTML bezpochyby je, ţe neumí, bez rozšíření třetích stran, pracovat s multimédii, kterými zejména jsou audio a video. Tato multimédia je moţné přehrávat buď pouze pomocí lokálního programu na klientské stanici, nebo pomocí webových technologií, jako jsou Adobe Flash a Microsoft Silverlight, jeţ je nutné jako rozšíření nainstalovat do webových prohlíţečů. Pomocí těchto technologií není problém audio či video přehrát, ale ani vytvořit jiný multimediální a interaktivní obsah, jako jsou např. různé animace, práce s obrázky, hry apod. Problém ale stále zůstává ona nutnost instalace rozšíření do prohlíţeče a také uzavřenost formátu či závislost na firmách Adobe, resp. Microsoft. Ve specifikaci verzi HTML5 jsou tyto nedostatky řešeny přímo tak, aby nebylo nutné instalovat ţádná rozšíření třetích stran, ale tyto funkcionality řešily přímo webové prohlíţeče samy. Samozřejmě, jako u kaţdé nové technologie, jsou lidé rozděleni na několik táborů. Jedni hlásají, ţe 33
HTML5 pohřbí zcela technologie třetích stran, jiní připouští, ţe přímo pomoci HTML5 bude moţné zabezpečit jednodušší multimediální funkce, ale technologie třetích stran, jako Flash a Silverlight stále zůstanou pro sloţitější funkce. No a samozřejmě třetí tábor, nejvíce skeptický, tvrdí, ţe pozici Flashe a Silverlightu tyto nové multimediální funkce neohrozí, ţe náskok a rozšíření technologií třetích stran jsou jiţ tak vysoké, ţe je to prakticky nemoţné. Alternativy budou, čas ukáţe, jaká bude budoucnost multimédií na webu. 3.2.3.1. Audio Přehrávat audio bylo jiţ kdysi moţné, v Internet Explorer 3, pomocí tagu z kterého byl nalinkován mid nebo wav soubor a hudba či zvuky z něj byly přehrávány na pozadí stránky – hned po jejím načtení. Toto řešení ale nebylo nikdy zakomponováno do ţádné specifikace (X)HTML, nebylo tedy univerzální a implementovali jej jen někteří výrobci webových prohlíţečů. W3C naštěstí v tomto ohledu vyslyšelo přání uţivatelů webových stránek, které zvuk přehrávaný na pozadí, který se pustí automaticky po načtení stránky, rušil a otravoval. Není příjemné sedět zamyšlený u počítače, kliknout na nějaký odkaz a z reproduktorů, nebo ze sluchátek se začnou linout, obvykle velice nahlas, nechtěné zvuky. Taková stránka je obvykle, většinou návštěvníků, okamţitě uzavřena. Jak čas postoupil a rozšiřovala se internetová rádia či prezentace hudebních skupin, které si přály svůj um prezentovat na svých stránkách, bylo nutné přehrávání vyřešit i bez podpory ve specifikaci (X)HTML. Prakticky standardem se staly flashové přehrávače, které ke svému chodu vyţadují mít v prohlíţeči nainstalované rozšíření. HTML5 naštěstí definuje i audio API, které je plně v reţii prohlíţečů – nejsou nutná ţádná rozšíření třetích stran, nebo cokoli, co by mohlo bránit pohodlnému přehrávání zvuků na webových stránkách. Zvuky do stránek lze v HTML5 vloţit snadno:
Samozřejmě i tag audio se dá zneuţít k otravnému přehrávání zvuků automaticky po načtení stránky, tomu se zabránit asi nedá, kaţdý nástroj je potřeba pouţívat s rozumem. Přehrávání automaticky na pozadí lze docílit přidáním atributu autoplay s moţností přidat ještě dalšího atributu loop pro opakování zvuků. Tyto atributy jsou booleanovské, nemají tedy ţádní hodnoty, buď jsou a zvuky se spustí a opakují, nebo nejsou a nic se nestane.
34
Výše uvedený příklad, na rozdíl od prvního, který neudělá vůbec nic slyšitelného, zajistí, ţe se zvuky začnou přehrávat rovnou po načtení stránky a stále se opakují. Zvuky nelze umlčet jinak, neţ vypnutím webové stránky. Mezi tagy se dá přidat alternativní text, který je zobrazen v prohlíţeči nepodporujícím tag audio, viz následující příklad. Výše uvedené příklady jsou naprostými základy, tag audio nebude tímto způsobem pravděpodobně nikdy vyuţíván. Jeho pravé vyuţití je u interaktivního přehrávání zvuku. Je tedy potřeba návštěvníkovi stránek poskytnout moţnost zvuk ovládat – tedy zapnout, vypnout, ztlumit apod. Tohoto lze docílit buď bezpracně, vestavěným přehrávačem v prohlíţeči, jehoţ ovládací prvky se vyvolají atributem controls:
Výsledek výše uvedeného příkladu bude vypadat v Internet Explorer 8 jako na obrázku vlevo, v Google Chrome 10.0.Xx jako na obrázku vpravo.
Obrázek 2:zobrazení tagu audio v IE8 a Chrome 10+. Zdroj: vlastní
O toto zobrazení přehrávače a všechny funkce se stará prohlíţeč sám, jeho vzhled ani funkce nelze nikterak ovlivnit. Při přípravě specifikace HTML5 bylo ale připraveno téţ ovládání Audio API pomocí JavaScriptu. Přehrávač je nutné jednoznačně pojmenovat poté jej lze pomocí metod play, pause nebo vlastnosti volume ovládat. Následuje velice jednoduchý příklad ovládání pomocí tlačítek.
Hlasitost:
Výše uvedený příklad bude v Google Chrome 10.0.Xx zobrazen následujícími jednoduchými tlačítky s popisem co které dělá.
Obrázek 3: vlastní ovládání audia pomocí JS – Chrome. Zdroj: vlastní
Dalším moţným atributem je autobuffer, který prohlíţeči sdělí, ţe má zvukový soubor stáhnout do vyrovnávací paměti, aby později přehrávání mohlo začít ihned po kliknutí uţivatelem na tlačítko přehrát. Některé prohlíţeče ale načítají do vyrovnávací paměti zvukový soubor rovnou, bez ohledu na přítomnost atributu autobuffer. Proto byl později tento atribut nahrazen atributem preload, který očekává jednu ze tří moţných hodnot: none (nestahovat do vyrovnávací paměti), auto (prohlíţeč si řídí sám – většinou začne stahovat do vyrovnávací paměti po kompletním staţení a zpracování webové stránky), metadata (stáhnout pouze metadata jako rozměry, první snímek, délka aj.). Problém s Audio API nastává volbou audio formátu. Nejrozšířenější MP3 formát je patentován, proto jeho přehrávání není implementováno ve všech prohlíţečích, zejména open-source. Pouţít svobodný OGG formát by mohlo být řešením, ale některé prohlíţeče přehrávání OGG nepodporují. HTML5 tento problém řeší tak, ţe tagu audio je moţné definovat více zdrojů pomocí vnořeného tagu source. Kaţdý z prohlíţečů si vybere podporovaný formát (pro moderní prohlíţeče stačí jeden z dvojice MP3 nebo OGG) a o další zdroje se nestará. Protoţe si prohlíţeče dalšího vnořeného obsahu tagu audio nevšímají, je moţné, pokud má návštěvník stránek prohlíţeč nepodporující HTML5 definovat i akci pro něj – buď zobrazit zprávu o nutnosti pouţití modernějšího prohlíţeče, nebo načíst flashový přehrávač, pokud má ve svém prohlíţeči nainstalované příslušné rozšíření. Pokud ani to nemá, je moţné mu zobrazit jako poslední moţnost odkaz na soubor. Komplexně řešený přehrávač v HTML5, aby byl připraven na všechny případy, je nutné vytvořit tímto způsobem:
3.2.3.2. Video Stejně jako přehrávat audio bez nutnosti instalování rozšíření třetích stran jakými jsou Adobe Flash nebo Microsoft Silverlinght, volali uţivatelé webových stránek o přehrávání videa. V připravované specifikaci HTML5 byli uţivatelé vyslyšeni a bylo zapracováno Video API, které dokáţe pracovat s různými video formáty přímo v prohlíţeči. Video se uzavírá do tagů prakticky stejně jako tomu bylo v případě audia. Je tedy moţné, stejně jako v audiu, přidat atributy autoplay, loop, preload či controls. Základní pouţití v prohlíţeči je:
Tento jednoduchý příklad v prohlíţeči, který podporuje tag video, přehraje video bez jakékoliv nadstavby – čistě jen obraz. Po přidání atributu controls zobrazí ovládací lištu pro video – prakticky stejnou té pro audio. Pokud je potřeba vytvořit si vlastní ovládací prvky, lze toho docílit pomocí JavaScriptu, úplně stejně jako v případě audia:
Hlasitost:
Oproti audiu jsou v případě videa přeci jen tři atributy navíc. Protoţe video má viditelný výstup, můţe nastat situace, kdy nechceme pouţít rozměry načítaného videa, ale 37
nastavit vlastní rozměry. Do tagu video lze tedy přidat atributy width a height s moţností nadefinovat velikost videa v pixelech. Video oblast lze takto zmenšit, ale i zvětšit – čím samozřejmě kvalita utrpí. Třetím atributem je atribut poster, pomocí kterého lze definovat obrázek, který se zobrazí před samotným spuštěním videa. Hodnotou tohoto atributu je cesta k samotnému obrázku. Všechny tři atributy lze pouţít takto:
Výše uvedený příklad zobrazí obrázek a ovládací prvky, pomocí kterých lze video spustit. Další nespornou výhodou integrace videa přímo do prohlíţeče je krom ovládání videa přes JavaScript také moţnost jeho stylování přes CSS. Video není problém v kombinaci s CSS3 otáčet, zmenšovat, zvětšovat, posunout nebo oříznout20. Co se pouţitelnosti jednotlivých video formátů a podpory samotných prohlíţečů týká, je u videa naprosto stejná situace, jako tomu bylo u audia. Proto i zde lze definovat vnořeným tagem <source> více zdrojů videí, aby si kaţdý z prohlíţečů mohl vybrat to podporované, a také lze definovat alternativní obsah pro prohlíţeče, které HTML5 tag video vůbec nepodporují. Tedy buď flashový přehrávač, moţnost staţení videa, nebo jen
oznámení, ţe je nutné pouţít modernější webový prohlíţeč pro přehrání videa. 3.2.3.3. Dynamické obrázky Bezesporu jedním z nejočekávanějších rozšíření HTML5 je canvas (plátno). Pomocí tagu canvas a hlavně pomocí API, definované ve specifikaci HTML5, která s ním spolupracuje, lze programově kreslit JavaScriptem na straně klienta. Canvas je v současné době implementován ve dvourozměrné (2D) verzi, s tím, ţe třírozměrná (3D) se připravuje. Pomocí canvas lze vykreslit prakticky stejné výtvory, které lze vytvořit ve vektorovém editoru, vše se definuje pomocí tahů, křivek, tvarů, barevných výplní a přechodů, ale lze pomocí něj pracovat i s rastrovým obrázkem či vytvářet animace. Je ovšem potřeba si uvědomit, ţe veškeré vykreslování probíhá na straně klienta – tedy v prohlíţeči návštěvníka stránek, canvas nemá, tedy jiţ z tohoto důvodu, ambice nahradit veškeré obrázky na stránce. Je to jen další z nástrojů, který na webových stránkách lze pouţit. Canvas se určitě nepouţije tam, kde se zobrazují statické obrázky jakémukoli návštěvníkovi, stejně tak je na zváţenou, jestli pouţít canvas při generování statických 20
http://isithackday.com/hacks/videozoomandrotate/
38
obrázků, nebo tyto obrázky vygenerovat pomocí jiných technologií na straně serveru a klientu odeslat jiţ vytvořený statický obrázek. Důvody jsou zřejmé, vykreslovat veškerou grafiku pomocí JavaScriptu můţe být velice sloţité, zdlouhavé a hlavně v některých ohledech plýtváním procesorového času a paměti klientského počítače. Canvas se ale jednoznačně hodí tam, kde je potřeba reagovat na události uţivatele, kdy je potřeba mu v tu chvíli plátno překreslit. Pomocí canvas se dají připravovat hry či nejrůznější nástroje, které do dnešní doby bylo moţné připravit pouze pomocí technologií třetích stran (Hassman, 2009; Keith, 2010; Klučka, 2010). Jistým nedostatkem canvas, stejně jako technologií Flash či Silverlight je jejich nečitelnost cizími stroji, jakými např. jsou čtečky obrazovky, roboti a jiné podpůrné technologie. Kaţdý webový dokument má DOM (Documet Object Model), coţ je jakýsi strom, sloţený z jednotlivých uzlů, které reprezentují tagy, atributy a text v dokumentu, který lze právě pomocí cizích strojů procházet a pracovat s ním – ať uţ jej načítat, pozměňovat, vyhledávat v něm, indexovat potřebné části, nebo jej interpretovat jiným způsobem, neţ je vykreslení na obrazovku. Canvas DOM v současné době (ale na řešení se pracuje21) nemá, jeho přístupnost je tím tedy stejně omezená, jako přístupnost tolik, za toto, kritizovaných technologií třetích stran. Pokud ale webový vývojáři budou pouţívat canvas stejně rozumně, jako by se i Flash či Silverlight pouţívat měly, neměl by tento
handicap být stěţejní. Tedy pouţívat tyto technologie pouze jako nadstandardní rozšíření webových stránek, které jim přidá atraktivnost či dynamiku, ale které návštěvníka nikterak neomezují či jej neochudí o důleţité informace, funkce nebo snad dokonce navigaci na stránkách, pokud nebudou moci být z jakéhokoli důvodu načteny a na klientské straně provedeny. Pouţití canvas v HTML5 dokumentu je snadné, stačí pouze definovat plátno, nastavit mu šířku a výšku, jednoznačně jej pro JavaScript pojmenovat a pak je moţné s ním pracovat. Definování šířky a výšky je nutné provádět přímo jako atributy tagu v dokumentu, čímţ je definován počet pixelů plátna. Pokud jsou tyto hodnoty měněny pomocí CSS, není změněn počet pixelů, ale plátno je pouze deformováno. Pouţití tagu:
21
http://www.w3.org/WAI/PF/html-task-force
39
Cokoli je uvařeno mezi tagy je zobrazeno návštěvníkovi, jehoţ webový prohlíţeč tento tag nepodporuje. Bývá tedy vhodné takovému návštěvníkovi oznámit, ţe zde o něco přišel, ať např. pouţije jiný prohlíţeč. Rozšířený předchozí příklad:
Další práce s plátnem je obhospodařována pomocí JavaScriptu. Pokud bychom chtěli na plátně vykreslit vedle sebe tři obdélníky, jeden červený, druhý černý a mezi nimi průhledný s modrým orámováním o šířce čáry 3, uděláme to následovně: <script> var platno = document.getElementById('mePlatno'), context = platno.getContext('2d'); context.fillStyle = 'red'; context.fillRect(0, 0, 50, 100); context.strokeStyle = 'blue'; context.lineWidth = 3; context.strokeRect(60, 0, 50, 100); context.fillStyle = 'black'; context.fillRect(120, 0, 50, 100);
Výsledek bude vypadat přesně dle výše uvedeného zadání:
Obrázek 4: kreslení pomocí JS na canvas – Safari. Zdroj: vlastní
Canvas není zcela novým revolučním nápadem, jedná se opět, jako je tomu v mnoha jiných případech o začlenění existující technologie, do HTML5 specifikace. Za technologií canvas stojí společnost Apple, která ji jako první implementovala ve svém webovém prohlíţeči Safari.
3.2.4. Web Forms 2.0 Protoţe jednou z největších potřeb dnešní doby je vytvářet webové aplikace, které by se funkcemi mohly podobat nebo aspoň přibliţovat těm desktopovým, vývojová skupina WHATWG pracuje na tzv. Web Forms 2.0, jeţ jsou součástí HTML5. Formuláře jsou základním stavebním kamenem prakticky kaţdé aplikace, v kaţdé aplikaci je nutné 40
nějakým způsobem zadávat či aktualizovat data. Ve specifikacích značkovacích jazyků, které HTML5 předcházely, byly moţnosti formulářů poměrně omezené. Na většinu vstupů zadávaných uţivatelem je nutno pouţít – kam je moţné vepsat jakýkoliv údaj, ať uţ se jedné o jméno, telefonní číslo, adresu, email, nebo počet kusů apod. Ze vstupního pole tak není moţné poznat, jaký typ vstupu by měl být zadán, pole je nutné rozlišovat identifikátory a zadané vstupy ověřovat, na straně klienta, JavaScriptem. 3.2.4.1. Search V HTML5 nově přibyl typ vstupního pole search. Jak je jiţ podle názvu zřejmé, toto vstupné pole by mělo být pouţíváno pro vstup hledaného řetězce. Pouţité je snadné: Zadejte řetězec:
Rozdíl mezi typem text a search je pouze v tom, ţe vstupnímu poli je tímto udělen jednoznačný význam. Webový prohlíţeč nyní ví, ţe se nejedná o prostý text a pole můţe zobrazit jiným způsobem. Google Chrome a Apple Safari např. zobrazí, po zadání řetězce do tohoto pole, kříţek, pomocí kterého je moţné pole rychle vyprázdnit, viz níţe. Další uţitečnou moţností, u vstupního pole typu search, je atribut results, který jako hodnotu očekává číslo. Díky tomuto atributu se v Google Chrome a Apple Safari zobrazí před zadaným řetězcem ikonka lupy se šipkou dolu, na kterou kdyţ se klikne, tak zobrazí historii zadávaných hledaných výrazů. Výrazů zobrazí maximálně právě tolik, jakou hodnotu má atribut results, viz screenshot z Apple Safari níţe.
Obrázek 5:nové vyhledávací pole (input type=search) v Safari. Zdroj: vlastní
Výše zobrazený screenshot je výsledkem následujícího kódu. Zadejte řetězec:
3.2.4.2. Email, URL, tel Dalšími speciálními typy, které dávají význam zadávaným datům do vstupního pole jsou email, url a tel. Pole se ve většině dnešních prohlíţečů zobrazí jako jakékoli jiné 41
pole s typem text, ovšem poli je tímto udělen jednoznačný význam, díky kterému je zřejmé která vstupní data jsou očekávání. Ve webovém prohlíţeči s OS Android nebo iOS se mění typ klávesnice v závislosti na typu vstupního pole. U pole typu tel se např. zobrazí rovnou softwarová klávesnice s čísly na zadání telefonního čísla apod. 3.2.4.3. Number Vstupní pole typu number zobrazí ve webových prohlíţečích, které je podporují, v pravé straně pole takové malé šipečky na zvýšení či sníţení hodnoty aktuálně zadaného čísla. Klikáním na šipky klávesnice lze dosáhnout stejného efektu, jako klikáním myší na tyto šipečky ve vstupním poli. Pokud je zadán následující kód: Vložte číslo:
v Google Chrome bude zobrazení tohoto pole vypadat následovně:
Obrázek 6: pole pro zadání čísla (input type=number) v Chrome. Zdroj: vlastní
Pokud uţivatel v této chvíli klikne na šipku nahoru, v poli se objeví číslo 1, pokud třikrát klikne na šipku dolu, objeví se číslo -2. Ve výchozím nastavené je krok zvýšení či sníţení čísla jedna. Pomocí atributu step lze ale nastavit libovolný krok, pokud do výše uvedeného příkladu připíšeme step=“5“, po kliknutí na šipku nahoru se zobrazí 5 a pokud je následovně třikrát kliknuto na šipku dolu, zobrazí se -10. Při práci s tímto typem pole brzy můţe nastat poţadavek omezit maximální a minimální číslo, které je moţné do něj vloţit. I toto HTML5 řeší, stačí přidat atribut min s příslušnou číselnou hodnotou pro minimální číslo a atribut max s příslušnou hodnotou pro maximální číslo. Ve výše uvedeném příkladu, pokud necháme step=“5“ a připíšeme min=“0“ max=“100“, po kliknutí na šipku nahoru se objeví hodnota 5, po trojím kliknutí
na šipku dolu bude zobrazena ale stále hodnota 0. 3.2.4.4. Range Dalším novým typem pro vstupní pole je range. V prohlíţečích, které tento typ podporují, se nezobrazí vůbec vstupní pole s moţností zapsat text, ale zobrazí se efektivní
42
posuvník, pomocí kterého je moţné nastavit číselnou hodnotu taţením myši. Při zadání níţe uvedeného kódu: Množství:
Bude v Google Chrome zobrazen posuvník, viz screenshot níţe.
Obrázek 7: výběr hodnoty posuvníkem (input type=range) v Chrome. Zdroj: vlastní
Stejně jako v případě pole typu number lze i u typu range nastavit minimální a maximální hodnoty pomocí atributů min a max. Pokud nebudou tyto atributy definovány, ve výchozím stavu je rozsah posuvníku 0 aţ 100. Drobnou nevýhodou typu range, alespoň v současné implementaci Apple Safari i Google Chrome, je ţe uţivatel nevidí, kdyţ táhne posuvníkem, jakou hodnotu nastavuje. S jednoduchým pouţitím JavaScriptu můţe být tato drobná nevýhoda odstraněna, viz následující kód, který při změnách hodnoty (taţení posuvníkem) detekuje a zobrazí jaká je její aktuální výše. Množství: <span id='kolik'>3
3.2.4.5. Datum, čas a barva Často je nutné, aby uţivatel při vyplňování formuláře vloţil datum. Je několik moţností jak toho v současné době docílit. Nejjednodušším způsobem je prosté vloţení data v poţadovaném formátu do – problémy jsou zřejmé, uţivatel ne vţdy dodrţí formát. Další moţností je nechat vybrat datum pomocí tří selectboxů – poměrně otravné. Poslední, nejpohodlnější, metodou je přes JavaScript zobrazit malý kalendář, z kterého uţivatel datum vybere. Právě poslední metodu nejvíce oceňuje také vývojová skupina a začlenila ji do připravované specifikace HTML5. Nově lze vstupnímu poli definovat typ date, datetime, datetime-local, time, nebo month. Všechny tyto typy jsou určeny k zadání data, nebo času v poţadovaném formátu, jeţ název typu napovídá. Implementace tohoto typu vstupního pole není, prozatím, ve webových prohlíţečích dopracována. Google Chrome s datem pracuje podobně jako s typem number, také zobrazí v pravé části pole malé šipečky nahoru a dolu, pomocí nichţ lze datum
43
nastavit, dokonce se dají nastavit i atributy step, min a max. Nejdále je pravděpodobně Opera, která typ date zobrazí jako malý kalendář, tak jak to je zamýšleno, viz níţe.
Obrázek 8: pole typu date (input type=date) v Opera. Zdroj: vlastní
Posledním novým, ovšem prakticky neimplementovaným typem je color. Jak jiţ název napovídá, výstupem tohoto pole by měla barva, definovaná v hexadecimálním tvaru – tedy např. #000000 pro černou barvu. Webové prohlíţeče, aţ tento typ implementují, by měly zobrazit nástroj pro přímý výběr barev z palety, jeţ po výběru barvy jí sám převede na hexadecimální tvar. Opera typ color jiţ implementovala, viz screenshot níţe.
Obrázek 9: pole typu color (input type=color) v Opera. Zdroj: vlastní
3.2.4.6. Datalist Datalist je zcela nový tag, který je reakcí na uţivatelsky nepřívětivé zadání jiné
hodnoty, jeţ není v nabídce selectboxu. Je-li potřeba, aby uţivatele ve formuláři vybral zdroj, odkud se o nabízeném produktu dozvěděl, je nejsnazší zobrazit mu několik moţností pomocí selextboxu z nichţ jednu vybere. Občas se ale stane, ţe uţivatel se o produktu dozvěděl jiným způsobem, neţ je v nabídce. V tu chvíli uţivatel v selectboxu musí vybrat např. „z jiného zdroje“ a musí být pro něj připraveno pole, kam uţivatel svůj zdroj můţe vepsat. Tag datalist tento případ řeší v rámci jednoho vstupního pole. Vstupnímu
44
poli se nadefinuje seznam poloţek, které jsou na výběr, pokud si ale uţivatel nevybere, jednoduše do pole zapíše svou hodnotu. Výše uvedený případ by mohl vypadat např. takto: Odkud jste se o produktu dozvěděli?
a stránky ve webovém prohlíţeči Opera vypadá jako na následujícím obrázku.
Obrázek 10: pole doplněné o výpis možností z datalist v Opera. Zdroj: vlastní
3.2.4.7. Atribut required Kaţdý formulář obsahuje povinná a nepovinná vstupní pole. Povinná je nutné označit a zvýraznit nejen uţivateli, ale také překontrolovat, jestli byla, před odesláním a zpracováním formuláře, uţivatelem správně vyplněna. Tuto kontrolu na straně klienta, před HTML5, zajišťoval výhradně JavaScipt, který bylo nutné naprogramovat přímo ve stránkách. HTML5 tuto kontrolu přesunulo přímo do značkovacího jazyka, kde ji provede samotný webový prohlíţeč bez nutnosti jakéhokoliv programování. Pomocí atributu required je moţné označit vstupní pole, jehoţ vyplní je poţadováno. Pokud je pole takto
definováno, prohlíţeč poté sám, v závislosti na zvoleném typu vstupního pole toto pole kontroluje a mění poli pseudotřídy pro CSS. Poli, které není vyplněno, nebo není vyplněno ve správném formátu přidává pseudotřídu :invalid a naopak správně vyplněnému poli přidává třídu :valid. Pomocí CSS a těchto pseudotříd je snadné uţivateli zobrazit, jestli je nebo není pole správně vyplněno, viz příklad validace emailu: <style> [required] { border: 1px solid red; } :invalid { background-color: red; } :valid { border: 1px solid green; } Vložte email:
45
Tento příklad zobrazuje pole emailu červeně orámované, aby si uţivatel všiml, ţe je nutné jej vyplnit. Neţ uţivatel v poli vyplní email ve správném formátu má pozadí pole červenou barvu. Po vepsání emailu ve správním formátu se pole změní na zeleně orámované, čímţ je uţivateli signalizováno, ţe je vše v pořádku. Validace formuláře, díky atributu required byla webdesignerům maximálně zjednodušena a zpříjemněna. 3.2.4.8. Atribut placeholder Někdy je ve vstupním poli nutné, neţ uţivatel do něj zadá nějaký vstup, zobrazit nápovědu, pomocí světlejšího písma, co je v poli očekáváno. Například, pokud je na stránkách formulář na přihlášení uţivatele do privátní sekce stránek, je potřeba uţivateli sdělit ţe do prvního pole má vloţit uţivatelské jméno a do druhého heslo. Nápověda v poli zmizí po kliknutí do příslušného pole, a pokud uţivatel vyplní hodnotu. Pokud uţivatel pole upustí a hodnotu nevyplní, je nápověda zobrazena opět. V HTML5 je této nápovědy moţné jednoduše dosáhnout pomocí atributu placeholder, viz zdrojový kód k výše popsanému přikladu za nímţ je hned zobrazen obrázek, jak tato nápověda vypadá v Opeře.
Obrázek 11: zobrazení atributu placeholder v Opera. Zdroj: vlastní
3.2.4.9. Atribut autofocus Někdy je ve formuláři nutné nastavit, jednomu ze vstupních polí, aby v něm hned po načtení webové stránky blikal kurzor a bylo rovnou moţné vepsat hodnotu. Obvykle je toto pouţito při přihlašování, aby uţivatel nemusel kliknout do pole a poté aţ vepsat své uţivatelské jméno. Pomocí atributu autofocus v HTML5 je moţné jednomu z polí určit, ţe kurzor bude v něm. Viz následující příklad, který v přihlašovacím formuláři toto zajistí.
Pouţité atributu autofocus na stránkách je nutné dobře rozmyslet. V jednom případě pouţití to můţe být nenahraditelný pomocník, bez nějţ by přihlášení bylo mnohem méně uţivatelsky přívětivé, v případě druhém to můţe být uţivateli proklínaná funkce v prvním poli formuláře, kde není zcela jednoznačné, jestli uţivatel má v plánu formulář vyplnit. 46
3.2.4.10. Atribut autocomplete Webový prohlíţeč, aby uţivateli zpříjemnil vyplňování formulářů, si obvykle pamatuje vyplňovaná data a ty pak při vyplňování formuláře, kde je vstupní pole stejného názvu doporučuje. Obvykle uţivatel tuto funkci uvítá, protoţe nemusí vypisovat celé pole znova, ale jen potvrdí nebo vybere jednu z doporučovaných hodnot. Jsou ovšem situace, kdy je vice neţ vhodné zamezit tomu, aby byly hodnoty doporučovány. Jedná se především o bezpečnost, v případě přístupu do internetového bankovnictví apod. V HTML5 lze tohoto dosáhnout snadno přidáním atributu autocomplete s hodnotou off. Hodnota on je jako výchozí strav tohoto atributu i při jeho neuvedení ve vstupním poli. 3.2.4.11. Atribut pattern Pokud by ţádný z předdefinovaných typů nesplňoval poţadavky webmastera, je moţné, aby si v HTML5 nadefinovat zcela vlastní vzor vstupu, který po uţivatelích poţaduje. Definovat vzor je nutné pomocí regulárních výrazů jako hodnotu atributu pattern. Pokud je pouţit i atribut require, webový prohlíţeč poté načte definovaný vzor
a pomocí něj validuje uţivatelem zadaná data do vstupního pole. Pokud je např. nutné do formuláře zadat PSČ v jeho obecném formátu tedy XXX XX, lze to snadno udělat pomocí následujícího zápisu: Vložte PSČ:
Pokud je zadán tento vzor v kombinaci s atributem required, webový prohlíţeč kontroluje zadaná data ve vstupním formuláři a pomocí CSS a vytvářených pseudotříd je moţné označit nevalidní data červeným polem a validní jeho zeleným orámováním, viz několik následujících screenshotů, kde je vidět která data je a která data není moţné zadat:
47
Obrázek 12: vlastní formát (pattern) pro vstupní pole v Safari. Zdroj: vlastní
3.2.5. Stránky přístupné bez internetu (AppCache) Zcela novým nástrojem v HTML5 je Application cache (AppCache)22, která umoţnuje pracovat se stránkami, pokud to webový prohlíţeč podporuje, i kdyţ není v tu chvíli k dispozici ţádné internetové připojení. Toto mohou vyţít cestovatelé, kteří se se svým zařízením dostanou mimo signál Wi-Fi či mobilní sítě, pokud je na to konkrétní webová stránka připravena. Ve webové stránce je nutné, pomocí tzv. manifest souboru, definovat které soubory, jeţ obsahují webové stránky, budou uchovány v lokální AppCache a které mají naopak být stahovány z internetu. AppCache se od běţné cache prohlíţeče, kterou nelze nikterak pomocí webových stránek ovlivnit, liší (Malý, 2010; Keith, 2010). Soubor manifest je umístěn na serveru, jedná se o běţný textový soubor, kterému ale musí být určen správný MIMETYPE. Pokud tedy soubor bude mít vţdy příponu .manifest, stačí do .htaccess přidat následující řádek: AddType text/cache-manifest .manifest
Kaţdý manifest musí začínat spojením CACHE MANIFEST a poté můţe obsahovat tři sekce. První sekce s názvem CACHE určuje soubory, které mají být cachovány. Soubory musí být zapsané s relativní cestou vůči manifest souboru. Pokud jsou jiţ soubory uloţeny v AppCache a manifest soubor se nezměnil, bere webový prohlíţeč soubory právě z AppCache, i kdyţ je uţivatel online – v sekci CACHE by tedy neměly být uvedeny soubory, které generují svůj obsah na serveru nebo se často mění. Druhou sekcí, s názvem NETWORK, lze definovat soubory, které se mají vţdy stahovat z internetu a nikdy nebýt
ukládány a načítány z AppCache. Soubory není nutné vypisovat do posledního, je moţné 22
http://dev.w3.org/html5/spec/offline.html
48
pouţít hvězdičku, která deklaruje, ţe načítány mají být všechny soubory, které nejsou deklarovány v sekci CACHE. Pokud uţivatel není online soubory uvedené v sekci NETWORK nebudou zobrazeny. Třetí sekce se nazývá FALLBACK, je moţné v ní definovat soubory, které se mají nahrazovat při offline reţimu, nebo pokud se původní soubor nepodaří z internetu stáhnout. Definice souboru se provádí tak, ţe na řádku je původní soubor, mezera a záloţní soubor. Viz následující příklad souboru appcache.manifest. CACHE MANIFEST CACHE: styl1.css index.html NETWORK: styl2.css FALLBACK: styl2.css styl3.css
Soubor index.html obsahuje následující zdrojový kód: <meta charset="utf-8"> AppCache
AppCache
styl tohoto divu není cachován - po odpojení internetu a obnovení stránky se styl divu změní.
Pokud je uţivatel online, tak se v pořádku načtou do AppCache soubory index.html, styl1.css, styl2.css a také styl3.css, s tím, ţe styl3.css se nepouţije (nezobrazí uţivateli), protoţe je dostupný styl2.css. Pokud pak uţivatel přejde do offline a obnoví webovou stránku, zůstane mu načtený soubor index.html se styl1.css a díky definování FALLBACK se místo styl2.css pouţije na jeho místo styl3.css – změní se tedy styl stránek podle stylových předpisů v styl3.css. Pokud by sekce FALLBACK v appcache.manifest chyběla, prohlíţeč by o ţádném styl3.css nevěděl, chtěl by načíst a zobrazit styl2.css, protoţe to má uvedeno v sekci NETWORK, ale ten v offline nenačte, takţe by se soubor vůbec nemohl zobrazit. Byly by zobrazeny pouze soubory index.html a styl1.css. Krom manifest souboru lze s AppCache pracovat také pomocí JavaScriptu přímo z HTML stránky. Pomocí window.applicationCache lze zjistit, jestli webový prohlíţeč 49
AppCache vůbec podporuje, pomocí window.applicationCache.status lze vyčíst aktuální stav AppCache, či zachytit události, které AppCache vyvolává např. při stahování souborů do cache, při dokončení stahován jednoho nebo všech souborů, při nenalezení manifest souboru aj. AppCache má např. funkci window.applicationCache.update(), kterou lze vyvolat zahájení stahování souborů do cache bez znovunačtení webové stránky, např. po nějaké době a pak pomocí funkce window.applicationCache.swapCache() je moţné donutit webový prohlíţeč, aby přepnul na nově staţenou cache.
3.2.6. Lokální úložiště (WebStorage) V HTML5 je nově definováno API pro lokální ukládání dat, ve formátu klíč – hodnota, do prohlíţeče návštěvníka webových stránek. Tato technologie můţe být pouţita v v kombinaci s AppCache, na vytvoření plnohodnotné offline aplikace, se kterou můţe návštěvník pracovat jako by byl zrovna online. Na rozdíl od Cookies, které nebyly původně pro tento účel navrhnuty, je WebStorage navrhnuto pro účely uloţení většího objemu dat uţivatele a práci s nimi a větší bezpečnost uloţených dat. Např. je moţné vytvořit a v lese provozovat na mobilním telefonu či tabletu, i v reţimu offline, aplikaci do které se zapisují nalezené houby a místo jejich nalezení. S novými HTML5 funkcemi, můţe tato aplikace fungovat velice pohodlně v offline reţimu, kde se pomocí Geolokace vloţí aktuální pozice a uţivatel vepíše pouze potřebné údaje. S údaji uţivatel po celou dobu pouţívání aplikace můţe pracovat, můţe je načítat, upravovat, mazat apod. Po přechodu do reţimu online aplikace pozná, ţe se nejedná jiţ o offline reţim a můţe odeslat nasbíraná data na server a zároveň ze serveru stáhnout do lokálního úloţiště další potřebná data (Malý, 2010; Keith, 2010). Data jsou vázána buď na doménu (localStorage) nebo na otevřené okno prohlíţeče (sessionStorage). V prvním případě jsou data v prohlíţeči uloţena pořád aţ do doby, kdy jsou skriptem odstraněna, v druhém případě jsou data uloţena v prohlíţeči jen, dokud není zavřeno okno webového prohlíţeče. Data se do localStorage vloţí: localStorage.setItem("klic", "hodnota"); a pro jejich vyvolání z úloţiště se pouţije var hodnota = localStorage.getItem("klic");.
50
3.2.7. Geolokace Součástí API spadajících do HTML5 je i Geolocation API23, pomocí které je moţné přes prohlíţeč identifikovat místo návštěvníka webových stránek s přesností aţ na 150 metrů. Geolokace je vyhodnocována na základě údajů, které má prohlíţeč v daném čase na daném zařízení k dispozici (Phpguru.org, 2010; Hassman, 2010; Keith, 2010). Prvním z údajů, který je k dispozici pokaţdé, je veřejná IP adresa návštěvníka. Daná IP adresa je porovnána s databází IP adres a poloha je přibliţně odhadnuta. Toto je samozřejmě nejméně přesné určení polohy návštěvníka, rozptyl můţe být desítky aţ stovky kilometrů od jeho opravdové fyzické polohy. Důvodů můţe být zřetězených sítí poskytovatele internetu, proxy server, VPN či jiná brána, přes kterou můţe návštěvník na internet přistupovat aj. Se znalostí pouze IP adresy je většinou určena spolehlivě aspoň země návštěvníka stránek, občas i město, ve kterém se nachází. Pokud má návštěvník webových stránek Wi-Fi a má ji zapnutou, je mnohem přesnější provést lokalizaci právě pomocí Wi-Fi, neţ výše zmíněná metoda s veřejnou IP adresou. Poloha pomocí Wi-Fi je určována tak, ţe návštěvníkův prohlíţeč načte přes Wi-Fi všechny okolní přístupové body, jejích názvy, MAC adresy a sílu signálu k jednotlivým bodům a tyto informace webový prohlíţeč porovná s celosvětovou databází Wi-Fi přípojných bodů, např. tou, kterou provozuje Google – je jednou z největších a nejpřesnějších. K určení polohy pomocí Wi-Fi stačí obvykle jeden přístupový bod v dosahu, který je v dotazované databázi. Čím více bodů, které jsou v dosahu, je nalezeno v databázi, tím je poloha návštěvníka určena přesněji. Další moţností k určení pozice návštěvníka je mobilní síť. Pokud návštěvník přistupuje na webové stránky z počítače či tabletu se zabudovaným 3G modulem, nebo z mobilního telefonu, můţe být jeho poloha, obdobně jako u Wi-Fi určena podle databáze stanic mobilní sítě – tzv. BTS. Nejpřesnější metodou zjištění pozice návštěvníka je samozřejmě GPS, pokud ji návštěvník ve svém klientském zařízení má a je zapnutá. Zobrazit souřadnice, kde se nachází návštěvník webových stránek, pokud jeho prohlíţeč podporuje geolokace a pokud návštěvník bude souhlasit s lokalizací (je potřeba v prohlíţeči povolit zapnutí této funkce), lze pomocí jednoduchého příkladu: 23
http://dev.w3.org/geo/api/spec-source.html
51
<script> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(pozice); } else { alert(„Váš prohlížeč nepodporuje geolokace.“); } function pozice(pos) { var sirka = pos.coords.latitude; var delka = pos.coords.longitude; document.getElementById('vysledek').innerHTML = "Vaše souřadnice jsou: " + sirka + " x " + delka; } //konec funkce pozice
3.2.8. Kompatibilita a použitelnost stánek na počítačích Pro změření kompatibility a pouţitelnosti nových HTML5 technologií byl vytvořen test, který za pomoci Modernizr24, JavaScriptu a CSS detekuje a zobrazuje, jestli je či není daná HTML5 funkce v testovaném počítačovém prohlíţeči podporována. K testu byly pouţity dnešní běţné prohlíţeče, které by měl mít kaţdý webdesigner, aby mohl testovat připravované webové stránky. Výsledky testování jsou uvedeny v tabulce níţe. Test bude i nadále dostupný na adrese http://dp.krispin.cz/test-technologii/. U tagů, jako je header, footer, nav, aside, section, article, mark nebo time je těţké prokázat, jestli je webový prohlíţeč zná či nikoli, obecně nové tagy ţádnému prohlíţeči, aţ na Internet Explorer 6 nevadí a je ochotný obsah v nich zobrazit, stejně jako je přes CSS stylovat. Ostatní funkce jiţ vykazují nějakou činnost či zobrazení, proto je moţné je otestovat a vyzkoušet, jestli dělají to, co je v připravované specifikaci HTML5 navrhnuto. Testováno bylo na operačních systémech MS Windows (XP a 7) a Linux (Ubuntu 11.04).
24
http://www.modernizr.com/
52
Mozilla Firefox 4.0.1
Mozilla Firefox 5.0
Google Chrome 12.0.742.100
Google Chrome 14.0.797 (dev)
Opera 11.11
Microsoft Internet Explorer 6.0
Microsoft Internet Explorer 7.0
Microsoft Internet Explorer 8.0
Microsoft Internet Explorer 9.0
Safari 5.0.5
Mozilla Firefox 4.0
Chromium 12.0.742.91
Arora 0.10.2
header footer nav aside section article mark meter progress time audio video canvas input type=search input type=email input type=url input type=tel input type=number input type=range input type=date input type=color input required input placeholder input autofocus input autocomplete input pattern AppCache WebStorage Geolokace Datalist
Ubuntu 11.04
Mozilla Firefox 3.6.17
Microsoft Windows
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO NE NE NE NE NE NE NE NE NE NE NE NE NE ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE NE NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE NE NE NE ANO ANO ANO ANO ANO ANO ANO ANO ANO
ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO NE ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO NE ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO
NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE
NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE
NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE NE ANO NE NE
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO NE NE NE NE NE NE NE NE NE NE NE NE NE NE ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO NE NE ANO NE NE ANO ANO ANO ANO ANO NE ANO NE NE ANO ANO ANO NE ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE NE NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO NE ANO ANO ANO ANO NE
ANO ANO ANO ANO ANO ANO ANO NE ANO ANO ANO ANO ANO ANO NE NE ANO NE ANO NE NE ANO ANO ANO NE ANO ANO NE NE NE
Tabulka 1: výsledky měření HTML5 funkcí v prohlížečích na PC. Zdroj: vlastní
Na první pohled je zřejmé, ţe s novými technologiemi HTML5 si nejvíce rozumí prohlíţeč Opera, který mne při psaní diplomové práce velice mile překvapil a začal jsem jej opět intenzivně pouţívat. Chrome/Chromium má tradičně také velice vysokou podporu HTML5 a u Mozilla Firefox je vidět vývoj s kaţdou novou verzí prohlíţeče.
53
3.2.9. Kompatibilita a použitelnost stránek na mobilních zařízeních Webové stránky jsou častěji a častěji navštěvovány i z mobilních zařízení, v dnešní době zejména z tzv. Smartphonů, proto byl test kompatibility a pouţitelnosti nových HTML5 tagů a funkcí proveden také, dle moţností, na těchto Smartphonech, viz tabulka níţe.
Mozilla Firefox 5.0
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO NE NE ANO NE NE NE NE ANO ANO ANO
ANO ANO ANO ANO ANO ANO ANO NE NE ANO NE NE ANO NE NE NE NE NE NE NE NE NE NE NE
ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE NE NE NE ANO ANO ANO
ANO ANO ANO ANO ANO ANO ANO NE NE ANO ANO ANO ANO ANO ANO ANO ANO NE NE NE NE ANO ANO ANO
ANO ANO ANO ANO ANO ANO ANO NE NE ANO NE NE ANO NE NE NE NE NE NE NE NE NE NE NE
NE ANO ANO ANO ANO NE
NE NE NE NE NE NE
ANO ANO ANO ANO ANO ANO
ANO ANO ANO ANO ANO ANO
NE ANO ANO ANO ANO NE
NE NE NE NE NE NE
Browser NG 3
Mobile Safari 5.0.2
Opera Mobile 11.00
Symbian 60
Opera Mini 6
header footer nav aside section article mark meter progress time audio video canvas input type=search input type=email input type=url input type=tel input type=number input type=range input type=date input type=color input required input placeholder input autofocus input autocomplete input pattern AppCache WebStorage Geolokace Datalist
iOS 4.3
Mobile Safari 4.0
Google Android 2.3
Tabulka 2: výsledky měření HTML5 funkcí v prohlížečích na mobilních zařízeních. Zdroj: vlastní
Z pohledu do tabulky naměřených výsledků je zřejmé, ţe dnešní Smartphony si s HTML5 velice dobře rozumí, v některých případech skoro lépe neţ počítače. Výpočetní 54
výkon v dnešních Smartphonech je jiţ dostatečný na to, aby výrobci webových prohlíţečů mohli portovat prohlíţeč se vším všudy i do mobilního zařízení, viz např. Opera Mobile 11.00, nebo Mozilla Firefox 5.0, jeţ mají naprosto stejné funkce, jako jejich počítačové porty. Za operačním systémem Abdroid a iOS trochu ztrácí operační systém od Nokie – Symbián, jehoţ vestavěný webový prohlíţeč si s novými HTML5 technologiemi, aţ na canvas, nerozumí.
3.3. CSS3 Další technologií, která se obvykle řadí téţ do rodiny HTML5 jsou kaskádové styly třetí verze – CSS325. Specifikace, stejně jako v případě samotného HTML5 je stále ve vývoji, rovněţ jako zapracovávání jednotlivých nových vlastností a specifikací do webových prohlíţečů (Webylon.info, 2004; Lie, 2005; Cederholm, 2010; w3.org). CSS při uvedení způsobily skutečnou revoluci, významný milník ve světě webových stránek. Konečně HTML stránky mohly být navrhovány, tak jak bylo původně zamýšleno – jako pouhý nositel informací bez definování rozvrţení stránek, vzhledu, barev a jiných vizuálních prvků o které se jsou definovány právě kaskádovými styly. CSS se postupem času vyvíjelo, odstraňovaly se problémy a kompatibilita webových prohlíţečů, vytvářely se různé postupy (hacky) a tzv. „best practices“, jak docílit toho, aby webová stránka vypadala naprosto stejně, nebo maximálně podobně, ve všech běţných prohlíţečích té doby. CSS je v dnešní době neodmyslitelnou součástí webové stránky, stejně jako HTML a v poslední době oblíbenější a oblíbenější JavaScript, který zajišťuje poţadovanou dynamiku na straně klienta. CSS se průběţně vyvíjí, stále není dokonalé a proto W3C pracuje na nové specifikaci CSS3. Nová verze kaskádových stylů je modulární a bude obsahovat mnoho modulů, po kterých webový designeři stále volají, nebo postupem času volat začnou – do specifikace se přidá nový modul, jehoţ vývoj můţe být naprosto nezávislý na ostatních modulech, stejně jako úpravy a další vývoj jiţ definovaných modulů. Díky modulům, můţe být CSS3 také postupně zapracovávána do jednotlivých webových prohlíţečů, není potřeba čekat na finální specifikaci. Proto je jiţ dnes moţné některé nové vlastnosti CSS3 v moderních webových prohlíţečích více či méně úspěšně pouţívat.
Vlastnosti CSS3 se dělí na kritické a nekritické. Kritické, obvykle jako layout stránek, přístupnost, pouţitelnost apod., které by mohly mít za následek špatné rozloţení stránky, nemoţnost zobrazení některých prvků, nebo nepřístupnost či nefunkčnost navigace se nedoporučují, dokud nebudou tyto vlastnosti ve všech běţně pouţívaných prohlíţečích odladěny. Vlastnosti označené jako nekritické, jimiţ jsou např. zaoblení rohů, stín pod textem, přechody apod. je moţné pouţívat s klidným svědomím jiţ dnes. Ve většině nových prohlíţečů je vlastnost obvykle jiţ implementována, a pokud není, tak uţivatel bude ochuzen, v tomto případě, o oblé rohy, stín pod textem nebo barevný přechod. Stránka však i bez těchto vizuálních prvků bude správně zobrazena, přístupná a dostupná všem tipům klientů – ať se jedná o webové prohlíţeče v počítačích, mobilních telefonech, nebo jiná zařízení, jeţ mohou na webovou stránku přistupovat.
3.3.1. Vybrané vlastnosti CSS3 použitelné v dnešní době 3.3.1.1. Font-face – vlastní fonty Na webových stránkách nebylo před CSS3 moţné, bez pouţití externích knihoven, jako jsou např. Google web fonts26, nebo Cufón27, pouţít jiné neţ systémové fonty – a to ještě bylo potřeba brát ohled, ţe ne všechny fonty jsou ve všech operačních systémech. Nyní nově v CSS3 přibylo vlastnost font-face parametr src, pomocí nějţ je moţné načíst na serveru uloţený font a pak jej na stránkách pouţít. Tato vlastnost, jako některé další, není zcela nová. Je převzata z Internet Exploreru, který ji aplikoval jiţ před mnoha lety, ale ostatní prohlíţeče, protoţe tato vlastnost nebyla ve specifikaci CSS ji neimplementovali. Pouţití je snadné: @font-face { font-family: Anivers; src: url('./font/Anivers_Regular.otf'); }
3.3.1.2. Border-radius – zaoblení rohů Pomocí této vlastnosti je moţná zaoblit vybranému elementu, dle specifikovaného poloměru, rohy. I kdyţ se zdánlivě jedná o drobnost, její implementace bez CSS3 nebývá zcela jednoduchá, obzvláště pokud má element proměnlivou šířku i výšku. Bez pouţití CSS3 nezbývá, neţ zaoblené rohy nakreslit, uloţit jako obrázky a díky pomocným značkám, které zbytečně znezpřehledňují HTML kód, tyto rohy definovat. Poţadavek na
změnu poloměru zaoblení, barvu, nebo orámování si vyţádá změnu obrázku, jeho opětovné přesné rozřezání a uloţení mezi zdrojové obrázky WWW stránky. Minimálně toto vţdy při kaţdé změně. Dnes by mělo stačit následovné: .prvek { border-radius: 15px; }
Kompatibilní webový prohlíţeč, jako např. Internet Explorer 9 pak zobrazí výše uvedený příklad následovně (pro zobrazení efektu byly navíc definovány rozměry a barva):
Obrázek 13: zobrazení zaoblených rohů pomocí CSS3 v IE9. Zdroj: vlastní
3.3.1.3. Columnt-count – více sloupců Velice uţitečnou vlastností, která před CSS3 chyběla mnoha webdesignerům je moţnost vypsat blok textu ve více sloupcích bez manuálního rozdělení. V CSS3 pomocí vlastnosti column-count lze definovat počet sloupců, je moţnost také pomocí columnrule je oddělit linkou a pomocí column-gap definovat rozestupy. Viz příklad 3 sloupců: .prvek { column-count: 3; column-rule: 1px solid black; column-gap: 50px; }
Výsledek pak kompatibilním prohlíţeči, jako je např. Opera vypadá následovně:
Obrázek 14: zobrazeni více sloupců definovaných přes CSS3 v Opera. Zdroj: vlastní
3.3.1.4. Text-shadow – stín za textem Další, v dnešní době pouţitelnou, vlastností CSS3 je text-shadow, díky kterému je moţné přidat stín určené barvy, velikosti a pozice textu. Bez CSS3 toto nebylo, bez pouţití JavaSctiptových knihoven, u textu moţné. Stín lze jednoduše definovat tímto způsobem: 57
.prvek { text-shadow: 1px 1px 2px #cc0000; }
První parametr znamená vzdálenost v horizontálním směru, druhý ve vertikálním, třetí míru rozostření a čtvrtý je barva stínu. V kompatibilním prohlíţeči, jakým je např. Safari, výsledek bude vypadat následovně:
Obrázek 15: Zobrazení stínovaného textu pomocí CSS3 v Safari. Zdroj: vlastní
3.3.1.5. Box-shadow – stín za boxem Obdobně jako textu lze stín definovat stejným způsobem i jakémukoli boxu. Bez pouţití CSS3 se tento efekt sloţitě řeší různými obrázky, které efekt stínu dotvářejí. Při sloţitějších objektech, např. se zaoblenými rohy je nastavení stínu bez CSS3 sloţité. .prvek { box-shadow: 5px 5px 3px #666; }
Pořadí a význam parametrů je shodný s text-shadow. Výše uvedený přiklad v kompatibilním webovém prohlíţeči, jako je např. Internet Explorer 9 bude vypadat následovně. Druhý obrázek zobrazuje stín v kombinaci se zaoblenými rohy.
Obrázek 16: Zobrazení stínu za boxem pomocí CSS3 v IE9. Zdroj: vlastní
3.3.1.6. Vícenásobné obrázky na pozadí Pomocí vlastnosti background lze objektu, nebo celému pozadí stránky definovat nově více neţ jeden obrázek na pozadí. Velice uţitečné rozšíření, které se bez CSS3 velice sloţitě řešilo překrýváním divů přes sebe a v některých případech nebylo ani moţné pouţit. Nyní snadno pomocí parametrů url oddělených čárkami definujeme více obrázků na pozadí celé webové stránky a kaţdému z nich lze nastavit, jestli a jakým směrem se bude opakovat a nastavení pozice prvního výskytu obrázku, viz níţe: body { background: URL('obr1.jpg') no-repeat top left, URL('obr2.jpg') repeat-x top left, URL('obr3.jpg') repeat-x center center;
58
}
3.3.1.7. Opacity - průhlednost V CSS3 lze nově nastavovat objektům téţ průhlednosti, coţ bez pouţití CSS3 bylo moţné pouze s JavaScritovými knihovnami, nebo s vhodně navrhnutým PNG obrázkem. V případě obrázku si veškeré změny v průhlednosti vyţádali opět úpravu obrázku. Nyní, v CSS3, stačí pouze definovat vlastnost opacity s příslušnou hodnotou desetinného čísla, kde 1 znamená plné zobrazení objektu a 0 jeho plnou průhlednost. 50% průhlednost boxu lze definovat níţe popsaným způsobem: .prvek { opacity: 0.5; }
V kompatibilním webovém prohlíţeči, jako např. Internet Explorer 9 bude výše uvedená definice vypadat následovně (pro efekt dodána barva pozadí). Vedle, pro porovnání je pouze 30% průhlednost a na třetím obrázku 0% průhlednost (opacity: 1).
Obrázek 17: zobrazení průhlednosti objektu pomocí CSS3 v IE9. Zdroj: vlastní
3.3.1.8. RGBA – definování barev V CSS3 leze nově definovat barvy pomocí stupnice RGBA, kde se jedná o stejná barevný model, jako v případě RGB (red, green, blue), kde je navíc přidána průhlednost (alpha). Efekt je tedy podobný jako při pouţití vlastnosti opacity. Černého poloprůhledného obdélníku lze dostáhnout následující definicí: .prvek { background-color: RGBA(0, 0, 0, 0.5); }
3.3.1.9. Další vlastnosti Nových vlastností je daleko více, mezi další v rychlosti patří např. obtaţení textu (text-stroke-color; text-stroke-width), barevné gradienty (gradient), přechody (transition), transformace (transform), animace (animation) a jiné.
59
3.3.2. Pomlčkový prefix Protoţe nové vlastnosti v CSS3 jsou stále velice čerstvé a jejich nasazení v prohlíţečích nemusí být ještě plně odladěné, vytvářející si jednotlivý producenti webových prohlíţečů svoje tzv. pomlčkové prefixy, které se přidají před název vlastnosti. V případě border-radius u prohlíţeče Opera se můţeme setkat s vlastností -o-borderradius, nebo u Chrome by to bylo -chrome-border-radius.
Tyto prefixy jsou přidávány v dobách, kdy prohlíţeče nemají ještě plně implementovanou a odladěnou vlastnost, ale vlastnost je jiţ v tak pouţitelné verzi, aby ji nabídli webdesignerům, od kterých dostávají cenné informace o pouţitelnosti, chybách apod. Kaţdý webdesigner se můţe rozhodnout, právě přidáním pomlčkového prefixu, jestli tuto vlastnost do svých stránek nasadí nebo ne. V praxi to pak vypadá, pokud chce webdesigner pouţít oblé rohy u všech webových prohlíţečů, které tuto vlastnost zapracovávají, ţe je nutné pro kaţdý z prohlíţečů vloţit jeho pomlčkový prefix, viz níţe: .prvek { -o-border-radius: 10px; -chrome-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
Na posledním řádku je uvedena vlastnost bez pomlčkového prefixu, aby CSS3 definice byla pouţitelná také do budoucnosti. Webový prohlíţeč po otestování vlastnosti a oficiálním nasazení do ostrého provozu postupně přestane pomlčkový prefix pouţívat a bude pouţívat jen ve specifikaci definovaný tvar vlastnosti. Stává se, ţe nějakou dobu běţí ostré a testovací nasazení vlastnosti souběţně a proto je potřeba, aby vlastnost bez prefixu byla na posledním místě a tím přebila testovací verzi. Na první pohled je pouţití pomlčkových prefixů otravné a zdlouhavé, obzvlášť, pokud je tvořena pomocí CSS3 sloţitější konstrukce, který si vyţádá třeba i několik desítek řádků kódu. V průběhu času vzniky nástroje, které webdesignerovi pomáhají visuálně definovat vlastnost pro všechny nejběţnější prohlíţeče, včetně jejich prefixů apod. Mezi tyto nástroje patří např. CSS Piffle28, CSS3 Generátor29, nebo desítky jiných. Prefixy pro nejběţnější webové prohlíţeče jsou uvedeny v tabulce níţe:
3.3.3. Kompatibilita a použitelnost na počítačích Stejně jako v případě testování nových HTML5 technologií, byl vytvořen obdobný test pro vybrané nové vlastnosti CSS3. Test byl plně sestaven za pomocí knihovny Modernizr30. Otestovány byly, stejně jako v případě HTML5 testu, nejběţnější webové prohlíţeče na platformách Microsoft Windows (XP a 7) a Linux (konkrétně Ubuntu 11.04).
Tabulka 3: výsledky měření CSS3vlastností v prohlížečích na PC. Zdroj: vlastní
Z provedeného testu je zřejmé, ţe s novými CSS3 vlastnostmi si dnešní prohlíţeče, dokonce i tradičně nejproblémovější Internet Explorer, velice slušně rozumí. U webových prohlíţečů, kde bylo testováno více verzí, jako např. Mozilla Firefox, je znatelný vývoj.
3.3.4. Kompatibilita a použitelnost na mobilních zařízeních Stejně, jako byl test nových vlastností CSS3 proveden na počítači, byly otestovány téţ mobilní prohlíţeče, které v tomto případě sice za počítačovými ztrácejí, ale i tak je většina 30
http://www.modernizr.com/
61
nových vlastností skoro ve všech mobilních prohlíţečích jiţ implementováno. Stejně jako v případě měření nových technologií HTML5 byly testy provedeny na Smartphonech s operačními systémy Android 2.3, iOS 4.3 a Symbian 60.
Tabulka 4: výsledky měření CSS3 vlastností v prohlížečích na mobilních zařízeních. Zdroj: vlastní
4. Pravděpodobná budoucnost WWW stránek Předpovědět budoucnost, jakým směrem se web bude ubírat, není snadné. Pokud by někdo odpověď na tuto otázku stoprocentně znal, postavil by si na tom slušnou ţivnost. Kaţdopádně indicie a vývoj dnešní doby dávají téměř jistotu nejbliţší budoucnosti, stejně jako konference a tiskové zprávy velkých společností. Především se jedná o všudypřítomný, stabilní a dostatečně rychlý internet – konektivita na internet. Internetem bude vybavené kde jaké zařízení. Jiţ dnes můţeme vidět, ţe nejen kaţdá firma či domácnost je připojená na internet pomocí pevné linky, ale zároveň, ţe se na internet připojují i mobilní zařízení mimo domov, volně venku. A to zejména přes sítě mobilních operátorů. Ne zřídka má mobilní zařízení moţnost připojit se na internet přes WiFi, ale také 3G v současné době, na LTE snad jiţ v blízké budoucnosti. Tablety a Smartphony budou častějším vstupním bodem na webové stránky, prohlíţeče v nich jsou jiţ nyní velice výkonné, kaţdopádně bude potřeba webové stránky navrhovat tak, aby přístup přes mobilní zařízení byl bezproblémový, pohodlný a uţivatel nebyl nijak limitován, ţe se rozhodl na webové stránky podívat přes mobilní zařízení. Ba naopak, 62
moţná časem návštěvníci z mobilních zařízení budou upřednostňování. Jak tvrdí Morgan Stanley ve své zprávě „Internet trends“31 (4/2010), roku 2014 bude více jak polovina lidí pouţívat přístup k internetu přes mobilní zařízení. Dalším trendem nejbliţší budoucnosti bude bezesporu Cloud. Cloudy se začínají prosazovat jiţ v dnešní době, ale jak naznačuje, připravovaný Chrome OS od společnosti Google, který byl hojně představována na konferenci Google I/0 201132 (05/2011), je naprosto zřejmé jak si představují budoucnost Cloudu v Google. Veškerá data budou uloţena kdesi v Cloudu, uţivateli bude stačit pouze připojení k internetu a terminál (např. notebook s operačním systémem Chrome OS – tzv. Chromebook). Terminál by mělo být spotřební zboţí dostupné za přijatelný peníz a pomocí přihlášení se ke svému Google účtu se uţivatel dostane k veškerým svým datům. Výhody Chrome OS jsou uváděny, jako okamţitá dostupnost sluţeb, okamţité odesílání dat do Cloudu, pokud se při psaní textu terminál jakýmkoli způsobem porouchá, po přihlášení z jiného terminálu, nebo po vyřešení problému, bude mít uţivatel rozepsaný text přesně v té podobě, neţ se terminál porouchal – odpadá tedy práce s ukládáním, verzováním apod. Stejně jako sdílení dokumentu, kde více uţivatelů bude moci pracovat v reálném čase na jediném dokumentu bez toho, aby si přepisovali svou práci apod. Další vývoj Cloudu by měl být tzv. Cloud 2.0 – jak uvádí Petr Švec ve svém článku „Cloud computing v praxi: co přináší Cloud 2.0“33 (9/2010). Sluţby Cloudu se budou integrovat a sdílet mezi pracovními či jinými kolegy a urychlovat tak maximálně komunikaci napříč kontinenty. Rok 2011 by se podle Petra Hájka a jeho článku „Jaké cloudové koncepty budou v tomto roce nejrozšířenější?“34 být pro společnosti jakýsi testovací. Cloudových sluţeb bude jiţ mnoho a společnost si sama můţe za poměrně malé peníze vyzkoušet velké sluţby, na které by dříve menší nebo začínající společnost neměla finance. Stejně jako levné uloţení nebo zpracování dat bez nutnosti pořídit výkonný server a IT odborníka na jeho správu (Kodera, 2009; Švec, 2010; Hájek, 2011; Václavík, 2011). Díky Cloudu se mohou měnit platební podmínky některých společností a financování jejich software. Microsoft se jiţ např. snaţí zavést svůj Microsoft Office a jiné sluţby přes internet tím způsobem, ţe uţivatel nebude platit za aplikaci jako takovou, aby si ji pořídil a mohl uţívat, ale bude platit jakousi formu pronájmu. Kdy zaplatí např. jen za čas strávený v aplikaci, nebo za objem dat, které aplikací zpracoval apod. Ceny tak budou 31
velice variabilní, odvislá od počtu uţivatelů, či od počtu dokumentů, času apod. Vybrat by si měl kaţdý (Růţička, 2011). Dalším krokem nejbliţší budoucnosti bude, díky Cloudu a konektivitě odkudkoli, přenášení více a více desktopových aplikací na internet, tak jak se vývoj vyvíjí jiţ nyní, ale za pomoci JavaScriptu, HTML5, CSS3 a ostatních nových technologií, které budou postupně sílit na oblibě, jiţ nepůjde o kompromisy, jako v dnešní době a nedávné minulosti, ale o plnohodnotné aplikace pracující v Cloudu. Včetně všech jeho výhod i nevýhod, na jejichţ eliminaci se bude dále pracovat. Nespornou výhodou bude, jak jiţ bylo zmíněno výše a jak zmiňuje i Aleš Růţička ve svém článku „Kancelář v cloudu najdete v počítači i v mobilu“35 (05/2011), ţe přístup k datům a aplikacím bude moţný z jakéhokoli terminálu. At se jiţ jedná o notebook, mobilní telefon, tablet, nebo naprosto jiné zařízení, které bude mít moderní webový prohlíţeč. Protoţe všichni a všechno bude připojeno k internetu, do internetu se bude investovat ještě mnohem více financí neţ v současné době. Mary Meeker na Web 2.0 Summit 2010 (11/2010) předpověděla obrovský boom internetové reklamy36. Reklama se bude sílit nejen díky rostoucímu počtu zařízení připojených na internet, ale také bude moci být efektivnější díky novým technologiím. Např. díky geolokaci, Cloudu, společným autorizačním sluţbám, jako je např. OpenID, ale časem jistě i Google Wallet, oficiálně uvedeným v květnu 2011, dnech bude moţné lépe sledovat uţivatelovi návyky, zařízení ze kterých je do sluţeb připojený, nákupní návyky, kupní sílu a samozřejmě umístění. Díky těmto informacím bude moţné lépe cílit reklamu a nabízet uţivateli personalizované sluţby přesně dle známých údajů (Meeker, 2010).
5. Statistika užívání doctype v dnešní době 5.1. Cíle programu „dtstat37“ Cílem programu, vytvořeného pro účely této diplomové práce, který jsem pracovně pojmenoval „dtstat“ je projít rozumný vzorek současného internetu a zmapovat jaké verze a řady doctype jsou v dnešní době a v jaké míře vyuţívány. Zejména jestli se jiţ začínají nasazovat webové stránky vyrobené v nově připravovaném HTML5, jestli aktuální poslední oficiálně vydaná verze je na webu majoritní apod. 35
5.2. Metodika programu „dtstat“ Program byl vytvořen jako tříkrokový, aby byly lépe odděleny funkce a jednotlivé kroky se daly vyuţívat odděleně případně i v budoucnu. Celý program byl vytvořen jako webová stránka v PHP + MySQL databáze s výstupem do HTML5. První krok má za úkol sebrat z internetu rozumné mnoţství unikátních odkazů na webové stránky. Program pracuje tak, ţe do určeného adresáře mu byly uloţeny soubory, které obsahují texty v různých jazycích, aby program nevyhledával pouze české stránky a ze statistiky bylo moţné vyčíst, i jak si na tom stojíme jako Česko, oproti zbytku světa. Program si načte obsah adresáře a náhodně vybere jeden ze souborů, který otevře a vybere z něj několik slov, která se poté pokusí vyhledat na vyhledávači Google. Nejprve byl počet slov náhodný, ale pro nalezení maximálního počtu stránek byl postupně redukován aţ na jedno jediné slovo. Výsledky vyhledávání poskytnutých slov do vyhledávače Google se zkontrolují s databází, jestli se jedná o unikátní linky a zároveň o unikátní domény. Dá se předpokládat, ţe webové stránky na stejné doméně budou vytvořeny za pouţití stejného doctype, takţe by bylo zbytečné prověřovat kaţdou stránku domény a zde by statistika mohla být lehce zkreslena, proto pouze unikátní domény. Druhý krok programu „dtstat“ má za úkol načíst z internetu stránku po stránce, dle linků uloţených v databázi, otevřít její zdrojový kód a vyhledat v něm v jaké verzi značkovacího jazyku jsou stránky vyrobeny, jaký mají uvedený doctype. Program se za pochodu různě dolaďoval, aby fungoval co nejspolehlivěji a nejrychleji. V konečné verzi funguje tak, ţe se kaţdou sekundu načte z databáze prozatím neprověřený link a program se jej pokusí otevřít přes internet. Bohuţel ne všechny linky byly dostupné, takţe bylo potřeba ošetřit, aby při nemoţnosti načtení stránky link program označil jako chybný a pokračoval co nejrychleji dále. Třetí krok programu je jiţ samotná statistika, která se vytváří na základě dat, která jsou uloţena v databázi od prvních dvou kroků programu. Statistiku je moţné rozvíjet nad získanými daty dle dalších potřeb. Prozatím statistika umí vypsat procentní zastoupení jednotlivých doctype a jejich řad, jenom samotných doctype a doctype v rámci České republiky a zbytku světa – dle domény linku.
65
5.3. Výsledky průběhu chodu programu „dtstat“ Program běţel několik dní s různými obměnami textů a bylo sesbíráno 71.858 unikátních linků z celého světa. Všechny linky se v druhém kroku prověřily a chybných (nedostupné stránky) z nich bylo 125 (tedy 0,174 %). V poměrně vysokém počtu 23.866 (tedy 33,213 %) webových stránek nebylo moţné nalézt doctype. Tyto problémy v současné době analyzuji a snaţím se najít příčinu, aby bylo toto číslo minimalizováno. Jednou z příčin je, ţe Google vracel linky i na PDF, DOC, XLS, TXT, nebo jiné soubory, které nejsou webovými stránkami. Celkem bylo úspěšně vyhledáno a uloţeno 47.867 výsledků (tedy 66,613 %). Výsledky testování linků, po jednotlivých kontinentech + Česká republika, jsou uvedeny následující tabulce: Kontinent
Poč. linků
Domén 1. řádu
Zkontrolováno
Nenalezen DTD
Nedostupné
Asie
6138
46
3443 (56 %)
2675 (43 %)
20 (0,3 %)
Afrika
195
28
102 (52 %)
91 (46 %)
2 (1 %)
24
469 (57 %)
355 (43 %)
1 (0,1 %)
S. Amerika
825
J. Amerika
816
12
466 (57 %)
347 (43 %)
3 (0,4 %)
Antarktida
2
2
0 (0 %)
2 (100 %)
0 (0 %)
26899
44
17993 (67 %)
8874 (33 %)
32 (0,1 %)
925
15
595 (64 %)
326 (35 %)
4 (0,4 %)
12062
1
8858 (73 %)
3193 (26 %)
11 (0,1 %)
Evropa Austrálie a Oceánie ČR
Tabulka 5: výsledky testování webových stránek po jednotlivých kontinentech + ČR. Zdroj: vlastní
5.4. Naměřené výsledky – svět Vytvořená statistika prokázala, dle očekávání, ţe nejvíce pouţívaným doctype dnešní doby, na celém světě, je XHTML 1.0, konkrétně řada Transitional – ve kterém je vytvořeno celkem 50,945 % prověřovaných webových stránek. Druhým nejpouţívanějším doctype je XHTML 1.0 Strict – 18,961 % a na třetím místě je HTML 4.01 Transitional – 14,367 %. Nově připravovaná specifikace HTML5 je jiţ také často nasazována, je na čtvrtém místě a podle statistik je pomocí tohoto nového značkovacího jazyku veřejně nasazeno jiţ 5,329 % z prověřovaných webových stránek. Níţe přiloţen graf vyuţití doctype, které jsou v prověřovaných webech, zastoupeny nad 1 %:
66
XHTML 1.0 Transitional XHTML 1.0 Strict HTML 4.01 Transitional HTML5 HTML 4.0 Transitional HTML 4.01 XHTML 1.1 XHTML+RDFa 1.0
Obrázek 18: graf využití doctype v prověřených webech. Zdroj: vlastní
Pokud budeme brát jen jednotlivé verze doctype bez jejich řad, absolutně nejpouţívanější se 70,065 % procenty je XHTML 1.0, druhým nejpouţívanějším, ale jiţ s velkým skokem je HTML 4.01 se 17,022 % a třetím je nově připravované HTML5 s 5,329 %, poté HTML 4.0 – 3,420 %, XHTML 1.1 – 2,242 %, XHTML+RDFa 1.0 – 1,295 %. Viz graf níţe (zobrazeny doctype nad 1 % výskytu):
XHTML 1.0 HTML 4.01 HTML5 HTML 4.0 XHTML 1.1 XHTML+RDFa 1.0
Obrázek 19: graf využití doctype (bez řad) v prověřených webech. Zdroj: vlastní
Díky statistice je vidět, ţe někteří webdesigneři nedeklarují správně doctype, mají v něm různé překlepy, chyby, neuvedené nebo neexistující verze apod.
67
Nejstarším provozovaným značkovacím jazykem, kdyţ pominu chyby jako HTML 1.0 apod., kde chybí X, je HTML 3.2, které je zastoupeno v 0,497 % prověřovaných webových stránek, pokud bereme statistiku bez řad.
5.5. Naměřené výsledky – Český republika V České republice je stav podobný jako ve světě, na prvním místě je XHTML 1.0 Transitional – 40,359 %, na druhém místě je XHTML 1.0 Strict – 26,880 %, třetí je HTML 4.01 Transitional – 14,710 %. Nově připravované HTML5 je v České republice ale aţ na osmém místě. Je nasazeno pouze v 1,456 %. Coţ je oproti světovému nasazení bezmála o 4 % méně. Je zde vidět ona jazyková bariera a osvěta ohledně HTML5 o kterém jsou kníţky a odborné články spíše psané anglickým jazykem, v ČR není v době psaní diplomové práce ani jedna tištěná kniha na HTML5 a článků také není mnoho. Ale, dle mého souzení, se situace pomalu zlepšuje. Na konferencích, které proběhly v poslední době, obvykle minimálně jedna přednáška o HTML5 byla. Níţe je uveden graf pouţívání doctype v České republice (výsledky naměřené nad 1 % výskytů).
XHTML 1.0 Transitional XHTML 1.0 Strict HTML 4.01 Transitional XHTML+RDFa 1.0 HTML 4.0 Transitional XHTML 1.1 HTML 4.01 HTML5
Obrázek 20: graf používání doctype v České republice. Zdroj: vlastní
5.6. Naměřené výsledky – dle kontinentů Na všech kontinentech s velkým náskokem kraluje XHTML 1.0 Transitional a nově připravované HTML5 je na čtvrtém aţ osmém místě, viz následující tabulka naměřených výsledků u nejběţnějších doctype.
68
Kontinent
XHTML 1.0
XHTML 1.0
HTML 4.01
HTML 4.0
Transitional
Strict
Transitional
Transitional
Asie
1. (54 %)
3. (13 %)
2. (19 %)
4. (6 %)
7. (2 %)
Afrika
1. (61 %)
3. (9 %)
2. (20 %)
4. (5 %)
6. (2 %)
S. Amerika
1. (53 %)
3. (14 %)
2. (17 %)
4. (4 %)
4. (4 %)
J. Amerika
1. (66 %)
2. (14 %)
3. (10 %)
5. (3 %)
4. (3 %)
Antarktida
-
-
-
-
-
1. (48 %)
2. (22 %)
3. (15 %)
4. (3 %)
8. (2 %)
1. (58 %)
2. (18 %)
3. (13 %)
5. (2%)
4. (5 %)
Evropa Austrálie a Oceánie
HTML5
Tabulka 6: tabulka naměřených výsledků u nejběžnějších doctype. Zdroj: vlastní
5.7. Naměřené výsledky – sumář Dle naměřených a výše uvedených výsledků je naprostá většina současných webových stránek vytvořena dle standardu XHTML 1.0 Transitional. Obecně pak nejnasazovanější je XHTML 1.0, zatím poslední dokončená specifikace. Co se nasazování nově připravované specifikace HTML5 týká, nejpokrokovější jsou webdesigneři v Austrálii a Oceánii, kteří v současné době veřejně provozují 4,538 % webových stránek tohoto standardu. Naopak nejméně pokroková v nasazování HTML5 je Asie, kde stránky dle tohoto standardu tvoří pouze 1,629 % prověřovaných stránek.
5.8. Zhodnocení programu Program „dtstat“ by se jistě dal připravit lépe, komplexněji a s hezčím prostředím či výstupy. V této podobě je ale plně funkční a plní na počátku stanovené cíle. Pravděpodobně by bylo lepší naprogramovat první a druhý krok v nějakém jiném programovacím jazyku, jako je např. Python, Java, nebo C++/C#, ale v současné době pro mě byla nejrychlejší a nejjistější cesta vytvořit celý projekt v PHP. Program, včetně všech podrobných výsledků je provozován v současné verzi na adrese: http://dp.krispin.cz/dtstat/. Protoţe jsem při pátrání zjistil, ţe podobný program na internetu není (nebo mi zůstal dobře ukryt), uvaţuji o zveřejnění programu a provedení měření vţdy v nějakých cyklech, aby byl vidět vývoj nasazování nově připravované specifikace HTML5 a bude zajímavé také sledovat kdy, tato specifikace bude na webu dominantní.
69
6. Praktická demonstrace nových technologií 6.1. Definování vytvořeného testovacího vzorku Pro účely této diplomové práce byl pouţit jeden z komerčních projektů naší společnosti, který byl vytvořen kompletně v HTML5 a CSS3. Při vytváření šablony bylo striktně dbáno na sémantiku zdrojového kódu, jeho validnost a maximální pouţitelnost do budoucna. Šablona je uloţena na internetové adrese http://dp.krispin.cz/vernat.cz, kde je moţné si ji prohlédnout v libovolném webovém prohlíţeči a otestovat tím funkčnost.
6.2. Postup tvorby šablony a problémy při tvorbě Výroba šablony v HTML5 a CSS3 nebyla nikterak obtíţná. Filosofie šablony je taková, ţe šablona musí být maximálně funkční ve všech běţných webových prohlíţečích od Internet Explorer 6, aţ po vývojovou verzi Google Chrome a všechny budoucí verze webových prohlíţečů. Kde to bylo moţné, byly pouţity CSS3 vlastnosti namísto obrázků, ovšem někde naopak, jako např. u hlavního menu, byly obrázky pouţity záměrně i kdyţ by celé menu šlo stylovat přes CSS3. Důvodem je zpětná kompatibilita se staršími prohlíţeči, které CSS3 a HTML5 nemají nebo dostatečně nemají implementované. V šabloně jsou obhospodařeny takové funkce jako placeholder, který je v přihlašovacím formuláři zobrazen kompatibilními prohlíţeči. Prohlíţeče, který tento atribut neznají, detekuje JavaScript a pomocí něj je v polích vytvořena obdoba atributu placeholder, aby návštěvník se starším prohlíţečem nebyl ochuzen a věděl, které pole
slouţí k zadání jména a které k zadání hesla. Kulaté rohy a přechody v nabídce sortimentu jsou vytvořeny plně pomocí CSS3, stejně jako stány pod jednotlivými boxy, zakulacený styl tlačítek a formulářových polí. Návštěvník se starším prohlíţečem stránku uvidí prakticky správně a bude pro něj naprosto funkční a pouţitelná, jediné o co je ochuzen jsou právě nové CSS3 vlastnosti. Rohy boxů, formulářových polí a tlačítek uvidí hranaté, stín pod boxy nebude zobrazen, stejně jako přechody v nabídce sortimentu apod. Při tvorbě šablony a testování v různých prohlíţečích jsem narazil pouze na jeden zásadní problém a tím je, ţe Internet Explorer 6 odmítá HTML tagy, které nezná, jako jsou konkrétně v této šabloně: header, nav, section, time a footer. Na tyto tagy pak odmítá aplikovat CSS vlastnosti. Řešení je snadné, přes níţe uvedený JavaScriptový kód jsou nové 70
tagy vloţeny do DOM (Document Object Model) a prohlíţeč pak s nimi umí pracovat a stylovat je. var a = ['section', 'article', 'nav', 'header', 'footer']; for (var i = 0, j = a.length; i < j; i++) { document.createElement(a[i]); }
Obrázek 21: ukázka nastylované šablony pomocí HTML5 a CSS3. Zdroj: vlastní
71
7. Výsledky Dle výše popsaných zjištění, praktické demonstrace a testů nových technologií webových stránek je zřejmé, ţe i kdyţ specifikace nejsou ani zdaleka finální, tak jejich postupné nasazování v moderních webových prohlíţečích je, v současné době, na poměrně vysoké úrovni a pokud se tyto nové technologie a CSS3 vlastnosti pouţívají s rozmyslem, nic nebrání k jejich hojnému soukromému či komerčnímu nasazování do ostrých provozů webových stránek a aplikací jiţ dnes. Ba naopak, pomocí HTML5 a CSS3 lze tvořit aplikace, které např. ve světě mobilních technologií mohou plnit úlohu systémové aplikace, pokud to její povaha dovolí, čímţ lze ušetřit nemalé prostředky při vývoji aplikací na míru pro jednotlivé operační systémy dnešních Smartphonů a ladění aplikace pro jednotlivé modely mobilních telefonů a tabletů. Při pouţití technologií, jako je např. geolokace, AppCache nebo WebStorage lze vytvořit opravdu plnohodnotnou aplikaci, pouţitelnou v online stejně jako v offline reţimu. Nasazovat bez rozmyslu a testování funkcí prohlíţečů nové technologie samozřejmě nelze doporučit. Vţdy je potřeba přemýšlet, které vlastnosti jsou stěţejní, aby se pro návštěvníka webových stránek, který na ně přistupuju ze staršího webového prohlíţeče, nestaly stránky nepřístupné a tím pádem nepouţitelné. Naštěstí jiţ nyní existuje mnoho testů, pomocí kterých lze zjistit, jestli daná funkce nebo vlastnost je či není podporována a podle toho ji obhospodařit JavaScriptem či jinou knihovnou. Stejně tak je nutné v dnešní době narůstající obliby mobilních zařízení s nimi počítat a náročné stránky optimalizovat také pro tato zařízení. I kdyţ mobilní zařízení, viz výsledky testů v kapitolách 3.2.9 a 3.3.4 obstojně zvládají HTML5 i CSS3, není na škodu zváţit, jak zařízení budou webové stránky vyuţívat, jak rychle budou stránky načítat a jak pohodlně budou stránky z mobilního zařízení ovladatelné a případně připravit oddělenou mobilní verzi webových stráněk.
72
Závěry a doporučení Cílem této diplomové práce je vyzdvihnout nové technologie, kterými jsou zejména připravované HTML5 a CSS3, webových stránek, představit je a otestovat jejich pouţitelnost a moţnost nasazení na ostré komerční webové stránky jiţ v současné době. Stejně jako u kaţdé nové technologie či vlastnosti popsat její klady a přínosy. Součástí práce je také otestovat jak novinky implementují webové prohlíţeče a jak případně otestovat či ošetřit nepodporovanou technologii či ve webovém prohlíţeči. Nové technologie byly krom klasických počítačů testovány také na mobilních zařízeních, protoţe jejich nárůst strmě stoupá. A stejně jako moţnost připojení se k internetu z jakéhokoli mobilního zařízení stoupají tím pádem i přístupy na webové stránky z těchto Smartphonů či tabletů. V diplomové práci byla nastíněna historie, současnost i vývoj odvětví, do kterého spadají webové aplikace. Z tohoto vývoje je zřejmé, jak se mění uţívání a význam webových stránek a co webové stránky poskytují nyní, oproti tomu, co poskytovaly kdysi. Na internet se v současné době přesouvají desktopové aplikace a tím stoupají i nároky uţivatelů na zpracování a funkce webových aplikací. Aby bylo moţné tyto nároky uţivatelů uspokojit, připravuje Konsorcium W3 specifikaci rodiny technologií HTML5, jeţ tyto poţadavky řeší. Trendem dnešní doby, který bude jistě pokračovat i do budoucna je zejména Cloud computing, který jiţ v současné době supluje výpočetní výkon klientů, nároky na datové úloţiště či licence a správu programů. Druhým hlavním cílem diplomové práce je sestavit statistiku specifik (DTD / doctype), které vyuţívají současné webové stránky napříč celým internetem. K sestavení statistiky byl naprogramován vlastní program, pracovně pojmenovaný „dtstat“, který za dobu testu prošel a načetl doctype více neţ 40.000 webových stránek a na základě zjištěných výsledků sestavil statistiky v rámci celého světa nebo členěné na jednotlivé kontinenty a zvlášť i na Českou republiku. Posledním bodem diplomové práce je praktický demonstrace nových technologií, kdy byla vytvořena šablona webových stránek, která je určena ke komerčnímu pouţití. Čímţ je prokázáno, společně s testy pouţitelnosti nových funkční a vlastností v dnešních webových prohlíţečích, ţe nové technologie smysl mají a ţe je moţné je komerčně, s rozmyslem a testováním, nasazovat jiţ v dnešní době. 73
Seznam použité literatury Elektronické zdroje 1. CAILLIAU, Robert. W3C [online]. 1995 [cit. 2011-01-12]. A Little History of the World Wide Web. Dostupné z WWW: . 2. CRHONEK, Vítězslav. Fakulta informatiky Masarykovy univerzity [online]. 2003 [cit. 2010-12-27]. Historie značkovacích jazyků. Dostupné z WWW: . 3. GAITHER, Chris; C. CHMIELEWSKI, Dawn. Los Angeles Times [online]. July 16, 2006 [cit. 2011-03-13]. Fears of Dot-Com Crash, Version 2.0. Dostupné z WWW: . 4. GROMOV, Gregory. Internet History, World Wide Web History, Silicon Valley, Computer Companies, Computer Magazines, Netvalley [online]. c1995-2011 [cit. 2011-01-04]. History of The Internet & World Wide Web. Dostupné z WWW: . 5. HÁJEK, Petr. ITBiz.cz [online]. 24. 5. 2011 [cit. 2011-05-31]. Jaké cloudové koncepty budou v tomto roce nejrozšířenější?. Dostupné z WWW: . 6. HASSMAN, Martin. HTML 4 5 6... [online]. 24. 6. 2010 [cit. 2011-04-18]. Jak funguje geolokace ve Firefoxu - detailní (aţ vyčerpávající) popis. Dostupné z WWW: . 7. HASSMAN, Martin. Zdroják - tvorba webových stránek a aplikací [online]. 10. 4. 2009 [cit. 2011-03-27]. Začínáme s HTML5 canvasem - Zdroják. Dostupné z WWW: . ISSN 1803-5620. 8. KLUČKA, Bronislav. WebNT - web new technologies | HTML5 (HTML 5), CSS3 (CSS 3) [online]. 17.8.2010 [cit. 2011-03-27]. WebNT - (16): Canvas | HTML5 (HTML 5), CSS3 (CSS 3). Dostupné z WWW: . 9. KODERA, Jan. BuzzMag [online]. 16. 3. 2009 [cit. 2011-03-17]. Cloud computing je nový dotcom a Web 2.0 neumírá - BuzzMag. Dostupné z WWW: . 10. KOLÍN, Jan. Marketing na internetu [online]. 22. 11. 2010 [cit. 2011-05-31]. Budoucnost internetového marketingu - Web 2.0 Summit 2010. Dostupné z WWW: . 11. LIE, Håkon Wium; BOS, Bert. Chapter 20 of the book Cascading Style Sheets, designing for the Web [online]. 3rd ed. 2005 [cit. 2011-02-20]. The CSS saga. Dostupné z WWW: . ISBN 0-32119312-1. 12. LONGMAN, Wesley Addison. World Wide Web Consortium (W3C) [online]. 1998 [cit. 2011-01-10]. 2 - A history of HTML. Dostupné z WWW: .
74
13. MALÝ, Martin. Misantropův zápisník [online]. 9.02.2007 [cit. 2011-03-14]. Web2.0, API a PHP, díl první - Misantrop.info. Dostupné z WWW: . 14. MALÝ, Martin. Zdroják - tvorba webových stránek a aplikací [online]. 27. 7. 2010 [cit. 2011-04-20]. AppCache: webové aplikace i bez připojení. Dostupné z WWW: . 15. MALÝ, Martin. Zdroják - tvorba webových stránek a aplikací [online]. 3. 8. 2010 [cit. 2011-06-18]. Webdesignérův průvodce po HTML5: WebStorage. Dostupné z WWW: . 16. Phpguru.org : Quality PHP and Javascript code [online]. 5th March 2010 [cit. 201104-19]. GeoLocation test. Dostupné z WWW: . 17. PROCHÁZKA, Jan. Zdroják - tvorba webových stránek a aplikací [online]. 4. 11. 2009 [cit. 2011-04-17]. Úvod do Sémantického Webu. Dostupné z WWW: . 18. RŮŢIČKA, Aleš. ITBiz.cz [online]. 30. 5. 2011 [cit. 2011-05-30]. Kancelář v cloudu najdete v počítači i v mobilu. Dostupné z WWW: . 19. SINGEL, Ryan. WIRED [online]. 10.06.05 [cit. 2011-03-13]. Are You Ready for Web 2.0?. Dostupné z WWW: . 20. SLÁDEK, Jan. Zdroják - tvorba webových stránek a aplikací [online]. 15. 10. 2008 [cit. 2011-04-17]. Kódujme sémanticky s mikroformáty: úvod. Dostupné z WWW: . 21. SLÁDEK, Jan. Zdroják - tvorba webových stránek a aplikací [online]. 30. 12. 2009 [cit. 2011-04-17]. RDFa - sémantika pro fajnšmekry. Dostupné z WWW: . 22. ŠINDELÁŘ, Jan. Živě.cz [online]. 24. 10. 2005 [cit. 2011-02-27]. Historie webových prohlíţečů, část 2. - WorldWideWeb a Mosaic. Dostupné z WWW: . 23. ŠVEC, Petr. ITBiz.cz [online]. 7. září 2010 [cit. 2011-03-17]. Cloud computing v praxi: co přináší Cloud 2.0 | ITBiz.cz. Dostupné z WWW: . 24. VÁCLAVÍK, Lukáš. Cnews.cz [online]. 12. 5. 2011 [cit. 2011-05-31]. Google I/O 2011: značka Chrome letí nahoru a na web přišli Angry Birds. Dostupné z WWW: . 25. Webylon.info [online]. 20. července 2004 [cit. 2010-12-29]. [K.01] A řekl Tim: Budiţ web... - Webylon.info. Dostupné z WWW: . 26. Webylon.info [online]. 6. srpna 2004 [cit. 2011-02-20]. [K.10] V kaskádovém ringu Webylon.info. Dostupné z WWW: . 27. Wikipedia [online]. 2006, 5. 10. 2010 v 21:20 [cit. 2010-12-29]. Tim Berners-Lee Wikipedie. Dostupné z WWW: . 75
28. Wikipedia [online]. 2004, 13. 1. 2011 v 02:59 [cit. 2011-01-21]. Extensible Markup Language. Dostupné z WWW: . 29. ZBIEJCZUK, Adam. Web 2.0-charakteristika a služby [online]. Brno, 2007. 71 s. Diplomová práce. Masarykova univerzita, Fakulta sociálních studií, Brno. Dostupné z WWW: < http://www.zbiejczuk.com/web20/>.
Tištěné materiály 30. ASLESON, Ryan; SCHUTTA, T. Nathaniel. AJAX : Vytváříme vysoce interaktivní webové aplikace. První vydání. Brno : Computer Press, 2006. 269 s. ISBN 80-2511285-3. 31. CEDERHOLM, Dan. CSS3 FOR WEB DESIGNERS. New York : A Book Apart, 2010. 125 s. ISBN 978-0-9844425-2-2. 32. CHOW, Shu-Wai. Programujeme Mashup aplikace pro Web 2.0 v PHP. Vydání první. Brno : Computer Press, 2008. 280 s. ISBN 978-80-251-2057-6. 33. KEITH, Jeremy. HTML5 For Web Designers. 1. New York : A Book Apart, 2010. 87 s. ISBN 978-0-9844425-0-8. 34. KOSEK, Jiří. XML pro každého : podrobný průvodce. Praha : Grada Publishing, 2000. 163 s. ISBN 80-7169-860-1.
76
Seznam obrázků: Obrázek 1: výstup tagu meter v prohlíţeči Opera. Zdroj: vlastní ....................................... 32 Obrázek 2:zobrazení tagu audio v IE8 a Chrome 10+. Zdroj: vlastní ................................. 35 Obrázek 3: vlastní ovládání audia pomocí JS – Chrome. Zdroj: vlastní ............................. 36 Obrázek 4: kreslení pomocí JS na canvas – Safari. Zdroj: vlastní ...................................... 40 Obrázek 5:nové vyhledávací pole (input type=search) v Safari. Zdroj: vlastní .................. 41 Obrázek 6: pole pro zadání čísla (input type=number) v Chrome. Zdroj: vlastní ............... 42 Obrázek 7: výběr hodnoty posuvníkem (input type=range) v Chrome. Zdroj: vlastní ....... 43 Obrázek 8: pole typu date (input type=date) v Opera. Zdroj: vlastní .................................. 44 Obrázek 9: pole typu color (input type=color) v Opera. Zdroj: vlastní............................... 44 Obrázek 10: pole doplněné o výpis moţností z datalist v Opera. Zdroj: vlastní ................. 45 Obrázek 11: zobrazení atributu placeholder v Opera. Zdroj: vlastní .................................. 46 Obrázek 12: vlastní formát (pattern) pro vstupní pole v Safari. Zdroj: vlastní ................... 48 Obrázek 13: zobrazení zaoblených rohů pomocí CSS3 v IE9. Zdroj: vlastní ..................... 57 Obrázek 14: zobrazeni více sloupců definovaných přes CSS3 v Opera. Zdroj: vlastní ...... 57 Obrázek 15: Zobrazení stínovaného textu pomocí CSS3 v Safari. Zdroj: vlastní ............... 58 Obrázek 16: Zobrazení stínu za boxem pomocí CSS3 v IE9. Zdroj: vlastní....................... 58 Obrázek 17: zobrazení průhlednosti objektu pomocí CSS3 v IE9. Zdroj: vlastní .............. 59 Obrázek 18: graf vyuţití doctype v prověřených webech. Zdroj: vlastní ........................... 67 Obrázek 19: graf vyuţití doctype (bez řad) v prověřených webech. Zdroj: vlastní ............ 67 Obrázek 20: graf pouţívání doctype v České republice. Zdroj: vlastní .............................. 68 Obrázek 21: ukázka nastylované šablony pomocí HTML5 a CSS3. Zdroj: vlastní ............ 71
77
Seznam tabulek: Tabulka 1: výsledky měření HTML5 funkcí v prohlíţečích na PC. Zdroj: vlastní ............ 53 Tabulka 2: výsledky měření HTML5 funkcí v prohlíţečích na mobilních zařízeních. Zdroj: vlastní .................................................................................................................................. 54 Tabulka 3: výsledky měření CSS3vlastností v prohlíţečích na PC. Zdroj: vlastní ............. 61 Tabulka 4: výsledky měření CSS3 vlastností v prohlíţečích na mobilních zařízeních. Zdroj: vlastní .................................................................................................................................. 62 Tabulka 5: výsledky testování webových stránek po jednotlivých kontinentech + ČR. Zdroj: vlastní ....................................................................................................................... 66 Tabulka 6: tabulka naměřených výsledků u nejběţnějších doctype. Zdroj: vlastní ............ 69
