acti, agence web lyon

Le Blog

acti écoute - Marie (2) : la playlist "ich liebe Deutschland"

Par Marie, le vendredi 13 Jan 2017 dans Inside acti

Si vous avez déjà eu l’occasion de passer dans nos locaux, vous aurez sûrement remarqué qu’une large majorité des têtes qui dépassent des bureaux sont aussi surmontées d’écouteurs : nous écoutons énormément de musique. Chaque semaine, un membre de l’équipe vous partage sa playlist en 10 morceaux. acti écoute : Marie, intégratrice.

Playlist-Marie-H-2

Pourquoi cette playlist :

Parce que j’ai une affection particulière pour Berlin, le pays et la langue allemande en général ! Et je me dis que ça peut faire changer de point de vue celles et ceux qui ont une vision réductrice de la langue et de la musique allemande…

17 Hippies : Adieu
Ce groupe propose une musique qui flirte avec les Balkans, ici sous forme de mélodie un peu plus tranquille.

Wir Sind Helden : Von Hier An Blind
De la pop malicieuse par ces « héros » (Helden).

Modeselektor feat. Miss Platnum : Berlin
Je ne pouvais pas ne pas mettre un peu de musique électronique dans cette playlist, avec cette collaboration du duo issu de l’underground berlinois.

Rammstein : Sonne
Un hymne au soleil par le célébrissime groupe de metal, avec une petite voix lyrique pour adoucir le tout.

Electrelane : In Berlin
Ce groupe féminin de rock anglais nous propose un petit morceau de Berlin en hiver, l’obscurité interminable et le froid, dehors.

Kurt Weill : Seeräuber-Jenny
Difficile de choisir dans l’oeuvre prolifique de ce compositeur du début XXème, alors voici un extrait de l’Opéra de Quat’Sous : la chanson de Jenny la pirate.

Bodi Bill : Tip Toe
Ce groupe berlinois mélange influences techno et indie pop, pour un résultat efficace.

Mia. : Was es ist
Basée en partie sur un poème d’Erich Fried, une déclaration d’amour à l’Allemagne qui fut très controversée à sa sortie.

Sophie Hunger : Walzer Für Niemand
La chanteuse suisse polyglotte offre un bel écrin à la langue allemande avec ses mélodies pop-folk.

Fettes Brot (mit Modeselektor) : Bettina, zieh dir bitte etwas an
Et pour finir, un peu d’animation avec ce hip-hop humoristique !

Quand écoutes-tu cette playlist :

Quand je suis prise de nostalgie pour l’Allemagne… ou simplement mélangée à d’autres titres éclectiques.

Sur quels projets je travaille en ce moment :

Je travaille sur l’accessibilité d’un site de consultants qui accompagnent le secteur public et les entreprises sur les mutations de l’action publique, des organisations et des territoires.

Commenter cet article Voir les commentaires (0)

Paris Web et séminaire Accessiweb 2016

Par Marie, le vendredi 21 Oct 2016 dans Actualité digitale

Paris Web : On a tous un rôle à jouer

Paris Web : On a tous un rôle à jouer

Après un avant-goût de Paris Web il y a 3 ans, j’ai eu la chance cette année de participer à l’événement en entier. Et comme se déroulait la même semaine le 23ème séminaire Accessiweb, voici mon retour sur ces 4 jours riches en découvertes et en échanges !

Vous y découvrirez, entre autres, comment rendre les contenus sur Twitter accessibles, un formulaire pour calculer le salaire d’une nourrice, ou comment un site peut être consulté sans connexion internet…

Sommaire :

 

Un web inclusif, prendre soin des utilisateurs/rices

Autant annoncer tout de suite la couleur : la baseline de Paris Web est « web design, qualité et accessibilité », et ce dernier domaine étant la thématique d’Accessiweb, les deux événements se sont particulièrement fait écho.
L’idée que j’y ai vu en fil rouge est de tenir compte des multiples contextes des internautes, que ces contextes soient culturels, personnels, techniques…

On a donc parlé internationalisation, par exemple, avec la conférence d’Aurélie Guillaume, 15 minutes très denses pour évoquer les gros impacts d’un passage d’un site à l’international.

Eh oui, la gestion des différentes langues, déjà complexe en tant que telle, n’est qu’une partie des points à avoir en tête : les champs de formulaire, l’orientation et la taille du texte, les dates, les prix, les symboliques de design mais aussi les lois en vigueur peuvent varier d’un pays à un autre !

1 250,42€ : 1,250.42 € ou € 1.250,42 ou $ 1.392,90 ou $ 21097,013 (ARS) ou 144 131 ¥ ? TVA, douane ?
Extrait de la présentation

Et n’oublions pas que les services tiers dont nous avons l’habitude n’existent pas partout, et que cela peut nécessiter de gros ajustements de fonctionnalités parfois principales (ex : Facebook Connect, Google Maps… qui ne peuvent pas marcher en Chine).

Tout cela résulte en une multitude de points plus ou moins grands à traiter le plus en amont possible, et idéalement à avoir en tête, même lorsque le projet n’a pas (encore) vocation à être internationalisé.

Voir la présentation « Lancer son site à l’international facile ? Oui, si l’on pense à tout ! »

Le sujet a trouvé un prolongement lors d’une discussion informelle sur « comment rendre le web plus inclusif au quotidien », où ont été évoquées ces situations où l’internaute peut se sentir non-accueilli(e) voire rejeté(e) : non-accessibilité, mais aussi formulaires qui n’acceptent pas les informations (correctes) car trop restrictifs, langage genré inadéquat, représentations visuelles limitées…

A été discutée l’idée d’un web « glocal » : global dans sa dimension internationale, mais en même temps local dans son adaptation aux différentes cultures et usages, voire personnalisable par chacun(e).

La discussion a également dérivé sur la problématique de la diversité au sein des conférences et du métier en général, car c’est en faisant se rencontrer différentes cultures, personnalités et expériences, qu’on peut plus facilement questionner ses propres biais et concevoir des projets réellement « accueillants » pour toutes les personnes.

Le concept des informelles est que chaque participant(e) à Paris Web peut proposer sur place un sujet de discussion, qui sera éventuellement retenu par le staff et planifié dans la journée.
C’est ici la seule à laquelle j’ai participé, mais j’ai trouvé que ce format ajoutait un espace d’échanges intéressant en parallèle des conférences, et se prêtait bien à ce type de discussion.

Goulven Champenois, qui était présent, s’est motivé pour retranscrire quelques points l’après-midi même dans un lightning talk (présentation chronométrée de 4 minutes) : « Pour un web inclusif ».

On a tous... un prénom et un nom de plus d'un caractère et lié à notre genre affiché, une adresse fixe, un portable, etc : faux !
Extrait de la présentation

En parlant de lightning talks et d’expérience utilisateur, ce fut mémorable d’écouter les coups de gueule de Vincent Aniort et Sylvie Duchateau sur l’accessibilité.

Le premier nous a listé les quelques points basiques à mettre en place pour l’accessibilité des sites :

  • alternatives textuelles d’images et vidéos
  • utiliser des composants natifs
  • structurer correctement le contenu
  • utiliser des contrastes suffisants
  • prendre en compte la navigation au clavier.

Si tous les sites implémentaient ces points, ce serait déjà un énorme pas pour les internautes… Alors Vincent n’a pas lésiné sur les moyens :

Outre les accroches sans pincettes, Vincent expliquait tous les bienfaits de ces mesures… pour toute personne consultant les sites, en fait : malentendant(e) ou sans casque sous la main, en environnement trop lumineux ou malvoyant(e), geek full-clavier ou utilisateur/rice de lecteur d’écran, etc.
En gros, travailler sur l’accessibilité, c’est travailler sur l’ergonomie et l’utilisabilité !

Voir la présentation « Faites-vous du bien et prenez soin de vos utilisateurs »

Et avec Sylvie, nous avons eu droit au point de vue de l’utilisatrice en colère. Aveugle et utilisant un lecteur d’écran pour naviguer sur internet et travailler au quotidien, elle est revenue sur les points qui la bloquent très régulièrement et sont pourtant corrigeables très simplement :

  • renseigner l’attribut lang sur la balise HTML (au risque de ne rien comprendre à la synthèse vocale qui lit du français comme si c’était de l’anglais)
  • les alternatives textuelles, toujours elles, surtout pour les images utilisées en lien ou bouton (« bouton, bouton, bouton… et comment je fais moi pour payer ? »)
  • la structuration du contenu, pour naviguer rapidement de titre en titre et ainsi « lire en diagonale »
  • relier les champs de formulaire à leurs étiquettes, pour savoir quel contenu y renseigner
  • des alternatives aux captchas, qui embêtent d’ailleurs tout le monde.

Car dans le cas contraire, la réaction est simple : « c’est fini, je boycotte ce site ! ».

6ème frustration : captchas. Veuillez taper les caractères afffichés à l'écran. Sélectionnez les images montrant une maison.
© Yann Kozon

Intégrer l’accessibilité dans ses process

Après tout ça, si vous n’êtes pas convaincus et vous demandez encore pourquoi faire des sites accessibles, Nicolas Hoffmann tente une approche audacieuse : l’accessibilité décomplexée.

Son hypothèse : faites de l’accessibilité d’abord pour vous-même, elle vous le rendra bien !
Il a ainsi présenté toutes les compétences qu’il a pu acquérir ou approfondir via la création de ses plugins Javascript accessibles.

J’ai beaucoup apprécié aussi sa remise en question du discours tenu sur l’accessibilité : au lieu de focaliser sur tout ce qui ne marche pas, arriver à communiquer de manière positive, donner envie, et surtout, au lieu d’exiger la perfection au risque de décourager, privilégier plutôt l’amélioration continue.

Voir la présentation « L’accessibilité décomplexée : ce qu’elle peut faire pour vous »

À côté de cette approche très personnelle du sujet, le séminaire Accessiweb proposait de se pencher sur l’industrialisation de l’accessibilité, notamment au sein des grands groupes : comment appréhender l’accessibilité numérique de manière globale, lorsqu’on a un parc de centaines voire milliers d’applications ou services ?

C’est ce dont différents intervenants ont tenté de rendre compte : Sandrine Alèbe pour Pôle Emploi, Vincent Aniort (à nouveau) pour Orange, Éric Maillard pour le Groupe La Poste.

J’ai trouvé ces présentations complémentaires, dans le sens où les approches et objectifs initiaux étaient différents pour chaque entité, mais les mises en places en interne présentaient de nombreux points communs :

  • équipe de plusieurs personnes
  • travail en transversalité avec d’autres services (notamment le service handicap qui gère entre autres l’aménagement des postes de travail)
  • engagement de la direction indispensable
  • priorisation et travail au fur et à mesure (l’étendue est trop vaste pour être abordée dans sa globalité dès le début)
  • communication, sensibilisation et formation à un maximum de publics différents en interne, sous des formes variées (vidéos, présentiel, e-learning, gamification…)
  • centralisation de ressources et outils techniques sur le sujet, voire création en interne
  • rédaction et diffusion de guides pratiques, checklists, outils d’accompagnement
  • automatisation de tout ce qui peut l’être, et souhait de rendre autonome les différents intervenant(e)s, pour focaliser l’énergie des expert(e)s sur les cas complexes
  • intégration le plus en amont possible, et à tous les échelons des process existants (au même niveau que la sécurité, par exemple) pour éviter d’en faire une démarche spécifique qui pourrait être mise de côté
  • tests utilisateurs

En plus de tout ça, j’ai trouvé intéressant le rôle important que l’open source joue, notamment chez Orange avec leur framework Boosted, basé sur Bootstrap : collaboration, utilisation massive et support en continu, en plus de la visibilité à l’externe.

Voir la présentation « Accessibilité numérique et industrialisation chez Orange »
Voir la présentation « Mise en œuvre de l’accessibilité, retour d’expérience avec La Poste » (merci à Access42 pour l’hébergement)

Nous avons aussi découvert avec intérêt le retour d’expérience d’Anne Cavalier, de la DILA (Direction de l’Information Légale et Administrative), sur la refonte de service-public.fr.

J’ai noté plusieurs idées à retenir :

  • méthode agile beaucoup plus adaptée que le traditionnel cycle en V
  • équipe d’expert(e)s pas forcément dédiée à plein temps au projet, mais présente physiquement dans l’open-space, pour être disponible aux questions, et pouvoir rebondir plus facilement sur les échanges
  • présence systématique aux réunions d’étapes importantes et « rituels » agiles (mélée, pokérisation, démo…) pour suivre, conseiller et lever des alertes
  • sensibilisation systématique des nouveaux arrivants sur le projet
  • revue d’accessibilité intégrée à la revue de code
  • démo d’accessibilité intégrée à chaque démo de fin d’itération
  • corrections en duo : pair-coding, qui permet une perméabilité des compétences
  • ateliers dédiés pour décortiquer les erreurs à répétition et ainsi « mettre à niveau » toute l’équipe
  • accompagnement externe à intervalles réguliers, qui peut servir d’arbitrage.
Questions, celles qui font plaisir : On n'y connait rien, pouvez-vous nous aider ? Quelle méthodologie sera le mieux adaptée ? Où peut-on trouver des documentations ? Y aura-t-il un expert sur le plateau ? Peut-on organiser une présentation pour les développeurs ?
© Ariane Andurand

On retrouvait donc l’idée que pour être prise en compte avec succès, l’accessibilité devait être intégrée le plus en amont possible et traitée au fil de l’eau, avec la même exigence que d’autres contraintes telles que la sécurité, la performance, ou le respect d’une charte imposée.

Voir la présentation « Accessibilité et industrialisation – Retour d’expérience service-public.fr »

Léonie Watson est également intervenue pour présenter les grandes lignes de la « stratégie de l’accessibilité », qui reprenaient la majeure partie des points évoqués ci-dessus sur l’intégration de l’accessibilité numérique au sein des organisations, en y ajoutant une partie rarement évoquée : la gestion de contenus accessibles à l’externe, notamment sur les réseaux sociaux.

Ainsi, une des recommandations est de garder simplicité et homogénéité dans les messages, qui permettra facilement d’identifier l’entité qui communique et de construire une relation de confiance.
L’idéal est également de doser soigneusement les textes et les images, pour permettre une identification aussi rapide pour ceux qui lisent peu que pour ceux qui ne peuvent pas voir les images.

À propos des images, il faut savoir que Facebook intègre désormais un outil automatique pour générer les alternatives textuelles : grâce à la reconnaissance visuelle de plus en plus poussée, cet outil liste les éléments qu’il détecte dans l’image. C’est un premier pas qu’il faut déjà saluer, mais le mieux reste encore de décrire l’image dans le texte de légende, en attendant d’avoir la possibilité de renseigner soi-même l’alternative.
Sur Twitter, en revanche, c’est déjà possible et il est vivement conseillé de le faire : il faut auparavant activer la fonctionnalité depuis les paramètres d’accessibilité de son profil.

Un autre point sur Twitter : penser à utiliser des majuscules dans les #HashTags pour différencier les mots et les rendre ainsi intelligibles à la vocalisation par les lecteurs d’écran.

Voir la présentation « Accessibility strategy, project management and content delivery »

Léonie a également abordé YouTube, mais c’est surtout John Foliot qui a fait le tour de l’accessibilité des vidéos, en particulier avec l’élément HTML5 <video>.

Pour rappel, les éléments obligatoires sont :

  • les sous-titres, qui soient synchronisés avec le déroulement de la vidéo (élément <track>)
  • l’audio-description (ou une vidéo alternative qui l’intègre)
  • des contrôles activables indépendamment du device utilisé (attribut « controls » pour les contrôles natifs, accessibles par défaut, ou alors développer ses propres contrôles, en s’assurant qu’ils soient accessibles)
  • la transcription textuelle accompagnante, qui reprend tout le déroulé de la vidéo (bénéfique aussi pour les moteurs de recherche).

Un point dont il faut tenir compte, pour les contrôles et les sous-titres, c’est que ces derniers prennent traditionnellement le tiers de la hauteur, en bas de la vidéo : il faut donc éviter que l’emplacement des contrôles vienne en gêner la visibilité.

Pour finir, concernant les sous-titres, un peu de vocabulaire anglais, là ou le français ne dispose que d’un seul mot :

  • captions désigne le texte reprenant les informations sonores de la vidéo : dialogues mais aussi bruits ou musiques nécessaires à la compréhension globale, dans la même langue que la vidéo
  • tandis que subtitles désigne spécifiquement les sous-titres de traduction (dans une langue différente), et peuvent donc cohabiter avec les captions
  • par ailleurs on parle de closed captions (CC) lorsqu’ils sont incrustés directement dans la vidéo
  • tandis que les open captions sont, eux activables ou désactivables par l’internaute (fonctionnalité proposée par YouTube, par exemple).

 

Conception et technique

Pour revenir à Paris Web, cela a été l’occasion de découvrir des méthodologies de conception, notamment avec le retour d’expérience de Marie-Amélie Cotillon sur un design sprint organisé avec des militaires.

Tout d’abord, un design sprint, qu’est-ce-que c’est ?
Il s’agit d’une méthode diffusée par Google, avec pour principe de fonctionner en phases très courtes, pour s’assurer le plus tôt possible de la viabilité du service ou produit, avant de se lancer dans une longue phase de production.
Je le vois un peu comme une application de la méthode agile à la partie conception et design.

Le contexte était le suivant : dans le cadre d’un projet global d’amélioration des relations entre les militaires et les services administratifs qui leur sont dédiés, il s’agissait de travailler sur un premier parcours, la préparation au départ en opération extérieure (OPEX) en individuel.
En effet, il s’agit d’un processus qui se répète souvent dans la vie des militaires : après candidature et réception d’un ordre de mission, un ensemble de formalités administratives diverses sont à effectuer avant le départ, mais les militaires doivent se débrouiller sans accompagnement, et sans communication entre les différents services concernés, ce qui aboutit généralement à l’impossibilité de prise en charge totale de ces tâches.

Demander, c'est facile... Copinage, formation, bricolage, manque d'infos, procédures... Obtenir, c'est dur !
Extrait de la présentation, © Florent Courtaigne

Des études utilisateurs avaient déjà été faites pour défricher la complexité, et le but était maintenant de produire un outil pour répondre à ce besoin, en le construisant en collaboration avec les utilisateurs finaux : les militaires eux-mêmes.
Ce sont donc 5 jours très intenses qu’ont passé l’ensemble des participants au sprint : militaires qui avaient fait une OPEX dans les 6 derniers mois, travailleurs des services concernés, décisionnaires, et bien sûr designers et consultants de l’agence.

Chaque jour correspondait à une étape :

  1. accueillir tout le monde, prendre connaissance du projet et des différentes parties prenantes
  2. rechercher des idées, échanger dans toutes les directions possibles
  3. décider et définir l’idée choisie dans le détail
  4. réaliser le prototype
  5. tester, observer, analyser pour les prochaines étapes.

Le fait que tous les acteurs concernés soient présents permettait de prendre des décisions rapides, en même temps que d’avoir une vue globale des différents parcours utilisateurs.

Au total, une trentaine de wireframes ont été produits, et quelques maquettes graphiques, qui étaient accessibles sur un écran tactile et testables au fur et à mesure.
Ce sprint a ainsi permis d’avoir rapidement un prototype validé, pour continuer ensuite sur l’approfondissement du design, puis sur des développements, avec des déploiements progressifs sur plusieurs bases militaires.
Le projet est donc encore en cours, et s’enrichit des retours d’utilisation après chaque déploiement.

Pour conclure, ce que Marie-Amélie nous rappelait, c’est que faire un design sprint nécessitait un énorme travail de préparation en amont, et n’était productif que s’il était appuyé par des décisionnaires impliqués côté client.

Voir la présentation « Quand les militaires se prennent au jeu du design sprint »

Par ailleurs, certaines conférences nous invitaient à nous questionner sur nos responsabilités en tant que concepteurs et conceptrices de sites web.

Ce fut le cas par exemple de Thibault Jouannic qui nous a présenté la problématique de la gestion des données personnelles sur le web. On parle ici bien sûr des coordonnées, mais aussi de données indirectes telles que les pages visitées et les interactions réalisées.
Selon les personnes, certaines de ces informations peuvent être très sensibles : une adresse rendue publique, la visite de certains sites peuvent avoir des impacts énormes selon le contexte (loi du pays, profession à risque…). On ne connait pas le contexte des utilisateurs/rices, et ce contexte peut changer dans le temps, donc il faut partir du principe que toutes les données sont sensibles.

- Et bien Lucien ! L'historique de ton navigateur, c'est pas joli joli dis donc... - Arrête ! Rends-moi mon iPhone j'te dis !
Extrait de la présentation

Après avoir expliqué comment ces données sont actuellement exploitées et monétisées, Thibault nous a expliqué les différents moyens utilisés pour récupérer ces informations, et surtout quelles stratégies nous pouvons mettre en place. En effet, lors de la réalisation de sites, nous pouvons limiter au maximum les intrusions dans la vie privée de nos utilisateurs/rices en arrêtant de collaborer avec les GAFA (Google, Apple, Facebook, Amazon et consorts), notamment :

  • ne pas utiliser les widgets de partage (qui en plus ralentissent les pages) mais de simples liens qui fonctionnent tout aussi bien
  • auto-héberger les polices de caractères plutôt que de faire les inclusions de Google Fonts
  • utiliser OpenStreetMap à la place de Google Maps
  • héberger soi-même les plugins plutôt que passer par des CDNs de ces géants

Il faut aussi s’assurer de ne pas être soi-même une menace, en intégrant le respect de la vie privée par défaut dans la conception :

  • ne recueillir que les données qui sont strictement indispensables, en se posant la question du niveau de précision nécessaire
  • toujours demander l’autorisation
  • concevoir le stockage de manière à éviter le danger si une des bases est compromises, avec un point d’attention particulier sur les mots de passe
  • utiliser le chiffrement avec HTTPS
  • réinternaliser les fonctionnalités plutôt que les laisser gérées par des tiers (ex : commentaires par Disqus)
  • ne pas bloquer les internautes qui utilisent Tor.

En revanche, pour les sites qui affichent de la publicité, il est impossible pour l’instant de faire grand-chose, sachant que ces dernières incluent et sont basées sur des systèmes de trackers.

Voir la présentation « Désintoxication au web sous surveillance »

Dans le côté responsabilisation, il en est une autre à laquelle nous sommes encore peu sensibilisés : la responsabilité environnementale. C’est Frédéric Bordage qui a présenté ce sujet, en expliquant le principe d’éco-conception.

En effet, on considère que l’empreinte environnementale actuelle de l’internet mondial correspond à environ 2 fois celle d’un pays comme la France, et cela grossit en permanence.
L’idée est donc d’intégrer cette perspective dans la conception des sites, en visant la moindre consommation de ressources. Cette démarche va d’ailleurs généralement aussi dans le sens de la qualité, de la performance et d’une meilleure expérience utilisateur.
Il faut donc réduire la puissance informatique nécessaire au fonctionnement, sachant que la partie la plus « coûteuse » du web est plutôt du côté utilisateur (ressources à télécharger, mémoire) que du côté des data-centers auxquels on pense en premier.
Pour cela, il faut se concentrer sur les fonctionnalités principales, en adoptant une démarche d’efficience et de frugalité : réduire tout le superflu.

Avec quelques retours d’expérience, Frédéric nous montrait que les actions ayant le plus d’impact consistaient en la compression/optimisation des images, le remplacement de certaines par du CSS, la suppression d’animations, mais aussi externaliser, épurer, valider et compresser le code, ou éviter les allers-retours avec le serveur.
Il recommandait également la conception mobile-first, qui oblige à se concentrer sur l’essentiel.
Enfin, il faut savoir que cette démarche fait déjà l’objet d’une norme ISO, ainsi que d’un référentiel de bonnes pratiques.

Voir la présentation « Eco-conception : mon site web au régime »

Côté technique, c’est le concept de Progressive Web Apps qui a été présenté par Hubert Sablonnière.
Basé sur des technologies existantes, ce n’est donc pas une nouvelle technologie en tant que telle : l’idée est de faire se rapprocher les sites de l’expérience des applications natives, avoir les avantages de celles-ci (réactivité, ne dépend pas de la connexion internet) sans les inconvénients (nécessité d’installation même pour utiliser une seule fois, développements différents selon les OS).

La technologie principale sur laquelle ce concept se base est le service worker : codé en Javascript, il intercepte les requêtes vers le serveur et peut, à la place, décider de renvoyer des informations stockées dans le cache navigateur.
Cela ne fonctionne qu’avec HTTPS, pour éviter justement les attaques par injections à l’occasion de l’interception des requêtes.

Les grands principes des progressive web apps sont donc les suivants :

  • linkable : pas besoin de l’installer, accès via une URL (permet les utilisations « one-shot »)
  • responsive : s’adapte au device utilisé
  • safe : sécurisé car basé sur HTTPS
  • connectivity independancy : fonctionne en mode hors ligne, grâce aux service workers (pour les pages déjà visitées)
  • fresh : reste à jour en gérant des chargements en arrière-plan, voire en forçant les mises à jour
  • app-like interaction : gestion de la structure principale (conteneur, autrement appelé shell) indépendamment du contenu, ce qui permet son chargement rapide
  • re-engageable : ré-engager l’utilisateur, par exemple en utilisant des notifications push, disponibles maintenant sur le web également
  • discoverable : c’est un site web donc il est présent dans les moteurs de recherche, et on peut renseigner son fichier « manifeste » pour aider Google dans son indexation
  • installable : on peut ajouter un site (une URL et son icône) à l’écran d’accueil de son smartphone, comme si c’était une application
  • progressive : doit pouvoir fonctionner même si les service workers ne sont pas supportés sur le navigateur utilisé.

La conclusion de cette présentation, c’était que c’est un concept très prometteur, qu’il va falloir encore expérimenter dessus, pour en ressortir des bonnes pratiques, et aller plus loin encore dans l’expérience utilisateur.

Voir la transcription textuelle de la présentation « Progressive Web Apps : le futur du web arrive »

Nous avons également eu droit à une présentation sur la blockchain, par François Zaninotto.

Paris Web : La blockchain, quand l'individu sert au collectif... malgré lui - François Zaninotto
© Yann Kozon

Difficile de résumer en quelques mots ce mécanisme plutôt complexe, alors que François a pris le temps (et l’humour) nécessaire pour nous l’expliquer pas-à-pas…
L’idée principale est de s’affranchir des intermédiaires (autrement appelés autorités centrales, telles que les banques), et de les remplacer par un programme qui encadrerait les échanges (autrement appelées transactions).

Les bases sont les suivantes :

  • peer-to-peer : chaque ordinateur possède une copie de l’information, en l’occurrence, la liste des transactions effectuées
  • cryptographie asymétrique : système de clé privée associée à une clé publique, qui permettent de « signer » une transaction
  • proof-of-work : le nom blockchain s’explique littéralement par une « chaîne de blocs », chaque bloc contenant des transactions, et la création d’un bloc nécessite un gros travail de serveurs, d’où le principe de « preuve de travail ».

Pour les usages, le plus connu est le Bitcoin, monnaie virtuelle permettant d’effectuer des transactions en ligne ou pour des objets réels.
Parmi les applications envisagées, on a la signature de contrats qui seraient ainsi infalsifiables, la gestion programmée de propriété, des paris en ligne, des sociétés sans dirigeant, du stockage crypté sur le cloud

Après avoir testé le développement d’une application avec son équipe, François arrivait au constat que c’est une technologie qui n’est pas encore très mature, reste lente (de 10 secondes à 10 minutes pour valider une transaction), et peut être très coûteuse (littéralement mais aussi en empreinte environnementale).
Par ailleurs, toute l’idée est de faire d’un programme une autorité, or ce programme reste écrit par des humains, et peut toujours être hacké, donc n’est pas d’une sécurité infaillible.

Dernier point technique, la journée d’ateliers du samedi a été l’occasion de se frotter à Git, grâce à Agnès Haasser et Guillaume Turri.
Malgré une salle surpeuplée et un léger flou organisationnel, chaque participant(e) a pu se frotter aux commandes connues ou moins connues de cet outil de versioning (gestion d’un historique – versions – de développement).

Les explications étaient plutôt techniques, mais j’ai l’impression que l’atelier a permis à celles et ceux qui étaient déjà connaisseurs d’approfondir certaines pratiques, tandis que les autres ont pu tester les fonctionnements plus basiques, en même temps que profiter de l’expérience de leurs voisin(e)s.

Voir la présentation « Git is choupi »

 

Et pour finir…

J’ai une mention spéciale pour la présentation d’Agnès Haasser (à nouveau) sur comment elle a dépassé son syndrome de l’imposteur, pour faire sa première conférence et surtout son premier projet open-source sur Github.

Le syndrôme de l'imposteur est lorsque les compétences perçues sont inférieures aux compétences réelles. L'inverse est le syndrôme du petit péteux : c'est la droite de la lucidité qui les sépare.
Extrait de la présentation

Ce projet est parti d’un besoin personnel : calculer le salaire de la nourrice. Un tableau Excel au départ, qui d’améliorations personnelles en échanges avec d’autres parents, est devenu un mini-site sous forme de formulaire.
Je vous invite donc à aller consulter le Pajomatic, ça pourrait vous servir, et vous pouvez même proposer ou apporter des améliorations !

Voir la présentation « Libérée, délivrée… du syndrome de l’imposteur »

Autre mention spéciale, l’atelier animé par Corinne Schillinger et Laurence Vagner, sur toutes sortes d’astuces pour affronter le monde professionnel. De l’organisation du temps et du travail à la gestion des clients ou des collègues, c’était l’occasion de découvrir et partager des bonnes pratiques du quotidien acquises après quelques années d’expérience.

Voir la présentation « Trucs & astuces pour débuter sereinement »

Enfin, mention particulière à toute l’équipe de bénévoles de Paris Web, qui se démènent chaque année pour faire de l’événement un succès.
Je parlais plus haut du fait d’être inclusif : ces conférences sont celles qui mettent la barre le plus haut, avec la vélotypie (transcription textuelle en direct) et la traduction simultanée en langue des signes, en même temps qu’une attention particulière à tous les détails lors du déroulement de ces 3 jours.
Un grand merci à eux donc, et peut-être à l’année prochaine !

Commenter cet article Voir les commentaires (1)

Un pas de plus pour la qualité web avec la certification Opquast

Par Marie, le jeudi 9 Juin 2016 dans Inside acti

Depuis tout récemment, je suis « Opquast certified » : mais qu’est-ce-que ça veut dire ?

Laissez-moi vous parler du projet Opquast : Open Quality Standards !

 

Opquast Certified

 

Au départ était… le livre : « Qualité web, les bonnes pratiques pour améliorer vos sites« .

Conçu comme un référentiel et rédigé par un groupe de professionnels du web, il aborde, de manière transversale, les différents points-clés de la qualité d’un site. En effet, de la conception au référencement, du design à la performance, chaque étape de production d’un site joue un rôle sur sa qualité finale.

Le point central, c’est la prise en compte du contexte de l’utilisateur final : la personne naviguant sur le site va-t-elle trouver ce qu’elle est venue chercher, lui donne-t-on accès aux contenus et services dans les meilleures conditions possibles, instaure-t-on une relation de confiance avec elle ?

C’est en effet tout cela qui pourra l’inciter à réitérer l’expérience, passer une commande, recommander l’entreprise ou ses services… en bref, répondre aux objectifs de l’entité déployant le site, mais aussi à ceux de l’utilisateur final, et ainsi faire fructifier la relation entre les deux parties.

C’est donc assez naturellement que les bonnes pratiques se sont élargies jusqu’à devenir un écosystème de la qualité web, Opquast : checklists, outils d’audit et de vérification… et une certification.

plateforme

Ainsi, Opquast certified atteste de la maîtrise du sujet chez les professionnels, avec différents niveaux selon le score obtenu à l’examen.

Si vous êtes curieux, je vous invite à faire leur mini-quiz en 10 questions : cela vous donnera un aperçu des différentes thématiques abordées, et pourrait vous donner envie de faire la formation à votre tour ?

Pour ma part, j’ai trouvé qu’en tant qu’intégratrice et formée à l’accessibilité, je partais avec un solide bagage, à la fois technique et lié à l’expérience utilisateur.

Cependant, il me semble pertinent de justement sensibiliser les personnes qui ont encore peu abordé ces domaines : faire circuler les bonnes pratiques, et que tout intervenant puisse être ainsi proactif sur la qualité à chaque étape d’un projet.

Se concentrer sur son expertise métier mais avoir aussi les clés de la vision globale : c’est cette transversalité qui est nécessaire pour une approche pragmatique de la qualité des sites web !

Commenter cet article Voir les commentaires (0)

BlendWebMix 2015 en quelques conférences

Par Marie, le vendredi 13 Nov 2015 dans Création de site web

Suite à l’article de Laura, à mon tour de vous présenter ce qui m’a intéressée à BlendWebMix !

BlendWebMix, c’est le gros événement web de Lyon depuis quelques années déjà : 2 jours de conférences web tout azimut, mixant les différents domaines (design, technique, business, recherche), ainsi que des animations en parallèle, comme le startup contest et des challenges type hackathon.

"Love what you do"

 

C’était ma première participation cette année, et voici une sélection des conférences qui m’ont le plus marquée :

Côté technologie

La sécurité des sites web (Non, ce n’est pas seulement mettre Drupal à jour.)

Stéphane Bortzmeyer nous présentait un apercu des attaques et failles de sécurité les plus courantes, mais aussi les points auxquels on pense moins, comme le piratage des noms de domaine.
En conclusion : un site n’est jamais protégé une fois pour toute, la sécurité se pense et se travaille en permanence, en s’appuyant sur une bonne communication entre les différents intervenants, et notamment avec l’hébergeur.
Voir les slides

Deep-dive dans ES6

Christophe Porteneuve a assuré le show, en enchaînant sur les nouveautés d’EcmaScript 6 (le petit nom de Javascript) : intense, et à creuser !
Voir les slides

Flexrox

La propriété CSS « flexbox » permet de faire des miracles en positionnement : une présentation didactique par Raphaël Goetter, agrémentée de citations décalées (et de dessins de sa fille).
Voir les slides

Replay sur la refonte front-end de 6play.fr

Kenny Dits revenait sur les mois de projet avec son équipe front, en passant par les différentes solutions techniques envisagées, les outils de monitoring, les décisions prises pour la performance et la qualité… Il est toujours très intéressant de prendre connaissance des méthodes de travail des autres, les obstacles rencontrés comme les réussites !
Voir les slides

Côté design et expérience utilisateur

Stratégies d’adaptation mobile : ergonomie, UX et performance en milieu périlleux

Stéphanie Walter et Jean-Pierre Vincent faisaient le tour des différentes « tactiques » d’adaptation des sites au support mobile ainsi que des bonnes pratiques de conception (indice : penser performance et tactile), pour finir sur les capacités spécifiques des appareils dont on peut déjà tirer parti. Un état des lieux rondement mené et donnant des pistes concrètes de mise en application !
Voir les slides

Designing for a billion people

Faire des tests sur 1% des utilisateurs de Facebook, c’est déjà tester sur 10 millions de personnes… Outre ces chiffres qui remettent en perspective, Christophe Tauziet nous donnait un apercu du processus de design au sein de l’entreprise : comprendre > explorer > itérer, avec des exemples de fonctionnalités et leurs évolutions, des techniques de tests utilisateurs, et les différentes spécificités liées à un public d’un milliard de personnes, aux multiples cultures.

Côté « prise de recul »

L’analyse sociologique des algorithmes du Web : pour quoi faire ?

Ce fut ma conférence « bonne surprise », pour être allée voir ailleurs que mes thèmes de prédilection !
Dominique Cardon présentait ce qu’il définit comme les 4 familles de métriques dans le web, selon comment les « calculateurs » (= moteurs de recherche, ou algorithmes) se positionnent par rapport aux données.
Malgré le vocabulaire parfois un peu pointu, l’ensemble était très intéressant, riche et prêtant à réflexion sur les usages, comment se construit la visibilité des contenus mais aussi la catégorisation des individus, et nos liens avec les machines et les données.
Lire une interview de Dominique Cardon sur ce sujet

BlendWebMix 2015 - le plateau

Pas de surprise si toutes ces conférences étaient des formats longs (1h) : j’ai moins accroché sur les formats de 30 min, qui me laissaient généralement sur ma faim, et pâtissaient du timing serré.
Cependant, cela m’a quand même permis d’aborder différents frameworks JS, quelques bonnes pratiques de développement, et d’entendre parler qualité et amélioration progressive.

En résumé, ces 2 jours ont été plutôt riches d’apprentissage et d’échanges, et même si je n’ai pas trop creusé le côté start-up / business, j’ai bien apprécié le mélange des différentes disciplines, et l’énergie positive qui se dégage de ce type d’événements !

Commenter cet article Voir les commentaires (0)

Retour sur la KiwiParty 2015

Par Marie, le vendredi 10 Juil 2015 dans Inside acti

La Kiwiparty, c’est l’occasion de faire le plein d’énergie pour les futurs projets !

Organisé à Strasbourg par une agence locale, Alsacréations, cet événement gratuit rassemble des professionnels du web pour une journée de conférences sur la conception, la technique et les bonnes pratiques web.

acti-kiwiparty-02

Pour ma deuxième participation consécutive, j’ai pu à nouveau apprécier la variété des sujets proposés, ainsi que la bonne ambiance qui règne tout au long de la journée : une équipe d’organisateurs aux petits soins, des orateurs accessibles, et des participants ouverts aux échanges et discussions.

lire la suite

Commenter cet article Voir les commentaires (0)

Une introduction à l'accessibilité du web

Par Marie, le mardi 14 Avr 2015 dans Création de site web

Savez-vous ce qu’est l’accessibilité du web ?
Si oui, c’est une bonne nouvelle ! Et dans le cas contraire, voici de quoi l’apprivoiser…

3588354009_9c85f3a58a_z

En quoi ça consiste ?

En étant très succinct, on peut dire qu’un site accessible est un site dont l’ensemble des contenus mis à disposition est consultable par tous les internautes.

Pour comprendre ce que cela implique, voyons plus en détail les 4 grands principes de l’accessibilité du web :

  • perceptible : le contenu doit être correctement restitué pour pouvoir être vu, lu ou entendu;
  • utilisable : les différentes actions doivent être réalisables peu importe les moyens de consultation, sans limite de temps, et sans perturbations;
  • compréhensible : le contenu doit être intelligible, les interactions cohérentes et prévisibles, et l’utilisateur guidé pour éviter des erreurs;
  • robuste : le contenu doit être compatible avec les différentes technologies de consultation, actuelles et futures.

Ainsi, le contenu et la navigation doivent être accessibles à l’utilisateur, indépendamment des moyens dont celui-ci dispose.

Qui est concerné ?

L’accessibilité est importante en premier lieu pour les personnes handicapées, puisque ce sont elles qui rencontrent le plus d’obstacles à la navigation.

On classe généralement les handicaps en 4 catégories : auditif, cognitif/neurologique, moteur, et visuel.
Les difficultés rencontrées lors de la navigation sont différentes selon chaque catégorie, mais aussi selon le niveau de handicap, et les technologies d’assistance utilisées.

En effet, il existe des outils qui facilitent la vie des personnes handicapées sur l’outil informatique. Pas forcément créés pour cet usage à l’origine, ils sont néanmoins facilitateurs d’accès.
Sans être exhaustif, on peut citer :

  • les lecteurs d’écrans, logiciels restituant (lisant) le contenu des pages via une synthèse vocale
  • la navigation au clavier
  • les dispositifs de pointage autres que la souris : joystick, trackball, headstick, …
  • les outils de personnalisation de l’affichage : taille de texte, couleurs, espacement, …
  • les systèmes d’aide contextuels : correcteur orthographique, favoris, historique, …

Mais tout cela ne suffit pas, si les sites ne prennent pas en compte le large éventail d’utilisateurs et de technologies de consultation.

Ainsi, une page trop longue pourra être un obstacle pour une personne aux troubles de la concentration, mais également pour un malentendant qui maîtrise moins bien la lecture, ou un handicapé moteur qui navigue au clavier.
Autre exemple, le mouvement d’un carrousel automatique pourra perturber fortement la lecture d’un handicapé cognitif, mais également empêcher un handicapé moteur de sélectionner l’élément qui l’y intéresse, faute de temps.

Il est difficile de s’appuyer sur des chiffres pour estimer le nombre de « victimes principales de l’inaccessibilité » : en effet, selon les niveaux de handicaps pris en compte, l’écart peut être très grand… Sans oublier qu’on peut aussi inclure toutes les personnes confrontées à une palette très variable de ces handicaps : les personnes âgées, par exemple.

Par ailleurs, il ne faut pas oublier les « handicaps contextuels » que tout le monde est amené à rencontrer (manque de luminosité, environnement bruyant, fatigue…) ainsi que le large éventail de périphériques utilisables pour consulter des sites internet.

Au final, l’accessibilité concerne tout un chacun : comme je le soulignais déjà dans ce compte-rendu, prendre en compte l’accessibilité, c’est faire attention à de nombreux points qui ont un impact pour tous.

Ainsi, sous-titrer une vidéo de conférence ou en donner une transcription textuelle, cela ne profitera pas seulement aux malvoyants ou malentendants, mais également à tous ceux qui ne voudront pas mettre un casque ou simplement préfèreront lire en diagonale pour se concentrer sur les parties qui les intéressent.
De même, garder une cohérence de présentation pour les éléments de navigation entre toutes les pages d’un site, ça n’est pas uniquement prendre en compte les utilisateurs avec des troubles de la compréhension ou ceux qui naviguent au clavier, mais aussi répondre à un besoin de logique pour tous.
Enfin, développer un site en conformité avec les standards et spécifications internationales, c’est faire en sorte que le contenu soit correctement restitué, et la consultation possible autant avec une souris qu’un clavier, un écran tactile ou tout autre dispositif de pointage actuel ou à venir.

Quel cadre pour l’accessibilité du web ?

L’accessibilité constitue un droit fondamental, que ce soit sur le web ou ailleurs, évoqué dans la Convention Relative aux Droits des Personnes Handicapées de 2006 : l’Organisation des Nations Unies y inclut le « refus d’aménagement raisonnable » dans les formes de discriminations fondées sur le handicap.

En France, on se réfère à la loi du 11 février 2005 pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées.
Cette loi contient, entre autres, l’obligation d’accessibilité physique pour des lieux, mais également, dans l’article 47, « l’accessibilité des services de communication publique en ligne » :

L’accessibilité des services de communication publique en ligne concerne l’accès à tout type d’information sous forme numérique quels que soient le moyen d’accès, les contenus et le mode de consultation. Les recommandations internationales pour l’accessibilité de l’Internet doivent être appliquées pour les services de communication publique en ligne.

De quelles recommandations parle-t-on ?

Les 4 principes cités plus haut ne sortent pas de nulle part.
En effet, l’accessibilité du web a été définie en tant que telle par la WAI (Web Accessibility Initiative), que l’on pourrait traduire imparfaitement par « Initiative pour l’accessibilité du web ».
Ce groupe fait partie du W3C (World Wide Web Consortium), qui est une communauté internationale se chargeant de définir et faire évoluer les standards du web.

Depuis sa création, la WAI a produit un ensemble de recommandations pour l’accessibilité des contenus web, reconnues comme norme internationale ISO depuis 2012.
Ce document regroupe un grand nombre d’indications techniques très détaillées pour créer du contenu web accessible.

Au niveau français, il existe 2 référentiels principaux basés sur ces recommandations internationales. Ils offrent une grille d’analyse regroupée par thématiques, et permettent d’évaluer de manière pragmatique l’accessibilité d’un site, critère par critère.
Le premier est le référentiel Accessiweb, dont la dernière version prend en compte les standards HTML5 les plus récents, et le second est le RGAA, Référentiel Général pour l’Accessibilité des Administrations, créé suite à la loi de 2005.
Conçus chacun de leur côté, ils vont bientôt ne former qu’un seul référentiel : le RGAA 3.0, basé sur la dernière version d’Accessiweb. Ce nouveau référentiel est actuellement disponible dans une version ouverte à commentaires publics, en attendant sa publication officielle.

EDIT : le référentiel RGAA 3.0 est officiel depuis fin avril 2015.

Comment rendre un site accessible ?

Une réponse courte serait : faire un audit du site par un expert du référentiel, et corriger ensuite ce qu’il y a à corriger. Cependant, cela serait très réducteur, car selon l’état du projet, la mise en œuvre peut être très complexe et avoir un impact non-négligeable.
Mais surtout, on passerait alors à côté de la problématique fondamentale : plus que rendre un site accessible, ce qui importe c’est que cette accessibilité soit maintenue sur la durée.

En effet, l’accessibilité web est intrinsèquement liée à divers aspects de la conception et de la maintenance d’un site : rédaction, design, code… Tous ces éléments ont leur rôle à jouer pour que l’ensemble des contenus soit accessible.
Pour être viable, il importe donc que l’accessibilité fasse partie du cœur des priorités tout au long de la vie d’un projet web, que ce soit lors de sa création, de l’ajout de contenu, ou des évolutions.

Pour aller plus loin

L’accessibilité du web est un sujet vaste et complexe, que je ne fais ici qu’effleurer.

Voici donc un échantillon de liens autour de la question :

À propos de moi

Intégratrice multimedia et Experte Accessiweb en Évaluation, je travaille actuellement sur le site d’un éditeur de logiciels pour l’hôtellerie et la restauration, et sur un tableau de bord de performance mécanique en ligne.

Crédits photo : Lachlan Hardy

Commenter cet article Voir les commentaires (2)

acti écoute - Marie

Par Marie, le vendredi 3 Avr 2015 dans Inside acti

Si vous avez déjà eu l’occasion de passer dans nos locaux, vous aurez sûrement remarqué qu’une large majorité des têtes qui dépassent des bureaux sont aussi surmontées d’écouteurs : nous écoutons énormément de musique. Chaque semaine, un membre de l’équipe vous partage sa playlist en 10 morceaux. acti écoute : Marie, intégratrice.

Playlist covers de Marie

Pourquoi cette playlist :

Parce que j’aime les reprises (covers), qui sont en fait des 2-en-1, et j’admire les artistes qui arrivent à tordre les chansons originales pour en révéler d’autres facettes.

Cat Power : (I Can’t Get No) Satisfaction
Issu de « The Covers Record », composé uniquement de reprises, Chan Marshall alias Cat Power va jusqu’à ignorer le refrain de ce titre archi-connu des Rolling Stones.

The Slits : I Heard It Through The Grapevine
Le groove de Marvin Gaye devient un joyeux bordel…

The Mamas & the Papas : Twist And Shout
Ce titre a une longue histoire de reprises, mais au rythme des Beatles ou The Who, je préfère cette balade toute en légèreté.

Le Tigre : I’m So Excited
Cette fois ça bouge, avec la remise au goût du jour du morceau des Pointer Sisters.

Dorothy Ashby : House of the Rising Sun
Un petit ovni que cette reprise à la harpe d’une chanson folk internationale.

Lisa Li-Lund : Cry Me a River  
Le tube de Justin Timberlake, déjà une reprise, se retrouve ici en version low-fi.

Lesbians on Ecstasy : Mortified
Un étrange hymne à la fête : « We Like To Move it » !

My Brightest Diamond : Tainted Love 
C’est surtout la voix de Shara Worden que j’aime sur ce titre rendu célèbre par, entre autres, Depeche Mode. Dans un autre style, vous pouvez chercher la reprise de Marylin Manson…

CocoRosie : Turn Me On
Avec ce duo atypique, la chanson de Kevin Lyttle prend des airs fièvreux et tordus .

Nouvelle Vague : Fade To Grey
Cette playlist n’aurait pas pu être complète sans ce groupe, dont tout le concept est de faire des reprises à la mode bossa nova ou new wave (d’où le nom). Ici c’est la pop synthétique de Visage qui revient, dépouillée, accompagnée d’un accordéon dans le métro…

Quand écoutes-tu cette playlist :

Plutôt accompagnée d’un thé et un bon bouquin, mais ça n’empêche pas de sautiller sur certains morceaux !

Sur quels projets je travaille en ce moment :

Je travaille actuellement sur le site d’un éditeur de logiciels pour l’hôtellerie et la restauration, et sur un tableau de bord de performance mécanique en ligne : un défi technique intéressant au niveau de la visualisation de données.

Commenter cet article Voir les commentaires (0)

KiwiParty : le plein de vitamines web

Par Marie, le lundi 7 Juil 2014 dans Inside acti

Ce jeudi 12 juin, c’est au beau milieu d’une grève SNCF que Vân et moi nous mettions en route pour la KiwiParty…

Kiwi-quoi ?

La Kiwiparty est un événement gratuit d’une journée, panel de conférences abordant des sujets variés sur la conception, le design et le développement web (accessibilité, standards, bonnes pratiques, ergonomie…).
Cet événement a été lancé à Strasbourg il y a quelques années par Alsacréations, qui est à la fois une agence locale et une belle communauté d’apprentissage web.
Comme le nom le laisse deviner, l’esprit est très détendu et bon enfant. Outre les conférences, quelques animations viennent égayer la journée et provoquer les rencontres entre les participants.
Et avec un succès grandissant chaque année, les vagues de pré-inscriptions sont devenues une compétition de rapidité : de quelques secondes à quelques minutes avant d’être déjà complètes !

lire la suite

Commenter cet article Voir les commentaires (0)

Accessibilité : de l'utilisabilité à ARIA

Par Marie, le lundi 7 Juil 2014 dans Création de site web

Cet article fait partie de la série KiwiParty : le plein de vitamines web.

Accessibilité = universalité d’accès

Laura Kalbag (@laurakalbag) inaugure la journée avec une plénière sur l’accessibilité. Comme elle le dit à juste titre, on ne parle pas ici de fauteuils roulants ou d’aveugles, mais bien « d’universalité d’accès ». C’est-à-dire que toute personne puisse accéder au contenu d’un site, quelles que soient son contexte et ses capacités de vision, d’écoute, de déplacement, et de compréhension.

Peu importe que l’on soit « designer » ou « codeur » (ou les deux) : chaque personne travaillant sur le projet prend des décisions sur la façon de fonctionner et donc sur l’utilisabilité du produit final.
En dehors de l’empathie pure et simple, cela aura aussi des retombées économiques positives : chaque amélioration d’accessibilité est un pas de plus vers les utilisateurs, une facilitation d’usage et donc de conversion.

lire la suite

Commenter cet article Voir les commentaires (0)

BEM et line-height : le CSS pointu

Par Marie, le lundi 7 Juil 2014 dans Création de site web

Cet article fait partie de la série KiwiParty : le plein de vitamines web.

Sur des petits formats de 30min, ces deux conférences creusaient des directions spécifiques au CSS.

BEM : Block Element Modifier

Thomas Zilliox (@iamtzi) nous présentait cette convention de nommage de classes.
Le but est d’avoir des classes autonomes (qui ne s’empiètent pas les unes les autres) et explicites (pour un humain qui les lirait et les modifierait).
Ce n’est pas un standard, mais plutôt une logique d’organisation, qui cherche la plus grande efficacité et maintenabilité du code.

lire la suite

Commenter cet article Voir les commentaires (0)

Test unitaire ? Mock ? TDD ? Kezako ? (En finir avec les régressions) - Atelier Paris Web 2013

Par Marie, le lundi 21 Oct 2013 dans Création de site web

Cet article fait partie de la série sur les ateliers Paris Web 2013.

Cet atelier était présenté par David Wursteisen (@dwursteisen).

Le test est ici mis en avant comme, entre autres, un « garde-fou » lors de la modification d’un code. L’exemple le plus parlant est la reprise d’un code pré-existant : on se retrouve parfois à se perdre dans une structure hasardeuse voire désorganisée pour modifier le petit bout de fonctionnalité souhaité, en priant très fort pour que ca n’ait pas d' »effets indésirables » sur d’autres morceaux de l’application… L’absence de documentation/commentaires, et l’impossibilité de communiquer avec les créateurs initiaux rendent alors l’exercice périlleux.
Le processus de fonctionnement indiqué est le suivant :
– écriture de tests
– modification du code
– lancement de l’application et exécution des fonctionnalités
– vérification des résultats de tests
– si pas OK, on reprend le cycle à la modification du code.

Cette base posée, on rentre alors assez vite dans l’exercice : refactoriser et compléter le code d’une petite application javascript, en se servant de QUnit pour tester.
Cela permet de voir la mise en place rapide de tests simples : QUnit permet de comparer les valeurs retournées après action avec les valeurs attendues, et met en évidence les différences de résultat.
Tout ceci est bien complété par Blanket.js, qui indique le « taux de couverture » du code : il surligne les parties du code qui ne sont pas couvertes par les tests écrits.
Attention, une couverture à 100% ne veut pas dire qu’on peut être sûr à 100% que nos tests recouvrent tous les cas de figure, mais cela donne déjà une très bonne base. L’idée est donc de mettre en place au départ une série de tests qui couvre le maximum du code.
Après chaque modification, la couverture du test peut baisser : cela peut vouloir dire que le code non-couvert est maintenant inutile, mais aussi que ce cas n’est plus couvert par le test… Il faut donc jauger prudemment les indications.

Mon impression globale de cet atelier est une petite déception, car je m’attendais au moins à une explication détaillée des termes du titre, et j’avais imaginé qu’on rentrerait plus dans le processus d’écriture de tests.
Au final, on a surtout travaillé sur le refactoring de code, sans s’appesantir sur pourquoi on avait choisi de mettre en place ces tests-là en particulier, ou étudier les différentes possiblités à ce sujet.
Ca a été néanmoins une bonne petite introduction aux tests javascripts, et donne l’impression que c’est surtout destiné aux applications « lourdes » en interactions et manipulations de données. Un équivalent PHP serait donc probablement le plus indiqué dans notre cas.

A lire aussi :

Première participation aux ateliers Paris Web

Et si on enrichissait nos frameworks CSS ?

Rendre son application HTML5 accessible en 4 étapes

Projets responsive : mise en commun de retours d’expérience

Commenter cet article Voir les commentaires (0)

Projets responsive : mise en commun de retours d'expérience - Atelier Paris Web 2013

Par Marie, le lundi 21 Oct 2013 dans Création de site web

Cet article fait partie de la série sur les ateliers Paris Web 2013.

Jérémie Patonnier (@JeremiePat) et Rudy Rigot (@rudyrigot) sont co-auteurs du livre « Projet Responsive Web Design » chez Eyrolles.
L’idée de cet atelier était que tout le monde profite des retours d’expérience de tous sur les projets responsive : alors que le concept est maintenant considéré comme « incontournable », il reste de nombreux points en suspens et on trouve au final peu d’échos sur les obstacles rencontrés (et franchis) à chaque étape des projets menés.

On commence donc par l’amont du projet : définir les besoins du client.
Responsive ou site/application dédiée ? Quelle audience (existante, souhaitée…) ? Quelles fonctionnalités ? Et… quel budget ? On s’accorde sur une estimation 30% de budget supplémentaire si le responsive est prévu dès le départ, et un pourcentage indéfini si cela arrive après la conception.
Il faut également s’engager contractuellement sur les compatibilités visées. Quels seront les efforts de test ? Navigateurs, technologies, devices ? Le client fournira-t-il certains devices ? Les concepts d’amélioration progressive ou dégradation gracieuse ont-ils été suffisamment explicités ?

Conception et design : la méthode agile est privilégiée, car itérer souvent permet de vérifier constamment que l’on est en phase. Procéder par petites phases de validations pour être sûr d’avancer dans la bonne direction, et éviter la montagne de documents à étudier et valider. Le rôle du chef de projet est alors primordial pour éviter les débordements.
Axure, Sketch, sont privilégiés pour les zonings et le prototypage. On préfère employer les termes « grand », « moyen » et « petit » plutôt que « tablette » ou « mobile », afin d’abstraire encore plus l’idée du device employé et ne pas se figer sur les résolutions.
Les designers et intégrateurs doivent faire partie intégrante du process et échanger constamment, afin d’éviter les surprises graphiques ou technologiques plus tard dans le projet.
Pas forcément de prototypage HTML, car cela requiert du temps d’intégrateur, et produit souvent du code « prêt à jeter ». Mais il reste indispensable de présenter les zonings ou maquettes sur les écrans de tailles visées, afin d’avoir un rendu au plus proche de l’utilisation finale.
Outils pour les designers : Skala ou Adobe Muse, pour envoyer des captures d’écran sur différents devices.
Dernier rappel : si le périmètre du projet bouge, alors le budget va également bouger… Le plus important restera toujours la communication.

Côté intégration et développement, on s’accorde sur le fait que les images restent LE point problématique, sans solution parfaite. On conseille l’utilisation, partout où c’est possible, du format SVG ( via Illustrator, Inkscape, Fireworks…).
Les points de rupture ne doivent pas dépendre des résolutions « standard » mais être au service de la présentation du contenu. Il y a d’ailleurs souvent plutôt des points de rupture majeurs et mineurs, toutes les zones de la page ne changent pas au même « moment ».
Mobile-first ou non : « ça dépend » toujours des contraintes du projet. Il faut également différencier la conception mobile-first de l’intégration mobile-first : la première permet de focaliser sur les fonctionnalités primordiales pour élargir l’expérience au fur et à mesure, tandis que la seconde est plus un choix de quelle taille d’écran on prend comme repère par défaut, comment sera le site si le navigateur ne reconnait pas les media-queries ?
On revient toujours à « où on a mis le curseur », qu’est-ce-qui a été défini comme vital même pour les anciens navigateurs, qu’est-ce-qu’est prêt à accepter le client.

La dernière phase sera la recette, avec tout le périmètre de test défini en amont, et les surprises sur des devices exotiques. Pour chaque cas il faudra estimer la prise en charge et éventuellement faire des avenants.
On souligne une initiative intéressante, Open Device Lab, pour mutualiser les périphériques de test entre agences et professionnels.

Vous pouvez consulter le « bloc-note » de l’atelier en ligne.

Cet atelier aura été pour moi le plus riche de la journée, puisque centré sur les échanges avec les participants, et mes prises de parole m’ont d’ailleurs donné la chance d’y gagner le livre « Projet Responsive Web Design ».

A lire aussi :

Première participation aux ateliers Paris Web

Test unitaire ? Mock ? TDD ? Kezako ? (En finir avec les régressions)

Et si on enrichissait nos frameworks CSS ?

Rendre son application HTML5 accessible en 4 étapes

Commenter cet article Voir les commentaires (2)

Rendre son application HTML5 accessible en 4 étapes - Atelier Paris Web 2013

Par Marie, le lundi 21 Oct 2013 dans Création de site web

Cet article fait partie de la série sur les ateliers Paris Web 2013.

Jean-Pierre Villain (@villainjp) est un des principaux rédacteurs du référentiel Accessiweb.
Son atelier proposait de rendre une petite application de messagerie totalement accessible en quelques étapes.

Le processus est le suivant : à chaque étape, le test d’utilisation de base de l’application était effectué, via la navigation au clavier, et le lecteur d’écran NVDA.
On considère comme fonctionnalités de base :
– écrire un message
– lire la liste des messages
– répondre à un message
– supprimer un message.

Le point de départ était vraiment le désert de l’accessibilité : une page constituée uniquement de div, aucune structure (paragraphes, titres, listes…), aucun lien ou bouton (les interactions s’effectuent en javascript).
Il est intéressant de voir alors à quel point l’utilisation du lecteur d’écran relève du parcours du combattant : l’utilisateur aura beau s’obstiner à chercher « quelque chose qui ressemble à écrire un message », cela ne donnera aucun résultat ni via la navigation, ni les éléments structurants, ni les boutons ou champs de formulaire, ni même la recherche en plein texte.

Ajouter une structure HTML de base rend déjà le plus gros de l’application accessible : il devient possible de naviguer dans les listes de titres, les paragraphes, et trouver le bouton qui lance la création de message.

Il s’agit ensuite d’ajouter de la structuration supplémentaire via les éléments HTML5 : les éléments sectionnants (section, article,…) ou regroupants (header, footer).
C’est l’occasion de rappeler que toute section devrait normalement avoir un titre hn, que nav concerne les navigations dans une liste de pages (pagination incluse), ou qu’un article est à envisager comme un bloc de contenu que l’on peut reprendre à l’extérieur, et pas forcément comme un article de journal.

La dernière étape, qui me semblait la plus intéressante mais qui n’a pu être très développée faute de temps, concerne l’ajout des attributs aria.
Prenons l’exemple de la fenêtre modale : on lui attribue un role= »dialogue » (ou alertdialog), aria-labelledby= »Nouveau gazouilli dialogue », et on gère le tabindex pour qu’elle prenne le focus lorsqu’elle apparait, et qu’après sa fermeture, le focus revienne là où on était.
On aborde aussi rapidement l’utilisation des liveregion, qui permettent au lecteur d’écran de vocaliser les changements qui se produisent dans une zone de la page, par exemple l’apparition d’un nouveau message dans la liste.

Il faudrait donc plonger encore un peu dans les différents attributs aria pour en faire un tour complet, mais l’essentiel était posé et montrait qu’une accessibilité basique est très facilement mise en place.
C’était également l’occasion de différencier 2 sortes de tests d’accessibilité :
– les tests de restitution doivent être effectués à toutes les étapes de développement de l’application, par l’intégrateur et/ou le développeur, avec les technologies concernées (clavier, lecteur d’écran,…)
– les tests utilisateurs sont des mises en situations avec des utilisateurs réels, mais ne peuvent être effectués que lorsque l’accessibilité est entièrement en place sur l’application.

A lire aussi :

Première participation aux ateliers Paris Web

Test unitaire ? Mock ? TDD ? Kezako ? (En finir avec les régressions)

Et si on enrichissait nos frameworks CSS ?

Projets responsive : mise en commun de retours d’expérience

Commenter cet article Voir les commentaires (0)

Et si on enrichissait nos frameworks CSS ? - Atelier Paris Web 2013

Par Marie, le lundi 21 Oct 2013 dans Création de site web

Cet article fait partie de la série sur les ateliers Paris Web 2013.

Raphaël Goetter (@goetter) et Nicolas Hoffmann (@Nico3333fr) ont chacun créé leur propre micro-frameworks CSS : KNACSS et RÖCSSTI.
L’atelier était pour eux l’occasion de revenir sur la démarche de création d’un framework CSS, et de mettre en commun et partager autour des retours d’expérience d’utilisation.

Un rapide tour des frameworks existants permet de faire la distinction entre micro-frameworks (KNACSS, RÖCSSTI) et « usines » (Bootstrap, Foundation…) : les premiers sont plutôt une base neutre, rapide mais modulaire, pour le travail d’intégration, tandis que les seconds essaient de couvrir de manière quasi-exhaustive les besoins possibles en fournissant une palette plus approfondie d’éléments, avec parfois en plus des thèmes visuels déjà prêts.
La question duquel utiliser, et comment, dépend alors bien sûr des besoins du projet : si la surcouche de design envisagée est par exemple très importante, il serait contre-productif d’alourdir les choses en devant surcharger un thème visuel déjà inclu.

Après avoir rapidement abordé les raisons de créer et/ou utiliser un framework (se faciliter la vie et gagner du temps en ne réinventant pas la roue à chaque fois), c’est ensuite l’occasion d’échanger sur ce qu’un framework devrait contenir, offrir en bonus, ou devrait absolument éviter… selon les présentateurs.
Les retours d’expérience des participants mettent alors en avant des différences d’attentes, toujours selon les besoins et projets rencontrés.
La gestion des formulaires et des styles d’impression, indispensable ou non ? Ne pas utiliser d’!important, est-ce-si important que ca ? Peut-on déterminer de manière absolue quels sont les « éléments qui servent rarement » et n’ont pas leur place dans le framework ?

On évoque alors les raisons qui les ont chacun poussé à rendre leur framework public : d’un côté, « la philosophie alsacréations » de mettre à disposition du plus grand nombre les compétences disponibles, et de l’autre, plutôt un encouragement de l’entourage à diffuser, car cela dépassait la portée du simple intérêt personnel.
Chaque framework prend donc son temps pour grandir et évoluer, au fil des apports de la communauté et de l’évolution constante du métier.

Viennent ensuite les « sujets sensibles », les grilles tout d’abord : fonctionnement fixe ou fluide ? Faut-il pouvoir les imbriquer ? Plutôt définie sur le conteneur ou sur les éléments enfants ? Autant de questions qui n’attendent pas une seule réponse, mais des prises de décisions selon les besoins et le contexte.
On relance également le débat de la « sémantique » : peut-on garder du sens visuel lorsque les éléments s’adaptent en responsive ? Parle-t-on de la sémantique de ce que fait l’élément, ou plutôt de donner du sens pour les autres intégrateurs qui travailleraient sur le projet ?
Autre sujet prêtant à débat : quid de l’utilisation des préprocesseurs ? Les partisans (dont nous sommes !) mettent en avant les avantages : variables, extends, imports pour ne garder que les parties du framework que l’on va effectivement utiliser…

Enfin, bien qu’on trouve de « mauvaises utilisations » des frameworks, on s’accorde pour dire qu’utiliser un framework est riche d’apprentissages : respecter ou mettre en place des conventions de nommage, réfléchir en éléments modulaires plutôt qu’en pages… La documentation joue alors un rôle important pour comprendre les mécanismes mis en oeuvre par les créateurs.

Vous pouvez consulter en ligne les slides de cet atelier.

Tout le monde aura finalement retenu cette phrase de Raphaël, qui servira de résumé (de cet atelier, mais aussi de Paris Web et du processus d’intégration en général) : « ça dépend » (du contexte, des besoins, d’où on met le curseur entre rapidité d’exécution et maintenabilité…).

A lire aussi :

Première participation aux ateliers Paris Web

Test unitaire ? Mock ? TDD ? Kezako ? (En finir avec les régressions)

Rendre son application HTML5 accessible en 4 étapes

Projets responsive : mise en commun de retours d’expérience

Commenter cet article Voir les commentaires (0)

Première participation aux ateliers Paris Web

Par Marie, le vendredi 18 Oct 2013 dans Inside acti

Ne pouvant assister aux 2 jours de conférence, je me réjouissais de vivre pour la première fois « l’expérience Paris Web », lors de la journée d’ateliers du samedi 12 octobre.
Voici donc mes notes et retours sur cette journée bien remplie et riche en échanges !

Paris Web, qu’est-ce-que c’est ?

Paris Web est un événement francophone dédié aux professionnels du web, organisé chaque année à Paris.
Des conférences et des ateliers offrent un large état des lieux de la profession, entre questionnements, études de cas, expérimentations, démonstrations…
Ce genre d’événements est aussi l’occasion pour la communauté de se retrouver pour échanger « dans la vraie vie », lorsque le reste du temps les communications passent plutôt par le virtuel.
Il est d’ailleurs très agréable de constater qu’il règne une ambiance bonne enfant, avec des participants et orateurs accessibles et « humbles » dans les échanges, avec une envie partagée d’avancer grâce aux expériences de chacun.

La journée du samedi était consacrée aux ateliers, répartis dans plusieurs salles sur différents horaires. A la différence des conférences, de 15 à 50 min, ce format plus long (1h30) est destiné à des interventions plus participatives. Le public est invité à nourrir les échanges le plus possible, tandis que l’orateur devient plutôt un animateur.
En essayant de privilégier des approches technologiques ou expérience projet, mon choix s’est porté sur les 4 ateliers suivants :

Test unitaire ? Mock ? TDD ? Kezako ? (En finir avec les régressions)

Et si on enrichissait nos frameworks CSS ?

Rendre son application HTML5 accessible en 4 étapes

Projets responsive : mise en commun de retours d’expérience

Vivement Paris Web 2014 !

Après cette riche journée, difficile de ne pas vouloir y retourner, et cette fois vivre l’ensemble de l’événement !
En-dehors du contenu des ateliers, ce fut également l’occasion de rencontrer ou échanger de vive voix avec les « personnalités » de l’intégration qui nourrissent mes flux quotidiens : @HTeuMeuLeu, @goetter, @kaelig, … et puis la découverte d’autres talents à suivre : @kreestal, @nhoizey, …
Merci aux organisateurs et bénévoles, et à l’année prochaine donc !

Commenter cet article Voir les commentaires (0)

acti en prison : témoignage vidéo

Par Marie, le vendredi 21 Sep 2012 dans Inside acti

Nous vous proposons de découvrir, en vidéo, le récit de la visite du 4 avril.
En effet, certains membres de l’équipe ont pris le temps de livrer leurs impressions sur cette expérience.
Bon visionnage !


Musique : Julien Bellanger

Pour clôturer la série « acti en prison », rendez-vous prochainement pour le récit des visites de septembre…

Et pour poursuivre l’expérience, au-delà des Journées du Patrimoine, des manifestations sont organisées jusqu’à fin septembre autour de la prison en général : exposition de photographies, conférences…
Découvrez le programme en détail

Commenter cet article Voir les commentaires (0)

acti en prison : derrière les barreaux des prisons Saint-Paul et Saint-Joseph

Par Marie, le jeudi 20 Sep 2012 dans Inside acti

Trois ans après le transfert des détenus vers la maison d’arrêt de Corbas et l’établissement pénitentiaire pour mineurs de Meyzieu, l’équipe d’acti découvre les prisons Saint-Paul et Saint-Joseph et plonge dans l’univers inhumain et sordide de ce lieu autrement appelé « la marmite du diable ».

acti en prison, prison saint-paul, lyon, acti, elise boubault

lire la suite

Commenter cet article Voir les commentaires (3)

acti en prison : rencontre privilégiée avec un grand artiste, Georges Rousse

Par Marie, le jeudi 6 Sep 2012 dans Inside acti

Quand l’équipe d’acti se met en route pour la prison Saint Paul, le 4 avril dernier, elle sait qu’une rencontre forte l’attend : Georges Rousse, artiste plasticien de renommée internationale, travaille à sa première installation dans le bâtiment H (1) et il a accepté de partager un temps avec l’équipe afin de présenter sa démarche.

(1) : lire le précédent billet pour en savoir plus sur l’évènement « Passages, de la prison à l’université »

Quand acti rencontre Georges

Ce mercredi d’avril, le ciel est gris-sombre et l’accueil chaleureux de Daniel Siino, aux portes de Saint Paul, contraste sérieusement avec l’ambiance de plomb qu’impose le lieu.
Direction le hall visiteurs. Mais avant d’y accéder, trois portes dont deux monumentales, installent déjà l’idée d’enfermement.
C’est là, dans ce hall, dont les murs « pèlent » littéralement leur peinture épaisse, que la rencontre avec Georges Rousse se fait.

Avec des mots simples, il explique sa démarche : à partir d’un espace tridimensionnel dans la réalité (la cellule), il construit une image « à plat » d’un carré bleu sur fond noir.

Avec son smartphone, il présente son dessin préparatoire et le commente : le fond noir projette la cellule dans l’abstrait en faisant disparaitre les stigmates du réel ; quant au carré bleu, il symbolise le carré de ciel que souhaitent voir les prisonniers dans leurs cellules.

Deux versions sont prévues : l’une qui laisse « l’évasion » se faire, et l’autre qui l’empêche symboliquement par une trame faite à la craie sur le carré bleu.

Dans les deux cas, ce qui frappe, c’est la pureté des formes et la géométrie de l’image. Et quand on sait le travail d’anamorphose nécessaire à créer l’abstraction, nous nous inclinons devant tant de génie.

Ecoutez le podcast de cette rencontre

En route pour le bâtiment H. L’équipe acti, se prépare à vivre cette chance : voir l’envers du décor d’une photographie de Georges Rousse, dont l’œuvre est bien le tirage photographique et non l’installation qu’il nécessite.

L’art du partage

Si le génie de l’artiste s’exprime dans la conception – dont il est l’unique auteur –, la réalisation quant à elle est un processus que Georges Rousse partage. En l’occurrence, sur les trois installations de la prison Saint Paul, c’est accompagné d’un groupe de jeunes en insertion de l’association « Prévenir » (2) qu’il travaille.

Et quand l’équipe d’acti approche de la cellule du bâtiment H, ce sont eux, ces jeunes, qui s’affairent à traduire de leurs mains, l’image pensée par Georges Rousse.

Dans un coin, discret, un appareil sur pied rappelle que l’œil du photographe est présent : l’appareil guide, ajuste, restituant calcul et quadrillage pour cette image 2D née d’un espace 3D.

L’envers du décor est fascinant : l’image prend vie en matières, en mouvements, en gestes concentrés et précis.

La simplicité de l’image finale sera en réalité un trompe l’œil : les formes, les volumes et architectures que Georges Rousse construit sont éclatés, désagrégés, sur les différents plans spatiaux de bâtiments parfois monumentaux.

(2) : Prévention en Isère Rhodanienne (Prévenir) est l’association fondée par Daniel Siino qui est aussi le créateur de l’émission de radio « le Téléphone du dimanche » qui donne la parole aux familles de personnes détenues.

Une prison, un artiste, dix jeunes en insertion, trois installations

« Pour exister, mon travail s’appuie sur l’espace. L’idée est de construire mon propre espace indépendant du lieu et de son histoire, comme une sorte d’atelier utopique, détaché du contexte de la prison et qui agit comme le premier geste d’une nouvelle époque : l’Université qui remplacera la prison. »
Georges Rousse à propos de son travail à Saint Paul.

Les trois installations sont donc à découvrir lors des visites organisées par l’Université Catholique de Lyon pendant les  Journées Européennes du Patrimoine des 15 et 16 septembre prochain.

Mémoire d’une rencontre

Pour reprendre les mots de Daniel Siino : « la vie est faite de rencontres et il y a des rencontres qui transforment ».
Ces rencontres avec Georges Rousse ont nourri une certaine idée de ce qu’est un artiste, de ce qu’est le parcours de création d’une œuvre et de ce qu’est, au fond, l’engagement pour une cause, au carrefour d’un parcours individuel.

Dans le prochain billet, à ne pas rater : la visite complète en images.

Commenter cet article Voir les commentaires (0)

acti en prison : une expérience marquante qui s’inscrit dans l’histoire de l’agence

Par Marie, le lundi 3 Sep 2012 dans Inside acti

Les 4 avril et 24 août derniers, l’équipe d’acti s’est rendue à la prison Saint Paul et a rencontré l’artiste Georges Rousse dont 3 installations étaient alors en cours de montage.
Une expérience unique.

acti, visiteuse de prison

C’est dans la continuité de son engagement pour le droit à la dignité des détenus (1), qu’acti s’associe à l’évènement qui se prépare à la prison Saint Paul pour les Journées Européennes du Patrimoine, les 15 et 16 septembre prochains.

(1)  en 2002  acti avait gracieusement réalisé le site internet de la campagne « Une Peine Point Barre » contre la double peine puis en 2005 celui de la campagne « Trop C’est Trop » contre la surpopulation carcérale. En militant incontournable et acteur majeur du soutien de ces causes, c’était déjà Bernard Bolze qui était à l’origine de ces actions.

Passages, de la prison à l’université

L’évènement orchestré par Bernard Bolze(2) et Daniel Siino(3) avec l’Université Catholique de Lyon, sera une invitation à célébrer le passage de la prison à l’université et offrira au public l’occasion rare de découvrir les bâtiments et le paysage de « derrière les voûtes » avant métamorphose.
En effet, Saint Paul, rachetée en 2009 par l’Université Catholique de Lyon, se prépare un nouvel avenir et deviendra le futur campus de l’UCLy à l’horizon 2015.

(2) Bernard Bolze est fondateur de l’Observatoire international des prisons (OIP). Il est aujourd’hui contrôleur des lieux de privation de liberté (autorité administrative indépendante) – Ci-dessous, Bernard entouré de l’équipe acti

(3) Daniel Siino est fondateur de l’association de prévention spécialisée
« Prévenir » et créateur de l’émission de radio « le Téléphone du dimanche » qui donne la parole aux familles de personnes détenues. Ci-dessous, Daniel entouré de l’équipe

L’art au rendez-vous…

Des artistes plasticiens ont accepté l’invitation de s’approprier une partie de l’espace et d’y imprimer leurs talents avant transformation. Le public pourra donc découvrir les réalisations de Georges Rousse, Ernest Pignon-Ernest, Patrice Giorda, Perrine Lacroix et Pierre Gangloff.

Mais si l’art est au rendez-vous, l’action sociale n’est pas en reste : les jeunes de l’association « Prévenir », à la demande de l’université Catholique de Lyon, ont collaboré une nouvelle fois avec l’artiste Georges Rousse et réalisé les trois installations plastiques qui s’offriront à l’oeil du visiteur.

Quant à l’équipe acti, en plus de la visite de Saint Paul, elle a eu le privilège de deux rencontres avec Georges Rousse… mais vous en saurez plus dans un prochain billet. A très vite pour la suite.

Commenter cet article Voir les commentaires (0)

Rechercher