TP n° 2 - IDSE Technologies « Coté Clientusers.polytech.unice.fr/.../supports/lpsil/LP_web_TP2.pdfTP n 2 - IDSE Technologies « Coté Client » 3.1 Validation W3C Le W3C, World

Licence Professionnelle Nice – Sophia G. Rey

2015-2016

Licence Professionnelle Nice – Sophia Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://users.polytech.unice.fr/~rey/

1

TP n° 2 - IDSE Technologies « Coté Client »

1 Présentation Les objectifs de ce cours/TP sont de vous montrer et de vous expliquer les différents standards utilisés pour la conception de sites web. Pour ce cours/TP, nous nous intéresserons à la partie client, c'est-à-dire au « code » exécuté sur le navigateur web de l’utilisateur visitant votre site internet. Dans un premier temps nous allons voir les standards HTML et XHTML qui permettent de structurer vos pages web. Puis nous nous intéresserons au CSS qui s’occupe de la mise à page et des styles de votre site. Enfin, nous terminerons ce cours TP par l’étude du JavaScript et du concept « AJAX » qui s’occupe de rendre votre site plus dynamique et par un rapide aperçu des nouveautés introduites dans HTML5. Dans les TPs suivants, nous verrons la partie serveur (php, …) et des fonctions plus avancées et orientées multimédia (Flash, Silverlight…).

1.1 Pré-requis Pour réaliser ce TP, vous avez besoin d’un serveur web fonctionnel. Vous utiliserez le serveur http sous Linux que vous avez configuré lors du cours/TP 1.

Vous aurez également besoin d’un éditeur de texte pour écrire le code de vos pages. Vous pouvez par exemple utiliser un des logiciels Notepad++, ConText, Quanta+, WebExpert,… Microsoft vous propose de télécharger gratuitement Expression Web.

Pour réaliser ce cours/TP, vous garderez les groupes constitués dans le cours/TP précédent.

1.2 Le rendu Vous devrez, en fin de séance, rendre un compte rendu de votre TP. Ce compte rendu devra OBLIGATOIREMENT respecter les contraintes suivantes :

• Etre envoyé par email à votre enseignant.

• Avoir le sujet suivant : [2015][LPSIL][IDSE][TP2]nom1_Prenom1 – nom2_Prenom2 où nom1_Prenom1 et nom2_Prenom2 les noms et prénoms du binôme.

• Etre reçu par votre enseignant le jour du cours/TP.

• Contenir dans le corps de l’email les questions que vous pourriez avoir (si vous souhaitez avoir une réponse rapide car les comptes rendu ne sont pas évalués immédiatement).

• Contenir en attachement 1 seul fichier .zip, .7z ou .tar.gz contenant lui-même 1 fichier de compte rendu (au format pdf, rtf, doc, docx ou txt) ainsi que les divers fichiers (fichiers de configuration, pages (x)html, CSS, php…) écrits dans le TP.

2 Les outils pour parcourir le Document Object Model Il existe divers outils de débogage évolués pour les différents navigateurs. Ces outils vous seront très utiles pour explorer l’arbre DOM (Nous verrons plus loin dans ce cours/TP ce qu’est exactement le DOM) de votre page, vérifier les propriétés CSS ou encore connaitre les erreurs de vos fonctions JavaScript. Voici une rapide présentation de 3 de ces outils pour les 3 navigateurs que nous utiliserons dans ce cours. Il est fortement conseiller d’avoir un de ces outils (ou un équivalent) d’installés pour la réalisation de ce cours/TP.

https://creativecommons.org/licenses/by-nc-sa/3.0/fr/

http://notepad-plus.sourceforge.net/fr/site.htm

http://www.contexteditor.org/index.html

http://quanta.kdewebdev.org/

http://software.visicommedia.com/fr/products/webexpert/

http://www.microsoft.com/expression/fra/


2015-2016




2


2.1 FireBug, une extension pour Firefox 23 Firebug est un outil de développement web sous forme d'une extension pour Mozilla Firefox et SeaMonkey qui permet de déboguer, modifier et contrôler le HTML, le CSS, le DOM, le XHR et le JavaScript d'une page web. [Wikipédia]

2.2 Outils de développement d’Internet Explorer Les outils de développement (F12) ont été introduits dans Windows Internet Explorer 8 et mis à jour avec de nouvelles fonctionnalités dans Windows Internet Explorer 9. Les outils de développement (F12) d’Internet Explorer 10 ajoutent le débogage de threads de travail Web et la prise en charge de plusieurs sources de script. [Microsoft]


http://fr.wikipedia.org/wiki/Firebug

http://msdn.microsoft.com/fr-fr/library/ie/hh673541(v=vs.85).aspx


2015-2016




3


2.3 Outils de développement d’Edge Microsoft Edge implémente des outils de développement (F12) améliorés. Vous pouvez déboguer, tester et accélérer l’affichage de vos pages web grâce à cet outil, qui continue d’évoluer et de s’améliorer dans Microsoft Edge. [Microsoft]

2.4 DragonFly dans Opera 23 Dragonfly Opera est une application JavaScript utilisée pour débogger les pages Web locales et distantes. [Opera]

3 XHTML Le XHTML (eXtended Hyper Text Markup Language), c'est du HTML respectant la syntaxe XML !


https://msdn.microsoft.com/fr-fr/library/dn706046(v=vs.85).aspx

http://help.opera.com/Windows/10.20/fr/devtools.html


2015-2016




4


3.1 Validation W3C Le W3C, World Wide Web Consortium, est un organisme travaillant sur la mise en place de standards Web. Ce qui nous intéresse plus particulièrement, ici, est leur système de validation de code source. Par valider le code source, le système du W3C, va vérifier la syntaxe de votre code conformément aux règles établies. Contrairement à ce que beaucoup pourraient penser, ce n'est pas dénué de sens de valider sa page ! En voici quelques raisons :

- Permet d'avoir un code portable, compatible avec la plupart des navigateurs. - Permet d'avoir un code standardisé et connu de tout le monde. - Permet une meilleure accessibilité.

3.1.1 DOCTYPE Le DOCTYPE, Document Type, déclare au navigateur la norme utilisée. Il doit être placé en tout début du code source, avant la balise <html>.

XHTML 1.0 Strict : utilisation recommandée si vous restez en 1.0 (mais faites un petit effort et passez en 1.1) ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional: permet d'utiliser des balises "décoratives" comme <font>, ... qui sont généralement dépréciées en XHTML Strict. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset: utilisé quand la page contient une ou plusieurs frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1: utilisation recommandée (mais un peu plus contraignante) ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 5 : la toute dernière version <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">

Pour les documents XHTML5, l'auteur doit spécifier l'encodage dans le prologue XML, mais aussi le type de contenu : « application/xhtml+xml ». La globalité de la page doit être conforme à la syntaxe XML et ne doit pas ajouter de balises personnelles sans changer d'espace de noms (exemple : <mabalise></mabalise>), sans quoi la page sera en erreur et le navigateur ne sera pas capable de l'afficher. C’est le mode le plus strict qui impose d'avoir une syntaxe quasi parfaite. [Wikipédia]

3.1.2 Jeu de caractères Si le navigateur ne peut détecter le jeu de caractères de la page qu'il tente de visualiser, celui-ci affichera une page avec des caractères illisibles et incompréhensibles. Spécifier le jeu de caractères est donc important ! L'encodage de caractères est un processus qui à chaque caractère associe un code que la machine peut comprendre. Le codage le plus utilisé de nos jours est l'ISO-8859-1 qui permet d'encoder 191 caractères de l'alphabet latin. Ensuite vient l'ISO-8859-15, qui permet, comme le précédent d'encoder l'alphabet latin mais permet également d'encoder des caractères fusionnés, €, ...



2015-2016




5


Aujourd'hui, l'internationalisation devient de plus en plus importante. Donc un jeu de caractères aussi restreint que l'ISO-8859-1 ne permet pas d'afficher des caractères dans d'autres langues tels que le japonais, etc. Pour pallier à ce problème, la norme Unicode a été inventée et donne place à l'UTF-8. D'un point de vue général, peu importe l'encodage utilisé, dans un souci d'interopérabilité, il vaut mieux toujours utiliser les entités HTML. Il existe 2 méthodes qui peuvent être utilisées conjointement : 1er méthode : <?XML version="1.0" encoding="utf-8" ?>

2ème méthode : <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

L'encodage UTF-8 est de plus en plus courant et a tendance à être recommandé. Si toutefois vous ne voulez pas l'utiliser, vous pouvez choisir l'encodage actuel qui est le Latin 1 (ISO-8859-1). Mais sachez que la table ISO-8859-1 ne contient que les caractères anglais, donc il vous faudra encoder les caractères absents de cet alphabet à l'aide d'entités HTML.

3.2 Les balises courantes en XHTML

3.2.1 Définitions Les éléments bloc et les éléments enlignés Les éléments bloc sont utilisés pour structurer un document et peuvent contenir d'autres éléments en bloc et/ou enlignés et/ou des données. Ils servent de conteneur. Les éléments enlignés sont utilisés pour donner une sémantique spécifique à quelques mots d'une phrase (sur une ligne). Un élément enligné ne peut pas contenir un élément en bloc. Les attributs Ce sont des propriétés qui caractérisent des balises comme par exemple l'attribut name, id, ... <input type="text" name="username" />

Un élément Un élément est l'ensemble formé par une balise, ses attributs et ses données. <a href=" http://users.polytech.unice.fr/~rey/" > Le site de Gaetan Rey </a>

3.2.2 Type : enligné : qui est relatif à une ligne Balise <a> : liens Elle sert à insérer un lien ou un point d'ancrage. Un lien : <a href=" http://users.polytech.unice.fr/~rey/"> Le site de Gaetan Rey </a>

Un point d'ancrage : <a href="#intro">Introduction</a>  <a id="intro"></a>

Balise <br /> : saut de ligne Elle provoque un saut de ligne (balise souvent déconseillée). Du texte



2015-2016




6


<br /> La suite ...

Balise <cite> : citation Elle insère une citation. Quand le sage désigne la lune, l'idiot regarde le doigt. <cite>Proverbe chinois</cite>

Balise <code> Elle insère un bloc de code. <code> echo 'ceci est du code'; </code>

Balise <em> : mise en emphase Elle met en emphase du texte. Le site de <em>Gaetan Rey </em>!

Balise <img> : images Elle permet l’insertion d’une image. <img src="photo.png" alt="La photo de Gaetan Rey" />

Balise <q> : citation Elle insère une citation courte. <q>Quand le sage désigne la lune, l'idiot regarde le doigt.</q>

Balise <span> Couplée à du CSS, la balise span met en forme du texte. <span style="text-decoration:line-through">Du texte barré</span> et du texte normal.

Balise <strong> : mise en emphase forte Elle permet une mise en valeur forte du texte. Le site de <strong>Gaetan Rey</strong>.

3.2.3 Type : bloc : qui est relatif à plusieurs lignes ou à un bloc Balise <div> : division du document Elle joue le rôle de "conteneur" en permettant de structurer la page en plusieurs blocs. <div> <div> Le haut de page </div> <div> Le contenu principal de la page </div> <div> Le bas de page </div> </div>



2015-2016




7


Balises <h1> à <h6> : entête de paragraphe (titre) Elle définit un entête de paragraphe de niveau X (X pouvant aller de 1 à 6). La balise <h1> ne doit être utilisée normalement qu'une seule fois. <h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6>

Balise <hr /> : trait horizontal Elle insère un trait horizontal. <p>Premier paragraphe</p> <hr /> <p>Deuxième paragraphe</p>

Balise <p> : paragraphe Elle définit un paragraphe. <p>Un paragraphe</p>

Balise <pre> Elle définit un bloc où le texte sera affiché tel qu'il figure dans le fichier source. <pre> Les espaces sont pris en compte !!! Yes !! </pre>

Balises <ul> et <ol> : liste Elle définit une liste à puces. La balise ul étant une liste à puces. La balise ol étant une liste ordonnée. Chaque élément de la liste est dans une balise li. <ul> <li>Menu</li> <li>Entrée</li> <li>Plat principal</li> <li>Plat secondaire</li> <li>Dessert (important)</li> </ul>

3.3 Les règles de la syntaxe XHTML

3.3.1 Bonne imbrication des balises Les balises doivent être correctement imbriquées selon leur hiérarchie. Incorrect: <h1>Vive la licence professionnelle <strong>de nice</h1></strong>

Correct: <h1>Vive la licence professionnelle <strong>de nice</strong></h1>



2015-2016




8


3.3.2 Nom et attribut des balises en minuscules Les noms et les attributs des balises doivent s'écrire tout en minuscules. Incorrect: <H1>Vive la licence <EM> professionnelle </EM> de nice </H1>

Correct: <h1>Vive la licence <em> professionnelle </em> de nice </h1>

3.3.3 Balises "vides" avec terminaison Les balises "vides" doivent se terminer par />. Par balises "vides", on entend les balises tels que <br />, <hr />, <input ... />, .... Incorrect: <input type="text">

Correct: <input type="text" />

3.3.4 Balise de fermeture obligatoire pour les éléments non vides Les éléments non vides doivent se terminer obligatoirement par leur balise de fermeture. Incorrect: <p>Vive la licence <p> professionnelle de nice

Correct: <p>Vive la licence !!</p><p> professionnelle de nice </p>

3.3.5 Les valeurs des attributs doivent être entre guillemets Incorrect: <p class=title> Vive la licence professionnelle de nice </p>

Correct: <p class="title"> Vive la licence professionnelle de nice </p>

3.3.6 Tout attribut doit avoir une valeur explicite Incorrect: <input type="checkbox" checked />

Correct: <input type="checkbox" checked="checked" />

3.3.7 L'attribut "id" complète "name" L'attribut HTML id est utilisé par la fonction JavaScript document.getElementById(). C'est celui que nous utiliserons, plutôt que l'attribut name qui est destiné à tout langage côté serveur. Pour des raisons de compatibilité avec les anciens navigateurs, il était conseillé d'utiliser encore les deux et non seulement l'attribut id (mais c’est de moins en moins vrai). L'attribut name sera supprimé dans les versions futures du XHTML concernant les balises a, applet, form, frame, iframe, img et map. Correct: <input type="image" alt="" src="dvp.png" name="dvp" />

3.4 Les obligations de l'XHTML

3.4.1 Attribut "alt" : texte alternatif Pour des raisons d'accessibilité, il est désormais obligatoire de spécifier un texte alternatif qui décrit l'image en question. Ce texte alternatif s'affiche à la place de l'image quand celle-ci, pour une raison ou pour une autre, ne peut pas s'afficher. Une infobulle apparaît aussi lors du survol de l'image. Incorrect : <img src="logo.png" />

Correct : <img src="logo.png" alt="Logo de l’IUT" />



2015-2016




9


3.4.2 Encoder les caractères spéciaux Il est maintenant nécessaire d'encoder les caractères spéciaux en entités HTML. Incorrect : http://www.mon-site.com/index.php?page=home&id=3

Correct : http://www.mon-site.com/index.php?page=home&id=3

Voici une liste (non exhaustive) des caractères à encoder :

Caractère Code & & < < > >

espace insécable " " ' '

3.5 A vous de jouer!

3.5.1 Document XHTML Valide Soit le code XHTML suivant: <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <title>1+1 > 2</title> </head> <body> <h2>premier exemple</h2> <table widht="80%"> <tr colspan="2"><td>cellule1.1</td> <td>cellule1.2</td></tr> <td>cellule2.0</td><td/> </table> <h2>2eme & 3eme exemple</h2> <ol> <li>1</li><ul> <li>2</li></ul> <vi>3</vi> <ol> <br/> <body/> </html>

Corrigez ce code pour qu’il soit valide en XHTML 1.0 transitionnal puis en XHTML 1.1. Une fois le code corrigé, vérifiez votre résultat avec les validateurs ce trouvant ici ou celui ce trouvant là pour vérifier que celles-ci sont bien conforme aux normes du W3C.


http://validator.w3.org/

http://www.validome.org/


2015-2016




10


3.5.2 Les balises En vous inspirant des figures ci-contre, écrivez deux pages XHTML qui présentent l’ensemble des balises décrites dans les sections ci-dessous. Une première page en XHTML 1.0 (à vous de choisir le type qui vous convient le mieux) pour les balises de mise en formes en-ligne et une deuxième page en XHTML 1.1 pour les balises de mise en forme en bloc. De manière à ne pas perdre trop de temps, vous pouvez ignorer la colonne du centre.

Vous ferrez valider vos pages par le validateur indiqué précédemment.

Que dire sur les balises <u>, <s> et <strike> en XHTML 1.1 ?

3.6 HTML5 Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le W3C officialise HTML5 en intégrant en son sein ce groupe de travail. À partir de là, un gros travail a été réalisé afin de permettre à HTML 5 d'être rétro-compatible avec ses ancêtres, ce qui a quelque peu ralenti son développement.

3.6.1 Les nouveautés Une grande nouveauté annoncée au niveau structurel des éléments est le remplacement des notions de type "en ligne" et "bloc" par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories.

On trouve donc maintenant les 7 catégories suivantes : Metadata content, Flow content, Sectioning content, Heading content, Phrasing content, Embedded content, Interactive content.

3.6.2 Le Doctype Il est simplifié et son rôle sert uniquement d'éviter un rendu en mode de compatibilité par les navigateurs:

<!DOCTYPE html>

3.6.3 Une orientation sémantique : HTML5 s'oriente vers ce qui semble actuellement être le futur des pages Web : il n'y aura pas que du multimédia, il y aura aussi de la sémantique. Deux voies sont explorées dans ce standard : l'utilisation de balises sémantiques pour structurer la page et les microdonnées. Consultez le document de Thibaut Cuvelier pour plus de détail.

3.6.3.1 Section L'élément <section> représente un document générique ou une section d'une application. Par exemple, il pourrait s'agir d'un titre et du texte subordonné, comme toute section du présent article.


http://tcuvelier.developpez.com/tutoriels/web-semantique/html5-microdonnees/introduction/


2015-2016




11


3.6.3.2 Article L'élément <article> représente une partie qui se suffit à elle-même d'une page, qui pourrait être redistribuée telle quelle, sans ce qui l'entoure, comme un post sur un blog ou un forum.

3.6.3.3 Aside L'élément <aside> correspond à des éléments qui sont reliés au contenu mais sans en faire partie. Dans une revue, cela correspond au texte mis dans les colonnes sur les côtés, par exemple.

3.6.3.4 Header L'élément <header> représente l'en-tête d'une section ou d'une page.

3.6.3.5 Footer L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales…etc.

3.6.3.6 Nav L'élément <nav> est une section particulière d'une page, celle qui contient les liens dits de navigation. Il n'est pas nécessaire de mettre tous les liens d'une page dans une telle balise, seuls les plus gros blocs de liens devraient y trouver place.

3.6.3.7 Dialog L'élément <dialog> peut être utilisé pour définir une conversation.

3.6.3.8 Figure L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <legend>.

3.6.4 Les nouveaux éléments orientés multimédia : On verra plus en détails ces balises dans le dernier cours/TP de ce module.

3.6.4.1 Audio et vidéo Les éléments <audio> et <video> ont été introduits afin de pouvoir intégrer des éléments sonores et des vidéos directement via HTML5 et donc pris en charge naturellement par les navigateurs sans passer par des plugins tel que Flash ou Silverlight. Vous trouverez plus de détail sur ces balises audio et vidéo chez alsacreations.

3.6.4.2 Canvas L'élément <canvas> a été introduit afin de pouvoir manipuler des éléments graphiques 2D depuis Javascript. Il permet de mettre en place une zone pour les dessins ou les applications graphiques.

3.6.4.3 Glisser-déposer L'attribut draggable permet de rendre un élément déplaçable.

3.6.4.4 Contenteditable Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu et manipuler le balisage.

3.6.5 Les sites web hors-ligne et le « storage Une API permettra d'activer les applications Web hors connexion. De son côté, la fonctionnalité storage va permettre de simplifier le processus de sauvegarde et de persistance des données. Cette fonctionnalité est similaire


http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html


2015-2016




12


aux cookies de session HTTP et permet de sauvegarder les données voulues dans une "base de données" coté client (c'est à dire au niveau du navigateur). Pour plus de détail, je vous laisse consulter le document de Jerome Debray.

3.6.5.1 innerHTML C'est une manière facile d'analyser et de sérialiser un document HTML ou XML. Cet attribut n'était précédemment disponible que sur HTMLElement dans les navigateurs Web et ne faisait partie d'aucun standard.

3.6.6 Géolocalisation L'API Géolocalisation introduite par le W3C permet aux pages web d'interroger le navigateur sur la position de l'utilisateur. Plus de détail dans le document de Jerome Debray.

A partir de maintenant et pour tous les exercices de ce cours/TPs et de ceux qui suivront, vous n’écrirez plus que des pages XHTML 1.1 ou XHTML 5.

4 CSS Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

L'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (x)html. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples : • La structure et la présentation du document sont gérées dans des fichiers séparés. • La conception d'un document se fait sans se soucier de la présentation. • La présentation est uniformisée (plusieurs pages (X)HTML peuvent faire référence aux mêmes feuilles de

styles). • Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour

l'impression et une pour la lecture à l'écran. • La lisibilité des pages (X)HTML est amélioré puisqu’elles ne contiennent plus de balises ni d'attributs de

présentation. Voici plusieurs site qui partage le même fichier .html et ne diffèrent que par leur CSS :


http://debray-jerome.developpez.com/articles/comprendre-le-storage-en-html5/

http://debray-jerome.developpez.com/articles/l-api-geolocalisation-en-html5/


2015-2016




13


4.1 Bien débuter avec le CSS

4.1.1 Un petit exemple Avant en html on écrivait dans le fichier .html <body bgcolor="#CCCCCC"> … </body>

Maintenant en utilisant CSS, on écrit dans le fichier .html. <body> … </body>

Et dans le fichier .css

body { background-color: #CCCCCC; }

Vu que ça fait la même chose et que c’est plus long à écrire, quel est l’avantage me diriez-vous ? L’avantage est triple :

• Le fichier .css peut être partagé par plusieurs fichiers .html, donc non ce n’est pas forcément plus long à écrire.

• Puisque les fichiers partagent le même fichier .css, il garde la même chartre graphique. Cela garantit donc d’avoir une cohérence d’une page à l’autre pour tout mon site web.

• Le jour où on veut modifier l’esthétique du site web, il suffit de mettre à jour le fichier .css et toutes les pages du site web seront mises à jour.

4.1.2 Comment utiliser CSS Il est possible de définir des commandes CSS dans une page html mais nous vous déconseillons fortement cette solution car elle annule une grande partie des bénéfices du CSS. Voici comment indiquer que votre code CSS se trouve dans un fichier séparé <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

Une autre solution est d’utiliser cette ligne. <head> <style type="text/css" title="currentStyle">@import "style.css"; </style> </head>

4.1.3 La syntaxe de CSS De manière générale, la syntaxe du CSS est très simple. Elle correspond au schéma suivant : selecteur { propriété:valeur }

Chaque sélecteur (ici body) peut avoir plusieurs propriétés avec des valeurs indépendantes, il faut pour cela séparer les propriétés par un « ; ». body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; }

Vous pouvez également insérer des commentaires dans votre code avec la syntaxe suivante : /* Commentaire ici */



2015-2016




14


4.1.4 La notion d’héritage Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? Car si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site prendra comme police Trebuchet MS, inutile de le redéfinir à chaque élément. Autre exemple, si vous définissez la balise body avec une couleur rouge (comme le montre la commande suivante), les autres éléments auront une couleur rouge par défaut : body { color: #FF0000; }

Si vous souhaitez une autre police pour les balises <h1> par exemple, il suffit de la définir à nouveau. h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;}

Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un li qui serait contenu dans une sous-liste de type ol. ul > li { margin-left: 1em; }

4.1.5 Combinaison de sélecteurs Vous pouvez aussi combinez les éléments HTML qui regroupent les mêmes caractéristiques. Voici un exemple permettant de modifier en même temps l’ensemble des balises <hx> h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }

En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur. Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML. CSS3 introduit des nouveaux sélecteurs que nous verrons plus loin dans ce TP.

Motif Signification * Tout élément X Tout élément de type X

X Y Tout élément Y descendant de l’élément X (Y est inclus dans X mais pas forcément au premier niveau (Y peut être inclut dans Z lui-même inclus dans X)).

X > Y Tout élément Y enfant de l'élément X (Y est inclus dans X au premier niveau). X:first-child Tout élément X premier enfant de son élément parent. X:link Tout élément X qui est une ancre dans la source dont le lien n'a pas été visité. X:visited Tout élément X qui est une ancre dans la source dont le lien a été visité. X + Y Tout élément Y immédiatement précédé par un élément X. X[att] Tout élément X avec l'attribut "att" (quelles qu'en soient les valeurs). X[att="val"] Tout élément X dont l'attribut "att" a exactement la valeur "val".

X[att~="val"] Tout élément X dont l'attribut "att" a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est "val".

X[att|="val"] Tout élément X dont l'attribut "att" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "val".

X#val Tout élément X dont l'ID est "val".



2015-2016




15


X:lang(l) Tout élément de type X qui emploie une langue l (la détermination de cette langue est spécifique au langage du document).

X:active Tout élément X activé par l'utilisateur (quand il clique dessus). X:hover Tout élément X survolé par l'utilisateur (quand le curseur de la souris survole l’élément).

X:focus Tout élément X sélectionné via la touche de tabulation par l'utilisateur (ou dans certains cas lorsque l'on clique dessus).

Pour plus d’information sur les sélecteurs, je vous conseille les pages suivantes : • Les sélecteurs du site www.yoyodesign.org • CSS 2.1 selectors, Part 1 écrit par Roger Johansson dont une traduction est disponible ici. • Cascade CSS et priorité des sélecteurs … qui explique l’ordre de priorité des sélecteurs et l’utilisation

de !important.

4.1.6 La notion de classe, de pseudo classe et d’id Les classes CSS ne se limite pas à la redéfinition des balises html, on peut également créer des classes qui pourront être appliquées à une section html à l’aide de l’attribut class comme le montre l’exemple ci-dessous : <h1 class="nomDeLaClasse"> mon texte </h1>

On notera que la définition d’une classe commence par un « . ». .nomDeLaClasse { font-size: small; color: #008080; font-weight: bold; }

Les pseudo-classes HTML et CSS ont un mécanisme similaire aux classes, mais ad-hoc, pour faire le lien avec certaines fonctionnalités spécifiques, et en particulier les liens. Le HTML a deux utilisations pour l'élément <a> : faire un lien et poser une ancre. S'il est légitime de changer l'apparence d'un lien, il n'est probablement pas souhaitable que les ancres apparaissent de la même manière. Le sélecteur a:link désigne un lien par opposition à une ancre. Vous avez sans doute remarqué que certains navigateurs affichent de couleur différente les liens déjà visités. CSS permet de changer ça en utilisant un sélecteur a:visited. Attention, :visited s'utilise à la place de :link : un lien déjà visité n'est pas reconnu par a:link. Dans le même genre d'idée, il existe la pseudo-classe :hover, qui désigne un élément que l'utilisateur « touche », avec le pointeur de la souris par exemple. On trouve également les pseudo-classes :focus et :active, qui ont des significations proches. Le sélecteur id Il a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères. On trouvera par exemple dans la page html : <div id="container"> <div id="intro">

Et dans le fichier .css

#container { background: url(/001/zen-bg.jpg) no-repeat top left; padding: 0 175px 0 110px;


http://www.yoyodesign.org/doc/w3c/css2/selector.html

http://www.yoyodesign.org/

http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/

http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php

http://openweb.eu.org/articles/cascade_css


2015-2016




16


margin: 0; position: relative; } #intro { min-width: 470px; }

De plus le sélecteur id est utilisé par le JavaScript (nous verrons cela plus tard dans la section JavaScript).

4.1.7 Les balises structurales Les balises <div> et </div> sont utilisées pour appliquer un style de type mise en page à un contenu alors que l’on réserve les balise <span></span> pour faire une emphase (gras, italique, …). Dans le fichier .html <div class="container"> <span class="italic">Texte en italique</span> </div>

Dans le fichier .css .container { padding: 0 175px 0 110px; margin: 0; position: relative; } .italic{ font-style: italic; }

4.2 Petit exercice avant de continuer Soit le fichier suivant que vous nommerez TP2_ex4.2.html.

<html><head> <title>Jardin Zen CSS</title> </head> <body bgcolor="#FFFFCC" text="#000099" link="#663399" vlink="#993333" alink="#FF9933"> <h1><font face="French Script MT" size="7" color="#006600">Jardin Zen CSS</font></h1> <h2><font size="5" color="#669933"><b><u>La beauté de la conception CSS</u></b></font></h2> Une demonstration de ce qu'on peut accomplir lorsqu'on utilise les CSS pour la conception web. Sélectionez n'importe quelle feuille de style listée pour charger le résultat sur cette page. <br> Téléchargez les fichiers d'exemple <a href="xxx.html" title="Clique-droit pour sauver ce document sur votre disque dur." style="color: #B7A5DF"><b>html</b></a> et <a href="xxx.css" title="Clique-droit pour sauver ce document sur votre disque dur." style="color: #B7A5DF"><b>CSS</b></a> <h3><i><font face="Georgia" color="#7d775c">Le chemin vers l édification</font></i></h3>



2015-2016




17


Les reliques passées des sélecteurs spécifique aux navigateurs, des DOMs incompatibles, et du manque de support des CSS encombrent un long chemin sombre et morne. <br><br> Aujourd'hui, nous devons nous clarifier l'esprit et nous débarassez des pratiques passées. La révélation de la véritable nature du Web est maintenant possible, grâce aux efforts infatigables des gens du W3C, du WaSP et des créateurs des principaux navigateurs. <br><br> Le Jardin Zen CSS vous invite à vous relaxer et à méditer sur les leçons importantes des maîtres. Commencez à voir clairement. Apprenez à utiliser ces techniques (bientôt consacrées par l'usage) de manière neuve et revigorante. Ne faites qu'Un avec le Web. <br></body></html>

Ouvrez ce fichier via votre navigateur. Celui-ci s’affiche t’il correctement ?

Convertissez ce fichier en XHTML 1.1 et faites en sorte qu’il utilise un fichier CSS pour sa mise en forme (Vous écrirez également ce petit fichier CSS). Faites quelques choses qui ressemble le plus à ce fichier. Nous ne nous intéressons pas à l’esthétique pour le moment. Ce fichier est extrait du site CSS Zen Garden dont nous vous avons montré des captures d’écran un peu plus tôt. Attention vous devrez avoir un fichier xhtml 1.1 et un fichier css valide.

4.3 CSS, aspects avancés !

4.3.1 Les marges Comme vous l'avez deviné, les marges permettent de définir l'espace entre les éléments HTML (haut, gauche, bas et droite). Il existe plusieurs types de marges comme le montre la figure ci-dessous.

• margin : la marge au sens commun • padding : la distance entre le bord d'un élément HTML et son contenu

Il existe 2 méthodes pour définir les marges : • Soit directement, les valeurs définissent l'espace entre les éléments HTML dans cet ordre (haut, droite,

bas, gauche) margin: 10px 10px 10px 10px;

• Soit élément par élément à l’aide des propriétés suivantes : margin-top, margin-left, margin-right, margin-bottom (idem pour padding)

margin-left:110px;

Il existe 3 méthodes pour définir la taille des marges : • Espace en pixels (exemple 10px) • Pourcentage (70%) • auto (réglage automatique)

4.3.2 Mettre en forme un texte Voici les principales propriétés pour mettre en forme un texte avec entre parenthèse les types de valeurs qu’elles acceptent :

• color: Gestion de la couleur du texte (nom de la couleur, nombre hexadécimal, Code RGB) color: red; color: #FF0000;



2015-2016




18


color: rgb(255,0,0);

• letter-spacing: Espace entre les lettres (normal, valeur en px) letter-spacing: 1; letter-spacing: 5px ;

• text-align: Alignement d'un texte (un des 4 alignements donnés en exemple) text-align: left; text-align: right; text-align: center; text-align: justify;

• text-decoration: Habillement d'un texte (une des valeurs suivantes : none, underline, overline, line through, blink)

text-decoration:underline; text-decoration:overline; text-decoration:line-through; text-decoration:blink;

• text-indent: Espace avant un texte (valeur en px, pourcentage) text-indent: 10px;

• text-transform: Transformation du texte (une des valeurs suivantes : none, capitalize, lowercase, uppercase)

text-transform: capitalize; text-transform: uppercase; text-transform: lowercase;

• white-space: Contrôle des espaces blancs (une des valeurs suivantes : normal, pre, nowrap) white-space: normal; white-space: pre; white-space: nowrap;

• word-spacing: Espace entre les mots (une des valeurs suivantes : normal, valeur en px) word-spacing: 5px;

4.3.3 Gestion des différentes polices Voici les principales propriétés pour gérer la police d’un texte avec entre parenthèse les types de valeurs qu’elles acceptent :

• font-family: Famille de police (Nom de la famille, Famille générique). Remarques : les noms de familles contenant des espaces doivent être mis entre guillemets. Plusieurs polices peuvent être spécifiées par ordre de préférences.

font-family: Verdana, sans-serif;

• font-size: Taille de votre police de caractère (une des valeurs suivantes xx-large,x-large, larger, large, medium, small, smaller, x-small, xx-small, length, %)

font-size: 12;

• font-style: le style de l'écriture (normal, italique, oblique) font-style: italic ;

• font-variant: une variante par rapport à la normale (normal ou small-caps) font-variant: small-caps ;

• font-weight: l'épaisseur de la police (normal, bold, bolder, lighter, valeur numérique)

font-weight: bold; font-weight: 200;



2015-2016




19


4.3.4 Fond de la page Vous pouvez définir directement en CSS le fond d'une page HTML et même une image.

• background-color : la couleur du fond (comme color avec transparent en plus) background-color: #FFFFCC ;

• background-image : pour mettre une image en fond (url ou none) background-image: url(fond.jpg);

• background-attachment : permet de définir si une image reste fixe ou suit le mouvement de la page lors du scroll (fixed, scroll)

background-attachment: fixed ;

• background-repeat : permet de placer une image en fond de page qui va être définie suivant les valeurs adoptées (no-repeat, repeat, repeat-x, repeat-y)

background-repeat: no-repeat ;

• background-position : la position de l'image de fond définie avec précision (top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos). Remarques : Les unitées possibles sont : cm, em, in, mm, px, pt, pc. Il est possible de combiner des valeurs de pourcentage avec des valeurs de longueur (ex. 50% 2cm).

background-position: top left ;

4.3.5 Les bordures • border-color: Couleur de la bordure (comme pour background-color)

border-color: red green blue; /* 3 couleurs, le top en rouge, le right et le left en vert, le bottom en bleu. */

• border-style: défini des effets simples sur la bordure (dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid)

border-style: dashed;

• border-width: Taille de la bordure (Length, Thin, Medium, Thick)

border-width: thin ;

Il est possible de définir seulement un des quatre côtés de la bordure en utilisant left, top, right et bottom et en les combinant avec les propriétés précédentes border-top-style: dashed; border-left-color: red;

4.3.6 Les listes Vous pouvez définir une apparence pour vos liste (balise HTML <li> et </li>)

• list-style-image: remplace la puce par une image list-style-image: URL(images/star.png);

• list_style_position: Position de votre liste par rapport au texte (inside, outside, inherit) list-style-position:outside ;

• list_style_type: Choix du type de la puce (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none).

list-style-type:upper-alpha ;



2015-2016




20


4.3.7 Définition des Largeur, Hauteur, Position et autres Il est souvent essentiel de définir les dimensions des cadres et autres éléments que l’on utilise de manière à garder une certaine utilisabilité et un côté esthétique aux pages que l’on crée.

• height : la hauteur d'un élément (auto, valeur en px, %) height:30px;

• max-height : la hauteur maximum d'un élément (none, valeurs en px, %) max-height: 75%;

• min-height : la hauteur minimale à un élément (valeurs en px, %) min-height: 5px;

• width : la largeur d'un élément (auto, valeur en px, %) width:30px;

• max-width : la largeur maximum d'un élément (none, valeurs en px, %) max-width: 75%;

• min-width : la hauteur minimale à un élément (valeurs en px, %)

min-width: 7%;

• line-height: la hauteur d'une ligne (normal, nombre, valeurs en px, %) line-height: normal ; line-height: 1.7 ;

• Position : la position des éléments dans une page HTML (static, relative, absolute, fixed) Remarque : La propriété position est généralement utilisée pour la création de calques (Layer).

position: absolute; top: 10px; right: 10px;

• Clear: utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. (none, Both, left, right)

clear: right ;

• Clip : utilisée pour contrôler la visibilité des éléments (<shape>, auto, inherit) clip: rect(10px, 20px, 20px, 10px);

• Cursor définit le curseur de la souris à afficher lorsque le pointeur survole un élément. (auto, crosshair, default, pointer, move, e-resize, ne-resize, …)

cursor: pointer;

• display : définit le type de rendu de boîte à utiliser pour un élément donné (<display-value>, inherit) display: block ;

• float : définit le flottement d'une boîte à gauche, à droite ou pas du tout. Remarque : on peut l'appliquer à tous les éléments générant des boîtes sauf si elles sont en position absolue. (auto, hidden, visible, scroll)

float:right;

• overflow : permet de gérer les dépassements de blocs (calque, champ formulaire...) (visible, hidden, scroll, auto, inherit)

overflow: auto;

• visibility: rendre un élément visible ou pas (visible, hidden, collapse, inherit) visibility: visible;

• Z-Index : permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur) (auto, nombre)

Z-index : auto;



2015-2016




21


4.4 A vous de jouer !

4.4.1 Mise en forme d’un document (conseillé) Soit le fichier XHTML suivant :

<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>CSS</title> <link rel="stylesheet" media="screen" type="text/css" title="Exercice" href="home.css" /> </head> <body> <h1>Les CSS</h1> <p>Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le <a href="http://www.w3.org/">W3C</a>. </p> </body> </html>

Cette page a actuellement le rendu suivant :

Créer une feuille de style sui donnera l’aspect suivant à la page (attention vous ne devez pas modifier la page précédente) :

4.4.2 Sélecteurs CSS Soit le code XHTML suivant: <?xml version="1.0" encoding="utf-8" ?>



2015-2016




22


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>CSS</title> <style type="text/css"> body {color: blue; } h1 {color: green; } .h1 {color: blue; } ol li {color: purple;} ul {color: black; } h1+ul>li+li {color: orange;} h1+ul>li {color: red; } h1+ul {color: blue; } </style> </head> <body> <h1>texte [1]</h1> <ul> <li>texte [2]</li> <li>texte [3]</li> </ul> <h2>texte [4]</h2> <ul> <li>texte [5]</li> <li class="h1">texte [6] <ol> <li>texte [7]</li> </ol> </li> </ul> </body> </html>

Indiquez pour chaque nombre entre crochet la couleur dans laquelle il s’affiche (sans utiliser votre navigateur pour vous donner la réponse).

4.4.3 Sélecteurs CSS (Conseillé) Soit le code XHTML suivant: <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Exercice</title> <style type="text/css">@import url(style.css); </style> </head> <body> <h1>[1]</h1> <h1>[2]</h1> <ul> <li>[3]</li> <li><b>[4]</b></li> <li>[5]</li>



2015-2016




23


</ul> <h2>[6]</h2> <h2 class="b"><b class="h2">[7]</b> <b>[8]</b> [9]</h2> <h2>[10]</h2> <ul> <li><b>[11]</b></li> <li>[12]</li> </ul> </body> </html>

Et soit la feuille de style suivante (style.css): h1,h2 {color: blue} h1+h1 {color: red} h2+h2 {color: red} li {color: red} li b {color: green} li+li {color: blue} h2.b {color: blue} b.h2 {color: green} h2>b {color: red} h2+ul > li+li {color: black} h2+h2 > li b {color: yellow}

Indiquez pour chaque nombre entre crochet la couleur dans laquelle il s’affiche (sans utiliser votre navigateur pour vous donner la réponse).

4.4.4 Sélecteurs (Optionnel) <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Exercice</title> <style type="text/css"> </style> </head> <body> <p><a href="#">blue</a></p> <ul> <li><a href="#">red</a></li> <li><a href="#">green</a></li> <li><a href="#">orange</a></li> </ul> <p><a href="#">pink</a></p> <ul> <li><a href="#">gray</a></li> <li><a href="#">cyan</a></li> <li><a href="#">magenta</a></li> </ul> <p><a href="#">yellow</a></p> </body> </html>

Ecrivez une feuille de style permettant d’afficher les liens présents dans la page avec les couleurs indiquées.



2015-2016




24


4.4.5 Cadres et colonnes Créer une page xhtml 1.1 (et son .css) sur un sujet de votre choix dont la structure est représentée par la figure ci-dessous.

• Le cadre A (cadre de titre) devra prendre la largeur totale de l’écran. • Les cadres B (menu) auront une largeur fixe et une hauteur qui dépendra du contenu. Ils seront alignés à

gauche et s’empileront les uns en dessous des autres. Il peut y avoir de 1 à n cadre B et on doit pouvoir en ajouter un sans éditer le fichier .css.

• Les cadres C sont identiques aux cadres B sauf qu’ils sont alignés à droite. • Le cadre D devra prendre toutes la place restante. Sa largeur sera donc variable pour s’adapter à la taille de

l’écran. On pourra lui fixer une taille minimum égale à la largeur de B+C. La hauteur de D dépendra de son contenu.

4.4.6 Pour aller plus loin : Cadres et colonnes (Optionnel) Ne faites pas cet exercice dans un premier temps. Vous reviendrez le faire s’il vous reste du temps à la fin des séances de ce cours/TP.

Sans modifier le fichier XHTML 1.1 précédent, faite en sorte que les cadre C et B ne forme plus qu’une même colonne. Vous devez obtenir le rendu suivant.

4.5 CSS 3 Nous allons maintenant étudier quelques fonctionnalités introduites dans la version 3 de CSS.

4.5.1 Les nouveaux sélecteurs CCS3 introduit de nombreux nouveaux sélecteurs très pratiques. On trouve en particulier des sélecteurs d'attributs, des combinateurs d'adjacence directe, des pseudo-classes et des pseudo-éléments. Plutôt qu’un long discours, je vous laisse consulter la page de Jérôme Debray qui présente cela très bien.


http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/


2015-2016




25


4.5.2 Les transformations CSS3 introduit également les transformations en 2 dimensions via la propriété « transform ». Cette dernière est accompagnée d’un ensemble de fonctions permettant de définir le type de la transformation. L’article de Geoffrey Crofte présente cela, je vous laisse le consulter.

4.5.3 Les transitions CSS L’objectif des transitions CSS est de permettre de faire des animations dans votre page web sans avoir recours à du Javascript. Vous trouverez la description de cette fonctionnalité sur le site du W3C. Comme de nombreuses nouveautés, ces fonctionnalités ne sont pas toujours directement utilisables et doivent être préfixées. Pour savoir si vous aurez besoin de préfixer les mots clé CSS pour votre navigateur, consultez ce tableau.

Le principe d'une transition CSS3 est de permettre de visualiser le changement en deux états d’une propriété CSS. On peut ainsi changer la couleur d’un texte, la dimension d’un élément, animé un menu … Une transition est déclenchée par un évènement qu’il provienne d’une une pseudo-classe (:hover, :focus ou :active) ou de JavaScript.

La définition une transition, nécessite de spécifier la ou les propriété(s) à animer ainsi que la durée de l'animation.

Examinons et testons un exemple simple :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Exemple de transition </title> <style type="text/css"> a { font-size: 40px; color: blue; text-decoration: none; transition-property: color; transition-duration: 1s; } a:hover, a:focus { color: red; } </style> </head> <body> <p><a href="#">Changement de couleur lors du survol</a></p> </body> </html>

Comme on peut le voir, cet exemple met en œuvre les 2 propriétés essentielles pour faire une transition : transition-property et transition-duration. Il existe également 2 autres propriétés transition-timing-function et transition-delay ainsi qu’une notation raccourcie transition.

transition-property Spécifie la ou les propriétés CSS impactées par la transition. On sépare les noms des

propriétés par des virgules. La valeur par défaut est all. La valeur none annule les transitions.

transition-duration Spécifie la durée de la transition. Si on a plusieurs propriétés, on peut utiliser plusieurs valeurs séparées par des virgules. Attention de ne pas oublier l’unité de temps.


http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html

http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html

http://www.w3.org/TR/css3-transitions/

http://caniuse.com/%23search=transitions

http://www.w3.org/TR/css3-transitions/%23properties-from-css-

http://www.w3.org/TR/css3-values/%23time


2015-2016




26


transition-timing-function

Spécifie la fonction de transition à utiliser. Soit vous définissez votre propre fonction à l’aide d’une courbe de bézier, soit vous utilisez les fonctions prédéfinies

ease : Rapide sur le début et ralenti sur la fin. linear : La vitesse est constante sur toute la durée de l'animation. ease-in : Lent sur le début et accélère de plus en plus vers la fin.

ease-out : Rapide sur le début et décèlere sur la fin. ease-in-out : Le départ et la fin sont lents.

transition-delay Spécifie le décalage (retard ou l'avance) entre le déclenchement de l’évènement et le début

de la transition. Par défaut la valeur est nulle. On peut définir une valeur positive ou négative.

transition

La notation raccourcie consiste à spécifier des transitions simples séparées par des virgules. Une transition simple est constituée de la manière suivante :

[none | <transition-property>] <time> <transition-timing-function> <time>

4.5.4 Exercice (optionnel) Ecrivez une page web contenant 2 lignes de 3 images (150px sur 150px). Lorsque la souris survole une image de la ligne supérieure, l’image verra sa taille augmenter (par exemple 250px sur 250px). Par contre, si la souris survole une image de la ligne inférieure, une légende (en blanc sur fond noir) apparaitra sur l’image survolée.

4.5.5 Les ombres CSS 3 permet également d’ajouter des ombres soit à des blocs (box-shadow), soit à du texte (text-shadow).

4.5.5.1 Sur les boites …

h-pos Décalage par rapport à la position de l’élément à ombrer sur l’axe des X. (obligatoire)

em, ex, ch, rem, in, pt, pc, cm, mm, px (la valeur peut être négative)

v-pos Décalage par rapport à la position de l’élément à ombrer sur l’axe des Y. (obligatoire)


blur Etendu du dégradé de la couleur opaque vers le transparent. (optionnelle – par défaut : 0)

em, ex, ch, rem, in, pt, pc, cm, mm, px (la valeur est uniquement

positive ou nulle)

spread Taille de l’ombre. Permet de redimensionner l’ombre. (optionnelle - défaut : 0)


color Définit la couleur de votre ombre et son opacité. (optionnelle - défaut valeur de la propriété color) Valeur de couleur

inset Définir l’ombre comme étant une ombre interne et non une ombre portée. (optionnelle - défaut : vide) Valeur : “inset” ou vide.

Exemples extrait du site du W3C :


http://www.w3.org/TR/2012/CR-css3-background-20120724/%23box-shadow

http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/%23text-shadow-property


2015-2016




27


4.5.5.2 Sur le texte text-shadow: 0px 0px 9px #777;

h-pos Décalage par rapport à la position de l’élément à ombrer sur l’axe des X. (obligatoire)


v-pos Décalage par rapport à la position de l’élément à ombrer sur l’axe des Y. (obligatoire)


blur Etendu du dégradé de la couleur opaque vers le transparent. (optionnelle – par défaut : 0)

em, ex, ch, rem, in, pt, pc, cm, mm, px (la valeur est uniquement positive ou

nulle)

color Définit la couleur de votre ombre et son opacité. (optionnelle - défaut valeur de la propriété color de l’élément) Valeur de couleur

Exemple extrait du site alsacreations :


http://www.alsacreations.com/xmedia/tuto/css3/shadows/text-shadow.html


2015-2016




28


On notera qu’on peut ajouter plusieurs ombres à un même élément à l’aide d’une unique commande

text-shadow:1px 2px -3px 4px #FFFF88, 5px -6px 6px #FFFF22;

4.6 Bilan CCS Nous allons maintenant vérifier si vous avez compris le fonctionnement des différents éléments de CSS. Pour cela vous aller devoir réaliser une page en HTML5 accompagné d’un fichier de style CSS.

Cette page comprendra un bloc« header », un bloc « nav », un bloc « aside », 4 blocs « section » ainsi qu’un bloc « footer ».

4.6.1 Header, aside et section 1 Le bloc header contiendra simplement le titre de la page avec 5 ombres.

Le bloc « aside », comme vous pouvez le voir ci-dessous, contiendra simplement 3 paragraphes de texte (par exemple ceux-ci http://www.faux-texte.com/lorem-ipsum-3.htm). Votre bloc doit s'afficher à droite de la page. Chacun des paragraphes sera contenu dans une balise de paragraphe.

Voilà à quoi ressemblera le début de la page et plus particulièrement le tableau une fois mis en forme :


http://www.faux-texte.com/lorem-ipsum-3.htm


2015-2016




29


Les lettres formant le menu de navigation sont détaillées en fin d’exercice.

4.6.2 Section 2 Concernant la 2eme section (celle des images), on donnera une taille fixe identique à chaque image. De plus :

• la première image devra subir une inclinaison de 15deg en y lors du survol du pointeur souris. On utilisera le selecteur first-of-type pour sélectionner cette image.

• la deuxième image devra subir une inclinaison de 20deg en x lors du survol du pointeur souris. On utilisera le selecteur nth-last-of-type pour sélectionner cette image.

• la troisième image devra subir une mise à l'échelle de 1.2 lors du survol du pointeur souris. On utilisera le selecteur nth-child pour sélectionner cette image.

• la quatrième image devra subir une rotation de 25deg (en changeant l'origine en 0,0) lors du survol du pointeur souris. On utilisera le selecteur nth-of-type pour sélectionner cette image.

• la cinquième image devra subir une mise à l'échelle de 1.5 et une translation (120px, 50px) lors du survol du pointeur souris. On utilisera le selecteur last-of-type pour sélectionner cette image.

Et vos transformations devront se faire en en douceur (1 à 2 secondes).

4.6.3 Section 3 Dans la 3ème section de la page, ajoutez 2 images et une balise vidéo. Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliquée à la vidéo … Testez cela lors de la lecture de la vidéo

On devrait avoir un résultat dans le style de ceux-ci dessous :



2015-2016




30


4.6.4 Section 4 et footer Ajoutez un infobulle dans la 4ème section ainsi que 2 liens dans le pied de page. Le 1er validera la page en HTML5 et le deuxième validera votre CSS.

Pour vous aider (et surtout que vous ne perdiez pas trop de temps), voici le code des liens :

<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.fourquarters.biz/images/w3cvalidhtml5.jpg" alt="Valid XHTML 5" height="31" width="88" /></a> <br/> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://url_de_votre_fichier.css&profile=css3"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" /></a>

4.6.5 Nav Intéressons-nous maintenant à notre menu interne. Celui-ci sera contenu dans la section nav. Pour ne pas perdre trop de temps, voici le code html de la section nav : <a href="#tableau"> <div class="icone">T</div> ableau </a> <a href="#images"> <div class="icone">I</div> mages </a> <a href="#videos"> <div class="icone">V</div> ideos </a> <a href="#infobulle"> <div class="icone">I</div> nfobulle </a> <a href="#fin"> <div class="icone">F</div> in </a>



2015-2016




31


Sans modifier le code HTML fourni ci-dessus : • Faites en sorte que les liens fonctionnent (qu'ils vous déplacent dans la page) • Modifiez l'apparence du menu pour qu'il ressemble aux images ci-dessous • Ouvrez le menu lors du survol de la lettre de manière à rendre le lien accessible • Ajoutez une rotation (un tour complet) de la lettre lors du survol

Attention, votre page doit être valide (HTML5 et CSS) !!

5 JavaScript JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs2. C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe.

Le langage a été créé en 1995 par Brendan Eich (Brendan Eich étant membre du conseil d'administration de la fondation Mozilla à cette époque) pour le compte de Netscape Communications Corporation. Le langage, actuellement à la version 1.8.2, est une implémentation de la 3e version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5e version du standard ECMA3. [Wikipédia]

5.1 Introduction JavaScript est un langage de programmation à part entière, permettant de réaliser des applications complexes dès que l'on a acquis une connaissance suffisante du langage et de ses diverses possibilités. Deux restrictions qu'il convient toutefois de souligner :

• JavaScript ne dispose d'aucune fonctionnalité graphique ;

• Pour des raisons de sécurité, JavaScript ne peut ni lire ni écrire un fichier.

JavaScript est un langage non typé. Cela signifie qu'il n'est pas forcément utile de déclarer les variables qui vont être utilisées et encore moins d'indiquer leur type. En fait, une variable est implicitement déclarée dès son apparition et typée par son contexte d'utilisation (ses affectations). Le type d’une variable peut donc changer en fonction de son utilisation.

Un programme JavaScript s'intègre directement dans votre page XHTML entre deux balises <script> et </script>. De plus, afin de solliciter l'interpréteur JavaScript, on utilisera le code suivant : <script type="text/javascript"> /*<![CDATA[*/ // Insérez ici votre code JavaScript /*]]>*/ </script>

JavaScript peut intervenir dans un document HTML de deux façons :


http://fr.wikipedia.org/wiki/JavaScript


2015-2016




32


• La première s'exécute au chargement de la page. Le programme JavaScript a pour objet d'écrire dans le document du code HTML pouvant s'adapter dynamiquement à plusieurs facteurs tels le type de configuration matérielle et/ou logicielle du client (navigateur, plugins,...), le contenu éventuel de certains cookies, la date, l'heure du moment présent, etc. Ces scripts prendront naturellement leur place dans le corps du document (entre <body> et </body>)

• La seconde, il s'agit de scripts qui s'exécuteront non pas au moment du chargement de la page , mais une fois celle-ci chargée, lorsque l'utilisateur va interagir avec elle au moyen des différents objets qu'elle contient (liens, boutons, champs de texte,...), mais aussi par des actions sur l'environnement (déplacement de la fenêtre, activation d'une autre fenêtre, déplacement de la souris, frappe au clavier,...). Ces réactions seront donc provoquées par des événements qui se seront produits après la fin de chargement de la page. La place de ces scripts ne s'impose donc pas dans le corps du document. On a plutôt tendance à les positionner en tête du document (entre les balises <head> et </head>). Par exemple, on peut appeler la fonction alerte(String) au chargement de la page avec la méthode suivante :

<body onload="alert('La page est chargée !')">

Vous pouvez, et cela est recommandé si vous souhaitez partager des fonctions JavaScript entre plusieurs pages XHTML, utiliser un fichier externe pour stocker l’ensemble de vos fonctions JavaScript : < script type="text/javascript" src="MonFichierDeFonctions.js"></script>

5.2 Introduction au Document Object Model Document Object Model a pour acronyme DOM. C'est une API pour du (x)html et XML valide. En suivant le DOM, les programmeurs peuvent construire des documents, naviguer dedans, ajouter, modifier ou effacer des éléments à ces documents. En tant que recommandation du W3C, l'objectif du DOM est de fournir une interface de programmation standard pour être utilisée par tous (applications, OS). Suivant le DOM, un document a une structure logique d'arbre (ou de forêt). Le nom DOM provient de l'approche retenue par le W3C : une approche proche des modèles objets (propriétés, méthodes, description). Le DOM a pour but d'uniformiser la manipulation des documents "web", notamment par les scripts. Cependant, afin de rester indépendant, le DOM est écrit en OMG (Object Managment Group) IDL (interface definition language) tout en proposant les liens pour une transcription dans les différentes implémentations (i.e. langage de programmation) comme ECMAscript (une sorte de standardisation de javascript). Chaque niveau de DOM correspond à des itérations successives, enrichissant au fur et à mesure le DOM. La traduction d'un DOM dans les faits n'est pas immédiate. Aussi, je vous invite à consulter le DOM Level 2. La différence principale entre DOM level 2 (core) et DOM HTML Level 2 (application du DOM à l'html) est l'existence de méthodes conçue pour les scripts. En plus, il y a la spécialisation des classes :

• HTMLDocument hérite de l'interface document • HTMLElement hérite de l'interface élément (qui hérite de node)

D'un point de vue DOM, la différence entre HTML et xhtml est l'aspect sensible à la casse. En particulier les noms des balises sont en minuscule (pour getElementsByTagName). Rappel : dans ce cours/TP nous travaillerons en xhtml 1.1. Le niveau 2 appliqué à l'HTML est défini sur les pages DOM HTML du W3C.


http://www.w3.org/TR/DOM-Level-2-Core/expanded-toc.html

http://www.w3.org/TR/DOM-Level-2-HTML/expanded-toc.html


2015-2016




33


5.3 A vous de jouer ! Si vous avez besoin de plus ample détail sur le langage JavaScript pour réaliser ces exercices, je vous laisse vous reporter au deux excellents cours ici et ici. Ou vous pouvez aussi rapidement parcourir supports de cours des DUT de Nice. Enfin, si vous avez des problèmes avec un élément, vous pouvez consulter le Mozilla Developer Network. Pour cette partie du cours/TP, du code JavaScript vous est fourni. Il contient des fonctions permettant de modifier du texte des éléments html. Ce code est dans le fichier getFullText.js (à télécharger sur mon site web), contenant les utilitaires de manipulation du texte. Commencez par regarder ces fonctions, et essayer de voir ce qu'elles font, et comment elles marchent.

5.3.1 Exercice 1 : Modifications Automatiques du titre avec l'attribut innerHTML L'objectif est de changer le titre d'une page à partir du premier h1 de la page. Faites une fonction setTitle( ) qui changera le titre du document automatiquement si le document contient (au moins) un titre h1. Le cas échéant, le texte du premier titre h1 sera le titre du document. Sinon, afficher un titre par défaut (vos prénom et nom). Indication : utilisez les fonctions document.getElementsByTagName, l'attribut document.title

5.3.2 Exercice 2 : Modifications Automatiques du titre avec le code fourni Dans le premier titre h1 de votre document, insérez des éléments html : <b>, lien hypertexte (<a>), etc. Testez ensuite votre modification automatique de titre. Que constatez-vous ? Dans le code fourni (sur le site web de ce cours/TP), il y a une fonction qui permet de récupérer le texte d'une balise. Utilisez la pour écrire une version 2 de la fonction setTitle() et vérifiez le bon fonctionnement de votre script.

5.3.3 Exercice 3 : Insertion la date de modification Insérez automatiquement la date de modification du fichier (document.lastModified) dans le document et en mettant une mise en forme particulière ; texte en gris, italique et aligné à droite.

5.3.4 Exercice 4 : Calcul du temps restant avant le 1er janvier 2016 Ajoutez dans un document la date du jour (automatiquement). Indiquez, dans ce même document, combien de jours il reste avant le 1er janvier 2016 à 0h00.

5.3.5 Exercice 5 : Faire une horloge avec des images Faite une horloge avec des images (qui indique l'heure au format hh:mm:ss en la mettant à jour toutes les secondes) avec JavaScript dans une page html : pensez à utiliser setInterval et getElementById (et les balises img avec un id). Peut-on faire la même chose avec setTimeout ? Si oui, laquelle des deux fonctions doit être utilisée ?

Les images sont disponibles dans l'archive images.zip sur le site web.

5.3.6 Exercice 6 : Le xhtml (et CSS) préliminaire A côté d'un champ texte de saisie (input avec type="text" dans un formulaire), mettez un zone de texte (div ou span) avec un fond de couleur. Pour cela préparer deux classes de styles CSS comme dans l’exemple ci-dessous: .vert {

background-color: rgb(150,255,150); } .rouge {

background-color: rgb(255,150,150); }


http://jacques-guizol.developpez.com/javascript/

http://www.developpez.biz/downloads/javascript/cours_javascript.zip

http://users.polytech.unice.fr/%7Erey/cours/javascript.html

https://developer.mozilla.org/fr/docs/Web/JavaScript


2015-2016




34


Faites en sorte que la zone de texte devienne rouge si le texte entré n'est pas un nombre. Attention, si l'utilisateur tape un nombre, alors le fond doit devenir vert. Y a-t-il une différence entre Number.isNaN() et .isNaN(). Indication : pensez à la fonction isNaN et utilisez les classes CSS vert et rouge

5.3.7 Exercice 7 : Vérification JavaScript d’un changement de texte (conseillé) Ecrivez une fonction en JavaScript qui modifie le texte de la zone de texte avec par exemple "ce n'est pas un nombre" ou "ceci est un bien un nombre" et cela en fonction de ce que tape l’utilisateur.

5.3.8 Exercice 8 : Vérification intelligente de formulaire (conseillé) Rédigiez une page xhtml qui contiendra un formulaire (nom, prénom, adresse, email, …) avec différent type d’entrée (saisie de textes, de mot de passe, cases à cocher, groupe de cases à cocher, …). La validation du formulaire devra se faire par un seul et unique bouton et elle affichera une page de récapitulatif/validation.

Ajoutez, ensuite, une fonction JavaScript qui sera appelée au moment de la validation et qui vérifiera les contraintes du formulaire (tous les champs ont bien été remplis, il y a bien une date dans un champ date, une adresse email dans un champ email, …). Si au moins une erreur est détectée, la validation ne devra pas avoir lieu. Un message en rouge en face de chaque champ erroné devra indiquer l’erreur (non rempli, …).

5.3.9 Exercice 9 : Menu déroulant Rappel : la propriété CSS display, qui peut prendre une des valeurs suivantes (et bien d’autres) :

• none: le bloc ne sera pas affiché. • inline: le bloc sera considéré comme étant une seule ligne • block: spécifie un bloc.

A l’aide de cette propriété et d’un petit script en JavaScript, réalisez un petit menu déroulant dans le même genre que celui des images ci-dessous :

Votre menu contiendra au moins 3 blocs. Chaque bloc contiendra entre 2 et 4 liens.

5.3.10 Exercice 10 : Menu déroulant Maintenant que votre menu est fonctionnel, vous devez faire en sort que l’état du menu (blocs ouverts ou fermés) soit conservé même quand on change de page. Pour cela, les liens du menu pointeront vers des pages différentes contenants elle-même ce même menu.

5.4 Pour aller plus loin : Feuille de calcul (optionnel) Ne faites pas cet exercice dans un premier temps. Vous reviendrez le faire s’il vous reste du temps à la fin des séances de ce cours/TP.

De nombreux site de e-Commerce vous permettent de modifier les quantités de produits achetés ou d’en supprimer certains lors de la phase de validation de vos achats. Le but de cet exercice sera donc de simuler ce processus en JavaScript.

Créez une page web qui affiche une ligne de sélection comme le montre la capture d’écran ci-dessous.



2015-2016




35


Une nouvelle ligne devra apparaitre chaque fois que la « désignation » de la ligne précédente ne désigne plus « *choisir* ». Le prix unitaire devra être automatiquement inscrit en fonction de la « désignation » sélectionnée. Le prix de chaque ligne devra se recalculer si la désignation change ou si la quantité change. Le Total devra également se mettre à jour de manière automatique.

5.5 Une bibliothèque JavaScript : jQuery jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX que nous verrons dans la section suivante) et (X)HTML. Elle a pour but de simplifier des commandes communes de JavaScript. Sa première version date de janvier 2006. La dernière version au moment de la rédaction de ce cours/TP est la version 1.11.3 pour la branche incluant le support des vieux navigateurs IE 6 à 8 et la version 2.1.4 pour sans le support des vieux navigateurs. Les principaux avantages de cette bibliothèque sont :

• une faible taille, la version de production (compressée) ne fait que 94 Ko pour la branche 1 et 83 Ko pour la branche 2,

• une prise en charge des différents navigateurs (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome), • Parcours et modification du DOM dont le CSS simplifié (mais plus lent que du JavaScript) • Gestion des événements • Ajout d’effets visuels et animations • Prise en charge de la gestion asynchrone et des formats de données JSON et XML

Pour inclure jQuery dans vos pages, vous pouvez utiliser la ligne suivante (installation en locale) : <script charset="utf-8" src="cheminLocal/jquery-X.Y.Z.min.js></script>

Vous pouvez aussi utiliser une version héberger à l’extérieur de votre site web (économie de bande passante et utilisation intelligente des caches des navigateurs) en utilisant une des lignes ci-dessous ; <script charset="utf-8" src="http://code.jquery.com/jquery-X.Y.Z.min.js"></script> <script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-X.Y.Z.min.js"> </script> <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/X.Y.Z/jquery.min.js"></script>

Si vous souhaitez utiliser jQuery dans la suite de ce cours/Tp cela est tout à fait possible. Vous trouverez de l’aide sur le site officiel de cette bibliothèque. La documentation de l’API est également disponible en français, de même


http://jquery.com/

http://code.jquery.com/jquery-1.11.3.min.js

http://jquery.com/

http://www.jquery-fr.com/


2015-2016




36


que de nombreux tutoriels. Vous pouvez aussi vous reporter au support de cours des DUT à partir de la diapositive 94. Mais voyons ensemble quelques éléments avant de continuer.

5.5.1 Mise en œuvre sur un exemple Commencez par copier l’exemple suivant sur votre serveur et testez-le.

<!DOCTYPE html> <html> <head> <title>Mes premiers pas avec jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> // On commence par attendre que la page (document) soit chargée (ready) pour que la // structure DOM soit complète. Ensuite on définit une nouvelle fonction. Celle-ci se // déclenchera donc quand le document sera prêt $(document).ready(function(){ // De la même façon on ajouter une fonction sur le click $("#div_body a").click(function(){ // affiche une boite d'alerte alert("Bravo : le contenu de la balise est :'"+ $(this).html()+"'"); }); }); </script> </head> <body> <div id="div_body"> <h1>Mes premiers pas avec jQuery</h1> <div id="div_niveau_2"> <p>un paragraphe avec du texte et un <a href="#">lien </a>.</p> </div> </div> </body> </html>

La fonction $() (écriture simplifiée de la fonction jQuery()) représente la fonction principale du framework jQuery. Cette fonction vous permet notamment de récupérer un élément de votre page HTML en fonction des sélecteurs CSS (utilisez la même syntaxe que celle des sélecteurs CSS que nous avons vu précédemment). De plus la fonction $() ajoute de nouvelles propriétés à l'élément récupéré, on dit qu'elle étend les fonctionnalités de base de l'objet pour pouvoir le manipuler plus facilement.

Par exemple $(document) pointe sur l’objet document alors que l’instruction $("#div_body a") sélectionne toutes les balises de type lien "<a>" qui sont contenues dans l'élément dont l'attribut "id" est égal à "div_body".

Il est important de noter l'utilisation de l'objet this qui représente l'élément source de l'évènement. Dans notre cas this représente le lien "<a>" sur lequel l'utilisateur vient de cliquer.


http://docs.jquery.com/Tutorials%23Tutoriaux_en_Fran.C3.A7ais

http://users.polytech.unice.fr/%7Erey/cours/javascript.html


2015-2016




37


Modifiez le body de votre page avec celui présenté ci-dessous

<body> <div id="menu"> <div class="menublock"> <a class="cache">menu 1</a> <ul style="display:none"> <li>item 1 du menu 1</li> <li>item 2 du menu 1</li> <li>item 2 du menu 1</li> </ul> </div> <div class="menublock"> <a class="visible">menu 2</a> <ul style="display:block"> <li>item 1 du menu 2</li> <li>item 2 du menu 2</li> </ul> </div> </div> </body>

Maintenant nous devons écrire une fonction qui nous permettra gérer notre menu. Mais avant cela ajoutons un peu de couleur pour que cela soit un peu plus lisible.

<style type="text/css"> .menublock { border-style:solid; border-width:1px; border-color:#00008B; background-color:#1E90FF; margin-bottom:2px; } </style>

Remplacez la fonction précédente par la fonction ci-dessous.

<script type="text/javascript"> $(document).ready(function(){ $("#menu a").click(function(){ if ($(this).hasClass("cache")) { $(this).next().show(); $(this).removeClass("cache"); $(this).addClass("visible"); }else{ $(this).next().hide(); $(this).removeClass("visible"); $(this).addClass("cache"); } }); }); </script>

Comment est-ce que cela fonctionne ? Nous commençons par ajouter à tous les liens appartenant à l’élément d’id "menu" notre fonction qui nous permettra de faire apparaitre et disparaitre le menu lors d’un clic.



2015-2016




38


Ensuite nous testons, à l’aide de la fonction hasClass() si le lien en question est caché (class==cache) ou s’il est visible (class==visible). Une fois le type d’action à effectuer identifié, on sélectionne l’éléments ul à l’aide de la fonction next() (l’élément ul à modifier est bien l’élément suivant le lien sur lequel on vient de cliquer (this)). Puis on applique la fonction show() ou hide() sur cet élément. La fonction hide() est l’équivalent de style="display:none" alors que la fonction show() remplace style="display:block" ou style="display:inline" en fonction du type de l’élément. Reste enfin à modifier la classe de notre lien pour que le script puisse continuer à fonctionner. Pour cela on retire au lien sa classe actuelle (removeClass()) et on lui ajoute la classe correspondant à son nouvel état (addClass()). Dans notre cas, on aurait aussi pu utiliser la fonction toggleClass() qui ajoute la classe spécifiée si celle n’existe pas et la retire si celle-ci existe. Grâce à cela, on pourrait simplifier notre code et se passer de la classe visible comme on peut le voir dans le code suivant :

<script type="text/javascript"> $(document).ready(function(){ $("#menu a").click(function(){ if ($(this).hasClass("cache")) { $(this).next().show(); }else{ $(this).next().hide(); } $(this).toggleClass("cache"); }); }); </script>

J’espère, avec ces 2 petits exemples, vous avoir convaincu que jQuery peut vous simplifier la vie dans vos développements JavaScript. L’API de jQuery est trop grande pour que nous puissions la voir en détail ici. Mais nous aurons l’occasion de l’utiliser encore dans ce cours/TP.

Pour plus d’information vous pouvez consulter les sites suivants :

eclaireur.net jquery.info

yoja-web.com babylon-design.com

5.5.2 Exercice tic-tac-toe simple Avant de continuer sur la technologie AJAX, vous allez mettre en pratique ce que vous venez d’apprendre pour réaliser un petit jeu de « tic-tac-toe ». On se limitera, dans un premier temps, à jouer (remplir la grille), à changer le numéro du joueur suivant et à réinitialiser la grille. On

Pour vous aider, veuillez partir du fichier ci-dessous et écrivez seulement la fonction jQuery manquante ;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeu de Tic-Tac-Toe</title> > <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".case").click(function(){ //écrire ici la fonction qui joue un coup. }); //écrire ici la fonction qui réinitialise la grille. });


http://www.eclaireur.net/technique/scripts-exemples-ressources-developper-jquery/

http://www.jquery.info/

http://yoja-web.com/fr/javascript/jquery-guide-demarrage/comment-installer-jquery

http://babylon-design.com/apprendre-et-comprendre-jquery-1-3/


2015-2016




39


</script> <style type="text/css"> #jeu { border-style:solid; border-width:1px; background-color:#00008B; margin:0px; width: 306px; height:306px; position: absolute; } .case { border-style:solid; border-width:1px; background-color:#1E90FF; margin:0px; padding: 0px; width: 100px; height:100px; position: absolute; z-index:1; } h1{ text-align: center; } </style> </head> <body> <div id="message">Pour jouer cliquer alternativement dans les cases. Le premier joueur ayant aligné 3 cases, gagne la partie. Le joueur 1 commence la partie. Il est associé au symbole X. Le deuxième joueur est associé au symbole O.</div> <br /> <div id="joueur">C'est au Joueur <span>1</span> de jouer.</div> <br /> <button>Nouvelle partie</button> <br /><br /> <div id="jeu"> <div style="top:0px;left:0px;"; class="case vide"><h1></h1></div> <div style="top:0px;left:102px;" class="case vide"><h1></h1></div> <div style="top:0px;left:204px;"class="case vide"><h1></h1></div> <div style="top:102px;left:0px;" class="case vide"><h1></h1></div> <div style="top:102px;left:102px;" class="case vide"><h1></h1></div> <div style="top:102px;left:204px;" class="case vide"><h1></h1></div> <div style="top:204px;left:0px;" class="case vide"><h1></h1></div> <div style="top:204px;left:102px;" class="case vide"><h1></h1></div> <div style="top:204px;left:204px;" class="case vide"><h1></h1></div> </div> </body> </html>

Voici quelques indices pour vous faire gagner du temps : 1) Si on ne peut jouer que dans les cases vides. 2) Pour le moment on utilise la structure du DOM à la fois comme Vue et comme Modèle pour l’application.

5.5.3 Exercice tic-tac-toe Maintenant, on va faire les choses de manière propre. Donc, on va

- séparer le ccs et les scripts du fichier html

- créé un modèle du jeu différent du DOM (modèle de la page).

- Les calculs seront uniquement faits sur le modèle du jeu et une fois les résultats calculés ils seront appliqués sur le DOM.

- On complétera l’application avec une fonction de victoire

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeu de Tic-Tac-Toe</title> > <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> // Ajoutez ici les liens vers le fichier css et le fichier javascript



2015-2016




40


<body> <div id="message">Pour jouer cliquer alternativement dans les cases. Le premier joueur ayant aligné 3 cases, gagne la partie. Le joueur 1 commence la partie. Il est associé au symbole X. Le deuxième joueur est associé au symbole O.</div> <br /> <div id="joueur">C'est au Joueur <span></span> de jouer.</div> <br /> <button>Nouvelle partie</button> <br /><br /> <div id="jeu"> </div> </body> </html>

Vous devez donc respecter le schéma suivant :

Au chargement de la page (ou à la réinitialisation), il faut

- Créer le modèle,

- Initialiser le premier joueur

- Mettre à jour l’interface (dessiner la grille et afficher le joueur courant)

A chaque coup, il faut

- Vérifier dans le modèle si la case est vide, sinon on ne fait rien

- Changer le prochain joueur (modèle)

- Mettre à jour le modèle avec le coup courant

- Calculer la fin de partie

- Afficher le résultat (joueur courant, coup joué, état de la partie, mise en valeur sur la grille de l’alignement victorieux)

Calculer la fin de partie

- Vérifier s’il y a une victoire

- Vérifier s’il reste des cases vides

6 AJAX AJAX est un acronyme signifiant Asynchronous JavaScript and XML, et désignant une solution informatique libre pour le développement d'applications Web. Ce n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web :

• HTML (ou XHTML) pour la structure sémantique des informations ; • CSS pour la présentation des informations ; • DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ;



2015-2016




41


• l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web.

• XML (ou les fichiers texte ou JSON). Les applications AJAX peuvent être utilisées au sein des navigateurs Web qui supportent les technologies décrites précédemment. Parmi eux, on trouve Mozilla Firefox, Internet Explorer, Konqueror, Safari et Opera. Pour simplifier, il s'agit d'employer l'objet non standard XMLHttpRequest pour communiquer avec des scripts situés sur le serveur. L'objet permet d'échanger des informations sous différents formats (dont XML, HTML ou texte), mais son principal attrait est sa nature « asynchrone » : tout cela peut se faire sans recharger la page. C'est ce qui permet de mettre à jour certaines parties d'une page sur base d'évènements déclenchés par l'utilisateur. Les deux fonctionnalités combinées offrent les possibilités de :

• faire des requêtes vers le serveur sans avoir à recharger la page ; • analyser et travailler avec des documents XML.

6.1 Lancement d'une requête HTTP Pour faire une requête HTTP vers un serveur à l'aide de JavaScript, il faut disposer d'une instance d'une classe fournissant cette fonctionnalité. Une telle classe a d'abord été introduite dans Internet Explorer sous la forme d'un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d'autres navigateurs ont suivi en implémentant une classe XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l'objet ActiveX original de Microsoft. Par conséquent, pour créer une instance de la classe désirée fonctionnant sur plusieurs navigateurs, vous pouvez utiliser : if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

Certains navigateurs ne fonctionneront pas correctement si la réponse du serveur n'a pas un en-tête XML mime-type. Pour vous en assurer, vous pouvez utiliser un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/XML. httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType('text/XML');

Maintenant il reste à décider ce que vous allez faire après avoir reçu la réponse du serveur. C’est à dire communiquer à l'objet de requête HTTP le nom de la fonction JavaScript qui effectuera le travail d'analyse de la réponse. Pour cela, assignez à la propriété onreadystatechange de l'objet le nom de la fonction JavaScript que vous envisagez d'utiliser, comme ceci : httpRequest.onreadystatechange = nomDeLaFonction;

Ensuite, il s'agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de la classe de requête HTTP, comme ceci : httpRequest.open('GET', 'http://www.example.org/some.file', true); httpRequest.send();



2015-2016




42


• Le premier paramètre de l'appel à open() est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode que vous voulez utiliser et est gérée par le serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête.

• Le second paramètre est l'URL de la page que vous demandez. Pour des raisons de sécurité, il n'est pas possible d'appeler des pages se situant sur un autre domaine. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » à l'appel d'open().

• Le troisième paramètre précise si la requête est asynchrone. Si mis à TRUE, l'exécution de la fonction JavaScript se poursuivra en attendant l'arrivée de la réponse du serveur.

Le paramètre de la méthode send() peut être n'importe quelle donnée que vous voulez envoyer au serveur en cas d'utilisation de la méthode POST. Les données doivent être sous la forme d'une chaîne de requête, comme : nom=valeur&autrenom=autrevaleur&ainsi=desuite

Notez que si vous voulez envoyer des données avec la méthode POST, vous devrez changer le type MIME de la requête à l'aide de la ligne suivante : httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

6.2 Gestion de la réponse du serveur Lors de l'envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse. httpRequest.onreadystatechange = nomDeLaFonction;

Voyons maintenant ce que cette fonction doit faire. Tout d'abord, elle doit vérifier l'état de la requête. Si cet état a une valeur de 4, cela signifie que la réponse du serveur a été reçue dans son intégralité et qu'elle peut maintenant être traitée. if (httpRequest.readyState == 4) { // tout va bien, la réponse a été reçue } else { // pas encore prête }

Voici la liste complète des valeurs de readyState : 0 (non initialisée) 1 (en cours de chargement)

2 (chargée) 3 (en cours d'interaction)

4 (terminée)

La seconde vérification concerne le code d'état de la réponse HTTP du serveur. Dans notre cas, nous sommes seulement intéressés par la réponse 200 OK. if (httpRequest.status == 200) { // parfait ! } else { // il y a eu un problème avec la requête, }

Après avoir vérifié l'état de la requête et le code d'état HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d'accéder à ces données :

• httpRequest.responseText — renvoie la réponse du serveur sous la forme d'une chaîne de texte • httpRequest.responseXML — renvoie la réponse sous la forme d'un objet XMLDocument que vous pouvez

parcourir à l'aide des fonctions DOM de JavaScript



2015-2016




43


6.3 AJAX et jQuery La bibliothèque jQuery nous facilite grandement le travail pour la gestion des requêtes AJAX. Nous utilisons ci-dessous une notation particulière de jQuery qui consiste à nommer les paramètres utilisés ce qui nous permet de spécifier seulement les paramètres que nous souhaitons dans l’ordre ou nous le souhaitons.

$.ajax({ type: "GET", url: "http://www.example.org/some.file", dataType: "xml", error:function(msg, string){ //ici le code de gestion de l’erreur }, success:function(data){

//ici }

});

Nous configurons notre requête ajax, en lui indiquant son type GET et quel fichier elle doit exécuter ; ici http://www.example.org/some.file. Nous indiquons, ensuite, aussi que le type de données retournées sera du xml. La fonction ajax() possède d'autres paramètres que vous pouvez aller consulter sur la documentation officielle. Nous en utilisons 2 autres. Premièrement le paramètre error qui va nous permettre de connaitre l'erreur renvoyée si la requête a été lancé mais ne fonctionne pas. Enfin, le paramètre success qui est une fonction renvoyant les données de notre requête. C'est dans cette fonction que nous allons traiter notre xml.

6.4 Exercices

6.4.1 Exercice 1 : flux RSS et AJAX Puisque AJAX est capable de gérer facilement les fichiers XML, nous allons utiliser les fichiers fournis par les flux RSS pour mettre à jour notre page. Le but de cet exercice est de créer une sorte de lecteur de flux RSS. Nous utiliserons pour commencer le fichier XML de sport24.com concernant la formule1. Comme on peut le voir, cette page est déjà interprétée de manière différente en fonction du navigateur. En effet, ceux-ci intègre leur propre lecteur de flux RSS.

Créez une page AJAX qui charge le flux XML pour afficher un bandeau de titre (en haut de la page et qui utilise toute la largeur) avec le titre du flux, un menu (ensemble de lien sur la gauche) avec le titre des items, et une zone au centre qui correspond à la description de l’item sélectionné. Au chargement de la page, la zone de description


http://api.jquery.com/jQuery.ajax/

http://www.sport24.com/rssfeeds/sport24-formule1.xml


2015-2016




44


sera vide. Un clic sur un des liens de gauche affichera la description de l’item sélectionné dans la zone centrale. Pensez à ajouter un lien dans la zone centrale vers l’article correspondant à la description.

6.4.2 Exercice 5 : flux RSS et AJAX version 2 (optionnel) Ajoutez un mécanisme à la page précédente permettant de choisir parmi une liste de flux RSS lequel on désire utiliser. Vous ajouterez dans cette liste le flux handball, le flux tennis, le flux actualité internet et le flux Actualité Périphériques du site www.clubic.com. Ajoutez ensuite une zone de saisie ou l’on peut entrer l‘url du flux que l’on désire visionner.

7 Références Vous pourrez trouver des informations complémentaires à ce cours/TP dans les ouvrages et sites suivants :

- HTML 4.01 Specification, dernière recommandation HTML 4 du W3C, 24 décembre 1999

- HTML 5 A vocabulary and associated APIs for HTML and XHTML, actuel brouillon de travail du W3C sur HTML 5, 22 janvier 2008

- HTML 5 differences from HTML 4, brouillon de travail du W3C sur les différences entre HTML 4 et HTML 5, 22 janvier 2008

- XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition), recommandation du W3C, 1er août 2002

- XHTML™ 1.1 Basic, recommandation (candidate) du W3C, 13 juillet 2007

- Cascading Style Sheets, level 1, recommandation du W3C, 17 décembre 1996, revu le 11 janvier 1999

- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, recommandation candidate du W3C, 19 juillet 2007

- ECMAScript programming langage 3e édition, décembre 1999

- Microsoft MSDN - JScript

- L'article de Jesse James Garrett qui a lancé le nom Ajax

- Web 2.0, allez plus loin avec AJAX et XMLHttpRequest par siddh

Ce cours/TP a été créé en se servant des documents suivants :

- Introduction à l'XHTML par Adrien Pellegrini

- La norme XHTML par Hugo ETIEVANT

- Cours sur le CSS pour les débutants

- La beauté de la conception CSS avec CSS Zen Jarden

- Les pages JavaScript et AJAX de wikipedia

- Introduction au langage JavaScript par Jacques Guizol

- Apprenez le Langage JavaScript par Van Lancker Luc

- Le cours et les exercices de JavaScript de Philippe Renevier

- Premiers pas en Ajax de mozilla developper center


http://www.sport24.com/rss/269/

http://www.sport24.com/rss/118/

http://www.clubic.com/xml/newsinternet.xml

http://www.clubic.com/xml/newsperipheriques.xml

http://www.clubic.com/xml/newsperipheriques.xml

http://www.clubic.com/

http://www.w3.org/TR/html4/


http://www.w3.org/TR/html5-diff/

http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/xhtml-basic/

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/CSS21/

http://www.ecma-international.org/publications/standards/Ecma-262.htm

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jsoriJScript.asp

http://www.adaptivepath.com/publications/essays/archives/000385.php

ftp://ftp-developpez.com/siddh/articles/ajax/ajax.pdf

ftp://ftp-developpez.com/a-pellegrini/tutoriels/xhtml/xhtml-intro.pdf

http://cyberzoide.developpez.com/html/xhtml.php3

http://www.cssdebutant.com/index.html

http://www.csszengarden.com/tr/francais/

http://fr.wikipedia.org/wiki/JavaScript

http://fr.wikipedia.org/wiki/AJAX

http://jacques-guizol.developpez.com/javascript/

http://www.developpez.biz/downloads/javascript/cours_javascript.zip

http://www.i3s.unice.fr/%7Erenevier/

http://developer.mozilla.org/fr/AJAX/Premiers_pas


2015-2016




45


- Le site web yoja-web.com

- Le site web JQuery Framework Javascript, AJAX

7.1 Pour aller plus loin … Nous n’avons malheureusement pas le temps de nous attarder plus longtemps sur HTML5. Vous pourrez néanmoins trouver plus d’information dans les sites suivants :

xul.fr

html5demos.com

wikipedia.org

alsacreations.com

neovov.com

html5rocks.com

w3.org

html5test.com


http://yoja-web.com/fr/category/javascript/jquery

http://jquery.developpeur-web2.com/

http://www.xul.fr/html5/

http://html5demos.com/

http://fr.wikipedia.org/wiki/HTML_5

http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html

http://blog.neovov.com/index.php?2010/04/19/203-une-petite-introduction-a-html5

http://www.html5rocks.com/en/


http://html5test.com/

TP n° 2 - IDSE Technologies « Coté Clientusers.polytech.unice.fr/.../supports/lpsil/LP_web_TP2.pdfTP n 2 - IDSE Technologies « Coté Client » 3.1 Validation W3C Le W3C, World

Documents