La Toile (Web) et les réseaux d’ordinateurs Introduction aux langages du Web Edoardo Berera Telelinea

E. BereraTelelinea2 Programme 1. Introduction aux langages de description des documents 2. Formulaires et leur traitement 3. Accès aux bases de données 4. Exemple

E. BereraTelelinea3 1. Introduction aux langages de description des documents  XML (Extensible Markup Language)  HTML (HyperText Markup Language)  Pages HTML statiques et dynamiques

E. BereraTelelinea4 XML eXtensible Markup Language –Définition –Objectifs –Origine –Exemples

E. BereraTelelinea5 Définition XML est un metalangage –Langage pour définir d’autres langages de description de documents ou de données –Chaque langage définit un jeu normalisé d’éléments ou “balises”, par ex. – –avec signification et règles d’utilisation standardisées, c-à-d une grammaire

E. BereraTelelinea6 Objectifs –Extensibilité pouvoir définir des nouveaux éléments –Structure pouvoir modéliser des données et des documents aussi complexes soient-ils –Validation pouvoir vérifier que les structures de données sont correctes –Indépendance des média pouvoir publier les contenus avec multiples formats (livres, CD- ROMs, pages Web) –Indépendance vis-à-vis des editeurs de logiciel pouvoir utiliser n’importe quel éditeur de documents

E. BereraTelelinea7 Origine SGML –Standard Generalized Markup Language DTD Document Type Definition –Standard ISO (International Standard Organization), Genève –Origine IBM –Séparation du contenu et de la forme d’un document Le même livre doit pouvoir être publié –en édition de luxe –en format de poche

E. BereraTelelinea8 Exemples SMIL –Synchronized Multimedia Integration Language document multimédia –graphique –photo –son –Lecteur RealPlayer layout Logo UNSA Photo Valrose Marseillaise

E. BereraTelelinea9 Fichier marseillaise.smimarseillaise.smi

E. BereraTelelinea10 XML et les bases de données Exemple de description de la table clients 20 Dupont Jean 21 Bianchi Bruno numeronomprenom 20DupontJean 21 BianchiBruno clients

E. BereraTelelinea11 HTML HyperText Markup Language –Définition –Origine –Objectifs –Exemples

E. BereraTelelinea12 Définition Langage de description de la mise en page de documents avec liens hypertextuels

E. BereraTelelinea13 Origine liens hypertextuels Apple HyperCard MS Windows Help

E. BereraTelelinea14 La Toile : World Wide Web –Extension au monde entier grâce à l’Internet Tim Berners-Lee et Robert Cailliau, CERN (Centre Européen de Recherche Nucléaire), Genève, ~1990

E. BereraTelelinea15 Objectifs Puissance –Recherche d’information facilitée par la navigation suivant les liens hypertextuels entre documents Simplicité –Dans sa forme plus simple, HTML peut être lu par l’homme et par la machine

E. BereraTelelinea16 Exemples Lien hypertextuel –Anchor Text ancre A: anchor, ancre HREF: hyper-reference URL: Universal Resource Locator –protocole de dialogue, nom du serveur, nom du fichier Texte ancre URL

E. BereraTelelinea17 Une page HTML complète HTML Fichier salut.htm Exemple Bienvenue Ciao BODY HEAD Ciao salut.htm salve.htm Bienvenue Exemple salve.htm

E. BereraTelelinea18 Titres, Heading –Heading Titolo

E. BereraTelelinea19 Listes –Ordered list Primo Secondo –Unordered list Elemento x Elemento y LI: List Item 1. Primo 2. Secondo Elemento x Elemento y

E. BereraTelelinea20 Tableaux –Table contenu 1e cellule contenu 2e cellule … BORDER=“5”: attribut bordure et valeur TR: Table Row TD: Table Data

E. BereraTelelinea21 Multimedia, Hypermedia Texte, photo, vidéo, audio Insertion images –Image Source GIF (256 couleurs,.gif) Graphics Interchange Format Standard pour les graphiques JPEG (milliers de couleurs,.jpg) Joint Photographic Experts Group Standard pour les photos Photo Film Audio

E. BereraTelelinea22 Images réactives image map

E. BereraTelelinea23 Frames –Frameset, Frame ROWS=“30%,*”: attribut cadre horizontaux et leur dimensions (30% de la hauteur de la fenêtre pour le premier cadre et ce qui reste (*) pour le dexième) NAME=“zone-inf”: attribut nom du cadre inférieur (le cadre supérieur n’a pas de nom dans cet exemple)

E. BereraTelelinea24 Pages HTML statiques et dynamiques

E. BereraTelelinea25 Protocole d’application HTTP HyperText Transfer Protocol –Protocole de dialogue qui permet a un navigateur de demander des pages à un serveur HTTP Programme client - Internet Explorer - Netscape Navigator Programme serveur - Apache - Internet Information Server

E. BereraTelelinea26 Web server Serveur Web URL: interpreter Pages statiques *.htm Pages dynamiques *.asp *.jsp *.php

E. BereraTelelinea27 Pages HTML dynamiques Pages actives côté serveur –Pages HTML contenant aussi des programmes –Langages de scripting ASP: Active Server Pages (famille Basic) JSP: Java Server Pages (famille Java) PHP: (famille C) –Interpreteur (ou moteur) Programme qui interprète et execute les instructions du langage de scripting

E. BereraTelelinea28 Serveurs Web & SGBDR WEB server SGBDR server HTML BD –Serveur Web–Systèmes de Gestion de Bases de Données Relationnelles

E. BereraTelelinea29 HTTP & ASP Requests WEB server SGBDR server ODBC ASP interpreter HTML ASP BD Request Reply HTTP Client Internet Server

E. BereraTelelinea30 Références Worldwide Web Consortium – XML HTML Microsoft Corporation – ASP

E. BereraTelelinea31 Références Jon Bosak, Sun Microsystems, “Media-independent publishing: four myths about XML”, IEEE Computer, Oct. 1998, pp Jon Bosak, “XML, Java, and the future of the Web”, white paper, Sun Microsystems, info/standards/xml/why/xmlapps.htm XML FAQ Charles Petrie, “The XML Files”, IEEE Internet Computing, May/Jun. 1998, pp. 4-5 Lisa Rein, “XML-enabled tools”, IEEE Internet Computing, May/Jun. 1998, pp “Interview: Dan Connolly on the architecture of the Web”, IEEE Internet Computing, Mar./Apr. 1998, pp Elisa Bertino, Barbara Catania, “Integrating XML and Databases”, IEEE Internet Computing, Jul./Aug. 2001, pp computer.org/internet/xml/