Normes de base du Web GTI780 & MTI780 ETS A09

Normes de base du Web Normes de base du Web

ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780

Sujets spéciaux en TI

Le Web 2.0 : concepts et outils

École de technologie supérieure

par

Claude Coulombe


Normes de base du WebNormes de base du Web

* Source Clipart : http://www.clipart.com


Une page web comporte 3 parties : un contenu (HTML ou Une page web comporte 3 parties : un contenu (HTML ou

XHTML et le DOM), une apparence (CSS) et un XHTML et le DOM), une apparence (CSS) et un

comportement (JavaScript)comportement (JavaScript)

HTTPHTTP HTML (HyperText Markup Language)HTML (HyperText Markup Language) XML (eXtensible Markup Language)XML (eXtensible Markup Language) XHTML, v 1,1XHTML, v 1,1 CSS (Cascading Style Sheets) v. 2,1CSS (Cascading Style Sheets) v. 2,1 DOM (Document Object Model) v. 2DOM (Document Object Model) v. 2 JavaScript, v. 1,5JavaScript, v. 1,5

Normes de base du WebNormes de base du Web


La fameuse guerre des fureteurs de la fin des années 90 a laissé comme 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 séquelles, un variété de dilectes de HTML, de l'API DOM et de JavaScript

créant des problèmes de compatibilité.créant des problèmes de compatibilité.

Chaque fureteur avait ses caractéristiques propriétaires et souvent un site Chaque fureteur avait ses caractéristiques propriétaires et souvent un site

qui fonctionnait avec IE ne fonctionnait pas avec Netscape et vice-versa.qui fonctionnait avec IE ne fonctionnait pas avec Netscape et vice-versa.

PrincipesPrincipes

Assurer la compatibilité entre les différents fureteursAssurer la compatibilité entre les différents fureteurs

Dissocier le contenu de la forme (ou style) Dissocier le contenu de la forme (ou style)

=> XHTML & CSS=> XHTML & CSS

Découpler le contenu et le comportement (code JavaScript)Découpler le contenu et le comportement (code JavaScript)

=> Unobtrusive JavaScript=> Unobtrusive JavaScript

Mettre en valeur la sémantique du contenuMettre en valeur la sémantique du contenu

=> XHTML=> XHTML

Pourquoi des normes?Pourquoi des normes?


XHTMLXHTML

XHTMLXHTML



Langage hybride entre le XML et le HTML qui structure un document à Langage hybride entre le XML et le HTML qui structure un document à

l'aide de balisesl'aide de balises

Une balise peut comporterUne balise peut comporter

Un nom de baliseUn nom de balise

Une liste d'attributs (plus importants: id, class, type)Une liste d'attributs (plus importants: id, class, type)

Une chaîne de caractères qui peut être de deux types : CDATA ou Une chaîne de caractères qui peut être de deux types : CDATA ou

PCDATA qui représentent le contenu des balisesPCDATA qui représentent le contenu des balises

Un noeud débute par une balise ouvrante Un noeud débute par une balise ouvrante <balise><balise> et se termine et se termine

par une balise fermante par une balise fermante </balise></balise>

Il arrive qu'un noeud soit représenté par une balise à la fois Il arrive qu'un noeud soit représenté par une balise à la fois

ouvrante et fermante qui se représente ouvrante et fermante qui se représente <balise /><balise />

Différences avec HTML : Ajout de balises pour souligner la sémantique Différences avec HTML : Ajout de balises pour souligner la sémantique

du contenu, retrait des balises de mise en formedu contenu, retrait des balises de mise en forme

XHTMLXHTML


Quelque chose ne va pas?Quelque chose ne va pas?

<balise1><balise1>

<balise2><balise2>

</balise1></balise1>


<balise3/><balise3/>

XHTMLXHTML

?


Problème d'imbrication ?Problème d'imbrication ?

XHTMLXHTML

<balise1><balise1>

<balise2><balise2>




Ça va mieux! ;-)Ça va mieux! ;-)

<balise1><balise1>

<balise2><balise2>





Un noeud peut avoir plusieurs noeuds-enfantsUn noeud peut avoir plusieurs noeuds-enfants

Un noeud-enfant n'a qu'un seul parent directUn noeud-enfant n'a qu'un seul parent direct

Un noeud ouvert à l'intérieur d'un autre noeud doit être Un noeud ouvert à l'intérieur d'un autre noeud doit être

refermé avant la fermeture de son noeud-parentrefermé avant la fermeture de son noeud-parent

Obligation de refermer chaque baliseObligation de refermer chaque balise

Contenu des balises en minusculeContenu des balises en minuscule

Valeurs des attributs entre guillemets Valeurs des attributs entre guillemets (simple ou double)(simple ou double)

Un ordre hiérarchique oblige certaines balises à contenir Un ordre hiérarchique oblige certaines balises à contenir

obligatoirement des balises d'un certain type.obligatoirement des balises d'un certain type.

Par exemple, la balise Par exemple, la balise <html><html> doit obligatoirement contenir doit obligatoirement contenir

les balises les balises <head><head> et et <body><body> et rien d'autres et rien d'autres

XHTML – Règles de constructionXHTML – Règles de construction


Balises structurelles :Balises structurelles :

<hml></html>, <body></body>, <head></head><hml></html>, <body></body>, <head></head>

<div id=”...”></div><div id=”...”></div> : conteneur de type bloc pour grouper des éléments : conteneur de type bloc pour grouper des éléments

à des fins de CSS ou de codage JavaScriptà des fins de CSS ou de codage JavaScript

<span></span><span></span> : conteneur de type aligné (inline) : conteneur de type aligné (inline)

<table id=”...”></table> <table id=”...”></table> : tableau de données: tableau de données (pas pour la mise en page!)(pas pour la mise en page!)

<thead></thead>, <tbody></tbody>, <tfoot></tfoot><thead></thead>, <tbody></tbody>, <tfoot></tfoot> (optionel) (optionel)

<tr></tr><tr></tr> : ligne de cellules, : ligne de cellules, <td></td><td></td> : cellule : cellule

Balises sémantiques :Balises sémantiques :

<h1></h1><h1></h1>......<h6></h6><h6></h6> : titres : titres

<img id=”...” src=”...” /><img id=”...” src=”...” /> : images : images

<p></p><p></p> : paragraphes : paragraphes

<ol></ol><ol></ol>, , <ul></ul><ul></ul> : listes, : listes, <li></li><li></li> : éléments : éléments

XHTML – Types de balisesXHTML – Types de balises


Balises de liaison :Balises de liaison :

<a href=”...”></a><a href=”...”></a> : liens : liens

<link type=”...” href= ></link><link type=”...” href= ></link> : liens vers une ressource externe (CSS) : liens vers une ressource externe (CSS)

<script src=”...”></script><script src=”...”></script> : liens vers des scripts JS : liens vers des scripts JS

Balises de méta-données :Balises de méta-données :

<meta></meta><meta></meta> : mots-clés : mots-clés

Balises de comportementBalises de comportement

<form></form><form></form> : formulaire : formulaire

<input id=”...” type=”...”></input><input id=”...” type=”...”></input> : balise de contrôles : text, button... : balise de contrôles : text, button...

<label></label><label></label> : titre d'un contrôle : titre d'un contrôle

<fieldset></fieldset><fieldset></fieldset> : groupe logique de contrôles : groupe logique de contrôles

<select></select><select></select> : menu, <option></option> : item du menu : menu, <option></option> : item du menu

<textarea id=”...”></textarea><textarea id=”...”></textarea> : zone de saisie multiligne : zone de saisie multiligne

XHTML – Types de balisesXHTML – Types de balises


CSSCSS

CSSCSS



CSS : Cascaded Styling SheetsCSS : Cascaded Styling Sheets

Les CSS permettent de créer l'apparence d'un document Les CSS permettent de créer l'apparence d'un document

indépendamment de son contenuindépendamment de son contenu

Les CSS permettent un contrôle complet de l'apparence d'unLes CSS permettent un contrôle complet de l'apparence d'un

document XHTMLdocument XHTML

Avec CSS on peut proposer plusieurs apparences complètement Avec CSS on peut proposer plusieurs apparences complètement

différentes pour un même site sans modifier les sources HTMLdifférentes pour un même site sans modifier les sources HTML

Un exemple vaut mille mots: l'étonnant Zen Garden de Dave SheaUn exemple vaut mille mots: l'étonnant Zen Garden de Dave Shea

www.csszengarden.comwww.csszengarden.comLe code HTML est le même, seule la feuille de style CSS change. Le code HTML est le même, seule la feuille de style CSS change.

Incroyable mais vrai!Incroyable mais vrai!

CSSCSS

http://www.csszengarden.com/


DOM APIDOM API

DOMDOM



DOMDOM

Source : http://www.w3schools.com/dom/default.asp

Le programmeur Web utilise l'interface DOM pour rendre sa page web Le programmeur Web utilise l'interface DOM pour rendre sa page web vivante vivante

Le fureteur utilise DOM pour représenter une page webLe fureteur utilise DOM pour représenter une page web

En JavaScript l'objet « En JavaScript l'objet « documentdocument » donne accès au DOM. En modifiant » donne accès au DOM. En modifiant le DOM avec JS, la page web est aussitôt modifiée par le fureteur.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 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 supporte la navigation, l'accès aux éléments et les manipulations d'un document XML ou HTML par un langage de programmationdocument XML ou HTML par un langage de programmation

Représentation hiérarchique d'une page Web sous la forme d'un arbreReprésentation hiérarchique d'une page Web sous la forme d'un arbre

Source : http://www.w3schools.com/dom/default.asp

head

html

body

title meta

text li

ulimgp

a li

h1

li


Se divise en trois partiesSe divise en trois parties

Core DOM, HTML DOM, XML DOMCore DOM, HTML DOM, XML DOM

Noeud : Tout ce qu'il y a dans une page Web est un noeudNoeud : Tout ce qu'il y a dans une page Web est un noeud

Le document lui-même, i.e. un arbre formé de noeudsLe document lui-même, i.e. un arbre formé de noeuds

Tout élément XML d'un document est un noeudTout élément XML d'un document est un noeud

Tout attribut est un attribut de noeudTout attribut est un attribut de noeud

Plusieurs types de noeuds: Plusieurs types de noeuds: éléments, attributs, commentaires, texteséléments, attributs, commentaires, textes

Les noeuds ont des propriétés : Les noeuds ont des propriétés : nodeNamenodeName, , nodeTypenodeType, , nodeValuenodeValue, ,

parentNodeparentNode, , childNodeschildNodes, , attributesattributes

// changer la valeur d'un noeud// changer la valeur d'un noeud

monNoeud.nodeValue="nouvelle valeur"; monNoeud.nodeValue="nouvelle valeur";

DOMDOM


getElementById(“x”)getElementById(“x”) retourne la balise dont l'Id est “x”. retourne la balise dont l'Id est “x”.

getElementsByTagName(“x”)getElementsByTagName(“x”) retourne la liste des noeuds dont la retourne la liste des noeuds dont la

balise est “x”balise est “x”

item(n)item(n), retourne n ième élément d'une liste de noeuds, retourne n ième élément d'une liste de noeuds

firstChildfirstChild / / lastChildlastChild, propriété désignant le premier ou le dernier , propriété désignant le premier ou le dernier noeud enfant du noeud courant noeud enfant du noeud courant

nextSiblingnextSibling / / previousSiblingpreviousSibling, propriété qui retourne le noeud , propriété qui retourne le noeud

frère suivant ou précédentfrère suivant ou précédent

createElement(balise)createElement(balise), retourne un noeud Element, retourne un noeud Element

createTextNode(texte)createTextNode(texte), retourne un noeud Text, retourne un noeud Text

appendChild(nouveau)appendChild(nouveau), ajoute un nouvel enfant au noeud courant, ajoute un nouvel enfant au noeud courant

insertBefore(nouv, réf)insertBefore(nouv, réf), insère un nouv enfant avant le noeud réf, insère un nouv enfant avant le noeud réf

removeChild(noeud)removeChild(noeud), retire le noeud du DOM, retire le noeud du DOM

setAttribute(nom, valeur)setAttribute(nom, valeur), ajoute un attribut à l'élément courant, ajoute un attribut à l'élément courant

DOM – Méthodes essentiellesDOM – Méthodes essentielles


Cet exemple affiche tous les liens d'une page WebCet exemple affiche tous les liens d'une page Web

var listeLiens = document.getElementsByTagName("a") ; var listeLiens = document.getElementsByTagName("a") ;

for (var i = 0; i < listeLiens.length ; i++)for (var i = 0; i < listeLiens.length ; i++)

{ {

alert("Lien (" + i +”) ”+ listeLiens[i].href + "\n"); alert("Lien (" + i +”) ”+ listeLiens[i].href + "\n");

}}

DOM – Exemple en JavaScript DOM – Exemple en JavaScript


JavaScriptJavaScript

JavaScriptJavaScript



JavaScript – JavaScript – Le langage du fureteurLe langage du fureteurJavaScript a été conçu pour ajouter de l'interactivité à JavaScript a été conçu pour ajouter de l'interactivité à

une page Web. C'est le langage du fureteur. une page Web. C'est le langage du fureteur.

Le code JavaScript est exécuté par un interpréteur Le code JavaScript est exécuté par un interpréteur

intégré au fureteur). intégré au fureteur).

JavaScript est derrière la technologie AjaxJavaScript est derrière la technologie Ajax

Manipulation du DOM (API document)Manipulation du DOM (API document)

Gestion des événements (usager) & systèmeGestion des événements (usager) & système

Gestion des formulaires WebGestion des formulaires Web

Manipulation des CSS et animationManipulation des CSS et animation

Gestion du fureteur (API window)Gestion du fureteur (API window)


JavaScript – Langage à prototypeJavaScript – Langage à prototype/* Tout est instance... pas de vraie classe, /* Tout est instance... pas de vraie classe,

triple triple ééquivalence : quivalence : Objet<=>Tableau associatif<=>Fonction */Objet<=>Tableau associatif<=>Fonction */

var auto = new Object();var auto = new Object();

/* Facile d'ajouter des propriétés (nom, valeur) *//* Facile d'ajouter des propriétés (nom, valeur) */

auto.fabricant = 'auto.fabricant = 'Toyota';Toyota';

auto.modele = 'Prius';auto.modele = 'Prius';

auto.couleur = 'vert';auto.couleur = 'vert';

var personne = new Object();var personne = new Object();

personne.nom = 'Lyne';personne.nom = 'Lyne';

auto.proprio = personne;auto.proprio = personne;

var nomProprio = auto.proprio.nom;var nomProprio = auto.proprio.nom;


JavaScript – Notation JSONJavaScript – Notation JSON

var auto = var auto = { {

fabricantfabricant : ' : 'Toyota',Toyota',

modele : 'Prius',modele : 'Prius',

couleur : 'vert',couleur : 'vert',

proprio : {proprio : {

nom = 'Lyne';nom = 'Lyne';

}}

};};


JavaScript – FonctionsJavaScript – FonctionsPeuvent être affectées à des variables ou affectées à des propriétés d'un Peuvent être affectées à des variables ou affectées à des propriétés d'un

prototypeprototype

Peuvent être passées en paramètresPeuvent être passées en paramètres

Peuvent être retournées par une fonctionPeuvent être retournées par une fonction

Peuvent être créées en notation JSONPeuvent être créées en notation JSON

function personne(nPrenom,nNom,nAge,nCouleurYeux,nOccupation) function personne(nPrenom,nNom,nAge,nCouleurYeux,nOccupation)

{{

this.prenom= nPrenom;this.prenom= nPrenom;

this.nom = nNom;this.nom = nNom;

this.age=nAge;this.age=nAge;

this.couleurYeux =nCouleurYeux;this.couleurYeux =nCouleurYeux;

this.occupation = nOccupation;this.occupation = nOccupation;

}}


JavaScript – BibliothèquesJavaScript – BibliothèquesPrototypePrototype : la plus utilisée, assure une bonne compatibilité entre : la plus utilisée, assure une bonne compatibilité entre

les fureteurs, nombre réduit de fonctions, les fureteurs, nombre réduit de fonctions, http://prototypejs.org/http://prototypejs.org/

ScriptaculousScriptaculous : basée sur Prototype, surtout utilisée pour les : basée sur Prototype, surtout utilisée pour les

Effets visuels, Effets visuels, http://script.aculo.us/http://script.aculo.us/

DojoDojo : la plus riche et la plus complète, un peu lourde et lente, : la plus riche et la plus complète, un peu lourde et lente,

http://dojotoolkit.org/http://dojotoolkit.org/

YUIYUI (Yahoo! User Interface) : riche et bien documentée (Yahoo! User Interface) : riche et bien documentée

http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/

jQueryjQuery : compacte et performante, la mieux conçue sur le plan du : compacte et performante, la mieux conçue sur le plan du

génie logiciel, à mon avis le meilleur choix! génie logiciel, à mon avis le meilleur choix!

http://jquery.com/http://jquery.com/


JavaScript - Avantages & inconvénientsJavaScript - Avantages & inconvénients



JavaScript - AvantagesJavaScript - AvantagesLangage à prototypes (tout est instance, ajout & retrait Langage à prototypes (tout est instance, ajout & retrait

facile de propriétés)facile de propriétés)

Pas de compilationPas de compilation

Très flexibleTrès flexible

Pas de typagePas de typage

Les fonctions sont des «prototypes » à part entièreLes fonctions sont des «prototypes » à part entière

Simple, syntaxe claire, lexique limitéSimple, syntaxe claire, lexique limité

Structures de données (tableaux) simples et puissantesStructures de données (tableaux) simples et puissantes


JavaScript - InconvénientsJavaScript - InconvénientsProblème de portabilité, incompatibilités des fureteurs, fuites de Problème de portabilité, incompatibilités des fureteurs, fuites de

mémoire & longs chargementsmémoire & longs chargements

Pas de typage statique des variables en JavaSriptPas de typage statique des variables en JavaSript

Le type d'une variable peut changer lorsqu'une nouvelle valeur lui Le type d'une variable peut changer lorsqu'une nouvelle valeur lui

est affectée. est affectée. var unNombre = 2; unNombre = "deux";var unNombre = 2; unNombre = "deux";

JS n'a pas été conçu pour de gros logicielsJS n'a pas été conçu pour de gros logiciels

Pas d'espace de nommage, manque de modularité et de capacité à Pas d'espace de nommage, manque de modularité et de capacité à

grandirgrandir

Mise au point et réutilisation difficiles, support inégal des outils et Mise au point et réutilisation difficiles, support inégal des outils et

IDEsIDEs

Problème de sécurité XSS (injection de scripts)Problème de sécurité XSS (injection de scripts)

Rareté des « programmeurs experts » en JavaScriptRareté des « programmeurs experts » en JavaScript


Avant de penser à l'apparence, pensez au contenu. Ce n'est Avant de penser à l'apparence, pensez au contenu. Ce n'est qu'une fois le code XHTML écrit que vous pensez à son apparencequ'une fois le code XHTML écrit que vous pensez à son apparence

Bien séparer structure et apparence avec les CSSBien séparer structure et apparence avec les CSS

Bien séparer structure et comportement. Pas de JS dans le HTMLBien séparer structure et comportement. Pas de JS dans le HTML

Afin d'éviter les rajustements saccadés de pages, il faut attendre Afin d'éviter les rajustements saccadés de pages, il faut attendre qu'un nouveau fragment soit complet avant de l'accrocher qu'un nouveau fragment soit complet avant de l'accrocher (généralement via un appendChild) au DOM de la page.(généralement via un appendChild) au DOM de la page.

Lancez les scripts une fois la page chargée via une fonction Lancez les scripts une fois la page chargée via une fonction d'initialisation au moment de l'événement « onload »d'initialisation au moment de l'événement « onload »

N'utilisez jamais d'extension propriétaire du DOM, de HTML ou de N'utilisez jamais d'extension propriétaire du DOM, de HTML ou de JavaScriptJavaScript

Pour la mise au point de vos programmes, utilisez FireBug dans le Pour la mise au point de vos programmes, utilisez FireBug dans le fureteur FireFox puis testez avec les autres fureteurs...fureteur FireFox puis testez avec les autres fureteurs...

N'oubliez pas le favicon dans l'entête de votre page ;-)N'oubliez pas le favicon dans l'entête de votre page ;-)

Quelques conseils...Quelques conseils...


QuestionsQuestions

??


Normes de base du Web GTI780 & MTI780 ETS A09

Technology

Transcript of Normes de base du Web GTI780 & MTI780 ETS A09