Publication de documents sur le Web

Publication de documents sur le Web Sa ïd Radhouani Université de Genève

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

Pour chaque besoin, une solution 08 octobre 2005 Saïd Radhouani - CUI Données(documents) Format=HTML client (navigateur) Internet Explorer Netscape Safari … Un serveur web est une machine qui: Stocke les données Tourne en permanence Internet transport 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.) 08 octobre 2005 Saïd Radhouani - CUI

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 P our voir un exemple de code HTML, utiliser la fonction « view source » du navigateur 08 octobre 2005 Saïd Radhouani - CUI

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) … 08 octobre 2005 Saïd Radhouani - CUI

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

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> 08 octobre 2005 Saïd Radhouani - CUI

08 octobre 2005 Saïd Radhouani - CUI

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> 08 octobre 2005 Saïd Radhouani - CUI

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> 08 octobre 2005 Saïd Radhouani - CUI

Exemple (ex4.html) Il est bien connu de tous 1 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. 08 octobre 2005 Saïd Radhouani - CUI

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

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>. 08 octobre 2005 Saïd Radhouani - CUI

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

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

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

Web statique / Web dynamique Page statique : les pages HTML publiées ne changent pas tant que le webmaster n'a pas effectué des modif. tous les client reçoivent la même page la page est créée par le webmaster et stockée sur le disque dure du serveur Page dynamique : les pages HTML changent automatiquement sans intervention du webmaster les client ne recevoivent pas forcément la même page la page est créée par le serveur pour un client particulier 08 octobre 2005 Saïd Radhouani - CUI

Web statique 08 octobre 2005 Saïd Radhouani - CUI Navigateur web (client) <html> … … </html> http://www.unige.ch/page.html Serveur 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 08 octobre 2005 Saïd Radhouani - CUI 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

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 08 octobre 2005 Saïd Radhouani - CUI Navigateur web (client) <html> … < javascript …> … </html> http://www.unige.ch/… Serveur Web Interpréteur Java script 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 08 octobre 2005 Saïd Radhouani - CUI

Interpràtation d'un script coté serveur 08 octobre 2005 Saïd Radhouani - CUI Script Page HTML Base 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

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 U ne 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

La technologie ASP L es Active Server Pages s'inscrivent dans une architecture 3-tier, U n serveur supportant les Active Server Pages peut servir d'intermédiaire entre le navigateur du client et une base de données G râce à la technologie ADO ( ActiveX Data Objects ) on peut faire un accès transparent à la base de données, L a 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

La technologie ASP 08 octobre 2005 Saïd Radhouani - CUI 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 08 octobre 2005 Saïd Radhouani - CUI

ASP – Principe de fonctionnement Lorsqu'un navigateur (le client) désire accéder à une page dynamique réalisé avec la technologie ASP: L e serveur reconnaît qu'il s'agit d'un fichier ASP grâce à son extension I l 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

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

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

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

Insertion de script ASP propose une façon simplifiée de définir un bloc de script : <% code du script %> N e définit pas le type de langage à utiliser lors de l 'interprétation A fin de définir le langage de script de la page , i l est nécessaire d' utiliser la commande <%@ LANGUAGE %> en début d u 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

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

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

Exemple de script <% If Time > = #12:00:00 AM# And Time < #12:00:00 PM# Then greeting = " Bonjour ! " Else greeting = " Hello ! " End If %> <%= greeting %> U n 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

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 %> 08 octobre 2005 Saïd Radhouani - CUI

Exemple de script Date courante : <%=date%> Date et heure co urantes : <%=now%> Heure courante : <%=time%> 08 octobre 2005 Saïd Radhouani - CUI

PHP 08 octobre 2005 Saïd Radhouani - CUI Serveur web (Apache) Navigateur web (Mozilla) HTTP Internet

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

Premier exemple Le fichier essai.php contient : Le navigateur recevra la page HTML : 08 octobre 2005 Saïd Radhouani - CUI <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 ?> Instructions ex: echo "du texte" ;

Variables Les variables commencent toutes par un $ 08 octobre 2005 Saïd Radhouani - CUI <html> <body> <?php // mettons 10 dans $variable $variable = 10; // affichons $variable echo $variable ; echo ""; echo "10" + '5.2'; ?> </body> </html> <html> <body> 1015.2 </body> </html>

Boucles Comme dans tous les autres langages 08 octobre 2005 Saïd Radhouani - CUI <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 1 Number 2 Number 3 Fichier .php présent sur le serveur Fichier tel qu’il est Reçu par le navigateur Rendu

Principes de base Pour afficher la date et l’heure : 08 octobre 2005 Saïd Radhouani - CUI <html> <body> <?php echo 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/2005 21:03:42 Fichier .php présent sur le serveur Fichier tel qu’il est Reçu par le navigateur Rendu

Deuxième exemple 08 octobre 2005 Saïd Radhouani - CUI <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 les vacances dans 2 mois ! </body> </html> C'est les vacances dans 2 mois ! Fichier .php présent sur le serveur Fichier tel qu’il est Reçu par le navigateur 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 08 octobre 2005 Saïd Radhouani - CUI

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 E st prévu pour être visualisé sur un écran d’ordinateur (difficile pour les ordinateurs de poche ou les téléphones portables) M anque 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

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 08 octobre 2005 Saïd Radhouani - CUI HTML Saïd Radhouani Assistant/doctorant Radhouani@cui.unige.ch exemple XML <prenom>Saïd</prenom> <nom>Radhouani</nom> <Fonction> Assistant/doctorant </Fonction> <email>Radhouani@cui.unige.ch </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 08 octobre 2005 Saïd Radhouani - CUI

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

Principe des feuilles de style 08 octobre 2005 Saïd Radhouani - CUI 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. U n 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

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

Objectifs et avantages du XML A fficher un même document sur des périphériques différents sans créer de s versions du document à priori (grâce à la séparation du contenu du contenant) P ermet 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 E change de données entre programmes (même sur Internet) 08 octobre 2005 Saïd Radhouani - CUI

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: 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. Apprendre ASP, PHP, XML, etc. Autre solution! 08 octobre 2005 Saïd Radhouani - CUI

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

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

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 site création/modification de la hiérarchie des rubriques validation des articles Rédacteurs : rédaction des pages à l’intérieur du site utilisent la hiérarchie de rubriques mais ne peuvent pas la modifier 08 octobre 2005 Saïd Radhouani - CUI

Liens utilies www.commentacamarche.com http://www.w3.org/MarkUp/ http://www.asp.net www.php.net www.spip.net www.plone.org 08 octobre 2005 Saïd Radhouani - CUI

Publication de documents sur le Web

Contenu connexe

Tendances

En vedette

Similaire à Publication de documents sur le Web

Plus de Saïd Radhouani

Publication de documents sur le Web

Notes de l'éditeur