Ejercicios 2

Ejercicio 1 - Crear una Web responsive (3 puntos)

Para poner en práctica los conceptos teóricos vistos 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 vistos 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).

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

  • 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.

Nota: 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 codigo en el resto de páginas.