HTML5 / CSS3 : Mythes et realite
25 Oct 2012•0 j'aime•4,685 vues
Télécharger pour lire hors ligne
Signaler
Technologie
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.
Raphaël GoetterSuivre
Recommandé
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
Html5 bonnes-pratiquesJean-Pierre Vincent
CSS3 - nouveautesRémy Savard
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)Alphorm
Contenu connexe
Tendances
Combien coûte un site WordPress ? - Wordcamp Paris 2014Thierry Pigot
HTML5 maintenant partie 1 : la sémantiqueJean-Pierre Vincent
Alphorm.com Formation WordPress 4 Alphorm
Alphorm.com Formation le langage SQLAlphorm
Applications mobilesCedric Gatay
WordPress et SEO - SEOCampus 2013Daniel Roch - SeoMix
En vedette
Créer son 1er site webPhilippe Brandao
Semantic HTML5Terry Ryan
Html5 structure & semanticMuktadiur Rahman
كيف تكسب الاصدقاء وتوثر فى الناسGeorge Adel
GeoLocation using Google Maps JavaScript API v3S M Mohi Us Sunnat
Serveur web sur lindux debiancharlielefebvre14
Similaire à HTML5 / CSS3 : Mythes et realite
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Raphaël Goetter
Html5 now lightJean-Pierre Vincent
Responsive logic - KiwipartyJulien Cabanès
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
La performance sur mobileJean-Pierre Vincent
Un site web responsive en une heureRaphaël Goetter
Plus de Raphaël Goetter
Intégrateurs, bousculez vos habitudesRaphaël Goetter
Introduction à la performance webRaphaël Goetter
10 Revelations sur le Web MobileRaphaël Goetter
Futur du-positionnement-cssRaphaël Goetter
Des CSS efficaces avec KNACSSRaphaël Goetter
Le Futur du positionnement CSSRaphaël Goetter
HTML5 / CSS3 : Mythes et realite
- 1. TM L5 et CSS3 H é Myth es et réalit Petit tour des principales idées reçues Raphaël Goetter Alsacréations
- 2. 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 !
- 3. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! « HTML5 c'est encore trop tôt !
- 4. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! « Ça dépend...
- 5. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! De nombreux grands sites sont passés à HTML5 : Google, Yahoo, Facebook, Youtube, Wikipedia, Twitter, etc. Mais...
- 6. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! 34% des 100 plus grands sites mondiaux Mais...
- 7. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! Support HTML5 actuellement :
- 8. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! <!DOCTYPE html>
- 9. idée reçue n°1 ● HTML5 c'est e ncore trop tôt !
- 10. idée reçue n°1 ● HTML5 c'est e ncore trop tôt !
- 11. idée reçue n°1 ● HTML5 c'est e ncore trop tôt ! <!--[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 ?
- 12. idée reçue n°2 ● CSS3 est très différent de CSS2 « CSS3 est très différent de CSS2
- 13. idée reçue n°2 ● CSS3 est très différent de CSS2 « FAUX !
- 14. idée reçue n°2 ● CSS3 est très différent de CSS2 « CSS3 » = CSS1 + CSS2 + nouveautés
- 15. 3, c'est pas pareil ?! idée reçue n°3 ● HTML5 et CSS « HTML5 et CSS3, c'est pas pareil ?!
- 16. 3, c'est pas pareil ?! idée reçue n°3 ● HTML5 et CSS « FAUX !
- 17. 3, c'est pas pareil ?! idée reçue n°3 ● HTML5 et CSS « HTML5 » = HTML5 + CSS3 + JavaScript ? http://www.w3.org/html/logo/ Mais...
- 18. 3, c'est pas pareil ?! idée reçue n°3 ● HTML5 et CSS http://www.w3.org/html/logo/
- 19. 3, c'est pas pareil ?! idée reçue n°3 ● HTML5 et CSS Les spécifications sont complètement indépendantes (et valides) : ✔ HTML4 + CSS2 ✔ HTML4 + CSS3 ✔ XHTML + CSS2 ✔ XHTML + CSS3 ✔ HTML5 + CSS2 ✔ etc.
- 20. trop complexe ! idée reçue n°4 ● HTML5 est devenu « HTML5 est devenu trop complexe !
- 21. trop complexe ! idée reçue n°4 ● HTML5 est devenu « Ça dépend...
- 22. trop complexe ! idée reçue n°4 ● HTML5 est devenu Le métier d'intégrateur devient-il celui de développeur front-end (par la force des choses) ?
- 23. trop complexe ! idée reçue n°4 ● HTML5 est devenu • Doctype • <!DOCTYPE html> • Sémantique • <header> • <footer> • <nav> • <aside> • <figure> • <section>…
- 24. trop complexe ! idée reçue n°4 ● HTML5 est devenu • Doctype • Formulaires • <!DOCTYPE html> • email, URL, number color, search, range Sémantique • • • date, month, time,... • <header> • <footer> • Attributs • <nav> • placeholder • <aside> • autofocus • <figure> • required • <section>… • contenteditable • draggable...
- 25. trop complexe ! idée reçue n°4 ● HTML5 est devenu • Accessibilité • APIs • ARIA • Géolocalisation Drag & drop Média • • • History • <audio> • Web storage • <video> • Web offline • <canvas> • File access • SVG • Touch Event • Vibration • Web workers,...
- 26. trop complexe ! idée reçue n°4 ● HTML5 est devenu
- 27. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! « CSS3 ne fonctionne pas sur IE !
- 28. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! « FAUX !
- 29. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! CSS3 est très bien supporté... par IE10 !
- 30. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! • Internet Explorer 10 • flexbox layout • grid layout • text-shadow • transformations 2D • transformations 3D • etc.
- 31. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! • Internet Explorer 10 • Internet Explorer 9 • flexbox layout • multicolonnes • grid layout • border-radius • text-shadow • box-shadow • transformations 2D • opacity / RGBa • transformations 3D • multiple backgrounds • etc. • media queries • :last-child, :nth- child, :only-child, :target, :not, ...
- 32. idée reçue n°5 ● CSS3 ne fonct ionne pas sur IE ! • Internet Explorer 8 • Internet Explorer 6 • box-sizing • @font-face • text-overflow • Internet Explorer 7 • word-wrap • overflow-x, overflow-y • + filters proprio... • sélecteurs [att^=val], [att*=val], [att$=val] • E~F
- 33. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de « CSS3 c'est que de la décoration, nan ?
- 34. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de « FAUX !
- 35. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de Tout ceux qui ont dit « vrai » ont un gage
- 36. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de • décoration • border-radius • opacity • box-shadow • text-shadow • border-image • background-size • multiple backgrounds • ...
- 37. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de • décoration • contenu et textes • border-radius • @font-face • opacity • word-wrap • box-shadow • hyphens • text-shadow • text-overflow • border-image • font-smoothing • background-size • ligatures • multiple backgrounds • ... • ...
- 38. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de • positionnement • transformations • multicolonnes • rotate • flexbox layout • skew • grid layout • scale • regions • matrix • exclusions • ... et aussi en 3D • media queries • @media screen and (max-width: 480px)
- 39. la décoration, nan ? idée reçue n°6 ● CSS3 c'est que de • Transitions, Animations • sélecteurs • vitesse • A~B • accélération • [attr*=val] • répétitions, ... • :not • :target • unités et fonctions • :last-child, :nth-child • rem, fr, vw, vh, vmin, • :only-child vmax, deg, rad, s, ms • :enabled, :disabled, • calc(100%-50px) :checked, :required • etc. • :valid, :invalid, ...
- 40. 3 finalisés en 2022 ! idée reçue n°7 ● HTML5 et CSS « HTML5 et CSS3 seront finalisés en 2022 !
- 41. 3 finalisés en 2022 ! idée reçue n°7 ● HTML5 et CSS « FAUX !
- 42. 3 finalisés en 2022 ! idée reçue n°7 ● HTML5 et CSS
- 43. 3 finalisés en 2022 ! idée reçue n°7 ● HTML5 et CSS ✔ HTML5.0 → 2014 ✔ HTML5 .1 → 2016 ✔ CSS3 → ???
- 44. Et voilà !
- 45. Crédits ● Illustrations : Fotolia (majoritairement) ● Polices : ● Segoe UI light ● Georgia (citations)
- 46. Merci ! www.goetter.fr www.alsacreations.com www.knacss.com www.ie7nomore.com www.thinkmobilefirst.net @goetter
- 48. Question 1 Citez l'un des deux co- inventeurs du langage css
- 49. Question 1 Citez l'un des deux co- inventeurs du langage css (indice : ils sont deux)
- 50. Question 1 Bert Bos Hâkon Lie
- 51. Question 2 Quel navigateur fut initialement développé dans cette ferme danoise ?
- 52. Question 2 (indice : il est connu !)
- 53. Question 2 Google Chrome par Lars Bak qui ne voulait pas s'expatrier pour travailler en Californie
- 54. Question 3 En quelle année CSS 2.1 est-il devenu une recommandation officielle (Rec) ?
- 55. Question 3 (indice : pas si longtemps que ça)
- 56. Question 3 Mai 2011