Manual de Geonodo: Todo lo que Necesitas para Empezar

Páginas web

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.

Este módulo se encuentra disponible en el menú principal bajo la sección “Publicación”. A continuación se presentan todas las interfaces y funcionalidades detalladas para la gestión de contenidos web.

1. Interfaz del módulo.

Al ingresar al módulo Páginas web, el usuario se encontrará con el panel central de administración. La pantalla principal muestra las páginas existentes organizadas en un listado tabular junto con herramientas de configuración global:

Imagen 1: Vista general del Gestor de páginas web y su listado de registros.

• Botón “Nueva Página”: ubicado en la esquina superior derecha, permite añadir un nuevo registro de página web al sistema.
• Botones de migración (“Exportar páginas” / “Importar páginas”): utilidades para respaldar la configuración completa en formato JSON o transferir estructuras de diseño entre distintos servidores Geonodo.
• Listado de páginas: tabla que muestra las columnas ID, Nombre, Título, Ruta, Estado de publicación (interruptor) y la columna de Acciones para editar, ver, maquetar, duplicar o eliminar.

2. Funcionalidades

A continuación se describen los pasos para registrar una página y el uso detallado del diseñador visual e interfaz GrapesJS.

2.1 Nueva Página

Para registrar una nueva página en la plataforma, haga clic en el botón Nueva Página. Se desplegará un formulario lateral donde deberá completar los siguientes campos obligatorios:

• Nombre: identificador interno para la administración del recurso.
• Título: texto descriptivo que se mostrará en la pestaña del navegador del usuario final.
• Ruta: dirección URL amigable asociada a la página (por ejemplo: /inicio o /contacto).

Imagen 2: Formulario de creación de una nueva página web.

Tras completar los campos, haga clic en Guardar. La página aparecerá listada en estado despublicado de forma predeterminada.

2.2 Configurar y Maquetar página (Framework GrapesJS)

Para diseñar visualmente el contenido de una página, haga clic en el ícono de engranaje (Configurar) de la columna Acciones. Esta acción cargará la interfaz del constructor visual GrapesJS, la cual está compuesta por un lienzo central y tres paneles operativos de control:

Imagen 3: Interfaz de diseño visual GrapesJS en Geonodo.

2.2.1 Barra de Herramientas Superior

Ubicada en la parte superior derecha de la pantalla de diseño, provee controles directos sobre el lienzo y el código de la página:

Imagen 4: Controles de la barra de herramientas superior.

• Ver componentes (Ícono de cuadrícula): resalta con líneas punteadas los bordes y divisiones de cada bloque contenedor insertado en el diseño, facilitando la comprensión de la estructura HTML.
• Vista previa (Ícono de ojo): oculta los paneles de edición y simula la visualización exacta que tendrá el usuario final en la web.
• Pantalla completa: expande el área de trabajo de GrapesJS ocupando todo el monitor.
• Ver Código (</>): abre una ventana técnica emergente con el código HTML y CSS generado automáticamente por la herramienta. Los usuarios avanzados pueden modificar el código directamente desde aquí.
• Guardar (Disquete): consolida de manera definitiva los cambios de diseño en el servidor.
• Deshacer / Rehacer (Flechas): permiten revertir o repetir de forma cronológica las acciones de maquetación realizadas sobre el lienzo.

2.2.2 Modos de Visualización (Responsividad)

Ubicada en la zona superior central, esta barra permite alternar el tamaño del lienzo entre tres formatos estándar: Escritorio, Tableta y Dispositivo Móvil. Al cambiar de formato, el administrador puede verificar y ajustar cómo se adaptan los textos, imágenes y bloques a pantallas de menores dimensiones.

Imagen 5: Selectores de adaptabilidad responsive (Escritorio, Tableta y Celular).

2.2.3 Panel Lateral Derecho de Herramientas

Este panel dinámico agrupa cuatro pestañas operativas que controlan los estilos, la estructura de capas, las propiedades de los elementos y los bloques constructivos:

A. Administrador de Estilos (Ícono de pincel): permite personalizar la apariencia visual del componente seleccionado en el lienzo. Está dividido en menús desplegables para controlar la tipografía (fuente, tamaño, color, alineación), las dimensiones (ancho, alto, márgenes internos y externos), fondos (colores sólidos o imágenes de fondo) y propiedades de bordes o sombras.

Imagen 6: Panel Administrador de Estilos CSS.

B. Ajustes de Componente (Ícono de engranaje): despliega propiedades específicas dependiendo del tipo de elemento seleccionado. Por ejemplo, si se selecciona un bloque de Imagen, este panel permitirá ingresar la URL de origen de la imagen o definir el texto alternativo (Alt); si se selecciona un enlace (Link), habilitará el campo para escribir la URL de destino y controlar si se abre en una nueva pestaña.

Imagen 7: Panel de Ajustes de propiedades de componente.

C. Administrador de Capas (Ícono de capas jerárquicas): muestra un árbol estructural con la jerarquía exacta de todas las etiquetas HTML dispuestas sobre el diseño. Permite comprender de forma limpia la relación de subordinación entre contenedores de columnas, filas y elementos finales (textos, botones), facilitando la selección de componentes complejos difíciles de pinchar directamente en el lienzo.

Imagen 8: Árbol jerárquico del Administrador de Capas.

D. Panel de Bloques (Ícono de cuatro cubos): biblioteca de componentes listos para arrastrar y soltar (drag and drop) sobre el lienzo central. Se recomienda iniciar la maquetación arrastrando estructuras de diseño (bloques de 1, 2 o 3 columnas) de la sección "Basic" y, posteriormente, incorporar dentro de ellas los elementos de contenido de la sección "Built-in" (Texto, Link, Imagen, Video, Mapa de Google). En la sección "Extra" se dispone del componente **Barra de Navegación** para implementar menús superiores.

Imagen 9: Librería de componentes del Panel de Bloques.

2.3 Acciones de gestión de páginas (Editar, Ver, Duplicar, Eliminar)

De regreso en el listado central del Gestor de páginas web, cada registro dispone de una botonera de acciones operativas al final de su fila:

• Editar nombre/ruta (Ícono de lápiz): abre el formulario básico para modificar los metadatos iniciales de la página (Nombre, Título, Dirección URL).
• Ver página (Ícono de ojo): abre la URL pública de la página en una nueva pestaña del navegador para revisar su comportamiento real en producción.
• Duplicar Página (Ícono de doble hoja): clona de manera íntegra el diseño y los contenidos de la página seleccionada. Al nuevo registro se le añadirá el sufijo "Copia" tanto en su nombre como en su ruta de navegación, quedando guardado en estado despublicado de forma automática para evitar colisiones de rutas.
• Eliminar Página (Ícono de papelera roja): borra permanentemente la página web, sus configuraciones, contenidos y referencias del servidor de Geonodo. Al ser una acción irreversible, se solicita una confirmación previa en pantalla y se aconseja exportar el respaldo JSON en caso de requerir su conservación.

Imagen 10: Botonera de acciones administrativas en el listado principal.