Christian heilmann html 5 - das web und der browser als platform
•
3 gefällt mir•3,143 views
Keynote at the jax.de Java Conference 2011 die so zeigt was man mit HTML5 und anderen neuen Technologien so alles anstellen kann.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Christian heilmann html 5 - das web und der browser als platform
Ähnlich wie Christian heilmann html 5 - das web und der browser als platform (20)
Mehr von Christian Heilmann
Mehr von Christian Heilmann (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (8)
Christian heilmann html 5 - das web und der browser als platform
- 1. asdasd HTML5 Das Web und der Browser als Platform Christian Heilmann, Mozilla
- 3. May the fourth be with you - always!
- 5. HTML5 ist die Evolution der Webentwicklung.
- 7. HTML(5) HTML Elemente JavaScript APIs Wie entwickele ich einen HTML5 kompatiblen Browser?
- 8. Arbeiten mit anstatt gegen den Browser.
- 12. HTML5 macht mobil... http://www.flickr.com/photos/mujitra/5480120811/
- 13. Was gibt uns HTML5?
- 14. Einfachere HTML Strukturen
- 15. <!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>
- 16. <!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>
- 18. <!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>
- 19. <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> .
- 20. 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 im Browser.</p> <iframe src="http://en.wikipedia.org/wiki/ HTML5_video"></iframe> </article>
- 24. Required: <input required name="name"> Pattern: <input pattern="[0-9]{5}" name="postleitzahl"> Firefox Webkit Opera input:valid { background:lime } input:invalid { background:red; color:white }
- 25. Multimedia
- 26. <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.
- 27. Video events: loadstart / progress / suspend / abort / error / emptied / stalled / play / pause / loadedmetadata / loadeddate / waiting / playing / canplay / canplaythrough / seeking / seeked / timeupdate / ended / ratechange
- 32. Canvas
- 37. Die Freunde von HTML5...
- 38. Datenspeicherung http://www.flickr.com/photos/blude/2665906010/
- 39. Offline
- 40. CSS3
- 41. Geolocation
- 42. SVG http://mbostock.github.com/d3/
- 43. Web Workers
- 44. Web Sockets
- 45. WebGL http://bodybrowser.googlelabs.com
- 47. Alles is lesbar!
- 50. Kein CSS für unbekannte Elemente 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>
- 51. Erstellung der Elemente mit 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>
- 52. Copy + Paste Lösung http://code.google.com/p/html5shiv/
- 53. HTML5 als XML oder per namespace. http://www.ibm.com/developerworks/xml/library/x-think45/ http://www.debeterevormgever.nl/html5-ie-without-javascript/
- 54. Einfachste Lösung - doppeltes HTML :( .header,.footer, .aside,.section { display:block; }
- 55. <!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>
- 56. Multimedia in HTML <video src="interview.ogv" controls> <a href="interview.ogv">Video herunterladen</a> </video>
- 57. 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>
- 58. Zum Glück gibt es Firmen, die Lösungen anbieten!
- 64. Alte Browser, neue Tricks?
- 66. HTML5 Seiten als WebApps http://appmator.appspot.com
- 68. Ein paar interessante Lösungen
- 71. Screencast of Nikebetterworld http://nikebetterworld.com/
- 72. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor
- 78. Danke! Chris Heilmann @codepo8 #mozilla #html5/freenet