Chismografo (HTML, CSS y JS)

Este proyecto es un frontend de un chismografo construido con tecnologias web basicas y sin frameworks.

Que incluye

1. Pagina de publicacion (publicar.html) con formulario para:

• Titulo
• Chisme
• Categoria (cargada desde un endpoint simulado)
• Color del chisme
• Boton de publicar

2. Pagina principal (index.html) para:

• Ver chismes en tarjetas
• Buscar por nombre/texto
• Filtrar por categoria

3. Simulacion de backend en api.js:

• getCategories()
• getChismes()
• publishChisme(payload)

4. Animacion de carga global:

• Se muestra al obtener datos del backend simulado.
• Se muestra al publicar un chisme.
• Se muestra al cambiar entre paginas.

Decisiones de implementacion

• Se separaron paginas y scripts por responsabilidad:

  • index.html + main.js: muro y filtros.
  • publicar.html + publish.js: formulario y preview.
  • api.js: capa de datos simulada.
  • color-utils.js: logica reutilizable de contraste.

• Se uso localStorage para simular persistencia temporal y emular un backend real:

  • Permite publicar en publicar.html y ver resultados en index.html.
  • Los metodos del API regresan Promise con delay para imitar latencia de red.

• El selector de color ajusta automaticamente el color de texto usando luminancia percibida:

  • Fondo claro -> texto oscuro.
  • Fondo oscuro -> texto claro.
  • Esto mejora legibilidad en la vista previa y tarjetas publicadas.

• Se agrego un modulo compartido de carga en loading.js:

  • withLoading(...) para envolver operaciones async.
  • setupNavigationLoading(...) para mostrar loader al navegar entre index.html y publicar.html.

• La interfaz tiene un estilo visual intencional:

  • Tipografia expresiva (Fraunces + Space Grotesk).
  • Fondo con gradientes y textura suave.
  • Animaciones cortas de entrada para tarjetas.
  • Layout responsive para desktop y mobile.

Como ejecutar

No necesitas build.

1. Abre la carpeta del proyecto en VS Code.
2. Abre index.html en navegador (o Live Server).
3. Navega a publicar.html para crear chismes.

Endpoints simulados y reemplazo futuro

Actualmente, api.js centraliza los endpoints simulados.

Cuando exista backend real, solo tendrias que reemplazar la implementacion de:

• api.getCategories()
• api.getChismes()
• api.publishChisme(payload)

por llamadas fetch a tus rutas reales, sin cambiar la logica principal de UI.

Limites actuales

• No hay autenticacion ni autor real.
• No hay paginacion.
• No hay validaciones avanzadas del lado servidor porque es simulado.

Resumen

El proyecto queda listo como base visual y estructural para conectar un backend despues, manteniendo la separacion entre UI y capa de datos.