CréaCarte
Un Éditeur de Carte Interactif

Table des matières

1. Introduction
2. Fonctionnalité (avec une note d’aide à l’impression )
3. Prérequis/Installation
4. Utilisation
5. Guide de personnalisation
   • Modifier le texte
   • Modifier les images
   • Modifier les couleurs des cartes
   • Ajouter de nouvelles cartes
6. Un exemple : Périmètre et aire de figures usuelles
7. Contribution et licence

Documentation au format pdf :

Introduction

CréaCarte est une application web destinée à concevoir et éditer des cartes interactives personnalisées à imprimer. Elle est idéale pour les enseignants, les créateurs de contenu éducatif, ou toute personne intéressée par la création de supports pédagogiques visuels.

CréaCarte a aussi un cousin cartesMD conçu par Cédric Eyssette avec lequel vous pouvez également créer en Markdown ce type de support.

Fonctionnalités

• Éditeur en Temps Réel : Modifiez et visualisez instantanément les changements apportés à vos cartes.
• Sauvegarde et Exportation : Sauvegardez vos cartes en format HTML ou imprimez-les directement en PDF.
• Personnalisation Avancée : Utilisez diverses options de style pour personnaliser l’apparence de vos cartes.
• Insertion d’icônes : Vous pouvez insérer des icônes grâce à la version 6 de FontAwesome.
  Par exemple : <i class="fa-regular fa-hand-peace"></i> produira .
  Retrouvez toutes les icônes disponibles sur cette page.
• Écrire des maths : Vous pouvez écrire des équations mathématiques en \(\LaTeX\) grâce à Mathjax.
  Par exemple : $Aire_{triangle}=\dfrac{base\times{}hauteur}{2}$ donnera : \(Aire_{triangle}=\dfrac{base\times{}hauteur}{2}\).
• Mode d’affichage interactif :
  • Affichez uniquement le code.
  • Affichez uniquement les cartes.
  • Affichez les deux fenêtres côte à côte.

Gérez vos préférences d’affichage en un clic !

• Impression au format PDF : Imprimez au format PDF. Pensez à activer l’impression des arrières-plans (cf image ci-dessous).

Prérequis/Installation

Prérequis

• Un navigateur web moderne (Chrome, Firefox, Safari).
• Accès à Internet pour le chargement des ressources externes (Codemirror, FontAwesome et Mathjax).

Installation

• Aucune installation n’est nécessaire. L’application fonctionne directement dans votre navigateur web.
• Pour plus de simplicité, vous pouvez télécharger et décompresser cette archive et ensuite ouvrir et travailler sur la page index.html (sans avoir besoin d’accès à l’internet).

Utilisation

1. Lancement de l’application : Ouvrez le fichier index.html dans votre navigateur.
2. Édition de carte : Entrez le contenu HTML directement dans l’éditeur Codemirror à gauche de votre écran.
3. Visualisation : Observez le rendu dans la fenêtre de prévisualisation à droite.
4. Modes d’affichage : Sélectionnez le mode souhaité (Code uniquement, Aperçu uniquement, ou les deux).
5. Sauvegarde : Entrez un nom de fichier et cliquez sur "Enregistrer au format HTML" pour télécharger votre travail.
6. Impression : Cliquez sur "Imprimer en PDF" pour générer une version imprimable de votre carte. Pensez à activer l’impression des arrières-plans.
7. Reprendre son travail : Copier-coller le code enregistré dans la fenêtre de code à gauche.

Guide de Personnalisation

Modification des Textes

Pour modifier les textes sur vos cartes :

1. Localisez le bloc de texte dans l’éditeur HTML à gauche de l’écran.
2. Modifiez directement le texte entre les balises appropriées (par exemple, <div class="card-title">Votre Titre Ici</div>).
3. Les modifications seront immédiatement visibles dans la fenêtre de prévisualisation à droite.

Modification des Images

Pour changer les images :

1. Référencez une image en ligne via son URL ou utilisez une image stockée localement.
2. Placez vos images dans le même dossier que votre fichier HTML ou dans un sous-dossier.
3. Modifiez le chemin dans l’attribut src ou background-image pour pointer vers votre fichier image.

Modification des Couleurs des Cartes

1. Sélectionnez la div de la carte que vous souhaitez modifier.
2. Changez la classe de la carte pour correspondre à la couleur désirée. Classes disponibles :
   • card-blue, card-yellow, card-green, card-purple, card-orange, card-red, card-pink, card-turquoise, card-gold, card-silver, card-bronze.

Ajout de Nouvelles Cartes

Pour ajouter de nouvelles cartes, copiez et collez le code HTML d’une carte existante, puis modifiez son contenu selon vos besoins.

Un exemple : Périmètre et aire de figures usuelles

Le code

Le code HTML est consultable ici .

Aperçu du résultat

À l’impression

En image

En pdf

• Version téléchargeable du document

Après découpage et collage

Contribution et licence

Contribution

Les contributions à ce projet sont les bienvenues ! Veuillez soumettre vos bugs, suggestions et demandes de fonctionnalités via le système de tickets de La Forge sur ce projet.

Licence

CréaCarte est distribué sous la licence 4.0.
Vous êtes libre de l’utiliser, le modifier, et le distribuer en créditant son auteur.