1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de...

Fonctionnalités d'un serveur WEB

o Logiciel

o Niveau d'exploitation RESEAUoNotion de Serveur/Client

o Niveau d'exploitation SGF

Le Serveur

o Logiciel ( aspect système ) Différents fournisseurs

IIS ( Microsoft/PC )Apache (PC/Unix/…)autres

Différentes fonctionnalitésColdFusion (PC/.. ) IIS ( ASP,… )……

Le Serveur

o RESEAU Protocole d'échange

httpd/ ( actuel ?? 1.0 ) Hyper Text Protocol

Standard réseauIP ( Tcp/IP / adressage / port )URL….. (

protocole://utilisateur@adresse:port )http://www.univ-valenciennes.fr:80/

Le Serveur

o 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 particuliersScripts CGI, icônes, alias,…

Un exemple

Le Serveur

o Logiciel ( aspect fonctionnel )

CGICommon Gateway Interface

SSIServer Side Include

Modules complémentairesASP, JSP, PHP, …..inclusion de résultats de

traitements

Le Client

o Le Browser / Butineuro Spécifique à la machine o La Visualisation de la page Web et

les aspects Multimédiao Certains aspects 'Traitements' :

Plugins,JavaScript Java,…..

•Certains problèmes de compatibilité•Plus connus : Netscape, Iexplorer,autres…

Le Client

o HTML : Hypertext Markup Language(langage généraliste XML)

Interprété Toutes les fonctions d'affichage et de

mise en page

o HYPER-TEXTE : en gros notion de Liens

o URL : Uniform Resource Locator

Le Client

o 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.frtelnet://crabe.univ-

valenciennes.fr

Principes de Fonctionnement

•Serveur

•1) connexion avec le serveurhttp://……

•2) Echange Mise en cache

•3) Rupture de la connexion

Principes de Fonctionnement

o Fonctionnement Standard Sécurisé Pas de connexion autre qu'avec le serveur

o Fonctionnements spécifiques - type accès Base de données

Pas par le clientCoté serveur : asp, jsp, servlet ( java ),…

Généralités

o Le langage HTML est un langage à balises ( norme v3.2 ou v4.0 )

o Une page HTML est un fichier TEXTE contenant un ensemble de balises et de textes descriptifs

o Exemple: mettre en gras le mot Gilles, Gilles.

o les commandes sont de la forme :

o <marqueur> texte </marqueur> o <marqueur attribut=argument> texte </marqueur> o <marqueur>

Généralités

o PEU de différence entre Minuscules et Majuscules

équivaut à

o PLUSIEURS attributs à la même balise

<marqueur attribut1=argument1 attribut2=argument2> texte </marqueur>

o Les normes HTML = caractères ASCII 7 bits

pas de caractères accentués

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>

• 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>HTML

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

Pourquoi ? Texte HTML

o Editeur Spécialisé

WysiWyg

o Difficile d'être completo Corrections quelquefois difficiles

Les Caractères Accentués

ð ë 1/2 1/4 3/4 &excl;

• 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

Balises de documents

o Les documents sur le Web ( et les objets )

ont un type MIMEo Un entête spécifiant leur nature et

comment les utilisero Type Mime : text/html image/pjpg

exemple

Netscape Par défaut : Gif / JpegHTML

o <HTML>o <HEAD>o <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-

8859-1">o <META NAME="AUTEUR" CONTENT="Gilles Maire">o <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">o <TITLE>Un nouveau guide d'Internet - Eléments d'HTML - par

cyber</TITLE>o </HEAD>o <BODY TEXT="#FFAE00" BGCOLOR="#330000" LINK="#FFE600">o </BODY>o </HTML>

•Nécessaire

o Génération STATIQUE : automatiquePar l'éditeur Web

o Génération DYNAMIQUE JavaScript Mode programmé

A faire soi même

( Autre intérêt de l'aspect texte HTML )HTML

Balises d'entêtes

o Entre les balises HEADo <TITLE> : titre de la pageo <META> : infos générales utilisés par

moteur,…..<META NAME="Keywords" CONTENT="Cours,Web"……<META HTTP-EQUIV="Expires" CONTENT="Monday ,01-Jan-2002"…

o <BASE> : référence du site des pages<BASE HREF="http://www.univ-valencienne.fr/SITE

toto.html ->>>> http://www.univ-valenciennes.fr/SITE/toto.html

Balises de mise en forme

o Un document : Flux de TEXTEo Pas concerné par les Fins de Ligne

<! Commentaire > fin de paragraphe break ; coupe une ligne <HR> coupure horizontale <DIV> <CENTER>

Un exemple

Exemple : Html

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></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 automatiqueJe ne peux pas mettre de TABULATION pour décaler le textePar contre une ligne scindée en 2 permet d'avoir une notions de paragraphe </body></html>

Balises de mise en forme

o Des balises spécifiques…(quelques unes) , , ..ex: Texte

Texte <PRE> : preformatté <BLINK> : clignotant ( pas norme 3.2 ) <H1>…<H6> , …exposant,indice,…

Exemple plus complet

COURS HTML/WEB

Ceci est le paragraphe de présentation

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 notion de paragraphe

</blockquote>

</body>

Editeur : DreamWeaver

Editeur : Netscape Composer

Fonctionnalités Avancées

o Mises en Page IHM attractif Interactivité

Html 3.2, Html 4.0Plugins .. Macromedia Flash

o Architectures de Documentso Images,..multimédia

Norme HTML, DHTML, Editeur…..

Liens et ancres

o Liens Hyper-Texteso Base de la Navigation sur le Web

o 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

HTML-liens

Liens et ancres

o <A> : Anchor

o <A HREF="adresse URL">…….</A>

•principe URL• protocole : // adresse FQDN : port / page ( ou document Mime)HTML

URL Local Intra

HTML-liens

Liens et ancres

o Protocole Relatif au réseau Relatif à comportements internes

o Réseau http , ftp, telnet , mailto, ….

o Interne javascript: , about: , file: ,

protocole : // adresse FQDN : port / pageURL Local Intra

HTML-liens

Les LIENS

o Hyperlien Internet : URL

• http://www.univ-valenciennes.fr

code_exploitation://nom_machine.domaine_reseau

mailto

http://www.

ftp://forma@houebe

file://c:\images...

mailto://valli@univ-val....

URL Local Intra

HTML-liens

Liens et ancres

o Adresse FQDNFully Qualified Domain Name

www.univ-valenciennes.fr ??univ-valenciennes.fr : nom de domainewww : nom du site / nom d'une machine

o No de Port Référence d'un programme sur une

machine Dépend de l'installation / défaut : 80 ( http )

25 ( mailto ) 21 ( ftp )HTML

protocole : // adresse FQDN : port / pageURL Local Intra

HTML-liens

Liens et ancres

o L'objet MIME ( fichier )

o extension : .html / .htm , .gif , .jpgo défaut : dépend du serveur

index.html , index.htm : 1ère page

o La configuration : dépend du serveur et du client : .conf/Apache mime/Netscape

protocole : // adresse FQDN : port / page

URL Local Intra

HTML-liens

Liens et ancres

o Hyperlien local ( dépend <BASE> ) ici hyperlien

toto.htmlimage.gif / image.jpgtexte.dochttp://www.univ-valenciennes.fr/images/

image.gif#etiquette ancre ( anchor )toto.html#etiquette

URL Local Intra

•<A HREF="url"> ……. </A>

HTML-liens

Liens et ancres

o Hyperlien : les ancres intra document inter document..pas le début

URL Local Intra

•<A NAME=aaaa>

•<A HREF="#aaaa">…</A>•<A HREF="http://www/toto.html#aaaa"

HTML-liens

Liens particuliers

o <A HREF="mailto:Bruno.Valli@uvhc.fr?subject=Sujet"> message pour </A>

Appel automatique de la composition Email

o <A HREF="file:….."> ….. </A>

HTML-liens

Les images

o Formats supportés Gif / Jpg

o Intégrés dans la mise en pageo Pas toujours génial => artifices

HTML-images

Les images

o 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 cliquablesLOURDEUR de chargement

HTML-images

Les MAP

o Objectifs : Image Cliquable Menu Autres,….

</MAP>

<IMG SRC=Nom de l'image USEMAP="#Nom">SHAPE=rect|circle|poly

HTML-images

Les MAP : DreamWeaver

HTMLHTML-images

</body>

HTMLHTML-images

Balises de définitions

oListes de définitions oListes de répertoires oListes de numéros oListe à puces oListes de menus

Mises en page Structurées

HTMLHTML-autres

Exemple : Listes•<ul>

• <li>Liste1</li>

• <li>Liste 2</li>

• <li>Liste 3</li>

•</ul>

•Les Listes Numérotées

•<ol>

• <li>Numero 1

• <ol>

• <li>Numero 10</li>

• </ol>

• </li>

• <li>Numero3</li>

• <li></li>

•</ol>HTMLHTML-autres

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 Tableaux

o Simplement : colonnes + ligneso Code HTML : aie……un peu dur duro Editeur wysiwyg : intéressant

o Intérêt Données Mise en page

HTML-tableau

Tableau - détail

o Case tableau Image (s) Texte Portion page Html Tableau

o Regroupement de cases Découper la zone en Zones inégalement réparties

HTMLHTML-tableau

Exemple•Même Tableau

HTMLHTML-tableau

Le code

Une ligne de 5 colonnes

HTML-tableau

Autre exemple

•2 colonnes•Tableau imbriqué

HTMLHTML-tableau

Et un autre…

•1 tableau•6 colonnes•10 lignes

Des regroupementsimpossibles

HTMLHTML-tableau

HTML 4.0

o Introduction de fonctionnalités étendues de mise en page Frame Layer Feuilles de Styles … Gros PB de compatibilité entre IE et

Netscape

HTML 4.0 - Les Frame

o Structuration avancée de pages

Frame FrameSet

Un nom / frame

HTML-frame

•3 zones = 4 fichiers .html

Les Frame

o Intérêts Découpage d ’un site/page en gardant

visiblecertaines parties ( menu , structure site )

Contrôle de défilement

HTMLHTML-frame

Les Frame

o Intérêts Target : option d'un 'href'

blank : nouvelle fenêtreParentNom frame….

HTML-frame

Exemple : Frame

•4 Frame•1 scrollable

HTML-frame

Les Feuilles de Styles

o 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

HTML-css

Exemple : définition Feuille

HTML-css

Exemple de Style

HTML-css

La création n'est pas toujours Wysiwyg( ici DreamWeawer )

Exemple comparatif

HTML-css

Le code

source

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF">BonjourOn essaie de <span

class="haut">faire une mise en page <span

class="titre">FIN

</body></html>

HTML-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>

Erreur non visible dans la page( à corriger à la main )

Les LAYER

o 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

HTML-layer

Zones indépendantes

o On peut le faire aussi avec des tableaux

o en direct

HTML-layer

Ca bouge

o En direct

HTML-layer

Exemple pratique

HTML-layer

En direct

Les formulaires

o1er niveau d'interactivitéo Zones de saisie + interface de dialogue

oNécessite un niveau de traitemento CGIo JavaScript

oFORM + INPUTo Méthode d'envoi :paramètre 'action' GET / POST

( la + moderne , unique maintenant )o Envoi : bouton ( submit )

HTML-form

Un exemple

HTML-form

Les objets

HTML-form

Mise en Oeuvre

o Wordo Excelo PowerPointo Editeur Spécialisé : FrontPage,

DreamWeaver,Netscape Composer,ColdFusion, autre ….

DreamWeaver - La gestion de Site

o Le Serveur Situé sur une machine hôte distante

Structure arborescente des pages sous forme de fichiers ‘ système ’sécurité des pagesniveaux spéciaux d ’accès avec mots de passe

L ’url de référence : http://machine.domaine

o Accès à la machine

houebe

ftp.nordnet.fr

ftpperso.free.fr

/usr/www/formalogin : forma

passwd : forma99

Mode FTP

o Le site Local

Visualisation graphique Gestion simplifiée

o Transfert de la structure sur le site réel

Fichier par fichier avec les documents relatifs ou attachés

o Accessibilité par http://www.... Si pb on le voit tout de suite

Architecture des répertoires

o Adressage absoluo Adressage Relatif

Répertoire de référenceIndex.html

Relativité des répertoiresRépertoire : wwwRépertoire : www/images

• Le répertoire http://www/SITE/toto.html devient le répertoire de référence

DreamWeaver

o Exercice No3 Réagencer le site avec frames Réimplantation du site

sur houebe....si il y a de la place• http://www.univ-valenciennes/forma/g1....

Sinon hoth• http://hoth.univ-valenciennes/forma/g1....

DreamWeaver – exo 1

o Exercice No1 Mettre en forme un site a partir de documents

existantsLa page principale : index.htmlLes pages secondaires : page suivante, page

maître, menu de circulation, glossaireLe glossaire : les mots clés référencent le glossairecours2/page2_2.html -> ancre / glossaire la date de mise à jour en bas l ’adresse email ( la votre, valli@ , fabrice.blin@ )

DreamWeaver – exo2

o Exercice No2 Implantation du site

sur houebe....si il y a de la place• http://www.univ-valenciennes/forma/g1....

Sinon hoth• http://hoth.univ-valenciennes/forma/g1....

1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de...

Documents

Transcript of 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de...

Goujons à souder - fourniture industrielle...1. Goujons à souder en SIG® 7 1.2 Goujon entièrement fileté avec chanfreins d’entrées / type SGF Le goujon SGF est symétrique,

Diagnostic d'Exploitation IBIS

Fonctionnement d’un SGF - lipn.univ-paris13.frlipn.univ-paris13.fr/~cerin/SE/SF2.pdf · Fonctionnement d’un Système de Gestion de Fichiers (SGF) - les disques ... Organisation

Buffetaut 1997 Gastornis SGF

Votre compétence, Notre Souci, Notre Fiertésgfconseils.org/images//Catalogue_2018_Officiel.pdf · 1. sgf comptabilite audit & controle de gestion fiscalite management d’entreprise

Projet d'exploitation

software - système d'exploitation

AGAR Bulletins de la SGF Page 1geolales.net/SGF-pdf/bulletin_sgf-1.pdf · Le Précambrien de la partie Nord du désert Arabique Oriental de l'Egypte Schürmann ... (Maroc septentrional)

Serveur d’application WebDevpulsonic.free.fr/.../Serveur%20d%27application/WebDevD%E9ploieme… · n’est disponible que pour un serveur Windows. ... du poste serveur. •Etape

Anatomie du périnée féminin - UNF3S - CAMPUS …campus.cerimes.fr/.../basereference/SGF/SGF-Campus/cours-perinee.pdf · en arrière le sommet du coccyx et les ... un losange à

Automatiser le processus d'exploitation sur Linux x86 . cracking/Automatiser le... · d'exploitation sur Linux x86 Stavros Lekkas ... tâche d'exploitation de ce bogue, • Les critères

-VARI- Systèmes d'exploitation

Bulletin d'exploitation de l'UIT · No 1158 – 2 Bulletin d'exploitation de l'UIT Dates de parution des prochains Bulletins d'exploitation* Comprenant les renseignements reçus au:

Syllabus Systèmes d'Exploitation

Systèmes d'exploitation

Systèmes d'Exploitation II

C. Crochepeyre Cnam-DiapasonUNIX: SGF 1 UNIX: Système de Gestion de Fichiers.

règlement d'exploitation AREA.

Guide d'installation du système d'exploitation pour le serveur Sun ...

Dell Systems Build and Update Utility Version 2.1 …...Systems Build and Update Utility ou cliquez sur Installation du système d'exploitation du serveur dans le volet gauche. 16