HTML5 8

HTML5
No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso
acelerado para comprender con rapidez los fundamentos de la funcionalidad de HTML5, est en el
lugar correcto.
Hablaremos del nuevo lienzo para dibujo y animacin semntico de marcado, el soporte de audio y
video, y como usar HTML5 con navegadores anteriores. Podra tomar un poco ms de cinco
minutos, pero les prometo que tratar de hacerlo rpido. No se vaya, vale la pena!
Marcado semntico y diseo de pgina
Hay una gran historia acerca de una universidad que, cuando construy sus campus, no creo un
solo sendero para caminar. Simplemente sembraron reas de csped y esperaron.
Un ao ms tarde, el pasto se desgast en donde la gente caminaba ms frecuentemente. As que
es en donde la universidad construy las aceras.
Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba.
Los nuevos elementos semnticos del HTML5 se basaron en exactamente esa misma lgica
(vase el W3C gua de diseo para "Pave the Cowpaths").
Los elementos semnticos describen su significado o propsito claramente al navegador y al
desarrollador. Comprese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una divisin
o una seccin de un documento HTML, pero no nos dice nada acerca de su contenido o transmite
sentido claro alguno.
< div >
Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>.
Esto da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los
navegadores a derivar el propsito de ese marcado.
< div id ="header">
En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del
elemento a ambos desarrolladores y navegadores.
< header >
El W3C obtuvo datos de miles de millones de pginas web existentes para descubrir los ID y
nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descart div1,
div2, etc. , tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban
utilizando y esos fueron los que convirtieron en normas.
Aqu estn algunos de los nuevos elementos semnticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
Debido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos
elementos hacen.
Pero por si acaso, aqu va una visualizacin:
Los Headers y footers resultan claros, mientras que nav crea una barra de men o navegacin.
Puede utilizar sections y articles para agrupar su contenido. Por ltimo, el elemento aside puede
ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.
Este es un ejemplo sencillo de cdigo 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>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
Este es el primer artculo. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</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>
Quiero llamar a unos cuantos elementos nuevos ms en este cdigo
Ha notado que el elemento hgroup que agrupo a mis encabezados h1 y h2?
El elemento mark me permiti resaltar o marcar el texto importante. Finalmente, los
elementos figure y figcaption especifican una figura en mi contenido (como una imagen, grfico,
foto, un fragmento de cdigo, etc.) y me dejan asociar un pie con la firugra.
As es como la pgina web se vera combinada con algo de CSS. (NOTA: Ped prestado el CSS de
mi talentoso compaero Brandon Satrom y su TechEd talk, pero el efecto final menos que bello fes
culpa ma).
Ahora, imagine esto en manos de alguien que sea realmente bueno en CSS (que no lo soy). El
resultado es muy potente. El carcter descriptivo del HTML los hace sper fcil de manejar.
Por ltimo, si usted est tratando de seguirlo en Visual Studio, pero se encuentra con lneas
serpenteantes en todas partes que indican que VS no entiende los elementos HTML5,asegrese
de que tiene Visual Studio 2010 SP1instalado.
Luego, en el men de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda panel de
navegacin, expanda el Editor de texto, HTML y, a continuacin, haga clic en Validacin. Desde el
men desplegable seleccione HTML5. Esto le dar compatibilidad HTML5 IntelliSense. Fiu!
Para ir ms a profundidad en elementos semnticos, revise:

Cmo habilitar el soporte de estndar HTML5
La seccin de semntica de la especificacin W3C de HTML5
Adntrese en el captulo de semntica de HTML5 titulado " Qu significa todo esto? ".
Dibujo en HTML5 usando el elemento Canvas
Otro elemento novedoso en HTML5 es la etiqueta <canvas> Es exactamente a lo que suena, una
superficie de dibujo en blanco. Necesita usar JavaScript para manipular y dibujar sobre el lienzo.
Es posible que desee dar a su elemento canvas una id de atributo para que pueda tener acceso
mediante programacin desde su cdigo JavaScript (o si est usando jQuery y es el nico lienzo
en la pgina, usted puede tener acceso a el utilizando $('canvas') sin necesidad de ponerle
nombre).
Tambin puede (opcionalmente) especificar una altura y una anchura para el lienzo. Entre
<canvas> y </canvas>, se puede especificar un texto para mostrar en los navegadores que no
soportan el elemento canvas.
Este es un ejemplo sencillo de cmo utilizar canvas para dibujar. (Estoy intentando dibujar
labandera de Escocia. Por favor perdone las inexactitudes.)
<!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 cdigo genera:
Veamos ahora el cdigo.

En primer lugar, voy a crear el lienzo y a darle una ID de "myCanvas". Si este cdigo fuera vistoo
en un navegador que no soporta el elemento canvas HTML5, mostrara "Su navegador no soporta
la etiqueta canvas" en lugar de dibujar la bandera. .
Despus, tengo una secuencia de comandos. Recuerde, que la etiqueta canvas es slo un
contenedor para grficos; debe usar JavaScript para dibujar y representar grficos sobre ella. En
primer lugar, tomo una referencia al lienzo utilizando la ID "myCanvas" y, a continuacin, obtengo el
contexto del lienzo que proporciona propiedades y mtodos para la elaboracin y manipulacin de
la grfica sobre el lienzo. He especificado " 2d" para usar un contexto en dos dimensiones para
dibujar en la pgina.
A continuacin, dibujo el rectngulo azul. Uso fillStyle para especificar el color azul.
UsofillRect para dibujar el rectngulo, especificando el tamao y la posicin. Al llamar fillRect(0, 0,
125, 75) significa: comenzando en la posicin (0, 0), la esquina superior izquierda, dibujar un
rectngulo con ancho=125 alto=75 pxeles.
Por ltimo, dibujo la X blanca sobre la bandera. En primer lugar solicito beginPath para iniciar el
proceso pintar en una ruta. Especifico lineWidth (ancho de lnea) de 15 pxeles (utilizando el
mtodo de adivinar y revisar para intentar diferentes valores hasta que se vea bien) y
un strokeStyle de "blanco" para trazar la ruta del color blanco. A continuacin, trazo la ruta
utilizando moveTo y lineTo . Estos mtodos posicionan el "cursor" para dibujar; la diferencia es que
moveTo mueve el cursor sin trazar una lnea y lineTo dibuja una lnea mientras se desplaza.
Empezar movindome a la posicin (0, 0), la esquina superior izquierda y, a continuacin, trazar
una lnea a (125, 75), la esquina inferior derecha. Despus me muevo a la posicin (125, 0), la
esquina superior derecha y, a continuacin, trazar una lnea a (0, 75), la esquina inferior derecha.
Por ltimo, el mtodo stroke hace que estos trazos se vean.
Comparacin rpida de Canvas vs SVG
Grficos vectoriales escalables (SVG) es un estndar para dibujar en la ventana del navegador.
Con la liberacin de Canvas de HTML5, muchas personas se preguntan en qu difieren.
En mi opinin, la mayor diferencia es que canvas utiliza el modo inmediato de representacin y
SVG utiliza modo retenido de representacin. Esto significa que canvas hace directamente la
representacin de los grficos en la pantalla. En mi cdigo anterior, una vez que la bandera se
dibuja, el sistema lo olvida y no se conserva nada. Hacer un cambio requerir un redibujado
completo. En comparacin, SVG conserva un modelo completo de los objetos que se han
representado. Para efectuar un cambio, simplemente tiene que cambiar, por ejemplo, la posicin
del rectngulo y el explorador determinara cmo volver a hacerla. Esto es menos trabajo para los
desarrolladores, pero tambin resulta ms pesado para mantener un modelo.
Vale la pena considerar la capacidad de formatear SVG mediante CSS adems de JavaScript. Un
lienzo se puede manipular solamente a travs de Javascript.
He aqu una resea de alto nivel de otras diferencias:
CANVAS
SVG
ABSTRACCIN
Basado
en
pixeles
(bitmap
dinmico)
Basado en formas
ELEMENTOS
nico
HTML
elemento Varios elementos grficos que pasarn a formar parte del

Modelo de objetos de Documento (DOM)
Modificados
solamente
CONTROLADOR mediante script
>MODELO
EVENTO
Modificados a travs de scripts y CSS
La Interaccin del
DE Usuario
es
granular (x,y)
Interaccin con el Usuario es abstrada (rect, ruta)
RENDIMIENTO
El rendimiento es
mejor con menor
superficie
y/o
mayor nmero de El rendimiento es mejor con menor nmero de objetos y/o una
objetos
superficie ms amplia
Para una comparacin ms detallada, quiero dirigirlos hacia algunas de las sesiones (de donde
extraje este fabuloso cuadro, con permiso):
Patrick Dengler's "Ideas sobre cundo usar SVG y cundo Canvas"
Jatinder Mann's "Canvas HTML5 a profundidad"
John Bristowe's "Una introduccin a Canvas HTML5"
Soporte de Audio y Video
Una de las grandes caractersticas que es nueva en HTML5 es la capacidad de reproduccin de
audio y videos. Antes de HTML5, necesitaba un plug-in como Silverlight o Flash para esta
funcionalidad. En HTML5, puede incrustar audio y video utilizando las nuevas etiquetas <audio>
and <video>.
Desde una perspectiva de programacin, los elementos de audio y vdeo son muy sencillos de
utilizar. (Les dar una explicacin ms a fondo de sus atributos ms abajo.) Los elementos de
audio y vdeo tambin son soportados por todos los navegadores principales (las ltimas versiones
de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difcil es que se
necesita codecs para reproducir audio y vdeo, y diferentes navegadores soportan diferentes
codecs. (Para una magnfica explicacin sobre contenedores de video y codecs
leahttp://diveintohtml5.net/video.html.)
Afortunadamente, esto no es un obstculo. El soporte para audio y video se implement de manera
brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo (el navegador
intentar cada uno y, a continuacin, pasar al siguiente si no puede reproducirlo).
Como prctica recomendada, debe proporcionar mltiples fuentes de audio y video para
contemplar diferentes navegadores. Tambin puede retroceder a Silverlight o Flash. Por ltimo,
cualquier texto entre las etiquetas de apertura y cierre (como <audio> and </audio>) aparecer en
los navegadores que no soporten el elemento de audio o video.
Por ejemplo:
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Su navegador no soporta el elemento de audio.
</audio>
Con este cdigo, el navegador intentar primero reproducir el archivo laughter.mp3. Si no tiene los
cdecs adecuados para reproducirlo, intentar a continuaci reproducir el archivo laughter.ogg. Si
el elemento de audio no es reconocido por el navegador en absoluto, mostrar el texto "Su
navegador no soporta el elemento audio" en donde debi estar el control audio.
Una salvedad para audio y video: no incluye gestin de derechos digitales (DRM); tiene que
implementar esto por s mismo como desarrollador. Vea este enlace del W3C que explica su
opinin. (Si necesita usar contenido con DRM, tambin revise la documentacin Silverlight DRM,
que podra resultar una solucin ms fcil.)
Ahora, ahondemos en cada uno de estos nuevos elementos.
Audio
En primer lugar, echemos un vistazo a <audio> con ms detalle.
</audio>
Ya tuvimos ocasin de discutir el problema de de tratar cada una de las fuentes hasta que que
encuentre una que se puede reproducir.
Tenga en cuenta que existe un atributo controls. Esto le mostrar los controles de reproduccin de
audio incluyendo un botn de reproduccin/pausa, el tiempo, un botn de silencio y los controles
de volumen. En la mayora de las situaciones, es bueno mostrar controles de audio al usuario; no
me gusta visitar un sitio web con sonido y a la imposibilidad de detenerlo, silenciarlo o bajar el
volumen. No?
As se ven los controles de audio en Internet Explorer:
Los controles se ven diferente en distintos navegadores. As se ven en Chrome (con una cancin
sonando). El control volumen aparece cuando pasa el puntero por el cono de sonido en el extremo
derecho.
Aqu estn los controles de Firefox (con una cancin en pausa). Al igual que Chrome, tambin tiene
un control de volumen que aparece (no se muestra) al desplazar el puntero sobre el icono de
sonido en el extremo derecho.
Otros atributos divertidos en el elemento de audio incluyen:

POSSIBLE
ATTRIBUTE VALUES
DESCRIPTION
AUTOPLAY
autoplay
Se inicia la reproduccin de audio tan pronto como est listo
CONTROLS controls
Muestra los controles de reproduccin de audio en la pgina
LOOP
loop
Hace que el audio se repita cada vez que termina
PRELOAD
auto,
metadata,
none
Determina si se debe cargar el audio cuando se carga la pgina. El valor auto

cargar el audio, metadata cargar slo metadatos asociados con el archivo de
audio, y none evitar la precarga. (Este atributo ser ignorado si la reproduccin
automtica est especificada)
SRC
(algn
URL)
Especifica la direccin URL del archivo de audio a reproducir
Por lo que este cdigo muestra no slo mostrar controles de reproduccin de audio, sino que
tambin iniciar la reproduccin de audio inmediatamente y lo repetir una y otra vez en un bucle.
</audio>
Si le gustara jugar con el elemento <audio> > en su navegador hay un increble editor
enhttp://w3schools.com que le permite editar algo de cdigo para ver que pasa. Tambin puede
echar un vistazo al artculo cmo agregar un reproductor de audio HTML5 en su sitio.
Video
Veamos ahora el elemento <video> element.
<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 hemos dicho anteriormente, el elemento de vdeo cuenta con el apoyo de mltiples fuentes,
que intentar en orden y luego seguir con la siguiente opcin.
Al igual que el audio, el video tiene un atributo controls. Aqu est una captura de pantalla de los
controles de vdeo en Internet Explorer:
Otros atributos divertidos en el elemento de video incluyen:
ATRIBUTO
VALORES
POSIBLES DESCRIPCIN
AUDIO
muted
Establece el estado predeterminado del audio (actualmente, "silenciado"

es la nica opcin)
AUTOPLAY
autoplay
Se inicia la reproduccin de video tan pronto como est listo
CONTROLS controls
Muestra los controles de reproduccin de video en la pgina
HEIGHT
(valor en
pxeles)
Establece la altura del reproductor de vdeo
LOOP
loop
Hace que el audio se repita cada vez que termina
POSTER
(algn
Especifica la direccin URL de una imagen para representar el vdeo
URL)
cuando no se dispone de datos de vdeo
PRELOAD
auto,
metadata,
none
Determina si se debe cargar el video cuando se carga la pgina. El

valor auto cargar el video, metadata cargar slo metadatos asociados
con el archivo de video, y none evitar la precarga del video. (Este
atributo ser ignorado si la reproduccin automtica est especificada)
SRC
(algn
URL)
Especifica la direccin URL del archivo de video a reproducir
WIDTH
(valor en
pxeles)
Establece el ancho del reproductor de vdeo
Una vez ms, para jugar con el elemento <video>, utilice el editor en http://w3schools.com que le
permite editar algo de cdigo de ejemplo y ver qu sucede.
Para obtener ms informacin acerca de video y audio revise:
5 Cosas que usted necesita saber para empezar a usar <audio> y <video> hoy
Cmo agregar un reproductor de audio HTML5 en su sitio
W3C Schools HTML5 video
Desarrolle con HTML5 manteniendo a la vez soporte para los navegadores ms antiguos
Hemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos
elementos semnticos, la etiqueta canvas para dibujar, y el soporte de audio y video.
Tal vez crea que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de los
usuarios no tienen navegadores compatibles con HTML5 todava. Sin mencionar que los
navegadores que S soportan HTML5 admiten diferentes piezas del mismo; no todas las nuevas
funcionalidades de HTML5 son compatibles con todos los navegadores y las diferentes
funcionalidades pueden ser aplicadas de manera diferente.
Pero hay una manera de utilizar las nuevas caractersticas sin que su sitio ya no sea accesible para
los usuarios con navegadores antiguos. Puede utilizar polyfills .
Segn Paul Irish, un polyfill es "una correccin que imita una futura API, proporcionando
funcionalidad para navegadores antiguos." Un polyfill llena los vacos en navegadores antiguos que
no soportan las funciones de HTML5 en su sitio. Aprender a utilizar polyfills le permitir utilizar
HTML5 hoy sin olvidarse de los usuarios con navegadores antiguos.
Una manera de conseguir soporte polyfill es la biblioteca JavaScript Modernizr (pero haymuchos
polyfills disponibles). Modernizr agrega capacidad de deteccin para que usted pueda comprobar
concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una
opcin de copia de seguridad si no lo tiene.
Veamos un ejemplo. Recuerda el ejemplo de cdigo que he utilizado cuando se introducen
elementos semnticos y diseo de pgina ? Aqu est de nuevo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
Este es el primer artculo. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
</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 cdigo contiene una serie de nuevos elementos HTML5 que no son soportadas en
navegadores antiguos. Recuerde que en Internet Explorer 9 se vea as:
Podemos usar Internet Explorer developer tools para ver cmo se vera en versiones anteriores de
IE. En Internet Explorer, presione la tecla F12 para acceder a las herramientas de programador.
Tenga en cuenta que el modo de navegacin (en la barra de men gris en la parte superior) est
configurada ahora para IE9. Haga clic en el Modo Navegacin, y en el men desplegable que
aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).
Despus de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo
que aparece en mi pgina web:
Aunque parece que es un problema enorme, no es realmente tan malo. La razn por la que esto no
funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, as que no los
agrega al DOM, por lo que no se pueden aplicar estilos mediante CSS.
Sin embargo, con solo agregar una referencia a Modernizr (sin hacer ningn otro cambio en el
cdigo!) entonces obligar a meter estos elementos en el DOM. Descrguelo
dehttp://www.modernizr.com/download/ y agregue una referencia en la seccin <head> de este
modo:
<head>
<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>
Agregu dos referencias de script, uno para jQuery y uno Modernizr. No necesito realmente la
referencia jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, as que
por eso la agrego ahora.
Con este simple cambio ahora mi sitio se ve en Internet Explorer 8:
No es perfecto, pero est muy cerca de la versin original que vemos en Internet Explorer 9.
Modernizr agreg estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que
estn en el DOM podramos formatearlos mediante CSS.
Pero Modernizr hace mucho ms que eso! Tenga en cuenta que una de las diferencias entre
nuestras versiones IE8 e IE9 de la pgina web es que la versin IE9 tiene una bonita esquina
redondeada en los dos artculos y la figura, y la versin IE8 no. Tambin podemos utilizar
Modernizr para corregir esto.
if (!Modernizr.borderradius) {
$.getScript("script/jquery.corner.js", function() {
$("article").corner();
$("figure").corner();
});
}
</script>
En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para
"borderradius" (una caracterstica CSS3). Si no, yo uso un script jQuery llamado jquery.corner.js
(que est disponible para su descarga en http://jquery.malsup.com/corner/ y requiere esa referencia
adicional a jQuery que hice antes). A continuacin, simplemente llamo el mtodo esquina del script
de mis artculos y cifras para darles esquinas redondeadas.
O bien, puede hacer esto una forma ligeramente diferente. Modernizr tiene un cargador de
recursos condicional (no incluido) llamado Modernizr.load(), basado en Yepnope.js. Esto le permite
cargar slo los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asncrona y
en paralelo que a veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load,
tiene que incluirlo en una versin personalizada de Modernizr que usted tiene que crear
en http://www.modernizr.com/download/; no est incluido en la versin de desarrollo. Con
Modernizr.load, podemos escribir un script similar a este:
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
En resumen, este implementa la misma funcionalidad que la secuencia anterior. Modernizr.load
primero prueba la propiedad booleana "Modernizr.borderradius" para ver si es compatible.
Luego, nope define los recursos para cargar si test es falso. Dado que IE8 no soporta la propiedad
CSS3 "borderradius", cargar jquery.esquina.js script. Por ltimo,callback especifica una funcin
para que se ejecute cada vez que la secuencia de comandos haya terminado de cargar, por lo que
invocamos el mtodo "corner" en mis artculos y figuras como hicimos antes. Hay un breve tutorial
sobre Modernizr.load enhttp://www.modernizr.com/docs/#load si quiere ir ms a fondo.
Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versin 8 (que no soporta
HTML5) se ve as:
Por lo tanto, usando polyfills y herramientas como Modernizr podr utilizar la nueva funcionalidad
HTML5 y an as dar una buena experiencia para navegadores antiguos. Para obtener ms
informacin, consulte la seccin http://www.diveintohtml5.net/detect.html que describe en detalle
cmo detecta Modernizr caractersticas HTML5.

HTML5 8

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML5 8

Transféré par

Droits d'auteur :

Formats disponibles

HTML5

Para ir ms a profundidad en elementos semnticos, revise:

Veamos ahora el cdigo.

elemento Varios elementos grficos que pasarn a formar parte del

Modificados a travs de scripts y CSS

Otros atributos divertidos en el elemento de audio incluyen:

Se inicia la reproduccin de audio tan pronto como est listo

Muestra los controles de reproduccin de audio en la pgina

Hace que el audio se repita cada vez que termina

Determina si se debe cargar el audio cuando se carga la pgina. El valor auto

Especifica la direccin URL del archivo de audio a reproducir

Otros atributos divertidos en el elemento de video incluyen:

Establece el estado predeterminado del audio (actualmente, "silenciado"

Se inicia la reproduccin de video tan pronto como est listo

Muestra los controles de reproduccin de video en la pgina

Hace que el audio se repita cada vez que termina

Especifica la direccin URL de una imagen para representar el vdeo

cuando no se dispone de datos de vdeo

Determina si se debe cargar el video cuando se carga la pgina. El

Especifica la direccin URL del archivo de video a reproducir

Vous aimerez peut-être aussi