[Tutoriel] Créer ses templates pour Mail 3 (Mac OS X)
INTRODUCTION
Peut-être avez-vous remarqué que depuis la version 10.5 de MAC OS X (Leopard), l’application Mail dispose d’une nouveauté forte intéressante, la possibilité d’habiller ses courriers via des interfaces originales et colorés. Même si cette nouveauté est très appréciable, il n’en demeure pas moins que le choix des templates (interfaces visuelles) est vite limité et ce, malgré la trentaine de visuels disponibles. Avec ce tutoriel, je vais tenter de vous apprendre à créer vos propres templates qui vous permettront de correspondre avec brio... Suivez le guide !
AVANT DE COMMENCER ...
Il faut préalablement savoir que pour effectuer cette tâche qui s’avère délicate, vous allez devoir mettre les mains dans les entrailles de votre système pour y trouver des dossiers cachés et des fichiers à la gestion complexe. Sachez également que vous devez disposer d’un éditeur de texte (TextEdit par défaut) et d’un logiciel de traitement d’image (Photoshop ou The Gimp par exemple).
Pour ceux qui s’étonnent que Mail propose cette nouveauté, voici une petite piqûre de rappel. Pour obtenir les templates proposés par Apple, ouvrez votre application, créez un nouveau message et, à droite de la nouvelle fenêtre, cliquez sur le bouton Afficher les modèles.
Vous aurez alors accès à une liste vous offrant plusieurs familles de templates selon vos besoins. Chaque famille contient plus ou moins de visuels différents avec quelques uns plutôt réussis comme ceux du type photos par exemple.
PREMIERE PARTIE : Trouver les fichier
Avant toute choses, fermez votre application Mail car il faudra à chaque fois la relancer pour voir vos avancées. A présent, rendez-vous dans votre Finder et cherchez le dossier Macintosh HD (par défaut) ou peut importe le nom que vous lui aurez donné.
A présent, suivez ce chemin très précis :
Macintosh HD > Bibliothèque > Application Support > Apple > Mail > Stationery.
C’est là que les choses sérieuses commencent. Ici, vous devriez trouver un autre dossier se nommant Apple. Ce dernier contient tous les templates de la marque (ceux qui sont déjà disponibles dans l’application). Copiez ce dossier et collez-le au même emplacement puis donnez lui le nom que vous désirez.
A présent, nous allons partir de cette nouvelle base (notre dossier) et y supprimer tout ce qui ne nous est pas nécessaire. De plus, en suivant cette technique, nous ne mettons pas en danger les éléments créés par Apple et, en cas d’erreur, une simple suppression de notre dossier remettra tout en état d’origine.
En entrant dans le dossier, vous trouverez une série de sous-dossiers avant d’atteindre les différentes familles de templates : [COLOR="Orange"]Votre dossier > Contents > Ressources.[/orange]
Vous allez sans doute remarquer que les sous-dossiers représentent bien les familles de modèles de l’application Mail (c’est écrit en anglais ici). Maintenant nous allons faire un peu de ménage dans tout ça et ne garder qu’un seul dossier de base (vous dupliquerez si vous avez besoin de créer plusieurs familles de templates).
Dans notre exemple, nous n’allons garder que le dossier Photos et supprimer tous les autres (vous devez néanmoins garder le fichier TableOfContents.plist). Maintenant, vous pouvez renommer ce dossier comme bon vous semble car il s’agira de votre famille visible dans la liste de l’application Mail.
Continuons de descendre dans l’arborescence. Entrez dans les différents sous-dossiers jusqu’à atteindre toute une série de langues : Votre famille > Contents > Ressources.
Bien. Ici, les dossiers que vous voyez correspondent aux différentes langues que couvre le système d’exploitation MAC OS X. Si vous regardez le contenu de chacun de ces dossiers, vous y trouverez un fichier DisplayName.strings. Si vous ouvrez ce dernier (via TextEdit par exemple), vous remarquerez qu’il contient le nom de la famille dans la langue du dossier. Si vous désirez nommer votre famille dans toutes les langues, libre à vous. Pour ma part, je n’ai gardé que la langue qui m’intéresse à savoir le français (French). Sélectionnez tous les dossiers sauf celui de votre langue et supprimez les.
Maintenant, vous disposez du dossier de votre langue, d’un fichier TableOfContents.plist et d’une série de fichiers .mailstationnery.
Ces formats sont en réalité des paquets compressés qui contiennent, vous allez le voir, tout un tas de choses. Avant de commencer à modifier les différents fichiers, je vous invite à ne garder qu’un seul de ces paquets (vous pouvez double cliquez dessus pour voir à quoi ils correspondent dans l’application Mail et garder celui que vous préférez).
Il ne vous reste donc plus que trois choses : un dossier et deux fichiers. Nous allons les traîter les uns après les autres en allant du plus simple au plus compliqué. Commencez par entrer dans le dossier de votre langue et ouvrir le fichier qui s’y trouve. Modifiez le nom de votre famille pour qu’il corresponde à celui de votre choix (nommez-le exactement comme votre dossier).
Revenez en arrière et ouvrez à présent le fichier TableOfContents.plist. Ce dernier contient un arbre représentant tous les templates de la famille. Vous allez repérer les noeuds <dict> et supprimez tous ceux qui ne vous intéressent pas pour n’en garder qu’un (le premier) et le renommer comme votre fichier .mailstationnery. Seul les balises <string> vous intéressent, laissez le reste.
ATTENTION : Vous ne devez supprimer que les noeuds <dict> mais pas le reste de l’arbre !
Parfait. A présent, intéressons-nous au gros du morceau. Regardez le fichier .mailstationnery. Comme je le disais, ce format est un paquet contenant plusieurs choses. Mais comment l’ouvrir me demanderez-vous? Et bien nous allons tout simplement changer l’extension par une autre fictive comme .txt par exemple. Profitez en pour renommer ce templates comme bon vous semble. Quand vous allez valider, MAC OS X va vous demander de confirmer votre choix. Acceptez de passer ce format en .txt pour le voir se tranformer... en dossier.
Vous allez vite remarquer que ce nouveau dossier dispose une fois de plus de plein de sous-dossier successifs.
Passez par chacun d’eux avant d’atteindre un point que vous aurez l’impression d’avoir déjà vu : Votre template > Contents > Ressources.
Cela vous semble du déjà vu? C’est normal, c’est à cause des dossiers de languages. Nous allons donc effectuer exactement la même opération que précédemment à savoir, supprimer tous les dossiers de langues sauf celui qui nous intéresse, le français (French).
Nous y voilà, c’est avec ce nouveau contenu que vous allez pouvoir créer vos propres modèles. En plus de votre dossier de langue, il devrait vous rester deux fichiers bien particuliers : content.html et Description.plist. Vous remarquerez également qu’il y a un tas d’images, ce sont elles qui composent les décors du modèle. Renommez votre fichier de langues pour qu’il corresponde au nom de votre template et passons à la prochaine étape !
DEUXIEME PARTIE : Modifier le modèle
Le fichier .html contient le code de notre template. Pour ceux qui connaissent ce language, vous serez en terrain connu. Pour les autres, je vous conseille vivement de commencer par vous renseigner sur ce dernier. Même sans grandes connaissances dans ce domaine, vous allez pouvoir créer votre template mais en savoir plus sur lui vous permettra de savoir exactement ce que vous faîtes... Vous aurez besoin d’un éditeur de texte pour exploiter correctement ce fichier (TextEdit pour le plus simple ou Dreamweaver pour le plus complet).
Ceux qui connaissent remarqueront que cette page contient un code tout à fait simpliste et qui correspond beaucoup à ce que l’on peut trouver dans bon nombre de sites Internet. Et pour cause, les boîtes mail lisent ce language mais exigent une écriture bien particulière, ce qui explique l’utilisation des tableaux plutôt que des DIV. Les amoureux du code propre et du CSS vont s’arracher les cheveux mais sachez que vous serez obligés de passer par cette méthode pour que votre message soit tout simplement lu par la boîte mail qui reçevra votre modèle.
C’est là que votre logiciel de traitement d’image va devenir important (Photoshop ou the Gimp) car vous devez créer votre interface, la découper et l’intégrer dans ce code. Je ne vais pas faire un cours d’intégration HTML car ce n’est pas la question abordée ici mais une fois fait, nous allons nous intéresser à quelques points importants.
Vous aurez peut-être remarqué que cette balise image est un peu différente de ce qui se fait d’habitude. Et pour cause, il s’agit de la fameuse zone où vous pourrez glisser vos photos. Pour ceux qui ne le saurez pas encore, la plupart des modèles proposés par l’application Mail permettent d’effectuer des glissez/déposez des photos stockées sur votre machine vers des zones établies (reconnaissables grâce à leurs contours et au texte qui apparaît au passage de la souris).
Grâce à un procédé technique dont seul Apple a le secret, vous allez pouvoir vous aussi créer cet effet et glissez vos photos dans ces zones qui seront intégrées à vos templates. Pour y arriver, la première chose à faire et d’utiliser cette balise image. Vous remarquerez que la source n’est pas l’image elle-même ce qui est tout à fait normal étant donné que cette page fonctionne en étroite colaboration avec le fichier Description.plist que nous avons aperçu tout à l’heure. Pour le moment, nous allons commencer par paramétrer cette page HTML. Donnez un nom à cette source (src) puis mettez les dimensions exactes de votre image (ne touchez ni à la classe, ni au style).
Nous verrons plus tard l’autre fichier car pour l‘instant, nous allons nous intéresser aux images. Regardez attentivement votre dossier. Vous voyez un tas d’images dont certaines qui semblent avoir un lien. En effet, cette zone de glissez/déposez va demander beaucoup d’images : le fond, le contour, le masque et l’image temporaire.
Ces images sont toutes importantes et vous devez les créer en fonction de vos besoins en respectant les formats et les transparences. Les noms peuvent changer sauf pour le fichier thumbnail.png qui doit lui garder exactement le même nom (il s’agit de la miniature que vous aperçevez dans l’application Mail pour vous indiquez le template que vous avez sélectionné).
Une fois que vous avez créé vos images, nous allons pouvoir nous intéresser au fichier Description.plist.
Ouvrez-le (TextEdit par défaut) et observez l’arbre qui s’y trouve. Tous les noeuds sont importants bien sûr mais celui qui nous intéresse pour le système de glissez/déposez est le <key>Composite Images</key>. Dans ce noeud, vous allez trouver toutes les informations relatives à notre image. Il vous suffit de remplacer chaque données par les noms que vous aurez choisis pour chacune d’entre elles (le fond, le contour, le masque et l’image temporaire).
La balise Drop Zone Angle sert à donner une rotation à votre image. Si vous n’avez pas besoin de cette option, mettez la à 0.
La balise Drop Zone Offset sert à donner la position en X et Y de votre zone de dépôt.
La balise Drop Zone Size sert à donner les dimensions de votre zone (en général la même que celle de votre masque).
Maintenant que vous avez modifiez tous vos noeuds, nous allons pouvoir faire nos essais dans l’application Mail.
TROISIEME PARTIE : Testez les templates
Remontez dans l’arborescence des dossiers jusqu’à hauteur des langues, là où vous avez modifié le format .mailstationery en .txt. En l’état, votre template ne sera pas visible dans l’application Mail car ce dernier ne reconnaît que des formats .mailstationery. Modifiez donc l’extension du dossier dans ce format pour qu’il revienne à sa forme d’origine. A présent, nous allons testez notre template.
Si ce n’est pas déjà fait, fermez l’application Mail et relancez-là. A présent, créez un nouveau message et affichez les modèles. Dans la liste de famille, vous voyez apparaître la vôtre et, à l’intérieur, votre ou vos templates. Cliquez dessus pour voir votre oeuvre s’accomplir sous vos yeux... Félicitations, vous avez réussi à créer vos propres modèles !
Maintenant vous pouvez déposer vos propres photos dans les zones prévues à cet effet, modifier les textes et titres et envoyer de beaux mails personnalisés.
Un petit conseil : Pour que votre message soit le plus léger possible, pensez à optimiser votre découpage dans votre logiciel de traitement car si votre mail contient en plus quelques photos, il peut très vite dépasser le poids autorisé par votre boîte de messagerie. Enfin, sachez que j’ai testé ces mails personnalisés sur plusieurs types de messagerie notemment sur : Hotmail, Gmail et Yahoo. Les messages passent bien mais certaines erreurs peuvent survenir surtout au niveau de la mise en page. Je vous recommande donc de vous créer des comptes fictifs sur chacune d’entre elles et de faire vos propres tests. Malheureusement, l’optimisation du code pour les différentes messageries n’est pas une science exacte et demande patience et persévérence.
EN CONCLUSION
J’espère que ce petit tutoriel vous aura plu et vous sera utile. Il n’existe malheureusement pas beaucoup d’aide sur Internet sur le sujet ce qui a motivé ma démarche d’écrire ces quelques pages. Cependant, vous pourrez obtenir de précieux conseils sur les différents forums des utilisateurs Macintosh.
Répondre avec citation
Partager