Post on 20-Dec-2014
description
Publication de documents sur le Web
Saïd RadhouaniUniversité de Genève
08 octobre 2005 Saïd Radhouani - CUI 2
Apparition du WEB
On a un besoin: partage de documents On a des contraintes:
Format standard pour représenter les documents (pour le partage) Disponibilité des document en permanence
Les moyens dont on dispose: Internet
Questions? Où est ce qu’on va stocker ces documents? Sous quel format? Comment va-t-on les afficher? Quel logiciel? Quel matériel?
Un besoin => solution en fonction des moyens dont on dispose => du matériel, du logiciel, des langages, etc.
08 octobre 2005 Saïd Radhouani - CUI 3
Pour chaque besoin, une solution
Données(documents) Format=HTML
client (navigateur)Internet ExplorerNetscapeSafari…
Un serveur web est une machine qui:•Stocke les données•Tourne en permanence
Internettransport
Affichage
Un navigateur est un logiciel qui:•Communique avec le serveur pour demander des données•Affiche ces données
HTML: standard
Formattage
08 octobre 2005 Saïd Radhouani - CUI 4
HTML
HTML = HyperText Markup Language
Langage utilisé pour créer des pages Web
Un fichier HTML = fichier texte dans lequel sont insérées des marques/balises (pour formater le texte)
Le code HTML décrit ce qui doit être affiché par le navigateur
Il contient des indications sur : La succession des éléments, Sur la police du texte (taille et couleur de chaque portion de
texte, ce qui doit être mis en italique, en gras ou souligné, etc.)
08 octobre 2005 Saïd Radhouani - CUI 5
HTML
Permet de définir des liens vers d’autres documents en utilisant leur URL Le web est un gigantesque hypertexte
Insérer des tableaux, des images, etc.
Le navigateur analyse tous les éléments du code HTML et crée une représentation globale de la page
Pour voir un exemple de code HTML, utiliser la fonction « view source » du navigateur
08 octobre 2005 Saïd Radhouani - CUI 6
Code HTML en bref
Document = éléments délimités par des balises
Balise (tag): <nom-balise>
A une balise ouvrante correspond en principe une balise fermante : <tag> … contenu …</tag>
Attributs des balises (pour préciser, adapter, décorer)<p align="center">… </p>
08 octobre 2005 Saïd Radhouani - CUI 7
Structure d'un document HTML
<html><head>
<title>Mon titre: titre de la page telle que dans la barre de titre de fenêtre, pour bookmarks etc. </title>
… autres meta-informations
</head><body>… le corps du doc
</body></html>
08 octobre 2005 Saïd Radhouani - CUI 8
Un exemple (ex1.html)
<html><head> <title>Mon exemple no. 1</title></head><body> <p>Bonjour, voici une page qui montre que les fins de ligne ne sont pas prises en compte. </p></body></html>
08 octobre 2005 Saïd Radhouani - CUI 9
08 octobre 2005 Saïd Radhouani - CUI 10
Un peu plus (ex2.html)
<html><head> <title>Mon exemple no. 2</title></head><body> <h1>Cours de technologies de l'information</h1> <p>Ce cours présente absolument toutes les technologies
disponibles dans le monde d'aujourd'hui.</p> <p>Il ne nécessite aucun pré-requis, si ce n'est …</p> <h2>Le crayon et le papier</h2> <p>Cette technologie est la plus performante connue à l'heure
actuelle. Elle nécessite cependant un long apprentissage </p></body></html>
08 octobre 2005 Saïd Radhouani - CUI 11
08 octobre 2005 Saïd Radhouani - CUI 12
Exemple avec attributs (ex3.html)
<html><head> <title>Mon exemple no. 3</title> </head><body> <h1 align="center">Cours de technologies de l'information</h1> <p>Ce cours présente absolument toutes les technologies disponibles dans le monde d'aujourd'hui.</p> <p align="center">Il ne nécessite aucun pré-requis, si ce n'est …
</p>
<h2 style="font-family:arial">Le crayon et le papier</h2> <p style="color:blue">Cette technologie est la plus performante
connue à l'heure actuelle. Elle nécessite cependant un long apprentissage </p>
</body></html>
08 octobre 2005 Saïd Radhouani - CUI 13
08 octobre 2005 Saïd Radhouani - CUI 14
Exemple (ex4.html)
Il est bien <i>connu</i> de tous<sup>1</sup> les <b>graphistes</b>, mais de <font color="blue">peu de créateurs </font>de sites <font size="+3">Web</font>, que l'abus de <font family="sans-serif" color="orange"> formattage</font> <u>nuit</u> gravement à la lisibilité. <font face="courier">De plus, le formattage fixe n'est pas <b>adapté</b> à tous les appareils de présentation.</font>
08 octobre 2005 Saïd Radhouani - CUI 15
08 octobre 2005 Saïd Radhouani - CUI 16
Liens hypertextes
Créer un lien (sur image ou texte) <a>
Paramètre href URL de la page cible
Forme :…<a href="page-cible">ancre</a> …
C'est là que l'on passe du texte à l'hypertexte
08 octobre 2005 Saïd Radhouani - CUI 17
Exemple (ex5.html)
Liens internes/externes.
<p>Vous pouvez consulter quelques exemples, il y a <a href="ex1.html">le plus simple</a>, puis un exemple <a href="ex2.html"> un peu plus élaboré</a>. </p>
<p>Vous pouvez aussi vous rendre sur le site de <a href="http://www.unige.ch">l'Université de Genève</a>ou bien <a href="http://www.lemonde.fr">lire le journal</a>.
08 octobre 2005 Saïd Radhouani - CUI 18
08 octobre 2005 Saïd Radhouani - CUI 19
Le Web : un serivce qui évolue
Le service évolu en focntion des besoins
Nouveaux Besoins : entreprise commercial agents de publicité ...
HTML : prévu surtout pour la structure d'un texte, pas pour sa présentation
Ajout de nouvelles balises HTML : cadres, tableaux, clignotement de texte, etc.
08 octobre 2005 Saïd Radhouani - CUI 20
Plus de besoins, plus de fonctionnalités
Affichage de données en temsp réel (météo, bourse, aéroport, etc.)
Affichage de valeurs claculées (age, prix, etc.)
Apparition du commerce électronique
etc.
Web dynamique
08 octobre 2005 Saïd Radhouani - CUI 21
Démo
http://www.gva.ch/fr/default.htm
http://www.google.ch
http://fr.news.yahoo.com/meteo/
08 octobre 2005 Saïd Radhouani - CUI 22
Web statique / Web dynamique
Page statique : 1. les pages HTML publiées ne changent pas tant que le
webmaster n'a pas effectué des modif.2. tous les client reçoivent la même page3. la page est créée par le webmaster et stockée sur le disque
dure du serveur
Page dynamique :1. les pages HTML changent automatiquement sans
intervention du webmaster2. les client ne recevoivent pas forcément la même page3. la page est créée par le serveur pour un client particulier
08 octobre 2005 Saïd Radhouani - CUI 23
Web statique
Navigateur web (client)
<html> ……
</html>
http://www.unige.ch/page.htmlServeur Web
page.html
Les pages HTML ont été créées par le Webmaster
Le client reçoit la page telquelle a été créée par le webmaster
Plusieurs clients reçoivent la même page avec le même contenu
08 octobre 2005 Saïd Radhouani - CUI 24
Web dynamique
Exécution d'un programme sur le serveur et création de la page La page html envoyée est générée dynamiquement
Navigateur web (client)
<html> …
</html>
http://www....[paramètres]
page html
Serveur Web
La page HTML est créée en fonction des paramêtres de la requête HTTP
page : le contenu est créé en temps réel
page : le contenu est dépendant des paramètres de sa requête
08 octobre 2005 Saïd Radhouani - CUI 25
Web intéractif vs Web dynamique
Les langages de script permet d'avoir des pages actives et non dynamiques
Le contenu des pages est fixe
Navigateur web (client)
<html> …<javascript…>…</html>
http://www.unige.ch/…Serveur Web
Interpréteur Javascript
page html
08 octobre 2005 Saïd Radhouani - CUI 26
Pages dynamique
Utiliser un langage de script pour créer des pages dynamiques
Les scripts sont incorporés dans le document HTML
les scripts s'exécutent sur le serveur
Solutions : ASP (Active Server Pages) - Microsoft PHP CGI
08 octobre 2005 Saïd Radhouani - CUI 27
Interpràtation d'un script coté serveur
Script
Page HTMLBase de
données
Page ASP/PHP
Interprète
------------------------ ------------------------------------------------------------------------------------------------------------------------------------
Navigateur web (client)
<html> …
</html>
Requête: http://www.....asp, .php, .pl
Réponse: page html
Serveur Web
08 octobre 2005 Saïd Radhouani - CUI 28
La technologie ASP
ASP (Active Server Pages) est un standard mis au point par Microsoft en 1996
Il permet de développer des sites Web dynamiques
Une page web ASP (fichier .asp) aura un contenu pouvant être différent selon certains paramètres (des informations stockées dans une base de données, les préférences de l'utilisateur,...)
ASP est une technologie, ou plus exactement un environnement de programmation
Il permet de représenter sous forme d’OBJETS les interactions entre le navigateur du client, le serveur web, ainsi que les connexions à des bases de données
08 octobre 2005 Saïd Radhouani - CUI 29
La technologie ASP
Les Active Server Pages s'inscrivent dans une architecture 3-tier,
Un serveur supportant les Active Server Pages peut servir d'intermédiaire entre le navigateur du client et une base de données
Grâce à la technologie ADO (ActiveX Data Objects) on peut faire un accès transparent à la base de données,
La technologie ADO fournit les éléments nécessaires à la connexion à un système de gestion de bases de données, à la manipulation des données grâce au langage SQL
08 octobre 2005 Saïd Radhouani - CUI 30
La technologie ASP
Source : commentcamarche.com
08 octobre 2005 Saïd Radhouani - CUI 31
Qu'est ce qu'un fichier .ASP
Un fichier .asp = un fichier texte contenant toutes les combinaisons possibles des éléments suivants : Texte Balises HTML Commandes de script. Une commande de script donne à votre
ordinateur l'instruction d'effectuer une tâche quelconque, comme par exemple d'affecter une valeur à une variable
Les ASP sont intégrables au sein d'une page Web en HTML à l'aide de balises spéciales permettant au serveur Web de savoir que le code compris à l'intérieur de ces balises doit être interprété afin de renvoyer des données (généralement du code HTML) au navigateur du client
08 octobre 2005 Saïd Radhouani - CUI 32
ASP – Principe de fonctionnement
Lorsqu'un navigateur (le client) désire accéder à une page dynamique réalisé avec la technologie ASP:
Le serveur reconnaît qu'il s'agit d'un fichier ASP grâce à son extension
Il lit le fichier ASP
Dès qu'il rencontre une balise indiquant que les lignes suivantes sont du code ASP, il ne lit plus les instructions mais il les interprète!
une instruction => la transmettre à l'interpréteur
L'interpréteur exécute l'instruction puis envoie les sorties au serveur
A la fin du script, le serveur transmet le résultat au client (le navigateur)
08 octobre 2005 Saïd Radhouani - CUI 33
ASP – Principe de fonctionnement
Un script ASP est interprété par le serveur => les utilisateurs ne peuvent donc pas voir le code source
L'interprétation du code se fait sur le serveur =>aucune modification n'est à réaliser sur les navigateurs
Les scripts ASP, une fois interprétés par le serveur, ont donc pour effet de produire l'envoi de la réponse HTTP au navigateur, ainsi que des traitements éventuels effectués au niveau du serveur et non visibles dans le code résultant (connexion à une base de données par exemple).
08 octobre 2005 Saïd Radhouani - CUI 34
Insertion de script
Afin de définir le langage des scripts inclus dans le fichier et devant être interprétés par le serveur, ASP propose un balisage spécifique.
Le langage utilisé pour écrire les scripts peut-être au choix : le VBscript ou bien le Jscript
Syntaxe : <SCRIPT language="VBScript|Jscript"
[runat="server|client"]
[src="url"] > code du script
</SCRIPT>
08 octobre 2005 Saïd Radhouani - CUI 35
Insertion de script
La balise language est obligatoire Définir le langage devant être utilisé lors de l'interprétation
La balise runat est optionnelle Définir à quel niveau doit être interprété le script
Si la valeur = «server» le serveur se chargera d'interpréter le code du script et renverra les réponses au navigateur
Si la valeur = «client» le code sera renvoyé tel quel (sans interprétation) au navigateur, qui sera chargé d'interpréter le script
La balise src est optionnelle Faire appel à une portion de code définie dans un fichier
extérieur repéré par son emplacement (URL ou chemin relatif)
08 octobre 2005 Saïd Radhouani - CUI 36
Insertion de script
ASP propose une façon simplifiée de définir un bloc de script : <% code du script %>
Ne définit pas le type de langage à utiliser lors de l'interprétation
Afin de définir le langage de script de la page, il est nécessaire d'utiliser la commande <%@ LANGUAGE %> en début du fichier
La syntaxe : <%@ LANGUAGE="LangageDeScript" %> LangageDeScript : le langage de script qui sera utilisé dans
la suite du fichier
08 octobre 2005 Saïd Radhouani - CUI 37
Exemple de script
écrit en VBScript
<%@ LANGUAGE="VBSCRIPT" %> <HTML> <HEAD> <TITLE>Exemple de script ASP</TITLE></HEAD> <BODY> <% FOR i = 1 to 10 %> Bienvenue <% Next %></BODY> </HTML>
Répéter 10 fois l'affichage de la chaîne Bienvenue
08 octobre 2005 Saïd Radhouani - CUI 38
Exemple de script
Le même code écrit en JScript
<%@ LANGUAGE="JSCRIPT" %>
<HTML>
<HEAD>
<TITLE>Exemple de script ASP</TITLE>
</HEAD>
<BODY>
<% for(i=1;i<=10;i++){%>
Bienvenue
<% } %>
</BODY>
</HTML>
08 octobre 2005 Saïd Radhouani - CUI 39
Exemple de script
<% If Time > = #12:00:00 AM# And Time < #12:00:00 PM# Then greeting = "Bonjour !" Else greeting = "Hello !"
End If %>
<FONT COLOR="GREEN"> <%= greeting %> </FONT>
Un utilisateur qui affiche ce script avant 12:00 (midi dans le fuseau horaire du serveur Web) voit apparaître Bonjour !
Un utilisateur qui affiche ce script à midi pile ou après midi, voit apparaître Hello !
08 octobre 2005 Saïd Radhouani - CUI 40
Exemple de script
Inclusion de texte HTML dans une instruction
<FONT COLOR="GREEN"> <% If Time > = #12:00:00 AM# And Time < #12:00:00 PM#
Then %> Bonjour !
<% Else %> "Hello !"
<% End If %></FONT>
08 octobre 2005 Saïd Radhouani - CUI 41
Exemple de script
Date courante : <%=date%>
Date et heure courantes : <%=now%>
Heure courante : <%=time%>
08 octobre 2005 Saïd Radhouani - CUI 42
PHP
HTTP
Internet
Serveur w
eb (Apache)
Nav
igat
eur
web
(M
ozil
la)
08 octobre 2005 Saïd Radhouani - CUI 43
PHP
Code PHP : « côté serveur »
Navigateur client : HTML
Conséquence : le code source PHP est protégé
08 octobre 2005 Saïd Radhouani - CUI 44
Premier exemple
Le fichier essai.php contient :
Le navigateur recevra la page HTML :
<html><body>
<?php
echo "bonjour ";echo "salut ";echo 1+2*3;
?>
<p> ci-dessus du php </p>
</body></html>
<html><body>
bonjour salut 7
<p> ci-dessus du php </p>
</body></html>
Balises<?php code php ici ?>
Instructionsex: echo "du texte";
08 octobre 2005 Saïd Radhouani - CUI 45
Variables
Les variables commencent toutes par un $
<html><body>
<?php
// mettons 10 dans $variable$variable = 10;// affichons $variableecho $variable;
echo "<p>";
echo "10" + '5.2';?>
</body></html>
<html><body>
10<p>15.2
</body></html>
08 octobre 2005 Saïd Radhouani - CUI 46
Boucles
Comme dans tous les autres langages
<html><body>
<?php
// l'intérêt du $for ($i=0; $i<4; $i++) { echo " Number $i <br />\n";}
?>
</body></html>
<html><body>
Number 0 <br /> Number 1 <br /> Number 2 <br /> Number 3 <br />
</body></html>
Number 0 Number 1Number 2 Number 3
Fichier .php présent sur leserveur
Fichier tel qu’il estReçu par le navigateur
Rendu
08 octobre 2005 Saïd Radhouani - CUI 47
Principes de base
Pour afficher la date et l’heure :
<html><body>
<?phpecho date("d/m/Y");echo "<br />\n";echo "<b>".date("H:m:s")."</b>";?>
</body></html>
<html><body>
13/05/2004<br /><b>21:03:42</b>
</body></html>
13/05/200521:03:42
Fichier .php présent sur leserveur
Fichier tel qu’il estReçu par le navigateur
Rendu
08 octobre 2005 Saïd Radhouani - CUI 48
Deuxième exemple
<html><body><?php
// le mois de l'année:$month = date("m");if ( $month == "07" || $month == "08" ) { echo "Bonnes vacances";} else { $restant = 7 - $month; echo "C'est les vacances dans <i>$restant</i> mois !";}?></body></html>
<html><body>
C'est lesvacancesdans <i>2</i>mois !
</body></html>
C'est les vacances dans 2 mois !
Fichier .php présent sur leserveur
Fichier tel qu’il estReçu par le navigateur
Rendu
08 octobre 2005 Saïd Radhouani - CUI 49
ASP vs PHP
La portabilité : ASP ne tourne que sur IIS qui ne peut être installé que sur un serveur
Windows PHP tourne sur Apache qui est multi-plateforme
Le prix : ASP demande de nouveaux frais dès qu’il faut de nouveaux add-on
par exemple pour une librairie graphique PHP est totalement gratuit
L’efficacité : ASP bénéficie d’un framework très puissant, mais au final, le code
généré souffre de temps d’exécution pénalisants et d’une utilisation mémoire trop importante
PHP est plus rapide à s’exécuter et bénéficie de solutions permettant de précompiler les pages et ainsi d’optimiser les temps
Evolution : PHP bénéficie d’une communauté soudée, visant à corriger
rapidement les bugs présents Tandis qu’un bug trouvé sur ASP doit être corrigé, testé, puis soumis
à validation et donc met beaucoup plus de temps à être mis en place
08 octobre 2005 Saïd Radhouani - CUI 50
Limites du langage HTML
Le résultat envoyé par un serveur est toujours un fichier HTML
Offre seulement un nombre limité de balises pour la structuration de documents
Impossibilité de séparer le contenu et la présentation
Est prévu pour être visualisé sur un écran d’ordinateur (difficile pour les ordinateurs de poche ou les téléphones portables)
Manque de structure difficile à traiter automatiquement pour extraire des informations
etc.
Le web continue à évoluer => continuer à réajuster les protocoles aux nouveaux besoins pour ajouter des
fonctionnalités au HTML? une autre solution?
La solution : proposer un nouveau langage qui peut dépasser les limites du langage HTML
08 octobre 2005 Saïd Radhouani - CUI 51
Le langage XML - eXtensible Markup Language
Un nouveau langage avec de nouvelles balises Les balises XML décrivent le contenu plutôt que la
présentation
HTML
<p>Saïd</p><p>Radhouani</p><p>Assistant/doctorant</p><p>Radhouani@cui.unige.ch
</p>
exemple
XML
<prenom>Saïd</prenom><nom>Radhouani</nom><Fonction>
Assistant/doctorant </Fonction>
<email>Radhouani@cui.unige.ch
</email>
08 octobre 2005 Saïd Radhouani - CUI 52
Le langage XML
Le fichier XML est structuré en « éléments » à l'aide de balises
Les balises marquent le début et la fin de chaque élément
Les éléments peuvent contenir du texte et éventuellement d'autres éléments
L'ensemble des données du document XML est contenu dans un élément unique appelé « racine » qui contient tous les autres éléments
08 octobre 2005 Saïd Radhouani - CUI 53
Mise en page de XML
XML permet la description des données et non de leur représentation
La mise en page des données est assurée par un langage de mise en page tiers CSS(Cascading StyleSheet), la solution la plus utilisée
actuellement, étant donné qu'il s'agit d'un standard qui a déjà fait ses preuves avec HTML
XSL (eXtensible StyleSheet Language), un langage de feuilles de style extensible développé spécialement pour XML
08 octobre 2005 Saïd Radhouani - CUI 54
Principe des feuilles de style
Données brutes
Pages XML
Feuille de style
Appliquer
Données formattées
Pages HTML
Présenter
08 octobre 2005 Saïd Radhouani - CUI 55
Structure de document XML
XML fournit un moyen pour vérifier la syntaxe d'un document vérifier la validité du document produit
DTD (Document Type Definition) : un fichier qui décrit la structure des documents XML il contient la définition d’un langage selon le standard XML:
quelles sont les balises?comment peuvent-elles êtres imbriquées?etc.
Un document est valide s’il se conforme à sa DTD
Un document est bien formé s'il suit les règles de XML
08 octobre 2005 Saïd Radhouani - CUI 56
Objectifs et avantages du XML
La lisibilité : aucune connaissance ne doit être nécessaire pour comprendre un contenu d'un document XML
Autodescriptif
Universalité et portabilité : les différents jeux de caractères sont pris en compte
Extensibilité : capacité à pouvoir décrire n'importe quel domaine de données
Intégrabilité : un document XML est utilisable par toute application pourvue d'un parser (un logiciel permettant d'analyser un code XML)
08 octobre 2005 Saïd Radhouani - CUI 57
Objectifs et avantages du XML
Afficher un même document sur des périphériques différents sans créer des versions du document à priori (grâce à la séparation du contenu du contenant)
Permet de structurer, poser le vocabulaire et la syntaxe des données qu'il va contenir.
Echange de documents au format XML sans pour autant influer sur la forme de ceux-ci
Echange de données entre programmes (même sur Internet)
08 octobre 2005 Saïd Radhouani - CUI 58
ASP, PHP, XML, ... C’est bien mais…
HTML, ASP, PHP, XML, représentent de bonnes solutions, mais … ne sont pas accessibles par tout le monde!
Exemple: un journaliste, qui aimerait publier ses articles sur le web, peut:1. Envoyer au webmaster les documents et ce dernier se
charge de les publier => on devient dépendant du webmaster une surcharge pour le webmaster, etc.
2. Apprendre ASP, PHP, XML, etc.3. Autre solution!
08 octobre 2005 Saïd Radhouani - CUI 59
SPIP/Plone : Développement collaboratif de sites
Des Systèmes Publication et gestion de contenu sur le Web
Outils attrafctifs qui permettent de : Gérer un site à plusieurs, Mettre en page des documents sans avoir à taper du code
HTML, Modifier très facilement la structure d'un site avec un simple
navigateur
Avec un simple navigateur, SPIP/Plone permettent l'ajout, la mise à jour et la maintenance du contenu grâce à une interface très simple d’utilisation
08 octobre 2005 Saïd Radhouani - CUI 60
SPIP : Développement collaboratif de sites
SPIP :
Gérer un site Web de type magazine, c’est-à-dire, composé principalement d’articles et de brèves insérés dans une arborescence de rubriques imbriquées les unes dans les autres
Séparer trois types de tâches : la composition graphique la contribution rédactionnelle via proposition d’articles et
de brèves la gestion éditoriale du site (tâche qui comprend
l’organisation des rubriques, la validation des articles proposés...)
08 octobre 2005 Saïd Radhouani - CUI 61
SPIP - Développement collaboratif de sites
Séparation des tâches
Webmaster aspect graphique des pages HTML appelées "squelettes"
modification de pages "squelettes"modification de feuilles de style CSS
Éditeurs : organisation du sitecréation/modification de la hiérarchie des rubriquesvalidation des articles
Rédacteurs : rédaction des pages à l’intérieur du siteutilisent la hiérarchie de rubriques mais ne peuvent pas
la modifier
08 octobre 2005 Saïd Radhouani - CUI 62
Liens utilies
www.commentacamarche.com http://www.w3.org/MarkUp/ http://www.asp.net www.php.net www.spip.net www.plone.org