Pour ce site Cerre-reflexe, BANK tm s’est approprié l’outil qu’est Indexhibit et nous livre un site frais, se détachant de l’esthétique qu’on associe habituellement aux sites réalisés avec Indexhibit.

Le logiciel est disponible ici.

Une fois le programme installé, établir une connexion.  Vous devez vous munir impérativement de vos CODES FTP fourni par vote hébergeur pour pouvoir établir une connexion. Ces codes se présentent sous la forme suivante:
- nom de votre serveur ftp : environ sous cette forme > ftp.votresite.com ou votresite-ftp.com ou votresite.com
- Login ou utilisateur
- mot de passe

Une fois le connexion établie vous pourrez  le contenu de votre serveur et le modifier.

Nous allons voir comment ajouter un mini formulaire de contact très simple à votre page de contact.
D’abord merci à James Dodd qui a développé ce plugin. Vous pouvez retrouver l’original ici.

Avant de commencer
Télécharger le fichier dont vous allez avoir besoin ici.
Ouvrir le zip. Le dossier contient 2 fichiers:
plugin.email_form.php qui est le plugin
readme.plugin.email_form_fr.txt qui est l’explication en français.

Installation
Connectez vous à votre serveur à l’aide de votre programme FTP (cyberduck ou Filezila).
Copier le fichier « plugin.email_form.php » dans le dossier
« ndxz-studio > site > plugin »

Utilisation
Connectez vous à votre tableau de bord indexhibit. (http://www.monsite.com/ndxz-studio/)
Copier ce code sur votre page de contact, dans le champ de texte de votre interface.

<plug:email_form yourmail=moi@monsite.com, return_message=’ici votre message de retour’, error_message=’ici le message d erreur qui s affichera’, email_subject=’ici le sujet de l email que vous allez recevoir’/>

Adapter le formulaire
youremail= votre adresse email
return message= message de confirmation d’envoi de votre message
error message= le message afficher qd une erreur s’est produit
email_subject= intitulé de l’email que vous allez recevoir

Remarques
Les virgules sont a noter avec leur code HTML: &#44;
Les apostrophes aussi: &acute;
La taille des champs peut être modifiée, en changeant la valeur de « size » (voir annotation dans le fichier .php du plugin).
À tester au fil de temps, j’espère que la mise en place de ce formulaire n’aura pas pour conséquence de recevoir 50 emails de spam par jour

Site impressionnant par sa simplicité et son élégance qui montre l’étendue des possibilités qu’offre indexhibit. Ce site est entièrement informatif et est constitué uniquement de texte, et d’une image de fond. nous n’avons pas affaire à un portfolio rassemblant des images, mais bel & bien un site classique informatif. Bravo à Michael Häne qui a su s’aproprier indexhibit.

Tout d’abord, c’est quoi un favicon?
il s’agit de la petite image se trouvant á côté de l’URL de votre site dans la barre du navigateur en haut.

Fabriquer son favicon
Pour cela, il faut d’abord créer une image de 16X16 pixels.
Sauvegardez là en .gif ou .png.
Puis il va falloir la modifier en .ico. Malheureusement on ne peut pas directement depuis photoshop sauvgarder en .ico. C’est pourquoi nous allons passer par favicon.ico Generator.
Ici il vous suffira d’importer votre image 16X16px faite précédemment, puis dans la colonne du milieu « preview » vous pouvez voir ce que ca donne et lorsque vous êtes satisfait, vous pouvez l’exporter en cliquant sur « Download Favicon » qui vous fera votre favicon.ico.

Remarque: il est possible d’importer toute sorte d’image (photo et autre) mais il faut veillez à garder un signe visible, compact et fort en contraste, car 16 pixels c’est vraiment petit!

Encore un petit effort, on y est presque.
Maintenant il faut placer l’icône sur notre serveur et l’intégrer dans notre « index.php ».
Pour cela:
Ouvrir une connexion à votre serveur via l’application FTP (Cyberduck, filezilla).
Placer votre favicon.ico directement dans le dossier « files ».
! Remarque: vous pouvez placer votre icône où bon vous semble, veillez à écrire le chemin d’accès en conséquence.
Pour l’exemple noté ici, je vais partir du fait que l’on place l’icône dans le dossier « files » se trouvant à la racine de votre indexhibit.
Le chemin de votre icône sera donc: http://www.monsite.fr/files/favicon.ico

Il ne vous reste plus qu’à mettre ce lien dans notre index.php, se trouvant dans ndxz-studio/site/votrethème (attention ici, cela dépend quel thème vous avez activé: sample, eatock, votre_thème).

Copiez index.php en local sur votre ordinateur, puis ouvrir le fichier avec Smultron ou Notepad.
Insérez cette ligne de code après les balises meta:

(attention, ici c’est une image car problème d’affichage de code!!)

Enregistrez, puis replacer le fichier index.php dans ndxz-studio/site/votrethème.

!Remarque: je pense que dans ce tutorial il existe de nombreuses manières de se tromper: ex: ne pas indiquer le bon chemin au favicon, ne pas ouvrir le bon fichier index.php, copier le code dans le mauvais fichier etc. à faire avec beaucoup de prudence et patience…

Pour commencer:
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 ttes 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.

éditez « style.css » dans un éditeur de textes et faites vos modifications. (rapide introduction sur les changements basiques á faire en css dans un prochain tutorial.)
une fois votre fichier « style.css » adapté à votre goût,enregistrez-le.

en passant par votre applicatio FTP, placer le dossier de votre thème, « monstyle », dans le dossier suivant /ndxz-studio/site  (aux côtés de « sample » et « eatock »).

pour rendre le thème actif:
- logger vous sur votre interface utilisateur indexhibit
- aller dan la rubrique « Règlages » (en haut á droite, á côté de « nouveau »)
- assurez-vous d’être en mode avancé (selectionner « 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.

Télécharger ce fichier javascript (.js ) que vous trouverez ICI.

Placer ce fichier (expandingMenus.js) sur votre site, dans le dossier /ndzx-studio/site/js/ .

Éditer le fichier index.php de votre « style ». (cela dépend du style que vous avez activé, sample, ou eatock, ou mon_style ).

Dans ce fichier, repèrez la ligne de code
<script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js' ></script>

Collez juste en-dessous cette ligne de code ci
<script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js' ></script>

Repérez ce code ci
$(document).ready(function() {
setTimeout('move_up()', 1);
});

Et le remplacer par
$(document).ready(function()
{
setTimeout('move_up()', 1);
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
expandingMenu(4);
expandingMenu(5);
expandingMenu(6);
expandingMenu(7);
expandingMenu(8);
expandingMenu(9);
expandingMenu(10);

});

Il vous faudra avoir autant de « expandingMenu (…) » que vous avez de section.
Le mieux est d’en mettre tout de suite plus.

!! REMARQUE!!
La vitesse à laquelle s’ouvre votre menu est définie par la variable « speed » qui est déclarée dans le fichier .js
Si vous souhaitez qu’une des sections ne bénéficie pas de cet effet « déroulant », enlevé le de la liste, sachant que 0 correspond à 1.
Par exemple je ne souhaite pas que ma 4e section soit déroulante, j’aurais ce code:
setTimeout('move_up()', 1);
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(4);
expandingMenu(5);

une URL propre ressemble à cela:

http://www.mon-site.com/projets/usa/

une URL sale ressemblerait à cela:

http://www.mon-site.com/index.php?/projets/usa/

L’avantage est que c’est plus joli, et surtout que votre adresse sera plus facile à mémoriser  et plus forte de sens.
L’installation de base d’Indexhibit comporte des « URLs sales » (car le système des serveurs rencontrés  fonctionnait avec des URLs sales, et ils ont bien essayé avec des URLs propres, mais trop d’utilisateurs auraient rencontrés des problèmes ).

Ce dont vous avez besoin, c’est que votre serveur Apache comporte une technologie appelée « mod_rewrite » et disponible pour votre compte. Pour savoir si cette technologie est disponible ou non, renseignez vous chez votre hébergeur.  Ou vous pouvez aussi simplement essayer la manip’ suivante et voir si cela fonctionne ou non.

Comment procéder:
- renommer le fichier « htaccess » se trouvant á la racine, en « .htacces » (avec « . » le point devant)

- ouvrir le dossier « ndxz-studio » et extraire le fichier « defaults.php » que vous copierez quelque part en local chez vous. Puis ouvrez ce fichier soit avec un éditeur de texte comme « Notepad » ou « Smultron« .

Changez la ligne

define('MODREWRITE', false);

en:

define('MODREWRITE', true);

enregistrez et replacez le fichier « defaults.php » dans le dossier « ndxz-studio ».
Une fois ces opérations réalisées, cliquez un peu sur votre site pour voir si cela fonctionne. Si toutefois ce n’est pas le cas, réalisez ces opérations dans le sens inverse.

!! attention !!
En changeant votre htaccess en .htacces, le fichier deviendra invisible.
Il est certainement possible dans les préférences de votre application FTP d’activer l’affichage des fichiers cachés.

Si en effectuant cela, vous vous rendez-compte que votre hébergeur à déjà caché un .htaccess vous devez procédez avec précaution. Il est recommandé de sauvegarder les fichiers existants et de demander son hébergeur pour plus d’informations et qu’il vous aide à mettre en place votre fichier.

Merci à Julie pour ses astuces que voici:
A) URL des expos
Quand on change l’intitulé d’une exposition le lien de cette expo ne se met pas à jour:
Exemple: j’ai une expo « mon expo » située dans le dossier ‘project’. L’url de cette expo sera (avec une url propre) www.mysite.com/project/mon-expo/.
Mais comme je change d’avis comme de chemise et que je trouve que « mon-expo » ça le fait pas, je renomme cette expo ‘expo36′ or l’url reste www.mysite.com/project/mon-expo.

Ma solution au prob est d’accéder à sa base de données pour aller changer l’url à la main dans la table adéquate.
Je n’explique pas comment accéder à sa base de donnée, je suppose que c’est différent pour chaque hébergeur ( perso j’utilise OVH)

Procéder comme suit :
ouvrir la table ndxz_objects
éditer n’importe quelle colonne.

cocher la ligne de l’expo dont on veut renommer l’url (ici colonne title : « expo36″) et l’éditer (le crayon avec PHPMyAdmnin).
Aller dans la colonne ‘url’ et changer le texte. Attention ! ne changer que la dernière partie (www.mysite.com/project/mon-expo/ => www.mysite.com/project/expo36/) et ne pas supprimer le « / » final sinon problème.

On peut évidement changer d’autre chose mais je déconseille fortement de chipoter « section-id » et autres basiques.

Avec PHPMyAdmnin, en bas de la table on a un menu déroulant au dessus du second bouton exécuter. Si on sélectionne « Demeurer sur cette page » on peut aller voir les changements sur son site et remodifier sa table si besoin est (par exemple si plus rien ne marche ^^).

Puis rendez vous sur votre application FTP (Cyberduck ou Filezilla).
Uploader votre image dans un dossier de votre choix, je conseille à la racine du dossier « files ».
Ouvrez votre interface Indexhibit, dans la section « Réglages », repérer le champ « Texte Pre-Nav (HTML permis) » et créez un lien HTML vers votre image.

<a href="http://www.site_cible.com" ><img src="/files/mon_logo.png"  alt="mon logo" height="155" width="210"  > </a>

href: le lien-cible où se rendra le visiteur en cliquant sur le logo
img src: endroit où se trouve l’image, indiquer le chemin et son nom. ! >attention: sensible á la casse, si le nom de votre fichier comporte une majuscule (ex: Mon_image.gif), vérifier que vous l’avez également indiqué dans le chemin (img src= »/files/Mon_image.gif »)
alt: texte alternatif, qui s’affichera si le logo ne s’affiche pas, où sera lu à haute-voix pour les utilisateurs non-voyant
height: indiquer là le hauteur du logo en pixel
width: indiquer là la largeur du logo en pixel

Retrouvez l’article sur le site officiel ICI.

La raison pour laquelle je trouve ce site particulièrement réussi, est que tout est fait (le design global, la gestion du menu, etc.) pour mettre en valeur le sujet principal: les photos.
on aime: l’expanding menu, le petit widget-twitter et la photo aléatoire dans le fond!

http://www.lafilladelfotografu.com