Amélioration progressiveDe 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

• Suppression

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.

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

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 formulaire.

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

Filtrer une collection• CSS ou JS ?

cdpn.io/e/YXxxyj/

Animer un carrousel

• Plugin jQuery ou pur CSS ?

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

• Avec :targethttp://cssdeck.com/labs/solitary-css3-slider-rotation-transition

• Avec :checked+label http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails

Animer un carrousel

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/invalid

• Dynamiser en JS (capturer submit/click et envoyer via AJAX)

Questions bonus

• Faut-il faire charger les web fonts par JS ?

• Mobile-first ou IE8 first ?

• Modernizr, jQuery, Zepto... ?

• Angular, Ember, React... ?

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