Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Appliquer l'amélioration progressive au quotidien

Appliquer l'amélioration progressive au quotidien

Atelier donné à Paris Web.

Avatar for Goulven Champenois

Goulven Champenois

October 03, 2015
Tweet

More Decks by Goulven Champenois

Other Decks in Programming

Transcript

  1. Appliquer l'amélioration progressive au quotidien Analyser le type d'action •

    Ajout • Édition • Réorganisation • Suppression
  2. 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.
  3. 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
  4. Marquer un commentaire comme spam • Lien ou formulaire ?

    • C’est une action qui modifie une ressource : préférer un formulaire.
  5. 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();
 });
  6. • 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
  7. Réorganiser une liste • Liens ou formulaire ? • Input,

    select, ou autre ? • Comment faire du drag’n drop ?
  8. Valider la saisie à la volée • HTML, CSS, JS

    ?
 • Côté client, serveur, ou les deux ?
  9. 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)
  10. Questions bonus • Faut-il faire charger les web fonts par

    JS ? • Mobile-first ou IE8 first ? • Modernizr, jQuery, Zepto... ? • Angular, Ember, React... ?
  11. 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