Realisation Web2 Front End
43
Passer à la réalisation Web 2.0 / Formation CSS2 avancée Janvier 2007
-
Upload
newsyntax -
Category
Technology
-
view
1.888 -
download
2
Transcript of Realisation Web2 Front End
Passer à la réalisation Web 2.0 /Formation CSS2 avancée
Janvier 2007
Introduction
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
Faire évoluer la réalisation web:
Annexe: A history of web development.pdf
http://www.webstandards.org/learn/faq/faq_fr/
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://en.wikipedia.org/wiki/W3C
http://www.w3.org/
La logique des normesDes 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.
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/
http://www.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
Un nouveau poste
L'émergence de la notion de "front-end architecture" et du "front-end architect"
(X)HTML
Javascript
CSSDonnéesFond
Forme
Fonction
XML et XHTML
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
Le XML
La structuration sémantique du contenu
http://fr.wikipedia.org/wiki/XML
Un document XML apparaît sous la forme d'un arbre de données balisées et imbriquées.
http://www.w3schools.com/xml/simple.xml
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
http://en.wikipedia.org/wiki/Document_Type_Definition
Les DTD
http://pompage.net/pompe/doctype/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 DTD
Annexe: 4-DTD-comparaison.pdf
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 contexte (ils sont en ligne s'ils apparaissent dans un élément en ligne ou un P)
BUTTON, DEL, IFRAME, INS, MAP, OBJECT, SCRIPT
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
CSS2
La dimension CSS2, Cascading Stylesheet.
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.
Un langage informatique orienté design visuel
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
http://www.csszengarden.com/
Styles définis directement dans le fichier HTML
• Balise <style type="text/css"></style> placée dans la balise <head></head>• Attribut <a style="" ... > placé à l'intérieur d'un élément
Styles définis dans un fichier externe appelé depuis le fichier HTML
• Balise <link rel="stylesheet" href="url.css" type="text/css"></link> placée dans la balise <head></head>
Styles définis dans un fichier externe appelé depuis une balise <style></style> ou un fichier CSS externe
• @import url( ) screen, print;
Insertion des CSS dans le XHTML
3 méthodes combinables
Types de media CSS2
10 types de media actuels. Une liste appelée à évoluer.
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é)
• <link rel="stylesheet" media="screen, print" href="impression.css">
• @import url(impression.css) print, embossed;
• @media print { #regle1 { propriété: valeur } }
Annexe: 5-CSS-media.pdf
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("yellow.png") 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
Les sélecteurs CSS2En 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.
* Correspond à tout élément. Sélecteur universel
E Correspond à tout élément E Sélecteur de type
E F Correspond à tout élément F qui est un descendant de tout élément E
Sélecteur contextuel
E:linkE:visited
Correspond à un élément E qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited).
Pseudo-classes de lien
E:active E:hover E:focus
Correspond à l'élément E au cours de certaines actions de l'utilisateur.
Pseudo-classes dynamiques
DIV.warning Correspond en HTML à un élément possédant un attribut classe ayant pour valeur "warning". A noter qu'un élément peut avoir plusieurs classes: div.warning.rouge
Sélecteur de classe
E#myid Correspond à tout élément E dont l'ID est "myid". Sélecteur d'id
E, F Regroupement de sélecteurs
Les sélecteurs compatibles:
Annexe: 8-CSS-selecteurs.pdf
Un sélecteur complexe s'écrira de la spécificité la plus large à la plus précise. Ex: a.warning#miid:hover
Les propriétés CSS2
Passage en revue général:
http://www.yoyodesign.org/doc/w3c/css2/propidx.html
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 et de fond
color, background, background-color, background-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 visuel et d'effets visuels
display, position, top, left, right, bottom, z-index, overflow, clip, visibility
Propriétés d'interface utilisateur
cursor, outline,
Annexe: 7-CSS-proprietes.pdf
Les valeurs de propriétés CSS2
Passage en revue général:
http://www.yoyodesign.org/doc/w3c/css2/propidx.html
Mots clés • Propres à chaque propriété• inherit
Unités de mesure unités relatives:• em • ex• px
unités absolues:• in• cm• mm• pt (point)• pc (pica)
pourcentages:• %
Annexe: 6-CSS-syntaxe.pdf 4.3.2Annexe: 7-CSS-proprietes.pdf
CSS2: positioning
"Position is everything"
3 schémas de positionnement
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#positioning-scheme
le flux normal Inclut le formatage en bloc des boîtes de bloc, le formatage en-ligne des boîtes en-ligne, le positionnement relatif des boîtes de bloc ou en-ligne
le flux absolu Dans ce modèle, une boîte est complètement retirée du flux normal (elle 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.
le flux flottant Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, 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.
"Position is everything"11 propriétés déterminantes pour le layout:
Display inline | block | none | inherit Contrôle l'affichage des éléments dans la page.
Width <longueur> | <pourcentage> | auto | inherit
Détermine la largeur d'un élément.
Height <longueur> | <pourcentage> | auto | inherit
Détermine la hauteur d'un élément.
Margin <marge-largeur>{1,4} | inherit Définit les marges externes d'un élément.
Position static | relative | absolute | fixed | inherit Détermine l'emplacement de l'élément.
Left <longueur> | <pourcentage> | auto | inherit
Détermine la distance entre la gauche de l'élément et la gauche de son éventuel conteneur, à défaut la page.
Top <longueur> | <pourcentage> | auto | inherit
Détermine la distance entre le haut de l'élément et le haut de son éventuel conteneur, à défaut la page.
Right <longueur> | <pourcentage> | auto | inherit
Détermine la distance entre la droite de l'élément et la droite de son éventuel conteneur, à défaut la page.
Bottom <longueur> | <pourcentage> | auto | inherit
Détermine la distance entre le bas de l'élément et le bas de son éventuel conteneur, à défaut la page.
Z-index auto | <entier> | inherit Définit l'ordre d'empilement.
Float left | right | none | inherit Spécifie de quel côté du conteneur l'élément doit s'aligner.
Annexe: 7-CSS-proprietes.pdf
Comportement par défaut: le flux normal
Annexe: positioning-defaut.html
"Position is everything"
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
Margin: espacement de réserve autour des éléments
"Position is everything"
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
Position: static (le flux normal)
"Position is everything"
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
Position: relative (le flux normal)
"Position is everything"
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
Position: absolute (le flux absolu)
"Position is everything"
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
Position: fixed (le flux absolu)
"Position is everything"
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
z-index: n
"Position is everything"
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
float: le flux flottant
"Position is everything"
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
CSS2: la cascade
La cascade CSS2La 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.
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
L'ordre de cascade
La cascade CSS2
Annexe: 9-CSS-cascade.pdf 6.4.3
Calculer le niveau de spécificité d'une règleLe calcul est basé sur 4 chiffres: a b c dLes 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=" " a=1 b=0 c=0 d=0 1, 0, 0, 0 1000
Une architecture de règles de style modulaire et contextuelle
La gestion CSS2 des sites volumineux
Maîtriser la compatibilitéAjouter un "patch" navigateur via JavascriptLe 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.
if(navigator.userAgent.indexOf('MSIE 6') >= 0 || navigator.userAgent.indexOf('MSIE 5') >= 0 ){ css = ".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 } "; document.write('<style type="text/css">'+css+'</style>')}
if(navigator.userAgent.indexOf('Safari') >= 0){ css = ".form-perso form .form-memoire { margin-top: 0.7em; margin-bottom: -1em } .form-perso form input.mail, .form-perso form input.password { width: 13em; }"; document.write('<style type="text/css">'+css+'</style>')}
<head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Talents.fr - accueil</title> <link rel="stylesheet" href="../aff_tech/talents.css" type="text/css" media="screen"> <script src="../aff_tech/js/scripts.js" type="text/javascript"> </script> HTML
Javascript
Javascript et DOM
Javascript et le DOM
http://developer.mozilla.org/en/docs/About_the_Document_Object_Model
Une définitionLe 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("a");for (var i = 0; i < anchorTags.length ; i++){ alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");}
http://developer.mozilla.org/en/docs/The_DOM_and_JavaScript
L'arbre du DOM (DOM tree)
http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
Les documents DOM sont représentés par une structure d'arbre, chaque point de l'arbre étant appelé un nœud.
Manipuler le DOM
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 à "identifiant".
document.getElementsByTagName('p')[n] Sélectionne la collection d'éléments dont la balise est "P"
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
Sélectionner des éléments
http://developer.mozilla.org/fr/docs/DOM:element
http://www.quirksmode.org/dom/compatibility.html
Manipuler le DOM
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
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.innerHTML = "nouveau texte" Modifier le contenu via le DOM
elm.style.width = "100px" Modifier les propriétés de styles via le DOM
elm.className = "rouge"; Modifier le nom de la classe d'un élément via le DOM
elm.setAttribute("alt","texte alternatif"); Modifier un attribut d'élément via le DOM
Modifier des éléments
http://developer.mozilla.org/en/docs/DOM:CSS
elm = document.getElementById('identifiant');
Manipuler le DOM
http://developer.mozilla.org/fr/docs/DOM:document
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.
Créer et supprimer des éléments
nElm = document.createElement('p');
nTxt = document.createTextNode('Nouveau texte');
nElm.appendChild(nTxt);
document.getElementsByTagName('body')[0].appendChild(nElm);
Utiliser des bibliothèques d'interface riche
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.
Script.aculo.us
Documentation Script.aculo.us en français:http://www.hadrien.eu/scriptaculous/
Démonstration:http://wiki.script.aculo.us/scriptaculous/show/Demos
Prototype:http://prototype.conio.net/
Utiliser des bibliothèques d'interface riche
http://script.aculo.us/
Quelques fonctions cruciales offertes par 'environnement Script.aculo.us/Prototype
Script.aculo.us
$(param) Raccourci de la méthode document.getElementById(''). La fonction peut recevoir une chaîne ou un objet. $('ident') ou $(ident)
Document.getElementsByClassName
Obtenir la collection des éléments ayant un 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, attributes, children )
Raccourci de la méthode de création d'un élément en DOM
http://wiki.script.aculo.us/scriptaculous/show/Builder
http://wiki.script.aculo.us/scriptaculous/show/Prototype
Les applications Ajax
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.
Une Nouvelle Approche pour les Applications Webhttp://www.scriptet.net/ajax-garrett.html
http://www.flickr.com/
http://docs.google.com/
http://www.google.com/calendar/
http://www.endless.com/
http://tv.yahoo.com/
http://fr.yahoo.com/
![Plaquette journées européennes du patrimoine-2014[web2]](https://static.fdocuments.fr/doc/165x107/558eb1781a28aba7558b4676/plaquette-journees-europeennes-du-patrimoine-2014web2.jpg)
