CréaCarte
Un Éditeur de Carte Interactif

Table des matières

1. Introduction
2. Fonctionnalités (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. Bug connus
8. 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.
• Chargement de fichiers enregistrés : Importez facilement des fichiers .html pour reprendre votre travail.
• Sauvegarde locale dans le navigateur : Enregistrez vos projets directement dans votre navigateur pour y accéder ultérieurement.
• Personnalisation Avancée : Utilisez diverses options de style pour personnaliser l’apparence de vos cartes.
• Insertion d’icônes : Utilisez 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 : Utilisez \(\LaTeX\) grâce à Mathjax.
  Exemple : $Aire_{triangle}=\dfrac{base\times{}hauteur}{2}$ donne : \(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.
• Impression au format PDF : Imprimez au format PDF en activant l’impression des arrière-plans (voir image ci-dessous).

• Modèles intégrés : Deux modèles de cartes sont disponibles :
  • Classique : idéal pour des cartes simples (verso unique).
  • FlashCards : conçu pour des cartes recto-verso avec questions/réponses ou autres contenus interactifs.

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.
• Vous pouvez également télécharger et décompresser cette archive , puis ouvrir index.html (sans connexion Internet).

Utilisation

1. Lancement de l’application : Ouvrez le fichier index.html dans votre navigateur.
2. Édition de carte : Entrez le contenu HTML dans l’éditeur Codemirror à gauche de votre écran.
3. Visualisation : Observez le rendu dans la fenêtre de prévisualisation à droite.
4. Chargement de fichiers : Cliquez sur "Charger un fichier" pour importer un fichier .html.
5. Modes d’affichage : Sélectionnez le mode souhaité (Code uniquement, Aperçu uniquement, ou les deux).
6. Sauvegarde : Enregistrez vos cartes localement ou exportez-les au format HTML.
7. Impression : Cliquez sur "Imprimer en PDF". Pensez à activer l’impression des arrière-plans.
8. Modèles prédéfinis : Choisissez entre les modèles "Classique" et "FlashCards" selon vos besoins (bouton à droite de l’icône FontAwesome "info").

Guide de Personnalisation

Modification des Textes

1. Localisez le bloc de texte dans l’éditeur HTML.
2. Modifiez le texte entre les balises appropriées (ex. <div class="card-title">Votre Titre</div>).
3. Les modifications sont visibles immédiatement.

Modification des Images

1. Référencez une image en ligne ou utilisez un fichier local.
2. Placez vos images dans le dossier du fichier HTML.
3. Modifiez le chemin dans l’attribut src ou background-image.

Ajustement manuel des images de fond

Pour ajuster la taille ou la position d’une image, vous avez deux options :

• Option 1 : Préparer et ajuster vos images au préalable (utiliser un logiciel de retouche comme LibreOffice Impress pour leur donner la taille adéquate). Vous pouvez vous aidez de cette image.
• Option 2 : Pour les utilisateurs avancés, modifier la balise <div class="card-image"> par ce code :

<div class="card-image"
  style="background-image: url('hibou-calc.png');
         background-size: 75%;
         background-position: 50% 50%;
         background-repeat: no-repeat;
         background-color: LightSteelBlue;">
</div>

Ce qui donne ce résultat :

Vous pouvez ensuite ajuster la taille, la position et la couleur de fond selon vos souhaits.

Note : LightSteelBlue fait partie d’une longue liste de couleurs CSS disponibles ici : CSS Colors - Sur le site W3Schools

Modification des Couleurs des Cartes

1. Sélectionnez la div de la carte souhaitée.
2. Changez la classe pour ajuster la couleur :
   • card-blue, card-yellow, card-green, etc.

Ajout de Nouvelles Cartes

• Première solution : Depuis la mise à jour, il est possible d’ajouter automatiquement une paire de cartes en cliquant sur le bouton dédié.
• Deuxième solution : Copier-coller le code d’une carte existante. Attention, les cartes fonctionnent par paires. Il faut donc copier-coller l’ensemble du bloc commençant par <div class="duo-card"> et terminant par </div> correspondant à la fin de la deuxième carte du duo.

Quelques exemples

Modèle classique : Périmètre et aire de figures usuelles

Code HTML

Consulter l’exemple ici

Aperçu - Avant et après impression

 

Modèle FlashCards : Droites remarquables du triangle

Code HTML

Accéder au modèle modifiable dans CréaCarte

Aperçu - Avant impression

Bugs connus

Erreur de chargement avec MathJax

• Lorsque le code \(\LaTeX\) est un peu complexe, cela peut entrainer une erreur de prise en charge par MathJax au chargement.

• Il est possible de corriger ce problème :

  1. Copier le code du modèle de vos cartes
  2. Charger le modèle classique dans la page principale de l’application
  3. Réactualiser la page (Ctrl+R) avec le modèle classique.
  4. Coller le code de vos cartes dans la fenêtre de code de cette page.

Contribution et licence

Contribution

Les contributions sont les bienvenues ! Veuillez soumettre vos suggestions via La Forge.

Licence

CréaCarte est sous licence :
.
Vous êtes libre de l’utiliser, de le partager ou de l’intégrer en créditant son auteur : Cyril Iaconelli