Simulation Internet années 90

Vu sur m6

      La famille a remonter le temps

 

Simulation de l'Internet des années 90 :

Je vais expliquer comment j'ai créé une simulation de ce qu'on pouvait trouver au début d'Internet, entre 1990 et 1999.

Cette simulation va permettre d'utiliser via un ancien ordinateur sous Windows 98, le moteur le plus utilisé durant cette période Altavista.com.

Les pages sont hébergées sur un serveur qui est lui même sur Internet donc la connexion peut se faire :

- Soit via une box connectée à l'Internet d’aujourd’hui relié à la carte réseau d'un ancien Ordinateur sous Windows 98. (La simulation de la vitesse d'époque se fait via un programme de réduction de la bande passante expliqué ici).

- Soit avec un modem 56K qui se connecte à Internet via FREE qui fournit encore des connexions bas débit gratuitement à leurs abonnés : ici.

Pour une simulation parfaite, le mieux est via un modem 56K mais cette solution ne fonctionne que pour les connexions en dégroupage partielles ou sans dégroupage.

Vous ne pouvez pas en dégroupage total FREE, appeler le numéro de téléphone pour se connecter en modem sur le même abonnement.

Par contre, peux être qu'avec un autre fournisseur d'Internet que FREE en dégroupage total, il serait possible d'appeler le numéro de connexion modem FREE et faire communiquer son modem (A essayer).

 

Le projet terminé sur un IBM 300PL en Windows 98 :

Le projet terminé sur un IBM PC-350 en Windows 98 :

Vidéo de l'utilisation sur M6 :

 

L'accès au simulateur :

Altavista.com (1997-1999)

 

 


INDEX

Recréation du moteur de recherche

Le système de recherche

La page des résultats

La récupération des sites Web

L'aspiration

La connexion à Internet en 56K

Le fichier HOSTS

 


Haut

1) Recréation du moteur de recherche :

Pour commencer, il me faut récupérer le code HTML de l'ancien moteur de recherche ALTAVISTA.COM, justement un site web s'occupe d'archiver tous les sites Internet du monde, depuis le début des années 90  : The Wayback Machine

 

J'entre donc l'adresse du moteur sur ce site d'archivage :

Wayback 1

La "Wayback machine" a des archives d'Altavista.com, depuis 1996 :

Wayback 2

Je vais me baser sur les nombreuses archives faites en 1999.

 

En cliquant sur une des dates d'archivages j'ai accès au site de l'époque :

Wayback 3

C'est bien cette horrible page que j'avais en mémoire :)

 

Maintenant il va falloir recopier le code HTML :

Pour cela, un clic-droit de la souris sur une zone blanche de la page.

Puis dans le menu, un clic sur "code source de la page" :

Wayback 4

Le code source apparait :

Wayback 5

Maintenant il ne faut récupérer que le code pur du moteur de recherche Alatavita.com, le début du code étant les rajouts du site The wayback Machine.

Je copie donc, tout le code en dessous de la balise suivante :

<!-- END WAYBACK TOOLBAR INSERT -->

 

Wayback 6

Ce code récupéré est copié dans un nouveau fichier texte sur mon disque dur :

Wayback 7

Wayback 8

Ensuite j'ai renommé ce fichier en index.html :

Wayback 9

Je peux maintenant ouvrir ce fichier index.html en cliquant dessus et mon navigateur Internet ouvre ma copie du site :

Wayback 10

Je vais maintenant m'occuper des images manquantes.

De retour sur l'archive du site via The Wayback Machine, les images peuvent être récupérées par un clic-droit sur elles mêmes et une copie en local dans un sous-dossier du fichier HTML : "images"

Wayback 22

Wayback 14

Wayback 23

 

Une fois toutes les images de la page récupérées, il va falloir corriger les liens du code HTML pour pointer sur la copie des images en local.

Pour faire cela, j'ai ré-ouvert mon fichier index.html avec le programme notepad++.

Puis fait une recherche des fichiers images donc avec l’extension ".gif" grâce la combinaison de touche "CTRL" + "F" :

Wayback 15

 

Les résultats de la recherche montre que tous les fichiers images sont stockés sur la "Way back machine" dans le dossier "/web/19990125093146im_/http://www.altavista.com/av/gifs/" :

Wayback 30

 

Donc toujours avec notepad++, je vais faire un changement en masse de tous les endroits du code avec une référence à ce dossier pour le remplacer avec mon dossier local "images" :

Avec la combinaison de touches "CTRL" + "H", dans la case "Recherche" j'ai mis l'ancien dossier : "/web/19990125093146im_/http://www.altavista.com/av/gifs/" et dans la case "Remplacer par", j'ai mis : "images/"

Wayback 19

En cliquant sur "Remplacer tout", on peut voir que 33 changements du code ont été effectués :

Wayback 20

On peut déjà voir le résultat des modifications dans le code :

Wayback 21

 

Maintenant en ouvrant la page index.html en local, la page d'origine prend forme :

Wayback 24

Pour les parties manquantes, j'ai du combler avec des images prises sur Google images.

 

Voila pour le principe, le plus gros du boulot était de faire ces manipulations : Page par page, lien par lien, image par image...

Le résultat final donne un site assez complet, tous liens sont utilisables au moins sur un premier niveau.

 

Voici quelques captures d'écran des pages du moteur :

Wayback 25

Wayback 26

Wayback 27

 

Pour certaines sous-pages, j'ai du reconstruire des grosses parties qui étaient manquantes sur le site d'archivages.

Pour certains liens irrécupérables, j'ai un peu triché en les supprimant.

 

Exemple pour la page du lien "Entertainment" :

Avant :

Wayback 28

Après :

Wayback 29

 

 


Haut

2) Le système de recherche :

Donc j'ai maintenant une copie du site www.altavista.com en local sur mon disque dur.

Il va falloir faire en sorte de pourvoir utiliser cette copie pour simuler quelques recherches.

La principe de fonctionnement voulu :

Schema query

- La phrase écrite dans la page INDEX.HTML et envoyée au programme JAVASCRIPT présent dans la page QUERY.HTML.

- Le JAVASCRIPT découpe chaque mot de la phrase et compare ce mot avec une liste.

- Si le mot fait partie de la liste, une redirection est faite vers la page correspondante à ce mot.

- Si le mot ne fait pas partie de la liste, redirection vers la page générique avec tous les sites.

 

Le principe est plutôt simple mais le problème est qu'à l'époque, il n'y avait pas de langages évolués comme le PHP ou le HTML5.

 

On parle ici d'un site web qui doit être compatible avec des vieux navigateurs sous Windows 98 comme Netscape 4.5 (22.7 Mo) ou Internet Explorer 3.0.

Les langages pris en charges par ces navigateurs sont au maximum du HTML 4.0 avec JAVASCRIPT 1.1.

 

Pour que la page INDEX.HTML redirige la phrase vers la page QUERY.HTML, très facile, une seule ligne à changer :

Avant :

Wayback 33

Après :

Wayback 32

Essayons maintenant d'écrire une phrase sur notre INDEX.HTML :

Wayback 34

Une fois le bouton Search appuyé, le navigateur essaye d'ouvrir la page QUERY.HTML et les mots tapés sont présents dans son URL :

Wayback 35

 

La plus grande difficulté était de pouvoir découper cette URL, mot par mot entre les caractère "q=" et "&search"

Pour ceux qui connaissent JAVASCRIPT, normalement pas de problème avec la fonction SPLIT() :

Wayback 31

Mais elle n'est apparue que dans la version 1.4 du JAVASCRIPT, donc il à fallut trouver des moyens détournés pour ce découpage

Après des longues heures de recherche, le résultat final du code de découpage donne :

Wayback 39

 

 Le découpage fait par cette partie du code, met les mots (si ils existent) dans les variables : req0, req1, req2, req3, req4 et req5

Wayback 40

 

 C'est après que la seule fonction de comparaison en JAVASCRIPT 1.1 entre en jeu "IF ... ELSE IF ... ELSE":

Wayback 36

 

Comme je n'ai que cette fonction et qu'il va falloir vérifier si le mot recherché est à la position 1, 2, 3, 4 ou 5 de la phrase, je vais devoir la répéter des dizaine de fois.

En plus, il faut prévoir le cas du mot écrit avec sa première lettre en majuscule ou pas...

 

Donc chaque "IF" redirige vers le lien de la bonne page, suivant le mot trouvé.

Voici quelques parties du code :

Wayback 37

Wayback 38

 

Pour chaque mot trouvé, la variable aLang est mise à "none", avant que le script redirige vers la page HTML du résultat.

Cette variable est envoyée par défaut dans l'URL, avec la valeur "kl=XX" après avoir lancé la recherche :

Wayback 42

Je change cette variable à chaque résultat trouvé pour permettre en dernier cas ou le mot clef n'existe pas, d'aller vers une page générique "result.htm" qui comporte tous les sites web possibles.

Donc si la valeur par défaut n'est pas changée (=XX), cela veut dire qu'aucun mot n'a été trouvé :

Wayback 41

 


Haut

3) La page des résultats :

Comme évidemment la recherche n'est pas possible sur l'archive de la "Wayback Machine", j'ai du me baser sur une capture d'écran d'époque, trouvée sur Internet :

Wayback 43

J'ai du refaire cette page entièrement en HTML, pour reproduire les pages de résultats des recherches.

Le résultat final pour une recherche avec le mot clefs : "Informations" :

Wayback 45 Wayback 46

 

Au niveau du code, je n'aurais qu'à dupliquer cette page et modifier les parties en rouge pour chaque nouveau mot clefs de recherches :

Wayback 47 Wayback 48

 


Haut

4) La récupération des sites Web :

La simulation du moteur de recherche est prête, il va me falloir maintenant des sites Web à consulter suivant les recherches.

Le problème est que ces sites Web doivent dater entre 1990 et 1999.

 

Pour en trouver, j'ai utilisé plusieurs façons :

- Méthode par récupération de site page par page via le code HTML depuis la "Wayback Machine" comme fait pour Altavista.com.

Cette méthode des beaucoup trop longue et fastidieuse, je ne l'ai faite que pour un site "Fun radio", ce qui m'à pris plus de 5 heures :

Wayback 49

 

- Méthode par aspiration via des sites spécialisés qui référencent les anciens sites, toujours consultables sur Internet :

http://www.404pagefound.com

http://mentalfloss.com/article/53792/17-ancient-abandoned-websites-still-work

http://www.urbanghostsmedia.com/2015/07/retro-abandoned-websites-that-are-still-online

 

- Méthode par aspiration via recherche sur Google avec des sites non mis à jour depuis une date donnée :

Wayback 50

Wayback 51

 

Il faut utiliser des mots clefs comme "Perso", "Multimania", "AOL", "Infonie", "Wanadoo", "Orange", ces derniers étant des hébergeurs de pages personnelles, présents dans les années 90.

Les résultats donnent des pages non mises à jour jusqu'à la date donnée :

Wayback 52

 

En faisant un petit travail d'archéologie, on retrouve des sites "moche" de l'époque.

Souvent on peut voir les dates sur la page de garde du site : "xx visiteurs depuis 1999", "Dernière mise à jour xx 1997"

Wayback 53

Wayback 54

 


Haut

5) L'aspiration :

Une fois les sites Web trouvés, il faut les récupérer en local.

Pour cela, la méthode s'appelle : "Aspiration" et le meilleur programme pour ça est : HTTrack

 

L'utilisation du programme est simple :

Je vais prendre un site de 1998 "Guitar site", trouvé avec les mots clefs "perso" + "orange" :

Wayback 55

Wayback 56

 

Après avoir installé et ouvert le programme, je clique sur "suivant"

Wayback 57

Je donne un nom à ma copie puis je choisis mon dossier où le site sera copié, "suivant" pour continuer ...

Wayback 59

Je mets le lien du site à copier puis je clique sur "Définir les options"

Wayback 61

Dans l'onglet "Structure", je choisis "Structure du site, sans www.domaine.xxx/"

Wayback 62

Dans l'onglet "Fouineur", je choisis "Pas de règles robots.txt"; "OK" pour continuer ...

Wayback 63

Pour valider, un clic sur "suivant"

Wayback 64

Pour lancer la copie, cliquer sur "Terminer"

Wayback 65

"L'aspiration" du site est en cours...

Wayback 66

une fois l'aspiration terminée, la fenêtre suivante s'affiche, l'opération est terminée.

Wayback 67

Dans mon dossier cible, un nouveau dossier est apparu avec le nom donné à mon projet au début du programme

Wayback 68

Dans ce dossier, si je lance le fichier INDEX.HTML, le site complet en local est consultable

 

Une étape intermédiaire importante pour la simulation sur un Windows 98 avec un Netscape 4.5 (22.7 Mo) ou Internet Explorer de l'époque, il faut supprimer tous les codes JAVASCRIPT qui ne sont peut être pas compatibles et vont bloquer le navigateur à la consultation du site.

Pour cela, la méthode est de rechercher tous les fichiers ".htm" dans le dossier local du site Web et les ouvrir avec notepad++

Wayback 69

Ici, un code JAVASCRIPT est présent dans toutes les entête des pages, il va falloir faire un changement en masse :

 

Je sélectionne la partie du code à retirer entre "<script type="text/javascript"> et "</script>"

Wayback 70

Je fait le combinaison de touches "CTRL" + "H" et je mets la case "Remplacer par" à vide.

Pour lancer le changement en masse, un clique sur "Remplacer dans tous les documents ouverts"

Wayback 71
 

Voila, la partie du code a disparu sur tous les fichiers HTML, je peux maintenant appuyer sur l’icône avec plusieurs disquettes pour enregistrer tous les fichiers en même temps

Wayback 72

 

Je recherche ensuite dans tous les documents avec la combinaison de touches "CTRL" + "F", si d'autres JAVASCRIPT sont présents

Wayback 73

J'efface ensuite les résultats trouvés unitairement ou en masse.

 

Une fois ce nettoyage fait, je n'ai plus qu'à ajouter ce site sur la guitare, dans ma page des résultats pour le mot clef "musique"

Wayback 84

Le résultat quand je lance ma simulation :

Wayback 81

Wayback 82

Wayback 83

J'ai répété cette manipulation pour une cinquantaine de sites, ce qui me fait une simulation disponible pour plusieurs sujets des années 90 :

- Musique

- Informations

- Les Boys Band

- Bogue de l'an 2000

- Informatique

 


Haut

6) La connexion à Internet en 56k :

Maintenant que j'ai une bonne base de sites Web sur mon serveur local, il faut pouvoir s'y connecter depuis l'extérieur.

 

Il y a deux possibilités pour simuler la vitesse de connexion des années 90 (56 Kbps) :

1) La connexion via un vrai modem 56K :

Modem56k

Il se connecte à la prise téléphonique de la maison mais les lignes France télécom (RTC) sont de plus en plus rares car les distributeurs d'Internet proposent le dégroupage total à leurs clients (Déconnexion des lignes France Télécom pour une ligne dédiée de l'opérateur).

Si vous avez encore une ligne France Télécom ou si vous êtes en dégroupage partiel, le modem peut encore se connecter à Internet.

FREE propose toujours une connexion gratuite bas débit via modem à leurs abonnées : inscription ici

 

Un numéro de téléphone avec un identifiant et mot de passe vous seront envoyés par courrier.

 

Pour la configuration du Modem sur l'ancien PC :

Pour un paramétrage simple et rapide, il faut vous connecter sur votre espace abonné FREE puis cliquer sur le lien "Reconfigurer votre connexion en ligne"

Freebas 1

Ensuite cliquer sur le lien "Installation de votre configuration" et télécharger le fichier "free_gratuit.ins".

Ce fichier devra être copié sur l'ancien ordinateur et depuis un Windows 95/98/2000/ME, vous pourrez cliquer dessus.

 

La procédure d’installation est simple, il suffit de la suivre après avoir cliqué sur le fichier free_gratuit.ins, l'installation du modem se fera aussi si ce n'est pas déjà fait :

 

2) La connexion par câble réseau sur une box :

Sans Modem ou ligne RTC, la deuxième solution par un simple branchement sur le réseau de votre box, comme n'importe quel ordinateur de la maison :

Freebas 3

Après des heures de recherches pour trouver un programme permettant de limiter la bande passante de la carte réseau et qui fonctionne sous Windows 98, j'ai trouvé la perle rare : NetPeeker 3.10 (2.4 Mo)

 

Configuration du logiciel :

Lancer l'installation

Netpeeker 1

Durant l'installation, une fenêtre de configuration va s'ouvrir

Netpeeker 2

Dans l'onglet "Throttle" :

1) Choisir la carte réseau si plusieurs sont présentes dans l'ordinateur

2) Mettre les vitesses "Maximum upload" & "Maximum download" à "2 KB/s"

3) Cliquer sur "Global Throttle Rule"

4) & 5) Mettre toutes les vitesses à "2 KB/s" puis "Throttle Priority" à "Highest"

6) Cocher la case "Auto apply to UDP sessions"

7) Pour valider, cliquer sur "OK"

 

L'installation va continuer jusqu'à la demande de reboot de l'ordinateur

Netpeeker 3

 

une fois le PC relancé, une petite icône va apparaitre en bas à gauche

Netpeeker 4

Pour retrouver le paramétrage fait pendant l'installation, cliquer sur cette icone

Netpeeker 5

Dans le programme, cliquer le petit bouton blanc avec "T" puis sur "Throttle Settings"

Netpeeker 6

Netpeeker 7

Avec ce programme lancé en fond de tache, la vitesse de chargement des pages est donc réduite à 2 KB/s.

 

Un petit test avec la simulation :

Netpeeker 8

Netpeeker 10

 


Haut

7) Le fichier HOSTS :

Pour parfaire la simulation, il faudrait quand l'utilisateur tape "http://www.altavista.com" dans l'explorateur Internet, qu'il arrive directement sur la page de la simulation via mon serveur.

Pour cela, il faut utiliser le fichier Windows "HOSTS".

 

Sur mon Ordinateur Windows 98, ce fichier doit être dans C:\Windows

Hosts 1

Pour afficher ce dossier, il faut cliquer sur "Afficher les fichiers"

Hosts 2

Il faut ensuite modifier les options des dossiers, pour afficher les extensions les fichiers cachés

Dans l'onglet "Affichage", Cocher le bouton "Afficher tous les fichiers" et décocher la case "Masquer les extensions des fichiers dont le type est connu"

Hosts 3

Dupliquer le fichier "Hosts.sam" en "Hosts" (Sans mettre d'extension)

Hosts 4

Faire un clic-droit sur le nouveau fichier puis choisir "Ouvrir avec..."

Hosts 5

Choisir l'éditeur de texte "NOTEPAD"

Hosts 6

Les modifications sont à faire de cette façon :

[IP du serveur de simulation][Espace avec la touche TAB][Adresse à rediriger]

Alta 5

Ici je redirige l'URL "Altavista.com" vers l'IP du serveur.

 

A l'inverse, pour empêcher l'accès à un site, il faut rediriger l'URL vers l'adresse locale du PC qui est 127.0.0.1

Par exemple si je ne veux pas que l'utilisateur puisse aller sur www.facebook.com ou une adresse www.google.xx :

Alta 6

 

Après avec enregistré le fichier HOSTS avec NOTEPAD, il faut absolument rebooter l'ordinateur pour la prise en compte des modifications.

 

Maintenant quand je tape l'adresse http://www.altavista.com sur Netscape 4.5 (22.7 Mo) :

Alta 2

 

Quand j'essaye d’accéder aux URL "http://www.facebook.com" ou "http://www.google.fr"

Alta 3

Alta 7

Ajouter un commentaire