Bonnes pratiques pour la création de thèmes et de sites avec Silex et Oof
Ce post est pour les utilisateurs chevronnés de Silex, ceux qui l’utilisent au quotidien. Quels outils utiliser pour être efficace, quelle arborescence de fichiers pour vos projets, quels éléments customiser pour avoir un site à 100% aux couleurs de votre charte graphique ?
- Le but est de mettre tout le monde d’accord pour que tous les profiles utilisant Silex y retrouvent leurs petits
- flasheurs, designers, webmasters et développeurs… Alors pour ceux qui ont envie de pousser leur pratique de Silex au dela du travail d’une seule personne pour un seul site, lisez ceci !
Les outils
Utiliser un outil de versionning comme subversion - aka svn, pour faciliter la gestion des versions et la collaboration à plusieurs sur un même site. Avec ce genre d’outils, il est impossible de perdre quelque chose suite à un bug, à un déménagement, un incendie…
- Liens sur subversion
-
- une FAQ
- http://www.ird.fr/informatique-scientifique/outils/versioning/subversion_dsi/faq/index.php
- un bon client svn pour windows
- http://tortoisesvn.net/
Les répertoires
- Créer un repository qui porte le nom de votre projet (thème ou site) svn avec ces répertoires
-
- tags/
- v1.0/
- v1.1/
- v1.2/
- …
- trunk/
- design/
- fla-components/
/silex-components
/oof-components
/layouts - website/
trunk/ est le répertoire de travail, éventuellement partagé par plusieurs personnes.
- trunk/design/ doit contenir tous les éléments de design présents dans le site
- les docs gimp, illustrator, photoshop, anims flash…
trunk/fla/ contient 3 repertoires 1. silex-components contenant les composants silex; 2. layouts contenant les gabarits; 3. oof-components contenant les composants oof que vous avez customisé pour votre site. Cela ne concerne que ce que vous avez customisé après avoir téléchargé le “Silex dev kit” ou le “Oof dev kit”, pas les éléments par défaut qui sont dans media/components/ de Silex.
trunk/website/ est le répertoire qui contient le site en lui même, c’est à dire ce que vous allez mettre en ligne. Au départ c’est le contenu du “silex server” que vous pouvez télécharger sur http://sourceforge.net/projects/silex/ .
Les fichiers
Les fichiers “obligatoires”
readme.txt doit contenir vos notes, les e-mails des auteurs, les instructions pour installer votre thème dans Silex, l’adresse ou le thème est téléchargeable (lien vers la platforme d’échange)… Ce fichier doit être en Anglais, avec éventuellement des traductions dans d’autres langues.
- license.txt doit contenir la lisense de votre création. Pour être intégré dans Silex, il doit s’agir d’une lisense Creative Commons. Pour créer / choisir une lisense
- http://creativecommons.org/choose/?lang=fr
Les fichiers “optionnels”
Vous pouvez utiliser les composants et gabarits livrées avec Silex ou bien customiser ces éléments en utilisant le “Silex dev kit” ou le “Oof dev kit”. Lorsque vous customisez un élément, mettez la source modifiée dans le répertoire trunk/fla/ de votre site.
- Liste des éléments customisables
-
- des éléments Silex
- layer skin (1 seul par site), layouts, loader (1 seul par site)
- des composants Silex
- Composants scale 9 grid, boutons “délai”, label buttons
- des composants Oof
- RichTextList, ThumbList, PlayListUi, ListUi, …
Les composants
Sources des composants
- La source des composants Silex et Oof est toujours composée d’un fla et éventuellement accompagnée d’un fichier “.as” et d’un “.xml”. Par exemple la source du composant ListUi_mypage_01 est constituée des fichiers
- “ListUi_mypage_01.cmp.fla”, “ListUi_mypage_01.cmp_exclude.xml” et “ListUiCmp.as”. Ce composant est basé sur le composant Oof ListUi qui se trouve dans le répertoire “silex_components/” du “Oof dev kit”, sous la forme des fichiers “ListUi.cmp.fla”, “ListUi.cmp_exclude.xml” et “ListUiCmp.as”. Donc si vous voulez customiser un élément, n’oubliez pas de vérifier si il y a dans le même répertoire des fichiers dont le nom commence par le nom du composant et se finit par “.cmp.fla”, “.cmp_exclude.xml” et “Cmp.as”. Dans ce cas, dupliquez et renommer les en même temps que le “.fla” de votre composant.
Pour les composants du “Oof dev kit”, il y a toujours un “Cmp.as” et un “.cmp_exclude.xml”. Pour les composants du “Silex dev kit”, il n’y a pas de “Cmp.as” mais il y a parfois un “.cmp_exclude.xml”.
Noms des composants
- Nommez vos composants comme dans le dev kit, par exemple RichTextList reste RichTextList. Dans le cas où vous avez deux versions d’un composant dans le même site, ajoutez le numéro du composant après son nom. Par exemple, si vous avez une liste bleue, une liste verte et une liste rouge, nommez les
- RichTextList, RichTextList1, RichTextList2. Ceci vous permet de faire des sets de composants “compatibles entre eux”.
Répertoires de publication des composants
Une fois publié, mettez le swf généré dans le répertoire “trunk/website/media/[nom de votre site]/components/” de votre site.
Composants scale 9 grid et autres composants de design -> “trunk/website/media/[nom de votre site]/components/”
Boutons “délai”, label buttons -> “trunk/website/media/[nom de votre site]/components/buttons/”
Pour les composants Oof -> “trunk/website/media/[nom de votre site]/components/oof/”
Les autres éléments customisables de Silex
Mettez la source des éléments dans “fla/”
Pour les layer skin, publiez votre gabarit dans toutes les versions de flash player (7 à 10) si c’est possible.
- -> répertoire de publication
- “trunk/website/fpX/ui/” en remplaçant X par le numéro de version de flash player
- -> nom
- “layer_skin_[nom de votre site].swf”
Pour les layouts
- -> répertoire de publication
- “trunk/website/layouts/”
- -> nom
- “layout_[nom de votre site].swf”
Le loader (1 seul par site)
- -> répertoire de publication
- “trunk/website/” (directement à la racine mais il y aura un répertoire “loaders/” dans les prochaines versions de Silex)
- -> nom
- loader.swf (on pourra changer ce nom dans les prochaines versions de Silex)
Bonnes pratiques pour la création de thèmes et de sites avec Silex et Oof
Les outils
Utiliser un outil de versionning comme subversion - aka svn, pour faciliter la gestion des versions et la collaboration à plusieurs sur un même site. Avec ce genre d’outils, il est impossible de perdre quelque chose suite à un bug, à un déménagement, un incendie…
- Liens sur subversion
-
- une FAQ
- http://www.ird.fr/informatique-scientifique/outils/versioning/subversion_dsi/faq/index.php
-
- un bon client svn pour windows
- http://tortoisesvn.net/
Les répertoires
- Créer un repository qui porte le nom de votre projet (thème ou site) svn avec ces répertoires
-
- tags/
-
v1.0/
-
v1.1/
-
v1.2/
-
…
-
trunk/
-
design/
-
fla/
-
website/
trunk/ est le répertoire de travail, éventuellement partagé par plusieurs personnes.
- trunk/design/ doit contenir tous les éléments de design présents dans le site
- les docs gimp, illustrator, photoshop, anims flash…
trunk/fla/ contient les composants silex, les gabarits et les composants oof que vous avez customisé pour votre site. Cela ne concerne que ce que vous avez customisé après avoir téléchargé le “Silex dev kit” ou le “Oof dev kit”, pas les éléments par défaut qui sont dans media/components/ de Silex.
trunk/website/ est le répertoire qui contient le site en lui même, c’est à dire ce que vous allez mettre en ligne. Au départ c’est le contenu du “silex server” que vous pouvez télécharger sur http://sourceforge.net/projects/silex/ .
Les fichiers
Les fichiers “obligatoires”
readme.txt doit contenir vos notes, les e-mails des auteurs, les instructions pour installer votre thème dans Silex, l’adresse ou le thème est téléchargeable (lien vers la platforme d’échange)… Ce fichier doit être en Anglais, avec éventuellement des traductions dans d’autres langues.
- license.txt doit contenir la lisense de votre création. Pour être intégré dans Silex, il doit s’agir d’une lisense Creative Commons. Pour créer / choisir une lisense
- http://creativecommons.org/choose/?lang=fr
Les fichiers “optionnels”
Vous pouvez utiliser les composants et gabarits livrées avec Silex ou bien customiser ces éléments en utilisant le “Silex dev kit” ou le “Oof dev kit”. Lorsque vous customisez un élément, mettez la source modifiée dans le répertoire trunk/fla/ de votre site.
- Liste des éléments customisables
-
- des éléments Silex
- layer skin (1 seul par site), layouts, loader (1 seul par site)
-
- des composants Silex
- Composants scale 9 grid, boutons “délai”, label buttons
-
- des composants Oof
- RichTextList, ThumbList, PlayListUi, ListUi, …
Les composants
Sources des composants
- La source des composants Silex et Oof est toujours composée d’un fla et éventuellement accompagnée d’un fichier “.as” et d’un “.xml”. Par exemple la source du composant ListUi_mypage_01 est constituée des fichiers
- “ListUi_mypage_01.cmp.fla”, “ListUi_mypage_01.cmp_exclude.xml” et “ListUiCmp.as”. Ce composant est basé sur le composant Oof ListUi qui se trouve dans le répertoire “silex_components/” du “Oof dev kit”, sous la forme des fichiers “ListUi.cmp.fla”, “ListUi.cmp_exclude.xml” et “ListUiCmp.as”. Donc si vous voulez customiser un élément, n’oubliez pas de vérifier si il y a dans le même répertoire des fichiers dont le nom commence par le nom du composant et se finit par “.cmp.fla”, “.cmp_exclude.xml” et “Cmp.as”. Dans ce cas, dupliquez et renommer les en même temps que le “.fla” de votre composant.
Pour les composants du “Oof dev kit”, il y a toujours un “Cmp.as” et un “.cmp_exclude.xml”. Pour les composants du “Silex dev kit”, il n’y a pas de “Cmp.as” mais il y a parfois un “.cmp_exclude.xml”.
Noms des composants
- Nommez vos composants comme dans le dev kit, par exemple RichTextList reste RichTextList. Dans le cas où vous avez deux versions d’un composant dans le même site, ajoutez le numéro du composant après son nom. Par exemple, si vous avez une liste bleue, une liste verte et une liste rouge, nommez les
- RichTextList, RichTextList1, RichTextList2. Ceci vous permet de faire des sets de composants “compatibles entre eux”.
Répertoires de publication des composants
Une fois publié, mettez le swf généré dans le répertoire “trunk/website/media/[nom de votre site]/components/” de votre site.
Composants scale 9 grid et autres composants de design
-> “trunk/website/media/[nom de votre site]/components/”
Boutons “délai”, label buttons
-> “trunk/website/media/[nom de votre site]/components/buttons/”
Pour les composants Oof,
-> “trunk/website/media/[nom de votre site]/components/oof/”
Les autres éléments customisables de Silex
Mettez la source des éléments dans “fla/”
Pour les layer skin, publiez votre gabarit dans toutes les versions de flash player (7 à 10) si c’est possible.
- -> répertoire de publication
- “trunk/website/fpX/ui/” en remplaçant X par le numéro de version de flash player
- -> nom
- “layer_skin_[nom de votre site].swf”
Pour les layouts,
- -> répertoire de publication
- “trunk/website/layouts/”
- -> nom
- “layout_[nom de votre site].swf”
Le loader (1 seul par site)
- -> répertoire de publication
- “trunk/website/” (directement à la racine mais il y aura un répertoire “loaders/” dans les prochaines versions de Silex)
- -> nom
- loader.swf (on pourra changer ce nom dans les prochaines versions de Silex)