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


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

Interactif


Statique

Prototype papier


Prototype digital



Interactif


Statique

Prototype papier


Prototype digital



Interactif


Statique

Prototype papier


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

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

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

'

!"#$%&'()$

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

%$()*

+)(#,-(.//






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 : ‘Trebuchet MS’, 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



Exemple simple



Exemple simple



Exemple simple



3. CSSH. Initiation au framework Blueprint

http://www.blueprintcss.org

