html5, css3 und javascript für alle

73
Christian Heilmann / Mozilla HTML5, CSS3 und JavaScript für alle - ja, auch du!

Post on 12-Sep-2014

8.851 views

Category:

Technology


3 download

DESCRIPTION

A presentation at the German "Webinale" conference about HTML5 and CSS3 and using open standards.

TRANSCRIPT

Page 1: HTML5, CSS3 und JavaScript für alle

Christian Heilmann / Mozilla

HTML5, CSS3 und JavaScript für alle - ja, auch du!

Page 2: HTML5, CSS3 und JavaScript für alle

@codepo8<chris lang="frenglisch"/>

http://treue-pfoetchen.de/

Page 3: HTML5, CSS3 und JavaScript für alle
Page 4: HTML5, CSS3 und JavaScript für alle
Page 5: HTML5, CSS3 und JavaScript für alle
Page 6: HTML5, CSS3 und JavaScript für alle
Page 7: HTML5, CSS3 und JavaScript für alle
Page 8: HTML5, CSS3 und JavaScript für alle

CMD+U(CTRL+U)

Page 9: HTML5, CSS3 und JavaScript für alle

Things that make me happy!

Page 10: HTML5, CSS3 und JavaScript für alle

<section> <nav> <article>

<aside> <hgroup>

<header> <footer> <time>

<mark> <details> <figure> <figcaption> ...

Page 13: HTML5, CSS3 und JavaScript für alle

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

Page 15: HTML5, CSS3 und JavaScript für alle
Page 18: HTML5, CSS3 und JavaScript für alle
Page 19: HTML5, CSS3 und JavaScript für alle
Page 20: HTML5, CSS3 und JavaScript für alle

input:valid { background:lime } input:invalid { background:red; color:white }

Firefox Webkit Opera

Required: <input required name="name">

Pattern: <input pattern="[0-9]{5}" name="postleitzahl">

Page 21: HTML5, CSS3 und JavaScript für alle

SVG

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

Page 22: HTML5, CSS3 und JavaScript für alle

http://highcharts.com

Page 24: HTML5, CSS3 und JavaScript für alle

Local Storage

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

Page 25: HTML5, CSS3 und JavaScript für alle

Offline

Page 26: HTML5, CSS3 und JavaScript für alle

CSS3

Page 27: HTML5, CSS3 und JavaScript für alle

Geolocation

Page 28: HTML5, CSS3 und JavaScript für alle

Web Workers

Page 29: HTML5, CSS3 und JavaScript für alle

Web Sockets

Page 30: HTML5, CSS3 und JavaScript für alle

2D is boring!

Page 32: HTML5, CSS3 und JavaScript für alle

in

3D

Page 33: HTML5, CSS3 und JavaScript für alle
Page 36: HTML5, CSS3 und JavaScript für alle

http://ro.me ( why not http://ch.ro.me ?)

Page 37: HTML5, CSS3 und JavaScript für alle
Page 38: HTML5, CSS3 und JavaScript für alle
Page 39: HTML5, CSS3 und JavaScript für alle

kkrieger / .werkkzeug

Page 40: HTML5, CSS3 und JavaScript für alle

Annoying things -now in colour!

Page 41: HTML5, CSS3 und JavaScript für alle
Page 42: HTML5, CSS3 und JavaScript für alle

http://benthebodyguard.com

CSS3 animation + JS

Page 43: HTML5, CSS3 und JavaScript für alle
Page 44: HTML5, CSS3 und JavaScript für alle
Page 45: HTML5, CSS3 und JavaScript für alle
Page 46: HTML5, CSS3 und JavaScript für alle

Goldfish for all!

Page 47: HTML5, CSS3 und JavaScript für alle

Internet Explorer 6...

Page 48: HTML5, CSS3 und JavaScript für alle
Page 49: HTML5, CSS3 und JavaScript für alle
Page 50: HTML5, CSS3 und JavaScript für alle
Page 51: HTML5, CSS3 und JavaScript für alle
Page 53: HTML5, CSS3 und JavaScript für alle

HTML5 for mortals

Page 54: HTML5, CSS3 und JavaScript für alle

HTML5 Video, simple!

Page 55: HTML5, CSS3 und JavaScript für alle
Page 56: HTML5, CSS3 und JavaScript für alle

http://html5boilerplate.com/

Page 57: HTML5, CSS3 und JavaScript für alle
Page 58: HTML5, CSS3 und JavaScript für alle

http://www.modernizr.com/

Page 59: HTML5, CSS3 und JavaScript für alle

https://build.phonegap.com/

Page 60: HTML5, CSS3 und JavaScript für alle

Where I want togo...

Page 61: HTML5, CSS3 und JavaScript für alle
Page 62: HTML5, CSS3 und JavaScript für alle
Page 63: HTML5, CSS3 und JavaScript für alle

http://youtube.com/html5

Page 64: HTML5, CSS3 und JavaScript für alle

http://animatable.com

Page 65: HTML5, CSS3 und JavaScript für alle

http://animatable.com

Page 67: HTML5, CSS3 und JavaScript für alle

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

Page 68: HTML5, CSS3 und JavaScript für alle

http://www.htmlfivewow.com/

Page 69: HTML5, CSS3 und JavaScript für alle
Page 70: HTML5, CSS3 und JavaScript für alle

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

Page 71: HTML5, CSS3 und JavaScript für alle

http://webowonder.org

Page 72: HTML5, CSS3 und JavaScript für alle
Page 73: HTML5, CSS3 und JavaScript für alle

Danke!Chris Heilmann

@codepo8#mozilla

#html5/freenet