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 personnification
   • 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.

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.

• Insertin d’icones : Vous pouvez insérer des icones grâce à la version 6 de FontAwesome.
  Par exemple : <i class="fa-regular fa-hand-peace"></i> produira .
  Retrouvez toutes les icones 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}\).
  Plus d’information sur les codes sur la page Zeste de savoir - Des Mathématiques.

• 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. Vous aurez toujours besoin d’un accès à 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. Sauvegarde : Entrez un nom de fichier et cliquez sur "Enregistrer au format HTML" pour télécharger votre travail.
5. Impression : Cliquez sur "Imprimer en PDF" pour générer une version imprimable de votre carte. Pensez à activer l’impression des arrières-plans.
6. 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. Vous pouvez référencer une image en ligne via son URL ou utiliser une image stockée localement sur votre ordinateur.
2. Pour utiliser une image locale, enregistrez d’abord votre page HTML (en téléchargeant et extrayant cette archive ) et travaillez en local en ouvrant la page index.html.
3. Ensuite, placez ensuite vos images (avec de bonnes dimensions) dans le même dossier que votre fichier HTML ou dans un sous-dossier.
4. Dans l’éditeur HTML, modifiez le chemin dans l’attribut src de l’élément <img> ou background-image de la CSS interne pour pointer vers votre fichier image (par exemple, src="images/mon-image.jpg" ou background-image: url('images/mon-image.jpg');).

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. Voici les classes disponibles :
   • card-blue pour le bleu
   • card-yellow pour le jaune
   • card-green pour le vert
   • card-purple pour le violet
   • card-orange pour l’orange
   • card-red pour le rouge
   • le gris est la couleur par défaut

Par exemple, pour changer la couleur d’une carte en vert, remplacez la classe dans la div de cette manière :

<div class="card card-green">
    <!-- Contenu de la carte ici -->
</div>

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. Veillez à ajuster la classe de couleur si nécessaire. Voici un exemple de code pour ajouter une nouvelle carte :

<div class="card card-blue">
    <!-- Contenu de la nouvelle carte ici -->
</div>

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.