KISS dans une grande entreprise ?
Conférence de Stéphane Deschamps (France Telecom)
Blog : http://www.nota-bene.org/ – Twitter : @notabene
Stéphane Deschamps (Photo de Yannick Croissant)
Responsable des questions d’accessibilité chez Orange, Stéphane nous explique la « politique » mise en place chez l’opérateur historique afin de « banaliser » la question de l’accessibilité dans la réalisation des différents projets de la société.
Orange c’est environ 5.000 développeurs (internes et prestataires) sans compter les agences extérieures.
Orange est très structuré (plusieurs strates) et il explique, en caricaturissant, qu’une équipe d’une 15 aines de personnes « structure » le développement de l’intégralité des développeurs.
Pour ce faire, tout commence par une facilité d’installation.
Orange utilise en interne une version d’Eclipse packagé avec une 15aines de plugin ; dont Ocawa (contrôle d’accessibilité d’un code en temps réel). Cela permet d’avoir une hégémonie en terme d’outils.
Ensuite, une bibliothèque de composants réutilisables (HTML, CSS, JS, …) a été mise en place et est maintenue au fur et à mesure du temps. Ces composants sont le plus ergonomique et accessible possible tout en respectant la marque et sa « charte ».
Concernant les recommandations sur l’accessibilité (ou autre), l’équipe de Stéphane se charge d’en faire des digests « lisibles pour les développeurs ». Par exemple, les recommandations WCAG 2 font plus de 800 pages, ce qui les rend inutilisables pour un développeur ; Orange en ressort un digest de 30 pages pour le HTML/CSS/JS, 40 pages pour Flash et 5 pour Flesk ; cela sert de « bonnes pratiques » pour les développeurs.
Le but est que pour un nouveau développeur qui arrive, faire de l’accessibilité ne soit pas contraignant ; qu’il comprenne et intègre très rapidement les bonnes pratiques.
Ces « bonnes pratiques » sont remises à jour au fur et à mesure du temps ; elles sont adaptées aux besoins d’Orange et suivent l’évolution des « standards ».
Une fois la « théorie » gérée, place à la pratique.
Le vrai enjeux est de banaliser l’accessibilité et de ne pas en faire une contrainte pour le développeur.
Tout cela passe par beaucoup d’évangélisation et de sensibilisation des équipes : « L’accessibilité est un critère de qualité », …
Des formations sont organisées et l’équipe en charge de l’accessibilité est très disponible ; elle n’hésite pas à multiplier les petites réunions de 30min pour convaincre les « retissants ».
Regroupement de la maîtrise d’oeuvre et de la maîtrise d’ouvrage dans un pôle pilotage de projet ; chaque projet est une espèce de PME a lui tout seul. Les équipes sont obligées de se rapprocher, d’échanger.
Mise en place de processus « agile » lors des développements ; revue de code avec un expert de l’accessibilité qui explique comment rendre le code accessible.
Concernant le travail avec les agences externes plusieurs choses sont mise en place :
- Le projet est retoqué s’il ne contient pas une partie sur l’accessibilité (Stéphane explique que c’est très rare que l’accessibilité se trouve dans les réponses des agences).
- Phase de formation des agences ou transfert des « guidelines » d’Orange.
Et sinon
De plus, chez Orange, l’accessibilité est dans la lettre de mission d’orange, donc obligatoire.
Pour l’heure, Orange ne partage pas ses “digests” de recommandations ; pas la philosophie de l’entreprise, mais l’envie de faire passer certaines choses en opensource est là.
La couleur orange de Orange pose pas mal de problème d’accessibilité. Il y a donc des recommandations de taille de police, de poids, de police, de positionnement de la couleur sur la page, …
Exemple du webmail de Wanadoo le jour du passage en Orange ; le changement de couleur rendait le lien « messagerie » inaccessible pour de nombreux clients.
Quelques liens
- Conf. : http://www.paris-web.fr/2011/conferences/kiss-dans-une-grande-entreprise.php
- Ocawa : http://www.ocawa.com/fr/Accueil.htm
- Wicket : http://wicket.apache.org/
- Opquast : http://www.opquast.org/
Les goûts et les couleurs
Conférence de David Rault (Graphiste, journaliste et photographe)
Site : http://www.davidrault.com/ – Twitter : @davidrault
David Rault (Photo de Yannick Croissant)
La couleur est d’une importance énorme dans l’expérience utilisateur
55 pour cent des médaillé aux Jeux Olympique d’Athènes portaient du rouge.
Les couleurs provoquent 2 réactions chez nous : une réaction physique et une réaction acquise.
Ce que les couleurs “représentent” pour nous humain
Le rouge représente la passion, l’érotisme, l’excitation, la force, le pouvoir, la chaleur, la vitesse chaleur…
La couleur rouge est un des première couleur maîtrise par l’homme. Le rouge donne une impression d’urgence.
C’est une couleur qui excite ; il augmente le rythme artériel/cardiaque => la longueur d’onde (400nm) code le rouge, c’est la détection de cette lgr d’onde dans le système nerveux qui a une réaction instinctive sur l’individu.
la moins appréciée dans le monde accidental. Couleur la plus lumineuse du spectre. Joie/spontanéité. Vu de loin : taxi jaune, travaux
Le jaune est une couleur qui n’a pas de chance, couleur la moins apprécie du monde occidentale, mauvaise réputation. Couleur la plus lumineuse du spectre ; elle exprime la joie, la spontanéité. C’est une couleur que l’on voit de loin, d’où son utilisation pour les taxi, les travaux, …
Le meilleur contraste possible est en fait noir sur jaune ou jaune sur noir ; pas noir sur blanc
La couleur orange est très joyeuse, qui se voit de très loin, surtout sur fond bleu. Exprime l’énergie, la vitalité, l’été, la joie,l’enthousiasme, la jeunesse, le dynamisme, les années 70′.
Le bleu est la couleur la plus appréciée du monde occidental, surtout par les hommes. C’est une couleur qui calme, qui a une connotation de rassemblement, de paix, de fiabilité, de consensus.
Beaucoup de site “communautaires” l’utilisent (Facebook, Twitter, Skype, …).
L’association du bleu et du jaune a une connotation de qualité (ex. Logo ikea).
Le vert est la couleur de la nature, de l’écologie, de la vie, de la chance, de la sécurité.
Le marron est la couleur du bois, de la terre, du foyer dans tout ce qui est authentique, chaleureux, rassurant, intemporel, durable, fiable, rustique..
Le rose est la couleur de la féminité, une couleur maternelle, sensible, romantique qui calme les gens ; Il est impossible de s’énerver dans une pièce “rose”. Associé à du rouge cela devient “vulgaire”.
Le violet est la couleur préférée des femmes, notamment occidentales ; notion de pouvoir, de richesse et de luxe.
Le gris est la couleur de la neutralité et du détachement, ne communique pas grand chose.
Le noir est une couleur qui évoque le mystère, l’élégance, le respect, la crainte et le luxe. Signe d’un certain statut (voiture…)
Le blanc est la couleur de la pureté, de l’innocence ; c’est un retour a l’essentiel, à la propreté.
Et sinon
En moyenne, il faut utiliser 3-4 couleurs maximum.
Processus de choix :
- Choisir une couleur de base
- Nuancer cette couleur
- Choisir une couleur complémentaire pour faire ressortir les informations importantes en jouant sur le contraste
Exemple : couleur de base = bleu – nuance = bleu clair, bleu foncé, … – couleur complémentaire = orange
Apple est une société qui vise l’élitisme donc utilisation de beaucoup de blanc, de gris acier.
Logiciels & sites intéressants
ColorDoctor est un logiciel gratuit qui permet de tester un site vu par les daltoniens. Permet notamment de voir sir ses couleurs sont accessibles.
Choix de couleur :
- http://kuler.adobe.com
- http://www.colorcombos.com
- Une application iPhone/iTouch : myPANTONE
Color meanings by culture
http://www.globalization-group.com/edge/resources/color-meanings-by-culture/
Slides de la conférence
http://www.slideshare.net/ozeb14/les-gouts-et-les-couleurs-david-rault-parisweb-2011
Optimizing your layout for phones and tablets using viewport and media queries
Conférence de Andreas Bovens (Opera Software)
Site : http://bovens.net/ – Twitter : @andreasbovens
Andreas Bovens (Photo de Yannick Croissant)
Il faut penser un site web pour n’importe quel device, que cela soit l’ordinateur de bureau, la tablette ou le mobile.
Différents rendus “par défaut” sont possible sur un mobile.
Affichage du site dans sa taille “normal” ferré en haut à gauche et ensuite possibilité de se déplacer.
Adaptation du site à la largeur du mobile et mise en place d’un scroll vertical
Affichage de l’intégralité du site dézoomer à la taille du mobile ; possibilité ensuite de zoomer et de se déplacer dedans.
C’est bien gentil, mais si on gérait nous même l’adaptation gràce à ViewPort ?
Le ViewPort d’un écran ne se limite pas à sa largeur ! C’est tout ce que l’on voit à l’écran.
Cette propriété est bien prises en charge par les navigateurs.
Il utilise Opera mobile emulator : simulateur de navigateur (résolution, screen sixe) sur les différents devices .
Démonstration de la balise meta ViewPort
<meta content="width=320" name="viewport">
Cet exemple fixe la largeur du viewport à 320px. Lorsque l’on passe en mode “paysage”, le site sera zomer pour prendre toute la largeur de l’écran.
Il faut mieux utiliser la balise suivante qui s’adapte automatiquement à la largeur de l’écran ; il n’y aura donc pas de zoom “artificiel”.
<meta name="viewport" content="width=device-width">
On parle de “width” mais cela marche aussi avec “height”.
Différentes propriétés/possibilités de la balise viewport sont abordées. voir les slides et Google.
Cela ne sert à rien de vouloir détecter un type de navigateur pour rediriger sur mobile ou non ; il y aura toujours des cas qui ne fonctionneront pas (slide 64).
Toujours mettre un lien vers le siteweb fullsize.
Les media Queries
On peut faire des choses assez poussées avec les media queries ; jouer sur les taille, sur les ratios, …
@media screen and (min-width : 400px) not projection and (aspect-ratio:16/9)
Les media queries permettent d’avoir une seule version du site et non une version par device ; gain en coup de développement, de maintenance.
Ex.: le site du BostonGlobe (http://bostonglobe.com/) qui utilise les media queries.
Le meta viewport es nécessaire lors de l’utilisation de media queries sur mobile ; ne pas oublier que le viewport par defaut sur mobile à une taille de 850px.
NB : Il faut utilisez la taille de la fenêtre et non pas celle du périphérique.
“Mobile First” : Il fait toujours démarrer le développement d’un site sur mobile et ensuite le faire pour les tablette et les PC. Le plus “intelligent” est de fonctionner par pallier de taille exacte.
NB : on est obligé d’utiliser les polyfill (respond.js par exemple) pour faire fonctionner les media queries sur les vieux IE.
High-DPI screens
HIgh density screen : Un pixel CSS est différent du pixel d’un device
Un article intéressant sur la résolution des images pour le web : “Le Web c’est pas en 72 dpi, coco!” http://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/
Pour gérer les écrans haute définition, on peut utiliser différentes résolutions d’image et utiliser les media queries pour servir les bonnes suivant la résolution de l’écran.
Sencha.io : charge les images optimiséss en fonction du device
Quelques liens
- Opera Mobile Emulator : http://www.opera.com/developer/tools/mobile/
- Annuaire de site utilisant les media queries : http://mediaqueri.es/
- Sencha.io : http://www.sencha.com/products/io/
Slides de la conférence
Formulaires HTML 5 : où en est-on ? Que peut-on faire ?
Conférence de Mounir Lamouri (Mozilla)
Site : http://blog.oldworld.fr – Twitter : @mounirlamouri
Mounir Lamouri (Photo de Franck Paul)
Présentation très courtes (20 min) et beaucoup de slides remplis de code. Pas (encore) trouvé les slides en ligne. Je vous laisse faire des recherches sur les formulaire HTML5 ; Google est intarissable.
Quelques notes …
La propriété dieldset.disabled permet d’activer/désactiver une partie d’un formulaire.
La balise input
HTML5 propose de nouveaux formats d’input (email, tel, url, number, range, date, datetime, color, …).
L’utilisation de ces input permet une adaptation du clavier sur mobile.
Par contre, ils ne sont pas encore tous implémenter dans les navigateurs et/ou leurs niveaux d’implémentation diverge suivant les navigateurs (ex. number n’est pas encore chez FF).
En principe, si le type n’est pas implémenté, il se comportera comme un champ input de type texte.
La balise datalist
Elle permet de définir une liste de données sélectionnables / qui propose un mécanisme d’autocompletion.
<datalist id="d"> <select> <option>foo</option> <option>bar</option> </select> </datalist> <input list="d">
La balise progress
Propose une barre de progression. Foncitonne sous FF Opera et Chrome
La balise meter
Ressemble à la balise progress mais est plutôt une “jauge” qu’une bare de progression.
Elle propose une fallback lorsque la valeur (âge par exemple >13) n’est pas bonne.
La balise output
Affichage d’un résultat d’un calcul ; champ non modifiable par l’utilisateur, dynamiquement mis à jour en fonction des entrées dans le formulaire.
CSS
Présentation des propriétés CSS :required, :optional, :valid, :invalid
Possibilité d’avoir une fallback CSS sur :invalid
.field:valid {border-color:#0f0;}
.field:invalid {border-color:#f00;}
- https://developer.mozilla.org/en/CSS/%3Arequired
- https://developer.mozilla.org/en/CSS/%3Aoptional
- https://developer.mozilla.org/en/CSS/%3Avalid
- https://developer.mozilla.org/en/CSS/%3Ainvalid
- http://www.w3.org/TR/css3-ui/
L’attribut placeholder
Permet d’afficher un text dans le champ input avant qu’il reçoive le focus.
<input type="text" placeholder="saisir votre texte ici" />
Quelques liens (encore une fois, Google est ton ami)
- http://www.scriptol.fr/html5/formulaire.php
- http://dev.opera.com/articles/view/improve-your-forms-using-html5-fr/
- http://www.pompage.net/traduction/formulaires-html5
HTML5 APIs: Where no man has gone before
Conférence de Robert Nyman (Technical Evangelist chez Mozilla)
Site : http://robertnyman.com/ – Twitter : @robertnyman
Robert Nyman (Photo Yannick Croissant)
Robert Nyman fait un petit tour de différentes API et autres possibilité de HTML5 (voir ses slides)
LocalStorage
C’est un pseudo cookies de 5 mo. Permet de se passer des cookie qui sont limités en taille et en nombre
- http://www.lafermeduweb.net/billet/le-stockage-local-en-html5-localstorage-942.html
- http://paperkilledrock.com/2010/05/html5-localstorage-part-one/
IndexedDB
Online/Offline event
Permet de gérer le comportement de site suivant que l’utilisateur est connecté ou non.
Geolocalisation
Navigator.geolocalisation
- http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
- http://debray-jerome.developpez.com/articles/l-api-geolocalisation-en-html5/
History API
Windows.history.pushState() permet de pusher des urls dans l’historique de navigation
- http://dev.opera.com/articles/view/introducing-the-html5-history-api/
- http://blog.webspecies.co.uk/2011-05-26/html5-history-api-dynamic-websites-like-never-before.html
Web Sockets
Communication bidirectionnelle entre le client et le serveur ; Protocole WS ou WSS
Exemple de librairies : Web-Sockets-js, Socket.IO
File API
Possibilité d’upload multiple : avec un événement onChange , connaissance du nom, de la taille du fichier, … => possibilité de test coté client et plus serveur.
Video
Élément video en HTML5
Format webm, récent et entièrement libre.
Service vid.ly permet de générer différents formats vidéo a partir d’une video en n’importe quel format de départ.
- http://html5video.org/
- http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
Service Universal Subtitles
Possibilité de faire des captures d’écrans tout moment et très simplement
Popcorn.js
Librairie js pour faire des choses sur la video
- http://popcornjs.org/
- http://www.lafermeduweb.net/billet/popcorn-js-un-framework-html5-video-pour-plus-d-interactivite-1064.html
Élément Canvas
- https://developer.mozilla.org/fr/Dessiner_avec_canvas
- http://www.lafermeduweb.net/tutorial/l-element-html-5-canvas-p23.html
Pdf.js
Librairie JS qui permet la consultation de documents PDF directement dans un navigateur sans plugin PDF
WebGL
Pour faire de la 3D
three.js
bibliothèque JS
- https://github.com/mrdoob/three.js/
- http://aerotwist.com/lab/getting-started-with-three-js/
- http://threejs.org/io/s/
Polyfill
Polyfills permettent de remplir les insuffisances des navigateurs sur HTML5
Quelques liens
Slides de la conférence
http://speakerdeck.com/u/robnyman/p/html5-apis-where-no-man-has-gone-before-paris-web
Petite arithmétique de l’UX : choisir, renoncer, construire
Conférence de Nacéra Benfedda et Amélie Boucher (Viadeo)
Site : http://www.viadeo.com ; http://www.ergolab.net/ – Twitter : @amelieboucher
Nacéra Benfedda et Amélie Boucher
Un projet, tout comme la vie, est une histoire de Sacrifice.
Il faut arréter de penser que les ergonomie sont des magiciens et pourront tout rendre simple. L’’ergonomie ne peut pas simplifier la complexité fonctionnelle
On a tendance à toujours en vouloir plus ! Mais plus de fonctions = plus de complexité.
Il faut apprendre à renoncer à ajouter : « having the shortest list of features is our biggest feature » (37signals)
Avant l’interface… Déjà renoncer !
Le concept SHE
- Shrink
- Hide
- Embody
1. Shrink (comment renoncer a certains éléments – exemple Apple shuffle)
Trois niveaux de résistance :
- résistance #1 : nous (on a du mal a renoncer, a jeter)
- résistance #2 : l’utilisateur (habitude, affect avec les fonctionnalités, il faut comprendre quel est le vrai besoin de l’utilisateur, le comprendre)
- résistance #3 : la concurrence (« faire moins que la concurrence »
Comment ?
#1 Prioriser
Quelle est la valeur du service ? La valeur doit comprendre la partie utilisateur
Quel va être le cout du service (nb jours homme de dev, …)
Classer par priorité l’ajout de feature (valeur/complexité) « on oublie » « prioritaire » « plus tard » « quick wins »
#2 raconter une histoire
Comment on raconterait son produit a sa famille le plus simplement possible ; calquer sur la vie réelle. Est-il compréhensible ?
#3 qu’est ce que ça ne doit pas faite
Regarder ce que fait mal la concurrence
#4 « mobile first »
Se mettre en situation de mobilité. Même sans stratégie mobile, pensez clarté/intuition permet de pousser à l’essentiel.
#5 ce qu’on peut faire … Et maintenir
Adopter : est-ce cette fonctionnalité je l’adopte ? Suis-je prêt à la faire vire, la défendre, … ?
#6 et l’instinct ? Le culot ? La folie ?
Ne pas non plus totalement se brider si on sent quelque chose ! C’est important de trouver un juste milieu.
En suivant ce “cycle”, vous gagnerez en légèreté Mais il faut aussi savoir “garder”. Il faut garder les bonnes choses tout de même
Ne pas confondre utilisabilité, ergonomie et simplicité
On peut aussi limiter les features ; les mettre uniquement à disposition des power users pour les tester.
2. Hide
Construire l’interface
- Nécessite de hiérarchiser
- Il faut diminuer le bruit et augmenter le signal (ex.: la nouvelle version de Google Agenda qui s’est considérablement purifiée)
- Miniaturiser pour alléger l’écran (ex. L’utilisation des icônes)
- Miniaturiser les éléments textuels (Être court, percutant. Diminuer le contenu texte au maximum.)
- Faciliter le travail d’attention sélective
3. Embody
Il faut donner de l’émotion, améliorer l’expérience utilisateur.
Conclusion
Faire. Simple, c’est pas simple (mais c’est génial)
L’accessibilité vue d’un grand compte et comment la loi de 2005 a changé nos façons de travailler
Conférence de Arthur Rigaud (intégrateur web chez VSC Technologies)
Twitter : @arigaud_pro
Arthur Rigaud
La SNCF s’est engagée dans l’accessibilité à tous les niveaux (transport, informations, …).
La groupe SNCF sur internet c’est :
- 70 sites internets et 450 intranets
- environ 800.000 visiteurs / jour
- Des sites gérés en interne et par des agences.
2 exemples de site internet accessible du groupe :
Comme Orange, la politique web de la SNCF inclus depuis quelques temps une “obligation” d’accessibilité.
L’accessibilité se met en place par étape. Elle se trouve en amont des projets, portée par des équipes en interne, des formations sont données aux développeurs, …
Les gens sont de plus en plus sensibilisés et deviennent de plus en plus sensibles à l’accessibilité.
Une grosse campagne sur l’accessibilité à été menée en interne via différentes opérations :
- E-card envoyée aux salariés du groupe
- Minis vidéos, affiches placées dans les espaces communs (notamment les cafétérias du groupe).
- Un extranet : http://sncf-accessibilite-numerique.com (qui concours pour le nom de domaine le plus long du monde)
Au final, la SNCF travaille son accessibilité depuis 2005 ; il leur reste encore beaucoup de travail mais l’accessibilité est totalement intérée dans les projets.
Slides de la conférence
Lightning talks
Présenté par Daniel Glazman (co-préside le CSS Working Group du W3C) & Robin Berjon (chair du groupe Device APIs)
Twitter : @glazou / @robinberjon
Lightning talks (Photo de Yannick Croissant)
Le principe
10 interventions de 4 minutes de libre parole ; au final, un test d’applaudimètre et un classement. Des cadeaux pour les 3 premiers ! … Place aux trolls :)
1. Pas de Liens Sans Autorisation m’a tuer – Thierry Stoehr
#PDLSA est une « attaque » contre tous les sites dont les mentions légales interdisent de faire des liens vers ces sites sans autorisation au préaliable.
Thierry Stoehr fait une liste de 42 sites dont 01net, capgemini, de nombreux site du gouvernement, …
2. La Glande Assistée par Ordinateur – Laurence Vagner
Présentation de toutes les solutions pour glander avec un ordinateur.
Mise en place d’un Opquast de la glande : http://www.glandequast.com
Cycle de 25 min de travail suivi de 5 min de pause.
Pas de serendipité, pas de rapport au travail sinon risque de non tenue du cycle.
Pendant ses temps de pause, faire quelque chose quie ne nécessite pas de concentration.
3. Ack, better than grep – Anthony Ricaud
Pourquoi la commande ack est meilleur que grep ; par l’exemple en mode « troll »
Ack = Grep en plus joli, rapide, avec une belle syntaxe pour chercher les fichiers dans les dossiers.
Le site de ack better than grep : http://betterthangrep.com/
Les slides : http://hanblog.info/blog/post/2011/10/Paris-Web-2011
4. L’amusante frénésie des pages à largeurs fixes – Rudy Rigot
Présentation animée en HTML5/CSS3 des effets des largeurs fixes sur le design d’un site au fil du temps.
5. Comment faire un sac de laptop en 30s – Karl Dubost
Je coupe la jambe gauche de mon jean, le laptop tient dedans ! Ou comment recycler ses vieux jeans.
6. Pdf.js – Vivien Nicolas
Présentation de la librairie Pdf.js en 4 minutes
7. BootToGecko – Mounir Lamouri
L’OS mobile de Firefox. Une UI en Html/JS au dessus d’Android mais c’est « pour proposer une alternative aux plateformes fermées d’iOS et d’Android ».
C’est pas mal mais très très jeune :
8. Ligthning Failconf – Benjamin Lorteau
J’ai raté tous mes projets, mais ça m’a permis de savoir ce que je voulais faire vraiment.
Il faut apprendre de ses echecs, de son expérience.
9. L’accessibilité : un truc réservé aux riches ? – Jean-Philippe Simonnet
Présenté par @oxymore. M’en rappelle pas
10. W3C Sentaï Team – Jérémie Patonnier
L’histoire du web racontée en SVG. Très LoL
http://jeremie.patonnier.net/post/2011/10/18/Paris-Web-2011-%3A-SVG-et-Typographie