6-5 Je sais ce qu’est un site Web, son architecture et son adresse URL

Après avoir vu ce qu’était le Web (un ensemble de sites Web reliés entre eux par des hyperliens), les élèves vont maintenant travailler sur les notions de site Web, page Web, architecture, signe passeur et adresse URL. Tout ceci étant lié, il me semble difficile de les séparer dans plusieurs séances sans prendre le risque que l’élève n’en comprenne pas les liens entre ces notions.

6-5 site web et url signes passeurs architecture

Cette séance est inspirée par la séance « 2.1 : les sites Web : principes élémentaires » du classeur EMI édité chez Génération 5.

Au préalable, il faut choisir un site Web en lien avec une thématique de l’année (EDD, HIDA …) ou liée à la recherche demandée par un professeur disciplinaire. J’ai privilégié l’ENT du collège, histoire qu’on s’y arrête un peu ensemble, que les élèves peu utilisateurs le deviennent plus car c’est un des « outils scolaires » de leur quotidien !

Les élèves sont en binôme. Je note à chaque séance qui manipule pour que tous les élèves aient manipulé autant de fois et afin d’être certaine qu’aucun ne passe à travers le filet (les élèves n’aimant pas la souris ou étant trop lents sont vite pris en main par un camarade plus entreprenant. Du coup, ces élèves, souvent, ne manipulent jamais). Quand je dis « manipuler« , je veux dire apprendre les gestes propres au maniement de la souris (qui, des fois, ressemble à la pêche au canard chez les enfants de maternelle) et du clavier, ainsi que les gestes propres à la navigation hypertextuelle. Ces gestes, associés à la verbalisation vont les aider à comprendre leurs usages.

« Les répétitions d’actions concourent à la mise en place de « gestes » (que l’on peut qualifier selon les théories de schèmes, d’habitus, de disposition…). La relation entre les gestes appropriés et la conceptualisation, permettant une appréhension beaucoup plus profonde des systèmes, est au cœur d’une culture informatique à construire, assurant un lien entre les expériences des utilisateurs et les concepts sous-jacents aux systèmes utilisés et que l’utilisation seule ne permet de découvrir ou de construire. Le chaînon manquant est souvent la langue, c’est-à-dire la verbalisation des situations, permettant de prendre de la distance par rapport aux actions et de construire les concepts. »
Beatrice Drot-Delange, Eric Bruillard. Éducation aux TIC, cultures informatiques et du numérique : quelques repères historiques. Études de Communication. Langages, information,médiations, 2012, 38, pp.69-80. <sic 00768672 >

6-5 2015 page 1

Activité 1 : Le vocabulaire

Un élève lit l’encadré. J’explique ensuite les mots

  • « structure » : j’explique le mot en faisant référence à la séance 6-3 sur les clés d’accès à l’info dans un doc papier : être structuré c’est avoir une forme, des parties distinctes, c’est l’inverse d’un texte sans aucun paragraphe, ni titre, ni sous-titre…
  • « architecture » : analogie à la maison, à son entrée, à l’accueil chez le médecin ou dans les grandes surfaces, une entrée ou un accueil ouvre sur de grandes pièces dans lesquelles des objets et meubles sont regroupés en fonction de l’usage de la pièce. On ne met pas de baignoire dans un escalier (j’ai pris cet exemple à chaque fois, tout en ayant en tête la maison de ma grand-mère, en Creuse, avec sa baignoire dans l’escalier … pas d’autre endroit pour elle à l’époque!)

Je ne dis rien pour les signes passeurs car les élèves vont trouver seuls ce que c’est.

Partie 1 : L’élève qui manipule déplace sa souris dans la page Web. Le camarade doit alors regarder ce que devient la flèche du curseur de la souris.

  • Réponse : « une main ».
  • Moi : « cliquez. Que se passe-t-il? »
  • Eux : ça change / il se passe quelque chose/on change de page / le menu s’étire …
  • Moi : « trouvez toutes les formes sur lesquelles la main apparaît »
  • Réponse : des mots, des logos, des images, des formes.

Les élèves dessinent ensuite la forme de la main à l’endroit prévu (partie 1).

On complète le texte à trous grâce à la séance 6-4 où il est écrit « liens hypertextes »–> si ce sont des mots. Je leur explique que si c’est une forme ou un image, c’est un hyperlien.

On complète ensuite le texte à trou encadré avec les mots « mots, formes, images ».

Les « signes passeurs » :  j’aime ce terme car il est plus significatif pour les élèves que « lien hypertexte ». Signe passeur = il se passe quelque chose lorsque je clique : j’agis, je lis, je vois. Ce terme de Emmanuel Souchier définit tout signe outil (bouton, icône, flèches de navigation, liens hypertextes …) permettant d’agir sur le texte en ligne. J’explique par exemple aux élèves que le bouton « play » des vidéos publiées sur Youtube est un signe passeur puisqu’ils agissent sur la lecture de la vidéo en ligne.

Partie 2 : L’élève qui manipule clique sur n’importe quel signe passeur pour changer de page Web. Les élèves sont donc devant des pages Web différentes et doivent trouver de quoi celles-ci sont toutes composées :

  • titre
  • information

Je leur demande ensuite de regarder l’adresse URL dans la barre du navigateur. L’élève qui manipule clique sur un signe passeur pendant que son binôme regarde l’adresse URL. Celle-ci, alors, change.

La page Web a donc son adresse URL propre.

Cela donne donc en partie 2 :

  • titre
  • informations
  • adresse URL

Partie 3 : Les élèves doivent définir ce qu’est un site Web a partir de la partie 1 et partie 2.

Un site Web est constitué de pages Web reliées entre elles par des liens hypertextes.

 

Activité 2 : L’adresse URL

Cette partie est explicative car elle sera utilisée dans une séance suivante. Elle consiste à comprendre que l’adresse URL du site Web est constituée de trois parties dont la première est le protocole propre au Web sur le réseau Internet (comme c’est un peu compliqué pour les 6°, je leur explique que s’ils ont oublié dans les 5 minutes ce n’est pas grave, sinon, ils pourront briller en société avec cette connaissance. Ce qui compte, c’est de comprendre que la 1ère partie de l’adresse URL est une sorte de clé pour être sur le Web), celle du milieu est le nom du site (la plus importante), et la troisième est l’extension du domaine (le « .com » ne veut plus rien dire car on peut maintenant acheter l’extension que l’on veut. En revanche, le « .gouv.fr » est important à connaître car propre au gouvernement français donc les informations sont fiables)

Activité 3 : exercice sur l’architecture d’un site Web

6-5 2015 page 2

Je leur propose de se mettre dans la peau d’une jeune startup à qui je viens passer commande d’un site Web sur le climat (notre thématique EDD de cette année au collège).

Je leur explique que je veux un site sur le climat proposant des informations sur les phénomènes naturels et les actions néfastes de l’homme sur le climat.

Je leur demande d’abord comment ils vont appeler la première page de mon site Web –> la page d’accueil.

Puis, je demande combien de grandes pièces vont constituer mon sites Web –> 3 (les 3 cases grises). Quels titres allons-nous leur donner ?

  • les phénomènes naturels
  • les actions néfastes …
  • Qui sommes-nous ?

On complète ensuite l’architecture avec les titres des pages Web correspondant à chaque grande pièce du sommaire. Je fais en sorte que chaque élève participe à la construction de l’architecture. Si certains ne lèvent pas le doigt, je les questionne vers la fin. Fonctionner ainsi (les élèves me donnent les réponses que j’écris au tableau au fur et à mesure) permet aux élèves hésitants de comprendre le fonctionnement de l’architecture grâce aux réponses des camarades et de me proposer ensuite une réponse juste. Il me semble que leur donner cet exercice à faire en autonomie aurait été contre-productif, les élèves en manque de confiance en eux n’auraient rien fait.

Publicités

14 commentaires Ajoutez le vôtre

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s