Amélioration progressive
De la théorie à la pratique — Atelier Paris Web 2015
Goulven Champenois
Amélioration progressive...
Ou pas ?
Un petit quizz pour commencer
Amélioration progressive
Un escalator
Non !
Un ascenseur
Non !
Un QRcode
Oui ! Enfin, ça dépend
Un site Responsive
Non !
Un raccourcisseur d'URL
Ça dépend...
Une icône dans une barre de navigation
Non, et tant mieux !
Les freins d'un train
Point commun :
La dépendance
Appliquer l'amélioration
progressive au quotidien
Appliquer l'amélioration
progressive au quotidien
Analyser le type d'action
• Ajout
• Édition
• Réorganisation
• Suppressi...
Appliquer l'amélioration
progressive au quotidien
Choisir le type de contrôle adapté
• Lien versus formulaire
• Boutons ra...
Appliquer l'amélioration
progressive au quotidien
Procéder dans l'ordre :
1. Coder le HTML
2. Coder le backend
3. Styler e...
Travaux pratiques
Ajouter l’autocomplétion 

à un champ
https://leaverou.github.io/awesomplete/
+
=
Marquer un commentaire
comme spam
• Lien ou formulaire ?
• C’est une action qui modifie une ressource : préférer
un formula...
Styler des checkbox ou radio
• Plugin jQuery ou Bootstrap ? Ou pur CSS ?
Styler des checkbox ou radio
http://cdpn.io/e/BoKweG
Styler des checkbox ou radio
Pour le support IE8
• Masquer : préfixer toutes les règles CSS avec :root
• Compenser avec JS ...
Filtrer une collection
• CSS ou JS ?
cdpn.io/e/YXxxyj/
Animer un carrousel
• Plugin jQuery ou pur CSS ?
• Avec ~

http://csscience.com/responsiveslidercss3/
• Avec :target

http://cssdeck.com/labs/solitary-css3-slider-rotation...
Réorganiser une liste
• Liens ou formulaire ?
• Input, select, ou autre ?
• Comment faire du drag’n drop ?
Valider la saisie à la volée
• HTML, CSS, JS ?

• Côté client, serveur, ou
les deux ?
Valider la saisie à la volée
caniuse.com/form-validation
Les principes à retenir
• Ne pas imposer de dépendance
• Commencer par le HTML
• Styler les états hover/focus/valid/invali...
Questions bonus
• Faut-il faire charger les web fonts par JS ?
• Mobile-first ou IE8 first ?
• Modernizr, jQuery, Zepto... ?...
Crédits photo
• Escalator : https://upload.wikimedia.org/wikipedia/commons/7/76/
Metro_escalators,_Dupont_Circle.jpg
• Asc...
Prochain SlideShare
Chargement dans…5
×

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

1 116 vues

Publié le

Atelier donné à Paris Web le 3 octobre 2015.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 116
Sur SlideShare
0
Issues des intégrations
0
Intégrations
398
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×