Fiche Descriptive Complète : Plan d’Équipement Digital Nomad
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template plan_d_equipement_digital_nomad_rentree.html
Version 1.0.0
Date de création 25/03/2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard Logistique / Aide à la décision
Objectif principal Prioriser les achats d’équipement pour un mode de vie nomade
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template est un outil de planification budgétaire et stratégique. Il permet de visualiser une liste de matériel (électroménager compact) et de les situer sur une matrice de priorisation croisant la valeur d’usage quotidienne et la complexité logistique/investissement. Il inclut un calcul de budget restant et une note de stratégie durable.
📌 Public cible (Persona)
👤 Digital Nomads en phase d’installation ou de transition.
👤 Minimalistes cherchant à optimiser leur espace de vie.
👤 Gestionnaires de budget souhaitant prioriser des investissements durables.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Élément Valeur
Standard HTML HTML5 Sémantique
Framework CSS CSS Pur (Variables natives :root)
Framework JS Aucun (Statique)
Browsers ciblés Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive ✅ Oui (Grid adaptatif)
📦 Dépendances / Assets
Google Fonts : ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif (Polices système).
Icônes : Utilisation de caractères Unicode (★, ☕, 🍲, 🧺).
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 total_budget int ✅ Oui Budget global (ex: 1000 €)
2 items_list array ✅ Oui Liste des produits (Nom, prix, durabilité)
3 matrix_tags array ✅ Oui Éléments positionnés dans la matrice
4 strategy_note text ❌ Non Conseil de durabilité en bas de page
📤 INTERACTIONS & SORTIES
🖱️ Événements Utilisateur
Hover sur .item-card : Effet visuel de sélection (via structure CSS).
Hover sur .tag : Curseur pointer pour indiquer une interactivité potentielle (Détails de l’investissement).
🧱 STRUCTURE DU FICHIER — DOM
Plaintext
plan_d_equipement_digital_nomad_rentree.html
│
├── 📌
(Styles internes, Meta viewport, Charte couleur)│
└── 📌
│
└── 🏗️
│
├── 🏗️
│ └──
Logistique Rentrée
│ └── 1000 €
│
├── 🏗️
│ ├──
│ ├──
│ └──
│
├── 🏗️
│ ├──
Matrice de Priorisation
│ └──
│ ├── .matrix-label-y (Valeur d’usage)
│ ├── .quadrant (Vital / Confort / Optionnel)
│ └── .matrix-label-x (Investissement)
│
└── 🏗️
└── 💡 Note de Stratégie Durable
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs
CSS
:root {
–primary: #2D3436; /* Anthracite – Texte et tags */
–accent: #0984E3; /* Bleu vif – Prix et badges */
–bg: #F5F6FA; /* Gris très clair – Fond de page */
–white: #FFFFFF; /* Blanc – Cartes et conteneur */
–border: #DFE6E9; /* Gris bordure – Séparateurs */
}
📐 Mise en Page — Layout
Conteneur : max-width: 900px centré.
Grille de produits : grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)).
Matrice : Système de grille complexe (3 colonnes / 3 rangées) pour gérer les axes X/Y.
♿ ACCESSIBILITÉ & SEO
Sémantique : Utilisation de
, .
Lisibilité : Contrastes élevés (Bleu sur blanc, Noir sur blanc).
SEO : Balise
🧪 TESTS & VALIDATION
Calcul Budget : Vérifier que Somme(Items) + Reste = Budget Total (150+400+400 + 50 = 1000). ✅
Affichage Mobile : La grille de produits doit passer en colonne unique sur smartphone. ✅
Matrice : Les writing-mode de l’axe Y doivent être lisibles sur tous les navigateurs. ✅



Avis
Il n’y a pas encore d’avis.