mmi web design p2
Post on 08-Jun-2015
1.400 Views
Preview:
TRANSCRIPT
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 :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLB. Eléments contenus et balises
<balise ouvrante>contenu</balise fermante>
élément{
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balise Description Exemple
<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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balise Description Exemple
<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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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 />
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLE. Pratique : l’ami ultime de DW...
Firebug
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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.
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGA. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGA. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Wireframes
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGC. Hiérarchie visuelle
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
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+
voir la fiche produit+ voir la fiche produit+
Logo
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
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+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
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+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
!"#$%&'()$
!"""#$%&'"#$
%$()*
+)(#,-(.//
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
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+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
!"#$%&'()$
!"""#$%&'"#$
%$()*
+)(#,-(.//
960 ou 950 px
Web Design Master 2 MMI Université Panthéon Sorbonne
3. CSS
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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>
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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 ;
propriété 2: valeur ;
propriété 3: valeur ;
/*un commentaire*/
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSB. 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
3. CSSB. 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
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);}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Les polices standards :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Déclaration des polices en CSS (en fonction des polices système disponibles) :
body {
fontfamily : ‘Trebuchet MS’, times, serif;
}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. 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
3. CSSD. 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
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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;}
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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…
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
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
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSH. Initiation au framework Blueprint
http://www.blueprintcss.org
top related