Introducción

Esta práctica de laboratorio para el curso de Contenidos y Servicios WEB consistirá en realizar las páginas Web para una agencia inmobiliaria ficticia. Se aplicarán los conocimientos adquiridos sobre HTML y JavaScript.


Paso 1: Demanda Inmobiliaria

Realice una página web donde se muestren todas las demandas inmobiliarias de la agencia.

Esta página presentará un título (Demandas Inmobiliarias), un párrafo informativo con el número de teléfono de la agencia y su dirección de e-mail, y finalizará con una tabla que muestre todas las demandas que posea la agencia.

La tabla incluirá los siguientes campos:

Opcionalmente puede utilizar la siguiente imagen como título de la página.

Demanda

Aquí puede ver la solución de este ejercicio.


Paso 2: División en Frames

La agencia quiere mostrar en su sitio web varias secciones: demanda, oferta, anuncios, busquedas, etc. Para ello vamos a realizar un diseño mediante el cual podamos acceder a cada una de estas secciones usando un menú.

Para ello, dividiremos la página principal de la agencia en varios frames. Uno horizontal en la parte inferior de la pantalla donde se insertará publicidad. Un frame a la izquierda con un menú que permitirá seleccionar entre las diferentes secciones, y un frame a la derecha donde aparecerá la información seleccionada en el menú.

Realice el fichero HTML donde se define el FRAMESET descrito.

De momento, utilice cualquier URL como contenido para los frames de la izquierda e inferior, y diseñe una página principal para inicializar el frame de la derecha.

Aquí puede ver la solución de este ejercicio:


Paso 3: Secciones de la Agencia

En este ejercicio se desarrollará el menú que se presentará en el frame de la izquierda. Este menú permitirá elegir entre tres secciones:

Esta sección recogerá necesidades de compra de pisos de la agencia.
Esta sección recogerá los pisos que la agencia tiene en venta.
Se presentará un formulario donde se pedirán datos al usuario sobre el piso en el que este interesado. Tras rellenar este formulario se buscará un piso que se ajuste a su petición.

Realice un fichero HTML con el menú descrito. Cada vez que seleccione una opción debe actualizarse el frame donde se muestra la información. Modifique también el ejercicio del paso anterior para que muestre el menú en el frame adecuado.

Aquí puede ver la solución de este ejercicio.


Paso 4: Oferta Inmobiliaria

En la sección de oferta inmobiliaria se informará sobre los pisos que la agencia tiene en venta.

Para cada piso se mostrará una información similar a los de la sección de demanda, pero agrupando los pisos según al barrio al que pertenezcan. De esta forma, se mostrará una tabla de pisos diferente para cada barrio de Madrid.

Además, se desea que inicialmente se seleccione el barrio a consultar mediante la utilización de un mapa imagen. Para realizar el mapa puede utilizar la siguiente imagen de 482x361 pixels:

Es decir, el usuario deberá seleccionar en el menú la sección de ofertas, con lo que se mostrará en el frame de la derecha el mapa imagen. Entonces, el usuario dererá seleccionar sobre el plano de Madrid la zona en la que busca piso, tras lo cual, se mostrará una tabla con los pisos ofertados en la zona elegida.

Realice los ficheros HTML que necesite para implementar el mapa y las páginas con los pisos según la zona elegida (Es suficiente con dividir el mapa en dos zonas).

Recuerde enlazar esta nueva seccion en el menú.

Aquí puede ver la solución de este ejercicio:


Paso 5: Busquedas

La tercera opción del menú da paso a una página que permite realizar busquedas de anuncios en función de unos parámetros. Esta página presentará un formulario donde se pedirán datos al usuario sobre el piso en el que este interesado. Tras rellenar este formulario, el usuario lo enviará al servidor, el cual buscará un piso que se ajuste a la petición recibida, y contestará con una página con el resultado de su busqueda.

Realice la página que implementa el formulario que se le presentará al usuario. Para probar este formulario utilice el siguiente CGI:

<FORM ACTION="http://www.dit.upm.es/~santiago/docencia/master/web/trabajos/inmobiliaria/cgi.php3" 
         METHOD=post>

</FORM>

Aquí puede ver la solución de este ejercicio:


Paso 6: Estilo

Defina en un fichero CSS un estilo de página. Utilícelo en todas las páginas anteriores para dar una apariencia uniforme. Puede usar inicialmente estos valores de estilo:

   BODY {  background-image: URL(Fondo1.jpg) 
        }


   H1.titulo { text-align: center ;
               font-size: 250% ; 
               font-weight: 900 ; 
               color: #006600 }


   TABLE.bonita { background: #aaaa66 }

   A:link    { color: #0000ff ;
               text-decoration: none }
   A:visited { color: #0000ff ;
               text-decoration: none }
La imagen de fondo referenciada arriba es la siguiente:

Aquí puede ver la solución de este ejercicio:

Modifique este fichero de estilo y compruebe como cambia la apariencia en todos los sitios simultaneamente.


Paso 7: Publicidad

Incluir los anuncios publicitarios en el frame situado en la parte inferior de la pantalla.
Deben estar siempre visibles y cambiar automáticamente cada 5 segundos.

Aquí puede ver la solución de este ejercicio:


Paso 8: Ayuda en la línea de estado

Ponga manejadores de eventos en los enlaces definidos en el frame del menú para que muestren un mensaje de ayuda en la barra de estado.

Aquí puede ver la solución de este ejercicio:


Paso 9: Comprobación de Formularios

Realice una función JavaScript que compruebe que el formulario de Búsquedas está bien relleno antes de enviar las peticiones al servidor.

Por ejemplo, debe comprobarse que ciertos campos no esten vacios.

Aquí puede ver la solución de este ejercicio: