Introduction aux Web Services Partie 1. Technologies XML

Introduction aux Web ServicesPartie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013

PRESENTATION DU COURS 1/2 • 0 : Rappel du HTML : pages statiques, styles • 1 : Introduction au langage XML : • XML • DTD • XML-Schema • 2 : XHTML • 3 : Transformation de documents XML : • XPath • XSLT • 4 :Présentation de documents XML : • XSL Fo • 5 : Langages XML

PRESENTATION DU COURS 2/2 • 6 : Les APIs XML • 7 : XML et les architectures N-tiers • 8 : Technologies liées à XML • EJB • Web Services • 9 : Exemples d’applications de XML

Du HTML vers XML • Chapitre 0 : Rappel du HTML HTML – langage de base pour la création des interfaces des services web. Premier pas vers description de contenu • Spécification HTML 4 – 1999, • Spécification HTML 5 – décembre 2007 • Premier « Working Draft » public –février 2008

Eléments du HTML Balises : • Balises de structure du document • Balises de formatage • Balises de listes • Balises des hyperliens • Balises des images et des images maps • Balises de tableaux • Balises de formulaires • Balises des cadres • Balises de contenus executables Balises possèdent des attributs *Ce rappel est loin d’être exhaustif et ne donne que des éléments nécessaires pour ce cours

Balisesde la structure (1) <HTML> </HTML> - balise obligatoire <HEAD> </HEAD> - contient les balises qui composent l’entête du document <BODY> </BODY> - contient l’ensemble des contenus des balises qui composent le corps d’un document <TITLE> </TITLE> donne un titre descriptif d’un document, s’affiche dans la barre de navigateur <STYLE> </STYLE> - spécifie les propriétés du style relatives au document …..

Exemple des Balises de structure(1) <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">   <style type = "text/css">  body { font-family: Helvetica; color: black;font-size: 16px} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 18px} </style> <head>  <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> <meta name="auteur" content="Mme Benois-Pineau"/> <meta name="Mots-clés" content="Rappel,html,pages statiques"/> <title>Facture</title> </head>

Exemple des Balises de structure(2) <body> <h2>Définition d'une facture</h2> <ol type "i" compact> <li><h3>Définition d'une ligne</h3></li> <ol type"i" compact> <li>Numéro de l'item</li> <li>Référence de l'item</li> <li>Désignation</li> <li>Qté item</li> <li>Prix Unitaire</li> </ol> <li><h3>Totaux</h3></li> <ol type "i" compact> <li>Total HT</li> <li>Taux de TVA %</li> <li>TVA</> <li>Total TTC</li> </ol> </ol> </body> </html> • Exemple « Balises de structure »

Premier exemple HTML – plus complexe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">  <style type = "text/css"> body { font-family: Helvetica} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse { color:red; font-weight: bold; } </style> <head> • <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>TD1</title> </head> <body> • <h2>Premier exemple HTML complété </h2> • <a href="#installation">Installer et configurer Tomcat</a> <br></br> • <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> <h3>En guise d'introduction</h3> • <br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> <h3> Une page statique </h3></a> </body></html>

Premier Exemple • ExHTML1.html

Balises de formatage(2) 2. Balises de formatage « Mélange du contenu et du style : « du fond et de la forme » <B> texte </B>, - texte en gras <font> texte <font>, <BR>…</BR> - saut de ligne <HR></HR> - insertion d’une ligne horizontale Utiliser les feuilles de style CSS! ….

Exemple 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <--exemple 2 avec les elements de formattage en plus----/> <style type = "text/css"> • body { font-family: Helvetica} • h2 {font-family: Arial; color: blue;font-size: 22px} • h3 {font-family: Arial; color: blue;font-size: 16px} • .reponse { color:red; font-weight: bold; } </style> <head> <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>TD1</title> </head> <body> • <h2>Deuxième exemple HTML</h2> • <font size=7 color="red" face="Helvetica"> • Quelques formatages locaux desapprouvés par W3C • </font> • <a href="#installation">Installer et configurer Tomcat</a><br></br> • <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> <h3> Une page statique </h3></a> </body> </html>

Exemple 2 • ExHTML2.html

Balises pour formatage local • Balise div : signifie « division » ou partie d’une page, • <html> • <body> • <h3>This is a header</h3> • <p>This is a paragraph.</p> •  • <div style="color:#00FF00"> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • </div> • </body> • </html> • Exemple div

Balises de liste (3) • HTML4 : Listes de définitions, listes numérotées, listes à puces, compatibilité HTML3.2 • <li type= « type de liste » start=« valeur initiale » compact value=3>texte</li> • OL – listes numérotées, -  • <ol type=i/a/… start=« valeur initiale » compact/> • UL – listes avec les puces • <ul type=« disc »/ « square »/ « circle » compact/>

Exemple 3 • ……. • <body> • <h2>Troisième exemple HTML</h2> • <li type="i" start= 3 value=4>nous commensons</li> • attributs sont sans effet • <ol type ="a" compact> • <li> action1 </li> • <li> action2 </li> • </ol> • <ol type"i" compact> • <li> <a href="#installation">Installer et configurer Tomcat</a></li> • <li> <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a></li> • </ol> • <ol type="a" compact start= 3> • <li> action3 </li> • <li>action4</li> • </ol> • <ul type=disc compact> • <li> Les actions sont à specifier</li> • </ul> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> • <h3> Une page statique </h3></a> • </body> • </html>

Balises d’hyperliens(4) • <a> • Deux fonctions : • 1. associée à l’attribut HREF définit un hyperlien • 2. associée à l’attribut « name » définit un ancre à l’intérieur du document • - possibilité de naviguer dans des documents volumineux

Exemple 4 • ….. • <body> • <a name = "sommaire"></a> • <h2>Balises des hyperliens HTML</h2> • <ol type"i" compact> • <li> <a href="#installation">Installer et configurer Tomcat</a></li> • <li> <a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a></li> • </ol> • <hr></hr> • <font size=1 color= blue face = Arial> • ttttttttttttttttt<br> • ttttttttttttttt<br> • ….. • </font> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a href=#sommaire> Retour </a> <br></br> • <font size=1 color= green face = Arial> • aaaaaaaaaaaaaaaaaaaaa<br> • aaaaaaaaaaaaaaaaaaaaaaaaaaa<br> • …… • </font> • <a name=« Page"> • <h3> Une page statique </h3></a> • </body> • </html>

Balises de tableaux (6) • <table align=« left/center/right » border=« épasseur » bgcolor=« couleur » • Width=« largeur en %de fenêtre/pels» cols=« nombre de colonnes » • …</table> • Balises corrélatives • <caption>,<thead>, <tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<td>

Balises de tableaux(6) • <colgroup> : permet de définir des propriétés communes à un gourpe de colonnes • <colgroup span=3 align=« center » valign=« top »> • </colgroup> • <tr> </tr> définit une ligne de tableau • <td> </td> définit une cellule à l’interieur de tr • <th> </th> de même • Attribut importan :colspan • <tr align= « left » colspan=3>….</tr>

Exemple 5 • …. • <body> • <h2>Tableau de HTML</h2> • <table border 1> • <tbody> • <tr> • <td align="center">Première colonne du premier groupe : centrée </td> • <td align="right">Seconde colonne du premier groupe : alignée à droite</td> • <td align="center">premiere colonne du second groupe : centrée</td> • <td align="center">seconde colonne du second groupe : centrée</td> • </tr> • <tr> • <td align="center">1.1</td> • <td align="right">1.2</td> • <td align="center">2.1</td> • <td align="center">2.2</td> • </tr> • </tbody> • </table> • </body> • </html>

Balises de formulaires • Balise <form> • Elle regrouppe les éléments du formulaire : boutons, champs de saisie, etc.. • Elle possède les attributs: method, action,enctype, name, accept, onsubmit,onreset, accept-charset • Attribut method – indique comment sont envoyées les données: POST ou GET • Analyse conjointe avec Javascript

Javascript(1) • Contenu executable : <script> • Pourquoi un script : ajout des actions aux pages web statiques • Un script s’exécute coté client • Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, permettant d’effectuer des calculs, de manipuler les chaînes de caractères, d’emmètre des sons, d’ouvrir des nouvelles fenêtres et URL, d’accéder aux informations fournies par l’utilisateur dans un formulaire HTML et de les vérifier.

Javascript(2) • Incorporation dans les documents HTML • <SCRIPT> • ….. • </SCRIPT> • La balise <SCRIPT> prend l’attribut « LANGUAGE » • <SCRIPT LANGUAGE=« JavaScript »></SCRIPT> • <SCRIPT LANGUAGE="JavaScript" SRC="fichierSource.js"></SCRIPT> - fichier à part

Javascript (3) • Fonctions et objets • Javascript est un langage –objet dérivé de Java • Un objet est ensemble des données et de méthodes. • Javascript opère les objets des navigateurs Web • et possède ses propres objets. • Exemple : • <form action="" class="cadre" name="formulaire1"> • (<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>) • -objet form de HTML, méthode reset; • -objet document de HTML – indique le document actif. • -objet « link » = balise a+attribut href

Objets HTML et Javascript • Javascript accède aux objets prédéfinis de HTML • Document • Form • Applet • Argument • History • Image • Link • Option • Plugin…

Objets HTML : propriétés, méthodes, événements • Pour chaque objet sont définis • (1) Propriétés (attrs) • (2) Méthodes • (3) Evénements • Exemple : objet Input • Propriétés : name, value, defaultValue • Méthodes : focus(), blur(), select(), submit()

Exemple(1) • Source .html • Source .js • //Initialisation des tableaux contenant les comptes et leur libelle • personnes = new Array(); • libelleComptes = new Array(); • nbPersonnes= 0; • //Initialisation du tableau des erreurs • tableauErreurs = new Array( • /* 0 */ 'Le nom doit être renseigné', • /* 1 */ 'Le prénom doit être renseigné', • /* 2 */ 'L\'année de naissance doit être renseignée', • /* 3 */ 'L\'année de naissance ne doit comporter que des chiffres' • ); • // Affiche le message de l erreur dont le numero est passe en argument • function afficheErreur(numeroErreur) • { • alert(tableauErreurs[numeroErreur]); • }

Exemple (2):Javascript //Ajout d'une personne function ajout() { nom = document.formulaire1.nom.value; if (nom.length != 0) { prenom=document.formulaire1.prenom.value; if (prenom.length != 0) { anneeNaissance=document.formulaire1.annee.value; if (anneeNaissance.length != 0) { if ( isNaN(anneeNaissance) == false ) { personnes[nbPersonnes]=nom; nbPersonnes ++; affiche_personne(); } else { document.formulaire1.annee.value=""; afficheErreur(3); } } else { afficheErreur(2); } } else { afficheErreur(1); } } else { afficheErreur(0); } }

Exemple 3: Javascript //Affichage des personnes function affiche_personne() { texte=""; for(i=0;i<nbPersonnes;i++) { //Ajout d une nouvelle ligne dans le texte texte += personnes[i]+"\n"; } //Affichage du texte document.formulaire1.listePersonnes.value=texte; } /**************************************************************** //Verification du code postal //code retour: // 0 : OK // 3 : presence de lettres dans le code postal // 4 : le code postal fait moins de 5 chiffres function verification_code_postal() { retour = 0; valeur =document.formulaire1.code.value; if ( valeur.length != 5 ) { document.formulaire1.code.value=""; retour = 4; } if ( isNaN(valeur) == true ) { document.formulaire1.code.value=""; retour = 3; } afficheErreur(retour); return retour; }

Balise des cadres • La balise <frame> sert à afficher une page html à l’intérieur d’une autre page html <frame src=« mapage.html »> La configuration de la page courante est effectuée à l’aide de la balise frameset <frameset cols=« 33%,33%,33% »> <frameset rows=« 200 »> <frame src=« mapage.html »/> </frameset> </frameset>

FEUILLES DU STYLE CSS • Comment modifier dynamiquement l’aspect du document HTML? • solutions : CSS • CSS : Cascading Style Sheet le standard adopté par W3C

Principes de CSS • Une Feuille de style CSS = liste de règles, chacune indiquant les noms des éléments auquelles elles s’appliquent et les paramètres de style qui doivent être utilisés.

Syntaxe 1/2 • La syntaxe de base doit respecter le modèle : element { propriété: valeur } body {color: blue} p {font-family: arial} • Il est possible de grouper les éléments lors d’une définition h1, h2, h3 {color:green } • La définition de classe permet d’affiner un élément element.classe {propriété: valeur } p.droit {text-align: right} • Il ne peut y avoir qu’une classe par élément HTML • Dans la cas ou l’on ne précise pas l’élément de base de la classe celle-ci s’applique à tous les éléments HTML

Balises de formattage des pages • Balise div : definit « division », partie d’un document html à utiliser avec des styles particuliers. • Ex ( W3Schools) • <html> • <body> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • <div style="color:#00FF00"> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • </div> • </body> • </html>

Syntaxe 2/2 • Il est possible de spécifier des règles ne s’appliquant qu’à un seul élément en utilisant son id. • Le style peut s’appliquer sur un élément element#id { propriété: valeur } p#par1 {font-family: arial} • Ou sur le premier id trouvé *#id { propriété: valeur } *#par1 {font-family: arial}

Utilisation 1/2 • Les styles peuvent être définis: • Dans un fichier à part, lié à l’aide de l’instruction <head> <link rel="stylesheet" type="text/css" href="<fichier.css>"/> </head> • Directement dans le fichier HTML <head><style type="text/css"> P {color: blue} </style> </head>

Exemple de HTML/CSS • Fichier HTML • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> • <head> • <link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> - balise de structure <link> • <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>ExCSS</title> • </head> • <body> • <h2>Definition des chansons</h2> • <dd> Ma chanson (identification de la définition d'un terme) • <ul> • <li> par l'auteur</li> • <li> Producteur : Dupond</li> • <li> Editeur : Maison edition</li> • <li> Duree : 6:20</li> • <li> Date : 1978</li> • <li> Artiste : Toto</li> • </ul> • </body> • </html> • ExHTML7_CSS.html Attribut rel Specifie la relation entre les fichiers

Feuille de style • Fichier .css body { font-family: Helvetica} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} li {font-family:Arial; color:green;fontsize: 14px}

Utilisation 2/2 3. Directement dans la définition de l’élément <p style="color : red;text-align: right"> La valeur réelle du style est l’union de toutes les définitions. De plus une notion d’héritage existe ainsi la définition de body impacte les paragraphes

Priorité • Il existe des priorités dans l’ordre de présence des styles • Les styles définis dans un élément HTML sont les plus prioritaires • Ensuite viennent les éléments définis dans le head du fichier • Ensuite viennent les éléments définis dans une feuille de style externe • Ensuite viennent les styles par défaut du navigateurs

Pratique avancées 2/3 • Les pseudos classes : • Ce sont des classes prédéfinies ( active, hover, link, visited, :first-child, :lang)/ Element:pseudo-classe { propriété: valeur } a:link {color: #FF0000 } a:visited { color:#FFFF00 } • Les pseudos classes se combinent avec les classes element.classe:pseudo-classe a.red:visited { color: #FFFFFF }

Références • http://www.w3c.org/Style/CSS • http://www.w3schools.com/css • http://www.websitetips.com/css/index.html

Introduction aux Web Services Partie 1. Technologies XML