1 / 78

HTML5 a IE9

HTML5 a IE9. Miroslav Kubov čík. ISV Technical Readiness DPE Group, Microsoft Slovakia. 57% času s počítač o m stráv i me v pr ehliadači. Agenda. HTML5, CSS3 v IE9 Video na stránke použitím HTML5 Pripnuté weby Vývojárske nástroje v IE9 Kompatibilita IE9 IEAK 9. HTML5.

idola
Download Presentation

HTML5 a IE9

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. HTML5 a IE9 Miroslav Kubovčík ISV Technical Readiness DPE Group, Microsoft Slovakia

  2. 57% času s počítačom strávime v prehliadači

  3. Agenda • HTML5, CSS3 v IE9 • Video na stránke použitím HTML5 • Pripnuté weby • Vývojárske nástroje v IE9 • Kompatibilita IE9 • IEAK 9

  4. HTML5 • HTML5 je smer, kam sa uberá web • HTML5 je multiplatformný • HTML5 nie je iba marketingová značka • HTML5 ešte nie je finálny • HTML5 nie je XML • HTML5 nestačí na všetko

  5. Pracovná skupina W3C HTML • Predstavenstvo • Sam Ruby (IBM) • Paul Cotton (Microsoft) • MaciejStachowiak (Apple) • 40 spoločností, 411 spolupracovníkov, 280 prizvaných expertov • 16 zástupcov spoločnosti Microsoft • Náš región zastupuje Jiří Kosek • 8 publikácií • HTML5 • HTML Canvas 2D Context • HTML: The Markup • HTML5 diffs from HTML4 • Polyglot Markup • Komunikácia cezIRC, telefón alebo osobné stretnutia • Doporučenia sú dostupné zdarma

  6. Stav HTML5 First Public Working Draft Working Draft Last Call Candidate Recommendation Recommendation

  7. HTML5 Test Suite Micro Test http://test.w3.org/html/tests/reporting/report.htm

  8. Cesta k stavu “Final Recommendation”Interoperabilitavyžaduje súhrnnú sadu testov • W3C HTML5 Test Suite • Určovaný W3C • Otvorený pre externých prispievateľov a analýzy • Tisícky testov • Microsoft pridal do sady viac ako 2800 testov Testovanie nie je áno/nie!

  9. Základy HTML5 <!doctype html> <meta charset=utf-8> <title>HTML5</title> <p>Toto je valídny HTML5</p>

  10. Toto je nám bližšie <!doctype html> <html lang=sk> <head> <meta charset=utf-8> <title>HTML5</title> </head> <body> <p>Toto je valídny HTML5</p> </body> </html>

  11. HTML5 nie je XML <META CHARSET=UTF-8> <META CHARSET=UTF-8 /> <META CHARSET=”UTF-8”> <META CHARSET=”UTF-8” /> <meta charset=utf-8> <meta charset=utf-8 /> <meta charset=“utf-8”> <meta charset=”utf-8” /> <MeTaCHARset=utF-8>

  12. Sémantický web alebo návrat k základom Zdroj: http://devfiles.myopera.com/articles/572/idlist-url.htm

  13. Sémantické elementy HTML5 Zdroj: Introducing HTML5

  14. Výber sémantických elementov <section> • Podobné ako div obsahujúce súvisiaci obsah <nav> • Navigačný kontajner <article> • Kompletný článok s hlavičkou, obsahom atď. <aside> • Pre súvisiace materiály alebo ako časť článku <header> a <footer> • Môžu byť použité pre elementy stránky, sekcie, článku atď. <hgroup> • Obsahuje sadu jedného alebo viac elementov <h1>, <h2> atď.

  15. Element article • Element article reprezentuje samostatnú kompozíciu v dokumente, stránke, aplikácii alebo webe a tým je nezávisle distribuovateľný a znovu použiteľný, napr. v „feedoch“. Predstavuje príspevok do fóra, e-časopisu, blogu, komentár, „widget“ alebo inú nezávislú položku obsahu. • Keď sú elementy „article“ vnorené, vnútorné elementy article reprezentujú články, ktoré sú previazané na obsah vonkajších elementov.Napr. položky v blogu na webe, ktorý akceptuje komentáre od používateľov, by mali reprezentovať komentáre ako elementy article vnorené v article elemente blog príspevku. Zdroj: http://dev.w3.org/html5/spec/sections.html#the-article-element

  16. Stránka so sémantikou

  17. CSS3 • 2D transformácie • Modul pre pozadia a okraje • Modul Color • Modul pre fonty (WOFF) • Modul pre media požiadavky • Modul pre menné priestory • Modul pre hodnoty a jednotky • Selektoryšablón štýlov

  18. CSS3 2D transformácie • CSS3 2D transformácie • Transformačná matica • Posun • Škálovanie • Otočenie • Skosenie div { -ms-transform: scale(2, 2) rotate(30deg); }

  19. CSS3 pozadia a okraje • Zaoblené rohy pomocouvlastnosti border-radius • Viac obrázkov pozadia na element • Vlastnosť box-shadow v elementoch blokov div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }

  20. Nastavenie zaoblenia okrajov

  21. CSS3 Color moduly • CSS3 farby a priesvitnosť • Alpha farba s funkciami rgba() a hsla() • Vlastnosť priesvitnosti • Plná podpora kľúčových slov „CSS3 color“ div.top { background-color: rgba(0, 0, 0, 0.5); color: azure; } div.bottom { background-color: hsla(0, 0%, 0%, 0.5); color: cornsilk; }

  22. RGBA

  23. WOFF Fonts a @font-face • Odstránenie limitu na zoznam tzv. “web safe” fontov! • Web Open Font Format umožňuje balíčkovať a doručovať fonty podľa potreby „per site“ • Navrhnutý pre použitie na webe pomocou deklarácie@font-face • „Prebalíčkovanie“ OpenTypealeboTrueType fontov • Návrh z W3C Fonts Working Group <style type="text/css"> @font-face { font-family:MojFontName; src: url('FontFile.woff'); } </style> <div style="font: 24pt MojFontName, sans-serif;"> Text bude renderovaný použitím MojFontName vFontFile.woff </div>

  24. WOFF font

  25. Požiadavky CSS3 Media • Selektívne štýlovanie podľavlastností média <link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“ text/css" /> <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" /> <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />

  26. Multimédia • Element audio • AAC, MP3 • Element video • H.264 • WebM(nutná inštalácia kodeku) <video width="400" height="300" poster="frame.png" autoplay controls loop><sourcesrc="video.ogv" type='video/ogg; codecs="theora,vorbis"'><sourcesrc="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'></video>

  27. HTML5 <audio> • Podpora prehrávania audia na stránke • Používané štandardy MP3 a AAC audio • Plne skriptovateľné cez DOM • Atribúty • src – špecifikuje umiestnenie zdrojových súborov • autoplay – automatické prehrávanie po načítaní zdroja • controls – zobrazenie ovládacích prvkov • preload – načítanie zdroja pri načítaní stránky <audio src="audio.mp3" id="audioTag" autoplay controls> <!--Tento text sa zobrazí v prehliadači bez podpory audio --> <!-- Tu by ste mali použiť náhradné riešenie napr. v Silverlight-e --> </video>

  28. HTML5 <video> • Podpora prehrávania videa na stránke • Video podľa štandardu MPEG-4/H.264 video • Podpora formátu WebM cez plugintretejstrany • Video môže byť kombinované s ďalším obsahom stránky • HTML obsah, obrázky, SVG grafika • Hardvérovo akcelerované, dekódovanie na GPU <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <span>Skvelé video!<br /> Váš browser nepodporuje HTML5 video…</span> <!– Tu by ste mali použiť náhradné riešenie napr. v Silverlight-e --> </video>

  29. HTML5 grafika a média na GPU HTML5 v IE9 beží na grafickom procesore • Vysoký výkon v použití grafických funkcií ako napr. alpha-channel blending • Frekvencia „frame-ov“ potrebná pre „smooth-streaming“ prehrávanie videa a animácie • Redukcia záťaže CPU zvyšuje výkon iných aplikácií

  30. HTML5 video

  31. Grafika • Element canvas • 2D grafika • Upravujesa pomocou Javascript-u • ScalableVectorGraphics(SVG) • http://www.w3.org/TR/SVG11/ • Samostatný súbor alebo súčasť HTML stránky • Dá sa modifikovať dynamicky pomocou Javascript-u

  32. Canvas • Blok, ktorý umožňuje vykreslovať 2d grafiku použitím JavaScript-u • Metódy pre kreslenie obsahujú: krivky, obdĺžniky, kruhy, texty a • rastrové obrázky <canvas id="mojCanvas" width="200" height="200"> Váš browser nepodporuje Canvas. </canvas> <script type="text/javascript"> var example = document.getElementById("mojCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

  33. Canvas

  34. Scalable Vector Graphics (SVG) • Tvorba a vykreslovanie 2D vektorovejgrafiky použitím XML • Vektorové obrázky súzložené z útvarov namiesto pixelov • Založené na plnej špecifikácii SVG 1.1 2nd Edition • Podporuje: • Plný DOM prístup k SVG elementom • Štruktúru dokumentu, skriptovanie, štýly, krivky, tvary, farby, transformácie, gradienty, vzory, maskovanie, prelinkovávanie, pohľady atď. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>

  35. SVG

  36. Geolocation • Zistí vašu pozíciu na základe IP, Wifi, GSM alebo GPS • Používateľ musízisťovanie povoliť • http://dev.w3.org/geo/api/spec-source.html

  37. GeoLocation Web získava možnosť použiť informácie o umiestnení na poskytnutie služieb • Vyžaduje súhlas od používateľa • Navigator.geolocation.getCurrentPosition(); function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); } } function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords[latitude]; var longitude = position.coords[longitude]; }

  38. ECMA Script 262JavaScript • Natívny JSON • Nové metódy pre prácu s poľami • indexOf, forEach, every, map • Vylepšený objektový model • create, defineProperty, getPrototypeOf • Metódy na zjedušenie kódu • string.Trim, toISOString, data.parse, date.now, bind

  39. DOM a JavaScript v IE9 Plná podpora DOM Level 2 a Level 3 udalostí Novévlastnosti ECMAScript 5 addEventListener DOM Traversal a Range • DOMContentLoaded DOM jadro Vylepšenia v parsovaní HTML5 a XHTML getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class)

  40. ECMA Script 262

  41. Agenda • HTML5, CSS3 v IE9 • Video na stránke použitím HTML5 • Pripnuté weby • Vývojárske nástroje v IE9 • Kompatibilita IE9 • IEAK 9

  42. Mód pripnutého webu • Jumplisty (kontextové menu) • Vlastné menu položky • Tlačidlá v náhľade (miniatúre) • Notifikácie • Štýlovanie UI prehliadača

  43. Ako pracuje „site mode“ (mód pripn.webu) • Vytvára izolovanú inštanciu Internet Explorer-a • Generuje AppIDpre špecifickú URL • Toolbary nie sú povolené • Vizualizácia a „taskbar“ prvky ako pre Windows aplikácie

  44. “Site mode”

  45. Pripnuté weby - základyMeta elementypre statické úpravy <link rel="shortcut icon" href="/favicon.ico" /> <meta name="application-name" content=„Nazov" /> <meta name="msapplication-tooltip" content=„Popis" /> <meta name="msapplication-starturl" content="http://host/page.htm" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#FF3300" />

  46. Statické rozširovanie „jumplist“ menu <meta name="msapplication-task" content="name=Nova sprava;action-uri=http://host/NovyEmail.htm; icon-uri=http://host/mail.ico"/>

  47. Statický jumplist

  48. Dynamické rozširovanie „jumplist“ menu window.external.msSiteModeCreateJumplist('Notifikácie'); window.external.msSiteModeAddJumpListItem(‘Nezabudnite', 'http://host/reminders.html', 'http://host/images/bell.ico'); window.external.msSiteModeShowJumpList();

  49. Notifikácie window.external.msSiteModeSetIconOverlay('http://host/star.ico', ‘Hotovo'); window.external.msSiteModeClearIconOverlay();

More Related