Mes premiers pas en programmation : la création de mon blog

 

On n'oublie jamais notre première fois. Et je parlais bien évidemment de mon tout premier projet en programmation !

 

En tant que débutante, j'ai dû apprendre et comprendre les bases de la programmation et plus particulièrement de la programmation web. Un peu comme apprendre à nouveau à marcher mais d'une nouvelle façon !  Et pour ça j'ai un excellent professeur à la maison... J'ai été au début très hésitante sur ce projet, avec peu de confiance en moi et je ne pensais pas réussir.

 

N’ayant aucune connaissance en programmation ou de manière anecdotique (du genre les balises HTML <head><body> etc) je pensais cet exercice insurmontable. SPOILER ALERT ⚠️, j’y suis arrivée (sinon vous ne pourriez pas lire ceci). Alors oui ça a mis du temps, parce que je n’ai pas consacré toutes mes journées dessus puisque j’étais toujours en plein dans mes études, dossiers et travaux à rendre, examens, mais chacun avance à son rythme ! Je ne voulais pas que ce soit une corvée, mais un plaisir avant tout. 

 

Il faut que je vous explique comment j’en suis arrivée là, surtout quelles étapes ont été nécessaires et qui sont issues d’un long processus de réflexion.

 

J’ai commencé de rien. Ou du moins de pas grand-chose. Je n’avais pas de compétences pour réaliser ce projet mais simplement de l’envie, beaucoup de curiosité et de motivation pour venir à bout d’un projet. Bien sûr je connaissais à peu près l’univers des blogs, portfolio et tout autres sites mais je ne suivais pas de blog au quotidien. Il m’est déjà arrivé d’aller sur des blogs parce que je connaissais la personnalité publique ou pour avoir une information précise grâce à un article que j’avais lu, mais sans plus. À partir d’aujourd’hui je porte un nouveau regard, j’apprends en regardant d’autres sites web ou blog, comment ils fonctionnent et sont créés (via l’inspecteur... pas l'inspecteur gadget pitié 🕵️).

 

 

Ce projet est une porte d’entrée (🚪toc toc - qui est là ?), une expérience qui va beaucoup m’apporter et m’apprendre à aller au bout d’un projet et d'en développer des nouveaux par ce premier pas. Apprendre à programmer, c’était la motivation première de ce blog. Aussi, je l’imaginais comme ma rubrique « centres d’intérêts » de mon CV, pour montrer un peu de mon univers, ce que j’aime et ce que je fais de mon temps libre.

 

 

J’ai la chance d’avoir un conjoint qui a de nombreuses compétences dans le domaine de la programmation. C’est lui qui m’a appris les bases ! Cela m’a rassurée aussi bien dans l’objectif final que dans la réalisation et l’apprentissage, et surtout, ça a joué sur ce projet. Je voulais apprendre davantage sur la programmation, partager ses passions, sans toutefois m’appliquer purement à la programmation web mais apprendre aussi les bases du langage Python. C’est donc ce que je voulais faire. Et voilà pourquoi ce projet est né. 

 

 

Pour autant, ça a été assez compliqué de se lancer. Il a fallu procéder en plusieurs étapes.

 

1. Définir l’objectif principal du site et ce que je voulais partager dessus (beaucoup de choix, d’indécisions au départ et de questions : qu’est ce que je vais créer ? Un site vitrine ? Un blog ? Un portfolio?), mes centres d’intérêt qui se développent, plusieurs envies, il a fallu faire des choix et ceux-ci ont évidemment évolués au fil du temps et de la découverte de mes nouvelles passions (e.g le crochet, le tricot ...). 

 

2. Trouver un nom cohérent sur mon univers et qui correspondait au futur contenu. Ça a été l'étape la plus longue et compliquée. Mon indécision à faire des choix, les idées pas terribles, mes allers-retour… J’y accordais beaucoup d’importance. Et pourtant le nom final était là depuis le début et devant moi au quotidien. J’ai préféré un jeu de mot qui correspond au nom de mon chat, une référence à la fleur (Cosmos) et plus globalement la nature et au cosmos tout simplement, et note pour montrer qu’il s’agit d’un blog, où j’écris ce que je veux, comme un blo(c)g note. Le tout fait un jeu de mot assez original.

 

3. Dessiner un logo. Une fois le nom du blog décidé, le logo a été assez facile à trouver puisque c'est l'illustration parfaite de ce jeu de mot. Le logo a été réalisé sur Illustrator par mon conjoint, j'ai adoré !

 

4. Réaliser la maquette du site. J’ai beaucoup travaillé cette partie et établi plusieurs maquettes pour trouver celle qui me convenait. Étant donné que cela est visible en premier par l’utilisateur, il fallait que ce soit fluide, compréhensible, lisible et facile d’utilisation et surtout pas surchargé pour faciliter l’expérience utilisateur. Cette phase m’a beaucoup appris, en réalisant plusieurs maquettes je me suis améliorée jusqu’au résultat final. L’expérience utilisateur ou User eXperience m’a permis de travailler davantage mon design, réfléchir au placement de mes objets mais aussi au fonctionnement du site lui-même. J’ai réalisé mes maquettes sur Indesign avant de passer à la conception.

 

 

Exemples de maquettes réalisées

 

Cette étape était très enrichissante, c’était aussi celle où je n’avais réellement aucune base (comme le CSS) ! Parce que oui, ce site a été codé par nous mêmes avec mon conjoint, et non via WordPress ou autre. C’est le cheminement qui m’intéressait, découvrir comment un site était codé, découvrir la programmation sur Python et découvrir le front end ainsi que le back end !

 

 

✨Le Front End✨

 

 

  • Le HTML ou HyperText Markup Language        

 

Mais attend c'est quoi l'HTML ? 🤔 Il s’agit du contenu de la page web et de sa structure (mettre des images, du texte, des boîtes contenant les objets). C’est la sémantique de la page, une description. Son squelette quoi, la fondation de tout ! C'est grâce au HTML que vous pouvez voir les éléments d'une page web et qu'une page existe d'ailleurs.C'est simple : imaginez une boîte contenant plusieurs blocs divisés en plusieurs blocs. Par exemple pour une partie de mon site voilà à quoi ça ressemble concrètement :

 

Exemple code HTML

 

  • Le CSS ou le Cascading Style Sheet

 

Hein ? 🤔 Le CSS permet de donner du style à ton HTML ! Il est construit à partir d'un ensemble de règles qui peuvent être définis à chaque objet (texte, image, ...). C'est l'enveloppe du site, le placement, la couleur, bref tout ça ! Sans le CSS la page serait juste un enchaînement d'élément à la suite mais sans style. En gros c'est l'apparence de la page.

 

C'est la peau, l'enveloppe. 

 

C'est une partie un peu plus complexe que l'HTML parce qu'il existe beaucoup de possibilités, de règles. Cette partie a pris pas mal de temps car c’est grâce à ça que l’on réussi à placer les objets, les styliser, les ordonner et les aligner. Ces objets sont créés dans un premier temps en HTML (tous les deux sont des langages informatiques). On peut aussi jouer sur l'apparence des objets comme sur les boutons de catégories qui changent de couleurs au passage de la souris, ou encore sur les articles où au premier abord on ne voit que les images mais ensuite s’affichent le titre et le début de l’article.

 

Exemple code CSS

 

À retenir : HTML + CSS = ce que vous voyez, le visuel.

 

 

✨Le Back End✨

 

C'est quoi ça encore ?? C'est simple : je ne sais pas.

 

Trêve de plaisanterie, comme c'est un peu plus complexe et moins créatif donc j'ai délégué cette partie à mon conjoint. Je ne m'en suis pas trop occupée pour le moment mais un jour je comprendrai promis ! A contrario du front end qui est la partie que l'on voit (HTML, CSS ..), le back end est caché, il ne se voit pas. Il s'agit de l'ensemble des comportements programmés permettant de rendre le site dynamique 💃 c'est-à-dire qui génère du code de lui-même contrairement à un site statique. C'est le cerveau de l'opération, il contrôle le site.

 

Il est constitué de plusieurs parties notamment : 

  • d'une mémoire, orchestrée par une base de donnée (piloté par du SQL par exemple)
  • du visuel et de la partie statique du site géré par un serveur de fichier (Nginx)
  • d'une intelligence et des comportements associés qui sont programmés dans un langage de programmation. Des frameworks (plans de travail) existent pour utiliser des comportements prédéfinis. Pour m'initier comme il faut au Python (qui est un langage), mon conjoint m'a conseillé d'utiliser Django, qui est donc un framework. Il existe des tutoriels pour apprendre à réaliser un site web et apprendre à utiliser Django, par exemple https://docs.djangoproject.com/fr.

 

Petite BD personnelle explicative du Back End

 

Puis voilà ! une fois tout ça en place, il suffisait de mettre en ligne le site et POUF ! Voilà vous pouvez vous promener sur celui-ci.

 

 

Cosmo

 

* À écouter : Moi être roi - Cachemire* (en vrai j'écoute du Hannah Montana)

Commentaires

Aucun commentaires pour le moment...

Connectez-vous pour poster un commentaire.