Devoxx – HTML5 à l’honneur

HTML 5 est définitivement à l’honneur de ce Devoxx 2011. Pour preuve les salles de 3 conférences dédiées au sujet étaient pleines. Nous vous avons déjà parlé de « Devoxx – Les nouvelles applications HTML 5 et DART » et nous allons maintenant évoquer les 2 autres sessions que nous avons vues:

• Working Off the Grid: HTML5 Offline
• Bleeding Edge HTML5

Elles ont toutes été réalisées par des personnes de Google, preuve de l’implication de la compagnie dans le futur du HTML.

Il y avait aussi un sujet « Intro to HTML5 Game Programming – WebGL Edition » mais auquel aucun Xebian n’a pu assister: il faut bien faire un choix lorsque plusieurs sessions intéressantes sont en parallèle !

Working Off the Grid: HTML5 Offline

Sam Dutton de Google nous a présenté les différentes solutions de stockage hors ligne. Les problématiques adressées par ces technologies sont multiples:

• Problèmes de bande passante.
• Connexions peu stables.
• Amélioration des performances des applications web.
• Diminution de la consommation de ressources sur le serveur.
• Amélioration générale de l’expérience utilisateur.

Auparavant, nous ne disposions que de méthodes peu satisfaisantes: cookies, flash…

Maintenant, des solutions plus adaptées sont à notre disposition:

• Web Storage (localStorage/sessionStorage): permet de stocker de façon simple des paires clef/valeur.
• IndexedDB/WebSQL: stockage de structures plus complexes et support des transactions (utile si plusieurs onglets ou sessions ouverts simultanément).
• AppCache: l’utilisation d’un fichier manifeste permet de déclarer des ressources (images, CSS…) à mettre en cache.

Bref, les possibilités s’annoncent énormes mais des problématiques fondamentales demeurent: quid de la compatibilité entre navigateurs ? Tous ne supportent pas toutes les APIs et cela peut augurer de belles galères. C’est malheureusement un aspect sur lequel la présentation n’a pas du tout insisté.

Pour plus de renseignements sur les possibilités de stockages hors ligne, le site html5Rocks en offre un vaste aperçu.

Bleeding Edge HTML5

Paul Kinlan (dont voici le blog) a effectué une présentation assez généraliste sur nombre de nouveautés apportées par HTML 5. Les slides sont en ligne et voici les points marquants:

• Début en douceur avec la nouvelle balise <mark /> qui s’utilise pour mettre en avant, de façon sémantique, une partie de texte. Bon, ce n’est pas cela qui changera la face du web !
• Les champs susceptibles d’être remplis par la voix, les speech input, sont aussi une nouveauté: un attribut x-webkit-speech, pour l’instant disponible seulement sur Chrome, permet d’offrir la possibilité de saisir du texte avec un micro. On peut se demander pourquoi laisser au développeur le choix d’activer ou non cette possibilité: il serait peut être plus simple de laisser le choix au niveau du navigateur, ce qui permettrait à tous les champs texte de bénéficier de cette fonctionnalité.
• On passe ensuite à des nouveautés plus impressionnantes concernant les animations. On en profitera pour remarquer que Google a en ce moment un intérêt certain pour les jeux videos: que ce soit avec Angry Birds dans Chrome ou le nouveau framework avec lequel il a été réalisé, PlayN, Google a envie de réussir dans ce domaine. Pour revenir aux animations, donc, au lieu de coder en dur un timeout définissant le framerate à une valeur fixe, les navigateurs proposent maintenant la notion de « RequestAnimationFrame » qui appelle un callback définit par l’utilisateur quand le navigateur le juge utile. Ainsi le CPU ne travaillera pas pour rien: d’une part, pas besoin de calculer 100 images secondes si le rafraichissement de l’écran est de 60Hz, et d’autre part le callback ne sera pas appelé si l’onglet de l’animation n’est pas l’onglet actif. Cette fonctionnalité fait aussi partie de la « page visibility API« : les vidéos ou sons pourront être mis en pause lors du changement d’onglet.
• Les « prerendered pages » sont des pages liées à d’autres par un lien spécial permettant leur chargement en arrière plan pour un rendu immédiat lors du clic sur le lien. On peut imaginer Google utiliser ce type de liens pour précharger les 2 ou 3 premiers résultats affichés lors d’une recherche. Par contre, on voit mal comment ce type de liens pourra se passer d’augmenter virtuellement le traffic des sites même s’ils n’ont pas été visités réellement par des utilisateurs.
• Un attribut « online » de l’objet js navigator permet maintenant de connaitre l’état de l’ordinateur, connecté ou non à un réseau. Un callback permet d’être notifié sur un changement d’état (connexion/déconnexion).
• Après le succès qu’on leur connait dans Android, les « intents » débarquent sur le web. On pourra grâce à eux partager du contenu entre plusieurs sites. Il suffira que les sites fournisseurs se déclarent au navigateur pour que l’on puisse les sélectionner comme tel et, par exemple, importer directement des photos en provenance de Picasa lors de la rédaction de son mail sur gmail.com. Plus de détails dans les slides.
• Le projet WebRTC a pour but de donner la possibilité de réaliser des chats vidéos sans flash, directement avec les API javascript fournies par le navigateur. Le but avoué est de casser le paradigme de la numérotation en permettant des communications instantanées en un clic. Mais du coté software, cela suppose bien sûr des notions de:
  • Capture/rendu de flux audios/vidéos.
  • Énumération des périphériques matériels de capture.
• Pour finir, nous avons eu droit à une démonstration plutôt impressionnante de génération dynamique de sons, en temps réel et en javascript. Des filtres successifs peuvent être appliqués pour déformer le son original.

Dès demain, de nouvelles présentations sur HTML5 devraient avoir lieu, notamment en relation avec JavaFX et Play!/Scala. Il n’y a pas de mystère, HTML5 gagne ces temps-ci une crédibilité énorme, avec notamment les soutiens récents de Microsoft et Adobe, qui incitent nombre d’entre nous à s’intéresser de près au projet qui est en perpétuelle évolution.