"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 et de réalisation sera basé sur la documentation de projet présentée dans le cadre des TD
comprenant 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é au 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 en ligne: liens sur le site du cours).
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 référencés sur le site
du cours 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. 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 formulaire d'identification visible et intuitif sera présent sur toutes les pages. Il permet au visiteur qui le
souhaite d'enrichir la galerie de photos et de proposer témoignages et articles.
3 - Contact
La zone de contact avec les auteurs et propriétaires du site sera elle aussi facilement identifiable et présente sur
toutes les pages.
4 - Moteur de recherche
Un moteur de recherche proposera une navigation alternative basée sur les mots-clés.
8 - Actualités
Un fil d'actualité relatif aux nouveaux contenus permettra de s'abonner et de recevoir les mises à jour.
Page de contenu
La page développée sera celle du style "Italianate" (cf. contenus fournis par le commanditaire). Vous veillerez à
la cohérence du prototype en terme d'architecture et de graphisme.
Procédure
TP1 – Présentation du projet - Conception – Architecture de l'information
Réalisation du zoning et des gabarits (wireframes) | Mise en ligne à l'issue du TP
NB1: dans Workflow, commencer par nommer les fichiers en respectant les conventions de nommage (ex: B_etudiant1_etudiant2_gabarit_accueil)
TP2 – Conception – Modèles graphique
Réalisation des maquettes graphiques | 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 – Production – Réalisation et finition
schéma de positionnement et d'imbrication CSS - 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.
Respect des consignes (nommage des fichiers, prise en compte de tous les contenus);
2.
Soin apporté à la documentation de projet;
3.
Prise en compte des tendances web 2.0 en terme de design graphique et de fonctionnalités (cf. articles illustrant le TD);
4.
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) ou Photoshop
Modèles graphiques: Photoshop – génération de police web: Font Squirrel (en ligne)
Intégration: Dreamweaver
Langages
HTML5 – CSS2 - Javascript