Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
1. Normes de base du Web
Sujets spéciaux en TI
Le Web 2.0 : concepts et outils
École de technologie supérieure
par
Claude Coulombe
GTI-780 / MTI-780 ETS - Montréal - 2009
2. Normes de base du Web
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
3. Normes de base du Web
Une page web comporte 3 parties : un contenu (HTML ou
XHTML et le DOM), une apparence (CSS) et un
comportement (JavaScript)
HTTP
HTML (HyperText Markup Language)
XML (eXtensible Markup Language)
XHTML, v 1,1
CSS (Cascading Style Sheets) v. 2,1
DOM (Document Object Model) v. 2
JavaScript, v. 1,5
GTI-780 / MTI-780 ETS - Montréal - 2009
4. Pourquoi des normes?
La fameuse guerre des fureteurs de la fin des années 90 a laissé comme
séquelles, un variété de dilectes de HTML, de l'API DOM et de JavaScript
créant des problèmes de compatibilité.
Chaque fureteur avait ses caractéristiques propriétaires et souvent un site
qui fonctionnait avec IE ne fonctionnait pas avec Netscape et vice-versa.
Principes
Assurer la compatibilité entre les différents fureteurs
Dissocier le contenu de la forme (ou style)
=> XHTML & CSS
Découpler le contenu et le comportement (code JavaScript)
=> Unobtrusive JavaScript
Mettre en valeur la sémantique du contenu
=> XHTML
GTI-780 / MTI-780 ETS - Montréal - 2009
6. XHTML
Langage hybride entre le XML et le HTML qui structure un document à
l'aide de balises
Une balise peut comporter
Un nom de balise
Une liste d'attributs (plus importants: id, class, type)
Une chaîne de caractères qui peut être de deux types : CDATA ou
PCDATA qui représentent le contenu des balises
Un noeud débute par une balise ouvrante <balise> et se termine
par une balise fermante </balise>
Il arrive qu'un noeud soit représenté par une balise à la fois
ouvrante et fermante qui se représente <balise />
Différences avec HTML : Ajout de balises pour souligner la sémantique
du contenu, retrait des balises de mise en forme
GTI-780 / MTI-780 ETS - Montréal - 2009
9. XHTML – Règles de construction
Un noeud peut avoir plusieurs noeuds-enfants
Un noeud-enfant n'a qu'un seul parent direct
Un noeud ouvert à l'intérieur d'un autre noeud doit être
refermé avant la fermeture de son noeud-parent
Obligation de refermer chaque balise
Contenu des balises en minuscule
Valeurs des attributs entre guillemets (simple ou double)
Un ordre hiérarchique oblige certaines balises à contenir
obligatoirement des balises d'un certain type.
Par exemple, la balise <html> doit obligatoirement contenir
les balises <head> et <body> et rien d'autres
GTI-780 / MTI-780 ETS - Montréal - 2009
10. XHTML – Types de balises
Balises structurelles :
<hml></html>, <body></body>, <head></head>
<div id=”...”></div> : conteneur de type bloc pour grouper des éléments
à des fins de CSS ou de codage JavaScript
<span></span> : conteneur de type aligné (inline)
<table id=”...”></table> : tableau de données (pas pour la mise en page!)
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> (optionel)
<tr></tr> : ligne de cellules, <td></td> : cellule
Balises sémantiques :
<h1></h1>...<h6></h6> : titres
<img id=”...” src=”...” /> : images
<p></p> : paragraphes
<ol></ol>, <ul></ul> : listes, <li></li> : éléments
GTI-780 / MTI-780 ETS - Montréal - 2009
11. XHTML – Types de balises
Balises de liaison :
<a href=”...”></a> : liens
<link type=”...” href= ></link> : liens vers une ressource externe (CSS)
<script src=”...”></script> : liens vers des scripts JS
Balises de méta-données :
<meta></meta> : mots-clés
Balises de comportement
<form></form> : formulaire
<input id=”...” type=”...”></input> : balise de contrôles : text, button...
<label></label> : titre d'un contrôle
<fieldset></fieldset> : groupe logique de contrôles
<select></select> : menu, <option></option> : item du menu
<textarea id=”...”></textarea> : zone de saisie multiligne
GTI-780 / MTI-780 ETS - Montréal - 2009
13. CSS
CSS : Cascaded Styling Sheets
Les CSS permettent de créer l'apparence d'un document
indépendamment de son contenu
Les CSS permettent un contrôle complet de l'apparence d'un
document XHTML
Avec CSS on peut proposer plusieurs apparences complètement
différentes pour un même site sans modifier les sources HTML
Un exemple vaut mille mots: l'étonnant Zen Garden de Dave Shea
www.csszengarden.com
Le code HTML est le même, seule la feuille de style CSS change.
Incroyable mais vrai!
GTI-780 / MTI-780 ETS - Montréal - 2009
14. DOM API
DOM
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
15. DOM
Le programmeur Web utilise l'interface DOM pour rendre sa page web
vivante
Le fureteur utilise DOM pour représenter une page web
En JavaScript l'objet « document » donne accès au DOM. En modifiant
le DOM avec JS, la page web est aussitôt modifiée par le fureteur.
L'API DOM (Document Object Model) est un standard W3C qui
supporte la navigation, l'accès aux éléments et les manipulations d'un
document XML ou HTML par un langage de programmation
Représentation hiérarchique d'une page Web sous la forme d'un arbre
html
head body
title meta h1 p img ul
text a li li li
GTI-780 / MTI-780 Source : http://www.w3schools.com/dom/default.asp ETS - Montréal - 2009
16. DOM
Se divise en trois parties
Core DOM, HTML DOM, XML DOM
Noeud : Tout ce qu'il y a dans une page Web est un noeud
Le document lui-même, i.e. un arbre formé de noeuds
Tout élément XML d'un document est un noeud
Tout attribut est un attribut de noeud
Plusieurs types de noeuds: éléments, attributs, commentaires, textes
Les noeuds ont des propriétés : nodeName, nodeType, nodeValue,
parentNode, childNodes, attributes
// changer la valeur d'un noeud
monNoeud.nodeValue="nouvelle valeur";
GTI-780 / MTI-780 ETS - Montréal - 2009
17. DOM – Méthodes essentielles
getElementById(“x”) retourne la balise dont l'Id est “x”.
getElementsByTagName(“x”) retourne la liste des noeuds dont la
balise est “x”
item(n), retourne n ième élément d'une liste de noeuds
firstChild / lastChild, propriété désignant le premier ou le dernier
noeud enfant du noeud courant
nextSibling / previousSibling, propriété qui retourne le noeud
frère suivant ou précédent
createElement(balise), retourne un noeud Element
createTextNode(texte), retourne un noeud Text
appendChild(nouveau), ajoute un nouvel enfant au noeud courant
insertBefore(nouv, réf), insère un nouv enfant avant le noeud réf
removeChild(noeud), retire le noeud du DOM
setAttribute(nom, valeur), ajoute un attribut à l'élément courant
GTI-780 / MTI-780 ETS - Montréal - 2009
18. DOM – Exemple en JavaScript
Cet exemple affiche tous les liens d'une page Web
var listeLiens = document.getElementsByTagName("a") ;
for (var i = 0; i < listeLiens.length ; i++)
{
alert("Lien (" + i +”) ”+ listeLiens[i].href + "n");
}
GTI-780 / MTI-780 ETS - Montréal - 2009
20. JavaScript – Le langage du fureteur
JavaScript a été conçu pour ajouter de l'interactivité à
une page Web. C'est le langage du fureteur.
Le code JavaScript est exécuté par un interpréteur
intégré au fureteur).
JavaScript est derrière la technologie Ajax
Manipulation du DOM (API document)
Gestion des événements (usager) & système
Gestion des formulaires Web
Manipulation des CSS et animation
Gestion du fureteur (API window)
GTI-780 / MTI-780 ETS - Montréal - 2009
21. JavaScript – Langage à prototype
/* Tout est instance... pas de vraie classe,
triple équivalence : Objet<=>Tableau associatif<=>Fonction */
var auto = new Object();
/* Facile d'ajouter des propriétés (nom, valeur) */
auto.fabricant = 'Toyota';
auto.modele = 'Prius';
auto.couleur = 'vert';
var personne = new Object();
personne.nom = 'Lyne';
auto.proprio = personne;
var nomProprio = auto.proprio.nom;
GTI-780 / MTI-780 ETS - Montréal - 2009
22. JavaScript – Notation JSON
var auto = {
fabricant : 'Toyota',
modele : 'Prius',
couleur : 'vert',
proprio : {
nom = 'Lyne';
}
};
GTI-780 / MTI-780 ETS - Montréal - 2009
23. JavaScript – Fonctions
Peuvent être affectées à des variables ou affectées à des propriétés d'un
prototype
Peuvent être passées en paramètres
Peuvent être retournées par une fonction
Peuvent être créées en notation JSON
function personne(nPrenom,nNom,nAge,nCouleurYeux,nOccupation)
{
this.prenom= nPrenom;
this.nom = nNom;
this.age=nAge;
this.couleurYeux =nCouleurYeux;
this.occupation = nOccupation;
}GTI-780 / MTI-780 ETS - Montréal - 2009
24. JavaScript – Bibliothèques
Prototype : la plus utilisée, assure une bonne compatibilité entre
les fureteurs, nombre réduit de fonctions, http://prototypejs.org/
Scriptaculous : basée sur Prototype, surtout utilisée pour les
Effets visuels, http://script.aculo.us/
Dojo : la plus riche et la plus complète, un peu lourde et lente,
http://dojotoolkit.org/
YUI (Yahoo! User Interface) : riche et bien documentée
http://developer.yahoo.com/yui/
jQuery : compacte et performante, la mieux conçue sur le plan du
génie logiciel, à mon avis le meilleur choix!
http://jquery.com/
GTI-780 / MTI-780 ETS - Montréal - 2009
26. JavaScript - Avantages
Langage à prototypes (tout est instance, ajout & retrait
facile de propriétés)
Pas de compilation
Très flexible
Pas de typage
Les fonctions sont des «prototypes » à part entière
Simple, syntaxe claire, lexique limité
Structures de données (tableaux) simples et puissantes
GTI-780 / MTI-780 ETS - Montréal - 2009
27. JavaScript - Inconvénients
Problème de portabilité, incompatibilités des fureteurs, fuites de
mémoire & longs chargements
Pas de typage statique des variables en JavaSript
Le type d'une variable peut changer lorsqu'une nouvelle valeur lui
est affectée. var unNombre = 2; unNombre = "deux";
JS n'a pas été conçu pour de gros logiciels
Pas d'espace de nommage, manque de modularité et de capacité à
grandir
Mise au point et réutilisation difficiles, support inégal des outils et
IDEs
Problème de sécurité XSS (injection de scripts)
Rareté des « programmeurs experts » en JavaScript
GTI-780 / MTI-780 ETS - Montréal - 2009
28. Quelques conseils...
Avant de penser à l'apparence, pensez au contenu. Ce n'est
qu'une fois le code XHTML écrit que vous pensez à son apparence
Bien séparer structure et apparence avec les CSS
Bien séparer structure et comportement. Pas de JS dans le HTML
Afin d'éviter les rajustements saccadés de pages, il faut attendre
qu'un nouveau fragment soit complet avant de l'accrocher
(généralement via un appendChild) au DOM de la page.
Lancez les scripts une fois la page chargée via une fonction
d'initialisation au moment de l'événement « onload »
N'utilisez jamais d'extension propriétaire du DOM, de HTML ou de
JavaScript
Pour la mise au point de vos programmes, utilisez FireBug dans le
fureteur FireFox puis testez avec les autres fureteurs...
N'oubliez pas le favicon dans l'entête de votre page ;-)
GTI-780 / MTI-780 ETS - Montréal - 2009