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

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







5 5


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

VS

CSS3

Compliance HTML5

Conclusion

6 6


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


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

HTML 4 HTML 5

CSS3

Compliance HTML5

Conclusion

10 10



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



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



Sample Elements

CSS3

Compliance HTML5

Conclusion

13 13


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

http://peterned.home.xs4all.nl/demooo/

14 14


Balises Multimédia

Sample Sample Execution

CSS3

Compliance HTML5

Conclusion

15 15


Balises Multimédia

Sample Canvas

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

CSS3

Compliance HTML5

Conclusion

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



16 16


Balises Multimédia

Sample SVG Sample Execution

CSS3

Compliance HTML5

Conclusion

17 17


Balises Multimédia

− Canvas vs SVG

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

CSS3

Compliance HTML5

Conclusion

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

18 18


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


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


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

Sample Execution Sample

CSS3

Compliance HTML5

Conclusion

21 21


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


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


Stockage local (local)

CSS3

Compliance HTML5

Conclusion

27 27


Stockage local (session)

CSS3

Compliance HTML5

Conclusion

28 28


Stockage local (session)

CSS3

Compliance HTML5

Conclusion

29 29


Stockage local (App Cache)

− Navigation hors ligne

− Rapidité

− Allègement de la charge server

CSS3

Compliance HTML5

Conclusion

30 30



CSS3

Compliance HTML5

Conclusion

31 31



<!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



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


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


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


Localisation

CSS3

Compliance HTML5

Conclusion

36 36


Localisation

CSS3

Compliance HTML5

Conclusion

37 37


Localisation

CSS3

Compliance HTML5

Conclusion

38 38


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


Drag and Drop

CSS3

Compliance HTML5

Conclusion

40 40


Drag and Drop

CSS3

Compliance HTML5

Conclusion

42 42


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


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

demo_sse.php

CSS3

Compliance HTML5

Conclusion

45 45


− 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




CSS3

Compliance HTML5

Conclusion

50 50

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

Border

Background

Texte

Transformation

Transition

Animation

CSS3

Compliance HTML5

Conclusion

51 51


Border

CSS3

Compliance HTML5

Conclusion

52 52


Background

CSS3

Compliance HTML5

Conclusion

53 53


Background

CSS3

Compliance HTML5

Conclusion

54 54


Texte

CSS3

Compliance HTML5

Conclusion

55 55


Texte

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

CSS3

Compliance HTML5

Conclusion

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


56 56


Texte (font)

CSS3

Compliance HTML5

Conclusion

57 57


Transformation (2D)

CSS3

Compliance HTML5

Conclusion

58 58


Transformation (2D)

CSS3

Compliance HTML5

Conclusion

59 59


Transformation (2D)

CSS3

Compliance HTML5

Conclusion

60 60


Transformation (2D)

CSS3

Compliance HTML5

Conclusion

61 61


Transformation (3D)

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

CSS3

Compliance HTML5

Conclusion


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











62 62


Transformation (3D)

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

CSS3

Compliance HTML5

Conclusion


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

63 63


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


Transition

CSS3

Compliance HTML5

Conclusion

65 65


Transition

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

T=4s T=3s

CSS3

Compliance HTML5

Conclusion

66 66


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


Animation

CSS3

Compliance HTML5

Conclusion

68 68


Animation

CSS3

Compliance HTML5

Conclusion

69

CSS3

Introduction




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



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

CSS3

Compliance HTML5

Conclusion

72 72



CSS3

Compliance HTML5

Conclusion

73 73



: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



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



CSS3

Compliance HTML5

Conclusion

76 76


Exclusion d’élément

CSS3

Compliance HTML5

Conclusion

77

CSS3

Introduction




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


http://gradients.glrzad.com/

80 80

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

Gadient

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

CSS3

Compliance HTML5

Conclusion


http://gradients.glrzad.com/

81 81

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

Media query

CSS3

Compliance HTML5

Conclusion

82 82


Columns

CSS3

Compliance HTML5

Conclusion

83 83


Box

CSS3

Compliance HTML5

Conclusion

84 84


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

http://www.w3schools.com/html5/html5_ref_dtd.asp

http://findmebyip.com/litmus/

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

http://www.w3schools.com/cssref/css3_browsersupport.asp

http://findmebyip.com/litmus/

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

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

Documents