Mmi Web Design P2

WEB DESIGN
Master 2 MMI | Université Panthéon Sorbonne

Octobre 2009 : Partie 2/4 David Raichman Senior UX Designer @ OgilvyInteractive

1. HTML ET XHTML

Web Design Master 2 MMI Université Panthéon Sorbonne

1. HTML ET XHTML
A. Versions et DTD
La déclaration <!DOCTYPE> située avant la balise d’ouverture <HTML>, permet
de spéciﬁer 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

1. HTML ET XHTML
A. Versions et DTD
Encodage du document et la balise <head>

<meta httpequiv="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 XHTML
B. Eléments contenus et balises

<balise ouvrante>contenu</balise fermante>
{ élément


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>


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

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.


Balises bloc
<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>


Balises en ligne

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éciﬁque, comme la
<span> <span id=”ﬂuo”>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


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


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>


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

Firebug


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 ﬂux entre les deux paragraphes

4. introduire des citations et des liens dans le texte, mettre en emphase certaines
parties.

5. vériﬁer la validité XHTML 1.0 stricte du document


2. RUDIMENTS DE WIREFRAMING


A. Déﬁnition 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.


B. Degré de précision
Interactif

Low résolution Hi résolution

Statique

A. Degré de précision
Interactif
Prototype Prototype
papier digital


Sketching Ecrans (psd, jpg...)

Statique

Interactif
Prototype Prototype
papier digital



Statique

Interactif
Prototype Prototype
papier digital

Low résolution Wireframes Hi résolution


Statique

C. Hiérarchie visuelle
accès autre sites

logo branded header

navigation principale + recherche +panier

navigation produits accès
secondaire utilisateurs

footer


D. Zone visible d’écran

FR EN Les sites Renault

Logo RENAULT-MERCHANDISING.COM
ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES
ma liste mon panier
RECHERCHER UN PRODUIT toutes catégories go
5 articles 2 articles

Renault F1 team Renault F1 Team DEJA INSCRIT ?
Team
Sportswear Team Sportswear Identifiant
Bagagerie
Lunettes Homme Quicksilver Montre Bike Casio Mot de passe
Objets d’images
Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes
Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations
Doublure : 100% Doublure : 100%
polyester polyester
Renault Sport OK
Renault >Mot de passe oublié ?
Dacia
>Inscrivez-vous
+ voir la fiche produit + voir la fiche produit

Bagagerie Objets d’images
Personnel du groupe
Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault
100% nylon, disponible 100% nylon, disponible
en S, M, L, XL, XXL en S, M, L, XL, XXL
polyester polyester

Professionnel

Jouets Miniature

Polaire Histoire & collection Logan Berline DACIA 2005 1/43
polyester polyester


© RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU


D. Zone visible d’écran !"#$%&'

!"#$%&'($)*"+!,) FR EN Les sites Renault

Logo RENAULT-MERCHANDISING.COM
ma liste mon panier

Team

()*%&'
Bagagerie
Objets d’images
Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes
polyester polyester
Renault Sport OK
Dacia
>Inscrivez-vous

Personnel du groupe
polyester polyester

Professionnel

Jouets Miniature

polyester polyester






Logo !"""#$%
RENAULT-MERCHANDISING.COM
ma liste mon panier

Team

()*%&'

$()*+)(#,-(.//
Bagagerie
Objets d’images
Jouets

&'"#$%
100% nylon, disponible 100% nylon, disponible Mémoriser mes

!"#$%&'()$
polyester polyester
Renault Sport OK
Dacia
>Inscrivez-vous

Personnel du groupe
polyester polyester

Professionnel

Jouets Miniature

polyester polyester






Logo !"""#$%
RENAULT-MERCHANDISING.COM

960 ou 950 px
ma liste mon panier

Team

()*%&'

$()*+)(#,-(.//
Bagagerie
Objets d’images
Jouets

&'"#$%
100% nylon, disponible 100% nylon, disponible Mémoriser mes

!"#$%&'()$
polyester polyester
Renault Sport OK
Dacia
>Inscrivez-vous

Personnel du groupe
polyester polyester

Professionnel

Jouets Miniature

polyester polyester




3. CSS


3. CSS
A. Présentation, méthode de liaison, syntaxe
Il existe deux méthodes de liaisons des ﬁchiers *.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. 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 ;
/*un commentaire*/
}


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

3. CSS
B. Sélecteurs

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 ﬁn.
Ex : p{fontsize:10px !important;}


3. CSS
B. Sélecteurs

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. 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 {ﬁlter:alpha(opacity=0 à 100);}


3. CSS
D. Typographie et mise en forme de caractères

Les polices standards :


3. CSS

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

body {
fontfamily : ‘Trebuchet MS’, times, serif;
}


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


3. CSS

Les motsclés de tailles :
xxsmall, xsmall, small, medium, large, xlarge et xxlarge
Ces tailles dépendent du navigateur utilisé !


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


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’afﬁchage
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. 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…


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 workﬂow conception/réalisation

http://www.thegridsystem.org


3. CSS
G. Grid Design

Principe d’une grille de mise en page :


3. CSS
G. Grid Design

Exemple simple


3. CSS
H. Initiation au framework Blueprint

http://www.blueprintcss.org


Mmi Web Design P2

Contenu connexe

Tendances

En vedette

Similaire à Mmi Web Design P2

Mmi Web Design P2