A2 – Atelier Web

Planning des cours : 48 heures TP (12×4)

Objectifs du cours : Connaître, prendre en main et maîtriser les plateformes de publication web (CMS). Réaliser un site web complet. Réaliser les supports d’accompagnement du projet et de maintenance du site. Gérer l’hébergement, le nom de domaine et l’installation (serveur) du site. Remettre le tout au client final -)

Pré-requis :

  • Cours documents structurés (première année / Bernard Germain)
  • Cours Ecriture numérique (deuxième année / Olivier Ertzscheid)
  • Toutes les notions abordées dans ces deux cours seront considérées acquises et doivent donc être revues si nécessaire

Evaluation du cours : Une note globale chaque semestre, soit 2 notes au total

  • Site(s) web(s) réalisé(s) : site lui-même + documents d’accompagnement + gestion projet.
  • et peut-être 1 ou 2 exercices courts (type QCM) réalisés en atelier.

==> Cours 1 // 9 Septembre // 8-12h-10h

 

« Trucs à faire pour le prochain cours » :

  • aller visiter tous les jolis sites mentionnés ci-dessus pour voir ce que vous devrez être capable de réaliser
  • pour les plus courageux/euses, tester l’interface de SPIP avec le lien ci-dessus.

Cours 2 // 23 Septembre // 8-12h

 

  • Bonjour, vous êtes en cours, mais moi je ne suis pas là. Oooooooooooh 😦
  • Je ne suis pas là, mais je préfèrerai être là vu que je suis actuellement couché dans mon lit avec un énorme lumbago et que j’ai très mal. Re-Ooooooooooh 😦
  • Heureusement, comme je suis sympa j’ai trouvé de quoi vous occuper pendant deux heures. Aaaaaaaaah 🙂 Après quoi c’est Bernard Germain, aka Spip-Man qui viendra vous initier aux joies du maniement de Spip. Wouééééééééé 🙂
  • Donc voici ce que je veux que vous fassiez de 8 heures à 10 heures :
  • Primo : Découverte de l’interface de publication et des fonctionnalités de WordPress. (Rappel : WordPress est un CMS que nous allons apprendre à utiliser pour créer des blogs). Rendez-vous sur la page http://demo.wordpress-fr.net
  • Il s’agit d’un blog de démonstration, que tout le monde peut utiliser, et qui est remis à « zéro » toutes les deux heures. Ce qui veut dire que vous pouvez y aller et bidouiller dans tous les coins sans crainte de « casser » quelque chose.
  • L’objectif est de découvrir les fonctionnalités de WordPress dans l’ordre. Pour cela :
  • 1. Rendez-vous sur la page de connexion (http://demo.wordpress-fr.net/wp-login.php) et tapez « Admin » comme login et « Admin1 » comme mot de passe. Ca y est, vous êtes « loggués ».
  • 2. Explorez les fonctionnalités proposées.
  • 3. A la fin des deux heures, chacun(e) devra être capable de me montrer : comment on écrit un billet, comment on écrit une page, comment on ajoute une catégorie, comment on crée des catégories arborescentes (= emboîtées les unes dans les autres pour les malcomprenants), comment on ajoute des liens, comment on change de gabarit (ou de « thème »), comment on modifier l’image d’en-tête du blog, et à quoi servent les petits « widgets » (http://demo.wordpress-fr.net/wp-admin/widgets.php)
  • Naturellement, lors du prochain cours c’est l’un ou l’une d’entre vous qui viendra au tableau expliquer le tout à ses petits camarades.
  • Une dernière chose encore si par hasard vous aviez fini de faire joujou avec WordPress avant les deux heures imparties : parmi nos projets web de l’année, nous aurons à réaliser un site pour une Imprimerie d’une charmante bourgade vendéenne. Et un autre site pour un magazin d’antiquités, d’objets d’art et de brocante. Donc partez donc fouiner sur le web pour consulter des sites et des blogs sur ces deux projets, pour voir un peu ce qui se fait, ce qui est sympa, ce qui pourrait être fait … bref allez puiser de l’inspiration pour pouvoir ensuite démarrer plus rapidement sur ces projets.
  • Voilà. Rappelez-vous qu’à 10H15, Bernard vient vous voir jusqu’à midi pour vous montrer l’utilisation de SPIP (bien plus compliquée et bien moins ergonomique et fonctionnelle que celle des blogs … mais ça vous ne lui dites pas que je vous l’ai dit hein ? 😉

Cours 3 // 7 Octobre // 8-12h (coupure Internet … la malédiction continue …)

 

AUJOURD’HUI AU PROGRAMME

  • Principes de fonctionnement des blogs (permaliens, commentaires, rétroliens, gabarits …) …
  • Constitution des groupes projets

FIL ROUGE DU COURS (noté)

  • Publier sur le site infocom : AU MOINS un article long (c’est à dire un peu fouillé, et éventuelement illustré avec des photos) ou deux articles courts PAR SEMAINE.
  • Me contacter (mail) si vous avez besoin de créer une nouvelle catégorie ou sous-catégorie sur le site.
  • FIL ROUGE SITE INFOCOM
  • 7/10 ==> 21/10 :
  • 21/10 ==> 25/11 :
    • Chloé Derullière (article 1, article 2),
    • Lise Guillotin (article 1, article 2)
  • 25/11 ==> 9/12 :
    • Marion Ripault (article 1, article 2),
    • Marion Ferbezar (article 1, article 2)
  • 9/12 ==>  13/01 :
    • Elise Roger (article 1, article 2),
    • Elodie Contenot (article 1, article 2)
  • 13/01 ==> 27/01 :
    • Marion Trommenschlager (article 1, article 2),
    • Sarah Amiaud (article 1, article 2)
  • 27/01 ==> 24/02 :
    • Nikita Maloman (article 1, article 2),
    • Joseph Lurton (article 1, article 2),
    • Camille Coupechoux (article 1, article 2)
  • 24/02 ==> 10/03 :
    • Celia Lafourcade (article 1, article 2),
    • Anthony Bordiec (article 1, article 2)

LES PROJETS ET LES GROUPES PROJETS :

  • EMMAUS 44 :
    • Marion Trommenschlager / Sarah Amiaud / Damien Jaudouin (chef de projet) / Lise Guillotin.
    • Site web existant : http://emmaus44.free.fr/ //
    • Rencontre prévue avec le client Jeudi 23 Octobre matin.
    • Plateforme choisie : Blog WordPress hébergé sur le compte Free du client.
  • IGO (imprimerie du poiré sur vie) :
    • Bastien Baudouin (chef de projet) / Joseph Lurton / Elise Roger / Camille Coupechoux.
    • Site web existant : http://imprimerie-igo.fr/ //
    • Rencontre prévue avec le client Jeudi 23 Octobre après-midi.
    • Plateforme choisie : blog WordPress. Pas de plateforme d’héhergement.
  • Bleyonaz atelier (meubles en carton) :
    • Marion Ferbezar / Nikita Maloman (chef de projet) / Chloé Derrullière / Marion Ripault // Rencontre prévue avec le client Vendredi 24 Octobre.
    • Plateforme choisie : Blog WordPress. Pas de plateforme d’hébergement
  • GEA / Année de la comm. :
    • Elodie contenot / Anthony Bordiec (chef de projet) / Célia Lafourcade

Cours 4 // 21 Octobre // 8-12h ==> Cours REPORTE (2 présentes …)

 


Cours 5 // 14 novembre // 14-18h

 

  • Pour les groupes : Bleyonaz, Emmaus, IGO
  • Côté méthodo de projet : crééz-vous un dossier partagé auquel TOUT LES MEMBRES DU GROUPE projet pourront avoir accès (même si l’un d’entre eux est absent à un cours) et dans lequel vous déposerez systématiquement tous vos documents.
  • On avance sur le cahier des charges : analyse de l’existant (si existant il y a) avec une mise à plat dessinée de l’arborescence actuelle (sous forme de schéma) /  « veille » et recherche documentaire sur des sites de contenus semblables à la recherche de bonnes idées et/ou de services à valeur ajoutée. But du jeu : réfléchir à une arborescence ET effectuer un audit de l’existant : Qu’est-ce qui existe ? qu’est-ce qu’on garde et pourquoi ? Qu’est-ce qu’on ne garde pas et pourquoi ? Qu’est-ce qu’on peut proposer comme services à valeur ajoutée ? Quels autres sites web sur le même créneau peut-on « citer en exemple » et pourquoi (rapide analyse des fonctionnalités et/ou de l’intérêt du site) ? Nota Bene : pour le groupe IGO, faire la « synthèse » des documents distribués (= voir ce qu’on peut en retenir d’intéressant pour alimenter un blog)
  • Commencer à rédiger des contenus
  • Commencer également à chercher des gabarits/thèmes selon le cahier des charges (une requête « wordpress themes » sur Google vous renverra vers plein de thèmes gratuits). Pensez à marquer l’adresse des sites sur lesquels vous aurez « repéré » des thèmes intéressants pour pouvoir ensuite les installer « en ligne ».
  • Possibilité de bosser « en situation » = ouvrir un blog sur WordPress.com et l’alimenter. Il suffira ensuite d’exporter les données puis de les réimporter dans WordPress chez l’hébergeur choisi (onglet « Gérer » > importer > exporter)
  • A la fin des 4 heures :
  • un fichier RTF « cahier des charges proposé » à envoyer au client APRES ma validation.
  • plus éventuellement des contenus déjà visibles et retravaillés sur un blog auto-hébergé
  • A l’issu des 4 heures :
    • me rendre (Version Papier + version électronique) le « cahier des charges version 1 » un document word (.rtf) court et synthétique répondant à toutes ces questions et comprenant une proposition d’arborescence. Le document devra pouvoir être remis « en l’état » au client pour le premier rendez-vous.
    • en se souvenant de ce que je vous ai raconté aux premiers cours, inclure dans le document précédent, une page intitulée « Liste de questions » dans laquelle vous listerez … les questions à poser au client, le plus clairement et le plus explicitement possible, et incluant TOUS les aspects du cahier des charges (hébergement, nom de domaine, référencement, arborescence, rubriquage, etc …)
    • si vous avez fini en avance … vous pouvez toujours déjà avancer sur le rédactionnel (= les contenus) en vous souvenant du cours d’écriture numérique 😉
  • Pour le groupe « GEA » : Réalisation du blog du projet sur WordPress.org. Les étudiants du groupe projet GEA viendront nous voir à la pause.

Cours 6 // 25 novembre // 8-10h

  • Finalisation en envoi du cahier des charges.
  • téléchargement des plateformes WordPress et Spip. Exploration de l’arborescence.
  • Recherche de gabarit wordpress et téléchargement.
  • Manipulation d’un logiciel de transfert de fichier (FTP) : Filezilla
  • Prospection pour ouverture et paramétrage d’une adresse (offre) d’hébergement. Selon les cahiers des charges de chaque projet :
    • soit le client dispose déjà d’un compte chez un hébergeur et souhaite le réutiliser (auquel cas on récupère ses codes clients)
    • soit tout est à faire, auquel cas (selon le budget) on étudie l’offre des différents hébergeurs en fonction des contraintes du site.
  • Choix des squelettes SPIP et/ou des gabarits WordPress ==> étape super-importante (notamment pour les gabarits SPIP, moins « souples » (= si on veut en changer, c’est plus compliqué) que les gabarits WordPress
  • 10h à 12h : Sauvegarde de l’outil de travail.


Cours 7 // 9 Décembre // 8-12h

 

  • Télécharger la plateforme WordPress et la « dézipper ».
  • Télécharger les « templates » qui vous semblent intéressants (vous pouvez en télécharger plusieurs pour faire des changements et voir concrètement le résultat)
  • L’installer, avec Filezilla ou FireFtp (extension Mozilla) sur le serveur de l’IUT (la procédure sera exactement la même pour l’hébergement définitif).
  • Adresse du serveur ftp de l’iut : ftp://icwww.pulry.univ-nantes.prive
  • Connexion « anonyme » (pas de login ni de mot de passe : cela sera différent pour l’hébergement définitif)
  • Les répertoires des projets sont déjà créés (il faudra les créer pour l’hébergement définitif) : /emmaus44, /igo /bleyouaz
  • Installer WordPress (+ thèmes + plug-ins) dans le répertoire du projet.
  • Dans le navigateur, taper ensuite : l’adresse du blog sous la forme :
  • http://icwww.pulry.univ-nantes.prive/nomprojet
  • Normalement, l’installation va se lancer automatiquement, il ne restera plus qu’à entrer les informations pour la base de donnée PHP/MySQL (voir avec moi).
  • Etude et choix des propositions d’hébergement chez OVH et 1&1 : envoyer les propositions au client : caler avec lui par mail et/ou par téléphone les modalités de paiement (par carte) : le paiement doit avoir eu lieu pour la prochaine séance (13 Janvier)
  • installation « en ligne » de la plateforme choisie.
  • Une maquette du site web est installée et hébergée en ligne. Le rubriquage est « calé » et normalement définitif.
  • Réaliser quelques copies d’écran à envoyer au client.
  • Rendez-vous téléphoniques pour les groupes concernés
  • Rédaction des contenus et du rubriquage.

Cours 8 // 13 Janvier // 8-12h : Manip « en ligne » et « pour de vrai », installation des gabarits et mise en place du rubriquage général et des premiers contenus.

  • Retour sur les notes du S1 (13 pour tout le monde)
  • Mise en route : prof pas très content. Prof expliquer pourquoi.
  • création du compte chez l’hébergeur + installation de la plateforme wordpress ET des gabarits par ftp (cf cours précédent)
  • sur l’utilisation d’un logiciel ftp depuis chez vous et depuis l’université, voir cette page.
  • Projet Emmaus :
    • hébergeur free. Compte créé.
    • Adresse ftp : ftpperso.free.fr (login : « emmaus44 » mot de passe « emmaus »).
    • Dossier WordPress créé. WordPress installé dedans. Pour l’activer : http://emmaus44.free.fr/wordpress/wp-admin/install.php
    • Et là ça buggue … mais c’est normal. Dans WordPress, cous avez un fichier qui s’appelle : « wp-config-sample.php ». Vous devez l’ouvrir et remplir les informations suivantes (qui vous sont fournies par mail à l’ouverture de votre compte ou que vous obtenez à l’adresse « http://sql.free.fr/ » (identifiant et mot de passe identique) :
    • 	
    • // ** R√©glages MySQL - Votre h√©bergeur doit vous fournir ces informations. ** //
    • /** Le nom de la base de donn√©es de WordPress. */
    • define('DB_NAME', 'emmaus44');
    • /** Utilisateur de la base de donn√©es MySQL. */
    • define('DB_USER', 'emmaus44');
    • /** Mot de passe de la base de donn√©es MySQL. */
    • define('DB_PASSWORD', 'emmaus');
    • /** Adresse de l'h√©bergement MySQL. */
    • define('DB_HOST', 'emmaus44.sql.free.fr');
  • Une fois que les modifs sont faites, vous renvoyez le fichier ainsi modifié à l’emplacemnt exact où vous l’aviez trouvé, et vous retapez : http://emmaus44.free.fr/wordpress/wp-admin/install.php Et là … CA MARCHE 🙂
  • On va vous fournir un identifiant et un mot de passe : admin / 3m$rRIgE#Zf%
  • VOus n’avez plus qu’à installer (par ftp) le thème que vous aurez choisi dans le bon répertoire … et qu’a rédiger les contenus 🙂
  • Projet Bleyouaz : compte créé. Hébergeur : OVH START 5G.
  • Aller sur le site OVH => Mon compte (en base de page) : identifiant (reçu par mail) : eo989-ovh // Mot de passe (choisi) : bleyouaz /
  • CLiquer sur Meublecarton.Fr => puis aller dans le panneau « Mutualisé » => « Hébergement »
  • Mode d’emploi OVH « mettre mon site en ligne » : http://guides.ovh.com/MettreMonSiteEnLigne
  • Accès ftp : ftp.meublecarton.fr login : meubleca / password : bleyouaz
  • Base Mysql : serveur mysql5-9 / login : meublecarton / nom dela base : meublecarton / mot de passe : O8nF8LTR
  • Installer wordpress dans le dossier « www ». Pour l’activer : http://www.meublecarton.fr/wp-admin/install.php
  • Et là ça buggue … mais c’est normal. Dans WordPress, cous avez un fichier qui s’appelle : « wp-config-sample.php ». Vous devez l’ouvrir et remplir les informations suivantes (qui vous sont fournies par mail à l’ouverture de votre compte)
  • 	
  • // ** R√©glages MySQL - Votre h√©bergeur doit vous fournir ces informations. ** //
  • /** Le nom de la base de donn√©es de WordPress. */
  • define('DB_NAME', 'meublecarton');
  • /** Utilisateur de la base de donn√©es MySQL. */
  • define('DB_USER', 'meublecarton');
  • /** Mot de passe de la base de donn√©es MySQL. */
  • define('DB_PASSWORD', 'O8nF8LTR');
  • /** Adresse de l'h√©bergement MySQL. */
  • define('DB_HOST', 'mysql5-9');
  • Projet Rose : démarches effectuées. Hébergement OVH réservé par Emmanuel Schaeffer. Voir avec moi pour les codes d’accès.
  • Aller sur le site OVH => Mon compte (en base de page) : identifiant (reçu par mail) : xxxxxxx // Mot de passe (choisi) : xxxxxxx /
  • CLiquer sur Mademoisellerose.Fr => puis aller dans le panneau « Mutualisé » => « Hébergement »
  • Mode d’emploi OVH « mettre mon site en ligne » : http://guides.ovh.com/MettreMonSiteEnLigne
  • Accès ftp : ftp.mademoisellerose.fr login : mademoiso / password : eDtXTHnR
  • Base Mysql : serveur mysql5-14 / login : mademoiso / nom dela base : mademoiso / mot de passe : eDtXTHnR
  • Installer wordpress dans le dossier « www ». Pour l’activer : http://www.mademiosellerose.fr/wp-admin/install.php
  • Et là ça buggue … mais c’est normal. Dans WordPress, cous avez un fichier qui s’appelle : « wp-config-sample.php ». Vous devez l’ouvrir et remplir les informations suivantes (qui vous sont fournies par mail à l’ouverture de votre compte)
  • Projet IGO : contacter le client pour effectuer la commande en ligne chez OVH (hébergement Pro 90 Plan)
  • Appeler le client par téléphone. Se débrouiller pour obtenir 15 minutes par téléphone avec lui DANS LA MATINEE, avec sa carte bleue et son téléphone portable à côté de lui. Ou aller chercher sa carte bleue et me la ramener en cours …
  • EN attendant : créer les contenus sous wordpress (texte des billets, arborescence, rubriquage …) quand ce sera fini, on fera un import-export xml)
  • Objectif minimal fin de séance :
  • site wordpress installé. Quand nécessaire, redirection nom de domaine activée. Premiers contenus en ligne. Mail de fin de séance au client (avec moi en copie) pour qu’il jette un oeil au site et fasse son retour.
  • Mise à jour du cahier des charges avec les différents login et mots de passe. M’en envoyer une copie. Pas d’envoi au client tant que je n’ai pas validé.
  • Objectif Bonus : regardez du côté des plug-ins pour installer ceux qui vous paraîtront pertinents (me demander mon avis AVANT et ne pas faire de ftp SANS MOI) 🙂


Cours 9 // 27 Janvier // 8-12h : Bon ben là ça y est, on est à la bourre … donc aujourd’hui : des contenus, des contenus, des contenus. Et des contenus.

 

  • Pour chaque groupe :
    • une personne et une seule (le ou la « graphiste ») s’attaque au choix du thème et à la personnalisation (upload des fichiers images dans WordPress pour qu’ils puissent être accessibles aux autres quand ils rédigeront des billets, gestion des widgets, de l’habillage, etc …)
      • NOTA BENE pour le groupe Bleyouaz : le thème « Elegance » ne fonctionne pas chez OVH … alors qu’il fonctionne sans problème chez Free … mystère … mais pas de solution (j’ai tout essayé) … donc faut trouver un autre thème.
    • Chacun des membres restants du groupe prend 5 minutes en début de cours pour étudier l’arborescence proposée dans la dernière version du cahier des charges. Chacun choisit une rubrique. Chacun se met tout seul devant un ordinateur. Et chacun REDIGE les billets et/ou pages correspondantes en s’efforçant de respecter les consignes de « l’écriture pour le web » : écrire court, écrire avec des liens hypertextes, écrire illustré, etc …
    • On fait un point à 10 heures 15 pour voir où on en est.
  • A la fin de la séance, vous m’envoyez pour VALIDATION, le mail que vous enverrez UNE FOIS VALIDE au client (avec moi en copie) :
    • pour lui demander de valider le thème choisi (éventuellement faire deux copies d’écran avec deux thèmes différents) ainsi que les contenus : on lui demande une réponse par mail pour la prochaine séance – 24 Février –  (avec les éventuelles remarques et/ou modifications)
    • pour lui proposer une séance de formation « sur site » (IUT la roche sur yon) le mardi 10 Mars. Pour la séance du 10 Mars, les délivrables à remettre devront être prêts (cahier des charges définitif + mode d’emploi du site)
    • pour IGO, on lui redemande les codes d’accès pour la gestion du nom de domaine « imprimerie-igo.fr » en précisant que c’est urgent et qu’il ne reste plus que deux ou trois séances de travail.

Cours 10 // 24 Février // 8-12h

 

  • Préalable : le client a consulté le site. Vous lui avez proposé différents thèmes. Il a validé le choix du thème. Il a validé l’arborescence (rubriquage) du site. Il a validé (ou non) les contenus de la semaine dernière.
  • On finalise les contenus, la personnalisation du thème
  • On met en place les plug-in / widgets référencement /
  • On gère les points particuliers de chaque projet (multi-ftp pour imprimerie IGO)

Cours 11 // 10 Mars // 8-12h : COURS ANNULE : MOBILISATION IUT

 



Cours 12 // 24 Mars // 8-12h

 

  • Je m’engage solennellement à vous offrir ma tournée de champomy si vous avez bien travaillé 🙂
  • Sinon, ben … on finira ce qu’il faut finir 😦
  • On termine d’alimenter les blogs en CONTENUS
  • On termine les documents d’accompagnement (supports de formation + cahier des charges avec codes d’accès)
  • On prépare un mail pour le client
  • On se quitte par un filage général
  • On pense à rédiger un ou deux articles sur le blog infocom (note …)
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :