Crit D Diseño Del Producto

Criterio D: Diseño del producto Estructura general En los siguientes esquemas se muestra el diseño elegido por el c liente Ronal Zapata.

Estructura general del sitio web del cliente Ronal Zapata Plantilla de diseño para cada uno de las páginas del sitio web. 1. Inicio 2. Quienes somos 3. Recomendaciones 4. Ubicación 5. Últimas novedades

La fotografía será facilitada por Ronal Zapata

Nombre del negocio

fotografía del negocio

Menú del sitio web (enlaces de las páginas 1-5)

División 1 División 2

F

B b

a

Marco 2 a

a c rr e o s

Clasificación de los productos Marco 3 Las imágenes serán creadas en un sitio web online denominado: Collage de fotos

Primera clasificación

Marco 1 Transición de imágenes

c k ia , tw l

Marco 4

c o it n te h r,

Segunda clasificación

NUTRDRUPS

ALMACIGRAM

Imagen de la marca con un enlace a otra página

Imagen de la marca con un enlace a otra página

Imágenes relacionadas relacionadas al negocio con frases de marketing Marco 5 Tercera clasificación BLACKSOIL Imagen de la marca con un enlace a otra página Pie de página: Información sobre el cliente (texto): contactos y redes sociales con hipervínculos directos al perfil del propietario del negocio La información será facilitada por Ronal Zapata

o o

ip G e m rv a ín il c . :

s

lo

u

Procesos del sitio web (CSS/Visualización) Hojas de estilo en cascada General

Marco 3

Color de fondo: banco

Fondo: imagen

Texto: varía de acuerdo a los marcos

Texto de la imagen: blanco

Enlaces: verde

Marco 4

Marco 1

Fondo: imagen

Colores de imágenes: predominación del verde

Texto de la imagen: blanco

Colores del texto de las imágenes: amarillo, banco y marrón Marco 2

Marco 5

Color de fondo: color general del sitio

Fondo: imagen

Texto: blanco

Texto de la imagen: blanco

Estructura interna

Perfil (quienes somos)

Página de cada marca

Index (página principal) BARRA DEL TITULO MENU DESPEGABLE DESPEGABLE CON ENLACES A LAS OTRAS PÁGINAS

BARRA DEL TITULO MENU DESPEGABLE DESPEGABLE CON ENLACES A LAS OTRAS P ÁGINAS Transición de fotografías del negocio

Imagende la marca

BARRA DEL TITULO MENU DESPEGABLE DESPEGABLE CON ENLACES A LAS OTRAS PÁ GINAS

Imagende la marca

Transicipón de imágenes acerca del negocio

Texto facilitado facili tado por Ronal Zapata producto 1

producto 2

producto 3

producto 4

Texto facilitado por Ronal Zapata

Imagen de la marca

INFORMACIÓN PERSONAL DEL PROPIETARIO DEL NEGOCIO

INFORMACIÓN PERSONAL DEL PROPIETARIO DEL NEGOCIO

Recomendaciones

Ubicación

BARRA DEL TITULO MENU MENU DESPEGABLE DESPEGABLE CON ENLACES A LAS OTRAS PÁGINAS

Recomendaciones planteadas por Ronal Zapata sobre la utilización de los productos

INFORMACIÓN PERSONAL DEL PROPIETARIO DEL NEGOCIO

Marco Marco para comentarios y preguntas

INFORMACIÓN PERSONAL DEL PROPIETARIO DEL NEGOCIO

BARRA DE TITULO MENU DESPEGABL DESPEGABLEE CON ENLACES A LAS OTRAS PÁGINA S

IMAGEN DEL MAPA CAPTURADO DE Imágenes de l a fachada GOOGLE DE DONDE SE ENCUENTRA EL del negocio NEGOCIO

INFORMACIÓN PERSONAL DEL PROPIETARIO DEL NEGOCIO

Lista de recursos y técnicas

Recursos

Información detallada

Cursos de programación programación en HTML5 y CSS

Archivos de video y texto obtenidos de la web

Información del negocio y el cliente

Archivos de texto y archivos de imágenes proporcionados proporcionados por Ronal Zapata

Softwares de programación programación

Programas que sean compatibles a la programación programación en HTML5 como: Editplus, Dreamweaver y sublimtext en su última versión

Técnicas

Información detallada

Uso del lenguaje de programación programación HTML

Para dar la estructura básica y principal de un sitio web: header, body, nav y footer.

Uso de lenguaje de programación CSS

Para dar el diseño y los estilos al s itio web. En otras palabras la apariencia y la presentación. Esto debido a que, las visitas a nuestro sitio web dependerá de la buena presentación que tenga.

Uso de transiciones

Para otorgarle el dinamismo al sitio web y la interacción de este con los usuarios.

Manipulación de gráficos

Para la disminución del peso y el tamaño de las imágenes

Plan de pruebas

Prueba

Datos de la prueba

Parte del sistema sometida a prueba

Resultado esperado

Prueba de la portada – ELEMENTO REQUERIDO PARA EL CRITERIO G Los archivos se abren desde la

Asegurarse de que el

portada y esto

archivo de la página de

Los enlaces de la

según lo previsto en

funciona en tres

inicio se llama

portada son relativos

tres ubicaciones o

ubicaciones o

Index.htm

soportes distintos Prueba del producto

Los archivos se abren

soportes distintos

Resultado real

Comentarios

Referencia al producto

 Aceptación del cliente cliente

Confirmo que la especificación de requisitos responde a mis necesidades y que los diseños arriba indicados son apropiados para la creación del producto.

(Cliente)