Normes de base du Web
                         Sujets spéciaux en TI

                    Le Web 2.0 : concepts et outils
...
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 (Cascadin...
Pourquoi des normes?
  La fameuse guerre des fureteurs de la fin des années 90 a laissé comme
séquelles, un variété de dil...
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
...
XHTML
Quelque chose ne va pas?

     <balise1>


                    ?
       <balise2>
    </balise1>
       </balise2>
 ...
XHTML

Problème d'imbrication
           <balise1>        <balise1>
             <balise2>        <balise2>
          </ba...
XHTML – Règles de construction
Un noeud peut avoir plusieurs noeuds-enfants
Un noeud-enfant n'a qu'un seul parent direct
U...
XHTML – Types de balises
 Balises structurelles :
              <hml></html>, <body></body>, <head></head>

              ...
XHTML – Types de balises
 Balises de liaison :
              <a href=”...”></a> : liens

              <link type=”...” hr...
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
 ...
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ésen...
DOM
 Se divise en trois parties
              Core DOM, HTML DOM, XML DOM

 Noeud : Tout ce qu'il y a dans une page Web es...
DOM – Méthodes essentielles
  getElementById(“x”) retourne la balise dont l'Id est “x”.
 getElementsByTagName(“x”) retourn...
DOM – Exemple en JavaScript
Cet exemple affiche tous les liens d'une page Web


var listeLiens = document.getElementsByTag...
JavaScript



             JavaScript




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octobr...
JavaScript – Langage à prototype
/* Tout est instance... */
var auto = new Object();
/* Facile d'ajouter des propriétés (n...
JavaScript – Notation JSON
/* Notation JSON */
var auto = {
     fabricant : 'Toyota',
     modele : 'Prius',
     couleur...
JavaScript – Fonctions

   Peuvent être affectées à des variables
   Peuvent être affectées à des propriétés d'un protot...
JavaScript – Bibliothèques
  Prototype : la plus utilisée, assure une bonne compatibilité entre
 les fureteurs, nombre réd...
JavaScript - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octob...
JavaScript - Avantages
 Langage à prototypes (tout est instance, ajout & retrait
 facile de propriétés)
 Pas de compilatio...
JavaScript - Inconvénients
 Rareté des experts en JavaScript
 Beaucoup d'efforts pour contourner les incompatibilités
 des...
Quelques conseils...
 Avant de penser à l'apparence, pensez au contenu. Ce n'est
qu'une fois le code XHTML écrit que vous ...
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montré...
Prochain SlideShare
Chargement dans…5
×

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

1 285 vues

Publié le

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 2008

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 285
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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
  2. 2. Normes de base du Web GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  3. 3. 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
  4. 4. 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
  5. 5. XHTML XHTML GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  6. 6. 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
  7. 7. XHTML Quelque chose ne va pas? <balise1> ? <balise2> </balise1> </balise2> <balise3/> GTI-780 / MTI-780 Montréal, octobre 2008
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. CSS CSS GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  13. 13. 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
  14. 14. DOM API DOM GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  15. 15. 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
  16. 16. 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 GTI-780 / MTI-780 Montréal, octobre 2008
  17. 17. 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
  18. 18. 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;); } GTI-780 / MTI-780 Montréal, octobre 2008
  19. 19. JavaScript JavaScript GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  20. 20. 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
  21. 21. JavaScript – Notation JSON /* Notation JSON */ var auto = { fabricant : 'Toyota', modele : 'Prius', couleur : 'vert', proprio : { nom = 'Lyne'; } }; GTI-780 / MTI-780 Montréal, octobre 2008
  22. 22. 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
  23. 23. 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
  24. 24. JavaScript - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008

×