En una nueva entrega de esta serie dedicada a los lenguajes de marcado para «los de letras» nos dedicaremos a una de las grandes (si no la más grande) ventajas de HTML sobre otras maneras de tratar texto, y es la posibilidad no solo de enlazar distintos documentos y recursos en la red, sino de introducir sonido, imágenes o directamente vídeo dentro de un documento. Si pensabas que los libros súper complejos que solo Adobe Digital Editions puede abrir eran necesarios por motivos académicos, olvídate. Es una estafa, solo existen para que no puedas hacer lo que quieras con ellos. Imagina las posibilidades que tienes a tu disposición para elaborar recursos para el aula, apuntes para ti o para tus alumnos, etc.

Como siempre, todo el trabajo lo harán las etiquetas intercaladas en el texto a las que se pueden agregar algunos atributos para adaptar el resultado a lo necesario. Pero antes de comenzar con el estudio del código es imprescindible dejar clara la manera de trabajar con ficheros externos a la hora de programar un texto en HTML.

Es lógico, si se está acostumbrado a elaborar documentos en programas tradicionales de procesamiento de texto, tener la idea de que el documento es un fichero, uno solo, independientemente del formato que se le haya dado, de las imágenes o colorines que tenga, etc. Esto es porque estos programas elaboran una serie de ficheros y directorios con todo lo necesario para trabajar con ese documento, luego lo comprimen y le cambian el nombre. Es fácil hacer la prueba: graba un documento cualquiera en LibreOffice Writer con el nombre que quieras, por ejemplo prueba.odt. Ahora cambia el nombre a prueba.zip y descomprime este fichero resultante. Verás varios ficheros que contienen texto, instrucciones del formato, imágenes, etc.

En un documento HTML, sin embargo, solo está el texto con las marcas que se van definiendo, que no son sino las etiquetas. Todo lo demás va aparte, en una carpeta dedicada, en el mismo directorio del fichero HTML, en otro lugar del ordenador, en internet… pero aparte. Por comodidad, lo lógico es establecer una carpeta que se llame como el fichero HTML, o adjuntos, imágenes o algo así y centralizar ahí todos los contenidos que se van a insertar en el documento final. Eso sí, cuando se transfiera el fichero, por ejemplo unos apuntes para los alumnos, ha de transferirse todo junto, si no el navegador no encontrará los recursos en su lugar y no podrá mostrarlo.

Recuerda también que, en parte, estamos utilizando HTML por cuestiones de compatibilidad multi-dispositivo. Es posible que los insertos de video no se muestren en un lector de libros electrónicos, por ejemplo, de manera que estos ficheros deberán ser visualizados en un navegador.

Dicho esto, comenzamos:

IMÁGENES

La etiqueta necesaria para insertar una imagen es <img>. Y no necesita cierre. En su atributo se especifica la ruta a la imagen, que puede ser relativa o absoluta. Una ruta absoluta incluye todos los pasos para llegar al recurso especificado, por ejemplo

/home/usuario/documentos/proyectos/apuntes_de_asignatura/imagenes/portada.png

Sea cual sea la ubicación del fichero HTML, siempre que en la ruta anterior haya una imagen, el programa visualizador de HTML la mostrará.

Una ruta relativa, sin embargo, depende de la ubicación actual del fichero HTML. Si la ruta es adjuntos/portada.png funcionará siempre y cuando junto al fichero HTML haya una carpeta adjuntos que contenga la imagen portada.png.

Otro atributo no necesario pero muy útil es alt. Éste muestra un texto cuando se detiene el cursor sobre la imagen. También es el texto que leen los programas de accesibilidad que «explican» una página para ciegos, por ejemplo. Un ejemplo completo es:

<p>Un ejemplo de tipografía uncial puede verse
en la siguiente imagen:</p>

<img src="ejemplos/uncial.png" alt="Ejemplo de tipografía uncial.">

Es muy recomendable que las imágenes que se inserten tengan un tamaño adecuado a la presentación que van a tener, que será en una pantalla. No tiene sentido insertar ficheros de varios MB perfectos para imprimir a gran formato, un tamaño pequeño de 800×600 o incluso menos permiten ver a pantalla completa ficheros de unos pocos kB. Seguiré insistiendo en el espíritu de esta serie de artículos, dedicados al tratamiento de textos para «los de letras» y centrados en la sencillez. Una mayor complejidad permite gran flexibilidad en la maquetación de la imagen. Pero no vamos a entrar en eso, hay multitud de cursos de HTML en la red dedicados a páginas web que usan CSS, JS y otras tecnologías, es sencillo ampliar conocimientos por ese lado.

Por último, un formato más que adecuado es PNG, es libre y utiliza compresión sin pérdidas.

AUDIO

Es tan sencillo, gracias a HTML5, como usar la etiqueta <audio>. Con el mismo argumento src usado para las imágenes se especifica el archivo de audio que debe reproducirse. A continuación se incluye la opción controls para que se muestren los controles que permiten pausar o recomenzar la reproducción. Un ejemplo de uso:

<audio src="adjuntos/grabacion.ogg" controls></audio>

Aquí se inserta un fichero de audio llamado grabacion.ogg que está en una carpeta llamada adjuntos en el mismo directorio que el fichero HTML. No puedo dejar de recomendar los formatos libres, como OGG/Vorbis, antes que los que tienen patentes. OGG está soportado por Firefox, Midori, Chrome y Opera. Si usas otro, prueba antes. MP3, sin embargo, no está soportado por todos los navegadores por cuestiones de patentes.

Otras opciones, además de controls son autoplay y loop, pero yo no las recomiendo en absoluto. La primera hace que el audio se reproduzca automáticamente cuando se carga el archivo en el navegador, lo cual puede ser molesto, y la segunda hace que la reproducción sea un bucle, es decir, que vuelva a comenzar después del final. Si lo anterior es molesto, esto no lo es menos. Pero ahí están, y puede que tengan alguna utilidad en algún momento.

VÍDEO

Es extremadamente sencillo después de haber visto lo anterior, solo hay que sustituir la etiqueta por la correspondiente: <video>:

<video src="adjuntos/clase_en_video.webm" controls></video>

Nuevamente recomiendo formatos libres como WebM, soportado por los mismos navegadores anteriores, tanto en versión móvil como de escritorio. Una buena descripción de los formatos soportados se puede leer aquí. Otra opción es hacer una prueba en directo de las capacidades de un navegador determinado en HTML5 test en los apartados Multimedia.

Y esto es todo por hoy en Bokunoshumi, lugar donde esta entrada aparece primero.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s