INFO4007 - aquadie

Transcription

INFO4007 - aquadie

Hiver 2014
—————————————————————————————————————————————–
INFO4007
S. C. T ECHNOLOGIE
DE L’ INFOROUTE
Éric Hervet
Université de Moncton
Faculté des sciences
Département d’informatique
Moncton, N.-B., CANADA
E1A 3E9
Table des matières
I.
HTML/CSS/JavaScript . . . . . . . . . . . . . . . . . . .
I.1.
W3C & évolution . . . . . . . . . . . . . . . . . . .
I.2.
Syntaxe HTML, encodages, types MIME . . . .
I.3.
Styles CSS . . . . . . . . . . . . . . . . . . . . . .
I.4.
Rappels JavaScript . . . . . . . . . . . . . . . . .
I.5.
Protocole HTTP . . . . . . . . . . . . . . . . . . .
II. Licences . . . . . . . . . . . . . . . . . . . . . . . . . . . .
III. Navigateurs web . . . . . . . . . . . . . . . . . . . . . . .
III.1. Navigateurs, moteurs de rendu . . . . . . . . . .
III.2. Téléphones intelligents, tablettes . . . . . . . . .
III.3. Bibliothèques de détection et de modernisation
III.4. Frameworks HTML . . . . . . . . . . . . . . . . .
III.5. Outils de développement . . . . . . . . . . . . . .
IV. Éléments & attributs . . . . . . . . . . . . . . . . . . . .
IV.1. Modèles de contenu . . . . . . . . . . . . . . . . .
IV.2. Doctype . . . . . . . . . . . . . . . . . . . . . . . .
IV.3. Éléments (balises) . . . . . . . . . . . . . . . . . .
IV.4. Attributs HTML globaux . . . . . . . . . . . . . .
IV.5. Relations des liens . . . . . . . . . . . . . . . . .
IV.6. Attributs événements . . . . . . . . . . . . . . . .
V. Formulaire . . . . . . . . . . . . . . . . . . . . . . . . . .
V.1. <input> et variantes . . . . . . . . . . . . . . . .
V.2. Autres éléments . . . . . . . . . . . . . . . . . . .
V.3. Validation des données . . . . . . . . . . . . . . .
VI. Microformats . . . . . . . . . . . . . . . . . . . . . . . . .
VI.1. Web sémantique . . . . . . . . . . . . . . . . . . .
VI.2. API DOM Microdata . . . . . . . . . . . . . . . .
VII. Audio & Vidéo . . . . . . . . . . . . . . . . . . . . . . . .
VII.1. Conteneurs, codecs, licences et support . . . . .
VII.1.1. Vidéo . . . . . . . . . . . . . . . . . . . .
VII.1.2. Audio . . . . . . . . . . . . . . . . . . . .
VII.2. Outils d’encodage et de conversion . . . . . . . .
VII.3. Balises média & attributs . . . . . . . . . . . . .
VII.4. Interface de contrôle et événements . . . . . . .
i
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
4
8
9
10
13
14
14
14
15
16
17
21
21
21
22
38
40
41
45
45
46
47
48
48
48
49
49
50
55
59
59
62
VII.5. Prise en charge par les navigateurs . .
VIII.HTML5 Canvas . . . . . . . . . . . . . . . . . .
VIII.1. Élément <canvas> . . . . . . . . . . . . .
VIII.2. Formes géométriques . . . . . . . . . . .
VIII.3. Chemins . . . . . . . . . . . . . . . . . . .
VIII.4. Styles, remplissages, couleurs . . . . . .
VIII.5. Dégradés . . . . . . . . . . . . . . . . . .
VIII.6. Transformations . . . . . . . . . . . . . .
VIII.7. Images . . . . . . . . . . . . . . . . . . . .
VIII.8. Pixels . . . . . . . . . . . . . . . . . . . .
VIII.9. Texte . . . . . . . . . . . . . . . . . . . . .
VIII.10.Ombrages . . . . . . . . . . . . . . . . . .
VIII.11.Transparence, composition & masques
VIII.12.Contrôle clavier & souris . . . . . . . . .
VIII.13.Animation et jeux . . . . . . . . . . . . .
VIII.14.3D : WebGL . . . . . . . . . . . . . . . . .
VIII.15.Graphisme vectoriel : SVG . . . . . . . .
IX. Géolocalisation . . . . . . . . . . . . . . . . . . .
IX.1. Principe . . . . . . . . . . . . . . . . . . .
IX.2. Technique . . . . . . . . . . . . . . . . . .
X. File API . . . . . . . . . . . . . . . . . . . . . . .
X.1. Principe . . . . . . . . . . . . . . . . . . .
X.2. Fonctionnement . . . . . . . . . . . . . .
X.3. Lecture avec FileReader . . . . . . . . .
X.4. Upload simple avec PHP . . . . . . . . .
X.5. Upload avec XMLHttpRequest2 . . . . .
XI. Drag & Drop . . . . . . . . . . . . . . . . . . . .
XI.1. Principe . . . . . . . . . . . . . . . . . . .
XI.2. Événements et attributs . . . . . . . . .
XI.3. Glisser (Drag) . . . . . . . . . . . . . . .
XI.4. Déposer (Drop) . . . . . . . . . . . . . . .
XI.5. Interface DataTransfer . . . . . . . . . .
XI.6. Glisser-déposer de fichiers . . . . . . . .
XI.7. Prise en charge . . . . . . . . . . . . . . .
XII. Événements “Push” . . . . . . . . . . . . . . . .
XII.1. Principe . . . . . . . . . . . . . . . . . . .
XII.2. Technique . . . . . . . . . . . . . . . . . .
XIII.JavaScript . . . . . . . . . . . . . . . . . . . . . .
XIII.1. Bases du langage . . . . . . . . . . . . .
XIII.2. Méthodes de sélection DOM . . . . . . .
XIII.3. Propriétés et méthodes DOM . . . . . .
XIII.4. Manipulation DOM . . . . . . . . . . . .
XIII.5. Méthodes pour formulaires . . . . . . .
ii
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
62
63
63
64
64
64
64
64
64
64
64
64
64
64
64
64
65
66
66
67
69
69
69
70
71
71
72
72
72
73
73
74
75
75
76
76
76
78
78
79
80
81
82
XIII.6. Gestionnaire d’événements . . . . . . . . . .
XIII.7. matchMedia() et Media Queries . . . . . . .
XIV. Web Sockets . . . . . . . . . . . . . . . . . . . . . . . .
XIV.1. Protocole commun . . . . . . . . . . . . . . . .
XIV.2. Librairies alternatives . . . . . . . . . . . . .
XV. Web Storage . . . . . . . . . . . . . . . . . . . . . . . .
XV.1. Deux espaces de stockage . . . . . . . . . . .
XV.2. Interface Storage . . . . . . . . . . . . . . . .
XV.3. Utilisation de JSON . . . . . . . . . . . . . . .
XV.4. Stocker un événement . . . . . . . . . . . . .
XVI. Bases de données . . . . . . . . . . . . . . . . . . . . .
XVI.1. Indexed Database . . . . . . . . . . . . . . . .
XVII.CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XVII.1.Sélecteurs . . . . . . . . . . . . . . . . . . . . .
XVII.2.Propriétés . . . . . . . . . . . . . . . . . . . . .
XVII.3.Pseudo-classes et pseudo-éléments . . . . . .
XVII.4.Règles @ . . . . . . . . . . . . . . . . . . . . . .
XVII.5.Media Queries . . . . . . . . . . . . . . . . . .
XVIII.
Animations CSS3 . . . . . . . . . . . . . . . . . . . .
XIX. Frameworks CSS3 . . . . . . . . . . . . . . . . . . . .
XX. jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . .
XX.1. Présentation . . . . . . . . . . . . . . . . . . .
XX.2. Exemple « Hello World » . . . . . . . . . . . .
XX.3. jQuery et Web Storage . . . . . . . . . . . . .
XX.4. Modification du DOM . . . . . . . . . . . . . .
XX.5. Navigation dans le DOM . . . . . . . . . . . .
XX.6. Gestion des clics . . . . . . . . . . . . . . . . .
XX.7. DOM Traversals . . . . . . . . . . . . . . . . .
XX.8. Chaînage de fonctions jQuery . . . . . . . . .
XX.9. Géolocalisation . . . . . . . . . . . . . . . . . .
XX.10. ACCÉLÉROMÈTRE ! . . . . . . . . . . . . . .
XXI. Animation CSS3 & jQuery . . . . . . . . . . . . . . .
XXII.Contrôles jQuery . . . . . . . . . . . . . . . . . . . . .
XXIII.
jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . .
XXIII.1.
Présentation . . . . . . . . . . . . . . . . . . .
XXIII.2.
Exemples de base . . . . . . . . . . . . . . . .
XXIII.3.
Transitions entre pages . . . . . . . . . . . .
XXIII.4.
Page unique « multivue » . . . . . . . . . . . .
XXIII.5.
Positionnement des entêtes et pieds de page
XXIII.6.
Les différents types de boutons . . . . . . . .
XXIII.7.
Formulaires web mobiles . . . . . . . . . . . .
XXIII.8.
List Views . . . . . . . . . . . . . . . . . . . . .
XXIII.9.
Barres de navigation . . . . . . . . . . . . . .
iii
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
82
83
84
84
85
87
87
88
89
90
92
92
94
94
95
95
95
96
98
99
100
100
100
100
101
101
102
102
102
102
102
103
104
105
105
105
105
106
106
107
107
107
107
XXIII.10.
Menus de sélection . . . . . . . . . . . . . . . . .
XXIII.11.
Géolocalisation . . . . . . . . . . . . . . . . . . . .
XXIV.Design responsif . . . . . . . . . . . . . . . . . . . . . . .
XXIV.1.Media Queries . . . . . . . . . . . . . . . . . . . .
XXIV.2.Multi-colonnes . . . . . . . . . . . . . . . . . . . .
XXIV.3.Images bordures . . . . . . . . . . . . . . . . . . .
XXIV.4.Flexbox Layout . . . . . . . . . . . . . . . . . . . .
XXIV.5.Type de connexion . . . . . . . . . . . . . . . . . .
XXV.BlackBerry 10 . . . . . . . . . . . . . . . . . . . . . . . .
XXV.1.Historique . . . . . . . . . . . . . . . . . . . . . . .
XXV.2.Le système BB10 . . . . . . . . . . . . . . . . . .
XXV.3.Z10 . . . . . . . . . . . . . . . . . . . . . . . . . . .
XXV.4.IDE . . . . . . . . . . . . . . . . . . . . . . . . . . .
XXV.4.1. main.cpp . . . . . . . . . . . . . . . . . .
XXV.4.2. Chargement d’un fichier QML . . . . .
XXV.4.3. Créer une « UI » avec QML . . . . . . .
XXV.4.4. Images . . . . . . . . . . . . . . . . . . .
XXV.4.5. Composants de dialogue . . . . . . . . .
XXV.4.6. Capteurs . . . . . . . . . . . . . . . . . .
XXV.4.7. Jeu basé sur l’accéléromètre . . . . . .
XXV.4.8. État de la batterie . . . . . . . . . . . .
XXV.4.9. Lecteur de code barre . . . . . . . . . .
XXV.4.10.Gestion d’une base de données SQLite
XXV.4.11.Requête SQL en QML . . . . . . . . . .
XXV.4.12.Citations . . . . . . . . . . . . . . . . . .
XXV.4.13.FilePicker . . . . . . . . . . . . . . . .
XXV.4.14.Calendrier . . . . . . . . . . . . . . . . .
XXV.4.15.Gestion des comptes . . . . . . . . . . .
XXV.4.16.Dictaphone . . . . . . . . . . . . . . . . .
XXV.4.17.Lecture/écriture au format JSON . . .
XXV.4.18.Manipulation de la lumière LED . . .
XXV.4.19.MapView . . . . . . . . . . . . . . . . . .
XXV.4.20.Notifications . . . . . . . . . . . . . . . .
XXV.4.21.Orientation . . . . . . . . . . . . . . . .
XXV.4.22.Stockage permanent . . . . . . . . . . .
XXV.4.23.Sons système . . . . . . . . . . . . . . .
iv
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
107
107
108
108
110
111
111
111
113
113
113
114
115
115
116
116
122
123
123
123
123
124
124
124
124
125
125
125
126
126
126
127
127
127
127
128
INFO4007
I.
Technologie de l’inforoute
I.. HTML/CSS/JavaScript
Évolution de HTML/CSS/JavaScript
I.1.
W3C & évolution
+ Années 1970 : La DARPA 1 crée le réseau Arpanet pour échanger des données entre universités. Le protocole TCP/IP est inventé pour standardiser le transfert des données entre
ordinateurs.
+ Années 1980 : Arpanet est scindé en deux, d’un côté Milnet (à vocation militaire), de l’autre
côté NSFnet (à vocation universitaire, ex-Internet). Les premières applications comme FTP 2
ou le courriel font leur apparition, à des vitesses de 56 kbit/s. Le système DNS 3 est inventé
pour associer des noms aux adresses IP.
+ 1984 : le CERN 4 adopte le même type de réseau pour ses échanges internes, puis se relie à un
laboratoire américain via Internet. C’est l’équipe dirigée par Tim Berners-Lee qui est chargée
d’inventer un nouveau protocole pour mettre en ligne des pages avec des liens hypertextes.
+ L’utilisation de ces pages reliées entre elles devient public et commence petit-à-petit à former
un réseau mondial appelé World Wide Web.
Les premières versions de HTML 5 voient le jour dans les années 1990, dérivées de la famille
des langages SGML 6 .
Les pages HTML utilisent le protocole HTTP 7 pour établir un dialogue entre le navigateur et
le serveur et échanger les données sur le réseau.
+ En 1993, le navigateur Mosaic développé par Sun sous Unix devient très populaire et inaugure
la balise <img> pour intégrer des images, ainsi que les formulaires (<form>) pour la saisie des
données.
En 1994, une partie de l’équipe fonde Netscape et crée le navigateur Netscape Navigator qui
incorpore de nombreux éléments de présentation (polices, alignements, etc.), ce qui finalement
va à l’encontre de l’objectif initial du langage HTML.
+ Tim Berners-Lee quitte le CERN en 1994 pour rejoindre le MIT 8 et fonde le W3C 9 pour
promouvoir la standardisation des langages du Web.
+ 1995 : le W3C publie HTML 2.0 et débute le brouillon HTML 3.0 qui ne débouchera sur aucune
implémentation officielle.
1.
2.
3.
4.
5.
6.
7.
8.
9.
Defense Advanced Research Projects Agency. http://www.darpa.mil
File Transfer Protocol.
Domain Name System.
Organisation européenne pour la recherche nucléaire.
HyperText Markup Language.
Standard Generalized Markup Language.
HyperText Transfer Protocol.
Massachusetts Institute of Technology.
World Wide Web Consortium. http://www.w3.org
Éric Hervet
- 1/128 -
Hiver 2014
INFO4007
Du côté de Netscape, Brendan Eich invente le langage JavaScript.
Microsoft s’aperçoit de l’existence d’Internet ( !) et crée la première version d’Internet Explorer
pour Windows . . . basée sur Mosaic.
+ 1996 : Un nouveau standard nommé CSS 10 est officialisé pour régir tout ce qui concerne la
présentation des documents et ainsi séparer la forme du contenu.
Internet Explorer passe à la version 3.0 et commence à intégrer quelques fonctionnalités de
CSS.
+ 1997 : le W3C publie HTML 3.2.
Internet Explorer 4.0 est installé par défaut avec Windows 98 et domine Netscape. Il fait malheureusement appel à des nouveautés dont Microsoft est propriétaire (JScript, VBScript, ActiveX).
Le brouillon sur HTML 4.0 continue pour intégrer de nombreuses fonctionnalités avancées
(support des styles, des scripts, des frames et des objets). HTML 4.0 est publié en décembre
1997.
Après HTML 4.0, le premier groupe de travail (HTML Working Group) s’arrête. Le second
travaille sur XHTML, une version chargée de redéfinir HTML comme une application de
XML 11 . Ce groupe est à l’origine de XHTML 1.0, qui ne produit aucune avancée significative
pour le langage HTML.
+ 1998 : le W3C publie une recommandation de CSS 2.0 puis une révision CSS 2.1 avec une
approche plus réaliste à implémenter. Parallèlement, le développement de CSS 3 commence.
+ S’ensuit une longue période d’apparente stagnation du côté du W3C, parfois critiqué par les
développeurs web pour son fonctionnement trop fermé.
Les animations Flash remportent un succès fulgurant, rendant possible grâce à une petite
extension au navigateur, d’intégrer moult animations, dessins vectoriels, sons, vidéos, éléments
d’interaction, etc., le tout complété avec un langage de programmation, ActionScript.
En 2000, AOL rachète Netscape sur le déclin. La version 4 du navigateur est renommée « Communicator » mais est nettement peu performante et ne résiste pas aux pratiques commerciales
de Microsoft.
Le code source de ce qui devait devenir la version 5.0 de Netscape passe sous licence libre en
1998 avec la création de l’organisation Mozilla.
En 2001, Microsoft lance Internet Explorer 6.0 et n’y touche plus pendant 6 ans, considérant la
suprématie établie (jusqu’à 95% de parts de marché).
Le W3C publie XHTML 1.1 qui se révèle complexe à mettre en place (trop de contraintes de
spécifications).
10. Cascading Style Sheets.
11. eXtensible Markup Language.
Éric Hervet
- 2/128 -
Hiver 2014
INFO4007
+ En 2002, la fondation Mozilla lance un nouveau projet de navigateur Open Source nommé successivement Phoenix, Firebird puis Firefox, dont les innovations séduisent un public averti
puis de plus en plus large. Ses forces principales sont son extensibilité et son respect des standards.
Opera Software propose le navigateur Opera, d’abord payant puis gratuit à partir de 2005.
On le retrouve très tôt sur les consoles de jeu et les plates-formes mobiles.
Les soucis commencent lorsque le W3C décide d’évoluer à terme vers XHTML 2.0 dont le premier brouillon est dévoilé en août 2002. Cette nouvelle version est incompatible avec les précédentes !
Le 4 juin 2004, la mailing-list WhatWG 12 est créée à l’initiative de Ian Hickson d’Opera qui
travaille sur Web Forms 2.0 pour étendre les fonctionnalités des formulaires HTML. Le W3C,
quant à lui, tente de persévérer sur la voie du XML.
Le WhatWG est formé de passionnés souhaitant améliorer HTML, issus entre autres d’équipes
de Mozilla, d’Apple et d’Opera. Leur objectif est de faire évoluer le langage pour répondre
aux besoins concrets de l’explosion du Web, tout en maintenant sa simplicité et sa rétrocompatibilité. Le WhatWG commence son travail en juin 2004 sous la dénomination de Web
Applications 1.0. Ian Hickson devient éditeur officiel du document HTML 5 et rejoint
finalement Google (membre du W3C).
+ En avril 2007, la spécification HTML 5 est soutenue devant le W3C par Mozilla, Apple et
Opera, et acceptée comme point de départ du nouveau groupe de travail HTML, qui publie le
premier brouillon HTML 5 le 22 janvier 2008 et reconnaît que XHTML 2.0 est un projet trop
ambitieux.
Le W3C et WhatWG collaborent alors sur HTML 5 avec des approches différentes mais avec un
pragmatisme certain.
Entre temps, Apple a lancé Safari pour Mac (2003) puis Windows (2009).
Google développe son propre navigateur Google Chrome à partir de septembre 2008, sur la
base d’un projet libre appelé Chromium . . . à un rythme extrêmement soutenu. Google vise la
simplicité de navigation et les performances à l’exécution.
+ Les navigateurs mobiles sont des dérivés des navigateurs pour ordinateurs, permettant de
doter téléphones et intelligents et tablettes de la possibilité d’accéder au Web depuis que les
capacités des réseaux sans fil proposent des débits acceptables et que la mobilité entre dans
les moeurs. Ils se comportent différemment selon les temps de chargement et la navigabilité au
doigt.
Microsoft se réveille est reprend un rythme de développement normal avec Internet Explorer 7
en 2006 à l’occasion de la sortie de Windows Vista.
Internet Explorer 8 apparaît en mars 2009, et c’est en juillet de la même année que le
W3C annonce l’arrêt du travail sur XHTML 2.0 pour allier ses forces à WhatWG pour une
nouvelle version de HTML. Pendant que CSS 3 voit ses modules complétés progressivement,
la spécification HTML 5 est désormais adoptée officiellement comme langage de prédilection
12. Web Hypertext Application Technology Working Group.
Éric Hervet
- 3/128 -
Hiver 2014
INFO4007
pour le Web.
+ Dès lors, tous les navigateurs s’efforcent d’intégrer de plus en plus de fonctionnalités du langage
HTML 5, menant à une accélération de nouvelles versions. Mozilla adopte un nouveau modèle
de développement basé sur plusieurs canaux parallèles (Aurora, version Bêta, version Finale).
En 2011, Microsoft surprend tout le monde en confirmant son intérêt pour les standards du
Web et sa volonté de les exploiter à un haut niveau avec Internet Explorer 10. Windows 8 est
distribué fin 2012 avec une nouvelle interface utilisateur qui interprète directement HTML 5,
CSS 3 et JavaScript pour créer des applications intégrées au système.
De nos jours, les différents langages mis en jeu dans la composition d’une page web ou d’une
application web sont souvent : HTML 5, JavaScript et CSS 3. Le terme générique HTML 5
regroupe finalement les trois technologies.
HTML 5 est « livré » avec plusieurs API 13 évoluées qui se manipulent avec JavaScript :
+ La nouvelle version du langage ECMAScript 5, incluant l’API JSON.
+ Les tableaux typés natifs (pour un gain de performance).
+ XMLHttpRequest 2 et les objets FormData.
+ L’API Selectors et l’attribut classList.
+ Les attributs async et defer.
+ Plus diverses améliorations mineures au niveau atomique destinées à soulager les développeurs
web.
I.2.
Syntaxe HTML, encodages, types MIME
Bien que rétrocompatible et très ressemblante à la syntaxe HTML 4, la syntaxe HTML 5 n’est
pourtant plus basée sur SGML. Un document HTML 5 commence toujours par une ligne doctype
qui permet de passer en mode de rendu conforme aux standards dans les navigateurs analysant la
déclaration de type (doctype sniffing).
Les balises ou éléments HTML servent à structurer le contenu d’un document. Une balise définit
la sémantique, le comportement et éventuellement une apparence prédéfinie via la feuille de style
interne du navigateur.
HTML 5 peut être classifié en plusieurs catégories d’éléments :
13. Application Programming Interface.
Éric Hervet
- 4/128 -
Hiver 2014
INFO4007
Métadonnées
Flux
Section
Titrage
Texte
Présentation
ou
comportement
Contenu structuré
En-tête et pied de
page
Titres et soustitres
Texte du document
base, command, link, meta, noscript, script, style,
title
a, abbr, address, area, article, aside, audio, b,
bdi, bdo, blockquote, br, button, canvas, cite, code,
command, datalist, del, details, dfn, div, dl, em,
embed, fieldset, figure, footer, form, h1, h2, h3,
h4, h5, h6, header, hgroup, hr, i, iframe, img, input,
ins, kbd, keygen, label, map, mark, math, menu, meter,
nav, noscript, object, ol, output, p, pre, progress,
q, ruby, s, samp, script, section, select, small, span,
strong, style, sub, sup, svg, table, textarea, time,
ul, var, video, wbr
article, aside, nav, section
h1, h2, h3, h4, h5, h6, hgroup
a, abbr, area, audio, b, bdi, bdo, br, button, canvas,
cite, code, command, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map,
mark, math, meter, noscript, object, output, progress,
q, ruby, s, samp, script, select, small, span, strong,
sub, sup, svg, textarea, time, var, video, wbr
audio, canvas, embed, iframe, img, object, video, svg
Contenu em- Ressources
exbarqué
ternes
Contenu
Interaction
avec a, audio, button, details, embed, iframe, img, input,
interactif
l’utilisateur
keygen, label, menu, object, select, textarea, video
Selon le contexte, les éléments peuvent se recouvrir et ne sont pas exclusifs.
Un document HTML possède par défaut une tête (head) et un corps (body). La tête définit les propriétés globales du document (titre, apparence, méta-informations) et le corps contient des balises
de contenu.
< ! doctype html>
<html>
<head>
<meta charset= " utf −8 " >
< t i t l e > T i t r e du document< / t i t l e >
< / head>
<body>
...
< / body>
< / html>
Éric Hervet
- 5/128 -
Hiver 2014
INFO4007
Les attributs modifient les propriétés des balises HTML. Un élément peut avoir zéro ou plusieurs
attributs, certains facultatifs, d’autres obligatoires.
Les commentaires s’introduisent entre <!−− et −−>.
L’encodage des caractères existe depuis les débuts de l’informatique. Il consiste à définir le stockage
en binaire, le seul langage compris par un processeur, les caractères typographiques humains.
Aux tous débuts, chaque caractère était codé sur 7 bits grâce au code ASCII 14 , ce qui permettait
jusqu’à 127 possibilités (lettres, chiffres, symboles de ponctuation, signes mathématiques).
L’encodage ISO-8859-1 (appelé aussi Latin-1) permet d’intégrer les caractères accentués de la plupart des langues occidentales (anglais, français, espagnol, italien, etc.). L’ISO-8859-15 (Latin-9) est
une mise à jour apportant quelques nouveaux caractères, notamment le signe de l’Euro.
L’encodage UTF-8 15 quant à lui utilise un encodage variable (entre 1 et 4 octets selon les caractères)
pour étendre le nombre de combinaison possibles et être encore plus « universel ». Les 128 premiers
caractères correspondent (sont compatibles) à ceux de la table ASCII et sont codés sur un seul octet.
Le W3C approuve le choix de l’UTF-8 et recommande son usage pour tout protocole échangeant du
texte sur Internet, dont évidemment HTML et HTTP.
Représentation binaire UTF-8
0xxxxxxx
110xxxxx 10xxxxxx
1110xxxx 10xxxxxx 10xxxxxx
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
Signification
1 octet codant 1 à 7 bits
2 octets codant 8 à 11 bits
Exemples :
Caractère
Espace
A
A
C
◻
Valeur binaire
0100000 (32)
1000001 (65)
0010 000010 101100 (8364)
000 010000 000000 000000 (65536)
Codage UTF-8
00100000
01000001
11100010 10000010 10101100
11110000 10010000 10000000 10000000
Valeur hexadécimale
20
41
E2 82 AC
F0 90 80 80
Les entités HTML sont des codes SGML permettant d’afficher des caractères indépendamment de
l’encodage global du document. Exemples : é pour é, © pour ©, etc.
Le format MIME 16 est un standard qui ajoute des codages supplémentaires à l’ASCII pour l’envoi
de courriels contenant des données non textuelles.
Une déclaration MIME est constituée de deux parties : un type et un sous-type séparés par /. Ceux
débutant par x− ne sont pas standardisés et les préfixes vnd. font référence à une propriété du
vendeur.
14. American Standard Code for Information Interchange.
15. Unicode Tranformation Format-8.
16. Multipurpose Internet Mail Extensions.
Éric Hervet
- 6/128 -
Hiver 2014
INFO4007
application/javascript
application/octet-stream
application/xhtml+xml
application/x-shockwave-flash
application/vnd.ms-excel
application/msword
application/vnd.openxmlformatsofficedocument.wordprocessingml.document
application/vnd.ms-powerpoint
application/vnd.oasis.opendocument.text
application/vnd.oasis.opendocument.spreadsheet
application/vnd.oasis.opendocument.presentation
audio/mpeg
image/gif
image/jpeg
image/png
image/svg+xml
text/css
text/html
text/plain
text/xml
video/mpeg
video/mp4
video/x-flv
Script JavaScript
Flux de données (type inconnu ou fichier exécutable)
XHTML
Animation Adobe Flash
Fichier Microsoft Excel
Fichier Microsoft Word
Fichier Microsoft Word de type Open XML
Fichier Microsoft Powerpoint
Fichier texte OpenDocument
Fichier feuille de calcul OpenDocument
Fichier de présentation OpenDocument
Audio MPEG ou MP3
Image GIF
Image JPEG
Image PNG
Image SVG
Feuille de style CSS
HTML
Texte brut
XML
Vidéo MPEG
Vidéo MP4
Vidéo FLV Flash Video (Adobe)
En HTML 5, les navigateurs se basent d’abord sur l’en-tête HTTP Content-Type fournie par le
serveur, si elle est présente. Exemple :
Content-Type: text/html;charset=UTF-8
Du côté serveur, il est possible de modifier les en-têtes délivrées pour le document de différentes
façons (fichier .htaccess avec un serveur web Apache, instruction PHP, etc.).
Si aucune en-tête HTTP n’est présente, le navigateur tente de détecter le marqueur BOM 17 en
début de fichier. Mais ce marqueur ajouté par les éditeurs de texte est souvent source de difficultés
et peut afficher des caractères indésirables en haut de page s’il est mal interprété.
En dernier recours, l’utilisation de la balise meta dans la section <head> du code HTML peut définir
l’encodage de caractères utilisé dans le document : <meta charset="UTF-8">
Les documents HTML 5 (ou XHTML 5) peuvent être validés grâce à des analyseurs syntaxiques en
ligne. Par exemple :
http://validator.w3.org/
http://jigsaw.w3.org/css-validator pour le CSS
17. Byte Order Mark.
Éric Hervet
- 7/128 -
Hiver 2014
INFO4007
I.3.
Styles CSS
L’apparence d’un document HTML est définie par une ou plusieurs feuilles de style qui lui sont
associées. Le langage CSS définit un ensemble de règles de mise en forme appliquées de façon combinée selon un degré de priorité (styles intrinsèques au navigateur, styles utilisateurs, styles selon
le média de consultation).
La séparation forme (CSS) / contenu (HTML) permet une plus grande souplesse dans la maintenance
des styles globaux pour un site et de se concentrer sur la sémantique des éléments dans le document
HTML.
Le style peut être défini :
+ Dans un fichier externe grâce à la balise <link>.
+ Dans le document HTML grâce à la balise <style> dans la section <head>.
La syntaxe du langage CSS est simple : un sélecteur pour désigner le ou les éléments HTML
auxquels appliquer des propriétés CSS, regroupées entre accolades.
Feuille de style externe :
< ! doctype html>
<html>
<head>
<link rel= " s t y l e s h e e t " media= " screen " href= " s t y l e s . c s s " type= " t e x t / c s s " >
< / head>
<body>
...
< / body>
< / html>
Feuille de style interne :
< ! doctype html>
<html>
<head>
<style type= " t e x t / c s s " >
body
{
background − c o l o r : c h o c o l a t e ;
Éric Hervet
- 8/128 -
Hiver 2014
INFO4007
}
p
{
font − s i z e : 32px ;
text − a l i g n : c e n t e r ;
color : # f f f ;
}
< / style>
< / head>
<body>
...
< / body>
< / html>
Exemples de sélecteurs CSS de base :
p
Tous les éléments p.
p span
Tous les éléments span dans des éléments p.
p, span
Tous les éléments p et span.
div p span
.classe
p.classe
#titre
p#titre
div#titre p.classe
a:hover
input[type=submit]
h1+h2
I.4.
<p>...
<p><span>...
<p>...</p>
<span>...</span>
Tous les éléments span dans des éléments p, <div><p><span>...
eux-mêmes dans des éléments div.
Tous les éléments de classe classe.
<p class="classe">...
<span class="classe">...
Tous les éléments p de classe classe.
<p class="classe">...
L’élément avec l’id titre.
<div id="titre">...
<h1 id="titre">...
L’élément p avec l’id titre.
<p id="titre">...
Tous les éléments p de classe classe, dans <div id="titre">
l’élément div ayant le l’id titre.
<p class="classe">...</p>
<p class="classe">...</p>
</div>
Tous les liens « survolés ».
<a>Lire cet article</a>
Tous les éléments input d’attribut type <input type="submit">
submit
Tous les éléments h2 suivant directement <h1>Titre principal</h1>
des éléments h1
<h2>Sous-titre</h2>
Rappels JavaScript
JavaScript est un langage développé par Netscape en 1995, d’abord intégré à Netscape Navigator,
puis aux autres navigateurs. C’est un langage interprété par le navigateur (client) qui permet
d’ajouter de l’interaction avec l’utilisateur.
Éric Hervet
- 9/128 -
Hiver 2014
INFO4007
Il permet, grâce au DOM 18 , de manipuler les éléments HTML de la page courante : les créer dynamiquement, les modifier, les supprimer, agir sur leurs propriétés CSS, etc.
C’est aussi JavaScript qui est utilisé dans la technologie Ajax 19 pour charger dynamiquement des
contenus en relation avec le serveur, ou encore avec JSON 20 en tant que format de données.
Un « framework » JavaScript est un ensemble de fonctions regroupées dans un fichier externe à
inclure dans une page HTML grâce à la balise <script>. Un framework définit un environnement
permettant d’étendre les possibilités déjà offertes par la base du langage.
jQuery est un framework populaire et facile à aborder. Sa syntaxe simple peut se révéler efficace
en quelques lignes de code. Il comprend des fonctions de modification dynamique du DOM, des
styles CSS, des effets d’animation et des fonctions pour l’écriture de gestionnaires d’événements ou
d’appels Ajax.
Il est recommandé de placer les appels JavaScript ou le chargement des frameworks en fin de document, avant la balise fermante </body> pour ne pas bloquer le chargement de la page. Cependant
certains scripts doivent parfois être placés en amont ou dans le contenu de la page, pour pouvoir agir
dessus.
< ! doctype html>
<html>
<head>
<link rel= " s t y l e s h e e t " media= " screen " href= " s t y l e s . c s s " type= " t e x t / c s s " >
< / head>
<body>
<p>Paragraphe< / p>
<script src= " monfichier . j s " >< / script>
< / body>
< / html>
I.5.
Protocole HTTP
Le protocole HTTP 21 est un protocole de communication pour envoyer des demandes à un serveur
web et transférer (recevoir) le contenu des pages web. HTTP fonctionne habituellement grâce à
TCP/IP, un protocole réseau de plus bas niveau. D’autres protocoles répandus sur Internet sont
SMTP 22 et POP3 23 /IMAP 24 pour la réception et l’envoi de courriels, FTP 25 pour le transfert de
18.
19.
20.
21.
22.
23.
24.
25.
Document Object Model.
Asynchronous JavaScript and XML.
JavaScript Object Notation.
HyperText Transfer Protocol.
Simple Mail Transfer Protocol.
Post Office Protocol.
Internet Message Access Protocol.
File Transfer Protocol.
Éric Hervet
- 10/128 -
Hiver 2014
INFO4007
fichiers, DNS 26 pour la résolution des noms de domaines en adresses IP, etc.
HTTP est basé essentiellement sur un dialogue texte puisqu’à l’origine les pages web sont essentiellement constituées de code HTML. C’est Tim Berners-Lee qui a conçu le protocole HTTP, numéroté
0.9, puis 1.0 puis 1.1.
La plupart du temps, les pages web sont demandées au serveur grâce aux commandes GET et POST.
Il en existe d’autres mais utilisées plus rarement pour des besoins spécifiques (OPTIONS, CONNECT,
HEAD, TRACE, PUT, DELETE).
Exemple :
telnet abaque.ca 80
Trying 139.103.17.3...
Connected to abaque.ca.
Escape character is ’^]’.
GET /index.html HTTP/1.1
host: abaque.ca
HTTP/1.1 200 OK
Server: nginx/1.4.4
Date: Fri, 03 Jan 2014 19:18:13 GMT
Content-Type: text/html
Content-Length: 12020
Last-Modified: Mon, 30 Dec 2013 00:02:59 GMT
Connection: keep-alive
ETag: "52c0b833-2ef4"
Accept-Ranges: bytes
<!DOCTYPE html>
<html>
<head>
<title>COURS DU PROFESSEUR ÉRIC HERVET</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8’ />
</head>
<body>
...
26. Domain Name System.
Éric Hervet
- 11/128 -
Hiver 2014
INFO4007
</body>
</html>
Connection closed by foreign host.
Les codes de retour font partie de cinq familles :
+ 1xx : Information
+ 2xx : Succès (200 : OK)
+ 3xx : Redirection (301 : Moved Permanently ; 302 : Found ; 304 : Not Modified)
+ 4xx : Erreur du client HTTP (401 : Unauthorized ; 403 : Forbidden ; 404 : Not found ; 410 : Gone)
+ 5xx : Erreur du serveur (500 : Internal Server Error ; 503 : Service Unavailable)
Éric Hervet
- 12/128 -
Hiver 2014
INFO4007
II.
II.. Licences
Les différents types de licences
http://wiki.korben.info/les_differentes_licences
Éric Hervet
- 13/128 -
Hiver 2014
INFO4007
III.
III.. Navigateurs web
Navigateurs web et supports
Il existe aujourd’hui une très grande hétérogénéité de navigateurs, due à la variété d’appareils
(smartphones, tablettes, consoles de jeu) et des systèmes d’exploitation (Android, iOS, Windows Mobile, Symbian, etc.).
III.1.
Navigateurs, moteurs de rendu
+ Les navigateurs utilisent des moteurs de rendu en ajoutant une interface graphique (menus, barre d’adresses, gestion de l’historique, extensions, etc.). Plusieurs navigateurs peuvent
utiliser le même moteur de rendu.
+ Un moteur est chargé d’interpréter le code HTML et produire son rendu graphique à l’écran en
appliquant des feuilles de style CSS. Il interprète aussi le code JavaScript et délègue la lecture
des médias à des librairies nativement intégrées au moteur ou présentes grâce à des extensions.
Moteur
Navigateurs
Développement Licence
Trident
WebKit
Internet Explorer
Google Chrome, Chromium, Apple Safari,
Apple Safari Mobile, Android, Epiphany
Gecko
Mozilla Firefox, Camino, K-Meleon, Galeon,
Flock
Opera, Opera Mobile, Opera Wii
Konqueror
Microsoft
Apple, Google,
KDE,
Nokia,
RIM, Palm, etc.
Fondation Mozilla
Opera Software
KDE
Presto
KHTML
III.2.
Propriétaire
Open Source (GNU LGPL)
Open Source (MPL, GNU
GPL, GNU LGPL)
Propriétaire
Open Source (GNU LGPL)
Téléphones intelligents, tablettes
. . . Marché en pleine expansion avec moult versions de navigateurs comportant des spécificités visà-vis des moteurs et du matériel.
Il est impossible humainement, financièrement et matériellement de garantir une « optimisation »
pour chaque appareil. HTML, CSS et JavaScript sont conçus pour s’adapter au mieux dans la
plupart des cas.
Les Smart TV font souvent appel à un navigateur propriétaire ou un moteur Opera.
Les consoles Wii et Wii U utilisent aussi Opera et Webkit. XBox utilise bien sûr Internet Explorer.
Prise en charge de HTML 5
+ When can I use...
http://caniuse.com
+ HTML5Please
http://html5please.com
Éric Hervet
- 14/128 -
Hiver 2014
INFO4007
+ HTML5 & CSS3 Readiness
http://html5readiness.com
+ HTML5Test
http://html5test.com
+ Mobile HTML
http://mobilehtml5.org
+ Find me by IP
http://fmbip.com
+ Comparaison des moteurs de rendu HTML 5
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
+ Web specifications support in Opera products
http://www.opera.com/docs/specs/productspecs
+ Opera version history
http://www.opera.com/docs/history
+ Chromium Web Platform Status
http://chromestatus.com
+ Browserscope
http://www.browserscope.org
III.3.
Bibliothèques de détection et de modernisation
Les navigateurs étant inégaux face aux nombreuses fonctionnalités de HTML 5, des librairies
JavaScript proposent soit de pallier certains manques, soit de renseigner sur les fonctionnalités
supportées par le navigateur de l’utilisateur.
+ Modernizr
Pour la détection de HTML 5 et CSS 3.
Renseigne au sujet du support de fonctionnalités individuelles (propriétés CSS ou API Canvas,
SVG, HTML 5 audio, HTML 5 video, géolocalisation, etc.).
Modernizr n’ajoute aucune fonctionnalité manquante ou non implémentée.
< !DOCTYPE html>
<html>
<head>
Éric Hervet
- 15/128 -
Hiver 2014
INFO4007
<title>Titre< / title>
<script src= " modernizr . j s " >< / script>
< / head>
Le fichier modernizr.js est à télécharger sur le site officiel de Modernizr.
http://www.modernizr.com/download
Il est alors possible d’écrire des règles CSS appliquées en cas de support ou de non support.
i f ( Modernizr . canvas )
{
var c = document . createElement ( ’canvas’ ) ;
// ...
}
else // Pas de support de Canvas
{
}
+ html5shim (ou html5shiv)
Script autorisant l’usage des nouveaux éléments HTML 5 sur Internet Explorer < 9.
http://code.google.com/p/html5shim
+ Polyfills
Scripts à inclure dans une application web pour anticiper la venue d’une API et combler un
manque de support tant bien que mal. Ils fonctionnent souvent de pair avec la détection de
fonctionnalités de Modernizr.
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
III.4.
Frameworks HTML
Un framework HTML est un modèle type qu’on peut utiliser pour bâtir le squelette initial d’un site
web. Il permet de suivre un ensemble de bonnes pratiques pour la structuration des fichiers et du
code.
+ HTML5 Boilerplate
http://html5boilerplate.com
+ Bootstrap
Conçu par l’équipe de Twitter, c’est un framework HTML/CSS et JavaScript est très populaire.
Il utilise entre autre des fonctionnalités « responsive » pour s’adapter aux différents appareils
de consultation en fonction de la résolution de l’écran.
http://getbootstrap.com
Éric Hervet
- 16/128 -
Hiver 2014
INFO4007
+ Initializr
http://www.initializr.com
Framework bâti au-dessus de HTML5 Boilerplate, facile à utiliser pour démarrer un projet
rapidement.
+ HTML5 Reset
http://html5reset.org
Framework avec une structure minimaliste, répartie dans des fichiers HTML, CSS et JavaScript classés par dossier.
III.5.
Outils de développement
+ Éditeurs web (HTML/CSS)
* Notepad++ (Windows, gratuit, licence GPL)
http://notepad-plus-plus.org
* PsPad (Windows, gratuit, freeware)
http://www.pspad.com
* SublimeText (Multiplateforme, payant)
http://www.sublimetext.com
* Eclipse (Multiplateforme, gratuit, licence EPL)
http://www.eclipse.org
* jEdit (Multiplateforme, gratuit, licence GNU GPL)
http://www.jedit.org
* Bluefish (Gratuit, licence GPL)
http://bluefish.openoffice.nl
* Aptana Studio (Multiplateforme, gratuit, licence mixte GPL)
http://www.aptana.com
* gedit (Linux/Gnome et multiplateforme, licence GNU GPL)
http://projects.gnome.org/gedit
* Kate (Linux/KDE et BSD, licence GNU GPL)
http://kate-editor.org
* Komodo Edit (Multiplateforme, gratuit, freeware)
http://www.activestate.com/komodo-edit
* TextEdit (Mac OS X, licence propriétaire)
http://www.apple.com/macosx
* Smultron (Mac OS X, licence BSD)
http://www.peterborgapps.com/smultron
* Adobe Dreamweaver (Windows, payant)
http://www.adobe.com/products/dreamweaver
Éric Hervet
- 17/128 -
Hiver 2014
INFO4007
* Adobe Edge Tools (outils gratuits et payants)
http://html.adobe.com/edge
* Microsoft Expression Web (Windows, payant)
http://www.microsoft.com/expression
* Emmet (ex Zen Coding)
http://docs.emmet.io
+ Navigateurs web
Les navigateurs alternatifs et Open Source sont en général mieux fournis en extensions de
développement (Firefox, Chrome, Opera).
Il existe plusieurs solutions pour tester sur une variété de navigateurs. Certains navigateurs
disposent de plusieurs versions indépendantes sur le même système d’exploitation . . . ce qui
n’est pas le cas d’Internet Explorer par exemple, pour lequel il est difficile d’installer des anciennes versions. Certains navigateurs sont également multiplateformes, ce qui n’est pas non
plus le cas d’Internet Explorer . . .
L’idéal est d’utiliser des machines virtuelles pour effectuer des tests fiables, c’est-à-dire
d’émuler d’autres systèmes d’exploitation par des programmes hôtes : VirtualPC, VMWare,
VirtualBox, etc.
* VirtualPC (Microsoft)
http://www.microsoft.com/windows/virtual-pc/default.aspx
* VirtualBox (Oracle, Open Source)
http://www.virtualbox.org
* VMWare (Multiplateforme, payant)
http://www.vmware.com
* Parallels Desktop (Mac)
http://www.parallels.com/products/desktop
+ Mozilla Firefox
Navigateur qui possède le plus d’extensions, notamment Firebug qui est un inspecteur de document très complet qui regroupe les outils de consultation et d’analyse du code HTML, JavaScript et CSS. Il est possible d’agir directement sur le contenu de la page et ses propriétés de
style pour constater le résultat visuellement.
http://www.getfirefox.com
http://getfirebug.com
Deux extensions peuvent s’ajouter à Firebug : YSlow (Yahoo) et Page Speed (Google). Elles
servent à effectuer des analyses de performance avec des recommandations d’améliorations
suivant les critères respectifs de Yahoo et Google.
Éric Hervet
- 18/128 -
Hiver 2014
INFO4007
http://developer.yahoo.com/yslow
http://code.google.com/speed/page-speed/download.html
+ Google Chrome
Chrome possède un inspecteur très évolué, accessible par un clic droit puis l’option Inspect
Element, ou dans le menu général sous Tools puis Developer Tools.
http://www.google.com/chrome
https://developers.google.com/chrome-developer-tools
http://getfirebug.com/releases/lite/chrome
+ Safari
Navigateur d’Apple sous Mac OS X, il faut le prendre en considération lors de la vérification des
pages web étant donné le nombre croissant d’utilisateurs.
http://www.apple.com/safari
http://getfirebug.com/firebuglite
+ Opera
Bien que moins populaire, le moteur du navigateur Opera a une excellente réputation, affiche
d’excellentes performances et est réputé pour suivre rigoureusement l’évolution des standards
du Web.
http://www.opera.com
+ Internet Explorer
http://www.microsoft.com/windows/internet-explorer
Extensions de développement et consoles JavaScript
Les extensions de développement sont un outil essentiel pour les développeurs web. Elles proposent
de nombreuses fonctionnalités de diagnostic, d’inspection du code HTML, CSS et JavaScript, de
monitoring des performances, et surtout elles intègrent une console JavaScript. Celle-ci permet
la saisie de code rapide à des fins de tests et le diagnostic des appels effectués, par un affichage
structuré des variables JavaScript (objets, tableaux, etc.).
Éric Hervet
- 19/128 -
Hiver 2014
INFO4007
Pages about
Exemples :
+ about:blank : une page vide.
+ about:cache : toutes les informations du cache.
+ chrome://net-internals : toute la couche réseau du moteur WebKit.
+ chrome://gpu-internals : le moteur de rendu graphique.
+ chrome://plugins : les extensions installées.
+ opera:cpu : ressources processeurs.
+ opera:config : configuration avancée d’Opera.
Applications mobiles
De manière générale, le développement d’applications pour téléphones intelligents avec HTML 5 comporte l’inconvénient de performances moindres par rapport aux applications natives, et aussi des API
moins nombreuses.
PhoneGap propose une solution pour simplifier le développement d’applications mobiles aux personnes sachant déjà coder pour le Web, en utilisant des « conteneurs » simplifiés et des vues
HTML+CSS+JavaScript.
(phonegap.com)
Éric Hervet
- 20/128 -
Hiver 2014
INFO4007
IV.
IV.. Éléments & attributs
Éléments & attributs HTML5
http://joshduck.com/periodic-table.html
IV.1.
Modèles de contenu
+ Les éléments de flux servent à structurer le document ;
+ Les éléments de phrasé sont généralement imbriqués dans les éléments de flux et donnent
une sémantique particulière à leur contenu ;
+ Les éléments de métadonnées apportent des informations supplémentaires au contenu ou
influent la présentation.
Catégorie
Contenu de
flux
Éléments
a, p, hr, pre, ul, ol, dl, div, h1, h2, h3, h4, h5, h6, hgroup,
address, blockquote, ins, del, object, map, noscript, section, nav,
article, aside, header, footer, video, audio, figure, table, form,
fieldset, menu, canvas, details ou éléments de phrasé ou texte
Contenu de a, em, strong, small, mark, abbr, dfn, i, b, s, code, var, samp, kbd,
phrasé
sup, sub, q, cite, span, bdo, bdi, br, wbr, ins, del, img, embed,
object, iframe, map, area, script, noscript, ruby, video, audio,
input, textarea, select, button, label, output, datalist, keygen,
progress, command, canvas, time, meter ou texte
Métadonnées link, style, meta name, meta http-equiv, meta charset, script,
noscript, command
IV.2.
Doctype
Un doctype est une déclaration permettant de renseigner le navigateur sur le type de document
HTML à interpréter.
< ! doctype html>
permet de passer en mode de rendu conforme aux standards dans les navigateurs se basant sur le
« doctype sniffing ».
Les versions antérieures de (X)HTML utilisent des espaces de noms (namespaces) précisant le
standard HTML à utiliser (interpréter), avec différentes variantes autorisant ou non l’usage de
certaines balises.
Exemple pour HTML 4.01 Strict :
< !DOCTYPE HTML PUBLIC " − / /W3C/DTD HTML 4 . 0 1 / /EN"
" http : / / www. w3 . org /TR/ html4 / s t r i c t . dtd " >
Éric Hervet
- 21/128 -
Hiver 2014
INFO4007
Exemple pour XHTML 1.1 :
< !DOCTYPE html PUBLIC " − / /W3C/DTD XHTML 1 . 1 / /EN"
" http : / / www. w3 . org /TR/ xhtml11 / xhtml11 . dtd " >
IV.3.
Éléments (balises)
+ <html>
Élément racine.
L’attribut lang est recommandé.
< !DOCTYPE html>
<html lang= " f r " >
...
+ <head>
En-tête du document.
Peut inclure les éléments <title> (1), <meta> (0 ou +), <link> (0 ou +), <style> (0 ou +),
<script> (0 ou +), <base> (0 ou 1).
+ <title>
Titre du document.
Figure dans le titre de la fenêtre du navigateur et/ou dans l’onglet actif.
Apparaît dans les moteurs de recherche comme intitulé du lien.
+ <meta>
Fournit des méta-informations au sujet du document.
Éric Hervet
- 22/128 -
Hiver 2014
INFO4007
Attribut
Valeurs
name
application-name
author
description
generator
keywords
Rôle
Méta-informations relatives à la page : nom de l’application web,
auteur, description du contenu, programme de conception utilisé, mots-clés relatifs au contenu.
ou autres valeurs
enregistrées
http-equiv refresh
default-style
content-type
content
texte
charset
encodage des caractères
Rafraîchissement
de la page.
Feuille de style
préférée.
Déclaration de la
page de code et du
type MIME.
En combinaison avec name et http-equiv, confère sa valeur à la
balise
Déclaration de la page de code qui doit être utilisée pour l’interprétation, si celle-ci est différente de l’ASCII.
+ <meta name>
Attribut
application-name
Valeurs
texte
author
description
texte
texte
keyword
texte
generator
texte
Rôle
Chaîne de texte courte donnant un nom à l’application web que
la page représente, si tel est le cas, sinon ne doit pas être utilisé.
Un tel nom est susceptible d’être affiché par le navigateur dans
sa barre de titre en lieu et place du titre du document qui peut
varier d’une page à l’autre.
Auteur du document.
Description (de longueur raisonnable) du contenu, appropriée
pour l’indexation dans les moteurs de recherche.
Liste de mots-clés séparés par des virgules, pertinents pour le
contenu de la page, susceptibles d’être utilisés par les moteurs
de recherche.
Programme ou système ayant généré le contenu. Ne doit pas
être utilisé si le document est conçu « à la main ».
Il est alors obligatoire d’ajouter aussi l’attribut content pour donner le contenu associé à la
propriété figurant dans name.
+ <meta charset>
L’attribut charset est nouveau en HTML 5. Il spécifie l’encodage des caractères utilisé dans le
reste du document.
Éric Hervet
- 23/128 -
Hiver 2014
INFO4007
+ <meta http-equiv>
Depuis HTML 5, l’attribut http-equiv ne peut plus contenir de valeur vide, mais uniquement
une parmi les valeurs suivantes : content-type, default-style, refresh.
Attribut
Valeurs
refresh
entier_positif
refresh
entier_positif;
url=URL
Rôle
Rafraîchissement de la page à intervalles réguliers exprimés en secondes.
Redirection vers l’adresse URL après un délai exprimé en
secondes.
Définit quel ensemble de style doit être appliqué par défaut, si celui-ci est nommé.
default-style Valeur de l’attribut
title d’un élément
<style> ou <link
rel="stylesheet">
content-type Pour
la
syn- Déclaration du type MIME et de l’encodage des caractères
taxe
HTML
:
du document.
text/html;
charset=code
d’encodage
des
caractères.
Pour la syntaxe
XML : text/html;
charset=UTF-8
+ <link>
Méta-information qui exprime des relations inter-documents.
Éric Hervet
- 24/128 -
Hiver 2014
INFO4007
Attribut
media
Valeurs
URL
Code langue
alternate, archives,
author,
first,
help, icon, index,
last, license, next,
pingback, prefetch,
prev, search, sidebar,
stylesheet, tag, up
media query
type
Type MIME
sizes
any ou hauteur × lar-
href
hreflang
rel
geur
Rôle
Adresse de la cible.
Langue de base du document cible.
Indique la relation existant entre le document courant et
celui de la cible (valable uniquement si l’attribut href
est précisé). (Ne sont pas autorisés contrairement à <a> :
bookmark, external, nofollow, noreferrer).
Spécifie une requête de média pour laquelle la cible est
optimisée.
Spécifie le type MIME de la cible (Ex. : text/javascript,
text/css, etc.).
Dans le cas d’une relation icône (rel="icon"), indique les
dimensions de l’image en pixels. Plusieurs valeurs peuvent
être indiquées, séparées par des espaces. Le terme any indique que l’image convient à plusieurs résolutions, notamment lorsqu’elle est au format SVG.
+ <style>
Attribut
Valeurs
Rôle
type
Type MIME
media
media query
scoped
scoped
Type MIME d’un langage de style. Dans la majorité des cas, il
s’agit de text/css.
Spécifie une ou plusieurs requêtes de média à laquelle l’instruction de style sera appliquée.
Indique que les instructions de style s’appliquent uniquement
à l’élément parent qui contient la balise <style> ainsi qu’à ses
descendants. Si cet attribut est absent, les propriétés CSS s’appliquent à l’ensemble du document.
+ <base>
Éric Hervet
- 25/128 -
Hiver 2014
INFO4007
Attribut
href
target
Valeurs
URL
_blank,
_parent, _self,
_top, nom d’un
Rôle
Indique l’adresse à utiliser comme base de référence (préfixe)
pour tous les hyperliens du document.
Cible par défaut pour l’ouverture de tous les hyperliens de la
page. Cette indication générale peut être contournée individuellement en utilisant un attribut target dans tout hyperlien.
élément de type
iframe (attribut
name)
+ <body>
Corps de la page web . . .
+ <div>
Division de document. <div> n’a aucune valeur sémantique, il ne sert qu’à regrouper des
éléments ayant des propriétés communes.
+ <span>
Contrairement à <div>, <span> est dédié au contenu phrasé. Par contre il n’a pas non plus de
valeur sémantique.
+ <a> (anchor)
Pour les hyperliens.
Éric Hervet
- 26/128 -
Hiver 2014
INFO4007
Attribut
Valeurs
Rôle
href
hreflang
media
rel
URL
Code de langue
media query
alternate,
archives,
author, first,
help,
icon,
index,
last,
license, next,
pingback,
prefetch,
prev, search,
sidebar,
stylesheet,
tag, up
_blank,
_parent, _self,
_top, nom d’un
élément de type
iframe (attribut
name)
Type MIME
Nom du fichier
après téléchargement ou (vide)
Cible du lien.
Langage de base de la cible du lien.
Spécifie une requête de média pour laquelle la cible est optimisée.
Spécifie la relation établie par le lien entre le document courant
et la cible. Plusieurs valeurs peuvent être combinées, séparées
par des espaces.
target
type
download
Attribut un contexte de navigation dans lequel suivre le lien.
Le type MIME de la destination du lien.
Indique que la ressource liée est prévue pour être téléchargée.
Si une valeur est donnée à l’attribut, elle représente le nom du
fichier après téléchargement.
+ Sections et titres
Éric Hervet
- 27/128 -
Hiver 2014
INFO4007
Nom
section
article
nav
aside
header
footer
Détails
Section générique regroupant une même thématique de contenu, de préférence avec
un en-tête.
Section de contenu dans un document ou une application web, dont la composition
peut être indépendante du reste de la page et extraite individuellement.
Section abritant des liens de navigation majeurs, permettant de naviguer au sein
du document ou vers d’autres pages.
Section dont le contenu est tangentiellement lié à ce qui l’entoure et qui peut être
considérée comme séparée de ce contenu.
Section d’introduction (d’un document, d’une autre section, d’un article) pouvant
contenir, selon le contexte, titres, navigation, formulaire de recherche, table des
matières, logo, etc.
Pied de page, de section ou d’article, selon son plus proche ancêtre, pouvant contenir
des informations connexes et une navigation annexe.
+ <section> (Nouvel élément)
Nouvelle balise de HTML 5, <section> sert à regrouper du contenu relatif à une même
thématique ou à une même fonctionnalité (chapitres, onglets, vues, etc.).
+ <article> (Nouvel élément)
<article> est une spécialisation de <section>. Il peut servir à identifier une portion de
document qui est distincte parmi d’autres (actualité, fiche d’informations, etc.).
+ <header> (Nouvel élément)
En-tête de section (introduction, navigation, table des matières, etc.).
Il peut apparaître plusieurs fois dans un document.
+ <footer> (Nouvel élément)
« Pied de page » (mentions légales, informations de contact, sources d’une actualité, navigation,
etc.).
Éric Hervet
- 28/128 -
Hiver 2014
INFO4007
Son usage n’implique pas nécessairement la présence d’un élément <header>.
+ <nav> (Nouvel élément)
Permet de gérer plusieurs niveaux de navigation (liens portant sur l’ensemble du site, sur une
partie de l’arborescence, vers des pages communes, vers des sections, etc.).
+ <aside> (Nouvel élément)
Contenu « tangentiel » (définitions de termes apparaissant dans le contenu, biographie,
glossaire, historique, éclaircissement, astuces, notes, etc.).
+ <address>
Pour les informations de contact (adresse, courriel, téléphone, etc.).
+ <h1> à <h6>
Titres de niveaux différents.
+ <hgroup> (Nouvel élément)
Sert à regrouper un ou plusieurs titres <h1> à <h6>.
+ Listes
* <ol>
Liste ordonnée (ordered list).
Attributs possibles : start (valeur de départ pour la numérotation), reversed (pour
que la numérotation soit décroissante) et type (1, a, A, i ou I). Le style des puces
peut être modifié par la propriété CSS list-style-type (valeurs possibles : armenian,
decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin,
lower-roman, upper-alpha, upper-latin, upper-roman).
* <ul>
Liste non ordonnée (unordered list).
Pas d’attribut spécifique mais l’apparence des puces peut être modifiée par la propriété
CSS list-style-type (valeurs possibles : disc (défaut), square, circle).
* <li>
Élément de liste (list item).
Possède un attribut facultatif value dans le cas d’une liste <ol> pour contrecarrer l’incrémentation automatique (<li value="1">...</li>).
* <dl>
Liste de définitions (description list).
Pour lister des couples (terme, description associée).
Éric Hervet
- 29/128 -
Hiver 2014
INFO4007
* <dt>
Terme de liste de définitions.
Ne peut contenir que des éléments de phrasé. À chaque terme <dt> correspond une définition <dd>.
* <dd>
Élément de description d’une liste de définitions.
Peut contenir des éléments de flux ou de phrasé.
+ Texte et sémantique
* <p>
Nouveau paragraphe.
Élément de type bloc contenant des éléments de type phrasé.
* <blockquote>
Bloc de citation (block quotation).
Représente une section du document qui est extraite d’une autre source. Peut contenir des
éléments de flux (paragraphes, titres, images, etc.).
* <q>
Réservé aux citations courtes.
Encadré automatiquement par des guillemets par tous les navigateurs (sauf IE 7-).
* cite
Attribut qui fait référence à l’adresse de la source.
* <cite>
Représente le titre d’une oeuvre citée ou mentionnée dans le document (titre d’un ouvrage,
chanson, pièce de théâtre, opéra, film, jeu, peinture, sculpture, etc.).
* <strong>
Confère au texte une forte importance.
* <em>
Portion de texte mise en emphase.
* <b>
Historiquement pour une mise en gras (bold), représente maintenant une mise en valeur
via un style différent.
* <i>
Balise historique, pour la mise en forme en italique.
* <u>
Balise historique, pour le soulignement d’une portion de texte.
* <small>
Balise redéfinie astucieusement en « small print » (mentions légales, avertissements discrets, licence d’utilisation, etc.).
Éric Hervet
- 30/128 -
Hiver 2014
INFO4007
* <dfn>
Defining instance.
* <abbr>
Abbréviation.
* <code>
Code source.
* <var>
Variable dans une expression mathématique ou informatique, ou espace réservé à un texte
que le lecteur peut mentalement remplacer par une autre valeur.
* <kbd>
Entrée clavier (keyboard).
* <samp>
Exemple ou échantillon (sample) de sortie produite par un programme ou un système.
* <sub>
Fragment de texte placé en indice (subscript) (mathématiques, chimie).
* <sup>
Fragment de texte placé en exposant (superscript) (mathématiques, chimie, notes de bas
de page).
* <time> (nouveau)
Nouvel élément ayant pour objectif de lever toute ambiguïté sur la syntaxe à utiliser pour
baliser une date ou une heure.
, Attribut datetime
, Attribut pubdate
* <hr>
Séparation horizontale (horizontal rule).
* <br>
Saut de ligne (line break).
* <wbr> (nouveau)
Coupure de ligne (work break) à l’intérieur d’un mot ou d’une phrase.
* <ins>
Indique un contenu texte ayant été inséré ou ajouté dans le document après sa publication.
* <del>
Indique un contenu texte ayant été supprimé du document.
* <s>
Indique un contenu texte qui n’est plus exact ou pertinent.
* <pre>
Bloc de texte préformaté.
Éric Hervet
- 31/128 -
Hiver 2014
INFO4007
* <mark> (nouveau)
Signale et met en valeur une portion du document sur laquelle on veut porter l’attention.
* <ruby> (nouveau)
Prise en compte des caractères annotés de certaines langues étrangères.
* <rt> (nouveau)
ruby text
* <rp> (nouveau)
ruby parenthesis
* <bdo> Sens de lecture déterminé par l’algorithme bidirectionnel Unicode (BiDioverride).
<bdo dir="ltr"> : left to right.
<bdo dir="rtl"> : right to left.
http://unicode.org/reports/tr9
* <bdi> (nouveau)
BiDiisolate : isole son contenu des effets de la mise en forme de texte bidirectionnelle.
+ Contenu embarqué
On appelle contenu embarqué tout élément faisant référence à des données stockeés dans un
fichier ou une ressource externe au document HTML.
* <img>
Pour inclure une image.
Normalement utilisé pour des logos cliquables, des photos d’illustration, des icônes
cliquables pour des commandes ou des hyperliens, etc.
Les formats les plus répandus et interprétés par tous les navigateurs sont :
GIF (Format non libre ; Petits éléments graphiques, icônes, petites images animées ;
Transparence sur 1 niveau) ;
PNG (Format libre ; Images de haute qualité avec niveaux de transparence ; Jusqu’à
65 536 couleurs ; Transparence sur 1 niveau en 256 couleurs) ;
JPEG (Format soumis à un brevet ; Photographies ; Pas de transparence).
Les attributs de la balise <img> sont :
src : adresse (locale ou distante) de l’image à afficher.
alt : texte alternatif lorsque l’image ne peut pas être visualisée (fichier absent ou format
non supporté par exemple).
width, height : définissent l’espace d’affichage pour l’image (attention aux redimensionnements).
usemap : pour définir une zone de liens cliquables, définie par l’élément <map>.
ismap : de valeur booléenne true ou false, indique si le navigateur doit transmettre les
coordonnées du point cliqué sur l’image (cliquable) au serveur.
Éric Hervet
- 32/128 -
Hiver 2014
INFO4007
Outils de compression en ligne :
http://kraken.io
http://www.smushit.com/ysmush.it
http://www.jpegmini.com
http://jpeg-optimizer.com
http://punypng.com
http://tinypng.org
* Positionnement des images
Par défaut, les images sont considérées comme des éléments en ligne (propriété CSS
display: inline;).
* Images à résolution adaptative (responsive images)
Il existe plusieurs manières de faire :
, Utiliser un attribut srcset pour définir des sources alternatives en fonction de la
densité de pixels :
<img src="original.jpg" srcset="hd.jpg 2x, ultra-hd.jpg 4x">
, Utiliser un nouvel élément <picture> qui contient plusieurs éléments <source>
(comme l’élément <video> :
<picture>
<source src= " ultra −hd . jpg " >
<source media= " (max− width : 800px ) "
s r c s e t = " small . jpg 1x , small −hd . jpg 2x " >
<img src= " o r i g i n a l . jpg " a l t= " " >
< / picture>
* <map>
Exemple :
<img src= " image . jpg " a l t= " I c i une image " usemap= " # c a r t e " >
<map name= " c a r t e " >
<area shape= " r e c t "
< /map>
coords= " 264 ,233 ,404 ,423 "
coords= " 410 ,232 ,540 ,412 "
coords= " 545 ,229 ,657 ,398 "
coords= " 663 ,218 ,780 ,390 "
a l t= "H"
a l t= "T"
a l t= "M"
a l t= "L"
href= " h . html " >
href= " t . html " >
href= "m. html " >
href= " l . html " >
* <area>
Zone cliquable faisant partie d’une image map.
* <figure> (nouveau)
Permet d’associer une légende optionnelle <figcaption> à du contenu regroupé en bloc.
Éric Hervet
- 33/128 -
Hiver 2014
INFO4007
<figure>
<img src= "RR. jpg " >
< f i g c a p t i o n >Une photo de Rémi− Rossignol< / f i g c a p t i o n >
< / figure>
* <figcaption> (nouveau)
Donner une légende à l’élément <figure>.
* <iframe>
inline frame : embarque dans la page un autre document HTML. À utiliser avec précaution.
* <embed>
Pour l’intégration de contenu externe dans le document HTML. Il peut s’agir de données
non supportées par le navigateur, nécessitant l’installation d’un plug-in pour leur interprétation.
< ! −− Vidéo Quicktime −−>
<embed type= " video / quicktime " src= " a p i c s . mov" width= " 640 " height= " 480 " / >
< ! −− Animation Adobe Flash −−>
<embed src= " animation . swf " / >
< ! −− Son −−>
<embed src= " je_chante . wav" / >
* <object>
Standardisé par HTML 4, il a une syntaxe plus évoluée que <embed>. Il peut faire appel à
des extensions ou plug-ins pour interpréter les données ou fichiers binaires, et aussi passer
d’éventuels paramètres initiaux pour l’exécution de l’extension.
* Le cas de Flash
Avec HTML 5, il est maintenant possible de jouer une animation Adobe Flash sans utiliser
<embed>, notamment grâce à l’attribut data de la balise <object.
<object width= " 480 " height= " 390 "
data= " http : / / www. youtube . com / v /v9MTGNaEXGM? f s=1&amp ; hl=fr_FR&amp ; r e l =0 "
type= " a p p l i c a t i o n / x−shockwave − f l a s h " >
<param name= " movie "
value= " http : / / www. youtube . com / v /v9MTGNaEXGM? f s=1&amp ; hl=fr_FR&amp ; r e l =0 " / >
<param name= " allowFullScreen " value= " true " / >
<param name= " a l l o w S c r i p t a c c e s s " value= " always " / >
< / object>
* <video> (nouveau)
Média de type vidéo.
* <audio> (nouveau)
Média de type audio.
Éric Hervet
- 34/128 -
Hiver 2014
INFO4007
* <source> (nouveau)
Ressource média pour les balises <audio> et <video>.
* <track> (nouveau)
Ressource texte pour <audio> ou <video>.
* <canvas> (nouveau)
Zone de dessin bitmap pilotable avec un <script>.
+ Données tabulaires
* <table>
Pour représenter un ensemble d’informations en colonnes/lignes.
* <thead>
En-tête de tableau, utilisé conjointement avec <tbody> et <tfoot>.
* <tfoot>
Pied de tableau.
* <tbody>
Corps de tableau.
* <tr>
Ligne de tableau (table row).
* <td>
Contenu d’une cellule (table data) (texte, liens, images, listes, etc.).
* <th>
Cellule en-tête (table header).
* <caption>
Légende ou titre d’un tableau de données (doit figure une seule fois).
* <colgroup>
Pour spécifier des propriétés communes à un groupe de colonnes.
* <col>
Pour spécifier des propriétés individuelles aux colonnes, prioritaires sur celles de
<colgroup>.
+ Éléments interactifs
* <menu>
Pour les menus contextuels (type="context"), barres d’outils (type="toolbar") ou listes
d’actions (défaut). L’attribut label permet d’assigner une désignation au menu.
Éric Hervet
- 35/128 -
Hiver 2014
INFO4007
* <command> (nouveau)
Commande individuelle d’un <menu> (bouton classique, case à cocher, bouton radio). Le
déclenchement d’une action se fait grâce à des événements comme onClick ou onChange
et l’appel d’une fonction du DOM.
<script>
f u n c t i o n heure ( )
{
var d = new Date ( ) ;
alert (d ) ;
}
< / script>
<menu>
<command onclick= " heure ( ) ; " >Quelle heure est − i l ?< / command>
< /menu>
* <details> (nouveau)
Composant d’interface fournissant une information ou des contrôles supplémentaires à
l’utilisateur.
* <summary> (nouveau)
L’intitulé d’un élément <details> peut être spécifié par <summary>.
* <device> (nouveau)
En cours de formalisation. À terme, devrait permettre de manipuler des webcams pour
effectuer des captures vidéo.
+ Scripting
* <script>
Permet d’intégrer un ensemble d’instructions dans un langage de script par l’agent utilisateur, si celui-ci le supporte. C’est bien sûr JavaScript qui est presque toujours utilisé.
<p>Nous sommes en l ’ an
<script>
var d = new Date ( ) ;
document . write ( d . getFullYear ( ) ) ;
< / script>
< / p>
* Exécution asynchrone
L’attribut booléen async indique au navigateur d’exécuter le script de manière asynchrone,
c’est-à-dire dès qu’il est disponible, avant même le déclenchement de l’événement load et
l’objet window.
Éric Hervet
- 36/128 -
Hiver 2014
INFO4007
<script async src= " j a v a s c r i p t . j s " >< / script>
* Exécution différée
L’attribut defer charge le fichier dès que possible mais diffère l’exécution du script à
la fin du chargement de la page (juste après l’analyse HTML mais avant l’événement
DOMContentLoaded).
<script defer src= " j a v a s c r i p t . j s " >< / script>
* noscript
Contenu alternatif si le langage de script est désactivé par l’utilisateur ou non supporté
par le navigateur.
Langages de script interprétés côté serveur
+ PHP 27
http://www.php.net
+ Ruby et Ruby on Rails
http://www.ruby-lang.org
http://www.rubyonrails.org
+ Python
http://www.python.org
+ JavaServer Pages
http://java.sun.com/products/jsp
+ ASP.NET
http://www.asp.net
27. Php : Hypertext Preprocessor.
Éric Hervet
- 37/128 -
Hiver 2014
INFO4007
IV.4.
Attributs HTML globaux
Attribut
Valeur
Rôle
accesskey
Touches d’accès direct pour la navigation au clavier.
id
itemid
Code(s) de touches
d’accès
Chaîne de caractères
Identifiant de l’élément <menu> à associer
true ou false ou ""
ou sans valeur
ltr ou rtl ou auto
true ou false ou ""
ou sans valeur
copy, move, link ; s :
chaîne de caractères ;
f : chaîne de caractères
hidden ou "" ou sans
valeur
itemprop
itemref
itemscope
itemtype
lang
tabindex
title
spellcheck
Code de langue
Nombre entier
true ou false
style
Propriétés CSS
class
contextmenu
contenteditable
dir
draggable
dropzone
hidden
Éric Hervet
Classes associées à l’élément.
Référence au menu contextuel de l’élément.
Rend le contenu de l’élément éditable.
Direction d’écriture du texte.
Permet le déplacement de l’élément (drag & drop).
Définit le comportement lors d’un dépôt (drag & drop).
Indique que l’élément n’est plus ou pas encore pertinent
et qu’il ne doit pas être affiché.
Identifiant unique de l’élément.
Identifiant unique défini par le vocabulaire du microformat.
Propriété individuelle du microformat.
Référence à un autre élément.
Indique que l’élément fait appel à un microformat et que
ses enfants font partie de ce format.
Vocabulaire utilisé par le microformat.
Langue dans laquelle est rédigé l’élément.
Ordre de tabulation.
Titre descriptif.
Activation/désactivation de la correction orthographique
et/ou grammaticale.
Affectation de propriétés de style à l’élément.
- 38/128 -
Hiver 2014
INFO4007
Éric Hervet
- 39/128 -
Hiver 2014
INFO4007
IV.5.
Relations des liens
Valeur
Effet sur
<link>
Effet
sur <a>,
Description
<area>
alternate
Lien
Lien
Lien vers une version alternative du document (version imprimable, traduction, site miroir, etc.).
archives
author
bookmark
Lien
Lien
Lien vers des archives.
Lien
Lien
Lien vers l’auteur du document (par exemple mailto:).
N/A
Lien
Lien permanent de l’ancêtre article ou section le plus proche pour
l’ajout aux favoris du navigateur.
external
N/A
Lien
Indique que le document cible ne fait pas partie du même site que le
document courant.
first
Lien
Lien
Lien vers le premier document si le document courant fait partie d’une
série.
help
icon
Lien
Lien
Lien vers une section d’aide contextuelle.
Ressource
externe
N/A
Importe une icône représentant le document courant.
index
Lien
Lien
Lien vers un autre document contenant une table des matières ou un
index, contenant le document courant.
last
Lien
Lien
Lien vers le dernier document si le document courant fait partie d’une
série.
license
next
Lien
Lien
Lien vers une licence pouvant être appliquée au contenu du document.
Lien
Lien
Lien vers le document suivant si le document courant fait partie d’une
série.
nofollow
N/A
Lien
Indique que l’auteur du document courant ne cautionne pas le document
lié.
noreferrer
N/A
Lien
Demande au navigateur de ne pas envoyer d’en-tête HTTP Referrer (permettant de déterminer la provenance du document original) si le lien est
suivi.
pingback
Ressource
externe
N/A
Adresse du serveur qui gère le pingback pour le document courant.
prefetch
Ressource
externe
Ressource
externe
Lien vers une ressource pouvant être téléchargée et mise en cache en
avance par le navigateur.
prev
Lien
Lien
Lien vers le document précédent si le document courant fait partie d’une
série.
search
Lien
Lien
Lien vers un moteur qui permet de chercher à l’intérieur du document et
ses pages afférentes.
stylesheet
Ressource
externe
N/A
Importe une feuille de style.
sidebar
Lien
Lien
Lien vers un document pouvant être affiché dans la zone contextuelle
(sidebar) du navigateur, s’il en a une.
tag
Lien
Lien
Attribue au document courant une étiquette (tag) identifiée par l’adresse
donnée.
up
Lien
Lien
Lien vers un document parent pouvant préciser le contexte du document
courant.
Éric Hervet
- 40/128 -
Hiver 2014
INFO4007
IV.6.
Attributs événements
+ onabort
Réseau : Chargement annulé par l’utilisateur.
+ onblur
Navigation : Perte du focus.
+ oncanplay
Médias : Reprise de lecture audio ou vidéo, mais la totalité du média ne pourra pas être lue au
rythme de lecture actuel.
+ oncanplaythrough
Médias : Reprise de lecture audio ou vidéo, la totalité du média pourra être lue au rythme de
lecture actuel.
+ onchange
Formulaires : L’utilisateur a validé le changement de valeur d’un élément de formulaire.
+ onclick
Souris, pointage : Clic (puis relâchement) sur un élément.
+ oncontextmenu
Navigation : L’utilisateur a déclenché le menu contextuel.
+ ondblclick
Souris, pointage : L’utilisateur a double-cliqué sur l’élément.
+ ondrag
Drag & Drop : L’utilisateur est en train de déplacer l’élément.
+ ondragend
Drag & Drop : L’utilisateur a fini de déplacer l’élément.
+ ondragenter
Drag & Drop : L’opération de glisser-déposer est entrée dans l’élément.
+ ondragleave
Drag & Drop : L’opération de glisser-déposer a quitté l’élément.
+ ondragover
Drag & Drop : L’opération de glisser-déposer survole l’élément.
+ ondragstart
Drag & Drop : Début de glisser-déposer.
+ ondrop
Drag & Drop : Fin de glisser-déposer et dépôt.
+ ondurationchange
Médias : L’attribut DOM duration de <audio> ou <video> a été modifié.
+ onemptied
Médias : L’élément <audio> ou <video> est retourné à son état initial.
+ onended
Médias : La fin de l’audio ou de la vidéo a été atteinte.
Éric Hervet
- 41/128 -
Hiver 2014
INFO4007
+ onerror
Réseau : Le chargement de l’élément a échoué.
+ onfocus
Navigation : L’élément a reçu le focus.
+ onformchange
Formulaires : L’utilisateur a validé le changement de valeur d’un élément de formulaire.
+ onforminput
Formulaires : L’utilisateur a changé la valeur d’un élément dans le formulaire.
+ oninput
Formulaires : L’utilisateur a changé la valeur d’un élément de formulaire.
+ oninvalid
Formulaires : L’élément de formulaire n’a pas respecté les contraintes de validation.
+ onkeydown
Clavier : L’utilisateur a appuyé sur une touche.
+ onkeypress
Clavier : L’utilisateur a appuyé sur une touche caractère.
+ onkeyup
Clavier : L’utilisateur a relâché une touche.
+ onload
Réseau : L’élément a fini son chargement.
+ onloadeddata
Médias : Le navigateur peut rendre le contenu audio ou vidéo à la position de lecture courante,
pour la première fois.
+ onloadedmetadata
Médias : Le navigateur a pu déterminer la durée et les dimensions de l’élément <audio> ou
<video>.
+ onloadstart
Médias : Le navigateur a commencé à charger des données médias dans l’élément <audio> ou
<video>.
+ onmousedown
Souris, pointage : L’utilisateur a appuyé sur le bouton de la souris.
+ onmousemove
Souris, pointage : L’utilisateur a fait un mouvement avec la souris.
+ onmouseout
Souris, pointage : L’utilisateur a déplacé le curseur de souris hors des limites de l’élément.
+ onmouseover
Souris, pointage : L’utilisateur a déplacé le curseur de souris à l’intérieur des limites de l’élément
ou d’un de ses enfants.
Éric Hervet
- 42/128 -
Hiver 2014
INFO4007
+ onmouseup
Souris, pointage : L’utilisateur a relâché le bouton de la souris.
+ onmousewheel
Souris, pointage : L’utilisateur a actionné la molette de défilement de la souris.
+ onpause
Médias : L’utilisateur a mis en pause la lecture de l’élément <audio> ou <video>.
+ onplay
Médias : L’utilisateur a débuté la lecture de l’élément <audio> ou <video>.
+ onplaying
Médias : La lecture de l’élément <audio> ou <video> a débuté.
+ onprogress
Médias : Le navigateur télécharge les données médias pour l’élément <audio> ou <video>.
+ onratechange
Médias : L’attribut DOM defaultPlaybackRate ou PlaybackRate a été modifié sur l’élément
<audio> ou <video>.
+ onreadystatechange
Médias : L’élément et toutes ses ressources ont fini leur chargement.
+ onreset
Formulaires : Le formulaire a été réinitialisé.
+ onscroll
Souris, pointage : L’élément a fait l’objet d’un défilement.
+ onseeked
Médias : La valeur de l’attribut seeking a été modifiée à false.
+ onseeking
Médias : La valeur de l’attribut seeking a été modifiée à true.
+ onselect
Souris, pointage : L’utilisateur a sélectionné du texte.
+ onshow
Navigation : L’utilisateur a requis l’affichage de l’élément comme menu contextuel.
+ onstalled
Médias : Le navigateur essaye de télécharger les données pour la lecture de l’élément <audio>
ou <video> mais celles-ci ne sont pas reçues.
+ onsubmit
Formulaires : Le formulaire a été validé.
+ onsuspend
Médias : Le navigateur ne télécharge actuellement pas le contenu du média, mais ne dispose
pas encore de la totalité des données.
+ ontimeupdate
Médias : La position de lecture de l’élément <audio> ou <video> a changé.
Éric Hervet
- 43/128 -
Hiver 2014
INFO4007
+ onvolumechange
Médias : L’attribut DOM volume ou muted a été modifié sur un élément média.
+ onwaiting
Médias : La lecture de l’élément <audio> ou <video> a été mise en pause, car les données
nécessaires pour la suite sont attendues.
Éric Hervet
- 44/128 -
Hiver 2014
INFO4007
V.
V.. Formulaire
Formulaires (Web Forms)
Le langage HTML seul est clairement limité pour les formulaires web, tant au niveau des éléments
de contrôle que de leur validation et de l’envoi des données au serveur.
De nombreuses librairies JavaScript, entre autres jQueryUI et YUI, sont apparues pour apporter une réponse tant fonctionnelle que graphique aux limitations de HTML. L’affordance 28 des
contrôles est cruciale pour l’entrée d’informations (calendriers, curseurs à positionner, etc.) mais
aussi pour définir à l’avance les types de données à entrer (nombres, chaînes de caractères, courriels, URL, couleur, etc.).
V.1.
<input> et variantes
Valeurs possibles de l’attribut type de l’élément <input> :
+ text : Champ de texte.
+ password : Champ mot de passe.
+ hidden : Champ caché (invisible).
+ radio : Bouton radio (un seul choix).
+ checkbox : Cases à cocher (choix multiple).
+ button : Bouton.
+ reset : Remise à zéro d’un formulaire.
+ submit : Bouton de validation d’un formulaire.
+ image : Image cliquable.
+ file : Fichier.
Sur les navigateurs mobiles, l’attribut accept de <input type="file" ...> provoque un appel
aux applications pouvant produire une image, notamment la galerie de photos ou la caméra
intégrée. Il est même possible de faire des captures audio ou vidéo.
<input type= " f i l e " accept= " image / * " >
<input type= " f i l e " accept= " video / * ; capture=camcorder " >
<input type= " f i l e " accept= " audio / * ; capture=microphone " >
Les fichiers ainsi uploadés sont alors exploitables grâce à File API (Sect. X.).
+ tel (nouveau) : Numéro de téléphone.
+ url (nouveau) : URL/URI.
+ email (nouveau) : Adresse courriel.
+ search (nouveau) : Champ de recherche.
+ date (nouveau) : Date.
+ time (nouveau) : Heure.
+ datetime (nouveau) : Date et heure.
28. Affordance : possibilités d’action suggérées par la forme d’un objet, avant même qu’il soit utilisé.
Éric Hervet
- 45/128 -
Hiver 2014
INFO4007
V.. Formulaire
+ datetime-local (nouveau) : Date et heure locales.
+ month (nouveau) : Mois.
+ week (nouveau) : Semaine.
+ number (nouveau) : Valeur numérique.
+ range (nouveau) : Valeur numérique d’un intervalle, sans grande précision.
+ color (nouveau) : Couleur RVB (3 composantes de 8 bits).
http://www.standardista.com/html5/html5-web-forms/
http://www.w3schools.com/html/html5_form_input_types.asp
V.2.
Autres éléments
+ <textarea> : Zone de texte multiligne.
+ <select> : Liste de choix déroulante.
+ <option> : Option individuelle d’une liste de choix <select>.
+ <optgroup> : Pour le regroupement d’options.
+ <datalist> (nouveau) : Pour proposer une liste de choix possibles dans un champ de saisie.
<input type= " t e x t " l i s t = " p r o v i n c e s " name= " province " >
< d a t a l i s t id= " p r o v i n c e s " >
<option value= "NB" >Nouveau−Brunswick< / option>
<option value= "NS" >Nouvelle − Écosse< / option>
<option value= " PEI " > Î l e −du− Prince −Édouard< / option>
< ! −− . . . −−>
</ datalist>
http://demo.agektmr.com/datalist/
+ <button> : Comme <input> sauf que la valeur texte n’est plus déterminée par un attribut value
mais par le contenu intrinsèque de l’élément.
+ <output> (nouveau) : Pour recueillir le résultat d’un calcul.
<script>
function calcul ( obj )
{
o b j . value = o b j . form . r e c e t t e s . valueAsNumber −
o b j . form . depenses . valueAsNumber ;
< / script>
<form id= "somme" >
<p>
Éric Hervet
- 46/128 -
Hiver 2014
INFO4007
V.. Formulaire
<label for= " num_recettes " >R ecet tes< / label>
<input name= " r e c e t t e s " type= " number " id= " num_recettes " >
< / p>
<p>
<label for= " num_depenses " >Dépenses< / label>
<input name= " depenses " type= " number " id= " num_depenses " >
< / p>
<p>Résultat :
<output name= " t o t a l " for= " num_recettes num_depenses "
onforminput= " c a l c u l ( t h i s ) ; " form= "somme"
style= " background : yellow ; border : 2 px s o l i d orange ; padding : 3 px 10px ; " >
< / output> $< / p>
< / form>
+ <keygen> (nouveau) : Pour générer une paire de clés publique/privée.
+ <progress> (nouveau) : Barre de progression.
http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
+ <meter> (nouveau) : Jauge qui représente un état précis sur une échelle définie.
V.3.
Validation des données
Beaucoup de types de champs <input> induisent une pré-validation des informations entrées
par l’utilisateur avant l’envoi au serveur.
Les messages informatifs affichés par les navigateurs ne sont, pour le moment, pas configurables
graphiquement. Certains moteurs comme WebKit supportent des attributs HTML ou des instructions CSS propriétaires (ex. : -webkit-validation-bubble-message{}) pour une personnalisation.
<form>
<label for= " email " > C o u r r i e l : < / label>
<input id= " c o u r r i e l " type= " email " name= " c o u r r i e l " s p e l l c h e c k = " f a l s e " >
< / form>
<script>
document . getElementById ( ’ c o u r r i e l ’ ) . setCustomValidity ( " Alors quoi ,
on ne s a i t plus e n t r e r une adresse c o u r r i e l ? ? " ) ;
< / script>
Éric Hervet
- 47/128 -
Hiver 2014
INFO4007
VI.
VI.. Microformats
Microformats (Microdata)
Les microformats sont un moyen d’insérer des marquages sémantiques plus fins dans un document
HTML pour une exploitation automatique par des robots.
Essentiellement il s’agit d’introduire dans le code source HTML une notion sémantique du contenu
pour définir de quel vocabulaire relève certaines sections du contenu : recette de cuisine, curriculum
vitae, fiche de lecture d’un livre, etc.
VI.1.
Web sémantique
+ http://www.microformats.org/about
+ http://microformats.org/wiki/Main_Page
+ http://dev.w3.org/html5/md
+ http://www.whatwg.org/specs/web-apps/current-work/complete/microdata.html
VI.2.
API DOM Microdata
+ http://www.w3.org/TR/microdata/#using-the-microdata-dom-api
+ http://dev.w3.org/html5/md/#using-the-microdata-dom-api
+ http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#
microdata-dom-api
+ http://gitorious.org/microdatajs
+ http://microformatshiv.com
Éric Hervet
- 48/128 -
Hiver 2014
INFO4007
VII.
VII.. Audio & Vidéo
Audio & Vidéo
Aux débuts d’Internet, les débits disponibles étaient si faibles qu’il a fallu trouver des manières de
compresser les données (audio et/ou vidéo) pour obtenir des temps de transfert (téléchargement ou
streaming) raisonnables.
Avec le temps, de nombreux codecs (compression-décompression) ont vu le jour. Les formats se sont
succédés et la puissance et les algorithmes de compression se sont améliorés.
Aussi avec les parts de marché croissantes des sites de partage de musique et l’introduction de la
vidéo en streaming, de grands sites de partage vidéo ont vu le jour. Ainsi YouTube, Dailymotion et
Vimeo sont apparus à un mois d’intervalle début 2005. La technologie propriétaire Flash (d’abord
Macromedia, puis Adobe) est devenue de facto la plus utilisée mondialement. Adobe a en effet
profité du vide dans la spécification HTML pour ce genre de technologie. En effet avant HTML 5,
il fallait très souvent que l’utilisateur installe du côté client un plug-in et/ou des codecs pour être
capable de jouer des musiques mais surtout des vidéos dans une page HTML.
Récemment, le W3C et le WhatWG ont pris en compte cette évolution pour proposer une solution
concrète : les éléments <audio> et <video> de HTML 5 pour simplifier l’insertion dans les pages
web avec une lecture native dans le navigateur.
VII.1.
Conteneurs, codecs, licences et support
Dans la pratique, les choses ne sont pas simples, à cause de la grande variété de formats de fichier
et de conteneur. La problématique concerne surtout la multiplicité des solutions de décodage de la
vidéo. HTML 5 ne définit officiellement aucune norme précise à supporter au travers des éléments
<audio> et <video>.
Il faut savoir distinguer le conteneur, de la norme et du format de compression :
+ Un codec est un procédé de compression-décompression d’un signal numérique permettant de
générer un flux respectant une norme.
MPEG-4 AVC/H.264 est une norme décrivant un format de données, et x264 est un codec
répondant à cette norme.
+ Un conteneur est une structure de fichier permettant de regrouper (entrelacer) des flux audio
et vidéo, ayant chacun leur codec, ainsi que d’autres méta-informations (sous-titres, chapitrage,
etc.). Toutes les normes et tous les codecs ne peuvent pas être encapsulés dans chacun des conteneurs. En général, une extension de fichier (.ogg, .mp4, .mkv, .avi, etc.) fait référence
au conteneur et non au codec.
Les conteneurs sont complexes à mettre en oeuvre car ils doivent associer des données binaires
de natures différentes en conservant une cohérence pour une lecture directe ou notamment en
streaming, en intercalant des bouts d’audio et de vidéo à petits intervalles réguliers pour une
Éric Hervet
- 49/128 -
Hiver 2014
INFO4007
réception progressive par le réseau.
Quelques conteneurs populaires :
Nom
Extension Origine
Advanced Streaming Format
Audio Video Interleave
Flash Vidéo
Détails et affinités
.asf
Microsoft
Conteneur pour WMA, WMV, MPEG4, etc.
.avi
Microsoft
Ancien format limité en fonctionnalités.
.flv
.f4v
Matroska
.mkv
.mka
.mks
MP4 ou MPEG- .mp4
4 Part 14
.m4v
MPEG PS/TS
.mpg
.mpeg
.ps
Ogg
.ogg
.oga
.ogv
.ogx
QuickTime
.mov
Adobe
MPEG
Conteneur dédié au plug-in Flash pour flux dérivé du
H.264 ou VP6 (On2), PCM et MP3.
Conteneur pour de nombreux codecs : DivX, XviD,
H.264, Theora, VP8, Vorbis, AAC, MP3, AC3, DTS,
PCM, FLAC et sous-titres SubRip, VobSub, etc.
Dérivé de QuickTime, conteneur pour H.264/MPEG4 AVC, AAC, etc.
Conteneur pour de nombreux formats MPEG.
Xiph.org (format
libre)
Conteneur pour Theora, Vorbis et autres FLAC,
Speex, etc.
Apple
VOB
WebM
DVD Forum
Google (format
libre)
Conteneur pour de nombreux formats MPEG-1,
MPEG-2, MPEG-4, H.263, H.264, AAC, 3GPP, etc.
Pour les DVD (MPEG-2 et MPEG-1 Audio Layer II).
Conteneur pour VP8 et Ogg Vorbis dérivé de Matroska.
.vob
.webm
Matroska.org
(format libre)
ISO
Les normes et codecs vidéo courants sont : MPEG-1, MPEG-2, MPEG-4, H.264/MPEG-4, AVC,
DivX (dérivé de H.263 et H.264), Ogg Theora, VC-1, VP8, WebM, WMV (Windows Media Video de
Microsoft), XviD, etc.
Les codecs audio courants sont : MP3 (MPEG-1/2 Audio Level III), AAC, APE, FLAC, Ogg Vorbis,
WMA (Windows Media Audio de Microsoft), RealAudio, AC3, DTS, PCM (.wav), etc.
VII.1.1.
Vidéo
Actuellement, il existe trois leaders dans le domaine de la vidéo pour le web.
+ Theora
Prévu initialement comme format par défaut dans la spécification HTML 5, il a été retiré dû à
des conflits entre membres ayant des intérêts dans des formats concurrents.
On le retrouve majoritairement dans le conteneur Ogg. Il est issu du format libre, sans brevets,
Éric Hervet
- 50/128 -
Hiver 2014
INFO4007
défendu à l’origine par Mozilla puis implémenté par Opera et Google Chrome. Il est basé sur le
codec libre VP3 de On2 Technologies. Ogg Vorbis est son jumeau pour l’audio.
+ WebM
WebM est soutenu par Mozilla, Opera et surtout Google qui en est à l’origine.
Son conteneur est dérivé de Matroska et son codec vidéo de VP8, une autre réalisation de On2,
racheté par Google en 2010 avec l’intention de le libérer de ses brevets. Son utilisation est
désormais totalement gratuite, libre de tous droits. L’audio est encodé en Ogg Vorbis. Sa qualité
est équivalente au H.264.
Autres ressources et décodeurs WebM :
http://code.google.com/p/webm/
+ H.264
Aussi dénommé MPEG-4/AVC, le format H.264 est mis en avant par Apple pour Safari et ses
plates-formes mobiles sous iOS. Internet Explorer 9 l’implémente grâce à la balise <video>.
Son avantage est de fournir une bonne qualité d’image même à bas débit, grâce à différents
profils qui définissent chacun des paramètres pour la compression et la décompression des flux
(puissance, résolution, fonctionnalités, etc.). Il est répandu dans les moyens de diffusion en
haute définition et lu par des nombreux mobiles et consoles de jeu avec décodage matériel.
Son principal inconvénient est qu’il dépend directement d’un partenariat nommé The Joint
Video Team et de groupes possédant des intérêts économiques, dont le consortium MPEG 29 .
Soumis à des brevets logiciels, il oblige le paiement de droits d’exploitation pour les programmes qui le produisent ou le lisent. On le retrouve dans les disques Blu-Ray.
Afin de contrer l’intérêt pour les codecs libres, le consortium MPEG a décidé d’accorder une
gratuité d’usage de la licence jusqu’en 2015 pour les vidéos non payantes. Après cette
date, rien n’empêchera les ayant droits de réclamer de substantielles royalties. C’est pourquoi
Mozilla et Opera n’ont pas souhaité le prendre en considération.
Cependant, Mozilla propose pour reconnaître le H.264+AAC+MP3, de le faire non pas via un
codec embarqué dans le navigateur, mais via les couches du système d’exploitation, par exemple
GStreamer sous Linux ou Windows Media Foundation pour Vista et versions supérieures, et
également à partir de la version 4 d’Android.
Google a implémenté cette méthode dans Chrome mais a annoncé vouloir d’en défaire à moyen
terme pour promouvoir WebM et empêcher la naissance d’un monopole.
On estime qu’en 2013 plus de 85% des vidéos disponibles sur Internet étaient en H.264.
Historique
+ MOV, AVI, ASF et WMV sont des formats peu compressés. MOV vient du monde Apple, AVI,
ASF et WMV de Microsoft.
29. Moving Pictures Expert Group.
Éric Hervet
- 51/128 -
Hiver 2014
INFO4007
Le format MOV (quicktime MOVies, créé en 1992) est un format propriétaire qu’Apple a
commencé à diffuser gratuitement en 1994 hors du monde MAC, pour concurrencer le format
AVI de Microsoft. Le format MOV présentait alors une taille bien moins importante à une
époque où le format MPEG n’était pas aussi répandu qu’actuellement. Avec la démocratisation
du format MPEG adopté notamment pour les DVD 30 s, Apple se devait de s’ajuster : l’idée de
compresser les données ne doit pas de faire au détriment de la qualité. Ainsi, Quicktime 6
a permis de lire des vidéos Haute Résolution avec un son de qualité CD 31 et avec une taille
nettement plus accessible que le format AVI. Il supporte aussi le format MPEG4 (vidéo) et
l’AAC 32 (audio). Les grands du cinéma l’ont adopté, ainsi George Lucas a d’abord proposé la
bande annonce de « StarWars Episode 1 » en qualité QT5 (avant de la proposer en MPEG,
le monde L INUX /U NIX ayant été longtemps démuni de lecteur QT5). D’autres suivent : « Wild
wild west », « The world is not enough », « Austin Powers 2 », etc. Autre qualité face au MPEG :
le streaming. Q UICKTIME 7 (2005) supporte aussi le nouveau format pour la haute définition,
l’H.264.
Un fichier Q UICKTIME contient une ou plusieurs pistes, chacune comportant un type de
données particuliers : audio, vidéo, effet ou texte (par exemple sous-titres). Chaque piste
contient une piste média, c’est-à-dire un flux (stream) codé numériquement (grâce à un codec
tel que Cinepak, Sorenson, MP3, MJPEG, DivX, etc.) ou une référence à un média situé dans
un autre fichier ou sur un réseau.
Le terme codec provient des mots COmpression et DÉCompression. Il s’agit d’un procédé permettant de compresser et de décompresser un signal audio ou vidéo, le plus souvent en temps
réel, du moins pour la décompression. Le procédé peut être logiciel ou matériel. Par extension, un codec est alors le logiciel ou le circuit qui contient cet algorithme.
Les algorithmes de compression de données permettent généralement de réduire la taille du
fichier original par des facteurs allant de 2 à 100, voire plus pour certaines applications.
La compression se fait soit avec des algorithmes purement mathématiques de compression de
données sans perte d’information (Ex. : fichier ZIP ou GZIP) ou par des algorithmes prenant
en compte les caractéristiques des données à compresser et qui ôtent des informations considérées comme « non pertinentes ».
La compression audio Ogg Vorbis par exemple, compresse le son suivant des critères « psychoacoustiques » en tenant compte des fréquences non ou peu audibles du spectre sonore telles
que les harmoniques et les fréquences très aiguës. C’est une compression dite « destructive » ou
« avec perte », car elle perd des informations sonores.
Les codecs vidéo MPEG, D IV X ou X VI D par exemple, utilisent des algorithmes prenant en
compte la persistance rétinienne, la différentiation des couleurs par l’oeil et d’autres « imperfections » de la vue pour compresser de manière à éliminer des détails que l’être humain ne perçoit
presque pas en temps normal. Il s’agit aussi de compression avec perte.
Un conteneur accepte tels ou tels codecs audios et vidéos, et permet la présence d’une ou
30. Digital Video Disc.
31. Compact Disc.
32. Advanced Audio Coding.
Éric Hervet
- 52/128 -
Hiver 2014
INFO4007
plusieurs pistes audios, de sous-titres intégrés ou non, de chapitres, et éventuellement d’autres
informations. Certains formats de fichiers désignent à la fois le conteneur et le codec, d’autres
uniquement le conteneur et d’autres uniquement le codec. À cela s’ajoute la notion de support :
disque dur, disque optique CD ou DVD, mémoire flash, etc. Les principaux conteneurs actuels
sont : AVI, M ATROSKA (.mkv), Q UICKTIME, R EAL M EDIAV IDEO, D IV X, etc.
Le format AVI 33 a été présenté par Microsoft en 1992 comme élément de la vidéo pour la
technologie de Windows. Dans un fichier AVI, chaque composante audio ou vidéo peut être
compressée par n’importe quel codec. Le format D IV X est souvent utilisé comme codec vidéo
et le format MP3 comme codec audio, mais d’autres codecs peuvent être utilisés, comme X VI D
ou MPEG pour la vidéo, et MP2 ou WAV pour l’audio. Le format AVI permet de réunir en un
seul fichier une piste vidéo et jusqu’à 99 pistes audios, ce qui permet par exemple d’utiliser
plusieurs langues pour un même film.
Le format ASF 34 est à la fois un format et un codec vidéo développé par Microsoft et très
utilisé en streaming. Sa version haute définition est implantée sur les HD-DVD de NEC et
Blu-Rays de Sony.
Le format WMV 35 est une famille de codecs vidéo propriétaires développés par Microsoft.
D’une part en concurrence avec la norme MPEG-4/H.264, et d’autre part étant obligé, par les
consortiums industriels, de présenter un codec standardisé, Microsoft a soumis le codec WMV9
à la SMPTE 36 pour le standardiser sous le nom de VC-1. En 2005, le codec VC-1 devient stable
et se adopte un statut de standard international.
Un des effets pervers de l’ouverture par Microsoft des spécifications de leur codec, est que les
autres compagnies du domaine ont pu se rendre compte que Microsoft avait bel et bien pillé
dans les brevets de standards existants comme MPEG-2 et MPEG-4/H.264.
+ MPEG : format très compressé, adopté pour les CDs vidéo, DVDs et la TV numérique.
Les réunions du Moving Picture Experts Group ont démarré en 1988 dans le but de développer
un premier standard, MPEG-1, pour des applications de stockage audio/vidéo du type Video
CD. MPEG a ensuite rapidement produit un second standard, MPEG-2, visant essentiellement
les applications liées à la télévision numérique. D’autres familles de standards ont depuis été
produites, MPEG rassemblant un nombre croissant de spécialistes provenant de l’industrie de
l’électronique, de l’informatique et des télécommunications.
MPEG a développé les standards suivants :
* MPEG-1 (1988) : leur premier standard audio et vidéo utilisé plus tard comme standard
des CDs vidéo et qui inclut le populaire format audio MPEG-1 Layer 3 (MP3). Ce format
33.
34.
35.
36.
Audio Video Interleave.
Advanced Streaming Format.
Windows Media Video.
Society of Motion Picture and Television Engineers.
Éric Hervet
- 53/128 -
Hiver 2014
INFO4007
offre une résolution à l’écran de 352 x 240 pixels avec un débit d’environ 1,5 Mbit/s.
* MPEG-2 (1994) : standard couvrant le codage de l’audio et de la vidéo, ainsi que leur
transport pour la télévision numérique : télévision numérique par satellite, télévision numérique par câble, télévision numérique terrestre, et (avec quelques restrictions) pour les
vidéo-disques DVDs ou SVCDs. C’est notamment le format utilisé actuellement pour la
TV sur ADSL 37 . Les débits habituels sont de 2 à 6 Mbit/s pour la résolution SD et de 15
à 20 Mbit/s pour la résolution HD.
* MPEG-4 : norme comblant le vide des bas débits (jusqu’à 2 Mbit/s) pour lesquels MPEG-2
n’avait pas été développée. Introduite en 1998, MPEG-4 est une norme de codage d’objets
audio et vidéo.
MPEG-4 est d’abord conçue pour gérer le contenu de scènes comprenant un ou plusieurs
objets audio-vidéo. Contrairement à MPEG-2 qui visait uniquement des usages liés à la
télévision numérique, les usages de MPEG-4 englobent toutes les nouvelles applications
multimédia comme le téléchargement et le streaming sur Internet, le multimédia sur mobile, la radio numérique, les jeux vidéo, la télévision et les supports haute définition.
MPEG-4 a développé de nouveaux codecs audio et vidéo et enrichit les contenus multimédia en ajoutant de nouvelles technologies comme VRML 38 (présentations 3D), des
fichiers composites orientés-objet (incluant des objets audio, vidéo et VRML), le support
pour la gestion des droits numériques et plusieurs types d’interactivité.
MPEG-4 se décompose en une suite de normes, les parties, qui spécifient un type de codage particulier. Dans chaque partie plusieurs profils (collection d’algorithmes) et niveaux
(contraintes quantitatives) sont définis. Un consortium industriel désirant utiliser MPEG4 choisit une ou plusieurs parties de la norme et, pour chaque partie, il peut sélectionner
un ou plusieurs profils et niveaux correspondant à ses besoins.
Il existe plus de 20 parties de MPEG-4, décrivant entre autre la synchronisation et le multiplexage de la video et de l’audio, la compression pour les signaux vidéo, la compression
pour le codage perceptuel et les signaux audio, les tests de conformité, les logiciels de référence de la norme, le DMIF 39 , les implémentations optimisées, les méthodes de transport
de MPEG-4 sur IP, le codec avancé de compression vidéo appelé aussi H.264 ou AVC 40 ,
les extensions de gestion et de protection de la propriété intellectuelle (IPMP), le format
de fichier du codec AVC, la compression et transmission de polices de caractères, etc.
* MPEG-7 : un standard pour décrire et chercher du contenu multimédia.
* MPEG-21 : MPEG décrit ce futur standard comme un Multimedia Framework.
Tout l’art de MPEG est d’utiliser des algorithmes utilisant à la fois des méthodes de compression spatiale et temporelle.
37.
38.
39.
40.
Asymmetric Digital Subscriber Line.
Virtual Reality Modeling Language ou Virtual Reality Markup Language.
Delivery Multimedia Integration Framework.
Advanced Video Codec.
Éric Hervet
- 54/128 -
Hiver 2014
INFO4007
La compression spatiale est à la fois spectrale et prédictive : on applique d’abord une transformation DCT 41 . Puis, dans une image donnée, la valeur d’un pixel est « prédite » à partir d’un
groupe de pixels voisins ; seule la différence entre la valeur prévue et la valeur réelle est codée.
On obtient ainsi une valeur souvent proche de zéro, ce qui permet de la coder avec peu de bits.
La compression temporelle combine un codage par différences entre des images successives et
une prédiction de mouvement : on analyse les changements d’une image à l’autre en étudiant les
changements spatiaux et le mouvement par blocs de pixels. Certains blocs restent inchangés,
d’autres subissent de légers déplacements, d’autres sont totalement modifiés. On déduit de la
succession de plusieurs images un vecteur de mouvement par bloc, appelé compensation de
mouvement. À partir de ces éléments, on obtient trois sortes d’images : les images Intra (I),
codées intégralement, avec compression spatiale bien sûr. Elles servent de référence pour les
autres images. Il y a une image I au début de chaque plan et une au moins toutes les 12 images.
Les images Prédictives (P), codées par prédiction temporelle, à la fois par différence spatiale
avec les images déjà codées et avec prédiction de mouvement. Les images Bidirectionnelles (B),
obtenues par interpolation à partir des images I et P situées avant et après et en utilisant les
vecteurs de mouvement.
F IGURE 1 – Les différents types d’images dans une séquence vidéo MPEG.
+ R EALV IDEO, format créé spécifiquement pour l’utilisation de vidéos sur Internet.
Conçu par R EAL N ETWORKS, le format R EALV IDEO s’est largement imposé aux débuts des
vidéos en streaming. R EALV IDEO 9 offrait des taux de compression très élevés et une qualité
d’image excellente.
C’est surtout sur le plan commercial que ce format a fini par décliner : Si le lecteur R EAL P LAYER était gratuit, les propositions régulières de mise à jour vers l’édition payante, plus
complète, ont fini par lasser les utilisateurs.
VII.1.2.
Audio
Actuellement, il existe aussi trois leaders dans le domaine de l’audio pour le web.
41. Discrete Cosine Transform.
Éric Hervet
- 55/128 -
Hiver 2014
INFO4007
+ MP3 (MPEG-1 Audio Layer III)
Introduit en 1991, il est devenu très populaire et aussi controversé, provoquant l’essor de la
musique numérique sur internet. Il faut savoir que ce format est toujours soumis à des
brevets, même s’il est lu par tous les lecteurs portables du marché et qu’il existe des dizaines
de programmes pour compresser de l’audio en MP3.
La plupart des conteneurs vidéo supportent un flux audio MP3 sur deux canaux. La norme
définit la façon dont il est décodé mais laisse libre le choix des algorithmes d’encodage. Il
existe donc plusieurs méthodes de compression avec des résultats variables. Par exemple on
peut jouer sur les paramètres de qualité affectant directement la bande passante nécessaire à
la transmission (de 32 à 320 kpbs, mono ou stéréo, débit (bitrate) variable ou constant).
+ AAC (Advanced Audio Coding)
L’AAC fournit une meilleure qualité que MP3 à débit équivalent avec la possibilité de contenir jusqu’à 48 canaux. Il a été choisi par Apple pour iTunes et comporte des profils dont le
fonctionnement est équivalent à celui de H.264 pour la compression et la lecture.
C’est un format soumis aussi à des brevets logiciels. On le trouve généralement dans un
conteneur MP4, supporté par les produits Apple et Adobe Flash.
+ Vorbis
Vorbis est à l’audio ce que Theora est à la vidéo. Il est libre de droits et dispose d’atouts techniques qui le placent largement au-dessus de MP3 avec par défaut une compression à débit
variable.
On le retrouve dans des conteneurs tels que WebM dont il est l’unique format audio, et MP4 ou
Matroska.
+ Opus
En septembre 2012 est apparu un nouveau codec open source nommé Opus (http://
opus-codec.org/). De nombreux espoirs sont fondés sur les capacités techniques de ce codec
conçu spécifiquement pour le Web : pouvoir fonctionner à un très bas débit, avec une grande
réactivité, pour des débits très variables, autant pour la parole que pour la musique.
Ce codec peut être accueilli dans un conteneur Ogg et est supporté par Firefox 15+.
Parmi les outils de conversion, MiroVideoConverter est l’un des plus simples à utiliser et
permet de cibler aussi les mobiles sous iOS et Android.
Historique
+ MIDI (Musical Instrument Digital Interface), le format le plus léger, apparu en 1982. Il
s’agit d’une reconstitution de musique note par note grâce à une carte son.
Pour décrire une note, le format MIDI utilise quelques octets seulement : le ton de la note (sol,
la, si, do, ...), son intensité (fort, pas fort), le numéro du canal sur lequel l’interpréter (à chaque
Éric Hervet
- 56/128 -
Hiver 2014
INFO4007
canal correspond un instrument) et éventuellement quelques autres informations telles que la
synchronisation, des glissendo, l’aftertouch (seconde pression sur une touche sans la relâcher),
des vibratos, etc. Tandis qu’un CD musical, pour décrire une note, donne l’intensité du signal à
intervalles très courts (généralement 44000 fois par secondes - 44 kHz), dans le format MIDI
le timbre de la note n’est pas communiqué, seul l’ordre de jouer cette note est transmis. Il
faut donc absolument un “synthétiseur” pour interpréter les ordres d’un fichier MIDI (carte
son). L’avantage du format MIDI est la très petite taille des fichiers pour plusieurs minutes de
musique. L’inconvénient est de disposer d’un synthétiseur de la meilleure qualité possible.
+ WAV (Waveform Audio File Format) : enregistrement sonore non compressé (CDs audio).
Pour numériser le son, on mesure à intervalles de temps réguliers (fréquence d’échantillonnage) les variations de l’onde sonore que l’on quantifie selon une certaine échelle de valeurs
possibles (sur 8 bits : 256 valeurs possibles, sur 16 bits : 65536 valeurs possibles). Plus la fréquence d’échantillonnage est élévée et plus l’échelle de quantification est grande, meilleure est
la modélisation.
F IGURE 2 – Échantillonnage du son.
Le choix de la fréquence d’échantillonnage et de la profondeur de quantification influencent
directement le volume des données numérisées et la fidélité de la numérisation : un équilibre
est à trouver entre taille du fichier numérique et qualité du son.
Une qualité CD audio standard est une numérisation à 44.1KHz, en 16 bits et en stéréo. Soit
2 ∗ 16 ∗ 44100 = 1411200 bits/s, soit 172.3 Ko/s, soit 10.1 Mo pour une minute de son.
+ MP3 (MPEG-1 Audio Layer 3) et R EAL A UDIO : formats compressés. MP3 dispose d’une
excellente qualité sonore, R EAL AUDIO favorise la compression et donc la rapidité de téléchargement.
MP3 est un format de compression avec pertes et permet de compresser jusqu’à 1/12ème du
format CD audio par exemple. La compression MPEG-1 Layer 3 consiste à retirer des données
Éric Hervet
- 57/128 -
Hiver 2014
INFO4007
audio les fréquences inaudibles pour l’auditeur moyen dans des conditions habituelles d’écoute.
La compression vise à analyser les composantes spectrométriques d’un signal audio et de leur
appliquer un modèle psycho-acoustique pour ne conserver que les sons “audibles”. L’oreille
humaine est capable de discerner, en moyenne, des sons entre 0.02 kHz et 20 kHz, sachant
que sa sensibilité est maximale pour des fréquences entre 2 et 5 kHz. Après compression, un
algorithme de codage (donc sans perte) est appliqué, permettant de gagner 20% d’espace
supplémentaire (codage des sons redondants). Il s’agit du codage de Huffman.
Le format R EAL AUDIO permet de diffuser du son en direct sur Internet (streaming). Il s’agit
d’un format propriétaire lancé en 1995 par la société RealNetworks. Le streaming consiste à
envoyer le son par vague, c’est-à-dire par petites séquences. Il est ainsi possible de suivre un
concert, une entrevue, la diffusion d’une radio en direct sur Internet. Cette technologie n’est
limitée que par l’éventuelle surcharge d’un site qui détériore considérablement la qualité de
réception. La société RealNetworks offre différents lecteurs gratuits ou non selon les fonctionnalités offertes (http://www.real.com). Pour créer des fichiers au format R EAL AUDIO,
RealNetworks propose RealEncoder (gratuit) et RealProducer (payant).
La compression utilisée par le format R EAL AUDIO ressemble à MPEG mais les algorithmes
utilisés sont propriétaires. La qualité du R EAL AUDIO est nettement inférieure à celle du MP3
et il est souvent impossible de télécharger le contenu pour le rejouer par la suite.
+ AAC (Advanced Audio Coding) : format de compression avec perte dérivé du format
MPEG-4 et qui offre un meilleur ratio que MP3.
Le format AAC offre des taux d’échantillonnage (bitrates) entre 16kbps et 320kbps, la norme
étant 128kbps et permet de coder le signal original à des fréquences différentes (variable
bitrates) selon les caractéristiques locales du signal. AAC permet aussi de jouer du son sur 48
canaux différents.
AAC est reconnu comme étant un des meilleurs formats en terme de ratio qualité/compression.
Ceci dit, le format MP3 offre également une version optimisée appelée LAME 42 qui donne
une qualité comparable. Mais en ce qui concerne les fréquences d’échantillonnage (bitrates),
un fichier audio au format MP3 encodé à 128kbps est équivalent en qualité à un fichier au
format AAC encodé à 64kbps. Ceci explique la récente et montante popularité du format AAC,
notamment sur les radios internet.
+ FLAC (Free Lossless Audio Codec) : format libre de compression audio sans perte (même
principe que ZIP mais dédié à l’audio).
FLAC utilise le codage de Golomb-Rice et la prédiction linéaire pour convertir les échantillons
en une série de blocs non corrélés d’environ 100ms.
Les taux de compression varient de 30% à 70% selon la source : plus le signal est constitué
d’ondes régulières (sons naturels), meilleure est la compression. Par contre, un signal aléatoire
42. LAME Ain’t an MP3 Encoder
Éric Hervet
- 58/128 -
Hiver 2014
INFO4007
(bruit) ne se compresse pas très bien.
Un fichier audio au format FLAC possède généralement l’extension .flac ou .fla. À l’heure
actuelle de plus en plus de logiciels pour lire (décoder) de la musique acceptent le format FLAC
(WinAMP, Windows Media Player, XMMS, Rhythmbox, etc.).
Également de plus en plus d’appareils audio (devices) (cinémas maison, lecteur portables, etc.).
Plusieurs logiciels permettent aussi de créer (encoder) des fichiers au format FLAC (WinAMP,
DbPowerAMP, Media Jukebox, Exact Audio Copy, etc.).
VII.2.
Outils d’encodage et de conversion
+ Handbrake - Convertisseur multiplateforme, licence GPL.
http://handbrake.fr/
+ MiroVideoConverter - Convertisseur multiformat, licence Open Source.
http://www.mirovideoconverter.com/
+ Ffmpeg - Librairie de conversion, Open Source.
http://fmpeg.org/
+ Ffmpeg2Theora - Librairie de conversion pour Ogg Theora.
http://v2v.cc/~j/ffmpeg2theora/
+ Firefogg - Extension Firefox.
http://firefogg.org/
+ VLC - Lecteur et encodeur multiplateforme, Open Source.
http://www.videolan.org/vlc/
+ The Lame Project - Encodeur MP3, licence LGPL.
http://lame.sourceforge.net/
+ OggConvert - Encodeur Ogg, licence LGPL.
http://oggconvert.tristanb.net/
+ Audacity - Lecteur et encodeur audio, OpenSource.
http://audacity.sourceforge.net/
VII.3.
Balises média & attributs
<audio> et <video> se comportent de la même façon et ont beaucoup d’attributs en commun. La
plupart du temps, l’attribut src suffit et il est conseillé d’utiliser l’attribut alt en cas de non support
Éric Hervet
- 59/128 -
Hiver 2014
INFO4007
par le navigateur.
< ! −− Une image −−>
<img src= " image . jpeg " a l t = "Mon image " >
< ! −− Une vidéo −−>
<video src= " ma_video .webm" a l t = "Ma vidéo " >
< ! −− Un son −−>
<audio src= " ma_musique . mp3" a l t = "Ma musique " >
Ressources pour HTML 5 Audio et Vidéo :
+ W3C :
http://www.w3.org/TR/html5/video.html#audio
http://www.w3.org/TR/html5/video.html#video
+ WhatWG :
http://www.whatwg.org/specs/web-apps/current-work/complete/video.html#audio
http://www.whatwg.org/specs/web-apps/current-work/complete/video.html#video
+ Conteneurs/formats vidéo :
http://wiki.whatwg.org/wiki/Video_type_parameters
<video> et <audio> peuvent inclure une balise <source> pour :
+ Pouvoir proposer plusieurs formats de fichiers avec chacun un attribut type différent, pour
désigner le type MIME et éventuellement le codec à utiliser.
+ Pouvoir proposer un format de fichier mieux adapté selon l’appareil de consultation (ordinateur,
tablette, téléphone mobile), avec l’attribut media et une media query.
Le navigateur choisit alors d’utiliser la source la plus appropriée selon ces critères.
<video>
<source src= " video . mp4" type= " video / mp4" >
<source src= " video . 3 gp " type= " video / 3 gp " media= " handheld " >
<source src= " video . ogv " type= " video / ogg ; codecs=theora , v o r b i s " >
<source src= " video .webm" type= " video /webm; codecs=vp8 , v o r b i s " >
Ce navigateur ne supporte pas l ’ élément <code>video< / code>
< / video>
Éric Hervet
- 60/128 -
Hiver 2014
INFO4007
<video> et <audio> peuvent aussi inclure une balise <track> pour le support de « pistes de texte
synchronisées », la plupart du temps des sous-titres.
<track> est important pour :
+ Fournir des sous-titres et légendes aux personnes malentendantes ;
+ Fournir des audio-descriptions aux personnes malvoyantes ;
+ Afficher des traductions aux personnes ne comprenant pas la langue parlée ;
+ Afficher les paroles d’une chanson (karaoké) ;
+ Donner la possibilité de naviguer par chapitres ou de rechercher « dans » la vidéo.
<track kind= " c a p t i o n s " src= " s o u s t i t r e s . v t t " >
Le WhatWG recommande l’usage du format WebVTT qui permet :
+ L’application de styles CSS (balise <c> et pseudo-élément ::cue) ;
+ L’utilisation de balises (<i>, <b>, <u>) ;
+ Le positionnement (étiquettes T : horizontal, A : alignement, L : vertical, S : taille du texte, D :
direction) ;
+ L’intégration de caractères internationaux (grâce à Ruby).
Exemple ~ :
<video src= " video .webm" id= " mavideo " >
<track kind= " s u b t i t l e s " src= " video . f r . v t t " s r c l a n g = " f r "
label= " Français " d e f a u l t >
<track kind= " c a p t i o n s " src= " video . f r . cap . v t t " s r c l a n g = " f r "
label= " Français pour malentendants " >
<track kind= " s u b t i t l e s " src= " video . en . v t t " s r c l a n g = " en "
label= " English " >
<track kind= " s u b t i t l e s " src= " video . sp . v t t " s r c l a n g = " sp "
label= " Spanish " >
<track kind= " d e s c r i p t i o n s " src= " video . f r . desc . v t t " s r c l a n g = " f r "
label= " D e s c r i p t i o n t e x t e " >
< / video>
Une API JavaScript via TextTrack est prévue pour accéder aux contenus de la balise <track> et
pour gérer des événements appropriés.
Exemple :
var video = document . getElementById ( "mavideo" ) ;
var track = video . textTracks [ 0 ] ;
Éric Hervet
- 61/128 -
Hiver 2014
INFO4007
track . mode = TextTrack .SHOWING; // HIDDEN, SHOWING ou DISABLE
track . oncuechange = function ( e )
{
// ...
};
http://www.w3schools.com/tags/ref_av_dom.asp
Attributs pour <audio> et <video>
+ src
+ width et height
Zone d’affichage pour la vidéo.
+ controls
Attribut booléen pour activer/désactiver la présence des contrôles visuels à l’écran.
+ poster
Pour indiquer une image de substitution à afficher en place de la vidéo avant la lecture. (N’existe
pas pour <audio>.)
+ autoplay
Déclenche la lecture automatiquement (aussitôt que le média est prêt).
+ preload
Pour précharger le fichier média dès la consultation du document HTML. Les valeurs possibles
sont : auto (charge la totalité du média), metadata (charge uniquement les méta-informations),
none (ne précharge rien).
+ loop
Pour lire indéfiniment le média en boucle.
+ mediagroup
Pour regrouper plusieurs médias et les synchroniser.
VII.4.
Interface de contrôle et événements
L’intérêt majeur de <audio> et <video> réside dans leur capacité à être contrôlés via le DOM JavaScript. Ils implémentent tous les deux l’interface HTML Media Element qui confère la gestion des
événements, des propriétés accessibles en modification ou en lecture seule.
http://www.w3schools.com/html/html5_audio.asp
http://www.w3schools.com/html/html5_video.asp
VII.5.
Prise en charge par les navigateurs
Navigateur
Version
Navigateur
Version
Mozilla Firefox
Internet Explorer
Apple Safari
Google Chrome
Opera
3.5+
9.0+
4.0+
3.0+
10.5+
Android
iOS
Opera Mobile
Opera Mobile
2.3+
1.0+
11+
-
Éric Hervet
- 62/128 -
Hiver 2014
INFO4007
VIII.
VIII.. HTML5 Canvas
HTML5 Canvas
Canvas est une API de dessin 2D, puissante alternative de Flash et Java pour la conception en ligne
d’images fixes ou animées, à l’aide de formes ou de tracés pixel par pixel.
http://dev.w3.org/html5/spec/the-canvas-element.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
http://www.w3schools.com/html/html5_canvas.asp
http://abaque.ca/~eric/h14/info4007/exemples/canvas
VIII.1.
Élément <canvas>
Exemple (interaction HTML5/JavaScript) :
<canvas id= " dessin " width= " 640 " height= " 480 " >
Texte a l t e r n a t i f pour l e s navigateurs qui ne supportent pas canvas .
< / canvas>
<script >
var dess = document . getElementById ( ’dessin’ ) ;
var c t x = dess . getContext ( ’2d’ ) ;
c t x . f i l l S t y l e = "red" ;
c t x . f i l l R e c t ( 2 0 , 30 , 100 , 5 0 ) ;
</ s c r i p t >
Éric Hervet
- 63/128 -
Hiver 2014
INFO4007
VIII.2.
Formes géométriques
VIII.3.
Chemins
VIII.4.
Styles, remplissages, couleurs
VIII.5.
Dégradés
VIII.6.
Transformations
VIII.7.
Images
VIII.8.
Pixels
VIII.9.
Texte
VIII.10.
Ombrages
VIII.11.
Transparence, composition & masques
VIII.12.
Contrôle clavier & souris
VIII.13.
Animation et jeux
VIII.14.
3D : WebGL
VIII.. HTML5 Canvas
Avant l’arrivée de Canvas, plusieurs tentatives ont été menées pour introduire la 3D dans le monde
du web, toujours avec des extensions propriétaires et des langages variés : VRML 43 (1994), X3D,
basé sur XML (2001), Cult3D, etc.
http://www.khronos.org/webgl
<canvas> permet l’utilisation de WebGL, très proche d’OpenGL ES 2.0 pour le Web et adapté
à JavaScript. WebGL s’efforce de fonctionner nativement dans les navigateurs, sans extension
supplémentaire, et avec accélération matérielle si possible.
Exemple :
http://helloracer.com/webgl
http://www.chromeexperiments.com/webgl
http://mrdoob.github.com/three.js (Bibliothèque 3D pour Canvas)
http://www.c3dl.org (Bibliothèque 3D JS)
43. Virtual Reality Markup Language.
Éric Hervet
- 64/128 -
Hiver 2014
INFO4007
VIII.15.
VIII.. HTML5 Canvas
Graphisme vectoriel : SVG
SVG 44 est un format d’images vectorielles décrit en XML. Il ne repose pas sur les mêmes principes
que Canvas. C’est un ensemble de balises qui décrivent le contenu d’une image à l’aide de formes
simples.
Contrairement aux images matricielles, ces formes peuvent être redimensionnées, manipulées de
différentes façons, sans subir d’altération, car le moteur de rendu recalcule à chaque fois le contenu
de la zone d’affichage d’après les informations fournies initialement.
Par contre, les tracés étant définis en XML, cela signifie que les éléments SVG sont de véritables éléments DOM, accessibles et pouvant être indexés par les moteurs de recherche. Cela
signifie aussi que la description du contenu d’une image complexe peut vite se révéler très verbeuse.
Le format SVG devrait être utilisé plutôt pour les formes simples et l’interaction ; tandis que Canvas
est plus performant pour les dessins et les animations.
http://abaque.ca/~eric/h14/info4007/exemples/svg
44. Scalable Vector Graphics.
Éric Hervet
- 65/128 -
Hiver 2014
INFO4007
IX.
IX.. Géolocalisation
Géolocalisation
Avec les ordinateurs, téléphones intelligents, tablettes, etc. connectés en permanence à Internet,
la capacité de fournir avec une précision relative sa propre position géographique, par rapport à
l’environnement et aux autres usagers, a pris tout son intérêt.
De nombreuses applications ont vu le jour :
+ Recherches contextualisées ;
+ Calculs de positions ou d’itinéraires sur une carte ;
+ Partages de localisations géographiques dans les réseaux sociaux.
Différentes méthodes de positionnement existent :
+ Par GPS 45 (et bientôt Galileo) ;
+ Par triangulation dans un réseau de téléphonie sans fil (GSM, 3G, LTE, etc.) ;
+ Par triangulation de réseaux WiFi/RFID/Bluetooth à portée ;
+ Par adresse IP : il existe des bases de données telles que Google Location Services qui établissent
des correspondances entre blocs d’adresses IP délivrées géographiquement par l’IANA 46 puis
par les fournisseurs d’accès à Internet.
IX.1.
Principe
La géolocalisation repose sur des informations très simples : les coordonnées de latitude, de longitude et d’altitude.
F IGURE 3 – Source : http://www.meteo16-vars.com/images/latitudelongitude.jpg
45. Global Positioning System.
46. Internet Assigned Numbers Authority.
Éric Hervet
- 66/128 -
Hiver 2014
INFO4007
IX.2.
Technique
L’ensemble des instructions doit être déclaré dans un élément <script>. La géolocalisation fait appel
à l’objet geolocation, membre de navigator (ou window.navigator).
http://www.w3.org/TR/geolocation-API
<script >
i f ( navigator . g e o l o c a t i o n )
{
// API disponible.
}
else
{
// Pas de support.
}
</ s c r i p t >
Il existe deux manières de déclencher la géolocalisation à partir de l’objet geolocation : avec la
méthode getCurrentPosition() pour une requête unique, ou avec la méthode watchPosition()
pour un suivi continu de la position.
Exemple avec getCurrentPosition() :
function a f f i c h e P o s i t i o n ( p o s i t i o n ) // (2)
{
// Afficher la position dans la page ou sur une carte
}
...
navigator . g e o l o c a t i o n . getCurren t Po s it io n ( a f f i c h e P o s i t i o n ) ; // (1)
getCurrentPosition() (1) retourne immédiatement et tente de réunir les informations de manière
asynchrone avant d’appeler (2) la fonction de callback affichePosition() et de lui fournir un objet
de type Position contenant ces données.
Exemple avec watchPosition() :
function s u r v e i l l e P o s i t i o n ( p o s i t i o n )
{
// Rafraîchir régulièrement la position affichée
// dans la page ou sur une carte.
}
var survId = navigator . g e o l o c a t i o n . watchPosition ( s u r v e i l l e P o s i t i o n ) ; // (1)
// Pour annuler la surveillance continue
function annuler ( )
Éric Hervet
- 67/128 -
Hiver 2014
INFO4007
{
navigator . g e o l o c a t i o n . clearWatch ( survId ) ; // (2)
}
watchPosition() renvoie un identifiant de ressource (1), qui permet d’annuler le suivi continu avec
(2) la fonction clearWatch(). On fait aussi appel à une fonction de callback pour récupérer un objet
Position.
Un objet Position contient des attributs accessibles en lecture seule : timestamp : date à laquelle
la position a été acquise ; et coords : les coordonnées.
L’attribut coords, de type Coordinates, contient les champs suivants :
1. latitude ;
2. longitude ;
3. accuracy : coefficient de précision ;
4. altitude (optionnel) ;
5. altitudeAccuracy : précision sur l’altitude (optionnel) ;
6. heading : direction (optionnel) ;
7. speed : vitesse (optionnel).
Exemple :
http://abaque.ca/~eric/h14/info4007/exemples/geolocation/exemple1.html
Éric Hervet
- 68/128 -
Hiver 2014
INFO4007
X.
X.. File API
Interactions avec les fichiers (File API)
http://www.w3.org/TR/FileAPI
http://www.w3.org/TR/file-system-api
X.1.
Principe
Le W3C définit plusieurs interfaces pour la manipulation du système de fichiers :
+ File : pour accéder aux propriétés du fichier(nom, type, taille, emplacement) ;
+ FileList : pour représenter une séquence de fichiers, sélectionnés par l’élément <input
type="file"> ou glissés-déposés depuis le système d’exploitation vers le navigateur ;
+ Blob : pour accéder au contenu binaire brut d’un fichier (Binary Large Object) ;
+ FileReader : pour lire le contenu d’un fichier ou d’un objet Blob en mémoire ;
+ FileWriter : pour écrire un fichier ;
+ FileWriterSync : pour modifier un fichier de manière synchrone dans un Web Worker ;
+ FileSaver : pour sauver un Blob dans un fichier et en surveiller la progression ;
+ BlobBuilder : pour construire un Blob depuis une chaîne de texte ;
+ FileError et FileException : pour gérer les erreurs et exceptions pouvant survenir ;
+ FileSystem : pour accéder au système de fichier et à son arborescence.
Il existe aussi l’API ProgressEvents pour connaître l’état de progression lors de l’envoi d’un fichier,
et l’API Drag & Drop pour les phases de glisser-déposer.
X.2.
Fonctionnement
< ! −− Pour un s e u l f i c h i e r : −−>
<input type= " f i l e " name= " mon_fichier " >
< ! −− Pour des f i c h i e r s m u l t i p l e s : −−>
<input type= " f i l e " name= " mon_fichier " multiple= " true " >
< ! −− Pour des f i c h i e r s de type connu : −−>
<input type= " f i l e " name= " mon_fichier " accept= " image / jpeg " >
< ! −− ou : −−>
<input type= " f i l e " name= " mon_fichier " accept= " image / jpeg , image / g i f , image / png " >
< ! −− ou : −−>
<input type= " f i l e " name= " mon_fichier " accept= " image / * " >
Après que le ou les fichiers ont été sélectionnés, l’événement onchange de l’élément <input> est
déclenché.
Éric Hervet
- 69/128 -
Hiver 2014
INFO4007
X.. File API
<input type= " f i l e " name= " f i c h i e r s " onchange= " analyse ( t h i s . f i l e s ) " multiple>
<script>
f u n c t i o n analyse ( f i c h i e r s )
{
// ...
}
< / script>
La structure de données recueillie par la fonction comprend un tableau donnant accès aux propriétés
des fichiers : name ou fileName (nom), size ou fileSize (taille en octets) et le type MIME type.
<input type= " f i l e " name= " f i c h i e r s " id= " f i c h i e r s "
onchange= " analyse ( t h i s . f i l e s ) " multiple>
<div id= " i n f o s " >< / div>
<script>
f u n c t i o n analyse ( f i c h i e r s )
{
if ( fichiers )
{
var i n f o s = document . getElementById ( " i n f o s " ) ;
var nbFichiers = f i c h i e r s . length ;
var t a i l l e T o t a l e = 0 ;
i n f o s . innerHTML = " <p> I l y a <b> " +nbFichiers+ " </b> f i c h i e r s < / p> " ;
i n f o s . innerHTML += " <ul > " ;
f o r ( i =0; i <nbFichiers ; i ++)
{
i n f o s . innerHTML += " < l i > " + f i c h i e r s [ i ] . name+ " ( " + f i c h i e r s [ i ] . type+ " ) < / l i > " ;
t a i l l e T o t a l e += f i c h i e r s [ i ] . size ;
}
i n f o s . innerHTML += " </ ul > " ;
i n f o s . innerHTML += " <p>Total : <b> " +Math . round ( t a i l l e T o t a l e /1024)+ " </b> Ko< / p> " ;
}
}
</ script>
X.3.
Lecture avec FileReader
+ readAsArrayBuffer(blob) : renvoie le contenu au format ArrayBuffer ;
+ readAsBinaryString(blob) : renvoie le contenu au format BinaryString ;
Éric Hervet
- 70/128 -
Hiver 2014
INFO4007
X.. File API
+ readAsText(blob,encoding) : renvoie le contenu au format texte (le paramètre encoding est
optionnel) ;
+ readAsDataURL(blob) : renvoie le contenu au format DataURL.
Exemple :
http://abaque.ca/~eric/h14/info4007/exemples/files/exemple2.html
X.4.
Upload simple avec PHP
X.5.
Upload avec XMLHttpRequest2
L’objet XMLHttpRequest est un module particulier de JavaScript reconnu par tous les navigateurs
récents pour dialoguer avec un serveur HTTP sans devoir recharger complètement une page. Des
données peuvent être envoyées et reçues par une requête POST ou GET. Des améliorations de l’objet
initial XMLHttpRequest introduit en 2006 ont été apportées pour simplifier son usage, diminuer
les différences d’implémentation et le rendre plus puissant avec le transfert de données binaires :
« XMLHttpRequest Level 2 ».
http://www.w3.org/TR/XMLHttpRequest2/
Exemple complet :
http://abaque.ca/~eric/h14/info4007/exemples/files/exemple3.html
Éric Hervet
- 71/128 -
Hiver 2014
INFO4007
XI.
XI.. Drag & Drop
Gestion du glisser-déposer (Drag & Drop)
Le glisser-déposer est monnaie courante sur le web. Il fait appel aux attributs draggable, dropzone
et DataTransfer.
XI.1.
Principe
HTML 5 propose une API native performante pour le glisser-déposer, qui repose sur trois fondamentaux :
+ Quel élément peut être glissé : en lui assignant l’attribut draggable ;
+ Quel élément sert de cible et de réception des informations : en lui assignant l’attribut dropzone
et en lui attachant des événements DOM pour savoir lorsqu’un élément la survole ou y est
déposé ;
+ Quel est le comportement dynamique à associer : avec JavaScript et les gestionnaires d’événements, l’action appropriée doit être déclenchée.
XI.2.
Événements et attributs
Les événements DOM pour le glisser-déposer sont :
+ dragstart : début du déplacement (glisser) ;
+ drag : en cours de déplacement ;
+ dragend : fin de déplacement ;
+ dragenter : entrée dans la cible ;
+ dragover : en cours de survol de la cible ;
+ dragleave : sortie de la cible ;
+ drop : action de déposer.
L’utilisation de tous ces événements n’est pas nécessaire, certains ayant essentiellement un rôle
d’agrément visuel sur la zone de réception (dragenter, dragover, dragleave).
+ drag est déclenché continuellement lorsqu’un élément draggable est déplacé (que le pointeur
de souris soit en mouvement ou non) ;
+ dragover est déclenché continuellement lorsque l’élément draggable est maintenu au-dessus
de la cible et son comportement par défaut doit être désactivé pour signifier au navigateur qu’il
est possible de déposer « dans » l’élément survolé ;
+ La spécification prévoit l’attribut dropzone pour l’élément devant recevoir l’événement drop ;
+ Tous les navigateurs ne supportent pas ces fonctionnalités natives de la même manière
. . . notamment Internet Explorer.
Éric Hervet
- 72/128 -
Hiver 2014
INFO4007
XI.3.
XI.. Drag & Drop
Glisser (Drag)
L’attribut draggable peut s’assigner à presque tous les éléments HTML. Par défaut, la plupart des
moteurs de rendu considèrent « draggable » les éléments <img> (images) et <a href ...> (liens).
< ! −− Une image −−>
<img src= " image . jpeg " a l t = " Image " draggable= " true " >
< ! −− Des éléments de l i s t e −−>
<ul>
< l i draggable= " true " >Premier< / l i >
< l i draggable= " true " >Deuxième< / l i >
< / ul>
< ! −− Une s e c t i o n −−>
< s e c t i o n class= " ma_classe " draggable= " true " > . . . < / s e c t i o n >
Le glisser-déposer étant une action très visuelle, il est fréquent d’utiliser des feuilles de styles pour :
+ Symboliser le caractère « draggable » d’un élément, notamment en modifiant l’apparence du
pointeur de souris via la propriété CSS cursor:move ;
+ Symboliser la zone où un élément peut être déposé, par exemple avec une couleur de fond via
background ou une bordure spécifique via border ;
+ Dimensionner la cible, par exemple avec width et height ;
+ Symboliser le survol actif de la zone cible.
Aussi il est fréquent avec CSS d’empêcher la sélection du texte des éléments qu’on souhaite déplacer
à la souris. Ceci se fait en affectant la valeur none à user-select pour tous les éléments auxquels
l’attribut draggable a été assigné ([draggable=true]).
XI.4.
Déposer (Drop)
Le dépôt consiste à :
+ Définir quelle zone du document HTML est en mesure de recevoir un élément glissé, en lui
assignant un attribut dropzone ;
+ Prendre en charge l’événement drop généré par cette action ;
+ Savoir quelle information on veut retirer de l’élément déposé : un texte, une image, un lien, un
ensemble d’éléments, un fichier, etc.
L’attribut dropzone peut comporter un et un seul des mots-clés suivants :
+ copy : indique que le dépôt d’un objet autorisé sur l’élément résultera en une copie des données
déplacées ;
Éric Hervet
- 73/128 -
Hiver 2014
INFO4007
XI.. Drag & Drop
+ move : indique que le dépôt d’un objet autorisé sur l’élément correspondra à un déplacement
direct des données ;
+ link : indique que le dépôt d’un objet autorisé sur l’élément résultera en un lien vers les données
initiales.
Exemple :
<div id= " drop " dropzone= " copy f i l e : image / jpeg f i l e : image / png f i l e : image / g i f " >
< / div>
Cependant, la présence de l’attribut dropzone ne définit pas l’action réelle du point de vue du DOM
et des données, qui dépend de l’événement drop et de la fonction JavaScript associée.
L’événement dragenter est déclenché à l’arrivée sur la cible tandis que dragleave est déclenché à
la sortie.
Il est important de désactiver l’événement dragover car le comportement par défaut des navigateurs
est de refuser tout dépôt. Pour cela, il faut utiliser event.preventDefault() pour les événements
dragover, dragenter et compléter par return false; pour s’assurer que la désactivation s’effectue
pour tous les navigateurs.
XI.5.
Interface DataTransfer
L’API est complétée par l’interface DataTransfer qui joue le rôle de porteur d’information en
HTML 5. Elle stocke les données en provenance de l’élément déplacé (événement dragstart) et les
communique à la cible réceptrice (événement drop). C’est par la propriété event.dataTransfer du
DOM qu’on accède à l’interface DataTransfer.
L’événement dragstart est déclenché dès que l’objet est déplacé et met à disposition sa propriété
dataTransfer pour :
+ Définir quel effet de déplacement est autorisé (move, copy, link) avec la propriété
dataTransfer.effectAllowed ;
+ Mémoriser les données et les rendre disponibles pour tous les autres événements déclenchés
pour le drag & drop avec la méthode setData().
Le premier argument de la méthode setData() reçoit le type de données mémorisées et le second
les données.
Au dépôt sur la cible réceptrice, l’interface DataTransfer permet de retrouver les informations
mémorisées grâce à la méthode getData(), qui bien sûr doit se déclencher à l’événement drop.
L’événement dragend déclenché à la fin d’un glisser-déposer est exploitable pour retirer du DOM
l’élément d’origine s’il ne faut pas en conserver de copie.
Exemple complet :
http://abaque.ca/~eric/h14/info4007/exemples/drag_n_drop/exemple1.html
Éric Hervet
- 74/128 -
Hiver 2014
INFO4007
XI.6.
XI.. Drag & Drop
Glisser-déposer de fichiers
Exemple complet :
http://abaque.ca/~eric/h14/info4007/exemples/drag_n_drop/exemple2.html
XI.7.
Prise en charge
http://www.w3schools.com/html/html5_draganddrop.asp
http://html5demos.com/drag#
Éric Hervet
- 75/128 -
Hiver 2014
INFO4007
XII.
XII.. Événements “Push”
Événements envoyés par le serveur (“Push”)
Les Server-Sent Events (SSE) (événements envoyés par le serveur) sont une manière de transmettre
de l’information depuis le serveur vers le navigateur, par notifications ponctuelles ou continues.
C’est bien le navigateur qui initie la connexion et qui reste à l’écoute du serveur qui peut alors
envoyer des messages au format texte dans le flux ouvert.
XII.1.
Principe
Une fois que la connexion a été établie par le navigateur web, les informations parviennent à la
page HTML depuis le serveur sous forme d’événements DOM. Lorsqu’un événement message est
reçu par le navigateur, une fonction (callback) peut être déclenchée pour prendre connaissance
des données transmises et en faire quelque-chose. Cette méthode élimine la nécessité d’interroger
continuellement le serveur.
Dans le cas de notifications envoyées par le serveur à intervalles réguliers ou via des flux de données continus, ceci impose l’utilisation d’un serveur web capable de maintenir un grand nombre de
connexions simultanées.
Les serveurs web qui sont orientés événements, tels que Node.js ou Nginx, sont plus performants
pour répondre à cette contrainte.
http://www.wikivs.com/wiki/apache_vs_nginx
Le format d’échange entre navigateur et serveur est basé sur du texte simple, quel que soit le langage
utilisé côté serveur (PHP, .NET, Java, Python, Ruby, etc.). Cette API est nommée EventSource.
XII.2.
Technique
Côté client (navigateur)
Il faut instancier un objet de type EventSource et mettre en place un gestionnaire d’événement
message pour la réception.
var sse = new EventSource ( ’event-source.php’ ) ;
// Gestionnaire d’événement
sse . onmessage = function ( event )
{
c o n s o l e . l o g ( event . data ) ;
};
Remarque : la déclaration du gestionnaire d’événement peut aussi être faite gràce à
addEventListener() :
var sse = new EventSource ( ’event-source.php’ ) ;
// Gestionnaire d’événement
Éric Hervet
- 76/128 -
Hiver 2014
INFO4007
XII.. Événements “Push”
sse . addEventListener ( ’message’ , function ( event )
{
c o n s o l e . l o g ( event . data ) ;
} , false ) ;
Côté serveur
La première chose à faire est de servir le flux avec le type MIME text/event-stream. En PHP, cela
peut se faire avec la fonction header() :
header ( " Content −Type : t e x t / event − stream " ) ;
Le contenu doit être encodé en UTF-8. Il peut être délivré par les méthodes classique d’affichage
texte, comme echo ou print() en PHP.
<?php
header ( ’ Content −Type : t e x t / event − stream ’ ) ;
echo ’ data : ’ . time ( ) . PHP_EOL;
?>
Le code ci-dessus envoie le timestamp Unix du serveur (nombre de secondes depuis le 1er janvier
1970). Les fins de lignes acceptées sont CRLF (\r\n), CR (\r) et LF (\n). La constante PHP_EOL est
prévue pour cela.
EventSource permet d’envoyer progressivement des données et donc de recevoir plusieurs événements sans fermer la connexion.
Exemple complet :
http://abaque.ca/~eric/h14/info4007/exemples/push/exemple1.html
Plusieurs lignes data: peuvent se suivre consécutivement, elles sont rassemblées par le navigateur
dans l’événement d’un unique message reçu, séparées par des retours à la ligne. Par contre un
double saut de ligne provoque la fermeture des instructions data: précédentes, générant alors deux
événements DOM distincts.
http://abaque.ca/~eric/h14/info4007/exemples/push/exemple2.html
http://www.w3schools.com/html/html5_serversentevents.asp
Éric Hervet
- 77/128 -
Hiver 2014
INFO4007
XIII.
XIII.. JavaScript
JavaScript et DOM
Le DOM est une interface de programmation pour tous les documents et pages web HTML (ou
XML). Au chargement d’un document HTML, un arbre de la page est élaboré via le DOM.
Chaque élément est considéré comme un objet et peut jouer le rôle de noeud auquel on
peut attacher les qualités de parent, enfin, orphelin ou frère.
http://www.w3.org/DOM
http://www.w3.org/TR/selectors-api
XIII.1.
Bases du langage
+ Variables : avec le mot-clé var
var a = 3 ;
var b = 4 ;
var c ;
a l e r t ( a*b ) ;
// ou bien :
c o n s o l e . l o g ( a * b ) ; // pour afficher dans la console JavaScript
+ Types simples
var tableau = Array ( "Un" , "Deux" , "Trois" ) ;
c o n s o l e . l o g ( tableau [ 0 ] ) ; // "Un"
c o n s o l e . l o g ( tableau [ 2 ] ) ; // "Trois"
var len = tableau . length ; // 3
var ldeux = tableau [ 1 ] . length ; // 4
+ Objets
var personne = {
age : 20 ,
prenom : "Alain" ,
nom : "Ternet" ,
etudes : {
programme : "BIA" ,
année : 4
}
};
var p = personne . etudes . programme ;
c o n s o l e . l o g ( personne ) ; // Affichage dans la console sous forme d’arbre
Certains objets sont prédéfinis et souvent utilisés dans un navigateur :
window ; // interface DOMWindow
Éric Hervet
- 78/128 -
Hiver 2014
INFO4007
XIII.. JavaScript
window . document ; // interface Document
window . navigator ; // interface Navigator
window . navigator . userAgent ; // de type String
Un objet est une instance de classe.
// Syntaxe générale :
var o b j = new Object ( ) ;
// Exemple :
var s = new String ( "QQCHOSE" ) ;
s . t o S t r i n g ( ) ; // Retourne "QQCHOSE"
+ Fonctions
function type_navigateur ( )
{
c o n s o l e . l o g ( window . navigator . userAgent ) ;
}
function a d d i t i o n ( a , b )
{
return a+b ;
}
var c = a d d i t i o n ( 2 , 3 ) ;
console . log ( c ) ;
+ Boucles
var tab = Array (1900 , 4350 , 1650 , 1 4 9 2 ) ;
var sum = 0 ;
f o r ( var i = 0 ; i < tab . length ; i ++)
sum += tab [ i ] ;
c o n s o l e . l o g (sum ) ;
sum = 0 ;
var i = tab . length − 1;
while ( i >= 0 )
{
sum += tab [ i ] ;
i ++;
}
c o n s o l e . l o g (sum ) ;
XIII.2.
Méthodes de sélection DOM
+ getElementById()
Éric Hervet
- 79/128 -
Hiver 2014
INFO4007
XIII.. JavaScript
<h1 id= " t i t r e " >HTML 5< / h1>
<script>
var element = document . getElementById ( " t i t r e " ) ;
a l e r t ( element . textContent ) ;
< / script>
+ getElementsByTagName() Renvoie un ensemble d’éléments dont le type est indiqué en argument ("img", "video", etc.).
La fonction renvoie des objets de type nodeList.
var elements = document . getElementsByTagName ( "img" ) ;
elements . item ( 1 ) ;
// ou bien :
elements [ 1 ] ;
+ getElementsByClassName()
+ querySelector() (nouveau)
Retourne le premier élément qui correspond au sélecteur CSS en argument.
var element = document . q u e r y S e l e c t o r ( "#menu␣ul␣li.sousmenu" ) ;
+ querySelectorAll() (nouveau)
Retourne tous les éléments qui correspondent au sélecteur CSS en argument.
var t i t r e s = document . q u e r y S e l e c t o r A l l ( "article>h1" ) ;
var l i g n e s P a i r e s = document . q u e r y S e l e c t o r A l l ( "table␣tr:nth-child(even)" ) ;
XIII.3.
Propriétés et méthodes DOM
+ innerHTML : contenu HTML d’un élément (string).
+ outerHTML : contenu HTML et l’élément lui-même (string).
+ textContent ou innerText : contenu texte simple (string).
+ style : ensemble des propriétés CSS de l’élément (CSSStyleDeclaration).
+ style.* : propriétés CSS individuelles, accessibles par des membres écrits en camelCase :
style.width, style.fontSize, style.listStyleType, etc. (string).
+ tabindex : indice de tabulation (long).
+ id : valeur de l’attribut id (string).
+ lang : valeur de l’attribut lang (string).
+ title : valeur de l’attribut title (string).
+ tagName : type de l’élément (nom de la balise) (string).
+ className : valeur de l’attribut de classe assigné à l’élément (string).
+ classList (nouveau) : énumération des classes individuelles présentes dans l’attribut class
(DOMTokenList).
Éric Hervet
- 80/128 -
Hiver 2014
INFO4007
XIII.. JavaScript
+ childNodes : liste des noeuds enfants contenus dans l’élément (NodeList).
+ firstChild : premier noeud enfant (HTMLElement).
+ lastChild : dernier noeud enfant (HTMLElement).
+ parentNode : noeud parent (HTMLElement).
+ nextSibling : noeud frère suivant (HTMLElement).
+ prevSibling : noeud frère précédent (HTMLElement).
+ attributes : attributs de l’élément (NamedNodeMap).
+ getAttribute(attr) : renvoie la valeur de l’attribut attr.
+ setAttribute(attr,val) : modifie la valeur de l’attribut attr par val.
+ removeAttribute(attr) : supprime l’attribut attr si celui-ci existe.
+ focus() : donne le focus à l’élément.
+ blur() : retire le focus.
XIII.4.
Manipulation DOM
+ createElement()
var nouveauDiv = document . createElement ( "div" ) ;
nouveauDiv . innerHTML = "<p>Je␣suis␣<b>nouveau</b>!</p>" ;
+ appendChild()
var paragraphe = document . createElement ( "p" ) ;
paragraphe . innerHTML = "Je␣suis␣<b>nouveau</b>␣!" ;
document . body . appendChild ( paragraphe ) ;
+ removeChild()
var paragraphe = document . q u e r y S e l e c t o r ( "body>p" ) ;
document . body . removeChild ( paragraphe ) ;
+ insertBefore()
var nouveauLi = document . createElement ( "li" ) ;
nouveauLi . innerHTML = "Je␣suis␣<b>nouveau</b>␣!" ;
var uneListe = document . getElementsByTagName ( "ul" ) [ 0 ] ;
uneListe . i n s e r t B e f o r e ( nouveauLi , uneListe . l a s t C h i l d ) ;
+ createTextNode()
var nouveauTexte = document . createTextNode ( "C’est␣beau␣le␣DOM" ) ;
document . q u e r y S e l e c t o r ( "body" ) . appendChild ( nouveauTexte ) ;
+ classList() (nouveau)
var monElement = document . getElementById ( "resultat" ) ;
monElement . c l a s s L i s t . add ( "positif" ) ;
Éric Hervet
- 81/128 -
Hiver 2014
INFO4007
XIII.. JavaScript
+ insertAdjacentHTML() (nouveau)
<ul id= " maliste " >
< l i >Premier< / l i >
< l i >Deuxième< / l i >
< / ul>
<script>
var uneListe = document . getElementById ( " maliste " ) ;
uneListe . insertAdjacentHTML ( " beforeend " , " < l i >Dernier < / l i > " ) ;
< / script>
XIII.5.
Méthodes pour formulaires
+ value : retourne la valeur du champ. Peut-être modifié aussi.
+ checked : true si coché, false sinon (booléen).
+ files : liste des fichiers sélectionnés. null si ce n’est pas un champ d’entrée de fichiers.
(FileList).
+ valueAsDate : peut être modifié pour changer la valeur (Date).
+ valueAsNumber : peut être modifié pour changer la valeur (Number).
+ list : retourne l’élément datalist indiqué par l’attribut list (HTMLElement).
+ selectedOption : retourne l’option de liste sélectionnée (HTMLElement).
+ stepUp(n) : incrémente la valeur de n.
+ stepDown(n) : décrémente la valeur de n.
XIII.6.
Gestionnaire d’événements
Un gestionnaire d’événement JavaScript est, en général, déclaré pour un noeud HTML :
<button id= " bouton1 " value= " Cliquez ! " >
<script>
var objetBouton1 = document . getElementById ( ’ bouton1 ’ ) ;
objetBouton1 . o n c l i c k = f u n c t i o n ( event )
{
/ / event c o n t i e n t l e s p r o p r i é t é s de l ’ événement
}
< / script>
La
spécification
DOM Level 2 prévoit deux méthodes addEventListener()
removeEventListener() pour ajouter ou retirer une fonction associée :
Éric Hervet
- 82/128 -
et
Hiver 2014
INFO4007
XIII.. JavaScript
<button id= " bouton1 " value= " Cliquez ! " >
<script>
var objetBouton1 = document . getElementById ( ’ bouton1 ’ ) ;
objetBouton1 . addEventListener ( " c l i c k " , f u n c t i o n ( event )
{
/ / event c o n t i e n t l e s p r o p r i é t é s de l ’ événement
} , f a l s e ) ; / / f a l s e = phase de capture
< / script>
Autres fonctions utiles :
+ setInterval(fct,ms) : exécute la fonction fct toutes les ms millisecondes. Renvoie un objet
utilisable avec clearInterval().
+ clearInterval(intv) : supprime un intervalle créé par setInterval(). intv : référence renvoyée par setInterval().
+ setTimeout(fct,ms) : exécute la fonction fct après ms millisecondes. Renvoie un objet utilisable avec clearTimeout().
+ clearTimeout(to) : efface un timeout programmé avec setTimeout(). to : référence renvoyée
par setTimeout().
+ document.print() : appelle la boîte de dialogue d’impression du document.
+ alert(txt) : affiche un pop-up d’alerte.
XIII.7. matchMedia() et Media Queries
Les Media Queries CSS permettent d’utiliser des mots-clés définissant quels styles sont appliqués,
parfois dynamiquement, aux éléments en fonction des paramètres d’affichage : résolution, média,
orientation, etc.
i f ( window . matchMedia ( ’screen␣and␣(max-width:480px)␣and␣(orientation:portrait)’ ) . matches )
{
// On sait qu’on dispose de moins de 480 pixels de large en portrait
}
https://github.com/paulirish/matchMedia.js
http://wickynilliams.github.com/enquire.js
Éric Hervet
- 83/128 -
Hiver 2014
INFO4007
XIV.
XIV.. Web Sockets
Communication en temps réel (Web Sockets)
Les communications en temps réel sont une nécessité et il a fallu que le monde du web s’adapte
à ce qui existe depuis longtemps au niveau des couches des systèmes d’exploitation : des canaux
bidirectionnels (« sockets ») avec le protocole TCP/IP.
L’API Web Sockets propose l’accès à de tels canaux directement dans les navigateurs, avec bien
sûr des gestionnaires d’événements en JavaScript. Elle permet des connexions persistantes et
bidirectionnelles pour des applications web qui ont besoin de communiquer en temps réel avec le
serveur : chat (« clavardage »), diffusion d’informations sans attente (cours de la Bourse), jeux en
réseau, notifications immédiates, flux de données variées, etc.
AJAX, grâce à l’objet XMLHttpRequest, est une tentative dans ce sens, mais c’est toujours le
navigateur qui doit initier une nouvelle connexion, formuler une requête pour savoir si de nouvelles
données sont disponibles, auquel cas les recevoir et fermer la connexion après le chargement de la
page.
Avec les Web Sockets, les entêtes pour établir une connexion sont réduits au strict minimum. Le serveur peut envoyer des données de sa propre initiative pour faire du push tandis que le « socket web »
reste en permanence à l’écoute.
XIV.1.
Protocole commun
Handshake
Le client lance une connexion qui peut passer par le port 80 du web classique. Puis il effectue une
requête qui requête qui ressemble à HTTP mais qui permet ensuite, grâce à un entête spécifique
(Upgrade: websocket), de communiquer au serveur qu’il veut basculer totalement sur Web-Socket.
C’est ce qu’on appelle une « poignée de main » (handshake) qui permet au navigateur et au serveur
de se mettre d’accord sur le protocole de dialogue.
Exemple de requête client :
GET /url HTTP/1.1
Host: abaque.ca
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDW==
Sec-WebSocket-Version: 13
Origin: http://abaque.ca
Exemple de réponse du serveur :
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Éric Hervet
- 84/128 -
Hiver 2014
INFO4007
XIV.. Web Sockets
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Des clés de sécurité sont échangées dans d’autres entêtes.
Côté serveur, il faut un service approprié à l’écoute des connexions. De nombreuses solutions
existent, en Java, PHP, Ruby, C# et en JavaScript avec Node.js, très pratique grâce notamment
à sa programmation événementielle appropriée aux sockets, mais très bas niveau . . . Ceci dit, PHP
reste encore le langage le plus populaire à l’heure actuelle, à l’aide de la librairie phpwebsock.
http://code.google.com/p/phpwebsocket
phpwebsocket
Exemples :
http://abaque.ca/~eric/h14/info4007/exemples/websockets/websocket.demo.php
http://abaque.ca/~eric/h14/info4007/exemples/websockets/websocket.mini.php
La création d’un socket se fait en instanciant un objet WebSocket, qui prend en argument une
adresse d’écoute IPv4 et un port associé.
Côté navigateur :
http://abaque.ca/~eric/h14/info4007/exemples/websockets/Client.html
La connexion se fait grâce à un objet ws de type WebSocket. Le constructeur prend en argument
l’adresse de connexion, par le protocole ws://.
L’envoi d’un message se fait par l’appel de ws.send().
La réception d’un message se fait par une fonction de callback associée à l’événement message, pour
lequel on peut redéfinir la propriété onmessage de l’interface WebSocket.
Node.js
Node.js est une API JavaScript qui s’exécute côté serveur, et qui exécute des tâches asynchrones
(fonctions callbacks associées à des événements).
http://nodejs.org
http://fr.wikipedia.org/wiki/Nodejs
http://www.nodebeginner.org/#javascript-and-nodejs
http://www.journaldunet.com/developpeur/expert/56253/node-js---la-tendance-javascript-cote-serveur.shtml
http://fr.openclassrooms.com/informatique/cours/des-applications-ultra-rapides-avec-node-js
XIV.2.
Librairies alternatives
+ Socket.IO
http://socket.io
http://labs.learnboost.com/socket.io
+ Web-Socket-js
http://github.com/gimite/web-socket-js
Éric Hervet
- 85/128 -
Hiver 2014
INFO4007
XIV.. Web Sockets
+ EasyWebSocket
http://easywebsocket.org
Éric Hervet
- 86/128 -
Hiver 2014
INFO4007
XV.
XV.. Web Storage
Stockage des données locales (Web Storage)
Web Storage ou DOM Storage ajoute la capacité à un navigateur de stocker et organiser des
données locales. Ce concept, initialement intégré à la spécification HTML 5, fait maintenant partie
d’une spécification séparée.
http://www.w3.org/TR/webstorage
http://dev.w3.org/html5/webstorage
http://www.whatwg.org/specs/web-apps/current-work/complete/webstorage.html
L’avantage se situe au niveau des applications web qui mémorise une quantité relativement grande
de données sans devoir utiliser les cookies ou un échange permanent avec une base de données
distante. On peut ainsi gérer des données en mode déconnecté (offline), des profils, préférences
utilisateur, caches pour l’auto-complétion ou les résultats de recherche.
Web Storage met en oeuvre deux objets nommés sessionStorage et localStorage pour faire persister les données de l’utilisateur respectivement pendant la durée de la session, ou de manière
permanente. La capacité offerte est généralement de 5 Mo à 10 Mo par défaut et peut être modifiée
dans la configuration du navigateur.
XV.1.
Deux espaces de stockage
La manipulation des objets Web Storage se fait exclusivement par des scripts exécutés côté client
par le navigateur.
Il existe :
+ Pour Firefox :
un fichier SQLite webappstore.sqlite dans le profil utilisateur ;
+ Pour Chrome sous Windows :
AppData\Local\Google\Chrome\User Data\Default dans le profil utilisateur ;
+ Pour Safari sous Windows :
AppData\Local\Apple Computer\Safari\LocalStorage dans le profil utilisateur ;
+ Pour Internet Explorer :
Un fichier XML dans le profil utilisateur puis
Local Settings\Application Data\Microsoft\Internet Explorer\DOMStore.
+ Stockage de session
Le stockage de session (session storage) est destiné à la mémorisation de données à courte durée
de vie, dont la portée est limitée à la session active de la fenêtre ou de l’onglet du navigateur
ainsi qu’au domaine dont elles sont issues. On peut ainsi exécuter des applications web dans
différentes fenêtres ou onglets distincts avec des ensembles de données différents sans risque
d’interférences (ce qui n’est pas le cas des cookies).
Éric Hervet
- 87/128 -
Hiver 2014
INFO4007
XV.. Web Storage
Les données sont effacées après la fermeture de la fenêtre ou de l’onglet et ne persistent pas.
À l’ouverture d’une nouvelle session (nouvelle fenêtre ou nouvel onglet), le navigateur initialise
un nouvel objet de stockage.
L’accès se fait via l’interface sessionStorage de type Storage, enfant direct de l’objet window,
ce qui signifie qu’il s’agit d’un objet global.
+ Local Storage
Le stockage local bénéficie d’une durée de vie plus longue puisqu’il n’est pas effacé à la fermeture
du navigateur. Sa portée est étendue à toutes les pages et tous les scripts provenant du même
domaine dont il est issu, donc à toutes les fenêtres et onglets ouverts exploitant des pages
hébergées avec le même nom de domaine.
Il est accessible via l’objet global localStorage de type Storage, enfant direct de l’objet window.
XV.2.
Interface Storage
Le modèle de données pour sessionStorage et localStorage est un tableau associatif de paires
clé/valeur, accessibles par les trois méthodes suivantes :
+ setItem(cle,valeur) : stocke une paire clé/valeur ;
+ getItem(cle) : retourne la valeur associée à une clé ;
+ removeItem(cle) : supprime la paire clé/valeur en indiquant le nom de la clé.
Toutes les valeurs sont de type chaîne de caractères (String).
L’interface Storage possède aussi une propriété length (nombre total de paires de clé/valeur) et de
deux méthodes supplémentaires :
+ key(index) : retourne la clé stockée à l’index spécifié ;
+ clear() : efface toutes les paires.
+ Stockage
// Mémorisation dans la session courante
s e s s i o n S t o r a g e . setItem ( "identifiant" , "eric_hervet" ) ;
// Mémorisation dans le stockage local
l o c a l S t o r a g e . setItem ( "derniere_visite" ,new Date ( ) ) ;
+ Lecture
// Lecture d’une clé de la session courante
var i d _ u t i l i s a t e u r = s e s s i o n S t o r a g e . getItem ( "identifiant" ) ;
Éric Hervet
- 88/128 -
Hiver 2014
INFO4007
XV.. Web Storage
// Affichage
a l e r t ( "Identifiant␣utilisateur␣:␣"+ i d _ u t i l i s a t e u r ) ;
// Lecture d’une clé du stockage local
var d a t e _ v i s i t e = l o c a l S t o r a g e . getItem ( "derniere_visite" ) ;
// Affichage
i f ( d a t e _ v i s i t e != undefined )
{
a l e r t ( "Dernière␣visite␣:␣"+ d a t e _ v i s i t e ) ;
}
+ Suppression
// Suppression de l’élément de session "identifiant"
s e s s i o n S t o r a g e . removeItem ( "identifiant" ) ;
// Suppression de l’élément de stockage local "derniere_visite"
l o c a l S t o r a g e . removeItem ( "derniere_visite" ) ;
// Suppression totale
s e s s i o n S t o r a g e . c l e a r ( ) // Suppression de toutes les valeurs de session
l o c a l S t o r a g e . c l e a r ( ) // Suppression de toutes les valeurs de stockage local
Exemple :
http://abaque.ca/~eric/h14/info4007/exemples/storage
Il est recommandé de placer les instructions dans un bloc JavaScript try/catch pour attraper
d’éventuelles exceptions, le plus souvent dues à un dépassement de capacité de stockage :
+ Firefox : NS_ERROR_DOM_QUOTA_REACHED ;
+ Webkit (Chrome/Safari) : QUOTA_EXCEEDED_ERR ;
+ IE : Out of memory.
XV.3.
Utilisation de JSON
Le format JSON 47 permet de convertir la valeur de n’importe quel objet en chaîne de caractères
(String), en « linéarisant » en une seule chaîne toutes les propriétés de l’objet.
// Création d’un objet album avec plusieurs propriétés
var album = { } ;
47. JavaScript Object Notation.
Éric Hervet
- 89/128 -
Hiver 2014
INFO4007
XV.. Web Storage
album . duree = 240;
album . p i s t e s = 1 ;
album . t i t r e = "I’ll␣be␣back" ;
album . a r t i s t = "Arnold␣S." ;
// Conversion avec JSON et stockage local
l o c a l S t o r a g e . setItem ( "album" , JSON. s t r i n g i f y ( album ) ) ;
// Déstockage et lecture
c o n s o l e . l o g (JSON. parse ( l o c a l S t o r a g e . getItem ( "album" ) ) ) ;
On peut aussi stocker des données binaires, par exemple des images, en les encodant en format
texte grâce au format Base64. Un élément <canvas> peut aussi être converti grâce à la méthode
toDataURL() qui cependant n’est pas reconnue sur tous les navigateurs.
http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage
XV.4.
Stocker un événement
Il est parfois utile de déclencher le stockage d’une variable sur un événement survenant dans la
page.
<p>
<label for= " prenom " >Prénom< / label>
<input type= " t e x t " id= " prenom " name= " prenom "
onchange= " l o c a l S t o r a g e . setItem ( t h i s . name , t h i s . value ) ; " >
< / p>
<p>
<input type= " checkbox " id= " c o n d i t i o n s "
onchange= " s e s s i o n S t o r a g e . setItem ( t h i s . id , t h i s . checked ) ; " >
<label for= " c o n d i t i o n s " >J ’ acc epte l e s c o n d i t i o n s < / label>
< / p>
<script>
/ / Valeurs par défaut au chargement
i f ( t y p e o f l o c a l S t o r a g e != ’ undefined ’ )
{
var prenom = l o c a l S t o r a g e . getItem ( ’ prenom ’ ) ;
i f ( prenom ) document . getElementById ( ’ prenom ’ ) . value = prenom ;
}
i f ( t y p e o f s e s s i o n S t o r a g e != ’ undefined ’ )
{
var e t a t = s e s s i o n S t o r a g e . getItem ( ’ c o n d i t i o n s ’ ) ;
Éric Hervet
- 90/128 -
Hiver 2014
INFO4007
XV.. Web Storage
i f ( e t a t == ’ true ’ ) document . getElementById ( ’ c o n d i t i o n s ’ ) . checked = true ;
}
< / script>
Stockage à intervalles régulier
<p>
<textarea name= " t e x t e " id= " t e x t e " >< / textarea>
< / p>
<script>
var champ = document . getElementById ( " t e x t e " ) ;
/ / Si l a valeur de l a sauvegarde e s t présente au chargement
i f ( s e s s i o n S t o r a g e . getItem ( " sauvegarde " ) . length != n u l l )
{
/ / Alors on l a restaure
champ . value = s e s s i o n S t o r a g e . getItem ( " sauvegarde " ) ;
}
/ / Toutes l e s deux secondes (2000 ms)
setInterval ( function ( )
{
/ / Le champ t e x t e e s t mémorisé dans l e stockage de s e s s i o n
s e s s i o n S t o r a g e . setItem ( " sauvegarde " ,champ . value ) ;
} , 2000);
< / script>
L’API comprend l’événement storage qui doit être déclenchée lorsqu’une clé est modifiée. Cela permet d’envoyer une notification à d’autres onglets du navigateur, s’ils sont ouverts à la même adresse.
window . addEventListener ( "storage" , function ( event ) {
a l e r t ( "La␣clé␣"+event . key+"␣a␣été␣modifiée␣de␣"+
event . oldValue+ "␣à␣"+event . newValue ) ;
} , false ) ;
Éric Hervet
- 91/128 -
Hiver 2014
INFO4007
XVI.
XVI.. Bases de données
Bases de données (Indexed Database & Web SQL Database)
Au-delà de Web Storage, le besoin de stocker des données structurées dans la session du
navigateur se fait de plus en plus pressant dès lors qu’on veut un contrôle plus fin pour effectuer
des recherches, des tris, des mises à jour groupées, des sélections avec des mises en relation entre
l’une ou l’autre collection de données.
La technologie Web SQL Database exploite une base de données côté client. L’inconvénient est
qu’elle n’est plus maintenue par le W3C, celui-ci ayant jugé qu’il n’était pas de son rôle de spécifier
le langage SQL sous-jacent. Puis IndexedDB a pris le relais par une autre approche sans rapport
avec SQL.
Ces espaces de stockage permettent de conserver des données en quantité appréciable afin d’éviter
de les faire circuler sur le réseau. Ils remplacent avantageusement les échanges fréquents entre
serveur et client, basés sur les cookies, les formulaires ou XMLHttpRequest.
De par leur structure, ils autorisent le tri, le filtre et la recherche.
Web SQL est un système de base de données relationnelle tandis qu’IndexedDB est un système
de tables indexées.
XVI.1.
Indexed Database
Indexed Database est un standard de stockage de données structurées et indexées, pensé pour JavaScript. Elle est conçue pour stocker des objets, c’est-à-dire des paires de clé/valeur. Chaque type
d’objet peut être recueilli dans un catalogue (Object Store). Il n’y a pas de notion de tables structurées en lignes et colonnes : une base contient un ou plusieurs catalogues qui eux-mêmes contiennent
des objets. Chaque catalogue peut posséder des index pour effectuer des requêtes et itérer sur des
jeux de résultats.
Le tout se déroule dans des transactions par l’utilisation d’événements DOM pour savoir lorsque les
résultats d’une requête sont disponibles en mode asynchrone.
Il s’agit bien d’une approche NoSQL dans la mesure où les jointures doivent être faites par le code.
Le modèle d’exécution comprend plusieurs étapes :
+ Ouvrir une base ;
+ Débuter une transaction ;
+ Créer un catalogue d’objets ;
+ Effectuer une ou plusieurs requêtes (insertion, sélection, etc.) ;
+ Attendre la fin de l’opération avec l’écoute d’un événement DOM ;
+ Traiter les résultats reçus.
Exemples :
http://abaque.ca/~eric/h14/info4007/exemples/indexeddb/exemple1.html
Éric Hervet
- 92/128 -
Hiver 2014
INFO4007
XVI.. Bases de données
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb
Éric Hervet
- 93/128 -
Hiver 2014
INFO4007
XVII.
XVII.. CSS3
CSS3
CSS3 adopte une approche modulaire pour étendre les possibilités de CSS2 et apporter de nouvelles
fonctionnalités. CSS3 peut être divisé en cinq grandes catégories :
+ Fonds d’écrans/bordures
+ Couleurs
+ Media Queries
+ Mise en page multi-colonnes
+ Sélecteurs
XVII.1.
Sélecteurs
+ Sélecteur d’élément
Exemples : nav { }, p { }, ul { }
Éléments concernés : <nav>, <p>, <ul>
+ Sélecteur de classe
Exemples : .classe { }, div.classe { }
Éléments concernés : tout élément portant l’attribut class="classe" ; <div class="classe"
+ Sélecteur d’id
Exemples : #intro { }, header#intro { }
Éléments concernés : tout élément portant l’attribut id="intro" ; <header id="intro"
+ Sélecteur d’attribut
Exemples : [alt] { }, input[type=submit] { }, [rel=nofollow] { }
Éléments concernés : tout élément portant un attribut alt ; <input type="submit"> ; Tout
élément portant l’attribut rel="nofollow"
+ Sélecteur d’enfant direct
Exemples : ul>li { }
Tout élément <li> enfant direct d’un <ul>
+ Sélecteur d’élément adjacent
Exemples : h1+p { }
Tout élément <p> immédiatement précédé par un élément <h1>
+ Sélecteur d’éléments frères
Exemples : h2∼p { }
Un ou plusieurs éléments <p> précédés par un élément <h2>
Les sélecteurs peuvent s’enchaîner, séparés par des espaces, pour combiner leurs effets. Séparés par
des virgules, ils s’appliquent à une énumération de plusieurs familles d’éléments.
nav ul > l i { . . . }
#intro p . classe { . . . }
nav ul > l i , # i n t r o p . c l a s s e { . . . }
Éric Hervet
- 94/128 -
Hiver 2014
INFO4007
XVII.2.
XVII.. CSS3
Propriétés
Les propriétés CSS sont des paires clés :valeurs.
http://www.w3schools.com/css
XVII.3.
Pseudo-classes et pseudo-éléments
Ils servent à affiner les capacités des sélecteurs. Ils s’écrivent à la suite d’un sélecteur, concaténés
par :.
:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child(n),
:nth-last-of-child(n), :nth-of-type(n), :nth-last-of-type(n), :first-of-type,
:last-of-type, :only-child, :only-of-type, :checked, :enabled, :indeterminate, :not(expr),
::first-letter, ::first-line.
Exemples :
div:nth-child(1) : le premier enfant du <div>.
div:nth-child(even) : les enfants aux positions paires du <div>.
div:nth-child(odd) : les enfants aux positions impaires du <div>.
div:nth-child(3n) : tous les trois enfants du <div>, depuis 0.
div:nth-child(3n+1) : tous les trois enfants du <div>, depuis 1.
div:nth-child(3n+2) : tous les trois enfants du <div>, depuis 2.
div:nth-child(3n+3) : même chose que div:nth-child(3n)
XVII.4.
Règles @
Les « règles @ » servent à moduler le comportement des feuilles de style ou ajouter des informations
qui ne pourraient pas s’inclure dans les déclarations classiques.
@import (importer une autre feuille de style), @charset (définir l’encodage des caractères), @page
(définir des règles générales pour les média paginés), @font-face (importer un fichier de fonte
externe), @media (définir des requêtes de média).
Exemples :
@import " a u t r e s _ s t y l e s . c s s " ;
@import u r l ( " impression . c s s " ) p r i n t ;
@page
{
s i z e : 15cm 20cm ;
margin : 2cm ;
marks : c r o s s ;
}
Éric Hervet
- 95/128 -
Hiver 2014
INFO4007
XVII.. CSS3
@font − f a c e
{
font − family : maPolice ;
s r c : u r l ( CestPasComique . o t f ) ;
font − weight : bold ;
}
p
{
font − family : maPolice ;
}
@media p r i n t
{
body
{
font − s i z e : 2em;
background : white ;
}
nav
{
d i s p l a y : none ;
}
}
XVII.5.
Media Queries
Les Media Queries ou « requêtes de média » sont des fonctionnalités utiles de CSS pour adapter le
design et la présentation générale d’une page web selon l’appareil de consultation.
La syntaxe d’une media query est une suite de conditions à satisfaire.
Dans un document HTML, il est possible de charger des styles spécifiques en fonction d’un média :
<link rel= " s t y l e s h e e t " type= " t e x t / c s s "
media= " screen and (max− device − width :480 px ) "
href= " mon_style . c s s " / >
Les valeurs possibles de média sont : braille, embossed, handheld, print, projection, screen,
speech, tty et tv.
Exemples :
@media screen and ( min− width :200 px ) and (max− width :640 px )
{
section
Éric Hervet
- 96/128 -
Hiver 2014
INFO4007
XVII.. CSS3
{
d i s p l a y : block ;
c l e a r : both ;
margin : 0 ;
}
}
Exemple avec détection de l’orientation :
http://abaque.ca/~eric/h14/info4007/exemples/css/CSS3MediaQuery1.html
Pour les navigateurs qui ne supportent pas encore les fonctionnalités CSS3 d’orientation, il est possible d’utiliser JavaScript (notamment la propriété window.orientation) pour changer la taille des
images selon l’orientation de l’appareil :
http://abaque.ca/~eric/h14/info4007/exemples/css/CSS3OrientationJS1.html
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
http://www.w3schools.com/css/css_mediatypes.asp
Éric Hervet
- 97/128 -
Hiver 2014
INFO4007
XVIII.
XVIII.. Animations CSS3
Animations CSS3
http://abaque.ca/~eric/h14/info4007/exemples/css/animations/
Éric Hervet
- 98/128 -
Hiver 2014
INFO4007
XIX.
XIX.. Frameworks CSS3
Frameworks CSS3
+ Compass/Sass
http://compass-style.org
http://sass-lang.com
+ Blueprint
http://www.blueprintcss.org
+ LESS
http://lesscss.org
+ ...
Éric Hervet
- 99/128 -
Hiver 2014
INFO4007
XX.
XX.1.
XX.. jQuery
jQuery
Présentation
http://jquery.org
jQuery est une couche d’abstraction Open Source de JavaScript qui facilite la création de pages
web.
Il y a quatre manières de faire référence à des fichiers JavaScript jQuery dans une page HTML :
+ Télécharger des fichiers jQuery et les référencer localement ;
+ Télécharger des fichiers jQuery et les référencer « génériquement » ;
+ Référencer des fichiers jQuery via le procotole HTTP ;
+ Utiliser un CDN (Content Distribution Network).
Les deux premières approches posent l’inconvénient de vérifier régulièrement s’il y a des mises à
jour de jQuery et de les télécharger le cas échéant. La troisième approche évite d’avoir à télécharger
jQuery mais requiert tout de même de modifier le numéro de version dans le code HTML lorsqu’on
change de version de jQuery.
XX.2.
Exemple « Hello World »
Exemple sans jQuery :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/QuerySelectors1.html
montre comment associer des handlers à des événements d’éléments HTML.
Exemple avec jQuery :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/HelloWorld1.html
montre la syntaxe compacte de jQuery.
var nomId = $ ( "p" ) . a t t r ( ’id’ ) ;
permet d’obtenir la valeur de l’attribut id d’un paragraphe <p>.
text() sans argument permet de récupérer le contenu textuel d’un élément, ou de lui assigner si on
donne en argument une chaîne de caractères.
S’il y a plusieurs <p> dans la page HTML, alors on utilise la syntaxe
var nomId = $ ( "p.eq(0)" ) . a t t r ( ’id’ ) ;
pour désigner le premier <p> de la page.
XX.3.
jQuery et Web Storage
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQLoginLS.html
Éric Hervet
- 100/128 -
Hiver 2014
INFO4007
XX.4.
XX.. jQuery
Modification du DOM
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQModifyElements1.html
Exemples de recherches d’éléments avec les qualifieurs :even et :odd :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQFindByEvenOrOdd1.html
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/TableAlternee.html
Exemple de recherches d’éléments par class ou id :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQFindByClassOrId1.html
Exemple d’utilisation du sélecteur nth-child() :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQFindByCSS3StyleExpressions1.
html
Exemple d’utilisation de remove() :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQRemovingElements1.html
Exemple de création d’éléments du DOM JavaScript :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQCreatingElements1.html
Les méthodes pour insérer des éléments du DOM sont : append(), insert(), prepend(),
appendTo(), appendAfter(), insertBefore(), insertAfter().
XX.5.
Navigation dans le DOM
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQNextPrevClosestParent1.html
.siblings() sélectionne tous les frères de l’élément courant, .children() tous les enfants de l’élément courant.
Exemple :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQSiblingsChildren1.html
Pour des raisons de performance, on peut stocker des éléments du DOM dans des variables et agir
directement sur les variables :
$ ( "button" ) . c l i c k ( function ( )
{
// Stocker tous les <ul> dans une variable
var u l L i s t = $ ( "ul" ) ;
// Ôter le premier <li>
u l L i s t . f i n d ( "li:first-element" ) . remove ( ) ;
// Changer le texte du dernier <li>
u l L i s t . f i n d ( "li:last-element" ) . t e x t ( "Dernier␣item" ) ;
}
Éric Hervet
- 101/128 -
Hiver 2014
INFO4007
XX.6.
XX.. jQuery
Gestion des clics
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQClickDivs1.html
XX.7. DOM Traversals
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQFindAndUpdate1.html
XX.8.
Chaînage de fonctions jQuery
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQChaining1.html
XX.9.
Géolocalisation
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQGeoLocation1.html
XX.10.
ACCÉLÉROMÈTRE !
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/JQAccelerometer1.html
Éric Hervet
- 102/128 -
Hiver 2014
INFO4007
XXI.
XXI.. Animation CSS3 & jQuery
Animation avec CSS3 & jQuery
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/animation/
JQCssDivElements1.html
JQRoundedCorners1.html
JQArchTripleShadowSkewEllipsesGrad3.html
JQFadeInOut.html
JQSlideUpDown.html
JQAnimate1.html
JQAnimate2.html
JQAnimate3.html
JQSlideShow1.html
JQButtonAnimation1.html
JQTransforms2D1.html
JQSketchFollowMouse1.html
JQSketchSolid1.html
JQBouncingBalls1.html
Éric Hervet
- 103/128 -
Hiver 2014
INFO4007
XXII.
XXII.. Contrôles jQuery
Contrôles utilisateurs jQuery
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/UIControls/
JQUIAccordion1.html
JQUIButtons1.html
JQUICheckBoxRadio1.html
JQUIComboBox1.html
JQUIDatePicker1.html
JQUIProgressBar1.html
JQUISlider1.html
JQUIAnimSlider1.html
JQUITabs.html
JQUIThemes1.html
JQUIEffects1.html
JQUITravel1.html
Éric Hervet
- 104/128 -
Hiver 2014
INFO4007
XXIII.
XXIII.. jQuery Mobile
jQuery Mobile
XXIII.1.
Présentation
jQuery Mobile est un ensemble de plug-ins et widgets jQuery pour faciliter le développement d’applications web mobiles et multi-plateformes.
jQuery Mobile est basée sur la librairie de base jQuery qu’il faut référencer dans le code HTML.
jQuery Mobile fournit des événements propres au « cycle de vie » d’une page web mobile :
pageInit(), pageCreate(), pageShow() et pageHide().
jQuery Mobile supporte aussi des événements personnalisés pour la gestion des mouvements tels
que swipe, tap, tap-and-hold et le changement d’orientation de l’appareil.
jQuery Mobile utilise aussi des thèmes propres aux applications mobiles pour donner l’impression
(le « look ») d’applications natives.
Enfin, contrairement à jQuery classique qui utilise la construction :
$ ( document ) . ready ( )
{
// ...
}
jQuery Mobile utilise plutôt :
$ ( s e l e c t e u r ) . l i v e ( ’pageInit’ , ( function ( event ) {
// ...
}));
Donc techniquement, jQuery classique envoie un événement lorsque la page web a été chargée
tandis que jQuery Mobile lance un événement lorsque la page a été initialisée.
XXIII.2.
Exemples de base
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMHelloWorld1.html
Le même exemple enrichi avec des balises additionnelles et des classes CSS :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMHelloWorld1Enhanced.
html
XXIII.3.
Transitions entre pages
Exemple qui montre la séquence des événements déclenchés au cours du chargement d’une page
web mobile :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMPageEvents1.html
+ D’abord pagebeforecreate ;
+ Puis pagecreate lorsque le DOM est chargé ;
Éric Hervet
- 105/128 -
Hiver 2014
INFO4007
+ Puis pageinit après que l’initialisation est complétée ;
+ Puis pagebeforeshow sur la page cible juste avant la transition ;
+ Puis pageshow sur la page cible juste après la transition ;
Lorsque l’utilisateur « tap » un lien de navigation vers une page qui est chargée pour la première
fois, la séquence d’événements suivante se produit :
+ pagebeforehide sur la page source juste avant la transition ;
+ pagebeforeshow sur la page cible avant la transition ;
+ pagehide sur la page source après la transition ;
+ pageshow sur la page cible après la transition ;
Lors de la transition d’une page à une autre, ui.nextPage est assignée à la page cible (ou objet
jQuery vide s’il n’y a pas de page suivante), et ui.prevPage est assigné à la page précédente (ou
objet jQuery vide s’il n’y a pas de page précédente).
jQuery Mobile utilise des méthodes asynchrones Ajax en interne, d’où la distinction entre événements de chargement (page load), d’affichage (page show) et de dissimulation (page hide).
jQuery Mobile applique aussi un post-traitement sur les pages HTML à vocation mobile.
L’événement mobileinit est déclenché sur l’objet document juste après son exécution. Il est possible
de le traiter, par exemple pour empêcher jQuery Mobile d’appliquer des styles « web mobile » à
certains éléments HTML :
$ ( document ) . bind ( ’mobileinit’ , function ( ) {
$ . mobile . page . prototype . o p t i o n s . keepNative = "input,␣textarea" ;
});
XXIII.4.
Page unique « multivue »
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMMultiPageViews1.html
XXIII.5.
Positionnement des entêtes et pieds de page
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMFixed1.html
Par défaut, les barres en haut et en bas sont en mode standard et « défilent » avec le reste de la page
lorsque l’utilisateur fait défiler la page (scroll), donc peuvent disparaître et réapparaître de la zone
d’affichage (viewport).
En mode fixed, les barres apparaissent en permanence en haut et en bas de la zone d’affichage
même lorsque l’utilisateur fait défiler le corps de la page.
Enfin en mode fullscreen, les barres apparaissent en permanence à l’intérieur de la zone d’affichage, indépendamment du défilement du contenu de la page.
Éric Hervet
- 106/128 -
Hiver 2014
INFO4007
XXIII.6.
Les différents types de boutons
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMButtons1.html
Essentiellement les styles pour les boutons se résument à :
+ Un lien (anchor) avec l’attribut data-role="button" ;
+ Un élément <input> avec le type button, submit, reset ou image auquels on attribue la classe
ui-btn-hidden ;
+ L’attribut data-icon permet de créer un bouton avec un icône ;
+ L’attribut data-iconpos permet de gérer la position d’un icône ;
+ L’attribut data-inline="true" affiche un bouton de la même largeur que le texte qu’il contient ;
+ L’attribut data-role="controlgroup" (data-type="horizontal") regroupe les boutons verticalement (horizontalement) dans un élément <div> ;
+ L’attribut data-theme="e" permet d’utiliser le cinquième thème de jQuery (de "a" à "e").
XXIII.7.
Formulaires web mobiles
Exemple illustrant l’apparence des éléments de formulaires web mobiles :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMForm1.html
On trouve généralement des éléments de formulaire tels que : boutons à cocher (checkboxes), listes
déroulantes (drop-down lists), boutons radio, « curseurs » (sliders), champs de saisie ou recherche,
zones de texte et boutons de soumission (submit).
XXIII.8.
List Views
List View simple avec boutons :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMSimpleListView1.html
Lists Views imbriquées :
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMNestedListViews1.
html
XXIII.9.
Barres de navigation
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMNavigationBar1.html
XXIII.10.
Menus de sélection
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMMenu1.html
XXIII.11.
Géolocalisation
http://abaque.ca/~eric/h14/info4007/exemples/jQuery/mobile/JQMGeoLocation1.html
Éric Hervet
- 107/128 -
Hiver 2014
INFO4007
XXIV.
XXIV.. Design responsif
Design responsif
Objectif : bâtir des sites web qui se visualisent sur (à peu près) tous les appareils possibles (smart
tvs, moniteurs de tailles et résolutions variées, tablettes, téléphones intelligents, etc.).
Tout d’abord, la première règle pour créer des sites web flexibles en fonction de la taille d’écran est
de travailler avec les pourcentages et les rems (root em unit), plutôt qu’avec les pixels et les tailles
de polices.
L’unité de taille de police rem est relative à l’élément racine <html> et non à la taille de l’élément
parent comme em.
Il est donc possible de définir une seule taille de police de l’élément <html> pour tout le document
est les éléments internes en fonction de cette taille globale.
html { font − s i z e : 62.5%; }
body { font − s i z e : 1 . 4rem ; }
h1 { font − s i z e : 2 . 4rem ; }
Pour les navigateurs qui ne supportent pas encore l’unité rem, il est recommandé de spécifier aussi
dans une autre unité.
html { font − s i z e : 62.5%; }
body { font − s i z e : 14px ; font − s i z e : 1 . 4rem ; }
h1 { font − s i z e : 24px ; font − s i z e : 2 . 4rem ; }
XXIV.1.
Media Queries
Rappel : l’élément HTML <link> possède l’attribut media où il est possible d’indiquer quel fichier
CSS utiliser selon la taille d’écran, par exemple :
<link media= " only screen and (max− device − width : 480px ) "
href= " mobile . c s s " rel= " s t y l e s h e e t " / >
Les propriétés les plus communes pour les media queries sont :
+ width (minimum : min-width, maximum : max-width) :
largeur du viewport 48 .
+ height (minimum : min-height, maximum : max-height) :
hauteur du viewport.
+ device-width (minimum : min-device-width, maximum : max-device-width) :
largeur de l’écran.
+ device-height (minimum : min-device-height, maximum : max-device-height) :
hauteur de l’écran.
+ orientation : portrait (h > w) ou landscape (w > h).
48. Viewport : surface de la fenêtre du navigateur.
Éric Hervet
- 108/128 -
Hiver 2014
INFO4007
+ aspect-ratio (minimum : min-aspect-ratio, maximum : max-aspect-ratio) :
rapport width / height.
+ device-aspect-ratio
(minimum
:
max-device-aspect-ratio) :
rapport device-width / device-height.
min-device-aspect-ratio,
maximum
:
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
@media screen and ( min− width : 440px )
{
# content { background −image : u r l ( / images / small / bg . jpg ) ;
}
#
@media screen and ( min− width : 1000px )
{
# content { background −image : u r l ( / images / l a r g e / bg . jpg ) ;
}
@media screen and ( transform −3d )
{
. transforms { }
}
Le « CSSOM » 49 fournit une extension de l’objet window, window.matchMedia(), qui retourne un
objet de type MediaQueryList représentant le résultat d’une requête de média « matchant » une
propriété :
var mql = window . matchMedia ( mediaquery ) ;
i f ( mql . matches )
{
// ...
}
Exemple :
var mqobj = window . mathMedia ( ’(orientation:␣portrait)’ ) ;
i f ( mqobj . matches )
{
document . q u e r y S e l e c t o r ( ’body’ ) . c l a s s L i s t . add ( ’portrait’ ) ;
}
49. CSS Object Model.
Éric Hervet
- 109/128 -
Hiver 2014
INFO4007
i f ( window . matchMedia ( "(max-width:␣500px)" ) . matches )
// Le viewport a moins de 500 pixels de large
{
// ...
}
else // Le viewport a plus de 500 pixels de large
{
// ...
}
On peut aussi détecter les événements de changement de média et les traiter :
var mqobj = window . matchMedia ( ’(orientation:␣portrait)’ ) ;
mqobj . addEventListener ( ’orientationchange’ , bodyOrientationClass ) ;
function bodyOrientationClass ( )
{
i f ( mqobj . matches ) // Orientation : portrait
{
document . q u e r y S e l e c t o r ( ’body’ ) . c l a s s L i s t . remove ( ’landscape’ ) ;
document . q u e r y S e l e c t o r ( ’body’ ) . c l a s s L i s t . add ( ’portrait’ ) ;
}
else // Orientation : paysage
{
document . q u e r y S e l e c t o r ( ’body’ ) . c l a s s L i s t . remove ( ’portrait’ ) ;
document . q u e r y S e l e c t o r ( ’body’ ) . c l a s s L i s t . add ( ’landscape’ ) ;
}
}
XXIV.2.
Multi-colonnes
La propriété CSS columns permet de créer un modèle de contenu sur plusieurs colonnes. C’est en
fait un raccourci pour les propriétés column-count (nombre maximal de colonnes) et column-width
(largeur de colonne minimale). column-count est prioritaire, le navigateur ajustant la largeur des
colonnes autour de column-width autant que faire se peut. On peut aussi définir l’espace entre les
colonnes avec column-gap, et définir une ligne de division entre colonnes avec column-rule.
L’utilisation de multiples colonnes dépend fortement de la taille d’affichage disponible. Par exemple,
la déclaration
columns : 240px 6 ;
Éric Hervet
- 110/128 -
Hiver 2014
INFO4007
qui signifie « diviser le contenu en un maximum de 6 colonnes et s’assurer qu’aucune colonne
n’est plus petite que 240 pixels de large », provoquera l’affichage du contenu probablement sur 6
colonnes avec un écran de 24 pouces, mais seulement 1 colonne sur un écran de téléphone de largeur
maximale 480px ou moins.
column-rule est un raccourci pour les trois propriétés column-rule-width, column-rule-style et
column-rule-color. Exemple :
p
{
margin : 0 0 1em;
}
div
{
padding : 1em;
margin : 1em;
border : 2px s o l i d # c c c ;
columns : 240px 6 ;
column −gap : 2em;
column − r u l e : 2px dashed # c c c ;
}
http://www.w3schools.com/css/css3_multiple_columns.asp
XXIV.3.
Images bordures
border-image est une propriété CSS qui résume les propriétés border-image-source,
border-image-slice, border-image-width, border-image-outset et border-image-repeat.
http://www.w3schools.com/cssref/css3_pr_border-image.asp
XXIV.4.
Flexbox Layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox
http://umaar.github.io/css-flexbox-demo
XXIV.5.
Type de connexion
JavaScript permet de connaître le type de connexion d’un appareil (mobile) connecté. Cela peut
servir à optimiser le téléchargement de données, généralement des images de différentes résolutions.
Éric Hervet
- 111/128 -
Hiver 2014
INFO4007
Les valeurs retournées sont parmi la liste : UNKNOWN, ETHERNET, WIFI, CELL_2G, CELL_3G ou CELL_4G.
var connection , speed ;
connection = navigator . connection ||
navigator . mozConnection ||
navigator . webkitConnection ||
{ ’type’ : ’0’ } ;
// Set download speed
switch ( connection . type )
{
case connection . CELL_3G : // 3G
speed = ’medium’ ;
break ;
case connection . CELL_2G : // 2G
speed = ’slow’ ;
break ;
default :
speed = ’fast’ ;
}
document . body . c l a s s L i s t . add ( speed ) ;
Éric Hervet
- 112/128 -
Hiver 2014
INFO4007
XXV.
XXV.1.
XXV.. BlackBerry 10
Programmation BlackBerry 10
Historique
BlackBerry Limited, connue sous le nom Research In Motion jusqu’en 2013, est une compagnie
canadienne de télécommunications et d’équipements sans fil, dont le siège social se situe à Waterloo
en Ontario. Elle a été fondée en 1984 par Mike Lazaridis et Douglas Fregin, respectivement
étudiants en ingénierie à l’Université de Waterloo et à l’Université de Windsor.
À ses débuts, elle a collaboré avec RAM Mobile Data et Ericsson pour concevoir un système de
télécommunication sans fil bidirectionnelle pour radiomessagerie (pagers) et courriel. En 1998, elle
met sur le marché le Inter@ctive Pager 950 pour faire compétition à Motorola, puis en 1999 le
BlackBerry 850 Pager, capable de recevoir des courriels grâce à BlackBerry Enterprise Server
(BES). En avril 2000, sort le BlackBerry 957, le premier téléphone intelligent de la compagnie,
équipé du système d’exploitation BlackBerry OS, offrant de nombreuses fonctionnalités à l’avantgarde pour l’époque.
En 2001, apparaît le BlackBerry Pearl 8100, le premier téléphone intelligent de BlackBerry
offrant des caractéristiques multimédia, notamment grâce à une caméra intégrée. L’apparition du
premier iPhone d’Apple en 2007 pousse BlackBerry à produire son premier téléphone intelligent
à écran tactile en 2008, le BlackBerry Storm. Grâce à son réseau de distribution plus large et
efficace qu’Apple à l’époque, les téléphones BlackBerry se vendent très bien, et en 2010 on estime à
environ 21 millions le nombre d’utilisateurs BlackBerry aux États-Unis seulement.
Depuis, l’« agressivité » commerciale de Google et d’Apple a fait décliner le nombre d’utilisateurs
BlackBerry aux États-Unis à 9 millions, mais dans le monde BlackBerry compte encore 79 millions
d’utilisateurs (statistiques de décembre 2012).
Cependant les investisseurs et les média ont commencé à douter de la capacité de BlackBerry à
compétitionner avec les systèmes d’exploitation Android (Google) et iOS (Apple), de plus en plus
conviviaux avec un tas de fonctionnalités.
En octobre 2011, BlackBerry dévoile un nouveau système d’exploitation d’abord nommé BBX puis
BlackBerry 10. Mais à cause de restructurations administratives et de nombreux délais, la sortie
officielle de BlackBerry 10 OS et de deux nouveaux téléphones intelligents qui en sont équipés, le
Z10 et le Q10, est reportée à janvier 2013, en même temps que l’annonce du changement de nom de
la compagnie de RIM à BlackBerry Ltd.
XXV.2.
Le système BB10
BlackBerry 10 OS est un système d’exploitation propriétaire de BlackBerry Ltd. BB10 est fondé
sur le système QNX, basé sur un noyau Unix et souvent utilisé dans les ordinateurs industriels,
notamment ceux embarqués dans des voitures.
Éric Hervet
- 113/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
BB10 a su offrir des fonctionnalités innovantes par rapport à ses concurrents, notamment : la gestion des mouvements (gestures) ; le fonctionnement multitâche (multitasking) ; le BlackBerry Hub,
véritable centre de notifications incluant tous les réseaux sociaux et comptes courriels dans une
seule application ; le BlackBerry Balance, qui permet aux utilisateurs de séparer données
personnelles et professionnelles dans des espaces mémoires distincts ; la caméra « à décalage
de temps » (time shift camera), qui prend plusieurs images à chaque prise de photo, permettant à l’utilisateur d’ajuster la photo à sa convenance (pour éviter les yeux fermés par exemple) ;
BBM (BlackBerry’s Messaging) qui permet la vidéoconférence et les appels VoIP (Voice over IP) ; etc.
BB10 a aussi intégré une machine virtuelle permettant d’exécuter des applications Android.
Les langages de programmation permettant de développer des applications pour BB10 sont :
+ Le SDK natif en C/C++ ;
+ Le SDK Cascades en C++/Qt ;
+ HTML5/CSS3/JavaScript (SDK WebWorks) ;
+ Android runtime (Java).
http://fr.blackberry.com/software/smartphones/blackberry-10-os.html
XXV.3.
Z10
http://ca.blackberry.com/smartphones/blackberry-z10/specifications.html
+ Écran 1280 × 768 pixels (diagonale 4.2 pouces, aspect ratio 15 ∶ 9) ; Densité 356 pixels par pouce ;
Couleurs 24 bits.
+ Mémoire RAM 2 Go.
+ Processeur Qualcomm Snapdragon S4, CPU double-coeur 1.5 GHz ;
Jeu d’instructions ARMv7.
http://www.qualcomm.com/snapdragon/processors/s4/specs
http://fr.wikipedia.org/wiki/Architecture_ARM :
« Le monde des ordinateurs portables pourrait connaître prochainement une évolution avec le
remplacement progressif des processeurs x86 par l’architecture ARM. Windows 8 est compatible
avec cette architecture (avec certaines limitations), tout comme Google Chrome OS. L’utilisation
de l’architecture ARM devrait permettre la réduction de la consommation électrique.
Par contre, les fondeurs des processeurs x86 (Intel et AMD) se préparent à cette concurrence en
réduisant la consommation électrique de leurs solutions et en simplifiant leurs architectures,
Éric Hervet
- 114/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
comme avec les Atom et Bobcat, par exemple en intégrant les capacités graphiques avec le
processeur. De l’autre côté, les fondeurs des SoC (System on Chip) à base d’architecture ARM,
comme NVidia et Qualcomm, continuent d’augmenter les performances de leurs puces, par
exemple en augmentant le nombre de cœurs ou en ajoutant de nouvelles instructions.
Il est également possible d’agglomérer différents cœurs de différentes puissances, les plus faibles
en consommation et puissance travaillant la majorité du temps, afin de minimiser la consommation électrique et des cœurs plus puissants activés uniquement en cas de forte demande de
calcul afin d’en accélérer le traitement. Cette technologie est appelée big.LITTLE, elle est utilisée
par Samsung, avec ses Exynos 5 octo (4 cortex-A7 faible consommation et 4 cortex-A15 de forte
puissance), MediaTek et d’autres. Le Tegra 3 de NVidia, utilise une technique similaire avec un
seul cœur de faible consommation et plusieurs de forte puissance. »
XXV.4.
IDE
L’IDE Momentics et le simulateur BB10 peuvent être téléchargés à :
http://developer.blackberry.com/native/downloads
Instructions pour configurer l’IDE et bâtir le squelette d’une application BB10 :
http://developer.blackberry.com/native/documentation/cascades/getting_started/
setting_up.html
XXV.4.1. main.cpp
Dans le dossier src, on trouve le fichier main.cpp.
La classe Application permet (première instruction du main()) d’instancier un objet qui va gérer
les interactions entre l’utilisateur et l’application durant le temps d’exécution de celle-ci, ainsi que
son initialisation et sa terminaison.
Les fichiers inclus QLocale et QTranslator sont des classes Qt 50 servant à gérer les chaînes de
caractères dans différentes langues.
Le fichier inclus applicationui.hpp est le fichier d’entête d’une classe automatiquement créée
pour le projet. C’est dans cette classe que l’on implémente la logique et l’interface graphique (User
Interface) de l’application.
Le fichier Qt/qdeclarativedebug.h inclut une classe utilisée pour débogger et profiler l’application.
La ligne suivante importe l’espace de noms bb::cascades.
50. http://fr.wikipedia.org/wiki/Qt
Éric Hervet
- 115/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
Le programme principal commence par créer un objet app puis une instance de la classe
ApplicationUI, qui permettra d’importer un fichier QML 51 contenant l’interface graphique de
l’application.
Enfin, le main() déclenche la boucle « d’écoute d’événements » de l’application. Lorsque cette boucle
d’écoute se termine (par exemple si l’utilisateur quitte l’application), l’objet Application efface la
scène et toute son arborescence, puis libère toutes les ressources de l’application.
XXV.4.2.
Chargement d’un fichier QML
Dans le dossier src, on trouve aussi les fichiers applicationui.hpp et applicationui.cpp.
Le constructeur ApplicationUI commence par définir la gestion des langues (localization), notamment en créant un objet QTranslator pour gérer les chaînes de caractères multilangues et un objet
LocaleHandler pour détecter les éventuels changements de langue (locale) de l’appareil sur lequel
tourne l’application.
Puis on établit une connexion entre le signal systemLanguageChanged() et un slot défini dans
main.cpp.
Ensuite, on assigne le parent de l’application pour s’assurer que lorsque l’application se termine,
l’objet ApplicationUI est supprimé.
Puis un document QmlDocument est créé en utilisant le fichier assets situé dans le dossier
assets du projet. Ce document QML se voit assigner comme parent l’application courante. L’objet
QmlDocument représente un fichier QML chargé dans l’application.
Enfin, un objet root est créé à partir de l’objet QmlDocument. Cet objet doit être une sous-classe de
la classe AbstractPane utilisée pour mettre en place la scène de l’application.
Cela termine presque le constructeur de l’application. Il reste seulement à définir le slot connecté
au signal systemLanguageChanged(). Ce slot supprime tout traducteur existant qui serait préalablement relié à l’application, trouve le pays courant et la langue de l’appareil sur lequel tourne
l’application et installe un traducteur (translator) pour la langue courante.
Le fichier applicationui.hpp contient toutes les déclarations nécessaires pour utiliser ces classes,
ainsi que deux déclarations globales privées pour les objets QTranslator et LocaleHandler. Il est
généralement inutile voire déconseillé de modifier ce fichier.
XXV.4.3.
Créer une « UI » avec QML
Cascades propose un système flexible permettant de positionner les éléments d’interface de deux
manières :
+ en indiquant le type de mise en page (layout) pour le conteneur parent.
51. Qt Modeling Language. http://en.wikipedia.org/wiki/QML
Éric Hervet
- 116/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
Par exemple, une mise en page StackLayout indique que les enfants d’un conteneur sont positionnés les uns à côté des autres, horizontalement ou verticalement ;
+ en spécifiant des propriétés de mise en page aux enfants du conteneur, afin de contrôler le
positionnement des enfants entre eux (propriétés telles que SpaceQuota, coordonnes x et y,
etc.).
Les différents types de mise en page sont :
+ StackLayout
Mise en page par défaut dans Cascades (Fig. 4).
Les éléments s’empilent horizontalement ou verticalement, dans une direction spécifiée
(gauche-droite ou haut-bas). Les marges (espaces vides) entre les éléments peuvent être modifiées aussi.
F IGURE 4 – Mise en page StackLayout.
+ DockLayout
La mise en page DockLayout (Fig. 5) permet d’aligner les composants enfants d’un conteneur
en les alignant sur le bord gauche, droit, haut ou bas, ou en spécifiant que le composant doit
remplir toute la largeur et/ou toute la hauteur du conteneur.
F IGURE 5 – Mise en page DockLayout.
+ AbsoluteLayout
La mise en page AbsoluteLayout (Fig. 6) permet de positionner les composants de manière
exacte sur l’écran, en indiquant notamment leurs coordonnées x et y par rapport à leur conteneur parent.
Éric Hervet
- 117/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
F IGURE 6 – Mise en page AbsoluteLayout.
Exemple de code source QML avec une mise en page StackLayout :
import bb . cascades 1 . 2
Page {
Container {
layout : StackLayout { }
Button {
t e x t : " Bouton1 "
l a y o u t P r o p e r t i e s : StackLayoutProperties { }
horizontalAlignment : HorizontalAlignment . Center
}
Button {
}
Button {
}
}
}
Si on veut faire la même chose en C++ :
Container * pContainer = new Container ( ) ;
StackLayout * pStackLayout = new StackLayout ( ) ;
pStackLayout −>s e t O r i e n t a t i o n ( LayoutOrientation : : TopToBottom ) ;
Éric Hervet
- 118/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
pContainer −>setLayout ( pStackLayout ) ;
Button * pButton1 = Button : : c r e a t e ( ) . t e x t ( " Bouton1 " ) ;
pButton1 −>setLayoutProperties ( StackLayoutProperties : : c r e a t e ( )
. h o r i z o n t a l ( HorizontalAlignment : : Center ) ) ;
pContainer −>add ( pButton1 ) ;
Exemple de code source QML avec une mise en page AbsoluteLayout :
Page {
Container {
layout : AbsoluteLayout { }
Label {
l a y o u t P r o p e r t i e s : AbsoluteLayoutProperties {
p o s i t i o n X : 200
p o s i t i o n Y : 300
}
t e x t : " Label 1 "
}
Label {
l a y o u t P r o p e r t i e s : AbsoluteLayoutProperties {
p o s i t i o n X : 400
p o s i t i o n Y : 700
}
t e x t : " Label 2 "
}
}
Éric Hervet
- 119/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
}
// Create the c o n t a i n e r and l a y o u t
Container * myContainer = new Container ;
AbsoluteLayout * layout = new AbsoluteLayout ;
myContainer −>setLayout ( layout ) ;
// Create the l a y o u t p r o p e r t i e s
AbsoluteLayoutProperties * alp1 = AbsoluteLayoutProperties : : c r e a t e ( )
. x(200)
. y(300);
AbsoluteLayoutProperties * alp2 = AbsoluteLayoutProperties : : c r e a t e ( )
. x(400)
. y(700);
// Add the l a b e l s and s e t the l a y o u t p r o p e r t i e s f o r each
myContainer −>add ( Label : : c r e a t e ( )
. t e x t ( " Label 1 " )
. l a y o u t P r o p e r t i e s ( alp1 ) ) ;
myContainer −>add ( Label : : c r e a t e ( )
. t e x t ( " Label 2 " )
. l a y o u t P r o p e r t i e s ( alp2 ) ) ;
Utilisation des « quotas d’espace »
La propriété spaceQuota ne s’applique que pour une mise en page StackLayout et permet d’indiquer
comment un composant enfant peut diminuer ou augmenter pour remplir l’espace disponible d’une
mise en page spécifique.
Une valeur négative de spaceQuota indique que le composant utilise tout l’espace dont il a besoin
pour apparaître correctement, mais sans plus que nécessaire. C’est le comportement par défaut
lorsqu’on ne spécifie aucune valeur de spaceQuota.
Une valeur positive de spaceQuota indique que le composant utilise tout l’espace qu’il peut tout
en respectant les autres composants dans le même conteneur, et qu’il diminue ou augmente selon
l’espace disponible. Par exemple une valeur de 2 force un composant à prendre deux fois plus d’espace
qu’un composant avec un spaceQuota égal à 1.
Finalement les spaceQuota positifs peuvent être vus comme une manière de fixer les ratios de
tailles entre composants.
Exemple de code source QML avec utilisation des spaceQuota :
Éric Hervet
- 120/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
Page {
Container {
layout : StackLayout {
o r i e n t a t i o n : LayoutOrientation . LeftToRight
}
Button {
l a y o u t P r o p e r t i e s : StackLayoutProperties {
spaceQuota : 1
}
}
Button {
spaceQuota : 2
}
}
Button {
spaceQuota : 3
}
}
}
}
// Create the c o n t a i n e r and l a y o u t
Container * myContainer = new Container ;
StackLayout * layout = StackLayout : : c r e a t e ( )
. o r i e n t a t i o n ( LayoutOrientation : : LeftToRight ) ;
myContainer −>setLayout ( layout ) ;
// Create t h r e e s e t s o f s t a c k l a y o u t p r o p e r t i e s
StackLayoutProperties * slp1 = StackLayoutProperties : : c r e a t e ( )
. spaceQuota ( 1 ) ;
Éric Hervet
- 121/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
// Add buttons t h a t use the s t a c k
myContainer −>add ( Button : : c r e a t e ( ) .
layout properties
l a y o u t P r o p e r t i e s ( slp1 ) ) ;
Exemple complet illustrant les différents types de mise en page :
http://abaque.ca/~eric/h14/info4007/exemples/qml/LayoutsTutorial
Le fichier assets/main.qml définit trois conteneurs dans le conteneur principal de la page : un
conteneur (par défaut en StackLayout) pour le haut de la page, un conteneur (en mode StackLayout
de gauche à droite) pour le bas de la page avec trois boutons, et un conteneur contenant lui-même
trois conteneurs ! . . . respectivement en modes StackLayout, DockLayout et AbsoluteLayout.
Les boutons du conteneur de bas de page possèdent chacun l’événement onClicked: pour cacher ou
rendre visible à tour de rôle les conteneurs Stack, Dock et Absolute.
Autre exemple complet qui manipule des images :
http://abaque.ca/~eric/h14/info4007/exemples/qml/PremiereApp
Comme toujours, il est possible de faire la même chose en C++ seulement :
http://developer.blackberry.com/native/documentation/cascades/getting_started/
first_app/lightning_crossfade_cpp.html
XXV.4.4.
Images
Exemple complet :
http://abaque.ca/~eric/h14/info4007/exemples/qml/imageloader
Explications :
http://abaque.ca/~eric/h14/info4007/exemples/qml/imageloader/readme.txt
Le fichier src/app.cpp charge dix images dans le modèle de l’application puis met en place la scène
grâce au fichier assets/main.qml (ImageView, Button, ListView).
Le fichier src/imageloader.cpp permet d’initialiser une requête asynchrone sur le réseau et de
créer un thread pour chaque objet QImage correspondant à une image à charger.
Le fichier src/imageprocessing.cpp permet simplement de redimensionner chaque image aux
mêmes dimensions.
http://developer.blackberry.com/native/reference/cascades/bb__cascades__imageview.
html?f=imageview
Éric Hervet
- 122/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
http://developer.blackberry.com/native/reference/cascades/bb__cascades_
_imageviewloadeffect.html?f=imageview
http://developer.blackberry.com/native/reference/cascades/bb__imagedata.html?f=
imagedata
XXV.4.5.
Composants de dialogue
http://abaque.ca/~eric/h14/info4007/exemples/qml/DialogSample
Alert, Prompt, Login, File Browse, Context Menu.
http://developer.blackberry.com/native/reference/cascades/bb__cascades__dialog.
html?f=dialog
XXV.4.6.
Capteurs
http://abaque.ca/~eric/h14/info4007/exemples/qml/SensorDemo
Collision Detector, Compass, Flashlight, Metal Finder, Motion Alarm, Rotation 3D.
http://developer.blackberry.com/native/reference/cascades/qtsensors.html?f=
qtsensors
XXV.4.7.
Jeu basé sur l’accéléromètre
http://abaque.ca/~eric/h14/info4007/exemples/qml/accelgame
Le « joueur » (tuile de dimension 50 définie dans src/player.cpp) se déplace dans une des quatre
directions lorsque le capteur détecte une variation en x ou en y supérieure à 0.8 en valeur absolue
(voir fonction evaluateInput() du fichier src/gamecontroller.cpp).
http://developer.blackberry.com/native/reference/cascades/qaccelerometer.html
http://developer.blackberry.com/native/reference/cascades/qaccelerometerreading.
html
XXV.4.8.
État de la batterie
http://abaque.ca/~eric/h14/info4007/exemples/qml/batterysample
Un exemple simple qui teste l’état de la batterie (propriété _battery.chargingState) et son niveau
(_battery.level) et qui affiche des messages et des images différentes en conséquence.
http://developer.blackberry.com/native/reference/cascades/bb__device_
_batterychargingstate.html?f=battery
Éric Hervet
- 123/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
http://developer.blackberry.com/native/reference/cascades/bb__device_
_batterycondition.html?f=battery
http://developer.blackberry.com/native/reference/cascades/bb__device__batteryinfo.
html?f=battery
XXV.4.9.
Lecteur de code barre
http://abaque.ca/~eric/h14/info4007/exemples/qml/barcodereader
Un exemple simple de lecture de code barre (barcode reader) en utilisant la caméra.
http://developer.blackberry.com/native/reference/cascades/multimedia_camera.html?
f=camera
XXV.4.10.
Gestion d’une base de données SQLite
http://abaque.ca/~eric/h14/info4007/exemples/qml/databasecreation
Un exemple qui démontre comment créer une base de données SQLite, une table, des tuples, ainsi
que supprimer une table.
Techniquement, cela est rendu possible grâce aux librairie BlackBerry SqlConnection et QtSql qui
contiennent les méthodes usuelles permettant de gérer une base de données relationnelle.
http://developer.blackberry.com/native/reference/cascades/qtsql.html?f=qtsql
XXV.4.11.
Requête SQL en QML
http://abaque.ca/~eric/h14/info4007/exemples/qml/databamanagerusage
Dans le même ordre d’idée, une ListView peuplée par le résultat d’une requête SQL. Dans cet
exemple tout est fait en QML.
XXV.4.12.
Citations
http://abaque.ca/~eric/h14/info4007/exemples/qml/quotes
Toujours avec une base de données SQLite, une application plus complexe qui affiche une liste de
citations de personnes connues, donne la possibilité d’en ajouter d’autres ou d’en effacer.
Ici on utilise une classe QML GroupDataModel pour trier et regrouper les données selon certains
critères (ici le nom de famille et le prénom, voir fichier assets/QuotesListPage/QuotesModel.qml).
http://developer.blackberry.com/native/reference/cascades/bb__cascades_
_groupdatamodel.html?f=groupdatamodel
Éric Hervet
- 124/128 -
Hiver 2014
INFO4007
XXV.4.13.
XXV.. BlackBerry 10
FilePicker
http://abaque.ca/~eric/h14/info4007/exemples/qml/filepicker
Un exemple qui démontre les possibilités de la classe FilePicker pour permettre à l’utilisateur de
sélectionner des fichiers ou dossiers locaux, avec les options d’affichage possibles (liste de noms ou
grille d’icônes), les types de fichiers, la possibilité de multi-sélectionner et de trier en ordre croissant
ou décroissant.
Essentiellement cela peut être fait en QML.
http://developer.blackberry.com/native/reference/cascades/data_management_file_
picker.html?f=filepicker
XXV.4.14.
Calendrier
http://abaque.ca/~eric/h14/info4007/exemples/qml/calendar
Une application simple de calendrier, permettant de visualiser des événements, en créer de
nouveaux, en éditer et en supprimer.
http://developer.blackberry.com/native/reference/cascades/app_integration_
calendar.html?f=calendar
XXV.4.15.
Gestion des comptes
http://abaque.ca/~eric/h14/info4007/exemples/qml/accounts
main.qml propose une liste déroulante (dropdown list) des différents types de comptes BlackBerry :
Calendars, Contacts, Notebook, Geolocation, Linking, Memos, Messages, Tags, Tasks et Phone. Selon
le choix sélectionné, les items correspondants sont affichés au-dessous dans un composant ListView.
Pour ce faire, on fait instancie un objet accountViewer défini dans AccountViewer.qml. Ce dernier
utilise une ListView de paires titre / valeur (title / value), correspondant à une classe programmée
dans le fichier ViewerField.qml.
Les fichiers C++ dans src servent à donner l’accès aux informations d’un compte donné, à l’éditer
et à mettre à jour les informations affichées si le compte a été modifié.
calendar.html?f=calendar
contacts.html?f=contact
notebook.html?f=notebook
http://developer.blackberry.com/native/reference/cascades/bb__platform__geo_
_geolocation.html?f=geolocation
Éric Hervet
- 125/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
http://developer.blackberry.com/native/reference/cascades/app_integration_message.
html?f=message
http://developer.blackberry.com/native/reference/cascades/device_and_
communication_phone.html?f=phone
XXV.4.16.
Dictaphone
http://abaque.ca/~eric/h14/info4007/exemples/qml/dictaphone
Application qui permet d’enregistrer de l’audio et de le jouer.
Elle met en jeu entre autre les classes QML AudioRecorder pour enregistrer de l’audio et
MediaPlayer pour jouer un fichier audio.
Par défaut l’enregistrement se fait au format AAC (extension .m4a, MPEG-4 audio), mais les appareils équipés de BB10 OS peuvent utiliser différents formats (images, audio, vidéo) :
https://developer.blackberry.com/devzone/develop/supported_media/bb10_media_
support.html
Les fichiers src/*.cpp servent ici à détecter les fichiers audio déjà enregistrés (dans
/data/tracks/) et à mettre à jour le compteur de fichiers audio selon qu’on en efface ou
qu’on en enregistre de nouveaux.
http://developer.blackberry.com/native/reference/cascades/bb__multimedia_
_audiorecorder.html?f=audiorecorder
_mediaplayer.html?f=mediaplayer
XXV.4.17.
Lecture/écriture au format JSON
http://abaque.ca/~eric/h14/info4007/exemples/qml/jsonreadwrite
Application qui montre comment lire ou écrire un fichier au format JSON, ainsi que convertir de
JSON à Qt ou l’inverse.
Les boutons QML font ici appel à des fonctions écrites en C++ dans src/app.cpp, notamment
loadOriginalJson(), convertJsonToQt() et convertQtToJson().
http://developer.blackberry.com/native/reference/cascades/bb__data_
_jsondataaccess.html?f=json
XXV.4.18.
Manipulation de la lumière LED
http://abaque.ca/~eric/h14/info4007/exemples/qml/led
Application qui permet de gérer la lumière LED d’un appareil BlackBerry équipé de BB10 OS, grâce
à la classe QML Led.
Éric Hervet
- 126/128 -
Hiver 2014
INFO4007
XXV.. BlackBerry 10
http://developer.blackberry.com/native/reference/cascades/bb__device__led.html?f=
led
XXV.4.19.
MapView
http://abaque.ca/~eric/h14/info4007/exemples/qml/mapview
Application qui montre comment utiliser MapView, le zoom et les pins.
http://developer.blackberry.com/native/reference/cascades/bb__cascades__maps_
_mapview.html?f=mapview
XXV.4.20.
Notifications
http://abaque.ca/~eric/h14/info4007/exemples/qml/notifications
Simple application qui montre comment gérer les notifications en QML.
http://developer.blackberry.com/native/reference/cascades/platform_notifications.
html
XXV.4.21.
Orientation
http://abaque.ca/~eric/h14/info4007/exemples/qml/orientation
Simple application qui montre comment détecter la position de l’appareil, en héritant de la classe
QOrientationFilter et en utilisant un objet privé de la classe QOrientationSensor.
http://developer.blackberry.com/native/reference/cascades/qorientationfilter.html?
f=qorientationfilter
http://developer.blackberry.com/native/reference/cascades/qorientationsensor.html?
f=qorientationsensor
XXV.4.22.
Stockage permanent
http://abaque.ca/~eric/h14/info4007/exemples/qml/starshipsettings
Application qui montre comment stocker de manière permanente sur l’appareil des valeurs (ici des
settings), grâce à la classe Qt QSettings et notamment la méthode void setValue( ).
http://developer.blackberry.com/native/reference/cascades/qsettings.html?f=
qsettings
Éric Hervet
- 127/128 -
Hiver 2014
INFO4007
XXV.4.23.
XXV.. BlackBerry 10
Sons système
http://abaque.ca/~eric/h14/info4007/exemples/qml/systemsound
Application qui montre comment jouer des sons système grâce à la classe QML SystemSound.
_systemsound.html?f=systemsound
Éric Hervet
- 128/128 -
Hiver 2014

INFO4007 - aquadie

Transcription

Documents pareils

Mme HERVET Simone BONEN, Rostrenen, Porto

MONECHO - Stage Dev Informatique 2016

Ecoutez lire !

Mon Curriculum Vitae

Faire suivre la page : CIC BANQUE BSD CIN

[Pincipaux avantages] L`audio conférence facile

Bulletin d`inscription

SALLE TBI avec Vidéoprojecteur ultra courte focale Kit

CORDON 3 x RCA M/M Audio stéréo + vidéo - 1,20m