# Interaction Humain Machine sur ++le Web++ ## Première NSI: Janvier 2022 --- ## Le Web **Web** ou **Internet** ? *Quelle différence* ? > Il ne faut pas confondre l’Internet avec [le Web], qui est le réseau des pages web [...]. En effet, nous accédons **aux pages web** grâce à l’Internet qui nous permet de nous connecter **aux serveurs web** qui proposent ces pages. > Source: Interstices.info ---- ## La structure du Web Un graphe de documents et de ressources reliées par **l'hypertexte**. ![Le web comme interconnexion de diverses ressources](https://pixabay.com/get/g664187dfe8a68a0f7a51f13501f386b28099766122bb110f781140222d551b8e191cdaf834c06b977499e5844ab60eaa644a5e99050f941e4d9c10bc35c168ca9e9674df21ab94b428759a530cf4f5ac_1920.jpg?attachment= "Le web, vue d'artiste, Pixabay" =640x426) ! ---- ## La naissance du Web En **1989** [Tim Berners Lee](https://fr.wikipedia.org/wiki/Tim_Berners-Lee) au **CERN** (Européen :flag-eu: !) Le Web est bati sur la notion de **partage**: <http://www.lumni.fr/video/la-liberte-d-internet> ---- ## Jaime Levy, Une pionnière du web Elle publiait des magazines électroniques **avant le Web**, en en ayant imaginé des principes. L'une des premières femmes à avoir travaillé sur **Mosaic** (premier navigateur web), à IBM. Aujourd'hui tombée dans l'oubli, ses idées et ses réunions ont influencées **le design** sur le web. [À lire](https://nymag.com/intelligencer/2018/04/claire-evanss-broad-band-excerpt.html) ---- ## Wendy Hall, le développement de l'hypermédia Elle invente **Microcosm**, un précurseur du World Wide Web en 1984. Depuis 2005, elle travaille sur le **web sémantique** et le **Web Of Trust** avec ++Tim Berners-Lee++. [À lire](https://fr.wikipedia.org/wiki/Wendy_Hall) ---- ## À retenir ::: success <!-- .element: class="fragment fade-left" --> Le Web est **une application** d'Internet. Internet est **le réseau physique** sur lequel est bati le Web. ::: :::success <!-- .element: class="fragment fade-left" --> Le Web est un **réseau de documents** accessibles via les **URL** et reliés par les liens **hypertextes**. ::: :::success <!-- .element: class="fragment fade-left"--> Le Web est fondé sur la notion de **partage** et a nécessité **des dizaines de personnes** pour devenir ce qu'on utilise aujourd'hui. ::: ---- ## Les grandes dates du web ::: success * 1989, Proposition par Tim Berners-Lee du premier système hypertexte **Le Web** * 1991, Ouverture au public du Web * 1993, Tout les logiciels pour le WWW développés au CERN sont mis dans le domaine public * 1994, Le concept d'URL est ratifié * 2001, Wikipédia * 2013, Remise en place du **premier site web**: <http://info.cern.ch/hypertext/WWW/TheProject.html> ::: ---- ## Des figures méconnues: * Sue Gardner, Journaliste et ancienne directrice de la **Fondation Wikimédia**, elle se bat pour un *internet libre et ouvert*. * Mitchell Baker, Juriste, présidente de la **Fondation Mozilla**, une des 100 personne les plus influentes au monde. * Jean Armour Polly, Bibliothécaire à l'origine du "surf sur l'internet", pionnière de l'accés libre et gratuit à Internet. * Anne-Marie Eklund Löwinder, Informaticienne suédoise, inventrice du **DNSSEC** (Protocole de vérification des sites), l'une des **clés d'internet**. --- # Le projet Web Vous allez **en solo** créer un site web présentant **une femme d'un domaine scientifique**. Votre site sera **purement statique**, mais correspondra aux **standards du web**. ---- ## Objectifs * Créer un site web **statique** * Connaitre la distinction entre HTML, CSS et JS * Être capable de chercher et créer de l'information * En apprendre plus sur l'histoire de la science ! ---- ## Objectifs du Bulletin Officiel | Contenu | Capacités attendues | | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | | Modalités de l’interaction entre l’homme et la machine | Identifier les différents composants graphiques permettant d’interagir avec une application Web. | | Événements | Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter. | ---- ## À quoi cela ressemblera t'il ? **D'après vous ?** --- ## Et maintenant, le HTML ! Connectez vous sur le site: <https://apd.li/act-html> et faites l'activité ! :::danger <!-- .element: class="fragment fade-left" --> Pensez à prendre **des notes** des différentes choses que vous apprenez ! Tout cela vous servira pour le projet. ::: --- ## Les devoirs pour demain On ne perd pas la main en python: :::info France-IOI, faites un exercice que vous n'avez pas fait ! *Le prochain dans la liste par exemple* :::