Sommaire

Unité 10
La démarche de projet (suite)

Séance 1 A. Introduction

B. Thème 1 : La recherche documentaire réalisée dans la séquence 5

C. Thème 2 : Le planning du développement du logiciel

D. Thème 3 : Les logiciels nécessaires pour réaliser un site

Séance 2 A. Thème 4 : Le bandeau (logiciel libre PhotoFiltre)

B. Thème 5 : Les pages H.T.M.L. (logiciel libre KompoZer)

1- La page « Accueil »

2- La « multiplication » de la page « Accueil »

3- Le remplissage des zones « Recherche » des pages du site

C. Thème 6 : Les liens hypertexte (logiciel libre KompoZer)

Séance 3 A. Thème 7 : Le navigateur (logiciel libre Mozilla Firefox)

B. Thème 8 : Les tests du site

C. Thème 9 : La validation du projet

D. Synthèse de l’unité 10 à retenir

Si tu as accès à un ordinateur et à Internet :

Pour accéder aux liens indiqués dans le livret, regarde le cours sur le site de ta classe en ligne et clique
directement sur les liens affichés à l’écran.
 séance 1 — Unité 10

Séance 1
Le projet Site

A Introduction
1 Activités élèves

Le projet que tu vas réaliser se décompose en deux parties :

– dans l’unité 5,
et
– dans cette unité 10.
Le travail a commencé à être réalisé dans l’unité 5, avec l’étude de l’exercice 18 de la partie D de la
séance 3. Il est indispensable pour l’unité 10.
Tu veilleras à bien sauvegarder ton travail régulièrement pour aboutir à un site partiel (six pages) .
Dans cette unité, lors de l’étude des différentes séances, tu imagineras que tu travailles dans un
collège, avec des camarades dans un groupe de quatre élèves, en tenant compte des contraintes
d’équipement d’une salle de Technologie concernant le matériel.

C e que je vais apprendre :

Participer à l’organisation et au déroulement de projets.
Identifier un besoin et énoncer un problème technique, identifier les conditions, les contraintes
(normes et règlements) et les ressources correspondantes.
Imaginer des solutions en réponse à un besoin.
Réaliser, de manière collaborative, le prototype de tout ou partie d’un objet pour valider une
solution.
Présenter à l’oral et à l’aide de supports numériques multimédia des solutions techniques au
moment des revues de projet.
2 Thématique étudiée

Comment gérer la démarche de projet ? (Suite)

B Thème 1 : La recherche documentaire réalisée dans l’unité 5

j e sais déjà
Dans l’unité 5 tu as réalisé une maquette papier du site destiné au musée « ObjetsCurieux ». Tu
as choisi un objet technique et tu as fait une recherche documentaire sur l’évolution de cet objet
technique.

© Cned, Technologie 3e — 119

 Unité 10 — séance 1

Exercice 1
Pour démarrer cette unité, tu vas relire l’unité 5 et ouvrir les fichiers que tu as soigneusement
enregistrés.
Ci-dessous, tu peux revoir la maquette « Papier » de la page « Accueil » du site Le Téléphone
(enregistrée sous le nom « pageaccueil ») qui est l’exemple de ce cours :

Tu ouvriras aussi la maquette « Papier » de la page « Évolution 1 » du site Le Téléphone

(enregistrée sous le nom « evolution1 »).

Exercice 2
Dans notre exemple, nous avons choisi l’évolution du téléphone.
Nous avons six pages :
 page n° 1 : la page Accueil (enregistrée sous le nom pageaccueil)
 page n° 2 : le téléphone Bell (enregistrée sous le nom evolution1)
 page n° 3 : le téléphone Ader (enregistrée sous le nom evolution2)
 page n° 4 : le dynaTAC 8000X (enregistrée sous le nom evolution3)
 page n° 5 : les portables (enregistrée sous le nom evolution4)
 page n° 6 : les smartphones (enregistrée sous le nom evolution5)
Pour rappel, les noms d’enregistrement ne doivent pas comporter d’espace, de majuscule et de
caractère spécial car cela poserait des problèmes dans la création des pages HTML à l’aide du
logiciel libre KompoZer.
Dans l’unité 5, avec l’exercice 12, tu as sans doute choisi un autre objet technique.

Tu as donc choisi l’évolution .............….......…..…..……..…..…...…..…………….. .

Recopie ci-dessous les noms des différentes parties de ton site, relatives à un autre objet
technique que le téléphone.

120 — © Cned, Technologie 3e

 séance 1 — Unité 10

Tu as désormais les six pages suivantes :

 page n° 1 : la page « Accueil » (enregistrée sous le nom pageaccueil)

 page n° 2 : …………………………………. (enregistrée sous le nom evolution1)

 page n° 3 : …………………………………. (enregistrée sous le nom evolution2)

 page n° 4 : …………………………………. (enregistrée sous le nom evolution3)

 page n° 5 : …………………………………. (enregistrée sous le nom evolution4)

 page n° 6 : ………………..……………….. (enregistrée sous le nom evolution5)

Remarque : pour réaliser ce travail, nous utiliserons ces noms de fichiers pour pouvoir comprendre et
suivre la procédure de réalisation du site.

C Thème 2 : Le planning du développement du logiciel

Observe ci-dessous, l’organisation du projet : tu as choisi le thème et fait la recherche
documentaire associée.

© Cned, Technologie 3e — 121

 Unité 10 — séance 1

Tu vas maintenant mettre en forme le site en créant le bandeau (logiciel PhotoFiltre) et les fichiers
H.T.M.L. du site avec les liens hypertexte (à l’aide du logiciel KompoZer).

D Thème 3 : Les logiciels nécessaires pour réaliser un site

Voici les adresses possibles de téléchargement des logiciels libres :

PhotoFiltre http://www.photofiltre-studio.com/pf7.htm
KompoZer http://www.kompozer.net/
Mozilla Firefox https://www.mozilla.org/fr/firefox/new/

122 — © Cned, Technologie 3e

 séance 2 — Unité 10

Séance 2
La création du site

A Thème 4 : Le bandeau (logiciel libre Photofiltre)

Il s’agit de réaliser le bandeau qui sera placé en haut de chaque page de ton site.
Voici ci-dessous un exemple de bandeau simple pour le site Évolution du téléphone :

Tu as sans doute déjà installé le logiciel libre « PhotoFiltre » sur un ordinateur

que tu utilises lors de l’étude de l’unité 5 avec la résolution de l’exercice 14.
Démarre alors le logiciel « PhotoFiltre » en double-cliquant sur l’icône, comme
ci-contre.

Crée un nouveau document

© Cned, Technologie 3e — 123

 Unité 10 — séance 2

Sélectionne la taille souhaitée du bandeau : 900 × 150 pixels.

Valide la taille souhaitée, en cliquant sur Ok.

La zone de travail apparaît.

124 — © Cned, Technologie 3e

 séance 2 — Unité 10

Sélectionne une zone « Texte » en cliquant sur le bouton « T ».

Saisis au clavier de l’ordinateur le texte du titre de ton site, comme l’exemple ci-dessous.

« L’évolution du téléphone »

Place le texte de préférence au centre de la zone de travail.

Puis, comme dans tout logiciel de dessin (par exemple « LibreOffice Dessin » nommé
« LibreOffice Draw »), réalise le « décor » du bandeau en utilisant les outils disponibles :
– Outil Remplissage, Outil Aérographe, Outil Pipette…
On trouve ces outils dans la palette d’outils, à droite de l’écran.

© Cned, Technologie 3e — 125

 Unité 10 — séance 2

Une fois satisfait, enregistre le document (instruction > Fichier > Enregistrez sous …)
sous le nom bandeau.jpg dans ton dossier de travail (valide une compression d’image 80 %, cela
suffit).

B Thème 5 : Les pages H.T.M.L. (logiciel libre KompoZer)

Les pages H.T.M.L. sont des « écrans » réalisés (codés) à l’aide d’un langage qui permet de
réaliser des liens hypertexte. Ce langage est un langage de « balisage » (de « marquage » ou de
« structuration »).
Les lettres H.T.M.L. signifient HyperText Markup Language.
Les « balises » permettent d’indiquer une bonne présentation du document sur le Web (la page)
et les liens entre les pages du site ou sur d’autres sites.

1 La page « Accueil »

La page « Accueil » est le premier écran qui apparaît lorsqu’on arrive sur le site.
La page « Accueil » est constituée d’un cadre à un centimètre du bord, d’un bandeau, de six
étiquettes, d’une étiquette « dynamique » et d’une zone « Recherche ».

Le bandeau

Les six étiquettes

La zone « Recherche »

L’étiquette « dynamique »

126 — © Cned, Technologie 3e

 séance 2 — Unité 10

Tu vas commencer à réaliser la page Accueil en suivant les instructions ci-après.

Pour cela, tu lances le logiciel « KompoZer ».
Tu vas suivre les différentes étapes ci-après, afin d’obtenir la page Accueil.
Pour créer un tableau : déplace le pointeur de la souris dans le menu « Tableau » puis dans le
sous-menu « Insérer », clique sur « Tableau… ».

Sélectionne l’onglet « Précisément » et écris le nombre de lignes « 8 ».

Le nombre de colonnes est « 2 » par défaut, tu ne le modifies pas.

Tu valides le choix en cliquant sur « OK ».

© Cned, Technologie 3e — 127

 Unité 10 — séance 2

L’écran se présente alors comme ci-dessous :

Maintenant, il faut que tu mettes chaque cellule (chaque case) aux bonnes dimensions pour
obtenir la page « Accueil » souhaitée.
Pour cela, tu déplaceras le curseur des tailles sur les réglettes.

Voici les paramétrages à faire :

Colonne gauche : 260 pixels de largeur.
Colonne droite : 640 pixels de largeur.

128 — © Cned, Technologie 3e

 séance 2 — Unité 10

Première ligne : 150 pixels de hauteur.

Lignes 2, 3, 4, 5, 6, 7 : 50 pixels de hauteur.
La dernière ligne reste à : 26 pixels de hauteur, par défaut.

Une fois ce tableau obtenu, tu fusionnes les cellules pour obtenir la page « Accueil » correcte.
Déplace le pointeur de la souris dans le menu « Tableau » puis clique sur « Fusionner les cellules
sélectionnées ».

Tu crées la zone « Recherche » en faisant la même opération.

Tu fusionnes les cellules sous le bandeau à droite.
Déplace le pointeur de la souris dans le menu « Tableau » puis clique sur « Fusionner les cellules
sélectionnées ».

© Cned, Technologie 3e — 129

 Unité 10 — séance 2

Tu obtiens l’écran suivant. Tu reconnais alors l’écran souhaité de la page « Accueil ».

Enregistre le travail dans le dossier « Projet Site Nom » sous le nom « pageaccueil » (type Fichier
HTML Files, par défaut), sans espace, sans majuscule et sans caractère spécial.
L’étiquette « Dynamique » permettra d’agrandir la zone « Recherche » sans déformer le bandeau,
ni les étiquettes du site.
Maintenant il faut copier-coller le bandeau au niveau de la première ligne.
Déplace le pointeur de la souris dans le menu « Insertion » puis clique sur « Image… ».

130 — © Cned, Technologie 3e

 séance 2 — Unité 10

Dans l’onglet Emplacement, clique sur le dossier « Parcourir » (comme ci-contre) et ouvre le
fichier de l’image « bandeau.jpg ».
Sélectionne « Ne pas utiliser de texte alternatif ».
Valide en cliquant sur OK. Le bandeau est inséré.
En cliquant sur chaque étiquette, écris les différentes parties de ton site : complète les étiquettes
(Accueil, Le téléphone Bell, le téléphone Ader…).
Formate chaque étiquette pour obtenir un résultat harmonieux : même taille de caractères, même
style de caractères, caractères centrés…
Résultat :

La page « Accueil » du site est « presque » terminée !

Enregistre de nouveau, en cliquant cette fois-ci sur le bouton « Enregistrer ».

2 La « multiplication » de la page « Accueil »

Une fois, la page « Accueil » correcte, il faut la « multiplier » c’est-à-dire l’enregistrer sous les
noms suivants :
• pageaccueil
• evolution1
• evolution2
• evolution3
• evolution4
• evolution5
Pour cela, déplace le pointeur de la souris dans le menu « Fichier » puis clique sur « Enregistrer
sous… » et modifie chaque nom d’enregistrement.

© Cned, Technologie 3e — 131

 Unité 10 — séance 2

Ensuite, il faudra aussi faire correspondre le nom d’enregistrement du fichier (en haut à gauche
de l’écran) avec le nom de la page du logiciel KompoZer (onglet).
Pour cela, pour chaque page enregistrée, déplace le pointeur de la souris dans le menu « Format »
puis clique sur « Titre et propriétés de la page… » et modifier « le titre » de la page : par exemple,
remplacer pageaccueil par evolution1, et ainsi de suite : evolution2, evolution3, evolution4,
evolution5 (sans espace, sans majuscule et sans caractère spécial).
Tu valides, à chaque fois, le changement de nom en cliquant sur « OK ».

Referme chaque page enregistrée et renommée en cliquant sur la croix rouge en haut à droite de
chaque page.

3 Le remplissage des zones « Recherche » des pages du site

Maintenant que tu as la page « Accueil » et les cinq pages « Evolution », tu vas ouvrir une à une
chaque page dans l’ordre du site : pageaccueil, evolution1, evolution2, evolution3, evolution4.
Le logiciel KompoZer ne peut ouvrir que cinq pages de cette taille à la fois, tu ouvriras la page
evolution5 après.
Dans ton document Recherche Site.odt réalisé à l’unité 5 avec l’exercice 17, enregistré dans
le dossier Projet Site Nom, tu as rédigé la recherche documentaire (texte + deux images) pour
chaque page.
- Pour le texte, tu copies puis tu colles le résultat de tes recherches dans les zones Recherche : le
texte peut être facilement saisis avec la fonction « copier-coller ».
- Pour les images (photos), déplace le pointeur de la souris dans le menu « Insertion » puis clique
sur « Image… », puis saisis l’adresse du fichier de l’image (parcourir).
Sélectionne bien Ne pas utiliser de texte alternatif.
Valide en cliquant sur OK. La photo est insérée.

132 — © Cned, Technologie 3e

 séance 2 — Unité 10

Remarque : pour placer correctement chaque photo : tu fais un clic droit sur la zone Propriétés
Cellule… puis tu cliques sur Alignement du contenu puis OK ou tu fais un clic droit sur la photo
insérée (Propriétés Image… puis Apparence puis Placement du texte puis OK)
Tu peux tester chaque page en les ouvrant avec le navigateur Mozilla Firefox.
Avec un gestionnaire des fichiers, fais apparaître les noms des pages (exemple : evolution1.html).
Puis, fais un « Clic droit » sur le nom de fichier de la page, puis clique sur Ouvrir avec Mozilla
Firefox.
Sinon, tu peux lancer Mozilla Firefox et sélectionner Fichier puis Ouvrir.

Tu as donc maintenant dans ton dossier de travail Projet Site Nom les fichiers suivants :

Ÿ Recherche Site.odt
Ÿ bandeau.jpg
Ÿ les différents fichiers des photos libres de droit (*.jpg)
Ÿ pageaccueil.html
Ÿ evolution1.html
Ÿ evolution2.html
Ÿ evolution3.html
Ÿ evolution4.html
Ÿ evolution5.html

C Les liens hypertexte

Un lien hypertexte est une association « Mot-Adresse » d’une page Internet.
Plusieurs vocabulaires signifient la même chose : lien hypertexte, hyperlien ou encore lien Web…
On associe un ensemble de caractères à un lien.
Le lien hypertexte permet de se déplacer entre les pages d’un même site ou d’un autre site.
Dans notre site, lorsqu’on clique sur le texte d’une étiquette, la page correspondante s’affiche.
Par exemple, le client voit à l’écran la page Accueil et veut consulter la page du téléphone Bell : il
place le curseur sur la deuxième étiquette « Le téléphone Bell » et fais un clic gauche.
La page evolution1 s’ouvre à l’écran et il peut découvrir le téléphone Bell.
Il faut donc « distribuer », « faire correspondre », « associer » les textes des étiquettes aux pages
du site en créant un lien hypertexte.

Remarque : il est inutile de créer un lien sur la page elle-même.

© Cned, Technologie 3e — 133

 Unité 10 — séance 2

Il faut ouvrir chaque page, format html, avec le logiciel KompoZer.

Il faut surligner le texte de chaque étiquette, puis cliquer sur le bouton Lien.
Dans l’écran ci-dessous, nous créons un lien entre l’étiquette « Le téléphone Bell » et la page
« evolution1.html ».

Bouton Lien

Remarque : Dans les propriétés du lien, pour « Lien texte », nous pouvons vérifier le texte qui a été
surligné.
Pour résumer, dans la page Accueil, tu dois créer cinq liens hypertexte sur les textes suivants :
Ÿ Lien entre Le téléphone Bell et la page evolution1.html,
Ÿ Lien entre Le téléphone Ader et la page evolution2.html,
Ÿ Lien entre Le dynaTAC 8000X et la page evolution3.html,
Ÿ Lien entre Les portables et la page evolution4.html,
Ÿ Lien entre Les smartphones et la page evolution5.html.
Inutile de faire le lien entre Accueil et la page pageaccueil.html ! Cela ne sert à rien de faire un
lien sur la page elle-même.
Sur la page evolution1, il faut faire les liens suivants :
Ÿ Lien entre Accueil et la page pageaccueil.html,
Ÿ Lien entre Le téléphone Ader et la page evolution2.html,
Ÿ Lien entre Le dynaTAC 8000X et la page evolution3.html,
Ÿ Lien entre Les portables et la page evolution4.html,
Ÿ Lien entre Les smartphones et la page evolution5.html.
Et ainsi de suite pour chaque page « .html »…
Bien entendu, tu réalises tout ceci sur le projet Site dont tu as choisi le thème (Unité 5).

134 — © Cned, Technologie 3e

 séance 3 — Unité 10

Séance 3
Les revues de projet et la validation du projet

A Le navigateur (logiciel libre Mozilla Firefox)

Le navigateur est un logiciel (un programme) qui permet d’afficher des documents au format
H.T.M.L. (pages H.T.M.L.), format des pages Internet. En Anglais, on parle de Web Browser.
Les navigateurs les plus connus sont : Mozilla Firefox, Google Chrome, Internet Explorer, Safari…
On y trouve une barre de menus déroulants, une barre d’outils, une barre d’état et une barre
d’adresse. La barre de recherche peut être la fusion de la barre d’état et de la barre d’adresse
pour une utilisation simplifiée (cas de Google Chrome).
Chaque logiciel a quelques spécificités propres.
Pour tester le Projet Site, tu utiliseras Mozilla Firefox puisque ce travail est guidé de façon
à fonctionner avec le navigateur Mozilla Firefox.

B Les tests du site

Tu as désormais le dossier de travail complet Projet Site Nom :
Ÿ Recherche Site.odt
Ÿ bandeau.jpg
Ÿ les différents fichiers des photos libres de droit (*.jpg)
Ÿ pageaccueil.html
Ÿ evolution1.html
Ÿ evolution2.html
Ÿ evolution3.html
Ÿ evolution4.html
Ÿ evolution5.html
Pour tester le site, il te suffit d’ouvrir avec Mozilla Firefox, le fichier « pageaccueil.html ».

Remarque : Si une page ne s’ouvre pas correctement quand tu cliques (avec un clic gauche) sur le texte
de l’étiquette, il te faut recréer le lien correctement (voir procédure de la page précédente), puis de
nouveau, tester le site.

© Cned, Technologie 3e — 135

 Unité 10 — séance 3

C La validation du projet
En résumé, tu as réalisé un site à l’aide de logiciels libres.
Le projet est validé si une fois ouvert avec le logiciel Mozilla Firefox, il est possible de se déplacer
dans le site sans erreur.

D Synthèse de l’unité 10 à retenir

Pour réaliser un site, il faut savoir clairement ce qu’on souhaite y afficher. Il faut concevoir
un plan et réaliser une maquette « Papier » de chaque page du site. C’est une méthode simple et
efficace pour visualiser le futur résultat et un bon support d’échanges lors de la revue de projet.

Les droits d’auteur doivent être respectés pour toute publication sur Internet. C’est la loi !

Les logiciels libres utilisés sont LibreOffice Writer, PhotoFiltre, KompoZer et Mozilla Firefox.

La méthode décrite dans cette unité n’est pas la seule façon de réaliser un site mais elle permet de
bien comprendre la démarche du projet et les liens logiques d’un site.

Exercice 1
Il n’y a pas de corrigé pour cet exercice.

Exercice 2
Il n’y a pas de corrigé pour cet exercice.

136 — © Cned, Technologie 3e