1 / 21

HTML 5

Technologie pro publikování na webu 1. HTML 5. Ing. Jiří Štěpánek. Potřeba zavedení. (X)HTML sám o sobě je mrtvým jazykem Nedostatek prvků pro tvorbu moderních webů Sémantika webu Absence interaktivních prvků, validačních mechanismů a mnoha dalšího v (X)HTML

gent
Download Presentation

HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technologie pro publikování na webu 1 HTML 5 Ing. Jiří Štěpánek

  2. Potřeba zavedení • (X)HTML sám o sobě je mrtvým jazykem • Nedostatek prvků pro tvorbu moderních webů • Sémantika webu • Absence interaktivních prvků, validačních mechanismů a mnoha dalšího v (X)HTML • Absence pokročilé funkcionality v (X)HTML Ing. Jiří Štěpánek

  3. Nové vlastnosti jazyka HTML 5 • Strukturování (sémantika) • Multimediální obsah, bitmapa • Formulářové pole • Web Storage • Web Sockets • Nové události v rámci dokumentu (JS) • A další… Ing. Jiří Štěpánek

  4. Strukturování • Současné HTML postrádá sémantické prvky pro definování oblastí stránky • Oblasti stránky jsou standardně tvořeny elementy <div> • HTML 5 nabízí nové strukturovací elementy, které umožní snadnou identifikaci účelu konkrétní oblasti Ing. Jiří Štěpánek

  5. Strukturování (HTML) Ing. Jiří Štěpánek

  6. Strukturování (HTML5) Ing. Jiří Štěpánek

  7. Strukturování (kód) <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> Ing. Jiří Štěpánek

  8. Multimediální obsah • Současné HTML nemá podporu pro multimediální obsah • Používány jsou klientské multimediální aplikace (Flash, SilverLight, Java Appety…) • Multimediální aplikace třetích stran vyžadují instalaci prostředí pro spouštění (runtime) např. Adobe flashplayer • V HTML5 – elementy audio a video Ing. Jiří Štěpánek

  9. Multimediální obsah • Objem videa a audia v posledních letech markantně vzrostl • Pro přehrávání multimediálního obsahu postačuje základní rozhraní • V současné době existuje celá řada placených i volně dostupných přehrávačů (flash, SL) • Snaha tvůrců HTML5 – poskytnout vývojářům jednoduché rozhraní pro přehrávání multimediálního obsahu Ing. Jiří Štěpánek

  10. Multimediální obsah (kód) <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Stáhnout film</a> </video> Vytvořeno i rozsáhlé API (javascript) pro ovládání multimediálních prvků: <video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p> <button type="button" onclick="video.play();">Přehrát</button> <button type="button" onclick="video.pause();">Pozastavit</button> <button type="button" onclick="video.currentTime = 0;"><< Přetočit</button> </p> Ing. Jiří Štěpánek

  11. Canvas (bitmapa) • Poskytuje prostor pro kreslení grafických primitiv • Přímo v HTML5 dokumentu lze tedy generovat obrázek (např. graf) např. na základě reakcí uživatele na ovládací prvky • V současnosti je toto možné udělat pouze přes klientskou multimediální aplikaci či skript na straně serveru. Ing. Jiří Štěpánek

  12. Formuláře • Rozšíření parametrů type elementu input • datetime – reprezentuje datum a čas • date – datum • month – měsíc • week – týden • time – čas • number - číslo • range – rozsah číselných hodnot, které se nastaví parametry min a max • email – pole pro zadání e-mailové adresy včetně ověření, zda je formát správný • url – URL adresa • search – vyhledávací políčko • color – pole s výběrem barvy a převedením do jejího textového formátu Ing. Jiří Štěpánek

  13. Formuláře <formaction=""> <input type="datetime" name="" value=""> <input type="date" name="" value=""> <input type="month" name="" value=""> <input type="week" name="" value=""> <input type="time" name="" value=""> <input type="number" name="" value=""> <input type="range" name="" value=""> <input type="email" name="" value=""> <input type="url" name="" value=""> <input type="search" name="" value=""> <input type="color" name="" value=""> </form> Ing. Jiří Štěpánek

  14. Formuláře • Je třeba mít na paměti, že validace je uskutečněna pouze na straně klienta • Nutnost validovat vstupní data na straně serveru (webová aplikace) tím rozhodně neodpadá • Lze snadno změnit typ vstupního pole a data odeslat Ing. Jiří Štěpánek

  15. WebStorage • Umožňuje uložit webové stránce data • LocalStorage • Umožňuje uložit data, která jsou viditelná pouze v rámci jedné domény, jsou trvale uložena i v momentě, kdy je okno prohlížeče zavřeno. Kapacita v řádu jednotek – desítek MB • SessionStorage • Viditelnost v rámci stránky, menší kapacita, data jsou po zavření prohlížeče odstraněna Ing. Jiří Štěpánek

  16. WebSockets • Technologie obousměrné komunikace (webové stránky a webové aplikace) v reálném čase. • Není nutno se intervalově dotazovat, web sockets dovolují posílat zprávy i ze serveru směrem ke klientovi • V současném HTML nemožné Ing. Jiří Štěpánek

  17. WebSockets Ing. Jiří Štěpánek

  18. Události • V současném HTML je možné pomocí javascriptu reagovat na události, které na stránce nastaly, například načtení stránky, kliknutí na nějaký element • HTML5 rozšiřuje události současné HTML o mnoho dalších Ing. Jiří Štěpánek

  19. Události Ing. Jiří Štěpánek

  20. HTML5 a XHTML5 • Výhody použití HTML • Zpětná kompatibilita se existujícími prohlížeči. • Autoři jsou již s touto syntaxí dobře obeznámeni. • Shovívavá a tolerantní syntaxe znamená, že se nikde nebude objevovat uživatelsky nepříjemná "žlutá obrazovka smrti" (informující uživatele o chybě v parsování XML dokumentu), pokud náhodou dojde k chybě. • Výhodná zkrácená syntaxe, takže autoři mohou vynechat některé značky a hodnoty atributů. • Výhody použití XHTML • Striktní XML syntaxe povzbuzuje autory ke tvorbě správně strukturovaného (well-formed) kódu, který mohou někteří shledat snáze udržovatelným. • Přímá integrace s dalšími derivacemi XML, jako je SVG nebo MathML. • Umožňuje využití mechanismů pro zpracování XML, které někteří autoři používají jako součást svých editačních či publikačních procesů. Ing. Jiří Štěpánek

  21. Konec prezentace • Otázky? • Příště – časté chyby v projektech, webové aplikace • Zdroje: • http://interval.cz/clanky/seznameni-s-html-5/ • http://cs.wikipedia.org/wiki/HTML5 Ing. Jiří Štěpánek

More Related