Projet transversal Web
Date de début : 18-12-2023
Date de fin : 28-01-2024
Compétences associées
Dans ce projet, notre objectif était de développer un gestionnaire de fichiers accessible via un site web. L'idée principale était de créer une plateforme où les utilisateurs pourraient se connecter et envoyer des fichiers de manière simple et efficace. Ce projet a impliqué l’utilisation de différentes technologies, notamment HTML, CSS, PHP et des techniques de responsive design.
Développement du site web :
Création de l'interface utilisateur (HTML et CSS) :
Nous avons commencé par créer l'interface du site en utilisant HTML pour la structure et CSS pour le design. Le site devait être à la fois intuitif et esthétique, afin de faciliter l'expérience utilisateur. Nous avons veillé à organiser les sections de manière claire et à rendre le processus d’envoi de fichiers aussi simple que possible.
Connexion et gestion des utilisateurs (PHP) :
Le site devait permettre aux utilisateurs de se connecter avant de pouvoir envoyer des fichiers. Nous avons utilisé PHP pour créer les pages de connexion et d'inscription, gérer les sessions des utilisateurs et sécuriser l'accès aux fonctionnalités. La gestion des utilisateurs a été un élément clé du projet, et nous avons veillé à intégrer des fonctionnalités telles que :
Vérification de l'identité de l'utilisateur : Nous avons mis en place un système de connexion sécurisée (avec des mots de passe hachés) et un processus d'inscription.
Gestion des sessions : Nous avons utilisé les sessions PHP pour garder une trace des utilisateurs connectés et garantir une expérience personnalisée.
Téléchargement de fichiers : Nous avons créé un mécanisme permettant aux utilisateurs de télécharger des fichiers sur le serveur en toute sécurité, en vérifiant le type et la taille des fichiers avant l'envoi.
Responsiveness du site :
Comme le site devait être responsive, nous avons utilisé des techniques de responsive design pour que le site soit accessible sur tous les types d'appareils, que ce soit un ordinateur de bureau, une tablette ou un smartphone. Nous avons notamment utilisé :
Les media queries pour adapter la mise en page selon la taille de l'écran.
Flexbox et Grilles CSS pour organiser les éléments de manière flexible et garantir que le site s'adapte bien à différents formats.
Pour ce projet, nous avons dû travailler en groupe de 4 personnes. Afin d'assurer une bonne organisation et une gestion efficace des tâches, nous avons mis en place plusieurs méthodes de travail collaboratif :
Trello pour la répartition des tâches :
Nous avons choisi d’utiliser Trello pour la répartition des tâches, un outil qui nous a permis de suivre l'avancement du projet de manière simple et claire. Nous nous sommes mis d'accord sur l'utilisation de cet outil en raison de sa simplicité d'utilisation et du fait qu'il est gratuit. Avec Trello, chaque membre de l'équipe pouvait facilement voir les tâches attribuées, les échéances et l'état d'avancement des différentes parties du projet. Cela a facilité notre gestion du temps et assuré que chaque tâche soit bien attribuée et suivie.
Extension VS Code pour la collaboration en temps réel :
Pour faciliter la collaboration directe sur le code, nous avons utilisé une extension de VS Code qui permet à plusieurs utilisateurs de travailler simultanément sur le même fichier. Cette extension génère un lien unique, que nous pouvions partager avec les autres membres de l'équipe. Dès qu'un membre avait le lien, il pouvait rejoindre la session de travail et collaborer en temps réel. Cette fonctionnalité a grandement facilité la coécriture de code, car elle permettait à tous de travailler en parallèle, tout en ayant une vue synchronisée du code.
GitHub pour la gestion des versions et des sauvegardes :
Enfin, nous avons utilisé GitHub pour la gestion des versions du code et pour la sauvegarde de notre travail. GitHub nous a permis de suivre l'historique de toutes les modifications, de créer des branches pour tester de nouvelles fonctionnalités sans altérer le code principal, et de fusionner les changements de manière sécurisée. Cela a aussi facilité la gestion des conflits en cas de modifications simultanées sur les mêmes fichiers.
Pour répondre aux besoins de l'entreprise, nous avons mis en place un document Word afin de recenser toutes nos avancées tout au long du projet. Ce document a joué un rôle clé dans le suivi de l'évolution du projet et a permis de garder une trace de toutes les étapes réalisées.
Recensement des avancées :
Dans ce document, nous avons détaillé l'ensemble des avancées du projet, y compris les fonctionnalités mises en place, les problèmes rencontrés, et les solutions apportées. Cela a permis à l'équipe de rester organisée et de s'assurer que toutes les tâches étaient suivies et complètes.
Prise en main du projet par l'entreprise :
Pour faciliter la prise en main du projet par l'entreprise, nous avons détaillé tous les besoins nécessaires pour que l'entreprise puisse comprendre et utiliser notre solution. Ce document expliquait les fonctionnalités du site web, les étapes à suivre pour l'utiliser efficacement, ainsi que les configurations spécifiques ou prérequis nécessaires. Cela permettait à l'entreprise de comprendre rapidement comment exploiter notre projet.
Documentation technique en cas de problème :
De plus, afin de prévoir d'éventuels problèmes et de faciliter la résolution de ceux-ci, nous avons rédigé une documentation technique détaillant le fonctionnement du code. Cette documentation expliquait en profondeur le but et le fonctionnement de chaque section du code, ce qui permettait à l'entreprise ou à toute autre personne de comprendre les choix techniques effectués et de résoudre les problèmes plus facilement en cas de besoin.
Nous avons du créer une boîte de rendu permettant de télécharger un fichier, un concept qui m'a appris à intégrer la possibilité de soumettre des fichiers via un site web. En plus de l’aspect technique, ce projet m’a permis de comprendre davantage l’importance de rendre un site responsive.
J’ai appris à appliquer les principes de responsive design tout en intégrant une fonctionnalité de téléchargement. Par exemple, j’ai utilisé des media queries pour ajuster la mise en page en fonction de la taille de l'écran tout en veillant à ce que la boîte de rendu et le formulaire de téléchargement soient faciles à utiliser sur mobile, tablette et bureau.
Cela m’a aussi donné un aperçu précieux de la façon dont un site doit être pensé pour être flexible, non seulement pour s'adapter à des tailles d'écran différentes, mais aussi pour offrir une bonne expérience utilisateur, même lorsqu'il s'agit d'interactions spécifiques comme le téléchargement de fichiers. Ce projet m’a permis de renforcer mes compétences techniques tout en mettant en lumière l'importance d’une bonne expérience utilisateur.
