Manual para la creación de artículos HTML desde un procesador de texto libre (odt) para el Portal de Revistas
A continuación encontrará el manual diseñado para la exportación de artículo en formato ODT hacia HTML, puede descargarlo aquí: Manual para la creación de artículos HTML desde un procesador de texto libre o consultarlo aquí en formato HTML:
El presente manual tiene como objetivo explicar en forma detalla la creación de artículos en HTML para el Portal de Revistas de la UCR, con el fin de obtener artículos legibles por el sistema y de fácil creación para los editores o cuerpos editoriales.
Requisitos:
- Conexión a internet
- Acceso al usuario gestor de la revistas y editor
- Descargar el software Microsoft Expression Web 4.
- Contar con Libre Office o con Open Office en el equipo
1. Instalación de software
Para realizar el proceso de exportación de los artículos es necesario contar con alguna versión de Libre Office instalada en el equipo, para poder realizar posteriormente los cambios que sean necesarios en los documentos.
- Para descargar una versión portable: http://espejos.ucr.ac.cr/libreoffice/portable/
- Para descargar una versión instalable y estable: http://espejos.ucr.ac.cr/libreoffice/stable/
También es necesario contar con el software Microsoft Expression Web 4, el cual está disponible en el siguiente link: https://www.microsoft.com/en-us/download/details.aspx?id=36179
2. Preparación del documento
Para iniciar con este proceso es necesario contar con el artículo en formato abierto (odt), legible por Libre Office, en caso de contar con un documento en formato .doc o .docx es recomendable convertirlo a formato abierto.
2.1. Conversión desde Office 2013
Para realizar la conversión desde Office 2013 debe seguir los siguientes pasos:
2.1.1. Abrir y guardar el documento en formato odt desde Office 2013
- Diríjase a la parte superior izquierda de la pantalla y presione el botón Archivo luego ingrese al menú Guardar como.
- Presione el botón Examinar y seleccione un lugar donde desee guardar el artículo en formato odt.
- Después de ubicar el lugar en que desea guardar el documento en el nuevo formato ODT, coloque un nombre al archivo y seleccione en Tipo el formato Texto de OpenDocument (*.odt)
- Verifique que el nombre del archivo con ahora cuente con la terminación .odt.
- Presione el botón Guardar.
2.1.2. Abrir y guardar el documento en formato odt desde Libre Office
- Diríjase a la parte superior izquierda de la pantalla y presione el botón Archivo luego ingrese al menú Guardar como.
- Después de ubicar el lugar a guardar el documento en el nuevo formato ODT, coloque un nombre al archivo y seleccione el formato Documento de Texto (odt) (*.odt)
- Verifique que el nombre del archivo ahora cuente con la terminación .odt
- Presione el botón Guardar
2.2. Formato y estilo en el documento odt
El archivo odt debe cumplir con ciertas normas para la exportación correcta al formato final HTML, entre los puntos más importantes está el uso de los estilos de párrafo, diagramación del documento y uso del espacio.
2.2.1. Formato en el documento
En esta área recae mucho del éxito en la exportación final del documento, por lo que es importante trabajar según lo que en este manual se expone y seguir los estándares que Libre Office facilita en el uso del formato.
2.2.1.1. Formato de portada para el artículo
Para la exportación del documento, el software conversor leerá la información expuesta en el documento y la convertirá en el lenguaje web ideal para el Portal de Revistas, por lo que debe tomar en cuenta los siguientes elementos:
- Parte del formato en el documento no será exportado al documento HTML final, por ejemplo saltos de página, espacios entre párrafos, efectos especiales en el texto, entre otros.
- Las tablas, fórmulas matemáticas y símbolos especiales se mantienen durante la conversión.
- Elementos básicos para el resulte del texto (negrita, itálica, subrayado, tachado, superíndice y subíndice) se mantienen durante la conversión.
Márgenes de página: el procesador de textos Libre Office permite realizar ajustes en el espacio de la página con respecto a los márgenes de la página, es este caso por ser una exportación a un formato HTML los márgenes de página se convertirán en los márgenes del HTML en relación con el espacio permitido en el Portal de Revistas.
Observe la siguiente imagen, en esta se presenta un artículo en proceso de edición para su exportación:
En la imagen se puede observar que, entre las líneas que rodean al área con texto de la página, existe un espacio pequeño que separa los márgenes del texto seleccionado, estos márgenes considérelos como aquellos márgenes que tendrá el documento final en HTML.
Nota: A los documentos que desee procesar hacia el formato HTML, por el tipo de procesamiento del texto en el software, es innecesario realizarles la división silábica mediante guiones o saltos de línea entre párrafos, ya que el software realizará el proceso de manera automática en caso de ser necesario.
Uso de viñetas: El uso de viñetas es reconocido, y estas son exportadas en forma correcta por parte del software conversor. Puede utilizarlas dentro de los artículos con la información necesaria.
Tablas y otros elementos: Las tablas presentes en el texto serán exportadas al documento HTML, manteniendo el estilo y formato original, pero omitiendo colores de fondo, colores de letra y otros elementos de estilo que se encuentren en la tabla.
Nota: Con el software Microsoft Expression Web es posible incluir estos elementos en el archivo HTML.
Imágenes: Las imágenes son exportadas en el documento sin tomar en cuenta detalles de formato y posición, para que estas sean exportadas en forma correcta será necesaria la intervención posterior con el software Microsoft Expression Web.
Notas en el texto: Todas las notas en el texto, ya sean notas al pie de página o al final del documento, serán exportadas al archivo utilizando el sistema de creación automática que facilite Libre Office. Si desconoce de esta función encuentre más información en el siguiente link: https://help.libreoffice.org/Writer/Inserting_and_Editing_Footnotes_or_Endnotes/es
2.2.1.2. Uso de estilos en los textos del documento
El uso de estilos en el documento odt es de suma importancia, con base en esto es que el software detecta y convierte en títulos, subtítulos y otros elementos de texto para el archivo HTML.
Para facilitar la compresión de este punto se explica a continuación la colocación de estilo para un título.
2.2.1.2.1. Colocar un estilo predeterminado a un texto
- Primero: seleccione el texto al que desea colocar un estilo predeterminado.
- Segundo: Diríjase al desplegable de estilos, por lo general está presente en la parte superior izquierda de la pantalla.
- Tercero: Haga clic en él y seleccione el estilo a colocar en el texto.
2.2.1.3. Estilos a utilizar en la creación del documento
A continuación se adjunta una tabla con los diferentes estilos a colocar en el texto del documento, con el fin de ser una guía idónea en el manejo de la información y asegurar su exportación correcta.
| Estilo predeterminado | Textos a colocar |
| Encabezado 1 | Título principal del documento |
| Encabezado 2 | Subtítulo |
| Encabezado 3 | Título de sección |
| Encabezado n-1 | Títulos de sección |
| Cuerpo de texto | Texto en general del párrafo |
3. Conversión de odt a HTML
Una vez culminado el proceso de formato y estilo para el artículo en Libre Office, ingrese a la siguiente dirección: http://ucrindex.ucr.ac.cr/exporta/file_upload.php
Luego de ingresar a la dirección, suba el archivo odt que contiene el documento:
Como se muestra en la anterior imagen, luego de seleccionar el archivo a convertir aparece una tabla con diferentes elementos a leer para la conversión. Seleccione según sus necesidades los elementos que quiere exportar al código HTML.
3.1. Selección de elementos
La tabla de configuración le permite seleccionar los elementos que en el documento ODT se encuentren según los tres parámetros que se pueden encontrar. A continuación los detallamos:
- Importar: Tomar el elemento e insertarlo en el código HTML
- Importar a texto: omite la programación para la conversión y presenta como texto simple
- Remover: omite los elementos y la programación para la exportación.
3.2. Elementos para la conversión
A continuación se explicará cada uno de los elementos que el código captura para la exportación a código HTML:
- Header: Corresponde los encabezados 1, 2, 3 y 4 que se encuentren en el documento.
- List: Corresponde a las listas o numeración que se encuentren en el documento.
- Table: Son todas aquellas tablas que se encuentren en el documento.
- Footnote: captura todas las notas a pie de página que se encuentren en el documento, para luego exportar y crear el link en el documento.
- Image: es la exportación de las imágenes en código web.
- Note: corresponde a las notas dentro del documento.
- Annotation: corresponde a las anotaciones dentro del documento.
- Table of content: captura las tablas de contenidos generadas automáticamente por Libre Office
3.3. Resultado de la conversión
Al realizar la conversión del archivo al formato HTML, recibirá una respuesta similar a la de la siguiente imagen:
Como en posible observar en la imagen la respuesta del código tiene un formato específico, primero mostrará los errores generados durante la conversión y luego la información presente en el artículo para exportar.
Si no presenta ningún error en la exportación del documento salte al punto 4 de este manual.
3.3.1. Resolución de algunos errores
Los errores que sean generados por la exportación del documento serán visibles al inicio de la página con el texto resaltado en rojo. En caso de recibir un error, siga las instrucciones que aparezcan en la página.
3.3.1.1. ¿Cómo resolver el problema de imagen incrustada?
Al realizar la conversión del archivo ODT a HTML, las imágenes serán incrustadas en el código, para asegurar su visualización en el Portal de Revistas debe guardar la imagen en forma individual. Para guardar en forma correcta las imágenes siga los siguientes pasos:
- Ubique las imágenes presentes en el documento
- Presione clic derecho sobre la imagen y haga clic en Guardar imagen como
- Guarde la imagen según el orden de aparición. Por ejemplo imagen1.jpg, imagen2.jpg, imagen3.jpg …
- Repita este proceso con todas las imágenes presentes en el documento
4. Preparando documento final
Al haber culminado el proceso de conversión, sigue la preparación del documento y sus elementos finales para obtener el producto final e integrar en el Portal de Revistas
4.1. Copiando el código
Ya con el código HTML listo debe visualizar el código web para copiar al software Microsoft Expression Web, para ello siga los pasos señalados a continuación:
- Abra el programa Microsoft Expression Web
- En la esquina superior izquierda, presiona la pestaña File, luego diríjase a New y luego seleccione HTML.
- Luego diríjase a su explorador web donde se encuentre el documento al que realizó la conversión, presione clic derecho y seleccione la opción Ver código fuente de la página
- Como respuesta a la anterior acción, su computadora le mostrará el código web generado por la conversión, seleccione y copie todo el contenido que aparezca en la página:
- Diríjase al software Microsoft Expression Web, borre el código que se encuentre en la consola y pegue el código que usted copió de la página de conversión
- Presione la tecla F5
- Ahora, con el código html en el software, proceda a eliminar los elementos que no necesita, por ejemplo el logo de UCRIndex, listado de errores y el cuadro de texto con elementos de la exportación. Utilice el área visual señalada en el cuadro rojo:
4.2. Imágenes en el documento
Las imágenes presentes en el documento pueden no ser importadas en forma correcta, para solucionar este problema proceda con las siguientes instrucciones:
- Busque las imágenes o recuadros de error de imágenes
- Haga doble clic izquierdo sobre el cuadro o la imagen
- Obtendrá como resultado el cuadro que se posible observar en la siguiente imagen.
- Diríjase al recuadro de Picture: y borre el contenido que se le presente.
- Sustituya el contenido con el nombre de la imagen que le colocó al guardar en el punto 3.1.1
- Presione el botón OK
- Repita este procedimiento con todas las imágenes.
4.3. Otros elementos para el documento
El software Microsoft Expression Web le permitirá realizar más cambios en el documento para personalizar en forma sencilla sus documentos en HTML, si lo desea puede desarrollar elementos extra, hojas de estilo y otros elementos.
4.4. Guardar el documento HTML
Con todo este proceso realizado hasta el momento y el documento HTML pulido, sólo resta guardar el documento final. Para realizar este proceso realice el siguiente procedimiento:
- Diríjase al software Microsoft Expression Web con el documento terminado, busque en la parte superior izquierda el menú File y presione Save as
- Se desplegará el siguiente recuadro. Coloque un nombre al documento y presione el botón Save.
5. Subir el documento HTML
Luego de guardar el documento final, prosigue subir el artículo en formato HTML al Portal de Revistas. Para explicar en la forma más clara el cómo se debe realizar el proceso de subida de los documentos en formato HTML, disponemos las siguientes instrucciones:
5.1. Subir un documento sin imágenes
Para subir un documento html sin imágenes, realice el siguiente procedimiento:
- Ingrese con el usuario Gestor de la revista en el Portal de Revistas.
- Ingrese a Importar/Exportar datos
- Seleccione el Módulo QuickSubmit: Módulo para el envío en un solo paso
- Rellene los campos indicados en el formulario y cargue el archivo HTML en el apartado Archivo de envío
5.2. Subir un documento HTML con imágenes
Para subir un documento con imágenes realice el siguiente procedimiento:
- Ingrese con el usuario Gestor de la revista en el Portal de Revistas.
- Ingrese a Importar/Exportar datos
- Seleccione el Módulo QuickSubmit: Módulo para el envío en un solo paso
Rellene los campos indicados en el formulario y cargue el archivo HTML en el apartado Archivo de envío
- Ingrese con el usuario Editor de la revista
- Utilice la herramienta de búsqueda o ingrese a los archivos de la revista, ubique el artículo con el código HTML
- Presione sobre el título del artículo al que desea agregar las imágenes
- Diríjase a la pestaña superior de edición y busque el apartado de maquetación
- Presione el enunciado Editar
- Se desplegará la pantalla de edición para el artículo HTML, en el apartado Archivos de galerada HTML utilice el apartado imágenes para cargar todas las imágenes del documento.
