14

Preparndonos para HTML5

Expectativa
Saber en qu consiste un documento HTML.
Conocer el nivel de soporte que brinda a HTML5 un navegador.
Crear sus primeros documentos bajo la nueva especificacin HTML5.

Despus de estudiar este captulo, el lector ser capaz de:

x
x
x
x

Conocer las capacidades HTML5 de un navegador.

Crear la estructura bsica de un documento HTML5.
Crear sus primeros documentos HTML5.
Implementar las etiquetas para prrafos y saltos de lnea.

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Alfaomega

Preparndonos para HTML5

15

INTRODUCCIN
En mi opinin la mejor forma de aprender es haciendo, y de esta manera se
trabajar a lo largo de este libro, se utilizar el editor de texto ms simple que
ofrezca su sistema operativo (Bloc de notas en el caso de Windows) para crear y
modificar archivos, para posteriormente visualizar sus resultados en un navegador.
Nota
Algunos lectores con cierta experiencia, se preguntarn por qu usar el Bloc
de notas o su equivalente si hay mejores y ms sofisticados editores para
programar HTML, la respuesta es que mientras ms sencillo sea el editor,
menos ayuda ofrece y mientras menos ayuda se tenga del editor de texto,
ser necesario escribir mayor cantidad de cdigo, y por lo tanto se ayuda a
recordar mejor las etiquetas HTML. Si el lector toma este consejo, a la larga
no se arrepentir.

2.1 Eligiendo un navegador

Como se ha mencionado, el estndar HTML5 no ha sido aceptado oficialmente, por
lo que el lector tiene que asegurarse de utilizar un navegador que soporte la
mayora de sus caractersticas.
Nota
No existe an un navegador que soporte absolutamente todas las caractersticas de HTML5, cada fabricante ha intentado aadir las propias
especificaciones y caractersticas para darle ventaja a su navegador.
Despus de esto se preguntar si vale la pena aprender HTML5.
Por supuesto que s!

Fig. 2.1 HTML5 en distintos navegadores.

Los grandes han aprobado la mayor parte de las ideas del estndar. Microsoft,
Google, Apple, Mozilla Foundation han anunciado su soporte para HTML5 y las
ideas ms importantes ya estn disponibles en las versiones ms recientes de sus
navegadores y estn alentando a usuarios y desarrolladores para usar HTML5.

Alfaomega

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

16

Preparndonos para HTML5

HTML5 genera mejores hbitos de codificacin. La separacin de cdigo de

presentacin y de estructura es ms adecuada en el desarrollo de programacin
actual, adems de obligar a usar un cdigo ms consistente al no ser tan permisivo.
En el momento de escribir estas lneas, Google Chrome 12, Microsoft Internet
Explorer 9, Firefox 5, Opera 11 y Apple Safari 5 dicen soportar HTML5, pero en
realidad soportan muchas caractersticas comunes del estndar, pero otras son
soportadas por un navegador y por otro no. Hay algunas tcnicas para detectar el
soporte HTML5 de un navegador, pero son tan vertiginosas las mejoras en los
navegadores para HTML5 que hacen extremadamente difcil mantener la pista de lo
que est pasando, actualizaciones o nuevas versiones de los navegadores estn
disponibles todo el tiempo. Por esta razn el autor ha hecho una pgina para
ayudarle a ver qu elementos HTML5 son soportados por su navegador.

Fig. 2.2 Aspecto de la pgina del detector de caractersticas HTML.

Apoyo en la

En esta pgina el autor utiliz la librera JavaScript Modernizr

para detectar las caractersticas disponibles en su navegador.
En los materiales adicionales encontrar los archivos:
detector.html y modernizr-2.0.js

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Alfaomega

Preparndonos para HTML5

17

El navegador que le convenga ser aquel que cubra con los elementos que
desea utilizar, en este libro se utilizar Google Chrome, porque al momento de
escribir ests lneas es el navegador que mayor soporte tiene para HTML5 y es el
ms rpido ejecutndolo, esto puede cambiar en cualquier momento, estamos en
medio de una guerra de navegadores y algn otro puede tomar el liderazgo.
Si desea utilizar un navegador diferente a Chrome, sintase con la libertad de
hacerlo, nicamente asegrese de utilizar la herramienta de deteccin, existe la
posibilidad de que algn ejemplo no funcione en otro navegador.

2.2 Tipo de documento

Hasta los rebeldes ms osados y las personas ms aventureras, en algn momento
se dieron cuenta de que para lograr ciertos objetivos necesitaban un plan o estrategia, llegar a acuerdos e incluso crear reglas para lograr tal objetivo, de lo contrario
simplemente no podan alcanzar lo que buscaban.
La programacin en general y por ende el HTML, no es la excepcin a la necesidad de orden. Usted puede lograr ser enormemente creativo cuando hace
contenido Web, pero debe de seguir cierta estructura para que sus pginas puedan
ser interpretadas correctamente por un navegador.
2.2.1 Etiqueta <!DOCTYPE html>
El fijar un estndar siempre ha sido un problema, y una larga cadena de tensin e
inconvenientes ha rodeado al HTML como estndar a lo largo de su implementacin
entre navegadores, como solucin a uno de estos problemas surgi la etiqueta
DOCTYPE, que en HTML5 se observa de esta manera:
<!DOCTYPE html>

Con esta etiqueta se pueden establecer hasta hoy 15 modos de estndar

diferentes, pero la expuesta es la ms corta, amena y simple que proporciona
HTML5 (Standard Mode). DOCTYPE siempre debe escribirse al principio del
documento, en maysculas y con un signo de exclamacin al comienzo.
Si el navegador encuentra <!DOCTYPE html> asumir que est utilizando
HTML5 y usar el Standard Mode, pero de no hacerlo el navegador interpretar que
hay algo peculiar en el documento y utilizar el modo llamado Quirk Mode, incluso si
slo hay un simple espacio antes de la etiqueta.
No deseo abrumar al lector novel con todo este asunto de los diferentes
modos de DOCTYPE, porque en realidad estas distinciones son fruto de aquellos
tempranos das en el desarrollo de antiguas versiones del HTML y de antiguas
versiones de navegadores en los distintos sistemas operativos. Para efectos
prcticos, en HTML5 se puede decir que <!DOCTYPE html> es la manera en que
se asegura al navegador que en su pgina no habr nada ms que cdigo HTML5.

Alfaomega

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA