Fonctionnalités d'un serveur WEB

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

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

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

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

Un exemple 5 WEB

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

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

(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

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

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

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

Aspects du langage HTML

Exemple: mettre en gras le mot Gilles, Gilles.
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, Gilles. les commandes sont de la forme : <marqueur> texte </marqueur> <marqueur attribut=argument> texte </marqueur> <marqueur> ou 14 HTML

 équivaut à 
Généralités PEU de différence entre Minuscules et Majuscules équivaut à 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

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/ BORDER=0 ALIGN=LEFT> Bâtir un système d'information avec les outils Web; interfaces d'accés aux bases de données, exemple d'application </TD> <TD ALIGN=RIGHT> <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> </TD></TR> </TABLE> <HR> <H1><IMG HSPACE=5 SRC=Icones/star_gold.gif ALT="*" > Interfaces avec les SGBD</H1> <IMG SRC=int-sgbd.gif ALIGN=RIGHT> 16 HTML

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

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

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

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

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

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

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

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=" toto.html ->>>> 24 HTML

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

Un exemple 26 HTML

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

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

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

Editeur : DreamWeaver 30 HTML

Editeur : Netscape Composer
31 HTML

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

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

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

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

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

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

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

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

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=" aaaa aaaa 40 HTML-liens HTML

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

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

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

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

Les MAP : DreamWeaver 45 HTML-images HTML

Les MAP : DreamWeaver 46 HTML-images HTML

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

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

Exemple : Listes 49 <ul> <li>Liste1</li>
Les Listes Numérotées <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

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

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

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

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

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

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

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

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

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

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

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

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

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

Exemple : définition Feuille
65 HTML-css

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

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

Le code source 68 <html> <head>
<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </head> <body bgcolor="#FFFFFF"> Bonjour On essaie de faire une mise en page FIN </body> </html> <style type="text/css">  </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

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

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

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

Exemple pratique En direct 72 HTML-layer

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

Un exemple 74 HTML-form

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

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

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

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

Le site Local Visualisation graphique Gestion simplifiée 80

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

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

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

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

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

Fonctionnalités d'un serveur WEB

Présentations similaires

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

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Fonctionnalités d'un serveur WEB

Présentations similaires

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

Présentations similaires

Notre projet

Feed-back