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

asdasd

HTML5
Das Web und der Browser als Platform

Christian Heilmann, Mozilla

May the fourth be with you - always!

HTML5 ist die Evolution der
Webentwicklung.

HTML(5)

HTML Elemente
JavaScript APIs
Wie entwickele ich einen HTML5
kompatiblen Browser?

Arbeiten mit anstatt gegen
den Browser.

Arbeitsteilung: Server und
Client.

HTML5 macht mobil...

http://www.flickr.com/photos/mujitra/5480120811/

<!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>
<p>Inhalt, eine ganze Menge</p>
<p class="footer">Ich hab das tun getan!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hallo ich bin HTML5 (oder HTML)</title>
</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 im
Browser.</p>
<iframe src="http://en.wikipedia.org/wiki/
HTML5_video"></iframe>
</article>

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 }

<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

Datenspeicherung

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

SVG

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

WebGL

http://bodybrowser.googlelabs.com

Kompatibilität mit
alter Technologie?

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

</body>
</html>

Erstellung der Elemente
mit JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<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 per
namespace.

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>
</head>
<body>
<div class="header"><header>
</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!

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

HTML5 Seiten als WebApps

http://appmator.appspot.com

Ein paar
interessante
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://butterapp.org | http://popcorn.js

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

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

Weitere ähnliche Inhalte

Was ist angesagt?

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

Mehr von Christian Heilmann

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