La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Fonctionnalités d'un serveur WEB

Présentations similaires


Présentation au sujet: "Fonctionnalités d'un serveur WEB"— Transcription de la présentation:

1 Fonctionnalités d'un serveur WEB
Logiciel Niveau d'exploitation RESEAU Notion de Serveur/Client Niveau d'exploitation SGF La mise en œuvre d'un site Web dépend de 2 aspects : Le serveur Web Le client Web Les 2 aspects mettent en œuvre simplement des outils logiciels Le serveur exploite des accès dans les fonctions basses du système, les couches d'accès réseau et les couches d'accès au système de gestion de fichier. 1 WEB

2 Le Serveur Logiciel ( aspect système ) Différents fournisseurs
IIS ( Microsoft/PC ) Apache (PC/Unix/…) autres Différentes fonctionnalités ColdFusion (PC/.. ) IIS ( ASP,… ) …… Un nombre conséquent de serveurs existent, allant du (petit) serveur aux fonctionnalités réduites, à plusieurs serveurs 'professionnels' Un serveur Web , est en partie passif, et présentaient dans les 1ères versions, quelques fonctionnalités dynamiques ( CGI, SSI notamment ) Les serveurs modernes tels que ceux présentés sur le transparent proposent des fonctionnnalités de transmission des pages HTML ainsi que des fonctionnalités " d'exécution " de procédures locales ( servlet, Asp, Php,…) 2 WEB

3 Le Serveur RESEAU Protocole d'échange Standard réseau
httpd/ ( actuel ?? 1.0 ) Hyper Text Protocol Standard réseau IP ( Tcp/IP / adressage / port ) URL….. ( ) 3 WEB

4 Le Serveur SGF ( Système de Gestion de Fichiers )
Site Web : Hiérarchie de documents/pages Sécurité des accès et autorisation ( mots de passe, no réseau machine,…) Répertoires particuliers Scripts CGI, icônes, alias,… 4 WEB

5 Un exemple 5 WEB

6 Le Serveur Logiciel ( aspect fonctionnel ) CGI SSI
Common Gateway Interface SSI Server Side Include Modules complémentaires ASP, JSP, PHP, …..inclusion de résultats de traitements ….. 6 WEB

7 Le Client Le Browser / Butineur Spécifique à la machine
La Visualisation de la page Web et les aspects Multimédia Certains aspects 'Traitements' : Plugins,JavaScript Java,….. Certains problèmes de compatibilité Plus connus : Netscape, Iexplorer,autres… 7 WEB

8 (langage généraliste XML)
Le Client HTML : Hypertext Markup Language (langage généraliste XML) Interprété Toutes les fonctions d'affichage et de mise en page HYPER-TEXTE : en gros notion de Liens URL : Uniform Resource Locator 8 WEB

9 Le Client URL : Uniform Resource Locator
Convention pour Accès Unique à un document, ou à une fonction Accès aux services réseau : ftp, mail, http,… ftp://ftp.univ-valenciennes.fr telnet://crabe.univ-valenciennes.fr 9 WEB

10 Principes de Fonctionnement
Serveur 3) Rupture de la connexion 1) connexion avec le serveur 2) Echange Mise en cache 10 WEB

11 Principes de Fonctionnement
Fonctionnement Standard Sécurisé Pas de connexion autre qu'avec le serveur Fonctionnements spécifiques - type accès Base de données Pas par le client Coté serveur : asp, jsp, servlet ( java ),… 11 WEB

12

13 Aspects du langage HTML

14 Exemple: mettre en gras le mot Gilles, <b>Gilles</b>.
Généralités Le langage HTML est un langage à balises ( norme v3.2 ou v4.0 ) Une page HTML est un fichier TEXTE contenant un ensemble de balises et de textes descriptifs Exemple: mettre en gras le mot Gilles, <b>Gilles</b>. les commandes sont de la forme : <marqueur> texte </marqueur> <marqueur attribut=argument> texte </marqueur> <marqueur> ou 14 HTML

15 <b> équivaut à <B>
Généralités PEU de différence entre Minuscules et Majuscules <b> équivaut à <B> PLUSIEURS attributs à la même balise <marqueur attribut1=argument1 attribut2=argument2> texte </marqueur> Les normes HTML = caractères ASCII 7 bits pas de caractères accentués 15 HTML

16 Exemple : Page HTML <HTML><HEAD><TITLE> Interfaces avec les SGBD </TITLE></HEAD> <BODY BGCOLOR="#FFFFEE" TEXT="#000000" LINK="#0000B0" VLINK="#0000B0"> <BASEFONT SIZE=3> <TABLE WIDTH=100%> <TR> <TD ALIGN=LEFT><IMG SRC=Icones/WWW.gif BORDER=0 ALIGN=LEFT> <FONT SIZE=1> Bâtir un système d'information avec les outils Web;<BR> interfaces d'accés aux bases de données,<BR> exemple d'application </FONT> </TD> <TD ALIGN=RIGHT> <BR> <A HREF=plan.html><IMG SRC=Icones/back2.gif BORDER=0 HSPACE=1 ALT="[BACK]"></A> <A HREF=index.html><IMG SRC=Icones/up2.gif BORDER=0 HSPACE=1 ALT="[HOME]"></A> <A HREF=B2.html> <IMG SRC=Icones/next2.gif BORDER=0 HSPACE=1 ALT="[NEXT]"></A> <BR CLEAR=ALL> </TD></TR> </TABLE> <HR> <H1><IMG HSPACE=5 SRC=Icones/star_gold.gif ALT="*" > Interfaces avec les SGBD</H1><P> <IMG SRC=int-sgbd.gif ALIGN=RIGHT> 16 HTML

17 Les caractères accentués
Beaucoup de textes Problèmes 'Image' Les caractères accentués 17 HTML

18 Pourquoi ? Texte HTML Editeur Spécialisé Difficile d'être complet
WysiWyg Difficile d'être complet Corrections quelquefois difficiles 18 HTML

19 Les Caractères Accentués
un caractère accentué, on entre une combinaison précédée du caractère & ….. terminé par un ; (point virgule) é se code é Extrait de tableau caractères > 128 19 HTML

20 Balises de documents Les documents sur le Web ( et les objets )
ont un type MIME Un entête spécifiant leur nature et comment les utiliser Type Mime : text/html image/pjpg 20 HTML

21 Un exemple Netscape Par défaut : Gif / Jpeg 21 HTML

22 Balises de documents Nécessaire <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> <META NAME="AUTEUR" CONTENT="Gilles Maire"> <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]"> <TITLE>Un nouveau guide d'Internet - Eléments d'HTML - par cyber</TITLE> </HEAD> <BODY TEXT="#FFAE00" BGCOLOR="#330000" LINK="#FFE600"> </BODY> </HTML> Nécessaire 22 HTML

23 Balises de documents Génération STATIQUE : automatique
Par l'éditeur Web Génération DYNAMIQUE JavaScript Mode programmé A faire soi même ( Autre intérêt de l'aspect texte HTML ) 23 HTML

24 Balises d'entêtes Entre les balises HEAD
<TITLE> : titre de la page <META> : infos générales utilisés par moteur,….. <META NAME="Keywords" CONTENT="Cours,Web"…… <META HTTP-EQUIV="Expires" CONTENT="Monday ,01-Jan-2002"… <BASE> : référence du site des pages <BASE HREF="http://www.univ-valencienne.fr/SITE toto.html ->>>> 24 HTML

25 Balises de mise en forme
Un document : Flux de TEXTE Pas concerné par les Fins de Ligne <! Commentaire > <P> fin de paragraphe <BR> break ; coupe une ligne <HR> coupure horizontale <DIV> <CENTER> 25 HTML

26 Un exemple 26 HTML

27 Exemple : Html <html> <head>
<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </head> <body bgcolor="#FFFFFF"> <p>COURS HTML/WEB</p> <p> </p> <p>Ceci est le paragraphe de présentation</p> <hr> <p>Ici c'est un saut de paragraphe, avec saut de ligne automatique</p> <p>Je ne peux pas mettre de TABULATION pour décaler le texte</p> <p>Par contre une ligne<br> scindée en 2 permet d'avoir une notions de paragraphe</p> </body> </html> 27 HTML

28 Balises de mise en forme
Des balises spécifiques…(quelques unes) <B> , <I>, ..ex: <B><I>Texte</I></B> Texte <PRE> : preformatté <BLINK> : clignotant ( pas norme 3.2 ) <H1>…<H6> <SUP>, <SUB>…exposant,indice,… 28 HTML

29 Exemple plus complet <body bgcolor="#FFFFFF">
<p align="center"><font size="5">COURS HTML/WEB</font></p> <p> </p> <p align="center"><font color="#FF0000">Ceci est le paragraphe de présentation</font></p> <hr align="center" width="50%"> <p>Ici c'est un saut de paragraphe, avec <i><b><font size="+2">saut de ligne automatique</font></b></i></p> <p>Je ne peux pas mettre de TABULATION pour décaler le texte</p> <blockquote> <p>Par contre une ligne<br> scindée en 2 permet d'avoir une notion de paragraphe</p> </blockquote> </body> 29 HTML

30 Editeur : DreamWeaver 30 HTML

31 Editeur : Netscape Composer
31 HTML

32 Fonctionnalités Avancées
Mises en Page IHM attractif Interactivité Html 3.2, Html 4.0 Plugins .. Macromedia Flash Architectures de Documents Images,..multimédia Norme HTML, DHTML, Editeur….. 32 HTML

33 Liens et ancres Liens Hyper-Textes Base de la Navigation sur le Web
Endroit sensible de la page..pointe Une autre page Un point de référence dans la même page ou une autre Une page sur un autre site D'autres fonctionnalités liées a l'URL 33 HTML-liens

34 Liens et ancres <A> : Anchor
URL Local Intra <A> : Anchor <A HREF="adresse URL">…….</A> principe URL protocole : // adresse FQDN : port / page ( ou document Mime) 34 HTML-liens HTML

35 Liens et ancres Protocole Réseau Interne Relatif au réseau
protocole : // adresse FQDN : port / page URL Local Intra Protocole Relatif au réseau Relatif à comportements internes Réseau http , ftp, telnet , mailto, …. Interne javascript: , about: , file: , 35 HTML-liens HTML

36 code_exploitation://nom_machine.domaine_reseau
Les LIENS URL Local Intra Hyperlien Internet : URL code_exploitation://nom_machine.domaine_reseau http ftp file mailto file://c:\images... 36 HTML-liens

37 Liens et ancres Adresse FQDN Fully Qualified Domain Name No de Port
protocole : // adresse FQDN : port / page URL Local Intra Adresse FQDN Fully Qualified Domain Name ?? univ-valenciennes.fr : nom de domaine www : nom du site / nom d'une machine No de Port Référence d'un programme sur une machine Dépend de l'installation / défaut : 80 ( http ) ( mailto ) ( ftp ) 37 HTML-liens HTML

38 Liens et ancres L'objet MIME ( fichier )
protocole : // adresse FQDN : port / page URL Local Intra L'objet MIME ( fichier ) extension : .html / .htm , .gif , .jpg défaut : dépend du serveur index.html , index.htm : 1ère page La configuration : dépend du serveur et du client : .conf/Apache mime/Netscape 38 HTML-liens HTML

39 Liens et ancres Hyperlien local ( dépend <BASE> ) ici hyperlien
URL Local Intra Hyperlien local ( dépend <BASE> ) ici hyperlien toto.html image.gif / image.jpg texte.doc #etiquette ancre ( anchor ) toto.html#etiquette <A HREF="url"> ……. </A> 39 HTML-liens HTML

40 Liens et ancres Hyperlien : les ancres intra document
URL Local Intra Hyperlien : les ancres intra document inter document..pas le début <A NAME=aaaa> <A HREF="#aaaa">…</A> <A HREF="http://www/toto.html#aaaa" aaaa aaaa 40 HTML-liens HTML

41 Liens particuliers <A message pour </A> Appel automatique de la composition <A HREF="file:….."> ….. </A> 41 HTML-liens

42 Les images Formats supportés Intégrés dans la mise en page
Gif / Jpg Intégrés dans la mise en page Pas toujours génial => artifices <IMG SRC="toto.gif" ALT="texte" WIDTH=640 HEIGHT=480> 42 HTML-images

43 Les images Principal Intérêt Beauté/attrait de la page
Dialogue / hyperlien <A HREF…><IMG> </A> Prévisualisation ex : image réduite, charge l'image complète Images cliquables LOURDEUR de chargement 43 HTML-images

44 Les MAP Objectifs : Image Cliquable Menu Autres,….
<MAP NAME=Nom> <AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF="url"> </MAP> <IMG SRC=Nom de l'image USEMAP="#Nom"> SHAPE=rect|circle|poly 44 HTML-images HTML

45 Les MAP : DreamWeaver 45 HTML-images HTML

46 Les MAP : DreamWeaver 46 HTML-images HTML

47 Les MAP : DreamWeaver <body bgcolor="#FFFFFF">
<img src="file:///D:/WEB_BDD/msqljava.gif" width="281" height="156" usemap="#menu" border="0"> <map name="menu"> <area shape="rect" coords="17,90,99,135" href="#sql" target="_parent"> <area shape="rect" coords="167,78,266,138" href="#sql"> <area shape="rect" coords="169,9,263,68" href="#serveur"></map> </body> 47 HTML-images HTML

48 Balises de définitions
Listes de définitions Listes de répertoires Listes de numéros Liste à puces Listes de menus Mises en page Structurées 48 HTML-autres HTML

49 Exemple : Listes 49 <ul> <li>Liste1</li>
<p><b>Les Listes Numérotées</b></p> <ol> <li>Numero 1 <li>Numero 10</li> <li>Numero 11</li> <li>Numero 12</li> </ol> </li> <li>Numero 2</li> <li>Numero3</li> <li></li> 49 HTML-autres HTML

50

51 Petite synthèse Fonctionnalités de base
Petites pages simples, plutôt techniques Organisations plus évoluées Tableaux => données tabulaires + facilités + outils de mise en page Facilité introduites par les éditeurs D-Html…… Les fonctions et comportements présentés permettent une mise en œuvre de 'petites pages HTML'. Pour créer des mises en pages structurées, supportant une 'certaine intéractivité' il est nécessaire d'utiliser des objets plus complexes 51

52 Les Tableaux Simplement : colonnes + lignes
Code HTML : aie……un peu dur dur Editeur wysiwyg : intéressant Intérêt Données Mise en page Les tableaux sont la base de mises en formes de données spécifiques , et vont être utilisés pour effectuer des mises en page complexes de certaines pages Web. Il est impératif de disposer d'un éditeur facilitant leur manipulation. 52 HTML-tableau

53 Tableau - détail Case tableau Regroupement de cases Image (s) Texte
Portion page Html Tableau Regroupement de cases Découper la zone en Zones inégalement réparties Chaque cellule de tableau va se comporter comme une mini page Web, à la taille variable ou fixe, fonction des paramètres ( nombreux ) du tableau Il est possible de regrouper plusieurs cases pour n'en faire qu'une seule. 53 HTML HTML-tableau

54 Exemple Même Tableau Le tableau peut s'adapter à la dimension de la fenêtre du navigateur. 54 HTML HTML-tableau

55 Le code Une ligne de 5 colonnes <body bgcolor="#FFFFFF">
<table width="400" border="1" height="231"> <tr> <td> </td> </tr> Une ligne de 5 colonnes Tableau = <table> </table> Ligne = <tr> </tr> Colonne = <td> </td> 55 HTML HTML-tableau

56 Autre exemple 2 colonnes Tableau imbriqué 56
Pour faire un menu…et une zone d'affichage 56 HTML HTML-tableau

57 Et un autre… 1 tableau 6 colonnes 10 lignes
Regroupement de cases Des regroupements impossibles 57 HTML-tableau HTML

58

59 HTML 4.0 Introduction de fonctionnalités étendues de mise en page
Frame Layer Feuilles de Styles Gros PB de compatibilité entre IE et Netscape Le norme HTML 4 introduit de nouveaux objets et comportements. Le pionnier (Netscape, on peut le dire ..mais peut être en perte de vitesse maintenant ) a introduit souvent des éléments de la norme suivante dans les versions actuelles de ses logiciels ( le concurrent aussi d'ailleurs ). Même si une partie de la norme est respectée par tout le monde , la mise en œuvre peut être différente, voire incohérente. Utiliser les fonctionnalités suivantes impliquent souvent l'utilisation exclusive d'un visualisateur N ou E 59

60 Structuration avancée de pages
HTML Les Frame Structuration avancée de pages Un nom / frame Frame FrameSet C'est compliqué, car pour 3 zones d'affichage il faut 4 fichiers Fichier 1 = frameset , contenant le descriptif des zones et les attributs Fichier n = les 'n' zones Beaucoup de personnes préfèrent utiliser des tableaux ou autres… 3 zones = fichiers .html 60 HTML-frame

61 Les Frame Intérêts Découpage d ’un site/page en gardant visible certaines parties ( menu , structure site ) Contrôle de défilement Certaines options permettent ( ou non ) de garder les séparations entre les zones, les ascenseurs, etc. A voir, le look dépend du navigateur et du système d'exploitation..pas toujours très beau. 61 HTML HTML-frame

62 Les Frame Intérêts Target : option d'un 'href'
blank : nouvelle fenêtre Parent Nom frame…. Une frame possède un nom Un hyperlien peut spécifer une 'target' et donc choisir la zone d'affichage 'destinataire' L'option 'target=blank' permet l'affichage dans une nouvelle page. Des options supplémentaires permettent de supprimer les menus, barres,… 62 HTML-frame

63 Exemple : Frame 4 Frame 1 scrollable 63 HTML-frame HTML

64 Les Feuilles de Styles Comparable aux styles que l'on trouve
dans les traitements de textes Mise en forme globale et uniforme d'un site Définit des classes d'attributs Modification des attributs standards HTMl Fichier extérieur .css Inclus dans le source par classe JavaScript Pour se faciliter une mise en forme d'un site….. A voir 64 HTML-css

65 Exemple : définition Feuille
65 HTML-css

66 Exemple de Style La création n'est pas toujours Wysiwyg ( ici DreamWeawer ) 66 HTML-css

67 Exemple comparatif 67 Feuille de style très simple….3 classes simples
Ca marche partout ( distordu peut être, mais du à la recopie d'écran ) 67 HTML-css

68 Le code source 68 <html> <head>
<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </head> <body bgcolor="#FFFFFF"> <p class="titre" style="left: 313px; top: 9px">Bonjour</p> <p>On <span class="bas">essaie</span> de <span class="haut">faire</span> une <span class="bas">mise</span> en <span class="bas">page</span></p> <p> </p> <p class="titre"><span class="titre"><span class="titre"><span class="titre"><span class="titre"><span class="haut"><span class="bas"><span class="titre"><span class="titre">FIN</span></span></span></span></span></span></span></span> </p> </body> </html> <style type="text/css"> <!-- .haut { top: 10px; clip: rect( ); position: relative} .bas { top: -10px; clip: rect( ); position: relative} .titre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; text-align: center; color: #FF0033} --> </style> Observer les différentes zones descriptives et référencées. Le code généré par l'éditeur peut être erroné, suite à des manipulations souris répétées ou mal contrôlées. L'exécution dans la page Web est souvent correcte, mais inutile. Il peut être intéréssant de minimiser le source HTML en l'éditant directement à la main. Erreur non visible dans la page ( à corriger à la main ) 68 HTML-css

69 Introduction dans une page Web de Zones d'affichage 'autonomes'
Les LAYER Introduction dans une page Web de Zones d'affichage 'autonomes' Difficile d'afficher des zones dynamiques indépendantes ( frame, fenêtre externe,..) Mise en page ( police, couleur,…) Layer + Javascript…..ca bouge Euh….incompatibilité possible avec E et N A observer sur les sites Fonctionnalités intéressantes, mais pas très utilisées 69 HTML-layer

70 On peut le faire aussi avec des tableaux
Zones indépendantes On peut le faire aussi avec des tableaux en direct Ouarhhhhhhh !!! C'est beau 70 HTML-layer

71 Ca bouge En direct Ici ca ne bouge pas beaucoup, mais avec la diapo suivante cela permet de s'affranchir d'un niveau de programmation JavaScript ou de Flash ou autre 71 HTML-layer

72 Exemple pratique En direct 72 HTML-layer

73 Les formulaires 1er niveau d'interactivité
Zones de saisie + interface de dialogue Nécessite un niveau de traitement CGI JavaScript FORM + INPUT Méthode d'envoi :paramètre 'action' GET / POST ( la + moderne , unique maintenant ) Envoi : bouton ( submit ) Premier pas vers un retour d'information sur le serveur Habituellement par l' action=mailto, Nécessité de 'programmer' la récupération des informations Langage préféré de certains développeurs : Perl, C,.. 73 HTML-form

74 Un exemple 74 HTML-form

75 Les objets Un formulaire propose les interfaces standards pour la saisie de textes D'éléments dans une liste Coche de choix prédéfinit Il est plus difficile de pouvoir envoyé un fichier vers le serveur ( ex : une image ) pb de sécurité ( piratage ) Pb de récupération des données 75 HTML-form

76

77 Mise en Oeuvre Word Excel PowerPoint
Editeur Spécialisé : FrontPage, DreamWeaver,Netscape Composer,ColdFusion, autre …. Une phase intéressante pour démarrer : document Traitement de textes,…. ( Microsoft = exporter HTML ), sous Word extension HTML. On améliore après 77 DREAM

78 DreamWeaver - La gestion de Site
Le Serveur Situé sur une machine hôte distante Structure arborescente des pages sous forme de fichiers ‘ système ’ sécurité des pages niveaux spéciaux d ’accès avec mots de passe L ’url de référence : 78

79 DreamWeaver - La gestion de Site
Mode FTP Accès à la machine houebe hoth ftp.nordnet.fr ftpperso.free.fr /usr/www/forma login : forma passwd : forma99 79

80 DreamWeaver - La gestion de Site
Le site Local Visualisation graphique Gestion simplifiée 80

81 DreamWeaver - La gestion de Site
Transfert de la structure sur le site réel Fichier par fichier avec les documents relatifs ou attachés Accessibilité par Si pb on le voit tout de suite 81

82 Architecture des répertoires
Adressage absolu Adressage Relatif Répertoire de référence Index.html Relativité des répertoires Répertoire : www Répertoire : www/images Le répertoire devient le répertoire de référence Il est important de bien comprendre que la structure des pages, les hyper-liens,… sont étroitement liés. Certains hyper-liens tapés à la main, ou par programme, peuvent engendrés des problèmes , et donc la page est plantée En général : absolue nom.html : relatif au répertoire courant images/toto.gif : relatif au répertoire fils ( images ) ../images/toto.gif : répertoire au dessus du répertoire courant 82

83 83

84 84

85 DreamWeaver Exercice No3 Réagencer le site avec frames
Réimplantation du site sur houebe....si il y a de la place Sinon hoth 85

86 DreamWeaver – exo 1 Exercice No1
Mettre en forme un site a partir de documents existants La page principale : index.html Les pages secondaires : page suivante, page maître, menu de circulation, glossaire Le glossaire : les mots clés référencent le glossaire cours2/page2_2.html -> ancre / glossaire la date de mise à jour en bas l ’adresse ( la votre, , ) 86

87 DreamWeaver – exo2 Exercice No2 Implantation du site
sur houebe....si il y a de la place Sinon hoth 87


Télécharger ppt "Fonctionnalités d'un serveur WEB"

Présentations similaires


Annonces Google