• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Normes de base du Web  GTI780 & MTI780  ETS   A09
 

Normes de base du Web GTI780 & MTI780 ETS A09

on

  • 1,313 views

Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, ...

Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009

Statistics

Views

Total Views
1,313
Views on SlideShare
1,311
Embed Views
2

Actions

Likes
0
Downloads
24
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 ETS - Montréal - 2009
    • Normes de base du Web GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Normes de base du Web Une page web comporte 3 parties : un contenu (HTML ou XHTML et le DOM), une apparence (CSS) et un comportement (JavaScript)  HTTP  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 ETS - Montréal - 2009
    • 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) => XHTML & CSS Découpler le contenu et le comportement (code JavaScript) => Unobtrusive JavaScript Mettre en valeur la sémantique du contenu => XHTML GTI-780 / MTI-780 ETS - Montréal - 2009
    • XHTML XHTML GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • 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 représentent 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 ETS - Montréal - 2009
    • XHTML Quelque chose ne va pas? <balise1> ? <balise2> </balise1> </balise2> <balise3/> GTI-780 / MTI-780 ETS - Montréal - 2009
    • XHTML Problème d'imbrication ? <balise1> <balise1> <balise2> <balise2> </balise1> </balise2> </balise2> </balise1> <balise3/> <balise3/> Ça va mieux! ;-) GTI-780 / MTI-780 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • CSS CSS GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • DOM API DOM GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • 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 Plusieurs types de noeuds: éléments, attributs, commentaires, textes Les noeuds ont des propriétés : nodeName, nodeType, nodeValue, parentNode, childNodes, attributes // changer la valeur d'un noeud monNoeud.nodeValue="nouvelle valeur"; GTI-780 / MTI-780 ETS - Montréal - 2009
    • 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 frère 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 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • JavaScript JavaScript GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • JavaScript – Le langage du fureteur JavaScript a été conçu pour ajouter de l'interactivité à une page Web. C'est le langage du fureteur. Le code JavaScript est exécuté par un interpréteur intégré au fureteur). JavaScript est derrière la technologie Ajax Manipulation du DOM (API document) Gestion des événements (usager) & système Gestion des formulaires Web Manipulation des CSS et animation Gestion du fureteur (API window) GTI-780 / MTI-780 ETS - Montréal - 2009
    • JavaScript – Langage à prototype /* Tout est instance... pas de vraie classe, triple équivalence : Objet<=>Tableau associatif<=>Fonction */ 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 ETS - Montréal - 2009
    • JavaScript – Notation JSON var auto = { fabricant : 'Toyota', modele : 'Prius', couleur : 'vert', proprio : { nom = 'Lyne'; } }; GTI-780 / MTI-780 ETS - Montréal - 2009
    • JavaScript – Fonctions Peuvent être affectées à des variables ou 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 function personne(nPrenom,nNom,nAge,nCouleurYeux,nOccupation) { this.prenom= nPrenom; this.nom = nNom; this.age=nAge; this.couleurYeux =nCouleurYeux; this.occupation = nOccupation; }GTI-780 / MTI-780 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • JavaScript - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • JavaScript - Inconvénients Problème de portabilité, incompatibilités des fureteurs, fuites de mémoire & longs chargements Pas de typage statique des variables en JavaSript Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est affectée. var unNombre = 2; unNombre = "deux"; JS n'a pas été conçu pour de gros logiciels Pas d'espace de nommage, manque de modularité et de capacité à grandir Mise au point et réutilisation difficiles, support inégal des outils et IDEs Problème de sécurité XSS (injection de scripts) Rareté des « programmeurs experts » en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
    • 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 ETS - Montréal - 2009
    • Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009