Comment les composants web ambitionnent de révolutionner les applications en ligne

Les composants web ne sont (encore) pas très connus de la communauté, pourtant ils représentent une avancée majeure dans la standardisation des interfaces web. À l’origine, HTML est un langage conçu pour créer des pages web, donc un réceptacle à textes, images et tableaux. Le W3C y a rapidement ajouté les formulaires en ligne pour offrir aux pages web un minimum d’interactivité. Après deux décennies de pratiques, HTML se révèle être une technologie robuste et mature pour la plupart des sites web (sites rédactionnels, portails, boutiques en ligne…), en revanche, les choses se compliquent dès qu’il est question d’applications en ligne. Si les dernières balises introduites dans HTML5 permettent de mieux structurer les contenus (je pense notamment aux balises Nav, Article, Footer ou Aside), rien n’a été prévu pour les applications. Il en résulte une utilisation anarchique de CSS et javascript pour pouvoir reproduire ce que nous connaissons dans les interfaces des logiciels.

code-mess
Le code source de Gmail, Facebook et Amazon

Pour couronner le tout, nous assistons à un authentique raz-de-marée des terminaux alternatifs (smartphones, tablettes, montres connectées…) qui complique encore plus les développements nécessaires pour assurer une bonne comptabilité d’une application en ligne. La promesse des web components est d’aider les développeurs à créer, distribuer et exploiter des composants réutilisables. Le terme exact est “encapsuler”, car l’idée est de fournir des composants prêts à l’emploi, un peu comme les players de YouTube ou Slideshare. Prenons l’analogie du secteur automobile : les constructeurs ne produisent pas 100% des voitures, elles s’appuient sur des équipementiers qui leur fournissent des composants standards pour les phares, les essuie-glaces… bref, des composants génériques qui accélèrent la mise sur le marché.

La révolution induite par les web components est de pouvoir grandement accélérer le développement d’applications en ligne multi-plateforme (desktop, laptop, tablette, smartphone…) en s’appuyant sur des composants génériques que l’on intègre avec une simple ligne de code. Certes, il existe de nombreuses librairies d’éléments d’interface comme jQuery UI, Sencha Ext JS ou Dojo (cf. Sencha lance une nouvelle version de GXT pour accélérer le développement d’applications web), mais elles sont lourdes à charger et pas nécessairement modulaires. La possibilité de n’encapsuler que les composants web de votre choix est un plus indéniable pour éviter d’avoir à charger plusieurs fichiers javascript volumineux.

Google est aujourd’hui le plus gros sponsor des web components, notamment à travers Polymer, le framework exploité sur la future nouvelle version d’Android (cf. Avec Polymer, Google veut faire d’Android une interface universelle). Chrome est ainsi le premier navigateur à être officiellement compatible avec les web components (depuis la version 26). Pour vous donner une idée de ce à quoi peut ressembler une application en ligne construite à partir de composants web, je vous incite à visiter les démos suivantes : Foodtrack, Caclulator ou Topeka.

Exemple d'interface de quizz réalisée avec les web components de Polymer
Exemple d’interface de quizz réalisée avec les web components de Polymer

Ceci étant dit, Google n’est pas le seul promoteur des composants web, puisque le W3C a commencé ses travaux de normalisation des Web Components en juillet dernier. Il existe aussi d’autres initiatives comme Bosonic ou celles lancées par Mozilla : X-Tag et surtout Brick qui vient d’annoncer sa V2 (Build better HTML5 UIs with Mozilla’s latest Brick library).

Exemple de menus exploitant un composant web de Mozilla
Exemple de menus exploitant un composant web de Mozilla

Il existe de nombreux articles décrivant les bases des composants web (An Introduction to Web Components and Polymer) et même un portail officieux (WebComponents.org) où l’on trouve tout une série d’articles et des présentations. Les composants web étant librement distribuables sur le web, vous imaginez que leur recensement peut poser problème. Heureusement il existe déjà des collections en ligne comme BuiltWithPolymer, CustomElements ou Component Kitchen (où l’on trouve de très belles choses comme l’interface Akyral).

Exemple de mise en page d'application en ligne réalisée avec les composant web
Exemple de mise en page d’application en ligne réalisée avec les composants web

Je sais bien que ce n’est pas la première fois que vous entendez parler d’une technologie révolutionnaire qui va transformer la façon de faire ci ou ça, mais je peux vous garantir que ces web components présentent le potentiel pour modifier de façon irrémédiable la façon dont sont codées les interfaces des applications en ligne. Nous aurons l’occasion d’en reparler…

Redfin propose la visite virtuelle en 3D des biens immobiliers

Le monde de l’immobilier a été secoué cet été avec l’annonce de la fusion des deux plus gros portails du secteur : Zillow and Trulia Merge to Disrupt the Real Estate Industry. Du coup, le troisième acteur se retrouve en position de fragilité… sauf qu’il a dégainé son arme secrète, la visite virtuelle des biens immobiliers : Redfin offers mobile homebuyers a 3D walk through properties. Certes, cette fonctionnalité est proposée depuis de nombreuses années, notamment par Previsite, pionnier en ce domaine, mais les récentes avancées technologiques en matière de scan 3D offrent un rendu de très grande qualité.

Cette visite virtuelle st pour le moment testée sur un petit nombre de biens immobiliers, dont cette maison avec vue sur un lac près de Seattle. Le chargement est un peu long, mais la restitution des intérieurs est très fidèle. De plus, contrairement à quicktimeVR, la visionneuse ne nécessite par de plugin.

La visite virtuelle en 3D proposée par Redfin
La visite virtuelle en 3D proposée par Redfin

La prise en main est immédiate et intuitive (ça ressemble à Google Street View), puisque la navigation se fait avec les flèches du clavier ou avec des marqueurs au sol que l’on peut choisir avec la souris. En promenant la souris sur l’interface, on se rend vite compte que les volumes sont parfaitement modélisés. La visionneuse propose également une vue de dessus ainsi qu’une “vue d’avion” baptisée dollhouse :

La vue générale d'un bine immobilier en 3D
La vue générale d’un bien immobilier en 3D

Le rendu de cette vue générale est perfectible, mais il donne une très bonne idée de la qualité de la captation et de l’assemblage des vues 3D.

La technologie derrière cette visionneuse 3D est fournie par Matterport, une jeune startup qui commercialise à la fois le scanner 3D et le service pour compiler et restituer les images : Matterport taking pre-orders for 3D interior mapping camera.

Le scanner 3D de Matterport
Le scanner 3D de Matterport

Commercialisée 4.500$, la caméra / scanner 3D de Matterport s’adresse exclusivement aux professionnels (dans tous secteurs, mais principalement dans l’immobilier avec leur offre Real Estate 3D Showcase). Cette caméra exploite les puces PrimeSense déjà utilisées dans le module Kinect de la Xbox, une technologie rachetée par Apple l’année dernière. Précisons que Matterport collabore avec d’autres géants du secteur informatique (Google, Intel…) pour décliner son service sur les terminaux mobiles afin de proposer une offre plus abordable : Matterport Brings 3D Capture to Mobile.

Les premiers retours sont visiblement très bons, puisque les biens immobiliers proposant une visite virtuelle 3D se vendent plus vite et en moyenne à un prix 8% plus élevé que des biens équivalents. J’imagine déjà la possibilité de visionner un appartement ou une maison avec un masque de réalité virtuelle… À quand un équivalent en France ?

Des expériences visuelles toujours plus sophistiquées avec HTML5

Saviez-vous que les dernières recommandations officielles du W3C concernant le langage HTML remontent au siècle dernier ? La version 4.01 des spécifications HTML date très exactement du 24 décembre 1999. Nous sommes en 2014, cela fait donc 15 ans que les technologies de présentation de pages web évoluent, mais que l’organisme de standardisation des technologies web piétine. Heureusement l’industrie s’est organisée pour pallier le retard, notamment à travers des initiatives conjointes comme WebPlatform.org.

Au cours des 15 dernières années, nous avons pu assister au triomphe de technologies propriétaires comme Flash, et à leur disparition avec la montée en puissance des terminaux mobiles. Rétrospectivement, il est amusant de constater que le discours d’Apple était d’exploiter les standards du web, alors qu’ils ne jurent plus maintenant que par leurs technologies propriétaires pour développer des applications (notamment le nouveau langage Swift). Heureusement, certains éditeurs militent pour faire valoir les qualités de HTML, notamment Adobe. Ironie du sort, les rôles se sont inversés !

Vous seriez extrêmement surpris de découvrir tout ce qu’il est possible de faire avec les dernières versions de HTML, CSS et javascript. Je vous propose dans ce cadre de découvrir la présentation de CJ Gammon qui compile les dernières innovations en matière de présentation et d’expériences visuelles : Rich Web Experiences.

-

Au programme de ces expériences visuelles :

  • Le masquage de certaines zones d’image avec ClipPath ;
  • Les masques CSS (statiques et dynamiques) ;
  • Les fonctions de mélange et de filtre CSS ;
  • La manipulation d’objets SVG et Canvas 2D ;
  • Les objets et représentations 3D avec WebGL et javascript ;
  • La manipulation de vidéos (masques, effets, transitions…) ;
  • La scénarisation de contenus avec CSS ;
  • Les moteurs de jeux en ligne ;
  • La communication en temps réel avec WebRTC…

Ces expériences sont très impressionnantes, par contre il vous faudra impérativement un navigateur moderne, et encore : aucun navigateur actuellement sur le marché ne permet d’afficher correctement tout ce qui est décrit dans la présentation. En jonglant entre Chrome, Safari et Firefox, vous pourrez néanmoins voir toutes ces expériences en “live”. Si l’une ou l’autre de ces technologies vous intéresse, je vous recommande de vérifier leur compatibilité sur le site CanIUse.

Idéalement, nous devrions attendre que ces techniques soient standardisées, mais nous avons maintenant un minimum de recul sur la lenteur du processus. L’important à retenir est que HTML5 est beaucoup plus sophistiqué qu’on ne le pense, notamment grâce à javascript et CSS3 (cf. A Map of the Best Animation Libraries for JavaScript and CSS3). Comme toujours, le meilleur moyen de s’en convaincre est de regarder du côté des jeux : Play a Microsoft-made HTML5 version of Settlers of Catan in your browser right now et Current state and the future of HTML5 games.

En synthèse : HTML n’est pas qu’un langage simpliste pour afficher des pages web, c’est une plateforme de développement pour pouvoir distribuer des contenus riches et des applications en ligne. Ceci est particulièrement pertinent en cette période où les usages des internautes migrent vers des terminaux mobiles propulsés par différents systèmes d’exploitation (iOS, Android, AOSP, Windows Phone, FirefoxOS, Tizen…).

(via CMSWire)

Les commentaires sont fermés

Avec Polymer, Google veut faire d’Android une interface universelle

Après de nombreuses rumeurs et fuites, Google vient enfin de lever le voile sur la future version de son système d’exploitation mobile : Android évolue vers les applications universelles et les objets connectés. Google ne cache donc plus son ambition de faire d’Android LE système d’exploitation universel, celui qui équipera les smartphones, tablettes, voitures, TV, consoles de jeu, objets connectés… Mais qui dit OS universel, dit forcément interface universelle, et c’est là où les choses se compliquent, car d’autres s’y sont cassé les dents (De la difficulté de concevoir une interface multi-terminaux). Sauf que les premiers éléments dévoilés nous laissent penser que cette tentative pourrait bien être la bonne…

Un nouveau langage visuel multi-terminaux

La preview de Android L n’est disponible que depuis quelques heures, mais l’on commence déjà à voir les premiers tests : Using Android L: a first look at Google’s future. Les premiers retours sont plutôt très bons, notamment en ce qui concerne la nouvelle charte graphique proposée par Google : This is material design. Plutôt que de “charte”, les équipes de Google préfèrent parler de “langage visuel”, car l’ambition est de proposer des concepts visuels qui puissent s’adapter aux différents terminaux actuels et à ceux qui restent à concevoir.

La nouveau langage visuel de Google pour Android
Le nouveau langage visuel de Google pour Android

Disponible sur Google.com/design, ce nouveau langage visuel est une réinterprétation du flat design, mais qui apporte des nouveautés non négligeables, son précédent nom de code était “Quantum Paper” (on en trouve d’ailleurs quelques références dans la documentation).

Material Design repose sur quatre grands principes :

  • Des couleurs vives pour maximiser le contraste et limiter la pollution visuelle ;
  • Des unités d’information sous forme de cartes (ou “widgets”) ;
  • Des ombres portées générées en temps réel, pour donner de la profondeur ;
  • Des animations et transitions très poussées pour donner plus de sens à chacune des actions (cf. Les transitions sont un élément essentiel des interfaces).

Force est de constater qu’il y a une nette amélioration au niveau de la lisibilité, et surtout dans l’aspect très aéré des interfaces : Comprendre le Material Design de Google.

Exemple d'interfaces Android utilisant le Material Design
Exemple d’interfaces Android utilisant le Material Design

Tout ceci est très agréable à regarder, particulièrement les transitions et autres animations qui sont un authentique régal pour l’oeil (ex : Meaninglful Transitions, Responsive Interaction, Delightful Details). Mais comme souvent, le plus intéressant se trouve sous le capot.

Un nouveau framework pour des composants d’interface modulaires

Google étant avant tout une entreprise technologique, cette vision de la nouvelle couche graphique d’Android s’accompagne d’outils pour les developpeurs, notamment avec l’adoption définitive de ART (“Android RunTime“), le nouveau moteur d’exécution qui était en test sur la version actuelle d’Android.

Mais il y a surtout Polymer, un framework permettant de créer très facilement des interfaces modulaires d’applications en ligne à l’aide de composants génériques baptisés elements. Dans le même esprit que d’autres frameworks comme Bootstrap ou Foundation, Polymer repose sur des balises propriétaires : HTML définit un certain nombre de composants génériques que l’on intègre avec des balises (ex : <select>), Ploymer fait de même avec ses propres balises (ex : <paper-button>) : Exploring Google’s Material Design with Polymer.

Exemples de composants d'interface généré par Polymer
Exemples de composants d’interface générés par Polymer

Cette approche permet de simplifier la prise en main et surtout d’uniformiser le rendu afin de transformer la promesse d’interfaces qui s’adaptent aux différents écrans (donc en responsive design) : Polymer give us a closer look at what might be in store for Material Design. En ce sens, Polymer ne s’adresse pas aux développeurs d’applications mobiles, mais plutôt à ceux qui veulent créer des applications en ligne qui pourront être utilisées sur n’importe quel terminal. donc oui, vous pourrez faire des web apps mobiles avec Polymer, mais l’ambition de Google est beaucoup plus forte.

Des interfaces adaptatives grâce à Polymer
Des interfaces adaptatives grâce à Polymer

Un certain nombre de documents et vidéos sont déjà disponibles, mais il faudra quelques semaines avant que la communauté ne puisse correctement s’approprier ce nouveau framework et en avoir une vision u peu plus critique. Google a donc de très grosses ambitions autour d’Android, il est donc tout à fait normal que ses équipes fournissent les outils à la communauté pour accélérer le processus d’adoption.

Vous noterez que la stratégie de Google est un mélange de celle d’Apple, qui vient de sortir son nouveau langage de développement (Swift) et de Microsoft qui a également présenté son principe de Universal Apps (cf. Microsoft lance les applications universelles pour smartphones, tablettes, ordinateurs et Xbox). Les feuilles de route des trois principaux acteurs de l’internet mobile convergent donc vers une vision très similaire : des applications universelles (qui peuvent être exécutées sur n’importe quel terminal) et des interfaces légères qui peuvent être facilement adaptées. Le problème est que tout ceci se fait à travers des technologies propriétaires. Certes, Polymer repose sur des technologies standards, mais cette tentative de passage en force de Google n’est pas sans rappeler ce que faisait Microsoft au début des années 2000 en cherchant à imposer ses propres balises pour Internet Explorer (cf. Going Native).

Très honnêtement je ne sais pas trop quoi en penser, car je ne peux que reconnaitre l’efficacité de ces interfaces. Mon coeur balance entre le souhait de vouloir respecter les standards du web, et de laisser les grands acteurs définir leur propre vitesse d’innovation. Il n’est ainsi pas inutile de rappeler que les spécifications de HTML n’ont quasiment pas évolué en 10 ans.

Au final, Google nous a livré une vision complète de la façon dont il veut faire évoluer son système d’exploitation (cf. Google prépare la révolution des interfaces Android). Il reste néanmoins des zones d’ombre, comme le fait de vouloir faire tourner des applications Android sur ChromeOS, alors qu’ils cherchent dans le même temps à faire tourner des applications ChromeOS sur Android (Google veut accélérer le développement des Chrome Apps). J’imagine que la logique derrière ça est de prouver que la frontière entre les deux systèmes d’exploitation de Google n’est pas si épaisse et que l’on peut facilement faire basculer son application de l’un à l’autre. Après un tel coup de projecteur sur Android, attendez-vous à une refonte majeure de ChromeOS dans les prochains mois, notamment pour adopter les codes graphiques du Material Design et que Polymer pour les interfaces des applications.

Trois expériences de lecture différentes pour Marseille, Guy Cotten et la BBC

Voilà plusieurs années que j’essaye de vous convaincre d’adopter de nouvelles techniques éditoriales (cf. HTML5 donne de la profondeur à la narration). Après des débuts plutôt timides, nous commençons à voir apparaitre des réalisations de plus en plus abouties pour émerveiller, faire passer des messages ou éduquer. Les dernières versions des navigateurs (Chrome, Firefox, Safari, IE…) étant capables de faire des prouesses en matière d’intégration multimédia, certains éditeurs audacieux sortent du lot et proposent des expériences toujours plus immersives.

C’est notamment le cas de la ville de Marseille qui a exploité le principe de Promenades Sonores avec l’aide de Google.

Le résultat est un mini-site qui utilise l’interface de Google Street View pour vous embarquer dans une découverte de la ville de nuit : Promenade Nocturne à Marseille.

L'interface de Promenade Nocturne à Marseille
L’interface de Promenade Nocturne à Marseille

Les internautes sont invités à suivre un parcours où chaque étape est illustrée d’une photo ou d’une vidéo, avec des commentaires audio qui vous guident tout du long. Une réalisation plutôt sobre qui laisse un maximum de place à la ville et aux contenus.

Dans un autre style, il y a Sortie en mer, un mini-site réalisé par la marque Guy Cotten pour faire de la prévention sur les dangers de la mer.

Ce mini-site vous met dans la peau d’un plaisancier qui tombe à l’eau et tente de survivre : il faut faire tourner la molette de la souris pour garder la tête hors de l’eau.

L'interface de Sortie en Mer
L’interface de Sortie en Mer

Avec une réalisation sans faille et une bande-son très réaliste, ce mini-site fait réellement froid dans le dos tant l’expérience est immersive. Encore une fois, la technique est au service d’un message fort et ça fonctionne parfaitement.

Terminons avec la BBC qui vient de lancer un ambitieux projet pédagogique sur la Première Guerre Mondiale : BBC WW1. Ce site se présente sous la forme d’un ensemble d’articles, images, portraits vidéos et témoignages pour expliquer le quotidien de la guerre. Bien évidemment, ce site est compatible avec les terminaux mobiles : New BBC interactive guides: responsive, dynamic and accessible web design.

Le portail de la BBC sur la Première Guerre Mondiale
Le portail de la BBC sur la Première Guerre Mondiale

Si la page d’accueil est plutôt décevante (elle n’apporte pas de réelle innovation), les guides interactifs sont par contre beaucoup plus intéressants avec une très belle construction verticale et un savant mélange d’images, vidéos et infographies, comme ici avec ce guide sur la guerre dans les tunnels.

Exemple de guide interactif de la BBC
Exemple de guide interactif de la BBC

En creusant un peu, j’ai découvert que ce guide interactif est en fait un nouveau format utilisé à d’autres endroits sur le portail. Baptisée iWonder, cette initiative a pour objectif de valoriser les contenus de la BBC et da délivrer de la connaissance dans un format plus moderne et adapté aux nouveaux modes de consommation de l’information : BBC iWonder, Introducing Interactive Guides.

Les guides interactifs de la BBC
Les guides interactifs de la BBC

En fouillant dans les archives, vous allez ainsi trouver différents guides comme celui-ci sur la médiation des moines bouddhistes : Why do Buddhists meditate?.

Comme vous le voyez, nous avons ici trois dispositifs répondant à des objectifs très différents (séduire, alerter, valoriser) mais qui utilisent des techniques de présentation avancées pour améliorer l’expérience de lecture et maximiser l’impact. Mission réussie, on en redemande !

Les commentaires sont fermés

Microsoft lance les applications universelles pour smartphones, tablettes, ordinateurs et Xbox

La semaine dernière, Microsoft a réunissait tout le gratin de l’écosystème IT pour sa conférence annuelle Build. Même si les conférences annuelles de Microsoft ne font pas autant de bruit que les événements d’Apple, Google ou même SalesForce, la firme de Redmond a présenté des nouveautés tout à fait intéressantes :

Comme vous pouvez le constater, cette édition 2014 a été très riche en annonces, elle coïncide également avec la première grosse sortie publique du nouveau CEO (Satya Nadella engage la transformation de Microsoft). Cerise sur le gâteau, les équipes de Microsoft ont présenté un principe d’application universelle : Microsoft’s new universal Windows apps run everywhere, from phones to the Xbox One.

Exemple d'application universelle pour Windows
Exemple d’application universelle pour Windows

Les Universal Windows Apps sont des applications capables de tourner sous Windows et Windows Phone, donc sur les smartphones, tablettes, ordinateurs, la Xbox One. Est-ce un miracle ? Non pas réellement, car l’environnement de développement Visual Studio ne vous permet “que” de créer avec un pacquage avec deux versions d’une même application partageant des sources. Autant le dire tout de suite : je suis terriblement injuste vis-à-vis du travail titanesque réalisé par les équipes de Microsoft pour rapprocher ses deux systèmes d’exploitation. Dans les faits, Windows et Windows Phone sont BEAUCOUP plus proches l’un de l’autre que ne peuvent l’être iOS et Mac OS ou Chrome OS et Android.

Tout l’intérêt des Universal Apps est de factoriser un maximum de chose (on nous annonce 90% de code commun entre deux versions d’une application) et de faire gagner du temps aux développeurs, notamment au niveau de l’interface qui devra être adaptée à chaque terminal (Visual Studio 2013 Update 2 RC: Windows Phone 8.1 Tools, Shared).

Adaptation des interfaces des Universal Apps
Adaptation des interfaces des Universal Apps

Il n’y a pas encore de date de fusion entre les deux places de marché d’application (Windows Store et Windows Phone Store), mais on se doute bien de leur objectif à terme. Dans cette optique, je pense ne pas me tromper en disant que Microsoft a pris une grosse longueur d’avance sur Apple ou Google, même si ce dernier semble opter pour une approche différente avec les packaged apps (20 ans d’évolution des IHM web).

Vous noterez que Microsoft n’est pas le seul à se lancer dans ce chalenge (Ubuntu relève le défi du système d’exploitation universel). La société Canonical avait annoncé l’année dernière le lancement d’un OS unique pour tous les terminaux, mais ce projet ne fait plus trop parler de lui…

Le projet de système d'exploitation universel de Ubuntu
Le projet de système d’exploitation universel de Ubuntu

Microsoft fournit donc des efforts considérables pour améliorer l’hétérogénéité de son parc d’utilisateurs, une très bonne chose, d’autant plus qu’ils sont durs à bouger (plus d’1/4 des ordinateurs de la planète tournent encore sous Windows XP : Attention, Windows XP holdouts: The end is near). Mais ne vous y trompez pas : le véritable enjeu n’est pas de fournir des applications universelles, mais des services universels (ou des contenus universels). La bataille ne se situe donc pas réellement au niveau des systèmes d’exploitation, mais plutôt dans les nuages : This Chart From IBM Explains Why Cloud Computing Is Such A Game-Changer. Ceci explique sûrement la nouvelle orientation de Microsoft et la réorganisation interne (Scott Guthrie is officially the top cloud guy at Microsoft). En misant sur le cloud computing, Microsoft espère reprendre l’initiative sur les nouveaux terminaux (Microsoft veut apporter ses tuiles Windows dans le tableau de bord de votre voiture) et surtout sur l’internet des objets qui force les éditeurs à intégralement revoir leur approche de l’outil informatique.

De la 3D encore plus performante dans votre navigateur grâce à WebGL et WebCL

L’année dernière, Mozilla avait fait sensation en annonçant le portage du moteur Unreal dans son navigateur : Des jeux en 3D toujours plus performants avec HTML5. Précisons que Unreal Engine est un moteur graphique permettant de faire de la 3D, principalement utilise dans des jeux sur PC ou consoles. Ce moteur 3D avait déjà été porté dans Flash (pour faire de la 3D en utilisant le même environnement de création de contenus 3D), et il a ensuite été “traduit” en javascript pour pouvoir tourner de façon native dans un navigateur, en l’occurrence Firefox.

Rebelote cette semaine avec le portage de la dernière version du moteur : Mozilla and Epic Preview Unreal Engine 4 Running in Firefox. En moins de 12 mois, les équipes de Mozilla ont été capables d’améliorer de 40% les performances de asm.js, un sous-ensemble de Javascript, plus facile à optimiser. Les contenus 3D (animations, jeux…) créés pour le moteur Unreal 4 peuvent maintenant être affichés nativement dans votre navigateur grâce à asm.js, qui exploite lui-même WebGL, dont nous avons déjà parlé il y a quelques années : WebGL, le nouveau standard de la 3D sur le web.

Le résultat est visuellement très impressionnant et va permettre aux développeurs de jeux de toucher une cible beaucoup plus large. Pour se faire, ils viennent tout juste de proposer un nouveau modèle de licence pour rendre son moteur plus accessible : Epic Games Tries Something New, Licenses All Of Unreal Engine 4 For $19 A Month.

Le lendemain de cette annonce, Unity3D annonce à son tour que la prochaine version de son moteur de rendu 3D pourra être exécutée dans un navigateur : Mozilla and Unity Bring Unity Game Engine to WebGL. Les mêmes technologies seront utilisées (asm.js et WebGL) pour “traduire” le moteur 3D, mais celui-ci sera toujours disponible sous forme de plug-in.

Le but de ces annonces est de séduire le plus grand nombre de développeurs pour qu’ils adoptent  l’un ou l’autre de ces moteurs 3D dans leurs prochaines réalisations (jeux ou applications). Le fait de proposer une exécution native dans les navigateurs (Firefox ou Chrome) est un plus indéniable pour séduire le plus grand nombre de joueurs sans leur imposer l’installation d’un plug-in. Si le moteur d’Unreal est reconnu pour sa sophistication, le moteur de Unity est plus simple et largement utilisé par les développeurs de jeux mobiles qui y voient un moyen de faciliter la distribution de leurs jeux : Unity 5.0 announced, with direct-to-web, plugin-free publishing.

Et comme si ça ne suffisait pas, le Khronos Group vient d’annoncer la sortie de nouvelles spécifications et versions de spécifications précédentes : Khronos Releases Wave of New Standards and Initiatives for 3D Graphics, Heterogeneous Computing and API Interop. Pour vous résumer une longue explication, Le Khronos Group est un consortium en charge des spécifications de nombreuses normes en matière de 3D, notamment OpenGL (pour que des applications puissent exploiter la puce graphique) et OpenCL (pour que des applications puissent faire des calculs en parallèle sur le processeur ou la puce graphique). Le Khronos Group est notamment à l’initiative de WebGL, l’équivalent d’OpenGL pour les navigateurs et de la toute nouvelle WebCL, une APIs qui permet aux navigateurs d’utiliser le processeur pour faire des calculs parallèles : Khronos publishes a range of specs to take GPU computing to the Web et WebCL Will Soon Let Web Developers Harness The Power Of Multi-Core GPUs And CPUs From The Browser.

Traduction : l’industrie se mobilise pour que les navigateurs soient capables d’afficher de la 3D de façon aussi performante que les applications. Ceci étant valable pour les navigateurs sur votre ordinateur, mais également sur votre smarpthone ou tablette. Illustration avec cette vidéo de démonstration de WebCL par Samsung :

Toutes ces nouvelles spécifications et portages convergent vers un seul objectif : démocratiser la 3D et la rendre accessible au plus grand nombre au travers des navigateurs web, quel que soit le terminal utilisé. Qui s’en plaindra ?

Les commentaires sont fermés

Adobe et Google en désaccord sur les techniques de mise en page avancée

Saviez-vous que les feuilles de styles (Cascading Style Sheets en anglais) ont été lancées en 1997 ? La normalisation de cette technologie par le W3C a permis de dissocier la présentation du contenu et sortir le web design de l’âge de pierre. L’intérêt des feuilles de style a notamment été démontré avec des initiatives communautaires comme le CSS Zen Garden. Mais les choses se sont vraiment accélérées avec l’arrivée de la troisième version des feuilles de styles (CSS3) qui permettent notamment de faire des transitions, des arrondis, ombres protées et surtout de choisir sa propre police (CSS @ Ten: The Next Big Thing).

Les dernières évolutions en date concernent la possibilité de définir des formes pour des éléments (Creating Non-Rectangular Layouts with CSS Shapes et Animating CSS Shapes with CSS Animations & Transitions) et de définir des conteneurs pour figer une mise en page (Killer Responsive Layouts With CSS Regions).

Pouvoir faire des mises en page aussi sophistiquée et rigoureuse que sur les magazines est un vieux rêve pour nombreux designeurs. Adobe a toujours été moteur pour promouvoir les techniques avancées de mise en page, notamment avec sa politique de soutien. Ils sont donc naturellement aujourd’hui les plus gros promoteurs des CSS Shapes et CSS Regions. Ils ont à ce sujet présenté une très belle démonstration technique, Alice in Wonderland, faisant un usage malin de ces techniques de mise en page pour scénariser le texte.

Alice in Wonderland réalisé avec les CSS Regions
Alice in Wonderland réalisé avec les CSS Regions

Le résultat est tout simplement bluffant, mais nécessite un navigateur très récent et une petite manipulation : Using CSS Shapes to  Enhance Visual Storytelling. Cette réalisation est d’autant plus intéressante qu’elle vient d’un studio français (Alice au Pays d’Adobe, un conte interactif). Tous les détails techniques sont ici : Cutting edge web development with CSS Shapes and CSS Regions

Il est important de préciser que cette réalisation est une étape très importante dans le travail de lobbying mené par Adobe pour faire accepter ces spécifications par le W3C (Adobe issues CSS Web publishing prototype et CSS3 regions: Rich page layout with HTML and CSS3).

CSS-Regions-1

Le problème est que, dans leur philosophie, les CSS Regions sont en désaccord avec la notion essentielle de flux de contenu (en contraignant des portions de contenu dans des zones particulières, vous figez la page). Håkon Wium Lie, l’inventeur des CSS et directeur technique de Opera, a ainsi publié un long article pour en dénoncer les limitations : CSS Regions Considered Harmful. Ses principaux arguments sont les suivants : les CSS Regions alourdissent le code avec des balises de présentation (le retour des DIVs) et perturbent le défilement naturel du texte.

Confusing-text-flow

Ne vous y trompez pas : l’auteur n’est pas hermétique au changement, il craint seulement que ces nouvelles propriétés CSS soient utilisées à tort et nous renvoient à une époque sombre où les bidouillages de mise en page étaient légion. Du coup, d’autres designeurs argumentent à leur tour en faveur des CSS Regions et plaident pour une plus grande liberté de choix dans les possibilités de mise en page : CSS Regions Matter.

Je dois bien vous avouer avoir beaucoup de mal à me faire un avis tranché sur la question : d’un côté je suis un grand fan de la scénarisation des contenus (HTML5 donne de la profondeur à la narration) ; d’un autre côté, il nous faut IMPÉRATIVEMENT simplifier et normaliser la syntaxe des pages HTML pour en faciliter la diffusion sur les terminaux alternatifs.

Coup de théâtre le mois dernier, car Google vient d’annoncer que les CSS Regions ne seront pas supportées par le moteur de rendu de Chrome : Google plans to dump Adobe CSS tech to make Blink fast, not rich. Pour mémoire, les navigateurs utilisent tous des moteurs de rendu différents pour interpréter le code HTML / CSS et afficher les pages web (Blink pour Chrome, Webkit pour Safari, Gecko pour Firefox…). Chrome étant un des navigateurs les plus populaires, c’est donc un très gros coup dur pour les CSS Regions. La raison invoquée par Google est qu’ils ne veulent pas sacrifier les performances de leur moteur de rendu.

Ceci étant dit, l’histoire de l’évolution des technologies web est ponctuée de revers de ce style. Les CSS Regions ne sont donc pas enterrées, mais leurs spécifications vont très certainement être revues et discutées jusqu’à être acceptées par les différents éditeurs de navigateur.

Affaire à suivre…

Microsoft cherche à relancer son navigateur en misant sur les tablettes

Voilà de nombreuses années que Microsoft cherche à limiter l’érosion des parts de marché de son navigateur Internet Explorer. Il faut dire que ce dernier a pris un terrible coup de vieux ces dernières années avec l’ascension fulgurante de Chrome et Firefox, sans compter les bonnes performances de Safari et Opera. Pour cela, ils ont régulièrement organisé des campagnes et réalisé des démos techniques pour tenter de prouver au grand public que IE n’était pas le vilain petit canard que l’on croyait (La guerre des navigateurs relancée par Microsoft), jusqu’à la récente campagne The Browser You Love to Hate. Cette année, nous avons droit à une approche différente avec une campagne ambitieuse : Internet Explorer Invites You to Rethink What the Web Can Be.

Avec RethinkIE, les équipes de Microsoft ont mis le paquet pour assurer la promotion de la version 11, mais le positionnement est différent : (“It’s a new browser, it might surprise you“) : Regardless of what you think of IE, Microsoft wants you to Rethink IE. Ils ne communiquent ainsi plus du tout sur les performances techniques, mais sur d’autres arguments :

  • Une expérience différenciante sur les tablettes avec de la navigation en plein écran ;
  • Du multitâche (ex : Skype dans un onglet pendant que l’on surfe sur un autre) ;
  • Un mode “lecture à l’écran” (déjà présent sur Safari et Opera il me semble) ;
  • La possibilité d’épingler des sites ou pages sur l’écran d’accueil de Windows…

Comme il faut un minimum épater la galerie, cette nouvelle campagne s’appuie sur plusieurs réalisations très spectaculaires pour démontrer les capacités techniques de cette 11e version :

  • Red Bull Rampage 2013, un mini-site mêlant contenus vidéo et interactivité ;

    L'interface de Red Bull Rampage 2013
    L’interface de Red Bull Rampage 2013
  • GlacierWorks, un autre mini-site pour partir à la découverte de l’Everest, avec de très beaux panoramas en plein écran ;

    L'interface de Glacier Works
    L’interface de Glacier Works
  • Contre Jour, l’adaptation du célèbre jeu pour tablette ;
  • Hover, l’adaptation d’un autre jeu mythique, dans la lignée de Atari Arcade ;

    L'interface de Hover, façon retro gaming
    L’interface de Hover, façon retro gaming
  • Just a Friend, qui mélange musique et expériences visuelles.

Tout ceci est très réjouissant et surtout très bien exécuté. Mais le problème est de parvenir à reconquérir la confiance des développeurs. Pour cela, les équipes ont lancé l’initiative Modern.ie l’année dernière, sur laquelle on retrouve des explications sur les réalisations précitées (Behind the Scene) : Saving Developers over 1 Million Hours: Celebrating the 1 Year Anniversary of modern.IE.

Je ne me prononcerais pas sur les qualités de cette onzième version puisque je ne peux pas l’installer, mais je crois savoir qu’elle apporte entière satisfaction aux possesseurs de tablettes Windows que j’ai pu interroger. Je ne peux que saluer les efforts fournis par Microsoft pour ne pas se laisser distancer. Il faut dire que la tâche est rude, surtout avec les nombreuses annonces de la concurrence (Mozilla’s major user interface overhaul Australis lands in Firefox Nightly et Chrome + LEGO: You can build whatever you like).

Que le meilleur gagne !

20 ans d’évolution des IHM web

En 15 ans, le web a complètement modifié notre façon d’accéder et de consommer l’information. Le web est maintenant une composante essentielle de notre quotidien : biens dématérialisés, services en ligne, formation et éducation, jeux en ligne, objets connectés… Je pense ne pas me tromper en disant que le web a façonné la société dans laquelle nous vivons : transparence absolue, peur du micro-ennuie, hyper-individualisme avec la mode des selfies… 15 années très riches, et un nombre incalculable d’innovations technologiques. Je vous propose à travers cet article de faire le point sur l’évolution des technologies liées aux interfaces web.

Dans sa définition la plus stricte, une interface est la couche entre deux éléments par laquelle ont lieu des échanges et des interactions. Dans le cas de l’internet, les interfaces web sont donc la couche permettant aux utilisateurs de consommer et d’interagir avec les nombreux contenus et services en ligne. Nous allons donc passer en revue les différentes technologies d’interface web, étudier leur évolution et constater la façon dont les grands éditeurs essayent encore et toujours de ramener la couverture à eux.

Des sites web aux rich desktop applications

Aux origines du web, les contenus et services n’étaient disponibles qu’à travers les pages HTML : du texte, des tableaux, des images et des formulaires. Mais au fil du temps, les choses se sont compliquées : Panorama des IHM connectés.

Evolution_IHM-1

Si le navigateur était l’interface de référence entre les contenus et les internautes, différentes technologies ont été successivement exploitées pour enrichir l’expérience :

  • Les applets Java pour faire les premières applications en ligne ;
  • Les plugins comme Flash et Silverlight pour faire des Rich Internet Applications ;
  • Les moteurs de widget pour pouvoir diffuser du contenu directement sur le bureau ;
  • Les machines virtuelles comme AIR pour faire tourner des Rich Desktop Applications.

Tout ceci peut vous sembler complètement superflu, mais souvenez-vous qu’à cette époque le W3C souffrait d’une crise interne et que les spécifications de HTML faisaient du sur-place. D’où l’émergence de nombreuses technologies d’interfaces riches pour pouvoir étendre les possibilités du HTML et proposer des modalités d’affichage et d’interaction plus sophistiquées (3D, drag&drop…).

Très clairement cette première décennie de l’histoire des interfaces web a été dominée par Adobe et ses deux technologies phares (Flash et AIR). Puis Apple a lancé son iPhone, et le marché s’est complètement retourné.

Des applications mobiles aux applications packagées

C’est en début d’année 2007 que Steve Jobs a présenté pour la première fois son iPhone. Nous étions très loin de nous douter à l’époque de la révolution que cela allait engendrer, d’autant plus que dans sa première version, il n’y avait pas d’App Store, d’ailleurs ils n’envisageaient pas à l’époque d’ouvrir leur smartphone à des éditeurs externes d’applications. Et pourtant… avec la version 2 et surtout la version 3 du système d’exploitation de l’iPhone, les applications mobiles vont connaitre un succès phénoménal : même si les contenus et les services étaient les mêmes, le fait de les consommer à travers une interface tactile en situation de mobilité a poussé les mobinautes à s’enfermer dans la logique des applications.

Evolution_IHM-2

Loin de moi l’idée de refaire l’histoire, mais les applications mobiles sont à la fois la meilleure et la pire chose qui a pu arriver au web : la meilleure, car cela a permis de démocratiser les interfaces tactiles et de donner un second souffle créatif aux designers ; la pire, car cet écosystème fermé d’applications va à l’encontre du principe d’ouverture et d’universalité du web. C’est d’ailleurs pour protéger son monopole qu’Apple est entré en guerre avec Adobe pour empêcher aux applications Flash de détourner les revenus provenant de son app store. Mais dans une certaine mesure, la volonté d’Apple de diaboliser Flash pour protéger ses revenus a fortement contribué au succès d’HTML5. La montée en puissance de navigateurs alternatifs comme Chrome et Firefox, combinée à un fort enthousiasme autour du renouveau d’HTML a permis de viabiliser l’exploitation à très grande échelle d’applications web comme Gmail, Twitter ou encore SalesForce. Si aujourd’hui, il ne vous venait plus à l’idée d’installer un logiciel pour consulter vos emails ou pour interagir avec vos amis ou collègues, sachez qu’à une époque pas si lointaine le débat faisait rage.

Avec la montée en puissance d’Android, de Windows Phone, et plus généralement la fragmentation des terminaux mobiles, certains éditeurs de contenus et service se sont rapidement rendu compte qu’éditer des applications natives n’était pas forcément une stratégie rentable. Ils se sont tournés vers des frameworks de développement multi-plateforme comme Phonegap, Titanium ou Sencha pour faire des applications hybrides : des contenus et services HTML encapsulés dans une application native. Aujourd’hui le débat entre applications mobiles natives, hybrides ou HTML est toujours actif (Le choix se complique entre application mobile et application HTML5), d’autant plus que l’on a maintenant un minimum de recul sur les mises en page adaptatives (Le Responsive Web Design n’est pas une solution, c’est un compromis).

Personne ne peut nier le rôle primordial de l’iPhone et l’iPad dans l’évolution radicale des usages autour des interfaces. Mais pendant ce temps là, d’autres préparaient leur contre-attaque, à commencer par Adobe qui s’est repositionner en un temps record sur les technologies standards (cf. Adobe & HTML) et qui a même lancé une suite complète d’outils de développement HTML5.

De même, Google a patiemment conçu et perfectionné les différentes pièces d’un plan dont on commence seulement à deviner les contours : ils ont commencé par populariser le navigateur Chrome en utilisant des briques logicielles communes à d’autres produits, dont le moteur de rendu Webkit. Puis ils ont adopté leur propre moteur de rendu HTML (Blink) et ont implémenté la technologie NaCl pour pouvoir exécuter des applications C++ (L’adoption de NativeClient passera par les jeux… et la bureautique). Plus récemment, ils ont commencé à faire la promotion des Chrome Apps, des applications HTML pouvant tourner en mode déconnecté avec Chrome ou ChromeOS (Google transforme son navigateur en environnement d’exécution avec les Chrome Apps). Les choses se sont accélérées tout dernièrement avec l’annonce d’un environnement de développement dédié et le portage des Chrome Apps sur iOS (Google veut accélérer le développement des Chrome Apps). En quelques années, Google s’est imposé comme l’acteur principal du renouveau des interfaces web, aussi bien sur les ordinateurs (avec les applications packagées) que sur les terminaux mobiles (Google prépare la révolution des interfaces Android).

Nous sommes quasiment à la fin de cette seconde décennie et nous y voyons maintenant beaucoup plus clair dans les plans de Google : s’appuyer sur les technologies standards (HTML, javascript…) pour généraliser ses environnements d’exécution (Chrome, ChromeOs et Android). Tout ceci n’est pas sans rappeler les manoeuvres de Microsoft ou Adobe, mais force est de constater que nous allons tout de même vers plus de simplicité et de performance pour les utilisateurs finaux (le fait de pouvoir éditer des documents Office directement dans Chrome avec QuickOffice est quand même un grand plus).

Voilà où nous en sommes en ce début d’année 2014. Vous constaterez que malgré une domination écrasante de son système d’exploitation, Microsoft n’est jamais réellement parvenu à prendre le leadership sur les interfaces web et à imposer ses technologies (le flop de Silverlight est un bel exemple). Il est pour le moment très difficile de prédire l’avenir, mais je suis persuadé que les choses ne vont pas beaucoup bouger : la communauté des développeurs va se détourner des plugins et s’orienter à nouveau vers HTML, que ce soit pour scénariser du contenu, perfectionner des applications en ligne ou se réapproprier les terminaux mobiles. Ceci fera l’objet d’un prochain article…