N.B. : cet article est inachevé. Il pourra être complété et modifié.

La conf avec les espions des GAFAs

Anatomie d’une désintoxication au Web sous surveillance

ou comment les concepteurs de sites web fournissent involontairement des données personnelles aux GAFAs. Par Thibault Jouannic

La retranscription de la conférence est là.

• Ne pas utiliser boutons de partage et widgets sociaux : je le fais déjà sur la plupart des projets.
• Prochaine étape : convaincre l’expert analytics de se passer de Google Analytics au profit de Piwik. Ce sera plus compliqué.
• Je note de vérifier que les Google fonts sont bien hébergées localement (l’intégrateur avec qui je travaille le fait déjà mais je n’ai pas pris le temps jusqu’à présent pour les sites perso). Objectif : zéro script externe pour ceux là. Attention aussi aux Maps, CDN, Disqus... avec l’objectif de réinternaliser ces fonctionnalités
• Jetter un oeil au livre Dataclysm : Love, Sex, Race, and Identity—What Our Online Lives Tell Us about Our Offline Selves de Christian Rudder
• Réinstaller Lightbeam pour Firefox : une extension qui crée un graphique des sites tiers avec lesquels vous communiquez sans le savoir.
• la notion de privacy by design
• https (NTS : voir Let’s Encrypt).
• Revoir la conférence SudWeb sur le [stockage des mots de passe des utilisateurs https://sudweb.fr/2011/post/Comment-stocker-les-mots-de-passe-de-vos-utilisateurs] (NTS : ou s’en passer ?)
• loi européenne sur la protection des données

Celle avec les fuseaux horaires

Lancer son site à l’international facile ? Oui, si l’on pense à tout !

Une checklist des points à prendre en compte lors de la création d’un site internationalisé.

• Prévoir la traductions des mots mais aussi des pluriels, l’ordre étant potentiellement différent dans chaque langue
• Internationalisation des prix : pour une même devise, plusieurs formats d’affichage selon les pays, prévoir les devises, le change au besoin, la TVA et les droits de douane.
• Internationalisation des dates ; cf.ISO 8601. Prendre en compte UTC, les différents fuseaux horaires dans un même pays (y compris la France avec l’outre-mer), et les heures d’hivers/d’été arbitraires.
• Formulaires : attention aux règles de validation trop strictes pour des données dont le format varie (ex. téléphone, code postal). Certains utilisateurs peuvent ne pas avoir de distinction nom/prénom ou n’auront pas d’email. Avec les idéogrammes, un seul caractère peut être suffisant pour renseigner un champ.
• Services tiers : les services tiers (ex. Captcha) doivent aussi prendre en compte la langue. Selon le pays certains peuvent ne pas être disponibles (ex. services Google en Chine).
• Design : cas de figure de l’Arabe et de l’Hébreux avec un sens de lecture de droite à gauche.
• Design : prendre en compte la longueur des mots pour la largeur des blocs de contenu : l’allemand, l’anglais et le japonais n’ont pas besoin
• Fonts : elles doivent prendre en compte les alphabets des langues utilisées.
• SEO : Google n’étant pas 1er partout, prendre en compte les autres moteurs de recherche. Même enjeu pour le partage social.
• SEO : attention au duplicate contente potentiel (entre une version française et une version canadienne par exemple) : utiliser les url canoniques.
• utilisation du CDN pour les performances
• Législation : ex. loi européenne sur les cookies, sur le stockage des données personnelles, obligation d’un hébergement sur place en Chine, âge de la majorité variable, etc.
• Fonctionnalités : ex. login social pas adapté pour pays où les réseaux proposés sont peu utilisés ou interdits, système de paiement, cartographie (ex. Google maps pas exhaustif en Corée du Sud, pays en guerre, à la demande du gouvernement)
• Les opportunités business peuvent être spécifiques localement (ex. Über à cannes proposes un service d’hélicoptères pendant le festival)

Conclusion : prévoir l’internationalisation dès le début d’un projet même si pas requis immédiatement pour ne pas avoir à tout reprendre le moment venu.

Celle avec le mécano

DIY Mobile Usability Testing

Démonstration de test d’utilisabilité d’un site mobile, après une comparaison des différentes méthodes de test. Les intervenants nous ont montré comment construire un appareillage de test (à base de mécano et de patafix) permettant au participant de conserver le téléphone en main pour une utilisation plus naturelle, tout en filmant l’écran, le visage et les doigts.

• l’utilisabilité du device a un impact sur le test et l’utilisabilité du site sur ce device
• utiliser le device du participant avec lequel il est familiarisé
• les tests sur le terrain ne donnent pas nécessairement de meilleurs résultats. Sont surtout utiles pour les apps n’ayant vocation à être utilisées dans un certain contexte terrain. On utilise un appareillage porté sur les habits pour le participant et le testeur.
• Capture d’écran : inconvénient de ne pas enregistrerles mouvements des doigts notamment quand l’app ne répond pas (ce que l’on a vu dans le test).
• Document camera : on en trouve autour de 69$. Inconvénient : doit être utilisé à plat (avec la zone de test délimitée par du rubvan adhésif) et donc situation d’usage non conforme aux usages effectifs
• Les cameras montées sur le téléphone : celles du commerce sont coûteuses (349$) d’où le "bricolage" en mécano.

Celle avec le chapeau

Pourquoi le web devrait s’intéresser au livre numérique

NTS : se renseigner sur les Régions CSS

Celle avec la typo vert clair

Open Design

TODO :

• regarder The hour of design sur Youtube où Ricardo Vasquez commente son processus créatif.
• Explorer les open fonts de velvetyne.fr et osp.kitchen.

Celle avec les drones simples à pirater

Web security by design

Cf. Le top 10 OWASP sur owasp.org et Open Samm sur opensamm.org

Celle avec les 115 bonnes pratiques de plus

Éco-conception : mon site web au régime

Quelques chiffres clés :

• les pages web en 2016 pèsent 115 fois plus qu’en 1995 et 3 fois plus qu’en 2010.
• la consommation du web c’est 2 fois la consommation de la France
• Voir le livre avec les 115 bonnes pratiques d’écoconception sur ecoconceptionweb.com. Elles sont aussi sur Opquast sous forme d’une cheklist : Écoconception web
• Tester GT Metrix pour l’anamuse des performances d’un site

À retenir :

• éliminer les fonctionnalités non essentielles
• quantifier selon les besoins (souvent inutile d’afficher les 75 dernières actualités, 10 suffisent)
• concevoir mobile first

Voir aussi :

• atomic css
• tachyon

Celle avec les citations de Terry Pratchett

Retour d’expérience sur la refactorisation d’une application (d’e-mail)

TODO : lire Terry Pratchett

Celui qui veut saboter les frameworks css

Il n’y a pas que class et id dans la vie

TODO :

• Tester a11y.css
• Lire Semantic CSS With Intelligent Selectors de Heydon Pickering

Celle avec Colette

Questionnements sur l’Internet prêt-à-porter

À retenir

• se poser des questions & comprendre le domaine
• design = attention au détail
• partir de la page blanche car le template conditionne
• effet pervers du benchmark : ne pas benchmarker au début du process

TODO : voir ce qu’est une carte d’empathie

Celle avec le marteau de Thor

WWW : World Wide Web, not Wealthy Westerners’ Web

Excellente conférence. Avec la mise en évidence de la problématique de la conception de sites web avec un public global en vue et des contraintes réseau / performances / coûts de sutilisateurs en Asie, Afrique, Amérique du Sud.

Comme Bruce Lawson a présenté la même chose à plusieurs conférences plusieurs vidéos sont dispo sur Youtube. Le son est bon sur celle de You Gotta Love Frontend (NTS : regarder les vidéos d’autres confs en attendant celles de ParisWeb).

Celle avec les générateurs de sites statiques

Ne passons pas à côté des choses simples

TODO : jetter un coup d’oeil à

• https://forestry.io/ : A simple CMS for Jekyll and Hugo sites
• https://www.tricount.com/fr/ : faire les comptes entre amis

Celle avec les jolis dessins de liseuses

Une graphiste parmi les devs

Celle avec @Glazou

CSS et édition WYSIWYG, l’amour vache

Celle avec l’erreur jurassique

Progressive Web Apps : le futur du web arrive

Celle avec les 70 000 retours d’utilisateurs

Leboncoin, les coulisses d’une refonte graphique

Celle avec des acronymes partout

Le déploiement manuel : non merci, j’essaie d’arrêter !

@mariejulien : "haha le n00b il utilise un FTP en drag’n’drop alors qu’il suffit de Diff le git du module NPM avec grunt et push en prod en CLI"

Les slides de David Sferuzza sont ici

Celle avec Giorgio Moroder

L’audio n’a pas dit son dernier mot

Depuis j’ai testé Anchor, une sorte de Twitter audio. Découvert aussi lors de cette conf. que l’app. mobile Spotify donne accès à des podcasts notamment The Big Web Show de Jeffrey Zeldman.