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 Marup 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&presas est)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 lins 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 typeCDweeD> 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.
<emed> : 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 Ojeto 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 ilioteca 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="mderni'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 frmas!!
/ else .
%% n ha+ s&rte &ara canvas0 ls 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 NuicTi&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
<frm>
<in&ut &lacehlder="1uscar en la *ase de dats">
<in&ut value="1uscar">
<%frm>
/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
<frm>
<in&ut name="*" autfcus>
<in&ut t+&e="su*mit" value="2earch">
<%frm>
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. Aora
les de!o una "alera de sitios ecos con #$%&' (ue podr)n inspeccionar
viendo el cdi"o fuente.
Alejandro Castillo | www.theproc.es