Denyse GilbertSpécialiste en applications pédagogiques des

technologiesde l'information et de la communication (APTIC)

Université Laval, Québec, Canada

Tous les droits de reproduction sont autorisésavec mention de la référence

http://www.aptic.ulaval.ca/guidew3educatif/Commentaires : Denyse.Gilbert@aptic.ulaval.ca

Table des matieresAvant−propos......................................................................................................................................................1

Objectif de ce guide.............................................................................................................................................3

Équipe de réalisation..........................................................................................................................................5

Analyse.................................................................................................................................................................7Analyser les besoins de la clientèle.........................................................................................................8Inventorier les ressources.......................................................................................................................12Analyser les coûts..................................................................................................................................14

Design pédagogique..........................................................................................................................................16Définir le but et les objectifs..................................................................................................................17Structurer le contenu..............................................................................................................................18Élaborer les stratégies pédagogiques.....................................................................................................19Concevoir le site....................................................................................................................................20

La structure...............................................................................................................................21La page d'accueil.......................................................................................................................22La navigation............................................................................................................................23La présentation du site..............................................................................................................24Les annexes...............................................................................................................................25

Concevoir les pages−écrans...................................................................................................................26En−tête......................................................................................................................................29Corps de la page........................................................................................................................32Pied de page..............................................................................................................................34

Définir l'ergonomie................................................................................................................................36Le texte.....................................................................................................................................37

La typographie.............................................................................................................38Disposition du texte.....................................................................................................39Numériser un texte.......................................................................................................41

La couleur.................................................................................................................................42La mise en pages.......................................................................................................................44

Taille d'une page..........................................................................................................45Le tableau.....................................................................................................................47Les cadres....................................................................................................................48Les formulaires............................................................................................................51

L'image.....................................................................................................................................52L'image graphique.......................................................................................................55L'image photographique..............................................................................................56L'icône graphique........................................................................................................57La carte image..............................................................................................................58L'image d'arrière−plan.................................................................................................59L'image animée............................................................................................................60

Outils de communication.......................................................................................................................61Le courrier électronique............................................................................................................62Les listes de distribution...........................................................................................................64Les forums de discussion..........................................................................................................65Les forums de clavardage.........................................................................................................68

Guide Web Éducatif

i

Table des matieresDesign pédagogique

La messagerie instantanée ICQ.................................................................................................69

Production.........................................................................................................................................................71Encodage................................................................................................................................................72

HTML.......................................................................................................................................73XHTML....................................................................................................................................75Cascading Style Sheets.............................................................................................................77XML..........................................................................................................................................78WML.........................................................................................................................................80

Multimédia.............................................................................................................................................81Le son........................................................................................................................................82

AIFF.............................................................................................................................84µ−LAW........................................................................................................................85Liquid Audio................................................................................................................86MPEG..........................................................................................................................87MIDI............................................................................................................................88RealAudio....................................................................................................................89Wave............................................................................................................................90Windows Media Audio................................................................................................91Ogg Vorbis...................................................................................................................92

La vidéo....................................................................................................................................93MPEG..........................................................................................................................95QuickTime...................................................................................................................96RealVideo....................................................................................................................97Windows Media Video (WMV)..................................................................................98

L'animation...............................................................................................................................99Flash...........................................................................................................................100Director......................................................................................................................102Java............................................................................................................................103VRML........................................................................................................................104Logiciels de dessin.....................................................................................................106

Autres types de documents.....................................................................................................107Acrobat......................................................................................................................108PowerPoint.................................................................................................................109

Interactivité côté client.........................................................................................................................110JavaScript................................................................................................................................111DHTML..................................................................................................................................113VBScript.................................................................................................................................114Java.........................................................................................................................................115Composante intégrée...............................................................................................................116

ActiveX......................................................................................................................117JavaBeans..................................................................................................................118

Interactivité côté serveur......................................................................................................................119Server Side Includes...............................................................................................................120CGI..........................................................................................................................................121PHP.........................................................................................................................................122ASP.........................................................................................................................................123

Guide Web Éducatif

ii

Table des matieresProduction

JSP..........................................................................................................................................125Base de données......................................................................................................................126

Expérimentation..............................................................................................................................................129Mise en ligne........................................................................................................................................130

Le serveur...............................................................................................................................131Gestion des fichiers.................................................................................................................132Indexation...............................................................................................................................133Statistiques..............................................................................................................................135

Test.......................................................................................................................................................136Validité du code......................................................................................................................137Accessibilité............................................................................................................................138Fonctionnement......................................................................................................................139

Évaluer un site éducatif........................................................................................................................141

Bibliographie...................................................................................................................................................154

Guide Web Éducatif

iii

Avant−proposLes 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é croissantedans 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 audé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 etdes communications (APTIC), les besoins de formation des professeurs dans ce domaine et le peu dedocumentation française à jour disponible sur le sujet, que nous est venue l'idée d'élaborer le Guide deconception pédagogique et graphique d'un site éducatif sur le réseau Internet. Ce guide a ceci departiculier : il se renouvelle constamment, au rythme de l'évolution et des développements fulgurants de latechnologie 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 nombreuxutilisateurs du Québec, du Canada et de plusieurs pays de la francophonie, non seulement de mieuxcomprendre le langage parfois hermétique associé à ce merveilleux outil d'apprentissage, mais aussi d'adaptercelui−ci à leurs besoins en matière de pédagogie. Notamment, notre guide a été reconnu par le programmeInformation Society and Development (ISD) comme ayant un grand intérêt pour la formation des cadres despays 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 parles 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 programmeInfodev (Banque Mondiale), du Ministère des Affaires étrangères français (mission des nouvellestechnologies), de l'INTIF (Institut francophone des technologies de l'Information, AgenceIntergouvernementale de la Francophonie) et de l'IRD (Institut de Recherche pour le Développement). Ils'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 leréseau Internet a été conçu dans le respect de ce qui doit constituer selon nous le fondement de la philosophiede l'Internet, soit un partage désintéressé de l'information. Il est donc accessible à tous et tient compte dessuggestions et de l'expérimentation pédagogique des utilisateurs. En cela, il contribue au rayonnement denotre 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 unenvironnement dynamique de recherche et de création.

Denyse GilbertSpécialiste des applications pédagogiquesdes technologies de l'information et des communicationsUniversité Laval

Avant−propos 1

Guide Web Éducatif

Avant−propos 2

Objectif de ce guideLe but du Guide de conception pédagogique et graphique d'un site éducatif sur le réseau Internet est devous permettre de maximiser l'apport pédagogique et l'aspect graphique de votre site éducatif sur réseauInternet.

La qualité d'un site pédagogique sur Internet repose principalement sur l'organisation de l'information, tanttextuelle que graphique, sur la flexibilité de la navigation et sur l'interactivité. C'est donc en ce qui a trait à cesaspects particuliers que le guide entend faciliter la tâche du concepteur, grâce à un plan de conception et desrecommandations.

Le guide a été préparé par une équipe détenant une expertise en APTIC. Cette équipe est composée d'unespécialiste en applications pédagogiques des technologies de l'information et des communications, d'analystesde 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 endesign 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 enfonction des développements technologiques en émergence sur le réseau Internet, des recherches enapplications pédagogiques, des technologies de l'information et aussi de vos propres expérimentationspé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 apparaissantau bas de la page.

Objectif de ce guide 3

Guide Web Éducatif

Objectif de ce guide 4

Équipe de réalisationVersion 4.1

Denyse Gilbert,Spécialiste en applications pédagogiques des technologies de l'information et des communicationsVolet pédagogique et technologique

Gilbert Sévigny,Conception graphique du siteVolet image

Éric Thibault,Conception informatique du siteVolet informatique

Nicolas St−Laurent,Mise à jour du siteVolet 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'informatiqueGuillaume Germain, analyste de l'informatiqueBruno Tremblay, analyste de l'informatiquePhilippe−Alexandre Gilbert, analyste de l'informatiqueSamuel Pelletier, analyste de l'informatiqueJérôme Thibaudeau, Spécialiste en communicationAndrée Verville, technicienne en informatiqueMarie−Christine Girard, réviseure−correctrice

Équipe de réalisation 5

Guide Web Éducatif

Équipe de réalisation 6

AnalyseVous 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 del'apport pédagogique souhaité, il est important de s'assurer que les objectifs poursuivis sont plus inspirés par lapédagogie que par la technologie.

Le réseau Internet offre de nombreux services tels le courrier électronique, les groupes de discussion, le FTPet le Web. Chacun de ces services possède des caractéristiques qui pourraient être exploitées dans un contextepé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

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éussitede votre projet. En répondant aux questions qui suivent, vous pourrez rédiger un plan directeur qui vousservira lors de la prise de décisions. Le témoignage de collègues ayant une expérience pratique ou laconsultation 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 lesdiscussions 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 1Ce 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 2En 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.◊

Guide Web Éducatif

Analyser les besoins de la clientèle 8

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 desconcepts ?

•

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 fairedé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 sonavenir ?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'estpeut−être pas nécessaire. En effet, la version papier est plus efficace compte tenu de son accessibilité, de lapossibilité 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 versiontéléchargeable. Cependant, le site Web ne devrait pas se limiter à faciliter la gestion du document papier. Cefait 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 à lademande 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

Analyser les besoins de la clientèle 9

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 leplus 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èmesd'aide et de support à l'apprentissage, il serait préférable de vous tourner vers le développement d'uneapplication pédagogique multimédia sur support CD−ROM. En effet, le réseau Internet, malgré son évolutionrapide, 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 souventl'expertise de spécialistes. La production des pages−écrans en langage HTML est très simple, maisdès que de l'interactivité de haut niveau est requise, il faut recourir à un informaticien qui connaît deslangages 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 à corrigerl'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 del'éducation. Parmi ceux−ci, notons Learning Space

Guide Web Éducatif

Analyser les besoins de la clientèle 10

(http://www.lotus.com/products/learnspace.nsf/wdocs/homepage) et WebCT (http://www.webct.com/). Cesoutils font gagner un temps considérable au niveau de la conception et de la réalisation de l'interface et de lanavigation, mais ils exigent en retour de se plier à leurs règles de fonctionnement. De plus, ils nécessistent untemps d'apprentissage des commandes du logiciel, d'autant qu'ils ne sont pas tous d'une très bonneconvivialité.

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 contreditl'encadrement des étudiants par courriel ou par forum.

Guide Web Éducatif

Analyser les besoins de la clientèle 11

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 à refairedu matériel déjà disponible. C'est à partir de nos objectifs généraux que des champs de recherche sont fixés etque le matériel pertinent est sélectionné. Celui−ci devra être analysé afin de s'assurer qu'il répond bien à nosbesoins.

Si le matériel sélectionné ne répond pas exactement à vos besoins, vous pouvez entrer en communication avecson concepteur afin d'ajuster ce matériel selon vos besoins. Si cela s'avère impossible, vous devrez évaluer sice matériel est vraiment nécessaire, s'il peut être utilisé tel quel malgré tout ou s'il faut en créer une nouvelleversion.

La réalisation du site nécessite un plan sommaire de son contenu en fonction des objectifs fixés et de laclientèle visée. Vous devrez rassembler et faire l'inventaire de l'ensemble du matériel existant, tant textuel quegraphique, qui sera diffusé sur le réseau Internet. Par la suite, les éléments manquants seront identifiés afin depré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èderarement. 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 :

Un spécialiste du contenu, c'est−à−dire le professeur et quelquefois un auxiliaire de recherche. Il apour tâches principales :

d'identifier les objectifs;1. de concevoir le contenu pédagogique, les activités d'apprentissage et d'évaluation;2. de définir l'encadrement.3.

1.

Un spécialiste en applications pédagogiques des technologies de l'information et de la communicationqui aide :

à l'identification des objectifs;1. à la structuration du contenu;2. au design pédagogique et graphique du site éducatif;3. à la conception des activités d'apprentissage, des outils interactifs et des évaluations;4. à la conception de l'organigramme;5. à la gestion du projet;6. à l'évaluation et l'implantation du site éducatif, etc.7.

2.

Une équipe multimédia qui réalise du matériel de qualité adapté pour les sites Web (mise en pages dutexte, image, son, vidéo, animation).

3.

Un informaticien qui programme les pages−écrans, l'interactivité, la gestion du site, etc.4.

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 photonumérique, etc. ?

•

Guide Web Éducatif

Inventorier les ressources 12

Mon institution ou mon organisme soutiennent−ils certains logiciels auxquels j'aurais accès etappuis ?

•

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 ensembled'outils pour la plupart disponible sur Internet (Exemples : des gabarits de forum de discussion, des outilspour 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. Latransposition d'un site Web existant dans le gabarit recommandé pour ce type de système peut−être ardu. Ilfaut investir un temps d'apprentissage du logiciel intégrateur et dans le cas de WebCT, il faut aussi apprendreun autre logiciel pour l'édition de pages Web et connaître les principales balises HTML. Finalement, il fauts'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 surThot (http://thot.cursus.edu/rubrique.asp?no=17216). Si vous n'utilisez pas de systèmes intégrateurs, sachezque le Web recèle plusieurs outils qui permettent d'améliorer la valeur d'un site éducatif. Par exemple, il existeHot Potatoes (http://web.uvic.ca/hrd/hotpot/) et Netsquiz (http://www.ccdmd.qc.ca/netquiz/), deux outilsextrêmement simples d'utilisation qui permettent la réalisation de tests interactifs. Il existe aussi une multitudede 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 logicielintégrateur que de devoir retravailler chaque page pour enlever la navigation, les menus, etc., pour ensuitel'incorporer au logiciel intégrateur.

Guide Web Éducatif

Inventorier les ressources 13

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 seradonc subdivisé entre la rédaction du contenu, la production du matériel multimédia et la programmation. Pourobtenir une évaluation assez juste des coûts de production de votre site éducatif, il est nécessaire dedé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, deproduction 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 totalmoyen pour un site Web s'élève à plus de 15 000 $.

Guide Web Éducatif

Analyser les coûts 14

Guide Web Éducatif

Analyser les coûts 15

Design pédagogiqueUne fois l'analyse des besoins terminée et la pertinence du projet confirmée, l'étape suivante est la conceptiondu 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'atteindreles 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 pouratteindre vos objectifs. Il est donc primordial de connaître les spécificités de chaque médium afin demaximiser son utilisation pédagogique.

•

La conception de l'organigramme complet, de la navigation et de liens logiques du site afin depermettre à 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

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 atteindreles objectifs par des moyens traditionnels. On peut aussi utiliser les TIC pour diversifier nos stratégiesd'enseignement et d'apprentissage, ainsi les étudiants peuvent faire des simulations pour mieux comprendredes 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 puisles 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 typed'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...•

Guide Web Éducatif

Définir le but et les objectifs 17

Structurer le contenu

Le document électronique a modifié la manière de lire des utilisateurs, par rapport à la version papier. Eneffet, sa lecture n'est plus linéaire et systématique. Pour réussir à motiver et à favoriser la lecture en ligne desdocuments, il faut adapter le texte au médium, ce qui signifie rendre l'information plus accessible, lasynthé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 planifierl'ordre de présentation. Ceci permet de concevoir un réseau représentant la structure de l'application et lescheminements 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. Lestextes sont analysés, résumés et découpés par tranche d'information. Cette démarche permet d'épurer lestextes, d'éliminer du contenu et, ainsi, de mieux cadrer les objectifs pédagogiques. Lorsque tout le contenu eststructuré, des unités sémantiques complètes et autonomes sont constituées, afin de faciliter le traitementmental 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 de28,5 % inférieure à celle de l'imprimé. Voilà donc une autre bonne raison de synthétiser le texte.

Guide Web Éducatif

Structurer le contenu 18

É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 sonapprentissage, 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 ousonores, etc.;

•

D'ajouter des hyperliens (réseaux de liens établis entre des mots, des images, des objets et des blocsd'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 desconnaissances;

•

D'offrir une version graphique et/ou texte.•

Guide Web Éducatif

Élaborer les stratégies pédagogiques 19

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ésentermentalement le site et lui assura un certain succès s'il est simple à opérer. Dans certains sites, la table desmatières, ou plan du site, sera utilisée pour permettre à l'utilisateur de voir la représentation mentale de notresite et faciliter la recherche d'informations. N'oubliez pas l'adage qui affirme que ce qui se conçoit clairements'énonce aisément.

Guide Web Éducatif

Concevoir le site 20

La structure

L'ergonomie de l'interface se définit comme l'ensemble des moyens mis en oeuvre pour guider et informerl'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 cheminementsintuitifs. Dans un site W3, cette considération est primordiale, étant donné que l'usager ne voit qu'une seulepage à la fois. Contrairement au livre, il est en effet difficile d'avoir une vue d'ensemble d'un site. Il faut aiderl'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é desliens de votre site. On dessine l'organigramme du site en créant tous les liens logiques, en évitant lesculs−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 mentalde 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 siteainsi que le menu principal. Le premier menu devrait regrouper les blocs d'information sous un maximum decinq à 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−menuset, lorsque cela est possible, d'intégrer un outil de recherche dans les sites qui possèdent un très gros volumede 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.

Guide Web Éducatif

La structure 21

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.

Guide Web Éducatif

La page d'accueil 22

La navigation

Il faut prévoir une méthode afin que l'utilisateur puisse naviguer entre les pages−écrans. Cette méthode se doitd'être la plus efficace possible, en fonction de l'organigramme du site. La méthode la plus courante estl'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 lamémoire à court terme de la majorité des individus ne peut retenir plus d'information. Il est recommandé destructurer l'accès à l'information en utilisant un maximum de trois niveaux de sous−menus. Lorsque cela estpossible, il faut intégrer un outil de recherche dans les sites qui possèdent un très gros volume depages−écrans.

Saviez−vous que ?

Selon plusieurs études, l'usager souhaite trouver son information en moins de trois clics, sans quoi il sort dusite.

Guide Web Éducatif

La navigation 23

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 decréer une page d'information sur votre site afin de lui donner toute sa crédibilité, définir ses objectifs et laclientè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'uncours, il serait intéressant de prévoir une démonstration du cours, de donner de l'information sur le contenu etsur les activités d'apprentissage, de créer un lien pour obtenir plus d'information sur le programme ou sur lafaculté qui offre le cours. Ceci permettrait aux internautes d'en savoir un peu plus sur ce site pédagogique. Deplus, puisqu'il existe de plus en plus de diplômes accessibles par le Web, votre cours pourrait avoir unevocation internationale.

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

Guide Web Éducatif

La présentation du site 24

Les annexes

Quelques sections utilitaires se rencontrent souvent sur un site Web. Elles sont à ajouter au besoin.

FAQLes 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 detrouver rapidement des solutions.

NouvellesLa section « Nouvelles » présente en général les communiqués et les mises à jour. Si votre site estsujet à de nombreuses mises à jour, cette section s'avère toute désignée afin de permettre à l'internautede trouver les nouveautés depuis son dernier accès.

Plan du siteUn site complexe peut offrir un plan qui présente l'ensemble des sections, sous−sections et liens quiles unissent dans un écran, ce qui permettra à l'utilisateur de trouver rapidement l'information qu'ildésire.

AideLorsque votre site possède une structure complexe ou une interface particulière, il est préférabled'ajouter une section d'aide pour faciliter l'intégration de l'utilisateur.

Plugiciels requisLorsque votre site nécessite des plugiciels pour son fonctionnement, il est souhaitable de faire la listede ces derniers et de créer un lien vers le site où il est possible de se les procurer. Il faut égalements'assurer que ces plugiciels fonctionnent tant sur Windows que sur Mac, et même sur Linux, sinécessaire.

Guide Web Éducatif

Les annexes 25

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 laproduction tant graphique qu'informatique et de concevoir sur papier le scénario ou le découpage despages−écrans de votre application. Chaque page−écran doit être considérée comme une unité autonomepossédant des identifications propres au site.

Lors de la conception des pages−écrans dans un environnement Web, il est important de tenir compte decertaines 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 enpages harmonieuse. On décidera de l'emplacement des logos principaux, des boutons de navigation et destitres 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 lesactivités d'apprentissage, etc.

Les éléments que l'on devrait trouver dans une page−écran sont :

En−têteTitre du document1. Bannière graphique2. Barre de navigation3.

1.

CorpsSous−titre et contenu du document1.

2.

Pied de pageNom de l'auteur1. Identification de l'organisme2. Droits d'auteur3. Date de mise à jour4.

3.

Note : chaque page−écran doit porter un nom significatif pour permettre à l'internaute d'enregistrer celui−cicomme 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 siteplus 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éablede naviguer à travers une collection d'information organisée de telle manière que l'apprenant puisse prévoir lastructure et les déplacements possibles.

Rédiger les pages−écrans

Guide Web Éducatif

Concevoir les pages−écrans 26

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 doitapparaître à l'écran et les branchements prévus. Rédigez les textes prévus, écrits ou verbaux, prévoyez leshypertextes, décrivez l'image fixe (à créer ou à digitaliser), les images en mouvement (vidéo ou animation parordinateur, à 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 del'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 auxdimensions de 750 x 450 pixels. À l'impression, le format de l'écran est réduit d'un certain pourcentage afin depermettre une impression de qualité en format lettre US (c'est−à−dire 535 par 670 pixels). Attention : cela

Guide Web Éducatif

Concevoir les pages−écrans 27

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ésenterl'information à l'intérieur des limites acceptables pour tous les types d'environnement. Cependant, il fautsavoir que votre site éducatif sera surtout consulté par des personnes ayant des ordinateurs portatifs, laré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

Concevoir les pages−écrans 28

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'untitre 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 sesubdiviser 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'informationdans lequel il se trouve. Faites attention de différencier ces codes de couleurs et les couleurs employées par leshyperliens.

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 labarre 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 à unmaximum 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 identificationsommaire est très importante puisque, contrairement à la manière de procéder avec les documents papier, onaccède à l'information de façon non linéaire dans un site Web et il est souvent difficile de s'y retrouver.

Guide Web Éducatif

En−tête 29

Recommandation

Les bannières graphiques doivent être créées en fonction de la largeur de la page−écran, soit en 750 pixels. Onlimite 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 unenvironnement non fonctionnel. Les utilisateurs seront obligés d'utiliser la barre horizontale de défilementpour 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 deneuf ? » 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 attirerl'attention sur cette section. Cette technique s'avère peu convaincante ; elle agresse plus qu'elle n'aidel'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 à comprendrecomment l'information est organisée. Les menus, la table des matières ou le plan du site lui permettent devisualiser l'ensemble du site et de se diriger. Une façon simple d'avoir accès à ces outils de navigation, en touttemps, 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 auxprincipaux 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 leWeb sont devenues une norme de facto. Par exemple, une maison identifie la page d'accueil et des flèchesillustrent bien l'action de reculer ou d'avancer d'une page−écran. Afin de s'assurer de la bonne compréhensiondes icônes du site, il est de mise de créer une page « Aide » qui définit toutes les icônes et leur action.

Guide Web Éducatif

En−tête 30

Pour aider les internautes à voyager à l'intérieur du site, il est indispensable de leur fournir une barre denavigation 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 denaviguer entre les pages du site. Les boutons de commande « avancer » et « reculer » des logiciels denavigation 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 sepromener 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ètementenchevêtrée. Les hyperliens n'ont pas la fonction d'outil de navigation. Leur utilisation excessive détruit lastructuration 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 radicalde 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. Ilcherchera 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 faitque 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 lasouris de votre ordinateur est à droite ainsi que la barre de défilement. Notre site emploie d'ailleurs cettetechnique. Ainsi, le côté gauche est réservé à l'information pertinente.

Guide Web Éducatif

En−tête 31

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éeset de les regrouper par thèmes ou sous−thèmes, qu'on identifie par un sous−titre au début de chaqueparagraphe. Ainsi, d'un seul coup d'oeil, l'internaute peut trouver une information spécifique. Cela accélère larecherche 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 ilfaut 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, unenote 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 » pourindiquer un lien vers une autre page. Des mots hyperliens ou des phrases faisant partie du contexte sontbeaucoup plus appropriés pour faire comprendre où on va après avoir cliqué sur le lien. On ne devrait pas fairemention 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 soulignele 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 parles titres le contenu d'une page ou d'un document. Il semble que les internautes ne lisent que rarement leslongues pages de textes sur ordinateur, ils préfèrent les imprimer pour les lire subséquemment si le contenuleur 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.

Guide Web Éducatif

Corps de la page 32

Saviez−vous que ?

La lecture sur un écran d'ordinateur provoque une grande fatigue oculaire, car le scintillement engendre uneperte de lisibilité d'au moins 30 %.

Il est donc déconseillé de transformer de très gros documents textes en format HTML. La plupart desapprenants 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 versd'autres pages. On doit donc sélectionner manuellement les pages−écrans à imprimer. Cette méthode est trèslongue 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.

Guide Web Éducatif

Corps de la page 33

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érations'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 decourrier électronique. Pour les sites plus complexes, une adresse générique peut être utilisée, le Webmestre sechargera 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 lacré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ésA priori, toutes les pages Web sont protégées par les droits d'auteur. Pour rappeler ces droits auxutilisateurs, il est bon de mettre dans tous les pieds de pages une mention « Copyright » désignantl'auteur et l'institution en tant que propriétaire de l'information contenue dans cette page.

Droits d'auteurs partagésSi, par contre, vous souhaitez que votre information puisse servir à la communauté Internet, il serabon de mentionner que « tous les droits de reproduction sont autorisés avec mention de laré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 laprovenance de ce matériel et les droits d'utilisation qui le régissent. Il existe des banques d'images oud'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 nonrespect des droits d'auteur, même ceux accessibles que par mot de passe.

Guide Web Éducatif

Pied de page 34

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. Tousne savent pas nécessairement que les logiciels de navigation permettent maintenant d'inclure automatiquementl'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 à jourde l'information. Cette date permet de savoir quelle version se trouve en ligne et au lecteur d'évaluer l'âge del'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 votresite, 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'estl'Internet. La multitude d'informations qu'on y retrouve est contrôlée par personne, ce qui signifie qu'on nepeut valider la véracité de cette information. C'est dans ce contexte que le pied de page prend toute sonimportance. Les informations transmises à l'internaute lui permettent de connaître l'origine du contenu d'unsite et de juger de sa validité.

Guide Web Éducatif

Pied de page 35

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 reposentsur elle.

Cette section du guide vous fournira les concepts de base de l'ergonomie d'un site Web, plus particulièrementsur le texte, la couleur, la mise en pages et l'image.

Guide Web Éducatif

Définir l'ergonomie 36

Le texte

Un texte informatique se destine soit à la lecture à l'écran soit à être imprimé. Il est conçu en fonction de sadestination.

Un texte lu à l'écran se doit d'être présenté sous forme de brèves capsules, l'écran étant un support plus petitque le papier et plus fatigant à consulter. De plus, ce texte peut profiter de l'apport du support informatiquenotamment l'hypertexte qui permet au lecteur d'approfondir le sujet. Un hypertexte est un texte dont certainesidées sont liées à d'autres textes par un hyperlien. En cliquant sur une idée soulignée, le texte lié estautomatiquement 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 lapossibilité 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 livrestransposés en document informatique Web sont peu efficaces. La lecture d'un livre est très différente de cellede pages sur écran informatique. Pour mieux comprendre comment traiter un texte dans un environnementinformatique, 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 ducontenu (phase 2). Une fois cette opération effectuée, la production graphique est planifiée.

Guide Web Éducatif

Le texte 37

La typographie

Un maximum de trois polices de caractères devrait être utilisé afin de conserver l'harmonie visuelle despages−é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 lasé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 etles 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érentesplates−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.

Guide Web Éducatif

La typographie 38

Disposition du texte

Il est possible de disposer un texte de plusieurs façons dans une page−écran. On peut l'afficher à la grandeurde l'écran, le disposer en tableau ou le structurer dans un environnement par cadre, mais toujours dans unobjectif 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ébutde 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 quelquesphrases. De plus, les paragraphes peuvent être dotés d'un interligne différent. Enfin, il ne faut pas oublier queles 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

Guide Web Éducatif

Disposition du texte 39

Un bon site n'affichera jamais un texte à la largeur de l'écran, mais placera un tableau invisible d'un maximumde 400 pixels.

Guide Web Éducatif

Disposition du texte 40

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 estalors représenté sur un mode photographique. Ce type de document est obtenu par numérisationdirecte du document (mode image).

•

Chaque caractère possède sa représentation unique sous forme numérique. Ce type de document enmode caractère est obtenu, soit par saisie directe par des outils de type traitement de texte, soit parreconnaissance 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 importantsqui occupent de la place sur les supports de stockage. Une page entière numérisée en mode image peutfacilement 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 ledocument électronique. En revanche, le mode texte ne permet pas de conserver parfaitement la présentationinitiale 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 textesCette technique est coûteuse en temps et en main−d'oeuvre, mais c'est la seule envisageable pour lanumérisation de textes manuscrits.

Utiliser un logiciel de ROCMieux connu sous le sigle anglophone OCR, cette technique utilise un document numérisé en modeimage. Le logiciel convertit la configuration des points en signes typographiques dont il déduit lavaleur 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 logicielsannoncent un haut degré de fiabilité, la perfection n'est pas atteinte, surtout lorsque la qualité dudocument 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 de99,95 %, ce qui ne représente pas plus d'une erreur pour 2000 signes. Les fabricants de logicielsd'OCR améliorent régulièrement leurs produits, notamment en ayant recours à des dictionnaires oudes outils d'analyse grammaticale. De plus, ce type d'approche est peu adapté aux documents quicomportent de nombreux noms propres, des formes grammaticales anciennes ou qui sont écrits enplusieurs langues.

Guide Web Éducatif

Numériser un texte 41

La couleur

La couleur du texte doit contraster avec le fond pour en faciliter la lisibilité. Idéalement, une typographiefoncé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'unetelle page−écran peut être illisible. En effet, la plupart des internautes configurent l'impression despages−écrans en noir et blanc afin d'accélérer le traitement. Ainsi, un texte clair sera de piètre qualité lorsd'une impression en noir et blanc.

Selon notre expérience, il semble que certaines associations de couleurs soient plus efficaces que d'autres pourfaciliter la lisibilité du texte :

Conseillé(couleur caractères−couleur

fond)

Violet sur fond blanc(330066−ffffff)

brun foncé sur fond gris−vert(330000−99CC99)

Vert foncé sur fond jaune pâle(003300−ffffcc)

Violet sur fond rose pâle(330066−ffcccc)

Blanc sur fond vert foncé(ffffff−006600)

Déconseillé(couleur caractères−couleur

fond)

Rouge sur fond vert(ff0000−00ff00)

Rouge sur fond bleu(ff0000−0000ff)

Vert pâle sur fond blanc(99FF33−ffffff)

Vert sur fond bleu(00ff00−0000ff)

Jaune sur fond vert(ffff00−00ff00)

Certains sites graphiques, tels que ceux qui sont indiqués dans la liste suivante, permettent de visualiserinstantané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 significationdes couleurs varie sensiblement entre les cultures. Par exemple, le blanc signifie pour les Occidentaux lanaissance tandis qu'au Japon, cette couleur est synonyme de deuil.

Recommandation

Guide Web Éducatif

La couleur 42

Il est recommandé d'utiliser une couleur de fond ayant la même teinte que le gris clair, utilisé par défaut par lamajorité des navigateurs, afin de s'assurer que la couleur du texte et des hyperliens par défaut (soit noir, bleuou violet) soit lisible sur toutes les plates−formes. Évitez les fonds à teintes de rouge ou de jaune, car celafatigue l'oeil.

Saviez−vous que ?

Saviez−vous que la luminosité des couleurs est plus intense sur un écran d'ordinateur de type Macintosh quesur 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'écrand'ordinateur. Il faut donc effectuer une vérification des pages Web, idéalement sur les trois principalestechnologies (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 en256 couleurs ainsi qu'en 16 couleurs et en noir et blanc. Un petit truc simple pour évaluer les contrastes de sapage−é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, peuimporte l'environnement où elles seront consultées, est d'utiliser la « Browser−Safe Color Charts ». Cettepalette de couleurs universelles dans l'environnement Web est disponible à l'URL :http://www.lynda.com/hex.html

Guide Web Éducatif

La couleur 43

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. Diversestechniques permettent de faciliter la mise en pages de l'information. De plus, quelques règles simples assurentun 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é quelorsque le contenu sera entièrement téléchargé. L'utilisation de multiples tableaux dans la même page vientpallier ce problème, car il permet une mise en pages efficace et un téléchargement rapide.

Guide Web Éducatif

La mise en pages 44

Taille d'une page

Il existe 4 facteurs à considérer quant à la longueur de la page :

La relation entre la page et la grandeur de l'écran;1. Le contenu particulier du document;2. Le type de consultation souhaité : une lecture à l'écran ou un téléchargement;3. Le type de connexion utilisé par les usagers.4.

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'elledescend 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'écransdisponibles sur le marché. À l'heure actuelle, il est conseillé de construire le site en fonction d'un écran de 15pouces (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 largeurde 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éconisel'utilisation maximale de deux pages−écrans pour afficher le contenu d'une page, ce qui équivaut à une pagede format lettre. Cela facilite l'impression et réduit la difficulté de lire à l'écran.

Guide Web Éducatif

Taille d'une page 45

Différentes résolutions selon le type d'écran :

Écran 14 pouces (640 par 480 pixels)• Écran 15 pouces (800 par 600 pixels)• Écran 17 pouces (1024 par 768 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. Sivotre clientèle inclut des utilisateurs d'ordinateur portable, veillez à limiter la résolution de votre page Web.

Guide Web Éducatif

Taille d'une page 46

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éspeuvent être insérés au sein des cellules. Le tableau peut inclure un titre, un en−tête aux colonnes ou auxlignes, des cellules au fond coloré ou du texte en couleur. De plus, il est possible de modifier l'apparence desbordures, la largeur des colonnes ou l'alignement des éléments. Bref, le tableau dispose des éléments de miseen 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 emploiedes proportions. Ainsi, un tableau pourrait réserver 20 % de l'espace pour le menu et 80 % pour le texte. Cequi permet au tableau de s'adapter automatiquement à la résolution de l'écran de l'utilisateur. Par contre, cettetechnique possède pour désavantage de ne pas supporter les images. En effet, ces dernières ne seront pasredimensionnées selon la proportion spécifiée : elles garderont leur taille originale. La mise en pages seraalors 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 unedimension en pourcentage pour le texte. Ainsi, le texte s'adaptera aux différentes résolutions d'écran alors quela section fixe, qui pourra contenir des images ou un menu par exemple, occupera toujours la même largeur etla 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 navigateurn'offre pas suffisamment d'espace, le texte sera coupé. Si la largeur est définie de façon relative (enpourcentage), 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'offrantpas un contrôle précis de la mise en pages, le tableau permettait au concepteur de mieux contrôler ladisposition des éléments constituant la page. Toutefois, cette façon de faire ne devrait plus être employée, lesfeuilles de style en cascade (CSS) étant dédiées à cette tâche.

Guide Web Éducatif

Le tableau 47

Les cadres

Le cadre permet de fragmenter la page−écran en section indépendante, chacune contenant un documentdifférent. Toutefois, une requête exécutée dans un cadre (activer un lien, soumettre une recherche) peutgé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'utilisateurconsulte de l'information dans un second cadre. Ces cadres peuvent être horizontaux ou verticaux. Il estsouhaitable que l'information contenue dans le cadre fixe soit complète afin d'éviter d'avoir plusieurs cadresavec 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 lapage−écran afin d'éviter l'affichage et la manipulation d'une barre de défilement. Ainsi, l'internaute pourraparcourir le site dans le deuxième cadre et accéder en tout temps à la table des matières affichée dans lepremier cadre.

Le code HTML nommé NOFRAME peut être utilisé pour afficher un message spécifiant que le navigateurutilisé ne supporte pas les cadres (similaire à la fonction ALT des images). De plus, beaucoup d'utilisateurspréfèrent ne pas utiliser cette fonctionnalité. La solution idéale est de prévoir une version du site avec cadreset 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érieurdes cadres prévus pour le site. Il faut donc s'assurer de ne pas conduire les usagers dans des pagesculs−de−sac. Une solution est de mettre une bande de navigation dans chaque page.

Guide Web Éducatif

Les cadres 48

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 à imprimercorrectement 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 cenouveau 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 unenouvelle 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 attentionspéciale doit être portée aux liens pour éviter les structures récursives. Par exemple, une page−écran utilisantune structure par cadre peut être téléchargée dans une autre page−écran ayant elle aussi des cadres. Lesrésultats sont parfois sidérants. Enfin, l'affichage d'un site externe dans un cadre camoufle son adresse et faitainsi preuve d'un manque de respect envers son auteur.

Exemple d'une MAUVAISE utilisation des cadres

Exemples d'une BONNE utilisation des cadres

Guide Web Éducatif

Les cadres 49

Guide Web Éducatif

Les cadres 50

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 recueillirles données et les transférer à un serveur, qui lui les traitera. De plus, il est important d'offrir à l'utilisateur uneré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 parl'utilisateur et faciles à traiter par le concepteur.

Guide Web Éducatif

Les formulaires 51

L'image

Une image informatique est un ensemble de points, nommés pixels, colorés selon une certaine palette decouleurs.

L'image peut remplir différentes fonctions :

Compléter un texteElle apporte un support visuel et améliore la compréhension du contenu.

Schématiser une métaphoreAfin de simplifier une interface et de l'universaliser, une image sera employée, comme la maison pourl'origine du site ou la poubelle pour la suppression.

Offrir une interfaceL'image peut être une interface, telle qu'une carte géographique découpée en région qui permettrait desélectionner la région désirée à l'aide de la souris.

DécorerL'image sur le Web est souvent utilisée uniquement pour améliorer l'esthétisme du site, tel que celleplacé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 unemultitude de plates−formes différentes. Il est fréquent de visiter un site ayant une très bonne qualité graphiquesur une plate−forme, par exemple, avec un écran Macintosh en milliers de couleurs. Toutefois, ce même sitedevient 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 deles 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 cescaracté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 estpréférable de suivre ces quelques recommandations pour faire un usage judicieux des images à l'intérieur devotre site.

La résolution des images devrait être de basse résolution, c'est−à−dire 72 pixels par pouce (dpi, en anglais) surun Mac et 96 pixels par pouce sur un PC. Cette résolution est appelée qualité−écran. Puisque la plupart desutilisateurs possèdent des écrans de 15 pouces et que la résolution de ces écrans est de 800 par 600 pixels, ilest préférable de respecter les limites maximales de largeur d'une page−écran de 750 pixels, pour éviter qu'uneimage ne soit plus large que la fenêtre. Il est recommandé de maintenir la taille des images sous les 30 Ko etde ne pas dépasser 70 Ko pour une page complète (cela représente tout de même plus de 15 secondes deté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'undocument HTML qui contient des images, la taille des images est indiquée dans l'étiquette IMG, en utilisant lasyntaxe suivante : <img src="nomdelimage" width="xxx" height="yyy"> où xxx est lalargeur 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.

Guide Web Éducatif

L'image 52

En effet, il n'est pas nécessaire d'attendre que l'image soit complètement téléchargée pour en connaître ladimension.

Si une grande image est nécessaire, il vaut mieux faire une page contenant une version réduite de l'image etcréer un lien vers une version pleine grandeur. Cette façon de procéder permet au lecteur d'obtenir rapidementun aperçu de l'image et de pouvoir consulter immédiatement le texte descriptif ou encore l'explication qui vade pair avec l'image, avant de télécharger celle−ci. Il pourra donc juger de la pertinence de visualiser ou nonl'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 (Horton1990; Schneiderman, 1992). En fait, l'internaute s'attend en général à une réponse aussi rapide que le clic de sasouris.

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 couleurssont beaucoup plus claires, tandis que sur les écrans PC les couleurs sont plus sombres. De plus, la palette decouleurs des systèmes Macintosh et PC n'a que 216 couleurs identiques sur les 256 standard, ce qui expliqueles différences importantes à l'affichage des éléments graphiques. Avec le logiciel Photoshop, il est possiblede simuler, pour l'autre technologie, la qualité des contrastes de couleurs d'une image, en utilisant la fonctionGAMMA (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).

Guide Web Éducatif

L'image 53

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 estdonc préférable de faire des tests avec plusieurs largeurs de fenêtres, idéalement en passant du simple audouble 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 nonvoyante 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. Cetteaction est possible en utilisant l'attribut alt="texte décrivant l'image" dans l'étiquette <img>.

Guide Web Éducatif

L'image 54

L'image graphique

Le format d'image le plus courant sur le Web est le GIF. Ce format, codifié en huit bits, permet la sauvegarded'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 defichier GIF devrait se conformer à leur licence d'utilisation. Un format similaire, le PNG, a été développé afind'offrir une alternative libre de droit.

L'image graphique offre quelques particularités :

L'entrelacementNormalement, une image est dessinée du premier pixel (coin supérieur gauche) au dernier pixel (coininférieur droit). Afin d'offrir un aperçu plus rapidement à l'utilisateur, il est possible d'entrelacerl'image. Elle sera alors dessinée par section, un peu comme si elle était cachée derrière un storevénitien qui était progressivement ouvert.

La transparenceLa transparence est une propriété attribuée à certains pixels. Ces derniers prendront la couleur del'arrière−plan sur lequel l'image est disposée, comme s'ils étaient transparents.

La palette de couleursLa palette de couleurs est l'ensemble des couleurs employées au sein de l'image. Une couleur estattribuée pour chaque pixel. Cette couleur nécessite une certaine quantité de mémoire (bit) pour enconserver 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 lescouleurs :

TABLEAU 1. Nombre de bits VS nombre de couleurs

Bits par pixel 1 2 3 4 5 6 7 8 24

Nombre de couleurs2 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

Guide Web Éducatif

L'image graphique 55

L'image photographique

Lorsque l'image nécessite une qualité supérieure à celle du format graphique, pour représenter fidèlement unephotographie par exemple, un format comme le GIF, avec sa palette limitée, ne s'avère pas suffisant. Leformat 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 formats'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 nombitmap.

Une image bitmap nécessite beaucoup de mémoire. Par exemple, un dessin en noir et blanc de 800 pixels delarge sur 600 pixels de haut utilisera au bas mot 480 000 bits. D'où la nécessité d'utiliser un algorithme decompression 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 quiindiquera 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 decompression. Toutefois, le taux de compression le plus élevé entraîne une perte dans l'information originale. Ilest dit destructif. Par exemple, si deux couleurs similaires se côtoient, l'algorithme peut décider de remplacerune couleur par l'autre pour simplifier le fichier.

Guide Web Éducatif

L'image photographique 56

L'icône graphique

L'icône graphique est un élément graphique qui symbolise une action. On utilise des icônes graphiques dans labarre de navigation pour guider l'utilisateur à travers les différents outils accessibles. Les icônes doivent êtretrès représentatives de l'intention du concepteur. Par exemple, l'icône d'une maison est devenue un signifiantde la page d'accueil pour les internautes. Les flèches gauches et droites sont aussi des icônes trèsrepré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 diversesinterprétations.

Guide Web Éducatif

L'icône graphique 57

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'importequelle image comme image qui peut être cliquée. Cette image est constituée de deux parties, l'image en tantque telle et la carte des zones sensibles, auxquelles sont associés des liens. On peut créer ces zones à l'aided'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

Guide Web Éducatif

La carte image 58

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 oud'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'unerésolution supérieure à celle prévue lors de la conception. Le comportement standard du HTML est de répéterl'image jusqu'à ce que la page soit remplie. Pour modifier ce comportement, il faut spécifier dans la feuille destyle 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 êtreconç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évoirla lisibilité du texte sur toutes les plates−formes et les navigateurs. Un minimum de tests s'avère nécessaire sivous 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

Guide Web Éducatif

L'image d'arrière−plan 59

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 boucledonnant ainsi un effet d'animation. Cette méthode d'animation est très économique en terme de bandepassante. De plus, le GIF animé constitue le type le plus simple d'animation puisqu'il ne nécessite aucunplugiciel. 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 typed'image soit affiché correctement sur tous les navigateurs, prévoyez une image semblable pour la première etla 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 sectionanimation.

Guide Web Éducatif

L'image animée 60

Outils de communication

Le réseau Internet offre un ensemble de services permettant aux humains d'interagir. Certains de ces servicessont 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 dediffusion 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 desexigences particulières au niveau du déploiement, notamment l'installation d'un logiciel particulier sur leserveur. 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 lesoutils de communication :

Catégories et modèles d'application d'Internet• Modes de communication et fonctions de travail collectif•

Guide Web Éducatif

Outils de communication 61

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 estdestinataire@organisation.domaine (Exemple : Pierre@ulaval.ca). Connaissant cetteadresse, 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 clientCet accès nécessite l'utilisation d'un logiciel sur le poste client. Les logiciels les plus communs sontOutlook (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 deservice 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 WebPour utiliser cette forme de courrier électronique, il faut accéder à un service de messagerie grâce à unnavigateur. 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çuleur 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 celuiutilisé par le destinataire le supporte sans quoi il devra déchiffrer le message au sein du code HTML.

Guide Web Éducatif

Le courrier électronique 62

À 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 jointen'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 électroniqueest ouvert et peut être intercepté par un utilisateur quelque peu astucieux. Si le contenu du courrier doitdemeurer 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 <AHREF="mailto :destinataire@organisation.domaine">nom du destinataire</A>.Le nom du destinataire sera souligné. Le logiciel de messagerie client sera appelé lorsque l'utilisateur cliquerasur ce lien.

Guide Web Éducatif

Le courrier électronique 63

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'ungroupe, 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. Unlogiciel est utilisé pour gérer cet échange. Les plus courants sont ListServ et Majordomo. L'échange s'effectuegrâce à une seule adresse, le logiciel se chargeant d'envoyer le message à tous les membres de la liste dedistribution. 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 laliste peut toutefois modifier les paramètres. Consulter à ce sujet http://listes.ulaval.ca/.

Guide Web Éducatif

Les listes de distribution 64

Les forums de discussion

Le second outil de communication le plus populaire sur Internet, après le courrier électronique, est les forumsde discussion. Un forum de discussion peut s'apparenter à un babillard : une personne inscrit un article ausein d'un forum, les autres internautes peuvent lire et ajouter un commentaire à cet article ou créer un nouvelarticle.

L'origine des forums de discussion remonte à 1979, ce qui fait d'eux un des plus vieux services d'Internet. Ilsreposent sur un réseau d'échange d'informations du nom de USENET. Le principe est simple : un serveur denouvelles conserve les articles qui lui sont envoyés, classés par forum (newsgroup), et les échange avec lesautres serveurs de nouvelles. Ainsi, l'article est propagé à la grandeur du globe. Vous devez connaître l'adressed'un serveur de nouvelles pour pouvoir accéder aux forums de discussion. L'Université Laval possède unserveur 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 lesnouvelles suffisamment longtemps. En effet, le volume des forums peut devenir considérable etl'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 estrecommandé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 debonne conduite est suggéré (nétiquette). Il prévoit, en autre, s'identifier par une adresse de courriel validelorsque nous participons à un forum de discussion. Les forums de discussion sont aussi une cible privilégiéepour 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 formed'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 lesforums de même affinité.

Principaux préfixes

Préfixe Description

alt pêle−mêle (alternatif)

bionet Biologie

biz Affaires

comp Informatique

Guide Web Éducatif

Les forums de discussion 65

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 membresd'une organisation. Dans le cadre d'un site Web éducatif, il est possible d'intégrer un forum de discussion quisera limité au site et à ses utilisateurs. Les prochaines pages expliqueront plus en détail cette application desforums de discussion.

L'ajout d'un forum de discussion au sein d'un site Web éducatif permet au professeur d'échanger avec legroupe de façon asynchrone, tout en conservant un suivit de ces échanges. Pour ce faire, un logiciel de gestiondu forum doit être installé sur le serveur qui héberge le site. Plusieurs solutions logicielles s'offrent à nous. Lechoix 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 :

BazaarDéveloppé en Perl par l'Université d'Athabasca, ce logiciel gratuit permet une administrationprécise et de personnaliser l'environnement. Distribué selon la licence GPL1, il nécessite Perlet la base de données MySQL.

◊

Plate−forme : Linux◊ Prix : 0 $◊ Site Web : http://bazaar.nl.linux.org/index.html◊

DiscusDisponible en deux versions, gratuite et professionnelle, Discus est utilisé par de nombreuxsites. 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◊

phpBBExploitant la richesse du langage PHP, ce logiciel supporte les gestionnaires de bases dedonnées MySQL, PostgreSQL, Microsoft SQL Server et Microsoft Access. De plus, il sesouci 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/◊

SlashSlash est l'assise de Slashdot (http://www.slashdot.org/) et de nombreux autres sites. Laprésentation très visuelle le rend populaire. Plusieurs logiciels sont inspirés de Slash, qui

◊

Guide Web Éducatif

Les forums de discussion 66

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/◊

UBBLogiciel commercial de qualité, Universal Bulletin Board se décline en différentes versionsplus ou moins complexes, selon les besoins à combler et le budget disponible. Il permet lecontrô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/◊

WebBoardOutil 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◊

1General Public License

Guide Web Éducatif

Les forums de discussion 67

Les forums de clavardage

Les forums de discussion sont intéressants, mais ne permettent pas d'interagir en temps réel avec d'autresinterlocuteurs. Les forums de clavardage viennent pallier cette faiblesse. Mieux connu sous leur appellationanglaise « chat », le clavardage s'effectue dans un lieu virtuel sur Internet où des personnes peuvent discuterpar l'entremise de leur clavier. La formule familière et impersonnelle employée dans ces forums entraîne unlangage argotique où les abréviations pullulent (Exemples : A+ pour à plus tard, LOL pour « Laugh OutLoud ») 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 declavardage sont nécessaires.

La première formule est le IRC. Utilisant son propre protocole, elle nécessite l'emploi d'un logiciel commemIRC (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 utiliserl'IRC.

D'autres formules emploient une interface Web, comme Web Chat (http://www.webchat.org/), ce quisimplifie 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 dedistribution 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 devezvous brancher sur un serveur IRC que vous ne contrôlez pas. Il arrive que la communication se brise ou soitinterrompue ou même qu'un réseau se sépare et que plusieurs utilisateurs sur le même réseau ne peuvent seconnecter. Il est bon aussi de noter qu'un maximum de dix personnes devraient être présentes dans une mêmesalle 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 ilest fréquent de voir ces fichiers contaminés par des chevaux de Troie ou des virus.

Guide Web Éducatif

Les forums de clavardage 68

La messagerie instantanée ICQ

ICQ, littéralement « I Seek You » (Je vous cherche), agit un peu comme un téléavertisseur : il signal notrepré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, ilsuffira de créer une liste d'amis ou collègues. Lorsque vous vous connecterez au réseau Internet, les personnesfigurant sur votre liste seront automatiquement averties. Elles pourront donc prendre contact avec vous à l'aided'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/.

Guide Web Éducatif

La messagerie instantanée ICQ 69

Guide Web Éducatif

La messagerie instantanée ICQ 70

ProductionLorsque 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 fonctiondes besoins à combler et des ressources disponibles.

Cette section du guide vous présente les technologies déployées sur le Web, leur fonctionnement et leurutilité.

Le réseau Internet se destine à être modulaire, chacun de ses aspects étant traité par un module particulier. Iln'y a pas de solution qui permet de combler tous les besoins. La solution réside plutôt dans un amalgame detechnologies, chacune s'appliquant à une tâche particulière. Pour un volet de l'implantation, il existe quelquessolutions 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

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 desproblèmes à partager un document entre un PC et un Macintosh. Le formatage n'était pas respecté, la police decaractères introuvables, ce à condition de pouvoir simplement ouvrir le document. Imaginez maintenant quevous 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 deprotocoles. Ces protocoles permettent de transférer l'information d'un ordinateur à un autre. L'information doittoutefois ê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 basedu Web. Il existe également d'autres formats d'encodage qui ont été développés afin de pallier les lacunes duHTML 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'informationafin qu'elle soit déchiffrable. Il ne permet pas d'interactivité autre que celle d'offrir l'information. L'encodagepeut ressembler à saisir un texte dans un traitement de texte. Une fois sauvegardé, le document contiendra enplus 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'êtreun 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 groupesqui 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 WideWeb Consortium (http://www.w3.org/), le groupe qui a défini le Web et auquel les compagnies de logiciels seréfèrent lorsqu'elles développent pour le Web.

Guide Web Éducatif

Encodage 72

HTML

L'HyperText Markup Language, ou HTML, est un format développé à l'origine pour la documentation. Sonpoint fort était de pouvoir lier deux documents par un lien, d'où le nom d'hypertexte. La NCSA eue la brillanteidée de développer un programme graphique qui permettait de parcourir ces documents. Ce programme, dunom 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 HTMLse développa pour atteindre la version 4.01. Tandis que la première version s'avérait très sommaire, il estmaintenant 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é dessignes < et >. Dans la majorité des cas, une balise fermante désigne la fin du formatage. Le mot−clé de labalise 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. Voicicette structure de base :

<html><head><title>Titre du document</title></head><body>Texte du document</body></html>

Guide Web Éducatif

HTML 73

Le HTML est un encodage très simple et accessible. Il suffit de lire un peu de documentation pour connaîtrel'utilisation des différentes balises et un éditeur de texte pour produire un document HTML. Il possèdegénéralement pour extension .htm ou .html. Il existe une multitude d'éditeurs spécialisés dans laproduction de documents HTML. Pour choisir un éditeur HTML, référez−vous à notre grille d'évaluation deslogiciels 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 dedécodage, le plus souvent un navigateur comme Internet Explorer ou Netscape Navigator. Chaque programmepeut 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 unpositionnement absolu aux éléments composants la page. Ils seront disposés de façon relative, en fonction del'espace disponible.

Guide Web Éducatif

HTML 74

XHTML

Vous venez de découvrir le HTML ? Vous êtes enthousiasmé par ses possibilités et sa simplicité. Mauvaisenouvelle : 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 ontprovoqué l'élaboration d'un nouveau langage d'encodage, le XML. Puisque le bassin d'utilisateurs du HTMLest 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 plusrigide 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 requierttoutes les balises fermantes. Même les balises simples, tel que <br> nécessite l'ajout du caractère / afin designifie 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èrespé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

Guide Web Éducatif

XHTML 75

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.

Guide Web Éducatif

XHTML 76

Cascading Style Sheets

La mise en forme du document au sein du HTML, peut rapidement devenir un capharnaüm, le formatageprenant plus de place que le contenu. De plus, la mise à jour du style et l'application d'une présentationuniforme sont difficiles. Le W3C a développé les Cascading Style Sheets, ou CSS, afin de pallier cettesituation.

La règle d'or est de séparer le contenu de sa mise en forme. Tous les éléments de style (couleur, police decaractères, alignement, etc.) devraient figurer dans une feuille de style. Les éléments du contenu sont par lasuite 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 versionsantérieures est passable. Il est donc essentiel de tester correctement sa feuille de style sur plusieurs versions etde 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 à êtresupporté 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.

Guide Web Éducatif

Cascading Style Sheets 77

XML

L'explosion du HTML a pris par surprise son créateur. Devant l'enthousiasme et la rapidité de sa diffusion, ilfut rapidement difficile de contrôler sa destinée. Chaque gros joueur du monde du logiciel avait sa vision dudé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 HTMLrendaient difficile son expansion.

Devant ce constat, le World Wide Web Consortium, l'instigateur du HTML, décida de développer un nouveaustandard. Après quelques hésitations, ce standard prit son envol et fut rapidement adopté par les plus grosjoueurs 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 pasuniquement au Web, loin de là. Toute information peut être structurée en XML. De nombreux outils existentdé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 enHTML. Il n'est pas possible d'ajouter la balise <h7> si le W3C ne modifie pas son standard et qu'aucunnavigateur le supporte. Le HTML définit donc une grammaire et un vocabulaire. Le vocabulaire du HTML estlimité 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 doncpossible de créer des balises et d'établir les liens entre ces balises. Si l'on compare ces langages avec ceux del'ê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 unexemple 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/.

Guide Web Éducatif

XML 78

Recommandation

Le XML est un langage encore jeune. Il est peu supporté par les navigateurs Web. Il n'est conseillé que pourcombler un besoin spécifique, en ne perdant pas de vue que les utilisateurs de versions antérieures denavigateurs ne pourront pas consulter votre site ou devront se procurer un logiciel pour pouvoir manipuler lesfichiers que vous produirez en XML.

Guide Web Éducatif

XML 79

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. Unesolution 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). Cedernier se destine particulièrement au domaine de la technologie sans fil. Le WML exploite donc le WAP afinde créer des pages Web accessibles par ces appareils. Le WML est en fait un langage défini grâce au XML. Ilutilise le principe de fiches (cards) pour organiser l'information. Bien que plusieurs éléments du HTML sontrépétés en WML, ce dernier possède ses propres fonctionnalités. Voici un exemple très simple de ce à quoipeut 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 descommunications, regroupées sous le nom d'Open Mobile Alliance Ltd, il ne s'agit pas d'un standard aussiuniversel 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/.

Guide Web Éducatif

WML 80

Multimédia

L'intérêt du support informatique par rapport au support papier réside certainement à l'apport multimédia qu'ilpermet. Du son, du vidéo, de l'animation peuvent être ajoutés au texte afin de faciliter la compréhension etillustrer un concept ou une idée.

Cette section du guide vous fournira moult détails qui vous permettront d'intégrer efficacement du contenumultimé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 seravos destinataires : s'il s'agit d'un cours offert à distance où la majorité des utilisateurs accède à Internet parmodem, mieux vaut limiter la taille et le nombre des sons, images, vidéos et animations ou mettre l'ensembledu site Web, incluant le matériel multimédia, sur un CD−ROM.

Guide Web Éducatif

Multimédia 81

Le son

Le son tel que perçu par l'humain repose sur le décodage qu'effectue le cerveau à partir des ondes sonores quivoyagent dans l'air et qui sont captées par les oreilles. Pour produire un son, l'ordinateur doit simuler une ondesonore à partir d'un signal électrique qu'il transmet à un haut−parleur. Trois paramètres principaux altèrent laperception de l'onde :

La fréquenceLa fréquence est la quantité de crêtes ou de creux en une seconde. Elle se mesure en hertz (Hz). Plusla fréquence est élevée, plus le son sera haut. Par exemple, le La du diapason résonne à 440 Hz.

La longueurLa longueur est la distance entre deux crêtes ou deux creux. Cette distance est constante dans unmilieu donné. Par exemple, la vitesse du son dans l'air sec à 0 °C est de 1 200 Km/h, peu importe safréquence et son amplitude.

L'amplitudeL'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 unnavigateur, 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. Ledéfi est toujours de produire le maximum de qualité en consommant le minimum de mémoire. La compressionvient donc jouer un rôle majeur dans ces formats. Peu importe le type de fichiers employés, quatre conceptscaractérisent les fichiers audio numériques.

Le taux d'échantillonnageLa synthèse informatique d'un son s'avère complexe. Chaque onde doit être reproduite fidèlement, cequi représente beaucoup d'information à conserver. Pour réussir cette synthèse, la majorité des normessonores utilisent un procédé basé sur un échantillonnage fréquent des ondes sonores. Plus la fréquencede ces échantillonnages est élevée et meilleure est la qualité du son. Voici quelques fréquencesd'échantillonnages fréquemment employées.

11 kHzFaible qualité, celle du téléphone.

Guide Web Éducatif

Le son 82

22 kHzQualité moyenne.

44 kHzBonne qualité, celle de la radio FM.

Le nombre de bitsComme l'image, un nombre différent de bits peut être employé afin de conserver le son digital. Encore unefois, plus ce nombre sera élevé, meilleure sera la qualité. Les formats les plus courants sont le 8 bits et le 16bits.

Le nombre de canauxAfin de produire une sonorité différente dans chaque haut−parleur, un canal sera conservé pour ceux−ci. Lamonophonie 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 compressionLe son numérique peut être compressé afin de réduire l'espace mémoire requis pour le conserver. Différentsalgorithmes sont employés avec un taux de compression plus ou moins élevé et une qualité plus ou moinsbonne. 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ù lerecours à 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 êtretéléchargé sur le poste de l'utilisateur puis ouvert par l'application comme n'importe quel autre document. Ilfaut 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 fichiersonore est lu au fur et à mesure qu'il est reçu du réseau grâce à un décodeur particulier.

Guide Web Éducatif

Le son 83

AIFF

L'« Audio Interchange File Format », ou AIFF, est un format développé pour le Macintosh. Il supportejusqu'à 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 .

Guide Web Éducatif

AIFF 84

µ−LAW

Le format µ−LAW (prononcez mu−law) est le format standard d'Unix. Il est également employé en téléphonieen Amérique (son cousin, le a−Law est employé en Europe). Supportant la monophonie et la stéréophonie, ceformat 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•

Guide Web Éducatif

µ−LAW 85

Liquid Audio

Le format Liquid Audio a été développé afin de diffuser de la musique de qualité CD sur le Web. Il est entreautres 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.

Guide Web Éducatif

Liquid Audio 86

MPEG

En fait, le MPEG désigne une multitude de standards établit par le Moving Picture Experts Group. Troisformats sont supportés : vidéo, audio et en transit (streaming). Quatre versions, qui varient notamment par leniveau de compression sont disponible : layer−I, layer−II, layer−III et layer−IV. Ce dernier, mieux connusous le nom de MP3, fit la manchette bien des fois dû à son immense popularité quand vint le temps de piraterde 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.•

Pour de plus amples renseignements, consultez le site suivant :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 undocument électronique et de le diffuser sans avoir l'assentiment de son créateur constitue un crime.

Guide Web Éducatif

MPEG 87

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 pourproduire 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−cirenferme une table de synthèse des différents instruments, celle−ci sera plus ou moins fidèle au son del'instrument original.

La majorité des navigateurs supporte le format midi sans l'ajout d'un lecteur particulier.

Guide Web Éducatif

MIDI 88

RealAudio

Ce format propriétaire a établi sa renommée par la diffusion en transit (streaming) de contenu multimédia surle Web. À l'aide du lecteur RealPlayer, dont la version de base est disponible gratuitement, il est possibled'écouter des extraits de CDs et de films.

Avantages

Protection minimale des droits d'auteurs•

Inconvénients

Format propriétaire• Nécessite l'achat d'un logiciel pour la création de contenu•

Pour de plus amples renseignements, consultez le site suivant :http://www.real.com/.

Guide Web Éducatif

RealAudio 89

Wave

Ce format développé par Microsoft pour sa plate−forme Windows offre des performances similaires à celle duAIFF. 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•

Guide Web Éducatif

Wave 90

Windows Media Audio

Devant la désuétude de son format Wave, Microsoft a développé une solution moderne afin de concurrencerles autres formats en vogue (Real, QuickTime, MPEG, etc.). Windows XP inclut les outils permettant de créeret lire ce nouveau format.

Avantages

Nombreuses fonctionnalités• Popularité de Microsoft/Windows•

Inconvénients

Solution propriétaire• Destiné à Windows•

Pour de plus amples renseignements, consultez le site suivant :http://www.microsoft.com/windows/windowsmedia/default.asp.

Guide Web Éducatif

Windows Media Audio 91

Ogg Vorbis

Le monde du logiciel libre a également un format comparable au MP3 sous le nom de Ogg Vorbis. Ce formatoffre 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 libreet gratuit.

Avantages

Gratuit• Multi−plateforme• Supporté par de multiples lecteurs, dont Winamp•

Inconvénients

Peu connu• Peu utilisé•

Pour de plus amples renseignements, consultez le site suivant :http://www.vorbis.com/.

Guide Web Éducatif

Ogg Vorbis 92

La vidéo

Le cinéma et ses descendants exploitent un phénomène appelé persistance rétinienne afin de créer l'illusion dumouvement. Il suffit d'alimenter en images rapidement le cerveau pour que l'humain assemble ces images enune 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 USBou 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 :

La diffusion du document s'effectue à une grande échelle facilement1. Le contrôle du visionnement relève de l'utilisateur2. Le document peut faire partie d'un ensemble plus vaste, compléter du texte par exemple3. Il existe plusieurs outils d'édition qui rendent le montage vidéo accessible à tous sans autre matériel4.

Grâce à des plugiciels, il est possible d'intégrer des vidéos à votre site Web. La problématique principale duformat vidéo est la quantité d'informations qu'il nécessite, d'où des fichiers de taille fort imposante. Il s'agittoujours d'effectuer un compromis entre la vitesse du téléchargement et la qualité du vidéo. Pour ce faire, deuxparamè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 cadencede 30 images par seconde pour la télévision, 24 pour ce qui est du cinéma. Sur le Web, cette cadence va êtrediminuée afin de limiter la quantité de mémoire nécessaire. La fréquence peut osciller entre 5 et 15 images parseconde, selon la vitesse du mouvement des images. Par exemple, moins il y a de mouvements dans unevidéo, plus le nombre d'images par seconde est réduit. Si la vidéo comporte des mouvements rapides, lenombre 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 convientbien à une connexion par modem. Cette taille peut être supérieure si la connexion est plus rapide (hautevitesse). 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 moins30 points afin d'en faciliter la lecture.

Les formats les plus utilisés sont :

MPEG• QuickTime•

Guide Web Éducatif

La vidéo 93

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'offrirplusieurs 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 etdu Développement du SIT est disponible à l'adresse :http://feynman.ulaval.ca/logi/presteleconf/radiotvencodeursintro.shtml

Guide Web Éducatif

La vidéo 94

MPEG

Le même groupe qui a défini le très populaire format MP3 se destinait avant tout au vidéo. Le Moving PictureExperts Group a, en effet, défini des méthodes de compression et un format de fichier, le .mpg ou .mpeg quiimplante 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 ordinateurpuissant

•

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.

Guide Web Éducatif

MPEG 95

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 photosnumériques qui exploitent cette technologie. De plus, le lecteur, disponible gratuitement, supporte d'autresformats 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'unesérie de photos que le logiciel assemble correctement afin de donner l'illusion de la réalité. L'utilisateur a leloisir 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.)

Pour de plus amples renseignements, consultez le site suivant :http://www.apple.com/quicktime/

Guide Web Éducatif

QuickTime 96

RealVideo

Tel le RealAudio, le RealVideo permet la diffusion de vidéos en transit (streaming). Le lecteur, disponiblegratuitement, permet ainsi d'accéder à des vidéos de musique, des stations de radio, des nouvelles et d'autresmaté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

Format propriétaire• Nécessite l'achat d'un logiciel pour la création de contenu•

Pour de plus amples renseignements, consultez le site suivant :http://www.real.com/.

Guide Web Éducatif

RealVideo 97

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

Format propriétaire• Destiné avant tout à Windows•

Cliquez ici pour visionner un exemple de vidéo en AVI.

Pour de plus amples renseignements, consultez le site suivant :http://www.microsoft.com/windows/windowsmedia/default.asp.

Guide Web Éducatif

Windows Media Video (WMV) 98

L'animation

Tandis que la vidéo numérique puise sa source du monde réel, l'animation est entièrement informatique. Ils'agit encore une fois d'enchaîner une suite d'images afin de créer l'illusion du mouvement. Mais cette fois, lesimages seront créées avec l'ordinateur.

Plusieurs solutions sont possibles pour générer une animation destinée au Web. Le choix s'effectuera enfonction des besoins et des ressources disponibles. Les pages suivantes couvrent les principales solutionsdisponibles.

Guide Web Éducatif

L'animation 99

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 logicielfonctionne 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 estgénéralement distribué en transit (streaming) et possède l'extension .swf. Un lecteur ou un plugiciel estnécessaire pour regarder une animation Flash : Flash Player et Shockwave remplissent ce rôle et sontdisponibles gratuitement (http://www.macromedia.com/downloads/). Notez que Microsoft Internet Explorerinclut 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 plusieursversions de Flash et ces dernières ne sont pas toutes installées dans les navigateurs. Cela suppose dont quecertains usagers qui n'ont pas mis leur version de Flash à jour ne puissent voir votre application disant que lesite est mal conçu. Il faut donc aviser de la version de Flash utilisée et idéalement joindre un lien deté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 lacraie pour que l'animation s'enclenche. Vous devez avoir installé le plugiciel pour pouvoir visionner cetteanimation.

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 formatset de s'intégrer dans la suite des produits Adobe.

Guide Web Éducatif

Flash 100

Pour plus d'informations, consultez le site de la compagnie :http://www.adobe.com/products/livemotion/main.html.

Guide Web Éducatif

Flash 101

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, Directors'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 etles 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 degérer l'interactivité.

Informations : http://www.macromedia.com/software/director/.

Guide Web Éducatif

Director 102

Java

Réservée aux personnes possédant des notions en programmation, cette solution portable et personnaliséepermet de produire un applet incorporé à la page Web. Cet applet sera téléchargée le poste de l'utilisateur etsera exécutée au sein du document HTML, grâce à la Java Virtual Machine (JVM), présente dans les dernièresmoutures des navigateurs (Explorer, Navigator).

Java offre des classes d'objets (code tout fait, utilisable dans un programme) pour de multiples fonctions, dontle 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 avecd'autres composantes (une base de données par exemple) et l'interaction avec l'utilisateur (par un champ desaisi 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 plusfacile à intégrer au contenu Web et offre déjà plusieurs fonctionnalités qui simplifient le développementd'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.

Guide Web Éducatif

Java 103

VRML

Le VRML (Virtual Reality Modeling Language) est un langage qui permet de décrire des mondes en troisdimensions, 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ôtstatiques. 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. Ilne s'agit ni plus ni moins que de fichier texte organisé selon une certaine syntaxe autour d'un vocabulairepré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 sedéplacer dans un environnement 3D.

Voici une image tirée d'un environnement en VRML (un musée en 3D) :

Guide Web Éducatif

VRML 104

Pour la visualisation des environnements VRML, vous devez installer un plugiciel qui vous permettra denaviguer dans des mondes en 3D dans votre navigateur favori ou d'utiliser un navigateur spécialisé dans cettetechnologie (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.

Guide Web Éducatif

VRML 105

Logiciels de dessin

De nombreux logiciels de dessin permettent de générer des animations et de les exploiter sur le Web. Leurforce est la qualité du dessin qu'ils produisent. Toutefois, puisqu'ils ne sont pas dédiés au Web, la productionde 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 permetde 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 soitdisponible gratuitement. La qualité de l'image produite justifie toutefois le coût demandé. Le logiciel permetd'utiliser le plugiciel Shockwave de Macromedia, pour l'exploitation sur le Web. Nécessite un ordinateurpuissant 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 fonctionsd'animation et d'exportation vers le Web. Disponible pour PC et Mac.

Informations : http://www.curiouslabs.com/products/poser4/index.html.

Guide Web Éducatif

Logiciels de dessin 106

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 dunavigateur employé (Microsoft Internet Explorer, Netscape Navigator). Il faut toutefois faire attention auplugiciel, car il peut déstabiliser un navigateur s'il n'est pas au point ou consommer de la mémoire et du tempsde traitement, précieux pour un ordinateur de faible puissance. Un exemple de plugiciel est Acrobat Readerqui 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 dedocument employé ou si l'emploi du plugiciel n'est pas possible pour la majorité des destinataires. Mais avantde diffuser un format de fichier particulier, il faut s'assurer que les destinataires pourront consulter ledocument 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éthodestandard. 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é.

Guide Web Éducatif

Autres types de documents 107

Acrobat

Développé par la firme Adobe, Acrobat permet la diffusion de documentation électronique sur plusieursplateformes (Mac, PC, Unix). Couramment employé sur le Web à cette fin, il permet notamment de convertirdocument Word ou une page HTML vers son format universel. Il est donc l'outil de choix pour la diffusion dedocuments 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 pouvezle télécharger à l'adresse http://www.adobe.com/products/acrobat/readstep.html. Les documents de ce formatpossè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 deprécieux renseignements lors de la création de documents PDF. Le site http://www.planetpdf.com/ est un bonexemple de la vitalité de ce standard.

Recommandation

Nous avons préparé un guide sur la conception pédagogique des documents PDF. Disponible à l'adressehttp://aptic.ulaval.ca/guidepdf/.

Guide Web Éducatif

Acrobat 108

PowerPoint

Powerpoint est le principal logiciel dit de PréAO (présentation assistée par ordinateur). Il est inclus dans lasuite 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 fichiersPowerPoint sur leur site Web, les étudiants peuvent imprimer ces présentations avant le cours. Ceci permetaux é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 :

En téléchargeant le fichier. Une visionneuse disponible gratuitement(http://office.microsoft.com/downloads/default.aspx?Product=PowerPoint) permet à l'utilisateur deconsulter la présentation par la suite. Cette méthode est particulièrement recommandée pour degrosses présentations.

1.

PowerPoint permet d'exporter la présentation en format Web natif (version 97 et suivante). L'avantageindéniable de cette méthode est de rendre universelle la présentation. Mais on perd certainesfonctionnalités telles les animations du texte et les transitions.

2.

Un plugiciel est disponible (ActiveX) afin de consulter la présentation PowerPoint en format natifdans le navigateur Internet Explorer. Cette méthode ne fonctionne que si vous savez que vosdestinataires utilisent exclusivement Internet Explorer version 4 et suivante.

3.

Pour en savoir plus : http://www.microsoft.com/office/powerpoint/.

Guide Web Éducatif

PowerPoint 109

Interactivité côté client

Jusqu'à maintenant, les technologies abordées offraient un minimum d'interaction avec l'utilisateur. Ellesservaient principalement à formater l'information. Pour offrir de l'interactivité, il faut envisager d'écrire unprogramme 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 etle 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 leniveau d'interactivité est minime, elle peut s'effectuer du côté du client, par une des technologies décrites danscette 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 devezvous assurer que la technologie employée sera supportée par vos utilisateurs.

Guide Web Éducatif

Interactivité côté client 110

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é parla firme Sun, est un langage complexe, autonome et orienté objet, le JavaScript est limité et nécessite leHTML comme langage hôte. En effet, le code JavaScript ne peut s'exécuter seul, il nécessite un navigateur quile supporte et qui agit comme interpréteur.

Le JavaScript permet de façon relativement facile d'ajouter un certain degré d'interactivité à vos documentsHTML. Cette forme d'interactivité permet notamment de vérifier les réponses d'un formulaire en ayant, dansle code JavaScript, tous les éléments d'analyse des résultats et l'exécution de la rétroaction appropriée. Ce quis'éloigne de l'utilisation courante d'un script CGI qui doit communiquer avec le serveur pour utiliser unprogramme qui effectuera l'opération et retournera le résultat dans une page différente au client. Il permetaussi de faire apparaître une image, de faire défiler des informations dans un bandeau, de voir des menuss'illuminer, etc.

Un de ses avantages est sa facilité de création à partir de bibliothèques de références (livres et CD−ROM). Onpeut également s'inspirer des routines existantes, car le code JavaScript est visible dans la page encodée enHTML. Dans ce dernier cas, il est impératif de bien adapter l'ancienne routine à son nouvel usage, car uneré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 éviterdes problèmes de sécurité. Ainsi, une personne ne pourra programmer une routine dans le but d'espionner lecontenu de votre disque dur. Un codage bien structuré et qui spécifie adéquatement la version du langageutilisé permet une excellente performance, tant avec les navigateurs de Netscape (2.0 et plus) qu'avec lesInternet Explorer (3 et plus).

Au lien suivant, javascript.html, vous trouverez un exemple simple de JavaScript qui valide la saisi d'unchamp d'un formulaire.

Le JavaScript se déploie également du côté serveur, si le serveur HTTP le supporte, comme le serveur vendupar 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 codesensible, par exemple la validation d'un examen sommatif

•

Guide Web Éducatif

JavaScript 111

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/)•

Guide Web Éducatif

JavaScript 112

DHTML

Le DHTML, Dynamic HTML, n'est pas un langage de programmation, mais plutôt un standard dedéveloppement qui repose sur quatre vecteurs :

Une vision orientée objet de la page HTML (DOM)1. L'utilisation de feuilles de style (CSS)2. La programmation intégrée à la page HTML3. Le support de polices de caractères dynamiques4.

Initié par Netscape, le DHTML est également supporté par Microsoft. Le DHTML est supporté par la version4 et suivante des navigateurs des deux firmes. Il vise l'utilisation maximale des possibilités des navigateurs dequatriè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 dedéveloppement. La lecture d'un ouvrage sur le sujet ou de la documentation disponible sur le Web estvivement conseillée.

Guide Web Éducatif

DHTML 113

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 adéveloppé un langage script qui s'intègre bien à une page HTML. Le VBScript est une pierre d'assise de latechnologie 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/)•

Guide Web Éducatif

VBScript 114

Java

Le langage Java a été développé par la firme Sun Microsystems afin d'offrir un outil universel qui permettraitde contrôler autant un téléphone portable qu'un ordinateur de forte puissance. Pour atteindre cette fin, le Javarepose sur l'emploi d'un interpréteur, le Java Virtual Machine ou JVM, qui décode le programme Java et letraduit dans le langage de la machine hôte.

Le Java est un langage orienté objet. Sa syntaxe ressemble grandement à celle du C++, tout apportant denombreuses 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 cesnombreuses possibilités est de créer des applets, petit programme intégré à une page Web. L'applet seraexécuté en vase clos, sans danger pour l'ordinateur hôte. Contrairement au JavaScript ou au VBScript, le codesource 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'autrestechnologies. Bien qu'il souffre d'une certaine avidité en ressources matérielles, il s'agit d'un langage plein depromesses 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 leC++

•

Ressources

Site officiel (http://java.sun.com/)• Tutoriel (http://www.commentcamarche.net/java/javaintro.php3)• Applets (http://www.javafile.com/)•

Guide Web Éducatif

Java 115

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érentede la programmation. Au lieu d'écrire leur programme d'une manière linéaire, ils ont divisé le programme enpetite 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 despropriétés et des fonctionnalités. Ce bouton par exemple possède un libellé, une taille, une couleur, autant depropriétés qui lui étaient propres. Et s'il s'agissait d'un véritable objet, il réaliserait une action lorsqu'il seraitcliqué. 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 concevoirle monde. Des architectures furent développés dans lesquels les objets pouvaient dialoguer entre eux. Ledéveloppeur qui exploite une telle architecture bénéficie de composantes déjà éprouvées qu'il réutilise enfonction de ses besoins.

Les pages suivantes s'attardent aux ActiveX et JavaBeans, deux technologies orientées objet.

Guide Web Éducatif

Composante intégrée 116

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 dedéveloppement de Microsoft, le .NET, repose sur cette approche. Un programmeur qui désire partager unobjet qu'il a développé le fera en créant un control ActiveX qui sera aisément réutilisable par d'autresprogrammeurs au sein de l'architecture Microsoft.

Sur le Web, un control ActiveX permet par exemple d'étendre les fonctionnalités du navigateur InternetExplorer 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)•

Guide Web Éducatif

ActiveX 117

JavaBeans

Le JavaBeans remplit la même fonction qu'un control ActiveX, soit la diffusion d'une composante finie. Cettefois, 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/)•

Guide Web Éducatif

JavaBeans 118

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 lapage Web, vous devrez le faire en amont, du côté du serveur. Lorsque les pages Web doivent êtredynamiques, c'est−à−dire que le contenu est créé sur le vif, la programmation s'effectue à la source, du côté duserveur.

Bien entendu, l'interactivité du côté du serveur est plus exigeante. Des connaissances en informatique sontrequises et réclament une personne qualifiée.

Comme vous pouvez le constater, le développement d'un site Web requiert souvent l'utilisation d'unamalgame de techniques. Voici les technologies les plus courantes en matière de développement sur unserveur Web :

SSI• CGI• PHP• ASP• JSP•

Guide Web Éducatif

Interactivité côté serveur 119

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èreanalyse du code HTML à la recherche d'instructions particulières qui sont traitées directement par le serveurWeb. 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 lasécurité du serveur

•

Ressources

Tutoriel (http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html)• Documentation (http://httpd.apache.org/docs/howto/ssi.html)•

Guide Web Éducatif

Server Side Includes 120

CGI

La première méthode développée afin de rendre dynamique le contenu d'un site Web fut le CGI (CommonGateway Interface). Il ne s'agit pas d'un langage de programmation, mais bien d'une méthode permettant à unepage 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 dela culture Unix. Ce langage a évolué et se voit bonifié de plusieurs fonctionnalités allant de l'interrogation debase de données à l'orientée objet en passant par la programmation graphique. Son accessibilité et saversatilité lui assurèrent un certain succès. L'avantage du Perl dans le développement avec CGI est lamaintenance simplifiée puisqu'il est interprété.

Vous devez configurer votre serveur Web pour pouvoir exploiter le CGI. La majorité des serveurs Websupportent implicitement le CGI. Il suffit de spécifier le répertoire où se trouvent les programmes à exécuter etla sécurité de mise. Le programme est appelé comme une page Web, en employant le protocole HTTP. Sesparamè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/)•

Guide Web Éducatif

CGI 121

PHP

L'Hypertext Preprocessor, mieux connu sous le nom de PHP, est un langage script dédié à la création de pageWeb. Faisant partie du monde du logiciel libre (open source), ce langage fort populaire auprès desdé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 serveurWeb 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>

Résultat de l'exemple :

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)•

Guide Web Éducatif

PHP 122

ASP

L'Active Server Pages (ASP) est une architecture développée par Microsoft afin de développer un site Webdynamique. Orientée objet, cette architecture est dédiée au serveur Web de Microsoft, IIS (InternetInformation Server). Ce dernier permet l'exécution de programmes du côté serveur qui produiront la pageWeb. N'importe quel langage de programmation qui supporte cette architecture peut être utilisé, mais lesprogrammes sont habituellement écrits en VBScript ou en JScript. Les pages Web déployant cette architecturese 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>

Résultat de l'exemple :

Texte en police de taille 1

Texte en police de taille 2

Texte en police de taille 3

Texte en police de taille 4

Texte en police de taille 5Texte en police de taille 6

Critique

Avantages

Support de Microsoft• Facile à déployer•

Inconvénients

Dédié au monde Microsoft• Technologie dispendieuse (licence, matériel)•

Guide Web Éducatif

ASP 123

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/)•

Guide Web Éducatif

ASP 124

JSP

Toujours dans la perspective de créer du contenu dynamique, les Java Server Pages (JSP) sont la solutiondéveloppée par Sun, au sein de l'architecture de son langage Java. Tel le reste du monde Java, JSP repose surune architecture orientée objet. Un serveur qui supporte cette technologie est nécessaire. Ce dernier traduirales 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>

Résultat de l'exemple :

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/)•

Guide Web Éducatif

JSP 125

Base de données

Nous vivons dans une société d'information. Chaque jour, nous sommes soumis à une quantité importante dedonnées. L'informatique permet d'organiser ces données. En informatique, un ensemble de donnéesstructurées d'une certaine façon se nomme base de données. Un logiciel qui permet de gérer une base dedonnées se nomme un Système de Gestion de Base de Données (SGBD ou DBMS en anglais). Il se charge del'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. Ilest 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 untraitement quelconque sur ces données. Bien entendu, il est possible d'utiliser ces données au sein d'un siteWeb.

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èresanné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 situationsqui 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 deproduits 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

Guide Web Éducatif

Base de données 126

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 dutemps de maintenance ou de développement. Le recours à une personne qualifiée est fortement recommandé.

Guide Web Éducatif

Base de données 127

Guide Web Éducatif

Base de données 128

ExpérimentationLa phase d'expérimentation permet de s'assurer du bon fonctionnement du site Web sur le réseau Internet et devé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. Troisvolets 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 grilled'évaluation de site Web éducatif vous est proposée.

Expérimentation 129

Mise en ligne

Habituellement, vous travaillez sur votre ordinateur personnel. Lorsque vous avez terminé votre site, il esttemps de le mettre sur le réseau Internet. N'oubliez pas de faire vérifier le contenu par un correcteurlinguistique avant cette ultime étape.

Le réseau Internet est un ensemble d'ordinateurs interreliés à la grandeur du globe. Au sein d'un réseauinformatique, deux types d'ordinateurs se rencontrent : des serveurs et des clients. Le réseau Internet peutressembler à un restaurant : de nombreuses tables sont disponibles (serveurs) autour desquelles se trouventdes chaises (clients). Sur les tables sont servis des mets (sites) composés d'aliments (fichiers). Vous choisissezla table selon les mets qui vous conviennent (connexion au serveur/site), puis vous ingurgitez ces succulentsplats par petits morceaux (paquets TCP/IP).

Il ne reste plus qu'à choisir le bon serveur pour mettre ce que vous avez mijoté.

Guide Web Éducatif

Mise en ligne 130

Le serveur

Pour pouvoir procéder à une mise en ligne efficace de votre site Web, vous devez d'abord vous poser lesquestions 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 desrequê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, traitementutilisant 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 etquelles 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) ?•

Guide Web Éducatif

Le serveur 131

Gestion des fichiers

Travailler directement sur le serveur n'est pas recommandé. L'idéal est de créer et modifier les documentsHTML sur un autre ordinateur, puis de les transférer, àa l'aide de FTP, sur le serveur. Cette méthode permetd'éviter de nuire au bon fonctionnement du serveur et de votre site. De plus, il est fortement recommandé defaire 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é deplacer 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 lapage 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 decette 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 paged'accueil).

•

Une page avec un message clair sera affichée lorsqu'une erreur surviendra (Exemple : lors d'uneerreur 404 document introuvable).

•

En fonction de la clientèle visée, le site peut être multilingue. Cette caractéristique nécessite toutefois plus degestion : les documents propres à chaque langue auront leur répertoire (exemple : \anglais, \francais) tandisque les éléments communs se trouveront dans un même répertoire (Exemple : \image). La maintenances'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 seraplus aisée si la nomenclature des fichiers est soignée. Quelques règles de base doivent, en autre, êtrerespectées :

Le nom ne doit pas contenir de caractères accentués ou de symboles autre que le point ( . ) et lesouligné ( _ ).

•

Préférez l'emploi de minuscules seulement, surtout dans un environnement qui inclus un serveurUnix, 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 lenom et 3 caractères pour l'extension.

•

Utilisez les extensions standards en fonction du type de document (exemple : un document htmlpossède pour extension .htm ou .html mais pas .txt).

•

Enfin, choisissez des noms significatifs afin qu'ils représentent bien le contenu du document.•

Guide Web Éducatif

Gestion des fichiers 132

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éspar catégories. L'internaute qui visite l'annuaire peut rechercher par des mots−clés ou en choisissant lescatégories qui lui sont proposées afin de trouver un site qui discute du sujet qui l'intéresse. Pour faire partie del'annuaire, vous devez inscrire votre site dans la banque de données à l'aide d'un formulaire disponible sur lesite 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 defaç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 visiblepar l'internaute : il lui permet de chercher des mots−clés dans une banque de données. Le robot est unprogramme 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érerl'inscription de votre site dans les robots de recherche, trois étiquettes sont suggérées :

<title>donnez un titre clair et concis de l'ensemble de votre site</title>1. <META name="Description" content="inscrire votre description">2. <META name="Keywords" content="inscrire vos mots clés, séparés par une virgule">3.

Le contenu de ces étiquettes doit être clair, précis, simple et accrocheur sans exagérer. Notez que vous devezfournir les mots−clés en français et en anglais si vous désirez rejoindre le plus d'utilisateurs possible. Certainsrobots se servent de la description pour afficher un résumé de votre site, et des mots clés pour indexer votredocument. Attention, car plusieurs robots refusent d'indexer un site qui comporte, en début de document, desimages sensibles ou des Javascript. La plupart des robots sont aussi construits pour détecter les ruses derépétition d'un mot clé, de la part du concepteur qui espère se retrouver ainsi en première place lors d'unerecherche. Malheureusement, pour lui, les robots ignorent ce type d'indication et refusent dans ce casd'indexer le site.

L'information donnée au robot peut être contrôlée en créant un fichier nommé « robots.txt » ou, toutsimplement, en inscrivant soi−même son site dans les divers outils de recherche sur le réseau Internet. Voiciun exemple d'un fichier robot.

La démarche à suivre est :

Choisir des mots−clés pertinents à votre site Web.•

Guide Web Éducatif

Indexation 133

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 positionnementde 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ètredescription. Toutefois, les moteurs ne considèrent que les 200 premiers caractères.

Exemple : <meta name="description" content="Guide de conception d'un siteWeb éducatif">

Guide Web Éducatif

Indexation 134

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 rapporthebdomadaire ou mensuel, le concepteur sera à même de réviser son site. Ainsi, ce rapport servira lors del'évaluation du site en vue de sa mise à jour. On pourra constater, par exemple, que les étudiants utilisent lesoutils interactifs, mais très peu le contenu du texte théorique. On pourra donc guider ses efforts vers desobjectifs 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.

Guide Web Éducatif

Statistiques 135

Test

Vous avez enfin déposé votre site sur le serveur et il est maintenant accessible à la communauté. Votre travailest 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'ilrépond aux normes en vigueur.

Plus particulièrement, il faut s'attarder :

À la validité du code• À l'accessibilité du site• À son bon fonctionnement•

Guide Web Éducatif

Test 136

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 lavalidité du code HTML. Sans que vous vous en aperceviez, des erreurs peuvent subsister au sein du codepuisque la syntaxe HTML est peu stricte et les navigateurs sont tolérants. Certains détectent également lesliens 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)•

Guide Web Éducatif

Validité du code 137

Accessibilité

Il existe une multitude d'environnements de travail utilisant du matériel et des logiciels variés. Desfonctionnalités de votre site pourront ne pas être supportées par l'ordinateur d'un internaute. La configurationchoisit par celui−ci peut rendre inopérant votre site (exemple : désactiver le JavaScript). Enfin, cet internautepeut souffrir d'un handicap qui lui rend inaccessible votre site. La période de test permet de vérifier la réactionde votre site à ces situations.

Certains tests peuvent être effectués afin de déterminer l'accessibilité de votre site. Le fait d'essayer votre sitesur 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 diversesré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/)•

Guide Web Éducatif

Accessibilité 138

Fonctionnement

L'implantation d'un site Web se fait d'abord localement, afin de vérifier que tout fonctionne bien. Pour cefaire, 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 desproblèmes de structure, de navigation ou d'ergonomie.

•

Des plates−formes informatiques, des modems ainsi que des navigateurs différents pour identifier toutproblè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. Pourvous 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 outilsinteractifs et de noter toutes les défaillances, afin de nouspermettre 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éseauInternet :

aucune peu moyenne excellente

Équipement

Type d'ordinateurutilisé :

Système d'exploitation :

Nombres de RAM : Vitesse :

Grandeur de l'écran : Résolution :

Nom du navigateur etversion :

Guide Web Éducatif

Fonctionnement 139

Connexion

modem :Nombre debauds :

carte réseau : Mégabits/sec. :

modem−câble :(Vidéotron)

Mégabits/sec. :

Évaluation technique du site

Perception générale del'interface :

médiocre bonne excellente

Satisfaction à l'égard de lanavigation :

médiocre bonne excellente

Qualité technique du site : médiocre bonne excellente

Le temps d'accès en généralest :

long acceptable rapide

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 pasfonctionné ?

oui non

Identifiez :

Avez−vous constaté des erreurs defonctionnement(type 404 et autres) ?

oui non

Identifiez :

Commentaires :

À la suite de cette évaluation, le concepteur pourra plus facilement procéder aux corrections et auxajustements technologiques qui s'imposent pour l'accessibilité et le bon fonctionnement de son site éducatif.

Guide Web Éducatif

Fonctionnement 140

Évaluer un site éducatif

Grille d'évaluation pédagogique et technique d'un site Web éducatif

Conçue par : Denyse GilbertSpécialiste en application pédagogique des technologiesde 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) :AucunePeuMoyenneExcellente

É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 decouleurs (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

Guide Web Éducatif

Évaluer un site éducatif 141

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 dusite sont énoncés

.

Les objectifs dusite sont formulésen termescompréhensibles

.

Les objectifsd'apprentissagesont adéquatementidentifiés au débutde chaque chapitre

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

Crédibilité, validité etactualisation du site

1 2 3 4 5 n/a

.Le concepteur dusite est crédible

Guide Web Éducatif

Évaluer un site éducatif 142

.Le contenu du siteest valide

.Le contenu du siteest actualisé

.

Le concepteurconnaît bien sonsujet et s'exprimeclairement

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 fautse 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éalablesinformations

1 2 3 4 5 n/a

.La clientèle visée estclairement définie

.Le contenu du site estadéquat pour cetteclientèle

.

L'équipement nécessairepour naviguer dans ledocument est spécifié (letype de navigateur, saversion, le typed'équipementinformatique, lesapplications ou lesplugiciels, etc.)

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

Guide Web Éducatif

Évaluer un site éducatif 143

Le contenu 1 2 3 4 5 n/a

.

Le contenutransmiscorrespondadéquatement auxobjectifs

.Le contenu du siteest suffisammentdétaillé

.L'organisation ducontenu estcohérente

.

La bibliographie etles sourcesdocumentaires sontcorrectementidentifiées

.

Les textes sontstructurés encapsulessuffisammentclaires etcompréhensibles

.Le contenu estrédigé dans unfrançais correct

.La structuration ducontenu favorisel'apprentissage

.

L'information estsuffisante (sanssurcharged'informationsinutiles)

Les stratégiespédagogiques

1 2 3 4 5 n/a

.

Les stratégiespédagogiquesproposées sont dequalité

Guide Web Éducatif

Évaluer un site éducatif 144

.

Les stratégiespédagogiquessont diversifiées(elles permettentde répondre auxdifférents stylesd'apprentissagede la clientèle)

.L'étudiant a accèsà un calendrierdes activités

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

Les stratégiespédagogiques (suite)

1 2 3 4 5 n/a

.

Les activitésd'apprentissage etles exercices sontpertinents

.

Les activitésd'apprentissage etles exercices sontprésents à la finde chaque moduleou section

.

Le degré dedifficulté desactivitésd'apprentissageest adéquat

.

Les évaluationsfournissent àl'étudiant unerétroactionappropriée

.

L'utilisation desdifférents outilsmultimédias estefficace

Guide Web Éducatif

Évaluer un site éducatif 145

.

Le rythmed'apprentissagesuggéré estréaliste

.

Les méthodesutilisées poursusciter l'intérêtsont efficaces

.

Les stratégiesd'apprentissagesont diversifiéespour tenir comptedes différentsstylesd'apprentissage

.

Le nombred'activitésd'apprentissageest adéquat etcouvre bien toutela matière vue

.

Les méthodesd'évaluationutiliséespermettent devoir les objectifsatteints

.

Le scénariod'apprentissageest cohérent avecles objectifs

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

L'interactivité 1 2 3 4 5 n/a

.

L'étudiant a uncontrôle sur soncheminementdans le site

.

Guide Web Éducatif

Évaluer un site éducatif 146

Les rétroactionssont appropriées

.L'étudiant peutbâtir son plan deroute personnel

.

Des choixstratégiques pourun apprentissageindividualisé sontproposés

.Les élémentsinteractifs utiliséssont pertinents

.

Les élémentsinteractifsfonctionnentadéquatement

Remarques :________________________________________________________________________________________________________________________________________________

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

La navigation 1 2 3 4 5 n/a

.

En entrant dans lesite, vous avez accèsà un plan clair ou àune table desmatières détaillée

.Les choix proposés àl'intérieur des menussont clairs

. Les regroupementsdes éléments àl'intérieur des menus

Guide Web Éducatif

Évaluer un site éducatif 147

sont cohérents

.

On peut se dirigerrapidement vers uneinformationspécifique grâce aumenu ou aux outilsde la barre denavigation

.Chaque pagepossède une barre denavigation détaillée

.

Les icônes ouboutons denavigation sontexplicites

.

Dans chaquepage−écran, il estspécifié à quellesection on se trouve

.On peut facilementrevenir au menuprincipal

.On peut revoir lespages de consignesen tout temps

.

L'emplacement desboutons denavigation estuniforme sur lespages−écrans

.

On peut facilementrevenir à la page debase après avoirconsulté unhypertexte ou unhypermédia de cettepage

.

Les liens hypertexteset hypermédias sontefficaces, pertinentset logiques

.Les pages−écranssont rapidementtéléchargées

Guide Web Éducatif

Évaluer un site éducatif 148

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

Graphisme etmultimédia

1 2 3 4 5 n/a

.Le graphisme despages−écrans estuniforme

.La mise en pagesfacilite la lecture

.Les pages−écranssont équilibrées

.

Les illustrations,les schémas et lesgraphiques sontsuffisammentprécis

.

Le choix descouleurs permet delire facilement lapage−écran

.

Le son et la vidéoapportent unecontributionsignificative au site

.

La grosseur dufichier multimédia(séquence vidéo,animation, etc.) àtransférer ainsi quele plugicielnécessaire, s'il y alieu, sont indiquésadéquatement

.Les hypertextes oules hypermédiassont justifiés

. L'utilisation desdifférents objets

Guide Web Éducatif

Évaluer un site éducatif 149

multimédias estefficace

.Les pages−écranssont lisibles àl'impression

.L'animation estutilisée de façonadéquate

.Le son et/ou lavidéo sont debonne qualité

Cochez la note que vous accordez pour chaque item.

Signification :1 : pas du tout, 2 : un peu, 3 : moyennement, 4 : suffisamment, 5 : parfaitement

Appréciation générale 1 2 3 4 5 n/a

.Appréciation personnelle :intérêt soulevé, dynamismedu site

. Satisfaction pédagogique

.Perception générale del'interface

.Satisfaction à l'égard del'interface

Évaluation technique du siteOui2pts

Non0pts

n/a

.L'adresse Web est−elle facile à retenir(adresse intuitive) ?

.Le temps de transfert des pages−écransest−il adéquat ?

.

Avez−vous eu des problèmes detransfert ?Spécifiez :_______________________________

.

Guide Web Éducatif

Évaluer un site éducatif 150

Peut−on télécharger les documents dusite pour l'impression ?

.L'impression de la page−écran est−elleadéquate(la page est entière et lisible) ?

.

Avez−vous identifié des chemins encul−de−sac ?Identifiez :_______________________________

.

Avez−vous constaté des erreurs defonctionnement (type 404 et autres) ?Identifiez :_______________________________

.

Les éléments multimédias sont−ilsaccessibles sans avoir à fairel'installation de plugiciels ? Sinon,quels plugiciels avez−vous installés :_______________________________

.

Lorsqu'il est nécessaire d'installer desplugiciels, avez−vous réussi sansdifficulté à faire fonctionner lesapplications qui demandent unplugiciel ?

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

Évaluer un site éducatif 151

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 APTICUniversité Laval

Guide Web Éducatif

Évaluer un site éducatif 152

Guide Web Éducatif

Évaluer un site éducatif 153

BibliographieAPPLE 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 & SchusterMacmillan, 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 CreatingWeb,[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 determinologie du Québec, [en ligne].http://www.olf.gouv.qc.ca/ressources/bibliotheque/dictionnaires/Internet/Index/index.html [siteconsulté 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 eninformatique 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/ [siteconsulté le 8 octobre 2002].

•

WEINMAN, Linda, Conception graphique de vos pages web, développer images et multimédia sur leweb, 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, [enligne]. http://www.w3.org/MarkUp/ [site consulté le 8 octobre 2002].

•

Bibliographie 154