Je viens d’acquérir depuis ce weekend d’un imac 24 pouces et vous pouvez imaginer que c’est la grande joie;) Bon, passé l’euphorie, j’ai commencé à me pencher sur la bête et à rechercher les logiciels dont j’avais besoin pour exercer mon activité de blogging. Et j’avoue être un peu perdu sur le choix des applications. Pour l’instant, j’ai uniquement installé The Gimp qui concerne la retouche d’images. Par contre, pour le reste, ce n’est pas si évident car 10 années sous Windows, ça ne s’efface pas comme ça. Je m’en remet à vos conseils concernant les logiciels libres indispensables sous mac pour le webdesign.

Merci d’avance ^^

A partir de là, on pourra passer aux choses sérieuses avec l’intégration par exemple de fichiers images dans les différents background de nos div et l’insertion des différents tags qui font ce qu’est Wordpress. Pour réaliser ce tutoriel, vous aurez besoin d’un éditeur de retouche d’image comme Gimp, et d’un éditeur html comme notepad ++. Je vous cite ces deux logiciels car ils sont libres, donc à la portée de tous. Bon visionnage, et n’hésitez pas à me contacter si vous avez des questions ou remarques.

A+ David

J’espère que vous allez bien par ce beau temps! Bon en tous cas, chez moi, il y a un sacré soleil depuis quelques temps ce qui donne quand même la patate Je ne vous donne plus trop de news en ce moment, mais il est vrai que je suis en cure intensive de webdesign, programmation xhtml, css et découpage de maquette. Bref, il y a sacrément du boulot. Je suis d’ailleurs tombé sur pas mal de sites intéressants (mais faut se mettre à l’anglais) concernant le webdesign et on se sent tout petit du coup. D’ailleurs, Fran6 est en train de nous préparer de nouveaux tutoriaux, à mon avis, ça va faire très mal et c’est en français! Bon, je m’égare un peu car je voulais vous parler d’une petite astuce qui m’a bien soulagé dans la conception de mes arborescences de sites.

Pour toutes celles et ceux utilisent par exemple notepad ++ pour coder des fichiers php, html, css, etc…, beaucoup ont l’habitude d’utiliser le fameux clic droit dans l’explorateur de fichiers windows pour créer rapidement l’arborescence d’un site comme ci dessous :

Cliquer sur l'image pour l'agrandir

On choisit dans le menu le document texte, on nomme le fichier créé et on modifiera l’extension souhaitée. Cette technique est donc très rapide pour avoir une arborescence de ce type et à partir de là, vous pourrez ouvrir par exemple notepad++ pour insérer le code dans les différents fichiers :

Cliquer sur l'image pour l'agrandir

Problème donc avec Vista qui ne prend pas en compte par défaut la possibilité de modifier l’extension. En effet, si vous ne faîtes aucune action, vous serez condamné à créer uniquement des fichiers textes Mais heureusement, il y a une option sur vista qui permet ce changement. Pour se faire, allez dans le poste de travail (ordinateur) -> Menu organiser -> Option des dossiers et de recherche

Poste de travail Window Vista

Enfin, cliquer sur l’onglet Affichage et décocher « Masquer les extensions des fichiers dont le type est connu ». Et voilà le travail

Je vous rappelle que cet article est rédigé dans le cadre d’un tutoriel consacré à la création de son propre thème wordpress tant au niveau de son contenu (fichiers php templates) que du visuel ou design (style.css et dossier images). Aujourd’hui, nous commençons avec l’arrière-plan, la page et l’entête de notre blog.Nous partons de ce modèle papier pour réaliser notre thème Wp. Allez, tout d’abord, ouvrez Gimp. Dans votre menu, Fichier->Nouveau et créer une image de 1200 px de largeur et de 1000 px de largeur avec une couleur d’arrière plan de #e4d9c1 comme ci-dessous :

Ici, nous sommes déjà en train de créer notre Body. On va en profiter pour faire un dégradé de notre fond de page avec les couleurs #e4d9c1 et #ffffff. Je ne vous explique pas la procédure pour le dégradé car vous pouvez la retrouver sur un de mes billets.

Pour positionner nos différents éléments (entête, contenu, sidebar, pied de page), nous allons utiliser des guides. On va commencer par positionner notre page qui reprend tous les éléments cités plus haut. Ce positionnement nous sera utile pour transposer notre maquette dans notre feuille de style. Généralement, la taille de ma page ne dépasse pas les 960 px de largeur afin que le thème de mon blog wordpress s’adapte à toutes les résolutions d’écran. Je veux donc une page de 960px de largeur et centrée sur mon body (arrière-plan). Je vais placer deux guides à 120px et à 1080px sur la largeur de mon arrière plan. En effet, mon fichier image a une taille de 1200px de largeur. Je fais l’opération suivante : 1200px-960px(page)=240px. Pour centrer le tout, j’aurais donc 120px de chaque côté de ma page.

Pour utiliser les guides, cliquer sur l’outil de déplacement puis dirigez votre curseur tout à gauche sur la règle, cliquer et tout en laissant appuyer, déplacer votre pointeur vers la droite. Vous voyez apparaître un guide. Voilà vous avez positionné votre page. Nous allons maintenant donné un fond blanc à notre page. Pour cela, créer un calque transparent et nommez le « page ». Pour appeller nos calques, faîtes CTRL + L. Voici ci-dessous la procédure :

Une fois votre calque crée, sélectionnez le puis dirigez vous vers votre boîte à outils et cliquez sur l’outil de sélection rectangulaire. En vous servant des guides, créer un cadre sur toute la longueur de l’image :

Si tout s’est bien passé, votre sélection rectangulaire colle aux guides et a une taille de 960*1000. Cliquez ensuite sur l’outil de remplissage (pot de peinture) et cliquez dans la sélection :

Entre parenthèse, on transposera ce fond blanc dans notre feuille de style par un background: #ffffff. Pour finir ce tutoriel, passons à l’entête. Notre ‘header’ aura la même largeur que notre page (960px) et une hauteur de 170px. On va le positionner à 30 px. Indiquer un guide à 30px et à 200px, créer un nouveau calque et nommez le ‘header’.

Utilisez l’outil de selection rectangulaire et collez le aux guides. Ensuite, nous allons utiliser l’outil brosse (brushes) et avec la couleur du haut #e4d9c1 comme ceci :

Enregistrer le tout sous theme.xcf. Ce format permet de récupérer tous les calques. Voilà, c’est tout pour le moment, je préfère y aller tranquillement car j’imagine que certains ne sont pas habitués à utiliser Gimp. S’il y a des choses qui vous a échappé, n’hésitez pas à laisser vos commentaires. A bientôt, David

Et c’est en fin de journée que je prend le temps de faire ma veille. Aujourd’hui, je voudrais mettre à l’honneur un blog incontournable : Smashing Magazine. C’est un des rares blog où je traîne régulièrement mes guêtres tellement il y a de ressources indispensables concernant le webdesign.

Je ne sais pas si vous êtes comme moi, mais je suis très textures pour les background en ce moment et surtout les grunge. Ca tombe bien, Smashing magazine nous propose 100 textures gratuites. Si vous désirez savoir comment s’en servir avec Gimp, n’hésitez pas à me le demander Voici quelques exemples de textures à télécharger.

Pour plus de simplicité, nous nous occuperons de la page, du contenu et de la sidebar. Comme vous le voyez sur le schéma, nous désirons une page centrée de 900px de largeur, d’un contenu (c’est ici que vous aurez par exemple l’article de votre blog) de 560 px de largeur positionné à gauche et une sidebar de 250 px de largeur positionnée à droite ainsi que des espaces de 30 px entre les différents blocs. Commencez par ouvrir votre feuille de style de votre thème à l’aide du tableau de bord. Nous allons d’abord indiquer dans la balise body (le support de votre blog) que nous ne voulons aucune marge extérieure (margin) et interne (padding)) car quelques navigateurs ont des pages par défaut qui faussent ensuite le positionnement de vos blocs. Donc indiquez :

Ensuite, nous allons déterminer la largeur de notre page. La page contient différentes parties comme l’entête, la sidebar, le footer, etc.. Nous voulons une page de 900 px de largeur centrée et sans aucune marge en haut et en bas. Insérez les lignes :

On va maintenant déterminer la position de nos deux élements : La sidebar a une largeur de 250 px, est à droite et à gauche une marge externe de 30px. Insérez cette ligne :

Il nous reste maintenant le contenu qui sera sur la gauche. On a une page de 900px de large, une sidebar de 250 px avec une marge à droite de 30px et une marge à sa gauche de 30px et le contenu doit avoir aussi une marge à gauche de 30px. On va donc maintenant calculer la largeur du contenu en fonction de ce que l’on a dit : 900-250-30-30-30=560px. On va indiquer la largeur et la marge externe à gauche de 30px. Insérer le code suivant :

Voilà, si vous avez tout bien suivi, ça devrait le faire Dans un prochain article, on parlera du positionnement de votre entête (header) et de votre pied de page (footer) ainsi que des marges internes (padding). J’espère que ce petit tutorial vous aura bien aidé et n’hésitez pas à laisser vos commentaires si vous avez des difficultés.

A+ David

Alors qu’il y a deux jours, je me suis proposé pour participer à l’équipe de traducteurs de thème Wordpress chez le vilain blogueur masqué, j’ai l’air bien crédible maintenant Bon, il n’y a quand même pas mort d’homme, mais j’arrêterai peut-être maintenant de toucher à la feuille de style sur les coup de 6h du mat… je ne devais pas encore être assez frais

Blog pris sous Lg

Je pars m’aérer (oui gros scoop, je viens de reprendre le sport en basket loisirs), ça me fera du bien et je verrai demain tranquillement les diverses modif à faire.

CSS2: Pratique du design web de Raphaël Goetter

Selon Fran6art, « c’est le plus facile d’accès, le plus complet et il est écrit par un des acteurs d’Alsacréations. Il est pour moi incontournable si vous voulez bien comprendre le fonctionnement des CSS. Un must have ! ». Ça tombe bien, j’ai encore un paquet de lacunes en CSS…

Le référencement Google, le Guide Complet de Gilles Grégoire

Sommaire du livre:
- Comprendre les fondamentaux
- Concevoir la stratégie
- Optimiser le site
- Contourner les obstacles techniques
- Positionner le site en top 20
- Automatiser le référencement avec PHP et MySQL
- Mesurer le retour sur investissement
- Prévoir Google pour pérenniser ses investissements
- Annexes : glossaire, Webographie, les points clefs à retenir pour référencer son site de manière efficace…
Tout un programme …

Wordpress : Toutes les clés pour créer, maintenir et faire évoluer votre blog d’Amaury Balmer, Xavier Borderie, Francis Chouquet

1. Introduction
2. Installation de WordPress
3. Le quotidien du blogueur
4. Choisir le thème et les extensions pour son blog
5. Comprendre le fonctionnement d’un thème WordPress
6. Créer son propre thème WordPress
7. Mise en forme du blog
8. Philosophie des extensions WordPress
9. Déconstruction de l’extension Hello Dolly
10. Les API de WordPress
11. Construction d’une extension évoluée
12. WordPress MU
13. WordPress MU en pratique
14. Spécificités du développement sous WordPress MU
15. BuddyPress – la face sociale de WordPress MU
16. bbPress – le forum pensé « WordPress »
Trois dinosaures de la sphère Wordpress française nous ont pondu un sacré bébé!

Voilà donc ma petite liste d’achats. Je vous incite à laisser vos avis sur ces différents ouvrages si vous les connaissez.

Tout commentaire de votre part me serait utile pour m’aider à améliorer le thème.

A++

David

Nouveau visuel de Blogityourself.net