[Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

Julientroploin · Le 05/11/2016, à 12:38

Bonjour,

je voudrais mettre à disposition dans un Moodle des documents que j'ai déjà créé en format *.odt sous Libreoffice. Pour cela, j'ai 2 possibilités :
- un export pdf (je sais faire)
- une création de page html dans Moodle (je suis globalement capable de déchiffrer du html, mais je n'y connais pas grand chose).

C'est le 2e point qui me pose problème : j'ai bien essayé de faire un simple copier-coller du contenu de mon *.odt dans l'éditeur html de Moodle, mais il y a souvent des problèmes de mises en page difficiles à régler car l'éditeur html embarqué dans moodle est assez austère (pas de coloration ou de séparation contenu/mise en forme, on a un gros bloc et débrouille toi...).
De plus, le code html que j'obtiens de cette façon me semble inutilement compliqué

<p align="justify" style="margin-bottom: 0cm; border: 1px solid #000000; padding: 0.05cm 0.14cm; font-weight: normal; line-height: 100%; text-decoration: none">
<font face="Liberation Sans, sans-serif"><font size="6" style="font-size: 26pt"><font color="#ff0000"><u><b>Bilan
:</b></u></font><font color="#ff0000"> Le volcanisme se manifeste par
des émissions de laves et de gaz. On distingue deux grands types
d’éruptions&nbsp;:</font></font></font></p>
<p align="justify" style="margin-bottom: 0cm; border: 1px solid #000000; padding: 0.05cm 0.14cm; font-weight: normal; line-height: 100%; text-decoration: none">
<font face="Liberation Sans, sans-serif"><font size="6" style="font-size: 26pt"><font color="#ff0000">-
Les </font><font color="#ff0000"><u>éruptions effusives </u></font><font color="#ff0000">qui
émettent des </font><font color="#ff0000"><u>laves fluides</u></font><font color="#ff0000">
et forment de longues coulées. Elles s'accumulent et forment
l’édifice volcanique en cône.</font></font></font></p>
<p align="justify" style="margin-bottom: 0cm; border: 1px solid #000000; padding: 0.05cm 0.14cm; font-weight: normal; line-height: 100%; text-decoration: none">
<font face="Liberation Sans, sans-serif"><font size="6" style="font-size: 26pt"><font color="#ff0000">-
Les </font><font color="#ff0000"><u>éruptions explosives</u></font><font color="#ff0000">
qui sont très violentes. Elles se caractérisent par l’émission
de brèves nuées ardentes et des panaches de gaz et de cendres.
L’activité explosive est souvent suivie par la formation d’un
dôme dû à l’émission de </font><font color="#ff0000"><u>lave
visqueuse</u></font><font color="#ff0000"> qui ne s’écoule pas.</font></font></font></p>

pour afficher :
Bilan : Le volcanisme se manifeste par des émissions de laves et de gaz. On distingue deux grands types d’éruptions :
- Les éruptions effusives qui émettent des laves fluides et forment de longues coulées. Elles s'accumulent et forment l’édifice volcanique en cône.
- Les éruptions explosives qui sont très violentes. Elles se caractérisent par l’émission de brèves nuées ardentes et des panaches de gaz et de cendres. L’activité explosive est souvent suivie par la formation d’un dôme dû à l’émission de lave visqueuse qui ne s’écoule pas.

Y'a t il une méthode plus propre et rapide ?

J'ai bien trouvé une alternative pour éditer plus facilement le code mais c'est loin d'être la panacée :
- créer un document html avec libreoffice
- y copier-coller le contenu de mon odt
- afficher la source pour faire les modif qui m'intéresse. Là au moins il y a une séparation contenu (en noir) et mise en forme (en gris)

Dernière modification par Julientroploin (Le 05/11/2016, à 19:05)

Pascaltech · Le 08/11/2016, à 16:22

Bonjour,

Dans gedit, en ajoutant <html> en première ligne et </html> en dernière, tu obtiens la coloration syntaxique de ton fichier.

Il y a beaucoup de répétitions de style dans ton code, ce qui est simplifié avec les CSS. Un lien, si nécessaire :

CSS

JBF · Le 08/11/2016, à 17:03

J'aurais commencé par essayer ceci : Fichier > Enregistrer sous -> choisir le format html -> ouvrir le fichier html avec un éditeur de texte -> copier-coller ce qu'il faut.

Pascaltech · Le 08/11/2016, à 20:50

Egalement, tu pourrais créer un fichier html pour obtenir un head selon les souhaits de résultats, puis d'associer les styles à partir de ce head.

Le gros travail, c'est d'associer un style à chaque paragraphe ou titre du document.

Julientroploin · Le 09/11/2016, à 19:56

Merci pour vos réponses !
J'avais tapé un gros pavé, mais ça me semble imbuvable, donc je vous fais un [tl;dr], vous pourrez lire le détail (surtout les extrait de code) ci-dessous au besoin :

- j'ai désormais un fichier avec un en-tête qui définit des styles et du coup un code avec moins de répétitions. Le problème venait du fait qu'au cours des multiples éditions de l'*.odt, j'avais utilisé à la fois les styles et le formatage direct. Pour régler cela, j'ai dû reprendre manuellement une grande partie du formatage de mon *.odt après avoir utilisé "effacer le formatage direct" dans LO. Donc si il existe plus rapide, je suis toujours preneur pour les prochaines fois.

- l'éditeur html de Moodle ne tiens pas compte de cet en-tête : lorsque je valide après avoir inséré le code, il le réduit à 4 pauvres lignes inutiles pour la mise en forme. Je suis donc toujours dans l'impossibilité de passer de mon *.odt à un *.html correctement mis en forme dans Moodle.

- pour obtenir une page correctement mise en forme je dois donc passer par du formatage direct en mode WYSIWYG dans l'éditeur html de Moodle. Le serpent se mord la queue...

- du coup, je me demande si il existe une autre syntaxe qui permette d'obtenir les styles sans passer par un header...

De nouvelles idées ? Des conseils ?

=================================================================================================

Pour info, j'ai tenté plusieurs choses depuis mon message sans grand succès (je préfère tout mettre pour mémoire) :
- je me suis aperçu que la coloration syntaxique de LO était foireuse (ou que je la comprend mal) mais alors que je pensais avoir le contenu en noir et la mise en forme en gris, ce n'est pas toujours vrai...
- j'ai testé Bluefish pour voir ce que ça donnait, mais j'ai un peu l'impression d'utiliser un bazooka pour écraser une mouche. En tout cas je retiens que ce logiciel a l'air très bien quand on veut créer un fichier html à partir de rien.
- j'ai essayé d'y coupler tidy-html qui est présenté comme pouvant simplifier automatiquement le code. Mais il fait crasher Bluefish.
- du coup j'ai testé tidy en ligne de commande en allant au plus simple

tidy -i Fonctionnement-clean.html  -o tidy-test.html

il a l'air de passer mon fichier mais n'enregistre rien et ne quitte pas une fois terminé. Obligé de quitter le terminal pour l'arreter.
J'ai tenté avec une copie test de mon fichier et la commande

tidy -imu Fonctionnement-clean.html

là ça passe en enregistrement directement sur ma copie du fichier. Le code est bien modifié (balises changées ou ajoutées) mais pas franchement simplifié. En plus, un problème traité par un noob en entraînant un autre : tidy modifie l'encodage des caractères et me donne des trucs comme "planÃ¨tes du systÃ¨me solaire lui-mÃªme situÃ© au sein dâ€™une galaxie nommÃ©e Voie lactÃ©e"

J'ai donc laissé le problème de coté (j'étais pris par le temps pour cette fois mais je continue à vouloir trouver une solution pour les prochaines).

Pascaltech a écrit :

Bonjour,
Dans gedit, en ajoutant <html> en première ligne et </html> en dernière, tu obtiens la coloration syntaxique de ton fichier.

Merci pour l'astuce ! Voilà qui est simple et facile à retenir, ça me servira sûrement à l'avenir. Pour cette fois, je pense que ce ne sera pas nécessaire : LO m'a créé un en-tête qui contient bien <html> :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title></title>
	<meta name="generator" content="LibreOffice 5.1.4.2 (Linux)"/>
	<meta name="created" content="2016-09-05T10:32:38.288000000"/>
	<meta name="changed" content="2016-11-05T17:52:59.614170975"/>
	<style type="text/css">
		@page { size: landscape; margin-left: 1cm; margin-right: 1cm }
		p { margin-bottom: 0cm; line-height: 100% }
		p.western { font-family: "Liberation Sans", sans-serif; font-size: 26pt }
		p.cjk { font-size: 10pt }
		h1 { margin-bottom: 0.21cm; color: #ff3333 }
		h1.western { font-family: "Liberation Sans", sans-serif; font-size: 33pt }
		h1.cjk { font-family: "Microsoft YaHei"; font-size: 18pt }
		h1.ctl { font-family: "Mangal"; font-size: 18pt }
		h2 { color: #ff3333 }
		h2.western { font-family: "Liberation Sans", sans-serif; font-size: 29pt }
		h2.cjk { font-family: "Microsoft YaHei"; font-size: 16pt }
		h2.ctl { font-family: "Mangal"; font-size: 16pt }
		p.bilan-western { margin-top: 0.2cm; color: #ff3333; font-family: "Liberation Sans", sans-serif; font-size: 26pt; text-align: justify; page-break-before: auto }
		p.bilan-cjk { margin-top: 0.2cm; color: #ff3333; font-size: 10pt; text-align: justify; page-break-before: auto }
		p.bilan-ctl { margin-top: 0.2cm; color: #ff3333; text-align: justify; page-break-before: auto }
		p.correction-western { margin-top: 0.2cm; color: #006600; font-family: "Liberation Sans", sans-serif; font-size: 26pt }
		p.correction-cjk { margin-top: 0.2cm; color: #006600; font-size: 10pt }
		p.correction-ctl { margin-top: 0.2cm; color: #006600 }
		p.mot-clé-western { direction: ltr; color: #ff3333; font-family: "Liberation Sans", sans-serif; font-size: 26pt; font-weight: bold; orphans: 0; widows: 0 }
		p.mot-clé-cjk { direction: ltr; color: #ff3333; font-size: 10pt; orphans: 0; widows: 0 }
		p.mot-clé-ctl { direction: ltr; color: #ff3333; orphans: 0; widows: 0 }
		p.trace-écrite-western { color: #000080; font-family: "Liberation Sans", sans-serif; font-size: 26pt }
		p.trace-écrite-cjk { color: #000080; font-size: 10pt }
		p.trace-écrite-ctl { color: #000080 }
		strong { background: transparent }
		strong.western { font-size: 26pt }
		strong.cjk { font-size: 10pt }
	</style>
</head>

Il y a beaucoup de répétitions de style dans ton code, ce qui est simplifié avec les CSS. Un lien, si nécessaire :
CSS

Effectivement, c'est ce que je voulais dire quand je disais que le code me semblait inutilement compliqué...
Les CSS, est-ce que ça correspond à ce qui est dans l'en-tête que j'ai joint ci dessus ? (après : <style type="text/css">)
ou bien les CSS et le head dont tu parles dans ton 2e message sont ils 2 choses différentes ?

Si c'est bien ce type d'en tête que tu proposes, je pense que le test que j'ai fait entre temps donne le résultat escompté.
Je m'explique : ne trouvant pas de solution "directe", je me suis dit que les répétitions dans le code venaient certainement du fait que j'utilise des styles personnalisés dans LO + du formatage direct à certains endroit.
J'ai donc repris (une copie de) mon *.odt, tout sélectionné et choisi "effacer le formatage direct" puis harmonisé manuellement tout le document en utilisant les styles pour obtenir la même présentation.

J'ai donc désormais pour le passage que je donnais en exemple :

<p class="bilan-western"><b>Bilan</b> : Le volcanisme se manifeste
par des émissions de laves et de gaz. On distingue deux grands types
d’éruptions&nbsp;:</p>
<p class="bilan-western">- Les <u>éruptions effusives</u> qui
émettent des <u>laves fluides</u> et forment de longues coulées.
Elles s'accumulent et forment l’édifice volcanique en  cône.</p>
<p class="bilan-western">- Les <u>éruptions explosives</u> qui sont
très violentes. Elles se caractérisent par l’émission de brèves
nuées ardentes et des panaches de gaz et de cendres. L’activité
explosive est souvent suivie par la formation d’un  dôme dû à
l’émission de <u>lave visqueuse</u> qui ne s’écoule pas.</p>

Gros progrès ! Mais au prix d'une pas mal de temps à revoir mon document... J'avais espéré une solution plus directe.

D'autant que bizarrement l'éditeur html inclus dans Moodle ne tient pas compte de cet en-tête lorsque j'y insère le code : lorsque je visualise la page, les titres sont bien mis en évidence, mais pas tel que j'ai personnalisé ma mise en forme, le texte qui utilise différentes couleurs apparait intégralement noir/blanc.
Après vérification, "normal" : Moodle supprime l'en-tête lorsque je valide, il ne laisse que :

<p><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="generator" content="LibreOffice 5.1.4.2 (Linux)" /><meta name="created" content="2016-09-05T10:32:38.288000000" /><meta name="changed" content="2016-11-05T17:52:59.614170975" /></p>

JBF a écrit :

J'aurais commencé par essayer ceci : Fichier > Enregistrer sous -> choisir le format html -> ouvrir le fichier html avec un éditeur de texte -> copier-coller ce qu'il faut.

J'avais commencé par ça avant de faire :

Moi a écrit :

J'ai bien trouvé une alternative pour éditer plus facilement le code mais c'est loin d'être la panacée :
- créer un document html avec libreoffice
- y copier-coller le contenu de mon odt
- afficher la source pour faire les modif qui m'intéresse. Là au moins il y a une séparation contenu (en noir) et mise en forme (en gris)

mais LO (qui accepte d'afficher le code source d'un html qu'il a créé de zéro) refusait de m'afficher le code source de mon fichier exporté en html (l'option n'apparait pas dans "Affichage"). Quoi qu'il en soit, il me semble que j'obtiens le même fichier avec les 2 procédures.

LeoMajor · Le 10/11/2016, à 16:20

bonjour,

unoconv -f html -o dest.html  source.odt
unoconv -f pdf -o dest.pdf  source.odt
unoconv -f html  --stdout  source.odt | sed ou awk  ...   > dest.html

Pascaltech · Le 10/11/2016, à 16:41

Bonjour,

julientroploin a écrit :

Les CSS, est-ce que ça correspond à ce qui est dans l'en-tête que j'ai joint ci dessus ? (après : <style type="text/css">)

Oui, c'est cela.
Il suffit de déclarer une seule fois le style et positionner ensuite les balises correspondantes autour du texte auquel tu souhaites appliquer ce style. Là est le gros du travail. Je pense que partir d'un texte nu, sans style, est préférable.

Julientroploin · Le 11/11/2016, à 22:12

LeoMajor a écrit :

bonjour,

unoconv -f html -o dest.html  source.odt
unoconv -f pdf -o dest.pdf  source.odt
unoconv -f html  --stdout  source.odt | sed ou awk  ...   > dest.html

Merci pour l'astuce, c'est vrai que c'est plus rapide que d'ouvrir le odt avec LO et le sauvegarder. Même s'il n'est pas installé par défaut et que je comprends bien les 2 premières lignes mais pas la 3e... Le man ne m'éclaire pas : "--stdout write output to stdout"...

@Pascaltech : ok, c'est bien comme ça que je l'avais compris.

Reste que mon problème est maintenant de savoir comment obliger Moodle à conserver l'en-tête avec le CSS ou de trouver une autre syntaxe...

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 05/11/2016, à 12:38

[Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#2 Le 08/11/2016, à 16:22

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#3 Le 08/11/2016, à 17:03

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#4 Le 08/11/2016, à 20:50

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#5 Le 09/11/2016, à 19:56

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#6 Le 10/11/2016, à 16:20

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#7 Le 10/11/2016, à 16:41

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

#8 Le 11/11/2016, à 22:12

Re : [Libreoffice => Moodle] Créer une page html à partir d'*.odt existants

Pied de page des forums