Web de un negocio familiar de panaderos "Migas amigas"

Tarea para DIW01

Se pretende elaborar una interfaz gráfica para el sitio Web de un negocio familiar de panaderos situado en la frontera con Portugal. El nombre del cartel que figura encima de la puerta del local es: “Migas amigas”

Después de hablar con los clientes se ha llegado a la conclusión de que su único objetivo es dar a conocer su negocio a través de Internet.

Para ello debemos desarrollar una interfaz que sea sobre todo visual. Por ello nos han pedido que en la página principal pongamos una animación donde con dibujos se vea el proceso de elaboración del pan.

El sitio Web deberá:

Permitir la lectura del sitio en dos idiomas: Castellano y Portugués.

Tener tres secciones: panadería, pastelería - bollería y empanadas.

Mostrar los productos que se elaboran en la panadería: una breve descripción de los ingredientes y el sistema de elaboración acompañados de una fotografía del producto. El cliente nos ha dicho que actualmente tienen un máximo de 10 productos de Panadería, 8 de bollería-pastelería y 4 de empanadas, pero que tienen pensado aumentar hasta 12 los productos de panadería.

Mostrar la información de contacto con la dirección, el teléfono y un croquis de su ubicación.

SE PIDE:

Realizar una clasificación de todos los elementos mencionados en el enunciado según sean: elementos de identificación, navegación, contenido o interacción.

Elementos de Identificación

Elementos de Navegación

Elementos de Contenido

Elementos de Interacción

El nombre del cartel que figura encima de la puerta del local es: “Migas amigas”

Pondremos el logo del negocio y su nombre

Enlaces para acceder a las secciones de panadería, pastelería - bollería y empanadas.

Secciones de panadería, pastelería - bollería y empanadas con su información

Botones/Iconos para permitir la lectura del sitio en dos idiomas: Castellano y Portugués.

Animación donde con dibujos se vea el proceso de elaboración del pan.

Enlace para acceder a la página con información de contacto

Breve descripción de los ingredientes y el sistema de elaboración acompañados de una fotografía de cada producto de cada sección

Información de contacto con la dirección, el teléfono y un croquis de su ubicación

Indica cuál es el tipo de estructura de navegación más adecuado y explica el motivo.

La estructura reticular sería la más adecuada, ya que se emplea en aquellos sitios en los que todas sus páginas están relacionadas entre sí.

En este caso la página está formada por secciones de panadería y todas están relacionadas entre sí (todos son secciones de la panadería )

Elabora una guía de estilos indicando toda la información que debería figurar en función de los elementos que se han mencionado en el enunciado.

Guía de estilos

Tamaño y formato de fotos y logos

Según los requisitos del cliente tenemos que diseñar una interfaz visual que dé a conocer el negocio familiar a través de la web.

Para esto utilizaremos elementos gráficos sencillo e identificativos del negocio en particular, y de una panadería en general.

Dell cartel que figura encima de la puerta, utilizaremos el logo para incluirlo en cabecera, ya que es el distintivo que identifica el negocio.

Su tamaño será de 250 x 170 px

El formato será .png

Para cada sección (panadería, pastelería -bollería y empanadas ) utilizaremos fotos identificativas de cada sección.

Utilizaremos fotos de cada producto de cada sección con las siguientes características:

Tamaño: 350 x 270 px cada una

Formato: Se almacenarán en un formato .jpg

Para la animación con dibujos de elaboración de pan, hemos propuesto insertar un video real sobre este proceso como background.

Su tamaño será 1024 x 768 px

El formato será .mp4 , .ogv o .web según del navegador desde que se acceda a la web ( esto lo gestionaremos con un script de Javascript)

Para el croquis de la ubicación utilizaremos las mismas medidas de las fotos de los productos para mantener armonía y uniformidad entre los elementos

Tamaño: 350 x 270 px cada una

Formato: Se almacenarán en un formato .jpg

Tipografía

Fuente

Utilizaremos la fuente Roboto, ya que es una fuente limpia y moderna pero a la vez accesible y emocional. De no estar disponible utilizaremos 'Open Sans' o sans-serif en este orden.

Estilo de la fuente y tamaño

Utilizaremos negrita para los títulos de cada página utilizaremos la etiqueta <h1> que trae por defecto las siguientes características:

h1 {

display: block;

font-size: 2em;

margin-top: 0.67em;

margin-bottom: 0.67em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

}

Para los enlaces de la zona de navegación se utilizara un tamaño de 16px

...