HTML5 – Den enda versionen av HTML du behöver
HTML5 Den enda versionen av HTML du behöver Emil Stenström – Suniweb 2010 @EmilStenstrom [email protected] 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/xhtml1strict.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 <meta http-equiv="Content-Type“ content="text/html; charset=UTF-8"> input: autofocus input: placeholder style: scoped html: manifest iframe: sandbox <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(){ sessionStorage.autosave = field.value; }, 1000); 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> <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> 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/xhtml1strict.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/html5aria/ • 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-5accessibility 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/
© Copyright 2024