Yann Jacob [email protected] Projet Web/BD. Programmation Web / Bases de Données XHTML Projet...

Yann [email protected]

Projet Web/BD

Programmation Web / Bases de Données► XHTML

Projet Web/BD

• 8 x 4 heures de TP

• Des cours (HTML, CSS, PHP, JavaScript, AJAX, sécurité)

• Des TD

• Un projet :– À choisir dans la liste fournie ici http://www-poleia.lip6.fr/~jacoby/ProjetWebPolytech/index.htmlou proposer un sujet soi-même (sujet à faire valider)– Un seul groupe par projet

2


Projet Web/BD

• Projet :1. Choisir le projet2. Contacter les clients3. Organiser AU MOINS UNE réunion avec les clients

• Vérifier la bonne compréhension du cahier des charges• Vérifier la faisabilité en fonction de l'environnement de travail du client• Organiser plusieurs réunions est préférable !

4. Évaluation à mi-parcours (22 mars)• Compte-rendu de la première réunion avec le client• Schémas préliminaires (structures de données, scénarios, etc.)

5. Évaluation finale (26 avril) : soutenance, rapport et code commenté• Un site qui fonctionne !

3


Introduction


Internet et le Web

• Internet : un réseau mondial d'ordinateurs.• Différentes applications :

– Courrier électronique– Web– Échange de fichiers (FTP, peer-to-peer)– Console distante (telnet, VNC)– Vidéoconférence, e-commerce, télétravail, chat, collecticiel,…

• Le Web : un système hypertexte public fonctionnant sur Internet et permettant de consulter, avec un navigateur, des pages mises en ligne dans des sites.

5


Architecture du Web

6

Le client Le serveur

Le réseau

(navigateur) (HTTP)

Protocole TCP/IP(voir vos cours de réseaux)

URL (+ paramètres)

Type MIME + fichier


URL et MIME

• URL : Uniform Resource Locator– Identifie sur le Web un document ou un fragment

• MIME : Multipurpose Internet Mail Extensions– Type des documents transférés par le protocole HTTP

(différent de l’extention !)– La navigateur décide ainsi comment afficher le fichier– text/html, text/plain, application/pdf, application/zip, image/jpeg,

video/mpeg, audio/x-wav, etc.

7

http://www.limsi.fr/~xtannier/fr/Enseignement/index.html#web_bd

protocole machine répertoire fichier fragment

(http, https, ftp, news, mailto, telnet...)


Navigateurs

• Navigateurs graphiques (IE, Firefox, Opera, Konqueror, Safari...)• Navigateurs textuels (links, linx...)• Navigateurs auditifs• Robots

8

Pour le projet• Les projets devront être testés sur les 2 ou 3

navigateurs les plus courants (et sur Linux + Windows)

• L'accessibilité sera un critère important


eXtended HyperText Markup Language

(XHTML)


(X)HTML

• (eXtended) HyperText Markup Language • Un langage à balises pour structurer (et dans HTML pour mettre en

forme) les documents

• Format ouvert, indépendant du logiciel et du matériel• XHTML :

– Successeur du HTML– Conforme aux normes XML (eXtended Markup Language)– Développé par le W3C (World Wide Web Consortium)

10

Pour le projet• XHTML• Tous les codes seront vérifiés par des validateurs

http://validator.w3.org/


L’essentiel du langage XML (1/3)

11

article

date auteur section bibliographie

2010-01-12 15:32:27

Dupont et Dupond

par …

…

bib …

…

<article date="2010-01-12 15:32:27" auteur="Dupont et Dupond" > <section>

<par> ... texte ...

</par> </section> <bibliographie> <bib id="Untel03" auteur="Untel"/> </bibliographie> …</article>

• Chaque nœud de l'arbre est un élément

• Un élément peut avoirdes attributs

• Les feuilles de l'arbre peuvent être des éléments textuels

• Un document XML = un arbre étiqueté et ordonné



• Vocabulaire– Racine = document = arbre– Nœud = élément (entouré par des balises)– Balise de début (<title>), balise de fin (</title>), balise d’élément vide (<br/>)– Attribut : nom="valeur" dans la balise de début– Prologue : version de XML et type du document (ex : XHTML)

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

12



• La structure des documents XML est imposée par une DTD ou un schéma XML

• Pour analyser des documents XML, on utilise deux méthodes :– DOM : construction de l'arbre en mémoire (puissant mais lent)– SAX : parcours linéaire du fichier (limité mais rapide)– Les analyseurs XML implémentent les API DOM ou SAX

• Un élément est défini de façon unique par son chemin XPath :/article[1]/section[2]/par[5]

13

Structure d’un document XHTML

14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

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

<head > <!-- En-tête du document -- >

</head >

<body > <!-- Corps du document -- >

</body >

</html >

Attributs de langue (redondant !)

Version de XHTML utilisée(pour les validateurs notamment)

Entêtes XHTML

15

<html > <head >  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Cours de Programmation Web</title>

 <meta name="description" lang="fr" content="cours de prog web" /> <meta name="keywords" lang="fr" content="web,XHTML" />

 <link rel="stylesheet" type="text/css" href="./style.css" />  </head >...


Les titres de section (h1-h6)

16

<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Introduction</h1> <h1>(X)HTML</h1> <h2>Les bases</h2> <h3>Rappels de XML</h3> <h2>Les balises</h2> </body ></html>

Pour l'instant, c'est le navigateur qui décide de la forme...


Emphases et compagnie

17

<html > <head >

<title>Cours de Programmation Web</title> </head > <body > <h1>Introduction</h1> <p><em>XHTML</em> est le successeur du HTML. <br /> Il respecte le standard <strong>XML</strong> </p> <hr /> <strong><em>Voilà !</em></strong> </body ></html>

Pour l'instant, c'est le navigateur qui décide de la forme...


Listes non ordonnées

18

<html > <head >

<title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <h2>Les balises :</h2> <ul> <li>de titre</li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body ></html>

En XHTML on ferme toutes les balises !


Listes ordonnées

19

<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <h2>Les cascades CSS, avec :</h2> <ol> <li>le style de l'auteur</li> <li>le style de l'utilisateur</li> <li>le style du navigateur</li> </ol> </body ></html>

Attributs de ol : type (valeurs "1", "a", "A", "i" ou "I")start (numéro de démarrage)


Listes de définitions

20

<html > <head >

<title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <dl> <dt>XML</dt><dd>eXtensible Markup Language</dd> <dt>XHTML</dt><dd>eXtended HTML</dd> <dt>CSS</dt><dd>Cascading Style Sheets</dd> </dl> </body ></html>


Images

21

<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Images</h1> <img src="http://www.limsi.fr/modeles/images/logo-limsi.gif" alt="LIMSI" title="LIMSI" /> <br /> <img src="../images/terre.jpg" alt="La Terre" /> </body ></html>

Attribut alt indispensable, pour remplacer l'image lorsque le texte ne s'affiche pas ou pour les lecteurs (humains ou machines) n'ayant pas accès aux images.

Format d'images possibles : jpeg (photos)gif (animations)png (transparence)

infobulle


Liens

22

<html > <head >

<title>Cours de Programmation Web</title> </head > <body > <h2 id="liens">Liens utiles (avec une ancre)</h2> <ul> <li><a href="../BD.html">Le cours de BD (lien relatif)</a></li> <li><a href="http://www.w3.org">Le W3C (URL absolue)</a></li> <li><a href="http://www.limsi.fr"> <img src="http://www.limsi.fr/modeles/images/logo-limsi.gif" alt="Le site du LIMSI (image)" /></a></li> <li><a href="#bas">Aller en bas (ancre)</a></li> </ul> <br /><br /><br /><br /><br /> <a id="bas">Vous êtes en bas</a><br /> <a href="#liens">Retour vers l'ancre des liens</a> </body ></html >


Tableaux

23

<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h2>Tableau</h2> <table> <caption>Comparaison XHTML / HTML</caption> <tr><th /><th>XHTML</th><th>HTML</th></tr> <tr><th >forme</th><td>non</td><td>oui</td></tr> <tr><th >structure</th><td colspan="2">oui</td></tr> <tr><th ><br></th><td rowspan="2">non</td><td

rowspan="2">oui</td></tr> <tr><th ><hr></th></tr> </table> </body ></html >

En trichant !

(feuille de style)légende

ligne

cellule d'entête

cellule de donnée

cellules multi-colonneset multi-lignes


Les formulaires XHTML


Les formulaires

25

<html > <body > <form method=" " enctype=" " action="script.php">

</form> </body ></html>

getpost

application/x-www-form-urlencodedmultipart/form-datatext/plain

URL du script auquel sera soumis le formulaire

(on verra plus tard...)

valeur par défaut


Les ensembles de champs

26

<html > <body > <form method=" " enctype=" " action="script.php">

<p> </p> <fieldset> <legend></legend> </fieldset>

<div> </div>

</form> </body ></html>

Si les champs de formulaires sont au milieu d'un texte

Pour regrouper des champs de formulaireayant une sémantique proche

Sinon

En XHTML, pas de champs de formulaire "en vrac"


Les types de champs

27

• input type = " "

• label for

• textarea name cols rows

text hiddenpasswordcheckbox radiofilesubmitresetimage button


Étiquette, saisie de texte

28

<form method=" " action="script.php"> <fieldset> <legend>Identité</legend> <label for="nom">Nom</label> <input type="text" name="nom" id="nom"

value="Nom par défaut" maxlength="25" /><br /> <label for="prenom">Prénom</label> <input type="text" name="prenom" id="prenom"

value="Prénom par défaut" maxlength="25" /><br /> <label for="passwd">Mot de passe</label> <input type="password" name="passwd" id="passwd"

value="12345678" maxlength="10" /><br /> </fieldset></form>

Sans feuille de style...

Optionnel. Un clic sur le labelsélectionne le champ de saisie


Saisie multiligne

29

<form method=" " action="script.php"> <div> <label>Description</label> <textarea name="desc" cols="40" rows="5"> </textarea><br />

<label>Commentaire</label> <textarea name="comm" cols="20" rows="10"> Pas de commentaire... </textarea> <br /> </div></form>

Texte par défaut


Champ caché

30

<form method=" " action="script.php"> <div> <input type="hidden" name="monnaie" value="EURO" /> </div></form>

– Permet de masquer des champs pour le client tout en envoyant leur contenu avec le formulaire

– Précise des informations name/value– Attention, à utiliser pour "masquer", pas pour "cacher" !

Le client peut éditer la page à la main pour voir et changer la valeur de ces champs !


Choix multiples (1/2)

31

<form method=" " action="script.php"> <div> <input type="checkbox" name="tele" id="tele"

value="teleOK" checked="checked" tabindex="0" /> <label for="tele">Décochez cette case si vous n'avez pas de télé</label> </div> <fieldset><legend>Paiement :</legend> <input type="radio" name="paiement" id="carte"

value="carte" checked="checked" tabindex="1" /> <label for="carte">Par carte</label> <input type="radio" name="paiement" id="cheque"

value="chaque" tabindex="2" /> <label for="cheque">Par chèque</label> </fieldset></form>

Optionnel mais très conseillépour l'accessibilité


Choix multiples (2/2)

32

<form method=" " action="script.php"> <div> <select name="age"> <label>Votre âge :</label> <option value="20">Moins de 20 ans</option> <option value="35" selected="selected">21 à 35 ans

</option> <option value="50">36 à 50 ans</option> <option value="51">Plus de 51 ans</option> </select> </div></form>


Fichier joint

33

<form method="" enctype="multipart/form-data" action="fic.php"> <div> <label for="fichier">Fichier joint :</label> <input type="file" name="fichier" id="fichier"

accept="text/*"/> </div></form>

type MIME (optionnel) : text/plaintext/htmlimage/gifvideo/*...


Bouton

34

<form method="" action="script.php"> <div> <input type="checkbox" name="tele"

value="teleOK" checked="checked" /> <label>Décochez cette case si vous n'avez pas de télé</label><br /> <input type="reset" value="Réinitialiser" /> <br /> <input type="submit" value="Envoyer" /> <br /> <input type="image" src="./infos.jpg" alt="Envoyer" /> </div></form>

Même comportement

type button : pas d'action, seulement du javascript. À éviter ! (accessibilité)


Et l’avenir ? HTML 5

• (X)HTML 5 : la prochaine révision du langage par le W3C• Vision document complétée par une vision "application"• Suppression des balises de forme• Plus de balises de structure

– header– article– footer

• Ajout de balises d'API :– canvas– audio– video– draggable– ...

35


Références

• Spécification de XHTML 1.1http://www.w3.org/TR/xhtml11/

• Spécification de XHTML 1.0http://www.w3.org/TR/xhtml1/

• Spécification de XML 1.0http://www.w3.org/TR/REC-xml/

• Spécification de HTML 4.01http://www.w3.org/TR/REC-html40/

• HTML et XHTML : La Référence, O’Reilly

36

Yann Jacob [email protected] Projet Web/BD. Programmation Web / Bases de Données XHTML Projet...

Documents

Transcript of Yann Jacob [email protected] Projet Web/BD. Programmation Web / Bases de Données XHTML Projet...