DÉVELOPPEMENT WEB
SAÉ 1.04
SAÉ 1.04
Site Web BMW
Conception et développement d'un site web statique responsive, accessible et conforme aux standards W3C.
01. Résumé du Projet
Dans le cadre de la SAE 1.04, j’ai réalisé un site web statique autour d’un thème personnel : BMW. Ce projet avait pour but de valider les compétences en HTML, CSS, accessibilité, design responsive et structuration de code. Le site est organisé autour de plusieurs pages (accueil, modèles, à propos) avec une charte graphique cohérente, des animations CSS et un hébergement sur GitHub Pages.
02. Actions Réalisées
- Création complète d’un site HTML/CSS.
- Utilisation de Flexbox et CSS Grid pour la mise en page.
- Ajout d’animations CSS sur les titres et les boutons.
- Application d’une charte graphique cohérente et responsive.
- Respect des standards W3C et norme d’accessibilité WCAG 2.0 AA.
- Dépôt du projet sur GitHub et déploiement via GitHub Pages.
03. Apprentissages Critiques
| CODE | DESCRIPTION DE LA COMPÉTENCE | STATUT SYSTÈME |
|---|---|---|
| AC13.01 | Utiliser un système informatique et ses outils. | VALIDÉE |
| AC13.04 | Connaître l’architecture et les technologies d’un site Web. | VALIDÉE |
04. Preuves & Livrables
05. Débriefing Mission
POINTS FORTS
- Site bien structuré et clair visuellement.
- Animations CSS efficaces et bien intégrées.
- Utilisation propre de GitHub et du versionnage.
- Projet validé sans erreurs W3C HTML/CSS.
🔧 Diagnostic & Résolutions
| PROBLÈME DÉTECTÉ | SOLUTION APPLIQUÉE |
|---|---|
| Pages mal alignées sur petit écran. | Utilisation de media queries pour ajuster la grille CSS (Responsive). |
| Animations trop rapides ou saccadées. | Réglage des timings avec "ease-in-out" et durations adaptées. |
🎯 Axes d'Amélioration (V2.0)
| LIMITATIONS ACTUELLES | PLAN D'ACTION FUTUR |
|---|---|
| Formulaires non fonctionnels (statique). | Créer une version avec backend (PHP ou Firebase) pour traiter les données. |
| Contenu textuel parfois trop court. | Enrichir avec des articles détaillés ou vidéos complémentaires. |
PROTOCOLE CONSEILLÉ POUR OPTIMISATION
- 01. Utiliser Flexbox et Grid dès le début pour éviter les conflits de layout.
- 02. Valider régulièrement le code HTML/CSS au W3C au fil du projet.
- 03. Organiser les commits par fonctionnalité, avec des messages clairs.