L'API DOM : Document Object Model

Dimension: px
Commencer à balayer dès la page:

Download "L'API DOM : Document Object Model"

Transcription

1 Ingénierie Documentaire L'API DOM : Document Object Model STÉPHANE CROZAT 16 octobre 2014

2 Table des matières I - Introduction au DOM 5 A. Principes du DOM...5 B. L'interface DOM...6 II - Implémentation JavaScript du DOM 9 A. Introduction à JavaScript...9 B. Fonctions et objets DOM en JavaScript...10 C. Spécificités HTML...11 III - Fonctions et objets JavaScript liés à XML 13 A. Utiliser XPath...13 B. Exécuter une XSLT...14 C. xmlhttprequest : Communication avec le serveur...14 D. XMLSerializer : Sérialiser un DOM...16 IV - Exercices 17 A. Travaux pratiques DOM et JavaScript "Hello World!" en JavaScript Manipulation du DOM en JavaScript Un éditeur XML en JavaScript...19 Solution des exercices 23 Bibliographie 27 Contenus annexes 29 3

3 Introduction au I - DOM I Principes du DOM 5 L'interface DOM 6 A. Principes du DOM Définition Le DOM ( Document Object Model) est un standard W3C qui décrit une API orientée objet permettant de représenter un document XML ou HTML en mémoire afin de la manipuler avec un langage de programmation. Le standard DOM est indépendant d'un langage de programmation en particulier, et implémenté dans de nombreux langages (JavaScript, Java, PHP, C,...). «The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.» 1 Fonctions du DOM L'API DOM permet de : Exemple Parcourir un arbre XML ou HTML Rechercher des nœuds particuliers, en consulter le contenu Créer, ajouter, supprimer, déplacer des nœuds dans l'arbre L'API DOM implémentée en JavaScript permet de manipuler un document HTML ou XHTML, afin d'en modifier dynamiquement (en fonction des actions utilisateurs), la structure et le contenu :... Faire apparaître ou disparaître des éléments div en fonction d'une action utilisateur Créer ou initialiser des contrôles de formulaire function fdisplay(pdivid) { 2 var vdiv = document.getelementbyid(pdivid); 5

4 Introduction au DOM Introduction au DOM 3 vdiv.style.display="block"; 4 } Rappel L'arbre du document XML - p.29 B. L'interface DOM Fondamental Document Object Model (DOM) Technical Reports 2 Document Object Model Core 3 Objets principaux Node : Élément central du DOM, il représente tout nœud de l'arbre DOM, les autres interfaces en héritent. NodeList : Ensemble ordonné de Nodes. Document : Racine d'un fichier XML bien formé (ou d'un fichier HTML valide), son fils est donc l'élément racine du document XML. Element : Représentation d'un élément au sens XML Attr : Représentation d'un attribut au sens XML Text : Contenu textuel d'un nœud texte ou d'un attribut au sens XML Attributs principaux de Node string nodename integer nodetype Node parentnode NodeList childnodes Node firstchild Attributs principaux de NodeList Node item(integer index) integer length Fonctions principales de Node Node insertbefore(node newchild, Node refchild) Node replacechild(node newchild, Node oldchild)

5 Introduction au DOM Node removechild(node oldchild) Node appendchild(node newchild) boolean haschildnodes() Node clonenode(boolean deep) Fonctions principales de Document Element getelementbyid(string elementid) NodeList getelementsbytagname(string tagname) Element createelement(string tagname) Text createtextnode(string data) Attr createattribute(string name) Document 7 Fonctions principales de Element NodeList getelementsbytagname(string name) Attr getattributenode(string name) Attr setattributenode(attr newattr) Attr removeattributenode(attr oldattr) boolean hasattribute(string name) Text (attributs et fonctions) Attributs : string data integer length Fonctions : void appenddata(string arg) void insertdata(integer offset, string arg) void deletedata(integer offset, integer count) void replacedata(integer offset, integer count, string arg) Attr (attributs) string name string value

6 Introduction au DOM Introduction au DOM Remarque : NameSpace Il existe toutes les fonctions nécessaires pour gérer les namespaces, comme par exemple : NodeList getelementsbytagnamens(string namespaceuri, string localname) Element createelementns(string namespaceuri, string qualifiedname) Attr createattributens(string namespaceuri, string qualifiedname) Complément (Brillant07 [Brillant07], pp ) 8 8

7 Implémentation II - JavaScript du DOM II Introduction à JavaScript 11 Fonctions et objets DOM en JavaScript 13 Spécificités HTML 14 A. Introduction à JavaScript 9

8 Implémentation JavaScript du DOM Implémentation JavaScript du DOM Définition : JavaScript JavaScript est un langage de programmation instance du standard ECMAScript, principalement utilisé comme langage client dans les navigateurs Web, afin de rendre dynamique l'affichage et la manipulation de pages HTML. Rappel : Intégration JavaScript HTML 1 //file.js 2 function func(parg1, parg2) { } 1 <html> 2 <head> <script src="file.js" type="text/javascript"></script> </head> 7 <body> <div... onclick="func(varg1, varg2)"> </body> 12 </html> Rappel : Introduction au JavaScript 11 Rappel : Syntaxe JavaScript 12 Complément : Fonctions JavaScript 13 Complément : Objets JavaScript 14 Rappel : Console JavaScript Pour afficher la console JavaScript sous Firefox : CTRL+MAJ+J B. Fonctions et objets DOM en JavaScript Exemple 1 vdiv = document.getelementbyid("id1");

9 Implémentation JavaScript du DOM Exemple 1 vdivs = document.getelementsbytagname("p"); 2 for (var i=0; i<vdivs.length; i++) { 3 vdivs.item(i)...; 4 } Exemple 1 alert(vdiv.firstchild.data) ; Exemple 1 vdiv.removechild(vdiv.firstchild); Exemple 1 vdiv.appendchild(vdiv2); Syntaxe Document 15 Node 16 getelementbyid 17 getelementbytagname g_name 18 firstchild 19 data 20 C. Spécificités HTML Attributs et méthodes spécifiques aux éléments HTML input, select : value, name,... a : href

10 Implémentation JavaScript du DOM Implémentation JavaScript du DOM queryselectorall : Manipulation HTML via les classes CSS queryselectorall est une méthode de l'objet document permettant de renvoyer une liste de nœuds correspondant à l'union des sélecteurs CSS passés en paramètre. NodeList document.queryselectorall(<list_of_selectors>) https://developer.mozilla.org/en/dom/document.queryselectorall 22 Exemple : queryselectorall <body> 3 <div class="class1">...</div> 4 <div class="class2">...</div> 5 <div class="class1 class2">...</div> 6 <div class="class2 class3">...</div> 7... document.queryselectorall("div.class1, div.class2") renvoie tous les div de l'extrait HTML ci-avant. Conseil : Firebug Installer l'extension Firebug sous Firefox pour pouvoir visualiser dynamiquement le DOM. https://addons.mozilla.org/fr/firefox/addon/firebug/ https://developer.mozilla.org/en/dom/document.queryselectorall 23 - https://addons.mozilla.org/fr/firefox/addon/firebug/ 12 12

11 Fonctions et III - objets JavaScript liés à XML III Utiliser XPath 15 Exécuter une XSLT 15 xmlhttprequest : Communication avec le serveur 16 XMLSerializer : Sérialiser un DOM 17 A. Utiliser XPath L'API XPath est moins pratique que l'api DOM en JavaScript, et en conséquence moins utilisée. Il est néanmoins possible d'exécuter un XPath en fonction d'un nœud courant, les deux étant passés en paramètres à la méthode evaluate() de document. 13

12 Fonctions et objets JavaScript liés à XML Fonctions et objets JavaScript liés à XML Exemple 1 var nodessnapshot = document.evaluate(<pxpath>, <pcontextnode>, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); 2 for ( var i=0 ; i < nodessnapshot.snapshotlength; i++ ) 3 { 4...nodesSnapshot.snapshotItem(i)... 5 } Complément https://developer.mozilla.org/fr/introduction_%c3%a0_l %27utilisation_de_XPath_avec_JavaScript 24 B. Exécuter une XSLT Syntaxe Objet : XSLTProcessor Méthodes : importstylesheet(vxsl) DocumentFragment transformtofragment(vxml,document) Document transformtodocument(vxml) Syntaxe 1 // Chargement d'une XSLT depuis le serveur 2 var vxhr = new XMLHttpRequest(); 3 vxhr.open("get", "fichier.xslt", false); 4 vxhr.send(null); 5 var vxsl = vxhr.responsexml; 6 7 // Initialisation d'un processeur XSLT 8 var vproc = new XSLTProcessor(); 9 vproc.importstylesheet(vxsl); // Sélection d'un nœud XML source de la transformation dans le Document 12 var vxml = document.getelementbyid("source"); // Exécution de la XSLT dans un DocumentFragment vresult 15 var vresult = vproc.transformtofragment(vxml,document); // Ajout de vresult dans le Document 18 document.getelementbyid("source").appendchild(vresult); C. xmlhttprequest : Communication avec le serveur L'objet XMLHttpRequest permet d'envoyer des commandes POST et GET à un serveur HTTP, en particulier (mais pas uniquement) pour transmettre des documents XML entre le client et le serveur https://developer.mozilla.org/fr/introduction_%c3%a0_l%27utilisation_de_xpath_avec_javascript 14 14

13 Fonctions et objets JavaScript liés à XML Exemple : Exécuter un fichier PHP avec des paramètres 1 var vxhr = new XMLHttpRequest(); 2 vxhr.open("post", "fichier.php", false); 3 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 4 var vargs="key1=" + encodeuricomponent(vvalue1) + "&key2=" + encodeuricomponent(vvalue2); 5 vxhr.send(vargs); 1 <?php 2 $vparam1=$_post['key1']; 3 $pparam2=$_post['key2']; ?> Exemple : Charger un document XML sur le client 1 var vxhr = new XMLHttpRequest(); 2 vxhr.open("get", "fichier.xml", false); 3 vxhr.send(null); 4 vxml vxhr.responsexml; Exemple : Enregistrer un document XML sur le serveur (via PHP) 1 var vxml = document.getelement... //un node DOM 2 var vtxt = (new XMLSerializer()).serializeToString(vXml); 3 var vargs = "xml=" + encodeuricomponent(vtxt); 4 var vxhr = new XMLHttpRequest(); 5 vxhr.open("post", "savexml.php", false); 6 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 7 vxhr.send(vargs); 1 <?php 2 $xml= $_POST["xml"]; 3 $dom = new DomDocument(); 4 $dom->loadxml($xml); 5 $dom->save('src.xml'); 6?> Syntaxe 1 eval(vxhr.responsetext); Permet au client d exécuter une instruction JavaScript qui aura été générée par le serveur PHP (par exemple un compte-rendu d'exécution). Complément

14 Fonctions et objets JavaScript liés à XML Fonctions et objets JavaScript liés à XML D. XMLSerializer : Sérialiser un DOM 1 var xmlstring = new XMLSerializer().serializeToString(Node); 16 16

15 IV - Exercices IV Travaux pratiques DOM et JavaScript 19 A. Travaux pratiques DOM et JavaScript 1. "Hello World!" en JavaScript Q u e s t i o n 1 [Solution n 1 p 23] Créer un fichier HTML contenant un bouton. Ajouter la fonction JavaScript qui permet d'afficher "Hello World!" lorsque l'on clique sur le bouton. Q u e s t i o n 2 [Solution n 2 p 23] Ajouter un champ de saisie texte au fichier HTML. Ajouter la fonction JavaScript qui permet d'afficher le contenu de ce champ de saisie lorsque l'on clique sur le bouton. 2. Manipulation du DOM en JavaScript Soit le fichier HTML : 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>mon titre</title> 5 <script type="text/javascript" src="lib.js"></script> 6 </head> 7 <body> 8 <h1 onclick="showhxcontent(1)">partie 1</h1> 9 <div id="title1" style="display:none"> 10 <p>mon premier paragraphe</p> 11 <p>mon second paragraphe</p> 12 </div> 13 <h1 onclick="showhxcontent(2)">partie 2</h1> 14 <div id="title2" style="display:none"> 15 <p>mon premier paragraphe</p> 16 <p>mon second paragraphe</p> 17 </div> 18 <p> 19 <input type="submit" value="masquer" onclick="hidealldivs()"/> 20 </p> 21 <p> 22 Titre n : <input type="text" id="title"/> 17

16 Exercices Exercices 23 <input type="submit" value="afficher" onclick="alerttitle()"/> 24 </p> 25 </body> 26 </html> Q u e s t i o n 1 [Solution n 3 p 24] Écrire la fonction JavaScript showhxcontent permettant d'afficher le contenu du div correspondant au titre sur lequel on clique. Indice : 1 function showhxcontent (pnumber) { 2 vdiv = document.getelementbyid(...); 3 vdiv.style.display = "..."; 4 } Q u e s t i o n 2 [Solution n 4 p 24] Écrire la fonction JavaScript hidealldivs permettant de masquer le contenu de tous les div du document. Indice : 1 function hidealldivs () { 2 vdivs = document.getelementsbytagname(...); 3 for (var i=0; i<vdivs...; i++) { 4 vdivs.item(i)...; 5 } 6 } Q u e s t i o n 3 [Solution n 5 p 24] Écrire la fonction alerttitle permettant d'afficher (avec la fonction JavaScript alert) le contenu du énième titre, défini par le champ de saisie title. Indice : 1 function alerttitle () { 2 vhx = document.getelementsbytagname(...); 3 vindice = document.getelementbyid(...).value; 4 vindice = vindice - 1; 5 alert(...); 6 } Q u e s t i o n 4 [Solution n 6 p 24] Écrire la fonction deletetitle permettant d'effacer le contenu du titre défini par le champ title. (suppression du nœud fils de type texte) Indice : 1 function deletetitle () { vhx.item(vindice).removechild(...); 4 } 18 18

17 Exercices Q u e s t i o n 5 [Solution n 7 p 24] Écrire la fonction definetitle permettant d'affecter le contenu du titre défini par le champ title avec la valeur "Nouveau titre". On testera que le titre a ou non déjà une valeur (nœud texte) avant l'ajout, afin de la supprimer si besoin. Indice : 1 function definetitle () { vtext = document.createtextnode(...); 4 if (vhx.item(vindice)...) { } 7 vhx.item(vindice).appendchild(...); 8 } 3. Un éditeur XML en JavaScript L'objectif de ce TP est de réaliser un éditeur XML avec HTML et JavaScript. Soit le fichier XHTML "editor.html" ci-après. 1 <html> 2 <!--editor.html--> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>éditeur de document</title> 6 <script type="text/javascript" src="lib.js"></script> 7 </head> 8 <body id="body"> 9 <h1>édition</h1> 10 <form> 11 <p>ajouter un paragraphe</p> 12 <input type="text" size="50" id="text"/> 13 <input type="button" onclick="addpara(document.getelementbyid('text').value);" value="ajouter"/> 14 <br/> 15 <input type="button" onclick="alertxml(document);" value="afficher DOM"/> 16 <br/> 17 <input type="button" onclick="savexml();" value="sérialiser XML"/> 18 </form> 19 <hr> 20 <div id="visu"> 21 <h1>visualisation</h1> 22 <script type="text/javascript"> 23 //ouvre le fichier XML sur le serveur 24 var xml = loadxml("src.xml"); 25 //ouvre le fichier XSLT sur le serveur 26 var xsl = loadxml("xml2html.xsl"); 27 //exécute le XSLT sur le XML 28 res=execxslt(xml,xsl); 29 //afficher le résultat 30 document.getelementbyid("visu").appendchild(res); 31 </script> 32 </div> 33 </body> 34 </html> 19

18 Exercices Exercices Q u e s t i o n 1 Expliquer le fonctionnement de "editor.html". [Solution n 8 p 24] Q u e s t i o n 2 Créer un fichier XML avec un élément racine document contenant des éléments paragraphe. Le placer sur un serveur Web et le rendre accessible en lecture/écriture. Indice : 1 <?xml version="1.0" encoding="utf-8"?> 2 <document> 3 <paragraphe>lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit ametlibero ac mauris egestas venenatis nec vitae sapien. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Ut commodo, neque at auctortincidunt, turpis quam molestie augue, sit amet mattis nibh neque eget felis.</paragraphe> 4 <paragraphe>donec a lectus sed augue pellentesque accumsan eu ac justo. Etiam est urna, sagittisac cursus nec, placerat quis velit.</paragraphe> 5 </document> Q u e s t i o n 3 [Solution n 9 p 25] Écrire les XSLT xml2html.xsl et html2xml.xsl, puis les déposer sur le serveur à côté du fichier XML. Q u e s t i o n 4 [Solution n 10 p 25] Écrire les fonctions loadxml et alertxml (la seconde permettant de tester la première). Indice : Pour loadxml utiliser XMLHttpRequest : xmlhttprequest : Communication avec le serveur Pour alertxml utiliser XMLSerializer : XMLSerializer : Sérialiser un DOM Q u e s t i o n 5 Écrire la fonction execxslt. [Solution n 11 p 26] Indice : Exécuter une XSLT Q u e s t i o n 6 Écrire la fonction addpara. [Solution n 12 p 26] Q u e s t i o n 7 Écrire la fonction savexml permettant d'exécuter le fichier PHP ci-après. [Solution n 13 p 26] 1 <?php 2 //savexml.php 20 20

19 Exercices 3 $xml= $_POST["xml"]; 4 $dom = new DomDocument(); 5 $dom->loadxml($xml); 6 $dom->save('src.xml'); 7?> 21

20 Solution des exercices > Solution n 1 (exercice p. 17) hw.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>hello World!</title> 5 <script type="text/javascript" src="hw.js"></script> 6 </head> 7 <body> 8 <input type="button" onclick="hw()" value="clic me!"/> 9 </body> 10 </html> hw.js 1 function hw () { 2 alert("hello World") 3 } > Solution n 2 (exercice p. 17) hw.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>hello World!</title> 5 <script type="text/javascript" src="hw.js"></script> 6 </head> 7 <body> 8 <input type="text" id="text"/> 9 <input type="button" onclick="hw2()" value="clic me!"/> 10 </body> 11 </html> hw.js 1 function hw2() { 2 alert (document.getelementbyid('text').value) 3 } 23

21 Solution des exercices Solution des exercices > Solution n 3 (exercice p. 18) 1 function showhxcontent (pnumber) { 2 vdiv = document.getelementbyid("title" + pnumber); 3 vdiv.style.display = "block"; 4 } > Solution n 4 (exercice p. 18) 1 function hidealldivs () { 2 vdivs = document.getelementsbytagname("div"); 3 for (var i=0; i<vdivs.length; i++) { 4 vdivs.item(i).style.display="none"; 5 } 6 } > Solution n 5 (exercice p. 18) 1 function alerttitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 alert(vhx.item(vindice).firstchild.data); 6 } > Solution n 6 (exercice p. 18) 1 function deletetitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 vhx.item(vindice).removechild(vhx.item(vindice).firstchild); 6 } > Solution n 7 (exercice p. 19) 1 function definetitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 vtext = document.createtextnode("nouveau titre"); 6 if (vhx.item(vindice).haschildnodes()) { 7 vhx.item(vindice).removechild(vhx.item(vindice).firstchild); 8 } 9 vhx.item(vindice).appendchild(vtext); 10 } > Solution n 8 (exercice p. 20) 1. Après avoir affiché les éléments statiques, le script charge un fichier XML situé sur le serveur (src.xml). 2. Il lui applique une XSLT située sur le serveur pour le transformer en HTML 24 24

22 Solution des exercices (xml2html.xsl). 3. Il affiche le résultat dans un div de la page (<div id="visu">). 4. Le formulaire propose de : a. modifier le DOM du HTML en JavaScript (function addpara()) ; b. afficher le code HTML correspondant au DOM courant (function alertxml(document)) ; c. sérialiser le DOM sur le serveur, à la place du fichier XML source (function savexml ()) : i. en appliquant une XSLT inverse de la première (html2xml.xsl), ii. puis en postant le flux XML obtenu à une page PHP (savexml.php), iii. qui écrase le fichier src.xml avec la nouvelle sérialisation du DOM. > Solution n 9 (exercice p. 20) html2xml.xsl 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> 3 <xsl:output method="xml"/> 4 <xsl:template match="div"> 5 <document> 6 <xsl:apply-templates select="p"/> 7 </document> 8 </xsl:template> 9 <xsl:template match="p"> 10 <paragraphe><xsl:value-of select="."/></paragraphe> 11 </xsl:template> 12 </xsl:stylesheet> xml2html.xsl 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> 3 <xsl:output method="html"/> 4 <xsl:template match="document"> 5 <div id="srcxml"> 6 <xsl:apply-templates select="paragraphe"/> 7 </div> 8 </xsl:template> 9 <xsl:template match="paragraphe"> 10 <p><xsl:value-of select="."/></p> 11 </xsl:template> 12 </xsl:stylesheet> > Solution n 10 (exercice p. 20) 1 function loadxml (ppath){ 2 var vxhr = new XMLHttpRequest(); 3 vxhr.open("get", ppath, false); 4 vxhr.send(null); 5 return rxml = vxhr.responsexml; 6 } 7 function alertxml (pdom) { 8 var xmlstring = new XMLSerializer().serializeToString(pDom); 9 alert(xmlstring); 10 } 25

23 Solution des exercices Solution des exercices > Solution n 11 (exercice p. 20) 1 function execxslt (pxml, pxsl) { 2 var proc = new XSLTProcessor(); 3 proc.importstylesheet(pxsl); 4 return proc.transformtofragment(pxml,document); 5 } > Solution n 12 (exercice p. 20) 1 function addpara (ptext) { 2 vnewp = document.createelement("p"); 3 vnewp.appendchild(document.createtextnode(ptext)); 4 document.getelementbyid("srcxml").appendchild(vnewp); 5 } > Solution n 13 (exercice p. 20) 1 function savexml () { 2 var xsl = loadxml("html2xml.xsl"); 3 var xml = document.getelementbyid("srcxml"); 4 var proc = new XSLTProcessor(); 5 proc.importstylesheet(xsl); 6 var res = proc.transformtodocument(xml); 7 var restxt = (new XMLSerializer()).serializeToString(res); 8 var data = "xml=" + encodeuricomponent(restxt); 9 var vxhr = new XMLHttpRequest(); 10 vxhr.open("post", "savexml.php", false); 11 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 12 vxhr.send(data); 13 } 26 26

24 Bibliographie [Brillant07] ALEXANDRE BRILLANT, XML : Cours et exercices, Eyrolles, 2007 [ISBN ] 27

25 Contenus annexes - L'arbre du document XML Il est possible de représenter un document XML sous forme d'arbre, tel que : L'arbre possède une racine / qui a comme fils l'élément racine l'élément racine est l'élément du document XML qui contient tous les autres chaque nœud a comme fils les éléments et le texte qu'il contient, ainsi que ses attributs. Exemple : Fichier XML 1 <?xml version="1.0" encoding="utf-8"?> 2 <document modele="ulcoursgeneral" code="bp-incendie3_s1_e2_ul1"> 3 <entete> 4 <identification> 5 <titre>l'assurance de la responsabilité de voisinage</titre> 6 <date>21/02/01</date> 7 <auteur>aea</auteur> 8 <version>1.00</version> 9 </identification> 10 </entete> 11 <corps> 12 <contenu> 13 <paragraphe>cette garantie est appelée : recours des voisins et des tiers.</paragraphe> 14 <remarque> 15 <paragraphe>l'image suivante <ressource URIsrc="img07.jpg" titre="recours des voisins et des tiers" type="image"/> montre la garantie.</paragraphe> 16 </remarque> 17 </contenu> 18 </corps> 19 </document> Exemple : Arbre XML 1 / 2 document = "ULCoursGeneral" = "BP-Incendie3_S1_E2_UL1" 5 entete 6 identification 7 titre 8 text() = "L'assurance de..." 9 date 10 text() = "21/02/01" 11 auteur 12 text() = "AEA" 29

26 Contenus annexes Contenus annexes 13 version 14 text() = "1.00" 15 corps 16 contenu 17 paragraphe 18 text() = "Cette garantie..." 19 remarque 20 paragraphe 21 text() = "L'image suivante" 22 ressource = "img07.jpg" = "Recours des voisins..." = "image" 26 text() = "montre la garantie." Remarque : Ordre des nœuds L'ensemble des nœuds de l'arbre d'un document est muni d'un ordre, qui est celui de l'ordre dans le document XML sérialisé

PHP. Manipulation de XML avec DOM. A. Belaïd

PHP. Manipulation de XML avec DOM. A. Belaïd PHP Manipulation de XML avec DOM 1 DOM Introduction DOM est une API standard : Les méthodes et procédures de manipulation DOM sont exactement les mêmes dans tous les langages Vous pouvez passer d un langage

Plus en détail

DOM - Document Object Model

DOM - Document Object Model DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et

Plus en détail

Document Object Model (DOM)

Document Object Model (DOM) Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2.

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2. JavaScript pour le Web 2.0 Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto Thierry Templier Arnaud Gougeon 4 Programmation DOM Avant la standardisation du DOM, chaque navigateur

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Langage HTML (2 partie) lt La Salle Avignon BTS IRIS

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

ANNEXE 2a : plus loin avec CSS, notion de boite

ANNEXE 2a : plus loin avec CSS, notion de boite ANNEXE 2a : plus loin avec CSS, notion de boite Tout contenu d'une balise HTML se représente à l'écran sous forme d'une boite. Cette boite est composée de 3 éléments : un conteneur, une marge intérieure

Plus en détail

XML : l ASCII de demain

XML : l ASCII de demain Carrefour de l information XML : l ASCII de demain Philippe Mabilleau ing. 3 octobre 2002 Le langage XML Historique : De l ASCII à XML XML : Le langage XML : La programmation XML : Les transformations

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

XML : outils et documents. Deuxième cours : XHTML, XPATH, XSLT,...

XML : outils et documents. Deuxième cours : XHTML, XPATH, XSLT,... XML : outils et documents Deuxième cours : XHTML, XPATH, XSLT,... 1 Plan de ce cours Rappels/approfondissement du cours précédent Un exemple de technologie : XHTML Document XML et arbre XPath Introduction

Plus en détail

Master d Informatique Corrigé du partiel novembre 2010

Master d Informatique Corrigé du partiel novembre 2010 Universités d Aix-Marseille I & II Technologies XML Master d Informatique Corrigé du partiel novembre 2010 Année 2010-11 Documents autorisés Exercice 1 : Documents XML et Applications XML (4 points) Georges,

Plus en détail

ISN : B6-Langages du Web

ISN : B6-Langages du Web ISN : B6-Langages du Web Les langages du Web Michel Van Caneghem Mai 2012 Les langages du Web Langages de description : Présentation du langage HTML et du principe de séparation du contenu et de la mise

Plus en détail

BRUSSELS SCHOOL. Journalism & Communication CHARTE GRAPHIQUE

BRUSSELS SCHOOL. Journalism & Communication CHARTE GRAPHIQUE CHARTE GRAPHIQUE VERSION STANDARD Pôle d activité Avenir Roman IHECS élément vectoriel Baseline Avenir Roman Veillez à utiliser le bon mode colorimétrique selon le support choisi. CMJN, pour l impression

Plus en détail

PROGRAMMATION WEB AVANCEE

PROGRAMMATION WEB AVANCEE Master Info PROGRAMMATION WEB AVANCEE Plis fòs ba pengwen là! Présentation de l'ec Module Complet : 12h C / 12h TD / 12h TP => 12 / 0 /24 Cette partie : 6h C / 0h TD / 12h TP Objectif du cours : Conception

Plus en détail

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/

Plus en détail

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau.

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau. Introduction à Javascript IUT de Fontainebleau 17 décembre 2014 1 Introduction 2 3 Sommaire Introduction 1 Introduction 2 3 Une application Web est une applications clients/serveur(s) On peut la voir en

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS

Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS QUI EST MAXIWEB? Maxiweb est une agence digitale pas comme les autres. Un seul objectif : faire de vous le ROI Pôle Consulting Pôle

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation Introduction JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

Plus en détail

Avantages et méthode de la bonne gouvernance d'entreprise - le cas pratique des PSF

Avantages et méthode de la bonne gouvernance d'entreprise - le cas pratique des PSF Avantages et méthode de la bonne gouvernance d'entreprise - le cas pratique des PSF Agenda Notre objectif Avantages et méthode de la bonne gouvernance d'entreprise - le cas pratique des PSF Vu par Vectis

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

DataSet et XML DataSet... 380 XML... 386 Check-list... 399

DataSet et XML DataSet... 380 XML... 386 Check-list... 399 Chapitre 10 DataSet et XML DataSet... 380 XML... 386 Check-list... 399 10 DataSet et XML Ce chapitre présente d autres mécanismes pour manipuler des données structurées et hiérarchiques. DataSet, par exemple,

Plus en détail

Bases de Données Avancées

Bases de Données Avancées Bases de Données Avancées Enseignant / chargé de TD : Dario COLAZZO www.lri.fr/~colazzo Chargée de TP : Jesús CAMACHO-RODRIGUEZ www.lri.fr/~camacho Plan Tuning d index Concurrence Reprise sur panne Données

Plus en détail

TECHNOLOGIES XML, CONCEPTION, MISE EN OEUVRE

TECHNOLOGIES XML, CONCEPTION, MISE EN OEUVRE XML/ SOA/ Web services TECHNOLOGIES XML, CONCEPTION, MISE EN OEUVRE Réf: PXM Durée : 4 jours (7 heures) OBJECTIFS DE LA FORMATION XML est devenu une technologie incontournable tant sur le poste utilisateur

Plus en détail

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

Plus en détail

XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)

XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition) Présentation du langage XML 1. De SGML à XML 17 2. Les bases de XML 18 2.1 Rappel sur HTML 18 2.2 Votre premier document XML 19 2.3 Les avantages de XML 21 3. La syntaxe XML 21 3.1 La première ligne du

Plus en détail

TP n 2 Concepts de la programmation Objets Master 1 mention IL, semestre 2 Le type Abstrait Pile

TP n 2 Concepts de la programmation Objets Master 1 mention IL, semestre 2 Le type Abstrait Pile TP n 2 Concepts de la programmation Objets Master 1 mention IL, semestre 2 Le type Abstrait Pile Dans ce TP, vous apprendrez à définir le type abstrait Pile, à le programmer en Java à l aide d une interface

Plus en détail

BOUSSOLE21. Manuel d installation

BOUSSOLE21. Manuel d installation Département des infrastructures et des ressources humaines (DIRH) Unité de développement durable Place de la Riponne 10 1014 Lausanne BOUSSOLE21 Manuel d installation Version 4 juin 2013. Texte original:

Plus en détail

Pour développer du PHP, nous avons besoin de 3 outils : PHP, MySQL et APACHE

Pour développer du PHP, nous avons besoin de 3 outils : PHP, MySQL et APACHE PHP et éléphant, pourquoi? Tout le monde aime ce gentil animal Il rend bien des services à l'homme Il est puissant et en même temps docile Il est rapide quand il attaque (les bases de données) Les lettres

Plus en détail

420-PK9-SL Programmation WEB JavaScript DOM

420-PK9-SL Programmation WEB JavaScript DOM 420-PK9-SL Programmation WEB JavaScript DOM Introduction Le lien entre JavaScript et le HTML/CSS est une hiérarchie d instances d objets appelé DOM (Document Object Model). À chaque balise HTML correspond

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

Plus en détail

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

Plus en détail

Formation ESUP Portail Cours 4

Formation ESUP Portail Cours 4 Formation ESUP Portail Cours 4 http://www.esup-portail.org 1 Plan Prérequis Outils Normes Esup portail Canal uportal Publication d'un canal Web services 2 Prérequis Java Ant XML XSL/XSLT 3 Outils http://www.esup-portail.org/consortium/espace/normes_1c/tech/build/index.

Plus en détail

Le Langage XML: Fondations pour les Plateformes elearning. Le Langage XML (ou Technologies XML)

Le Langage XML: Fondations pour les Plateformes elearning. Le Langage XML (ou Technologies XML) Le Langage XML: Fondations pour les Plateformes elearning XML et les Technologies Associées Najib Tounsi Ecole Mohammadia d'ingénieurs Bureau W3C Maroc, Rabat 28 Nov. 2005 Deuxième Workshop annuel de l'ircam

Plus en détail

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale PHP Modèle-Vue-Contrôleur Introduction Modèle-Vue-Contrôleur Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Le Modèle-Vue-Contrôleur (MVC) est un méthode de conception utilisée

Plus en détail

Programmation des Applications Réparties. Parsers XML DOM et SAX

Programmation des Applications Réparties. Parsers XML DOM et SAX Programmation des Applications Réparties Parsers XML DOM et SAX Luiz Angelo Steffenel luiz-angelo.steffenel@univ-reims.fr Steffenel Programmation des Applications Réparties Master M1-2007-2008 1 Comment

Plus en détail

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

INTRODUCTION A JAVA. Fichier en langage machine Exécutable INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

Outils logiciels pour l'ingénierie documentaire

Outils logiciels pour l'ingénierie documentaire Ingénierie Documentaire Outils logiciels pour l'ingénierie documentaire http://doc.crzt.fr STÉPHANE CROZAT 16 octobre 2014 Table des matières I - L'IDE XML Oxygen 5 A. Fichiers XML...5 B. Schémas XML...6

Plus en détail

Production de documents avec XSLT. Production de documents p.1/??

Production de documents avec XSLT. Production de documents p.1/?? Production de documents avec XSLT Production de documents p.1/?? Sommaire La balise xsl:output comment choisir le format de sortie Création de nœuds dans un document créer des éléments et attributs Création

Plus en détail

Module BD et sites WEB

Module BD et sites WEB Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD

Plus en détail

4. SERVICES WEB REST 46

4. SERVICES WEB REST 46 4. SERVICES WEB REST 46 REST REST acronyme de REpresentational State Transfert Concept introduit en 2000 dans la thèse de Roy FIELDING Est un style d architecture inspiré de l architecture WEB En 2010,

Plus en détail

Rédiger votre mémoire avec Word 2013

Rédiger votre mémoire avec Word 2013 L OBJECTIF de ce document est de vous aider à utiliser efficacement les outils bureautiques pour la rédaction de votre mémoire et, à plus long terme dans la rédaction de tout document écrit. Il s agit

Plus en détail

GWT Développement d'applications clientes en Java. Introduction prise en main

GWT Développement d'applications clientes en Java. Introduction prise en main GWT Développement d'applications clientes en Java Introduction prise en main 1 Pourquoi GWT? GWT est un framework, conçu par Google, pour programmer des applications web en Java ; Il permet de programmer

Plus en détail

Méta-connaissances pour générer des programmes sur le Web

Méta-connaissances pour générer des programmes sur le Web Méta-connaissances pour générer des programmes sur le Web Basile STARYNKEVITCH http://starynkevitch.net/basile/ basile@starynkevitch.net (à titre privé, sans rapport avec mon employeur CEA-LIST) Séminaire

Plus en détail

Séance d ED n 5 : HTML et JavaScript

Séance d ED n 5 : HTML et JavaScript Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)

Plus en détail

Initiation à la réalisation de site Web pour mobiles

Initiation à la réalisation de site Web pour mobiles TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de

Plus en détail

Développement Web Introduction générale

Développement Web Introduction générale 1 / 58 Développement Web Introduction générale Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer Juillet 2008 2 / 58 Plan Plan 1 Introduction 2 Historique et

Plus en détail

Initiation à JAVASCRIPT Animation et inter activité de pages Web

Initiation à JAVASCRIPT Animation et inter activité de pages Web Initiation à JAVASCRIPT Animation et inter activité de pages Web v1.0 hubert.borderiou@ujf-grenoble.fr Présentation de chacun. Connaissez-vous HTML ou XHTML? Connaissez-vous un langage de programmation?

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

Plus en détail

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Démonstration de la mise en cache via HTML 5 sur iphone

Démonstration de la mise en cache via HTML 5 sur iphone Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent

Plus en détail

Programmation orientée objet et interfaces web en PHP

Programmation orientée objet et interfaces web en PHP Programmation orientée objet et interfaces web en PHP La programmation objet avec PHP5 Bases de données et interfaces web Fonctionnement des sessions Nicolas Moyroud Cemagref - UMR TETIS 26 Juin 2008 Programmation

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

Le Portfolio d une... Marion Bossaton. #Curieuse #Créative #Connectée

Le Portfolio d une... Marion Bossaton. #Curieuse #Créative #Connectée Le Portfolio d une... Marion Bossaton #Curieuse #Créative #Connectée À travers ce book interactif, je souhaite vous faire découvrir mon panel de compétences. J ai eu l occasion de travailler sur des projets

Plus en détail

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2014-2015 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/69 Introduction De nombreux sites

Plus en détail

Faculté de Génie Chaire industrielle en infrastructures de communication. La technologie XML. Wajdi Elleuch

Faculté de Génie Chaire industrielle en infrastructures de communication. La technologie XML. Wajdi Elleuch Faculté de Génie Chaire industrielle en infrastructures de communication La technologie XML Wajdi Elleuch Octobre 2004 SOMMAIRE Content : - XML : Définition - XML : Solution pour des applications réparties

Plus en détail

JSP/Servlets Enchaînement de pages. B. Mermet 2009

JSP/Servlets Enchaînement de pages. B. Mermet 2009 JSP/Servlets Enchaînement de pages B. Mermet 2009 Spécification d'une adresse cible Adresse absolue protocole://adresse Adresse relative à l'application /adressepage Adresse relative à la page adressepage

Plus en détail

1 / Introduction. 2 / Gestion des comptes cpanel. Guide débuter avec WHM. 2.1Créer un package. 2.2Créer un compte cpanel

1 / Introduction. 2 / Gestion des comptes cpanel. Guide débuter avec WHM. 2.1Créer un package. 2.2Créer un compte cpanel Guide débuter avec WHM 1 / Introduction WHM signifie Web Host Manager (ou gestionnaire d'hébergement web). WHM va donc vous permettre de gérer des comptes d'hébergement pour vos clients. (création de compte,

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

Plus en détail

TP JEE Développement Web en Java. Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web.

TP JEE Développement Web en Java. Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web. ASTRIUM - Toulouse JEE Formation 2013 TP JEE Développement Web en Java Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web. Figure 1 Architecture

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

Failles XSS : Principes, Catégories Démonstrations, Contre mesures

Failles XSS : Principes, Catégories Démonstrations, Contre mesures HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,

Plus en détail

Tour d horizon des CMS. Content Management System

Tour d horizon des CMS. Content Management System Tour d horizon des CMS Content Management System Qu est ce qu un CMS? C est un Sytème de gestion de contenus Gestion dynamique de contenus en ligne Contenus suivant les standards du web Séparation du contenu,

Plus en détail

Le Web Dynamique avec JavaScript

Le Web Dynamique avec JavaScript Le Web Dynamique avec JavaScript Concepts et Syntaxe 1 Intérêt Présentation de JavaScript Contrôle du contenu et de l apparence de pages Web Contrôle de fonctionnalités du Navigateur Internet Gestion du

Plus en détail

L utilisation d outils intelligents pour écrire du code valide

L utilisation d outils intelligents pour écrire du code valide B L utilisation d outils intelligents pour écrire du code valide Toutes les méthodes de développement, sans exception, incluent au moins une étape de test du code. C est parce que le code écrit par la

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

Programmation des Sites Web

Programmation des Sites Web Programmation des Sites Web Deuxième Année ENSIMAG ENSIMAG 2000-2001 James L. Crowley Séance 3 20 octobre 2000 Plan : JavaScript...2 Qu'est que Java Script...2 Messages de Alert...4 Fonctions...5 Ouverture

Plus en détail

PHP/MYSQL. Web Dynamique

PHP/MYSQL. Web Dynamique PHP/MYSQL Web Dynamique ENSG Juin 2008 Qui suis-je? Guillaume Gautreau Responsable projets Systèmes d information à l ENPC guillaume@ghusse.com http://www.ghusse.com Ces 6 jours de formation Jour 1 : présentations,

Plus en détail

Notice 4 Informations techniques Monelib

Notice 4 Informations techniques Monelib Notice 4 Informations techniques Monelib 18 Octobre 2011 1 Avertissement : Ce document s adresse aux personnes souhaitant faire une utilisation avancée du système de paiement Monelib. Sa compréhension

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Expressions communes. Détection du type de navigateur

Expressions communes. Détection du type de navigateur 2 Expressions communes Certaines tâches JavaScript récurrentes doivent être réalisées quasiment chaque jour. Elles sont à la base de nombreuses applications JavaScript mais n entrent dans aucune catégorie

Plus en détail

Formation : WEbMaster

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

Plus en détail

XQuery. Pierre-Alain Reynier http://www.lif.univ-mrs.fr/~preynier/xml/

XQuery. Pierre-Alain Reynier http://www.lif.univ-mrs.fr/~preynier/xml/ XQuery Pierre-Alain Reynier http://www.lif.univ-mrs.fr/~preynier/xml/ 1 Nous avons déjà vu : XML : présentation, exemple de XHTML Descriptions : DTDs, XML Schémas Navigation : XPATH Transformations : XSLT

Plus en détail

Introduction ASP.NET

Introduction ASP.NET 1 Sommaire Introduction... 1 1 Framework... 2 1.1 Général (.NET)... 2 1.2 ASP.NET... 2 2 Prérequis... 2 3 Présentation des bases d un projet ASP.NET... 3 3.1 Création d un projet... 3 3.2 Site Web : Les

Plus en détail

Le stockage local de données en HTML5

Le stockage local de données en HTML5 Le stockage local HTML5, pourquoi faire? Dans une optique de réduction des couts de maintenance, de déploiement, beaucoup d'entreprises ont fait le choix de migrer leurs applicatifs (comptables, commerciales,

Plus en détail

1. Installation du Module

1. Installation du Module 1 sur 10 Mise en place du Module Magento V 1.5.7 1. Installation du Module Vous pouvez installer le module de deux façons différentes, en passant par Magento Connect, ou directement via les fichiers de

Plus en détail

XML et PHP. 2008-2009 Programmation Web - PHP et XML 1

XML et PHP. 2008-2009 Programmation Web - PHP et XML 1 XML et PHP 2008-2009 Programmation Web - PHP et XML 1 Technique 1: gestion manuelle (Bohf!) Idée = XML en sortie : générer directement le fichier XML soit sur la sortie standard (via echo), soit dans un

Plus en détail

Présentation et traitement d information sur le Web Présentation du WWW (architectures web)

Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Jean-Michel Follin jean-michel.follin@univ-lr.fr

Plus en détail

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement

Plus en détail

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)

Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé) Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages

Plus en détail

M2PLS - M2EID TP SPRING

M2PLS - M2EID TP SPRING M2PLS - M2EID TP SPRING Référence du document : Http://www-lipn.univ-paris13.fr/M2PLS/tp_spring.pdf Dernière modification : 25/11/11 Type de document : Travaux pratiques Rédacteur : Fortier Michael fortier@univ-paris13,fr

Plus en détail

Installation de FckEditor dans un projet WebDev

Installation de FckEditor dans un projet WebDev Installation de FckEditor dans un projet WebDev www.ogi.fr 1) Installation de FckEditor Télécharger la dernière version de FckEditor ici : http:www.fckeditor.net/download La dézipper dans le répertoire

Plus en détail

ATHOMEMAGAZINE. Les prix de l immobilier au Luxembourg!

ATHOMEMAGAZINE. Les prix de l immobilier au Luxembourg! Les prix de l immobilier au Luxembourg! Madame, Monsieur, Chers agents, Chers clients, Le prochain numéro d athomemagazine sortira pour la fin du mois de mars 2015. Pour cette édition, nous vous proposons

Plus en détail

CHARTE GRAPHIQUE 2011

CHARTE GRAPHIQUE 2011 CHARTE GRAPHIQUE 2011 Une image modernisée pour le CNES Notre stratégie de communication, visant à renforcer l image et la notoriété du CNES auprès d un large public, repose sur une plus grande maîtrise

Plus en détail

Introduction aux concepts d ez Publish

Introduction aux concepts d ez Publish Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de

Plus en détail

TRAVAUX PRATIQUES LIAISON DDE

TRAVAUX PRATIQUES LIAISON DDE MASTER Pro SII 2004-2005 I Utilisation des fonctions DDE Excel TRAVAUX PRATIQUES LIAISON DDE 1) Lien DDE entre 2 applications d'une même machine Ouvrir deux instances d'excel Ecrire dans la cellule A1

Plus en détail