Génèse de Pixiscreen

Ce site est le fruit d’un long processus de réflexion sur l’orientation qu’il pouvait prendre, le contenu qu’il pouvait offrir, la façon dont il devait être construit. Je souhaitais avoir un site test, un bac à sable pour expérimenter en ligne. Mais j’ai pris mon temps, pour diverses raisons …

L’orientation du contenu

Je suis bien convaincue aujourd’hui qu’avoir un carnet de bord perso en ligne pour compulser des mémos, pour faire des tests est vraiment profitable. Mais j’ai mis du temps avant de me lancer. J’ai longtemps pensé que la présence de ce genre de site sur la toile n’aurait qu’un intérêt trop limité pour ne servir … qu’à moi. Et ça me posait question dans la mesure où si on n’apporte aucune valeur ajoutée via son site sur le web, à quoi bon ? Bref, j’ai mis du temps à sauter le pas.

En fait, j’ai fini par me répondre au « à quoi bon ? » Écrire sur le web, dans l’idée, c’est écrire pour d’éventuels visiteurs bien sûr, mais cela n’empêche pas la première étape d’écrire avant tout pour soi. Si on se pose une question, il y a de fortes chances que d’autres se la seront posée aussi. Alors faire pour soi, pour répondre à ses propres questionnements, ses besoins, finit toujours bien par apporter du grain à moudre à d’autres.

Ma volonté première à créer Pixiscreen était :

  • d’avoir à ma disposition un lieu d’expérimentations concernant le développement web,
  • de me constituer un espace de stockage pour des mémos, tutoriels,
  • de rendre accessibles ces mémos à d’autres personnes qui pourraient y trouver un intérêt,
  • de rassembler des liens web ressources.

Passé cette étape qui est de l’ordre du blogging, il me faudra aussi à l’avenir pouvoir intégrer d’autres sections comme un portfolio, ainsi que la possibilité de proposer des prestations en développement de sites (A voir, comment les choses évolueront).

Le contenu que je souhaite mettre en ligne

Des tutoriels

Des tutos pour faire du développement Web, il en existe beaucoup sur la toile et merci à eux d’être là, c’est du partage de connaissances dont j’use et j’abuse ! Mais du coup faire de la redite pure et dure : aucun intérêt ! Alors l’idée m’est venue que certains mémos que je pourrais écrire ici devraient avoir pour objectif de faire du « What you see is What is Explained«  (petit détournement de l’acronyme WYSIWYG) ! Bon, en Français, l’idée c’est que les tutos servent principalement à décrire ce qui a été mis en pratique sur le site lui même.

Des ressources pour le développement de sites

Des snippets : des tutos expliquent des choses, disons, un peu longues à mettre en place. Parfois de simples bouts de code à copier coller c’est pratique, et ne nécessitent pas d’en faire un article. Dans ce cas sous WordPress, créer un type de contenu personnalisé (CPT ) Snippets m’a semblé la solution adéquate.

Certains articles par contre ne concerneraient pas la création de ce site précisément mais constitueraient des ressources pour le développement web en général. Compulser ici des choses qui me servent souvent peut être très pratique, tout au moins pour moi !

Se présenter

Si on a en tête de partager, il semble évident qu’il soit nécessaire de se présenter un minimum. Dire qui on est, expliquer la raison d’être du site. Bref, ça permet aussi de conserver une sorte de journal de bord, et de faire des retours en arrière pour visualiser l’évolution de ses compétences. Si en plus ça permet de créer du lien avec d’autres dans la même branche pro, c’est le pied !

Penser la structure du site

Penser à la structure d’un site, c’est réfléchir au futur contenu qu’on souhaite y mettre, mais surtout ensuite vient la phase de découpage, de rangement, de classement par thématiques de ce que l’on voudra écrire … C’est une phase de brainstorming que j’ai trouvée capitale. Bien délimiter les choses permet de créer une structure logique où tout devrait se ranger plus facilement plus tard, lors de la rédaction.

Les outils de MindMapping sont fort utiles pour cette phase. On peut se contenter du crayon et papier, mais on y revient souvent sur son découpage : on déplace, on supprime, on ajoute, …, la gomme ça va un moment. Pour ma part, j’ai utilisé Xmind, la version gratuite du logiciel est largement suffisante pour faire le boulot.

Mettre en place des thématiques à développer

J’ai mis du temps à trouver une « formule » qui me convienne pour qu’elle soit utilisable dès aujourd’hui pour mon contenu de type blog: les tutos, mais surtout qu’elle soit construite avec des possibilités d’évolution éventuelles vers un site professionnel, avec une partie portfolio, présentation de prestations.

Grouper ses différents contenus, les ranger dans des « catégories » fait qu’on peut en venir au concept de Silo. C’est, d’une certaine façon, ce que j’ai mis en place ici. J’ai trouvé ce concept intéressant pour monter ce site sans pour autant pleinement le suivre. Je n’ai pas cherché à faire de cocon sémantique, je ne crois pas que mon contenu s’y prête. Mon intérêt était avant tout de clarifier des sections que je souhaitais développer.

Vous pouvez en lire plus sur « Concevoir une structure pour un blog »

Le thème et les fonctionnalités du site

Le Thème

L’étape suivante consistait à donner un aspect à ce contenu. Mais surtout qu’il soit construit avec une sémantique que je puisse vraiment maîtriser. L’occasion donc d’apprendre à créer un thème personnalisé avec lequel je puisse être à l’aise pour en connaitre chaque recoin, un thème simple donc. Je me suis alors mise en besogne de créer un Starter Theme personnel que j’ai nommé « flooor » pour y intégrer différentes préconisations de « bonnes pratiques », astuces et optimisation de code que je découvre au fil de mes lectures. Le but est qu’il soit suffisamment générique pour qu’il puisse être utilisable sur différents projets.

En fait, ce Starter Thème « flooor »  je l’utilise pour le moment encore comme Thème parent, pour me donner le temps d’une maturation des éléments qui le constituent. J’en suis au début de sa conception, il est nettement perfectible. Ensuite vient s’y ajouter un thème enfant, « flooor-pixiscreen » pour les spécificités de Pixi. Au fur et à mesure je transvase des portions de code du thème enfant vers le thème parent quand je me rends compte que ça pourrait être utile pour d’autres types de sites. C’est en prenant connaissance d’une conférence de Gaël Poupard sur le sujet des thèmes enfants que j’ai mis ce fonctionnement en place. N’hésitez pas à visiter le lien vers sa Conférence, elle m’a rendu un grand service pour trouver comment potentialiser ses connaissances en création de thèmes.

Les fonctionnalités

Les fonctionnalités ajoutées à la base de l’application WordPress ont pour certaines été ajoutées :

  • directement dans le fichier functions.php du thème parent flooor, elles correspondent à des fonctions « génériques » de création de thème.
  • d’autres dans le functions.php du thème enfant flooor-pixiscreen, là ces fonctionnalités deviennent plus spécifiques du thème enfant. Parfois elles ne font que transiter par là, pour voir si ça fonctionne et partent ensuite dans un plugin perso pour leur « réutilisabilité » sur d’autres projets.
  • pour rester cohérente dans la possibilité de faire du code réutilisable au travers de différents projets, j’ajoute des fonctionnalités sous forme de plugins personnels.
  • sinon ce sont des plugins du Repository.

Bilan

Bon, et bien voilà où j’en suis aujourd’hui. Ce site voit le jour sur le web en Avril 2018. Un site tout neuf qui se peaufinera avec le temps. Un outil d’expérimentation que j’ai plaisir à manipuler, et qui en étant partagé, donnera peut être des pistes de réflexion à d’autres personnes.