Rapport exercice 1 de STIC I

Document d’accompagnement des dispositifs :LinkedIn, Homepage TECFA, Page d’utilisateur Edutech Wiki et Portfolio STIC

Auteur·rice

Job Stephane Nyemeck

Date de publication

27 octobre 2025

1 Liens

Le dispositif se compose des éléments suivants :

2 Objectifs

L’objectif de ce premier exercice était de créer des pages web et d’actualiser mon profil sur les réseaux sociaux. A travers ces pages, je construis peu à peu mon identité numérique et je partage mon parcours et mes projets avec les étudiants, les enseignants ou de simples curieux.

Sur EduTechWiki, je me présente comme membre de la communauté TECFA. C’est un espace où je partage mon cheminement, mes centres d’intérêt et mes contributions sur EdutechWiki.

Ma Homepage TECFA agit comme une carte de visite numérique : on y retrouve mes profils sociaux, mes contacts, mes réalisations et un aperçu de mes expériences professionnelles et académiques.

Le Portfolio STIC me sert de vitrine pour partager mes productions et rendre compte de ma progression au fil de l’année.

Enfin, sur LinkedIn, je tisse des liens avec le monde professionnel. J’élargis mon réseau et je tiens mes abonnés informés de mes avancées académiques et de mes projets.

3 Design

Au moment de concevoir ma page personnelle, j’ai surtout cherché à comprendre comment les langages HTML5 et CSS fonctionnent ensemble pour structurer et styliser une page web. N’étant qu’au début de mon apprentissage en programmation, j’ai beaucoup observé et reproduit les exemples vus en cours et dans les travaux d’autres volées, avant de les adapter à mon propre style. J’ai donc opté pour un design simple, avec une mise en page claire (basique) et quelques éléments visuels pour rendre la page plus agréable. J’ai expérimenté l’ajout d’une image en arrière-plan et de quelques effets au survol des liens pour donner une impression d’interactivité. J’ai également pris le temps de comprendre l’utilité des balises structurantes comme header, main et footer, ainsi que des conteneurs div pour organiser le contenu. Ce travail m’a permis de mieux saisir la logique du code et de prendre confiance dans la création de pages web.

4 Production

Pour la création de ma Homepage TECFA et de mon Portfolio, j’ai travaillé avec Visual Studio Code, en m’appuyant sur les supports du cours HTML5 et CSS disponibles sur EdutechWiki. J’ai commencé par rédiger le code de base en respectant les consignes, tout en essayant d’ajouter quelques éléments issus de la section bonus. Au fur et à mesure, j’ai stylisé la page en observant les exemples présentés dans le cours.

La compréhension du processus de stylisation avec CSS m’a d’abord paru complexe. J’ai tenté d’intégrer le code CSS directement dans le fichier HTML avant de réaliser qu’il était plus efficace de créer une feuille de style externe reliée grâce à la balise link dans l’en-tête. Les tutoriels W3.CSS m’ont été très utiles, car ils me permettaient de visualiser immédiatement les effets des différentes balises. Mon objectif étant avant tout de comprendre le fonctionnement du code, je me suis volontairement limité à des balises simples et à une mise en forme sobre.

J’ai également eu recours à ChatGPT pour obtenir des explications détaillées sur certaines balises, notamment lors de l’insertion de boutons interactifs dans le pied de page ou de l’image de fond. L’exercice 2 sur la Flashcard m’a également beaucoup aidé à mieux comprendre la structuration d’une page avec les balises header, main et footer. Les réalisations d’anciennes volées, en particulier celles d’Emma Schenkenberg et de Lyvia Streich, m’ont aussi servi de référence.

Enfin, pour la publication sur le serveur TECFA, j’ai pu compter sur le soutien de mes camarades Chloé Savricouty et Pricillya Antolines.

En ce qui concerne ma Homepage EdutechWiki, j’ai principalement suivi les consignes en intégrant des sections structurées avec des titres, sous-titres et des liens internes. Ma principale difficulté a concerné l’intégration d’une image SVG. J’ai d’abord tenté d’en créer une moi-même avec Inkscape, mais le rendu n’était pas satisfaisant : les proportions s’intégraient mal à la mise en page de ma page EdutechWiki. J’ai alors sollicité l’aide de Priscillya, plus familière avec les logiciels de graphisme. Ensemble, nous avons conçu une image simple (SVG) me représentant à l’aide du logiciel Affinity Designer 2, que j’ai ensuite intégrée dans le code source de ma page.

5 Auto-évaluation

Dans l’ensemble, je suis satisfait du travail réalisé et des compétences que j’ai pu acquérir au fil des exercices. Ce projet m’a permis de comprendre les bases du fonctionnement du web, notamment la relation entre les instructions, le serveur, les protocoles HTTP et le langage HTML. Même si mes pages restent encore simples, sans beaucoup d’interactivité ni de feuilles de style avancées, je suis heureux d’avoir réussi à en saisir la logique et la structure de base.

J’ai particulièrement apprécié le fait de pouvoir écrire directement le code et d’observer ses effets concrets sur le rendu visuel. Cette expérience m’a permis de mieux comprendre la manière dont les différents éléments (HTML, CSS, fichiers et liens) interagissent pour construire une page web fonctionnelle.

Je reconnais toutefois qu’il me reste beaucoup à apprendre, notamment sur la stylisation avancée avec CSS et la création d’éléments interactifs. Je prévois de continuer à m’exercer et à enrichir mes pages progressivement, en m’appuyant sur les tutoriels, les exemples du cours et les conseils de mes pairs.

6 Bibliographie

7 Ressources

Lien de l’image SVG de ma page EdutechWiki Stephane SVG