SAE1.05 | PRODUCTION WEB

Analyse

Au fil de cette SAE, nous avons découvert les bases essentielles de VSCode ainsi que plusieurs extensions très pratiques qui enrichissent considérablement son usage. La création d’un site web à la fois statique et dynamique nous a permis d’alterner entre différents langages et de nous sentir de plus en plus à l’aise avec eux.

L’utilisation de VSCode s’est révélée intuitive, surtout grâce aux extensions qui optimisent le confort et la productivité. Nous avons également appris à utiliser FileZilla, un outil que j’ai trouvé plutôt simple à prendre en main, ainsi que la plateforme webetu pour héberger nos projets.

Côté technique, nous n’avons pas rencontré de gros obstacles, hormis quelques bugs du côté de webetu, qui étaient hors de notre contrôle. La principale difficulté a été l’utilisation de Live Share : bien que très utile pour travailler à distance, cette extension nécessite que tous les membres soient connectés simultanément, ce qui n’était pas toujours possible à cause de nos rythmes de travail différents et des nombreux problèmes de déconnexion.

Analyse

Nous avons d’abord conçu une version statique du site, avant de passer à sa version dynamique. Chaque page est équipée d’une barre de navigation pour faciliter l’exploration du contenu. Le style a été travaillé grâce à du CSS, et nous avons veillé à intégrer des balises sémantiques tout au long du développement : tableaux, listes, formulaires, ainsi que les indispensables header et footer.

Soucieuses de l’accessibilité, nous avons pris soin d’ajouter des attributs alt à toutes nos images, et d’opter pour des formats optimisés comme le .webp, afin d’améliorer les performances et l’accessibilité du site.

Je me suis d’ailleurs chargé de toute la partie graphisme du projet, à défaut de pas toujours pouvoir coder à cause des problème de connexion Live Share. J’ai réalisé un moodboard pour mieux cerné notre sujet, la Pop Culture, et ainsi définir une identité à notre site. Notamment la banniere, le logo et ses déclinaisons.

Enfin, nous avons utilisé le validateur W3C pour inspecter notre code et nous assurer qu’aucune balise ne manquait et que notre structure respectait les normes du web.

Analyse

Dans le cadre de cette SAE, nous devions développer deux pages dynamiques à partir de fichiers JSON : l’une pour les invités et l’autre pour les exposants. De mon côté, je me suis occupée de la page dédiée aux invités. Le fichier JSON que j’ai conçu contient un tableau principal composé d’objets, chacun représentant un invité avec des informations clés comme son métier ou le programme auquel il participe.

La dynamisation des pages n’a pas été de tout repos ! Heureusement, l’entraide entre camarades a été précieuse. À force d’échanges et de tests, nous avons réussi à identifier les bugs et à trouver des solutions ensemble.

Ma camarade, bien plus expérimentée que moi en développement web, a littéralement boosté notre projet grâce à ses nombreuses contributions techniques. Je pense notamment au compte à rebours en page d’accueil ou encore au carrousel dynamique – chaque détail qu’elle ajoutait me fascinait et m’inspirait.

J’ai vraiment adoré travailler en binôme avec elle sur ce projet. J’y ai appris énormément, et surtout, j’ai pris conscience de l’immensité des possibilités offertes par le code. Tellement, que j’en suis venue à remettre en question mon orientation pour la deuxième année !

Analyse

Concernant l’hébergement, nous avons respecté l’arborescence imposée pour l’URL. Ainsi, notre site est accessible à l’adresse suivante :
https://webetu.iutnc.univ-lorraine.fr/~kelsen1u/sae105-popverse/, qui regroupe à la fois les versions statique et dynamique du site. Les dossiers liés à la SAE ont également été mis en ligne grâce à FileZilla.

Côté configuration, j’ai utilisé un fichier .htaccess pour personnaliser l’affichage des erreurs : la 404 en cas de mauvaise URL, et la 403 pour empêcher le listage des fichiers. Aucune difficulté de ce côté, et nous avons pris soin de personnaliser nos pages d’erreur, bien que si c’était à refaire, je veillerais à mieux intégrer les pages d’erreur pour une navigation plus cohérente.

Dans l’ensemble, nous n’avons rencontré aucun obstacle majeur grâce au cours dédié à cette étape. Toutefois, un problème technique est survenu à la fin de la SAE : nos modifications ne se reflétaient pas immédiatement sur Webetu, bien qu’elles soient visibles en local. Après échange avec d’autres groupes, nous avons conclu qu’il s’agissait probablement d’un bug temporaire, car les changements sont apparus le lendemain.