Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
ÍNDICE | UD 4-HTML5 HTML5 INTRODUCCIÓN....................................................................................3 ¿Qué es HTML5?......................................................................................................... 3 ¿Cómo se creó HTML5 ?................................................................................................. 3 El HTML5 <! DOCTYPE>................................................................................................. 4 HTML5 - Nuevas funciones............................................................................................. 4 Soporte del navegador para HTML5..................................................................................5
NUEVOS ELEMENTOS EN HTML5...........................................................................5
El elemento nuevo <canvas>......................................................................................5 Nuevos elementos para medios...................................................................................5 Nuevos Elementos para el formulario............................................................................5 Nuevos Elementos semánticos estructurales....................................................................6
NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5..............................................................7 ¿Cuáles son los elementos semánticos?..............................................................................7 Elemento HTML5 <section>........................................................................................8 Elemento HTML5 <article>......................................................................................... 8 <nav>.................................................................................................................. 9 <aside>................................................................................................................ 9 Elemento HTML5 <header>........................................................................................9 Elemento HTML5 <footer>........................................................................................ 10 <figure> y Elementos <figcaption>..............................................................................10 ¿Podemos empezar a utilizar estos elementos semánticos?.................................................10
FORMULARIOS EN HTML5...............................................................................11
El elemento <input>................................................................................................... 11 El elemento <form>............................................................................................... 12 El elemento <datalist>............................................................................................ 12 El elemento <output>............................................................................................. 12 El atributo placeholder............................................................................................... 13 El atributo autofocus.................................................................................................. 13 La propiedad label.control del DOM................................................................................13 Validación restringida................................................................................................. 13 API de validación restringida.....................................................................................14
GRÁFICOS EN HTML 5...................................................................................15 Canvas................................................................................................................... 15 Crear un canvas.................................................................................................... 15 Coordenadas del lienzo........................................................................................... 16 Canvas – Path (líneas)............................................................................................. 16 Canvas- Texto....................................................................................................... 17 Canvas - Degradados.............................................................................................. 18 Lienzo - Imágenes.................................................................................................. 19 SVG...................................................................................................................... 19 ¿Qué es SVG?........................................................................................................ 19 SVG Ventajas....................................................................................................... 19 Cómo insertarlos................................................................................................... 20 Diferencias entre SVG y Canvas..................................................................................20
MULTIMEDIA EN HTML5....................................................................................21
El elemento y la etiqueta <audio> .................................................................................21 El estilo del reproductor de audio..............................................................................22 Usando sonido como comportamiento de los elementos de la página.....................................23 El elemento y la etiqueta <video> .................................................................................23 HTML5 Video - ¿Cómo funciona?.................................................................................24 HTML5 <video> - Métodos y propiedades DOM.................................................................25 Etiquetas Vídeo HTML............................................................................................. 26 Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-1
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
Atributos de video y audio.......................................................................................26
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-2
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
HTML5 INTRODUCCIÓN ¿QUÉ ES HTML5? HTML5 es el último estándar HTML ¿Qué es nuevo? •
Nuevos elementos
•
Nuevos Atributos
•
CSS3 Soporte completo
•
Vídeo y Audio
•
Gráficos 2D/3D
•
Almacenamiento local, Local Storage
•
Base de datos SQL local
•
Aplicaciones Web
Por ejemplo podemos ver esta etiqueta de vídeo <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>
La versión anterior de HTML, HTML 4.01, se produjo en 1999, y el Internet ha cambiado mucho desde entonces.HTML5 fue diseñado para reemplazar el HTML 4, XHTML y DOM HTML Nivel 2. Fue especialmente diseñado para ofrecer contenido rico sin necesidad de plugins adicionales. La versión actual ofrece de todo, desde la animación de gráficos, música de películas, y también se puede utilizar para construir aplicaciones web complejas. HTML5 es también multiplataforma. Está diseñado para trabajar si usted está usando un PC o un Tablet, un Smartphone o una Smart TV.
¿CÓMO SE CREÓ HTML5 ? HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y el Grupo de Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-3
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
Trabajo de Tecnología Web de hipertexto Aplicación (WHATWG). WHATWG estaba trabajando con los formularios web y aplicaciones, y la W3C estaba trabajando con XHTML 2.0. En 2006, decidieron cooperar y crear una nueva versión de HTML. Se establecieron algunas reglas para HTML5: 1. Las nuevas características deben estar basadas en HTML, CSS, DOM y JavaScript 2. La necesidad de plugins externos (como Flash) debe reducirse 3. El manejo de errores debe ser más fácil que en las versiones anteriores 4. Los scripts tienen que ser sustituido por más etiquetas de de marcado 5. HTML5 debe ser independiente del dispositivo 6. El proceso de desarrollo debe ser visible para el público
EL HTML5 <! DOCTYPE> En HTML5 sólo hay una declaración DOCTYPE, y es muy simple: <!DOCTYPE html>
Un documento HTML5 mínimo A continuación se muestra un documento simple de HTML5, con el mínimo de variables necesarias: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
HTML5 - NUEVAS FUNCIONES Algunas de las nuevas características más interesantes de HTML5 son: •
El elemento <canvas> para el dibujo 2D
•
El <video> y <audio> para la reproducción multimedia
•
Soporte para almacenamiento local. Local Storage
•
Nuevos elementos específicos de contenido, como <article>, <footer>, <header>, <nav>, <section> Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-4
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
•
Nuevos controles de formulario, como el calendario, la fecha, hora, correo electrónico, URL, búsqueda
SOPORTE DEL NAVEGADOR PARA HTML5 Todos los principales navegadores (Chrome, Firefox, Internet Explorer, Safari, Opera) apoyan a los nuevos elementos de HTML5 y APIs, y continúan agregando nuevas características HTML5 a sus últimas versiones. El Grupo de Trabajo de HTML 5 incluye AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, y cientos de otros proveedores.
NUEVOS ELEMENTOS EN HTML5 El Internet y el uso de la Internet, ha cambiado mucho desde 1999, cuando HTML 4.01 convirtió en un estándar. Hoy en día, varios elementos en HTML 4.01 son obsoletos, nada utilizados , o no se utilizam de la manera que estaban destinados. Todos estos elementos se han eliminado o re-escritas en HTML5. Para manejar mejor las necesidades de Internet de hoy en día, HTML5 también ha incluido nuevos elementos para la elaboración de gráficos, que muestran el contenido de los medios de comunicación, para una mejor estructura de la página y un mejor manejo de formularios, y varias APIs nuevas, tales como arrastrar y soltar, obtener la posición geográfica de un usuario, almacenar datos locales, y más. A continuación se muestra una lista de los nuevos elementos HTML, introducidos por HTML5, y una descripción de lo que se utilizan. El elemento nuevo <canvas> <canvas>
Define gráficos usados utilizando javascript
Nuevos elementos para medios <audio> Define contenido de musica o sonido <embed>
Define contenido para ser ejecutado con diferentes aplicaciones o plugins
<source>
define la fuente para vide o audio
<track>
Define subtítulos para <video> y <audio>
<video>
define contenido de video o películas.
Nuevos Elementos para el formulario <datalist> Define opciones predefinidas para inpunts de opcín Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-5
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
<keygen>
Defines a key-pair generator field (for forms)
<output>
Define el resultado de un cálculo
Nuevos Elementos semánticos estructurales <article> Defines an article in the document <aside>
Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text outside it <details>
Defines additional details that the user can view or hide
<dialog>
Define una caja de dialogo o ventana
<figcaption> Define el resument de una figure <figure> Define el contenido en sí mismo, como ilustraciones, diagramas, fotos, listas de códigos, etc <footer>
Define el pie de un documento, sección o artículo
<header>
Define el encabezado de un documento, sección o artículo
<main>
Define el contenido principal de un documeneto
<mark>
Define marcado o destacado
<menuitem> Defines a command/menu item that the user can invoke from a popup menu <meter>
Defines a scalar measurement within a known range (a gauge)
<nav>
Define los enlaces de navegación del documento
<progress>
Define el progreso de una tarea
<rp> Defines what to show in browsers that do not support ruby annotations <rt>
Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>
Defines a ruby annotation (for East Asian typography)
<section>
Define una sección en un documento
<summary> Defines a visible heading for a <details> element <time>
Defines a date/time
<wbr> Defines a possible line-break Elementos eliminados Los siguientes elementos de HTML 4.01 elementos se han eliminado de HTML5: •
<acronym> Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-6
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
•
<applet>
•
<basefont>
•
<big>
•
<center>
•
<dir>
•
<font>
•
<frame>
•
<frameset>
•
<noframes>
•
<strike>
•
<tt>
NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5 Semántica = Significado. Elementos semánticos = Los elementos con significado.
¿CUÁLES SON LOS ELEMENTOS SEMÁNTICOS? Un elemento semántico describe claramente su significado tanto para el navegador y el desarrollador. Los ejemplos de no-semánticos elementos: <div> y <span> - dice nada acerca de su contenido. Ejemplos de elementos semánticos: <form>, <table> y <img> - definen claramente su contenido.
Muchos de los sitios web existentes hoy contiene código HTML así: <div id="nav">, <div class="header"> o id="footer"> <div, para indicar los enlaces de navegación, encabezado y pie de página. HTML5 ofrece nuevos elementos semánticos para definir claramente las diferentes partes de una página web: •
<header> Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-7
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
•
<nav>
•
<section>
•
<article>
•
<aside>
•
<figure>
•
<figcaption>
•
<footer>
•
<details>
•
<summary>
•
<mark>
•
<time>
Elemento HTML5 <section> El elemento <section> define una sección de un documento. De acuerdo con la documentación del W3C HTML5: "Una sección es una agrupación temática de los contenidos, por lo general con un título." <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
Pruebe usted mismo » Elemento HTML5 <article> El elemento <article> especifica el contenido independiente, autónomo. Un artículo debe tener sentido por sí misma y que debería ser posible para distribuirla de forma independiente del resto del sitio web. Ejemplos en los que se puede utilizar un elemento <article>: •
Mensaje Foro
•
Blog mensaje
•
Noticia
•
Comentario Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-8
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>
<nav> El elemento <nav> define un conjunto de vínculos de navegación. El elemento <nav> está destinado para grandes bloques de enlaces de navegación. Sin embargo, no todos los enlaces en un documento deben estar dentro de un elemento <nav> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
<aside> El elemento <aside> define algo de contenido aparte de los contenidos que se coloca en (como una barra lateral). El lado el contenido debe estar relacionado con el contenido de los alrededores. <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
Elemento HTML5 <header> El elemento <header> especifica un encabezado de un documento o sección. El elemento <header> debe utilizarse como un contenedor para el contenido introductorio. Usted puede tener varios elementos <header> en un solo documento. El ejemplo siguiente define una cabecera de un artículo: Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-9
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
<article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>
Elemento HTML5 <footer> El elemento <footer> especifica un pie de página de un documento o sección. Un elemento <footer> debe contener información acerca de su elemento contenedor. Un pie de página suele contener el autor del documento, información de derechos de autor, enlaces a términos de uso, información de contacto, etc Usted puede tener varios elementos <footer> en un solo documento. <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>
<figure> y Elementos <figcaption> La etiqueta <figure> especifica el contenido en sí misma, como ilustraciones, diagramas, fotos, listados de código, etc Mientras que el contenido del elemento <figure> está relacionada con el flujo principal, su posición es independiente del flujo principal, y si se quita no debería afectar el flujo del documento. La etiqueta <figcaption> define un título para un elemento <figure>. El elemento <figcaption> puede ser colocado como el primer o el último hijo del elemento <figure>. <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure>
¿Podemos empezar a utilizar estos elementos semánticos? Los elementos explicados anteriormente son todos los elementos de bloque (excepto <figcaption>). Para obtener estos elementos funcionen correctamente en navegadores antiguos, establezca la propiedad de bloquear la pantalla en su hoja de estilo (esto hace que los navegadores antiguos para generar estos elementos correctamente):
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-10
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
header, section, footer, aside, nav, main, article, figure { display: block; }
Problema con Internet Explorer 8 y versiones anteriores IE8 y anteriores no sabe cómo representar CSS en elementos que no reconoce. No se puede aplicar estilo nuevos elementos de HTML5 como <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>. Afortunadamente, Sjoerd Visscher ha descubierto una solución de JavaScript llamada HTML5 Shiv ; para permitir que el estilo de los elementos de HTML5 en versiones de Internet Explorer anteriores a la versión 9. Usted puede descargar y leer http://code.google.com/p/html5shiv/
más
sobre
el
HTML5
Shiv
en:
Para permitir que el HTML5 Shiv (después de la descarga), inserte el código siguiente en el elemento <head>: <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
El código anterior es un comentario que sólo las versiones anteriores a IE9 lee. Debe ser colocado en el elemento <head> porque Internet Explorer necesita saber acerca de los elementos antes de que se les presta.
FORMULARIOS EN HTML5 Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programación y diseño que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una mejor experiencia para los usuarios al permitir que estos tengan un comportamiento más coherente entre diferentes sitios web y proporcionar una retroalimentación inmediata acerca de la información ingresada. Asimismo, proporcionan esta experiencia a los usuarios que han deshabilitado el javascript en sus navegadores.
EL ELEMENTO <INPUT> El elemento <input> tiene nuevos valores para el atributo type. •
search: El atributo representa un campo de búsqueda. Los saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis.
•
tel: El atributo representa un control para editar un número de teléfono. Los Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-11
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis, ya que los números telefónicos varían enormemente en todo el mundo. Puedes usar atributos como pattern y maxlength para restringir los valores ingresados en el campo. •
url: El atributo representa un control para editar una URL. Se eliminan los saltos de línea y espacios en blanco antes y después del valor ingresado.
•
email: El atributo representa una dirección de correo electrónico. Los saltos de línea se eliminan automáticamente del valor ingresado. Puede ingresarse una dirección de correo no válida, pero el campo de ingreso sólo funcionará si la dirección satisface la producción ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext está definida en RFC 5322, sección 3.2.3 y ldh-str está definida en RFC 1034, sección 3.5.
Nota: si el atributo multiple está incluido, pueden ingresarse muchas direcciones de correo electrónico en ese campo <input>, como una lista separada por comas, pero no está implementado actualmente en Firefox. El elemento <input> también tiene nuevos atributos: •
list: el id. de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.
•
pattern: una expresión regular respecto a la cual se comprueba el valor del control, que puede ser usada con valores de type de text, tel, search, url y email.
•
formmethod: una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el method del elemento <form>, si se define. El formmethod sólo se aplica cuando el type es image o submit.
•
x-moz-errormessage : una cadena que se muestra como un mensaje de error si el campo no logra validarse. Es una extensión de Mozilla.
El elemento <form> El elemento <form> tiene un nuevo atributo: novalidate: este atributo evita que el formulario sea validado antes del envío. El elemento <datalist> El elemento <datalist> representa la lista de elementos <option> como sugerencias cuando se llena un campo <input>. Puedes usar el atributo list en un elemento <input> para enlazar a un campo de ingreso específico con un elemento <datalist> determinado. El elemento <output> El elemento <output> representa el resultado de un cálculo. Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-12
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
Puedes usar el atributo for para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo for es una lista separada por espacios de identificadores de otros elementos.
EL ATRIBUTO PLACEHOLDER El atributo placeholder en elementos <input> y <textarea> proporciona una ayuda a los usuarios acerca de qué debe ingresarse en el campo. El texto introducido en el placeholder no debe contener retornos de carro o saltos de línea.
EL ATRIBUTO AUTOFOCUS El atributo autofocus te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo autofocus, que es booleano. Este atributo puede ser aplicado a los elementos <input>, <button>, <select> y <textarea>. La excepción es que autofocus no puede aplicarse a un elemento <input> si el atributo type hidden está seleccionado (es decir, no puede enfocar automáticamente un elemento escondido).
LA PROPIEDAD LABEL.CONTROL DEL DOM La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <label> de HTML. La propiedad control devuelve el controlador etiquetado, es decir, el controlador para el que está hecha la etiqueta, que está determinado por el atributo for (si está definido) o por el primer elemento controlador descendiente.
VALIDACIÓN RESTRINGIDA El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada. Si se ajusta el atributo title al elemento <input>, esa cadena se mostrará en una ventana emergente de ayuda cuando falle la validación. Si title se ajusta a una cadena vacía, no se mostrará ninguna ventana emergente. Si el atributo title no se configura, en su lugar se mostrará el mensaje de validación estándar (como especifica el atributo x-mozerrormessage o llamando al método setCustomValidity()). Note: la validación restringida no es compatible con los elementos <button> en un Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-13
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
formulario; si quieres aplicar estilo a un botón basado en la validez del formulario asociado, usa la seudoclase :-moz-submit-invalid. Sintaxis de HTML para la validación restringida Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario. El atributo required en los elementos <input>, <select> y <textarea> indica que se debe ingresar algún dato. (En el elemento <input>, required solo se aplica con ciertos valores del atributo type.) El atributo pattern en el elemento <input> restringe el valor para que concuerde con una expresión regular específica. Los atributos min y max del elemento <input> restringen los valores máximos y mínimos que pueden ser ingresados. El atributo step del elemento <input> (cuando se usa en combinación con los atributos min y max) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado. El atributo maxlength de los elementos <input> y <textarea> restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar. Los valores url y email para type restringen el valor para una URL o dirección de correo válida respectivamente. Además, puedes evitar la validación restringida especificando el atributo novalidate en el elemento <form>, o el atributo formnovalidate en el elemento <button> y en el elemento <input> (cuando type es submit o image). Estos atributos indican que el formulario no será validado cuando se envie. API de validación restringida Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente: En objetos HTMLFormElement el método checkValidity(), que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones, y falso si no lo hacen, En elementos asociados al formulario: •
la propiedad willValidate, que es falso si el elemento no satisface las restricciones.
•
la propiedad validity, que es un objeto ValidityState que representa los estados de validación en que está el elemento (p. ej., condiciones de restricción que han fallado o exitosas).
•
la propiedad validationMessage, que es un mensaje que contiene todas las fallas o errores en las restricciones que pertenecen a ese elemento. Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-14
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
•
el método checkValidity(), que devuelve falso si el elemento no logra satisfacer alguna de las restricciones, o verdadero si pasa lo contrario.
•
el método setCustomValidity(), que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.
GRÁFICOS EN HTML 5 CANVAS <canvas> es un nuevo elemento HTML que puede usarse para dibujar gráficos a través de scripting (normalmente JavaScript). Por ejemplo, puede emplearse para dibujar gráficos, hacer composición de fotos, crear animaciones e incluso procesamiento de vídeo en tiempo real.https://developer.mozilla.org/es/docs/HTML/Canvas El elemento <canvas> HTML5 se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript). El elemento <canvas> es sólo un contenedor de gráficos. Se debe utilizar una secuencia de comandos para dibujar realmente los gráficos. Canvas tiene varios métodos para líneas de dibujo, cuadrados, círculos, texto y agregar imágenes. Crear un canvas Un lienzo es un área rectangular en una página HTML, y se especifica con el elemento <canvas>. Nota: De forma predeterminada, el elemento <canvas> no tiene fronteras y no de contenido. El margen de beneficio se ve así: <canvas id="myCanvas" width="200" height="100"></canvas>
Nota: Especifique siempre un atributo id (que se hace referencia en una secuencia de comandos), y una anchura y una altura de atributos para definir el tamaño del lienzo. Podemos tener varios elementos <canvas> en una página HTML. P ara añadir un borde, utilice el atributo de estilo: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Dibujamos en el lienzo con javascript
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-15
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script>
•
En primer lugar, encontrar el elemento <canvas>:
•
var c = document.getElementById("myCanvas");
•
Luego, llame a su método getContext () (hay que pasar la cadena "2d" al getContext (método)):
•
var ctx = c.getContext("2d");
•
El objeto getContext ("2d") es un objeto incorporado HTML5, con muchas propiedades y métodos para dibujar trazados, cuadros, círculos, texto, imágenes y más.
•
Las siguientes dos líneas dibujan un rectángulo rojo:
•
ctx.fillStyle = "#FF0000";
•
ctx.fillRect(0,0,150,75);
•
La propiedad fillStyle puede ser un color CSS, un degradado o un patrón. El fillStyle defecto es # 000000 (negro).
•
El fillRect ( x, y, ancho, alto método) dibuja un rectángulo relleno con el estilo de relleno actual.
Coordenadas del lienzo La tela es una rejilla de dos dimensiones. La esquina superior izquierda del lienzo ha de coordenadas (0,0) Así, el método fillRect () anterior tenía los parámetros (0,0,150,75). Esto significa: Comienza en la esquina superior izquierda (0,0) y dibuje un rectángulo 150x75 píxeles. Canvas – Path (líneas) Para dibujar líneas rectas en un lienzo, vamos a utilizar los dos métodos siguientes: •
moveTo ( x, y ) define el punto inicial de la línea
•
lineTo ( x, y ) define el punto final de la línea
Para dibujar la línea en realidad, hay que utilizar uno de los métodos de "ink", como stroke (). Ejemplo: Definir un punto de partida en la posición (0,0), y un punto final en la posición (200.100). A continuación, utilice el método () Carrera dibujar realmente la línea: Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-16
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
Para dibujar un círculo en un lienzo, utilizaremos el siguiente método: arc(x,y,r,start,stop)
Para dibujar el círculo en realidad, hay que utilizar uno de los métodos de "tinta", como accidente cerebrovascular () o rellenar (). Ejemplo: Crear un círculo con el método de arco (): var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
Canvas- Texto Para dibujar texto en un lienzo, las propiedades y los métodos más importantes son: •
font - define las propiedades de fuente para el texto
•
fillText ( texto, x, y ) - Dibuja texto "lleno" en el lienzo
•
strokeText ( texto, x, y ) - Dibuja texto en el lienzo (sin relleno)
Uso de fillText ():
Ejemplo: Escribe un texto de 30px en el camvas, utilizando el tipo de letra "Arial": var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
Uso de strokeText ():
Ejemplo: Escribir un texto de alto 30px (sin relleno) en el lienzo, utilizando el tipo de letra "Arial": JavaScript:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-17
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50);
Canvas - Degradados Los gradientes se pueden utilizar para llenar rectángulos, círculos, líneas, texto, etc formas en el lienzo no se limitan a los colores sólidos. Hay dos tipos diferentes de gradientes: 1. createLinearGradient ( x, y, x1, y1 ) - Crea un degradado lineal 2. createRadialGradient ( x, y, r, x1, y1, r1 ) - Crea un radial / degradado circular Una vez que tenemos un objeto degradado, hay que sumar dos o más etapas de color. El método addColorStop () especifica las paradas de color, y su posición a lo largo del gradiente. Posiciones gradiente puede estar en cualquier lugar entre 0 y 1. Para usar el degradado, establezca la propiedad fillStyle o strokeStyle al gradiente, y luego dibujar la forma, como un rectángulo, texto, o una línea. Uso de createLinearGradient ():
Crear un degradado lineal. Rellene rectángulo con el gradiente: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
Uso de createRadialGradient ():
Crear un degradado radial / circular. Rellene rectángulo con el gradiente: JavaScript:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-18
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
Lienzo - Imágenes Para dibujar una imagen en un lienzo, utilizaremos el siguiente método: drawImage ( imagen, x, y ) Dibujando una imagen la imagen en el lienzo (canvas): var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10);
SVG HTML5 tiene soporte para SVG como elemento inline.
•
¿Qué es SVG? SVG significa Scalable Vector Graphics
•
SVG se utiliza para definir los gráficos basados en vectores para la web
•
SVG define los gráficos en formato XML
•
Gráficos SVG no se pierde ninguna calidad si has o cambiar el tamaño de
•
Cada elemento y cada atributo en archivos SVG se pueden animar
•
SVG es una recomendación de W3C
SVG Ventajas Ventajas del uso de SVG sobre otros formatos de imágenes (como JPEG y GIF) son: •
Imágenes SVG se pueden crear y editar con cualquier editor de texto
•
Imágenes SVG se pueden buscar, indexar, con guión, y se comprimen
•
Imágenes SVG escalan con facilidad Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-19
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
•
Imágenes SVG se pueden imprimir con alta calidad en cualquier resolución
•
Imágenes SVG son ampliable (y la imagen se pueden ampliar sin degradación)
Cómo insertarlos En HTML5, puede incrustar elementos SVG directamente en su página HTML, aunque también podemos hacerlo mediant la etiqueta img haciendo referencia mediante src a un archivo externo svg: <!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html>
Diferencias entre SVG y Canvas SVG
Canvas
SVG es un lenguaje para describir gráficos Canvas dibuja gráficos 2D, sobre la marcha 2D en XML. (con un JavaScript). SVG está basado en XML, lo que significa Puede asociar controladores de eventos de que cada elemento está disponible dentro JavaScript para un elemento. de la SVG DOM. Canvas se representa píxel por píxel. En la En SVG, cada figura dibujada es recordada lona, una vez que el gráfico se dibuja, se como un objeto. Si se cambian los olvida por el navegador. Si su posición se atributos de un objeto SVG, el navegador debe cambiar, toda la escena tiene que ser puede automáticamente volver a hacer la rediseñado, incluyendo los objetos que forma. podrían haber sido incluidos en el gráfico.
Comparativa de Canvas y SVG
La siguiente tabla muestra algunas diferencias de alto nivel entre Canvas y SVG:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-20
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
Canvas
SVG
Basado en píxeles (.png dinámico)
Basado en forma
Elemento HTML único
Múltiples elementos gráficos, que forman parte de DOM
Modificado mediante script solamente
Modificado mediante script y CSS
La interacción de usuario/modelo de eventos es pormenorizada (x,y)
La interacción de usuario/modelo de eventos es resumida (rect, ruta)
El rendimiento es mejor con una superficie menor, un número más grande de objetos (>10 k) o ambos
El rendimiento es mejor con un número menor de objetos (<10 k), una superficie más grande o ambos
Para más información http://msdn.microsoft.com/es-es/library/gg193983(v=vs.85).aspx
MULTIMEDIA EN HTML5 EL ELEMENTO Y LA ETIQUETA <AUDIO> Mediante la etiqueta <audio> podemos insertar sonidos en una web, como la música o de otros flujos de audio. Éstos elementos forman parte del contenido, para incorporar sonido como parte del diseño (asociar un sonido a un click de un botón o a un elemento de menú) no podemos hacerlo con CSS y necesitaremos Javascript o Jquery (o Flash????) para realizarlo. Para reproducir un sonido como elemento de contenido en nuestra página: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Su navegador no soporta la etiqueta audio. </audio>
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-21
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
La etiqueta <audio> es nueva en HTML5. Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con la etiqueta <audio>. Actualmente, hay 3 formatos de archivo admitidos para el elemento <audio>: MP3, WAV y OGG: Con mp3 y ogg tendremos compatibilidad en la mayoria de los navegadores. Tipos MIME para los formatos de audio •
MP3
audio/mpeg
•
Ogg
audio/ogg
•
Wav
audio/wav
Consejo: Cualquier texto dentro del entre <audio> y </ audio> se mostrará en los navegadores que no admitan la etiqueta <audio>. Atributos •
autoplay
especifica si el sonido se disparará automáticamente
•
controls
Señala que el sonido se mostrará mediante un reproductor
•
loop
•
muted Éspecifica que el sonido aparecerá silenciado
•
preload
•
metadata
•
none Specifies if and how the author thinks the audio should be loaded when the page loads
•
src
•
Atributos globales
Especifica que el sonido se repetirá ciclicamente
Especifica la fuente del archivo de audio
Atributos de eventos La etiqueta <audio> también apoya el evento atributos en HTML . El estilo del reproductor de audio Podemos jugar un poco con css por ejemplo cambiar un poco el color de fondo del reproductor,
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-22
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
audio{ width: 480px; height: 60px; margin: 50px auto 50px auto; border: solid; padding:1em; background-color:teal; }
pero si queremos hacerlo personalizado tendremos que hacerlo mezclando CSS con javascript recurriendo a la API. Aquí podemos echar un vistazo a un tutorial: http://www.alexkatz.me/blog/html5-audio/building-a-custom-html5-audio-player-withjavascript/ Usando sonido como comportamiento de los elementos de la página Como hemos dicho al principio si queremos asociarlo a un botón tendremos que utilizar javascript: Aquí dejo un pequeño tutorial: http://www.elated.com/articles/html5-audio/ y una muestra de código de cómo sería asociar un sonido a un botón mediante javascript y la API de Audio que nos permitirán asociarlo mediante propiedades del DOM: <div> <button id="playButton" onclick="document.getElementById('miSonido').play()">Reproducir</button> <button id="pauseButton" onclick="document.getElementById('miSonido').pause()">Pausar</button> <button id="stopButton" onclick="document.getElementById('miSonido').pause(); document.getElementById('miSonido').currentTime = 0;">Detener </button> </div> <audio id="miSonido" controls> <source src="sonidos/button.mp3"> <source src="sonidos/button.ogg"> </audio> </div>
EL ELEMENTO Y LA ETIQUETA <VIDEO> Muchos sitios web modernos muestran videos. HTML5 proporciona un estándar para mostrarlos. Insertar vídeos en html 5 se hace de una forma bastante trivial Antes de HTML5, no había ninguna norma para mostrar videos / películas en páginas web. Antes de HTML5, los videos sólo pueden ser jugados con un plug-in (como flash). Los diferentes navegadores soportan diferentes plug-ins.
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-23
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo o una película en una página web: el elemento <video>. Internet Explorer 9 +, Firefox, Opera, Chrome y Safari soportan el elemento <video>. Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento HTML5 Video - ¿Cómo funciona? Para mostrar un vídeo en HTML5, esto es todo lo que necesita: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Su navegador no soporta la etiqueta video. </video>
El atributo de control añade controles de vídeo, como reproducción, pausa y volumen. Es una buena idea incluir siempre atributos width y height. Si se establecen altura y la anchura, el espacio requerido para el video está reservado cuando se carga la página. Sin embargo, sin estos atributos, el navegador no sabe el tamaño del vídeo, y no puede reservar el espacio correspondiente a la misma. El efecto será que el diseño de la página va a cambiar durante la carga (mientras se carga el vídeo). También debemos insertar contenido del texto entre las etiquetas <video> y </ video> información para los navegadores que no soportan el elemento <video>. El elemento <video> permite que varios elementos <source>. Los elementos <source> permiten vincular los diferentes archivos de vídeo. El navegador usará el primer formato reconocido. Actualmente, hay 3 formatos de vídeo compatibles con el elemento <video>: MP4, WebM, y Ogg (asociado a diferentes MIME) : •
MP4 = MPEG 4 archivos con el codec de video H264 y AAC codec de audio
•
WebM = WebM archivos con códec de vídeo VP8 y el códec de audio Vorbis
•
Ogg = Ogg archivos con el codec de vídeo Theora y Vorbis codec de audio
Tipos MIME (atributos type) para Formatos de vídeo: •
MP4
video/mp4
•
WebM video/webm
•
Ogg
video/ogg
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-24
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
HTML5 <video> - Métodos y propiedades DOM HTML5 tiene métodos DOM, propiedades y eventos para la <video> y <audio>. Estos métodos, propiedades y eventos le permiten manipular <video> y <audio> usando JavaScript. Existen métodos para reproducir, pausar, y la carga, por ejemplo, y hay propiedades (como la duración y el volumen). También hay eventos de DOM que se le notifique cuando el elemento <video> comienza a reproducirse o está en pausa, o se finaliza, etc El siguiente ejemplo ilustra, de una manera sencilla, la forma de abordar un elemento <video>, leer y establecer propiedades y llamar a métodos <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Su navegador no soporta la etiqueta video. </video> </div> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig(){ myVideo.width=560; } function makeSmall(){ myVideo.width=320; } function makeNormal(){ myVideo.width=420; } </script>
El ejemplo anterior llama a dos métodos: play () y pause (). También utiliza dos propiedades: paused y width.
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-25
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
Etiquetas Vídeo HTML •
<video>
Define contenido de video o película
•
<source> video
Define las fuentes de video o película para las etiquetas de audio o
•
<track>
Define subtítulos para los reproductores de vídeo
Atributos de video y audio En vez de la etiqueta source podemos hacerlos con src como atributo. (La etiqueta source es indicada cuando se registran como source, fuentes de video o audio alternativas) <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Tu navegador no implementa el elemento <code>video</code>. </video> <audio src="/test/audio.ogg"> <p>Tu navegador no implementa el elemento audio.</p> </audio>
El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local. <audio src="audio.ogg" controls autoplay loop> <p>Tu navegador no implementa el elemento audio</p> </audio>
Este código de ejemplo usa los atributos del elemento <audio>: •
controls : Muestra los controles estándar de HTML5 para audio en una página Web.
•
autoplay : Hace que el audio se reproduzca automáticamente.
•
loop : Hace que el audio se repita automáticamente.
•
<audio src="audio.mp3" preload="auto" controls></audio>
El atributo preload es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores: •
"none" no almacena temporalmente el archivo
•
"auto" almacena temporalmente el archivo multimedia
•
"metadata" almacena temporalmente sólo los metadatos del archivo
Se pueden especificar múltiples fuentes de archivos usando el elemento <source> con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-26
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 4:HTML5
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Tu navegador no implementa el elemento <code>video</code>. </video>
Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de los formatos multimedia admitidos por los elementos audio y video en los diferentes navegadores. También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes: <video controls> <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> Tu navegador no implementa el elemento <code>video</code>. </video>
Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado. Si el atributo type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento video. Si el atributo type está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente source se comprueba una vez. Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-27