545 lines
18 KiB
JavaScript
545 lines
18 KiB
JavaScript
// Script pour la stratégie - avec contenu complet du fichier Markdown
|
|
(function() {
|
|
// Contenu de la stratégie (extrait de docs/strategie-evolution-technique.md)
|
|
const strategieMarkdown = `# Stratégie d'Évolution Technique - Laplank
|
|
|
|
**Date de mise à jour** : 02/12/2025
|
|
|
|
Date: 02/12/2025
|
|
|
|
## Vision Technique à 3 Ans
|
|
|
|
### Objectifs Stratégiques
|
|
|
|
1. **Renforcer la différenciation** : Maintenir et développer les technologies qui créent un avantage concurrentiel
|
|
2. **Réduire les risques** : Éliminer les dépendances critiques et les gaps de compétences
|
|
3. **Optimiser les coûts** : Réduire les coûts de maintenance des technologies de commodité
|
|
4. **Innover** : Explorer et adopter les technologies émergentes prometteuses
|
|
5. **Infrastructure décentralisée** : Développer l'expertise et l'adoption de ThreeFold pour une infrastructure autonome et résiliente
|
|
|
|
## Roadmap d'Évolution
|
|
|
|
### Axe Transversal : Data Visualization & UX (NOUVEAU)
|
|
|
|
**Objectif** : Devenir la référence en termes de transparence et d'accessibilité des données blockchain/crypto et infrastructure.
|
|
|
|
**Technologies Clés** :
|
|
- **D3.js / ECharts** : Pour des visualisations avancées et interactives.
|
|
- **Cytoscape.js** : Pour visualiser la "Toile de Confiance" (Web of Trust).
|
|
- **Grafana** : Pour le monitoring de l'infrastructure (Duniter & ThreeFold).
|
|
- **Leaflet** : Pour la cartographie des nœuds.
|
|
|
|
**Actions** :
|
|
1. Développer un explorateur de **Web of Trust visuel** (Graph).
|
|
2. Créer des dashboards de **santé du réseau** (Duniter & ThreeFold).
|
|
3. Former l'équipe front-end sur **D3.js** ou **ECharts**.
|
|
|
|
**KPIs** :
|
|
- Temps de compréhension pour un nouvel utilisateur.
|
|
- Adoption des outils de visualisation.
|
|
- Nombre de vues sur les dashboards publics.
|
|
|
|
### Année 1 : Consolidation et Réduction des Risques
|
|
|
|
#### Q1-Q2 : Gestion des Gaps de Compétences Critiques
|
|
|
|
**Objectif** : Réduire les risques liés aux compétences manquantes
|
|
|
|
**Actions** :
|
|
- Identifier les technologies critiques avec faible couverture d'équipe
|
|
- Mettre en place un plan de formation pour les technologies core
|
|
- Documenter les connaissances critiques
|
|
- Créer des plans de continuité en cas de départ
|
|
|
|
**Technologies prioritaires** :
|
|
- Rust / Substrate (blockchain core)
|
|
- Docker / Infrastructure
|
|
- PostgreSQL
|
|
- ThreeFold Grid (infrastructure décentralisée - bonne couverture mais à renforcer)
|
|
|
|
**Budget estimé** : Formation et documentation
|
|
|
|
#### Q3-Q4 : Optimisation des Commodités
|
|
|
|
**Objectif** : Réduire les coûts de maintenance des technologies non différenciantes
|
|
|
|
**Actions** :
|
|
- Auditer les coûts de maintenance
|
|
- Identifier les opportunités d'optimisation
|
|
- Standardiser les pratiques
|
|
- Automatiser les tâches répétitives
|
|
|
|
**Technologies cibles** :
|
|
- Infrastructure (Docker, Linux, PostgreSQL)
|
|
- Outils de développement
|
|
|
|
**Budget estimé** : Automatisation et optimisation
|
|
|
|
### Année 2 : Innovation et Différenciation
|
|
|
|
#### Q1-Q2 : Évaluation des Technologies Émergentes
|
|
|
|
**Objectif** : Identifier et évaluer les technologies prometteuses
|
|
|
|
**Actions** :
|
|
- POC (Proof of Concept) sur les technologies émergentes
|
|
- Évaluer l'impact business potentiel
|
|
- Mesurer la capacité de différenciation
|
|
- Tester l'adoption par l'équipe
|
|
|
|
**Technologies à évaluer** :
|
|
- IPFS (stockage distribué)
|
|
- Nostr (protocole décentralisé)
|
|
- Serverless (architecture)
|
|
- ThreeFold Grid (infrastructure décentralisée - opportunité majeure)
|
|
- Zero OS (système d'exploitation bare metal)
|
|
- ThreeFold Compute / Storage (capacités de calcul et stockage décentralisées)
|
|
- Mycelium Network (réseau overlay chiffré)
|
|
- AIBox (solution IA décentralisée)
|
|
|
|
**Budget estimé** : POC et évaluation
|
|
|
|
#### Q3-Q4 : Adoption Stratégique
|
|
|
|
**Objectif** : Adopter les technologies émergentes validées
|
|
|
|
**Actions** :
|
|
- Intégrer les technologies validées dans les projets
|
|
- Former l'équipe
|
|
- Documenter les bonnes pratiques
|
|
- Monitorer l'impact
|
|
|
|
**Budget estimé** : Développement et formation
|
|
|
|
### Année 3 : Maturité et Évolution Continue
|
|
|
|
#### Objectifs
|
|
|
|
- Maintenir un radar technologique à jour
|
|
- Continuer l'innovation
|
|
- Optimiser en continu
|
|
- Gérer les risques proactivement
|
|
|
|
## Priorités d'Investissement
|
|
|
|
### Priorité 1 : Technologies Core (Critiques)
|
|
|
|
**Investissement** : Maximum
|
|
**Focus** : Stabilité, performance, sécurité
|
|
|
|
**Technologies** :
|
|
- Rust / Substrate (blockchain)
|
|
- Infrastructure critique
|
|
- ThreeFold Grid (infrastructure décentralisée - bonne couverture)
|
|
|
|
**Actions** :
|
|
- Maintenance proactive
|
|
- Formation continue
|
|
- Documentation exhaustive
|
|
- Plans de continuité
|
|
- Développement de l'expertise ThreeFold
|
|
|
|
### Priorité 2 : Technologies Stratégiques
|
|
|
|
**Investissement** : Élevé
|
|
**Focus** : Croissance, différenciation
|
|
|
|
**Technologies** :
|
|
- Technologies différenciantes
|
|
- Technologies émergentes prometteuses
|
|
- ThreeFold (écosystème complet - opportunité stratégique majeure)
|
|
- ThreeFold Grid (infrastructure décentralisée)
|
|
- Zero OS (système bare metal)
|
|
- ThreeFold Compute / Storage (capacités décentralisées)
|
|
- Mycelium Network (réseau overlay)
|
|
- AIBox (IA décentralisée)
|
|
|
|
**Actions** :
|
|
- Développement actif
|
|
- Innovation
|
|
- Expérimentation
|
|
- POC sur infrastructure décentralisée
|
|
- Formation sur ThreeFold
|
|
|
|
### Priorité 3 : Technologies de Support
|
|
|
|
**Investissement** : Modéré
|
|
**Focus** : Efficacité, coût
|
|
|
|
**Technologies** :
|
|
- Technologies de commodité
|
|
- Outils de développement
|
|
|
|
**Actions** :
|
|
- Optimisation
|
|
- Standardisation
|
|
- Automatisation
|
|
|
|
### Priorité 4 : Technologies Legacy
|
|
|
|
**Investissement** : Minimal (migration)
|
|
**Focus** : Remplacement, réduction des risques
|
|
|
|
**Technologies** :
|
|
- Technologies obsolètes
|
|
- Technologies à risque
|
|
|
|
**Actions** :
|
|
- Planification de migration
|
|
- Réduction progressive
|
|
- Remplacement
|
|
|
|
## Plan de Migration
|
|
|
|
### Technologies à Migrer
|
|
|
|
#### Court Terme (0-6 mois)
|
|
|
|
Aucune migration urgente identifiée actuellement.
|
|
|
|
#### Moyen Terme (6-18 mois)
|
|
|
|
- Évaluer les technologies legacy
|
|
- Planifier les remplacements
|
|
- Identifier les alternatives
|
|
|
|
#### Long Terme (18+ mois)
|
|
|
|
- Exécuter les migrations planifiées
|
|
- Valider les alternatives
|
|
- Documenter les leçons apprises
|
|
|
|
## Gestion des Risques
|
|
|
|
### Risques Identifiés
|
|
|
|
1. **Gaps de compétences** : Technologies critiques avec faible couverture
|
|
2. **Dépendances uniques** : Technologies sans alternative
|
|
3. **Obsolescence** : Technologies vieillissantes
|
|
4. **Coûts** : Maintenance élevée de certaines technologies
|
|
|
|
### Stratégies de Mitigation
|
|
|
|
1. **Formation et recrutement** : Réduire les gaps de compétences
|
|
2. **Diversification** : Éviter les dépendances uniques
|
|
3. **Veille technologique** : Détecter l'obsolescence tôt
|
|
4. **Optimisation continue** : Réduire les coûts
|
|
|
|
## KPIs de Suivi
|
|
|
|
### Métriques Techniques
|
|
|
|
- **Couverture d'équipe** : Nombre moyen de personnes par technologie
|
|
- **Gaps de compétences** : Nombre de technologies avec gap élevé
|
|
- **Risques techniques** : Nombre de technologies à risque élevé
|
|
- **Coûts** : Coût total de maintenance
|
|
|
|
### Métriques Business
|
|
|
|
- **Différenciation** : Nombre de technologies différenciantes
|
|
- **Innovation** : Nombre de technologies émergentes adoptées
|
|
- **Efficacité** : Réduction des coûts de maintenance
|
|
- **Stabilité** : Réduction des incidents techniques
|
|
|
|
### Objectifs Annuels
|
|
|
|
**Année 1** :
|
|
- Réduire les gaps de compétences de 50%
|
|
- Documenter 100% des technologies core
|
|
- Réduire les coûts de maintenance de 20%
|
|
- POC ThreeFold Grid (déploiement de nœuds de test)
|
|
- Lancement du projet DataViz (POC Web of Trust visuelle)
|
|
|
|
**Année 2** :
|
|
- Adopter 2-3 technologies émergentes (dont ThreeFold Grid)
|
|
- Maintenir les gaps de compétences < 2 technologies
|
|
- Optimiser les coûts de 30%
|
|
- Déployer infrastructure ThreeFold en production (si POC validé)
|
|
- Former l'équipe sur Zero OS et ThreeFold
|
|
|
|
**Année 3** :
|
|
- Maintenir un radar à jour
|
|
- Continuer l'innovation
|
|
- Optimiser en continu
|
|
- Infrastructure décentralisée opérationnelle (ThreeFold)
|
|
- Réduire la dépendance aux infrastructures centralisées
|
|
|
|
## Communication et Gouvernance
|
|
|
|
### Comité Technique
|
|
|
|
- Réunion trimestrielle pour revue du radar
|
|
- Décisions sur les priorités d'investissement
|
|
- Validation des migrations
|
|
|
|
### Reporting
|
|
|
|
- Rapport mensuel sur les métriques
|
|
- Rapport trimestriel sur l'avancement
|
|
- Rapport annuel sur la stratégie
|
|
|
|
### Parties Prenantes
|
|
|
|
- Équipe technique
|
|
- Direction
|
|
- Financement (si applicable)
|
|
- Communauté (open source)
|
|
|
|
## Conclusion
|
|
|
|
Cette stratégie d'évolution technique vise à aligner les choix technologiques avec les objectifs business, réduire les risques, optimiser les coûts et favoriser l'innovation.
|
|
|
|
La mise en œuvre de cette stratégie nécessite un engagement continu de l'équipe et un suivi régulier des métriques définies.`;
|
|
|
|
// Fonction pour convertir Markdown en HTML
|
|
function markdownToHtml(md) {
|
|
let html = md;
|
|
|
|
// Titres
|
|
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
|
|
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
|
|
html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
|
|
html = html.replace(/^#### (.*$)/gim, '<h4>$1</h4>');
|
|
|
|
// Gras et italique
|
|
html = html.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');
|
|
html = html.replace(/\*(.*?)\*/gim, '<em>$1</em>');
|
|
|
|
// Listes
|
|
html = html.replace(/^- (.*$)/gim, '<li>$1</li>');
|
|
html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>');
|
|
|
|
// Séparateurs
|
|
html = html.replace(/^---$/gim, '<hr>');
|
|
|
|
// Paragraphes
|
|
html = html.split('\n\n').map(block => {
|
|
if (block.trim().startsWith('<h') || block.trim().startsWith('<ul') || block.trim().startsWith('<li') || block.trim().startsWith('<hr')) {
|
|
return block;
|
|
}
|
|
return '<p>' + block.trim() + '</p>';
|
|
}).join('\n');
|
|
|
|
// Grouper les listes
|
|
html = html.replace(/(<li>.*?<\/li>)/gim, function(match) {
|
|
return '<ul>' + match + '</ul>';
|
|
});
|
|
html = html.replace(/<\/ul>\s*<ul>/gim, '');
|
|
|
|
return html;
|
|
}
|
|
|
|
function initStrategyLinks() {
|
|
addStrategyLinkToHeader();
|
|
interceptStrategyLinks();
|
|
handleStrategyRoute();
|
|
}
|
|
|
|
function handleStrategyRoute() {
|
|
if (window.location.pathname === '/business/strategie' || window.location.pathname === '/business/strategie.html' || window.location.hash === '#strategie') {
|
|
createStrategyPage();
|
|
}
|
|
}
|
|
|
|
function interceptStrategyLinks() {
|
|
document.addEventListener('click', function(e) {
|
|
const link = e.target.closest('a');
|
|
if (link && (link.href.includes('/business/strategie') || link.getAttribute('href') === '/business/strategie' || link.id === 'strategie-link' || link.classList.contains('strategie-link'))) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
createStrategyPage();
|
|
return false;
|
|
}
|
|
}, true);
|
|
}
|
|
|
|
function createStrategyPage() {
|
|
if (!window.originalBodyContent) {
|
|
window.originalBodyContent = document.body.innerHTML;
|
|
}
|
|
|
|
// Convertir le Markdown en HTML
|
|
const htmlContent = markdownToHtml(strategieMarkdown);
|
|
|
|
document.body.innerHTML = `
|
|
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; min-height: 100vh;">
|
|
<div style="background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
|
<a href="#" id="back-to-radar" style="display: inline-block; margin-bottom: 20px; color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer;">← Retour au Radar</a>
|
|
<div id="strategie-content" style="line-height: 1.8; color: #333;">
|
|
${htmlContent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Appliquer des styles pour le contenu Markdown
|
|
const contentDiv = document.getElementById('strategie-content');
|
|
if (contentDiv) {
|
|
contentDiv.querySelectorAll('h1').forEach(h => {
|
|
h.style.color = '#1a4d3a';
|
|
h.style.borderBottom = '3px solid #2ecc71';
|
|
h.style.paddingBottom = '10px';
|
|
h.style.marginTop = '30px';
|
|
h.style.marginBottom = '20px';
|
|
});
|
|
contentDiv.querySelectorAll('h2').forEach(h => {
|
|
h.style.color = '#2ecc71';
|
|
h.style.marginTop = '30px';
|
|
h.style.marginBottom = '15px';
|
|
});
|
|
contentDiv.querySelectorAll('h3').forEach(h => {
|
|
h.style.color = '#3498db';
|
|
h.style.marginTop = '20px';
|
|
h.style.marginBottom = '10px';
|
|
});
|
|
contentDiv.querySelectorAll('h4').forEach(h => {
|
|
h.style.color = '#555';
|
|
h.style.marginTop = '15px';
|
|
h.style.marginBottom = '8px';
|
|
});
|
|
contentDiv.querySelectorAll('ul').forEach(ul => {
|
|
ul.style.margin = '10px 0';
|
|
ul.style.paddingLeft = '30px';
|
|
ul.style.listStyleType = 'disc';
|
|
});
|
|
contentDiv.querySelectorAll('li').forEach(li => {
|
|
li.style.margin = '5px 0';
|
|
});
|
|
contentDiv.querySelectorAll('p').forEach(p => {
|
|
p.style.margin = '10px 0';
|
|
});
|
|
contentDiv.querySelectorAll('a').forEach(a => {
|
|
a.style.color = '#2ecc71';
|
|
a.style.textDecoration = 'none';
|
|
});
|
|
contentDiv.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('mouseenter', function() {
|
|
this.style.textDecoration = 'underline';
|
|
});
|
|
a.addEventListener('mouseleave', function() {
|
|
this.style.textDecoration = 'none';
|
|
});
|
|
});
|
|
contentDiv.querySelectorAll('hr').forEach(hr => {
|
|
hr.style.border = 'none';
|
|
hr.style.borderTop = '2px solid #2ecc71';
|
|
hr.style.margin = '30px 0';
|
|
});
|
|
contentDiv.querySelectorAll('strong').forEach(s => {
|
|
s.style.color = '#1a4d3a';
|
|
});
|
|
}
|
|
|
|
const backLink = document.getElementById('back-to-radar');
|
|
if (backLink) {
|
|
backLink.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (window.originalBodyContent) {
|
|
document.body.innerHTML = window.originalBodyContent;
|
|
setTimeout(initStrategyLinks, 100);
|
|
} else {
|
|
window.location.href = '/business/';
|
|
}
|
|
});
|
|
}
|
|
|
|
window.history.pushState({page: 'strategie'}, 'Stratégie', '/business/strategie');
|
|
}
|
|
|
|
function addStrategyLinkToHeader() {
|
|
// Chercher le header ou la barre de navigation
|
|
const header = document.querySelector('header') ||
|
|
document.querySelector('nav') ||
|
|
document.querySelector('[class*="header"]') ||
|
|
document.querySelector('[class*="nav"]') ||
|
|
document.querySelector('[class*="Header"]') ||
|
|
document.querySelector('[class*="Nav"]') ||
|
|
document.querySelector('div[role="banner"]');
|
|
|
|
if (header) {
|
|
if (header.querySelector('#strategie-link') || header.querySelector('a[href*="strategie"]')) {
|
|
return;
|
|
}
|
|
const strategyLink = document.createElement('a');
|
|
strategyLink.id = 'strategie-link';
|
|
strategyLink.className = 'strategie-link';
|
|
strategyLink.href = '#strategie';
|
|
strategyLink.textContent = '📋 Stratégie';
|
|
strategyLink.style.marginLeft = '15px';
|
|
strategyLink.style.color = '#2ecc71';
|
|
strategyLink.style.textDecoration = 'none';
|
|
strategyLink.style.fontWeight = 'bold';
|
|
strategyLink.style.cursor = 'pointer';
|
|
strategyLink.style.display = 'inline-block';
|
|
strategyLink.style.padding = '5px 10px';
|
|
strategyLink.style.borderRadius = '4px';
|
|
strategyLink.style.transition = 'background 0.2s';
|
|
strategyLink.addEventListener('mouseenter', function() {
|
|
this.style.background = 'rgba(46, 204, 113, 0.1)';
|
|
});
|
|
strategyLink.addEventListener('mouseleave', function() {
|
|
this.style.background = 'transparent';
|
|
});
|
|
strategyLink.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
createStrategyPage();
|
|
});
|
|
header.appendChild(strategyLink);
|
|
} else {
|
|
// Si pas de header trouvé, créer une barre en haut de page
|
|
const existingTopBar = document.getElementById('strategie-top-bar');
|
|
if (existingTopBar) {
|
|
return;
|
|
}
|
|
|
|
const topBar = document.createElement('div');
|
|
topBar.id = 'strategie-top-bar';
|
|
topBar.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; background: rgba(26, 77, 58, 0.95); padding: 10px 20px; z-index: 1000; text-align: right; box-shadow: 0 2px 4px rgba(0,0,0,0.1);';
|
|
|
|
const strategyLink = document.createElement('a');
|
|
strategyLink.id = 'strategie-link';
|
|
strategyLink.className = 'strategie-link';
|
|
strategyLink.href = '#strategie';
|
|
strategyLink.textContent = '📋 Stratégie';
|
|
strategyLink.style.color = '#2ecc71';
|
|
strategyLink.style.textDecoration = 'none';
|
|
strategyLink.style.fontWeight = 'bold';
|
|
strategyLink.style.cursor = 'pointer';
|
|
strategyLink.style.padding = '5px 15px';
|
|
strategyLink.style.borderRadius = '4px';
|
|
strategyLink.style.transition = 'background 0.2s';
|
|
strategyLink.addEventListener('mouseenter', function() {
|
|
this.style.background = 'rgba(46, 204, 113, 0.2)';
|
|
});
|
|
strategyLink.addEventListener('mouseleave', function() {
|
|
this.style.background = 'transparent';
|
|
});
|
|
strategyLink.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
createStrategyPage();
|
|
});
|
|
|
|
topBar.appendChild(strategyLink);
|
|
document.body.insertBefore(topBar, document.body.firstChild);
|
|
|
|
// Ajouter un padding au body pour compenser la barre fixe
|
|
if (!document.body.style.paddingTop || document.body.style.paddingTop === '0px') {
|
|
document.body.style.paddingTop = '50px';
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('popstate', function(event) {
|
|
if (window.originalBodyContent && !event.state) {
|
|
document.body.innerHTML = window.originalBodyContent;
|
|
setTimeout(initStrategyLinks, 100);
|
|
}
|
|
});
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initStrategyLinks);
|
|
} else {
|
|
initStrategyLinks();
|
|
}
|
|
})();
|