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




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

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

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


4. JAVASCRIPT


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.


4. JAVASCRIPT
B. Méthode d’inclusion
Aﬁn de séparer forme, structure et comportement, on externalise les scripts javascript.

<script type="text/javascript“ src=“url_du_script.js”></script>


4. JAVASCRIPT
C. Types
‣Nombres entiers et nombres décimaux (ﬂoat)
‣(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


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


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


4. JAVASCRIPT
E. Boucles conditionnelles

Boucle if, if …else et case


4. JAVASCRIPT
F. Objets et méthode essentiels
Objet window

Méthodes : open, onload
Proprié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 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>


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>


A. Les arbres
Réponse


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.


A. Les arbres

body
noeudDiv.parentNode

div
noeudDiv

noeudDiv.childNodes

noeudDiv.ﬁrstChild «le ciel est bleu» em «comme le ciel.» noeudDiv.lastChild

«bleu»


A. Les arbres

Un arbre DOM est formé de différents types de noeuds :
‣noeuds d’éléments
‣noeuds d’attribut
‣noeuds de texte


B. Méthodes
getElementById( ‘’identiﬁant’’) est une méthode de l’objet document.
Il permet de cibler une balise associée à un identiﬁant
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“


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»


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


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(){
$(document).ready(function(){
$("a").click(function(event){
//mon action ici
ici
//mon action action ici
//mon
event.preventDefault();
});
}); });
});
});

</script>

...

</head>


Sélecteurs

‣Identiﬁant : $(“#id“)
‣Classe : $(“.classe“)
‣Balise : $(“balise“)
‣...
Pour accéder à une balise en particulier : $("balise:eq(numero dans la liste)“)


Sélecteurs

‣ﬁrstChild 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)
...


D. Initiation au framework JQuery
Vue d’ensemble


6. RÉFÉRENCES


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


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 efﬁcaces, 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 Deﬁnitive 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É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.iconﬁnder.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/


MMI Web Design P2

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a MMI Web Design P2

Semelhante a MMI Web Design P2 (20)

Mais de David Raichman

Mais de David Raichman (10)

MMI Web Design P2