Macheist Bundle c’est quoi ?

MacHeist bundle 3 est un pack de 12 application d’une valeur 950.75$ (714€) que l’on vous vend pour le prix très bas de seulement 39$ (29€). Et ce n’est pas une arnaque ! je tiens à le préciser !!

MacHeist Bundle ? Et il nous propose quoi ?

MacHeist bundle propose ces 12 applications :

• iSale : un outil pour ebay qui vous permet de personnaliser vos annonces et de mieux les gérer !!
• Picturesque : Un outil pour vos photos.
• SousChef : Vous voulez cuisiner ?? vous voulez une recette ?
• World of Goo : il faut se détendre un peu non ?? World of Goo est un super jeux !!
• PhoneView : pour votre iPhone et iPod touch !
• LittleSnapper : un outil signer Realmac software, pour remplacer votre outil actuel de capture d’écran !!!
• Acorn : encore un outil pour vos images !
• Kinemac : un outil de 3d (qui vaut quand même 299$)
• WireTap Studio : Un outil d’édition sonore pour votre Mac !!
• BoinxTV : Un studio TV sur votre Mac !!
• The Hit List : une application To-do list !! très ergonomique !!
• Espresso : Un outil pour les codeurs/développeurs !!

Voici les 12 applications !

Mais aussi une petite application gratuite (téléchargement disponible même si vous n’achetez pas !) pour tout le monde : EventBox !!

Alors ?

Alors ?? quoi vous êtes macUsers et vous êtes encore là ??? mais ALLER L’ACHETER !!

#1 : Les plugins

• WP AJAX Edit Comments : permet d’étirer, de marquer comme spam, de supprimer… les commentaires et tout ça en ajax !!
• WP-EMail : Ce plugin permet à vos lecteurs d’envoyer votre article à leurs proches simplement grâce au mails !!
• WP-Post rating : faites noté vos articles par vos lecteurs !
• Dofollow : Permet d’enlever le nofollow dans les liens des commentaires.
• show top commentators : donne à vos lecteur encore plus envie de commenter car ils seront affiché dans une liste des meilleurs commentateurs.
• WP-chunk : il permet de raccourcir des urls dans les commentaires ! pratique pour ne pas avoir d’urls à rallonge !
• Maintenance mode : Tout est dans le titre… ça permet de mettre votre blog en maintenance !!

Voilà j’ai fait ici une petite liste de plugin… j’en donnerai encore d’autre dans d’autre articles… ou avec un autre moyen ?

#2 : les thèmes

Voici une sélection de thèmes wordpress :

• Ultra wood :
  
• Sharpfolio :
  
• FreshCitrus :
• The morning after :
  

#3 : Des îcones

• Fugue : Voilà un pack de 1501 icones pour votre blog ou site… largement de quoi faire !
• Facebook ui icons : icones de style facebook :
  
• Aquacius.social :
• Coquette icon :
  
• Web 2 icon :
  
• Circle Social Bookmark Icons :

#4 : Les liens

Voici maintenant une sélection de liens :

• Blogueurs : 5 raisons pour ne pas vous forcer à publier : chez cecidit…
• Que faire lorsqu’on n’arrive plus à bloguer? : chez Le journal du blog
• 23 exemples pragmatiques pour augmentez le trafic d’un blog: chez roget.biz
• 50 méthodes pour augmenter son nombre d’abonnés RSS : chez blog Tool Box

Conclusion :

Cette liste est fini, je ne sais pas trop si je vais la faire évoluer au cours du temps… j’ai mes idées… elle ferons sans-doute l’objet d’un nouvel article !

Maintenant que nous avons mit en place le header, le footer, le fond… il nous manque le contenu et la sidebar. Nous allons nous occuper du fond du contenu et de la sidebar seulement aujourd’hui ! Ouvez votre fichier photoshop et c’est parti !

Etape 1: Le contenu

Créez un nouveau calque dans le dossier contenu que vous appellerez : « Fond » prenez l’outil rectangle arrondi (U) avec un Rayon de 10px :

Tracez alors votre rectangle mais celui-ci ne doit pas faire tout le largeur car il y a la sidebar à mettre !!

Nous allons maintenant appliquer un style de calque sur « Fond » :

Voilà pour notre bloc de contenu.

Etape 2: La sidebar

Nous allons voir pour la sidebar maintenant, sur le brouillon elle n’avait pas de fond et tout était mit directement sur le fond du site. Nous allons donc respecter notre brouillon et mettre le contenu de la sidebar directement sur le fond du site.

Créer un nouveau calque dans sidebar, prenez l’outil texte (T) en arial bold 20pt couleur : #b1aaa5 (si vous avez pris le même fond que moi autrement prenez simplement un couleur plus claire de votre fond). Ecrivez : « Abonnez vous ! » a coté du contenu.

Créer un nouveau calque que vous appellerez : « Ligne fond » et prenez l’outil ligne (U) d’une épaisseur de 3px. Tracez un trait sous le titre en débordant environ jusqu’au coté droit de votre design. Changez la couleur du calque avec la même couleur que le texte (ici #b1aaa5). Pixéllisez le calque (Clique droit sur le calque et clique sur pixélliser le calque.

Prenez l’outil de sélection rectangulaire (M) et créer une selection grossière sur la ligne :

Assurez vous que vous êtes bien sur le calque « Ligne fond » et dupliquez la sélection (⌘j sur mac… pour pc un truc dans le genre…) ce qui a pour effet de vous créer un nouveau calque avec seulement le partie du trait sélectionné. Renommez ce calque « Ligne valeur » et appliquez un style de calque : incrustation couleur de couleur : #d1cecb (pour moi ici autrement une couleur encore plus claire que celle du trait).

On peut alors créer un texte fictif et mettre la même couleur que celle de « Ligne valeur ».

Conclusion :

Voilà a la fin de cette partie 4 notre fichier :

Dans la prochaine étape nous remplirons le vide intersidéral de ce design en autre: Le contenu, la sidebar, le footer… RDV dans la prochaine étape !!

Nous avons commencer dans l’étape 2 à développer notre thème dans photoshop ! Aujourd’hui nous allons continuer et passer par le header ! Donc ouvrez photoshop et votre fichier, on y va !

Le Titre

Nous allons tout de suite nous occuper du titre de votre blog (j’aborderai bientôt un article pour tout dire sur les logo, si vous voulez un mettre un vous pouvez !), créer un nouveau calque dans son dossier, prenez l’outil texte pour ma part j’ai pris la police arial regular taille 36pt et réduit l’espacement des caractères de -40, pour réduire l’espacement des caractères, il faut cliquer sur ce bouton : puis changer, dans la palette que s’ouvre, cette valeur : Maintenant replacez le titre vers la gauche. Le noir sur le titre c’est pas super, nous allons changer la couleur et mettre un style. ouvrez les styles du calque (double clique sur le calque) et réglez comme ceci :Vous pouvez sauvegarder ce style de calque pour pouvoir le réutiliser plus facilement !

Faites maintenant un petit dégrader radial sous le titre :

(! attention il ne doit pas déborder sur les rebord autrement lors de la découpe il y aura des problèmes … !) Vous devrez déplacez le dossier sous-header au dessus de header … Moi ça me donne :

2. la barre de recherche

maintenant que le titre est mit nous allons voir la barre de recherche. Créez un nouveau dossier « recherche » dans le dossier header et créer un nouveau calque, prenez l’outil rectangle arrondi (U) mettez une valeur de 20px pour l’arrondi et faite un rectangle, pas trop épais… Appliquez ce style de calque : mettez ok. Maintenant placez cette image de loupe : dans votre barre de recherche à gauche.

Créer un texte Helvetica bold 12pt blanc « rechercher » à coté et un autre text « ma recherche » en arial regular 11pt couleur #7f7f7f dans la barre pour symboliser la recherche.

Au final

Voilà ce que vous devez avoir à la fin de cette étape 3 :

Voilà, le header est fait, dans le prochain tutoriel pour Créer un thème wordpress, nous nous occuperons du contenu.

Rappel des liens :

• Réalisation d’un thème wordpress
• Etape 1: Concevoir la maquette du blog
• Etape 2: du brouillon à photoshop

Maintenant que notre brouillon est fait, nous pouvons ouvrir photoshop et créer un document de 1024px sur 2000px !

Mais avant, je vais vous dire quel thème nous allons développez ensemble, c’est le brouillon n°2 (Etape 1: Concevoir la maquette du blog) que j’ai sélectionné donc celui ci :

Evidement si vous le voulez je peux vous montrer comment développer l’autre !

1. Repérer les différentes « Zones »

Moi là 1ère chose que je fais c’est repérer les zones du brouillon, chaque zones correspondrons à un dossier dans photoshop, ici on peut voir 5 zones (6 si on compte le fond) les voici (de haut en bas) :

1. La navigation avec la partie recherche
2. Le header avec le titre du blog (et peut-être pour vous un logo mais nous en reparlerons dans un prochain article)
3. Le contenu
4. La sidebar
5. le footer

et bien sûr le fond en 6. Chaque zones peuvent être redécoupé en plusieurs zones ainsi nous aurions :

1. Le sur-header
   • La partie navigation
   • la partie recherche
2. Le header
3. Le contenu
   • Le post
   • les commentaires
   • … Ect

On pourrait ainsi tout redécouper mais ce n’est pas le but ! …

Maintenant que nous avons trouver les grandes zones, nous allons créer un dossier pour chacune d’elles. Donc un dossier sur-header, un dossier header, un autre contenu, un sidebar, et un footer, ce qui doit normalement donné :

2. Le fond

Nous allons commencez par créer la couleur du fond, c’est vous qui choisissez la couleur, pour ma part j’ai opter pour du marron foncé assez désaturer de code #4b433d, pour ceux qui ne savent pas comment mettre une couleur de fond, je vous conseil de vous entraîner préalablement sur des sites de tuto comme wks.fr et pour ceux qui ne savent pas où rentrer le code couleur c’est ici :

Voilà c’est tout simple !

3. le sur header

Nous allons maintenant nous occupez du sur-header, commençons par créer un nouveau calque dans son dossier que vous appellerez fond. Sélectionnez l’outil rectangle (U) tracez alors un petit rectangle sur toute la largeur de site en haut, mais attention, pas trop petit non plus sinon nous ne pourrons pas mettre les liens ! Vous pouvez changer la couleur en double cliquant sur la vignette de calque :

moi j’ai pris la couleur #252525. Sauvegardez ! on n’est jamais à l’abris d’un bug

4. Le footer

Nous allons maintenant nous occuper du footer ! créer un nouveau calque dans le dossier footer, outil rectangle, on trace un rectangle assez large (enfin la largeur dépend du type de footer que vous voulez), j’ai pris la couleur #2a2521.

voilà mon footer.

5. Quelque details

Nous allons maintenant rajouter quelque détails pour le sur-header, créer un nouveau calque nommé « ligne blanche » et utilisez l’outil ligne (U) avec une couleur blanche et une largeur 1px pour créer une ligne qui fait toute la largeur du site, déplacez la juste en dessous de sur-header, pour être bien précis vous pouvez zoomer, puis dupliquez cette ligne et nommé là ligne noir. Déplacez la ligne noire d’un pixel vers le bas et remplissez là en noir.

Jusque là c’est pas super beau, réduisez l’opacité de la ligne blanche à 20% et de la ligne noir à 30% comme ici :

Vous pouvez réalisez la même chose pour le footer et vous pouvez aussi rajouter un léger dégrader sur le haut du footer :

Conclusion

voilà, on a déjà bien entamer la conception du design, évidement vous pouvez changer les couleurs, rajouter ou enlever des effets, c’est votre thème ! Dans le prochain article nous allons voir le contenu et la sidebar !

rappel des liens :

• Réalisation d’un thème wordpress
• Etape 1: Concevoir la maquette du blog
• Etape 3: Le header

La maquette c’est aussi le moment de se poser les bonnes questions sur son blog :

• Quel taille fera ma page ? mon header ? ma sidebar ? mon contenu ?
• Combien de sidebar pour mon site ? 1 ? 2 ?
• Ou sera positionner mon titre ? à gauche ? à droite ? au milieu ?
• Où sera positionner tel ou tel élément de ma page …
• Réaliserai-je un logo pour mon blog ? si oui remplacera-t-il le titre ?
• Ma page d’accueil aura-t-elle le même design que celle de mes articles ?
• Voudrai-je mettre en avant certain article ? sur la page d’accueil ? dans la sidebar ?

Il y a énormément de questions à ce poser sur le design, le positionnement ! Il n’y a pas tout mais au moins vous voyez quelles questions vous posez ! Commencez donc à réaliser votre maquette !

Moi j’ai décidé de faire un design avec des blocs alors voici ce que cela donne sur brouillon :

1er brouillon réaliser

mais j’en ai aussi fait un autre un peut plus « classique »  :

2ème brouillon réaliser

Voilà, maintenant que vous avez un brouillon vous avez « une base départ » pour toute la conception. Bien sûr vous pouvez en réalisé plus si vous le voulez pour bien visualisé chaque pages (article, accueil, archive, page …) sa dépend de vous !

Voilà c’est là la fin de ce 1er tutoriel de la série Réaliser un thème wordpress.

Les autres liens :

Rappel des liens :

• Réalisation d’un thème wordpress
• Etape 2: du brouillon à photoshop
• Etape 3: le header

Si vous cherchez sur google, vous trouver le tutoriel de Fran6art qui ne porte que sur la partie code et qui est bien expliquer mais autrement il n’y a pas vraiment de site qui propose de créer un design pour son blog sous photoshop puis de le coder par la suite ! C’est ce que je vais vous proposer ! Grâce à une série de tutoriels qui seront référencé ici à l’aide liens, ces tutoriels vont donc vous permettre de créer le design d’un thème wordpress puis de le coder pour celui-ci, bien sûr pour ceux qui ne sont pas très fort en design je pourrai fournir le design près découpé lors de l’étape du codage !

Voici les liens on il faut aller :

Etape 1: Concevoir la maquette

Etape 2: du brouillon à photoshop

Etape 3: le header

C’est à cette question je vais tenter de répondre dans la suite de cet article.

Choisir son hébergement est une chose très compliqué, il y a tellement d’herbergeurs sur le net que l’on s’y perd très facilement ! Il y a bien sûr, de grand hébergeur français intéressent comme  1and 1, infomaniak ou encore Planethoster qui propose des offres pas chère et intéressante comme l’offre « Personnel » qui pour 36€ propose pas mal de choses. Mais ce n’est pas vers des hébergeur français que je me suis tourné, j’ai été voir parmis les offres américaine !

Alors quoi de plus en Amérique ?

En Amérique, les offres sont très alléchante et pas chère du tout pour ce qu’il propose ! Bien sûr il faut comprendre un minimum l’anglais pour pouvoir bien utiliser sont hébergement, donc si vous comprenez un minimum l’anglais et que vous voulez un bonne offre pour pas chère il faut aller voir cette liste non exhaustive d’hébergeurs :

1. Just host : c’est mon hébergeur actuel et je le trouve pour l’instant très performant ! Pour 4.95$ (3.90€) /mois (ou bien si vous rentrez le coupon : JHSL20 vous ne payerez plus que 3.11€/mois) vous propose tout en illimité !! Hébergement de domaines illimité, sous domaines illimités, Comptes FTP illimités, POP et Email IMAP illimité, Base de données MySQL illimité, Aliases domaines illimités, Bande passante illimité, ect… C’est donc pour ça que j’ai craquer pour cet hébergeur, mais reste a voir si tout ce passera bien tout le temps…
2. Super Green Hosting : c’est un autre très intéressant hébergeur américain qui offre lui aussi tout en illimité et pour 4.95$ (3.90€) /mois comme Justhost, sauf que là, il n’y a pas de possibilités de réduction… Reste quand même a tester, si vous l’avez tester, donner moi votre avis.
3. Web hosting Pad : encore un autre hébergeur qui offre tout en illimité mais pour 3.96$ (3.12€) /mois et qui, si vous vous abonnez pour 3 ans baisse le prix à seulement 2.99$ (2.36€) /mois, c’est donc un offre très bas prix qui conviendra parfaitement a ceux qui n’ont pas peur de s’engager dans la durée !
4. MochaHost : c’est un hébergeur un peut moins cher 3.10$ (2.45€) /ans mais qui propose aussi un peut moins, cette offre n’en reste pas moins très intéressante car elle propose tout en illimité sauf les bases de données MySQL mais il en offre quand même 50 de quoi faire énormément de choses. Mochahost est donc un hébergement très intéressant à tester.

Pour une plus grande liste je vous conseil d’aller sur revu hébergement web

Les hébergeur américain sont donc un très bon choix car il offre tous un nom de domaine gratuit à vie et pour la plupart tout en illimité… et tout ça beaucoup moins cher qu’en France. Et vous, si vous avez un blog ou un site, ou est-il hébergé ?