Chrono Formation Charte graphique


9h30

Accueil :
15 min :
Introduction, mot de bienvenue, présentation de la formation :
  • Titre: Charte graphique de votre outils collaboratif
  • Détails pratiques (toilettes, pauses, repas etc).
  • Objectifs généraux de la formation
  • Programme :
    • Titre (accroche):
      • Charte graphique de votre outils collaboratif
      • Autour d'un exercice pratique (mettre en forme une cyberlettre), nous aborderons des notions techniques (CSS et squelettes HTML), de graphisme et d'ergonomie pour personnaliser vos mailing, vos sites Internet collaboratifs.
    • Objectifs
      • comprendre les enjeux d'une charte graphique
      • mettre en oeuvre (conception, HTML, CSS, squelette/template)
      • charte graphique au service de la participation
      • connaître les mails et listes de diffusion
    • Animation
      • points de blocage
      • Définitions
      • exemple collectif => wiki préconfiguré à mettre en place
      • pour les css, on part d'exemples
      • ergonomie: choses à faire et ne pas faire
    • Séquence
      • introduction
      • recueil des représentations (newsletter, mail)
      • réponse aux questions mail
      • charte graphique: notions à partir d'exemple, retour, éclairages jess
      • manipulation => webdevelopper : edit CSS
      • travail pratique pour la réalisation d'une newsletter à la sauce wikini
      • d'autres cas: montrer avec spip
    • Timing (voir plus bas)

9h50

1h10
Présentation des stagiaires et formateurs:
Se présenter, puis dire si on connait : logotype, css/html, w3c
  • Quels sont vos points de blocages que vous avez (ou allez) rencontré dans la mise en place d'une newsletter?
  • Quel est votre objectif à l'issu de cette journée?
-> Noter sur freemind les attentes => Synthèse

11h

1h30
Charte graphique:
définitions, règles, trouver des exemples

12h30

Repas

14h

20 min
Petit rappel sur les courriels et les listes de diffusion :
  • courriels : logiciels de courriel / webmail, format (txt, html), pb d'encodage, d'affichage d'image
  • listes de diffusion / discussion: solutions gratuites, hébegement (on a crée sur notre serveur)

14h20

15 min
technique CSS / HTML
Introduire la notion par des aspects non techniques
Image du squelette et de ses habits

14h35

A faire
créer un nouveau wiki newsletter.
créer une page gabarit de newsletter dans ce wiki

  • principes du wiki (Tout le monde connait? Contexte participatif? Montrer comment éditer la page) 15 min
    • chaque stagiaire copier/colle le gabarit dans son propre wiki ou sur sa page NewsletterToto
  • explication html: exemple avec la structure du gabarit 30 min
    • notions de divs / principes du include
    • ancres html / sommaire html
    • images
  • utilisation de webdevelopper pour les css: pour personnaliser (présentation)
    • mise en forme titres (couleurs, images de fond, cadres)
    • mise en forme contenu texte (bold, interligne, puces)
    • positionnement images (float)

15h45

prévoir une petite pause de 10 min avant travail de personnalisation pour ceux qui veulent

15h55

Travail sur les newsletters des stagiaires

16h20

Envois des cyberlettres sur la liste

16h30

15 min
Graphisme: synthèse de Jess sur la création des stagiaires

16h45

Autres exemples de cyberlettre
30 min
  • exemple A-brest
  • SPIP actualités de Tela)
  • Approche Kawenga

17h15

Bilan
15 min
  • 1 satisfaction, 1 frustration, 1 chose à mettre en oeuvre
  • Autres demandes / besoins pour modules courts