Manual de HTML5 en espaol

Manual de HTML5 en espaol

Alejandro Castillo Cantn

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

www.theproc.es

Primera Parte
El HTML5 (HyperText Mar up Lan!ua!e" #ersin 5$ es la %uinta re#isin del len!uaje de pro!ra&acin '()sico* de la +orld +ide +e(" el HTML. Esta nue#a #ersin pretende re&pla,ar al actual (-$HTML"corri!iendo pro(le&as con los %ue los desarrolladores we( se encuentran" as. co&o redisear el cdi!o actuali,andolo a nue#as necesidades %ue de&anda la we( de hoy en d.a. /e(ido a %ue estos ca&(ios a0ectaran la 0or&a de desarrollar la we( en un 0uturo in&ediato" desde The 1rocess"planteare&os una serie de art.culos donde des#elare&os los ca&(ios &)s i&portantes. Actual&ente el HTML5 est) en un estado 2ETA"aun%ue ya al!unas e&presasest)n desarrollando sus sitios we(s en esta #ersin del len!uaje. A di0erencia de otras #ersiones de HTML" los ca&(ios en HTML5 co&ien,an aadiendo se&)ntica y accesi(ilidad i&pl.citas" especi0icando cada detalle y (orrando cual%uier a&(i!3edad. 4e tiene en cuenta el dina&is&o de &uchos sitios we(s (0ace(oo " twenti" etc$" donde su aspecto y 0uncionalidad son &)s se&ejantes a aplicaciones we(s %ue a docu&entos.

Mejor estructura
Actual&ente es a(usi#o el uso de ele&entos /56 para estructurar una we( en (lo%ues. El HTML5 nos (rinda #arios ele&entos %ue per0eccionan esta estructuracin esta(leciendo %u7 es cada seccin" eli&inando as. /56 innecesarios. Este ca&(io en la se&)ntica hace %ue la estructura de la we( sea &)s coherente y 0)cil de entender por otras personas y los na#e!adores podr)n darle &)s i&portancia a se!8n %u7 secciones de la we( 0acilit)ndole ade&)s la tarea a los (uscadores" as. co&o cual%uier otra aplicacin %ue interprete sitios we(. Las we(s se di#idir)n en los si!uientes ele&entos9
<section></section> : 4e utili,a para representar una seccin

'!eneral* dentro de un docu&ento o aplicacin" co&o un cap.tulo de un li(ro. 1uede contener su(secciones y si lo aco&paa&os de h;:h< pode&os estructurar &ejor toda la p)!ina creando jerar%u.as del contenido" al!o &u 0a#ora(le para el (uen posiciona&iento we(.
Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

<article></article> : El ele&ento de art.culo representa un

co&ponente de una p)!ina %ue consiste en una co&posicin autno&a en un docu&ento" p)!ina" aplicacin" o sitio we( con la intencin de %ue pueda ser reutili,ado y repetido. 1odr.a utili,arse en los art.culos de los 0oros" una re#ista o el art.culo de peridico" una entrada de un (lo!" un co&entario escrito por un usuario" un wid!et interacti#o o !ad!et" o cual%uier otro art.culo independiente de contenido. Cuando los ele&entos de =article> son anidados" los ele&entos de =article> interiores representan los art.culos %ue en principio son relacionados con el contenido del art.culo externo. 1or eje&plo" un art.culo de un (lo! %ue per&ite co&entarios de usuario" dichos co&entarios se podr.an representar con =article>.
<aside></aside> : ?epresenta una seccin de la p)!ina %ue

a(arca un contenido tan!encial&ente relacionado con el contenido %ue lo rodea" por lo %ue se le puede considerar un contenido independiente. Este ele&ento puede utili,arse para e0ectos tipo!r)0icos" (arras laterales" ele&entos pu(licitarios" para !rupos de ele&entos de la na#e!acin" u otro contenido %ue se considere separado del contenido principal de la p)!ina.
<header></header> : Ele&ento =header> representa un !rupo

de art.culos introductorios o de na#e!acin.

<nav></nav> : El ele&ento =na#> representa una seccin de

una p)!ina %ue es un lin a otras p)!inas o a partes dentro de la p)!ina9 una seccin con lin s de na#e!acin. @o todos los !rupos de enlaces en una p)!ina tienen %ue estar en un ele&ento =na#>" slo las secciones %ue consisten en (lo%ues principales de la na#e!acin son apropiadas para ser utili,adas con el ele&ento =na#>. 1uede utili,arse particular&ente en el pie de p)!ina para tener un &en8 con un listado de enlaces a #arias p)!inas de un sitio" co&o el Copyri!htA ho&e pa!e" pol.tica de uso y pri#acidad. @o o(stante" el ele&ento =0ooter> es plena&ente su0iciente sin necesidad de tener un ele&ento =na#>.
<footer></footer> : El ele&ento =0ooter> representa el pi7 de

una seccin" con in0or&acin acerca de la p)!inaBseccin %ue poco tiene %ue #er con el contenido de la p)!ina" co&o el autor" el copyri!ht o el ao.

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

Diferencias entre HTML y HTML5

Mejoras en los formularios

El ele&ento input ad%uiere !ran rele#ancia al a&pliarse los ele&entos %ue se per&itiran en el 'type*. =input typeCDsearchD> para cajas de (8s%ueda. =input typeCDnu&(erD> para adicionar o restar n8&eros &ediante (otones. =input typeCDran!eD> para seleccionar un #alor entre dos #alores predeter&inados. =input typeCDcolorD> seleccionar un color. =input typeCDtelD> n8&eros tele0nicos. =input typeCDurlD> direcciones we(. =input typeCDe&ailD> direcciones de e&ail.
Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

=input typeCDdateD> para seleccionar un d.a en un calendario. =input typeCD&onthD> para &eses. =input typeCDwee D> para se&anas. =input typeCDti&eD> para 0echas. =input typeCDdateti&eD> para una 0echa exacta" a(soluta y tie&po. =input typeCDdateti&e:localD> para 0echas locales y 0recuencia.

Otros elementos muy interesantes

<audio> y <video> : @ue#os ele&entos %ue per&itir)n incrustar un

contenido &ulti&edia de sonido o de #.deo" respecti#a&ente. Esuna de las no#edades &)s i&portantes e interesantes en este HTML5" ya %ue per&ite reproducir y controlas #.deos y audio sin necesidad de plu!ins co&o el de Elash. El co&porta&iento de estos ele&entos &ulti&edia ser) co&o el de cual%uier ele&ento nati#o" y per&itir) insertar en un #ideo" enlaces o i&)!enes" por eje&plo. Foutu(e" ya ha anunciado %ue deja el Elash y co&ien,a a proyectar con HTML5.
<em ed> : 4e e&plea para contenido incrustado %ue necesita plu!ins

co&o el Elash. Esun ele&ento %ue ya reconocen los na#e!adores" pero ahora al 0or&ar parte de un est)ndar" no ha(r) con0licto con =o(ject>.
<canvas> : Este es un ele&ento co&plejo %ue per&ite %ue se !eneren

!r)0icos al hacer di(ujos en su interior. Esutili,ado en Goo!le Maps y en un 0uturo per&itir) a los desarrolladores crear aplicaciones &uy interesantes.

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

!e"unda Parte
Hna pre!unta &uy co&8n en estos tie&pos es9 'IC&o puedo e&pe,ar a utili,ar HTML5 si existen na#e!adores anti!uos %ue no lo soportanJ* 1ero la pre!unta en s. se ha 0or&ulado de 0or&a errnea. El HTML5 no es una cosa !rande co&o un todo" sino una coleccin de ele&entos indi#iduales" por consi!uiente lo %ue s. se podr) ser) detectar si los na#e!adores soportan cada ele&ento por separado. Cuando los na#e!adores reali,an un render de una p)!ina" construyen un 'Modelo de O jeto de #ocumento* (/ocu&ent K(ject Model : /KM$" una coleccin de o(jetos %ue representan los ele&entos del HTML en la p)!ina. Cada ele&ento : <p> " <div> " <span> : es representado en el #OM por un o(jeto di0erente. Todos los o(jetos #OM co&parten unas caracter.sticas co&unes" aun%ue al!unos tienen &)s %ue otros. En los na#e!adores %ue soportan ras!os del HTML5" al!unos o(jetos tienen una 8nica propiedad y con una si&ple ojeada al #OM podre&os sa(er las caracter.sticas %ue soporta el na#e!ador. Existen cuatro t7cnicas ()sicas para sa(er cuando un na#e!ador soporta una de estas particulares caracter.sticas" desde las &)s sencillas a las &)s co&plejas. 1. Co&prue(a si deter&inadas propiedades existen en o(jetos !en7ricos o !lo(ales (co&o window o navigator $. Eje&plo9 co&pro(ar soporte para la 'Geolocali,acin*. 2. Crear un ele&ento" lue!o co&pro(ar si deter&inadas propiedades existen en ese ele&ento. Eje&plo9 co&pro(ar soporte para canvas. 3. Crear un ele&ento" co&pro(ar si deter&inados &7todos existen en ese ele&ento" lla&ar el &7todo y co&pro(ar los #alores %ue de#uel#e. Eje&plo9 co&pro(ar %u7 0or&atos de #ideo soporta. 4. Crear un ele&ento" asi!nar una propiedad a deter&inado #alor" entonces co&pro(ar si la propiedad &antiene su #alor. Eje&plo9 co&pro(ar %ue tipo de <input> soporta.

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

MO#$%&'(%) una i lioteca para detectar HTML5*

Moderni+r es una li(rer.a de JavaScript con licencia M5T de cdi!o

a(ierto %ue detecta si son co&pati(les &uchos ele&entos para HTML5 y C44L./icha li(rer.a se ir) actuali,ando y para utili,arla solo hay %ue incluir en <head><script> de tu p)!ina.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive Int !T"#$<%title> <scri&t src="m derni'r(min()s"><%scri&t> <%head> <* d+> ((( <%* d+> <%html>

Moderni+r se ejecuta auto&)tica&ente" no es necesario lla&ar a nin!una 0uncin tipo9 moderni+r,init-.. Cuando se ejecuta" se crea una

o(jeto !lo(al lla&ado Moderni,r" %ue contiene un set de propiedades 2oleanas para cada ele&ento %ue detecta. 1or eje&plo si su na#e!ador soporta ele&entos can#as" la propiedad de la li(rer.a Moderni+r*canvas ser) true. 4i tu na#e!ador no soporta los ele&entos can#as" la propiedad Moderni+r*canvas ser) false.
if ," derni'r(canvas- . %% a crear f rmas!! / else . %% n ha+ s & rte &ara canvas0 l s sient

/anvas
HTML 5 de0ine el ele&ento =can#as> co&o un rect)n!ulo en la p)!ina donde se puede utili,ar Ma#a 4cript para di(ujar cual%uier cosa. Ta&(i7n deter&ina un !rupo de 0unciones (can#as A15$ para di(ujar 0or&as" crear !radientes y aplicar trans0or&aciones.

Te0to /anvas
4i tu na#e!ador soporta las A15 de can#as no %uiere decir %ue pueda soportar las A15 para texto:can#a. Las A15 de can#a se han ido !enerando con el tie&po y las 0unciones de texto se han aadido posterior&ente"

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

por lo %ue al!unos na#e!adores puede %ue no ten!an inte!rado las A15 para texto.

1ideo
El HTML5 ha de0inido un nue#o ele&ento lla&ado =#ideo> para incrustar #ideo en las p)!inas de la we(. Actual&ente insertar un #ideo en la we( era i&posi(le sin deter&inados plu!ins co&o el Nuic Ti&e o el Elash. El ele&ento =#ideo> ha sido diseado para utili,arlo sin la necesidad de %ue ten!a %ue detectar nin!8n script. 4e pueden especi0icar &8ltiples 0icheros de #ideo y los na#e!adores %ue soporten el #ideo en HTML5 esco!er)n uno (asado en el 0or&ato %ue soporte.

2ormatos de video
Los 0or&atos de #ideo son co&o los len!uajes escritos. Hn peridico en in!l7s contiene la &is&a in0or&acin %ue un peridico en espaol" aun%ue solo uno le ser) 8til. Con los na#e!adores pasa lo &is&o" necesitan sa(er en %u7 'idio&a* est) escrito el #ideo. Los len!uajes de los #ideos se lla&an 'codecs* un al!orit&o utili,ado para co&pactar un #ideo. Existen docenas de codecs en uso en todo el &undo" aun%ue dos son los &)s rele#antes. Hno de estos codecs cuesta dinero por la licencia de la patente" y 0unciona en sa0ari y los iphones. El otro codec es !ratis y de cdi!o a(ierto y 0unciona en na#e!adores co&o Chro&iu& y Eire0ox.

3plicaciones O22line
Leer p)!ina we(s o00line es relati#a&ente sencillo. Te conectas a 5nternet" car!as una we(" te desconectas y puedes sentarte tran%uila&ente a leer. I1ero %u7 sucede cuando son aplicaciones co&o G&ail o Goo!le /ocsJ Gracias al HTML5 cual%uiera puede crear una aplicacin we( %ue 0uncione o00line. Las aplicaciones we( o00line se ejecutan co&o una aplicacin online. La pri&era #e, %ue se #isita una we( o00line %ue est7 disponi(le" el ser#idor we( le dir) a al na#e!ador los 0icheros %ue necesita para poder tra(ajar desconectado. Estos 0icheros pueden ser" HTML" Ma#a4cript" i&)!enes y hasta #ideos. Hna #e, %ue el na#e!ador ha descar!ado los 0icheros necesarios podr)s #ol#er a #isitar la we( aun%ue no est7s conectado a 5nternet. El na#e!ador reconocer) %ue est)s desconectado de 5nternet y utili,ar) los 0icheros %ue ha(.a descar!ado con anterioridad. La prxi&a
Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

#e, %ue te conectes" si has reali,ado ca&(ios en la we( o00line" estos se su(ir)n al ser#idor actuali,)ndolo.
4eolocali+aci5n

La !eolocali,acin es la 0or&a de suponer donde te encuentras en el &undo y si %uieres" co&partir in0or&acin con !ente de con0ian,a. Existen &uchas &aneras de descu(rir donde te encuentras" por tu direccin 51" la conexin de red inal)&(rica" la torre de tele0on.a &#il por la %ue ha(la tu tel70ono &#il (celular$" o G14espec.0icos %ue reci(en las coordenadas de lon!itud y la latitud de sat7lites %ue est)n ene el cielo.

Tercera Parte
En el pri&er cap.tulo de esta charla so(re HTML5" &enciona&os por arri(a so(re los ca&(ios en los 0or&ularios %ue incluye el HTML5. Co&o nor&a para todos" un 0or&ulario es una eti%ueta =0or&> y en su interior al!unos ele&entos =input typeCDtextD> o =input typeCDpasswordD> 0inali,ado con un (otn =input typeCDsu(&itD> y ya est). A continuacin explicare&os al!unas de estas no#edades.

Te0to como PL3/$HOL#$%

Placeholder es un nue#o atri(uto %ue se utili,a dentro de los ca&pos

input. 4ir#e para &ostrar un texto dentro del input sie&pre y cuando el ca&po est7 #ac.o o no est7 sealado. En cuanto se ha!a clic dentro del ca&po (o se lle!ue por el TA2$" el texto desaparecer). 4e!ura&ente ha #isto la propiedad Placeholder antes. 1or eje&plo" Mo,illa Eire0ox L.5 incluye textos placeholder en la (arra de locali,acin.

Cuando se hace clic so(re la (arra de (8s%ueda o se lle!a por un ta(" el texto preesta(lecido desaparece.

5rnica&ente Eire0ox no da soporte a esta propiedad" al i!ual %ue 5E y Kpera" solo es co&pati(le (a d.a de hoy$ con 4a0ari y Chro&e. A%uellos
Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

na#e!adores %ue no soporten placeholder si&ple&ente lo i!norar)n y no &ostrar)n nada. A%u. hay un eje&plo de c&o se puede incluir placeholder en un 0or&ulario9 Cdi!o9
<f rm> <in&ut &laceh lder="1uscar en la *ase de dat s"> <in&ut value="1uscar"> <%f rm>

/ampos con autofocus

El atri(uto de autofoco per&ite al usuario decidir y controlar %u7 ca&po de texto de(e ser en0ocado (sealado" acti#ado$ en cuanto la p)!ina es car!ada o se est7 car!ando" per&itiendo al usuario co&en,ar a escri(ir sin tener 7l %ue especi0icar cual es su ca&po de texto principal en su p)!ina. El atri(uto de autofoco es un atri(uto (oleano (respuesta true : 0alse$ y no de(er) ha(er &)s de un ele&ento en la p)!ina. Muchos sitios utili,an Ma#a4cript para 0ocali,ar y diri!ir el cursor auto&)tica&ente al ca&po de texto. 1or eje&plo Goo!le cuando co&ien,a a car!ar su p)!ina diri!ir) el cursos a su input de (8s%ueda auto&)tica&ente para %ue puedas e&pe,ar a escri(ir tus pala(ras de (8s%ueda en su na#e!ador. Esto puede ser con#eniente para al!unos y para otros %ue pueden tener una necesidad espec.0ica no tanto. 4i aprietas la (arra de espacio esperando %ue la p)!ina (aje haciendo un scroll" esto no suceder) por%ue est) en0ocado el input del 0or&ulario. HTML5 introduce un atri(uto de control de autofoco en los 0or&ularios. El atri(uto auto0oco hace exacta&ente lo %ue suena" en cuanto la we( se co&ien,a a car!ar" &ue#e el cursor y as. la atencin del usuario a un ca&po =input> particular. A d.a de hoy" Auto0ocus solo lo soportan 4a0ari" Chro&e y Kpera. Eire0ox e 5E" lo i!norar)n. Cdi!o9
<f rm> <in&ut name="*" aut f cus> <in&ut t+&e="su*mit" value="2earch"> <%f rm>

Alejandro Castillo | www.theproc.es

Manual de HTML5 en espaol

En el primer tutorial mencionamos varios de los nuevos atributos de los formularios, y en prximos artculos iremos profundizando en ellos. A ora les de!o una "alera de sitios ec os con #$%&' (ue podr)n inspeccionar viendo el cdi"o fuente.

Alejandro Castillo | www.theproc.es