|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Guide KoboToolbox - Apprendre par Niveau</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.level-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.1); |
|
|
color: #3b82f6; |
|
|
} |
|
|
|
|
|
.accordion-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
|
|
|
.accordion-content.open { |
|
|
max-height: 1000px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="bg-blue-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i class="fas fa-cube text-3xl mr-3"></i> |
|
|
<h1 class="text-2xl md:text-3xl font-bold">KoboToolbox Guide</h1> |
|
|
</div> |
|
|
<nav class="flex space-x-1 md:space-x-4"> |
|
|
<a href="#" class="px-3 py-2 rounded hover:bg-blue-500 transition">Accueil</a> |
|
|
<a href="#" class="px-3 py-2 rounded hover:bg-blue-500 transition">Documentation</a> |
|
|
<a href="#" class="px-3 py-2 rounded hover:bg-blue-500 transition">Exemples</a> |
|
|
<a href="#" class="px-3 py-2 rounded hover:bg-blue-500 transition">Contact</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">Apprenez KoboToolbox à Votre Rythme</h2> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Découvrez comment collecter et analyser des données avec KoboToolbox, quel que soit votre niveau d'expertise.</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg">Commencer</button> |
|
|
<button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-blue-600 transition">Vidéo Intro</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Votre progression avec KoboToolbox</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
<span class="ml-4 text-gray-700">25%</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Complétez les niveaux pour débloquer votre badge d'expert!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="container mx-auto px-4 py-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Choisissez Votre Niveau</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="level-card bg-white rounded-xl shadow-md overflow-hidden transition cursor-pointer" onclick="showTab('beginner')"> |
|
|
<div class="bg-blue-100 p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-2xl font-bold text-blue-800">Débutant</h3> |
|
|
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">Niveau 1</span> |
|
|
</div> |
|
|
<p class="text-blue-600 mt-2">Les bases de KoboToolbox</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Création de compte</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Premiers formulaires</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Collecte simple</li> |
|
|
</ul> |
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<span class="text-sm text-gray-500">Durée estimée: 1-2 heures</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="level-card bg-white rounded-xl shadow-md overflow-hidden transition cursor-pointer" onclick="showTab('intermediate')"> |
|
|
<div class="bg-purple-100 p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-2xl font-bold text-purple-800">Intermédiaire</h3> |
|
|
<span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Niveau 2</span> |
|
|
</div> |
|
|
<p class="text-purple-600 mt-2">Techniques avancées</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Logique de saut</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Calculs et contraintes</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Analyse des données</li> |
|
|
</ul> |
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<span class="text-sm text-gray-500">Durée estimée: 3-5 heures</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="level-card bg-white rounded-xl shadow-md overflow-hidden transition cursor-pointer" onclick="showTab('expert')"> |
|
|
<div class="bg-green-100 p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-2xl font-bold text-green-800">Expert</h3> |
|
|
<span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">Niveau 3</span> |
|
|
</div> |
|
|
<p class="text-green-600 mt-2">Maîtrise complète</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> API et intégrations</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Personnalisation avancée</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Gestion d'équipe</li> |
|
|
</ul> |
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<span class="text-sm text-gray-500">Durée estimée: 5+ heures</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<div id="beginner-tab" class="tab-content active"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-blue-600 p-6 text-white"> |
|
|
<h2 class="text-3xl font-bold">Niveau Débutant</h2> |
|
|
<p class="mt-2">Apprenez les bases de KoboToolbox pour commencer à collecter des données</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Introduction à KoboToolbox</h3> |
|
|
<p class="text-gray-600 mb-6">KoboToolbox est une suite d'outils open-source pour la collecte et l'analyse de données sur le terrain. Idéal pour les enquêtes, la recherche et le suivi humanitaire.</p> |
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Bon à savoir |
|
|
</h4> |
|
|
<p class="text-blue-700">KoboToolbox fonctionne même sans connexion Internet constante, parfait pour les zones reculées.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<img src="https://www.kobotoolbox.org/sites/default/files/2021-03/kobo-hero-image.png" alt="KoboToolbox Interface" class="w-full h-auto rounded-lg shadow-md"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Fonctionnalités Clés pour Débutants</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300 transition"> |
|
|
<div class="feature-icon text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-user-plus"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Création de Compte</h4> |
|
|
<p class="text-gray-600">Inscrivez-vous gratuitement et accédez à la plateforme pour commencer vos projets.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300 transition"> |
|
|
<div class="feature-icon text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Formulaires Simples</h4> |
|
|
<p class="text-gray-600">Créez vos premiers formulaires avec des questions basiques comme texte, choix multiples et photos.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300 transition"> |
|
|
<div class="feature-icon text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Collecte Mobile</h4> |
|
|
<p class="text-gray-600">Utilisez l'application KoboCollect sur smartphone pour recueillir des données sur le terrain.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Guide Pas à Pas</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-blue-700">Étape 1: Création de compte</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p>1. Allez sur <a href="https://kf.kobotoolbox.org/" class="text-blue-600 hover:underline">kf.kobotoolbox.org</a></p> |
|
|
<p>2. Cliquez sur "S'inscrire"</p> |
|
|
<p>3. Remplissez le formulaire avec votre email et un mot de passe sécurisé</p> |
|
|
<p>4. Confirmez votre email en cliquant sur le lien reçu</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-blue-700">Étape 2: Créer un nouveau projet</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p>1. Connectez-vous à votre compte</p> |
|
|
<p>2. Cliquez sur "Nouveau" puis "Projet"</p> |
|
|
<p>3. Donnez un nom à votre projet et une description</p> |
|
|
<p>4. Cliquez sur "Créer"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-blue-700">Étape 3: Ajouter des questions</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p>1. Dans votre projet, cliquez sur "Form Builder"</p> |
|
|
<p>2. Cliquez sur "Ajouter une question"</p> |
|
|
<p>3. Choisissez un type de question (texte, nombre, choix multiple, etc.)</p> |
|
|
<p>4. Rédigez votre question et configurez les options</p> |
|
|
<p>5. Répétez pour toutes les questions de votre formulaire</p> |
|
|
<p>6. Cliquez sur "Enregistrer"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="intermediate-tab" class="tab-content"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-purple-600 p-6 text-white"> |
|
|
<h2 class="text-3xl font-bold">Niveau Intermédiaire</h2> |
|
|
<p class="mt-2">Maîtrisez les fonctionnalités avancées pour des formulaires plus intelligents</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Techniques Avancées</h3> |
|
|
<p class="text-gray-600 mb-6">À ce niveau, vous apprendrez à créer des formulaires dynamiques avec logique conditionnelle, calculs automatiques et validation des données.</p> |
|
|
<div class="bg-purple-50 p-4 rounded-lg border border-purple-200"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Astuce Pro |
|
|
</h4> |
|
|
<p class="text-purple-700">Utilisez la logique de saut pour créer des parcours personnalisés dans vos formulaires, réduisant ainsi le temps de réponse.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<img src="https://www.kobotoolbox.org/sites/default/files/2021-03/kobo-formbuilder.png" alt="Kobo Form Builder" class="w-full h-auto rounded-lg shadow-md"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Fonctionnalités Intermédiaires</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-purple-300 transition"> |
|
|
<div class="feature-icon text-purple-500 text-4xl mb-4"> |
|
|
<i class="fas fa-code-branch"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Logique de Saut</h4> |
|
|
<p class="text-gray-600">Créez des parcours conditionnels où certaines questions n'apparaissent que si des conditions sont remplies.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-purple-300 transition"> |
|
|
<div class="feature-icon text-purple-500 text-4xl mb-4"> |
|
|
<i class="fas fa-calculator"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Calculs Automatiques</h4> |
|
|
<p class="text-gray-600">Effectuez des calculs en temps réel basés sur les réponses précédentes pour des formulaires plus intelligents.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-purple-300 transition"> |
|
|
<div class="feature-icon text-purple-500 text-4xl mb-4"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Analyse des Données</h4> |
|
|
<p class="text-gray-600">Visualisez et exportez vos données pour une analyse plus poussée dans Excel, R ou Python.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Tutoriels Avancés</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-purple-700">Créer une logique de saut</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p>1. Dans le Form Builder, sélectionnez la question qui déterminera le saut</p> |
|
|
<p>2. Cliquez sur l'onglet "Logique"</p> |
|
|
<p>3. Ajoutez une nouvelle règle et sélectionnez la condition (par exemple "réponse = Oui")</p> |
|
|
<p>4. Choisissez la question à laquelle sauter si la condition est vraie</p> |
|
|
<p>5. Testez votre formulaire pour vérifier que la logique fonctionne</p> |
|
|
<div class="mt-4 bg-purple-50 p-3 rounded border border-purple-200"> |
|
|
<p class="text-sm text-purple-700"><strong>Exemple:</strong> Si la réponse à "Avez-vous des enfants?" est Non, sautez directement à la section sur le logement.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-purple-700">Utiliser les calculs et contraintes</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p><strong>Calculs:</strong></p> |
|
|
<p>1. Créez une question de type "Calcul"</p> |
|
|
<p>2. Dans l'éditeur d'expressions, utilisez des références comme ${age} pour accéder aux valeurs d'autres questions</p> |
|
|
<p>3. Écrivez votre formule (par exemple ${height} / (${weight} * ${weight}) pour un IMC)</p> |
|
|
|
|
|
<p class="mt-4"><strong>Contraintes:</strong></p> |
|
|
<p>1. Sélectionnez une question et allez dans l'onglet "Contraintes"</p> |
|
|
<p>2. Définissez une expression qui doit être vraie pour que la réponse soit valide</p> |
|
|
<p>3. Ajoutez un message d'erreur personnalisé</p> |
|
|
<div class="mt-4 bg-purple-50 p-3 rounded border border-purple-200"> |
|
|
<p class="text-sm text-purple-700"><strong>Exemple:</strong> Une contrainte pourrait être ". <= 150" sur une question d'âge pour empêcher des valeurs improbables.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="expert-tab" class="tab-content"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-green-600 p-6 text-white"> |
|
|
<h2 class="text-3xl font-bold">Niveau Expert</h2> |
|
|
<p class="mt-2">Maîtrise complète de KoboToolbox avec intégrations et personnalisations avancées</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Fonctionnalités Expertes</h3> |
|
|
<p class="text-gray-600 mb-6">À ce niveau, vous découvrirez comment étendre KoboToolbox avec des intégrations API, des scripts personnalisés et la gestion d'équipes complexes.</p> |
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-200"> |
|
|
<h4 class="font-semibold text-green-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Pour les Développeurs |
|
|
</h4> |
|
|
<p class="text-green-700">L'API REST de KoboToolbox permet d'intégrer la collecte et l'analyse de données dans vos propres applications.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<img src="https://www.kobotoolbox.org/sites/default/files/2021-03/kobo-api.png" alt="Kobo API" class="w-full h-auto rounded-lg shadow-md"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Outils pour Experts</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-green-300 transition"> |
|
|
<div class="feature-icon text-green-500 text-4xl mb-4"> |
|
|
<i class="fas fa-plug"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">API et Intégrations</h4> |
|
|
<p class="text-gray-600">Connectez KoboToolbox à d'autres systèmes via l'API REST pour automatiser les flux de données.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-green-300 transition"> |
|
|
<div class="feature-icon text-green-500 text-4xl mb-4"> |
|
|
<i class="fas fa-users-cog"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Gestion d'Équipe</h4> |
|
|
<p class="text-gray-600">Configurez des rôles personnalisés, des permissions granulaires et des workflows d'approbation.</p> |
|
|
</div> |
|
|
<div class="feature-card bg-white p-6 rounded-lg border border-gray-200 hover:border-green-300 transition"> |
|
|
<div class="feature-icon text-green-500 text-4xl mb-4"> |
|
|
<i class="fas fa-terminal"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-lg mb-2">Scripts Personnalisés</h4> |
|
|
<p class="text-gray-600">Étendez les fonctionnalités avec des scripts Python ou JavaScript pour des besoins spécifiques.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Ressources pour Experts</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-green-700">Utiliser l'API KoboToolbox</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p><strong>Authentification:</strong></p> |
|
|
<pre class="bg-gray-100 p-3 rounded overflow-x-auto text-sm"> |
|
|
// Obtenir un token d'authentification |
|
|
curl -X POST https://kf.kobotoolbox.org/token/ \ |
|
|
-H "Content-Type: application/json" \ |
|
|
-d '{"username":"votre_username", "password":"votre_password"}'</pre> |
|
|
|
|
|
<p class="mt-4"><strong>Récupérer des données:</strong></p> |
|
|
<pre class="bg-gray-100 p-3 rounded overflow-x-auto text-sm"> |
|
|
// Lister tous les projets |
|
|
curl -X GET https://kf.kobotoolbox.org/api/v2/projects/ \ |
|
|
-H "Authorization: Token VOTRE_TOKEN_ICI"</pre> |
|
|
|
|
|
<p class="mt-4"><strong>Envoyer des données:</strong></p> |
|
|
<pre class="bg-gray-100 p-3 rounded overflow-x-auto text-sm"> |
|
|
// Soumettre une nouvelle soumission |
|
|
curl -X POST https://kf.kobotoolbox.org/api/v2/assets/ASSET_ID/data/ \ |
|
|
-H "Authorization: Token VOTRE_TOKEN_ICI" \ |
|
|
-H "Content-Type: application/json" \ |
|
|
-d '{"votre_question": "valeur_reponse"}'</pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="accordion-item border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="accordion-btn w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center" onclick="toggleAccordion(this)"> |
|
|
<span class="font-semibold text-green-700">Gestion Avancée des Permissions</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-4 bg-white"> |
|
|
<p><strong>Rôles disponibles:</strong></p> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li><strong>Owner:</strong> Accès complet au projet</li> |
|
|
<li><strong>Editor:</strong> Peut modifier le formulaire et voir les données</li> |
|
|
<li><strong>Viewer:</strong> Peut seulement voir les données</li> |
|
|
<li><strong>Data Collector:</strong> Peut seulement soumettre des données</li> |
|
|
</ul> |
|
|
|
|
|
<p class="mt-4"><strong>Configuration:</strong></p> |
|
|
<p>1. Allez dans les paramètres du projet</p> |
|
|
<p>2. Sélectionnez l'onglet "Permissions"</p> |
|
|
<p>3. Ajoutez des utilisateurs et assignez des rôles</p> |
|
|
<p>4. Pour des permissions plus granulaires, utilisez les "Shared Views"</p> |
|
|
|
|
|
<div class="mt-4 bg-green-50 p-3 rounded border border-green-200"> |
|
|
<p class="text-sm text-green-700"><strong>Cas d'usage:</strong> Créez une vue partagée qui ne montre que certaines colonnes des données pour les enquêteurs sur le terrain.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gray-100 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ce qu'en disent nos utilisateurs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-2xl"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"En tant qu'ONG, KoboToolbox a révolutionné notre collecte de données sur le terrain. La courbe d'apprentissage est douce même pour nos bénévoles les moins techniques."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Marie Dupont</h4> |
|
|
<p class="text-gray-500 text-sm">Coordinatrice, Aide Humanitaire</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-2xl"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"L'API de KoboToolbox s'intègre parfaitement à notre système de gestion. Nous avons automatisé tout le flux de données de nos recherches en santé publique."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Dr. Jean Martin</h4> |
|
|
<p class="text-gray-500 text-sm">Chercheur en Épidémiologie</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-2xl"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"Les fonctionnalités avancées comme la logique de saut et les calculs en temps réel ont réduit nos erreurs de saisie de 60%. Un outil indispensable pour nos enquêtes."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Sophie Leroy</h4> |
|
|
<p class="text-gray-500 text-sm">Responsable Études de Marché</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-blue-700 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à maîtriser KoboToolbox?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des milliers d'organisations qui utilisent KoboToolbox pour des collectes de données efficaces.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-blue-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg">Commencer Maintenant</button> |
|
|
<button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-blue-600 transition">Voir la Documentation</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-cube mr-2"></i> KoboToolbox Guide |
|
|
</h3> |
|
|
<p class="text-gray-400">Ressources pour apprendre KoboToolbox à votre rythme, quel que soit votre niveau.</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Ressources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation Officielle</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Forum Communautaire</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Tutoriels Vidéo</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Niveaux</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Débutant</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Intermédiaire</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Expert</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Certification</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@koboguide.com</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-globe mr-2"></i> koboguide.com</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 KoboToolbox Guide. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function showTab(tabId) { |
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(`${tabId}-tab`).classList.add('active'); |
|
|
|
|
|
|
|
|
const progressBar = document.querySelector('.progress-bar'); |
|
|
if (tabId === 'beginner') { |
|
|
progressBar.style.width = '25%'; |
|
|
} else if (tabId === 'intermediate') { |
|
|
progressBar.style.width = '60%'; |
|
|
} else if (tabId === 'expert') { |
|
|
progressBar.style.width = '100%'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleAccordion(button) { |
|
|
const item = button.closest('.accordion-item'); |
|
|
const content = item.querySelector('.accordion-content'); |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
content.classList.toggle('open'); |
|
|
icon.classList.toggle('rotate-180'); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
showTab('beginner'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=ISSAKAO/kobo-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
