Další vývoj HTML přímo ovlivňuje rozvoj internetových aplikací a umožňuje vývojářům realizovat čím dál tím více nápadů. Proto s každou novou verzí jazyka (specifikace) se internet posune o neuvěřitelný krok kupředu. Stejně tak se stalo i v případě vydání poslední verze HTML5, o níž bych se rád v následujících dílech seriálu rozepsal.
Historický přehled
- První krůčky jazyka HTML lze datovat do doby 1990, kdy byl vytvořen, spolu s protokolem HTTP pro jeho přenos v síti (HyperText Transfer Protocol).
- První oficiální verze nese označení HTML 0.9 z roku 1991. Specifikace zatím neobsahuje grafiku a je možné v ní vytvářet pouze jednoduché dokumenty. Šlo o součást projektu propojeného informačního systému pro výzkumné centrum fyziky CERN.
- Verze 2.0, vydaná v roce 1995, již podporuje jednoduchou grafiku a formulářové prvky…
- Verze 3.2 byla vydána 14. ledna 1997. Vycházela z verze 3.0, jejíž specifikace byla natolik složitá, že nebyla přijata jako standard. Tato verze začíná podporovat tabulky, formátování textu a stylování.
- Verze 4.0 z roku 1997. Do specifikace přibyly nové formulářové prvky, byly rozšířeny prvky pro tvorbu tabulek a specifikace začala podporovat rámy.
- Verze 4.01 byla v roce 1999 opravou některých chyb předešlé verze a měla být poslední, před přechodem na XHTML.
- Verze 5 se začala vyvíjet kolem roku 2007, dosud (psáno v roce 2012) není oficiálně specifikace vydána. Tvůrci údajně předpokládají dokončení až v roce 2022. Proto je verze 5 stále velmi živá a její podpora je ze strany prohlížečů přijata různě. Velká část HTML 5 je v současné době podporována všemi velkými prohlížeči a je tedy možné mnoho z nové specifikace již používat.
- Další verze zřejmě již nebudou označovány čísly 6, 7… Toto značení by podle W3C nebylo praktické z hlediska dalších verzí, které by měly být průběžně aktualizovány.
HTML je samo o sobě pouze značkovací jazyk k vytváření struktury dokumentů. Ovšem s nástupem jeho poslední verze se zažitě používá označení HTML5 pro celý balíček, do kterého spadají jak kaskádové styly CSS, což je samostatný jazyk na stylování dokumentů, tak JavaScript (správný název je ECMAScript – označení JS je pouze lidové), který je taktéž samostatným skriptovacím jazykem na straně uživatele. Ve skutečnosti, bychom měli správně označovat novou verzi technologií jako HTML5, CSS3 a ES5. Zkráceně se ale tato trojce označuje jako technologický balíček HTML5.
Kompletní dokumentace o těchto technologiích je k dispozici na stránkách konsorcia World Wide Web Consortium W3C, které založil v roce 1994 tvůrce jazyka HTML Tim Berner-Lee. Toto konsorcium si dalo za úkol sjednotit tehdy, velké množství verzí jazyka od mnoha výrobců a standardizovat specifikaci HTML. W3C vydalo oficiální loga nové verze HTML5. Ta se vžila a hojně se používají, například jako ikonka na webu, pro sdělení uživateli, že web používá technologie HTML5. Zároveň byly vytvořeny i loga nejpodstatnějších celků specifikace jako sémantika, offline storage, device access, connectivity, multimedia, 3D graphics and effects, performance and integration nebo CSS3 styling.
Co je tak úžasného na novém HTML5?
FILE API – Specifikace HTML5 je velmi podstatným rozšířením jazyka pro tvorbu internetových stránek. Do jejího vydání totiž nebylo možné například uploadovat na server větší soubor, než server dovoloval. Pokud bylo serverové omezení kupříkladu na 2GB. Větší soubor na server uživatel v podstatě nemohl pomocí PHP scriptu nahrát. Dnes naštěstí specifikace obsahuje tzv. File API, které umožňuje jak nahrávat neomezené množství souborů najednou, tak třeba i rozřezání velkého souboru na straně klienta a postupný upload těchto částí na server, kde se nějaký serverový script postará opět o jeho složení. Tím je možné naprosto obejít omezení maximálního uploadu. (Hromadné nahrávání souborů na server bylo před HTML5 možné, za pomoci plug-inu Flash, který má vlastní jazyk, a navíc je nutné mít v prohlížeči nainstalovanou aktuální verzi.) Více v článku na Root.cz: Čtení souborů javascriptem pomocí FILE API nebo na 4DGRAPH.COM.
FULLSCREEN API – Další novinka ve specifikaci je podpora tzv. Fullscreen API. Toto rozhraní opět odstraňuje nutnost používat Flash při nutnosti přepnout dokument přes celou obrazovku. To se využívá například při přehrávání videí nebo při prohlížení fotografií na sociálních sítích.
GEOLOCATION API - Zajímavé je i Geolocation API. Které je, opět bez nutnosti jakýchkoliv doplňků, schopno požádat o sdělení vaší globální pozice. Ta je vypočítávána ze všech možných známých parametrů, na nichž pochopitelně závisí její přesnost. Čím více údajů, tím je API přesnější. Nemusíte se však bát o nějakou špionáž. Prohlížeč se vždy nejprve zeptá, jestli chcete dané stránce sdělit své údaje o poloze.
CSS3 – Velký přínos pro internetové aplikace a jejich vzhled, je i součást HTML5 označovaná jako CSS3, která slouží pro stylování internetových dokumentů. Verze CSS3 je v podstatě průlom grafického zpracování webů. Umožňuje totiž vytvořit téměř každý grafický prvek stránky pouze pomocí tohoto stylovacího jazyka a tím velmi urychlit načítání stránek. Dalo by se zjednodušeně říct, že je tím grafika definována jako vektorová, a tedy je možné ji zobrazovat v jakýchkoliv zařízeních bez změny kvality, což je u použití obrázkové grafiky nemožné. Je tedy velmi snadné dokument přizpůsobit velikosti uživatelovy obrazovky. V dílech zaměřených na CSS3 bych rád popsal:
- Animace
- Možnosti background-image (obrázkové pozadí)
- Border image (obrázkový rámeček)
- Border radius (zaoblené rohy)
- Box shadows (stíny)
- Rozměry
- Position: Fixed (fixní pozice)
- Font settings (možnosti nastavení písma)
- Přechody
- Hyphenation (dělení slov)
- Media queries
- Multiple-column layout
- Multiple backgrounds
- Opacity (neprůhlednost)
- Pointer events
- Text overflow
- Text shadow (stín textu)
- Transforms 2D (2d transformace)
- Transform 3D (3d transformace)
- Transitions
@FONT-FACE – Revoluce v podobě stylu písma, přišla také s nástupem HTML5. Nyní je možné načíst ze serveru libovolný font a použít ho na webu. Font se jednoduše načte při načítání stránky a funguje jako standardní webové fonty Arial, Times new Roman, Verdana a další.
MEDIA API – Co se týče přehrávání médií v prohlížeči, i na to má HTML5 svou odpověď. Je jí Media API, díky němuž je možné přehrávat video a hudbu přímo v prohlížeči, tak jak to známe z mnoha stránek pro sdílení videí. Toto API však umožňuje naprogramovat celý přehrávač opět bez použití plug-inu Flash, bez kterého bylo přehrávání na internetu před vydáním tohoto API nemožné. Zahrnuje metody jako play(), pause(), load() a canPlayType(). Rozhraní tedy umožňuje vytvořit vlastní prostředí přehrávače a v kombinaci s Fullscreen API i nahradit doposud využívaný Flash.
TEXT TRACK API – Současně s využitím Media API by se dala využít i další novinka, kterou je tzv. Text track API. Toto API umožňuje připojovat k přehrávaným multimédiím titulky, popisky nebo metadata. V článku o Text track API se rozepíšu o funkcích a možnostech tohoto rozhraní. (Srpen 2012: doposud je podpora prohlížečů u tohoto API slabá.)
SVG – Při práci na současných projektech jsem při řešení „možnosti zvětšování stránky bez ztráty kvality“ narazil na problém ohledně loga. Některá loga jsou poměrně komplikovaná a definovat jejich grafiku pomocí zmiňovaného CSS3 by bylo časově velmi náročné. Řešením může být použití přímo vektorové grafiky v podobě souboru .svg. Tento formát zápisu lze vytvořit ve většině vektorových editorů a lze jej snadno implementovat do surového HTML kódu nebo jako externí soubor svg.
CANVAS – Asi největší podporu ze strany prohlížečů má nový atribut Canvas, umožňující vykreslovat grafy pomocí svého javascriptového rozhraní. Nekončí však pouze u grafů. Jde totiž o všestranný prvek pro generování jakékoliv grafiky pomocí JS. Jde o tzv. plátno umožňující dynamické vykreslování bitmap a jednoduché grafiky jako je tomu například v jazyce C++.
GAMEPAD API – Překvapilo mě rozhraní Gamepad API, které je schopno propojit gamepad s internetovou aplikací a ovládat ji. Jde o využití především při tvorbě internetových her. Pro které se díky HTML5 otevřely dveře.
OFFLINE WEB APPLICATIONS – Do nástupu HTML5 bylo pro funkčnost internetové aplikace zapotřebí neustálé připojení k internetu. Součástí nové specifikace balíku Offline web applications je rozhraní umožňující omezenou funkčnost webové aplikace i při tzv. offline režimu, tedy v situaci, kdy nejsme připojeni k internetu. Jako příklad bychom mohli použít nějaký složitější internetový program, který si na základě mnoha faktorů ukládá důležitá data na server. V takovém případě bychom mohli využít právě toto rozhraní a ukládat data nejprve k uživateli a až následně na server. Tudíž, při výpadku připojení, bychom o tato data nepřišli, ale na server by se odeslal až po obnově spojení.
SÉMANTIKA – HTML5 zavedlo naprosto nové tagy, které slouží pro zpřehlednění a optimalizaci celého projektu. Místo strukturování částí stránky do tzv. divů umožňuje HTML používat tagy přesně podle toho, jaká část stránky je jimi strukturována. Například máme samostatně stojící nezávislý prvek stránky, kterým může být článek, položka v e-shopu a podobně… Místo klasického obalení tagem <div></div> použijeme tag <article></article>. Obsah hlavičky do <header></header> nebo obsah patičky do <footer></footer>.
Toto je pouze ochutnávka z mnoha novinek, které dává HTML5 k dispozici. V pokračování tohoto seriálu se postupně budu co nejpodrobněji rozepisovat o jednotlivých částech specifikace, a to i o těch, které zde nebyly zmíněny. Abychom postupovali podle abecedy, tak se v následujícím dílu zaměříme na animace v CSS. V dalších článcích pak na animace, možnosti Background-image (obrázkové pozadí), Border image (obrázkový rámeček) a Border radius (zaoblené rohy rámečku + triky s Border radius, díky kterým lze vytvářet nejrůznější tvary).
ČLÁNKY DO MAILU