Den kommende webstandard
Hvad er HTML5?
Hvad er HTML5? En specifikation under udarbejdelse fra W3C
Hvad er HTML5? En specifikation under udarbejdelse fra W3C En række af følgespecifikationer
HTML5 startede uden for W3C's regi
HTML5 startede uden for W3C's regi er ikke kun rettet i mod visning af dokumenter, men også webapplikationer.
WHATWG Web Hypertext Application Technology Working Group
WHATWG Web Hypertext Application Technology Working Group Startede som mailingliste i 2004 af Apple, Mozilla og Opera
WHATWG Web Hypertext Application Technology Working Group Startede som mailingliste i 2004 af Apple, Mozilla og Opera "The new technologies being developed by the W3C and IETF can contribute to Web Applications, but these are often designed to address other needs and only consider Web Applications in a peripheral way. The Web Hypertext Applications Technology working group therefore intends to address the need for one coherent development environment for Web Applications." WHAT open mailing list announcement Friday, June 4th 2004
Hvad er en webapplikation? Et "program" hvor brugerfladen afvikles i browseren
Hvad er en webapplikation? Et "program" hvor brugerfladen afvikles i browseren Skrevet i HTML, Javascript og CSS
Hvad er en webapplikation?
Hvad er en webapplikation?
Hvad er en webapplikation?
Hvad er en webapplikation?
Hvad er en webapplikation? Software as a Service (SaaS)
Hvad er en RIA (Rich Internet Application)? Browser-baseret program skrevet med plugin-teknologi som Flash, Java og Silverlight
Hvad er en RIA (Rich Internet Application)? Browser-baseret program skrevet med plugin-teknologi som Flash, Java og Silverlight RIA er også webapplikationer (ifølge Wikipedia)
HTML5 berører kun rene browserteknologier (HTML+JS) - ikke plugin-teknologier - ikke CSS3 (Stylesheets)
Forhistorien
Problem: masser af dokumenter Løsning: distribueret hypertekst: HTML, HTTP, URL
HTML 1.0: hypertekst-dokumenter
HTML 1.0: hypertekst-dokumenter Men hvad hvis man vil søge i en database fra en webside?
HTML 2.0: formularer Bruger-inddata kan sendes tilbage til serveren
HTML 2.0: formularer Bruger-inddata kan sendes tilbage til serveren Databaseopslag, navigation, søgning
En ny spiller kommer på banen!
En ny spiller kommer på banen! LiveScript - script-programmering i browseren, som kan kommunikere med Netscapes applikationsserver
En ny spiller kommer på banen! LiveScript - script-programmering i browseren, som kan kommunikere med Netscapes applikationsserver Sun har opfundet et ny platformsuafhængigt sprog med navnet Java
En ny spiller kommer på banen! LiveScript - script-programmering i browseren, som kan kommunikere med Netscapes applikationsserver Sun har opfundet et ny platformsuafhængigt sprog med navnet Java LiveScript omdøbes JavaScript
En ny spiller kommer på banen! LiveScript - script-programmering i browseren, som kan kommunikere med Netscapes applikationsserver Sun har opfundet et ny platformsuafhængigt sprog med navnet Java LiveScript omdøbes JavaScript Websider bliver levende
Webbet udvikler sig i rivende hast i 1990'erne Netscape skubber på med nye HTML-funktioner
Webbet udvikler sig i rivende hast i 1990'erne Netscape skubber på med nye HTML-funktioner Javascript udvides med nye muligheder
Webbet udvikler sig i rivende hast i 1990'erne Netscape skubber på med nye HTML-funktioner Javascript udvides med nye muligheder Bill Gates opdager www og Microsoft blander sig i dansen
Resultatet: Omkring 1999 må man udvikle tre - fire udgaver af samme website: én til NS4, én til IE4, én til NS3 og én til resten
1999: Kompabiliteten er forsvundet i browserkrigen
1999: Kompabiliteten er forsvundet i browserkrigen En ny de-facto standard, HTML 4.01 skal forene de stridende parter
1999: Kompabiliteten er forsvundet i browserkrigen En ny de-facto standard, HTML 4.01 skal forene de stridende parter XML bliver opfundet og udråbes som løsningen på alle problemer
1999: Kompabiliteten er forsvundet i browserkrigen En ny de-facto standard, HTML 4.01 skal forene de stridende parter XML bliver opfundet og udråbes som løsningen på alle problemer HTML 4.01 pakkes ind i XML og bliver til XHTML 1.0
1999: Kompabiliteten er forsvundet i browserkrigen En ny de-facto standard, HTML 4.01 skal forene de stridende parter XML bliver opfundet og udråbes som løsningen på alle problemer HTML 4.01 pakkes ind i XML og bliver til XHTML 1.0 En ny specifikation skal føre webbet ind i paradis
XHTML 2.0: Skrevet af akademikere, for akademikere
XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret
XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret Imod Javascript
XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret Imod Javascript Begrænsede multimediemuligheder - ingen fælles renderingsstandard
XHTML 2.0: Udviklere og browserproducenter siger "nej tak."
1999: Microsoft implementerer "xmlhttprequest" for at skabe et webinterface til Outlook
1999: Microsoft implementerer "xmlhttprequest" for at skabe et webinterface til Outlook Ajax er opfundet!
1999: Microsoft implementerer "xmlhttprequest" for at skabe et webinterface til Outlook Ajax er opfundet! Mozilla følger efter i slutningen af 2000, Safari i 2004, Opera i 2005
Dynamisk HTML + XmlHttpRequest = desktop-ui til forveksling
WHATWG søsættes i 2004
WHATWG søsættes i 2004 W3C går i panik - og indsætter WHATWG som rormænd bag "HTML5"
- new kid on the block
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets Geolokation
HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets Geolokation Bedre formularer
HTML5-underskriften: <!DOCTYPE html> i stedet for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
"Semantisk" HTML <article> <header> <h1>a syndicated post</h1> </header> <p>lorem ipsum blah blah </p> </article>
Video <video src="movie.ogg" controls="controls"> </video>
Video Misteltenen: Formater og rettigheder
Video Misteltenen: Formater og rettigheder Firefox: Ogg Theora + WebM (+ H.264-plugin fra Microsoft) Chrome: WebM (+ H.264-plugin fra Microsoft) Internet Explorer: H.264 + gæster (WebM-plugin fra Google) Safari: H.264 (+ WebM-plugin fra Google)
Video Misteltenen: Formater og rettigheder Resultat: Ingen fælles standard (codec) i en overskuelig fremtid
Video Misteltenen: Formater og rettigheder Resultat: Ingen fælles standard (codec) i en overskuelig fremtid + Transcoding er dyrt i processorkraft og diskplads
Video Misteltenen: Formater og rettigheder Resultat: Ingen fælles standard (codec) i en overskuelig fremtid + Transcoding er dyrt i processorkraft og diskplads = Flash rules! - indtil videre
Canvas: 2D-grafik i browseren <canvas id="b" width="300" height="225"></canvas> function draw_b() { var b_canvas = document.getelementbyid("b"); var b_context = b_canvas.getcontext("2d"); b_context.fillrect(50, 25, 150, 100); }
Canvas: 2D-grafik i browseren 2D-programmering som i Java,.Net, Gtk osv... Inklusiv avancerede faciliteter som alpha-blending mv. Men ikke som OpenGL, DirectX...
Canvas: 2D-grafik i browseren 2D-programmering som i Java,.Net, Gtk osv... Inklusiv avancerede faciliteter som alpha-blending mv. Men ikke som OpenGL, DirectX... Eksempel: Coulisse
Offline-applikationer
Offline-applikationer Minder meget om Google Gears-modellen
Offline-applikationer Minder meget om Google Gears-modellen To dele: Appcache: "lokal webserver" localstorage: lokalt lager efter en key-value-model Måske også indexeddb: indekseret objekt-db
Offline-applikationer: Appcache Gemmer resurser lokalt: HTML, JS, CSS, PNG... Manifest-fil skelner mellem lokalt indhold, net-indhold og fallback
Offline-applikationer: Appcache Offline-mode: Javascript + localstorage Mulighed for at afvikle UI og gemme data lokalt Synkronisering må man selv klare - men mon ikke JQuery mv. kan hjælpe i fremtiden
Offline-applikationer: Appcache <!DOCTYPE HTML> <html manifest="manifest.php">... CACHE MANIFEST # Husk et versionsnr.!! CACHE: /index.html NETWORK: search.php FALLBACK: / /offline.html
Offline-applikationer: localstorage Globalt JS-objekt med key-value-model <script>... localstorage["nøgle"] = værdi_som_tekst;... </script>
Offline-applikationer: localstorage Bundet op på subdomænet 5-10 MB pr. subdomæne pt. Persistent (vedvarende)
Offline-applikationer: localstorage Ikke ligesom cookies: Lokalt via JS, ingen HTTP push-pull Struktureret med nøgler - intet behov for tricky Javascriptpakning og udfoldning Men stadig kun tekst - man må selv huske at konvertere til int osv., f.eks. via JSON
Offline-applikationer: indexeddb Chrome + FF4b + IE med ActiveX-plugin Endnu tidlige dage
var db = indexeddb.open('books', 'Book store', false); if (db.version!== '1.0') { var olddb = indexeddb.open('books', 'Book store'); olddb.createobjectstore('books', 'isbn'); olddb.createindex('bookauthor', 'books', 'author', false); olddb.setversion("1.0"); } // db.version === "1.0"; var index = db.openindex('bookauthor'); var matching = index.get('fred'); HTML5 Offline-applikationer: indexeddb synkron model
var db; var dbrequest = indexeddb.open('books', 'Book store'); dbrequest.onsuccess = function(event) { db = event.result; if (db.version!= "1.0") { var versionrequest = db.setversion("1.0"); versionrequest.ontimeout = function(event) { throw new Error("timeout trying to set version to 1.0"); HTML5 Offline-applikationer: indexeddb asynkron model med callbacks
Websockets
Websockets eller "browser-sockets" 2-vejs realtidskommunikation mellem browser og server fra Javascript Uden HTTP-headers - minimalt overhead
Websockets fjerner behovet for "long polling," "COMET," Flash, Silverlight, Java, iframes
Websockets = en ny protokol "ws://..." + Javascript API
Websockets Anvendelsesmuligheder: Instant messaging, realtidsovervågning osv. Kan eliminere noget af behovet for middleware: XML fra nettet -> server -> browser, som transformerer XML til brugerdata i UI
Websockets function init(){ var host = "ws://localhost:12345"; try{ socket = new WebSocket(host); log('websocket - status '+socket.readystate); socket.onopen = function(msg){ log("welcome - status "+this.readystate); }; socket.onmessage = function(msg){ log("received: "+msg.data); }; socket.onclose = function(msg){ log("disconnected - status "+this.readystate); };
Websockets Protokol endnu ikke færdig (udkast til april 2011) Stor skepsis i webservice-miljøet
Geolokation
Geolokation er her allerede! Foursquare osv. Ikke kun på GPS-enheder - Wifi klarer det fint! (sammenparing af MAC-adresser og GPS-data via "wardriving" - gav Google tæv i Tyskland og Sydkorea)
Geolokation navigator.geolocation.getcurrentposition(function(position) { do_something(position.coords.latitude, position.coords.longitude); }); Asynkront kald med callback: function do_something(breddegrad, laengdegrad) { alert("din position er sådan ca.: " + breddegrad + ", " + laengdegrad); }
Bedre formularer <input type="date">
- hvornår?
Ian Hickson: Deadline i 2022 - men færdig i 2012»Problemet lige nu er, at der allerede er meget begejstring for HTML5, men at det er lidt for tidligt at rulle det ud, fordi vi så vil løbe ind i problemer med interoperabilitet...«philippe Le Hegaret, W3C-boss
Forrester Research:»Usammenhængende implementeringer af udkastet til HTML5- specifikationen og umodne værktøjer gør det til et stor udfordring at skrive HTML5-programmer, der fungerer ensartet på tværs af styresystemer og browsere...«
Interoperabilitet hvornår...? Test af hjertens lyst - men hold på hesten...
Resurser
Dive into HTML5 http://diveintohtml5.org/ Html5 Rocks http://www.html5rocks.com/ Apple.com: HTML5 http://www.apple.com/html5/
HTML5-revolutionen Google om HTML5 Offline-apps med HTML5 Websockets
Diskussionsrunde!