<- [[index]] ====== En guise d'intro ====== * [[http://www.whatistheweb.com/]] ? well, doens't work right. * so, [[http://www.whatthefuckistheweb.com]] ? it's you {{:ressources:web:surf_wtfitw.png|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 [[http://www.lonja.de/motion/mo_history_internet.html|Melih Bilgil]] (utilisant [[http://blog.picol.org/pre-release-picol-icons|picol icons]]), voir la [[history_of_internet_transcript|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. {{:ressources:web:surf_useit.png|use it}} ==== des url = des serveurs ==== {{:ressources:web:url_serveur.png|url = serveur}} Quand on va sur useit.com en fait on va sur une machine située aux US === des url = des fichiers === {{:ressources:web:url_fichiers.png|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 {{:ressources:web:html_icone.png|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 ===== {{:ressources:web:internet_wires.jpg?500|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 [[http://traceroute.org/|Traceroute.org]] permet de voir les chemins que prends Internet pour aller d'un point A à un point B. {{:ressources:web:surf_traceroute.png|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. {{:ressources:web:ping_frcn.png|ping france, china}} (on pourra élargir sur les jeux vidéos et les [[http://www.flickr.com/photos/bebopnet/3034167545/|Speed Freaks]] et [[http://www.wait-till-i.com/2009/01/18/people-id-like-to-see-on-stage-more-nicole-sullivan/|Nicole Sullivan]]) ==== Quand je vais sur perdu.com ==== Un peu perdu dans tout ça ? pas de panique, le site [[htto://perdu.com]] est là. {{:ressources:web:surf_perdu.png|perdu sur internet}} Quand je lance l'adresse perdu.com dans mon navigateur, je vais à New York, en passant par Paris, Francfort et Washington. {{:ressources:web:traceroute_perdu.png|traceroute perdu}} ====== approche logicielle ====== ===== client-side ===== ==== navigateurs ==== pour surfer sur le web, il faut un navigateur Internet, il y en a plein ([[wp>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 ? {{:ressources:web:dock_browsers.png|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. {{:ressources:web:url_fichiers.png|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... {{:ressources:web:surf_wtfitw.png|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. {{:ressources:web:surf_viewsource.png|view page source}} On peut alors consulter le code source de la page HTML qui a permis de générer la page. {{:ressources:web:surf_html.png|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 [[http://www.csszengarden.com/|CSS Zen Garden]]. {{:ressources:web:code_css.png|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. {{:ressources:web:code_js.png|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 ? {{:ressources:web:url_serveur.png|url = serveurs}} A quoi ça ressemble ? {{:ressources:web:serveur_salle.gif|salle machine}} Voici une photo d'un Datacenter de chez OVH, vous pouvez aussi regarder la [[http://www.google.com/about/datacenters/gallery/|galerie photos]] des [[http://www.google.com/about/datacenters|datacenters de google]] ou même les visiter avec [[http://www.google.com/about/datacenters/inside/streetview/|streetview]]. En vidéo : * Chez Google : [[http://www.youtube.com/watch?v=zRwPSFpLX8I|visite des locaux]] * Chez OVH : [[http://www.dailymotion.com/video/x9vumt_ovh-paris1_tech|à la française]] * Chez des suédois [[http://hacknmod.com/hack/worlds-most-stunning-data-centers|des salles serveurs à la James Bond]] (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 ([[:ressources:php:initiation]]) * le moteur de bases de données (mysql)