Diseo de Interfaces Hombre Mquina

Prcticas de laboratorio Curso 2009/10

Prctica 2 Interaccin con hojas de estilo en cascada

1 Objetivo
1.1 Creacin de una hoja de estilo La figura 1 muestra una pgina con informacin de una vivienda. En esta pgina se ha colocado exclusivamente la informacin de la vivienda, sin aplicar ningn estilo.

Figura 1: pgina de la vivienda sin estilo

Por otra parte, la figura 2 muestra la misma pgina anterior pero esta vez con el estilo que se desea para la misma. Para obtener esta nueva versin de la pgina se ha creado una hoja de estilo y se ha incluido en la pgina anterior colocando en el encabezado de la misma un elemento LINK:
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">

Diseo de Interfaces Hombre Mquina

Figura 2: pgina de la vivienda con el estilo definido en la hoja de estilo

El objetivo de este apartado es crear la hoja de estilo necesaria para que la pgina se muestre de la forma que se aprecia en la figura 2. Para ayudar a construir esta hoja de estilo se indican los elementos a los que debe aplicarse un estilo y las propiedades que deben definirse para ellos. Estilos genricos: BODY: tipo de letra arial, alineacin de texto centrada. H1: tamao 24 puntos, color de texto azul. H2: tamao 12 puntos, color de texto blanco sobre fondo azul. P: alineacin de texto justificada. UL: usar como marcador la imagen bolaverde.gif, alinea r texto a la izquierda. ADDRESS: tamao de texto relativo de 0.8em. Estilos con nombre: imagen-casa (aplicado a la imagen de la casa): flotar a la izquierda. caracteristica (aplicado a los nombres de las caractersticas): estilo de fuente itlica, color de texto azul. Estilos de bloques: caracteristicas (aplicado a un bloque que encierra la lista de caractersticas): borde de 1 pxel de grosor, lnea de trazos y color azul, mrgenes izquierdo y derecho del 30%, margen inferior relativo de 1em.

Prctica 2: Interaccin con hojas de estilo en cascada

1.2 Barra de navegacin En este apartado se va a crear una barra de navegacin con botones para facilitar la navegacin entre una serie de pginas. En concreto, se tendr una pgina principal y tres pginas colgadas debajo de ella. La barra de navegacin permitir pasar de la pgina principal a cualquiera de las otras tres, y desde cada una de stas a las otras dos y a la pgina principal. En la figura 3 se muestra la pgina principal, que pertenece a una inmobiliaria. Cada una de las pginas secundarias muestra informacin sobre una de las viviendas de que dispone la inmobiliaria. Una de ellas se muestra en la figura 4, mientras que la figura 5 muestra la estructura de las pginas.

Figura 3: pgina principal de la inmobiliaria

Figura 4: pgina que muestra los datos de una de las viviendas

Diseo de Interfaces Hombre Mquina

lindanav.html

casa1.html

casa2.html

casa3.html

Figura 5: estructura de las pginas para el apartado 2

La barra de navegacin de la pgina principal est formada por tres botones que llevan a las pginas de las tres viviendas. Las barras de navegacin de stas aaden un botn que lleva a la pgina principal (etiquetado como Inicio). Obsrvese que el botn de la vivienda a la que corresponde la pgina se encuentra resaltado respecto a los dems. Todos los botones estn realizados con textos cuyo estilo se define en la hoja de estilo estilo.css:
BODY {font-family: arial, sans-serif; text-align: center;} P.titulo {font-size: 24pt; color: blue; margin-bottom: 0; margin-top: 0;} P.subtitulo {font-size: 12pt; color: black; margin-top: 0;} ADDRESS {font-family: times, serif;} UL {list-style-type: none; margin-left: 0; padding-left:0;margin-top: 1.5em;} LI {display: inline;} A:link, A:visited {color: white; background-color: blue; font-family: verdana, sans-serif; font-size: 1.2em; font-weight: bold; text-decoration: none; padding: 0.1em 1em; border: 3px solid blue;} A:hover {color: yellow;} A.activo:link, A.activo:visited {color: blue; background-color: white; font-family: verdana, sans-serif; font-size: 1.2em; font-weight: bold; text-decoration: none; padding: 0.1em 1em; border: 3px solid blue;} A.activo:hover {background-color: yellow;} IMG.vivienda {float: left;} P.codigo {font-style: italic; margin-bottom: 0; padding-bottom: 0; text-align: left;} P.descripcion {margin-top: 0; padding-top: 0; text-align: left;} IMG.linea {clear: left;}

1.3 Superposicin y ocultacin de imgenes En este apartado se va a mostrar cmo pueden superponerse varias imgenes y hacer que cada una de ellas pueda mostrarse u ocultarse. La figura 6 muestra la pgina que se pretende obtener, y que contiene un mapa con la localizacin de las distintas propiedades de la Inmobiliaria Lindavista. El mapa es en realidad la superposicin de 5 imgenes distintas: una imagen de fondo con el mapa propiamente dicho y cinco imgenes que muestran la ubicacin en el mapa de otros tantos tipos de propiedades: pisos, apartamentos, chalets, locales y oficinas.

Prctica 2: Interaccin con hojas de estilo en cascada

Al marcar o desmarcar la caja asociada a un determinado tipo de propiedades, las imgenes de stas aparecen o desaparecen, respectivamente (figura 7).

Figura 6: pgina del apartado 3 con todas las propiedades visibles

Para conseguir este comportamiento hay que colocar en primer lugar las imgenes de las distintas propiedades en la pgina mediante posicionamiento absoluto. Para ello se utiliza el elemento DIV:
<DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaFondo" SRC="mapa-fondo.gif"></DIV> <DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaPisos" SRC="mapa-pisos.gif"></DIV> <DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaApartamentos" SRC="mapa-apartamentos.gif"></DIV> <DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaChalets" SRC="mapa-chalets.gif"></DIV> <DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaLocales" SRC="mapa-locales.gif"></DIV> <DIV STYLE="position: absolute; top: 80px; left: 200px"> <IMG ID="mapaOficinas" SRC="mapa-oficinas.gif"></DIV>

Por otra parte se colocan las cajas de verificacin dentro de un elemento FORM:
<FORM> <INPUT TYPE="checkbox" NAME="pisos" CHECKED ONCLICK="cambiaVisibilidad(mapaPisos)">Pisos<BR> <INPUT TYPE="checkbox" NAME="chalets" CHECKED ONCLICK="cambiaVisibilidad(mapaChalets)">Chalets<BR> <INPUT TYPE="checkbox" NAME="apartamentos" CHECKED ONCLICK="cambiaVisibilidad(mapaApartamentos)">Apartamentos<BR> <INPUT TYPE="checkbox" NAME="oficinas" CHECKED ONCLICK="cambiaVisibilidad(mapaOficinas)">Oficinas<BR> <INPUT TYPE="checkbox" NAME="locales" CHECKED ONCLICK="cambiaVisibilidad(mapaLocales)">Locales<BR> </FORM>

Al hacer click sobre una caja se invoca a la funcin cambiaVisibilidad pasando como parmetro el identificador de la imagen correspondiente. Esta funcin, definida en la seccin HEAD de la pgina, es la siguiente:

Diseo de Interfaces Hombre Mquina <SCRIPT> <!-function cambiaVisibilidad(imagen) { if (imagen.style.visibility == "hidden") imagen.style.visibility = "visible"; else imagen.style.visibility = "hidden"; } // --> </SCRIPT>

En la funcin se pregunta por el estado actual de la imagen y en funcin del mismo se le asigna un nuevo estado modificando su propiedad visibility. As, si la imagen est oculta (hidden) se hace visible, mientras que si est visible se oculta.

Figura 7: pgina del apartado 3 con algunas propiedades visibles

En este apartado se utiliza una hoja de estilo que tiene el contenido siguiente:
BODY {font-family: verdana,arial,sans-serif; font-size: 0.8em; color: white; background-image: url(fondocurvo.gif); background-repeat: no-repeat;} P.titulo {font-family: arial; font-size: 2.4em; margin: 0 0 0.5em 0;} P.subtitulo {font-family: arial; font-size: 1.2em; margin: 0 0 0.5em 0;} IMG {float: left; margin: 0 1em 0.5em 0.5em;}

2 Herramientas
Para la creacin de las pginas web se utilizar el entorno Aptana Studio Las pginas se guardarn en el disco duro del PC y para su visualizacin se utilizar el propio entorno Aptana o bien los navegadores Firefox o Internet Explorer

3 Documentacin
Apuntes del curso Diseo de Pginas Web, www.lsi.us.es/cursos/cursoweb Los ficheros necesarios para esta prctica pueden descargarse de la pgina web de la asignatura, http://www.lsi.us.es/docencia/pagina_asignatura.php?id=23