{
 "id": 82164,
 "slug": "2026-10-18_diseno-web-interactivo",
 "url": "https://agents.willem.com/es/posts/2026-10-18_diseno-web-interactivo/",
 "source_url": "https://willem.com/es/2026-10-18_diseno-web-interactivo/",
 "language": "es",
 "date": "2026-10-18",
 "published": "2026-10-18T00:00:00+02:00",
 "created": "2026-10-19T10:03:04.766000+02:00",
 "updated": "2026-10-20T09:22:37.257000+02:00",
 "title": "Diseño web interactivo",
 "subtitle": "Pero, ¿es divertido?",
 "summary": "Una web no tiene por qué ser un folleto por el que pasas de largo con el dedo. Cada vez hago más webs interactivas, páginas con las que se puede jugar: un globo terráqueo que giras, una obra gráfica que se aparta cuando la tocas, edificios que se construyen solos y personajillos que te contestan. ¡En este artículo te enseño cuatro!",
 "topics": [
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "es",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Interactive Webdesign",
   "url": "https://agents.willem.com/en/posts/2026-10-18_interactive-webdesign/",
   "source_url": "https://willem.com/en/2026-10-18_interactive-webdesign/"
  },
  {
   "language": "nl",
   "title": "Interactief Webdesign",
   "url": "https://agents.willem.com/nl/posts/2026-10-18_interactief-webdesign/",
   "source_url": "https://willem.com/nl/2026-10-18_interactief-webdesign/"
  },
  {
   "language": "de",
   "title": "Interaktives Webdesign",
   "url": "https://agents.willem.com/de/posts/2026-10-18_interaktives-webdesign/",
   "source_url": "https://willem.com/de/2026-10-18_interaktives-webdesign/"
  },
  {
   "language": "fr",
   "title": "Webdesign interactif",
   "url": "https://agents.willem.com/fr/posts/2026-10-18_webdesign-interactif/",
   "source_url": "https://willem.com/fr/2026-10-18_webdesign-interactif/"
  },
  {
   "language": "it",
   "title": "Web design interattivo",
   "url": "https://agents.willem.com/it/posts/2026-10-18_web-design-interattivo/",
   "source_url": "https://willem.com/it/2026-10-18_web-design-interattivo/"
  },
  {
   "language": "pt",
   "title": "Design web interativo",
   "url": "https://agents.willem.com/pt/posts/2026-10-18_design-web-interativo/",
   "source_url": "https://willem.com/pt/2026-10-18_design-web-interativo/"
  },
  {
   "language": "pap",
   "title": "Desèño Web Interaktivo",
   "url": "https://agents.willem.com/pap/posts/2026-10-18_deseno-web-interaktivo/",
   "source_url": "https://willem.com/pap/2026-10-18_deseno-web-interaktivo/"
  },
  {
   "language": "fy",
   "title": "Ynteraktyf webdesign",
   "url": "https://agents.willem.com/fy/posts/2026-10-18_ynteraktyf-webdesign/",
   "source_url": "https://willem.com/fy/2026-10-18_ynteraktyf-webdesign/"
  }
 ],
 "image": "https://willem.com/global/images/fa780e1b5f7e.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/8fd47fd1a37f.webp",
   "description": "gpcardio.org: arrastra el globo y las ponencias más recientes orbitan con él; un toque abre una de ellas",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/043d88dd9515.webp",
   "description": "La obra gráfica, cobrando vida: la salida, los puntos que responden a un dedo o al ratón, las palabras y la carrera",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/5691f6a2e646.webp",
   "description": "Planta a planta, y luego el escaneo: cada planta toma el color de su estado",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/886e5604e762.webp",
   "description": "Toca a un compañero: todos tienen algo que decir",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/67fc011c74e2.webp",
   "description": "Cuatro preguntas, un consejo: quien se pone de baja se tumba",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-5.jpg"
  }
 ],
 "text": "Jugar\nLa gente recuerda lo que ha tocado. Una página que responde al ratón o al dedo te invita a mirar alrededor, a probar algo, a quedarte un poco más. Antes eso era difícil: tecnología 3D compleja, chips lentos en los móviles, una batería que se vacía... ¡complicado! Pero gracias a una optimización extrema y a procesos automatizados con IA ahora puedo poner el listón mucho más alto. ¡¡AHORA SE PUEDE, DE VERDAD QUE SE PUEDE!!\nMira el vídeo de abajo para verlo en acción:\nUn globo para la cardiología\ngpcardio.org es el Global Primary Care Cardio Network: ponencias, actualizaciones de guías y un repaso de la literatura sobre atención cardíaca, renal y metabólica, para médicos de familia. La página de inicio es un globo de puntos con las sociedades conectadas marcadas en sus países. Las ponencias y actualizaciones más recientes giran a su alrededor como tarjetas. Arrastra el globo y el mundo gira, toca una tarjeta y se abre la ponencia, elige una etiqueta y solo quedan los vídeos. ¡PUM, EL MUNDO ENTERO! ¡Eso sí que es dar forma a una ambición verdaderamente global!\nUna obra gráfica que corre\nPara un evento deportivo di vida a la obra gráfica de la diseñadora con shaders 3D y WebGL. Al empezar, los carriles brotan del óvalo, seguidos de confeti. Los puntos de trama responden a tu dedo o al ratón, los carriles se lanzan cuando haces scroll, los deportes corren hacia una meta con un ganador distinto cada vez, y un reloj gigante cuenta atrás hasta el día de la inauguración. El dibujo en vivo coincide con la obra original en el 99,3 % de sus píxeles, pero es _como mínimo_ un 300 % más divertido gracias a la interactividad.\nEdificios que se construyen solos\nPara una consultora de ingeniería de edificios e instalaciones, cuatro torres caen planta a planta. Una línea de escaneo colorea después cada planta según su estado, y la imagen termina en cubiertas verdes: el estado final sostenible. Mueve el ratón y la escena gira contigo. Más abajo, todos los servicios recorren el proceso de construcción en una sola pista horizontal, y tres anillos se deslizan juntos al hacer scroll. ¿Dinamismo en activos _fijos_? ¡NINGÚN PROBLEMA!\nPersonajillos\nPara un servicio de salud laboral le puse cara a la figura de su logotipo. Pasa el ratón por encima de una y se asoma, tócala y salta, baila o se desmaya y se levanta, con algo que decir. Llueven sobre la página mientras haces scroll, y toda una multitud se reparte en un 20, un 60 y un 20 por ciento: absentismo por causa médica, por circunstancias personales y por causas de la organización.\nEl asesor de paquetes hace cuatro preguntas. Con cada respuesta los personajillos cambian: más compañeros, trabajadores temporales, y quien se pone de baja se tumba. El consejo muestra lo que cuesta cada paquete al año, y puedes llevártelo directamente a la inscripción o pedir que te llamen. La enfermedad y el absentismo no tienen gracia, pero un personajillo que se cae es muchísimo más gracioso, y _esa_ misma sonrisa le da un impacto positivo a una propuesta que, por lo demás, es seria.\nRápido mientras se mueve\nLo construyo sobre años de experiencia con tecnología de videojuegos: desde Snake '97 hasta Protect Your Eggs, un juego que hice con mi hijo de siete años, y datos de entrenamiento en 3D. Las escenas 3D se dibujan en un worker aparte de la página, así que la página queda libre para responder. Solo dibujan cuando algo cambia y descansan un segundo después del último toque. Los personajillos son SVG y CSS puros. Detrás de cada escena 3D hay una imagen fija, para el primer pintado, para móviles que no pueden dibujarla y para visitantes que prefieren menos movimiento. Sin framework y sin scripts de terceros: las tres páginas de concepto pesan entre 0,15 y 0,46 MB.\nMedido con Lighthouse, la herramienta que hay detrás de Google PageSpeed Insights, rendimiento en la página de inicio, móvil / portátil:\n| | Rendimiento | Mayor contenido (móvil) |\n|---|---|---|\n| gpcardio.org | 96 / 100 | 2,9 s |\n| El evento deportivo | 99 / 100 | 1,8 s |\n| La consultora de ingeniería | 100 / 100 | 1,4 s |\n| El servicio de salud y seguridad laboral | 99 / 100 | 2,1 s |\n*Lighthouse 13.5, mediana de tres ejecuciones por página, 18 y 19 de octubre de 2026.*\nConclusión\n¿Y además es divertido? Eso me preguntaba una y otra vez un sabio profesor en la universidad. Ahora aplico esa «lección» con muchísimo gusto: el diseño web interactivo es más que un poco de decoración. Va de optimismo y de un impacto duradero que juega con la curiosidad natural. ¿Te apetece pensar también en las posibilidades creativas, en una página que la gente _quiera_ tocar? ¡Escríbeme un mensaje cuando quieras!",
 "word_count": 816,
 "markdown_url": "https://agents.willem.com/es/posts/2026-10-18_diseno-web-interactivo/post.md"
}