function = je.blogue();

Un thème vide pour WordPress

François — Mon, 30 Mar 2009 01:58:53 +0000

Voici dans un fichier ZIP les fichiers de base PHP et CSS dont vous avez besoin pour concevoir votre thème personnalisé WordPress. Technicalité importante ici, ces fichiers sont parfaitement compatibles avec le version 2.7 de WordPress ainsi qu’avec les versions plus récentes.

J’espère que vous trouverez ces fichiers utiles pour amorcer votre prochain thème; n’hésitez pas à m’informer des erreurs éventuelles qui auraient pu m’échapper.

Note : Pour bien vous y retrouver, je vous conseille d’avoir un minimum de connaissances en (X)HTML et CSS.

Vous pouvez télécharger le thème en cliquant ici.

À bientôt !

Pour voir vos documents en grandeur réelle dans InDesign

François — Mon, 26 Jan 2009 11:30:16 +0000

Il n’est pas toujours facile, lorsqu’on travaille dans le logiciel InDesign, de savoir quelle valeur donner à l’outil zoom pour voir notre document en grandeur réelle. Grâce au module « Script » du logiciel, il devient maintenant facile de configurer, en une seule ligne, une fonction pour palier à ce problème.

Voici les étapes à suivre :

1- À l’aide d’un éditeur de texte, créez un fichier vide que vous nommerez zoomGrandeur.js. J’utilise habituellement Notepad++. Si votre éditeur de texte ne vous permet pas de sauvegarder avec l’extension .js, vous pourrez la changer plus tard.

2- Insérez la ligne de code suivante :

try {app.layoutWindows[0].zoomPercentage = 100 } catch (e) {};

3- Démarrez l’application InDesign et créez un document vide de la dimension de votre choix.

4- Activez la visibilité des règles en passant par le menu « view » ou par le raccourci clavier (CTRL ou POMME + R)

5- Placez le curseur sur la règle puis, en cliquant sur le bouton droit de votre souris, sélectionnez l’unité de mesure que vous désirez utiliser.

6- Ensuite, placez une vraie règle graduée (dans la même unité de mesure qu’à l’étape 5 et si possible en bois ou plastique) sur votre écran et faites-la correspondre à celle affichée. Pour ce faire, il faut modifier la valeur en % qui se trouve au bas à gauche de la fenêtre de votre document.

7- Lorsque vous arrivez à faire correspondre la règle InDesign à votre règle réelle, notez la valeur en pourcentage à laquelle vous êtes parvenue et retranscrivez-là dans la ligne de code du fichier zoomGrandeur.js, en remplacement de la valeur 100 (zoomPercentage = 100).

8- Après avoir sauvegardé votre fichier, vous pouvez en placer une copie à deux endroits, selon la version de InDesign que vous utilisez.

Pour la version 4 (CS2), copiez le fichier dans le répertoire d’installation \Program Files\Adobe\Adobe InDesign CS2\Presets\Scripts
Pour les autres versions plus récentes du logiciel, il faut passer par le menu du logiciel:
- Window/Automation/Scripts
- Lorsque la palette Scripts apparaît, un clic-droit sur le sous-menu « User » fait apparaître la fonction « Reveal in explorer »
- Copiez votre fichier zoomGrandeur.js à cet emplacement. Votre script devrait alors apparaître automatiquement dans la palette.

9- Pour finir, lorsque vous souhaitez utiliser cette option, il ne vous reste plus qu’à cliquer sur le script dans votre palette pour le voir s’activer.

Je publierai prochainement un article sur comment créer des raccourcis claviers qui permettent d’utliser les scripts plus rapidement.

Créer un bas de page qui colle grâce à CSS (2)

François — Mon, 26 Jan 2009 11:00:25 +0000

Une deuxième façon pour garder, avec l’aide de CSS, le bas de page positionné au bas du navigateur quelque soit la hauteur de la page. Pour voir la première façon.

Pour vous aider à réaliser cet exemple, vous pouvez télécharger le code HTML qui vous servira de matière première tout au long du présent exercice. Comme vous pourrez constater, j’ai déjà formaté le document en y insérant du style dans la balise .

Cette deuxième façon consiste à se servir de la marge négative pour forcer le bas de page à apparaître collé au bas du contenant principal.

Comme dans l’exemple précédent, il est bon de spécifier dans la feuille de style que l’on veut forcer les balises et à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut forcer le contenant principal « #wrapper » à être d’une hauteur minimum de 100 %. Le tout en prenant bien soin de créer un correctif pour permettre à tous les navigateurs
(sauf IE 6) de bien comprendre la syntaxe de la déclaration « height:auto ».
#wrapper { min-height: 100%; height: 100%; margin: 0 auto; /* sert à placer le contenant #wrapper au centre du navigateur */ } html>body #wrapper { height:auto } /* une des façons de cacher du style au navigateur Internet Explorer 6 */
Il faut maintenant ajouter au contenant une marge négative, ce qui va permettre de créer l’espace nécessaire pour le bas de page.
#wrapper { min-height: 100%; height: 100%; margin: 0 auto -50px; /* 50 pixels représente ici la hauteur souhaité de notre bas de page */ }
Pour terminer, il ne reste plus qu’à indiquer la hauteur du sélecteur de bas de page, ici identifié « #footer ». Cette hauteur doit correspondre à la marge négative de 50 pixels du contenant.
#footer { height:50px; }
Pour que tout fonctionne comme prévu, le bas de page doit se retrouver à l’extérieur du contenant principal. Il faut également créer un

vide au bas du contenant, ayant la même hauteur que le bas de page.

#espace

{

height:50px;

}

Une façon simple de configurer les trois W d’une adresse Web

François — Tue, 16 Dec 2008 12:00:04 +0000

Lorsque l’on met en ligne un site Web pour la première fois, il est important de choisir si l’on veut garder ou non, dans l’adresse, les trois W qui précèdent le nom de domaine (ex. http://www.mondomaine.com). Ceci, afin d’éviter le problème bien connu avec le moteur de recherche Google qui a comme défaut de référencer un même site en ne tenant pas compte de la présence/absence des W, ce qui en anglais est plus connu sous l’appellation « Google canonical problem ». Par conséquent, un même site se retrouve référencé sous différents noms de domaine et risque donc de voir s’affaiblir sa cote liée au nombre de visiteurs.

Pour forcer le serveur à enlever ou ajouter les W, vous devez surpasser les configurations de votre serveur Web à l’aide d’un petit fichier placé directement dans le répertoire racine « / » du site. Le fichier doit absolument porter le nom « .htaccess » (http://www.mondomaine.com/.htaccess). Il se pourrait que votre serveur possède déjà ce fichier, auquel cas, vous n’aurez qu’à ajouter les informations spécifiées ci-dessous.

Pour ceux et celles qui n’auraient pas déjà ce fichier, vous pouvez en créer un en vous servant d’un éditeur de texte. Pour ma part, j’utilise habituellement Notepad++.

Voici comment procéder.

1) Créez sur votre ordinateur, un fichier vide que vous nommerez htaccess.txt.

2) Insérez les lignes de codes correspondant à votre choix, et n’oubliez pas de modifier le nom de domaine.

Pour enlever les WWW

RewriteEngine On RewriteCond %{HTTP_HOST} ^www.mondomaine.com$ [NC] RewriteRule ^(.*)$ http://mondomaine.com/$1 [R=301,L]
Pour forcer le serveur à garder les WWW

RewriteEngine On RewriteCond %{HTTP_HOST} ^mondomaine.com$ [NC] RewriteRule ^(.*)$ http://www.mondomaine.com/$1 [R=301,L]
3) Sauvegardez votre fichier et envoyez-le sur votre serveur dans le répertoire racine « / » du site (ex. http://www.mondomaine.com/htaccess.txt).

4) Renommez le fichier « htaccess.txt » en « .htaccess ».

Cet article s’adresse tout particulièrement à ceux et celles qui ont un site sur serveur Linux (Apache). Pour régler le même problème avec un serveur IIs de Windows vous pouvez consulter ce lien (en anglais).

Note : Cette codification m’a été inspirée après la lecture du livre de Aarron Walter,
Building Findable Websites, publié cette année chez New Riders.

À bientôt !

Un bouton reluisant tout usage pour vos projets

François — Mon, 01 Dec 2008 11:00:13 +0000

Voici un bouton de type reluisant (glossy) qui pourrait bien vous servir pour vos projets. Il est possible de changer certains paramètres comme la couleur, le texte et l’opacité de certains styles pour en faire quelque chose de différent.

Comme vous pourrez le constater, j’ai créé deux groupes optionnels « Option sombre » et « Option claire ». Vous n’avez qu’à choisir entre les deux groupes celui de votre choix.

Pour télécharger le fichier.

Créer un bas de page qui colle grâce à CSS (1)

François — Thu, 20 Nov 2008 01:41:21 +0000

Voici une première façon pour garder, avec l’aide de CSS, le bas de page positionné au bas du navigateur quelque soit la hauteur de la page.

Cette première façon consiste à se servir du positionning pour forcer le bas de page, alors en mode absolute, à toujours suivre le bas de l’écran. C’est une méthode simple et efficace mais elle nous oblige par contre à nous servir du positionnement, ce qui peut parfois ne pas convenir au type de page que nous avons à coder.

Pour commencer, il est bon de spécifier dans la feuille de style CSS que l’on veut forcer les balises et à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut mettre tout le contenant de la page, ici appelé « #wrapper », en position relative et lui donner une valeur minimale de 100 % pour sa hauteur.
#wrapper { position: relative; min-height: 100%; }
Étant donné que la déclaration « min-height » n’est pas comprise par Internet Explorer 6 ni les versions antérieures, l’ajout d’un filtre correctif dans la feuille de style est essentiel.

Note : Le * html placé devant le nom du sélecteur concerné ne rend visible la déclaration que pour les versions 6 et plus anciennes d’Internet Explorer mais n’est pas visible pour la version 7 et plus récente.
* html #wrapper { height: 100%; }
Pour terminer, il ne reste plus qu’à positionner le sélecteur du bas de page, ici identifié « #footer », en position absolue et à attribuer une valeur nulle (0) à la coordonnée du bas :
#footer { position: absolute; bottom: 0; }
Puisque le bas de page se retrouve en position absolue, il est toujours bon de spécifier les dimensions exactes de celui-ci.
width:560px; /*600 pixels moins les 20 pixels de chaque côté*/
Sur ce, à bientôt !

Quelques brosses pour Photoshop

François — Sun, 12 Oct 2008 02:59:40 +0000

Voici une première série de brosses que j’ai conçues pour le logiciel Photoshop. Elles devraient fonctionner à partir de la version CS1.

Idéales pour créer des textures et ajouter de la patine à vos images, ces brosses vont vous plaire, j’en suis sûr !

Pour télécharger (3.7 Mo).

J’attends vos commentaires !

Forcer l’apparition de la barre de défilement verticale

François — Wed, 06 Aug 2008 05:23:13 +0000

Sur les sites qui ont des pages de différentes longueurs, le problème de l’apparition et de la disparition de la barre de défilement verticale se pose souvent, ce qui a pour conséquence un décalage horizontal pouvant être visuellement déplaisant pour l’utilisateur du site.

J’ai créé un exemple pour bien illustrer le problème. Lorsque l’on navigue entre les trois pages (qui sont de différentes hauteurs) on s’aperçoit du décalage horizontal que crée la disparition de la barre de défilement.

La solution est très simple. Pour forcer la barre de défilement à apparaître sur toutes les pages d’un site, il suffit d’ajouter à la feuille de style CSS le sélecteur HTML et de lui attribuer une valeur de 100 % à la hauteur et de un (1) pixel à la marge du bas. La marge, si minime qu’elle soit, est suffisante pour faire « déborder » la hauteur de la page et ainsi faire apparaître la barre de défilement :
html { height:100%; margin-bottom:1px; }
J’attends vos commentaires. À bientôt !