Après avoir fini l’activité de la dernière séance, nous visionnerons une vidéo sur la RGPD puis une vidéo sur l’Open Data, avant de faire une activité (à sauvegarder dans « classe/Espace d’Echange/SNT/Donnees/Act3/<Noms Prénoms du groupe>/Act3.odt ») sur cette dernière notion et la manipulation des données dans un tableur. Vous pouvez ensuite visionner une explication de comment on peut spécifier la forme et le contenu de métadonnées, dans l’objectif de rendre le classement et la recherche de documents plus efficace.

Aujourd’hui, nous commencerons par un quiz sur la protection de la vie privée sur Internet, puis après la correction de l’activité nous ferons une petite démonstration de pages dynamiques en relation avec la notion de Deep Web (Web profond).

Ensuite nous passerons aux réseaux sociaux.

Après avoir vu les risques à la dernière séance, nous verrons de façon plus détaillée ce que sont les cookies techniquement et leurs différentes catégories et usages.

Puis nous apprendrons comment nous protéger en explorant deux catégories : les protections contre les cookies et la navigation privée.

Notez que même ainsi, il reste des informations visibles par les sites visitées, par exemple votre emplacement approximatif par l’intermédiaire de votre IP. Pour les personnes ayant réellement besoin de protéger leur identité (les journalistes ou activistes politiques sous certains régimes par exemple) le meilleur outil reste TOR, bien qu’il ne s’agisse pas d’une solution adaptée ou destinée au grand public.

Cela fait nous parlerons des moteurs de recherche, avec une petite explication par un ingénieur de Google. Puis une petite discussion sur Pagerank, l’algorithme évoqué durant la vidéo.

Réalisez l’activité liée à l’aide des moteurs de recherche (Google, Bing, Qwant, Duckduckgo) après l’avoir sauvegardée dans le dossier :

MaClasse/Espace d’échange/SNT/Web/<NomsPrénomsDeVotreGroupe>

Une dernière petite vidéo sur l’histoire des moteurs de recherche et une anecdote amusante.

Après un petit quiz sur l’HTML, nous aborderons rapidement le dernier langage du Web : JavaScript.

Puis nous passerons à un sujet qui nous concerne tous : comment préserver une part de vie privée sur le Web ?

Commençons par voir ce qu’on appelle les traqueurs (trackers) et pourquoi on souhaiterait les éviter sur cette vidéo interactive d’Arte. Nous aurons un court débat sur leurs conclusions.

Après avoir consulté cette page du CNIL (Commission Nationale Informatique et Libertés) sur les historiques, rédigez (sur papier) une brève synthèse et quels historiques vous mettent mal à l’aise (ou pas !) et que vous allez supprimer.

Vous pouvez finalement visualisez une vidéo sur les cookies et leurs conséquences éventuelles sur vos relations (situation hypothétique…).

En dehors des médias (images, vidéos, sons), tous les fichiers du Web sont des fichiers textes pur, autrement dit des simples séquences de caractères ou plutôt de nombres qui correspondent à des caractères via un encodage (utf-8 est l’encodage moderne recommandé pour tous vos usages).

Pour éditer ces fichiers vous devez utiliser un éditeur de texte (pas un traitement de texte, il n’y a pas de mise en page) comme le Bloc-Note de Windows (un peu limité), Notepad++ (recommandé), Sublime Text, Visual Studio Code, …

Attention néanmoins à bien sauvegarder vos fichiers avec une extension appropriée au type de fichier manipulé : .html pour un fichier HTML, .css pour un fichier CSS et .js pour un fichier JavaScript. Cela permet à vos logiciel de traiter le fichier de manière appropriée (ouvrir un fichier HTML avec le navigateur, mettre en couleur intelligemment un fichier dans un éditeur de texte, etc).

Les langages du Web sont :

  • HTML5 pour écrire une page Web structurée
  • CSS pour la mettre en page
  • JavaScript pour la rendre plus interactive.

HTML5 top

HTML (HyperText Markup Language : langage d’hypertexte à balises) est le fondement du Web, il permet de décrire la structure d’une page Web, son contenu et ses métadonnées.

Principe de base

Pour indiquer le rôle d’un texte ou d’une pièce d’information, on utilise des balises comme <p>...</p> pour indiquer que le contenu entre la balise ouvrante <p> et la balise fermante </p> est un paragraphe à part entière.

On peut inclure des balises à l’intérieur d’autres balises, à condition de bien refermer une balise interne avant une balise externe, par exemple :

<p>Ceci est un <strong>paragraphe</strong>.</p> 

donnera :

Ceci est un paragraphe.

<p> indique un paragraphe et <strong> indique que le contenu doit être mis en valeur fortement (en gras par défaut).

Attention à ne pas écrire :

<p>Ceci est un <strong>paragraphe.</p> </strong> 

<strong> est refermé après <p> alors que <p> avait été ouvert avant <strong>.

Il est également possible d’ajouter un attribut à une balise pour préciser son rôle, comme l’adresse vers laquelle pointe un lien hypertexte <a>, l’image à afficher avec une balise <img>, … Cet attribut est indiqué entre les crochets < >, séparé du nom de la balise par un espace, par exemple :

<a href="https://www.google.fr">Lien vers Google</a> 

donnera :

Lien vers google

href est le nom de l’attribut tandis que https://www.google.fr est sa valeur (à mettre entre guillemets anglais : " ")

Structure d’une page Web

Une page Web typique ressemblera à :

<!DOCTYPE html>
<html>
  <head>
    Métadonnées sur la page (pas affichées dans la page)
  </head>
  <body>
    Contenu affiché sur la page
  </body>
</html>

La première ligne indique que la suite est en HTML5 (la version 5 du standard HTML est la plus récente aujourd’hui). La page entière est contenu par une balise <html> et est constituée de deux parties :

  • l’entête <head> qui contient une description de la page, par exemple <meta charset="utf-8"/> pour indiquer comment interpréter le code binaire en caractères (c’est une balise auto-fermante qui n’a pas de contenu et se ferme elle-même comme l’indique le slash / final) et <title>Titre</title> qui donne le titre de la page (utilisé sur l’onglet du navigateur, si vous créez un marque page ou si un moteur de recherche veut créer un lien vers votre page).
  • le corps de la page <body> qui est la partie réellement affiché par le navigateur.

Quelques balises typiques

  • <p> pour un paragraphe
  • <h1>, <h2>, <h3>, … pour des titres de niveau 1, 2, 3, … plus le niveau est bas, plus le titre est important.
  • <strong> pour une mise en valeur forte (gras)
  • <em> pour une mise en valeur, emphase, plus discrète (italique)
  • <a href="cible"> pour un lien hypertexte
  • <img src="adresse de l'image" alt="description"/> pour afficher une image (la balise est auto-fermante).
  • <ol> (ordered list : liste numérotée) ou <ul> (unordered list : liste à puces) pour créer une liste, chaque élément de la liste étant dans un <li> (list item).

Il existe une grande variétés d’autres balises (pour une structuration en section, pour des éléments multimédia comme des vidéos ou du sons, etc) que vous pouvez découvrir par exemple sur le site du W3C (World Wide Web Consortium, organisme chargé de concevoir les langages du Web).


CSS top

En réalité l’HTML ne sert pas à la mise en page mais uniquement à la structuration de la page, même le fait que <strong> mette son contenu en gras n’est pas directement une conséquence de l’HTML et peut être changé sans modifier son code HTML.

La mise en page sur le Web se fait avec le langage CSS (Cascading StyleSheets : feuilles de style en cascade) qui permet de décrire la façon de mettre en page chaque élément d’une page Web. Il est possible d’utiliser plusieurs fichiers contenant du CSS pour spécifier la mise en forme d’une page web et chaque fichier viendra préciser ou supplanter les règles de mise en forme du précédent d’où le « en cascade » dans le nom du langage, par exemple chaque navigateur a un fichier CSS de base, une feuille de style « par défaut », qu’il applique à chaque page et qui indique entre autre que <strong> doit être en gras, que les paragraphes <p> doivent se placer les uns en dessous des autres, etc. Les indications de style que vous donnerez seront après cette feuille de style par défaut et seront donc prioritaires.

Ajouter du CSS à une page

Il existe trois moyens de donner du style à ses balises par ordre de priorité croissante :

  • un fichier CSS externe qui est indiqué dans l’entête de la page par :
<link href="style.css" rel="stylesheet">  

(si votre fichier CSS s’appelle style.css et se trouve dans le même dossier que votre page HTML)

  • du code CSS directement dans l’entête dans une balise <style>, par exemple :
<style>
body {
    background-color: red;
}
</style>
  • des directives CSS directement dans une balise dans un attribut style comme :
<img src="panda.png" alt="Un panda" style="width:400px;"/> 

Directives CSS

Les instructions de mise en forme sont toutes sous la forme :

propriété : valeur ;

où la propriété est par exemple la couleur du texte (color), la couleur de l’arrière-plan (background-color), l’alignement du texte (text-align) et la valeur indique quelle couleur utiliser (red, green, rgb(0,255,0), …), comment aligner le texte (right, left, center, …), etc.

N’oubliez pas le point-virgule à la fin de la directive.

Déclarations CSS

On peut directement mettre les directives CSS souhaitées sur une balise avec l’attribut style mais cela devient fort peu pratique avec énormément de répétition lorsqu’on veut mettre tout une page ou même tout un site (!) dans une mise en page uniforme (tous les paragraphes avec une certaine police, tous les titres de niveau 1 avec une certaine taille de caractère, le menu sur le côté de la page, etc).

Pour cela il faut plutôt utiliser un fichier CSS (qu’on préfère à une balise <style> dans l’entête car on peut réutiliser le même fichier CSS dans plusieurs pages en répétant simplement son nom plutôt que son contenu).

Mais dans ce cas, il faut préciser à quelles balises les directives CSS s’appliqueront. On fait cela à l’aide d’une déclaration CSS :

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Le sélecteur est une description des balises auxquelles on appliquera les directives CSS entre les accolades (obtenues avec AltGr+4 et AltGr++ respectivement). Un sélecteur peut être simplement un nom de balise comme p, body, h1, … ou une sélection de balise par la valeur de leur attribut id (identifiant) comme #grandTitre (pour sélectionner la balise contenant id="grandTitre") ou par la valeur de leur attribut class comme .code (pour sélectionner les balises contenant class="code").

Il existe également d’autres possibilités, décrites dans cette page.

Pour de plus amples détails et des listes de propriétés et leurs valeurs possibles consultez le site du W3C (hautement conseillé dans tous les cas).


JavaScript top

JavaScript est un langage de programmation qui peut-être exécuté directement par un navigateur Web, il peut modifier la page dans laquelle il se trouve, demander des données supplémentaires à un serveur Web et ainsi rendre une page plus interactive.

JavaScript est indispensable pour créer ce qu’on appelle des applications Web comme un Webmail, un jeu en ligne, etc.

Syntaxe de base

En JavaScript, on manipule des valeurs qui peuvent être des nombres (45, 2.25, 5e23, …), du texte entre guillemets anglais ("Du texte !"), des booléens (true, false), des tableaux ([1, 2, 3]) ou des objets (images, dictionnaires, morceaux de HTML, …).

Ces valeurs peuvent être placées dans des variables dont le nom doit commencer par une lettre et être constitué de lettres, chiffres ou soulignement ( _ ). On doit déclarer une ou des variables avec var :

var x, y, trucQuiFaitChose;

On peut ensuite y placer une valeur à l’aide d’un = :

x = 5;
y = x * 10;
trucQuiFaitChose = "Un texte";

Vous noterez le ; à la fin de chaque instruction et la façon dont on a enchaîné les mots pour en faire un seul nom de variable pour trucQuiFaitChose.

Les instructions conditionnelles (Si…Alors…Sinon, If…Then…Else) s’écrivent ainsi :

if (x < 10) {
    alert("Bonjour, x est petit, je le met à 10.");
    x = 10;
} else {
    alert("x est trop grand, je le diminue de 5 !");
    x = x - 5;
}

Notez les accolades {} autour des instructions qui « vont ensemble » pour former ce qu’on appelle un bloc d’instructions.

L’utilisation de JavaScript dans une page HTML

Dans une page HTML, comme du CSS, le code JavaScript à exécuter peut être placé à trois endroits :

  • Dans un fichier à part avec l’extension .js comme « monScript.js », inclus dans une page par le biais d’une balise script (n’importe où dans la page) :
 <script src="monScript.js"></script> 
  • Directement dans la page HTML dans une balise script :
<script>
var x;
x = 5;
alert("Ce code est exécuté au chargement de la page, x vaut " + x);
</script>
  • Dans un attribut d’événement d’une balise, dans ce cas le script n’est exécuté que si l’événement se produit :
<h1 onclick="alert('On a cliqué sur le titre !');">Un titre</h1>

Notez l’usage d’apostrophes ' plutôt que de guillemets " autour du texte dans le code pour éviter d’interrompre l’attribut avant la fin du code.

Il est ainsi possible de modifier entièrement une page web, son contenu, sa mise en page en modifiant l’HTML et le CSS via le DOM (Document Object Model) qui est le modèle de la page manipulable avec JavaScript, allez sur cette page du W3C pour en savoir plus.

Après un quiz, nous corrigerons l’activité sur les URLs et HTTP puis nous aborderons les langages du Web : HTML, CSS et Javascript.

Nous commencerons par le fondement et le premier à avoir été inventé : HTML (HyperText Markup Language), plus précisément dans sa version 5.

Pour explorer ce langage, nous allons consulter des pages de plus en plus sophistiquée et en consulter le code source HTML, autrement dit la description textuelle qui est traduite par un navigateur en une page visuelle, pour ce faire on peut cliquer droit sur une page et cliquer sur Code source de la page dans Firefox.

Pour garder trace de vos réponses, chargez l’activité, sauvegardez la sous « Ma Classe/Espace d’Echange/SNT/Web/TP2/<Nom_Prénoms>.docx » et compléter la au fur et à mesure.

Après une présentation sur le Pair à Pair et une correction de l’activité Filius, nous allons changer de thème.

Avant de tourner la page sur Internet et de passer au Web, nous explorerons le paysage d’Internet avant le Web et évoquerons quelques services qui existent en-dehors du WWW (World Wide Web : la Toile d’araignée mondiale) comme :

  • Le courriel (e-mail)
Résultat de recherche d'images pour "email command line"
Client mail en ligne de commande
Interface graphique à l’ancienne
Interface graphique moderne
Webmail
  • Usenet
groupes d’intérêt (maintenant consultables en ligne)
Les débuts du piratage de fichiers
  • IRC
en ligne de commande
Un client IRC moderne
  • FTP
Un client FTP typique (Filezilla, logiciel libre)

Nous allons maintenant discuter de la nature du Web et son historique après avoir visionné cette vidéo.

Nous finirons par une activité qui explore les fondements du Web : les URLs et le protocole HTTP.