practica12-diw

Práctica 12 - DIW

Imagina que tienes que crear la estructura y el diseño de un Buscador y Reserva de Casas Rurales.

1. Aplicarle Diseño y estilo a la práctica teniendo en cuenta los siguientes requisitos: Aplicando correctamente las etiquetas html5, estructura y semántica:

• header
• footer
• aside
• section
• article
• main
• nav
• ...

2. Debes implementar la práctica con estilo, coherencia y un buen equilibrio visual (con todo lo que conlleva), velocidad de carga, compatibilidad, ...

3. Usa en la medida de lo posible, siempre que no incumpla el punto anterior los estilos de CSS3 que puedas. Debe ser a tu criterio, y deberás defenderlo y justificarlo a tu profesor.

4. Los formularios deberán ir con estilo. Usa todas las pseudo-clases que sean necesarias.

5. Usa como referencia para tu diseño Material Design.

6. La página debe estar diseñada con responsive design de forma obligatoria (2 puntos de ruptura, para 3 resoluciones diferentes).

7. Recuerda usar normalice.css

8. La práctica debe tener 3 partes bien diferenciadas:

   1. Una página inicial, con una animación en CSS3, acorde a la finalidad de la página web. Debajo debe aparecer un botón/enlace Entrar
   2. Una página donde se listen todas las casas rurales que tenemos con los siguientes datos: Nombre, habitaciones, fotos, precio, botón/enlace de reserva.
      • Debe aparecer un buscador que nos ayuda a listar los hoteles rurales que queremos. Deben tener como entradas un input de texto del lugar u hotel de búsqueda, fecha de entrada y fecha de salida.
      • Una vez realizada la búsqueda y listado los resultados, debe aparecer un sistema de filtros para los resultados de búsqueda, que podrían ser: ordenar por precio, nº de habitaciones, si tiene o no ciertos servicios: wifi, piscina, barbacoa, acepta mascota, senderismo, piragua, ...
      • Esta página tiene doble objetivo:
        • Primero, cuando accedes desde la intro, donde no has hecho ninguna búsqueda, y puedes listar los hoteles rurales con las condiciones que más creas convenientes, como hoteles destacados, otros servicios, o algo que tu portal quisiera resaltar.
        • Segundo, listar los hoteles de una búsqueda ya determinada por el usuario. Estos 2 objetivos pueden tener el mismo diseño o diferente(no es lo mismo diseñar con destacados, por ejemplo, que listar por un criterio de búsqueda).
   3. Una página de información mucho más detallada de la casa rural (nombre, habitaciones, miniaturas, fotos, precio, baños, ubicación, descripción, ...) junto a un formulario de reserva de hoteles solicitando la siguiente información: Nombre, apellidos, correo, teléfono, fecha entrada, fecha salida, número de persona. Adecua el formulario a los valores de entrada solicitados. No olvides usar pseudo-clases para formularios de forma correcta y coherente

9. La página deberá tener una cabecera y un footer(salvo la página de inicio que es opcional). El contenido de estas dos cajas debe estar acorde a tu diseño.

10. Para el diseño y funcionalidad de las miniaturas, usa la funcionalidad CSS Scroll Snap

11. Evaluación de la práctica:

• Los puntos anteriores son requisitos mínimos para superar la práctica.
• Se valorará muchísimo la originalidad y por supuesto, una muy buena composición y equilibrio visual, buena presencia, correcta combinación de colores, agradables animaciones,....
• Se valorará de forma positiva la compatibilidad de vuestro portal en todos los navegadores.
• Es imprescindible que sepáis defender vuestro código ante cualquier pregunta sobre vuestra práctica. Si no sabéis contestar cualquier pregunta, doy por supuesto que no la habéis hecho vosotros o está copiada, y la práctica, por lo tanto, será valorada como no superada.
• Deben desarrollarse todos los puntos de la práctica

Resultados de Aprendizaje:
CE 2.a
CE 2.b
CE 2.c
CE 2.d
CE 2.e
CE 2.f
CE 2.g
CE 3.b
CE 3.c
CE 3.d
CE 3.f
CE 3.h

Jaime Rabasco Ronda

IES Gran Capitán