| 1 | | = Comment styler le générateur OpaleWeb = |
| 2 | | [[br]] |
| 3 | | |
| 4 | | == Les Templates d'Opale == |
| 5 | | |
| 6 | | Le générateur Web d'Opale utilise 3 templates de pages: |
| 7 | | * '''PDG''' : 1 template pour la page de garde |
| 8 | | [[Image(OpaleTemplatePDG.png)]] |
| 9 | | * '''Vue Plan/Contenu''' : 1 template pour le contenu du module Opale |
| 10 | | [[Image(OpaleDefaultTemplate.png)]] |
| 11 | | * '''Vue Outils''' : 1 template pour les outils c'est-à-dire l'index, le glossaire, les références, la bibliographie, les articles de code et le crédit des resources |
| 12 | | [[Image(OpaleTemplateOutil.png)]] |
| 13 | | [[br]][[br]] |
| 14 | | |
| 15 | | |
| 16 | | |
| 17 | | |
| 18 | | |
| 19 | | = Principe de base - 2 niveaux de stylages: = |
| 20 | | |
| 21 | | L'iconographie d'un site Opale généré est répartie dans plusieurs dossiers. |
| 22 | | |
| 23 | | D'une manière générale, il faut distinguer 2 types de stylage: |
| 24 | | * un stylage "macro", c'est l'enveloppe, la carrosserie du site WEB (par exemple, les boutons de navigations, les logos permanents, etc...). Le stylage "macro" concerne généralement des éléments plutôt '''statique'''. |
| 25 | | * un stylage "micro", c'est la mise en forme du contenu. Le stylage "micro" concerne généralement des éléments plutôt '''dynamique'''. |
| 26 | | |
| 27 | | Opale utilise 3 templates différents pour générer un site Web: |
| 28 | | * un template par défaut pour la vue contenu |
| 29 | | * un template pour la page de garde |
| 30 | | * un template outil pour la vue outil (permettant d'accéder à la liste des glossaires, acronymes, biblio, crédits des ressources, etc...) |
| 31 | | |
| 32 | | [[BlockWarn]] Pour chaque template, il y a 2 css correspondante :[[BlockEnd]] |
| 33 | | * une CSS "macro" qui stylera, positionnera les boites/zones encapsulantes. Les CSS "macro" se trouve dans le dossier "tplRes" (dans un sous-dossier correspondant au template). |
| 34 | | * une CSS "micro" qui stylera, positionnera le contenu de ces boites/zones. Les CSS "micro" se trouve dans le dossier "styles"(dans un sous-dossier correspondant au template). |
| 35 | | |
| 36 | | Pour Opale, 3 templates nous donneront donc 6 CSS (3 "micro" et 3 "macro").Voici l'architecture d'un site Web généré par un générateur Web Opale: |
| 37 | | [[Image(architectureSiteOpaleAnnote.jpg)]] |
| 38 | | [[br]][[br]] |
| 39 | | |
| 40 | | |
| 41 | | = Le Stylage - Modélisation ScenariBuilder = |
| 42 | | |
| 43 | | Il existe 4 manières avec SCBuilder d'insérer une icone/image dans un générateur Web: |
| 44 | | |
| 45 | | == '''Méthode 1 - Template:''' == |
| 46 | | Insertion d'une image dans un template |
| 47 | | |
| 48 | | [[Image(OpaleTemplate.png)]] |
| 49 | | |
| 50 | | == '''Méthode 2 - Transformeur:''' == |
| 51 | | Insertion d'une image dans un transformeur |
| 52 | | |
| 53 | | [[Image(OpaleTransf.png)]] |
| 54 | | |
| 55 | | == '''Méthode 3 - CSS "Macro":''' == |
| 56 | | Image dans un dossier "xxx.uitemplate.doss/img" lié à un xxx.uistyle.xhtml |
| 57 | | |
| 58 | | [[Image(OpaleUiTemplate.png)]] |
| 59 | | |
| 60 | | == '''Méthode 4 - CSS "Micro":''' == |
| 61 | | Image dans un dossier "xxx.uistyle.doss/site/img_uistyle" lié à un xxx.uistyle.xhtml. La css est incluse dans le fichier "xxx.uistyle.xhtml". |
| 62 | | |
| 63 | | [[Image(OpaleUiStyle.png)]] |
| 64 | | [[br]][[br]] |
| 65 | | |
| 66 | | |
| 67 | | = Le Stylage - Génération ScenariChain = |
| 68 | | |
| 69 | | Voici le résultat des 4 méthodes en terme de génération via ScenariChain |
| 70 | | |
| 71 | | == '''Methode 1 - Template:''' == |
| 72 | | Si on insère une image directement dans un template (typiquement, l'insertion des icones/flèches de navigations), cette image sera automatiquement recopier dans le dossier "tplRes" dans le sous-dossier de même nom que le template. |
| 73 | | [[Image(methode1.png)]] |
| 74 | | |
| 75 | | == '''Methode 2 - Transformeur:''' == |
| 76 | | Les images insérées dans un transformeur se retrouveront automatiquement dans un dossier "lib" (fils du dossier racine du module Opale). |
| 77 | | [[Image(methode2.png)]] |
| 78 | | |
| 79 | | |
| 80 | | == '''Methode 3 - CSS "Macro":''' == |
| 81 | | Dans la génération finale, les css stylant la '''structure statique (la "carrosserie")''' d'un template se trouve dans un dossier "tplRes". |
| 82 | | |
| 83 | | Ce dossier "tplRes" contient un sous-dossier par template. |
| 84 | | |
| 85 | | Chaque sous-dossier contient une css "macro" et éventuellement un dossier "img" contenant l'iconographie concernant la structure. La css "macro" pointera sur une image/icone "macro" contenu dans le dossier "img" frère de la css. |
| 86 | | [[Image(methode3.png)]] |
| 87 | | |
| 88 | | == '''Methode 4 - CSS "Micro":''' == |
| 89 | | Dans la génération finale, les css stylant le '''contenu dynamique''' d'un template se trouve dans un dossier "styles". |
| 90 | | Ce dossier "styles" contient un sous-dossier par template. |
| 91 | | |
| 92 | | Chaque sous-dossier contient une css "micro". |
| 93 | | |
| 94 | | On s'aperçoit dans ce cas que le dossier "img_uistyle" contenant les images pour styler le '''contenu dynamique''' d'un template et la feuille CSS appelant ces images ne se trouvent pas aux mêmes endroits dans SCENARIbuilder et dans une génération finale issue de SCENARIchain. |
| 95 | | |
| 96 | | Pour accéder à une image depuis la css "micro", on pointera vers le dossier "img_uistyle" contenant l'iconographie concernant le contenu en utilisant le chemin relatif ("../../img_uistyle/xxxx.jpg"). |
| 97 | | |
| 98 | | [[Image(methode4.png)]] |
| 99 | | [[br]][[br]] |
| 100 | | |
| 101 | | |
| 102 | | = Pour conclure - Mécanisme de stylage et Modélisation = |
| 103 | | |
| 104 | | Voilà un aperçu générale des mécanismes de stylage, de la modélisation dans SCENARIbuilder à la génération dans SCENARIchain. |
| 105 | | |
| 106 | | Ces mécanismes expliquent pourquoi il existe plusieurs endroits dans un site Web généré (par SCENRAIchainV3 en générale et Opale en particulier) où l'on peut trouver des images. |
| 107 | | |
| 108 | | L'endroit où on trouvera l'image/icone dans le site généré dépendra de la modélisation, de la nature de l'image et de la façon dont elle a été intégré dans SCENARIbuilder. |
| 109 | | |
| 110 | | Ainsi, pour le stylage de la structure (le stylage "macro"), on utilisera les méthodes 1, 2 et 3. |
| 111 | | Pour le stylage du contenu (le stylage "micro"), on utilisera la méthode 4. |
| | 1 | Les informations de cette page ne sont plus aujourd'hui d'actualité. |
