index

En guise d'intro

WTF is the web

Qu'est-ce que l'internet (intro générale sur plein de notions).

Question à l'Amphi : Qu'est-ce que le Web ? qu'est-ce que l'Internet ? le web, c'est le WWW la partie d'Internet qui est accessible par un navigateur

Qu'est-ce qui est transféré par Internet sans être du Web ?

  • La messagerie Instantannée (MSN, Yahoo messenger, ICQ, IRC, Jabber, Bonjour, AIM, Gadu-Gadu, Sametime…)
  • Les systèmes de téléphonie (Skype, Google Voice)
  • Les jeux vidéos (Counter Strike, World of Warcraft, Mario Kart Wii…)
  • Les téléchargements (emule, bittorrent, FTP)
  • Plein d'autres trucs (telnet, SSH, FTP, Gopher…)

Approche réseaux

quelques notions historiques


Source : History of the Internet par Melih Bilgil (utilisant picol icons), voir la transcription

échange de données

surfons sur le web

Pour surfer (naviguer) sur le web, il suffit de taper une adresse dans la barre d'adresse du navigateur puis cliquer sur des liens envoyant sur d'autres pages.

use it

des url = des serveurs

url = serveur

Quand on va sur useit.com en fait on va sur une machine située aux US

des url = des fichiers

url = fichier

quels fichiers

les fichiers .html contennent l'information de texte, ceux-ci appellent d'autres fichiers comme des images .gif, .jpg, .png, des feuilles de styles .css, des animations .swf (flash), etc.

Les fichiers sont composés de deux éléments :

  • le nom
  • l'extension

hamster.html

Il existe de très nombreuses extensions de fichier qu'on peut retrouver sur le net

  • .html
  • .css
  • .gif, .jpeg, .png, .svg
  • .swf
  • .js
  • .pdf, .mp3, .zip, .avi, .ico, etc.

un tissu de câbles

internet wires

des adresses IP

IP veut dire Internet Protocol, c'est le système d'accès à un réseau ouvert qu'on appelle TCP/IP.

Chaque machine qui se connecte sur le réseau se voit attribuée une adresse IP, chaque point d'accès au web peut donc être identifié par une adresse IP.

Les adresses IP peuvent ressembler à ceci :

  • 66.39.25.224
  • 213.251.186.125
  • 91.121.141.11

des routeurs

Les routeurs sont des boîtiers électroniques qui permettent de connecter les câbles entre-eux, ils agissent comme des aiguillages pour les paquets TCP/IP.

Un paquet TCP/IP est un ensemble d'informations qui comprend :

  • Sa source
  • Sa destination
  • les données à transiter.

Chaque paquet TCP/IP agit de façon asynchrone, c'est à dire qu'il va de A à B pour faire transiter l'information puis une petite information à A pour confirmer qu'il est bien arrivé.

Le premier des routeurs est votre “box”, puis vient le PPP de votre fournisseur d'accès, le dernier est le routeur de l'hébergeur.

Le site Traceroute.org permet de voir les chemins que prends Internet pour aller d'un point A à un point B.

Traceroute from traceroute.org

le ping

Un paquet met plus ou moins de temps à accéder à sa destination et à revenir, ce temps de latence se nomme “le ping”.

Par exemple, alors qu'on met environ 30 ms pour atteindre un serveur en france, on en mettra près de 350 pour accéder à un serveur chinois.

ping france, china

(on pourra élargir sur les jeux vidéos et les Speed Freaks et Nicole Sullivan)

Quand je vais sur perdu.com

Un peu perdu dans tout ça ? pas de panique, le site htto://perdu.com est là.

perdu sur internet

Quand je lance l'adresse perdu.com dans mon navigateur, je vais à New York, en passant par Paris, Francfort et Washington.

traceroute perdu

approche logicielle

client-side

pour surfer sur le web, il faut un navigateur Internet, il y en a plein (List_of_web_browsers, nous en citerons quelques uns :

  • Firefox
  • Internet Explorer
  • Safari
  • Chrome
  • Opera

Les navigateurs reçoivent des fichiers et les interprètent.

Voici les navigateurs que j'utilise sur mon portable, saurez-vous les reconnaître ?

Quels sont les noms des navigateurs que j'utilise ?

échange de fichiers

Nous l'avons vu les informations sont transitées sous forme de fichier, les images, les pages, tout est fichier.

url = fichiers

Quand je me rends à une adresse web, l'information est dupliquée depuis le serveur sur mon ordinateur où elle est consultée.

(entre parenthèses, la mention “interdiction de copier l'image est complètement idiote puisque dès lors qu'elle s'affiche sur mon ordi, c'est qu'elle a été dupliquée).

Les fichiers de type texte peuvent être écrits en plusieurs langagnes, on retrouve notamment, le HTML, le CSS et le JavaScript.

Le HTML

La base, c'est le fichier HTML, c'est lui qui va appeler les autres fichiers, les images, les sons, les animations, les feuilles de style, les scripts…

WTF is the web

Pour consulter le code HTML d'une page, il suffit de faire “Afficher la source” (le texte dépend du navigateur.

view page source

On peut alors consulter le code source de la page HTML qui a permis de générer la page.

view page source

Le HTML n'est pas à proprement parler un langage de programmation, c'est un langage de balisage très facile à apprendre, nous aurons l'occasion d'y revenir.

Le CSS

CSS veut dire Cascading Style Sheet ou Feuille de Styles en Cascade, c'est un peu le même principe que dans l'édition, si vous connaissez Quark Xpress® ou Adobe InDesign®, ce sont des styles de mise en forme.

Le CSS permet de spécifier la mise en page d'une page, un excellent exemple pour comprendre ce concept est CSS Zen Garden.

un exemple de fichier CSS

Le JavaScript

Le JavaScript permet de créer des éléments intéractifs sur la page, créer des animations, etc. Nous aurons également l'occasion d'y revenir.

Un exemple de fichier javascript

Exécuté dans le navigateur

Ces fichiers sont téléchargés sur l'ordinateur “client” et interprétés par le navigateur.

L'utilisateur peut avoir accès à l'ensemble des informations téléchargées sur sa machine.

server-side

Dans de nombreux cas, les pages sont générées, quand je vais sur ma page facebook ou quand je vais sur une page de recherche google, les pages sont générées.

C'est à dire que je reçois bel et bien un fichier HTML mais celui-ci a été fabriqué sur mesure pour moi.

Génération de fichiers

Un serveur qu'est-ce que c'est ?

url = serveurs

A quoi ça ressemble ?

salle machine

Voici une photo d'un Datacenter de chez OVH, vous pouvez aussi regarder la galerie photos des datacenters de google ou même les visiter avec streetview.

En vidéo :

(client/serveur) Structure site web coté serveur

les différents logiciels du serveur web

  • le client httpd (apache)
  • le générateur de pages web (initiation)
  • le moteur de bases de données (mysql)
ressources/web/initiation.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April