Technologies Internet Jean-François Ramiara FAD Réseau Pyramide 17/10/2012 Toulouse 1
Sommaire Internet Les origines d'internet Caractéristiques d'internet Les protocoles Les adresses IP Les noms de domaine Les sites Web Le dialogue client-serveur Page statique et dynamique Les langages du Web Les navigateurs Les outils pour développer 2
Internet 3
Internet Internet Assemblage de milliers de réseaux privés et publics N'appartient à personne. Pas de pouvoir centralisé. Est constitué : d'utilisateurs : les clients (ou internautes) de fournisseurs : les serveurs Basé sur des standards définis par des organismes indépendants Indépendant du matériel (PC, Mac, serveur...) Repose sur le protocole de communication TCP/IP TCP/IP = Transmission Control Protocol/Internet Protocol 4
Internaute/client Serveur Internet Technologies Internet Internet FAI 5
Les origines d'internet 6
Technologies Internet Les origines d'internet Les origines d'internet A été créé à la fin des années 60 par le département américain de la Défense Conçu à l'origine pour relier les laboratoires de recherche et les universités américains Réseau militaire devenu public, mondial et gratuit 7
Quelques dates Technologies Internet Les origines d'internet 1965 : première communication longue distance entre deux ordinateurs 1969 : lancement d'arpanet. 4 ordinateurs sont reliés. 1972 : première démonstration publique du courrier électronique 1973 : début du développement de TCP/IP 1980 : ARPANET est accessible depuis n'importe où aux USA 1990 : début d'internet 1993 : lancement du premier navigateur WEB : Mosaic 8
Technologies Internet Les origines d'internet 9
Technologies Internet Les origines d'internet Nombre d'abonnés pour 100 habitants en 2009 10
Caractéristiques d'internet 11
Le réseau maillé Technologies Internet Caractéristiques d'internet Réseau centralisé Réseau maillé 12
Technologies Internet Caractéristiques d'internet La transmission par paquet Message P3 P3 P1 P3 P1 P2 B P3 A P1 P2 P2 P2 13
Les adresses IP Technologies Internet Internet 77.197.152.67 81.201.140.7 151.15.132.40 77.197.152.66 111.140.97.133 146.21.106.103 77.197.152.66 14
Les protocoles 15
Internaute Technologies Internet Les protocoles Internet : un tuyau unique pour des usages différents Serveur 16
Technologies Internet Les protocoles Les protocoles = «langages» du net Un protocole est une sorte de langage sur Internet qui permet de faire dialoguer des ordinateurs Un protocole est indépendant du matériel, du système d'exploitation, de la langue de l'utilisateur... Internet fait cohabiter des dizaines de protocoles 1 protocole = 1 usage Il existe des protocoles concurrents Par exemple : POP3 vs IMAP 17
Quelques protocoles Technologies Internet Les protocoles TCP/IP : la base. Permet la communication de données HTTP : accès aux pages Web HTTPS : version sécurisée de HTTP FTP : transfert de fichiers TELNET : connexion à un serveur en mode console SSH : connexion sécurisée à un serveur en mode console SMTP/POP3/IMAP : courriers électroniques 18
Les adresses IP 19
Technologies Internet Les adresses IP Adresse IP 77.197.152.66 Une adresse IP permet d'identifier de manière certaine un ordinateur sur internet (PC, Mac, portable, serveur...) TOUS les ordinateurs connectés sur Internet ont une adresse IP L'adresse IP est unique Quand on utilise une adresse IP, on dit qu'elle est allouée L'allocation d'une adresse IP peut être temporaire (IP variable) ou définitive (IP fixe) 20
Les adresses IP Format d'une adresse IP 77.197.152.66 Quatre nombres séparés par un point (IPv4) Chaque nombre peut prendre une valeur de 0 à 255 Environ 4 milliards d'adresses possibles Ipv6 va succéder à Ipv4 pour augmenter le nombre d'adresses possibles 21
Les noms de domaine 22
Les noms de domaine Le nom de domaine Internaute 77.197.152.66 101.107.182.17 Serveur 69.109.144.19 88.123.144.255 45.187.121.67 61.111.44.20 23
Les noms de domaine Le nom de domaine Internaute 77.197.152.66 www.crpconsulting.net Serveur 69.109.144.19 www.google.fr 45.187.121.67 php.developpez.com 24
Les noms de domaine Format d'un nom de domaine www.crpconsulting.net 3 parties : Le sous-domaine (www) Le domaine de second niveau (crpconsulting) Le domaine de premier niveau ou TLD (net) Ils sont libres mais il faut les louer auprès d'un registrar Source potentielle de conflit pour les noms de marque TLD = Top Level Domain 25
Les noms de domaine Le DNS www.crpconsulting.net --> 101.107.182.17 Serveur DNS Table de conversion 101.107.182.17 Serveur 69.109.144.19 Internaute DNS = Domain Name Server/System 26
Les sites Web 27
Accès au site web Technologies Internet Les sites web www.crpconsulting.net Serveur FTP Internaute Serveur SMB Serveur Serveur WEB Site Web 28
Accès aux pages web Technologies Internet Les sites web img logo.jpg www.crpconsulting.net Serveur WEB news page01.htm Serveur http://www.crpconsulting.net http://www.crpconsulting.net/index.htm OK http://www.crpconsulting.net/news/page01.htm OK http://www.crpconsulting.net/newss/page01.htm Erreur 404 Site Web = racine/root services index.htm 29
Le dialogue client-serveur 30
Technologies Internet Le dialogue client-serveur HTTP : un protocole sans état Serveur Client http://www.crpconsulting.net/index.htm Aller : l'internaute envoie une requête index.htm Retour : le serveur fournit une réponse Le client demande, le serveur fournit Un dialogue est une suite de questions-réponses HTTP est un protocole «sans état» (stateless) 31
Le dialogue client-serveur N clients pour 1 serveur Serveur WEB Le serveur ne «connaît» pas ses clients On ne connaît pas à priori le nombre de clients Un client peut faire «autre chose» entre deux requêtes! 32
Page statique et dynamique 33
Technologies Internet Page statique et dynamique Page statique Client chapitre1.htm? Serveur web preambule.htm chapitre1.htm Répertoire du site index.htm Toutes les pages doivent exister sur le serveur Pas de programmation La maintenance du site est fastidieuse Le rédacteur doit avoir des connaissances en HTML chapitre1.htm chapitre2.htm 34
Technologies Internet Page statique et dynamique Page dynamique Client chapitre.php?nr=1? Serveur web Moteur PHP preambule.php index.php chapitre1.htm Pas besoin d'avoir toutes les pages Programmation nécessaire (PHP, ASP, Java...) La maintenance du site est simplifiée Le rédacteur utilise un back-office La page fournie est TOUJOURS du html MySQL chapitre.php include Backoffice 35
Les langages du Web 36
Technologies Internet Les langages du Web Les (nombreux) langages! HTML, CSS, Javascript,... PHP, SQL,... Serveur WEB http://www.crpconsulting.net/index.htm index.htm ActionScript, ActiveX, Java, Jquery,... ASP, Perl, Java... 37
Les langages du Web Les langages coté client HTML : pour le fond HTML = HyperText Markup Language Permet d'afficher des textes, des images, des liens, des listes à puce... Langage de description à balises Extension des fichier : *.htm ou *.html <p>bonjour le monde</p> 38
Les langages du Web Les langages coté client (suite) CSS : pour la forme CSS = Cascading Style Sheet Les «feuilles de style» permettent de mettre en forme le texte, de définir des couleurs, des polices, un fond d'écran... Langage de description Extension des fichiers : *.css p { color: blue; font-size: 18px; } 39
Les langages du Web Les langages coté client (suite) Javascript : pour programmer coté client Javascript <> Java Permet de créer des programmes sur le navigateur sans plugin Langage de programmation Extension des fichiers : *.js <p> <script type="text/javascript"> document.write('bonjour le monde'); </script> </p> 40
Les langages du Web Les langages coté serveur PHP : pour programmer coté serveur PHP : PHP Hypertexte Preprocessor Permet de créer des programmes coté serveur. Conçu pour le Web. Langage de programmation Extension des fichiers : *.php <p><?php echo("bonjour le monde")?></p> 41
Les langages du Web Les langages coté serveur (suite) SQL : pour accéder aux bases de données SQL = Structured Query Language Permet d'écrire des requêtes d'accés aux bases de données (lecture et mise à jour) Langage de requête indépendant des bases Utilisé avec MySQL Extension des fichiers : *.sql select nom, prenom, id from utilisateur where nom = 'ramiara' 42
Les navigateurs 43
Les navigateurs Rôle du navigateur Serveur WEB http://www.crpconsulting.net/index.htm Aller : l'internaute envoie une requête index.htm Retour : le serveur fournit une réponse Le navigateur est un logiciel chargé : d'afficher les page web de permettre la saisie de formulaires 44
Les navigateurs L'affichage d'une page Web Navigateur Serveur WEB index.htm Le navigateur interprète le «source» HTML pour en faire une page Web Le navigateur fait de l'affichage pur. Pas de mise à jour coté serveur 45
Les navigateurs La saisie de formulaire Navigateur Serveur WEB nom=ramiara, prenom=jf, email=ramiarje@reseau-pyramide.com Le navigateur permet la saisie affichage des zones de saisie contact.php Quand on valide, le contenu est renvoyé au serveur Un programme vérifie et enregistre la saisie 46
Les navigateurs Les parts de marché des navigateurs Source : www.netmarketshare.com - Sept. 2010 Les 3 premiers navigateurs : + 90% du marché! La position d'internet Explorer est artificielle... 47
Les navigateurs Les principaux navigateurs Internet Explorer (IE) Edité par Microsoft Le leader en parts de marché Installé par défaut avec Windows Des problèmes de sécurité Longtemps en retard pour les CSS (IE 6 et 7) existe en version 6, 7, 8, 9 et bientôt 10 48
Les navigateurs Les principaux navigateurs Firefox Edité par Mozilla Corporation Logiciel libre Disponible sous Windows, Mac et Linux Nombreuses extensions Respectueux des standards 49
Les navigateurs Les principaux navigateurs Chrome Edité par Google Lancé en 2008, stable depuis sept. 2010 Logiciel partiellement libre Disponible sous Windows, Mac et Linux Rapide 50
Les navigateurs Les principaux navigateurs Safari Edité par Apple Logiciel propriétaire Installé par défaut avec Mac OS X Disponible sous Mac, Windows et ios Développé suite à l'abandon de IE pour Mac IOS : Système d'exploitation de l'iphone 51
Les navigateurs Les principaux navigateurs Opéra Edité par Opera Software Logiciel propriétaire Disponible sous Windows, Mac et Linux A la pointe de la technologie 52
Les navigateurs Testez vos sites Malgré les standards, tous les navigateurs ne réagissent pas de la même manière! Testez vos pages avec au moins 2 navigateurs Testez vos pages avec les navigateurs de vos utilisateurs Utilisez des balises standards 53
Les outils pour développer 54
Technologies Internet Les outils pour développer Les langages utilisés... HTML, CSS, Javascript,... PHP, SQL,... Serveur WEB http://www.crpconsulting.net/index.htm index.htm Utilisateur 55
Technologies Internet Les outils pour développer...sont stockés sur le serveur http://www.crpconsulting.net/index.htm HTML, CSS, Javascript, PHP, SQL Serveur WEB Utilisateur HTTP index.htm FTP Développeur index.php style.css script.js matable.sql 56
Technologies Internet Les outils pour développer TOUS les fichiers doivent être stockés au MEME endroit Serveur web ressources (*.pdf, *.xls,...) images (*.jpg, *.gif,...) Répertoire du site «root» «racine» CSS (*.css) PHP (*.php) javascript (*.js) HTML (*.htm, *.html) Développeur 57
Les outils pour développer Développement sur le serveur Utilisateur Développeur Machine 2 Machine 1 Avantages/inconvénients Configuration réaliste On peut partager les tâches entre développeur et testeur Il faut transférer les sources à chaque modification On n'a pas toujours la main sur la configuration du serveur 58
Les outils pour développer Développement en local Utilisateur 1 seule machine! Développeur LocalHost/127.0.0.1 Avantages/inconvénient Pas besoin de transférer les sources On fait ce que l'on veut sur la configuration Pas de latence due au réseau. Confidentialité. Pas de partage. Configuration non réaliste 59
Les outils pour développer Les outils pour développer Un Editeur de texte : Notepad++ Pour modifier les fichiers source Un navigateur : Firefox Pour tester, tester, tester... Un serveur Web : Wamp Pour exécuter le code Un outil FTP : Filezilla Pour transférer les fichiers source 60
What's Next? 61
What's Next? Pour la prochaine fois : Répondre au questionnaire En 3 phrases maxi Le télécharger sur : http://dl.free.fr/frosw4m9p Cours suivant : lundi 22 octobre 2012 9H30 : préformation à Pyramide 11H00-12H00 : TLP 12H00-14H00 : TLT Prise en main des outils (navigateur, éditeur, WAMP...) 62
Merci de votre attention 63