Poco a poco se acaban los temas a tratar referentes al código que podemos desarrollar sobre HTML 5, aunque eso no significa que las entradas sobre el tema se acaben.
En esta ocasión toca ya cerrar los elementos, y lo haré con los multimedia. No voy a entrar en muchísima profundidad en cada uno de ellos, ya que algunos darían para documentación muy extensa (sobre todo su actividad externa y el funcionamiento), pero aquí os comento un poco sobre cada uno de ellos.
embed
El elemento embed normalmente se utiliza para integrar elementos multimedia no-HTML, como aplicaciones o elementos interactivos. El bastante sencillo de configurar ya que tiene pocos atributos.
El primero de ellos es el src para indicar la dirección URL del elemento en cuestión, y también el type, que indicará el MIME del elemento, para que el navegador sepa interpretarlo. para acabar, sólo queda indicar el width y height, y así ocupar el espacio que debe.
<embed src="ejemplo.swf" quality="high">
object
El elemento object representa un recurso externo que se podría tratar de forma similar a una imagen, y que puede necesitar un plugin para ser procesado.
El atributo data hace referencia a la dirección URL del contenido a mostrar, el type, al igual que en otros elementos, es el MIME de dicho contenido
A parte del width y height, también se pueden incluir otros atributos como el name, para poder interactuar con el elemento, el usemap si lo queremos relacionar con un mapa, o el form, si está relacionado con un formulario.
param
El elemento param, que depende siempre del object, se utiliza para enviar información de los parámetros que ha de utilizar el plugin en cuestión.
Únicamente tiene dos atributos, que son el name, que sería el nombre de la variable y el value, que sería el valor en sí mismo.
<object data="ejemplo.swf">
<param name="quality" value="high">
</object>
video
Si hay un elemento que está generando mucha controversia es el elemento video. Básicamente todo viene por el uso del estándar de vídeo que debe funcionar en todos los navegadores y que, en este momento, no existe… pero, dejando de eso a un lado, el sistema de funcionamiento del elemento ya está decidido…
El atributo src sería la dirección URL del vídeo, y el poster, la dirección URL de la imagen que aparecería representando al vídeo. Si queremos conseguir algo de información del vídeo, podemos usar el atributo preload que permite 3 posibles valores: «none» si no queremos que se lea nada del vídeo), «metadata», si queremos que lea el primero de los frames y saque cierta información (tamaño del vídeo, duración, etc…) o «auto» si queremos que sea el navegador el que decida qué hacer.
En el caso en que queramos que el vídeo comienza a funcionar de forma automática, podemos añadir el atributo booleano autoplay que hará que se cargue sólo, y de una forma similar, el atributo loop permitirá que el vídeo se reproduzca de forma indefinida.
A parte del width y height, también tenemos el booleano controls, que nos permite decidir si el reproductor ha de mostrar o no los sistemas de control para poder interactuar con los vídeos.
<video src="video.mpg" autoplay controls></video>
audio
El elemento audio es bastante similar al video, con la diferencia de que es un formato más establecido, pero que tiene básicamente los mismos parámetros.
Tendremos los mismo parámetros, que son src para indicar el audio, preload para sacar la información, autoplay para que empiece sólo, loop si queremos que se repita y controls si queremos que se muestren los controles del reproductor.
<audio src="audio.mp3" autoplay loop></audio>
source
Como antes comentaba, puede que los distintos navegadores den soporte a distintos formatos de vídeo y audio… por lo que una sola dirección URL no sería útil. Es por esto que existe el elemento source, con el que este problemilla se soluciona, permitiendo incorporar distintos medios como fuentes de muestra de los vídeos o audios.
Este elemento tiene tres atributos, que son src, que indicará la dirección URL, el type que indicará el MIME y que debería incluir el codecs= que indicarán el sistema de codificación del vídeo. También puede llevar el atributo media, que habitualmente tendrá el valor «all».
<video controls>
<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'">
</video>
map
Otro de los elementos que hace años se utilizaba bastante era el de los map. Gracias a estos se podría hacer una selección de zonas de una imagen, y convertir esas zonas en enlaces, por ejemplo.
El único atributo que soporta es el name, que hace referencia a la imagen por la cual se generará el mapa.
area
Para que un map tenga zonas, se necesitan indicar las area que van a tener. Este elemento siempre irá contenido dentro de un mapa.
Los atributos que soporta son bastantes y variados. El primero de ellos es el href, que indica la dirección a la que se dirigirá al hacer clic en la zona indicada. Al igual que en las imágenes, el alt informará sobre ese enlace.
Para indicar la forma y lugar de la zona tenemos los elementos coords y shape. las coordenadas serán número enteros que indicarán los puntos de la imagen, y la forma puede tener los valores «circle», «default», «poly» o «rect».
Otros atributos habituales, de los que ya he hablado en muchas ocasiones son target, rel, media, hreflang y type.
Un ejemplo sobre esta imagen, podría ser este:
<img src="sample-usemap.png" lt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." width="600" height="150" usemap="#shapes">
<map name="shapes">
<area shape=rect coords="50,50,100,100">
<area shape=rect coords="25,25,125,125" href="rojo.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="verde.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="azul.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="amarillo.html" alt="Yellow star.">
</map>
details
Aunque no se podría llegar a considerar un elemento multimedia en sí, es cierto que el bloque details es muy probable que se utilice junto a elementos multimedia, ya que representa un bloque de contenido que muestra información adicional o controles de otro bloque.
El único atributo que se le permite es el de open que haría que, si está activo, los detalles estén expandidos, ya que, sino, este bloque quedaría oculto por defecto. Otro detalle es que obligatoriamente ha de contener un summary.
summary
Esta es fácil; el summary simplemente es el resumen o título de un details.
<details open>
<summary>Name & Extension:</summary>
<p><input type=text name=fn value="Pillar Magazine.pdf"></p>
<p><label><input type=checkbox name=ext checked>Hide extension</label></p>
</details>
menu
El elemento menu representa un conjunto de comandos… básicamente es un simple contenedor de elementos command. Hay dos atributos posibles. El primero de ellos es el label, que será el atributo que dará nombre al menú.
El segundo de ellos es el type. En este caso tiene tres posibles opciones; si no se indica nada, será un «list» (listado). En caso de incluir el valor «context» se tratará como un menú contextual, y si es el valor «toolbar» se tratará como una barra de herramientas.
command
El elemento command es eso, un comando, una especie de botón que cuando se pulse, el sistema ejecutará alguna acción (como si de una opción de un menú de las ventanas de la mayoría de sistemas operativos se tratase).
Puede tener varios atributos. El primero de ellos es el type, que en este caso incida el tipo de comando. Puede ser un «command» (que ejecuta algo), un «checkbox» (para indicar si está activo o no) o un «radio» (si es una opción de entre varias). Además, cada una de las opciones puede llevar un label que daría la explicación de qué hace.
El atributo icon indicaría la URL del icono que ha de mostrar esa opción. Cada una de ellas puede estar checked y/o disabled según sea necesario. Los «radio» incorporarán un radiogroup que llevará un valor común para varias opciones.
<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="left.png" onclick="setAlign('left')">
<command type="radio" radiogroup="alignment" label="Center" icon="center.png" onclick="setAlign('center')">
<command type="radio" radiogroup="alignment" label="Right" icon="right.png" onclick="setAlign('right')">
<hr>
<command type="command" disabled label="Publish" icon="pub.png" onclick="publish()">
</menu>
Otro ejemplo podría quedar algo así:
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="fnew()">New...</button>
<button type="button" onclick="fopen()">Open...</button>
<button type="button" onclick="fsave()">Save</button>
<button type="button" onclick="fsaveas()">Save as...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="ecopy()">Copy</button>
<button type="button" onclick="ecut()">Cut</button>
<button type="button" onclick="epaste()">Paste</button>
</menu>
</li>
<li>
<menu label="Help">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
</menu>
</li>
</menu>
Deja una respuesta