Compartir a través de

  • Artículo

Volver al índice del curso

Lección 6: Contenidos multimedia y funciones Drag y Drop de HTML5

Objetivos:

En esta lección aprenderás a incorporar contenidos multimedia a una página web con las etiquetas <video> y <audio> de HTML5 y a utilizar las funciones “arrastrar” (“drag”) y “soltar” (“drop”) que permiten a los usuarios interactuar visualmente con los objetos de tu sitio web.

 

Para empezar

En esta lección vamos a trabajar con algunos archivos de la carpeta HTML5_06lessons. Comprueba que has cargado la carpeta  HTML5lessons en tu disco duro. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.

 

Multimedia e interactividad con HTML5

En esta lección aprenderás a integrar contenidos multimedia en tus páginas utilizando los nuevos elementos <video> y <audio> de HTML5. Además podrás aprender los conceptos básicos de la funcionalidad “arrastrar y soltar” (“drag-and-drop”) y cómo se añade a una página web con el API Drag and Drop. Aunque a primera vista puede parecer que estos dos elementos no tienen mucho en común, en ambos se pone en evidencia un aspecto fundamental de HTML5 como es la compatibilidad con los distintos navegadores. En los ejercicios siguientes no solo aprenderás los conceptos básicos de uso de multimedia y de las operaciones “drag and drop”, sino las técnicas necesarias para asegurar la compatibilidad en el mayor número posible de navegadores.

 

Las operaciones Arrastrar y Pegar en la Web

Las operaciones “arrastrar” (drag) y “soltar” (drop) permiten a los usuarios colocar visualmente ciertos elementos en pantalla en lugar de hacerlo pulsando un botón. En el entorno de las aplicaciones de software y sistemas operativos esta capacidad de arrastre y liberación de objetos está muy asentada y su uso es muy intuitivo. La funcionalidad de arrastrar y soltar objetos en pantalla ha tardado en trasladarse a la web, y las funcionalidades que podemos encontrar en algunos sitios web probablemente se han logrado programando con Javascript o mediante algún complemento para el navegador, por ejemplo hecho con Flash o Silverlight.

El API “Drag and Drop” de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos detalles, y ciertos navegadores ofrecen una sintaxis alternativa, pero la API normalizada está a punto de cerrarse ya. En el momento de redactar este manual, no todos los navegadores soportan ciertas funciones de arrastre y pegado. Por ejemplo, algunos navegadores permiten que se puedan seleccionar objetos o archivos desde otras ventanas o aplicaciones y liberarlos en la página web, pero otros navegadores no admiten esto.

Conviene saber que en la mayoría de los navegadores podemos arrastrar por defecto imágenes, enlaces y textos seleccionados. Podemos también, en algunos navegadores, arrastrar archivos y textos seleccionados desde el sistema operativo.

 

Operaciones Drag and Drop compatibles en distintos navegadores

En esta lección nos centraremos en las funciones drag-and-drop soportadas en la mayoría de navegadores. Hay algunas diferencias entre los indicadores visuales de una operación drag-and-drop. La funcionalidad de la operación, en general se conserva, con un número reducido de fallbacks.

1 Desde el editor de texto, abre el archivo 06_shopping.html que aparece dentro de la carpeta HTML5_06lessons. Guarda una copia del archive con el nombre 06_shopping_work.html. Abre este archive en tu navegador. Podrás ver que en la página tenemos una lista de la compra. El objetivo de esta práctica consiste en crear una interfaz basada en las operaciones  de arrastrar y soltar para comprar artículos. Hemos creado el código JavaScript inicial para evitarte este trabajo, pero tendrás que añadir el que falta para conseguir que la página funcione correctamente.

El aspecto inicial de la página.

Mueve el cursor sobre los productos que aparecen en la página. El puntero cambia, y también cambian los bordes de las imágenes. Así los usuarios saben que pueden arrastrar estas imágenes. Estas reglas se han indicado en la hoja de estilos base.css utilizando la clase .tile_list que se ha aplicado a los elementos div que contienen las imágenes de las camisetas. A lo largo de esta lección veremos que se pueden utilizar también otros indicadores visuales.

2 Pasa al editor de textos y mira dentro de la segunda sección <script>. (El primer elemento  <script> se utiliza para la librería Modernizr, que hace que los navegadores antiguos puedan reconocer los elementos nuevos de HTML5). Encuentra la variable shoppingcart dentro de la función setup.  Esta variable contiene una referencia al div de la lista de la compra., En tu código utilizarás esta referencia para registrar el div como zona para soltar los objetos arrastrados.

Añade la siguiente línea de código para evitar el comportamiento por defecto del evento dragenter:

function setup(){
  shoppingcart = document.getElementById('shoppingcart');
  shoppingcart.ondragenter = preventDefault;
}

Por defecto, en algunos navegadores el evento dragenter muestra un icono que indica que cierta área no es una zona donde se pueda liberar un objeto arrastrado. Necesitamos asignar a este evento la función preventDefault para mantener la consistencia entre los distintos navegadores. El código que se muestra a continuación ya está añadido a la sección de script y define la preventDefault, que necesita lanzar tres tareas concretas para evitar la acción por defecto en algunos navegadores:

function preventDefault( event ){
  event.stopPropagation();
  event.preventDefault();
  return false;
}

La función  stopPropagation evita que otros contenedores respondan al mismo evento.

La función  preventDefault evita el comportamiento por defecto de este evento en ciertos navegadores.

Dado que preventDefault es una función de callback de evento, al devolver el valor false evitamos el comportamiento por defecto en ciertos navegadores.

3 En algunos navegadores el evento dragover muestra un icono parecido al del evento dragenter, indicando que este contenedor no es una zona donde se puedan soltar objetos. Para evitar el comportamiento por defecto del evento dragover, añade el código marcado en rojo después de la línea de código del paso anterior.

function setup(){
  shoppingcart = document.getElementById('shoppingcart');
  shoppingcart.ondragenter = preventDefault;
  shoppingcart.ondragover = preventDefault;
}

4 Desplázate hacia la mitad inferior del código HTML de la página. Para permitir el arrastre desde la lista que contiene las imágenes de las camisetas, añade el atributo ondragstart al DIV que tiene asignada una clase CSS llamada tile_list, y asigna al atributo el valor que se indica aquí:

<div class="tile_list" ondragstart="dragStarted(event);">

En el momento de redactar este manual, el API Drag and Drop no está diseñada para realizar operaciones de arrastrar y soltar. El API Drag and Drop API permite a los desarrolladores responder a los eventos, pero no moverlos realmente. La siguiente implementación aporta las capacidades de arrastre y pegado necesarias para poder hacer una aplicación de carrito de la compra sencilla.

5 Dentro de la función dragStarted, ya definida para esta actividad, añade la siguiente línea de código para mantener una referencia al elemento arrastrado por el usuario dentro de la variable dragging predefinida:

function dragStarted( event ){
  dragging = event.target;
}

6 Para implementar la actividad de soltar en nuestra lista de la compra, utiliza la función dragDrop de modo que responda al evento drop de la lista de artículos elegidos:

function setup(){
  shoppingcart = document.getElementById('shoppingcart');
  shoppingcart.ondragenter = preventDefault;
  shoppingcart.ondragover = preventDefault;
  shoppingcart.ondrop = dragDrop;
}

7 Dentro de la función dragDrop predefinida, introduce la siguiente línea de código para añadir a la lista de la compra el objeto que se ha arrastrado hacia él

function dragDrop(event){
  addToCart( dragging, 1 );
}

 

 

Cómo hacer que un objeto sea arrastrable en HTML5

 

En algunos navegadores, como Internet Explorer 10, podemos por defecto, arrastrar imágenes, enlaces y textos seleccionados y mantener su incapacidad para soltarlos en otros lugares, y todo ello sin utilizar callbacks de Javascript. Para que el usuario pueda arrastrar objetos hacia otros elementos, hay que añadirles el atributo draggable con el valor true, como se hace en este ejemplo:

<li draggable="true">Elemento 1 de la lista</li>

 

8 En el menú Archivo, selecciona Guardar  y visualiza la página en el navegador. Dependiendo del navegador que utilices, verás resultados muy distintos si arrastras una de las imágenes dentro de la lista de la compra. en los navegadores Webkit, como Safari  5 o Chrome 11, el efecto que obtenemos es el esperado y la imagen aparece en  la lista de la compra. En otros navegadores como Firefox 4, el comportamiento por defecto de una imagen arrastrada a la zona de destino consiste en que esa imagen se abre en la misma ventana donde aparece la zona de destino. Para asegurarnos de que este comportamiento queda anulado, debemos volver al editor y añadir la siguiente línea de código:

function dragDrop(event){
  addToCart( dragging, 1 );
  return preventDefault(event);
}

9 Guarda el archive y vuelve a probarlo e el navegador. Si arrastras las camisetas hacia la zona de la lista, quedarán añadidas a la lista de artículos comprados.

La lista de la compra mantiene la relación de elementos arrastrados hacia él, los visualiza y muestra un enlace para proceder a la siguiente fase de la compra (“checkout”).

 

Incorporar elementos de audio y vídeo

Añadir video y sonido a una página web es una manera de hacerla más atractiva. Los contenidos multimedia captan la atención del visitante y nos permiten llegar a audiencias que, muy a menudo, adoptan una actitud de rechazo hacia las páginas con texto abundante. En HTML5 se resuelve directamente la construcción de páginas con audio y vídeo. Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo. Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.

En esta sección aprenderás a incorporar vídeo a tu página web, con la posibilidad de que el vídeo empiece a reproducirse automáticamente al cargarse la página, y también aprenderás a utilizar los controles de reproducción que nos ofrecen los propios navegadores.

1 Desde la carpeta HTML5_06lessons, abre la página 06_video.html y guarda una copia de este archivo como 06_video_work.html. En la línea 8 dentro del elemento <body>, añade esta línea de código:

  <video src='videos/BigBuck.mp4' autoplay></video>

Como ya veíamos en el caso del elemento imagen, el elemento video tiene un atributo src cuyo valor apunta a la ubicación del archivo de vídeo que debe reproducir. El atributo autoplay le indica al navegador que debe empezar a reproducir el vídeo en cuanto haya cargado la página. Guarda el archivo y visualízalo en Internet Explorer 9. Podrás ver una página parecida a la que se muestra en la siguiente figura. El vídeo debe empezar a reproducirse automáticamente.

En versiones antiguas de Internet Explorer, Firefox o Chrome, no vas a ver probablemente ningún vídeo, ¡pero este problema se resolverá en seguida!

El elemento video tal y como se muestra en Internet Explorer 9.

Puesto que la forma de declarar el vídeo en HTML5 es estándar, los desarrolladores de navegadores son los responsables de que cada navegador siga las directrices del estándar y muestre el vídeo correctamente. Como desarrollador Web, tu trabajo consiste en centrarte en los contenidos y las personalizaciones, y ahora vamos a ver algunas maneras en que podemos hacer esto.

2 Cierra el navegador y vuelve al editor de texto. Para tener un mayor control sobre la reproducción del vídeo, elimina el atributo autoplay y añade el atributo controls, con lo que la línea de código quedaría así (destacando los cambios en rojo):

<video src='videos/BigBuck.mp4 controls></video>

Guarda el archivo y ábrelo en el navegador (dependiendo de la configuración de seguridad del navegador, puede que tengas que pulsar en el botón “Aceptar contenido bloqueado”). Pon el cursor sobre la película y aparecerán los controles por defecto. Los controles estándar de Internet Explorer 9 para vídeo son un botón de Pausa/Reproducción, la barra de avance (donde podemos mover el punto de reproducción pulsando y arrastrándolo sobre la línea de tiempo hacia adelante y atrás), el botón de silencio (mute) y el deslizante de volumen. Ten en cuenta que estos controles nativos tienen un aspecto diferente en cada familia de navegadores web.

La barra de controles de video por defecto de Internet Explorer 9.

3 Pulsa en el botón de reproducción (“play”) y el vídeo debe empezar a reproducirse. Arrastra el puntero de reproducción sobre la barra y el vídeo avanzará o retrocederá en consecuencia. Si vuelves a cargar la página, verás que ahora ya no aparece el atributo autoplay y el primer frame del vídeo es un rectángulo negro que aparece en la pantalla y permanece ahí hasta que el vídeo empieza a reproducirse. Si quieres que en su lugar aparezca una imagen como vista previa personalizada en vez de este recuadro negro, debes añadirle el atributo poster. Cierra el navegador y vuelve al editor de texto.

4 Inserta el atributo poster después del atributo controls  y asígnale el valor "poster320.png" tal y como se ve aquí (destacado en rojo):

<video src='videos/BigBuck.mp4' controls poster='poster320.png'> </video>

Al añadir el atributo poster le estamos indicando al navegador que cargue una imagen y la ponga sobre el elemento de vídeo. Cuando empiece a reproducirse el vídeo, esta imagen desaparecerá.

Guarda el archivo y vuelve a abrirlo con el navegador. Antes de pulsar el botón “permitir contenidos bloqueados” podrás ver en pantalla la imagen indicada como “poster” en vez del cuadro negro.

Ahora muestra una imagen de vista previa al cargar la página.

5 Vuelve al editor de texto y añade los siguientes atributos y valores de anchura y altura:

<video src='videos/BigBuck.mp4' controls poster='poster320.png' width='320' height='180'>

Por defecto, el elemento video modifica su tamaño para adecuarse a las dimensiones originales del archivo de vídeo. Para controlar el tamaño en pantalla se utilizan los atributos width y height. En general se considera buena práctica que ambos valores coincidan con las dimensiones originales del vídeo. También podemos ampliar el tamaño en pantalla cambiando estos parámetros, pero no se recomienda. Si ampliamos a mano el tamaño, la calidad de la imagen puede degradarse. Si reducimos su tamaño, aunque su calidad puede que no se vea afectada, estamos obligando al usuario a cargar un archivo de tamaño mayor del necesario. Una solución más correcta sería disponer del mismo vídeo en dos formatos, uno más grande y otro más pequeño para cada caso.

6 Guarda el archivo.

 

Otros atributos del elemento  video

Aparte de autoplay, controls y poster, el elemento video tiene algunos otros atributos que podemos utilizar:

  • audio: este atributo nos permite silenciar el audio del vídeo. Actualmente el único valor soportado es “muted” (silencio).
  • loop: Este atributo hace que el vídeo vuelva a reproducirse desde el principio cuando llega al final.
  • preload: Este atributo hace que el vídeo empiece a cargarse al mismo tiempo que se carga la página (aunque no se reproduzca de forma automática), de modo que se evita la latencia –es decir, el tiempo de retardo- que requiere su descarga cuando el usuario pulsa el botón Play.

 

Compatibilidad con los distintos navegadores

La especificación de HTML5 no define un códec estándar para no limitar los codecs existentes o futuros que pueden utilizarse para reproducir video, disponer de esta flexibilidad ha supuesto que no todos los navegadores compatibles con HTML5 soporten los mismos codecs.

Cada archivo de vídeo funciona como un contenedor de múltiples archivos que contienen el vídeo, audio e información de control en algunos casos. La opción más popular y que más aceptación tiene en la industria es el formato MP4, y más concretamente un contenedor de vídeo MP4, el estándar ISO/IEC 14496-14:2003, que utiliza el códec de vídeo H.264 y el códec AAC para el audio. Ambos códecs, el H.264 y AAC se ofrecen además en múltiples niveles de perfil, que se utilizan para conseguir distintos grados de calidad y compresión. Para poder servir vídeos en la mayor cantidad posible de dispositivos y navegadores nuestra recomendación es utilizar el perfil de línea de base de vídeo H.264 y el perfil AAC de “baja complejidad”.  También existe el formato Ogg que es un contenedor de vídeo mantenido por la fundación Xiph.

Los archivos MP4 codificados con este perfil están soportados en las últimas versiones de Internet Explorer, Safari, iOS y Android.

Si conseguimos que nuestros vídeos estén disponibles tanto en formato MP4 como Ogg, tendremos la opción de llegar a la mayoría de los usuarios que emplean dispositivos y navegadores modernos. En esta sección vamos a ver cómo se incorporan múltiples archivos de origen a un elemento de vídeo, lo que permite al navegador seleccionar el archivo adecuado dependiendo del formato que soporte.

1 En tu archivo de prácticas 06_video.html elimina del elemento video todo el atributo src (incluyendo la referencia al archivo BigBuck.mp4).

2 Inserta un elemento <source> como hijo del elemento <video> y añade el atributo src al elemento source con el valor 'videos/BigBuck.mp4' como se indica aquí (destacado en rojo)

<video controls poster='poster320.jpg' width='320' height='180'>
<source src='videos/BigBuck.mp4' />
</video>

3 Inserta otro elemento <source> hijo debajo del anterior, esta vez con un atributo src que apunte al archivo videos/BigBuck.ogg. as (como aparece indicado en rojo aquí):

<video controls poster='poster320.jpg' width='320' height='180'>
<source src='videos/BigBuck.mp4' />
<source src='videos/BigBuck.ogg' />
</video>

4 Guarda el archivo y actualiza la página en el navegador. Cuando se abre este  código HTML en Internet Explorer o Safari, ambos utilizan el primer archivo de origen ya que soportan el formato MP4. Cuando se abre en Chrome, Firefox u Opera, dado que no soportan MP4 el archivo que se utiliza como origen es el segundo. El navegador va comprobando los distintos archivos fuente por el mismo orden en que se enumeran dentro del elemento vídeo, hasta encontrar el primero compatible, que es el que empleará para su reproducción.

Por ejemplo, si un usuario con Firefox abre esta página, el navegador debería descargar una porción suficiente del archivo con formato MP4 para ver si puede reproducirlo. Cuando detecta que no puede hacerlo, el propio navegador salta al siguiente archivo fuente, que en este caso es un archivo en formato Ogg, que sí está soportado en Firefox. Para ayudar a los navegadores a detectar los archivos compatibles y evitarle al usuario la espera mientras descarga archivos no soportados, podemos emplear el atributo type del elemento source. El valor del atributo type describe el formato del archivo y los códecs de vídeo y audio que utiliza.

5 Añade un atributo type al primer elemento source para indicar el formato de archivo MP4, utilizando la sintaxis siguiente:

<source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>

Con esto le decimos al navegador que el archivo “BigBuck.mp4” está creado en formato MP4, el vídeo está codificado como H.264 utilizando el perfil de línea de base y el audio va codificado como AAC con el perfil de “baja complejidad”.

6 Ahora añade el código siguiente en la línea source del formato Ogg:

<source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora,vorbis"'/>

Aquí le estamos indicando al navegador que el  archivo “BigBuck.ogg” se ha guardado en formato Ogg, que el video está codificado utilizando el códec Theora y el audio con el códec Vorbis.

Cuando el navegador cargue este código HTML empezará por comprobar la compatibilidad en función del atributo type y así se ahorra tiempo y ancho de banda, ya que no descarga todos los archivos. El último paso consiste en añadir un código adicional para navegadores antiguos no compatibles con HTML5: tenemos que tener preparada una alternativa para cuando carguemos esta página en un navegador antiguo que no soporte el elemento video en absoluto.

7 Añade un elemento <h1> con un enlace al archivo “BigBuck.mp4” después del segundo elemento source, tal y como se muestra aquí (destacado en rojo).

<video controls poster='poster320.jpg' width='320' height='180'>
<source src='videos/BigBuck.mp4' type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora,
vorbis"'>
<h1><a href="videos/BigBuck.mp4">Descarga el video</a></h1>
</video>

No vas a poder probar este cambio en el navegador que utilizas ya que –obviamente- soporta el elemento vídeo, pero si lo cargas en un navegador antiguo incompatible con HTML5, podrás ver simplemente un enlace que dice “Descarga el vídeo” y el usuario deberá pulsar sobre él para descargarlo manualmente y reproducirlo utilizando el reproductor de vídeo por defecto de su sistema.

8 Guarda el archivo.

 

Cuestionario de repaso

Preguntas

1 ¿Por qué es necesario evitar el comportamiento por defecto y devolver el valor false a la mayor parte de funciones de callback de drag-and-drop?

2 Enumera dos atributos que puedes añadir a un elemento <video> que pueden afectar a la forma en que aparece el vídeo en pantalla.

3 ¿Por qué cuando añadimos la etiqueta video deberíamos usar como fuente un archivo Ogg además de MP4?

Respuestas

1 El comportamiento por defecto en muchos navegadores consiste en evitar el efecto de drag-and-drop y mostrar un indicador en pantalla para que el usuario sepa que no todos los contenedores son posibles destinos de la acción de soltar. Al evitar el comportamiento por defecto aparece un indicador visual independiente y se activa la funcionalidad de arrastrar y soltar en ciertos navegadores.

2 El atributo controls nos permite especificar si se mostrarán los controles de reproducción en la página. El atributo autoplay indica si el vídeo debe empezar a reproducirse de forma automática al abrir la página. Hay otros atributos también, como width, height, loop, poster, preload y audio.

3 Aunque MP4 es el formato más utilizado, si queremos que el video pueda verse en la mayoría de navegadores deberemos incluir Ogg para que los usuarios de Firefox puedan visionar el video.

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark y Silverlight son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para  Microsoft por Avlade: www.Avlade.com

©2011  Microsoft Corporation.

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html