110 lines
4.2 KiB
ReStructuredText
110 lines
4.2 KiB
ReStructuredText
WEB
|
||
###
|
||
|
||
:date: 2022-08-21
|
||
:modified: 2022-09-03
|
||
:authors: Benjamin Bertrand
|
||
:tags: Web
|
||
:category: SNT
|
||
:summary: Découverte du HTML, du fonctionnement du web et de ses problématiques.
|
||
|
||
Le programme
|
||
============
|
||
|
||
Contenus
|
||
|
||
- Repères historiques
|
||
- Hypertexte
|
||
- Langages HTML et CSS
|
||
- URL
|
||
- Requête HTTP
|
||
- Modèle client/serveur
|
||
- Moteurs de recherche: principes et usages
|
||
- Paramètres de sécurité d’un navigateur
|
||
|
||
Capacités attendues
|
||
|
||
- Définir les étapes du développement du Web.
|
||
- Maîtriser les renvois d’un texte à différents contenus.
|
||
- Distinguer ce qui relève du contenu d’une page et de son style de présentation.
|
||
- Étudier et modifier une page HTML simple.
|
||
- Décomposer l’URL d’une page.
|
||
- Reconnaître les pages sécurisées.
|
||
- Décomposer le contenu d’une requête HTTP et identifier les paramètres passés.
|
||
- Inspecter le code d’une page hébergée par un serveur et distinguer ce qui est exécuté par le client et par le serveur.
|
||
- Mener une analyse critique des résultats fournis par un moteur de recherche.
|
||
- Comprendre que toute requête laisse des traces.
|
||
- Maîtriser les réglages les plus importants concernant la gestion des cookies, la sécurité et confidentialité d'un navigateur
|
||
|
||
Progression
|
||
===========
|
||
|
||
Les étapes ne sont pas du tout égale en terme de répartition de temps. La première étape prend largement les 2/3 du temps alloué à la séquence.
|
||
|
||
Étape 1: Le HTML
|
||
----------------
|
||
|
||
Cette étape se termine par la production évaluée d'une page web sur l'histoire du web. Il faut que les élèves aient vu cette vidéo avant la dernière séance.
|
||
|
||
Brainstorming autour du web. Le but est d'essayer de mettre de l'ordre dans la tête des élèves: la différence entre web et internet, navigateur et moteur de recherche... Pour ensuite introduire les languages de "programmation" du web: HTML, CSS et javascript.
|
||
|
||
Découverte du code source d'une page web et modification avec l'inspecteur -> principes du language html et les balises.
|
||
|
||
Bilan sur le web:
|
||
|
||
.. image:: ./1B_web.pdf
|
||
:height: 200px
|
||
:alt: Bilan sur le web
|
||
|
||
Etude de la `page à balise <./page_balises.zip>`_ pour extraire les balises principales et la structure d'une page
|
||
|
||
Bilan sur les balises:
|
||
|
||
.. image:: ./2B_html.pdf
|
||
:height: 200px
|
||
:alt: bilan sur le html et les balises
|
||
|
||
A partir de la vidéo sur l'histoire du web et de la page blanche, les élèves doivent faire une page sur l'histoire du web.
|
||
|
||
Barème:
|
||
- 4 points sur le contenu (éléments historique, structure...)
|
||
- 4 points sur la validité du code et la bonne utilisation des balises
|
||
- 2 points pour les éléments originaux ajoutés
|
||
|
||
Étape 2: Hébergement d'une page
|
||
-------------------------------
|
||
|
||
Les élèves vont déposer leur page web sur le serveur du lycée pour la rendre accessible à tout le monde. C'est l'occasion de parler aussi d'url et un peu de http.
|
||
|
||
Bilan sur l'hébergement et les urls
|
||
|
||
.. image:: ./3B_hebergement_url.pdf
|
||
:height: 200px
|
||
:alt: Bilan sur l'hébergement et les urls
|
||
|
||
|
||
Cette étape peut être commencé avant le rendu final de la page web sur l'histoire du web. De cette façon les plus rapides pourront construire une page index qui donnera accès aux pages des autres élèves.
|
||
|
||
Étape 3: Les usages du web
|
||
--------------------------
|
||
|
||
Utilité du moteur de recherche
|
||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||
|
||
??? je crois que Camille a quelque chose!
|
||
|
||
Les cookies
|
||
~~~~~~~~~~~
|
||
|
||
On profite du fait que les ordinateurs perdent les profiles pour jouer avec les cookies.
|
||
|
||
On commence par la prise de conscience que les sites internet conservent des données. Pour cela, les élèves choisissent un thème et le note. Ensuite, ils vont sur youtube (en acceptant le bandeau des cookies), cherchent et regarde rapidement des vidéos sur le thème. Après 15min, ils ferment le navigateur et passent leur ordinateur à un autre élève qui doit retrouver le thème choisi.
|
||
|
||
On se demande comment youtube fait pour se rappeler le thème -> les cookies. On explique comment accéder à l'historique et à la gestion des cookies. On les efface et on remarque que l'on ne peut plus deviner le thème.
|
||
|
||
On peut ensuite surveiller les cookies déposés quand on accepte ou non la bannière.
|
||
|
||
On parle ensuite RGPD.
|
||
|
||
Bilan sur les cookies
|