Hop, je sors mon argument d'autorité puisque le XHTML/CSS, je l'enseigne chaque année à des débutants
Certes, ce n'est pas dans la même optique, puisqu'ils ont pour la plupart vocation à devenir développeurs Web. Ce qui, en passant, est un métier différent de celui de designer Web dont la question initiale parle. De plus, j'interviens régulièrement en formation continue.
20h, si on reste au niveau des bases sans entrer dans les subtilités du code, c'est faisable.
En premier lieu, quand on construit un cours, il faut se poser plusieurs questions, faute de quoi on part dans le mur à coup presque sûr, surtout si la formation se déroule sur peu de temps et que tu n'as pas la possibilité de changer d'orientation en cours de route. En gros, il s'agit de savoir d'où l'on part, où l'on souhaite aller, de quel moyens on dispose pour y arriver, qui on doit emmener avec nous, et combien de temps on dispose.
1. D'où l'on part: pour cela, quand on démarre sans information, il faut prévoir un petit questionnaire général d'évaluation initiale. Dans le cas d'une formation initiale avec des étudiants classiques, on peut le faire lors de la première séance. Dans le cas d'une intervention auprès de professionnels, le plus efficaceest l'envoi du questionnaire en gros deux semaines avant la première séance, avec prière de le retourner au moins une semaine avant. Prévoir un petit questionnaire d'une ou deux pages maxi, afin de voir si certains d'entre eux ont une expérience d'Internet (le simple surf est bien mieux que rien!), s'ils ont par le passé bidouillé une page et prévoir, si oui, deux ou trois petites questions sur HTML (quelle est l'élément racine, s'ils ont déjà utilisé un éditeur et si oui lequel...), s'ils connaissent des mots comme HTML/CSS (étant entendu que cela signifie savoir ce que cela recouvre)... Ça permet de détecter parmi eux quelques-uns avec des connaissances de base sur lesquels on peut se reposer un peu pour faire avancer le groupe.
2. Où l'on souhaite aller: quels sont les objectifs finaux? Attention, il ne s'agit pas ici des besoins exprimés éventuellement par le DRH des gens que tu vas former. C'est toi l'expert, capable de placer des mots sur les concepts, et de décider si telle ou telle notion est indispensable bien qu'oubliée dans la demande initiale.
3. Quels sont les moyens? As-tu accès à une salle équipée d'ordinateurs? Si oui, y-a-t-il une connexion Internet? Combien de personnes par poste? Quels sont les logiciels disponibles (DW, ou blon-notes?) Est-ce qu'il y a un écran et un vidéoprojecteur (il arrive encore que ce ne soit pas le cas, et qu'on doive apporter son matériel
? Comment est la salle prévue? Façon salle de classe avec des tables alignées, salle de réunion avec les tables en cercle et un espace au centre pour se mettre en scène, salle informatique avec des écrans qui gênent la vue partout? Peut-on y circuler facilement? Mine de rien, ce genre de détail conditionne fortement le niveau d'interactivité que tu peux te permettre avec les gens que tu dois former.
4. Qui doit-on emmener? Cela signifie connaître la cible. Si la première question a permis de répondre partiellement, il reste des détails à régler. Combien sont-ils (on ne prépare pas une formation pour cinq comme une formation pour douze)? Sont-ils volontaires pour la formation, ou sont-ils envoyés là sur ordre de leur hiérarchie? Quel âge ont-ils (par rapport à toi)? Y-a-t-il des liens hiérarchiques respectés entre eux (je me souviens d'une intervention, pas dans le domaine du Web, auprès de militaires quatari dont un était lieutenant, les autres sous-officiers. Le lieutenant n'était pas le plus fort, il était même en-dessous de la moyenne, mais comme c'était le supérieur, aucun des autres n'osait prendre la parole tant qu'il ne les avait pas implicitement autorisés à parler.)?
5. De combien de temps disposes-tu? 20h, ce n'est pas assez pour se faire une idée. S'agit-il de 10 fois deux heures, de cinq fois 4h? Réparties sur une semaine, un mois, deux mois? Combien de séances sont-elles prévues par semaine? Toutes ces questions vont conditionner ton rythme, sachant que si tu as des séances de 4h, il faut compter en fait entre 3h30 et 3h45 de cours effectif, le reste étant pris par la pause.
Il est donc difficile de te donner une réponse claire, tant cela dépend des réponses aux questions ci-dessus. Je vais partir de l'hypothèse que tu as sous la main un groupe plus ou moins homogène d'une demi-douzaine de personnes sachant surfer sur le Web, y chercher une information, avec un ou deux ayant un peu de connaissances parce qu'ils se sont déjà vaguement intéressés au sujet, en lisant des articles par-ci, par-là dans la presse spécialisée (ces deux là connaissent FireFox, au moins de nom). Tu dois les sensibiliser à un développement Web selon les standards de manière à ce qu'ils soient en mesure de donner des consignes claires à leur développeurs maison ou à leur prestataire, et à comprendre ce que ces derniers pourraient leur raconter. Tu disposes d'une salle avec trois machines, soit une pour deux personnes, différentes mais connectées au Web. La salle a un vidéo, et tu peux passer d'un poste de travail à un autre sans trop faire de contorsion. Enfin, tu dois boucler la formation en une semaine, à raison de séances de cinq séances de 4h réparties sur deux jours et demi (ouch, c'est le cas le plus difficile, tu n'as pas de chance
).
Voici comment je verrais la structure de ton intervention:
1. Présentation du sujet: ce qu'est XHTML/CSS. Historique: guerre des navigateurs, Netscape ultra-dominant, développement des balises propriétaires, le boxon qui s'en est suivi jusqu'à la mainmise de IE6 qui a permis de plus compter sur CSS (eh oui...) et donc de commencer à prendre l'habitude nettoyer son code, la montée des navigateurs alternatifs respectueux des standards... Ce qu'apportent ces derniers: maintenabilité accrue, allègement des coûts de développement et de mise à jour, possibilité d'avoir accès à d'autres média (exemple: imaginer un site Web Mappy couplé à une localisation GPS pour guider un automobiliste par la voix, tout en pouvant lui donner les coordonnées des restaurants, des hôtels ou des curiosités touristiques sur son chemin grâce à une carte interactive: non, les lecteurs d'écran et synthèses vocales ne sont pas susceptibles de ne profiter qu'aux aveugles et mal-voyants
), etc. Pourquoi séparer la structure de la mise en page. Tout ça, c'est du blable, mais qui permet de préparer l'introduction du reste. Pour l'esbrouffe, un petit passage sur le CSS Zen Garden histoire de marquer les esprits. Tu en as pour 2h.
2. Ce qu'est HTML. Ce que sont une balise et un attribut. Notion de validité du code: différence entre HTML et XHTML, transitionnel, framset ou strict, importance de la validation. Structure d'une page: header (ce qu'on doit y trouver,
pourquoi cela doit y être). Le body et les grands éléments structurants: paragraphes, titres, listes. Tableaux, sur lesquels il faut passer autant de temps que les points précédents. Structure d'un tableau de données. Explications de l'histoire et de la mise en page en tableaux (les deux qui s'y connaissent en ont peut-être déjà entendu parler), et pourquoi cela doit être limité. Div. Exercices de structuration: il faut pour cela trouver sur le Web des sites connus sur lesquels tu mets en évidence la structuration en unités logiques (entête, pied de page, menu...) et de contenus: paragraphes, titres, listes de liens, tableaux de données, etc. À l'occasion, en profiter pour introduire de nouveaux éléments moins courants (listes de définition, gros tableaux de données, images avec du sens et leur description longue); prévoir de la souplesse sur les exercices. 2 à 3h de cours+4 à 3h d'exercices.
3. CSS. Feuilles de style interne, externe, attribut style (pas bien. Syntaxe, mais pas la balancer: la laisser découvrir en leur demandant ce que signifie p{color: red;text-align: center} par exemple. Ce n'est pas compliqué, ouf, cela va les rassurer. Expliquer ce que permet de faire le CSS que ne permet pas de faire le HTML de grand-papa; position: fixed, surlignement, encadrements. Facilité de modification de toute l'apparence d'une page en changeant une ligne (je me sers beaucoup, à cette occasion, de la fonctionnalité Edit CSS de la Web Developper Toolbar de FireFox). Mise en forme de texte. Mise en page (là, ça dépend de leur niveau); insister lourdement sur le fait qu'il faut oublier la notion de mise en page au pixel près. Exercices de mise en forme et de positionnements relatifs et absolus. 2h de cours+2h d'exercices.
4. Une séance de 4h où tu leur présentes une réplique de ce que tu leur fourniras en évaluation finale, un mini-projet, par exemple un CV fictif que tu leur donnes au format Word ou Open Office (dans le premier cas, cela permet de montrer la soupe de tags infecte de l'exportation en HTML
). Tu leur demandes de structurer le contenu (ils peuvent faire des copier/coller de celui-ci), puis de le mettre en forme selon un gabarit que tu as préparé au préalable. Il faut t'attendre à avoir mal aux jambes, parce que pour que cet exercice soit efficace, il faut passer d'un poste à l'autre... 4h.
5. L'évaluation finale. Même exercice, mais cette fois-ci avec une page d'accueil d'une entreprise fictive, par exemple. 4h.
Les exercices doivent être simples pour respecter le niveau visé. Le but est de leur montrer que le coupls structure/CSS peut être très efficace, et produire un gain de temps en conception (reproduire en évaluation le même type d'exercice qu'avant leur permet de capitaliser sur ce qu'ils ont déjà fait, et donc d'être plus efficaces en ne reproduisant pas les mêmes erreurs). Il va de soi que pour l'évaluation, ils ont droit aux documents et entre autres à l'exercice
Prépare aussi un petit memento avec les éléments courants et leurs fonctions, et les propriétés CSSles plus utilisés.
Voilà, une heure de travail, cela fera 58 euros HT
