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

on

  • 7,560 views

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

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

Statistics

Views

Total Views
7,560
Views on SlideShare
7,198
Embed Views
362

Actions

Likes
3
Downloads
27
Comments
0

10 Embeds 362

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 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 <figc ils> < e> aptio figur 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>&lt;video&gt;</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
  • 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{color:#fff;background:#369;}</style></head><body> <header><h1>Tach!</h1></header> <!-- nix weiss auf blau! --></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