Création d'applications HTML5

Utilisation de HTML5 pour créer des expériences mobiles

Brandon Satrom

Télécharger l'exemple de code

Le mois dernier, je vous ai présenté les requêtes de média CSS3 (msdn.microsoft.com/magazine/hh882445), un nouveau module qui vous permet d'adapter des styles de pages selon des règles conditionnelles. Bien que les requêtes de média soient largement applicables dans l'éventail des appareils, elles sont souvent mentionnées dans le contexte de la création de sites et applications mobiles. Autrement dit, la présentation des requêtes de média figurant dans l'article précédent était limitée à la création d'expériences mobiles et associées aux tablettes.

Compte tenu des difficultés que présente la création des sites et applications mobiles, il n'est pas étonnant que les requêtes de média aient pris de l'ampleur. Comparées aux alternatives déconseillées telles que la détection de navigateur (parfois appelée détection des périphériques) et l'obligation de créer des expériences mobiles sur chaque plateforme, les requêtes de média semblent un véritable cadeau. Ce sont sans aucun doute des modules de qualité, et la raison pour laquelle j'ai écrit un article à leur sujet le mois dernier est que vous allez maintenant devoir les utiliser.

Conception Web réactive, revisitée

Mais attendez, ce n'est pas tout ! Les modules CSS Media Queries sont parfaits, mais ne représentent qu'une partie de ce dont vous avez vraiment besoin pour créer des expériences Web mobiles parfaites. Le mois dernier, j'ai mentionné le terme « conception Web réactive », lequel a été inventé par Ethan Marcotte dans son article novateur du même nom (bit.ly/9AMjxh). Ethan Marcotte se concentre sur les requêtes de média, mais il souligne aussi deux autres pratiques nécessaires : les grilles fluides et les images flexibles. Les requêtes de média sont les moteurs qui pilotent des sites réactifs et adaptatifs, mais ils ne sont efficaces que si la conception de site est également réactive et adaptative. Ce mois-ci, je vais vous parler des concepts relatifs à ces deux autres piliers de conception Web réactive. Je vais également vous présenter certains modèles de présentation CSS prometteurs, puis je décrirai des techniques pour créer des éléments non textuels, tels que des images et des vidéos intégrées, également adaptatives. Ce faisant, je vais aborder certaines structures et bibliothèques qui vous aideront à adopter ces techniques. Je vais aussi mentionner les structures les plus répandues pour créer des applications Web mobiles et conclure en présentant brièvement HTML5 pour créer des applications natives. Lorsque vous aurez fini cet article, vous aurez une base solide pour implémenter la conception Web réactive dans vos applications.    

Grilles et dispositions fluides

L'utilisation d'une grille pour la conception typographique est une pratique présente sous une forme ou une autre depuis des décennies, elle est même antérieure à l'invention du caractère d'imprimerie. Cette structure à deux dimensions composée d'un axe vertical et d'un axe horizontal qui se croisent permet à un concepteur d'aligner des éléments et de les organiser de manière visuelle agréable dans une mise en page, comme l'illustre la figure 1. Ces dernières années, les concepteurs Web ont commencé à appliquer beaucoup de ces mêmes principes à leurs tâches numériques, et un certain nombre de structures répandues, telles que le système de grille 960 (960.gs) et le système de grille sémantique(semantic.gs), rendent désormais les grilles accessibles à tous.

Figure 1 Une Grille typographique

Toutefois, l'application directe d'une grille typographique au Web présente une faille majeure : les mises en page papier sont fixes, les mises en page Web ne le sont pas. De plus, beaucoup d'implémentations de grille ne sont pas très sémantiques, c'est-à-dire qu'elles nécessitent l'ajout d'un balisage pour définir la grille, en combinant présentation avec contenu dans vos pages HTML.

Ce qui nous amène au « fluide » de la « grille fluide « de Marcotte. Pour être vraiment réactives, les grilles (ou dispositions) doivent s'adapter aux expériences en évolution. Comme je l'ai indiqué le mois dernier, les requêtes de média vous aident à définir les règles de repositionnement des éléments, mais ces derniers doivent d'abord être définis dans un conteneur fluide ou flexible pour être efficaces. Les outils que j'ai indiqués précédemment (de même que beaucoup d'autres) répondent à ce problème de manière native ( la grille sémantique) ou via l'utilisation d'une bibliothèque complémentaire (Adapt.js pour la grille 960 : adapt.960.gs), mais il existe aussi des modules CSS nouveaux et émergents qui aident à créer des dispositions fluides.

Notez que je prends quelques libertés avec le terme « grilles fluides » de Marcotte en le remplaçant par « dispositions fluides ». Je fais cela car certains des nouveaux modules CSS, bien qu'ils ne soient pas basés sur une grille, peuvent encore aider à créer des conteneurs adaptables fluides.

Commençons par examiner le module CSS3 Flexible Box Layout (ou Flexbox), qui se trouve sur bit.ly/yguOHU. Flexbox est conçu de façon à vous aider à créer des conteneurs de dispositions pour les éléments qui positionneront automatiquement les enfants dans un flux horizontal ou vertical et fourniront un interlignage automatisé (Goodbye “ul li { float: right; }”!). Ce module est pris en charge, avec les préfixes du fournisseur, dans Internet Explorer 10 Platform Preview, Firefox, Chrome, Safari, iOS Safari et Android (consultez caniuse.com/flexbox pour plus d'informations).

Nous commencerons par appliquer Flexbox au site Photo Gallery que j'ai présenté le mois dernier. Sur le CSS de la Figure 2, vous pouvez constater le résultat, qui est un peu enjolivé pour les besoins de l'illustration dans la Figure 3. Notez que le CSS de la figure 2 n'utilise que le préfixe de fournisseur « -ms- ». Dans l'exemple de code disponible en ligne (archive.msdn.microsoft.com/mag201205HTML5), j'inclue les autres préfixes de fournisseur (-webkit, -moz, -o) et vous devez en faire de même pour vos sites.

Figure 2 CSS pour utiliser le module Flexbox

    ul.thumbnails {
      width: 100%;
      background: #ababab;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      -ms-box-align: center;
    }
    ul.thumbnails li {
      -ms-box-flex: 1;
    }

Figure 3 Images du site Photo Gallery auxquelles Flexbox est appliqué

C'est très bien, mais cela ressemble à ce que nous avions déjà. Pour illustrer la valeur flex dans Flexbox, redimensionnez le fenêtre du navigateur ou ouvrez la page dans un émulateur mobile ou un périphérique. Aucune requête de média n'est définie dans cet exemple et cependant la disposition a un effet un peu plus fluide. Combinez les deux modules et vous pourrez créer des conteneurs fluides qui alignent, espacent et changent les éléments de manière réactive. Par exemple, vous pouvez créer une règle de requête de média pour les écrans inférieurs à 480 pixels, définir une orientation verticale et voilà, vous avez le début d'une disposition mobile.

La CSS Grid Layout (ou simplement CSS Grid), qui se trouve sur bit.ly/ylx7Gq, est une nouvelle spécification, soumise au World Wide Web Consortium (W3C) CSS Working Group en avril 2011 et actuellement appliquée uniquement dans Internet Explorer 10 Consumer Preview. L'idée est d'assurer une prise en charge solide de la grille en mode natif dans le navigateur. Pour les développeurs et les concepteurs, il en résulte une grille typographique élaborée sans besoin de dispositions de table ou de marquage sémantiquement neutre.

La CSS Grid permet de définir une disposition de page sans lignes et colonnes prédéfinies, ainsi que les règles qui spécifient comment le contenu circule dans ces éléments et parmi ceux-ci. La première étape consiste à définir un conteneur de grille, en spécifiant la grille comment étant la propriété d'affichage des éléments sélectionnés :

    body {
      display: -ms-grid; // A vendor prefix is required.
    }

Je sélectionne l'élément de corps ici, ce qui signifie que ma grille remplit la totalité du document. Cela n'est pas obligatoire et je pourrais facilement créer une grille à partir d'une section plus petite de la page ou même définir plusieurs grilles sur une même page. Après avoir défini la grille, je dois définir la taille de ses lignes et colonnes :

    body {
      display: -ms-grid;
      -ms-grid-rows: 50px 30% 20% auto;
      -ms-grid-columns: 75px 25px 2fr 1fr;
    }

Ici, je spécifie une grille de quatre colonnes et quatre lignes, en rendant la taille absolue dans quelques cas (50px, 75px, par exemple), par rapport à la taille de la fenêtre pour certains (30 %, 20 %) et basée automatiquement sur la largeur de son contenu (auto). J'utilise aussi la nouvelle unité de valeur de fraction, fr, qui est définie dans la spécification CSS Grid comme « … une fraction de l'espace disponible. » Les valeurs de fraction sont calculées lorsque les tailles fixes sont attribuées, puis réparties proportionnellement entre les lignes et colonnes définies avec ces valeurs. Dans le contexte de mon exemple, cela signifie que lorsque 100 pixels sont définis pour les colonnes un et deux, la colonne trois reçoit les deux-tiers de l'espace restant et la colonne quatre le tiers.

Lorsque la grille est définie, il est facile d'y positionner les éléments enfants en attribuant les valeurs de ligne et de colonne de la façon suivante :

    #main {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      -ms-grid-row-span: 2;
      -ms-grid-row-align: center;
    }

Ici, je place mon élément de sectionnement principal à la deuxième ligne et colonne de la grille. Je permets à cet élément de s'étendre sur deux lignes et je centre le contenu dans le conteneur. Le site de démonstration de la version d'essai de Microsoft Internet Explorer utilise son implémentation de la spécification CSS Grid Layout pour créer une implémentation exacte du site bien connu Grid System, thegridsystem.org, que vous pouvez consulter vous-même sur bit.ly/gEkZkE.

Si vous avez déjà testé quelque chose de similaire au balisage et à CSS2.1, vous avez sans aucun doute vu la flexibilité que la CSS Grid peut apporter. De plus, la CSS Grid, combinée aux requêtes de média, peut servir à créer des dispositions adaptatives faciles à corriger avec quelques modifications de règle lorsque les utilisateurs règlent la taille et l'orientation des appareils.

La spécification de mise en page finale que je vais présenter est le module de disposition multicolonne CSS, que vous trouverez sur bit.ly/yYEdts. Le module de disposition multicolonne CSS est au niveau de la recommandation candidat (bit.ly/x5IbJv) et bénéficie d'une large prise en charge sur tous les navigateurs, notamment une prise en charge est prévue pour Internet Explorer 10. Comme il le semble, le module Multicolonne permet de disposer des colonnes sur une page sans positionnement manuel ou attributs float. Il suffit simplement d'appliquer la propriété « column-width » (avec préfixes si nécessaire) sur un conteneur de la façon suivante :

    article {
      width: 960px;
      column-width: 240px;
    }

Cette règle permet de diviser les éléments d'article en colonnes de 240 pixels, en créant autant de colonnes que le conteneur le permet (dans ce cas, il faut quatre colonnes de 240 pixels pour remplir le conteneur de 960 pixels). Je pourrais aussi utiliser la propriété column-count pour définir un nombre fixe de colonnes, auquel cas les largeurs de colonne seraient réparties de manière égale sur la largeur du conteneur.

Comme avec les modules Flexbox et Grid, vous pouvez, en combinant le module avec les requêtes de média, définir rapidement des règles simples et adaptables pour offrir une expérience utilisateur idéale aux utilisateurs mobiles.

Les trois modules que j'ai décrits ont beaucoup de choses en commun, et chacun a des caractéristiques que vous pouvez utiliser pour créer le genre de dispositions fluides requises pour des sites Web vraiment réactifs. Je vous encourage à chercher à les utiliser tous afin de pouvoir choisir le module approprié pour résoudre un problème de disposition spécifique.

Vous voudrez aussi examiner les structures émergentes qui utilisent ces spécifications. Utiliser l'un d'eux sera un beau début vers la création de dispositions fluides pour vos propres sites. Les deux structures à noter sont (getSkeleton.com) et Bootstrap (twitter.github.com/bootstrap), un kit de démarrage pour site complet de Twitter. J'ai reconstruit récemment l'un de mes propres sites avec l'aide de Skeleton (vous pouvez le consulter sur html5tx.com).

Média réactif

Au royaume de la conception Web réactive, notamment mobile, le média est la pierre angulaire. Commençons par les images. L'une des méthodes les plus faciles pour styler des images pour augmenter leur réactivité est d'ajouter ce qui suit à vos feuilles de style :

    img {
        max-width: 100%;
      }

Cette règle mettra toujours vos images à l'échelle (vers le haut ou le bas) pour qu'elles entrent dans le conteneur parent de cette image. Ainsi, si vos éléments de conteneur sont réactifs (s'ils utilisent peut-être l'une des techniques décrites précédemment), vos images seront aussi réussies.

Le défi que pose cette méthode est que les images sur votre site doivent être assez grandes pour être mises à toute échelle qui leur convient. Sur le site Photo Gallery que j'ai utilisé, les images brutes sont assez grandes et peuvent donc supportées d'être redimensionnées.

Toutefois, l'utilisation d'images immenses redimensionnables pose un gros problème pour les surcharges des mobiles et entraîne donc des expériences éventuellement mauvaises avec les mobiles. Même si vous redimensionnez une grande image pour qu'elle entre dans une fenêtre de 320 x 240, l'image intégrale est transférée à l'appareil. En d'autres termes, vous pouvez envoyer une photo de 2 Mo alors que l'appareil ne nécessite qu'un photo de 10 Ko. Dans le domaine mobile, la largeur de bande importe encore de sorte que la stratégie liée à la largeur de l'appareil doit être remplacée par d'autres approches.

Malheureusement, il s'agit encore d'un défi et le W3C ne prend pas encore formellement en charge une approche spécifique. Il existe un certain nombre de méthodes pour traiter les images réactives, mais toutes entrent dans l'une des deux catégories suivantes : elles s'occupent toutes du problème sur le serveur ou tentent de le faire sur le client. Bon nombre d'approches serveur, comme celle décrite sur bit.ly/rQG0Kw, reposent sur l'utilisation de réservés d'image de 1 x 1 pixel, de cookies client et de règles de réécriture serveur afin d'apporter l'image appropriée à l'appareil approprié. Les approches client, telles que celle décrite sur bit.ly/tIdNYh, utilisent souvent JavaScript, les solutions de secours <noscript>, les commentaires conditionnels et certaines astuces intéressantes dans CSS. Ces deux approches ressemblent à des hacks (parce qu'elles en sont) mais représentent ce que nous avons fait de mieux au vu des contraintes imposées par la balise <img>. À court terme, vous feriez bien d'examiner ces deux approches et de décider laquelle fonctionne pour vos applications.

À long terme, il y aura toutefois peut-être un espoir. Dans un article de Smashing Magazine, « Sémantique HTML5 » (bit.ly/rRZ5Bl), Bruce Lawson d'Opera présente l'ajout d'un élément <picture> qui se comporterait de la même façon que les balises <audio> et <video>, à savoir que les développeurs auraient accès à différents éléments enfants <source> à l'intérieur de l'élément parent <picture>. Combiné aux requêtes média en ligne, un nouvel élément <picture> pourrait constituer un bon moyen de fournir au final une solution solide pour les images réactives :

    <picture alt="cat gallery">
      <source src="nyan-high.png" media="min-width:800px" />
      <source src="nyan-med.png" media="min-width:480px" />
      <source src="nyan-low.png" />
      <!-- fallback for unsupporting browsers -->
      <img src="nyan-med.png" alt="cat gallery" />
    </picture>

Bien que cette solution se soit révélée populaire et qu'un groupe communautaire W3C se soit formé autour d'elle (bit.ly/AEjoNt), il n'existe pas à ma connaissance de groupe de travail formel. Peut-être verrons-nous cet élément aboutir à temps pour HTML6.

Des défis semblables existent pour l'ajout d'une vidéo réactive aux sites et applications, bien qu'il existe des solutions plus solides pour la vidéo en HTML5 que pour les images. En premier lieu, l'élément <source> media-query-enhanced, tel qu'il est illustré par l'élément <picture> fictif mentionné précédemment, est valide pour l'élément <video>, tel qu'il est illustré ici :

    <video>
      <source src="nyan-mashup-high.webm" media="min-width:800px" />
      <source src="nyan-mashup-med.webm" media="min-width:480px" />
      <source src="nyan-mashup-low.webm" />
      <!-- Insert Silverlight or Flash Fallback here -->
    </video>

Si vous servez la vidéo depuis vos propres serveurs ou utilisez un service qui fournit plusieurs versions à intégrer, je recommande vivement d'utiliser cette syntaxe pour assurer que vos utilisateurs obtiennent une vidéo compatible avec l'appareil.

Alors que cette solution contribuera à économiser la bande passante de vos utilisateurs, vous devez encore penser à dimensionner ces éléments vidéo intégrés comme vous le faites avec les images. Les requêtes de média vous permettent d'adapter facilement vos éléments vidéo selon différentes tailles d'écran, mais si vous recherchez une solution un peu plus automatisée, consultez FitVids.js (fitvidsjs.com), un plug-in jQuery qui rendra automatiquement vos éléments vidéo fluides et réactifs. Toutefois, n'oubliez pas que, en tant que plug-in jQuery, cette solution ne fonctionnera pas pour les utilisateurs dont JavaScript est désactivé.

Création d'applications Web mobiles avec les structures HTML5

Maintenant que nous avons abordé les deux autres piliers de la conception Web réactive, à savoir les dispositions fluides et les images flexibles, parlons un peu des cas où vous ne créez pas seulement des sites ou applications Web compatibles avec les mobiles mais où vous voulez cibler spécifiquement l'expérience avec les mobiles.

Dans le domaine du développement, le bureau (ou client) traditionnel et les paradigmes Web ont engendré un troisième type d'application, souvent appelé applications natives car elles résident sur un appareil spécifique (un smartphone ou iPad basé sur Windows Phone, par exemple). Elles sont développées à l'aide de structures propres aux appareils (iOS et Android) et sont installées via un App store ou Marketplace.

Aussi élaborées et solides que soient ces structures, les développeurs Web souhaitent parfois conférer un aspect natif semblable à leurs applications Web mobiles. Ces applications résident encore sur vos serveurs et peuvent être livrées autrement que par un App Store or Marketplace pour appareils.

bien que vous puissiez certainement créer ces types d'applications manuellement, il est courant d'utiliser des structures pour cela. Une option populaire pour les applications Web mobiles est jQuery Mobile (jquerymobile.com), une structure de développement mobile qui fournit un système d'interface utilisateur de type HTML5 pour cibler pratiquement toutes les plateformes mobiles. La figure 4 montre un exemple de l'application mobile pour OpenTable.com, qui a été créée à l'aide de l'interface utilisateur jQuery.

Figure 4 Un exemple d'écran mobile créé avec jQuery Mobile

Une autre option populaire pour créer des applications mobiles présentant un aspect natif est Kendo UI Mobile (kendoui.com), une structure HTML5, JavaScript et CSS deTelerik Inc. Kendo UI permet de créer des applications mobiles qui semblent entièrement natives sur des appareils iOS et Android, et ceci avec un codebase unique. La figure 5 et la figure 6 montrent cette fonction en action. Vous pouvez l'examiner par vous-même sur bit.ly/wBgFBj.

Figure 5 Une application démo Kendo UI Mobile visualisée sur un appareil iOS

Figure 6 Un exemple d'application Kendo UI Mobile visualisée sur un appareil Android

Création d'applications natives avec HTML5

Procurer un aspect natif aux applications Web est un grand moyen d'exploiter vos compétences de développeur web mais aussi de créer des applications conformes aux attentes des utilisateurs dans une configuration mobile. Mais encore ces applications ne peuvent pas aller plus loin dans l'exploitation des détecteurs natifs et des API sur ces appareils. Alors que certaines fonctionnalités comme la géolocalisation, sont fournies aux navigateurs mobiles, de nombreuses autres, comme l'accéléromètre ou la vidéo, ne le sont pas. Pour accéder à ces fonctionnalités les applications natives ont encore du chemin à faire.

Toutefois, la grande nouvelle est que la popularité de la programmation Web a permis à HTML5, JavaScript et CSS d'être pour ainsi dire natifs. Des structures populaires telles que PhoneGap (phonegap.com) et Titanium Appcelerator (appcelerator.com) permettent d'utiliser HTML5 et JavaScript pour créer des applications natives pour iOS, Android et Windows Phone, avec accès à l'API de l'appareil pour l'amorçage. De plus, les structures de développement mobile comme jQuery Mobile et Kendo UI Mobile fonctionnent aussi bien dans ces environnements que dans le navigateur. La figure 7 montre une application iOS native créée à l'aide de PhoneGap et Kendo UI. Pour plus d'informations, consultez le billet de blog sur bit.ly/zpIAPY.

Figure 7 Une application iOS créée avec HTML, JavaScript et CSS

Microsoft a porté le développement Web natif à un nouveau niveau en ajoutant formellement la prise en charge de la création d'applications Windows 8 à l'aide de HTML5, JavaScript et CSS, sans besoin d'abstractions ou structures supplémentaires. Vous pouvez consulter Windows 8 Consumer Preview ainsi que les nouveaux outils de développeur pour ces plateformes sur dev.windows.com. 

En matière de Web mobile vous avez le choix ! Si vous êtes un programmeur Web qui souhaite créer des expériences natives, complètes avec des fonctionnalités de réalité augmentée, consultez Windows 8 ou une structure telle que PhoneGap ou Titanium Appcelerator. Si vous recherchez simplement un aspect natif dans le navigateur, consultez jQuery UI et Kendo UI Mobile. Pour finir, si votre objectif est de créer un site ou une application Web unique qui répond à de nombreux appareils et expériences, testez les stratégies réactives que j'ai présentées dans cet article et celui du mois dernier. Les applications mobiles sont sans aucun doute les plateformes de développement les plus en vogue actuellement. Votre meilleur choix est de faire du mobile votre principale priorité de développement, quelles que soient les stratégies ou les plateformes que vous choisissez.

Brandon Satrom est responsable de produit pour Kendo UI (kendoui.com), un ensemble d'outils HTML5 et mobiles de Telerik Inc. Il tient un blog sur userinexperience.com, peut être suivi sur Twitter twitter.com/brandonsatrom et est en pleine écriture de son ouvrage « Building Metro Style Apps for Windows 8 in JavaScript » avec Chris Sells.

Je remercie les experts techniques suivants d'avoir relu cet article : Jon Box, Burke Holland et Clark Sell