D ie Z ukunft m it H TM L5

Größe: px

Ab Seite anzeigen:

Download "D ie Z ukunft m it H TM L5"

Andreas Michel
vor 8 Jahren
Abrufe

1 D ie Z ukunft m it H TM L5 Folien unter 1

2 HTML5-Beispiele getestet mit Firefox

3 Sprecher Hauptschwerpunkte Mehrsprachige Daten im Web (Internationalisierung, Lokalisierung) Metadaten Von 2005 Februar 2009 Mitarbeiter beim W3C, Internationalization Activity, in Japan. Seit März 2009 Professor an der FH Potsdam im Bereich Informationswissenschaften Leiter des des W3C (verankert an der FH Potsdam) 3

Internationalization Activity, in Japan.

4 Geschichte 4

5 Der Plan HTML 4.01 (1999) XHTML 1.0 (2000) XML im Browser XHTML 2.0 XHTML 2.0 CURIE XFrames HLink XHTML+MathML+SVG Profile XHTML Modularization 1.0 Second Edition 5

6 Die Realität HTML 4.01 (1999) XHTML 1.0 (2000) Warum gestoppt? XML im Browser XHTML 2.0 XHTML 2.0 CURIE XFrames HLink XHTML+MathML+SVG Profile XHTML Modularization 1.0 Second Edition 6

7 Hintergrund: Das heutige Web Just 4.13% of Web s Code is Valid Vgl. MAMA: What is the Web made of? 7

8 Hintergrund: Drakonische Fehlerbehandlung in XML <b>a<i>b</b>c</i> im Browser: 8

9 Just 4.13% of Web s Code is Valid

10 Just 4.13% of Web s Code is Valid Nur XHTML wäre Revolution! Charles Darwin Che Guevara HTML5 ist Evolution

11 Geschichte HTML5 Design Prinzipien 11

12 HTML5 Design Principle: Support Existing Content HTML5 12

13 HTML5 Design Principle: Degrade Gracefully <canvas...> <p>sorry, but your browser does not support canvas :( </p> </canvas> 13

14 DOM as Basis Unterschiede HTML5 HTML 4 Markupvokabular User agents vs. authors Keine Trennung Syntax+Parsing Nur Syntax MathML+SVG möglich Verschiedene Elem. & Attr. hinzugefügt geändert gelöscht Vgl. 14

15 <b>a<i>b</b>c</i> HTML5 Design Principle Interoperability: u.a. Handle errors consistently 15

16 <!doctype html> <html> <head> <meta charset="utf-8"> <title>example doc</title> </head> <body> <p>example paragraph</p> </body></html> HTML5 Design Principle: Dom Consistency... <?xml version="1.0"encoding="utf-8"?> <html xmlns=" <head> <title>example document</title> </head> <body> <p>example paragraph</p> </body></html> Verschiedene Serialisierungen Ein Document Object Model 16

0"encoding="utf-8"?> <html xmlns="http://www.w3.

17 ... damit z.b. das überall funktioniert:... <link type="text/css" href=" rel="stylesheet" /> <script type="text/javascript" src=" <div type="text" id="datepicker"></div> jquery-datepicker.html 17

all.css" rel="stylesheet" /> <script type="text/javascript"

18 HTML5 Design Principle: Priority of Constituencies Priorität Nutzer Autoren von Webseiten (Implementierer) von Browsern Standards-Entwickler Theoretische Puristen Grund für Willful violations anderer Technologien vgl. 18

Standards-Entwickler Theoretische Puristen Grund für Willful

19 Geschichte HTML5 Design Prinzipien HTML5 in a Nutshell 19

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

HTML Syntax XML Syntax Beschreibung von Parsing-Regeln für

21 HTML5 Serialisierungen <!doctype html> <html> <head> <meta charset="utf-8"> <title>example doc</title> </head> <body>... </html> <?xml version="1.0"encoding="utf-8"?> <html xmlns=" <head> <title>example document</title> </head> <body>... </html> Mime-Typ text/html Namensraumdeklaration möglich Andere Namensräume verboten XML-Mime-Typ Namensraumdeklaration erforderlich Andere Namensräume möglich 21

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

23 Vgl. audio.html Neue Features: Natives Audio / Video <audio src="mc202example.ogg" controls autoplay></audio> Vgl. video.html <video src="mirko_the_artist-med.ogg" controls> </video> Beispiele adaptiert von 23

24 Neue Features: Grafiken mit SVG <svg xmlns:svg=" xmlns=" viewbox=" " width="200px" height="100px"> Vgl. svg.xml <circle cx="50" cy="50" r="30" style="stroke:none; fill:#ff0000;"/>... <rect x="60" y="20" height="60" width="60" style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" /> </svg> Beispiele adaptiert von 24

25 Neue Features: Grafiken mit Canvas <canvas> element <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> canvas API in action: var canvas = document.getelementbyid("simplecanvas"); if (canvas.getcontext) { var ctx =canvas.getcontext("2d"); ctx.fillstyle = "#ff0000"; ctx.beginpath();... Beispiele adaptiert von Vgl.canvas.html 25

26 Weitere Features (teilweise nicht in HTML5 selbst definiert) Formularmöglichkeiten (vgl. datepicker) Geolocation API Webstorage API Drag & drop API und draggable Attribut Zugriff auf Browserverlauf... 26

27 Geschichte HTML5 Design Prinzipien HTML5 in a Nutshell Offene Fragen 27

28 Aufbau von Webadressen? RDF / HTTP: URI = RFC 3986 Willful violation Von RFC 3986 HTML5 URL 28

29 Wie integriert man Daten in Webseiten? RDFa Microformats HTML5 Microdata 29

30 Wie beschreibt man Typen von Links? HTTP link header + Registry HTML5 link relations + Erweiterungen 30

31 Wie erreicht man dezentralisierte Erweiterbarkeit? XML, RDF: XML Namensräume HTML5: noch gar nicht 31

32 HTML5: Aufgaben der Zukunft Eine Form von Webadressen Einheitliche Microsyntax Gemeinsame Linktypen Dezentralisierte Erweiterbarkeit 32

33 Geschichte HTML5 Design Prinzipien HTML5 in a Nutshell Offene Fragen Referenzen 33

34 Verschiedene Lesergruppen Implementer Alle: HTML5 Spezifikation Design Prinzipien Unterschiede zu HTML4 Unterschiede zu XHTML g/html-vs-xhtml/ (deutsche Version) 34

35 HTML5 was soll man lesen? Dokumentautoren noch wenig von Mark Pilgrim Was kann mein Browser? Tests unter Validieren mit genutzt z.b. vom W3C-Validator. Beispiel: 35

36 HTML5 wie beitragen? lesen (zumindest Teile davon...) An Diskussionen teilnehmen, Position beziehen This is your web help fixing it! 36

37 Vielen Dank für Ihre Aufmerksamkeit! 37

Ähnliche Dokumente

HTML5. W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de

HTML5. W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de HTML5 W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de Hinweis "Teaching the Web" Event 15.10.2009, FH Potsdam Homepage http://www.w3c.de/events/2009/office-opening