Avec un peu de retard pour cause d’actualité professionnelle surchargée, je vais donc faire une première synthèse des idées et pistes que vous avez proposé.

Pour rappel, le billet à l’origine de cette synthèse est le suivant :

Appel à contribution : bien débuter l’étude des comportements CSS

Ma proposition initiale :

Pour ma part, pour bien commencer, je conseillerai de débuter par… l’html/xhtml. Bien connaitre les balises, leurs interactions, leur type (en-ligne, bloc), leurs différences d’affichage par défaut dans les principaux navigateurs du marché.

Puis, j’attaquerai les CSS par les positionnements qui sont surement ce qui demande le plus de travail et d’expérimentation.

Le tout organisé autour d’un projet directeur, la création d’un site internet personnel, par exemple, un CV en ligne.

Je vais donc reprendre maintenant chacune de vos propositions classées par contributeur y accoler mes propres réflexions et finir par une synthèse (si possible) pour dégager une piste pour un plan de formation.

---

Réponse de Florent V :

1. Commencer par un apprentissage de base (x)html
2. Puis apprentissage des bases de mise en forme CSS
3. En troisième, les positionnements
4. Le tout validé par l’usage et l’application d’une ressource externe : Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?

La ressource externe servant de base à la méthodologie de création d’une mise en page complète.

Mon point de vue :

C’est pour moi le schéma « classique » d’apprentissage, éprouvé et approuvé, le seul bémol est le désenchantement subi par nombre de personnes qui prennent le temps d’apprendre les bases de mise en forme via CSS et voient ces apprentissages remis entièrement en cause ou presque quand ils passent au positionnements de blocs. C’est une méthode sure mais qui nécessite un accompagnement de l’apprenant.

---

Réponse de Damien Ravé :

Damien pointe la difficulté de l’apprentissage des positionnements via CSS en utilisant l’argument de la trop grande difficulté pour l’apprenant de commencer son apprentissage par des comportements « volatiles ».

Son positionnement ensuite est intéressant, car il divise les apprenants potentiels en deux catégories de compétences :

• Les « old School » habitués aux éditeurs wysiwyg et aux « tricks » de mise en page qu’il faut purger de leurs vieilles habitudes.
• Les nouveaux apprenants vierges de tout savoir de mise en page Web.

Damien fait une proposition d’apprentissage par l’exemple, en commençant par une mise en page simple, un balisage html propre auquel on va appliquer des mises en forme CSS petit à petit.

Mon point de vue :

Prendre en compte les compétences initiales est un point important dans la plupart des formations, mais dans le cas qui nous intéresse, il s’agit de totalement modifier les comportements et les habitudes des apprenants maitrisant déjà une base de mise en page. je pense que dans ce cas précis, nous pouvons utiliser le même plan de formation pour les deux catégories. Quand je me suis décidé à apprendre la mise en page via (x)html/CSS, j’ai définitivement fermé mon dreamweaver et utilisé un simple éditeur de texte, oublié mes vieilles habitudes et tout repris à 0.

---

Réponse de Yvan L. :

Yvan nous propose d’utiliser une ressource externe du site pompage.net : CSS : on reprend tout à zéro !

Mon point de vue :

Dans mon souvenir, cette série d’articles était effectivement intéressant, mais désolé Yvan, je n’ai pas pris le temps de tout relire pour en faire une analyse satisfaisante.

---

Réponse de clb56 :

clb56 nous propose un plan de formation quasi finalisé, je vais essayer d’en faire un résumé car je trouve son idée très intéressante (dis clb56 tu ne serais pas prof des fois ? ;) ).

Débuter par le html :

1. Apprentissage du squelette de base d’une page html
2. Créer du contenu et identifier ce contenu (qu’est ce qui peut être un titre, un sous-titre, un paragraphe, une liste…)
3. Une fois le contenu identifié, apprendre les éléments html correspondants (<hn>, <p>, <ul>…) rester à la base.

Passage au CSS :

1. Présentation du couple propriété/valeur
2. Mise en oeuvre très simples (couleur et taille du texte par exemple) via l’attribut style dans les balises (Ouè, ouè, il faut se débrouiller à faire passer la notion d’attribut sans s’y attarder)
3. Externalisation des css du body = élément style dans le head.
4. Introduire les notions de id et de class.

Je vous conseille de lire l’intégralité du commentaire de clb56 pour bien comprendre le positionnement didactique de sa démarche.

Mon point de vue :

Pas grand chose à y redire, c’est un bon déroulé didactique, même si cela ne concerne que la toute base de l’apprentissage. Je retiens particulièrement la méthode d’apprentissage de l’html qui a l’avantage de laisser l’apprenant dans une position active.

Concernant la « recette de cuisine » du RGAA, je la trouve également très intéressante, on y retrouve les informations que l’on utilise en général pour la création de livrets d’autoformation :

• Finalité/Utilité
• identification des apprentissages
• Difficulté
• Lexique technique nécessaire
• Ressources complémentaires
• Exercices d’application
• Evaluation sous forme d’exercice de synthèse

C’est une forme, il en existe plein d’autres, mais en général on retrouve la plupart de ces éléments.

---

Réponse de Kozlika :

Kozlika nous propose de partir d’un exemple concret de mise en page en partant d’une page simple puis ajouter des éléments et des mises en forme de plus en plus avancées au fur et à mesure des apprentissages.

Mon point de vue :

l’apprentissage par l’exemple est toujours une bonne chose, cela permets à l’apprenant de conceptualiser et visualiser l’avancée de son travail, pour ma part je pense qu’il faut commencer avec pour finalité un document assez complexe, mais avec des éléments aisément identifiables et évolutifs, je crois que le meilleur exemple pour ce genre d’exercices est la création d’un CV tel que l’on peut en réaliser via un logiciel de mise en page ou un traitement de texte, à voir et à tester.

---

Synthèse

L’impression qui se dégage de vos commentaires est que, je le pense, vous avez transposé vos propres méthodes d’apprentissage à ce que vous appliqueriez aux autres. ce n’est pas une critique, je dis ça car je « connais » assez bien certains des commentateurs et que je retrouve beaucoup de ce que vous êtes professionnellement et humainement au travers de vos propositions, c’est quelque chose de très intéressant d’un point de vue de professionnel de la formation.

L’élément fort qui se dégage de vos commentaires, le « fil directeur », c’est la quasi unanimité sur l’apprentissage de html. Je crois que nous sommes tous d’accord pour dire qu’il ne sers à rien de commencer l’apprentissage des CSS sans une compréhension solide de ce qui compose un document html.

Je dis bien compréhension et clb56 a mis le doigt dessus, pourquoi un titre, pourquoi un paragraphe, pourquoi utiliser tel code plutôt qu’un autre…

Pour le reste, dans l’ensemble de vos commentaires, on trouve tout ce qui compose un plan de formation, les points techniques, les exercices d’application, l’évaluation finale sous forme d’un exercice de synthèse.

Je vais travailler là dessus et vous proposer un plan de formation à peu près complet dans les jours à venir qui sera ouvert à vos critiques et commentaires.

Merci de votre participation à toutes et à tous.