Le web est mort, vive le web

Dans le monde de l’édition, les thèmes récurrents que l’on nous ressort tous les ans sont appelés des marronniers (ex : les prix de l’immobilier, le salaire des cadres…). Dans le monde de l’internet, nous avons aussi nos marronniers :  machin-truc est le nouveau Google, les jeunes abandonnent Facebook, le virus truc-chose menace 20% des sites web de la planète… Mais la palme revient à un sujet que l’on nous ressort de plus en plus en ce moment : le web est mort.

À l’origine de cette affirmation, il y a un article publié par le magazine Wired en 2010 : The Web Is Dead. Long Live the Internet. L’auteur nous expliquait qu’avec la montée en puissance de la vidéo et du P2P, le web « traditionnel » (les pages HTML) était en voie d’extinction. Plus récemment, on nous ressort à peu près la même conclusion (les pages HTML sont condamnées), mais avec une argumentation reposant sur la montée en puissance des smartphones et la suprématie des applications mobilesThe Web Is Dying, Apps Are Killing It. J’ai déjà eu de nombreuses occasions de m’exprimer à ce sujet (En finir avec le débat application vs. site mobile et Les applications mobiles coûtent trop cher, misez plutôt sur le web) et j’espère vous avoir convaincu de l’ineptie de cette affirmation (Les applications mobiles sont des outils de fidélisation, pas de conquête).

Pour clore ce débat (qui n’aurait jamais dû être ouvert), je vous invite à découvrir cet article publié chez O’Reilly : Web by default, you’re using the web even when you don’t think you are. L’auteur y explique que les applications mobiles reposent en grande partie sur des technologies web pour transporter des données et pour afficher des contenus, notamment avec les webviews (Hybrid Mobile Apps: Providing A Native Experience With Web Technologies). Ceci est également expliqué dans un autre article publié sur RWW : HTML5’s Dirty Little Secret: It’s Already Everywhere, Even In Mobile.

Je pense ne pas me tromper en disant que le but initial des applications natives n’a jamais été de remplacer le web ou les pages HTML, mais de permettre à Apple de sécuriser ses revenus, à savoir les commissions qu’ils touchent chaque fois qu’un utilisateur d’iPhone télécharge une application payante sur iTunes. Certes, il y a le cas particulier des jeux mobiles, où la recherche de performances justifie pleinement l’emploi de technologies natives. Mais à part cette exception, l’utilisation de technologies natives est un choix contestable : c’est comme si vous développiez un logiciel que les utilisateurs devraient installer sur leur ordinateur pou consulter votre contenu ou accéder à vos services. Les navigateurs de « nouvelle génération » sont justement conçus pour leur permettre de le faire dans de très bonnes conditions. L’auteur de l’article résume assez bien la situation en disant que le web est comme une plateforme pour les données : les applications mobiles ne sont que des interfaces, les middle office et back office sont encore motorisés par des technologies web.

Ceci étant dit, nous en revenons au sempiternel débat sur les applications natives en tant que substituts aux interfaces web. Là encore, l’auteur apporte des éléments de réponse en précisant que HTML autorise l’accès à des technologies qui évoluent très rapidement et se révèlent de plus en plus intéressantes. Les interfaces web offrent maintenant :

Comme vous l’aurez compris, je peux difficilement cacher mon attachement aux technologies web, car elles sont garantes de contenus et services universellement accessibles. Dans le doute, misez toujours sur le web. C’est d’ailleurs ce raisonnement que les équipes de WhatsApp ont dû suivre, car elles préparent visiblement une version web du service : WhatsApp Might Be Working On A Web Version Of Its Popular Messaging App.

Bien sûr il existera toujours des cas particuliers ou des contre-exemples, mais je reste persuadé que non, le web n’est pas en train de mourir. Au contraire, il évolue plus vite qu’il ne l’a jamais fait auparavant.

HTML5 est enfin officialisé, l’avenir du web ouvert n’est pas assuré pour autant

Saviez-vous que le web avait fêté ses 25 ans en août dernier ? C’est en effet le 19 août 1989 que Tim Berners-Lee a publié le code source du World Wide Web (cf. Web @ 25). Durant cette période le web a connu de nombreuses évolutions, notamment au niveau des technologies utilisées pour afficher des contenus et services (20 ans d’évolution des IHM web), la dernière en date étant la publication des recommandations officielles de la dernière version du langage HTML : Open Web Platform Milestone Achieved with HTML5 Recommendation.

Concrètement, cela veut dire que l’organisme de standardisation du web recommande aux éditeurs de navigateurs, de contenus et services en ligne, et plus généralement aux développeurs du monde entier d’utiliser les spécifications de HTML5. Ça peut vous sembler insignifiant, mais cette certification est la résultante d’un accouchement douloureux (HTML5: Don’t Believe the Hype Cycle) et d’une lutte épique entre les grands acteurs du web (W3C and WHATWG finalize split on HTML5 spec). L’enjeu de cette lutte est de s’assurer que le web repose sur des standards ouverts et que des éditeurs privés n’imposent pas de technologies propriétaires. Vous souvenez-vous des icônes « Site optimisé pour Internet Explorer 6 » ? C’est pour éviter que cette situation se reproduise que les grands acteurs du web s’affrontent, notamment autour des smartphones et terminaux mobiles.

Non-standardisation de l’internet mobile : Apple est à la fois le problème et la solution

Autant le dire tout de suite : la situation est critique, car la majeure partie de nos usages mobiles se font à travers des applications mobiles reposant sur des technologies propriétaires. La faute à Apple qui au lancement de son iPhone avait diabolisé Flash, mais ne s’est pas gêné pour imposer ses technologies propriétaires afin de verrouiller ses revenus. Tout ceci partait d’une bonne intention (uniformiser l’expérience utilisateur et s’assurer que tout le monde touche ce qu’il est censé toucher), sauf que le « modèle iPhone » a été mal interprété et que nous nous retrouvons dans une situation insensée où les éditeurs utilisent des technologies propriétaires pour afficher du contenu web sur un smarpthone.

L’objectif de HTML5 était de faire évoluer les spécifications des langages HTML, CSS et javascript pour mieux correspondre aux contraintes des éditeurs de contenus et services (structure plus rigoureuse des pages, adaptabilité aux terminaux mobiles…). Il en résulte, entre autres, un certain nombre de nouvelles balises sémantiques (HEADER, NAV, ARTICLE, SECTION, ASIDE, FOOTER) et des balises permettant de mieux intégrer des éléments multimédias (VIDEO, AUDIO, CANVAS…). Pour mieux comprendre ces évolutions, je vous recommande les sites Dive Into HTML5, HTML5 CSS3 pense bête ou encore l’article HTML5, CSS3, les principales nouveautés.

Les balises sémantiques de HTML5
Les balises sémantiques de HTML5

Les nouvelles versions de HTML et CSS ont ouvert de nombreuses possibilités d’affichage et d’animation, rendant ainsi obsolète des technologies propriétaires comme Flash. De ce point de vue là, Apple a remporté sa bataille. En revanche, si HTML5 apporte des solutions concrètes pour faciliter le travaille des développeurs de contenus multi-plateformes (How a new HTML element will make the Web faster), ou pour la gestion de contenus 3D ou d’interactions en temps réel (avec WebGL et Web-RTC), cela ne règle pas le problème des applications mobiles natives. De ce point de vue là, Apple est largement fautif, et je mets au défis quiconque de prouver le contraire.

Tout le monde milite pour les standards, surtout les leurs !

Je pense ne pas me tromper en disant que HTML5 est maintenant reconnu comme LE standard pour créer des contenus riches en ligne (HTML5 donne de la profondeur à la narration). Si les contenus sont standardisés, qu’en est-il des applications en ligne et des conversations ? Le problème est qu’avec l’avènement des smartphones et des usages communautaires / sociaux, le web est petit à petit en train de se morceler. Nous assistons ainsi à la prolifération de plateformes fermées (ex : Facebook, WhatsApp, Snapchat…) qui remettent en question l’universalité du web.

Pour lutter contre ce phénomène de balkanisation du web, le W3C milite pour une Open Web Platform où les technologies standardisées et ouvertes offriraient une alternative crédible aux technologies propriétaires. Le problème est que la standardisation est un processus très long, trop long pour le marché qui ne voit pas forcément le danger d’utiliser des technologies propriétaires de temps en temps (HTML5 is done, but two groups still wrestle over Web’s future).

Officiellement, tous les grands acteurs du web supportent à 100% les standards du web : Apple Shows Love for HTML5 with iOS 8Google’s HTML5 Web Designer Gets Animation Tools, Deeper AdWords And DoubleClick IntegrationsPlay a Microsoft-made HTML5 version of Settlers of Catan in your browser right nowMozilla Launches Built-In HTML5 App Development Environment For Firefox… Le souci est que chacun a sa propre interprétation de la limite entre avoir recours à des technologies propriétaires et adapter les standards aux impératifs de performance du marché. Les nombreuses solutions de développement mobile hybrides en sont un bon exemple (cf. Hybrid Mobile Apps: Providing A Native Experience With Web Technologies). Autre illustration flagrante de l’ambiguïté des grands acteurs du web, les dernières innovations proposées par Google : Google veut accélérer le développement des Chrome Apps et Comment les composants web ambitionnent de révolutionner les applications en ligne.

C’est pour éviter que ces solutions s’imposent comme des standards de fait que le W3C a lancé une série de grands chantiers d’amélioration des technologies standards pour créer des applications en ligne : Application Foundations for the Open Platform.

Les prochains chantiers du W3C
Les grands chantiers du W3C pour les prochaines années

Vous aurez donc compris que la principale mission du W3C est de s’assurer que le web reste une plateforme ouverte et universelle, que des éditeurs privés utilisant des technologies propriétaires ne prennent pas trop d’importance (cf. Le Dark Social complique la tâche des annonceurs). Au final, le plus grand danger ne vient pas forcément d’éditeurs comme Google, mais de la négligence des utilisateurs qui se laissent enfermer dans des environnements fermés comme iTunes, WeChat ou Salesforce. L’avenir du web ne repose pas que sur le W3C, il en va de la responsabilité de chaque utilisateur de ne pas accepter aveuglément des CGU qui les verrouillent dans un écosystème propriétaire. Toute la difficulté est que la frontière entre « ouvert » et « priopriétaire » est poreuse, et que ces subtilités importent peu au grand public.

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…