Prctica 1.

Introduccin a la Programacin de
Interfaces Web.

Objetivos
Los objetivos de esta clase de prctica son los siguientes:

Comprender los fundamentos bsicos de la WWW como tecnologa hipermedia

concreta, en particular los relacionados con las interfaces de usuario.

Conocer los fundamentos del lenguaje de marcas HTML en el que se basa,

distinguiendo entre el contenido, la estructura y la presentacin de un
documento.

Introducir al diseo de estructuras bsicas de un hiperdocumento y de

formularios en Web.

Tras realizar esta prctica, el alumno ser capaz de disear el contenido, estructura y
presentacin de hiperdocumentos para la Web a partir de elementos bsicos como
secciones, prrafos, listas, tablas, enlaces y formularios; as como sus tamaos,
alineaciones, tipos y color de letra, etc.

Enunciado
La WWW es el sistema hipermedia ms utilizado en la actualidad. Su estructura
actualmente se basa en el lenguaje HTML y lenguajes relacionados que han ido
apareciendo en el tiempo con objeto de aumentar o mejorar las caractersticas de
HTML. La tecnologa Web tiene ciertas particularidades que deben considerarse durante
el diseo de la interfaz de usuario, algunas de las cuales, a modo ilustrativo, se citan a
continuacin:

El uso del protocolo HTTP subyacente (basado en arquitectura cliente-servidor y

carente de estados) limita las interacciones y el diseo de interfaz posibles con
esta tecnologa, lo que obliga a adoptar medidas tcnicas y arquitectnicas al
disear aplicaciones web. Aspectos como el mantenimiento del estado durante
una sesin de usuario o los tiempos de respuesta, considerando el tamao de la
informacin multimedia y las diferentes tasas de transferencia disponibles para
los usuarios, son cruciales.

Las estructura no lineal de la informacin, basada en el uso de enlaces que

relacionan fragmentos de texto (o informacin de otros medios). El diseo de la
navegacin es otro componente esencial en este tipo de sistemas, pues si bien
los enlaces ayudan al usuario a moverse de una forma intuitiva (al reflejar
estructuras asociativas de la mente humana), tambin pueden desorientar al
usuario en el hiperespacio.

Usualmente la interfaz esta disponible pblicamente, por tanto todos los

usuarios pueden evaluarla. Normalmente esto se traduce en interfaces ms
sencillas, con elementos de presentacin y contenido estndar. Al diversificarse
el perfil de usuario, aspectos de accesibilidad y personalizacin cobran
importancia.
 La diversidad de dispositivos de acceso a la aplicacin (ordenadores de
sobremesa, PDAs, telfonos mviles) hace necesario contemplar diferentes
interfaces de acuerdo con las caractersticas tcnicas de cada dispositivo.

La inexistencia de estndares de visualizacin para los navegadores, que a su

vez pueden no soportar todas las caractersticas de los diferentes lenguajes
usados hoy en la Web.

HTML es un lenguaje de marcas orientado a la estructura y presentacin de la

informacin, por lo que principalmente contiene marcas para definir la estructura del
documento, as como su aspecto en el espacio de visualizacin. En cualquier caso, el
principal problema de HTML es la ausencia completa de semntica, en otras palabras,
un documento HTML no es consciente de su contenido, simplemente lo estructura y
define cmo debe presentarse al usuario. El lenguaje HTML es definido por el consorcio
W3 (www.w3c.org).

Utilizaremos dos documentos como referencia. En primer lugar, el tutorial HTML de w3c
schools [1], que recoge mediante ejemplos interactivos las caractersticas esenciales
del lenguaje. Luego, la especificacin del lenguaje HTML [2] servir como referencia y
material de consulta para temas avanzados. Se recomienda el uso del estndar HTML
4.01 debido a que la versin HTML 5 no es estable.

Actividad 1: mi primera pgina Web

El objetivo de esta actividad es practicar con los principales elementos de HTML para
elaborar la pgina web del alumno. En concreto, se trabajar con las etiquetas
relacionadas con la estructuracin del documento (secciones, listas...), las tablas y los
enlaces. Para practicar diferentes ejemplos, estudiar las seis primeras secciones (salvo
Frames) del tutorial interactivo Try-it yourself!, propuesto en [1].

La pgina Web deber incluir una fotografa del alumno y estar dividida en al menos 3
secciones, tratando cada seccin de un aspecto de la informacin que se quiere
presentar (hobbies, formacin, contactos...). Asimismo se estudiara cmo enlazar la
informacin del documento con documentos relacionados (v.g expediente acadmico,
sitios web especficos...) ya sean enlaces a URLs externas, a documentos locales
adicionales al currculum, o a secciones de una misma pgina. Se deber probar la
visualizacin del currculum en al menos dos navegadores diferentes.

Se valorar positivamente la adecuada organizacin, claridad y legibilidad en pantalla,

considerando que el propsito del documento es captar la atencin del publico, que
dispone de muy poco tiempo para encontrar la informacin mas interesante (para
entender cmo los usuarios leen en la web puede consultarse [3]). El documento ser
ledo con un navegador web convencional en un PC de sobremesa. Es imprescindible
justificar las decisiones que motivan el diseo utilizando comentarios HTML. Por tanto,
se pide:

Un archivo mipagina.html que contenga la pgina personal. Este archivo deber

ser escrito con un editor de textos, sin la ayuda de herramientas de edicin.

Comentarios HTML dentro del documento que justifiquen la organizacin, el

contenido y la presentacin del mismo. Estos comentarios se situarn justo
encima de la etiqueta HTML que se desea comentar.
 Un comentario HTML al principio del cuerpo del documento, que especifique los
navegadores que se han probado y las diferencias encontradas.

Podrn incluirse archivos HTML enlazados desde la pgina personal, en el caso

en que el acceso a dichos documentos no sea directo (v.g porque el acceso al
documento requiera autenticacin), o hayan sido generados por el alumno.

Actividad 2: Formularios
El objetivo de esta actividad es conocer y practicar los elementos HTML que permiten
la creacin de formularios. Para ello se implementar un cuestionario de bsqueda de
hoteles en un portal de viajes, cuyo prototipo de baja calidad se muestra en la figura
adjunta. El alumno deber escoger los controles ms adecuados para cada
informacin solicitada al usuario en el formulario, que se implementar en el archivo
cuestionario.html. Cada control est marcado con un rectngulo rojo en la figura, ya
que el prototipo est incompleto y no define qu tipo de control es el ms adecuado.
Asimismo, deber justificarse la eleccin de cada control. Para ello, se crear una
pgina detalles.html en la que se explicar el por qu de cada decisin, y se enlazar
desde cuestionario.html con un enlace con el texto (justificacin) (como en la figura),
que apuntar al fragmento de la pgina detalles.html donde se justifica la decisin de
ese control.

Como gua para elaborar el cuestionario, puede partirse de la seccin Forms and
Input del tutorial interactivo de [1], as como tomar ideas de [4].
Se valorar la correcta eleccin de los controles del formulario, considerando las
posibles alternativas para introducir la informacin. Un control ser ms correcto
cuanto ms facilite la tarea del usuario, en trminos del nmero de acciones necesarias
para introducir un dato y de cunto imposibilite que el usuario cometa errores. Es
imprescindible justificar las decisiones tomadas, en el archivo detalles.html.

Nota importante: solo se considerar el diseo del formulario, no su validacin o

envo a un agente de procesamiento. Asimismo, no se precisa el uso de hojas de estilo
ni de Javascript. Por tanto, se pide:

Los archivos cuestionario.html y detalles.html. Debern ser escritos con un editor de

textos, sin la ayuda de herramientas de edicin.

Ejercicios de trabajo personal

Las siguientes actividades de ampliacin son de entrega opcional.

Actividad 3 (entrega opcional)

Responda a las siguientes cuestiones:

1. Enumere 3 etiquetas HTML que no impongan una forma concreta de presentacin en

pantalla.

2. Explique el sentido de una tabla sin bordes en HTML.

3. Qu ventajas aporta a la interfaz de usuario la especificacin de tamaos (v.g.

anchos de tablas) en porcentajes, frente a valores absolutos? Qu desventajas tiene?

4. Tras leer sobre la tecnologa Xforms [5] (secciones How it Works y Xforms for
HTML authors), Por qu son mejores los Xforms con respecto a los formularios
clsicos de HTML desde el punto de vista del diseador de interfaces de usuario para
web? Y desde el punto de vista del usuario? Qu desventaja tienen los Xforms con
respecto a HTML?

5. Qu permiten las etiquetas <meta>? Cite al menos dos valores que incluira como
palabras clave en etiquetas <meta> para el curriculum.

Se pide:

Un documento actividad3.html que responda a las cuestiones planteadas.

Lecturas recomendadas
[1] HTML Tutorial, Tutorial HTML de W3 Schools, disponible en
http://www.w3schools.com/html/
[2] HTML 4.01 Specification, recomendacin del W3C, disponible en
http://www.w3.org/TR/html4 HTML 5 Specification, recomendacin del W3C,
disponible en http://www.w3.org/TR/html5
[3] How Users Read on the Web, de Jackob Nielsen, disponible en
http://www.useit.com/alertbox/9710a.html
[4] Checkboxes vs. Radiobuttons, de Jackob Nielsen, disponible en
http://www.useit.com/alertbox/20040927.html
[5] XForms The next generation of HTML forms, disponible en
http://www.w3.org/MarkUp/Forms/