Date et heure
15/06/2018
08:30 - 18:30
Localisation
Télécom physique Strasbourg
300 Bd Sébastien Brant
67400 Illkirch-Graffenstaden
France
Est-il encore nécessaire de présenter la KiwiParty, évènement organisé par la célèbre agence web Alsacréations ? Allez, pour rappel il s’agit d’une journée de conférence web dédiée à la qualité, au design, à la performance et à l’accessibilité du web.
Après une édition 2017 un peu spéciale, nous attendions la date et le programme pour cette année, et les informations viennent tout juste de tomber. Et grande première, des places (gratuites) sont encore disponibles à l’heure où nous écrivons ces lignes, compte tenu de l’annonce surprise, alors qu’elles partent chaque année en moins de 5 minutes. Foncez !
Suivez ci-dessous les conférences en live, retranscrites par WebLife en tant que partenaire média.
Manifeste pour un Web éthique
Par Arnaud Malon
Les piliers d’un web éthique :
- Un web respectueux des gens et de leurs éventuels handicap, que ces déficiences soient sensorielles (cécité, surdité…), cognitives (troubles mentaux, troubles d’apprentissages…) ou motrices (tétraplégie, bras cassé).
- Un web universel, peu importe les navigateurs web utilisés ou encore les technos ; attention aux solutions proposées par Facebook et ses Instant Articles, Apple et ses News ainsi que Google et son AMP (Accelerated Mobile Page).
- Un web antirouille/pérenne, en veillant à ne pas utiliser des technologies dépassées/abandonnées comme le Flash.
- Un web respectueux de la vie privée, mais attention aux plateformes comme Facebook. La RGPD récemment imposée pour réguler les usages.
- Un web respectueux de la planète. Si internet était un pays, il serait le 3ème plus gros consommateur d’électricité au monde (1500 TWH par an). Il faut s’efforcer à optimiser les différents éléments à toutes les étapes du cycle de vie d’un projet web.
Embarquement Agile : Comment transmettre sa culture à une nouvelle personne en 5 semaines ?
Par Florian Ferbach
Embarquement (onboarding) : intégrer la nouvelle recrue en mettant l’humain au centre des attentions.
La méthode Marmelab : Accepter l’expérimentation pour apprentissage par la recrue elle-même, basé sur une checklist des compétences/comportements essentiels pour l’entreprise.
Au travers de challenges sous type de jeu dans l’intégration, pour poser un contexte complètement différent, mettre à l’aise, permettre de décompresser et déconnecter de l’ancienne expérience :
- Planning sur mesure
- Réalisation accompagnée
- Démonstration engagée
- Rétrospective honnête
- Evaluation transparente
Réussite != apprentissage
MJML, le nouveau standard pour écrire nos emails ?
Par Thomas Deneulin
L’intégration de mailing est désormais loin de l’intégration de sites web récents : les tableaux. Et il faut désormais les penser responsives et compatibles avec tous les clients mails/navigateurs. On tente également d’y insérer de plus en plus de choses : menu, carousel, accordion, etc.
Développer en HTML est complexe, d’où la nécessité d’avoir un langage pour faciliter la tâche : MJML, markup language open-source et gratuit développé en JavaScript.
mj-head : possibilité de définir de la configuration / des styles globaux
mj-body : composants de base : text, image, social, divider, spacer, table, button et raw, mais aussi navbar, carousel, accordion et hero.
Il y a de nombreuses contributions sur Github, des packages pour les éditeurs de code et même une MJML application pour desktop. Il y a également un package Node JS, un outil MJML2HTML et une API.
Café / Tea time
Bientôt la pause ! #KiwiParty pic.twitter.com/JrWSyW20py
— alsacreations (@alsacreations) June 15, 2018
CSS3+, une plongée dans le futur
Par Jonathan Giamporcaro
Fonctionnalités récentes :
- Grid layout : Grille de mise en page
- Variable CSS : :root { –main-bg-color: #f00; } .wrapper { brackground: var(–main-bg-color); }
- @supports pour tester la disponibilité d’un fonctionnalité
- Sélecteur d’attribut i : input[type « email » i] {}
Fonctionnalités à venir :
- Nouvelle implémentation de filter()
- Scroll Snap Points : Scroll de points d’accroche en point d’accroche ; utile pour les présentations en ligne
- Pseudo classe de niveau 4 :
- :has :Tteste l’existence d’une correspondance
- :dir : Teste la direction du texte contenu
- :any-link : Cible les a, area ou link avec un attribut href
- :default : Cible l’élément par défaut d’un groupe
- :in-range, :out-of-range : Cible un élément lorsque la valeur est dans/en dehors de l’intervalle autorisé
- :placeholder-shown : Cible les éléments affichant un texte de substitution
- :past, :current, :future : Cible des éléments dans une chronologie
- :nth-child(An+B of selector) : Cible des éléments fils suivant une condition
- Projet Houdini : Hack le moteur de rendu CSS. Groupe de travail composé de Mozilla, Apple, Opera, Microsoft, HP, Intel et Google.
- Layout API : Permet aux développeurs de créer leurs propres algorithmes de mise en pages. Exemple : display: masonry;
- Typed Object Model : Interface JavaScript, avec types et méthodes, permettant de manipuler le CSS
- Paint API : Permet de générer, en JavaScript, une image.
- Autres : Parser API pour gérer de nouvelles unités, Animation Worklet, Font Metrics API, etc.
Slow UX, De l’art de la lenteur dans les processus de conception centrés sur l’usage
Par Raphaël Yharrassarry
Slow UX – Design sprint :
- Lundi : Objectif
- Mardi : Esquisser des solutions
- Mercredi : Décider
- Jeudi : Protyper
- vendredi : Tester
En réalité, 3 semaines avant pour la préparation et 1 semaine après pour la restitution. Apparition du « design marathon » : 5 semaines contre 5 jours.
Le temps et l’UX :
- ~5% de chance que ce qui est mesuré est lié au hasard
- Augmenter le nombre de tests pour préciser les résultats, et donc de temps passé à la tâche
Pratiques pour améliorer la validité :
- Sondes culturelles
- Le tri par cartes
- Les tests utilisateurs en ligne
Les utilisateurs et le temps :
A/B testing : Premiers résultats pas forcément parlant. Il faut prendre en compte l’apprentissage des utilisateurs.
Co-concevoir :
Il faut prévoir un temps incompressible de recherche UX, entretiens, personas, besoins, etc.
Accepter/être conscient que la première solution proposée au client est certainement « médiocre » ; éventuellement suffisante pour satisfaire le client, mais assurément améliorable.
Gérer le mode hors-ligne grâce aux service workers
Par Corinne Schillinger
Un service worker est un fichier JavaScript qui permet de contrôler le site web sur lequel il se trouve ; il est interrogé par le navigateur avant que les requêtes ne partent au serveur.
Le SW, téléchargé et exécuté en arrière plan, parallèlement au contexte de la page, n’a pas accès au DOM mais est du coup non bloquant. Attention, il est nécessaire d’utiliser le protocole HTTPS (sauf localhost), donnant accès aux API de notifications, paiement, etc. (limités au HTTPS). Il est préférable de placer le fichier JS à la racine pour ne pas limiter ses possibilités d’action.
Cycle de vie d’un SW :
- Installation initiale : enregistrement, installation & activation
- Mise à jour : enregistrement, installation, attente & activation
Sustentation (pause déjeuner)
Arrêtez de nous demander combien coûte une ligne de code !
Par Aurélie Guillaume
Origine des questions : Unité de mesure ? Qui la pose ? Pourquoi ? Comment le client calculerait-il ?
Sont à prendre en compte :
- Les coûts humains
- Les coûts de conception : gestion de projet, UI, UX, développement, etc.
- Les coûts de Q/A & processus qualité
- Les coûts de mise en place de l’infrastructure
- Coût du « code legacy » & des évolutions
- Les failles de sécurité ont aussi un coût
- Coût en image
- Perte directe de CA
- Dev en urgence pour sécuriser la faille
- Mise en péril potentielle de la société
- Le coût de la techno, éventuellement propriétaire
- La manière d’implémenter le code peut aussi faire varier le coût : CMS, Framework ou from scratch ?
En bref :
- Il n’y a pas de réponse à la question « Combien coûte une ligne de code ? »
- Le coût d’une ligne de code n’est pas une équation
- Le coût d’une ligne de code devrait plutôt ramener à la valeur d’une ligne de code
- Evangélisons sur ces processus « cachés »
Préprocesseurs vs CSS natif : Le match !
Par Jonathan Levaillant
Il aura fallu attendre 10 ans pour voir arriver les préprocesseurs CSS (2006). Exemple : Sass, PostCSS, Less & Stylus. Fonctionnalités clés : mixin, import, placeholders, etc.
- Imbrication de sélecteurs :
- Conséquence 1 : Reproduction du DOM = manque de flexibilité
- Conséquence 2 : Complexité, lisibilité
- Conséquence 3 : Spécificité des sélecteurs
- Conseil : Se limiter aux pseudo-classes et pseudo-éléments (1 imbrication)
- La directive @extend :
- Conséquence 1 : Le sélecteur étendant est inséré partout où le sélecteur étendu apparaît
- Conséquence 2 : @extend n’accepte par d’arguments contrairement aux mixins
- Conséquence 3 : @extend ne peut pas être utilisé dans une media query
- Conseil : Utiliser des mixins pour plus de flexibilités sans les effets négatifs
3 grosses fonctionnalités en CSS natif :
- calc() : possible de faire calculs avec des unités différentes en conservant le détail du calcul et non simplement le résultat
- custom properties var(–) : bénéficie de la cascade et avec des valeurs de propriétés personnalisées pouvant être manipulées en CSS
- pseudo-classe :matches : simplifier l’écriture de sélecteurs complexes en les regroupant
Le meilleur des deux mondes :
- mixins avec custom properties
- nesting qui se rapproche du sass
Pro tips :
- Pensez avant tout à la méthodologie (BEM, ITCSS, OOCSS, etc.).
- N’abusez pas du nesting : limitez-vous aux pseudo-classes, pseudo-éléments.
- Utilisez la pseudo-classe :matches pour simplifier vos sélecteurs.
- N’utilisez plus la directive @extends, préférez les mixins.
- La fonction calc() est votre amie.
- Variables globales statiques : Préprocesseurs CSS.
- Variables locales dynamiques : Propriétés personnalisées.
- Fonctionnalités programmatiques : Préprocesseurs CSS.
Privacy by design
Par Matthias Dugué aka m4dz
La denrée la plus rare en 2018 : l’attention, qui donne du temps monétisable. Profiler les utilisateurs pour récolter des données. Il faut se soucier de l’endroit où va cette donnée.
Vie privée, du point de vue de l’utilisateur.trice :
- donner trop de pouvoir rend les choses trop complexes
- illusionner sur une protection trop parfaite
- ce n’est pas un enjeu du public
Privacy by Design : concept de 1995 basé sur les 7 points suivants
- Traitement proactive et non réactif
- La vie privée, c’est le réglage par défaut
- La vie privée est incluse dans le design
- Intégralement disponible (sans perte de fonctionnalité)
- On fait de la sécurité point à point
- Transparent sur la visibilité
- On garde ça centré sur l’utilisateur
Les nouveaux outils de compagnie, les PETs :
- Chiffrement
- Gestion des métadonnées et des permissions
- Vérification légale intégrée au code
- Gouvernance des données
- Gestion des identités
Intervenir : à la conception, à l’exécution, l’expérience utilisateur & fin du cycle de vie
Répondre à la liste des 10 risques OWASP.
Tracer le parcours des données, pas des utilisateurs, gérer les identités, faire de la pseudonimisation.
La differential privacy permet de lutter contre ça, pratique visant à ajouter du bruit contrôlé dans un échantillon de données :
- Differential privacy (Wikipedia)
- Harvard University Privacy Tools Project
- Cornell University Library
- Uber SQL Differential Privacy
Si le code est loi, le développeur est politique.
L’Index Mobile First de Google : Révolution ou encore une prise de tête pour les concepteurs de sites web ?
Par Dan Bernier
En décembre 2016, l’usage du mobile a supplanté l’usage de l’ordinateur de bureau.
Lors de l’exploration d’un site, Google : Crawl avec GoogleBot (2 user-agent, 1 dektop & 1 mobile), indexe et classe dans l’index du moteur de recherche. Lors de l’interrogation, c’est l’index desktop qui était utilisé pour afficher les pages de résultats. Désormais, l’index de référence est l’index mobile.
Il faut idéalement un site unique responsive avec une URL par contenu en HTTPS, pas de version mobile avec des URLs différentes pour un même contenu.
The Goutaÿ
À partir de 16h, un goûter bien mérité #KiwiParty #spoiler pic.twitter.com/x70wOhS2qY
— alsacreations (@alsacreations) June 15, 2018
Le Cloud pour les petits
Par Rodolphe Rimelé
Les acteurs du marché : Amazon Web Services, Microsoft Azure, Google Cloud, Alibaba Cloud.
Principe : Augmenter ou diminuer les ressources par rapport à l’audience. Intérêt du cloud : Scalabilité & élasticité pour ne payer que ce qui est utilisé.
Philosophie : Le cloud encourage les bonnes pratiques (gestion des identifications, des droits, des backups automatisés, de l’économie de stockage/puissance). Up time : 99,99999999999%.
Les services sont essentiels et fond la force du cloud ; Amazon : 24 en 2009 et 280 en 2017.
- Iaas : Infrastructure as a service
- Paas : Plateform as a service
- Saas : Software as a service
- Faas : Function as a service
Pièges : Captivité, emplacement des données, inaccessibilité.
Arrêtez de vendre des prestas d’UX dans vos projets web !
Par Pierre Fritsch
L’UX doit globalement faire partie du projet, ce n’est pas un supplément à éventuellement envisager.
Il est possible d’identifier les besoins et comprendre le client/les utilisateurs de plusieurs manières :
- Des entretiens individuels
- Un focus group
- Du shadowing
- Un storyboard
- Co-conception (design studio ou 6-to-1)
- Guerilla testing : tests rapides, avec les bonnes personnes, de façon informelle
En bref, l’UX design c’est :
- Se baser sur les usages pour avancer
- Rencontrer les utilisateurs
- Visualiser et raconter leur histoire
- Les impliquer dans la conception
- Prendre en compte leurs avis pour s’améliorer
The Quïz & Le très distingué ::after
Tous les enregistrements vidéo des conférences de la KiwiParty 2018 sont disponibles sur YouTube : KiwiParty 2018.
