.. highlight:: html
.. _html-media:
Empotrados
**********
|HTML|\ 5 dispone de una amplia capacidad para empotrar recursos de muy diverso
tipo, más allá del simple :ref:`elemento en línea \` para incrustar
imágenes. El epígrafe está dedicado a explorar superficialmente cuáles son.
Imágenes
========
|HTML|\ 5 dispone de varios elementos relacionados con la incrustación de
imágenes\ [#]_:
.. table:: Elementos relacionados con las imágenes.
:class: el-html
+-----------+----------------------------------------------------------------+
| |picture| | Define fuentes alternativas para una misma imagen. |
+-----------+----------------------------------------------------------------+
| |source| | Fuenete alternativa para una imagen y criterios para |
| | seleccionarla. |
+-----------+----------------------------------------------------------------+
| |img| | Define una imagen. |
+-----------+----------------------------------------------------------------+
| |svg| | Incluye directamente un |SVG| dentro de documento. |
+-----------+----------------------------------------------------------------+
.. index:: img
.. _html-img2:
**img** (:devmoz:`img`)
Ya se trató este elemento :ref:`páginas atrás `, pero ampliaremos
su definición con algunas incorporaciones que ha sufrido en |HTML|\ 5:
.. table:: Atributos |HTML|\ 5 de
:class: attr-html
+-----------+----------+---------------------------------------------+
| srcset | urls | |URL|\ s a distintas versiones de la imagen |
+-----------+----------+---------------------------------------------+
| sizes | tam | Tamaños que ocupará la imagen |
+-----------+----------+---------------------------------------------+
Los nuevos atributos facilitan el `diseño adaptable
`_. *scrset*
enumera, separadas por comas, las |URL|\s donde se encuentran las imágenes
junto al ancho que tiene cada una. Por ejemplo:
.. code-block:: none
srcset="imagen640.jpg 640w, imagen800.jpg 800w, imagen1500.jpg 1500w"
Este valor del atributo indica que tenemos tres alternativas la primera de
las cuales tiene una anchura de *640px*, la segunda de *800px* y la tercera
de *1500px*\ [#]_.
*sizes*, por su parte, indica cuál debe ser el tamaño con el que se muestre
la imagen. Por ejemplo\ [#]_:
.. code-block:: html
indica que la imagen cubrirá toda el área útil de visualización (o sea, el
100% de *viewport width*). Este, no obstante, es su valor predeterminado,
así que podríamos habérnoslo ahorrado. La gracia de *sizes* es que permite
indicar varios valores con la condición para escoger uno u otro:
.. code-block:: html
La condición se expresa del mismo modo que se escribe la `regla CSS @media
`_.
En el ejemplo, para dispositivos con áreas de menos de 640px de ancho la
imagen ocupará todo el ancho y en caso contrario, el 50%.
.. seealso:: Para aprender sobre unidades de medidas (relativas) puede
echarle un ojo al excelente artículo `Aprende unidades CSS
`_.
.. index:: picture
.. _html-picture:
**picture** (:devmoz:`picture`)
Es un elemento en línea que sirve para incrustar una imagen, pero ofreciendo
|URL| alternativas, a fin de que el navegador puede seleccionar aquella que
sea más adecuada para mostrarse. Puede contener ninguno, uno o más elementos
|source| y un elemento final |img|. La misión de los elementos |source| es
definir |URL| alternativas para la imagen y qué criterio debe seguirse para
su selección, mientras que |img| define el elemento imagen en sí. En
definitiva, |picture| amplía las posibilidades de seleccionar la versión
adecuada de la imagen.
El elemento no define ningún atributo particular.
.. index:: source
.. _html-source:
**source** (:devmoz:`source`)
Define una |URL| como fuente de una imagen en base a una serie de criterios.
.. table:: Atributos de
:class: attr-html
+-----------+----------+---------------------------------------------+
| srcset | urls | Idéntico significado que para |img| |
+-----------+----------+---------------------------------------------+
| sizes | tam | Idéntico significado que para |img| |
+-----------+----------+---------------------------------------------+
| media | regla | Reglas de consulta de medios. |
+-----------+----------+---------------------------------------------+
| type | mime | Tipo |MIME| asociado a la fuente. |
+-----------+----------+---------------------------------------------+
El elemento |source| se define exactamente igual que |img| en lo referente a
*srcset* y *sizes*, pero además pueden añadir el atributo *type* para
especificar qué de qué tipo es el recurso y *media* para especificar
`reglas media
`_.
Por ejemplo::
El navegador escogerá el logo |SVG| en caso de que lo soporte; en caso contrario
usará el |PNG|.
.. seealso:: Éche un vistazo a `este extenso artículo
`_
para profundizar en la materia.
.. index:: svg
.. _svg:
**svg** (`developer.mozilla.org: svg `_)
Las imágenes en formato |SVG| pueden incrustarse en el documento a través del
elemento |img|::
Sin embargo, |HTML|\ 5 permite incluir directamente el elemento |SVG| dentro
del documento como si de un elemento |HTML| se tratara (aunque obviamente no
lo es)::
Prueba
.. rst-class:: ej-html
.. raw:: html
.. note:: Nótese que |svg| no tiene atributo *alt* como |img| por lo que
tendremos que recurrir a los atributos |ARIA| para paliarlo y asegurar la
accesibilidad.
.. seealso:: Si tiene curiosidad, puede `este artículo sobre los
distintos modos de incrustar SVG dentro de un HTML
`_.
.. _html-audio:
.. _html-video:
Audio y video
=============
|HTML|\ 5 permite referenciar directamente en el documento tanto archivos de
audio como archivos de vídeo, de modo que el navegador será capaz de
reproducirlos sin recurrir a tecnologías externas como `Flash
`_, a las que se tenía que
recurrir anteriormente.
.. table:: Elementos relacionados con vídeo y audio
:class: el-html
+-----------+----------------------------------------------------------------+
| |audio| | Incrusta un archivo de sonido en el documento |
+-----------+----------------------------------------------------------------+
| |video| | Incrusta un archivo de vídeo en el documento |
+-----------+----------------------------------------------------------------+
Ambas etiqueta funcionan de un mismo modo, así que podemos darle un tratamiento
conjunto.
.. index:: audio, video
**audio** (:devmoz:`audio`), **video** (:devmoz:`video`)
Empotran audio y vídeo respectivamente en el documento. Su uso básico es bastante
sencillo:
.. code-block:: html
indica que la imagen cubrirá toda el área útil de visualización (o sea, el
100% de *viewport width*). Este, no obstante, es su valor predeterminado,
así que podríamos habérnoslo ahorrado. La gracia de *sizes* es que permite
indicar varios valores con la condición para escoger uno u otro:
.. code-block:: html
Sin embargo, |HTML|\ 5 permite incluir directamente el elemento |SVG| dentro
del documento como si de un elemento |HTML| se tratara (aunque obviamente no
lo es)::