Projet de site Web ducatif : Phases et tapes

Khalid Gueddari Juin 2005

ITA Campus de SaintSaint-Hyacinthe - Tous droits r rserv servs

Quelques sections de cette pr . Laval) prsentation ont t inspir inspires des sources suivantes : VanLancker, VanLancker, CRIM, APTIC (Univ (Univ.

Introduction

Un site Web ne s'improvise pas !!

Crer un site Web ncessite, en rgle gnrale, un minimum d'organisation, de rflexion et des tapes respecter.

Organisation info. (textuelle, graphique) Qualit contenu et lutilit

Interactivit

Qualit et efficacit dun projet Web ducatif et pdagogique sur Internet

Respect de certaines rgles (ergonomie, contraintes, design)

Flexibilit navigation

Ne ngligez aucune phase et tape du droulement du projet

Graphique traduit et adapt par CRIM de : Travis, David. (Octobre 2000). What drives repeat visitors to your website? . Lenqute de Forrester Research tait effectue auprs de 8 600 foyers utilisateurs du Web.

Cycle de dveloppement dun projet TIC

Analyse

Conception

Production et test

Maintenance et MAJ

Les phases et tapes de conception dun projet Web ducatif P1 : Analyse

Dfinition du public cible ; Dfinition des besoins et des objectifs ; tude de lexistant ;

P2: Conception
Dfinition du contenu ; Structuration de linformation; Prparation du contenu ; Dfinition de la charte graphique.

P3 : Production, test et intgration P4 : Maintenance et mises jour

Analyse : dfinition du public cible

Quel(s) public(s) visez-vous? Dfinissez les attentes de chacun d'eux. Pourquoi vient-il visiter le site ? Que cherche-t-il ? Pourquoi reviendra-t-il, et avec quelle frquence ? Est-ce que ce sont les mmes publics que ceux atteints par la communication traditionnelle ? Comptences informatiques ncessaires, accs ordinateurs, crans, vitesse connexion, technologies (java, flash)

Analyse : dfinition des besoins

Pourquoi doit-on dvelopper un site Web ?

Satisfaire un besoin ?
Exemple

Satisfaire une motivation ?

Exemple

Rsoudre un problme ?
Exemple

Autre ?
Exemple
dfinir

Site pour la publication Portail des articles dun laboratoire dinformations de recherche

Services

Analyse : dfinition des besoins (suite)

Dfinir une liste des besoins identifier les apports de lapproche :

Illustrer des concepts abstraits et difficiles Effectuer des activits Diffuser du contenu pouvant et devant tre acquis en mode automne Diffusion contenu Acqurir des comptences en TICE dans mon cours Rendre lves plus actifs Informer et changer avec lves Sexercer .

LA QUESTION : VALEUR AJOUTE (avantages)

Ex. document informatique = rplique du document papier >>> Opter pour version papier (accessibilit, annotation)

Analyse : tude de lexistant

tudier le traitement et la circulation des informations pour tablir la liste des personnes ressources, frquence de mises jour... ; Analyser les sites semblables ; Inventorier les ressources

matriel existant (copier, recycler , rassembler matriel tant graphique, multimdia que textuel) Ressources humaines Ressources technologiques : matriel, logiciel et outils requis et dont vous disposez

 cette tape, vous serez en mesure davoir une ide claire sur la pertinence du projet (sa valeur ajoute) et sur la faisabilit et les solutions technopdagogiques (Web statistique ou dynamique, plate-forme, banque de donnes, outils bureautiques, prologiciel).

Conception : dfinition du contenu

Dans la plupart des sites, l'information est principalement constitue de texte et d'images ( "streaming est peu frquent cause dbit faible).

Dfinition des besoins + tude de lexistant >>> tablir une liste des rubriques (principales et secondaires) inclure dans le site.

Pour chaque rubrique, identifier les objectifs spcifiques (titre, une description).
Ex. Notions pralables : le but de ce thme est daider llve comprendre les notions de base et celles pralables au cours

Conception : structuration du contenu

Structure et ergonomie de linterface : ensemble de moyens pour guider et informer lusager en allgeant la charge cognitive de linformation
Document lectronique ne se lit pas comme la version papier : V(lecture cran) moins 28,5% V(lecture imprim). Lisibilit sur cran >>> grosse fatigue oculaire (perte de lisibilit dau moins 30%)

Un site Web doit tre conu selon une architecture cohrente et non pas regrouper une collection de rubriques sans rapport logiques entre-elles.

Conception : modles de structures

Structure hirarchique : organisation hirarchique des pages autour dune page daccueil (organigramme, tables matires). Meilleure faon dorganiser des blocs d'information complexes et convient beaucoup de sites. >> bien organiser information + viter structure trop profonde

Structure squentielle : organisation linaire des pages selon un ordre chronologique (livres) : sites formation, tutoriels

Conception : modles de structures

Structure en rseau (type Web) : organisation de linformation selon le principe de la pense associative (hypertexte) >> exploite la pleine puissance des liens vers des informations lintrieur du site ET externes + destine aux experts

Structure grille (base donnes) : possibilit de corrler des informations + organisation en tableau selon des paramtres (ex. listes de cours : cot, prrequis). Gre grce une base de donnes.

Conception : modles de structures

Conception : structuration du contenu

Il faut donc

Regrouper de manire cohrente des rubriques|sousrubriques Prciser la hirarchie et tablir la structure relationnelle entre les rubriques et pour chaque rubrique Identifier la liste des documents lis chaque rubrique Pour chaque document prvoir par exemple : titre,
description, priodicit de mise jour.

Conception : structuration du contenu

Quelle structure choisir ? Sachez quun site peut combiner plusieurs types de structures L'objectif : maintenir une hirarchisation quilibre (et volutive) qui aidera l'accs rapide l'information et une comprhension intuitive de la faon dont les lments sont organiss.
Sans une structure fonctionnelle, votre site sera un chec mme si le contenu est pertinent et bien rdig. Un visiteur qui se perd est un visiteur qui ne reviendra plus. Effectuer des prototypes papiers Feedback des utilisateurs + autocritique >>> passages pauvrement structurs ou mme si structure initiale obsolte suite aux ajouts.
Ex. structure quilibre et volutive

Conception : structuration du contenu

Au royaume de l'hypertexte, la page est reine. Une page ne doit tre ni trop longue, ni trop courte.
Les pages sont trop courtes : l'internaute reoit l information de faon hache. Les pages sont trop longues : attention au temps de tlchargement et au dfilement 3 5 crans max

Le dfilement horizontal doit tre vit le plus possible, nous ne sommes pas habitus lire des textes larges Soyez bref et prcis, rsum au dbut du texte, signets dans les textes longs, possibilit dimpression

Conception : structuration du contenu

Au royaume du Web, linternaute est roi viter des culs-de-sac et des chemins rcursifs 5 7 thmes majeurs (penser mmoire court terme) Au besoin ajouter des rubriques secondaires (utilitaires) : FAQ, Nouvelles-quoi de neuf?, Plan site, Aide, Plugiciels Site volumineux : possibilit de recherche Menus (rubriques) et sous-menus : prfrence pas plus de 3 niveaux

Noubliez pas Rgle des 3 clics : lusager veut et doit trouver linfo. en moins de 3 clics sinon il quitte.

Conception : prparation du contenu

Petits gabarits et pages-crans : scnarimage

Production de scnarios avec des pages-crans avec toutes les info. : crucial et fastidieux surtout pour gros projets.

Dfinir un format dchange du texte (Doc, pages Web, PDF...). Saisir / Rcuprer le texte. Rcuprer / Traiter les images (lier les images aux documents saisis). Organiser et classer bien vos donnes (arborescence dossiers, fichiers, noms)

Conception : dfinition de la charte graphique

La charte graphique permet de donner une identit visuelle votre projet Web ducatif. Penser aux lments graphiques : fond des pages, couleurs utilises, logo, polices des caractres, etc. La prsentation des pages courantes doit tre :
relativement uniforme, pour donner l'internaute une impression d'unit. assez sobre, pour ne pas distraire l'attention du message que l'on veut transmettre.

Production, test et intgration

cette phase, le site commence se construire et se finaliser conformment aux spcifications On doit sassurer que les principes de conception et les rgles (dgages lors de ces ateliers) sont bien suivis
(Voir par ex. : Rgles et Concepts : sites Web ducatifs )

Ne pas oubliez de :
Tester, tester, tester dans diffrents environnements Intgrer lensemble et tester Prenez lavis des autres et tre lcoute

Maintenance, mise jour

Un site web est un produit volutif. Il faut donc : dmarrer le site modestement ; le faire voluer progressivement ; le maintenir en permanence ; Noubliez-pas un site Web qui ne bouge pas est un site mort! Donc des mises jour frquentes SVP

Pour finir
Si vous-avez une ide dun projet TICE :

Contactez-nous pour :
examiner sa pertinence et clarifier les besoins voir sa faisabilit, solutions et stratgies possibles vous fournir des conseils et soutien personnalis vous accompagner et vous aider concrtiser vos ides

Merci

Khalid Gueddari Version 1 - Mai 2005

ITA Campus de SaintSaint-Hyacinthe Khalid Gueddari -Tous droits r rserv servs