Generar web estática de un proyecto

El objetivo es hacer una publicación web de páginas estáticas .htm (no una web dinámica que se indiza peor en el SEO) y poner ese contenido al público con información de nuestra BD de incidencias, inventario, mantenimiento... en una intranet o de forma totalmente abierta en internet. El espacio de alojamiento de la web, así como el servidor web que atenderá nuestra dirección también lo proporciona Ingrid dentro del espacio de nuestro proyecto en la nube.

 demo-sanse-verde, entrando con el usuario ingrid y contraseña ingrid, es la BD de jardinería que podemos usar para ver como ejemplo muy simple, con pocos datos. Un tutorial de funcionamiento que explica las herramientas. Además, en la base tenemos el generador web de una web más completa con funciones que nos ayudarán a generar la de nuestro proyecto aunque tenga un modelo de datos distinto.

Opción A. Para probar la web sencilla desde este mismo proyecto es:

- Abrir el procedimiento 'Generador web ejemplo reducido' y ejecutar los botones Arbolado, Varios, Monta sitemap y Abre desarrollo. Se muestra la web generada al pulsar los 3 primeros botones (sería necesario haber ejecutado Marca concepto .web, pero ya lo hemos hecho nosotros).

- Al pulsar Producción, se copian y comprimen los archivos al directorio que va a ser público y que se abre con el botón Abre Producción.

- Podemos trabajar regenerando o cambiando la web en la parte desarrollo y producirla otra vez al público cuando la tengamos bien probada.

Opción B. Para generar la web completa de este proyecto demo:

- Los mismos, pero desde el script 'Generador WEB completa' que trabaja con más clases, espacios, y también con una organización de incidencias.

Opción C. Para generar la web en un proyecto de una BD distinta:

- Descargar del directorio 'Directorio \ima del proyecto' el archivo '/webD - minima/webD - minima.rar' y poner el contenido dentro de nuestro directorio de proyecto en '/ima/webD - minima/<archivos del .rar descomprimido>'. Estas son las piezas mínimas de una web y tendremos que cambiar los logos, formatos de páginas, estilos y colores como nos convenga. Después tendremos que cambiar en el script los directorios de trabajo, y por supuesto las clases, campos y toda la lógica de nuestra web, basándonos en esta plantilla. Los pasos se detallan en el siguiente capítulo.

Paso a paso del ejemplo reducido

Introducción

Este documento es un manual de usuario para automatizar la creación de páginas web. Para cada página web generada, se utilizan aproximadamente ocho archivos clave:

- Una hoja de estilos CSS o CSS Less
- Un archivo JavaScript encargado de dotar a las páginas de funcionalidades en tiempo real como ordenar tablas o expandirlas
- Por otro lado, existirá otro archivo JavaScript que automatizará tareas técnicas, como la creación automática de carpetas y la generación de un archivo .zip que contendrá toda la página web completa.
- Un archivo principal index.htm
- Imágenes (si las hay) dentro de la carpeta '/ima' para mantener una estructura jerárquica, es más fácil para luego hacer el pro.generaWEB.htm
- Htms estáticos como pueden ser documentación y ayuda.
- Una plantilla.html que contiene los componentes que siempre estarán presentes en la página web como el encabezado, pie de página o menú lateral.

Para comprender mejor el procedimiento y los archivos necesarios para crear una página web, en la base de datos demo-sanse-verde se encuentra el pro.generaWEB. Además, se incluye un archivo con un ejemplo simplificado de generación de web llamado pro.generaWEBMinimo, diseñado específicamente para facilitar la comprensión del proceso y sus componentes fundamentales.
El pro.generaWEB que se encuentra en esta base de datos está adaptado a los datos de Sanse Verde. Para poder utilizar el pro.generaWEB en otras bases de datos se tienen que realizar los siguientes pasos:

1. En demo-sanse-verde, en el directorio dir.ima, se encuentra webD - minima, que en su interior tiene un .rar con todos los archivos necesarios para crear una web. Deberás descargar este .rar y descomprimirlo de manera local.

2. Posteriormente, en la nueva base de datos donde se utilice el procedimiento, deberás crear “dir.ima”, que nos servirá como carpeta raíz . Dentro de este, con la función de Admin activada, en la persiana Directorio, escribir en directorio asociado ima y recargar página.
Una vez dentro del directorio /ima, deberemos crear dos carpetas, las cuales son:
web: donde estarán los archivos de la página web para producción. Se crearán automáticamente.
webD: dónde estarán los archivos de la página web para desarrollo.
En webD deberemos copiar los archivos web_util.css, web_util.js e index.htm. A continuación creamos dos carpetas, las cuales son:

    · a: donde estará la plantilla.htm, y los distintos archivos de texto plano, en el caso de Sanse Verde son formulario_cuerpo y ayuda_cuerpo.
   · ima: dónde se encontrarán todas las imágenes que va a utilizar la página web.

Archivos sencillos

.css
En el proyecto tendremos un archivo llamado web_util.css que contendrá los estilos correspondientes a los diferentes elementos que necesitaremos para la visualización de la página web.

.js
En el proyecto se utilizará un archivo llamado web_util.js, que incluirá diferentes funciones JavaScript encargadas del funcionamiento dinámico y en tiempo real de las páginas web. Estas funciones permiten realizar tareas comunes como ordenar tablas haciendo clic en sus encabezados o expandir contenido para visualizar más información. El objetivo es que web_util.js sea altamente reutilizable, siendo el mismo archivo utilizado en todas las páginas web generadas, lo cual facilita su mantenimiento e integración de funcionalidades específicas según sea necesario. Por otro lado, existirá otro archivo llamado produccion.js JavaScript que automatizará la creación automática de carpetas y la generación de un archivo .zip que contendrá toda la página web completa.

Index.htm
Un archivo index.htm muy sencillo que contendrá una redirección a la URL que queremos que sea la principal.

Imágenes
En caso de que se empleen imágenes en la página web, estas se almacenarán siempre dentro de la carpeta "ima". Esta estructura facilita la gestión de archivos, evitando la necesidad de modificar las URLs en el proceso automático de generación de páginas. Es importante destacar que dentro de la carpeta "ima" todas las imágenes deben estar al mismo nivel, sin subcarpetas.

Plantilla.htm
Archivo .htm que contiene todos los elementos fijos de la página web. Este archivo deberá incluir siempre tres bloques fundamentales sin nada dentro: <style></style>, <article></article> y <script></script>. Estos bloques son esenciales para que el proceso de generación automática inserte correctamente su código: el contenido HTM generado automáticamente irá dentro de <article></article>, los estilos CSS dentro de <style></style> y las funciones JavaScript necesarias dentro de <script></script>.

Un ejemplo práctico de este concepto puede observarse en Sanse Verde, donde tanto el encabezado como el menú lateral permanecen constantes, siendo únicamente el contenido ubicado dentro del bloque <article></article> lo que varía en cada página generada automáticamente.

Archivos de texto plano

En este procedimiento se pueden utilizar archivos de texto plano para simplificar el mantenimiento del código y facilitar las actualizaciones de ciertas páginas web. Estos archivos contienen información estática como documentación, guías de uso o archivos de ayuda, que pueden ser fácilmente editados sin afectar al código fuente. En el caso del proyecto sanse-verde se puede observar en el documento ayuda_cuerpo.htm.

Archivo complejo pro.GeneraWeb.htm

En esta primera parte se explicarán los pasos para generar los htms de la información obtenida de la base de datos.

1. El primer paso consiste en definir una lista con todas las clases que queremos visualizar en nuestro sistema. Ej:

En este caso creamos una lista con:
· cod: indicará el código que se utilizará en este procedimiento para llamar a esa clase
· col: color con el que se va a representar en la página web
· res: breve resumen de la clase
· res1: Nombre corto de la clase

2. Convertir esta lista (array de objetos) a un objeto de objetos utilizando la función de la api ingra.ds seleccionando un atributo como índice, esto nos servirá para buscar y modificar fácilmente . Ej:

let clas= ingra.ds(clal,'cod') nos dará como resultado la lista “clal” en forma de objeto de objetos donde el índice de cada objeto será el cod0.

3. Debemos preparar un menú de opciones que permita al usuario interactuar con el sistema. Esto implica definir qué ocurre al hacer clic en cada botón o enlace disponible. Por ejemplo, si se pulsa el botón 1, se ejecutará una función específica; si se pulsa el botón 2, se ejecutará otra función, y así sucesivamente. Un ejemplo de creación de menú es:
Definimos el menú en “Definición de parámetros” dentro del procedimiento dentro de la base de datos. Ej:

Que se verán de manera visual en el programa de la siguiente forma:

En el procedimiento (código fuente) realizaremos unos “if” que permitan manipular qué opción se intenta realizar:

4. Lo siguiente que necesitamos en nuestro programa es recoger los datos de la base de datos para tenerlos ya disponibles en una lista. Para el ejemplo de sanse-verde, esto se realiza en la función de cargaArbolado(). Para este proceso se utiliza una función de la API muy común llamada leeConceptos, donde hay que indicar de la siguiente forma:

leeConceptos( ‘búsqueda en la base de datos’, {que atributos queremos seleccionar de cada clase}) y hacer un return en caso de error.

Ejemplo código:

r= await bas.leeConceptos('cla=famgen', {cod:1,res:1,gencom:1,IDgen:1}); if (r?.error) return r

En el código anterior leeremos de la base de datos todos los conceptos de la búsqueda cla=famgen y lo guardaremos en una lista de objetos y de cada concepto seleccionamos el código (cod), resumen (res), nombre común (gemcon) y ID genero (IDgen) y, si no se devuelve nada, retornaría un error.

5. Una vez tenemos todos los conceptos se puede filtrar aquellos que tengan relevancia para la página web. Para el caso de Sanse Verde, mediante la función calculaArbolado() filtraremos familias, zonas y calles que tengan árboles y saber cuántos árboles tiene cada uno.

6. Una vez tenemos los datos y el menú terminado, podemos crear los componentes html con sus datos correspondientes de las clases. Cada clase se compondrá de dos partes principales: montarclase_doc1 y montarclase_doc2:

montarclase_doc1: se procesan y estructuran todos los datos relevantes correspondientes a un concepto específico dentro de una clase, como por ejemplo, la especie Platanus hybrida. Ej:

montarclase_doc2: genera una tabla general que agrupa todos los elementos pertenecientes a esa clase como, por ejemplo, una Tabla General de Especies que incluye múltiples filas, cada una representando un concepto diferente (como Platanus hybrida).

7. Código montarclase_doc2, caso específico de tablas:

· Se crean las listas para introducir el htm, estilo y javascript.
· Se introducen las cabeceras en la lista de htm
· Se monta la tabla con monta_tabla_num_por().
· Se realizan las gráficas con monta_grafica().
· Una vez finalizado utilizaremos la función graba_htm() que creará todos los htm.

8. Código de montarclase_doc1, caso específico de tablas:
· Filtramos los datos relacionados únicamente con ese concepto. En el caso de Sanse Verde, filtramos el árbol y determinamos en qué calles y zonas aparece dicho árbol.
· Se crean las listas para introducir el htm, estilo y javascript.
· Se introducen las cabeceras en la lista de htm
· Se crea una tabla con las propiedades del concepto
· Se copia un objeto con la estructura de docl, para poder realizar el calculaArbolado(), pero en este caso es para un concepto en específico, así se puede calcular cuántos árboles hay en cada zona, calle, etc. pero solo para este árbol
· Se monta la tabla con monta_tabla_num_por().
· Se realizan las gráficas con monta_grafica().
 · Una vez finalizado utilizaremos la función graba_htm() que creará el htm individual.

Ahora que tenemos una idea general sobre cómo mostrar una clase y generar sus respectivos archivos .htm, continuaremos con la explicación de funciones de utilidad, la creación de archivos de texto plano y otros componentes esenciales.

Función montaSitemap(): se encarga principalmente de generar dos archivos esenciales para la indexación y gestión de un sitio web por parte de los motores de búsqueda. Esta función debería funcionar igual para todas las páginas web:

· sitemap.xml: Este archivo contiene un listado estructurado de todas las URLs generadas por el sistema, permitiendo a los motores de búsqueda como Google rastrear e indexar el contenido de manera eficiente. Cada URL se presenta junto con información relevante como la última modificación, la frecuencia de actualización y la prioridad asignada.

· robots.txt: Este archivo proporciona instrucciones a los robots de búsqueda sobre qué partes del sitio web deben o no ser rastreadas. Es útil para controlar el acceso de los bots a determinadas áreas del sitio y optimizar así la eficiencia del rastreo

Función marcaConceptosWeb(): el propósito de esta función es identificar y marcar en la base de datos aquellos conceptos que ya tienen su archivo .htm generado. Para ello, actualiza su parámetro correspondiente denominado "en web" estableciéndose en 1, lo cual indica que el archivo .htm ha sido creado correctamente. Marcar el parámetro permite que la función de búsqueda sólo identifique y devuelva aquellos conceptos que tienen un archivo .htm generado. Hay que indicar las listas donde se quiere marcar el parámetro.

Función monta_ayuda(): sirve para generar el .htm del archivo texto plano ayuda_cuerpo.htm. Habría que crear otra función en caso de que el archivo texto plano sea diferente a “dirDesarrollo+'/a/ayuda_cuerpo.htm”, con la nueva dirección como, por ejemplo: “dirDesarollo+’/b/archivo_texto.htm”.

Función monta_formulario(): sirve para generar el .htm del archivo formulario_cuerpo.htm para enviar consultas a la base de datos.

Función calculaArbolado(): Función específica de Sanse Verde que nos sirve para calcular cuántos árboles hay en cada zona, calle, etc. En el caso de sanse-verde el orden es:

· Crear un objeto de la lista dónde queremos encontrar un parámetro e inicializar una variable que nos sirve como contador
· Se recorre la lista, buscando si ese código existe en la lista árboles, en caso de que exista, se suma uno al contador
· Ahora comprobamos la lista y aquellos parámetros que tengan el valor diferente de 0 serán los seleccionados.
· Se añade el % de árboles que hay en esa zona.

Función monta_tabla_num_por(): Esta función creará las tablas con los datos que tenemos almacenados en las listas. Esta función consta de 3 partes principales que son:

· Cabecera: el primer al.push se encarga de añadir la fila de cabecera, recorriendo los diferentes parámetros de nuestra lista. Durante este proceso, se asigna el evento ordenaTabla() a cada columna y, si el parámetro es numérico, se agrega un indicador especial (flag) para identificarlo.
· Datos: el segundo al.push introduce los datos correspondientes a cada fila, columna por columna. Utilizamos el índice i para definir cuántas filas se mostrarán inicialmente. Para cada dato, se crea un elemento <a> con un evento onclick=location que redirige a su respectivo concepto.htm. Además, se aplica un estilo específico dependiendo del tipo de dato que se esté mostrando.
· Última fila: esta fila se utiliza para añadir funcionalidades adicionales, como expandir o colapsar filas, mostrar el total de árboles, etc.

Función monta_propiedades(): pequeña función que sirve para crear una tabla con las propiedades del concepto de ese concepto.htm.

Función monta_grafica(): pequeña función que utiliza la API para crear una gráfica. El parámetro “docl” debe ser aquella lista de la que queramos realizar la gráfica y posteriormente seleccionar sus atributos.

Función monta_mapa(): pequeña función que utiliza la API para crear un mapa INCA. El parámetro “docl” debe ser aquella lista de conceptos de la que queramos realizar el mapa.

IMPORTANTE Función graba_htm(): Esta función se encarga de automatizar la generación de los distintos archivos .htm. Durante la creación de tablas, mapas y otros elementos, se añaden los datos correspondientes a sus respectivos arrays (al, bl, cl).
Al ejecutar la función graba_htm(), cada uno de estos arrays se inserta en su lugar correspondiente dentro de la plantilla HTML que hemos diseñado:

· El contenido de la lista al se inserta dentro de las etiquetas <article> </article>.
· El contenido de la lista bl se inserta dentro de las etiquetas <script> </script>.
· El contenido de la lista dl se inserta dentro de las etiquetas <style> </style>.
 · Cuando se realiza una gráfica o mapa, se guardará contenido en la lista cl, que se introduce en window.onload
Finalmente, la función graba_htm() llama a la función grabaArchivo de la API, que se encarga de generar el archivo .htm individual con el contenido.