2019-2020/SNT/Web/index.rst

SNT: le web pour l'année 2019-2020
##################################

:date: 2019-10-03
:modified: 2019-10-03
:authors: Bertrand Benjamin
:category: SNT
:summary: Organisation du thème "le web" pour l'année 2019-2020 en SNT

Séquence co-construite avec M.Pommier du lycée de Bellegarde.

Chaque séance commence avec un fil actu et se termine avec 15 minutes de bilan (écrit dans le cahier de cours) sous forme de carte heuristique ou de schéma.

Séance 1: Modification de HTML
==============================

.. image:: 1_deroulement.pdf
    :height: 200px
    :alt: Diapos de support pour la première séance


Questions-réponses avec les élèves autour du WEB (langage, comment ça marche...). Le but étant de voir s'il n'y a pas déjà des élèves compétent en dev WEB sur lesquels on pourrait s'appuyer pour la suite.

Démonstration au tableau sur comment modifier à la volée le code HTML d'une page (Firefox: `Développement Web > Inspecteur` ou Ctrl-Maj-C et Chrome: `Plus d'outils > Outils de développement` ou Ctrl-Maj-H).  Ces outils permettent de faire beaucoup plus que simplement modifier le code HTML de la page et de voir le résultat mais nous n'utiliserons que cette fonctionnalité (onglet `Elements` et l'icône avec la souris et le carré à gauche pour sélectionner les éléments à la souris). On laissera ensuite les élèves défacer la page d'accueil de Google. On pourra aussi faire la démonstration pour supprimer la "protection" de Pinterest qui empêche d'explorer les créations sans y être connecté.

Le problème de cette méthode de modification du code c'est que dès que l'on recharge la page, les modifications sont perdues. Pour cela, il va falloir éditer le fichier qui contient le code HTML. La page d'accueil de Google est une page bien complexe (on peut le voir en allant chercher le code source de la page). On va utiliser un page plus simple tirée du site du zéro (renommé Openclassroom ou un zeste de savoir): `Zozor <./Zozor/>`_ (`archive contenant toute la page <./Zozor.zip>`_). Cette archive devra être décompressée et placée sur le réseau en lecture seul.

Les élèves iront chercher tout le dossier pour le copier chez eux. Ils ouvriront la page `index.html` avec un navigateur internet et avec un éditeur de texte. On leur explique qu'il va falloir éditer le code HTML, sauvegarder puis recharger la page pour voir l'effet des modifications. On invite alors les élèves à s'approprier la page et à modifier le plus d'éléments possibles.

Les 15 dernières minutes pourront être utilisée pour faire un bilan éléments caractéristiques trouvés dans la page et laisser une note de cours à propos des langages du WEB.

Devoirs:

- Visionner et noter les éléments importants d'une `vidéo sur l'histoire du web <http://citescolaire-lannemezan.mon-ent-occitanie.fr/disciplines/sciences-numeriques-et-technologie/4-1-reperes-historiques-51479.htm>`_

Séance 2: Écrire du HTML
========================

.. image:: 2_deroulement.pdf
    :height: 200px
    :alt: Diapos de support pour la deuxième séance

On commence par un résumé de ce qui avait été découvert sur le HTML la semaine dernière. Si on a n'a pas eut le temps on pourra appuyer sur la notion de balise et commencer à faire une liste de celles qu'on arrive à utiliser. Pour la suite de la séance on met à disposition `la page à balise <./page_balises.html>`_ (`archive de la page blanche avec l'image <./page_blanche.zip>`_. Cette page comporte l'ensemble des balises de base. On la laisse à disposition des élèves pour qu'ils puissent s'en inspirer.

Le but de cette séance est que les élèves écrivent un résumé de la vidéo en HTML. Pour cela, on met à disposition `une page blanche <./page_blanche.html>`_. Elle contient le minimum de HTML pour commencer un page. On explique aux élèves doivent avant d'insérer du contenu remplir le champs concernant à `author` et insérer le nom de la page entre les balises `title`. Le champs `charset` ne devra pas être modifié à autre chose que UTF-8 sans quoi la page ne pourra plus afficher les accents (occasion de parler d'encodage aux élèves? un peu trop tôt peut être...). Les élèves pourront enfin écrire leur résumé entre les balises `body`.

On pourra inviter les élèves à d'abord écrire le contenu de leur résumé et ensuite mettre en forme avec des balises et suivre le principe d'avoir quelque chose qui marche puis ensuite de l'améliorer.

Cette séance en devra pas être menée d'un coup. Pour profiter des élèves qui avancent bien et ne pas laisser des élèves perdu, il sera intéressant de couper la séance, valoriser les initiatives pertinentes et de permettre aux élèves d'aller voir les productions des autres. 

On pourra aussi ajouter une contrainte au cours de la séance: utiliser au moins 4 balises différentes en dehors de celles présentent dans la page blanche initiale.

Une fois que tout le monde a une page qui commence à ressembler à quelque chose et au moins 15min avant la fin du cours, ce sera la moment de parler de la W3C. Cette "association" définit les standards du web et met à disposition `un outils pour valider une page HTML <https://validator.w3.org/unicorn/?ucn_lang=fr>`_ . On demandera aux élèves de valider leur page et de corriger les erreurs soulevées.

Devoirs:

- Terminer leur page web en respectant les standards W3C.

Pour éditer du HTML, n'importe quel éditeur de texte convient. Au lycée, c'est `Notepad++ <https://notepad-plus-plus.org/fr/>`_ qui est installé. `Tutoriel pour l'installer <https://www.youtube.com/watch?v=fPQJ8u8wqoE>`_.

Séance 3: Sécurité
==================

Séance 4: Mise en ligne
=======================

Les élèves vont mettre leur page web en ligne sur le serveur dédié du lycée. Ils se connectent au serveur avec Winscp, créent un dossier avec leur prénom et déposent leurs pages.

On en profitera pour parler de l'IP et du port (normalement c'est le port 80 pour faire du http mais là sur le serveur on est sur un autre port), du moyen d'aller consulter une page sur un serveur et en particulier de l'URL.

On invitera les élèves à aller voir les pages des autres avec le navigateur. La transmission des adresses posera problème. Les élèves devront construire un index personnel avec des liens vers toutes leurs pages web (balise <a>). Pour ceux qui avancent vite, ils construiront un index de la classe.