Sitio Kit Digital - INGENIERIA Y CONSULTORIA FRAILE SL

Implementación mínima y cumplidora para la categoría Sitio Web y Presencia en Internet (Fase 1) del programa Kit Digital.

• Empresa beneficiaria: INGENIERIA Y CONSULTORIA FRAILE SL
• Agente Digitalizador: HIMIKODE
• Stack: Astro + TailwindCSS + Decap CMS
• Despliegue objetivo: Netlify (subdominio temporal)

Estructura funcional

• Páginas principales:
  • / (Inicio)
  • /services (Servicios)
  • /contact (Contacto)
• Páginas de soporte:
  • /privacy-policy (Política de privacidad)
  • /directories (Presencia en directorios de empresa)
  • /en/ (Ruta de preparación multidioma)
• CMS:
  • /admin (Decap CMS)
  • Editable: src/content/pages/home.md y src/content/pages/services.md

Requisitos cubiertos

• Sitio con 3+ páginas navegables y contenido realista.
• Diseño responsive (móvil, tablet y escritorio).
• Autogestionable mediante Decap CMS.
• SEO básico: title, description, HTML semántico, sitemap y robots.
• Accesibilidad básica (estructura, labels, contraste, textos alternativos).
• Preparación multidioma con ruta inglesa.
• Footer con publicidad institucional: UE + NextGenerationEU + Plan de Recuperación.
• Página específica para posicionamiento en directorios empresariales.

Puesta en marcha local

npm install
npm run dev

Sitio web: http://localhost:4321
CMS: http://localhost:4321/admin

Configuración de Decap CMS (backend GitHub)

Archivo: public/admin/config.yml

1) Repositorio en config.yml

1. Sustituye repo: ORG/REPO por tu repositorio real de GitHub (por ejemplo mi-org/ingfraile-site).
2. Verifica que la rama (main) coincide con la que despliega Netlify.
3. Si el código no está en la raíz del repo sino en una carpeta (por ejemplo website/), ajusta también las rutas file: y media_folder / public_folder para que apunten a esas rutas dentro del repositorio.

2) OAuth de GitHub + Netlify (imprescindible para editar en /admin en producción)

Sin este paso, el panel puede cargar pero no podrás iniciar sesión o no se guardarán los cambios en GitHub.

1. En GitHub: Settings → Developer settings → OAuth Apps → New OAuth App:
   • Homepage URL: https://ingfraile.netlify.app (o tu dominio final).
   • Authorization callback URL: https://api.netlify.com/auth/done
2. Copia el Client ID y genera un Client secret.
3. En Netlify: tu sitio → Site configuration → Access & security → OAuth → OAuth providers → GitHub → pega Client ID y Client secret (según la UI actual de Netlify).
4. Vuelve a desplegar si cambiaste config.yml.

Documentación oficial del backend: Decap CMS – GitHub backend.

3) Edición local (opcional)

Con local_backend: false en el archivo (recomendado para producción), para probar el CMS en local suele usarse el proxy decap-server según la documentación de Decap.

Logos institucionales (footer)

• Emblema UE: archivo estándar de la bandera europea (Wikimedia Commons – Flag of Europe), copiado como public/images/eu-emblem-official.svg.
• Plan de Recuperación: PNG extraído del paquete oficial publicado en Identidad visual | Plan de Recuperación (ZIP “logos del Plan…”), archivo public/images/plan-prtr-official.png.

Despliegue en Netlify (subdominio temporal)

1. Sube este proyecto a GitHub.
2. En Netlify, crea un nuevo sitio desde ese repositorio.
3. Netlify detectará netlify.toml:
   • Build command: npm run build
   • Publish directory: dist
4. Despliega y verifica:
   • URL principal del sitio.
   • /admin accesible.
   • sitemap-index.xml y robots.txt.
5. Sustituye en:
   • astro.config.mjs (propiedad site)
   • public/robots.txt (URL de sitemap)
   • public/admin/config.yml (site_url y display_url) con el subdominio final de Netlify.

Checklist de evidencias (capturas)

Para justificar Fase 1, prepara capturas de:

1. Diseño web: /, /services, /contact (idealmente mostrando URL).
2. Responsive: misma página en vista escritorio, tablet y móvil.
3. Autogestionable: interfaz CMS en /admin editando Inicio o Servicios.
4. Publicidad institucional: footer con emblemas + texto de financiación.
5. Multidioma preparado: ruta /en/.
6. Directorios de empresa: contenido de /directories.

Scripts útiles

• npm run dev: desarrollo local.
• npm run build: build de producción.
• npm run preview: previsualización de build.