Christian heilmann html 5 - das web und der browser als platform

asdasd HTML5Das Web und der Browser als Platform Christian Heilmann, Mozilla

May the fourth be with you - always!

HTML5 ist die Evolution derWebentwicklung.

HTML als Evolution?

HTML(5)HTML ElementeJavaScript APIsWie entwickele ich einen HTML5kompatiblen Browser?

Arbeiten mit anstatt gegenden Browser.

Applikationen auf demServer?

Arbeitsteilung: Server undClient.

Nutzung der Infrastruktur.

HTML5 macht mobil... http://www.flickr.com/photos/mujitra/5480120811/

Was gibt uns HTML5?

Einfachere HTML Strukturen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="de"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hallo ich bin HTML!</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="magic.js"> </script></head><body> <h1>Eine Ueberschrift</h1> <p>Inhalt, eine ganze Menge</p> <p class="footer">Ich hab das tun getan!</p></body></html>

<!DOCTYPE html><html lang="de"><head> <meta charset="utf-8"> <title>Hallo ich bin HTML5 (oder HTML)</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <h1>Eine Ueberschrift</h1> <p>Inhalt, eine ganze Menge</p> <p class="footer">Ich hab das tun getan!</p></body></html>

Neue Strukturelemente

<!DOCTYPE html><html lang="de"><head> <meta charset="utf-8"> <title>Hallo ich bin HTML5 (oder HTML)</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <header><h1>Eine Ueberschrift</h1></header> <section> <p>Inhalte, eine ganze Menge</p> </section> <footer><p>Ich hab das tun getan!</p></footer></body></html>

<sec tion > <n <asid av> <hea e> < <art der> hgro icle><ma <foo up> rk> < ter> deta <tim <ﬁgc ils> < e> aptio ﬁgur n> .. e> .

Information fuer Skripte<article data-start="4" data-end="38"> <header><h1>HTML5 video</h1></header> <p><a href="http://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a> sind auf dem<code><video></code> Element basierende Filme imBrowser.</p> <iframe src="http://en.wikipedia.org/wiki/HTML5_video"></iframe></article>

Verbesserte Formulare

Required:<input required name="name">Pattern:<input pattern="[0-9]{5}" name="postleitzahl"> Firefox Webkit Operainput:valid { background:lime }input:invalid { background:red; color:white }

Multimedia

<video src="superman.ogv" controls> Das Video kann nicht abgespielt werden, bitte <a href="superman.ogv">laden sie es herunter</a>.</video>★ Steuerelemente erscheinen per Mausberührung oder Tastatur Fokus.★ Video ist mit Tastatur bedienbar★ Videodarstellung kann verändert werden.

Video events:loadstart / progress / suspend / abort / error /emptied / stalled / play / pause /loadedmetadata / loadeddate / waiting /playing / canplay / canplaythrough / seeking /seeked / timeupdate / ended / ratechange

http://www.w3.org/2010/05/video/mediaevents.html

Canvas

Die Freunde von HTML5...

Datenspeicherung http://www.flickr.com/photos/blude/2665906010/

Offline

Geolocation

SVG http://mbostock.github.com/d3/

Web Workers

Web Sockets

WebGL http://bodybrowser.googlelabs.com

Probleme mit HTML5

Alles is lesbar!

Sorgenkind Internet Explorer

Kompatibilität mitalter Technologie?

Kein CSS für unbekannteElemente im Explorer!<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style>header{color:#fff;background:#369;}</style></head><body> <header><h1>Tach!</h1></header> </body></html>

Erstellung der Elementemit JavaScript:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style>header{color:#fff;background:#369;}</style> <script>document.createElement(header);</script></head><body> <header><h1>Tach!</h1></header></body></html>

Copy + Paste Lösung http://code.google.com/p/html5shiv/

HTML5 als XML oder pernamespace.http://www.ibm.com/developerworks/xml/library/x-think45/http://www.debeterevormgever.nl/html5-ie-without-javascript/

Einfachste Lösung -doppeltes HTML :(.header,.footer,.aside,.section { display:block;}

<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"> <title>HTML5 auch fuer den IE!</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head> <body> <div class="header"><header> <h1>Eine Ueberschrift</h1> </header></div> <div class="section"><section> <p>Inhalte bis zum Abwinken</p> </section></div> <div class="footer"><footer> <p>Hallo Mama! Ich bin im Fernsehen!</p> </footer></div></body></html>

Multimedia in HTML<video src="interview.ogv" controls> <a href="interview.ogv">Video herunterladen</a></video>

Video für alle!<video controls> <source src="interview.mp4" type="video/mp4"> </source> <source src="interview.webm" type="video/webm"> </source> <source src="interview.ogv" type="video/ogg"> </source> <p>Download the <a href="interview.mp4">Video als MP4 herunterladen</a>. </p></video>

Zum Glück gibt es Firmen,die Lösungen anbieten!

Der HTML5Werkzeugkasten

http://html5boilerplate.com/

http://www.modernizr.com/

Alte Browser, neue Tricks?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

HTML5 Seiten als WebApps http://appmator.appspot.com

https://build.phonegap.com/

Ein paarinteressante Lösungen

https://mozillademos.org/demos/motivational/demo.html

https://demos.mozilla.org/en-US/#holo-mobile

Screencast of Nikebetterworld http://nikebetterworld.com/

http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor

http://scribd.com

http://diagramo.com/

http://slideshare.net

http://butterapp.org | http://popcorn.js

http://webowonder.org

Danke!Chris Heilmann @codepo8 #mozilla#html5/freenet

http://webthreads.de	287
http://mastermeli.ch	35
http://share.timetoact.de	14
http://www.mastermeli.ch	8
http://feeds.feedburner.com	5
http://static.slidesharecdn.com	3
http://www.slideshare.net	1
http://shoze.deviantart.com	1
url_unknown	1

Christian heilmann html 5 - das web und der browser als platform

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 355

Statistics

Christian heilmann html 5 - das web und der browser als platform Presentation Transcript