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

Previous PDF

Next PDF

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

Technolo

gies " 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 contraint es 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.

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/ 2

TP n° 2 - IDSE

Technolo

gies " Coté Client »

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

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/ 3

TP n° 2 - IDSE

Technolo

gies " Coté Client »

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 !

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/ 4

TP n° 2 - IDSE

Technolo

gies " Coté Client »

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 .

XHTML 1.0 Strict

: utilisation recommandée si vous restez en 1.0 (mais faites un petit effort et passez en 1.1) !

XHTML 1.0 Transitional: permet d'utiliser des balises "décoratives" comme , ... qui sont généralement

dépréciées e n XHTML Strict. XHTML 1.0 Frameset: utilisé quand la page contient une ou plusieurs frames. ML 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) ! XHTML 5 : la toute dernière version

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 : ), 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, €, ...

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/ 5

TP n° 2 - IDSE

Technolo

gies " Coté Client »

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 :

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, ...

Un élément

Un élément est l'ensemble formé par une balise, ses attributs et ses données.

Le site de Gaetan Rey

Un point d'ancrage :

Introduction

Plus loin da

ns le code

Balise
: saut de ligne

Elle provoque un saut de ligne (balise souvent déconseillée).

Du texte

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/ 6

TP n° 2 - IDSE

Technolo

gies " Coté Client »

La suite ...

Balise : citation

Elle insère une citation.

Quand le sage désigne la lune, l'idiot regarde

le doigt. Proverbe chinois

Balise

Elle insère un bloc de code.

echo 'ceci est du code';

Balise : mise en emphase

Elle met en emphase du texte.

Le site de

Gaetan Rey

!

Balise : images

Elle permet l'insertion d'une image.

Du texte barré et du texte normal.

Balise : mise en emphase forte

Elle permet une mise en valeur forte du texte.

Le site de

Gaetan Rey.

3.2.3 Type : bloc : qui est relatif à plusieurs lignes ou à un bloc

Balise

: division du document

Elle joue le rôle de "conteneur" en permettant de structurer la page en plusieurs blocs.

Le haut de page

Le contenu principal

de la page

Le bas de page

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

TP n° 2 - IDSE

Technolo

gies " Coté Client » Balises

à

: entête de paragraphe (titre)

Elle définit un entête de paragraphe de niveau X (X pouvant aller de 1 à 6). La balise

ne doit être utilisée

normalement qu'un e seule fois.

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5

Titre 6

Balise

---

: trait horizontal

Elle insère un trait horizontal.

Premier paragraphe

---

Deuxième paragraphe

Balise

: paragraphe

Elle définit un paragraphe.

Un paragraphe

Balise

Elle définit un bloc où le texte sera affiché tel qu'il figure dans le fichier source.

 
Les espaces sont pris en compte            !!!
 
Yes !!
 

Balises

et
: 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.

• Menu
• Entrée
• Plat principal
Plat secondaire
• Dessert (important)

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:

Vive la licence professionnelle de n ice

Correct:

Vive la licence professionnelle de nice

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/ 8

TP n° 2 - IDSE

Technolo

gies " Coté Client »

3.3.2 Nom et attribut des balises en minuscules

Les noms et les attributs des balises doivent s'écrire tout en minuscules.

Incorrect:

Vive la licence profess ionnelle de nice

Correct:

Vive la licence professionnelle de nice

3.3.3 Balises "vides" avec terminaison

Les balises "vides" doivent se terminer par />. Par balises "vides", on entend les balises tels que
,

---

,

, ....

Incorrect:

Correct:

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:

Vive la lic ence

professionnelle de nice

Correct:

Vive la licence !!

professionnelle de nice

3.3.5 Les valeurs des attributs doivent être entre guillemets

Incorrect:

Vive la licence professionnelle de nice

Correct:

Vive la licence professionnelle de nice

3.3.6 Tout attribut doit avoir une valeur explicite

Incorrect:

Correct:

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:

3.4 Les obligations de l'XHTML

quotesdbs_dbs23.pdfusesText_29