Home | Clases | Uso de estilos y diseño responsive | Práctica: Diseño responsive con Bootstrap

Práctica: Diseño responsive con Bootstrap


Diseño responsive

Realiza una maqueta con Bootstrap para una tienda online con las siguientes características:

  • Un layout para todas las páginas consistente en:

    • Una cabecera con logo y título
    • Un menú de categorías (Inicio, Productos y Acerca De). La categoría seleccionada cambiará en cada página mediante programación.
    • Un pie con footer, copyright, etc.

  • Una página principal (index.php) con un slider de 4 elementos que cambian cada 3 segundos. Cada elemento es una imagen del producto y su título, y al hacer clic en ella me lleva a la página de ese producto

  • Una página de productos (productos.php) con el listado de productos (al menos 10) con foto, título, precio y botón de ver.

  • Una página de producto (producto.php) a la que se accede al hacer clic en ver con toda la información detallada del producto, así como al menos 2 imágenes del producto (mejor si solo se ve una en grande y las dos miniaturas, y al hacer clic en ellas cambia la grande). Importante: Esta página es una plantilla que se rellena a partir del enlace pinchado, no debe haber una página por producto.

  • Una página de Acerca De (acerca-de.php) con información sobre el autor de la web.

  • El diseño tiene que ser responsive mediante Bootstrap desde 1920px hasta 480px.

  • Puedes y debes utilizar javascript y jQuery para efectos visuales.

  • El header, nav y footer deben ser archivos parciales que se incluyen en cada una de las tres páginas.


Para la evaluación se tendrá en cuenta:

  • La funcionalidad y estructura del código (30%)
  • Los comentarios (10%)
  • La adición de nuevas funcionalidades (10%)
  • La creatividad y el diseño de la aplicación (50%)


Fecha de presentación y corrección en clase: 2 de diciembre
Fecha de publicación: 05/09/2019
Asignaturas: diseño de interfaces web
Temas: css3 css responsive media-query
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos