Objectif

Ces pages ont pour vocation de constituer une empreinte numérique sur le web à travers la création d’un site regroupant les différents travaux réalisés au cours du master. La page wiki, quant à elle, permet de partager des connaissances et d’établir des liens entre les apprentissages dans un cadre collaboratif. Je m’inscris également dans une démarche à long terme, en envisageant d’alimenter ma page personnelle par une section dédiée à des tutoriels vidéo, détaillant pas à pas les exercices du cours de STIC, afin d’accompagner les étudiants des prochaines promotions. En ce qui concerne la volée actuelle, j’ai conçu une page portfolio intégrant des cases cliquables pour chaque cours. J’ai mis ce code à disposition afin que les autres étudiants puissent s’en inspirer pour structurer leur propre site. Il s’agit donc d’une initiative visant à soutenir les étudiants, tant actuels que futurs.

Design

J’ai suivi une formation de 24 heures en HTML et CSS sur YouTube, dans le but de concevoir des pages Web esthétiques, motivé par mon intérêt pour le design graphique. J’ai opté pour un style de design animé et décontracté, tout en expérimentant également des mises en page plus formelles, inspirées de sites professionnels tels que ceux de bureaux d’ingénierie. La difficulté principale rencontrée réside dans le positionnement précis des éléments sur la page. J’éprouve encore des difficultés à placer certains blocs exactement à l’endroit souhaité, ce qui me fait perdre beaucoup de temps. Cette contrainte technique m’amène parfois à négliger les principes d’ergonomie acquis durant mon cursus de bachelor. Nous sommes encore dans la P1, donc je n'ai pas vraiment pris en compte l'expérience utilisateur, j’étais plus concentré sur le rendu visuel général, comme le fait de faire en sorte que mon site soit interactif (images, textes, liens, etc.) ou encore qu'il soit responsive. Mais avec le temps, je vais améliorer le site avec une visée pédagogique et ergonomique.

Production

J’ai conçu un total de 5 pages : une page d’accueil, une page de présentation, une page portfolio, une page template de mon code afin que les étudiants puissent l'utiliser, ainsi que la présente page de rapport. Le processus de création de ces pages est relativement simple, tant sur le plan de la structure que de la mise en forme et du contenu. La seule difficulté notable réside encore, pour moi, dans le positionnement précis des éléments sur la page, qui demeure un point technique complexe. Je tiens à souligner que cette démarche ne constitue pas une finalité. J’ai l’intention de poursuivre cette dynamique en développant un plus grand nombre de pages, avec des styles et des designs variés, afin d’élargir mes compétences et d’explorer davantage les possibilités offertes par le développement Web.

Auto-évaluation

Je suis particulièrement satisfait du rendu visuel de mes pages, dans lesquelles j’ai investi beaucoup de temps et d’efforts. Étant passionné par l’esthétique et le design, cette dimension créative me tient à cœur. Par ailleurs, je pratique le montage vidéo en tant que loisir, ce qui alimente encore davantage mon intérêt pour la création visuelle. Comme mentionné précédemment, la création des blocs (ou box) ne présente pas de réelle difficulté pour moi ; en revanche, leur positionnement à l’aide de valeurs dites « souples » (telles que les unités vh, les pourcentages ou em) reste une étape laborieuse, que je trouve peu agréable. C’est, à ce jour, l’aspect du travail que j’apprécie le moins. Néanmoins, je m’efforce de continuer à m’exercer régulièrement afin de consolider les compétences acquises. J’ai en effet beaucoup appris au cours de ce projet, et je suis conscient que sans pratique, une partie de ces connaissances pourrait s’estomper. À l’avenir, je souhaite approfondir mes compétences en conception de pages Web. Ma priorité est de devenir plus rapide et plus précis dans mes réalisations, tout en maîtrisant parfaitement l’utilisation des unités souples pour un design adaptatif et ergonomique.

Bibliographie et sources

J’ai utilisé ChatGPT afin de convertir les pixels et les valeurs souples comme les em, vh, etc., et aussi pour rendre mon code plus simple à lire. Je lui ai demandé de réorganiser mon code, de mettre des commentaires à chaque étape et d’enlever les sauts de ligne inutiles (afin que le code soit plus lisible pour moi et pour vous). ChatGPT m’a aussi aidé à repérer les erreurs dans mon code. Par exemple, quand je travaillais pendant des heures sur mes pages, il m’arrivait d’oublier de fermer certaines balises. ChatGPT me montrait alors où j’avais fait des erreurs. J’ai également utilisé ChatGPT pour obtenir des suggestions : c’est-à-dire qu’après avoir terminé mes pages, je lui demandais comment je pouvais les améliorer. Par exemple, il me répondait que je pouvais ajouter des animations, etc. J’ai aussi utilisé ChatGPT pour apprendre des formules : par exemple, je lui demandais comment créer des boîtes interactives, et ChatGPT m’expliquait qu’en CSS, il fallait utiliser la pseudo-classe :hover. Mais je n’ai pas utilisé ChatGPT pour générer du code ou faire les choses à ma place.

Pixabay

Les backgrounds animés et les musiques sont tous tirés de ce site, sans copyright.

Flaticon

Tous les icônes sont tirés de ce site, également sans copyright.

HTML et CSS Course from ZERO (Complete)

Voici la formation de 24h que j'ai suivie afin de pouvoir créer mes pages. J'ai également suivi d'autres tutoriels sur YouTube, beaucoup plus courts, pour apprendre comment animer un texte, par exemple, ou ajouter une musique.