html5

The future is near

Être un bon designer Web

Des personnes qui se décrivent designer Web, il y en a plein. Par contre, ceux que l’on pourrait qualifier de bon, j’en connais peu. En faisant moi-même du design Web, j’avoue que mes standards sont quand même élevés pour que je puisse affirmer qu’un designer Web est très bon.

Parfois, je me fais demander : qu’est-ce qui caractérise un bon designer Web? Il doit exister une multitude de réponses pour ce genre de question, mais voici la mienne décrite en quelques points.

Un designer Web est passionné

Un bon designer Web doit tout d’abord être passionné par ce qu’il fait. Bon ok, ce n’est pas la grosse réflexion du siècle, mais c’est important que ce soit une des premières choses qui motive le designer à créer.

Un designer Web ne tombe pas en amour

Voilà une des choses les plus difficiles lorsque nous créons une interface. J’ai moi-même tendance à m’attacher aux interfaces que je crée. Par contre, il faut savoir la délaisser et c’est ce que j’améliore de projet en projet. Il est normal d’aimer ce que l’on fait, mais il ne faut pas être résistant aux changements. Il ne faut jamais oublier qu’un design est constamment en évolution et qu’il n’est jamais terminé (tout comme l’ensemble du site Web).

Un designer Web se remet toujours en question

Pour un  peu reprendre le point 2, je crois que tout au long du processus de création, le designer Web doit se poser des questions. Il doit se demander si ce qu’il fait peut être amélioré, si l’interface répond aux besoins des utilisateurs, etc. Ne jamais oublier qu’un site Web est créé pour servir ses utilisateurs et non pas l’équipe qui le conçoit.

Le designer Web n’est pas en guerre contre l’ergonomie

L’ergonomie/l’utilisabilité doit être présente pendant toutes les phases d’un projet. Le designer se doit de connaître minimalement les règles de base de l’ergonomie et de les appliquer à ses interfaces. Il n’est pas obligé de devenir ergonome, mais faire une peu de place à l’ergonomie pour soulever certaines questions ne pourra qu’améliorer l’interface.

Le designer Web connaît CSS et les nouvelles technologies

Vous avez déjà travaillé avec un designer print qui devait vous faire un site Web? Il a créé la plus belle interface que vous n’aviez jamais vue, mais tous vos intégrateurs ont décidés de quitter votre compagnie.  Un designer Web qui connaît en plus CSS (comme moi.. ok j’arrête de me vendre!) ne pourra que se faire chum avec vos intégrateurs. Il sait parler le même langage qu’eux et il crée en fonction de ce qui est possible d’être fait sur le Web. De plus, s’il se tient au courant des nouveautés côté CSS3 et HTML5, pas besoin de vous dire qu’il pense déjà à l’avenir et de comment il pourra faire évoluer ses interfaces.

En gros, c’est ça pour moi un bon designer Web. Il existe plusieurs autres points que je n’ai pas nécessairement mentionnés ici, mais ceux mentionnés ci-haut sont, à mon avis, les plus importants. Pour ce qui est de moi, je ne prétendrai jamais être parfait. Je fais de mon mieux chaque jour et je tente de m’améliorer de projet en projet.

Be strong.

Post to Twitter Tweet This Post

HTML5 Video – La Guerre des Codecs

Non, ce n’est pas le titre du prochain box office, mais bien la triste réalité avec HTML5 aujourd’hui. Pour ceux qui ne suivent pas HTML5, la spécification est pratiquement complète et il ne manque vraiment pas grand chose pour qu’on puisse justifier de faire le grand saut vers ce langage prometteur.

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.

Post to Twitter Tweet This Post

Mes “résolutions” 2010

Bon voilà, je me lance moi aussi dans les “résolutions” que je vais tenter de tenir tout au long de l’année 2010…

1. Mes amis – Une des choses les plus importantes pour moi sont mes amis et mes proches. Au cours de la dernière année, j’ai certainement délaissé certains amis pour x et y raisons. Je me donne donc comme résolution de passer plus de temps avec eux.

2. Moi – Peut-être que ça va sembler contradictoire avec la première, mais cette année, je veux prendre encore plus de temps pour moi (mais pas en délaissant les autres…). Je vais me faire plaisir par toutes les bonnes choses de la vie. Je m’engage à profiter de chaque moment à fond.

3. Le projet X – Je travaille sur un très gros projet avec deux amis et ce projet va se pointer le bout du nez au cours de l’année 2010. Je ne peux malheureusement pas en parler, mais ça va se retrouver sur le Web! Ce projet est une des mes priorités et il est certainement un des plus importants de ma vie jusqu’à maintenant. Je m’engage à bien le faire avancer avec l’aide de mes collègues.

4. Le projet Y – J’ai déjà mentionné que je n’avais pas de vie? Mon autre projet que je peux parler un peu plus librement est celui avec 3 de mes bons amis (hello guys). Seulement pour “teaser” quelque peu, il s’agit d’une association avec des amis qui sont également pigistes. D’ici environ 1 mois, vous en aurez des nouvelles. Je veux vraiment bien mener à terme ce projet avec mes amis. Notre crédibilité en dépend.

5. Compétences – Je me défini comme un designer Web et développeur CSS. J’ose prétendre bien me débrouiller en design Web et CSS puisque j’adore ça. Par contre, j’aime aussi beaucoup l’ergonomie. Cette année, je veux continuer de m’améliorer de ce côté pour devenir de plus en plus crédible. Je m’engage à terminer mes livres sur ce sujet qui me passionne au plus haut point. HTML5 + CSS3 sont évidemment aussi sur quoi je vais continuer de lire tout au long de l’année.

6. Travail – Je suis présentement pigiste qui prend des contrats de design Web et d’intégration XHTML/CSS. Pour l’instant, j’ai la chance de vivre en faisant ce qui me passionne. J’ai également la chance d’avoir de très bons clients qui m’apportent et m’apprennent beaucoup. Je souhaite continuer d’entretenir d’excellentes relations avec mes clients et d’en avoir plusieurs nouveaux!

7. Voyage – Je n’ai pas beaucoup voyagé jusqu’à maintenant et j’aimerais fort bien faire un voyage au cours de l’année 2010. Seul ou avec des amis, je verrai ce qui conviendra le mieux…

Je ne suis pas très adepte des résolutions, mais je crois que le plus important est de se rappeler justement ce qui est important pour nous. Les points mentionnés plus haut m’aideront à être encore plus fier de cette nouvelle décennie qui part du très bon pied.

Bonne année 2010 17 jours en retard.

Post to Twitter Tweet This Post

La technique @font-face (1 de 2)

Certains utilisent sIFR, d’autres utilisent Cufon et d’autres préfèrent @font-face en CSS. Le but de ce billet n’est pas de vanter une des techniques en particulier, mais plutôt de vous décrire la technique ­@font-face qui est à mon avis, quelque peu délaissé. Cette technique pourrait par contre être de plus en plus utilisée avec l’utilisation de CSS3.

@font-face n’est pas une nouveauté de CSS3. Cette technique était déjà présente avec CSS2 et nous pouvions même l’utiliser avec la version 5 d’Internet Explorer. Le problème est qu’elle prenait seulement en compte les polices ayant le format .eot et les autres navigateurs, à l’époque, avaient décidé de ne pas utiliser ce format.

@font-face est une propriété CSS qui est prise en compte par Firefox depuis la version 3.5 (donc il y a peu de temps…) ce qui peut expliquer le pourquoi qu’elle n’est pas encore la plus populaire à l’heure actuelle.

Comme sIFR et Cufon, elle apporte l’avantage que les utilisateurs d’un site Web n’ont pas à avoir les polices utilisées sur le site Web. Par exemple, je pourrais décider que mon texte est uniquement écrit en Futura et même si vous n’avez pas cette police d’installé sur votre ordinateur, vous verriez pareil l’affichage avec le texte en Futura.

Cette méthode ne requiert également aucun code JavaScript comparativement à Cufon et sIFR. Nous n’avons donc plus besoin de nous soucier si JavaScript est activé ou non.

Jusqu’à maintenant, cette technique semble avoir que des avantages, mais elle n’est évidemment pas parfaite. En effet, en utilisant la technique @font-face en CSS, nous exposons facilement à la vue de tous le téléchargement de nos fontes. En regardant notre code source, n’importe qui peut voir l’emplacement du fichier et le télécharger. Ce n’est pas un problème pour des fontes gratuites, mais dû moment que ce sont des fontes payantes, nous tombons dans l’illégalité.

Prenons par exemple une personne achetant son pack Helvetica. Il utilise Helvetica Neue pour son texte et utilise @font-face. Je me rend sur le site Web en question, analyse quelque peu le code source et en moins d’une minute j’ai maintenant Helvetica Neue comme nouvelle fonte sur mon ordinateur.

La ligne peut être mince quant à l’utilisation de cette méthode. Elle peut être fort utile si vous utilisez des fontes gratuites qui ne se retrouvent pas nécessairement sur l’ordinateur de vos visiteurs. Par contre, il faut rester très vigilant pour ne pas tomber dans l’illégalité.

Dans le prochain billet, je montrerai un exemple d’utilisation de la technique @font-face.

Post to Twitter Tweet This Post

Typekit et leur solution quasi-miracle

Quel designer/développeur Web n’a pas entendu parler de TypeKit dans les derniers mois ou dernières semaines?

Ayant été invité à la beta il y a de cela plusieurs semaines, je n’avais pas vraiment pris la peine d’aller y jeter un coup d’oeil depuis un bon bout de temps. C’est en y allant dernièrement que je n’ai pas été très convaincu…

L’idée globale de TypeKit est intéressante, mais tant qu’à moi, elle est loin de révolutionner le Web. TypeKit va aider à contourner les problèmes de piratage des fontes, mais sinon? Les fontes proposées jusqu’à maintenant peuvent servir pour certains projets, mais comme je le lisais sur un autre blog, que faire dans le cas où je me dois d’utiliser du Helvetica?

TypeKit va devoir s’entendre avec les vendeurs de fontes pour que l’on puisse par exemple utiliser nos propres fontes si nous les avons achetés. Il serait intéressant d’avoir dans son compte un endroit où nous pourrions téléverser nos fontes. L’idée de pouvoir utiliser nos fontes légales en plus de celles proposées par TypeKit serait l’idéal.

Enfin, TypeKit est encore à ses débuts et pour terminer sur une note positive, l’intégration de TypeKit à nos sites Web est très facile. À peine 2-3 lignes de JavaScript et le tour est joué.

En attendant, nous pouvons utiliser TypeKit si certaines fontes proposées par eux peuvent servir dans nos projets. Sinon, il faudra encore ce tourner vers Cufon, sIFR ou une autre alternative.

À suivre…

Visiter le site de TypeKit.

Post to Twitter Tweet This Post

La balise <datalist> en HTML5

Le nom le dit, la balise <datalist> est une liste contenant des données. Mais n’existe-t-il pas déjà la balise <select> qui s’occupe de nous afficher des éléments dans une liste? Oui, mais la balise <datalist>, elle, nous l’associons avec un autre élément du formulaire comme un champ texte par exemple.

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>.

Post to Twitter Tweet This Post

Aperçu des transitions en CSS3

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.

Post to Twitter Tweet This Post

Valider son Flash par les normes W3C en XHTML

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!

Post to Twitter Tweet This Post

Formulaires HTML5 (partie 2 de 2)

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.

Post to Twitter Tweet This Post

Des tableaux accessibles en HTML

À 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?

Post to Twitter Tweet This Post

« Anciens billets