Sommaire du livre

Une brève histoire du Web et de ses standards

  • Un successeur pour HTML4 et XHTML
  • Le rôle du W3C
  • Le rôle du WhatWG
  • Les fondements de l’évolution
  • HTML5 = HTML + JavaScript + CSS (3) ?

 HTML en seconde langue

  • La syntaxe HTML 5
  • L’encodage des caractères
  • Le type MIME
  • Comment le navigateur détermine-t-il l’encodage des caractères et le type MIME ?
  • HTML5 ou XHTML 5 ?
  • La validation
  • Rappels sur les styles CSS
  • Rappels sur JavaScript
  • Publier un site en ligne
  • Le protocole HTTP
  • Bonnes pratiques
  • Les sites de référence

Navigateurs et support

  • Panorama des navigateurs web et moteurs de rendu
  • Prise en charge de HTML 5
  • Bibliothèques de détection et de modernisation
  • Frameworks HTML
  • Les bons outils

Éléments et attributs HTML 5

  • Modèles de contenu
  • Le doctype avant tout
  • Éléments racines et méta-informations (html, head, title, meta, link, style, base, body)
  • Groupement (div, span)
  • Liens (a)
  • Sections et titres (section, article, header, footer, nav, aside, address, h1 à h6, hgroup)
  • Listes (ul, ol, li, dl, dt, dd)
  • Texte et sémantique (p, blockquote, q, cite, strong, em, b, i, u, small, dfn, abbr, code, var, kbd, samp, sub, sup, time, hr, br, wbr, ins, del, s, pre, mark, ruby, rt, rp, bdo, bdi)
  • Contenu embarqué (img, map, area, figure, figcaption, iframe, embed, object, param, video, audio, source, track, canvas)
  • Données tabulaires (table, thead, tfoot, tbody, tr, td, th, caption, colgroup, col)
  • Éléments interactifs (menu, command, details, summary, device)
  • Scripting (scrpit, noscript)
  • Attributs HTML globaux
  • Relations des liens
  • Attributs événements

Formulaires

  • <input> et ses variantes (text, password, tel, url, email, search, hidden, radio, checkbox, button, reset, submit, image, file, date, datetime, time, datetime-local, month, week, number, range, color)
  • Autres éléments de formulaires (textarea, select, option, optgroup, datalist, button, output, keygen, progress, meter)
  • Construction de formulaires (form, fieldset, legend, label)
  • Attributs communs pour les éléments de formulaire (placeholder, autofocus, autocomplete, required, multiple, dirname, pattern, min, max, step)
  • Une touche de style
  • Un zeste de script
  • Prise en charge

Les microformats (microdata)

  • Principe des microformats : vers le Web sémantique
  • Microdata à la rescousse
  • API DOM Microdata
  • Rich Snippets

Audio et Vidéo

  • Conteneurs, codecs, licences et support (Theora, WebM, H.264, MP3, AAC, Vorbis, Opus)
  • Les balises media (audio, video, track, source)
  • Attributs (src, width, height, controls, poster, autoplay, preload, loop, mediagroup)
  • Interface de contrôle (API) et événements
  • Plein écran (fullscreen)
  • Prise en charge : comment choisir
  • Librairies et lecteurs

Dessin avec Canvas

  • L’élément <canvas>
  • Formes géométriques
  • Chemins
  • Styles de traits, remplissages et couleurs
  • Dégradés
  • Transformations et états du contexte
  • Images
  • Pixels
  • Motifs et sprites
  • Texte
  • Ombrages
  • Transparence, compositions et masques
  • Contrôle clavier et souris
  • Animation et jeux
  • Performance
  • L’API Page Visibility
  • Plein écran
  • Vidéo et audio
  • Prise en charge
  • Bibliothèques
  • Et la 3D ? WebGL !
  • Et le graphisme vectoriel ? SVG !

Géolocalisation

  • Principe
  • Les mains dans le code (Déclencher la localisation, position et coordonnées, latitude, longitude)
  • Utiliser une carte
  • Prise en charge par les navigateurs

Interactions avec les fichiers (File API)

  • Principe
  • Fonctionnement
  • Lire des fichiers avec FileReader
  • Upload simple avec PHP
  • Upload avec XMLHttpRequest 2
  • Drag & Drop
  • Écrire des fichiers, accéder au système
  • Prise en charge par les navigateurs

Gestion du glisser-déposer (Drag & Drop)

  • Principe
  • Événements et attributs mis en oeuvre
  • Glisser…
  • Déposer !
  • L’interface DataTransfer
  • Glisser-déposer de fichiers
  • Prise en charge par les navigateurs

Événements envoyés par le serveur (« push »)

  • Push-toi, j’arrive
  • Sous le capot (côté serveur, côté client)
  • Syntaxe des messages
  • Utiliser JSON
  • Prise en charge par les navigateurs

Échange d’informations entre documents (Web Messaging)

  • Fonctionnement
  • Sécurité
  • Données transférées et JSON
  • Source et réponse
  • Prise en charge par les navigateurs

Communication en temps réel (Web Sockets)

  • Un protocole commun
  • Côté serveur
  • Côté navigateur (envoyer et recevoir des messages)
  • Prise en charge par les navigateurs

Stockage des données locales (Web Storage)

  • Deux espaces de stockage (session et local)
  • L’interface Storage
  • Un soupçon de JSON
  • Stocker sur un événement
  • Prise en charge par les navigateurs

Bases de données (Indexed Database & Web SQL Database)

  • L’aube d’IndexedDB
  • Le crépuscule de l’API Web SQL Database ?

Applications web hors ligne

  • Principe
  • En ligne ou hors ligne ?
  • Liste des fichiers à mettre en cache (manifeste)
  • L’API Application cache
  • Une application hors ligne
  • Prise en charge par les navigateurs

Historique de navigation

  • Navigation dans l’historique
  • Modification dynamique de l’historique (pushState, replaceState, popstate)
  • Simulation
  • Les ancres et l’événement hashchange
  • Détection
  • Prise en charge par les navigateurs

JavaScript en (multi)tâche de fond : les Web Workers

  • Principe
  • Fonctionnement (initialisation, communication, terminaison, erreurs, blob)
  • Prise en charge par les navigateurs

JavaScript, le DOM et l’API Selectors

  • Les bases de JavaScript
  • Méthodes de sélection DOM
  • Propriétés et méthodes DOM
  • Manipulation DOM
  • Méthodes pour formulaires
  • Gestionnaires d’événements
  • Autres fonctions utiles (dont matchMedia)
  • Comment écrire du bon code JavaScript ?
  • Prise en charge par les navigateurs

Conclusion et perspectives


Annexe A : Fonctionnalités modifiées et obsolètes

  • Différences HTML5 par rapport à HTML4
  • Fonctionnalités obsolètes
  • Fonctionnalités obsolètes non conformes

Annexe B : Feuilles de style CSS

  • Principe général
  • Sélecteurs
  • Propriétés
  • Pseudo-classes et pseudo-éléments
  • Règles @
  • Media Queries

Annexe C : Accessibilité et ARIA

  • Qu’est-ce que l’accessibilité du Web ?
  • WAI, WCAG et ARIA
  • Les rôles et propriétés de WAI-ARIA