Universidad Mayor de San Andrés

Carrera de Informática

HTML5

INFORME FINAL

OROZCO ELIZABETH

Paralelo: “B”

HTML5

Parte I

1. ¿Qué es HTML5?

HTML5 será el nuevo estándar para el HTML.

La versión anterior de HTML, HTML 4.01, se produjo en 1999.El Internet ha cambiado significativamente desde entonces.

HTML5 pretende subsumir no sólo HTML 4, pero también XHTML 1 y DOM Level 2 HTML.

HTML5 está diseñado para ofrecer casi todo lo que quieres hacer en línea sin necesidad de plugins adicionales.Lo hace todo, desde la animación de aplicaciones, música de películas, y también se puede utilizar para crear aplicaciones complejas que se ejecutan en su navegador.

HTML5 es también multiplataforma (que no le importa si usted está utilizando una tableta o un teléfono inteligente, un netbook, portátil o un Smart TV).

HTML5 también se puede utilizar para escribir aplicaciones web que aún funcionan cuando usted no está en línea.

El Grupo de Trabajo de HTML 5 incluye AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, y cientos de otros proveedores.

HTML5 es todavía un trabajo en progreso.Sin embargo, todos los principales navegadores son compatibles con muchos de los nuevos elementos de HTML5 y APIs.

2. ¿Cómo resultó HTML5?

HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y el Grupo de 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:

Las nuevas características deben estar basadas en HTML, CSS, DOM y JavaScript
La necesidad de plugins externos (como Flash) debe reducirse
El manejo de errores debe ser más fácil que en las versiones anteriores
De secuencias de comandos tiene que ser sustituido por más de marcado
HTML5 debe ser independiente del dispositivo
El proceso de desarrollo debe ser visible para el público

El HTML5 <! DOCTYPE>

En HTML5 sólo hay una declaración, y es muy simple <doctype>:

<!DOCTYPE html>

3. Mínimo de documentos HTML5

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>

4. HTML5 - Nuevas funciones

Algunas de las novedades más interesantes en HTML5:

El elemento <canvas> para el dibujo 2D
El <video> y <audio> para la reproducción multimedia
Soporte para almacenamiento local
Nuevos elementos específicos de contenido, como <article>, <footer>, <header>, <nav>, <section>
Nuevos controles de formulario, como el calendario, la fecha, hora, correo electrónico, URL, búsqueda

5. Soporte del navegador para HTML5

HTML5 no es todavía un estándar oficial, y no los navegadores tienen soporte HTML5 completo.

Pero todos los principales navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer) continúan agregando nuevas características HTML5 a sus últimas versiones.

6. HTML5 Referencias

En W3Schools encontrará referencias completas acerca de las etiquetas, atributos globales, eventos estándar, y más.

HTML5 Referencia

7. HTML5 Nuevos Elementos

Nuevos elementos en HTML5

El Internet y el uso de la Internet, ha cambiado mucho desde HTML 4.01 se convirtió en un estándar en 1999.

Hoy en día, 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 el uso de Internet de hoy en día, HTML5 también incluye nuevos elementos para dibujar gráficos, añadiendo contenidos de los medios, una mejor estructura de la página, un mejor manejo de formularios, y varias APIs para arrastrar elementos de inserción / extracción, encontrar Geolocalización, incluir el almacenamiento web, caché de la aplicación, los trabajadores de la tela, etcétera

8. El elemento nuevo <canvas>

Nota: Los enlaces en los cuadros que siguen apuntan a nuestro HTML 5 Referencia .Sin embargo, usted aprenderá más acerca de estos nuevos elementos a lo largo de este tutorial.

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

9. Nuevos elementos Medios

Tag	Description
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for <video> and <audio>
<embed>	Defines a container for an external application or interactive content (a plug-in)
<track>	Defines text tracks for <video> and <audio>

10. Nuevos Elementos Form

Tag	Description
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

11. Nueva Semantic Elements / Estructural

HTML5 ofrece nuevos elementos para una mejor estructura:

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<command>	Defines a command button that a user can invoke
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<ruby>	Defines a ruby annotation (for East Asian typography)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>	Defines what to show in browsers that do not support ruby annotations
<section>	Defines a section in a document
<time>	Defines a date/time
<wbr>	Defines a possible line-break

12. Elementos eliminados

El siguiente código 4.01 elementos se quitan de HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

13. HTML5 Canvas

El elemento <canvas> se utiliza para dibujar gráficos, sobre la marcha, en una página web.

El ejemplo de la izquierda muestra un rectángulo rojo, un rectángulo gradiente, un rectángulo multicolor, y un poco de texto multicolor que se dibuja en el lienzo.

14. ¿Qué es el lienzo?

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 caminos de dibujo, cuadros, círculos, texto y agregar imágenes.

Soporte del navegador

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 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í:

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.

Consejo: Puede tener varios elementos <canvas> en una página HTML.

Para añadir un borde, utilice el atributo de estilo:

Dibuje en el lienzo con javascript

Todo dibujo en el lienzo se debe hacer dentro de un JavaScript:

Lienzo Coordenadas

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.

Coordina Ejemplo

Pase el ratón sobre el rectángulo de abajo para ver su coordenadas X e Y:

Lienzo - Caminos

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 "tinta", como el accidente cerebrovascular ().

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:

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:

arco (x, y, r, iniciar, detener)

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 ():

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Lienzo - Texto

Para dibujar texto en un lienzo, la propiedad y los métodos más 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);

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);

Lienzo - 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:

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 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 ():

Ejemplo

Crear un degradado lineal.Rellene rectángulo 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);

Uso de createRadialGradient ():

Ejemplo

Crear un degradado radial / circular.Rellene rectángulo 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);

Lienzo - Imágenes

Para dibujar una imagen en un lienzo, utilizaremos el siguiente método:

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);

HTML5 Inline SVG

HTML5 tiene soporte para SVG inline.

15. ¿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
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)

Soporte del navegador

Internet Explorer 9 +, Firefox, Opera, Chrome y Safari soporta Inline SVG.

Insertar SVG directamente en páginas HTML

En HTML5, puede incrustar elementos SVG directamente en su página 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>

Diferencias entre SVG y Canvas

SVG es un lenguaje para describir gráficos 2D en XML.

Lienzo dibuja gráficos 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 automáticamente volver a hacer la forma.

Lienzo se representa píxel por píxel.En la lona, una vez que el gráfico se dibuja, se olvida por el navegador.Si su posición se debe cambiar, toda la escena tiene que ser rediseñado, incluyendo los objetos que podrían haber sido incluidos en el gráfico.

16. Comparativa de Canvas y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:

Canvas	SVG
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	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

17. HTML5 Arrastrar y soltar

Arrastrar y soltar es una parte del estándar HTML5.

Arrastre la imagen W3Schools en el rectángulo.

Arrastrar y soltar

Arrastrar y soltar es una característica muy común.Es cuando se "agarra" un objeto y arrastrarlo a una ubicación diferente.

En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede ser arrastrable.

Soporte del navegador

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>

Hacer una Arrastrable Element

En primer lugar: Para que un elemento pueda arrastrar, establezca el atributo pueda arrastrar a true:

Qué Arrastre - ondragstart y setData ()

A continuación, especifique lo que debe suceder cuando se arrastra el elemento.

En el ejemplo anterior, el atributo ondragstart llama a una función, arrastre (evento), que especifica qué datos se pueden arrastrar.

El método 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 dónde los datos arrastrados se pueden caer.

Por defecto, los datos / elementos no se pueden quitar en otros elementos.Para permitir una caída, hay que evitar que el control predeterminado del elemento.

Esto se hace llamando al método () event.preventDefault para el evento ondragover:

event .preventDefault()

Haga lo Drop - ondrop

Cuando se deja caer los datos arrastrados, un evento de colocación se produce.

En el ejemplo anterior, el atributo ondrop llama a una función, la caída de (evento):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

Código explicó:

Llame a preventDefault () para evitar la manipulación por defecto del navegador de los datos (por defecto está abierto como enlace en la gota)
Obtén los datos arrastrados con el método ("Texto") dataTransfer.getData.Este método devolverá los datos que se establece en el mismo tipo en el setData () método
Los datos arrastrado es el id del elemento arrastrado ("drag1")
Añada el elemento arrastrado en el elemento gota

18. HTML5 Geolocalización

HTML5 Geolocalización se utiliza para localizar la posición de un usuario

Localice la posición del usuario

La API de HTML5 Geolocalización se utiliza para obtener la posición geográfica de un usuario.

Dado que esto puede comprometer la privacidad del usuario, la posición no está disponible a menos que el usuario lo aprueba.

Soporte del navegador

Internet Explorer 9 +, Firefox, Chrome, Safari y Opera Geolocalización apoyo.

Nota: Geolocalización es mucho más preciso para los dispositivos con GPS, como el iPhone.

HTML5 - El uso de Geolocalización

Utilice el método getCurrentPosition () para obtener la posición del usuario.

El ejemplo a continuación es un ejemplo sencillo Geolocalización devolver la latitud y longitud de la posición del usuario:

Ejemplo

Ejemplo explicó:

Compruebe si se admite Geolocalización
Si se admite, ejecutar el método getCurrentPosition ().Si no, mostrar un mensaje al usuario
Si el método getCurrentPosition () tiene éxito, devuelve un objeto coordenadas de la función especificada en el parámetro (ShowPosition)
La función ShowPosition () obtiene las pantallas de la Latitud y Longitud

El ejemplo anterior es un script muy básico Geolocalización, sin control de errores.

19. Controlar errores y Rechazos

El segundo parámetro del método getCurrentPosition () se utiliza para controlar los errores.Especifica una función a ejecutar en caso de no obtener la ubicación 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;
    }
}

Códigos de error:

Permiso denegado - El usuario no permitió Geolocalización
Posición no disponible - No es posible obtener la ubicación actual
Tiempo de espera - La operación 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+"'>";
}

Google Map Guión
Cómo utilizar una secuencia de comandos para mostrar un mapa interactivo con un marcador, zoom y las opciones de arrastrar.

Información específica de la ubicación

Esta página demuestra cómo mostrar la posición del usuario en un mapa.Sin embargo, la geolocalización también es muy útil para obtener información específica de la ubicación.

Ejemplos:

Hasta a la fecha de la información local
Mostrando puntos de interés cerca del usuario
Turn-by-Turn Navigation (GPS)

El getCurrentPosition () Método - Devolver datos

El método getCurrentPosition () devuelve un objeto si tiene éxito.Las propiedades de latitud, longitud y precisión siempre se devuelven.Las otras propiedades por debajo se devuelven si está disponible.

Property	Description
coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

Objeto Geolocalización - Otros métodos interesantes

watchPosition () - Devuelve la posición actual del usuario y continúa devolviendo posición actualizada como el usuario se mueve (como el GPS en un coche).

clearWatch () - Detiene el método () watchPosition.

El siguiente ejemplo muestra el método watchPosition ().Usted necesita un dispositivo GPS precisa para probar esto (como el iPhone):

Ejemplo

20. HTML5 video

Muchos sitios web modernos muestran videos.HTML5 proporciona un estándar para mostrarlos.

Compruebe si su navegador soporta vídeo HTML5

Video en la Web

Hasta ahora, no ha habido un estándar para la proyección de un video / película en una página web.

Hoy en día, la mayoría de los vídeos se muestran a través de un plug-in (como flash).Sin embargo, diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo / película en una página web: el elemento <video>.

Soporte del navegador

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 - ¿Cómo funciona?

Para mostrar un vídeo 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>

El atributo de control añade controles de vídeo, como reproducción, pausa y volumen.

También 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 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 vídeo.El navegador usará el primer formato reconocido.

Formatos de vídeo y Soporte del navegador

Actualmente, hay 3 formatos de vídeo compatibles con el elemento <video>: MP4, WebM, Ogg y:

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	YES	YES
Safari	YES	NO	NO
Opera	NO	YES	YES

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 para Formatos de vídeo

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

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> uso de 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 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 métodos.

Ejemplo 1

Crear sencilla reproducción / pausa + tamaño de los controles de un vídeo:

Your browser does not support HTML5 video.

Video courtesy of Big Buck Bunny .

El ejemplo anterior llama a dos métodos: play () y pausa ().También utiliza dos propiedades: pausadas y anchura.

HTML5 video Etiquetas

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

HTML5 Audio

HTML5 proporciona un estándar para la reproducción de archivos de audio.

Audio en la Web

Hasta ahora, no ha habido un estándar para la reproducción de archivos de audio en una página web.

Hoy en día, la mayoría de los archivos de audio se reproducen a través de un plug-in (como flash).Sin embargo, diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un archivo de audio en una página web: el elemento <audio>.

Soporte del navegador

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 - Cómo 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>

El atributo de control añade controles de audio, como reproducción, pausa y volumen.

También 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.

21. Formatos de Audio y Soporte del navegador

Actualmente, hay 3 formatos de archivo admitidos para el elemento <audio>: MP3, WAV y OGG:

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

Tipos MIME para los formatos de audio

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

22. HTML5 Tipos de entrada

HTML5 nuevos tipos de entrada

HTML5 tiene varios nuevos tipos de entrada de formularios.Estas nuevas características permiten un mejor control de entrada y validación.

Este capítulo trata de los nuevos tipos de entrada:

color
fecha
datetime
-datetime locales
email
mes
número
alcance
búsqueda
tel
tiempo
url
semana

Nota: No todos los navegadores soportan todos los nuevos tipos de entrada.Sin embargo, ya se puede empezar a usarlas, y si no son compatibles, se comportarán 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">

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">

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">

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">

Tipo de entrada: correo electrónico

El tipo de correo electrónico se utiliza para campos de entrada que deben contener una dirección de correo electrónico.

Ejemplo

Definir un campo para la dirección de correo electrónico (se validarán automáticamente cuando se presente):

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

Consejo: Safari en el iPhone reconoce el tipo de correo electrónico, y cambia el teclado de la pantalla para que coincida con él (añade @ y las opciones de com.).

Tipo de entrada: mes

El tipo meses permite al usuario seleccionar un mes y año.

Ejemplo

Definir un mes y el control de año (sin zona horaria):

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

Tipo de entrada: Número

El tipo de número se utiliza para campos de entrada que deben contener un valor numérico.

También puede establecer restricciones en lo que se aceptan los números:

Ejemplo

Definir un campo numérico (con restricciones):

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

Utilice los siguientes atributos para especificar restricciones:

max - especifica el valor máximo permitido
min - especifica el valor mínimo permitido
paso - especifica los intervalos de números legales
valor - Especifica el valor predeterminado

Pruebe un ejemplo con todos los atributos de la restricción: Pruébelo 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 números.

También puede establecer restricciones en lo que se aceptan números.

Ejemplo

Definir un control para introducir un número cuyo valor exacto no es importante (como un control deslizante):

Utilice los siguientes atributos para especificar restricciones:

max - especifica el valor máximo permitido
min - especifica el valor mínimo permitido
paso - especifica los intervalos de números legales
valor - Especifica el valor predeterminado

Tipo de entrada: búsqueda

El tipo de búsqueda se utiliza para los campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).

Ejemplo

Definir un campo de búsqueda (como una búsqueda en el sitio, o la búsqueda de Google):

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

Tipo de entrada: tel

Ejemplo

Definir un campo para introducir un número de teléfono:

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

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">

Tipo de entrada: url

El tipo url se utiliza para campos de entrada que deben contener una dirección URL.

El valor del campo url se valida automáticamente cuando se envía el formulario.

Ejemplo

Definir un campo para introducir una URL:

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

Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado de la pantalla para que coincida con él (añade opción com.).

Tipo de entrada: semana

El tipo de semana permite al usuario seleccionar una semana y el año.

Ejemplo

Definir una semana y el control año (sin zona horaria):

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

HTML5 <input> Tag

Tag	Description
<input>	Defines an input control

23. HTML5 elementos de formulario

HTML5 Nuevos Elementos Form

HTML5 tiene los siguientes nuevos elementos de formulario:

<datalist>
<keygen>
<output>

Nota: No todos los navegadores soportan todos los nuevos elementos de formulario.Sin embargo, ya se puede empezar a usarlas, y si no son compatibles, se comportarán los campos de texto como regulares.

Elemento HTML5 <datalist>

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>.

El elemento <datalist> se utiliza para proporcionar una función de "autocompletar" en <input> elementos.Los usuarios podrán 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>:

Elemento HTML5 <keygen>

El propósito 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 envía el formulario, dos claves se generan, una privada y una pública.

La clave privada se almacena localmente, y la clave pública se envía al servidor.La clave pública se podría 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>

Elemento HTML5 <output>

El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).

Ejemplo

Realice un cálculo y mostrar el resultado en un elemento <output>:

HTML5 Nuevos Elementos Form

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

Formulario HTML5 Atributos

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 automático
forma
formAction
formenctype
formmethod
formnovalidate
formtarget
la altura y el ancho
lista
min y max
múltiple
patrón (expresión regular)
marcador de posición
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 automáticamente 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 específicos, o viceversa.

Nota: El atributo autocomplete trabaja con <form> y los siguientes tipos <input>: texto, búsqueda, url, teléfono, correo electrónico, contraseña, 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>

Sugerencia: En algunos navegadores puede que tenga que activar la función 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:

<input> autofocus Atributo

El atributo autofocus es un atributo booleano.

Cuando está presente, especifica que un elemento <input> automáticamente debe obtener el foco cuando se carga la página.

Ejemplo

Deja que el "Nombre" campo de entrada recibe automáticamente el enfoque cuando se carga la página:

First name:<input type="text" name="fname" autofocus>

forma<input> Atributo

El atributo formulario especifica una o más formas de un elemento <input> pertenece.

Consejo: Para hacer referencia a más 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">

<input> formAction Atributo

El atributo formAction especifica la URL de un archivo que va a procesar el control de entrada cuando se envía 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 envío, 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>

<input> formenctype Atributo

El atributo formenctype especifica cómo se deben codificar los form-data al presentar al servidor (sólo 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 botón de envío), y se codifica como "multipart / form-data" (el segundo botón de envío):

<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>

<input> formmethod Atributo

El atributo formmethod define el método HTTP para enviar-datos del formulario a la URL de acción.

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 botón de enviar reemplaza el método 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>

<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 envío (con y sin validación):

<input> formtarget Atributo

El atributo formtarget especifica un nombre o una palabra clave que indica el lugar para mostrar la respuesta que se recibe después 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 envío, 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>

<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 imágenes.Si se establecen altura y la anchura, el espacio requerido para la imagen está reservado cuando se carga la página.Sin embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen, 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 que las imágenes se cargan).

Ejemplo

Definir una imagen como el botón de enviar, con atributos height y width:

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>:

min<input> y atributos max

El mínimo y el máximo de atributos especifica el valor mínimo y máximo para un elemento <input>.

Nota: El mínimo y el máximo de atributos obras con los siguientes tipos de entrada: número, rango, fecha, fecha y hora,-fecha y hora locales, mes, hora y semana.

Ejemplo

<input> elementos con valores mínimo y máximo:

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">

<input> múltiple Atributo

El atributo múltiple es un atributo booleano.

Cuando está presente, especifica que se permite que el usuario introduzca más de un valor en el elemento <input>.

Nota: El atributo múltiple trabaja con los siguientes tipos de entrada: correo electrónico, y archivo.

Ejemplo

Un campo de carga de archivos que acepta varios valores:

Select images: <input type="file" name="img" multiple>

patrón<input> Atributo

El atributo de patrón especifica una expresión regular que el valor del elemento <input> se coteja.

Nota: El atributo patrón trabaja con los siguientes tipos de entrada: texto, búsqueda, url, tel, correo electrónico y contraseña.

Consejo: Utilice el mundial título atributo para describir el patrón para ayudar al usuario.

Consejo: Aprenda más acerca de las expresiones regulares en nuestro tutorial JavaScript.

<input> marcador de posición 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 descripción 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, búsqueda, url, tel, correo electrónico y contraseña.

<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, búsqueda, url, tel, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, la radio y los archivos.

<input> paso Atributo

El atributo paso especifica los intervalos de números legales para un elemento <input>.

Ejemplo: si el paso = "3", los números legales podría ser -3, 0, 3, 6, etc

Consejo: El atributo de paso se puede utilizar junto con el máximo y el mínimo de atributos para crear un rango de valores legales.

Nota: El atributo de paso funciona con los siguientes tipos de entrada: número, rango, fecha, fecha y hora,-fecha y hora locales, mes, hora y semana.

HTML5 <input> Tag

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control

HTML5 semántico Elementos

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.

Ejemplos de elementos no semánticos:<div> y <span> - dice nada acerca de su contenido.

Ejemplos de elementos semánticos:<form>, <table> y <img> - define claramente su contenido.

Soporte del navegador

Internet Explorer 9 +, Firefox, Chrome, Safari y Opera soporta los elementos semánticos descritos en este capítulo.

Nota: Internet Explorer 8 y versiones anteriores no admite estos elementos.Sin embargo, no es una solución.Mira al final de este capítulo.

Nuevos elementos semánticos en HTML5

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>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

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."

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

Elemento HTML5 <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>!

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.

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 introductoria.

Usted puede tener varios elementos <header> en un solo documento.

El ejemplo siguiente define una cabecera de un artículo:

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.

HTML5 <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>.

¿Podemos empezar a utilizar estos elementos semánticos?

Los elementos explicados anteriormente son todos los elementos de bloque (excepto <figcaption>).

Para obtener estos elementos para que funcione correctamente en todos los (antiguos) los principales navegadores, establecen 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;
}

Elementos semánticos en HTML5

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<time>	Defines a date/time

HTML5 de almacenamiento Web

Almacenamiento web HTML5, un mejor almacenamiento local de cookies.

¿Qué es HTML5 de almacenamiento Web?

Con HTML5, las páginas web pueden almacenar datos localmente en el navegador del usuario.

Antes, esto se hacía con las cookies.Sin embargo, de almacenamiento Web es más seguro y más rápido.Los datos no se incluye con cada petición del servidor, pero es usado solamente cuando se le pide.También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento de la página web.

Los datos se almacenan en pares clave / valor, y una página web puede sólo datos de acceso almacenado por sí mismo.

Soporte del navegador

Almacenamiento Web es compatible en Internet Explorer 8 +, Firefox, Opera, Chrome y Safari.

Nota: Internet Explorer 7 y versiones anteriores, no son compatibles con el almacenamiento web.

localStorage y sessionStorage

Hay dos nuevos objetos para el almacenamiento de datos en el cliente:

localStorage - almacena los datos sin fecha de caducidad
sessionStorage - almacena los datos para un período de sesiones

Antes de utilizar el almacenamiento web, compruebe la compatibilidad con exploradores para localStorage y sessionStorage:

if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}

El objeto localStorage

El objeto localStorage almacena los datos sin fecha de caducidad.No se eliminarán los datos cuando se cierra el navegador, y estarán disponibles al día siguiente, semana o año.

Ejemplo

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

Ejemplo explicó:

Crear un par de claves localStorage / valor con la tecla = "apellido" y value = "Smith"
Recuperar el valor de la clave "apellido" y la inserta en el elemento con id = "número"

Consejo: pares clave / valor siempre se guardan como cadenas.Recuerde que debe convertirlos a otro formato cuando sea necesario.

El siguiente ejemplo se cuenta el número de veces que un usuario ha hecho clic en un botón.En este código de la cadena de valor se convierte a un número para ser capaz de aumentar el contador:

El objeto sessionStorage

El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesión.Los datos se eliminan cuando el usuario cierra la ventana del navegador.

El siguiente ejemplo se cuenta el número de veces que un usuario ha hecho clic en un botón, en la sesión actual:

HTML5 memoria caché de aplicaciones

Con HTML5, es fácil hacer una versión sin conexión de una aplicación web, mediante la creación de un archivo de manifiesto de caché.

¿Qué es la memoria caché de aplicaciones?

HTML5 introduce caché de la aplicación, lo que significa que una aplicación web se almacena en caché, y accesible sin una conexión a Internet.

Caché de la aplicación da una aplicación tres ventajas:

Navegación fuera de línea - los usuarios pueden utilizar la aplicación cuando están fuera de línea
Velocidad - recursos en caché se cargan más rápido
Reducción de la carga del servidor - el navegador sólo descargará actualizado / recursos cambiado desde el servidor

Soporte del navegador

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 conexión):

Caché Manifiesto Basics

Para habilitar la caché de la aplicación, incluya el atributo manifest en etiqueta <html> del documento:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Cada página con el atributo del manifiesto especificado se almacenan en caché cuando el usuario visita.Si no se especifica el atributo manifest, la página no se almacenan en caché (a menos que se especifique la página directamente en el archivo de manifiesto).

La extensión 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-manifest".Debe 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é después de que se descarguen por primera vez
RED - Los archivos listados bajo esta cabecera requieren una conexión al servidor, y nunca se almacenan en caché
RÉPLICA - Archivos enumerados en esta cabecera especifica páginas de retorno si una página es inaccesible

MANIFIESTO CACHE

La primera línea, 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 raíz del sitio web.Entonces, siempre que el usuario no está conectado a la Internet, los recursos seguirán estando disponibles.

RED

La sección NETWORK siguiente especifica que el archivo "login.asp" nunca debe ser almacenado en caché, y no estará disponible sin conexión:

NETWORK:
login.asp

Un asterisco se puede utilizar para indicar que todos los demás recursos / archivos requieren una conexión a Internet:

NETWORK:
*

RÉPLICA

La sección FALLBACK siguiente especifica que "offline.html" se sirve en lugar de todos los archivos en el directorio / html / catálogo, en caso de una conexión a Internet no se puede establecer:

FALLBACK:
/html/ /offline.html

Nota: La primera URI es el recurso, el segundo es el de reserva.

La actualización de la memoria caché

Una vez que se almacena en caché una aplicación, é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 aplicación se actualiza mediante programación

Notas sobre la memoria caché de aplicaciones

Tenga cuidado con lo que se almacena en caché.

Una vez que un archivo se almacena en caché, el navegador seguirá mostrando la versión en caché, incluso si cambia el archivo en el servidor.Para garantizar el navegador actualiza la caché, es necesario cambiar el archivo de manifiesto.

Nota: Los navegadores pueden tener diferentes límites de tamaño para los datos almacenados en caché (algunos navegadores tienen un límite de 5 MB por sitio).

Web Workers HTML5

Un trabajador de web es un funcionamiento de JavaScript en el fondo, sin afectar el rendimiento de la página.

Qué es un Trabajador Web?

Al ejecutar secuencias de comandos en una página HTML, la página deja de responder hasta que se termine el guión.

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 página.Usted puede seguir haciendo lo que quiera: al hacer clic, seleccionar las cosas, etc, mientras que el trabajador web se ejecuta en segundo plano.

Soporte del navegador

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 números en segundo plano:

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 código anterior es la postMessage (método) - que se utiliza para enviar un mensaje de vuelta a la página HTML.

Nota: Los trabajadores web Normalmente no se utilizan para este tipo de scripts simples, pero para más tareas intensivas de la CPU.

Crear un objeto Worker Web

Ahora que tenemos el archivo de trabajador web, tenemos que llamarlo desde una página HTML.

Las siguientes líneas comprueba si ya existe el trabajador, si no - se crea un nuevo objeto trabajador web y ejecuta el código en "demo_workers.js":

if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}

Entonces podemos enviar y recibir mensajes desde el trabajador web.

Añadir 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 código 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 después 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 (método):

w.terminate();

Completo Trabajador Web Ejemplo de código

Ya hemos visto el código de los trabajadores en el archivo js..A continuación se muestra el código de la página 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>

Web Workers y el DOM

Dado que los trabajadores web están en archivos externos, que no tienen acceso a los siguientes objetos JavaScript:

El objeto de la ventana
El objeto del documento
El objeto principal

Eventos enviados Servidor HTML5

HTML5 eventos enviados por el servidor permiten que una página Web para obtener actualizaciones desde un servidor.

Eventos enviados por el servidor - One Way Mensajería

Un evento enviado por el servidor es cuando una página web se pone automáticamente las actualizaciones desde un servidor.

Esto también fue posible antes, pero la página web tendría que preguntar si hay actualizaciones disponibles.Con eventos enviados por el servidor, las actualizaciones vienen automáticamente.

Ejemplos: actualizaciones de Facebook / Twitter, actualizaciones de precios de acciones, canales de noticias, resultados deportivos, etc

Soporte del navegador

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:

Compruebe Eventos enviados por el servidor de soporte

En el ejemplo de arriba Tryit hubo algunas líneas adicionales de código 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..
}

El objeto EventSource

En los ejemplos anteriores se utilizó el evento onmessage obtener mensajes.Pero otros acontecimientos también están disponibles:

Events	Description
onopen	When a connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

Parte II

1. Web Socket

WebSocket es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un único socket TCP. Está diseñada para ser implementada en navegadores y servidores web, pero puede utilizarse por cualquier aplicación cliente/servidor. La API de WebSocket está siendo normalizada por el W3C, y el protocolo WebSocket, a su vez, está siendo normalizado por el IETF. Como las conexiones TCP ordinarias sobre puertos diferentes al 80 son habitualmente bloqueadas por los administradores de redes, el uso de esta tecnología proporcionaría una solución a este tipo de limitaciones proveyendo una funcionalidad similar a la apertura de varias conexiones en distintos puertos, pero multiplexando diferentes servicios WebSocket sobre un único puerto TCP (a costa de una pequeña sobrecarga del protocolo).

En el lado del cliente, WebSocket está ya implementado en Mozilla Firefox 8, Google Chrome 4 y Safari 5, así como la versión móvil de Safari en el iOS 4.2

2. Web Sockets en HTML5

Web Sockets es una tecnología de comunicación bidireccional de próxima generación para aplicaciones web que funciona a través de una sola toma de corriente y se expone a través de una interfaz de JavaScript en el HTML 5 navegadores compatibles.

Una vez que obtenga una conexión Socket Web con el servidor web, puede enviar datos desde el navegador al servidor llamando a send () método, y recibir datos desde el servidor al navegador por medio de un onmessage controlador de eventos.

Lo que sigue es la API que crea un nuevo objeto WebSocket.

Socket var = new WebSocket (url, [Protocal]);

Aquí primer argumento, url, específica la URL a la que se conecte. El segundo atributo, el protocolo es opcional, y si está presente, especifica una sub-protocolo que el servidor debe apoyar para que la conexión sea exitosa.

WebSocket Atributos:

Los siguientes son los atributos de objeto WebSocket. Suponiendo que creamos objeto Socket como se mencionó anteriormente:

Atributo	Descripción
Socket.readyState	El atributo readonly readyState representa el estado de la conexión. Puede tener los siguientes valores: 1. Un valor de 0 indica que la conexión todavía no ha sido establecida. 2. Un valor de 1 indica que se ha establecido la conexión y la comunicación es posible. 3. Un valor de 2 indica que la conexión está pasando por el apretón de manos de clausura. 4. Un valor de 3 indica que la conexión se ha cerrado o no se pudo abrir.
Socket.bufferedAmount	El atributo readonly bufferedAmount representa el número de bytes de texto UTF-8 que se han puesto en cola utilizando enviar () método.

WebSocket Eventos:

Los siguientes son los eventos asociados con objeto WebSocket. Suponiendo que creamos objeto Socket como se mencionó anteriormente:

Evento	Gestor de Eventos	Descripción
abierto	Socket.onopen	Este evento se produce cuando se establece la conexión de socket.
mensaje	Socket.onmessage	Este evento se produce cuando el cliente recibe los datos del servidor.
error	Socket.onerror	Este evento se produce cuando hay algún error en la comunicación.
cerca	Socket.onclose	Este evento se produce cuando la conexión está cerrada.

Métodos WebSocket:

Los siguientes son los métodos asociados con objeto WebSocket. Suponiendo que creamos objeto Socket como se mencionó anteriormente:

Método	Descripción
Socket.Send ()	El método send (datos) transmite datos usando la conexión.
Socket.close ()	El método close () se utiliza para terminar cualquier conexión existente.

WebSocket Ejemplo:

A WebSocket es un socket TCP estándar bidireccional entre el cliente y el servidor. La toma comienza como una conexión HTTP y luego "Actualizaciones" a un socket TCP después de un apretón de manos HTTP. Después de que el apretón de manos, cada lado puede enviar datos.

Del lado del cliente de HTML y código JavaScript:

En el momento de escribir este tutorial, sólo hay unos pocos navegadores web de soporte WebSocket () de la interfaz. Usted puede intentar siguiente ejemplo con la última versión de Chrome, Mozilla, Opera y Safari.

<! DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

función WebSocketTest ()

  si ("WebSocket" en la ventana)

     alert ("WebSocket es compatible con su navegador!");

     / / Vamos a abrir un socket web

     ws var = new WebSocket ("ws :/ / localhost: 9998/echo");

     ws.onopen = function ()

        / / Socket Web está conectado, enviar datos usando send ()

        ws.send ("Mensaje a enviar");

        alert ("se envía un mensaje ...");

};

     ws.onmessage = function (evt)

        var received_msg = evt.data;

        alert ("se recibe un mensaje ...");

};

     ws.onclose = function ()

        / / Websocket está cerrado.

        alert ("La conexión está cerrada ...");

};

  más

     / / El navegador no soporta WebSocket

     alert ("NO websocket soportado por su navegador!");

</ Script>

</ Head>

<body>

<div id="sse">

   <a href="javascript:WebSocketTest()"> Run WebSocket </ a>

</ Div>

</ Body>

</ Html>

Instale pywebsocket:

Antes de probar por encima de programa cliente, necesita un servidor que soporte WebSocket.Descarga mod_pywebsocket-xxxtar.gz de pywebsocket cuyo objetivo es proporcionar una extensión Socket Web de Apache HTTP Server ans instalarlo siguiendo estos pasos.

1. Descomprima el archivo descargado.

2. Ir dentro de / pywebsocket-xxx/src directorio.

3. $ Python setup.py build

4. $ Sudo python setup.py install

5. A continuación, lea el documento a través de:

$ Mod_pywebsocket pydoc

Esto instalará en su entorno de python.

Inicie el servidor

Ir a la pywebsocket-xxx/src/mod_pywebsocket carpeta y ejecutar el siguiente comando:

$ Sudo python standalone.py-p 9998-w .. / ejemplo /

Esto iniciará el servidor escucha en el puerto 9998 y utilizar el directorio de los controladores especificados por la opción-w donde reside nuestra echo_wsh.py.

Parte III

1. Configurar apache para servir html5 WebSocket aplicaciones con pywebsocket

Comenzando con:

· Ubuntu 9.10

· Apache2 instalado y funcionando (punch sudo apt-get install apache2 en el terminal, escribir 127.0.0.1 en el navegador para comprobar)

· 2.6.x Python instalado y funcionando

· Subversión

Paso 1: Instalar mod_python y conseguir que funcione con Apache

Ponche sudo apt-get install libapache2-mod-python en el terminal

En / etc/apache2/sites-available/default cambiar la parte que se ve así:

Options Indexes FollowSymLinks MultiViews

AllowOverride None

Orden allow, deny

permitir de todo

Options Indexes FollowSymLinks MultiViews

AllowOverride None

Orden allow, deny

permitir de todo

Mod_python AddHandler. Py

Mod_python PythonHandler. Editor

En PythonDebug

Reiniciar apache: sudo /etc/init.d/apache2 restart

Prueba de que al lanzar algo como esto en un nuevo test.py archivo en / var / www:

1 2	def index (req): volver "Test éxito"

Navegue a localhost / test.py para ver si la prueba es satisfactoria

Paso 2: Obtener e instalar pywebsocket

Asegúrarse de que ha instalado la subversión y ejecutar esto en el terminal: svn checkout http://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only
Ahora vaya a la-de sólo lectura pywebsocket carpeta en la que descargó ... tcc cd pywebsocket-read-only
Ejecutar sudo python setup.py build
Luego sudo python setup.py install
Cree un directorio para los controladores ... Hice la mía en mi directorio home como se puede ver a continuación
Ahora edite / etc/apache2/httpd.conf para incluir lo siguiente:

PythonPath "sys.path + ['/ usr/local/lib/python2.6/dist-packages/mod_pywebsocket']"

Mod_pywebsocket PythonOption. Handler_root / home / travis / Escritorio / websock_handlers

Mod_pywebsocket PythonHeaderParserHandler. Headerparserhandler

La primera ruta / usr/local/lib/python2.6/dist-packages/mod_pywebsocket es donde instaló mod_pywebsocket y debe estar en un lugar similar para usted.
Los trayectoria segundo / home / travis / Escritorio / websock_handlers es donde pongo mi directorio de manipuladores.
Recuerde que debe cambiar las rutas para adaptarse a su aplicación.

sábado, 14 de diciembre de 2013

Informe Final Laboratorio telemática

2. ¿Cómo resultó HTML5?

El HTML5 <! DOCTYPE>

3. Mínimo de documentos HTML5

4. HTML5 - Nuevas funciones

5. Soporte del navegador para HTML5

6. HTML5 Referencias

7. HTML5 Nuevos Elementos

Nuevos elementos en HTML5

8. El elemento nuevo <canvas>

9. Nuevos elementos Medios

10. Nuevos Elementos Form

11. Nueva Semantic Elements / Estructural

12. Elementos eliminados

13. HTML5 Canvas

14. ¿Qué es el lienzo?

Soporte del navegador

Crear un lienzo

Dibuje en el lienzo con javascript

Lienzo Coordenadas

Lienzo - Caminos

Ejemplo

Ejemplo

Lienzo - Texto

Ejemplo

Ejemplo

Lienzo - Degradados

Ejemplo

Ejemplo

Lienzo - Imágenes

Imagen de usar:

Ejemplo

HTML5 Inline SVG

15. ¿Qué es SVG?

SVG Ventajas

Soporte del navegador

Insertar SVG directamente en páginas HTML

Ejemplo

Diferencias entre SVG y Canvas

16. Comparativa de Canvas y SVG

17. HTML5 Arrastrar y soltar

Arrastrar y soltar

HTML5 Ejemplo de Arrastrar y soltar

Ejemplo

Hacer una Arrastrable Element

Qué Arrastre - ondragstart y setData ()

Donde Caiga - ondragover

Haga lo Drop - ondrop

18. HTML5 Geolocalización

Localice la posición del usuario

Soporte del navegador

HTML5 - El uso de Geolocalización

Ejemplo

19. Controlar errores y Rechazos

Ejemplo

Viendo el resultado en un mapa

Ejemplo

Información específica de la ubicación

El getCurrentPosition () Método - Devolver datos

Objeto Geolocalización - Otros métodos interesantes

Ejemplo

20. HTML5 video

Compruebe si su navegador soporta vídeo HTML5

Video en la Web

Soporte del navegador

HTML5 Video - ¿Cómo funciona?

Ejemplo

Formatos de vídeo y Soporte del navegador

Tipos MIME para Formatos de vídeo

HTML5 <video> - Métodos y propiedades DOM

Ejemplo 1

HTML5 video Etiquetas

HTML5 Audio

Audio en la Web

Soporte del navegador

HTML5 de audio - Cómo funciona

Ejemplo

Tipos MIME para los formatos de audio

HTML5 Audio Tags