Les formulaires actuels

Actuellement, il peut être laborieux de créer un formulaire pour un site web. Si nous le concevons intelligemment, nous devons avoir recours à d’autres langages comme Javascript/PHP/ASP et s’assurer d’effectuer plusieurs vérifications.  Sans vérification, l’usager peut entrer n’importe quoi et le formulaire devient inutile. Par exemple, il nous faut vérifier si l’usager entre un courriel valide ou encore si l’usager n’entre pas des lettres dans le champ téléphone. Les programmeurs utilisent normalement des « regexp » pour faciliter la validation des formulaires.

Les formulaires en HTML5

Ils ne sont pas vraiment différents que dans la version actuelle d’HTML, mais ils ont quelques ajouts intéressants que je vais décrire ci-dessous.

Les nouveaux attributs intéressants de balise <input>

autocomplete : Cet attribut peut permettre l’autocomplétion sur un champ texte par exemple. L’autocomplete est devenu assez populaire avec AJAX. Nous n’avons qu’à penser au moteur de recherches de Google qui nous suggère des mots lorsque nous commençons à taper des lettres. Il peut avoir la valeur « on » ou « off ».

autofocus : Met le focus sur l’élément en question. En arrivant sur une page, le pointeur est placé sur le champ ayant l’autofocus.

multiple : Permet d’entrer plusieurs valeurs.

pattern : Attribut fort intéressant qui permettra d’entrer une expression régulière (regexp). L’expression régulière entrée servira à valider la valeur entrée dans le champ en question.

Il y en a plusieurs autres, mais ceux que je viens de décrire risquent d’être plus utilisés.

Ce qui est également fort intéressant, c’est les nouvelles valeurs que peut prendre l’attribut « type ». Cet attribut permet de spécifier quel type de champ nous utilisons dans notre formulaire (texte, bouton radio, etc).

Voici certaines valeurs intéressantes que peut prendre l’attribut type :

url : En spécifiant cette valeur, nous indiquons que nous devons entrer une adresse de site web.

tel : En spécifiant cette valeur, nous indiquons que nous devons entrer un numéro de téléphone.

email : En spécifiant cette valeur, nous indiquons que nous devons entrer un courriel.

date : Nous devons spécifier une date au format suivant : 1900-03-27

number : La valeur entrée dans le champ doit absolument être un nombre. Aucune chaîne de caractères.

Et les autres : search, month, week, time, datetime, datetime-local, range et color pour ne pas les nommer.

Comme vous le voyez, beaucoup de nouvelles choses dans les formulaires. Rien de très complexe, mais il y aura sans aucun doute beaucoup de tests à faire pour s’assurer que tout fonctionne correctement. À noter également que ces nouveautés ne sont pas encore prises en compte par Firefox. Vous pouvez par contre vous amuser sous Chrome 3  et Safari 4.

Je vous reviens la semaine prochaine avec la suite de ce billet sur les formulaires en HTML5. Vous y découvrirez entre autres des exemples mettant en pratique les nouveautés décrites plus haut.

Pour plus de détails, je vous invite fortement à regarder la spécification d’HTML5 sur les formulaires.

Tweet This Post

Jusque là, tout va bien. Je lui dis d’accord et qu’à partir des précisions qu’il m’a données, je vais lui envoyer une soumission. J’oubliais… Le client mentionne dans un de ses courriels une précision que je redoute de plus en plus et qui est dans ce genre : « c’est juste un petit contrat.. un petit site web.. rien de très compliqué ». Quand j’entends ce genre de propos, j’ai toujours une lumière qui s’allume dans ma tête et qui me dit : WARNING, qu’est-ce qu’il entend par petit et rien de très compliqué? Soit que le client connait vraiment le web ce qui est rarement le cas ou bien justement, il croit connaître ça et que pour lui, rien n’est vraiment complexe (vous savez le genre de propos qui laisse pratiquement sous entendre : «Ben voyons, mon neveu de 12 ans fait des sites web et il dit que c’est facile! »).

Je lui fais donc un prix assez bas puisqu’il m’avait mentionné que son budget était également limité et aussi parce que j’ai plutôt tendance à avoir des contrats plus techniques ces temps-ci. Un contrat de design va faire du bien. Le client me réécrit que le prix est plus élevé qu’il aurait pensé et me demande s’il serait possible de baisser le prix. Ah bon… Pourtant mon prix n’était pas élevé. Je lui propose un compromis. Je baisse votre prix, mais vous afficher un lien vers mon portfolio en bas de votre interface. Le client décide finalement de laisser tomber puisque pour lui, c’est encore trop élevé. Quelles conclusions dois-je tirer de tout ça? Mes prix sont trop élevés? Honnêtement, je ne crois pas. Je sais ce que je vaux et je ne suis pas excessif. Ce scénario se répète souvent auprès d’amis designer ou autres personnes travaillant dans le domaine du web. Il m’amène souvent à croire que nous ne sommes pas pris au sérieux dans notre métier. Pour moi, il y a 2 types de client : le client X et le client Y.

Le client X reconnaît que nous avons une ou plusieurs expertises. Il sait que nous travaillons forts pour nous améliorer et que nous tentons chaque jour de ne pas perdre le fil d’un domaine qui est en constante évolution.

Et il y a le client Y… Ce même client qui ne connaît pas vraiment le web et ne nous prend pas au sérieux. Le client Y essaie de nous faire croire que tout est simple et que tout est facile.

Si j’ai un problème avec mon lavabo, j’appelle un plombier car il/elle est expert. Il a des expertises. C’est loin d’être gratuit, mais lui et moi savons très bien que je ne peux pas répondre au besoin que j’ai actuellement. Je paye pour un service et je suis satisfait par la suite. C’est la même chose dans le web. Tu as un besoin. Tu cherches un/une expert et tu dois t’attendre à payer un minimum pour obtenir des services de qualité.

Tweet This Post

Quelle est l’utilité de la balise <progress> ?

La balise <progress> permet d’indiquer la progression d’une tâche quelconque. Elle pourrait très bien être intégrée à des applications en ligne comme Basecamp ou toute autre application de gestion de projets. Nous pouvons facilement imaginer son utilité pour des barres de progression en nous indiquant le status d’une tâche (peu avancée, moindrement avancée, complétée, etc).

Les attributs de la balise <progress>

Cette balise peut contenir deux attributs : value et max.

L’attribut value détermine la progression d’une tâche jusqu’à maintenant tandis que l’attribut max va servir à déterminer la valeur maximale qu’une tâche peut avoir avant d’être complétée.  À noter que la valeur des deux attributs se doit d’être un float et ne doit pas dépasser 1.

Voici un exemple de l’utilisation de la balise <progress> avec une interaction Javascript :

<p>Progression de ma tâche: <progress value="0" max="1">
<span id="p"></span>%</progress></p>

<script>
    var progressBar = document.getElementById('p');
    progressBar.textContent = 0;
    function updateProgress(newValue) {
        progressBar.textContent = (newValue * 100);
    }
</script>

<p><a href="#" onclick="updateProgress(1);" title="Update progress bar">
J'ai terminé cette tâche</a></p>

Pour en savoir plus sur la balise <progress>, je vous invite à lire la description complète se trouvant dans la spécification d’HTML5 du W3.

Télécharger l’exemple sur la balise progress.

Tweet This Post

Je vais vous expliquer ci-dessous comment je m’y suis pris pour construire ma propre interface de blog en HTML5 (que j’ai par la suite adaptée pour Wordpress, mais que je ne décrirai pas dans ce billet).

Tout d’abord, il nous faut notre en-tête principal qui contiendra le titre, le slogan et la navigation principale du site.

L’utilisation de la nouvelle balise <header> est parfaite pour nos besoins mentionnés plus haut. Nous utiliserons cette balise qui elle-même contiendra la balise <hgroup> (voir mon billet la nouvelle balise hgroup) qui elle s’occupera de contenir le titre (<h1>) et slogan du site (<h2>).

Voici le code jusqu’à maintenant :

<header>
    <hgroup>
        <h1><a href="http://www.blog-html5.com" title="Blog HTML5">
        html<span>5</span></a></h1>
        <h2>The future is near</h2>
    </hgroup>
</header>

Nous avons donc en place notre en-tête qui contient le titre et slogan du site. Il nous faut maintenant y intégrer notre navigation principale.

<nav>
    <ul>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
    </ul>
</nav>

À noter que nous utilisons maintenant la balise <nav> pour contenir notre navigation principale. Cette balise a été créé pour aider la sémantique du code en HTML5 afin que l’on repère plus facilement les zones navigables d’un site web. Il faut par contre faire attention de ne pas surutiliser cette balise qui ne doit pas être utilisée à chaque fois que l’on a une série de liens.

Jusqu’à maintenant, rien de trop complexe, seulement la mise en place des nouvelles balises à leurs endroits respectifs. Nous pouvons déjà remarquer que la sémantique est améliorée et que l’on ne retrouve pas de div=” header” ou ul=”nav”.

Une fois l’en-tête créé, on s’attaque au contenu même de l’interface. Le contenu contient évidemment nos articles de blog. Nous avons donc besoin d’une section qui contiendra plusieurs articles. Comme si c’était arrangé avec le gars des vues, la balise <section> ainsi que la balise <article> vont s’occuper de tout ça.

La balise <section> parle assez d’elle-même. Elle sert à définir une section quelconque d’un site Web. Dans notre cas, c’est la section qui contient nos articles de blog.

Voici le code qui va répondre à nos besoins :

<section>
    <article>
        <header>
            <h3>Mon blog sur HTML5</h3>
            <p class="articleDate"><time>12 octobre 2009</time></p>
        </header>
        <p>HTML5 est pour bientôt. Blablabla.</p>
        <footer>
            <ul>
                <li>Auteur Simon Guérin</li>
            </ul>
        </footer>
    </article>
</section>

Encore une fois ici, la sémantique parle d’elle-même. Nous avons une section qui contient un article qui lui-même contient un en-tête (titre du blog + sa date de publication), le texte de l’article et finalement un pied de page (auteur de l’article).

Rien de très sorcier mise à part de comprendre la mise en place des nouvelles balises HTML5. Un article a toujours un titre et une date de publication. Il est donc logique de placer le tout dans l’en-tête de l’article (<header>). Nous retrouvons également le pied de page défini par la nouvelle balise <footer> qui est parfaite pour définir l’auteur de l’article. L’approche utilisée ici peut s’appliquer à beaucoup d’autres scénarios. Il suffit de prendre le temps d’analyser chacune des sections d’un site web.

Nous avons un en-tête, nos articles, mais il manque quelque chose non? L’affichage de nos tweets! Nous allons placer à la droite de nos articles, nos derniers tweets provenant de Twitter. Pour ce faire, je vais utiliser la balise <aside> qui a pour définition de représenter une section qui est reliée au contenu tout près de cette même balise. Elle peut également servir pour représenter une « sidebar ». Je crois que cette nouvelle balise va fortement être utilisée pour souvent représenter le contenu à droite dans un blog (Twitter, tags clouds, derniers billets, etc).

Le code à rajouter est le suivant :

<aside id="twitter_div">
    <h2>My Twitter feed</h2>
    <ul id="twitter_update_list">
        <li></li>
    </ul>
</aside>

Vous devez également rajouter les 2 lignes suivantes avant la fermeture de la balise </body>. Ces 2 lignes permettent de synchroniser le tout avec Twitter. À noter que vous devrez changer mon nom americanwhore par votre Twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/
blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/
user_timeline/americanwhore.json?callback=twitterCallback2&amp;
amp;count=10"></script>

En somme, les nouvelles balises HTML5 vues dans ce billet n’ont pas été créé par hasard. HTML5 va grandement améliorer la sémantique des pages Web et il deviendra plus simple d’interpréter le contenu de chaque page.

Télécharger l’exemple complet pour créer une simple interface de blog en HTML5.

Vous pouvez également voir un autre exemple que j’ai fait en gardant le même code HTML5, mais arrangé différemment avec CSS.

Tweet This Post

Il existe par contre un fichier Javascript permettant de « contourner » le problème. Il suffit de placer les quelques lignes de code ci-dessous dans votre balise <head> pour que votre HTML5 soit rendu sous Internet Explorer.

<!–[if lte IE 8]>

<script type=”text/javascript” src=”js/html5.js”></script>

<![endif]–>

Télécharger le fichier html5.js

Voir aussi cet article d’HTML5 Doctor qui explique comment utiliser HTML5 sous Firefox 2 et Camino

Tweet This Post

Le thème est encore en beta, mais il est tout à fait fonctionnel. Il vous faudra, par contre, légèrement l’adapter selon vos besoins et avoir quelque peu de connaissance en HTML pour pouvoir l’éditer.

Le nom du thème est Inspire qui fait évidemment référence au nom de domaine de mon portfolio, soit  http://www.ins.pire.me.

Je vous invite donc à l’essayer et de me tenir informé si vous l’utilisez.

Dans un billet que je vais écrire sous peu, j’expliquerai comment construire une interface simple de blog en HTML5. Vous pourrez donc créer votre propre interface facilement.

Télécharger le thème Wordpress Inspire fait en HTML5 par Simon Guérin

Cheers.

Note pour les programmeurs/intégrateurs : Vous remarquerez peut-être plusieurs erreurs reliées aux “html entities”. En effet, il semble avoir encore un problème de ce côté avec HTML5. J’y reviendrai dans un autre billet…

Tweet This Post