Exercices: Créer et publier un site web ou un blog

Expliquer avec tes mots la différence entre une page web et un site web, en utilisant la comparaison avec un livre : ce que serait chaque feuille et ce que serait le livre complet. Donner un exemple de site web que tu connais et nommer deux de ses pages.

Quand tu visites un site, deux programmes interviennent : le navigateur de ton ordinateur et le serveur où se trouve le site. Expliquer ce que fait chacun (qui demande la page, qui la stocke et l'envoie, qui l'affiche) et ce qui se passe si le serveur est éteint.

La figure montre le schéma de mise en page typique d'une page web, avec ses quatre zones, mais le nom de l'une d'elles est caché.

Indiquer quelle zone est cachée et ce qu'elle contient normalement, et expliquer à quoi sert chacune des trois autres zones de la page.

Le HTML ne « programme » pas la page : il la décrit avec des balises qui indiquent ce qu'est chaque chose. Expliquer ce qu'est une balise HTML en utilisant la comparaison avec les surligneurs de couleur avec lesquels tu annotes une leçon (ceci est un titre, ceci est un paragraphe) et dire quelle différence il y a entre le contenu et les balises.

Associer chaque balise HTML à ce qu'elle place dans la page : (a) <h1>, (b) <p>, (c) <img>, (d) <a>, avec ces fonctions : un lien vers une autre page, une image, le titre principal et un paragraphe de texte. Puis dire laquelle des quatre a toujours besoin d'une adresse indiquant où se trouve la ressource.

Aujourd'hui, on peut créer un site web sans écrire de code, avec des créateurs de sites comme Google Sites ou WordPress. Expliquer ce qu'est un créateur de sites web, comment on y travaille (glisser des blocs, choisir des modèles) et quel avantage cela présente pour quelqu'un qui débute.

La classe va créer le site web du groupe. Classer ces contenus en « peuvent être publiés » ou « ne doivent pas être publiés », en justifiant chaque cas : le nom du collège, la photo de la façade de l'établissement, les noms et prénoms complets de tous les élèves, les travaux de la classe signés uniquement du prénom, l'emploi du temps personnel d'un élève et une description des activités du groupe.

Un blog est un site web mis à jour avec de nouveaux articles, classés du plus récent au plus ancien. Expliquer quelle différence il y a entre un blog et un site « vitrine » (celui d'un magasin, qui ne change presque pas) et donner un exemple de thème qui conviendrait bien à chacun.

Lire cet extrait de HTML et décrire comment la page s'affichera dans le navigateur, élément par élément : <h1>Le coin de Manon</h1>, <p>Bricolages et recettes faciles.</p>, <img> avec une photo de biscuits, <a> avec le texte « Voir la recette complète ». Indiquer quelle balise produit chaque partie.

Une pâtisserie veut un site simple avec : une présentation, des photos de ses gâteaux, les horaires et une carte avec l'adresse. Concevoir sa structure : quelles zones aura la page d'accueil (en-tête, menu, contenu, pied de page), ce qui figurera dans chacune et quelles deux pages secondaires tu relierais depuis le menu.

Ces étapes pour publier un site avec un créateur de sites sont en désordre : (a) vérifier l'affichage sur mobile et sur ordinateur, (b) choisir un modèle, (c) réfléchir aux contenus, (d) cliquer sur « publier » pour lui donner une adresse sur internet, (e) ajouter les textes et les images. Les remettre dans l'ordre et expliquer pourquoi la vérification doit avoir lieu avant la publication.

La figure montre l'arbre des balises d'une page web très simple : comment certaines balises en contiennent d'autres, mais deux balises sont cachées.

Trouver quelles sont les deux balises cachées à l'aide des indices sous chaque case, et expliquer avec tes mots ce que signifie qu'une balise « dépend » d'une autre dans l'arbre.

Comparer la création d'un site en écrivant du HTML à la main avec sa création dans un créateur de sites sans code : un avantage et une limite de chaque voie. Puis recommander l'une des deux pour chaque cas : (a) le site du club de lecture, prêt en une semaine ; (b) apprendre comment fonctionne internet de l'intérieur.

La classe crée un blog sur les quartiers du village ou de la ville. Planifier ses trois premiers articles : titre de chacun, deux contenus qu'il comportera (texte, photo, interview, carte) et quelle rubrique du menu lui correspond. Expliquer pourquoi il est utile de planifier avant de toucher à l'ordinateur.

Sur le site du lycée (ou du collège), des photos des activités sont publiées. Rédiger trois règles de publication responsable pour ce site en réfléchissant à : quels élèves peuvent être reconnaissables, quelles données personnelles ne doivent pas accompagner les photos et quelle autorisation il faut obtenir des familles. Justifier chaque règle.

Les images d'un site web comportent un texte alternatif (l'attribut « alt ») qui décrit la photo. Expliquer qui en a besoin (les personnes qui utilisent des lecteurs d'écran) et écrire un bon texte alternatif pour ces deux images du blog de la classe : (a) la photo de l'équipe gagnante du tournoi d'échecs et (b) un diagramme en barres montrant la fréquentation du club chaque mois.

Choisir le site web d'un commerce ou d'une association de votre commune que vous connaissez (ou en imaginer un réaliste) et l'analyser : quelles zones comporte sa page d'accueil, quels contenus propose-t-elle, que manque-t-il et que faudrait-il enlever. Proposer trois améliorations concrètes de structure ou de contenu et les justifier.

Un groupe d'élèves a créé ce fragment de code HTML pour la fiche de l'équipe de futsal du collège :

<h1>Équipe Minimes</h1>

<img src="equipo.jpg">

<a href="calendario.html">Cliquez ici</a>

Lors de l'audit de la page, deux défauts ont été détectés :

1. Si l'image ne se charge pas à cause d'un problème de réseau, seule une icône cassée apparaît à l'écran, sans aucune explication.

2. Si une personne malvoyante utilise un lecteur d'écran, elle ne sait pas ce que contient l'image ni vers où mène exactement le lien.

Réécrire le code HTML en corrigeant les deux problèmes (utiliser les attributs et les textes descriptifs adaptés) et justifier techniquement en quoi votre solution améliore l'accessibilité et l'ergonomie du site.

Trois projets ont besoin d'un site web : (a) le journal du collège, qui publiera des articles chaque semaine, rédigés par plusieurs personnes ; (b) l'exposé d'un travail, une seule page fixe ; (c) la boutique de la coopérative de l'établissement, avec catalogue et commandes. Choisir pour chacun l'outil le plus adapté (créateur de sites de type Google Sites, blog de type WordPress ou solution de commerce électronique) et justifier le choix.

Rédiger la politique de publication du site de la classe : quels contenus sont publiés et lesquels ne le sont pas, qui relit avant publication, comment on cite les sources et les images d'autrui, et que faire si quelqu'un demande le retrait d'un contenu le concernant. La présenter sous forme d'un document de quatre courtes parties.

L'association de jeunes de votre quartier veut publier son site web et hésite entre deux options :

• Option A : créer un site gratuit sur une plateforme en ligne, en obtenant l'adresse asociacionvalle.creacionsitios.com et un hébergement gratuit sur ses serveurs en échange de l'affichage de publicités du fournisseur.

• Option B : enregistrer le nom de domaine personnel asociacionvalle.es (8 € par an) et souscrire un hébergement (hosting) indépendant (3,5 € par mois).

1) Expliquer le rôle du nom de domaine et celui de l'hébergement, en les distinguant dans chacune des deux options.

2) Le trésorier propose l'option A en disant : « Économisons l'argent ; l'adresse et le serveur importent peu tant que la page s'ouvre. » Réfuter son affirmation en prévoyant au moins deux problèmes ou limites que l'association rencontrera à moyen terme si elle choisit l'option A (en lien avec son image publique, la publicité ou le contrôle des contenus).

Sur le site de l'association de parents d'élèves apparaît une liste avec « nom et prénom des lauréats de la fête, leur classe et leur photo ». Analyser quelles données personnelles sont publiées, quels risques elles présentent ensemble (plus que séparément), quelles autorisations seraient nécessaires et comment vous publieriez la même nouvelle en protégeant les élèves.

Concevoir la page d'accueil du site du club de sciences : dessiner ou décrire son schéma de mise en page (en-tête, menu, contenu, pied de page), choisir les quatre contenus que vous mettriez en avant et expliquer quels liens vous placeriez dans le menu et pourquoi ceux-là plutôt que d'autres.

Vous pouvez le faire sur papier et envoyer une photo avec votre réponse.

Un camarade dit : « comme nous avons fait nous-mêmes le site de la classe, nous pouvons y mettre ce que nous voulons : les photos de n'importe qui, une musique de fond célèbre et des textes copiés sur d'autres sites ». Réfuter ses trois affirmations avec des arguments : vie privée et droit à l'image, droits d'auteur de la musique et plagiat des textes, et proposer l'alternative correcte dans chaque cas.

Défi du thème. Concevoir un article pour un blog de vulgarisation sur les habitudes numériques et la vie privée, en utilisant des données réelles et en respectant la propriété intellectuelle.

Compléter les phases suivantes :

1. Phase 1. Recueil de données : Se rendre sur le site de l'INSEE (insee.fr) et noter le pourcentage de mineurs qui utilisent internet régulièrement, ou interroger 5 membres de la famille sur leur temps d'utilisation des écrans pour calculer la moyenne quotidienne (par exemple, $3,5\text{ h}$). Consigner les données dans un tableau.

2. Phase 2. Création et contenus : Mettre en page votre article dans LibreOffice Writer (ou un outil de blog gratuit) en simulant l'interface web. Analyser les données obtenues et illustrer l'article avec une image issue d'une banque d'images libre (comme Wikimedia Commons ou Pixabay), en indiquant correctement l'auteur, la source et le type de licence.

3. Phase 3. Diffusion et licences : Rédiger trois consignes sur la vie privée pour publier des photos ou des informations concernant des tiers sur les réseaux. Enfin, attribuer une licence Creative Commons à votre propre travail (comme CC BY-NC-SA), expliquer pourquoi vous l'avez choisie et exporter le résultat en PDF.

Seront évalués :

• L'obtention rigoureuse de données réelles et leur traitement clair.

• L'attribution correcte de licences libres aux ressources extérieures et le choix justifié de la licence de votre propre travail.

• La qualité technique de la mise en page et la pertinence éthique des conseils de publication responsable.