11. Revisión de sitio web HTML generado

Ahora examinaremos la representación HTML de este documento ODT / DOCX. Ya hemos visto que el conversor respeta el índice.

11.1. La barra superior del sitio

Rechemos un vistazo a la barra superior del sitio:

En [1], el nombre del sitio definido en [config.py] ;
En [2], el icono para cambiar al modo oscuro o claro;
En [3], el icono que es un enlace al repositorio GitHub donde se exportará el sitio HTML. También definido en [config.py] ;
En [4], el icono que permite ocultar/mostrar el índice;

11.2. Pie de página

Ahora echemos un vistazo al pie de página:

Este es el pie de página definido en el archivo [config.py].

11.3. La página de inicio

La portada del Documento ODT / DOCX era la siguiente:

Esta portada del Documento ODT / DOCX se convierte en la página de inicio del sitio HTML :

El Gemini 3 / convertidor ChatGPT pone todo lo que le precede en el Documento ODT / DOCX, el título de primer nivel, en la página de Inicio 1este es el estilo 'Título 1'. Si añades imágenes como arriba, las mostrará. Así que puedes imaginar darle a tu sitio una portada como la de un libro de verdad. En [1], este es el título principal del documento. Su representación está controlada por las siguientes líneas en el archivo de configuración [config_styles.py]:

STYLES = {
    "style_names": [
        "P4"
    ]
}

líneas [6-8]: la lista de posibles estilos para el título de su documento. Cuando miro este documento, el style LibreOffice de mi título es 'Título principal'. Pero el convertidor Gemini no lo encontró. Registró los estilos que encontró y mostró [P1]. Este es un gran problema con LibreOffice: los nombres mostrados para los estilos no coincideneno se corresponden con los nombres internos utilizados por el software. Sólo están ahí para adaptarse a la lengua del usuario;
línea 10 una vez detectado el título principal, puede establecer los parámetros de representación. Yo quería un tamaño de fuente de 28 (font-size: 28px;) y negrita (font-weight: bold);

Con las imágenes y el estilo del título, puedes crear una página de inicio atractiva.

Es posible que el título principal de su documento no tenga uno de los estilos definidos en las líneas [6-8]. Para encontrar el estilo de su título principal, utilice la siguiente línea del archivo [config.py]

1	`"debug": True`

Con el valor [true], se mostrará el estilo de los párrafos que preceden al primer título de nivel 1, es decir, los párrafos de la página de inicio, cuando se ejecute el convertidor Gemini / ChatGPT. Para un documento distinto de éste, obtuve los siguientes registros :


[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P3' (Clean='p3') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P1' (Clean='p1') | Texte='...'
[DEBUG PRE-H1] Style='P4' (Clean='p4') | Texte='Introduction au langage PHP7 par l’exemp...'
>>> TITRE DOCUMENT DETECTÉ : Introduction au langage PHP7 par l’exemple
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='Standard (WW)' (Clean='standard (ww)') | Texte='...'
[DEBUG PRE-H1] Style='P5' (Clean='p5') | Texte='Serge Tahé, juillet 2019...'
[DEBUG PRE-H1] Style='P5' (Clean='p5') | Texte='...'
[DEBUG PRE-H1] Style='P6' (Clean='p6') | Texte='...'
[DEBUG PRE-H1] Style='Heading 1' (Clean='heading 1') | Texte='Introduction au langage PHP 7...'

línea 10, el título del documento tiene el estilo 'P4' ;

En el archivo [config.py], tengo entonces ponga las siguientes líneas :


  "document_title": {
    "style_names": [
      "P4"
    ],
    "css": "font-size: 28px; font-weight: bold; margin-bottom: 1em; line-height: 1.2; color: #2c3e50;"
  },

línea 3, el estilo que estaba buscando ;

Por eso el depurador muestra las líneas :


[DEBUG PRE-H1] Style='P4' (Clean='p4') | Texte='Introduction au langage PHP7 par l’exemp...'
>>> TITRE DOCUMENT DETECTÉ : Introduction au langage PHP7 par l’exemple

Ha encontrado el estilo "P4" y ahora muestra que se ha encontrado el título del documento. Una vez encontrado el título, puedez establezca la tecla [debug] en [false] en [config.py] :

1	`"debug": False`

Echemos un vistazo ala conversión de capítulo [Ejemplos], que agrupa los ejemplos que el convertidor Gemini / ChatGPT sabe cómo gestionar :

11.4. Las listas

Document ODT / DOCX :

Arriba, el texto [Listas con viñetas] está resaltado porque es una referencia asociada a una referencia cruzada.

Documento HTML :

Tenga en cuenta que mientras el Documento ODT / DOCX utiliza diferentes chips, el Documento HTML utiliza un único tipo de chip.

11.5. Listas numeradas

Documento ODT / DOCX :

Documento HTML :

11.5.1. Listas mixtas 1

Documento ODT / DOCX

Documento HTML

También en este caso hay a veces diferencias entre los tipos de chip utilizados.

11.5.2. Listas mixtas 2

Documento ODT / DOCX

Documento HTML

11.6. En bloquea de código enriquecido

Los bloques de código enriquecido se representan de forma idéntica en el HTML (aparte del color de fondo). He aquí tres ejemplos:

11.6.1. Ejemplo 1

Documento ODT / DOCX

Rendu HTML

11.6.2. Ejemplo 2

Documento ODT / DOCX :

Renderizado HTML

11.6.3. Ejemplo 3

Documento ODT / DOCX

Renderizado HTML

11.7. Bloques de código en bruto (sin formato text)

Los bloques de código sin procesar que se encuentran en el Documento ODT / DOCX están coloreados sintácticamente por MkDocs según el idioma encontrado en el bloque de código. Para ayudar al conversor a encontrar el idioma correcto, ponemos "cadenas clave" en el archivo [config.py] para cada idioma. El conversor cuenta las "cadenas clave" encontradas. A continuación, asocia el bloque de código al idioma con más "cadenas clave" encontradas.

Veamos algunos ejemplos.

11.7.1. Ejemplo 1

Documento ODT / DOCX (Java)

Renderizado HTML

En el documento HTML podemos ver que el código Java ha sido coloreado sintácticamente.

11.7.2. Ejemplo 2

Documento ODT / DOCX (XML)

Renderizado HTML

11.7.3. Ejemplo 3

Documento ODT / DOCX (HTML)

Renderizado HTML

11.8. Otros bloques de código

Documento ODT / DOCX

Un resultado de ejecución con una primera línea que no empieza por 1 :

Renderizado HTML

Un bloque de código sin numerar en ODT permanece sin numerar en HTML :

Documento ODT / DOCX

Renderizado HTML

11.9. Enlaces

Documento ODT / DOCX

Renderizado HTML

11.10. Enriquecimiento del texto

Documento ODT / DOCX

Renderizado HTML

11.11. Las imágenes

Cabe señalar que el Gemini / ChatGPT respeta el redimensionamiento de la imagen realizado en el Documento ODT / DOCX.

11.12. Caracteres protegidos

Documento ODT / DOCX

Renderizado HTML

Documento ODT / DOCX (MarkDown)

Renderizado HTML

ll código MarkDown se ha conservado ;

11.13. Los cuadros

Documento ODT / DOCX

Renderizado HTML

11.14. Nnotas a pie de página

11.15. Anomalías conocidas

Algunos se han detectado anomalías que pueden corregirse modificando el ODT / DOCX :

los bloques de código deben ir seguidos de una línea vacía de lo contrario, el bloque de código puede renderizarse mal. El caso identificado es un código inmediatamente seguido de un título sin estar separado de él por una línea vacía;
las listas con viñetas no pueden tener borde inferior. Para conseguirlo, añada una línea vacía detrás del último elemento de la lista ;
las listas con viñetas deben ser jerárquicas. Así pues, una lista de nivel 2 siempre debe estar incluida en una lista de nivel 1; de lo contrario, la lista de nivel 2 se mostrará como ;

Con cada nueva versión del convertidor, algunostaines de estas anomalías están destinadas a desaparecer. Las tres anomalías anteriores pueden evitarse corrigiendo ell documento fuente.

11.16. Otros casos

Si su documento utiliza características distintas de las mencionadas, es muy probable que el conversor Gemini no las tenga en cuenta ChatGPT . ¿Qué debo hacer entonces? Puede enviar su nueva solicitud a uno de los IA dándole el convertidor de corriente :

En [1], adjunto el convertidor de este documento;
En [2], presento mi nueva solicitud;

Probablemente pasarás por muchas iteraciones. Cuando una versión sea estable, anota su número para poder devolvérsela a el IA en caso de regresión. También es aconsejable hacer una copia de cada versión estable. Un inconveniente importante des dos IA es queellos descensont con bastante facilidad. Todo lo que tienes que hacer es pedirle una nueva función y estará listo para funcionare el IA rompe el código que funcionaba antes. De ahí la importancia de anotar el número de versión de las versiones estables para poder volver a ellas. En enero de 2026, me pareció que ChatGPT 5.2 me teníanque Gemini 3.