Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amélioration progressive, de la théorie à la pratique

1,232 views

Published on

Atelier donné à Paris Web le 3 octobre 2015.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Amélioration progressive, de la théorie à la pratique

  1. 1. Amélioration progressive De la théorie à la pratique — Atelier Paris Web 2015 Goulven Champenois
  2. 2. Amélioration progressive... Ou pas ? Un petit quizz pour commencer
  3. 3. Amélioration progressive Un escalator
  4. 4. Non ! Un ascenseur
  5. 5. Non ! Un QRcode
  6. 6. Oui ! Enfin, ça dépend Un site Responsive
  7. 7. Non ! Un raccourcisseur d'URL
  8. 8. Ça dépend... Une icône dans une barre de navigation
  9. 9. Non, et tant mieux ! Les freins d'un train
  10. 10. Point commun : La dépendance
  11. 11. Appliquer l'amélioration progressive au quotidien
  12. 12. Appliquer l'amélioration progressive au quotidien Analyser le type d'action • Ajout • Édition • Réorganisation • Suppression
  13. 13. Appliquer l'amélioration progressive au quotidien Choisir le type de contrôle adapté • Lien versus formulaire • Boutons radio versus liste déroulante • Champ texte avec autocomplétion • Etc.
  14. 14. Appliquer l'amélioration progressive au quotidien Procéder dans l'ordre : 1. Coder le HTML 2. Coder le backend 3. Styler en CSS 4. Dynamiser en JS
  15. 15. Travaux pratiques
  16. 16. Ajouter l’autocomplétion 
 à un champ https://leaverou.github.io/awesomplete/ + =
  17. 17. Marquer un commentaire comme spam • Lien ou formulaire ? • C’est une action qui modifie une ressource : préférer un formulaire.
  18. 18. Styler des checkbox ou radio • Plugin jQuery ou Bootstrap ? Ou pur CSS ?
  19. 19. Styler des checkbox ou radio http://cdpn.io/e/BoKweG
  20. 20. Styler des checkbox ou radio Pour le support IE8 • Masquer : préfixer toutes les règles CSS avec :root • Compenser avec JS : ajouter ou retirer une classe au click sur les labels $('label').click(function(e){ // Fix change event not firing on inputs in IE
 var input = $('#' + $(this).attr('for'));
 var state = input.prop('checked');
 input.prop('checked', !state);
 $(this).focus();
 input.change();
 input.focus();
 e.preventDefault();
 });
  21. 21. Filtrer une collection • CSS ou JS ? cdpn.io/e/YXxxyj/
  22. 22. Animer un carrousel • Plugin jQuery ou pur CSS ?
  23. 23. • Avec ~
 http://csscience.com/responsiveslidercss3/ • Avec :target
 http://cssdeck.com/labs/solitary-css3-slider-rotation- transition • Avec :checked+label 
 http://thecodeplayer.com/walkthrough/css3-image- slider-with-stylized-thumbnails Animer un carrousel
  24. 24. Réorganiser une liste • Liens ou formulaire ? • Input, select, ou autre ? • Comment faire du drag’n drop ?
  25. 25. Valider la saisie à la volée • HTML, CSS, JS ?
 • Côté client, serveur, ou les deux ?
  26. 26. Valider la saisie à la volée caniuse.com/form-validation
  27. 27. Les principes à retenir • Ne pas imposer de dépendance • Commencer par le HTML • Styler les états hover/focus/valid/invalid • Dynamiser en JS (capturer submit/click et envoyer via AJAX)
  28. 28. Questions bonus • Faut-il faire charger les web fonts par JS ? • Mobile-first ou IE8 first ? • Modernizr, jQuery, Zepto... ? • Angular, Ember, React... ?
  29. 29. Crédits photo • Escalator : https://upload.wikimedia.org/wikipedia/commons/7/76/ Metro_escalators,_Dupont_Circle.jpg • Ascenseur : http://www.torange-fr.com/Interior/Interior-details/Ascenseur- transparent-22018.html • QRcode sur grille : http://wtfqrcodes.com/post/24848460651/grate-qr-placement • Boston Globe responsive website, featuring Apple Newton, Antoine Lefeuvre https:// www.flickr.com/photos/69797234@N06/7203485148/ • Page d'erreur 404 : https://bitly.com/a/404notfound • iPhone avec icônes de navigation : http://goratchet.com/ • Maglev train station, Shanghai, China : https://www.flickr.com/photos/sharonhahndarlin/ 8357252808 • SPAM, AJ Cann : https://www.flickr.com/photos/ajc1/519906069

×