imprimir - ¡aprenda html5 en 5 minutos! _ the html5 center

5/17/2018 Imprimir - ¡Aprenda HTML5 en 5 minutos! _ the HTML5 Center - slidepdf.com

http://slidepdf.com/reader/full/imprimir-aprenda-html5-en-5-minutos-the-html5-center

17/01/12 iAprenda HTML5 en 5 minutos! I the HTML5 Center

Por Jennifer Marsman

3 [RecomrenliJ@

iA prenda H TM LS en 5 m inu tosl

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,

esta en el lugar correcto.

Hablaremos del nuevo lienzo para dibujo y anlrnaclon sernantlco de marcado, el soporte de

audio y llideo, y como usar HTML5 con navegadores anteriores. Podria tomar un poco mas de

cinco minutos, pero les prometo que tratare de hacerlo raolco, iNo se vaya, vale la penal

Marcado semantlco y d is eiio d e p ag in a

Hay una gran historia acerca de una universidad que, cuando construy6 sus campus, no creo

un solo sendero para caminar. Simplemente sembraron areas de c e s p e d y esperaron.

Un ana mas tarde, el pasto se desgasto en donde la gente caminaba mas frecuentemente. Asi

que es en donde la universidad construyo las aceras.

[Ilene todo el sentido! Las aceras estaban exactamente donde la gente andaba.

Los nuevos elementos sernantlcos del HTML5 se basaron en exactamente esa misma logica

(wase el W3C guia de dlserio para "Pave the Cowpaths").

Los elementos semantlcos describen su significado 0 propos ito claramente al navegador y al

desarrollador. C o m p a r s s e con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una

dillisi6n 0 una secci6n de un documento HTML, pero no nos dice nada acerca de su contenido

o trans mite sentido claro alguno.

< div >

Los programadores suelen utilizar Identif icadores y/ o nombres de clase con estas etiquetas

<div>. Esto da mas significado a los desarrolladores, pero por desgracia, tam poco ayuda a los

navegadores a derivar el propos ito de ese marcado.

< div id ="header">

En HTML5 hay n u e v o s elementos sernantlcos enriquecidos que transmiten el propos ito del

elemento a ambos desarrol ladores y navegadores.

< header>

EI W3C obtuse datos de miles de millones de p a q ln a s web existentes para descubrir los ID y

nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descarto div1,

diY.2,etc. , tullieron con una lista de elementos enriquecidos descnptbos que ya se estaban

utilizando y esos fueron los que conllirtieron en nornnas.

Aqui estan algunos de los nuevos elementos semantlcos en HTML5:

• article

• aside

• f igcapt ion• figure

• footer

] Comparta asta sitio con sus amigos

[R ecomrenliJ@ [ T w I lt 8 . . I@

. ~ -.-. -.. - ----;--- .

, , - . 0:00 ....~ ~:

rKl1ii~f!..®® 1 i 1 r[ ~t~~1i f i l ~t [ K f i f i j ' i i l . . ® ® lIJ r j~ {!~ ?i (lJ ~! r Klil

~t~i~~'i"~r~~'K!~ ~!i~JI~1\~r~~t!~ ~

IH i 1 i i ~ f ! : : . ® 1I 1 r l ri f ~ ~ 1 i ( 1 l ' ~ i t ( l J f il ' 1 1 J I i f r I ! 2 . @ tfl r l r i l ' 1 ~ 7 i ( 1 l ~ " ! [ ! J f i J 1

~t~JI~1~1 ~ ~ r. t ~!~~§'l1\~7~ar:t~l ~

~nth15 pfll'!il'ilmIrDm

~iI'.wil'ldlllll' Como construir un sitio i

en menos de 5 minutos

Libere el poder de <audi

HTMLS

Lo que los desarrolladon

han aprendido en los ult

aiios

~~.der in h1;::;;;'~~_r ......_

,..~ Guacamole

,...q



17 /01 /12 iAprenda HTMLS en S minutos! I the HTMLS Center

• section

• time

Debido a la r iqueza sernant lca, probablemente pueda adivinar 1 0 que la mayoria de estos

elementos hacen.

Pero por si acaso, aqui va una visualizaci6n:

Los Headers y footers resultan claros, mientras que nav crea una barra de menu 0

nawgacion. Puede utilizar sections y articles para agrupar su contenido. Por ultimo, el

elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de

enlaces relacionados.

Este es un ejemplo sencillo de c6digo que utiliza estos elementos.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" I>

<title> litle<ltitle>

<link href="css/htmISreset.css" rel="stylesheet" I>

<link href="css/style.css" rel="stylesheet" I>

</head>

<body>

<header>

<hgroup>

<h1>Header in h1</h1>

<h2>Subheader in h2</h2>

</hgroup>

</header>

<nav>

<ul>

<Ii><a href="#">Menu Option 1</a></li>



<lui>

</nav>

OpenBEXI -lTML Builder

O p e n B e x iC r e a t l i e .

Mostrar mas rec

enano007jr RT @EtnasSoft:RT@Quemandoacromo: EIjuego

"Command and Conquer - TiberianDawn" (vO.3) hecho en #HTML5 \

Javascript > is.gd/ZGrVpw22 seoonds ago . repl y . retw ee t . fav ori te

~ NXnetHosting Cut the Rope en #~en tu navegador, otro pasito mas

ow.Iy/8wfaR8 minutes ago' repl y' retweet . favorite

betolauda #Grooveshark lanza vel"!#HTML5 para #mobile j.mp/AErFj220 minutes ago' repl y' retweet . favori te

PRQuevedo Cuepoint.js, plugin palaiiadir subtftulos y cue-points a vM:l

#HTML5: goo.gVOjYUD #Desarrolk

#DiseiioWeb #vldeo33 minutes ago' repl y' retweet • favori te

J5errano_ ~ Divertido ejemplo del

de HTML5: ~ bit. ly /gtA4Y5 #HTMI

#CS53 #JAVA5CRIPT34 minutes ago' repl y' retweet . favori te

" " I ! b androideity RT @Novatecas: HoyI ...., conferencia de #android y mas tar

-- . . -

Join the cor

Adobe's New HTMLS Design Tool Nc

To Flash

It is a reflection of the huge interest in ~

as a possible altematiw to Flash that /J

launch of a wry early preview of a toolki

WebAPI: Mozilla Proposes Open Ap

Interface For Smartphones

Mozilla has an idea for how it can bridgl

between natiw apps and web applicatic

WebAPI will be dewloped as a set of H

APls and deliwr consistent, web-based

Hard Truths About HTMLS

Peter Wayner discusses a number of h

truths Web dewlopers must accept in r

the most of HTMLS - especially those

are...

Book Review: Build Mobile Website

Apps For Smart Devices

With the proli feration of handheld devicE



17 /01 /12 iAprenda HTML5 en 5 minutos! I the HTML5 Center

<article>

<header>

<h1>Article #1</h1>

</header>

<section>

Este es el pr imer art iculo. This is <mark>highlighted</mark>.

</section>

</article>

<article>

<header>

<h1>Article #2</h1>

</header>

<section>

Este es el segundo articulo. Estos articulos pueden ser secciones del blog, etc.

</section>

</article>

</section>

<aside>

<section>

<h1 >Links</h1 >

<ul>

<Ii><a href="#">Link 1</a></li>



<lui>

</section>

<figure>

<img width="85" height="85"

src= ..http://www.windowsdelA::lootcamp.com/lmages/JennMar.jpg ..

alt="Jennifer Marsman" I>

<figcaption>Jennifer Marsman</figcaption>

</figure>

<las ide>

<footer> Footer - Copyright 2011</foo ter>

</body>

I be fully accessible on ...

HTML

~

Cross-Browser: Mejore

praet lcas (1E9)

Mejores practicas pan

construir Cross-BrowSE

Applications

Obtenga acelerador! C

cada desarrol lador pUI

uti lizar la GPU en cual

aplleaclen

Windows Internet Expl

Nuevo Navegador de

mejoramiento de estra

Corporativas

Trabajando con ASP.II

HTML5& CSS




",Ha notado que el elemento hgroup que agrupo a mis encabezados h1 y h2?

EI elemento mark me permiti6 resaltar 0marcar el texto importante. Finalmente, los

elementos figure y figcaption especifican una figura en mi contenido (como una imagen,

grafico, toto, un fragmento de c6digo, etc.) y me dejan asociar un pie con la firugra.

Asi es como la pagina web se IA9ria combinada con algo de CSS. (NOTA: Pedi prestado el

CSS de mi talentoso compaiiero Brandon Satrom y su TechEd talk, pero el efecto final menos

que bello fes culpa mia).

Ahora, imagine esto en manes de alguien que sea realmente bueno en CSS (que no 1 0 soy). EI

resultado es muy potente. EI caracter descriptho del HTML los hace super facil de manejar.

Por ultimo, si usted esta tratando de seguirlo en Visual Studio, pero se encuentra con lineas

serpenteantes en todas partes que indican que VS no entiende los elementos HTML5,

asegurese de que tiene Visual Studio 2010 SP1instalado.

Luego, en el menu de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda

panel de nalA9gaci6n, expanda el Editor de texto, HTML y, a continuaci6n, haga clic en

Validaci6n. Oesde el menu desplegable seleccione HTML5. Esto Ie dara compatibilidad HTML5

IntelliSense. iFiu!

f . 1 " ' =..,_. . .~. ." "

' 1 v - : ;

LHTMU o j

C l e · ·C 3S

fO

.Ill....

0.-.1

I.M

'Opbc>oo.

- --~--"9:>0< _ 1 _ '~~_,"~I"f IOt..--'I!ihm~Qf~l:a~~

o / , M W 1 i 1 " 1 1 i 1 1 ' 9

l~_v-.

&!pi

'L/SqI.P.. .. . l . .. .

JOI

Para ir mas a profundidad en elementos semantlcos, revise:

• C6mo habilitar el soporte de estandar HTML5

• La secci6n de semantlca de la especificaci6n W3C de HTML5

• Adsntrese en el capitulo de sernantlca de HTML5 titulado" ",Que significa todo esto? ".

Dibujo en HTMLS usando el elemento Canvas

Otro elemento novedoso en HTML5 es la etiqueta <canvas> Es exactamente a 1 0 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 programaci6n desde su c6digo JavaScript (0 si esta us an do jQuery y es el

unlco lienzo en la pagina, usted puede tener acceso a el utilizando $('canvas') sin necesidad de

ponerle nombre).

Tamblen puede (opcionalmente) especificar una altura y una anchura para el lienzo. Entre

<canvas> y </canvas>, se puede especificar un texto para mostrar en los nalA9gadores que no




<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>

<script type="text/javascript">

var canvas = document.getElementByld(,myCanvas');

var ctx = canvas.getContext('2d');

" Draw blue rectangle

ctx.fil iStyle = '#0065BD';

ctx.f iI iRect(O, 0, 125, 75);

" Draw white X

ctx. beginPath();

ctx.l ineWidth = "15";

ctx.strokeStyle = "white";

ctx.moveTo(O, 0);

ctx.l ineTo(125, 75);

ctx.moveTo(125, 0);

ctx.lineTo(O, 75);

ctx.stroke();

</script>

</body>

</html>

Esto es 1 0 que el codigo genera:

Veamos ahora el codlqo,

En primer lugar, yoya crear ellienzo y a darle una ID de "myCanvas". Si este codigo fuera

llistoo en un navegador que no soporta el elemento canvas HTML5, mostraria "Su navegador no

soporta la etiqueta canvas" en lugar de dibujar la bandera ..

Oespues, tengo una secuencia de comandos. Recuerde, que la etiqueta canvas es solo un

contenedor para graficos; debe usar JavaScript para dibujar y representar graficos sobre ella.

En primer lugar, tome una referencia allienzo utilizando la ID "myCanvas" y, a continuaclon,

obtengo el contexte del lienzo que proporciona propiedades y metodos para la elaboraclon y

manlpulaclon de la grafica sobre el lienzo He especificado " 2d" para usar un contexte en dos




125, 75) significa: comenzando en la posici6n (0, 0), la esquina superior izquierda, dibujar un

rectfmgulo con ancho=125 alto=75 pixeles.

Por ultimo, dibujo la X blanca sobre la bandera. En primer lugar solicito beginPath para

iniciar el proceso pintar en una ruta. Especifico lineWidth (ancho de linea) de 15 pixeles

(utilizando el metodo de adi\/inar y re\/isar para intentar diferentes valores hasta que se wa

bien) y un stroke Style de "blanco" para trazar la ruta del color blanco. A continuaci6n, trazo la

ruta utilizando moveTo y lineTo . Estos rnetodos posicionan el "cursor" para dibujar; la

diferencia es que move'Io rnueve el cursor sin trazar una linea y lineTo dibuja una linea

mientras se des plaza. Empezare mo\/iendome a la posicion (0, 0), la esquina superior

izquierda y, a contlnuaclon, trazare una linea a (125, 75), la esquina inferior derecha. Despues

me rnuevo ala posici6n (125, 0), la esquina superior derecha y, a continuaci6n, trazare unalinea a (0, 75), la esquina inferior derecha. Por ultimo, el rnetodo stroke hace que estes trazos

se wan.

Comparacion raplda de Canvas vs SVG

Graficos wctoriales escalables (SVG) es un estandar para dibujar en la wntana del nawgador.

Con la liberaci6n de Canvas de HTML5, muchas personas se preguntan en que difieren.

En mi opinion, la mayor diferencia es que canvas utiliza el modo inmediato de

represantaclen y SVG utiliza modo retenido de rapresentaelen. Esto significa que

canvas hace directamente la representaclon de los graficos en la pantalia. En mi codigo

anterior, una wz que la bandera se dibuja, el sistema 1 0 ol\/ida y no se conserva nada. Hacer

un cambio requerira un redibujado completo. En comparaclon, SVG conserva un modelo

completo de los objetos que se han representado. Para efectuar un cambio, simplemente tiene

que cambiar, por ejemplo, la posici6n del rectangulo y el explorador determinaria como IIOlwr ahacerla. Esto es menos trabajo para los desarroliadores, pero tarnblsn resulta mas pesado

para mantener un modelo.

Vale la pena considerar la capacidad de formatear SVG mediante CSS ademas de JavaScript.

Un lienzo se puede manipular solamente a tra..es de Javascript.

He aqui una resefla de alto niwl de otras diferencias:

ELEMENTOS

Basado en pixeles (bi tmap

dinarnico)

--+--

Unico elemento HTML

Basado en formas

CANVAS SVG

A BSTRA CCI6N

Varios elementos graficos que

pasaran a formar parte del

Modelo de objetos de

Documento (DOM)

Modificados a traws de scripts y

CSS

CONTROLADOR Modificados solamente mediante

script

>MODELO DE

EVENTO

La Interacci6n del Usuario es

granular (x,y)

lnteracclon con el Usuario es

abstraida (rect, ruta)

REND I M lEN T 0 EI rendimiento es mejor con EI rendimiento es mejor con

I ~.~nor superficie y/ o mayor I ~nenor numero de objetos y/ o

~mero de objetos ~a superficie mas amplia

Para una cornparaclon mas detaliada, quiero dlriqlrlos hacia algunas de las sesiones (de donde

extraje este fabuloso cuadro, con permiso):

• Patrick Dengler's "Ideas sobre cuando usar SVG y cuando Canvas"

• Jatinder Mann's "Canvas HTML5 a profundidad"

• John Bristowe's "Una introducci6n a Canvas HTML5"

Soporte de Audio y Video

Una de las grandes caracteristicas que es nueva en HTML5 es la capacidad de reproducci6n

de audio y \/ideos. Antes de HTML5, necesitaba un plug-in como Silwr1ight 0 Flash para esta

funcionalidad. En HTML5, puede incrustar audio y \/ideo util izando las nuevas etiquetas

<audio> and <\/ideo>.

Desde una perspectiva de programaci6n, los elementos de audio y video son muy sencilios de

utilizar. (Les dare una explicaci6n mas a fonda de sus atributos mas abajo.) Los elementos de




http://dil.eintohtmI5.net/video.html. )

Afortunadamente, esto no es un obstaculo, EI seporte para audio y video se implement6

de manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archbo

(el nawgador lntsntara cada uno y, a continuaclon, pasara al siguiente si no puede

reproducirlo).

Como practlca recomendada, debe proporcionar multiples fuentes de audio y video para

contemplar di ferentes nawgadores. Tambilm puede retroceder a Silwrl ight 0 Flash. Por ult imo,

cualquier texto entre las etiquetas de apertura y cierre (como <audio> and </audio» aparecera

en los nawgadores que no soporten el elemento de audio 0 video.

Por ejemplo:

<audio controls="controls">

<source src="laughter.mp3" type="audio/mp3" I>

<source src="laughter.ogg" type="audio/ogg" I>

Su nawgador no soporta el elemento de audio.

</audio>

Con este codigo, el nawgador intentara primero reproducir el archho laughter.mp3. Si no tiene

los codecs adecuados para reproducirlo, intentara a contlnuaclo reproducir el archbo

laughter.ogg. Si el elemento de audio no es reconocido por el nawgador en absoluto, rnostrara

el texto "Su nawgador no soporta el elemento audio" en donde deblo estar el control audio.

Una salvsdad para audio y video: no incluye gestion de derechos digitales (DRM); tiene que

implementar esto por sl mismo como desarrollador. Vea este enlace del W3C que explica su

opini6n. (Si necesita usar contenido con DRM, tamblsn revise la documentaci6n Silwrlight

DRM, que podr ia resultar una soluclon mas facil.)

Ahora, ahondemos en cada uno de estos nuevos elementos.

Audio

En primer lugar, echemos un vistazo a <audio> con mas detalie.





</audio>

Va tuvimos ocasi6n 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 Ie rnostrara los controles de

reproducclon de audio incluyendo un boton de reproducclon/peusa, el tiempo, un boton de

silencio y los controles de \'()Iumen. En la mayoria de las situaciones, es bueno mostrar

controles de audio al usuario; no me gusta visitar un sitio web con sonldo y a la

imposibilidad de detenerlo, silenciarlo 0 bajar el volumen. "No?

Asi se wn los controles de audio en Intemet Explorer:

Los controles se wn diferente en distintos nawgadores. Asi se wn en Chrome (con una

canclon sonando). EI control \,()Iumen aparece cuando pas a el puntero por el icono de sonido

en el extremo derecho.

http://dil.eintohtmi5.net/video.html.

http://dil.eintohtmi5.net/video.html.




Aqui estan los controles de Firefox (con una canci6n en pausa). AI igual que Chrome, tarnblen

tiene un control de \Olumen que aparece (no se muestra) al desplazar el puntero sobre el icono

de sonido en el extremo derecho.

Otros atributos dlvertldos en el elemento de audio incluyen:

Se inicia la reproducclon de audio tan pronto como

este listo

ATTRIBUTE POSSIBLE

VALUES

AUTOPLAY autoplay

CONTROLS controls

LOOP loop

PRELOAD auto,

metadata,

none

DESCRIPTION

Muestra los controles de reproducci6n de audio en la

pagina

Hace que el audio se repita cada wz que termina

Determina si se debe cargar el audio cuando se

carga la paqlna, EI valor auto cargara el audio,

metadata cargara solo metadatos asociados con el

archho de audio, y none evitara la precarga. (Este

atributo sera ignorado si la reproducci6n automatlca

esta especificada)

Especifica la dlrecclon URL del archbo de audio a

reproducir

SRC (algun URL)

Por 10que este c6digo muestra no 5610 mostrara controles de reproducclon de audio, sino que

tam bien lnlclara la reproducclon de audio inmediatamente y 10 rspetlra una y otra wz en un

bucle.





</audio>

Si Ie gustaria jugar con el elemento <audio> > en su nawgador hay un increible editor en

http://w3schools.com que Ie permite editar algo de codigo para wr que pasa. Temblen puede

echar un vistazo al articulo como 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" I>

<source src="movie.mp4" type="video/mp4" I>

<source src="movie.webm" type="video/webm" I>

Your browser does not support the video tag.

</video>

Como hemos dicho anteriormente, el elemento de video cuenta con el apoyo de multiples

fuentes, que intentara en orden y luego seguira con la siguiente opclon,

AI igual que el audio, el video tiene un atributo controls. Aqui esta una captura de pantalla de

los controles de video en Intemet Explorer:

http://w3schools.com/





Ideas worth spreadmq

0;1389 'I~ -.

Otros atributos di lA9rt idos en el elemento de video incluyen:

(algLin URL) Especifica la direcci6n URL de una imagen para

I I :::::~tar el video cuando no se dispone de datos I

~o, ~termina si se debe cargar el video cuando se Imetadata, carga la pagina. EI valor auto cargara el video,

none metadata cargara s610 metadatos asociados con el

archi loOde video, y none evitara la precarga del video.

(Este atributo sera ignorado si la reproducci6n

autornatlca esta especificada)

--~-- ---Especifica la direcci6n URL del archho de video a

reproducir

ATRIBUTO

AUDIO

AUTOPLAY

CONTROLS

HEIGHT

LOOP

POSTER

PRELOAD

SRC

WIDTH

VALORES

POSIBLES

muted

autoplay

controls

(valor en

pixeles)

loop

(algLin URL)

(valor en

pixeles)

DESCRIPCION

Establece el estado predeterminado del audio

(actual mente, "silenciado" es la Linica opci6n)

Se inicia la reproducci6n de video tan pronto como

este listo

Muestra los controles de reproducci6n de video en la

pagina

Establece la altura del reproductor de video

Hace que el audio se repita cada IA9Zque termina

Establece el ancho del reproductor de video

-

Una IA9Zmas, para jugar con el elemento <video>, utilice el editor en http://w3schools.com que

Ie permite editar algo de c6digo de ejemplo y IA9rque sucede.

Para obtener mas informaci6n acerca de video y audio revise:

• 5 Cosas que usted necesita saber para empezar a usar <audio> y <video> hoy

• C6mo agregar un reproductor de audio HTML5 en su sitio• W3C Schools HTML5 video

Desarrolle con HTMLS manteniendo a la vez soporte para los navegadoresmas antiguos

Hemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos

elementos sernantlcos, 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 todavia. Sin

mencionar que los nalA9gadores que sf soportan HTML5 admiten diferentes piezas del mismo;

no todas las nuevas funcionalidades de HTML5 son compatibles con todos los nalA9gadores y

las diferentes funcional idades pueden ser aplicadas de manera diferente.

Pero hay una manera de utilizar las nuevas caracteristicas sin que su sitio ya no sea accesiblepara los usuarios con nalA9gadores antiguos. Puede utilizar polyfills .

SegLin Paul Irish un polyfill es "una correcci6n que imita una futura API proporcionando






Una manera de conseguir soporte polyfill es la biblioteca JavaScript Modemizr (pero hay

muchos polyfills disponibles). Modernizr agrega capacidad de detecci6n para que usted pueda

comprobar concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas

y ofrecer una opci6n de copia de seguridad si no 1 0 tiene.

Veamos un ejemplo. l,Recuerda el ejemplo de c6digo que he utilizado cuando se introducen

elementos semanticos y diseiio de psgina ? Aqui esta de nueso:

<!DOCTYPE html>

<html>

<head>



<link href="css/htmI5reset.css" rel="stylesheet" I>


</head>

<body>

<header>

<hgroup>

<h1>Header in h1</h1>

<h2>Subheader in h2</h2>

</hgroup>

</header>

<nav>

<ul>




<lui>

</nav>

<section>

<article>

<header>

<h1>Article #1</h1>

</header>

<section>

Este es el pr imer art iculo. This is <mark>highl ighted</mark>.

</section>

</article>



17 /01 /12 iAprenda HTML5 en 5 minutos! I the HTML5 Center

<h1>Article #2</h1>

</header>

<section>

Este es el segundo articulo. Estos articulos pueden ser secciones del blog, etc.

</section>

</article>

</section>

<aside>

<section>

<h1 >Links</h1 >

<ul>




<lui>

</section>

<figure>

<img width="85" height="85"

src= ..http://www.windowsdelobootcamp.com/lmages/JennMar.jpg ..

alt="Jennifer Marsman" I>

<figcaption>Jennifer Marsman</figcaption>

</figure>

<las ide>

<footer> Footer - Copyright 2011</foo ter>

</body>

</html>

Este c6digo contiene una serie de nuevos elementos HTML5 que no son soportadas en

nawgadores ant iguos. Recuerde que en Internet Explorer 9 se wia asi:

LinksI.!!!lU

l < ! ! l l i l

l .IIIi.J

P d I t tE I d t I 6

http://www.windowsdelobootcamp.com/lmages/JennMar.jpg






. I r o > T"'" -ifll co ~ Ili:

I Fi.. 11"" DiI.o~I. v ,_ I m a q o o . Cod'l. loo& V_I> I ~ _ MocI", II'l DcK>um""MCd. : 1I'l...-. ~~l es s e_ScrIP! p.. .r ;1« . .- I s . . . , " " H ' ' '' I . . . = - : : : : 2 l

ib o : I ! ' . B [ 2 1 ~ I S l » I i o T,o<.Si)'l" UyO'" - ..

C !OO iC1YP .f; I'Iibii l') ~

a; ..;. t:-.):>

Tenga en cuenta que el modo de na\egaci6n (en la barra de menu gris en la parte superior)

esta configurada ahora para lEg. Haga clic en el Modo Na\egaci6n, yen el menu desplegable

que aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).

I hI< A"" 0 i 0 0 I l 1 < V,... I f m g < > . {ad" t_v _ . I ' . , . D<>cum....Mo"". 1IlI ... ,,_ ~

I 1ITPA1 . CSS ,.."... S c r ; p . P...ril< o _ In.<tnd E opI . ... 1 ',==pi" 1 J o .. . . . . . :b;piDnor8 !~

J),1_'E<p1 .. .. 9

1n'...... :~9'' '''''' ''''' lIiIilyVi ...

Despues de hacer este cambio y cambiar a un na\egador no compatible con HTML5, esto es

1 0 que aparece en mi psgina web:

1 1 2

a lU de. T hs is hig~ghted.

s eo on d a rti de . T he se a ltid es c ou ld b e b lo g posts" e e.

Aunque parece que es un problema enorme, no es realmente tan malo. La raz6n por la queesto no funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, asl

que no los agrega al DOM, por 1 0 que no se pueden aplicar estilos mediante CSS.

Sin embargo, con solo agregar una referencia a Modernizr (jsln hacer ningun otro cambio en el

c6digo!) entonces obligara a meter estos elementos en el DOM. Descsrguelo de

http://www.modemizr.com/download/ y agregue una referencia en la secci6n <head> de este

modo:

<head>



<link href="css/htmI5reset.css" rel="stylesheet" I>


<script src="scripUjquery-1.6.2.min.js" type="texUjavascript"></script>

<script src="scripUmodemizr-2.0.6.js" type="texUjavascript"></script>

</head>

Agregue dos referencias de script, uno para jQuery y uno Modemizr. No necesito realmente la

referencia jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, asl

que por eso la agrego ahora.

Con este simple cambio ahora mi sitio se \e en Internet Explorer 8:

http://www.modemizr.com/download/

http://www.modemizr.com/download/




No es perfecto, pero esta muy cerea de la wrsi6n original que wmos en Intemet Explorer 9.

Modemizr agreg6 estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya

que estan en el DOM podriamos formatearlos mediante CSS.

iPero Modernizr hace mucho mas que eso! Tenga en cuenta que una de las diferencias

entre nuestras wrsiones IE8 e IE9 de la psgina web es que la wrsi6n IE9 tiene una bonita

esquina redondeada en los dos articulos y la figura, y la wrsi6n IE8 no. Tamblen podemos

ut il izar Modemizr para corregir esto.


if (!Modemizr.borderradius) {

$.getScript("script/jquery .comer.js", functionO {

$("article").comer();

$("figure").comer();

}) ;

</script>

En este script, estamos comprobando el objeto Modemizr para wr si hay soporte para

"borderradius" (una caracteristica CSS3). Si no, yo usa un script jQuery lIamado

jquery.comer.js (que esta disponible para su descarga en http://jquery.malsup.com/corner/ y

requiere esa referencia adicional a jQuery que hice antes). A continuaci6n, simplemente lIamo

el rnetodo esquina del script de mis articulos y cifras para dar1es esquinas redondeadas.

o bien, puede hacer esto una forma ligeramente diferente. Modemizr tiene un cargador de

recursos condicional (no incluido) Ilamado Modernlzr.loadt), basado en Yepnope.js. Esto Ie

permite cargar s610 los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma

asincrona y en paralelo que a wces puede ofrecer una mejora de rendimiento. Para obtener

Modemizr.load, tiene que lnclulrlo en una wrsi6n personalizada de Modernizr que usted tiene

que crear en http://www.modemizr.com/download/; no esta incluido en la wrsi6n de desarrollo.

Con Modemizr.load, podemos escribir un script similar a este:


Modemizr.load({

test: Modernizr.borderradius,

nope: 'script/jquery.comer.js',

callback: function 0 {

$(,article').comerO;

$('figure'). comer();

http://jquery.malsup.com/corner/

http://www.modemizr.com/download/;

http://www.modemizr.com/download/;

http://jquery.malsup.com/corner/




En resumen, este implementa la misma funcionalidad que la secuencia anterior.

Modemizr. load primero prueba la propiedad booleana "Modemizr.borderradius" para Ioersi es

compatible. Luego, nope define los recursos para cargar si test es falso. Dado que IEB no

soporta la propiedad CSS3 "borderradius", cargara jquery.esquina.js scr ipt . Por ul timo,

callback especifica una funci6n para que se ejecute cada IoeZque la secuencia de comandos

haya terminado de cargar, por 1 0que l rnocamos el rnetodo "comer" en mis articulos y figuras

como hicimos antes. Hay un breloetutorial sobre Modemizr.load en

http://www.modemizr.com/docs/#load si quiere ir mas a fondo.

Ahora, utilizando cualquiera de estos scripts, nuestro Intemet Explorer Ioersi6n B (que no

soporta HTML5) se Ioeasi:

Por 1 0 tanto, usando polylills y herramientas como Modemizr podra utilizar la nueva

funcionalidad HTML5 y aun asi dar una buena experiencia para naloegadores antiguos. Para

obtener mas infonnaci6n, consulte la secci6n http://www.diloeintohtmI5.netldetect.htmlque

describe en detalle c6mo detecta Modemizr caracteristicas HTML5.

Resumen

En esta introducci6n a HTML5, cubrimos el marcado sernantlco, lienzo, audio y \oideo, y utilizar

HTML5 manteniendo el soporte a los naloegadores mas antiguos. Pero tarnblen observamos

que hay muchas cosas que no cubrimos: microdatos, almacenamiento, CSS3, etc. Aqui hay

algunos recursos para cont inuar aprendiendo sobre HTML5:

IE Test Driloe - incluso si us ted no usa Intemet Explorer, este es un sitio increible. Contiene

muchas demostraciones: Demostraciones rapldas, Demostraciones HTML5, Demostraciones

gralicas y Demostraciones de Nawgador. iPruebelas en su nawgador fa\Orito! Este sitio

tam bien tiene enlaces a otros recursos.

Beauty of the Web - muestralos mejores sitios en la web que sacan prosecho de la

aceleraci6n de hardware de HTML5 y las caracteristicas de anclado de Intemet Explorer 9

BuildMyPinnedSite - todo el c6digo, ideas, y las muestras que usted necesita para usar

anclado e integraci6n con Windows

HTML5 Labs - es un sitio donde Microsoft prueba especificaciones anticipadas e

inestables de los cuerpos de normalizaci6n web tales como W3C. Puede jugar con

prototipos como IndexedDB, WebSockets, FileAPI y Media Capture API.

Videos

Brandon Satrom's "Application Deloelopment with HTML5" talk at TechEd 2011 de Brandon

Satrom - es una fabulosa charta de una hora que Ie muestra 1 0 que tiene que saber paradesarrollar con HTML5

Charlas sobre HTML5 en MIX2011 - una pletora de sesiones HTML5

Herramientas

Muchas herramientas de desarrollo ya son compatibles con HTML5. Pruebe estas:

• Visual Studio 2010 SP1 - el SP1 anade HTML5 basico, CSS3 IntelliSense y validaci6n. Para

mayor informaci6n consulte http://blogs.msdn.com/b/webdevtools/archiw/2011/01/27/html5-

amp-css3-in-\oisual-studio-2010-sp1.aspx.

• Actualizaci6n de estandares web para Microsoft Visual Studio 2010 SP1 - esta es una

extensi6n que Visual Studio agrega actualizando HTML5, IntelliSense y validaci6n CSS3 en

Visual Studio 2010 SP1, sobre la base de la actual especificaci6n W3C.

• WebMatrix - HTML5 es soportado por defecto (aiiadiendo una nueva pagina HTML utiliza el

doctype HTML5 por defecto y c6digo de plantilla)

• Actualizaci6n de herramientas ASP.NET MVC 3

EI dial N P til ill d iii i6 ti I till d d

http://www.diloeintohtmi5.netldetect.htmlque/

http://blogs.msdn.com/b/webdevtools/archiw/2011/01/27/html5-

http://blogs.msdn.com/b/webdevtools/archiw/2011/01/27/html5-

http://www.diloeintohtmi5.netldetect.htmlque/




• Expression Web 4 SP1

• HTML5 IntelliSense y sopor en el Editor de c6digo y la Vista de diseiio

• Edici6n de CSS3 e IntelliSense enriquecida

• Modo SuperPrelliew Page y servclo en linea (los nalA9gadores remotos incluyen Chrome,

IE8, IE9, Y Safari 4 y 5 en Windows y Mac)

Adsrnas de herramientas de desarrol lo, no oi ll ide:

• Windows telsfono "Mango" contiene Internet Explorer 9, que soporta sitios HTML5.

• • Internet Explorer 10 Platafonna Prelliew s hcuenta con soporte para muchas de las nuevas

caracteristicas CSS3 y HTML5; la lista completa se encuentra en

http://msdn.microsoft.com/en-uslie/gg192966.aspx.

HTML5 esta aqui. i De un paso adelante y desarrolle sitios web increibles!

Jennifer Marsman es Desarrollador Evangelista en el grupo de Evangelizaci6n de

Desarrolladores y Platafonnas de Microsoft, donde se capacita a los desarrolladores de

Microsoft en nuevas tecnologias. Antes de cornertl rse en un Desarrol lador Evangelizador,

Jennifer fue desarrol lador de software en Microsoft Natural lnteract lve Serll ices dil lision. En este

puesto, recibi6 dos patentes para su trabajo en algoritmos de busqueda y recabado de datos.

Jennifer tarnblen ha ocupado dilA9rsos puestos con Ford Motor Company, National Instruments,

y Soar Technology.

Oeje un comentario ...

Mapa del sit io I Termlnos de uso I Politica de privacidad



imprimir - ¡aprenda html5 en 5 minutos! _ the html5 center

Documents