Créer un site Web événementiel pour les jeunes
Page en cours de rédaction
Préambule
Le but de cette documentation est de fournir les éléments clés, ainsi qu’une procédure à suivre pour la création d’un site Web événementiel pour les jeunes. Pour cela, on se basera sur l’exemple concret du site web de la journée EYH (Élargis Tes Horizons – Expanding Your Horizons), réalisé par le groupe d’étudiants du Master MALTT, qui était chargé d’animer les ateliers TECFA pendant cet événement.
Introduction
Dans le cadre des cours STIC IV, un groupe d’étudiants du Master MALTT encadré par leur professeur a participé à la journée EYH, qui s’est déroulée à université de Genève le 16 novembre 2013. La contribution était sous forme de deux ateliers didactiques pour des jeunes filles, âgée entre 11 ans et 14 ans. Le premier atelier 2D concernait le découpage et la broderie assisté par ordinateur. Le deuxième atelier 3D était pour la modélisation et l’impression en 3D.
L’organisation d’un tel événement a demandé une planification particulière. C’était l’occasion aussi aux étudiants de collaborer et favoriser la cohésion dans le groupe travail. Parmi, les tâches qui étaient panifiées, il y’avait celle qui concernait la création du site Web événementiel : http://tecfa.unige.ch/eyh/
Objectifs
L’objectif de ce site Web événementiel est de toucher le public cible de la journée et faire une diffusion de l’information concernant les ateliers TECFA. Néanmoins, il y’avait d’autres objectifs qu'on peut les énumérer ainsi :
- Le site Web doit être simple avec une interface ergonomique adapté au jeune public,
- Le contenu devrait être présenté en deux langues (Français et Anglais),
- La présentation doit respecter la thématique de la journée,
- Avoir la possibilité de mesurer l'audience.
Choix d’un CMS et installation
Afin de créer/gérer le contenu du site Web et personnaliser le design les membres du groupe étaient favorables pour l’utilisation d’un CMS (Content Management System). Plusieurs CMS étaient convenables pour cette tâche, mais le choix s’est porté sur WordPress, du fait que tous les membres de groupe ont déjà une idée sur ce produit. Bien évidement Drupal, Joomla, Typo3, Spip ... auront pu être aussi adopté pour la création du site Web.
Dans ce document nous n’allons pas développer les détails techniques, mais plutôt, on va se concentrer sur la description de la démarche et fournir les ressources nécessaires qui vous permettront de reproduire la même installation/configuration obtenue dans notre exemple.
Ainsi, pour l’installation de WordPress on vous suggère de se référer à la page (du site Web officiel) suivante : http://codex.wordpress.org/fr:Installer_WordPress qui décrit clairement les prérequis et les 5 étapes à suivre pour installer le CMS WordPress. Vous pouvez également suivre la documentation suivante : http://tuto-wordpress.com, ou une des nombreuses vidéographies proposées sur Youtube. L’exemple suivant : http://www.youtube.com/watch?v=ell0SiTZyX8 représente un bon tutoriel à suivre pour réaliser l’installation sur la plateforme cPanel d’un hébergeur Web.
Certains hébergeurs Web propose même une installation en un seul click (One-Click Install) à travers l’interface d’administration cPanel/WHM. Vous avez encore une dernière alternative si vous gérer vous-même votre serveur Web (sous un VPS par exemple), avec une installation en ligne de commande. Vous trouverez un exemple concret sur le lien suivant pour une installation sous ubuntu : http://doc.ubuntu-fr.org/wordpress
Le design avec WordPress
Graphisme
Afin de changer (relooker) l’interface du site Web et faire une correspondance avec la ligne visuelle du site Web de EYH (), le choix s’est porté sur thème suivant : http://wordpress.org/themes/surfarama. Le thème remplit d’autre critères comme le fait d’être adaptative aux différents type de résolution (responsitive design), offre la possibilité de l’intégration d’autres éléments qu’on va citer dans les points suivants et surtout il est noté 5/5 par la communauté des utilisateurs.Pour plus d’information concernant l’installation d’un plugin, vous pouvez vous référer à la documentation indiquée sur § ressources.
Eléments
- Textes :
- Images :
- Vidéos : L’ensemble des vidéos utilisées est hébergé sur Youtube. Le montage vidéo est réalisé avec l’outil en ligne fournis par même la plateforme. Pour la procédure d’insertion d’une vidéo sur une page/article WordPress on vous recommande la vidéo suivante : http://www.youtube.com/watch?v=YxmnjCU2fg4
- extensions :
Fiche à distribuer
Des fiches ont été distribués à la fin des ateliers, dans le but de promouvoir le site web et passer l'information aux autres visiteurs de la journée. On a opté pour ce type de support puisque on ne disposait pas de listing des visiteurs au préalable, pour envoyer des lettre de diffusion (newsletters). En outre,le fait que le site web est lancé juste quelques jours avant cette journée ne nous a pas permis d'effectuer le référencement ou d’échanger les liens avec le site Web officiel des organisateurs de la journée.
Multi-langue
Une partie des jeunes filles qui ont fréquentées la journée EYH étaient anglophones, ce qui nous a paru nécessaire de mettre le site web dans les deux langues (Français/Anglais). C’était aussi un des objectif fixé dans le cahier des charges pour la création du site Web.
Comme pour les autres éléments l’intégration d'un mécanisme de traduction des pages s'est réalisé grâce a deux extensions ajouté aux CMS WordPress utilisé pour la réalisation de ce site Web événementiel.
...
Intégration de média sociaux
- Création des pages Evénement sur les média sociaux
- trois manières d’intégrer outils de partage du réseau social sur WordPress :
- Via le thème : une fonctionnalité qui n’est pas disponible sur tous les thèmes.
- Via les extensions (ou un service tout-en-un): exemple en vidéo sur le tutoriel suivant http://autourdututo.fr/comment-ajouter-boutons-partage-reseaux-sociaux-wordpress
- Via le code source : l’option choisie pour intégrer les boutons de partage sur notre site Web. Pour en savoir d’avantage sur le sujet, on vous conseille de consulter l’article suivant : http://www.guerillaweb.ca/ajouter-bouton-partage-sociaux (pt3. À la main (avancé))
Analyse d’audience
Afin d’analyser l’audience du site web de la journée EYH, nous avons utilisé Google Analytics. À noter qu'aucun référencement n’est effectué et le site Web est lancé juste deux jours avant l’événement. Il était présenté pour la première fois lors des ateliers et sa promotion était faite sur place, avec des fiches d'informations distribuées à la fin de chaque atelier. On peut conclure ainsi, que la majorité des visites générées ce jour-là proviennent des visiteurs des ateliers et les personnes informées via les fiches d'informations.
On peut intégrer l'outil Google Analytics de deux manières; soit par une extension ou par insertion directe (dans le footer ou bas de page du thème) du code généré par l'interface d'administration de Google Analytics. Pour en savoir plus sur cet outil, les étapes à suivre pour la création d'un compte ou son utilisation, on vous suggère de consulter la page EduTechWiki qui lui est destinée : http://edutechwiki.unige.ch/fr/Google_analytics , ou bien la documentation officielle de l'éditeur de cette solution : http://www.google.com/intl/fr_ALL/analytics/support/index.html .
Bilan et points à améliorer
Utilisation
- indiquer les horaire
- vidéo démonstration
- lien avec les réseaux sociaux
- Le site Web a servi comme support de démonstration supplémentaire pendant les Ateliers de cette journée.
Audience
parler du résultat (prt screen GAnalytics)
Points à améliorer
La prochaine édition de la journée EYH qui aura lieu à l’université de Genève, le 14 novembre 2015. Suite à notre première expérience cette année, on suggère le plan de travail suivant pour la création d’un site web événementiel qui accompagnera l’activité des étaliers TECFA :
- promouvoir le site en avance
- échange de lien avec le site officiel
- prévoir un concours pour les jeunes filles afin d’évaluer l'impact des ateliers TECFA
- Ajout des articles supplémentaires pour mieux introduire les technologies utilisées dans les ateliers,
- ...
Ressources et références
....