1. Introduction
1.1. Cours 1/2
1.2. Cours 2/2
1.3. Compréhension
La toile et ses fils
Dans l'image du web représentée par une toile d'araignée, les fils sont :
- des liens
- des câbles du réseau internet
La toile et ses noeuds
Dans l'image du web représentée par une toile d'araignée, les nœuds sont :
- des ressources
- des ordinateurs
Les échanges sur le web
Que s'échangent les ordinateurs sur le Web ?
- Des ressources
- Des images
- Des textes
1.4. Activité avancée
Tim Berners-Lee
En vous aidant par exemple de cette ressource :
http://home.web.cern.ch/fr/topics/birth-web
Faites quelques recherches sur Tim Berners-Lee et l'origine du web et répondez aux questions suivantes :
- Quelle était la spécialité professionnelle de Tim Berners-Lee ?
- Que contenait le premier site web ?
- En quelle année a-t-il été créé ?
Qui dirige le Web ?
Le 30 avril 1993, le CERN annonce que le « World Wide Web » sera libre d'utilisation pour tout le monde.
Le web n'appartient à personne, en revanche chaque site est sous la responsabilité d'un auteur (le rédacteur des pages) et d'un hébergeur (le propriétaire du serveur). Les seules lois qui le régissent sont les lois sur la diffusion de contenu dans des média, comme par exemple dans la presse ou l'audiovisuel.
Si des contenus inappropriés, insultants, diffamants, ... font l'objet d'une plainte, l'auteur est responsable et l'hébergeur est tenu de les effacer. Aucun contenu ne se retrouve donc
a priori
sans responsable, il se trouve toujours hébergé sur un serveur avec un numéro IP officiel et donc une identité physique répertoriée.
Évidemment, dans la pratique, certains serveurs peuvent être physiquement dans des pays où les autorités sont très laxistes, et les contenus s'en trouvent quasi intouchables. Le web n'a pas de frontière, la localisation géographique d'un serveur n'a aucune conséquence sur son accessibilité, les internautes que nous sommes n'avons en général pas conscience du lieu où est hébergé le site que nous consultons, pourtant les lois en vigueur ne sont pas les mêmes dans tous les pays.
Par exemple
Wikileaks
est interdit d'hébergement sur des serveurs américains, mais a trouvé des pays qui acceptent de l'héberger.
- Qu'est-ce que Wikileaks ?
- Qui en est le fondateur ?
- Exprimez-vous en quelques lignes sur votre position citoyenne (intérêt, légalité, ...) de ce genre de sites.
2. Clients et serveurs
2.1. Le modèle client/serveur
2.2. Les clients
2.3. Les serveurs
2.4. Compréhension
Erreur 404!
Que signifie le code d'erreur 404 dans le protocole HTTP
- La ressource a été déplacée sur un autre serveur
- La ressource n’existe pas sur le serveur
- Le client ne peut pas communiquer avec le serveur
le meilleur Navigateur
Avec quel navigateur peut-on accéder au plus grand nombre de sites ?
- Firefox
- Internet Explorer
- Chrome
- Safari
- Tous
Les clients
Qu'est-ce qu'un client web ?
- Tout logiciel qui demande des ressources à un serveur web
- un navigateur
- un robot de moteur de recherche
- une page HTML
Les logs c'est quoi ?
Qu'est-ce qu'un fichier de logs d'un serveur web ?
- la liste des noms des gens qui ont consulté le site hébergé sur le serveur
- un journal des activités du serveur
- la liste de toutes les ressources stockées sur ce serveur
Les protocoles
Par quel protocole les clients et serveurs dialoguent-ils ?
- HTML
- HTTP
La distribution
Quand un serveur a envoyé une image à un client, il doit attendre que ce client l'ait rendue avant de la distribuer à un autre client.
- Vrai
- Faux
3. Exemple et récapitulatif
3.1. Cours
3.2. Compréhension
Composition d'une URL
Quelles informations sont indiquées dans une URL ?
- le nom du serveur
- le nom d'une ressource
- le protocole utilisé
- si la ressource est une image ou un texte
- l’adresse du client
HTTP vs HTTPS
Quelle est la différence entre HTTP et HTTPS ? Grâce à HTTPS :
- mes communications avec le serveur sont cachées
- le contenu de mes communications avec le serveur est crypté
- je peux m’assurer que le serveur est celui auquel je veux m’adresser
Les informations échangées entre clients et serveurs
Quelles autres informations que l’URL peuvent être échangées dans un échange entre un client et un serveur Web ?
- l’adresse IP du client
- le nom du navigateur web : firefox, opera, internet explorer, ….
- la page présentée dans le navigateur au moment où la requête est effectuée
Une page web
Quand on regarde une page web, toutes les informations viennent du même serveur.
- oui
- non
Une URL
Qu'est-ce qu'une URL ?
- une ressource
- l'adresse d'une ressource
- un fichier
4. HTML
4.1. HTML: contenu, structure, liens
4.2. Rassembler les ressources
4.3. Mise en forme
4.4. Compréhension
Exercice
Rendez-vous sur la page
http://culturenumerique.univ-lille.fr/activitesWeb/html/
Lisez, observez, gardez les pages ouvertes dans des onglets, puis répondez aux questions du quizz suivant
Les balises HTML
Quel est le rôle des balises en HTML ?
- de délimiter des parties de texte
- de décrire la structure des documents
- de signaler aux internautes des pages dangereuses
- d'accélérer internet
Au delà du contenu
Pourquoi peut-on créer facilement une table des matières ou construire la liste des liens d’un document HTML ?
Comprendre les balises
Nous vous avons expliqué que les balises
<
section
>
...
<
section
/>
servaient à délimiter les parties, les balises
<
h1
>
...
<
/h1
>
délimitent les titres de premier niveaux, à votre avis que signifient les balises
<
p
>
...
<
/p
>
?
Repérer la feuille de styles
Comparez les codes sources des 2 premières pages, seule une ligne supplémentaire a été insérée, elle précise l'utilisation d'une feuille de styles pour l'affichage du contenu. Indiquez le numéro de la ligne qui a changé et recopiez-la également.
Décrire un document
Pourquoi s’échanger une description de document plutôt qu’un document lui-même est plus adéquat au Web ?
- tous les clients n’ont pas la même capacité d’affichage
- la description contient plus d’informations : structure + contenu
- la structure permet d'ajouter du sens (ceci est un titre, etc...) explicitement.
Exemple de mise en forme
Observez la mise en forme du titre principal dans la deuxième version et indiquez les caractéristiques d'affichage qui ont été choisies dans cette feuille de styles (ce qui change par rapport à la première version).
- la typo (la police de caractères)
- l'ordre des mots a été changé
- la couleur des caractères
- l'alignement du paragraphe
- les caractères ont été transformés en majuscule
- l'orthographe a été modifié
Les feuilles de style
Une feuille de style...
- décrit le contenu d'un document HTML
- ermet de décrire la présentation graphique d'un document
- décrit par exemple la couleur du texte, la taille des marges
- coordonne automatiquement les couleurs d'une page web
- contrôle si on écrit comme Flaubert ou Blazac
Structure et contenu
Le langage HTML permet de décrire des documents en indiquant leur structure et leur contenu. Comment la structure est-elle décrite ?
- Par un balisage du texte
- Par des couleurs et du gras ou la taille des caractères
Une page Web
Pour qu’un client affiche une page Web,...
- une seule requête vers un unique serveur suffit toujours
- arfois plusieurs requêtes sont nécessaires mais toujours vers le même serveur
- arfois plusieurs requêtes vers plusieurs serveurs sont nécessaires
Expressivité de HTML
Le langage HTML permet de représenter une image.
- Vrai
- Faux
4.5. Activité avancée
Activité sur les serveurs
Rendez-vous sur la page : pageServeurs.html
Lisez, observez et répondez aux questions posées...
5. Les Cookies
5.1. Cours
5.2. Compréhension
Cookie tiers
Un cookie tiers c'est ...
- est un cookie découpé en 3 parties
- un cookie partagé entre trois sites
- un cookie déposé à la demande d'un serveur qui n'est pas celui de la page web visitée
Possible ou impossible
Cochez toutes les affirmations vraies ou possibles. Certaines questions peuvent demander une petite recherche sur Internet.
- on peut supprimer tous les cookies stockés sur sa machine
- on peut refuser tous les cookies
- on peut refuser les cookies de certains sites
- on peut refuser les cookies tiers
- un serveur A peut voir les cookies déposés par un serveur B différent de A
- les cookies peuvent servir à constituer des profils à l'insu des internautes
- les cookies ne servent qu'à la publicité
- il n'y a pas de cookies sur les smartphones
Un cookie
Un cookie est une information
- stockée sur un serveur web à la demande d'un client
- stockée sur un client à la demande d'un serveur
5.3. Activité avancée
Rendez-vous sur les pages suivantes, lisez et effectuez les manipulations demandées :
- http://culturenumerique.univ-lille.fr/activitesWeb/cookies/cookie.php
- http://culturenumerique.univ-lille.fr/activitesWeb/cookies/cookietiers.html
Notez si vous le souhaitez vos remarques ci-dessous (réponse non obligatoire)
5.4. La messagerie électronique et les cookies
5.5. Compréhension
La messagerie électronique et HTML
Sélectionnez les affirmations vraies.
- les messages électroniques sont toujours écrits en HTML
- les messages comprenant des pièces jointes sont écrits en HTML
- les messages écrits en rose sont en HTML
- les messages avec des images dans le texte (pas en pièce jointe) ou dans la signature sont en HTML.
Messagerie électronique et cookies
Sélectionnez la bonne réponse ...
- la lecture d'un message écrit en HTML provoque toujours l'envoi de cookies
- la lecture de messages en texte (non HTML) peut provoquer l'envoi de cookies
- si la lecture d'un message provoque l'envoi de cookies, c'est uniquement vers l'expéditeur du message
- Tout est faux
6. Profils et réseaux sociaux
6.1. Cours
6.2. Compréhension
Les profils
Vrai ou faux ? Pour chaque affirmation ci-dessous cochez la case correspondante pour indiquer qu'elle est vraie.
- une partie de l'économie du web repose sur la collecte de données personnelles
- quand un service sur le web est gratuit alors il se finance par la collecte de données personnelles
- Les cookies et cookies tiers sont les seuls outils de la création de profils
6.3. Activité avancée
Cookies tiers or not cookies tiers ?
Les navigateurs doivent-ils par défaut autoriser les cookies tiers ?
Remarque: pour cette question et les suivantes, répondez d'abord dans un document séparé, puis collez les réponses dans les zones prévues une fois votre travail terminé.
J'aime ou j'aime pas ?
Un webmaster doit-il prévenir les internautes lorsqu'il décide d'inclure sur sa page un bouton associé à un script qui collecte des informations pour un tiers ?
Pister or not pister ?
Trouvez-vous normal qu'un réseau social piste ses adhérents sans les prévenir ?
Question de loyauté
Écoutez l'enregistrement "Quand nos smartphones sont espionnés" depuis cette page puis répondez à la question qui suit.
Exemple d'application qui ne respecte pas la loyauté
Donnez un exemple d'application citée dans l'enregistrement qui ne respecte pas les principes de base de loyauté entre éditeur d'application et utilisateur.
7. Moteurs de recherche
7.1. Cours
7.2. Compréhension
Combien de sites Web ?
Quelle est l'estimation actuelle du nombre de sites Web dans le monde ?
Faites quelques recherches pour trouver un ordre de grandeur.
Recherche avancée 1
Faites une recherche Google avec les deux mots
université Lille
. Notez le nombre de pages trouvées.
Faites maintenant une recherche avec
"université Lille"
(en incluant les guillemets). Avez vous autant de résultats ? Décrivez-les.
Recherche avancée 2
Faites une recherche avec
"université lille" -3 -2 -1
. Que se passe-t-il ?
7.3. Activité avancée
Activité de recherche et réflexion
Attention, vous n'avez droit qu'à une seule tentative. Pour les questions ouvertes, répondez d'abord dans un document séparé, puis collez les réponses dans les zones prévues une fois votre travail terminé.
neutralité 1
Consultez l'interview suivante et expliquez en quoi il est important pour un moteur de recherche de donner une réponse neutre. http://www.inria.fr/actualite/actualites-inria/la-neutralite-ne-suffit-pas
neutralité 2
Le gouvernement français travaille sur un projet de loi "
pour une République numérique
", consultable sur
https://www.republique-numerique.fr
Nous vous invitons à enrichir vos connaissances en consultant ce site en détail.
Expliquez en quoi l'article consultable ici répond au moins en partie à ce que souligne Serge Abiteboul dans son interview à la question sur la neutralité des moteurs de recherche. Pour cela recopiez une phrase de l'interview et une phrase de l'explication de l'article de loi.
neutralité 3
Le gouvernement français travaille sur un projet de loi "
pour une République numérique
", consultable sur
https://www.republique-numerique.fr
Nous vous invitons à enrichir vos connaissances en consultant ce site en détail.
Testez vos connaissances en répondant aux 14 questions du quizz ( http://www.gouvernement.fr/quiz-le-projet-de-loi-numerique ) et répondez ci-dessous à la question suivante: quelles sont les deux questions dont les réponses vous ont le plus surpris ?
Attention, l'abus de Google est dangereux pour la planète !
Attention, vous n'avez droit qu'à une seule tentative. Répondez d'abord dans un document séparé, puis collez les réponses dans la zone prévue une fois votre travail terminé.
Conséquences d'une recherche
Comparez ces deux usages:
1. Dans la barre de recherche (ou barre d'URL) je saisis :
université de lille 3
et ensuite dans la page de résultats affichée je clique sur le lien vers l'université (lien vers http://www.univ-lille.fr)
2. Dans la barre d'URL (attention de ne pas confondre avec la barre de recherche !), je saisis :
http://www.univ-lille.fr
.
Questions: Quelles sont les incidences de ces actions dans chacun des cas. Existe-t-il une différence en terme de consommation énergétique, ou de préservation de la vie privée ?
Des moteurs de recherche moins intrusifs...
Attention, vous n'avez droit qu'à une seule tentative. Répondez d'abord dans un document séparé, puis collez les réponses dans la zone prévue une fois votre travail terminé.
DuckDuckGo
Utilisez maintenant un nouveau moteur de recherche https://duckduckgo.com/ , testez-le :
Qu'obtenez vous avec le mot : Go
Qu'obtenez vous avec le mot : Go!wfr
Qu'obtenez vous avec le mot : Go!gfr
Décrivez les réponses obtenues et après quelques recherches personnelles, expliquez ce qu'est DuckDuckGo et pourquoi certains utilisateurs préfèrent l'utiliser.
8. Autres informations sensibles et bilan
8.1. Autres informations
8.2. Bilan: du pour, du contre
8.3. Compréhension
Les données locales
Cochez les bonnes affirmations dans cette liste
- le cache permet d'accélérer l'affichage des pages web déjà visitées
- le cache permet de naviguer sur le web icognito
- Si quelqu'un accède à mon ordinateur, il a techniquement la possibilité de connaître les sites web que j'ai récemment visités
- Grâce à l'historique vous pouvez retrouver la liste des sites que vous avez visités récemment
- Grâce à l'historique vous pouvez revoir le contenu exact des pages que vous avez visitées récemment
- Grâce à l'historique vous pouvez, ré-ouvrir une fenêtre ou un onglet du navigateur récemment fermé
- Si une page est dans l'historique, vous pouvez la retrouver dans le cache
8.4. Activité avancée
Vider le cache et l'historique
Faites une capture de la fenêtre du navigateur qui propose de vider le cache et les autres données locales. Enregistrez l'image sur votre compte owncloud (ou un autre service de partage d'image), puis collez le lien de l'image après en avoir activé le partage par lien public.
L'intermédiation: votre analyse
Pour terminer ce cours, nous vous proposons de regarder une vidéo d'une présentation par Stéphane Grumbach qui explique les impacts du web et des données numériques d'un point de vue sociétal.
https://www.liglab.fr/evenements/keynote-speeches/stephane-grumbach-leconomie-lintermediation (1h11mn).
Citez les éléments dans ce séminaire de Stéphane Grumbach qui vous ont le plus surpris. Remarque: cette question est ouverte, répondez d'abord dans un document séparé, puis collez votre réponse dans la zone prévue une fois votre travail terminé.
Annexe : réutiliser ce module
Archive IMS CC utilisable dans les LMS Moodle, Claroline, Blackboard, etc: module2.imscc.zip
Archive EDX : module2_edx.tar.gz