Waielbi

Mise en page de figures construites avec GeoGebra

Waielbi — 2021-01-28T12:53:55Z

Les dernières versions de GeoGebra ne proposent plus d'export en svg avec l'option d'échelle qui permettait de faire correspondre une unité GeoGebra à 1 cm. Il faut désormais ruser pour que notre svg soit dimensionné correctement avant de l'importer dans LibreOffice... On ne peut à présent plus se passer d'Inkscape comme intermédiaire entre GeoGebra et Writer.

Objectif

On souhaite utiliser GeoGebra pour créer une figure qui sera mise en page dans un traitement de texte dans le but d'être imprimée et photocopiée (support d'activité, illustration de leçon, évaluation, affiche,...). Une opération de « copier-coller » entre GeoGebra et notre traitement de texte ne suffira pas car les dimensions ne seront pas conservées, de plus le résultat sera une image matricielle, ce qui n'est pas forcément intéressant pour de la géométrie.

Plusieurs méthodes

La méthode qui nous garantit les meilleurs résultats utilise le format svg (format vectoriel ouvert utilisé par différents logiciels). Pour cela on utilisera Inkscape et OpenOffice/LibreOffice.
La méthode la plus rapide (de peu) est de d'utiliser l'imprimante pdf de notre PC car une option d'échelle permet de faire correspondre une unité GeoGebra à 1 cm. Mais le résultat est une image matricielle de qualité moyenne. L'autre méthode donne une qualité meilleure puisqu'elle reste vectorielle.

Dans nos méthodes, nous allons dimensionner cette figure :


Figure à dimensionner exactement


Figure à dimensionner: Les côtés de notre triangle doivent mesurer 4 cm...

Méthode « vite-fait-mal-fait »

Cela fonctionne pour la version web et PC de GeoGebra Geometry et de GeoGebra Classique 6.

Une fois la figure construite, choisir « Aperçu avant impression » dans le menu Hamburger ;
Vérifier que l'on exporte le graphique à 1 pour 1cm :

Impression à 1:1
Cliquer sur imprimer ;
Choisir l'imprimante pdf de votre système, ici « Imprimer au format pdf » sur un PC en windows 10 :

Créer un fichier PDF avec l'imprimante virtuelle
Avec « Plus de paramètres », supprimer les en-tête et pied de page éventuels puis cliquer sur « Enregistrer »
Et voici le résultat : un fichier pdf

La figure exportée en pdf 1:1
On pourrait se dire « allez hop, on imprime... », mais on serait loin de compte :

Mais, mais, wtf !?
On ouvre notre fichier pdf avec Inkscape et on copie l'image, au besoin on dégroupe les éléments pour se débarrasser de la page :

La figure pdf dans Inkscape
On lance LibreOffice et on créé un nouveau dessin en mode paysage [1], on y colle notre image, on peut alors rogner pour supprimer le vide autour, ici j'ai collé un bloc de 4cm de large pour vérifier les dimensions :

L'image dans LibreOffice...
Une fois mise en page, on imprime la figure...

Après impression, les mesures sont correctes...
Voici le fichier utilisé pour l'impression

La figure mise en page

Méthode tout vectoriel

Pour une figure plus précise qui reste vectorielle et modifiable... Cette méthode se base sur un élément d'échelle à incorporer dans notre figure. On supprimera cette échelle une fois que la figure aura les bonnes dimensions.

Ajouter une « échelle » qui égale ou dépasse la plus grande dimension de notre figure, elle peut être horizontale ou verticale, cela peut être un cadre dessiné avec l'outil polygone. On peut afficher la valeur de cet élément pour mémoire :

On ajoute un élément horizontal plus grand que la figure...
On demande à GeoGebra de supprimer la grille avant d'exporter avec le menu « Exporter en » → « svg » :

Exporter en svg
On ouvre ce svg avec Inkscape et on dégroupe les éléments (clic droit → dégrouper). on supprime le fond et les extrémités de notre segment-échelle :

Supprimer les extrémités de l'échelle...
Sélectionner tout (ctrl-A) puis grouper les éléments (clic droit → grouper) :

Sélectionner tout puis grouper
Passer les mesures en mm, activer le verrou de proportionnalité ( → ) et donner la largeur réelle de la sélection, ici 14 cm :

Redimensionner proportionnelement en mm
Dégrouper les éléments et supprimer notre échelle (si on a fait un cadre, on peut se dispenser de cette étape) ;
Dans le menu « Fichier » → « Propriétés du document... », cliquer sur « Ajuster la page au dessin ou à la sélection, enregistrer. Voici le fichier obtenu :

La figure enregistrée en svg
Ouvrir le traitement de texte et insérer l'image svg pour la mise en page :

Figure mise en page - Méthode tout vectoriel
Résultat imprimé :

La figure mise en page et imprimée...

L'avantage de cette méthode c'est que l'on peut modifier les éléments dans l'étape Inkscape : changer les épaisseurs, les couleurs, ajouter, supprimer des points, ...

[1] il faut éviter que les dimensions de la page contraignent la figure et provoquent son redimensionnement. Si la figure dépasse le A4, il faut configurer la page en A3

Sozi et SPIP

Waielbi — 2019-12-09T08:41:04Z

Sozi est un outil créé par Guillaume Savaton pour produire des présentations animées à partir de fichiers SVG. Ces présentations sont utilisables lors de cours, conférences, présentations, ... et elles trouveront naturellement leur place sur un site car leur support est fait pour le web. Comment intégrer ces créations sur un site SPIP ?

Sozi

Initialement Sozi était un plugin pour Inkscape qui permet d'animer les fichiers SVG à l'aide de js. Le code js était directement ajouté au fichier SVG. Depuis quelques temps Sozi est une application à part entière qui utilise le fichier SVG et créé l'animation dans un fichier html à côté. Au final on a donc deux types de Sozi selon leur période de création :

des fichiers Sozi-svg créés directement dans Inkscape comme cet exemple, ce n'est plus la bonne façon de procéder...
des fichiers Sozi-html créés par Sozi : exemple.

Le but de cet article n'est pas de montrer comment on créé les animations, pour cela on ira voir ce tutoriel de l'auteur de Sozi, mais plutôt le « comment les intégrer à un article SPIP ».

Certes, Sozi nécessite d'avoir apprivoisé un logiciel de dessin vectoriel comme Inkscape. Mais une fois à l'aise avec Inkscape, Sozi présente plusieurs avantages :

on utilise les présentations sur n'importe quel PC du moment qu'il possède un navigateur ;
la mise en ligne de ces présentations est assez simple ;
c'est très adapté pour des tutoriels car cela prend moins de place sur une page et la navigation d'une diapo à l'autre est facile ;
enfin, on peut aussi créer des documents non linéaires comme avec Impress/PowerPoint ou ajouter du contenu vidéo...

Au départ il y a le fichier SVG...

Le point de départ de notre présentation est le fichier SVG que l'on va créer. C'est lui qui contient tous les éléments graphiques et textuels. Là, Inkscape s'impose comme l'outil le plus adapté. Remarque, il faudra faire attention aux polices utilisées dans le fichier, si elles sont un peu exotiques il y a de fortes chances que le visiteur du site ne les ait pas installées et... qu'elles ne s'affichent pas. On peut utiliser les services de nano [1] pour incorporer nos polices au fichier SVG.

SVG pur ou mix SVG / images matricielles ?

La première chose est de savoir si on va avoir besoin de fichiers graphiques matriciels comme des jpg ou des png. Si on produit du svg pur, tout tiendra dans le futur fichier Sozi-html et les choses seront faciles à intégrer dans notre site SPIP. Par contre si on doit utiliser des images jpg ou png dans notre présentation deux cas se présentent :

les incorporer au fichier svg, on obtient un seul fichier mais son poids peut être élevé... voici un exemple avec deux images de 350 x 350 px« tinifiées » [2], le svg final pèse 133ko et le sozi-html 193ko :

Présentation sozi aves jpg et png incorporés
les lier au fichier svg, le fichier svg reste léger mais pour qu'il affiche les images il faut les déplacer avec lui et conserver le lien relatif, concrètement on a deux méthodes possibles :
- on place les jpg et png dans un dossier img au même niveau, mais on ne peut plus uploader cela comme un document SPIP, il nous faut un accès ftp pour déposer notre présentation sur le serveur ;
- une fois le svg terminé, on charge nos images matricielles dans la médiathèque de SPIP et on modifie les url des images dans Inkscape en les remplaçant par les url absolues des fichiers dans SPIP, exemple :
  
  Avec des images liées importées dans la bibliothèque SPIP

On retrouve les url des images chargées dans SPIP en ajoutant « https://www.son-site-spip.fr/IMG/png/ » devant le nom du fichier en fonction du type de fichier (jpg, png, gif, ...). Par exemple photo_01.jpg une fois chargée dans la médiathèque se trouve à l'adresse https://www.waielbi.net/IMG/jpg/photo_01.jpg... on peut facilement retrouver cette adresse dans la médiathèque :


Url d'une image sans la médiathèque SPIP

Dans Inkscape, un clic-droit → « Propriétés de l'image... » permet d'afficher son url et de la modifier :


Modifier l'url d'une image incorporée dans Inkscape

SPIP et les SVG

SPIP se méfie des fichiers SVG car ils peuvent contenir du code js, et c'est le cas des svg produits par le plugin Sozi pour Inkscape. Les fichiers téléversés dans un article, sont « sanitizés [3] », c'est à dire que SPIP enlève les éléments potentiellement dangereux comme le code javascript à l'affichage (via les balises et . Du coup l'interactivité des Sozi ancienne méthode n'est pas utilisable directement, il faut appeler le fichier manuellement dans une balise html. Une raison de plus pour abandonner le plugin Sozi au profit de l'appli.

Car, les Sozi-html téléversés dans SPIP par le formulaire « Ajouter une image ou un document » peuvent être affichés directement dans une page.

Incorporer un Sozi dans une page SPIP

La méthode de base

On insère la balise document dans le texte de l'article. Une icône html est insérée, le visiteur qui clique dessus et affiche le Sozi dans la fenêtre courante. Facile mais pas très pratique, car à la fin de la présentation le visiteur ne peut revenir sur la page SPIP simplement sauf à cliquer sur la flèche « Précédent » du navigateur autant de fois que nécessaire...


Présentation sozi aves jpg et png incorporés

La méthode embeded

Attention à la version de SPIP ! En effet depuis la version 4, les documents ne sont plus gérés de la même façon et la balise emb a disparu [4]. L'utiliser affichera : mais rien de plus. Ce site est en SPIP 4, il n'affiche donc pas les balise emb.

Sur SPIP 3.x, une fois notre Sozi-html téléversé, on peut l'inclure par la balise
ce qui l'affiche dans la page. Noter que :

si notre fichier svg n'a pas de fond, la couleur de fond est celle du site (gris ici). Cela peut se régler par l'ajout d'un élément rectangulaire coloré en arrière plan ou en ajoutant une couleur de fond dans les propriétés du document Inkscape (Menu « Fichier » → « Propriétés du document ») ;
si on veut scroller la page vers le bas/haut, quand on passe sur le Sozi, ça zoome/dézoome au lieu de scroller. On peut empêcher cela dans Sozi en décochant la flèche du curseur « Autoriser le zoom » dans Sozi :

Options de visionnage de Sozi

La méthode mediabox

Elle consiste à utiliser le plugin MediaBox inclus dans SPIP. Cela suppose de récupérer l'url de notre fichier Sozi-html :


Copier l'url du Sozi téléversé, clic-droit sur l'icône du document

Ensuite on créé un lien sur du texte ou sur une image en utilisant les classes mediabox et boxiframe :

https://www.waielbi.net/IMG/html/sozi_spip_img_incorporees.html" class='mediabox boxIframe boxWidth-900px boxHeight-600px'>image ou texte du lien

Ce qui donne :

Icône ou lien sur lequel on clique pour afficher la présentation Sozi...

On reste sur la page et la présentation Sozi est mise en valeur dans la fenêtre modale que l'on peut paramétrer (SPIP → Configuration → Gestion des plugins → Mediabox). Une fois la fenêtre modale fermée, le visiteur reviens naturellement à la page en cours.

Et pour les présentations importées en ftp?

Pour les présentations avec de nombreuses images jpg, png ou gif et à condition d'avoir un accès ftp sur le site SPIP, le plus simple est de lier les images au lieu de les incorporer dans Inkscape puis de téléverser l'ensemble dans un dossier à la racine du site. Cela permet de créer des présentations qui restent acceptables en terme de poids et de temps de préparation. Ensuite on créer un lien dans notre page SPIP, éventuellement par la méthode Mediabox. Par exemple :

Cette présentation a été uploadée en ftp car elle utilise de nombreuses copies d'écran

Méthode iFrame

Exemple ici avec la présentation de Sozi sur le site de l'auteur, Guillaume Savaton : connaissant l'adresse du fichier (https://sozi.baierouge.fr/presentations/this-is-not-a-slideshow.sozi.html), on créé un iFrame dans la page SPIP avec ce code :

https://sozi.baierouge.fr/presentations/this-is-not-a-slideshow.sozi.html"> ;

Ce qui donne :

[1] Nano - https://vecta.io/nano - est un site qui permet d'optimiser le code svg pour le tinifier mais aussi d'incorporer les polices au fichier svg.

[2] avec le service en ligne tinypng

[3] Ceci est pris en charge par le plugin SafeHtml depuis Spip 4.2 - voir https://www.spip.net/fr_article6806.html

[4] Voir cette page : https://www.spip.net/fr_article6428.html - L'ajout de la variable define ('_COMPORTEMENT_HISTORIQUE_IMG_DOC_EMB', true); dans le fichier mes_options.php ne rétablit pas le comportement des balises emb de SPIP3 dans SPIP4.

Dessins SVG

Waielbi — 2019-10-10T17:35:00Z

OpenClipart nous manque, en attendant qu'un partage de fichiers SVG libres renaisse quelque-part, voici les miens...

C'est en licence CC-BY-NC-SA


Dragon: Dragon, Lucca, San Martino


Griffon & Dragon: griffon, dragon, Lucca, San Martino


Aigle: aigle, eagle, Lucca, San Martino


Lion: lio, Lucca, San Martino


Carte d'identité: ID card, carte,identité


Personnage grec: silhouette, personnage, grec


Paysan grec: paysan, paesan, greek, grec, silhouette


Chèvre volante: chèvre, goat


Greek Goat: chèvre, goat, grecque, greek, amphore


Méthodologie angle droit: équerre, angle, obtus, aigu, droit, perpendiculaire


Cube: cube, face, arête, sommet, edge, vertex, vocabulaire, lexique, polyèdre


Greek Sphinx: grec, greek, sphinx

Vocabulaire direction du vent vent, wind, onshore, offshore, side shore, side on, vent de terre	Tablette Tab, Android	Clé OTP OTP, One Time Password	Minilivre
Icônes « Partager » share, partager, icon	iTruc iOS iPad	Icônes ENTBox	BlueBot Un BlueBot vu du ciel
Tablette