publication de documents sur le web

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.


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


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.)


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

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)…

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>

Un exemple (ex1.html)

<html><head> <title>Mon exemple no. 1</title></head><body> Bonjour, voici une page qui montre que les fins de ligne ne sont pas prises en compte. </body></html>

Un peu plus (ex2.html)

<html><head> <title>Mon exemple no. 2</title></head><body> <h1>Cours de technologies de l'information</h1> Ce cours présente absolument toutes les technologies

disponibles dans le monde d'aujourd'hui. Il ne nécessite aucun pré-requis, si ce n'est … <h2>Le crayon et le papier</h2> Cette technologie est la plus performante connue à l'heure

actuelle. Elle nécessite cependant un long apprentissage </body></html>

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> Ce cours présente absolument toutes les technologies disponibles dans le monde d'aujourd'hui. Il ne nécessite aucun pré-requis, si ce n'est …



<h2 style="font-family:arial">Le crayon et le papier</h2> Cette technologie est la plus performante

connue à l'heure actuelle. Elle nécessite cependant un long apprentissage 

</body></html>

Exemple (ex4.html)

Il est bien connu de tous1 les graphistes, mais de peu de créateurs de sites Web, que l'abus de formattage nuit gravement à la lisibilité. De plus, le formattage fixe n'est pas adapté à tous les appareils de présentation.

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

Exemple (ex5.html)

Liens internes/externes.

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

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


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.


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


Démo

http://www.gva.ch/fr/default.htm

http://www.google.ch

http://fr.news.yahoo.com/meteo/


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

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

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


<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

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


<html> …<javascript…>…</html>

http://www.unige.ch/…Serveur Web

Interpréteur Javascript

page html


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

Interpràtation d'un script coté serveur

Script

Page HTMLBase de

données

Page ASP/PHP

Interprète

------------------------ ------------------------------------------------------------------------------------------------------------------------------------


<html> …

</html>

Requête: http://www.....asp, .php, .pl

Réponse: page html

Serveur Web


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


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


La technologie ASP

Source : commentcamarche.com


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


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)


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).

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>


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)

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

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

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>

Exemple de script

<% If Time > = #12:00:00 AM# And Time < #12:00:00 PM# Then greeting = "Bonjour !" Else greeting = "Hello !"

End If %>

 <%= greeting %> 

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 !

Exemple de script

Inclusion de texte HTML dans une instruction

 <% If Time > = #12:00:00 AM# And Time < #12:00:00 PM#

Then %> Bonjour !

<% Else %> "Hello !"

<% End If %>

Exemple de script

Date courante : <%=date%>

Date et heure courantes : <%=now%>

Heure courante : <%=time%>


PHP

HTTP

Internet

Serveur w

eb (Apache)

Nav

igat

eur

web

(M

ozil

la)


PHP

Code PHP : « côté serveur »

Navigateur client : HTML

Conséquence : le code source PHP est protégé

Premier exemple

Le fichier essai.php contient :

Le navigateur recevra la page HTML :

<html><body>

<?php

echo "bonjour ";echo "salut ";echo 1+2*3;

?>

 ci-dessus du php 

</body></html>

<html><body>

bonjour salut 7

 ci-dessus du php 

</body></html>

Balises<?php code php ici ?>

Instructionsex: echo "du texte";

Variables

Les variables commencent toutes par un $

<html><body>

<?php

// mettons 10 dans $variable$variable = 10;// affichons $variableecho $variable;

echo "";

echo "10" + '5.2';?>

</body></html>

<html><body>

1015.2

</body></html>

Boucles

Comme dans tous les autres langages

<html><body>

<?php

// l'intérêt du $for ($i=0; $i<4; $i++) { echo " Number $i \n";}

?>

</body></html>

<html><body>

Number 0 Number 1 Number 2 Number 3 

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

Principes de base

Pour afficher la date et l’heure :

<html><body>

<?phpecho date("d/m/Y");echo " \n";echo "".date("H:m:s")."";?>

</body></html>

<html><body>

13/05/2004 21:03:42

</body></html>

13/05/200521:03:42



Rendu

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 $restant mois !";}?></body></html>

<html><body>

C'est lesvacancesdans 2mois !

</body></html>

C'est les vacances dans 2 mois !



Rendu


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


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

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

SaïdRadhouaniAssistant/doctorant[email protected]



exemple

XML

<prenom>Saïd</prenom><nom>Radhouani</nom><Fonction>

Assistant/doctorant </Fonction>

<email>[email protected]

</email>


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


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


Principe des feuilles de style

Données brutes

Pages XML

Feuille de style

Appliquer

Données formattées

Pages HTML

Présenter


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


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)


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)


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!


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


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...)


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


Liens utilies

www.commentacamarche.com http://www.w3.org/MarkUp/ http://www.asp.net www.php.net www.spip.net www.plone.org

publication de documents sur le web

Documents