Feuilles de styles utilisateur avec Internet Explorer

Comme dans beaucoup d’agences nous utilisons quotidiennement un outils en ligne pour saisir les temps passés sur les différents projets. Classiquement on retrouve des listes déroulantes (<select />) pour choisir un premier périmètre projet puis un projet et enfin un sous projet. En ce qui me concerne les libellés sont trop longs et la taille des <select /> étant fixée avec des styles en ligne, on ne voit pas les libellés sans passer la souris dessus. Je me suis donc penché sur la question des feuilles de styles utilisateurs afin de forcer l’augmentation de la largeur de ces menus.

Il y a une fonctionnalité d’Internet Explorer qui permet de spécifier une feuille en 3 clics et qui pourrait donc convenir aux usagers non avertis et qui ne nécessite donc pas d’installation de plug-in ou d’édition de configuration. Merci de bien comprendre que le but de cet article est de répondre à une besoin large d’utilisateurs dans un contexte global ou Internet Explorer est utilisé par un public nombreux et pas forcément rôdé aux bons navigateurs.

Au niveau de la feuille de styles, cela donne le code simple suivant : #identifiant {width: 300px !important;}

« !important » permet d’augmenter le poids de la règle et donc de surpasser les styles en ligne.

Attention toutefois, l’application d’une feuille de style utilisateur s’applique à tous les sites que vous visitez ce qui peut provoquer des effets de bords importants sur des identifiants courants comme « #menu » ou « #nav » par exemple.

J’ai placé une page de démonstration ici : http://adrien.leygues.free.fr/test/10pxText.htm qui donne le résultat suivant : 

Si je veux appliquer une feuille locale que vous pouvez télécharger à cet url : http://adrien.leygues.free.fr/test/feuille.css , il n’est actuellement pas possible d’indiquer un URL comme source du fichier.

Je passe par le menu « Outil » puis je clique sur le bouton « Accessibilité » en bas à droite :

qui ouvre le panneau suivant :

dans lequel je spécifie le chemin vers la feuille à appliquer, ici « d:\feuille.css ».

Une fois la feuille chargée, j’obtiens le résultat suivant dans lequel le texte est bien passé de 10px à 20px : 

En ce qui concerne Firefox, vous pouvez passer par la WebDeveloper Toolbar via le menu « CSS » > « Ajouter une feuille de style personnalisée ».

En vrac

http://sixrevisions.com/design-showcase-inspiration/25-elegant-workstations-for-your-inspiration/

http://portablecontacts.net/

http://meyerweb.com/eric/thoughts/2009/09/07/html5-and-you/

http://oseres.com/fr/2009/06/un-iphone-geant-24.html

http://www.mnot.net/cache_docs/index.fr.html

http://10gui.com/video/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

http://www.webdesignerwall.com/tutorials/css-design-out-of-the-box/

new device API for Firefox 3.6: orientation

http://datavis.tumblr.com/#213657045

http://wiki.github.com/fnagel/jQuery-Accessible-RIA

http://sixrevisions.com/infographs/browser-performance/

Eye-Tracking – Occulométrie : J’ai testé pour vous

A l’occasion des ateliers Paris Web qui se sont déroulés ce samedi 10 Octobre 2010, j’ai pu tester pour vous un système d’oculométrie. Ce système présenté par Antoine Luu représentant de la société Tobii permet via une caméra et une carte périphérique spécialisée de suivre le mouvement des yeux.

L’objectif est double. Il permet d’une part de filmer les mouvements de l’oeil sur l’écran pour identifier le parcours d’un utilisateur lors de sa visite sur une application et d’autre part de commander une interface. L’enregistrement est restitué sous forme de zones de chaleurs ou retrace le parcours effectué par les yeux de l’utilisateur :

Crédit photo : Monty Metzger – Licence CC

Une partie de cet atelier a été filmé et mis à dipos sur Viméo via Maurice Svay, la voici : 

Paris Web 2009 : Atelier Eye Tracking (extrait) from Maurice Svay on Vimeo

.

Après un rapide calibrage de l’appareil, j’ai commencé par faire défiler du texte sur la droite de l’écran de haut en bas, puis de bas en haut. La vitesse de défilement varie en fonction de la distance entre l’axe horizontal médian de l’écran et les bords supérieurs ou inférieurs de l’écran. Le même test est effectué pour faire défiler horizontalement des pochettes de CD (Non ! pas Tokyo Hotel ><) sur un axe horizontal.

La prise en « oeil » est très rapide, le défilement se contrôle facilement et j’avoue être bluffé par une telle technologie. La système est disponible pour 20 000 euros environ et est également disponible à la location.