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

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

Normes de base du Web  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 GTI-780 / MTI-780 Montréal, octobre 2008

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

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

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

XHTML Quelque chose ne va pas? <balise1> ? <balise2> </balise1> </balise2> <balise3/> GTI-780 / MTI-780 Montréal, octobre 2008

XHTML Problème d'imbrication <balise1> <balise1> <balise2> <balise2> </balise1> </balise2> </balise2> </balise1> <balise3/> <balise3/> Ça va mieux! ;-) GTI-780 / MTI-780 Montréal, octobre 2008

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

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

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

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

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! GTI-780 / MTI-780 Montréal, octobre 2008

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

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=\"nouvelle valeur\"; // changer la valeur d'un noeud GTI-780 / MTI-780 Montréal, octobre 2008

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

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\"); } GTI-780 / MTI-780 Montréal, octobre 2008

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

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; GTI-780 / MTI-780 Montréal, octobre 2008

JavaScript – Notation JSON /* Notation JSON */ var auto = { fabricant : 'Toyota', modele : 'Prius', couleur : 'vert', proprio : { nom = 'Lyne'; } }; GTI-780 / MTI-780 Montréal, octobre 2008

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

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

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

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

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

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 ;-) GTI-780 / MTI-780 Montréal, octobre 2008

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

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

0 comments

Notes on slide 1

Favorites, Groups & Events