Volver a proyectos
En producción

Sitio comercial de Dalem Conecta

Sitio web estático que presenta Dalem Conecta a las agencias de viaje, rápido, con buen SEO y en producción.

Rol: Diseño y desarrollo front-end

  • Astro
  • TypeScript
  • CSS
  • Cloudflare Pages
Página principal del sitio de Dalem Conecta

Problema

Dalem Conecta ya funcionaba como producto, pero las agencias de viaje tenían que enterarse de que existía y entender en pocos segundos qué hacía. Una agencia que busca un CRM compara varias opciones en el celular, entre llamadas y mensajes, y no lee páginas largas. Si el sitio tarda en cargar o no explica el valor enseguida, la visita se pierde.

El sitio también tenía que ser fácil de encontrar. Casi todos sus visitantes llegan desde un buscador, así que el texto, los títulos y los datos estructurados importan tanto como el diseño. Y como lo mantiene una sola persona, tenía que ser barato de alojar y simple de actualizar.

Solución y funciones clave

El sitio comercial es una página estática generada con Astro y publicada en Cloudflare Pages. Está separado de la aplicación a propósito: puede cambiar de texto o de diseño sin tocar el producto, y no depende de ninguna API. Estas son sus piezas principales:

Rendimiento

Astro entrega HTML ya generado y casi no envía JavaScript. Las imágenes se sirven en formatos modernos y con tamaños responsivos, las fuentes se cargan desde el mismo dominio y las animaciones se limitan a lo que no cuesta rendimiento. El objetivo es que la página sea utilizable de inmediato en un celular con conexión normal, que es como la mayoría de los asesores la va a abrir.

SEO técnico

Cada página tiene su título, su descripción, su dirección canónica y su imagen para compartir en redes. Además incluye datos estructurados en JSON-LD que describen el producto, la organización y las preguntas frecuentes, un mapa del sitio y un archivo de robots. El HTML es semántico, con un solo título principal por página y textos alternativos en las imágenes. Nada de esto se ve a simple vista, pero es lo que hace que un buscador entienda de qué trata cada página.

Despliegue

El repositorio está conectado a Cloudflare Pages: cada cambio aprobado se compila y se publica solo, con cabeceras de caché largas para los archivos con huella y cabeceras de seguridad para el resto. Es gratis, rápido en todo el mundo y no requiere servidor propio. Para una página que cambia pocas veces al mes, es una infraestructura que casi no da trabajo.

El resultado es un sitio ligero que carga rápido y que cualquiera puede visitar ahora mismo, con la información justa para que una agencia decida si quiere ver una demostración del producto.

Arquitectura

Arquitectura del sitio comercialDiagrama simplificado: el navegador pide la página a la red de Cloudflare Pages, que sirve el sitio estático de Astro; el repositorio compila y publica el sitio, y el sitio enlaza a la aplicación de Dalem.NavegadorVisitante en celularCloudflare PagesRed global y cachéSitio estáticoAstro + CSSSin JS por defectoAplicaciónDalem ConectaRepositorio y CICompila y publicaArquitectura del sitio comercialDiagrama simplificado: el navegador pide la página a la red de Cloudflare Pages, que sirve el sitio estático de Astro; el repositorio compila y publica el sitio, y el sitio enlaza a la aplicación de Dalem.NavegadorVisitante en celularCloudflare PagesRed global y cachéSitio estáticoAstro + CSSSin JS por defectoAplicaciónDalem ConectaRepositorio y CICompila y publica

Diagrama simplificado; omite detalles internos por privacidad.

Decisiones técnicas

  1. Astro estático, sin JavaScript por defecto, en lugar de una aplicación de una sola página.

    Por qué
    El sitio es casi todo contenido. Entregar HTML ya generado hace que cargue rápido incluso en celulares modestos y deja el texto listo para los buscadores.
    Trade-off
    Cualquier interacción que necesite estado en el cliente exige añadir un poco de JavaScript a propósito, en lugar de tenerlo gratis con un framework de cliente.
  2. Los datos de las secciones viven en archivos aparte, no dentro de los componentes.

    Por qué
    Cambiar un texto o una cifra no obliga a tocar el diseño, y se reduce el riesgo de romper una página por un cambio de contenido.
    Trade-off
    Hay un nivel más de indirección: para ver una sección completa hay que mirar el componente y su archivo de datos.
  3. Tema claro y oscuro con un script mínimo en la cabecera, antes del primer pintado.

    Por qué
    Respeta la preferencia del dispositivo y evita el parpadeo de un tema equivocado al cargar.
    Trade-off
    Es un script bloqueante, pequeño pero obligatorio, que hay que mantener muy corto para no costar rendimiento.

Mi rol

Diseñé y construí el sitio completo: la estructura de las páginas, el sistema visual con tema claro y oscuro, el SEO técnico y el despliegue. Lo mantengo y lo ajusto según lo que muestran las visitas y las consultas de las agencias.

Siguiente proyecto

PublicadoDriverFinanceTrackerApp Android sin conexión para que conductores de plataformas registren ingresos y gastos en pocos toques.Ver caso

¿Tienes un proyecto?

Hablemos de tu proyecto