Le WEB

L'histoire du WEB

  • 1965 : lien hypertexte (Ted Nelson)

  • 1989 : Naissance du Web (Tim Berners-Lee). Mise sur Internet d'une collection de documents entre lesquels on peut naviguer via des liens hypertextes. Web statique.

  • 1991 : Langage HTML

  • 1993 : Premier navigateur, Mosaic

  • 1994 : Début du commerce en ligne  - Amazon

  • 1995 : Langages JS, PHP et MYSQL.
    Le Web devient dynamique. Web 2.0

  • 1998 : Google

  • 2001 : Standardisation des pages Web avec le DOM - Wikipedia

L'histoire du WEB

  • 2004 : Facebook

  • 2005 : Youtube 

  • 2006 : Spotify-Twitter

  • 2010 : Développement du Web mobile - RWD

  • 2014 :  Un milliard de sites Web

Présentation générale

Le WEB est une des applications utilisant internet

quelques chiffres

Visibilité

trafic

popularité (FR)

Fonctionnement du web

Hypertext  Transfer  Protocol

protocole de communication client-serveur pour TRANSPORTER les données

 

navigateur

SERVEUR web

web = HTTP + URL + HTML

web = http + url + HTML

pour LOCALISER les données

uniform Ressource  locator

Si le port n’est pas précisé c’est qu’il s’agit du port TCP 80 pour le protocole http ou du port TCP 443 pour le protocole https

web = http + url + htmL & CSS

pour PRÉSENTER les données.

hypertext  markup  language

cascading  style  sheets

ACTIVités thème WEB

  1. Activité débranchée sur les langages HTML  et CSS : Le jeu du renard mouillé

Interprétation 1 :

<h1>Conte</h1>
<p>Il était une fois...</p>

Conte

Il était une fois...

Interprétation 2 :

<p>Ma <strong>liste</strong> de courses</p>
<ul>
  <li>Beurre</li>
  <li>Farine</li>
  <li>Oeufs</li>
</ul>
<a href="http://drive.fr">Là</a>

Ma liste de courses

  • Beurre
  • Farine
  • Oeufs

Interprétation 3 :

src="https://renard-mouille3--jmarck4.repl.co/triangle.png"

à la place de

src="triangle.png"

Interprétation 4 :

Interprétation 5 :

Interprétation 6 :

src="html5.png"
src="https://renard-mouille6--jmarck4.repl.co/html.png"

à la place de

src="css3.png"
src="https://renard-mouille6--jmarck4.repl.co/css3.png"

Interprétation 7 :

ACTIVités thème WEB

Activité BRANCHée HTML - CSS : Site WEB 

Dans cette activité, vous allez devenir « webmaster » et créer un site web sur le thème de votre choix (hobbie, passion…).

Activité BRANCHée HTML - CSS : page WEB 

1. Télécharger les 3 fichiers : (clic droit : enregistrer le lien sous)

(image1.jpg à la place de image1.png)

(Double clic ou clic droit et ouvrir avec Firefox)

Créer un dossier TP1 et y ranger les fichiers

ouvrir la page index.html 

2. Étudier la page avec l'inspecteur 

(clic droit puis Examiner)

Modifier la page avec l'inspecteur 

Editer les fichiers index.html et style.css avec notepad++

(clic droit sur le fichier : edit with notepad ++)

NE PAS OUBLIER DE SAUVEGARDER POUR CONSERVER VOS MODIFICATION

ACTIVités thème WEB

Activité BRANCHée python :

Calculer la popularité d'une page web

Reproduire une analyse menée par un moteur de recherche

Rappels et compléments sur le module random :

from random import random
random()
# génère un nombre aléatoire en tre 0 et 1 (1 exclus)
from random import choice
choice(['a', 'b', 'c'])
# renvoie un élément de la liste au hasard

Une autre façon d'importer les fonctions d'un module :

import random
# on importe tout le module random
random.random()
random.choice(['a','b','c'])
# on doit ajouter random. devant chaque fonction du module 

Des internautes arrivent par hasard sur l'une des 6 pages. Ils suivent de manière aléatoire les liens proposés par chaque page, augmentant ainsi le compteur de vue de chacune. Dans 80% des cas, le sujet les intéresse et ils poursuivent leur navigation. Après le passage de 1 000 explorateurs, quelle sera la page la plus populaire ?

étape 1 : Saisir le programme

Complétez le programme avec, pour chaque page, les liens vers les autres pages.

Hypertext["A"]=["B","C","D"]
import random
PageWeb = ["A","B","C","D","E","F"]
Hypertexte = {}
Hypertexte["A"] = ["B","C","D"]
# La page Web "A" contient 3 liens hypertextes qui pointent vers les pages "B","C" et "D"
Hypertexte["B"] = ["C"]
Hypertexte["C"] = ["A","D","E"]
Hypertexte["D"] = ["A","B","C","E","F"]
Hypertexte["E"] = ["C","D","F"]
Hypertexte["F"] = ["E"]
Nb_clic={}
Nb_clic["A"] = 0
Nb_clic["B"] = 0
Nb_clic["C"] = 0
Nb_clic["D"] = 0
Nb_clic["E"] = 0
Nb_clic["F"] = 0
Total_clic = 0
3. la variable Nb_clic[A] fait référence au compteur de vues de la page A.

étape 2 : comprendre le programme

    random.choice(PageWeb)
    # renvoie une page au hasard de la liste PageWeb
    # simule l'arrivée au hasard des internautes sur l'une des pages
    random.random() 
    # renvoie un nombre entre 0 et 1  
    # avec < 0.8 simule la poursuite de la navigation dans 80% des cas   
    random.choice(Hypertexte[x])
    # renvoie une page au hasard de la liste des liens de la page x
    # simule l'aspect aléatoire de la navigation 
4. le module random

exécuter le programme

import random
PageWeb = ["A","B","C","D","E","F"]
Hypertexte = {}
Hypertexte["A"] = ["B","C","D"]
# La page Web "A" contient 3 hypertextes qui pointent vers les pages "B","C" et "D"
Hypertexte["B"] = ["C"]
Hypertexte["C"] = ["A","D","E"]
Hypertexte["D"] = ["A","B","C","E","F"]
Hypertexte["E"] = ["C","D","F"]
Hypertexte["F"] = ["E"]
Nb_clic={}
Nb_clic["A"] = 0
Nb_clic["B"] = 0
Nb_clic["C"] = 0
Nb_clic["D"] = 0
Nb_clic["E"] = 0
Nb_clic["F"] = 0
Total_clic = 0
# boucle des 1000 internautes
for i in range(1, 1001):
    x = random.choice(PageWeb)
    while random.random() < 0.80:
        Nb_clic[x] = Nb_clic[x] + 1
        Total_clic = Total_clic + 1
        x = random.choice(Hypertexte[x])
for x in PageWeb: # x prend les valeurs successives de la liste PageWeb (de A à F)
    print(f"Popularité de {x} : {round(Nb_clic[x]*100/Total_clic,3)} %")
print(f"pour un total de {Total_clic} clics.")    

Améliorer le programme

import random
PageWeb = ["A","B","C","D","E","F"]
Hypertexte = {}
Hypertexte["A"] = ["B","C","D"]
# La page Web "A" contient 3 hypertextes qui pointent vers les pages "B","C" et "D"
Hypertexte["B"] = ["C"]
Hypertexte["C"] = ["A","D","E"]
Hypertexte["D"] = ["A","B","C","E","F"]
Hypertexte["E"] = ["C","D","F"]
Hypertexte["F"] = ["E"]
Nb_clic={}
Nb_clic["A"] = 0
Nb_clic["B"] = 0
Nb_clic["C"] = 0
Nb_clic["D"] = 0
Nb_clic["E"] = 0
Nb_clic["F"] = 0
Total_clic = 0
# boucle des 1000 internautes
for i in range(1, 1001):
    x = random.choice(PageWeb)
    while random.random() < 0.80:
        Nb_clic[x] = Nb_clic[x] + 1
        Total_clic = Total_clic + 1
        x = random.choice(Hypertexte[x])
for x in PageWeb: # x prend les valeurs successives de la liste PageWeb (de A à F)
    print(f"Popularité de {x} : {round(Nb_clic[x]*100/Total_clic,3)} %")
print(f"pour un total de {Total_clic} clics.")    

ACTIVités thème WEB

Activité  2  p60 - 61 Delagrave(Débranchée ) :

situé entre les balises <body> et </body>

ACTIVités thème WEB

Activités (Débranchée & BRANCHée) : uRl

  • Décomposition URL : décomposer l’URL d’une page
  • Tests paramètres : Identifier et utiliser des paramètres d’URL
L. Protocole Serveur Port Dossier Resources
1 http eduscol.education.fr 80 pid25852 actualites-dunumerique.html
2 http http://portquiz.net/ 1337 Outgoing Port Tester
3 https fr.wikipedia.org 443 wiki Éditeur de texte
4 https www.fun-mooc.fr 443 courses/course-v1:inria+41018+session01/ about
5 https fr.wikipedia.org 443 wiki Linux#Histoire

décomposition url

L. Protocole Serveur Port Dossier Resources
6 https www.google.fr/ 443 google
7 ftp fr.debian.org debian README 
8 file C:Users/Public/Desktop/  document.odt
9 https www.google.fr/ 443 google

 Tests paramètres URL

Recherche par mots clés
Maîtriser la langue de l'interface
Maîtriser le nombre de résultats
Limiter les résultats à une certaine langue
search?q=
Chercher des fichiers avec une extension donnée
Limiter la recherche à un site
Limiter les résultats en fonction du temps 
(d=24h, w=7j, m=mois, y=année)

Les recettes au saumon publiées le mois dernier sur marmiton.org

ACTIVités thème WEB

Activité  4  p64 - 65 Delagrave(Débranchée ) :

Le fonctionnement d'un moteur de recherche

ACTIVités thème WEB

Activité  5  p66 - 67 Delagrave(Débranchée ) :

sécurité et vie privée sur le web

Installer une application pour coder du HTML et du CSS sur son smartphone :

NAvigateur :

sécurité et confidentialité

 

En construction...

Le Web

By snt

Le Web

L'un des 7 thèmes de l'enseignement SNT en seconde : Le Web

  • 3,217