Figura 1: Diagrama de páginas que componen el sitio web
¿Qué etiquetas existen en HTML? ¿Qué atributos existen y qué valores pueden tomar? ¿Cómo se emplean las etiquetas?
¿Cómo puedo saber que el código HTML que he escrito es correcto?
¿Cómo puedo comprobar que la página web se visualiza correctamente en diferentes navegadores?
¿Existe alguna herramienta que me pueda ayudar a escribir el código HTML?
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.
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. Las presentación visual la definirás en las próximas prácticas con la tecnología CSS.
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 puedes utilizar XHTML 1.0 Strict o HTML5.
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 Sites18 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:
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 XHTML25.
En HTML5 puedes emplear dos sintaxis26:
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 Reference27) 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 Language28) y los DTD de las tres versiones (Strict29, Transitional30 y Frameset31). ¿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 XHTML32).
Cuando escribas el código HTML a mano, utiliza la herramienta W3C Markup Validation Service33 para comprobar que el código es correcto y la herramienta HTML Tidy34 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 Validator35 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 web36 te lo explica.
Importante: almacena cada práctica en un directorio independiente; al final de la asignatura debes tener un directorio por cada práctica semanal. Cuando comiences una nueva práctica, copia y renombra el directorio de la práctica anterior.
Importante: el fichero de la página principal de un sitio web suele tener el nombre index.html. Sólo como curiosidad, los sevidores web suelen tener configurada la siguiente lista de páginas por defecto para la página principal37: index.htm, index.html, index.php, index.php3, index.php5, index.php4, index.shtml, default.htm, default.html, index.py, default.shtml, index.pl, index.cgi y home.html.
Importante: se recomienda usar el juego de caracteres UTF-8.
Importante: 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.
Importante: ten cuidado con la caché del navegador, consulta una explicación sobre los problemas y soluciones en el artículo “Ayuda:Cómo limpiar la caché”38. Recuerda esto durante toda la asignatura.
3http://floele.flyspray.org/htmlcheatsheet-ncr.pdf
4http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
5http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
8http://addons.mozilla.org/es-ES/firefox/addon/249
9http://htmlhelp.com/tools/validator/
11http://www.totalvalidator.com/
13http://notepad-plus.sourceforge.net/es/site.htm
15http://htmledit.squarefree.com/
16http://online-html-editor.org/
17http://cgi.w3.org/cgi-bin/tidy
19http://www.webstandards.org/about/mission/es/
20http://www.estandaresyaccesibilidad.com/2006/01/diez-razones-para-aprender-y-usar-los.html
21http://www.456bereastreet.com/lab/developing_with_web_standards/
22http://www.w3schools.com/html/default.asp
23http://www.w3schools.com/html/html_xhtml.asp
24http://www.w3schools.com/html/html5_intro.asp
25http://olgacarreras.blogspot.com/2007/02/plantilla-base-xhtml.html
26W3C HTML5 1.6 HTML vs XHTML: http://www.w3.org/TR/html5/introduction.html\#html-vs-xhtml
27http://www.w3schools.com/tags/default.asp
28http://www.w3.org/TR/xhtml1/
29http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
30http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
31http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
34http://cgi.w3.org/cgi-bin/tidy
35http://htmlhelp.com/tools/validator/
36http://www.456bereastreet.com/lab/web_development_mistakes/es/
37El orden de configuración es importante porque el servidor web va a intentar encontrar los archivos en el orden indicado.
38https://es.wikipedia.org/wiki/Ayuda:C%C3%B3mo_limpiar_la_cach%C3%A9