Etape 1: le background

On fait exactement la même chose que dans l’étape 1 du premier tuto.

Etape 2: Le rectangle principal

Et voila la petite nouveauté, le rectangle possédera désormais des coins arrondis. Pour ce faire on créer un rectangle de taille 220 x 300 à 17 pixel du bord gauche et à 63 pixel du haut (ce qui alignera plus ou moins vôtre image au design de la page Twitter). Une fois le rectangle créer on va dans le menu sélection puis on clique sur “rectangle arrondi“, on choisis un rayon de 20 comme sur le screen suivant:

Ensuite on fait exactement la même chose que le tuto précédent:

• On choisis le noir pour la couleur de premier plan
• On clique sur l’outil de remplissage
• On clique dans nôtre rectangle pour le remplir de noir
• On réduit le rectangle en faisant Sélection > Réduire > 1px > valider
• Puis on répète les 3 premier points mais avec du blanc

Vous devez obtenir ceci:

Etape 3: vos infos

La première fois j’avais mis ma photo, mais puisqu’elle apparais déjà dans mon profil j’ai décider de l’enlever et de ne mettre que le logo de mon blog en plus gros. Donc on commence par ouvrir le logo en question grâce à la combinaison suivante: Fichier > Ouvrir > choisissez vôtre image > Valider. On copie le tout (Ctrl+A) et on colle (Ctrl+V) sur nôtre design twitter. Si l’image est trop grande comme c’est le cas ici:

On clique sur l’outil de redimensionnement entouré de rouge et noté 1 sur l’image précédente et on réduit l’image à la taille souhaité. Puis on clique sur l’outil de déplacement entouré de vert et noté 2 pour positionner l’image correctement. Si tout c’est bien passer on arrive à quelque chose comme ça:

Et maintenant, place au texte. Histoire de varié un peu on ne va pas tout écrire d’un coup et on va changer de couleur. On commence par écrire les intitulés “Mon blog” et “Pour me contacter” en cliquant sur l’outil texte entouré de rouge et noté 1 sur l’image suivante:

Compter 4 espaces entre les 2 intitulés pour intercaler le reste des informations. Choisissez une police d’écriture, une taille en fonction de la police ainsi que la couleur noir. Utilisez ensuite l’outil de déplacement vu précédemment pour placer vôtre texte correctement.

Puis on répète l’opération précédente  mais cette fois ci avec vos infos (adresse du blog et mail) et avec une couleur différente (dans mon cas le gris). Ce qui devrais donner un résultat final tel que celui ci:

Il ne vous reste plus qu’à enregistrer l’image (Fichier > Enregistrer sous > Choisissez un nom et une extension > Valider) et l’intégrer dans vôtre page Twitter (Settings > design > Change background image > Parcourir > sélectionner votre fichier > save changes).

Conclusion

Rien d’exceptionnel par rapport à la dernière fois, c’est juste moins carré, plus agréable à l’œil et plus utile. Les générateurs font également un beau boulot mais ils sont parfois lourd à utiliser et surtout ne vous donne pas le mérite d’avoir fait vôtre design tout seul et en plus sous Gimp :p

Vous pouvez voir le résultat en action sur mon profil Twitter, et comme d’ab si vous utilisez ce tuto, laissez moi un petit message avec l’adresse de vôtre profil que j’intégrerais au billet. Histoire de montrer les différentes possibilités et dérives du tuto ^^

Enfin, si vous avez des questions n’hésitez pas!

Sugi

• Tuto Gimp: design de votre page Twitter (9)
• Sugi est sur Twitter! (4)
• J’arrête aussi les Digg Like… (16)
• Comment bien débuter avec Twitter? Première partie (7)
• Comment bien débuter avec Twitter? Deuxième partie (7)

Enfin bref, si j’écris ce billet c’est parce que j’ai reçu quelques demandes de conseils à ce propos. Je vais donc essayer de vous expliquer mon parcours le mieux possible.

Le commencement

La première étape étant d’acheter vôtre nom de domaine (NDD), pour ce faire il suffit simplement d’aller chez un registar (fournisseur de NDD), dans mon cas OVH, et de prendre le NDD qui vous plait avec l’extension qui vous plait. Une fois enregistrer, payer, laisser l’afnic faire son cinéma dans le cas d’un .fr, il faut entrer les serveurs DNS fournis par vôtre hébergeur (si différent du registar). Pour le reste, c’est vôtre hébergeur qui ferra tout le boulot. Une fois terminer les choses sérieuses peuvent commencer.

Préparation du blog

Ici il s’agit simplement de renseigner l’URL du nouveau NDD dans vôtre admin Wordpress. Connectez vous à l’admin, cliquez sur “Réglages” et remplissez les champs “Adresse web de Wordpress” et “Adresse web du blog” par vôtre nouveau NDD.

(Je l’ai fait par sécurité, mais je pense que les requêtes SQL le font aussi…)

Modification de la base de données

Pour ce qui est de la base de données (BDD) il faut simplement remplacer les anciennes URL stocker un peu partout par les nouvelles. Pour cela il suffit de ce connecter à vôtre BDD (souvent via PHP My Admin) et d’entrer les requêtes SQL qui vont suivre.

On commence par les URL stocker dans la table wp-options (correspondant à la partie admin):

UPDATE wp_options SET option_value = replace(option_value, ‘http://www.ancien-site.com’, ‘http://www.nouveau-site.com’) WHERE option_name = ‘home’ OR option_name = ’siteurl’;

On continue avec les URL de vos billets dans la table wp-posts:

UPDATE wp_posts SET guid = replace(guid, ‘http://www.ancien-site.com’,'http://www.nouveau-site.com’);

Et on finis avec les URL contenu dans vos billets toujours dans la table wp-posts:

UPDATE wp_posts SET post_content = replace(post_content, ‘http://www.ancien-site.com’, ‘http://www.nouveau-site.com’);

Voila pour la base de donnée, il n’y a rien de très compliquer mais il faut le savoir ^^

Création ou modification du .htaccess

Il faut maintenant “prévenir” Google du changement de NDD sous peine de perdre son référencement. En gros il faut lui dire que tout les liens de http://www.ancien-site.com sont maintenant à l’adresse http://www.nouveau-site.com et qu’il faut donc rediriger le trafic.

Tant qu’a faire on va rediriger le sous-domaine www ainsi que l’url en index.php, je ne sais pas si c’est encore obligatoire, mais ça ne coûte rien ^^. Voici un exemple de .htaccess avec toutes ses données (les commentaires sont après les #):

Options +FollowSymLinks
DirectoryIndex index.php

RewriteEngine On
RewriteBase /

# Redirection 301 (permanente) de l’ancien nom de domaine
RewriteCond %{HTTP_HOST} ^(www\.)?ancien-site\.com
RewriteRule (.*) http://www.nouveau-site.com/$1 [R=301,L]

# Redirection 301 du sous domaine www
RewriteCond %{HTTP_HOST} www.nouveau-site.com
RewriteRule (.*) http://nouveau-site.com$1 [L,R=301]

# Redirection 301 du index.php
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://nouveau-site.com$1 [R=301,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

Ajoutez ceci en plus du contenu initial du .htaccess crée par Wordpress.

Vous pouvez vérifier en tapant http://sugi.fr.cr, http://www.sugi.fr ou encore http://sugi.fr/index.php, tout serra rediriger vers http://sugi.fr ^^

Google webmaster tool et sitemap

Eh non, on en a pas encore finis avec l’ami Google, il faut maintenant re-inscrire votre blog dans leur outil pour webmaster et leur envoyer un sitemap re-compiler. Pour ce faire on repart dans l’admin, direction l’onglet “Réglage”, puis “XML-sitemap”. Une fois dedans cliquez sur “reconstruire le sitemap manuellement”. Le sitemap contiens maintenant l’URL modifié de vos pages et billets. Il ne vous reste plus qu’a l’envoyer sur Google webmaster tool à vôtre nouveau nom de domaine, Google fera le reste =)

Backlink & co

La dernière étapes consistera à contacter toutes les personnes qui ont fait un ou plusieurs backlink vers vous ainsi que toutes celles qui ont un lien vers vous dans leur blogroll. Demandez leur gentillement de changer vos liens ^^

Au passage un grand merci à tous ceux qui ont répondus favorablement à ma demande =)

Conclusion

Faites attention en recopiant les requêtes SQL, une erreur est vite arriver.

Ensuite, le changement de NDD prend du temps coté Google, en effet il faut compter plusieurs semaines voir plusieurs mois dans certains cas (en fonction du nombres de page a indexé) pour retourner à la normal. Ne vous attendez pas a retrouver vôtre PR ou vôtre alexa rank du jour au lendemain.

Voila, un petit tuto qui ce veux sans prétention, n’ayant pas trouver de vrai tuto au moment ou j’en avait besoin, j’ai piocher les infos un peu partout et vous ai décrit mon parcourt tel quel. Il ce peux qu’il y ai des erreurs, des truc mal optimisés etc. Si c’est le cas n’hésitez pas à donner vôtre avis.

Bon courage!

Sugi

Fichier SQL contenant les requêtes en cas d’erreur avec le copié/collé.

• WpToGo pour bloguer depuis Android (deuxième partie) (1)
• Plugin Wordpress: WP-Optimize (7)
• Plugin Wordpress: Top Commentators (9)
• Plugin Wordpress: Sociable (2)
• Fourre-tout de liens pour la semaine 19 (5)

Alors, moi je suis partie du principe que le design de ma page twitter devait ressembler plus ou moins au design de mon blog. Donc couleur du background, couleur du texte et des liens, couleur du menu etc. Il est possible de modifier tout ça directement dans Twitter en passant par: Settings > Design > Change design colors.

Etape 1: le background

Pour commencer on va se créer une image vierge au format 568×456, pourquoi cette taille? Parce que c’est la taille d’un background twitter standard, par exemple comme celui que l’on vous met d’office lors de votre inscription. Bref pour ce faire procéder ainsi: Fichier > Nouveau et entrer les bonnes tailles. On doit se retrouver avec ça:

Ensuite on remplit la zone blanche par la couleur de votre background, ou la couleur de votre choix, c’est à vous de voir au final. Pour ce faire, on change la couleur du premier plan en cliquant à l’endroit indiquer par le cercle rouge sur l’image suivante, on modifie la couleur en fonction de ses choix et on valide.

Puis on remplit notre image avec la couleur choisie, il suffit alors de cliquer sur “l’outil de remplissage” puis de cliquer sur votre image, comme ceci:

Etape 2: rectangle principal

Ensuite on va créer la partie principal du design, c’est-à-dire la partie qui donnera quelques informations sur vous. Pseudo, nom et adresse du/des blogs, email, numéro de portable, photo et tout ce que vous voulez. On va donc commencer par créer un rectangle en cliquant sur “l’outil de sélection rectangulaire“, puis en traçant votre rectangle sur l’image. Je conseille une marge de 65px en haut pour être aligné avec le reste de votre page twitter, et environ 20px à gauche. Pour info mon rectangle fait 220 x 325px, je pense que globalement c’est suffisant, c’est en fonction du nombre d’infos que vous aller donner sur votre page. Bref, on doit arriver à quelque chose comme ça:

Puis on remplit ce rectangle de noir (000000 en HTML), même opération qu’au dessus : cliquez sur l’outil “couleur de premier plan“, choisir la couleur noire, cliquez sur “l’outil de remplissage” et enfin cliquer sur votre rectangle. On devrait arriver à ça:

Ensuite clique droit sur votre rectangle noir et procéder ainsi: Sélection > Réduire > 1px > valider. Puis on renouvelle l’opération de remplissage, mais cette fois avec du blanc (ffffff en HTML). Ce qui nous donnera un joli rectangle blanc entouré un cadre noir comme ceci:

Etape 3: vos infos

On va maintenant intégrer vos photos ou images, je prends l’exemple de mon avatar qui mesure 80 x 80px. Donc pour ouvrir procéder ainsi: Fichier > Ouvrir > sélectionner votre avatar > Valider. Touche Ctrl+A pour sélectionner l’intégralité de l’avatar, touche Ctrl+C pour copier la sélection, puis on revient sur notre image de design et on utilise les touches Ctrl+V pour copier la sélection. Enfin on clique sur “l’outil de déplacement” indiquer par le cercle rouge sur l’image du dessous et on déplace l’avatar en haut à gauche du rectangle blanc, comme ceci:

On renouvelle l’opération autant de fois que nécessaire, par exemple ici avec le logo de mon blog (32 x 32px):

Viens ensuite l’étape du texte et des informations à afficher. On clique sur “l’outil texte“, puis sur “couleur” un peu plus bas et on choisit la couleur du texte. On va dans la petite fenêtre “Éditeur de texte GIMP” et on tape son texte, une fois terminer on ferme la petite fenêtre et on déplace son texte à l’endroit souhaité comme expliquer précédemment. Exemple avec le nom de mon blog:

Autre exemple avec mes propres informations:

Il ne vous reste plus qu’à enregistrer votre petit design dans votre format d’image préférée (Fichier > Enregistrer sous > Choisissez un nom et une extension > Valider). Pour terminer il suffit d’uploader votre design sur votre profil Twitter: Settings > design > Change background image > Parcourir > sélectionner votre fichier > save changes.

Enfin, admirez le résultat et pas besoin d´avoir fait une formation continue en design pour ça! Vous pouvez voir le résultat sur mon profil Twitter.

Voilà, le tuto est terminé, il n’y a rien de très artistique, ni rien de très compliquer. Je trouve simplement que c’est une bonne alternative au site qui génère des design twitter automatiquement (site dont on a vu passer l’url 50 fois depuis les deux dernières semaines…), vous pourrez dire “c’est moi qui ai tout fait!“. Bien sûr il existe des dizaines de millier de possibilité, changer la police d’écriture, les couleurs, faire un ovale à la place d’un rectangle, arrondir les coins du rectangle et j’en passe. A vous de fouiller un peu le logiciel afin d’adapter le tuto à vos besoins et envies ^^ Une bonne idée serait de modifier un des backgrounds d’origine fournis par twitter.

Une petite demande de ma part, si vous créez votre design en prenant pour base ce modeste tuto, soyez gentil de laisser un commentaire avec l’adresse de votre profil twitter pour que je puisse voir, ça me fera plaisir =)

Alors les amis, qu’en pensez vous? Avez-vous des questions? Est ce suffisamment explicite? Comment puis-je m’améliorer dans l’écriture de tuto (à part l’orthographe, merci je suis au courant et je fais ce que je peux)?

Sugi

• 10 conseils pour se faire mal voir sur Twitter (7)
• Une bonne page “About” c’est quoi? (15)
• Tuto gimp: design de vôtre page Twitter (suite) (8)
• Sugi est sur Twitter! (4)
• J’arrête aussi les Digg Like… (16)