Guide SCENARIbuilder

Demandez de l'aide sur le forum si vous êtes bloqué

Stylage HTML

Apprendre les CSS

Il existe une multitude de sites internet traitant le sujet, voici ceux que je peux vous recommander :

Pour modifier un style déjà existant

Pré-requis

Cette partie a été volontairement simplifiée pour vous permettre de modifier un style sans avoir lu tout le reste du guide. Vous devez cependant :

  • avoir récupéré le modèle avec un modèle (par exemple, sur un repository subversion) : Procédure sur le wiki
  • avoir créé l'atelier dans SCENARIbuilder en choisissant d'utiliser le répertoire de source que vous venez de téléchargé : Procédure sur le wiki
Repérage des fichiers

Vous partez de l'arbre à gauche, l'explorateur des items, ouvrez les dossiers, et trouvez le fichier .wpsdef qui identifie votre modèle qui va servir de point de départ pour explorer le modèle. Pour chacun des items ci-dessous, il peut y en avoir en plusieurs exemplaires : plusieurs wspdef pointant vers plusieurs generateurs qui ont chacun plusieurs templates. Essayez de vous repérer par rapport au "name" de chacun des items ou par rapport au contenu pour "trouver le bon", ou demandez au modélisateur de vous expliquer lequel vous devez utiliser pour arriver à faire vos changements.

N'hésitez pas à poser vos questions sur les forums de scenari-platform.org.

Pour passer du .wspdef au .generator par exemple, alors que l'item wspdef est sélectionné, allez dans l'onglet edition si vous n'êtes pas sur celui ci, puis faites CTRL+clic (ou double clic) sur l'icône du .generator à l'intérieur du contenu. En passant d'un item à un autre, vous devriez arriver aux CSS.

Se repérer dans les fichiers CSS

Dans le premier exemple HelloWorld, j'avais cité 2 extensions firefox pouvant être utile au "styleur". J'en donne ici des exemples pus concrets pour montrer comment les utiliser. Il n'est pas nécessaire d'utiliser les 2 simultanément, mais en maîtriser un est un gain de temps considérable pour tout "styleur" sérieux.

FireBug

Source : http://www.getfirebug.com/

Firebug est spécialisé dans l'exploration des arbres d'éléments HTML (le DOM) et d'afficher les différentes relations d'héritages de classes CSS, il permet d'avoir la liste de toutes les déclarations CSS qui vont avoir de l'influence sur un objet précis, et de les modifier directement pour en tester l'effet. En fonctionnalité supplémentaire, il permet par exemple de "debugguer" les javascript en affichant la ligne d'erreur et des informations relative au script.

Pour l'ouvrir, pressez Ctrl + Alt + K, puis, choisissez le bouton inspect en haut a gauche du nouveau cadre "firebug" qui vient d'apparaître et enfin cliquez sur un élément de la page.

En résultat, on peux voir l'arborescence des éléments HTML jusqu'à notre div "#topleft" qui représente l'image dans le coin en haut à gauche de l'écran, et l'ensemble des styles appliqués à cet objet dans la partie de droite.

WebDevelopper

Source : https://addons.mozilla.org/fr/firefox/addon/60

WebDevelopper est une extension mutli-fonctions pour tout ce qui concerne le développement web. Il offre des informations assez basique sur le nom ou l'id d'un bloc sélectionné a l'écran, c'est le plus simple à utiliser. En bonus, des fonctionnalités comme par exemple passer des pages local au validator W3C en un seul clic.

Une fois installé, pressez Ctrl + Alt + F puis cliquez sur un bloc pour déclencher l'affichage d'une fenêtre d'information.

En résultat, on a tout en haut en premier titre de la boite jaune, l'ID ou la classe de la div, puis les coordonnée ou la liste des noms de styles des conteneurs de cette div.

Exploiter le nouveau style

Pour exploiter le nouveau style vous pouvez :

  • Lancer un environement de test : créez un nouvel item wsptest et déposez-y par drag & drop le wspdef. Puis, lancez l'opération compiler et tester a l'intérieur de ce wsptest.
  • Créer un pack de modèle installable dans SCENARIchain : créez un nouvel item wspexport et déposez-y par drag & drop le wspdef. Lancez l'opération compiler à l'intérieur de ce wsptest, puis choisissez télécharger la dernière compilation du modèle .
Créer un nouveau style complet
Pré-requis

Créer un nouveau style totalement différent des styles déjà existant signifie que vous allez devoir intervenir sur les transformeurs et sur le template, on repasse ici dans des opérations qui nécessitent l'apprentissage des autres concepts de SCENARIbuilder, en particulier la publication HTML.

Première maquette

Un graphiste crée une "maquette", une image d'une page du site dans un programme vectoriel. Si plusieurs pages ont des présentations différentes, il crée alors plusieurs maquettes. L'aspect graphique d'une maquette doit être validé rapidement (surtout si vous faites ce travail pour un client). Il est toujours possible de changer un logo à la fin, mais passer une colonne de l'autre coté de la page, ou transformer par exemple un style "à taille fixe 800x600" en un style "ajusté à la taille de la fenêtre du navigateur" demande beaucoup de travail supplémentaire.

Simplification / Validation

Vous demandez au graphiste des simplifications en fonction de ce que vous pouvez ou ne pouvez pas faire en CSS. Certains navigateurs comme internet explorer ont des défauts qui transforment des "idées évidentes" en "casse tête d'intégration" sous certaines circonstances (objets alignés par rapport au bas de la page, hauteurs des colonnes homogène). Ne soyez pas trop ambitieux. L'aspect technique doit être validé par vous même, vous devez avoir en tête les différents blocs qui composeront l'image finale. Faites valider aussi les changements graphiques de ces simplifications.

Faire le template dans SCENARIbuilder

Créez ou modifiez les openUiTemplate correspondants, ainsi que les fichiers CSS avec les différents blocs, sans y mettre les images pour l'instant. Retournez à l'étape précédente si vous n'arrivez pas à positionner les éléments correctement. Testez la compatibilité avec différents navigateurs, rajoutez des bordures "de debug" pour voir les limites des blocs.

Export d'une maquette finale

Vous spécifiez au graphiste la résolution des images "maquette finale" qu'il fournit, des versions différentes pour bien faire apparaître toute partie d'image que vous allez récupérer (par exemple, sans le texte, sans les "puces du menu", tout ce qui recouvre l'espace)... Précisez lui le format de l'image et sa résolution (png ou jpeg très haute qualité, vous allez devoir le recompresser après).

Découpage du fond

Tracez sur papier les blocs à taille fixe de la page, et isolez les avec un outil de traitement d'image (par exemple the gimp, outil "crop"), tout en notant leurs coordonnées sur papier, pour que vous puissiez reproduire le même découpage ou découper d'autres blocs de même hauteur / largeur. Pour les blocs de taille variable, votre image de fond doit être répétable, ou a défaut avoir une taille maximale et apparaître correctement même tronquée. Souvent, on découpe une ligne de 1 pixel de large qui va être étirée. Ou alors, le plus simple reste juste les blocs avec une couleur de fond sans image. Enregistrez chaque "image de bloc".

Découpage des objets

Il vous reste a découper et intégrer les puces et autres images "flottantes" du contenu.

Intégration dans le CSS

Pour chaque div devant accueillir une image découpée, à vous de régler au moins les propriétés en lien avec l'image de fond, par exemple :

background-position: top left;

background-repeat: no-repeat;

background-image: url(../../img/topleft.png);

Pour les noms de fichiers images, repérez vous bien dans l'arborescence des fichiers du site web HTML généré, chaque ".." représente un répertoire parent.

Pour les blocs fixes, je vous recommande de donner des id de classe et des noms de fichiers en fonction de la position, ce qui rend votre layout réutilisable. Par exemple, si vous appellez "topleft.png" le bloc des étoiles, c'est peut être moins évocateur que "etoile.png" mais vous pouvez facilement remplacer l'image par une autre complètement différente si vous devez décliner votre modèle pour traiter d'un autre sujet.

Exemple avec le bloc "topleft" : les étoiles en haut a gauche :

Certains éléments sont plus difficiles à positionner comme le dégradé en bas à droite, qui doit rester toujours à cette position que le contenu de la page soit court ou que l'utilisateur ait à "scroller". Le reste du design est assez classique, le layout prend une 50aine de lignes à positionner, le reste (couleur des liens, éléments internes, stylage du menu) prend à peine plus, cela reste le plus simple que l'on puisse trouver.

En guise d'exercice, essayez par vous même et consultez le code source si vous n'y arrivez pas.

Résultat

Vous devriez obtenir quelque chose qui ressemble à l'écran ci dessous, tout a fait conforme à ce que nous avons prévu :

(c) scenari-platform.org 2007