Páginas web

Introducción

El módulo Páginas web de Geonodo permite crear y administrar un conjunto de páginas destinadas a difundir y dar acceso a los contenidos generados en la plataforma. A través de este módulo se accede al framework GrapesJS, una herramienta de código abierto que reúne distintas funcionalidades orientadas a facilitar la creación de páginas HTML sin requerir conocimientos previos de programación.

La documentación oficial de GrapesJS se encuentra disponible en el siguiente enlace: https://grapesjs.com/docs/.

Para aprovechar al máximo este módulo se recomienda contar con conocimientos básicos sobre la estructura y la lógica de las páginas web (HTML y CSS).

El gestor permite crear, editar, duplicar y eliminar páginas web, así como exportar e importar su configuración entre instancias de Geonodo. Se accede al módulo desde el menú principal Publicación.

A continuación, se describen las principales funcionalidades del módulo.

1. Interfaz del módulo.

El gestor de páginas web presenta una interfaz organizada en tres áreas principales que facilitan la administración de los sitios creados en Geonodo. Estas áreas se describen a continuación.

(se abre a tamaño completo en una ventana nueva) Imagen 1: Vista general del Gestor de páginas web.

1. Acceso al módulo: mediante el botón Creador de páginas web, disponible en el menú lateral, se ingresa al módulo de gestión de las páginas creadas en Geonodo a través del framework GrapesJS.
2. Barra de acciones: reúne los botones que permiten crear nuevas páginas, así como exportarlas o importarlas en formato JSON.
3. Listado de páginas: tabla con las páginas existentes y sus columnas (Nombre, Título, Ruta y UUID). Cada fila incluye acciones para editar, ver, configurar, duplicar y eliminar la página correspondiente.

2. Funcionalidades

A continuación, se detalla cada una de las funcionalidades disponibles en el módulo.

2.1 Nueva Página

Al hacer clic en el botón Nuevo, se despliega un formulario que permite registrar una nueva página. El formulario solicita los datos necesarios para identificar y ubicar la página dentro del sitio.

(se abre a tamaño completo en una ventana nueva) Imagen 2: Formulario para la creación de una nueva página.

2.1.1 Nombre

Corresponde a un nombre representativo que permite diferenciar esta página del resto de las páginas registradas en el sistema. Se recomienda utilizar un nombre breve y descriptivo.

2.1.2 Título

Es el texto que se muestra en la pestaña del navegador cuando la página es visualizada y también el que utilizan los motores de búsqueda para identificarla.

2.1.3 Ruta

Permite establecer una estructura de directorios para organizar las páginas dentro del sitio. Es especialmente útil cuando se administran varias páginas y se requiere ordenarlas jerárquicamente. La ruta forma parte de la URL final con la que se accederá a la página.

2.1.4 Exportar páginas

Permite exportar la configuración de una o más páginas en formato JSON. El objetivo es facilitar su traslado a otra instancia o instalación de Geonodo, así como compartir el diseño con otros usuarios. Al activar la opción, se debe seleccionar el ámbito de exportación:

• Todos: exporta todas las páginas registradas.
• Páginas seleccionadas: exporta únicamente las páginas previamente marcadas en el listado.

(se abre a tamaño completo en una ventana nueva) Imagen 3: Diálogo de exportación de páginas en formato JSON.

2.1.5 Importar páginas

A partir de un archivo JSON previamente exportado, es posible incorporar una página ya configurada al sistema. Cuando el archivo contiene una sola página, se habilitan los campos Nuevo nombre y Nueva ruta, que permiten redefinir esos atributos antes de la importación.

Nota: La ruta debe ingresarse sin la barra inicial. Si el archivo contiene múltiples páginas, los campos de nombre y ruta no estarán disponibles y se conservarán los valores originales del archivo.

(se abre a tamaño completo en una ventana nueva) Imagen 4: Diálogo de importación de páginas a partir de un archivo JSON.

2.2 Editar página

La acción Editar abre la vista que permite modificar los atributos básicos de la página: nombre, título y ruta. Esta opción no modifica el contenido visual de la página, sino únicamente sus metadatos.

2.3 Ver página

La opción Ver página entrega una visualización preliminar del resultado de la configuración aplicada, mostrando la página tal como se verá una vez publicada.

(se abre a tamaño completo en una ventana nueva) Imagen 5: Vista previa de la página publicada.

2.4 Configurar página

La opción Configurar abre el editor visual basado en GrapesJS, donde se construye y se da estilo al contenido de la página. Para aprovechar el editor en profundidad, se recomienda revisar la documentación oficial disponible en https://grapesjs.com/docs/, donde se describe el detalle de cada funcionalidad.

A continuación, se presentan las funcionalidades principales del editor. En la barra superior se encuentran los botones que permiten acceder a todas las herramientas de diseño y configuración.

(se abre a tamaño completo en una ventana nueva) Imagen 6: Vista general del editor GrapesJS con la barra superior de herramientas.

Los tres botones del extremo superior izquierdo permiten previsualizar la página en distintas resoluciones: pantalla de computador, tablet y teléfono móvil. Esta funcionalidad facilita el diseño responsivo, ya que permite verificar cómo se comporta la página en diferentes dispositivos.

(se abre a tamaño completo en una ventana nueva) Imagen 7: Botones de selección de resolución (escritorio, tablet y móvil).

Los botones del extremo superior derecho agrupan las herramientas de visualización, edición, persistencia y administración de estilos, capas y bloques. A continuación se describe cada uno.

(se abre a tamaño completo en una ventana nueva) Imagen 8: Barra superior derecha del editor con sus herramientas.

2.5.1 Ver componentes

(se abre a tamaño completo en una ventana nueva) Imagen 9: Icono de la opción Ver componentes.

Al activar esta opción, se muestran líneas punteadas que delimitan cada uno de los objetos insertados en la página, lo que facilita visualizar su tamaño, posición y la estructura general del diseño.

(se abre a tamaño completo en una ventana nueva) Imagen 10: Vista de la página con la opción Ver componentes activada.

2.5.2 Vista previa

(se abre a tamaño completo en una ventana nueva) Imagen 11: Icono de la opción Vista previa.

Activa la vista previa de la página, ocultando todas las herramientas del editor para visualizarla tal como la verá el usuario final. Para regresar a la vista anterior, se debe hacer clic en el icono con forma de ojo ubicado en la esquina superior izquierda.

2.5.3 Pantalla completa

(se abre a tamaño completo en una ventana nueva) Imagen 12: Icono de la opción Pantalla completa.

Oculta las herramientas propias del navegador para disponer de un espacio de trabajo más amplio. Para regresar a la vista anterior, se debe presionar la tecla Esc.

2.5.4 Ver Código

(se abre a tamaño completo en una ventana nueva) Imagen 13: Icono de la opción Ver código.

Abre una ventana que muestra el código HTML y CSS que respaldan la página. Es útil para usuarios con conocimientos de desarrollo web que requieran revisar o ajustar manualmente la estructura o los estilos.

(se abre a tamaño completo en una ventana nueva) Imagen 14: Ventana de visualización del código HTML y CSS de la página.

2.5.5 Guardar

(se abre a tamaño completo en una ventana nueva) Imagen 15: Icono de la opción Guardar.

Persiste en el sistema los cambios de configuración realizados hasta el momento sobre la página. Se recomienda guardar de manera periódica para evitar la pérdida del trabajo.

2.5.6 Deshacer

(se abre a tamaño completo en una ventana nueva) Imagen 16: Icono de la opción Deshacer.

Revierte la última acción realizada en el editor. Puede aplicarse de forma sucesiva para deshacer varios cambios consecutivos.

2.5.7 Rehacer

(se abre a tamaño completo en una ventana nueva) Imagen 17: Icono de la opción Rehacer.

Permite volver a aplicar una acción que previamente había sido deshecha mediante la opción Deshacer.

2.5.8 Abrir Administrador de estilos

(se abre a tamaño completo en una ventana nueva) Imagen 18: Icono del Administrador de estilos.

Cada objeto insertado en la página puede tener su propia configuración de estilo, organizada en las siguientes secciones: General, Dimensión, Tipografía, Decoraciones y Extras. Para acceder a estas opciones es necesario seleccionar previamente el objeto que se desea modificar.

(se abre a tamaño completo en una ventana nueva) Imagen 19: Panel del Administrador de estilos con las secciones de configuración.

2.5.9 Ajustes

(se abre a tamaño completo en una ventana nueva) Imagen 20: Icono de la opción Ajustes.

Cada objeto insertado dispone de sus propios parámetros de ajuste. Estos parámetros varían según el tipo de bloque y permiten personalizar el comportamiento específico del componente.

Por ejemplo, un bloque de tipo cuadro de texto presenta opciones de ajuste como Identificador y Título.

(se abre a tamaño completo en una ventana nueva) Imagen 21: Panel de Ajustes de un componente de tipo cuadro de texto.

Estos valores se reflejan automáticamente en el código HTML generado, agregándose como atributos al elemento span correspondiente.

(se abre a tamaño completo en una ventana nueva) Imagen 22: Atributos del elemento HTML generados a partir de los ajustes.

Otro ejemplo corresponde al bloque Mapa Google, que permite definir los siguientes ajustes:

• Address**:** dirección o ubicación que define el punto central del mapa, representado mediante un pin.
• Map type**:** tipo de mapa base a utilizar (por ejemplo, Roadmap, Satélite, Híbrido o Terreno).
• Zoom: nivel de acercamiento inicial del mapa.

(se abre a tamaño completo en una ventana nueva) Imagen 23: Panel de Ajustes de un bloque de tipo Mapa Google.

2.5.10 Abrir administrador de capas

(se abre a tamaño completo en una ventana nueva) Imagen 24: Icono del Administrador de capas.

Permite visualizar la estructura jerárquica y el orden de los bloques agregados a la página. El árbol comienza con el Cuerpo (Body), dentro del cual se anidan los contenedores (Div) y los demás componentes. Desde este panel también es posible reorganizar los elementos arrastrándolos para modificar su orden.

(se abre a tamaño completo en una ventana nueva) Imagen 25: Panel del Administrador de capas con la estructura jerárquica de la página.

2.5.11 Abrir bloques

(se abre a tamaño completo en una ventana nueva) Imagen 26: Icono del panel de Bloques.

Muestra la galería de elementos disponibles para insertar en la página. Los bloques pueden arrastrarse y soltarse en la posición deseada dentro del área de diseño.

Se recomienda comenzar definiendo la estructura mediante bloques de columnas (1, 2 o 3 columnas) y, dentro de éstas, incorporar los componentes de contenido como Texto, Link, Imagen, Video y Mapa Google.

En la sección Extra se encuentra el bloque Barra de Navegación, que permite habilitar un menú en la parte superior de la página para enlazar con otras secciones del sitio.

Nota: Cada bloque dispone de sus propios ajustes y estilos, que pueden personalizarse de forma independiente mediante los paneles de Ajustes y Administrador de estilos descritos previamente.

(se abre a tamaño completo en una ventana nueva) Imagen 27: Panel de Bloques con los componentes disponibles para insertar en la página.

2.5 Duplicar Página

La acción Duplicar replica la configuración de diseño y los contenidos de una página existente. De forma automática se agrega la palabra Copia al nombre y a la ruta de la nueva página, evitando conflictos con la página original. Esta funcionalidad resulta útil para crear variantes de una misma página o para utilizar una página existente como plantilla.

2.6 Eliminar Página

La acción Eliminar borra definitivamente la página seleccionada del sistema. Antes de ejecutar la eliminación se solicita una confirmación al usuario.

Nota: La eliminación de una página es una acción irreversible. Junto con la página se eliminan también su configuración, contenidos y referencias. Se recomienda exportar previamente la configuración en formato JSON si se desea conservar un respaldo.