1. Liens
2. Objectifs
Toutes ces pages ont pour objectif de me présenter en mettant en avant mon parcours académique, mon expérience professionnelle, mes compétences, mes intérêts ainsi que mes travaux. Elles s’adressent principalement à des personnes intéressées par mon profil dans le domaine de la formation et du numérique éducatif : enseignant·es, formateur·ices, collègues ou responsables académiques. Elles constituent également un moyen de contact et un espace de valorisation de mes réalisations au sein du Master MALTT. La page personnelle offre une première découverte de mon univers professionnel et créatif, tandis que le Portfolio regroupe mes productions et projets réalisés dans le cadre du master. Enfin, la page EduTechWiki et mes autres profils en ligne (comme LinkedIn) servent de vitrine plus institutionnelle et facilitent le partage de mes travaux avec d’autres professionnel·les de l’éducation.
3. Design
Pour ma page personnelle et la page de contact, j’ai souhaité adopter un design clair et harmonieux, dans des tons de violet et turquoise qui reflètent à la fois la créativité et la douceur. J’ai privilégié une mise en page structurée, avec des blocs bien délimités et une typographie lisible (Arial), tout en ajoutant quelques touches plus expressives comme le prénom en police Pacifico. Les images choisies sont issues de mes voyages : elles apportent une dimension personnelle et esthétique, en lien avec mon approche créative de l’enseignement. Le Portfolio a été conçu dans la continuité visuelle de ces pages, afin de maintenir une cohérence graphique et de faciliter la navigation entre les différentes sections. J’ai cherché à trouver un équilibre entre simplicité, lisibilité et identité visuelle, sans surcharger l’interface ni multiplier les effets.
4. Production
J’ai commencé par créer la structure de mes pages en HTML, en suivant les consignes de base de l’exercice et en m’assurant que le code soit bien organisé et valide. J’ai ensuite construit la mise en page à l’aide du CSS, en cherchant à garder une cohérence visuelle entre la page personnelle, la page de contact et le futur portfolio. Avant de coder, j’ai pris le temps de réfléchir à la disposition des éléments et aux couleurs que je souhaitais utiliser, en réalisant quelques esquisses sur papier. J’ai utilisé Visual Studio Code pour coder et l’extension Live Server (GoLive) pour visualiser mes modifications en direct. Les images ont été optimisées et placées dans un dossier spécifique pour garder une structure de fichiers claire. Enfin, j’ai ajusté les liens entre les différentes pages et dossiers afin d’assurer une navigation fluide avant la mise en ligne sur le serveur TECFA.
5. Auto-évaluation
Cet exercice m’a permis de mieux comprendre la logique du code HTML et CSS, et surtout la manière dont la structure et le style interagissent pour créer une mise en page cohérente. J’ai particulièrement apprécié le fait de pouvoir personnaliser mon site en y intégrant mes photos et mes couleurs, ce qui m’a permis d’y apporter une touche personnelle et artistique. Je suis satisfaite du résultat global, notamment de l’équilibre entre simplicité, clarté et identité visuelle. Cependant, certains aspects techniques m’ont demandé du temps, comme la gestion des chemins entre les dossiers ou l’adaptation du site aux différents écrans. Je souhaite encore améliorer la partie Portfolio, en y ajoutant progressivement mes futurs travaux, ainsi en structurant mieux les fichiers pour faciliter la maintenance du site. Dans l’ensemble, cet exercice m’a permis de renforcer mes compétences en structuration de contenu, en logique du web et en autonomie face au code.
6. Bibliographie
EduTechWiki – Introduction à CSS
W3Schools – CSS Background
EduTechWiki – Introduction à HTML5
EduTechWiki – Tutoriel SVG avec HTML5
7. Ressources
Les photos utilisées sur ma page personnelle sont issues de mes voyages. L’avatar ainsi que la déesse Freya ont été générés par une intelligence artificielle. L'image SVG, qui apparaît sur ma page EduTechWiki a été dessinée sur la tablette. Par contre, j'ai importé le coeur depuis internet, image libre de droit. Je remercie également ma collègue Audrey pour ces précieux conseils pratiques pour comprendre comment lier les deux dossiers: page personnelle et portfolio via le Cyberduck. J'ai utilisé différents tutos vidéo, ainsi que les pages EduTechWiki et l'intelligence artificelle (ChatGPT OpenAI) pour m'aider à vulgariser les blocs de codes pour comprendre leurs effets. Cette aide m’a permis de mieux comprendre la logique du code et d’affiner la présentation visuelle de ma page personnelle.