Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5/CSS3. 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é.

Similar presentations


Presentation on theme: "HTML5/CSS3. 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é."— Presentation transcript:

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

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 { 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    Sites en anglais   html5demos.com html5demos.com


Download ppt "HTML5/CSS3. 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é."

Similar presentations


Ads by Google