Ejercicios 4

Ejercicio 1 - Crear una Web responsive

Para poner en práctica los conceptos teóricos sobre diseño responsive, se propone como ejercicio la creación de un pequeño sitio Web estático que use los estilos y componentes de Bootstrap.

La temática, contenidos y estilos del sitio son libres, pero deberá tener al menos las siguientes características:

• El sitio estará formado por al menos 3 páginas enlazadas entre sí (con contenidos estáticos).

• Ser completamente responsive, de forma que se adapte tanto a pantallas extra pequeñas de smartphone como a tablets

  y pantallas más grandes de portátiles y de escritorio.

• Tener una barra de navegación principal que se contraiga cuando la pantalla sea pequeña. Esta barra tendrá al menos:

  • Dos enlaces.

  • Una imagen como logotipo.

  • Un buscador (aunque no sea funcional).

• Un carousel en la página principal con tres imágenes. Modifica el intervalo para que las imágenes se muestren durante 3000 ms.

• Contener los siguientes elementos (un ejemplo de cada uno en alguna de las páginas del sitio web):

  • Iconos con FontAwesome.

  • Botones.

  • Un desplegable.

  • Una sección con fichas o pestañas.

  • Un formulario horizontal.

  • Una tabla responsive con bordes y de tipo striped.

• El estilo base a utilizar será el que define Bootstrap, si se definen estilos CSS personalizados tendrán que estar en un fichero separado, llamado "custom.css", y que será común para todas las páginas del sitio.

Un posible ejemplo de una web que podéis realizar sería, por ejemplo, una web de recetas. Esta podría tener una página principal con la información más importante, una página con una receta de ejemplo (aquí se podrían utilizar las fichas o pestañas para cambiar entre elaboración e ingredientes, los cuales podrían estar en una tabla) y otra página para el envío de recetas (con un formulario horizontal, botones para envíar y cancelar, y un desplegable para elegir la categoría).

De forma similar se podría crear la web sobre coches u otro tipo de vehículos, mascotas, bicicletas, etc.

Al ser una web estática tendréis que repetir partes del código en todas las páginas, por ejemplo la barra de menú principal tendrá que ser igual en todas las páginas. Por este motivo se recomienda realizar primero estas partes, y una vez probadas, copiar y pegar el código en el resto de páginas.