Infografia para niños sobre balonmano

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

Infografia para niños sobre balonmano

### Propósito / Función Principal

El texto enfatiza que la función no es hacer un "póster bonito", sino lograr el diseño más efectivo para el nivel de quien aprende. Aplicando los criterios de la clase al tema del balonmano, la infografía tendría los siguientes propósitos específicos:  Transmitir una única idea central: Su función es enseñar un concepto muy concreto del deporte usando solo de 3 a 5 datos simples con vocabulario básico. Por ejemplo, en lugar de explicar todas las reglas, se enfocaría solo en cómo se hace un pase o cómo se anota.  Conectar mediante el juego y la narrativa: Su propósito es captar la atención del niño utilizando un tono lúdico y narrativo, haciendo preguntas directas o utilizando personajes-guía (como una mascota del equipo) para explicar la información.  Facilitar el procesamiento visual: Su función gráfica es guiar la lectura del niño de forma secuencial y lineal (de arriba a abajo) usando poco texto. Debe usar ilustraciones figurativas, elementos grandes y colores primarios vibrantes de alto contraste para asegurar el impacto visual sin saturar.  Evitar la distracción (Principio de Coherencia de Mayer): Su objetivo es enseñar sin distraer, eliminando cualquier ilustración irrelevante o decorativa que no esté directamente relacionada con el aprendizaje del balonmano; cada elemento visual debe tener una función didáctica.

### Público Objetivo

Para niños de 8 a 12 años

### Funcionalidades Deseadas

Basado en el documento proporcionado ("Microsoft ASP.NET and AJAX: Architecting Web Applications"), no es posible extraer las funcionalidades deseadas para una infografía sobre balonmano dirigida a niños.

El texto de referencia trata exclusivamente sobre el desarrollo y la arquitectura de aplicaciones web, abordando temas como el uso de AJAX, JavaScript, ASP.NET, y el modelo cliente-servidor, sin hacer ninguna mención a infografías, educación infantil o deportes.

Si tienes el documento correcto sobre diseño de infografías (como el de la sesión anterior), por favor compártelo para poder detallar las funcionalidades exactas según ese texto.

### Diseño y Estilo Visual

De acuerdo con los criterios de diseño infográfico para el nivel de enseñanza Inicial/Primaria aplicados al contenido del texto sobre balonmano, el diseño y estilo visual de la infografía debe seguir estas directrices:  Complejidad visual y contenido: El diseño no debe estar saturado; debe presentar únicamente de 3 a 5 datos simples con vocabulario básico y una sola idea central. En lugar de incluir toda la historia o las medidas exactas de la cancha, el diseño visual debe aislar conceptos clave como el número de jugadores (siete por equipo), el balón o la figura central del portero.  Tipografía: Se deben utilizar fuentes tipo sans-serif redondeadas (por ejemplo, Comic Neue o Quicksand). El tamaño de la letra debe ser grande, con un mínimo de 18 a 24 puntos, y la infografía debe tener pocos niveles jerárquicos de texto para no confundir al niño.  Paleta cromática: El estilo visual debe emplear colores primarios, vibrantes y saturados. Se recomienda un máximo de 4 a 5 colores en todo el diseño para mantener un alto contraste y captar la atención sin sobrecargar la vista.  Iconografía e ilustración: El diseño debe apoyarse en elementos grandes, ilustraciones figurativas y personajes que muestren expresiones faciales. Se debe usar un estilo "cartoon" (dibujos animados) o "flat", por ejemplo, dibujando a un jugador sonriente realizando el característico salto en suspensión o sosteniendo la pelota de cuero con la yema de los dedos.  Estructura visual: La disposición visual de los elementos debe ser lineal, secuencial y de arriba hacia abajo. Es necesario utilizar muy poco texto y apoyarse en numeraciones y pasos claros.  Tono visual e interactividad: El diseño debe integrarse con un tono lúdico y narrativo, utilizando preguntas directas o personajes-guía (como una mascota) que dirijan la mirada del niño por la infografía. Todo elemento visual o ilustración debe cumplir una función didáctica y no ser meramente decorativo.

### Interacción y Comportamiento

De acuerdo con el documento provisto, los siguientes ejemplos y sus características están incluidos en las animaciones CSS detalladas:Tarjeta holográfica: Se aplica un efecto de escala (transform: scale(1.05)) y una sombra brillante (box-shadow: 0 0 20px rgba(0, 255, 255, 0.5)) al usar la propiedad .holographic-card:hover.  Morfo líquido: Al pasar el cursor, el botón reduce el radio de su borde y aplica una rotación (15deg), impulsado por .liquid-morph-element:hover.  Efecto de texto explosivo: Usa los pseudoelementos ::before y ::after para crear un efecto de degradado radial, así como un aumento de escala y rotación al pasar el cursor.  Menú desplegable: La animación hace aparecer un menú oculto utilizando opacity (establecida en 1) y transform: translateY(0) para llevar el menú a su posición.  Tarjeta de doble cara: Emplea transform-style: preserve-3d para mantener la posición 3D de las tarjetas durante la rotación. Además, la propiedad transform: rotateY(180deg) gira las cartas sobre el eje Y.  Imagen de 4 esquinas: La imagen se divide en cuadrantes que se desplazan hacia afuera usando transform: translate() al pasar el cursor.  Cubo giratorio: Usa propiedades como translateZ, rotateX y rotateY para colocar las caras y formar un cubo interactivo en el espacio 3D.  Camaleón SVG: Alterna entre patrones SVG mediante background-image y usa @keyframes move-and-color para animar los cambios de posición y fondo.  Visualización al pasar el cursor sobre la tarjeta de perfil: Usa transform: translateY() para mover las diapositivas verticalmente.  Tarjeta de vidriomorfosis con degradado brillante: Añade un efecto de cristalización a la carta utilizando la propiedad backdrop-filter.  Tarjetas turísticas: Utiliza múltiples transformaciones como rotateX, rotateZ, translateY y translateZ para crear un efecto 3D cuando el cursor pasa sobre ellas.  Tarjetas de la misma altura: Amplía la tarjeta usando transform: scale.  Efecto de desplazamiento de los iconos de redes sociales: Produce un efecto de volteo en el ícono aplicando transform: rotateY para girarlo 360 grados sobre el eje Y.

### Tecnologías y Estructura

A continuación, se resume la información relevante sobre la estructura y las tecnologías:Estructura arquitectónica de AJAX:Una solución o arquitectura AJAX típica está compuesta por dos capas principales que están separadas pero se comunican entre sí: la capa de cliente (presentación) y la capa de servidor (servicios).  La capa de presentación se aloja en el navegador, utiliza JavaScript y HTML, y se comunica vía HTTP con una "fachada HTTP" (HTTP Façade).  La fachada HTTP representa una colección de puntos de enlace (endpoints) públicos que reciben las llamadas del navegador.  La estructura de la fachada HTTP sirve para desacoplar la capa intermedia (middle tier) o lógica de negocios de la capa de presentación AJAX, lo cual es fundamental tanto por cuestiones de diseño como de seguridad.  Tecnologías utilizadas:En el lado del cliente, las tecnologías fundamentales para que AJAX funcione son el lenguaje JavaScript, el objeto XMLHttpRequest y el Modelo de Objetos del Documento (DOM).  Para implementar los puntos de enlace en la fachada HTTP del servidor, se pueden utilizar diversas tecnologías, tales como servicios web ASP.NET (.asmx), servicios WCF, servicios basados en REST, manejadores HTTP (HTTP handlers) y servicios de datos ADO.NET.  En cuanto al formato de transferencia de datos, JSON (JavaScript Object Notation) es el estándar emergente para el intercambio de información entre los navegadores y los servidores web.  JSON se prefiere por encima de XML en escenarios AJAX porque es una alternativa más ligera, menos verbosa y cuenta con un motor de deserialización gratuito incorporado en prácticamente cualquier navegador que soporte JavaScript.

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.