SlideShare une entreprise Scribd logo
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

Contenu connexe

Tendances

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
JDerrien
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
Mohamed Anas Ben Othman
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
Emmanuelle Morlock
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
Abdelouahed Abdou
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
Fred Colantonio
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
Neovov
 
HTML
HTMLHTML
HTML
Neovov
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
Kénium
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 

Tendances (20)

Html
HtmlHtml
Html
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
cours Php
cours Phpcours Php
cours Php
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Formation web
Formation webFormation web
Formation web
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Css
CssCss
Css
 
Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
HTML
HTMLHTML
HTML
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 

Similaire à Normes de base du Web GTI780 & MTI780 ETS A09

hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
Fnot
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
CSS
CSSCSS
CSS
adil h
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 

Similaire à Normes de base du Web GTI780 & MTI780 ETS A09 (20)

hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
CSS
CSSCSS
CSS
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Introduction html
Introduction htmlIntroduction html
Introduction html
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 

Plus de Claude Coulombe

Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Claude Coulombe
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Claude Coulombe
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
Claude Coulombe
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
Claude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
Claude Coulombe
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérienceClaude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
Claude Coulombe
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
Claude Coulombe
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
Claude Coulombe
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
Claude Coulombe
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
Claude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
Claude Coulombe
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
Claude Coulombe
 

Plus de Claude Coulombe (20)

Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérience
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
 

Normes de base du Web GTI780 & MTI780 ETS A09

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