1. Objetivos

• Aprender el lenguaje de marcado HTML y la importancia de escribir código correcto y conforme a la especificación oficial.
• Conocer algunas herramientas que ayudan a escribir código HTML correcto y compatible con distintos navegadores.

2. Recursos

¿Qué etiquetas existen en HTML? ¿Qué atributos existen y qué valores pueden tomar? ¿Cómo se emplean las etiquetas?

• W3Schools¹: cursos de aprendizaje y guías de referencia de diversas tecnologías empleadas en la programación web.
• W3C²: organismo internacional que desarrolla las especificaciones de las principales tecnologías que se emplean en la programación web.
• XHTML Cheat Sheet ³: resumen en una sola página de lo más importante de XHTML.
• HTML Cheat Sheet ⁴: resumen en una sola cara de lo más importante de (X)HTML.
• HTML5 Cheat Sheet ⁵: resumen de HTML5 de la famosa revista Smashing Magazine. Es del año 2009, así que seguramente faltan algunas de las últimas novedades.
• HTML Tags⁶: resumen de las etiquetas con sus atributos y posibles valores.

¿Cómo puedo saber que el código HTML que he escrito es correcto?

• W3C Markup Validation Service⁷: servicio de validación para diferentes lenguajes de marcado (HTML, XHTML, SVG, y otros).
• Html Validator⁸: complemento para Mozilla Firefox que permite comprobar el número de errores que posee una página web que se visualiza.
• WDG HTML Validator⁹: herramienta de validación de XHTML que permite validar múltiples páginas web (hasta un máximo de 100) a partir de una dirección.

¿Cómo puedo comprobar que la página web se visualiza correctamente en diferentes navegadores?

• Browsershots¹⁰: permite comprobar cómo se visualiza una página web en decenas de navegadores y en distintos sistemas operativos.
• Total Validator Service¹¹: ofrece diversos servicios, como buscar enlaces rotos o comprobar el nivel de accesibilidad. También ofrece la posibilidad de generar una captura de pantalla de cómo se visualiza en distintos navegadores.
• BrowserCam¹²: permite comprobar la compatibilidad de una página web con diferentes navegadores (incluso con navegadores de PDA y teléfonos móviles). Es un servicio de pago.

¿Existe alguna herramienta que me pueda ayudar a escribir el código HTML?

• Notepad++¹³: editor gratuito de código fuente que soporta varios lenguajes de programación. Entre otras características, posee sintaxis coloreada, envoltura de sintaxis y autocompletado.
• Sublime Text¹⁴: excelente editor compatible con múltiples lenguajes de programación y disponible para Windows, OS X y Linux; se puede probar de forma gratuita, pero para un uso continuo hay que adquirir una licencia.
• Real-time HTML Editor¹⁵: editor WYSIWYG de HTML en página web.
• Online-HTML-Editor.org¹⁶: editor WYSIWYG de HTML en página web que permite abrir y guardar una página web.
• HTML Tidy¹⁷: limpia y organiza el código HTML. También se puede descargar el ejecutable y el código fuente para ejecutarlo en local.

3. ¿Qué tengo que hacer?

En esta práctica vamos a empezar el desarrollo de un sitio web de gestión de álbumes de fotos llamado “PI - Pictures & Images”. Con cada práctica el sitio web crecerá tanto en número de páginas como en funcionalidad.

El objetivo es crear un sistema gestor de álbumes de fotos que admita múltiples usuarios. Un usuario se tendrá que registrar para poder emplear el sistema. Una vez registrado podrá crear todos los álbumes que quiera y en cada álbum podrá publicar todas las fotos que quiera.

En esta práctica tienes que crear un sitio web compuesto de cinco páginas web; en la Figura 1 se incluye un diagrama que resume las páginas que se tienen que crear y las relaciones que existen entre ellas:

Página principal

Contiene enlaces a las distintas páginas que componen el sitio web, un formulario (nombre de usuario y contraseña) para acceder como usuario registrado y un listado con un resumen (foto, título, fecha, país) de las últimas cinco fotos que se han introducido.

Página con el formulario de registro como nuevo usuario

Contiene un formulario con los datos necesarios para registrarse (nombre de usuario, contraseña, repetir contraseña, dirección de email, sexo, fecha de nacimiento, ciudad y país de residencia, foto).

Página con el formulario de búsqueda

Contiene un formulario para realizar una búsqueda de fotos con los siguientes criterios: título, fecha y país.

Página con el listado resultado de una búsqueda

Contiene un listado con un resumen (foto, título, fecha y país) de las fotos que cumplen los criterios de una búsqueda.

Página detalle foto

Muestra toda la información sobre una foto seleccionada en la página anterior (foto, título, fecha, país, álbum de fotos y usuario al que pertenece).

Por ahora, estas páginas contienen datos estáticos que en prácticas posteriores se sustituirán por datos reales obtenidos de una base de datos. El modelo de datos que se debe emplear se presentará en una próxima práctica.

Muy importante: en esta práctica no te tienes que preocupar por la presentación visual de las páginas web. Las presentación visual la definirás en las próximas prácticas con la tecnología CSS.

4. ¿Cómo lo hago?

Antes de ponerte a escribir el código HTML, realiza un diagrama de las páginas web que componen tu sitio web. Este diagrama puede tener tanto detalle como tú quieras, pero hay que encontrar un equilibrio entre utilidad y legibilidad: un diagrama muy simple y con poco contenido será poco útil, mientras que un diagrama muy complejo y con mucha información será difícil de entender y no supondrá una ayuda.

Crea una página web “esqueleto” a partir de la cual puedas crear todas las páginas de tu sitio web. En esta página incluye todos los elementos que se repitan en todas las páginas (cabecera y pie de página, barra de navegación). Asegúrate que el código de esta página web es correcto.

En la actualidad existen diferentes versiones de HTML: HTML 4.01, XHTML 1.0 y HTML5. Para realizar la práctica puedes utilizar XHTML 1.0 Strict o HTML5.

5. Recomendaciones

El objetivo de la asignatura es construir una aplicación web mediante el desarrollo de un prototipo que se irá refinando y ampliando en las diferentes prácticas. Antes de ponerte delante del ordenador a escribir páginas web puedes hacer (y es muy recomendable) un mockup (modelo a escala, maqueta) de cómo piensas que será el sitio web. Un mockup lo puedes hacer en papel, con una herramienta de diseño gráfico o con el mismo Microsoft PowerPoint.

El lenguaje HTML es muy sencillo de emplear: no es un lenguaje de programación, como mucha gente cree, sino un lenguaje de marcado compuesto de etiquetas (o elementos) que pueden contener atributos que poseen un valor. Las etiquetas no se pueden escribir de cualquier forma, sino que existen una serie de reglas que definen un orden entre las etiquetas.

Si escribes mal el código HTML, normalmente la página web se visualizará más o menos bien en la mayoría de los navegadores porque están preparados para admitir errores, pero en algunos casos la presentación de la página puede variar enormemente de un navegador a otro. Por tanto, para asegurar que una página web se visualiza correctamente en la mayoría de los navegadores es imprescindible escribir un código correcto.

Cumplir los estándares cada vez tiene más importancia. El sitio W3C Sites¹⁸ recopila miles de sitios web que cumplen las recomendaciones del W3C. ¿Por qué son importantes los estándares? Algunas lecturas que te lo explican:

• WaSP: Luchando por los estándares¹⁹.
• Diez razones para aprender y usar los estándares web²⁰.
• Developing With Web Standards - Recommendations and best practices²¹.

En la actualidad existen diferentes versiones de HTML: HTML 4.01, XHTML 1.0 y HTML5. Conviene que las conozcas todas: para un desarrollo nuevo, lo más conveniente es utilizar la última versión, pero es muy probable que tengas que trabajar también con páginas web desarrolladas con versiones antiguas de HTML.

Para empezar a aprender HTML consulta algún curso de aprendizaje, como por ejemplo los disponibles en W3Schools:

• HTML²².
• HTML - XHTML²³.
• HTML5 Tutorial²⁴.

¿De dónde puedes copiar la estructura base de una página web y que sea correcta? Mira el código de la página del W3C y copia lo mínimo necesario para crear una página web correcta. Por ejemplo, el siguiente código lo puedes utilizar para crear páginas web basadas en XHTML 1.0 Strict:

XHTML 1.0 está disponible es tres versiones o variantes llamadas Strict, Transitional y Frameset. Si quieres saber más sobre la estructura básica de una página web basada en XHTML 1.0, consulta el artículo Plantilla base XHTML²⁵.

Si decides utilizar HTML5 para tus desarrollos web, debes de llevar mucho cuidado:

• HTML5 no es una recomendación oficial, se espera que lo sea a finales del año 2014. Hasta entonces, la especificación de HTML5 puede variar: pueden aparecer, desaparecer o cambiar cosas de la especificación.
• Por ahora, no todos los usuarios utilizan un navegador web compatible con HTML5.
• Por ahora, no todos los navegadores web implementan las últimas características de HTML5 de la misma forma.

En HTML5 puedes emplear dos sintaxis²⁶:

• HTML: la recomendada para la mayoría de los autores de páginas web. Cuando se envía una página web con esta sintaxis se debe emplear el tipo MIME text/html.
• XHTML: una aplicación de XML, la sintaxis es más estricta que la anterior. Se recomienda si se quiere hacer uso de software para XML. Cuando se envía una página web con esta sintaxis se debe emplear el tipo MIME application/xhtml+xml.

El siguiente código lo puedes utilizar para crear páginas web basadas en XHTML5 (sintaxis XML):

Una vez hayas aprendido los conceptos básicos, consulta la guía de referencia de W3Schools (HTML Reference²⁷) para conocer todas las etiquetas y atributos. Te vendrá muy bien recordar esta página web cuando estés escribiendo código HTML y te surja una duda.

En esta práctica sólo tienes que definir la estructura y contenido de las páginas web, el estilo visual lo definiremos en prácticas posteriores (utilizando únicamente HTML es imposible cambiar el tipo de letra o el color de un texto en una página web). Emplea las etiquetas de HTML que poseen contenido semántico, como <h1>, <p>, <ul>, etc. Fíjate que las etiquetas <center> o <font> no existen ni en XHTML 1.0 ni en HTML5, aunque las puedes encontrar en muchas páginas web “mal hechas”. No utilices tablas para maquetar una página web. Para todo ello emplearemos la tecnología CSS que utilizaremos en una próxima práctica.

Si quieres conocer más de XHTML, consulta la especificación oficial del W3C (XHTML 1.0 The Extensible HyperText Markup Language²⁸) y los DTD de las tres versiones (Strict²⁹, Transitional³⁰ y Frameset³¹). ¿Qué es un DTD? Es una especificación que define la estructura y los elementos que componen un documento.

Si quieres conocer más de HTML5, consulta la especificación oficial del W3C (HTML5: A vocabulary and associated APIs for HTML and XHTML³²). Recuerda: hasta finales del año 2014 no se publicará la especificación definitiva.

Cuando escribas el código HTML a mano, utiliza la herramienta W3C Markup Validation Service³³ para comprobar que el código es correcto y la herramienta HTML Tidy³⁴ para obtener una mejor apariencia visual del código fuente.

La herramienta de validación del W3C sólo permite validar las páginas web de una en una. Si necesitas validar todo un sitio web, la herramienta WDG HTML Validator³⁵ permite validar múltiples páginas a partir de una única dirección.

Cuando se empieza a trabajar con una nueva tecnología es muy normal cometer muchos errores. ¿Cuales son los errores más comunes? El artículo Errores comunes del desarrollo web³⁶ te lo explica.

Por último, ten cuidado con los nombres de los ficheros: utiliza únicamente letras del alfabeto inglés y números, no uses espacios en blanco y emplea únicamente minúsculas.