Web Prevención de Riesgos

Profesional independiente de Atacama con 14 años de experiencia en prevención de riesgos que necesitaba una presencia digital propia y capacidad para actualizarla sin depender siempre de un desarrollador.

La experiencia profesional no estaba respaldada por una vitrina digital propia y cada cambio de contenido dependía de terceros. El desafío era hacer visible el servicio, ordenar la propuesta para búsquedas locales y facilitar el contacto de potenciales clientes sin convertir la web en una operación difícil de mantener.

Diseñé y desarrollé la web pública y el panel autogestionable: arquitectura de contenido, componentes responsive, SEO técnico/local, metadata estructurada, almacenamiento de imágenes, flujo de contacto y controles de administración.

La solución debía ser administrable desde móvil, mantener bajo el costo operativo, conservar el contenido e identidad de la profesional, funcionar con servicios gestionados y orientar la navegación hacia contacto directo para clientes de Atacama y Chile.

Construí una landing comercial con secciones de presentación, experiencia, servicios, sectores, regulaciones, diferenciadores, testimonios, preguntas frecuentes y contacto. El panel permite actualizar contenido desde el teléfono y subir imágenes sin editar código. La estructura de SEO local incorpora datos de negocio, páginas por servicio/sector, metadata social y datos estructurados, mientras la interfaz usa animación controlada y llamadas a la acción hacia WhatsApp sin sacrificar la lectura en móvil.

Aplicación Next.js con App Router, React, TypeScript y Tailwind CSS. La capa pública obtiene secciones desde Firestore y conserva defaults seguros cuando Firebase Admin no está disponible; las páginas de servicios y sectores tienen rutas SEO propias con metadata, JSON-LD, sitemap y robots. El panel administrativo usa APIs server-side para leer y guardar contenido con Firebase Admin, mientras Firebase Storage gestiona imágenes. El despliegue está preparado para Vercel y no requiere mantener un servidor propio.

Elegí Next.js y Vercel para reducir mantenimiento de infraestructura, Firestore para organizar secciones editables y Storage para las imágenes. El navegador no escribe directamente en los servicios administrativos: el panel entrega el token a la API, que valida la sesión y opera mediante Firebase Admin. También mantuve el contenido público respaldado por defaults, usé allowlists de rutas/URLs y prioricé mobile-first porque parte de la consulta ocurre desde terreno.

El panel exige un Firebase ID token verificado en servidor con Firebase Admin y una condición de administración basada en claim o lista autorizada. Las escrituras del navegador a Firestore y Storage están bloqueadas; las APIs server-side sanitizan el contenido contra un esquema conocido, validan URLs/rutas y limitan longitud y cantidad. Las cargas comprueban extensión, MIME y firma real del archivo, limitan el tamaño, sanitizan el nombre y usan una ruta controlada. Se añadieron headers defensivos y el panel queda fuera de indexación. Esta descripción es deliberadamente de alto nivel: no publica credenciales, emails administrativos, IDs de proyecto, buckets, tokens, datos de clientes ni rutas operativas, y no se presenta como una auditoría externa.

El repositorio incluye una suite automatizada con Node Test para validar contenido, allowlists de imágenes/URLs, importación modular de Firebase Admin, headers defensivos, SEO/runtime y ausencia del cursor personalizado. También existe un reporte de auditoría frontend con revisión responsive desktop/mobile, overflow, menú, FAQ, imágenes y consola. No se publica un benchmark independiente de conversión, carga o disponibilidad; esas métricas deben validarse con analítica y observabilidad del cliente.

Aplicación Next.js preparada para Vercel, con Firebase como servicio gestionado para autenticación administrativa, contenido y almacenamiento. Las variables sensibles se mantienen del lado servidor; las reglas de Firestore/Storage, el noindex del panel, robots y headers se consideran parte del despliegue. La demo pública muestra la experiencia comercial y no expone el panel ni la configuración interna.

La profesional obtuvo un canal digital propio, una presentación orientada a servicios locales y la capacidad de actualizar textos e imágenes sin solicitar un cambio de código por cada modificación. Quedaron implementadas la base técnica de SEO local y la experiencia mobile-first; cualquier mejora en posicionamiento, contactos o contratos debe demostrarse con analítica o resultados documentados del cliente.

Evidencia pública: demo visual en WebSole.webm y la ficha del proyecto. La ficha incluye una muestra aislada de preparación de contenido público para evidenciar calidad y mantenibilidad sin publicar lógica administrativa, configuración de servicios ni datos del cliente. Evidencia técnica revisada: README, reporte de auditoría frontend, suite de pruebas, validación de contenido, rutas SEO y configuración pública. No se publican secretos, datos personales, contenido administrativo ni detalles que faciliten el acceso a la operación real.