Normes de base du Web GTI780 & MTI780 ETS A09

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


GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

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

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

XHTML

XHTML


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

XHTML
Quelque chose ne va pas?

<balise1>

?
<balise2>
</balise1>
</balise2>
<balise3/>


XHTML

Problème d'imbrication ?
<balise1> <balise1>
<balise2> <balise2>
</balise1> </balise2>
</balise2> </balise1>
<balise3/> <balise3/>

Ça va mieux! ;-)


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

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


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

CSS

CSS


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!

DOM API

DOM


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

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";

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

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");
}


JavaScript

JavaScript


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)

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;


JavaScript – Notation JSON

var auto = {
fabricant : 'Toyota',
modele : 'Prius',
couleur : 'vert',
proprio : {
nom = 'Lyne';
}
};


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

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/

JavaScript - Avantages & inconvénients


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


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

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 ;-)


Questions

?


Normes de base du Web GTI780 & MTI780 ETS A09

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Normes de base du Web GTI780 & MTI780 ETS A09

Similar to Normes de base du Web GTI780 & MTI780 ETS A09 (20)

More from Claude Coulombe

More from Claude Coulombe (20)

Normes de base du Web GTI780 & MTI780 ETS A09