Logiciels pour créer son thème

Aides sur les thèmes PHPBoost Logiciels pour créer son thème

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 13/08/2009 à 13h32

Introduction

Ce topic s'adresse aussi aux débutants qui se lancent dans la création sans avoir les outils adéquates pour créer leur thème.
Que cela soit en HTML ou pour un CSS les outils sont pratiquement tous es même. En dehors de certains modules spécifiques des CMS(cela sera précisé)

Pour les bases on commence par avoir les bons outils! Donc je vous donne les armes pour la création d'un thème..

Coté Firefox

On commence par avoir un bon navigateur, qui vous permettra d'y ajouter des plugins additionnels indispensables pour la création de vos thème. Si vous ne l'avez pas, Téléchargez le !

1er plugin Firefox: Firebug

Installez le ! Il vous servira à éditer les CSS via le navigateur simulant les modifications virtuelles.
Vous pouvez apprendre à vous en servir sur le OpenClassrooms.

- Sinon à voir pour :

- Firefox : Pour apprendre à le manier facilement, voir le Tutoriel vidéo
- Chrome : Évidement unoutils du même genre existe pour lui voir le Tutoriel vidéo.

2ème plugin Firefox: Développement Web

Dans la foulée, pas besoin de l'installer , il est intégré directement dans le navigateur. Vous le trouverez en allant dans la barre d'outils du navigateur en haut . Rendez-vous sur l'onglet Outils et survolez Développement Web.

Cette extension est LA trousse à outils du développeur Web. Ses fonctionnalités se comptent par dizaines. Voici un descriptif des outils des menus de cette barre d'outils qui sont les plus intéressants pour nous:

Inspecteur
L’inspecteur de page possède plusieurs fonctionnalités pour étudier le modèle de boîte, éditer les règles CSS, analyser les styles calculés, lire les polices, la disposition, les styles calculés, le support des pseudo-éléments. Il dispose également d’un outil de recherche.

Caché:

Console Web
La console web: Affiche les journaux pour JavaScript, CSS, les échanges réseau et la sécurité. Elle permet d’utiliser des mises en forme personnalisées, de prévisualiser ou d’inspecter des nœuds DOM, des objets, des tableaux, éventuellement en les filtrant.

Débogueur:
Le débogueur JavaScript : Permet d’interrompre l’exécution d’un script, de naviguer dans la pile d’appels et d’inspecter les variables. Il supporte les source maps, l’affichage et la réindentation des sources minifiées. On peut également placer les fichiers des bibliothèques utilisées dans des boîtes noires et analyser les scripts chargés dynamiquement.

Éditeur de style: Il vous permet de :

- Voir et éditer les feuilles de style associées à une page.
- Créer de nouvelles feuilles de style de zéro et les appliquer à la page.
- Importer des feuilles de styles existantes et les appliquer à la page.

Vue adaptative
Pour nous les designer /intégrateurs et Graphistes l'outil indispensable , la vue adaptative !! Elle vous permet de visualiser tout les formats d'écrans déviants pour faire du responsive.

Une commande à connaitre par coeur quand vous faite un thème : Utiliser le raccourci clavier Ctrl+Maj+M pour Windows et Linux, ou Cmd+Option+M pour OS X.

Pipette
La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au-dessus de la page, vous permettant de sélectionner au pixel près.

Pour le reste ..
Pour découvrir toutes les autres possibilités de cet outils, je vous conseil fortement de regarder directement la documentation associée sur le site officiel

Les logiciels

Notepad++

Le top des éditeurs de texte que vous trouverez, c'est le fameux Notepad ++. Prenez le fichier Binaire.

C'est un éditeur de texte très performant (pour info c'est cet éditeur qui a été utilisé pour créer phpboost

)
Ouvrez le, puis ouvrez tous les fichiers css de votre thème.
Cliquez sur rechercher, mettez le code de la couleur recherchée puis cliquez sur 'rechercher dans tous les documents ouverts'. Il s'affichera tous les fichiers où se trouvent le code rentré avec la ligne du fichier.

Comme vous le voyez, il est très simple de retrouver une couleur de votre site dans le code source du thème

Cf: Ptithom

La boîte à couleur

Ou le télécharger, c'est par ... :: ici !
C'est un petit logiciel gratuit qui va vous donner le code couleur d'un pixel précis de votre écran. Pour plus d'info, cf le lien ci dessus.

"Swan":

Une fois installé, vous aurez ce que l'on appelle un color picker (un bouton avec une pipette) qui vous permettra d'avoir la couleur que vous souhaitez en la prélevant directement sur l'image que vous voulez

Cf: Ptithom

Module PHPBoost

Module Bac à sable / SandBox

Ce module existes pour les versions 4.0/4.1/5.0.
Vous les trouverez dans les sections de téléchargement dédiés aux sections Extras et Autres PHPBoost de chaque version ou alors sur le site officiel dans les téléchargements => Modules officiels/ Modules compatibles.

Spécificité(s)

Coté graphiste(s):

Vous pourrez tester plusieurs parties du framework PHPBoost :

- Le rendu des différents champs utilisables avec le constructeur de formulaires
- La génération de tableaux dynamiques
- La liste des icônes de la librairie Font Awesome utilisées dans les modules
- Le rendu des principales classes CSS : C'est là ou cette outil est extrêmement pratique lors de la création d'un thème

- L'envoi de mails
- La génération de template avec ou sans cache

Coté Membres(s)
- Les mêmes que ceux de graphistes, mais l’intérêt est moindre vu que cela ne vous sera pas utiles

Tutoriels

Vous avez des questions sur les thèmes : " Comment créer un thème ? C'est long ? Que faut-il avoir comme logiciel ? faut-il des connaissances particulières ?"

Avec ce tutoriel sur la documentation de PHPBoost: "Personnaliser un thème " vous aurez toutes vos réponses à ces questions . Et ainsi vous pourrez avoir votre propre thème personnalisé , et si vous le désirez vous pouvez le poster sur Easy-Design.net dans cette section du forum ou/et sur phpboost.com .

Et pour finir

Voilà, maintenant, j'aimerais préciser que les critiques font avancer! Que débutant on l'a tous été ! Les conseils sont gratuits, n'hésitez pas à en demander. A vos claviers ...

Nous ferons du mieux que nous pourrons pour vous aidez, et vous faire avancer

Swan.

swan_signature