html css · − les nouvelles propriétés css3 doivent être différencieés − chaque navigateur...

Les futures Standards

J. Saraydaryan

31/07/2012

CPE - Lyon

HTML5 – CSS3

I HTML5

- Introduction

- Nouveautés HTML

- Nouveautés Javascript

II CSS3

- Introduction

- Nouveautés Effets visuels

- Nouveautés Sélecteurs

- Nouveautés Utilitaires

III Compliance - HTML 5

- CSS 3

V Conclusion

2

CSS3

Compliance HTML5

Conclusion

3

HTML5

Introduction

Nouveauté HTML

Nouveauté Javascript

CSS3

Compliance HTML5

Conclusion

4 4

• Introduction (1/2)

Source:http://blog.tangcs.com/2011/04/15/html-css-tutorials-intro/

CSS3

Compliance HTML5

Conclusion

5 5

• Introduction (2/2)

W3C vs WHATWG World Wide Web Consortium vs Web Hypertext Application Technology Working Group

VS

CSS3

Compliance HTML5

Conclusion

6 6

• Introduction (2/2)

Nouveautés

HTML Javascript

CSS3

Compliance HTML5

Conclusion

7

HTML5

Introduction

Nouveautés HTML

Nouveautés Javascript

CSS3

Compliance HTML5

Conclusion

8 8

• Nouveautés HTML (1/14)

Allègement du code

Balises Sémantiques

Balises Multimédia

Formulaires améliorés

CSS3

Compliance HTML5

Conclusion

9 9

• Nouveautés HTML (2/14)

Allègement du code − Doctype, meta, script…

HTML 4 HTML 5

CSS3

Compliance HTML5

Conclusion

10 10

• Nouveautés HTML (3/14)

Balises Sémantiques

Elements Sample

header : élément d’entête footer : élément pied de page nav : élément de navigation (e.g menu) aside : élément de zone secondaire non liée au contenu principal de la page section: défini une section de document article : élément d’un même groupe, d’article

CSS3

Compliance HTML5

Conclusion

11 11

• Nouveautés HTML (4/14)

Balises Sémantiques

Elements Sample bdi: isole une partie de texte pouvant être

formaté autrement

command: bouton de commande pouvant

être invoqué par l'utilisateur

details: zone d'information additionnelle

pouvant être affichées ou maquées

summary: entete visible pour un élément

details

figure: conteneur d‘objets tels que

illustrations, diagrams, photos, code listings,

etc.

figcaption: titre pour l'élément figure

hgroup: groupe de heading h1 h2 etc.

mark: texte surligné

meter: jauge

progress: représente la progression d'un tache

ruby: ruby annotation (East Asian typography)

rt: caractère d'exclamation/prononciation (East Asian

typography)

rp: affiche quoi afficher en ca de no support des annotations

ruby

time: date/time

wbr: définit une line-break possible

CSS3

Compliance HTML5

Conclusion

12 12

• Nouveautés HTML (5/14)

Balises Sémantiques

Sample Elements

CSS3

Compliance HTML5

Conclusion

13 13

• Nouveautés HTML (6/14)

Balises Multimédia

Elements Sample audio: défini une contexte d’un objet audio

video: défini une contexte d’un objet video

source: défini des ressources multimédia

multiple pour l’audio et la video

embed: container pour des applications

externes ou du contenu interaction (plug-in)

track: liste de morceaux textuel pour la video

et l’audio

<canvas> surface sur laquelle il est possible

de dessiner des formes et de les animer

<svg> surface permettant de dessiner des

objet au format Scalable Vector Graphics http://peterned.home.xs4all.nl/demooo/

CSS3

Compliance HTML5

Conclusion

14 14

• Nouveautés HTML (7/14)

Balises Multimédia

Sample Sample Execution

CSS3

Compliance HTML5

Conclusion

15 15

• Nouveautés HTML (8/14)

Balises Multimédia

Sample Canvas

Source:https://developer.mozilla.org/samples/canvas-tutorial/2_2_canvas_moveto.html

CSS3

Compliance HTML5

Conclusion

16 16

• Nouveautés HTML (9/14)

Balises Multimédia

Sample SVG Sample Execution

CSS3

Compliance HTML5

Conclusion

17 17

• Nouveautés HTML (10/14)

Balises Multimédia

− Canvas vs SVG

Source:http://www.w3schools.com/html5/html5_canvas_vs_svg.asp

CSS3

Compliance HTML5

Conclusion

18 18

• Nouveautés HTML (11/14)

Formulaires améliorés: Input Type

Elements

color date datetime datetime-local email month number range dearch tel time url week

CSS3

Compliance HTML5

Conclusion

19 19

• Nouveautés HTML (12/14)

Formulaires améliorés: Eléments de forme

Elements

datalist: liste d'options pre-définies pour les éléments "input " keygen: champ générateur de clé public/privé output: résultat d'un calcul

Sample

CSS3

Compliance HTML5

Conclusion

20 20

• Nouveautés HTML (13/14)

Formulaires améliorés: Eléments de form

Sample Execution Sample

CSS3

Compliance HTML5

Conclusion

21 21

• Nouveautés HTML (14/14)

Formulaires améliorés: nouveaux attributs

form Input

autocomplete

novalidate

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

CSS3

Compliance HTML5

Conclusion

22

HTML5

Introduction

Nouveautés HTML

Nouveautés Javascript

CSS3

Compliance HTML5

Conclusion

23 23

• Nouveautés Javascript (1/22)

Stockage local

Localisation

Drag and Drop

Toolbox

CSS3

Compliance HTML5

Conclusion

24 24

• Nouveautés Javascript (2/22)

Stockage local

− Stockage de données sur le navigateur

− Persistance

− Info non communiqué au serveur (sécurité)

− Utilisé uniquement à la demande

− 2 modes de stockage local/session

− Grand espace de stockage (Mb)

CSS3

Compliance HTML5

Conclusion

25 25

•Nouveautés Javascript (3/22)

Stockage local (local)

CSS3

Compliance HTML5

Conclusion

26 26

•Nouveautés Javascript (4/22)

Stockage local (local)

CSS3

Compliance HTML5

Conclusion

27 27

•Nouveautés Javascript (5/22)

Stockage local (session)

CSS3

Compliance HTML5

Conclusion

28 28

•Nouveautés Javascript (6/22)

Stockage local (session)

CSS3

Compliance HTML5

Conclusion

29 29

• Nouveautés Javascript (7/22)

Stockage local (App Cache)

− Navigation hors ligne

− Rapidité

− Allègement de la charge server

CSS3

Compliance HTML5

Conclusion

30 30

• Nouveautés Javascript (8/22)

Stockage local (App Cache)

CSS3

Compliance HTML5

Conclusion

31 31

• Nouveautés Javascript (9/22)

Stockage local (App Cache)

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html

CSS3

Compliance HTML5

Conclusion

32 32

• Nouveautés Javascript (10/22)

Stockage local (App Cache)

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html

Elements à mettre en cache Element nécessitant une connexion Page à afficher si une connesion n’est pas disponible

CSS3

Compliance HTML5

Conclusion

33 33

• Nouveautés Javascript (11/22)

Localisation

− Localisation géographique du navigateur

− Meilleur précision avec équipement GPS (mobile)

− Gestion des exceptions

− Collecte de la position régulière

CSS3

Compliance HTML5

Conclusion

34 34

•Nouveautés Javascript (12/22)

Localisation

coords.latitude: latitude en décimal

coords.longitude: longitude en décimal

coords.accuracy: précision de la position

coords.altitude: altitude en mètre au dessus du niveau de la mer

coords.altitudeAccuracy: précision de l'altitude

coords.heading: orientation en dégré depuis le nord (sens des aiguilles d'une montre)

coords.speed: vitesse mètre par second

timestamp: date de la réponse

CSS3

Compliance HTML5

Conclusion

35 35

•Nouveautés Javascript (13/22)

Localisation

CSS3

Compliance HTML5

Conclusion

36 36

•Nouveautés Javascript (14/22)

Localisation

CSS3

Compliance HTML5

Conclusion

37 37

• Nouveautés Javascript (15/22)

Localisation

CSS3

Compliance HTML5

Conclusion

38 38

• Nouveautés Javascript (16/22)

Drag and Drop

− Déplace un élément d’une zone à une autre

− Natif, plus d’émulation par bibliothèques javascripts

− Traitement spécifique via javascript

CSS3

Compliance HTML5

Conclusion

39 39

•Nouveautés Javascript (17/22)

Drag and Drop

CSS3

Compliance HTML5

Conclusion

40 40

•Nouveautés Javascript (18/22)

Drag and Drop

CSS3

Compliance HTML5

Conclusion

42 42

• Nouveautés Javascript (19/22)

ToolBox

− Web Worker

− Communication Server SSE

CSS3

Compliance HTML5

Conclusion

43 43

•Nouveautés Javascript (20/22) ToolBox

− Web Worker: JavaScript run in background

demo_workers.js

CSS3

Compliance HTML5

Conclusion

44 44

•Nouveautés Javascript (21/22) ToolBox

− Server-Sent Events (SSE): get automatically updates from server

demo_sse.php

CSS3

Compliance HTML5

Conclusion

45 45

•Nouveautés Javascript (22/22) ToolBox

− Server-Sent Events (SSE): get automatically updates from server

CSS3

Compliance HTML5

Conclusion

46

CSS3

Introduction

Nouveautés Effets visuels

Nouveautés Sélecteurs

Nouveautés Utilitaires

CSS3

Compliance HTML5

Conclusion

47 47

• Introduction

Source:http://blog.tangcs.com/2011/04/15/html-css-tutorials-intro/

CSS3

Compliance HTML5

Conclusion

48 48

• Préfixes propriétaires

Un monde pas encore standardisé

− Les nouvelles propriétés CSS3 doivent être

différencieés

− Chaque navigateur peut possèder sa propre

implémentation

− Utilisation de préfixes propriétaires pour les

implémentations différentes

-ms-

-moz-

-webkit-

-webkit-

-O-

CSS3

Compliance HTML5

Conclusion

49

CSS3

Introduction

Nouveautés Effets visuels

Nouveautés Sélecteurs

Nouveautés Utilitaires

CSS3

Compliance HTML5

Conclusion

50 50

• Nouveautés: Effets Visuels (1/19)

Border

Background

Texte

Transformation

Transition

Animation

CSS3

Compliance HTML5

Conclusion

51 51

• Nouveautés: Effets Visuels (2/19)

Border

CSS3

Compliance HTML5

Conclusion

52 52

• Nouveautés: Effets Visuels (3/19)

Background

CSS3

Compliance HTML5

Conclusion

53 53

• Nouveautés: Effets Visuels (4/19)

Background

CSS3

Compliance HTML5

Conclusion

54 54

• Nouveautés: Effets Visuels (5/19)

Texte

CSS3

Compliance HTML5

Conclusion

55 55

• Nouveautés: Effets Visuels (6/19)

Texte

Source: http://www.w3schools.com/css3/css3_text_effects.asp

CSS3

Compliance HTML5

Conclusion

56 56

• Nouveautés: Effets Visuels (7/19)

Texte (font)

CSS3

Compliance HTML5

Conclusion

57 57

• Nouveautés: Effets Visuels (8/19)

Transformation (2D)

CSS3

Compliance HTML5

Conclusion

58 58

• Nouveautés: Effets Visuels (9/19)

Transformation (2D)

CSS3

Compliance HTML5

Conclusion

59 59

• Nouveautés: Effets Visuels (10/19)

Transformation (2D)

CSS3

Compliance HTML5

Conclusion

60 60

• Nouveautés: Effets Visuels (11/19)

Transformation (2D)

CSS3

Compliance HTML5

Conclusion

61 61

• Nouveautés: Effets Visuels (12/19)

Transformation (3D)

Source: http://debray-jerome.developpez.com/articles/les-transformations-3d-en-css3/

CSS3

Compliance HTML5

Conclusion

62 62

• Nouveautés: Effets Visuels (13/19)

Transformation (3D)

Source: http://demo.marcofolio.net/3d_animation_css3/

CSS3

Compliance HTML5

Conclusion

63 63

• Nouveautés: Effets Visuels (14/19)

Transition

transition-property: détermine à quelle propriété CSS la transition sera appliquée

transition-duration: définit la durée que prendra la transition

transition-timing-function: définit comment la durée de la transition sera calculée

(linear, ease, etc...)

transition-delay: définit quand la transition commencera

CSS3

Compliance HTML5

Conclusion

64 64

• Nouveautés: Effets Visuels (15/19)

Transition

CSS3

Compliance HTML5

Conclusion

65 65

• Nouveautés: Effets Visuels (16/19)

Transition

T=0s T=2s T=3s

T=4s T=3s

CSS3

Compliance HTML5

Conclusion

66 66

• Nouveautés: Effets Visuels (17/19)

Animation

@keyframes: défini une animation

animation-name: nom de l'animation @keyframes

animation-duration: durée de l'animation permettant d'accomplir un cycle

(sec or millisec)

animation-timing-function: définit comment la durée de la transition sera

calculée (linear, ease, etc...)

animation-delay: définit quand la transition commencera

animation-iteration-count: definit le nombre de fois que sera executé

l'animation

animation-direction: definit la direction de l'animation

animation-play-state: definit si l'animation est "running" ou "paused"

CSS3

Compliance HTML5

Conclusion

67 67

• Nouveautés: Effets Visuels (18/19)

Animation

CSS3

Compliance HTML5

Conclusion

68 68

• Nouveautés: Effets Visuels (19/19)

Animation

CSS3

Compliance HTML5

Conclusion

69

CSS3

Introduction

Nouveautés Effets visuels

Nouveautés Sélecteurs

Nouveautés Utilitaires

CSS3

Compliance HTML5

Conclusion

70 70

• Nouveautés: Les sélecteurs (1/7)

Sélection par position des fils

Sélection d’éléments par valeur d’un attributs

Exclusion d’éléments

CSS3

Compliance HTML5

Conclusion

71 71

• Nouveautés: Les sélecteurs (2/7)

Sélection par position des fils

:only-child p:only-child Selectionne des tous les éléments <p> qui sont l'unique fils de ses parents :nth-child(n) p:nth-child(2) Selectionne tous les éléments <p> qui sont le second fils de ses parents :nth-last-child(n) p:nth-last-child(2) Selectionne tous les éléments <p> qui sont l'avant dernier fils de ses parents :nth-of-type(n) p:nth-of-type(2) Selectionne tous les éléments <p> qui sont les sont les second élément p de ses parents :nth-last-of-type(n) p:nth-last-of-type(2) Selectionne tous les éléments <p> qui sont les avant dernier fils de type p de ses parents :last-child p:last-child Selectionne tous les éléments <p> qui sont l'avant dernier fils de ses parents

CSS3

Compliance HTML5

Conclusion

72 72

• Nouveautés: Les sélecteurs (3/7)

Sélection par position des fils

CSS3

Compliance HTML5

Conclusion

73 73

• Nouveautés: Les sélecteurs (4/7)

Sélection par position des fils

:first-of-type p:first-of-type :last-of-type p:last-of-type :only-of-type p:only-of-type :root

:only-child p:only-child :nth-child(n) p:nth-child(2) :nth-last-child(n) p:nth-last-child(2) :nth-of-type(n) p:nth-of-type(2) :nth-last-of-type(n) p:nth-last-of-type(2) :last-child p:last-child

CSS3

Compliance HTML5

Conclusion

74 74

• Nouveautés: Les sélecteurs (5/7)

Sélection d’éléments par valeur d’un attributs

element1~element2 p~ul tous les éléments <ul> qui sont précédés par l'élément p [attribute^=value] a[src^="https" ] tous les éléments a dont la valeur de l'attribut src commence par la valeur "https" [attribute$=value] a[src$=".pdf" ] tous les éléments a dont la valeur de l'attribut src finit par la valeur ".pdf" [attribute*=value] a[src*="w3schools" ] tous les éléments a dont la valeur de l'attribut src contient la valeur "W3schools"

CSS3

Compliance HTML5

Conclusion

75 75

• Nouveautés: Les sélecteurs (6/7)

Sélection d’éléments par valeur d’un attributs

CSS3

Compliance HTML5

Conclusion

76 76

• Nouveautés: Les sélecteurs (7/7)

Exclusion d’élément

CSS3

Compliance HTML5

Conclusion

77

CSS3

Introduction

Nouveautés Effets visuels

Nouveautés Sélecteurs

Nouveautés Utilitaires

CSS3

Compliance HTML5

Conclusion

78 78

• Nouveautés: Les utilitaires (1/7)

Gradients

Media query

Columns

Box

CSS3

Compliance HTML5

Conclusion

79 79

• Nouveautés : Les utilitaires (2/7)

Gadient

Source: http://gradients.glrzad.com/

CSS3

Compliance HTML5

Conclusion

80 80

• Nouveautés : Les utilitaires (3/7)

Gadient

Source: http://gradients.glrzad.com/

CSS3

Compliance HTML5

Conclusion

81 81

• Nouveautés: : Les utilitaires (4/7)

Media query

CSS3

Compliance HTML5

Conclusion

82 82

• Nouveautés: : Les utilitaires (5/7)

Columns

CSS3

Compliance HTML5

Conclusion

83 83

• Nouveautés: : Les utilitaires (6/7)

Box

CSS3

Compliance HTML5

Conclusion

84 84

• Nouveautés: : Les utilitaires (7/7)

Box

CSS3

Compliance HTML5

Conclusion

85

Compliance

HTML 5

CSS 3

CSS3

Compliance HTML5

Conclusion

86 86

• HTML 5

• 1 Référence : W3C http://www.w3schools.com/html5/html5_ref_dtd.asp

• Other http://findmebyip.com/litmus/

CSS3

Compliance HTML5

Conclusion

87 87

CSS3

Compliance HTML5

Conclusion

88 88

CSS3

Compliance HTML5

Conclusion

89 89

CSS3

Compliance HTML5

Conclusion

90 90

CSS3

Compliance HTML5

Conclusion

91 91

CSS3

Compliance HTML5

Conclusion

92 92

• CSS 3

• 1 Référence : W3C http://www.w3schools.com/cssref/css3_browsersupport.asp

• Other http://findmebyip.com/litmus/

CSS3

Compliance HTML5

Conclusion

93 93

CSS3

Compliance HTML5

Conclusion

94 94

CSS3

Compliance HTML5

Conclusion

95

Conclusion

CSS3

Compliance HTML5

Conclusion

96 96

• Conclusion

Toujours pas un standard W3C

Programmation spécifique

Attention à la prise en charge des vieux navigateurs

Internet Explorer: un cas à part

Multimédia et animation à l’honneur

Vers une programmation applicative

Utilisation des ressources locales ! (CPU, stockage, carte

video, device)

CSS3

Compliance HTML5

Conclusion

97

Questions ?

CSS3

Compliance HTML5

Conclusion