Aller au contenu

Yet Another Entrepreneur Blog

Je suis Youen Chéné, fondateur de Webvert, contributeur à Boavizta, advisor au Bear Studio, 10ans+ bénévole à Codeurs en Seine.

Ici, je parle Web, Sobriété Numérique, Programmation, Entreprenariat, Domotique et Rétrogaming (Amiga).

Retrouvez ce blog sur Gemini

Catégorie: Accessibilité

GWT avancé : Panel et rendu HTML

Afin de compléter les nombreux articles de découverte et de tutoriaux sur GWT, voici le premier article d'une série nommé "GWT avancé".

Pour rappel, GWT est un framework web et ajax de google qui génère votre site en javascript optimisé pour chaque navigateur à partir de code Java.

Cet article va mettre en avant l'utilisation des panels dans GWT. En effet, il est possible d'utiliser une grande variété de panels : FlowPanel, HorizontalPanel, VerticalPanel; ScrollPanel, Grid, etc...

Le premier réflexe que l'on entends dans les présentation, c'est de s'abstraire que le rendu (HTML dans un navigateur). Il suffit de programmer comme on fabrique une application SWT ou Swing (Entendu dans des pres' de Sami Jaber). Et bien après plus d'un an et demi sur ce framework, je pense que c'est une grosse bétise.

Voici les éléments de mon explication :
  • Les bonnes pratiques de développement web disent que il ne faut utiliser les tableaux que pour les données tabulaires, le reste d'une page web doit être mis en page en appliquant un style (CSS) sur des éléments de contenu
  • La plupart des panels de GWT génèrent des tables par exemple si on fait un HorizontalPanel qui contient 2 VerticalPanel, cela génère une table qui contient 2 tables. (magnifique!)
En conséquence, j'ai appliqué les 2 règles suivantes :
  • Pour structurer les élements, le seul panel autorisé est le FlowPanel (qui génère un div) .
  • Pour les données tabulaires (et uniquement pour cela), j'utilise le Grid ou la FlexTable.
Avec un peu de recul, ces 2 règles ont les bénéfices suivant :
  • Un code plus compact (toutes les instructions de mise en page sont dans le CSS), les fichiers générés par GWT sont donc plus petits (donc plus rapide à charger pour l'utilisateur). C'est même plus rapide à programer.
  • Une meilleure séparation de la mise en page et du code.
  • Une meilleure compatibilité de la mise en page entre navigateur (sur les tableaux c'est souvent difficile).
  • Un HTML généré plus léger, plus simple, plus compréhensible et plus rapide à traiter pour le navigateur (par exemple sous IE7 la génération d'une liste d'élève est passé de 4 secondes à immédiat en passant en FlowPanel).
  • Et enfin une page plus accessible et lisible par les lecteurs audios de site web (pour les mal-voyants).
Le prochain article parlera de GWT et de ses problèmes de référencement avec comment le mélanger avec une page statique pour la prise en compte de la partie AJAX et des intéractions.

Paris Web 08 : journée 1 - Les geeks ont du coeur

C'est par une présentation sur l'ergonomie des clients riches que la première journée ParisWeb08 à commencé (enfin par une demi conférence pour moi grâce à la SNCF). C'est une présentation de Amélie Boucher l'auteure du livre ergonomie web.

Ce qu'il faut retenir de la présentation : prenez le temps d'afficher les feedbacks aux utilisateurs, multiplier les interactions et l'accompagner dans l'apprentissage de l'application.

La deuxième conférence est elle dédié à l'amélioration de la qualité et de la qualité des sites web. Elie Sloïm présente une approche d'amélioration continu.

Ce qu'il faut retenir de la présentation : faire monter en accessibilité progressivement un parc de site web plutot que de mettre un site à 100% de validation des critères et de communiquer dessus. En effet, les utilisateurs qui en ont besoin prèfère avoir un ensemble de site qui valide 60% des critères.

La matiné s'est finis avec Christian Heilmann et son screaming monkey (Yahoo!) qui met avant le fait qu'il y a actuellment énormement de framework et de bibliothèque et d'outil qui nous permettent d'implémenter des solutions web modernes et accessibles avec (relativement) peu de code.

Ce qu'il faut retenir de la présentation : vous n'avez pas d'excuse, vous pouvez rendre vos sites accessibles et ergonomique maintenant! (En bon français, arréter de vous pignoler, sortez vous les doigts du c.. ).

De mon avis, l'après midi a été remplie par la meilleure conférence des 2 jours puis par la plus ennuyeuse.

La conférence "Accessibilité: des volontaires" de part sa mise en scène et son sujet a vraiment capté le public. Elle était tenu par Stéphane Deschamps (France Télécom Orange) et Aurélien Lévy (un consultant de Elie Sloïm - Temesis). Le principe était de mettre en scène des situations de handicap pour mettre en avant les difficultés de navigations. Cela a permis de mettre en avant des solutions connus et les limites des outils actuels (lecteurs audio d'écran).

Parmi la masse d'information, quelques "tips":
  • Tester le site dans un contexte de difficultés (mauvaise qualité d'écran, écran exposé au soleil), pour savoir si le site est lisible.
  • Dans le même cadre respecter un ratio de contraste supérieure à 3:1 (je sens que ca discuter dur avec mon graphiste). Des outils sont déjà disponibles.
  • 36 des règles d'accessibilité sont aussi des règles d'amélioration du référencement.
  • Faire des liens auto descriptif et non des "cliquez ici".
  • Structurer simplement le site (pour les lecteurs audio).
  • Ne pas oublier de préciser la langue dans les balises html (pour les lecteurs audio).
  • Et enfin bien préciser les attributs alt pour les images (pour les lecteurs audio) et ceux qui désactivent les images (modem 56k).
Ce qu'il faut retenir de la présentation : c'est qu'il n'y a pas que les gros handicaps (cécité, mobilité réduite, surdité) mais aussi un grand nombre de "petits" handicaps (mal voyance, daltonisme, trouble de la concentration, tremblement) et le fait d'améliorer pas à pas les sites permet de le rendre accessible à un plus grand nombre de personnes pour qui la navigation de le site était agacente et pénible. Au contraire, se dire qu'on n'arrivera pas à rendre la site accessible à un aveugle et que ce n'est pas la peine de faire quelque chose est une grossière erreur.

La dernière conférence était sur le référencement par les robots de recherche, de la redite...

Enfin, la table ronde finale était en faite la suite de la présentation sur l'accessibilité, très complémentaire.

Pour conclure, une 1ère journée très intéressante, un gros travail à faire sur mon parc de site web (dont Fermiers d'à côté) pour les rendre plus ergonomique et plus simple.

Petite inquiétude, a vu de nez, très peu de SSII/Société de conseil généraliste étaient peu présentent lors de la conférence. Est-ce une partie négligée par ces gros faiseurs ? Je vais enquêter auprès du pôle interface chez Logica Management Consulting. J'espère être surpris ... agréablement (si c'est pas politiquement correcte comme tournure).