Institut Supérieur des études technologiques de Sfax Cours Programmation Web Borchani Anis 2017-2018 1 Chapitre 1 Introduction au développement web Objectif: Introduire des terminologies liées aux développements web 2 Borchani Anis 1
Internet? Un réseau de réseaux Un ensemble de logiciels et de protocoles Basé sur l'architecture TCP/IP Fonctionne en mode Client/serveur Offre un ensemble de services (e-mail, transfert de fichiers, connexion à distance, WWW,... ) Une somme «d'inventions» qui s'accumulent o o o o mécanismes réseau de base (TCP/IP) gestion des noms et des adresses (DNS) des outils et des protocoles spécialisés le langage HTML 3 Internet? Une construction à partir du «bas» o réseau local (laboratoire, institut, département) o réseau local (campus, entreprise) o réseau régional o réseau national o réseau mondial 3 niveaux d'interconnexion o postes de travail (ordinateur, terminal... ) o liaisons physiques (câbles, fibres optiques, RTC... ) o routeurs (équipement spécialisé, ordinateur... ) 4 Borchani Anis 2
historique d'internet 1959-1968 : Programme ARPA ministère américain de la défense : lancer un réseau capable de supporter les conséquences d'un conflit nucléaire. 1969 : ARPANET, l'ancêtre d'internet : les universités américaines s'équipent de gros ordinateurs et se connectent au réseau ARPANET 1970-1982 : Ouverture sur le monde : premières connexions avec la Norvège et Londres. 1983 : Naissance d'internet : protocole Tcp/IP -> tous les réseaux s'interconnectent, les militaires quittent le navire. 5 historique d'internet 1986 : Les autoroutes de l'information : la National Science Fondation décide de déployer des super-ordinateurs pour augmenter le débit d'internet. 1987-1992: Les années d'expansion : les fournisseurs d'accès apparaissent, les entreprises privées se connectent au réseau. 1993-2003 : L'explosion d'internet : ouverture au grand public avènement du WEB et du courrier électronique. -> marché considérable 6 Borchani Anis 3
Intranet et Extranet Intranet o utilisation des protocoles, outils et services de l'internet dans un cadre privé (établissement, entreprise, état...) o intégration des services existants: accès aux BD, messageries, forums... Extranet : ouverture vers des partenaires (fournisseurs, clients... ) 7 Internet : Réseaux de Réseaux 8 Borchani Anis 4
Internet : Réseaux de Réseaux 9 Les adresses IP Sur le réseau internet chaque ordinateur ou équipement possède une adresse unique, qui lui permet d'être identifié de manière spécifique sur le réseau, quelle que soit sa situation géographique. Par analogie, on peut comparer cette adresse à un numéro de téléphone, qui identifie de manière absolument unique un abonné dans le monde entier. Les adresses Internet «IP» se composent de quatre nombres (4 octets), chacun étant compris entre 0 et 255. Les quatre nombres sont séparés par des points, par exemple: 138.48.38.67 192.168.1.1 10.10.10.10 10 Borchani Anis 5
Le système de nom de domaine «DNS» La désignation des ordinateurs par une adresse numérique (adresse IP) est une bonne chose pour une machine communiquant avec d'autres machines, mais elle est nettement moins pratique pour des humains. Pour cela on donne des noms aux machines d'internet. Prenons un exemple, celui d'une machine appelée "hp" au Département Informatique de ISET Sfax. Cette machine appartient au domaine "depinfo" (Département Informatique), Qui lui-même appartient au domaine "isetsf" (ISET Sfax), Qui lui-même appartient au domaine "rnu" (Réseau National Univesitaire), Qui lui-même appartient au domaine "tn" (Tunisie). Le DNS de cette machine est donc "hp.depinfo.isetsf.rnu.tn". 11 Le système de nom de domaine «DNS» Les machines préfèrent les chiffres, adresse IP (exemple : 138.48.38.67), les hommes préfèrent les noms (exemple : hp.depinfo.isetsf.rnu.tn). Qui fait la transformation des noms en adresse IP? Un ordinateur bien sûr, appelé serveur DNS hp.depinfo.isetsf.rnu.tn 138.48.38.67 Client Serveur DNS 12 Borchani Anis 6
Les services Internet Les principaux services d Internet sont les suivants: Le web «WWW» Messagerie électronique «email» Transfert de fichiers «FTP» Le chat «IRC» Peer-to-Peer «P2P» Visiophonie Téléphonie 13 Le service Web World Wide Web : Ce service permet d'accéder à des pages Web. Une page Web est écrite en langage HTML (Hyper Text Mark-up Language) et peut contenir : Texte Images (statiques ou animées) Séquences vidéos Son Liens hypertexte Chaque page web est caractérisé par une adresse unique appelée URL (par exemple www.yahoo.com www.mes.tn) 14 Borchani Anis 7
Navigateur 26/09/2017 Le service Web : URL URL (Uniform Resource Locator) est un format de nommage universel pour désigner une ressource sur Internet. URL se décompose en cinq parties : Le nom du protocole Identifiant et mot de passe (Facultatif) Le nom du serveur Le numéro de port (Facultatif si 80) Le chemin d'accès à la ressource Une URL a donc la structure suivante : http://www.inscription.tn/index.html protocole Le nom du serveur Le chemin d'accès à la ressource 15 Le service Web : page web Adresse de la page : URL 16 Borchani Anis 8
Le service Web : Fonctionnement Client Navigateur Web Serveur Web 17 Le service messagerie électronique Le service permet d envoyer et de recevoir des emails et des documents avec toute personne possédant une adresse électronique. Exemples d adresses électronique: Nom_prenom@yahoo.fr Nom.prenom@gmail.com prenom12345@hotmail.com Le service se base sur deux protocoles: SMTP : «Simple Mail Transfer Protocol» pour l envoie des courriers POP3 : «Post Office Protocol» pour la réception des courriers 18 Borchani Anis 9
Le service messagerie électronique 19 Le service Transfert de Fichier Ce service, comme son nom l indique, permet de transférer directement des fichiers d une machine à une autre. FTP «File Transfer Protocol» est le Protocole utilisé dans ce service. Le service est efficace surtout en matière de transfert de gros volumes de données. Pour utiliser le service, on peut utiliser le navigateur ou un logiciel FTP 20 Borchani Anis 10
Le service Transfert de Fichiers 21 Le service Chat Le chat est un service Internet basé sur le protocole IRC «Internet Relay Chat» (en français, «discussion relayée par Internet»). Le service permet la communication textuelle sur Internet, Cela se présente sous forme de messages qui s'affichent en temps réel et permettent donc une réponse immédiate de l'interlocuteur. 22 Borchani Anis 11
Le service Chat 23 Architecture Client / Serveur Serveur On appelle logiciel serveur un programme qui offre un service sur le réseau. Le serveur accepte des requêtes, les traites et renvoie le résultat au demandeur. Le terme serveur s'applique à la machine sur laquelle s'exécute le logiciel serveur. Pour pouvoir offrir ces services en permanence, le serveur doit avoir un accès permanent et s'exécuter en permanence.(adresse IP Statique). 24 Borchani Anis 12
Architecture Client / Serveur Client On appelle logiciel client un programme qui utilise le service offert par un serveur. Le client envoie une requête et reçoit la réponse. Le terme client s'applique à la machine sur laquelle s'exécute le logiciel client. Le client peut-être raccordé par une liaison temporaire (Adresse IP Dynamique). 25 Architecture Client / Serveur Client Client Client Serveur Client Client 26 Borchani Anis 13
Architecture 3 tiers 27 Le langage HTML Le langage HTML «HyperText Markup Language» a été développé initialement par Tim Berners-Lee, au CERN HTML est fondamentalement un langage très simple, dans lequel des balises (tag) définissent un élément et ses propriétés. Exemple : la balise <P> définit un paragraphe. Nouveau paragraphe Paragraphe centré <P align=center>html emploie des balises (comme <H1> et </H1>) pour structurer un texte en en-têtes, paragraphes, listes, liens hypertextes, etc.</p> 28 Borchani Anis 14
Le langage HTML Une page HTML se présente fondamentalement comme suit : <HTML> <HEAD>.Entête... </HEAD> <BODY>.contenu... </BODY> </HTML> Nous reviendrons bien sûr plus en détail par la suite sur cette structure. 29 Le langage HTML Versions HTML HTML 1.0 en 1991 HTML 2.0 en 1995 HTML 3.2 en 1997 HTML 4.01 en 1999 HTML 5 en 2009 30 Borchani Anis 15
Dernière version 26/09/2017 FEUILLES DE STYLES EN CASCADES : CSS Les CSS : «Cascading Style Sheets» permettent de définir les styles à appliquer aux documents HTML, tels que les couleurs, les alignements, les tailles des polices, l aspect des tableaux, etc. Garantir une présentation homogène des pages HTML et de modifier cette présentation en ne modifiant qu un seul document. Assurer une compatibilité multi-navigateurs (contrairement aux arrangements réalisés en HTML) et fournissent une facilité de maintenance pour les sites. 31 FEUILLES DE STYLES EN CASCADES : CSS Exemple H1 { font-family: Arial; /* changer le style de la police */ font-size: 14px; /* changer la taille de la police */ color: #00ff00; /* changer la couleur de la police */ } 32 Borchani Anis 16
FEUILLES DE STYLES EN CASCADES : CSS 33 Le langage JavaScript JavaScript est un langage de scripts qui est incorporé aux balises HTML. Permet d améliorer la présentation et l interactivité des pages Web (tel que la communication avec les navigateurs). Un code JavaScript permet de : Contrôler la saisie dans un formulaire. Accéder aux objets de navigateur. Exécuter des commandes du coté client (date système, gestion de la fenêtre, gestion de navigateur).etc. 34 Borchani Anis 17
Les langages Dynamiques La premier historiquement, appelé CGI (Common Gateway Interface) consistait à interpréter des programmes (généralement écrits en perl ou en langage C), puis de leur faire renvoyer un contenu compatible avec le protocole HTTP. Le langage ASP.net (Active Server Pages) de Microsoft a permis de simplifier l'écriture de tels scripts en manipulant des objets en VBScript. 35 Les langages Dynamiques Le langage PHP (Hypertext preprocessor) emploie son propre langage (dérivé du C++ et de Perl) et permet de nombreuses fonctionnalités (équivalentes à celles de la technologie ASP). Le langage JSP (Java Server Pages) est la plus récent parmi ces technologies. il permet d'utiliser toute la puissance de Java pour créer des pages web dynamiques. 36 Borchani Anis 18
Les langages Dynamiques 37 Les éditeurs de sites Un éditeur de site est un logiciel conçu pour faciliter la préparation et la modification de documents écrits en HTML, PHP, Il existe deux catégories d'éditeur : Les éditeurs WYSIWYG «What You See Is What You Get», signifiant littéralement en français «ce que vous voyez est ce que vous obtenez» Les éditeurs de texte (bloc note, notepad++, sublime text). 38 Borchani Anis 19
Les éditeurs de sites 39 Les Systèmes de gestion de contenu (CMS) CMS est l acronyme de content management system, soit, en français, «système de gestion de contenu». Il s agit d un programme informatique utilisant une base de données et permettant de gérer de A et Z l apparence et le contenu d un site web. Il permet, à des individus ou à des groupes hiérarchisés, de mettre à jour le contenu d un site web à partir d un panneau d administration. Exemples : WordPress, Joomla, presta shop, 40 Borchani Anis 20