Création d'une application html5 utilisant canvas, svg et les animations css3
HTML5 / CSS3 : Mythes et realite
56
HTML5 et CSS3 Mythes et réalité Petit tour des principales idées reçues Raphaël Goetter Alsacréations
-
Upload
raphael-goetter -
Category
Technology
-
view
3.206 -
download
6
description
Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3. Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
Transcript of HTML5 / CSS3 : Mythes et realite
HTML5 et CSS3Mythes et réalité
Petit tour des principales idées reçuesRaphaël Goetter
Alsacréations
Idées reçues ?
1. HTML5 c'est encore trop tôt !
2. CSS3 est très différent de CSS2
3. HTML5 et CSS3, c'est pas pareil ?!
4. HTML5 est devenu trop complexe !
5. CSS3 ne fonctionne pas sur Internet Explorer !
6. CSS3 c'est que de la décoration, nan ?
7. HTML5 et CSS3 seront finalisés en 2022 !
«●HTML5 c'est encore trop tôt !
idée reçue n°1
HTML5 c'est encore trop tôt !
«●HTML5 c'est encore trop tôt !
idée reçue n°1
Ça dépend...
●HTML5 c'est encore trop tôt !idée reçue n°1
De nombreux grands sites sont passés à HTML5 : Google, Yahoo, Facebook, Youtube, Wikipedia, Twitter, etc.
Mais...
●HTML5 c'est encore trop tôt !idée reçue n°1
34% des 100 plus grands sites mondiaux
Mais...
●HTML5 c'est encore trop tôt !idée reçue n°1
Support HTML5 actuellement :
●HTML5 c'est encore trop tôt !idée reçue n°1
<!DOCTYPE html>
●HTML5 c'est encore trop tôt !idée reçue n°1
●HTML5 c'est encore trop tôt !idée reçue n°1
●HTML5 c'est encore trop tôt !idée reçue n°1
<!--[if lt IE 9]><script src="scripts/html5shim.js"></script><![endif]-->
document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); ...
Solution de repli ?
«●CSS3 est très différent de CSS2idée reçue n°2
CSS3 est très différent de CSS2
«●CSS3 est très différent de CSS2idée reçue n°2
FAUX !
●CSS3 est très différent de CSS2idée reçue n°2
« CSS3 » = CSS1 + CSS2 + nouveautés
«●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
HTML5 et CSS3, c'est pas pareil ?!
«●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
FAUX !
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
« HTML5 » = HTML5 + CSS3 + JavaScript ?
http://www.w3.org/html/logo/ Mais...
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
http://www.w3.org/html/logo/
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
Les spécifications sont complètement indépendantes (et valides) :✔ HTML4 + CSS2 ✔ HTML4 + CSS3✔ XHTML + CSS2✔ XHTML + CSS3✔ HTML5 + CSS2✔ etc.
«●HTML5 est devenu trop complexe !idée reçue n°4
HTML5 est devenu trop complexe !
«●HTML5 est devenu trop complexe !idée reçue n°4
Ça dépend...
●HTML5 est devenu trop complexe !idée reçue n°4
Le métier d'intégrateur devient-il celui de développeur front-end (par la force des choses) ?
●HTML5 est devenu trop complexe !idée reçue n°4
• Doctype • <!DOCTYPE html>
• Sémantique• <header>• <footer>• <nav>• <aside>• <figure>• <section>…
●HTML5 est devenu trop complexe !idée reçue n°4
• Doctype • <!DOCTYPE html>
• Sémantique• <header>• <footer>• <nav>• <aside>• <figure>• <section>…
• Formulaires • email, URL, number• color, search, range• date, month, time,...
• Attributs• placeholder• autofocus• required• contenteditable• draggable...
●HTML5 est devenu trop complexe !idée reçue n°4
• Accessibilité • ARIA
• Média• <audio>• <video>• <canvas>• SVG
• APIs • Géolocalisation• Drag & drop• History• Web storage• Web offline• File access• Touch Event• Vibration• Web workers,...
●HTML5 est devenu trop complexe !idée reçue n°4
«●CSS3 ne fonctionne pas sur IE !idée reçue n°5
CSS3 ne fonctionne pas sur IE !
«●CSS3 ne fonctionne pas sur IE !idée reçue n°5
FAUX !
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
CSS3 est très bien supporté... par IE10 !
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 10 • flexbox layout• grid layout• text-shadow• transformations 2D• transformations 3D• etc.
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 10 • flexbox layout• grid layout• text-shadow• transformations 2D• transformations 3D• etc.
• Internet Explorer 9• multicolonnes• border-radius• box-shadow• opacity / RGBa• multiple backgrounds• media queries• :last-child, :nth-
child, :only-child, :target, :not, ...
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 8 • box-sizing
• Internet Explorer 6• @font-face• text-overflow• word-wrap• + filters proprio...
• Internet Explorer 7 • overflow-x, overflow-y• sélecteurs [att^=val],
[att*=val], [att$=val]• E~F
«●CSS3 c'est que de la décoration, nan ?idée reçue n°6
CSS3 c'est que de la décoration, nan ?
«●CSS3 c'est que de la décoration, nan ?idée reçue n°6
FAUX !
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
Tout ceux qui ont dit « vrai » ont un gage
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• décoration • border-radius• opacity• box-shadow• text-shadow• border-image• background-size• multiple backgrounds• ...
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• décoration • border-radius• opacity• box-shadow• text-shadow• border-image• background-size• multiple backgrounds• ...
• contenu et textes • @font-face• word-wrap• hyphens• text-overflow• font-smoothing• ligatures• ...
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• positionnement • multicolonnes• flexbox layout• grid layout• regions• exclusions
• transformations • rotate• skew• scale• matrix• ... et aussi en 3D
• media queries • @media screen and
(max-width: 480px)
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• Transitions, Animations • vitesse• accélération• répétitions, ...
• sélecteurs • A ~ B• [attr*=val]• :not• :target• :last-child, :nth-child• :only-child• :enabled, :disabled,
:checked, :required• :valid, :invalid, ...
• unités et fonctions • rem, fr, vw, vh, vmin,
vmax, deg, rad, s, ms• calc(100%-50px)• etc.
«●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
HTML5 et CSS3 seront finalisés en 2022 !
«●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
FAUX !
●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
✔ HTML5.0 → 2014✔ HTML5 .1 → 2016 ✔ CSS3 → ???
Et voilà !
Crédits
● Illustrations : Fotolia (majoritairement)● Polices :
● Segoe UI light● Georgia (citations)
Merci !
www.goetter.frwww.alsacreations.com www.knacss.com www.ie7nomore.com www.thinkmobilefirst.net
@goetter
QUIZ !HTML & CSS
Question 1
Citez l'un des deux co-inventeurs du langage css
Question 1
Citez l'un des deux co-inventeurs du langage css
(indice : ils sont deux)
Question 1
Bert BosHâkon Lie
Question 2
Quel navigateur fut initialement développé dans cette ferme danoise ?
Question 2
(indice : il est connu !)
Question 2
Google Chromepar Lars Bak qui ne voulait pas s'expatrierpour travailler en Californie
Question 3
En quelle année CSS 2.1 est-il devenu une recommandation officielle (Rec) ?
Question 3
(indice : pas si longtemps que ça)
Question 3
Mai 2011
