Práctica 1 DIW
Un one page site es un sitio web de una sola página que muestra las distintas secciones generalmente en vertical una debajo de otra.
La práctica consiste en documentar y desarrollar una web one page de un producto que nos inventemos, siguiendo las siguientes instrucciones:
-La web debe tener 6 secciones: Inicio, Presentación, Características, Beneficios, Compra y Contacto. Debe existir algún tipo de separación sutil entre secciones (borde, color, espacios, etc.). Cerraremos el diseño con un footer donde aparecerá el autor de la web.
-La web debe tener un menú responsive (en resoluciones pequeñas debe mostrar un botón, al estilo Bootstrap) fijo en la parte superior de la pantalla que nos permita ir de una sección a otra.
-La sección de Inicio ocupará el 100% del viewport (ancho y alto), tendrá una imagen de fondo y una frase corta a modo de titular que responde a la pregunta "¿qué es el producto?"
-La sección Presentación tendrá un título y un par de párrafos descriptivos sobre "¿por qué debo comprar el producto?", "¿qué necesidad cubre?".
-La sección Características tendrá un título y 6 características compuestas por icono, título y una frase descriptiva. Se trata de responder a la pregunta ¿Cómo es el producto?
-La sección Beneficios presentará los dos beneficios principales del producto, cada uno de ellos con una imagen, un título y un párrafo descriptivo.
-La sección Compra es un Call to action como el visto en los ejercicios, con un mensaje atrayente y un botón.
-La sección de Contacto tendrá un típico formulario de contacto.
-La web debe ser responsive utilizando la técnica mobile first. Cada formato(al menos XS, MD y LG) debe tener algún cambio en la visualización para adaptar el contenido de forma óptima.
-Se valorará positivamente el uso de componentes de Bootstrap y que el movimiento de una sección a otra se haga mediante smooth scroll.
-La documentación de la práctica deberá presentar:
Un boceto para cada resolución previo a su maquetación, donde planifique el trabajo de que va a realizar. Se recomienda el uso del siguiente software: Moqups [ https://moqups.com/ ] o Balsamic [ https://balsamiq.com/ ].
Una guía de estilo donde se especifique qué colores se han utilizado (hexadecimal y muestra) y qué tipografías y porqué se han elegido.
El enlace para descargar el código de la página web desarrollada.