1. WEB DESIGN
Master 2 MMI | Université Panthéon Sorbonne
Octobre 2009 : Partie 2/4 David Raichman Senior UX Designer @ OgilvyInteractive
2. 1. HTML ET XHTML
Web Design Master 2 MMI Université Panthéon Sorbonne
3. 1. HTML ET XHTML
A. Versions et DTD
La déclaration <!DOCTYPE> située avant la balise d’ouverture <HTML>, permet
de spécifier la version de la norme utilisée dans le document (HTML 3.2,
XHTML1.1…)
Découpage d’une entrée DOCTYPE :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. 1. HTML ET XHTML
A. Versions et DTD
Encodage du document et la balise <head>
<meta http-equiv="ContentType" content="text/html;
charset=iso88591" />
iso88591 = langues d’Europe occidentale
iso885915 = complémentaire du précédent avec des
caractères supplémentaires type «!œ!» ou «!"!»
utf8 = permet d’utiliser la plupart des caractère de la
majorité des langues du monde : c’est un code de
l’Unicode
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
5. 1. HTML ET XHTML
B. Eléments contenus et balises
<balise ouvrante>contenu</balise fermante>
{ élément
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
6. 1. HTML ET XHTML
B. Eléments contenus et balises
Les balises acceptent parfois des caractéristiques supplémentaires pour les
distinguer ou les personnaliser.
<balise attribut="un attribut">contenu</
balise>
Les éléments peuvent s’imbriquer :
<h1 id="monTitre">Le titre <em>du document</em></h1>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
7. 1. HTML ET XHTML
C. Eléments contenus et balises
Balises de type bloc Balises de type en ligne
Un élément de type bloc peut contenir un ou Un élément de type ligne ne peut renfermer que
plusieurs éléments bloc et/ou en ligne, sauf d’autres éléments de type ligne.
paragraphe <p> et titres <h1>, <h2>,…
Une mise en page se fera donc de préférence à Il existe en fait 2 sortes d’éléments de type ligne :
l’aide de balise de type bloc. La plus indiquée pour «!remplacés!» et «!non remplacés!».
cet usage est <div> : c’est une balise générique -Seuls les éléments remplacés acceptent des
servant de conteneur neutre. attributs de dimensions (height, width). Il s’agit des
éléments <img>, <input>, <textarea>,<select> et
<object>.
- Les autres n’ont pas de dimension à proprement
parler, et n’occupent que la place nécessaire à leur
contenu. C’est le cas de <strong>,<em> et <a>.
(%)&*&$'+,$-.$/0
!"!#$%&'!"#$
:2/;<'+=2.>0
!"!#$%&'%&'"()&%
12.3"$'.245#$%&'67819 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
8. Balises bloc
Balise Description Exemple
Introduit des citations longues.
Par défaut, certains navigateurs prévoient une marge <p>Kant disait :<p/><blockquote><p>l'espace et le temps
<blockquote>
gauche aux blocs de citation, qu'on pourra bien sûr sont les formes de notre sensibilité</p></blockquote>
modifier en CSS.
Conteneur générique de type bloc.
Cette balise n'apporte pas de sens spécifique, <div><p>Voici un texte <em>important</em></p><p>Et un
<div>
comme la balise <span>. Elle sert à regrouper autre texte <strong>imortant</strong></p></div>
d'autres balises de type bloc ou ligne.
<dl>
Liste de définitions, utile pour structurer les éléments
<dt>Titre de l'élément</dt>
associant des définitions ou contenus à des termes ou
<dl> <dd>description de l'élément</dd>
à des titres. Ces listes distinguent les titres (<dt>) des
<dd>Suite de la description</dd>
éléments de définition (<dd>)
</dl>
Balise délimitant un formulaire interactif. Elle contient <form action="pagesuivante.php"
généralement des éléments d'interface (champs de method="get"><p><input type="text" name="recherche" />
<form> texte, boutons de validation, cases à cocher,…) Cet <input type="submit" value="ok" />
élément doit renfermer immédiatement d'autres </p>
élément de type bloc. </form>
HTML prévoit six niveaux de titres, hiérarchiquement
<h1>, <h2>, … placé sous le titre principal (<h1>). Ces éléments
<h1>Titre principal</h1>
<h6> constituent une exception à la règle des blocs ; ils ne
peuvent contenir d'autres blocs.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
9. Balises bloc
Balise Description Exemple
<ul>
Ces deux balises désignent des listes ordonnées <li>premier objet de la liste</li>
<ol>, <ul>
(<ol>) ou à puces simples (<li>) <li>second objet de la liste</li>
</ul>
Balise désignant un paragraphe de texte. Cet élément
<p> constitue une exception à la règle des blocs car il ne <p>Un paragraphe de texte</p>
peut en contenir d'autres.
<table>
<tr>
Tableau contenant des données. Les cellules du <td>cellule 1</td>
<table> tableau sont d'abord rassemblés sous forme de rangé <td>cellule 2</td>
ou lignes (<tr>). </tr>
</table>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
10. Balises en ligne
Balise Description Exemple
Désigne un lien hypertexte. Elle s’accompagne
de l’attribut href, qui renferme la cible du lien
<a> <a href= "page5.htm">allez en page 5</a>
(son contenu représentant le texte à cliquer
pour activer le lien)
Met en emphase une portion de texte. Quand la
police utilisée est droite, la plupart des <p>Voici un texte <em>important</em></p><p>Et un autre
<em>
navigateurs graphiques la traduisent comme texte <strong>imortant</strong></p>
une mise en italique.
Inclut une image dans le document Cette balise
es accompagné des attributs alt (texte
<img> alternatif) et src (qui indique le chemin de <img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ />
l’image). Les navigateurs supportent les formats
gif, png et jpg
Balise utilisée pour les citations courtes. On
<q> utilisera <blockquote> pour les citations <p>comme le dit Kant <q>la pensée…</q></p>
longues.
Conteneur générique de type bloc. Cette balise
n'apporte pas de sens spécifique, comme la
<span> <span id=”fluo”>le texte</span>
balise <span>. Elle sert à regrouper d'autre
balises de type bloc ou ligne.
Indique un renforcement général représenté en
<strong> <p>ceci est<strong>important ! </strong></p>
gras dans les navigateurs graphiques
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
11. 1. HTML ET XHTML
D. Différencier HTML et XHTML dans la pratique
La syntaxe obsolète :
‣ Balises écrites en majuscules, ex :<P>
‣Balise ouvrante sans balise fermante ex :
<br>, <img src=!"xyz.jpg">,<p> ou <li>.
‣En XHTML, les balises vides ont la syntaxe suivante :
<balise vide />
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
12. 1. HTML ET XHTML
D. Différencier HTML et XHTML dans la pratique
Les balises obsolètes :
Ce sont les balises qui donnent des indications
de mise en forme :
<font>, <center>, <u>, <s>, <i>, <b>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
13. 1. HTML ET XHTML
E. Pratique : l’ami ultime de DW...
Firebug
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
14. 1. HTML ET XHTML
F. Pratique : Utilisation de Dreamweaver
1. créer un titre de page et un titre général
2. créer une page avec deux paragraphes et deux soustitres.
3. ajouter une image dans le flux entre les deux paragraphes
4. introduire des citations et des liens dans le texte, mettre en emphase certaines
parties.
5. vérifier la validité XHTML 1.0 stricte du document
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
15. 2. RUDIMENTS DE WIREFRAMING
Web Design Master 2 MMI Université Panthéon Sorbonne
16. 2. RUDIMENTS DE WIREFRAMING
A. Définition des wireframes
Les wireframes sont des représentations visuelles qui
capturent à elles seules l’ensemble des décisions stratégiques,
fonctionnelles, d’architecture d’information et d’ergonomie.»
Ils servent de référence pour le design graphique et pour le
développement du projet digital.
Ils contiennent différents niveaux de précision selon le contexte.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
17. 2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
18. 2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
19. 2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
20. 2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
21. 2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
22. 2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
23. 2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
24. 2. RUDIMENTS DE WIREFRAMING
C. Hiérarchie visuelle
accès autre sites
logo branded header
navigation principale + recherche +panier
navigation produits accès
secondaire utilisateurs
footer
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
29. 3. CSS
A. Présentation, méthode de liaison, syntaxe
Il existe deux méthodes de liaisons des fichiers *.css externes
#Une méthode classique utilisant les attributs de la balise <link>
(balise autofermante)
<link href=“monstyle.css" rel="stylesheet" type="text/css" />
#Une méthode qui utilise une propriété CSS 2, nommée @import. Ce n’est pas une
balise HTML !
<style type="text/css">
@import url(impression.css) print;
@import url(portable.css) handheld;
@import url(normal.css) screen
</style>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
30. 3. CSS
A. Présentation, méthode de liaison, syntaxe
Le CSS est fondé sur l’héritage et la cascade
La syntaxe du CSS utilise les accolades :
sélecteur {
propriété 1: valeur ;
propriété 2: valeur ;
propriété 3: valeur ;
/*un commentaire*/
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
31. 3. CSS
B. Sélecteurs
Voir également document ci-joint
Un sélecteur permet d’identifier les lieux d’application d’un style défini.
Il existe 3 types de sélecteurs :
‣Les sélecteurs de balise (déjà vu)
‣Les sélecteurs de classes permettant d’appliquer un style à un ensemble
d’éléments indépendamment du type de balise.
.classe {
propriété n: valeur;
}
‣Les sélecteurs d’identifiants (id est le nom attribué à un élément unique dans le
doc HTML).
#identifiant{
propriété n: valeur;
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
32. 3. CSS
B. Sélecteurs
Voir également document ci-joint
Un sélecteur permet de trouver le chemin arborescent d’une balise à laquelle on
veut appliquer un style (voir doc)
Ex : <div id=‘intro’><p>du texte</p></div>
Pour donner un style à <p>, on utilise la syntaxe :
#intro p {…} ou div p{...}
Dans le contexte de la cascade, deux règles de styles peuvent êtres
contradictoires dans ce cas c’est la dernière règle lue qui l’emporte.
La mention !important permet de surclasser une règle donnée même si elle n’est
pas lue à la fin.
Ex : p{fontsize:10px !important;}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
33. 3. CSS
B. Sélecteurs
Voir également document ci-joint
Syntaxe de regroupements :
On peur regrouper des sélecteurs pour une même famillepropriété
ex :
.texte, p, h1, h2 {
Marginleft : 0;
}
On peut regrouper des propriétés autour d’une famille quelque soient ses propriétés
ex :
p {
font: italic bold 120% Arial, sansserif;
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
34. 3. CSS
C. Gestion des couleur et de la transparence
En CSS, le système de couleur est noté soit en hexadécimal
(blanc = #000000),
soit par nom des couleurs principales ex : ‘yellow’ pour jaune.
La gestion de la transparence est un hack. A utiliser avec précaution.
Son utilisera sera standardisé dans CSS3.
Firefox {opacity: de 0 à 1;}
IE78 {filter:alpha(opacity=0 à 100);}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
35. 3. CSS
D. Typographie et mise en forme de caractères
Les polices standards :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
36. 3. CSS
D. Typographie et mise en forme de caractères
Déclaration des polices en CSS (en fonction des polices système disponibles) :
body {
fontfamily : ‘Georgia’, times, serif;
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
37. 3. CSS
D. Typographie et mise en forme de caractères
Unité de taille des polices en CSS
Unité de taille fixe : en points (pt) (1pt = 0.35mm)
Unité de taille relative : px, % et cadratin
en «!M!» (em) pour la largeur
En «!X!» (ex) pour la hauteur
Définit relativement à la taille déférence du texte contenu dans le
conteneur.
Le dimensionnement relatif permet d’afficher, via le navigateur, la police en
plus grand ou plus petit avec une mise en page fluide.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
38. 3. CSS
D. Typographie et mise en forme de caractères
Les motsclés de tailles :
xxsmall, xsmall, small, medium, large, xlarge et xxlarge
Ces tailles dépendent du navigateur utilisé !
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
39. 3. CSS
E. Bordure, arrièreplan et images
‣Style de bordure
‣Épaisseur des bordures
‣Couleur des bordures
‣Arrières-plans et images de fond
‣Positionnement et répétition de l’image
‣Fixation de l’image/contenu
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
40. 3. CSS
F. Positionnement
Le modèle des boîtes :
Pb fondamental : le modèle de boîte Microsoft est différent du modèle standard à
différence d’affichage
Modèle standard : Largeur à l’écran = width+padding+border
Modèle Microsoft : Largeur à l’écran = width
Solution possible : le hack universel *{Margin:0; Padding:0;}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
41. 3. CSS
F. Positionnement
Il y a trois types de positionnement en CSS :
A. Positionnement dans le flux courant (flow)
B. Positionnement relatif
C. Positionnement absolu et notion de z-index (calque)
Applications : centrage, float, menu…
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
42. 3. CSS
G. Grid Design
Le Grid Design a pour objectif de :
‣Créer un environnement structurant pour organiser spatialement une interface
‣Mettre en place un framework CSS facilitant l’organisation des éléments par
rapport à une grille
‣Optimiser le workflow conception/réalisation
http://www.thegridsystem.org
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
43. 3. CSS
G. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
44. 3. CSS
G. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
45. 3. CSS
G. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
46. 3. CSS
G. Grid Design
Exemple simple
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
47. 3. CSS
G. Grid Design
Exemple simple
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
48. 3. CSS
G. Grid Design
Exemple simple
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
49. 3. CSS
G. Grid Design
Exemple simple
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
50. 3. CSS
H. Initiation au framework Blueprint
http://www.blueprintcss.org
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
52. 4. JAVASCRIPT
A. Présentation et principe de fonctionnement
Javascript est un langage qui gère le comportement des navigateurs. Il
est dérivé de la norme ECMA, comme ActionScript.
Javascript est sensible au navigateur utilisé : certains objets n’existe pas
ou sont mal interprétés pour un navigateur donné !
Javascript est un langage interprété par les navigateurs, cela suppose
que leur interpréteurs doit être actif pour que les scripts fonctionnent.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
53. 4. JAVASCRIPT
B. Méthode d’inclusion
Afin de séparer forme, structure et comportement, on externalise les scripts javascript.
<script type="text/javascript“ src=“url_du_script.js”></script>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
54. 4. JAVASCRIPT
C. Types
‣Nombres entiers et nombres décimaux (float)
‣(opérateurs <,>, ==,…)
‣Booléen
‣(Nommage, valeurs, opérateurs)
‣Chaîne de caractères (String)
‣(Concaténation, méthodes indexOf, length, substring,…)
‣Les convertisseurs de type
‣parseInt() permet de convertir une variable en nombre
‣parseFloat() permet de convertir une variable en nombre décimal
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
55. 4. JAVASCRIPT
D. Variables et fonctions
Les variables sont typées mais en Javascript le type est implicite.
Une fonction se caractérise par les arguments qu’elles reçoit
(il peut y en avoir aucun) et le type qu’elle renvoie.
Ex :
function donneUnNombre(nombre){
return ‘’!le nombre entré est ‘’+nombre
}
# Les arguments sont des nombres mais la fonction retourne une chaîne de caractère.
# Une fonction qui ne retourne rien est dite «!vide!»
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
56. 4. JAVASCRIPT
D. Variables et fonctions
Les variables sont typées mais en Javascript le type est implicite.
Une fonction se caractérise par les arguments qu’elles reçoit
(il peut y en avoir aucun) et le type qu’elle renvoie.
Ex :
function donneUnNombre(nombre){
return ‘’!le nombre entré est ‘’+nombre
}
" Les arguments sont des nombres mais la fonction retourne une chaîne de caractère.
" Une fonction qui ne retourne rien est dite «!vide!»
Ex :
function helloWorld(){
alert(‘hello World ! ! !’)}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
57. 4. JAVASCRIPT
E. Boucles conditionnelles
Boucle if, if …else et case
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
60. DOCUMENT OBJECT MODELING
A. Les arbres
Exercice introductif
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>essai DOM</title>
</head>
<body>
<p>voici un paragraphe</p>
<div>
le ciel est <em>bleu</em> comme la mer.
</div>
<p>un dernier paracgraphe avec un <a
href="lien.html">lien</a>.</p>
</body>
</html>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
61. DOCUMENT OBJECT MODELING
A. Les arbres
Compléter l’arbre suivant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>essai DOM</title>
</head>
<body>
<p>voici un paragraphe</p>
<div>
le ciel est <em>bleu</em> comme la mer.
</div>
<p>un dernier paracgraphe avec un <a
href="lien.html">lien</a>.</p>
</body>
</html>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
63. DOCUMENT OBJECT MODELING
A. Les arbres
Les navigateurs organisent les balises en structure arborescente.
Cette structure s’appelle un arbre DOM. Il représente la façon
avec laquelle un navigateur charge une page HTML.
Le navigateur commence par la racine <html>, puis détermine
quels sont les éléments en dessous comme <head> et <body> qui
formes des branches partant de l’élément <html> et ainsi de suite.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
64. DOCUMENT OBJECT MODELING
A. Les arbres
body
noeudDiv.parentNode
div
noeudDiv
noeudDiv.childNodes
noeudDiv.firstChild «le ciel est bleu» em «comme le ciel.» noeudDiv.lastChild
«bleu»
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
65. DOCUMENT OBJECT MODELING
A. Les arbres
Un arbre DOM est formé de différents types de noeuds :
‣noeuds d’éléments
‣noeuds d’attribut
‣noeuds de texte
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
66. DOCUMENT OBJECT MODELING
B. Méthodes
getElementById( ‘’identifiant’’) est une méthode de l’objet document.
Il permet de cibler une balise associée à un identifiant
Il s’écrit au singulier car il désigne un élément unique.
getElementsByTagName( ‘‘balise’’) est une méthode de l’objet document.
Il permet de cibler toutes les balises identiques d’un document
Il s’écrit au pluriel car il désigne une liste d’élements.
Exemple :
Les style css peuvent être changé à la volé
mais il faut changer la syntaxe de la façon suivante :
document.getElementsByTagName(“div“) [0].style.backgroundColor=“#000000“
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
67. DOCUMENT OBJECT MODELING
C. Applications
‣ Changement d’un élément CSS à la volé
‣ Changement d’un css global à la volé
‣ Jeux avec la visibilité
‣ Création d’un «visionneur non rafraichissant»
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
68. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
http://jquery.com/
‣Ecriture condensée et plus intuitive que DOM
‣Compatibilité IE 6+, FF 2+, Safari3.0+, Chrome, Opera9.0+
‣Adopté par les leader du web : Google, Mozilla.org, Wordpress...
‣Communauté très active
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
69. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
Principes
Toutes les méthodes de l’objet document : getElement(s)By....( )
sont remplacées par une seule méthode.
$( )
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
71. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
Sélecteurs
‣Identifiant : $(“#id“)
‣Classe : $(“.classe“)
‣Balise : $(“balise“)
‣...
Pour accéder à une balise en particulier : $("balise:eq(numero dans la liste)“)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
72. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
Sélecteurs
‣firstChild d’un noeud : $(“leNoeud:first“)
‣lastChild d’un noeud : $(“leNoeud:last“)
Pour créer un enfant, on utilise la méthode
$(“leNoeud“).append(“<balise>blabla</balise>...“)
Pour retirer un enfant : $(“l’enfant“).remove()
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
73. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
Attributs
‣Setter un attribut :
$(sélecteur).attr(“attribut“,“valeur“)
$(sélecteur).attr({attribut1:“valeur“,
attribut2:“valeur“,...})
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
74. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
CSS
‣changer un style :
$(sélecteur).css(“propriété“,“valeur“)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
75. DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
Effets
‣fadeIn, fadeOut
$(sélecteur).fadeIn(vitesse)
$(sélecteur).fadeOut(vitesse)
‣show, hide
$(sélecteur).show(vitesse)
$(sélecteur).hide(vitesse)
...
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
76. DOCUMENT OBJECT MODELING
D. Initiation au framework JQuery
Vue d’ensemble
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
77. DOCUMENT OBJECT MODELING
D. Initiation au framework JQuery
Vue d’ensemble
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
79. RÉFÉRENCES
A. Bibliographie
Web Design et design d’interfaces
Brown D., Communicating Design, 2007, New Riders
Hoekman, Designing the moment : web interface design concept in action, 2008, New Riders
Hoekman, Designing the Obvious: A Common Sense Approach to Web Application Design, 2007, New Riders
Tidwell, Designing Interfaces, 2005, O’Reilly
Elam K., Grid Systems, 2004, Princeton Architectural Press
Design d’interaction
Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley
Sharp, Interaction Design: Beyond Human-Computer Interaction, Wiley
Saffer, Designing for interaction, 2007, New Riders
Moggridge, Designing Interactions, MIT Press, 2006
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
80. RÉFÉRENCES
A. Bibliographie
Utilisabilité et prototypage
Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders
Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles
Baccino, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès
Snyder, Paper Prototyping, 2003, Morgan Kaufmann
Web Authoring
Erik T.Ray , Introduction à XML, O’Reilly
Chuck Musciano and Bill Kennedy, HTML & XHTML: The Definitive Guide (6th Edition), O’Reilly
Christopher Schmitt, CSS Cookbook, O’Reilly
Dom Scripting, 2005, Apress
Ajax, Tête la premiere, 2006, O’Reilly
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
81. RÉFÉRENCES
B. Webographie
Design d’interface, Design d’interaction, UX Ressources et tutoriaux
http://wireframes.linowski.ca/ http://www.simplebits.com
http://www.uie.com/ http://www.pompage.net
http://deeplinking.net/ http://www.thegridsystem.org
http://www.interaction-design.org/ http://developer.yahoo.com/ypatterns/
http://www.iconwerk.de/ http://www.iconfinder.net/
http://www.uxmag.com/ http://www.thegridsystem.org/
http://www.archive.org http://fr.selfhtml.org
http://www.pixelsumo.com/ http://jquery.com
http://www.blueprint.com
http://bluecalc.groupion.com/
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne