1 Liens
Le dispositif se compose des éléments suivants :
2 Objectifs
Ces trois pages ont pour objectif de partager différentes informations sur moi : mes compétences, mes intérêts, mon parcours académique et professionnel, ainsi que mes travaux. Elles sont principalement destinées à des personnes externes comme des futurs employeurs, des maîtres de stage ou des collègues. Elles servent aussi de moyen de contact. La page EduTechWiki et mon profil LinkedIn sont bien détaillés en termes d’informations, car ce sont les deux premiers résultats qui apparaissent lorsqu’on fait une recherche avec mon nom. Il est donc important que ces pages reflètent fidèlement qui je suis. La Homepage et le Portfolio sont moins visibles publiquement, mais seront développées et utilisées comme références dans un dossier ou une candidature.
3 Design
Pour la Homepage et le Portfolio, j’ai voulu créer une première version simple et lisible. J’ai utilisé des palettes de couleurs qui me plaisaient et centrer les éléments, sans chercher à faire un design trop complexe. J’ai mis dans mon code des éléments que je savais utilisés correctement , à savoir des paragraphes, des listes à puces et des blocs , afin que les informations soient bien visibles et faciles à parcourir. Pour la page EduTechWiki, j’ai suivi les règles d’édition du Wiki afin de structurer correctement les contenus et hiérarchiser les informations. Cela permet une lecture et navigation fluide.
4 Production
Une fois les fichiers créés, je les ai publiés sur le serveur TECFA, puis modifiés progressivement. J’ai commencé par écrire le code HTML et le code wiki en respectant les consignes de base de l’exercice. Une fois ces éléments validés, j’ai ajouté les éléments liés aux bonus. Avant d’écrire le code CSS, j’ai dessiné sur papier le rendu visuel que je souhaitais obtenir. Cela m’a permis de mieux anticiper l’organisation des éléments. J’ai ensuite codé le CSS pour la Homepage et le Portfolio. Pour visualiser le rendu, j’ai utilisé GoLive et Codepen, ce qui m’a permis de vérifier que le résultat correspondait à mes attentes.J’ai vérifié les codes HTML de ma page personnelle et du portfolio sur validator.w3.org et ils ne présentaient pas d’erreurs.
5 Auto-évaluation
Je suis plutôt satisfaite du résultat. Je voulais créer une page simple mais correcte sur le plan technique, et je pense avoir atteint cet objectif. Les pages sont fonctionnelles et claires, mais j’aimerais les améliorer, notamment au niveau du style et de l’interactivité. J’aimerais qu’elles me ressemblent davantage, surtout ma Homepage, en travaillant sur l’identité visuelle. Concernant le Portfolio, je trouve qu’il n’est pas encore assez facile à naviguer. On ne voit pas tout le contenu d’un coup, et plus j’ajouterai de travaux, plus la page risque d’être encombrée. Pour la suite, je souhaite organiser cette page avec des sous-pages dédiées à chaque cours, afin de mieux structurer les informations et faciliter la lecture.
6 Bibliographie
- Coursera & Université de Genève. (s.d.). Programming Foundations with JavaScript, HTML and CSS – Duke University. https://www.coursera.org/programs/universite-de-geneve-on-coursera-lhb4n/learn/duke-programming-web
- EduTechWiki. (s.d.). Introduction à CSS. Université de Genève. https://edutechwiki.unige.ch/fr/Introduction_%C3%A0_CSS
- EduTechWiki. (s.d.). SVG. Université de Genève. https://edutechwiki.unige.ch/fr/SVG
- EduTechWiki. (s.d.). Tutoriel SVG avec HTML5. Université de Genève. https://edutechwiki.unige.ch/fr/Tutoriel_SVG_avec_HTML5
- Fritz, M. A. (s.d.). Introduction à HTML5. https://mafritz.ch/slides/fr/intro-html5/
- Fritz, M. A. (s.d.). Introduction à CSS. https://mafritz.ch/slides/fr/intro-css/
7 Ressources
J’ai utilisé une image personnelle sur ma Homepage et sur mon profil EduTechWiki. Je l’ai modifiée avec l’application ToonAI pour lui donner un effet cartoon, puis retravaillée avec le logiciel Inkscape.