Necesidad
La propuesta reúne profesional, método, cuatro herramientas terapéuticas, datos de consulta y contacto. El contenido técnico necesitaba profundidad sin dominar toda la página.
FisioterapiaCasuso
Una experiencia dinámica que explica valoración, criterio clínico y herramientas terapéuticas sin convertir la técnica en una promesa de resultado.
portfolio.local/demos/fisioterapia-casuso
- Acordeón con ARIA
- Método en tres pasos
- Movimiento editorial
- Contacto móvil fijo
- Sector
- Fisioterapia
- Contribución
- Dirección de arte · Interacción · Front-end
01
El reto comercial
Explicar técnica sin perder de vista el criterio.
Objetivo
Presentar una práctica centrada en valorar antes de intervenir, y permitir explorar cada tratamiento bajo demanda desde cualquier dispositivo.
Respuesta diseñada
Definí la dirección de arte, la arquitectura, el acordeón interactivo, el sistema de movimiento, la navegación responsive y la jerarquía de contacto.
Construido con
HTML5CSS3JavaScriptARIAIntersectionObserverJSON-LD
Validado con
Playwright QA1440 / 390 px
02
Evidencia de interfaz
La solución en pantalla
01
La valoración precede a la técnica
El relato sitúa el razonamiento clínico antes del catálogo de herramientas para mantener una jerarquía profesional y comprensible.
- Método en tres etapas
- Copy sin promesas de resultado
- Técnicas como apoyo
02
Profundidad interactiva en una sola columna
El acordeón abre un tratamiento cada vez, actualiza su estado accesible y reduce la longitud inicial de la página.
- aria-expanded actualizado
- Paneles con hidden
- Estado móvil legible
03
Recorrido comercial
De la valoración inicial a una acción accesible.
- 01
Valorar
La portada introduce criterio y movimiento.
- 02
Comprender
El método explica cómo se estructura la atención.
- 03
Explorar
Cuatro herramientas se abren bajo demanda.
- 04
Reservar
Teléfono y mapa permanecen accesibles.
Capacidades demostradas
Interacción y narrativa trabajan para reducir complejidad.
El acordeón, el movimiento y la jerarquía demuestran diseño de interacción aplicado a contenido clínico denso y a una conversión móvil clara.
Comentar un proyecto04
Construcción verificable
La ingeniería queda disponible, sin frenar el relato.
Solución
Un acordeón exclusivo concentra detalle y mantiene visibles los títulos.
Solución
Ticker, reveals y desplazamiento se coordinan con requestAnimationFrame e IntersectionObserver.
Solución
Una barra fija mantiene la acción principal disponible.
Funciones construidas
Interacciones con una función concreta.
- Menú con aria-expanded
- Ticker continuo
- Método en tres pasos
- Acordeón exclusivo
- Reveals con IntersectionObserver
- Barra móvil de contacto
- Teléfono y Maps
05
Calidad de implementación
Una experiencia técnica, dinámica y controlable.
Responsive
El acordeón, ticker, navegación y barra de contacto se adaptan específicamente a interacción táctil.
Accesibilidad
Skip link, controles con ARIA, paneles hidden y navegación de teclado estructuran la interacción.
Rendimiento
La demo usa HTML, CSS y JavaScript directo; las animaciones se concentran en pocos bucles controlados.
Entregado
- Sistema de navegación responsive
- Método de atención en tres pasos
- Acordeón funcional de cuatro tratamientos
- Contacto telefónico y ubicación
¿Tu oferta también necesita claridad?
Diseñemos una web que ayude a entender, confiar y actuar.
Cuéntame qué vende el negocio, qué contenido existe y dónde se atasca hoy la decisión. Definiremos el alcance antes de presupuestar.
Solicitar presupuesto