Examen

Qu es HTML5?
HTML5 es el ltimo estndar para el HTML. La versin anterior de HTML, HTML 4.01, se produjo en 1999, y el Internet ha cambiado mucho desde entonces. HTML5 fue diseado para reemplazar el HTML 4, XHTML y DOM HTML Nivel 2. Fue especialmente diseado para ofrecer contenido rico sin necesidad de plugins adicionales. La versin actual ofrece de todo, desde la animacin de grficos, msica de pelculas, y tambin se puede utilizar para construir aplicaciones web complejas. HTML5 es tambin multiplataforma. Est diseado para trabajar si usted est usando un PC o un Tablet, un Smartphone o una Smart TV.
Cmo result HTML5 Comienza?

HTML5 es una colaboracin entre el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Tecnologa Web de hipertexto Aplicacin (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 versin de HTML. Se establecieron algunas reglas para HTML5: Las nuevas caractersticas deben estar basadas en HTML, CSS, DOM y JavaScript La necesidad de plugins externos (como Flash) debe reducirse El manejo de errores debe ser ms fcil que en las versiones anteriores De secuencias de comandos tiene que ser sustituido por ms de marcado HTML5 debe ser independiente del dispositivo El proceso de desarrollo debe ser visible para el pblico
El HTML5 <! DOCTYPE>

En HTML5 slo hay una declaracin, y es muy simple <doctype>:
<!DOCTYPE html>
Un documento HTML5 mnimo

A continuacin se muestra un documento simple de HTML5, con el mnimo 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 caractersticas ms interesantes de HTML5 son: El elemento <canvas> para el dibujo 2D El <video> y <audio> para la reproduccin multimedia Soporte para almacenamiento local Nuevos elementos especficos de contenido, como <article>, <footer>, <header>, <nav>, <section> Nuevos controles de formulario, como el calendario, la fecha, hora, correo electrnico, URL, bsqueda
Soporte del navegador para HTML5

HTML5 es un trabajo en progreso. Sin embargo, todos los principales navegadores (Chrome, Firefox, Internet Explorer, Safari, Opera) apoyan a los nuevos elementos de HTML5 y APIs, y continan agregando nuevas caractersticas 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.
HTML5 Nuevos Elementos

Anterior Captulo Siguiente
Nuevos elementos en HTML5

El Internet y el uso de la Internet, ha cambiado mucho desde 1999, cuando HTML 4.01 convirti en un estndar.
Hoy en da, varios elementos en HTML 4.01 son obsoletos, nunca utilizado, o no se utiliza 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 da, HTML5 tambin ha incluido nuevos elementos para la elaboracin de grficos, que muestran el contenido de los medios de comunicacin, para una mejor estructura de la pgina y un mejor manejo de formularios, y varias nuevas API para arrastrar y soltar, para buscar su ubicacin geolgica, para el almacenamiento de datos locales, y ms. A continuacin se muestra una lista de los nuevos elementos HTML, introducidos por HTML5, y una descripcin de lo que se utilizan.
El elemento nuevo <canvas>

Nota: Los enlaces en los cuadros que siguen apuntan a nuestro HTML 5 Referencia . Sin embargo, usted aprender ms acerca de estos nuevos elementos en este tutorial. Tag <canvas> Description Defines graphic drawing using JavaScript
Nuevos elementos Medios

Tag <audio> <video> <source> <track> <embed> Description Defines sound or music content Defines video or movie content Defines sources for <video> and <audio> Defines tracks for <video> and <audio> Defines containers for external applications (like plug-ins)
Nuevos Elementos Form

Tag <datalist> <keygen> <output> Description Defines pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation
Nueva Semantic Elements / Estructural

HTML5 ofrece nuevos elementos para una mejor estructura: Tag <header> <nav> <section> <article> <aside> <footer> <details> <summary> <figure> <figcaption> <mark> Description Defines a header for the document or a section Defines navigation links in the document Defines a section in the document Defines an article in the document Defines content aside from the page content Defines a footer for the document or a section Defines additional details that the user can view or hide Defines a visible heading for a <details> element Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a <figure> element Defines marked or highlighted text
<time> <bdi> <wbr> <dialog> <command> <meter> <progress> <ruby> <rt> <rp>
Defines a date/time
Defines a part of text that might be formatted in a different direction from other text ou Defines a possible line-break Defines a dialog box or window Defines a command button that a user can invoke Defines a scalar measurement within a known range (a gauge) Defines the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations
Elementos eliminados
El siguiente cdigo 4.01 elementos se ha removido del HTML5: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
HTML5 semntico Elementos

Anterior
Captulo Siguiente
Semntica = Significado. Elementos semnticos = Los elementos con significado.
Cules son los elementos semnticos?

Un elemento semntico describe claramente su significado tanto para el navegador y el desarrollador. Los ejemplos de no-semnticos elementos: <div> y <span> - dice nada acerca de su contenido. Ejemplos de semnticas elementos: <form>, <table> y <img> - define claramente su contenido.
Soporte del navegador
Internet Explorer 9 +, Firefox, Chrome, Safari y Opera soporta los elementos semnticos descritos en este captulo. Nota: Internet Explorer 8 y versiones anteriores no admite estos elementos. Sin embargo, no es una solucin. Mira al final de este captulo.
Nuevos elementos semnticos en HTML5

Muchos de los sitios web existentes hoy contiene cdigo HTML as: <div id="nav">, <div class="header"> o id="footer"> <div, para indicar los enlaces de navegacin, encabezado y pie de pgina. HTML5 ofrece nuevos elementos semnticos para definir claramente las diferentes partes de una pgina web: <header> <nav> <section>
<article> <aside> <figure> <figcaption> <footer> <details> <summary> <mark> <hora>
Elemento HTML5 <section>

El elemento <section> define una seccin de un documento. De acuerdo con la documentacin del W3C HTML5: "Una seccin es una agrupacin temtica de los contenidos, por lo general con un ttulo."
Ejemplo <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, autnomo. Un artculo debe tener sentido por s misma y que debera 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
Ejemplo <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>
Pruebe usted mismo
Elemento HTML5 <nav>

El elemento <nav> define un conjunto de vnculos de navegacin. El elemento <nav> est destinado para grandes bloques de enlaces de navegacin. Sin embargo, no todos los enlaces en un documento deben estar dentro de un elemento <nav>!
Ejemplo <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
Pruebe usted mismo
Elemento HTML5 <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.
Ejemplo <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>
Pruebe usted mismo
Elemento HTML5 <header>

El elemento <header> especifica un encabezado de un documento o seccin. El elemento <header> debe utilizarse como un contenedor para el contenido introductoria. Usted puede tener varios elementos <header> en un solo documento. El ejemplo siguiente define una cabecera de un artculo:
Ejemplo <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>
Pruebe usted mismo
Elemento HTML5 <footer>

El elemento <footer> especifica un pie de pgina de un documento o seccin. Un elemento <footer> debe contener informacin acerca de su elemento contenedor. Un pie de pgina suele contener el autor del documento, informacin de derechos de autor, enlaces a trminos de uso, informacin de contacto, etc Usted puede tener varios elementos <footer> en un solo documento.
Ejemplo <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>
Pruebe usted mismo
HTML5 <figure> y Elementos <figcaption>

La etiqueta <figure> especifica el contenido en s misma, como ilustraciones, diagramas, fotos, listados de cdigo, etc Mientras que el contenido del elemento <figure> est relacionada con el flujo principal, su posicin es independiente del flujo principal, y si se quita no debera afectar el flujo del documento. La etiqueta <figcaption> define un ttulo para un elemento <figure>. El elemento <figcaption> puede ser colocado como el primer o el ltimo hijo del elemento <figure>.
Ejemplo <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure>
Pruebe usted mismo
Podemos empezar a utilizar estos elementos semnticos?

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):
header, section, footer, aside, nav, article, figure { display: block; }
Problema con Internet Explorer 8 y versiones anteriores

IE8 y anteriores no sabe cmo 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 solucin de JavaScript llamada HTML5 Shiv ; para que el estilo de los elementos de HTML5 en versiones de Internet Explorer anteriores a la versin 9. Usted puede descargar y leer ms sobre el HTML5 Shiv en: http://code.google.com/p/html5shiv/ Para permitir que el HTML5 Shiv (despus de la descarga), inserte el cdigo siguiente en el elemento <head>:


El cdigo anterior es un comentario que slo 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.
Elementos semnticos en HTML5

A continuacin se muestra una lista alfabtica de los nuevos elementos semnticos en HTML5. La enlaces va a nuestra referencia completa de etiquetas HTML 4/5. Tag <article> <aside> <details> <figcaption> <figure> <footer> <header> <mark> <nav> <section> <summary> <time> Description Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a <figure> element
Specifies self-contained content, like illustrations, diagrams, photos, code listings Defines a footer for a document or section Specifies a header for a document or section Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a <details> element Defines a date/time
HTML5 Tipos de entrada

HTML5 nuevos tipos de entrada
HTML5 tiene varios nuevos tipos de entrada de formularios. Estas nuevas caractersticas permiten un mejor control de entrada y validacin. Este captulo trata de los nuevos tipos de entrada: color fecha datetime -datetime locales email mes nmero alcance bsqueda tel tiempo url semana
No todos los navegadores son compatibles con todos los nuevos tipos de entrada. Sin embargo, ya empezar a usarlas, y si no son compatibles, se comportarn los campos de texto como regulares.
Tipo de entrada: Color

El tipo de color se utiliza para los campos de entrada que deben contener un color.
Ejemplo
Seleccione un color de un selector de color:
Select your favorite color: <input type="color" name="favcolor">

Pruebe usted mismo
Tipo de entrada: Fecha

El tipo de fecha permite al usuario seleccionar una fecha.
Ejemplo
Definir un control de la fecha:
Birthday: <input type="date" name="bday">

Pruebe usted mismo
Tipo de entrada: fecha y hora

El tipo de fecha y hora permite al usuario seleccionar una fecha y hora (con zona horaria).
Ejemplo
Definir una fecha y control de tiempo (con la zona horaria):
Birthday (date and time): <input type="datetime" name="bdaytime">

Pruebe usted mismo
Tipo de entrada:-datetime locales

El tipo de fecha y hora local permite al usuario seleccionar una fecha y hora (sin zona horaria).
Ejemplo
Definir una fecha y control de tiempo (sin zona horaria):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Pruebe usted mismo
Tipo de entrada: correo electrnico

El tipo de correo electrnico se utiliza para campos de entrada que deben contener una direccin de correo electrnico.
Ejemplo
Definir un campo para la direccin de correo electrnico (se validarn automticamente cuando se presente):
E-mail: <input type="email" name="email">

Pruebe usted mismo
Consejo: Safari en el iPhone reconoce el tipo de correo electrnico, y cambia el teclado de la pantalla para que coincida con l (aade @ y las opciones de com.).
Tipo de entrada: mes

El tipo meses permite al usuario seleccionar un mes y ao.
Ejemplo
Definir un mes y el control de ao (sin zona horaria):
Birthday (month and year): <input type="month" name="bdaymonth">

Pruebe usted mismo
Tipo de entrada: Nmero
El tipo de nmero se utiliza para campos de entrada que deben contener un valor numrico. Tambin puede establecer restricciones en lo que se aceptan los nmeros:
Ejemplo
Definir un campo numrico (con restricciones):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Pruebe usted mismo
Utilice los siguientes atributos para especificar restricciones: max - especifica el valor mximo permitido min - especifica el valor mnimo permitido paso - especifica los intervalos de nmeros legales valor - Especifica el valor predeterminado
Pruebe un ejemplo con todos los atributos de la restriccin: Prubelo usted mismo
Tipo de entrada: Rango

El tipo de rango se utiliza para campos de entrada que debe contener un valor de un rango de nmeros. Tambin puede establecer restricciones en lo que se aceptan nmeros.
Ejemplo
Definir un control para introducir un nmero cuyo valor exacto no es importante (como un control deslizante):
<input type="range" name="points" min="1" max="10">

Pruebe usted mismo
Utilice los siguientes atributos para especificar restricciones:
max - especifica el valor mximo permitido min - especifica el valor mnimo permitido paso - especifica los intervalos de nmeros legales valor - Especifica el valor predeterminado
Tipo de entrada: bsqueda

El tipo de bsqueda se utiliza para los campos de bsqueda (un campo de bsqueda se comporta como un campo de texto normal).
Ejemplo
Definir un campo de bsqueda (como una bsqueda en el sitio, o la bsqueda de Google):
Search Google: <input type="search" name="googlesearch">

Pruebe usted mismo
Tipo de entrada: tel

Ejemplo
Definir un campo para introducir un nmero de telfono:
Telephone: <input type="tel" name="usrtel">

Pruebe usted mismo
Tipo de entrada: el tiempo

El tipo de tiempo permite al usuario seleccionar la vez.
Ejemplo
Definir un control para introducir una hora (sin zona horaria):
Select a time: <input type="time" name="usr_time">

Pruebe usted mismo
Tipo de entrada: url

El tipo url se utiliza para campos de entrada que deben contener una direccin URL. El valor del campo url se valida automticamente cuando se enva el formulario.
Ejemplo
Definir un campo para introducir una URL:
Add your homepage: <input type="url" name="homepage">

Pruebe usted mismo
Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado de la pantalla para que coincida con l (aade opcin com.).
Tipo de entrada: semana

El tipo de semana permite al usuario seleccionar una semana y el ao.
Ejemplo
Definir una semana y el control ao (sin zona horaria):
Select a week: <input type="week" name="week_year">

Pruebe usted mismo
HTML5 <input> Tag

Tag <input> Description Defines an input control
HTML5 elementos de formulario

HTML5 Nuevos Elementos Form

HTML5 tiene los siguientes nuevos elementos de formulario: <datalist> <keygen> <output>
No todos los navegadores son compatibles con todos los nuevos elementos de formulario. Sin emb puede empezar a usarlas, y si no son compatibles, se comportarn los campos de texto como regu
Elemento HTML5 <datalist>

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>. El elemento <datalist> se utiliza para proporcionar una funcin de "autocompletar" en <input> elementos. Los usuarios podrn ver una lista desplegable de opciones predefinidas, ya que los datos de entrada. Utilice el atributo de lista del elemento <input> para obligar a ste junto con un elemento <datalist>.
Ejemplo
Un elemento <input> con los valores predefinidos en un <datalist>:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Pruebe usted mismo
Elemento HTML5 <keygen>

El propsito del elemento de <keygen> es proporcionar una forma segura para autenticar usuarios. La etiqueta <keygen> especifica un campo generador de par de claves en un formulario. Cuando se enva el formulario, dos claves se generan, una privada y una pblica. La clave privada se almacena localmente, y la clave pblica se enva al servidor. La clave pblica se podra utilizar para generar un certificado de cliente para autenticar el usuario en el futuro.
Ejemplo
Un formulario con un campo keygen:
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
Pruebe usted mismo
Elemento HTML5 <output>

El elemento <output> representa el resultado de un clculo (como uno realizado por un script).
Ejemplo
Realice un clculo y mostrar el resultado en un elemento <output>:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
Pruebe usted mismo
HTML5 Nuevos Elementos Form

Tag <datalist> <keygen> <output> Description Specifies a list of pre-defined options for an <input> element Specifies a key-pair generator field in a form Represents the result of a calculation
HTML5 Nuevo formulario Atributos

HTML5 tiene varios nuevos atributos para <form> y <input>. Nuevos atributos para <form>: autocomplete novalidate
Nuevos atributos para <input>:
autocomplete enfoque automtico forma formAction formenctype formmethod formnovalidate formtarget la altura y el ancho lista min y max mltiple patrn (expresin regular) marcador de posicin necesario paso
<form> / <input> autocompletar Atributo

El atributo autocomplete especifica si un formulario o campo de entrada deben tener autocompletar encendido o apagado. Cuando autocompletado est activado, el navegador automticamente los valores completos basa en valores que el usuario ha introducido antes. Consejo: Es posible tener autocompletar "on" para el formulario, y "off" para los campos de entrada especficos, o viceversa. Nota: El atributo autocomplete trabaja con <form> y los siguientes tipos <input>: texto, bsqueda, url, telfono, correo electrnico, contrasea, datepickers, variedad y color.
Ejemplo
Un formulario HTML con autocompletado (y apagar de un campo de entrada):
<form action="demo_form.asp" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
Pruebe usted mismo
Sugerencia: En algunos navegadores puede que tenga que activar la funcin de autocompletar para que esto funcione.
<form> novalidate Atributo

El atributo novalidate es un atributo booleano. Cuando est presente, especifica que los form-data (entrada) no deben ser validados cuando se presenten.
Ejemplo
Indica que el formulario no debe ser validado en enviar:
<form action="demo_form.asp" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
Pruebe usted mismo
<input> autofocus Atributo

El atributo autofocus es un atributo booleano. Cuando est presente, especifica que un elemento <input> automticamente debe obtener el foco cuando se carga la pgina.
Ejemplo
Deja que el "Nombre" campo de entrada recibe automticamente el enfoque cuando se carga la pgina:
First name:<input type="text" name="fname" autofocus>

Pruebe usted mismo
forma <input> Atributo

El atributo formulario especifica una o ms formas de un elemento <input> pertenece. Consejo: Para hacer referencia a ms de una forma, utilice una lista separada por espacios de identificadores de formulario.
Ejemplo
Un campo de entrada situado fuera del formulario HTML (pero sigue siendo una parte del formulario):
<form action="demo_form.asp" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">
Pruebe usted mismo
<input> formAction Atributo

El atributo formAction especifica la URL de un archivo que va a procesar el control de entrada cuando se enva el formulario. El atributo formAction anula el atributo action del elemento <form>. Nota: El atributo formAction se utiliza con type = "submit" y type = "image".
Ejemplo
Un formulario HTML con dos botones de envo, con diferentes acciones:
<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form>
Pruebe usted mismo
<input> formenctype Atributo

El atributo formenctype especifica cmo se deben codificar los form-data al presentar al servidor (slo para formularios con method = "post") El atributo formenctype anula el atributo enctype del elemento <form>.
Nota: El atributo formenctype se utiliza con type = "submit" y type = "image".
Ejemplo
Enviar form-data que es codificada por defecto (el primer botn de envo), y se codifica como "multipart / form-data" (el segundo botn de envo):
<form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>
Pruebe usted mismo
<input> formmethod Atributo

El atributo formmethod define el mtodo HTTP para enviar-datos del formulario a la URL de accin. El atributo formmethod anula el atributo method del elemento <form>. Nota: El atributo formmethod se puede utilizar con type = "submit" y type = "image".
Ejemplo
El segundo botn de enviar reemplaza el mtodo HTTP de la forma:
<form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"> </form>
Pruebe usted mismo
<input> formnovalidate Atributo

El atributo novalidate es un atributo booleano.
Cuando est presente, especifica que el elemento <input> no debe ser validado cuando se presenten. El atributo formnovalidate anula el atributo novalidate del elemento <form>. Nota: El atributo formnovalidate se puede utilizar con type = "submit".
Ejemplo
Un formulario con dos botones de envo (con y sin validacin):
<form action="demo_form.asp"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form>
Pruebe usted mismo
<input> formtarget Atributo

El atributo formtarget especifica un nombre o una palabra clave que indica el lugar para mostrar la respuesta que se recibe despus de enviar el formulario. El atributo formtarget anula el atributo target del elemento <form>. Nota: El atributo formtarget se puede utilizar con type = "submit" y type = "image".
Ejemplo
Un formulario con dos botones de envo, con diferentes ventanas de destino:
<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form>
Pruebe usted mismo
<input> atributos de altura y anchura

Los atributos de altura y anchura especifican la altura y el ancho de un elemento <input>. Nota: Los atributos de altura y anchura se utilizan nicamente con type="image"> <input. Consejo: Siempre especifique la altura y anchura de los atributos de las imgenes. Si se establecen altura y la anchura, el espacio requerido para la imagen est reservado cuando se carga la pgina. Sin embargo, sin estos atributos, el navegador no sabe el tamao de la imagen, y no puede reservar el espacio correspondiente a la misma. El efecto ser que el diseo de la pgina va a cambiar durante la carga (mientras que las imgenes se cargan).
Ejemplo
Definir una imagen como el botn de enviar, con atributos height y width:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Pruebe usted mismo
lista <input> Atributo

El atributo de la lista se refiere a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.
Ejemplo
Un elemento <input> con los valores predefinidos en un <datalist>:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Pruebe usted mismo
min <input> y atributos max

El mnimo y el mximo de atributos especifica el valor mnimo y mximo para un elemento <input>. Nota: El mnimo y mximo los atributos de las obras con los siguientes tipos de entrada: nmero, rango, fecha, fecha y hora,-fecha y hora locales, mes, hora y semana.
Ejemplo
<input> elementos con valores mnimo y mximo:
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Pruebe usted mismo
<input> mltiple Atributo

El atributo mltiple es un atributo booleano. Cuando est presente, especifica que se permite que el usuario introduzca ms de un valor en el elemento <input>. Nota: El atributo mltiple trabaja con los siguientes tipos de entrada: correo electrnico, y archivo.
Ejemplo
Un campo de carga de archivos que acepta varios valores:
Select images: <input type="file" name="img" multiple>

Pruebe usted mismo
patrn <input> Atributo

El atributo de patrn especifica una expresin regular que el valor del elemento <input> se coteja. Nota: El atributo patrn trabaja con los siguientes tipos de entrada: texto, bsqueda, url, tel, correo electrnico y contrasea. Consejo: Utilice el mundial ttulo atributo para describir el patrn para ayudar al usuario. Consejo: Aprenda ms acerca de las expresiones regulares en nuestro tutorial JavaScript.
Ejemplo
Un campo de entrada que puede contener slo tres letras (no hay nmeros o caracteres especiales):
Country code: <input type="text" name="country_code" pattern="[A-Zaz]{3}" title="Three letter country code">
Pruebe usted mismo
<input> marcador de posicin Atributo

El atributo placeholder especifica una pista corta que describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripcin del formato esperado). La corta pista se muestra en el campo de entrada antes de que el usuario introduce un valor. Nota: El atributo placeholder funciona con los siguientes tipos de entrada: texto, bsqueda, url, tel, correo electrnico y contrasea.
Ejemplo
Un campo de entrada con un texto de marcador de posicin:
<input type="text" name="fname" placeholder="First name">

Pruebe usted mismo
<input> Atributo requerido

El atributo requerido es un atributo booleano. Cuando est presente, especifica que un campo de entrada debe ser completado antes de enviar el formulario. Nota: El atributo requerido trabaja con los siguientes tipos de entrada: texto, bsqueda, url, tel, correo electrnico, contrasea, selectores de fecha, nmero, casilla de verificacin, la radio y los archivos.
Ejemplo
Un campo de entrada deseado:
Username: <input type="text" name="usrname" required>

Pruebe usted mismo
<input> paso Atributo

El atributo paso especifica los intervalos de nmeros legales para un elemento <input>. Ejemplo: si el paso = "3", los nmeros legales podra ser -3, 0, 3, 6, etc Consejo: El atributo de paso se puede utilizar junto con el mximo y el mnimo de atributos para crear un rango de valores legales. Nota: El atributo de paso funciona con los siguientes tipos de entrada: nmero, rango, fecha, fecha y hora,-fecha y hora locales, mes, hora y semana.
Ejemplo
Un campo de entrada con intervalos de nmeros legales especificados:
<input type="number" name="points" step="3">

Pruebe usted mismo
HTML5 <input> Tag

Tag <form> <input> Description Defines an HTML form for user input Defines an input control
HTML5 Canvas
El elemento <canvas> se utiliza para dibujar grficos, sobre la marcha, en una pgina web. El ejemplo de la izquierda muestra un rectngulo rojo, un rectngulo gradiente, un rectngulo multicolor, y un poco de texto multicolor que se dibuja en el lienzo.
Qu es el lienzo?
El elemento <canvas> HTML5 se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript). El elemento <canvas> es slo un contenedor de grficos. Se debe utilizar una secuencia de comandos para dibujar realmente los grficos. Canvas tiene varios mtodos para caminos de dibujo, cuadros, crculos, texto y agregar imgenes.
Internet Explorer 9 +, Firefox, Opera, Chrome y Safari soportan el elemento <canvas>. Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <canvas>.
Crear un lienzo
Un lienzo es un rea rectangular en una pgina 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 tamao del lienzo. Consejo: Puede tener varios elementos <canvas> en una pgina HTML. Para aadir un borde, utilice el atributo de estilo:
Ejemplo <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

Pruebe usted mismo
Dibuje en el lienzo con javascript

Todo dibujo en el lienzo se debe hacer dentro de un JavaScript:
Ejemplo <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script>
Pruebe usted mismo
Ejemplo explic: En primer lugar, encontrar el elemento <canvas>:
var c = document.getElementById("myCanvas");
Luego, llame a su mtodo getContext () (hay que pasar la cadena "2d" al getContext (mtodo)):
var ctx = c.getContext("2d");

El objeto getContext ("2d") es un objeto incorporado HTML5, con muchas propiedades y mtodos para dibujar trazados, cuadros, crculos, texto, imgenes y ms. Las siguientes dos lneas dibujan un rectngulo rojo:
ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);

La propiedad fillStyle puede ser un color CSS, un degradado o un patrn. El fillStyle defecto es # 000000 (negro). El fillRect ( x, y, ancho, alto mtodo) dibuja un rectngulo relleno con el estilo de relleno actual.
Lienzo Coordenadas
La tela es una rejilla de dos dimensiones. La esquina superior izquierda del lienzo ha de coordenadas (0,0) As, el mtodo fillRect () anterior tena los parmetros (0,0,150,75). Esto significa: Comienza en la esquina superior izquierda (0,0) y dibuje un rectngulo 150x75 pxeles. Coordina Ejemplo Pase el ratn sobre el rectngulo de abajo para ver su coordenadas X e Y: X Y
Lienzo - Caminos
Para dibujar lneas rectas en un lienzo, vamos a utilizar los dos mtodos siguientes: moveTo ( x, y ) define el punto inicial de la lnea lineTo ( x, y ) define el punto final de la lnea
Para dibujar la lnea en realidad, hay que utilizar uno de los mtodos de "tinta", como el accidente cerebrovascular ().
Ejemplo
Definir un punto de partida en la posicin (0,0), y un punto final en la posicin (200.100). A continuacin, utilice el mtodo () Carrera dibujar realmente la lnea: JavaScript:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

Pruebe usted mismo
Para dibujar un crculo en un lienzo, utilizaremos el siguiente mtodo: arco (x, y, r, iniciar, detener)
Para dibujar el crculo en realidad, hay que utilizar uno de los mtodos de "tinta", como accidente cerebrovascular () o rellenar ().
Ejemplo
Crear un crculo con el mtodo de arco (): JavaScript:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Pruebe usted mismo
Lienzo - Texto
Para dibujar texto en un lienzo, la propiedad y los mtodos ms importantes son: fuente - 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 una alta 30px texto lleno en el lienzo, utilizando el tipo de letra "Arial": JavaScript:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
Pruebe usted mismo
Uso de strokeText ():
Ejemplo
Escribir un texto de alto 30px (sin relleno) en el lienzo, utilizando el tipo de letra "Arial": JavaScript:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50);
Pruebe usted mismo
Lienzo - Degradados
Los gradientes se pueden utilizar para llenar rectngulos, crculos, lneas, texto, etc formas en el lienzo no se limitan a los colores slidos.
Hay dos tipos diferentes de gradientes: createLinearGradient ( x, y, x1, y1 ) - Crea un degradado lineal createRadialGradient ( x, y, r, x1, y1, r1 ) - Crea un radial / degradado circular
Una vez que tenemos un objeto degradado, hay que sumar dos o ms etapas de color. El mtodo addColorStop () especifica las paradas de color, y su posicin 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 rectngulo, texto, o una lnea. Uso de createLinearGradient ():
Ejemplo
Crear un degradado lineal. Rellene rectngulo con el gradiente: JavaScript:
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);
Pruebe usted mismo
Uso de createRadialGradient ():
Ejemplo
Crear un degradado radial / circular. Rellene rectngulo con el gradiente: JavaScript:
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);

Pruebe usted mismo
Lienzo - Imgenes
Para dibujar una imagen en un lienzo, utilizaremos el siguiente mtodo: drawImage ( imagen, x, y )
Imagen de usar:
Ejemplo
Dibuja la imagen en el lienzo: JavaScript:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10);
Pruebe usted mismo
HTML Canvas Referencia

Para una referencia completa de todas las propiedades y mtodos que se pueden utilizar con el objeto Canvas (con ejemplos try-it en cada propiedad y mtodo), vaya a nuestra Referencia Canvas.
El HTML <canvas> Tag

Tag <canvas> Description Used to draw graphics, on the fly, via scripting (usually JavaScript)
HTML5 Inline SVG

HTML5 tiene soporte para SVG inline.
Qu es SVG?
SVG significa Scalable Vector Graphics SVG se utiliza para definir los grficos basados en vectores para la web SVG define los grficos en formato XML Grficos SVG no se pierde ninguna calidad si has o cambiar el tamao de Cada elemento y cada atributo en archivos SVG se pueden animar SVG es una recomendacin de W3C
SVG Ventajas
Ventajas del uso de SVG sobre otros formatos de imgenes (como JPEG y GIF) son: Imgenes SVG se pueden crear y editar con cualquier editor de texto Imgenes SVG se pueden buscar, indexar, con guin, y se comprimen
Imgenes SVG escalan Imgenes SVG se pueden imprimir con alta calidad en cualquier resolucin Imgenes SVG son ampliable (y la imagen se pueden ampliar sin degradacin)
Internet Explorer 9 +, Firefox, Opera, Chrome y Safari soporta Inline SVG.
Insertar SVG directamente en pginas HTML

En HTML5, puede incrustar elementos SVG directamente en su pgina HTML:
Ejemplo
<!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>
Pruebe usted mismo
Resultado: Para aprender ms sobre SVG, por favor lea nuestra Tutorial SVG .
Diferencias entre SVG y Canvas

SVG es un lenguaje para describir grficos 2D en XML. Lienzo dibuja grficos 2D, sobre la marcha (con un JavaScript).
SVG est basado en XML, lo que significa que cada elemento est disponible dentro de la SVG DOM. Puede asociar controladores de eventos de JavaScript para un elemento. En SVG, cada figura dibujada es recordado como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede automticamente volver a hacer la forma. Lienzo se representa pxel por pxel. En la lona, una vez que el grfico se dibuja, se olvida por el navegador. Si su posicin se debe cambiar, toda la escena tiene que ser rediseado, incluyendo los objetos que podran haber sido incluidos en el grfico.
Comparativa de Canvas y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG: Canvas Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games SVG
Resolution independent Support for event handlers Best suited for applications with large renderin (Google Maps) Slow rendering if complex (anything that uses will be slow) Not suited for game applications
HTML5 video
Muchos sitios web modernos muestran videos. HTML5 proporciona un estndar para mostrarlos. Compruebe si su navegador soporta vdeo HTML5 Check
Video en la Web
Antes de HTML5, no haba ninguna norma para mostrar videos / pelculas en pginas web.
Antes de HTML5, los videos slo pueden ser jugados con un plug-in (como flash). Sin embargo, los diferentes navegadores soportados diferentes plug-ins. HTML5 define un nuevo elemento que especifica un mtodo estndar para incrustar un vdeo o una pelcula en una pgina 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 <video>.
HTML5 Video - Cmo funciona?

Para mostrar un vdeo en HTML5, esto es todo lo que necesita:
Ejemplo <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>
Pruebe usted mismo
El atributo de control aade controles de vdeo, como reproduccin, pausa y volumen. Tambin 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 pgina. Sin embargo, sin estos atributos, el navegador no sabe el tamao del vdeo, y no puede reservar el espacio correspondiente a la misma. El efecto ser que el diseo de la pgina va a cambiar durante la carga (mientras se carga el vdeo). Tambin debe insertar el contenido del texto entre el <video> y </ video> etiquetas para los navegadores que no soportan el elemento <video>. El elemento <video> permite que varios elementos <source>. <source> elementos pueden vincular a diferentes archivos de vdeo. El navegador usar el primer formato reconocido.
Formatos de vdeo y Soporte del navegador

Actualmente, hay 3 formatos de vdeo compatibles con el elemento <video>: MP4, WebM, Ogg y: Browser Internet Explorer Chrome Firefox MP4 YES YES NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4 YES NO WebM NO YES YES
Safari Opera
NO YES
MP4 = MPEG 4 archivos con el codec de video H264 y AAC codec de audio WebM = WebM archivos con cdec de vdeo VP8 y el cdec de audio Vorbis Ogg = Ogg archivos con el codec de vdeo Theora y Vorbis codec de audio
Tipos MIME para Formatos de vdeo

Format MP4 WebM Ogg MIME-type video/mp4 video/webm video/ogg
HTML5 <video> - Mtodos y propiedades DOM

HTML5 tiene mtodos DOM, propiedades y eventos para la <video> y <audio>.
Estos mtodos, propiedades y eventos le permiten manipular <video> y <audio> uso de JavaScript. Existen mtodos para reproducir, pausar, y la carga, por ejemplo, y hay propiedades (como la duracin y el volumen).Tambin hay eventos de DOM que se le notifique cuando el elemento <video> comienza a jugar, est en pausa, se terminaron, etc El siguiente ejemplo ilustra, de una manera sencilla, la forma de abordar un elemento <video>, leer y establecer propiedades y llamar a mtodos.
Ejemplo 1
Crear sencilla reproduccin / pausa + tamao de los controles de un vdeo:
Play/Pause Big Small Normal
Video courtesy of Big Buck Bunny.

El ejemplo anterior llama a dos mtodos: play () y pausa (). Tambin utiliza dos propiedades: pausadas y anchura.
Pruebe usted mismo
Para una referencia completa visite nuestro HTML5 Audio / Video Referencia DOM .
HTML5 video Etiquetas

Tag <video> <source> <track> Description Defines a video or movie
Defines multiple media resources for media elements, such as <video> and <aud Defines text tracks in media players
HTML5 Audio
HTML5 proporciona un estndar para la reproduccin de archivos de audio.
Audio en la Web
Antes de HTML5, no haba ninguna norma para la reproduccin de archivos de audio en una pgina web. Antes de HTML5, archivos de audio tuvieron que ser jugado con un plug-in (como flash). Sin embargo, los diferentes navegadores soportados diferentes plug-ins. HTML5 define un nuevo elemento que especifica un mtodo estndar para incrustar un archivo de audio en una pgina web: el elemento <audio>.
Internet Explorer 9 +, Firefox, Opera, Chrome y Safari soportan el elemento <audio>. Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <audio>.
HTML5 de audio - Cmo funciona

Para reproducir un archivo de audio en HTML5, esto es todo lo que necesita:
Ejemplo <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Pruebe usted mismo
El atributo de control aade controles de audio, como reproduccin, pausa y volumen. Tambin debe insertar el contenido del texto entre el <audio> y </ audio> etiquetas para los navegadores que no soportan el elemento <audio>.
El elemento <audio> permite que varios elementos <source>. <source> elementos pueden vincular a diferentes archivos de audio. El navegador usar el primer formato reconocido.
Formatos de Audio y Soporte del navegador

Actualmente, hay 3 formatos de archivo admitidos para el elemento <audio>: MP3, WAV y OGG: Browser Internet Explorer Chrome Firefox MP3 YES YES NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 YES NO Wav NO YES YES
Safari Opera
YES YES
Tipos MIME para los formatos de audio

Format MP3 Ogg Wav MIME-type audio/mpeg audio/ogg audio/wav
HTML5 Audio Tags
Tag <audio> <source>
Description Defines sound content
Defines multiple media resources for media elements, such as <video> and <audi
HTML5 Geolocalizacin
HTML5 Geolocalizacin se utiliza para localizar la posicin de un usuario Intntelo
Localice la posicin del usuario

La API de HTML5 Geolocalizacin se utiliza para obtener la posicin geogrfica de un usuario. Dado que esto puede comprometer la privacidad del usuario, la posicin no est disponible a menos que el usuario lo aprueba.
Internet Explorer 9 +, Firefox, Chrome, Safari y Opera Geolocalizacin apoyo. Nota: Geolocalizacin es mucho ms preciso para los dispositivos con GPS, como el iPhone.
HTML5 - El uso de Geolocalizacin

Utilice el mtodo getCurrentPosition () para obtener la posicin del usuario. El ejemplo a continuacin es un ejemplo sencillo Geolocalizacin devolver la latitud y longitud de la posicin del usuario:
Ejemplo <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML = "Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
Pruebe usted mismo
Ejemplo explic: Compruebe si se admite Geolocalizacin Si se admite, ejecutar el mtodo getCurrentPosition (). Si no, mostrar un mensaje al usuario Si el mtodo getCurrentPosition () tiene xito, devuelve un objeto coordenadas de la funcin especificada en el parmetro (ShowPosition) La funcin ShowPosition () obtiene las pantallas de la Latitud y Longitud
El ejemplo anterior es un script muy bsico Geolocalizacin, sin control de errores.
Controlar errores y Rechazos

El segundo parmetro del mtodo getCurrentPosition () se utiliza para controlar los errores. Especifica una funcin a ejecutar en caso de no obtener la ubicacin del usuario:
Ejemplo function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break;
case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }
Pruebe usted mismo
Cdigos de error: Permiso denegado - El usuario no permiti Geolocalizacin Posicin no disponible - No es posible obtener la ubicacin actual Tiempo de espera - La operacin ha agotado
Viendo el resultado en un mapa

Para mostrar el resultado en un mapa, es necesario tener acceso a un servicio de mapas que pueden utilizar la latitud y longitud, como Google Maps:
Ejemplo function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; }
Pruebe usted mismo
En el ejemplo anterior usamos la latitud regresado y los datos de longitud para mostrar la ubicacin en un mapa de Google (con una imagen esttica).
Google Map Guin Cmo utilizar una secuencia de comandos para mostrar un mapa interactivo con un marcador, zoom y las opciones de arrastrar.
Informacin especfica de la ubicacin

Esta pgina demuestra cmo mostrar la posicin del usuario en un mapa. Sin embargo, la geolocalizacin tambin es muy til para obtener informacin especfica de la ubicacin. Ejemplos: Hasta a la fecha de la informacin local Mostrando puntos de inters cerca del usuario Turn-by-Turn Navigation (GPS)
El getCurrentPosition () Mtodo - Devolver datos

El mtodo getCurrentPosition () devuelve un objeto si tiene xito. Las propiedades de latitud, longitud y precisin siempre se devuelven. Las otras propiedades por debajo se devuelven si est disponible. Property coords.latitude coords.longitude coords.accuracy coords.altitude Description The latitude as a decimal number The longitude as a decimal number The accuracy of position The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position coords.heading coords.speed timestamp The heading as degrees clockwise from North The speed in meters per second The date/time of the response
Objeto Geolocalizacin - Otros mtodos interesantes

watchPosition () - Devuelve la posicin actual del usuario y contina devolviendo posicin actualizada como el usuario se mueve (como el GPS en un coche). clearWatch () - Detiene el mtodo () watchPosition. El siguiente ejemplo muestra el mtodo watchPosition (). Usted necesita un dispositivo GPS precisa para probar esto (como el iPhone):
Ejemplo <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML = "Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
HTML5 Arrastrar y soltar

Arrastrar y soltar es una parte del estndar HTML5.
Arrastre la imagen W3Schools en el rectngulo.
Arrastrar y soltar
Arrastrar y soltar es una caracterstica muy comn. Es cuando se "agarra" un objeto y arrastrarlo a una ubicacin diferente. En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede ser arrastrable.
Internet Explorer 9 +, Firefox, Opera, Chrome y Safari de arrastrar y soltar el apoyo. Nota: Arrastrar y soltar no funciona en 5.1.2 de Safari.
HTML5 Ejemplo de Arrastrar y soltar

El siguiente ejemplo es un simple arrastrar y soltar ejemplo:
Ejemplo <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head>
<body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" </body> </html>
Pruebe usted mismo
Puede parecer complicado, pero vamos a ir a travs de todas las diferentes partes de un evento de arrastrar y soltar.
Hacer una Arrastrable Element

En primer lugar: Para que un elemento pueda arrastrar, establezca el atributo pueda arrastrar a true:
<img draggable="true">
Qu Arrastre - ondragstart y setData ()

A continuacin, especifique lo que debe suceder cuando se arrastra el elemento. En el ejemplo anterior, el atributo ondragstart llama a una funcin, arrastre (evento), que especifica qu datos se pueden arrastrar. El mtodo dataTransfer.setData () establece el tipo de datos y el valor de los datos arrastrados:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }

En este caso, el tipo de datos es "texto" y el valor es el id del elemento arrastrable ("drag1").
Donde Caiga - ondragover

El evento ondragover especifica dnde los datos arrastrados se pueden caer. Por defecto, los datos / elementos no se pueden quitar en otros elementos. Para permitir una cada, hay que evitar que el control predeterminado del elemento. Esto se hace llamando al mtodo () event.preventDefault para el evento ondragover:
event.preventDefault()
Haga lo Drop - ondrop

Cuando se deja caer los datos arrastrados, un evento de colocacin se produce. En el ejemplo anterior, el atributo ondrop llama a una funcin, la cada de (evento):
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }

Cdigo explic: Llame a preventDefault () para evitar la manipulacin por defecto del navegador de los datos (por defecto est abierto como enlace en la gota) Obtn los datos arrastrados con el mtodo ("Texto") dataTransfer.getData. Este mtodo devolver los datos que se establece en el mismo tipo en el setData () mtodo Los datos arrastrado es el id del elemento arrastrado ("drag1") Aada el elemento arrastrado en el elemento gota
HTML5 de almacenamiento Web

Almacenamiento web HTML5, mejor que las galletas.
Qu es HTML5 de almacenamiento Web?

Con HTML5, las pginas web pueden almacenar datos localmente en el navegador del usuario. Antes, esto se haca con las cookies. Sin embargo, de almacenamiento Web es ms seguro y ms rpido. Los datos no se incluye con cada peticin del servidor, pero es usado solamente cuando se le pide. Tambin es posible almacenar grandes cantidades de datos, sin afectar el rendimiento de la pgina web. Los datos se almacenan en pares nombre / valor, y una pgina web se puede acceder a los datos almacenados slo por s mismo. A diferencia de las cookies, el lmite de almacenamiento es mucho mayor (al menos 5 MB) y la informacin nunca se transfiere al servidor.
Almacenamiento Web es compatible en Internet Explorer 8 +, Firefox, Opera, Chrome y Safari. Nota: Internet Explorer 7 y versiones anteriores, no son compatibles con almacenamiento Web.
Objetos HTML5 de almacenamiento Web

HTML5 de almacenamiento Web ofrece dos nuevos objetos para el almacenamiento de datos en el cliente: window.localStorage - almacena los datos sin fecha de caducidad code.sessionStorage - almacena los datos para una sesin (los datos se pierden cuando la pestaa se cierra)
Antes de utilizar el almacenamiento web, compruebe la compatibilidad con exploradores para localStorage y sessionStorage:
if(typeof(Storage)!=="undefined") { // Code for localStorage/sessionStorage. } else
{ // Sorry! No Web Storage support.. }
El objeto localStorage
El objeto localStorage almacena los datos sin fecha de caducidad. No se eliminarn los datos cuando se cierra el navegador, y estarn disponibles al da siguiente, semana o ao.
Ejemplo // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML=localStorage.getItem("last name");

Pruebe usted mismo
Ejemplo explic: Crear un par nombre / valor localStorage con name = "apellido" y value = "Smith" Recuperar el valor de "apellido" y la inserta en el elemento con id = "nmero"
El ejemplo anterior tambin se puede escribir as:
// Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML=localStorage.lastname;

La sintaxis para eliminar el "apellido" elemento localStorage es el siguiente:
localStorage.removeItem("lastname");
Nota: Los pares nombre / valor siempre se guardan como cadenas. Recuerde que debe convertirlos a otro formato cuando sea necesario! El siguiente ejemplo se cuenta el nmero de veces que un usuario ha hecho clic en un botn. En este cdigo de la cadena de valor se convierte a un nmero para ser capaz de aumentar el contador:
Ejemplo
if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
Pruebe usted mismo
El objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesin. Los datos se eliminan cuando el usuario cierra la ventana del navegador. El siguiente ejemplo se cuenta el nmero de veces que un usuario ha hecho clic en un botn, en la sesin actual:
Ejemplo if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
HTML5 memoria cach de aplicaciones

Con HTML5, es fcil hacer una versin sin conexin de una aplicacin web, mediante la creacin de un archivo de manifiesto de cach.
Qu es la memoria cach de aplicaciones?

HTML5 introduce cach de la aplicacin, lo que significa que una aplicacin web se almacena en cach, y accesible sin una conexin a Internet. Cach de la aplicacin da una aplicacin tres ventajas: 1. Navegacin fuera de lnea - los usuarios pueden utilizar la aplicacin cuando estn fuera de lnea 2. Velocidad - recursos en cach se cargan ms rpido 3. Reduccin de la carga del servidor - el navegador slo descargar actualizado / recursos cambiado desde el servidor
Internet Explorer 10, Firefox, Chrome, Safari y Opera cach de aplicaciones de soporte.
HTML5 cach Manifiesto Ejemplo

El siguiente ejemplo muestra un documento HTML con un manifiesto de cach (para navegar sin conexin):
Ejemplo <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
Pruebe usted mismo
Cach Manifiesto Basics

Para habilitar la cach de la aplicacin, incluya el atributo manifest en etiqueta <html> del documento:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

Cada pgina con el atributo del manifiesto especificado se almacenan en cach cuando el usuario visita. Si no se especifica el atributo manifest, la pgina no se almacenan en cach (a menos que se especifique la pgina directamente en el archivo de manifiesto). La extensin de archivo recomendada para los archivos de manifiesto es: "AppCache."
Un archivo de manifiesto debe ser servido con el tipo MIME correcto , que es "text / cache-manif estar configurado en el servidor web.
El archivo de manifiesto
El archivo de manifiesto es un archivo de texto simple, que le dice al navegador qu cach (y lo que nunca cach). El archivo de manifiesto consta de tres secciones: MANIFIESTO CACHE - Archivos enumerados en esta cabecera se almacenan en cach despus de que se descarguen por primera vez RED - Los archivos listados bajo esta cabecera requieren una conexin al servidor, y nunca se almacenan en cach RPLICA - Archivos enumerados en esta cabecera especifica pginas de retorno si una pgina es inaccesible
MANIFIESTO CACHE
La primera lnea, CACHE MANIFEST, se requiere:
CACHE MANIFEST /theme.css
/logo.gif /main.js
El archivo de manifiesto anteriormente enumera tres recursos: un archivo CSS, una imagen GIF y un archivo JavaScript.Cuando se carga el archivo de manifiesto, el navegador descargar los tres archivos en el directorio raz del sitio web.Entonces, siempre que el usuario no est conectado a la Internet, los recursos seguirn estando disponibles.
RED
La seccin NETWORK siguiente especifica que el archivo "login.asp" nunca debe ser almacenado en cach, y no estar disponible sin conexin:
NETWORK: login.asp
Un asterisco se puede utilizar para indicar que todos los dems recursos / archivos requieren una conexin a Internet:
NETWORK: *
RPLICA
La seccin FALLBACK siguiente especifica que "offline.html" se sirve en lugar de todos los archivos en el directorio / html / catlogo, en caso de una conexin a Internet no se puede establecer:
FALLBACK: /html/ /offline.html

Nota: La primera URI es el recurso, el segundo es el de reserva.
La actualizacin de la memoria cach

Una vez que se almacena en cach una aplicacin, sta se mantiene en cach hasta que uno de los casos siguientes: El usuario borra la cach del navegador El archivo de manifiesto es modificado (ver siguiente consejo) El cach de la aplicacin se actualiza mediante programacin
Ejemplo - Cache completo archivo de manifiesto

CACHE MANIFEST # 2012-02-21 v1.0.0
/theme.css /logo.gif /main.js Un trabajador de web es un funcionamiento de JavaScript en el fondo, sin afectar el rendimiento de la pgina.
Qu es un Trabajador Web?
Al ejecutar secuencias de comandos en una pgina HTML, la pgina deja de responder hasta que se termine el guin. Un trabajador de la web es un JavaScript que se ejecuta en segundo plano, de forma independiente de otras secuencias de comandos, sin afectar el rendimiento de la pgina. Usted puede seguir haciendo lo que quiera: al hacer clic, seleccionar las cosas, etc, mientras que el trabajador web se ejecuta en segundo plano.
Trabajadores Web de soporte de Internet Explorer 10, Firefox, Chrome, Safari y Opera.
HTML5 Web Workers Ejemplo

El siguiente ejemplo crea un sencillo trabajador web que cuentan los nmeros en segundo plano:
Ejemplo Count numbers: Start Worker Stop Worker
Pruebe usted mismo
Compruebe Support Worker Web

Antes de crear un trabajador web, compruebe si el navegador del usuario lo permite:
if(typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
Crear un archivo de Web Worker

Ahora, vamos a crear nuestra trabajadora web en un JavaScript externo. Aqu, creamos un script que cuenta. La secuencia de comandos se almacena en el archivo "demo_workers.js":
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();

La parte importante del cdigo anterior es la postMessage () mtodo - que se utiliza para enviar un mensaje de vuelta a la pgina HTML. Nota: Los trabajadores web Normalmente no se utilizan para este tipo de scripts simples, pero para ms tareas intensivas de la CPU.
Crear un objeto Worker Web

Ahora que tenemos el archivo de trabajador web, tenemos que llamarlo desde una pgina HTML. Las siguientes lneas comprueba si ya existe el trabajador, si no - se crea un nuevo objeto trabajador web y ejecuta el cdigo en "demo_workers.js":
if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); }
Entonces podemos enviar y recibir mensajes desde el trabajador web. Aadir un "onmessage" detector de eventos para el trabajador web.
w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; };

Cuando los puestos de trabajadores web un mensaje, se ejecuta el cdigo dentro del detector de eventos. Los datos generados por el trabajador de web se almacenan en event.data.
Terminar un Trabajador Web

Cuando se crea un objeto trabajador web, se seguir escuchando los mensajes (incluso despus de la secuencia de comandos externo se termina) hasta que se termina. Poner fin a un trabajador de la web, y los recursos del navegador / sin computadora, utilice el terminar (mtodo):
w.terminate();
Completo Trabajador Web Ejemplo de cdigo

Ya hemos visto el cdigo de los trabajadores en el archivo js.. A continuacin se muestra el cdigo de la pgina HTML:
Ejemplo <!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js"); } w.onmessage = function (event){ document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html>
Pruebe usted mismo
Web Workers y el DOM

Dado que los trabajadores web estn en archivos externos, que no tienen acceso a los siguientes objetos JavaScript: El objeto de la ventana El objeto del documento El objeto principal
HTML5 Events enviados-Servidor

HTML5 eventos enviados por el servidor permiten que una pgina Web para obtener actualizaciones desde un servidor.
Eventos enviados por el servidor - One Way Mensajera
Un evento enviado por el servidor es cuando una pgina web se pone automticamente las actualizaciones desde un servidor. Esto tambin fue posible antes, pero la pgina web tendra que preguntar si hay actualizaciones disponibles. Con eventos enviados por el servidor, las actualizaciones vienen automticamente. Ejemplos: actualizaciones de Facebook / Twitter, actualizaciones de precios de acciones, canales de noticias, resultados deportivos, etc
Eventos enviados por el servidor son compatibles con todos los principales navegadores, excepto Internet Explorer.
Recibe enviados por el servidor de notificaciones de eventos

El objeto EventSource se utiliza para recibir notificaciones de eventos enviados por el servidor:
Ejemplo var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML + =event.data + "<br>"; };
Pruebe usted mismo
Ejemplo explic: Crear un nuevo objeto EventSource y especifique la direccin URL de la pgina de envo de las actualizaciones (en este ejemplo "demo_sse.php") Cada vez que se recibe una actualizacin, se produce el evento onmessage Cuando se produce un evento onmessage, poner los datos recibidos en el elemento con id = "nmero"
Compruebe Eventos enviados por el servidor de soporte

En el ejemplo de arriba Tryit hubo algunas lneas adicionales de cdigo para comprobar la compatibilidad con exploradores para los eventos enviados por el servidor:
if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
Del lado del servidor Ejemplo de cdigo

Para el ejemplo anterior funcione, se necesita un servidor capaz de enviar las actualizaciones de datos (como PHP o ASP). La sintaxis de secuencia de eventos en el servidor es simple. Establecimiento de la cabecera "Content-Type" a "text / evento-stream". Ahora puede empezar a enviar flujos de eventos. Cdigo en PHP (demo_sse.php):
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
Cdigo en ASP (VB) (demo_sse.asp):
<% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: " & now()) Response.Flush() %>
Cdigo explic: Establecimiento de la cabecera "Content-Type" a "text / evento-stream" Especificar que la pgina no debe cachear Salida de los datos a enviar ( Siempre empezar con "datos") Enjuague los datos de salida de nuevo a la pgina web
El objeto EventSource
En los ejemplos anteriores se utiliz el evento onmessage obtener mensajes. Pero otros acontecimientos tambin estn disponibles: Events onopen onmessage onerror Description When a connection to the server is opened When a message is received When an error occurs
HTML Multimedia
Multimedia en la web es de sonido, msica, vdeos, pelculas y animaciones.
Qu es Multimedia?
Multimedia viene en muchos formatos diferentes. Puede ser casi cualquier cosa que usted puede escuchar o ver. Ejemplos: imgenes, msica, sonidos, videos, discos, pelculas, animaciones, y mucho ms. Pginas web modernos a menudo han incorporado elementos multimedia, y los navegadores modernos tienen soporte para varios formatos multimedia. En este tutorial usted aprender sobre los diferentes formatos multimedia.
Soporte del navegador de Internet

Los primeros exploradores de Internet tenan el apoyo a slo texto, e incluso el soporte de texto se limitan a una sola fuente en un solo color. Luego vinieron los navegadores con soporte para colores, fuentes y estilos de texto y el apoyo para las fotos tambin se aadi. El apoyo para los sonidos, animaciones y vdeos se maneja de manera diferente por los distintos navegadores. Algunos elementos multimedia es compatible, y algunos requieren un programa de ayuda adicional (plug-in) para trabajar. Usted aprender ms acerca de los plug-ins en los prximos captulos.
Formatos Multimedia
Los elementos multimedia (como sonidos o vdeos) se almacenan en archivos de medios. La forma ms comn de descubrir el tipo de un archivo, es mirar la extensin de archivo. Cuando un navegador ve la extensin de archivo. Htm o. Html, que tratar el archivo como un archivo HTML. La extensin xml. Indica un archivo XML, y la extensin css. Indica un archivo de hoja de estilos. Fotos estn reconocidos por extensiones como. Gif,. Png y. Jpg. Archivos multimedia tambin tienen sus propios formatos y diferentes extensiones como:. Swf, wav, mp3, mp4, mpg, wmv, avi y.......
Formatos de vdeo
MP4 es el nuevo y prximo formato de vdeo de Internet. MP4 es recomendado por YouTube. MP4 es apoyada por jugadores de Flash y HTML5.
Format AVI
File .avi
Description
AVI (Audio Video Interleave) was developed by Microsoft, and is therefore playable o computers. It is commonly used in video cameras and TV hardware, but is difficult to
Windows computers. WMV .wmv
WMV (Windows Media Video) was developed by Microsoft, and is therefore playable computers. It is commonly used in video cameras and by TV hardware, but is difficu non-Windows computers.
QuickTime .mov
QuickTime was developed by Apple, and is therefore playable on all Apple computers commonly used in video cameras and by TV hardware, but is difficult to play on non computers.
RealVideo
.rm .ram
RealVideo was developed by Real Media to allow video streaming with low bandwidth used for online video and Internet TV, but because of the low bandwidth priority, the low.
Flash
.swf .flv .ogg
Flash was developed by Macromedia. Flash requires an extra component to play in a
Ogg WebM MPEG
Theora Ogg was developed by the Xiph.Org Foundation.
.webm WebM is a project (www.webmproject.org) by the web giants, Mozilla, Opera, Adobe
.mpg MPEG, developed by the Moving Pictures Expert Group, used to be the most popular .mpeg on the Internet. It used to be supported by all major browsers, but it is not supporte .mp4
MPEG-4 or MP4
MP4 is the upcoming format on the internet. It is supported by all major browsers in YouTube recommends using MP4, and it is commonly used in newer video cameras a hardware.
Slo MP4, WebM y vdeo Ogg est soportado por el estndar HTML5 ms reciente.
Formatos de sonido
MP3 es el ms nuevo formato para la msica grabada comprimido. El trmino MP3 se ha convertido en sinnimo de msica digital. Si su sitio web es acerca de la msica grabada, MP3 es la eleccin.
Format MIDI
File .mid .midi
Description
MIDI (Musical Instrument Digital Interface) is a format for electronic music devices lik and PC sound cards. MIDI files do not contain sound, but digital musical instructions ( be played by electronics (like your PC's sound card). Click here to play The Beatles.
Since MIDI files only contains instructions; they are extremely small. The example ab in size, but it plays for nearly 5 minutes. MIDI is supported by many software system Because it is the main format for binary music, it is supported by most software, inclu browsers. RealAudio .rm .ram WMA .wma
RealAudio was developed Real Media to allow streaming of audio (online music, Intern low bandwidths.
WMA (Windows Media Audio), compares in quality to MP3, and is compatible with mos players, except the iPod. WMA files can be delivered as a continuous flow of data, whi practical for use in Internet radio or on-line music.
AAC WAV
.aac .wav
AAC (Advanced Audio Coding) was developed by Apple as the default format for iTune
WAVE (more known as WAV) was developed by IBM and Microsoft. WAV is compatible Macintosh, and Linux operating systems. Ogg was developed by the Xiph.Org Foundation.
Ogg MP3
.ogg .mp3
MP3 files are actually the sound part of MPEG files. MP3 is the most popular format fo The encoding system combines good compression (small files) with high quality. It is all major browsers.
MP4
.mp4
MP4 is a video format, but it can also be used with audio only. MP4 video is the upcom format on the internet. This can lead to an automatic support for MP4 audio by all ma
Slo MP3, WAV y audio Ogg est soportado por el estndar HTML5 ms reciente.
HTML - Plug-ins
El propsito de un plug-in, es extender la funcionalidad del navegador HTML.
HTML Helpers (plug-ins)

Una aplicacin auxiliar es un pequeo programa informtico que ampla la funcionalidad estndar del navegador. Las aplicaciones auxiliares son tambin llamados plug-ins. Los ejemplos de los plug-ins conocidos son los applets de Java y Adobe Flash Player. Los plug-ins se pueden agregar a las pginas web con la etiqueta <object> o la etiqueta <embed>. Los plug-ins se pueden utilizar para muchos fines: para visualizar los mapas, buscar virus, verificar su identificacin del banco, y mucho ms. Las restricciones son pocas.
Cul es la mejor manera para reproducir audio o vdeo en HTML?

La mejor manera de insertar audio en una pgina web es utilizar el elemento HTML5 <audio>. La mejor manera de integrar vdeo en una pgina web es utilizar el elemento <video> HTML5.
El elemento <object>
El elemento <object> es compatible con todos los principales navegadores. El elemento <object> define un objeto incrustado en un documento HTML. Se utiliza para incrustar plugins (como applets de Java, ActiveX, PDF y Flash) en las pginas web. Tambin se puede utilizar para insertar otra pgina web, o el contenido web como imgenes, en documentos HTML.
Se muestra el texto entre <object> y </ object> si el navegador no soporta la etiqueta. El HTML <param>etiqueta se utiliza para pasar parmetros al plug in
Ejemplo <object width="400" height="50" data="bookmark.swf"></object>

Pruebe usted mismo
El elemento <embed>
El elemento <embed> es compatible con todos los principales navegadores. El elemento <embed> define un contenedor para una aplicacin externa o contenido interactivo (un plug-in). Muchos navegadores web han apoyado el elemento <embed> durante mucho tiempo. Sin embargo, no ha sido una parte de la especificacin de HTML antes de HTML5. El elemento <embed> validar en una pgina HTML5, pero no de HTML 4 pgina.
Ejemplo <embed width="400" height="50" src="bookmark.swf">

Pruebe usted mismo
Tenga en cuenta que el elemento <embed> no tiene una etiqueta de cierre. No puede contener tex alternativo.
HTML Sonidos / Audio

Los sonidos pueden ser incrustados en pginas HTML con varios mtodos.
Problemas, Problemas y Soluciones

Reproduccin de audio en HTML no es fcil! Usted debe saber un montn de trucos para asegurarse de que sus archivos de audio se reproducirn en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) y sobre todo el hardware (PC, Mac, iPad, iPhone). En este captulo se resumen las W3Schools problemas y las soluciones.
El uso de plug-ins
Un plug-in es un pequeo programa informtico que ampla la funcionalidad estndar del navegador. Los plug-ins se pueden agregar a las pginas HTML usando la etiqueta <object> o la etiqueta <embed>. Estas etiquetas definen contenedores para los recursos (normalmente recursos no HTML), que, segn el tipo, o bien se puede visualizar por los navegadores, o por un plug-in externo.
HTML Audio - Uso <embed>

La etiqueta <embed> define un contenedor para exterior (no HTML) contenido. El siguiente fragmento de cdigo debe reproducir un archivo MP3 incrustado en una pgina web:
Ejemplo <embed height="50" width="100" src="horse.mp3">

Pruebe usted mismo
Problemas:
Diferentes navegadores son compatibles con diferentes formatos de audio Si un navegador no soporta el formato de archivo, el audio no se puede reproducir sin un plug-in Si el plug-in no est instalado en el ordenador del usuario, el audio no se reproducir
HTML Audio - Uso <object>

La etiqueta <object> tambin puede definir un contenedor para exterior (no HTML) contenido. El siguiente fragmento de cdigo debe reproducir un archivo MP3 incrustado en una pgina web:
Ejemplo <object height="50" width="100" data="horse.mp3"></object>

Pruebe usted mismo
Problemas:
Diferentes navegadores son compatibles con diferentes formatos de audio Si un navegador no soporta el formato de archivo, el audio no se puede reproducir sin un plug-in Si el plug-in no est instalado en el ordenador del usuario, el audio no se reproducir
El elemento HTML5 <audio>

La etiqueta de HTML5 <audio> define el sonido, como la msica o de otros flujos de audio. El elemento <audio> funciona en todos los navegadores modernos. El siguiente ejemplo utiliza la etiqueta HTML5 <audio>, que especifica un archivo MP3 (para Internet Explorer, Chrome, Firefox 21 + y Safari) y un archivo de OGG (para mayores Firefox y Opera). Si algo falla, se mostrar un texto:
Ejemplo <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>
Pruebe usted mismo
Problemas:
Debe convertir los archivos de audio en diferentes formatos El elemento <audio> no funciona en los navegadores ms antiguos
HTML Audio - La mejor solucin

La mejor solucin es utilizar el elemento HTML5 <audio> + elemento <embed>. El siguiente ejemplo utiliza el elemento <audio> y trata de reproducir el audio, ya sea como MP3 o OGG. Si eso no funciona, el cdigo "cae de nuevo" para tratar el elemento <embed>:
Ejemplo <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
Pruebe usted mismo
Problemas:
Debe convertir los archivos de audio en diferentes formatos El elemento <embed> no puede "retroceso" para que aparezca un mensaje de error
HTML Audio - Uso de un hipervnculo

Si una pgina web incluye un hipervnculo a un archivo de medios, la mayora de los navegadores utilizan una "aplicacin de ayuda" para reproducir el archivo. El siguiente fragmento de cdigo muestra un enlace a un archivo MP3. Si un usuario hace clic en el enlace, el navegador se lanzar una aplicacin auxiliar para reproducir el archivo:
Ejemplo <a href="horse.mp3">Play the sound</a>

Pruebe usted mismo
Consejos Sobre Inline Sounds

Cuando el sonido se incluye en una pgina web, o como parte de una pgina web, se llama sonido inline. Si va a usar sonidos en lnea, tenga en cuenta que muchas personas les resulta molesto. Tambin tenga en cuenta que algunos usuarios podran haber desactivado la opcin de sonido en lnea en su navegador. Nuestro mejor consejo es incluir inline suena slo en pginas donde el usuario espera de or sonidos. Un ejemplo de esto es una pgina que se abre despus de que el usuario ha hecho clic en un enlace para escuchar una grabacin.
HTML Multimedia Etiquetas

Nuevo : Nuevas etiquetas en HTML5. Tag <embed> <object> <param> <audio> New <video> New <source> New <track> New Description Defines an embedded object Defines an embedded object Defines a parameter for an object Defines sound content Defines a video or movie Defines multiple media resources for media elements (<video> and <audio>) Defines text tracks for media elements (<video> and <audio>)
HTML Videos
Previous Next Chapter
Videos can be embedded in HTML pages with several methods.
Playing Videos in HTML

Example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
Try it yourself
Problems, Problems, and Solutions

Playing videos in HTML is not easy! You must add a lot of tricks to make sure your video will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone). In this chapter W3Schools summarizes the problems and the solutions.
HTML Video - Using <embed>

The <embed> tag defines a container for external (non-HTML) content. The following HTML fragment displays a Flash video embedded in a web page:
Example <embed src="intro.swf" height="200" width="200">

Try it yourself
Problems If the browser does not support Flash, the video will not play iPad and iPhone do not support Flash videos
HTML Video - Using <object>

The <object> tag tag can also define a container for external (non-HTML) content. The following HTML fragment displays a Flash video embedded in a web page:
Example <object data="intro.swf" height="200" width="200"></object>

Try it yourself
Problems: If the browser does not support Flash, the video will not play iPad and iPhone do not support Flash videos
The HTML5 <video> Element

The HTML5 <video> tag defines a video or movie. The <video> element works in all modern browsers. The following example uses the HTML5 <video> tag, which specifies one MP4 file (for Internet Explorer, Chrome, Firefox 21+, and Safari), and one OGG file (for older Firefox and Opera). If something fails, it will display a text:
Example <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>
Try it yourself
Problems:
You must convert your videos to many different formats The <video> element does not work in older browsers
HTML Video - The Best Solution

The best solution is to use the HTML5 <video> element + the <embed> element. The example below uses the <video> element and tries to play the video either as MP4 or OGG. If that fails, the code "falls back" to try the <embed> element:
HTML 5 + <object> + <embed> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
Try it yourself
Problems: You must convert your videos to many different formats
HTML Video - YouTube Solution

However, maybe the easiest way to display videos in HTML pages, is to use YouTube (see next chapter)!
HTML Video - Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to a Flash video. If a user clicks on the link, the browser will launch a helper application to play the file:
Example <a href="intro.swf">Play a video file</a>
Try it yourself
Tips About Inline Videos

When a video is included in a web page it is called inline video. If you plan to use inline videos, be aware that many people find it annoying. Also note that some users might have turned off the inline video option in their browser. Our best advice is to include inline videos only in pages where the user expects to see a video. An example of this is a page which opens after the user has clicked on a link to see the video.
HTML Multimedia Tags

New : New tags in HTML5. Tag <embed> <object> <param> <audio> New <video> New <source> New <track> New Description Defines an embedded object Defines an embedded object Defines a parameter for an object Defines sound content Defines a video or movie Defines multiple media resources for media elements (<video> and <audio>) Defines text tracks for media elements (<video> and <audio>)

Examen

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Examen

Uploaded by

Copyright:

Available Formats

Qu es HTML5?

Cmo result HTML5 Comienza?

El HTML5 <! DOCTYPE>

Un documento HTML5 mnimo

HTML5 - Nuevas funciones

Soporte del navegador para HTML5

HTML5 Nuevos Elementos

Nuevos elementos en HTML5

El elemento nuevo <canvas>

Nuevos elementos Medios

Nuevos Elementos Form

Nueva Semantic Elements / Estructural

HTML5 semntico Elementos

Semntica = Significado. Elementos semnticos = Los elementos con significado.

Cules son los elementos semnticos?

Soporte del navegador

Nuevos elementos semnticos en HTML5

<article> <aside> <figure> <figcaption> <footer> <details> <summary> <mark> <hora>

Elemento HTML5 <section>

Elemento HTML5 <article>

Elemento HTML5 <nav>

Elemento HTML5 <aside>

Elemento HTML5 <header>

Elemento HTML5 <footer>

HTML5 <figure> y Elementos <figcaption>

Podemos empezar a utilizar estos elementos semnticos?

header, section, footer, aside, nav, article, figure { display: block; }

Problema con Internet Explorer 8 y versiones anteriores

Elementos semnticos en HTML5

HTML5 Tipos de entrada

HTML5 nuevos tipos de entrada

Tipo de entrada: Color

Select your favorite color: <input type="color" name="favcolor">

Tipo de entrada: Fecha

Birthday: <input type="date" name="bday">

Tipo de entrada: fecha y hora

Birthday (date and time): <input type="datetime" name="bdaytime">

Tipo de entrada:-datetime locales

Birthday (date and time): <input type="datetime-local" name="bdaytime">

Pruebe usted mismo

Tipo de entrada: correo electrnico

E-mail: <input type="email" name="email">

Tipo de entrada: mes

Birthday (month and year): <input type="month" name="bdaymonth">

Tipo de entrada: Nmero

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Tipo de entrada: Rango

<input type="range" name="points" min="1" max="10">

Utilice los siguientes atributos para especificar restricciones:

Tipo de entrada: bsqueda

Search Google: <input type="search" name="googlesearch">

Tipo de entrada: tel

Telephone: <input type="tel" name="usrtel">

Tipo de entrada: el tiempo

Select a time: <input type="time" name="usr_time">

Tipo de entrada: url

Add your homepage: <input type="url" name="homepage">

Tipo de entrada: semana

Select a week: <input type="week" name="week_year">

HTML5 <input> Tag

HTML5 elementos de formulario

HTML5 Nuevos Elementos Form