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

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


GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008

 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)
=> CSS
Découpler le contenu et le comportement (code JavaScript)
=> Unobtrusive JavasScript
Mettre en valeur la sémantique du contenu


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

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

Différents types de noeuds: éléments, attributs, commentaires,
textes
Les noeuds ont des propriétés : nodeName, nodeType, nodeValue,
parentNode, childNodes, attributes
monNoeud.nodeValue=quot;nouvelle valeurquot;; // changer la valeur d'un noeud


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
enfant 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(quot;aquot;) ;
for (var i = 0; i < listeLiens.length ; i++)
{
alert(quot;Lien (quot; + i +”) ”+ listeLiens[i].href + quot;nquot;);
}


JavaScript

JavaScript


JavaScript – Langage à prototype
/* Tout est instance... */
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
/* Notation JSON */
var auto = {
fabricant : 'Toyota',
modele : 'Prius',
couleur : 'vert',
proprio : {
nom = 'Lyne';
}
};


JavaScript – Fonctions

 Peuvent être affectées à des variables
 Peuvent être 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


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
Rareté des experts en JavaScript
Beaucoup d'efforts pour contourner les incompatibilités
des navigateurs, les fuites de mémoire et les longs
chargements
JS n'est pas un véritable langage à objets
JS n'a pas été conçu pour de gros logiciels
Manque de modularité et de capacité à grandir
Mise au point et réutilisation difficiles des composants
JS et Ajax
Support inégal des outils JavaScript et Ajax

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

Similar a Normes de base du Web - GTI780 & MTI780 - ETS - A08 (20)

Más de Claude Coulombe

Más de Claude Coulombe (20)

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