Portfolio BUT1
Ayman MAAROUFI
Étudiant en BUT Informatique à l'Université Marie et Louis Pasteur. Ce portfolio présente une analyse détaillée de mes savoirs et savoir-faire acquis durant ma première année, illustrés par des traces concrètes de mes projets.
Projets récents
TitanGrip
Site e-commerce pour sports de combat
Site e-commerce dédié aux sports de combat, inspiré par des marques comme Venum.
Atos
Site web d'information sur l'entreprise
Site web présentant l'entreprise Atos, ses activités, son organisation et son historique.
Flask E-commerce
Application web avec Python Flask
Application e-commerce développée avec le framework Flask et une base de données SQL.
Puissance X
Jeu de plateau avec interface graphique JavaFX
SAÉ Développement IHM - Version graphique du jeu Puissance 4 avec grille personnalisable.
Mes Projets
TitanGrip - Site E-commerce
TitanGrip est un site e-commerce dédié aux sports de combat, inspiré par des marques comme Venum. Le site propose une large gamme d'équipements de boxe, MMA, et autres sports de combat, pour amateurs et professionnels.
Figure 1 : Interface de la page d'accueil du site TitanGrip
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Structure sémantique HTML5
- Mise en page responsive avec CSS
- Manipulation du DOM avec JavaScript
- Gestion des événements utilisateur
Savoir-faire associés :
- Concevoir une interface utilisateur intuitive et responsive
- Implémenter une navigation fluide entre les pages
- Structurer le contenu de manière sémantique pour l'accessibilité
- Optimiser les performances de chargement des pages
Figure 2 : Implémentation du panier d'achat avec JavaScript
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Manipulation de données avec JavaScript
- Stockage local (localStorage)
- Gestion d'Ă©tat d'une application
- Calculs dynamiques côté client
Savoir-faire associés :
- Implémenter un système de panier persistant
- GĂ©rer les mises Ă jour dynamiques de l'interface utilisateur
- Calculer des totaux et appliquer des règles métier
- Valider les données côté client
Commentaire d'analyse :
La Figure 2 illustre l'implémentation du panier d'achat que j'ai développé pour le site TitanGrip. Cette fonctionnalité représente un aspect critique d'un site e-commerce et démontre ma maîtrise de plusieurs concepts fondamentaux en développement web front-end.
Le panier utilise le localStorage pour persister les données entre les sessions, un concept essentiel pour améliorer l'expérience utilisateur. Cette approche permet aux utilisateurs de retrouver leur panier même après avoir fermé leur navigateur, ce qui est une pratique standard dans le développement e-commerce moderne.
J'ai développé un système de mise à jour dynamique qui recalcule instantanément les totaux lorsque l'utilisateur modifie les quantités. Cette fonctionnalité utilise des écouteurs d'événements et démontre ma capacité à créer des interfaces réactives.
Atos - Site Web Informatif
Site web développé en HTML, CSS et JavaScript dans le cadre de la SAÉ 05-06, fournissant des informations sur l'entreprise Atos, ses activités, son organisation et son historique.
Figure 3 : Utilisation de Git pour le versioning du projet Atos
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Principes et utilité du versioning
- Versioning avec Git
- Collaboration en équipe sur un dépôt partagé
- Gestion des branches et des conflits
Savoir-faire associés :
- Utiliser les opérations Git basiques dans un développement en équipe
- Créer et gérer des branches de développement
- RĂ©soudre des conflits de fusion
- Utiliser les logs Git pour suivre l'Ă©volution du projet
Commentaire d'analyse :
La Figure 3 est une capture d'écran de l'interface Git utilisée pour le versioning du projet Atos. Cette trace illustre ma compréhension et mon application des principes fondamentaux du versioning dans un contexte de développement collaboratif.
Le versioning est un concept fondamental en développement logiciel qui permet de garder une trace des modifications successives sur les fichiers d'un projet. Dans le cadre du projet Atos, nous avons utilisé Git comme système de versioning, car c'est devenu le standard de l'industrie.
L'utilisation de Git dans ce projet m'a permis de développer des compétences relevant des domaines 5 (Conduire un projet) et 6 (Travailler dans une équipe informatique). Ces compétences sont directement transférables dans un contexte professionnel.
Figure 4 : Validation W3C et Ă©co-conception du site Atos
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Standards du web (W3C)
- Principes d'Ă©co-conception web
- Validation et conformité du code
- Accessibilité web
Savoir-faire associés :
- Valider la conformité d'une page web aux standards
- Optimiser les performances et l'impact environnemental d'un site
- Corriger les erreurs de validation
- Appliquer les bonnes pratiques d'accessibilité
Commentaire d'analyse :
La Figure 4 présente les résultats de validation W3C et d'éco-conception pour le site Atos que j'ai développé avec mon équipe. Cette trace illustre ma compréhension de l'importance des standards web et de l'impact environnemental du développement web.
La validation W3C est un processus fondamental pour s'assurer que le code HTML et CSS respecte les standards internationaux du web. Ces standards garantissent la compatibilité entre navigateurs, l'accessibilité et la pérennité du code.
Flask E-commerce - Application Web
Application e-commerce développée avec le framework Flask et une base de données SQL, permettant la gestion de produits, utilisateurs et commandes.
Figure 5 : Architecture MVC de l'application Flask
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Paradigme MVC (Modèle-Vue-Contrôleur)
- Framework Flask et son écosystème
- Routage d'une application web
- Templates et moteurs de templates
Savoir-faire associés :
- Structurer une application selon le pattern MVC
- Implémenter des routes et contrôleurs
- Créer des modèles de données
- DĂ©velopper des templates pour l'affichage
Commentaire d'analyse :
La Figure 5 illustre l'architecture MVC (Modèle-Vue-Contrôleur) que j'ai implémentée dans mon application Flask E-commerce. Cette trace démontre ma compréhension et mon application d'un paradigme fondamental en développement d'applications web.
Le paradigme MVC est un concept architectural essentiel qui permet de structurer une application en séparant les responsabilités entre trois composants principaux : le Modèle (données), la Vue (interface utilisateur) et le Contrôleur (logique métier).
Figure 6 : Modèle de données et requêtes SQL de l'application
Analyse des savoirs et savoir-faire
Savoirs identifiés :
- Modélisation de données relationnelles
- Langage SQL et requĂŞtes complexes
- ORM (Object-Relational Mapping)
- Normalisation de bases de données
Savoir-faire associés :
- Concevoir un schéma de base de données normalisé
- Implémenter des relations entre tables
- Optimiser les requĂŞtes SQL
- Utiliser un ORM pour abstraire les opérations de base de données
Commentaire d'analyse :
La Figure 6 présente le modèle de données relationnel et des exemples de requêtes SQL que j'ai développés pour l'application Flask E-commerce. Cette trace illustre ma compréhension des concepts fondamentaux de gestion de données.
La modélisation de données relationnelles est un savoir fondamental en informatique qui permet de structurer l'information de manière cohérente et efficace.
SAÉ Puissance X - Développement IHM
Projet en cours de développement - SAÉ (Situation d'Apprentissage et d'Évaluation) portant sur le développement d'une interface graphique pour un jeu de plateau. Version modifiée du Puissance 4 avec grille personnalisable et interface JavaFX.
Aperçu du projet SAÉ Développement IHM
Spécifications techniques et fonctionnelles
Fonctionnalités implémentées :
- Interface graphique JavaFX avec menu
- Grille personnalisable (5-10 colonnes/lignes)
- Choix du nombre de jetons Ă aligner (3-N)
- Gestion des modes de jeu (2 humains, 2 IA, mixte)
- Interactions souris pour sélection/déplacement
- Animations de chute des jetons
- DĂ©tection automatique des alignements gagnants
Technologies et méthodologie :
- Java avec framework JavaFX pour l'interface
- Framework Boardifier pour la gestion du plateau
- Architecture MVC (Modèle-Vue-Contrôleur)
- Tests unitaires avec couverture de code
- Gestion d'événements et animations
- Conception orientée objet avancée
Description du projet :
Cette SAÉ (Situation d'Apprentissage et d'Évaluation) porte sur le développement d'une interface graphique pour un jeu de plateau. Le projet consiste à créer une version graphique du jeu "Puissance X", une variante personnalisable du célèbre Puissance 4.
Le défi principal réside dans l'adaptation d'une version console existante vers une interface graphique complète utilisant JavaFX et le framework Boardifier. Cette transition implique la refactorisation de l'architecture MVC pour intégrer la gestion des événements souris, les animations visuelles et une interface utilisateur intuitive.
Les aspects techniques couvrent la gestion des interactions utilisateur (sélection de colonnes par clic souris), l'implémentation d'animations fluides pour la chute des jetons, et la création d'une interface configurable permettant de personnaliser la taille du plateau et les règles de victoire.
Ce projet me permet d'approfondir mes compétences en développement d'interfaces graphiques, en architecture logicielle et en programmation orientée objet avancée, tout en appliquant une méthodologie rigoureuse incluant tests unitaires et conception modulaire.
🎯 Objectif : Livraison prévue fin mars 2024 avec interface complète et fonctionnalités avancées.
Règles du jeu et spécifications
Attendus techniques et méthodologiques
Interface graphique :
- Menu principal (nouvelle partie, quitter)
- Boîte de dialogue pour configuration de partie
- SĂ©lection par clic souris avec feedback visuel
- Animation de chute des jetons
- Affichage du résultat en fin de partie
Architecture et tests :
- Séparation Modèle-Vue-Contrôleur stricte
- Réutilisation du modèle de la version console
- Tests unitaires avec couverture maximale
- Gestion d'événements souris et clavier
- Code modulaire et maintenable
DĂ©fis techniques :
Le principal défi de ce projet réside dans la transition d'une interface console vers une interface graphique tout en conservant la logique métier existante. Cela nécessite une compréhension approfondie de l'architecture MVC et de la séparation des responsabilités.
L'utilisation du framework Boardifier simplifie la gestion du plateau de jeu et des animations, mais demande une adaptation de la logique de contrôle pour gérer les interactions souris plutôt que les saisies clavier.
Les tests unitaires constituent un aspect crucial, particulièrement pour la partie contrôle qui change radicalement entre les deux versions. Il faut tester la gestion des événements souris, la validation des coups et les transitions d'état du jeu.
Compétences
Cette section présente une synthèse des savoirs et savoir-faire que j'ai développés au cours de ma première année de BUT Informatique, organisés selon les six domaines de compétence du programme.
Compétence 1
Réaliser un développement d'application
Savoirs acquis :
- Paradigme MVC et architecture logicielle
- Programmation orientée objet (Java, Python)
- DĂ©veloppement web front-end (HTML, CSS, JavaScript)
- Frameworks web (Flask)
- Manipulation du DOM et gestion d'événements
Savoir-faire développés :
- Structurer une application selon le pattern MVC
- Concevoir des interfaces utilisateur responsives
- Implémenter des fonctionnalités front-end dynamiques
- DĂ©velopper des API et services web
- Créer des applications web complètes
Niveau d'acquisition :
Bon niveau - Capable de développer des applications web complètes avec une architecture structurée
Compétence 2
Optimiser des applications informatiques
Savoirs acquis :
- Optimisation de requĂŞtes SQL
- Techniques d'optimisation front-end (minification, compression)
- Principes d'Ă©co-conception web
- Analyse de performance d'applications
- Structures de données efficientes
Savoir-faire développés :
- Optimiser les performances d'un site web
- Améliorer l'efficacité des requêtes de base de données
- Appliquer des techniques d'Ă©co-conception
- Identifier et résoudre des goulots d'étranglement
- Mesurer l'impact des optimisations
Niveau d'acquisition :
Niveau intermédiaire - Capable d'identifier et d'appliquer des optimisations basiques
Compétence 3
Administrer des systèmes informatiques communicants complexes
Savoirs acquis :
- Principes des réseaux informatiques
- Protocoles de communication web
- Bases de l'administration système
- Sécurité des applications web
Savoir-faire développés :
- Configurer un environnement de développement
- Comprendre les interactions client-serveur
- Appliquer des principes de sécurité basiques
Niveau d'acquisition :
Niveau basique - Connaissances théoriques et applications limitées
Compétence 4
Gérer des données de l'information
Savoirs acquis :
- Modélisation de données relationnelles
- Langage SQL et requĂŞtes complexes
- ORM (Object-Relational Mapping)
- Normalisation de bases de données
- Gestion de données côté client (localStorage)
Savoir-faire développés :
- Concevoir un schéma de base de données normalisé
- Implémenter des relations entre tables
- Optimiser les requĂŞtes SQL
- Utiliser un ORM pour abstraire les opérations de base de données
- Gérer la persistance des données utilisateur
Niveau d'acquisition :
Bon niveau - Capable de concevoir et d'implémenter des modèles de données efficaces
Compétence 5
Conduire un projet
Savoirs acquis :
- Principes et utilité du versioning
- Versioning avec Git
- MĂ©thodologie de gestion de projet
- Planification et suivi de tâches
Savoir-faire développés :
- Utiliser les opérations Git basiques dans un développement en équipe
- Créer et gérer des branches de développement
- Planifier et répartir les tâches d'un projet
- Documenter un projet informatique
Niveau d'acquisition :
Niveau intermédiaire - Expérience pratique dans des projets académiques
Compétence 6
Travailler dans une Ă©quipe informatique
Savoirs acquis :
- Collaboration via Git et dépôts partagés
- Gestion des conflits et des fusions
- Communication technique en Ă©quipe
- Répartition des tâches et responsabilités
Savoir-faire développés :
- Collaborer efficacement sur un projet informatique
- RĂ©soudre des conflits de fusion de code
- Communiquer sur des aspects techniques
- Coordonner le développement avec d'autres développeurs
Niveau d'acquisition :
Niveau basique - Première expérience de travail en équipe sur des projets informatiques
Synthèse des compétences
Au terme de ma première année de BUT Informatique, j'ai développé un ensemble cohérent de savoirs et savoir-faire couvrant les six domaines de compétence du programme. Mes points forts se situent dans le développement d'applications (compétence 1) et la gestion de données (compétence 4), où j'ai acquis une expérience pratique significative.
Les compétences en optimisation (compétence 2) et en gestion de projet (compétence 5) sont en cours de développement, avec une base solide établie qui nécessite encore de l'approfondissement. Les domaines d'administration système (compétence 3) et de travail en équipe (compétence 6) représentent mes axes d'amélioration prioritaires pour la suite de ma formation.
Cette première année m'a permis d'acquérir les fondamentaux nécessaires pour aborder les années suivantes avec confiance et de développer une vision globale des enjeux du développement informatique moderne.
Ă€ propos
Informations personnelles
Nom complet
MAAROUFI Ayman
Date de naissance
08/06/2006
Numéro étudiant
*********
Code INE
**********
Formation
BUT Informatique - 1ère année
Université Marie et Louis Pasteur
2024-2025
Formation en informatique couvrant les aspects théoriques et pratiques du développement logiciel, de la gestion de données, de l'administration système et de la gestion de projet.
Technologies maîtrisées
Langages de programmation
Frameworks et outils
Objectifs et perspectives
Ce portfolio présente une analyse détaillée de mes apprentissages durant ma première année de BUT Informatique. Il illustre ma progression dans les six domaines de compétence du programme et démontre ma capacité à appliquer les concepts théoriques dans des projets concrets.
Pour les années à venir, je souhaite approfondir mes compétences en développement d'applications complexes, explorer les technologies émergentes comme l'intelligence artificielle et le cloud computing, et développer mes compétences en gestion de projet et en travail collaboratif.
Mon objectif professionnel est de devenir un développeur full-stack capable de concevoir et d'implémenter des solutions informatiques complètes, en alliant expertise technique et vision stratégique.
Commentaire d'analyse :
La Figure 1 présente l'interface de la page d'accueil du site TitanGrip que j'ai développée dans le cadre d'un projet de groupe. En tant que référent du projet et responsable de cette page, j'ai mis en œuvre plusieurs savoirs fondamentaux du développement web.
La structure HTML5 utilisée démontre ma compréhension de l'importance d'un balisage sémantique pour l'accessibilité et le référencement. J'ai utilisé des balises comme
<header>,<nav>,<main>et<footer>pour organiser clairement le contenu. Cette approche structurée est essentielle dans le développement web moderne et constitue un fondamental que j'ai maîtrisé.Pour la mise en page, j'ai implémenté un design responsive utilisant CSS Flexbox et Grid, permettant au site de s'adapter à différentes tailles d'écran. Cette compétence est cruciale dans un contexte où la navigation mobile représente plus de 50% du trafic web. J'ai également optimisé les performances en minimisant les requêtes HTTP et en utilisant des formats d'image appropriés.
Le JavaScript a été utilisé pour améliorer l'expérience utilisateur, notamment pour le carrousel de produits vedettes visible sur la capture d'écran et pour la validation des formulaires. J'ai implémenté ces fonctionnalités en utilisant des événements comme
click,submitetDOMContentLoaded, démontrant ma capacité à créer des interactions dynamiques.Ce projet m'a permis de développer des savoir-faire essentiels comme la collaboration via Git, la résolution de problèmes de compatibilité entre navigateurs, et l'optimisation des performances. Ces compétences sont directement applicables dans un contexte professionnel et constituent une base solide pour ma progression en développement web.