INTRODUCTION AUX LANGAGES WEB STATIQUES

1. Réalisation d'un shéma XML

Introduction

Soit une passerelle qui pilote un ensemble d'automates.

L'objectif est de créer un fichier XML permettant de stocker la configuration du réseau d’automates ainsi que les caractéristiques de la passerelle.

Exemple de fichier cfgpasserelle.xml :

<?xml version="1.0" encoding="UTF-8"?>
<Cfgpasserelle xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
  <adresseip>172.19.1.1</adresseip>
  <nomreseau>reseauafficheur</nomreseau>
  <api nom="s102">
    <adressemodbus>1</adressemodbus>
    <adressemot>10</adressemot>
  </api>
  <api nom="sx102">
    <adressemodbus>2</adressemodbus>
    <adressemot>40</adressemot>
  </api>
</Cfgpasserelle>
  1. Lister l'ensemble des éléments du fichier XML précédent. Quel est le nom de l'élément racine?
  2. A partir d'un moteur de recherche, donner la définition des termes complexType et sequence dans un schéma XML. Donner également la définition des termes minOccurs et maxOccurs associé à un élément sequence.
  3. A quel élément du fichier précédent peut-on associer les termes sequence, minOccurs et maxOccurs?

Réalisation d'un schéma XSD et création du XML associé

  1. Réaliser sous Netbeans le schéma suivant, relatif au problème posé.
    On s'aidera du document : Exposé 1 : Introduction aux langages web statiques.
  2. Expliquer le code source du fichier XSD généré.
  3. Générer alors un exemple de fichier XML similaire à l'exemple précédent et le valider.

Etude d'un fichier HTML

Soit le fichier HTML suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TP Bootstrap</title>
  </head>
  <body>
    <h3>TP Boostrap : les styles de tableaux</h3>
    <table>
      <tr><td>Adresse</td><td>Type</td><td>Etat</td></tr>
      <tr><td>1</td><td>Convecteur</td><td>Confort</td></tr>
      <tr><td>2</td><td>Volet</td><td>Baissé</td></tr>
    </table>
  </body>
</html>
  1. A l'aide d'un copier-coller du code ci-dessus, créer un fichier sauvegardé dans le dossier /perso/public_html/TPWebStatique. Visualiser ce fichier dans un navigateur depuis l'URL 172.17.1.2/~login/TPWebStatique/TP.html.
  2. Que signifie la ligne <!DOCTYPE html>?
  3. Donner la signification de l'ensemble des balises.
  4. Ajouter la ligne nécessaire à la prise en compte des accents afin que le terme « Baissé » apparaisse correctement, et ce quelle que soit la configuration du navigateur.

Utilisation du CSS Bootstrap

Introduction

Bootstrap est un framework (collection d'outils) permettant de créer des RIA (Rich Internet Application). Ce framework, proposé par la société Twitter, est composé d'un ensemble de code HTML, CSS et JavaScript, permettant de mettre à disposition des styles et des éléments interactifs (navigation, tableaux, formulaire, etc...). Il est proposé sous licence MIT (compatible avec la GNU General Public Licence). Bootstrap se présente sous la forme d'un fichier .zip peu volumineux (version actuelle 3.2.0 - Octobre 2014).

Vous pouvez obtenir Bootstrap de deux manières :

Une fois extrait, Bootstrap se compose de trois répertoires :

Seul le répertoire CSS sera exploité dans le TP. Les formulaires et autres outils de navigation (onglets, menus, ...) écrits en JavaScript ne seront pas mis en oeuvre (nécessité de maîtriser ce langage ainsi que jQuery et Ajax).

  1. Télécharger le framework Bootstrap et le décompresser dans le répertoire /perso/public_html/TPWebStatique.
  2. Valider le fonctionnement de Bootstrap en ajoutant dans le fichier HTML précédent la ligne <link href="css/bootstrap.min.css" rel="stylesheet"> au bon endroit. Commenter le résultat.
  3. Cliquer sur l'onglet CSS à l'URL http://getbootstrap.com/ et donner cinq exemples de styles que peut apporter ce CSS.
  4. Afin d’introduire des composants interactifs (onglets, menu déroulants, ...), il faut s'appuyer sur la partie JavaScript du framework Bootstrap. Quelle est la ligne (ou quelles sont les lignes) à inclure permettant d'utiliser de tels composants ?

Utilisation du CSS Bootstrap

La documentation à exploiter dans le TP est accessible à partir de l'onglet CSS de l'URL http://getbootstrap.com/. L'objectif est d'utiliser le CSS Bootstrap afin de présenter la page HTML développée précédemment comme suit :

  1. En cliquant sur « Typography », donner le nom de la classe qui permet de centrer le titre de la page HTML élaborée. Appliquer et Tester.
  2. En cliquant sur « Tables », donner le nom de la classe permettant d'appliquer un surlignage d'une ligne du tableau au passage de la souris. Appliquer et Tester.
  3. Idem pour obtenir un encadrement complet du tableau (en plus du surlignage).
  4. Idem pour que la première ligne du tableau soit de couleur bleue.