Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Amélioration progressive Un escalator

Slide 4

Slide 4 text

Non ! Un ascenseur

Slide 5

Slide 5 text

Non ! Un QRcode

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Non ! Un raccourcisseur d'URL

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Point commun : La dépendance

Slide 11

Slide 11 text

Appliquer l'amélioration progressive au quotidien

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Travaux pratiques

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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();
 });

Slide 21

Slide 21 text

Filtrer une collection • CSS ou JS ? cdpn.io/e/YXxxyj/

Slide 22

Slide 22 text

Animer un carrousel • Plugin jQuery ou pur CSS ?

Slide 23

Slide 23 text

• 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

Slide 24

Slide 24 text

Réorganiser une liste • Liens ou formulaire ? • Input, select, ou autre ? • Comment faire du drag’n drop ?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

Questions bonus • Faut-il faire charger les web fonts par JS ? • Mobile-first ou IE8 first ? • Modernizr, jQuery, Zepto... ? • Angular, Ember, React... ?

Slide 29

Slide 29 text

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