Una página multimedia junta, en un mismo documento, al menos dos medios: texto y imagen, o texto y sonido. El bloque A del decreto pide precisamente eso, con criterio de uso y no como adorno. En esta lección los tres medios se producen en local: el texto lo escribes tú, la figura es un SVG dibujado en el código (no una foto descargada) y el audio es un WAV generado por el navegador al pulsar un botón. Nada se pide a un CDN.
La etiqueta figure agrupa la figura y su figcaption. El pie no repite «imagen»: dice qué hay que entender («plano del laboratorio», «esquema del pin»). Si la figura es informativa, el SVG puede llevar un aria-label o un título visible. Una figura puramente decorativa se marca para que la ayuda técnica la ignore; en una página de instituto casi ninguna figura es pura decoración. No uses una imagen para escribir un titular: el titular es texto, así se puede copiar, buscar y ampliar.
<audio controls> muestra los controles nativos. No hace falta un reproductor de una marca. El atributo src apunta a un archivo o, en el laboratorio, a un objeto en memoria (blob:). Formatos: WAV es PCM sin compresión, pesado y fiel, fácil de explicar porque cada muestra es un número. MP3 y OGG Vorbis comprimen y pesan menos; los navegadores no coinciden todos en qué comprimido aceptan. Por eso la práctica exporta WAV: se oye y se puede razonar la cabecera sin un codificador. El elemento admite varios <source> si algún día ofreces dos formatos.
autoplay es mala idea en un aula y en un salón de actos: el sonido empieza sin gesto y compite con quien habla. Los navegadores además lo bloquean a menudo. El pitido de esta lección solo nace cuando pulsas el botón. Ese gesto es el mismo requisito que tendrá la línea de tiempo de la lección 9.
El taller de la Semana de la Ciencia habla de sensores. No hay placa en el HTML, y no vamos a fingir que el navegador enciende un GPIO de verdad. Sí cabe, porque el proyecto es tecnológico, una simulación local: un interruptor ON/OFF en la página que cambia un LED dibujado y el estado de un pin. En una Raspberry Pi, el pin GPIO 18 (numeración BCM) puesto en salida vale HIGH (3,3 V) o LOW (0 V). HIGH enciende el LED si el circuito está bien montado; aquí el «circuito» es el dibujo. En Arduino UNO el paralelo didáctico es digitalWrite sobre un pin digital, a menudo el D13, que lleva un LED en la propia placa: HIGH lo enciende, LOW lo apaga. El sketch real tendría setup (configurar el pin como salida) y loop (leer o escribir). No escribimos ese sketch para grabarlo en una placa: lo nombramos para que el interruptor de la página no sea un botón suelto, sino el estado de una salida.
Un sensor iría al revés: de fuera hacia el programa. Una fotorresistencia en un pin de entrada cambiaría una variable. En la página, el interruptor es la entrada que tú produces con el dedo, y el LED es la salida. Entrada → estado HIGH/LOW → salida visible. Esa cadena es la que el bloque de programación retomará con variables; aquí basta verla al lado del texto y del audio, en la misma página, sin abrir otro módulo ni otro programa.
Primero el texto, que se entiende solo. Después la figura, que aporta lo que el texto tardaría en describir. Después el audio, que aporta lo que ni el texto ni la figura pueden: un aviso o una voz. Si quitas el audio y la página sigue informando, el audio era complemento, no muleta. Si quitas el texto y solo queda un LED parpadeando, no has hecho una página multimedia: has hecho un juguete. El criterio 1.1 pide difundir contenido, no acumular formatos.
En local, los archivos conviven en una carpeta: index.html, figura.svg, aviso.wav. El HTML los referencia con rutas relativas. Un SVG puede ir incluso dentro del HTML, como en el laboratorio, y entonces no hay segundo archivo. Un WAV generado en memoria no viaja con la página salvo que lo descargues. Conviene saber qué está incrustado y qué es un enlace: al copiar la carpeta a otro ordenador, lo incrustado va dentro; lo enlazado, solo si copias también ese archivo.
figure. Agrupa la figura y su pie. No es un div con foto.
figcaption. Pie de la figura: qué hay que entender, no la palabra «imagen».
SVG. Dibujo vectorial en etiquetas. Aquí va incrustado, sin archivo remoto.
audio controls. Reproductor nativo. controls es obligatorio si quieres que se pueda parar.
WAV. PCM sin compresión, con cabecera RIFF. Es lo que genera el laboratorio.
blob. Objeto en memoria del navegador. Sirve de src mientras la pestaña vive.
GPIO 18. Pin de la Raspberry Pi en numeración BCM, usado como salida en la simulación.
HIGH / LOW. Estado digital del pin. HIGH enciende el LED dibujado; LOW lo apaga.
digitalWrite. Función de Arduino que pone un pin digital en HIGH o LOW. No la ejecutamos: la nombramos.
autoplay. Arranque solo del audio. No se usa: estorba en el aula y el navegador suele bloquearlo.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. Se pone un rayo «porque es ciencia».
No conviene. Dejarlo sin pie.
Decisión. Elegir la figura que aporta (onda, pin o plano) y escribir el pie.
Por qué: Un rayo «porque es ciencia» no informa del acto ni del pin: ocupa el hueco de la figura y no se puede explicar en el pie. Multimedia es un medio que aporta algo que el texto no dice igual. Se elige onda, pin o plano, y el pie nombra qué se está viendo.
Situación. Se busca un efecto libre y se pega el enlace.
No conviene. Porque pesa menos.
Decisión. Generar el WAV aquí.
Por qué: Pegar el enlace de un efecto encontrado en la red exige conexión el día del acto y no deja clara la licencia. El seno generado en esta página es tuyo, se guarda como WAV y no depende de que la fonoteca siga en línea. Pesar menos no compensa un archivo que no está en la carpeta.
Situación. Se dice «el pin 1 de internet».
No conviene. Porque algún número hay que poner.
Decisión. Nombrar GPIO 18 (BCM) y el paralelo D13.
Por qué: «El pin 1 de internet» no nombra una numeración. En la Raspberry Pi el mismo número puede ser BCM o físico, y no es el mismo pin. Aquí el ejemplo es el GPIO 18 en BCM, y el paralelo didáctico en Arduino UNO es el D13.
Situación. Se quiere que la sintonía arranque al proyectar.
No conviene. Porque queda profesional.
Decisión. Un botón, o la persona que presenta.
Por qué: El autoplay arranca la sintonía al proyectar, aunque el altavoz siga al volumen de la clase anterior. Quien está en el salón no ha pedido ese sonido. Un botón, o la persona que presenta, deja el inicio en un gesto visible.
Las ocho piezas son el contenido de la Semana de la Ciencia del IES Duero (Aranda de Duero). Se repiten en el bloque A para que compares decisiones, no para que copies el mismo archivo doce veces. Debajo va el documento marcado, listo para abrirlo en local, y la lectura de cada pieza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Semana de la Ciencia · IES Duero</title>
<!-- Capa de esta lectura: lección 04. El texto del acto no cambia; cambia la decisión. -->
</head>
<body>
<header>
<p>IES Duero · Aranda de Duero</p>
<h1>Semana de la Ciencia</h1>
</header>
<nav aria-label="En la página">
<a href="#b1">Apertura en el salón de actos</a>
<a href="#b2">Taller de luz</a>
<a href="#b3">Taller de temperatura</a>
<a href="#b4">Visita al patio meteorológico</a>
<a href="#b5">Datos en la pizarra</a>
<a href="#b6">Preguntas</a>
<a href="#b7">Créditos y licencia de los materiales</a>
<a href="#b8">Cómo llegar</a>
</nav>
<main>
<section id="b1">
<h2>Apertura en el salón de actos</h2>
<p>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.</p>
</section>
<section id="b2">
<h2>Taller de luz</h2>
<p>En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.</p>
</section>
<section id="b3">
<h2>Taller de temperatura</h2>
<p>Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).</p>
</section>
<section id="b4">
<h2>Visita al patio meteorológico</h2>
<p>Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.</p>
</section>
<section id="b5">
<h2>Datos en la pizarra</h2>
<p>Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.</p>
</section>
<section id="b6">
<h2>Preguntas</h2>
<p>Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.</p>
</section>
<section id="b7">
<h2>Créditos y licencia de los materiales</h2>
<p>El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.</p>
</section>
<section id="b8">
<h2>Cómo llegar</h2>
<p>Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.</p>
</section>
</main>
<footer><p>Material del departamento de Tecnología para el acto. Copia local, file://.</p></footer>
</body>
</html>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.
Desde esta lección. En multimedia, este párrafo tiene que entenderse sin la figura y sin el pitido. Si necesita el LED para tener sentido, reescríbelo.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Texto | Solo hay LED | El texto depende del audio | Informa con el sonido quitado | El pie de figura aporta |
| Audio | Enlace externo | Autoplay | WAV generado con gesto | Se explica PCM frente a MP3 |
| Figura | Sin pie | Pie «imagen» | Pie que dice qué ver | SVG local, sin banco de fotos |
| Pin | Botón sin estado | Dice on/off | GPIO 18 y HIGH/LOW | Nombra el paralelo D13 |
| Copia | blob caducado | Se avisa | Se puede regenerar | Se distingue incrustado y enlazado |
Texto que se basta, figura con pie, audio generado con un gesto, y un pin simulado cuyo estado sabes nombrar. Nada de autoplay ni de rutas a un servidor.
Abre cada pregunta, responde en el cuaderno y después mira la solución. El párrafo «Por qué» es la parte que se estudia.
Respuesta. En la simulación, las dos cosas van juntas a propósito. En una placa, HIGH es el estado eléctrico; el LED se enciende solo si el circuito es el correcto.
Por qué: Conviene no confundir la señal con el efecto. Por eso el laboratorio muestra el estado con la palabra HIGH o LOW y, además, el dibujo. Si un día el cable está al revés, el pin puede estar en HIGH y el LED apagado. Aquí no hay cable, y por eso el dibujo obedece siempre.
Respuesta. Porque no hay autoplay y porque el archivo aún no existe hasta que lo generas con el botón.
Por qué: El WAV no suena al abrir la página porque el navegador bloquea la reproducción automática y porque el archivo aún no existe hasta que lo generas. El botón es el gesto que crea la pista y la deja sonar. Sin ese paso no hay audio que reproducir, solo la promesa de uno.
Respuesta. Sí, si está dentro del archivo. Un WAV enlazado, no: hay que copiar también el archivo o volver a generarlo.
Por qué: Incrustar y enlazar no pesan igual ni se pierden igual. La lección 11 volverá sobre esto al empaquetar la carpeta. Ahora basta no prometer que «la página lleva el sonido» si el sonido es un blob de la sesión.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l04-sitio-web-multimedia-offline.html y en el marco (útil si el navegador permite file:// en iframes).
Monta en el laboratorio una página con título, un párrafo que se entienda con el sonido apagado, una de las tres figuras y un WAV. Enciende y apaga el LED y anota en el cuaderno qué significa HIGH en el GPIO 18 y qué sería el mismo gesto en el D13 de un Arduino UNO. Una buena entrega no usa el LED como título.
reto_id: bach1-tic-L04