Cours IUT – environnement de développement

15 avr 2015

En arrivant, je présente le contexte.

Vous arrivez dans une agence. C’est votre premier jour. On vous donne une machine vierge sur Linux. Votre premier projet commence demain. Vous devez installer votre environnement de développement qui vous permettra de développer votre premier maquette HTML/CSS.

Idée et contrainte

L’idée de cette session est de préparer les élèves à installer leur environnement de développement ; comprendre que la configuration de la machine est essentielle pour travailler avec l’équipe en place.

Le choix est motivé par la décision d’enseigner Git et par l’impossibilité de pouvoir configurer leur machine à cause des droits administrateur. Je profite qu’ils disposent d’une machine virtuelle installée lors d’un autre cours.

Les conditions

L’exercice est collectif. Tout le monde a les points à condition que chacun ait répondu à l’exercice ; c’est-à-dire que chacun ait une page github.

Le principe n’est pas banal et contraire aux préceptes de l’éducation nationale qui demande une évaluation individuelle. Seulement, le premier jour en entreprise, tout se joue sur sa faculté à lever les fesses de sa chaise et aller discuter avec les autres.

Ils doivent se débrouiller seuls, je suis là pour les guider et répondre à leur question. Je ne donne pas de procédure.

L’installation

Apache

Je leur demande d’installer Apache et de modifier leur répertoire de travail. L’exercice va se révéler complétement inutile puisque nous n’utiliserons pas Apache, mais il permet de comprendre la complexité de la chose.

Dès cette phase, nous avons des élèves qui se soutiennent entre eux, et des élèves qui soutienne un peu le professeur, car il ne connait pas assez linux.

Ruby / Jekyll

Après avoir installé Apache, nous passons à Ruby / Jekyll. Les commandes ne sont pas les mêmes, il faut essayer d’expliquer ce qu’est Ruby et le principe des Gems. Il n’y a pas que PHP dans la vie.

Les élèves comprennent bien le copier/collé. Ils y arrivent surtout quand ils copient sur les bons articles ; leur capacité de recherche ne sont pas toujours au point. Ils pratiquent le « je teste, je verrai bien » ; ce qui n’est pas une mauvaise chose.

Les aptget sont plutôt faciles à faire sur Linux. On commence à essayer à mettre en place Jekyll. Mais, je découvre après recherches que l’installation de la dernière version n’est pas si évidente. Cela ne marche que si on installe une version dev de Ruby (documentée sur un article). Grosse panique derrière mes 14 élèves mais on peut dire que ça fait partie de l’exercice (on apprend en apprenant aux autres).

C’est à peu près à se niveau, en fonction des classes, que la première partie du cours se termine. Il faut 3 heures pour arriver à avoir un Jekyll fonctionnel. Cet article décrit donc 6 heures d’ateliers

Jekyll et Git

Pour voir Jekyll est fonctionnel, on crée un petit fichier index.html et on lance le serveur. Rien de compliqué en soit mais avec 14 configurations différentes, il faut faire pas mal de pédagogie et de débuguage.

On teste les commande Git.

Github Pages

Un des points phare du cours, la création de leur compte Github et la configuration d’un Github Pages pour la réalisation de leur éventuel portefolio professionnel.

Un par un, je les aide à comprendre à se retrouver dans le tutoriel. Il faut créer le dépôt avec le nom approprié (penser au readme) et récupérer ce même dépôt sur leur machine.

L’excercice n’est validé qu’à condition que je sois collaborateur de leur dépôt.

Conclusion

La première expérience de cet exercice donne pas mal de sueurs froides car on se lance dans un exercice dans lequel pas mal de paramètres ne sont pas maîtrisés. Ce qui m’a poussé à faire ça a été qu’ils disposent d’un compte Github, élément essentiel à la recherche de stages et d’emplois.

Ça aura certainement été le cours le plus difficile à préparer ; seulement maintenant, je vais pouvoir enseigner le fonctionnement des « templates » et « moteurs de template » avec Jekyll.

Cours IUT – instancier un Tumblr

27 fév 2015

Le deuxième cours s’est penché sur la réalisation d’un blog sur Tumblr. L’objectif étant de découvrir ce service et d’analyser les types de contenu qu’il propose.

Exercice 1 : Découverte

Pendant une dizaine de minutes, les élèves doivent parcourir plusieurs sites de la plateforme pour voir comment il est utilisé par ses différents acteurs.

Si cette étape permet de faire un peu de découverte, j’ai été un peu déçu par la capacité des élèves à noter les principes stratégiques. Pour moi, ils auraient dû essayer de voir quelques partis pris pour savoir comment valoriser leur contenu, mais la suite m’a montrer ce principe ne leur est pas familié. Si une petite partie d’entre eux est intéressé par le web, la passion n’est pas ce qui les caractérise.

L’exercice reste néamoins important au niveau de la démarche ; pour qu’ils apprennent à ne pas se jeter trop vite dans le code.

Exercice 2 : réalisation d’un corpus documentaire

Suite à cette petite découverte. J’ai pris un petit quart d’heure pour leur expliquer comment fonctionne le service. Le principe du mur de publication et ses différents types de contenu, ses paramètres, etc…

Dans Tumblr, il est possible de publier des contenus en fonction de leur type : billet, citation, image, vidéo,… Pour que le concept (primordial) de type de contenu rentre bien chez les élèves (c’est-à-dire que la forme, le fond et la structure sur le web sont liés), je leur ai demandé de trouver un thème pour la réalisation d’un blog et de chercher sur le web les types de contenus pour éditer leur site.

Cet exercice consiste à comprendre que la réflexion sur le contenu qu’on veut publier passe avant la réalisation graphique ou fonctionnelle qu’on espère avoir. Ainsi, les élèves doivent d’un côté rédiger une fiche de définition avec leur différents paramètres, plus leurs mots clefs de recherche, et d’un autre côté collecter des données qu’ils devront ranger et renommer dans des répertoires.

C’est aussi une manière de les mettre dans la peau d’un rédacteur web ou d’un community manager.

Exercice 3 : intégration et étude du code

Une fois la définition du site et le corpus établis ; il est temps d’intégrer tout cela au site pour obtenir le résultat le plus propre et le plus cohérent possible.

Avant de commencer, je leur présente la fonctionnalité d’édition du code source du thème que propose Tumblr. Cette présentation est un moyen de les familiariser avec un premier moteur de template ; une manière d’enlever certaines peurs ou appréhensions que certains pouvaient avoir en voyant toutes ces couleurs et bouts de codes inconnus.

Une fois l’intégration finie, je leur demande de me trouver certains éléments du code ; de trouver où il est possible de changer l’aspect de la citation par exemple. Et je leur propose, ensuite, de me rendre ce fichier de templating en commentant chaque grande zone définies dans le code.

Conclusion

L’exercice est plutôt sympa, car avec Tumblr on peut aborder les principes de configuration et de templating ; c’est-à-dire un point de vue intégrateur/r »dacteur de contenu ; sans avoir à installer une grosse machine. Les élèves partent tous de la même base.

La réalisation d’un site est largement possible en 3 heures. On a même eu l’occasion de faire un petit tour sur la plateforme de wordpress pour comparer les 2 services.

Pour moi, l’essentiel tenait dans la réalisation du corpus doccumentaire. J’ai insisté sur la rédaction de ces paramètres dans un fichier au format txt. Je ne sais pas s’il vont garder la pratique, mais j’ai insisté plusieurs fois pour dire que sans ce type d’informations, on ne pouvait pas commencer à intégrer un site (un blog dans notre cas.).

Cours IUT – Cerner les métiers du web et savoir ce qu’est un CMS

12 fév 2015

Pour le premier cours, j’ai décidé de casser un peu l’espace de travail en proposant aux éléves du travail de groupe. Mon objectif a été de leur permettre d’avoir une vision des différents métiers et d’essayer de savoir ce qu’on pouvait entendre par le mot CMS.

Introduction

Quelques semaines avant ma première intervention, on m’a donné l’intitulé de mon cours : CMS et E-commerce. Je me demandais bien comment aborder ce vaste sujet qui peut être un peu fourre tout. Au milieu d’un couloir, j’ai pu croiser la personne chargée du même cours l’année précédente ; en quelques mots elle m’a dit qu’elle avait fait installer un WordPress et un Prestashop.

Je comprenais que l’objectif de la formation était que les élèves puissent savoir utiliser ce qu’on appelle un système de gestion de contenu (au sens large) pour éditer un petit site de type blog et mettre en place une boutique E-commerce. Un peu à la manière des lignes sur un CV.

Étant donnée ma grande exprience du métier, soit je pratiquais la même logique et je limitais leur maîtrise à 2 outils très spécifiques, soit je leur donnais des connaissance plus large de maîtrise de ces outils afin de pouvoir intégrer une équipe de développement.

Le problème est que former des éléves à WordPress et Prestashop est complétement improductif. Car cela ne leur donne aucune plus value sur le « marché » de l’emploi. Avec des pauvres connaissances, ils seront en concurrence directe avec des centaines de développeurs qui maîtrisent le sujet bien mieux qu’eux, d’une part ; et d’autre part, cela peut leur fermer des portes pour postuler à des postes dans des structures qui ne pratiquent pas ces CMS ou même les CMS tout cours.

Les objectifs

  1. Atelier 1 : lister les métiers du web / faire un diagramme de l’organisation d’une agence
  2. Atelier 2 : dessiner un diagramme de l’organisation d’une agence
  3. Atelier 3 : dessiner un processus de déroulement projet web
  4. Atelier 4 : comparatif de CMS (recherche web) / définir les critères qui permettent de définir un CMS ?

Atelier 1

L’atelier 1 est un travail en groupe de 4 ou 5. Les élèves doivent d’abord lister les métiers qui peuvent exister dans une agence de 20 personnes.

On demande à chaque groupe de donner leur propositions pour les noter au tableau. Avec des informations, on met des chiffres à côté de chacun des métiers pour montrer de quels métiers on a besoin dasn une structure de 1 à 3 personne / 3 à 10 personnes / 10 à 25 personnes.

On indique ainsi que les métiers essentiels du web ne sont pas directeur financier, directeur artistique ou chef de projets mais au choix graphiste, intégrateur ou développeur. En insistant bien pour dire que celui qui est indispensable pour un projet réussi c’est l’intégrateur car c’est vraiment le meilleur, tout le monde le sait (là tu soulignes qu’on défend toujours les siens).

Atelier 2

Comme pour le premier atelier, les élèves doivent travailler en groupe avec du papier et un stylo. Là, il faut les faire dessiner pour les sortir de cette machine devant laquelle ils passent toute la semaine.

Faites moi un diagramme relationnel entre les différents métiers listés au tableau. Cet excercice permet de mesurer leur vision du monde du travail, de casser une vision qui peut être parfois trop pyramidale et de leur montrer le chemin d’une structure plus applatie de type « Agile ».

J’ai eu un peu de tout comme diagramme, des choses très structurées, d’autres très étirées. Ce qui est constant c’est que les développeurs, les graphistes ou les graphistes sont aussi nombreux que les comptables, c’est-à-dire 1 (une case dans le diagramme). Pour une société de 20 personnes, on a donc 1 seul développeur, ça fait peu de matière productive.

Sur les 2 classes, j’ai eu 1 seul graphe un peu original qui utilisait des boules avec les différents pôles et des flèches pour les relier. Bien entendu avec ce système on avait un chef de projets et un intégrateur qui se baladaient tout seul au milieu de tout ça.

Atelier 3

Encore plus dur, il fallait me dessiner un processus de déroulement d’un projet web. Le principe étant d’indiquer des étapes de projet et de placer les métiers selon ces étapes.

Encore une fois, on a eu des choses assez diverses et très en relation avec ce qu’on a aujourd’hui dans les agences.

Sans pouvoir leur évoquer une plétore de processus d’organisation possible, cet exercice permet de pointer le besoin de faire intervenir les métiers dit « techniques » au niveau de la phase de conception. Éviter de penser que le dévelopeur n’a qu’une fonction d’exécutant.

Atelier 4

Pour finir, je leur ai demandé de chercher des CMS sur le web, de m’en faire un tableau et d’essayer de me rédiger une petite défintion du mot CMS.

Le premier objectif est de comprendre ce qu’est l’Open Source et pourquoi certains systèmes ont pris le monopole de certains marchés. Le second objectif est de leur montrer que l’usage d’un mot peut avoir des significations différentes en fonction des personnes à qui ils parlent et que parfois certains mots sont utilisés à mauvais escient.

Ainsi, ils peuvent faire une différence entre un moteur de blog (WordPress), un CMS (Drupal) et une boutique E-commerce (Prestashop).

Conclusion

Ces exercices sous forme d’ateliers de groupe sont très instructifs pour le professeur qui peut, à partir d’un premier dialogue, estimer le type d’élève auxquels il a affaire.

Ensuite, les ateliers permettent d’obliger les élèves à se représenter visuellement dans une structure d’entreprise ou dans une équipe. C’est pour moi essentiel pour qu’ils puissent se positionner lors de leur recherche de stages.

De plus, on le verra par la suite, cela va me permettre de scénariser les exercices des cours suivants en leur donnant des rôles précis : rédacteur, graphiste, intégrateur, sysadmin…

Piège en haute mer

29 jan 2015

A propos des cours en IUT, j’ai souvent de grandes conversations avec mon collègue Steve Beau qui lui aussi est intervenant. Je lui expliquais les limites d’exigences technique sur les élèves par rapport à mon manque d’emprise sur l’ensemble de la formation.

L’exigence

La formation de jeunes apprentis demande une certaine capacité à pouvoir faire se concentrer des élèves à la réalisation de tâches immédiates, répétitives ou fastidieuses et en même temps à les projeter dans des conditions probables de production in the « real life ».

La question étant de jongler entre le besoin de leur faire maîtriser correctement certains concepts et leur capacité à s’intégrer à une équipe. Le but étant qu’ils sachent estimer où peu se situer un blocage dans le processus afin de demander de l’aide à la bonne personne.

Avec Steve, on parlait des préprocesseurs en me signifiant que ses élèves ne voyaient pas leur utilité puisque, pour l’exercice, il fallait écrire plus de mixins que ce qui était nécessaire en CSS classique ; il y avait plus de code dans les fonctions que dasn le code qui était généré.

Steve de soutenir qu’il importait de leur expliquer que dans un cas de production, cela s’avérait bien utile car le code pouvait être très complexe. Mais à moi de lui répondre que le cas de production n’étant pas précédement vécu (l’expérience), ce discours restait difficile à appréhender pour la majorité des élèves.

Vents et marées

Steve n’a pas tord de soutenir qu’il faut les préparer à la complexité de leur furtur métier en leur expliquant les cas pratiques. Cependant, cette conversation m’a amené à développer l’idée que la classe était un peu comme de l’entraînement en piscine.

Dans un cours, les exercices sont préparés, le déroulement normé afin de permettre de garder un niveau homogène entre des élèves différents qu’il faut évaluer selon une grille de manière régulière. En gros, on a pas le droit d’en perdre et de les laisser se noyer. Pour plus de sûreté et étant donnée le niveau de l’éducation nationale dans le domaine du numérique (en IUT en tout cas), on va rester sur de bonnes bases en natation mais peu de connaissances du grand large.

En effet, la formation est basée sur l’organisation de modules tel que le PHP, le CSS, le HTML, Photoshop, les CMS,… Ce qui peut être assez intéressant pour dissocier/faire comprendre les différents métiers et domaines mais qui est totalement contreproductif pour apprendre le web qui consiste à la réalisation complexe de tâches.

Ceci a pour effet qu’il est assez difficile d’approfondir un cas pratique (la gestion d’une grille dans tel CMS, utiliser github pour héberger un site statique), car cela mord sur le programme des autres cours (CSS, HTML ou Administration). Ainsi, on reste sybillin sur le grand large en restant sur l’exercice de sa discipline (faites moi dix longeurs).

Il existe quand même ce qu’on appelle des projets tutorés (cas réel de réalisation d’un site), ou des cas d’élèves en alternance, cependant la différence qualité de ces personnes ne va pas régler le problème d’homogénéité.

Conclusion

Le cursus en IUT n’est pas si mal pensé, mais je pense qu’il tient sur la capacité des entreprises ou professeurs à bien former nos futurs collaborateurs, c’est-à-dire avoir du temps. Sauf que d’un côté nous avons des professeurs qui ne connaissent peut-être pas suffisamment les processus de production et de l’autre côté des tuteurs qui n’ont pas beaucoup de temps pour former leurs stagiaires (et au milieu des vacataires).

Qu’on garde cette mise en place pour les 2 premières années de cursus d’IUT pour apprendre à maîtriser correctement le code, très bien. Mais on devrait peut-être faire évoluer le programme de licence pour être plus adapté à des élèves en bac+3. Ils n’ont plus vraiment l’âge d’être notés individuellement, ni de devoir faire leur gamme sur des exercices d’école. Mon avis est qu’il faut les pousser vers le monde professionel à travers l’apprentissage de méthodes de conception et de travail collaboratif.

En gros développer le mode de travail sous forme d’ateliers.


© Copyright 2009 bertrandkeller . Merci pour la visite