1. HTML5/CSS3

2. Sommaire 1. Introduction 2. HTML5 1. Syntaxe 2. Sémantique 3. Fonctionnalités 3. CSS3 1. Sélecteurs 2. Mise en forme 3. Styles 4. Compatibilité 5. Conclusion 6. Questions? 7. Documentation

3. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Introduction

4. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation html5

5. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Syntaxe

6. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sémantique

7. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sémantique Titre principal Sous-titre

8. Fonctionnalités datalist Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation …

9. Fonctionnalités range Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

10. Fonctionnalités number Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

11. Fonctionnalités mail url tel color patern date… Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

12. Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation barre de progression 50 %

13. Fonctionnalités Contenu éditable Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

14. Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Drag & Drop Drag in Drag out

15. Fonctionnalités Gestion native de l’audio et de la vidéo Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

16. Fonctionnalités des images dynamiques avec l’API 2d canvas Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

17. Fonctionnalités canvas Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation de la 3d en temps réel avec webGL démos: helloracer.comhelloracer.com www.ninepointfive.org

18. Fonctionnalités une page en dialogue constant avec le serveur. WebSockets Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

19. Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Géolocalisation

20. Fonctionnalités Local storage pour les applications offline… Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation …IndexedDB pour communiquer avec SQL

21. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation CSS3

22. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sélecteurs :nth-child(even) :nth-child(odd) input[type=‘number’] :not() :first-child

23. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme display: inline-block

24. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme display: box positionnement sur mesure

25. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme Colonnes

26. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Bordures personnalisées div { border-image: url("border.png") 27 round stretch; }

27. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Bordures arrondies div { border-radius: 20px; } div { border-radius: 20px 0px; } div { border-radius: 20px 20px 0px 20px; }

28. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Ombres div { box-shadow: 12px 12px 6px black; text-shadow: 6px 6px 4px black; }

29. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Dégradés radial-gradient(60% 60%, ellipse closest-side, #93ccf3, #0b074a 140%) background: linear-gradient(left top, #0b074a, #93ccf3 50%, #0b074a)

30. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles div { box-shadow: box-reflect: below 4px linear-gradient(transparent, white); } Réflexion

31. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transparence div { opacity: 0.5; }

32. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transformations div { transform: skew(-30deg, 0deg); } div { transform: rotate(-30deg); }

33. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transitions ; div { transition-property: all; transition-duration: 3s; }

34. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles @font-face { font-family: 'trashco'; src: url('trashco.eot'); }

35. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Support HTML5

36. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Nombreuses fonctionnalités intéressantes mais support encore trop faible

37. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Questions?

38. Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation  Sites en français  www.html5-css3.fr www.html5-css3.fr  www.alsacreation.com www.alsacreation.com  Sites en anglais  www.w3.org/CSS www.w3.org/CSS  html5demos.com html5demos.com