HTML5. Den kommende webstandard

Transkript

1 Den kommende webstandard

2 Hvad er HTML5?

3 Hvad er HTML5? En specifikation under udarbejdelse fra W3C

4 Hvad er HTML5? En specifikation under udarbejdelse fra W3C En række af følgespecifikationer

5 HTML5 startede uden for W3C's regi

6 HTML5 startede uden for W3C's regi er ikke kun rettet i mod visning af dokumenter, men også webapplikationer.

7 WHATWG Web Hypertext Application Technology Working Group

8 WHATWG Web Hypertext Application Technology Working Group Startede som mailingliste i 2004 af Apple, Mozilla og Opera

9 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

10 Hvad er en webapplikation? Et "program" hvor brugerfladen afvikles i browseren

11 Hvad er en webapplikation? Et "program" hvor brugerfladen afvikles i browseren Skrevet i HTML, Javascript og CSS

12 Hvad er en webapplikation?

13 Hvad er en webapplikation?

14 Hvad er en webapplikation?

15 Hvad er en webapplikation?

16 Hvad er en webapplikation? Software as a Service (SaaS)

17 Hvad er en RIA (Rich Internet Application)? Browser-baseret program skrevet med plugin-teknologi som Flash, Java og Silverlight

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

19 HTML5 berører kun rene browserteknologier (HTML+JS) - ikke plugin-teknologier - ikke CSS3 (Stylesheets)

20 Forhistorien

21

22

23 Problem: masser af dokumenter Løsning: distribueret hypertekst: HTML, HTTP, URL

24 HTML 1.0: hypertekst-dokumenter

25 HTML 1.0: hypertekst-dokumenter Men hvad hvis man vil søge i en database fra en webside?

26 HTML 2.0: formularer Bruger-inddata kan sendes tilbage til serveren

27 HTML 2.0: formularer Bruger-inddata kan sendes tilbage til serveren Databaseopslag, navigation, søgning

28 En ny spiller kommer på banen!

29 En ny spiller kommer på banen! LiveScript - script-programmering i browseren, som kan kommunikere med Netscapes applikationsserver

30 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

31 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

32 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

33 Webbet udvikler sig i rivende hast i 1990'erne Netscape skubber på med nye HTML-funktioner

34 Webbet udvikler sig i rivende hast i 1990'erne Netscape skubber på med nye HTML-funktioner Javascript udvides med nye muligheder

35 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

36 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

37 1999: Kompabiliteten er forsvundet i browserkrigen

38 1999: Kompabiliteten er forsvundet i browserkrigen En ny de-facto standard, HTML 4.01 skal forene de stridende parter

39 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

40 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

41 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

42 XHTML 2.0: Skrevet af akademikere, for akademikere

43 XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret

44 XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret Imod Javascript

45 XHTML 2.0: Skrevet af akademikere, for akademikere Dokumentorienteret Imod Javascript Begrænsede multimediemuligheder - ingen fælles renderingsstandard

46 XHTML 2.0: Udviklere og browserproducenter siger "nej tak."

47 1999: Microsoft implementerer "xmlhttprequest" for at skabe et webinterface til Outlook

48 1999: Microsoft implementerer "xmlhttprequest" for at skabe et webinterface til Outlook Ajax er opfundet!

49 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

50 Dynamisk HTML + XmlHttpRequest = desktop-ui til forveksling

51 WHATWG søsættes i 2004

52 WHATWG søsættes i 2004 W3C går i panik - og indsætter WHATWG som rormænd bag "HTML5"

53 - new kid on the block

54 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags

55 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video

56 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas

57 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer

58 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets

59 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets Geolokation

60 HTML5 = dokumenter + webapplikationer Nyhederne: Nye "semantiske" HTML-tags Video 2D-grafik: canvas Offline-webapplikationer Realtidskommunikation: websockets Geolokation Bedre formularer

61 HTML5-underskriften: <!DOCTYPE html> i stedet for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

62 "Semantisk" HTML <article> <header> <h1>a syndicated post</h1> </header> <p>lorem ipsum blah blah </p> </article>

63 Video <video src="movie.ogg" controls="controls"> </video>

64 Video Misteltenen: Formater og rettigheder

65 Video Misteltenen: Formater og rettigheder Firefox: Ogg Theora + WebM (+ H.264-plugin fra Microsoft) Chrome: WebM (+ H.264-plugin fra Microsoft) Internet Explorer: H gæster (WebM-plugin fra Google) Safari: H.264 (+ WebM-plugin fra Google)

66 Video Misteltenen: Formater og rettigheder Resultat: Ingen fælles standard (codec) i en overskuelig fremtid

67 Video Misteltenen: Formater og rettigheder Resultat: Ingen fælles standard (codec) i en overskuelig fremtid + Transcoding er dyrt i processorkraft og diskplads

68 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

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

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

71 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

72 Offline-applikationer

73 Offline-applikationer Minder meget om Google Gears-modellen

74 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

75 Offline-applikationer: Appcache Gemmer resurser lokalt: HTML, JS, CSS, PNG... Manifest-fil skelner mellem lokalt indhold, net-indhold og fallback

76 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

77 Offline-applikationer: Appcache <!DOCTYPE HTML> <html manifest="manifest.php">... CACHE MANIFEST # Husk et versionsnr.!! CACHE: /index.html NETWORK: search.php FALLBACK: / /offline.html

78 Offline-applikationer: localstorage Globalt JS-objekt med key-value-model <script>... localstorage["nøgle"] = værdi_som_tekst;... </script>

79 Offline-applikationer: localstorage Bundet op på subdomænet 5-10 MB pr. subdomæne pt. Persistent (vedvarende)

80 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

81 Offline-applikationer: indexeddb Chrome + FF4b + IE med ActiveX-plugin Endnu tidlige dage

82 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

83 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

84 Websockets

85 Websockets eller "browser-sockets" 2-vejs realtidskommunikation mellem browser og server fra Javascript Uden HTTP-headers - minimalt overhead

86 Websockets fjerner behovet for "long polling," "COMET," Flash, Silverlight, Java, iframes

87 Websockets = en ny protokol "ws://..." + Javascript API

88 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

89 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); };

90 Websockets Protokol endnu ikke færdig (udkast til april 2011) Stor skepsis i webservice-miljøet

91 Geolokation

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

93 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); }

94 Bedre formularer <input type="date">

95 - hvornår?

96 Ian Hickson: Deadline i 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

97 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...«

98 Interoperabilitet hvornår...? Test af hjertens lyst - men hold på hesten...

99 Resurser

100 Dive into HTML5 Html5 Rocks Apple.com: HTML5

101 HTML5-revolutionen Google om HTML5 Offline-apps med HTML5 Websockets

102 Diskussionsrunde!