De una hoja de cálculo a un sitio web multilingüe utilizando el editor XML de Oxygen y el generador de sitios estáticos Hugo

Bienvenidos al sitio web del taller From Spreadsheet to Multilingual Website Using Oxygen XML Editor & Hugo Static Site Generator.

Aquí encontrarás toda la información sobre el taller e instrucciones que te ayudarán a empezar.

Este taller utilizará un subconjunto de datos y un sitio web de práctica más simple de Recetas de las Américas, un sitio web bilingüe creado con Hugo por Sarah Tew y Melissa Jerome.

Mi contacto: sarahetew@ufl.edu

Este tutorial está hecho para Windows y necesita ajustes para macOS.

Repositorio GitHub del tutorial: https://github.com/SarahTew/dlf-hugo 

Tabla de contenidos

Instalación de Hugo

Para Windows:

1. Vaya a GitHub para ver los lanzamientos de Hugo: Hugo Releases

2.  Desplácese hasta Activos para obtener la última versión.

3. Haga clic en "Mostrar los 23 activos" en la parte inferior.

4. Descargue el archivo zip apropiado: hugo_0.119.0_windows-amd64.zip (Nota: este enlace lo llevará directamente a la descarga): hugo_0.124.1_windows-amd64.zip (Nota: este enlace lo llevará directamente a la descarga)

5. Abra la carpeta (estará comprimida, está bien, puede extraerla o no, no importa)

   • Deberías tener 3 archivos: hugo.exe; LICENSE; and README.md

6. Cree una carpeta "Hugo" (¡¡las mayúsculas son importantes!!) en su unidad C:

7. Inside the Hugo folder create a folder called "bin" (capitalization is important!!)

8. Coloque los tres archivos: hugo.exe; LICENSE; and README.md dentro de la carpeta "bin"

9. Abra la consola de Windows

10. En la consola, escriba: set PATH=%PATH%;C:\Hugo\bin  y presione Enter

11. Pruebe que Hugo se instaló correctamente: escriba hugo version  en la consola y presione enter

    • Si se instala correctamente, debería ver una larga línea de texto que comienza con hugo v

    • Si no está instalado, debería ver un error indicando que hugo no es un comando reconocido.

For Mac:

1. Recomiendo instalar con un administrador de paquetes como homebrew.

Instalación de  Oxygen XML Editor

1. Solicite una licencia de prueba gratuita (sitio web en inglés)

2. Descargue Oxgyen XML Editor y siga las instrucciones de instalación (sitio web en inglés)

Descargar los materiales del taller

Descargue las carpetas UF-Hugo-Training desde https://github.com/SarahTew/dlf-hugo

Descomprima y guarde la carpeta en su unidad C:

Crear un servidor local

Creando un servidor local

Crear un servidor local le permitirá probar su sitio a medida que realiza cambios.

1. Abra el símbolo del sistema

2.  Navegue a la carpeta test-site a través del símbolo del sistema usando: cd

   • Utilice cd... para subir a un directorio

   • Utilice cd [nombre de la carpeta] para ir a un directorio

3. Una vez que esté en el test-site📁, escriba hugo server en el símbolo del sistema

   • Si tiene éxito, verá un mensaje que comienza con  Start building sites … y una tabla de lo que se creó.

   • Si no tiene éxito, recibirá un error que le indicará en qué parte del proceso de construcción se produjo un problema. Deberá solucionar este problema antes de que pueda crear el sitio.

4. Abra su navegador de Internet y vaya a localhost:1313

   • Si es correcto, deberías ver tu sitio web.

   • Si es incorrecto, no verá nada en la primera carga. Si comete el llamado error fatal mientras desarrolla su sitio web, la página localhost:1313 fallará y mostrará el mismo mensaje de error que se encuentra en el símbolo del sistema.

   • Consulta tu sitio web. Verifique que las recetas estén ahí y que el contenido esté en el idioma apropiado.

Debe dejar el servidor local activo mientras trabaja en su sitio.

• Si cierra la ventana del símbolo del sistema desde la que comenzó, finalizará el servidor y ya no verá su sitio. Cuando abra un nuevo símbolo del sistema, tendrá que volver al directorio del sitio de prueba.

• Puede finalizar el servidor en el símbolo del sistema con Ctrl+C y permanecer en el directorio del sitio de prueba.

• Si cierra únicamente su navegador, no sucederá nada. Su servidor todavía está funcionando.

Explorar los archivos

test-site📁

test-site📁 contiene todo lo que Hugo necesita para construir su sitio.

source-data📁 es donde almacenará los materiales que necesita para procesar su contenido original en formularios que Hugo pueda usar.

Hugo usa las otras carpetas para crear su sitio web. Requiere una estructura de archivos y un nombre específicos, por lo que no cambie el nombre ni mueva las carpetas.

Profundizaremos más en lo que hay en  test-site📁  más adelante en el tutorial.

La hoja de cálculo

Encuentre trial_data en dlf-hugo 📁 --> training materials 📁 --> trial_data.xls📄

Ábrelo para echar un vistazo.

Características de la hoja de cálculo

• Guardada como xls (versión antigua de archivos de Excel)

  • Porque: Importación más sencilla a Oxygen más adelante

• Encabezados de columna: sin espacios

  • títulos de una sola palabra y _ en lugar de espacio

• Una fila de títulos

• Las listas están juntas en una celda separadas por punto y coma

  • eg. chayote; maicena; azúcar; huevo; leche; sal; pasas; mantequilla; polvo de galletas

  • eg. Parta los chayotes a lo largo y hierva.; Cuando estén blandos saque la pulpa y maje bien.; Bata las yemas con el azúcar, añádale la sal, y la maicena, la leche, los chayotes majados, la mantequilla y las papas.; Ponga al fuego y cueza hasta que espese como una crema.; Rellene las cortezas con la crema y espolvoree canela por encima.; Ponga al horno por diez minutos.

• Sólo algunos campos tienen versiones en inglés y español.

  • Los campos que permanecen iguales en ambos idiomas, como el ID, el periódico del que proviene y la URL, no necesitan traducción.

Explorar Oxygen

Iniciar Oxygen

La clave de licencia de prueba: Trial License Key

• When you first open Oxygen, you may need to enter a license key.

• Ingrese la clave que solicitó a Oxygen

Crear un nuevo proyecto en Oxygen

Harás todo el trabajo para desarrollar tu sitio web en Oxygen. El archivo Oxygen Project le ayuda a administrar todos sus archivos.

Todo lo que hagas en Oxygen se reflejará en los archivos habituales de tu computadora y viceversa.

1. Haga clic en la pestaña "Proyecto" en la parte superior izquierda.

2. Haga clic en "Nuevo proyecto"

3.  Aparecerá un archivo. Navegar al test-site📁

4. Pongale un nombre a su proyecto

   • El nombre puede ser cualquier cosa; Estoy usando UF_Hugo

5. Ahora deberías ver la pestaña azul "Project" a la izquierda con test-site📁

6. Haga doble clic o use la pequeña flecha a la izquierda para abrir test-site📁

7. Deberías ver todas las carpetas dentro test-site📁

Importar la hoja de cálculo como XML

Debes importar la hoja de cálculo para poder comenzar a trabajar con ella en Oxygen.

1. Haga clic en source-data📁

2. Verá más carpetas y algunos archivos .xsl. Ignora por ahora.

3. Haga clic en la pestaña "File" en la esquina superior izquierda.

4. Haga clic en el icono de la carpeta de archivos para abrir el navegador de archivos.

5.  Vaya a training materials 📁 --> trial_data.xls📄

6. In la ventana "Available Sheets" seleccione "recetas"

7. Criterios de importación - Import criteria

   • Marque la casilla que dice "First row contains field names"

   • Desmarca la casilla que dice "Import formatted data"

   • Utilice el desplazamiento horizontal para ir al final y comprobar si hay columnas en blanco.

     • Consulte las columnas en blanco : "Heading 16", "Heading 17", "Heading 18"

     • Click the <> next to the heading name until it's an "x". This removes it from the import.

     •  Haga clic en <> junto al nombre del encabezado hasta que sea una "x". Esto lo elimina de la importación.

   • Marque la casilla que dice "Open in Editor"

   • No marque la casilla que dice "Guardar en archivo" y haga clic en el icono de carpeta pequeña

8. Haga clic "Import"

   • Oxygen debe abrirse trial_data.xml📄 en la ventana

XML

Eche un vistazo al XML y cómo se compara con la hoja de cálculo.

XML estructura datos textuales mediante codificación.

Guarde el nuevo xml en dlf-hugo📁 --> test-site📁 --> source-data📁

1. • • Nombra el archivo trial_data

Comprueba que ahora puedes ver trial_data.xml📄 en el panel del proyecto.

Transformará este xml en todo lo que Hugo necesita para construir el sitio web:

• Archivos Markdown

• Archivos parciales HTML

Los transformará utilizando XSLT y las herramientas integradas de Oxygen para transformar XML a otros formatos.

Escenarios de transformación - Transformation scenarios

En source-data📁 hay 4 archivos .xsl que ya escribí para ti.

Estos archivos se utilizarán para transformar trial_data.xml📄

Configurar un escenario de transformación

1. Haga clic derecho en trial_data.xml📄  en el panel del proyecto

2. Coloca el cursor sobre "Transform" en el menú

3. Seleccione  "Configure Transformation Scenario"

4. Haga clic "New"

   • New XML transformation with XSLT

5.  Nueva ventana de escenario - New Scenario window

   • Nombra el escenario table2md  (Les nombro mis escenarios según la hoja que usaré para ayudarme a mantenerlos organizados)

   • Compruebe que el campo URL XML diga ${currentFileURL} (esto se completa automáticamente)

   • Para XSL URL haga clic en la carpeta pequeña y seleccione table2md.xsl📄 in source-data📁

   • Output tab: si desea guardar los markdowns en una carpeta separada: confirme que esté seleccionado "Save as" y ${pdu}/source-data/md/${cfn}.md aparece en el campo.

6. Haga clic "Apply Associated"

7. Vea los nuevos archivos en source-data📁

Abra uno de los archivos de rebajas. ¿Cómo se compara con la hoja de cálculo? ¿Al XML?

Crear los archivos Markdown en inglés

Vamos a copiar y editar table2md.xsl📄 para que cree archivos Markdoowns en inglés

1. Haga clic derecho en table2md.xsl📄  en el panel Proyecto. Cópialo y pégalo en la misma carpeta. Cambiar el nombre de la copiay table2md_en.

2. Abre table2md_en.xsl📄

3. Modifica:

   • Línea 7: agrega .en al nombre del archivo Markdown : <xsl:result-document method="text" encoding="utf-8" href="{id}.en.md">

   • Agrega _en al título, etiquetas, ingredientes y selecciones de cursos en azul

   • Hay dos de cada uno en este XSL; intente usar Ctl + f para buscar y reemplazar en Oxygen

   • Línea 54: agrega  .en al archivo html en la línea readFile: <xsl:text>{{&lt; readFile file="./html/recipes/</xsl:text><xsl:value-of select="id"/><xsl:text>.en.html"&gt;}}</xsl:text>

4. Guarda table2md_en.xsl📄

5. Cree un nuevo escenario de transformación para su hoja en inglés y ejecútelo.

   • "Save As" ruta de archivo: cambia a  ${pdu}/source-data/md/${cfn}.en.md

6. Verifique sus nuevos archivos Markdowns

Puede ejecutar varios escenarios de transformación a la vez. Una vez que haya creado ambos escenarios, puede seleccionarlos y generar el inglés y el español en un solo comando.

Crear los parciales HTML en español

Oxygen se volvió exigente conmigo y mi escenario html no funcionó tan limpiamente como el de rebajas y todavía no he descubierto por qué. Cuando eso suceda, ¡que no cunda el pánico! ¡Soluciónalo! Debido a este problema, necesitamos dividir el XML en recetas individuales.

1. Configure y ejecute un escenario de transformación con split.xsl📄 para dividir el archivo trial_data.xml📄 en archivos xml separados para cada receta.

2. Seleccione todos los nuevos xmls y luego configúrelo y ejecuter xml2html en ellos.

   • Output tab: asegúrese de que el botón "Save as" esté marcado y que tenga ${pdu}/source-data/html/${cfn}.html en el campo "Save as".

3. Sus nuevos archivos html deberían completarse en html📁 dentro de source-data📁

Crear los parciales HTML en inglés

Copiaremos y editaremos xml2html.xsl📄 para crear parciales html en inglés.

1. Crea y abre una copia llamada xml2html_en📄

2. Modificaciones:

• Línea 22: Eliminar _en de ingrediente_list_en

• Línea 23 eliminar _en de direcciones_en

• Línea 29: Agregue _en al nombre del campo <xsl:template match="ingredient_list_en">

• Línea 31: Cambia la ortografía de "Ingredientes" a "Ingredients"

• Línea 35: Agregue _en al nombre del campo <xsl:template match="directions_en">

• Línea37: Cambia la ortografía de "direcciones" a "Directions"

3. Configurar y ejecutar el escenario xml2html_en

   • No olvide cambiar el campo "Save as"

4. Revisa tus archivos.

   • Oxygen sobrescribirá los archivos con el mismo nombre de archivo; Si no cambiaste el campo Guardar como, es posible que obtengas archivos en inglés con el nombre en español y viceversa.

¡Felicidades! ¡Ha transformado su hoja de cálculo en Markdown y HTML y ahora está listo para que Hugo construya su sitio!

Agregar contenido al sitio de prueba

Debe mover los archivos md y html a las carpetas de contenido de Hugo para agregarlos al sitio.

1. Seleccione y arrastre todos los archivos HTML (inglés y español) desde source-data📁-->html📁 a content📁-->html📁-->recipes📁

2. Seleccione y arrastre todos los archivos MD desde source-data📁-->md📁 to content📁-->recetas📁

Explorar Hugo

Comprender la estructura de archivos

Hugo requiere una organización de archivos particular para funcionar correctamente. Es obligatorio tener ciertas carpetas, incluso si no las usas.

La forma más sencilla de empezar a crear un sitio Hugo es adaptar un sitio Hugo preexistente muy básico.

• Puede utilizar test-site como base para su primer proyecto.

• Puede usar un tema de Hugo creado por otra persona. Esto incluirá un tema y un sitio de ejemplo para que usted pueda adaptarlo. Un tema más simple es mucho más fácil de adaptar.

• También puede generar un sitio en blanco desde el símbolo del sistema pero también tendrás que generar un tema nuevo y es más complicado.

Themes vs. site (Temas versus sitio)

Hugo tiene una estructura de archivos jerárquica, por lo que algunas carpetas y archivos anulan a otros.

El tema es el esqueleto básico del sitio web y se complementa y/o se sobrescribe con otras carpetas en lo que yo llamo su "sitio".

El tema del sitio de prueba, MyTheme, es muy básico.

Vaya a MyTheme📁 --> layouts📁

• Verá dos carpetas,, _default📁 and partials📁

  • _default layouts le dicen a Hugo cómo diseñar las partes principales de sus diferentes páginas web.

  • _partials le dicen a Hugo cómo diseñar las partes que aparecen en cada página, como barras de navegación y pies de página, y cualquier otra cosa que desee que aparezca en el sitio de la misma manera.

Vaya a  layouts📁 en su sitio principal, fuera del tema.

• Verá otro _default📁 y partials📁 así como recetas📁 y shortcodes📁

  • Hugo clasifica los archivos en esta layouts📁 superior que los archivos on el mismo nombre en MyTheme📁 --> layouts📁 y los usará en el sitio

  • ¿Por qué es esto importante? Puede obtener un tema básico para su sitio y luego realizar todos los cambios necesarios en las carpetas de su sitio sin tener que preocuparse por alterar el tema.

  • recetas📁 contienen los diseños de las páginas recetas.

Layouts vs. Content (Diseños versus contenido)

• Dentro de su sitio, hay  layouts📁 y content📁

  • Los diseños le dan a Hugo instrucciones sobre dónde encontrar las piezas que necesita para ensamblar su sitio web e instrucciones sobre cómo organizar esas piezas en el sitio web.

  • El contenido son las piezas que Hugo ensamblará.

    • Texto de la receta

    • Imágenes y PDF

    • CSS personalizado

Markdown & HTML

• Los archivos Markdown contienen metadatos sobre cada página.

• Los archivos HTML son parciales y proporcionan parte, pero no todo, del contenido de cada página de recetas.

• Los diseños le dicen a Hugo cómo ensamblar los parciales HTML.

• Todos sus elementos de contenido deben tener sus propios archivos de rebajas.

Sitios web multilingües

• Hugo le permite crear un sitio web multilingüe sin otro software o complementos

• Debes estructurar tus archivos correctamente para hacer esto.

  • En el sitio de prueba, el español es el idioma predeterminado, por lo que los archivos en inglés deben tener agregado un .en. Los archivos españoles no pueden tener nada o .es

    • p.ej. Archivo de rebajas en español: r01.md; Archivo de rebajas en inglés: r01.en.md

    • p.ej. Diseño de página de recetas en español: single.es.html; Diseño de página de recetas en inglés: single.en.html

• Esta es una de las dos formas de estructurar archivos para un sitio web multilingüe.

• Consulte Multilingual Mode Instructions en el sitio web de Hugo. (solo en inglés)

• También puedes encontrar buena información sobre cómo crear un sitio multilingüe en este blog ( inglés)

• Hugo NO traduce tu contenido por ti. Debes proporcionar tus propias traducciones.

Config

• Este es el archivo más importante para tu sitio web.

• baseURL

  • Esta es la primera línea de su archivo de configuración.

  • Esto le dice a Hugo cómo escribir todas las URL que necesita para su sitio y todos los enlaces que contiene.

  • Debes ingresar la URL final de tu proyecto aquí. Si lo ingresa incorrectamente, su sitio se verá genial en localhost:1313 pero no existirá una vez que comience a alojarlo en la web.

• Theme

  • Asegúrese de que coincida con el nombre del tema que está utilizando. Si no está configurado, recibirá un error cuando intente crear su sitio.

• Languages

  • Asegúrate de establecer un idioma predeterminado

  • Utilice el código ISO 639-1 para los idiomas deseados

  • Lista de códigos de idioma (use la segunda columna)

• Taxonomies/Taxonomías

  • Las taxonomías son parte de lo que hace que Hugo sea realmente sorprendente y excelente para los proyectos de bibliotecas de DH.

  • Las taxonomías son esencialmente campos de metadatos a los que usted le indica a Hugo que preste especial atención y que realice un seguimiento por usted. Puede usarlos en su sitio para crear listas automáticamente.

    • p.ej. Ir a http://localhost:1313/ingredientes/pollo/

    • Debido a que tengo una taxonomía de "ingredientes" listada en mi archivo de configuración y una plantilla de lista predeterminada, genera esta página.

    • También puede utilizar esta capacidad para llamar listas y términos en todo su sitio web, no solo en una página de lista. Un ejemplo de esto es  https://recetas.domains.uflib.ufl.edu/filtro/  El lado izquierdo de esta página de filtro se creó diciéndole a Hugo que buscara todos los términos de las taxonomías para conocer las restricciones dietéticas, el curso y los ingredientes.

      • Hugo sabe qué receta contiene cada término gracias a los archivos de rebajas.

      • El lado derecho de esta página se creó con un archivo JSON usando la carpeta de datos incorporada de Hugo.

Modifica su sitio

Edita tu página de inicio en español

Vaya a layouts📁-->index.html📄

Agregue algo de texto a su página de inicio y guárdelo.

Verifique su localhost:1313 para ver los cambios.

Modifica el CSS CSS

Vaya a content📁-->css📁 --> style📄

Cambie el color de los enlaces en el menú de navegación cuando pase el cursor de rosa a azul.

Sugerencia: busque la sección denominada "hyperlinks"

Verifique localhost1313 para ver los cambios.

Solución de problemas: si está realizando cambios en el CSS y nada parece estar cambiando en localhost:1313, pruebe algo que SABE que puede ver y que está haciendo correctamente. Si puedes ver ese cambio entonces sabrás que lo que intentabas hacer antes está mal.

Si no puede ver el cambio que sabe que debería ver, podría deberse al almacenamiento en caché del navegador. En este caso, borre el historial de archivos almacenados en caché de su navegador y/o abra localhost:1313 en un nuevo navegador.

Agregar archivos PDF

Vaya a una de las recetas y haga clic en el enlace pdf. Deberías recibir un error.

Agregue los archivos pdf a content📁-->pdf📁

Verifique localhost:1313 y haga clic en el enlace ahora para ver los cambios.

Agregar imágenes de recetas

Agregue los archivos de imagen a content📁--> images📁--> recetas📁

Añade estas líneas de código a single.es.html📄 and single.en.html📄 templates

[COMIENZO]

<div class="col-image">

{{$path := .Page.Params.jpg}}

<img class="recimg" style='height: 100%; width: 100%; object-fit: contain' alt="imagen de receta {{ .Params.title}} en el diario " src= {{ printf "../../images/recetas/%s" $path | urlize | absLangURL}}></img>

</div>

[FIN]

Cambia las palabras en negrita para la versión en inglés. alt= "image of newspaper recipe {{ .Params.title}}"

Generearo su sitio

Genere su sitio una vez que esté satisfecho con sus ediciones y esté listo para compartirlo públicamente.

Un comando generará todos los archivos públicos de su sitio. Estos son los archivos estáticos que puede llevar a dondequiera que aloje su proyecto.

1. Cierre el servidor local.

   • Ctrl+C se mantendrá en el mismo directorio

   • Puede cerrar el símbolo del sistema pero luego tendrá que regresar a test-site📁

2. Verifica que estás en test-site📁

3. Escribe hugo y pulse la tecla "Intro"

4. Deberías ver una tabla similar a cuando creaste el servidor local con hugo server  anteriormente.

   • Si no tiene éxito, aparecerá un mensaje de error que especificará dónde y por qué Hugo se quedó atascado y no pudo seguir construyendo.

5. Verificar que una nueva carpeta public 📁 en el test-site📁

6. Echa un vistazo a public 📁

   • ¿Cómo se compara con los directorios de test-site📁 con los que trabajaste en Oxygen?

Hosting

Este tutorial no se centrará en el hosting.

Recetas está alojado en LibDomains.

Ya sea LibDomains u otro sitio de alojamiento, transferirá el contenido de public 📁 en su máquina en la carpeta pública html de su sitio web.

Una vez que transfiera los archivos, el sitio estará listo y no cambiará a menos que cargue nuevos archivos públicos. Esto hace que un sitio estático sea mucho más económico y fácil de mantener.