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

title: Cours IUT : les bases
slug: cours-iut-bases
date: 2014-10-21
chapo: Devenir plus autonomes et améliorer la qualité de leurs productions.

> The plan is a lie.

Retours sur [mon premier](/david/blog/2014/cours-iut-arles/) [cours à l’IUT d’Arles](/david/pro/enseignement/). La journée a assez mal commencée avec l’impossibilité de retrouver mes adaptateurs DVI-miniDVI… ce qui ajoutait une *légère* contrainte en plus. Du coup après un petit tour de classe où j’ai pu confirmer que les niveaux étaient vraiment disparates ET que le cours précédents sur les bases de HTML/CSS n’avait pas été assimilé, on est partis sur un petit projet qui nous a servi de fil rouge tout au long de la matinée.  J’ai retenu 2 volontés fortes de la part des étudiants : **devenir plus autonomes et améliorer la qualité de leurs productions.** *Yay!*

Par groupe de 4 ou 5, les étudiants ont créé une page selon le brief précédemment décrit avec pour consigne de se répartir en groupes de niveaux homogènes. Après 45 minutes, l’un des étudiants (pas celui qui était sur le clavier) présente le travail du groupe à toute la classe. On part ensuite sur l’itération suivante avec des contraintes supplémentaires (dont celle permanente d’avoir une rotation au niveau de la personne qui code). On a pu faire 4 itérations sur la matinée avec les contraintes suivantes :

* démarrage libre ;
* repartir sur des bases saines comme [HTML5Boilerplate](http://html5boilerplate.com/) avec les avantages/inconvénients associés, rappels sur les *reset* (connu) et le centrage des éléments ;
* ne pas utiliser les attributs *id*/*class* pour styler la page (merci Vincent !) et donc mieux utiliser les balises *HTML 5* et les sélecteurs, introduction aux sélecteurs *+* et *>* notamment ;
* réorganiser sa CSS pour avoir quelque chose de propre et transmissible, introduction aux [frameworks CSS](http://getbootstrap.com/).

Les itérations se sont fluidifiées au cours de la matinée avec des rappels et des conseils au fil de l’eau de ma part. Les résultats étaient finalement assez différents en fonction de la priorité du groupe : *transmettre et homogénéiser les connaissances (collaboration)* ou *arriver à un résultat en se répartissant les tâches (coopération)*. Les deux approches étaient intéressantes car elles sont représentatives de ce qu’ils pourront rencontrer par la suite.

Quelques réflexions en vrac :

* tous les groupes ont commencé par faire un menu alors qu’une seule page était demandée, assez marrant ;
* aucun groupe ne s’est préoccupé du contenu sur la première itération, l’attention était entièrement sur les images et la CSS ;
* aucun échange n’a été fait entre les groupes, ni même un coup d’œil pour se rendre compte qu’ils avaient pris la même image sur Google pour illustrer le site ;
* j’aurais dû changer l’étudiant qui a initialement pris le clavier (le plus compétent) pour laisser mettre en place les bases par quelqu’un de moins expérimenté ;
* les étudiants ont maintenant leur propre machine (majoritairement des Macbook) et passent par des bidouilles à base de clés USB et de connexions 3G pour travailler alors qu’il y a des machines connectées en Windows juste à côté, je vais essayer d’apporter mon propre réseau local la prochaine fois car la situation est assez hallucinante.

Globalement les étudiants avaient l’air assez satisfaits. La mini-rétrospective en fin de cours a fait émerger 2 propositions pour le prochain cours :

* travailler en plus petits groupes (2/3) ;
* plancher sur un sujet plus proche de leurs intérêts.

Ce sera donc adopté en repartant des bases acquises pour aller vers un peu plus de dynamisme vu qu’ils sont friands d’effets en JavaScript/jQuery, il faut aussi que je leur parle de *Flexbox* et qu’on prenne le temps de faire une introduction aux différentes méthodes pour initier un site. J’ai reçu 3 emails d’élèves qui souhaitaient me montrer ce qu’ils avaient déjà produit (à mon initiative), c’est peu sur un effectif de 24 mais c’est déjà ça :-).