Medios HTML

Los mapas de imagen hicieron clicables regiones de una sola imagen. Los medios en la web son más amplios: imágenes fijas, sonido, imágenes en movimiento y a veces páginas anidadas o reproductores alojados. HTML ofrece etiquetas hechas para el propósito para que los navegadores muestren o reproduzcan esos recursos con controles y ganchos de accesibilidad. Esta sesión es tu mapa antes de que Video, Audio, YouTube y Plug-ins profundicen.

Qué significa «medios» aquí

En el lenguaje cotidiano del curso, medios significa contenido que no es solo párrafos y encabezados — fotos, iconos, clips de voz, demos e embeds. Usar el elemento correcto ayuda a los navegadores a exponer UI nativa de reproducción, descargar el tipo de recurso adecuado y dar a la tecnología de asistencia un rol más claro que un <div> misterioso lleno de scripts.

Respuesta directa

• Imágenes → img (y a veces picture para varios archivos)
• Sonido → audio
• Películas y clips → video
• Navegación anidada (mapas, reproductores de otros sitios) → a menudo iframe
  Prefiere el elemento que coincida con la tarea. Da a los usuarios controls en audio y video salvo que tengas un reproductor personalizado fuerte y accesible. Cuando los medios llevan información importante, planifica alternativa de texto, subtítulos o transcripción.

Bloques de construcción de un vistazo

Un muestreador pequeño

Ya conoces img. Así se sientan audio y video a su lado en una primera página de práctica — las rutas son ejemplos; usa archivos que realmente tengas cuando lo pruebes en casa.

Leer el muestreador

• img sigue necesitando src y un alt significativo
• audio y video usan src (o hijos source anidados en lecciones posteriores) y se benefician de controls
• width en video puede reservar espacio de layout mientras carga el archivo
• Archivos vacíos o rutas incorrectas fallan igual que otros assets — revisa carpetas pronto

Los controles son un hábito de principiante

El atributo controls pide al navegador mostrar play, pause y UI relacionada. Autoreproducir sonido sin una acción clara del usuario a menudo se bloquea y suele molestar. Empieza con controles visibles. Los reproductores personalizados llegan después si un proyecto realmente los necesita.

Elegir la herramienta correcta

• Podcast o nota de voz → audio
• Grabación de pantalla o clip → video
• Foto o diagrama → img / picture
• Widget de mapa o página de reproductor de terceros → a menudo iframe (con conciencia de rendimiento y seguridad)
  No fuerces un video dentro de una etiqueta de imagen, ni toda una app externa dentro de un blob de scripts misterioso, cuando existe un elemento nativo.

Accesibilidad y significado

Si los medios enseñan algo, planifica cómo una persona que no puede oírlos o verlos sigue captando la idea: alt para imágenes informativas, subtítulos para video hablado, transcripciones para audio largo. El movimiento decorativo sin información no debe atrapar el foco ni autoreproducirse a todo volumen. Las lecciones especializadas posteriores profundizan; fija el hábito ahora.

Costes de iframe (avance)

iframe incrusta otro contexto de navegación. Eso es potente para mapas y reproductores alojados, y también trae scripts, cookies y peso de layout de otra página a la tuya. Úsalo cuando anidar es el objetivo real — no como valor por defecto para cada archivo de medios que hospedas tú. Los audio / video / img nativos siguen siendo más simples para tus propios archivos.

Cómo encajan las siguientes lecciones

Después de este mapa: Video y Audio enseñan atributos, múltiples fuentes y hábitos prácticos de archivos. Plug-ins y YouTube cubren patrones más antiguos o alojados. Iframe profundiza en la incrustación. Trata esta página como el directorio; aquellas páginas como los talleres.

Practica en tu editor

1. De la tabla, nombra qué elemento elegirías para un archivo de podcast (audio).
2. Añade un img a una página de práctica con alt claro (ya lo sabes).
3. Si tienes un mp3 o mp4 pequeño, añade audio o video con controls.
4. Escribe una línea en tus notas: «subtítulos/transcripciones para contenido hablado.»
5. Ojea los títulos de las siguientes sesiones de medios para que la hoja de ruta resulte familiar.

Errores fáciles

• Autoreproducir sonido sin controls ni un gesto claro del usuario
• Incrustar videos enormes sin pensar el tamaño y sin plan de texto alternativo
• Usar iframe para cada archivo cuando bastaría audio/video/img nativo
• Olvidar que los iframes importan costes de seguridad y rendimiento de otra página
• Tratar este resumen como «suficiente para siempre» y saltarte las lecciones especializadas cuando de verdad publiques medios

Resumen

• Los medios HTML cubren imágenes, audio, video e embeds
• Prefiere el elemento que coincida con la tarea
• Da a los usuarios controles y planifica alternativas cuando los medios llevan significado
• Etiquetas nativas para tus propios archivos; iframe cuando de verdad anidas otra página o un reproductor alojado
• Las siguientes lecciones especializan cada tipo — esta página es el mapa