Prenez du recul sur le web

Prenez du recul sur le web

(Présenté le 26/10/2016 devant les élèves de la Wild Code School à Bordeaux)

Cours - Atelier devant les élèves de la Wild Code School.

L'objectif, leur faire découvrir les problématiques du web sur trois thématiques ( UX / A11Y / Front end development ), et leur permettre de prendre du recul par rapport aux outils et technos qu'ils utilisent.

PS: le Slide noir et le formulaire de contact vide au milieu du cours avait pour but de leur présenté les lecteurs d'écran.

5b9e8248db0345aae8aa1619286d2bb0?s=128

Nicolas Guenin

October 26, 2016
Tweet

Transcript

  1. 1.

    #

  2. 3.

    Ensemble, nous allons voir : #Sommaire UX : User Experience

    A11Y : Accessibilité Web Front-end : Développement de la partie visuelle
  3. 5.

    HTML CSS SASS A11Y Expérience Utilisateur Interface Utilisateur BODYBOARD CONFÉRENCES

    Ateliers VÉLO V Sauts en parachute Javascript jQuery QUALITÉ Performance SEO PHP GUITARE FRIENDS GEEK MANGAS Jeux Vidéos ANGLAIS Tests utilisateur VEILLE TECHNO FORMATIONS Chasse à la licorne HARDROCK Jardinage Cuisine 3 UI
  4. 8.

    Expérience et Interface Utilisateur #UX #UI UX : “Science” visant

    à rendre un système facile d’utilisation, compréhensible, ergonomique et logique. UI : Ensemble des mécanismes, matériels ou logiciels, permettant à un utilisateur d'interagir avec un système. http://flight-system.over-blog.com/article-7298910.html
  5. 9.

    La réflexion du parcours utilisateur se déroule : #UX En

    amont de l’utilisation. Durant l’utilisation du produit. En aval avec le suivi du client.
  6. 10.

    Lors du démarrage d’un projet client, celui-ci doit : #UX

    Avoir une utilité (Il doit répondre à un besoin et des objectifs)
  7. 11.

    Mais aussi : #UX Être utilisable (Personnes souffrant d’un handicap

    ou d’une zone d’utilisation inconfortable)
  8. 14.

    Oups, j’oubliais : #UX Il doit apporter de la SATISFACTION

    (Si vous êtes là, c’est parce que vous aimez le web, alors communiquez le aux autres !)
  9. 15.

    Loi de fitts #UX Une cible est d’autant plus rapide

    à atteindre qu’elle est proche et grande.
  10. 18.

    Loi de Hick Hyman #UX Il est plus facile de

    décider parmi un nombre d’élément réduit.
  11. 19.

    Informer vos utilisateurs #UX * Guidez vos utilisateurs, ce qui

    est évident pour vous ne l’est pas pour tout le monde. https://colonialhoops.blogspot.fr
  12. 20.

    Concevez accessible afin d’éviter l’erreur de vos internautes. Aidez et

    évitez les erreurs #UX #A11Y https://www.tnooz.com/
  13. 26.

    Super, mais l’A11Y c kwa ? #A11Y Prévoir l’utilisation d’un

    produit pour les handica… NON ! L’ A11Y ne se limite pas qu’au personnes souffrant d’un handicap, il s’agit de rendre un produit utilisable par tout le monde.
  14. 27.

    Vous devez comprendre que... #A11Y Tout le monde, vous y

    compris, pouvez vous retrouver dans une situation d’utilisation inconfortable. (Smartphone, tablette, zone bruyante, reflets du soleil, etc.)
  15. 32.
  16. 33.
  17. 36.

    Pensez d’abord à vos internautes #A11Y #BURGER Avoir un site

    fun c’est bien, mais si certains ne peuvent pas l’utiliser c’est quand même moins bien.
  18. 40.

    Et surtout, pensez que votre produit est fait pour être

    utilisé #A11Y (Et pas que par vous !)
  19. 42.

    Choisissez bien vos technos #FRONT • Cms ou pas ?

    • Le problème des thèmes préconçus • Framework ? • L’utilité des langages (ex: Javascript)
  20. 44.

    Il y a des normes et des standards #FRONT #BALISAGE

    • W3C (créé par Tim Berners-Lee) • W3C Validator
  21. 45.

    Optimisez pour l’accessibilité #FRONT #A11Y • W3CAG & W3C Recommendations

    • RGAA • AccessiWeb • AcceDe Web • alt, title • tabindex • accesskey • attributs aria • etc.
  22. 46.

    Optimisez le SEO #FRONT #SEO • Microdatas • RDFa •

    Json-LD • Schema.org • Outil Google
  23. 47.

    Optimisez la performance #FRONT #PERF • Compression d’image • Optimisation

    du code • Éviter les plugins • Mobile First / Content First • Typographie / Local Storage • Script bloquant • etc.
  24. 48.

    Sécurisez vos contenu #FRONT #SECURITÉ • Faille XSS • CSP

    : Content Security Policy • HTTPS et Let’s Encrypt • etc.
  25. 49.

    Pensez à la maintenabilité #FRONT #MAINTENABILITÉ • Structure • Organisation

    des fichiers (atomique, daisy, etc.) • Commentaires • Supprimer les !important en css • Limiter l’imbrication à 3 niveaux • etc.
  26. 50.

    Et selon la cible, prenez en compte la rétrocompatibilité #FRONT

    #RÉTROCOMPATIBILITÉ • Les technos (Flexbox, transformations, svg, etc.) sur IE • Les navigateurs utilisés à l’étranger (Chine, etc.) • L’ordre de lecture des sites à l’étranger
  27. 52.

    TP : Répondre au besoin du client • Interface d’administration

    me permettant de poster des vidéos moi-même • Système pour que les gens puissent mettre des commentaires • Il doit y avoir mes liens twitter, facebook • Je veux pouvoir regrouper mes vidéos dans des catégories • Je dois pouvoir mettre une vidéo en avant Osteo-Congress Organisateur de congrès d’ostéopathie Budget pour mon site : 15 000 euros Délai : 7 mois
  28. 55.

    Un peu de veille techno #VEILLE #TWITTER #FLUX RSS @WalterStephanie

    @amelieboucher @SaraSoueidan @iamvdo @Sylduch @L_Demontiers @goetter @nicolas_guenin https://www.w3.org/ https://css-tricks.com/ http://tympanus.net/codrops/ https://blog.stephaniewalter.fr/ http://newflux.fr/ http://www.uxmatters.com/ https://blog.prototypr.io/