mmi web design p2

David Raichman Senior UX Designer @ OgilvyInteractive

WEB DESIGNMaster 2 MMI | Université Panthéon Sorbonne

Octobre 2009 : Partie 2/4

Web Design Master 2 MMI Université Panthéon Sorbonne

1. HTML ET XHTML

Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne

1. HTML ET XHTMLA. 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 :


1. HTML ET XHTMLA. 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


1. HTML ET XHTMLB. Eléments contenus et balises

<balise ouvrante>contenu</balise fermante>

élément{


1. HTML ET XHTMLB. 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>


1. HTML ET XHTMLC. Eléments contenus et balises

Balises de type bloc Balises de type en ligne

Un élément de type bloc peut contenir un ou plusieurs éléments bloc et/ou en ligne, sauf paragraphe <p> et titres <h1>, <h2>,…

Un élément de type ligne ne peut renfermer que d’autres éléments de type ligne.

Il existe en fait 2 sortes d’éléments de type ligne : «!remplacés!» et «!non remplacés!».

-Seuls les éléments remplacés acceptent des 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>.

Une mise en page se fera donc de préférence à l’aide de balise de type bloc. La plus indiquée pour cet usage est <div> : c’est une balise générique servant de conteneur neutre.

!"!#$%&'!"#$

!"!#$%&'%&'"()&%

(%)&*&$'+,$-.$/0

12.3"$'.245#$%&'67819

:2/;<'+=2.>0


Balise Description Exemple

<blockquote>

Introduit des citations longues. Par défaut, certains navigateurs prévoient une marge gauche aux blocs de citation, qu'on pourra bien sûr modifier en CSS.

<p>Kant disait :<p/><blockquote><p>l'espace et le temps sont les formes de notre sensibilité</p></blockquote>

<div>

Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la balise <span>. Elle sert à regrouper d'autres balises de type bloc ou ligne.

<div><p>Voici un texte <em>important</em></p><p>Et un autre texte <strong>imortant</strong></p></div>

<dl>

Liste de définitions, utile pour structurer les éléments associant des définitions ou contenus à des termes ou à des titres. Ces listes distinguent les titres (<dt>) des éléments de définition (<dd>)

<dl> <dt>Titre de l'élément</dt> <dd>description de l'élément</dd> <dd>Suite de la description</dd> </dl>

<form>

Balise délimitant un formulaire interactif. Elle contient généralement des éléments d'interface (champs de texte, boutons de validation, cases à cocher,…) Cet élément doit renfermer immédiatement d'autres élément de type bloc.

<form action="pagesuivante.php" method="get"><p><input type="text" name="recherche" /> <input type="submit" value="ok" /> </p> </form>

<h1>, <h2>, …<h6>

HTML prévoit six niveaux de titres, hiérarchiquement placé sous le titre principal (<h1>). Ces éléments constituent une exception à la règle des blocs ; ils ne peuvent contenir d'autres blocs.

<h1>Titre principal</h1>

Balises bloc



<ol>, <ul> Ces deux balises désignent des listes ordonnées (<ol>) ou à puces simples (<li>)

<ul> <li>premier objet de la liste</li> <li>second objet de la liste</li> </ul>

<p> Balise désignant un paragraphe de texte. Cet élément constitue une exception à la règle des blocs car il ne peut en contenir d'autres.

<p>Un paragraphe de texte</p>

<table> Tableau contenant des données. Les cellules du tableau sont d'abord rassemblés sous forme de rangé ou lignes (<tr>).

<table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> </table>

Balises bloc



<a>

Désigne un lien hypertexte. Elle s’accompagne de l’attribut href, qui renferme la cible du lien (son contenu représentant le texte à cliquer pour activer le lien)

<a href= "page5.htm">allez en page 5</a>

<em>

Met en emphase une portion de texte. Quand la police utilisée est droite, la plupart des navigateurs graphiques la traduisent comme une mise en italique.

<p>Voici un texte <em>important</em></p><p>Et un autre texte <strong>imortant</strong></p>

<img>

Inclut une image dans le document Cette balise es accompagné des attributs alt (texte alternatif) et src (qui indique le chemin de l’image). Les navigateurs supportent les formats gif, png et jpg

<img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ />

<q> Balise utilisée pour les citations courtes. On utilisera <blockquote> pour les citations longues.

<p>comme le dit Kant <q>la pensée…</q></p>

<span>

Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la balise <span>. Elle sert à regrouper d'autre balises de type bloc ou ligne.

<span id=”fluo”>le texte</span>

<strong> Indique un renforcement général représenté en gras dans les navigateurs graphiques <p>ceci est<strong>important ! </strong></p>

Balises en ligne


1. HTML ET XHTMLD. Différencier HTML et XHTML dans la pratique

La syntaxe obsolète :

‣Balise ouvrante sans balise fermante ex :<br>, <img src=!"xyz.jpg">,<p> ou <li>.

‣ Balises écrites en majuscules, ex :<P>

‣En XHTML, les balises vides ont la syntaxe suivante : <balise vide />


1. HTML ET XHTMLD. 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>


1. HTML ET XHTMLE. Pratique : l’ami ultime de DW...

Firebug


1. HTML ET XHTMLF. 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


2. RUDIMENTS DE WIREFRAMING


2. RUDIMENTS DE WIREFRAMINGA. 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.


2. RUDIMENTS DE WIREFRAMINGB. Degré de précision

Interactif

Low résolution Hi résolution

Statique


2. RUDIMENTS DE WIREFRAMINGA. Degré de précision

Interactif


Statique

Prototype papier

Sketching Ecrans (psd, jpg...)

Prototype digital



Interactif


Statique

Prototype papier


Prototype digital



Interactif


Statique

Prototype papier


Prototype digital

Wireframes


2. RUDIMENTS DE WIREFRAMINGC. Hiérarchie visuelle

produits

navigation principale + recherche +panier

branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites


2. RUDIMENTS DE WIREFRAMINGD. Zone visible d’écran

RENAULT-MERCHANDISING.COM

ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES

Les sites RenaultFR ｜ EN ｜

Mémoriser mes

informations

OK

Identifiant

Mot de passe

>Mot de passe oublié ?

>Inscrivez-vous

DEJA INSCRIT ?

Lunettes Homme Quicksilver

Team

Polaire Histoire & collection

Bagagerie

Logan Berline DACIA 2005 1/43

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature

Renault SportRenaultDacia

Renault F1 Team

© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU

mon panierma liste

2 articles5 articles


Jouets


Miniature

100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester






goRECHERCHER UN PRODUIT toutes catégories

Personnel du groupe Renault

Professionnel

voir la fiche produit+ voir la fiche produit+

voir la fiche produit+voir la fiche produit+

voir la fiche produit+


Logo






Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo

!"#$%&'($)*"+!,)

!"#$%&'()*%&

'






Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo

!"#$%&'($)*"+!,)

!"#$%&'()*%&

'

!"#$%&'()$

!"""#$%&'"#$

%$()*

+)(#,-(.//

960 ou 950 px


3. CSS


3. CSSA. 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>


3. CSSA. 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 ;



/*un commentaire*/

}


3. CSSB. Sélecteurs

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;

}

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;}




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;

}


3. CSSC. 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);}


3. CSSD. Typographie et mise en forme de caractères

Les polices standards :



Déclaration des polices en CSS (en fonction des polices système disponibles) :

body {

fontfamily : ‘Georgia’, times, serif;

}



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.



Les motsclés de tailles :

xxsmall, xsmall, small, medium, large, xlarge et xxlarge

Ces tailles dépendent du navigateur utilisé !


3. CSSE. 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


3. CSSF. 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;}


3. CSSF. 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…


3. CSSG. Grid Design

‣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

Le Grid Design a pour objectif de :

http://www.thegridsystem.org





Principe d’une grille de mise en page :


Exemple simple



3. CSSH. Initiation au framework Blueprint

http://www.blueprintcss.org




4. JAVASCRIPT


4. JAVASCRIPTA. 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.


4. JAVASCRIPTB. 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>


4. JAVASCRIPTC. 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

http://www.commentcamarche.net/javascript/jsvar.php3





4. JAVASCRIPTD. 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!»


4. JAVASCRIPTD. 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 ! ! !’)}


4. JAVASCRIPTE. Boucles conditionnelles

Boucle if, if …else et case


4. JAVASCRIPTF. Objets et méthode essentiels

Objet window

Méthodes : open, onloadPropriétés : location

Objet Screen

Propriétés : width, height

Objet Navigator

Propriétés : userAgent, platform, appVersion …Méthode : javascriptEnabled()

Objet Document

...


5. DOCUMENT OBJECT MODELING


DOCUMENT OBJECT MODELINGA. Les arbres

<!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>

Exercice introductif



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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd






Réponse



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.



body

«bleu»

div

«le ciel est bleu» em «comme le ciel.»

noeudDiv.parentNode

noeudDiv

noeudDiv.lastChild

noeudDiv.childNodes

noeudDiv.firstChild



Un arbre DOM est formé de différents types de noeuds :

‣noeuds d’éléments

‣noeuds d’attribut

‣noeuds de texte


DOCUMENT OBJECT MODELINGB. 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.

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“

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.


DOCUMENT OBJECT MODELINGC. 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»


DOCUMENT OBJECT MODELINGD. 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

http://jquery.com

http://jquery.com



Principes

Toutes les méthodes de l’objet document : getElement(s)By....( )

sont remplacées par une seule méthode.

$( )



Installation

<head>...<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript"> $(document).ready(function(){

$("a").click(function(event){ //mon action ici event.preventDefault(); }); });

</script>

...

</head>

$(document).ready(function(){ $("a").click(function(event){ //mon action ici event.preventDefault(); }); });

$("a").click(function(event){ //mon action ici event.preventDefault(); });



Sélecteurs

‣Identifiant : $(“#id“)

‣Classe : $(“.classe“)

‣Balise : $(“balise“)

‣...Pour accéder à une balise en particulier : $("balise:eq(numero dans la liste)“)



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()



Attributs

‣Setter un attribut :

$(sélecteur).attr(“attribut“,“valeur“)

$(sélecteur).attr({attribut1:“valeur“, attribut2:“valeur“,...})



CSS

‣changer un style :

$(sélecteur).css(“propriété“,“valeur“)



Effets

‣fadeIn, fadeOut

$(sélecteur).fadeIn(vitesse)

$(sélecteur).fadeOut(vitesse)

‣show, hide

$(sélecteur).show(vitesse)

$(sélecteur).hide(vitesse)

...


Vue d’ensemble

DOCUMENT OBJECT MODELINGD. Initiation au framework JQuery


6. RÉFÉRENCES


RÉFÉRENCESA. Bibliographie

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

Web Design et design d’interfaces

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


RÉFÉRENCESA. Bibliographie

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

Utilisabilité et prototypage

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


RÉFÉRENCESB. Webographie

Design d’interface, Design d’interaction, UX

http://wireframes.linowski.ca/

http://www.uie.com/

http://deeplinking.net/

http://www.interaction-design.org/

http://www.iconwerk.de/

http://www.uxmag.com/

http://www.archive.org

http://www.pixelsumo.com/

Ressources et tutoriaux

http://www.simplebits.com

http://www.pompage.net


http://developer.yahoo.com/ypatterns/

http://www.iconfinder.net/

http://www.thegridsystem.org/

http://fr.selfhtml.org

http://jquery.com

http://www.blueprint.com

http://bluecalc.groupion.com/

http://wireframes.linowski.ca

http://wireframes.linowski.ca

http://www.uie.com

http://www.uie.com

http://www.interaction-design.org

http://www.interaction-design.org

http://www.iconwerk.de

http://www.iconwerk.de

http://www.uxmag.com

http://www.uxmag.com







http://www.iconfinder.net

http://www.iconfinder.net





http://jquery.com

http://jquery.com

http://bleuprint.com

http://bleuprint.com

http://bluecalc.groupion.com

http://bluecalc.groupion.com