de HTML5,
una nueva herramienta para grAficos vectoriales. Con JavaScript
realizaremos, de un modo sencillo, tareas para las que antes
requeriamos otras herramientas.
*06- Trabajar con formularios en HTML5
En este capitulo aprenderemos a trabajar con los nuevos campos
para formularios que provee HTML5. Los validaremos de manera
muy sencilla e incluso permitiremos completar los campos mediante
reconocimiento de voz.
*07- Selectores de CSS
En este capitulo repasaremos los selectores de uso frecuente y luego nos centraremos en los selectores avanzados de CSS3. Entenderemos
su sintaxis y aprenderemos en qué casos hacer uso de cada uno.
*08- Nuevas propiedades de CSS3
Aqui veremos las nuevas propiedades de CSS3, sus valores posibles y
la compatibilidad con los distintos navegadores. También veremos
cémo utilizarlas para crear interfaces visualmente enriquecidas pero
de gil renderizacién.
*o9- Interfaz de ususario avanzada con
HTML5 + CSS3
En este capitulo nos enfocaremos en el andlisis de las caracteristicas
de CSS3, HTMLS y JavaScript que permiten crear interfaces
enriquecidas y dinamicas que mejoran la experiencia del usuario.
*10- Responsive web design
Este capitulo presentard los fundamentos del disefio y la
maquetacion adaptable. Con el objetivo de lograr una interfaz que se
adapte a las caracteristicas de cada pantalla conoceremos las Media
Queries.
*11- APIs de HTML5
Desarrollaremos las principales APIs de HTMLs5 para aprovechar el
lenguaje en los diferentes navegadores. Utilizaremos la API de geolocalizacién, crearemos sitios capaces de funcionar sin conexién a
internet, etc. Ademas, veremos una introduccién a Device Motion
API y Fullscreen API.
*12- Compatibilidad entre navegadores
Aqui aprenderemos a utilizar jQuery y Modernizr, para que nuestros
sitios sean capaces de identificar las caracteristicas del navegador
donde se estAn ejecutando. Introduccién
Este libro esta orientado a todos aquellos disefiadores, maquetadores
y desarrolladores web que tengan pasion por su trabajo y un gran interés
en conocer en detalle las nuevas capacidades que proponen HTMLS,
CSS3 y JavaScript.
Para aprovechar al maximo los contenidos desarrollados en la obra
recomendamos tener conocimientos basicos de los lenguajes
abarcados. Los lectores de nivel principiante podran encontrar en los
distintos capitulos numerosos datos sobre las capacidades y novedades
de HTML5, CSS3 y JavaScript, mientras que aquellos que cuenten con
conocimientos mas avanzados encontraran una herramienta para
profundizar lo que saben. Por otra parte, el libro servira a ambos tipos de
lectores para erradicar inquietudes que surgen del saber comun o de la
informacion errénea o ambigua que abunda en internet.
Mediante los temas seleccionados, nos enfocaremos en detalle en los
beneficios y el potencial de trabajar con la nueva version de cada uno de
los lenguajes propuestos. Hemos intentado que los lectores puedan ir
incorporando los conocimientos de manera paulatina, partiendo desde
los temas mas basicos e introductorios para finalizar con los mas
complejos. En este sentido, los usuarios mas avanzados podran pasar
directamente a los temas de su interés, 0 aprovechar estas
introducciones para refrescar sus saberes.
Sin duda, este libro ocuparé su lugar dentro de los materiales de
consulta de todo disefiador y/o desarrollador web, de modo tal que los
lectores puedan recurrir a sus explicaciones detalladas ante cualquier
duda que surja en el desarrollo de un proyecto. CAPITULO 1:
Introducci6én a HTML5
En este primer capitulo vamos a revisar algunos conceptos
fundamentales del lenguaje HTML para, luego, conocer las
principales caracteristicas de la version HTML5. Entenderemos
por qué se considera esta versién como la revolucién de la Web
y cuales son las caracteristicas que la diferencian de las
versiones anteriores.
HTML, un lenguaje con historia
No pretendemos aburrir a los lectores hablando sobre la historia y los
inicios del lenguaje HTML, acerca del cual mucho habran escuchado. Pero
resulta importante repasar algunos momentos significativos de este
recorrido para entender el contexto en el cual se da origen al proyecto
HTMLS5 y cuales son las principales razones que marcan el comienzo de
esta revolucion en la Web y nos muestran su futuro.
Lejos estamos de aquel documento inicial que fue presentado por Tim
Berners-Lee, en el afio 1991, especificando la primera —y rustica— version
de nuestro invaluable lenguaje HTML. Los curiosos y/o nostalgicos pueden
aun consultar el documento en
http://www.w3.org/History/19921103-
hypertext/hypertext/WWW /MarkUp/Tags.html. O00 (arp nese
€ > S| D www3 orp /testoy/19921103-hyperent/hypertert HW Markt Fags hr a
HTML Tags
Tsao ue wedi te IM mens as ih tu pee tes ean with te sea eer ba sn May
tags have corresponding chosing tags which Mes encp oe asa ar the tg pene. (For exangle TITLE
Some tgs take paromctrs called mths. The sibesr gven afer the tag sere by paces Certain atibues have an ft simply by hie
retence others are followed by am equal sig and a wale (See Acct Wg. forexample) The mames of ps and aeaes ae not case Sen: ey
fray Be Ser oppor ANd case with exalt ame acing. Cn hs Gouna Dery TEM Ia USE ase)
‘Comendly HTM. documens se wansined without the noma! SGML raring tgs, bu if ese are incakd parsers will ignore Oe,
Title
“Theil ofa documents givem betwen ide tags
“The text Between the opening andthe sting tags is at forthe hypertext mode. There should nly be one tk in any note. should Meni the conknt
‘of te nade in a rly wide Coste, and should cally ion ne kn:
The tie fe not srty prt ofthe tet of ce document, but isan mute of fhe node, I may nog contain aechoes, paragraph marks, or highlighting the tle
‘ray be wus to bendy the node in a hear Lt label the window displaying the onde, ec rs at normally splayed in the tet of a docames
‘Contat ies with beatings
Next ID
‘Obsolte: NeXT Browser only. May be ignore. This ag takes 2 single abuse which isthe mer of the next docurmen-wiemameric Menifir to be
allocated (not pood SGML). Noss that when modifying a ocumemt old anchor kls should not be rewsed as there may be ferences nord ele where
‘which point io tems, This is eadand gencrakd by hypeniew cases, Human writs of HTM. ustaly use macmonk alpha ientiirs. Browser sofware
‘may ignowe this. Example of we:
Base Address
Figura 1. Primera version de HTML publicada en el afio 1991.
Esta primera versién del lenguaje fue llamada Tags HTML (etiquetas
HTML) y contenia la especificacion de 22 elementos, de los cuales 13
continuan existiendo. En esta primera edicién, solo se contemplaron
etiquetas para texto e hipervinculos, pero desde entonces el lenguaje HTML
sigue en constante avance y evolucién. Con el correr de los afios, llegaron
las etiquetas para tablas, imagenes y formularios, entre otras. Pero no fue
sino hasta el afio 1995 cuando el lenguaje HTML logré su primera versién
estandar: en septiembre de ese afio se publico HTML 2.0 que, a pesar de
su nombre, fue el primer estandar oficial del lenguaje. Se SPT)
Para obtener material adicional gratuito, ingrese ala seccionPublicaciones/
Libros dentro de http://premium.redusers.com. Alli encontrara todos
nuestros titulos y podra acceder a contenido extra de cada uno, como
sitios web relacionados, programas recomendados, ejemplos utilizados
por el autor, apéndices, archivos editables o de cédigo fuente. Todo esto
ayudara a comprender mejor los conceptos desarrollados en la obra.
Un afio mas tarde, en 1996, de la mano de Tim Berners-Lee, se crea la
‘WSC (World Wide Web Consortium), organismo que se ocupa, desde
entonces, de la especificacion y la evolucion del lenguaje HTML.
ws wae we Coa
CD wwend.ory
STANOAROS PARTICIPATE MEMBERSHIP ABOUT WAC
sTanoanos = WSC Launches New Digital Publishing Activity togentensed
Bavazninene menace
oe Smee
spc Teo2y WC muncrece pr Dial Petnng Amey move Be WeDo eee. esate
Bi ico ienecure «Sate ne opt puseneg nay snd Wout neceay
trtoges between the developers ot he Open Web Paterm and me
a oes =
Gy semarse wes ‘xtsting mousy
BE 1 Tectrasy
Bl wirv ceserices Journals ana ecucatena resources ute W2C tecnnoioges uch as cngneer, Web apes excert.
“Ty's 800% readers ang tales fo olec vere backs, magazines, ‘Open postions tor access
(OURFTNR. CSS, SVG, SHML. MaIM/L. or varous WeD APIS. Commis _—_system. agri, esioner for
Ed wow cr0encos publshers abo rly on WIC technologies in thelr back-end processing webpiatiorm org and stems
1 cewsersans alte way rom aunerng mousy 10 Severng the grimeder weewenie addin er WePlatorm or,
‘xamorng Tots prodsct and beyond. The pubtenhg mauery & one ot he largest
consamers cf WIC wennology. woe BLOG
on 6 vow a
‘Werk in mis aes primary takes pace Te Digeal Pubthing
Snterest Group. Tat Interest Group i forum for experts the ital eT. sempistes anc XML
publsning ecosystem of eactonicjurrais, magaznes, news, cr Book SS.anadtt3oyusnovn
‘btsring (amore, creators, PUDIEATS, rows OrgBNZBLONS,
‘ocnsevers, sccesscimy and meeraueeatzaton Spec, eT aainte on bie Raeeaaed
tecnnical cscussens, gathering uso cases andrequremats 1 ak ‘Agptesson boven
‘he exising toemats and technclogies@ 9, fr electric books} win St aneaetanyoeems Ont
Ineernatonatzaten ‘ose used by me Open Web Fiaer
WEB FOR ALL
wacawz
Accessty
aetna summary hom W3E
Figura 2. Sitio oficial de la World Wide Web Consortium, donde se puede encontrar la especificacién de las distintas versiones de HTML.
En enero del afio 1997, la W3C publica su primera recomendacién oficial
con la version HTML 3.2, que presenta avances significativos respecto de
las versiones anteriores, como, por ejemplo, la capacidad de insertar
applets en Java (es decir, un componente de una aplicacion que se
ejecuta en el contexto de otro programa, como por ejemplo un navegador
web).
Los avances cualitativos no se hicieron esperar mucho, ya que en el afio
1998 se publica la version HTML4, que se sigue utilizando hasta hoy. Esta
version incorpora mejoras sustanciales, como hojas de estilo (CSS), tablas
complejas, mejoras en los formularios e incluso la posibilidad de incorporar
scripts. La ultima revision de esta version del lenguaje se publicé a fines del
afio 1999 y se denomindé HTML 4.01.
Desde entonces, los miembros de la W3C entendieron que debian ir un
paso mas alla y se dedicaron a una nueva y prometedora version del
lenguaje: XHTML (HTML de extensi6n), una version avanzada de HTML.
basada en XML. Asi fue como la evolucién del HTML original fue dejada de
lado, y los miembros de la WSC centraron todas sus energias en el
desarrollo de XHTML. POO J vsner s0 te
€ > S| Dwewehergityatemi
XHTML™ 1.0 The Extensible HyperText Markup Language (Second
Edition)
A Reformulation of HTML 4 in XML 1.0
rane
WSC Recommendation 26 January 2000, revised 1 August 2002
This version:
itr. argcTEZ2002.REG:ximlt-20020801
Latest version:
Previous version:
Dittmarked version
mi argTR/2002 REC:xhim!1-20020801/shea inn
Authors:
See achnowledgmens.
Please relerto te erata fer this document, which may include some normatve comections. See also ransistions.
This documents also avaliable in these non-nermatve formats: Wul-nart XHTMI tie, PostScrit version, PDE yers.on. ZIP
achive and Grin’ TAR archive
‘oct ©7002 IC QU. IEA. Ml. AN RPE Revered WOE abit. Keach ocurete and iwi ceca nl ASH
Abstract
Figura 3. Especificacién oficial de XHTML 1.0.
La primera especificacion del lenguaje XHTML sale a luz en enero del
afio 2000, bajo la denominacion XHTML 1.0, para ser revisada luego en
el afio 2002.
Ante esta postura adoptada por la W3C, miembros de empresas
representativas en el desarrollo y avance de la Web —como Apple, Opera y
Mozilla— se mostraron preocupados por el abandono del proyecto HTML
4.01 por parte de la W3C y decidieron formar otro organismo
estandarizador que continuara con la evolucién natural del lenguaje a su
version 5. Este organismo se denomina WHATWG (Web Hypertext
Application Technology Working Group), y podemos conocerlo mas a través
de su sitio oficial: http://www.whatwg.org. @
Welcome to the WHATWG community
‘Mainsuining and evolving HTML since 200¢
Figura 4. Sitio web oficial de la agrupaciin WHATWG.
Esta agrupacién se centré exclusivamente en la especificacion del primer
borrador de HTMLS5, que fue publicado en enero del 2008. Ante la presién
de este grupo y de las empresas que lo componen, la W3C decidi6, en
2007, retomar el proyecto de especificacibn de HTML 4.01.
Durante algunos ajfios, la W3C continuo trabajando de forma simultanea
en dos proyectos de estandarizacion, HTML y XHTML, lo cual desbord6é de
preguntas a los desarrolladores: ¢cual seria el rumbo que tomaria la W3C?
éPor qué la misma institucion trabaja sobre dos especificaciones similares?
~Cual seria el futuro de la Web? Los ajfios siguientes traerian las
respuestas a estas preguntas y, también, una gran cantidad de buenas
noticias. a7 VD) 6) aa)
En el sitio oficial de W3C, www.w3.org, podemos encontrar una valiosa
herramienta de uso libre: el validador de sintaxis para HTML, al que
podemos acceder desde http://validator.w3.org. Este recurso permite
comprobar si nuestro cédigo fuente tiene errores de sintaxis en cualquiera
de las versiones de HTML. También es posible validar un archivo que esta
subido a un servidor, cargar un archivo desde nuestra maquina o bien
validar entradas directas de codigo pegandolo en el validador.
Rumbo a la revolucién de la Web
De regreso, la W3C publica, en el afio 2000, la especificacién de
XHTML 1.0, una adaptacién de HTML 4.01 al lenguaje XML. Alli se
prometia la gran revolucion de la Web, que nunca llegé a producirse
realmente, debido a que XHTML 1.0, a pesar de que posee una sintaxis
mas estricta y algunas mejoras semanticas, no difiere sustancialmente de
su antecesor, HTML 4.01. Esta nueva version del lenguaje mantiene casi
todas las caracteristicas y etiquetas de HTML 4.01, pero suma algunas
restricciones y elementos propios de XML.
Finalmente, los cambios introducidos por XHTML no representan mejoras
significativas para el desarrollo de sitios web. Por ello, el W3C presentd, en
los afios siguientes, dos nuevos borradores: XHTML 1.1 y XHTML 2.0,
dos nuevas especificaciones de XHTML con mejoras importantes respecto
de la primera version. ODO s0men22
© 52D wr rp THe
XHTML™ 2.0
WSC Working Group Note 16 December 2010
This version:
ieee
ANE JONOTE:xhimi2.20101216
Latest public version:
Previous version:
Iniodimevev3.org/T B/2006YD-xhini2-20060726
Dittmarked version;
Ediors:
Mar Bibeck Siwingr Labs
Markus Sling, DAISY Consorim
Shana WcCarton Apcted Testog aed Technolgy
‘Steven Pembering, CWI (XHTML 2 Warking Group Co-Chale)
ones et cheroed ate TAL Working Croup:
Micah Dubinko, lnviled Expert
Beth Enperton, Websense
Shana MeCanon,
Jan Nera, Inied Exped
‘Steven Pemberton,
Figura 5. Especificacién oficial de XHTML 2.0, publicada en el sitio de
la W3C.
XHTML 2.0 promete un cambio realmente significativo para la Web. No
obstante, vale recordar que al mismo tiempo existe un grupo de
desarrolladores trabajando arduamente en otra especificacion
revolucionaria: HTML5. ¢Cual sera el rumbo que tomara esta historia?
¢Cual sera el ganador en la batalla para revolucionar la Web?
El proyecto HTML5 contaba con importante apoyo de las empresas que
dia a dia empujan la Web, como Apple, Google, Firefox y Opera, entre
otras. Esto pudo haber sido uno de los factores mas importantes para que,
finalmente, los miembros del W3C decidieran abandonar el proyecto de
XHTML y concentrar sus recursos y energias en el desarrollo de HTML5. Nace HTML5
Para comenzar con HTMLS5, deberiamos decir que es la quinta
especificacién relevante que sufre el lenguaje HTML. Si bien esta definicion
es correcta, resulta un poco pobre para definir los cambios que trae
consigo, ya que cuando nos referimos a HTML5 estamos hablando de un
cambio en el paradigma con el cual se venia trabajando desde hacia
tiempo.
Si bien la mayoria de los desarrolladores utilizamos, desde hace afios, no
solo HTML, sino también CSS y JavaScript para la construccién de
proyectos web, a partir del nuevo paradigma de HTMLS5 estos tres
lenguajes se volvieron inseparables.
HTMLS
A vocabulary and associated APIs for HTML and XHTML
WSC Candidate Recommendation 17 December 2012
‘This Version:
Candidate Recommendation
fies
[Latest Published Version:
brown. 93 org TAs
Latest Editor's Draft
Diz itnen. 8 orghanstagttraRshirsCRY
Previous Versions:
Dron. or/TEV201 20-2012 1025
bitoubnea. Wi org/TR/2010440-himiS-20700304/
bitoni. ora/TH2008/¥/0-hirlS-20080825.
bitoudwa..ora/T2008 4/0 hims-2009042.0
ikaw ora/TR2009/V/0 -himi-20090212!
bp wea w org/TR2008/V70-hims-200805 10!
town. ong/TZ2008/¥/D-hiriS-20080122¢
Editors:
WIC
Figura 6. Especificacién oficial de HTML5.
La caida del imperio de Flash Durante mucho tiempo, Flash fue la herramiena favorita de la Web.
Aunque no fue pensado originalmente para ser usado en internet, su
condicién de elemento multimedia hizo que se ganara rapidamente un lugar
durante la década del noventa, ya que presentaba caracteristicas
invaluables para los disehadores y desarrolladores de aquel tiempo.
Desarrollar un sitio de alto impacto visual no era tan simple hace algunos
afios: la maquetaci6n con tablas y las insuficientes propiedades de CSS
nos obligaban a limitar nuestra creatividad a disefios muy estructurados y
basicos. Por otro lado, Flash nos seducia con una interfaz facil de usar y
herramientas graficas que permitian explotar al maximo nuestro poder
creativo.
Pr)
Figura 7. Pagina de inicio del estudio 2Advanced, reconocido por su
desarrollo en Flash. Durante varios afios, los clientes estaban encantados con tener sus sitios
desarrollados en Flash, pues incluian sonidos, video, animaciones y juegos
que brindaban a los usuarios experiencias de navegacién completamente
diferentes. La mayoria de las empresas de primera linea eran duefias de
sitios realizados completamente en Flash, con un gran despliegue de
recursos y efectos de animacion.
Paralelamente a esto, el lenguaje ActionScript utilizado por Flash
crecia a pasos agigantados, permitiendo desarrollar proyectos cada vez
mas complejos y con mejores resultados. De este modo, gran parte de los
sitios web estaban desarrollados 100 % en Flash, y se fueron dejando de
lado aspectos importantes como la accesibilidad, el rendimiento de
descarga y el posicionamiento, en funcidn de la explosion visual de la
interfaz de usuario.
éQué fue entonces lo que hizo que, desde hace algun tiempo, las
empresas que habian invertido mucho dinero en desarrollos de Flash
quisieran volver a invertir dinero en tener un nuevo sitio con lenguaje
HTML? La respuesta a esta pregunta es bastante simple: llego la era de
los dispositivos méviles.
Como muchos habran experimentado o escuchado por ahi, la mayoria de
estos equipos (tablets y smatphones) no permiten visualizar archivos de
Flash. Esta realidad nos lleva a deducir una respuesta simple a nuestro
interrogante inicial: cada dia son mas y mas los usuarios que acceden a la
Web mediante dispositivos méviles. De hecho, las estadisticas realizadas
en algunos paises nos revelan que, en algunas ciudades del mundo, son
mas las conexiones a internet mediante dispositivos méviles que desde las
clasicas computadoras de escritorio. Y aqui llegamos a una obvia
conclusién: si nuestra empresa posee un sitio realizado en Flash, dejamos
afuera a todos estos usuarios que a diario intentan acceder a nuestro sitio
desde un dispositivo movil.
Esta tendencia de los usuarios y del mercado nos lleva a una nueva era,
la de HTMLS. No es volver al pasado, a aquellos sitios duros y estaticos,
sino entrar en un nuevo universo de posibilidades, donde la fuerza de HTML5, CSS3 y JavaScript combinados nos permite realizar desarrollos
donde practicamente no existen mas limites que nuestra propia
imaginacién. La potencia de estos lenguajes es tan grande que podemos
realizar sitios completamente interactivos, de alto impacto visual, excelente
rendimiento y totalmente accesibles. El futuro del disefio y desarrollo web
ya lleg6: es hora de conocerlo en profundidad para comenzar a disfrutar de
sus multiples beneficios.
LAFUENTE DE HTMLS
Si estan interesados en conocer mas, es recomendable visitar el sitio
Oficial de la W3C y recorrer la especificacién de HTML5 en www.w3.org/
TR/html5. Si bien internet es una fuente inagotable de conocimiento, la
informacion que encontramos no siempre es correcta y precisa. Existen
muchos sitios que ofrecen informacion incorrecta o desactualizada.
éQué es HTML5?
Tal como mencionamos al principio de este capitulo, HTMLS es la quinta
revision relevante que sufre el lenguaje HTML, y es mas que importante
resaltar que esta version atin no es un estandar. El 17 de diciembre de
2012, la W3C anuncié que la etapa de desarrollo de la especificacién habia
llegado a su fin y que HTMLS era candidata a recomendacion. No obstante,
aun no podemos “cantar victoria’. Todavia quedan por delante dos afios
mas de revision de este lenguaje, periodo durante el cual no se agregaran
nuevas capacidades a la especificacién, pero si es posible que algunos
elementos que estan actualmente sean removidos o modificados. En el
mismo anuncio, la W3C sefalé que la recomendacion de HTMLS5 que sera
candidata para su estandarizacion no se publicara antes del 1 de
septiembre del 2014, asi que tenemos algun tiempo para seguir esperando. BOO F varmass
© [Dy wow np) TRPemi
72
HTML 5.1
A vocabulary and associated APIs for HTML and XHTML
WSC Working Draft 28 May 2013
‘This Version:
Mics
Latest Published oy "
bedewa A ors!
Latest Editor's Drat:
Previous Versions
Editors:
Robin Baron, 3c
‘Stove Faulier, The Paciello Group
‘Travia Leihend, Mcroson
Erika Doyle: Navara, Mecrosof
Edward OComar, Apple le.
Siva Pier
WHATWG:
Jan Hickson, Googie, tne.
This specification i al
Sones ooo as wa 2
Figura 8. Sitio oficial de W3C con las especificaciones de la futura
versién de HTML5.1.
A esta altura, tal vez se estan preguntando qué pasara luego de que
HTMLS5 se vuelva un estandar. ¢ Sera el final de este interesante viaje?
No, claro que no. Ni bien se termind el proceso de especificacién de
HTMLS, un equipo de trabajo de la WSC inicié el proyecto de especificacion
de HTML5.1. Si, como lo leyeron: HTMLS5.1. El avance de este proyecto
puede consultarse en http://www.w3.org/TR/html51.
Hay que mencionar que trabajar con HTMLS5 tiene actualmente muchas
alegrias y algunas tristezas. Hace algunos ajfios, les hubiéramos dicho que
eran puras tristezas y frustraciones, pero lejos estamos ya de esa etapa,
pues actualmente contamos con navegadores modernos que tienen muy
buen soporte para HTMLS. No obstante, no existe un solo navegador que tenga soporte completo para HTML5, CSS3 y JavaScript, asi que
lamentablemente no podremos utilizar el 100 % del potencial de estos
lenguajes. Todavia...
Por otro lado, tenemos usuarios que siguen utilizando navegadores
antiguos como Internet Explorer 8, cuando la historia de este
navegador con HTML5 comienza a partir de su version numero 9. Pero no
se desanimen: a lo largo de los capitulos de este libro -especialmente, en
el ”Capitulo 12: Compatibilidad entre navegadores”-,
aprenderemos técnicas para lograr que usuarios con navegadores viejos
puedan también disfrutar de los sitios desarrollados con HTML5.
Algo que nos pasara a diario y, sobre todo, cuando arranquemos a
trabajar con HTMLS y CSS3, es que nos costara recordar qué propiedad de
CSS o qué capacidad de HTMLS tiene soporte en cada version de
navegador. Por suerte, en internet podremos encontrar herramientas
fantasticas y gratuitas que nos facilitaran esta tarea. Existen diversos sitios
que nos proveen tablas de compatibilidad que indican qué capacidad es
soportada por cada version de navegador.
Uno de los sitios de cabecera en este aspecto es Can I use...
(http://www.caniuse.com). Posee una completisima tabla que nos
muestra tanto capacidades de HTML5 como propiedades de CSS y
JavaScript. Esta pagina incorpora mejoras periddicamente y abarca los
nuevos navegadores para dispositivos mdviles que van saliendo al
mercado. ‘Compatibility tables for suppert of HTMLS, C$S3, SVG and more in desktop and mobile browsers.
(tenn ea en i in as a3)
Figura 9. Caniuse.com ofrece una completa tabla de compatibilidad
para HTML5, CSS y JavaScript.
Es frecuente la pregunta sobre si es recomendable, hoy en dia, usar
HTMLS, o si es mejor continuar usando XHTML. La respuesta es: no hay
una sola raz6n por la cual no debiéramos usar HTML5. Lu) Fe} iy TOP VOY Vea P21
Es una técnica de disefio y maquetacién mediante la cual detectamos la
resolucion de pantalla del navegador del usuario y, mediante el uso de
distintas hojas de estilo, aplicamos un disefio de pantalla distinto para
cada dispositivo, adaptandolo para que se vea mejor en cada resolucion.
Podemos ver un excelente ejemplo de sitio adaptable en Smashing
Magazine: www.smashingmagazine.com.
Caracteristicas fundamentales de
HTML5
EI concepto fundamental de HTMLS5 es la simplicidad. En tanto
vayamos profundizando los temas de este libro, notaremos que esta
premisa esta siempre presente. Desarrollar un sitio usando HTMLS5 es
mucho mas simple que hacerlo con las versiones anteriores. Siempre se
trata de hacer mas simple y mas accesible el codigo de nuestros sitios y
aplicaciones web. En HTML5 veremos siempre presente el antiguo lema del
arquitecto Ludwig Mies van der Rohe: menos es mas.
Otro de los preceptos fundamentales de HTMLS5 fue reducir al maximo la
cantidad de plugins 0 agregados que el usuario debe tener instalados en su
maquina, como el reproductor de Flash. Por esta razon, en el”Capitulo 4:
Audio y video con HTML5” y en el ”Capitulo 9: Interfaz de
usuario avanzada con HTML5 + CSS3” veremos como trabajar con
etiquetas que permiten insertar archivos de audio y video y, también, c6mo
crear animaciones nativas que no requieren que el usuario tenga en su
maquina algo mas que su navegador.
Un precepto mas que importante para HTMLS5 es la independencia del
dispositivo: permite desarrollar sitios y aplicaciones compatibles con
distintos tipos de dispositivos. En el "Capitulo 10: Responsive web
design”, veremos que no solo podemos crear un cédigo compatible con todos los equipos, sino que también lograremos que su disefio visual se
adapte a cada uno de ellos, usando la metodologia de trabajo responsive
(disefio adaptable).
Por ultimo, pero no menos importante, HTMLS introduce mas y mejores
elementos de marcacion, que permiten lograr una mejor estructura
semantica y, por lo tanto, hacer mas accesibles los sitios. En el "Capitulo
3: Web semantica y nuevos elementos de HTML5”, conoceremos
en profundidad cada uno de los nuevos elementos y su uso especifico para
el modelado del documento.
eR 7N [55810 TBs
Thi]
=
Para saber si un sitio web posee disefio adaptable, no hace falta tener una
computadora, una tablet y un smartphone. Si redimensionamos la ventana
del navegador, podremos ver las distintas interfaces que vera el usuario
segtn el dispositivo con que ingrese. Esto lo logramos haciendo un doble
clic sobre la barra de titulo del navegador y cambiando el tamajio de la
ventana.
Diferencias entre HTML 4.01, XHTML
1.0 y HTML5
Es hora de poner manos a la obra y comenzar a trabajar con HTMLS. Y
qué mejor idea que arrancar entendiendo las diferencias estructurales y de
sintaxis entre las tres versiones del lenguaje acerca de las cuales estamos
hablando desde el comienzo de este capitulo.
Esa rara etiqueta llamada doctype
Cuando comenzamos a codificar un documento HTML, sin importar con
cual de las versiones estemos trabajando, debemos especificar la etiqueta
doctype, esa etiqueta misteriosa que muchas veces no entendemos para qué sirve pero que sabemos que debe estar.
La etiqueta se utiliza para que el navegador sepa con qué
version de HTML esta codificado el documento y pueda renderizarlo de
manera correcta. Esta etiqueta solo puede ser usada una vez, al principio
del documento, y puede ser escrita en mayUscula o minuscula, debido a
que se encuentra por fuera de la etiqueta (por lo tanto, el modo en
el cual esta escrita es irrelevante).
Los navegadores tienen dos modos de trabajo: estandar y quirks.
Dependiendo de si el doctype esta o no definido en nuestro archivo, el
navegador funcionara en un modo u otro.
En el modo estandar, el navegador renderizara el documento HTML
segun el estandar determinado por el doctype del archivo. En el modo
quirks no hay garantias de como se mostrara el archivo, ya que el
navegador no puede determinar a qué version de HTML corresponde. Por
esta razon, siempre debemos utilizar esta etiqueta para garantizar que el
navegador renderice la pagina en su modalidad estandar.
Como probablemente sepan, cada una de las versiones cuenta con sus
propios tipos de doctype, que determinan el tipo de version de la
especificacién. Tanto XHTML 1.0 como HTML4 poseen mas de un
doctype que permite determinar el tipo de especificacion. Generalmente
vamos a encontrar una versién de transicién, mas flexible a la
validacion, y una versién estricta.
Repasemos los tipos de doctype para cada una de las versiones de
HTML y veamos qué ha cambiado en HTMLS.
Tipos de doctype para HTML 4.01
HTML4 cuenta con tres tipos de doctype. Veamos cémo se escriben y
cual es la funcién especifica de cada uno de ellos.
Estricto
Esta es la version estricta del doctype para HTML 4.01:
El doctype estricto no admite el uso de ningun tipo de atributo
considerado deprecado para esta version de HTML. En caso de ser
utilizado, el archivo presentara errores de validacién cuando realicemos su
comprobacién.
Transitional
Esta es la version de transicién del doctype para HTML4.01:
En el doctype de transicién se admite el uso de algunos atributos a los
cuales se los considera obsoletos en HTML. La idea de este doctype es
permitir a los desarrolladores migrar de forma mas rapida sus sitios
desarrollados en versiones anteriores a HTML4. Por esta razon, el
doctype transitional admite el uso de algunos atributos que son
considerados obsoletos para esta version y, aun asi, el archivo parara la
validacion de W3C.
Frameset
Esta es la version del doctype para HTML 4.01 que permite el uso de
las etiquetas frame y frameset. Este doctype casi no tiene uso, ya que
practicamente nadie usa etiquetas frame hoy en dia.
Tipos de doctype para XHTML 1.0
XHTML 1.0 cuenta con tres tipos de doctype. Veamos como se
escriben y cual es la funcién especifica de cada uno de ellos.
Estricto
Esta es la version estricta del doctype para XHTML 1.0:
Transitional
Esta es la versi6n de transicién del doctype para XHTML 1.0:
La diferencia entre el doctype estricto y el transicional radica en los
atributos que cada uno va a admitir para que el documento HTML sea
valido. En particular, en el caso del doctype estricto, no se admite ningun
tipo de atributo que tenga que ver con la representacion visual. Por ejemplo:
Texto del titulo
Frameset
Esta es la versi6n del doctype para XHTML 1.0 que permite el uso de
las etiquetas frame y frameset. Al igual que en HTML4, el uso de este
tipo de doctype es casi nulo, dado que nadie usaria actualmente etiquetas
obsoletas como los frames.
El uso de tecnologias como AJAX ha reemplazado la utilizacion de
frames, permitiendo crear documentos con mejor rendimiento y
accesibilidad.
9.9.9 / ve wet ade wee Conor =) XS new s0uce wm nd.ore
= > C [1 view source we 09
yeareion quncy
jecsepanbernee
sconsortivarcontest”>
Jhowt WIC By Replen">¥3E hy Aeglons /eptien>
sguoed (Fiatandy
Figura 10. Captura del cédigo fuente del sitio web de W3C, donde
podemos ver que se utiliza el doctype estricto para XHTML 1.0.
Doctype para HTML5
HTMLS5 cuenta con un unico tipo de doctype. Veamos cémo es la
sintaxis de esta etiqueta:
A diferencia de sus antecesores, HTML5 cuenta con un Unico tipo de
doctype, mucho mas corto y simple; como vimos, este lenguaje se basa
en la simplicidad. Si nunca pudieron recordar como se escribe
correctamente la etiqueta doctype, ahora pueden descansar tranquilos,
pues el doctype de HTML5 es muy facil de recordar. La ventaja de este doctype no es solo el hecho de ser mas simple de escribir y recordar, sino
que también permite que, debajo de él, podamos emplear tanto la sintaxis
de HTML4 como la de XHTML y, de este modo, hacer mas facil la
migracién a HTMLS. Hablaremos de este tema con mayor profundidad en
este mismo capitulo.
doeticrasate stenttawisenabeats2”
rosett .coa/ davnboads/ricon~
Figura 11. Captura del cédigo fuente del sitio oficial de Microsoft,
donde podemos ver que se esté usando el doctype de HTML5.
El uso de la etiqueta
Un punto muy importante a destacar entre los cambios en XHTML y
HTMLS es el uso de la etiqueta . En XHTML, habitualmente vamos
a ver escrita la etiqueta de la siguiente forma:
Titulo de mi web site
Contenido de mi sitio web
En este caso, el idioma del documento esta establecido en inglés. Esta
simple intervencién en el codigo mejora notablemente la experiencia del
usuario, ya que permite a los programas de accesibilidad saber cual es el
idioma del documento y pronunciar las palabras de forma acorde. También
permite a las herramientas de traduccién determinar qué reglas debe usar.
Y, por ultimo, provoca que Google se “ponga contento” con nuestro sitio
web, ya que este simple punto puede influir en el posicionamiento organico
de nuestro proyecto en los resultados de busqueda. POO fe warns secten won wove) Qvew setae masts ~ \_Y
© _D siew-source ww .mozilnorg/e5-Ai/tvefox/new:
atewidihedevicenniden, snitintoacatest™>
Firefox Web Broveer ~ Descargale gratis ~ nezittavorgé/t
‘web’ for the pusiie good"
stylesneet” nedia~“sereen,projection,tv" hret="{/mozara.cén.202iLiaunat/Redta/Cen/tabtitin:
yaasoeguedn.eotstia.net inedia/ja/1Lbs/etalSehiv. $s">
tylesheet” nadine" sereen,projection,te” href=" dimstora.cda.nozilla.netmadia/ces/ticetox nev~nincna?
x + Cheepas” se dorenont location protecot 7 “heepar//ae” 1 “https liane yy
Figura 12. Captura del cédigo fuente del sitio web de Mozilla Firefox
Argentina, donde podemos ver claramente la declaracién del idioma del
documento.
Cambios en la sintaxis general
Un punto que se presta bastante a la confusion es la sintaxis que
debemos utilizar en HTML5. Por esta razon, nos detendremos para
aclararlo. Una de las diferencias mas significativas entre HTML4 y XHTML1
es la forma de escribir las etiquetas a las cuales llamamos etiquetas
vacias (aquellas que no admiten dentro otras etiquetas), como, por
ejemplo, la etiqueta para las imagenes, los campos de texto o los saltos de
linea.
A continuacion, podemos ver algunos ejemplos de etiquetas vacias:
Contenido