Till Schulte-Coerne on HTML5

Wir lösen das – persönlich! HTML5 Till Schulte-Coerne | innoQ
Deutschland GmbH 1 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Inhalt Geschichte Feature Überblick Ausgewählte
Features Fazit 2 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Geschichte 1990 HTML 1995 HTML
2 1997 HTML 3.2 1998 HTML 4 1999 HTML 4.01 2000 XHTML 2001 XHTML 1.1 Photo under CC by Paul Friel 3 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Zukun ? XForms W3C WG
XHTML 2.0 Nicht abwärtskompatibel Photo under CC by James West XFrames XML Events 4 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Gegenentwurf Web Hypertext Application Technology
WG Google, Mozilla, Apple, Opera ... Ian Hickson (Sprecher) „Web Applications 1.0“ (2004) Photo under CC by Matthew Fultz 5 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Was macht das W3C? 2006
Gründung der HTML Working Group 2007 Übernahme der „Web Applications 1.0“ 2008 Erster HTML5 Working Dra 2009 wird XHTML 2 eingestellt 6 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH XHTML? XHTML5 = HTML5.to_xml 7
Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Aktueller Status 19. Oktober 2010:
„8. Working Dra “ W3C im Februar 2011: > „Recommendation“ etwa 2014 8 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH HTML5 jetzt? Ja! Aber, ...
9 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH http://www.heise.de/newsticker/meldung/W3C-warnt-vor-verfruehtem-HTML5-Einsatz-1103493.html HTML5 IT‘S COMING HTML5
ist noch unstabil! D a s W W W Ko n s o r t i u m : <!DOCTYPE html> http://modernizr.com/ Auf Kompatibilität achten Den Standard im Blick behalten Featureweise! 10 Freitag, 20. Mai 2011

Wir lösen das – persönlich! HTML5 - Features 11 Freitag,
20. Mai 2011

© 2011 innoQ Deutschland GmbH HTML5 HTML5 - (Anti-)Features CSS3
Web Workers Web Storage WebSockets Web SQL DB Geolocation SVG MathML XMLHttpRequest Server-Sent Events 12 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH + HTML 4.01 HTML5 -
Features Neue Attribute Neue Elemente „WebForms“ Browser-Spezi kationen 14 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH HTML 4.01 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <title>HTML4 Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="branding"> <h1>Der Header</h1> </div> <ul id="nav"> <li>Die Navigation</li> </ul> <div id="content"> <div id="main"> <h1>Inhalts-Überschrift</h1> <p>Irgend welcher Inhalt...</p> <p class="article-footer">Ein kleiner Footer unter dem Inhalt</p> </div> </div> <div id="sidebar"> <h2>Marginalspalte</h2> <p>Inhalt der Marginalspalte</p> </div> <div id="footer">Der Footer</div> </body> </html> 15 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH HTML5 <!DOCTYPE html> <html lang="de">
<head> <title>HTML5 Dokument</title> <meta charset="utf-8"> </head> <body> <header> <h1>Der Header</h1> </header> <nav><ul> <li>Die Navigation</li> </ul></nav> <article> <header> <h1>Inhalts-Überschrift</h1> </header> <p>Irgend welcher Inhalt...</p> <footer>Ein kleiner Footer unter dem Inhalt</footer> </article> <aside> <h1>Marginalspalte</h1> <p>Inhalt der Marginalspalte</p> </aside> <footer>Der Footer</footer> </body> </html> 16 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Strukturell: <section> <article> <hgroup> <aside>
<header> <nav> < gure> Neue Elemente Nutzbar jetzt!* http://blog.whatwg.org/supporting-new-elements-in-ie * 17 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Neue Elemente Inhaltlich: <video> <audio>
<canvas> <mathml> <svg> <embed> video 18 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Video - Formate h.264 (MPEG
LA) Ogg Theora (Open Source) ✔ ✔ ✔ ✘ ✘ (9.0) ✘ (nicht nativ) ✔ ✔ ✘ ✔ WebM (Open Source) ✘ (nicht nativ) ✔ ✔ ✘ ✔ (nicht nativ) 20 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Video <video controls> <source src="pr6.mp4"
type='video/mp4'> <source src="pr6.webm" type='video/webm'> <source src="pr6.ogv" type='video/ogg'> </video> Nutzbar jetzt! * * Mit Flash als Fallback für ältere Browser <video controls> <source src="pr6.mp4" type='video/mp4'> <source src="pr6.webm" type='video/webm'> <source src="pr6.ogv" type='video/ogg'> <embed src="player.swf" type="application/x-shockwave-flash"> </video> 21 Freitag, 20. Mai 2011

<mathml> <svg> <embed> <canvas> svg canvas 22 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Photo under CC by Cory
Doctorow Flash drawing vs. <canvas /> <svg /> & 23 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH SVG Szenengraph Pfade & Transformationen
Server- & Clientseitig Canvas Rastergra k Pixelmanipulation Nur Clientseitig Root Linie Group Circle Rect 24 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Canvas Basic save restore Transformations
scale rotate translate transform setTransform Compositing globalAlpha globalCompositeOperation Colors and styles strokeStyle fillStyle createLinearGradient createRadialGradient createPattern Focus management drawFocusRing Complex shapes beginPath closePath moveTo lineTo quadraticCurveTo bezierCurveTo arcTo rect arc fill stroke clip isPointInPath Simple shapes clearRect fillRect strokeRect Line styles lineWidth lineCap lineJoin miterLimit Shadows shadowOffsetX shadowOffsetY shadowBlur shadowColor Text font textAlign textBaseline fillText strokeText measureText Images drawImage createImageData getImageData putImageData Nutzbar jetzt! * * mit JS Erweiterungen für ältere IE Versionen 25 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH SVG Nutzbar jetzt! Raphaël http://raphaeljs.com/
gRaphaël 26 Freitag, 20. Mai 2011

<mathml> <svg> <embed> <canvas> 27 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Weitere neue Elemente <time> <ruby>
<wbr> ... <progress> <meter> <time datetime="2011-05-19 19:00"> Heute Abend </time> findet ein Vortrag über HTML5 statt. <meter min=0 max=10 value=5> 5 von 10 Punkten </time> Rindfleisch<wbr/>etikettierungs <wbr />überwachungs<wbr />aufgaben <wbr />übertragungs<wbr />gesetz 28 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH API-Spezi kationen Browser History API
Erweiterte DOM API Drag-and-Drop API Photo under CC by „Razor512“ Cross-document messaging API 29 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH + Javascript API # v1
CACHE MANIFEST index.html help.html style/default.css images/logo.png images/backgound.png NETWORK: server.cgi FALLBACK: dynamic.gif fallback.gif O line Web Applikationen <!DOCTYPE html> <html manifest="/manifest.cache"> ... </html> 30 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Neue Attribute hidden draggable spellcheck
tabindex role aria-* tabindex role aria-* 31 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH ARIA <h2 id="leftnav_label">Career Center Services</h2>
<ul title="Career Center Services" role="navigation" aria-labelledby="leftnav_label"> <li><a href="...">Career Home</a></li> <li><a href="...">Career Counseling</a></li> <li><a href="...">Pre-Health Advising</a></li> <li><a href="...">Services</a></li> <li><a href="...">Workshops</a></li> <li><a href="...">Resource Center</a></li> <li><a href="...">Question Board/FAQ</a></li> </ul> 32 Freitag, 20. Mai 2011

data-* data-* tabindex role aria-* 33 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH data-* <a class="menu" href="javascript: expMenuItem(5)">
Klick mich </a> <a href="#" class="menu" data-item-no="5"> Klick mich </a> jQuery("a.menu").click(function(){ expItem(jQuery(this).attr("data-item-no")); }); my_application.js 34 Freitag, 20. Mai 2011

data-* tabindex role aria-* 35 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH PUT + DELETE für Formulare
Formulare W3C Working Dra 24 June 2010 PUT + DELETE für Formulare W3C Working Dra 19. October 2010 W3C Working Dra 24 June 2010 http://www.w3.org/Bugs/Public/show_bug.cgi?id=10671 36 Freitag, 20. Mai 2011

© 2011 innoQ Deutschland GmbH Formulare tel search url email
datetime date month week time datetime-local number range color Neue „Input“ Typen Nutzbar jetzt! * * ohne Sternchen! <input type="..." /> 37 Freitag, 20. Mai 2011

Wir lösen das – persönlich! Fazit 39 Freitag, 20. Mai
2011

Till Schulte-Coerne on HTML5

Till Schulte-Coerne on HTML5

More Decks by Enterprise Java User Group Austria

Other Decks in Technology

Featured

Transcript