Compétence 6

Travailler dans une équipe informatique

Élément Contenu détaillé
SAÉ concernée S1.06 – Découverte de l’environnement éco & écolo
Problématique : mettre en œuvre les notions HTML5/CSS3 vues en cours (structuration, styles, grilles/flexbox, validateur W3C) pour concevoir et déployer un mini-site web accessible en ligne.
Sujet étudié Création d’une page d’accueil en HTML5 sémantique, application de styles CSS3 (fonctions avancées, grid ou flex), intégration d’images, liens internes/externes/ancres, validation W3C, packaging en archive et déploiement sur GitLab Pages.
Livrables remis 1. Maquette Figma du site
2. Archive ZIP du site (index.html + CSS + images) validé W3C
3. URL de déploiement GitLab Pages
Équipe Groupe de 2 : Ahmed Errebache & Adam Choujaa.
Rôle personnel (Ahmed) • Conception de la charte graphique et prototype Figma.
• Structuration HTML5 sémantique et rédaction du contenu.
• Stylisation CSS3 (grid, flexbox, animations légères).
• Validation W3C, packaging ZIP et déploiement sur GitLab Pages.
Regard critique Point fort : site ergonomique et code HTML/CSS conforme aux standards W3C.

Limite : version mobile peu optimisée (media queries à renforcer).

2. Apprentissages critiques (AC) mobilisés
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Mobilisé : Oui   Niveau auto-évalué : Maîtrise

Commentaire :
J’ai mis en place une structure HTML5 sémantique et appliqué des grilles CSS3 avec flexbox pour S1.06, validant chaque page via l’outil W3C sans erreur.

Mobilisé : Oui   Niveau auto-évalué : Maîtrise

Commentaire :
J’ai conçu une maquette interactive sous Figma, définissant l’arborescence et les styles avant le codage, facilitant la validation client pour S1.06.

Mobilisé : Oui   Niveau auto-évalué : En progrès

Commentaire :
Pour S2.06, j’ai piloté le suivi quotidien sous Trello et analysé l’écart entre planning théorique et réalisé, mais je dois encore affiner la granularité des tâches.

Mobilisé : Partiellement   Niveau auto-évalué : En progrès

Commentaire :
J’ai corrigé le mini-site après retours du validateur W3C et suggestions du tuteur, mais je dois mieux formaliser les processus d’itération et documenter chaque version.

3. Ressources mobilisées
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Semestre 1

R1.02 – Développement d’interfaces web

Apports : Conception UX/UI, responsive design, principes HTML/CSS.

Mobilisation : Création de la maquette Figma et prototype HTML/CSS du mini-site S1.06.

R1.08 – Gestion de projet & organisations

Apports : Méthodes agiles, cycle en V, planification WBS et Gantt.

Mobilisation : Élaboration du planning, répartition des tâches et suivi Trello en S2.06.

R1.09 – Économie durable & numérique

Apports : Impacts environnementaux du web, éco‑conception, cycles de vie.

Mobilisation : Choix de bonnes pratiques pour optimiser la performance et l’empreinte du site.

R1.10 – Anglais technique

Apports : Terminologie informatique, rédaction de documentation technique.

Mobilisation : Rédaction bilingue des présentations et README du mini-site.

R1.11 – Bases de la communication

Apports : Techniques d’entretien, écoute active, reformulation.

Mobilisation : Conduite d’interviews et rédaction du guide d’entretien en S1.05.

R1.12 – Projet professionnel et personnel

Apports : Réflexion sur parcours, définition d’objectifs professionnels.

Mobilisation : Élaboration du bilan personnel et professionnel en document de cadrage.

Semestre 2

R2.02 – Développement d’applications avec IHM

Apports : Prototypage interactif, wireframing, maquettes fonctionnelles.

Mobilisation : Création de la maquette Freemind et prototype vidéo de S2.06.

R2.11 – Droit des contrats & du numérique

Apports : Notions juridiques sur contrat, propriété intellectuelle.

Mobilisation : Analyse des conditions d’utilisation et mentions légales du site.

R2.12 – Anglais d’entreprise

Apports : Rédaction de supports, terminologie et présentation orale en anglais.

Mobilisation : Traduction du diaporama et pitch bilingue pour S2.06.

R2.13 – Communication en milieu professionnel

Apports : Animation de réunions, gestion de Q/R, compte-rendu structuré.

Mobilisation : Présentation en TP, modération des retours et rédaction du CRA.

R2.14 – Projet professionnel et personnel

Apports : Exploration des métiers du numérique, plan de carrière.

Mobilisation : Réflexion sur parcours et objectifs, élaboration du document personnel.

4. Implication & déroulement
(Compétence 6 – Concevoir, piloter et évaluer un projet)

SAÉ S1.06 – Découverte de l’environnement éco & écolo

Pour cette SAÉ, Adam et moi avons travaillé en duo, planifiant nos jalons via Trello et échangeant sur Discord. L’encadrement était assuré par Pierre-Frédéric Villard & Audrey Bichet.

  • Conception graphique : prototype UI sous Figma intégrant principes d’éco-conception.
  • Intégration web : développement HTML5 sémantique et CSS3 responsive (flexbox, media queries).
  • Optimisation éco-responsable : minimisation des assets, compression d’images, audit de performance.

Livrables finaux :
• Maquette Figma interactive
• Mini-site HTML/CSS packagé (index.html, styles, images optimisées)
• Rapport d’optimisation (audit Lighthouse, recommandations)

  • Point fort : design clair et respect des principes d’éco-conception (chargement léger, code propre).
  • Limite : adaptation mobile perfectible (quelques défauts de rendu sur petits écrans), pas de tests ARIA.

5. Analyse des apprentissages
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Retour réflexif sur mes apprentissages

En S1 (Découverte de l’environnement éco & écolo), j’ai compris que la phase de prototypage sous Figma n’est pas qu’esthétique : elle structure la réflexion fonctionnelle et l’éco-conception dès le début. Passer du modèle papier à un mini-site HTML/CSS validé W3C m’a sensibilisé à l’importance de la rigueur technique et de la performance (compression d’images, bonnes pratiques CSS).

En S2 (Organisation d’un travail d’équipe), la mise en place du WBS et du planning Gantt m’a appris que planifier c’est prévoir mais aussi intégrer la flexibilité. Le suivi quotidien sous Trello et l’analyse par diagramme Ishikawa ont montré l’importance de mesurer les écarts et de réajuster immédiatement le pilotage.

  • Mon point fort : structurer méthodiquement chaque phase – prototypage, intégration, planification et bilan – pour garantir cohérence et traçabilité.
  • À améliorer : formaliser des indicateurs de performance (KPIs) et mettre en place des revues intermédiaires pour évaluer plus finement l’avancement et la qualité.

Leçon tirée :
Un projet réussi combine créativité (maquette et prototypage) et rigueur (planning, suivi, itérations). Il faut penser dès le départ aux indicateurs et à la méthode d’évaluation pour ajuster en continu la trajectoire vers l’objectif.

6. Axes d’amélioration
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Observation (S1) : Lors de la SAÉ éco & écolo, le périmètre des indicateurs environnementaux n’était pas clairement défini, ce qui a entraîné des audits partiels.

Observation (S2) : Pour l’organisation d’équipe, certains rôles (scribe, relais Trello) n’étaient pas validés, provoquant des recouvrements de tâches.

Observation (S1) : Le découpage initial du mini-site écolo prévoyait trop peu de temps pour l’optimisation des assets, générant un rush en fin de projet.

Observation (S2) : Le sprint Trello manquait de sous-tâches granuleuses pour la création du bilan Ishikawa, retardant son élaboration.

Observation (S1) : Nos échanges Discord étaient fluides mais sans ordre du jour, entraînant des digressions sur l’implémentation technique plutôt que sur l’éco-design.

Observation (S2) : Les points hebdomadaires manquaient de compte-rendu systématique, ce qui rendait difficile le suivi des décisions.

Observation : Les livrables HTML/CSS, Figma et PDF étaient dispersés dans plusieurs dossiers, sans README unique ni versioning fiable.

Observation : Nous avons utilisé Figma, Google Docs, Trello et Discord, mais sans conventions de nommage ni de suivi de versions.

7. Traces choisies
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Trace 1 : Prototype web (SAÉ S1.06) (iframe)

Commentaire : Site de démonstration HTML/CSS pour le projet d’étude de l’environnement Rolex.
Voir le site dans un nouvel onglet

Trace 2 : SAÉ S1.06 – Étude de Rolex (PDF)

Impossible d’afficher le PDF. Télécharger l’étude Rolex (S1.06) .

Commentaire : Analyse PESTEL, SWOT, diagnostic interne/externe et recommandations stratégiques.

Trace 3 : SAÉ S2.06 – Travail en équipe (PDF)

Impossible d’afficher le PDF. Télécharger le dossier S2.06 .

Commentaire : Répartition des tâches, planning, outils et points d’amélioration organisationnels.

Trace 4 : Travail en équipe SAE 2.03 (vidéo)

Commentaire : Présentation de l’interface UpWeGo : navigation, pieuvre APTE, WBS et prototypes IHM.

8. Originalité & qualité
(Compétence 6 – Concevoir, piloter et évaluer un projet)

Synthèse de l’originalité et de la qualité
  • Approche originale (S1) :
    • Triangulation méthodologique : couplage d’un questionnaire en ligne (Freemind prototype) et d’interviews filmées pour croiser données quantitatives et retours qualitatifs.
    • Cartographie dynamique : utilisation de Freemind en séance pour visualiser en temps réel les besoins et prioriser les fonctionnalités selon les retours clients.
  • Qualité des livrables (S1) :
    • Étude de marché structurée en chapitres (PESTEL, SWOT, segmentation) avec sommaire et annexes détaillées (graphes, matrices).
    • Transcriptions d’entretiens horodatées et enrichies d’une grille d’évaluation, facilitant l’analyse rapide et précise des propos.
  • Approche originale (S2) :
    • Synchronisation Trello & Gantt Project : tags colorés pour indiquer l’état d’avancement des tickets et mise à jour automatique du diagramme de Gantt.
    • Prototype vidéo animé : démonstration de la maquette IHM sans développement front-end, centrée sur la navigation et les cas d’usage clés.
  • Qualité des livrables (S2) :
    • Dossier projet complet, commenté et indexé : pieuvre APTE, WBS, planning Gantt et maquette interactive présentés de manière claire et cohérente.
    • Diaporama FR/EN : visuels professionnels (captures d’écran Trello, diagrammes), notes de présentation et mise en page épurée.
Points forts
  • Outils de pilotage visuels et collaboratifs (Freemind, Trello, Gantt) assurant transparence et réactivité.
  • Livrables soignés et immersifs, mêlant PDF, vidéo, maquette et diagrammes pour un rendu professionnel.
Axes d’amélioration
  • Définir et suivre des KPIs (temps de réalisation, taux de satisfaction) pour mieux piloter l’avancement et la qualité.
  • Structurer et limiter la durée des entretiens en S1 pour éviter les digressions et cibler plus finement les besoins.
  • Intégrer une phase de test utilisateur sur la maquette interactive pour valider l’ergonomie avant le développement effectif.