Il y a deux semaine, je présentais avec Aurélien Lévy.

Voici le résumé des points abordés pour ma partie avec quelques liens externes et de bonnes ressources. En gros, c'était mon bloc notes pour me rappeler toutes les nouveautés.

HTML5

  • Philosophie Design principles
  • Définition du parser, des nécessités user agent VS auteurs
  • Nouveaux éléments
    • doctype et charset : faciles à retenir
    • nav, header, footer, section, aside, article : pour mieux structurer le contenu
    • video, audio, canvas : pour rajouter des contenus dynamiques
    • web forms (url, mail, date, range, search, color), required, placeholder, autofocus : plus de contrôle sur les formulaires
  • Nouvelles API
    • localStorage, sessionStorage, sql storage : stockage côté client façon clef => valeur ou SQL
    • app cache (manifest) : permet de stocker l'appli offline, couplé au stockage permet de faire du offline complet
    • getElementsByClassName : une nouvelle collection pour traverser facilement le DOM
    • Drag & Drop : bah euh, glisser déposer quoi :)
    • postMessage : permet de communiquer entre deux applis tournant sur des domaines différents, permettant ainsi des "mashups" plus sécurisés.
  • Presque lié à HTML5 mais dans d'autres specs
    • XHR cross domain : permet de faire des requêtes Ajax sur d'autres domaines sans passer par un proxy côté serveur
    • Selectors API : permet de sélectionner des éléments à partir d'un sélecteur, comme le font les librairies JavaScript
    • Geolocation API : donne accès à la position géographique
    • Web Workers : lancer du JavaScript dans un autre thread pour faire des traitements lourds qui ne bloque pas l'interface
    • Ecmascript 5 (pdf) (JSON.parse) : plein de nouveautés mais surtout un moyen de parser du JSON nativement et en toute sécurité.
  • Ce qui Marche dans IE8
    • JSON.parse
    • Drag & Drop vu que la spec s'est inspirée de ce que IE avait déjà implémenté depuis IE5
    • localStorage, sessionStorage
    • postMessage
    • XDR, c'est XHR cross domain mais avec un objet nommé autrement (mais la même API)
    • Selectors API mais qui ne fonctionne qu'avec les sélecteurs CSS connus par IE8 évidemment.

CSS3

  • Petit rappel : CSS 2 n'est pas encore totalement exploité (display: table, inline-block, @font-face, text-shadow, sélecteurs, generated content) ni une spec finale
  • CSS 3 est découpé par modules qui sont plus ou moins finalisés et implémentés.
  • Candidate Recommandation
    • Media queries : écrire des règles qui ne sont exécutées que si l'appareil/navigateur a certaines propriétés (couleurs, taille, ratio, etc)
    • Marquee : oui oui, le défilement comme <marquee>, très utilisé dans les pays asiatiques visiblement.
    • Basic UI : indique de nouveaux pseudo-sélecteurs et propriétés pour enrichir l'interface utilisateur (::valid, ::required, etc)
  • Last Call
  • Working draft utilisables
    • Background et border Rajoute beaucoup de possibilités : bords arrondis, bordures avec images, plusieurs arrière plans, ombre
    • Couleurs : Transparence partielle avec RGBA, d'autres espaces de couleurs avec HSL et HSLA, opacity pour la transparence
  • Working draft en cours de rédaction
    • Template layout nouveau moyen de faire des layout avec une syntaxe orientée "ASCII art" : display: "aaaaa" "bccdd"
    • Grid positionning nouveau moyen de faire des layout basés sur une construction via des grilles, proche de l'impression papier
    • Transforms 2D/3D permet de modifier l'aspect d'un élément en le tournant, tordant, déplaçant dans un espace 2D ou 3D.
    • Transitions permet de passer d'un état à l'autre d'une propriété avec une transition plutôt que brutalement
    • Animations permet de définir des animations à effectuer.

Ressources externes

  • CSS3 info : beaucoup d'exemples de fonctionnalités très simples
  • Hacks Mozilla : des exemples plus avancés et concrets d'utilisations de CSS et HTML5
  • HTML5 doctor : articles et tutoriaux sur HTML5, les techniques, l'état de l'art, etc.