S’il y a bien une technologie qui a fait salle comble à toutes les conférences de ce Devoxx 2011 c’est HTML 5.
Quel engouement !! Et on peut dire que les intervenants ont réussi à en mettre plein la vue de l’auditoire.
J’ai eu la chance d’assister (assis 😉 ) à l’une de celles qui a été parmi les plus réussies. Je vais tenter de vous la faire partager avec une petite revue des nouveautés (et plus…) les plus marquantes présentées durant cette conférence par Paul Kinlan.
On commence par du classique… mais pratique
Logo HTML 5
Collapse
Qui n’a jamais utilisé javascript pour faire du collapse de div et bien en HTML 5 on se pose plus la question, il suffit d’utiliser la balise <détail> puis <summary> et le navigateur se charge du reste.
Une balise <output> au sein d’une balise <form>
Cette balise permet, à partir d’une donnée saisie dans une on plusieurs balise(s) input de calculer (en javascript) un résultat directement présent dans une balise <ouput>. Pas très impressionnant, mais encore une fois pratique.
Le WebkitSpeech
Il s’agit d’un <input> texte qui est simplement rempli via la reconnaissance vocale du contenu dicté au micro par l’utilisateur. Ceci permettra de rajouter un niveau d’accessibilité à des sites web de manière très simple.
Un peu plus complexe
Synchronized based animation
Le navigateur synchronise les animations Javascript selon la fréquence de l’écran du device d’exécution. Ceci permet ainsi de gagner en fluidité d’animation de navigation ou dans les jeux.
Visibilité des onglets.
Il est possible de savoir si la page courante est affichée ou masquée (via les onglets). On peu ainsi faire en sorte qu’une musique soit jouée seulement lorsque la page correspond à l’onglet affiché. Ceci permettra d’éviter de se demander de quel onglet provient la musique quand on navigue… (Que ceux qui n’ont jamais connu ça se lèvent !)
Pré-rendering page.
Plutôt sympa, cette fonctionnalité permet de pré-charger une page derrière un lien. Lorsque l’on clique dessus, l’affichage est alors instantané !
Etat de la connexion
Une fonctionnalité sympa permet de savoir quel est l’état de notre connexion internet (connecté/pas connecté)… merci la mobilité ! On imagine derrière l’avantage d’une telle fonctionnalité comme pouvoir sauvegarder en local les données de l’utilisateur (via les nouvelles fonctionnalités de webstorage), jouer plus finement avec le cache ou tout simplement avertir l’utilisateur.
Web Intent
A l’heure où les API fleurissent sur le net (comme twitter, facebook) il n’est pas évident de les manipuler. Google a donc décidé de créer une sorte d’API simplifiée (qui maintenant sera unifiée avec Mozilla) qui permet d’utiliser celle de votre réseau social favori ou autre.
Les utilisateurs d’Android y retrouveront là une forte similitude avec leur OS avec la proposition de différentes applications a l’ouverture d’un fichier (et les objets « intent » pour ceux qui en ont déjà développé).
Pour résumer, cela fonctionne comme suit :
– Un site qui propose des services d’édition d’image rajoutera la balise suivante afin de proposer à l’utilisateur d’enregistrer ce site comme proposant un service d’édition et l’enregistrer parmis ses « favoris » :
<intent<br></br>
action="http://webintents.org/edit"<br></br>
type="image/*"<br></br>
/>
– Lorsque l’utilisateur ira sur un site qui fait appel à un « intent » pour déléguer l’édition d’une image, l’utilisateur aura le choix de faire appel à un de ses services d’édition d’image déjà enregistrés à l’étape précédente.
– Une fois l’édition de l’image terminée dans ce nouveau contexte, l’ « intent » est posté et l’application qui avait fait la demande de ce service reprend la main à la réception de l’ « intent ».
Rich Multimedia
Paste file
Ceci permet le drag’n’drop de fichiers depuis le bureau vers l’application et déclenche ainsi un événement qu’on implémente ensuite (ex : l’upload d’un fichier directement). Cette fonctionnalité est déjà bien connue des utilisateurs des GMail sur Chrome pour joindre des fichiers.
Camera/Microphone
Une API permet de capturer le son et la vidéo de la webcam et de les manipuler (rectifier la couleur des images, manipuler le signal sonore).
FullScreen API
On connaît bien le fullscreen des navigateurs classiques. Dans le cas de HTML 5 il s’agit d’un véritable plein écran. Via javascript/CSS on peut savoir que l’on est en plein écran et modifier complètement l’aspect ou le comportement de la page.
WebRTC
C’est un projet proposant une API Javascript visant à faciliter l’interaction entre utilisateurs souhaitant discuter vocalement et/ou avec la vidéo.
Il est actuellement supporté par Google, Mozilla et Opéra.
Audio
Enfin, la dernière partie fut consacrée à la nouvelle balise audio. Il faut savoir que de base l’accès aux données d’un signal audio est très limité. Mozilla a donc de son coté étendu l’API avec « Audio Data API » et Google a de son coté très récemment adopté « Web Audio API » du W3C. L’objectif est de réussir à faire du traitement audio poussé (chorus, delay, mixage, spatialisation et autres modulations de fréquences).
Aux dires du speaker, il semblerait que l’API de Firefox soit plus lente car toutes les opérations de traitement audio sont effectuées en JavaScript alors que coté Chrome elles sont implémentées de manière sous-jacentes ( optimisé C / C + + ). En tous les cas au vu des démos plutôt épatantes (déformation d’un signal en temps réel, affichage de spectres (style K2000), etc… ), les développeurs de jeux en auront pour leur compte.
Conclusion
Présentation agréable de quelques nouveautés HTML 5 même s’il a manqué quelques éléments importants (CSS 3, Canvas, XHR 2…) alors que l’on a eu droit à des extras comme l’API Web audio ou bien les Web Intents (qui me semblent eux promis à un bel avenir).
En tous cas, on sent le navigateur poussé encore à un niveau plus élevé en tant que plateforme multimédia avec pour toile de fond la volonté de la fin du Flash, l’OS semble désormais relayé au second plan.
La guerre entre navigateurs (sans fin ?) fait rage :
- Tous les codecs (audio/video) n’étant pas supportés par tous les navigateurs, il faut en tenir compte.
- Chaque navigateur cherche à adopter au plus vite de nouvelles spécifications poussées (tel que le Web Audio API) tout en cherchant à se distinguer par des performances accrues (tel que l’implémentation sous jacente du traitement audio) ou l’API facilitant l’accès à ces ressources.
Articles liés à la Conférence :
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
