Il reste encore certains trucs sur lesquels ils doivent s’entendre et le codec à utiliser pour l’utilisation de la vidéo (<video>) fait parti de ce qui n’est pas coulé dans le béton.

En effet, il existe actuellement la guerre entre 2 codecs : H.264 et Ogg Theora Codec.

H.264

Le codec coûte 5 millions/année (oui oui) et il est utilisé par Apple (Safari) et Google (Chrome)

OGG

Codec open source actuellement utilisé par Firefox et Opera.

Microsoft dans tout ça? À ce jour, nous ne savons toujours pas vers quel codec ils vont se tourner.

Bon, le choix n’est pas très difficile à faire. OGG devrait être adopté par tous et l’histoire se terminerait là, mais ça ne semble pas être aussi simple. Google semble dire que le Ogg Theora Codec n’est pas encore tout à fait au point et qu’il est préférable de se tourner vers H.264 pour l’instant. Si vous vous souvenez, l’année dernière Google a acheté On2 Technologies qui est une importante compagnie créant de la compression vidéo de haute qualité. On2 Technologies a créé le VP3 Codec qui est la base du Ogg Theora Codec. Étrange? Google fait rarement quelque chose pour rien.

Il est clair pour moi que Google ne veut pas utiliser le codec Ogg puisqu’ils doivent être en train d’en développer un qui sera également open source. Nous risquons d’en savoir plus à ce sujet en 2010.

Tweet This Post

Cette nouvelle sorte de liste est en quelque sorte plus permissive dans le sens qu’elle nous suggère diverses options, mais nous ne sommes pas absolument obligés de choisir une de ces options là. Nous pouvons entrer notre propre valeur si la liste ne nous suggère pas ce que nous voulons.

Compatibilité

Pour l’instant, cette nouveauté d’HTML5 semble seulement fonctionner sur Opera. Firefox, Chrome et Safari devraient supporter cette balise dans leur prochaine version.

À savoir

Un peu comme lorsque nous associons un label et son champ respectif à l’aide de l’attribut for, cette fois, c’est avec l’attribut list que nous associons une liste à un champ texte.

Exemple

<form method="post" action="">
    <ul>
        <li><label for="txtMetier">Quel est votre métier?</label></li>
        <li><input type="text" list="metiers" autofocus /></li>
        <li>
            <datalist id="metiers">
                <option>Designer Web</option>
                <option>Integrateur Web</option>
                <option>Programmeur</option>
            </datalist>
        </li>
    </ul>
</form>

Consultez l’exemple de balise datalist en HTML5.

Consultez la spec d’HTML5 pour en savoir davantage sur la balise <datalist>.

Tweet This Post

Comme je l’avais mentionné, il n’y a rien de très complexe dans les nouveautés concernant les formulaires en HTML5. Les nouveautés vont surtout nous permettre de valider plus rapidement les champs de nos formulaires.

<form id="presetForm1" method="post" action="">
    <ul>
        <li><label for="txtName">courriel</label></li>
        <li><input class="text" type="email" id="txtName" maxlength="100"
        autofocus required /></li>
        <li><label for="txtPass">mot de passe</label></li>
        <li><input class="text" type="password" id="txtPass"
        required /></li>
        <li><label for="txtNom">nom</label></li>
        <li><input class="text" type="text" id="txtNom" value="Optionel..."
        onfocus="this.value='';"/></li>
        <li><label for="txtDate">date de naissance (ex: 1900-03-27)
        </label></li>
        <li><input class="text" type="date" id="txtDate" /></li>
        <li><label for="txtTel">téléphone (ex: 514-123-4567)</label></li>
        <li><input class="text" type="tel" id="txtTel" value="Optionel..."
        onfocus="this.value='';" /></li>
        <li><label for="txtUrl">site web</label></li>
        <li><input class="text" type="url" id="txtUrl" maxlength="250"
        value="Optionel..." onfocus="this.value='';" /></li>
        <li><input class="submit" type="submit" value="Send" /></li>
   </ul>
</form>

Observations sur l’exemple

Le champ courriel contient les attributs « autofocus » et « required » ce qui veut dire qu’en arrivant sur la page, c’est sur ce champ que le pointeur de notre souris sera. Ce champ est également obligatoire avec l’attribut required. De plus, le champ est de type « email » ce qui indique qu’il faut nécessairement entrer un courriel dans ce champ.

Le champ password est obligatoire avec l’attribut required.

Le champ date de naissance est de type « date » ce qui indique qu’il faut nécessairement entrer une date au format (Year-Month-Day) dans ce champ.

Le champ téléphone est de type « tel » ce qui indique qu’il faut nécessairement entrer un numéro de téléphone dans ce champ.

Le champ site web est de type « ul » ce qui indique qu’il faut nécessairement entrer une url dans ce champ.

Les nouveaux attributs et valeurs de l’attribut type sont assez simples. Nous comprenons rapidement leurs utilisations. Dans un billet futur, je ferai un exemple en intégrant Javascript aux nouveaux formulaires d’HTML5.

Tweet This Post

La balise <time> sert à indiquer l’heure ou la date. Jusque là, tout est simple.

Elle contient deux attributs : pubdate et datetime.

L’attribut pubdate est un booléen et indique une date de publication. S’il est présent, il faut spécifier la date entre <time></time>. Un article peut contenir au maximum un élément <time> ayant l’attribut pubdate (quand même logique…).

Si l’attribut datetime est présent (ex : datetime= « 2009-10-12 »), il n’est pas nécessaire que notre élément <time> contienne quelque chose. Dans le cas contraire, nous devons spécifier la date et l’heure avec l’élément <time>.

Son utilisation

La balise <time> peut être utilisée à plusieurs endroits différents dépendamment du contenu de notre site. Pour prendre à nouveau l’exemple d’un blog, la balise <time> en HTML5 pourrait être intégrée dans l’en-tête de nos articles pour indiquer la date de publication.

Voici 4 exemples de l’utilisation de la balise <time>  :

<p>Je devrais arriver à <time>19h30</time>.</p>

Avec l’attribut pubdate

<header>
    <h3>Is HTML5 a FLASH killer?</h3>
    <p>Publié le <time pubdate>2009-10-12</time></p>
</header>

Avec l’attribut datetime

<p>Écrit le <time datetime=”2009-10-12”></time></p>

Avec l’attribut pubdate et datetime

<p>Publié <time pubdate datetime=”2009-10-12”>aujourd’hui</time></p>

Dans le dernier cas ci-dessous, nous ferions un rendu de la date dynamiquement à l’aide d’un autre langage de programmation.

<p>Publié <time pubdate datetime=”2009-10-12”></time></p>

Un autre exemple serait d’utiliser la balise pour nos tweets sur Twitter. En effet, après chaque tweet nous retrouvons l’heure à laquelle notre tweet a été publié.

Ex :

<ul id="twitter_update_list">
    <li>Comment « plugger » subtilement des mots-clés comment HTML5
    dans mon blog. <time>1 hour ago</time></li>
</ul>

La balise <time> en HTML5 sera de plus en plus utilisée dans les futurs sites web. Elle peut sembler complexe au début, mais une fois que nous comprenons bien la distinction entre les attributs pubdate et datetime, nous pouvons bien l’exploiter. C’est une autre balise avec laquelle les développeurs pourront s’amuser avec Javascript, PHP, etc.

Vous pouvez également consulter la spécification du W3C sur HTML5 concernant la balise <time>.

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

Vous pouvez les utiliser sans problème sur vos sites. It’s free!

PS : Ne sachant pas parler français, elles sont en anglais.

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

Si je reprends la définition du W3C :

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Donc en gros, la balise <hgroup> permet de regrouper plusieurs éléments décrivant un en-tête de section. (ex : titre avec un sous-titre ou titre avec un slogan, etc)

Imaginons par exemple un site web corporatif qui à son logo et un slogan en dessous.

Le code approprié serait :

<header>
    <hgroup>
        <h1 id="logo">Budget en ligne</h1>
        <h2>Planifier son budget intelligemment</h2>
    </hgroup>
</header>


C’est simple, efficace et on comprend plus facilement l’intention en analysant le code source.

Tweet This Post

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

En ajoutant cela, Internet Explorer 8 prendra au moins en compte les nouvelles balises header, footer, nav, article et section. On est loin de pouvoir pratiquement tout faire comme dans Firefox ou Safari, mais c’est un début…

Tweet This Post

Voici un exemple de l’utilisation de la vidéo avec HTML5 :

<video width=”450″ height=”400″ poster=”images/bla.jpeg” controls=”controls”>

<source src=”http://tinyvid.tv/vfe/big_buck_bunny.ogv” type=”video/ogg” />

</video>

Simple n’est-ce pas? En ayant moindrement des connaissances en HTML, vous devriez être en mesure de comprendre le fonctionnement général de cette ligne de code. Je vais par contre vous expliquez l’essentiel plus en profondeur ci-dessous.

La balise peut comprendre 8 attributs (voir mon billet “Bien démarrer avec HTML5” pour y consulter la HTML5 Cheat Sheet).

Vous connaissez sans aucun doute les attributs width, height et src qui sont également utilisés pour les images. Ce qui nous intéresse est plutôt l’attribut poster, control, autoplay(qui n’est pas dans l’exemple) ainsi que la balise <video>.

L’attribut poster permet de choisir une image qui apparaîtra si la vidéo prend du temps avant de charger ou si la vidéo n’existe plus. Dans mon exemple, mon image par défaut est placée sous le répertoire images.

L’attribut controls indique au navigateur que vous voulez les contrôles par défaut. Il est également possible de créer ses propres contrôles, mais j’y reviendrai dans un autre billet.

L’attribut autoplay s’assure de jouer automatiquement la vidéo (ce que je ne suggère en aucun cas sur un site Web à moins que ce soit vraiment pertinent..).

La balise <source> me sert à déterminer l’emplacement de la vidéo ainsi que son format.

Vous pouvez donc maintenant facilement intégrer vos vidéos dans vos pages en utilisant HTML5. Bien entendu, HTML5 n’est pas encore totalement au point et la balise <video> n’est pas encore supportée par tous les navigateurs . Firefox 3.5, Chrome 3 Beta, Safari 4 et iPhone OS3 supportent assez bien la balise <video>. Est-ce que cette nouvelle méthode va remplacer l’utilisation de Flash pour insérer de la vidéo dans nos pages? Seul le temps nous le dira. Une chose est sûre, il est intéressant d’avoir une alternative à Flash.

Voici également un exemple intéressant de l’utilisation de la vidéo en HTML5. Si votre navigateur ne supporte pas HTML5, la vidéo sera lue par Flash.
http://camendesign.com/code/video_for_everybody/test.html

Tweet This Post