Tutoriel Indexhibit

Transcription

Tutoriel Indexhibit
Tutoriel Indexhibit
1 Comment relier le logiciel Indexhibit à votre site
2 Comment customiser
3 Liens utiles pour apprendre le langage CSS (et autres)
1 Comment relier le logiciel Indehibit à votre site
Au fait c’est quoi Indexhibit ?
Indexhibit est un logiciel libre qui vous permet d’avoir un «back-office», c’est à dire une
plateforme pratique vous permettant de créer des rubriques, télécharger des photos, écrire un
texte, etc... et de les mettre en ligne aussitôt sur votre site.
Installation
configuration requise
- Linux/Apache server*
- PHP4+
- MySQL 3.23+
- FTP application (Mac: Cyberduck / PC: Filezilla)
*Apache n’est pas supporté sur Windows
Optimisé pour les navigateurs comme Firefox et Safari.
Fonctionnera aussi sur Internet Explorer, mais pas de manière optimale.
Il est indispensable d’avoir pris un hébergement comportant une base de données
Mysql.
Avant de commencer
Assurer vous d’avoir les données d’accès à votre base de données MySql.
Si vous n’avez pas ces informations, rendez vous sur l’interface de votre web-manager
ou demandez les codes à votre hébergeur.
Vous devez disposer des codes suivants:
- serveur (database host)
- nom de la base (database name)
- utilisateur (database username)
- mot de passe (database password)
Si vous avez tout cela, ça y est, vous êtes près.
1
1 Uploader les fichiers INDEXHIBIT sur votre FTP
Télécharger la dernière version d’INDEXHIBIT sur le site officiel que vous trouverez
ici. Dans la rubrique « Indexhibit CMS v0.70e » cliquer sur « download » pour obtenir
l’application web sous forme .zip.
Une fois le dossier indexhibitv070e.zip rapatrié sur votre ordinateur, il ne vous restera
plus qu’à le dézipper.
Vous obtiendrez un dossier contenant 1 dossier « files », 1 dossier ndxz-studio, 1
fichier htaccess, 1 fichier index.php.
2 Créer votre dossier «www»
Ce dossier contiendra toute la structure de votre site : ceux qui construisent le leur
page par page y mettront des feuilles de style Html, nous nous allons y mettre tous les
dossiers Indexhibit téléchargés précédemment.
3 Ouvrez votre logiciel FTP (filezilla, cyberduck, ou autre).
Se connecter à l’aide de vos codes FTP. vous devriez voir un dossier intitulé WWW.
Si vous souhaitez qu’Indexhibit soit la partie principale de votre site et que l’on puisse
directement tomber dessus (« www.monsite.com » par exemple)
il va falloir placer les fichiers en questions à la racine (root) du site.
Pour cela:
- Copier le contenu du dossier « indexhibitv070e » (pas le dossier lui-même) et avec
un « drag-and-drop » faites le glisser dans le dossier « www » de votre application
FTP.
- Après avoir déposé les 4 éléments dans le dossier, repérez le dossier « files » et son
sous-dossier « gimgs ».
- Changez leur permission en 777. Pour cela il suffit de cliquer-droit sur le dossier en
question, choisir « Lire les informations », dans l’onglet « Permissions » puis indiquer
777. (solution alternative, une fois le fichier sélectionné, faites pomme + i).
- Effectuer la même opération de changement de permission pour le dossier « config »
se trouvant dans « ndxz-studio ».
4 Installation/Configuration
Dans votre navigateur internet, entrer dans l’URL « votre_site/ndxz-studio/
install.php ».
PS : pour ceux qui ont trop pris d’infusions d’herbes de Provence, faut pas écrire
«votre_site».... mais votre nom de domaine, moi par exemple c’est «sophiegarcia.net».
Choisissez votre langue et validez.
Si toutes les étapes se sont bien déroulées, vous devriez voir des X verts.
2
Entrez le nom de votre site, les informations de votre base de données, et validez.
Si tout c’est bien passé, vous devriez pouvoir vous connecter.
PS: si ça marche pas, c’est peut-être parce qu’il vous manque toutes les infos
nécessaires fourni par votre hébergeur. Pour rappel :
Assurer vous d’avoir les données d’accès à votre base de données MySql.
Si vous n’avez pas ces informations, rendez vous sur l’interface de votre web-manager
ou demandez les codes à votre hébergeur.
Vous devez disposer des codes suivants:
- serveur (database host)
- nom de la base (database name)
- utilisateur (database username)
- mot de passe (database password)
Quand l’installation est terminée, il est indispensable de supprimer le fichier
« install.php » qui se trouve dans « ndxz-studio ».
Changer aussi la permission de « /ndxz-studio/config » en 755 et de « /ndxzstudio/config/config.php » en 644.
Quand vous aurez organisé votre site et créé vos galeries, pensez à prendre le temps de
vous faire des URL propres.
Toi pas comprendre? va voir ici : http://www.carolinemenges.com/journal/?p=249
voilou
PS : Big up et maximum respect pour Caroline Menges, qui a fait ce tutoriel visible
sur son site Pimp my Indexhibit ICI.
Retenez bien l’adresse de ce site, c’est le seul à ma connaissance qui propose des tutos
en français : http://www.carolinemenges.com/journal/
3
2 Comment customiser
Sur le site cité plus haut, il y a ce tuto pour créer son propre thème Indexhibit :
Par défaut, on a le choix entre 2 thèmes: « eatock » ou « sample » .
Bien-entendu les créateurs d’indexhibit encouragent à ce que chacun s’approprie le
CMS et adapte l’interface selon ces goûts.
Pour commencer:
1 En passant par l’application FTP, aller dans le dossier ndxz-studio > site > puis
copier le dossier « sample » en local sur votre ordinateur.
Une fois le dossier se trouvant en local, renommer le (ex:monstyle).
Dans ce dossier ce trouvent 3 fichiers,
- index.php: le « template » en php qui génèrera toutes vos pages.
- style.css: c’est ici qu’il faudra faire les modifications graphiques (changer les
typos, couleurs ds liens, tailles du menu, etc.)
- ie.css: les paramètres en css juste pour internet explorer.
2 Editez « style.css » dans un éditeur de textes et faites vos modifications.
Quand vous avez finit, en passant par votre application FTP, placer le dossier de votre
thème, « monstyle », dans le dossier suivant /ndxz-studio/site (aux côtés de
« sample » et « eatock »).
3 Pour rendre le thème actif:
- logger vous sur votre interface utilisateur indexhibit
- aller dans la rubrique « Règlages » (en haut à droite, à côté de « nouveau »)
- assurez-vous d’être en Mode avancé (sélectionner « On » dans le menu déroulant)
- puis dans le champs « Thème », choisissez « monstyle » dans le menu déroulant
- pour finir, ne pas oublier de mettre à jour...
4
Alors c’est sympa de faire son thème à soi mais il faut un peu s’initier au langage CSS,
Html, tout ça tout ça.
3 Liens utiles pour apprendre le langage CSS (et autres)
- Les bases
http://css.mammouthland.net/feuille-de-style-css-debutant.php
http://www.aidenet.com/css/
- Les couleurs
http://stylescss.free.fr/couleurs.php
http://html-color-codes.com/
- Les polices
http://csstypeset.com/
http://blog.barbayellow.com/2006/12/06/typo-web/
http://css4design.com/des-ensembles-de-polices-coherents-pour-le-web
http://www.w3schools.com/css/css_text.asp
http://www.3point7designs.com/blog/2008/06/10-examples-of-beautiful-csstypography-and-how-they-did-it/
- Feuilles de style :
http://www.alsacreations.com/tutoriels/
http://www.aidenet.com/css/css40a.htm
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietescss.html#ss_part_1
http://www.yoyodesign.org/doc/w3c/css2/box.html
http://www.aidenet.com/css/css41b.htm
http://laltruiste.com/document.php?url=http://laltruiste.com/courshtml/
strucbodymarge.html
- Thème centré fait par un graphiste (il y en a des tas à chercher sur le net) :
http://test.hmplus.net/
- Outil pour Firefox, pour savoir comment est construit un site qui vous plaît :
https://addons.mozilla.org/fr/firefox/addon/1843/
5
- HTML (pour personnaliser via le back-office d’Indexhibit dans l’onglet de la
page Réglages, voir ci-dessous) : http://www.lehtml.com/html/texte.htm
6