html5 - suniweb.se · approach •html5 är både stort, och luddigt •vi har 45 minuter på oss...
TRANSCRIPT
HTML5
Den enda versionen av HTML du behöver
Emil Stenström – Suniweb 2010
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 <meta http-equiv="Content-Type“
content="text/html; charset=UTF-8">
input: autofocus <input type=”text” autofocus>
input:
placeholder
<input type=”text” placeholder=”http://”>
style: scoped <style scoped> p { color: blue; } </style>
html: manifest <html manifest=”clock.manifest”>
iframe: sandbox <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://data-vocabulary.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/how-
to-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)"
);
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/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 ellerapplication/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 desktop-
applikationer
• 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-a-better-web
• http://www.slideshare.net/stevefaulkner/html-5-accessibility
• http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
• http://www.slideshare.net/remy.sharp/html5-js-apis
• http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/