larlet-fr-david/david/blog/2014/cours-iut-responsive-documentation/index.md

title: Cours IUT : Responsive et Documentation
slug: cours-iut-responsive-documentation
date: 2014-11-23
chapo: J’ai préparé des cookies pour la pause du goûter, l’occasion de parler de préservation de la vie privée ?

> Un exemple de manque de pragmatisme : j’ai déjà vu sur un projet, les intégrateurs faire toute l’intégration d’un site avec [flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), puis passer des jours à tout refaire dans une autre feuille de style pour IE, alors qu’il était établi dès le départ que IE8 était dans la cible. Ils avaient envie d’utiliser flexbox, ce qui est compréhensible, mais dans ce contexte c’était une perte de temps pour tout le monde. La bonne technique aurait du être de faire une version correcte sur IE8, avec les techniques utilisables ([ça ne manque pas](http://blog.goetter.fr/articles/les-grilles-en-css/)), et d’ajouter ensuite les beaux dégradés, ombres, etc… que permet CSS3.
>
> <cite>*[Attitude et éthique du développeur.](http://raphael-lemaire.com/blog/2014/11/18/attitude-et-ethique-du-developpeur/)*</cite>

La [dernière session](/david/blog/2014/cours-iut-flexbox-styleguide/) des [cours que je donne à l’IUT](/david/pro/enseignement/) a permis d’attaquer un projet qui servira de fil rouge. La plupart se sont mis en groupe de 2 ou 3 et j’ai 2 personnes qui ont préférées faire cavalier seul, l’une pour tout comprendre et l’autre pour garder son indépendance. La rétrospective nous a permis de discuter des améliorations possibles :

* aborder tout ce qui est relatif à l’approche mobile et *responsive* ;
* avoir la possibilité d’afficher des choses sur le vidéoprojecteur (2 fails consécutifs là-dessus avec un adaptateur oublié la première fois et un vidéoprojecteur incompatible la seconde…) ;
* faire un goûter.

Le prochain cours va donc mettre l’accent sur l’adaptation aux différentes résolutions à l’aide des *media-queries* en présentant les différents outils comme [responsive.is](http://responsive.is) ou des approches comme la [responsive typography](http://ia.net/blog/responsive-typography-the-basics/). Il existe même des moyens de [visualiser les principes de base](http://blog.froont.com/9-basic-principles-of-responsive-web-design/) ou de [réfléchir](http://seesparkbox.com/foundry/responsive_web_design_tips) en terme de [responsive philosophy](http://www.codeandtheory.com/things-we-make/responsive-philosophy). Une première étape sera de pouvoir modifier leur menu géré avec [Flexbox](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html) en changeant la *flex-direction* de *row* à *column* par exemple. Je ne compte pas aller jusqu’à la gestion des différentes résolutions d’images, il y a déjà bien assez à faire [en parlant de contenu](http://responsivedesign.is/design/content-first-design).

**J’ai préparé des cookies pour la pause du goûter, l’occasion de parler de préservation de la vie privée ? :-)**

La seconde partie va encore une fois être l’occasion de les mettre en situation en faisant tourner les sources des différents projets entre les groupes et en leur demandant une amélioration mineure. L’occasion de voir à quel point il est difficile de reprendre un projet et l’intérêt d’une documentation haut niveau en plus du [styleguide](http://styleguides.io/) qu’ils ont commencé à faire lors du dernier cours.

Si j’ai un peu de temps on abordera aussi les notions de performances web car j’ai pu remarquer à quel point les élèves sont enclins à rajouter des polices ou des images assez lourdes. C’est l’intérêt d’avoir demandé à récupérer tous les projets par email en imposant d’avoir moins d’1Mo par site. J’ai ainsi pu leur faire un retour personnalisé sur les choses à améliorer, on verra ce qu’ils en ont fait.