Presentación

En las semanas anteriores, has aprendido los conceptos básicos sobre la

creación de páginas web.

Algunas cosas importantes, como el juego de caracteres o la validación del

código HTML, no las hemos explicado para facilitarte el aprendizaje.

Pero esta semana ya toca, tienes que aprender a realizar páginas web
correctas. Además, esta semana, vas a aprender a incluir elementos nuevos en
una página web, vas a aprender a crear tablas para mostrar datos tabulados y
vas a aprender a insertar imágenes. En las próximas semanas, aprenderás a
insertar otros elementos multimedia, como, por ejemplo, los vídeos.

Por último, también vas a aprender las principales novedades que incorpora
HTML5, la última versión de HTML.

HTML: juego de caracteres

¿Alguna vez el nombre de un fichero o su contenido no lo has podido ver bien

al moverlo de un sistema operativo a otro? ¿Alguna vez has instalado un
programa y no se visualizaban correctamente algunos caracteres? ¿Alguna vez
te han dado un justificante, un extracto bancario o un recibo en el que no se
mostraban correctamente algunos caracteres? ¿Alguna vez has entrado en una
página web y te aparecían caracteres chinos cuando la página no estaba en
chino? Si alguna vez has sufrido un problema parecido y te has sentido solo,
porque pensabas que eras el único al que le pasaba, no te preocupes, porque
no estaba solo. Mucha gente como tú sufre estos problemas todos los días.

Sin duda alguna, en el campo de la informática, el juego de caracteres es de

las cosas más simples, que más problemas ocasiona. Mapa de caracteres,
ASCII, ISO-8859-1, Latín-1, ANSI, UTF 8, UTF-8 sin BOM, Unicode,
Cotejamiento… menudo lío.

¿Qué significa toda esta sopa de términos? A muchos experimentados

informáticos las palabras juego de caracteres les produce horribles pesadillas.
Para que a ti tampoco te produjese pesadillas y entendieses correctamente qué
es el juego de caracteres, tendría que empezar por el principio, por la primera
descripción conocida de un sistema de numeración binario que se debe a un
matemático hindú del siglo tercero antes de nuestra era.

Después te tendría que explicar el sistema binario moderno fue documentado

en su totalidad, por el gran matemático Leibniz, en el siglo 17.

Leibniz utilizó el 0 y el 1, al igual que el sistema de numeración binario actual. Y

después, te tendría que contar muchas otras cosas más pero este no es el
momento. Ya te las contaré en otro vídeo, en este vídeo solo te voy a dar la
solución fácil.
La regla más importante es muy fácil de recordar: utiliza siempre el mismo
juego de caracteres en todo lo que hagas. ¿Qué significa esto en una
aplicación web? Significa que todos los ficheros que compongan tu sitio web
deben estar almacenados en el mismo juego de caracteres, tus ficheros HTML,
CSS, JavaScript, de texto, etcétera, pero también en tus páginas PHP y
cualquier fichero de texto que leas desde PHP, y también los datos que estén
almacenados en tu base de datos y también la conexión que establezcas con
tu base de datos y, si embocas a un servicio web que te devuelve datos en
formato xml o json, pues lo mismo, los datos que te devuelva también tienen
que estar en el mismo juego de caracteres.

Sencillo, ¿verdad? Pues no es tan sencillo porque esto muchas veces es

imposible de lograr, no porque no se pueda, sino porque no depende de
nosotros, lo normal es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes utilizar el mismo juego de
caracteres en todos los elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución, pero muy costosa.

En ese momento es cuando te toca llamar al informático para que te solucione

el problema pero, no a un informático que se dedica a instalar el Windows o a
cambiar tarjetas gráficas, no, a un informático de verdad.

¿Qué juego de caracteres debo usar? Yo te recomiendo UTF-8 sin BOM, es la

solución a todos los problemas y te permite mezclar en un mismo documento
textos en cualquier idioma, es decir, te permite mezclar caracteres de cualquier
alfabeto pero absolutamente sin ningún problema.

Si no puedes utilizar UTF-8 sin BOM por alguna razón, entonces te recomiendo
ISO-8859-1 también llamado Latin1. Después de UTF-8 es el mejor juego de
caracteres para los idiomas de europa occidental, incluido el español.

Pero si necesitas escribir el símbolo del euro, entonces debes utilizar ISO-
8859-15, también llamado Latin9.

Latin1 y Latin9 se diferencian únicamente en 8 caracteres que han cambiado, y

el único realmente importante para el español, es la sustitución de un carácter
que seguramente, nunca has usado, por el símbolo del euro.

¿Cómo indicó el juego de caracteres en HTML? Se realiza mediante una

etiqueta meta, que se escribe en el head, en la cabecera de la página web,
pero depende de la versión de HTML que estés utilizando. Si estás
utilizando HTML 4 debes utilizar esta sintaxis, si estás utilizando XHTML 1,
debes utilizar alguna de estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que indicar el juego de
caracteres mediante la declaración de documentos xml, al principio de la
página web.

Y por fin llegamos a HTML 5, ¿cómo será en HTML 5? ¿Más fácil, más
complicado? En HTML5 se ha intentado hacer el lenguaje HTML más sencillo,
así que, han simplificado la forma de indicar el juego de caracteres y ahora es
algo tan sencillo como esto, o esto.

Después de este vídeo, no espero que ya no veas el juego caracteres como un

lío, en realidad no te explicado las razones de que sea un lío, pero sí que te he
dado dos consejos: utiliza siempre el mismo juego de caracteres en todo lo que
hagas y si puedes, utiliza el juego de caracteres UTF-8 sin BOM.

HTML: el juego de caracteres y los editores de texto

En un vídeo anterior, ya te hablé del juego de caracteres y de los típicos

problemas que ocasiona en las páginas web. En este vídeo te daba dos
consejos: utiliza siempre el mismo juego de caracteres en todo lo que hagas y
utiliza UTF-8 sin BOM, que te permite mezclar en un mismo documento, textos
en cualquier idioma.

Pero ya te avisé en el otro vídeo, hay que saber mucho, mucho más, ya que,
cuando las cosas empiezan a ir mal, estos dos consejos no son la solución
para todos los problemas.

Hace unos días recibí el siguiente correo: “Estoy probando lo del juego de
caracteres usando notepad Plus Plus, en el vídeo recomiendas usar UTF-8 sin
BOM. Resulta que el fichero lo tengo con codificación ANSI pero si lo cambio a
UTF-8 sin BOM, el disquete de guardar no se me marca, es decir, no se ha
modificado el fichero. Entonces, marco UTF-8, se marca el disquete y guardo.
Ahora selecciono UTF-8 sin BOM. Se me marca el disquete y guardo (un
pequeño chanchullo para que me permitiese guardar UTF-8 sin BOM)”.

Y el correo continuaba: “y ahora viene el tema si guardado en UTF-8 sin BOM,

cuando cierro el fichero y lo vuelvo a abrir la codificación que me marca es
ANSI. ¿Es normal? También veo convertir a UTF-8 sin BOM, además de
codificar en UTF-8 sin BOM. ¿Cuál es la diferencia?”

primero vamos a ver qué es eso del BOM. BOM es el acrónimo de Byte Order
Mark, la marca de orden de bytes y es un carácter Unicode que se utiliza para
indicar el orden de los bytes de un fichero de texto al principio del fichero.
Básicamente, existen dos órdenes de bytes, el Little-endian y el Big-endian,
que definen de qué forma se almacenan los datos que ocupan más de un byte
en el ordenador. ¿Confuso? Si, puede ser muy confuso, ya sabes para
solucionar los problemas con los juegos de caracteres hay que saber mucho.
Volviendo al BOM, en el caso de UTF-8, es un carácter unicode que ocupa 3
bytes y que tiene esta representación en hexadecimal y aparece representado
de esta forma como carácter. Quiero que te acuerdes muy bien de lo que pone
aquí EF, BB, BF y de su representación en forma de carácter porque ahora
después la volveremos a ver.

¿Cuál es el problema de todo esto? Lo mejor es utilizar UTF-8, nos evitamos

problemas, podemos escribir cualquier carácter, podemos mezclar todos los
idiomas del mundo, pero UTF-8 lleva el BOM, esos tres bytes al principio del
fichero y hay programas que no se llevan muy bien con el BOM. Por ejemplo,
PHP 5, no tiene un soporte completo de UTF-8. Si vamos a trabajar con PHP 5,
debemos de utilizar UTF-8 sin BOM. Voy a realizar una demostración práctica
con el editor Notepad Plus Plus para que lo entiendas mejor. Te voy a mostrar
un problema típico que aparece cuando trabajamos con UTF-8 y con PHP 5.

Estoy en Notepad Plus Plus y he preparado tres ficheros de ejemplo para

mostrarte el problema. Por un lado, tenemos este fichero html.html que
contiene solamente código HTML. Luego, tenemos este fichero php.php que
contiene esta instrucción de PHP: un eco, párrafo (esto lo escribe PHP) que lo
único que hace es escribir esta cadena de texto, esta cadena HTML. Y por
último, tenemos este fichero también en php, phpfile.php, que lo único que
hace es emplear la instrucción include, include de PHP, para incluir el primer
fichero de HTML, es decir, lo único que hace es leerlo y volcarlo en la salida.
Fíjate que los tres ficheros los tengo almacenados en formato UTF-8. A ver si
aparece aquí, aquí lo tenemos, UTF-8.

Vamos a ver cómo se visualizan en estos tres ficheros en el navegador. Me voy

al navegador y aquí tenemos el primer fichero, el de solamente HTML. Se ve
bien no hay ningún problema, luego tenemos el otro fichero, el que contiene
código de PHP. Se ve bien y ahora el tercer fichero, este fichero de aquí, que
contiene esta instrucción de PHP para cargar el primer fichero, es decir, se
debería de ver igual que este fichero, sin embargo, cuando lo visualizamos,
notamos aquí que hay un cambio, fijaros como aparece aquí un margen
superior, como si hubiese aquí una línea adicional de texto. ¿Esto a qué es
debido? Si nos vamos ahora el código fuente, veremos que he añadido un
comentario al principio de cada uno de los ficheros. ¿Este comentario debe de
producir ese espacio adicional? No, para nada, este espacio no lo debe de
producir un comentario, es más, aquí lo podemos comprobar como estos
ficheros también tienen el comentario y sin embargo no aparece ahí ese
espacio.

Por tanto, ¿a qué se debe esto? El problema está en que al cargar aquí en
PHP, este fichero, el fichero html.html (este fichero de aquí), recordad que está
en formato UTF-8, lleva el BOM, aunque nosotros aquí no lo veamos. ¿Cómo
lo puedo saber? Aquí en Notepad Plus Plus me he instalado un plugin que es
un editor hexadecimal. Si le voy a dar, le doy a ver el código hexadecimal del
fichero. Fijaros lo que tenemos aquí al principio, ¿lo recordáis?, ¿recordáis los
tres caracteres que os he dicho, acordaros de estos tres caracteres? Lo
podemos ver aquí también en hexadecimal ef, bb, bf, ese es el BOM, esa es la
marca que indica que esto es un fichero en formato UTF-8 e indica el orden de
los bytes.

Este carácter es el que me está produciendo aquí, este salto de línea, porque
ese carácter está aquí incluido. Lo que ocurre es que el navegador tampoco me
lo muestra aquí, al ver el código fuente, por tanto, me puedo volver loco, muy
loco, buscando a ver por qué me está apareciendo aquí este margen y todo es
debido a ese carácter invisible que no me aparece.

¿Cómo solucionamos este problema? Pues bien sencillo, la solución ya te lo he

dicho, y es no almacenar el fichero en formato UTF-8, sino almacenarlo en
formato UTF-8 sin BOM. Para eso, nos vamos aquí al menú codificación y le
damos a convertir a UTF-8 sin BOM, pero, aquí tenemos la duda, tenemos la
pregunta que me hacían en un correo electrónico. ¿Qué debo de usar,
Codificar o Convertir? Codificar, lo debería de usar, cuando inicio un fichero
desde cero, es decir, cuando no tiene contenido o cuando quiero hacer algo
raro, como almacenar en un mismo fichero caracteres con dos modificaciones
distintas porque lo que estoy indicando es que, a partir de este momento, el
contenido que yo escriba, lo quiero codificar con este juego de caracteres pero
el contenido que ya tiene el fichero, lo dejamos en el juego de caracteres que
ya tenía.

En nuestro caso, no queremos hacer eso, no queremos dejar el fichero con la

codificación anterior, sino que queremos transformar, convertir todos los
caracteres a la nueva codificación. Por tanto, debemos de usar Convertir. Yo te
puedo asegurar que nunca he usado Codificar, esta opción nunca la he
necesitado y la verdad es que, si yo fuese el diseñador del Notepad Plus Plus,
la escondería un poco para no causar confusión entre los usuarios.

Así que, en este caso vamos a usar Convertir a UTF-8 sin BOM. Fijaros como
me aparece en rojo para indicarme que el fichero ha sido modificado y, lo que
me ponían en el correo electrónico ahora ya lo puedo guardar porque el fichero
ha sufrido una transformación. Al guardarlo me desaparece el disquete que se
decía en el correo electrónico, el fichero no necesita guardarse porque no tiene
ningún cambio y si me voy ahora al editor hexadecimal, veréis que me han
desaparecido esos tres caracteres que habían al principio, ya no está el BOM,
ya no está esa marca. ¿Lo entendéis? Sencillo, ¿no?

Voy a realizar lo mismo con todos los ficheros, los voy a convertir a UTF-8 sin
BOM ya los tengo los tres en UTF-8 sin BOM. Vuelvo aquí, recargo y veréis
que aparentemente no ha habido ningún cambio, efectivamente, porque el
navegador Google Chrome, está preparado para trabajar con UTF-8 con o sin
BOM pero, ahora, vamos a ver si se soluciona este problema, vamos a ver si
desaparece este margen, le doy a recargar y ¡tachán! Ya no me sale ese
margen. Genial, ¿no? Solucionado.

Esto es muy importante que lo recordéis porque cuando trabajemos con PHP
es muy normal hacer cosas como esta, es decir, construir una página web
mediante trozos mediante componentes que los vamos incluyendo, los vamos
uniendo. Si nos despistamos y los componentes que vamos uniendo están
almacenados en UTF-8 con BOM nos aparecerá ese carácter no visible y nos
romperá el diseño de la página web, por tanto, recordad: hay que almacenar
los ficheros con UTF-8 sin BOM.

Y para finalizar, un último detalle, acordaros que debéis de poner la etiqueta

meta charset para indicar el juego de caracteres y este juego de caracteres que
indicamos aquí, debe de coincidir con el juego de caracteres que físicamente
se está empleando para almacenar el fichero. Si yo aquí, indicó un juego de
caracteres y almaceno el fichero con otro juego de caracteres, tendré
problemas.
Vamos a hacer una prueba, por ejemplo, aquí tengo indicado UTF-8 como
juego de caracteres para mi página y voy a cambiarlo a Latin 1. Aquí, Latin 1 no
me aparece, podría darle aquí, a juego caracteres, buscarlo, aparecería por
aquí en Europa Occidental, donde está, por aquí está en algún sitio, yo
normalmente lo que hago es convertir a ANSI. Fijaros como me dice que ahora
tengo que guardar el fichero porque ha sufrido una transformación, aquí me
aparece efectivamente ANSI, le doy a Guardar y ahora cuando cargue la
página, ¡tachan!, ya no me aparece el carácter que me va a dar problemas. El
carácter que me va a dar problemas es la vocal acentuada á, el resto de
caracteres no me dan problemas porque están entre los 128 primeros
caracteres ASCII y esos caracteres, se representan de igual forma en ASCII,
en ISO 8859-1, en UTF-8. Como son los caracteres más comunes, siempre se
representan igual, por eso no me dan problemas, los problemas me los dan los
caracteres especiales.

Vamos a hacer otra prueba. Si ahora le pongo Latin 1 o también le podría

poner ISO 8859-1, se debe de arreglar el problema. Volvemos al navegador, le
doy a recargar y ya me sale bien el carácter otra vez.

Y ahora vamos a hacer la última prueba, que es: yo indico que mi juego
caracteres es el Latin 1. Lo tengo guardado en ANSI, está guardado en Latin 1,
pero lo voy a convertir: le cambió la codificación y volvemos a UTF-8 sin BOM.
Me vuelve a decir que lo guarde, lo guardo, recargar y ¡tachán!, otra vez
problema, ahora me sale otro carácter distinto.

En conclusión, hay que llevar mucho cuidado y lo que ponga aquí. Lo que
indiquemos en el HTML tiene que coincidir con la codificación física del fichero.
En cuanto haya una discrepancia, en cuanto no coincida, empezaremos a tener
problemas.

Bien espero que este vídeo te ayude un poco más a evitar los típicos
problemas que aparecen al trabajar con los juegos de caracteres, pero te
vuelvo a recordar: el tema es muy complejo y hay que saber muchas cosas
para hacer frente a todos los problemas que pueden surgir.

HTML: tablas

¿Qué son las tablas? Una tabla HTML, tal y como explica Wikipedia, es una
forma gráfica de representar información de manera esquematizada, ordenada
y compacta.

¡Voilá! Esto podría ser un buen ejemplo de tabla que representa a alumnos con
sus respectivas notas y este sería el esquema HTML de la tabla anterior, como
puedes observar, las tablas se organizan en filas y celdas. Puede que eches de
menos la organización en filas y columnas de los procesadores de texto, o que
estés pensando en el porqué de la nota de Jordi, o bueno, de momento nos
tendremos que conformar con lo que hay, filas y celdas.
La etiqueta table indica el inicio y el cierre de la tabla, el resto de etiquetas
necesariamente estarán recogidas entre table y/table.

Tr, Table Row, representa una nueva fila de la tabla, en el ejemplo, tendríamos
cuatro etiquetas tr.

Td, Table Data cell, es la etiqueta de último nivel y se traduce en una celda de
datos en la tabla. Estas son las tres etiquetas básicas y las más utilizadas. A
continuación, te presento las grandes olvidadas que pueden ser útiles según el
caso frente al que nos encontremos. No te agobies, con estas tres puedes
trabajar sin problemas.

Para añadir semántica a la tabla, contamos con la etiqueta th, Table Header,
que sustituye la etiqueta td para celdas de cabecera. Es posible utilizarlas en
cualquier punto de la tabla, aunque su uso se recomienda para las primeras y
las últimas filas y columnas de la tabla. Esta etiqueta también se puede utilizar
para trabajar estilos, de hecho, verás que los navegadores destacan el texto de
estas celdas en negrita.

También es posible agrupar filas en tres bloques de estilos.

Thead agrupa una o más filas de cabecera.

Tbody se utiliza para agrupar filas de cuerpo, típicamente aquellas que

contienen, el grueso de los datos.

Y tfoot, como cabría esperar, agrupa las filas del pie de la tabla.

El código de esta tabla quedaría como aparece en pantalla. He omitido el

código de las celdas para que resulte legible.

He hablado de th, thead, tbody y tfoot para trabajar los estilos de la tabla y
probablemente, te estás preguntando cómo hacerlo. Te recuerdo que
trabajarás estilos en el tema CSS.

Puede que navegando por la web te hayas encontrado con alguna tabla que
tiene una cabecera como está. Antes de intentar trabajar con combinaciones de
celdas, te presento una nueva etiqueta.

Caption añade un título sobre la tabla. De nuevo, en el ejemplo, he eliminado el

código conocido para que resulte más fácil de leer.

Igual que los procesadores de texto, en HTML es posible combinar celdas.

Para ello, utilizamos dos atributos de las celdas colspan y rowspan.

Colspan y rowspan esperan un balón entero que especifique cuántas columnas

o filas respectivamente ocupa la celda. En el ejemplo, un valor de 2 en el
atributo colspan, de la celda con el texto 2012 extiende la celda para que ocupe
toda la fila. Un valor de 2 en el atributo rowspan de la celda, con el texto enero,
extiende la celda para que ocupe dos filas.
Aquí puedes ver un ejemplo de uso de colspan y rowspan. Por supuesto, para
que una celda pueda ocupar el espacio de otras, es necesario que ese espacio
no se rellene, si no, pueden ocurrir cosas como esta.

Hasta aquí parece fácil, ¿verdad? Seguramente hayas echado de menos las
columnas o al menos alguna forma de poder dar estilos por columnas. Para dar
estilos por columnas, podemos hacer uso de las etiquetas colgroup y col.

La etiqueta col no tiene etiqueta de cierre pero conviene cerrarla

adecuadamente para cumplir con el estándar. El atributo span funciona de
forma parecida en colgroup o col a como lo hacían colspan y rowspan para las
celdas de la tabla. El valor del atributo indica el número de columnas que
agrupará colgroup o col.

Hay varias formas de utilizarlas, como puedes comprobar en los ejemplos. De

nuevo, para aplicar estilos a las columnas, es necesario estudiar el tema CSS.

En resumen, las etiquetas básicas para codificar una tabla en HTML son: table
para la tabla, tr para cada fila y td para las celdas. Para añadir un título a la
tabla utiliza la etiqueta caption, entre las etiquetas table. Th, en sustitución de
td, añade semántica especificando celdas de cabecera. Las etiquetas que
puedes usar para facilitar el trabajo posterior de CSS son las agrupaciones de
filas thead para las de cabecera, tbody para las filas de datos y tfoot para las
del pie de la tabla, así como agrupaciones de columnas colgroup y col. Los
atributos colspan y rowspan de las etiquetas th, y td sirven para extender las
celdas y el atributo span, de las etiquetas colgroup y col, para extender
columnas.

Y, para terminar, te dejo tres consejos que espero que sean útiles: utiliza
tablas HTML exclusivamente para representar tablas y no caigas en la
tentación de en maquetar tu página con tablas, el código generado resulta
farragoso, tu página no será accesible y además no es nada cool. Antes, se
utilizaban tablas para maquetar, y pese que, a día de hoy, puedas visitar
algunas páginas conocidas que siguen haciendo uso de estas prácticas, como
la de la CIA, hay más argumentos en contra que a favor. En la página
www.hotdesing.com/seybold/spanish puedes leer muchos más.

Repasa bien la combinación de celdas, recuerda que una mala codificación

puede dar lugar a resultados desastrosos y utiliza la agrupación de filas y
columnas para que el posterior trabajo de estilo con CSS resulte más sencillo.
Puedes ampliar información y ver ejemplos utilizando tu buscador favorito, en
alguna de las comunidades desarrollo web como webestilo.com o
desarrolloweb.com o probando y modificando online los ejemplos “try it
yourself” de la w3schools. Y como todo, HTML se aprende trabajándolo, así
pues, puedes intentar realizar estas tablas cuyas soluciones estarán
disponibles en la página del curso, ahora es un buen momento para pausar el
vídeo, copiar el ejemplo y disfrutar de un poco de código.
HTML: imágenes

Las imágenes son el elemento principal que confiere a la web su carácter de

hipermedia, es decir, su capacidad de integrar en un único soporte, la página
web, contenidos muy distintos como texto, imagen, vídeo, audio y otros. En
algunos sitios web, el uso de imágenes es escaso y su ausencia no plantea
ningún problema. En otros sitios web, cuando las imágenes no se visualizan,
pueden aparecer algunos problemas de uso en la página. Sin embargo, en
otros sitios web, la ausencia de imágenes puede hacer, que el sitio web sea
totalmente inútil.

La etiqueta para insertar una imagen en HTML es img. Si consultamos la

documentación oficial de HTML4 y de HTML5, del Word Wide Web Consortium,
el W3C, veremos que no ha habido grandes cambios en la sintaxis de esta
etiqueta. Debido a que no ha habido grandes cambios, en este vídeo me voy a
centrar en HTML4 y XHTML 1.0. Además, la especificación de HTML5 no está
terminada, por lo que puede sufrir variaciones.

La etiqueta img tiene dos atributos obligatorios, src y alt. El atributo src indica la
ruta en la que se encuentra la imagen, mientras que el atributo alt, es el texto
alternativo que se debe visualizar cuando la imagen cuando aún no se ha
cargado o no se puede cargar por diversas razones, como puede ser, que no
exista o que su formato no sea válido. El atributo alt es muy importante para la
accesibilidad de una página web.

La etiqueta img posee los siguientes atributos opcionales, width y height, para
definir las dimensiones de la imagen, el ancho y el alto.

Longdesc para indicar la URL de una página en la que se proporciona una

descripción larga de la imagen. Este atributo también es muy importante para la
accesibilidad de una página.

Y, por último, ismap y usemap para definir mapas de imagen que veremos
ahora después.

Por último, también existen unos atributos obsoletos, que puedes encontrar
alguna vez en alguna página web antigua o en algún libro o tutorial pero que no
se deben utilizar ya que su función ha sido sustituida por propiedades de CSS.

En HTML también se puede incluir una imagen como fondo de ciertos

elementos, como, por ejemplo, como fondo de la propia página o de una tabla
pero este uso está totalmente desaconsejado y se debe realizar mediante CSS.
Para usar la etiqueta img no hay que saber mucho más, como ves, su uso es
muy sencillo. En este ejemplo, en el primer caso, se está incluyendo en la
página web una imagen en formato jpg que se encuentra en el mismo directorio
en el que se encuentra la página web, mientras que en el segundo caso, se
está incluyendo una imagen en formato png, que se encuentra en otro servidor
web. Es por ello, que se debe indicar la ruta completa de acceso a la imagen.
Sin embargo, al utilizar la etiqueta img, la primera pregunta que surge es: ¿qué
formatos gráficos se pueden emplear con la etiqueta img? En la documentación
oficial de Mozilla, en el apartado sobre la etiqueta img, podemos leer que el
lenguaje HTML no impone una lista de formatos gráficos que deban ser
soportados sino que depende del agente de usuario, es decir, del navegador.
En el caso de Mozilla se aceptan todos estos formatos, pero en la práctica los
que son considerados como el estándar, son los tres primeros, jpg, gif y png.
Vamos a ver a continuación las características principales de cada uno de
estos tres formatos.

El primero, el formato gif, es el más antiguo y el primero que se empleó en las

páginas web. Sus características más particulares son, que solo soporta
paletas de colores con 256 colores, permite transparencia pero de un solo color
y permite realizar animaciones sencillas. Como el formato gif sólo permite 256
colores se suele emplear una técnica llamada dithering que permite representar
una imagen como una fotografía con una variedad de colores prácticamente
infinita, mediante un número limitado de colores, en este caso, 256 colores.
Básicamente, esta técnica consiste en colocar dos puntos juntos con colores
diferentes para crear la ilusión de que existe un tercer color. Por ejemplo, en
esta imagen mediante la colocación de los puntos rojos y azules se logra la
ilusión de que el color que hay, es el violeta. El efecto final puede ser muy
sorprendente y puede engañar al ojo humano, pero hoy no es muy necesario
utilizar esta técnica, ya que existen otros formatos de imagen que permiten el
uso de millones de colores. Por ejemplo, aquí tenemos una fotografía de un
lindo gatito. Al ver un detalle de cerca no se aprecian cambios bruscos. La
siguiente imagen es la imagen inicial convertida a la paleta de 216 colores
seguros para la web, sin utilizar la técnica de dithering. Se pueden apreciar los
cambios bruscos y grandes zonas planas de un mismo color. En la siguiente
imagen se muestra la misma imagen con la misma paleta de colores pero, esta
vez, sí que se ha aplicado la técnica de dithering. Se observa que la mejora es
enorme respecto a la anterior. Finalmente, otra vez la misma imagen, pero esta
vez con una paleta de 256 colores optimizada. Al poder seleccionar los colores
de la paleta, la mejora es enorme y el parecido con la imagen original es
asombroso.

El formato jpg, es quizás el más popular en la web y ello es debido a que

permite trabajar con imágenes con más de 16 millones de colores y con
tamaños de ficheros muy pequeños. Esto se logra mediante el uso de
algoritmos de compresión con pérdidas. La compresión con pérdidas significa
que, una vez comprimida una imagen, al descomprimirla, no se obtendrá la
imagen original, sino una aproximación. Para entenderlo, veamos este ejemplo
real. Tenemos esta fotografía comprimida con el formato jpg, al 100% de
calidad la fotografía ocupa 492 kilobytes. Al 50% de calidad la fotografía ocupa
57 kilobytes y al 25 de calidad la fotografía ocupa, solo 34 kilobytes. A simple
vista, no se aprecian grandes diferencias entre estas tres fotografías, parece
que poseen la misma calidad, sin embargo, al aumentar un detalle de la
fotografía, se empiezan a ver los famosos artefactos que introduce el formato
jpg.

El último formato que vamos a ver es png. Este es un formato que se creó
específicamente para la web y ofrece una gran variedad de posibilidades. Si se
compara con el formato jpg, ofrece la máxima calidad ya que utiliza un formato
de compresión sin pérdidas, pero claro, esto es a costa de producir ficheros
con un tamaño superior al formato jpg.

Por último, vamos a ver los mapas de imagen. Los mapas de imagen también
se llamaban imágenes sensibles y son imágenes en las que se han definido
ciertas zonas llamadas activas, sensibles o calientes que son enlaces a otras
páginas. Los mapas de imagen se pueden procesar en el lado del cliente o en
el lado del servidor. En este vídeo nos vamos a centrar en los mapas del lado
del cliente, ya que son los más comunes en la actualidad.

Un mapa de imagen en el lado del cliente se define con dos etiquetas

de HTML. Con la etiqueta map se define el mapa de imagen con sus distintas
zonas activas. El mapa de imagen debe tener un nombre ya que ese nombre
se emplea en la etiqueta img, para relacionar el mapa de imagen con la imagen
correspondiente. En la etiqueta img que representa la imagen del mapa se
utiliza el atributo usemap para indicar el nombre del mapa que se quiere
utilizar.

Cada zona activa o sensible del mapa de imagen se define mediante una figura
geométrica y existen tres tipos de figuras geométricas que se pueden emplear.
Todas las zonas activas se definen con la etiqueta area que posee los atributos
shape (para indicar el tipo de figura geométrica), coords (para indicar las
coordenadas de la figura geométrica), href (para indicar la URL del destino del
enlace) y alt (para definir el texto alternativo, que representa la figura
geométrica en el caso de que no se pueda visualizar la imagen). Recuerda que
este atributo alt ayuda a mejorar la accesibilidad de la página web. El tipo de
figura geométrica rect define un rectángulo que está definido por las
coordenadas x e y de su esquina superior izquierda y las coordenadas x e y de
su esquina inferior derecha. En HTML, la esquina superior izquierda,
corresponde a la posición 0, 0. El tipo de figura circle define un círculo que está
definido por las coordenadas x e y del centro y el radio r. Finalmente, el tipo de
figura poly define un polígono regular o irregular de n lados definido por las
coordenadas x, y de los vértices que forman el polígono.

A continuación, te muestro un ejemplo completo extraído del sitio web

w3schools. La imagen que podemos ver representa una parte del sistema
solar. Sobre esta imagen se han definido tres zonas activas: el sol por medio
de un rectángulo, Mercurio mediante un círculo de radio tres píxeles y Venus
con otro círculo de radio ocho píxeles. Muy importante, fíjate que cuando se
indica el nombre del mapa en el atributo usemap de la etiqueta img, se debe
escribir al principio el símbolo almohadilla.

En este otro ejemplo, extraído de la especificación oficial de HTML5 se han

definido cuatro zonas activas en la imagen que se muestra. Un rectángulo rojo
con un hueco, un círculo verde, un triángulo azul y una estrella amarilla de
cuatro puntas. Las dos primeras figuras, se pueden definir con las figuras
geométricas básicas, el rectángulo y el círculo pero el triángulo y la estrella de
cuatro puntas se tienen que definir con el polígono. Fíjate otra vez como se ha
indicado el símbolo almohadilla antes del nombre del mapa en el atributo
usemap.
Por último, ya sabemos crear un mapa de imagen, pero, ¿para qué se usan en
las páginas web? Bueno, eso depende de tu imaginación. Tú le debes buscar
los posibles usos, pero para ayudarte un poco, te voy a contar tres usos típicos.
Por supuesto, se pueden utilizar para verdaderos mapas geográficos, por
ejemplo, para seleccionar las oficinas o tiendas de una empresa en una región
particular. También se emplean como método de navegación, cuando se utiliza
una barra de menú especial, por ejemplo, creada mediante iconos y, por último,
antes utilizaba bastante en la página principal o portada de un sitio web, en el
que se daba a conocer cada una de las secciones del sitio web por medio de
una imagen.

HTML: validación del código

El lenguaje HTML es un lenguaje y como tal, tiene su vocabulario, sus palabras

con sus significados y su gramática, sus reglas que nos indican cómo podemos
combinar sus palabras, para formar de estos complejos. Cuando escribimos en
español, podemos cometer faltas de ortografía, cuando hablamos, no se notan
mucho, además, también hay reglas gramaticales que debemos cumplir, como,
por ejemplo, la regla de concordancia de género y número, entre un sustantivo
y sus adjetivos o la concordancia del número, entre el sujeto y el verbo.

En HTML ocurre lo mismo, podemos cometer errores y estos errores pueden

afectar de forma dramática, a la visualización de la página.

¿Cómo podemos estar seguros de que nuestro código HTML es correcto y no

contiene errores? Muy fácil, mediante la validación del código fuente, pero
antes de ver cómo se valida el código fuente de una página web, debemos de
hacer memoria y recordar que el lenguaje HTML fue desarrollado por Tim
Berners-Lee en el año 1990 tomando como base SGML. Desde su nacimiento,
el lenguaje HTML ha ido cambiando, se han añadido y quitado etiquetas y
atributos y el funcionamiento de algunas etiquetas, ha ido cambiando con el
paso del tiempo. Te tendría que contar algo de la historia del lenguaje HTML,
para que lo entiendas mucho mejor, pero eso lo haré en otro vídeo.

Ahora solo nos interesa saber que existen diferentes versiones de HTML. En la
actualidad las tres versiones principales que conviven son HTML 4.0 1, XHTML
1.0 y HTML 5, aunque ya se empieza a hablar de HTML 5.1.

Lo primero que tienes que hacer cuando comienzas a escribir una nueva
página web es decidir qué versión de HTML vas a utilizar. La versión
de HTML que utilizas en una página web se indica con la instrucción doctype al
principio del código. Esto del doctype es junto con el juego de caracteres, uno
de los mayores misterios para mucha gente que lleva años y años haciendo
páginas web. Mucha gente no sabe para qué sirve el doctype, ni qué valor
debe poner. Prueba de ello, es este estudio en el que se analizaron 1788294
páginas web y se encontraron 13941 valores distintos de doctype. No existen
tantos doctypes oficiales, esto muestra que, en muchas ocasiones, la gente al
final acaba inventándose su propio doctype. Te estarás preguntando, ¿qué
valor de doctype debo usar en mis páginas web? Como te he dicho antes,
depende de la versión de HTML que estés utilizando. En varios sitios web,
como esta página del W3C, puedes encontrar una lista con las declaraciones
de doctype recomendadas. Si utilizas la versión 4 de HTML, debes utilizar este
doctype. Si te inclinas por XHTML, debes utilizar este otro doctype y por último
en HTML 5, te lo han puesto bien fácil, no deberías tener problemas para
recordar este doctype. ¿Y qué son esos 3 doctypes que aparecen en la versión
de HTML 4.0 1 y en XHTML 1.0? Esos, son variantes que existen dentro de
una misma versión y para una nueva página web, te debes olvidar de ellas,
debes usar la variante estricta. Las otras variantes la transicional y la de
marcos, frameset, son necesarias cuando estás realizando la migración de un
sitio web con una versión antigua de HTML, a una versión moderna y necesitas
conservar ciertas características desaconsejadas. Recuerda que el doctype
debe ser la primera línea de tu código HTML.

¿Y cómo realizó la validación del código fuente? Existen varias herramientas

gratuitas disponibles online, aunque también existen otras herramientas más
sofisticadas de pago. Mi favorita, es la herramienta oficial que ofrece el Word
Wide Web Consortium, el W3C, el organismo internacional que vela por el
correcto desarrollo de la web. Su servicio de validación es muy sencillo de
utilizar y te permite validar una página web, introduciendo su URL, si la página
está publicada en la web, también puedes subir el fichero con el código fuente
y por último también puedes copiar directamente el código fuente. Sin
embargo, este no es el único servicio de este estilo y otros que te recomiendo
son el validador, del Web Design Group y el validator.nu, que ofrece algunas
opciones muy interesantes.

Y, ¿es muy importante esto de la validación? ¿Qué pasa si no validó mis

páginas web? Pues bien, sencillo, en muchas ocasiones, que una página web
se visualice de distinta forma en distintos navegadores, se debe a que la
página web contiene errores. Eso te lo explico en otro vídeo HTML5, por qué es
importante escribir código correcto que está dividido en tres partes y que te
aconsejo que veas para entenderlo y estar convencido de la importancia de la
validación.

Para terminar, te voy a hacer una demostración de validación, vamos a validar

la página principal del sitio web de este curso, de la Universidad de Alicante, el
sitio web, del sitio donde trabajo y de la Moncloa, el gobierno de mi país.

Esta es la página principal del servicio de validación del lenguaje de marcado

del W3C. Como vamos a validar tres páginas que están publicadas en Internet,
voy a usar la primera pestaña, que me permite introducir la dirección, la URL de
la página web que quiero validar. Introduzco la dirección del sitio web de este
curso, idesweb.es, y le doy al botón Check, Comprobar, Validar. Cuando me
sale aquí este mensaje en color verde, significa que la validación ha sido
correcta. En algunas situaciones me puede aparecer alguna advertencia, como
en este caso, que me dice que hay un warning, pero este warning se debe a
que la página está realizada con HTML 5 y el validador me avisa de que estoy
usando características experimentales ya que HTML5 por ahora, no es una
recomendación oficial, así que hay cosas que pueden cambiar.
Volvemos a la página principal del validador y ahora, voy a validar la página
principal de la Universidad de Alicante, introduzco su URL y le vuelvo a dar al
botón Check. Fijaros que no estoy activando ninguna de estas opciones
adicionales para una validación simple, no las necesito. Le doy al botón de
Validar espero unos segundos y ¡tachan! Problemas, se me indica que se han
encontrado algunos errores mientras se validaba este documento que tiene la
versión HTML 5 y en concreto, se han encontrado seis errores y dos
advertencias. Para ver los errores, desplazo la página hacia abajo y me
aparece el Informe de errores, me aparece la línea, la columna y el mensaje de
error y un fragmento del código, dónde está el error. Estos mensajes de error
me ayudan a localizar mis errores en mi código y a resolverlos.

Un consejo muy importante: nunca comenzar a resolver, a solucionar los

errores por el último, eso es un error. Hay que ir siempre al primer error, ya
que, en muchas situaciones al corregir el primer error, desaparece en el resto
de errores.

Por último, vamos a validar la última página web, que es la de la Moncloa,

www.lamoncloa.gob.es. Le damos a Validar y esperamos, esperamos, ¡tachan!
Yambién contiene errores y 38 errores. A continuación pues nos sale el listado
con los 38 errores que se han detectado. Como he explicado antes, hay que
corregir los errores desde el principio, desde el primero y al corregir un único
error, podrían desaparecer todos los de la página, es decir, que en esta página,
realmente, quizás haya menos de 38 errores. Podemos ver que el primer error
se debe a que aquí hay un valor del atributo id que ya ha sido definido. La
especificación de HTML nos indica que el valor del atributo id debe ser único en
la página web y eso nos indica justo debajo, la otra línea del código donde ya
se ha definido ese atributo id.

Como has podido ver, validar una página web se hace en pocos segundos, así
que no tienes excusa para no hacerlo.

HTML5: introducción

En el vídeo "Historia de HTML" te explique la evolución del lenguaje de

marcado o etiquetado HTML, el lenguaje con el que se crean las páginas web,
desde que Tim Berners-Lee creó la primera página web a finales de 1990 en el
CERN. Recuerda que después de HTML 4, el W3C, el organismo que
desarrolla los estándares de la web, inició el desarrollo de XHTML, sin
embargo, unos años después, el W3C canceló el desarrollo de XHTML y se
unió a un grupo independiente de desarrolladores web, con el objetivo de
desarrollar HTML 5. Mucha gente tiene una gran confusión con HTML5, se
piensa que es algo totalmente distinto a HTML 4 y XHTML y no es así.

Fijémonos en este gráfico, cada rectángulo representa una etiqueta

de HTML 4, en HTML 5 algunas de las etiquetas han desaparecido, porque se
han quedado viejas y ya no se deben emplear. Otras etiquetas han variado un
poco su funcionamiento o incluyen atributos nuevos y por último, se han
añadido etiquetas y atributos nuevos pero, como podemos ver, la mayor parte
de HTML5, sigue siendo lo mismo que ya existía en HTML 4.
Por ejemplo, si consultamos una referencia de las etiquetas de HTML 5, como
esta, que existe en w3schools, veremos que hay etiquetas como frame a
frameset o no frames que aparecen marcadas como no soportadas en HTML 5.
Ya no se deben de emplear. También hay etiquetas como header, keygen,
main, mark, menu, item, meter, enough, que aparecen marcadas como
etiquetas nuevas de HTML5.

Para empezar a aprender HTML5, puedes consultar documentación sobre

HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene
conocerlas todas y las diferencias que hay entre unas y otras porque ahí fuera
en Internet te vas a encontrar de todo.

Para ser un buen profesional del desarrollo web necesitas conocer las tres
versiones. De todo ello te hablo en el vídeo "¿Cuál es el mejor HTML,
XHTML, HTML 5?" Una vez que ya conozcas las versiones anteriores
de HTML, ya puedes pasar a aprender HTML 5. Existen muy buenos recursos
para ello, el primero que te recomiendo es Dive Into HTML5 de Mark Pilgrim.
Este sitio web se comenzó a desarrollar en el año 2009 y no se actualiza desde
el 2011 pero, en HTML 5 Doctor, existe una copia que sí que se intenta
actualizar con las últimas novedades del lenguaje. También te recomiendo que
consultes el sitio web w3schools, que contiene tanto un tutorial como una
referencia de todas las etiquetas de HTML5.

HTML5: ¿Qué es HTML5?

Hoy en día todo el mundo conoce las 3 www, la World Wide Web, la web, el
invento que más ha cambiado nuestras vidas en los últimos 15 años. La web es
un sistema de distribución de información basado en hipertexto e hipermedia
accesible a través de Internet. Un elemento esencial de la web es HTML, el
lenguaje de marcado que se emplea para crear las páginas web.

HTML permite describir la estructura y el contenido de una página web,

principalmente texto, aunque también permite incluir otros objetos como
imágenes y vídeos.

HTML5 es la quinta y última versión, por ahora, del lenguaje de

etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es
sólo eso, es algo más. HTML es un estándar de facto desarrollado por el World
Wide Web Consortium, un consorcio internacional que produce
recomendaciones para la World Wide Web. El desarrollo del lenguaje de
marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium que
fue fundado en 1994. Desde la publicación de la primera página web, en
diciembre de 1990, el lenguaje HTML ha ido mejorando con nuevas versiones.
En noviembre de 1995, se publicó HTML 2.0, en enero de 1997, HTML 3.2, en
diciembre de 1997, apareció HTML 4 y en enero de 2000, se publicó XHTML
1.0, una reformulación de HTML 4, utilizando XML. Finalmente, a mediados de
2007, el World Wide Web Consortium, comenzó a trabajar en HTML5, versión
que está actualmente en desarrollo y que se espera que se termine en 2014.
Pero, las páginas web no se desarrollan solamente con el lenguaje de
marcado HTML, también se emplean otras tecnologías, como las hojas de
estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado
JavaScript.

El uso combinado de estas cuatro tecnologías se conoce como DHTML,

el HTML dinámico, que permite crear sitios web interactivos. Además
del HTML dinámico, existen otras tecnologías, como el lápiz de programación
XHR, XML http request, el meta lenguaje XML y el formato de intercambio de
datos JSON. Todo ello se conoce como AJAX, una técnica de desarrollo web
que permite crear aplicaciones interactivas que se ejecutan en el navegador.

Desde hace un par de años, a AJAX, se le han unido una serie de nuevas
tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen
varias alternativas que realizan la misma función. A todas ellas se las conoce
como HTML5, aunque lo más correcto sería llamarlas La familia de tecnologías
HTML5. Veamos que nos ofrece cada una de ellas.

HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis,

sintaxis de HTML y sintaxis de XHTML. El lenguaje de marcado HTML5 define
nuevas etiquetas y atributos que añaden una mayor capacidad semántica al
lenguaje. Una de las nuevas tecnologías de la familia HTML5 es el canvas, que
tiene asociada una nueva etiqueta HTML. El canvas o lienzo, permite definir un
área dentro de una página web en la que se puede dibujar mediante un API
para JavaScript. Las posibilidades que ofrece esta tecnología son enormes, por
ejemplo, permite el desarrollo de juegos online (ya no es necesario el uso de
flash), o permite crear aplicaciones de dibujo como ésta que vemos en esta
imagen.

Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en

XML, que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos
utilizando un lenguaje similar a HTML.

Otra de las tecnologías de la familia HTML5, es el API de geolocalización para

JavaScript que permite obtener la localización del usuario, siempre que el
dispositivo que utilice ofrezca esa información y siempre que el usuario lo
permita.

La tecnología de caché permite indicar aquellos recursos de una página web o

de una aplicación web que se desea que se almacenen de forma local. De esta
forma, se mejora el rendimiento y, además, permite descargar todos los
contenidos necesarios y trabajar en local. Mientras que la tecnología de base
de datos es un API que ofrece la posibilidad de almacenar información en local
en el navegador, mediante una base de datos SQL Light. Con esta tecnología
se pueden realizar aplicaciones como ésta, donde el usuario puede crear notas
persistentes que conservan la posición y la información aunque se abandone la
página web.

Por último, los web workers, es otra API para JavaScript que permite crear
múltiples hilos de ejecución que se ejecutan en paralelo.
Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día?
Es difícil responder esta pregunta porque existen múltiples navegadores con
múltiples versiones cada uno con un nivel de soporte diferente. Pero hay
algunos sitios web que nos pueden ayudar, por ejemplo, el sitio web When can
I use, ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras
características en diferentes navegadores y diferentes plataformas. El sitio web
findmebyIP ofrece los niveles de compatibilidad de diferentes navegadores en
Windows y Macintosh. Este mismo sitio web también nos permite conocer el
nivel de compatibilidad de nuestro navegador ya que lo detecta
automáticamente y nos muestra las características de HTML5 que admite. El
sitio web The HTML5 test también permite conocer el nivel de soporte de
nuestro navegador y de otros navegadores. Se diferencia de los anteriores
porque ofrece una puntuación, lo cual hace que las comparaciones entre
navegadores sea mucho más sencilla. Por último, si quieres aprender más
cosas sobre HTML5, te recomiendo el sitio web HTML5 Rocks, desarrollado
por Google. En él encontrarás numerosos ejemplos y tutoriales que te
mostrarán las fantásticas posibilidades de HTML5.

HTML5: de HTML4 a HTML5

En las versiones anteriores de HTML existían dos enfermedades terribles: la

spanmanía y la divitis. Estas enfermedades pueden seguir existiendo en
HTML5 así que presta mucha atención a este vídeo, ya que te voy a explicar
cómo las puedes evitar. En la web, se pueden encontrar varios artículos que
explican los síntomas de estas dos enfermedades y sus posibles curas. Incluso
en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y
div en el que se comenta el abuso en el uso de estas dos etiquetas. Respecto
al abuso en el uso de la etiqueta span, la spanmanía, es muy común encontrar
situaciones como ésta, o incluso a veces he visto barbaridades como esta otra
en la que se emplea un span para envolver todo el contenido de una página
web. Estos dos errores se arreglan fácilmente ya que se pueden emplear las
etiquetas que ya existen en el código, y en muchos casos, no hace falta añadir
la etiqueta span.

Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como

ésta, en la que se anida un div dentro de otro div y de otro div, y así varias
veces. Hay páginas web en las que se pueden encontrar verdaderas
barbaridades, como la página principal de un famoso diario deportivo, que tiene
más de mil etiquetas div.

En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de

las etiquetas span y div. Vamos a ver a continuación cómo se tienen que usar
estas etiquetas para estructurar correctamente una página web con HTML5.

Esta imagen muestra la estructura típica de una página web escrita con las
versiones anteriores de HTML. Esta página contiene, una cabecera, una barra
o menú de navegación, un panel con información adicional, como, por ejemplo,
noticias, la zona de contenido principal, formada por dos entradas o artículos,
una imagen, en una de las entradas y un pie de página.
Con HTML5 todas estas etiquetas div se sustituyen por nuevas etiquetas
específicas para definir regiones especiales que tienen las páginas web. La
cabecera se etiqueta con header, la barra o menú de navegación con nav, un
panel con información adicional con aside, la zona de contenido principal con
main, las entradas o artículos con article, una imagen con figure y el pie de
página con footer.

En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para
una región de una página web. Esta imagen extraída de HTML5 Doctor es un
diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál en la
etiqueta más adecuada según la función que realiza la región que se quiere
etiquetar, dentro de la página web.

A continuación, vamos a ver parte por parte cómo se transforma una página
web de una versión antigua de HTML a HTML5.

En primer lugar, vamos a ver el código HTML de la cabecera. Este es el típico

código de una cabecera de una página web, un div y un h1. En realidad, en
muchos casos, simplemente es necesario el h1, pero si por alguna razón es
necesario utilizar un div para definir algunas características de la presentación
del encabezado, es mejor utilizar la nueva etiqueta header.

Ahora la barra o menú de navegación del sitio web. Una barra o menú de
navegación es un conjunto de enlaces, por tanto, se debe etiquetar como una
lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista, se debe
cambiar por la etiqueta nav, en HTML5. Un panel con información adicional
contiene información que complementa la información principal y que no es
esencial, por ejemplo, un panel de este tipo puede ser una región con noticias o
anuncios. Para este tipo de contenido se debe emplear la etiqueta aside, en
HTML5.

Vamos a ver a continuación, cómo etiquetar la zona de contenido principal que

está formada en este ejemplo, por una serie de entradas o artículos. La zona
de contenido principal, que agrupa todas las entradas, se puede etiquetar con
main y cada una de las entradas o artículos con la etiqueta article.

Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen,

no existe ninguna relación entre una imagen y su título, sin embargo, en
HTML5, esto está resuelto, ya que existe la etiqueta figure y la etiqueta
figcaption que permite definir el título de una figura. Muy importante, la etiqueta
figure, no sólo se emplea para etiquetar una imagen, también puede etiquetar
otras cosas como un fragmento de código o una cita.

Por último, el pie de página. En el pie de una página web suele aparecer el
correo de contacto, el aviso legal, la información de copyright o información
similar. En HTML5 se debe emplear la etiqueta footer para etiquetar este
contenido. Como ves, transformar una página web de HTML antigua a HTML5
es muy sencillo, simplemente, hay que aprender a utilizar la etiqueta adecuada
para cada región de una página web.
HTML5: Nuevas funcionalidades en formularios (parte 1

Hola a todos, mi nombre es Mar Martínez soy experta en e-learning y estándares web y
trabajo en la Oficina para la Armonización del Mercado Interior. En el siguiente vídeo os
voy a presentar algunas de las nuevas funcionalidades que HTML5 incorpora para la
gestión de formularios.

Antes de comenzar, deciros que podéis contactar conmigo la dirección de correo

mmar.martínez.carrascosa@gmail.com, además mi cuenta de Twitter, relacionada con el
tema, es @mar_martinez_c.

Una de las características más importantes que nos trae nuevo estándar HTML5 son los
nuevos elementos disponibles para el manejo de formularios ya que nos permite
gestionarlos de manera nativa y, por tanto, se puede prescindir de JavaScript para realizar
algunas validaciones de formulario del lado del cliente.

El disponer de controles avanzados nativos facilita mucho el trabajo del desarrollador

porque no se tiene que preocupar por problemas de compatibilidad entre distintos
navegadores. Además, esto supone un ahorro de tiempo y de ancho de banda, ya que, por
un lado, permite que el formulario no se ha enviado, si no es válido y, por otro lado,
permite informar al usuario de que alguno de los valores introducidos no cumple los
requisitos definidos.

Para los usuarios, los formularios tienen ahora un comportamiento mucho más intuitivo,
donde, por ejemplo, se pueden mostrar pistas sobre lo que se debe introducir en los
campos de entrada. Se puede mostrar un calendario interactivo al usuario, para rellenar un
campo de fecha o, incluso, se puede seleccionar un color desde una paleta de colores.

En la siguiente tabla extraída de la página web del W3C podemos ver la lista de estados
disponibles para el atributo type, en HTML5.

En esta primera parte del videotutorial vamos a centrarnos en algunos de los nuevos
estados del atributo type, del elemento input. Al final del vídeo, además, veremos
brevemente cómo los dispositivos móviles están mejorando su usabilidad para adaptarse a
las necesidades del usuario modificando la apariencia de su teclado táctil dependiendo del
tipo de datos que el usuario tenga que rellenar.

En la segunda parte del videotutorial, lo que veremos son algunos de los nuevos atributos
de contenido que introduce HTML5 y, además, hablaremos, brevemente, de Modernizr y
de los Polyfills.

Aquí podéis ver una tabla con todos los nuevos valores para input type que vamos a
analizar en este primer videotutorial, url, tel, email, number, color, search, range, datetime,
datetime-local, date, month, week y time. En cuanto al tipo de input url, como se puede
deducir, se usa en aquellos campos que deben contener una dirección web. El valor del
campo url, es automáticamente validado, cuando el formulario es enviado. En el ejemplo
podemos ver como el sistema informa al usuario de que la url introducida no tiene un
formato correcto.

El tipo de input tel se usa para definir campos en los que se debe introducir un número de
teléfono. Dada la variedad de formatos que existe en todo el mundo para los números de
teléfono, este tipo no impone una sintaxis o patrón determinado, así que, para validarlo
como un formato numérico en particular, se debe complementar con pattern, un atributo de
contenido que veremos en detalle en la segunda parte del videotutorial y que se basa en
expresiones regulares. En el ejemplo, podemos ver como el sistema informa al usuario del
error cometido al introducir el número de teléfono. Cabe destacar que este tipo puede ser
útil para el caso de teléfonos móviles porque se puede crear un autocompletado con el
número de teléfono en cuestión e incluso, se puede mostrar la agenda del teléfono móvil
para seleccionar un número almacenado.

El tipo de input email se usa para definir campos en los que se deba introducir una
dirección de correo electrónica válida, en el ejemplo, podemos ver como el sistema informa
al usuario de que la dirección de correo electrónica introducida no tiene un formato
correcto.

El tipo de input number se usa para definir campos en los que se deba introducir un valor
numérico. Este campo puede contener atributos que permitan realizar restricciones sobre
el número, como por ejemplo, definiendo un valor mínimo o máximo mediante los atributos
min y max de los que hablaremos en la segunda parte del vídeo tutorial o asignándole un
valor específico por defecto mediante el atributo value. En el ejemplo, podemos observar
que, al asignarle un valor por defecto este aparece automáticamente al mostrarse el
campo.

El tipo de input color se usa para definir campos en los que el usuario puede seleccionar
un color desde una paleta de colores. Le hemos asignado un color azul marino desde base
mediante el código hexadecimal aunque, si no se define un valor, por defecto adquiere el
color negro.

El tipo de input search se usa para definir campos de búsqueda en formato de texto
adquiriendo un aspecto gráfico más adecuado a su función. Como se puede observar en el
ejemplo, al introducir texto en este campo, el navegador muestra una cruz a la derecha
que permite al usuario borrar todo lo escrito hasta el momento.

El tipo de input range se usa para definir campos que deban contener un valor numérico
que esté dentro de un rango específico, rango que definimos con los atributos min y max,
de los quedaremos en la segunda parte del videotutorial. También podemos usar otros
atributos como, por ejemplo, value, para darle un valor por defecto o el atributo step, del
que también hablaremos en la segunda parte del videotutorial y que sirve para definir los
intervalos en los que puede variar el valor.

El tipo de input datetime permite al usuario seleccionar la hora completa además del día,
mes, año y zona horaria.

El tipo de input datetime-local permite al usuario seleccionar la hora completa más el día,
mes y año, pero, en este caso, a diferencia del anterior, no se incluye la zona horaria. Si la
zona horaria no es importante para tu aplicación, usa este tipo datetime-local, en lugar de
datetime.

El tipo de input date permite al usuario seleccionar una fecha completa formada por día,
mes y año.

El tipo de input month permite al usuario seleccionar un mes y un año específico.

El tipo de input week permite al usuario seleccionar una semana y un año específico.

El tipo de input time permite al usuario seleccionar la hora en formato de horas y minutos.

Hasta ahora hemos tenido en cuenta los navegadores web desde el punto de vista de un
ordenador de sobremesa o de un portátil. A continuación, vamos a ver las mejoras de
usabilidad que introducen los tipos de input tel, email y url cuando lo que estamos usando
es un dispositivo con pantalla táctil.

Dentro de un formulario, cuando el foco se sitúa en un campo de tipo tel, las pantallas
táctiles cambiarán su formato por defecto y se utilizarán para la introducción de un número
de teléfono mostrando un teclado numérico.

Cuando el foco se sitúa en un campo de tipo email, las pantallas táctiles se optimizarán
para la introducción de un campo de texto. En este caso, iPhone va más allá, ya que el
teclado incorpora la tecla de acceso directo de @. En el caso de Android, se usa el tipo de
entrada de texto que existe por defecto.

Por último, cuando el foco se sitúa en un campo de tipo url, las pantallas táctiles cambiarán
y se optimizarán para la introducción de un campo de texto pero, en este caso, como
ocurría en el anterior, iPhone va más allá e incorpora las teclas de acceso directo de barra
inclinada y de .com. En el caso de Android, para url se usa el tipo de entrada de texto que
existe por defecto.

En resumen, los dispositivos móviles están incorporando mejoras muy interesantes de

usabilidad para el usuario, adaptándose en la medida de lo posible a sus necesidades,
ahorrándoles así trabajo y tiempo.

Espero que toda esta información te sea útil. Muchas gracias por tu atención y hasta
pronto.
 OCULTAR

Aspectos clave
Debes ver el vídeo HTML5: Nuevas funcionalidades en formularios (parte 1) en el que se
presentan los nuevos controles de HTML5:

 url.
 tel.
 email.
 number.
 color.
 search.
 range.
 datetime.
 datetime-local.
 date.
 month.
 week.
 time.

También se discute el soporte por parte de los navegadores y se muestra la

representación de algunos controles en dispositivos móviles.