Sometimes it just doesn’t fit right.
D’après photo.

Toile personnelle pour ma cuisine.

Illustration pour le site des Supers-pigeons !

Pigeon : Un niais, un sot, un homme simple et crédule que les fripons attirent dans un piège pour le duper; l’escroquer.

J’ai fait un rêve.
Dans ce rêve, le statut de pigeon était reconnu. Ils étaient fiers de leur condition. De leur gentillesse. De leur soutient.
Dans ce rêve, certains pigeons avaient atteint la quintessence de la pigeonnerie. Ces pigeons, dont les services rendus à la communauté étaient reconnus, se voyaient décerner le rang de SUPER PIGEON.

Création du Ministère de la Pigeonnerie

Après m’être réveillé je suis allé me doucher j’ai vite esquissé ce que pourrait être le logo de l’ordre national de la Légion des supers pigeons, plus sobrement nommé Ministère de la Pigeonnerie.

Premier croquis du logo du ministère.

Un certificat officiel

Rapidement, il est devenu évident qu’il fallait proposer aux gens un certificat qu’ils puissent imprimer et encadrer chez eux.
J’ai tout d’abord pensé à employer une bonne cinquantaine de personnes, chacune ayant une tache bien définie dans le Ministère, allant de la réception des demandes manuscrites en trois exemplaires au tamponnage du bout de papier officiel sans oublier la personne préposée à la perdition des dossiers.

Le certificat de Super Pigeon !

Mais je me suis vite rendu compte que ce serait bien trop compliqué, et je leur ai donc préféré le média web.

Allez-y, récompensez vos supers pigeons !

Le Ministère a donc ouvert un site internet pour générer des certificats à la volée : super-pigeon.fr !
De là, il vous est possible de rentrer le nom de votre ami pigeon, pour générer une url renvoyant vers son certificat virtuel.

Le générateur de certificat. Il suffit d'entrer le nom du pigeon pour ...

... générer une url raccourcie qui renvoie vers ...

... le certificat virtuel !

Ce certificat virtuel peut être envoyé via Twitter, FaceBook ou bien par mail.
Si aucun de ces moyens de communication ne vous plaît, il est toujours possible de l’envoyer par pigeon voyageur de copier l’url et de la coller où vous voulez.

Enfin, il est possible de générer un .pdf au formar A4 en cliquant sur le bouton correspondant.
Vous aurez ainsi un magnifique encadré dans votre bureau, entre le portrait de votre chien et celui de votre neveu !

Maintenant que vous savez tout, allez donc y faire un tour : http://www.super-pigeon.fr/

See you space pigeon

Travail personnel.

Principe de la démarche

Une maquette devrait toujours être montrée sur son support final. Quand vous faites des cartes de visite, vous les imprimez en 1:1. Idem pour les flyers ou les papier en-tête.
Il en est de même pour le webdesign. Il faut les présenter en situation réele dans un navigateur, avec la possibilité de scroller dans la page.

Pour les webdesigners / intégrateurs, il n’y a pas de soucis. Une maquette est l’affaire de 10 minutes.
Mais pour les autres, ceux qui ne savent pas coder (hé oui, il y en a), je vous propose deux archives de mise en situation (MES) simple d’utilisation.
Vous n’aurez qu’à générer des .png de vos design et à les coller dans un fichier pour les voir en situation réelle !

La mise en situation simple

Pour cette MES, il est possible de cutomiser deux choses :

• Le fond de la page (en bleu clair sur le schéma).
• L’image qui compose le webdesign (en bleu foncé sur le schéma).

Le carré bleu correspond au design, le fond bleu clair est votre fond personnalisé.

Voilà de quoi se compose cette MES :

• index.html (la page web qui va afficher le design),
• style.css (la feuille de style qui met votre page web en forme)
• un dossier images (dans lequel vous allez copier votre design).

Dans le dossier images se trouvent :

• mon_webdesign.png (le png de votre webdesign),
• fond.png (le png de votre fond de page).

Voilà ce que vous avez sur votre disque dur.

Pour mettre en place votre design, rien de plus simple.
Il suffit de générer un png pour votre fond, et un second (en n’oubliant pas d’activer la transparence) pour votre webdesign.
Vous les nommez comme les miens (mon_webdesign.png et fond.png) avant de les copier dans le dossier images (en écrasant les miens).
Ouvrez intex.html dans le navigateur de votre choix sauf Internet Explorer et vous verrez votre webdesign comme s’il avait été codé !
Allez donc voir par ici pour une démo en live.

La mise en situation en trois parties

La seconde mise en situation est un peu plus complète.
Elle permet d’avoir un fond sur toute la longueur pour le header, le footer et la partie centrale du design.

Les trois couleurs représentent les trois .png à utiliser.

Nous avons donc dans le dossier images :

• mon_design_header.png (le png de votre header),
• fond_header.png (le png de votre fond de header),
• mon_design.png (le png de votre design central),
• fond.png (le png de votre fond de page),
• mon_design_footer.png (le png de votre footer),
• fond_footer.png (le png de votre fond de footer).

Voilà ce que vous avez sur votre disque dur.

il vous suffit donc de remplacer mes 6 .png par les votres, et vous obtiendrez une mise en situation comme celle-là.

La balise title pour entrer votre titre de page

Vous venez donc de remplacer les png, vous ouvrez votre fichier html et là horreur ! Le titre de la page est signé de l’égocentrique PUShAUNE l’auteur de ce tutoriel !
Pas de panique, je vais vous montrer comment le modifier et mettre le nom de votre client à la place :

1/ Ouvrez index.html avec dreamweaver votre éditeur préféré.
2/ Cherchez la ligne 6 qui ressemble à ça :

<title>Ma super maquette par PUShAUNE</title>

3/ Remplacez Ma super maquette par PUShAUNE par votre texte.
4/ Enregistrez.

Et voilà, vous venez de changer le titre de votre page !

Comment améliorer ces mises en situations

Ces MES restent basiques mais bien pratiques. Alors oui, pour ceux qui qui ont des notions en CSS et qui n’ont pas peur de mettre les mains dans le cambouis, il est possible de définir les pading et margin des design.png ou encore d’afficher un background-color.
Mais il faut coder pour ça.

Un autre avantage est de mettre en ligne ces mises en situations pour que votre client puisse les voir après votre présentation.
C’est un vrai plus aux .pdf ou autres pages imprimées.

J’espère que ce tuto vous aura été utile. Petit rappel, les démos sont ici et là, les sources ici-même.

See you space internaute

Que nenni ! Tous ces gens se fourvoient ! Il y a bien des agences à la recherche de personnel et des gentils DA prêts à donner de leur temps pour s’occuper d’un stagiaire.
Mais alors, où est le problème ? Pourquoi personne ne trouve agence à sa demande ?
Tout simplement parce que la grande majorité bâcle leur premier contact.

Choisir ses entreprises

Le premier réflexe que vous pouvez avoir est de prendre le botin taper le domaine d’activité que vous ciblez sur google et noter les adresses des cinquante premiers résultats.
Super, vous avez maintenant un bonne centaine de personnes à spammer !
Restons pro. Cette méthode est totalement inefficace parce que :

• votre interlocuteur n’a certainement pas de poste à promouvoir,
• vous pensez sérieusement être le seul à avoir cette idée ?

Comme pour la majorité des choses qui peuvent nous arriver dans la vie, la qualité doit primer sur la quantité.

Ne postulez dans une agence que si vous répondez à au moins deux de ces critères :

• Vous vendriez père et mère pour y travailler.
• Vous correspondez à leurs attentes (personnalité et / ou compétences).
• Vous souhaitez découvrir leur secteur d’activité.
• Vous êtes pistonné par la tata de la RH.

Après une bonne demi-journée de dur labeur, vous aurez une liste de dix agences à contacter.

Cibler l’interlocuteur

Quand vous parlez à quelqu’un que vous venez juste de rencontrer, et si vous êtes sociable, vous vous intéressez à ce qu’il fait, qui il est, …
Et bien c’est pareil par mail.
Il faut faire comprendre à votre interlocuteur que vous ne l’avez pas choisi par hasard et que vous correspondez au poste qu’il a à pourvoir.
N’hésitez pas à aller faire un tour sur le site de son agence pour donner vos impressions à propos de leur travail, quelles réalisations vous accrochent et en quoi elles vous corespondent.

Une fois que vous avez accroché votre interlocuteur, vous pouvez continuer avec les formalités d’usage (compétences, références, …).

Sortir du lot

Certains font des CV originaux. Pourquoi pas, mais n’oubliez pas qu’avant de le visualiser, votre interlocuteur lit votre mail.
Oubliez l’Arial 14px Noir. Mettez en forme votre mail !
Vous êtes un créatif, montrez le !

Attention ! Je ne vous demande pas d’user du surlignage jaune fluo ou des typos grasses en corps 100. Juste une bonne hiérarchisation de vos idées.
Tips : N’oubliez pas que vous pouvez utiliser du HTML dans vos mail

Vous pouvez aussi avoir un parti pris dans votre discours. C’est toujours plus agréable de lire un texte qui retranscrit une personnalité forte plutôt qu’une série de phrases conventionnelles.

Les pièces jointes

Vous pouvez joindre trois types de documents :

• Une lettre de motivation.
• Un CV.
• Un book.

Par pitié, ne donnez pas une lettre de motivation en .doc (format Word) !
Vous pouvez être certain qu’avec un tel document, la moitié de vos interlocuteurs ne pourra pas l’ouvrir avec votre mise en page (hé oui, la fameuse non rétrocompatibilité des Offices de Microsoft )
Prenez le temps de l’enregistrer en PDF.

Idem pour le CV. Pas de Word, donnez un .pdf !

Enfin, pour le book, assurez-vous qu’il ne soit pas trop lourd.
Beaucoup de boites mail pro sont limitées à 5Mo, voir 3Mo pour certaines.

Les boulettes à éviter

Je vais maintenant finir avec un top 5 des boulettes à éviter, sous peine de vous retrouver sur 9GAG :

• Mettre tous vos contacts en copie. Quoi de mieux pour se sentir unique ?
• Donner des liens invalides. Pour montrer votre maîtrise du web.
• Dire que votre book ne contient que des travaux scolaires. C’est pas grave, ça veut pas dire que c’est mauvais !
• Se descendre avant de se présenter. « Je ne suis pas ce que vous cherchez mais quand même un peu ».
• Les fautes de français.

Oui, tout ça sent le vécu, et non je ne posterai pas les screens sur ce blog
Tous ces conseils ne vous assurent pas d’être pris à 100%. Seulement vous ne passerez pas par la case Poubelle dès la lecture de votre première phrase.
Sur ce, je vous souhaite bon courage dans vos recherches !

See you space internaute.

Pourquoi une page en construction ?

Dans le cas d’une création de site, la page en construction a plusieurs avantages :

• Informer les internautes de la sortie prochaine du site.
• Récupérer des contacts si l’on y met un formulaire.
• Indexer le site auprès des moteurs de recherche le plus tôt possible.

Dans le cas d’une mise à jour, elle peut servir à :

• Prévenir l’internaute (et auquel cas s’excuser des désagréments).
• Bloquer l’accès au site.

Les plugins, avantages et inconvénients

Plusieurs plugins existent pour mettre un site WordPress en mode maintenance.
Certains proposent même quelques personnalisations (couleurs, typos, ajout d’un compte à rebours, …) mais si vous voulez faire les choses à la bien, ils restent assez limités :

• Il est impossible de customiser à 100% le design.
• Dans la mesure du possible, j’évite d’utiliser des plugins (sécurité, lourdeur).

Un template de page : LA solution

Mais alors comment faire pour avoir une page en construction ? Tout simplement en utilisant les template de page !
Notre démarche ici est simple :

1/ Je code ma page en construction normalement dans un page-maintenance.php (avec mes balises head, body, …).
On va partir du principe que votre page ressemble à ça :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ma super page en constuction !</title>
</head>
<body>
Mon super corps de page en construction !
</body>
</html>

2/ J’en fais un template de page pour WordPress.
Pour ce faire, j’ajoute ces lignes de code avant le doctype :

<?php
/*
Template Name: Construction
*/
?>

Le nom de votre template est défini par ce qui arrive après Template Name:, soit ici Construction.

3/ Je crée une nouvelle page dans mon interface WordPress en allant dans Pages / Ajouter.

Le menu d'ajout de page.

4/ Après l’avoir titrée, je lui donne notre template Construction via la liste déroulante Modèles dans les Attributs de la page.

La liste déroulante modèle de WordPress

5/ Maintenant que nous avons notre page en construction finie et publiée, il suffit de la définir comme page d’accueil de votre site via le menu Réglages / Lecture.

Le menu Lecture de WordPress

Définir la page en construction comme page d'accueil

Et voilà, maintenant quand vos internautes entreront l’url de votre site, ils tomberont sur la page en construction !

Une nouvelle page d’accueil / blog

C’est bien beau tout ça, mais où est passée la page censée recueillir les articles ?
Et bien il va falloir la créer ! Allez donc dans Pages / Ajouter et nommer cette nouvelle page Accueil.
Allez ensuite dans Réglages / Lecture pour définir la page des articles.

Définir la page d'accueil.

Les limites de cette technique

L’avantage de cette technique est de pouvoir accéder aux pages du site internet en entrant leur url et ainsi voir les modifications que vous apportez à votre thème en direct.
Cet avantage est aussi un défaut. Si un internaute entre une url connue de votre site (comme par exemple www.monsite.com/blog/), il tombera sur votre page.

Cette technique est donc à privilégier si vous construisez le site pour la première fois.
En cas de maintenance, il vous faudra prendre des précautions pour masquer les autres page de votre site aux internautes (en forçant un login en admin par exempleou avec un .htaccess).

Fin du chantier, on ouvre !

Une fois votre site fini, il vous suffi de sélectionner dans le menu Réglages / Lecture votre page d’accueil comme page d’accueil

See you space internaute

Pourquoi travailler en monochromie ou bichromie ?

Travailler en mono ou bichromie permet d’économiser les encres que l’on n’utilise pas.
Par exemple, si votre charte vous impose un Pantone, vous pouvez très bien travailler avec sur un papier coloré et ainsi ne payer qu’une encre au lieu de quatre et pourtant jouer avec deux tons.

Nous allons donc commencer par le premier outil de création d’image : Photoshop.
Deux cas possibles :

• Vous disposez d’une image RVB ou CMJN à « convertir ».
• Vous partez d’une page blanche.

Travailler en bichromie sous Photoshop avec une image RVB ou CMJN

Nous allons prendre cette charmante demoiselle comme exemple :

L'outil noir et blanc de Photoshop CS5

On ouvre donc l’outil « Noir et Blanc » et on règle nos contrastes, pour arriver à ça :

Et non pas ça (avec la conversion automatique de Photoshop) :

Plus sexy non ?

On va maintenant attaquer les choses sérieuses : la conversion en bichromie.
Pour se faire, allez dans le menu Image / Mode / Niveau de gris.
Si une boite de dialogue apparaît, sélectionnez « Aplatir » .

Retournez ensuite dans le menu image / Mode, mais cette fois-ci pour sélectionner « Bichromie ».

Cette nouvelle fenêtre s’ouvre :

De là, vous allez pouvoir choisir le nombre et le type d’encre utilisé pour votre document.
Dans notre cas, l’image sera en monochromie. La seconde couleur sera ajoutée dans InDesign.
Cliquez donc sur le carré noir pour choisir votre Pantone.
Le célèbre panneau des couleurs apparaît. Cliquez sur Bibliothèques de couleurs.

Sélectionnez maintenant votre Pantone.

Après avoir cliqué sur OK, vous allez revenir à la fenêtre précédente. L’encre noire a été remplacée par la votre.

Votre image devrait maintenant ressembler à ça :

Pour vérifier que votre image n’a bien qu’une seule encre, ouvrez votre panneau « Couches« , vous n’en verrez qu’une seule qui s’appelle « Monochrome ».

Travailler en bichromie sous Photoshop sans image de base

Dans le cas où vous partez d’une feuille blanche (pour faire une illustration par exemple), ça va être beaucoup plus simple :
1/ Créez un nouveau document
2/ Convertissez-le en niveau de gris
3/ Convertissez-le en bichromie
4/ Choisissez votre Pantone
5/ Commencez à travailler !

Exporter vos images en .eps

Pour importer votre image dans InDesign, il va falloir la convertir en .eps
Pour cela, allez dans Fichier / Enregistrer sous et sélectionnez Photoshop EPS comme format.

Après avoir choisi votre destination, une nouvelle boite d’option apparaît.
Pour en savoir plus, je vous conseille de lire la documentation d’Adobe.

Travailler en bichromie sous InDesign

Maintenant que vous avez votre image, nous allons ouvrir InDesign.
La première chose à faire est de supprimer les couleurs inutiles dans la palette « Nuancier » pour éviter toute mauvaise manipulation.
Dans le cas de notre exemple, nous allons utiliser du noir 100%.
Après le petit nettoyage, vous devriez avoir ça :

Le nuancier nettoyé

Notre Pantone s'est ajouté au nuancier.

Vous pouvez maintenant commencer à travailler votre mise en page avec vos deux couleurs
Par exemple, je vais ici rajouter une typo noire sur mon image :

Générer son pdf avec InDesign et Acrobat Distiller.

Une fois votre créa finie, il est temps de sortir un .pdf pour l’imprimeur.
La première chose à faire est de générer un fichier PostScript. Pour ce faire, allez dans Fichier / Imprimer.
Dans le champ « Imprimante » entrez Fichier PostScript.
Dans le champ « PPD » entrez Adobe PDF 9.0.

Si vous ne l’avez pas, vous avez ici un tutoriel pour l’installer

Allez ensuite dans l’onglet Repères et fond perdu. Sélectionnez les traits de coupe et définissez votre fond perdu (ici 5mm tournant).

Allez ensuite dans l’onglet Format. Choisissez un format de papier Personnalisé, puis entrez vos valeurs (format fini + fond perdu + traits de coupe).
N’oubliez pas de centrer votre image.

Maintenant, dernier onglet à visiter : Sortie.
Dans la liste déroulante Couleur, choisissez Composite (ne pas modifier).
Vous verrez que dans la liste des couleurs, en plus des habituelles Cyan, Magenta, Jaune et Noir se trouve notre Pantone.

Il ne vous reste plus qu’à enregistrer pour que soit générer un fichier PostScript du type monfichier.indd.ps

Ouvrez ensuite Acrobat Distiller. Sélectionnez ensuite votre paramètre par défaut (ici PDF/X-1a:2001).
Pour générer votre .pdf, il suffit de glisser / déposer votre fichier PostScript dans la zone prévue à cet effet (en blanc sur la capture) :

Félicitations ! Vous venez de créer un .pdf en bichromie !
Astuce : vous remarquerez que Distiller a aussi généré un .log avec un test de conformité que certains imprimeurs demandent.

Vérifier son pdf

Parce que vous ne voulez pas passer pour un con auprès de l’imprimeur, vous êtes un graphiste consciencieux et vous vérifiez toujours vos .pdf avant de les envoyer à l’imprimeur.
Pour ce faire, ouvrez-le avec Acrobat et affichez le contrôle en amont qui se trouve dans le menu Édition.

Dans la liste mise à disposition, trouvez la norme avec laquelle vous avez généré votre .pdf (ici PDF/X-1a:2001) et lancez l’analyse.

Ceci devrait apparaître, avec la confirmation de conformité !

Pour avoir une ultime vérification, Créez un rapport (avec le bouton en bas à droite).
Un .pdf récapitulatif va être généré sur lequel vous pouvez lire :
« Nombre de plaques : 2
Nom des plaques : « (Black) (PANTONE 3145 C)  »

Et voilà, nous n’avons bien que deux encres sur notre .pdf !

Crédits :
Un grand merci à The1stgrape-stock pour m’avoir permis d’utiliser son image qui attirera du trafic en ajoutant une touche geek et sexy me permet d’appuyer ce tuto avec un exemple concret
Si vous avez aimé la typo utilisée, il s’agit de la Ostrich sans par Tyler Finck.

See ya space internaute