TFE #6—07/05 — Dernier article

Elisabeth Nyssens
5 min readMay 7, 2020

--

Deux semaines avant la présentation Beta, où en suis-je ?

C’est déjà le dernier rapport de TFE et cette fois, j’ai un peu plus de choses à dire.

Objectif atteint

Pour commencer, il y a deux semaines je m’étais fixé l’objectif de finir mes illustrations et d’avoir bien entamé le code pour le 3 mai, j’ai réussi sans trop de problèmes et celà m’a redonné motivation, confiance moi, et surtout beaucoup de satisfaction d’avoir enfin fini mes illustrations et de voir mon site prendre forme!!!

Début difficile

Je le répète mais c’est la première fois que je faisais des grosses illustrations comme ça, c’était un défi que je m’étais lancé, ayant adoré les cours d’Illustrator (bien que je ne sache pas très bien dessiner) en première et ayant envie de m’améliorer là dedans.

Si vous avez lu mes 2eme et 3eme articles, vous aurez vu que j’ai eu beaucoup de mal à démarrer, mes deux premières illustrations étaient un peu moches, j’ai eu peur et manquais fort de confiance en moi mais heureusement, après beaucoup de recherches graphiques et de tests, j’ai enfin trouvé ma palette de couleur, mes 2 premières illustrations sont alors devenues nettement mieux (c’est d’ailleurs les 2 seules que j’avais lors de la présentation MVP) et j’ai eu beaucoup moins de mal pour les suivantes.

Maintenant, on s’attaque au code

Mon projet sera composé de 18 pages html (la page d’accueil, la page “À propos”, 12 pages pour l’histoire et 4 pour les personnages), du jamais vu pour moi, d’habitude je suis plutôt aux alentours de 3–4.

Pour coder, j’ai choisi d’utiliser Jekyll que j’ai découvert pendant mon stage et que j’appréciait beaucoup. Ça me permet de travailler avec des includes et un layout de base, ce qui est très pratique quand on a autant de pages html avec la même structure et les mêmes composants qui reviennent, comme celà je peux effectuer beaucoup de changements une seule fois et au même endroit. Je peux également travailler dans différents fichiers sass qui sont compilés dans un seul, ça me permet d’être plus organisée et de mieux m’y retrouver.

Screenshot de VSC

Si j’utilise une page hmtl par page de l’hisoire, c’ets à cause de mes illustrations svg que j’intègre sous forme de code, pour pouvoir les animer avec GSAP, et qui prennent énormément de place, de là à faire bugger VSC! À chaque fois que je collais le code d’une illustration sur une page html, plus possible de replier les lignes de codes pour cacher ces gros pâtés, plus d’auto-complétion et plus de raccourcis claviers! Je devais donc à chaque fois fermer et réouvrir VSC, assez pénible. L’étape copier-coller de code svg et de contenu n’était pas la plus drole mais une fois celà fait, le site prenant forme, je commence à m’amuser!

page d’accueil à gauche et 6ème page de l’histoire à droite

Revoilà les écrans de ma présentation MVP, mais cette fois-ci, codés! Vous pouvez observer sur la page d’accueil le nouveau logo et le nouveau texte de présentation. Il ne s’agit plus d’une histoire interactive mais d’une histoire illustrée. Pour mon histoire, je garde toujours les remarques des professeurs en tête, trouver une relation entre le texte et l’image, faire différents blocs et niveaux hiérachiques. J’espère que c’est mieux maintenant, en tout cas je vois pas trop comment je pourrais encore améliorer ça, et je n’ai pas énormément de place pour le texte non plus. Il y aura, sur certaines pages, des changements sur l’illustration quand on cliquera sur la petite flèche pour lire la suite du texte mais malheureusement pas sur toutes. certaines pages auront plus d’animations que d’autre.

Au niveau du js, il n’y en a pas énormément pour mon projet, c’est dommage car j’ai encore besoin de beaucoup apprendre. Au moins, j’ai pu me casser un peu la tête sur des petites fonctionnalités comme la progress bar et je suis contente parce que je sens que j’ai progressé dans ma logique. J’arrive à taper des morceaux de code simple par moi même. je n’aurais pas su faire ça seule il y a un an, j’avais toujours besoin de faire du copier-coller. Le js, je l’apprends lentement mais surement, je n’ai jamais perdu espoir haha!

Ce que je dois encore faire pour la beta

Je dois tout d’abord finir de disposer le texte sur chaque page, avec des liens sur certains personnages, les rapports hiérarchiques et aussi rajouter des petites illustrations de l’autre côté du texte, pour ne pas faire une séparation trop nette entre le texte et l’image.

Après cela, les animations! J’espère pouvoir en faire le maximum d’ici la présentation beta et j’espère aussi qu’elles donneront bien!

Pour la beta, je ne m’attends pas du tout à ce que mon projet soit fini, je suppose qu’il me resetra quelques animations et petits détails à améliorer et également la page “A propos”. La musique, je ne suis pas sûre qu’il y en aura, c’ets si j’ai le temps et si j’en trouve une adéquate, libre de droits (ce dont je doute un peu).

Enfin, mon site ne sera malheureusement pas responsive (sauf si j’ai vraiment trop de temps et que je m’ennuie, j’y songerai peut-être). La raison est que l’écran mobile est trop petit et ne s’adapte pas trop à mon projet car je voudrais avoir le texte et l’illustration sur le même écran. Mes illustrations sont grandes et plutôt détaillées, parfois ce seront de petits détails qui seront animés et l’on doit toujours pouvoir les voir pendant que l’on lit le texte, mais le tout rentre tout juste sur un petit écran desktop alors…

Je pense avoir tout dit, le stress est toujours bien présent et ne va faire qu’augmenteeeer jusqu’à la fin. J’espère que mon projet plaira…

--

--