Workshop HTML-CSS-Wireframe, zoning et charte graphique : créer une page type en HTML-CSS
On est souvent amené à créer des pages en utilisant des documents tels que : charte graphique, wireframe, mokup, zoning, scénzrio, etc… Il faut donc d’abord s’attacher à étudier ces types de documents et les informations qu’ils donnent, avant de déterminer ce qu’il va être important de retenir pour le travail de réalisation du HTML-CSS. La journée s’organisera d’abord autour de la charte graphique, puis autour des schémas de page simplifiés (mockup, wireframe, zoning). Elle progressera de la sorte avec des petites réalisations qui serviront de jalons, de mises en page sommaires vers des choses plus complexes.
On verra successivement :
1. CHARTE GRAPHIQUE
Partant de chartes graphiques existantes, on essaiera de déterminer les informations les plus pertinentes à retirer d’un tel type de document. Celui-ci va nous indiquer de quelle manière fonctionne le logo, ses cotes, nous indiquer les polices préférées, couleurs, etc… A ce jour, le web n’offre toujours pas les mêmes possibilités que le papier et souffre donc de déficiences par rapport à des propositions historiquement liées à l’imprimerie. Il va donc falloir apprendre à récupérer les bonnes informations pour les adapter à la contrainte du web.
2. LES BONS RÉFLEXES
Dans cette partie, nous verrons comment rassembler les éléments les plus indispensables à la réalisation de l’intégration HTML-CSS à partir de ce que nous aurons vu dans la première partie.
3. SCÉNARIO, WIREFRAME ET ZONING DE PAGE
Un projet web nécessite de mettre en relation différents acteurs. Pour ce faire il existe toute une panoplie de documents visant à formaliser le travail de mise en page et de navigation. Mockup, zoning, scénario sont quelques-uns des termes utilisés pour les désigner. Il s’agira donc ici de leur donner une définition sinon définitive, du moins assez précise pour aider l’intégrateur ou le webdesigner dans son travail. On verra dès lors comment réaliser des pages html-css en partant des indications plus ou moins détaillées que ces diagrammes fournissent en terme de balises, noms de classe ou d’ID.
4. LA PAGE TYPE
Il ne nous restera plus qu’à appliquer sur notre code balbutiant tout ce que l’on a pu collecter lors de notre étude des chartes graphiques. C’est à dire qu’on va habiller graphiquement le code html de la troisième partie.
Le workshop s’adresse principalement aux élèves qui désirent se confronter à une situation de travail concrète, connaître et savoir utiliser les documents les plus couramment rencontrés dans un projet web. On préférera donc que les participants maîtrisent au minimum les fondamentaux du HTML-CSS.
Norbert Naigeon – Formateur EMWEB
