Liens
Objectifs
Les pages ont été créées dans le cadre du cours STIC1 du master MALTT. L’objectif principal était de partager des informations sur moi-même et de créer un espace où déposer l’ensemble de mes travaux de master. Dans la page EduTechWiki et ma page personnelle, je me présente, je partage mes intérêts et mon parcours. Le portfolio (espace travaux) sert à regrouper l’ensemble de mes travaux. Pour cela il sera progressivement mis à jour et deviendra une trace de mon évolution académique et technique. Les trois pages sont adressées principalement aux enseignants et aux étudiants du master, mais aussi à des personnes externes qui souhaitent avoir des informations en plus sur moi et mon parcours.
Design
Pour le design des pages, j’ai décidé de rester simple mais avec un peu de couleur. Je voulais créer un design clair et agréable à lire mais surtout avec une certaine cohérence entre les pages.
- La page utilisateur EduTechWiki respecte la structure du Wiki avec des sections hiérarchisées. Ici j’ai intégré une image qui me représente, générée par Notion à partir d’une photo de moi.
- La page personnelle présente un fond bleu clair (#CCFFFF) et une palette de tons turquoise et bordeaux, qui sont mes couleurs préférées et qui transmettent à la fois douceur et dynamisme. On trouve ici deux zones : à gauche le titre (mon nom) et ma photo, et à droite un petit menu vertical menant vers différentes pages (About Me, EduTechWiki, Portfolio).
La sous-page “About Me” suit le même code couleur et le même thème général de la page personnelle. Ici j’ai écrit un petit texte avec mon parcours et mes passions. J’ai intégré deux icônes SVG libres de droit (une dans la page personnelle et une dans la page About me) pour donner une touche plus personnelle. - La page portfolio conserve la même logique visuelle de ma page personnelle : un fond bleu clair, des encadrés colorés pour chaque cours (STIC1, VIP, ERGO, ADID, METHODE) et une mise en page centrée.
Production
Pour la création des pages, j’ai utilisé le support Visual Studio Code. J’ai d’abord créé des fichiers .html avec le contenu et ensuite des fichiers .css pour la mise en page. Au début, j’avais du mal à comprendre la logique du CSS, surtout en ce qui concerne le placement du contenu dans l’espace. Avec le temps et beaucoup d'essais-erreur, j’ai compris un peu la logique et j’ai réussi à obtenir les résultats que je voulais. J’ai aussi utilisé ChatGPT pour comprendre les erreurs que je faisais ou le pourquoi certaines choses que j’avais écrites ne donnaient pas le résultat espéré. De plus j’ai regardé des vidéos YouTube qui m’ont beaucoup aidée, en intégration aux informations données sur la page du cours STIC sur l’EduTechWiki. Pour les images, j’ai utilisé des images de moi-même et des icônes SVG libres de droit.
Auto-évaluation
Je suis globalement satisfaite du résultat de mes pages, surtout en tenant compte que je partais de zéro en programmation. Au début j’avais beaucoup de peur et de frustration : tout me semblait compliqué et impossible pour moi. Puis, en commençant avec quelque chose de très basique, j’ai pu progressivement l’améliorer, ajouter des éléments visuels petit à petit et obtenir un résultat final que j’aime. Je pense avoir créé des pages assez claires et cohérentes. Les principales limites de mon travail concernent l’absence d’optimisation du code (je ne suis pas encore sûre qu’il soit totalement “propre”). J’aimerais donc améliorer mes connaissances en HTML et CSS pour modifier mon travail.
Bibliographie
- EduTechWiki. (s.d.). Introduction à HTML5. Université de Genève.
https://edutechwiki.unige.ch/fr/Introduction_%C3%A0_HTML5 - EduTechWiki. (s.d.). Introduction à CSS. Université de Genève.
https://edutechwiki.unige.ch/fr/Introduction_%C3%A0_CSS - YouTube. (2021). HTML Tutorial for Beginners: HTML Crash Course.
https://youtu.be/qz0aGYrrlhU?si=LPzRktxBqRyhas3j - Youtube. (2023). CSS Tutorial for Beginners.
https://youtu.be/j6nOnIT-T1o?si=rI5HqbK6A0msyDQn - Youtube. (2014). Learn CSS in 12 Minutes.
https://youtu.be/0afZj1G0BIE?si=jg-gdrOzMbLcn8HQ - ChatGPT. (2025). Aide à la compréhension et correction du code CSS.
https://chatgpt.com/ - Cours STIC1 - Master MALTT, Université de Genève
Ressources
- Images personnelles : photo d’Elena Renda (page personnelle, portfolio).
- Image "dessinée" de moi créée sur Notion depuis une photo personnelle pour la page EduTechWiki.
- Icônes SVG libres de droit téléchargées sur un site open source.
https://www.svgrepo.com/