html5 - presentation at w3c-tag 2009
DESCRIPTION
Presentation of HTML5 (history, context, current state) at W3C-Tag 2009TRANSCRIPT
![Page 2: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/2.jpg)
Hinweis – "Teaching the Web" Event
15.10.2009, FH PotsdamHomepage http://www.w3c.de/Events/2009/office-opening
Agendahttp://www.w3c.de/Events/2009/teaching-web-flyer.pdf Registrierung http://www.w3c.de/Events/2009/office-opening-registration.de.php
![Page 3: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/3.jpg)
Beispieldateien unterhttp://www.w3c.de/Events/2009/w3ctag09-html5/
HTML5-Beispiele getestet mit Firefox 3.5.3
![Page 4: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/4.jpg)
Geschichte
![Page 5: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/5.jpg)
Der Plan
XHTML 1.0 (2000)
XHTML 2.0XHTML 2.0CURIEXFramesHLinkXHTML+MathML+SVG ProfileXHTML Modularization 1.0 Second Edition
XML im Browser
HTML 4.01 (1999)
![Page 6: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/6.jpg)
Die Realität
XHTML 1.0 (2000)
XHTML 2.0XHTML 2.0CURIEXFramesHLinkXHTML+MathML+SVG ProfileXHTML Modularization 1.0 Second Edition
HTML5
HTML 4.01 (1999)
Warum gestoppt?
![Page 7: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/7.jpg)
Hintergrund:Das heutige Web
Vgl. „MAMA: What is the Web made of?“http://dev.opera.com/articles/view/mama/
Just 4.13% of Web’s Code is Valid
![Page 8: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/8.jpg)
Hintergrund:Drakonische Fehlerbehandlung in XML
<b>a<i>b</b>c</i> im Browser:
![Page 9: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/9.jpg)
Just 4.13% of Web’s Code is Valid
![Page 10: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/10.jpg)
Nur XHTML wäre Revolution!
HTML5 ist Evolution
Just 4.13% of Web’s Code is Valid
Che Guevara
Charles Darwin
![Page 11: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/11.jpg)
GeschichteHTML5 Design Prinzipienhttp://www.w3.org/TR/html-design-principles/
![Page 12: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/12.jpg)
HTML5 Design Principle: „Support Existing Content“
HTML5
![Page 13: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/13.jpg)
HTML5 Design Principle: „Degrade gracefully“
<canvas ...><p>Sorry, but your browser does not support canvas :( </p></canvas>
![Page 14: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/14.jpg)
HTML5 Design Principle:Interoperability: u.a. „Handle errors“
<b>a<i>b</b>c</i>
![Page 15: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/15.jpg)
HTML5 Design Principle:„Dom Consistency“
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Example doc</title> </head> <body> <p>Example paragraph</p> </body></html>
<?xml version="1.0"encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body></html>
Verschiedene Serialisierungen
Ein „Document Object Model“
![Page 16: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/16.jpg)
HTML5 Design Principle:„Priority of Constituencies“
NutzerAutoren von Webseiten(Implementierer) von BrowsernStandards-Entwickler„Theoretische Puristen“
Priorität
Grund für „Willful violations“ anderer Technologienvgl. http://blog.whatwg.org/response-to-notes-on-html-5
![Page 17: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/17.jpg)
GeschichteHTML5 Design PrinzipienHTML5 in a Nutshell
![Page 18: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/18.jpg)
HTML5● HTML5: „A vocabulary and associated APIs for
HTML and XHTML“● Ein Vokabular, 2 Serialisierungen
● Dom im Zentrum● HTML Syntax● XML Syntax
● Beschreibung von Parsing-Regeln für einen DOM (inkl. Fehlerbehandlung)
● Definition von DOM-APIs
![Page 19: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/19.jpg)
HTML5 Serialisierungen: HTML vs. XML<!doctype html><html> <head> <meta charset="UTF-8"> <title>Example doc</title> </head> <body> ... </html>
<?xml version="1.0"encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> ... </html>
Mime-Typ text/htmlNamensraumdeklaration möglichAndere Namensräume verboten...
XML-Mime-TypNamensraumdeklaration erforderlichAndere Namensräume möglich...
![Page 20: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/20.jpg)
Auszug: Syntaxvarianten und Fehlerbehandlung
● Leere Elemente <img .../> <img ...>● Attributsminimierung <input>● Groß- oder Kleinschreibung <html> <HTML>● Attribute ohne Anführungszeichen <img scr=... >● Elementnesting <b>a<i>b</b>c</i>
![Page 21: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/21.jpg)
Unterschiede HTML5 → HTML 4● DOM as Basis● User agents vs. authors● Syntax+Parsing● MathML+SVG möglich● Verschiedene Elem. &
Attr.● hinzugefügt● geändert ● gelöscht
● Markupvokabular● Keine Trennung● Nur Syntax
Vgl. http://www.w3.org/TR/html5-diff/
![Page 22: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/22.jpg)
Neue Features: Natives Audio / Video
Vgl. audio.html<audio src="Mc202example.ogg" controls autoplay></audio>Vgl. video.html <video src="Mirko_The_Artist-med.ogg"controls> </video>Beispiele adaptiert vonhttp://www.alistapart.com/articles/get-ready-for-html-5/
![Page 23: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/23.jpg)
Neue Features: Grafiken mit SVG <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="50" cy="50" r="30" style="stroke:none; fill:#ff0000;"/> <g transform="translate(100, 20) scale(1.65)"> <polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11" style="stroke:none; fill:#0000ff;" /> </g> <rect x="60" y="20" height="60" width="60" style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" /> </svg>
Vgl. svg.xml
Beispiel adaptiert vonhttp://www.alistapart.com/articles/get-ready-for-html-5/
![Page 24: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/24.jpg)
Neue Features: Grafiken mit Canvas
<canvas width="200" height="100" id="simpleCanvas" style="border: 1px solid black"><p>Sorry, but your browser does not support<code><canvas></code> :(</p></canvas>
var canvas = document.getElementById("simpleCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ff0000"; ctx.beginPath(); ctx.arc(50, 50, 30, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill();...
<canvas> element
canvas API in action:
Vgl. canvas.html
Beispiel adaptiert vonhttp://www.alistapart.com/articles/get-ready-for-html-5/
![Page 25: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/25.jpg)
Neue Elemente● section● article● aside● hgroup● header● footer● nav● dialog ● ...
![Page 26: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/26.jpg)
Neue Attribute● Beispiele
● charset am <meta> Element● pattern am <input> Element
● ARIA: Basis für Barrierefreiheit● ARIA role● ARIA aria-* Attribute
![Page 27: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/27.jpg)
Neue APIs● 2D drawing API für <canvas>● APIs für <video> und <audio>● Drag & drop API und draggable Attribut● API zum Zugriff auf Browserverlauf● Geolocation API (nicht in HTML5 selbst
definiert)● ...
![Page 28: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/28.jpg)
GeschichteHTML5 Design PrinzipienHTML5 in a NutshellDas Web der ...
![Page 29: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/29.jpg)
HTML5: Das Web der Menschen ...
![Page 30: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/30.jpg)
... und das Web der Daten?
Wie repräsentiert man Webadressen?
RDF / HTTP: URI = RFC 3986
HTML5URL
„Willful violation“Von RFC 3986
![Page 31: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/31.jpg)
... und das Web der Daten?
Wie integriert man Daten in Webseiten?
RDFa HTML5Microdata
Microformats
![Page 32: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/32.jpg)
... und das Web der Daten?
Wie beschreibt man Typen von Links?
HTTPlink header +
Registry
HTML5 link relations + Erweiterungen
![Page 33: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/33.jpg)
... und das Web der Daten?
Wie erreicht mandezentralisierte Erweiterbarkeit?
XML, RDF: XML Namensräume
HTML5: noch gar nicht
![Page 34: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/34.jpg)
Vom Web der Menschen zumWeb der Daten:
Aufgaben der Zukunft
Eine Form von WebadressenEinheitliche MicrosyntaxGemeinsame Linktypen
Dezentralisierte Erweiterbarkeit
![Page 35: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/35.jpg)
GeschichteHTML5 Design PrinzipienHTML5 in a NutshellDas Web der ...Referenzen
![Page 36: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/36.jpg)
Verschiedene Lesergruppen● Implementer
● HTML5 Spezifikation http://www.w3.org/TR/html5/ ● Design Prinzipien http://www.w3.org/TR/html-design-
principles/● Alle:
● Unterschiede zu HTML4 http://www.w3.org/TR/html5-diff/
● Unterschiede zu XHTML 1.0 http://wiki.whatwg.org/wiki/HTML_vs._XHTML http://meiert.com/de/publications/translations/whatwg.org/html-vs-xhtml/ (deutsche Version)
![Page 37: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/37.jpg)
HTML5: Was soll man lesen?● Dokumentautoren – noch wenig
http://diveintohtml5.org/ von Mark Pilgrim● Was kann mein Browser? Tests unter
http://diveintohtml5.org/detect.htm ● Validieren mit
http://about.validator.nu/htmlparser/ , Teil des W3C-Validators. Beispiel: http://tinyurl.com/obw875
![Page 38: HTML5 - presentation at W3C-Tag 2009](https://reader033.vdocuments.site/reader033/viewer/2022052900/555eac02d8b42a902e8b5060/html5/thumbnails/38.jpg)
Vielen Dank für Ihre Aufmerksamkeit!