Ctedra: PIPP212-1

Prof. Dr. Jorge Domnguez Chvez

Prctica 1. Introduccin a la Programacin de Interfaces Web

Objetivos

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 estudiante 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
WWW es el sistema hipermedia ms utilizado en la actualidad. Su estructura se basa en el lenguaje
HTML y lenguajes relacionados que han ido apareciendo con objeto de aumentar o mejorar sus caractersticas.
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 est 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 (Pc, laptop, PDA, Tablets y telfonos

mviles) hace necesario contemplar diferentes interfaces segn 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).
Utilizar dos documentos como referencia. En primer lugar, el tutorial HTML de w3c schools [1],
que presenta, 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.

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 estudiante. 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 estudiante 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 currculo, o a secciones de una misma pgina.
Se deber probar la visualizacin del currculo 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 poco tiempo para encontrar la
informacin (para entender cmo los usuarios leen en la web puede consultarse [3]). El documento ser ledo
con un navegador web convencional en un PC. 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 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 encima de la etiqueta HTML que se desea comentar.
Un comentario HTML al principio del cuerpo del documento, que especifique los navegadores
probados y las diferencias encontradas.

Actividad 2: Formularios
El objetivo de esta actividad es conocer y practicar los elementos HTML para 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 estudiante 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, justificar la eleccin de cada control.
Para ello, crear una pgina detalles.html en la que 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, partir 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 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: slo 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 sern escritos con un editor de textos, sin la ayuda de
herramientas de edicin.

Actividad 3
Responda a las siguientes preguntas:
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 curriculo.
Se pide:
Un documento actividad3.html que responda a las cuestiones planteadas.
Lecturas recomendadas
[1]
HTML
Tutorial,
http://www.w3schools.com/html/
[2]
HTML
http://www.w3.org/TR/html4

4.01

Tutorial

Specification,

HTML

de

W3

recomendacin

del

Schools,

disponible

en

W3C,

disponible

en

HTML 5 Specification, recomendacin del W3C, disponible en http://www.w3.org/TR/html5

[3] How Users Read
http://www.useit.com/alertbox/9710a.html

on

the

Web,

[4]
Checkboxes
vs.
Radiobuttons,
http://www.useit.com/alertbox/20040927.html
[5]
XForms
The
http://www.w3.org/MarkUp/Forms/

next

generation

de

de
of

Jackob
Jackob
HTML

Nielsen,

disponible

en

Nielsen,

disponible

en

forms,

disponible

en