Introduccin a la Programacin de
Interfaces Web.
Objetivos
Los objetivos de esta clase de prctica son los siguientes:
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:
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.
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.
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.
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:
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/