Traductions pour la plateforme Java

Développez de nouvelles fonctionnalités visuelles en HTML5

Article d'origine: 

Ajoutez Canvas, CSS3 et plus d'éléments sémantiques à vos applications mobiles

Résumé: 

HTML5 amène quantité de nouvelles fonctionnalités pour les applications Web mobiles, y compris des fonctionnalités visuelles qui ont comme toujours l'impact le plus important. Canvas est la plus captivante de ces nouvelles capacités de l'IHM, car elle donne accès à du pur graphisme 2-D dans le navigateur. Avec cet article vous apprendrez à utiliser Canvas ainsi que d'autres nouveaux éléments visuels de HTML5, plus discrets mais qui font une grande différence pour les utilisateurs mobiles.

Prérequis

Au cours de cet article, vous allez développer des applications web utilisant les technologies les plus récentes. Le plus gros du code est constitué de HTML, de Javascript et de CSS - les technologies de base de tout développeur web. Ce dont vous aurez vraiment besoin, ce sont des navigateurs pour tester tout çà. La majeure partie du code de cet article tournera dans les dernières versions des navigateurs classiques, à quelques exceptions d'importance. Bien sûr, il faut tester sur des navigateurs mobiles également, et vous vous servirez des dernières versions des SDKs iPhone et Android pour ce faire. Pour cet article, les SDKs iPhone 3.1.3 et Android 2.1 ont été utilisés. Voir les Ressources pour les liens.

Dessiner avec Canvas

Pendant des années, les développeurs Web se sont plaints de Canvas. Mais pourquoi se plaindrait-on d'une interface permettant de dessiner nativement dans le navigateur ? Après tout, elle permet de créer le genre d'IHM qui requiert sinon un plugin quelconque (et comme les développeurs pour mobiles le savent, les plugins sont souvent indisponibles sur les navigateurs mobiles les plus populaires). La raison pour laquelle les développeurs Web se plaignaient de Canvas tenait au fait que, bien qu'elle ait été disponible sur Firefox et Safari depuis des années maintenant, elle n'a jamais été supportée par le navigateur le plus répandu, Microsoft®Internet Explorer®. Même les premières version d'IE9 ne supportent pas Canvas. Et donc pendant des années, Canvas a été un grand serpent de mer du point technologique. On trouve facilement des mises en oeuvres étonnantes de Canvas sur Internet, mais on ne peut pas les utiliser dans la plupart des applications Web à cause d'Internet Explorer. Heureusement pour les développeurs Web mobile, Canvas n'a pas cette limitation. Tous les navigateurs basés sur Webkit constituant la cible implémentent Canvas et optimisent beaucoup ses performances.

L'API Canvas est une API de bas niveau destiné au dessin. Elle permet de créer des lignes, des courbes, des polygones et des cercles puis de les remplir au moyen d'une couleur, d'un gradient, etc... On peut ajouter du texte et appliquer de nombreuses transformations géométriques sur n'importe quelle portion du Canvas. Comme vous pouvez l'imaginer, une telle API a d'innombrables applications. Voyez cette application qui crée un rapport en utilisant Canvas. La Figure 1 montre une capture d'écran de l'application, un histogramme de résultats annuels.

Figure 1. Rapport généré à l'aide de Canvas, dans un navigateur Android

Rapport généré à l'aide de Canvas, dans un navigateur Android

Ce que vous voyez dans la Figure 1 n'est pas une image statique rendue par le navigateur. Ce graphique est généré à la volée en utilisant l'API Canvas. Le Listing 1 montre le code HTML qui crée ce rapport.

Listing 1. HTML générant le rapport

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <title>HTML 5 Reports</title>
    <script type="text/javascript">
        function init(){
            var data = [{year : "2007",sales : 49},
                {year : "2008",sales : 131},
                {year : "2009",sales : 294}, 
                {year : "2010",sales : 405}];
            var report = {x : "year",
                    y : "sales",
                    values : data};
            graph(report, 350, 300);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="graph"></canvas>
</body>
</html>

On voit ici la structure du HTML. Le corps du document contient un simple tag canvas. Dans la fonction init, qui est appelée lors du chargement du corps du document, on définit des données statiques (les données du rapport) et on les passe à la fonction graph. Bien que dans notre cas nous utilisions des données statiques, il est facile d'imaginer qu'elles soient chargées dynamiquement en utilisant Ajax. La fonction graph contient tout le code intéressant, jetons-y un coup d'oeil dans le Listing 2.

Listing 2. La fonction graph

function graph(report, maxWidth, maxHeight){
    var data = report.values;
    var canvas = document.getElementById("graph");
    var axisBuffer = 20;
    canvas.height = maxHeight + 100;
    canvas.width = maxWidth;
    var ctx = canvas.getContext("2d");

    var width = 50;
    var buffer = 20;
    var i = 0;
    var x = buffer + axisBuffer;
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "start";
    for (i=0;i<data.length;i++){
        ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
        ctx.fillRect(x, maxHeight - (data[i][report.y] / 2), 
                 width, (data[i][report.y] / 2));
        ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
        ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);
        x += width + buffer;
    }

    // dessiner l'axe horizontal
    ctx.moveTo(axisBuffer, maxHeight);
    ctx.lineTo(axisBuffer+maxWidth, maxHeight);
    ctx.strokeStyle = "black";
    ctx.stroke();

    // dessiner l'axe vertical
    ctx.moveTo(axisBuffer,0);
    ctx.lineTo(axisBuffer,maxHeight);
    ctx.stroke();

    // dessiner la grille
    var lineSpacing = 50;
    var numLines = maxHeight/lineSpacing;
    var y = lineSpacing;
    ctx.font = "10px sans-serif";
    ctx.textBaseline = "middle";
    for (i=0;i<numLines;i++){
        ctx.strokeStyle = "rgba(0,0,0,0.25)";
        ctx.moveTo(axisBuffer, y);
        ctx.lineTo(axisBuffer + maxWidth,y);
        ctx.stroke();
        ctx.fillStyle = "rgba(0,0,0, 0.75)";
        ctx.fillText(""+(2*(maxHeight -y)), 0, y);
        y += lineSpacing; 
    }
}

Dans la première partie de la fonction, on met en place les objets nécessaires à la création du rapport, comme la largeur et la hauteur du canevas, et des variables d'espacement. On crée aussi l'objet correspondant au contexte du canevas, et ce sera l'objet utilisé pour faire les dessins. Ensuite on dessine les barres que l'on voit dans la Figure 1, en itérant sur les données du rapport. Tout d'abord, on positionne la propriété fillStyle. Ce peut être aussi simple que nommer une couleur, comme on pourrait le faire en CSS. Dans notre cas, on utilisera la notation rgba pour positionner non seulement la couleur mais aussi la valeur alpha. (il s'agit du degré de transparence de la couleur, comme nous le verrons quand je parlerai des fonctionnalités CSS 3.0 de HTML5). Après avoir donné une valeur à la propriété fillStyle, on crée une barre pour la donnée au moyen de l'API fillRect. Ici, on spécifie les coordonnées du point de départ du rectangle, sa largeur et sa hauteur. Après cela, on rédéfinit fillStyle parce que l'on souhaite écrire du texte dans le rapport. On utilise l'API fillText pour dessiner du texte sur le canevas. Cette API prend en entrée les coordonnées du point de départ et un texte. On fait cela pour chacune des données à représenter, créant ainsi un graphique avec des barres et des légendes.

Ensuite, on doit dessiner les autres parties du graphique, les axes et la grille. Tout d'abord, on dessine les axes horizontaux et verticaux. Pour chacun, on utilise l'API moveTo pour positionner le point à partir duquel on commencera à dessiner une ligne. Puis on utilise l'API lineTo pour dessiner une ligne depuis le point de départ jusqu'au point passé en paramètre lors de l'appel. Notez que cela ne dessine pas vraiment une ligne, il faut encore faire appel à l'API stroke pour que le dessin soit effectif. Après avoir dessiné les deux axes, on passe aux lignes de la grille avec leurs légendes en les espaçant uniformément et en les dessinant en utilisant la même combinaison de moveTo, lineTo, et stroke.

C'est tout le code dont vous avez besoin pour créer le graphique représentant les données du rapport. Vous avez vu une bonne partie des APIs les plus importantes et les plus couramment utilisées de l'API canvas dans cet exemple, mais il en existe d'autres (pour dessiner des courbes par exemple). On peut réaliser des choses vraiment surprenantes avec ces APIs, et cela est possible sur tous les navigateurs basés sur Webkit. Si les graphiques ne sont pas votre tasse de thé, HTML5 a encore d'autres joyeusetés visuelles à vous proposer avec CSS 3.0.

Le monde merveilleux de CSS3

Quand on parle de HTML5, on pense tout de suite aux balises HTML. Bien entendu, HTML5 définit effectivement de nouvelles balises, et nous en verrons quelques unes dans la prochaine partie. Dans la partie précédente, nous avons vu comment utiliser la balise <canvas> pour créer un objet canevas dans le DOM. Néanmoins, le plus gros du code était du Javascript. HTML n'est qu'une portion de HTML5—Javascript et CSS en sont des parties tout aussi importantes. Dans HTML5, beaucoup de nouveaux éléments d'IHM sont fournis par la dernière version du standard CSS, CSS3.0. Dans la Figure 2,on voit une page Web utilisant plusieurs nouveautés de CSS 3.0 s'afficher sur un téléphone Android et sur un iPhone.

Figure 2. Nouvelles fonctionnalités CSS des appareils mobiles

Nouvelles fonctionnalités CSS des appareils mobiles

L'image de gauche est tirée d'un appareil tournant sous Android. La raison pour laquelle elle est plus grosse est qu'il s'agit d'un Motorola Droid, qui a une résolution d'écran supérieure à celle de l'iPhone 3GS utilisé pour l'image de droite. On peut donc visualiser une plus grande portion de la page sur le Droid. Vous remarquez peut-être que le texte "The Gettysburg Address" a un reflet qui disparait progressivement sur l'iPhone mais qui ne disparait pas et empiète sur le texte suivant sur le Droid. Cela nous rappelle gentiment que même si les appareils basés sur Android et les iPhones ont des navigateurs basés sur Webkit, il existe tout de même de subtiles différences et qu'il ne faut pas lésiner sur les tests. Voyons maintenant le code (Listing 3)  qui a généré cette magnifique page, en commençant par le haut de la page.

Listing 3. Code pour la première moitié de la page

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function init(){
            var i=0;
            var row = {};
            var cell = {};
            var topics = ["nth-child", "gradients", "alpha", "text effects", 
                          "reflections", "transformations"];
            for (i=0;i<topics.length;i++){
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.appendChild(document.createTextNode(topics[i]));
                row.appendChild(cell);
                $("dtable").appendChild(row);
            }
        }
    </script>
    <style type="text/css">
        header > h1{
            color: yellow;
            background: -webkit-gradient(linear, left top, left bottom, 
                             from(blue), to(white))
        }
        tr:nth-child(4n+1) { color: navy; }
        tr:nth-child(4n+2) { color: green; }
        tr:nth-child(4n+3) { color: maroon; }
        tr:nth-child(4n+4) { color: purple; }

        input[type="text"]{
            background: rgba(150, 30, 30, 0.5);
        }
    </style>
</head>
<body onload="init()">
    <header>
        <h1>The World of CSS3</h1>
        <div>What kind of CSS3 does your browser support?</div>
    </header>
    <table id="dtable"></table>
    <div id="formSection">
        <label for="name">What's your name?</label>
        <input type="text" id="name"></input>
        <button id="rtBtn" onclick="rotate()">Rotate</button>
    </div>
</body>
</html>

Le code du Listing 3 dessine toute la partie de la page se trouvant au dessus de "Gettysburg Address". Vous verrez le code de la partie basse bientôt.

La première chose à examiner est l'entête de la page. Si vous regardez le corps de la page HTML, près de la fin du listing, vous verrez que cet entête se trouve littéralement dans un tag header — un des nouveaux éléments de HTML 5.

Intéressons-nous maintenant à l'élément style (au-dessus du corps du HTML dans le Listing 3). Le texte est stylé par CSS avec le sélecteur header > h1. Cette règle rend le texte jaune, mais elle lui donne également un arrière-plan bleu et blanc. Cet arrière-plan se voit appliquer un gradient. C'est le premier exemple que nous verrons de fonctionnalités CSS préfixées par -webkit. Comme vous vous en doutez, ceci lie la CSS aux navigateurs basés sur Webkit. Néanmoins, dans la plupart des cas, elles font partie du standard CSS 3.0, mais appartiennent à des zones où le standard n'est pas encore complètement figé. Le plus souvent, les navigateurs Webkit aussi bien que Mozilla Firefox ont implémenté ces fonctionnalités. Si vous devez également cibler les navigateurs Mozilla (tels que la version mobile de Firefox, nommée Fennec, qui gagne rapidement en popularité sur les smatphones Nokia d'Europe), vous pouvez d'habitude changer le préfixe -webkit en -moz.

Ensuite on affiche une liste de sujets dans la table nommée dtable. Comme vous le constatez dans la Figure 2, la couleur change d'une ligne à l'autre lors de l'affichage du contenu de la table. Cela se fait au moyen de la section CSS suivante, les déclarations tr:nth-child. On peut utiliser la règle nth-child sur tout élément qui se répète. On lui passe une formule utilisée comme un prédicat permettant de savoir si la règle est valide pour l'élément. Dans notre cas, on indique que les lignes dont le numéro est de la forme 4n+1 (1, 5, 9, etc...) seront en bleu marine, de la forme 4n+2 (2, 6, 10, etc...) en vert, et de même pour le marron et le violet. Il y a de bonnes chances que vous ayez eu à implémenter des traitements visuels similaires à des tables, des listes ou autres dans le passé, mais en vous fatigant à écrire du Javascript.

Les derniers éléments visuels de cette première partie sont le champ texte à fond rouge avec le label What's your name? et un bouton disant Rotate. Le coloriage en rouge est obtenu en utilisant un sélecteur spécifiant un certain type de zone de formulaire. En d'autres termes, cette règle CSS ne s'appliquera qu'aux éléments de saisie de type text. Et maintenant, vous vous demandez peut-être ce que fait le bouton Rotate. Vous voyez dans le Listing 4 qu'il appelle une fonction nommée rotate.

Listing 4. Fonction Javascript de rotation utilisant CSS

function rotate(){
    $("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
    $("formSection").style["-webkit-transition"] = 
          "-webkit-transform 2s ease-in-out";
    $("rtBtn").innerHTML = "Undo";
    $("rtBtn").onclick = function() {
        $("formSection").style["-webkit-transform"] = "";
        $("rtBtn").innerHTML = "Rotate";
        $("rtBtn").setAttribute("onclick", "rotate()");
    }
}

La fonction rotation utilise Javascript pour modifier le style appliqué au div nommé formSection. (Remarque: on utilise $() comme un alias de document.getElementById()). Pour faire tourner le div de cinq degrés dans le sens inverse des aiguilles d'une montre, on positionne son style -webkit-transform à rotateZ(-5deg). Puis on donne au style -webkit-transition la valeur -webkit-transform 2s ease-in-out. La rotation dure ainsi deux secondes, démarre lentement, s'accélère puis ralentit sur la fin. Dans la Figure 3, la partie gauche montre la position initiale du champ "What's your name?". La partie droite montre l'effet visuel produit par la rotation du champ et du bouton "Undo".

Figure 3. Rotation d'éléments HTML

Rotation d'éléments HTML

Suivez le lien figurant dans les Ressources pour voir cet effet en action dans un navigateur supportant HTML5 comme Chrome, Safari 4 ou Opera.

Passons maintenant à la partie inférieure de la page de la Figure 2. Nous y voyons quelques exemples intéressants d'effets sur des images et du texte, ainsi que différentes mises en page. Le code se trouve dans le Listing 5.

Listing 5. Code pour la partie inférieure de la page de la Figure 2

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h2 {
            -webkit-text-fill-color: blue;
            -webkit-text-stroke-color: yellow;
            -webkit-text-stroke-width: 1.5px;
            background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), 
to(#000));
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left 
bottom, from(transparent), color-stop(0.5, transparent), to(white));
        }
        h3{
            color: rgba(0,0,255,0.75);
            background: rgba(255,255,0,0.5);
        }
        .xyz{
            text-shadow: #6374AB 4px -4px 2px;
            white-space: nowrap;
            width: 14em; 
            height: 2em; 
            overflow: hidden;
            text-overflow: ellipsis; 
            border: 1px solid #bbb; 
            border-radius: 9px;             
            background-color: #fff;
        }
        .abc {
            border: 1px solid #000;
            border-radius: 9px;        
            -webkit-column-count:4;
            -webkit-column-rule: 1px solid #a00;
            -webkit-column-gap: 0.75em;
        }
    </style>
</head>
<body onload="init()">
    <h2>The Gettysburg Address</h2>
    <h3>Abraham Lincoln, Gettysburg, PA. November 19, 1863</h3>
    <div class="xyz">
        Four score and seven years ago our fathers brought forth on this 
        continent a new nation, conceived in liberty, and dedicated to 
            the proposition that all men are created equal.
    </div>
    <div class="abc">
        Now we are engaged in a great civil war, testing whether that 
            nation, or any nation, so conceived and so dedicated, can long 
            endure. We are met on a great battle-field of that war. We have 
            come to dedicate a portion of that field, as a final resting 
            place for those who here gave their lives that that nation might 
            live. It is altogether fitting and proper that we should do this.
    </div>
</body>
</html>

Voyons élément par élément ce que fait ce code. D'abord, on crée un entête "The Gettysburg Address" et on lui ajoute plusieurs styles.

  1. En utilisant les styles -webkit-text-fill-color, -webkit-text-stroke-color, et -webkit-text-stroke-width, on crée un effet "bleu à l'intérieur du jaune".
  2. Un arrière-plan noir et rouge est mis en place au moyen du style -webkit-gradient. Remarquez qu'il s'agit ici d'un dégradé radial, alors que précédemment nous avons vu un dégradé linéaire. Les deux marchent très bien sur les smartphones.
  3. On applique un effet de reflet à l'entête par le style -webkit-box-reflect.  Ce style est paramétré pour refléter l'entête cinq pixels en dessous de sa position, avec en prime un gradient. Cette fois, le dégradé donne l'impression que le reflet s'évanouit progressivement. Si l'on revient à la Figure 2, on voit que cette combinaison n'est pas rendue sur le navigateur Android: il affiche simplement le reflet, sans aucun dégradé.

Passons maintenant à l'entête suivant, sur lequel on applique un style très simple. On utilise simplement une couleur pour le texte, et une autre pour l'arrière-plan. Ces deux couleurs sont spécifiée en utilisant la fonction pour donner les valeurs des composantes rouge, bleue et verte, ainsi qu'une valeur de transparence. La valeur 1.0 donnera un résultat complètement opaque et la valeur 0.0 un résultat transparent.

On voit ensuite dans le Listing 5 le code du premier paragraphe, dont le texte possède une bordure aux coins arrondis grâce au nouveau style border-radius. On voit ce type de coins un peu partout sur le Web maintenant, et on les obtient généralement en utilisant des images. Cela semble carrément primitif en comparaison de la facilité avec laquelle on y arrive avec CSS 3.0. On applique un ombrage au texte de ce paragraphe au moyen du style text-shadow. Enfin, notez que la zone réservée à l'affichage du paragraphe est limitée par la hauteur et la largeur données au div parent, et que le texte est trop long pour tenir. Au lieu de bêtement couper le texte comme dans les navigateurs plus anciens, on obtient une sympathique ellipse (...) en utilisant le style text-overflow.

On arrive enfin à la dernière zone de texte. Elle possède aussi une bordure, mais notez qu'elle apparait sur quatre colonnes, avec des séparateurs de colonnes. Pour ce faire, positionnons le style -webkit-column-count, ainsi que le style apparenté -webkit-column-rule pour créer les séparateurs. Imaginez seulement à quel point il est pénible d'obtenir un texte formatté de cette manière sans les nouveautés de CSS 3.0. Ce peut être aussi une fonctionnalité intéressante quand on crée des entêtes et des pieds de page simples, qui sont tous les deux de nouveaux éléments de HTML 5. Jetons-y un coup d'oeil ainsi qu'à d'autres balises introduites par HTML 5.

Nouvelles sémantiques

HTML 5 ajoute beaucoups de nouveaux éléments à la soupe des balises HTML. Certains de ces éléments demanderont aux navigateurs de fournir de nouveaux rendus. D'autres ajouteront des fonctionnalités qui pourront ensuite être manipulées via Javascript. Cependant, certaines ne font rien de tout cela. Elles auront le même aspect et seront programmées de la même manière que <span>, <div>, et <p>. Mais elles donneront de nouvelles sémantiques, qui sont importantes pour les utilisateurs non-visuels de la page, ce qui inclut les personnes utilisant des technologies d'accessibilité comme des lecteurs d'écran ainsi que les programmes tels que les moteurs de recherche. Ces nouvelles balises fournissent aussi des moyens d'écrire des sélecteurs CSS plus expressifs. La Figure 4 montre une page Web utilisant quelques-uns de ces nouveaux éléments sémantiques.

Figure 4. Nouveaux éléments HTML 5 sur iPhone

Nouveaux éléments HTML 5 sur iPhone

L'exemple de la Figure 4 contient un élément header, ainsi que de nombreux éléments nav, un article, une section, et un aside. Ces éléments ne provoquent aucun rendu particulier. Ils ajoutent simplement de la sémantique, et vous pouvez vous en servir pour écrire une CSS qui leur donne un rendu correspondant à leur valeur sémantique. Le code de cette page se trouve dans le Listing 6.

Listing 6. Nouveaux éléments sémantiques de HTML 5

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
<title>Get the latest markup</title>
</head>
<body>
    <header style="border: 1px dotted #000;border-radius: 3px;">
        <hgroup align="center">
            <h1>Real documents have headers</h1>
            <h2>Even if they don't say so</h2>
        </hgroup>
        <hgroup>
        <nav style="-webkit-column-count:3;-webkit-column-rule: 1px solid #a00;">
            <a href="new-css.html">CSS3</a><br/>
            <a href="report.html">Canvas</a><br/>
            <a href="elements.html">Markup</a>
        </nav>
        </hgroup>
    </header>
    <article>
       <h1>There are a lot of new markup elements in HTML5</h1>
       <time datetime="2010-05-16" pubdate>Sunday, May 16</time>
       <section>Did you notice that we just had two H1's? 
       But it's cool!</section>
       <aside style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
            If this page was really popular, I'd put an ad here and make some
            serious cash
        </aside>
    </article>
</body>
</html>

Vous pouvez voir un certain nombre des nouveaux éléments mentionnés plus haut. Remarquez qu'il est également possible d'appliquer des styles pour créer une boite aux coins arrondis autour du header et pour créer des séparateurs pour le nav. On a aussi stylé la manière de gérer le débordement de texte dans le bloc aside. Ce qui est important ici, c'est que l'on peut donner beaucoup plus de sens au balisage sans travail supplémentaire, et ensuite le faire apparaitre tout comme si on avait utilisé des <div> et des <span>. Pour voir un exemple d'éléments HTML 5 qui ont un impact plus important sur les plans visuels et de la programmation, regardez la Figure 5. (Voir une version purement textuelle de la Figure 5).

Figure 5. Formulaire HTML 5 sur iPhone

Formulaire HTML 5 sur iPhone

L'écran de la Figure 5 utilise de nombreux éléments nouveaux disponibles avec HTML 5. Dans la plupart des cas, ils ressemblent aux éléments existants, mais vous pouvez vous attendre à ce que les navigateurs donnent une meilleure représentation visuelle de ces éléments de formulaire enrichis. Pour en avoir un aperçu, regardez ce que donne le formulaire précédent dans le navigateur Opera "classique" dans la Figure 6. (Voir une version purement textuelle de la Figure 6).

Figure 6. Formulaire HTML 5 dans Opera

Formulaire HTML 5 dans Opera

 Opera implémente tooujours rapidement les fonctionnalités HTML 5, et c'est tout spécialement le cas des nouveaux éléments de formulaires.Regardez maintenant le code qui a généré les Figures 5 et 6 afin de mieux comprendre pourquoi Opera a rendu les choses de cette manière. Le Listing 7 montre ce code.

Listing 7. Code utilisant les éléments de formulaires HTML 5

<<form id="settings">
<fieldset id="inputs" style="border: 1px solid #000;border-radius: 6px;">
    <legend>Settings</legend>
    <label for="name">Username</label>
    <input id="name" name="name" type="text" required autofocus /><br/>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" 
          placeholder="First and last name" required /><br/>
    <label for="email">Email</label>
    <input id="email" name="email" type="email"           
           placeholder="example@domain.com" required /><br/>
    <label for="phone">Phone</label>
    <input id="phone" name="phone" type="tel" 
          placeholder="Eg. +447500000000" required /><br/>
    <label for="dob">Date of birth</label>
    <input id="dob" name="dob" type="date" required/>
    <fieldset style="border: 1px dotted #000; border-radius: 6px">
        <legend>Preferred Contact Method</legend>
        <ol>
            <li>
                <input id="emailMeth" name="contactMethod" 
                            type="radio">
                <label for="emailMeth">Email</label>
            </li>
            <li>
                <input id="phoneMeth" name="contactMethod" 
                            type="radio">
                <label for="phoneMeth">Phone</label>
            </li>
        </ol>
    </fieldset>
    <label for="climate">Preferred external temperature</label>
    <input id="climate" name="climate" type="range" min="50" 
          max="100" step="5" value="70"/><br/>
    <label for="color">Favorite color</label>
    <input id="color" name="color" type="color"/><br/>
    <label for="referrer">Where'd you hear about us?</label>
    <input type="url" name="refUrl" id="referrer" list="urls"/>
    <datalist id="urls">
        <option label="TechCrunch" value="http://www.techcrunch.com/">
        <option label="ReadWrite Web" value="http://www.readwriteweb.com/">
        <option label="Engadget" value="http://www.engadget.com/">
        <option label="Ajaxian" value="http://www.ajaxian.com/">
    </datalist><br/>
    <button type="button" onclick="checkInputs()">Save</button>
</fieldset>
</form>

Les éléments utilisés dans le formulaire du Listing 7 comprennent un bon nombre des nouvelles fonctionnalités de HTML 5. Remarquez deux des nouveaux attributs, required et autofocus. L'attribut required est utilisé lors de la validation du formulaire (nous en dirons davantage plus bas) et l'attribut autofocus permet de choisir l'élément de la page qui recevra le focus. Notez aussi que plusieurs éléments disposent d'un texte placeholder. C'est un comportement que beaucoup de sites utilisent depuis des années — donner un exemple ou une explication à l'intérieur de la zone de saisie — mais le développeur devait à chaque fois écrire le code. Vous voyez le rendu sympathique de l'iPhone à la Figure 4.

Après cela on voit quelques-uns des nouveaux types de données qui sont permis pour les éléments de saisie, comme email, phone, date, range, color, et url. Au jour d'aujourd'jui, ils sont tous rendus comme des zones de texte dans les navigateurs iPhone et Android, comme si l'on utilisait du HTML 4.0 moins correct du point de vue de la sémantique. La Figure 5 montre à quoi ils pourraient ressembler à l'avenir. Le champ date doit recevoir le focus avant de montrer sa nouvelle interface (un calendrier en pop-up) sous Opera. C'est vrai aussi pour le champ url de la Figure 7, mais ce n'est pas parce que l'on doit y saisir une URL. C'est parce qu'il a un attribut list. Il pointe vers l'élément datalist qui contient les valeurs permises pour ce champ. Quand il reçoit le focus, on voit les différentes possibilités (dans ce cas, plusieurs URLs) provenant de la liste spécifiée, de manière similaire aux champs à saisie assistée faits en Ajax qui sont si populaires. Voyez ces fonctionnalités de date et de liste de données en action dans la Figure 7.

Figure 7. Zones de saisie de dates et de choix dans une liste avec HTML 5

Zones de saisie de dates et de choix dans une liste avec HTML 5

On peut s'attendre à ce que la plupart des types d'entrée bénéficient rapidement de meilleures représentations visuelles du fait que Webkit continue à évoluer rapidement. Opera donne une bonne idée de ce que sera le futur. Une bonne partie de ces types d'entrée fournissent également une validation, et HTML 5 possède un ensemble complet de nouvelles APIs de validation. Ces fonctionnalités ne sont pas encore implémentées sur les appareils iPhone ou Android, mais elles sont présentes sur leurs équivalents classiques, on peut donc espérer les voir débarquer bientôt dans les navigateurs mobiles. Jetons un coup d'oeil à l'utilisation de ces nouvelles APIs de validation dans le Listing 8.

Listing 8. Les APIs de validation HTML 5 en action

<function checkInputs(){
    var inputs = document.getElementById("inputs").childNodes;
    var len = inputs.length;
    var i = 0;
    var input = null;
    var errors = [];
    for (i=0;i<len;i++){
        input = inputs.item(i);
        if (input.nodeName == "INPUT"){
            if (input.validity){
                if (!input.checkValidity()){
                    errors.push(input.validationMessage);
                }
            }
        }
    }
    var errMsg = "There are " + errors.length + " errors";
    var notify = function(){
        var notification = 
            webkitNotifications.createNotification(null, "Errors!", errMsg);
        notification.show();
    };
    if (window.webkitNotifications){
        if (webkitNotifications.checkPermission()){
            webkitNotifications.requestPermission(notify);
        } else {
            notify();
        }
    } else {
        alert(errMsg);
    }
}

Tous les éléments de saisie ont une propriété validity. On peut l'utiliser ou bien se servir de la fonction checkValidity() qui retourne vrai ou faux, et de la propriété validationMessage pour obtenir un message d'erreur adapté à la langue. Au moment ou ceci est écrit, les navigateurs classiques les plus récents ne retournent rien de consistent ou de standard pour validationMessage, elle est donc d'un intérêt limité. L'objet validity peut être utiliser pour tester différentes catégories d'erreur, comme valueMissing, rangeOverflow, rangeUnderflow, patternMismatch, et tooLong.Par exemple, si un élément a l'attribut required mais que l'utilisateur le laisse vide, validity.valueMissing sera vrai.

Enfin, notez dans le Listing 8 qu'après avoir détecté les erreurs de validation, on essaie d'utiliser webkitNotifications. Il s'agit d'un système de notifications sur votre ordinateur, disponible dans la dernière version de Chrome. On peut donc une fois de plus anticiper une arrivée prochaine dans les navigateurs iPhone et Android. L'utilisation de l'API est assez simple. La seule subtilité est qu'il faut tester si l'utilisateur a bien donné à votre site la permission d'utiliser cette API. Si ce n'est pas le cas, il faut la demander, en passant en paramètre la fonction qui doit être invoquée si l'utilisateur donne effectivement son accord. 

Conclusion

Dans cet article, nous avons fait un rapide tour d'horizon de la plupart des nouvelles fonctionnalités de HTML 5 liées à l'IHM, depuis les nouveaux éléments jusqu'aux nouveaux styles en passant par les canevas qui permettent de dessiner. Ces fonctionnalités (avec quelques exceptions notables vers la fin) sont toutes à votre disposition sur les navigateurs à base de Webkit que l'on trouve sur iPhone et sur Android. D'autres plateformes populaires commes les smartphones Blackberry et Nokia sont en passe d'obtenir des navigateurs plus puissants qui supportent les technologies que nous avons vues dans cet article. En tant que développeur Web mobile, vous avez la possibilité de toucher une large portion d'utilisateurs avec des fonctionnalités visuelles plus riches que tout ce à quoi vous aviez jamais eu accès avec HTML, CSS et Javascript dans les navigateurs classiques. Dans les quatres premières parties de cette série, vous avez découvert bien d'autres nouvelles technologies (comme la géolocalisation et les Web Workers) qui sont également disponibles sur ces incroyables nouveaux navigateurs mobiles. Le Web mobile n'est pas une version allégée du Web pour lequel nous avons programmé pendant des années. C'est une version plus puissante et pleine de possibilités.