Constructeur de mon propre site web
Projet 21
Caractéristiques
- Date : Automne 2021
- État : Terminé (mis à jour régulièrement)
- Thèmes : scripts python, utilisation de la programmation orienté objet pour représenter les constructeurs de pages.
- Tags : Web, Web front-end, Python, Javascript, Programmation orienté objet
Description
Mon projet de création automatisé de mon propre site est venu de ma difficulté à maintenir mon site avec ses douzaines de pages de projet. Je voulais également ajouter une version anglaise de mon site pour que mon parcours puisse aussi être valorisé pour des stages à l'étranger. J'ai donc entrepris la création d'un constructeur de site web fonctionnement sur la base de script python.
La première étape pour mener à bien ce projet, fut pour chaque type de page (index / portfolio / page de projet / ...), d'identifier les parties qui devront figurer dans un fichier template, et les parties qui devront être générées. Pour chaque page, nous pouvons déjà séparer le contenu, le corps de la page, de sa base de navigation et du pied de page. Ces deux dernières parties auront donc leur propre template. Ensuite, j'ai écrit la version pour chaque type de page. J'ai établi que pour chaque page, le script python posséderait un dictionnaire remplaçant tout les occurrences de mots-clés se trouvant dans les motifs {motClés} par ce qui se trouverait dans le dictionnaire. Ensuite, j'ai fait en sorte de générer des mêmes pages pour le nombre de langues que j'aurais défini (pour l'instant deux : Français, Anglais). Je me suis assuré que tous les liens partant d'une page d'une langue mène vers la page voulue dans la bonne langue.
La deuxième étape de mon projet fut de réécrire tout le contenu du site, dans les différentes langues, dans des fichiers json, afin que mon constructeur utilise ces contenus pour remplir les mots-clés du site. J'ai donc déplacé le contenu des anciennes pages de projet dans leur fichier json respectif. J'ai également ajouté une partie information commune pour chaque projet pour y stocker des informations. Notamment le numéro de projet, les tags associés (Modification de 2023) et l'année. J'ai créé un type de constructeur pour les parties vraiment différentes partie du site. Un constructeur de page simple. Un constructeur pour la page de portfolio et un constructeur spéciale. Ce dernier créerait pour tous les fichiers de projets, une page associée.
Enfin, j'ai fait d'autres petites modifications. À cette ancienne page de portfolio, j'ai ajouté un système de filtre, permettant l'affichage seulement des projets en rapport avec les tags selectionnés. J'ai aussi ajouté une balise html spéciale dans la partie contact pour pouvoir afficher mon CV. Au niveau du contenu, j'ai aussi réécris les paragraphes de la page d'accueil, le contenu de la page biographie et la page de contact.
(Mise à jour du site, fin de projet 24 catch-the-ufo) J'ai mis à jour la partie javascript des pages de projets pour pouvoir y inclure une vue d'une autre page de mon site au sein de celle-ci. J'ai donc fait fonctionner mon projet sur une page web du site, et créé une vue sur la page de projet catch the ufo pour qu'un potentiel visiteur du site puisse y jouer.
(Mise à jour du site, début 2023) Je trouvais que la présentation des projets n'était pas super clair. J'ai donc ajouté plus de filtres et un affichage des projets par thème. Les projets peuvent être affichés par années (par défaut) ou par intérêt (personnel, de stage, scolaire). De plus, des liens sont générés pour chaque type d'affichage permettant à l'utilisateur de se rendre dans une section très rapidement. J'ai aussi revu le style du site pour régler des petits projets hétérogénéités de style pour des mêmes objets. Enfin, j'ai remplacé les liens des images de projet menant à la ressource imagée dans une page à part entière, par un carrousel. Lorsque l'utilisateur appuie sur une image, le carrousel s'affiche. Quand l'image est affiché en grand, l'utilisateur peut appuyer sur les flèches directionnelles ou sur les boutons pour changer d'image affichée. Il peut aussi fermer ce carrousel en appuyant sur la touche "echap" ou le bouton associé. Pour faire tous ces changements, j'ai aussi dû changer un peu les scripts pythons.
Visuels - (cliquer pour ouvrir en grand)
Hey test test