asdasd             HTML5Das Web und der Browser als Platform         Christian Heilmann, Mozilla
<chris lang="frenglisch"/>
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 htt...
<!DOCTYPE html><html lang="de"><head>  <meta charset="utf-8">  <title>Hallo ich bin HTML5 (oder HTML)</title>  <link rel="...
Neue Strukturelemente
<!DOCTYPE html><html lang="de"><head>  <meta charset="utf-8">  <title>Hallo ich bin HTML5 (oder HTML)</title>  <link rel="...
<sec       tion            > <n      <asid      av> <hea       e> <       <art      der>       hgro       icle><ma        ...
Information fuer Skripte<article data-start="4" data-end="38">  <header><h1>HTML5 video</h1></header>  <p><a href="http://...
Verbesserte Formulare
Required:<input required name="name">Pattern:<input pattern="[0-9]{5}" name="postleitzahl">    Firefox                Webk...
Multimedia
<video src="superman.ogv" controls>  Das Video kann nicht abgespielt werden, bitte  <a href="superman.ogv">laden sie es he...
Video events:loadstart / progress / suspend / abort / error /emptied / stalled / play / pause /loadedmetadata / loadeddate...
http://www.w3.org/2010/05/video/mediaevents.html
Canvas
Die Freunde von HTML5...
Datenspeicherung                   http://www.flickr.com/photos/blude/2665906010/
Offline
CSS3
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{c...
Erstellung der Elementemit JavaScript:<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <style>header{color:#...
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/ht...
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="styl...
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" ty...
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
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platform
Upcoming SlideShare
Loading in...5
×

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

7,260

Published on

Keynote at the jax.de Java Conference 2011 die so zeigt was man mit HTML5 und anderen neuen Technologien so alles anstellen kann.

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,260
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. asdasd HTML5Das Web und der Browser als Platform Christian Heilmann, Mozilla
  2. 2. <chris lang="frenglisch"/>
  3. 3. May the fourth be with you - always!
  4. 4. HTML5 ist die Evolution derWebentwicklung.
  5. 5. HTML als Evolution?
  6. 6. HTML(5)HTML ElementeJavaScript APIsWie entwickele ich einen HTML5kompatiblen Browser?
  7. 7. Arbeiten mit anstatt gegenden Browser.
  8. 8. Applikationen auf demServer?
  9. 9. Arbeitsteilung: Server undClient.
  10. 10. Nutzung der Infrastruktur.
  11. 11. HTML5 macht mobil... http://www.flickr.com/photos/mujitra/5480120811/
  12. 12. Was gibt uns HTML5?
  13. 13. Einfachere HTML Strukturen
  14. 14. <!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>
  15. 15. <!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>
  16. 16. Neue Strukturelemente
  17. 17. <!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>
  18. 18. <sec tion > <n <asid av> <hea e> < <art der> hgro icle><ma <foo up> rk> < ter> deta <tim <figc ils> < e> aptio figur n> .. e> .
  19. 19. 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>&lt;video&gt;</code> Element basierende Filme imBrowser.</p> <iframe src="http://en.wikipedia.org/wiki/HTML5_video"></iframe></article>
  20. 20. Verbesserte Formulare
  21. 21. 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 }
  22. 22. Multimedia
  23. 23. <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.
  24. 24. Video events:loadstart / progress / suspend / abort / error /emptied / stalled / play / pause /loadedmetadata / loadeddate / waiting /playing / canplay / canplaythrough / seeking /seeked / timeupdate / ended / ratechange
  25. 25. http://www.w3.org/2010/05/video/mediaevents.html
  26. 26. Canvas
  27. 27. Die Freunde von HTML5...
  28. 28. Datenspeicherung http://www.flickr.com/photos/blude/2665906010/
  29. 29. Offline
  30. 30. CSS3
  31. 31. Geolocation
  32. 32. SVG http://mbostock.github.com/d3/
  33. 33. Web Workers
  34. 34. Web Sockets
  35. 35. WebGL http://bodybrowser.googlelabs.com
  36. 36. Probleme mit HTML5
  37. 37. Alles is lesbar!
  38. 38. Sorgenkind Internet Explorer
  39. 39. Kompatibilität mitalter Technologie?
  40. 40. 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> <!-- nix weiss auf blau! --></body></html>
  41. 41. 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>
  42. 42. Copy + Paste Lösung http://code.google.com/p/html5shiv/
  43. 43. HTML5 als XML oder pernamespace.http://www.ibm.com/developerworks/xml/library/x-think45/http://www.debeterevormgever.nl/html5-ie-without-javascript/
  44. 44. Einfachste Lösung -doppeltes HTML :(.header,.footer,.aside,.section { display:block;}
  45. 45. <!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>
  46. 46. Multimedia in HTML<video src="interview.ogv" controls> <a href="interview.ogv">Video herunterladen</a></video>
  47. 47. 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>
  48. 48. Zum Glück gibt es Firmen,die Lösungen anbieten!
  49. 49. Der HTML5Werkzeugkasten
  50. 50. http://html5boilerplate.com/
  51. 51. http://www.modernizr.com/
  52. 52. Alte Browser, neue Tricks?
  53. 53. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  54. 54. HTML5 Seiten als WebApps http://appmator.appspot.com
  55. 55. https://build.phonegap.com/
  56. 56. Ein paarinteressante Lösungen
  57. 57. https://mozillademos.org/demos/motivational/demo.html
  58. 58. https://demos.mozilla.org/en-US/#holo-mobile
  59. 59. Screencast of Nikebetterworld http://nikebetterworld.com/
  60. 60. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor
  61. 61. http://scribd.com
  62. 62. http://diagramo.com/
  63. 63. http://slideshare.net
  64. 64. http://butterapp.org | http://popcorn.js
  65. 65. http://webowonder.org
  66. 66. Danke!Chris Heilmann @codepo8 #mozilla#html5/freenet
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×