HTML5. Den enda versionen av HTML du behöver Emil Stenström Suniweb 2010

Transkript

1 HTML5 Den enda versionen av HTML du behöver Emil Stenström Suniweb 2010

2 @EmilStenstrom

3 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

4 Varför använder ni inte redan HTML5?

5 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?

6 Vad ingår i HTML5? Massor ord (vs ord i HTML4) 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

7 Parsning av HTML HTML4 saknar parsningsinstruktioner HTML5 har hela algoritmen i spec:en Kommer med referensimplementation: Byggd tillsammans med alla webbläsartillverkare

8 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.

9 Uppdatering av tillåtna taggar Ny Doctype Nya taggar Ändrade taggar Borttagna taggar Nya attribut

10 Ny doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <!doctype html>

11 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

12 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

13 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

14 (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

15 Borttagna taggar Presentionstaggar basefont big center font strike tt u Tillgänglighetsproblem frame frameset noframes Har bättre ersättare acronym applet isindex dir

16 Nya attribut för input-element tel search url 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

17 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= > <style scoped> p { color: blue; } </style> <html manifest= clock.manifest > <iframe sandbox></iframe> Och attribut till...

18 Microdata-attribut <div> <h1>hendershot's Coffee Bar</h1> <p>1560 Oglethorpe Ave, Athens, GA</p> </div>

19 Microdata-attribut <div itemscope itemtype=" <h1 itemprop="name">hendershot's Coffee Bar</h1> <p itemprop="address" itemscope itemtype=" <span itemprop="street-address">1560 Oglethorpe Ave</span>, <span itemprop="locality">athens</span>, <span itemprop="region">ga</span>. </p> </div>

20

21 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

22 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

23 Canvas <canvas id="c" width="150" height="150 ></canvas>

24 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

25 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);

26 Cross-document Messaging #1 <iframe src=" 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>

27 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>

28 Cross-document Messaging

29 Geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition( function (position) { alert( position.coords.latitude, position.coords.longitude ); }, function (error){... } ) }

30 Geolocation if (navigator.geolocation) { navigator.geolocation.watchposition( function (position) { alert( position.coords.latitude, position.coords.longitude ); }, function (error){... } ) }

31 Geolocation

32 Inline editing

33 Local Storage sessionstorage För en browsersession localstorage Över flera sessioner, knutna till en viss domän

34 sessionstorage var field = document.getelementbyid("field"); if ( sessionstorage.autosave ) { } field.value = sessionstorage.autosave; setinterval(function(){ }, 1000); sessionstorage.autosave = field.value;

35 sessionstorage

36 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)" );

37 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)" );

38 Selectors API (4 kb)

39 Audio API <audio id="a" controls> <source src="elvis.mp3" /> <source src="elvis.ogg" />  </audio>

40 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(); } }

41 Audio API

42 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"'>

43 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);

44 Video API

45 Hur gör man? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" lang="sv" xml:lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="style.css"/>

46 Hur gör man? <!DOCTYPE html> <html xmlns=" lang="sv" xml:lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="style.css"/>

47 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 " /> <link rel="stylesheet" type="text/css" href="style.css"/>

48 Hur gör man? <!DOCTYPE html> <html lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta charset="iso "> <link rel="stylesheet" type="text/css" href="style.css"/>

49 Hur gör man? <!DOCTYPE html> <html lang="sv"> <head> <title>stockholms universitet: Startsida</title> <meta charset="iso "> <link rel="stylesheet" href="style.css"/>

50 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.

51 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

52 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

53 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?

54 Tolkning av nya taggar Alla de vanligaste skärmläsarna är plugins Skärmläsare klarar det som webbläsare klarar aria/ JAWS 11, Window-Eyes 7.11, SAToGO , VoiceOver Internet Explorer 8 och Firefox 3.6

55 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)

56 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

57 Exempel: JAWS

58 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.

59 Argument för HTML5 Tekniska: HTML Javascript Interoperabilitet

60 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...

61 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

62 Javascript Prestanda: QuerySelector Canvas Web Workers Web sockets WebGL Interaktiv grafik: Video Audio Canvas WebGL

63 Vare sig ni vill eller inte... Webbläsartillverkare!= Webbutvecklare Samtliga kommer byta till HTML5-parsers

64 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

65 Sökmotorer

66 Bakåtkompatibilitet En parser HTML5 måste fungera för allt gammalt innehåll Problem: Internet Explorer < 9 Fallback för HTML Javascript-funktioner

67 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

68 Internet Explorer < 9 document.createelement( nav ) Utskrift: Byt element mot div temporärt Alternativ för avslagen JS: Styla andra element Använd * istället för elementen Använd special-css i noscript-tagg

69 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; } 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.

70 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

71 Verktyg HTML5 Validator: HTML5 Outliner:

72 Källor Cross-browser-Polyfills accessibility