Proyecto: Baker

Definición de requerimientos

Elaborado por:

1. Definir los módulos o secciones

1. Header
2. Home
3. About
4. Services
5. Portafolio
6. Testimonial
7. Blog
8. Contact us
9. Footer

2. Definir requerimientos funcionales por módulo

1. Header
1.1. Debe contener el logotipo y el menú principal.
1.2. Debe tener un alto que se ajuste al contenido, dejando márgenes alrededor del
contenido.
1.3. Debe tener un color sólido gris oscuro, con transparencia.
1.4. Debe mostrar el logotipo de la empresa en la esquina izquierda y a la derecha el menú.
1.5. Las opciones del menú deben posicionarse horizontalmente con espacio entre ellas.
1.6. Las opciones del menú deben mostrar formato de fuente Sans Serif (arial), tamaño
14px, mayúculas, negrita.
1.7. El color del texto de las opciones del menú será blanco en estado inactivo, amarillo en
estado activo.
1.8. El logotipo debe mostrar las dos primeras letras color blanco y las restantes color
amarillo.
1.9. El texto del logotipo debe estar en mayúsculas, letra Sans Serif (arial), tamaño 24px,
negrita.
 1.10. Al presionar clic sobre el logotipo muestra la sección Home.
1.11. Cuando se posiciona el puntero sobre la opción de menú esta cambia a color
amarillo.
1.12. Cuando se da clic sobre una opción del menú me muestra la sección selecciona.
1.13. El menú permanece siempre visible (fijo), independientemente de la sección
donde se encuentre el usuario.
1.14. El menú debe presentar las opciones Home, About, Services, Portafolio,
Testimonial, Blog y Contact us.

Versión Mobile:
1.15. Las opciones se muestran minimizadas y estarán en un menú desplegable.
1.16. Las opciones en el menú desplegable estarán en posición vertical, con alineación
centrada.
2. Home
2.1. Alto 650px.
2.2. Debe mostrar una imagen de fondo.
2.3. Debe contener un subtítulo, título principal, un párrafo con información básica, dos
botones con con las funciones Download Now y Learn More y una flecha que permite el
desplazamiento a la siguiente sección.
2.4. El subtítulo debe mostrarse en color blanco, texto mayúscula, tamaño 16px, fuente
Sans Serif (Arial), alineación centrada.
2.5. El título principal debe mostrarse en color blanco, texto mayúscula, tamaño 24px,
fuente Sans Serif (Arial), alineación centrada.
2.6. El párrafo de información básica debe mostrarse en color blanco, texto tipo oración,
tamaño 12px, fuente Sans Serif (Arial), alineación centrada.
2.7. Los botones en estado inactivo deben tener borde con esquinas redondeadas color
amarillo, relleno transparente, texto color amarillo, mayúscula.
2.8. Por defecto el botón Download now debe mostrar relleno color amarillo, texto blanco,
mayúsculas.
2.9. Los botones deben reaccionar al efecto hover (colocar el puntero sobre) cambiando a
relleno color amarillo texto blanco.
2.10. La flecha debe estar en posición centrada, señalando hacia abajo y ser de color
blanco.

3. About
3.1. Debe mostrar cuatro secciones que contengan un ícono representativo, un título y una
descripción corta.
3.2. Las secciones deben ubicarse de forma horizontal (una al lado de otra).
3.3. Todo centrado.
3.4. Texto color gris oscuro.
Versión Mobile:
 3.5. Debe mostrar las secciones verticalmente, una encima de otra.

Services
 Debe tener color de fondo gris claro.
 Un título y un párrafo con información general de los servicios, centrados, color gris
oscuro.
 Una pequeña línea de división horizontal color amarillo, con un ancho de 50px.
 Cuatro secciones que incluyan título, descripción corta y un hipervínculo de learn more.
 Las secciones ubicadas horizontalmente, una al lado de la otra, texto alineado a la
izquierda.
 La primer letra de los títulos de cada sección den fuente tamaño 40px y negrita.
 Los hipervínculos tendrán tamaño 10 color amarillo.
 Al presionar clic sobre el enlace permitirán visualizar más información del contenido.
Versión Mobile:

 Las secciones se ubican de forma vertical una arriba de otra.

Portfolio
 Fondo color blanco.
  Debe contener un título principal color gris oscuro, en mayúscula, centrado, tamaño
30px.
 Una descripción corta color gris, centrada, tamaño 14.
 Una pequeña línea de división horizontal color amarillo, con un ancho de 50px.
 Debe contener 6 imágenes con un ancho de 300px y un alto de 200px, con márgenes
entre ellas, ubicadas una al lado del otra, tres en una fila y otras 3 abajo.
 Al posicionar el mouse sobre la imagen debe mostrar un párrafo con información al
respecto, fondo color amarillo y texto color blanco y al quitar el mouse debe mostrarse
nuevamente las imágenes.
Versión mobile:

 Las imágenes deben ubicarse una arriba de otra.

Testimonial
 Contendrá un slider con una pequeña foto de usuario, su comentario y su nombre.
 El slider cambiará automáticamente después de 7 segundos.
 Imagen de fondo, letra blanca, centrada.
 Foto del usuario con borde redondeado ancho de color blanco.

Blog
 Mostrará un título principal color gris oscuro, tamaño 30px, mayúscula centrado.
 Mostrará un párrafo de información, centrado.
 Una pequeña línea de división horizontal color amarillo, con un ancho de 50px.
 Mostrará tres secciones, con una imagen representativa, un título, una descripción corta
y un enlace para leer mas, además de un contador de visitas y comentarios.
 La imagen debe tener opacidad la cual se quitará al poner el mouse sobre ella y
aumentará su tamaño.
 El contador de visitas permitirá registrar la cantidad de vistas y comentarios en cada
sección.
 El enlace de Leer mas mostrará más información referente a la sección al presionar clic
sobre el, al posicionarse sobre él muestra subrayado y cambia de color.
Contact Us
 Fondo color gris oscuro.
 Mostrará un título centrado, color blanco, mayúscula, tamaño 30px.
 Muestra un párrafo descriptivo, centrado, color blanco.
 A la derecha muestra información de contacto (ubicación, correo electrónico y
teléfono).
 A la izquierda muestra un formulario con 4 campos de texto, para el nombre, correo,
asunto y mensaje que el usuario desee enviar.
 El formulario incluye un botón que al presionarlo debe enviar la información del
formulario al administrador del sitio web o a quien corresponda.
 El formulario posee bordes amarillos, sin rellenos, con textos que indican lo que va en
cada campo.
Version mobile:

 El formulario se ubica debajo de la información de contacto.

Footer
 Muestra información de copy rigth y derechos reservados, así como información del
diseñador del sitio web.
 El nombre del diseñador del sitio se mostrará en forma de enlace color amarillo, que
resaltará sobre el demás texto color gris oscuro.
 3. Definir requerimientos No funciones globales

a) La pagina no debe tardar mas de 10 segundos en cargar.

b) Debe ser visible correctamente en los navegadores (Chrome, Firefox, Edge, IE, Opera) y
en sus versiones.
c) Debe ser visible en diferentes dispositivos (mobile, Tablet, desktop).
d) El sitio debe organizarse en carpetas de acuerdo al tipo de archivos ( js, css, php, html,
etc)
e) Permitir la visita de múltiples usuarios al mismo tiempo.
f) Permitir la descarga simultanea de archivos.
g) Los enlaces deben ser fácilmente identificables.
h) Buen contraste en colores para mejor visibilidad del texto.
i) Imágenes con resoluciones y tamaños apropiados.
j) Se usen los colores de la organización (color de marca).
k) Que no haya errores ortográficos y gramática.
l) Uso correcto de símbolos, caracteres especiales.
m) Que el sitio sea accesible.
n) Que el sitio utilice keywords adecuados para que sea fácilmente identificado por
buscadores.
o) Utilizar fuentes Sans Serif para mejor legibilidad en pantalla.
p) El desplazarse de una sección a otra y al posicionarse sobre algunos elementos debe
tener un efecto de transición.

4. Priorizar requerimientos

Header
 Debe contener el logotipo y el menú principal.
 Al presionar clic sobre el logotipo muestra la sección Home.
 El menú debe presentar las opciones Home, About, Services, Portafolio, Testimonial,
Blog y Contact us.
 Cuando se da clic sobre una opción del menú me muestra la sección selecciona.
 Cuando se posiciona el puntero sobre la opción de menú esta cambia a color amarillo.
 El menú permanece siempre visible (fijo), independientemente de la sección donde se
encuentre el usuario.
 Cuando se posiciona el puntero o se presiona clic sobre la opción de menú esta cambia a
color amarillo.
Versión Mobile:

 Las opciones se muestran minimizadas y estarán en un menú desplegable.

Home:
 Debe contener un subtitulo, título principal, párrafo con información básica y dos
botones que permitan Download now y Learn More, y una flecha que permita
desplazarse a la siguiente sección.
 Al presionar clic sobre los botones debe mostrar la información correspondiente.
 Al presionar clic sobre la flecha debe mostrar la siguiente sección.

About
 Debe mostrar cuatro secciones que contengan un ícono representativo, un título y una
descripción corta.

Services:
 Un título y un párrafo con información general de los servicios, centrados, color gris
oscuro.
 Cuatro secciones que incluyan título, descripción corta y un hipervínculo de learn more.

Portfolio
 Debe contener un título principal y una descripción corta.
 Debe contener 6 imágenes con un ancho de 300px y un alto de 200px, con márgenes
entre ellas, ubicadas una al lado del otra, tres en una fila y otras 3 abajo.
 Al posicionar el mouse sobre la imagen debe mostrar un párrafo con información al
respecto, fondo color amarillo y texto color blanco y al quitar el mouse debe mostrarse
nuevamente las imágenes.

Testimonial
 Contendrá un slider con una pequeña foto de usuario, su comentario y su nombre.
 El slider cambiará automáticamente después de 7 segundos.

Blog
 Mostrará un título principal y un párrafo de información.
 Mostrará tres secciones, con una imagen representativa, un título, una descripción corta
y un enlace para leer más, además de un contador de visitas y comentarios.
 La imagen debe tener opacidad la cual se quitará al poner el mouse sobre ella y
aumentará su tamaño.
  El contador de visitas permitirá registrar la cantidad de vistas y comentarios en cada
sección.
 El enlace de Leer más mostrará más información referente a la sección al presionar clic
sobre él, al posicionarse sobre él muestra subrayado y cambia de color.

Contact Us
 Mostrará un título y un párrafo descriptivo.
 A la derecha muestra información de contacto (ubicación, correo electrónico y
teléfono).
 A la izquierda muestra un formulario con 4 campos de texto, para el nombre, correo,
asunto y mensaje que el usuario desee enviar.
 El formulario incluye un botón que al presionarlo debe enviar la información del
formulario al administrador del sitio web o a quien corresponda.

Footer
 Muestra información de Copy Rigth y derechos reservados, así como información del
diseñador del sitio web con un enlace.