introduction aux web services partie 1 technologies xml n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction aux Web Services Partie 1. Technologies XML PowerPoint Presentation
Download Presentation
Introduction aux Web Services Partie 1. Technologies XML

Loading in 2 Seconds...

play fullscreen
1 / 46

Introduction aux Web Services Partie 1. Technologies XML - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

Introduction aux Web Services Partie 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction aux Web Services Partie 1. Technologies XML' - arva


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
presentation du cours 1 2
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
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
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
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
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
Exemple des Balises de structure(1)

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<!--exemple 1 - Balises de structure---->

<!-- -->

<style type = "text/css">

<!--balise de style à l'intérieur du document-->

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>

<!--Balise meta : description du document -->

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

<!--exemple 2 avec les elements de formattage et de navigation---->

<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
Premier Exemple
  • ExHTML1.html
balises de formatage 2
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
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 21
Exemple 2
  • ExHTML2.html
balises pour formatage local
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>
  • <!-- Application de la balise div -->
    • <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
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, - <!--ordered list-->
  • <ol type=i/a/… start=« valeur initiale » compact/>
  • UL – listes avec les puces
  • <ul type=« disc »/ « square »/ « circle » compact/>
exemple 3
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>
exemple 31
Exemple 3
  • ExHTML3.html
balises d hyperliens 4
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
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>
exemple 41
Exemple 4
  • ExHTML4.html
balises de tableaux 6
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 61
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
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>
exemple 51
Exemple 5
  • ExHTML5.html
balises de formulaires
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Références
  • http://www.w3c.org/Style/CSS
  • http://www.w3schools.com/css
  • http://www.websitetips.com/css/index.html