SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
1.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
Je ne vous
crois pas !
Démos :
mammouthland.net
alsacreations.fr
Pascale Lambert-Charreteur et Raphaël Goetter
2.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
À vous de
jouer !
1- doctype HTML5
Pascale Lambert-Charreteur et Raphaël Goetter
3.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
Pour IE ? Des solutions de repli
... comme d'hab
<!--[if IE]>
<script src="scripts/html5ie.js"></script>
<![endif]-->
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
...
Pascale Lambert-Charreteur et Raphaël Goetter Solutions de repli ?
4.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
À vous de
jouer !
2- IE et HTML5
Pascale Lambert-Charreteur et Raphaël Goetter
5.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 2 :
HTML5 c'est juste des nouvelles
balises !
Vous avez dit « balise » ?
Pascale Lambert-Charreteur et Raphaël Goetter
6.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est juste des nouvelles balises ! »
Je ne vous
crois pas !
Démo vidéo : dailymotion.com/html5
LocalStorage : ie7nomore.com/fun/todolist/
Pascale Lambert-Charreteur et Raphaël Goetter
7.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est juste des nouvelles balises ! »
À vous de
jouer !
3- contenteditable
4- vidéo
Pascale Lambert-Charreteur et Raphaël Goetter
8.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 3 :
On ne peut pas faire de HTML5
sans CSS3 (et vice versa...)
Pascale Lambert-Charreteur et Raphaël Goetter
9.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 4 :
CSS3 est trop jeune, encore
inutilisable
Pascale Lambert-Charreteur et Raphaël Goetter
10.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Pascale Lambert-Charreteur et Raphaël Goetter
11.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Et même sur IE !
Depuis IE6 Depuis IE7
✔ font-face, text-overflow, ✔ overflow-x, overflow-y
word-wrap ✔ [att^=val], [att*=val],
[att$=val], E~F
A partir de IE9
✔ border-radius, box-shadow, opacity,
RGBa multiple backgrounds
✔ :last-child, :nth-child, :only-child,
:first-of-type, :target, :not, :empty, ...
Pascale Lambert-Charreteur et Raphaël Goetter
12.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Je ne vous
crois pas !
Démo kiwis : ie7nomore.com/fun/kiwi/
Démo wrapping : ie7nomore.com/fun/wrapping/
Pascale Lambert-Charreteur et Raphaël Goetter
13.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
À vous de
jouer !
5- font-face
Pascale Lambert-Charreteur et Raphaël Goetter
14.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 5 :
CSS3, c'est que de la déco, nan ?
Pascale Lambert-Charreteur et Raphaël Goetter Daniel Glazman, 3 ans (fake)
15.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3, c'est que de la déco, nan ? »
Je ne vous
crois pas !
Démos MediaQueries : mammouthland.net &
alsacreations.fr
Démo animations : the-art-of-web.com/css/css-animation
Pascale Lambert-Charreteur et Raphaël Goetter
16.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3, c'est que de la déco, nan ? »
À vous de
jouer !
6- media-queries
7- nth-child
Pascale Lambert-Charreteur et Raphaël Goetter
17.
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Ressources
Pascale Lambert-Charreteur et Raphaël Goetter