nota-bene.org > Sur le web > Liens, 17 novembre 2009

Liens, 17 novembre 2009

À propos de cet article

Un article de Stéphane

Publié le 17 novembre 2009

URL courte : http://nota-bene.org/367

1 commentaire

Des polices sur le web, des évolutions d’interfaces applicatives, de l’accessibilité du placement des éléments HTML dans les pages, et du beau pour finir et vous motiver à lire toute la page.

Polices web, un art encore délicat

Il n’est pas encore si aisé d’inclure des polices dans une page web. Tout d’abord il faut se dépêtrer d’un système de droits qui fait passer le droit d’auteur pour de la roupie de sansonnets (sans compter que l’inclusion de polices dans une page web n’est que rarement encore prévue dans les licences d’utilisation des polices), mais il faut ensuite comprendre les subtilités des polices locales, sans compter les différents formats.

C’est toujours plus facile de laisser les autres essuyer les plâtres, reconnaissons-le, mais profitons-en pour apprendre à notre tour en lisant l’expérience de Jonathan Snook du système d’embedding des polices. Nous en sommes encore aux balbutiements, on tâtonne avec les inclusions de polices comme on tâtonnait il y a quelques années avec les tailles proportionnelles.

Pendant que nous sommes sur le sujet des polices, Mozhacks (le site des bidouilles pour Mozilla) parle d’un nouveau format, WOFF. Si j’ai bien compris c’est le même principe technique que les EOT de Microsoft, mais en open-source. Le gros intérêt de ce système, à mon avis, vient du fait que d’avance un certain nombre de vendeurs de polices ont exprimé leur soutien à ce nouveau format. Pour la partie technique, il s’agit de repackager des TTF ou des OTF et de les recompresser pour fournir un fichier plus adapté aux bandes passantes que les formats bureautiques.

La fin du WYSIWYG ?

Jakob Nielsen a une personnalité particulière qui a entraîné une relation d’amour/haine avec le monde du web, par ses prises de position radicales. Malgré cela il vaut d’être lu, souvent même avec du recul. Par exemple je viens de retomber sur un article de 2005 sur le nouveau paradigme d’affichage des contrôles dans Microsoft Office 2007 qui exprime bien l’évolution de l’interface graphique.

Si vous connaissez l’Office 2007, vous savez que les barres d’outil sont maintenant adaptées en temps réel au contexte d’écriture du document. Nielsen explique comment l’approche WYSIWYG ne pouvait plus tenir avec une interface statique : quand un logiciel comporte 1500 commandes, il est difficile de devoir toujours aller explorer des sous-sous-sous menus. Le résultat des études des ergonomes de Microsoft a montré qu’on pouvait changer dynamiquement (au besoin) l’organisation des barres d’outils, et que les utilisateurs deviennent plus productifs. Un bon résumé de l’évolution de l’interface de l’Office chez Jakob Nielsen, donc, malgré son titre tapageur (parce que ça reste du WYSIWYG quand même).

Placement des éléments en HTML

Quand j’accompagne des projets qui font de l’Ajax, je leur dis souvent de générer des conteneurs vides en fin de page et de les peupler au moment où on récupère des données, puis de pointer vers ces conteneurs pour que la navigation au clavier ou avec une revue d’écran soit facilitée.

Marco Zehe (qui va finir par devenir un de mes bloggueurs de référence) explique qu’avec sa revue d’écran, il perd systématiquement ses repères dans une page quand on utilise cette méthode (c’est aussi ce que me rapportent mes collègues aveugles). Marco propose donc, comme quand on fait une barre d’onglets, de générer le contenu à la proximité de l’élément qui déclenche sa génération. Je vote pour et je vais mettre en pratique.

Une exposition numérique

Pour finir, Karl va voir une exposition et nous en fait profiter. Il faut regarder les vidéos, c’est fascinant.

Et puis pour le plaisir, un petit article avec deux photos magnifiques, toujours chez Karl. (je suis souvent tenté de faire un lien vers chaque page que publie Karl, c’est très agaçant).


Commentaires

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile