Amélioration progressive
Goulven Champenois – Lyon, BlendWebMix 2015
Amélioration progressive
Goulven Champenois – Lyon, BlendWebMix 2015
Le Boston Globe en 2011
sur un Apple Newton
(1993-199...
Quand ce n'est pas de
l’amélioration progressive...
Janvier 2014
Sky broadband (FAI anglais) bloque le CDN de jQuery
Les abonnés ne peuvent plus utiliser la plupart des sites...
Solution :
Ne PAS dépendre de JS.
Commencer par du HTML qui fonctionne seul.
Quand ce n'est pas de
l’amélioration progress...
Février 2011 : Lifehacker, Gawker, Gizmodo et d’autres
sites n’affichent plus rien.
À l'origine : une erreur en JS.
http://...
Solution :
HTML5 history API
Tutoriel sur CSS tricks
Attention : pubs et scripts tiers

peuvent tuer votre site aussi...
1...
28 avril 2015
En Chine, tous les sites affichant le bouton « Like » de
Facebook deviennent temporairement inaccessibles.
ht...
Solution :
AJAX-include
Attendre le chargement de la page pour remplacer un
lien vers la page FB par le Javascript du bout...
– Désolé de te déranger pendant tes vacances, mais...
Partagez vos mots de passe

Laissez les intervenants configurer les valeurs non définitives

Utilisez les palettes dynamique...
Autrement dit :
Ne soyez pas une dépendance
Votre code non plus
« Commencer par la version de base, puis ajouter des
améliorations pour ceux qui peuvent les gérer. »
— Tommy Olsson, 2007...
1. Écrire le HTML
2. Coder le traitement côté serveur
3. Styler en CSS
4. Dynamiser en JS
Amélioration progressive :
La th...
Un HTML bien pensé sera :
Accessible
Facile à styler
Facile à dynamiser
Amélioration progressive :
La théorie
Amélioration progressive :
Exercices pratiques
Autocomplétion
https://leaverou.github.io/awesomplete/
+
=
Styler des inputs radio ou checkbox
http://cdpn.io/e/BoKweG
Zéro Javascript !
En pur CSS, grâce au sélecteur ~
Filtrer une liste
cdpn.io/e/YXxxyj/
Ajouter un Carrousel
http://www.doisjeutiliser.fr/unCarrousel/
Carrousel en pur CSS
Avec ~

http://csscience.com/responsiveslidercss3/
Carrousel en pur CSS
Avec :checked+label 

http://thecodeplayer.com/walkthrough/css3-image-
slider-with-stylized-thumbnails
Amélioration progressive :
les 4 commandements
๏ Des dépendances tu n’imposeras pas
๏ Par le HTML tu commenceras
๏ Les évé...
Lectures utiles
• Everyone has JS, right? http://kryogenix.org/code/browser/
everyonehasjs.html
• Myth-Busting Progressive...
Crédits photo
• Boston Globe responsive website, featuring Apple Newton,
Antoine Lefeuvre https://www.flickr.com/photos/
69...
Prochain SlideShare
Chargement dans…5
×

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

687 vues

Publié le

Conférence donnée à Blend Web Mix le 29 octobre 2015.

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

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

Aucune remarque pour cette diapositive

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

  1. 1. Amélioration progressive Goulven Champenois – Lyon, BlendWebMix 2015
  2. 2. Amélioration progressive Goulven Champenois – Lyon, BlendWebMix 2015 Le Boston Globe en 2011 sur un Apple Newton (1993-1998)
  3. 3. Quand ce n'est pas de l’amélioration progressive...
  4. 4. Janvier 2014 Sky broadband (FAI anglais) bloque le CDN de jQuery Les abonnés ne peuvent plus utiliser la plupart des sites. Quand ce n'est pas de l’amélioration progressive...
  5. 5. Solution : Ne PAS dépendre de JS. Commencer par du HTML qui fonctionne seul. Quand ce n'est pas de l’amélioration progressive...
  6. 6. Février 2011 : Lifehacker, Gawker, Gizmodo et d’autres sites n’affichent plus rien. À l'origine : une erreur en JS. http://isolani.co.uk/blog/javascript/ BreakingTheWebWithHashBangs Quand ce n'est pas de l’amélioration progressive...
  7. 7. Solution : HTML5 history API Tutoriel sur CSS tricks Attention : pubs et scripts tiers
 peuvent tuer votre site aussi... 11 Steps to protect against third party script failure Quand ce n'est pas de l’amélioration progressive...
  8. 8. 28 avril 2015 En Chine, tous les sites affichant le bouton « Like » de Facebook deviennent temporairement inaccessibles. http://krebsonsecurity.com/2015/04/china-censors- facebook-net-blocks-sites-with-like-buttons/ Quand ce n'est pas de l’amélioration progressive...
  9. 9. Solution : AJAX-include Attendre le chargement de la page pour remplacer un lien vers la page FB par le Javascript du bouton Like. Quand ce n'est pas de l’amélioration progressive...
  10. 10. – Désolé de te déranger pendant tes vacances, mais...
  11. 11. Partagez vos mots de passe Laissez les intervenants configurer les valeurs non définitives Utilisez les palettes dynamiques, des effets non destructifs... Partagez vos sources (Git) Commentez votre code Nommez vos calques Soignez le texte de vos commits, des tickets et commentaires Configurez les préprocesseurs sur tous les postes Formez vos collègues … Et partez très loin ! Pour sauver vos vacances…
  12. 12. Autrement dit : Ne soyez pas une dépendance
  13. 13. Votre code non plus
  14. 14. « Commencer par la version de base, puis ajouter des améliorations pour ceux qui peuvent les gérer. » — Tommy Olsson, 2007 Dégradation élégante et amélioration progressive (traduction) Amélioration progressive : La théorie
  15. 15. 1. Écrire le HTML 2. Coder le traitement côté serveur 3. Styler en CSS 4. Dynamiser en JS Amélioration progressive : La théorie
  16. 16. Un HTML bien pensé sera : Accessible Facile à styler Facile à dynamiser Amélioration progressive : La théorie
  17. 17. Amélioration progressive : Exercices pratiques
  18. 18. Autocomplétion https://leaverou.github.io/awesomplete/ + =
  19. 19. Styler des inputs radio ou checkbox http://cdpn.io/e/BoKweG Zéro Javascript !
  20. 20. En pur CSS, grâce au sélecteur ~ Filtrer une liste cdpn.io/e/YXxxyj/
  21. 21. Ajouter un Carrousel http://www.doisjeutiliser.fr/unCarrousel/
  22. 22. Carrousel en pur CSS Avec ~
 http://csscience.com/responsiveslidercss3/
  23. 23. Carrousel en pur CSS Avec :checked+label 
 http://thecodeplayer.com/walkthrough/css3-image- slider-with-stylized-thumbnails
  24. 24. Amélioration progressive : les 4 commandements ๏ Des dépendances tu n’imposeras pas ๏ Par le HTML tu commenceras ๏ Les événements tu captureras ๏ Un retour visuel to donneras
  25. 25. Lectures utiles • Everyone has JS, right? http://kryogenix.org/code/browser/ everyonehasjs.html • Myth-Busting Progressive Enhancement http://www.sitepoint.com/javascript- dependency-backlash-myth-busting-progressive-enhancement/ • The True Cost of Progressive Enhancement https://medium.com/ @AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979 • I have no idea what the hell I am doing http://bradfrost.com/blog/post/i-have- no-idea-what-the-hell-i-am-doing/ • Sky Broadband mistakenly blocks jQuery, breaks Internet for its users http:// www.theguardian.com/technology/2014/jan/28/sky-broadband-blocks-jquery- web-critical-plugin
  26. 26. Crédits photo • Boston Globe responsive website, featuring Apple Newton, Antoine Lefeuvre https://www.flickr.com/photos/ 69797234@N06/7203485148/ • Infinity Pool, Sarah Ackerman : https://www.flickr.com/photos/ sackerman519/5047591825 • Chain expressing freedom, Stephh : https:// commons.wikimedia.org/wiki/File:Chain_expressing_freedom.JPG • SPAM, AJ Cann : https://www.flickr.com/photos/ajc1/519906069 • Merci à Marie-Cécile Paccard pour ses retours !

×