Intégration 1 : préparer le travail

Une fois un layout produit avec un logiciel graphique, il faut le transformer en un trio html/css/images valide. Pour cela, un minimum de réflexion et de préparation est nécessaire. Un peu de méthodologie.

Précédent | 16/20 | Suivant

1. Identifier les zones pour structurer l’information

Lorsque l’image et prête pour le travail d’intégration, identifiez les zones sémantiques : le header, une ou deux navigation, des contenus contextuels, un contenu principal et un footer, distinguez les type d’information. Cet travail n’est, normalement, que le prolongement du cahier de charge, qui a déjà fourni ces éléments et que le layout a mis en forme.

Si le layout comporte plusieurs pages type, ce travail est évidemment fait sur chacune de celle-ci. Certaines zones sont récurrentes, ce qui facilite le travail

Ce travail est important : il va permettre de dégager la structure html des parties principales du site, et dans la même opération identifie le positionnement css de ceux-ci.

Rappellez-vous : on garde le maximum d’élément dans le flux de la page, ne positionnement les éléments que lorsque c’est nécessaire. Plus un positionnement est acrobatique, plus il sera instable entre les navigateurs et dans l’avenir.

2. Identifiez les polices, couleurs, tailles, retraits et marges

Pour pouvoir travailler efficacement, identifiez le maximum d’informations dans les éléments des layouts
- La taille des polices, leur couleur, leur famille, la hauteur de ligne, la casse éventuellement seront notées
- les espaces entre des éléments de liste, les borders, les espaces entre titre et texte, les marges entre blocs principaux seront notés.

Notez ces informations sur des sorties imprimantes. Au moment d’être devant la page de code css, cela vous fera gagner du temps : pas besoin de passer du logiciel graphique au logiciel de code pour faire le travail, et cela vous laisse vous concentrer sur les choix de marge, padding, l’intégration

3. Exportez les images

Sur base de ce découpage, exportez les éléments qui devront être incorporés sous forme d’image. Généralement, l’exportation dans un nouveau fichier, avec des fonds transparents, ou l’isolement de partie a répéter en "pattren" est nécessaire. Placez les éléments dans un dossier "images" de votre thème pour éviter un mélange entre css, php et images.