"San Francisco in the Victorian Style"

Web Design – SRC 2 / TP
Conception et Production d'un Prototype Web
"San Francisco in the Victorian Style"
En vous appuyant sur les consignes ci-dessous et les documents fournis par le client, vous réaliserez le prototype HTML/CSS de la page
d'accueil et d'une page de contenu d'un site consacré à l'architecture victorienne à San Francisco, en lien avec une exposition du Museum of
the Legion of Honour. Votre travail de conception sera basé sur une documentation de projet élaborée pour l'essentiel dans le cadre des
TD, comprenant en outre un gabarit et une maquette graphique détaillée.
Un aspect important de ce travail portera sur la mise en page des contenus à l'aide d'une grille typographique (cf. http://960.gs/). Le soin
apporté aux choix des polices et au traitement des différents niveaux de texte constituera un des aspects essentiels de ce travail, pour la partie
conceptuelle. Il faudra donc être particulièrement attentif aux détails parfois infimes qui relèvent de la composition des textes: contrastes de
tailles, de couleur, de graisse, interligne, alignements et justification, espaces de respirations, etc.
L'intégration et la mise en ligne du prototype HTML5/CSS2* permettra une révision des deux langages et un approfondissement en
autoformation guidée. La rédaction du code, son organisation et sa facilité de lecture grâce à l'insertion de commentaires feront l'objet d'une
attention particulière lors de l'évaluation.
* la norme CSS3 ne sera pas utilisée en raison d'un trop grand nombre de problèmes de compatibilité.
Livrables
Livrables à mettre en ligne sur votre site de travail sous la rubrique PRJ310.
Documentation de projet
Arborescence | Zoning accueil et contenu | Gabarits accueil et contenu – ces documents seront intégrés à une charte de navigation
simplifiées qui rendra compte des choix opérés et des principes généraux d’organisation du site et des pages.
Modèles graphiques accueil et contenu intégrés à une charte graphique qui mettra en avant, notamment, la prise en compte des tendances
web 2.0 (cf. articles de Smashing Magazine).
Prototype web
Prototype interactif HTML5/CSS2 de la page d'accueil et de la page de contenu.
Le prototype sera accompagné d'un schéma de mise en page et d'imbrication des conteneurs CSS et d'un guide de maintenance expliquant les
difficultés éventuelles rencontrées au cours de l'intégration et les solutions apportées en citant les sources utilisées en ligne (forum, tutoriels,
magazine, blog, etc.). Ces deux documents ne seront pas imprimés, mais simplement joints au prototype, au format PDF.
Evaluation
Les livrables devront être disponibles sur votre site de travail sous la rubrique PRJ310. Ils devront être directement visibles et accessibles sur
cette rubrique et également dans un dossier zippé qui sera téléchargé par les enseignants à l'issue de la quatrième et dernière séance de
Travaux Pratiques (cf. planning, fin novembre/début décembre). Ce dossier contiendra à la fois la documentation de projet et le prototype
HTML/CSS.
RESPECT DES CONSIGNES / 10
Prise en compte de la demande / Nommage / Echéances
CONCEPTION / 20
Documentation
Ergonomie
Typographie et textes
Graphisme
Exhaustivité / Précision /
Organisation, structure, mise en
Choix / Contrastes / Couleurs /
Qualité d'ensemble / Equilibre /
Qualité / Rédaction /
page / Repérage / Lisibilité
Equilibre / Espacements
Harmonie / Cohérence / Identité
Orthographe
/ Tendances Web 2.0
Intégration – Mise en ligne / 30
Contenus et fonctionnalités
Code HTML/CSS
Validation W3C
Exhaustivité / Prise en compte des
Organisation / Lisibilité
Validité du code HTML/CSS et
tendances Web 2.0
accessibilité
Page d'accueil
1 – Mise en page et habillage graphique
Ils doivent prendre en compte les tendances Web 2.0 du design des pages web. Les articles du site "Smashing
Magazine" (cf. liens sur la page du TP), vous aideront à identifier ces tendances. Vous expliquerez dans un court
paragraphe d'introduction au gabarit et à la maquette graphique dans quelle mesure votre travail de conception
prend en compte ces tendances et l'intérêt qu'elles peuvent présenter.
2 – Contenu et Navigation
Les menus et barres de navigation découleront de l'arborescence, elle-même basée sur la table des matières du
catalogue de l'exposition fournie et annotée par le client, après quelques simplifications (en termes de contenus et au
niveau des intitulés – travail de simplification indispensable au passage de l'imprimé à l'écran). Vous êtes libre
d'ajouter toute fonctionnalité que vous jugerez utile et susceptible d'améliorer et d'enrichir l'expérience de
l'utilisateur. Les contenus proprement dits (photos et textes), sont fournis par le client – cf. dossier en ligne sur la
page des TP (textes, photos, vidéo).
3 - Connexion
Un système de connexion visible et intuitif, grâce à une barre de connexion sera présent sur toutes les pages. Il
permet au visiteur qui le souhaite d'enrichir la galerie de photos
3 - Contact
La zone de contact avec le propriétaire du site sera bien visible, et comportera une photo.
4 - Moteur de recherche
Le moteur de recherche sera un outil de navigation complémentaire (par mots-clés). Son importance est relative
mais le client souhaite qu'il soit facilement accessible.
8 - Actualités
Un fil d'actualité relatif aux nouveaux contenus sera affiché, permettant de découvrir en un clin d'oeil les dernières
mises à jour.
Page de contenu
Présentation des différents styles de construction de maisons individuelles en vogue à San Francisco à la fin du
XIXème siècle. La page développée sera celle du style "Italianate" (cf. contenus fournis par le commanditaire. La
structure et le contenu de cette page seront différents de ceux de la page d'accueil; vous veillerez tout
particulièrement à la cohérence du prototype.
Procédure
TP1 – Présentation du projet – Documentation Architecture de l'information
Réalisation du zoning et des gabarits (wireframes) | Mise en ligne à l'issue du TP
TP2 – Documentation – Conception graphique
Réalisation des maquettes graphiques et des schémas de positionnement et d'imbrication CSS | Mise en ligne à l'issue du TP
Le zoning, le gabarit et les modèles graphiques au format PDF seront mis en ligne dans leur version définitive pour évaluation, au début du 3ème TP,
sous la rubrique "PRJ310" de votre site de travail. Le nom des documents commencera obligatoirement par la lettre du groupe de TP suivie du nom de
famille des auteurs - exemple: "B_etudiant1_etudiant2_gabarit_accueil".
TP3 et TP4 – Réalisation et finition
Intégration HTML/CSS, mise en ligne, validation, | Mise en ligne à l'issue du TP | Les fichiers HTML et CSS seront zippés et disponibles au
téléchargement sur le site de l'étudiant, à l'issue du quatrième et dernier TP, pour évaluation.
Rappel des points importants en terme d'objectif et pour l'évaluation
1.
Soin apporté à la documentation de projet qui doit être aussi détaillée que possible
2.
Prise en compte des tendances web 2.0 en terme de design graphique et de fonctionnalités (cf. articles illustrant le TD)
3.
Lisibilité et organisation du code HTML5 et CSS2 (compartimentation, emploi des commentaires en vue de la maintenance)
Logiciels (dans l'ordre d'utilisation)
Gabarits: Mockflow (en ligne)
Modèles graphiques: Photoshop – génération de police web: Font Squirrel (en ligne)
Intégration: Dreamweaver
Langages
HTML5 – CSS2 - Javascript
Planning
Mercredi 14-09-2011 - 09h30 / 12h30 TP 1 AB H007/H008
Mercredi 21-09-2011 - 08h00 / 11h00 TP 1 EF H007/H008
Mercredi 28-09-2011 - 09h30 / 12h30 TP 1 CD H007/H008
Mercredi 05-10-2011 - 09h30 / 12h30 TP 2 AB H007/H008
Mercredi 12-10-2011 - 09h30 / 12h30 TP 2 CD H007/H008
Mercredi 19-10-2011 - 09h30 / 12h30 TP 2 EF H007/H008
Mercredi 26-10-2011 - 09h30 / 12h30 TP 3 AB H007/H008
Mercredi 09-11-2011 - 09h30 / 12h30 TP 3 CD H007/H008
Mercredi 16-11-2011 - 09h30 / 12h30 TP 3 EF H007/H008
Mercredi 23-11-2011 - 09h30 / 12h30 TP 4 AB H007/H008
Mercredi 30-11-2011 - 09h30 / 12h30 TP 4 CD H007/H008
Mercredi 07-12-2011 - 09h30 / 12h30 TP 4 EF H007/H008