Atelier donné à Paris Web le 3 octobre 2015.

1. Amélioration progressive
De la théorie à la pratique — Atelier Paris Web 2015
Goulven Champenois

2. Amélioration progressive...
Ou pas ?
Un petit quizz pour commencer

3. Amélioration progressive
Un escalator

4. Non !
Un ascenseur

5. Non !
Un QRcode

6. Oui ! Enfin, ça dépend
Un site Responsive

7. Non !
Un raccourcisseur d'URL

8. Ça dépend...
Une icône dans une barre de navigation

9. Non, et tant mieux !
Les freins d'un train

10. Point commun :
La dépendance

11. Appliquer l'amélioration
progressive au quotidien

12. Appliquer l'amélioration
progressive au quotidien
Analyser le type d'action
• Ajout
• Édition
• Réorganisation
• Suppression

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. 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. Travaux pratiques

16. Ajouter l’autocomplétion
à un champ
https://leaverou.github.io/awesomplete/
+
=

17. Marquer un commentaire
comme spam
• Lien ou formulaire ?
• C’est une action qui modifie une ressource : préférer
un formulaire.

18. Styler des checkbox ou radio
• Plugin jQuery ou Bootstrap ? Ou pur CSS ?

19. Styler des checkbox ou radio
http://cdpn.io/e/BoKweG

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. Filtrer une collection
• CSS ou JS ?
cdpn.io/e/YXxxyj/

22. Animer un carrousel
• Plugin jQuery ou pur CSS ?

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. Réorganiser une liste
• Liens ou formulaire ?
• Input, select, ou autre ?
• Comment faire du drag’n drop ?

25. Valider la saisie à la volée
• HTML, CSS, JS ?
• Côté client, serveur, ou
les deux ?

26. Valider la saisie à la volée
caniuse.com/form-validation

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. Questions bonus
• Faut-il faire charger les web fonts par JS ?
• Mobile-first ou IE8 first ?
• Modernizr, jQuery, Zepto... ?
• Angular, Ember, React... ?

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