Webaaz » memento http://www.webaaz.com Le développement web de A à Z Thu, 19 Jan 2012 11:40:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Opquast : Sites web, les bonnes pratiqueshttp://www.webaaz.com/2010/06/opquast-les-bonnes-pratiques/ http://www.webaaz.com/2010/06/opquast-les-bonnes-pratiques/#comments Mon, 28 Jun 2010 09:00:15 +0000 Martin http://www.webaaz.com/?p=905 Opquast est aussi un référentiel mais surtout un outil de suivi de la qualité des services en ligne. Summer Sky II Photo de flickrolf depuis Flickr]]> Le web est souvent un mauvais exemple en terme de qualité, d’ergonomie ou d’accessibilité. La faute à des techniques variées, des usages approximatifs, ou à une évolution rapide des de ces techniques et de ces usages.

Pourtant avec le peu de recul que nous donne le web, des initiatives permettent de hausser un peu le niveau. Les normes du W3C par exemple permettent par leur respect de garantir que le document sera interprétable par tout les navigateurs. Les référentiels d’accessibilité permettent aux utilisateurs ayant une quelconque déficience de pouvoir surfer avec une contrainte moindre. Le projet Opquast propose un référentiel qualité web mais surtout un outil de suivi de la qualité des services en ligne.

Summer Sky II
Photo de flickrolf depuis Flickr

Présentation

La première version du référentiel à vu le jour fin juin 2004 avec la mise en ligne d’une liste de bonnes pratiques pour l’amélioration de la qualité des services en ligne.
A l’origine de ce projet, Elie Sloïm directeur de Temesis et Fabrice Bonny co-fondateur du site Openweb

C’est un formidable outil de formation, d’explication, et d’amélioration des sites.

Opquast permet de tester aussi bien la qualité de la conception que la qualité d’utilisation. Les techniques étant de plus en plus variées et complexes, une personne seule ne peut pas maitriser parfaitement toute la chaine de développement d’un site web. La liste des bonnes pratiques permet au développeur comme au décideur de vérifier les points principaux classés par domaine. Chaque bonne pratique est détaillée avec un objectif, des solutions techniques et des moyens de contrôle.

Et le petit plus, Opquast est publié sous licence Créative Commons BY-SA.

Voici les différents sites du projet Opquast :

Nouveautés

Le web évolue et la liste a donc été revue de fond en comble par les membres de l’atelier Opquast, qui ont débattu dans la bonne humeur et l’humour mais avec des avis bien tranchés, et toujours un maximum d’arguments. Un consensus nécessaire à donc fini par émerger, c’est la base de ce référentiel. Une période d’appel à commentaires publics à permis d’affiner un peu plus le travail.

Pour le côté pratique, les bonnes pratiques sont désormais filtrables en fonctions de différents critères :

  • Modèle VPTCS : Visibilité, Perception, Technique, Contenus, Services
  • Processus : prototypage, design, intégration, CMS et développements, rédaction, référencement
  • Services : e-commerce, Espaces publics, Newsletter, Syndication
  • Thème : Mobile, Internationalisation, Accessibilité, performance, Sécurité, Utilisabilité

Vous pouvez ainsi en extraire les bonnes pratiques d’utilisabilité spécifiques à la phase de prototypage par exemple.

La navigation par tags et le téléchargement des listes aux formats Excel, Open Office ou PDF sont aussi au programme.

Interview d’Élie Sloïm, directeur du projet

Le web s’est professionnalisé depuis la v1 d’Opquast, on est sur la bonne piste ?

Il me semble qu’effectivement, nous sommes sur la bonne piste, mais nous n’en sommes encore au tout début du chemin. La nécessité des approches qualité et accessibilité ne pose plus vraiment question. En revanche, ce n’est pas parce que les professionnels savent qu’il est bon de travailler sur ces sujets qu’ils sont prêts à le faire, et surtout qu’ils en ont le temps. Le niveau moyen des sites produits actuellement est encore très faible. A côté de quelques sites fort bien développés, nous voyons encore sortir beaucoup de sites qui ne respectent même pas les règles de base de la qualité Web. Il y a donc actuellement un travail énorme de sensibilisation à faire auprès de deux cibles principales. D’une part, il y a le secteur informatique, c’est-à-dire les SSII et les DSI. Faites donc un tour des sites corporate des principales SSII françaises, et vous verrez que le fossé à combler en matière de qualité et d’accessibilité Web est encore énorme. Le deuxième effort est à porter concerne les toutes petites agences Web. Nous avons récemment fait une étude dans le secteur du tourisme (camping, hôtels…) et nous analysons actuellement des sites de communes, et franchement le niveau moyen laisse fortement à désirer.

Malgré tout, le niveau des professionnels a considérablement augmenté. Ce qui semblait être un effort surhumain il y a quelques années est maintenant devenu une pratique courante dans de nombreuses agences.

La qualité web est de plus en plus présente, mais une partie du web y semble hermétique. Qui va gagner et pourquoi ?

La qualité Web est encore un non-sujet. Les sociétés qui travaillent sur le sujet en l’abordant de manière transversale se comptent sur les doigts d’une main. Alors oui, l’ergonomie, l’expérience utilisateur, la performance, la qualité des contenus éditoriaux se développement fortement, mais ce qui se développe, ce n’est pas la qualité Web, ce sont les activités qui permettent d’améliorer la qualité d’un site sur tel ou tel sujet. La nuance peut vous sembler ténue, mais lorsqu’il s’agit d’évangéliser en expliquant qu’il faut aborder ce sujet avec une approche, des référentiels et des outils transversaux et généralistes, je peux vous assurer que la partie n’est pas gagnée du tout. A la question : qui va y gagner, je répondrai sans hésiter tout le monde, que ce soient les utilisateurs, dont les attentes sont mieux prises en compte, les administrateurs de sites, qui savent mieux définir leurs objectifs et les atteindre, et les experts et spécialistes, qui disposent là d’outils leur permettant de mieux se situer dans la globalité des projets Web.

Est tu obligé d’expliquer ton travail à tes clients ou prospects ou tout le monde comprend bien ta démarche ?

J’ai commencé à travaillé sur la qualité Web en octobre 1999, avec la conception du site e-qualite.com. Le modèle VPTCS (Visibilité, Perception, Technique, Contenus, Services) date de 2001, et la première version des bonnes pratiques Opquast date de 2004. En fait, depuis plus de dix ans, je suis amené à répéter à peu près les mêmes choses dans diverses manifestations, conférences ou auprès de mes clients. Je suis donc d’ores et déjà quelqu’un qui radote, et à un peu plus de 40 ans, ça fait tôt ;-)

Pour l’instant, je fais encore découvrir la démarche à beaucoup de monde, et j’y prends toujours autant de plaisir. Il faut donc continuer à expliquer, et il ne faudra s’arrêter que lorsque la démarche et les outils seront connus. A ce moment là, le fait que quelqu’un connaisse la démarche, et décide en connaissance de ne pas l’appliquer ne me posera aucun problème. Mais mon travail est de veiller à ce que les acteurs du web se positionnent sur le sujet. Qu’ils soient pour ou contre n’a pas vraiment d’importance.

L’obligation pour les sites publics d’êtres accessibles a t’il vraiment changé quelque chose ? Y’a t’il une prise de conscience ?

L’exigence de conformité en matière d’accessibilité a mis de nombreux professionnels du web sur le chemin des démarches qualité. Mais ce chemin est long est semé d’embûches. Dans un premier temps certains risquent de viser l’accessibilité absolue, et ils vont déployer des efforts énormes pour l’atteindre. Par la suite, il renonceront à l’accessibilité absolue, et s’intéresseront à définir des objectifs réalistes en matière de qualité Web. Ce jour-là, la prise de conscience sera complète. Alors oui, de manière évidente, l’obligation légale et même déontologique joue un rôle majeur dans la prise de conscience des administrateurs de sites. Mais je vais plus loin : cette obligation d’accessibilité ouvre surtout une voie très prometteuse pour les démarches transversales sur la qualité Web.

La multiplication des standards, labels et référentiels n’est elle pas un frein à leur mise en place ?

La multiplication des standards, labels et référentiels est un effet collatéral de l’industrialisation de nos métiers. Ce qui n’a pas encore été compris, c’est que le premier travail d’un professionnel du Web est de connaître ces différents référentiels et de savoir choisir parmi eux ceux qui sont le plus à même d’améliorer la qualité des résultats finaux. Dans l’industrie automobile ou agro-alimentaire, l’existence d’un grand nombre de contraintes qualité ou administratives n’a jamais été considérée comme un obstacle insurmontable pour développer des produits innovants. Dans le monde du design, qui est me semble t-il un exemple assez parlant, les contraintes peuvent être vécues soit comme des souffrances, soit comme des défis professionnels à relever. La compétence d’un designer ne se mesure pas seulement à sa capacité à produire des choses jolies, mais à produire de la valeur ajoutée et de la beauté tout en prenant en compte des contraintes du client ou du média. Cette observation s’applique bien sûr à d’autres métiers du Web. En réalité, à part la jeunesse du secteur, il n’existe aucune raison pour que l’industrie du Web se développe de manière différente des autres secteurs industriels. Il y a et il y aura des standards, il faudra les connaître et il n’y a pas de raison d’accorder à votre agence Web ce que vous ne toléreriez pas d’une entreprise générale du bâtiment.

Opquast en vidéo

Des présentations du projet et des outils sont disponibles en vidéo :

Mémento

Ce mémento est tiré de la première version des bonnes pratiques, mais est toujours d’actualité.

Suivre l’actualité d’Opquast

Mon avis

Utilisateur de la première version dès ses débuts, j’ai toujours été convaincu par ce projet et pas l’enthousiasme qui rayonne autour, et j’ai été très heureux de contribuer à l’élaboration de cette nouvelle version.

J’ai peut être un regard plus critique, avec l’expérience, je me rend compte que je ne suis pas à 100% d’accord avec toutes les propositions, et dans mes évaluations de sites, je garde mon libre arbitre pour décider ce qui me semble bon. Mais ce référentiel m’amène au minimum à me poser les bonnes questions, et c’est essentiel !

Je suis donc toujours convaincu que c’est un excellent outil et qu’il reste encore beaucoup de travail pour évangéliser les développeurs et les décideurs.

Et vous quels outils avez vous à disposition pour qualifier vos sites web et améliorer leur qualité ? Est-ce que l’on vous donne les moyens d’arriver à un résultat de qualité ? Que vous manque t’il pour y arriver ?

Sur le même thème

]]> http://www.webaaz.com/2010/06/opquast-les-bonnes-pratiques/feed/ 3 Aide mémoire & antisèche : Les cheat sheetshttp://www.webaaz.com/2009/08/aide-memoire-antiseche-les-cheat-sheets-2/ http://www.webaaz.com/2009/08/aide-memoire-antiseche-les-cheat-sheets-2/#comments Sat, 01 Aug 2009 10:43:37 +0000 Martin http://www.webaaz.com/?p=198 Photo de Bensonkua depuis Flickr]]> Devant la multitude d’informations et de technologies à connaître pour développer un site web, on a souvent besoin de se remémorer des détails qui nous échappent. Car tel le poisson rouge dans son bocal on oublie au fur et à mesure que l’on apprends. Certes on se rapelle bien que l’on a su, mais l’on ne se rappelle plus. C’est là qu’il est important de savoir retrouver l’information rapidement. On peut se faire ses propres aides mémoires, sur papier ou sous forme de fichiers informatiques. Mais on peut aussi en utiliser de toutes faites que l’on trouve un peu partout sur le net.

Poisson rouge dans son bocal
Photo de Bensonkua depuis Flickr

Définition

Vous en avez peut être déjà vues sur certains sites officiels, souvent présentées au format PDF, sur une ou plusieurs pages, les cheat sheets, ou antisèches en français, sont un condensé des informations pas forcément facile à retenir, ou des informations que l’on se doit de connaître.

Ou les trouver ?

Plutôt que de les trouver par hasard ou de les rechercher pendant des heures, plutôt que de faire un aide-mémoire pour noter les urls de ces cheat sheets, je vous conseille de chercher à la source, puisque quelques sites en recensent plusieurs centaines triées par thèmes :

Bien sûr ces différents sites présentent pour la plupart les mêmes contenus, à vous de voir celui qui vous convient le mieux. Pour ma part j’utilise Pushing Buttons.

Les mémentos

Très utiles aussi, la collection de mémentos chez Eyrolles, c’est l’équivalent des cheat sheets sur support physique, dans un format réduit et plastifié, ces fiches de très bonne qualité sont rédigées par des experts en la matière. En voici quelques uns :

Il en existe d’autres sur les sujets suivants :

  • Unix/Linux de Isabelle Hurbain
  • Ergonomie web d’Amélie Boucher
  • Sites web, les bonnes pratiques, d’Elie Sloïm
  • MySQL de Rodolphe Rimelé

Conclusion

Avec toutes ces fiches vous voilà paré pour vos prochains développements. Avez vous vous aussi quelques sites de références pour les antisèches ?

Sur le même thème

]]> http://www.webaaz.com/2009/08/aide-memoire-antiseche-les-cheat-sheets-2/feed/ 0 Bien écrire HTML & XHTMLhttp://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/ http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/#comments Thu, 16 Apr 2009 12:09:51 +0000 Martin http://www.webaaz.com/?p=9 HTML et son évolution XHTML. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d'autres dérivés du SGML. Crayons de couleur
Photo de ooti depuis Flickr]]> Pour un premier article « technique », commençons par l’une des bases du web, le langage de balisage HTML et son évolution XHTML. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d’autres dérivés du SGML.

Crayons de couleur
Photo de ooti depuis Flickr

Je vais donc vous présenter les différentes ressources de qualité sur le sujet que l’on trouve sur Internet. Le but de cet article est de vous donner toutes les pistes. Vous n’avez plus qu’a les suivre !

Définitions

Historique

La première version de la norme date de 1991, son auteur Tim Berners-Lee préside aujourd’hui le W3C, le consortium chargé de promouvoir la compatibilité des technologies web.

La version actuelle de HTML est la 4.01, c’est une correction de la version 4.0 qui date de 1997. Depuis peu d’évolutions, la version 5 est en préparation. Le seul point marquant de ces dernières années est l’arrivée de XHTML, qui est le portage de HTML en XML. Cette évolution permet notamment de gagner en qualité du code, l’apport de XML oblige à plus de rigueur. Certaines facilité du langage HTML ne sont plus permises, le code est donc plus homogène et les navigateurs interprètent donc plus facilement un code qu’ils lisent mieux.

Les navigateurs récents tels que IE8 ou Firefox 3.x respectent de plus en plus en plus les standard et affichent d’ailleurs de mieux en mieux les pages qui respectent les normes.

A quoi ca sert ?

Le langage HTML ne permet pas de faire le rendu visuel d’un texte. En fait il ne permet que le balisage de celui ci. Ainsi un titre aura une balise de titre. En lisant la source du code, on comprendra qu’il s’agit d’un titre, mais le rendu lui sera fait par les CSS. Vous comprenez bien que sur un Iphone ou sur un écran 20 pouces, le rendu ne sera pas le même, mais notre titre sera toujours un titre.

Vous pouvez ainsi définir les éléments de votre page tels qu’un texte, une image, une vidéo, un formulaire, des liens bien sûr, mais aussi des tableaux des listes…

HTML vous permet ainsi d’afficher votre contenu, mais aussi de questionner l’internaute au travers de champs de formulaire, par des questions ouvertes avec des champs texte, par des questions fermées à réponse simple ou multiple, et même de l’enregistrement de fichier.

Comment apprendre ?

Vous trouverez de multiples cours sur HTML, mais méfiez vous, la plupart présentent un code non standard qui risque d’être mal compris par les navigateurs, et qui risque d’être obsolète dans les navigateurs futurs. Référez vous donc le plus souvent à la norme HTML ou au mémento de Raphaël Goetter par exemple.

L’utilisation du validateur vous montrera également vos erreurs en vous donnant des pistes pour les corriger.

Les normes

Les normes ne sont pas toujours faciles à lire, mais heureusement la traduction française apporte un peu plus de clarté sur certains points techniques.

Les bonnes pratiques

  • Utiliser le doctype approprié
  • Respecter la norme associée au doctype
  • Évitez l’utilisation d’éditeurs WYSIWYG, leur interprétation laisse parfois à désirer
  • Ne pas utiliser de balises HTML « propriétaires »
  • Indenter correctement son code source pour le rendre plus lisible

Outils

Il n’est pas toujours facile d’avoir en tête toutes les propriétés de chaque élément HTML, aussi n’hésitez pas à vérifier la validité de vos pages.

Bibliographie

La gamme « mémento » chez Eyrolles présente sous forme de livret plastifié et indéchirable l’essentiel d’un point technique pour seulement 5€. Un indispensable !

Quiz

Vous avez bien compris tous les éléments présentés ? Testez vos connaissances ! Attention, le premier test n’est pas aussi facile que l’on pourrais le croire.

Vous voilà je l’espère un peu plus à l’aise avec la notion de langage de balisage. N’hésitez pas à posez vos questions en commentaires.

Un des buts de ce site étant l’échange et l’apprentissage, proposez aussi vos références bibliographiques, liens ou bonnes pratiques sur le sujet.

Sur le même thème

]]> http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/feed/ 0