Télécharger la présentation
1
Plus belle la vie avec HTML5 et CSS3
Plus belle la vie avec HTML5 et CSS3 Raphaël Goetter Pascale Lambert-Charreteur alsacreations.fr alsacreations.com goetter.fr mammouthland.net openweb.eu.org @goetter @PascaleLC
2
HTML5 CSS3 Déjà utilisé ? Entendu parler ? Pareil ? Obiwan ?
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010 Entendu parler ? HTML5 CSS3 Pareil ? Déjà utilisé ? Obiwan ?
3
« Idée reçue numéro 1 : HTML5 c'est encore trop tôt !
Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010 Idée reçue numéro 1 : HTML5 c'est encore trop tôt ! Pascale Lambert-Charreteur et Raphaël Goetter
4
FAUX ! Plus belle la vie avec HTML5 et CSS3
« HTML5 c'est encore trop tôt ! » FAUX ! Pascale Lambert-Charreteur et Raphaël Goetter
5
<!DOCTYPE html> Plus belle la vie avec HTML5 et CSS3
« HTML5 c'est encore trop tôt ! » <!DOCTYPE html> Pascale Lambert-Charreteur et Raphaël Goetter
6
Plus belle la vie avec HTML5 et CSS3 « HTML5 c'est encore trop tôt ! »
Pascale Lambert-Charreteur et Raphaël Goetter
7
Démos : mammouthland.net alsacreations.fr
Plus belle la vie avec HTML5 et CSS3 « 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
8
À vous de jouer ! 1- doctype HTML5
Plus belle la vie avec HTML5 et CSS3 « HTML5 c'est encore trop tôt ! » À vous de jouer ! 1- doctype HTML5 Pascale Lambert-Charreteur et Raphaël Goetter
9
Youtube, Dailymotion, Vimeo (vidéos)
Plus belle la vie avec HTML5 et CSS3 « HTML5 c'est encore trop tôt ! » epargnegmf.fr google.com /.fr paris-web.fr twitter.com apple.com/safari Youtube, Dailymotion, Vimeo (vidéos) Google (apis) alsacreations.fr mammouthland.net Pascale Lambert-Charreteur et Raphaël Goetter
10
Pour IE ? Des solutions de repli
Plus belle la vie avec HTML5 et CSS3 « 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"); ... Solutions de repli ? Pascale Lambert-Charreteur et Raphaël Goetter
11
À vous de jouer ! 2- IE et HTML5 Plus belle la vie avec HTML5 et CSS3
« HTML5 c'est encore trop tôt ! » À vous de jouer ! 2- IE et HTML5 Pascale Lambert-Charreteur et Raphaël Goetter
12
« Idée reçue numéro 2 : HTML5 c'est juste des nouvelles balises !
Plus belle la vie avec HTML5 et CSS3 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
13
FAUX ! Plus belle la vie avec HTML5 et CSS3
« HTML5 c'est juste des nouvelles balises ! » FAUX ! Pascale Lambert-Charreteur et Raphaël Goetter
14
HTML 5 Éléments sémantiques Éléments média Nouveaux formulaires
Plus belle la vie avec HTML5 et CSS3 « HTML5 c'est juste des nouvelles balises ! » Éléments sémantiques Éléments média Nouveaux formulaires Applications <header> <footer> <nav> <aside> <section> <article> <figure> … <audio> <video> <canvas> placeholder autofocus search range , url, number, color date, month, week, time required innerHTML géolocalisation drag & drop contenteditable localStorage cache WebWorkers … HTML 5 Pascale Lambert-Charreteur et Raphaël Goetter
15
Je ne vous crois pas ! Démo vidéo : dailymotion.com/html5
Plus belle la vie avec HTML5 et CSS3 « 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
16
À vous de jouer ! 3- contenteditable 4- vidéo
Plus belle la vie avec HTML5 et CSS3 « HTML5 c'est juste des nouvelles balises ! » À vous de jouer ! 3- contenteditable 4- vidéo Pascale Lambert-Charreteur et Raphaël Goetter
17
Plus belle la vie avec HTML5 et CSS3 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
18
FAUX ! Plus belle la vie avec HTML5 et CSS3
« On ne peut pas faire de HTML5 sans CSS3 (et vice versa...) » FAUX ! Pascale Lambert-Charreteur et Raphaël Goetter
19
Plus belle la vie avec HTML5 et CSS3
« On ne peut pas faire de HTML5 sans CSS3 (et vice versa...) » Les versions de (X)HTML et CSS sont et ont toujours été indépendantes : HTML 4 + CSS 2.1 HTML 4 + CSS 3 HTML 5 + CSS 2.1 HTML 5 + CSS 3 XHTML + CSS 2.1 XHTML + CSS 3 Pascale Lambert-Charreteur et Raphaël Goetter
20
« Idée reçue numéro 4 : CSS3 est trop jeune, encore inutilisable
Plus belle la vie avec HTML5 et CSS3 Idée reçue numéro 4 : CSS3 est trop jeune, encore inutilisable Pascale Lambert-Charreteur et Raphaël Goetter
21
FAUX ! Plus belle la vie avec HTML5 et CSS3
« CSS3 c'est trop jeune, encore inutilisable » FAUX ! Pascale Lambert-Charreteur et Raphaël Goetter
22
Plus belle la vie avec HTML5 et CSS3
« CSS3 c'est trop jeune, encore inutilisable » Pascale Lambert-Charreteur et Raphaël Goetter
23
Et même sur IE ! Depuis IE6 Depuis IE7 A partir de IE9
Plus belle la vie avec HTML5 et CSS3 « CSS3 c'est trop jeune, encore inutilisable » Et même sur IE ! Depuis IE6 Depuis IE7 font-face, text-overflow, word-wrap overflow-x, overflow-y [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
24
Je ne vous crois pas ! Démo kiwis : ie7nomore.com/fun/kiwi/
Plus belle la vie avec HTML5 et CSS3 « 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
25
À vous de jouer ! 5- font-face Plus belle la vie avec HTML5 et CSS3
« CSS3 c'est trop jeune, encore inutilisable » À vous de jouer ! 5- font-face Pascale Lambert-Charreteur et Raphaël Goetter
26
« Idée reçue numéro 5 : CSS3, c'est que de la déco, nan ?
Plus belle la vie avec HTML5 et CSS3 Idée reçue numéro 5 : CSS3, c'est que de la déco, nan ? Daniel Glazman, 3 ans (fake) Pascale Lambert-Charreteur et Raphaël Goetter
27
FAUX ! Plus belle la vie avec HTML5 et CSS3
« CSS3, c'est que de la déco, nan ? » FAUX ! Pascale Lambert-Charreteur et Raphaël Goetter
28
CSS3 Propriétés déco Propriété contenu Sélecteurs et éléments
Plus belle la vie avec HTML5 et CSS3 « CSS3, c'est que de la déco, nan ? » Propriétés déco Propriété contenu Sélecteurs et éléments Media Queries columns word-wrap text- overflow @media screen and (max-width: 480px) @font-face border-radius opacity box-shadow text-shadow border-image background- size arrière-plans multiples … A ~ B [attr*=val] :not :target :last-child :nth-child :only-child :enabled, :disabled, :checked :required :valid, :invalid Transform rotate scale matrix Positionnement flexibleBox, grid, template CSS3 Transitions Animations Pascale Lambert-Charreteur et Raphaël Goetter
29
Plus belle la vie avec HTML5 et CSS3
« 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
30
À vous de jouer ! 6- media-queries 7- nth-child
Plus belle la vie avec HTML5 et CSS3 « 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
31
« « Ressources Plus belle la vie avec HTML5 et CSS3
Pascale Lambert-Charreteur et Raphaël Goetter
32
Plus belle la vie avec HTML5 et CSS3
Ressources CSS3please.com générateur instantané et multi-navigateurs (IE compris) d'effets CSS3 CSS3pie.com support de plusieurs propriété décoratives CSS3 pour IE via .htc Selectivizr.com support de sélecteurs CSS3 (:last-child, nth-child,...) pour IE fontsquirrel.com/fontface générateur de polices pour font-face multinavigateurs findmebyip.com/litmus resonnaissance de HTML5 et CSS3 sur les navigateurs Pascale Lambert-Charreteur et Raphaël Goetter
33
Raphaël Goetter Pascale Lambert-Charreteur @PascaleLC
mammouthland.net openweb.eu.org @PascaleLC Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr Images : Fotolia, Iconfinder Police : Fontin sansRG slideshare.net/goetter/plus-belle-la-vie-avec-html5-et-css3 @goetter
