Date : 1/10/2004

Client : PagesJaunes

Coordination Client : Pierre Marissal et Vincent Mercier

Objet : Plan de Formation 
"Technologies & Nouveaux Processus de Productions de Sites Web"
•	Séparation contenu de la présentation
•	Normes et standards
•	Gestion de Contenus
•	Animation et Emulation d’un Groupe via Espace Coopératif (wiki)

Animateurs : 
 Christophe Ducamp – 06 03 96 04 92 – christophe@elanceur.org
 Laurent Lunati – laurent@crao.net

Durée Formation : 2 journées (4 et 5 octobre 2004 – Pages Jaunes - Sèvres)

Pré-requis : Connexion Internet + Vidéoprojection de Diaporama

Supports et Post-formation : 
•	 Dépôt de toutes les ressources (Diaporamas + exercices) sur un site web  coopératif et privatisé
•	 Poursuite de l’animation sur un espace coopératif 

Jour 1 :
•	Quand : Lundi 4/10/04 
•	Où : Sèvres Salle Claude Métey (E286) – 9h30
•	Animateurs : Christophe Ducamp et Laurent Lunati
•	Participants : Développeurs de sites, Télérédacteurs, Développement et Recherche, Formation Sites et Outils de production, Graphistes, Conseillers Internet…

Matinée : 
•	Présentation Groupe – Vincent Mercier 
•	Introduction Journée - Christophe Ducamp
•	Introduction Sensibilisation Standards – Introduction CD et Laurent Lunati 
•	Pourquoi les Standards ? – LL + CD
o	Le futur sémantique : XML vs métier « annuairiste »
•	Premiers exemples de mise en application par Laurent Lunati
o	Sensibilisation sur Design Liquide / Fluidité sur un site PagesJaunes
•	Questions / Réponses
Après-Midi : 

•	Panorama Outils de Gestion de Contenu 
o	L’exemple de CityDesk : dissociation contenu et forme 
•	Contenu / le traitement de texte du web pour les rédacteurs 
•	Traduction sites
•	Résumé sur Outils de Gestion de Contenus et respect des standards
•	Mise en application par Laurent Lunati : 
o	exemple de production PagesJaunes transformée en site standard
•	Lancement du groupe : CD - LL
o	présentation espace coopératif (Wiki + Blog)
o	amorçage du groupe
•	Vision / Premières conclusions / Questions : 
o	changement dans l’organisation du travail ? 
•	rédacteurs vs graphistes 
o	Construction d’une base de connaissances / Rôle
o	Introduction brève sur les lobbies et groupes internationaux de designers respectueux des standards.
•	Synthèse
•	Questions et Réponses

Jour 2 : Exercices et Pratiques sur Espace Coopératif

Matinée 
Introduction journée aux graphistes – Laurent Lunati
•	Quand : Mardi 5/10/04 
•	Où : Sèvres salle de formation G218 (sauf changement de dernière minute).
•	La formation débutera à 9h15.
•	Animateurs : Christophe Ducamp et Laurent Lunati
•	Participants : Graphistes

Apprendre à désapprendre 

1 De la conception pour l’imprimerie au Design Liquide

1.1 La mise en page par le tableau

Le web est avant tout un moyen d'échanger des informations. Pendant des années les concepteurs de sites web ont été obligés de jongler avec des langages peu adaptés aux exigences de clients en matière de graphisme.

A alors émergé une méthode de mise en forme de la page via l'utilisation massive de tableaux. Il devenait enfin possible de maîtriser la mise en page.

1-2 L'oubli de la structure

Cette logique de mise en page par les tableaux nous a peu à peu fait oublier que le langage html était destiné à révéler la structure des informations. 

Nous sommes ainsi censés utiliser la balise  <p> pour annoncer un paragraphe, les titres étant eux insérés dans de balises <h1>, <h2>.....
On appelle ces balises Balises structurelles. Elle sont malheureusement absente de nombreux sites.
	
1-3 Emergence de nouvelles pratiques.

Le web est un espace en mouvement, et ces dernières années ont vu émerger des outils et sites d'une nouvelle génération tirant pleinement parti d'une information structurée.

PDA, téléphone, deviennent des alternatives crédibles pour la consultation de sites, pendant que Blogs et CMS dissocient la forme et le fond.

C'est donc une nouvelle façon de concevoir le web qui apparaît, une vision plus respectueuse des standards, plus attentive aux contenus, mais qui impose aux web designers d'oublier certains réflexes tout juste acquis.

2 Structure et contenu avant toute forme

2-1 penser ce que l'on a à dire

La première chose qui change fondamentalement est que le contenu peut exister sans mise en page. 

La multiplication des terminaux d'affichages, et la grande hétérogénéité de ceux ci imposent de penser le contenu de façon autonome, et donc de lui redonner une structure.

 Il convient donc d'utiliser au maximum les ressources existantes du langage HTML.

2-2 Images : comment les traiter ?

Les images doivent aussi faire l'objet d'une réflexion afin de définir leurs rôles exacts.

Illustrations du contenu, elle sont considérées comme partie intégrante de celui ci.

Iconographie de navigation ou de situation, elles doivent pouvoir être remplacées par du texte en cas de non affichage de la mise en forme de la page

Images de décoration qui n'influent que sur la forme

2-3 Exercices pratiques sur sites web production Pages Jaunes

Commentaire de site existant à l'aide de la checklist W3C

2-4 Mise en pratique simple
Laurent Lunati piloté par les graphistes sur un exercice simple (Ils doivent proposer des solutions)
Convertir un site existant (de la mise en page tableaux jusqu’au site sans tables)
A l'occasion de cette exercice évocation des étapes clefs

- Rôle du rédacteur
- la notion de modèle de page	
- Présentation et prise en main de quelques outils (mozilla)
- Editeur de Feuille de Style 	- Validateur W3C

2- 5 présentation et mise en pratique sur une solution existante CityDesk

Après-midi : 

1 Exercices

Présentation de quelques exercices/tutoriels mis en ligne sur espace coopératif
à partir d'exemple concret basé sur css zen garden
- choix par les élèves d'une mise en page (chacun la sienne)
- Utilisation d'outils simple pour modifier la mise en page choisie
-sortir de ces exemple des techniques ou astuces simples pouvant être réutilisées, mise en ligne de ces éléments sur l'espace collaboratif.

2 Invitation à poursuivre le travail en ligne sur espace coopératif
	Schémas d’échanges
	Valorisation des travaux personnels (Stimulation ?)

3 Conclusion
Réponse aux questions 
Débats sur la poursuite de la démarche

FAQ :

1. - Que va apporter ce projet pédagogique de passage aux standards ?
Vous faites partie des premiers producteurs de services en ligne ou propriétaire de site(s), les effets du passage aux standards du Web peuvent s'avérer considérables. 
Passer aux standards, c'est gagner :
•	en maîtrise, 
•	en rentabilité, 
•	en optimisation des processus et des investissements. 
Les standards ne résoudront pas tous les problèmes qui se posent de votre chaîne de production, mais ils auront des effets bénéfiques aussi bien en ce qui concerne les processus internes de l'entreprise (optimisation des modes de fonctionnement, charge de travail, intégration des services en ligne dans l'entreprise) qu'au niveau de la qualité de service finale rendue à vos clients (pérennité, accessibilité, compatibilité technique des sites…)

2 - Est-ce compliqué de faire passer une organisation aux standards ?
Oui et non. De nombreux facteurs doivent être pris en compte. Toutefois, nous optons ici  pour une démarche progressive intégrant formation et suivi sur des espaces coopératifs. 
La mise en conformité du HTML existant avec un des standards les moins exigeants (HTML transitionnel) est simple et d'un profit immédiat. 
En revanche, si vous voulez exploiter au maximum les possibilités des standards, le passage au langage XHTML 1.0 STRICT couplé à l'utilisation des feuilles de style CSS nécessitera l'acquisition de nouvelles compétences et induira certainement la mise en place progressive de nouvelles méthodes de travail. 
Si ce n'est pas très compliqué, cela ne peut pas se faire du jour au lendemain. Cela demande du temps de la part des graphistes. A nous tous de les stimuler pour les faire monter en compétence. Cependant, soyez-en certain, dans tous les cas, cet investissement sera rentable pour tous.

3 - Par quel mécanisme technique les standards vont-ils bénéficier à la production des sites Pages Jaunes ?
Le passage aux standards va tout d'abord vous permettre de vous assurer de la validité du contenu HTML et CSS, (via un validateur ad-hoc). 
La conformité garantit ainsi que la grammaire du Web est respectée, ce qui augmente à moindre coût la compatibilité avec de nombreux navigateurs présents et futurs (notamment les terminaux mobiles). 
La conformité augmente également ainsi la pérennité du contenu. En effet, celui-ci n'aura pas besoin d'évoluer alors que les navigateurs se diversifient et que les modes alternatifs de navigation gagnent régulièrement du terrain.
La mise en conformité vous permet de séparer le contenu de la présentation, de séparer le fond de la forme. 
Selon votre maîtrise du processus de standardisation, vous pourrez choisir entre HTML 4.01 STRICT et XHTML 1.x STRICT, qui garantissent l'absence d'éléments de présentation dans les pages de contenu. 
Vos productions web seront ainsi considérablement allégées, facilitant la maintenance et accélérant ainsi la consultation et les audiences de vos clients. L’offre de mise à jour de sites pourra considérablement se simplifier.
Toutes les données relatives à la présentation seront stockées dans un fichier séparé unique (une feuille de style, aussi appelée CSS). 
Là où une modification du design d'un site nécessitait de multiples interventions dans chaque page concernée, CSS permet de faire évoluer la présentation d'un site entier en modifiant un seul document.