No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso acelerado para comprender rápidamente los fundamentos de la funcionalidad de HTML5, estás en el lugar correcto.
Voy a cubrir el nuevo marcado semántico, el Canvas para el dibujo y la ayuda de la animación, audio y vídeo, y cómo usar HTML5 en los navegadores más antiguos. Podría ser un poco más de cinco minutos, pero te prometo que lo haré rápido. Quédate conmigo ... que va a valer la pena!
Marcado semántico y Diseño de página
Hay una gran historia acerca de una universidad que, en la construcción de su campus, no crearon sus propios senderos. Ellos plantaron hierba y esperaron.
Un año más tarde, el césped se llevaba a cabo todos los que la gente caminaba con más frecuencia. Así que ahí es donde la universidad abrió las aceras actuales.
Tiene perfecto sentido! Las aceras estaban exactamente donde la gente realmente anduvo.
Los nuevos elementos de semantica de HTML5, se basan exactamente en la misma logica (véase la guía de diseño del W3C para "pavimentar los Cowpaths").
Los elementos semánticos describen su significado o propósito claramente en el navegador y para el desarrollador. Comparemos eso con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una división o una sección en un documento HTML, pero no nos dice nada acerca de su contenido o transmitir un significado claro. <div>
Los desarrolladores utilizan habitualmente identificadores y / o nombres de las clases con las etiquetas <div>. Esto conlleva un mayor significado a los desarrolladores, pero, por desgracia, no ayudar a los navegadores obtener el propósito de ese marcado. <div id="header">
En HTML5, hay nuevos elementos semánticamente ricos que pueden transmitir el propósito del elemento a los desarrolladores y navegadores. <header>
El W3C extraído miles de millones de páginas web existentes para descubrir las IDs y los nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se echó div1, div2, etc, aparecieron con una lista de elementos enriquecidos descriptivos que ya estaban siendo utilizados, y se convirtieron en estandares.
Éstos son algunos de los nuevos elementos semánticos en HTML5:
Pero por si acaso, aquí hay una visualización:
Los header y footer son fáciles de entender y nav crea una navegación o la barra de menú. Puede utilizar las sections y artícles para agrupar su contenido. Finalmente, el elemento aside puede ser utilizado para el contenido secundario, por ejemplo, como una barra lateral de enlaces relacionados.
He aquí un ejemplo simple de un código que utiliza estos elementos.
Ahora, imagine que esta en manos de alguien realmente bueno en CSS (que no soy yo). El resultado es muy poderoso. El carácter descriptivo del HTML hace que sea muy fácil trabajar con él.
Por último, si usted está tratando de seguir a lo largo de Visual Studio, pero que se está viendo líneas onduladas por todos lados que VS no comprende los elementos de HTML5, asegúrese de que tiene Visual Studio 2010 SP1 instalado.
Luego, en el menú de Visual Studio, vaya a Herramientas, Opciones. En el panel de navegación izquierdo, expanda Editor de texto, HTML, a continuación, haga clic en Validación. En el menú de destino desplegable, seleccione HTML5. Esto le dará soporte HTML5 IntelliSense. ¡Menos mal!
Esto es lo que el código anterior produce:
Ahora vamos a recorrer el código.
En primer lugar, creo el canvas actual y le doy una ID de "myCanvas". Si este código se visualiza en un navegador que no soporta el elemento canvas HTML5, se mostrará el mensaje "Su navegador no soporta la etiqueta canvas" en vez de dibujar la bandera.
A continuación, tengo un script. Recuerde, la etiqueta canvas sólo es un contenedor para los gráficos, usted debe usar JavaScript para llamar dibujar y hacer que los gráficos. En primer lugar, utilizo una referencia al lienzo con la ID "myCanvas", y luego el contexto del lienzo que proporciona métodos y propiedades para la elaboración y manipulación de gráficos en el lienzo. He especificado "2D", para usar un contexto de 2 dimensiones para dibujar en la página.
Luego, dibujar el rectángulo azul. Yo uso fillStyle para especificar el color azul. Y fillRect para dibujar el rectángulo, especificando el tamaño y posición. Llamando fillRect (0, 0, 125, 75) significa: a partir de la posición (0, 0) - la parte superior izquierda esquina - dibujar un rectángulo con width = 125 height = píxeles y 75 píxeles.
Por último, dibujo la X blanca en la bandera. La primera vez que llame a BeginPath para iniciar el proceso de pintar un camino. Puedo especificar una anchura de línea lineWidth de 15 píxeles (con las conjeturas y comprobar el método de tratar los diferentes valores hasta que se parecía correcto) y un strokeStyle de "blanco" para hacer la ruta de color blanco. Luego trazar la ruta utilizando moveTo y lineTo. Estos métodos de la posición de un "cursor" para dibujar, la diferencia es que moveTo mueve el cursor sin trazar una línea y lineTo dibuja una línea en movimiento. Empiezo por pasar a la posición (0, 0) - la parte superior izquierda de la esquina - y luego trazar una línea a (125, 75) - la parte inferior derecha esquina. Luego me muevo a la posición (125, 0) - la parte superior derecha de la esquina - y trazar una línea a (0, 75) - la parte inferior izquierda esquina. Por último, el método de stroke en realidad renderiza estos strokes.
Comparativa rápida de Canvas Vs SVG
Scalable Vector Graphics (SVG) es un estándar anterior para dibujar en una ventana del navegador. Con el lanzamiento de canvas en HTML5, muchas personas se preguntan cómo se comparan.
Para mis ojos, la mayor diferencia es que utiliza la representación de canvas de modo inmediato y SVG utiliza el modo de representación retenido. Esto significa que el canvas causa representación directa de los gráficos a la pantalla. En mi código anterior, una vez que la bandera se dibuja, se olvida por el sistema y ningún estado se mantiene. Hacer un cambio requeriría un completo redibujado. En contraste, SVG retiene un modelo completo de los objetos a ser prestados. Para hacer un cambio, usted puede simplemente cambiar (por ejemplo) la posición del rectángulo, y el navegador determina la forma de volver a redibujar. Esto es menos trabajo para el desarrollador, pero también más pesado para mantener un modelo.
La posibilidad de estilo de SVG a través de CSS en adición de JavaScript es valido llamanarlo como otra consideración. Un canvas puede ser manipulado a través de JavaScript unicamente.
Aquí está una descripción de alto nivel de otras diferencias:
Para una comparación más detallada, quiero señalar que algunas de las sesiones (de la que se sacaron los datos para componer este cuadro fabuloso, con el permiso):
Patrick Dengler: "Pensamientos sobre cuándo usar SVG y Canvas"
Jatinder Mann: "Inmersión profunda en HTML5 Canvas"
John Bristowe: "Introducción a HTML5 Canvas"
Soporte de Audio y vídeo
Uno de los grandes rasgos en el nuevo HTML5 es la capacidad de soportar reproducción de audio y videos. Antes de HTML5, que necesita un plug-in como Silverlight o Flash para esta funcionalidad. En HTML5, es posible integrar audio y video utilizando el <audio> nuevo y etiquetas <video>.
Desde una perspectiva de codificación, el audio y video son elementos muy fáciles de usar. (Demosle una mirada más a fondo en sus atributos más abajo). Los elementos de audio y vídeo también se apoyan en todos los navegadores principales (las últimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difícil es que se necesita codecs para reproducir audio y vídeo, y apoyar a los diferentes navegadores diferentes codecs. (Para una maravillosa explicación en profundidad de los contenedores y codecs de vídeo, lea http://diveintohtml5.org/video.html.) Afortunadamente, este no es un show-tapón. El soporte para audio y video se llevó a cabo de una manera brillante, donde hay apoyo para tratar de varios formatos de archivo diferentes (el navegador intentará cada uno y luego bajar a la siguiente si no se puede jugar). Como práctica recomendada, se debe proporcionar múltiples fuentes de audio y vídeo para dar cabida a los diferentes navegadores. También puede retroceder a Silverlight o Flash. Por último, el texto entre las etiquetas de apertura y cierre (como <audio> y </ audio>) se mostrará en los navegadores que no soportan el audio o el elemento de vídeo.
Por ejemplo:
Con este código, el primer navegador intentará reproducir el archivo laughter.mp3. Si no tiene los codecs adecuados para jugar, lo siguiente será tratar de reproducir el archivo laughter.ogg. Si el elemento de audio no se reconoce en absoluto por el navegador, se mostrará el texto "Su navegador no es compatible con el elemento de audio", donde el control de audio debe ser.
Una advertencia para audio y video: no hay un built-in gestión de derechos digitales (DRM) de apoyo, hay que implementarlo por ti mismo como el desarrollador. Vea este enlace de la W3C, que explica su posición. (Si usted tiene una necesidad de contenidos con DRM, también echa un vistazo a la documentación de Silverlight DRM, que puede ser una solución más fácil.)
Ahora vamos a profundizar en cada uno de estos nuevos elementos.
audio
En primer lugar, echemos un vistazo a <audio> con más detalle.
Ya hemos discutido el efecto de retroceso de tratar de cada fuente hasta que encuentra uno que con suerte se pueden reproducir.
Nótese que no es un atributo controles. Esto mostrará los controles de reproducción de audio, incluyendo un botón de reproducción / pausa, el tiempo, un botón de silencio, y el volumen de los controles. En la mayoría de situaciones, es bueno para mostrar los controles de audio para el usuario; odio visitar un sitio web con sonido y ser incapaz de detener, silenciar, o gire hacia abajo. ¿No?
Los controles adquieren un aspecto diferente en distintos navegadores. Éstos son lo que parecen en Chrome (con una canción sonando). El volumen desplegable aparece abajo cuando se pasa sobre el icono de sonido en el extremo derecho.
Estos son los controles en Firefox (con una canción en pausa). Al igual que Chrome, también tiene un control de volumen pop-up (no se muestra) cuando se pasa sobre el icono de sonido en el extremo derecho.
Otros atributos divertidos en el elemento de audio incluyen:
No es perfecto, pero que es muy parecido a la versión original que vemos en Internet Explorer 9. Modernizr añadido estos elementos HTML5 nuevos que IE8 no entendía en el DOM, y desde que estaban en el DOM, podríamos estilo de ellos el uso de CSS.
Pero Modernizr hace más que eso! Tenga en cuenta que una de las diferencias entre nuestros IE8 e IE9 versiones de la página web es que la versión IE9 tiene buenas esquinas redondeadas en los dos artículos y la figura, y la versión de IE8 no es así. También podemos utilizar Modernizr para solucionar este problema.
En este script, estamos revisando el objeto Modernizr para ver si hay apoyo para "borderradius" (una característica de CSS3). Si no es así, yo uso un script de jQuery llamado jquery.corner.js (que está disponible para su descarga en http://jquery.malsup.com/corner/ y requiere que la referencia adicional para jQuery que he hecho antes). Entonces sólo tiene que llamar al método de la esquina de esa secuencia de comandos en mis artículos y figuras para darles esquinas redondeadas.
O, usted puede hacer esto de una manera ligeramente diferente. Modernizr tiene un accesorio opcional (no incluido) cargador de recursos condicionada llama Modernizr.load (), sobre la base de Yepnope.js. Esto le permite cargar sólo las secuencias de comandos polyfilling que los usuarios necesitan, y se carga scripts de forma asincrónica y en paralelo que a veces pueden ofrecer un aumento de rendimiento. Para obtener Modernizr.load, usted tiene que incluir en un encargo de la estructura de la Modernizr que hay que crear en http://www.modernizr.com/download/, no está incluido en la versión de desarrollo. Con Modernizr.load, podemos escribir un script como el siguiente:
En definitiva, se implementa la misma funcionalidad que el guión anterior. Modernizr.load primera prueba de la propiedad Boolean "Modernizr.borderradius" para ver si es compatible. Entonces, nope define los recursos necesarios para cargar si la prueba es falsa. Dado que IE8 no es compatible con la propiedad de CSS3 "borderradius", que se carga el script jquery.corner.js. Por último, la devolución de llamada especifica una función para ejecutarse cada vez que la secuencia de comandos se realiza la carga, por lo que llamaremos el "rincón" método en mis artículos y figuras como lo hacíamos antes. No hay un breve tutorial sobre Modernizr.load en http://www.modernizr.com/docs/#load si quieres adentrarte.
Voy a cubrir el nuevo marcado semántico, el Canvas para el dibujo y la ayuda de la animación, audio y vídeo, y cómo usar HTML5 en los navegadores más antiguos. Podría ser un poco más de cinco minutos, pero te prometo que lo haré rápido. Quédate conmigo ... que va a valer la pena!
Marcado semántico y Diseño de página
Hay una gran historia acerca de una universidad que, en la construcción de su campus, no crearon sus propios senderos. Ellos plantaron hierba y esperaron.
Un año más tarde, el césped se llevaba a cabo todos los que la gente caminaba con más frecuencia. Así que ahí es donde la universidad abrió las aceras actuales.
Tiene perfecto sentido! Las aceras estaban exactamente donde la gente realmente anduvo.
Los nuevos elementos de semantica de HTML5, se basan exactamente en la misma logica (véase la guía de diseño del W3C para "pavimentar los Cowpaths").
Los elementos semánticos describen su significado o propósito claramente en el navegador y para el desarrollador. Comparemos eso con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una división o una sección en un documento HTML, pero no nos dice nada acerca de su contenido o transmitir un significado claro. <div>
Los desarrolladores utilizan habitualmente identificadores y / o nombres de las clases con las etiquetas <div>. Esto conlleva un mayor significado a los desarrolladores, pero, por desgracia, no ayudar a los navegadores obtener el propósito de ese marcado. <div id="header">
En HTML5, hay nuevos elementos semánticamente ricos que pueden transmitir el propósito del elemento a los desarrolladores y navegadores. <header>
El W3C extraído miles de millones de páginas web existentes para descubrir las IDs y los nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se echó div1, div2, etc, aparecieron con una lista de elementos enriquecidos descriptivos que ya estaban siendo utilizados, y se convirtieron en estandares.
Éstos son algunos de los nuevos elementos semánticos en HTML5:
- article
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark
- nav
- section
- time
Pero por si acaso, aquí hay una visualización:
Los header y footer son fáciles de entender y nav crea una navegación o la barra de menú. Puede utilizar las sections y artícles para agrupar su contenido. Finalmente, el elemento aside puede ser utilizado para el contenido secundario, por ejemplo, como una barra lateral de enlaces relacionados.
He aquí un ejemplo simple de un código que utiliza estos elementos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article. These articles could be blog posts, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
Debería llamar a algunos pocos elementos nuevos en este código ...
¿Te diste cuenta el elemento hgroup, que agrupaba a las cabeceras h1 y h2?
El elemento de marcado me ha permitido resaltar o marcar algún texto importante. Por último, los elementos de la figura y la figcaption especifica una figura en el contenido del contenido (como una imagen, diagrama, fotografías, fragmentos de código, etc) y me dejó asociar un título con esa figura, respectivamente. Esto es lo que la página se vería cuando se combina con un poco de CSS. (NOTA:. se ha tomado prestado este CSS del talentoso compañero de equipo Brandon Satrom).
Ahora, imagine que esta en manos de alguien realmente bueno en CSS (que no soy yo). El resultado es muy poderoso. El carácter descriptivo del HTML hace que sea muy fácil trabajar con él.
Por último, si usted está tratando de seguir a lo largo de Visual Studio, pero que se está viendo líneas onduladas por todos lados que VS no comprende los elementos de HTML5, asegúrese de que tiene Visual Studio 2010 SP1 instalado.
Luego, en el menú de Visual Studio, vaya a Herramientas, Opciones. En el panel de navegación izquierdo, expanda Editor de texto, HTML, a continuación, haga clic en Validación. En el menú de destino desplegable, seleccione HTML5. Esto le dará soporte HTML5 IntelliSense. ¡Menos mal!
Para profundizar más en los elementos semánticos, echa un vistazo a:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = '#0065BD';
ctx.fillRect(0, 0, 125, 75);
// Draw white X
ctx.beginPath();
ctx.lineWidth = "15";
ctx.strokeStyle = "white";
ctx.moveTo(0, 0);
ctx.lineTo(125, 75);
ctx.moveTo(125, 0);
ctx.lineTo(0, 75);
ctx.stroke();
</script>
</body>
</html>
Esto es lo que el código anterior produce:
Ahora vamos a recorrer el código.
En primer lugar, creo el canvas actual y le doy una ID de "myCanvas". Si este código se visualiza en un navegador que no soporta el elemento canvas HTML5, se mostrará el mensaje "Su navegador no soporta la etiqueta canvas" en vez de dibujar la bandera.
A continuación, tengo un script. Recuerde, la etiqueta canvas sólo es un contenedor para los gráficos, usted debe usar JavaScript para llamar dibujar y hacer que los gráficos. En primer lugar, utilizo una referencia al lienzo con la ID "myCanvas", y luego el contexto del lienzo que proporciona métodos y propiedades para la elaboración y manipulación de gráficos en el lienzo. He especificado "2D", para usar un contexto de 2 dimensiones para dibujar en la página.
Luego, dibujar el rectángulo azul. Yo uso fillStyle para especificar el color azul. Y fillRect para dibujar el rectángulo, especificando el tamaño y posición. Llamando fillRect (0, 0, 125, 75) significa: a partir de la posición (0, 0) - la parte superior izquierda esquina - dibujar un rectángulo con width = 125 height = píxeles y 75 píxeles.
Por último, dibujo la X blanca en la bandera. La primera vez que llame a BeginPath para iniciar el proceso de pintar un camino. Puedo especificar una anchura de línea lineWidth de 15 píxeles (con las conjeturas y comprobar el método de tratar los diferentes valores hasta que se parecía correcto) y un strokeStyle de "blanco" para hacer la ruta de color blanco. Luego trazar la ruta utilizando moveTo y lineTo. Estos métodos de la posición de un "cursor" para dibujar, la diferencia es que moveTo mueve el cursor sin trazar una línea y lineTo dibuja una línea en movimiento. Empiezo por pasar a la posición (0, 0) - la parte superior izquierda de la esquina - y luego trazar una línea a (125, 75) - la parte inferior derecha esquina. Luego me muevo a la posición (125, 0) - la parte superior derecha de la esquina - y trazar una línea a (0, 75) - la parte inferior izquierda esquina. Por último, el método de stroke en realidad renderiza estos strokes.
Comparativa rápida de Canvas Vs SVG
Scalable Vector Graphics (SVG) es un estándar anterior para dibujar en una ventana del navegador. Con el lanzamiento de canvas en HTML5, muchas personas se preguntan cómo se comparan.
Para mis ojos, la mayor diferencia es que utiliza la representación de canvas de modo inmediato y SVG utiliza el modo de representación retenido. Esto significa que el canvas causa representación directa de los gráficos a la pantalla. En mi código anterior, una vez que la bandera se dibuja, se olvida por el sistema y ningún estado se mantiene. Hacer un cambio requeriría un completo redibujado. En contraste, SVG retiene un modelo completo de los objetos a ser prestados. Para hacer un cambio, usted puede simplemente cambiar (por ejemplo) la posición del rectángulo, y el navegador determina la forma de volver a redibujar. Esto es menos trabajo para el desarrollador, pero también más pesado para mantener un modelo.
La posibilidad de estilo de SVG a través de CSS en adición de JavaScript es valido llamanarlo como otra consideración. Un canvas puede ser manipulado a través de JavaScript unicamente.
Aquí está una descripción de alto nivel de otras diferencias:
Canvas
|
SVG
|
|
Abstracción
|
Basado en pixeles (bitmap dinamico)
|
Basado en formas
|
Elementos
|
Elemento sencillo HTML
|
Elementos gráficos multiples los cuales se convierten en parte del Objeto
Modelo del Documento (DOM)
|
Driver
|
Se modifica únicamente a través del Script
|
Modificado a través de Script y CSS
|
Modelo del Evento
|
La interacción con el usuario es granular (x,y)
|
La interacción con el usuario es abstaida (rect, path)
|
Desempeño
|
El desempeño es mejor con superficies pequeñas y/o mayores números de
objetos
|
El desempeño es mejor con pequeños números de objetos y/o superficies
grandes.
|
Para una comparación más detallada, quiero señalar que algunas de las sesiones (de la que se sacaron los datos para componer este cuadro fabuloso, con el permiso):
Patrick Dengler: "Pensamientos sobre cuándo usar SVG y Canvas"
Jatinder Mann: "Inmersión profunda en HTML5 Canvas"
John Bristowe: "Introducción a HTML5 Canvas"
Soporte de Audio y vídeo
Uno de los grandes rasgos en el nuevo HTML5 es la capacidad de soportar reproducción de audio y videos. Antes de HTML5, que necesita un plug-in como Silverlight o Flash para esta funcionalidad. En HTML5, es posible integrar audio y video utilizando el <audio> nuevo y etiquetas <video>.
Desde una perspectiva de codificación, el audio y video son elementos muy fáciles de usar. (Demosle una mirada más a fondo en sus atributos más abajo). Los elementos de audio y vídeo también se apoyan en todos los navegadores principales (las últimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difícil es que se necesita codecs para reproducir audio y vídeo, y apoyar a los diferentes navegadores diferentes codecs. (Para una maravillosa explicación en profundidad de los contenedores y codecs de vídeo, lea http://diveintohtml5.org/video.html.) Afortunadamente, este no es un show-tapón. El soporte para audio y video se llevó a cabo de una manera brillante, donde hay apoyo para tratar de varios formatos de archivo diferentes (el navegador intentará cada uno y luego bajar a la siguiente si no se puede jugar). Como práctica recomendada, se debe proporcionar múltiples fuentes de audio y vídeo para dar cabida a los diferentes navegadores. También puede retroceder a Silverlight o Flash. Por último, el texto entre las etiquetas de apertura y cierre (como <audio> y </ audio>) se mostrará en los navegadores que no soportan el audio o el elemento de vídeo.
Por ejemplo:
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
Con este código, el primer navegador intentará reproducir el archivo laughter.mp3. Si no tiene los codecs adecuados para jugar, lo siguiente será tratar de reproducir el archivo laughter.ogg. Si el elemento de audio no se reconoce en absoluto por el navegador, se mostrará el texto "Su navegador no es compatible con el elemento de audio", donde el control de audio debe ser.
Una advertencia para audio y video: no hay un built-in gestión de derechos digitales (DRM) de apoyo, hay que implementarlo por ti mismo como el desarrollador. Vea este enlace de la W3C, que explica su posición. (Si usted tiene una necesidad de contenidos con DRM, también echa un vistazo a la documentación de Silverlight DRM, que puede ser una solución más fácil.)
Ahora vamos a profundizar en cada uno de estos nuevos elementos.
audio
En primer lugar, echemos un vistazo a <audio> con más detalle.
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
Ya hemos discutido el efecto de retroceso de tratar de cada fuente hasta que encuentra uno que con suerte se pueden reproducir.
Nótese que no es un atributo controles. Esto mostrará los controles de reproducción de audio, incluyendo un botón de reproducción / pausa, el tiempo, un botón de silencio, y el volumen de los controles. En la mayoría de situaciones, es bueno para mostrar los controles de audio para el usuario; odio visitar un sitio web con sonido y ser incapaz de detener, silenciar, o gire hacia abajo. ¿No?
Los controles adquieren un aspecto diferente en distintos navegadores. Éstos son lo que parecen en Chrome (con una canción sonando). El volumen desplegable aparece abajo cuando se pasa sobre el icono de sonido en el extremo derecho.
Estos son los controles en Firefox (con una canción en pausa). Al igual que Chrome, también tiene un control de volumen pop-up (no se muestra) cuando se pasa sobre el icono de sonido en el extremo derecho.
Otros atributos divertidos en el elemento de audio incluyen:
Atributo
|
Valores
pasivos
|
Descripción
|
Autoplay
|
Autoplay
|
Comienza a sonar el audio tan pronto como esta lista.
|
Controls
|
Controls
|
Muestra los controles de audio en la pagina
|
Loop
|
Loop
|
Hace que se repita y vuelva a sonar cada vez que termine.
|
Preload
|
Auto, metadata, none
|
Determina si se debe cargar el audio cuando se carga la página. El
valor auto se carga el audio, los metadatos se carga sólo los metadatos
asociados con el archivo de audio, y ninguno de audio no se precarga. (Este
atributo se ignora si se especifica función de reproducción automática.)
|
Src
|
(cualquier url)
|
Especifica la url del archivo de audio a escuchar
|
Así que este ejemplo de código no sólo mostrar los controles de reproducción de audio, sino también iniciar la reproducción de audio inmediatamente y repetir una y otra vez en un bucle.
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
Si ud quiere tocar el elemento <audio> en tu navegador, hay un gran "Editor Tryit" en http://w3schools.com que le permite modificar algunos ejemplos de código y ver qué pasa. O pruebe el Cómo agregar un reproductor de audio de HTML5 a su artículo del sitio.
Vídeo
Ahora, vamos a examinar el elemento <video>.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Como ya comentamos anteriormente, el elemento de vídeo tiene soporte para múltiples fuentes, que se tratan en el orden y luego caen a la siguiente opción.
Como audio, vídeo tiene un atributo controls. Aquí hay una captura de pantalla de los controles de video en Internet Explorer:
Otros atributos divertidos del elemento vídeo incluyen:
Una vez más, para iteractuar con elemento <video> usted mismo, use el Editor de "Tryit" de http://w3schools.com que le permite modificar algunos ejemplos de código y ver qué pasa. Para aprender más acerca de video y audio, echa un vistazo a:
- 5 cosas que usted necesita saber para comenzar a utilizar <audio> y <video> hoy
- Cómo agregar un reproductor de audio de HTML5 en su sitio
- W3C Escuelas video HTML5
Desarrollar con HTML5, manteniendo el apoyo a los navegadores más antiguos Hemos hablado de un montón de nuevas funcionalidades fresco en HTML5, incluyendo los nuevos elementos semánticos, la etiqueta de tela para el dibujo y el apoyo de audio y vídeo. Usted puede pensar que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de sus usuarios no tienen compatibles con HTML5 navegadores todavía. Por no hablar de que los navegadores que HACER HTML5 support diferentes piezas de la misma, no todos de la nueva funcionalidad de HTML5 es compatible con todos los navegadores y diversas características puede implementarse de manera diferente. Pero hay una manera de utilizar las nuevas funcionalidades sin romper su sitio para los usuarios con navegadores más antiguos. Usted puede utilizar polyfills. De acuerdo con Paul Irish, un polyfill es "una cuña que imita a una futura API, que proporciona una funcionalidad de reserva para exploradores más antiguos." Un polyfill a llenar los vacíos en los navegadores antiguos que no soportan la funcionalidad de HTML5 en su sitio. Aprender a usar polyfills le permitirá utilizar HTML5 hoy sin dejar de lado los usuarios de navegadores más antiguos. Una forma de obtener el apoyo polyfill es la biblioteca JavaScript Modernizr (pero hay muchos polyfills disponible). Modernizr añade la capacidad de función de detección para que pueda comprobar específicamente para si un navegador soporta (por ejemplo) el elemento de tela y proporcionar una opción de copia de seguridad si no lo hace. Vamos a caminar a través de un ejemplo. Recuerda el ejemplo de código que he usado en la introducción de elementos semánticos y diseño de la página? Aquí está de nuevo:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Footer - Copyright 2011</footer> </body> </html>
Este código contiene una serie de elementos HTML5 nuevas que no son compatibles con los navegadores más antiguos. Recuerde que en Internet Explorer 9, se veía así:
Podemos utilizar las herramientas de desarrolladores de Internet Explorer para ver lo que esto se vería como en versiones anteriores de IE. En Internet Explorer, pulse F12 para acceder a las herramientas de desarrollo.
Tenga en cuenta que el modo de navegador (en la barra de menú de color gris en la parte superior) está configurado para IE9. Haga clic en el modo navegación, y desde el menú desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte de HTML5).
Después de realizar este cambio, y cambiar a un navegador no compatible con HTML5, esto es lo que mi página se ve así:
Aunque esto parece un problema monstruoso para corregir, no es realmente tan malo. La razón de que esto no funciona es que IE8 no reconoce los elementos HTML5 nuevos que estoy utilizando, por lo que no añadirlos a la DOM, por lo que no puede estilo usando CSS. Sin embargo, sólo añadir una referencia a Modernizr (sin realizar ningún cambio de código de otros!) Será la fuerza bruta de estos elementos en el DOM. Puedes descargarlo desde http://www.modernizr.com/download/ y agregue una referencia en la sección <head> así:
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>
No es perfecto, pero que es muy parecido a la versión original que vemos en Internet Explorer 9. Modernizr añadido estos elementos HTML5 nuevos que IE8 no entendía en el DOM, y desde que estaban en el DOM, podríamos estilo de ellos el uso de CSS.
Pero Modernizr hace más que eso! Tenga en cuenta que una de las diferencias entre nuestros IE8 e IE9 versiones de la página web es que la versión IE9 tiene buenas esquinas redondeadas en los dos artículos y la figura, y la versión de IE8 no es así. También podemos utilizar Modernizr para solucionar este problema.
<script type="text/javascript">
if (!Modernizr.borderradius) {
$.getScript("script/jquery.corner.js", function() {
$("article").corner();
$("figure").corner();
});
}
</script>
En este script, estamos revisando el objeto Modernizr para ver si hay apoyo para "borderradius" (una característica de CSS3). Si no es así, yo uso un script de jQuery llamado jquery.corner.js (que está disponible para su descarga en http://jquery.malsup.com/corner/ y requiere que la referencia adicional para jQuery que he hecho antes). Entonces sólo tiene que llamar al método de la esquina de esa secuencia de comandos en mis artículos y figuras para darles esquinas redondeadas.
O, usted puede hacer esto de una manera ligeramente diferente. Modernizr tiene un accesorio opcional (no incluido) cargador de recursos condicionada llama Modernizr.load (), sobre la base de Yepnope.js. Esto le permite cargar sólo las secuencias de comandos polyfilling que los usuarios necesitan, y se carga scripts de forma asincrónica y en paralelo que a veces pueden ofrecer un aumento de rendimiento. Para obtener Modernizr.load, usted tiene que incluir en un encargo de la estructura de la Modernizr que hay que crear en http://www.modernizr.com/download/, no está incluido en la versión de desarrollo. Con Modernizr.load, podemos escribir un script como el siguiente:
<script type="text/javascript">
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
En definitiva, se implementa la misma funcionalidad que el guión anterior. Modernizr.load primera prueba de la propiedad Boolean "Modernizr.borderradius" para ver si es compatible. Entonces, nope define los recursos necesarios para cargar si la prueba es falsa. Dado que IE8 no es compatible con la propiedad de CSS3 "borderradius", que se carga el script jquery.corner.js. Por último, la devolución de llamada especifica una función para ejecutarse cada vez que la secuencia de comandos se realiza la carga, por lo que llamaremos el "rincón" método en mis artículos y figuras como lo hacíamos antes. No hay un breve tutorial sobre Modernizr.load en http://www.modernizr.com/docs/#load si quieres adentrarte.
Ahora, mediante el uso de cualquiera de estos scripts, nuestra versión de Internet Explorer 8 (que no es compatible con HTML5) se parece a esto:
Por lo tanto, utilizando polyfills y herramientas como Modernizr le permiten utilizar la funcionalidad de HTML5 nueva y todavía proporcionar una buena experiencia en los navegadores antiguos también. Para obtener más información, echa un vistazo a http://www.diveintohtml5.org/detect.html que describe en detalle cómo Modernizr detecta las características de HTML5.
En resumen
En esta introducción a HTML5, cubrimos el marcado semántico, canvas, audio y video, y el uso de HTML5, manteniendo el apoyo a los navegadores más antiguos. Pero también señalan que hay un montón de cosas que no comprende: a los microdatos, almacenamiento, CSS3, etc Aquí hay algunos recursos para seguir aprendiendo acerca de HTML5:
Unidad de prueba de IE - incluso si usted no utiliza Internet Explorer, este es un sitio impresionante. Contiene un montón de demos: demostraciones de velocidad, Demos HTML5, Demos gráficos y demostraciones del explorador. Trate de ellos en tu navegador favorito! Este sitio también tiene enlaces a otros recursos, también.
Belleza de la Web - reúne a los mejores sitios en la web que aprovechan la aceleración de hardware de HTML5 y características de colocación de clavos con Internet Explorer 9
BuildMyPinnedSite - todo el código, las ideas, y las muestras es necesario utilizar clavos y la integración de Windows
HTML5 Labs - Este sitio es donde los prototipos de Microsoft especificaciones iniciales e inestable de los estándares web de organismos como el W3C. Puedes jugar con prototipos como IndexedDB, WebSockets, FileAPI, y Medios de Comunicación de captura de la API.
Videos
La charla de Brandon Satrom de "Application Development with HTML5" en TechEd 2011 - esta es una fabulosa hora de duración, habla de de lo que usted necesita saber para hacer el desarrollo de HTML5
Conversaciones en HTML5 de MIX 2011 - una gran cantidad de sesiones de HTML5
Herramientas
Muchas de las herramientas de desarrollo soportan HTML5 ya. Prueba con estos:
- Visual Studio 2010 Service Pack 1 - SP1 agrega HTML5 y CSS3 básicas de IntelliSense y validación. Para obtener más información, consulte
- Estándares Web de actualización para Microsoft Visual Studio 2010 SP1 - esta es una extensión de Visual Studio IntelliSense que se suma actualizada HTML5 y CSS3 y validación de Visual Studio 2010 SP1, basado en la especificación W3C actual.
- WebMatrix - HTML5 está soportada por omisión de la caja (la adición de una nueva página HTML utiliza el tipo de documento por defecto HTML5 y código de la plantilla)
- ASP.NET MVC 3 herramientas de actualización
- Expression Web Service Pack 1 de 4
Además de las herramientas de desarrollo, no se olvide:
- Windows Phone "Mango" contiene Internet Explorer 9, que soporta sitios HTML5.
- Internet Explorer 10 Avances de la Plataforma cuenta con el apoyo de muchos de los nuevos CSS3 y HTML5 características, la lista completa se encuentra en http://msdn.microsoft.com/en-us/ie/gg192966.aspx.
HTML5 ya está aquí. Anímese a desarrollar sitios web increíbles!
Agradecimiento a la autora: Jennifer Marsman
No hay comentarios:
Publicar un comentario