Normes de base du Web - GTI780 & MTI780 - ETS - A08

Normes de base du Web Normes de base du Web

Montréal, octobre 2008Montréal, octobre 2008GTI-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


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)

=> CSS=> CSS

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

=> Unobtrusive JavasScript=> Unobtrusive JavasScript

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

Pourquoi des normes?Pourquoi des normes?


XHTMLXHTML

XHTMLXHTML



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

document à l'aide de balisesdocument à l'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 sont le contenu des balisesPCDATA qui sont 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'imbricationProblè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> : conteneur de type bloc pour grouper des <div id=”...”></div> : conteneur de type bloc pour grouper des

éléments à des fins de CSS ou de codage JavaScriptéléments à des fins de CSS ou de codage JavaScript

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

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

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

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

Balises sémantiques :Balises sémantiques :

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

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

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

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

XHTML – Types de balisesXHTML – Types de balises


Balises de liaison :Balises de liaison :

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

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

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

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

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

Balises de comportementBalises de comportement

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

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

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

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

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

<textarea id=”...”></textarea> : zone de saisie multiligne<textarea id=”...”></textarea> : 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 « document » donne accès au DOM. En modifiant 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.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

Différents types de noeuds: éléments, attributs, commentaires, Différents types de noeuds: éléments, attributs, commentaires,

textestextes

Les noeuds ont des propriétés : nodeName, nodeType, nodeValue, Les noeuds ont des propriétés : nodeName, nodeType, nodeValue,

parentNode, childNodes, attributesparentNode, childNodes, attributes

monNoeud.nodeValue="nouvelle valeur"; // changer la valeur d'un noeudmonNoeud.nodeValue="nouvelle valeur"; // changer la valeur d'un noeud

DOMDOM


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

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

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

firstChild / lastChild, propriété désignant le premier ou le dernier firstChild / lastChild, propriété désignant le premier ou le dernier noeud enfant du noeud courantnoeud enfant du noeud courant

nextSibling / previousSibling, propriété qui retourne le noeud nextSibling / previousSibling, propriété qui retourne le noeud enfant suivant ou précédentenfant suivant ou précédent

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

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

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

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

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

setAttribute(nom, valeur), ajoute un attribut à l'élément courantsetAttribute(nom, valeur), 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 – Langage à prototypeJavaScript – Langage à prototype/* Tout est instance... *//* Tout est instance... */

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/* Notation JSON *//* 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 – Fonctions

Peuvent être affectées à des variablesPeuvent être affectées à des variables

Peuvent être affectées à des propriétés d'un prototypePeuvent être affectées à des propriétés d'un prototype

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 JSON Peuvent être créées en notation JSON


JavaScript – BibliothèquesJavaScript – Bibliothèques

PrototypePrototype : 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énientsRareté des experts en JavaScriptRareté des experts en JavaScript

Beaucoup d'efforts pour contourner les incompatibilités Beaucoup d'efforts pour contourner les incompatibilités

des navigateurs, les fuites de mémoire et les longs des navigateurs, les fuites de mémoire et les longs

chargementschargements

JS n'est pas un véritable langage à objetsJS n'est pas un véritable langage à objets

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

Manque de modularité et de capacité à grandirManque de modularité et de capacité à grandir

Mise au point et réutilisation difficiles des composants Mise au point et réutilisation difficiles des composants

JS et Ajax JS et Ajax

Support inégal des outils JavaScript et AjaxSupport inégal des outils JavaScript et Ajax


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

Technology

Transcript of Normes de base du Web - GTI780 & MTI780 - ETS - A08