Plan de la rencontre 8

– Retour sur les cours précédents

– Conception d’un site WWW

– Outils de développement de sites WWW

• Word

• Introduction à Netscape Composer

– Activité : bâtir des pages WWW

Pourquoi concevoir un site WWW éducatif?

• Pour échanger du matériel pédagogique avec les autres enseignants

• Pour diffuser les productions des élèves et informer les parents des activités de l ’école

• Pour exploiter les propriétés multimédias du Web

• Pour faciliter l ’accès au matériel par les élèves

(exemple: http://www.csbf.qc.ca/Assom/ )

Créer simplement un site WEB éducatif

C ’est possible!C ’est possible!

Par David Longpré

SERPEM

(adapté par Jean Loiselle)

Le concept

• Créer une page WEB se fait dans le langage code HTML.Créer une page WEB se fait dans le langage code HTML.

• 1 fichier HTML = 1 page WEB.1 fichier HTML = 1 page WEB.

• Les images ne font pas partie du fichier mais sont appelées Les images ne font pas partie du fichier mais sont appelées (lien)(lien) par le fichier. par le fichier.

• Plusieurs pages Plusieurs pages (plusieurs fichiers)(plusieurs fichiers) forment un site. forment un site.

• On place tous les fichiers On place tous les fichiers (pages et images)(pages et images) du site dans un du site dans un dossier.dossier.

• On dépose le dossier sur un serveur.On dépose le dossier sur un serveur.

Concepts associés au Web

• html (« hypertext language Markup »):langage informatique utilisé pour créer des pages qui peuvent être affichables sur le Web

• Fureteur (« browser »):logiciel utilisé pour naviguer sur le Web

• Éditeur de pages html:outil permettant de réaliser des pages html

Conception d ’un site

• Planifier la structure du site

• Réaliser un prototype

• Raffiner le développement et la mise en page

• Vérifier et mettre à jour

Exemple de structure du site• Accueil et menu principal

– Présentation personnelle– Évaluation de sites et d ’un logiciel

• Site 1 -> grandes lignes -> texte suivi

• Site 2 -> grandes lignes -> texte suivi

• Logiciel 1 -> grandes lignes -> texte suivi

– Scénario d ’utilisation• Objectifs -> grandes lignes -> texte suivi

• déroulement-> grandes lignes -> texte suivi

• ...

– Intérêt du scénario• -> grandes lignes -> texte suivi

Exemple de réseau de liens

Menu.htmMenu.htm

eval.htmeval.htm pres.htmpres.htm scenario.htmscenario.htm

site1.htmsite1.htm

(Tr.2)

Autre site WEBAutre site WEB

obj.htmobj.htm activ.htmactiv.htm

Les outils disponibles• Word

– offre des possibilités (limitées) de sauvegarde en format html

• Netscape Composer

– élément de Netscape Communicator (gratuit)

• Éditeurs commercialisés: (Frontpage, WebExpert, DreamWeaver, Pagemill)

– possibilités accrues

Sites intéressants pour l a Sites intéressants pour l a conception et l ’utilisation conception et l ’utilisation

pédagogique du WEBpédagogique du WEB• http://www.clic.net/~mephisto

• http://www.uqtr.uquebec.ca/OutilsWeb/• http://WWW.UQTR.UQuebec.ca/

OutilsWeb/Logiciel/Netscape/