# Manual de instalación Aplicación de **Mantenimiento de Parques y Lotes**. Es una página web estática: no necesita servidor de aplicaciones, ni PHP, ni base de datos externa. Toda la información se guarda en el navegador del dispositivo mediante IndexedDB. --- ## 1. Contenido del paquete ``` parques-mantenimiento/ ├── index.html Página principal ├── manifest.json Identidad de la aplicación instalable ├── sw.js Service Worker (funcionamiento sin conexión) ├── css/ │ └── estilos.css ├── js/ │ ├── util.js Funciones generales │ ├── db.js Base de datos IndexedDB (Dexie) │ ├── auth.js Usuarios y perfiles locales │ ├── inventario.js Parques, lotes y mapa │ ├── programacion.js Calendario y rutinas │ ├── trabajos.js Registro de trabajos y evidencias │ ├── indicadores.js Panel y gráficos │ ├── catalogos.js Responsables, cuadrillas, equipos, bitácora │ ├── exportar.js Excel y PDF │ ├── respaldo.js Respaldo y restauración │ ├── demo.js Datos de demostración │ └── app.js Arranque y navegación ├── img/ Iconos de la aplicación ├── libs/ (Opcional) Bibliotecas descargadas └── docs/ Manuales ``` --- ## 2. Requisitos - Un hosting que sirva archivos estáticos (cPanel, Plesk, IIS, Apache, Nginx, GitHub Pages, Netlify, un servidor institucional interno, etc.). - **HTTPS**, o bien `http://localhost`. Sin uno de los dos, el navegador no permite instalar la aplicación ni activar el funcionamiento sin conexión. - Navegador actualizado: Chrome, Edge, Firefox o Safari. --- ## 3. Instalación paso a paso 1. Descomprima el archivo `parques-mantenimiento.zip`. 2. Suba **todo el contenido de la carpeta** al directorio público del hosting, normalmente `public_html`, `www`, `htdocs` o `wwwroot`. - Para publicar en la raíz: suba el contenido directamente. - Para publicar en una subcarpeta, por ejemplo `https://sitio.go.cr/parques/`: cree la carpeta `parques` y suba ahí el contenido. Las rutas del proyecto son relativas y funcionan igual. 3. Verifique que los permisos de los archivos sean de solo lectura para el público (644 en archivos, 755 en carpetas). 4. Abra la dirección en el navegador. Debe aparecer la pantalla de ingreso. 5. Ingrese con el usuario inicial: - Usuario: `admin` - Contraseña: `admin123` 6. **Cambie de inmediato la contraseña** en la sección *Usuarios*. ### Prueba local sin hosting Desde la carpeta del proyecto, ejecute uno de estos comandos y abra `http://localhost:8080`: ```bash python3 -m http.server 8080 ``` ```bash npx serve -l 8080 ``` Abrir `index.html` con doble clic (protocolo `file://`) muestra la interfaz, pero el Service Worker no se registra y algunas funciones quedan limitadas. --- ## 4. Instalar la aplicación en la computadora o el teléfono 1. Abra la dirección en Chrome, Edge o Safari. 2. Aparecerá el icono de instalación en la barra de direcciones, o use *Ayuda y avisos → Instalar aplicación*. 3. En Android: menú del navegador → *Agregar a la pantalla de inicio*. 4. En iPhone o iPad: botón Compartir → *Agregar a pantalla de inicio*. Después de la primera carga completa, la aplicación abre y funciona sin conexión. Solo el mapa necesita internet para descargar las imágenes de OpenStreetMap. --- ## 5. Bibliotecas: modo con internet y modo totalmente local De fábrica, `index.html` carga las bibliotecas desde un CDN público y el Service Worker las guarda en caché la primera vez, de modo que después funcionan sin conexión. Si la institución necesita que **nunca** se consulte internet, descargue estos archivos y colóquelos en `libs/`: | Biblioteca | Archivo | Uso | |---|---|---| | Dexie 4 | `dexie.min.js` | IndexedDB | | Leaflet 1.9 | `leaflet.js`, `leaflet.css`, carpeta `images/` | Mapa | | FullCalendar 6 | `index.global.min.js` | Calendario | | Chart.js 4 | `chart.umd.min.js` | Gráficos | | SheetJS 0.20 | `xlsx.full.min.js` | Excel | | jsPDF 2.5 | `jspdf.umd.min.js` | PDF | | jsPDF AutoTable 3.8 | `jspdf.plugin.autotable.min.js` | Tablas en PDF | Luego, en `index.html`, cambie las rutas. Por ejemplo: ```html ``` Y agregue esos archivos a la lista `ARCHIVOS` dentro de `sw.js`. Sin el mapa no se pierde ninguna otra función: los parques conservan sus coordenadas y se exportan igual. --- ## 6. Actualizar la aplicación 1. Suba los archivos nuevos al hosting. 2. Abra `sw.js` y cambie la línea `const VERSION = 'parques-v1';` por `'parques-v2'`, `'parques-v3'`, y así sucesivamente. 3. Los usuarios recibirán la versión nueva al recargar la página dos veces. **Los datos guardados no se pierden al actualizar los archivos**, porque viven en IndexedDB, no en el servidor. Aun así, pida un respaldo antes de cada actualización. --- ## 7. Configuración inicial recomendada 1. *Ayuda y avisos → Configuración*: nombre de la institución, dependencia, moneda, coordenadas iniciales del mapa y frecuencia del recordatorio de respaldo. 2. *Personal y equipos*: registre responsables, cuadrillas y maquinaria. 3. *Parques y lotes*: cargue el inventario con código, área y coordenadas. 4. *Calendario*: cree las programaciones periódicas. La aplicación genera automáticamente los trabajos de los próximos 60 días. 5. *Usuarios*: cree una cuenta por persona con el perfil que corresponda. 6. *Respaldo y restauración*: descargue el primer respaldo y defina quién lo hará y con qué frecuencia. Los datos de demostración se cargan solos la primera vez. Para eliminarlos: *Respaldo y restauración → Borrar toda la información*. --- ## 8. Perfiles de usuario | Perfil | Alcance | |---|---| | Administrador | Todo, incluida la administración de usuarios y el borrado de información | | Jefatura | Consulta, programación, registro, exportación y respaldos | | Supervisor | Consulta, programación, registro e inventario | | Funcionario | Consulta y registro de trabajos | | Consulta | Solo lectura | Este control es local, propio de cada dispositivo, y no sustituye un sistema institucional de autenticación. --- ## 9. Problemas frecuentes **La aplicación no funciona sin conexión.** Debe servirse por HTTPS o localhost. Revise en *Ayuda y avisos* que diga “Funciona sin conexión: sí”. **El mapa aparece en blanco.** Necesita internet. El resto de la aplicación sigue operando. **No aparecen los datos que había registrado.** Verifique que sea el mismo navegador, el mismo dispositivo y el mismo perfil de usuario del navegador. Los datos no se sincronizan entre equipos. Si limpió los datos de navegación, restaure desde el último respaldo. **Falta espacio o las fotografías ocupan mucho.** Las imágenes se comprimen a 1280 px y calidad 72 %. Revise el espacio en *Respaldo y restauración → Espacio y limpieza*. **Modo incógnito.** La información se pierde al cerrar la ventana. No lo utilice para trabajar.