Paris Web 2016
29 Sep 2016
Petit compte rendu de Paris Web 2016.
Anatomie d’une désintoxication au Web sous surveillance
Monétisation de la donnée, de la vie privée.
DataBrokers : courtiers en données -> Acxiom, DataLogics, Mediaposte…
Leur but est de scraper le web, d’acheter des fichiers et de revendre les données.
Ils ont une base de 500 millions d’individus.
Au passage, la page de déontologie d’Acxiom est stupide et hypocrite !
Que peut-on faire avec des données ? Les exploiter et prédire des comportements.
À lire : Dataclisum, livre sur l’analyse des données et qui explique comment faire ressortir des choses intéressantes.
Service gratuit -> publicité ! Affichage de pub prédictif via des études de comportement par les GAFAs.
Principale information exploitée par les GAFAs : la liste des pages que l’on visite. Le tracking…
LightBeam est une application Mozilla qui permet de visualiser la relation entre les sites visités. C’est effrayant !
Toutes données personnelles sont des données sensibles alors que la loi française ne concidère pas cela.
Une donnée peut être sensible, anodine ou indirectement sensible.
Exemple : Une adresse publiée sur societe.com pour un indépendant qui sort avec une policière. Pour le premier, l’info est anodine, pour le deuxième, c’est très sensible.
Pour arrêter de collaborer avec les GAFAs, il faut dératiser les sites :
- Supprimer les scripts google analytics et les remplacer par des solutions d’analyse d’audience perso : logstash, kibana, piwik…
- Supprimer les boutons de partage : twitter, facebook
- Supprimer les fonts : google fonts (alternative : auto-hébergement)
- Supprimer les maps : google maps (alternative : open street map)
- Supprimer les CDN (alternative : auto-héberger ses ressources)
Disqus est un service super pratique mais à éviter !
Concept à intégrer :
- Privacy by design : par défaut, la vie privée est respectée
- Chiffrement obligatoire
- Débloquer Tor
- Stockage des données : d’un côté les données non sensibles et de l’autre les données sensibles
- Recueil des données : récolter que des choses utiles et demander vraiment l’autorisation aux utilisateurs
- Stockage des mots de passe. Conférence intéressante à ce sujet : Comment stocker les mots de passe de vos utilisateurs ?
- Respecter la loi
- Non-conservation : ne revender pas les données de vos utilisateurs
Se poser la question de “Peut-on afficher de la pub tout en respectant la vie privée des utilisateurs ?”, cela revient à se demander “Peut-on perdre du poids en mangeant que du Kouign Amann ?”.
Y’a pas d’avancement, pas de grimaces !
Dans l’étude de Nielsen, les sites ayant travaillé leur utilisabilité ont amélioré de 135% le taux de conversion. Voilà des arguments économique en faveur d’une aproche orienté utilisateur. C’est pour ces raisons évoquées par Nielsen que l’équipe de 1001pharmacies a engagé un travail de refonte.
Le livre “Qualité web : La référence des professionnels du Web” de Elie Sloïm a beaucoup aidé.
Ils ont fait des interviews et des tests utilisateurs pour voir les blocages. Et voici les actions qu’ils ont méné :
Réassurrance sur le paiement sécurisé
Les bonnes pratiques et la qualité ne sont pas une fin en soi. Il faut tendre vers. À lire : “La dette technique” par Bastien Jaillot.
Réassurance : contact sav / support
Réassurance : délai de livraison, mode..
La livraison est critique, il faut être vigilant là-dessus. Le prix, le mode, qui… ? C’est important pour l’utilisateur.
Il faut avoir des étapes claires.
Les formulaires sont très importants. Il faut les rendre utilisable.
La saisie d’adresse est très angoissante pour un utilisateur ! Attention à la multiplication des champs compliqués.
Les champs nom / prénom séparés ne sont pas utilisables.
Attention au contrôle sur les champs de type email, c’est insupportable pour un utilisateur.
L’authentification sur les sites de ecommerce n’est pas une bonne pratique. Cela fait fuire les gens.
Une fois la commande terminée, il faut prendre soin de l’utilisateur.
Le simple message “Votre commande a bien été prise en compte”, c’est insuffisant ! Et les emails marketing ne fonctionnent pas.
Le suivi de commande est très important :
Attente de préparation -> Préparation en cours -> Attente d’expédition -> Expédié -> En cours d’acheminement -> En livraison -> Facture disponible.
Lancer son site à l’international, facile ? Oui, si l’on pense à tout !
La base, la traduction
Passer par des Outils I18N.
Les prix
Gestion des devises, utilisation d’api pour la conversion euro -> dollar, gestion de la TVA, des frais de douane…
Les dates
Respecter la norme ISO 8601 et stocker en UTC.
Attention, plusieurs timezones par pays.
Il faut savoir que les heures été / hiver sont très mal gérés par les gouvernements.
Contrôle des champs
Attention aux contrôles des champs surtout pour les pays asiatiques : nom, prénom, email, téléphone, état (pour les États-Unis)…
Divers
- Les reCaptcha (google) sont bloqués en chine et empêchent la commande
- Le design doit etre retravaillé : sens de lecture des pays arabes
- Contenu textuel des images
- Utiliser une font supportant tous les alphabets disponibles
- Cartographie (maps, openstreetmap, bing)
- Paiement (braintree, worldpay, stripe…)
- Opportunités business “régionalisées” (exemple : uber)
SEO
C’est un point sensible.
Google n’est pas numéro 1 partout dans le monde. Il est inexistant en chine et il n’est pas le premier au japon.
Le partage social n’est pas un automatisme.
Aspect légal
Attention à la loi !
- âge de majorité différent selon les pays
- serveur physique obligatoire dans certains pays (exemple : chine)
- interdit de stocker le numéro CB des clients
- collecte d’impôts régionaux (exemple : airbnb en france)
Pour résumer,
Il faut prévoir l’internationalisation dès le départ au maximum.
Beaucoup de petites adaptations à faire ! Vous allez avoir pleins de questions et c’est normal !
La blockchain, quand l’individu sert au collectif… malgré lui
On fait beaucoup (trop ?) confiance aux intermédaires.
Et ils aiment bien en abuser !
La blockchain est là pour éviter les intermédiaires de confiance.
Tout a commencé avec la finance et notamment le bitcoin.
Satochi Nakamoto est l’inventeur du bitcoin mais il est inconnu.
Blockchain = P2P + Crypto asymétrique + Preuve de travail
Blockchain s’appuie sur le P2P.
Tout le monde fait une copie de la donnée. Bitcoin réplique le registre comptable sur tous les noeuds p2p.
Blockchain s’appuie sur la crypto asymétrique pour sécuriser les échanges de données.
La crypto permet de signer un message pour assurer l’identité (privé -> public) mais aussi pour chiffrer un message à communiquer (public -> privé)
Blockchain s’appuie sur la preuve de travail.
Cela permet d’ordonner les transactions pour éviter de tricher sur les échanges de données.
Pour avoir le droit de publier son bloc de transaction, il faut avoir beaucoup de “0000” en début de SHA256 du bloc. Du coup, beaucoup de chance, beaucoup de travail -> preuve de travail.
Cela coûte et est fait par des “mineurs”.
Du coup, avec tout ça, pas besoin de faire confiance à tout le monde. Les moutons noirs sont éliminés direct car les blocs frauduleux sont remplacés par des vrais blocs.
La sécurité est assuré par le nombre. Si plus de la moitié des mineurs jouent franc-jeu, la blockchain est sûre.
Notion de smartcontract. Exemples :
- Bitproof.io permet de certifier conforme un document. Cela évite de faire appel à des notaires ultra cher
- Slock.it pour ouvrir les appartements sur une durée donnée
- La Zooz est une alternive à Blablacar
- La DAO est une société de capital risqueur
- Storj est un cloud distribué en utilisant les HDD des utilisateurs de la blockchain
On appelle cela des “decentralized apps” ou “DApps”.
Ethereum = Blockchain apps platform
Voir le projet “Zero dollar homepage” de marmelab.
Attention aux réponses asynchrones, le minage prend du temps !
Il faut interroger le réseau pour savoir si la blockchain est diffusé
Attention. Une fois diffusé, un bloc ne peut pas être corrigé !
Pour le minage, il faut l’accompagner d’un peu d’ether. Pour information, Marmelab a obtenu 5 ethers en 5 jours sur un EC2 qui leur a couté 50 dollars. Et cet ether peut être revendu 55 dollars.
Toutefois !
La blockchain n’est pas prete. La documentation n’est pas à jour, les exemples de code sont KO.
Les smartcontracts sont stupides. Pas d’appel à des api externes. Il faut tout pousser dans les smartcontracts.
C’est très compliqué. Les DApps sont ultra-buggés ! En moyenne, 1 bug toutes les 10 lignes de code.
Cela manque de sécurité car le code est la loi, et du coup, si il y a bug, le hacker n’est pas responsable !
Beaucoup de gaspillage. 1 bloc accepté toutes les 10 minutes. 99% des calculs sont rejetés. C’est très coûteux. Et ce sont les utilisateurs de la blockchain qui payent.
C’est très lent les blockchains. Il faut attendre 1h sur la blockchain pour valider d’un point de vue sécurité 1 bloc.
À noter également, si supression des intermédiaires, pas de business model !
Actuellement, 1 bitcoin = 600 dollars. Mais c’est très variable.
Conclusion de l’orateur
Voir Bitnation.
Beaucoup de problèmes mais il faut parier dessus.
Organisez des cryptoparties !
https://dascritch.net/vrac/Supports/1609-PARISWEB-CRYPTO/1_presentation.html#/
Août 2012, Asher Wolf déclare “Il faut des cryptoparties !”
Octobre 2012, première cryptopartie à toulouse.
Décembre 2012, première cryptopartie faite par Snowden à Hawai.
Pourquoi ?
- apprendre à nous exprimer publiquement
- évangéliser les bonnes pratiques
- valoriser nos métiers
C’est compliqué, il faut aider le néophyte et être humble.
Recettes
- restez simple
- pas de prosélythisme politique
- pas de prosélythisme technologique
- dédramatiser les choses et faites les avec humour
Sensibiliser
- syndrôme du “rien à cacher” (OK, tu me donnes ta CB ?)
- pertes des données / souvenirs
Sujets simples
- les métadonnées
- réseau informatique
- internet ?
- https / email chiffré ?
- chiffrement / confidentialité
Fictions
- Cryptonomicon (romans)
- Media entity (bd)
- Antitrust (film)
- Person of interest (série)
UX et éthique
Les CGV.
Temps de lecture moyen : 7 secondes… :-D
Les cookies.
Personne ne prend le temps de lire l’avertissement.
À voir : Ateliers de co-conceptions.
Très intéressant mais conflit d’intérets !
À voir : code de conduite UXPA.
Web security by design
Yahoo : 500 millions d’utilisateurs dans la nature.
Linkedin : 100 millions de comptes piratés.
Castorama : le moteur de recherche suggère des choses bizarres (hacking via injection).
Le règlement européen pousse au “Privacy by design”.
Les mauvaises pratiques
- contrôle des données en entrée
- mauvais usage du chiffrement
- absence de framework
- secrets en dur dans le code
- manque de logs
- des environnements différents : dev / prod
Exemple du drone,
Il génère un wifi ouvert, accès telnet avec un accès root sans mdp.
Apps mobile qui donne des infos à des accès sur les apis des fabriquants.
Beaucoup d’IOT sont problématiques : système d’alarme, caméra de surveillance…
Pourquoi ?
- time to market ralenti
- faible sensibilisation
- mauvaise pratique de dev (top 10 des vulnérabilités)
Les fondamentaux
- Disponibilité
- Confidentialité
- Intégrité des données
- Traçabilité
Il faut avoir une approche par les risques. Raisonner en pas-à-pas.
Ressources
- OWASP : exemples, fiches de bonne pratiques, outils…
- Open SAMM : approche, méthode…
Revue manuelle -> Revues syntaxique -> Analyse statique -> Analyse dynamique -> Test d’intrusion.
Outils
- Z Attack Proxy
- Sonar Cube
Éco-conception : mon site web au régime
greenit.fr
Le web a grandi mais il a grossi aussi.
Le poids d’une page a été multiplié par 115 en 20 ans.
De 2010 à 2015, il a été multiplié par 3.
L’empreinte environnementale représente un sixième continent.
On a besoin d’une démarche de conception responsable des services numériques.
Cela fait 15 ans qu’on éco-conçoit du matériel.
On peut s’appuyer dessus pour la conception de site web.
À lire : “Vers la sobriété heureuse” de Pierre Rabhi.
Il faut dégraisser les sites, revenir au fondamental.
Mise en oeuvre
Les impacts sont situés essentiellement au niveau des terminaux.
Constitution d’un référentiel.
Cf. livre de l’écoconception en 115 bonnes pratiques.
Il existe une toute jeune certification d’éco-conception.
Outils d’évaluation : ecoindex.fr
L’écoconception passe avant tout par le fonctionnel afin de dégraisser l’interface, le graphisme…
Il existe une liste sur opquast liée à l’écoconception.
Pas de prise de conscience sur l’écoconception car on leur a vendu l’aspect immatériel. Le gouvernement a à peine conscience des problèmes d’accessibilités…
Il n’y a pas que class et id dans la vie
Quelques toolkits
- Atomic-css
- Tachyons
Quelques conseils
Écrire des classes à responsabilités uniques.
Ben Frain, en 2014, a prouvé que la contre-performance des sélecteurs, c’est faux.
Sélecteurs pestiférés
- sélecteur universel : *
- sélecteur attr complexe
- sélecteur adjacence et de parenté
- sélecteur éléments surqualifiés
Auteur intéressant : Heydon Pickering.
Framework de Dropbox à regarder : Scooter.
Quand les militaires se prennent au jeu du design sprint
Design Sprint : processus de 5 jours durant lequel on cherche à résoudre un problème par le design. Créé par Google depuis 2010.
Exemple de Design Sprint :
- Lundi : découvrir
- Mardi : rechercher
- Mercredi : décider
- Jeudi : prototyper
- Vendredi : tester
Le but est de s’assurer le plus tôt possible que le service est viable.
Prototype : croquis -> maquette -> photoshop -> Marvelab (intéractivité).
Quelques conseils
Il faut libérer la parole. Le “Tu” est de rigueur.
Mettre en place un petit jeu au départ pour détendre l’atmosphère.
La prise de décision rapide est importante, il faut être en présence des décisionnaires sinon ça ne marche pas.
La phase de préparation d’un design sprint est très importante. Il faut gérer toute la logistique : nourriture, boisson, organisation, répartition des rôles, gestion du planning…
L’accessibilité décomplexée - ce qu’elle peut faire pour vous
L’accessibilité est très allocentrée (centrée sur les autres).
En essayant de penser “égocentré”, l’accessibilité permet aussi de faire progresser ses propres compétences.
Exemple : van11y.net.
Ne passons pas à côté des choses simples
Usages
- Prototypage
- Présentation de contenu
Si besoin de contributions par des non-techniciens, il existe des “Headless CMS”. Exemple : Forestry.io. Il s’appuie sur des APIs pour éviter aux contributeurs d’apprendre git, github…
JAMStack : Javascript, APIs and Markup.
Générateurs : Jekyll, Hugo, Middleman, Gatsby.
Kit de survie en atelier de co-conception fonctionnelle UX
Kit de survie 4 objectifs : se protéger, se signaler, s’hydrater, se nourrir.
Se protéger
Bien comprendre le contexte, anticiper les récalcitrants.
Service Design Toolkit.
DrawTast : apporte une cynergie de groupe au départ de l’atelier.
Alerter
Expliquer, répéter, laisser de la place aux participants, bien restituer la démarche.
S’hydrater, se nourrir
Assister à d’autres ateliers, établir un feedback.
HTML5.1 + web platform APIs
Push API
C’est encore un brouillon.
Compatible : Chrome, Firefox.
Cela permet de pousser des notifications via des webapps.
Cela s’appuie sur les services workers.
Le navigateur a juste besoin d’être actif pour que ça fonctionne. Pas besoin d’avoir le focus sur la page.
Gamepad API
Cela permet d’utiliser des gamepads pour interagir avec Canvas, WebGL.
Compatible avec les gamepads de Nintendo, Xbox, Playstation.
Vibration API
Super simple et permet de faire vibrer le téléphone.
Cela ne fonctionne pas sur Apple car pas d’accès au matériel.
Pointer Lock API
Cela permet de réagir avec l’intégralité de la souris.
Web Speech API
Cela permet de faire des apps avec lesquels on peut parler.
Possibilité de faire de la saisie avec la voie mais aussi de synthétiser du texte en vocal.
HTML5.1
Ajout de balises : picture, srcset.
“images responsives”
details et summary super utile pour afficher, masquer du texte
input type week, month, datetime-local
oncopy, oncut, onpaste
Progressive Web Apps : le futur du web arrive
Avantages
- Linkable : pas d’apps à installer
- Responsive
- Safe : https!
- Connectivity independent : offline first !
- Fresh : toujours à jour !
- App-like interactions : archi “application shell”
- Re-engageable : l’amener à réutiliser l’app (via des notifications)
- Discoverable : possible d’etre indexer via manifest.json
- Installable : via le manifest.json les navs proposent de mettre l’apps sur la page d’accueil
Service Workers
C’est une sorte de proxy programmable dans le navigateur.
Uniquement en https. Et c’est bien normal, ça intercepte toutes les requêtes !
Nouvelle api de cache : Le Cache.
Nouvelle api de requettage (ne pas utiliser XHR car peut-être asynchrone !) : fetch(url) qui retourne une promise.
Exemple : interception pour envoyer des notifications en push.
Leboncoin, les coulisses d’une refonte responsive
Pourquoi le fond jaune moche ? Pour une question de lisibilité et de confort de lecture.
UX d’abord, responsive après
En 2016, 40% visiteurs uniques sur mobile et le taux de conversion est très mauvais.
Carte blanche sur cette refonte graphique.
Brief de lancement : “Faites ce que vous voulez”.
Passage d’un cycle en V à plus d’agilité, équipe multi-compétences.
Accompagnement par Alsacréations.
Chiffres
- Sixième site français
- 54% des internautes sont français
- 24 millions d’utilisateurs
Bonnes idées
- Site de beta (beta.leboncoin.fr) pour tester l’interface avec des vrais utilisateurs proposé à 1 user sur 1000
- refonte par parcours plutôt que par page
- recrutement des beta-testeurs en activant la proposition de bandeau à 100% des utilisateurs
- possibilité de revenir à l’ancienne version à tout moment
- sondage aux utilisateurs en 4 questions (dont champ libre)
-> 70000 réponses obtenues à analyser à la main.
Résultat
5-6 mois de lancement maitrisé.
Pas de bugs majeurs, utilisateurs contents.
Lancement retardé et expliqué par la loi de brooks : “Ajouter des personnes à un projet en retard accroît son retard”.
WCAG.next - where do we go from here?
WCAG 1.0 : mai 1999.
3 niveaux de conformité : A, AA, AAA.
WCAG 2.0 : décembre 2008.
4 grands principes :
- pouvoir etre percu par tout le monde
- manipulation du contenu (souris, clavier…)
- compréhensibilité du contenu
- robustesse
UAAG 2.0 : mêmes principes.
ATAG 2.0
En 2016, Web page vs web app. Il faut mixer les 3 standars : WCAG, UAAG, ATAG.
AG = Accessibility Guidelines
w3.org travaille sur le projet “Silver”. Il devrait prendre 5 à 7 ans.
Du coup, WCAG 2.x !
L’activation de fonctionnalités en production chez BlaBlaCar
État de l’équipe
100 personnes à la technique qui codent, testent et délivrent du code.
C’était un gros bordel.
Beaucoup de problématiques pour delivrer les nouvelles fonctionnalités.
3 problèmes :
- Déployer des grosses fonctionnalités
- Tester une fonctionnalité avec 25M d’utilisateurs
- L’effet capital
Mise en place des “feature flags”.
Un “feature flag” permet d’activer une fonctionnalité ou de la désactiver en production.
Cela va permettre de faire :
- des tests en interne
- permettre le roll-out
Implémentation
Stockage des fonctionnalités + librairie
Exemples de lib PHP :
- etsy/features
- joshuaestes/feature-toggle
- opensoft/rollout
- qandidate/toggle
Ils ont choisis la solution de qandidate.
Storages :
- Redis -> stockage principal
- APCu -> cache
Stratégies :
- Unanimous : toutes les strats soient remplies
- Affirmative : au moins une soit remplie
- Majority : une majorité des conditions soient remplies
Pour les apps natives, dépôt d’un json sur un S3 récupéré par les apps qui implémentent en natif.
Quelques éléments de R&D en vrac
- restlet
- window.speechSynthesis
- makey makey
- node-red
- code de conduite UXPA
- service Design Toolkit