|
@@ -4,25 +4,26 @@
|
|
Contenido incrustado
|
|
Contenido incrustado
|
|
====================
|
|
====================
|
|
|
|
|
|
-El contenido incrustado importa otro recurso o inserta el contenido de otro
|
|
|
|
-lenguaje de marcado o espacio de nombres en el documento.
|
|
|
|
|
|
+Se trata de importar otro recurso o inserta el contenido de otro
|
|
|
|
+lenguaje de marcado o elementos en un documento HTML.
|
|
|
|
|
|
El elemento ``picture``
|
|
El elemento ``picture``
|
|
=======================
|
|
=======================
|
|
|
|
|
|
-Es un contenedor que proporciona múltiples fuentes a su elemento ``<img>``
|
|
|
|
-contenido para permitir a los autores declarativamente controlar o dar
|
|
|
|
-sugerencias al agente de usuario sobre qué recurso de imagen utilizar, basado
|
|
|
|
-en la densidad de píxeles de la pantalla, tamaño de la ventana de vista,
|
|
|
|
-formato de imagen y otros factores, esto representa a sus hijos.
|
|
|
|
|
|
+Es un contenedor que proporciona múltiples formatos al elemento ``<img>``,
|
|
|
|
+contenido que permite a los autores controlar o dar sugerencias al
|
|
|
|
+navegador web sobre qué recurso de imagen utilizar, basado
|
|
|
|
+en la densidad de píxeles de la pantalla, el tamaño de la ventana de la vista,
|
|
|
|
+formato de la imagen y otros factores que representan las características
|
|
|
|
+de una imagen.
|
|
|
|
|
|
El elemento ``<picture>`` es algo diferente de los elementos ``<video>``
|
|
El elemento ``<picture>`` es algo diferente de los elementos ``<video>``
|
|
-y ``<audio>``. Si bien todos ellos contienen elementos de origen, el atributo
|
|
|
|
-``src`` del elemento de origen no tiene significado cuando el elemento está anidado dentro
|
|
|
|
-de un elemento ``<picture>`` y el algoritmo de selección de recursos es
|
|
|
|
|
|
+y ``<audio>``. Todos ellos contienen elementos de origen, el atributo
|
|
|
|
+``src`` del elemento origen no tiene significado cuando el elemento está
|
|
|
|
+anidado dentro de un elemento ``<picture>`` y el algoritmo de selección de recursos es
|
|
diferente. Además, el elemento ``<picture>`` en sí no muestra nada;
|
|
diferente. Además, el elemento ``<picture>`` en sí no muestra nada;
|
|
-Simplemente proporciona un contexto para su contenido ``<img>`` elemento que le
|
|
|
|
-permite elegir entre múltiples **URL**.
|
|
|
|
|
|
+Simplemente proporciona un contexto para el contenido del elemento ``<img>`` que le
|
|
|
|
+permite elegir entre múltiples URL.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
@@ -39,7 +40,7 @@ Los requisitos de creación de esta sección sólo se aplican si el elemento
|
|
``<source>`` tiene un elemento primario que es un elemento ``<picture>``.
|
|
``<source>`` tiene un elemento primario que es un elemento ``<picture>``.
|
|
|
|
|
|
El elemento ``<source>`` permite a los autores especificar múltiples conjuntos
|
|
El elemento ``<source>`` permite a los autores especificar múltiples conjuntos
|
|
-de fuentes alternativos para los elementos ``<img>``, no representa nada por sí solo.
|
|
|
|
|
|
+de fuentes alternativos para los elementos ``<img>``, por sí solo no representa nada.
|
|
|
|
|
|
El elemento ``img``
|
|
El elemento ``img``
|
|
===================
|
|
===================
|
|
@@ -48,8 +49,8 @@ Representa una imagen en el documento.
|
|
|
|
|
|
Los navegadores no siempre muestran la imagen a la que el elemento hace referencia.
|
|
Los navegadores no siempre muestran la imagen a la que el elemento hace referencia.
|
|
Es el caso de los navegadores no gráficos (incluyendo aquellos usados por personas
|
|
Es el caso de los navegadores no gráficos (incluyendo aquellos usados por personas
|
|
-con problemas de visión), sí el usuario elige no mostrar la imagen, o sí el
|
|
|
|
-navegador es incapaz de mostrarla porque no es válida o soportada.
|
|
|
|
|
|
+con problemas de visión), si el usuario elige no mostrar la imagen, o si el
|
|
|
|
+navegador es incapaz de mostrarla porque no es válida o no es soportada.
|
|
En ese caso, el navegador la reemplazará con el texto definido en el atributo ``alt``.
|
|
En ese caso, el navegador la reemplazará con el texto definido en el atributo ``alt``.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
@@ -58,9 +59,9 @@ En ese caso, el navegador la reemplazará con el texto definido en el atributo `
|
|
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
|
|
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
|
|
</a>
|
|
</a>
|
|
|
|
|
|
-En cierta situaciones se recomienda implementar la información de la imagen dentro
|
|
|
|
-del atributo ``alt`` , para segurarse que el usuario puede leer la información
|
|
|
|
-en caso de que la imagen no sea cargada.
|
|
|
|
|
|
+En ciertas situaciones se recomienda implementar la información de la imagen dentro
|
|
|
|
+del atributo ``alt`` , para asegurarse de que el usuario puede leer la información
|
|
|
|
+en caso de que la imagen no sea cargada por el navegador.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
@@ -68,16 +69,16 @@ en caso de que la imagen no sea cargada.
|
|
alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%,
|
|
alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%,
|
|
Chrome 25%, Safari 6% and Opera 4%.">
|
|
Chrome 25%, Safari 6% and Opera 4%.">
|
|
|
|
|
|
-Si la imagen que se va a mostrar es un banner del sitio web es posible dejar vacio
|
|
|
|
|
|
+Si la imagen que se va a mostrar es un *banner* del sitio web es posible dejar vacio
|
|
el atributo ``alt``
|
|
el atributo ``alt``
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<header>
|
|
<header>
|
|
- <div><img src="border.gif" alt="" width="400" height="30"></div>
|
|
|
|
- <h1>Clara’s Blog</h1>
|
|
|
|
|
|
+ <div><img src="banner.gif" alt="" width="400" height="30"></div>
|
|
|
|
+ <h1>El Blog de Clara</h1>
|
|
</header>
|
|
</header>
|
|
- <p>Welcome to my blog...</p>
|
|
|
|
|
|
+ <p>Bienvenido a mi Blog...</p>
|
|
|
|
|
|
El elemento ``<img>`` se puede utilizar con los siguientes atributos:
|
|
El elemento ``<img>`` se puede utilizar con los siguientes atributos:
|
|
|
|
|
|
@@ -86,28 +87,62 @@ El elemento ``<img>`` se puede utilizar con los siguientes atributos:
|
|
|
|
|
|
- ``height``. La altura de la imagen en píxeles.
|
|
- ``height``. La altura de la imagen en píxeles.
|
|
|
|
|
|
-- ``width``. El ancho de la imagen en **píxeles**
|
|
|
|
|
|
+- ``width``. El ancho de la imagen en píxeles
|
|
|
|
|
|
-- ``ismap``. Este atributo boleano indica que la imagen es parte del mapa del lado del servidor.
|
|
|
|
- Así que, se envían las coordenadas precisas de un clic.
|
|
|
|
|
|
+- ``ismap``. Este atributo booleano indica que la imagen es parte de un mapa bit de imagenes
|
|
|
|
+ del lado del servidor. Al pulsar sobre la imagen se envían los datos
|
|
|
|
+ al servidor como una cadena (*Query string*) de tipo URL a la base de datos del servidor.
|
|
Este atributo está permitido solo si el elemento ``<img>`` es descendiente de
|
|
Este atributo está permitido solo si el elemento ``<img>`` es descendiente de
|
|
un elemento ``<a>`` con un atributo ``href`` válido.
|
|
un elemento ``<a>`` con un atributo ``href`` válido.
|
|
|
|
|
|
-- ``sizes``. Una lista de una o más cadenas separadas por comas indicando el tamaño de la fuente. Cada tamaño de la fuente consiste en:
|
|
|
|
- 1. Codición de medios, debe omitirse en el último **ítem**.
|
|
|
|
- 2. Valor del tamaño.
|
|
|
|
|
|
+ .. code-block:: html
|
|
|
|
+
|
|
|
|
+ <a href="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png">
|
|
|
|
+ <img src="HTML5_Logo_512.png" alt="HTML5_Logo" width="512" height="500" ismap>
|
|
|
|
+ </a>
|
|
|
|
+
|
|
|
|
+- ``sizes``. Se trata de una lista de una o más cadenas de caracteres separadas por comas
|
|
|
|
+ indicando el tamaño de la fuente.
|
|
|
|
|
|
|
|
+ .. code-block:: html
|
|
|
|
+
|
|
|
|
+ <h1>
|
|
|
|
+ <img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
|
|
|
|
+ ssrc="wolf-400.jpg" alt="El lobo blanco">
|
|
|
|
+ </h1>
|
|
|
|
+
|
|
- ``srcset``. Una lista de una o más cadenas separadas por comas indicando las posibles fuentes para usar.
|
|
- ``srcset``. Una lista de una o más cadenas separadas por comas indicando las posibles fuentes para usar.
|
|
|
|
|
|
-- ``usemap``. La URL parcial **(empezando con '#')** de un mapa de imagen
|
|
|
|
|
|
+ .. code-block:: html
|
|
|
|
+
|
|
|
|
+ <h1>
|
|
|
|
+ <picture>
|
|
|
|
+ <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
|
|
|
|
+ <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="Desayuno combinado">
|
|
|
|
+ </picture>
|
|
|
|
+ </h1>
|
|
|
|
+
|
|
|
|
+- ``usemap``. La URL parcial (**empezando con '#'**) de un mapa de imagen
|
|
asociado a un elemento. No puedes usar este atributo si el elemento
|
|
asociado a un elemento. No puedes usar este atributo si el elemento
|
|
``<img>`` es descendiente de un elemento ``<a>`` o ``<button>``.
|
|
``<img>`` es descendiente de un elemento ``<a>`` o ``<button>``.
|
|
|
|
|
|
|
|
+ .. code-block:: html
|
|
|
|
+
|
|
|
|
+ <p>Imagen que se muestra el mapa de Katoomba</p>
|
|
|
|
+ <p><img src="https://www.w3.org/TR/html5/images/imagemap.png" width="209" alt="Mapa de Katoomba" height="249" usemap="#Map">
|
|
|
|
+
|
|
|
|
+ <map name="Map">
|
|
|
|
+ <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130"
|
|
|
|
+ href="north.html" alt="Casas del Norte de Katoomba">
|
|
|
|
+ <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61"
|
|
|
|
+ alt="Casas del Sur de Katoomba" href="south.html">
|
|
|
|
+ </map>
|
|
|
|
+
|
|
Formatos de imagen soportados
|
|
Formatos de imagen soportados
|
|
-----------------------------
|
|
-----------------------------
|
|
|
|
|
|
- JPEG
|
|
- JPEG
|
|
-- GIF, including animated GIFs
|
|
|
|
|
|
+- GIF, incluyendo animaciones GIFs
|
|
- PNG
|
|
- PNG
|
|
- APNG
|
|
- APNG
|
|
- SVG
|
|
- SVG
|
|
@@ -118,54 +153,54 @@ Formatos de imagen soportados
|
|
El elemento ``iframe``
|
|
El elemento ``iframe``
|
|
======================
|
|
======================
|
|
|
|
|
|
-Elemento HTML *inline* ``<iframe>`` representa un contexto de navegación
|
|
|
|
-anidada, permite incorporar **otra página HTML** en la **página actual**.
|
|
|
|
-Cada contexto de navegación tiene su propia historia, sesión y documento activo.
|
|
|
|
-El contexto de navegación que incluye el contenido implícito se llama contexto
|
|
|
|
-de navegación principal. El contexto de navegación de nivel superior que no tiene padre
|
|
|
|
-es típicamente la ventana del navegador.
|
|
|
|
-
|
|
|
|
-Desde el elemento iframe de DOM, los scripts pueden obtener acceso al objeto de
|
|
|
|
-**window** de la página HTML incluida a través de la propiedad **contentWindow**.
|
|
|
|
-La propiedad **contentDocument** se refiere al elemento de documento dentro del
|
|
|
|
-``iframe`` (esto es equivalente a **contentWindow.document**), pero no es
|
|
|
|
-compatible con las versiones de **Internet Explorer** antes de **IE8**.
|
|
|
|
-
|
|
|
|
-Los scripts que intentan acceder al contenido de un ``frame`` están sujetos a
|
|
|
|
-la misma política de origen y no pueden acceder a la mayoría de las propiedades
|
|
|
|
-del otro objeto de ventana si se cargó desde un dominio diferente. Esto también
|
|
|
|
-se aplica a un script dentro de un marco tratando de acceder a su ventana
|
|
|
|
|
|
+Elemento HTML ``<iframe>`` representa un contexto de navegación
|
|
|
|
+anidado, que permite incorporar otra página HTML en la página actual.
|
|
|
|
+Cada contexto de navegación tiene su propio historial, sesión y documento activo.
|
|
|
|
+
|
|
|
|
+El contexto de navegación que incluye el contenido implícito se llama **contexto
|
|
|
|
+de navegación principal**. El contexto de navegación de nivel superior que no tiene padre
|
|
|
|
+es la ventana del navegador.
|
|
|
|
+
|
|
|
|
+Desde el elemento ``<iframe>`` del DOM, los scripts pueden obtener acceso al objeto
|
|
|
|
+**window** de la página HTML incluida a través de la propiedad ``contentWindow``.
|
|
|
|
+La propiedad ``contentDocument`` se refiere al elemento del documento dentro del
|
|
|
|
+``<iframe>`` (esto es equivalente a ``contentWindow.document``).
|
|
|
|
+
|
|
|
|
+Los scripts que intentan acceder al contenido de un ``<iframe>`` están sujetos a
|
|
|
|
+la misma reglas de origen del primer ``<iframe>`` y no pueden acceder a la mayoría de las propiedades
|
|
|
|
+del otro objeto ``Window`` si se cargó desde un dominio diferente. Esto también
|
|
|
|
+se aplica a un script dentro de un ``<iframe>`` tratando de acceder a su ventana
|
|
principal.
|
|
principal.
|
|
|
|
|
|
-La comunicación entre dominios se puede lograr con **window**.postMessage.
|
|
|
|
|
|
+La comunicación entre dominios se puede lograr con ``Window.postMessage``.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
- <script type="text/javascript">
|
|
|
|
- var iframe = window.getElementsByTagName( "iframe" )[ 0 ];
|
|
|
|
- alert( "Frame title: " + iframe.contentWindow.title );
|
|
|
|
|
|
+ <script>
|
|
|
|
+ var iframe = window.getElementsByTagName("iframe")[0];
|
|
|
|
+ alert( "Titulo Frame :" + iframe.contentWindow.title);
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
|
|
- <iframe src="page.html" width="300" height="300">
|
|
|
|
- <p>Your browser does not support iframes.</p>
|
|
|
|
|
|
+ <iframe src="pagina.html" width="300" height="300">
|
|
|
|
+ <p>Tu navegador no soporta iframe.</p>
|
|
</iframe>
|
|
</iframe>
|
|
|
|
|
|
-Como elementos ``<frame>``, dentro del objeto **window**.frames se comportan como una
|
|
|
|
|
|
+Como elementos del ``<iframe>``, dentro del objeto ``Window.frames`` se comportan como una
|
|
pseudo-array.
|
|
pseudo-array.
|
|
|
|
|
|
El elemento ``<iframe>`` puede usarse con los siguientes atributos:
|
|
El elemento ``<iframe>`` puede usarse con los siguientes atributos:
|
|
|
|
|
|
-- ``height``. Indica la altura del ``frame``
|
|
|
|
|
|
+- ``height``. Indica la altura del ``<iframe>``
|
|
|
|
|
|
-- ``width``. Indica el ancho del ``frame``
|
|
|
|
|
|
+- ``width``. Indica el ancho del ``<iframe>``
|
|
|
|
|
|
- ``src``. Indica la dirección de una página que debe contener el contexto de navegación anidada.
|
|
- ``src``. Indica la dirección de una página que debe contener el contexto de navegación anidada.
|
|
|
|
|
|
- ``srcdoc``. Indica el contenido de la página que debe contener el contexto
|
|
- ``srcdoc``. Indica el contenido de la página que debe contener el contexto
|
|
- de navegación anidada. El valor del atributo es el origen de un **document** ``iframe srcdoc``.
|
|
|
|
- Si está presente, debe tener un valor utilizando la sintaxis ``HTML`` que consiste
|
|
|
|
- en los siguientes componentes sintácticos, en el orden dado:
|
|
|
|
|
|
+ de navegación anidada. El valor del atributo es el origen de un documento ``iframe srcdoc``.
|
|
|
|
+ Si está presente, debe tener un valor utilizando la sintaxis HTML que consiste
|
|
|
|
+ en los siguientes componentes sintácticos.
|
|
|
|
|
|
El siguiente ejemplo utiliza el atributo ``srcdoc`` junto con los atributos de ``sandbox``
|
|
El siguiente ejemplo utiliza el atributo ``srcdoc`` junto con los atributos de ``sandbox``
|
|
que se describen a continuación para proporcionar a los usuarios que admiten esta
|
|
que se describen a continuación para proporcionar a los usuarios que admiten esta
|
|
@@ -195,33 +230,33 @@ El elemento ``<iframe>`` puede usarse con los siguientes atributos:
|
|
<p>debes de avisarme en la proxima revisión."></iframe>
|
|
<p>debes de avisarme en la proxima revisión."></iframe>
|
|
</article>
|
|
</article>
|
|
|
|
|
|
-- ``name``. Un nombre para el contexto de exploración incrustado (marco o *frame*). Esto se puede
|
|
|
|
|
|
+- ``name``. Un nombre para el contexto de exploración incrustado ``<iframe>``. Esto se puede
|
|
usar como el valor del atributo de destino de un elemento ``<a>`` o ``<form>``, o el
|
|
usar como el valor del atributo de destino de un elemento ``<a>`` o ``<form>``, o el
|
|
- atributo **formtarget** de un elemento ``<input>`` o ``<button>``.
|
|
|
|
|
|
+ atributo ``formtarget`` de un elemento ``<input>`` o ``<button>``.
|
|
|
|
|
|
- ``sandbox``. Si se especifica como una cadena vacía, este atributo permite restricciones
|
|
- ``sandbox``. Si se especifica como una cadena vacía, este atributo permite restricciones
|
|
- adicionales en el contenido que puede aparecer en el marco en línea.
|
|
|
|
- El valor del atributo puede ser una lista separada por espacios de fichas que
|
|
|
|
- levantan determinadas restricciones.
|
|
|
|
|
|
+ adicionales en el contenido, que pueden aparecer en el ``<iframe>`` al que se envía los datos.
|
|
|
|
+ El valor del atributo puede ser una lista separada por espacios de palabras clave que
|
|
|
|
+ determinan las restricciones que se van a usar.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<iframe title="Maps" sandbox="allow-same-origin allow-forms allow-scripts"
|
|
<iframe title="Maps" sandbox="allow-same-origin allow-forms allow-scripts"
|
|
src="https://maps.example.com/embedded.html"></iframe>
|
|
src="https://maps.example.com/embedded.html"></iframe>
|
|
|
|
|
|
- En este ejemplo, se incrusta un **gadget** de otro sitio. El gadget tiene scripts y
|
|
|
|
- formularios habilitados, y se levantan las restricciones de sandbox de origen,
|
|
|
|
- permitiendo que el gadget se comunique con su servidor de origen. Sin embargo,
|
|
|
|
|
|
+ En este ejemplo, se incrusta un gadget de otro sitio web. El gadget tiene scripts y
|
|
|
|
+ formularios habilitados, y se levantan las restricciones del sandbox de origen,
|
|
|
|
+ permite que el gadget se comunique con su servidor de origen. Sin embargo,
|
|
el atributo ``sandbox`` sigue siendo útil, ya que deshabilita los complementos
|
|
el atributo ``sandbox`` sigue siendo útil, ya que deshabilita los complementos
|
|
- y ventanas emergentes, reduciendo así el riesgo de que el usuario esté expuesto
|
|
|
|
- a programas maliciosos y otras molestias.
|
|
|
|
|
|
+ y ventanas emergentes, reduciendo así el riesgo de estar expuesto
|
|
|
|
+ a programas maliciosos.
|
|
|
|
|
|
- Los **tokens** válidos son:
|
|
|
|
|
|
+ Las palabras clave válidas son:
|
|
|
|
|
|
- ``allow-forms`` Permite que el contexto de exploración incrustado envíe formularios.
|
|
- ``allow-forms`` Permite que el contexto de exploración incrustado envíe formularios.
|
|
Si no se utiliza esta palabra clave, esta operación no está permitida.
|
|
Si no se utiliza esta palabra clave, esta operación no está permitida.
|
|
|
|
|
|
- - ``allow-same-origin``. Permite que el contenido sea tratado como siendo de su origen normal.
|
|
|
|
|
|
+ - ``allow-same-origin``. Permite que el contenido sea tratado como si procediera de su origen.
|
|
Si no se utiliza esta palabra clave, se considera que el contenido incrustado es de origen único.
|
|
Si no se utiliza esta palabra clave, se considera que el contenido incrustado es de origen único.
|
|
|
|
|
|
- ``allow-top-navigation``. Permite que el contexto de exploración incrustado navegue
|
|
- ``allow-top-navigation``. Permite que el contexto de exploración incrustado navegue
|
|
@@ -232,9 +267,9 @@ El elemento ``<iframe>`` puede usarse con los siguientes atributos:
|
|
ejecute secuencias de comandos (pero no cree ventanas emergentes). Si no se
|
|
ejecute secuencias de comandos (pero no cree ventanas emergentes). Si no se
|
|
utiliza esta palabra clave, esta operación no está permitida.
|
|
utiliza esta palabra clave, esta operación no está permitida.
|
|
|
|
|
|
- - ``allowfullscreen``: Atributo booleano. Cuando se especifica, indica que los objetos **document**
|
|
|
|
- en el contexto de exploración del elemento ``<iframe>`` deben poder utilizar
|
|
|
|
- **requestFullscreen()** (si no está bloqueado por otras razones, por ejemplo,
|
|
|
|
|
|
+ - ``allowfullscreen``: Atributo booleano. Cuando se especifica, indica que los objetos ``document``
|
|
|
|
+ en el contexto de exploración del elemento ``<iframe>`` deben poderse utilizar
|
|
|
|
+ ``requestFullscreen()`` (si no está bloqueado por otras razones, por ejemplo,
|
|
existe otro ``<iframe>`` ancestral sin este atributo).
|
|
existe otro ``<iframe>`` ancestral sin este atributo).
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
@@ -245,28 +280,28 @@ El elemento ``<iframe>`` puede usarse con los siguientes atributos:
|
|
<p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Mensaje privado</a></p>
|
|
<p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Mensaje privado</a></p>
|
|
</header>
|
|
</header>
|
|
<main>
|
|
<main>
|
|
- <p>Mira mi nuevo paseo!</p>
|
|
|
|
|
|
+ <p>Mira mi nuevo troncomovil!</p>
|
|
<iframe title="Video" src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
|
|
<iframe title="Video" src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
|
|
</main>
|
|
</main>
|
|
</article>
|
|
</article>
|
|
|
|
|
|
- En el ejemplo anterior, un ``<iframe>`` se utiliza para incrustar un video desde un sitio web de vídeos.
|
|
|
|
|
|
+ En el ejemplo anterior, un ``<iframe>`` se utiliza para incrustar un vídeo desde un sitio web de vídeos.
|
|
El atributo ``allowfullscreen`` es necesario para permitir que el reproductor
|
|
El atributo ``allowfullscreen`` es necesario para permitir que el reproductor
|
|
muestre su pantalla completa de vídeo.
|
|
muestre su pantalla completa de vídeo.
|
|
|
|
|
|
El elemento ``embed``
|
|
El elemento ``embed``
|
|
=====================
|
|
=====================
|
|
|
|
|
|
-Proporciona un punto de integración para una aplicación externa (normalmente no HTML)
|
|
|
|
-o un contenido interactivo, **pluging**.
|
|
|
|
|
|
+Proporciona un punto de integración para una aplicación externa (**normalmente no HTML**)
|
|
|
|
+o un contenido interactivo, un *pluging*, etc..
|
|
|
|
|
|
Puede usarse con los siguientes atributos:
|
|
Puede usarse con los siguientes atributos:
|
|
|
|
|
|
- ``src``. Indica la dirección del recurso que se está incrustando.
|
|
- ``src``. Indica la dirección del recurso que se está incrustando.
|
|
|
|
|
|
-- ``width``. La anchura del elemento.
|
|
|
|
|
|
+- ``width``. La anchura del elemento en píxeles.
|
|
|
|
|
|
-- ``height``. La altura del elemento.
|
|
|
|
|
|
+- ``height``. La altura del elemento en píxeles.
|
|
|
|
|
|
- ``type``. Si está presente, indica el tipo MIME por el cual se selecciona
|
|
- ``type``. Si está presente, indica el tipo MIME por el cual se selecciona
|
|
el complemento para instanciar. El valor debe ser un tipo MIME válido.
|
|
el complemento para instanciar. El valor debe ser un tipo MIME válido.
|
|
@@ -288,12 +323,12 @@ Puede utilizarse con los siguientes atributos:
|
|
|
|
|
|
- ``data``. Especifica la dirección del recurso.
|
|
- ``data``. Especifica la dirección del recurso.
|
|
|
|
|
|
-- ``type``. Si está presente, especifica el tipo del recurso. Si está presente, el atributo
|
|
|
|
|
|
+- ``type``. Si está presente, especifica el tipo del recurso, el atributo
|
|
debe ser un tipo **MIME** válido.
|
|
debe ser un tipo **MIME** válido.
|
|
|
|
|
|
-- ``form``. El elemento de formulario, si existe, al que está asociado el elemento de objeto
|
|
|
|
- (su propietario de formulario). El valor del atributo debe ser un ID de un
|
|
|
|
- elemento ``<form>`` en el mismo documento.
|
|
|
|
|
|
+- ``form``. Elemento de formulario, si existe, estará asociado al elemento ``<objeto>``
|
|
|
|
+ (propietario del formulario). El valor del atributo debe ser un ``id`` de un
|
|
|
|
+ elemento ``<form>`` del mismo documento.
|
|
|
|
|
|
- ``height``. La altura del recurso visualizado, en píxeles.
|
|
- ``height``. La altura del recurso visualizado, en píxeles.
|
|
|
|
|
|
@@ -305,10 +340,10 @@ Puede utilizarse con los siguientes atributos:
|
|
menos uno de los datos y del tipo.
|
|
menos uno de los datos y del tipo.
|
|
|
|
|
|
- ``typemustmatch``. Este atributo **booleano** indica si el tipo y el recurso de tipo de contenido
|
|
- ``typemustmatch``. Este atributo **booleano** indica si el tipo y el recurso de tipo de contenido
|
|
- real deben coincidir en orden de éste que se va a utilizar.
|
|
|
|
|
|
+ real deben coincidir en el orden de éste cuando se vaya a utilizar.
|
|
|
|
|
|
-- ``usemap``. Una referencia al nombre de **hash** de un elemento ``<map>``;
|
|
|
|
- Esto es **#** seguido por el valor de un nombre de un elemento de mapa.
|
|
|
|
|
|
+- ``usemap``. Una referencia al nombre **hash** de un elemento ``<map>``;
|
|
|
|
+ Esto es **#** seguido por el valor de un nombre de un elemento ``<map>``.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
@@ -323,33 +358,34 @@ Puede utilizarse con los siguientes atributos:
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
- <p>Mira mi video:
|
|
|
|
|
|
+ <p>Mira mi vídeo:
|
|
<object type="application/x-shockwave-flash">
|
|
<object type="application/x-shockwave-flash">
|
|
<param name=movie value="https://video.example.com/library/watch.swf">
|
|
<param name=movie value="https://video.example.com/library/watch.swf">
|
|
<param name=allowfullscreen value=true>
|
|
<param name=allowfullscreen value=true>
|
|
<param name=flashvars value="https://video.example.com/vids/315981">
|
|
<param name=flashvars value="https://video.example.com/vids/315981">
|
|
<video controls src="https://video.example.com/vids/315981">
|
|
<video controls src="https://video.example.com/vids/315981">
|
|
- <a href="https://video.example.com/vids/315981">Ver video</a>.
|
|
|
|
|
|
+ <a href="https://video.example.com/vids/315981">Ver vídeo</a>.
|
|
</video>
|
|
</video>
|
|
</object>
|
|
</object>
|
|
</p>
|
|
</p>
|
|
|
|
|
|
-El siguiente ejemplo muestra cómo se puede utilizar un complemento en **HTML**
|
|
|
|
-(en este caso, el complemento de Flash, para mostrar un archivo de vídeo).
|
|
|
|
|
|
+El siguiente ejemplo muestra cómo se puede utilizar un complemento en HTML 5
|
|
|
|
+(en este caso, un complemento de Flash, para mostrar un archivo de vídeo).
|
|
El respaldo **'fallback'** se proporciona para los usuarios que no tienen habilitado Flash,
|
|
El respaldo **'fallback'** se proporciona para los usuarios que no tienen habilitado Flash,
|
|
-en este caso usando el elemento de video para mostrar el video para aquellos que
|
|
|
|
-usan agentes de usuario que soportan video y finalmente proporcionar un enlace
|
|
|
|
-al video para aquellos que no tienen Flash ni video en el navegador
|
|
|
|
|
|
+en este caso usando el elemento ``<video>`` para mostrar el vídeo para aquellos que
|
|
|
|
+usan agentes de usuario que soportan vídeo y proporcionar un enlace
|
|
|
|
+al vídeo para aquellos que no tienen Flash ni vídeo en el navegador
|
|
|
|
|
|
El elemento ``param``
|
|
El elemento ``param``
|
|
=====================
|
|
=====================
|
|
|
|
|
|
El elemento ``<param>`` define parámetros para complementos invocados por
|
|
El elemento ``<param>`` define parámetros para complementos invocados por
|
|
-elementos ``<object>``. No representa nada por sí solo.
|
|
|
|
|
|
+elementos de tipo ``<object>``. No representa nada por sí solo.
|
|
|
|
|
|
Puede usarse con los siguientes atributos:
|
|
Puede usarse con los siguientes atributos:
|
|
|
|
|
|
- ``name``. El nombre del parámetro.
|
|
- ``name``. El nombre del parámetro.
|
|
|
|
+
|
|
- ``value``. El valor del parámetro
|
|
- ``value``. El valor del parámetro
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
@@ -357,20 +393,19 @@ Puede usarse con los siguientes atributos:
|
|
<!DOCTYPE HTML>
|
|
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<html lang="en">
|
|
<head>
|
|
<head>
|
|
- <title>O3D Utah Teapot</title>
|
|
|
|
|
|
+ <title>Tetera en O3D </title>
|
|
</head>
|
|
</head>
|
|
<body>
|
|
<body>
|
|
<p>
|
|
<p>
|
|
<object type="application/vnd.o3d.auto">
|
|
<object type="application/vnd.o3d.auto">
|
|
<param name="o3d_features" value="FloatingPointTextures">
|
|
<param name="o3d_features" value="FloatingPointTextures">
|
|
<img src="o3d-teapot.png"
|
|
<img src="o3d-teapot.png"
|
|
- title="3D Utah Teapot ilustración prestados utilizando O3D.."
|
|
|
|
|
|
+ title="Tetera en 3D desde Ilustraciones Utah utilizando O3D.."
|
|
alt="Cuando O3D rinde la tetera de Utah, aparece como una tetera squat
|
|
alt="Cuando O3D rinde la tetera de Utah, aparece como una tetera squat
|
|
con un acabado metálico brillante en el que se reflejan los alrededores,
|
|
con un acabado metálico brillante en el que se reflejan los alrededores,
|
|
con una leve sombra causada por la iluminación">
|
|
con una leve sombra causada por la iluminación">
|
|
<p>Para ver la tetera realmente renderizada por O3D en su computadora
|
|
<p>Para ver la tetera realmente renderizada por O3D en su computadora
|
|
- , descargue e instale <a>
|
|
|
|
- href="https://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
|
|
|
|
|
|
+ , descargue e instale <a href="https://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
|
|
</object>
|
|
</object>
|
|
<script src="o3d-teapot.js"></script>
|
|
<script src="o3d-teapot.js"></script>
|
|
</p>
|
|
</p>
|
|
@@ -386,49 +421,49 @@ elementos ``<audio>`` y ``<video>``.
|
|
|
|
|
|
Puede usarse con los siguientes atributos:
|
|
Puede usarse con los siguientes atributos:
|
|
|
|
|
|
-- ``autoplay``. Un atributo booleano; si se especifica, el video comenzará a reproducirse
|
|
|
|
- automáticamente tan pronto como sea posible, sin detenerse para terminar de cargar los datos.
|
|
|
|
|
|
+- ``autoplay``. Un atributo booleano; si se especifica, el vídeo comenzará a reproducirse
|
|
|
|
+ automáticamente tan pronto como sea posible, sin detenerse.
|
|
|
|
|
|
- ``controls``. Si está presente este atributo, el navegador ofrecerá controles
|
|
- ``controls``. Si está presente este atributo, el navegador ofrecerá controles
|
|
- para permitir que el usuario controle la reproducción de video, incluyendo
|
|
|
|
|
|
+ para permitir que el usuario controle la reproducción de vídeo, incluyendo
|
|
volumen, búsqueda y pausar/reanudar reproducción.
|
|
volumen, búsqueda y pausar/reanudar reproducción.
|
|
|
|
|
|
-- ``height``. La altura del área de visualización del vídeo en píxeles CSS.
|
|
|
|
|
|
+- ``height``. La altura del área de visualización del vídeo en píxeles.
|
|
|
|
|
|
-- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del video,
|
|
|
|
|
|
+- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del vídeo,
|
|
volverá a reproducirse automáticamente desde el principio.
|
|
volverá a reproducirse automáticamente desde el principio.
|
|
|
|
|
|
-- ``preload``. El objetivo de este atributo enumerado es proporcionar una
|
|
|
|
- sugerencia al navegador sobre qué cree el autor que llevará a la mejor
|
|
|
|
- experiencia para el usuario.
|
|
|
|
|
|
+- ``preload``. El objetivo de este atributo es proporcionar una precarga del archivo de vídeo
|
|
|
|
+ dentro de nuestro navegador antes de que se inicié la reproducción para que no se trabe
|
|
|
|
+ durante su reproducción de este.
|
|
|
|
|
|
Puede tener uno de los siguientes valores:
|
|
Puede tener uno de los siguientes valores:
|
|
|
|
|
|
- - ``none``. Sugiere bien que el autor cree que el usuario no tendrá que
|
|
|
|
- consultar ese video, bien que el servidor desea minimizar su tráfico;
|
|
|
|
- es decir, esta sugerencia indica que no se debe almacenar en caché este video.
|
|
|
|
|
|
+ - ``none``. El autor sugiere que el usuario no tendrá que
|
|
|
|
+ consultar este vídeo, porque el servidor desea minimizar su tráfico;
|
|
|
|
+ es decir, esta sugerencia indica que no se debe almacenar en caché este vídeo.
|
|
|
|
|
|
- - ``metadata``. Indica que solo carga los metadatos del vídeo (por ejemplo,
|
|
|
|
|
|
+ - ``metadata``. Indica que solo carga los metadatos del vídeo (por ejemplo,
|
|
longitud del vídeo).
|
|
longitud del vídeo).
|
|
|
|
|
|
- - ``auto``. Indica que el vídeo entero puede ser descargado, incluso
|
|
|
|
|
|
+ - ``auto``. Indica que el vídeo entero puede ser descargado, incluso
|
|
si no se espera que el usuario vaya a usarlo.
|
|
si no se espera que el usuario vaya a usarlo.
|
|
|
|
|
|
- - ``cadena vacía``. Que es un sinónimo del valor **auto**.
|
|
|
|
-
|
|
|
|
-- ``poster``. La URL de la imagen que se muestra antes de reproducir el
|
|
|
|
- vídeo.
|
|
|
|
|
|
+ - ``cadena vacía``. Sinónimo del valor **auto**.
|
|
|
|
|
|
- .. code-block:: html
|
|
|
|
-
|
|
|
|
- <video src="video.webm" autoplay controls></video>
|
|
|
|
|
|
|
|
|
|
+- ``poster``. Una imagen pretederminada mediante una URL o una imagen añadida
|
|
|
|
+ que se muestra antes de reproducir el vídeo.
|
|
|
|
|
|
-- ``src``. La URL del vídeo que se va a insertar. Es opcional; podrás optar, en su lugar,
|
|
|
|
|
|
+- ``src``. La URL del vídeo que se va a insertar,es opcional; podrás optar, en su lugar,
|
|
por el elemento ``<source>`` dentro del bloque de vídeo para especificar el
|
|
por el elemento ``<source>`` dentro del bloque de vídeo para especificar el
|
|
- video que se va a incrustar.
|
|
|
|
|
|
+ vídeo que se va a incrustar.
|
|
|
|
+
|
|
|
|
+ .. code-block:: html
|
|
|
|
|
|
-- ``width``. La anchura del área de visualización del vídeo en píxeles CSS.
|
|
|
|
|
|
+ <video src="video.webm" autoplay controls></video>
|
|
|
|
+
|
|
|
|
+- ``width``. La anchura del área de visualización del vídeo en píxeles.
|
|
|
|
|
|
Este ejemplo muestra un mensaje cuando el vídeo no se puede reproducir
|
|
Este ejemplo muestra un mensaje cuando el vídeo no se puede reproducir
|
|
correctamente:
|
|
correctamente:
|
|
@@ -436,16 +471,15 @@ correctamente:
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
|
|
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
|
|
- Tu navegador no admite el elemento <code>video</code>.
|
|
|
|
|
|
+ Tu navegador no admite el elemento <code>vídeo</code>.
|
|
</video>
|
|
</video>
|
|
|
|
|
|
-
|
|
|
|
El elemento ``audio``
|
|
El elemento ``audio``
|
|
=====================
|
|
=====================
|
|
|
|
|
|
-Un elemento ``<audio>`` representa un sonido o un flujo de audio.
|
|
|
|
|
|
+Representa un sonido o un flujo de audio.
|
|
|
|
|
|
-Se puede proporcionar contenido dentro del elemento de audio para los navegadores
|
|
|
|
|
|
+Se puede proporcionar contenido dentro del elemento ``<audio>`` para los navegadores
|
|
que no pueden reproducir audio.
|
|
que no pueden reproducir audio.
|
|
|
|
|
|
Se puede utilizar con los siguientes atributos:
|
|
Se puede utilizar con los siguientes atributos:
|
|
@@ -458,26 +492,24 @@ Se puede utilizar con los siguientes atributos:
|
|
para permitir que el usuario controle la reproducción de audio, incluyendo
|
|
para permitir que el usuario controle la reproducción de audio, incluyendo
|
|
volumen, búsqueda y pausar/reanudar reproducción.
|
|
volumen, búsqueda y pausar/reanudar reproducción.
|
|
|
|
|
|
-- ``preload``. El objetivo de este atributo enumerado es proporcionar una sugerencia al navegad or sobre qué cree el autor que proporcionará la mejor experiencia para el usuario .
|
|
|
|
- Puede tener uno de los siguientes valores:
|
|
|
|
|
|
+- ``preload``. El objetivo de este atributo es proporcionar una pequeña precarga
|
|
|
|
+ del contenido audio que se almacena en el buffer del navegador
|
|
|
|
|
|
- - ``none``. Sugiere bien que el autor cree que el usuario no tendrá que consultar ese
|
|
|
|
- video, bien que el servidor desea minimizar su tráfico; es decir, esta
|
|
|
|
- sugerencia indica que no se debe almacenar en caché este video;
|
|
|
|
|
|
+ - ``none``. Se utiliza cuando el autor del sitio web considera que el usuario no
|
|
|
|
+ tendrá que consultar ese recurso de audio posteriormente y asi minimizar el
|
|
|
|
+ tráfico del servidor, indica que no se debe almacenar en caché este audio;
|
|
|
|
|
|
- - ``metadata``. Sugiere que aunque el autor piensa que el usuario no tendrá que
|
|
|
|
|
|
+ - ``metadata``. Sugiere que aunque el autor piense que el usuario no tendrá que
|
|
consultar ese audio, es razonable capturar los metadatos (p. ej. longitud);
|
|
consultar ese audio, es razonable capturar los metadatos (p. ej. longitud);
|
|
|
|
|
|
- - ``auto``. Sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia
|
|
|
|
- indica que, si es necesario, se puede descargar el video completo, incluso
|
|
|
|
|
|
+ - ``auto``. Indica que si es necesario, se puede descargar el vídeo completo, incluso
|
|
aunque el usuario no vaya a usarlo;
|
|
aunque el usuario no vaya a usarlo;
|
|
|
|
|
|
- - cadena vacía. Hace lo mismo que el valor **auto**.
|
|
|
|
|
|
+ - *Una cadena vacía*. Realiza la misma función que el valor **auto**.
|
|
|
|
|
|
- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del audio,
|
|
- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del audio,
|
|
este vuelve a reproducirse desde el principio.
|
|
este vuelve a reproducirse desde el principio.
|
|
|
|
|
|
-
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
|
|
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
|
|
@@ -488,42 +520,39 @@ Se puede utilizar con los siguientes atributos:
|
|
El elemento ``source``
|
|
El elemento ``source``
|
|
======================
|
|
======================
|
|
|
|
|
|
-El elemento ``<source>`` permite a los autores especificar múltiples recursos
|
|
|
|
-de medios alternativos para elementos de medios. No representa nada por sí solo.
|
|
|
|
-
|
|
|
|
-Se usa para especificar los recursos de medios múltiples para los elementos
|
|
|
|
-``<audio>`` y ``<video>`` en HTML 5. Se trata de un elemento vacío.
|
|
|
|
|
|
+El uso del elemento ``<source>`` permite a los autores de un sitio web especificar múltiples
|
|
|
|
+recursos alternativos de tipo multimedia. Por sí solo no representa nada.
|
|
|
|
|
|
Puede usarse con los siguientes atributos:
|
|
Puede usarse con los siguientes atributos:
|
|
|
|
|
|
-- ``src``. Da la dirección del recurso de medios. El valor debe ser una URL no vacía válida
|
|
|
|
- potencialmente rodeada de espacios. Este atributo debe estar presente.
|
|
|
|
|
|
+- ``src``. Indica la dirección del recurso multimedia a reproducir. Este atributo debe
|
|
|
|
+ estar presente.
|
|
|
|
|
|
-- ``type``. El contenido de este atributo indica el tipo del recurso multimedia,
|
|
|
|
|
|
+- ``type``. Este atributo indica el tipo del recurso multimedia,
|
|
para ayudar al navegador a determinar si puede reproducir este recurso multimedia
|
|
para ayudar al navegador a determinar si puede reproducir este recurso multimedia
|
|
- antes de buscarlo. Si se especifica, su valor debe ser un tipo MIME válido.
|
|
|
|
|
|
+ antes de buscarlo. Si se especifica, su valor debe ser un tipo MIME válido.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<video controls>
|
|
<video controls>
|
|
- <source src="foo.ogg" type="video/ogg"> <!-- Picked by Firefox -->
|
|
|
|
- <source src="foo.mov" type="video/quicktime"> <!-- Picked by Safari -->
|
|
|
|
|
|
+ <source src="foo.ogg" type="video/ogg"> <!-- Soportado por Firefox -->
|
|
|
|
+ <source src="foo.mov" type="video/quicktime"> <!-- Soportado por Safari -->
|
|
Lo siento, tu navegador no soporta vídeos de HTML 5.
|
|
Lo siento, tu navegador no soporta vídeos de HTML 5.
|
|
</video>
|
|
</video>
|
|
|
|
|
|
-Este ejemplo muestra cómo ofrecer un video en formato **Ogg** para los usuarios cuyos
|
|
|
|
-navegadores son compatibles con formato **Ogg** y un video en formato **QuickTime** para
|
|
|
|
|
|
+Este ejemplo muestra cómo ofrecer un vídeo en formato **Ogg** para los usuarios cuyos
|
|
|
|
+navegadores son compatibles con formato **Ogg** y un vídeo en formato **QuickTime** para
|
|
los usuarios cuyos navegadores son compatibles con él. Si el elemento audio o
|
|
los usuarios cuyos navegadores son compatibles con él. Si el elemento audio o
|
|
-video no es compatible con el navegador, se muestra un aviso en su lugar.
|
|
|
|
|
|
+vídeo no es compatible con el navegador, se muestra un aviso en su lugar.
|
|
Si el navegador es compatible con el elemento, pero no es compatible con
|
|
Si el navegador es compatible con el elemento, pero no es compatible con
|
|
-cualquiera de los formatos especificados, se produce un evento error y los
|
|
|
|
-controles multimedia (si están activados) indicarán un error.
|
|
|
|
|
|
+cualquiera de los formatos especificados, se produce un evento de tipo "error" y los
|
|
|
|
+controles multimedia (si están activados) indicarán el error.
|
|
|
|
|
|
.. code-block:: html
|
|
.. code-block:: html
|
|
|
|
|
|
<script>
|
|
<script>
|
|
function fallback(video) {
|
|
function fallback(video) {
|
|
- // replace <video> dentro del contenido
|
|
|
|
|
|
+ // reemplaza <video> dentro del contenido
|
|
while (video.hasChildNodes()) {
|
|
while (video.hasChildNodes()) {
|
|
if (video.firstChild instanceof HTMLSourceElement)
|
|
if (video.firstChild instanceof HTMLSourceElement)
|
|
video.removeChild(video.firstChild);
|
|
video.removeChild(video.firstChild);
|
|
@@ -539,8 +568,8 @@ controles multimedia (si están activados) indicarán un error.
|
|
onerror="fallback(parentNode)">
|
|
onerror="fallback(parentNode)">
|
|
</video>
|
|
</video>
|
|
|
|
|
|
-Si el autor no está seguro de si los navegadores podrán procesar los
|
|
|
|
-recursos de medios proporcionados, podrá escuchar el evento de error
|
|
|
|
|
|
+Si el autor del sitio web no está seguro de si los navegadores podrán procesar los
|
|
|
|
+recursos multimedia proporcionados, podrá usar un escuchador de eventos de tipo "error"
|
|
en el último elemento de origen y activar el comportamiento de **fallback**.
|
|
en el último elemento de origen y activar el comportamiento de **fallback**.
|
|
|
|
|
|
El elemento ``track``
|
|
El elemento ``track``
|
|
@@ -551,35 +580,35 @@ para elementos multimedia. No representa nada por sí solo.
|
|
|
|
|
|
Puede utilizarse con los siguientes atributos:
|
|
Puede utilizarse con los siguientes atributos:
|
|
|
|
|
|
-- ``default``. Este atributo indica que ``<track>`` debe estar habilitado a menos que las
|
|
|
|
- preferencias del usuario indiquen que otro ``<track>`` es más apropiado.
|
|
|
|
- Esto sólo puede utilizarse en un elemento ``<track>`` para los elementos
|
|
|
|
|
|
+- ``default``. Este atributo indica que ``<track>`` debe estar habilitado a
|
|
|
|
+ menos que las preferencias del usuario indiquen que otro ``<track>`` es más
|
|
|
|
+ apropiado. Esto sólo puede utilizarse en un elemento ``<track>`` para los elementos
|
|
multimedia.
|
|
multimedia.
|
|
|
|
|
|
-- ``kind``. Puede tener los siguientes valores:
|
|
|
|
|
|
+- ``kind``. Especifica el tipo de texto que puede tener el elemento ``<track>``. Puede tener
|
|
|
|
+ los siguientes valores:
|
|
|
|
|
|
- ``subtitles``. Transcripción o traducción del diálogo, adecuada para cuando el sonido está
|
|
- ``subtitles``. Transcripción o traducción del diálogo, adecuada para cuando el sonido está
|
|
disponible pero no se entiende (por ejemplo, porque el usuario no entiende
|
|
disponible pero no se entiende (por ejemplo, porque el usuario no entiende
|
|
- el idioma de la pista de audio del recurso multimedia). Sobrepuesto en el video.
|
|
|
|
|
|
+ el idioma de la pista de audio del recurso multimedia). Sobrepuesto en el vídeo.
|
|
- ``captions``. Transcripción o traducción del diálogo, efectos de sonido, pistas musicales
|
|
- ``captions``. Transcripción o traducción del diálogo, efectos de sonido, pistas musicales
|
|
relevantes y otra información de audio relevante, adecuada para cuando el
|
|
relevantes y otra información de audio relevante, adecuada para cuando el
|
|
sonido no está disponible o no es claramente audible. Por ejemplo, porque
|
|
sonido no está disponible o no es claramente audible. Por ejemplo, porque
|
|
- está silenciado, ahogado por el ruido ambiental o porque el usuario está sordo.
|
|
|
|
|
|
+ está silenciado, ahogado por el ruido ambiental o porque la persona es sorda.
|
|
- ``description``. Descripciones textuales del componente de vídeo del recurso de medios, destinado
|
|
- ``description``. Descripciones textuales del componente de vídeo del recurso de medios, destinado
|
|
a la síntesis de audio cuando el componente visual está oscurecido, no disponible
|
|
a la síntesis de audio cuando el componente visual está oscurecido, no disponible
|
|
- o no utilizable ``ejemplo``, porque el usuario está interactuando con la
|
|
|
|
- aplicación sin pantalla durante la conducción o porque el usuario está ciego).
|
|
|
|
|
|
+ o no utilizable, por ejemplo, porque el usuario está interactuando con la
|
|
|
|
+ aplicación sin pantalla durante la conducción o porque el usuario es invidente).
|
|
Sintetizado como audio.
|
|
Sintetizado como audio.
|
|
- - ``chapters``. Títulos de capítulos, destinados a ser utilizados para navegar por el recurso
|
|
|
|
- multimedia. Se muestra como una lista interactiva (potencialmente anidada)
|
|
|
|
|
|
+ - ``chapters``. Títulos de capítulos, destinados a ser utilizados por los navegadores
|
|
|
|
+ por el recurso multimedia. Se muestra como una lista interactiva (potencialmente anidada)
|
|
en la interfaz del navegador.
|
|
en la interfaz del navegador.
|
|
- ``metadata``. Pistas destinadas para su uso desde el script. No se muestra en el agente de usuario.
|
|
- ``metadata``. Pistas destinadas para su uso desde el script. No se muestra en el agente de usuario.
|
|
|
|
|
|
-- ``label``. Título legible por el usuario del ``<track>`` de texto que utiliza el navegador
|
|
|
|
- al listar los ``<track>`` de texto disponibles.
|
|
|
|
|
|
+- ``label``. Título legible para el ``<track>`` que utiliza el navegador
|
|
|
|
+ para listar los ``<track>`` de textos disponibles.
|
|
|
|
|
|
-- ``src``. URL de la pista **(archivo .vtt)**. Debe ser una URL válida.
|
|
|
|
- Este atributo debe indicado siempre.
|
|
|
|
|
|
+- ``src``. URL o dirección del recurso. Este atributo debe de ser indicado siempre.
|
|
|
|
|
|
- ``srclang``. Idioma de los datos del texto del ``<track>``.
|
|
- ``srclang``. Idioma de los datos del texto del ``<track>``.
|
|
|
|
|
|
@@ -663,7 +692,7 @@ Puede ser utilizado con los siguientes atributos:
|
|
- ``href``. La dirección del recurso.
|
|
- ``href``. La dirección del recurso.
|
|
- ``hreflang``. El idioma del recurso enlazado.
|
|
- ``hreflang``. El idioma del recurso enlazado.
|
|
- ``rel``. La relación del documento actual con el recurso enlazado.
|
|
- ``rel``. La relación del documento actual con el recurso enlazado.
|
|
-- ``shape``. Tipo de forma a ser creada en un mapa de imagen. Puede tener los
|
|
|
|
|
|
+- ``shape``. Tipo de forma a ser creado en un mapa de imagen. Puede tener los
|
|
siguientes valores:
|
|
siguientes valores:
|
|
|
|
|
|
- ``circle``. Forma de círculo.
|
|
- ``circle``. Forma de círculo.
|
|
@@ -762,4 +791,4 @@ A continuación, se muestra un ejemplo que dibuja un círculo.
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|
|
|
|
|
|
-.. _Aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
|
|
|
|
|
|
+.. _Aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
|