Articles · Luc Poupard

Ravalement de façade

2020-06-11T14:13:41+02:00

Le dernier rafraîchissement de mon site date d’il y a un peu plus de 7 ans.
Il a vécu quelques temps puis la vie a fait qu’il est resté en friche.

À l’époque, j’étais passé du bien-aimé Dotclear (lien externe) à WordPress (lien externe). Ce dernier était déjà incontournable et même si je l’avais déjà utilisé sur différents projets, c’était l’occasion pour moi de le prendre en main sérieusement. C’est notamment à ce moment-là que j’ai commencé à exploiter pleinement le mécanisme des thèmes enfants et à prêter une attention particulière aux bonnes pratiques de développement WordPress.

Aujourd’hui, je profite une nouvelle fois de ce rafraîchissement pour élargir mes horizons techniques et me plonger cette fois dans la JAMstack.^[1]

Site statique

Au-delà de la nouveauté technique, je souhaitais en particulier utiliser un GSS, ou générateur de site statique.
Ma principale motivation est de fournir un contenu totalement statique au navigateur, en opposition aux CMS tel que WordPress, qui livre du contenu généré en PHP à chaque appel de page, ce qui implique des appels à une base de données et du travail supplémentaire sur le serveur.
Bref, je voulais me passer d’une telle machinerie alors que les pages de mon site n’ont pas du tout besoin d’être re-générées à chaque affichage, bien au contraire !^[2]

Après quelques recherches, des lectures d’articles, de tutoriels et d’avis d’utilisateurices sur les dizaines de GSS disponibles, mon choix s’est finalement porté sur Eleventy (lien externe). En particulier parce qu’il est unanimement réputé pour sa simplicité de prise en main et sa flexibilité. Et voilà le résultat !

Thème sombre ou clair

Toujours au rayon technique, le site prend en compte les préférences de thème défini par l’utilisateurice : le site affichera le thème (sombre ou clair) en fonction de la préférence définie.
Si toutefois il n’y a aucune préférence définie – ce qui est le cas par défaut, c’est le thème sombre qui sera affiché. J’ai fait ce choix unilatéralement car c’est mon mode préféré. 😛
Et il est bien sûr possible de passer de l’un à l’autre sans aucun problème. Le cas échéant, le choix est enregistré dans le stockage local (lien externe) du navigateur.

Vie privée

Au-delà de l’aspect technique du site, un de mes grands objectifs avec cette refonte était de prendre soin de la vie privée des internautes qui naviguent sur le site. J’ai donc fait en sorte que le site ne récolte absolument aucune donnée personnelle !
Il n’y a pas de cookie, pas de traqueur ni d’outil d’analyse de trafic. Il n’y a pas non plus de contenus embarqués depuis des sites ou service tiers, afin d’éviter tout pistage indésirable.
Enfin la totalité des images, vidéos, polices de caractères, fichiers… utilisés sont hébergés sur le site.

Bonne navigation !

Si le concept de JAMstack ne vous parle pas, je vous conseille cette très bonne introduction (lien externe) sur Jamstatic (lien externe). Retour
En vérité il existe des solutions pour servir les contenus d’un site WordPress sous la forme de page statique. Mais l’appel de l’exploration technique était plus fort. 😛 Retour

Éditeur personnalisé et guide de contribution

2015-09-14T06:00:57+02:00

L’un des premiers éléments qui fait la qualité d’un site web est son contenu. Pour certains types de site (actualités, information), le contenu est d’ailleurs le cœur même du site !

Et ce contenu, il n’arrive pas comme ça sur le site : il doit être rédigé d’une part, puis intégré dans le site d’autre part.
Dans cet article, je parlerai essentiellement de cette deuxième partie : comment l’intégration peut contribuer à la qualité éditoriale d’un site et comment, en travaillant un éditeur et proposant un guide de contribution j’ai tenté d’optimiser l’édition sur l’un de mes projets personnels.

Analysons l’existant

Le projet dont je parle était un site d’actualités et de critiques de films sur le support Blu-ray, il avait donc une grosse composante éditoriale.
L’équipe du site était composée de bénévoles passionnés de cinéma : de nombreux rédacteurs créaient et inséraient du contenu.

Parmi les rédacteurs, certains pouvaient appliquer des mises en formes toutes personnelles, avec pour résultat un manque d’homogénéité dans le rendu des différents articles et contenus, visuel voire sémantique.
Il y avait une raison flagrante à ce manque de cohérence : un éditeur de texte bien trop complexe et complet, qui avait le défaut de proposer aux rédacteurs trop de possibilités. Plus il y a de possibilités, plus il y a de façons différentes de faire les choses.

Améliorons : rationalisons

Mon premier objectif était de rationaliser et d’uniformiser le rendu des articles. Au-delà de l’aspect visuel, il s’agissait aussi d’améliorer la qualité sémantique des contenus.
J’ai donc travaillé sur une simplification de l’éditeur pour limiter les fonctionnalités au strict minimum, tout en répondant aux besoins de mises en forme de l’équipe.

Mais comme vous le savez, un outil a beau être merveilleux, il faut encore savoir comment l’utiliser. J’ai donc travaillé en parallèle sur la mise en place d’un guide de contribution permettant aux rédacteurs de savoir comment utiliser correctement l’éditeur.

Personnalisons l’éditeur

Dans le cadre du projet, nous travaillions avec l’éditeur TinyMCE pour fournir l’éditeur de texte aux contributeurs. TinyMCE est très répandu (c’est notamment l’éditeur de texte par défaut de WordPress) et a l’avantage d’être très facilement personnalisable.
J’ai donc profité des possibilités de personnalisation de l’éditeur pour proposer aux rédacteurs et contributeurs des fonctionnalités sur mesure.

Je me suis notamment arrêté sur les quelques points suivants :

J’ai limité l’éditeur aux fonctions sémantiques essentielles (listes ordonnées et non ordonnées par exemple) et supprimé tous les boutons de mise en forme « risqués » pour le rendu (couleur de texte, couleur de fond, police…) et potentiellement pour l’accessibilité des contenus. D’un point de vue sémantique, ces fonctions ne sont pas très dangereuses car elles s’appuient sur des styles en ligne. Cependant, d’un point de vue visuel, elles peuvent facilement mettre en péril la cohérence visuelle des contenus.
En remplacement des boutons de mise en forme supprimés, j’ai demandé à l’équipe de me dire quelles mises en forme ils souhaitaient pouvoir appliquer sur leurs contenus. Une fois leurs besoins recueillis, je me suis attelé à mettre en place des raccourcis pour reproduire ces mises en forme dans l’éditeur. Il s’agit de l’option « >Formats » de TinyMCE, permettant d’ajouter aux contenus une class CSS spécifique par exemple. Ajouter une simple class plutôt que des styles en ligne garantit ainsi de pouvoir facilement faire évoluer le rendu des contenus dans le temps !
Pour les mises en forme un peu plus exotiques, j’ai été jusqu’à créer des modèles de contenu permettant aux rédacteurs d’être libérés de toute la mise en forme et de se consacrer entièrement aux contenus. Pour ce faire, je me suis appuyé sur l’extension « Templates » de TinyMCE permettant d’importer dans son contenu un modèle HTML qu’il ne reste plus qu’à remplir.
Enfin, j’ai ajouté un certain nombre de raccourcis pour les caractères spéciaux très couramment utilisés et aussi très souvent malmenés car absents des claviers. C’est le cas notamment des majuscules accentuées ou des caractères de ponctuation comme les points de suspension, l’apostrophe ou encore les guillemets français. Les rédacteurs n’ont ainsi pas besoin d’apprendre par cœur tout un tas de raccourcis clavier échappant à toute logique.

Et voilà, avec ces quelques points d’attention, on est déjà en mesure de proposer un éditeur texte qui donne toutes les cartes en main aux contributeurs pour qu’ils mettent en ligne des contenus d’une qualité technique suffisante, sans effort démesuré.
Oui mais voilà, un bon outil c’est bien, mais il faut encore savoir l’utiliser…

Rédigeons le guide de contribution

Une fois l’éditeur personnalisé, je me suis donc attelé à rédiger un guide de contribution à destination des contributeurs.

Ce guide avait plusieurs objectifs :

Définir et clarifier les règles éditoriales propres au site. Il s’agit essentiellement ici de définir les règles liées au vocabulaire intrinsèque du ou des sujets traités sur le site.
Définir (si ce n’est rappeler) les grandes règles de typographie. Il s’agit là de donner un contenu pédagogique sur le rôle et l’utilisation des éléments typographique couramment utilisés : paragraphes, listes, gras, italique… Expliquer le rôle sémantique de chacun de ces éléments permet de limiter l’usage abusif de ces derniers.
Et enfin expliquer comment utiliser chacune des fonctions de l’éditeur. Il fallait notamment expliquer comment utiliser les différents modèles de contenu et autres options de mises en forme qui avaient été développés sur mesure pour le site.

Comme il ne sert à rien de palabrer des heures là dessus, je vous laisse plutôt consulter vous-même le guide complet ainsi rédigé.

Utilisons tout ça

Les changements de l’éditeur et le fait de les accompagner d’un guide d’utilisation a été très bien reçus par les contributeurs. Expliquer et sensibiliser sur les bonnes (ou les mauvaises) pratiques de contribution leur permet d’améliorer leur travail sur le site : le rédacteur est content et l’intégrateur est content !
Au delà de l’aspect pédagogique, les rédacteurs avaient particulièrement apprécié tous les changements leur permettant d’être plus efficaces. Par exemple, les modèles leur ont permis de mettre en forme très simplement des contenus qu’ils publiaient de manière récurrente « à la main », comme les plannings.

Ressources

Dans l’ordre, illustrations tirées des films Reservoir Dogs, Pacific Rim et Kill Bill.

Paris Web 2014 : vue du spectateur

2014-10-29T13:35:02+01:00

Comme promis, après avoir parlé de mon expérience en tant qu’orateur, voici mon compte-rendu en tant que spectateur !

L’évènement

Avant de parler des conférences, parlons déjà de l’évènement et des lieux pour commencer.
Après un passage au palais Brongniart l’année dernière, c’est le Beffroi de Montrouge (lien externe) qui a accueilli les deux journées de conférences cette année.
Le Beffroi n’a rien à envier au palais Brongniart en termes de cachet, le lieu était vraiment beau.
D’un point de vue fonctionnel, j’ai même beaucoup plus aimé ce nouveau lieu. Notamment parce que l’espace de pause était divisé en trois zones communicantes permettant de moins avoir un effet de grosse masse humaine comme on pouvait le ressentir l’année dernière dans l’unique énorme salle.
Au delà du visuel, le niveau sonore était aussi beaucoup plus confortable et permettait de bien mieux discuter qu’au milieu du brouhaha au palais Brongniart.

Autre nouveauté, toutes les conférences ont été diffusées en direct grâce à Veodem et toutes les vidéos sont archivées sur le site de Paris Web (lien externe) ! De quoi rattraper les conférences loupées sans attendre le montage final !
Mieux encore, la vélotypie de la salle Mœbius a permis de fournir des sous-titres aux conférences qui ont eu lieu dans cette salle.

Enfin côté alimentaire (car oui, même si on se nourrit l’esprit pendant trois jours, il faut aussi manger), on a là aussi été très gâté. Après quelques petits problèmes de stocks l’année passée, on n’a cette fois-ci manqué de rien et tout était vraiment délicieux. Il y avait du chaud, du froid, des sandwichs, des verrines… dont certains végétaliens ! Comme quoi le staff essaie vraiment de penser à tous les publics.

Les conférences

Comme toutes les vidéos sont déjà en ligne, je ne vais pas faire un compte-rendu ultra détaillé et je vais juste revenir sur une petite sélection des conférences que j’ai suivies et particulièrement appréciées :

Qualité web : l’heure de passer à la caisse

À partir d’un petit jeu de rôle assez drôle, Élie (lien externe) et Nicolas (lien externe) proposent différentes pistes pour facturer la gestion de la qualité auprès des clients. La problématique étant surtout de faire savoir ce qui se cache derrière et pourquoi il vaut mieux s’en soucier.

Vous pouvez voir la vidéo en ligne : Qualité web : l’heure de passer à la caisse (lien externe).

Le web fait pousser mes tomates

En commençant par faire un lien entre l’agriculture intensive et les projets web ratés, Olivier (lien externe) explique ensuite ce qu’est la permaculture et le parallèle qu’on peut faire avec un projet web réussi. J’ai particulièrement apprécié cette courte présentation.

Vous pouvez voir la vidéo en ligne : Le web fait pousser mes tomates (lien externe).

Sortons l’intégration d’e-mails de la préhistoire

Ayant eu l’occasion de faire pas mal d’intégration d’e-mails par le passé, j’étais très curieux de voir cette conférence et elle vaut le détour. En plus de proposer un contenu très pointu, la présentation de Rémi (lien externe) ne manquait pas d’humour avec des extraits de Jurassic Park disséminés ici et là (ben oui, il parlait de préhistoire quand même !).

Vous pouvez voir la vidéo en ligne : Sortons l’intégration d’e-mails de la préhistoire (lien externe).

La « logiciellisation » du web

Historiquement, on a d’un côté les logiciels installés sur notre machine et de l’autre le web qui donne accès à des documents en ligne. Après un petit historique, Jérémie (lien externe) explique comment ces deux univers se fondent de plus en plus l’un dans l’autre et donne des exemples d’applications qui sont déjà hybrides.

Vous pouvez voir la vidéo en ligne : La « logiciellisation » du web (lien externe).

Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?

En regardant les mots de passe enregistrés dans son navigateur, Jean-Philippe (lien externe) s’est un jour rendu compte qu’une grande quantité d’entre eux n’étaient pas les siens mais ceux de collègues, clients, amis… bref, il soulève la question de la confiance que tous ces gens mettent en nous. J’ai beaucoup aimé qu’il choisisse de parler de ce sujet sous l’angle de la confiance plutôt que celui de la sécurité et des risques pour la vie privée.

Vous pouvez voir la vidéo en ligne : Petits secrets entre amis : les acteurs du web doivent ils prêter serment ? (lien externe).

Suite à sa conférence, il a lancé le site Le serment du Beffroi de Montrouge (lien externe) où il affiche le serment soumis pendant sa conférence et donne la possibilité d’ajouter sa signature si on adhère à ses principes.

Les ateliers

J’ai bien aimé chacun des ateliers auxquels j’ai participé mais j’ai particulièrement apprécié celui animé par Rémi (lien externe) et Delphine (lien externe) : Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne (lien externe).

Au delà de l’intégration, je pense que le sujet de l’éducation et de la formation aux outils web (et informatiques en général d’ailleurs) est essentiel, c’est pour ça que j’ai participé à cet atelier. Parce que malgré une utilisation professionnelle ultra répandue, l’outil informatique est bien souvent très largement sous utilisé (voire mal utilisé) par manque de connaissances ou de compétences. Et on retrouve cette problématique dans l’intégration web aussi.

Rémi et Delphine ont d’abord présenté la problématique, à savoir comment former à l’intégration web et avec quels moyens. Vous pouvez trouver tous les détails de leur démarche sur github (lien externe).

Après l’introduction de la démarche, ils nous ont fait faire un petit exercice pratique : en partant d’un bloc contenant une image, un titre et du texte, comment faire pour créer un lien sur l’ensemble du bloc ? Plusieurs solutions ont naturellement émergées et tous ensemble, nous avons pesé les avantages et inconvénients de chaque solution.

Une fois cet exercice fait, Rémi nous a présenté un exemple de fiche de formation (lien externe) (parti de l’exemple précédent).
À partir de cet exemple, nous avons ensuite réfléchi individuellement ou collectivement à d’autres cas pratiques pouvant donner lieu à la création d’une fiche de formation, sur le même modèle. Évidemment, l’atelier fut animé et il y a franchement eu une belle dynamique.

Bref, la solution soumise par Rémi et Delphine est pas mal du tout. Elle propose de prendre le problème à la base en donnant des outils aux formateurs directement et je pense que c’est une bonne piste. Parce que si un formateur n’a pas lui-même des outils et matériaux éducatifs corrects, comment peut-il former correctement ses élèves ?
La difficulté reste de donner une dynamique à la démarche sur un plus long terme. Le format d’atelier a permis d’avoir une bonne adhésion de chaque participant, notamment parce que réfléchir collectivement est toujours plus efficace et motivant que de faire son truc dans son coin. On a pu trouver des exemples pratiques à partir desquels créer des fiches supplémentaires. Mais une fois l’atelier terminé, l’enjeu est de faire perdurer la démarche.

À côté

Enfin, on ne peut pas parler de Paris Web sans parler de la dimension humaine. Cette année a été la plus riche pour moi, peut-être est-ce dû au fait que je faisais partie des orateurs.
En tout cas, en plus de retrouver plein de connaissances accumulées au fil des années, j’ai aussi eu le bonheur de découvrir pas mal de nouvelles personnes.
Je n’ai pas forcément pu parler énormément avec tout le monde mais ça reste quelque chose que j’adore dans Paris Web. Même en étant timide, on fait facilement des rencontres très intéressantes et on n’a pas de mal à trouver des sujets de discussion parce qu’on est tous animés par une passion commune.

Et il ne faut pas oublier le staff qui fait un travail de dingue pour répondre à tous les besoins. Ils travaillent même tellement bien qu’on ne se rend même pas compte, en tant que spectateur, de tout ce qu’il font tellement tout roule sans aucun problème.

Bref, merci de tout cœur à toutes les personnes qui me font passer trois journées magnifiques chaque année. Et merci encore plus au staff sans qui rien de tout ça ne serait possible !

Paris Web 2014 : vue de l’orateur

2014-10-28T07:29:37+01:00

Cette année avait lieu la neuvième édition de Paris Web. Les deux journées de conférences ont eu lieu les 16 et 17 octobre au Beffroi de Montrouge (lien externe) et la journée d’atelier s’est tenue le 18 octobre à l’école EfreiTech (lien externe) à Villejuif.

Personnellement, c’était ma quatrième édition et j’ai passé un nouveau stade cette année puisque j’ai été orateur (lien externe) pour la première fois !

Comme c’est une expérience nouvelle et riche en émotion, j’aimerais revenir particulièrement sur ma conférence. (Mais j’écrirai un second billet pour parler des autres conférences que j’ai pu suivre, ne vous en faites pas.)

J’ai donc eu l’honneur de faire partie des orateurs pour parler de l’impact écologique d’Internet et des TIC (lien externe). Je ne suis pas du tout un expert Green IT et proposer ce sujet a représenté un vrai défi pour moi. Mais d’où m’est venue cette idée folle ?

Le choix du sujet

Et bien depuis fin 2013, j’ai commencé à travailler sur un projet ambitieux de voyage à vélo jusqu’au Cap Nord (lien externe) avec un ami. C’est un projet qu’on avait commencé à réfléchir il y a plusieurs années, en sortant de l’école. La vie professionnelle a fait qu’on a assez vite laissé tomber l’idée. Sans emploi suite à mon arrivée en Suisse, n’ayant pas d’enfant (ni l’un ni l’autre) on a décidé de profiter de cette opportunité pour relancer ce projet.

Avec ce voyage, nous souhaitions travailler deux grands axes.
Le premier était plastique, appuyé sur une démarche photographique (je n’en parlerai pas plus ici parce que ce n’est pas le sujet mais si ça vous intéresse, il y a pas mal d’informations sur le blog (lien externe) du projet).
Le second, qui nourrissait le premier, était éthique : on voulait que notre projet soit le plus respectueux possible de l’environnement. Pour ce faire, on a passé énormément de temps à faire des recherches. Pour savoir quels équipements et matériaux étaient à privilégier, mais aussi pour trouver des artisans et partenaires locaux. Nous avons par exemple trouvé une petite entreprise française fabriquant des vélos de voyage (lien externe) sur mesure ou encore l’unique revendeur français de tentes techniques (lien externe) totalement fabriquées en Europe (Suède et Estonie plus exactement).

Au delà du matériel, j’ai voulu pousser la réflexion au niveau du site web du projet et c’est comme ça que j’ai commencé à rentrer en profondeur dans ce sujet brûlant.
Quand je me suis rendu compte de la quantité effroyable d’informations sur le sujet, je me suis dit qu’il y avait de quoi tenir 45 minutes à Paris Web. Et c’est comme ça que je me suis retrouvé là !

L’oral

J’ai déjà eu l’occasion de faire des présentations plus ou moins longues devant un public, mais jamais dans une salle avec un potentiel de 200 personnes. (Cela dit, je suis incapable de dire à quelle point la salle était remplie tellement j’étais dans mon sujet.)

L’exercice de la présentation orale n’était donc pas nouveau pour moi mais je dois avouer que je ne suis pas un orateur né. Je sais que j’ai une marge de progression non négligeable à ce niveau là (et croyez-moi, je reviens déjà de loin !) et si vous étiez dans la salle, je pense que vous aurez forcément des conseils sur des points à améliorer.

Mais bon, même si l’oral ne m’inquiète pas, je n’échappe quand même pas à la pression qui monte jusqu’aux dernières secondes avant de commencer. Par contre, ce n’est pas la partie la plus compliquée à gérer en ce qui me concerne.

Les préparatifs

La partie la plus compliquée, c’est la préparation. Surtout dans les cas comme celui là, où on ne maîtrise pas du tout le sujet à la base.

Avant de commencer, j’avais bien quelques idées comme celles concernant la consommation électrique (dont Christophe Clouzeau avait parlé en 2011 (lien externe)). Mais j’ai dû nager dans une quantité d’information incroyable.
Je n’ai pas fait le décompte mais je peux vous dire que j’ai passé plusieurs dizaines d’heures à récolter, traiter, trier… les informations pour essayer d’en condenser l’essentiel en 45 minutes de présentation.

Je pense avoir assez bien réussi à retirer l’essentiel mais je suis quand même frustré de ne pas avoir exposé quelques idées en plus. J’aurais voulu par exemple donner plusieurs exemples de data centers dits « verts » mais je n’avais pas l’espace-temps suffisant pour le faire… (j’y reviendrai un peu plus bas).

La formalisation

À partir du moment où je présente quelque chose à quelqu’un, il me tient particulièrement à cœur de transmettre des idées qui soient à la fois complètes et compréhensibles par le public. Je passe beaucoup de temps à travailler mes idées dans tous les sens pour leur donner la forme la plus accessible à tous.

Pour les rendre plus accessibles, avant leur présentation en elle-même, j’essaie d’agencer mes différentes idées de manière à passer de l’une à l’autre de manière logique.
En fait, j’essaie en quelque sorte de raconter une histoire.
Non seulement cet effort pour ordonner mes idées permet au public de mieux rentrer dedans, mais ça me permet aussi, en tant qu’orateur, de mémoriser le fil de ma présentation. Plus l’ordre des idées est logique, plus il est simple de s’en souvenir.

Ensuite je passe à la formalisation de la présentation en elle-même.
Je viens de la communication visuelle donc l’image est primordiale pour moi. Et j’ai essayé de limiter le texte au maximum. Cependant, quand il s’agit d’une présentation clairement à but informatif comme celle que j’ai faite, je prends soin de mettre aussi le maximum d’information possible sous forme de texte. Parce qu’il n’y a rien de plus frustrant de parcourir des slides sur un sujet informatif et de ne rien y trouver d’intéressant. Je suis sûr que ça vous est déjà arrivé.

Bref, dans le cas présent, je pense ne m’en être pas trop mal sorti.
J’ai d’ailleurs eu l’heureuse surprise d’être interpellé par l’un des interprètes LSF présent pendant ma présentation. Ce dernier m’a dit avoir beaucoup apprécié le sujet, notamment parce que très accessible. Sa remarque m’a fait énormément plaisir parce que ça veut dire (enfin je pense…) que j’ai réussi à transmettre des informations claires et compréhensibles.

L’entraînement

Une fois satisfait de mes idées sélectionnées et ma présentation formalisée, je suis passé à l’entraînement pratique et là, ce fut le drame. Alors que l’objectif était de tenir 45 minutes, mon premier galop d’essai s’est terminé au bout de… 1 heure et 6 minutes !
J’ai donc abandonné quelques idées, supprimé quelques slides (comme ceux des exemples de data centers verts dont je parlais plus tôt) et j’ai recommencé. Dès le second essai, ouf, je finis en 43 minutes 30.
Les idées claires et le chronomètre à peu près assuré, j’étais prêt pour passer sur le grill.

Au final, j’ai un peu dépassé les 45 minutes si bien qu’une seule question a pu être finalement posée (mais ça n’en était pas une en plus). Et pour le coup ça m’a un peu frustré parce que j’ai vu que pas mal de bras s’étaient levés pour avoir la chance de poser LA seule question autorisée.

L’après

Malgré la frustration de n’avoir pas pu laisser un peu de temps pour des questions, ça m’a fait plaisir de voir autant de réactions dans le public. Ça veut au moins dire que le sujet suscite l’intérêt.

Mon principal objectif était d’interpeller les gens sur les problèmes environnementaux provenant de notre utilisation d’Internet et des TIC et je l’ai a priori atteint.
Dès ma descente de l’estrade, quelques personnes sont venues me voir pour en discuter. J’ai pu aussi passer le temps de pause qui suivait en discutant avec certaines personnes qui étaient dans le public.
Comme je suis passé le vendredi après-midi, il ne restait qu’une pause pour pouvoir en discuter avec les gens donc ça n’a pas laissé trop d’occasions mais ça m’a quand même permis d’échanger avec quelques uns.

Parmi les retours, j’attendais aussi avec appréhension celui de Christophe Clouzeau, que je sais connaisseur (lien externe) et que j’avais repéré dans le public. Il a apprécié que je brosse un tableau complet de la situation et que je parle aussi bien de la consommation, que de la production et de la fin de vie. Même si lui n’a je pense rien appris, le fait qu’il ait apprécié ce que j’ai présenté signifie déjà beaucoup. Et j’ai donc été rassuré quant au contenu que j’avais choisi de présenter.

Épilogue

Voilà pour mon partage de l’expérience d’orateur. Personnellement, j’ai adoré faire ça et si j’ai l’occasion de le refaire, je le referai sans hésiter. Ça m’a demandé un travail monstrueux en amont parce que je ne maîtrisais pas le sujet, mais il n’y a rien de plus plaisant que de voir que les idées qu’on veut transmettre sont reçues par le public (enfin au moins une partie).
Et puis mine de rien, ça permet de rencontrer encore plus de monde. Une fois qu’on est identifié comme orateur, on est forcément plus facilement accosté par des gens qui veulent en savoir plus et ça nous permet de faire encore plus de belles rencontres.

Bref, si vous êtes hésitant à proposer un sujet, n’hésitez plus et foncez. Je ne suis pas le premier à le dire mais c’est vraiment une expérience très enrichissante ! En plus, le staff est aux petits soins avec nous donc ça fait une bonne raison de plus. 😛

Bonus

Pour ceux qui n’étaient pas présents ou qui n’ont pas pu suivre le live, vous trouverez les slides en ligne ainsi qu’une une version annotée (reprenant l’essentiel de mon discours). La présentation est aussi disponible sur Slideshare (lien externe) mais je recommande plutôt la version HTML.
Enfin, la vidéo (lien externe) est disponible sur le site Paris Web, mais il manque malheureusement le son jusqu’à environ 8 minutes 20. Je ne sais pas encore si le montage final aura bien le son, mais je ferai une petite mise à jour le moment venu.

Éco-conception web, les 100 bonnes pratiques – note de lecture

2014-09-18T06:49:30+02:00

Étant assez sensible aux problématiques environnementales (et adepte de bonnes pratiques), il aurait été dommage que je passe à côté de ce petit livre (en tout et pour tout 128 pages). Comme son nom l’indique, il propose 100 bonnes pratiques pour concevoir un site ou un service web avec une empreinte écologique la plus réduite possible. Petit retour sur cette lecture.

Préambule

Une liste de bonnes pratiques, telles que présentées dans ce livre, permet de mettre en place une démarche de gestion de la qualité viable. En effet, le fait de pouvoir contrôler et mesurer chaque bonne pratique permet de faire un suivi dans le temps de l’évolution d’un service, normalement son amélioration.

Contexte

Avant d’entrer dans le vif du sujet, la préface et l’introduction du livre donnent déjà des explications sur la raison d’exister de ce livre.

C’est le moment de la présentation des chiffres chocs de l’impact des TIC sur le climat. On apprend ainsi que 2% des émissions mondiales de CO₂ proviennent des TIC (ce qui équivaut aux émissions du trafic aérien mondial) et ce taux devrait doubler d’ici 2020. On apprend encore que tous les mois, 23 millions de gigaoctets de données sont chargés inutilement sur les sites web, soit 5 millions d’heures d’attente cumulées ! Et ces chiffres datent de 2010, autant dire qu’ils auront assez probablement gonflés depuis.

Un peu plus étonnant par contre, on découvre aussi que ce livre n’aurait sans doute pas vu le jour sans la volonté d’une entreprise privée, la Banque Cantonale de Fribourg (BCF) en Suisse, de réduire l’empreinte écologique de ses systèmes informatiques (parc informatique, serveurs mais aussi sites web). Grâce à cette démarche globale, la BCF a ainsi pu faire des économies substantielles. Par exemple, la virtualisation de leurs serveurs a permis de réduire par 10 le nombre de machines physiques. Ou encore, la suppression régulières de leurs données chaque année leur a permis de réduire de 40% l’espace de stockage.

Bref, voilà une preuve supplémentaire des bénéfices qu’une entreprise peut tirer en mettant en place une démarche d’éco-conception. Et plus globalement une démarche de gestion de la qualité web !

Bonnes pratiques

On passe ensuite assez vite aux bonnes pratiques qui concernent tous les domaines concernés par un service web. On y parle ainsi de serveurs, de bases de données, de design, d’intégration HTML, de polices, de développement, de CMS, d’e-mails, de production de contenus… tous les domaines sont traités. Si les sujets sont variés, il faut toutefois noter que la grande majorité des bonnes pratiques concernent des points techniques.

Chaque bonne pratique est expliquée brièvement et illustrée par un exemple.
En complément, plusieurs critères permettent d’aider à prioriser les actions à mettre en place :

La priorité détermine si la bonne pratique a un fort potentiel de réduction de l’empreinte écologique, qu’elle est facile à mettre en œuvre ou s’il elle est nécessaire à l’application d’autres bonnes pratiques. Si elle est non prioritaire, la bonne pratique a un potentiel d’économie limité ou est difficile à mettre en œuvre.
La mise en œuvre précise la facilité d’application de la bonne pratique, notamment si elle nécessite une expertise technique avancée ou pas.
L’impact écologique précise si la bonne pratique a un impact écologique élevé ou s’il est au contraire minime.

En plus de ces trois critères, sur chaque bonne pratique sont précisées les ressources qu’elle permet d’économiser si on l’applique. On y trouve :

Le processeur : économiser le processeur permet d’allonger sa durée de vie, donc par extension celle des machines.
La mémoire vive : un site optimisé réduira la mémoire vive utile à son affichage et permet d’allonger la durée de vie des équipements.
Le stockage : plus on économise de l’espace, plus grandes sont les économies (moins de serveurs, moins d’énergie consommée, etc).
Le réseau : il s’agit ici essentiellement de la bande passante. Plus son usage est réduit, plus les économies sont grandes.
Les requêtes : limiter le nombre de requêtes (HTTP, SQL…) permet de limiter les besoins en ressources physiques.

Bref, le lecteur dispose de tous les éléments nécessaires pour savoir quelles sont les bonnes pratiques les plus utiles à appliquer, en fonction de son contexte et de ses compétences.

Avis

Une fois la lecture terminée, on se rend compte du nombre incroyable de détails sur lesquels on peut agir pour réduire l’impact écologique de son site web. Et le livre a l’avantage d’être très court et très concis.
Mais cet avantage a un point noir : la plupart des bonnes pratiques sont expliquées assez sommairement. Comme il s’agit la plupart du temps de points techniques, l’application de certaines bonnes pratiques peut être rendue difficilement exploitable pour les non techniciens.

Ce livre est donc avant tout une boîte à outils qu’il sera bon de partager avec l’ensemble des acteurs intervenant sur un projet web.
Car on ne le rappellera jamais assez, qu’il s’agisse d’environnement ou de qualité web, la clé du succès réside dans la participation active de tous les acteurs !

Auteurs : Frédéric Bordage avec la contribution de Stéphane Bordage, Jérémy Chatard, Olivier Philippot
Éditeur : Eyrolles
Parution : 25 octobre 2012
Prix : 12 euros
Site web du livre

Ma checklist qualité du web designer

2014-06-26T05:38:31+02:00

Il y a quelque chose dont nous sommes convaincus chez w3qualité : la qualité web passe par l’ensemble de la chaîne de production et ce n’est pas l’apanage du responsable qualité. Chaque métier peut et doit faire de la qualité dans son travail. Nous vous proposons donc aujourd’hui une méthode pour faire vôtre la gestion de la qualité, quel que soit votre métier.

La gestion de la qualité est un très vaste domaine. Comme l’esquisse le constat (archive) de notre précédente tentative de référencement des responsables qualité en poste (archive), même ceux dont c’est le métier ont chacun une pratique différente et personnelle du métier. Malgré ces différences, l’un de leurs points communs est de devoir travailler avec différents métiers. L’éventail de ces métiers est plus ou moins grand en fonction du contexte, mais dans tous les cas cela soulève un point essentiel : chaque acteur participe à la qualité.

Chaque acteur participe à la qualité !

Comme la gestion de la qualité en tant que telle n’est pas forcément parlante pour tous, on s’est dit que ça pourrait être bien plus productif de vous donner un peu plus de concret.
Par là, on entend vous parler dans un langage que vous connaissez et dont le contenu serait facilement exploitable au quotidien. Aujourd’hui, on va donc aborder la création d’une checklist métier, en l’occurrence ici une checklist web designer.
J’ai choisi ce métier car c’est un métier que je connais bien, mais ce que je vais vous présenter peut s’appliquer à n’importe quel métier !

Sur-mesure

Avant de plonger dans le vif, je tiens à préciser une règle intangible à la gestion de la qualité. On le répète souvent mais toute démarche qualité est mise en place en fonction d’un contexte particulier. C’est ce qui explique que les quelques répondants au sondage aient une pratique différente du métier. À l’instar de ses missions quotidiennes, les checklists du responsable qualité sont dépendantes du contexte. Mais au delà du poste de responsable qualité, chacun peut construire sa propre checklist en fonction de ses besoins, des besoins de l’équipe ou ceux du projet.

Donc plutôt que de vous donner une checklist ultime et absolue, j’ai préféré me mettre en condition et faire ce que tout acteur responsable devrait faire : construire sa propre checklist.
Mais attention, pas question de réinventer la roue et de partir de zéro. Il faut savoir trouver les ressources qui peuvent être exploitées utilement.

On ne va pas réinventer la roue !

Dans le cas présent, j’ai déjà retenu les ressources suivantes :

Checklist dans la phase projet de conception – Opquast
Notice d’accessibilité pour la conception graphique – AcceDe Web

Ces ressources sont déjà une bonne base puisqu’elles permettent d’assurer à la fois un bon niveau de qualité et d’accessibilité aux utilisateurs finaux du service.
Cependant elles ne sont pas suffisantes. Car au delà des utilisateurs finaux, tous les utilisateurs « intermédiaires » (contributeurs, développeurs, etc.) peuvent profiter de la qualité d’un service, mais aussi et surtout y participer. Et ici plus que jamais, c’est le contexte qui détermine les critères à prendre en compte.

S’adapter au contexte

Dans le cadre de cet exercice, je suis parti d’un cas où le web designer produit ses maquettes sous Photoshop et les transmet à un intégrateur qui se charge lui-même d’exporter les différents éléments pour les intégrer.
L’une des contraintes particulières ici, c’est que l’intégrateur qui reçoit les maquettes doit être capable de comprendre le langage du web designer. Inversement, le web designer doit utiliser un langage compréhensible de l’intégrateur.
C’est typiquement une situation directement héritée d’un contexte particulier et qui ne correspondra pas à chacun de vous. Il faut donc définir des critères qui s’inscrivent dans cette organisation.

Il faut s’adapter au contexte.

En l’occurrence dans notre cas, il y a un point crucial sur lequel il est possible d’agir pour obtenir un gain de qualité énorme : le PSD. En effet, ce fichier est littéralement le point de friction entre le web designer et l’intégrateur. S’il ne respecte pas certains critères, ce fichier peut très vite devenir un enfer à utiliser, aussi bien pour le web designer que l’intégrateur. Il est donc particulièrement important de mettre en place des critères de qualité qui permettront d’améliorer les échanges entre les deux métiers.
En complément des ressources précédemment citées, il faut donc aussi s’appuyer sur des critères concernant l’outil utilisé communément. J’ai donc retenu aussi les sources suivantes, orientées sur des bonnes pratiques d’utilisation de Photoshop.

Guidelines pour produire des PSD adaptés au web – STPo
Guide Photoshop pour le Web Design (en anglais) – Dan Rose
Optimisez vos fichiers Photoshop – Vectorskin
Créer plusieurs pages avec Photoshop – votre serviteur

À partir de ces différentes sources, il ne nous reste plus qu’à définir ce qu’on souhaite retenir et retrouver dans notre propre checklist. L’objectif étant d’améliorer la qualité pour les utilisateurs finaux mais aussi les utilisateurs dans la chaîne de production.

Checklist personnalisée

Après ce travail de réflexion et de recherche, j’ai donc pu construire ma checklist sur-mesure.
Comme dit plus tôt, il ne s’agit pas d’une checklist aboutie mais plus d’un embryon de réponse. Un exemple simple pour vous permettre de vous faire une idée de ce qui peut sortir de cette démarche. Aussi pour cette raison, elle est volontairement incomplète afin d’éviter que quelqu’un n’ayant pas lu tout ce qui précède ne la prenne au pied de la lettre !

Construisons notre propre checklist !

Bref, maintenant vous savez ce qu’il vous reste à faire : construisez votre propre checklist !

Vous pouvez aussi aller encore plus loin et construire des checklists partagées avec le reste de votre équipe. On en parle d’ailleurs sur « Référentiels de bonnes pratiques : industrialisons nos savoir-faire » (archive).

Crédits photo

Leafcutter Ants par Steve Begin, sous licence CC BY-NC-SA 2.0
Blue Tit on wheel par keith ellwood, sous licence CC BY 2.0
Un caméléon vert par ecololo, sous licence CC BY-NC-SA 2.0
Nesting Time par Jonathan Bliss, sous licence CC BY-NC-SA 2.0

Bénéfices de la vue conversation des e-mails

2013-11-05T12:50:42+01:00

Il y a quelques temps, Jean-Pierre Villain postait un tweet (lien externe) concernant la récente mise à jour de Yahoo! Mail, le client e-mail de Yahoo. Il critiquait alors l’ajout d’une vue des messages sous forme de discussions.

La vue des e-mails sous forme de conversation a été mise en place initialement par Google dans son service Gmail. L’idée est de regrouper l’ensemble des e-mails d’un échange dans un même ensemble, dont l’affichage prend la forme d’une liste de discussion.

Personnellement, je suis un fervent utilisateur de ce nouveau modèle de présentation. Et pour des raisons qui vont bien au delà que de mes goûts personnels.

Vers une uniformisation des usages

Ce n’est pas vraiment une raison qui me fait utiliser ce mode de vue mais plutôt un constat. Ce modèle d’affichage est de plus en plus appliqué dans des contextes très différents.

Les usages les plus anciens sont les forums et les messageries instantanées. Si les contextes d’utilisation sont opposés – instantanéité d’un côté, pérennité de l’autre -, on est habitué à ce type de vue depuis des années. Une première personne poste un message, puis une deuxième, une troisième et ainsi de suite.

Pendant longtemps ce type d’affichage n’est pas sorti de ces contextes, jusqu’à la sortie de l’iPhone – encore lui ! Apple redéfinissait alors l’affichage des SMS sous forme de discussion.

Après les SMS, les e-mails ont suivi le pas avec l’initiative de Google. Et désormais, la plupart des clients e-mail proposent ce type d’affichage.

On en arrive donc au premier avantage – pour moi – de ce nouvel usage et donc à la première raison pour laquelle j’utilise la vue discussion : on navigue très facilement dans les différents messages d’un échange et on gagne un temps fou lors de la recherche d’un ancien message de l’échange.

La vue conversation économique en énergie

La deuxième raison qui me pousse à utiliser la vue discussion concerne la consommation énergétique de ces échanges immatériels.

On y pense bien trop peu dans notre usage au quotidien mais les outils et services informatiques sont de gros consommateurs d’énergie. C’est particulièrement le cas des serveurs par lesquels transitent les milliards d’e-mails envoyés quotidiennement. Plus les e-mails contiennent de données, plus ils consomment d’espace sur les serveurs et plus leur impact écologique est important.

Quel rapport avec la vue conversation vous demandez-vous ?
Et bien ce type d’interface regroupant l’ensemble des e-mails d’un échange, il devient totalement inutile de garder une copie de l’e-mail d’origine dans sa réponse. Comme on navigue facilement dans la suite des échanges, on n’a plus besoin de dupliquer inutilement le contenus des précédents messages à chaque réponse !

Les e-mails qu’on envoie peuvent désormais ne contenir que le strict nécessaire : notre réponse à l’e-mail précédent.
Plus besoin de s’encombrer d’un historique d’échanges qui s’alourdit un peu plus à chaque nouvelle réponse, alourdit un peu plus chaque nouvel e-mail, augmente l’espace de stockage nécessaire pour ces e-mails et en bout de chaîne, consomme plus d’électricité.
D’ailleurs, je pense que la plupart d’entre-vous ont pu assister à ce phénomène dans le cadre professionnel, parfaitement propice à une escalade considérable du nombre d’échanges par e-mail. 😉

Profitons des bienfaits de la vue discussion

Bref, si ce type d’affichage est perturbant lors du premiers contact, il comporte à mon sens de très gros avantages. Dans le cadre d’une utilisation quotidienne, le fait de pouvoir naviguer très facilement dans l’historique d’un échange est déjà un vrai confort en soit. Mais en plus, on peut profiter de ce nouvel usage pour réduire la consommation énergétique, en arrêtant notamment de reprendre les messages précédents dans nos réponses !

La vue discussion, mangez-en !

De l’importance de réfléchir à l’expérience utilisateur

2013-10-24T12:42:09+02:00

Sur le chemin de Paris Web, je dois emprunter le TGV Lyria – qui relie la Suisse à la capitale française. Pour mon voyage aller, j’étais à quelques rangées de la porte du compartiment – délimitant la « plateforme » (qui donne sur les portes extérieures) et la zone passager – et j’ai pu être spectateur d’un moment de vie que tous les passagers d’un train vive au moins une fois : le passage de cette porte.

Cette position privilégiée m’a permis d’observer tous les comportements possibles est inimaginables de la part des usagers. Au moment d’ouvrir la porte, j’ai pu constater plusieurs pratiques :

Certains basculent simplement la poignée vers l’intérieur ;
D’autres essaient de tirer la poignée vers l’intérieur. S’ils ont pris la poignée par le haut, ça marche quand même. Mais s’ils la prennent plus en bas, ça ne marche pas ;
D’autres encore s’attendent à ce que la porte s’ouvre automatiquement.

De même, une fois la porte ouverte et passée, des comportements différents sont apparus :

D’un côté, la plupart des usagers se contentent de tracer leur chemin et laissent la porte se fermer automatiquement ;
De l’autre, j’ai pu en voir certains tenter de fermer la porte eux-même, en tirant à nouveau sur la poignée.

Forcément, devant autant de réactions différentes face à cette porte, je suis songeur et cherche à comprendre pourquoi (ayant l’habitude de prendre le train, passer cette porte me paraît tout à fait naturel et je ne m’étais donc jamais imaginé qu’elle pouvait poser problème, et pourtant).

Il m’a suffi d’une observation éclair pour constater un « vide » dans cette porte. Elle dispose d’une poignée verticale et… c’est tout !

Poignée de la porte sans aucune indication

Aucune indication – ne serait-ce que visuelle – pour faire comprendre aux usagers qu’il faut abaisser la poignée vers l’intérieur, qu’une fois la poignée baissée la porte coulisse toute seule puis qu’enfin elle se referme aussi toute seule.

Bon, je suis d’accord que dans l’absolu, les gens comprennent assez rapidement le fonctionnement. Mais il y a sans doute un (ou plusieurs) moyen(s) d’améliorer davantage leur expérience de cette porte.
Par exemple ici – en Suisse, dans certains types de wagon les portes sont totalement automatisées. Il suffit de passer devant pour qu’elles s’ouvrent. Sur chaque porte concernée, un gros carré jaune contient un message expliquant que la porte est automatique. Ainsi les usagers n’ont même pas à se poser de question.

Si on reprend notre porte du Lyria, une amélioration possible serait d’indiquer comment fonctionne la poignée. Par exemple une flèche pourrait indiquer qu’il faut la basculer vers l’intérieur.

Peut-être serait-il encore possible d’ajouter un message prévenant de la fermeture automatique par exemple.

Bref, avec un minimum d’observation, on peut déjà parfois détecter si ce n’est des problèmes, en tout cas des grains de sables. Dans tous les cas, il faut savoir se mettre dans la tête de nos utilisateurs. Pour leur offrir des solutions qui leur permette de profiter d’une expérience agréable lorsqu’ils utilisent nos sites ou applications.

Parce que mon exemple a beau être tiré du monde physique, il ne fait aucun doute que des internautes sont confrontés tous les jours à des interfaces qui provoquent des micro-ralentissements dans leur navigation. En sachant qu’un internaute a une patience très limitée, même ce qui peut paraître un tout petit détail peut nous coûter un visiteur !

Paris Web 2013 : ateliers et conclusion

2013-10-22T10:15:59+02:00

Après les journées de conférences de jeudi et vendredi, la journée des ateliers du samedi a été l’occasion d’aborder des sujets de manière un peu plus participative et poussée. Avec une heure et demie par atelier, ça donne effectivement plus d’amplitude pour creuser les choses.

Développons notre efficacité !

J’ai commencé la journée avec un thème loin de la technique. L’atelier de Teddy Marie-Luce portait sur le développement personnel et j’en suis sorti mitigé.
Le fond était intéressant et utile – dans une certaine mesure – mais la forme n’était pas évidente.

Teddy présentait sa méthodologie qui se découpe en quelques étapes :

Identifier une « croyance limitante » qui nous est propre. En gros, une idée qui m’empêche d’être au top. Par exemple pour un jeune diplômé, se dire qu’on ne peut pas avoir un salaire élevé parce qu’on sort de l’école est une croyance limitante.
Sur la base de cette croyance identifiée, se projeter dans son contexte professionnel pour voir comment on réagit.
Trouver un mentor (un modèle, un exemple) similaire à soi mais qui n’est pas limité par cette croyance. Puis se projeter dans sa peau en contexte professionnel. L’objectif étant d’identifier ce qu’il fait et qui permet d’outrepasser cette croyance.
Enfin, se remettre dans son propre contexte mais en agissant en suivant l’exemple de son mentor.

Après un exemple de mise en pratique avec une personne de l’assemblée, Teddy nous a demandé de faire l’exercice en duo.

Autant l’exercice reste sympa parce qu’il a permis à chacun de s’exprimer par rapport à sa propre situation, autant je pense que son efficacité reste limitée dans ce contexte. Car c’est le genre de sujet qui nécessite d’être travaillé avec quelqu’un qui est un minimum compétent en relation humaines voire dont c’est le métier (coach par exemple). Je suis donc sorti de là sceptique.

Après la macro, la micro !

L’année dernière, j’avais suivi et adoré l’atelier de Vincent Valentin (lien externe) et Marie Guillaumet (lien externe) qui parlaient de macro-typographie. Après les grilles de mise en page (échelle macro) l’année dernière, Vincent présente – cette fois seul – l’échelle micro qui concerne donc, à l’opposé de la macro, les détails du texte : lignes de texte, mots, lettres, signes, espaces…

Sous forme d’un jeu visant à relever les erreurs dans des citations de films, Vincent nous fait découvrir les règles typographiques qui s’appliquent aux éléments de la micro-typographies : signes de ponctuation, espaces, majuscules, abréviations, symboles… La présentation est riche de leçons et je peux difficilement résumer ici ce qu’il a déjà bien dû avoir du mal à résumer dans ces slides.
Si vous êtes curieux du contenu, je vous invite donc à les parcourir sur Slideshare (voir le lien ci-dessous). D’autant plus qu’elles sont accompagnées des commentaires d’explication qui vont bien !

Les ressources de l’atelier :

Slides de « Après la macro, la micro ! » sur Slideshare (lien externe)

Rendre son application HTML5 accessible en 4 étapes

Après un buffet bien garni, j’ai entamé mon après-midi dédié à l’accessibilité avec Jean-Pierre Villain (lien externe), accompagné de sa fille Shanni, avait pour ambition de présenter les étapes et la démarche pour rendre accessible une application web en HTML5.
Sur le modèle de leur conférence pendant CRAW2013, ils nous ont offert une présentation très dynamique mélangeant explications et démonstrations concrètes. Ainsi l’atelier a permis de présenter la mise en accessibilité d’une application de type Twitter disposant des fonctionnalité de lecture et d’écriture de messages courts, avec la possibilité de répondre et supprimer des messages.

Leur travail s’est déroulé en 4 temps :

HTML0 : une version de base de l’application, sans effort particulier d’accessibilité (le cas d’une majorité d’applications ou sites web). En gros, une soupe de div sans structure menant à mal un utilisateur de lecteur d’écran, personnifié par Shanni.
HTML4 avec un niveau WCAG2 AA : à partir de la première version, il a simplement été corrigé les problèmes de structure et de sémantique. Par exemple, le bouton pour écrire un message était une simple image avec un onclick dans la version 0 ; l’image a donc été remplacée par un élément button permettant à l’utilisateur d’interagir avec.
HTML5 : cette troisième étape sert essentiellement à fortifier la stucture sémantique de la page à renfort de header, footer, nav, etc.
HTML5 avec ARIA : enfin la dernière étape consiste à ajouter la couche d’ARIA permettant de rendre plus utilisable l’application aux utilisateurs d’aides techniques. Jean-Pierre fait ainsi la démonstration du rôle dialog permettant de gérer les pop-ins et autres système de type « lightbox ».

Comme d’habitude une session très enrichissante de la part de Jean-Pierre. Et comme d’habitude malheureusement une session trop courte pour tout ce qu’il a à nous dire. 😛

Les ressources de l’atelier :

Slides de « Rendre son application HTML5 accessible en 4 étapes » sur Slideshare (lien externe)

Des modèles de conceptions pour vos composants d’interface grâce à ARIA

Avant de clôturer ce cru de Paris Web, je suis resté dans l’accessibilité avec Aurélien Lévy (lien externe) et ~~Laurent Denis~~ Stéphane Deschamps (lien externe) venus animer un atelier dédié à ARIA.

Aurélien a présenté les design patterns ARIA au clavier (lien externe) pour certains widgets. En effet, à chaque widget (accordéon, date picker, boîte de dialogue…) correspond un design pattern qui définit le modèle d’interaction du widget. Autrement dit, pour chaque widget une norme d’usage précise quelles touches permettent de réaliser quelle action.
Si on prend l’exemple du date picker, la touche de tabulation permet de prendre le focus sur la date du jour. Si on est déjà dans le widget : la tabulation permet d’en sortir, les flèches gauche/droite permettent de se déplacer sur le jour précédent/suivant, les flèches bas/haut permettent de se déplacer sur le même jour de la semaine suivante/précédente, etc.
Chaque widget a donc ses règles d’usage prédéfinies, c’est ce qu’on appelle le design pattern.

Cependant et malgré une trentaine de design patterns prédéfinis, Aurélien précise assez rapidement qu’avant de se lancer dans la conception d’un widget, il convient de bien réfléchir en amont au fonctionnement de l’interface.
Il donne l’exemple du calendrier sur la page d’accueil du site de l’Élysée (lien externe) dont l’ergonomie est vraiment particulière et qui a donc nécessité une réflexion poussée pour déterminer le meilleur modèle. Il illustre donc l’un des messages forts de cette édition : il n’y pas de règles figées dans le marbre et universelles, au quotidien les décisions sont à prendre selon le motto « ça dépend ».

La dernière partie de l’atelier a donné lieu à une réflexion partagée sur la création d’un carrousel auquel il nous était demandé de déterminer le design pattern à appliquer. C’était l’occasion idéale – au delà du discours déjà clair d’Aurélien – que se rendre compte que le plus dur se joue à la conception. Et qu’il est donc important de vraiment prendre le temps de penser à l’usage et aux fonctionnalités très précisément dès le début.
Malheureusement on a manqué de temps pour aller au bout de l’exercice et je ne doute pas que la grande majorité des participants auraient aimé aller jusqu’au bout. Mais on en quand même vu assez pour réaliser que la tâche n’était pas aisée.

Conclusion et impressions

Et voilà, c’est déjà fini pour cette huitième édition de Paris Web. La troisième en ce qui me concerne.
Comme d’habitude, ce sont les conférences « à côté » que j’ai préférées. Le web qui rouille, les objets connectés, le hacktivisme… sont des sujets qui sont certes loin de nos préoccupations quotidiennes quand on travaille dans la conception web, mais ils sont en même temps intimement liés à notre job. Et il est d’autant plus important de parler de sujets comme ceux-là parce qu’ils nous obligent à nous poser des questions avec beaucoup plus de recul que ce qu’on est en mesure de se permettre au quotidien. Ils nous obligent à réfléchir sur ce qu’on fait, à regarder les choses sous un autre angle et en définitive à enrichir notre vision et nos opinions.
Au final, ces sujets révèlent des problématiques qui peuvent avoir un impact direct sur notre travail (évolution des interfaces, gestion de nos données et de celles de nos clients…). Bref, Paris Web est le moment idéal pour aborder des sujets qui nous obligent à prendre de la hauteur et j’aime !

Au delà du contenu des conférences et des ateliers, ce sont surtout les échanges humains qui font de Paris Web un grand moment. Le caractère « bisounours » décrié par certains fait partie des forces de l’évènement en ce qui me concerne. Parce que notre quotidien n’est pas toujours facile et nous oblige très souvent à faire des concessions sur nos rêves de qualité, d’accessibilité ou de mettre-ici-le-sujet-de-vos-rêves.
Profiter de ces quelques jours de partage – pendant lesquels on rencontre d’autres personnes avec des idéaux communs – ça me permet personnellement de recharger les piles et de partir gonflé à bloc pour affronter la dure réalité quotidienne. On se rend compte qu’on n’est pas seul et que d’autres se battent aussi pour faire du web un « monde » meilleur pour tous. Bref, je reviendrai en 2014 ! 😀

Et si vous n’êtes pas rassasié par mon compte-rendu, il y en a toute une tripotée d’autres à lire (liste non exhaustive) :

[ Paris web ] – 2013 – Une année de transition ? (lien externe) et [ Paris web ] – La bisounourserie (lien externe) par Adrien Leygues.
Paris Web 2013, l’accessibilité et l’internet des objets (lien externe) par Baptiste Adrien, Bastien Jaillot et Damien Alexandre.
Paris-Web 2013, nous y étions ! (lien externe) par Benoit Vrins.
Mes conférences chouchous à Paris Web 2013 (lien externe), De l’enthousiasme post-Paris Web (lien externe) et Internet et société : la responsabilité des professionnels (lien externe) par Delphine Malassingne.
Paris Web 2013, l’être ensemble (lien externe) par Marie Guillaumet.
Paris Web 2013, ça dépend (lien externe), Paris Web 2013… vu de l’orateur (lien externe) et Des bisounours à Paris Web (lien externe) par Nicolas Hoffmann.
Paris Web 2013 (en anglais) (lien externe) par Nicolas Steinmetz.
Paris Web 2013 (lien externe) par Romy Duhem-Verdière.
Mes rêves sont devenus réalité à Paris web (lien externe) par Sophie Drouvroy.
Mon Paris Web 2013 (lien externe) par Stéphane Deschamps

Paris Web 2013 : conférences du vendredi

2013-10-21T11:08:23+02:00

Après le compte-rendu de la première journée, c’est parti pour la seconde journée !

Le web après les mots de passe

J’ai commencé la journée sur le thème de la sécurité avec la présentation d’Olivier Potonniée (lien externe).

Olivier pose le constat de base : la majorité des systèmes d’authentification utilisés aujourd’hui se résument à un couple nom d’utilisateur/mot de passe. Petit problème, la majorité des utilisateurs définissent des mots de passe peu sécurisés.
Il étaye d’ailleurs son discours avec un cas réel. En 2009, le réseau social RockYou a été hacké et les comptes de 30 millions d’utilisateurs dont les mots de passe étaient stockés en clair (pas bien !) ont été récupérés. L’analyse des mots de passe a révélé des statistiques édifiantes :

290 729 utilisateurs (1%) avaient le même mot de passe « 123456 ».
Seuls 40% des mots de passe étaient uniques. C’est à dire que pour les 60% de mots de passe restants, chaque mot de passe était utilisé par au moins 2 utilisateurs.
Les 10 000 mots de passe les plus courants (soit 0,03% des 30 millions d’enregistrements) étaient utilisés par 24% des utilisateurs.

Autre chiffre édifiant, d’après une étude de BitDefender, 75% des utilisateurs utilisent le même mot de passe pour leurs comptes emails et leurs comptes de réseaux sociaux. Bref, les mots de passe sont insuffisants pour assurer la sécurité de nos comptes d’après l’orateur.

Olivier a donc fait un étalage des alternatives, à commencer par les solutions dites d’authentification forte. L’idée étant d’apporter un niveau de sécurité supplémentaire en combinant les classiques noms d’utilisateurs/mot de passe avec une autre solution d’authentification : mots de passe uniques (lien externe), certificats numériques embarqués sur une clé USB, solution biométrique… Les solutions ne manquent pas.

Il a ensuite présenté les solutions d’identification sociale telles qu’OpenID (lien externe). Plus qu’une sécurisation supplémentaire, l’idée est ici de simplifier la gestion des différents comptes de l’utilisateur en lui demandant de ne retenir qu’un seul couple d’identifiants qu’il utilisera sur tous les sites.
Olivier apporte cependant une nuance sur ces services car si certains sont des services d’authentification (OpenID, Browser ID), d’autres ne sont que des services d’identification (OAuth utilisé notamment par Facebook et Twitter). Dans ce dernier cas, il y a plus de risques au niveau de la vie privée de l’utilisateur, notamment parce qu’au delà de se connecter avec notre identité pré-existante, on donne accès à tout ou partie de nos données.

Au final, si la problématique est intéressante et bien réelle, elle reste toute relative. Car comme l’a très justement signalé un des auditeurs au moment des questions, quelque soit la solution utilisée, toutes s’appuient à la base sur un compte auquel on est identifié avec… un mot de passe !
Il suffit donc que le mot de passe du compte principal soit peu sécurisé pour que l’accès à toutes nos données et comptes soit possible à partir d’un seul compte. Autant dire que le risque est même finalement plus élevé.

Bref, pour être tranquille, choisissez un mot de passe unique et fort pour chacun de vos comptes, et évitez la facilité des Facebook Connect et consors. C’est la recette que j’utilise depuis un bon moment et je ne m’inquiète pas trop pour mes données et informations. 🙂

Les ressources de la conférence :

Slides de « Le web après les mots de passe » sur Slideshare (lien externe)

Un bon design n’est pas beau !

Pour enchaîner sur le sujet tout à fait sérieux des mots de passe, je suis resté dans la même salle pour écouter Sébastien Desbenoit (lien externe) parler de bon/beau design. J’ai découvert ses qualités d’orateur lors de l’édition de l’année dernière et je dois dire que j’adore. Il a une façon très ludique de présenter l’information tout en prenant le soin d’avoir extrêmement bien préparé et documenté son sujet. J’étais donc pressé de voir sa prestation.

En 15 petites minutes il a pu nous placer les définitions du beau dans l’histoire pour mettre en valeur le fait que la notion de « beau » est toute relative. Suivant nos aspirations personnelles, on ne trouvera pas tous le « beau » aux mêmes endroits.
Au delà de cet état de fait très scientifique, ce qu’on peut trouver beau ne signifie par pour autant que c’est bon. Il prend comme exemple les désormais classiques Le bon coin et Cdiscount qui sont les exemples typiques de sites que tout le monde trouve globalement moches et qui pourtant marchent du tonnerre.
La raison qu’il met en avant : il faut savoir écouter le marketing, un site peut tout à fait être moche et fonctionner pour la simple raison qu’il répond aux besoins de sa cible. Le designer doit donc créer son design en fonction de la cible du site Internet. Et si pour y répondre le site doit être moche, alors le designer doit un peu ravaler sa fierté et se préoccuper des utilisateurs.

Les ressources de la conférence :

Slides de « Un bon design n’est pas beau ! » sur Speaker Deck (lien externe)

Vers une nouvelle éthique

Toujours dans la même salle, on passe du design à la politique. En écho de la conférence d’Amaëlle Guilton la veille, celle de Xavier Mouton-Dubosc (lien externe) remet sur le tapis l’importance de s’engager, en tant que professionnel du web, pour défendre et promouvoir un modèle de société révélé par l’évolution fulgurante du web ces 20 dernières années.
Sur un ton résolument burlesque, Xavier a donc enchaîné les images révélatrices de l’écart entre le monde politique d’aujourd’hui (et de ces dernières années) et du monde du web, le premier menaçant sérieusement le second. Je ne saurais que trop vous conseiller de vous jeter sur la vidéo de la conférence lorsqu’elle sera diffusée. Car en plus d’être très drôle, la conférence est riche en contenu et met en valeur des intérêts qui nous concernent tous.

Les ressources de la conférence :

Livre Électronique et Standards du Web

Après la petite pause du matin, je suis allé voir Daniel Glazman (lien externe) venu parler des évolutions techniques qui lient les livres électroniques et le web. Même si c’est un sujet qui paraît loin du web, c’est quelque chose qui m’intéresse beaucoup.

Daniel commence donc par brosser un petit historique de l’évolution du livre électronique jusqu’au format EPUB 3, dont l’objectif est de faire converger les technologies des livres électroniques avec les standards du web.
Si les améliorations au fil du temps sont notables, il apparaît qu’il reste quand même un énorme travail de standardisation pour que la spécification EPUB 3 soit solide. Notamment parce que la spécifications EPUB 3 s’appuie sur des spécifications du W3C en brouillon et donc soumises à des évolutions intempestives permanentes. En conséquence, un livre en EPUB 3 développé il y a un an et un autre développé aujourd’hui peuvent contenir des différences notables pour la simple raison que les spécifications sur lesquelles se sont appuyés les développeurs ont évolué entre temps.

Bref, l’état des lieux en termes de standardisation des livres électroniques n’est pas brillant d’après le tableau peint par Daniel. Mais les choses bougent et les industriels et le W3C travaillent désormais ensemble pour développer un standard solide.

Les ressources de la conférence :

Keep calm and carry on

Après la conférence de Delphine la veille, en voici une autre traitant du bien-être des collaborateurs avec cette fois un retour d’expérience très concret. Ainsi, Lou Schwartz (lien externe) raconte comment elle a réagit et ce qu’elle a mis en place pour rassurer une stagiaire submergée par le stress. Malgré des tentatives de discussion et même en déchargeant la stagiaire de certaines de ses tâches, son niveau de stress ne baissait pas.
Elle a donc mis en place une série d’exercices pour identifier l’origine de son stress et mettre en place les solutions permettant d’y remédier. Avec de la persévérance, Lou a ainsi pu rassurer et déverrouiller les points de blocage de sa stagiaire.
La stagiaire a ainsi pu compléter ses tâches avant la fin de son stage, son état d’esprit s’est amélioré ce qui a par extension un effet positif sur l’ensemble de l’équipe.

Les ressources de la conférence :

Les méthodes d’influence dans le web par l’exemple

On passe ensuite à une conférence de rêve pour les « marketeux ». Yannick Bonnieux a fait défiler les méthodes d’influence existantes dans le cadre d’un parcours d’achat. Il étaye son propos avec pas mal d’études chiffrées et il en ressort une présentation très dense en termes de contenu.
Une présentation donc très instructive mais le format de 15 minutes était un peu limite étant donnée la richesse des contenus.
Il me semble qu’il y a eu aussi des reproches quant aux chiffres avancés – issus d’études scientifiques, mais j’ai envie de dire que c’est toujours la même chose. les statistiques sont toujours à prendre avec du recul et ne sont pas applicables telles quelles sur un projet. Chaque cas est particulier et c’est seulement une étude au cas par cas qui permet de mesurer réellement quelles techniques marchent le mieux dans un cas précis.

Les ressources de la conférence :

Esthétique et pratique du Web qui rouille

Suite à une matinée intense, j’ai commencé l’après-midi avec un grand bol d’air et une ouverture maximale de mes chakras. Les conférences qui prennent autant de hauteur sont celles que je préfère – et de loin – et celle-ci ne déroge pas à la règle : j’ai a-do-ré !

Karl Dubost (lien externe) et Olivier Thereaux (lien externe) se posent la question de la gestion de nos données diffusées sur le web et plus largement de nos données numériques. Leur présentation est ainsi tissée d’exemples et de parallèles issus de la vie réelle qui aident à matérialiser les idées.
Ainsi, Karl commence par donner l’exemple du ticket de caisse, espace de communication restreint au possible et pourtant riche en données : date, lieu, magasin, nom de l’hôtesse de caisse, etc. La plupart du temps, on jette ces tickets aussi vite qu’on les a reçus. Mais parfois, ce ticket sert de preuve d’achat voire même de garantie. Soudain, le ticket qu’on jette habituellement devient important et on le conserve. C’est la même chose pour nos données numériques.
Ils parlent aussi de l’infobésité. Pour eux, il n’y a pas plus d’information que par le passé, la surabondance d’informations est simplement le résultat d’une plus grande capacité à enregistrer et conserver les informations. Ainsi, depuis l’avènement du web et du numérique, on a effectivement tendance à stocker une quantité incroyable d’information.

D’exemple en exemple, d’image en image, les deux compères nous amènent à la question du choix des URI de nos contenus web. Au delà du choix technique, il faut d’abord faire un choix « éditorial » et se poser la question de l’importance de nos contenus. Tel contenu nécessite-t-il d’être accessible en permanence ? Vaut-il la peine d’être supprimé ?
Pour aller plus loin, je vous invite à lire l’article posté par Karl sur 24 jours de web (lien externe) dans lequel il évoquait déjà ces réflexions.

Slides et matériel de « Esthétique et pratique du Web qui rouille » sur Github (lien externe)

Multimodalité & interfaces. Le design est une question d’humains, pas de machine

Après l’air frais du web qui rouille, je suis resté dans un domaine conceptuel, le design. J’ai suivi la conférence de Geoffrey Dorne (lien externe) qui nous a parlé de multimodalité. Le titre m’intriguait et je n’étais pas le seul. Quand Geoffrey demande si nous savons ce que signifie la multimodalité, relativement peu de personnes se manifestent.
En gros, la multimodalité est le fait de pouvoir accomplir une action de plusieurs manières différentes. Pour illustrer l’idée, il donne l’exemple d’un déplacement d’un point A à un point B, qu’on peut potentiellement faire à pied, à vélo, en voiture, en bus, en train… Appliqué au web, cela consiste donc à donner la possibilité aux utilisateurs d’accomplir la même chose quelque soit le périphérique utilisé. Et donc de réfléchir et concevoir des services adaptés aux contextes d’utilisation (on ne proposera pas la même ergonomie sur un mobile tactile que sur un ordinateur ou une télévision).
Armé une d’une belle quantité d’exemples et de mises en application, Geoffrey a déroulé sa présentation comme un chef et j’ai pu découvrir avec grand plaisir ses qualités d’orateur.

Slides de « Multimodalité & interfaces. Le design est une question d’humains, pas de machine » sur Slideshare (lien externe)

Mobile et accessibilité, une partie à Troie

Courte conférence de Goulven Champenois (lien externe) qui met en rapport les efforts d’accessibilité à poursuivre sur le web, notamment dans un contexte mobile. Notamment parce qu’en tant qu’utilisateur mobile, on se retrouve facilement en situation de handicap car un site visité peut proposer une expérience pas du tout adaptée.
Il enchaîne ainsi les exemples à éviter / à suivre mis en parallèle avec les grandes règles d’accessibilité qu’on peut déjà connaître.
Beaucoup de contenus balancés en 15 minutes. Étant déjà personnellement très sensibilisé aux problématiques d’accessibilité, je n’ai pas découvert grand chose mais nul doute que les personnes pas très au fait auront appris beaucoup de choses.

Ah si, Goulven en a profité pour pré-annoncer l’édition 2014 de Sud Web (lien externe) qui aura lieu à Toulouse fin mai. 😀

Le paradoxe du choix

Et pour finir avec les conférences « sérieuses », Anne Lacan (lien externe) a parlé de la problématique du choix dans une société où on a désormais le choix pour à peu près tout, qu’il s’agisse de notre vie professionnelle mais aussi personnelle.
Le fait d’avoir le choix nous bloque dans une certaine mesure. En effet, suivant notre état d’esprit, on peut être tellement dépassé par la quantité de choix qu’on finira par ne rien choisir. Ou encore, une fois qu’on aura fait un choix, on pourra regretter ce choix et/ou penser qu’on aurait pu faire un meilleur choix. Au final, on subit une frustration qui nous empêche d’être heureux.
Anne finit sa présentation en donnant des exemples de pratiques à suivre ou à éviter pour éviter les problèmes de choix des utilisateurs dans un contexte de site marchand.
Bref, conférence intéressante et bien animée par Anne qui a su présenter les choses très simplement.

Lightning talks

Pas de résumé pour les Lightning talks, c’est tout simplement impossible à résumer et il faut le vivre. Malheureusement, la vidéo n’est pas encore disponible mais filez la voir quand ce sera dispo ! Voici quand même les quelques slides disponibles :

Fin du deuxième jour

Voilà pour les conférences que j’ai suivies le vendredi. Toujours riche de rencontres et de découvertes, cette deuxième journée a été d’une grande richesse. Je donne une mention spéciale à la conférence « Esthétique et pratique du Web qui rouille » élue ma conférence préférée de cette édition. 😀 C’est le genre de conférence que je kiffe totalement à Paris Web, on s’ouvre complètement l’esprit pour réfléchir au delà des problèmes du quotidien et je trouve que c’est ce qu’il y a de plus ressourçant sur ces quelques jours (en ce qui me concerne). 😉

Si vous avez loupé tout ou partie des conférences qui étaient retransmises en direct, vous pouvez toujours les voir sur le site de Paris Web (lien externe).

Paris Web 2013 : conférences du jeudi

2013-10-17T09:46:47+02:00

Pour la troisième année consécutive, j’ai pu me rendre à la grand messe annuelle des « faiseurs » de web. Voici donc un modeste retour sur les deux jours de conférences qui ont eu lieu au Palais Brongniart (lien externe) les 10 et 11 octobre. Sans oublier la journée d’atelier le 12 octobre, hébergée par l’ESG Management School (lien externe).
Contrairement à mon habitude, je ne vais pas proposer de compte-rendu ultra détaillé des conférences et ateliers. Entre la quantité de contenu incroyable mais aussi – et surtout – la place prise par les échanges entre camarades de jeu du web, ma faculté de tout retranscrire atteint ses limites. 🙂

La folle journée, ou les fourberies d’un projet

Bref, mon aventure commence comme tous les autres spectateurs des conférences avec la folle journée, ou les fourberies d’un projet (lien externe). Excellent moment de détente en guise d’introduction, Julien Dubedout (lien externe), Florian Boudot (lien externe) et Christophe Andrieu (lien externe) dépeignent les méandres d’un projet web mené par trois stagiaires en alternance au sein d’une agence fictive. Malgré le ton résolument décalé de cette présentation, les situations sont finalement rarement exagérées et tout le monde dans la foule se sera forcément retrouvé à un moment ou à un autre.

Les ressources de la conférence :

Le retour sur investissement de la qualité web

Après ce moment de détente, je me suis remis aux choses sérieuses avec le retour sur investissement de la qualité web (lien externe) présenté par Muriel de Dona (lien externe). L’essentiel de la conférence consistait à présenter la démarche de management de la qualité prônée par Temesis (lien externe) depuis de nombreuses années.
Le retour sur investissement du titre de la présentation se résumait surtout à expliquer l’origine de l’un des goodies les plus intéressants de cette année : un poster de bonnes pratiques Opquast (lien externe). En effet, il contient une liste réduite des bonnes pratiques des référentiels Opquast, qui ont été sélectionnées d’un commun accord entre l’ensemble des partenaires Opquast (lien externe). Le critère de sélection principal étant donc l’impact notable des bonnes pratiques sur le ROI d’un site.

Slides de « Le retour sur investissement de la qualité web » sur Slideshare (lien externe)

HTML5 accessibility

Suite à la qualité web, je suis passé à l’accessibilité dans HTML5 (lien externe). Steve Faulkner (lien externe) a fait un petit état des lieux de l’accessibilité aujourd’hui et s’est concentré particulièrement sur deux points :

Certains intégrateurs/développeurs ont tendance à abuser de la balise section pour remplacer les traditionnelles div. Mais cette pratique n’est pas du tout neutre en terme d’accessibilité car chaque section est oralisée par les lecteurs d’écrans, contrairement aux div. Steve conseille donc d’utiliser une section uniquement si celle-ci contient un titre. Autrement, il vaut mieux rester sur la bonne vieille div.
L’autre grand message concernait les fonctionnalités pour les formulaires en HTML5 (nouveaux types de champs notamment). Le constat est que les concepteurs les exploitent très peu, en particulier car leur rendu est très variable selon les navigateurs et les designers veulent généralement garder la maîtrise du rendu de ces éléments. On se retrouve donc avec des éléments de formulaire composés uniquement de div et de span sur lesquels sont ajoutés des rôles ARIA. Si la pratique peut se justifier, Steve dicte quand même quelques règles pour encadrer ces méthodes :
- privilégier dans tous les cas l’utilisation des éléments natifs, sauf s’ils sont difficilement personnalisables ou non/mal implémentés par les navigateurs ;
- Ne pas changer la sémantique naturelle des éléments ;
- Rendre les contrôles ARIA systématiquement utilisables au clavier.

Bref, pas de grosses surprises mais des règles qu’il est toujours bon de rappeler. 🙂

Les ressources de la conférence :

Les 7 préceptes d’un projet web raté !

Sur un ton décalé, Julien Oger (lien externe) nous a généreusement listé tout ce qu’il fallait faire pour faire foirer un projet. Passer seulement quelques heures après « La folle journée, ou les fourberies d’un projet » n’a pas dû être facile pour lui, mais il s’en est bien tiré et ça a été un plaisir de suivre sa conférence.

Les ressources de la conférence :

Slides de « Les 7 préceptes d’un projet web raté ! » sur Slideshare (lien externe)

S.A.R.A.H. maison intelligente pour connecter l’internet des objets

Pour la première conférence de l’après-midi, Jean-Philippe Encausse (lien externe) nous parle de son projet S.A.R.A.H. (lien externe) (Self Accurated Residential Automated Habitat) visant à simplifier et « universaliser » le contrôle d’objets connectés à Internet.
Il a commencé par brosser un historique de l’évolution d’Internet, en insistant notamment sur le duel Internet Explorer/Netscape qui a forcé la standardisation du web. Car aujourd’hui on observe une lutte des tranchées similaires avec les objets connectés. En effet, chaque constructeur d’objet développe ses propres interfaces propriétaires et il n’y a par conséquent aucune norme ni interopérabilité entre les différents objets.

L’objectif du projet S.A.R.A.H. est de servir d’interface normalisée pour contrôler l’ensemble de ses objets connectés. Sur la base de requêtes HTTP, S.A.R.A.H. s’interface avec les différents objets de la maison selon un principe très simple : une requête HTTP = un « ordre » envoyé à l’objet. L’utilisateur n’a donc plus qu’à programmer ses requêtes comme il programme l’enregistrement d’un programme TV.
Pour ce faire, Jean-Philippe explique qu’il suffit d’utiliser un moteur de règle comme IFTTT (lien externe) qui permet aux utilisateurs de définir des règles très simplement.

D’un point de vue de l’usage on peut même aller très loin. En couplant S.A.R.A.H. avec Kinect, il est possible de mettre en place une reconnaissance faciale, gestuelle ou vocale pour définir ses règles. Il en fait d’ailleurs la démonstration en nous montrant la vidéo réalisée par un des membres de la communauté (lien externe).

Bref, c’était une conférence très intéressante. Même si le sujet est de plus en plus présent, le problème de propriétairisation » des interfaces chez les constructeurs limite énormément l’expansion et l’adoption des objets connectés et surtout leur usage. L’existence de solutions comme S.A.R.A.H. a donc de quoi ouvrir des perspectives, ne serait-ce que pour l’apport essentiel de l’interopérabilité des différents systèmes.

Les ressources de la conférence :

Un petit pas pour l’em, un grand pas pour le Web

Armé de pas mal d’arguments chiffrés et extrêmement bien documenté, Nicolas Hoizey (lien externe) présente les avantages et inconvénients de l’utilisation des em comme unité de mesure de l’ensemble d’un site – et pas seulement. La quantité d’information partagée pendant la conférence est assez impressionnante et il cite systématiquement les sources de ses réflexions, qu’il s’agisse d’articles ou d’outils utiles. Je ne vais donc tout pas répéter ici, sa présentation et la vidéo de la conférences se suffisent à elles-même.
Je vous invite juste à lire en complément l’article de Marie Guillaumet sur le sujet (lien externe). Elle s’est appliqué à mettre en pratique le « tout em » sur son site et elle l’explique très bien.
Je n’ai qu’une chose à dire après cette présentation : ça donne foutrement envie de s’y essayer !

Les ressources de la conférence :

Être bien pour produire bien

La conférence suivante était menée par Delphine (lien externe) qui a parlé de qualité web. Mais cette fois, à bat la technique ou les outils, elle s’est concentrée sur les aspects humains du travail. Comme elle a très judicieusement publié un article sur w3qualité (lien externe) où elle y retranscrit le contenu de sa conférence, je vous invite de ce pas à le lire.
Ce qu’il faut en retenir, c’est qu’il est primordial de s’intéresser aussi à l’aspect humain si on souhaite améliorer la productivité d’un individu et d’une équipe. Car les outils ne font pas tout. Cela passera notamment par la reconnaissance du travail de ses collaborateurs, notre capacité à entretenir une bonne ambiance au sein de l’équipe et enfin le respect des personnes. Le mot-clé de la conférence : « bienveillance ».

Les ressources de la conférence :

La rencontre entre hacktivisme et sociétés civiles, un enjeu pour les libertés numériques

Enfin pour clore la journée, j’ai été voir une conférence au contenu beaucoup plus politique. Déjà l’année dernière il y avait eu une conférence sur le hacktivisme que je n’avais pas suivie, j’y suis donc allé cette fois-ci. D’autant plus que les sujets « voisins » de nos problématiques quotidiennes sont souvent les plus enrichissants et les plus intéressants.

Amaëlle Guitton (lien externe) commence sa conférence avec quelques chiffres : aujourd’hui, environ 39% de la population utilise Internet. Cela leur donne une liberté de communication, d’information et de partage sans pareil mais toutes les populations ne sont pas égales. Si 98% des Islandais ont un accès Internet, l’inverse est vrai comme au Cambodge par exemple, où seulement 5% de la population y a accès.
Au delà de cette première limitation des libertés, elle a ensuite détaillé l’ensemble des entraves qu’on a déjà pu constater dans certains pays – dont la France : cyber-censure, surveillance des réseaux, tentatives de régulation.

Dans ce contexte, elle ouvre ensuite la question sur les évolutions de l’Internet à venir et notamment le modèle communautaire des hackers qui commence à s’appliquer au domaine politique. Ainsi, la défense de nos libertés numériques relèvent pour elle davantage d’une volonté politique et citoyenne que de solutions techniques. Bref, il tient à chacun de nous de devenir acteur pour défendre nos libertés.

La conférence étant très dense, je vous ai fait un résumé très grossier et je vous invite à regarder la vidéo une fois qu’elle sera disponible pour profiter de tout le contenu.

Les ressources de la conférence :

Fin du premier jour

Voilà pour les conférences que j’ai suivies le premier jour.
Ce premier jour tenait déjà les promesses de l’évènement avec beaucoup d’informations très intéressantes et surtout le bonheur de retrouver tout un tas de visages que je n’avais pas vus depuis plusieurs mois (voire un an pour certains). C’est toujours un plaisir et ce n’est pas terminé puisque le compte-rendu du deuxième jour suivra le plus rapidement possible. 😉

Si vous avez loupé tout ou partie des conférences qui étaient retransmises en direct, vous pouvez toujours les voir sur le site de Paris Web (lien externe).

France, démonarchie et extrémisme syndical

2013-09-30T12:35:40+02:00

La récente polémique sur le travail dominical des magasins Leroy Merlin et Conforama en Ile-de-France me donne l’occasion de parler d’un sujet qui me tient à cœur depuis que j’ai emménagé en Suisse : la démocratie.

La démocratie vue des Français

En France, on nous bassine dès le plus jeune âge sur notre belle démocratie. Dès l’école primaire, on nous parle de la Révolution française qui a donné au peuple le pouvoir qu’il mérite. Ainsi, c’est lui qui élit ses représentants qui gouverneront le pays et seront chargés de prendre les décisions qui répondent aux attentes et aux besoins du peuple.
Dans la théorie, c’est un mode de fonctionnement qui doit permettre à la majorité d’être pleinement satisfaite. Dans les faits, on en est parfois très loin et la polémique sur le travail dominical en est la parfaite illustration.

Pourquoi est-on donc si loin du modèle idéal ? Je vois 2 éléments de réponses, soulevés par notre affaire du travail dominical :

La démocratie française n’est pas si démocratique que ça ;
Les syndicats français sont bien trop puissants eu égard à leur représentativité.

La France démonarchique

Concernant la démocratie, j’ai pu constater durant ma courte vie de citoyen-électeur un gros malaise chez nous les Français : la plupart des gens ne votent pas pour un candidat mais contre un candidat.

Je me rappelle encore d’une discussion enflammée avec un camarade de classe au moment de la présidentielle de 2007. C’était entre les 2 tours. Sa position était qu’il fallait voter pour Ségolène pour ne pas laisser passer Nicolas. Personnellement, j’avais l’intention de voter blanc (ce que j’ai fait). C’est la position que j’ai soutenue face à lui et il ne comprenait pas.
Pourquoi j’ai voté blanc ? Parce que je ne me retrouvais dans aucun des 2 candidats et pour moi il n’y aurait en définitive pas de différences entre les 2. Même si je suis plutôt penché à gauche, ma seule orientation politique n’est pas une raison suffisante pour voter pour quelqu’un en qui je ne crois pas.
De plus, le vote blanc a pour moi le même poids qu’un vote pour un candidat – même si ce n’est malheureusement pas le cas dans la pratique (lien externe). Voter blanc, c’est signifier son refus des solutions proposées.

Bref, cette petite digression pour dire que beaucoup votent avant tout contre un candidat plutôt que pour son concurrent. Pour moi c’est un indice révélateur de la santé défaillante de notre belle démocratie. La raison pour laquelle les gens agissent ainsi, c’est qu’ils ne croient plus en leurs représentants.
Mes pensées vont même plus loin. Aujourd’hui, les Français n’élisent pas un président et son gouvernement, ils élisent un roi et sa cour.
Une fois les représentants élus, le peuple n’a qu’à subir les décisions politiques justes ou moins justes et n’a que rarement la possibilité de s’exprimer – et quand ça arrive, c’est pas toujours agréable pour le roi (lien externe). Des lois sont votées sans grande consultation et en résultent des grèves devenues un symbole national de la France pour l’ensemble des pays étrangers. Et c’est là que les syndicats débarquent.

Syndicalisme de l’extrême

L’autre sujet soulevé par les débats sur le travail dominical, c’est les syndicats.
Ces débats révèlent au grand jour le grand décalage entre la force des syndicats et leur représentativité dans les rangs des salariés.
Les syndicats sont en effet à l’origine du débat suite à leur tentative de faire fermer le dimanche les magasins incriminés. Mais dans leur éternelle « quête de justice pour les pauvres salariés exploités », ils ont oublié un détail : nombreux sont les salariés eux-même en demande de pouvoir travailler le dimanche.

Mais comment les syndicats peuvent-ils être autant à côté de la plaque vous demandez-vous ? Et bien peut-être tout simplement parce que seulement 7% à 8% des salariés sont syndiqués (lien externe). Ça veut donc dire qu’il y a potentiellement 93% des salariés qui peuvent être en désaccord avec la position des syndicats. Et c’est ce qui semble être mis en lumière par notre fameuse polémique du travail dominical.

Ce chiffre assez faible de syndiqués en France vous a peut-être aussi fait tiquer. Comment se fait-il qu’une part si faible – on parle de moins de 10% tout de même ! – ait autant de force politique et ait la capacité de pratiquement bloquer le pays ?
C’est une question à laquelle je n’ai pas de réponse. Et je suis d’autant plus interloqué en apprenant que la France est l’un des pays où il y a le moins de syndiqués (lien externe). À titre de comparaison, l’Angleterre ou l’Allemagne on respectivement 2 et 3 fois plus de syndiqués que chez nous ! Et malgré tout, la France est le pays où on entend le plus les syndicats…

Conclusion et ouverture

Le débat du travail dominical m’a donné l’occasion de partager ma vision de 2 sujets sur lesquels les Français peuvent travailler pour améliorer la société. Ce n’est qu’un avis personnel et je n’ai certainement pas la science infuse. Mais pour avoir la chance de voir depuis un peu moins d’un an un autre modèle de société en Suisse, je ne peux m’empêcher de constater les progrès à faire en France…

Sur le plan démocratique, les citoyens suisses sont en effet bien plus impliqués dans les décisions politiques. Très régulièrement, des votations sont organisées pour demander l’avis du peuple sur des proposition de nouvelles lois ou des changements de lois existantes.
Pour chaque votation, un document est envoyé à chaque citoyen dans lequel sont décrits les points importants du texte de loi, les argumentations des partisans et des détracteurs du projet, le tout complété par une copie du texte soumis au vote.
Pas plus tard que la semaine dernière, des votations pour 3 lois ont eu lieue sur le canton de Fribourg. Le document d’information « pesait » plus de 80 pages ! Et chaque année sont organisées plusieurs votations comme celle-ci !

Bref, la Suisse est un vrai modèle de démocratie dans lequel le peuple est investi. Quand je le compare à notre modèle français, je me rends compte que nous sommes en fait très loin de la démocratie qu’on nous vend à l’école et qu’il y a encore beaucoup de travail.

Merveilleuse dématérialisation

2013-08-30T12:13:59+02:00

Au commencement

Si vous ne le savez pas encore, je suis ce qu’on peut appeler un hardcore gamer. Mes parents étaient plutôt contre les jeux vidéo et je ne m’y suis mis qu’à partir du moment où j’ai eu assez d’argent de poche pour m’acheter moi-même mes consoles et jeux. Mais à partir du moment où je suis rentré là dedans, je n’en suis plus ressorti.

Bref, ce petit paragraphe d’introduction pour dire que j’achète pas mal de jeux (ça doit représenter mon premier poste de dépenses culturelles, en valeur en tout cas). Ceux qui s’intéressent un minimum au sujet savent que l’une des grandes nouveautés sur la dernière génération de consoles a été le développement du marché dématérialisé. À savoir qu’aujourd’hui, on trouve désormais la majorité des jeux du commerce en téléchargement à la demande.

Pendant longtemps, les contenus dématérialisés que j’achetais se limitaient essentiellement aux jeux du Xbox Live Arcade (sur Xbox 360).
Note : Pour ceux qui ne connaissent pas ce service, il s’agit généralement de « petits » jeux, dont les budgets sont bien moindres que les productions vendues dans le commerce, mais dont la qualité n’a parfois rien à envier aux grosses pointures. Il faut aussi savoir que ces jeux sont disponibles uniquement en téléchargement.
C’est donc plus par défaut que par choix que j’achetais ces contenus dématérialisés. Mais j’ai toujours été satisfait du service.

Aujourd’hui, le modèle s’est largement répandu si bien qu’on peut acheter aussi les jeux vendus dans le commerce. Et il s’est aussi répandu au monde du PC avec le désormais célèbre service Steam.
Note : Toujours pour ceux qui ne connaissent pas, Steam s’est créé avec le temps un solide nom dans le domaine de la vente dématérialisée, en particulier grâce à ses énormes réductions sur le prix des jeux. Le service propose en effet en permanence de grosses réductions sur une sélection de jeux mise à jour régulièrement.

J’en reviens donc petit à petit à mon histoire…
Avec le succès des offres de Steam, les constructeurs de console ont fini par proposer des réductions intéressantes. On est encore loin de Steam, mais on a désormais droit à de belles réductions. En l’occurrence, j’ai ainsi acheté début juillet mon premier jeu à la demande : Assassin’s Creed 3, bénéficiant alors d’une belle réduction de 75%.

Les ennuis commencent

J’achète donc mon jeu, le téléchargement commence, tout va bien.
Un peu plus tard, je vois que je n’ai plus de téléchargement dans la file d’attente, je vais donc vérifier que mon jeu est correctement installé. Problème, il ne s’affiche pas dans ma liste de jeux. Je vais voir s’il est bien présent dans les fichiers du disque dur de ma console. Il l’est mais il est « endommagé ».

À ce moment là je ne m’inquiète pas encore. Le jeu pèse quand même 7 Go et il y a très bien pu avoir un problème lors du téléchargement. Je le télécharge donc à nouveau.
Lorsque je regarde plus tard et que le téléchargement semble fini, je vérifie : toujours pas dans ma liste de jeux. Le fichier est encore endommagé.

Je persiste, on ne sait jamais. Mais après plusieurs tentatives de téléchargement, je dois me rendre à l’évidence, il y a un vrai problème.

Je fais donc un nouvel essai en suivant cette fois consciencieusement le déroulement du téléchargement. Tout se déroule bien jusqu’à 79% de progression. Quelques minutes après avoir passé ce palier, le téléchargement s’arrête soudainement et j’obtiens un message « Échec du téléchargement ».
Pour être sûr, je tente à nouveau l’expérience plus tard et j’obtiens exactement le même résultat : le téléchargement progresse jusqu’à 79%, quelques minutes après il s’arrête et le message d’erreur apparaît.

À la recherche de l’origine du problème

Comme je vois qu’il y a clairement un souci, mon premier réflexe est de chercher sur Internet si d’autres personnes ont déjà rencontré ce problème avec ce jeu spécifiquement. J’ai en effet téléchargé d’autres jeux et contenus durant l’été sans jamais avoir de problème. Celui que je rencontre ici a de grandes chances d’être lié au jeu lui-même.

Malgré quelques heures de recherches, je ne trouve pas d’autre cas identique au mien. Je décide donc de passer à l’étape suivante : le support de Microsoft (puisque j’ai téléchargé le jeu sur Xbox 360).
Je m’en vais donc sur le forum du support Microsoft (en anglais) (lien externe). Je fais quelques recherches et lis quelques messages de clients dans des cas similaires au mien. Progressivement, je vois une explication qui peut s’appliquer à mon cas : il est probable que le jeu comporte un blocage régional.
Traduction : si on est en France, on peut télécharger uniquement le jeu du MarketPlace (ndla : Nom de la boutique en ligne sur Xbox 360) français.
En ce qui me concerne j’ai un compte français, la région de mon compte est donc la France. Mais comme je vis désormais en Suisse, ma « région d’habitation » est la Suisse.

Armé de ces informations et de cette première analyse, je finis donc par poster un message pour décrire mon cas (en anglais) (lien externe) sur le forum.
Le premier retour d’un membre semble abonder dans le sens de mon analyse : le jeu comporte un blocage géographique qui expliquerait l’échec de mon téléchargement.

Une solution… ou pas

Pour pouvoir télécharger mon jeu, la seule solution est de télécharger le jeu en France. Donc de prendre ma console (ou au moins un support de stockage compatible), d’aller faire un tour en France pour télécharger mon jeu et revenir en Suisse. Mais…

Mais même en faisant ça, il n’est pas garanti que je puisse y jouer une fois Suisse. Toujours à cause du blocage géographique, il est même fort probable que je ne puisse même pas lancer le jeu… En revanche, le blocage géographique ne les a pas empêché de me prélever…

Toujours sur le forum (en anglais) (lien externe), on me conseille, pour éviter tout problème éventuel futur, de changer la région de mon compte pour qu’elle corresponde à ma région d’habitation. Ah bon, on peut faire ça ?

Changement de région et blocage géographique

Changer de région, c’est quelque chose que j’ai déjà essayé il y a quelques années. C’était impossible !
Lorsque ma femme (une Suissesse) a emménagé sur Paris avec moi en 2009, nous avons été confronté à ce problème de région.
C’est une gameuse aussi, elle avait sa console et son compte suisse aussi. Et un jour qu’elle essayait de télécharger un contenu, elle est tombée sur un message lui expliquant qu’elle ne pouvait pas car elle n’était pas dans la bonne région.

Elle avait alors contacté le support pour résoudre le problème. La réponse était claire : impossible de changer la région de son compte. Super sympa pour les gens qui déménagent à l’international…

Retour en 2013, j’apprends donc qu’on peut désormais changer la région de son compte !
J’enquête rapidement et il ne me faut pas longtemps pour découvrir que c’est en fait très récent, ça date du début de cette année seulement… (lien externe).
Ça ne règle pas mon problème de téléchargement mais j’y reviendrai plus tard.

Dématérialisation = dépossession

Donc c’est cool, on peut désormais changer la région de son compte ! Il y a du progrès, mais…
Une fois sur la page pour changer la région de son compte (lien externe), un message d’avertissement présente quelques limitations :

Lorsque vous changez la région de votre compte Xbox LIVE, certains éléments ne sont pas affectés, par exemple votre profil. D’autres peuvent subir des modifications, par exemple :

les abonnements ;

les contenus numériques sous licence (tels que les jeux, les vidéos et la musique) déjà achetés ;

les services accessibles sur la console Xbox.

Fonds de votre compte Microsoft

Que les abonnements et services ne soient pas compatibles, je peux comprendre. En fonction des pays, les partenaires ne sont pas les mêmes et certains services peuvent ne pas exister. C’est donc assez logique qu’on ne puisse plus y accéder suivant dans quel pays on se rend.
Pour les fonds, c’est davantage lié à une récente mise à jour (lien externe) sur laquelle ça ne sert à rien de s’appesantir dans le cas présent.

Par contre en ce qui concerne les « contenus numériques sous licences » la pratique est déjà beaucoup plus discutable.
En gros, ce qu’ils disent ici c’est que les jeux qui comportent un quelconque blocage régional ne seront plus utilisables si on déménage dans une région « non autorisée ».
Donc si je reviens à mon jeu que je ne peux pas télécharger, j’aurai beau aller le télécharger en France, je ne pourrais de toute façon pas y jouer en Suisse.

On touche là une des limites perverses de la dématérialisation des contenus. Parce que cette forme de distribution permet un contrôle plus simple par les éditeurs, ils se permettent d’en profiter grassement en nous interdisant tout simplement l’utilisation d’un contenu qu’on a acheté.

Si j’achetais mon jeu en France dans un format physique, je pourrais y jouer sans problème sur ma console en Suisse. J’estime d’ailleurs que c’est complètement normal : j’ai payé le droit de l’utiliser. À partir du moment où j’ai payé, il m’appartient, de droit, d’en faire l’usage que je souhaite.
Si je déménage à l’étranger, c’est normal et logique que je puisse conserver les biens que j’ai acquis de plein droit et que j’en conserve l’usage entier.
Même si mon jeu est dématérialisé, j’ai payé de la même manière le droit de l’utiliser. Je devrais donc avoir le même droit de « l’emporter » avec moi à l’étranger de pouvoir en profiter. Je l’ai acheté, il m’appartient. Microsoft n’a pas à m’empêcher d’en profiter à partir du moment où je l’ai payé.

Et le plus drôle dans le cas présent, c’est qu’au format physique il n’y a pas de versions suisses des jeux. On achète ici les versions françaises, allemandes ou italiennes.
Le fait de ne pas pouvoir profiter de mon jeu acheté avec mon compte français est donc d’autant plus ironique.

Conclusion… ou pas

Cette petite histoire est surtout l’occasion d’aborder le sujet de la dématérialisation mais si le dénouement de mon affaire vous intéresse, je suis donc apparemment bloqué entre mes 2 régions. L’affaire suit son cours avec le support. Je suis passé au niveau supérieur avec le support téléphonique qui est censé revenir vers moi lundi. Bref, je ne suis pas encore sorti d’affaire.

Changement de domaine

2013-07-25T11:05:37+02:00

Très court article pour vous annoncer le changement de domaine du site.
Quelques mois après mon emménagement au pays du chocolat et des montres, je tente de me lancer dans une nouvelle aventure professionnelle en portage salarial. Il me paraissait donc assez naturel d’adopter comme domaine principal le .ch, histoire d’être un minimum légitime auprès de potentiels clients suisses !

Mon « ancien » domaine kloh.fr laisse donc la place à kloh.ch.

Je possédais déjà le .ch depuis un moment (acheté dès lors que j’ai sérieusement commencé à envisager de venir vivre en Suisse), je ne fais donc que lui donner la priorité sur mon ancien domaine.

Je conserve toujours le .fr et j’ai mis en place les redirections garantissant de retomber sur mes pages même si vous arrivez par un lien sur l’ancien domaine. 😉
Malgré tout, si vous avez fait par le passé des liens vers mes pages, je vous invite à les mettre à jour pour garantir leur pérennité. Car si j’ai mis en place les redirections et qu’elles seront actives un moment, elles ne sont pas nécessairement vouées à le rester indéfiniment.
La mise à jour vaut naturellement aussi pour les flux RSS et Atom.

Enfin, comme c’est le cas dès qu’on touche au domaine d’un site, il va falloir un peu de temps pour que la propagation des DNS soit terminée. Si vous rencontrez des problèmes en essayant d’accéder au site (que ça soit par le .ch ou le .fr), c’est normal.
Au delà des problèmes aléatoires liés à ce point, les différents tests que j’ai pu faire sont concluants : fonctionnement correct du site sur le nouveau domaine, redirections depuis le .fr opérationnelles… Mais si au delà des 24 prochaines heures vous constatez encore des problèmes, faites-le moi savoir sur Twitter (lien externe) ou en commentaire ici-même.

Kiwi Party 2013 : du zoning ou mockup

2013-07-12T05:24:23+02:00

Je vous ai déjà parlé de CSS pour les livres numériques, de Google Analytics vu par l’intégrateur, de pépins et d’accessibilité et de techniques pour accélérer ses pages web.
Maintenant, c’est au tour de la conférence de Romy Duhem-Verdière (lien externe) qui présente « Du zoning au mockup, itinéraire d’une maquette web ».

Ce compte-rendu va être léger car vous pouvez déjà profiter de la vidéo de sa présentation (lien externe) ainsi que de sa transcription très claire sur le blog de Romy (lien externe).

Je saute donc directement à la conclusion : J’ai littéralement adoré cette conférence !
Avec ma formation initiale spécialisée dans l’art et la communication visuelle, j’étais déjà très sensible au thème rien qu’en lisant le résumé. Et je n’ai pas été déçu.

Le travail qu’a réalisé Romy est essentiel et ça paraît insensé qu’on ne l’ait pas fait plus tôt.
Prendre tout le vocabulaire de la conception web, en décortiquer le sens et placer chaque intitulé à sa place dans les différentes étapes de conception paraît couler de source, et pourtant… Comme elle le dit en introduction, tout le monde utilise ce vocabulaire, mais personne n’est vraiment d’accord sur ce qu’il représente réellement. À partir du même mot, 2 personnes peuvent en réalité comprendre 2 choses différentes.

J’ai d’ailleurs un exemple flagrant dans ma propre expérience. J’ai toujours utilisé le terme « mockup » pour parler de « wireframe ». Et il s’avère que j’étais à côté de la plaque, le mockup étant en réalité une « prévisualisation haute fidélité du rendu graphique », donc une maquette Photoshop fidèle au rendu final attendu.

Bref, vous l’aurez compris, j’ai trouvé cette présentation simplement géniale. Romy a synthétisé très efficacement des concepts qui nous paraissent évidents, alors qu’en réalité, on est nombreux à utiliser ce vocabulaire de façon inappropriée.
J’espère vous avoir convaincu de regarder la vidéo de sa conférence et/ou de lire sa retranscription si ce n’est pas déjà fait. Une référence indispensable ! 🙂

Kiwi Party 2013 : accélerer ses pages Web

2013-07-11T14:03:12+02:00

Après les CSS pour les livres numériques, Google Analytics et l’ergonomie et l’accessibilité, voici le compte-rendu d’une autre conférence suivie lors de la Kiwi Party : les techniques d’accélération de ses pages web, présentée par Jean-Pierre Vincent (lien externe).

Ayant loupé le début de la conférence (temps pour déjeuner et rentrer un peu plus long que prévu 😛), mon compte-rendu commence là où j’ai commencé à suivre. Ça correspond au slide 8 de sa présentation disponible sur Slideshare (lien externe).

Le coût de l’absence de performance

Bref, au moment où je fus enfin installé, Jean-Pierre parlait du coût d’une seconde de perdue au chargement d’une page. 1 seconde de perdue correspond à :

7% de conversions en moins dans un tunnel d’achat ;
une baisse de 6% des vues sur une vidéo ;
50% de conversion de perdus sur un site e-commerce ;
10% de pages vues en moins sur mobile.

Il conclut sur ces chiffres éloquents en rapportant que 60% des personnes sur mobile abandonnent complètement après 4 secondes d’attente. Autant dire que l’absence d’optimisation de la performance de nos pages web peut coûter très cher, ou du moins rapporter beaucoup moins !

Gestion de la performance web

Les chiffres parlent d’eux-même, il est crucial de mettre en place une gestion de la performance web. Jean-Pierre détaille alors les étapes de ce chantier :

Fixer des objectifs
Mesurer
Coder
Surveiller

Ce n’est pas une coïncidence de retrouver les étapes de la gestion de la qualité. La performance fait partie intégrante des domaines directement lié à la qualité d’un site ou d’un service web. Et ce n’est pas la checklist webperf d’Opquast (lien externe) qui contredira ça.

Accès à la fonctionnalité et premier rendu

Concernant les objectifs, Jean-Pierre présente les 2 principales métriques à prendre en compte :

L’accès à la fonctionnalité. Le nom parle de lui-même, il s’agit du temps nécessaire avant de pouvoir accéder et interagir avec la fonctionnalité.
Le premier rendu. Un peu plus technique, il s’agit du temps nécessaire pour afficher le premier pixel. C’est à dire le temps pour afficher le premier contenu.

Ces 2 données sont très proches mais peuvent être « vécues » par l’utilisateur très différemment suivant le code de la page. Par exemple, suivant que les scripts sont placé dans l’entête du document ou en bas de page, le premier rendu sera beaucoup plus long (si les scripts sont dans l’entête) tandis que le temps d’accès à la fonctionnalité ne sera pas nécessairement différent.

Pour mesurer ces 2 métriques, plusieurs outils sont disponibles.
Concernant l’accès à la fonctionnalité, il s’agit surtout de scripts à insérer dans sa page comme Google Analytics « User Timings » (lien externe) ou Boomerang (lien externe).
Pour mesurer le premier rendu, il cite particulièrement WebPagetest (lien externe).

Passée la présentation des outils de mesure, Jean-Pierre parle du chemin critique.
Le chemin critique, c’est tout ce qu’il se passe entre l’ouverture de la page et le premier rendu. Et c’est donc là qu’on doit travailler.
Les principaux éléments sur lesquels on peut jouer sont les redirections et les appels aux fichiers externes : CSS, scripts et fonts.

En résumé, voici les actions qu’on peut mener :

Redirections : faire maximum 1 redirection. Ne pas faire de redirection en javascript et privilégier une solution côté serveur.
CSS : concaténer et minifier les feuilles de styles. Avoir maximum 2 feuilles de styles.
Fonts : limiter leur usage. En cas d’utilisation de font, prêter une attention particulière au poids (50 ko maximum) ainsi qu’à sa compatibilité (OS/navigateur). Privilégier un chargement asynchrone.
Javascript : sans doute le domaine où il y a le plus de travail de gain à espérer. En fonction des cas, on pourra privilégier d’appeler les scripts en bas de page ou en haut de page, on peut utiliser les attributs defer ou async.
- On placera les scripts en bas de page si la page est légère, qu’il n’y a pas de dépendance ou de document.write dans la page. Il faut aussi savoir que cette technique n’a aucune influence sur iOS.
- L’attribut defer permet de mettre en attente l’exécution du javascript jusqu’au chargement complet de la page. Habituellement, le temps d’exécution du javascript met en pause le chargement du reste de la page, utiliser cet attribut permet d’exécuter le script une fois la page entièrement chargée.
- Le chargement asynchrone permet de bloquer le chargement des scripts tant que la page n’est pas chargée. Mais cela implique de respecter des contraintes fortes comme la nécessité de gérer une file de téléchargements ainsi que la priorité et les dépendances entre les différents scripts. C’est donc une pratique à réserver aux équipes expérimentées. Heureusement des outils existent pour faciliter le travail. Il cite notamment LABjs (lien externe) et RequireJS (lien externe).
- Enfin il conseille de conserver l’appel des scripts en haut de page s’ils répondent à quelques conditions : s’il n’y en a pas plus de 2 et s’ils sont optimisés (légers, concaténés…)

En conclusion il n’y a pas de recette miracle, seulement une diversité de solutions à utiliser ou non en fonction du contexte.

L’affichage de la page

Jusque là on a parlé uniquement de tout ce qu’il se passe avant que la page ne commence à s’afficher.
Naturellement, il y a encore beaucoup de choses à optimiser après cette étape. L’affichage de la page, c’est à dire le HTML et tous les contenus qui y sont appelés, peut être aussi amélioré à de nombreux niveaux.

Ça commence par la mise en cache des ressources. Selon la complexité et la fréquence des mises à jour des contenus, il peut-être utile de mettre en cache la totalité des pages web. Le cas échéant, les ressources de la page ne seront chargées qu’à la première connexion et toutes les connexions suivantes exploiteront les contenus mis en cache. Différentes solutions existent : cache serveur, mécanisme de cache intégrés aux CMS, outils spécialisés comme Varnish (lien externe)…
Bien sûr, tous les sites ne peuvent pas être totalement mis en cache. Par exemple sur les sites de e-commerce, certains contenus doivent être constamment frais (prix, stocks…).
Il convient donc de mettre en cache toutes les ressources statiques (notamment tout ce qui relève purement de l’interface) et d’y insérer des contenus dynamiques à la demande avec XHR ou SSI par exemple.
L’exemple extrême de cette logique est Facebook dont la quasi-totalité du contenu est personnalisé pour chaque utilisateur.

Enfin, le dernier indicateur important à prendre en compte est le temps nécessaire au chargement complet de la page ou « onload », incluant l’ensemble des ressources présentes dans la page. Cet indicateur est particulièrement important pour le référencement car il fait partie des critères pris en compte par Google dans son algorithme.
Les principales ressources problématiques sont les images, les objets flash et vidéo et les iframes.

Jean-Pierre se concentre sur le cas des images et donne toutes les pistes d’optimisations possibles :

Remplacer les images de décoration par des caractères unicodes ou des effets CSS3 (dégradés, arrondis, ombres, rotations, opacités…)
Charger les images « à la demande » avec la technique du lazy-load (lien externe)
Réduire le nombre d’images à l’aide des sprites. Pour une maintenance plus facile, un pré-processeur CSS peut être utilisé.
Limiter le nombre de requêtes en encodant les petites images en base64 (attention à IE8 et inférieur cependant).
Utiliser le meilleur format d’images possible en fonction de chaque cas (PNG pour les images avec aplats ou textes, JPG pour les images photo-réalistes) et utiliser les outils de compression automatique pour réduire le poids des images au maximum.

Enfin, toujours concernant les ressources appelées dans la page, il est nécessaire de porter une attention particulière à toutes les ressources fournies par un tiers.

Pour finir, Jean-Pierre présente une grosse liste d’outils et techniques pour gérer son cache et monitorer les performances de son site. Je ne vais pas tout lister ici car la liste et longue, je vous conseille donc plutôt de consulter sa présentation sur Slideshare (lien externe). 😉

Conclusion

Voilà pour cette conférence extrêmement riche et intéressante ! 😀
Personnellement, je trouve que c’est un sujet passionnant mais aussi complexe. Ça demande des connaissances et compétences techniques avancées si on souhaite s’investir réellement dans une démarche d’amélioration des performances de son site. Mais une présentation comme celle-ci donne toutes les informations nécessaires pour creuser la question sérieusement, et ça donne vraiment envie de scruter de prêt les résultats des sites qu’on produit.
Comme dirait l’autre, y’a plus qu’à ! 😛

Kiwi Party 2013 : des pépins et de l’accessibilité

2013-07-04T11:52:20+02:00

Après les CSS pour les livres numériques et Google Analytics vu de l’intégrateur, on va parler d’ergonomie et d’accessibilité.
J’ai en effet décidé de faire un compte-rendu commun pour 2 présentations : « Y’a pas de pépins, y’a que des solutions ! » de Chloé Temesvari (lien externe) et Philippe Roser (lien externe) et « L’accessibilité, mon ingrédient secret » de Jennifer Noesser (lien externe).

Pourquoi en parler dans un même article ? La première raison est que dans les 2 cas, les orateurs ont adopté une logique similaire : Faire défiler point par point une liste de bonnes pratiques, de critères à respecter ou de mauvais exemples à éviter. La deuxième raison, résultant directement de la première, est que j’ai été un peu déçu. Non pas qu’elles aient été inintéressantes, au contraire. Mais plutôt parce que je suis resté sur ma faim, j’y reviendrai en détail pour chacune d’entre elles.

Y’a pas de pépins, y’a que des solutions !

L’objectif de cette présentation était de démontrer l’intérêt et les bénéfices de l’ergonomie dans toutes les étapes de réalisation d’un projet web. Nos 2 orateurs ont donc balayé toutes les pratiques à éviter en expliquant pourquoi. Je ne vais pas revenir sur chacun des points car ils sont bien visibles sur les slides de la conférences (en PDF) (lien externe), mais voici une petite sélection non exhaustive des choses à éviter :

Mettre 5 menus différents (lien externe)
Accéder au contenu/à l’action en moins de 3 clics
Faire un clip de présentation (lien externe)
Créer une page d’introduction avec une animation Flash (lien externe)
Mettre une musique de fond qui se lance automatiquement
Éviter d’avoir une barre de défilement et essayer de caler tous les contenus au dessus de la ligne de flottaison
…

Voilà pour les plus flagrants, vous trouverez beaucoup d’autres conseils des choses à faire ou à éviter dans la présentation.

Comme je disais en introduction, je suis sorti un peu déçu de cette conférence parce que les idées présentées sont pour la majorité des règles basiques dès qu’on se soucie de l’accessibilité ou de la qualité web. Du coup je suis sorti un peu frustré quant à la teneur de la présentation. Mais c’est davantage lié à ma propre culture qu’au contenu en lui-même.
Car tous les points abordés méritent d’être répétés sans cesse, ne serait-ce que pour tous les nouveaux professionnels et même les étudiants qui n’ont pas nécessairement été alertés sur tous ces points.

Et je tiens à féliciter les 2 orateurs pour leur show sur scène. Animer une présentation à 2 n’est pas évident et ils se sont vraiment débrouillés comme des chefs. Ils ont déroulés leurs idées avec une grande aisance et beaucoup de complicité, c’était vraiment un point très positif de cette conférence en ce qui me concerne.

L’accessibilité, mon ingrédient secret

À l’instar de la conférence précédente, je suis ressorti assez frustré de la présentation de Jennifer mais pour une autre raison. La description dans le programme (lien externe) promettait plein d’astuces et de techniques pour insérer l’accessibilité facilement dans ses projets, mais ce n’était pas vraiment le cas.
La conférence se résumait en fait à balayer les principaux critères d’accessibilité à prendre en compte. Une vulgarisation de référentiel d’accessibilité en quelque sorte. Le résultat est que la présentation s’est avérée très théorique alors que je l’imaginais davantage opérationnelle.

Mais là encore, le problème est davantage lié aux attentes que je portais sur le sujet. Car dans les faits, la présentation était très intéressantes dès lors qu’on ne connaissait trop les référentiels d’accessibilité.
Je donne même une mention spéciale pour les multiples illustrations et analogies que Jennifer a trouvé pour chacun (ou presque) des critères présentés. C’est même d’ailleurs le point fort de sa présentation car ça permet aux non initiés de mieux prendre conscience des problèmes pouvant être rencontrés en cas de non respect du critère.

Bref, sa présentation (lien externe) parle d’elle-même donc si vous êtes intéressés par son contenu, je vous invite à la consulter directement.

Kiwi Party 2013 : Google Analytics vu de l’intégrateur

2013-07-03T09:56:48+02:00

Après les CSS pour les livres numériques, voici le compte-rendu de la deuxième conférence que j’ai suivie. Il s’agit de celle de Nicolas (lien externe), visant à présenter les bénéfices pour l’intégrateur/le développeur qui utilise Google Analytics.

Si le sujet initial (Google Analytics) est déjà intéressant à la base, le traitement choisi (bénéfices pour l’intégrateur ou le développeur) l’est encore plus ! En sachant que Nicolas aime comprendre les choses mais aussi les faire comprendre, je ne pouvais donc pas passer à côté.

En introduction, il prévient que les statistiques web, ce n’est pas son métier. Mais au gré de ses projets, il a eu à mettre les mains dedans. Et il s’est rendu compte avec l’expérience que les données remontées ne sont pas juste bonnes pour que les marketeux puissent faire joujou, mais elles avaient un intérêt insoupçonné pour le développeur. À la lumière de ses expériences, il présente donc les fonctionnalités de Google Analytics qui peuvent être utile aux intégrateurs.

Pour commencer, il explique comment installer Google Analytics sur son site. C’est très simple : 1 seul script à placer dans la balise head.
Par la suite, il présente et détaille l’utilisation des fonctionnalités utiles : définition d’objectifs et de tunnels de conversion, remontées d’évènements (clic sur un bouton ou un lien spécifique) ainsi que les possibilités pour faire de l’A/B testing.

Comme il a déjà présenté en détail une partie de ces options dans son article Connaître l’efficacité d’un site via Google Analytics (lien externe) sur le site du Train de 13h37, je ne vais pas tout répéter. Je vous laisse prendre le temps de lire son article très complet. 🙂

Ayant été moi-même amené à utiliser des outils de statistiques dans le cadre professionnel, je ne peux que partager la position de Nicolas. Au delà du marketing, les statistiques d’utilisation de nos sites sont riches d’enseignement pour étudier ce qui fonctionne ou pas sur nos pages ou dans l’enchaînement de nos pages.
Naturellement, et comme l’a répété Nicolas à plusieurs reprises, ces statistiques sont à prendre avec du recul. Car oui, elles permettent de constater des faits (telle page ne marche pas, tel produit est énormément consulté…) mais l’explication de ces faits restent de l’interprétation.
À partir de ces données brutes, on peut seulement dire si telle ou telle page fonctionne, mais pas expliquer pourquoi elle fonctionne. Le « pourquoi » est une interprétation. Après, charge à nous d’essayer de vérifier cette interprétation par des tests complémentaires.

Je vais même plus loin que ça. Au delà de l’intérêt de ces statistiques pour vérifier que le site qu’on a mis en place répond aux objectifs fixés, les statistiques de navigation passées peuvent aussi être utile dans une phase d’étude en amont, en cas de refonte notamment. On peut ainsi, avant même de concevoir, prendre le temps d’analyser les statistiques de l’ancienne version du site pour voir les contenus qui sont vus ou non, les pages sur lesquels les utilisateurs passent le plus de temps, etc. Autant d’informations utiles dès qu’on veut refondre son site Internet et qui peuvent nous donner des indices sur ce qui fonctionne déjà (ou pas). On peut ensuite s’appuyer sur ces éléments dans la phase de conception, pour reprendre les recettes qui marchent, et repenser celles qui ne marchent pas.

Bref, si cette présentation ne m’a pas appris beaucoup car j’ai déjà pu expérimenter tout ça par le passé, j’ai beaucoup apprécié cette conférence. C’est très plaisant de voir valoriser des domaines passionnants comme celui-ci, par une personne dont ce n’est pas du tout le métier mais qui sait en tirer des choses positives et utiles.
Si les statistiques de vos sites web reste un terrain obscur pour vous, je ne saurais que trop vous conseiller de visionner la vidéo de sa conférence quand elle sera disponible !

Vous retrouverez sa présentation sur Slideshare (lien externe) ainsi que sur son site (lien externe).

Kiwi Party 2013 : CSS pour les livres numériques

2013-07-02T10:44:11+02:00

Le 28 juin dernier, j’étais à Strasbourg pour assister à ma première Kiwi Party (lien externe). L’occasion pour moi de voir et revoir du beau monde, mais aussi d’en apprendre plus sur les différents sujets tournants autour de la conception web et traités ce jour là.
C’est parti pour un petit tour d’horizon des moments marquants de la journée.

On commence la journée avec Bert Bos (lien externe) venu présenter les différentes techniques CSS existantes ou à venir pour mettre en page des livres.
Il commence par brosser un bref contexte historique, à savoir que pendant longtemps le CSS n’était utilisé que pour les documents interactifs. Pour les documents imprimés, c’est XSL qui prévalait. Mais le développement de ce dernier a été arrêté. Parallèlement, le format EPUB s’est développé et sa mise en forme s’appuie sur CSS.

Bert Bos nous présente ensuite les propriétés CSS pour mettre en page un livre. Pour rappel, certaines d’entre elles sont déjà relativement bien implémentées, mais la majorité restent expérimentales.
Nous avons pu voir :

Les colonnes avec la propriété columns permettant de définir l’affichage du contenu sous forme de colonnes qui peuvent être à largeur fixe (plus exactement une largeur minimale fixe) ou en nombre fixe.
Les sauts de page avec les propriétés page-break-* permettant de forcer ou empêcher les sauts de page, par exemple avant/après les titres. À noter que la propriété se voit raccourcie par un simple break-* pour permettre son utilisation dans un autre contexte que la page. page-break-* reste cependant valide pour le moment.
Les veuves et les orphelines avec, respectivement, les propriétés widows et orphans permettant de définir un nombre minimal de ligne à afficher en cas de début/fin de paragraphe en bas/haut de colonne.
Les marges de la page peuvent être gérées à l’aide de la règle @page. Il suffit de définir les marges comme pour n’importe quel élément, par exemple : @page { margin: 2cm 1.5cm; }
L’adaptation du contenu pour les pages recto-verso se fait simplement avec les pseudo-classes :right, :left ou encore :first pour la première page du document. Il suffit de les appliquer à la règle @page. Utile pour ajuster les marges en fonction de la reliure par exemple.
Les numéros de page peuvent être insérés avec la règle content: counter(page);.
On peut insérer en entête des informations issues du contenu, par exemple le titre. Cela se passe en deux temps :
1. On définit une variable reprenant le contenu du titre : Ainsi le code h2 {string-set: chapter contents;} définit une variable « chapter » reprenant le contenu de la balise h2.
2. On affiche ce contenu dans l’entête avec le code suivant : @page { @top { content: string(chapter); } }.
Les césures se gèrent avec la propriété hyphens et a 3 valeurs possibles : none qui supprime toute césure, auto qui applique les règles par défaut dans la langue du document (le dictionnaire de langue étant géré par le navigateur, donc avec des résultats variés) et enfin manual pour définir soi-même les césures dans le HTML.

Enfin un exemple d’expérimentation pour les notes de bas de page est présenté mais va au delà de CSS.
Il complète cette liste par les fonctionnalités qui restent encore à être étudiées : notes dans les marges, catégories de notes, gestion des float vers le haut et le bas, références, texte sur 2 pages opposées, tables des matières… Autant dire qu’il reste du boulot !

Pour finir on a droit à la présentation d’une méthode de pagination à l’aide d’une nouvelle valeur de la propriété overflow. En utilisant paged-x ou paged-y, on peut ainsi faire une pagination horizontale (x) ou verticale (y) permettant de faire défiler les « pages ». On peut même ajouter des contrôles avec les valeurs paged-x-controls ou paged-y-controls.

Voilà pour cette première conférence de la journée !
Ce fut une introduction très intéressante car elle m’a permis de prendre connaissance de techniques de mise en page que je ne connaissais pas encore et qui sortent du cadre de la simple feuille d’impression.
Cependant des questions se posent sur l’accessibilité de tout ça, comme l’a très justement remonté Armony (lien externe) lors des questions/réponses. Bert Bos a en effet présenté plusieurs techniques permettant de manipuler du contenu (entêtes, notes de bas de page, numérotation des pages…) alors que le contenu n’est pas censé être une affaire de CSS.
Prévoir de pouvoir mettre en forme tous ces éléments à l’aide de propriétés CSS prévues à cet effet c’est bien. Retrouver le pendant de ces propriétés dans le balisage du contenu lui-même, ce sera bien mieux.
Mais relativisons, la plupart de ces propriétés sont encore au stade expérimental. Elles vont donc encore certainement évoluer et des solutions seront certainement trouvées pour répondre aux contraintes de mises en page de documents imprimés, tout en offrant un support de l’accessibilité qu’on est en droit d’attendre pour ces documents.

Vous pouvez retrouver les slides de la conférences en ligne (lien externe).

Compass : import, minification et variables

2013-05-01T05:10:09+02:00

Il y a quelques temps, je vous expliquais comment installer Sass et Compass et créer son premier projet. Il s’agissait alors de démystifier le passage à la ligne de commande. Je n’avais pas encore eu l’occasion d’utiliser cet outil au sein d’un vrai projet, je m’étais donc gardé d’aller plus loin.

Entre-temps, j’ai commencé à m’y mettre en contexte de production et j’en profite donc pour aller un peu plus loin que mon précédent article.
Même si je n’ai pas encore exploré les fonctions complexes de ce pré-processeur, je peux déjà vous présenter les quelques fonctions que je me suis appropriées et qui me simplifient un peu la vie. 🙂

Inclure un fichier avec @import

Héritée de la règle @import en CSS, cette règle a philosophiquement le même effet en Sass : elle permet d’inclure un fichier Sass au sein d’un autre fichier Sass.

Mais il y a une différence de taille :

En CSS, la règle @import permet de faire référence à un autre fichier CSS. On conserve 2 fichiers distinct.
En Sass, la règle @import permet d’inclure directement le contenu du fichier CSS importé dans le fichier CSS qui contient la règle @import. Après compilation, on retrouvera donc 1 seul fichier CSS !

L’avantage est donc de pouvoir segmenter ses CSS tout en conservant en sortie un unique fichier CSS. En édition, le découpage modulaire de CSS permet une maintenance aisée. En production, la compilation en 1 seul fichier permet un gain de performance en réduisant le nombre de requêtes HTTP.

Cas pratique

Prenons l’exemple d’un fichier « styles » de base. On souhaite importer dans ce fichier les fichiers « reset », « structure » et « theme ». Mes fichiers seront donc :

styles.scss
_reset.scss
_structure.scss
_theme.scss

Pourquoi un tiret bas (_) devant les noms des fichiers importés ? C’est la nomenclature permettant de spécifier qu’il s’agit de feuilles de styles « partielles ». L’intérêt est d’éviter la compilation de ces fichiers.
En effet lors de la compilation du projet, tous les fichiers SCSS sont compilés par défaut en un fichier CSS équivalent. Ajouter un tiret bas en préfixe permettra d’ignorer ces fichiers et de ne pas créer de fichier CSS en sortie.

J’ai donc mes différents fichiers. Il suffit d’importer tous mes fichiers partiels dans le fichier « styles » comme suit :

@import 'reset';
@import 'structure';
@import 'theme';

Et voilà, une fois compilé, nous avons un seul fichier styles.css qui contiendra les contenus de l’ensemble de mes fichiers de base. 🙂

Minification

Ce n’est pas vraiment la raison pour laquelle on choisit un pré-processeur car de nombreux outils permettent de faire ces opérations. Cependant, à partir du moment où on utilise un outil comme Compass, on aurait tort de ne pas profiter de cette option. Surtout que ça fait gagner du temps. 🙂

Lors de la compilation du fichier, on peut définir le format de sortie souhaité.
La première méthode est de définir un format de sortie par défaut dans le fichier de configuration du projet : config.rb

Lors de la création du projet, ce fichier est créé avec plusieurs lignes de paramétrages commentées. Pour définir le format de sortie à la compilation, il faut se pencher sur cette ligne :

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

Comme vous pouvez le voir, 4 formats de sortie sont possibes :

:expanded est le format par défaut classique : Les règles sont indentées au même niveau et il y a une propriété par ligne.
:nested est une « version Sass » du mode expanded : Le format est globalement le même, sauf au niveau de l’indentation des règles. Elles sont indentées en fonction de la profondeur des sélecteurs, ce qui permet de visualiser la profondeur de l’arborescence des sélecteurs.
:compact est une version semi-compressée : Le sélecteur et ses propriétés sont sur une ligne.
:compressed sort un code minifié et dépourvu de tout commentaire.

On peut donc minifier automatiquement son CSS au moment de la compilation, sans avoir à utiliser un autre outil. 🙂

Je vous ai présenté là la méthode automatique, à l’aide des paramètres du fichier de configuration du projet. Mais on peut aussi effectuer une compilation manuelle du projet à l’aide de la ligne de commande suivante :

compass compile --output-style compressed

Ça a beau ne pas être la fonction phare des pré-processeurs, il n’en reste pas moins qu’elle est très pratique et a l’avantage de s’intégrer de manière transparente au processus de création des CSS.

Variables

Un autre avantage mis en avant par tous les pré-processeurs, la possibilité de pouvoir utiliser des variables. À l’instar des langages de programmation, on peut ni plus ni moins déclarer des variables qu’on pourra ensuite appeler n’importe où dans nos fichiers de styles.

Le cas d’utilisation que j’ai mis en pratique, sans doute le plus évident pour beaucoup, est la gestion des couleurs et des éléments purement décoratifs qu’on peut assimiler au « thème ».

Le premier site sur lequel je mets en application ces variables est Agora HD (version en cours de développement). L’équipe du site organise souvent des concours avec le support d’éditeurs plus ou moins importants. Forcément, quand un éditeur s’implique il s’attend à un minimum de mise en valeur pour les lots qu’il fourni généreusement. J’ai donc à de nombreuses reprises fait un thème aux couleurs des concours organisés.
Je m’étais alors fait une feuille de thème avec toutes les déclarations que je modifiais systématiquement pour créer un thème, en écrasant celles présentes dans les fichiers de style principaux. En termes de maintenance ce n’était pas du tout insurmontable mais je devais quand même effectuer un certain nombre de changement de valeurs dans le CSS de mon thème.

Avec Compass, je définis dès le départ une variable pour chaque couleur ou élément visuel qui seront modifiés pour un thème. Je n’aurai plus qu’à changer chacune de ces variables au besoin. 🙂

Cas pratique

Pour déclarer une variable, rien de bien compliqué. Par exemple pour déclarer la « variable » dont la valeur est la couleur blanche :

$variable: rgba(255, 255, 255, 1);

Il suffit ensuite d’appeler cette variable où on le souhaite dans les feuilles de styles :

body {
  color: $variable;
}

Et hop, plus de prise de tête pour changer toutes les couleurs du thème. Il suffit de mettre à jour les variables et le tour est joué. 😀

À votre tour

Voilà pour les quelques premières possibilités que j’ai décidé d’exploiter, pour commencer. 🙂
Vous remarquerez que ça ne bouleverse pas énormément mes habitudes de travail, c’est donc une façon simple de se mettre aux pré-processeurs.

Étant personnellement favorable à l’apprentissage progressif (on ne devient pas expert du jour au lendemain ;)), le fait que Sass et Compass soient totalement compatibles avec du CSS écrit de manière classique est un réel avantage. On peut très bien commencer à utiliser un pré-processeurs et insérer son utilisation naturellement dans nos habitudes, sans lâcher du jour au lendemain notre CSS écrit à la main

CRAW2013 : conclusion, retours et impressions

2013-04-25T13:55:33+02:00

Cet article est la conclusion de ma série de compte-rendu de la Conférence Romande de l’Accessibilité du Web 2013. Si vous n’avez pas encore lu les différents articles qui le composent, voici la liste complète .

En complément de ce compte-rendu, vous pouvez aussi retrouver tout ce qui a été dit sur Twitter grâce au hastag #CRAW2013 (lien externe).

Sachant que j’emménagerais en Suisse à court-terme, j’étais déjà venu assister à la première édition qui s’était déroulée à Genève l’année dernière. À l’époque, cette journée dédiée à l’accessibilité était une belle réussite. On avait déjà pu assister à des présentations très intéressantes dont plusieurs démonstration de navigation web et d’utilisation de l’iPhone avec ses fonctions d’accessibilité actives.

Pour cette seconde édition l’attente était donc grande. Et franchement, je ne suis pas déçu. Je suis même carrément épaté par la qualité de l’évènement, qu’il s’agisse de l’organisation de la journée ou de la qualité et la richesse des interventions.
Nous avons eu droit à à peu près tous les sujets dont on puisse rêver. Des sujets techniques à la gestion de projet, en passant par les démonstrations complètes et les études utilisateurs, la variété et la richesse de contenus est vraiment impressionnante et tous les sujets valaient vraiment le détour.

Je crois que les seules critiques « négatives » qu’on puisse faire sont simplement des suggestions d’amélioration.
C’est un souhait que j’ai pu exprimer dans le questionnaire de satisfaction laissé en fin de journée, mais je pense que la seule chose qui manquerait pour que cet évènement soit presque parfait, serait de filmer les différentes présentations pour une diffusion ultérieure sur le web. Cela permettrait à tous de profiter de présentations de grande qualité. 🙂

Dans un monde idéal, la mise en place de moyens pour rendre plus accessible les conférences serait encore mieux. Je pense à de la vélotypie ou à des interprètes LSF. Ça demande un peu plus de logistique mais ça pourrait permettre à certains publics d’accéder aux conférences comme tout le monde.

Vous l’aurez compris, je suis sorti enjoué de cette journée et c’est sans hésitation que je participerai à nouveau à la prochaine édition.
Je tiens donc à remercier encore sincèrement toute l’équipe de Telono (lien externe) pour cette journée énorme, ainsi que tous les orateurs pour leurs présentations passionnantes.

À l’année prochaine ! 😀

CRAW2013 : évaluation, logiciel libre et accessibilité des vidéos

2013-04-25T11:07:12+02:00

Voici la dernière partie de mon compte-rendu de la Conférence Romande sur l’Accessibilité du Web 2013. On y parle de techniques d’évaluation, des bénéfices du logiciel libre pour les utilisateurs handicapés et pour finir de la mise en accessibilité collaborative de vidéos.

Démonstration de techniques d’évaluation

Retour de Jean-Pierre Villain pour une présentation bien plus opérationnelle : il nous présente des techniques d’évaluation simples et à la portée de tout un chacun. Les opérations sont tellement simples qu’il envoie sa fille Shanni, 15 ans, les effectuer devant l’assemblée.

Je ne vais pas détailler toutes les manipulations à effectuer mais les pré-requis de base sont assez légers : il suffit d’avoir installé la Web Developer Toolbar (lien externe) (disponible pour Firefox et Chrome).

Shanni nous montre ainsi en direct comment vérifier la présence d’alternatives sur les images, des liens images sans alt ou la présence de titre sur une iframe. Elle montre aussi comment vérifier la présence et la hiérarchie des titres de la page, la présence et la pertinence de l’utilisation de listes ainsi que la présence d’étiquettes dans les formulaires.
Même si les profanes auront peut-être eu du mal à suivre du fait du volume conséquent d’informations, il n’en reste pas moins que tout le monde a pu constater le peu d’effort à fournir pour vérifier tous ces éléments.

Suite à cette petit démonstration, Jean-Pierre reprend la parole pour revenir sur certains points.
Le principal concerne la désactivation systématique des CSS pour chacune des opérations effectuées. L’avantage est qu’on a ainsi directement accès au contenu, sans fioritures visuelles. On a du coup aussi la vision de la structure réelle du contenu, dans l’ordre du code source, ainsi que la visibilité des contenus cachés en CSS.

Même si l’ensemble des tests de vérification de l’accessibilité ne sont pas couverts, ces quelques tests permettent de détecter une grosse partie des erreurs récurrentes et généralement facilement corrigeables.

Le logiciel libre comme outil d’accessibilité à l’information pour les personnes déficientes visuelles

De l’évaluation on passe au monde du libre avec Jean-Philippe Mengual d’Accelibreinfo (lien externe).

Crédit : Telono

Jean-Philippe est aveugle et nous raconte son histoire. Comme toute personne touchée par un handicap, l’outil informatique lui est accessible à condition de disposer du matériel nécessaire. Dans son cas il utilise une plage braille et une synthèse vocale.

Mais dès lors qu’on souhaite souhaite acquérir ce matériel, l’investissement est conséquent. Il donne alors l’exemple du principal logiciel de synthèse vocale : JAWS (lien externe). Le prix du logiciel est facilement rédhibitoire pour un particulier. Des aides existent pour financer ce type d’outils, mais Jean-Philippe explique qu’entre la demande d’aide et le moment où le financement est accordé, de nombreux mois peuvent passer. Alors que dans la vraie vie, on voudra avoir ce matériel au plus vite.

Ajouté au paramètre prix, il explique qu’en tant que passionné d’informatique, il aime bien paramétrer et personnaliser son environnement comme bon lui semble. Problème, la licence de JAWS ne le permet pas…

Au moment de s’équiper, entre le coût important et l’absence de possibilités d’adaptation de l’outil, Jean-Philippe s’est alors tourné vers le monde du libre avec Linux.
Il explique et démontre que même si le monde du libre est réputé comme un environnement de geek, il est tout à fait à la portée de tout un chacun. Les différentes solutions sous Linux proposent des environnements graphiques identiques à ce qui se fait sous Windows (même si le look paraît daté). Et surtout, des solutions rendant l’environnement accessible sont pré-intégrées et gratuites ! Il parle notamment du lecteur d’écran Orca (lien externe).

Il précise aussi qu’un ordinateur utilisant Linux peut sans problème être connecté à un réseau d’entreprise qui se trouve sur un autre système (comme Windows au hasard 😛). Donc même les entreprises peuvent très facilement s’équiper de postes accessibles à moindre coût !

Bref, il n’y a aucune restriction à utiliser les outils proposés par le monde du libre pour les personnes handicapées. Au contraire, les avantages sont nombreux : le coût est moindre (il faut dans tous les cas acheter le matériel physique : ordinateur, plage braille…), les outils sont personnalisables et la communauté active permet de faire évoluer l’ensemble des outils.

Annotation collaborative pour l’accessibilité des vidéos sur le web

Pour la dernière présentation de la journée, Benoît Encelle présente le projet ACAV.

En introduction, Benoît explique que de plus en plus de contenus sont mis en ligne sous format vidéo. Sur Youtube, l’équivalent de 72 heures de vidéo sont mises en ligne toutes les minutes. Malheureusement, la majorité de ces contenus ne sont pas accessibles.

Le projet ACAV consiste donc à trouver des solutions permettant une mise en accessibilité collaborative des vidéos publiées. Il a été mis en place avec l’aide de plusieurs partenaires, notamment Dailymotion (lien externe) et l’Association Valentin Haüy (lien externe).

Il présente les cibles principalement concernées et les solutions à mettre en place pour leur rendre accessibles les vidéos :

Les mal et non-voyants ont besoin d’audiodescriptions.
Les mal et non-entendants ont besoin de sous-titres, de langue des signes.

L’enjeu du projet est de répondre à ces besoins, tant en termes quantitatifs que qualitatifs. Dans l’objectif de rendre accessible un maximum de vidéos avec de la meilleure qualité possible.

Pour y arriver, un workflow en plusieurs étapes a été imaginé :

Les vidéos sont automatiquement annotées avec un outil de Speech-To-Text. Une reconnaissance automatique des paroles et des mouvements permet de créer la base des sous-titres et audiodescriptions.
Organisés sous forme de réseau social, des annotateurs ajustent les contenus produits automatiquement.

Les annotations créées peuvent ainsi prendre la forme de sous-titre, télétexte, avatar LSF, synthèse vocale, icônes sonores, braille…

Au delà de la génération des vidéos accessibles, la question de la présentation des informations s’est aussi posée. Plusieurs tests ont ainsi été effectués pour répondre à ces questions.

L’une de ces questions concerne les icônes sonores. Une icône sonore est un son permettant de transmettre une idée, comme une icône graphique le permet. L’exemple donné est le bruit de papier froissé lorsqu’on vide la corbeille sous Windows.
Ces icônes peuvent servir pour des éléments récurrents comme un changement de décor. En effet Benoît, qui parle aussi d’earcons, précise que pour que l’icône fonctionne, elle doit être apprise et la récurrence de l’information permet cela.

Autre question abordée, la mise en pause de la vidéo pour ajouter plus d’informations sonores. Après l’avoir expérimenté, il s’avère que la mise en pause de la vidéo ne perturbe pas les utilisateurs si elle est inférieure à 1,5 blanc filmique.

Benoît termine sa présentation avec un aperçu de l’outil d’annotation sur le site Dailymotion. Malheureusement, puisqu’il ne s’agit que d’un projet expérimental, il n’est utilisable qu’avec Chrome.

Voilà pour les dernières présentations de cette journée très riche !

CRAW2013 : utilisabilité des systèmes interactifs

2013-04-24T13:39:43+02:00

Voici un nouveau morceau de mon compte-rendu de la Conférence Romande sur l’Accessibilité du Web 2013 organisée par Telono (lien externe).
Après HTML5 et ARIA, la mobilité et la gestion de projet, on parle d’expérience utilisateur avec Florian Egger (lien externe) et Laetitia Giannettini (lien externe) et leur présentation « Utilisabilité des systèmes interactifs » : méthodes et techniques d’évaluation ».

Liens entre accessibilité et utilisabilité

Pour commencer, Laetitia met en valeur les rapports entre les domaines de l’accessibilité et de l’utilisabilité.
Il s’agit de domaines qui ont chacun leur propre évolution et qu’on peut presque considéré opposés dans un certain sens : si l’objectif de l’accessibilité est de permettre à tous l’accès aux contenus et aux fonctions d’un site, l’utilisabilité est centré sur un modèle d’utilisateur idéal, en fonction de la cible du site ou service. Quand d’un côté on cherche à répondre aux besoins de tous, de l’autre on a tendance à concentrer nos réponses sur un ou plusieurs profils d’utilisateurs spécifiques, généralement une cible jeune et en pleine possession de ses moyens.

Mais malgré cette apparente opposition, des parallèles peuvent être fait entre ces 2 spécialités. Ainsi, certains critères en accessibilité sont aussi des critères d’utilisabilité. Laetitia donne notamment l’exemple de l’information transmise par les couleurs ou les contrastes qui sont des critères de base à la fois en accessibilité et en utilisabilité.

Ces 2 domaines ne sont donc pas tant opposés que complémentaires. Ainsi, si l’accessibilité vise à garantir l’accès au contenu et aux fonctionnalités d’un site, l’utilisabilité a pour vocation d’améliorer l’utilisation de ces contenus et fonctionnalités, pour améliorer l’expérience utilisateur.

Pour illustrer ces propos, elle donne l’exemple d’un site Intranet dont les pages étaient accessibles mais dans lequel les utilisateurs rencontraient des difficultés d’accès à l’information.
Malgré un bon niveau d’accessibilité, les utilisateurs – quels qu’ils soient – avaient beaucoup de mal à trouver le contenu, du fait d’une arborescence qu’ils ne comprenaient pas. En raison d’une mauvaise utilisabilité, les utilisateurs n’arrivaient pas à s’approprier l’Intranet et le délaissaient.

On voit donc que l’utilisabilité et l’accessibilité sont des sujets très complémentaires et qui, l’un comme l’autre, permettent de garantir l’universalité d’accès au contenus. La question est alors de savoir comment concevoir un site qui offre une expérience utilisateur satisfaisante pour tous et pas seulement pour une cible spécifique.

Philosophies de conception et outils

Comme élément de réponse, Laetitia présente 3 philosophies de conception distinctes mais complémentaires :

Le design for all (conception pour tous) qui consiste à prendre en compte dès le départ tous les publics. Elle donne l’exemple des marches de train qui ne répondent pas à ce modèle un utilisateur en fauteuil ne peut pas monter dans le train, mais cette marche peut aussi être problématique voire dangereuse pour tous les usagers.
La méthode écologique qui consiste à observer et analyser les utilisateurs sur le terrain.
Le user-centered design (conception centrée utilisateur) qui consiste à se faire guider par l’utilisateur selon une méthode itérative : on réalise des tests utilisateurs au fur et à mesure de la conception.

Suite à la présentation de ces méthodes, Florian prend la parole pour présenter certains outils permettant d’aider à définir l’arborescence et l’architecture de l’information d’un site, à l’aide de l’implication d’utilisateurs.

Il présente ainsi le tri de cartes dont l’objectif est de créer des groupements de contenus réalisés par les utilisateurs. En pratique, on donne un certain nombre de cartes à l’utilisateur, chaque carte portant un intitulé correspondant à un contenu du site. Et il est demandé à l’utilisateur de faire des regroupements et éventuellement de suggérer des formulations alternatives aux mots sur les cartes.
Les résultats de ce travail peut prendre la forme d’un dendrogramme. C’est un graphique permettant de mettre en valeur les regroupements effectués lors du test. Il permet donc de disposer d’une base utile à la création de l’arborescence des contenus.

À partir de l’arborescence créée, on peut utiliser le second outil présenté : le test d’arborescence. Cela consiste à donner à l’utilisateur une tâche à effectuer à partir d’une arborescence définie. Ce test permet de détecter les difficultés d’utilisation ou de compréhension d’une arborescence mais aussi les chemins parcourus (en cas d’arborescence à plusieurs niveaux notamment).
Le résultat se présente sous la forme d’un pietree qui prend la forme d’un arbre dont les noeuds sont des camemberts. Pour chaque nœud, on peut donc voir la proportion des choix effectués, permettant une visualisation des chemins les plus empruntés par les utilisateurs.

Les 2 outils présentés peuvent être réalisés avec des moyens très différents, mais Florian recommande d’utiliser des moyens informatiques qui ont l’avantage d’accélérer le rendu des résultats. Il cite notamment le service en ligne Optimal Workshop (lien externe) qui permet – entre autres – de réaliser des tris de cartes et tests d’arborescence.

Conclusion

Voilà pour cette conférence plus orientée sur l’expérience utilisateur. Si ce sujet et l’accessibilité sont des sujets largement traités chacun de leur côté, il est plutôt rare de les voir traités ensemble et c’est plutôt rafraîchissant. Même si on peut en avoir conscience, ça permet de bien se rendre compte des liens intimes qu’il peut y avoir entre les différents domaines du web.
Et c’est sans parler du fait que ça participe à enrichir encore plus cette journée déjà très riche. 🙂

CRAW2013 : gestion de projet, méthodes et enjeux

2013-04-23T09:37:06+02:00

Après HTML5 et ARIA et la mobilité, voici la troisième partie de mon compte-rendu de la Conférence Romande sur l’Accessibilité du Web 2013.
Cette fois, nous parlons de gestion de projet avec la présentation d’Armony Altinier (lien externe) : « Gestion de projet : Intégrer l’accessibilité dans un projet web, méthodes et enjeux ».

Ayant commencé à bercer dans la gestion de projet dans mon précédent poste, c’est le genre de présentations qui m’intéressent particulièrement. J’étais donc assez impatient d’assister à cette-là.

Méthodes existantes

Avant de donner des réponses, Armony pose les bases et elle nous peint un état des lieux de l’accessibilité aujourd’hui.

La première question est de savoir s’il y une méthode de gestion de projet propre à l’accessibilité ou si l’accessibilité doit être intégrée dans les méthodes existantes.
Le constat qu’elle fait est que, généralement, la méthode de base de l’accessibilité est l’évaluation ou l’audit. Autrement dit on commence un projet à partir de l’évaluation ou l’audit du site ou service web. Elle évoque les principaux référentiels utilisés : les WCAG 2.0 (norme ISO depuis fin 2012), traduits en France par le référentiel Accessiweb ou le RGAA.

Conscient des limites des WCAG dans le cadre de projets web, le W3C a mis en place une méthode d’évaluation plus opérationnelle : WCAG-EM. On y retrouve d’ailleurs pas mal de ressemblances avec nos référentiels français.

La méthode WCAG-EM se découpe en 5 phases :

Définition des objectifs et périmètre du projet
Exploration du site
Échantillonnage du site en fonction des objectifs et du périmètre
Évaluation de l’échantillon
Rapport d’évaluation

Il s’agit là d’une méthode classique dans le cadre d’un audit. Concernant les objectifs, elle précise cependant que « atteindre le niveau AAA » ne doit pas être un objectif.
La phase cruciale est la dernière : le rapport. Dans le cadre de la méthode WCAG-EM sont définis 3 types de rapports :

Le rapport basique listant les points en conformité et les échecs à l’échelle du site. C’est une vue macro, si un critère est en échec sur une page, il est considéré en échec pour le site.
Le rapport détaillé qui contient le rapport basique complété par le détail des points de conformité et des échecs, page par page.
Enfin le rapport en profondeur correspond au rapport détaillé complété par une partie destinée aux décideurs. 🙂

Elle fait le rapprochement avec le rapport selon Accessiweb où on retrouve un peu le même esprit mais formulé autrement : on un rapport décideur non technique et pédagogique, accompagné par une (imposante) annexe technique qui détaille page par page les erreurs et les suggestions d’amélioration.

Indicateurs de l’accessibilité

Parmi les informations qu’on peut trouver dans un rapport et particulièrement la partie à destination des décideurs, ce sont des chiffres.
Selon Armony, oui, il faut des chiffres, il faut des notes, il faut un score.

Sur le plan quantitatif, on compte notamment le nombre de points en conformité à l’échelle du site ainsi que page par page. Mais il faut aussi pouvoir donner la quantité de travail et le coût pour prendre en charge les corrections.

Mais il ne faut pas s’arrêter à ces indicateurs. Car un site qui répond à 80% des critères ne sera pas nécessairement accessible à 80%. Elle donne d’ailleurs un exemple imparable : un site peut répondre à 90% des critères, s’il y a un captcha dans son formulaire de connexion, il sera potentiellement totalement inaccessible.

Il convient donc de mesurer aussi des indicateurs qualitatifs. Ça peut être le niveau à atteindre (A, AA, AAA) ou une liste de points bloquants identifiés. Généralement, il s’agira « d’inventer » les indicateurs en fonction des objectifs du projet et des contenus ou fonctionnalités jugées critiques pour l’utilisation du site ou du service.

Les méthodes d’évaluation et les indicateurs c’est bien joli, mais ce n’est pas évident à appliquer dans tous les projets. Et surtout, les méthodes d’évaluation s’appliquent forcément sur un site existant, c’est à dire après le projet de création ou refonte. Pour une meilleure prise en compte de l’accessibilité, il faut s’y prendre plus en amont.

Les méthodes opérationnelles

Fort de ce constat, différentes méthodologies ont été développées – ou sont en cours de développement – afin de prendre en compte l’accessibilité dès le départ. On y trouve notamment 3 initiatives françaises :

MIPAW est proposé par BrailleNet (lien externe) et Qelios. Sur la base du référentiel Accessiweb, une priorisation des critères a été faite en fonction de leur importance. Leur importance a été définie selon 4 niveaux :
1. Sécuriser l’accès à l’information.
2. Garantir l’accès l’information.
3. Améliorer l’impact utilisateur.
4. Améliorer l’expérience.
Accessibility Steps est proposé par Temesis (lien externe). Basé sur Opquast Reporting (lien externe), cette méthode permet d’évaluer facilement tous les critères qui peuvent être testés de manière automatisée. On y trouve 3 niveaux :
1. First step permet de vérifier ce qui constitue une erreur d’accessibilité immédiate.
2. Second step permet de vérifier ce qui crée un risque d’accessibilité.
3. Third step permet de vérifier ce qui améliore l’accessibilité à travers les alternatives et contenus eux-mêmes.
AcceDe Web est proposé par Atalan (lien externe). Le projet vise à répartir la prise en charge de l’accessibilité en fonction du profil métier. Ils ont ainsi créé différentes notices par métier :
1. Notice d’accessibilité pour la conception graphique.
2. Notice d’accessibilité HTML/CSS.
3. Notice d’accessibilité interfaces riches et Javascript.
4. Notice d’accessibilité éditoriale.

Mise en pratique de l’accessibilité au sein d’un projet

Passée cette présentation exhaustive des outils et méthodologies à notre disposition, Armony présente des exemples concrets de projets web sur lesquels elle est intervenue.

Elle commence par un projet du groupe La Poste consistant à améliorer l’accessibilité d’un ensemble d’applications intranet pour la plupart. Le projet s’est déroulé en 4 temps :

Audit des applications. Dans un environnement Intranet et utilisées avec Internet Explorer 6 essentiellement, il s’agit d’un environnement maîtrisé et l’échantillon audité comportait 3 pages seulement.
Mise en place d’indicateurs selon 3 niveaux de priorité, permettant de faire le plus urgent en premier :
1. Rendre accessible : actions faciles à mettre en place et indispensables.
2. Trouver une solution alternative : actions indispensables mais difficiles à mettre en place.
3. Plus tard : actions peu urgentes, fonctionnalités gadget…
Sensibilisation des agents.
Formations ciblées par profil.

En second exemple, elle présente le cas de Provaltis dont l’objectif était de valoriser sa démarche de labellisation argent (AA). Des formations des salariés ont été mises en place pour les sensibiliser et internaliser les compétences. S’en est suivi un audit réalisé en interne puis une mise en conformité du site et l’obtention finale de la labellisation du site.

Elle présentera 2 autres projets avec des objectifs différents et les réponses apportées à chaque fois.

Conclusion

Les leçons à retirer de ces exemples est que tout est une question de contexte. Il convient donc de bien définir les objectifs du projet pour apporter les réponses appropriées.
De plus, la formation et/ou la sensibilisation apparaît comme l’une des pierres angulaires d’un projet réussi.

Qu’importe les choix effectués dans le projet, il faut aussi prendre les différentes méthodes présentées pour ce qu’elles sont : des outils, à utiliser ou pas suivant le contexte. Et il faut surtout ne pas oublier que l’objectif de base est de rendre accessible à tous les utilisateurs !

Vous pouvez trouver la présentation d’Armony sur Slideshare (lien externe).

CRAW2013 : mobilité et accessibilité

2013-04-22T05:42:06+02:00

Après le la conférence de Jean-Pierre Villain sur HTML5 et ARIA, voici la deuxième partie de mon compte-rendu de la Conférence Romande sur l’Accessibilité du Web 2013, cette fois sur les aspects de mobilité.

Il n’a échappé à personne que nous vivons désormais dans un monde mobile. Depuis la sortie de l’iPhone en 2007, notre usage de l’Internet a complètement changé, si bien qu’on le consomme aujourd’hui davantage sur mobiles et/ou tablettes, que sur nos traditionnels ordinateurs de bureau. Il n’est donc pas surprenant que plusieurs des présentations de cette journée soient portées sur le web mobile. Car si le web a évolué, l’accessibilité a – et doit – évoluer avec.

Démonstration d’usages mobiles

La première présentation sur le sujet consistait en une démonstration de la révolution permise par le mobile pour les personnes handicapées, et particulièrement pour les non-voyants.

Ainsi, Daniele Corciulo (lien externe), non-voyant, explique tout ce que l’iPhone lui permet de faire.
Il commence par une démonstration des possibilités de navigation basiques une fois les options d’accessibilité activées.

Pour déverrouiller le téléphone, le configuration classique demande de faire glisser un slider sur le côté. Mais en tant que non-voyant, c’est une opération délicate. En activant les options d’accessibilité, il suffit de faire un double tap.
De manière générale, le double tap permet de valider une action. Ainsi, pour naviguer parmi les applications, il suffit de glisser le doit sur la droite ou la gauche (on passe alors à l’application suivante ou précédente). Une fois sur l’application désirée, un double tap permet de la lancer.

Il s’agit des manipulations de base, mais avec ces quelques adaptations ergonomiques natives, le téléphone est totalement utilisable par un non-voyant !

Après cette première présentation, il passe à la démonstration de quelques applications.

Il commence par Blindsquare (lien externe) qui est une application dédiée aux non-voyants et combinant Foursquare (lien externe) et Open Street Map (lien externe). À partir de sa position géographique, l’application liste tous les lieux alentours (commerces, monuments, transports…). En sélectionnant un lieu, l’application donne l’itinéraire à emprunter pour s’y rendre.

Une autre application donnée en exemple est celle des CFF (équivalent Suisse de notre SNCF) qui lui permet à tout moment de consulter les horaires de trains, les arrêts mais aussi le quai de départ des trains.

Une autre application qui a changé sa vie quotidienne : l’application du journal 20 Minutes. Avant, pour lire le journal, il devait attendre que la version audio soit téléchargeable, il devait la télécharger et une fois fait, il lui fallait encore le matériel pour l’écouter. Aujourd’hui, il lui suffit de lancer l’application et toutes les informations lui sont directement accessibles. Il peut ainsi écouter le journal dans le train, à l’instar d’un voyant lisant son journal sur la route de travail.

Malgré ces quelques très bons exemples, Daniele émet quand même un bémol. Car si l’iPhone est totalement utilisable nativement par un non-voyant, ce n’est pas nécessairement le cas de toutes les applications.
En effet, l’accessibilité d’une application dépend de la qualité du développement. Si les développeurs ne respectent pas les normes définies par Apple pour créer leur application, cette dernière peut être au final totalement inaccessible…

Il donne en exemple – de ce qu’il ne faut pas faire – l’application TicketCorner. Cette application permettant de réserver des places de spectacles ou d’évènements sportifs est en effet inutilisable pour un non-voyant : la liste des évènements n’est absolument pas restituée par VoiceOver.

Pour ne pas finir sur une mauvaise note, Daniele donne encore de bons exemples : il envoie ainsi un tweet en direct (lien externe) depuis l’application Twitter ou encore effectue un transfert d’argent avec l’application PostFinance.

Après cet ensemble de démonstrations toujours impressionnantes, un auditeur pose la question de l’accessibilité d’Android par rapport à iOS. Et ça tombe bien, la présentation suivante compare justement les 2 systèmes. 🙂

Évaluation de l’accessibilité des téléphones tactiles à l’aide de tests utilisateurs

Directement après la démonstration de Daniele Corciulo, Arnaud Béguin (lien externe) présente les résultats d’une étude comparative sur l’accessibilité de l’iPhone 4S et du Nexus (sous Android 4.0), réalisée à la fin de l’été 2012.
L’étude s’est déroulée sous forme de tests utilisateurs impliquant 10 utilisateurs non-voyants. Chacun de ces utilisateurs devait effectuer des tâches prédéfinies, sur iPhone et sur Android. L’objectif était d’évaluer l’usage des fonctions primaires du téléphone :

Interactions gestuelles
Retours d’information
Entrée de texte
Navigation dans une liste
Appel téléphonique

L’analyse des tests s’est portée sur l’observation de réussite ou non des tâches ainsi que sur les retours du ressenti des utilisateurs. Et sans trop de surprise, l’iPhone se détache clairement d’Android.

L’une des principales raisons est que l’iPhone a été pensé dès le départ pour être utilisable par des personnes non-voyantes. Au contraire d’Android qui ne disposait pas d’options d’accessibilité dans ces premières versions.
Et même si Google a beaucoup amélioré cet aspect au fil des versions, le fait qu’Android soit hautement personnalisable ajoute une difficulté à l’obtention, en bout de chaîne, d’une interface accessible. Ainsi, Arnaud explique que des téléphones sous Android peuvent être totalement inaccessible quand le constructeur personnalise trop – et surtout mal ? – l’interface.

Au delà de la différence de maturité de chacune des plateformes sur le point de l’accessibilité, certains points constatés pendant les tests mettent tout de même des différences cruciales en lumière.

Déjà pour la navigation dans les menus :

Sur iPhone : il faut glisser à droite ou à gauche comme on l’a vu lors de la présentation de Daniele. À chaque glissement, l’intitulé de l’item sur lequel on se trouve est restitué et il faut effectuer un double tap pour l’ouvrir.
Sur Android : on navigue à l’aide de 2 doigts avec un mouvement de haut en bas. Et déjà un premier problème apparaît : avec un mouvement haut/bas, il arrive que les utilisateurs déroulent le panneau de paramètres du téléphone (la barre d’état en haut du téléphone qui se déroule), ce qui les interromps dans leur navigation. De la même manière, avec un mouvement bas/haut, les utilisateurs retournent à l’accueil ou à l’étape précédente, puisque la plupart des téléphones sous Android ont des boutons pour ces fonctions en dessous de l’écran.

Autant dire que l’avantage au profit du modèle de la marque à la pomme est déjà flagrant.
Mais ce n’est pas fini, un autre point noir d’Android se situe dans la saisie et la validation d’information :

Sur iPhone : la saisie d’information se fait assez intuitivement, en fonction de la position de son doigts sur l’écran, on prend le focus sur une option. On navigue ensuite dans les options de gauche à droite et inversement. Chaque option est vocalisée, permettant à l’utilisateur de savoir sur laquelle il se trouve. Un double tap permet de valider l’option et elle est, le cas échéant, vocalisée avec une intonation différente, indiquant bien que l’action a été effectuée. À noter que cette logique s’applique à la navigation dans les menus mais aussi à la saisie d’informations avec le clavier.
Sur Android : c’est une autre paire de manche. À commencer par le parcours du clavier ! La navigation se fait en parcourant l’écran avec le doigt. Les options parcourues sont restituées. Mais dès lors que l’utilisateur lève le doigt, l’option sur laquelle il se trouvait est saisi, sans retour d’information vocal. Si pour la moindre raison son doigt perd le contact avec l’écran, il active une option indésirée… Lorsqu’il s’agit de saisir du texte, les manipulations a effectuer se révèlent être un parcours du combattant.

Arnaud a donné bien d’autres détails, mais ces 2 aspects étaient ce qu’il y avait de plus marquants et ils permettent de se faire une idée assez claire de la différence de niveau.

Après, Android ne cumule pas que des mauvais points. Dans les points positifs, une gestion du clavier numérique assez intelligente : peu importe où le doigt est posé sur l’écran, c’est systématiquement le 5 qui se trouve dessous. Le reste du clavier numérique est donc positionné autour du 5, à l’instar d’un clavier numérique physique. Pour taper 2, il suffit de glisser le doigt au dessus. Pour 9, il faut glisser le doigt dans la diagonale bas/droite. Même s’il y a quelques problèmes, lorsque le doigt est posé sur un bord de l’écran notamment, c’est un système assez intelligent qui permet une saisie rapide.

En attendant la présentation détaillée, vous avez déjà un aperçu des retours de l’étude. 🙂 Au final, la comparaison est donc difficilement équitable et l’iPhone se détache clairement si on s’arrête à l’accessibilité des 2 plateformes.

Il serait intéressant d’avoir une étude équivalente avec Firefox OS quand ce dernier sera disponible chez nous. L’étude a en effet montré que l’un des avantages de l’iPhone était son environnement fermé. Est-ce qu’un environnement à l’opposé, entièrement à base de HTML, a une chance de concurrencer l’iPhone et de proposer un environnement modèle d’accessibilité ? Je l’espère.

Conclusion

Voilà pour cette deuxième partie orientée mobilité et qui clôture la matinée de conférences. 🙂
Sorti des aspects techniques, ces démonstrations et retours d’expériences ont toujours ce goût de réveil à l’eau froide. À titre personnel, j’adore. Ce sont des moments où on se trouve confronté à la réalité « du terrain » et à l’expérience réelle des utilisateurs. C’est toujours très enrichissant et ça permet de se rendre compte de la complexité à laquelle certains font face pour réaliser des tâches qui nous paraissent simples.

Mais au delà de cet aspect, c’est incroyable de se rendre compte que sans autre matériel que son téléphone, un non-voyant peut se déplacer de manière totalement indépendante. Si le web était déjà une révolution en termes d’accès à l’information pour les personnes en situation de handicap, le web mobile est une révolution pour l’accès au monde physique !

À bientôt pour la suite de ce compte-rendu. 😀

CRAW2013 : HTML5, ARIA et accessibilité web

2013-04-19T10:34:14+02:00

Il y a quelques jours avait lieue la Conférence Romande sur l’Accessibilité du Web 2013 (aka CRAW2013). Organisée par Telono (lien externe) pour la deuxième année consécutive, il s’agit de la première conférence romande sur le sujet de l’accessibilité. Et si la première édition était déjà très réussie, cette deuxième cuvée est vraiment, en ce qui me concerne, une très très grande réussite !

Je vous propose donc un petit compte-rendu en espérant qu’il vous donnera envie de venir jusqu’en Suisse pour la prochaine édition. 🙂
Initialement, je pensais faire un seul article pour ce compte-rendu. Mais il y a tellement à dire que je pars finalement sur un compte-rendu en plusieurs parties. Ça me permet de publier plus rapidement quelque chose, et ça permet aussi d’alléger un peu la lecture. 🙂

Je vais donc attaquer directement dans le dur avec une présentation de Jean-Pierre Villain (lien externe) sur HTML5 et ARIA.

À noter que la conférence ne commençait pas aussi abruptement. Cette présentation était précédée d’une introduction de Florian Egger (lien externe) et Laetitia Giannettini (lien externe) pendant laquelle étaient rappelés les enjeux de l’accessibilité du web. S’agissant des informations classiques d’introduction à l’accessibilité, je saute cette partie. Dans le cadre de la conférence c’est un passage essentiel car le public est très divers et certaines personnes peuvent ne pas être au fait du sujet, cette introduction y a tout son sens. Concernant mon compte-rendu, je fais le choix d’aller directement sur les différents sujets. J’espère que vous ne m’en voudrez pas. 😉

Du HTML4 au HTML5

On commence par une petite leçon d’histoire : HTML4 était un langage simplissime, si bien que pour avoir un minimum d’interaction avec l’utilisateur, les développeurs ont rapidement utilisé Javascript. En terme d’accessibilité, c’était la belle époque : pour faire un site accessible, il fallait que le site soit consultable et utilisable sans javascript.

Le HTML4 étant quand même trop limité pour ce que le web est devenu depuis, le HTML5 est apparu et permet désormais de faire un nombre incroyable de choses facilement. Le HTML4 se résumait à un web de documents, le HTML5 permet un web d’applications.
Mais concernant l’accessibilité, c’est tout autre chose : alors qu’en HTML4 il suffisait de proposer des alternatives au Javascript, en HTML5 Javascript est indissociable du HTML. Mieux encore, c’est désormais sur Javascript qu’il faut compter pour pouvoir faire un site accessible !

Une fois ce contexte posé, Jean-Pierre nous propose un petit état des lieux de l’accessibilité en HTML5. À commencer par un constat simple : le HTML5 est une spécification vivante et en constante évolution, il est donc urgent de se pencher sur l’accessibilité du langage pour savoir ce qu’on peut ou non utiliser.
Car au delà du travail des concepteurs web, l’accessibilité du langage nécessite d’être aussi prise en charge par les éditeurs de navigateurs et les technologies d’assistance. Dans un contexte en perpétuel mouvement, on a donc beaucoup de mal à avoir des implémentations stables et surtout uniformes en fonction des plateformes et des outils de navigation.
D’après Jean-Pierre, il faudra d’ailleurs attendre 3 ou 4 ans avant d’avoir une situation homogène. Et ce n’est pas le récent retrait de la nouvelle » balise hgroup qui lui donnera tort.

HTML5 et l’accessibilité

Jean-Pierre nous fait un petit tour des nouveautés apportées par HTML5 et leur impact sur l’accessibilité.
Il a été dit énormément de chose, je vous restitue donc tout ce que j’ai pu noter, mais c’est loin d’être complet. Il faudra attendre la diffusion de la présentation pour avoir tous les détails. 😉

La balise figcaption permet de renseigner une légende à un média. Problème : en termes d’accessibilité, cette balise est actuellement très mal gérée voire pas du tout. Pour faire un site accessible, il faut donc éviter de l’utiliser, ou mettre en place un fallback. Il donne l’exemple du rôle ARIA group, à définir sur le conteneur de l’image et de sa description.
Toujours dans la catégorie des média, le SVG et la balise canvas peuvent être utilisés sans problème, à condition de renseigner une alternative.
L’une des grandes nouveautés du HTML5 est l’ajout des balises audio et video permettant de gérer nativement les média, sans plugin. Si ces balises sont désormais assez bien implémentées par les différents navigateurs, Jean-Pierre met en garde contre l’utilisation des contrôles par défaut. Ils sont en effet inaccessible et il préconise donc d’utiliser une solution comme Acorn Media Player (lien externe), qui offre des contrôles accessibles.
Une grosse nouveauté est la possibilité d’inclure n’importe quel type d’élément dans un lien, alors qu’on pouvait seulement inclure des éléments en ligne en HTML4. L’un des effets négatifs étaient que pour faire un lien sur un bloc complet, il fallait répéter le lien autant de fois qu’il y avait d’éléments dans le bloc. En terme d’accessibilité, on multipliait donc considérablement la liste des liens d’une page. Même si la restitution n’est pas parfaite partout, ça ne peut pas être pire qu’avant donc il ne faut pas hésiter à profiter de cette nouvelle possibilité.
Concernant les formulaires, de nombreux nouveaux types de champs existent. Ils sont déjà partiellement implémentés dans certains navigateurs mais peu ou mal gérés sur le plan de accessibilité. On doit donc continuer à utiliser les solutions Javascript usuelles, au moins pour un moment. Seules exceptions : les types datalist, progress et range qui sont correctement rendus dans la majorités des configurations.
Jean-Pierre met aussi en garde contre l’outline (ndla : plan du document). En effet, la spécification HTML5 apporte une toute nouvelle logique de structuration, permettant notamment de mettre uniquement des titres de niveaux 1 sur la page. Le plan du document est alors automatiquement formé en fonction de la position des titres dans la page (un h1 dans un article sera l’équivalent d’un h2, etc). Dans les faits, l’implémentation n’est pas aussi simple et il est conseillé de conserver la hiérarchisation qu’on connaît jusqu’à présent, à savoir un titre unique de niveau 1 et des titres de niveaux 2 à 6 correctement hiérarchisés.
Enfin, la spécification HTML5 s’est vue enrichie par l’ajout d’une balise main. Jean-Pierre conseille vivement de l’exploiter car elle permet de délimiter le contenu principal de la page très simplement. Même si elle n’est pas implémentée partout, elle a un intérêt indéniable pour l’accessibilité.

Si HTML5 apporte un tas de nouveautés favorisant à priori l’accessibilité, on voit qu’il reste encore du travail. ARIA nous aide donc à rendre les sites et applications web plus accessibles.

HTML5 et ARIA

Pour commencer, ARIA permet de définir des rôles aux éléments de la page.
Par exemple le rôle banner permet de définir l’entête principale du document. Au contraire de la balise header en HTML5, qui peut définir l’entête d’à peu près n’importe quoi. On utilisera donc le rôle banner sur le header principal de la page, pour souligner qu’il s’agit de l’entête principale.
Il faut cependant faire attention à l’usage qu’on fait des rôles. En effet, le rôle ARIA surpassera systématiquement la valeur « naturelle » de l’élément sur lequel il est appliqué.
Si on applique par exemple un rôle presentation sur un titre, ce dernier ne sera plus considéré comme un titre pour les technologies d’assistance, et donc exclu de la liste des titres.
Il convient donc d’être attentif de l’usage qu’on fait d’ARIA.

Jean-Pierre explique ensuite l’utilité d’ARIA pour décrire les composants et leurs changements d’états. Il fait notamment la démonstration d’un slider totalement utilisable avec un lecteur d’écran.
S’agissant d’un sujet technique, il n’est pas rentré dans les détails et si vous souhaitez aller plus loin, je vous invite à lire l’introduction à WAI-ARIA (lien externe) sur Les intégristes. 🙂

Enfin, il a aussi décrit l’usage des attributs aria-labelledby et aria-describedby. Très simple à mettre en place (il suffit d’ajouter les attributs dans le code), ils permettent de lier des contenus entre eux. Le cas le plus utile concerne les formulaires et particulièrement les messages d’aide qu’on retrouve souvent accolés à certains champs. Lorsque ces messages d’aide sont des phrases, ils sont généralement placés après le champ. Le problème dans ces cas là est que les technologies d’assistance n’ont aucun moyen de savoir à quel champ le message se rapporte. Pire, puisqu’il est placé à la suite du champ, l’utilisateur remplira le champ sans avoir connaissance du message.
Imaginez qu’on ait un champ et un texte d’aide en dessous. Il suffit que le texte d’aide soit dans un contenant portant un id « aide » par exemple. Le simple fait d’ajouter l’attribut aria-describedby ayant pour valeur « aide » sur le champ, la liaison entre le champ et l’aide sera automatique !

Pour conclure sur cette tartine technique, Jean-Pierre conseille enfin de toujours utiliser HTML5 et/ou ARIA avec beaucoup de précaution. Aussi magiques soient-elles, toutes ces nouveautés (plus ou moins) sont parfois très mal implémentées. En règle général, il faudra privilégier l’utilisation de HTML5 sauf si le rendu n’est pas terrible ou si le support des navigateurs et/ou technologies d’assistance est mauvais.

Ce n’est qu’un début…

Voici donc un petit concentré de cette présentation très très intense de Jean-Pierre Villain. 😉 Vous vous doutez qu’au delà de la richesse de la présentation, nous n’avons là qu’un petit aperçu de l’énorme chantier pour l’accessibilité concernant HTML5 et ARIA. Du fait de l’implémentation continue de ces spécifications (notamment pour l’HTML5), créer un site ou un service accessible en HTML5 revient à « marcher sur des œufs ». Il faudra donc passer beaucoup de temps à tester tout ce qu’on fait pendant les prochaines années.
Il en profite pour préciser que des validateurs ARIA sont développés mais des outils comme aViewer (lien externe) et Inspect32 permettent d’ores et déjà de tester son code ARIA.

Enfin il faut noter qu’une première version HTML5 du référentiel Accessiweb (lien externe) est prévue pour le mois de juin. Son élaboration dure depuis déjà de nombreux mois et elle devrait donc déjà donner de nombreuses billes pour savoir ce qu’il est possible ou non de faire. 🙂

Voilà ce que j’ai pu retenir de ces 45 minutes (théoriques 😛) de présentation et je vous dis à très bientôt pour la suite de mon compte-rendu de cette journée très riche en informations et découvertes. 😀

Mise à jour du 25 avril 2013
La présentation est désormais disponible sur Slideshare (lien externe).

Les petits ruisseaux font les grandes rivières

2013-04-18T09:34:58+02:00

Derrière ce titre à tendance poétique se cache une idée qui, pour moi, est intimement liée à la qualité web : nous n’avons pas besoin de faire des bons de géants pour avancer, une succession de petits pas permet d’avancer autant. Voire plus !
Avec cet article, je vais donc tenter de démontrer que faire avancer la qualité web est à la portée de tous, chacun d’entre nous peut en porter l’étendard. Sur la base de mon expérience toute relative, je vais tenter de vous donner une clé – parmi d’autres – pour faire avancer les choses, à votre échelle et sans prétention, auprès de vos collègues, de votre hiérarchie… Si je parle de qualité web ici, c’est aussi valable pour tout autre sujet qui vous tient à cœur, comme l’accessibilité par exemple !

Ce que j’ai appris avec le temps, c’est qu’il est nécessaire et indispensable de savoir communiquer avec les autres. Au delà de l’expression écrite ou orale, il s’agit de savoir écouter, mais aussi d’être écouté et se faire entendre.

Ceux qui me connaissent savent que je suis pas un tueur de la communication. Si je me défends encore à l’écrit, la prise de parole n’est pas ce qui est le plus simple pour moi (mais je travaille sur moi-même, et je profite d’ailleurs pour remercier mon ancien responsable qui m’a pas mal fait avancer sur ce point !). Je ne suis pas là pour parler de moi, mais il se trouve que le fait de ne pas être un grand orateur m’a permis de découvrir une recette que je peux vous partager aujourd’hui.

Comme je ne suis pas un grand parleur, si je suis en réunion, je ne parle pas forcément beaucoup et je suis plus concentré sur l’écoute et la digestion des informations. Mais du coup quand je parle, c’est généralement parce que je sais ce que je dis et je sais que j’apporte de l’eau au moulin dans la discussion en cours.
Je me suis rendu compte que ce comportement a eu à la longue un effet bénéfique dans mes relations de travail : même si je parlais peu, le fait d’apporter (en général) des idées ou des solutions qui aidaient à faire avancer les choses, m’ont permis d’acquérir une certaine légitimité auprès de mes collègues. Petit à petit, ces derniers se sont mis à venir naturellement me demander mon avis ou des conseils sur différents sujets. Et c’est à partir de ce moment là que j’ai pu mettre en avant des problématiques qui me sont chères comme l’accessibilité ou la qualité web.

Il ne faut pas hésiter à aider les gens. Sans attendre la bonne occasion de sortir quelque chose d’utile (ndla: le cas extrême représenté par mon histoire juste avant), il ne faut pas hésiter à aller vers vos collègues dans le besoin et leur apporter de l’aide. Bien sûr, ce n’est pas du jour au lendemain qu’ils se mettront à s’abreuver de vos bons conseils, mais avec le temps, vous gagnerez en légitimité à leurs yeux. Si bien qu’à un moment, vous n’aurez même plus à faire la démarche d’aller vers eux, ce sont eux qui viendront vers vous.

Quand je suis arrivé dans ma précédente entreprise, c’est une longue démarche que je suis heureux d’avoir pu réaliser.
On peut dire que j’ai commencé au bas de l’échelle : l’entreprise avait besoin d’une ressource partielle pour animer le site web et les campagnes d’emails entre autres. J’étais alors web designer freelance et mes tâches se résumaient pour la plupart à de l’exécution. Rapidement, j’ai été amené à participer aux évolutions du site Internet mais ça restait encore orienté sur de l’exécution (intégration HTML de pages web surtout).
Il faut savoir que l’organisation interne était alors assez simple :

Une équipe métier (dont je faisais partie) responsable de la communication et l’animation du site web. Cette équipe exprimait les besoins d’évolution du CMS et des services en ligne.
En face, une équipe MOA était chargée de la réponse à ces besoins d’évolutions, de la rédaction du cahier des charges jusqu’à la réalisation avec nos différents partenaires techniques.

Je vous l’ai fait courte mais je pense que la plupart d’entre vous connaissent ou ont connu ce genre de situation : même si les différentes équipes travaillent plus ou moins bien ensemble, l’entente n’est pas toujours évidente. Chaque partie veut garder le contrôle de son territoire et sitôt qu’une personne déborde un peu chez l’autre, il arrive vite que certains se braquent.

En tant que web designer, exécutant et par dessus le marché freelance (à traduire par « pas de la maison »), l’équipe MOA pouvait se placer assez facilement comme donneuse d’ordre par rapport à moi. Au tout début ils me demandaient de fournir une page HTML intégrée avec ci et ça pour telle date… sans autre forme de procès.
N’ayant pas vraiment de compétences techniques en intégration, ils se contentaient de faire passe-plat et transféraient directement au partenaire technique concerné ce que je leur fournissais. Et forcément, tout ne se passe pas toujours sans problème, il arrivait d’avoir un retour du partenaire qui remontait un problème dans l’intégration à côté duquel je pouvais être passé. Et parfois, le partenaire se contentait de dire « ça ne marche pas », nous laissant la charge de l’investigation. Je pense que vous devinez comment ça se finissait : l’équipe MOA ne maîtrisant pas le sujet, ça me revenait tout droit dessus !

Et c’est là que se trouve l’opportunité d’échange. En général, les problèmes qu’on rencontre en intégration sont tous bêtes, j’ai donc assez vite pris le parti de discuter du problème rencontré avec l’équipe MOA. Discuter du problème permet de l’expliquer. Prendre de son temps pour l’expliquer permet à ses interlocuteurs de s’y intéresser plus facilement. De fil en aiguille, une relation de confiance s’installe et d’exécutant, je suis progressivement devenu une sorte de consultant qu’on interrogeait, parfois sur des sujets allant au delà de mon métier initial.

La communication est donc importante : il faut avant tout être à l’écoute. Même si c’est vous qui allez vers les gens, pour que les gens vous écoutent, vous devez avant tout les écouter. Car ce n’est qu’une fois après avoir compris ce dont ils ont besoin que vous pourrez leur apporter des réponses. À partir du moment où les gens savent que vous les écoutez et que vous faites votre possible pour les conseiller, ils viendront naturellement vers vous à la moindre occasion, pas seulement lorsqu’ils auront un problème.

Note : Je vous suggère au passage le visionnage de la conférence « Intégrateurs, montez au front ! », donnée par Stéphane Deschamps à Paris Web 2009. Vers 8 min 25, il parle très bien de la reconnaissance de ses collègues. Même si sa présentation concerne avant tout le métier d’intégrateur, ses propos n’ont pas moins de sens pour les autres métiers.

À partir du moment où les gens viennent vers vous, vous n’aurez plus aucune difficulté à faire passer vos messages. Il suffit de profiter de chaque occasion d’échange pour parler de qualité ou de tout autre sujet visant à améliorer la qualité de vos sites ou services web.

Tout à l’heure je parlais de la relation avec la MOA, mais la logique est la même avec tout type de profil ou de métier, même en dehors du web ! Imaginez qu’une contributrice qui ne connaît rien ou pas grand chose au HTML vous appelle parce qu’elle a un problème pour faire des listes dans son CMS. En plus de lui expliquer comment faire dans son éditeur WYSIWYG, n’hésitez pas à lui expliquer ce que sont les listes ordonnées et non ordonnées, dans quel cas il faut les utiliser, et même à quoi ressemble le HTML de ces éléments… Non seulement vous allez l’aider à comprendre son problème et à le résoudre comme une grande à l’avenir, mais en plus vous allez lui apprendre des choses et elle n’en sera que plus ravie.

Avec le temps et au fil des conseils donnés, vous disséminerez ainsi sans effort les bonnes pratiques et elles seront intégrées naturellement par tous, en fonction des problématiques de chacun. Le contributeur apprend des bases de HTML qui lui permettront d’intégrer ses contenus plus proprement, le graphiste prêtera davantage attention aux contrastes de ses créa, etc…

On peut reprocher à cette méthode qu’il faut du temps pour arriver à un résultat. Et c’est vrai qu’il faut de la patience. Mais comme la plupart des gens ont tendance à résister au changement, la dissémination appropriée de vos messages permettra à tous de s’améliorer sans même s’en rendre compte. C’est en tout cas quelque chose dont je suis convaincu et que j’ai pu constater dans mon précédent poste.

Alors à vous de jouer et propagez discrètement la bonne parole dès que vous en avez l’occasion !

Homosexualité et parentalité 2

2013-03-29T08:56:12+01:00

Cet article est une réponse au commentaire de Victor sur mon premier article Homosexualité et parentalité.

Son commentaire expose son point de vue en tant qu’opposant et c’est un contrepoint très intéressant ! À dire vrai, je comprends même très bien la plupart de ses arguments et cela me donne l’occasion d’aller un peu plus loin dans ma réflexion. 🙂

À titre personnel, je suis convaincu que ce sujet – du mariage et de l’adoption par des couples de même sexe – sera de toute façon accepté par la société dans son ensemble au bout d’un certain temps. Le fait que de nombreux pays étrangers aient déjà adopté des lois en ce sens est à mon avis un signe assez fort d’une acceptation – progressive certes, mais pas moins certaine – de nos sociétés contemporaines.

Il s’agit d’un changement important car ça bouleverse une vision de la famille ancrée depuis toujours dans notre société. Et je pense que tout changement de société d’une telle ampleur ne peut pas être accepté sans une période plus ou moins longue de débat.

J’ai trouvé un exemple qui parlera à tout le monde pour illustrer ce phénomène : le droit de vote des femmes.
Entre le moment où le sujet a été mis sur le « tapis politique » et le moment où il a été accepté par la majorité, il s’est écoulé un siècle (lien externe). Et je suis certain que pendant cette période, il y eut de nombreuses femmes opposées à ce changement. Pour la simple raison que le vote des femmes ne s’inscrivait pas dans leur vision de la société.

À mon sens, on vit un phénomène équivalent aujourd’hui. Le changement apporté par cette proposition de loi bouleverse trop une vision de la famille, ancrée depuis des siècles dans l’esprit collectif. Le rejet m’apparaît donc naturel.
La résistance au changement est l’un des réflexes humain les plus profonds et seuls le temps et de nombreux débats permettront à la société dans son ensemble d’accepter cette nouvelle vision. 😉

Créer plusieurs pages avec Photoshop

2013-03-28T07:19:04+01:00

Il n’aura échappé à personne que Photoshop est nul pour faire des maquettes d’un site web. Quand il s’agit de faire une page, on s’en sort. Quand on commence à faire plusieurs pages pour un même site, on commence à s’arracher les cheveux !

L’enfer de la gestion de plusieurs pages en PSD

La plupart du temps on commence par créer notre super maquette de page d’accueil. Puis au moment de faire une page secondaire, deux façons de faire se dégagent :

On duplique notre PSD de page d’accueil pour faire un PSD par page.
On crée un groupe de calques par page, sur le même PSD.

Malheureusement, aucune de ces solutions n’est simple à gérer à long terme.

Lorsqu’on duplique le PSD, la moindre modification donne envie de sauter par la fenêtre et génère immanquablement des erreurs et incohérences entre les différents fichiers.
Lorsqu’on crée un groupe de calques pour chaque page, on arrive très rapidement à une taille de fichier énorme et une impressionnante arborescence de calques. On est au final ralenti dès lors qu’on commence à naviguer dedans.

Quelle alternative ?

Pour m’épargner les désagréments ci-dessus, la méthode que j’ai décidé d’adopter est toute bête : j’utilise les objets dynamiques.

Les objets dynamiques, qu’est-ce que c’est ?
Tout graphiste/designer qui se respecte utilise les objets dynamiques, ils permettent d’intégrer dans son PSD un objet graphique que l’on pourra modifier sans altérer la source de l’objet.

C’est notamment très utile lorsqu’on importe une forme vectorielle depuis Illustrator. En insérant ma forme vectorielle sous forme d’objet dynamique, je peux la modifier comme n’importe quel calque, lui ajouter des effets, jouer avec les filtres, la déformer… sans que ma forme d’origine ne soit modifiée.
Si je souhaite modifier ma forme vectorielle, un double clic sur l’objet dynamique qui la contient ouvrira ma forme d’origine dans Illustrator. Je peux ainsi la modifier et le changement de ma forme est pris en compte dans mon PSD automatiquement, sans perdre les effets qui auront été appliqués à l’objet dynamique.

Généralement, on utilise cette fonction pour insérer des formes vectorielles, des photographies ou des illustrations.
J’ai juste poussé le principe jusqu’au bout en l’appliquant à des PSD complets ! 😀

Inclure un PSD dans un PSD

Ma méthode est la suivante :

Je crée mon PSD initial, généralement la page d’accueil. Je fais donc la maquette comme j’ai l’habitude de le faire : je crée la page complète.
J’organise les blocs de ma page par groupe de calques (je le fais personnellement dès le départ, mais si ce n’est pas le cas, il est temps de s’y mettre à ce moment). J’ai donc un groupe « header », un groupe « footer », et ainsi de suite.
C’est à partir de là que j’applique ma méthode : je crée un objet dynamique pour chaque groupe de calques qui sera récurrent sur toutes les pages de mon site.

Pour créer un objet dynamique, il suffit de faire un clic-droit sur le groupe à convertir dans la liste des calques, et choisir l’option « Convertir en objet dynamique ».

Mon groupe de calques est donc converti en objet dynamique.

Il me suffit de double-cliquer sur ce nouveau calque pour qu’un nouveau fichier s’ouvre, contenant mes calques originaux. À ce stade cependant, il y a quelques petits points à améliorer :

En l’état mon objet dynamique est totalement inclu dans mon fichier d’origine. Je ne peux pas l’importer dans un autre PSD.
En ouvrant l’objet dynamique, vous pourrez voir que ce fichier inclu est au format PSB. Ce format est destiné aux fichiers très volumineux. Dans le cas présent, ce n’est pas forcément utile.

Vous l’aurez peut-être deviné, ce qui m’intéresse est d’avoir un fichier PSD indépendant que je puisse « appeler » dans plusieurs fichiers PSD. C’est parti pour les derniers réglages :

Ayant ouvert mon objet dynamique, je suis dans le fichier PSB. Je commence donc par « Enregistrer sous » mon PSB pour créer un PSD indépendant de ma maquette.
Astuce à suivre selon vos préférences : pour me retrouver facilement dans mes différents PSD, je préfixe avec un tiret-bas (_) les PSD qui seront inclus comme objet dynamique. J’ai donc par exemple des fichiers « _header.psd » et « _footer.psd ».
Une fois que mon PSD externe est créé, j’effectue donc mes modifications dans ce fichier. Pour prendre en compte ces changements dans ma maquette, il suffit simplement de faire un clic-droit sur l’objet dynamique correspondant (dans la fenêtre des calques) et de sélectionner l’option « Remplacer le contenu… ».

Il n’y a plus qu’à choisir votre PSD et hop ! Les modifications apportées au PSD s’appliquent à votre maquette aussitôt ! 😀

Conclusion

Je vous ai décris le processus pour 1 seule maquette ici. Ça peut paraître un peu long présenté textuellement, mais dès le moment où on doit travailler sur plus de 2 ou 3 pages, le gain de temps est évident ! Le temps pris pour effectuer une modification sur mes éléments récurrents ne change pas, mais le temps nécessaire à l’application de ces changements sur les PSD de toutes les pages est drastiquement réduit. Un simple clic-droit puis une sélection de fichier, et la maquette est actualisée, sans risque d’erreurs ou d’oublis. 🙂

Homosexualité et parentalité

2013-03-25T13:17:47+01:00

Même si je ne vis plus en France, je suis l’actualité française. L’un des principaux sujets de ces derniers temps est le mariage pour tous. Comme pour tout sujet il y a les pour et il y a les contre. C’est plutôt une bonne chose, il est sain d’avoir des opinions variées qui amènent au débat.
L’actualité du moment concerne les opposants au projet de loi, qui ont souhaité se faire entendre ce week-end avec l’organisation de la Manif Pour Tous, lors de laquelle il y a eu quelques débordements.

Ce qui me fait réagir aujourd’hui ne concerne pas les débordements mais cet extrait vidéo (lien externe) qui tourne sur les réseaux sociaux.
C’est une vidéo tournée aux abords des Champs Élysées, devant un barrage de policier. Des manifestants souhaitent passer, la situation paraît sous contrôle. L’évènement qui fait polémique commence vers 3 minutes et 57 secondes : on entend un père avec son garçon sur les épaules dire « On va mettre les enfants devant ! », tout sourire.

Quelque soit le sujet de la manifestation, cela reste une manifestation. Proposer de mettre ses enfants en premières lignes est déjà aberrant.
Mais si on ajoute le contexte, cette remarque devient révoltante. En effet l’un des arguments des opposants à la loi est que cette dernière va ouvrir la porte à de nouvelles familles avec des enfants sans racines. Paraît-il qu’un enfant avec des parents homosexuels ne pourrait pas grandir « normalement ». Des parents homosexuels ne seraient pas en mesure d’apporter l’équilibre nécessaire pour qu’un enfant grandisse normalement. Comme si le fait d’avoir des parents hétérosexuels, un père et une mère, garantissait davantage à un enfant de devenir une personne équilibrée.

Être né de parents hétérosexuels assure t-il de grandir normalement ? Je ne crois pas.
Il suffit de suivre l’actualité pour s’en rendre compte :

Marc, 5 ans, a été battu à mort par ses parents (lien externe). Il avait un père et une mère. Il n’a pas mieux grandi pour autant…
De même avec ce père qui punit son garçon de 3 ans en l’enfermant dans une machine-laver à plusieurs reprises (lien externe), jusqu’à la fois de trop…
Ce n’est pas mieux pour cette fillette de 10 ans, violentée et ligotée dans une cave par ses parents (lien externe) pendant toute une nuit…
Ou encore ce père qui maltraite sa fille de 2 mois (lien externe), provoquant 19 fractures, entre autres…
Et que dire d’une mère qui laisse sa fille de 7 ans à l’entrée d’une boîte de nuit (lien externe) pour se mettre une mine tranquillement…

Tous ces exemples ont pour point commun des familles hétérosexuelles, avec un père et une mère, tout ce qu’il y a de plus « normal ». Sauf que les enfants qui ont grandi dans ces familles n’ont pas vraiment profité d’un environnement « équilibré ».

Il ne m’a fallu que quelques minutes de recherche pour trouver ces exemples.
Et ils suffisent pour me convaincre : un enfant avec un père et une mère n’a pas plus de chances de grandir normalement qu’un enfant avec 2 pères ou avec 2 mères.

Peu importe l’orientation sexuelle, c’est l’équilibre même de chacun des parents qui permettra à un enfant de grandir normalement.
On peut être hétérosexuel et trop déséquilibré pour élever convenablement un enfant. On peut aussi être homosexuel et tout à fait équilibré et en mesure d’élever un enfant.

La télé-réalité drogue du peuple

2013-03-22T08:23:15+01:00

Cet article est une réaction au billet « La télé-réalité pour les nuls (lien externe) » de Jérémie Conde (lien externe).
J’ai découvert son blog suite à l’article fleuve « Sexisme chez les geeks : Pourquoi notre communauté est malade, et comment y remédier (lien externe) » de Mar_Lard que vous avez difficilement pu louper. En réaction à cet article, Jérémie exposait sa vision du concept de communauté geek sur lequel s’appuie Mar_Lard et dont je partage la vision.
Suite à cette première lecture, me voilà en train de parcourir ces précédents articles, et de tomber sur ce questionnement à propos de la télé-réalité (lien externe).

La télé-réalité est un grand sujet de questionnement pour moi aussi. Pourquoi les gens regardent-ils donc d’autres gens enfermés dans une boîte ?
J’ai développé une hypothèse qui me paraît plausible et complète le propos de Jérémie : c’est triste à dire mais je pense que les personnes qui regardent ce genre d’émission cherchent dans un certain sens à se sentir mieux. Dans leur peau, dans leur tête.

Dans mon précédent poste, j’avais pas mal de collègues qui regardaient ces émissions, les commentaient en live sur Facebook, et les re-commentaient durant la pause café le lendemain. Je pense même qu’ils pourraient tenir sur ce seul sujet pendant toutes les pauses de la journées. Ma femme aussi, quand elle zappe, a la mauvaise habitude de rester sur une émission de télé-réalité, ce qui a le don de m’exaspérer (si elle tient à la regarder, je quitte direct la pièce).

Comme je ne regarde pas ces émissions, je ne pouvais qu’observer les débriefs de mes collègues en tant que simple spectateur. En général, les candidats de l’émission (quelle qu’elle soit) en prenaient pour leur grade et mes collègues ne manquaient pas une occasion de bien en rigoler.
À force de suivre ces discussions, j’ai eu le sentiment que regarder et commenter ces émissions de télé-réalité était une sorte d’exutoire.

Le fait de regarder des spécimens qu’on pourrait aisément situer au plus bas de l’échelle de l’humanité (d’apparence en tout cas, car le montage télévisuel peut faire des merveilles et j’espère qu’ils ne sont pas forcément comme ça au quotidien) permet aux gens par la dévalorisation des candidats, de se valoriser eux-mêmes inconsciemment.
Car soyons honnêtes, en tant que spectateur on est en position de force pour juger en toute impunité. Et s’il y a un trait de caractère – parmi d’autres – propre à l’Homme en général, c’est la capacité à juger les défauts de l’autre en faisant fi de ses propres défauts.

C’est une caractéristique que j’ai personnellement en horreur. À titre personnel, je me passe de juger les défauts des autres dès lors que je sais avoir ce même défaut. J’essaie d’ailleurs d’éviter de juger les autres en toute circonstance, mais là n’est pas le sujet.

Selon moi, la télé-réalité apporte sur un plateau des individus suffisamment stupides pour que la moyenne se sente au dessus d’eux. Un spectateur de ces émissions observe donc des hommes et des femmes qu’il considère sans problème comme moins biens que lui. Moins intelligent, moins beau, moins sportif, moins coincé, moins tout-ce-que-vous-voulez…
L’effet pervers de cette situation est que le spectateur se sent, inconsciemment, valorisé. En effet, comment ne pas se sentir un meilleur homme ou une meilleure femme quand on assiste aux tribulations de profonds – apparents – débiles ?

Au final et à mon sens, la télé-réalité tire globalement le niveau général par le bas. Quand les références télévisuelles du peuple sont représentées par ce qu’il y a de moins valorisant pour l’humanité, ça ne donne pas vraiment envie au peuple de devenir meilleur. Car il se sent déjà meilleur que ce qu’il voit à la télé. Et ce simple état de fait emmène les gens à être satisfaits de ce qu’ils sont. Peu importe qu’ils aient des défauts de la taille d’une montagne, puisqu’ils sont meilleurs que Kévin de Loft Story, ils sont déjà meilleurs !

Le pouvoir des feuilles de style utilisateur

2013-03-20T08:50:03+01:00

Alors que je parcourais nonchalamment ma timeline Facebook, le statut d’un de mes contacts m’a interpellé :

Hmm, je sens que ça va vite me gaver cette nouveauté Facebook qui consiste à mettre des suggestions de pages (de la pub quoi) au milieu de ma timeline…

En effet, la Suggestion de Page Facebook s’insère dans votre timeline mais prend malicieusement, peu ou prou, la même forme que les publications de vos amis.

Suggestion de page Facebook

Et tout d’un coup, l’idée de masquer ces satanées publicités à l’aide d’une feuille de style utilisateur me traverse l’esprit ! Ni une, ni deux, je me lance !

Feuilles de style utilisateurs ? Qu’est-ce que c’est ?

Avant de rentrer dans le vif du sujet, une petite explication peut être nécessaire si le sujet ne vous parle pas. Sinon, vous pouvez directement aller lire comment créer sa feuille de style utilisateur.

Les feuilles de styles (CSS) permettent de mettre en forme le contenu d’une page web. Elles servent à définir les couleurs, les typographies, les dimensions… bref tous les paramètres qui permettent de gérer l’affichage et de définir comment se présentera une page web.

Lorsqu’on parle de feuilles de styles, on pense généralement aux feuilles de styles auteur, c’est à dire les styles définis par le créateur du site web. C’est en effet son travail de définir comment s’affichera les pages de son site.
Mais le créateur de site web n’a pas tous les pouvoirs ! Il existe aussi d’autres feuilles de style : celles du navigateur et celles de l’utilisateur.

Les feuilles de styles navigateur appliquent un certain nombre de styles par défaut pour s’assurer d’un rendu minimal des pages web. En tant qu’utilisateur, on peut voir leurs effets sur les formulaires par exemple. Si vous avez déjà navigué avec différents navigateurs/systèmes d’exploitation, vous aurez peut-être constaté des traitements différents sur des éléments comme les cases à cocher, les boutons radio ou encore les listes déroulantes. On doit généralement ces effets aux feuilles de styles navigateurs.

Mais ce qui nous intéresse aujourd’hui est la dernière catégorie : la feuille de styles utilisateur !
Cette dernière permet à l’utilisateur final de définir ses propres styles, c’est un outil puissant en terme d’accessibilité. On peut effectivement, par exemple, définir une taille de texte élevée. Dans ce cas, la taille des textes sera appliquée à toutes les pages web et permettra à un utilisateur malvoyant de lire des textes qu’il n’aurait pas forcément pu lire avec la taille défini dans les styles auteur.
Dans la pratique, ce n’est pas toujours aussi simple et l’application des styles utilisateurs n’est possible qu’à condition que les styles auteur respectent un minimum les bonnes pratiques d’usage en CSS. Mais à partir du moment où c’est le cas, l’utilisateur a tous les pouvoir pour adapter une page web à sa convenance !

Voyons donc comment prendre le pouvoir en tant qu’utilisateur.

Créer sa feuille de style utilisateur

Chaque navigateur donne la possibilité d’ajouter des styles utilisateurs. Il suffit généralement d’éditer un fichier mis à disposition par défaut, ou d’en créer. Chaque navigateur ayant un mécanisme qui lui est propre, je vous détaille ci-dessous la démarche pour Firefox, Chrome, Internet Explorer, Safari et Opéra.

Dans Firefox

Pour appliquer ses styles personnalisés, il est nécessaire de les insérer dans un fichier nommé spécifiquement « userContent.css ». Il faut alors le copier dans le répertoire suivant, en fonction de votre OS

Sur Windows Vista / Windows 7

C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\ PROFILE.default\chrome\userContent.css

Sur Windows XP

C:\Documents and Settings\USERNAME\Application Data\Mozilla\Firefox\Profiles\default.PROFILE\chrome\userContent.css

Sur Ubuntu

home/.mozilla/firefox/.default/chrome/userContent.css

Note : lorsque vous créez ou modifiez ce fichier, il est nécessaire de redémarrer Firefox pour que les changements soient pris en compte.
Note 2 : ne disposant pas de toutes les configurations possibles, j’invite ceux qui le souhaitent à me transmettre les chemins des OS qui sont absents de cet article, notamment Windows 8 et Mac OSX.

MAJ : Il existe aussi le module complémentaire Stylish (lien externe) pour ajouter ses propres styles, sans avoir à parcourir les dossiers sur son poste.

Dans Chrome

À l’instar de Firefox, un fichier prédéfini permet d’ajouter ses propres styles dans Chrome. Il se nomme « Custom.css » et se trouve dans le répertoire suivant, en fonction de votre OS
Sur Windows Vista / Windows 7

C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Sur Windows XP

C:\Documents and Settings\USERNAME\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

MAJ : Il existe aussi l’extension Stylish (lien externe) pour ajouter ses propres styles, sans avoir à parcourir les dossiers sur son poste.

Dans Internet Explorer

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

Dans le menu « Outils », sélectionnez l’option « Options Internet » pour ouvrir la fenêtre des options.
Sur l’onglet « Général », cliquez sur le bouton « Accessibilité » qui se trouve en bas.
Cochez la case « Mettre les documents en forme en utilisant ma feuille de style ».
Le champ « Feuile de style » est rendu actif et vous pouvez spécifier le chemin de votre feuille de style personnalisée.

Dans Safari

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

Rendez-vous dans le menu « Préférences » (vous pouvez aussi utiliser le raccourci Ctrl + ,) pour ouvrir la fenêtre des Préférences.
Allez sur l’onglet « Avancées ».
Vous verrez une liste déroulante « Feuilles de style » avec la valeur « Aucune sélection » par défaut. À l’aide de cette liste, vous n’avez plus qu’à spécifier le chemin de votre feuille de style personnalisée.

Dans Opéra

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

Rendez-vous dans le menu « Réglages » puis « Préférences » (vous pouvez aussi utiliser le raccourci Ctrl + F12) pour ouvrir la fenêtre des Préférences.
Allez sur l’onglet « Avancé ».
Cliquez sur l’entrée « Contenu » puis le bouton « Options de style » pour ouvrir la fenêtre Options de style.
Dans le champ « Mon style », vous n’avez plus qu’à spécifier le chemin de votre feuille de style personnalisée.

Exemples de styles utilisateur pratiques

Vous savez désormais comment créer vos propres styles utilisateur. Retournons donc au point d’origine de cet article : comment masquer les publicités Facebook ?
Le code suivant permet donc de masquer les Suggestions de page, mais aussi les colonnes de publicité à droite des pages (sur la timeline, le profil et la messagerie) :

#pagelet_ego_pane_w,
#pagelet_side_ads,
#pagelet_ego_pane,
.uiStreamStoryAttachmentOnly {
	display: none;
}

Dans le même ordre d’idée, il est possible de masquer les tweets sponsorisés sur Twitter :

.promoted-tweet {display: none;}

Et voilà, bye bye les publicités Facebook (de visu en tout cas).

Conclusion

Avec cet article vous avez les armes pour créer vos propres styles utilisateurs. Après, il est vrai que ce n’est à la portée de tous car il est nécessaire d’avoir un minimum de connaissance en CSS. La portée de ce mécanisme est donc plutôt limitée mais il ne tient qu’à nous (ndla: aux personnes maîtrisant CSS) d’accompagner les personnes qui n’ont pas les connaissances suffisantes mais souhaiteraient profiter des bienfaits des feuilles de styles utilisateur. 🙂

Débuter avec Sass et Compass

2013-02-13T16:23:37+01:00

L’avantage d’une période sans emploi, c’est de pouvoir plonger la tête la première dans certains sujets sans craindre de manquer de temps. C’est ainsi que je décide cette semaine de me pencher sur Sass (lien externe) et Compass (lien externe). J’avais déjà pu appréhender le sujet grâce au livre CSS maintenables (lien externe), je n’avais plus qu’à me lancer.

Je commence à me mettre dedans et la première difficulté arrive : la ligne de commande. Outre le fait d’être totalement néophyte sur ce point, il y a quelques pré-requis techniques auxquels il faut répondre.

Paramétrer son poste

En premier lieu, il est nécessaire d’installer Ruby (lien externe) (pour ce qui est des machines Windows en tout cas) et d’effectuer quelques réglages.
Rien de compliqué : il suffit de télécharger la dernière version de Ruby (lien externe) et de lancer l’installation.

Lors de l’installation, il faut cocher la case « Add Ruby Executables to your PATH » lorsque l’option est proposée

Une fois Ruby installé, c’est au tour de Compass. Il faut alors ouvrir l’Invite de commande (sous Windows 7, on y accède depuis le menu Démarrer > Tous les programmes > Accessoires).
À l’ouverture de l’Invite de commande, la ligne commence d’office par quelque chose comme C:\Users\Nom>. Il suffit alors de saisir l’instruction suivante et valider avec la touche « Entrée » :

gem install compass

Note : si Sass peut aussi être installé à part, il n’y a pas besoin de s’en préoccuper car en installant Compass, Sass l’est aussi.

Installation de Compass

Voilà la partie facile de l’installation passée, il est temps de passer à la création et la configuration d’un projet.

Créer un projet : l’essai

C’est la partie la moins triviale, en particulier si on n’est pas du tout familier de la ligne de commande. Les documentations officielles ne sont pas toujours très claires pour un néophyte, je vais donc tenter de vulgariser le plus possible la description des opérations.

Une fois Compass installé, la création d’un projet se fait avec l’instruction suivante, à rentrer dans l’Invite de commande :

compass create nom-du-projet

Exposé comme ça, ça a l’air très simple. Mais pour quelqu’un qui n’y connaît rien comme moi, une foultitude de questions surgissent alors. Qu’est-ce que cette instruction génère concrètement ? Où est-ce que mon projet se trouve ?

Comme tout un chacun, j’ai effectivement une arborescence propre pour mes projets, dépendante de certaines conventions personnelles. L’une de mes conventions est notamment de ne conserver aucun fichier sur mon PC. Ce dernier étant doté d’un disque SSD de seulement 128 Go, les seules données présentes sur mon poste sont celles des programmes que j’installe et utilise. Toutes mes autres données vont tout droit sur un disque dur externe de travail.

Or, lorsque j’ai testé la création d’un projet « test » avec la commande compass create test, j’ai été bien désappointé de voir que cette commande me crée un répertoire « test » dans mon dossier utilisateur Windows (sur le disque local C:\Utilisateurs\nom-utilisateur). En complément, la création d’un nouveau projet s’accompagne par défaut de la création de différents répertoires et fichiers. On y trouve le répertoire « .sass-cache » et le fichier « config.rb » : le premier est un cache utile à la compilation des fichiers (lorsqu’on convertit le fichier .scss en fichier .css) ; le deuxième est le fichier de configuration du projet. Jusque là, rien d’anormal.

Projet par défaut Compass

Mais sont aussi créés deux répertoires « sass » et « stylesheets », respectivement pour accueillir les fichiers d’édition et les fichiers de sortie. Et dans ces répertoires sont encore créés des fichiers « ie », « print » et « screen » par défaut.
Moi qui souhaite utiliser Compass sur un projet existant, dont l’arborescence est déjà bien définie et pour lequel j’ai déjà des CSS existantes, me voilà bien embêté !
Mais fort de ce premier essai, je me retrousse donc les manches pour arriver à faire ce que je souhaite : utiliser Compass sur mon projet existant, en l’intégrant pleinement dans mon organisation habituelle.

Intégrer un projet Compass dans un projet existant

À force de recherches et d’expérimentations, je trouve donc le moyen de gérer les fichiers sur mon projet déjà présent.

La première étape consiste à cibler le répertoire de mon projet plutôt que mon dossier utilisateur Windows. Dans mon cas, il s’agit d’un disque dur externe dont la lettre du lecteur est « G ». Je commence donc par changer de lecteur dans l’Invite de commande :

G:

Note : bien évidemment, si vous travaillez sur le disque C, vous n’avez pas à faire cette première manipulation.

L’étape suivante consiste à cibler le répertoire de mon projet. Le mien se trouve dans un répertoire « projet » lui-même dans un répertoire « sites ». Pour le cibler, je rentre la commande suivante :

cd \sites\projet

Ici cd permet de cibler le répertoire.
Il est suivi par le chemin du-dit répertoire. Ce chemin, précédé d’un anti-slash (\), fait référence à la racine de mon lecteur. Notez que contrairement à une URL, l’ensemble des séparateurs de niveau sont des anti-slash.

À ce stade, je suis dans le répertoire de mon projet. Il ne me reste plus qu’à créer mon projet Compass en son sein. Ce que je fais avec l’instruction suivante :

compass create --bare --sass-dir "sass" --css-dir "css"

Décortiquons ça morceau par morceau :

compass create consiste donc à créer le projet Compass comme nous l’avons vu plus haut.
--bare évite la création des répertoires et fichiers par défaut. Cette instruction est donc essentielle dès lors qu’on a déjà une arborescence de fichiers et qu’on ne souhaite pas la voir polluée par des dossiers et fichiers générés par Compass.
--sass-dir définit le répertoire qui accueillera mes fichiers de travail .scss. Il est suivi de la valeur entre guillemets "sass". Cela veut dire qu’un dossier « sass » sera créé à la racine du répertoire de mon projet.
--css-dir définit le répertoire qui accueillera mes fichiers .css (qui seront compilés à partir des fichiers .scss). La valeur correspondante est "css". Un dossier « css » sera en conséquence créé à la racine de mon projet. Dans mon cas, un dossier « css » existe déjà. Dans ce cas de figure, l’instruction ne touche à rien et l’information est simplement renseignée dans le fichier de configuration.

Et voilà, en validant cette instruction, mon projet Compass est créé au sein de mon projet global ! Le fichier de config est créé à la racine de mon projet, tout comme les répertoires de travail. Si l’opération se déroule avec succès, vous obtenez un message de confirmation Congratulations! Your compass project has been created... dans l’Invite de commande.

Confirmation de création de projet Compass

Produire les fichiers CSS avec Compass

Maintenant que tout est prêt pour utiliser Sass et Compass sur mon projet ! Il n’y a plus qu’à créer un premier fichier .scss à compiler pour obtenir mon fichier .css, c’est lui qui sera mis en ligne.

Je crée donc mon fichier que je nomme « style.scss » et que je place dans le répertoire « sass » de mon projet. Pour le compiler et générer mon fichier CSS final, il faut repasser par la ligne de commande. Je saisis dans l’Invite de commande l’instruction suivante :

compass compile

Cette commande a pour effet de compiler l’ensemble des fichier .scss présents dans le répertoire « sass » et de générer leur équivalent .css dans le répertoire « css ».

Note : cette ligne de commande fonctionne si on est situé dans le répertoire de mon projet dans l’Invite de commande. Si on se situe pas au niveau du bon répertoire dans l’Invite de commande, il faut répéter l’opération pour cibler le répertoire du projet. En effet, il faut savoir qu’on est toujours situé dans le répertoire par défaut à l’ouverture de l’Invite. Donc dès lors que vous fermez l’Invite de commande, il faudra cibler à nouveau votre répertoire quand vous vous reconnectez, avant de pouvoir compiler vos fichiers.

Si tout se passe bien, un fichier « style.css » est créé dans mon répertoire « css ». Par défaut c’est en effet le nom du fichier .scss qui est utilisé.

Je sais désormais compiler mes fichiers Sass, mais l’opération est un peu lourde car la commande compile est manuelle. Il faut donc la saisir à chaque fois qu’on veut générer les fichiers CSS. Mais il existe une commande bien pratique qui permet d’automatiser la compilation. Au lieu de l’instruction précédente, il faut saisir :

compass watch

Cette commande a pour effet de compiler automatiquement les fichiers .scss dès lors qu’ils sont modifiés. Une fois qu’elle est saisie, on n’a plus qu’à se concentrer sur l’édition des fichiers Sass et le reste se fait tout seul. 🙂

Nous voilà enfin opérationnels !

Au boulot !

Avec cette introduction aux premiers pas avec Sass et Compass, vous êtes normalement parés à vous lancer !
Même si je n’ai pas encore eu le temps d’aller beaucoup plus loin, je pense que cette première étape de paramétrage est la plus compliquée à passer. J’espère donc pouvoir aider quelques frileux à se lancer et à découvrir cet outil. 🙂

Bien sûr, cet article reste une introduction très vulgarisée.
Même si je n’ai pas pu tester toutes les possibilités de Compass, je sais qu’il existe pas mal d’autres paramètres qu’on peut prendre en compte, ne serait-ce qu’au moment de la création du projet.
Cette introduction a donc avant tout pour objectif de démystifier l’utilisation de la ligne de commande auprès des néophytes et de tenter d’expliquer la logique de base de l’outil.

Comme c’est mon premier article sur ce blog, j’invite aussi les lecteurs qui auront été jusqu’au bout à me faire part de leurs critiques sur le fond comme sur la forme. J’essaierai d’améliorer les choses en conséquence pour les futures publications. 🙂

Hello World !

2013-02-08T19:55:04+01:00

Bienvenue sur mon nouveau blog !

Il y a bien longtemps, j’avais un blog. À l’époque, il était propulsé par Dotclear (lien externe) (bien avant la version 2) et j’avais l’habitude d’y poster de courtes critiques sur des films, jeux ou même sites web que j’appréciais. J’y postais aussi directement des vidéos, clips ou autres médias pour lesquels j’avais pu avoir un coup de cœur. J’étais alors encore étudiant et j’avais du temps pour ça.
Est venue la vie professionnelle puis j’ai eu beaucoup de mal à tenir mon blog à jour jusqu’à l’abandonner puis le faire disparaître de mon site.

Ceux avec qui j’ai pu échanger ces derniers mois savent qu’un changement de vie personnel a directement affecté ma vie professionnelle : j’ai emménagé en Suisse avec ma conjointe au mois de novembre. J’ai donc lâché mon poste de chef de projet chez Carrefour Banque (lien externe) ainsi que mon statut de webdesigner freelance pour partir à l’aventure dans l’air frais des montagnes.
À l’heure où j’écris ces lignes je suis en quête de job. Après avoir soufflé 2 petits mois, je me replonge dans le bain en commençant par ravaler la façade de mon site et mon CV. Et ce ravalement passe aussi par la création de ce blog.

Pourquoi un nouveau blog ?

Pour me remettre gentiment dans le bain déjà.
L’écriture est un bon moyen de formaliser ses idées et de définir et concrétiser les choses. Ces quelques mois de repos m’ont donné l’occasion de pas mal réfléchir et de faire pousser des choses dans mon esprit. Mais ça reste embryonnaire et l’écriture m’aidera à clarifier tout ça.

Mais aussi parce que ces dernières années ont été très riches en découvertes de toute sorte, professionnelles et personnelles, et pour beaucoup avant tout humaines.
Ça a commencé par la formation Expert en Évaluation Accessiweb (lien externe) que j’ai passée en 2010 sur la version 2.1 du référentiel. Puis la découverte d’évènements comme W3Café (lien externe), Paris Web (lien externe), les Apéroweb (lien externe)… Chacun de ces évènements a été l’occasion de découvrir et d’apprendre des tas de choses, mais aussi et surtout de rencontrer des personnes. Chaque rencontre donnant lieu à des occasions de partage comme le web permet de le faire au quotidien.

C’est donc avec l’envie de partager que j’ai décidé de lancer ce nouveau blog.
Je n’ai pas encore de ligne éditoriale particulière et je parlerai donc sans doute d’un peu de tout. En tout cas de tous les sujets qui m’inspirent. Peut-être qu’avec le temps une ligne directrice se dessinera, mais pour le moment je vais laisser libre court à mon inspiration.
Je n’ai aucune idée (ni objectif d’ailleurs) de la fréquence à laquelle j’écrirai. J’espère juste que ce blog ne tombera pas à l’abandon aussi vite qu’il sera apparu, mais seul l’avenir me le dira.

Dans tous les cas, je remercie déjà mes premiers lecteurs et j’espère avoir le plaisir de vous revoir très prochainement pour de nouvelles lectures. 🙂

Paris Web 2012, la qualité y était !

2012-11-14T07:49:30+01:00

Comme chaque année depuis 7 ans se sont tenues début octobre les 2 journées de conférences et la journée d’atelier de Paris Web, la grand-messe annuelle du design web, de l’accessibilité et bien sûr, de la qualité !

A titre personnel, c’était ma deuxième participation à l’évènement. Et ce fut une nouvelle fois l’occasion de prendre un bain de qualité. Voici donc un compte-rendu de ce qui m’a particulièrement parlé parmi toutes les conférences que j’ai pu suivre. 🙂

Le web évolue, les métiers aussi

Face à l’évolution exponentielle des technologies, réaliser un projet web devient de plus en plus complexe. Que ça soit pour les professionnels du web comme pour les clients. En réponse à cette problématique, Florian Hamel a expliqué son poste de creative technologist.

Sous ce nom barbare se cache un métier très proche et complémentaire du poste de responsable qualité. À l’instar du qualiticien web, le creative technologist trouve sa place à la confluence des métiers classiques du web : entre la création, la technologie et le marketing.

Mais si le qualiticien définit des critères de suivi et effectue les analyses qui permettront aux équipes opérationnelles d’améliorer continuellement leurs réalisations par l’intégration de bonnes pratiques, le creative technologist a davantage comme rôle de tester et éprouver des solutions technologiques. Il accompagne ainsi concrètement les équipes – en interne comme chez le client – au moment de la réalisation des projets en aidant à choisir la meilleure solution au regard des besoins et contraintes créatives, techniques et marketings.

Florian m’a donné l’occasion de découvrir un métier qui m’était inconnu jusqu’alors. Il s’inscrit dans la maturation de nos métiers. Nous pouvons tous le constater, longtemps restés très opérationnels voire simples exécutants, les professionnels du web développent et font valoir leur expertise au sein des entreprises pour prendre de la hauteur. C’est de là que le qualiticien web provient.

Gestion de la qualité ouverte

L’un des moments forts pour la qualité web sur ces 3 jours a été l’intervention d’Élie Sloïm et Pascal Romain sur l’Open Quality Management.

Comme beaucoup de nos lecteurs doivent le penser, du moins je l’espère, l’ouverture exceptionnelle rendue possible grâce à Internet fait partie pour moi de l’un des fondements du web. On le voit d’année en année, les modèles ouverts s’étendent et se diffusent à tous les domaines du numériques et plus encore. De l’open source à l’open data, de nombreux exemples ont pu démontrer les bienfaits de l’ouverture.

La question à laquelle Élie et Pascal ont alors tenté de répondre : et si l’ouverture était un levier d’amélioration de la qualité ? (NDLA : Pascal Romain a participé à l’ouverture des données de la région Aquitaine. À ce titre, la présentation et mon compte-rendu sont donc surtout focalisés sur une démarche open data)

Pascal l’a très bien souligné lors de la présentation, la gestion d’une démarche d’ouverture des données nécessite un minimum de moyen. Ouvrir ses données, c’est bien. Mais cela demande effectivement un minimum d’investissement dans la récolte et l’analyse de données. Mais aussi, les données ouvertes doivent répondre à des besoins : au même titre que n’importe quel contenu ou service web, les données ouvertes sont une matière à destination d’utilisateurs. La démarche d’ouverture doit donc être suivie dans le temps, analysée et améliorée en continu. On ne peut ici s’empêcher de faire un parallèle avec le management de la qualité.

Le parallèle ne s’arrête pas là. En effet l’ouverture des données doit souvent faire face à des freins qu’un responsable qualité peut rencontrer lorsqu’il met en place une démarche qualité. Notamment la résistance au changement : parce que les deux démarches sont récentes et demandent aux organismes de modifier leur organisation. Qu’il s’agisse d’ouverture de données ou de gestion de la qualité, l’ensemble des intervenants doit s’ouvrir aux autres intervenants, internes mais aussi externes (particulièrement dans l’open data). Alors que les organisations sont souvent historiquement cloisonnées.

Bref, forts de leurs expériences dans leurs domaines respectifs – la gestion de la qualité pour Élie, l’ouverture des données pour Romain, ils proposent une vision commune de ces démarches.

Là où la gestion de la qualité classique consiste à mettre en place une charte qualité, définir des processus… la gestion de la qualité ouverte irait plus loin : publier les savoir-faire, valoriser l’expertise individuelle – pour mieux valoriser l’expertise de l’organisation, rendre public les audits et indicateurs de qualité… Non content de donner une plus grande légitimité à l’organisation, une telle démarche permettrait au tout-venant de participer à l’amélioration continue des services, contenus, processus… à l’aide de remontées de la vraie vie.

Sorti de Paris Web, cette vision peut paraître idyllique, mais je suis tenté de dire qu’il ne tient qu’à nous de la réaliser. 😉

Nous sommes tous responsables

De ces 3 journées à Paris Web, je retiens un intérêt toujours croissant pour défendre l’intérêt des utilisateurs tout en répondant aux objectifs des entreprises – ce sont quand même elles qui nous permettent de gagner notre vie. 😉

Je crois que la notion forte de cette cuvée est que « nous sommes responsables de ce que nous mettons au monde » (1).

La mutation d’Internet n’a jamais été aussi frénétique et il est souvent remonté pendant les conférences – mais aussi pendant les pauses lors des discussions – l’importance capitale que nous, professionnels du web, soyons vigilants quant aux choix que nous faisons au quotidien.

Cette notion de responsabilité est une des notions qui m’ont amenées à m’intéresser à la gestion de la qualité web. Car le web est un médium où nos réalisations ont un impact direct sur l’utilisateur final. Si nous ne faisons pas l’effort de réfléchir à ce que nous réalisons, à l’utilisation des services que nous créons, aux impacts que nos choix peuvent avoir sur les utilisateurs… alors nous prenons le risque de louper tous les coches : qu’il s’agisse de répondre aux besoins des utilisateurs mais aussi aux objectifs de l’entreprise pour laquelle nous travaillons.

Conclusion

Vous l’aurez compris, qualiticiens ou pas, nous sommes responsables de la qualité des services en ligne que nous créons. Ce message est très largement diffusé pendant les 3 journées de Paris Web chaque année, et il ne tient qu’à nous de le diffuser tous les autres jours de l’année ! 😀

Note :
(1) Libre traduction de la citation de Mike Monteiro : « You are responsible for what you put into the world » – retour.

Crédits photo :

Creative Technologist : extrait de la présentation Creative Technologist, Web Evangelist, Developer Advocate !?! (PDF – 18Mo) par Florian Hamel.
Gestion de la qualité ouverte : extrait de la présentation Open quality management : vers le tout ouvert ! (PDF – 3,68Mo) par Élie Sloïm et Pascal Romain.
« You are responsable for what you put into the world » par romytetue.