Manual de HTML5 en espaol Alejandro Castillo Cantn Manual de HTML5 en espaolManual de HTML5 en espaolPrimera ParteEl 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 estructuraActual&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 :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.esManual de HTML5 en espaol : 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>. : ?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. : Ele&ento =header>representa un !rupo de art.culos introductorios o de na#e!acin. : 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#>. : 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.esManual de HTML5 en espaol Diferencias entre HTML y HTML5Mejoras en los formulariosEl 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.esManual 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 y : @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. : 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>. : 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.esManual de HTML5 en espaol !e"unda ParteHna 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 : " " : 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 soporta.Alejandro Castillo | www.theproc.esManual 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 de tu p)!ina.

Dive Int !T"#$

(((

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/anvasHTML 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 /anvas4i 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.esManual de HTML5 en espaol por lo %ue al!unos na#e!adores puede %ue no ten!an inte!rado las A15 para texto.1ideoEl 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 videoLos 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 O22lineLeer 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 /ocsJGracias 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.esManual 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+aci5nLa !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 ParteEn 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 propiedadPlaceholder 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.esManual 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&ulario9Cdi!o9

/ampos con autofocusEl 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

Alejandro Castillo | www.theproc.esManual 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.