1. Manual de HTML5en español
Manual de HTML5en español
Alejandro Castillo Cantón
Alejandro Castillo | www.theproc.es

2. Manual de HTML5en español
www.theproc.es
PrimeraParte
ElHTML5(HyperText Markup Language,versión 5)esla quinta revisión
del lenguajede programación “básico” de la World WideWeb,el HTML.
Estanuevaversión pretende remplazaral actual (X)HTML,corrigiendo
problemascon losque losdesarrolladoresweb seencuentran,asícomo
rediseñarel código actualizandolo anuevasnecesidadesque demandala
web de hoy en día.
Debido aque estoscambiosafectaranla forma de desarrollar la web en
un futuro inmediato, desdeTheProcess,plantearemosuna seriede
artículosdonde desvelaremosloscambiosmásimportantes.
Actualmente el HTML5estáen un estado BETA,aunque ya algunas
empresasestándesarrollando sussitioswebsen estaversión del
lenguaje.A diferenciade otrasversionesde HTML,loscambiosen HTML5
comienzanañadiendo semánticay accesibilidad implícitas,especificando
cadadetalle y borrando cualquier ambigüedad.Setiene en cuenta el
dinamismo de muchossitioswebs(facebook,twenti, etc),donde su
aspecto y funcionalidad sonmássemejantesaaplicacioneswebsque a
documentos.
Mejor estructura
Actualmente esabusivo el uso de elementosDIVparaestructurar una
web en bloques.ElHTML5nosbrinda varioselementosque perfeccionan
estaestructuración estableciendo qué escadasección,eliminando asíDIV
innecesarios.Estecambio en la semánticahaceque la estructura de la
web seamáscoherente y fácil de entender por otraspersonasy los
navegadorespodrán darle másimportanciaasegún qué seccionesde la
web facilitándole ademásla tareaalosbuscadores,asícomo cualquier
otra aplicación que interprete sitiosweb. Laswebssedividirán en los
siguienteselementos:
• <section></section> - Seutilizapararepresentaruna sección
“general” dentro de un documento o aplicación,como un capítulo
de un libro. Puedecontener subseccionesy silo acompañamosde
h1-h6 podemosestructurar mejor toda la páginacreando
jerarquíasdel contenido, algo mu favorable parael buen
posicionamiento web.
Alejandro Castillo | www.theproc.es

3. Manual de HTML5en español
• <article></article> - Elelemento de artículo representaun
componente de una páginaque consisteen una composición
autónoma en un documento, página,aplicación,o sitio web con la
intención de que puedaserreutilizado y repetido. Podríautilizarse
en losartículosde losforos,una revistao el artículo de periódico,
una entradade un blog, un comentario escrito por un usuario,un
widget interactivo o gadget, o cualquier otro artículo
independiente de contenido.
Cuando loselementosde <article> son anidados,loselementos
de <article> interioresrepresentan losartículosque en principio
son relacionadoscon el contenido del artículo externo.Por
ejemplo,un artículo de un blog que permite comentariosde
usuario,dichoscomentariossepodrían representarcon <article>.
• <aside></aside> - Representauna sección de la página que
abarcaun contenido tangencialmente relacionado con el
contenido que lo rodea,por lo que sele puede considerarun
contenido independiente.Esteelemento puede utilizarsepara
efectostipográficos,barraslaterales,elementospublicitarios,para
gruposde elementosde la navegación,u otro contenido que se
considereseparadodel contenido principal de la página.
• <header></header> - Elemento <header> representaun grupo
de artículosintroductorioso de navegación.
• <nav></nav> - Elelemento <nav> representauna sección de
una página que esun link aotraspáginaso apartesdentro de la
página:una sección con linksde navegación.
No todoslosgruposde enlacesen una página tienen que estaren
un elemento <nav>,sólo lasseccionesque consisten en bloques
principalesde la navegación son apropiadasparaserutilizadas
con el elemento <nav>.Puedeutilizarseparticularmente en el pie
de página paratener un menú con un listado de enlacesavarias
páginasde un sitio, como el Copyright; home page,políticade uso
y privacidad.No obstante,el elemento <footer> esplenamente
suficiente sin necesidadde tener un elemento <nav>.
• <footer></footer> - Elelemento <footer> representael pié de
una sección,con información acercade la página/sección que
poco tiene que ver con el contenido de la página,como el autor, el
copyright o el año.
Alejandro Castillo | www.theproc.es

4. Manual de HTML5en español
Diferenciasentre HTMLy HTML5
Mejorasen losformularios
Elelemento input adquieregran relevanciaal ampliarseloselementos
que sepermitiran en el “type”.
• <input type="search"> paracajasde búsqueda.
• <input type="number"> paraadicionar o restarnúmeros
mediante botones.
• <input type="range"> paraseleccionarun valor entre dosvalores
predeterminados.
• <input type="color"> seleccionarun color.
• <input type="tel"> númerostelefónicos.
• <input type="url"> direccionesweb.
• <input type="email"> direccionesde email.
Alejandro Castillo | www.theproc.es

5. Manual de HTML5en español
• <input type="date"> paraseleccionarun díaen un calendario.
• <input type="month"> parameses.
• <input type="week"> parasemanas.
• <input type="time"> parafechas.
• <input type="datetime"> parauna fechaexacta,absoluta y
tiempo.
• <input type="datetime-local"> parafechaslocalesy frecuencia.
Otroselementosmuy interesantes
<audio> y <video> - Nuevoselementosque permitirán incrustarun
contenido multimedia de sonido o de vídeo,respectivamente.Esuna de
lasnovedadesmásimportantese interesantesen esteHTML5,ya que
permite reproducir y controlasvídeosy audio sin necesidadde plugins
como el de Flash.
Elcomportamiento de estoselementosmultimedia serácomo el de
cualquier elemento nativo, y permitirá insertar en un video,enlaceso
imágenes,por ejemplo.Youtube,ya ha anunciado que dejael Flashy
comienzaaproyectar con HTML5.
<embed> - Seempleaparacontenido incrustado que necesitaplugins
como el Flash.Esun elemento que ya reconocenlosnavegadores,pero
ahoraal formar parte de un estándar,no habráconflicto con <object>.
<canvas> - Esteesun elemento complejo que permite que segeneren
gráficosal hacerdibujosen suinterior. Esutilizado en GoogleMapsy en
un futuro permitirá alosdesarrolladorescrearaplicacionesmuy
interesantes.
Alejandro Castillo | www.theproc.es

6. Manual de HTML5en español
Segunda Parte
Unapregunta muy común en estostiemposes:“¿Cómopuedo empezara
utilizarHTML5siexisten navegadoresantiguosque no lo soportan?”Pero
la pregunta en síseha formulado de forma errónea.ElHTML5no esuna
cosagrande como un todo, sino una colección de elementosindividuales,
por consiguiente lo que sísepodrá serádetectar silosnavegadores
soportan cadaelemento por separado.
Cuando losnavegadoresrealizanun render de una página,construyen un
“Modelo de Objeto de Documento” (Document Object Model - DOM),
una colección de objetosque representan loselementosdel HTMLen la
página.Cadaelemento - <p>,<div>,<span> - esrepresentado en el
DOM por un objeto diferente.
TodoslosobjetosDOM comparten unascaracterísticascomunes,aunque
algunostienen másque otros.Enlosnavegadoresque soportan rasgos
del HTML5,algunosobjetostienen unaúnicapropiedad y con una simple
ojeadaal DOM podremossaberlascaracterísticasque soporta el
navegador.
Existencuatro técnicasbásicasparasabercuando un navegador soporta
una de estasparticularescaracterísticas,desdelasmássencillasalasmás
complejas.
1. Compruebasideterminadaspropiedadesexisten en objetos
genéricoso globales(como window o navigator).
Ejemplo:comprobar soporte parala “Geolocalización”.
2. Crearun elemento,luego comprobar sideterminadas
propiedadesexisten en eseelemento.
Ejemplo:comprobar soporte paracanvas.
3. Crearun elemento,comprobar sideterminadosmétodosexisten
en eseelemento, llamarel método y comprobar losvaloresque
devuelve.
Ejemplo:comprobar qué formatosde video soporta.
4. Crearun elemento,asignaruna propiedad adeterminado valor,
entoncescomprobar sila propiedad mantiene suvalor.
Ejemplo:comprobar que tipo de <input> soporta.
Alejandro Castillo | www.theproc.es

7. Manual de HTML5en español
MODERNIZR,una bibliotecapara detectarHTML5.
Modernizr esuna libreríade JavaScript con licenciaMITde código
abierto que detecta sison compatiblesmuchoselementosparaHTML5y
CSS3.Dichalibreríaseirá actualizando y parautilizarlasolo hayque
incluir en <head><script> de tu página.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr seejecuta automáticamente,no esnecesariollamara
ninguna función tipo: modernizr_init().Cuando seejecuta,secreauna
objeto global llamado Modernizr,que contiene un set de propiedades
Boleanasparacadaelemento que detecta.Porejemplo sisunavegador
soporta elementoscanvas,la propiedad de la libreríaModernizr.canvas
será“true”.Situ navegador no soporta loselementoscanvas,la
propiedad Modernizr.canvasserá“false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento
Canvas
HTML5 define el elemento <canvas>como un rectángulo en la página
donde sepuede utilizar JavaScript paradibujar cualquier cosa.También
determina un grupo de funciones(canvasAPI)paradibujar formas,crear
gradientesy aplicartransformaciones.
TextoCanvas
Situ navegador soporta lasAPIde canvasno quiere decir que pueda
soportar lasAPIparatexto-canva.LasAPIde canvasehan ido generando
con el tiempo y lasfuncionesde texto sehan añadido posteriormente,
Alejandro Castillo | www.theproc.es

8. Manual de HTML5en español
por lo que algunosnavegadorespuede que no tengan integrado lasAPI
paratexto.
Video
ElHTML5ha definido un nuevo elemento llamado <video> paraincrustar
video en laspáginasde la web. Actualmente insertar un video en la web
eraimposible sin determinadospluginscomo el QuickTimeo el Flash.
Elelemento <video> ha sido diseñado parautilizarlo sin la necesidadde
que tenga que detectar ningún script. Sepueden especificarmúltiples
ficherosde video y losnavegadoresque soporten el video en HTML5
escogeránuno basadoen el formato que soporte.
Formatosde video
Losformatosde video soncomo loslenguajesescritos.Un periódico en
ingléscontiene la mismainformación que un periódico en español,
aunquesolo uno le seráútil. Conlosnavegadorespasalo mismo,
necesitansaberen qué “idioma” estáescrito el video.
Loslenguajesde losvideossellaman “codecs”un algoritmo utilizado
paracompactarun video.Existendocenasde codecsen usoen todo el
mundo, aunque dosson losmásrelevantes.Uno de estoscodecscuesta
dinero por la licenciade la patente,y funciona en safari y losiphones.El
otro codecesgratisy de código abierto y funciona en navegadorescomo
Chromium y Firefox.
AplicacionesOFFline
Leerpáginawebsoffline esrelativamente sencillo.TeconectasaInternet,
cargasuna web, te desconectasy puedessentarte tranquilamente aleer.
¿Peroqué sucedecuando sonaplicacionescomo Gmail o GoogleDocs?
Graciasal HTML5cualquierapuede crearuna aplicación web que
funcione offline.
Lasaplicacionesweb offline seejecutan como una aplicación online.La
primeravezque sevisita una web offline que estédisponible,el servidor
web le dirá aal navegador losficherosque necesitaparapoder trabajar
desconectado.Estosficherospueden ser,HTML,JavaScript,imágenesy
hastavideos.Unavezque el navegador ha descargadolosficheros
necesariospodrásvolver avisitar la web aunque no estésconectado a
Internet. Elnavegador reconoceráque estásdesconectado de Internet y
utilizarálosficherosque habíadescargado con anterioridad.Lapróxima
Alejandro Castillo | www.theproc.es

9. Manual de HTML5en español
vezque te conectes,sihasrealizado cambiosen la web offline,estosse
subirán al servidor actualizándolo.
Geolocalización
Lageolocalización esla forma de suponer donde te encuentrasen el
mundo y siquieres,compartir información con gente de confianza.
Existenmuchasmanerasde descubrir donde te encuentras,por tu
dirección IP,la conexión de red inalámbrica,la torre de telefoníamóvil
por la que habla tu teléfono móvil (celular),o GPSespecíficosque reciben
lascoordenadasde longitud y la latitud de satélitesque están eneel cielo.
TerceraParte
Enel primer capítulo de estacharlasobreHTML5,mencionamospor
arriba sobreloscambiosen losformulariosque incluye el HTML5.
Comonorma paratodos,un formulario esuna etiqueta <form> y en su
interior algunoselementos<input type="text"> o <input
type="password"> finalizado con un botón <input type="submit"> y ya
está.A continuación explicaremosalgunasde estasnovedades.
Textocomo PLACEHOLDER
Placeholder esun nuevo atributo que seutilizadentro de loscampos
input. Sirveparamostrarun texto dentro del input siemprey cuando el
campo estévacíoo no estéseñalado.Encuanto sehagaclic dentro del
campo (o sellegue por el TAB),el texto desaparecerá.
Seguramente ha visto la propiedad Placeholder antes.Porejemplo,
Mozilla Firefox3.5incluye textosplaceholder en la barrade localización.
Cuando sehaceclic sobrela barrade búsquedao sellegapor un tab, el
texto preestablecido desaparece.
Irónicamente Firefox no da soporte aestapropiedad,al igual que IEy
Opera,solo escompatible (adíade hoy) con Safariy Chrome.Aquellos
Alejandro Castillo | www.theproc.es

10. Manual de HTML5en español
navegadoresque no soporten placeholder simplemente lo ignorarány
no mostraránnada.
Aquí hayun ejemplo de cómo sepuede incluir placeholder en un
formulario:
Código:
<form>
<input placeholder="Buscar en la base de datos">
<input value="Buscar">
</form>
Camposcon autofocus
Elatributo de autofoco permite al usuario decidir y controlar qué campo
de texto debe serenfocado (señalado,activado) en cuanto la página es
cargadao seestécargando,permitiendo al usuario comenzaraescribir
sin tener él que especificarcual essucampo de texto principal en su
página.Elatributo de autofoco esun atributo boleano (respuestatrue -
false)y no deberáhaber másde un elemento en la página.
Muchossitiosutilizan JavaScript parafocalizary dirigir el cursor
automáticamente al campo de texto. Porejemplo Googlecuando
comienzaacargarsupágina dirigirá el cursosasuinput de búsqueda
automáticamente paraque puedasempezaraescribir tus palabrasde
búsquedaen sunavegador.Estopuede serconveniente paraalgunosy
paraotrosque pueden tener una necesidadespecíficano tanto. Si
aprietasla barrade espacioesperando que la página baje haciendo un
scroll,esto no sucederáporque estáenfocado el input del formulario.
HTML5introduceun atributo de control de autofoco en losformularios.
Elatributo autofoco haceexactamente lo que suena,en cuanto la web se
comienzaacargar,mueveel cursor y asíla atención del usuario aun
campo <input> particular.
A díade hoy, Autofocussolo lo soportan Safari,Chromey Opera.Firefoxe
IE,lo ignorarán.
Código:
<form>
<input name="b" autofocus>
<input type="submit" value="Search">
</form>
Alejandro Castillo | www.theproc.es

11. Manual de HTML5en español
En el primer tutorial mencionamos varios de los nuevos atributos de los
formularios, y en próximos artículos iremos profundizando en ellos. Ahora
les dejo una galería de sitios hechos con HTML5 que podrán inspeccionar
viendo el código fuente.
Alejandro Castillo | www.theproc.es