html5

Récemment, j’ai vu passer certains trucs dans mon Twitter concernant les transitions en CSS3. Le premier exemple que j’avais vu ne m’avait guère impressionné, mais je m’y suis un peu plus intéressé et voilà que je trouve cela beaucoup plus convainquant.

Compatibilité

Pour l’instant, les transitions en CSS3 sont compatibles sur Safari 4 et Chrome 3.

Les propriétés à connaitre

transition-property : détermine sur quelle propriété CSS nous voulons que la transition soit appliquée (ex : background, color, etc)

transition-duration : détermine la durée de la transition

transition-timing-function : détermine l’accélération/décélération de la transition

transition-delay : détermine le délai avant que la transition s’effectue

Raccourci/Shorthand

selecteur  {
    transition: opacity 2s ease-in;
}

Voici deux exemples sur les transitions CSS :

Demo 1

Demo 2

Vous pouvez télécharger ci-dessous les deux exemples que j’ai faits avec les transitions.

Télécharger le premier exemple sur les transitions CSS.

Télécharger le deuxième exemple sur les transitions CSS.

Que va amener les transitions CSS ? Ces nouvelles possibilités vont nous amener à délaisser encore une fois Flash. Je dis encore une fois, puisqu’HTML5 nous amène déjà à le délaisser. Nous n’avons qu’à penser à la balise <video> entre autre. Il ne sera plus nécessaire d’avoir recours à Flash et d’absolument utiliser Javascript pour ajouter plus d’interactivité dans nos sites Web. Les transitions CSS « vont faire la job » pour créer des animations de base.

Avec toutes ces nouvelles possibilités, il n’y aura plus d’excuse pour abuser de Flash dans nos sites Web…

Voici un excellent site Web pour voir différents exemples sur les transitions en CSS3 :

http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Pour en savoir davantage sur les transitions en CSS3, je vous invite également à lire la spec du W3C.

Tweet This Post

Court billet pour ceux et celles qui n’ont jamais réussi à faire valider leur embed Flash.

Voici un code qui vous rendra valide par le W3C :

<object type="application/x-shockwave-flash" data="movie.swf"
width="500" height="500">
    <param value="movie.swf" />
</object>

Source prise d’un débat sur comment valider Flash : http://forums.hostmysite.com/about497.html

Enjoy and share!

Tweet This Post

Voici la suite du billet formulaires HTML5 partie 1. Ce billet comporte deux exemples reprenant les attributs décrient dans la première partie. Vous remarquerez que ces deux formulaires ressemblent beaucoup à ceux que vous pouvez construire en HTML4 ou XHTML.

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

À une certaine époque, il était « à la mode » d’utiliser des tables pour créer les gabarits de nos sites Web. Nous savons aujourd’hui que cette pratique est dépassée et qu’il est préférable d’utiliser les <div> ou encore les nouvelles balises d’HTML5 si vous avez commencé à programmer en ce langage.

Aujourd’hui, je vous propose un exemple tout simple d’une utilisation des tables tout en ayant en tête l’accessibilité de ce dernier. Il suffit de rajouter deux éléments pour aider certaines personnes ayant un handicap quelconque à profiter de votre site. J’utilise rarement les tables dans mes projets car l’occasion ne se présente pas. Dans l’application en ligne que je suis en train de concevoir avec d’autres personnes, il y a plusieurs tableaux et c’est une bonne occasion de mettre en pratique ce que je vais proposer ci-dessous.

L’attribut summary

Cet attribut de la balise <table> aide grandement à la compréhension du tableau en question. En ajoutant cet attribut qui décrit sommairement votre tableau, les gens utilisant des « screen reader » pourront immédiatement savoir de quoi ça parle. Pour la plupart d’entre-nous, le tableau nous paraît évident puisque nous le voyons, mais essayé d’imaginer ce que ça peut être pour une personne aveugle qui parcours votre site Web.

Voici un exemple :

<table summary="Présentation des statistiques des ventes du dernier
trimestre. Le tableau contient trois rangées et deux colonnes.">
...
</table>

La balise <caption>

Cette balise sert à définir le titre de votre tableau. Elle doit être placée immédiatement après la balise <table> avant vos <th>, <tr> et <td>. Par défaut, elle est placée en haut au centre avant toutes les cellules. Il suffit de jouer un peu avec CSS pour lui donner un peu plus de style. En ajoutant cette balise, c’est la façon la plus accessible de donner un titre à votre tableau.

Exemple :

<table summary="Présentation des statistiques des ventes du dernier
trimestre. Le tableau contient trois rangées et deux colonnes.">
    <caption>Statistiques des ventes du trimestre de l’année 2009</caption>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    ...
</table>

Rien de compliqué eh? En ajoutant ce qui est mentionné ci-haut, vous vous assurerez que vos tableaux sont plus accessibles à tous.

Voici un lien intéressant pour en savoir davantage sur l’accessibilité des tableaux en HTML : http://www.usability.com.au/resources/tables.cfm

Et vous, quels sont vos trucs pour rendre vos tableaux plus accessibles?

Tweet This Post