Dans mon article Créer un blog – un peu de méthode, j’ai évoqué la nécessité d’apprendre quelques outils et techniques pour réaliser le design de mon blog. Je vais donc les passer en revue tout en indiquant pour chacune mon programme d’apprentissage. J’y suis encore, car vous imaginez que certains outils nécessitent plus que quelques semaines pour être appréhendés et utilisés correctement.
C’est forcément un article un peu long, voici donc l’index des chapitres :
Il n’est pas indispensable de savoir développer un thème de A à Z, cependant je vous conseille vivement de faire quelques tutoriaux de développement à partir de zéro (voir ma catégorie Tutoriel). Cela vous aidera à mieux comprendre la structure interne des thèmes WordPress lorsqu’il s’agira de modifier ou mettre en place votre design. Cela peut également révéler le développeur qui sommeille en vous et vous orienter vers le codage de votre propre thème.
Vous pouvez également partir d’un thème existant, ne conserver que le code HTML et reprendre à zéro la mise en page CSS pour en faire quelque chose de très personnel.
Une autre alternative est d’utiliser un framework WordPress : il s’agit d’un thème paramétrable offrant une structure suffisamment évoluée pour pouvoir faire toutes sortes de mises en page sous la forme de thème enfant (child thème). Je penche assez sur cette deuxième option, même si mon choix n’est pas encore définitif, j’y reviendrai le moment venu. Dans tous les cas il est indispensable de connaître HTML (XHTML) et CSS.
2. Apprendre le langage HTML
Apprendre les bases est relativement aisé. Pour cela j’ai utilisé principalement deux sites :
A ce propos, lire correctement l’anglais est indispensable, l’essentiel des ressources que vous trouverez sur le web étant en anglais.
J’ai également acheté une carte index des principales balises XHTML aux éditions eni qui m’a pas mal aidée dans les premiers temps.
Par la suite, les choses viendront d’elle-même dès que vous vous pencherez sur des tutoriaux plus complets.
3. Apprendre CSS
Les choses commencent à se compliquer car il ne s’agit pas à proprement parlé d’un langage de développement. Donc si vous avez des connaissances en développement, elles ne vous seront d’aucune utilité.
La syntaxe s’apprend assez facilement mais la mise en pratique est beaucoup plus délicate. Il existe souvent plusieurs méthodes pour arriver à la même présentation. Ajoutez à cela quelques soucis en perspective quand vous saurez que les différents navigateurs n’interprètent pas le CSS de la même manière.
Sites utiles
J’ai commencé par étudier les bases grâce à deux sites qui abordent les principes de façon claire et illustrée :
Les bases acquises je me suis mis à la recherche d’un livre plus complet qui me permettrait d’approfondir certains sujets et surtout me servir comme référence en cas de besoin. J’ai donc lu CSS-Le guide complet aux édition Micro Application après beaucoup d’hésitation car l’offre ne m’a pas paru très complète et surtout avec des exemples de mise en page d’actualité.
Je dois dire que ce livre m’a laissé sur ma faim à la première lecture. La mise en page et la rédaction ne sont pas très agréables. Les premiers chapitres traitant des notions de base ne sont pas traitées de façon très pédagogique pour un débutant. Enfin la deuxième partie consacrée aux exemples rattrape un peu le reste sauf pour les fichiers des exemples téléchargeables sur le site dont le nom n’est jamais mentionné dans les exemples du livre (il faut deviner quel fichier correspond à chaque exemple).
Au final, le livre m’a quand même apporté pas mal de connaissance. Après un peu de pratique, il m’a même été très utile dans certains cas pour comprendre des concepts un peu plus pointus. Je ne sais pas si je dois le conseiller aux débutants, mais je n’ai pas trouvé mieux (surtout à ce prix : 15 euros)… si vous avez des avis je suis preneur.
J’ai également acheté une fiche index des balises CSS très bien faite et que je consulte régulièrement : CSS memento aux édition Eyrolles (moins de 5 euros).
Pratique
Pour finir j’ai aussi pas mal observé comment étaient construites certaines mises en page qui m’intéressaient. Si vous utilisez Safari vous pouvez activer les outils de développement. Cependant (pour une fois, j’abandonne Apple) je vous conseille Firefox et ses deux plugins indispensables : Firebug et Web developper. Elles vous permettent d’inspecter n’importe quel élément d’une page web et de voir comment est structuré le code HTML et les mises en page CSS appliquées à l’élément. Vous pourrez même modifier le code pour vos propres expérimentations.
Enfin, la meilleure façon de vérifier ses acquis est de réaliser quelques tutoriaux. (Voir plus loin pour quelques exemples complets)
4. S’initier à PHP
Si vous décidez de développer complètement votre thème et d’y intégrer des fonctions évoluées vous devrez apprendre le langage PHP, langage utilisé pour le développement de WordPress. Je n’ai pour le moment pas fait ce choix, apprendre un langage de développement pouvant être long et fastidieux. Cet investissement peut être utile si vous décidez de faire sérieusement du développement web au-delà de votre seul blog.
5. Dessiner la maquette du site
Il vous faudra utiliser un logiciel de dessin et donc le maîtriser. Si vous travaillez sur Mac vous pouvez commencer avec PixelMator que je viens de découvrir et qui me paraît un très bon compromis entre prix, simplicité et puissance.
Pour ma part j’ai commencé l’apprentissage de Photoshop, que je compte également utiliser pour d’autres créations. Je vous donnerai les pistes, bonnes ou mauvaises, que j’ai suivies pour commencer à maîtriser ce monstre mais cela nécessite un article à part entière.
6. Créer un logo
Ce n’est pas indispensable et je ne sais toujours pas si mon design final en intégrera un mais ma curiosité m’a amenée jusque là. Au-delà du processus de création qui nécessite de suivre un certain nombre d’étapes, vous devrez maîtriser un outil de dessin vectoriel. Le standard pour cela est Adobe Illustrator. Comparé à Photoshop l’apprentissage d’Illustrator est relativement facile.
Pour cela j’ai utilisé le livre de la série Classroom in a book consacré à Illustrator CS4 .Ces livres sont un modèle du genre, en suivant pas à pas des exemples clairement expliqués et illustrés, vous parcourez l’ensemble des fonctionnalités du logiciel. Après avoir fait l’ensemble des exercices du livre, je me sens opérationnel et pour une fois je n’ai pas l’impression qu’il faudra compléter mon apprentissage en achetant d’autres livres.
Vous trouverez également une foultitude de tutoriaux sur le net. J’ai réalisé en particulier celui de Fabio Sasso, auteur de l’excellent blog Abduzeedo concernant la création du logo Zagora.
7. Intégrer le design dans WordPress.
Je n’ai pas encore atteint cette étape que je vous décrirai donc plus en détail dans quelques temps. En attendant j’ai voulu vérifier que mes connaissances HTML+CSS+Photoshop+WordPress seraient suffisantes pour faire l’intégration en réalisant quelques tutoriaux de création de page web. Cela permet surtout d’avoir enfin du concret et de se rassurer.
et enfin l’intégration dans un blog Wordpress avec PSD to CSS to WordPress (partie 3 donnant accès au PDF complet du tutorial)
Voilà, le menu est plutôt copieux mais tellement passionnant que c’est presqu’un jeu d’apprendre toutes ces techniques lorsque l’on voit les possibilité de création que cela offre.
Portfolio
Project 365
Blog Design WordPress, Outils et Techniques
C’est forcément un article un peu long, voici donc l’index des chapitres :
1.Apprendre à développer un thème WordPress
Il n’est pas indispensable de savoir développer un thème de A à Z, cependant je vous conseille vivement de faire quelques tutoriaux de développement à partir de zéro (voir ma catégorie Tutoriel). Cela vous aidera à mieux comprendre la structure interne des thèmes WordPress lorsqu’il s’agira de modifier ou mettre en place votre design. Cela peut également révéler le développeur qui sommeille en vous et vous orienter vers le codage de votre propre thème.
Vous pouvez également partir d’un thème existant, ne conserver que le code HTML et reprendre à zéro la mise en page CSS pour en faire quelque chose de très personnel.
Une autre alternative est d’utiliser un framework WordPress : il s’agit d’un thème paramétrable offrant une structure suffisamment évoluée pour pouvoir faire toutes sortes de mises en page sous la forme de thème enfant (child thème). Je penche assez sur cette deuxième option, même si mon choix n’est pas encore définitif, j’y reviendrai le moment venu. Dans tous les cas il est indispensable de connaître HTML (XHTML) et CSS.
2. Apprendre le langage HTML
Apprendre les bases est relativement aisé. Pour cela j’ai utilisé principalement deux sites :
A ce propos, lire correctement l’anglais est indispensable, l’essentiel des ressources que vous trouverez sur le web étant en anglais.
J’ai également acheté une carte index des principales balises XHTML aux éditions eni qui m’a pas mal aidée dans les premiers temps.
Par la suite, les choses viendront d’elle-même dès que vous vous pencherez sur des tutoriaux plus complets.
3. Apprendre CSS
Les choses commencent à se compliquer car il ne s’agit pas à proprement parlé d’un langage de développement. Donc si vous avez des connaissances en développement, elles ne vous seront d’aucune utilité.
La syntaxe s’apprend assez facilement mais la mise en pratique est beaucoup plus délicate. Il existe souvent plusieurs méthodes pour arriver à la même présentation. Ajoutez à cela quelques soucis en perspective quand vous saurez que les différents navigateurs n’interprètent pas le CSS de la même manière.
Sites utiles
J’ai commencé par étudier les bases grâce à deux sites qui abordent les principes de façon claire et illustrée :
Livres
Les bases acquises je me suis mis à la recherche d’un livre plus complet qui me permettrait d’approfondir certains sujets et surtout me servir comme référence en cas de besoin. J’ai donc lu CSS-Le guide complet aux édition Micro Application après beaucoup d’hésitation car l’offre ne m’a pas paru très complète et surtout avec des exemples de mise en page d’actualité.
Je dois dire que ce livre m’a laissé sur ma faim à la première lecture. La mise en page et la rédaction ne sont pas très agréables. Les premiers chapitres traitant des notions de base ne sont pas traitées de façon très pédagogique pour un débutant. Enfin la deuxième partie consacrée aux exemples rattrape un peu le reste sauf pour les fichiers des exemples téléchargeables sur le site dont le nom n’est jamais mentionné dans les exemples du livre (il faut deviner quel fichier correspond à chaque exemple).
Au final, le livre m’a quand même apporté pas mal de connaissance. Après un peu de pratique, il m’a même été très utile dans certains cas pour comprendre des concepts un peu plus pointus. Je ne sais pas si je dois le conseiller aux débutants, mais je n’ai pas trouvé mieux (surtout à ce prix : 15 euros)… si vous avez des avis je suis preneur.
J’ai également acheté une fiche index des balises CSS très bien faite et que je consulte régulièrement : CSS memento aux édition Eyrolles (moins de 5 euros).
Pratique
Pour finir j’ai aussi pas mal observé comment étaient construites certaines mises en page qui m’intéressaient. Si vous utilisez Safari vous pouvez activer les outils de développement. Cependant (pour une fois, j’abandonne Apple) je vous conseille Firefox et ses deux plugins indispensables : Firebug et Web developper. Elles vous permettent d’inspecter n’importe quel élément d’une page web et de voir comment est structuré le code HTML et les mises en page CSS appliquées à l’élément. Vous pourrez même modifier le code pour vos propres expérimentations.
Enfin, la meilleure façon de vérifier ses acquis est de réaliser quelques tutoriaux. (Voir plus loin pour quelques exemples complets)
4. S’initier à PHP
Si vous décidez de développer complètement votre thème et d’y intégrer des fonctions évoluées vous devrez apprendre le langage PHP, langage utilisé pour le développement de WordPress. Je n’ai pour le moment pas fait ce choix, apprendre un langage de développement pouvant être long et fastidieux. Cet investissement peut être utile si vous décidez de faire sérieusement du développement web au-delà de votre seul blog.
5. Dessiner la maquette du site
Il vous faudra utiliser un logiciel de dessin et donc le maîtriser. Si vous travaillez sur Mac vous pouvez commencer avec PixelMator que je viens de découvrir et qui me paraît un très bon compromis entre prix, simplicité et puissance.
Pour ma part j’ai commencé l’apprentissage de Photoshop, que je compte également utiliser pour d’autres créations. Je vous donnerai les pistes, bonnes ou mauvaises, que j’ai suivies pour commencer à maîtriser ce monstre mais cela nécessite un article à part entière.
6. Créer un logo
Ce n’est pas indispensable et je ne sais toujours pas si mon design final en intégrera un mais ma curiosité m’a amenée jusque là. Au-delà du processus de création qui nécessite de suivre un certain nombre d’étapes, vous devrez maîtriser un outil de dessin vectoriel. Le standard pour cela est Adobe Illustrator. Comparé à Photoshop l’apprentissage d’Illustrator est relativement facile.
Pour cela j’ai utilisé le livre de la série Classroom in a book consacré à Illustrator CS4 .Ces livres sont un modèle du genre, en suivant pas à pas des exemples clairement expliqués et illustrés, vous parcourez l’ensemble des fonctionnalités du logiciel. Après avoir fait l’ensemble des exercices du livre, je me sens opérationnel et pour une fois je n’ai pas l’impression qu’il faudra compléter mon apprentissage en achetant d’autres livres.
Vous trouverez également une foultitude de tutoriaux sur le net. J’ai réalisé en particulier celui de Fabio Sasso, auteur de l’excellent blog Abduzeedo concernant la création du logo Zagora.
7. Intégrer le design dans WordPress.
Je n’ai pas encore atteint cette étape que je vous décrirai donc plus en détail dans quelques temps. En attendant j’ai voulu vérifier que mes connaissances HTML+CSS+Photoshop+WordPress seraient suffisantes pour faire l’intégration en réalisant quelques tutoriaux de création de page web. Cela permet surtout d’avoir enfin du concret et de se rassurer.
Voici quelques exemples que j’ai expérimentés :