PROYECTO FIN DE CARRERA
Accesibilidad a los contenidos
audiovisuales en la Web a través
de HTML5
Autor:
Alberto Sánchez-Heredero Pérez
Tutor:
Lourdes Moreno López
Leganés, Julio de 2011
iii
Título: Accesibilidad a los contenidos audiovisuales en la Web a través de HTML5
Autor: Alberto Sánchez-Heredero Pérez
Director: Lourdes Moreno López
EL TRIBUNAL
Presidente:
Vocal:
Secretario:
Realizado el acto de defensa y lectura del Proyecto Fin de Carrera el día 1 de Julio de
2011 en Leganés, en la Escuela Politécnica Superior de la Universidad Carlos III de
Madrid, acuerda otorgarle la CALIFICACIÓN de
VOCAL
v
Agradecimientos
A mis padres por el apoyo que me han dado durante todos estos años de carrera, sin olvidarme por supuesto de mi hermano y mi novia que siempre han estado conmigo en los momentos difíciles.
A Lourdes por todo el ánimo que me ha dado durante la realización de este proyecto de fin de carrera, que a pesar de los retrasos e inconvenientes que hemos tenido, ha sido un placer haber trabajado con ella.
vii
Resumen
Desde hace años asistimos a un continuo incremento de contenido audiovisual como vídeo en la Web, por ello que sea muy importante tener en cuenta requisitos de accesibilidad al incluirlo en la web para que todos los usuarios puedan acceder al contenido independientemente de sus características de acceso y contextos diversos de uso. Un contenido vídeo en la web debe ir acompañado de manera sincronizada de alternativas como subtitulado y audiodescripción entre otros, pero además el agente de usuario (reproductor) a través del cual los usuarios acceden debe ser también accesible. Como solución universal está el nuevo estándar HTML5 aun en desarrollo que proporciona algunas ventajas para la accesibilidad en lo que a contenido audiovisual se refiere. En este proyecto se presenta un estudio de estándares a cumplir para incluir contenido audiovisual en la Web, se valora si el nuevo estándar HTML5 da soporte y como caso de estudio se ha desarrollado un reproductor accesible en HTML5.
Palabras clave
: Accesibilidad web, multimedia, vídeo, discapacidad, diversidad
funcional, diseño web, desarrollo web, agente de usuario web, reproductor,
estándares.
ix
Abstract
In recent years, we have seen a continuous increase of audiovisual content like video on the Web. It is very important to consider accessibility requirements when the video is included in the web page enabling users to have access to the content, regardless of users access features and diverse contexts of use. Video content on the Web must be accompanied by synchronized alternatives such as caption and audio description, furthermore the user agent (player) must be accessible too. A universal solution is the new standard HTML5, although it is still under development. It provides some advantages for accessibility as far as audiovisual content is concerned. In this project, a study is presented, which includes standards and requirements that need to be fulfilled when there is audiovisual content on the Web. A case study with a web accessible player has been developed in order to assess if the new HTML5 standard really offers accessibility requirements support.
Keywords
: Web accessibility, multimedia, video, disability, Web design, Web
developed, User agent, player, standards.
Índice general 1. Introducción y objetivos ... 1 1.1. Introducción ... 1 1.2. Introducción y motivación ... 2 1.3. Objetivos ... 2 1.4. Estructura de la memoria ... 3 2. Introducción a HTML5 ... 5
2.1. HyperText Markup Language 5 (HTML5) ... 6
2.2. Estándares de la Web. HTML4.X vs HTML5 ... 6
2.3. Algunas características que aporta HTML5 ... 8
2.4. Nivel de implementación en los navegadores de HTML5 ... 9
2.5. Especificación borrador HTML5.0 ... 12
2.6. HTML5 y elementos relacionados con el contenido multimedia ... 21
3. Accesibilidad Web ... 31
3.1. Legislación y normativa relativa a la accesibilidad ... 31
3.2. Iniciativa de Accesibilidad Web (WAI) ... 33
3.3. Accesibilidad al contenido multimedia en la Web ... 43
4. Accesibilidad en elementos relativos al contenido multimedia en HTML5 ... 55
4.1. Elemento <video> ... 55
4.2. Elementos semánticos ... 56
4.3. Elemento Track ... 60
5. Diseño y desarrollo de interfaz basado en HTML5 ... 61
5.1. Requisitos de accesibilidad de un contenido multimedia en la Web ... 62
5.2. Diseño de Interfaz que reproduzca contenido multimedia accesible ... 62
5.3. Implementación en HTML5 de la Interfaz. ... 64
5.4. Evaluación. Pruebas de acceso en distintos agentes de usuario ... 113
6. Presupuesto... 121
7. Conclusiones y líneas futuras ... 123
Glosario ... 127
Referencias ... 129
Índice de figuras
Figura 1: Doctype HTML4.01 ... 12
Figura 2: Doctype HTML5 ... 12
Figura 3: Elemento raíz HTML4.01 ... 13
Figura 4: Elemento raíz HTML5 ... 13
Figura 5: Esquema de etiquetas HTML5 ... 14
Figura 6: Video en HTML4 ... 23
Figura 7: Video avanzado en HTML5 ... 23
Figura 8: Video simplificado en HTML5 ... 23
Figura 9: Video múltiples formatos HTML5 ... 24
Figura 10: Audio en HTML4.01 ... 25
Figura 11: Audio en HTML5 ... 25
Figura 12: Múltiples formatos de audio en HTML5 ... 26
Figura 13: Elemento Canvas ... 27
Figura 14: Código JavaScript para Canvas ... 27
Figura 15: Segundo código JavaScript para Canvas ... 27
Figura 16: Ejemplo Canvas ... 27
Figura 17: Resultado del ejemplo Canvas ... 27
Figura 18: Ejemplo del elemento track de HTML5 ... 28
Figura 19: Código para incluir en la cebecera el reproductor LeanBack Player HTML5 ... 29
Figura 20: Código del reproductor LeanBack Player HTML5 ... 30
Figura 21: Boceto de la interfaz en HTML5 ... 64
Figura 22: Controles nativos incluidos en HTML5... 65
Figura 23: Cabecera de la página HTML5 ... 68
Figura 24: Código HTML5 de navegación e introducción ... 68
Figura 25: Código CSS para navegación ... 69
Figura 26: Resultado final de título y navegación ... 69
Figura 27: Código HTML para la introducción ... 70
Figura 28: Código CSS para la introducción... 70
Figura 29: Resultado final de la introducción ... 70
Figura 30: Código HTML para la información principal ... 72
Figura 31: Código CSS para cabeceras h2 ... 72
Figura 32: Código HTML5 de <video> ... 74
Figura 33: Resultado del vídeo en HTML5... 74
Figura 34: Código JavaScript de control por teclado ... 75
Figura 35: Código JavaScript de reproducción del video ... 76
Figura 36: Código JavaScript para mostrar los controles del video ... 76
Figura 37: Código JavaScript para ocultar los controles del video ... 77
Figura 38: Código HTML5 del botón de reproducción inicial ... 77
Figura 39: Código CSS del botón de reproducción inicial ... 77
Figura 40: Resultado final del botón de reproducción inicial ... 77
Figura 41: Código JavaScript para la reproducción del video inicial ... 78
Figura 42: Código HTML5 para etiqueta de controles ... 78
Figura 43: Código HTML5 para la barra de progreso ... 78
Figura 44: Código CSS de la barra de progreso ... 79
Figura 46: Código JavaScript para la barra de progreso ... 80
Figura 47: Código JavaScript de obtener posición absoluta ... 81
Figura 48: Resultado final para la barra de progreso ... 81
Figura 49: Código HTML5 para el botón de reproducir/pausar ... 81
Figura 50: Código CSS para el botón de reproducir/pausar ... 81
Figura 51: Código JavaScipt para el botón de reproducir/pausar... 82
Figura 52: Resultado final para el botón de reproducir/pausar ... 83
Figura 53: Código HTML5 para el botón de parar video ... 83
Figura 54: Código CSS para el botón de parar video ... 83
Figura 55: Código JavaScript para parar el video ... 83
Figura 56: Resultado final para el botón de parar video ... 83
Figura 57: Código HTML5 para el botón de retroceso del video ... 84
Figura 58: Código CSS para el botón de retroceso del video ... 84
Figura 59: Código JavaScript para retroceder el video ... 84
Figura 60: Resultado final para el botón de retroceder video ... 84
Figura 61: Código HTML5 para avanzar el video ... 85
Figura 62: Código CSS del botón de avance del video ... 85
Figura 63: Código JavaScript para avanzar el video ... 85
Figura 64: Resultado final para el botón de avanzar video ... 86
Figura 65: Código HTML5 para el tiempo ... 86
Figura 66: Código CSS para el tiempo ... 86
Figura 67: Código JavaScript para el tiempo ... 87
Figura 68: Resultado final para el tiempo de video ... 87
Figura 69: Código HTML5 para silenciar el video ... 87
Figura 70: Código CSS del botón para silenciar el video ... 88
Figura 71: Código JavaScript para silenciar video ... 88
Figura 72: Resultado final para el botón de silenciar video ... 89
Figura 73: Código HTML5 del botón para bajar el volumen 10% ... 89
Figura 74: Código CSS del botón para bajar volumen 10% ... 89
Figura 75: Código JavaScript para bajar el volumen del video un 10% ... 90
Figura 76: Resultado final para el botón para bajar el volumen del vídeo un 10%... 90
Figura 77: Código HTML5 del botón para subir el volumen un 10% ... 90
Figura 78: Código CSS del botón para subir el volumen 10% ... 91
Figura 79: Código JavaScript para subir el volumen del video un 10% ... 91
Figura 80: Resultado final para el botón para subir el volumen del vídeo un 10%... 91
Figura 81: Código HTML5 de la barra de control del volumen... 92
Figura 82: Código CSS para la barra de control del volumen ... 92
Figura 83: Código JavaScript para la barra de control de volumen ... 93
Figura 84: Resultado final para la barra de control de volumen ... 94
Figura 85: Código HTML5 del botón para habilitar/deshabilitar subtitulos ... 94
Figura 86: Código CSS del botón para habilitar/deshabilitar subtítulos ... 94
Figura 87: Código JavaScript para habilitar/deshabilitar subtítulos... 95
Figura 88: Resultado final para el botón de habilitar/deshabilitar subtítulos ... 95
Figura 89: Código HTML5 del botón para habilitar/deshabilitar audiodescripción ... 95
Figura 90: Código CSS del botón para habilitar/deshabilitar audiodescripción ... 96
Figura 91: Código JavaScript del botón para habilitar/deshabilitar audiodescripción ... 96
Figura 92: Resultado final para el botón de habilitar/deshabilitar audiodescripción ... 96
Figura 94: Código CSS del botón para habilitar/deshabilitar audio del video ... 97
Figura 95: Código JavaScript del botón para habilitar/deshabilitar audio del video... 97
Figura 96: Resultado final para el botón para habilitar/deshabilitar audio del video ... 97
Figura 97: Código HTML5 del botón de ayuda ... 98
Figura 98: Código CSS del botón de ayuda ... 98
Figura 99: Código JavaScript del botón de ayuda ... 98
Figura 100: Código HTML5 del elemento de ayuda ... 99
Figura 101: Código CSS del elemento de ayuda ... 99
Figura 102: Resultado final para el botón de mostrar ayuda ... 99
Figura 103: Código HTML5 de los botones de idiomas de subtitulos ... 100
Figura 104: Código CSS de los botones de idiomas de subtítulos ... 100
Figura 105: Código JavaScrpipt de los botones de idiomas de subtítulos ... 101
Figura 106: Resultado final para los botones de idioma de subtítulos ... 101
Figura 107: Resultado final de la barra de controles ... 101
Figura 108: Código HTML5 de la audiodescripción ... 102
Figura 109: Código CSS de la audiodescripción... 102
Figura 110: Código HTML5 de la etiqueta <aside> ... 103
Figura 111: Código CSS para la etiqueta <aside> ... 104
Figura 112: Resultado final de la etiqueta <aside> ... 105
Figura 113: Código HTML5 del pie de página ... 105
Figura 114: Código CSS del pie de página ... 106
Figura 115: Resultado final del pie de página ... 106
Figura 116: Fichero XML para introducir subtítulos ... 107
Figura 117: Código JavaScript para leer un archivo XML ... 108
Figura 118: Código JavaScript para leer subtítulos de una archivo XML ... 109
Figura 119: Código JavaScript para mostrar subtítulos en un video ... 110
Figura 120: Ejemplo de CSS para un subtitulo(1) ... 111
Índice de tablas
Tabla 1: Índice de implementación de elementos HTML5 por navegadores ... 11
Tabla 2: Índice de implementación de atributos HTML5 por navegadores ... 11
Tabla 3: Formatos soportados en <video> ... 22
Tabla 4: Formatos soportados en <audio> ... 25
Tabla 5: Niveles de conformidad en WCAG 1.0 ... 34
Tabla 6: Estructura de las WCAG 1.0 y WCAG 2.0 ... 35
Tabla 7: Correspondencia de las pautas WCAG1.0 con las WCAG2.0 en relación a los contenidos audiovisuales ... 44
Tabla 8: Técnicas del WCAG 2.0 y SMIL para la pauta 1.2 ... 47
Tabla 9: Información a presentar al usuario ... 52
Tabla 10: Tabla resumen para diseñadores sobre cómo ofrecer accesibilidad a los contenidos audiovisuales en la Web [Moreno L. et al., 2008 a] ... 53
Tabla 11: Tabla de soporte de HTML5 para Mozilla Firefox versión 4.0 ... 115
Tabla 12: Tabla de soporte de HTML5 para Internet Explorer 9 Beta ... 116
Tabla 13: Tabla de soporte de HTML5 para Chrome 10 ... 117
Tabla 14: Tabla de soporte de HTML5 para Opera ... 118
Tabla 15: Tabla de soporte de HTML5 para Safari ... 119
Capítulo 1
1. Introducción y objetivos
1.1.
Introducción
En la última década, hemos sido testigos del gran cambio que ha provocado Internet en nuestras vidas. No teníamos ni idea de cómo un invento que se creó para unos pocos, ha sido una revolución para muchos y que ha hecho que Internet sea un elemento imprescindible para el día a día, ya sea en el ámbito personal como en el profesional.
En un principio, el origen de Internet fue la investigación de computadores más avanzados por parte del Departamento de Defensa de los EE.UU, pero con el paso del tiempo se fue popularizando y extendiendo a lo largo del mundo y se hizo público con el fin de darse a conocer y hacerse accesible para cualquier ciudadano.
Poco a poco se fueron investigando las características que ofrecía y fueron surgiendo lenguajes para dar soporte a esta nueva forma de comunicarse, y el principal fue el lenguaje de Marcado de Hipertexto o HyperText Markup Language (HTML). Éste nuevo lenguaje dio la posibilidad de compartir información con el resto del mundo, principalmente por texto, ya que éste lenguaje está basado en texto (o hipertexto como se denomina técnicamente), pero con el paso del tiempo surgieron nuevos lenguajes destinados a complementar al HTML, como son JavaScript, Flash, etc. que permitieron compartir diversos tipos de información, ya no sólo de texto sino imágenes, fotos, videos, animaciones, juegos, es decir, contenido multimedia que dotaba a los sitios web de un contenido más vistoso y agradable de compartir que el mero hecho de leer sin más.
Por tanto, todos estos nuevos lenguajes necesitaban unas normas que los programadores siguiesen para que la Web no sea un caos. Para garantizar la accesibilidad en la Web existe la Web Accessibility Initiative (WAI), iniciativa del World Wide Web (W3C) que ofrece unas pautas y reglas para permitir el acceso a contenido web a todo tipo de usuarios además de proponer normas a seguir para la estructura de una página web, y proporciona estándares de
2
distintos lenguajes como HTML, CSS (Cascading Style Sheets), etc., fundamentales para una buena construcción de sitios web. El Consorcio W3C es una comunidad internacional donde las organizaciones miembro, personal y el público en general, trabajan conjuntamente para desarrollar estándares web [W3C, 2011 c]. Desde entonces, la accesibilidad se convirtió en algo indispensable, y además de que una página web tenga un diseño de interfaz atractivo, su contenido debe ser accesible para cualquier tipo de persona.
El objetivo de este proyecto es investigar la accesibilidad en la Web en relación al contenido multimedia de tipo audiovisual en una nueva versión de lenguaje de marcado aun en desarrollo y en camino de estandarizarse como es el nuevo HTML5. Se describirá de manera extensa, y se indicarán las nuevas características que aporta a la accesibilidad en la Web, profundizando en las nuevas formas que propone para ofrecer recursos de accesibilidad en el contenido audiovisual.
1.2.
Introducción y motivación
En este documento, memoria de proyecto de fin de carrera, se va a ofrecer documentación sobre la accesibilidad web en el ámbito de la multimedia, más concretamente en un elemento que es de sobra conocido por cualquier persona asidua a la Web, y que últimamente es más común de lo que fue hace unos cuantos años, y éste es el video.
El vídeo en la Web se ha convertido en una forma muy fácil y rápida de transmitir información de unas personas a otras, sobre todo gracias al auge de sitios web especializados en la difusión de vídeos, siendo el más conocido YouTube1. Uno de los objetivos de este tipo de sitios web, sería el de llevar su contenido al mayor número de personas posibles, independientemente de su habilidad y características, es decir, que sea lo más accesible posible.
Accesibilidad en el ámbito web, significa que cualquier persona que quiera acceder a un contenido en la Web, no tenga ninguna barrera o impedimento para acceder a dicho contenido, en este caso, contenido multimedia. Estas barreras pueden ser múltiples debido a las características de acceso del usuario, pero también pueden ser barreras de software como código mal implementado o no dirigido a la accesibilidad, como la ausencia de subtitulado en video, audiodescripción o factores técnicos como acceso por teclado o la obligación de contar con JavaScript en el navegador, etc.
La motivación que ha llevado a la realización de este proyecto es la búsqueda de la accesibilidad a través de nuevas tecnologías, más concretamente de HTML5. Lo que se busca es una nueva solución tecnológica para aportar subtítulos y audiodescripción dirigida a personas con discapacidad, ya que debido a la ingente cantidad de información que hay actualmente de contenido multimedia, concretamente en video, es necesario que esta información sea accesible a todo tipo de personas.
1.3.
Objetivos
Los objetivos que se persiguen en este proyecto son los siguientes:
3 1) Llevar a cabo un estudio de la cuestión de los siguientes puntos principalmente:
a) Introducción al HTML5 b) Accesibilidad web
c) Accesibilidad al contenido audiovisual en la Web.
2) Llevar a cabo un estudio extenso de la especificación HTML5
3) Elaborar un análisis de la accesibilidad en relación al nuevo estándar HTML5, focalizado en el contenido audiovisual
4) Realizar un caso de prueba para probar los resultados obtenidos tras investigar en accesibilidad a través de HTML5 en el contenido audiovisual en la Web. Desarrollo de una interface en HTML5
a) Diseño y desarrollo de una interfaz implementada en HTML5 para la reproducción de contenido audiovisual accesible: Análisis de requisitos, diseño e implementación. b) Validación de dicho interfaz. Llevar a cabo pruebas para comprobar su funcionamiento
en distintos agentes de usuario web. Valoración del nivel de implementación. c) Discusión de los datos.
5) Conclusiones y líneas futuras
1.4.
Estructura de la memoria
En este documento se han distribuido los contenidos de la siguiente manera:
En este capítulo uno se ha introducido el tema principal del proyecto, presentando la motivación que ha llevado a la realización de este proyecto fin de carrera, además de indicar los objetivos que se han perseguido.
El estado de la cuestión se incluye en los capítulos dos, tres y cuatro. En el capítulo dos se presenta el lenguaje de marcado en la Web en su nueva versión HTML5. Pasando a presentar en el capítulo tres distinta información relativa a la accesibilidad web como estándares y un estudio específico de la accesibilidad a los contenidos audiovisuales en la Web. En el capítulo cuatro se analiza el estándar HTML5 en relación a los elementos destinados a mejorar la accesibilidad en la Web.
Como caso práctico para aplicar todos los conceptos vistos de manera teórica en los anteriores capítulos, se presenta en el capítulo cinco una interfaz implementada en HTML 5 para reproducir de manera accesible contenido audiovisual como vídeo en la Web.
En el capítulo seis se incluye un presupuesto correspondiente a la realización de este proyecto. Finalizaremos con unas conclusiones y líneas futuras en el capítulo siete.
Capítulo 2
2. Introducción a HTML5
En este capítulo se presenta una introducción al estado de la cuestión en el que se encuentran la tecnología base que se va a tratar en este proyecto principalmente, el HTML, siendo su versión más reciente, y actualmente en borrado camino de convertirse en estándar, HTML5 [W3C, 2011 a]. Se ofrecerá una introducción de lo que fue la versión anterior HTML4.01 y sus principales diferencias con HTML5, que son varias y significativas.
Una de las diferencias que hay con este nuevo estándar es la creación de nuevas etiquetas que van a dar más significado semántico a la Web, como etiquetas específicas para diferentes zonas de un sitio web, como por ejemplo para el encabezado, menús laterales, pies de página, y cuerpo principal, todas ellas con una etiqueta especialmente creada para la ocasión. También se debe comentar las posibles futuras aplicaciones que tendrá HTML5, como la Web semántica, que gracias a estas nuevas etiquetas se dará un mayor significado a la Web y dotará a los motores de búsqueda una mayor facilidad a la hora de encontrar resultados más ajustados a lo que el usuario demande.
Una de las características más esperadas y que más expectación ha dado es la estandarización en la forma de incluir vídeo y audio en la Web, que permita la inclusión de estos elementos multimedia sin necesidad de ninguna aplicación externa, lo que facilita enormemente un acceso más accesible y usable a estos contenidos en la Web, y que más adelante se verá con más detalle.
Otro importante factor a considerar es cómo se está implementando el HTML5 en los distintos agentes de usuario web (navegadores), ya que este software es una pieza fundamental para un correcto acceso de un sitio web. Se podrá observar mediante un estudio que se incluye, el nivel de aceptación de los navegadores con el nuevo estándar HTML5.
Otra de las características más interesantes que incorpora HTML5 según objetivos del W3C es la posibilidad de incluir subtítulos a nivel de código, para facilitar al desarrollador la introducción de estos recursos. Actualmente esta funcionalidad no ha sido implementada, pero se espera que un futuro se pueda contar con este esperado recurso. Esta funcionalidad es uno de los pilares fundamentales para otorgar de accesibilidad al contenido multimedia, por lo que mientras tanto, se puede aportar esta funcionalidad mediante otras tecnologías como JavaScript
6
o Flash, tal como se ha tenido que hacer en este proyecto con la utilización de tecnología JavaScript.
2.1.
HyperText Markup Language 5 (HTML5)
HTML5 es la nueva versión del lenguaje de marcado que se usa para estructurar páginas web, que actualmente está en desarrollo y no está terminado y con el paso del tiempo contaremos gracias a él con características nuevas y modificaciones que mejorará significativamente este nuevo estándar.
En esta sección se presenta una breve introducción de las diferencias entre la anterior versión HTML4.01 y la nueva de HTML5, para a continuación explicar en profundidad este nuevo estándar.
2.2.
Estándares de la Web. HTML4.X vs HTML5
HTML4 [W3C, 1998] y las diferentes versiones de la misma familia, ha sido un lenguaje muy longevo que ha tenido que adaptarse y renovarse, para mostrar el contenido de las páginas web tal y como lo conocemos ahora. Está claro que todo lo que podemos encontrar en una página web hoy en día, no estaba hace 10 o 15 años, cuando Internet no estaba tan extendido y no se sabía cómo podría afectar a nuestras vidas hoy en día, pero lo más importante que ha dado la Web es la expansión y la posibilidad a cualquier ciudadano, de crear su propia página web para plasmar sus ideas y sus opiniones. Para ello ha tenido que adaptarse para ofrecer lo nuevo que las nuevas tecnologías son capaces de incluir en la web.
El lenguaje HTML5 [W3C, 2011 a] es la nueva versión del lenguaje con el que estará escrita la Web, que es más que una renovación del HTML4.01 [W3C, 1999 a] que con el paso del tiempo se ha quedado obsoleto.
Con este nuevo borrador se pretende crear un estándar que poco a poco sustituya al anterior, introduciendo mejoras y eliminando elementos de la anterior versión que han quedado obsoletos, y por lo tanto, ya no se usan o han quedado anticuados para dar soporte a los nuevos contenidos web que se están desarrollando y a los tiempos actuales.
Lo que HTML5 intenta aportar al desarrollo web, es un lenguaje más actual y más intuitivo a la hora de estructurar una página web, y aportar algunas mejoras como la forma de incrustar videos e imágenes. Las etiquetas han sido cambiadas por otras más representativas y no se abusa tanto de las etiquetas <DIV> para estructurar de forma lógica el código, sino que bastaría con un nombre de etiqueta específico. Es decir, en lugar de estar obligados a crear una división con el nombre como identificador, ahora bastaría con etiquetas específicas que hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores.
Etiquetas como <Font> y <center>que ya no sirven en HTML5 y pasan a definirse exclusivamente con las Hojas de Estilo o CSS [W3C, 2008 a]. Otras como <b> que se siguen soportando pero que ya no se usan como antes.
Se ha orientado también para un mejor acceso multimedia. Para esto se ha creado la etiqueta <video>, que permite la reproducción de vídeo sin la necesidad de instalar ningún
plug-7 in, ya sea QuickTime, RealPlayer o el más extendido Flash [Adobe, 2009], aunque de momento se está buscando un códec para que esto llegue a hacerse realidad. De momento sí puede usar Flash y cualquier otro plug-in o códec para reproducir videos, pero el objetivo de crear una etiqueta <video> es unificar todos esos códec en uno sólo.
Por supuesto no va a ser fácil, porque detrás hay muchos intereses económicos interesados en que el códec más usado sea el de una determinada empresa que quiera hacerse con todo el mercado de reproducción de video. Lo que plantea HTML5 es que la reproducción de vídeo sea accesible para todo el mundo, y sobretodo cómodo al no necesitar de ninguna aplicación externa para poder funcionar. Por otro lado, esta cuestión llevaría a que el estándar HTML5 dé soporte para que se pueda cumplir con el estándar UAAG [W3C UAAG, 2005] para requisitos de accesibilidad en el agente de usuario web.
Lo más novedoso que introduce este nuevo estándar de HTML, es la posibilidad de la creación de dibujos o animaciones de cualquier tipo al servicio de la imaginación de los desarrolladores, gracias a la etiqueta <canvas>, que literalmente significa “lienzo”, que abre un nuevo mundo de posibilidades a lo que a diseño gráfico de sitios web se refiere. La ventaja que esto conlleva es que no se necesita ningún tipo de plug-in para el uso de esta característica de HTML5, pero sí que el navegador sea totalmente compatible con este nuevo estándar. Sin embargo, puede producir problemas de accesibilidad al ser requerido un texto alternativo a este elemento gráfico.
En cuando a la aceptación que tienen los navegadores con HTML5 hay para todos los gustos. Hay navegadores que soportan todas sus capacidades y hay otros que no aceptan ninguna, pero es cuestión de tiempo que se acabe soportando esta nueva versión. A modo de prueba, hay una página2 que comprueba la compatibilidad del navegador con HTML5 y saca una puntuación orientativa en medida de lo que soporte.
De los navegadores más usados y conocidos, Google con su navegador Chrome y Safari, soporta la gran mayoría de lo ofrecido por HTML5, seguido por la última versión de Firefox, que a pesar de ser uno de los navegadores más utilizados, no alcanza el nivel de Chrome y Safari por poco. Le sigue Opera que en su última versión 10.5 subsana las carencias del 10 acercándose un poco más a Firefox en el S.O. Windows, ya en Mac todavía se queda en la anterior versión.
Y en el otro lado tenemos a Internet Explorer de Microsoft que todavía en ninguna de sus versiones ni en ningún S.O., soporta HTML5. El navegador Internet Explorer representa una gran cuota de mercado en lo que al uso de navegadores en Internet se refiere, ya que viene instalado con el S.O. Windows de serie, lo que significa que puede que sea uno de los navegadores más utilizados, frente a sus competidores Firefox o Chrome, aunque han ido mermando su dominio en este sector, pero aún representa una gran cuota de mercado. En su última versión Internet Explorer 8, aún no soporta esta nueva versión de HTML pero ha sido anunciado que la siguiente versión 9 sí lo soportará, lo que será la aceptación por parte de una de las empresas más importantes del mundo como es Microsoft, del nuevo estándar HTML5 y por tanto su consolidación.
8
Para más información, el estado de aceptación de los navegadores se describe con más profundidad en el apartado 3.3.
2.2.1. Fragmentación entre plataformas: ¿Flash o HTML5?
Últimamente se está hablando mucho sobre si HTML5 va a ser una alternativa real a Flash en el campo del vídeo. Actualmente Flash está en prácticamente en todo elemento relacionado con Internet, ya sea multimedia(videos, animaciones, etc..) como juegos online, y presente en gran parte de los ordenadores conectados a internet, ya que es necesario para reproducir la gran mayoría de elementos multimedia y además lleva mucho más tiempo disponible que HTML5. Por otro lado, una de las empresas más en auge de los últimos años, Apple [Apple, 2011 a], ha declarado continuamente que no dará soporte a Flash en su sistema operativo iOS, dando su apoyo a HTML5 considerándolo como el futuro del vídeo en Internet. El gran problema en este sector es el códec, ya que al estar actualmente en borrador, el nuevo estándar HTML5 no estará listo en unos años, por lo que habrá que esperar para resolver este problema, mientras algunas empresas declaran su apoyo a uno o a otro decodificador-codificador de vídeo. De momento la resolución a esta batalla por el control del vídeo en Internet es incierta, ya que el proceso de sustituir a una tecnología con unas capacidades tan amplias, y además tan aceptada y extendida en el los ordenadores del mundo, conlleva un tiempo de adaptación a un nuevo estándar.
La portabilidad es una de las características que muchos desarrolladores buscan. La de programar una aplicación en un lenguaje en una plataforma y sirva para cualquiera. Esto es lo que HTML5 propone, y aunque está lejos de cumplirse, este nuevo estándar se acerca bastante a lo que los desarrolladores desean.
En los últimos meses se anunció el lanzamiento, todavía en fase de prueba experimental, de una herramienta innovadora por parte de Adobe basada en tecnología AIR con el fin de conseguir compatibilidad tanto en sistemas Windows como Mac OS X. Esta herramienta se llama Wallaby [Adobe, 2011], y permite al desarrollador la conversión de Flash a HTML5 de una forma muy sencilla gracias a una interfaz intuitiva. Con esta herramienta se permite el soporte de algunos dispositivos que antes no permitía la tecnología de Adobe como son los sistemas operativos iOS de Apple y con el fin de cumplir con todos los estándares.
2.3.
Algunas características que aporta HTML5
El nuevo estándar HTML5 aporta nuevas funcionalidades, que quizá no estén disponibles actualmente pero sí se han dado los primeros pasos para incluir las siguientes nuevas características a la Web.
2.3.1. Web Semántica
La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Al dotar a la Web de más significado y, por lo tanto, de más semántica, se pueden obtener soluciones a problemas habituales en la búsqueda de información gracias a la utilización de metadatos semánticos y ontológicos en una
9 infraestructura común, mediante la cual, es posible compartir, procesar y transferir información de forma sencilla. Esta Web extendida se apoya en lenguajes universales que resuelven los problemas ocasionados por una Web carente de semántica en la que, en ocasiones, el acceso a la información se convierte en una tarea difícil y frustrante [W3C, 2010 a].
En esta línea, HTML5 incluye elementos que permiten añadir semántica de la página web más precisa para los buscadores, para que estos la comparen con la que el usuario quiere encontrar y así se puedan obtener resultados más relevantes.
2.3.2. Geolocalización
Una de las novedades que ofrece HTML5 son las posibilidades de geolocalización a través de un punto de acceso a internet, más comúnmente conocido como Wi-Fi, en los que su uso no está bien definido pero que con el tiempo se podrá implementar en diversos servicios en redes sociales tan de moda últimamente, o para buscar negocios rápidamente sabiendo nuestra posición física. Esta funcionalidad se implementa mediante APIs que interactúan con el navegador obteniendo su IP y a través de tecnologías como JavaScript conseguir la posición geológica del usuario. Esto acarrea problemas de seguridad y privacidad, ya que enviar la posición física de un usuario no suele ser muy seguro, pero esta funcionalidad solo se podrá aprovechar si dicho usuario da su permiso expreso para que la API pueda calcular su localización geológica.
2.3.3. Aplicaciones offline
Uno de los conceptos que renueva HTML5 es la posibilidad de trabajar con aplicaciones web pero de manera offline. Lo que esta nueva funcionalidad permite es la de acceder a aplicaciones offline, sin conexión a internet, siendo necesario previamente conectarse por primera vez a dicha aplicación o página y el navegador descargará los ficheros necesarios de la página a la que se ha accedido, abriendo la posibilidad de poder volver a acceder a esta aplicación o página web sin la necesidad de conexión a Internet.
Si bien ya en HTML4.01 hay páginas que pueden visualizarse sin estar conectados a Internet (si previamente fue descargada), el uso de aplicaciones web offline se hace mucho más complejo. HTML5 plantea una revolución en este tema. Google, el gigante de los buscadores y de las aplicaciones en línea es una de las empresas que apuesta por HTML5 y ha mostrado especial atención en esta característica, para poder brindar a los usuarios que eligen sus servicios, nuevas opciones para trabajo offline, que irán perfeccionándose a medida de que HTML5 logre mayor aceptación y compatibilidad con los navegadores.
2.4.
Nivel de implementación en los navegadores de
HTML5
Las Tablas 1 y 2 informan al desarrollador de los elementos y atributos presentes en dichas tablas respectivamente, que están disponibles en la nueva versión HTML5 y soportados
10
por los distintos agentes de usuario web o navegadores. Estas tablas se han elaborado a partir de la información proporcionada en la página3, la cual se actualiza mensualmente o cada vez que sale una nueva versión de los navegadores de los aquí mencionados. .
Después de testear la compatibilidad con los navegadores principales y sus versiones más recientes, quedaba por comprobar esta compatibilidad en versiones Beta, no completas pero sí avanzadas de estos navegadores, y los elegidos fueron Mozilla Firefox 4.0 Beta 7 e Internet Explorer 9.0 Beta. El resultado de comprobar la compatibilidad con HTML5 en estas nuevas versiones Beta de los navegadores más populares fue excelente.
Las anteriores versiones aceptaban muy poco o nada de los nuevos elementos de HTML5, por lo que dan un cambio de rumbo importante, en cuanto a la aceptación y expansión de éste nuevo estándar. De momento, como versiones Beta que son, no tienen una compatibilidad completa pero sí conforman un aceptable número de elementos, lo suficiente como para aceptar las etiquetas o funcionalidades más esperadas de HTML5, que son <video> y <audio>.
Lo que es evidente es que HTML5 se va a imponer y es casi obligatorio que los navegadores acaben implementándolo completamente, ya que las ventajas que ofrecen con el anterior son muy significativas.
Lo que los responsables de dicha página quieren dejar claro, es que no intentan persuadir de no usar el nuevo estándar HTML5 para desarrollar páginas web, sino informarle de los posibles problemas que podrá tener a la hora de implementar unos u otros elementos.
Actualmente la versión definitiva de Mozilla Firefox 4.0, ya no es Beta, y proporciona una excelente aceptación de HTML5 siendo prácticamente igual a mejor que su anterior versión. Mientras tanto, Internet Explorer aún no ha lanzado la versión definitiva 9.0, por lo que no se puede comprobar si la aceptación de HTML5 puede rivalizar con Firefox.
Ésta tabla está actualizada a fecha de 11/03/2011: Elementos
HTML5
Chrome 10 Firefox 4.0 RC
IE9 RC Opera 11 Safari/ Webkit r74232 Elemento article Elemento aside Elemento audio Elemento canvas Elemento datalist – – Elemento details – – – – – Elemento figcaption 3 www.html5accesibility.com
11 Elemento figure Elemento footer Elemento header Elemento hgroup – – – – – Input color – – – – Input date – – – Input date an time – – – Input local date and time
– – – Input e-mail – – – – Input month – – – Input number – – – Input range – – Input search Input telephone – – – Input time – – – Input url – – – – Input week – – – Menú > context menú – – – – – Menú > list – – – – – Menú > toolbar – – – – – Elemento meter – – – Elemento nav Elemento output – – – – Elemento progress – – Elemento section Elemento summary – – – – – Elemento video
Tabla 1: Índice de implementación de elementos HTML5 por navegadores
Atributos HTML5
Chrome 10 Firefox 4.0 b10
IE9 Beta Opera 11 Safari/ Webkit r74232 Atributo hidden – – – Atributo required – – – Atributo placeholder –
12
Leyenda de Tabla 1 y 2:
“no soportado” significa que la característica está implementada por el navegador, pero el soporte de accesibilidad requerido no está implementado.
“parcialmente soportado”, significa que la característica está implementada pero el soporte de accesibilidad está parcialmente implementado.
–
“no implementado”, significa que la característica todavía no está implementada por el navegador.
“soportado” , significa que el navegador expone información de la característica a través de un acceso a la API y si la función es interactiva, puede funcionar con una amplia gama de tipos de dispositivos de entrada.2.5.
Especificación borrador HTML5.0
Esta nueva versión de HTML no es un lenguaje totalmente nuevo, sino que utiliza muchos elementos y conserva prácticamente idéntica la estructura de su anterior versión, pero con cambios sustanciales que le hacen ser más intuitivo y fácil a la hora de estructurar una página web.
Para elaborar un documento en HTML5 lo primero que se debe situar al principio es un DOCTYPE nuevo. Es muy similar a la anterior versión 4/4.01, pero esta vez es infinitamente más simple, bastaría con el código <!DOCTYPE html> siendo indiferente si se escribe en mayúsculas o minúsculas, lo que ahorra la memorización del DOCTYPE antiguo o tener que abrir un documento previo y copiarlo, y la gran ventaja es que es compatible con las anteriores versiones de HTML y XHTML, con ello se simplifica muchísimo la posible inclusión de estos estándares.
Antes de HTML5, un DOCTYPE que activa el modo estándar en todos los navegadores modernos lo podemos ver en la figura 1:
Figura 1: Doctype HTML4.01
Con HTML5 podemos conservar el anterior, pero seguramente que casi siempre se optará por el siguiente, ya que la simplicidad y la comodidad con el anterior es evidente, como muestra la figura 2:
Figura 2: Doctype HTML5
El elemento raíz de todo documento es la etiqueta <html> y ha venido acumulando elementos redundantes, quedando así en XHTML y mostrado en la figura 3:
<!DOCTYPE html> <!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
13
Figura 3: Elemento raíz HTML4.01
Pero ahora todos los elementos de HTML5 están en el mismo namespace y no hace falta repetir el idioma, mostrado en la figura 4:
Figura 4: Elemento raíz HTML5
2.5.1. Nuevas etiquetas
Como se ha venido introduciendo anteriormente una de las interesantes aportaciones es la facilidad al diseñar la estructura de un sitio web. Lo que hace esto más sencillo, es evitar el abuso de las etiquetas <DIV> para estructurar de forma lógica el contenido, y en su lugar se han creado etiquetas específicas para cada situación. [W3C, 2011], [W3Schools, 2010 d].
Las nuevas etiquetas son las siguientes:
<article>: representa un componente de la página o sitio web, con la intención de que pueda ser reutilizado y repetido. Sería un elemento perfecto para foros o blogs que cada día se añada información nueva o noticias.
<section>: representa una sección genérica de un documento o una aplicación. Podría agrupar contenido de un tema específico dentro de un artículo en que se pueda introducir, y que tenga sentido.
<aside>: representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente.
<header>: representa un grupo de artículos introductorios o de navegación. Normalmente se relaciona con el encabezado a una sección de la página, mediante la inclusión de etiquetas de título (h1-h6).
<nav>: representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación.
<footer>: representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
En la figura 5, podemos ver gráficamente cómo quedarían estas nuevas etiquetas en una página web esquemáticamente, comparándolo con la versión de HTML anterior y HTML5.
<html lang=”en”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
14
Figura 5: Esquema de etiquetas HTML5
Otras etiquetas nuevas:
<hgroup>: representa el encabezamiento de una sección. Se usa para agrupar los elementos h1-h6 cuando el encabezamiento tiene múltiples niveles, como sub-encabezados o títulos alternativos.
<time>: permite introducir la hora y fecha cuando se modifica o introduce información en la web, lo que permite saber al usuario cuando ha sido creado o modificado algo, y es muy útil a la hora de buscar ya que es más fácil encontrar lo más nuevo o lo más antiguo.
<progress>: lo usaremos cuando queramos representar el estado de cierto proceso, muy útil para cargas y descargas de archivos.
<meter>: se utilizará para indicar ciertas medidas dependiendo de los atributos, por ejemplo el tamaño del disco usado.
<mark>: se usa para indicar importancia al texto, o cuando queramos atraer la atención del usuario como si subrayamos un texto con un rotulador fluorescente.
<video>: es una de las etiquetas más nuevas más esperadas y más novedosas de este nuevo estándar. Permite introducir vídeo en el sitio web sin la necesidad de instalar ningún otro códec o aplicación externa. Se explicará con más detalle más adelante. <audio>: permite introducir pistas de audio con más facilidad que en la versión anterior
de HTML.
<canvas>: una de las grandes novedades junto con la etiqueta <video> que permite “dibujar” directamente en la pantalla del navegador, dando libertad tanto a los desarrolladores como a los usuarios en crear todo tipo de dibujos o decoraciones para su página web.
<details>: permite la posibilidad de dar información adicional sobre algún elemento si el usuario lo desea
15 <figure>: se utilizará para representar una imagen, o contenido relacionado entre sí o
grupo de elementos (texto o imágenes).
<legend>: es un elemento que se puede usar dentro de <figure>, que puede estar o no, y sirve como leyenda del contenido de su elemento padre.
<fieldset>: sirve para dibujar un rectángulo y agrupar el contenido dentro de ella. En este caso, si introducimos el elemento <legend> dentro de este otro elemento, podremos escribir el título de este contenido en el mismo rectángulo.
<ruby>: define anotaciones en letras y caracteres chinos.
<rt>: se usa dentro de la etiqueta <ruby>. Define una explicación o pronunciación de caracteres chuinos.
<rp>: es similar a <rt> pero define lo que los navegadores tienen que enseñar si no soportan la etiqueta <ruby>.
<keygen>: este elemento básicamente lo que hace es generar una clave privada y una pública para que el navegador y el servidor puedan comunicarse.
<summary>: define el encabezamiento de un elemento <details>.
<wbr>: sirve para evitar que el navegador no rompa palabras que puedan ser conflictivas o si son demasiado largas.
En el apartado de formularios, se han añadido nuevos elementos que son permitidos en el campo “type” por lo que, ahora los datos que se introduzcan en cada formulario serán más específicos y más reconocibles que antes. [W3Schools, 2010 c]
Los nuevos elementos son los siguientes:
<input type=”search”>: para cajas de búsqueda. <input type=”number”>: para sumar o restar números.
<input type=”range”>: para seleccionar un valor entre dos valores predeterminados. <input type=”color”>: seleccionar un color.
<input type=”tel”>: útil para números telefónicos. <input type=”url”>: útil para direcciones web. <input type=”email”>: para direcciones de email.
<input type=”date”>: para seleccionar un día del calendario. <input type=”month”>: meses.
<input type=”week”>: semanas. <input type=”time”>: fechas.
<input type=”datetime”>: para una fecha exacta, absoluta y tiempo. <input type=”datetime-local”>: para fechas locales y frecuencia.
Estos nuevos elementos vienen a sustituir al clásico “text” que poníamos en type para todo o casi todo que quisiésemos poner en un formulario. Lo que hace esto es mejorar la búsqueda a la hora de rellenar un campo, por ejemplo, si estamos rellenando un campo de tipo url, al empezar a rellenar nos saldrá una lista de las url que ya hemos visitado y así facilitar al buscador desde qué campo selecciona la lista.
2.5.2. Nuevos atributos:
Se han introducido nuevos atributos y características con los que dotar a los elementos del HTML5, algunos de ellos orientados a la accesibilidad:
16
Ping: Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace, dentro del elemento a. Por ejemplo, un uso práctico sería para estadísticas.
Target: Especifica el destino donde se va a abrir un enlace distinto a la ventana actual, y aplicable en <a>, <area>, <base>, <form> y <link>.
Autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página. Este atributo permite una mayor accesibilidad, ya que da la posibilidad de que cuando se carga la página, el foco se sitúe en un determinado elemento, por ejemplo, en la barra de búsqueda principal en una página de búsquedas en la Web.
Form: nuevo atributo relacionado con los elementos de formularios. Indica a qué formulario pertenece un elemento y permite poner dicho elemento en cualquier parte de una página.
Replace: atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sufra algún cambio.
Data: Para <form />, <select /> y <datalist />.
Required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio. Muy útil para indicar sin Javascript, que un campo es obligatorio a la hora de rellenar un formulario, y aplicando una mejor accesibilidad en dichos formularios.
Disabled: Para <fieldset />, permite desactivar el fieldset por completo, es decir, todos los hijos de dicho fieldest son desactivados.
Autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada. Estos atributos permiten una mayor accesibilidad, indicando al usuario el límite de información o datos que puede introducir en dichos elementos.
Scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped”, es decir, si añadimos este atributo en un elemento “style”, podremos aplicar solo un determinado estilo a un subárbol del documento, o lo que es lo mismo, a ese elemento y a sus hijos. Async: Para el elemento <script /> el ajax hecho atributo. Con este atributo
especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
Hidden: define la propiedad de que un elemento sea invisible pero ocupa el espacio que le correspondería.
Spellcheck (corrector ortográfico): indica si el contenido de un elemento debe ser pasado por el corrector ortográfico.
Subject: especifica el ítem correspondiente de un elemento. Contenteditable: indica que se trata de un área editable.
Contextmenu: puede ser usado como punto de menú contextual proporcionado por el usuario.
Draggable: indica que se trata de un elemento “draggable”, es decir, que el usuario pueda arrastrar un elemento. Útil a la hora de indicar elementos interactivos por parte del usuario.
Tabindex: indica la posición numérica a la que llegaremos pulsando la tecla TAB. Aporta una gran accesibilidad a las páginas web para navegar por las mismas a través del tabulador. Permite al desarrollador indicar el orden que quiere que siga la
17 navegación al pulsar la tecla TAB, muy útil para personas con dificultades para la navegación o simplemente para hacer más accesible el contenido de una página web.
2.5.3. Elementos cambiados:
En este apartado se incluyen aquellos elementos de HTML5 que son incompatibles con HTML4:
El elemento <a /> sin href ahora creará un enlace al sitio.
El elemento <address /> es ahora un nuevo concepto de sección.
El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia.
Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estándar para el interfaz utilizado en la plataforma.
<menu /> ha sido redefinido para ser usado con los actuales menús.
El elemento <small /> ahora representa una impresión pequeña.
El elemento <strong /> definitivamente representa el énfasis puesto en trozo de nuestro texto.
2.5.4. Elementos eliminados:
En la nueva versión, algunos de los elementos anteriormente desaprovechados pasan a ser eliminados definitivamente.
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes noscript (solo en XHTML5)
s
strike
tt
u2.5.5. Atributos eliminados:
18
rev y charset en <link /> y <a /> target en <link /> nohref en <area /> profile en <head /> version en <html /> name en <map /> scheme en <meta />
archive, classid, codetype, declare y standby en <object /> valuetype en <param />
charset en <script /> summary en <table />
header, axis y abbr en <td /> y <th />
2.5.6. Nuevos eventos
En HTML4 se añadió la posibilidad que se activen una serie de acciones en un navegador, como cuando un usuario hace clic en un elemento mediante JavaScript.
A continuación se presentan los nuevos eventos de atributos que se pueden insertar en HTML5 para definir acciones de sucesos [W3Schools, 2010 b].
2.5.7. Eventos de ventana
Eventos relacionados con acciones que se realicen en la ventana de los navegadores: Onafterprint: script de que se ejecute después de que el documento se imprima. Onbeforeprint: script de que se ejecute antes de que el documento se imprima.
Onbeforeonload: Secuencia de comandos para ejecutar antes que se cargue el documento
Onerror: Script para ejecutarse cuando se produzca un error.
Onhaschange: Script para ejecutarse cuando el documento haya cambiado. OnMessage: Script para ejecutarse cuando el mensaje se active.
Onoffline: Script para ejecutarse cuando el documento esté desconectado. Ononline: Script para ejecutarse cuando el documento se ponga en línea.
Onpagehide: Secuencia de comandos que se ejecutan cuando la ventana esté oculta. Onpageshow: Secuencia de comandos que se ejecutan cuando la ventana se haga
visible.
Onpopstate: Secuencia de comandos que se ejecutan cada vez que la entrada al historial cambia.
Onredo: Script para ejecutarse cuando el documento realiza una “rehacer”.
Onresize: Secuencia de comandos que se ejecutan cuando la ventana cambia de tamaño.
Onstorage: Script para ejecutarse cuando se carga un documento.
Onundo: Script para ejecutarse cuando un documento realiza una “deshacer”. Onunload: Script para ejecutarse cuando el usuario abandona el documento.
19
2.5.8. Eventos de formulario
Eventos relacionados con elementos de formularios en los que el usuario tenga que introducir algún tipo de información en un cuadro de texto o similar:
Oncontextmenu: Script que se ejecute cuando un menú contextual se activa. Onformchange: Script para ejecutarse cuando una cambio de forma.
Onforminput: Script para ejecutarse cuando un formulario de entrada del usuario se ejecuta.
Oninput: Script para ejecutarse cuando un elemento recibe la entrada del usuario. Oninvalid: Script para ejecutarse cuando un elemento no es válido.
2.5.9. Eventos del ratón
Eventos activados por un ratón o acciones similares de usuario. Aplicable a todos los elementos de HTML5 [W3Schools, 2010 a].
Ondrag: Script para ejecutarse cuando un elemento se arrastra.
Ondragend: Secuencia de comandos que se ejecutan al final de una operación de arrastre.
OnDragEnter: Script para ejecutarse cuando un elemento ha sido arrastrado a un destino válido.
OnDragLeave: Script para ejecutarse cuando un elemento deja un destino válido. OnDragOver: Script para ejecutarse cuando un elemento se arrastra sobre un destino
válido.
OnDragStart: Script se ejecute en el inicio de una operación de arrastre. OnDrop: Script para ejecutar cuando el elemento arrastrado se cayó.
OnMouseWheel: Secuencia de comandos que se ejecutan cuando la rueda del ratón se está moviendo.
OnScroll: Secuencia de comandos que se ejecutan cuando la barra de desplazamiento de un elemento se desplaza.
2.5.10.
Eventos multimedia
Eventos activados en elementos multimedia como <video> y <audio>, para un mayor control por parte del desarrollador web a la hora de implementar estas nuevas funcionalidades:
Aplicable a todos los elementos de HTML5, pero es más común en los elementos multimedia [W3Schools, 2010 a].
oncanplay: Secuencia de comandos que se ejecutan cuando los elementos multimedia se puedan iniciar, pero puede parar para un almacenamiento temporal.
Oncanplaythrough: Secuencia de comandos que se ejecutan cuando los elementos multimedia se puedan reproducir hasta el final, sin parar para un almacenamiento temporal
Ondurationchange: Secuencia de comandos que se ejecutan cuando la longitud de los elementos multimedia cambian.
20
Onemptied: Script para ejecutarse cuando un recurso de un elemento multimedia de repente se desconecta (errores de red, errores de carga, etc...)
Onended: Secuencia de comandos que se ejecutan cuando los elementos multimedia llegan al final.
Onerror: Secuencia de comandos que se ejecutan cuando se produce un error durante la carga de un elemento.
Onloadeddata: Script para ejecutarse cuando los datos se han cargado
Onloadedmetadata: Secuencia de comandos que se ejecutan cuando la duración y los datos de otros elementos multimedia se cargan.
onLoadStart: Script para ejecutarse cuando el navegador empieza a cargar los datos de los elementos multimedia.
OnPause: Script para ejecutarse cuando los datos de los elementos multimedia se pausan.
onplay: Script para ejecutarse cuando los datos de los elementos multimedia van a empezar a reproducirse.
Onplaying: Script para ejecutarse cuando los datos de los elementos multimedia han empezar a reproducirse.
OnProgress: Secuencia de comandos que se ejecutan cuando el navegador está obteniendo los datos de los elementos multimedia.
Onratechange: Secuencia de comandos que se ejecutan cuando la tasa de datos de los elementos multimedia de reproducción han cambiado.
Onreadystatechange: Script que se ejecute cuando cambia al estado listo.
Onseeked: Script para ejecutar cuando el elemento de la búsqueda de un atributo de los elementos multimedia ya no son ciertos, y la búsqueda ha terminado.
Onseeking: Script para ejecutar cuando el elemento de la búsqueda de un atributo de los elementos multimedia son ciertos, y la búsqueda ha comenzado.
Onstalled: Secuencia de comandos que se ejecutan cuando se produce un error al ir a buscar datos de los elementos multimedia.
Onsuspend: Script para ejecutarse cuando el navegador ha estado buscando datos de los medios multimedia, pero se detuvo antes de que el archivo de los elementos multimedia fuesen encontrados.
Ontimeupdate: Secuencia de comandos que se ejecutan cuando los elementos multimedia cambia su posición de reproducción.
Onvolumechange: Secuencia de comandos que se ejecutan cuando se cambia el volumen de los elementos multimedia, también cuando el volumen esté ajustado en "silencio".
Onwaiting: Secuencia de comandos que se ejecutan cuando los elementos multimedia han dejado de reproducirse, pero se espera que reanude.
2.5.11.
Extensión de
HTMLDocument
HTML5 también ha modificado el elemento padre de Document Object Model (DOM) Level 2. En él encontramos una serie de mejoras y otras que finalmente se hacen estándares, es decir, durante el tiempo que éste nuevo estándar se mantenga como borrador, estará en continuo cambio y se incluirán nuevas modificaciones, por lo que algunas serán imprescindibles para el correcto uso de HTML5 debido a su importancia y además también serán aplicables a través de JavaScript.
21 getElementsByClassName(), para seleccionar elementos por el atributo class. Ya lo comentamos hace tiempo y vimos que las diferencias a nivel de tiempo de respuesta eran más que satisfactorias.
innerHTML, aunque prácticamente se usa en todas, o casi todas, las aplicaciones web existentes, por fin será reconocido como estándar en la especificación. Además aprovechando su inserción se posibilita su uso en el elemento padre.
activeElement, hasFocus(), nos permitirá conocer el elemento activo en tiempo real y el que tenga el foco.
getSelection(), devuelve un objeto con la selección actual.
designMode y execCommand(), muy usados para editar documentos.
2.5.12.
Extensiones de Elementos HTMLElement.
A nivel de elementos de HTML5, el DOM también ha sufrido una serie de cambios: getElementsByClassName(), nos permite seleccionar los hijos de cualquier objeto que
contengan una clase determinada.
innerHTML, nos permite leer/modificar el contenido de un nodo (al añadir crea nodos texto con etiquetas).
classList, una implementación muy interesante para vivir con className que nos permite interactuar con las clases de los elementos, proporcionando métodos como has(), add(), remove() y toggle() con los que podremos trabajar con las clases de nuestros elementos.
relList, funciona de igual forma que classList, pero sobre los atributos rel de <a />, <area /> y <link />.
2.6.
HTML5 y elementos relacionados con el contenido
multimedia
HTML5 introduce importantes elementos relacionados con la multimedia, foco de este proyecto, por ello que se dedique este apartado a profundizar en estos elementos.
Hasta ahora, había que escribir varias líneas de código para introducir un vídeo o un audio, usar otro lenguaje o incluso incorporar otras tecnologías para incluir elementos multimedia en las páginas web. Pero con la llegada de este nuevo estándar, se quiere simplificar muchísimo la forma de implementar estos contenidos, ya que lo que se busca es la simplicidad obteniendo prácticamente el mismo resultado. Sin embargo, se siguen encontrando algunos inconvenientes, como por ejemplo, el formato que se utilizará en los videos, y que a continuación se explicará.
2.6.1. Etiqueta <video>
Ésta es la etiqueta que más está dando y dará que hablar, ya que va a suponer un antes y un después en la forma de mostrar páginas web en Internet. El elemento que se marca con la etiqueta o tag <video> es sin duda el atractivo de este nuevo estándar y es que su llegada puede revolucionar el mundo multimedia en Internet.
22
Hasta ahora, nunca ha habido un estándar para mostrar videos en páginas web, por una parte porque en HTML4 no había ninguna etiqueta que englobara a todos y al haber muchos tipos de códec de vídeo diferente, cada vez se hacía con el que mejor convenía, ya sea con los codecs de QuickTime, Windows Media, Real Player, Flash u otros.. y por otra parte, porque actualmente los videos son contenido de tipo esencial en Internet, algo que antes no sucedía.
Actualmente, la mayoría de los videos son mostrados a través de la instalación de un plug-in externo, como uno de los más extendidos, el de tecnología Flash, sin embargo no todos los navegadores ni todos los reproductores usan el mismo códec.
HTML5 propone un estándar para todos los videos que se incrusten en la Web, lo cual no va a ser sencillo, ya que imponer un códec para todos y desde los actores que desarrollan los reproductores se antoja algo imposible. De cualquier manera, aún queda tiempo para que el nuevo estándar se consolide y se pueda disfrutar de todas las mejoras de esta nuevo elemento.
Actualmente, hay tres formatos de vídeo disponibles para el elemento <video>: Ogg4
: archivos Ogg con códec de vídeo Theodora y códec de audio Vorbis. MPEG45
: archivos MPEG4 con códec de vídeo H.264 y códec de audio ACC. WebM6
: archivos WebM con códec de vídeo VP8 y códec de audio Vorbis. Sin dudas las mejoras son evidentes respecto a Flash comparado con H.264:
La calidad nativa del códec H.264 es mucho mejor que Flash, que al final y al cabo, no fue inventado para reproducción de videos.
El uso de procesador requerido para ver videos usando H.264 es notablemente inferior a ver el mismo vídeo usando el plug-in de Flash7.
En la siguiente tabla (ver tabla 3) se muestra la relación de varios navegadores con dos de los formatos de vídeo que se emplean en el momento [W3Schools, 2010 e]. Como se puede observar el formato Ogg es el que tiene más aceptación por parte de los navegadores. Esto se debe a que el formato Ogg es libre tanto como códec como contenedor, y tiene la ventaja de que se si usara este para cualquier navegador ya no sería necesario ningún software adicional, pero esto ya es decisión de las principales empresas de Internet como Adobe.
Por otro lado, el formato WebM ya se está usando de forma masiva en YouTube por parte de Google, que ya ha comenzado la conversión de la mayoría de los videos alojados en los servidores de la famosa página de visualización de videos online.
For mato IE8 Firef ox 3.5 Oper a 10.5 Chro me 3.0 Safar i 3.0 Ogg No 3.5+ 10.5+ 5.0+ No MPEG4 No No No 5.0+ 3.0+ WebM No No 10.6+ 6.0+ No
Tabla 3: Formatos soportados en <video>
4http://www.vorbis.com/ 5 http://www.m4f.org/mpeg4/ 6 http://www.webmproject.org/ 7http://www.adobe.com/es/
