Realisation Web2 Front End

2,052 views
1,999 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,052
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Realisation Web2 Front End

  1. 1. Passer à la réalisation Web 2.0 / Formation CSS2 avancée Janvier 2007
  2. 2. Introduction Faire évoluer la réalisation web: Transformer un savoir-faire souvent empirique et artisanal en une démarche à la fois plus maîtrisée et plus industrielle. http://code.google.com/webstats/index.html Annexe: A history of web development.pdf
  3. 3. Les standards web un ensemble de langages normés et associés les uns aux autres selon des principes de bonnes pratiques. Les standards web ne sont pas des limites rigides complexifiant le processus de mise en œuvre d'un projet. Il s'agit de l'application d'une discipline raisonnée permettant d'ouvrir les perspectives de l'expérience utilisateur et d'accroître le potentiel de l'internet en général. HTML 4.01 - HyperText Markup Language XML 1.0 - Extensible Markup Language XHTML 1.0, 1.1 CSS - Feuilles de styles (Cascading Style Sheets) DOM - Document Object Model ECMAScript (JavaScript standardisé) http://www.webstandards.org/learn/faq/faq_fr/ http://en.wikipedia.org/wiki/W3C
  4. 4. La logique des normes Des spécifications mises au point et recommandées par un consortium qui jouent le rôle de références communes pour les éditeurs de logiciel et les créateurs de pages. http://www.w3.org/ Des outils de validation pour vérifier la conformité au regard des normes du code produit. https://addons.mozilla.org/firefox/60/ https://addons.mozilla.org/firefox/1843/
  5. 5. Un nouveau poste L'émergence de la notion de quot;front-end architecturequot; et du quot;front-end architectquot; Forme CSS Fond Données (X)HTML Fonction Javascript http://www.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
  6. 6. XML et XHTML
  7. 7. Le XML La structuration sémantique du contenu XML (Extensible Markup Language ou langage de balisage extensible) est un standard du World Wide Web Consortium qui sert de base pour créer des langages balisés spécialisés; c'est un « méta langage ». Il est suffisamment général pour que les langages basés sur XML, appelés aussi dialectes XML, puissent être utilisés pour décrire toutes sortes de données et de textes. Il s'agit donc partiellement d'un format de données. L'arbre du document Un document XML apparaît sous la forme d'un arbre de données balisées et imbriquées. http://fr.wikipedia.org/wiki/XML http://www.w3schools.com/xml/simple.xml
  8. 8. Le XHTML Le HTML à la mode XML • Tous les types de document commencent par une déclaration correcte de DOCTYPE ; • La structure d’un document conforme contient la déclaration DOCTYPE, un élément html avec le namespace XHTML déclaré, un élément <head> comprenant un élément <title>, ainsi qu’un élément <body> ; • Tous les éléments et noms d’attributs sont écrits en minuscule, et toutes les valeurs d’attributs figurent entre guillemets; • Tous les éléments non vides (par exemple li) se terminent par une balise de fin ; • Tous les éléments vides (par exemple br, hr, img) se terminent par une barre de division (<br />) ; • Le document est valide conformément à la DTD qu’il déclare. Annexe: 3-XHTML-norme.pdf
  9. 9. Les DTD HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot; quot;http://www.w3.org/TR/html4/loose.dtdquot;> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Frameset//ENquot; quot;http://www.w3.org/TR/html4/frameset.dtdquot;> XHTML 1.0 Strict, Transitional, Frameset <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;> XHTML 1.1 DTD <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> http://en.wikipedia.org/wiki/Document_Type_Definition http://pompage.net/pompe/doctype/ Annexe: 4-DTD-comparaison.pdf
  10. 10. Le lexique des éléments HTML/XHTML les éléments de type bloc ADDRESS, BLOCKQUOTE, DIV, DL, FIELDSET, FORM, H1,H2, H3, H4, H5, H6, HR, NOSCRIPT, OL, P, PRE, TABLE, UL, DD, DT, LI, TBODY, TD, TFOOT, TH, THEAD, TR les éléments de type bloc ou en ligne selon le BUTTON, DEL, IFRAME, INS, MAP, OBJECT, SCRIPT contexte (ils sont en ligne s'ils apparaissent dans un élément en ligne ou un P) les éléments de type en ligne A, ABBR, ACRONYM, B, BIG, BR, CITE, CODE, DFN, EM, I, INPUT, IMG, KBD, LABEL, Q, SAMP, SELECT, SMALL, SPAN, STRONG, SUB, SUP, TEXTAREA, TT,VAR http://www.htmlhelp.com/reference/html40/block.html http://www.htmlhelp.com/reference/html40/inline.html
  11. 11. CSS2
  12. 12. La dimension CSS2, Cascading Stylesheet. Un langage informatique orienté design visuel Les CSS sont un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en langage de balises. Son application la plus commune consiste à styler les pages web écrites en HTML ou en XHTML, mais le langage peut s'appliquer à toute sorte de document XML, y compris SVG and XUL. http://www.csszengarden.com/ Toute page web actuelle affichée dans un navigateur peut être traitée par 3 niveaux de feuilles de style: la feuille de style du navigateur, la feuille de style de l'utilisateur, la feuille de style dé l'auteur. La hiérarchie de ces 3 feuilles de style est comme suit: Author CSS > User CSS > User Agent CSS
  13. 13. Insertion des CSS dans le XHTML 3 méthodes combinables Styles définis directement dans • Balise <style type=quot;text/cssquot;></style> le fichier HTML placée dans la balise <head></head> • Attribut <a style=quot;quot; ... > placé à l'intérieur d'un élément • Balise <link rel=quot;stylesheetquot; href=quot;url.cssquot; Styles définis dans un fichier externe appelé depuis le type=quot;text/cssquot;></link> placée dans la balise fichier HTML <head></head> • @import url( Styles définis dans un fichier ) screen, print; externe appelé depuis une balise <style></style> ou un fichier CSS externe
  14. 14. Types de media CSS2 10 types de media actuels. Une liste appelée à évoluer. • <link rel=quot;stylesheetquot; media=quot;screen, printquot; href=quot;impression.cssquot;> • @import url(impression.css) print, embossed; • @media print { #regle1 { propriété: valeur } } all tout appareil aural synthétiseurs de parole braille appareils braille à retour tactile embossed impression braille handheld appareils portatifs (mobile) print support paginé, aperçu avant impression projection projecteurs, impressions sur transparents screen moniteurs couleurs tty télétype, terminaux ou appareils aux capacités d'affichage réduites tv télévision (basse résolution, couleur, défilement des pages limité, sonorisé) Annexe: 5-CSS-media.pdf
  15. 15. Syntaxe CSS2 Quelques règles de base: Case insensitive Tous les éléments directement liés à la syntaxe CSS Case sensitive Les éléments nommés: ids, classes, les polices; les URI... Caractères possibles [A-Za-z0-9] plus tiret (-) et souligné (_) excepté au début La règle ou jeu de règles #element { propriété1: valeur; propriété2: valeur } Le sélecteur la partie gauche de la règle: #element Le bloc de déclaration la partie droite de la règle: { propriété: valeur } Les commentaires /* */ Les URI background: url(quot;yellow.pngquot;) ou background: url ('yellow.png') ou background: url(yellow.png) ou Les URI relative sont calculées par rapport à l'adresse de la feuille de style qui les contient. Annexe: 6-CSS-syntaxe.pdf
  16. 16. Les sélecteurs CSS2 En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs sont nommés sélecteurs. Les sélecteurs compatibles: Correspond à tout élément. Sélecteur universel * Correspond à tout élément E Sélecteur de type E Correspond à tout élément F qui est un descendant de Sélecteur contextuel EF tout élément E Correspond à un élément E qui est une ancre dans la Pseudo-classes de lien E:link source dont le lien n'a pas été visité (:link) ou bien l'a déjà E:visited été (:visited). Correspond à l'élément E au cours de certaines actions Pseudo-classes E:active de l'utilisateur. dynamiques E:hover E:focus Correspond en HTML à un élément possédant un Sélecteur de classe DIV.warning attribut classe ayant pour valeur quot;warningquot;. A noter qu'un élément peut avoir plusieurs classes: div.warning.rouge Correspond à tout élément E dont l'ID est quot;myidquot;. Sélecteur d'id E#myid Regroupement de sélecteurs E, F Un sélecteur complexe s'écrira de la spécificité la plus large à la plus précise. Ex: a.warning#miid:hover Annexe: 8-CSS-selecteurs.pdf
  17. 17. Les propriétés CSS2 Passage en revue général: Propriétés de fonte font, font-family, font-size, font-style, font-variant, font- weight Propriétés de texte letter-spacing, word-spacing, line-height, vertical-align, text-align, text-decoration, text-indent, text-transform, white-space Propriétés de boîte* border, clear, float, height, width, padding, margin Propriétés de couleur color, background, background-color, background- et de fond image, background-repeat, background-position, background-attachment Propriétés de classification list-style-type, list-style-image, list-style-position Propriétés de formatage display, position, top, left, right, bottom, z-index, visuel et d'effets visuels overflow, clip, visibility Propriétés d'interface cursor, outline, utilisateur Annexe: 7-CSS-proprietes.pdf http://www.yoyodesign.org/doc/w3c/css2/propidx.html
  18. 18. Les valeurs de propriétés CSS2 Passage en revue général: • Propres à chaque propriété Mots clés • inherit unités relatives: Unités de mesure • em • ex • px unités absolues: • in • cm • mm • pt (point) • pc (pica) pourcentages: •% Annexe: 6-CSS-syntaxe.pdf 4.3.2 Annexe: 7-CSS-proprietes.pdf http://www.yoyodesign.org/doc/w3c/css2/propidx.html
  19. 19. CSS2: positioning
  20. 20. quot;Position is everythingquot; 3 schémas de positionnement Inclut le formatage en bloc des boîtes de bloc, le formatage en-ligne des le flux normal boîtes en-ligne, le positionnement relatif des boîtes de bloc ou en-ligne Dans ce modèle, une boîte est complètement retirée du flux normal (elle le flux absolu n'a pas d'influence sur les éléments de même degré de parenté survenant après elle), et est positionnée en fonction d'un bloc conteneur. Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, le flux flottant puis elle en est extirpée et repoussée le plus possible vers la droite ou la gauche. Le contenu peut s'écouler le long d'un flottant. http://www.yoyodesign.org/doc/w3c/css2/ visuren.html#positioning-scheme
  21. 21. quot;Position is everythingquot; 11 propriétés déterminantes pour le layout: inline | block | none | inherit Display Contrôle l'affichage des éléments dans la page. <longueur> | <pourcentage> | Détermine la largeur d'un élément. Width auto | inherit <longueur> | <pourcentage> | Détermine la hauteur d'un élément. Height auto | inherit <marge-largeur>{1,4} | inherit Margin Définit les marges externes d'un élément. static | relative | absolute | fixed | inherit Position Détermine l'emplacement de l'élément. <longueur> | <pourcentage> | Left Détermine la distance entre la gauche de l'élément auto | inherit et la gauche de son éventuel conteneur, à défaut la page. <longueur> | <pourcentage> | Top Détermine la distance entre le haut de l'élément et auto | inherit le haut de son éventuel conteneur, à défaut la page. <longueur> | <pourcentage> | Right Détermine la distance entre la droite de l'élément auto | inherit et la droite de son éventuel conteneur, à défaut la page. <longueur> | <pourcentage> | Bottom Détermine la distance entre le bas de l'élément et auto | inherit le bas de son éventuel conteneur, à défaut la page. auto | <entier> | inherit Z-index Définit l'ordre d'empilement. left | right | none | inherit Float Spécifie de quel côté du conteneur l'élément doit s'aligner. Annexe: 7-CSS-proprietes.pdf
  22. 22. quot;Position is everythingquot; Comportement par défaut: le flux normal Lorsque l'on place des éléments dans la page Web ceux-ci s'affichent dans le navigateur selon le principe d'un flux, c'est-à-dire que les boîtes des éléments se placent les uns après les autres suivant un comportement qui dépend de leur type: BLOCK ou INLINE: • Les éléments de type BLOCK • Les boîtes des éléments de type BLOCK se placent à la ligne et forcent également l'élément suivant à se placer en dessous. • Par défaut, les boîtes des éléments de type BLOCK occupent toute la largeur disponible. Par contre, ils n'occupent que la hauteur correspondante à leur contenu. • Leur taille peut être modifiée grâce aux propriétés WIDTH et HEIGHT. On écrira par exemple: width: 100px; height: 200px • Les éléments de type INLINE • Les boîtes des éléments de type INLINE ne créent pas de saut de ligne et laissent l'élément suivant se placer à leur droite s'il y a assez de place. Cependant si l'élément suivant est un élément BLOCK, il passera à la ligne comme le veut sa règle par défaut. • Les boîtes des éléments INLINE n'occupent que l'espace nécessaire à leur contenu. • La taille des boîtes des éléments INLINE ne peut pas être modifiée par les propriétés Width et Height. Il est possible de modifier le type naturel d'un élément au moyen de la propriété DISPLAY. Les valeurs possibles sont: BLOCK, INLINE ou NONE. None permettra de faire totalement disparaître un élément du flux Annexe: positioning-defaut.html
  23. 23. quot;Position is everythingquot; Margin: espacement de réserve autour des éléments La propriété MARGIN permet de créer une marge entre un élément et ce qui l'entoure. Elle se décline en MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT • Les éléments de type BLOCK peuvent avoir une marge qui préserve un espace au-dessus, sur la droite, en dessous et sur la gauche • Les éléments de type INLINE ne peuvent avoir de marge qui préserve un espace que sur la droite et sur la gauche Le décalage ainsi créé se répercute dans le flux sur les éléments suivants Annexe: positioning-margin.html
  24. 24. quot;Position is everythingquot; Position: static (le flux normal) Par défaut la propriété POSITION de tous les éléments possède la valeur: STATIC. Cela signifie qu'il suivent les règles de comportement dans le flux indiquées précédemment. En changeant cette valeur, on peut changer le comportement de l'élément par rapport au flux. Les 4 valeurs possibles pour la propriété POSITION sont: STATIC, RELATIVE, ABSOLUTE et FIXED Annexe: positioning-defaut.html
  25. 25. quot;Position is everythingquot; Position: relative (le flux normal) Lorsque l'on applique la valeur Relative à la propriété d'un élément, celui-ci dispose alors de la possibilité de se décaler tout en restant dans le flux et cela sans décaler les éléments qui l'entourent (contrairement à la propriété Margin). Pour accomplir cela, il faut utiliser les propriétés TOP, RIGHT, BOTTOM, LEFT qui vont permettre de décaler l'élément vers le haut, la droite, le bas et la gauche. Ainsi un élément en position relative qui aura la valeur 20px pour la propriété Top, se décalera de façon à se placer à 20px du haut de sa position naturelle dans le flux. Faisant cela il ne décalera pas l'élément qui le suit de 20px de plus mais le chevauchera de 20px. Annexe: positioning-relative.html
  26. 26. quot;Position is everythingquot; Position: absolute (le flux absolu) Lorsque l'on applique la valeur Absolute à la propriété d'un élément, celui-ci dispose alors de la possibilité de se décaler en sortant complètement du flux, c-à-d sans plus interférer sur la position des éléments qui l'entourent. Pour accomplir cela, il faut utiliser les propriétés TOP, RIGHT, BOTTOM, LEFT qui vont permettre de décaler l'élément vers le haut, la droite, le bas et la gauche. Ces coordonnées vont calculer la position de l'élément par rapport à la position du premier des éléments parents qui se trouvent en position relative ou absolute. Annexe: positioning-absolute.html
  27. 27. quot;Position is everythingquot; Position: fixed (le flux absolu) La valeur FIXED qui n'est pas encore compatible sur tous les navigateurs permet de placer l'élément selon le modèle appliqué avec la valeur absolute, à la différence près que le calcul se fait par rapport à la fenêtre du navigateur. Ce qui signifie que l'élément reste toujours visible au même endroit même lorsque l'on fait défiler la page. Annexe: positioning-fixed.html
  28. 28. quot;Position is everythingquot; z-index: n la propriété Z-INDEX ne concerne que les éléments en position: relative, absolute ou fixed. Elle permet de régler l'ordre de chevauchement des éléments qui pourraient se croiser en se superposant. Par défaut l'ordre d'arrivée des éléments dans la page détermine l'ordre d'empilement. Chaque élément se trouve plus haut dans la pile que l'élément qui le précède. Par défaut, tous les éléments ont 1 comme valeur de la propriété z-index. En appliquant un chiffre plus grand (par ex.: 2) on permet à un élément de remonter de niveau dans l'ordre d'empilement et de passer par dessus les éléments qui se trouvent après lui. Annexe: positioning-z-index.html
  29. 29. quot;Position is everythingquot; float: le flux flottant la propriété FLOAT permet de sortir un élément du flux en lui commandant une position flottante calé à gauche ou à droite de l'espace disponible. Par défaut la valeur est none c-à-d aucun décalage. Annexe: positioning-float.html
  30. 30. CSS2: la cascade
  31. 31. La cascade CSS2 La cascade de CSS définit un ordre de priorité, ou poids, pour chaque règle de style. Quand plusieurs règles sont mises en œuvre, celle avec le plus grand poids a la préséance. L'ordre de cascade Tri 1 Origine de la feuille de style: Author CSS > User CSS > User Agent CSS Tri 2 La spécificité des sélecteurs: sélecteur plus spécifique > sélecteur moins spécifique Tri 3 l'ordre de spécification: dernière règle survenue > première règle survenue !important Priorité: 2ème niveau de poids des règles. La priorité de l'origine change alors: User CSS > Author CSS Annexe: 9-CSS-cascade.pdf 6.4
  32. 32. La cascade CSS2 Calculer le niveau de spécificité d'une règle Le calcul est basé sur 4 chiffres: a b c d Les règles indiquées dans l'attribut style d'un élément reçoivent 1 pour le premier chiffre et 0 pour les 3 suivants, soit: 1000. Les règles provenant de la feuille de style reçoivent 0 pour le premier chiffre et pour les 3 suivants: • compter le nombre d'attribut ID dans le sélecteur (= a) • compter le nombre d'autres attributs et de pseudo-classes dans le sélecteur (= b) • compter le nombre de nom d'éléments dans le sélecteur (= c) • ignorer les pseudo-éléments. * a=0 b=0 c=0 d=0 0, 0, 0, 0 0 LI a=0 b=0 c=0 d=1 0, 0, 0, 1 1 UL LI a=0 b=0 c=0 d=2 0, 0, 0, 2 2 UL OL+LI a=0 b=0 c=0 d=3 0, 0, 0, 3 3 H1 + *[REL=up] a=0 b=0 c=1 d=1 0, 0, 1, 1 11 UL OL LI.red a=0 b=0 c=1 d=3 0, 0, 1, 3 13 LI.red.level a=0 b=0 c=2 d=1 0, 0, 2, 1 21 #x34y a=0 b=1 c=0 d=0 0, 1, 0, 0 100 style=quot; quot; a=1 b=0 c=0 d=0 1, 0, 0, 0 1000 Annexe: 9-CSS-cascade.pdf 6.4.3
  33. 33. La gestion CSS2 des sites volumineux Une architecture de règles de style modulaire et contextuelle
  34. 34. Maîtriser la compatibilité Ajouter un quot;patchquot; navigateur via Javascript Le patch qui va corriger via Javascript certaines valeurs assurer ainsi la compatibilité avec tous les navigateurs testés doit apparaître après l'inclusion de la feuille de style afin que les blocs de déclaration est une priorité supérieure à la feuille de style universelle. <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=iso-8859-1quot;> <title>Talents.fr - accueil</title> <link rel=quot;stylesheetquot; href=quot;../aff_tech/talents.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <script src=quot;../aff_tech/js/scripts.jsquot; type=quot;text/javascriptquot;> HTML </script> if(navigator.userAgent.indexOf('MSIE 6') >= 0 || navigator.userAgent.indexOf('MSIE 5') >= 0 ){ css = quot;.zone { margin: 0 0.2em } #col1 { margin-left: 0.8em } #zone-menu { margin: 0 0.25em; padding: 0.3em 1em; } #zone-entetes { margin: 0 0.25em; }#zone- entetes #titre-Talents h1 { margin-left: 0.5em } quot;; document.write('<style type=quot;text/cssquot;>'+css+'</style>') } if(navigator.userAgent.indexOf('Safari') >= 0){ css = quot;.form-perso form .form-memoire { margin-top: 0.7em; margin-bottom: -1em } .form-perso form input.mail, .form-perso form input.password { width: 13em; }quot;; document.write('<style type=quot;text/cssquot;>'+css+'</style>') Javascript }
  35. 35. Javascript et DOM
  36. 36. Javascript et le DOM Une définition Le Document Object Model est une API pour les documents HTML et XML. Il fournit une représentation structurelle du document, vous permettant de modifier son contenu et sa présentation visuelle. Toutes les propriétés, les méthodes et les événements accessibles aux développeurs web pour manipuler et créer des pages web sont organisés en objets (c-à-d, l'objet document qui représente le document lui-même, l'objet table qui représente un élément table HTML, etc). javascript DOM var anchorTags = document.getElementsByTagName(quot;aquot;); for (var i = 0; i < anchorTags.length ; i++) { alert(quot;Href of quot; + i + quot;-th element is : quot; + anchorTags[i].href + quot;nquot;); } http://developer.mozilla.org/en/docs/About_the_Document_Object_Model http://developer.mozilla.org/en/docs/The_DOM_and_JavaScript
  37. 37. L'arbre du DOM (DOM tree) Les documents DOM sont représentés par une structure d'arbre, chaque point de l'arbre étant appelé un nœud. http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
  38. 38. Manipuler le DOM Sélectionner des éléments Tous les objets correspondant aux éléments d'un document peuvent être atteints grâce à certaines fonctions du DOM. document.getElementById('identifiant') Sélectionne l'élément dont l'id unique est égale à quot;identifiantquot;. document.getElementsByTagName('p')[n] Sélectionne la collection d'éléments dont la balise est quot;Pquot; elm.parentNode Sélectionne le nœud parent elm.previousSibling Sélectionne le nœud immédiatement précédent dans la liste des enfants du parent elm.nextSibling Sélectionne le nœud immédiatement suivant dans la liste des enfants du parent http://developer.mozilla.org/fr/docs/DOM:element http://www.quirksmode.org/dom/compatibility.html
  39. 39. Manipuler le DOM Modifier des éléments L'aspect visuel et le contenu de tous les objets correspondant aux éléments d'un document peuvent être atteints grâce à certaines propriétés du DOM. elm = document.getElementById('identifiant'); elm.innerHTML = quot;nouveau textequot; Modifier le contenu via le DOM elm.style.width = quot;100pxquot; Modifier les propriétés de styles via le DOM elm.className = quot;rougequot;; Modifier le nom de la classe d'un élément via le DOM elm.setAttribute(quot;altquot;,quot;texte alternatifquot;); Modifier un attribut d'élément via le DOM http://developer.mozilla.org/en/docs/Gecko_DOM_Reference http://developer.mozilla.org/en/docs/DOM:CSS
  40. 40. Manipuler le DOM Créer et supprimer des éléments Des nouveaux éléments peuvent être créés et des éléments peuvent être supprimés à la volée grâce à certaines méthodes du DOM. document.createElement('div') Créer un élément document.createTextNode('nouveau texte') Créer un nœud texte elm.appendChild('nElm') Déplacer et insérer un élément à la fin de la liste des enfants d'un autre elm.insertBefore('nElm','refElm') Déplacer et Insérer un élément avant un élément de référence. elm.removeChild(elm2); Retirer un élément du document. nElm = document.createElement('p'); nTxt = document.createTextNode('Nouveau texte'); nElm.appendChild(nTxt); document.getElementsByTagName('body')[0].appendChild(nElm); http://developer.mozilla.org/fr/docs/DOM:document
  41. 41. Utiliser des bibliothèques d'interface riche Script.aculo.us http://script.aculo.us/ Script.aculo.us est une bibliothèque javascript basée sur Prototype. Elle permet d'intégrer très facilement des effets, des animations, des requêtes Ajax, etc. à votre site Web. Démonstration: http://wiki.script.aculo.us/scriptaculous/show/Demos Prototype: http://prototype.conio.net/ Documentation Script.aculo.us en français: http://www.hadrien.eu/scriptaculous/
  42. 42. Utiliser des bibliothèques d'interface riche Script.aculo.us http://script.aculo.us/ Quelques fonctions cruciales offertes par 'environnement Script.aculo.us/Prototype $(param) Raccourci de la méthode document.getElementById(''). La fonction peut recevoir une chaîne ou un objet. $('ident') ou $(ident) Document.getElementsByClass Obtenir la collection des éléments ayant un Name certain nom de classe. Element.addClassName Ajouter un nom de classe sans écraser la ou les classes précédentes Element.removeClassName Retirer un nom de classe sans écraser la ou les classes précédentes Builder.node( elementName, Raccourci de la méthode de création d'un attributes, children ) élément en DOM http://wiki.script.aculo.us/scriptaculous/show/Prototype http://wiki.script.aculo.us/scriptaculous/show/Builder
  43. 43. Les applications Ajax Une Nouvelle Approche pour les Applications Web http://www.scriptet.net/ajax-garrett.html Ajax n'est pas une technologie. C'est en fait plusieurs technologies, chacune s'étant développée par elle-même, et qui s'assemblent dans de nouvelles voies puissantes. Ajax incorpore: • une présentation basée sur des standards utilisant XHTML et CSS; • un affichage dynamique et une interaction utilisant le Modèle Objet Document; • l'échange de données et leur manipulation en utilisant XML et XSLT; • la récupération asynchrone de données en utilisant XMLHttpRequest; • et JavaScript pour les mettre en oeuvre ensemble. http://fr.yahoo.com/ http://tv.yahoo.com/ http://www.google.com/calendar/ http://docs.google.com/ http://www.flickr.com/ http://www.endless.com/

×