Guide We Be Ducat If

Denyse Gilbert
Spécialiste en applications pédagogiques des

technologies
de l'information et de la communication (APTIC)
Université Laval, Québec, Canada
Tous les droits de reproduction sont autorisés http://www.aptic.ulaval.ca/guidew3educatif/
avec mention de la référence Commentaires : Denyse.Gilbert@aptic.ulaval.ca
Guide Web Éducatif
Table des matieres

Avant−propos......................................................................................................................................................1
Objectif de ce guide.............................................................................................................................................3
Équipe de réalisation..........................................................................................................................................5
Analyse.................................................................................................................................................................7
Analyser les besoins de la clientèle.........................................................................................................8
Inventorier les ressources.......................................................................................................................12
Analyser les coûts..................................................................................................................................14
Design pédagogique..........................................................................................................................................16
Définir le but et les objectifs..................................................................................................................17
Structurer le contenu..............................................................................................................................18
Élaborer les stratégies pédagogiques.....................................................................................................19
Concevoir le site....................................................................................................................................20
La structure...............................................................................................................................21
La page d'accueil.......................................................................................................................22
La navigation............................................................................................................................23
La présentation du site..............................................................................................................24
Les annexes...............................................................................................................................25
Concevoir les pages−écrans...................................................................................................................26
En−tête......................................................................................................................................29
Corps de la page........................................................................................................................32
Pied de page..............................................................................................................................34
Définir l'ergonomie................................................................................................................................36
Le texte.....................................................................................................................................37
La typographie.............................................................................................................38
Disposition du texte.....................................................................................................39
Numériser un texte.......................................................................................................41
La couleur.................................................................................................................................42
La mise en pages.......................................................................................................................44
Taille d'une page..........................................................................................................45
Le tableau.....................................................................................................................47
Les cadres....................................................................................................................48
Les formulaires............................................................................................................51
L'image.....................................................................................................................................52
L'image graphique.......................................................................................................55
L'image photographique..............................................................................................56
L'icône graphique........................................................................................................57
La carte image..............................................................................................................58
L'image d'arrière−plan.................................................................................................59
L'image animée............................................................................................................60
Outils de communication.......................................................................................................................61
Le courrier électronique............................................................................................................62
Les listes de distribution...........................................................................................................64
Les forums de discussion..........................................................................................................65
Les forums de clavardage.........................................................................................................68
i
Guide Web Éducatif
Table des matieres

Design pédagogique
La messagerie instantanée ICQ.................................................................................................69
Production.........................................................................................................................................................71
Encodage................................................................................................................................................72
HTML.......................................................................................................................................73
XHTML....................................................................................................................................75
Cascading Style Sheets.............................................................................................................77
XML..........................................................................................................................................78
WML.........................................................................................................................................80
Multimédia.............................................................................................................................................81
Le son........................................................................................................................................82
AIFF.............................................................................................................................84
µ−LAW........................................................................................................................85
Liquid Audio................................................................................................................86
MPEG..........................................................................................................................87
MIDI............................................................................................................................88
RealAudio....................................................................................................................89
Wave............................................................................................................................90
Windows Media Audio................................................................................................91
Ogg Vorbis...................................................................................................................92
La vidéo....................................................................................................................................93
MPEG..........................................................................................................................95
QuickTime...................................................................................................................96
RealVideo....................................................................................................................97
Windows Media Video (WMV)..................................................................................98
L'animation...............................................................................................................................99
Flash...........................................................................................................................100
Director......................................................................................................................102
Java............................................................................................................................103
VRML........................................................................................................................104
Logiciels de dessin.....................................................................................................106
Autres types de documents.....................................................................................................107
Acrobat......................................................................................................................108
PowerPoint.................................................................................................................109
Interactivité côté client.........................................................................................................................110
JavaScript................................................................................................................................111
DHTML..................................................................................................................................113
VBScript.................................................................................................................................114
Java.........................................................................................................................................115
Composante intégrée...............................................................................................................116
ActiveX......................................................................................................................117
JavaBeans..................................................................................................................118
Interactivité côté serveur......................................................................................................................119
Server Side Includes...............................................................................................................120
CGI..........................................................................................................................................121
PHP.........................................................................................................................................122
ASP.........................................................................................................................................123
ii
Guide Web Éducatif
Table des matieres

Production
JSP..........................................................................................................................................125
Base de données......................................................................................................................126
Expérimentation..............................................................................................................................................129
Mise en ligne........................................................................................................................................130
Le serveur...............................................................................................................................131
Gestion des fichiers.................................................................................................................132
Indexation...............................................................................................................................133
Statistiques..............................................................................................................................135
Test.......................................................................................................................................................136
Validité du code......................................................................................................................137
Accessibilité............................................................................................................................138
Fonctionnement......................................................................................................................139
Évaluer un site éducatif........................................................................................................................141
Bibliographie...................................................................................................................................................154
iii
Avant−propos
Les nouvelles technologies de l'informatique et des communications offrent désormais une grande variété
d'outils pouvant contribuer à enrichir le matériel didactique d'un cours et jouissent d'une popularité croissante
dans l'enseignement. Dans cette foulée, le réseau Internet est de plus en plus utilisé comme support à
l'enseignement et à l'apprentissage, mais l'enthousiasme que suscite son utilisation peut parfois faire place au
découragement devant la complexité et l'évolution rapide des outils proposés et leurs limites.
C'est en constatant, en tant que spécialiste des applications pédagogiques des technologies de l'information et
des communications (APTIC), les besoins de formation des professeurs dans ce domaine et le peu de
documentation française à jour disponible sur le sujet, que nous est venue l'idée d'élaborer le Guide de
conception pédagogique et graphique d'un site éducatif sur le réseau Internet. Ce guide a ceci de
particulier : il se renouvelle constamment, au rythme de l'évolution et des développements fulgurants de la
technologie applicable à l'enseignement par le Web. À ce titre, il constitue un outil didactique performant,
bien adapté à la réalité pédagogique de l'an deux mille.
Disponible sur le réseau Internet, notre guide a d'ailleurs permis jusqu'à maintenant, à de nombreux
utilisateurs du Québec, du Canada et de plusieurs pays de la francophonie, non seulement de mieux
comprendre le langage parfois hermétique associé à ce merveilleux outil d'apprentissage, mais aussi d'adapter
celui−ci à leurs besoins en matière de pédagogie. Notamment, notre guide a été reconnu par le programme
Information Society and Development (ISD) comme ayant un grand intérêt pour la formation des cadres des
pays en développement. Il a été intégré au CD−ROM « Internet au Sud » dont 7000 copies fût distribuées.
Ce CD−ROM est destiné à favoriser la maîtrise des technologies de l'information et de la communication par
les acteurs du Sud. Il est publié par l'Institut des Nations Unies pour la Formation et la Recherche (UNITAR)
et l'UNESCO (Organisation des Nations Unies pour la Science et la Culture). Il a reçu l'appui du programme
Infodev (Banque Mondiale), du Ministère des Affaires étrangères français (mission des nouvelles
technologies), de l'INTIF (Institut francophone des technologies de l'Information, Agence
Intergouvernementale de la Francophonie) et de l'IRD (Institut de Recherche pour le Développement). Il
s'inscrit dans la collection « Publica » de l'UNESCO.
Nous tenons enfin à souligner que le Guide de conception pédagogique et graphique d'un site éducatif sur le
réseau Internet a été conçu dans le respect de ce qui doit constituer selon nous le fondement de la philosophie
de l'Internet, soit un partage désintéressé de l'information. Il est donc accessible à tous et tient compte des
suggestions et de l'expérimentation pédagogique des utilisateurs. En cela, il contribue au rayonnement de
notre université et à l'essentiel de sa mission, qui est, outre la formation de personnes compétentes,
responsables et promotrices de changement, l'avancement et le partage des connaissances, dans un
environnement dynamique de recherche et de création.
Denyse Gilbert
Spécialiste des applications pédagogiques
des technologies de l'information et des communications
Université Laval
Avant−propos 1
Guide Web Éducatif
Avant−propos 2
Objectif de ce guide
Le but du Guide de conception pédagogique et graphique d'un site éducatif sur le réseau Internet est de
vous permettre de maximiser l'apport pédagogique et l'aspect graphique de votre site éducatif sur réseau
Internet.
La qualité d'un site pédagogique sur Internet repose principalement sur l'organisation de l'information, tant
textuelle que graphique, sur la flexibilité de la navigation et sur l'interactivité. C'est donc en ce qui a trait à ces
aspects particuliers que le guide entend faciliter la tâche du concepteur, grâce à un plan de conception et des
recommandations.
Le guide a été préparé par une équipe détenant une expertise en APTIC. Cette équipe est composée d'une
spécialiste en applications pédagogiques des technologies de l'information et des communications, d'analystes
de l'informatique et d'un graphiste.
Ce guide est basé sur notre expertise dans le domaine de la conception de sites Web éducatifs, de recherche en
design pédagogique et graphique ainsi que sur la recherche en APTIC et l'analyse de site éducatif.
Grâce à votre collaboration, ce guide sera en constante évolution. Des mises à jour sont ainsi réalisées en
fonction des développements technologiques en émergence sur le réseau Internet, des recherches en
applications pédagogiques, des technologies de l'information et aussi de vos propres expérimentations
pédagogiques, réalisées dans le cadre de vos cours.
N'hésitez pas à nous faire part de vos commentaires, suggestions et expérimentations, à l'adresse apparaissant
au bas de la page.
Objectif de ce guide 3
Guide Web Éducatif
Objectif de ce guide 4
Équipe de réalisation
Version 4.1
Denyse Gilbert,
Spécialiste en applications pédagogiques des technologies de l'information et des communications
Volet pédagogique et technologique
Gilbert Sévigny,
Conception graphique du site
Volet image
Éric Thibault,
Conception informatique du site
Volet informatique
Nicolas St−Laurent,
Mise à jour du site
Volet informatique et rédaction
Tous du Réseau de valorisation de l'enseignement, Université Laval, Québec, Canada
Collaborateurs des versions antérieures
Pascal Brochu, analyste de l'informatique

Guillaume Germain, analyste de l'informatique
Bruno Tremblay, analyste de l'informatique
Philippe−Alexandre Gilbert, analyste de l'informatique
Samuel Pelletier, analyste de l'informatique
Jérôme Thibaudeau, Spécialiste en communication
Andrée Verville, technicienne en informatique
Marie−Christine Girard, réviseure−correctrice
Équipe de réalisation 5
Guide Web Éducatif
Équipe de réalisation 6
Analyse
Vous désirez développer un site Web éducatif, mais par où débuter ?
Avant de s'aventurer dans un tel projet, il est essentiel d'analyser les besoins et la pertinence de ce projet.
Une série de questions permet de faire cette analyse. Compte tenu du temps, de l'énergie à investir et de
l'apport pédagogique souhaité, il est important de s'assurer que les objectifs poursuivis sont plus inspirés par la
pédagogie que par la technologie.
Le réseau Internet offre de nombreux services tels le courrier électronique, les groupes de discussion, le FTP
et le Web. Chacun de ces services possède des caractéristiques qui pourraient être exploitées dans un contexte
pédagogique, mais comporte également des limites.
Cette partie du guide vous permettra de mûrir votre réflexion et de faire un choix éclairé.
Analyse 7
Guide Web Éducatif
Analyser les besoins de la clientèle

Dans un premier temps, il faut analyser les besoins de la clientèle. Cette phase est essentielle pour la réussite
de votre projet. En répondant aux questions qui suivent, vous pourrez rédiger un plan directeur qui vous
servira lors de la prise de décisions. Le témoignage de collègues ayant une expérience pratique ou la
consultation d'étudiants afin de connaître leurs attentes peut également constituer une aide précieuse.
À quels besoins le site éducatif que je veux développer va−t−il répondre ?
• Diffuser du contenu ?
• Élaborer des activités d'apprentissage interactives ?
• Faire des exercices, des simulations, des activités de recherche et de traitement d'information ?
• Permettre d'individualiser l'apprentissage en variant les stratégies ?
• Élaborer des activités de travail de collaboration ?
• Visualiser un concept abstrait ?
• Fournir un encadrement pédagogique à l'étudiant ?
Pourquoi utiliser le réseau Internet ?
• Pour permettre l'apprentissage à distance ?

• Pour créer un environnement d'apprentissage coopératif ?
• Pour offrir des activités d'apprentissage interactives ?
• Pour donner un encadrement pédagogique ?
• Comme complément à mes notes de cours papier et à mon cours en salle, pour continuer les
discussions hors des murs de la classe ?
L'utilisation première du réseau Internet est de diffuser de l'information. Dans le cadre des cours sur Internet,
nous parlons de 3 niveaux d'intégration dans les cours campus.
Niveau 1
Ce niveau contient habituellement ces quatre éléments de base :
◊ Une diffusion de notes de cours en format Web, PowerPoint ou PDF;
◊ Un courriel;
◊ Un forum général;
◊ Des liens intéressants.
Niveau 2
En plus d'intégrer les éléments du premier niveau, ce niveau ajoute :
◊ Des activités d'apprentissage en ligne;
◊ Des auto−évaluations;
◊ Des tests objectifs formatifs.
Niveau 3
À ce niveau, le cours est entièrement sur Internet. Il contiendra :
◊ Des exercices interactifs;
◊ Des simulations;
◊ Des études de cas avec analyse et rétroactions automatisées;
◊ Des didacticiels;
◊ Etc.
Analyser les besoins de la clientèle 8

Guide Web Éducatif
Comment identifier les apports pédagogiques les plus profitables pour mes étudiants ?
• Quels sont les concepts abstraits difficiles à traiter en classe ?

• Existe−t−il d'autres moyens que l'exposé oral pour faciliter la compréhension des contenus et des
concepts ?
• Quels sont, à partir des évaluations, les objectifs peu ou pas atteints ?
• Quels contenus l'étudiant pourrait acquérir de façon autonome ? Et par quels moyens ?
• Quels contenus exigeraient une illustration pour faciliter sa compréhension ?
• Quels contenus pourraient être supportés par l'actualité et rendre le contenu plus motivant ?
• Quels contenus seraient davantage compris et assimilés grâce à une activité d'apprentissage ?
• Quels types d'activités d'apprentissages pourraient être maximisées avec Internet ?
• Comment rendre mes étudiants plus actifs dans leur démarche d'apprentissage ?
• Ai−je des outils qui permettent à mes étudiants de s'auto−évaluer régulièrement ?
• Quels types d'activités interactives puis−je introduire pour mettre en pratique des concepts et faire
développer des compétences professionnelles (travail d'équipe, gestion, etc.) ?
• Mes échanges avec les étudiants sont−ils suffisamment nombreux ?
Et de qualité acceptable ? Suis−je accessible ?
• Est−ce que je donne suffisamment de rétroaction à mes étudiants ?
• Y a−t−il moyen de favoriser un certain transfert de connaissances entre pairs ?
• Les compétences que l'étudiant peut acquérir en utilisant les NTIC sont−elles importantes pour son
avenir ?
Si oui, est−ce que, dans mon cours, je lui donne l'occasion de se servir des NTIC ?
Ces avantages sont−ils supérieurs à ceux des autres moyens didactiques ?
Si le document informatique est une réplique intégrale du document papier, le travail de conversion n'est
peut−être pas nécessaire. En effet, la version papier est plus efficace compte tenu de son accessibilité, de la
possibilité de l'annoter et d'y cheminer rapidement et efficacement.
La question fondamentale est donc celle de la valeur ajoutée :
− Qu'est−ce que l'utilisation du réseau Internet va apporter aux méthodes traditionnelles ?
− Qu'est−ce qui va motiver l'étudiant à utiliser couramment mon site Web ?
Par ailleurs, si le contenu informatique doit être imprimé, il est préférable de prévoir une version
téléchargeable. Cependant, le site Web ne devrait pas se limiter à faciliter la gestion du document papier. Ce
fait révélerait que la valeur ajoutée est minime et que l'impact pédagogique est à peu près nul.
Quel est mon public cible ?
(Étudiants sur le campus, étudiants à distance, grand public, etc.)
• Avez−vous pensé où les étudiants devraient accéder à un ordinateur ?

♦ Au laboratoire ?
♦ Chez eux ?
♦ Avec un portable ?
• Avez−vous un nombre suffisant d'ordinateurs dans vos laboratoires d'informatique pour répondre à la
demande de votre clientèle et celle des autres professeurs ?
Il importe de calculer le temps prévu de travail sur le réseau et le nombre d'ordinateurs disponibles,
afin de s'assurer de répondre à la demande.

Guide Web Éducatif
Pensez aussi qu'un ordinateur se destine à traiter des données. S'il n'est utilisé que pour lire des textes
à l'écran, il est peu justifié, surtout dans un laboratoire où les usagers font la file d'attente.
• Les étudiants à distance possèdent−ils un ordinateur ?
Sont−ils prêts à payer les frais de connexion au réseau Internet pour accéder à votre matériel ?
Si vous utilisez des vidéos, vos usagers devraient avoir un lien à haute vitesse, beaucoup plus coûteux.
En sont−ils informés ?
De quelles considérations techniques devrais−je tenir compte avant d'entreprendre mon projet?
• Quelles sont les compétences informatiques que mes étudiants devraient posséder ?
Il faut s'assurer qu'ils les possèdent sinon une formation s'avère nécessaire.
• Quel type d'ordinateur sera mis à la disposition des étudiants qui utiliseront votre site ?
• Quelle est la puissance de ces ordinateurs ?
• De quel type d'écran sont−ils munis ?
• Quel nombre de couleurs ces écrans supportent−ils ?
• Quelle est la dimension de ces écrans ?
• Ces ordinateurs sont−ils assez puissants pour utiliser une version récente de navigateur ?
• Supportent−ils les dernières technologies (Exemple : Java, Flash, etc.) ?
Il faut se rappeler que certaines applications, incluant les animations, nécessitent beaucoup de ressources à
l'ordinateur, notamment une bonne quantité de mémoire. Pensez toujours à développer pour l'équipement le
plus utilisé, non celui à la mode, car tous les usagers ne possèdent pas l'équipement dernier cri ou ont accès à
la technologie la plus récente.
Réflexion
Si vous avez besoin d'animations et d'interactivités sophistiquées, d'outil de calcul ou encore de systèmes
d'aide et de support à l'apprentissage, il serait préférable de vous tourner vers le développement d'une
application pédagogique multimédia sur support CD−ROM. En effet, le réseau Internet, malgré son évolution
rapide, n'offre pas une rapidité suffisante pour ce type d'application.
Quelle est la répartition du temps de réalisation d'un tel projet ?
Un calendrier de conception et de développement d'un site Web éducatif peut se présenter ainsi :
• Phase 1 : L'analyse du besoin et de la pertinence pédagogique : 10 % du temps.

• Phase 2 : Le design pédagogique, phase la plus importante et la plus considérable : 45 % du temps.
• Phase 3 : La production graphique et la programmation sont des éléments nécessitant souvent
l'expertise de spécialistes. La production des pages−écrans en langage HTML est très simple, mais
dès que de l'interactivité de haut niveau est requise, il faut recourir à un informaticien qui connaît des
langages de programmation tels que Java, PHP et autres : 35 % du temps.
• Phase 4 : L'expérimentation permet de procéder à une mise à l'essai, à évaluer et à corriger
l'application afin de mieux répondre aux objectifs fixés : 10 % du temps.
NOTE : Il faut également prévoir du temps pour les mises à jour.
Des logiciels de diffusion de cours sur Internet sont apparus depuis quelques années dans le monde de
l'éducation. Parmi ceux−ci, notons Learning Space

Guide Web Éducatif
(http://www.lotus.com/products/learnspace.nsf/wdocs/homepage) et WebCT (http://www.webct.com/). Ces

outils font gagner un temps considérable au niveau de la conception et de la réalisation de l'interface et de la
navigation, mais ils exigent en retour de se plier à leurs règles de fonctionnement. De plus, ils nécessistent un
temps d'apprentissage des commandes du logiciel, d'autant qu'ils ne sont pas tous d'une très bonne
convivialité.
Le concepteur doit dans tous les cas travailler à adapter son matériel papier au Web, à restructurer son cours et
à bâtir ses activités d'apprentissage en fonction du Web. Une autre tâche fort exigeante est sans contredit
l'encadrement des étudiants par courriel ou par forum.

Guide Web Éducatif
Inventorier les ressources

Matériel existant
Il est important de procéder à une recherche du matériel existant, afin de ne pas investir de l'énergie à refaire
du matériel déjà disponible. C'est à partir de nos objectifs généraux que des champs de recherche sont fixés et
que le matériel pertinent est sélectionné. Celui−ci devra être analysé afin de s'assurer qu'il répond bien à nos
besoins.
Si le matériel sélectionné ne répond pas exactement à vos besoins, vous pouvez entrer en communication avec
son concepteur afin d'ajuster ce matériel selon vos besoins. Si cela s'avère impossible, vous devrez évaluer si
ce matériel est vraiment nécessaire, s'il peut être utilisé tel quel malgré tout ou s'il faut en créer une nouvelle
version.
La réalisation du site nécessite un plan sommaire de son contenu en fonction des objectifs fixés et de la
clientèle visée. Vous devrez rassembler et faire l'inventaire de l'ensemble du matériel existant, tant textuel que
graphique, qui sera diffusé sur le réseau Internet. Par la suite, les éléments manquants seront identifiés afin de
prévoir leur conception. N'oubliez pas de vous assurer du respect des droits d'auteurs.
Ressources humaines
La conception d'un bon et beau site éducatif nécessite de multiples habiletés qu'une seule personne possède
rarement. Vous gagnerez à vous entourer de personnes qualifiées pour chacun des volets de votre site.
Généralement, une équipe d'au moins quatre personnes est nécessaire, soit :
1. Un spécialiste du contenu, c'est−à−dire le professeur et quelquefois un auxiliaire de recherche. Il a

pour tâches principales :
1. d'identifier les objectifs;
2. de concevoir le contenu pédagogique, les activités d'apprentissage et d'évaluation;
3. de définir l'encadrement.
2. Un spécialiste en applications pédagogiques des technologies de l'information et de la communication
qui aide :
1. à l'identification des objectifs;
2. à la structuration du contenu;
3. au design pédagogique et graphique du site éducatif;
4. à la conception des activités d'apprentissage, des outils interactifs et des évaluations;
5. à la conception de l'organigramme;
6. à la gestion du projet;
7. à l'évaluation et l'implantation du site éducatif, etc.
3. Une équipe multimédia qui réalise du matériel de qualité adapté pour les sites Web (mise en pages du
texte, image, son, vidéo, animation).
4. Un informaticien qui programme les pages−écrans, l'interactivité, la gestion du site, etc.
Ressources technologiques
Il faut inventorier les ressources technologiques de son environnement :
• Ai−je accès à certains équipements ou périphériques, tels un numériseur, un appareil photo

numérique, etc. ?
Inventorier les ressources 12

Guide Web Éducatif
• Mon institution ou mon organisme soutiennent−ils certains logiciels auxquels j'aurais accès et
appuis ?
• Existe−t−il un logiciel intégrateur ou une coquille, tels WebCT, Learning Space, Blackboard, etc.,
auquel mon organisme souscrit et est prêt à m'accorder du soutien ?
Comme son nom l'indique, un logiciel intégrateur comme WebCT ou Learning Space intègre un ensemble
d'outils pour la plupart disponible sur Internet (Exemples : des gabarits de forum de discussion, des outils
pour créer des tests, etc.) dans un même produit.
Cependant, la prudence est de rigueur dans l'utilisation de coquilles ou de systèmes intégrateurs. La

transposition d'un site Web existant dans le gabarit recommandé pour ce type de système peut−être ardu. Il
faut investir un temps d'apprentissage du logiciel intégrateur et dans le cas de WebCT, il faut aussi apprendre
un autre logiciel pour l'édition de pages Web et connaître les principales balises HTML. Finalement, il faut
s'assurer que ce système n'est pas fermé et permet l'exportation des pages Web dans un autre environnement.
De nombreux articles sur le Web discutent de l'évaluation des systèmes intégrateurs dont ceux présents sur
Thot (http://thot.cursus.edu/rubrique.asp?no=17216). Si vous n'utilisez pas de systèmes intégrateurs, sachez
que le Web recèle plusieurs outils qui permettent d'améliorer la valeur d'un site éducatif. Par exemple, il existe
Hot Potatoes (http://web.uvic.ca/hrd/hotpot/) et Netsquiz (http://www.ccdmd.qc.ca/netquiz/), deux outils
extrêmement simples d'utilisation qui permettent la réalisation de tests interactifs. Il existe aussi une multitude
de gabarits pour le clavardage et les forums de discussion.
Si vous possédez déjà un site Web, il est préférable de faire des liens vers ce dernier dans le logiciel
intégrateur que de devoir retravailler chaque page pour enlever la navigation, les menus, etc., pour ensuite
l'incorporer au logiciel intégrateur.
Inventorier les ressources 13

Guide Web Éducatif
Analyser les coûts

Les coûts dépendent du contenu, de l'interactivité et de l'aspect graphique désirés pour le site. Le budget sera
donc subdivisé entre la rédaction du contenu, la production du matériel multimédia et la programmation. Pour
obtenir une évaluation assez juste des coûts de production de votre site éducatif, il est nécessaire de
déterminer la taille de votre contenu, le matériel multimédia désiré et les besoins d'interactivité.
Pour obtenir une évaluation juste des coûts de production d'un site Web, il faut élaborer un scénario détaillé
du site, avec le type d'interactivité souhaité, et définir ses besoins en matière de conception, de réalisation, de
production multimédia, de gestion de données, de sécurité et d'hébergement de site.
Au Québec, dans les firmes privées, le coût est de 5 $ pour une page Web. Mais curieusement, le coût total
moyen pour un site Web s'élève à plus de 15 000 $.
Analyser les coûts 14

Guide Web Éducatif
Analyser les coûts 15

Design pédagogique
Une fois l'analyse des besoins terminée et la pertinence du projet confirmée, l'étape suivante est la conception
du design pédagogique de votre site éducatif. Elle est la plus importante.
Le design pédagogique sert à structurer le contenu afin d'en faciliter l'apprentissage, ce qui permet d'atteindre
les objectifs pédagogiques.
Le design pédagogique se réalise en plusieurs étapes, soit :
• L'identification du but et des objectifs spécifiques de formation.

• La structuration du contenu en unité d'apprentissage logique.
• L'élaboration des stratégies pédagogiques permettant d'identifier les meilleurs moyens ou outils pour
atteindre vos objectifs. Il est donc primordial de connaître les spécificités de chaque médium afin de
maximiser son utilisation pédagogique.
• La conception de l'organigramme complet, de la navigation et de liens logiques du site afin de
permettre à l'apprenant de bâtir sa structure mentale de connaissances.
• La production de chaque gabarit et des pages−écrans.
• L'intégration d'outils de communication afin d'interagir avec les étudiants.
Design pédagogique 16
Guide Web Éducatif
Définir le but et les objectifs

Le développement d'une application pédagogique des technologies de l'information et des communications
(APTIC) est une solution à des lacunes dans l'apprentissage des étudiants ou à une difficulté de faire atteindre
les objectifs par des moyens traditionnels. On peut aussi utiliser les TIC pour diversifier nos stratégies
d'enseignement et d'apprentissage, ainsi les étudiants peuvent faire des simulations pour mieux comprendre
des concepts, des activités d'apprentissage collaboratif pour développer des compétences de travail d'équipe,
etc.
C'est souvent à partir des problèmes ou des lacunes identifiés que l'on formule le but ou objectif général puis
les objectifs spécifiques reliés à son projet.
Le but devrait être assez précis pour qu'on puisse identifier le contenu de votre application ainsi que le type
d'habiletés ou d'apprentissages visés.
Par exemple, le but de ce module est d'aider l'apprenant à comprendre les notions de base de...
Les objectifs spécifiques doivent être rédigés en termes mesurables.
Exemples :
• Nommer les quatre phases de développement d'un site éducatif.

• Définir dans ses mots et donner un exemple de....
• Identifier les caractéristiques de...
• Résoudre cette étude de cas en...
Définir le but et les objectifs 17

Guide Web Éducatif
Structurer le contenu
Le document électronique a modifié la manière de lire des utilisateurs, par rapport à la version papier. En
effet, sa lecture n'est plus linéaire et systématique. Pour réussir à motiver et à favoriser la lecture en ligne des
documents, il faut adapter le texte au médium, ce qui signifie rendre l'information plus accessible, la
synthétiser, la morceler en paragraphe et présenter la conclusion au début du document.
Voici quelques règles :
• Soyez bref et précis;

• Présentez le résumé de l'article au début du texte;
• Servez vous des liens, de l'interactivité du réseau;
• Intégrez des ancres dans les longs textes;
• Offrez une version imprimable.
Structurer le contenu, c'est le définir, le découper en petites unités, hiérarchiser les connaissances et planifier
l'ordre de présentation. Ceci permet de concevoir un réseau représentant la structure de l'application et les
cheminements possibles à l'intérieur de cette structure.
L'information doit être synthétisée et structurée de façon cohérente afin de faciliter sa compréhension. Les
textes sont analysés, résumés et découpés par tranche d'information. Cette démarche permet d'épurer les
textes, d'éliminer du contenu et, ainsi, de mieux cadrer les objectifs pédagogiques. Lorsque tout le contenu est
structuré, des unités sémantiques complètes et autonomes sont constituées, afin de faciliter le traitement
mental de l'information, la mise à jour et les combinaisons logiques entre ces unités, soit :
• La structuration du contenu en unités logiques;

• L'identification de la hiérarchie d'importance et de la généralité;
• L'établissement de la structure relationnelle entre les unités;
• La validation de la cohérence des liens et de la structure du site.
Saviez−vous que ?
Selon une étude effectuée par le ministère de l'Éducation, la vitesse de lecture à l'écran d'ordinateur est de
28,5 % inférieure à celle de l'imprimé. Voilà donc une autre bonne raison de synthétiser le texte.
Structurer le contenu 18
Guide Web Éducatif
Élaborer les stratégies pédagogiques

Il s'agit de choisir les stratégies et les médias qui aideront l'étudiant à atteindre les objectifs et à réussir son
apprentissage, ce pour chaque unité de contenu.
Les stratégies pédagogiques peuvent être :
• De présenter du texte, des images fixes ou animées, des tableaux, des cartes, des séquences vidéo ou
sonores, etc.;
• D'ajouter des hyperliens (réseaux de liens établis entre des mots, des images, des objets et des blocs
d'information) permettant de construire la connaissance;
• D'exécuter des exercices et de fournir une rétroaction immédiate;
• De permettre la consultation de sites de références identifiés et évalués par le professeur;
• De varier les exemples, d'utiliser la comparaison et la métaphore pour faciliter le transfert des
connaissances;
• D'offrir une version graphique et/ou texte.
Élaborer les stratégies pédagogiques 19

Guide Web Éducatif
Concevoir le site
Afin de mener à bien votre projet, il est crucial de concevoir clairement la structure du site et des différents
éléments qui le composent. La réussite de cette étape permettra à l'utilisateur de bien se représenter
mentalement le site et lui assura un certain succès s'il est simple à opérer. Dans certains sites, la table des
matières, ou plan du site, sera utilisée pour permettre à l'utilisateur de voir la représentation mentale de notre
site et faciliter la recherche d'informations. N'oubliez pas l'adage qui affirme que ce qui se conçoit clairement
s'énonce aisément.
Concevoir le site 20
Guide Web Éducatif
La structure
L'ergonomie de l'interface se définit comme l'ensemble des moyens mis en oeuvre pour guider et informer
l'usager afin d'alléger le plus possible la charge cognitive d'information.
On tente donc de placer l'usager au coeur du processus de navigation et de prévoir tous ses cheminements
intuitifs. Dans un site W3, cette considération est primordiale, étant donné que l'usager ne voit qu'une seule
page à la fois. Contrairement au livre, il est en effet difficile d'avoir une vue d'ensemble d'un site. Il faut aider
l'usager à se créer mentalement une structure qu'il découvre au fur et à mesure de son cheminement.
Bâtir l'organigramme
Une visualisation globale de votre site éducatif est indispensable pour la construction cohérente et la clarté des
liens de votre site. On dessine l'organigramme du site en créant tous les liens logiques, en évitant les
culs−de−sac et les dangers de récursivité.
C'est par une structuration simple et efficace du site qu'on permet à l'utilisateur de se créer un modèle mental
de l'organisation de l'information et qu'on facilite la recherche ainsi que l'accès à l'information.
L'organigramme permet de visualiser toutes les routes et les rétroactions possibles de l'hyperdocument
éducatif. Par exemple, on retrouve fréquemment une page d'accueil qui identifie le but et les objectifs du site
ainsi que le menu principal. Le premier menu devrait regrouper les blocs d'information sous un maximum de
cinq à sept unités, car la mémoire à court terme de la majorité des individus ne peut retenir plus d'information.
On recommande de structurer l'accès à l'information en utilisant un maximum de trois niveaux de sous−menus
et, lorsque cela est possible, d'intégrer un outil de recherche dans les sites qui possèdent un très gros volume
de pages−écrans.
Voici quelques exemples de structures d'information :
Il faut prévoir l'accès à un menu général et à la page d'accueil.
La structure 21
Guide Web Éducatif
La page d'accueil
La page d'accueil représente la porte d'entrée d'un site Internet.
Elle a pour objectif :
• De motiver l'apprenant;
• De nommer le but et les objectifs du site;
• De présenter le menu principal;
• D'identifier l'auteur, la source du site.
Tout au long de la visite dans le site, on doit pouvoir en tout temps revenir à la page d'accueil.
La page d'accueil 22
Guide Web Éducatif
La navigation
Il faut prévoir une méthode afin que l'utilisateur puisse naviguer entre les pages−écrans. Cette méthode se doit
d'être la plus efficace possible, en fonction de l'organigramme du site. La méthode la plus courante est
l'utilisation de menus.
Un bon système de navigation repose sur :
• La logique;
• La simplicité;
• L'accessibilité;
• Des libellés significatifs.
Le premier menu devrait regrouper les blocs d'information sous un maximum de cinq à sept unités, car la
mémoire à court terme de la majorité des individus ne peut retenir plus d'information. Il est recommandé de
structurer l'accès à l'information en utilisant un maximum de trois niveaux de sous−menus. Lorsque cela est
possible, il faut intégrer un outil de recherche dans les sites qui possèdent un très gros volume de
pages−écrans.
Saviez−vous que ?
Selon plusieurs études, l'usager souhaite trouver son information en moins de trois clics, sans quoi il sort du
site.
La navigation 23
Guide Web Éducatif
La présentation du site
Comme monsieur Tout−Le−Monde peut diffuser sur le réseau Internet son site Web, il est très important de
créer une page d'information sur votre site afin de lui donner toute sa crédibilité, définir ses objectifs et la
clientèle visée.
Réflexion
Lorsque vous offrez, sur le réseau Internet, un site pédagogique protégé par un mot de passe dans le cadre d'un
cours, il serait intéressant de prévoir une démonstration du cours, de donner de l'information sur le contenu et
sur les activités d'apprentissage, de créer un lien pour obtenir plus d'information sur le programme ou sur la
faculté qui offre le cours. Ceci permettrait aux internautes d'en savoir un peu plus sur ce site pédagogique. De
plus, puisqu'il existe de plus en plus de diplômes accessibles par le Web, votre cours pourrait avoir une
vocation internationale.
Exemple : menu du site Web du cours « Initiation aux vins »
La présentation du site 24
Guide Web Éducatif
Les annexes
Quelques sections utilitaires se rencontrent souvent sur un site Web. Elles sont à ajouter au besoin.
FAQ
Les questions les plus susceptibles d'être posées sont regroupées dans une section nommée FAQ.
Cette section évite de devoir répondre inlassablement aux mêmes questions et permet à l'apprenant de
trouver rapidement des solutions.
Nouvelles
La section « Nouvelles » présente en général les communiqués et les mises à jour. Si votre site est
sujet à de nombreuses mises à jour, cette section s'avère toute désignée afin de permettre à l'internaute
de trouver les nouveautés depuis son dernier accès.
Plan du site
Un site complexe peut offrir un plan qui présente l'ensemble des sections, sous−sections et liens qui
les unissent dans un écran, ce qui permettra à l'utilisateur de trouver rapidement l'information qu'il
désire.
Aide
Lorsque votre site possède une structure complexe ou une interface particulière, il est préférable
d'ajouter une section d'aide pour faciliter l'intégration de l'utilisateur.
Plugiciels requis
Lorsque votre site nécessite des plugiciels pour son fonctionnement, il est souhaitable de faire la liste
de ces derniers et de créer un lien vers le site où il est possible de se les procurer. Il faut également
s'assurer que ces plugiciels fonctionnent tant sur Windows que sur Mac, et même sur Linux, si
nécessaire.
Les annexes 25
Guide Web Éducatif
Concevoir les pages−écrans

Le gabarit permet d'uniformiser la présentation des unités sémantiques du site (mise en pages, typographie,
titre, texte et emplacement des éléments graphiques).
Lorsque le contenu est structuré et que les stratégies et les médias sont choisis, il s'agit de planifier la
production tant graphique qu'informatique et de concevoir sur papier le scénario ou le découpage des
pages−écrans de votre application. Chaque page−écran doit être considérée comme une unité autonome
possédant des identifications propres au site.
Lors de la conception des pages−écrans dans un environnement Web, il est important de tenir compte de
certaines considérations. Par exemple, il est souhaitable d'établir un gabarit de base pour l'ensemble du site. À
cette étape, on peut édifier le squelette des sections du site Web et, pour chacune d'elles, faire une mise en
pages harmonieuse. On décidera de l'emplacement des logos principaux, des boutons de navigation et des
titres de pages ainsi que de la disposition du texte.
On pourrait retrouver, par exemple, un gabarit pour les menus, un autre pour le texte, un autre pour les
activités d'apprentissage, etc.
Les éléments que l'on devrait trouver dans une page−écran sont :
1. En−tête
1. Titre du document
2. Bannière graphique
3. Barre de navigation
2. Corps
1. Sous−titre et contenu du document
3. Pied de page
1. Nom de l'auteur
2. Identification de l'organisme
3. Droits d'auteur
4. Date de mise à jour
Note : chaque page−écran doit porter un nom significatif pour permettre à l'internaute d'enregistrer celui−ci
comme signet définissant bien le contenu de la page ou le nom du site.
Réflexion
Il n'existe pas de gabarit unique : c'est l'uniformité des pages et les outils de navigation qui rendent un site
plus fonctionnel. Cela permet aux apprenants de trouver rapidement l'information qu'ils cherchent. De plus,
l'utilisation d'un gabarit pour un ensemble de pages augmente la convivialité d'un site Web. Il est très agréable
de naviguer à travers une collection d'information organisée de telle manière que l'apprenant puisse prévoir la
structure et les déplacements possibles.
Rédiger les pages−écrans
Concevoir les pages−écrans 26

Guide Web Éducatif
Lorsque les gabarits sont prêts, on conçoit chacune des pages−écrans sur papier, selon le gabarit approprié.
Prévoyez une page par écran et identifiez−la par un numéro correspondant à celui de la structure du contenu.
Sur chaque page, représentez graphiquement l'écran tel que vous le prévoyez. Décrivez tout ce qui doit
apparaître à l'écran et les branchements prévus. Rédigez les textes prévus, écrits ou verbaux, prévoyez les
hypertextes, décrivez l'image fixe (à créer ou à digitaliser), les images en mouvement (vidéo ou animation par
ordinateur, à créer ou existant déjà) et la réponse attendue de chacun des boutons de navigation et l'interaction.
Inscrivez aussi vos références, s'il y a lieu.
Voici ce à quoi peut ressembler une maquette papier :
Saviez−vous que ?
La plupart des navigateurs offrent une dimension de page−écran inférieure à la grandeur totale de l'écran de
l'ordinateur. En effet, les écrans de 15 pouces possèdent généralement une résolution de 800 x 600 pixels,
mais les navigateurs, quant à eux, présentent habituellement l'information à l'intérieur d'une page−écran aux
dimensions de 750 x 450 pixels. À l'impression, le format de l'écran est réduit d'un certain pourcentage afin de
permettre une impression de qualité en format lettre US (c'est−à−dire 535 par 670 pixels). Attention : cela

Guide Web Éducatif
dépend de la structure de votre gabarit de mise en pages.
Les dimensions suivantes peuvent être considérées comme assez sécuritaires pour pouvoir présenter
l'information à l'intérieur des limites acceptables pour tous les types d'environnement. Cependant, il faut
savoir que votre site éducatif sera surtout consulté par des personnes ayant des ordinateurs portatifs, la
résolution devra sûrement être réajustée puisque ces types d'écrans sont souvent inférieurs à 15 pouces.
Dimensions sécuritaires pour afficher l'information dans les pages Web

Guide Web Éducatif
En−tête
En−tête de page
L'en−tête sert avant tout à identifier chaque page−écran. Deux méthodes s'offrent à nous : l'utilisation d'un
titre en format texte ou d'une bannière graphique.
Titre en format texte
Le titre de la page doit être cohérent avec la table des matières ou le menu d'accès. Le document peut se
subdiviser en section, identifiée par des sous−titres pour offrir une meilleure organisation de l'information.
Pour ce faire, il suffit d'employer les étiquettes <Hx>, où le x varie de 1 à 6 (le H signifie Heading).
L'étiquette <H1> devrait être réservée au titre général de la page.
Voici un gros titre
Voici un titre assez gros
Voici un titre moyen
Des codes de couleurs peuvent aussi être utilisés afin que l'apprenant repère visuellement le bloc d'information
dans lequel il se trouve. Faites attention de différencier ces codes de couleurs et les couleurs employées par les
hyperliens.
Erreur courante
L'étiquette <TITLE> et les étiquettes <Hx> sont confondues fréquemment. L'étiquette <TITLE> sert à
nommer le document HTML auprès du navigateur et des moteurs de recherche. C'est le nom qui figura sur la
barre de titre de la fenêtre ou identifiera l'icône lorsque la fenêtre est réduite. En aucun cas cet élément ne peut
être présent dans le corps du texte d'un document HTML. De plus, le nom du document devrait se limiter à un
maximum de soixante (60) caractères, en évitant les caractères accentués.
La bannière graphique
La bannière graphique peut être utilisée comme en−tête pour insérer un titre de page. Cette identification
sommaire est très importante puisque, contrairement à la manière de procéder avec les documents papier, on
accède à l'information de façon non linéaire dans un site Web et il est souvent difficile de s'y retrouver.
En−tête 29
Guide Web Éducatif
Recommandation
Les bannières graphiques doivent être créées en fonction de la largeur de la page−écran, soit en 750 pixels. On
limite la hauteur à quelques pixels pour minimiser l'espace et accélérer le temps de transfert.
Erreur courante
Dans une utilisation non contrôlée de la bannière, celle−ci excède en largeur la page−écran et crée un
environnement non fonctionnel. Les utilisateurs seront obligés d'utiliser la barre horizontale de défilement
pour visualiser la page en entier, ce qui nuit considérablement à la lisibilité du texte.
Quoi de neuf ?
Pour mettre en évidence les modifications ou les ajouts au site, une page d'information intitulée : « Quoi de
neuf ? » peut être utilisée. Cette page servira à pointer les changements importants et à identifier leurs liens.
Il faut placer l'hyperlien vers cette page en évidence. L'utilisation du clignotement est fréquente pour attirer
l'attention sur cette section. Cette technique s'avère peu convaincante ; elle agresse plus qu'elle n'aide
l'internaute. Elle est donc à éviter.
Barre de navigation
Un internaute a besoin de se faire une image mentale du site de façon à en tirer le maximum et à comprendre
comment l'information est organisée. Les menus, la table des matières ou le plan du site lui permettent de
visualiser l'ensemble du site et de se diriger. Une façon simple d'avoir accès à ces outils de navigation, en tout
temps, est d'insérer dans chaque page−écran une barre de navigation.
La barre de navigation peut contenir un ensemble d'icônes ou de mots−clés permettant d'accéder aux
principaux menus et aux outils du site. Par exemple, on pourra retrouver des icônes qui lient chaque page à :
• L'organigramme ou la table des matières du site;

• La page aide;
• La page suivante et la page précédente;;
• Une page « Quoi de neuf ? »;
• Un outil de recherche, si le site en possède;
• Une page de téléchargement ou d'impression pour des documents;
• Un lien de courrier électronique au tuteur ou au responsable du site;
• etc.
Le graphisme des icônes devrait être très symbolique et facile à comprendre. Quelques icônes utilisées sur le
Web sont devenues une norme de facto. Par exemple, une maison identifie la page d'accueil et des flèches
illustrent bien l'action de reculer ou d'avancer d'une page−écran. Afin de s'assurer de la bonne compréhension
des icônes du site, il est de mise de créer une page « Aide » qui définit toutes les icônes et leur action.
En−tête 30
Guide Web Éducatif
Pour aider les internautes à voyager à l'intérieur du site, il est indispensable de leur fournir une barre de
navigation conçue en fonction de la structure de votre document.
Exemple de barre de navigation :
Saviez−vous que?
On oublie souvent que les liens dans un site Web doivent être bidirectionnels, permettant à l'utilisateur de
naviguer entre les pages du site. Les boutons de commande « avancer » et « reculer » des logiciels de
navigation Web permettent de se déplacer seulement dans l'historique du parcours de l'internaute. Par contre,
les icônes « page précédente » et « page suivante », donnent à l'utilisateur des outils de navigation pour se
promener selon l'ordre préétabli par le concepteur du site Web.
La barre de navigation devient un outil essentiel lorsque l'information est en mode hypertexte et complètement
enchevêtrée. Les hyperliens n'ont pas la fonction d'outil de navigation. Leur utilisation excessive détruit la
structuration du contenu du site et provoque une désorientation de l'utilisateur.
De plus, si l'internaute voyage d'un site à l'autre par un lien externe (il peut arriver n'importe où dans le site),
la barre de navigation sera alors d'un grand secours pour lui permettre de se retrouver. Le changement radical
de contexte créé par les hyperliens peut facilement désorienter l'utilisateur. Si, en plus, celui−ci est projeté
dans une page sans barre de navigation, il risque fort de passer à côté de l'information pertinente de ce site. Il
cherchera donc à en sortir au plus vite pour revenir à un environnement mieux structuré.
Saviez−vous que ?
On constate que la barre de navigation est souvent à gauche. Cette constatation s'explique peut−être par le fait
que le monde occidental lit de gauche à droite, donc notre regard va d'abord à gauche, endroit où sont disposé
les menus. Par contre, une barre de navigation à droite peut se justifier par la rapidité à l'atteindre puisque la
souris de votre ordinateur est à droite ainsi que la barre de défilement. Notre site emploie d'ailleurs cette
technique. Ainsi, le côté gauche est réservé à l'information pertinente.
En−tête 31
Guide Web Éducatif
Corps de la page
Sous−titres
Recommandation
Afin de rendre la recherche d'informations plus efficace dans le document, on suggère de synthétiser les idées
et de les regrouper par thèmes ou sous−thèmes, qu'on identifie par un sous−titre au début de chaque
paragraphe. Ainsi, d'un seul coup d'oeil, l'internaute peut trouver une information spécifique. Cela accélère la
recherche d'informations ainsi que la lecture.
La clarté du contenu, l'orthographe, la disposition des éléments sur la page sont des points importants dont il
faut tenir compte pour faire d'un texte une source d'information agréable à consulter et facile à lire.
Dans le but d'alléger le texte, il est souhaitable de n'utiliser qu'un seul genre et de mettre, si nécessaire, une
note du type « Le genre masculin est utilisé sans discrimination dans le but uniquement d'alléger le texte ».
Les liens dans les textes
Étant donné la nature de l'hypertexte, il est préférable d'éviter d'utiliser des mots, tels que « ici » pour
indiquer un lien vers une autre page. Des mots hyperliens ou des phrases faisant partie du contexte sont
beaucoup plus appropriés pour faire comprendre où on va après avoir cliqué sur le lien. On ne devrait pas faire
mention de l'adresse URL du lien lui−même dans le texte, à moins que cela ne soit important pour l'usager.
En fait, un paragraphe contenant des liens devrait être aussi lisible que s'il n'en contenait aucun. On souligne
le mot lien ou on l'inscrit dans une couleur contrastante spécifique pour signifier qu'il peut être cliqué.
Recommandation
Le service Web facilite la recherche d'informations spécifiques selon une méthode qu'on illustre par le terme
« surfer ». Cela signifie que l'internaute voyage grâce à des liens, d'une page à une autre, en examinant par
les titres le contenu d'une page ou d'un document. Il semble que les internautes ne lisent que rarement les
longues pages de textes sur ordinateur, ils préfèrent les imprimer pour les lire subséquemment si le contenu
leur apparaît vraiment pertinent.
L'organisation soignée de l'information, par capsules courtes et basées sur un gabarit d'ensemble pour le site,
aidera les internautes à trouver rapidement l'information désirée.
Corps de la page 32
Guide Web Éducatif
Saviez−vous que ?
La lecture sur un écran d'ordinateur provoque une grande fatigue oculaire, car le scintillement engendre une
perte de lisibilité d'au moins 30 %.
Il est donc déconseillé de transformer de très gros documents textes en format HTML. La plupart des
apprenants vont préférer imprimer de longues pages−écrans plutôt que de les lire directement à l'écran.
Cependant, comme ces pages−écrans forment un hyperdocument, l'impression complète du document peut
être très complexe. Une page−écran inclut des liens de navigation et des hyperliens qui nous dirigent vers
d'autres pages. On doit donc sélectionner manuellement les pages−écrans à imprimer. Cette méthode est très
longue et peu efficace. De plus, rien ne garantit que tout le document sera imprimé.
La meilleure solution, dans ce cas, est d'offrir une version imprimable des documents essentiels du site Web.
Les trois versions les plus courantes sont le format texte, le PDF et le format PostScript. Ces formats pourront
être téléchargés puis imprimés par l'internaute.
Corps de la page 33
Guide Web Éducatif
Pied de page
Le pied de page de chaque page−écran devrait contenir :
• Le nom de l'auteur;
• L'identification de l'organisme;
• La date de mise à jour;
• La référence Web.
Nom de l'auteur
Chaque page Web devrait inclure le nom et l'adresse électronique d'une personne ressource. Cette opération
s'effectue grâce à cette étiquette :
<A HREF="mailto :adresse@electronique">Nom de la personne</A>
Par la suite, le lecteur n'a qu'à cliquer sur le nom hyperlien de l'auteur et le navigateur ouvre une fenêtre de
courrier électronique. Pour les sites plus complexes, une adresse générique peut être utilisée, le Webmestre se
chargera de faire suivre le message à la bonne personne.
Identification de l'organisme
Recommandation
Il est très important d'identifier l'auteur ou l'organisme responsable du contenu du site afin de donner toute la
crédibilité à l'information. L'identification peut être sous forme de signature textuelle ou visuelle (logotype)
avec l'adresse et les autres coordonnées pertinentes (téléphone, télécopieur et URL de la page).
Mention des droits d'auteur
Droits d'auteurs protégés

A priori, toutes les pages Web sont protégées par les droits d'auteur. Pour rappeler ces droits aux
utilisateurs, il est bon de mettre dans tous les pieds de pages une mention « Copyright » désignant
l'auteur et l'institution en tant que propriétaire de l'information contenue dans cette page.
Droits d'auteurs partagés
Si, par contre, vous souhaitez que votre information puisse servir à la communauté Internet, il sera
bon de mentionner que « tous les droits de reproduction sont autorisés avec mention de la
référence ».
Obligation de respecter les droits d'auteur
Dans tous les cas, avant d'utiliser du matériel provenant d'un site Web, il est important de vérifier la
provenance de ce matériel et les droits d'utilisation qui le régissent. Il existe des banques d'images ou
d'information de nature publique, mais il faut toujours vérifier la possibilité de s'approprier le matériel.
Certains organismes ont comme fonction de scruter le réseau Internet pour poursuivre les responsables du non
respect des droits d'auteur, même ceux accessibles que par mot de passe.
Pied de page 34
Guide Web Éducatif
Pour plus d'information :

http://www.juris.uqam.ca/cours/actuel/jur6854/rene_cote/PLAN1bis.html
Référence Web
Il serait de mise d'ajouter, au bas de la page, l'adresse URL de votre site. Cette pratique permet à l'internaute,
qui imprime des pages−écrans, d'obtenir facilement en référence les coordonnées informatiques du site. Tous
ne savent pas nécessairement que les logiciels de navigation permettent maintenant d'inclure automatiquement
l'URL de la page lors de son impression (Voir les options de configuration du navigateur).
Recommandation
En plus d'identifier le nom de l'auteur et l'avis « copyright », il est de mise d'indiquer la date de mise à jour
de l'information. Cette date permet de savoir quelle version se trouve en ligne et au lecteur d'évaluer l'âge de
l'information.
Date de mise à jour
Il est souhaitable d'utiliser un format standard identifiable par tous, par exemple :
• Dernières modifications : le 7 janvier 2001;

• Mise à jour le 7 janvier 2001.
Évitez un format portant à confusion tel que 07−01−01.
Le réseau Internet requiert de l'information actuelle. Si vous négligez de le mettre à jour fréquemment votre
site, il sera délaissé par les internautes.
Réflexion
Tout le monde peut, à partir de son ordinateur de maison, afficher son site Web sur le réseau mondial qu'est
l'Internet. La multitude d'informations qu'on y retrouve est contrôlée par personne, ce qui signifie qu'on ne
peut valider la véracité de cette information. C'est dans ce contexte que le pied de page prend toute son
importance. Les informations transmises à l'internaute lui permettent de connaître l'origine du contenu d'un
site et de juger de sa validité.
Pied de page 35
Guide Web Éducatif
Définir l'ergonomie
La conception de l'interface d'un site Web éducatif nécessite toutefois le respect de certaines règles. En effet,
l'ergonomie est un concept primordial en informatique, car la facilité et l'efficacité d'une application reposent
sur elle.
Cette section du guide vous fournira les concepts de base de l'ergonomie d'un site Web, plus particulièrement
sur le texte, la couleur, la mise en pages et l'image.
Définir l'ergonomie 36
Guide Web Éducatif
Le texte
Un texte informatique se destine soit à la lecture à l'écran soit à être imprimé. Il est conçu en fonction de sa
destination.
Un texte lu à l'écran se doit d'être présenté sous forme de brèves capsules, l'écran étant un support plus petit
que le papier et plus fatigant à consulter. De plus, ce texte peut profiter de l'apport du support informatique
notamment l'hypertexte qui permet au lecteur d'approfondir le sujet. Un hypertexte est un texte dont certaines
idées sont liées à d'autres textes par un hyperlien. En cliquant sur une idée soulignée, le texte lié est
automatiquement présenté au lecteur. Cette fonctionnalité est la base de la navigation sur Internet.
Un texte destiné à être imprimé aura une forme traditionnelle. Toutefois, il faudra offrir à l'utilisateur la
possibilité de télécharger ou d'imprimer ce texte dans un format adéquat.
Pour en savoir plus sur les notes de cours interactives, consultez :

http://www.fse.ulaval.ca/Robert.Brien/ni2/
Nous connaissons tous des sites Web qui présentent l'information sous forme de très longs textes. Ces livres
transposés en document informatique Web sont peu efficaces. La lecture d'un livre est très différente de celle
de pages sur écran informatique. Pour mieux comprendre comment traiter un texte dans un environnement
informatique, nous vous présentons les principales différences entre le texte imprimé et celui à l'écran.
En résumé :
Le texte à l'écran... Le texte imprimé...

...émet de la lumière ...réfléchit la lumière
...est fragmenté (page par page) ...est unitaire (livre)
...est discontinu ...est continu
...est évanescent ...est permanent
...est lu en balayant la page ...est lu ligne par ligne
La page−écran illustre donc une réalité parcellaire et segmentée, ce n'est pas une page dans un livre.
L'information doit être condensée, synthétisée et davantage structurée, et ce, au moment de la structuration du
contenu (phase 2). Une fois cette opération effectuée, la production graphique est planifiée.
Le texte 37
Guide Web Éducatif
La typographie
Un maximum de trois polices de caractères devrait être utilisé afin de conserver l'harmonie visuelle des
pages−écrans. Les polices à privilégier sont celles sans empattement comme Helvetica, Verdana et Arial,
d'une taille d'au moins 12 points.
Il ne faut pas oublier les principes de base de lisibilité :
• La lecture s'effectue d'abord en distinguant la forme globale de la phrase, puis les espaces marquent la
séparation des mots et, enfin, chaque mot est interprété.
• Les majuscules et minuscules permettent de repérer les débuts de phrase et les noms propres aisément.
• Le gras est préféré aux majuscules pour mettre en évidence un élément, car il est plus facile à lire et
les majuscules signifient CRIER sur Internet.
• Le clignotement est déconseillé, car il devient très rapidement agressant.
• L'italique amoindrit la lisibilité du texte et son apparence ne peut être contrôlée sur les différentes
plates−formes.
• Le souligné identifie les hyperliens sur le réseau Internet et il doit être réservé à cette fin.
• Les phrases devraient contenir un maximum de 10 à 12 mots.
• Le texte en majuscule forme un bloc serré qui rend difficile la distinction des lettres.
Exemples de casse :
Bloc difficile à lire.
Bloc facile à lire grâce aux diverses hauteurs des lettres.
Saviez−vous que ?
La police Windows 12 pts est affichée avec environ 2 pts de moins sur ordinateur MacIntosh.
La typographie 38
Guide Web Éducatif
Disposition du texte
Il est possible de disposer un texte de plusieurs façons dans une page−écran. On peut l'afficher à la grandeur
de l'écran, le disposer en tableau ou le structurer dans un environnement par cadre, mais toujours dans un
objectif de lisibilité. De plus, il est souhaitable de respecter certaines règles de base :
• Ne jamais faire des colonnes de type journal;

• Éviter les textes trop larges qui nécessitent les déplacements horizontaux de la barre de défilement;
• Éviter les mots clignotants dans un texte;
• Éviter l'usage abusif des cadres.
Exemple de mise en pages
Pour mettre un texte en évidence, on peut employer une mise en retrait de 8 caractères au début
de la première ligne ou mettre les premiers mots de chaque paragraphe en gras.
Dans certains cas, une couleur de fond peut être employée afin de faire ressortir l'importance de ces quelques
phrases. De plus, les paragraphes peuvent être dotés d'un interligne différent. Enfin, il ne faut pas oublier que
les textes sur le Web sont avant tout survolés sans être nécessairement lus.
Erreur courante
Si la page est trop longue, une erreur de type « transfert interrompu » risque de survenir.
Recommandation
Disposition du texte 39
Guide Web Éducatif
Un bon site n'affichera jamais un texte à la largeur de l'écran, mais placera un tableau invisible d'un maximum
de 400 pixels.
Disposition du texte 40
Guide Web Éducatif
Numériser un texte
La numérisation est la codification numérique des intensités lumineuses et de la colorimétrie d'un document.
La représentation numérique d'un texte peut se faire selon deux modalités :
• Le texte est considéré comme une image qui permet de rendre seulement la forme des caractères, il est
alors représenté sur un mode photographique. Ce type de document est obtenu par numérisation
directe du document (mode image).
• Chaque caractère possède sa représentation unique sous forme numérique. Ce type de document en
mode caractère est obtenu, soit par saisie directe par des outils de type traitement de texte, soit par
reconnaissance optique de caractères à partir d'un document en mode image.
Mode image
Le mode image est rapide et facile à obtenir. Toutefois, ce mode présente deux inconvénients majeurs.
Premièrement, il exclut la recherche à l'intérieur d'un texte. Deuxièmement, il génère des fichiers importants
qui occupent de la place sur les supports de stockage. Une page entière numérisée en mode image peut
facilement prendre jusqu'à 100 fois l'espace de stockage d'une page numérisée en mode texte.
Mode texte
Le mode texte offre la possibilité de recherche plein texte. Il est possible d'intervenir directement sur le
document électronique. En revanche, le mode texte ne permet pas de conserver parfaitement la présentation
initiale du document original, si ce dernier possède une mise en pages sophistiquée.
Pour obtenir du mode texte, deux solutions sont possibles :
Saisir manuellement les textes

Cette technique est coûteuse en temps et en main−d'oeuvre, mais c'est la seule envisageable pour la
numérisation de textes manuscrits.
Utiliser un logiciel de ROC

Mieux connu sous le sigle anglophone OCR, cette technique utilise un document numérisé en mode
image. Le logiciel convertit la configuration des points en signes typographiques dont il déduit la
valeur dans une table de codification comme l' ISO 8859−1 (ISO Latin−1) ou comme l'ISO 10646
(UNICODE).
Les outils de reconnaissance optique ne sont pas encore totalement fiables. Même si certains logiciels
annoncent un haut degré de fiabilité, la perfection n'est pas atteinte, surtout lorsque la qualité du
document original est quelconque ou que ce document emploie une police de caractères difficile à
analyser. Les logiciels de reconnaissance haut de gamme peuvent atteindre un taux d'exactitude de
99,95 %, ce qui ne représente pas plus d'une erreur pour 2000 signes. Les fabricants de logiciels
d'OCR améliorent régulièrement leurs produits, notamment en ayant recours à des dictionnaires ou
des outils d'analyse grammaticale. De plus, ce type d'approche est peu adapté aux documents qui
comportent de nombreux noms propres, des formes grammaticales anciennes ou qui sont écrits en
plusieurs langues.
Numériser un texte 41
Guide Web Éducatif
La couleur
La couleur du texte doit contraster avec le fond pour en faciliter la lisibilité. Idéalement, une typographie
foncée sur un fond clair produit moins de fatigue à l'écran.
Il est possible d'obtenir un bon contraste en utilisant un texte clair sur un fond foncé, mais l'impression d'une
telle page−écran peut être illisible. En effet, la plupart des internautes configurent l'impression des
pages−écrans en noir et blanc afin d'accélérer le traitement. Ainsi, un texte clair sera de piètre qualité lors
d'une impression en noir et blanc.
Selon notre expérience, il semble que certaines associations de couleurs soient plus efficaces que d'autres pour
faciliter la lisibilité du texte :
Conseillé Déconseillé
(couleur caractères−couleur (couleur caractères−couleur
fond) fond)
Violet sur fond blanc Rouge sur fond vert
(330066−ffffff) (ff0000−00ff00)
brun foncé sur fond gris−vert Rouge sur fond bleu
(330000−99CC99) (ff0000−0000ff)
Vert foncé sur fond jaune pâle Vert pâle sur fond blanc
(003300−ffffcc) (99FF33−ffffff)
Violet sur fond rose pâle Vert sur fond bleu
(330066−ffcccc) (00ff00−0000ff)
Blanc sur fond vert foncé Jaune sur fond vert
(ffffff−006600) (ffff00−00ff00)
Certains sites graphiques, tels que ceux qui sont indiqués dans la liste suivante, permettent de visualiser
instantanément la sélection des couleurs :
• The Browser Safe Color Palette (http://www.lynda.com/hex.html)

• Colormaker (http://www.bagism.com/colormaker/)
Saviez−vous que ?
Environ 12 % de la population, majoritairement des hommes, souffre de daltonisme. De plus, la signification

des couleurs varie sensiblement entre les cultures. Par exemple, le blanc signifie pour les Occidentaux la
naissance tandis qu'au Japon, cette couleur est synonyme de deuil.
Recommandation
La couleur 42
Guide Web Éducatif
Il est recommandé d'utiliser une couleur de fond ayant la même teinte que le gris clair, utilisé par défaut par la
majorité des navigateurs, afin de s'assurer que la couleur du texte et des hyperliens par défaut (soit noir, bleu
ou violet) soit lisible sur toutes les plates−formes. Évitez les fonds à teintes de rouge ou de jaune, car cela
fatigue l'oeil.
Saviez−vous que ?
Saviez−vous que la luminosité des couleurs est plus intense sur un écran d'ordinateur de type Macintosh que
sur un écran de type PC ?
Plus spécifiquement, cela signifie que le contraste des couleurs ne sera pas le même selon le type d'écran
d'ordinateur. Il faut donc effectuer une vérification des pages Web, idéalement sur les trois principales
technologies (PC, Macintosh et Unix), et effectuer des variantes sur le nombre de couleurs affichées à l'écran.
Ainsi, un graphiste qui conçoit des pages Web en millions de couleurs doit s'assurer de la lisibilité du texte en
256 couleurs ainsi qu'en 16 couleurs et en noir et blanc. Un petit truc simple pour évaluer les contrastes de sa
page−écran est de la visualiser en noir et blanc ou en tonalité de gris.
La meilleure façon de s'assurer que les couleurs que vous utilisez dans vos pages Web soient les mêmes, peu
importe l'environnement où elles seront consultées, est d'utiliser la « Browser−Safe Color Charts ». Cette
palette de couleurs universelles dans l'environnement Web est disponible à l'URL :
http://www.lynda.com/hex.html
La couleur 43
Guide Web Éducatif
La mise en pages
Un des éléments clés de la réussite d'un site Web est la disposition des divers éléments à l'écran. Diverses
techniques permettent de faciliter la mise en pages de l'information. De plus, quelques règles simples assurent
un confort d'utilisation de votre site Web. Le tout est exposé au fil des prochaines pages.
Recommandation
Un tableau unique à la grandeur d'une page Web cause de graves problèmes puisqu'il ne sera affiché que
lorsque le contenu sera entièrement téléchargé. L'utilisation de multiples tableaux dans la même page vient
pallier ce problème, car il permet une mise en pages efficace et un téléchargement rapide.
La mise en pages 44
Guide Web Éducatif
Taille d'une page
Il existe 4 facteurs à considérer quant à la longueur de la page :
1. La relation entre la page et la grandeur de l'écran;

2. Le contenu particulier du document;
3. Le type de consultation souhaité : une lecture à l'écran ou un téléchargement;
4. Le type de connexion utilisé par les usagers.
Portion affichable de l'écran
Saviez−vous que ?
D'après Horton 1990, Norman 1993 et Apple 1992, la barre de défilement déstabilise l'utilisateur lorsqu'elle
descend trop profondément dans la page, éliminant tous les éléments de navigation.
Il est important de concevoir le design d'un site Web en tenant compte des différents types d'écrans
disponibles sur le marché. À l'heure actuelle, il est conseillé de construire le site en fonction d'un écran de 15
pouces (une résolution de 800 par 600 pixels).
La largeur de chacune des pages du site est l'élément le plus déterminant. Il est conseillé d'utiliser une largeur
de page n'excédant pas 640 pixels.
Il a été prouvé que seulement la moitié des internautes utilisent la barre de défilement. On préconise
l'utilisation maximale de deux pages−écrans pour afficher le contenu d'une page, ce qui équivaut à une page
de format lettre. Cela facilite l'impression et réduit la difficulté de lire à l'écran.
Taille d'une page 45

Guide Web Éducatif
Différentes résolutions selon le type d'écran :
• Écran 14 pouces (640 par 480 pixels)

• Écran 19−21 pouces (1024 par 768 ou 1280 par 1024 pixels)
Recommandation
La taille de l'écran d'un ordinateur portable est généralement inférieure à celle d'un ordinateur de bureau. Si
votre clientèle inclut des utilisateurs d'ordinateur portable, veillez à limiter la résolution de votre page Web.
Taille d'une page 46

Guide Web Éducatif
Le tableau
Un tableau permet de structurer l'information en colonnes et en lignes.
Un tableau en HTML offre une grande souplesse. Du texte, des images, des graphiques ou des objets animés
peuvent être insérés au sein des cellules. Le tableau peut inclure un titre, un en−tête aux colonnes ou aux
lignes, des cellules au fond coloré ou du texte en couleur. De plus, il est possible de modifier l'apparence des
bordures, la largeur des colonnes ou l'alignement des éléments. Bref, le tableau dispose des éléments de mise
en forme habituelle d'un chiffrier électronique tel qu'Excel.
Ce lien présente un exemple de mise en pages à l'aide d'un tableau.
Comment définir la dimension d'un tableau ?
La technique du pourcentage
Au lieu de donner des valeurs arbitraires aux dimensions des tableaux, la technique du pourcentage emploie
des proportions. Ainsi, un tableau pourrait réserver 20 % de l'espace pour le menu et 80 % pour le texte. Ce
qui permet au tableau de s'adapter automatiquement à la résolution de l'écran de l'utilisateur. Par contre, cette
technique possède pour désavantage de ne pas supporter les images. En effet, ces dernières ne seront pas
redimensionnées selon la proportion spécifiée : elles garderont leur taille originale. La mise en pages sera
alors complètement bouleversée.
Technique mixte
Pour pallier le problème de la première technique, on combine la dimension fixe d'un tableau avec une
dimension en pourcentage pour le texte. Ainsi, le texte s'adaptera aux différentes résolutions d'écran alors que
la section fixe, qui pourra contenir des images ou un menu par exemple, occupera toujours la même largeur et
la même position à l'écran.
Recommandation
Si la largeur des colonnes est identifiée en pixels, elle sera fixe. Ce qui signifie que si la fenêtre du navigateur
n'offre pas suffisamment d'espace, le texte sera coupé. Si la largeur est définie de façon relative (en
pourcentage), elle sera ajustée lors d'un redimensionnement.
Les tableaux ont été souvent utilisés pour définir l'apparence d'une page HTML. En effet, le HTML n'offrant
pas un contrôle précis de la mise en pages, le tableau permettait au concepteur de mieux contrôler la
disposition des éléments constituant la page. Toutefois, cette façon de faire ne devrait plus être employée, les
feuilles de style en cascade (CSS) étant dédiées à cette tâche.
Le tableau 47
Guide Web Éducatif
Les cadres
Le cadre permet de fragmenter la page−écran en section indépendante, chacune contenant un document

différent. Toutefois, une requête exécutée dans un cadre (activer un lien, soumettre une recherche) peut
générer un résultat dans un autre cadre.
Exemple schématisé de cadres :
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| Fenêtre du navigateur |
|−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−|
| −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− |
| | | | |
| | | | |
| | | | |
| | | | |
| | Cadre 1 | Cadre 2 | |
| | | | |
| | | | |
| | | | |
| | | | |
| −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− |
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
Recommandation
Puisque les cadres sont supportés plus ou moins correctement par les différents navigateurs, sont destinés à
l'écran et, surtout, ne sont plus préconisés par les standards du W3C, il faut être prudent dans leur utilisation.
Un cadre peut servir de zone fixe, préservant ainsi l'information importante à l'écran, pendant que l'utilisateur
consulte de l'information dans un second cadre. Ces cadres peuvent être horizontaux ou verticaux. Il est
souhaitable que l'information contenue dans le cadre fixe soit complète afin d'éviter d'avoir plusieurs cadres
avec des barres de défilement. Il faut s'assurer que tous les éléments sont visibles et lisibles sans avoir à
recourir à la barre de défilement horizontale sur un écran de 15 pouces.
Par exemple, si on dispose une table des matières dans un cadre, celle−ci devrait être visible en entier dans la
page−écran afin d'éviter l'affichage et la manipulation d'une barre de défilement. Ainsi, l'internaute pourra
parcourir le site dans le deuxième cadre et accéder en tout temps à la table des matières affichée dans le
premier cadre.
Le code HTML nommé NOFRAME peut être utilisé pour afficher un message spécifiant que le navigateur
utilisé ne supporte pas les cadres (similaire à la fonction ALT des images). De plus, beaucoup d'utilisateurs
préfèrent ne pas utiliser cette fonctionnalité. La solution idéale est de prévoir une version du site avec cadres
et une autre sans cadres.
Il n'est pas possible de référer directement par une adresse URL à une page se trouvant à l'intérieur de cadres.
En d'autres mots, vous ne pourrez pas dire à quelqu'un de taper une adresse qui le conduira à une page à
l'intérieur d'un site utilisant les cadres. Il pourra accéder à la page, mais cette dernière ne sera plus à l'intérieur
des cadres prévus pour le site. Il faut donc s'assurer de ne pas conduire les usagers dans des pages
culs−de−sac. Une solution est de mettre une bande de navigation dans chaque page.
Les cadres 48
Guide Web Éducatif
Il demeure souvent très complexe pour un utilisateur peu expérimenté d'imprimer des pages contenues à
l'intérieur de cadres. Ce dernier doit souvent ouvrir le cadre dans une nouvelle fenêtre pour réussir à imprimer
correctement la page désirée. La seule façon d'aider l'utilisateur est d'inclure une page expliquant la procédure
à suivre pour imprimer des pages de notre site.
Finalement, un problème souvent rencontré est l'ouverture de nouveaux sites à l'intérieur d'un cadre. Si ce
nouveau site a le malheur de contenir lui aussi des cadres, la navigation peut devenir rapidement confuse.
Pour éviter ce problème, il est conseillé de faire en sorte que chaque lien vers un autre site s'ouvre dans une
nouvelle fenêtre de navigation. Il suffit d'ajouter l'attribut target="_blank" à l'intérieur de l'étiquette
<a>.
Exemple : <a href="http://www.yahoo.com" target="_blank">
Problèmes des cadres
• Réduit l'espace à l'écran;

• Empêche la création de favoris sur une des pages des cadres;
• S'imprime difficilement;
• Nuit aux moteurs de recherche dans l'indexation du site.
L'environnement par cadre nécessite une très bonne structuration de l'information. De plus, une attention
spéciale doit être portée aux liens pour éviter les structures récursives. Par exemple, une page−écran utilisant
une structure par cadre peut être téléchargée dans une autre page−écran ayant elle aussi des cadres. Les
résultats sont parfois sidérants. Enfin, l'affichage d'un site externe dans un cadre camoufle son adresse et fait
ainsi preuve d'un manque de respect envers son auteur.
Exemple d'une MAUVAISE utilisation des cadres
Exemples d'une BONNE utilisation des cadres
Les cadres 49
Guide Web Éducatif
Les cadres 50
Guide Web Éducatif
Les formulaires
Les formulaires servent principalement à recueillir de l'information ou à faire des évaluations formatives.
Les formulaires sont simplement une interface. Un traitement informatique doit être implanté pour recueillir
les données et les transférer à un serveur, qui lui les traitera. De plus, il est important d'offrir à l'utilisateur une
rétroaction afin de confirmer le traitement ou l'acheminement de sa requête.
Recommandation
On comprendra que les formulaires à choix multiples sont à privilégier puisqu'ils sont simples à compléter par
l'utilisateur et faciles à traiter par le concepteur.
Les formulaires 51
Guide Web Éducatif
L'image
Une image informatique est un ensemble de points, nommés pixels, colorés selon une certaine palette de
couleurs.
L'image peut remplir différentes fonctions :
Compléter un texte
Elle apporte un support visuel et améliore la compréhension du contenu.
Schématiser une métaphore
Afin de simplifier une interface et de l'universaliser, une image sera employée, comme la maison pour
l'origine du site ou la poubelle pour la suppression.
Offrir une interface
L'image peut être une interface, telle qu'une carte géographique découpée en région qui permettrait de
sélectionner la région désirée à l'aide de la souris.
Décorer
L'image sur le Web est souvent utilisée uniquement pour améliorer l'esthétisme du site, tel que celle
placée en fond d'écran.
Lors de la création d'images pour le Web, il est important de garder à l'esprit qu'elles seront affichées sur une
multitude de plates−formes différentes. Il est fréquent de visiter un site ayant une très bonne qualité graphique
sur une plate−forme, par exemple, avec un écran Macintosh en milliers de couleurs. Toutefois, ce même site
devient illisible sur un écran de terminal X−Windows Unix ou d'un PC avec Windows.
Pour éviter ce genre de problème, il est important de tester les images sur différentes plates−formes avant de
les publier. Il est possible de réduire les problèmes en utilisant des images enregistrées en couleurs indexées,
comme le GIF, qui ne contiennent que peu de couleurs et qui ont un fort contraste. Les images ayant ces
caractéristiques seront habituellement visibles sur n'importe quel système.
Taille des images
Théoriquement, les images publiées sur le Web peuvent avoir n'importe quelle taille à l'écran, mais il est
préférable de suivre ces quelques recommandations pour faire un usage judicieux des images à l'intérieur de
votre site.
La résolution des images devrait être de basse résolution, c'est−à−dire 72 pixels par pouce (dpi, en anglais) sur
un Mac et 96 pixels par pouce sur un PC. Cette résolution est appelée qualité−écran. Puisque la plupart des
utilisateurs possèdent des écrans de 15 pouces et que la résolution de ces écrans est de 800 par 600 pixels, il
est préférable de respecter les limites maximales de largeur d'une page−écran de 750 pixels, pour éviter qu'une
image ne soit plus large que la fenêtre. Il est recommandé de maintenir la taille des images sous les 30 Ko et
de ne pas dépasser 70 Ko pour une page complète (cela représente tout de même plus de 15 secondes de
téléchargement à une vitesse de 56 Kbd).
Il n'est pas souhaitable de mettre des images de grandeur pleine page dans un site puisque le temps d'accès
étant très long et les usagers se découragent et cesse le téléchargement. Pour accélérer l'affichage d'un
document HTML qui contient des images, la taille des images est indiquée dans l'étiquette IMG, en utilisant la
syntaxe suivante : <img src="nomdelimage" width="xxx" height="yyy"> où xxx est la
largeur de l'image et yyy sa hauteur en pixel.
Cette information permet au logiciel de navigation d'effectuer la mise en pages avant la réception des images.
L'image 52
Guide Web Éducatif
En effet, il n'est pas nécessaire d'attendre que l'image soit complètement téléchargée pour en connaître la
dimension.
Si une grande image est nécessaire, il vaut mieux faire une page contenant une version réduite de l'image et
créer un lien vers une version pleine grandeur. Cette façon de procéder permet au lecteur d'obtenir rapidement
un aperçu de l'image et de pouvoir consulter immédiatement le texte descriptif ou encore l'explication qui va
de pair avec l'image, avant de télécharger celle−ci. Il pourra donc juger de la pertinence de visualiser ou non
l'image avant d'effectuer le transfert qui peut être assez long par modem.
Exemples de la proportion idéale :
Petite image d'une étiquette de vin
Grosse image d'une étiquette de vin
Saviez−vous que ?
Plusieurs études démontrent que le délai maximum accepté par usager est de l'ordre de 20 secondes (Horton
1990; Schneiderman, 1992). En fait, l'internaute s'attend en général à une réponse aussi rapide que le clic de sa
souris.
Saviez−vous que ?
Les couleurs sont différentes
Les couleurs seront affichées différemment selon la technologie. En effet, sur un écran Macintosh les couleurs
sont beaucoup plus claires, tandis que sur les écrans PC les couleurs sont plus sombres. De plus, la palette de
couleurs des systèmes Macintosh et PC n'a que 216 couleurs identiques sur les 256 standard, ce qui explique
les différences importantes à l'affichage des éléments graphiques. Avec le logiciel Photoshop, il est possible
de simuler, pour l'autre technologie, la qualité des contrastes de couleurs d'une image, en utilisant la fonction
GAMMA (Exemple : vous travaillez sur une plate−forme PC; sachant que les contrastes sont plus sombres,
vous pouvez voir l'effet simulé pour une plate−forme Mac avec la fonction GAMMA de Photoshop).
L'image 53
Guide Web Éducatif
Palettes de couleurs des systèmes Macintosh et Windows
Les fenêtres écrans sont de dimensions différentes
Les environnements Windows et UNIX ont souvent une fenêtre plus large que les écrans Macintosh, il est
donc préférable de faire des tests avec plusieurs largeurs de fenêtres, idéalement en passant du simple au
double de la largeur.
Tous les internautes ne voient pas les images
Certains internautes désactivent l'affichage des images afin d'accélérer l'affichage des pages. La clientèle non
voyante utilise également un système de synthèse vocale permettant de lire les textes et les noms des images.
Afin d'assurer l'accessibilité de son site, il faut offrir une alternative à l'image qui n'est pas affichée. Cette
action est possible en utilisant l'attribut alt="texte décrivant l'image" dans l'étiquette <img>.
L'image 54
Guide Web Éducatif
L'image graphique
Le format d'image le plus courant sur le Web est le GIF. Ce format, codifié en huit bits, permet la sauvegarde
d'image possédant une palette d'au maximum 256 couleurs. Il s'agit d'un fichier graphique bitmap, compressé
selon l'algorithme LZW. Les droits de ce format appartiennent à la compagnie Unisys et tout utilisateur de
fichier GIF devrait se conformer à leur licence d'utilisation. Un format similaire, le PNG, a été développé afin
d'offrir une alternative libre de droit.
L'image graphique offre quelques particularités :
L'entrelacement
Normalement, une image est dessinée du premier pixel (coin supérieur gauche) au dernier pixel (coin
inférieur droit). Afin d'offrir un aperçu plus rapidement à l'utilisateur, il est possible d'entrelacer
l'image. Elle sera alors dessinée par section, un peu comme si elle était cachée derrière un store
vénitien qui était progressivement ouvert.
La transparence
La transparence est une propriété attribuée à certains pixels. Ces derniers prendront la couleur de
l'arrière−plan sur lequel l'image est disposée, comme s'ils étaient transparents.
La palette de couleurs
La palette de couleurs est l'ensemble des couleurs employées au sein de l'image. Une couleur est
attribuée pour chaque pixel. Cette couleur nécessite une certaine quantité de mémoire (bit) pour en
conserver la valeur. Si un seul bit est conservé par pixel, seules deux couleurs peuvent être utilisées
(Valeurs disponibles : 0 et 1). Les tableaux suivants illustrent le rapport entre les bits et les
couleurs :
TABLEAU 1. Nombre de bits VS nombre de couleurs
Bits par pixel 1 2 3 4 5 6 7 8 24

Nombre de couleurs 2 4 8 16 32 64 128 256 16,7 millions
TABLEAU 2. Qualité de l'image VS nombre de bits
8 bits/pixel 7 bits/pixel 6 bits/pixel

216 couleurs, 10k 125 couleurs, 8k 64 couleurs, 6k
5 bits/pixel 4 bits/pixel 3 bits/pixel

27 couleurs, 5k 8 couleurs, 4k 8 couleurs, 3k
L'image graphique 55
Guide Web Éducatif
L'image photographique
Lorsque l'image nécessite une qualité supérieure à celle du format graphique, pour représenter fidèlement une
photographie par exemple, un format comme le GIF, avec sa palette limitée, ne s'avère pas suffisant. Le
format JPEG a été conçu spécifiquement pour gérer les images photographiques à haute résolution.
Doté d'une palette étendue (jusqu'à 24 bits par pixel) et d'un algorithme de compression sophistiqué, ce format
s'est imposé sur le Web pour toutes les images de qualité supérieure. L'extension du fichier de ce format est
.jpg, bien que l'on rencontre parfois .jpeg
Comparaison entre une image GIF et JPG
JPG (13,1 Ko) GIF (9,3 Ko)
Saviez−vous que ?
Les formats GIF, PNG, JPG sont constitués des valeurs de chaque point (pixel) d'une image, d'où le nom
bitmap.
Une image bitmap nécessite beaucoup de mémoire. Par exemple, un dessin en noir et blanc de 800 pixels de
large sur 600 pixels de haut utilisera au bas mot 480 000 bits. D'où la nécessité d'utiliser un algorithme de
compression qui permettra de réduire la taille du fichier en regroupant, par exemple, les éléments redondants.
Par exemple : si une couleur se répète sur 100 pixels, l'algorithme remplacera les cent pixels par un code qui
indiquera que cette couleur est répétée pour les cent prochains pixels).
Tandis que l'algorithme de compression du format GIF est rigide, celui du JPEG offre différents niveaux de
compression. Toutefois, le taux de compression le plus élevé entraîne une perte dans l'information originale. Il
est dit destructif. Par exemple, si deux couleurs similaires se côtoient, l'algorithme peut décider de remplacer
une couleur par l'autre pour simplifier le fichier.
L'image photographique 56
Guide Web Éducatif
L'icône graphique
L'icône graphique est un élément graphique qui symbolise une action. On utilise des icônes graphiques dans la
barre de navigation pour guider l'utilisateur à travers les différents outils accessibles. Les icônes doivent être
très représentatives de l'intention du concepteur. Par exemple, l'icône d'une maison est devenue un signifiant
de la page d'accueil pour les internautes. Les flèches gauches et droites sont aussi des icônes très
représentatives de leur fonction.
Avant d'employer une icône, il faut s'assurer qu'elle est significative et qu'elle ne risque pas d'offrir diverses
interprétations.
L'icône graphique 57
Guide Web Éducatif
La carte image
La carte image est très intéressante pour présenter un menu ou une carte du site. On peut utiliser n'importe
quelle image comme image qui peut être cliquée. Cette image est constituée de deux parties, l'image en tant
que telle et la carte des zones sensibles, auxquelles sont associés des liens. On peut créer ces zones à l'aide
d'outils de création de forme géométrique.
La carte image permet de maximiser les liens hypermédias.
Bannière graphique et dynamique
Recommandation
Il est important d'indiquer à l'utilisateur qu'il peut cliquer sur l'image. Pour ce faire, une mention telle que
« Cliquez sur l'image » ou un effet visuel significatif sera ajouté.
Carte image dynamique
La carte image 58
Guide Web Éducatif
L'image d'arrière−plan
Au lieu d'une couleur unie, il est possible de faire d'une image l'arrière−plan d'une page Web. Bien employée,
cette option relèvera l'esthétique du site. Deux choix s'offrent au concepteur : une seule grande image ou
d'une petite image reproduite maintes fois sous forme d'une mosaïque.
La taille de la grande image étant fixe, il sera difficile de contrôler l'apparence du site sur un écran d'une
résolution supérieure à celle prévue lors de la conception. Le comportement standard du HTML est de répéter
l'image jusqu'à ce que la page soit remplie. Pour modifier ce comportement, il faut spécifier dans la feuille de
style les propriétés fixed et no−repeat pour la balise utilisée.
La mosaïque de petites images nécessite un minimum de soin lors de sa conception. La petite image doit être
conçue afin d'être légère (de petite taille) et de ne pas créer de joint apparent lorsqu'elle est mise en mosaïque.
Autrement, ce joint devra être planifié afin qu'il soit élégant.
Le fond d'écran est donc un élément graphique à utiliser avec circonspection, puisqu'il est difficile de prévoir
la lisibilité du texte sur toutes les plates−formes et les navigateurs. Un minimum de tests s'avère nécessaire si
vous désirez l'employer. De plus, il crée une certaine lourdeur qui nuira à la performance de votre site.
Erreur courante
Une mosaïque dense et colorée peut camoufler la typographie, ce qui rend le contenu illisible.
Exemple d'une mauvaise utilisation d'un arrière−plan
L'image d'arrière−plan 59
Guide Web Éducatif
L'image animée
Une image animée est une collection d'images GIF assemblées une à la suite de l'autre au moyen d'un logiciel.
Une fois le téléchargement effectué, cette séquence d'images est affichée et peut être répétée en boucle
donnant ainsi un effet d'animation. Cette méthode d'animation est très économique en terme de bande
passante. De plus, le GIF animé constitue le type le plus simple d'animation puisqu'il ne nécessite aucun
plugiciel. En théorie, tout navigateur affichant des images en format GIF est capable d'afficher un GIF animé.
Certains navigateurs ne montreront que la première ou la dernière image de la séquence. Pour que ce type
d'image soit affiché correctement sur tous les navigateurs, prévoyez une image semblable pour la première et
la dernière image.
Exemple d'animation en format GIF
Voici la série d'images utilisées afin de créer l'animation de la page précédente.
Note : Les images animées de type animation (Shockwave, Flash et autres) sont traitées dans la section
animation.
L'image animée 60
Guide Web Éducatif
Outils de communication
Le réseau Internet offre un ensemble de services permettant aux humains d'interagir. Certains de ces services
sont en temps réel, d'autres sont différés. Voici les principaux outils de communication :
• Le courrier électronique
• Les listes de distribution
• Les forums de discussion (newsgroup)
• Les forums de clavardage (chat forum)
• La messagerie instantanée ICQ
• Le service de bavardage IRC
Tous ces services Web sont offerts sur le réseau gratuitement, mais il existe aussi des plates−formes de
diffusion de cours qui offrent ces services Web. Les plus connus sont WebCT, Learning Space et Blackboard.
La majorité de ces outils nécessite un certain investissement en temps d'apprentissage et possède des
exigences particulières au niveau du déploiement, notamment l'installation d'un logiciel particulier sur le
serveur. De plus, ces logiciels sont payants.
Les prochaines pages présentent ces services, leurs caractéristiques, leurs avantages et leurs inconvénients.
Consultez aussi ces deux excellents documents qui présentent des activités qui peuvent être réalisées avec les
outils de communication :
• Catégories et modèles d'application d'Internet

• Modes de communication et fonctions de travail collectif
Outils de communication 61
Guide Web Éducatif
Le courrier électronique
Le Web offre la possibilité de transmettre du courrier entre différents utilisateurs sous forme électronique.
Pour ce faire, les utilisateurs doivent posséder une adresse de courrier dont la forme est
destinataire@organisation.domaine (Exemple : Pierre@ulaval.ca). Connaissant cette
adresse, le serveur de messagerie se chargera d'acheminer le courrier électronique au bon destinataire.
Il existe deux formes d'accès au courrier électronique :
Logiciel de messagerie client

Cet accès nécessite l'utilisation d'un logiciel sur le poste client. Les logiciels les plus communs sont
Outlook (http://www.microsoft.com/office/outlook/default.asp) et Eudora (http://www.eudora.com/).
L'utilisateur doit configurer son poste en fonction des paramètres que lui stipule son fournisseur de
service Internet (Exemples : Sympatico (http://www.sympatico.ca/), Globetrotter
(http://www.globetrotter.net/).
Le courrier est téléchargé sur le poste et demeure accessible hors connexion.
Avantages
♦ Contrôle de l'accès au service de courrier

♦ Fiabilité
♦ Intègre des fonctionnalités avancées (Exemple : accès au forum de discussion)
Inconvénients
♦ Accessibilité limitée au poste configuré

♦ Sujet aux attaques de virus (par exemple : exploitation de failles dans Outlook)
♦ Coûts
Logiciel de messagerie Web
Pour utiliser cette forme de courrier électronique, il faut accéder à un service de messagerie grâce à un
navigateur. Les plus connus sont Hotmail (http://www.hotmail.com/) et Yahoo (http://mail.yahoo.ca/).
Bien que plusieurs soient gratuits, ces systèmes tendent à devenir payants.
Avantages
♦ Grande accessibilité
♦ La majorité de ces services sont gratuits
♦ Simplicité
Inconvénients
♦ Fiabilité incertaine
♦ Sujet au courrier indésirable (polluriel, spam)
♦ Commercial (beaucoup de publicités)
Donc, un professeur ne peut être certain que les étudiants qui utilisent ces services de courriel ont reçu
leur message.
Le corps du message est en format texte. Certains logiciels de messagerie permettent de formater le texte à
l'aide du HTML. Toutefois, cette option n'est pas supportée par tous les logiciels et il faut s'assurer que celui
utilisé par le destinataire le supporte sans quoi il devra déchiffrer le message au sein du code HTML.
Le courrier électronique 62
Guide Web Éducatif
À la missive électronique, vous pouvez ajouter une pièce jointe qui peut être de n'importe quel document
électronique (Image, vidéo, fichier Word par exemple). Toutefois, vous devez vous assurer que la pièce jointe
n'est pas infectée par un virus, le courrier électronique étant un agent propagateur très courant pour ce fléau.
À l'opposé du courrier traditionnel où l'enveloppe assure une certaine confidentialité, le courrier électronique
est ouvert et peut être intercepté par un utilisateur quelque peu astucieux. Si le contenu du courrier doit
demeurer confidentiel, l'encryption peut être envisagée.
Il est possible d'intégrer l'envoi d'un courriel au sein d'une page HTML par une instruction de la forme <A
HREF="mailto :destinataire@organisation.domaine">nom du destinataire</A>.
Le nom du destinataire sera souligné. Le logiciel de messagerie client sera appelé lorsque l'utilisateur cliquera
sur ce lien.
Le courrier électronique 63
Guide Web Éducatif
Les listes de distribution

La gestion du courrier à la pièce s'avère fastidieuse lorsqu'il s'agit d'échanger de l'information au sein d'un
groupe, comme une classe d'étudiants. Quelques outils peuvent vous aider dans cette tâche.
Le premier outil est la liste d'envoi qui consiste en une simple liste d'adresses regroupées sous un nom
(Exemple : geographie_groupeB). Ceci permet d'envoyer le message à l'ensemble du groupe simplement.
Cette fonctionnalité est gérée par le logiciel de messagerie.
Le second outil, la liste de distribution, permet au groupe de communiquer par le courrier électronique. Un
logiciel est utilisé pour gérer cet échange. Les plus courants sont ListServ et Majordomo. L'échange s'effectue
grâce à une seule adresse, le logiciel se chargeant d'envoyer le message à tous les membres de la liste de
distribution. Les gens peuvent donc échanger entre eux et tout le groupe reçoit une copie de ces échanges.
Chaque personne a le loisir de s'abonner ou se désabonner à la liste de distribution.
À l'Université Laval, le SIT offre la possibilité, à tout membre de la communauté universitaire qui le désire,
de mettre en place une liste de distribution. La gestion du logiciel est assurée par le SIT. Le propriétaire de la
liste peut toutefois modifier les paramètres. Consulter à ce sujet http://listes.ulaval.ca/.
Les listes de distribution 64

Guide Web Éducatif
Les forums de discussion

Le second outil de communication le plus populaire sur Internet, après le courrier électronique, est les forums
de discussion. Un forum de discussion peut s'apparenter à un babillard : une personne inscrit un article au
sein d'un forum, les autres internautes peuvent lire et ajouter un commentaire à cet article ou créer un nouvel
article.
L'origine des forums de discussion remonte à 1979, ce qui fait d'eux un des plus vieux services d'Internet. Ils
reposent sur un réseau d'échange d'informations du nom de USENET. Le principe est simple : un serveur de
nouvelles conserve les articles qui lui sont envoyés, classés par forum (newsgroup), et les échange avec les
autres serveurs de nouvelles. Ainsi, l'article est propagé à la grandeur du globe. Vous devez connaître l'adresse
d'un serveur de nouvelles pour pouvoir accéder aux forums de discussion. L'Université Laval possède un
serveur de nouvelles qui porte le nom news.ulaval.ca.
Un bon serveur de nouvelles offrira une grande variété de sujets, tiendra ses nouvelles à jour et conservera les
nouvelles suffisamment longtemps. En effet, le volume des forums peut devenir considérable et
l'administrateur du serveur doit fixer une période au−delà de laquelle les nouvelles sont détruites.
Deux méthodes pour accéder aux forums de discussion sont disponibles :
Logiciel de lecture des nouvelles (newsreader) :

Cette méthode est plus robuste et permet un contrôle plus raffiné, mais est plus complexe. Elle est
recommandée lors d'une utilisation fréquente des forums de discussion.
Serveur de nouvelles offrant une interface Web :

Cette méthode est plus flexible et plus simple d'approche, mais offre un contrôle moins précis à
l'utilisateur.
En raison de sa nature publique, les forums de discussion renferment un peu n'importe quoi. Un code de
bonne conduite est suggéré (nétiquette). Il prévoit, en autre, s'identifier par une adresse de courriel valide
lorsque nous participons à un forum de discussion. Les forums de discussion sont aussi une cible privilégiée
pour les virus et le courrier indésirable (spam). Enfin, il est possible de joindre du contenu binaire (Image,
musique, etc.) à un article de nouvelles.
Les forums de discussion sont regroupés par thématique. Le nom d'un forum de discussion prend la forme
d'une série de courts mots ou d'abréviations séparés par des points (Exemple :
fr.comp.graphisme.multimedia). Quelques préfixes standards ont été définis afin de regrouper les
forums de même affinité.
Principaux préfixes
Préfixe Description
alt pêle−mêle (alternatif)
bionet Biologie
biz Affaires
comp Informatique
Les forums de discussion 65

Guide Web Éducatif
fr Contenu en français
misc Sujets divers
news Au sujet de Usenet
rec Passe−temps
sci Sciences et technologies
soc Société
talk Débats
Certains forums de discussion sont privés ; ils nécessitent des frais d'adhésion ou sont réservés aux membres
d'une organisation. Dans le cadre d'un site Web éducatif, il est possible d'intégrer un forum de discussion qui
sera limité au site et à ses utilisateurs. Les prochaines pages expliqueront plus en détail cette application des
forums de discussion.
L'ajout d'un forum de discussion au sein d'un site Web éducatif permet au professeur d'échanger avec le
groupe de façon asynchrone, tout en conservant un suivit de ces échanges. Pour ce faire, un logiciel de gestion
du forum doit être installé sur le serveur qui héberge le site. Plusieurs solutions logicielles s'offrent à nous. Le
choix s'effectuera en fonction des besoins, des budgets disponibles et de la plate−forme utilisée (Unix,
Windows, Mac OS).
Pour de plus amples renseignements, consultez le site http://www.thinkofit.com/webconf/forumsoft.htm.
Voici quelques solutions disponibles :
Bazaar
◊ Développé en Perl par l'Université d'Athabasca, ce logiciel gratuit permet une administration
précise et de personnaliser l'environnement. Distribué selon la licence GPL1, il nécessite Perl
et la base de données MySQL.
◊ Plate−forme : Linux
◊ Prix : 0 $
◊ Site Web : http://bazaar.nl.linux.org/index.html
Discus
◊ Disponible en deux versions, gratuite et professionnelle, Discus est utilisé par de nombreux
sites. Il offre de nombreuses fonctionnalités et un bon service.
◊ Plate−forme : Unix, Windows 95/98/ME/NT/2000
◊ Prix : Pro : 149 $ US
◊ Site Web : http://www.discusware.com/discus/index.php
phpBB
◊ Exploitant la richesse du langage PHP, ce logiciel supporte les gestionnaires de bases de
données MySQL, PostgreSQL, Microsoft SQL Server et Microsoft Access. De plus, il se
souci de la sécurité, permet de personnaliser l'apparence du forum et facilite l'administration.
Licence GPL.
◊ Plate−forme : Linux, Mac, Windows (avec PHP)
◊ Prix : 0 $
◊ Site Web : http://www.phpbb.com/
Slash
◊ Slash est l'assise de Slashdot (http://www.slashdot.org/) et de nombreux autres sites. La
présentation très visuelle le rend populaire. Plusieurs logiciels sont inspirés de Slash, qui

Guide Web Éducatif
demeure la référence. Distribution selon les règles de la licence GPL.

◊ Plate−forme : Linux, Mac, Windows (avec Perl, Apache, MySQL)
◊ Prix : 0 $
◊ Site Web : http://slashcode.com/
UBB
◊ Logiciel commercial de qualité, Universal Bulletin Board se décline en différentes versions
plus ou moins complexes, selon les besoins à combler et le budget disponible. Il permet le
contrôle des utilisateurs, la modération, la gestion de profils, etc.
◊ Plate−forme : Windows NT/2000, Unix, Linux
◊ Prix : à partir de 200 $ US
◊ Site Web : http://www.infopop.com/
WebBoard
◊ Outil professionnel, WebBoard inclut de nombreuses fonctionnalités dont l'intégration aisée à
WebCT et la disponibilité d'un forum de clavardage.
◊ Plate−forme : Windows NT/2000/XP, Unix, Linux
◊ Prix : à partir de 799 $ US
◊ Site Web : http://webboard.com/products/webboard/index.cfm
1
General Public License

Guide Web Éducatif
Les forums de clavardage

Les forums de discussion sont intéressants, mais ne permettent pas d'interagir en temps réel avec d'autres
interlocuteurs. Les forums de clavardage viennent pallier cette faiblesse. Mieux connu sous leur appellation
anglaise « chat », le clavardage s'effectue dans un lieu virtuel sur Internet où des personnes peuvent discuter
par l'entremise de leur clavier. La formule familière et impersonnelle employée dans ces forums entraîne un
langage argotique où les abréviations pullulent (Exemples : A+ pour à plus tard, LOL pour « Laugh Out
Loud ») et où les échanges peuvent être virulents.
Le principe de communication repose sur la création d'un canal au sein duquel des personnes s'inscrivent et
échangent entre elles. De nombreuses interfaces sont disponibles, du simple texte à l'emploi d'un avatar,
image personnifiant un individu dans le cyberespace. Afin de clavarder, un logiciel et un serveur de
clavardage sont nécessaires.
La première formule est le IRC. Utilisant son propre protocole, elle nécessite l'emploi d'un logiciel comme
mIRC (http://www.mirc.com/) pour Windows ou Ircle (http://www.ircle.com/) pour MacIntosh. Voir
également le site http://www.irchelp.org/ qui offre toute l'information nécessaire pour comprendre et utiliser
l'IRC.
D'autres formules emploient une interface Web, comme Web Chat (http://www.webchat.org/), ce qui
simplifie l'utilisation et offre une plus grande souplesse.
Ce type d'outil est utilisé dans le cadre d'une activité de remue−méninges ou de réunion de planification et de
distribution de tâches dans une équipe, par exemple.
Le principal désavantage pédagogique de cet outil est sa non−fiabilité. Vos étudiants et vous−mêmes devez
vous brancher sur un serveur IRC que vous ne contrôlez pas. Il arrive que la communication se brise ou soit
interrompue ou même qu'un réseau se sépare et que plusieurs utilisateurs sur le même réseau ne peuvent se
connecter. Il est bon aussi de noter qu'un maximum de dix personnes devraient être présentes dans une même
salle de discussion afin de pouvoir avoir une conversation active intelligible.
Il faudra être également prudent lorsque l'on fait des échanges de fichiers avec des inconnus sur l'IRC, car il
est fréquent de voir ces fichiers contaminés par des chevaux de Troie ou des virus.
Les forums de clavardage 68

Guide Web Éducatif
La messagerie instantanée ICQ

ICQ, littéralement « I Seek You » (Je vous cherche), agit un peu comme un téléavertisseur : il signal notre
présence en ligne aux autres personnes.
ICQ facilite donc la prise de contact avec d'autres internautes. Il nécessite l'emploi d'un logiciel particulier.
Chaque utilisateur doit s'enregistrer auprès d'un serveur et obtiendra un numéro d'identification unique. Puis, il
suffira de créer une liste d'amis ou collègues. Lorsque vous vous connecterez au réseau Internet, les personnes
figurant sur votre liste seront automatiquement averties. Elles pourront donc prendre contact avec vous à l'aide
d'un des supports offerts par ICQ : messagerie, PC à PC, téléphone, échange de fichiers, etc.
Vous trouverez plus d'informations et le logiciel nécessaire, disponible pour plusieurs plates−formes, à
l'adresse http://web.icq.com/.
La messagerie instantanée ICQ 69

Guide Web Éducatif
La messagerie instantanée ICQ 70

Production
Lorsque la conception du site sur papier est terminée, il est temps de passer à la phase de production.
Il existe une multitude de solutions au niveau de l'implantation d'un site Web. Le choix s'effectue en fonction
des besoins à combler et des ressources disponibles.
Cette section du guide vous présente les technologies déployées sur le Web, leur fonctionnement et leur
utilité.
Le réseau Internet se destine à être modulaire, chacun de ses aspects étant traité par un module particulier. Il
n'y a pas de solution qui permet de combler tous les besoins. La solution réside plutôt dans un amalgame de
technologies, chacune s'appliquant à une tâche particulière. Pour un volet de l'implantation, il existe quelques
solutions technologiques qui seront comparées en fonction des besoins, des acquis et de l'infrastructure.
Ces technologies peuvent être regroupées selon quatre vecteurs :
• L'encodage
• Le multimédia
• L'interactivité du côté client
• L'interactivité du côté serveur
Production 71
Guide Web Éducatif
Encodage
Vous avez de l'information à transmettre sur le Web. Bien, mais comment réussir à partager cette information
à la multitude d'ordinateurs qui composent le réseau Internet ? Vous avez probablement déjà eu des
problèmes à partager un document entre un PC et un Macintosh. Le formatage n'était pas respecté, la police de
caractères introuvables, ce à condition de pouvoir simplement ouvrir le document. Imaginez maintenant que
vous ignoriez qui obtiendra votre document et comment il l'utilisera. C'est un peu la problématique du Web.
Pour réussir à partager l'information et assurer son universalité, le réseau Internet repose sur un ensemble de
protocoles. Ces protocoles permettent de transférer l'information d'un ordinateur à un autre. L'information doit
toutefois être enrobée afin que l'ordinateur qui la reçoit puisse la décoder.
Sur le Web, cet enrobage se nomme encodage. L'encodage le plus fréquent est le HTML. Il est en fait la base
du Web. Il existe également d'autres formats d'encodage qui ont été développés afin de pallier les lacunes du
HTML ou de répondre à de nouveaux besoins.
L'encodage n'est toutefois pas un langage de programmation au sens strict. Il ne fait que codifier l'information
afin qu'elle soit déchiffrable. Il ne permet pas d'interactivité autre que celle d'offrir l'information. L'encodage
peut ressembler à saisir un texte dans un traitement de texte. Une fois sauvegardé, le document contiendra en
plus de votre texte, des codes pour régénérer votre mise en page : titre en gras, image au coin supérieur droit,
etc. Le HTML, et ses cousins le XHTML, le XML, le WML, remplit la même fonction. Sauf qu'au lieu d'être
un format propriétaire comme un fichier .doc de Word, il s'agit d'un format ouvert, accessible à tous.
Recommandation
Peu importe le procédé d'encodage employé, il est nécessaire de respecter les règles édictées par les groupes
qui définissent ces procédés afin de produire un encodage universel.
De nombreuses ressources sont disponibles sur Internet à ce sujet. La principale ressource est le World Wide
Web Consortium (http://www.w3.org/), le groupe qui a défini le Web et auquel les compagnies de logiciels se
réfèrent lorsqu'elles développent pour le Web.
Encodage 72
Guide Web Éducatif
HTML
L'HyperText Markup Language, ou HTML, est un format développé à l'origine pour la documentation. Son
point fort était de pouvoir lier deux documents par un lien, d'où le nom d'hypertexte. La NCSA eue la brillante
idée de développer un programme graphique qui permettait de parcourir ces documents. Ce programme, du
nom de Mosaique, rendit accessible Internet à tous et fut le père des navigateurs modernes.
Le nombre d'utilisateurs du format HTML ayant augmenté, des besoins nouveaux se firent sentir. Le HTML
se développa pour atteindre la version 4.01. Tandis que la première version s'avérait très sommaire, il est
maintenant possible d'intégrer à un texte régulier :
• Une typographie (gras, italique, police de caractères, etc)

• Des liens
• Des couleurs
• Des images
• Des sons
• Des animations
• Des scripts
Pour ce faire, le HTML emploie un système de balises. Une balise est une étiquette, un mot−clé encadré des
signes < et >. Dans la majorité des cas, une balise fermante désigne la fin du formatage. Le mot−clé de la
balise fermante est précédé du caractère /.
Exemple :
Supposons que le texte suivant compose le document :
Mon premier essai en HTML.
Pour que ce texte soit affiché en gras, il suffit d'ajouter la balise <strong> :
<strong>Mon premier essai en HTML.</strong>
Ce qui donne pour résultat :
Mon premier essai en HTML.
Un document HTML possède une struture de base composée d'une entête et du corps du document. Voici
cette structure de base :
<html>
<head>
<title>Titre du document</title>
</head>
<body>
Texte du document
</body>
</html>
HTML 73
Guide Web Éducatif
Le HTML est un encodage très simple et accessible. Il suffit de lire un peu de documentation pour connaître
l'utilisation des différentes balises et un éditeur de texte pour produire un document HTML. Il possède
généralement pour extension .htm ou .html. Il existe une multitude d'éditeurs spécialisés dans la
production de documents HTML. Pour choisir un éditeur HTML, référez−vous à notre grille d'évaluation des
logiciels d'édition HTML disponible à l'adresse : http://www.aptic.ulaval.ca/grille/.
Vous trouverez de plus amples renseignements sur le HTML à l'adresse suivante :

http://www.w3.org/MarkUp/.
Saviez−vous que ?
De par sa nature ouverte et son universalité, le HTML laisse une grande part du travail au programme de
décodage, le plus souvent un navigateur comme Internet Explorer ou Netscape Navigator. Chaque programme
peut présenter le document de façon différente.
De plus, pour répondre à cette universalité, le HTML n'est pas strict. Donc, il est difficile d'imposer un
positionnement absolu aux éléments composants la page. Ils seront disposés de façon relative, en fonction de
l'espace disponible.
HTML 74
Guide Web Éducatif
XHTML
Vous venez de découvrir le HTML ? Vous êtes enthousiasmé par ses possibilités et sa simplicité. Mauvaise
nouvelle : le HTML est appelé à disparaître. Rassurez−vous, ce n'est pas pour demain, mais il a été
condamné par le W3C, l'organisme qui le régit.
En effet, le manque de rigueur de la syntaxe du HTML et la difficulté de faire évoluer ce langage ont
provoqué l'élaboration d'un nouveau langage d'encodage, le XML. Puisque le bassin d'utilisateurs du HTML
est considérable, le W3C a élaboré une solution intermédiaire sous la forme du XHTML.
En fait, il s'agit ni plus ni moins du standard HTML 4.01 codé en XML. Ce qui implique une syntaxe plus
rigide et quelques indications supplémentaires dans son entête. Voici les principales différences :
Structure du document
La structure du document inclut les indications relatives au XML. Voici un exemple de cette structure :
<?xml version="1.0" encoding="UTF−8"?>

<!DOCTYPE [...]>
<html xmlns="http://www.w3.org/1999/xhtml" [...]>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Texte du document</p>
</body>
</html>
Sensible à la casse
Contrairement au HTML, le XHTML fait une différence entre les majuscules et les minuscules. Ainsi,
<html> et <HTML> sont deux balises différentes.
Balise fermante obligatoire
Tandis que la majorité des navigateurs vont tolérer qu'une balise fermante soit absente, le XHTML requiert
toutes les balises fermantes. Même les balises simples, tel que <br> nécessite l'ajout du caractère / afin de
signifie la fin de la balise : <br />.
Valeurs des attributs entre guillemets
Les guillemets entourant une valeur étaient nécessaires uniquement si cette valeur comportait un caractère
spécial comme l'espace. En XHTML, les guillemets sont toujours de mises.
Interdiction des balises qui se chevauchent
Une erreur courante en HTML est de ne pas fermer la dernière balise ouverte en premier. Le XHTML requiert
XHTML 75
Guide Web Éducatif
que les balises soient fermées dans leur ordre d'ouverture. Exemple :
Correct : <strong><i>Test</i></strong>
Incorrect : <strong><i>Test</strong></i>
Vous trouverez de plus amples renseignements sur le XHTML à l'adresse suivante :

http://www.w3.org/MarkUp/.
Saviez vous que ?
Il est possible de convertir simplement le code HTML en code XHTML grâce à un outil tel Web Tidy
(http://www.w3.org/People/Raggett/tidy/). Ce dernier se chargera en plus de corriger les erreurs (Exemple :
balise fermante manquante) et de formater le code tel que préconisé par le standard.
XHTML 76
Guide Web Éducatif
Cascading Style Sheets

La mise en forme du document au sein du HTML, peut rapidement devenir un capharnaüm, le formatage
prenant plus de place que le contenu. De plus, la mise à jour du style et l'application d'une présentation
uniforme sont difficiles. Le W3C a développé les Cascading Style Sheets, ou CSS, afin de pallier cette
situation.
La règle d'or est de séparer le contenu de sa mise en forme. Tous les éléments de style (couleur, police de
caractères, alignement, etc.) devraient figurer dans une feuille de style. Les éléments du contenu sont par la
suite liés au style par un identifiant, une classe ou simplement la balise employée.
Exemple :
<html>
<head>
<style>
h1 {
font−family : Zapf−Chancery, cursive;
font−size : 20pt;
color : blue;
}
</style>
</head>
<body>
<h1>Titre formaté avec style</h1>
</body>
</html>
Donne pour résultat :
Titre formaté avec style
Vous trouverez de plus amples renseignements sur les feuilles de style en cascade à l'adresse suivante :
http://www.w3.org/Style/CSS/.
Recommandation
Seules les dernières versions des navigateurs supportent correctement les CSS. Le support des versions
antérieures est passable. Il est donc essentiel de tester correctement sa feuille de style sur plusieurs versions et
de s'assurer que le contenu du document sera lisible même si la feuille de style n'est pas supportée.
Saviez−vous que ?
Il existe plusieurs niveaux de CSS. Le niveau 1 est le plus courant, tandis que le niveau 2 commence à être
supporté et le niveau 3 est en cours d'élaboration. Chaque niveau apporte de nouvelles fonctionnalités.
Les feuilles de style sont supportées par le HTML 4.x, le XHTML et le XML.
Cascading Style Sheets 77

Guide Web Éducatif
XML
L'explosion du HTML a pris par surprise son créateur. Devant l'enthousiasme et la rapidité de sa diffusion, il
fut rapidement difficile de contrôler sa destinée. Chaque gros joueur du monde du logiciel avait sa vision du
développement du Web et tentait de s'imposer. De plus, de nouveaux besoins se faisaient pressants,
notamment pour un format standard d'échange de données. Ces nouveaux besoins et les limites du HTML
rendaient difficile son expansion.
Devant ce constat, le World Wide Web Consortium, l'instigateur du HTML, décida de développer un nouveau
standard. Après quelques hésitations, ce standard prit son envol et fut rapidement adopté par les plus gros
joueurs du logiciel. Son ouverture et sa versatilité le rendaient populaire. Le XML était né.
Mais qu'est−ce que le XML?
Le XML est un langage de balisage pour structurer l'information d'un document. Il ne se destine pas
uniquement au Web, loin de là. Toute information peut être structurée en XML. De nombreux outils existent
déjà pour manipuler ce format. Et le W3C ne cesse d'ajouter des fonctionnalités à son standard.
Le XML ressemble−t−il au HTML?
Oui et non. Le HTML est rigide et souple d'une certaine façon. La balise <h1> s'écrit toujours ainsi en
HTML. Il n'est pas possible d'ajouter la balise <h7> si le W3C ne modifie pas son standard et qu'aucun
navigateur le supporte. Le HTML définit donc une grammaire et un vocabulaire. Le vocabulaire du HTML est
limité et sa grammaire peu efficace.
Le XML quant à lui est un méta−langage. Il offre des règles strictes pour définir un langage. Il est donc
possible de créer des balises et d'établir les liens entre ces balises. Si l'on compare ces langages avec ceux de
l'être humain, le HTML serait une langue comme le français et le XML un standard pour communiquer,
disons les possibilités vocales du corps humain.
À quoi ressemble le XML?
Il est difficile de donner une réponse absolue, car il peut être utilisé de bien des façons. Vous trouverez malgré
tout un entête identifiant le type de document et un ensemble de balises qui encadrent les données. Voici un
exemple très simple.
<?xml version="1.0"?>
<exemplexml>
<titre><question>À quoi ressemble le XML?</question></titre>
<reponse>À ceci.</reponse>
</exemplexml>
Vous trouverez de plus amples renseignements sur le XML aux adresses suivantes :
http://www.w3.org/XML/ et http://www.xml.com/.
XML 78
Guide Web Éducatif
Recommandation
Le XML est un langage encore jeune. Il est peu supporté par les navigateurs Web. Il n'est conseillé que pour
combler un besoin spécifique, en ne perdant pas de vue que les utilisateurs de versions antérieures de
navigateurs ne pourront pas consulter votre site ou devront se procurer un logiciel pour pouvoir manipuler les
fichiers que vous produirez en XML.
XML 79
Guide Web Éducatif
WML
L'un des nouveaux besoins du Web est le support d'appareils autre que les ordinateurs conventionnels. En fait,
il existe maintenant une multitude d'appareils capables de se connecter au réseau tels le téléphone cellulaire,
l'ordinateur de poche ou l'assistant numérique (PDA). Bien que les progrès techniques soient spectaculaires,
ces appareils n'ont pas les capacités d'un ordinateur personnel, notamment au niveau du graphisme. Une
solution plus adaptée à leur contexte s'avérait nécessaire. Le WML est l'une de ces solutions.
Le WML, ou Wireless Markup Language, repose sur le protocole WAP (Wireless Application Protocol). Ce
dernier se destine particulièrement au domaine de la technologie sans fil. Le WML exploite donc le WAP afin
de créer des pages Web accessibles par ces appareils. Le WML est en fait un langage défini grâce au XML. Il
utilise le principe de fiches (cards) pour organiser l'information. Bien que plusieurs éléments du HTML sont
répétés en WML, ce dernier possède ses propres fonctionnalités. Voici un exemple très simple de ce à quoi
peut ressembler une page en WML :
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "//WAPFORUM//DTD WML1.1//EN" "http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<card>
<p>Exemple en langage WML.</p>
</card>
</wml>
Vous trouverez de plus amples renseignements sur le WML à l'adresse suivante :

http://www.wapforum.org/what/technical.htm.
Recommandation
Le WML répond à un besoin très particulier. Bien qu'adopteé par les principales compagnies du domaine des
communications, regroupées sous le nom d'Open Mobile Alliance Ltd, il ne s'agit pas d'un standard aussi
universel que le HTML. Il est donc à utiliser que s'il s'avère nécessaire et supporté par ses destinataires.
Saviez−vous que ?
Il existe des outils pour convertir le HTML en WML et ainsi permettre de récupérer ce que vous avez déjà
produit. L'un de ces outils est disponible à l'adresse suivante : http://html2wml.sourceforge.net/.
WML 80
Guide Web Éducatif
Multimédia
L'intérêt du support informatique par rapport au support papier réside certainement à l'apport multimédia qu'il
permet. Du son, du vidéo, de l'animation peuvent être ajoutés au texte afin de faciliter la compréhension et
illustrer un concept ou une idée.
Cette section du guide vous fournira moult détails qui vous permettront d'intégrer efficacement du contenu
multimédia à votre site Web éducatif.
Recommandation
Il faut savoir doser la quantité de matériel multimédia ajoutée à votre site Web. Le facteur déterminant sera
vos destinataires : s'il s'agit d'un cours offert à distance où la majorité des utilisateurs accède à Internet par
modem, mieux vaut limiter la taille et le nombre des sons, images, vidéos et animations ou mettre l'ensemble
du site Web, incluant le matériel multimédia, sur un CD−ROM.
Multimédia 81
Guide Web Éducatif
Le son
Le son tel que perçu par l'humain repose sur le décodage qu'effectue le cerveau à partir des ondes sonores qui
voyagent dans l'air et qui sont captées par les oreilles. Pour produire un son, l'ordinateur doit simuler une onde
sonore à partir d'un signal électrique qu'il transmet à un haut−parleur. Trois paramètres principaux altèrent la
perception de l'onde :
La fréquence
La fréquence est la quantité de crêtes ou de creux en une seconde. Elle se mesure en hertz (Hz). Plus
la fréquence est élevée, plus le son sera haut. Par exemple, le La du diapason résonne à 440 Hz.
La longueur
La longueur est la distance entre deux crêtes ou deux creux. Cette distance est constante dans un
milieu donné. Par exemple, la vitesse du son dans l'air sec à 0 °C est de 1 200 Km/h, peu importe sa
fréquence et son amplitude.
L'amplitude
L'amplitude est la hauteur d'une crête ou d'un creux. Plus elle sera élevée, plus le son sera fort.
L'ajout d'un fichier son à une page Web peut remplir différentes fonctions :
• Ajouter un commentaire
• Joindre un effet sonore à un document
• Partager un extrait d'un CD, d'un vidéo ou d'une autre source
• Émettre comme une station radio de type Web
• Ou, tout simplement, personnaliser le site
Pour rendre disponible un fichier audio au sein d'une page HTML, il suffit d'ajouter la balise suivante :
<a href="son.ext"> où le fichier son.ext est le nom de votre fichier audio.
Recommandation
Il est possible de faire jouer un fichier audio en arrière−plan lorsqu'une page HTML est chargée dans un
navigateur, mais cette méthode n'est pas conseillée, car elle n'est pas standardisée et peut ennuyer l'internaute.
Il existe une multitude de formats audio sur le réseau Internet. Ils sont expliqués dans les pages suivantes. Le
défi est toujours de produire le maximum de qualité en consommant le minimum de mémoire. La compression
vient donc jouer un rôle majeur dans ces formats. Peu importe le type de fichiers employés, quatre concepts
caractérisent les fichiers audio numériques.
Le taux d'échantillonnage
La synthèse informatique d'un son s'avère complexe. Chaque onde doit être reproduite fidèlement, ce
qui représente beaucoup d'information à conserver. Pour réussir cette synthèse, la majorité des normes
sonores utilisent un procédé basé sur un échantillonnage fréquent des ondes sonores. Plus la fréquence
de ces échantillonnages est élevée et meilleure est la qualité du son. Voici quelques fréquences
d'échantillonnages fréquemment employées.
11 kHz
Faible qualité, celle du téléphone.
Le son 82
Guide Web Éducatif
22 kHz
Qualité moyenne.
44 kHz
Bonne qualité, celle de la radio FM.
Le nombre de bits
Comme l'image, un nombre différent de bits peut être employé afin de conserver le son digital. Encore une
fois, plus ce nombre sera élevé, meilleure sera la qualité. Les formats les plus courants sont le 8 bits et le 16
bits.
Le nombre de canaux
Afin de produire une sonorité différente dans chaque haut−parleur, un canal sera conservé pour ceux−ci. La
monophonie n'a qu'un seul canal tandis que la stéréophonie en possède deux et les modes de mise en relief
(surround) peuvent en compter six. Pour chaque canal ajouté, la taille du fichier sera augmentée d'autant.
Le niveau de compression
Le son numérique peut être compressé afin de réduire l'espace mémoire requis pour le conserver. Différents
algorithmes sont employés avec un taux de compression plus ou moins élevé et une qualité plus ou moins
bonne. La compression/décompression d'un fichier audio peut nécessiter l'installation d'un programme,
nommée CODEC, en plus du logiciel d'écoute du fichier audio.
Les principaux formats pour diffuser des capsules de son sur le Web sont :
• AIFF
• µ−LAW
• Liquid Audio
• MPEG (incluant le MP3)
• MIDI
• RealAudio
• Wave
• Windows Media Audio
• OGG
La production d'un document audio électronique de qualité nécessite des compétences spécifiques, d'où le
recours à une personne qualifiée si cet aspect est primordial.
Afin de pouvoir écouter un format particulier, le logiciel opportun doit être utilisé. Le fichier peut être
téléchargé sur le poste de l'utilisateur puis ouvert par l'application comme n'importe quel autre document. Il
faut toutefois que l'ordinateur client possède le matériel nécessaire à l'écoute de fichier audio (carte de son,
haut−parleur ou écouteurs) ainsi que le logiciel/plugiciel approprié au format employé.
Une autre technique, utilisée également pour protéger les droits d'auteur, est la lecture en flux (en transit ou
«streaming») : au lieu d'être téléchargé entièrement sur le poste client avant de pouvoir être lu, le fichier
sonore est lu au fur et à mesure qu'il est reçu du réseau grâce à un décodeur particulier.
Le son 83
Guide Web Éducatif
AIFF
L'« Audio Interchange File Format », ou AIFF, est un format développé pour le Macintosh. Il supporte
jusqu'à six canaux, un échantillonnage varié, mais couramment 8 kHz et 11 kHz et un nombre de bits de 8,
16 ou 32. Son extension est .aif ou .aiff. Il est supporté par le lecteur QuickTime d'Apple
(http://www.apple.com/quicktime/).
Avantages
• Qualité sonore
Inconvénients
• Pas de compression (version standard)

• Destiné au Mac
• Peu exploitable sur le Web
Pour de plus amples renseignements, consulter les documents :

http://www.apple.com/macosx/technologies/audio.html,
http://developer.apple.com/techpubs/quicktime/qtdevdocs/PDF/MacOS_Sound.pdf .
AIFF 84
Guide Web Éducatif
µ−LAW
Le format µ−LAW (prononcez mu−law) est le format standard d'Unix. Il est également employé en téléphonie
en Amérique (son cousin, le a−Law est employé en Europe). Supportant la monophonie et la stéréophonie, ce
format permet des échantillonnages de 8.013, 22.05 et 44.1 kHz. Son extension est .au.
Avantages
• Niveau de compression avantageux

• Supporté par les applications Java
Inconvénients
• N'offre pas la meilleure qualité

• Destiné à Unix
µ−LAW 85
Guide Web Éducatif
Liquid Audio
Le format Liquid Audio a été développé afin de diffuser de la musique de qualité CD sur le Web. Il est entre
autres utilisé par certaines compagnies de disques qui vendent de plus en plus de musique en format
électronique. Un des principaux concurrents au format MP3. Diffusion en transit (streaming).
Avantages
• Bon rapport qualité/compression
Inconvénients
• Format propriétaire
• Diffusion limitée
Pour de plus amples renseignements, consultez le site suivant :

http://www.liquidaudio.com/.
Vous y trouverez le lecteur Liquid Player nécessaire à l'écoute de ce format musique ainsi que des exemples à
écouter.
Liquid Audio 86
Guide Web Éducatif
MPEG
En fait, le MPEG désigne une multitude de standards établit par le Moving Picture Experts Group. Trois
formats sont supportés : vidéo, audio et en transit (streaming). Quatre versions, qui varient notamment par le
niveau de compression sont disponible : layer−I, layer−II, layer−III et layer−IV. Ce dernier, mieux connu
sous le nom de MP3, fit la manchette bien des fois dû à son immense popularité quand vint le temps de pirater
de la musique. Son extension est .mpa (audio), .mp2, .mp3, .mpg (film) ou .mpeg (film).
Avantages
• Très bon rapport qualité/compression

• Flexible
• De nombreux outils disponibles pour manipuler ce format
• Diffusion aisée
Inconvénients
• Les multiples paramètres qui rendent ce format complexe.

http://mpeg.telecomitalialab.com/.
De multiples lecteurs supportent ce format dont :
• Winamp ( http://www.winamp.com/) [Windows];

• QuickTime (http://www.apple.com/quicktime/products/) [Mac/Windows];
La création de fichier MP3 est aisée par la multitude d'outils disponibles dont :
• MusicMatch ( http://www.musicmatch.com/) [Windows/Mac];

• iTunes (http://www.apple.com/itunes/) [Mac];
Saviez−vous que ?
Les oeuvres audio sont protégées par des droits d'auteur. Le fait de transformer une oeuvre audio en un
document électronique et de le diffuser sans avoir l'assentiment de son créateur constitue un crime.
MPEG 87
Guide Web Éducatif
MIDI
Le format MIDI a été développé avant tout pour permettre la communication entre les instruments
électroniques. Donc, ce format diffère des autres formats, dans la mesure où il contient les instructions pour
produire chaque note d'un instrument. Il est au son ce qu'est le dessin vectoriel à l'image. Son extension est
.mid.
Avantages
• Standard du monde la musique

• Fichier de petite taille
Inconvénients
• Ne sert qu'à reproduire des partitions de musique
Pour de plus amples renseignements, consultez les sites :

http://www.midi.org/ et http://www.midi.com/.
La qualité de la musique décodée du fichier midi dépend de la carte de son employée. En effet, celle−ci
renferme une table de synthèse des différents instruments, celle−ci sera plus ou moins fidèle au son de
l'instrument original.
La majorité des navigateurs supporte le format midi sans l'ajout d'un lecteur particulier.
MIDI 88
Guide Web Éducatif
RealAudio
Ce format propriétaire a établi sa renommée par la diffusion en transit (streaming) de contenu multimédia sur
le Web. À l'aide du lecteur RealPlayer, dont la version de base est disponible gratuitement, il est possible
d'écouter des extraits de CDs et de films.
Avantages
• Protection minimale des droits d'auteurs
Inconvénients
• Nécessite l'achat d'un logiciel pour la création de contenu

http://www.real.com/.
RealAudio 89
Guide Web Éducatif
Wave
Ce format développé par Microsoft pour sa plate−forme Windows offre des performances similaires à celle du
AIFF. Windows inclut par défaut des outils pour lire et créer des fichiers de ce format. Son extension est
.wav.
Avantage
• Accessibilité
Inconvénients
• Taille des fichiers importante (pas de compression)

• Destiné avant tout à Windows
Wave 90
Guide Web Éducatif
Windows Media Audio
Devant la désuétude de son format Wave, Microsoft a développé une solution moderne afin de concurrencer
les autres formats en vogue (Real, QuickTime, MPEG, etc.). Windows XP inclut les outils permettant de créer
et lire ce nouveau format.
Avantages
• Nombreuses fonctionnalités
• Popularité de Microsoft/Windows
Inconvénients
• Solution propriétaire
• Destiné à Windows

http://www.microsoft.com/windows/windowsmedia/default.asp.
Windows Media Audio 91

Guide Web Éducatif
Ogg Vorbis
Le monde du logiciel libre a également un format comparable au MP3 sous le nom de Ogg Vorbis. Ce format
offre des caractéristiques similaires au MP3 tant au niveau de la qualité que de la compréhension. Toutefois,
contrairement au MP3, il n'a recours à aucun matériel sous copyright. Il s'agit donc d'un véritable format libre
et gratuit.
Avantages
• Gratuit
• Multi−plateforme
• Supporté par de multiples lecteurs, dont Winamp
Inconvénients
• Peu connu
• Peu utilisé

http://www.vorbis.com/.
Ogg Vorbis 92
Guide Web Éducatif
La vidéo
Le cinéma et ses descendants exploitent un phénomène appelé persistance rétinienne afin de créer l'illusion du
mouvement. Il suffit d'alimenter en images rapidement le cerveau pour que l'humain assemble ces images en
une suite animée. L'ordinateur remplace maintenant la pellicule et permet de produire à son tour des vidéos.
La source du document peut être diverse :
• Un document existant, une bande VHS par exemple, est transféré grâce à une carte d'acquisition vidéo
• Une caméra analogique est branchée à l'ordinateur grâce à une carte d'acquisition vidéo
• Une caméra numérique est employée et le document peut être transféré directement via un port USB
ou Firewire
• La vidéo peut être créée de toutes pièces à partir d'une série de photos ou d'images
L'exploitation du vidéo par un support informatique offre de nombreux avantages :
1. La diffusion du document s'effectue à une grande échelle facilement

2. Le contrôle du visionnement relève de l'utilisateur
3. Le document peut faire partie d'un ensemble plus vaste, compléter du texte par exemple
4. Il existe plusieurs outils d'édition qui rendent le montage vidéo accessible à tous sans autre matériel
Grâce à des plugiciels, il est possible d'intégrer des vidéos à votre site Web. La problématique principale du
format vidéo est la quantité d'informations qu'il nécessite, d'où des fichiers de taille fort imposante. Il s'agit
toujours d'effectuer un compromis entre la vitesse du téléchargement et la qualité du vidéo. Pour ce faire, deux
paramètres offrent un contrôle sur ces aspects :
• Le nombre d'images à la seconde

• La résolution de la vidéo
Nombre d'images à la seconde
Plus ce nombre d'images sera élevé, plus la vidéo sera fluide. En général, une vidéo est tournée à une cadence
de 30 images par seconde pour la télévision, 24 pour ce qui est du cinéma. Sur le Web, cette cadence va être
diminuée afin de limiter la quantité de mémoire nécessaire. La fréquence peut osciller entre 5 et 15 images par
seconde, selon la vitesse du mouvement des images. Par exemple, moins il y a de mouvements dans une
vidéo, plus le nombre d'images par seconde est réduit. Si la vidéo comporte des mouvements rapides, le
nombre d'images par seconde sera augmenté afin d'éviter d'avoir un effet saccadé.
Résolution de la vidéo
Pour optimiser le téléchargement, la vidéo sera réduite à une taille de 160 sur 120 pixels. Cette taille convient
bien à une connexion par modem. Cette taille peut être supérieure si la connexion est plus rapide (haute
vitesse). Un meilleur résultat est obtenu avec des images grandes réduites par la suite à un format compact.
Lorsque du texte est incorporé dans une séquence vidéo, il est préférable d'utiliser une typographie d'au moins
30 points afin d'en faciliter la lecture.
Les formats les plus utilisés sont :
• MPEG
• QuickTime
La vidéo 93
Guide Web Éducatif
• RealVideo
• Windows Media
Réflexion
Afin d'offrir le meilleur à chaque utilisateur, en fonction du type d'accès qu'il possède, il suffit d'offrir
plusieurs résolutions de vidéo. L'utilisateur choisira celle qui lui convient le mieux.
Recommandation
Un guide complet sur l'encodage pour la production vidéo sur Internet réalisé par la Division des Services et
du Développement du SIT est disponible à l'adresse :
http://feynman.ulaval.ca/logi/presteleconf/radiotvencodeursintro.shtml
La vidéo 94
Guide Web Éducatif
MPEG
Le même groupe qui a défini le très populaire format MP3 se destinait avant tout au vidéo. Le Moving Picture
Experts Group a, en effet, défini des méthodes de compression et un format de fichier, le .mpg ou .mpeg qui
implante cette compression.
Avantages
• Format universel
• Bon niveau de compression
Inconvénients
• La compression entraîne une perte

• Les derniers niveaux, particulièrement MPEG−4, nécessitent beaucoup de calculs donc un ordinateur
puissant
Cliquez ici pour visionner un exemple de vidéo en MPEG.
Pour de plus amples renseignements, consultez les sites :

http://mpeg.telecomitalialab.com/, http://www.mpeg.org/MPEG/index.html.
MPEG 95
Guide Web Éducatif
QuickTime
QuickTime, un format développé par Apple, permet de diffuser des vidéos en transit (streaming) et en fichier.
Une multitude d'outils permettent de créer des fichiers de ce format, sans compter les appareils photos
numériques qui exploitent cette technologie. De plus, le lecteur, disponible gratuitement, supporte d'autres
formats de fichier image, audio et vidéo, dont le MPEG−4.
QuickTimeVR permet de présenter une photographie en mode panoramique de 360°. Il s'agit en fait d'une
série de photos que le logiciel assemble correctement afin de donner l'illusion de la réalité. L'utilisateur a le
loisir de se déplacer dans la photo à l'aide de sa souris.
Avantages
• Populaire
• Versatile
Inconvénient
• Support d'Unix déficient
Cliquez ici pour visionner un exemple de QuickTime.
Voici maintenant un exemple de QuickTimeVR.
(Nécessite le plugiciel disponible ici.)

http://www.apple.com/quicktime/
QuickTime 96
Guide Web Éducatif
RealVideo
Tel le RealAudio, le RealVideo permet la diffusion de vidéos en transit (streaming). Le lecteur, disponible
gratuitement, permet ainsi d'accéder à des vidéos de musique, des stations de radio, des nouvelles et d'autres
matériels de divertissement. Il s'agit d'un sérieux concurrent pour QuickTime.
Avantages
• Contrôle de la diffusion par le serveur

• Diffusion en transit (streaming)
Inconvénients
• Nécessite l'achat d'un logiciel pour la création de contenu

http://www.real.com/.
RealVideo 97
Guide Web Éducatif
Windows Media Video (WMV)
Remplaçant le format AVI, Microsoft a développé un nouveau format beaucoup plus complet et performant,
qui accompagne le Windows Media Player, disponible gratuitement. Offrant une gamme de fonctionnalités,
dont la lecture en transit (streaming), la compatibilité avec les anciens formats et le support des PocketPC,
cette technologie est un concurrent sérieux à QuickTime.
Avantages
• Intégré à Windows
• Facilité d'utilisation avec sa dernière version (XP)
Inconvénients
• Destiné avant tout à Windows
Cliquez ici pour visionner un exemple de vidéo en AVI.

http://www.microsoft.com/windows/windowsmedia/default.asp.
Windows Media Video (WMV) 98

Guide Web Éducatif
L'animation
Tandis que la vidéo numérique puise sa source du monde réel, l'animation est entièrement informatique. Il
s'agit encore une fois d'enchaîner une suite d'images afin de créer l'illusion du mouvement. Mais cette fois, les
images seront créées avec l'ordinateur.
Plusieurs solutions sont possibles pour générer une animation destinée au Web. Le choix s'effectuera en
fonction des besoins et des ressources disponibles. Les pages suivantes couvrent les principales solutions
disponibles.
L'animation 99
Guide Web Éducatif
Flash
Flash, de la compagnie Macromedia, a été conçu spécialement pour concevoir des animations pour le Web.
De type vectoriel, les dessins sont optimisés afin d'utiliser un minimum de bande passante. Le logiciel
fonctionne un peu comme un logiciel de montage vidéo, où chaque image est affichée selon une chronologie.
Le langage ActionScript permet de gérer les évènements et de créer de l'interactivité. Le résultat est
généralement distribué en transit (streaming) et possède l'extension .swf. Un lecteur ou un plugiciel est
nécessaire pour regarder une animation Flash : Flash Player et Shockwave remplissent ce rôle et sont
disponibles gratuitement (http://www.macromedia.com/downloads/). Notez que Microsoft Internet Explorer
inclut le plugiciel Shockwave.
Il est possible d'importer des objets d'autres logiciels comme Illustrator et Photoshop dans Flash. Il permet
également une certaine interactivité avec un langage hôte comme JavaScript, VBScript ou PHP.
Très utilisé par les sites commerciaux, Flash nécessite tout de même une connexion rapide pour site doté
d'animations complexes. Vous devez en tenir compte avant d'opter pour cette solution.
Bien que Flash soit de plus en plus intégré dans l'installation des divers navigateurs récents, il existe plusieurs
versions de Flash et ces dernières ne sont pas toutes installées dans les navigateurs. Cela suppose dont que
certains usagers qui n'ont pas mis leur version de Flash à jour ne puissent voir votre application disant que le
site est mal conçu. Il faut donc aviser de la version de Flash utilisée et idéalement joindre un lien de
téléchargement du plugiciel.
L'interface de Flash :
Au lien suivant, flash.html, vous trouverez un exemple simple d'une animation Flash. Il suffit de cliquer sur la
craie pour que l'animation s'enclenche. Vous devez avoir installé le plugiciel pour pouvoir visionner cette
animation.
Pour plus d'informations sur Flash, voir les adresses :

http://www.macromedia.com/software/flash/ et http://www.shockwave.com/sw/home/.
Adobe LiveMotion
Concurrent direct de Flash, ce logiciel manipule le format SWF, tout en supportant une série d'autres formats
et de s'intégrer dans la suite des produits Adobe.
Flash 100
Guide Web Éducatif
Pour plus d'informations, consultez le site de la compagnie :

http://www.adobe.com/products/livemotion/main.html.
Flash 101
Guide Web Éducatif
Director
Director, de la compagnie Macromedia, est un environnement de développement de contenu interactif

(authoring tool). Director a été conçu pour la création de produits multimédia. Ce produit est surtout utilisé
pour la réalisation de CD−ROM interactif et l'ajout de contenu multimédia à un site Web. En effet, Director
s'intègre facilement au Web grâce au plugiciel Shockwave
(http://www.macromedia.com/software/shockwaveplayer/).
Director supporte de nombreux formats de fichiers multimédias, dont QuickTime, RealAudio, RealVideo et
les principaux formats de graphiques. De plus, Director offre des fonctions pour la manipulation d'objets 3D.
L'élaboration d'un document Director se fait un peu à la manière du montage vidéo. Les objets sont assemblés
à l'écran, coordonnés selon une certaine chronologie ou un certain évènement. Le langage Lingo permet de
gérer l'interactivité.
Informations : http://www.macromedia.com/software/director/.
Director 102
Guide Web Éducatif
Java
Réservée aux personnes possédant des notions en programmation, cette solution portable et personnalisée
permet de produire un applet incorporé à la page Web. Cet applet sera téléchargée le poste de l'utilisateur et
sera exécutée au sein du document HTML, grâce à la Java Virtual Machine (JVM), présente dans les dernières
moutures des navigateurs (Explorer, Navigator).
Java offre des classes d'objets (code tout fait, utilisable dans un programme) pour de multiples fonctions, dont
le dessin en 2D et en 3D (voir section Java).
L'avantage de Java sur un logiciel dédié comme Flash est le niveau de contrôle offert, la communication avec
d'autres composantes (une base de données par exemple) et l'interaction avec l'utilisateur (par un champ de
saisi par exemple).
Voici un petit programme d'animation en Java.
Bien entendu, une animation peut être développée dans un autre langage que Java. Java est simplement plus
facile à intégrer au contenu Web et offre déjà plusieurs fonctionnalités qui simplifient le développement
d'animations.
Vous trouverez plus d'information sur Java à l'adresse : http://java.sun.com/.

Le site http://hotwired.lycos.com/webmonkey/multimedia/animation/tutorials/tutorial1.html explique
également la programmation d'animation pour le Web.
Java 103
Guide Web Éducatif
VRML
Le VRML (Virtual Reality Modeling Language) est un langage qui permet de décrire des mondes en trois
dimensions, permettant de visiter par exemple un musée, une architecture, un moteur, un corps humain, etc.
Le VRML est né en 1994. Dans sa première version, les mondes générés par ce langage étaient plutôt
statiques. Il a subi une évolution importante et les mondes sont devenus plus dynamiques et interactifs.
Le VRML est à la réalité virtuelle ce qu'est le HTML pour le texte : un langage de balises multiplateforme. Il
ne s'agit ni plus ni moins que de fichier texte organisé selon une certaine syntaxe autour d'un vocabulaire
prédéfini. Bien qu'il soit possible d'écrire l'encodage VRML dans un vulgaire éditeur de texte, il existe des
éditeurs de VRML qui simplifient cette tâche. Voici un exemple de ce que ressemble le VRML :
#VRML V2.0 utf8

Transform {
translation 0 1 0
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 0.8 0 0
}
}
geometry Sphere {
radius 0.5
}
}
]
}
Cet exemple dessine une sphère d'un rayon de 0.5 mètre, de couleur rouge. Comme vous pouvez le constater,
le VRML est très structuré et ancré dans un univers géométrique.
Technologie encore expérimentale et peu exploitée, le VRML est tributaire du développement technologique.
Le graphisme est souvent assez simpliste, l'apport de cette solution résidant surtout dans la possibilité de se
déplacer dans un environnement 3D.
Voici une image tirée d'un environnement en VRML (un musée en 3D) :
VRML 104
Guide Web Éducatif
Pour la visualisation des environnements VRML, vous devez installer un plugiciel qui vous permettra de
naviguer dans des mondes en 3D dans votre navigateur favori ou d'utiliser un navigateur spécialisé dans cette
technologie (voir http://www.vrml.org/vrml/browpi.htm).
Pour en savoir plus sur le VRML, vous pouvez jeter un coup d'oeil à l'adresse : http://www.vrml.org/.
Vous trouverez également quelques exemples d'applications pédagogiques du VRML à l'adresse :

http://www.vrml.org/vrml/edap.htm.
VRML 105
Guide Web Éducatif
Logiciels de dessin
De nombreux logiciels de dessin permettent de générer des animations et de les exploiter sur le Web. Leur
force est la qualité du dessin qu'ils produisent. Toutefois, puisqu'ils ne sont pas dédiés au Web, la production
de contenu pour le Web peut être plus ou moins heureuse. Voici quelques produits :
Bryce
Bryce permet la création d'images en 3D. Sa spécialité est les paysages. Disponible pour PC et Mac, il permet
de créer des QuickTime VR exploitables sur le Web.
Exemple Bryce
Informations : http://www.corel.com/, dans la section Products.
Maya
Maya est un logiciel de 3D de calibre professionnel. Son coût est donc élevé, bien qu'une version d'essai soit
disponible gratuitement. La qualité de l'image produite justifie toutefois le coût demandé. Le logiciel permet
d'utiliser le plugiciel Shockwave de Macromedia, pour l'exploitation sur le Web. Nécessite un ordinateur
puissant avec Mac OS X, Windows 2000/XP ou Unix.
Informations : http://www.aliaswavefront.com/.
Poser
Ce logiciel est spécialisé dans la création de personnages en 3D. La dernière version intègre des fonctions
d'animation et d'exportation vers le Web. Disponible pour PC et Mac.
Informations : http://www.curiouslabs.com/products/poser4/index.html.
Logiciels de dessin 106

Guide Web Éducatif
Autres types de documents

D'autres types de documents peuvent être inclus dans un document HTML. Soit qu'ils sont téléchargeables,
soit qu'ils sont consultables directement à partir de la page HTML grâce à un plugiciel.
Un plugiciel est un petit programme qui vient s'intégrer dans un navigateur. Il doit être téléchargé et installé
afin de pouvoir consulter certains types de documents. Ce plugiciel dépend de la plate−forme (Mac, PC) et du
navigateur employé (Microsoft Internet Explorer, Netscape Navigator). Il faut toutefois faire attention au
plugiciel, car il peut déstabiliser un navigateur s'il n'est pas au point ou consommer de la mémoire et du temps
de traitement, précieux pour un ordinateur de faible puissance. Un exemple de plugiciel est Acrobat Reader
qui permet de lire les fichiers .PDF au sein d'un document HTML.
Le téléchargement est une solution alternative, qui peut être offerte si aucun plugiciel n'existe pour le type de
document employé ou si l'emploi du plugiciel n'est pas possible pour la majorité des destinataires. Mais avant
de diffuser un format de fichier particulier, il faut s'assurer que les destinataires pourront consulter le
document d'une manière ou d'une autre.
Recommandation
Pour diminuer le temps de téléchargement, il est conseillé de compresser le document à l'aide d'une méthode
standard. Sur PC, le format standard est le .zip (http://www.winzip.com/) tandis que sur Mac, Stuffit
(http://www.stuffit.com/) est le plus employé.
Autres types de documents 107

Guide Web Éducatif
Acrobat
Développé par la firme Adobe, Acrobat permet la diffusion de documentation électronique sur plusieurs
plateformes (Mac, PC, Unix). Couramment employé sur le Web à cette fin, il permet notamment de convertir
document Word ou une page HTML vers son format universel. Il est donc l'outil de choix pour la diffusion de
documents longs avec une table des matières interactives, des liens internes et externes, des notes de l'auteur,
etc.
Le lecteur qui permet de consulter ces documents, Acrobat Reader, est disponible gratuitement. Vous pouvez
le télécharger à l'adresse http://www.adobe.com/products/acrobat/readstep.html. Les documents de ce format
possèdent pour extension .pdf, signifiant Portable Document File.
La firme Adobe offre une suite d'outils pour manipuler ce format.

http://www.adobe.com/acrofamily/main.html. Une communauté d'utilisateurs peut également apporter de
précieux renseignements lors de la création de documents PDF. Le site http://www.planetpdf.com/ est un bon
exemple de la vitalité de ce standard.
Recommandation
Nous avons préparé un guide sur la conception pédagogique des documents PDF. Disponible à l'adresse
http://aptic.ulaval.ca/guidepdf/.
Acrobat 108
Guide Web Éducatif
PowerPoint
Powerpoint est le principal logiciel dit de PréAO (présentation assistée par ordinateur). Il est inclus dans la
suite bureautique Office de Microsoft. Ce logiciel, permettant d'aider à la composition de présentation, est axé
sur quatre points :
• Une prise en main très rapide

• Une interface graphique agréable
• Des supports de présentations variés
• La possibilité d'offrir au public une présentation originale
De plus en plus de professeurs utilisent des présentations électroniques en classe. En diffusant les fichiers
PowerPoint sur leur site Web, les étudiants peuvent imprimer ces présentations avant le cours. Ceci permet
aux étudiants une plus grande participation active au cours plutôt qu'une simple activité de prise de notes.
Voici une copie−écran d'un document produit avec le logiciel PowerPoint :
Il existe trois méthodes de diffusion des présentations PowerPoint :
1. En téléchargeant le fichier. Une visionneuse disponible gratuitement

(http://office.microsoft.com/downloads/default.aspx?Product=PowerPoint) permet à l'utilisateur de
consulter la présentation par la suite. Cette méthode est particulièrement recommandée pour de
grosses présentations.
2. PowerPoint permet d'exporter la présentation en format Web natif (version 97 et suivante). L'avantage
indéniable de cette méthode est de rendre universelle la présentation. Mais on perd certaines
fonctionnalités telles les animations du texte et les transitions.
3. Un plugiciel est disponible (ActiveX) afin de consulter la présentation PowerPoint en format natif
dans le navigateur Internet Explorer. Cette méthode ne fonctionne que si vous savez que vos
destinataires utilisent exclusivement Internet Explorer version 4 et suivante.
Pour en savoir plus : http://www.microsoft.com/office/powerpoint/.
PowerPoint 109
Guide Web Éducatif
Interactivité côté client

Jusqu'à maintenant, les technologies abordées offraient un minimum d'interaction avec l'utilisateur. Elles
servaient principalement à formater l'information. Pour offrir de l'interactivité, il faut envisager d'écrire un
programme dans un langage dédié à cet effet. De nombreuses solutions s'offrent à nous, selon le besoin à
combler et les ressources disponibles. En effet, chaque solution implique un niveau de complexité différent et
le recours à une personne qualifiée avec le langage désiré.
L'interactivité est traitée soit sur l'ordinateur de l'utilisateur (client), soit du côté de la source (serveur). Si le
niveau d'interactivité est minime, elle peut s'effectuer du côté du client, par une des technologies décrites dans
cette section.
L'avantage de développer du côté du client est que les technologies employées sont généralement plus simples
à mettre en oeuvre. Par contre, le contrôle et les possibilités sont moindres du côté client. De plus, vous devez
vous assurer que la technologie employée sera supportée par vos utilisateurs.
Interactivité côté client 110

Guide Web Éducatif
JavaScript
Développé par la firme Netscape pour la version 2.0 de son navigateur, le JavaScript est un langage interprété
dont la syntaxe s'apparente au langage Java. Mais la comparaison s'arrête là. Alors que le Java, développé par
la firme Sun, est un langage complexe, autonome et orienté objet, le JavaScript est limité et nécessite le
HTML comme langage hôte. En effet, le code JavaScript ne peut s'exécuter seul, il nécessite un navigateur qui
le supporte et qui agit comme interpréteur.
Le JavaScript permet de façon relativement facile d'ajouter un certain degré d'interactivité à vos documents
HTML. Cette forme d'interactivité permet notamment de vérifier les réponses d'un formulaire en ayant, dans
le code JavaScript, tous les éléments d'analyse des résultats et l'exécution de la rétroaction appropriée. Ce qui
s'éloigne de l'utilisation courante d'un script CGI qui doit communiquer avec le serveur pour utiliser un
programme qui effectuera l'opération et retournera le résultat dans une page différente au client. Il permet
aussi de faire apparaître une image, de faire défiler des informations dans un bandeau, de voir des menus
s'illuminer, etc.
Un de ses avantages est sa facilité de création à partir de bibliothèques de références (livres et CD−ROM). On
peut également s'inspirer des routines existantes, car le code JavaScript est visible dans la page encodée en
HTML. Dans ce dernier cas, il est impératif de bien adapter l'ancienne routine à son nouvel usage, car une
réutilisation intégrale du code pourrait créer une instabilité générant des messages d'erreurs.
Il est à noter que le code est indépendant du processeur et que les accès au disque dur sont limités pour éviter
des problèmes de sécurité. Ainsi, une personne ne pourra programmer une routine dans le but d'espionner le
contenu de votre disque dur. Un codage bien structuré et qui spécifie adéquatement la version du langage
utilisé permet une excellente performance, tant avec les navigateurs de Netscape (2.0 et plus) qu'avec les
Internet Explorer (3 et plus).
Au lien suivant, javascript.html, vous trouverez un exemple simple de JavaScript qui valide la saisi d'un
champ d'un formulaire.
Le JavaScript se déploie également du côté serveur, si le serveur HTTP le supporte, comme le serveur vendu
par la compagnie Netscape.
Critique
Avantages
• Bonnes possibilités d'interactivité

• Langage simple
• Facile à déployer (un simple éditeur texte et un navigateur qui le supporte)
Inconvénients
• Se désactive par l'utilisateur

• Fonctionnement inégal entre les navigateurs
• Script ouvert. Le code que vous écrivez étant visible par tous, vous ne devez pas écrire de code
sensible, par exemple la validation d'un examen sommatif
JavaScript 111
Guide Web Éducatif
Ressources
• Documentation officielle (http://developer.netscape.com/tech/javascript/index.html)

• Tutoriels et exemples de scripts (http://www.javascriptkit.com/)
• Exemples de scripts et articles (http://www.javascript.com/)
JavaScript 112
Guide Web Éducatif
DHTML
Le DHTML, Dynamic HTML, n'est pas un langage de programmation, mais plutôt un standard de
développement qui repose sur quatre vecteurs :
1. Une vision orientée objet de la page HTML (DOM)

2. L'utilisation de feuilles de style (CSS)
3. La programmation intégrée à la page HTML
4. Le support de polices de caractères dynamiques
Initié par Netscape, le DHTML est également supporté par Microsoft. Le DHTML est supporté par la version
4 et suivante des navigateurs des deux firmes. Il vise l'utilisation maximale des possibilités des navigateurs de
quatrième génération, sans l'emploi de ressources externes (plugiciel ou autre).
Critique
Avantages
• Permets de produire du contenu dynamique

• Est d'une relative simplicité
• Offre plus de possibilités que le JavaScript seul
Inconvénients
• Le fonctionnement du DHTML varie selon le navigateur (Netscape VS Microsoft)

• Ce standard est entre les mains des compagnies
• Standard sujet à être remplacé par une nouvelle technologie (XML)
Ressources
• Ressources Netscape (http://developer.netscape.com/tech/dynhtml/index.html)

• Ressources Microsoft (http://msdn.microsoft.com/workshop/entry.asp)
• Exemples et informations ( http://www.dynamicdrive.com/)
• Le DOM (http://www.w3.org/DOM/)
Réflexion
Avant de se lancer dans l'aventure du DHTML, il faut bien maîtriser les standards impliqués dans ce type de
développement. La lecture d'un ouvrage sur le sujet ou de la documentation disponible sur le Web est
vivement conseillée.
DHTML 113
Guide Web Éducatif
VBScript
VBScript, ou formellement Visual Basic Scripting Edition, constitue la réponse de Microsoft au JavaScript.
Reprenant la syntaxe de son célèbre produit de développement, Visual Basic, la firme de Redmond a
développé un langage script qui s'intègre bien à une page HTML. Le VBScript est une pierre d'assise de la
technologie ASP.
Au lien suivant, vbscript.html, vous trouverez un exemple de VBScript.

(Note : Vous devez utiliser Internet Explorer pour consulter l'exemple.)
Critique
Avantages
• Simplicité
• Intégration à ASP
• Support de Microsoft
Inconvénients
• Ne fonctionne qu'avec Internet Explorer sous Windows

• Syntaxe laxiste
• Langage moins sophistiqué que le JavaScript
Ressources
• Microsoft (http://msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?contentid=28001169)
• Exemples et tutoriels (http://www.visualbasicscript.com/)
VBScript 114
Guide Web Éducatif
Java
Le langage Java a été développé par la firme Sun Microsystems afin d'offrir un outil universel qui permettrait
de contrôler autant un téléphone portable qu'un ordinateur de forte puissance. Pour atteindre cette fin, le Java
repose sur l'emploi d'un interpréteur, le Java Virtual Machine ou JVM, qui décode le programme Java et le
traduit dans le langage de la machine hôte.
Le Java est un langage orienté objet. Sa syntaxe ressemble grandement à celle du C++, tout apportant de
nombreuses améliorations, notamment en ce qui a trait à la gestion de la mémoire.
Par ses caractéristiques, le Java se prêtait fort bien à une exploitation sur le réseau Internet. L'une de ces
nombreuses possibilités est de créer des applets, petit programme intégré à une page Web. L'applet sera
exécuté en vase clos, sans danger pour l'ordinateur hôte. Contrairement au JavaScript ou au VBScript, le code
source ne sera pas visible au sein de la page HTML.
Sun assure la pérennité du langage Java en ne cessant de le développer et de lui adjoindre d'autres
technologies. Bien qu'il souffre d'une certaine avidité en ressources matérielles, il s'agit d'un langage plein de
promesses pour l'avenir.
Le lien suivant, java.html, présente un applet Java.
Critique
Avantages
• Large éventail de possibilités

• Bibliothèque d'objets abondante
• Vaste documentation disponible
• Universel
• Sécuritaire
Inconvénients
• Requiers une bonne connaissance de la programmation orientée−objet

• Courbe d'apprentissage plus élevée (développement)
• Exigeant en ressources matériels (Mémoire, temps CPU)
• Par défaut, le Java est interprété et peu performant par rapport aux langages compilés tels le C et le
C++
Ressources
• Site officiel (http://java.sun.com/)

• Tutoriel (http://www.commentcamarche.net/java/javaintro.php3)
• Applets (http://www.javafile.com/)
Java 115
Guide Web Éducatif
Composante intégrée
Las de répéter sans cesse les mêmes bouts de code, les informaticiens ont développé une approche différente
de la programmation. Au lieu d'écrire leur programme d'une manière linéaire, ils ont divisé le programme en
petite partie indépendante, possédant des caractéristiques et des fonctionnalités propres. Cette approche,
vulgairement simplifiée ici, se nomme la programmation orientée objet.
Mais qu'est−ce qu'un objet ?
Le bouton ci−haut va nous servir à expliquer ce qu'est un objet. Un objet est un élément qui possède des
propriétés et des fonctionnalités. Ce bouton par exemple possède un libellé, une taille, une couleur, autant de
propriétés qui lui étaient propres. Et s'il s'agissait d'un véritable objet, il réaliserait une action lorsqu'il serait
cliqué. Il aurait une fonctionnalité quelconque.
Le Web n'échappe pas à cette tendance, loin de là. Le réseau Internet se prêtait bien à cette façon de concevoir
le monde. Des architectures furent développés dans lesquels les objets pouvaient dialoguer entre eux. Le
développeur qui exploite une telle architecture bénéficie de composantes déjà éprouvées qu'il réutilise en
fonction de ses besoins.
Les pages suivantes s'attardent aux ActiveX et JavaBeans, deux technologies orientées objet.
Composante intégrée 116

Guide Web Éducatif
ActiveX
Fruit du développement de Windows, l'ActiveX est le nom d'un ensemble de composantes et d'outils du COM
(Component Object Model), l'approche orientée objet telle que préconisée par Microsoft. La plate−forme de
développement de Microsoft, le .NET, repose sur cette approche. Un programmeur qui désire partager un
objet qu'il a développé le fera en créant un control ActiveX qui sera aisément réutilisable par d'autres
programmeurs au sein de l'architecture Microsoft.
Sur le Web, un control ActiveX permet par exemple d'étendre les fonctionnalités du navigateur Internet
Explorer comme pour supporter un format de fichier particulier.
Critique
Avantages
• S'intègre bien à la plate−forme Microsoft
Inconvénients
• N'est supporté que par Microsoft
Ressources
• Site officiel (http://www.microsoft.com/com/tech/ActiveX.asp)
ActiveX 117
Guide Web Éducatif
JavaBeans
Le JavaBeans remplit la même fonction qu'un control ActiveX, soit la diffusion d'une composante finie. Cette
fois, cette distribution s'effectuera au sein de l'architecture Java.
Critique
Avantages
• Architecture multiplateforme.
Inconvénients
• Nécessite de solides connaissances en programmation.
Ressources
• Site officiel (http://java.sun.com/products/javabeans/)
JavaBeans 118
Guide Web Éducatif
Interactivité côté serveur

L'interactivité du côté du client est toutefois limitée. Par exemple, si vous désirez changer le contenu de la
page Web, vous devrez le faire en amont, du côté du serveur. Lorsque les pages Web doivent être
dynamiques, c'est−à−dire que le contenu est créé sur le vif, la programmation s'effectue à la source, du côté du
serveur.
Bien entendu, l'interactivité du côté du serveur est plus exigeante. Des connaissances en informatique sont
requises et réclament une personne qualifiée.
Comme vous pouvez le constater, le développement d'un site Web requiert souvent l'utilisation d'un
amalgame de techniques. Voici les technologies les plus courantes en matière de développement sur un
serveur Web :
• SSI
• CGI
• PHP
• ASP
• JSP
Interactivité côté serveur 119

Guide Web Éducatif
Server Side Includes

Les Server Side Includes, ou SSI en abrégé, est la méthode la plus simple à mettre en action et la plus limitée.
Il s'agit d'une fonctionnalité supportée par la majorité des serveurs Web qui consiste à faire une première
analyse du code HTML à la recherche d'instructions particulières qui sont traitées directement par le serveur
Web. Le résultat est transmis au client.
À l'aide des SSI, vous pouvez par exemple inscrire dans votre page Web la date du jour, la taille d'un fichier,
la valeur d'une variable d'environnement ou inclure le contenu d'un fichier. Il existe également des XSSI
(eXtended SSI) qui permettent également l'ajout d'énoncés conditionnels (if) et la déclaration de variables.
Les pages ayant recours aux SSI sont identifiées par l'extension .shtml.
Exemple de code :
<html>
<head>
<title>Test des SSI</title>
</head>
<body>
Date du jour : <!−−#echo var="DATE_LOCAL" −−>
</body>
</html>
Résultat de l'exemple :
Date du jour : Wednesday, 31−Jul−2002 09 :53 :15 EDT
Critique
Avantages
• Simple
• Ne nécessite pas l'installation d'autres logiciels
Inconvénients
• Offre peu de possibilités

• Nécessite une attention particulière lors de la configuration afin de ne pas créer de faille dans la
sécurité du serveur
Ressources
• Tutoriel (http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html)
• Documentation (http://httpd.apache.org/docs/howto/ssi.html)
Server Side Includes 120

Guide Web Éducatif
CGI
La première méthode développée afin de rendre dynamique le contenu d'un site Web fut le CGI (Common
Gateway Interface). Il ne s'agit pas d'un langage de programmation, mais bien d'une méthode permettant à une
page Web d'accéder à un programme qui se situe sur le serveur.
Pour pouvoir utiliser le CGI vous devez donc employer un programme qui sera exécuté sur le serveur.
Plusieurs solutions s'offrent à vous, mais le langage le plus fréquemment employé avec le CGI est Perl. Perl
(Practical Extraction and Reporting Language) est un langage script interprété, dont la syntaxe s'imprègne de
la culture Unix. Ce langage a évolué et se voit bonifié de plusieurs fonctionnalités allant de l'interrogation de
base de données à l'orientée objet en passant par la programmation graphique. Son accessibilité et sa
versatilité lui assurèrent un certain succès. L'avantage du Perl dans le développement avec CGI est la
maintenance simplifiée puisqu'il est interprété.
Vous devez configurer votre serveur Web pour pouvoir exploiter le CGI. La majorité des serveurs Web
supportent implicitement le CGI. Il suffit de spécifier le répertoire où se trouvent les programmes à exécuter et
la sécurité de mise. Le programme est appelé comme une page Web, en employant le protocole HTTP. Ses
paramètres sont transmis sur la ligne d'adresse, chaque paramètre nommé suivi de sa valeur.
Exemple : http://www.votresite.com/programme.cgi?param1=valeur1code>
En cliquant sur le lien suivant, exempe.cgi, vous aurez l'opportunité de voir le CGI en action.
Critique
Avantages
• Simple à mettre en oeuvre

• Facile à intégrer à une page Web
Inconvénients
• Lourdeur de roulement (lent et gourmand)

• Dynamisme limité
Ressources
• Tutoriel (http://www.commentcamarche.com/cgi/cgiintro.php3)
• Tutoriel (http://www.cgi101.com/)
• Exemples (http://www.scriptarchive.com/)
• Perl (http://www.perl.org/)
CGI 121
Guide Web Éducatif
PHP
L'Hypertext Preprocessor, mieux connu sous le nom de PHP, est un langage script dédié à la création de page
Web. Faisant partie du monde du logiciel libre (open source), ce langage fort populaire auprès des
développeurs Web permet entre autres de faire le pont entre une base de données et un serveur Web.
Puisqu'il s'agit d'un langage interprété, il faut installer l'interpréteur sur le serveur, puis configurer le serveur
Web afin qu'il gère le PHP. Les scripts sont exécutés sur le serveur, leur résultat est acheminé sur le client.
L'extension des scripts PHP est .php.
Exemple de code :
<html>
<head>
<title>Exemple PHP</title>
</head>
<body>
<?PHP
$langue = substr($HTTP_ACCEPT_LANGUAGE, 0, 2);
switch ($langue)
{
case "fr" : echo "Bienvenu"; break;
case "es" : echo "Benvenida"; break;
default : echo "Welcome";
}
?>
</body>
</html>
Welcome
Critique
Avantages
• Logiciel libre
• Puissant
Inconvénients
• Syntaxe laxiste
• Installation tatillonne
Ressources
• Site officiel (http://www.php.net/)

• Tutoriel (http://www.commentcamarche.com/php/phpintro.php3)
PHP 122
Guide Web Éducatif
ASP
L'Active Server Pages (ASP) est une architecture développée par Microsoft afin de développer un site Web
dynamique. Orientée objet, cette architecture est dédiée au serveur Web de Microsoft, IIS (Internet
Information Server). Ce dernier permet l'exécution de programmes du côté serveur qui produiront la page
Web. N'importe quel langage de programmation qui supporte cette architecture peut être utilisé, mais les
programmes sont habituellement écrits en VBScript ou en JScript. Les pages Web déployant cette architecture
se reconnaissent à leur extension .asp. Quelques serveurs de la compétition supportent la technologie ASP,
mais jamais d'une façon aussi efficace que celle de Microsoft.
Exemple de code :
<%@ language="vbscript" %>

<html>
<head>
<title>Exemple ASP</title>
</head>
<body>
<%for x = 1 to 6%>
<font face="arial" size="<%=x%>">
Texte en police de taille <%=x%>
</font>
<br />
<%next%>
</body>
</html>
Texte en police de taille 1

Critique
Avantages
• Support de Microsoft
• Facile à déployer
Inconvénients
• Dédié au monde Microsoft

• Technologie dispendieuse (licence, matériel)
ASP 123
Guide Web Éducatif
Ressources
• Site officiel (http://msdn.microsoft.com/library/default.asp?URL=/library/psdk/iisref/aspguide.htm)

• Tutoriel (http://www.commentcamarche.com/asp/aspintro.php3)
• Tutoriel et exemples (http://www.asp101.com/)
ASP 124
Guide Web Éducatif
JSP
Toujours dans la perspective de créer du contenu dynamique, les Java Server Pages (JSP) sont la solution
développée par Sun, au sein de l'architecture de son langage Java. Tel le reste du monde Java, JSP repose sur
une architecture orientée objet. Un serveur qui supporte cette technologie est nécessaire. Ce dernier traduira
les instructions JSP en code HTML standard qui seront envoyées au client. Les scripts JSP portent l'extension
.jsp.
Exemple de code :
<%@ page info="Exemple JSP" %>
<html>
<head><title>Exemple JSP</title></head>
<body bgcolor="#ffffff" background="background.gif">
<%@ include file="dukebanner.html" %>
<table>
<tr>
<td width=150> </td>
<td width=250 align=right> <h1>Hello, World!</h1> </td>
</tr>
</table>
</body>
</html>
Critique
Avantages
• Solution pleine de potentiel

• S'intègre bien dans un environnement Java
Inconvénients
• Architecture complexe
• Nécessite un serveur qui supporte cette technologie
Ressources
• Site officiel (http://java.sun.com/products/jsp/)

• Tutoriel (http://www.commentcamarche.com/jsp/jspintro.php3)
• Exemples (http://www.jspin.com/)
• Serveur JSP (http://jakarta.apache.org/tomcat/)
JSP 125
Guide Web Éducatif
Base de données
Nous vivons dans une société d'information. Chaque jour, nous sommes soumis à une quantité importante de
données. L'informatique permet d'organiser ces données. En informatique, un ensemble de données
structurées d'une certaine façon se nomme base de données. Un logiciel qui permet de gérer une base de
données se nomme un Système de Gestion de Base de Données (SGBD ou DBMS en anglais). Il se charge de
l'accès aux données, de la sécurité, de la maintenance et de la gestion de l'infrastructure nécessaire à
l'exploitation des données (Exemple : les index).
Afin de manipuler les bases de données, un langage a été développé, le Strutured Query Language ou SQL.
Ce langage se rapprochant de la langue anglaise permet de créer l'infrastructure et de manipuler les données. Il
est utilisé par la majorité des SGBD.
Exemple de code SQL :
/* Pour créer une table : */

CREATE TABLE exemple (nom char(10));
/* Pour obtenir les données contenues dans la table exemple :*/

SELECT * FROM exemple;
La base de données peut être interroger par un programme (Java, C, Visual Basic, etc.) qui effectuera un
traitement quelconque sur ces données. Bien entendu, il est possible d'utiliser ces données au sein d'un site
Web.
Quand utiliser une base de données avec son site Web ?
L'ajout d'une base de données à un site Web a connu un engouement phénoménal au cours de ses dernières
années. Mais il ne faut pas oublier que cet ajout complexifie grandement l'ensemble du site (matériel, logiciel,
programmation). Il ne devra donc être envisagé que lorsque réellement nécessaire. Voici quelques situations
qui peuvent requérir une base de données.
• Le contenu est appelé à changer souvent (Exemple : à tous les jours)

• Les données contenues dans une banque existante doivent être publiées sur le Web (Exemple :
données d'une recherche)
• L'utilisateur doit inscrire des données qui sont conservées par la suite (Exemple : commande de
produits sur le Web)
• Le contenu est un très grand volume d'informations
Ressources
• Introduction (http://www.commentcamarche.com/bdd/bddintro.php3)
• MySQL (http://www.mysql.com/)
• Access (http://www.microsoft.com/office/access/default.asp)
• FileMaker (http://www.filemaker.com/)
Recommandation
Base de données 126

Guide Web Éducatif
Le développement d'un site Web qui emploie une base de données ne doit pas être fait à la légère. En effet,
une mauvaise conception initiale sera difficile à faire évoluer et entraînera une augmentation des coûts et du
temps de maintenance ou de développement. Le recours à une personne qualifiée est fortement recommandé.

Guide Web Éducatif

Expérimentation
La phase d'expérimentation permet de s'assurer du bon fonctionnement du site Web sur le réseau Internet et de
vérifier l'atteinte de vos objectifs.
La première partie de cette phase repose sur la mise en ligne. Pour ce faire, nous aborderons :
• Le choix du serveur d'hébergement

• La gestion des fichiers
• L'indexation
• Les statistiques
La seconde partie s'attarde aux tests qui doivent être effectués afin de s'assurer que votre site est correct. Trois
volets sont présentés :
• La validité du code
• L'accessibilité du site
• Son bon fonctionnement
La dernière partie vise à évaluer la réussite du travail accompli. Afin de faciliter cette tâche, une grille
d'évaluation de site Web éducatif vous est proposée.
Expérimentation 129
Guide Web Éducatif
Mise en ligne
Habituellement, vous travaillez sur votre ordinateur personnel. Lorsque vous avez terminé votre site, il est
temps de le mettre sur le réseau Internet. N'oubliez pas de faire vérifier le contenu par un correcteur
linguistique avant cette ultime étape.
Le réseau Internet est un ensemble d'ordinateurs interreliés à la grandeur du globe. Au sein d'un réseau
informatique, deux types d'ordinateurs se rencontrent : des serveurs et des clients. Le réseau Internet peut
ressembler à un restaurant : de nombreuses tables sont disponibles (serveurs) autour desquelles se trouvent
des chaises (clients). Sur les tables sont servis des mets (sites) composés d'aliments (fichiers). Vous choisissez
la table selon les mets qui vous conviennent (connexion au serveur/site), puis vous ingurgitez ces succulents
plats par petits morceaux (paquets TCP/IP).
Il ne reste plus qu'à choisir le bon serveur pour mettre ce que vous avez mijoté.
Mise en ligne 130

Guide Web Éducatif
Le serveur
Pour pouvoir procéder à une mise en ligne efficace de votre site Web, vous devez d'abord vous poser les
questions suivantes :
• Comment héberger mon site ? Vais−je acheter un serveur ou louer un espace sur un serveur hôte ?
• Quelle plate−forme utilisera mon serveur (Windows, Mac OS, Unix) ?
• Quel sera mon serveur Web (Apache, IIS) ?
• Quels sont les avantages et les inconvénients de ce serveur (support technique interne, support des
requêtes simultanées, etc.) ?
• Avec qui devrais−je partager le serveur ? Seront−ils gourmands en matière de requêtes au serveur ?
Le serveur sera−t−il toujours surchargé ?
• Quel type de traitement les autres sites du serveur demandent−ils (calcul, streaming vidéo, traitement
utilisant une base de données, etc.) ?
• Puis−je faire la mise à jour des fichiers moi−même ? De quelle manière (Exemple : par FTP) ?
• Ce serveur est−il sécuritaire ? Me permet−il de garder les données confidentielles, de faire des
évaluations sommatives, de la gestion de notes ?
• Le serveur possède−t−il un logiciel de statistiques (Un tel logiciel permet de savoir qui se branche et
quelles sont les pages les plus visitées. Il s'avère très pertinent pour la mise à jour d'un site) ?
• Aie−je un espace où l'écriture de fichier est permise (Téléversement) ?
Le serveur 131
Guide Web Éducatif
Gestion des fichiers

Travailler directement sur le serveur n'est pas recommandé. L'idéal est de créer et modifier les documents
HTML sur un autre ordinateur, puis de les transférer, àa l'aide de FTP, sur le serveur. Cette méthode permet
d'éviter de nuire au bon fonctionnement du serveur et de votre site. De plus, il est fortement recommandé de
faire une copie des fichiers sur votre ordinateur où ils seront modifiés, puis de remplacer ceux sur le serveur,
tout en conservant une copie du site initial afin de pouvoir revenir à la version antérieure si un pépin survient.
Les fichiers doivent être regroupés logiquement afin de faciliter les corrections au site. Il est recommandé de
placer dans un répertoire l'ensemble du site. Ce dernier possédera :
• Une page d'accueil portant le nom « index.html », « index.htm » ou « default.html ». Elle sera la
page par défaut, c'est−à−dire celle qui sera appelée automatiquement lorsque le nom du site sera tapé
dans un navigateur (exemple : www.ulaval.ca = www.ulaval.ca/index.html). La nomenclature de
cette page varie selon le serveur Web utilisé.
• Tous les documents liés à l'affichage de cette page d'accueil.
• Un sous−répertoire associé à chaque section du site (ce dernier devrait également posséder une page
d'accueil).
• Une page avec un message clair sera affichée lorsqu'une erreur surviendra (Exemple : lors d'une
erreur 404 document introuvable).
En fonction de la clientèle visée, le site peut être multilingue. Cette caractéristique nécessite toutefois plus de
gestion : les documents propres à chaque langue auront leur répertoire (exemple : \anglais, \francais) tandis
que les éléments communs se trouveront dans un même répertoire (Exemple : \image). La maintenance
s'effectue en double et requiert une meilleure planification.
Recommandation
Vous devez prendre un soin particulier lorsque vous nommer vos fichiers. En effet, la gestion du site Web sera
plus aisée si la nomenclature des fichiers est soignée. Quelques règles de base doivent, en autre, être
respectées :
• Le nom ne doit pas contenir de caractères accentués ou de symboles autre que le point ( . ) et le
souligné ( _ ).
• Préférez l'emploi de minuscules seulement, surtout dans un environnement qui inclus un serveur
Unix, car ce dernier différencie les majuscules des minuscules.
• Dans un environnement hétérogène (Mac, PC, Unix), respectez une longueur de 8 caractères pour le
nom et 3 caractères pour l'extension.
• Utilisez les extensions standards en fonction du type de document (exemple : un document html
possède pour extension .htm ou .html mais pas .txt).
• Enfin, choisissez des noms significatifs afin qu'ils représentent bien le contenu du document.
Gestion des fichiers 132

Guide Web Éducatif
Indexation
Une fois votre site disponible aux internautes, il faut en faire la promotion. Une bonne méthode consiste à
indexer votre site à un annuaire ou à un moteur de recherche.
Annuaire
Un annuaire est un site qui repose sur une base de données contenant des milliers d'adresses de sites classés
par catégories. L'internaute qui visite l'annuaire peut rechercher par des mots−clés ou en choisissant les
catégories qui lui sont proposées afin de trouver un site qui discute du sujet qui l'intéresse. Pour faire partie de
l'annuaire, vous devez inscrire votre site dans la banque de données à l'aide d'un formulaire disponible sur le
site de l'annuaire.
Voici quelques annuaires :
• La Toile du Québec (http://www.toile.qc.ca/)

• Yahoo! Canada (http://www.yahoo.ca/)
• Ask Jeeves (http://www.askjeeves.com/)
Notez que l'inscription est souvent analysée par une personne ; elle est donc traitée moins rapidement et de
façon plus subjective. Des frais peuvent être demandés pour être présent dans l'annuaire.
Moteur de recherche
Un moteur de recherche possède deux composantes : un indexeur et un robot. L'indexeur est la partie visible
par l'internaute : il lui permet de chercher des mots−clés dans une banque de données. Le robot est un
programme qui scrute les sites Web, afin de les enregistrer dans la banque de données selon leur catégorie.
Pour ce faire, certains utilisent les titres des documents, d'autres passent en revue les pages. Pour mieux gérer
l'inscription de votre site dans les robots de recherche, trois étiquettes sont suggérées :
1. <title>donnez un titre clair et concis de l'ensemble de votre site</title>

2. <META name="Description" content="inscrire votre description">
3. <META name="Keywords" content="inscrire vos mots clés, séparés par une virgule">
Le contenu de ces étiquettes doit être clair, précis, simple et accrocheur sans exagérer. Notez que vous devez
fournir les mots−clés en français et en anglais si vous désirez rejoindre le plus d'utilisateurs possible. Certains
robots se servent de la description pour afficher un résumé de votre site, et des mots clés pour indexer votre
document. Attention, car plusieurs robots refusent d'indexer un site qui comporte, en début de document, des
images sensibles ou des Javascript. La plupart des robots sont aussi construits pour détecter les ruses de
répétition d'un mot clé, de la part du concepteur qui espère se retrouver ainsi en première place lors d'une
recherche. Malheureusement, pour lui, les robots ignorent ce type d'indication et refusent dans ce cas
d'indexer le site.
L'information donnée au robot peut être contrôlée en créant un fichier nommé « robots.txt » ou, tout
simplement, en inscrivant soi−même son site dans les divers outils de recherche sur le réseau Internet. Voici
un exemple d'un fichier robot.
La démarche à suivre est :
• Choisir des mots−clés pertinents à votre site Web.
Indexation 133
Guide Web Éducatif
• Soumettre votre page à un moteur de recherche.

• Attendre quelques semaines.
• Si aucun résultat n'est obtenu, soumettez la page qui correspond au plan du site.
Voici quelques moteurs de recherche :
• Altavista (http://www.altavista.com/)
• Google (http://www.google.ca/)
• InfoSeek (http://www.infoseek.com/)
• Lycos (http://www.lycos.com/)
• Excite (http://www.excite.com/)
• WebCrawler (http://www.webcrawler.com/)
• Voila (http://www.voila.fr)
• HotBot (http://hotbot.lycos.com/)
Certains logiciels peuvent faciliter la tâche d'indexation :
• AddWeb (http://www.cyberspacehq.com/)
• Submission Wizard (http://www.exploit.net/)
• Submit Wolf (http://www.msw.com.au/swolf/)
• Add Url (http://www.add−url.com/)
• Add Me (http://www.addme.com/submission.htm)
Saviez−vous que ?
De l'aide peut être obtenue, à l'aide des outils comme « Position Agent », afin de vérifier le positionnement
de son site dans les moteurs de recherche et obtenir des conseils pour améliorer ce positionnement.
Saviez−vous que ?
La description du site apparaissant dans le résultat d'une recherche provient de l'étiquette meta, paramètre
description. Toutefois, les moteurs ne considèrent que les 200 premiers caractères.
Exemple : <meta name="description" content="Guide de conception d'un site

Web éducatif">
Indexation 134
Guide Web Éducatif
Statistiques
Prévoir un logiciel de statistiques sur le serveur
Pourquoi des statistiques ?
Pour connaître :
• Le nombre de connexions
• Le temps de transfert
• La provenance et l'identité des utilisateurs
• Les liens activés
• Les pages lues et les pages oubliées
• Etc.
Ces informations s'obtiennent en installant un logiciel de statistiques sur le serveur. À partir d'un rapport
hebdomadaire ou mensuel, le concepteur sera à même de réviser son site. Ainsi, ce rapport servira lors de
l'évaluation du site en vue de sa mise à jour. On pourra constater, par exemple, que les étudiants utilisent les
outils interactifs, mais très peu le contenu du texte théorique. On pourra donc guider ses efforts vers des
objectifs qui sont mieux adaptés aux besoins des étudiants.
Voici quelques logiciels de statistiques :
• ClickTracks (http://www.clicktracks.com)
• I/Pro (http://www.topicalnet.com)
• WebStat (http://hits.webstat.com)
• Funnel Web (http://www.quest.com/funnel_web/analyzer)
Consultez la documentation relative à ces logiciels pour leurs installations et leurs utilisations.
Statistiques 135
Guide Web Éducatif
Test
Vous avez enfin déposé votre site sur le serveur et il est maintenant accessible à la communauté. Votre travail
est terminé. Détrompez−vous, il reste encore une étape à franchir, qui est somme toute cruciale : les tests.
Vous devez vous assurer que votre site fonctionne correctement, qu'il ne contient plus de coquille et qu'il
répond aux normes en vigueur.
Plus particulièrement, il faut s'attarder :
• À la validité du code
• À l'accessibilité du site
• À son bon fonctionnement
Test 136
Guide Web Éducatif
Validité du code
Une fois le site mis en ligne, vous devez vous assurer que tout fonctionne tel qu'il a été prévu. La complexité
de certains sites rend toutefois cette tâche fastidieuse, notamment lors de la vérification des hyperliens.
Heureusement, il existe des outils qui peuvent vous aider dans votre démarche. La plupart vont s'assurer de la
validité du code HTML. Sans que vous vous en aperceviez, des erreurs peuvent subsister au sein du code
puisque la syntaxe HTML est peu stricte et les navigateurs sont tolérants. Certains détectent également les
liens brisés (pages introuvables).
Voici quelques−uns de ces outils :
• Dr Watson (http://watson.addy.com/)
• Tidy (http://tidy.sourceforge.net/)
• Doctor HTML (http://www2.imagiware.com/RxHTML/)
• W3C HTML Validation Service (http://validator.w3.org/)
• Linklint (http://www.linklint.org/)
• Weblint (http://www.unipress.com/cgi−bin/WWWeblint)
Validité du code 137

Guide Web Éducatif
Accessibilité
Il existe une multitude d'environnements de travail utilisant du matériel et des logiciels variés. Des
fonctionnalités de votre site pourront ne pas être supportées par l'ordinateur d'un internaute. La configuration
choisit par celui−ci peut rendre inopérant votre site (exemple : désactiver le JavaScript). Enfin, cet internaute
peut souffrir d'un handicap qui lui rend inaccessible votre site. La période de test permet de vérifier la réaction
de votre site à ces situations.
Certains tests peuvent être effectués afin de déterminer l'accessibilité de votre site. Le fait d'essayer votre site
sur diverses plates−formes (PC, Mac) ou plusieurs navigateurs (Internet Explorer, Netscape Navigator,
Mozilla, Safari) est un bon commencement. Il ne faut pas oublier non plus de tester votre site sur diverses
résolutions d'écran, différentes palettes de couleurs et différents modes d'accès (haute−vitesse, modem).
Quelques sites Internet offrent de précieuses informations sur ce sujet :
• Bobby WorldWide (http://bobby.cast.org/html/en/index.jsp)

• NetMechanic (http://www.netmechanic.com/)
• Web AIM (http://www.webaim.org/)
• Web Accessibility Initiative (http://www.w3.org/WAI/)
• Service de validation CSS du W3C (http://jigsaw.w3.org/css−validator/)
• Favelets (http://tantek.com/favelets/)
Accessibilité 138
Guide Web Éducatif
Fonctionnement
L'implantation d'un site Web se fait d'abord localement, afin de vérifier que tout fonctionne bien. Pour ce
faire, on prépare une mise à l'essai restreinte avec quatre à huit personnes qui possèdent :
• Des connaissances diverses du réseau Internet et des environnements Web, et ce, afin de déceler des
problèmes de structure, de navigation ou d'ergonomie.
• Des plates−formes informatiques, des modems ainsi que des navigateurs différents pour identifier tout
problème de transfert, d'affichage, de bon fonctionnement des applications interactives, etc.
Cette évaluation doit être structurée sur une grille qui identifie chaque point que l'on souhaite évaluer. Pour
vous aider, voici une grille type :
TEST DE FONCTIONNEMENT
Remarque
Merci de participer à cette évaluation technique de notre site.

Nous vous demandons de faire le tour complet des liens internes,
de vérifier la fonctionnalité des liens externes ainsi que des outils
interactifs et de noter toutes les défaillances, afin de nous
permettre d'y apporter les corrections nécessaires.
Identification
Nom du site à évaluer :
Adresse : URL : http://
Date :
Version :
Nom de l'évaluateur :
Courriel :
Connaissance du réseau
aucune peu moyenne excellente
Internet :
Équipement
Type d'ordinateur
utilisé :
Système d'exploitation :
Nombres de RAM : Vitesse :
Grandeur de l'écran : Résolution :
Nom du navigateur et
version :
Fonctionnement 139
Guide Web Éducatif
Connexion
Nombre de
modem :
bauds :
carte réseau : Mégabits/sec. :
modem−câble :
Mégabits/sec. :
(Vidéotron)
Évaluation technique du site

Perception générale de
médiocre bonne excellente
l'interface :
Satisfaction à l'égard de la
médiocre bonne excellente
navigation :
Qualité technique du site : médiocre bonne excellente
Le temps d'accès en général
long acceptable rapide
est :
Y a−t−il des problèmes de transfert ? oui non
Spécifiez :
Y a−t−il des chemins en cul−de−sac ? oui non

Identifiez :
Y a−t−il des interactions qui n'ont pas

oui non
fonctionné ?
Identifiez :
Avez−vous constaté des erreurs de

fonctionnement oui non
(type 404 et autres) ?
Identifiez :
Commentaires :
À la suite de cette évaluation, le concepteur pourra plus facilement procéder aux corrections et aux
ajustements technologiques qui s'imposent pour l'accessibilité et le bon fonctionnement de son site éducatif.
Fonctionnement 140
Guide Web Éducatif
Évaluer un site éducatif

Grille d'évaluation pédagogique et technique d'un site Web éducatif
Conçue par : Denyse Gilbert

Spécialiste en application pédagogique des technologies
de l'information et des communications (APTIC)
Identification de l'évaluation
Évaluation réalisée par : Date (jj−mm−aaaa) :

__________________________ ________________
Connaissance du réseau Internet

(encerclez) :
Aucune
Peu
Moyenne
Excellente
Équipement informatique
Type d'ordinateur utilisé : __________________________

Système d'exploitation : __________________________
Taille de la mémoire vive : _________________________
Vitesse : __________________________
Taille de l'écran : 15" 17" 21" (Encerclez)
Couleurs : 256 couleurs millier de couleurs millions de
couleurs (Encerclez)
Résolution : 800x600 1024x768 1152x870 (Encerclez)
Type de connexion utilisée :

modem : ____________ nombre de bauds : _______________
carte réseau : ____________ mégabits : _______________
modem−câble : ____________ mégabits : _______________
Nom et version du navigateur :

Netscape : ____ Version : ________
Explorer : ____ Version : ________
Autres (spécifiez) : ______________________________
Identification du site
Évaluer un site éducatif 141

Guide Web Éducatif
Nom du site : ______________________________

Adresse URL : HTTP :// ______________________________
Lieu : ______________________________
Date de mise à jour : ________________________ (jj−mm−aaaa)
Nom du responsable et/ou du créateur du site :
______________________________
Courriel : ______________________________
Langue : Français _____ Anglais _____ Autres _____
Intérêt pédagogique : ______________________________
Clientèle visée : ______________________________
Les objectifs
Cochez la note que vous accordez pour chaque item.
Signification :
1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement
Générale 1 2 3 4 5 n/a
Les objectifs du
.
site sont énoncés
Les objectifs du
site sont formulés
.
en termes
compréhensibles
Les objectifs
d'apprentissage
. sont adéquatement
identifiés au début
de chaque chapitre
Signification :
Crédibilité, validité et
1 2 3 4 5 n/a
actualisation du site
Le concepteur du
.
site est crédible

Guide Web Éducatif
Le contenu du site
.
est valide
Le contenu du site
.
est actualisé
Le concepteur
connaît bien son
.
sujet et s'exprime
clairement
Remarque
Tout le monde peut créer un site Web et diffuser de l'information. Pour vérifier la crédibilité d'un site, il faut
se questionner sur la compétence et l'expertise que peut avoir le concepteur.
Un contenu valide est bâti sur des éléments fiables.
Un site doit être mis à jour fréquemment.
Clientèle visée et préalables

1 2 3 4 5 n/a
informations
La clientèle visée est
.
clairement définie
Le contenu du site est
. adéquat pour cette
clientèle
L'équipement nécessaire
pour naviguer dans le
document est spécifié (le
type de navigateur, sa
. version, le type
d'équipement
informatique, les
applications ou les
plugiciels, etc.)
Signification :

Guide Web Éducatif
Le contenu 1 2 3 4 5 n/a
Le contenu
transmis
. correspond
adéquatement aux
objectifs
Le contenu du site
. est suffisamment
détaillé
L'organisation du
. contenu est
cohérente
La bibliographie et
les sources
. documentaires sont
correctement
identifiées
Les textes sont
structurés en
capsules
.
suffisamment
claires et
compréhensibles
Le contenu est
. rédigé dans un
français correct
La structuration du
. contenu favorise
l'apprentissage
L'information est
suffisante (sans
. surcharge
d'informations
inutiles)
Les stratégies
1 2 3 4 5 n/a
pédagogiques
Les stratégies
pédagogiques
.
proposées sont de
qualité

Guide Web Éducatif
Les stratégies
pédagogiques
sont diversifiées
(elles permettent
.
de répondre aux
différents styles
d'apprentissage
de la clientèle)
L'étudiant a accès
. à un calendrier
des activités
Signification :
Les stratégies
1 2 3 4 5 n/a
pédagogiques (suite)
Les activités
d'apprentissage et
.
les exercices sont
pertinents
Les activités
d'apprentissage et
les exercices sont
.
présents à la fin
de chaque module
ou section
Le degré de
difficulté des
. activités
d'apprentissage
est adéquat
Les évaluations
fournissent à
. l'étudiant une
rétroaction
appropriée
L'utilisation des
différents outils
.
multimédias est
efficace

Guide Web Éducatif
Le rythme
d'apprentissage
.
suggéré est
réaliste
Les méthodes
utilisées pour
.
susciter l'intérêt
sont efficaces
Les stratégies
d'apprentissage
sont diversifiées
. pour tenir compte
des différents
styles
d'apprentissage
Le nombre
d'activités
d'apprentissage
.
est adéquat et
couvre bien toute
la matière vue
Les méthodes
d'évaluation
utilisées
.
permettent de
voir les objectifs
atteints
Le scénario
d'apprentissage
.
est cohérent avec
les objectifs
Signification :
L'interactivité 1 2 3 4 5 n/a
L'étudiant a un
contrôle sur son
.
cheminement
dans le site
.

Guide Web Éducatif
Les rétroactions
sont appropriées
L'étudiant peut
. bâtir son plan de
route personnel
Des choix
stratégiques pour
. un apprentissage
individualisé sont
proposés
Les éléments
. interactifs utilisés
sont pertinents
Les éléments
interactifs
.
fonctionnent
adéquatement
Remarques :
________________________________________________
________________________________________________
________________________________________________
Signification :
La navigation 1 2 3 4 5 n/a
En entrant dans le
site, vous avez accès
. à un plan clair ou à
une table des
matières détaillée
Les choix proposés à
. l'intérieur des menus
sont clairs
. Les regroupements
des éléments à
l'intérieur des menus

Guide Web Éducatif
sont cohérents
On peut se diriger
rapidement vers une
information
. spécifique grâce au
menu ou aux outils
de la barre de
navigation
Chaque page
. possède une barre de
navigation détaillée
Les icônes ou
boutons de
.
navigation sont
explicites
Dans chaque
page−écran, il est
.
spécifié à quelle
section on se trouve
On peut facilement
. revenir au menu
principal
On peut revoir les
. pages de consignes
en tout temps
L'emplacement des
boutons de
. navigation est
uniforme sur les
pages−écrans
On peut facilement
revenir à la page de
base après avoir
. consulté un
hypertexte ou un
hypermédia de cette
page
Les liens hypertextes
et hypermédias sont
.
efficaces, pertinents
et logiques
Les pages−écrans
. sont rapidement
téléchargées

Guide Web Éducatif
Signification :
Graphisme et
1 2 3 4 5 n/a
multimédia
Le graphisme des
. pages−écrans est
uniforme
La mise en pages
.
facilite la lecture
Les pages−écrans
.
sont équilibrées
Les illustrations,
les schémas et les
. graphiques sont
suffisamment
précis
Le choix des
couleurs permet de
.
lire facilement la
page−écran
Le son et la vidéo
apportent une
.
contribution
significative au site
La grosseur du
fichier multimédia
(séquence vidéo,
animation, etc.) à
. transférer ainsi que
le plugiciel
nécessaire, s'il y a
lieu, sont indiqués
adéquatement
Les hypertextes ou
. les hypermédias
sont justifiés
. L'utilisation des
différents objets

Guide Web Éducatif
multimédias est
efficace
Les pages−écrans
. sont lisibles à
l'impression
L'animation est
. utilisée de façon
adéquate
Le son et/ou la
. vidéo sont de
bonne qualité
Signification :
Appréciation générale 1 2 3 4 5 n/a

Appréciation personnelle :
. intérêt soulevé, dynamisme
du site
. Satisfaction pédagogique
Perception générale de
.
l'interface
Satisfaction à l'égard de
.
l'interface
Oui Non
Évaluation technique du site n/a
2pts 0pts
L'adresse Web est−elle facile à retenir
.
(adresse intuitive) ?
Le temps de transfert des pages−écrans
.
est−il adéquat ?
Avez−vous eu des problèmes de
transfert ?
.
Spécifiez :
_______________________________
.

Guide Web Éducatif
Peut−on télécharger les documents du

site pour l'impression ?
L'impression de la page−écran est−elle
. adéquate
(la page est entière et lisible) ?
Avez−vous identifié des chemins en
cul−de−sac ?
.
Identifiez :
_______________________________
Avez−vous constaté des erreurs de
fonctionnement (type 404 et autres) ?
.
Identifiez :
_______________________________
Les éléments multimédias sont−ils
accessibles sans avoir à faire
. l'installation de plugiciels ? Sinon,
quels plugiciels avez−vous installés :
_______________________________
Lorsqu'il est nécessaire d'installer des
plugiciels, avez−vous réussi sans
. difficulté à faire fonctionner les
applications qui demandent un
plugiciel ?
Commentaires
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Analyse des résultats
Additionnez le total des points et divisez−le par 4
81 à 100 Ce site est une excellente ressource pédagogique.

61 à 80

Guide Web Éducatif
Ce site possède des éléments intéressants malgré

certaines faiblesses.
41 à 60 Ce site est de catégorie moyenne.
0 à 41 N'inscrivez pas ce site dans vos signets.
Cette grille d'évaluation d'un site Web éducatif peut être adaptée selon vos besoins.
Denyse Gilbert,
Spécialiste en APTIC
Université Laval

Guide Web Éducatif

Bibliographie
• APPLE COMPUTER INC., Macintosh human interface guidelines, Reading (MA), Addison−Wesley,
1992, 384 p.
• BROWN, N., P. CHEN, P. MILLER et alt., Animation de vos sites web, Paris, Simon & Schuster
Macmillan, 1996, 370 p.
• CARON, Rosaire. «Comment citer un document électronique?». In Université Laval. Bibliothèque.
Site de la Bibliothèque de l'Université Laval, [En ligne].
http://www.bibl.ulaval.ca/doelec/citedoce.html [Page consultée le 8 octobre 2002].
• GILBERT, Denyse, Planifier le développement d'une application pédagogique de l'ordinateur, 1995.
• HORN, Robert E., Mapping Hypertext, Waltham (MA), The Lexington Institute, 1989.
• HORTON, William K., Designing and writing online documentation, New York, Wiley, 1990,
464 p.
• IMAGINANCE, All HTML COM : Le portail dédié aux Webmasters, [en ligne].
http://www.allhtml.com/ [site consulté le 8 octobre 2002].
• LAUREL, Brenda, The art of human−computer interface design, Reading (MA), Addison−Wesley,
1990, 523 p.
• LYNCH, Patrick J. et Sarah HORTON, Web Style Guide : Basic Design Principles for Creating
Web,[en ligne]. http://info.med.yale.edu/caim/manual/contents.html [site consulté le 8 octobre 2002].
• MARKULA, Tapio, Introduction to CSS, [en ligne]. http://www.nic.fi/~tapio1/Teaching/index1.php3
[site consulté le 8 octobre 2002].
• NIEDERST, Jennifer, Designing for the Web, Sebastopol (CA), O'Reilly, 1996, 180 p.
• NIEDERST, Jennifer, Web Design in a Nutshell, Sebastopol (CA), O'Reilly, 1999, 562 p.
• OFFICE QUÉBÉCOIS DE LA LANGUE FRANÇAISE, Vocabulaire d'Internet : banque de
terminologie du Québec, [en ligne].
http://www.olf.gouv.qc.ca/ressources/bibliotheque/dictionnaires/Internet/Index/index.html [site
consulté le 8 octobre 2002].
• O'REILLY, O'Reilly Network, [en ligne]. http://www.oreillynet.com/ [site consulté le 8 octobre 2002].
• RHÉAUME, Jacques, Technique de design et d'écriture d'hypertexte, [en ligne].
http://www.fse.ulaval.ca/fac/ten/cours/html/horn.html [site consulté le 8 octobre 2002].
• SCHNEIDERMAN, Ben, Designing the user interface, 3nd edition, Reading (MA),
Addison−Wesley, 1998, 639 p.
• SIEGEL, David, Casbah, [en ligne]. http://www.dsiegel.com/ [site consulté le 8 octobre 2002].
• STEMP, J. et Y. BODAIN, Stratégie de développement de sites Web, Centre de recherche en
informatique de Montréal, 1997.
• TEAM IDEENREICH, Sites Web Pros, Paris, Micro Application (Grand Livre), 2000, 450 p.
• THOT CURSUS, Thot : Nouvelles de la formation à distance, [en ligne]. http://thot.cursus.edu/ [site
consulté le 8 octobre 2002].
• WEINMAN, Linda, Conception graphique de vos pages web, développer images et multimédia sur le
web, Paris, Simon & Schuster MacMillan, 1996.
• WILLIAMS, Robin et John TOLLETT, Réussir le design de son site, Paris, CampusPress, 2000,
280 p.
• WOOLLEY, David R., Forum Software for the Web, [en ligne].
http://www.thinkofit.com/webconf/forumsoft.htm [site consulté le 8 octobre 2002].
• WORLD WIDE WEB CONSORTIUM, Cascading Style Sheets home page, [en ligne].
http://www.w3.org/Style/CSS/ [site consulté le 8 octobre 2002].
• WORLD WIDE WEB CONSORTIUM, HyperText Markup Language (HTML) home page, [en
ligne]. http://www.w3.org/MarkUp/ [site consulté le 8 octobre 2002].
Bibliographie 154

Guide We Be Ducat If

Uploaded by

Document Information

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Guide We Be Ducat If

Uploaded by

Copyright:

Denyse Gilbert

Spécialiste en applications pédagogiques des

Table des matieres

Table des matieres

Table des matieres

Tous du Réseau de valorisation de l'enseignement, Université Laval, Québec, Canada

Collaborateurs des versions antérieures

Pascal Brochu, analyste de l'informatique

Analyser les besoins de la clientèle

À quels besoins le site éducatif que je veux développer va−t−il répondre ?

Pourquoi utiliser le réseau Internet ?

• Pour permettre l'apprentissage à distance ?

Analyser les besoins de la clientèle 8

• Quels sont les concepts abstraits difficiles à traiter en classe ?

Ces avantages sont−ils supérieurs à ceux des autres moyens didactiques ?

La question fondamentale est donc celle de la valeur ajoutée :

− Qu'est−ce que l'utilisation du réseau Internet va apporter aux méthodes traditionnelles ?

− Qu'est−ce qui va motiver l'étudiant à utiliser couramment mon site Web ?

Quel est mon public cible ?

(Étudiants sur le campus, étudiants à distance, grand public, etc.)

• Avez−vous pensé où les étudiants devraient accéder à un ordinateur ?

Analyser les besoins de la clientèle 9

Quelle est la répartition du temps de réalisation d'un tel projet ?

• Phase 1 : L'analyse du besoin et de la pertinence pédagogique : 10 % du temps.

NOTE : Il faut également prévoir du temps pour les mises à jour.

Analyser les besoins de la clientèle 10

(http://www.lotus.com/products/learnspace.nsf/wdocs/homepage) et WebCT (http://www.webct.com/). Ces

Analyser les besoins de la clientèle 11

Inventorier les ressources

1. Un spécialiste du contenu, c'est−à−dire le professeur et quelquefois un auxiliaire de recherche. Il a

Il faut inventorier les ressources technologiques de son environnement :

• Ai−je accès à certains équipements ou périphériques, tels un numériseur, un appareil photo

Inventorier les ressources 12

Cependant, la prudence est de rigueur dans l'utilisation de coquilles ou de systèmes intégrateurs. La

Inventorier les ressources 13

Analyser les coûts

Analyser les coûts 14

Analyser les coûts 15

Le design pédagogique se réalise en plusieurs étapes, soit :

• L'identification du but et des objectifs spécifiques de formation.

Définir le but et les objectifs

Les objectifs spécifiques doivent être rédigés en termes mesurables.

• Nommer les quatre phases de développement d'un site éducatif.

Définir le but et les objectifs 17

Voici quelques règles :

• Soyez bref et précis;

• La structuration du contenu en unités logiques;

Élaborer les stratégies pédagogiques

Les stratégies pédagogiques peuvent être :

Élaborer les stratégies pédagogiques 19

Voici quelques exemples de structures d'information :

Il faut prévoir l'accès à un menu général et à la page d'accueil.

Elle a pour objectif :

Un bon système de navigation repose sur :

Exemple : menu du site Web du cours « Initiation aux vins »

Concevoir les pages−écrans

Rédiger les pages−écrans

Concevoir les pages−écrans 26

Voici ce à quoi peut ressembler une maquette papier :

Concevoir les pages−écrans 27

dépend de la structure de votre gabarit de mise en pages.

Dimensions sécuritaires pour afficher l'information dans les pages Web

Concevoir les pages−écrans 28

Titre en format texte

Voici un gros titre

Voici un titre assez gros

Voici un titre moyen