Desarrollo de Aplicaciones Web

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

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

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:

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. Sin embargo, la navegación entre las páginas debe funcionar correctamente: por ejemplo, cuando se pulse en el botón “Buscar” se debe navegar a la página con el listado resultado de una búsqueda, que mostrará siempre el mismo resultado; cuando se pulse sobre una foto, se debe navegar a la página con el detalle de la foto, pero se puede mostrar el mismo detalle para todas las fotos.

Cuando realmente funcione la práctica, habrá páginas que se podrán unificar en una sola. Por ejemplo, la Página con el formulario de búsqueda y la Página con el listado resultado de una búsqueda pueden ser la misma página (el formulario se invoca a sí mismo), pero ahora no pueden ser la misma página porque se deben representar los dos estados posibles: página sin resultado y página con resultado. Y también al revés: la Página principal contiene un formulario para acceder como usuario registrado, pero también se puede realizar como una página independiente.

No hay que realizar dos versiones de cada página, una para usuario registrado y otra para usuario no registrado, eso ya se programará más adelante. Pero la página principal sí que se tiene que realizar con sus dos alternativas: puede cambiar la barra de menú, el enlace se entrar o salir, etc. Cuando se inicie sesión como usuario registrado, se debe cambiar a la versión de la página como usuario registrado; cuando se pulse en salir o cerrar sesión, se debe cambiar a la versión de la página como usuario no registrado.

Muy importante: tienes que cumplir exactamente lo que se te pide en cada práctica porque las prácticas son acumulativas, si te desvías de lo que se te pide es posible que tengas graves problemas en prácticas posteriores.

Muy importante: en esta práctica no te tienes que preocupar por la presentación visual de las páginas web. La 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 el pie de página incluye los nombres de los autores de la práctica, un aviso de copyright con el año y alguna información más.

Sólo con HTML no se puede reutilizar código, así que tendrás que repetir fragmentos de código en las distintas páginas. Cuando se llegue a la parte de PHP se podrá reutilizar el código.

En la actualidad existen diferentes versiones de HTML: HTML 4.01, XHTML 1.0 y HTML5. Para realizar la práctica debes utilizar 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:

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:

¿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:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Bloc de notas" />
<meta name="author" content="Sergio Luján Mora" />
<meta name="keywords" content="XHTML, web" />
<meta name="description" content="Plantilla base de una página creada con XHTML" />
<title>Plantilla base de XHTML</title>
</head>

<body>
<p>
Bla, bla, bla.
</p>
</body>
</html>

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²⁷.

El siguiente código lo puedes utilizar para crear páginas web basadas en XHTML5 (HTML5 escrito con la 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, en esta práctica no debes definir la presentación visual de las páginas web.

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³⁴).

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.

El uso del atributo placeholder en lugar de la etiqueta <label> asociada a un control de un formulario es una malísima idea. Se puede usar placeholder, pero siempre como un complemento a la etiqueta <label>.