Comment enseigner l’intégration web ?

CR de l’élaboratoire Sud Web 2014

20 août 2014,
par Romy Têtue

Mots-clefs associés à cet article :

Quel devrait être le contenu et la pédagogie d’un enseignement de l’intégration front ? Mettre en échec, apprendre à apprendre, en s’exerçant dans un framework pédagogique.

Trop de développeurs, tant back que front, écrivent du HTML sans en connaître la sémantique. Si certains maîtrisent, la plupart ignorent les rudiments de ce langage pourtant simple, faisant quantité d’erreurs aussi grossières que dommageables. D’autres domptent les frameworks d’intégration et préprocessent, sans savoir écrire une ligne de CSS, usant parfois d’un tank pour écraser une mouche. Une telle méconnaissance intrigue et pose la question de la formation à l’intégration web front.

Suite au témoignage de l’intégrateur Rémi HTeuMeuLeu, à Sud Web, nous nous posions la question de la formation, plus précisément de comment enseigner le HTML. Qu’a donc de si particulier ce langage, me demandais-je, pour, si simple qu’il soit, être si peu maitrisé ? Alors que c’est le langage de base, incontournable, du Web — c’est l’une des trois principales technologies du Web ! — trop sortent de formation sans l’avoir (suffisamment) pratiqué. Comme nous sommes à Sud Web, Rémi, Delphine et moi-même improvisons un élaboratoire le lendemain autour de cette question, sous forme de discussion ouverte avec une vingtaine de personnes : des gens du métier mais aussi des étudiants et des enseignants.


Comment enseigner l'intégration HTML ?

J’ai relevé trois points intéressants : mettre en échec, apprendre à apprendre, en s’exerçant dans un framework pédagogique.

Apprendre à apprendre

Inquiète des lacunes constatées, mon réflexe était de commencer par un rappel du vocabulaire HTML et les bases sémantiques. Puisque tout repose sur cela, en intégration. Mais très vite nous faisons le constat de la quantité des problématiques à aborder : interopérabilité, maintenabilité, référencement, accessibilité, standards, etc. De la diversité des pratiques : avec ou sans preprocessing, IDE, etc. Comment former à tout cela ? Et est-ce vraiment nécessaire, vu la diversité sur le terrain, des pratiques d’intégration ? Un étudiant formé à l’intégration accessible sera peu aidé lorsqu’il se retrouvera en situation professionnelle de faire du pixel perfect quick & dirty, et inversement. Celui qui aura appris à intégrer dans les meilleures conditions, avec le meilleur framework du moment, sera dérouté par un framework maison tout neuf, aussi spécifique que méconnu, ou un vieux projet sans framework, lourd de ses strates historiques, etc.

Plutôt que l’art et la manière, il faut lui apprendre à apprendre. Les techniques d’intégration évoluent trop vite : il y a de fortes chances pour que les astuces qui lui auront été enseignées soient déjà dépassées à l’issue de sa formation. Plus que des pratiques et astuces, il faut lui apprendre à chercher. Et rester en veille. Plutôt que de réciter par cœur les spécifications W3C, savoir où sont les ressources sur Internet, afin d’être autonome dans ses recherches de solutions. Plutôt que la maîtrise, avoir une base en tout, en lui faisant découvrir la diversité des pratiques. Savoir évoluer et s’adapter, bref rester souple, pour faire face aux diverses situations et contraintes d’intégration, en l’initiant aux différentes problématiques.

Mettre en échec

Les spécifications W3C, bible de l’intégrateur, ne sont pas pédagogiques. « Ce n’est pas en lisant les specs du W3C qu’on apprend l’intégration HTML / CSS » tweete @victorbritopro. Rappelons-nous comment nous avons appris : en nous trompant ! Constater l’erreur et la corriger est plus efficace et édifiant que toute leçon théorique. Il faut donc mettre l’étudiant en situation d’échec. L’amener à corriger pour en tirer la leçon lui-même.

Il faut donc commencer, non par la théorie — il n’y a pas plus rébarbatif qu’un cours d’intégration qui commencerait par le passage en revue des balises HTML et de leur bon usage, ou des contraintes et enjeux de l’intégration web ! —, mais par l’exercice, l’erreur, puis la correction, pour amener ensuite la notion théorique. Ça tombe bien : le jeune padawan est souvent impatient de coder ! Point besoin alors d’être exhaustif. L’élève aura compris qu’il peut/doit aller consulter la documentation au besoin.

Framework pédagogique

Il en découle que nous avons besoin, pour enseigner l’intégration, moins qu’un support de formation sous forme traditionnelle de diapos, que d’exercices concrets, sous la forme d’un tas de code à manipuler, une sorte de framework pédagogique, éventuellement autour d’un projet de réalisation, qui éveille le besoin et la curiosité.

Un tel cadre manque vraisemblablement, aucun des éditeurs ou frameworks existants n’étant adapté à l’enseignement. Je retiens surtout que l’enseignement de l’intégration manque d’outils dédiés à la pédagogie. Il manque un framework HTML/CSS dont les modules serviraient, par leur inclusion progressive, à l’enseignement note alors @borisschapira. Le fameux Bootstrap est cité en (contre-)exemple : certes bien fichu, mais trop complexe pour le débutant, là où il faudrait quelque chose de non optimisé, mais au contraire littéral et explicite, pas forcément utilisable en production, en briques modulaires, pour doser et accompagner l’apprentissage de façon progressive.

Voir en ligne : http://lanyrd.com/2014/sudweb/sczwxp/

Vos commentaires

  • Le 20 août 2014 à 14:16, par Stéphane Bortzmeyer En réponse à : Comment enseigner l’intégration web ?

    J’entends souvent les webeurs parler d’« intégration » mais ça a toujours été nébuleux pour moi. Wikipédia dit que c’est « le développement web côté client » (pourquoi on ne l’appele pas « développement », dans ce cas ?) et, ici, tu parles d’écrire le HTML (ce qui se fait côté serveur). Une bonne définition/explication quelque part ?

  • Le 20 août 2014 à 15:52, par Romy Têtue En réponse à : Comment enseigner l’intégration web ?

    Arf, bonne question ! à laquelle je ne saurais te répondre simplement — c’est le reste, hors web et intégration qui me paraît nébuleux… surtout lorsque j’entends parler de « côté client » ou « serveur » ;)

    Pour schématiser : le « développement front » consiste à construire l’interface (UI), entre la machine (dev back) et l’humain (ergo, UX). Au cœur du dev front, l’« intégration » désigne plus strictement l’écriture en HTML et/ou CSS. La difficulté d’appréhension qu’en ont les développeurs tient sans doute que ces deux langages sont plus descriptifs qu’algorithmiques. Typiquement, le HTML est un langage de balisage, qui sert à structurer l’information (textuelle et multimédia). Le CSS est une surcouche qui en décrit le rendu formel souhaité. Est-ce plus clair ? ou t’ai-je encore plus embrouillé ?

  • Le 21 août 2014 à 00:22, par 0gust1 En réponse à : Comment enseigner l’intégration web ?

    @Stéphane, histoire d’ajouter une couche de nébulosité ;-)

    De mon coté, j’utilise « développement front-end », « intégration web » ou « webdesign » pour décrire mon métier à mes interlocuteurs ; selon leur profil / historique et suivant le contexte.

    Comme l’explique bien Romy, c’est la discipline (ou plutôt l’ensemble des disciplines) qui se situent à l’articulation de l’humain et de la technique, dans la conception des sites et applications web.

    Chacun de ces 3 termes a des connotations différentes, et parfois même des significations différentes selon les contextes et les projets. Ces distinctions font et ont fait couler beaucoup d’encre (et de larmes ;) ) au sein de nos professions. Bref, c’est nébuleux, et ça le restera, je crois.

    Pour en revenir à « intégration web », la définition de Romy me va tout à fait : écriture du HTML/CSS (+ éventuellement JS pour la partie interactive / dynamique des interfaces).

    Et enfin, sur la distinction client-serveur : le HTML est encore souvent généré coté serveur, mais aussi de plus en plus souvent coté client (via JS). Le « coté client » que tu cites, fait référence au consommateur final (le navigateur) AMHA.

  • Le 21 août 2014 à 16:31, par Gaultier En réponse à : Comment enseigner l’intégration web ?

    @Stéphane : C’est effectivement une très bonne question à laquelle Rémy t’a bien répondu.
    Bien souvent, « intégration » et « développement » sont des principes assimilés. Il n’est pas rare, lors d’un cours d’informatique, d’entendre ces deux mots qui pour le professeur vont signifier la même chose.

    Pour ma part, la différence que j’accorde entre le développement et l’intégration est la suivante :

    L’intégration, c’est le côté « pissage de code ». C’est vulgaire, mais c’est comme cela qu’on le désigne dans le milieu. Par exemple, lorsqu’on va faire appel à un intégrateur pour un site internet, ça va être pour créer une structure HTML. Pas besoin de réfléchir réellement, il suffit uniquement d’avoir les connaissances techniques.

    Le côté développement va plus correspondre à la partie « intellectuelle ». Par exemple, si un client me demande demain de créer un logiciel, je vais d’abord concevoir ce logiciel, avec toutes les parties logiques qui le concernent, et je vais ensuite reproduire le code qui va permettre de faire fonctionner ce logiciel. Cette dernière partie pourrait correspondre à l’intégration.

    Pour résumer, et je peux me tromper :

    l’intégration = mise en place du html
    développement = création d’un système de fonctionnement + mise en place du html

  • Le 23 août 2014 à 00:42, par Stan En réponse à : Comment enseigner l’intégration web ?

    Demandez à Matéo d’openclassroom ^^.
    Pour faire apprendre les bonnes pratiques il faut juste dire que : « ce qui est mal est mal » et bien appuyer sur le fait que si tu fais ça ainsi tous va planter : LA PEUR.
    Pas plus compliqué que ça !

    (Pour finir) Beaucoup diront que le plus important c’est que ça marche...

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom