HTML5 Den enda versionen av HTML du behöver Emil Stenström Suniweb 2010
@EmilStenstrom emil.stenstrom@valtech.se
Approach HTML5 är både stort, och luddigt Vi har 45 minuter på oss Era frågor får styra vad jag berättar om
Varför använder ni inte redan HTML5?
HTML5 Vad ingår i HTML5? Ny och ändrad HTML Javascript API:er med exempelkod Argument för HTML5 Hur gör man? Tillgänglighet Sökmotorer Bakåtkompatibilitet Vad händer med XHTML?
Vad ingår i HTML5? Massor 300.000 ord (vs. 100.000 ord i HTML4) 160.000 ord för webbutvecklare Specifikation av parsning Uppdatering av taggar och attribut ~15 nya JavaScript-API:er Förhållandet till XHTML Idé om bakåt- och framåtkompatibilitet
Parsning av HTML HTML4 saknar parsningsinstruktioner HTML5 har hela algoritmen i spec:en Kommer med referensimplementation: http://html5.validator.nu Byggd tillsammans med alla webbläsartillverkare
Vad är korrekt HTML5? <DIV>A monkey</div> <p id=john>john's P</p> <InPuT type="text"> <input type="text" /> Japp, allt det är korrekt.
Uppdatering av tillåtna taggar Ny Doctype Nya taggar Ändrade taggar Borttagna taggar Nya attribut
Ny doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <!doctype html>
Nya taggar section article aside hgroup header footer nav figure figcaption... Generell avdelning. Används med hx. Oberoende del av dokumentet Innehåll med svag koppling till resten En rubrik, som kan innehålla flera hx Avdelning för introduktion/navigation Avdelning för författare/copyright Del av sidan med navigation i Oberoende atomärt innehåll Valfri beskrivningstext till figure
Nya taggar video audio embed mark progress meter time ruby/rt/rp... Videouppspelning utan plugin Ljuduppspelning utan plugin För att starta plugins. Ej tidigare spec:ad Text som är markerad i referenssyfte Visa hur långt som är kvar Mätvärde, t.ex. vid diskanvändning Datum, Tid, eller båda Annotering av (primärt) östasiatisk text
Nya taggar wbr canvas command details summary datalist keygen output Hint för vad radbrytning kan göras Dynamisk rityta för javascript Kommando som användaren kan anropa Mera information om något, kan öppnas Sammanfattning av innehållet i details Lista av värden för <input type= list > Gränssnitt för generering av nyckelpar Någon slags utdata, t.ex. från beräkning
(Några) ändrade taggar b cite hr i menu s small strong Stilistiskt annorlunda, utan extra vikt Titeln på ett refererat verk Tematiskt avbrott Text i annan stil, eller typografiskt kursiv Toolbar eller meny Inte längre relevant text Finstilt Vikt snarare än betoning
Borttagna taggar Presentionstaggar basefont big center font strike tt u Tillgänglighetsproblem frame frameset noframes Har bättre ersättare acronym applet isindex dir
Nya attribut för input-element tel search url email datetime date month week time datetime-local number range color Fallback till text där det inte känns igen. Möjlighet att göra javascript-version där stöd saknas. Validering client-side Default-styling görs i webbläsaren
Några intressanta attribut meta: charset input: autofocus input: placeholder style: scoped html: manifest iframe: sandbox <meta http-equiv="content-type content="text/html; charset=utf-8"> <input type= text autofocus> <input type= text placeholder= http:// > <style scoped> p { color: blue; } </style> <html manifest= clock.manifest > <iframe sandbox></iframe> Och 20-30 attribut till...
Microdata-attribut <div> <h1>hendershot's Coffee Bar</h1> <p>1560 Oglethorpe Ave, Athens, GA</p> </div>
Microdata-attribut <div itemscope itemtype="http://data-vocabulary.org/organization"> <h1 itemprop="name">hendershot's Coffee Bar</h1> <p itemprop="address" itemscope itemtype="http://datavocabulary.org/address"> <span itemprop="street-address">1560 Oglethorpe Ave</span>, <span itemprop="locality">athens</span>, <span itemprop="region">ga</span>. </p> </div>
Nya Javascript API:er Canvas Cross-document Messaging Geolocation Inline Editing Local storage Selectors Video & Audio Cross-Origin Resource Sharing Drag and Drop History Offline apps Server events WebGL Web sockets Web workers
Nya Javascript API:er Canvas Cross-document Messaging Geolocation Inline Editing Local storage Selectors Video & Audio Cross-Origin Resource Sharing Drag and Drop History Offline apps Server events WebGL Web sockets Web workers
Canvas <canvas id="c" width="150" height="150 ></canvas> http://code.google.com/p/explorercanvas/
Canvas <canvas id="c" width="150" height="150"> <img src="clock.png" width="150" height="150"> </canvas> Göm <img> för Safari, som kan visa <canvas> men inte stödjer fallback
Canvas var canvas = document.getelementbyid('tutorial'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect(30, 30, 55, 50);
Cross-document Messaging #1 <iframe src="http://dev.jquery.com/~john/message/" id="iframe"></iframe> <form id="form"> <input type="text" id="msg" value="message to send"/> <input type="submit"/> </form> <script> window.onload = function(){ var win = document.getelementbyid("iframe").contentwindow; document.getelementbyid("form").onsubmit = function(e){ win.postmessage( document.getelementbyid("msg").value ); e.preventdefault(); }; }; </script>
Cross-document Messaging #2 <b>this iframe is located on dev.jquery.com</b> <div id="test">send me a message!</div> <script> document.addeventlistener("message", function(e){ document.getelementbyid("test").textcontent = e.domain + " said: " + e.data; }, false); </script>
Cross-document Messaging http://benalman.com/projects/jquery-postmessage-plugin/
Geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition( function (position) { alert( position.coords.latitude, position.coords.longitude ); }, function (error){... } ) }
Geolocation if (navigator.geolocation) { navigator.geolocation.watchposition( function (position) { alert( position.coords.latitude, position.coords.longitude ); }, function (error){... } ) }
Geolocation http://gears.google.com
Inline editing http://accessgarage.wordpress.com/2009/05/08/howto-hack-your-app-to-make-contenteditable-work/
Local Storage sessionstorage För en browsersession localstorage Över flera sessioner, knutna till en viss domän
sessionstorage var field = document.getelementbyid("field"); if ( sessionstorage.autosave ) { } field.value = sessionstorage.autosave; setinterval(function(){ }, 1000); sessionstorage.autosave = field.value;
sessionstorage http://code.google.com/p/sessionstorage/
Selectors API <table id="score"> <tr> <td>a</td> <td>87%</td> </tr><tr> <td>b</td> <td>78%</td> </tr><tr> <td>c</td> <td>81%</td> </tr> </table> var cells = document.queryselectorall( "#score > tr > td:nth-of-type(2)" );
Selectors API <table id="score"> <tr> <td>a</td> <td>87%</td> </tr><tr> <td>b</td> <td>78%</td> </tr><tr> <td>c</td> <td>81%</td> </tr> </table> var cells = document.queryselector( "#score > tr > td:nth-of-type(2)" );
Selectors API http://sizzlejs.com/ (4 kb)
Audio API <audio id="a" controls> <source src="elvis.mp3" /> <source src="elvis.ogg" /> <!-- fallback --> </audio>
Audio API <input type="button" value="play" id="playpause" onclick="video.play()"> var audio = document.getelementbyid( a ); var playpause = document.getelementbyid('playpause'); audio.onpause = function(e) { playpause.value = 'Play'; playpause.onclick = function(e) { video.play(); } } video.onplay = funtion(e) { playpause.value = 'Pause'; playpause.onclick = function(e) { video.pause(); } }
Audio API
Video API <video width="320" height="240" controls> </video> <source src="pr6.mp4" type='video/mp4;codecs="avc1.42e01e, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
Video API var idata = bc.getimagedata(0,0,w,h); var data = idata.data; for(var i = 0; i < data.length; i+=4) { var r = data[i]; var g = data[i+1]; var b = data[i+2]; var brightness = (3*r+4*g+b)>>>3; data[i] = brightness; data[i+1] = brightness; data[i+2] = brightness; } idata.data = data; c.putimagedata(idata,0,0);
Video API
Hur gör man? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"/>
Hur gör man? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"/>
Hur gör man? <!DOCTYPE html> <html lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"/>
Hur gör man? <!DOCTYPE html> <html lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta charset="iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"/>
Hur gör man? <!DOCTYPE html> <html lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta charset="iso-8859-1"> <link rel="stylesheet" href="style.css"/>
Förhållandet till XHTML 99% validerar inte idag Många skickar XHTML som text/html Två vägar: Gör HTML striktare (XHTML 2) Gör specifikationen friare vägen som valdes Men... finns också en XML-serialisering av HTML5, kallad XHTML5.
Vad krävs för XHTML5? Att man följer XML-specifikationen Möjligt att vara både HTML och XHTML Valfritt med DOCTYPE SVG och MathML tillåtet i HTML
Vad krävs för XHTML5? Skickar som MIME-type: application/xml eller application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> Ingen användning av document.write() XML-namespace för alla HTML-taggar: xmlns Syntax: <br/> <span class= type > Inga -- inne i kommetarer <![CDATA[...]]> för HTML-taggar som ej parsas CSS blir case-sensitive
Frågor kring tillgänglighet Hur tolkar skärmläsare de nya taggarna? Tolkning av nästlade rubriknivåer Nya tillgänglighetsfunktioner WAI-ARIA, role-attributet Mer struktur för innehåll, inkl. <nav> Nya problem? Fallback för video, audio, canvas?
Tolkning av nya taggar Alla de vanligaste skärmläsarna är plugins Skärmläsare klarar det som webbläsare klarar http://www.accessibleculture.org/research/html5- aria/ JAWS 11, Window-Eyes 7.11, SAToGO 3.0.202, VoiceOver Internet Explorer 8 och Firefox 3.6
Nya tillgänglighetsfeatures Semantiska element Nya formulärfälttyper m. tangentbord Audio & Video: Tangentbord + Captioning Drag & Drop: Tangentbord Text-alternativ till bilder (font-face...) Alla har potiential, men ingen stöds ännu. Hönan eller ägget? Varning: Hela gränssnitt i Canvas (t.ex. Bespin)
ARIA Landmark Roles Fungerar idag, validerar med HTML5 Överlapp med HTML5-element, men stöds redan av flera skärmläsare <nav role= navigation > Roller: application, banner, complementary, contentinfo, form, main, navigation, search
Exempel: JAWS
ARIA Del av ARIA, som tävlar med HTML5 om att vara först med tillgänglighetsfeatures, håll koll. If the host language incorporates ARIA support and there is a conflict between a host language feature and an ARIA feature, assistive technologies should assign preference to the ARIA feature. ARIA Spec.
Argument för HTML5 Tekniska: HTML Javascript Interoperabilitet
HTML-delen HTML5 beskriver parsning, inte bara spec Fungerar rakt av med din befintliga kod Semantik möjliggör nya features på din kod Mindre kod att skriva, som man kommer ihåg, kan någon rabbla en html4-doctype? Oro hos vissa: Dåligt verktygsstöd? Enda som behöver ändras är doctype...
Javascript Spec:en startade som Web applications 1.0 Tydligt mål att ge webbsidor samma möjligheter som desktopapplikationer Extra tydligt i mobilvärlden, där webbsajter har samma möjligheter som native-appar. Lika bra att börja experimentera nu, så att man är på banan när ännu flera features kommer
Javascript Prestanda: QuerySelector Canvas Web Workers Web sockets WebGL Interaktiv grafik: Video Audio Canvas WebGL
Vare sig ni vill eller inte... Webbläsartillverkare!= Webbutvecklare Samtliga kommer byta till HTML5-parsers http://caniuse.com/
Sökmotorer Bra: Mer innehåll i text-form Värdering (article > footer) Segmentering (article, article, article) Dåligt: Oklart vad som stöds idag Multipla nästlade hx-taggar
Sökmotorer
Bakåtkompatibilitet En parser HTML5 måste fungera för allt gammalt innehåll Problem: Internet Explorer < 9 Fallback för HTML Javascript-funktioner
Internet Explorer < 9 Stödjer inte CSS-styling av HTML5-element Får inte heller vara med i CSS-selektorer Kan inte köra javascript på HTML5-element Utskrift blir fel fast de andra är lösta
Internet Explorer < 9 document.createelement( nav ) Utskrift: Byt element mot div temporärt http://html5shim.googlecode.com/svn/trunk/html5.js Alternativ för avslagen JS: Styla andra element Använd * istället för elementen Använd special-css i noscript-tagg
Fallback för HTML-element Okända element beter sig som span article, aside, details, figcaption, figure, footer, header, hgroup, menu,nav, section { display:block; } http://html5doctor.com/html-5-reset-stylesheet/ Canvas, Video, Audio fallback elementets innehåll Okända attribut på forumlärfält Faller tillbaka på type= text. Använd JS för stöd.
Javascriptfunktioner Detektera stöd (väldefinerat), och använd bibliotek för att ersätta Använd inbyggd funktionalitet om det går... Modernizr bibliotek för att detektera Klasser på body-taggen som kan användas från CSS-filen
Verktyg HTML5 Validator: http://html5.validator.nu/ HTML5 Outliner: http://gsnedders.html5.org/outliner/
Källor http://diveintohtml5.org/ http://github.com/modernizr/modernizr/wiki/html5- Cross-browser-Polyfills http://www.slideshare.net/benschwarz/building-abetter-web http://www.slideshare.net/stevefaulkner/html-5- accessibility http://www.brucelawson.co.uk/2009/redesigning-withhtml-5-wai-aria/ http://www.slideshare.net/remy.sharp/html5-js-apis http://dev.opera.com/articles/view/everything-youneed-to-know-about-html5-video-and-audio/