normes de base du web gti780 & mti780 ets a09
Post on 24-May-2015
975 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Normes de base du WebNormes de base du Web
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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?
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
XHTMLXHTML
XHTMLXHTML
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Quelque chose ne va pas?Quelque chose ne va pas?
<balise1><balise1>
<balise2><balise2>
</balise1></balise1>
</balise2></balise2>
<balise3/><balise3/>
XHTMLXHTML
?
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Problème d'imbrication ?Problème d'imbrication ?
XHTMLXHTML
<balise1><balise1>
<balise2><balise2>
</balise1></balise1>
</balise2></balise2>
<balise3/><balise3/>
Ça va mieux! ;-)Ça va mieux! ;-)
<balise1><balise1>
<balise2><balise2>
</balise2></balise2>
</balise1></balise1>
<balise3/><balise3/>
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
CSSCSS
CSSCSS
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
DOM APIDOM API
DOMDOM
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
JavaScriptJavaScript
JavaScriptJavaScript
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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)
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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;
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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';
}}
};};
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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;
}}
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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/
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
JavaScript - Avantages & inconvénientsJavaScript - Avantages & inconvénients
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
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...
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com
top related