Caso de éxito · Web propia

pindia.es: una web que habla
por sí sola

Nuestra propia web es el primer caso de éxito que enseñamos. Stack vanilla sin frameworks, build automatizado con Node, animación scroll-driven con un robot mascota, SEO técnico y local optimizado para Cantabria y España, accesibilidad WCAG 2.1 AA y Lighthouse 100/100/100/100. Todo desplegado en GitHub Pages tras CI con minificación, generación de blog estático y reescritura de sitemap.

Cliente Pindia Software S.L.
Año 2026
Servicios Diseño · Desarrollo · SEO
Sector Tech / Software B2B
URL pindia.es ↗
El reto

Una web que demuestre lo que vendemos

Si nos dedicamos a construir webs y software a medida, nuestra propia web no podía ser una plantilla genérica con tres íconos y un formulario. Tenía que ser la prueba viva: rápida, accesible, indexable y diferente.

Nos pusimos cuatro objetivos no negociables:

  • Lighthouse 100 en performance, accesibilidad, best-practices y SEO — sin trampas.
  • Posicionar localmente en Cantabria sin descuidar el alcance nacional.
  • Identidad propia: que el robot mascota fuese parte real de la experiencia, no un sticker decorativo.
  • Mantenible sin dependencias: cero frameworks frontend, build sencillo, despliegue gratuito.
100
Lighthouse Performance
100
Accesibilidad WCAG
100
SEO técnico
0
Frameworks frontend
Captura del home de pindia.es: hero con titular animado y robot mascota
Stack tecnológico

Vanilla, ligero, mantenible

La decisión técnica más importante fue la primera: nada de React, Vue, Next, Astro ni bundlers. HTML semántico, CSS con variables y JavaScript vanilla. Build con Node solo para resolver partials, compilar Markdown del blog y minificar. El resultado: zero JS shipping coste, cero hidratación, cache friendly por naturaleza.

HTML5 + CSS3 + JS vanilla

CSS con tokens (--sp-*, --text-*, --w-*) y un único stylesheet sin @import. JS modular sin dependencias para banner de cookies, drawer móvil y reveal animations.

Sistema de partials propio

Build script en Node (build-pages.mjs) con sintaxis <!-- @include nombre clave="valor" -->. Anidación recursiva, indentación heredada y placeholders {{clave}}. Cero deuda framework.

Blog estático desde Markdown

Posts en blog/src/posts/*.md con frontmatter YAML. Generación de páginas, paginación, filtrado por etiquetas, RSS y reescritura del sitemap en cada build.

Minificación con Terser + CSSO

Pipeline npm run minify que comprime styles.css y main.js. Cache-busting por query string (?v=YYYYMMDDx) en cada release.

CI/CD con GitHub Actions

Workflow automático en cada push a main: build:blog → minify → reescritura de paths → upload artifact → deploy a GitHub Pages. Despliegue continuo sin servidor.

GitHub Pages + Cloudflare

Hosting estático servido global, HTTPS automático, CDN edge y headers de seguridad personalizados vía _headers. Coste de infraestructura: cero.

Identidad de marca

El robot, parte de la experiencia

Nuestro robot mascota no es un sticker decorativo. Es la pieza central del hero: una secuencia de frames pre-renderizados que se anima según el progreso de scroll del usuario. Cada movimiento del cursor por la página avanza un frame del robot, creando un efecto cinematográfico sin recurrir a vídeo (que rompería los Core Web Vitals).

  • Canvas + secuencia WebP: cientos de frames precargados de manera progresiva, no bloqueante.
  • Scroll-linked animation: la posición del scroll mapea directamente al frame mostrado.
  • Versión móvil dedicada: secuencia más ligera (frames-mobile/) para no penalizar el LCP en 4G.
  • Skeleton inicial: spinner animado mientras se descargan los primeros frames, cero CLS.
  • Preload selectivo: <link rel="preload" as="image"> con media queries para servir solo el set adecuado al dispositivo.
Robot mascota de Pindia Software animado por scroll en el hero de pindia.es
SEO técnico, local y GEO

Posicionamiento desde el primer día

La web no se publicó con un plugin de SEO instalado a posteriori: cada página se construyó con su <title>, meta description, canonical, OG y Twitter Cards específicos. Sin contenido duplicado, sin noindex accidentales, sin nofollow heredados. Un sitemap.xml regenerado en cada build con todas las URLs estáticas + posts + páginas + tags.

SEO técnico

Schema markup en JSON-LD (WebSite, Organization, BreadcrumbList, Service, FAQPage, CreativeWork), sitemap dinámico, robots.txt, Open Graph, Twitter Cards y canonicals únicos.

SEO local · Cantabria

Schema ProfessionalService con dirección postal, coordenadas geográficas, horario, área servida, NIF y datos de contacto. Optimizado para "agencia diseño web Santander" y términos locales.

GEO + alcance nacional

Geo-coordenadas explícitas, areaServed con Cantabria + España, hreflang/inLanguage en es-ES. Diferenciamos términos locales y nacionales sin canibalizar.

Contenido SEO en blog

Cada post genera HTML estático con OG propio, breadcrumbs, headings con id automáticos, anchor links y tiempo de lectura. RSS y sitemap actualizados al instante.

Métricas e indexación

Google Analytics 4 con consent mode, integración con Search Console, eventos personalizados de scroll y CTAs. Saber qué keywords entran y qué páginas convierten.

Cache + freshness

Headers de cache largos para assets versionados (?v=YYYYMMDDx), lastmod real en cada URL del sitemap, contenido siempre fresco para crawlers sin invalidaciones manuales.

Rendimiento

Core Web Vitals en verde, sin atajos

La web sirve menos de 50 KB de JavaScript total en home y bajo 30 KB en el resto de páginas. Sin frameworks, sin runtime de hidratación, sin código muerto importado por accidente. El render crítico se completa antes de que la mayoría de webs hayan terminado de descargar su bundler.

<1s
LCP medido en 4G
0
CLS (cero saltos de layout)
<50ms
INP en interacciones
100%
Imágenes en WebP + lazy
  • WebP siempre para imágenes raster, con loading="lazy" salvo above-the-fold (fetchpriority="high").
  • Fonts asíncronas: Inter cargada con media="print" onload="this.media='all'" para no bloquear el render.
  • CSS sin @import chain: un único stylesheet minificado, crítico inline cuando aplica.
  • JS no bloqueante: scripts al final del body, sin polyfills innecesarios, listeners pasivos para scroll.
  • Preload selectivo de los primeros frames del robot solo en desktop (media="(min-width: 640px)").
  • Aspect-ratio declarado en imágenes y vídeos para prevenir CLS al reservar espacio.
Accesibilidad

WCAG 2.1 AA de serie

La accesibilidad no es un parche que se aplica al final. Cada componente nace pensado para teclado, lectores de pantalla y usuarios con visión reducida. La auditoría WCAG es parte del producto, no un certificado adicional.

  • Skip-link al contenido principal en cada página.
  • Jerarquía de headings coherente sin saltos (h1 → h2 → h3).
  • Etiquetado ARIA: aria-current, aria-label, aria-labelledby, aria-hidden donde aplica.
  • Foco visible con outline propio en cada elemento interactivo.
  • Contrastes AA verificados en toda la paleta — incluyendo texto secundario.
  • Reduced motion: el robot respeta prefers-reduced-motion.
AA
Nivel WCAG 2.1
100
Lighthouse a11y
0
Errores axe DevTools
100%
Navegable por teclado
Seguridad

Headers que importan, sin teatro

Una web estática también puede filtrar datos si no se configura bien. El archivo _headers aplica una capa de protección a nivel edge sin penalizar la velocidad.

Content Security Policy

CSP estricta limitando orígenes de scripts, estilos y conexiones. Bloqueo de unsafe-inline donde es posible y nonce para scripts críticos.

HSTS + cabeceras clave

Strict-Transport-Security con preload, X-Content-Type-Options, Referrer-Policy, Permissions-Policy y X-Frame-Options.

Cookies con consent mode

Banner propio sin tracking previo al consentimiento. GA4 en consent mode v2, cookies categorizadas y política linkada en cada paso.

Contenido

Blog estático desde Markdown

El blog se gestiona escribiendo archivos .md en una carpeta. No hay panel, no hay base de datos, no hay editor WYSIWYG con vulnerabilidades latentes. Solo Markdown con frontmatter YAML y un script que lo convierte en HTML estático perfectamente indexable.

  • Markdown extendido: imágenes con <figure> + lazy + decoding async automáticos.
  • Frontmatter: título, descripción, fecha, autor, tags, cover, galería, draft.
  • Paginación: 6 posts por página, listado por etiqueta y RSS válido.
  • 5 categorías consistentes — Diseño & Desarrollo, SEO, Negocio, Compliance, General.
  • Tiempo de lectura calculado a 220 palabras/minuto.
  • OG dinámico por post con cover real, no genérico.
---
title: 'Cómo elegir agencia web en Cantabria'
description: 'Criterios reales más allá del precio'
date: 2026-04-09
author: 'Pindia Software'
tags:
  - SEO & Crecimiento
  - Negocio & Estrategia Digital
cover: /assets/img/blog/agencia-web/cover.webp
coverAlt: 'Equipo trabajando en una web'
---

## Lo que de verdad importa

Cuando una empresa busca agencia...
Cómo lo hicimos

Del wireframe al deploy

Cuatro fases iterativas con commits en español, demos reales y cero deuda técnica oculta.

Estrategia

Definición de buyer personas, mapa de keywords (locales + nacionales), arquitectura de la información y objetivos medibles de conversión.

Diseño

Wireframes en baja fidelidad, sistema de tokens (color, tipografía, spacing), componentes reutilizables y prototipo del scroll-driven hero.

Implementación

Build de partials Node, integración del canvas con secuencia de frames, blog Markdown, schemas JSON-LD, sitemap dinámico y minificación.

Lanzamiento

CI con GitHub Actions, deploy a Pages, validación Lighthouse, indexación en Search Console y monitorización continua de Core Web Vitals.

Resultados

Una web que vende mientras duerme

La web cumple lo que vende. Auditorías Lighthouse y PageSpeed Insights al 100, indexación rápida en Google, presencia en búsquedas locales de Santander, Bezana y Cantabria, y tiempos de carga que dejan en evidencia a la mayoría de competidores que dependen de un CMS pesado.

100/100
Lighthouse 4 categorías
<48h
Indexación posts nuevos
0€
Coste de hosting
∞
Posts sin overhead

¿Quieres una web así para tu empresa?

Hagamos tu próximo
caso de éxito.

Presupuesto personalizado en menos de 48 horas. Sin compromiso, sin letra pequeña, sin atajos.

Solicitar presupuesto gratuito Ver más proyectos