Criterio D: Diseo del producto

Estructura general
Los siguientes esquemas muestran el diseo del sitio Web que fue aprobado
por Marco Panduro.
Estructura general del sitio web de Marco Panduro [1]
Uso para cada pgina
1.
2.
3.
4.
5.
6.

Pgina de inicio
Servicios
Portafolio de Servicios
Histrico de la empresa
Equipo de Trabajo
Formulario de contacto

Mens y enlaces a las Secciones del Sitio Web (1-6)

Barra de Titulo

Divisin 1

Anclas de
vnculo con
secciones

Inicio de
Pgina
Servicio Prestados
Informacin
(logo)

Texto e imgenes de los Servicios

Portafolio de
servicios
Imagen
(detalle)

Informacin
(logo)

Informacin
(logo)

Datos e
imgenes
suministrados
por Marco.

Histrico de la empresa
Imagen
(detalle)

Imagen
(detalle)

Formulario de Contacto

Pie de Pgina
Proyecto desarrollado en
SUBLIME TEXT

Todas las
Vistas estn
en una misma
pgina por lo
tanto usan la
misma hoja
de estilos.

Estructura general del sitio web [2]

Carpetas
florysalon
Carpeta con 4 sub carpetas

Detalle de la carpeta Flory Salon

css
img
fonts
js

Hojas de Estilos usadas en el sitio

web
Guarda las imgenes
Fuentes utilizadas en el sitio web
Archivos Javascript

Se tiene un archivo index.php en el cual funciona la pgina web

Procesos del sitio web (CSS/Visualizacin)

Visualizacin de imgenes
Hojas de estilo en cascada
Agency.css

Las imgenes se acomodarn al tamao de

la divisin que aloje la imagen

Librera de css del template

Bootstrap.min
Permite el diseo multiplataforma
segn el tamao del dispositivo

Clic en la imagen (Lanzador del modal)

Font-awesome
Librera de fuentes del template

Aparecer un modal o ventana emergente

detallando lo propuesto en la imagen

Informacin obtenida en el levantamiento de la informacin en reuniones entre el desarrollado (yo) y el cliente (Marco)

Las dificultades con el diseo del sitio web con respecto a la maquetacin se ver en el desarrollo del mismo.

Estructura Interna
Index (pgina principal)
Servicios
Barra de
Mens y enlaces a las

Imagen del
local

Histrico de la empresa
contacto
Mens y enlaces a las

Imagen
Histrico de la
empresa
Datos
proporcionado
s por Marco

Servicios

Portafolio de
Mens y enlaces a las

Mens y enlaces a las

Servicios de la
Empresa
Imagen

Imagen

Portafolio de
Servicios

Imagen

Imagen

Imagen

Imagen

Imagen

Imagen

Equipo de Trabajo
Mens y enlaces a las

EQUIPO DE
Imagen

Imagen

Imagen

Formulario de
Mens y enlaces a las

FORMULARIO DE
CONTACTO MEDIANTE
EMAIL

Imagen

Pie de Pgina

Lista de recursos y tcnicas

Recursos
Archivos Javascript

Informacin detallada
Contendrn la interaccin del usuario mediante
eventos
Los archivos e imgenes sern proporcionados
por Marco

Informacin

Tcnicas
Libreras de CSS y JS
Creacin de enlace con correo electrnico
Modificacin de contenido
Manipulacin de los modales o ventanas
emergentes

Informacin detallada
Para facilitar el diseo de la pgina web
Mediante una funcin PHP se podr enviar
correos a la empresa
Es accesible el cdigo a la modificacin en caso
de descontento con el diseo
Segn las librera los modales funcionaran
como ventanas emergentes en la misma pgina
web

Plan de pruebas
Prueba

Datos de la
prueba

Prueba de la portada

Parte del
sistemas
sometida a
prueba

Resultado
esperado

Resultado
real

Comentarios

Referencia al
producto

El archivo que El archivo de

contiene la
inicio de se
pgina web
llama index.php
es buscado
mediante su
extensin php
segn la alta
prioridad que
tiene esos
tipo de
archivos en el
servidor de
internet
Prueba del producto
Las anclas en Anclas entre
el sitio web
divisiones
funcionan

Los enlaces en
la pgina te
llevan a la
misma pgina
recargada
mediante
anclas.

El archivo se
abre de forma
eficaz en
cualquier
ubicacin que
se encuentre.

SI

Anclas

SI

Imgenes

Imgenes
proporcionadas
por Marco

Formulario de
enva a correo
electrnico

Mtodo email

Estandarizacin
de los tipos de
imgenes
segn su
intensin
Botn Enviar

Las anclas
funcionan
segn lo
previsto.
Las imgenes
se cargan
correctamente.

Se consta de un
formulario en el
cual se rellenan
datos para que
este llegue al
correo de la
empresa

SI

SI

Lo previsto en el levantamiento de informacin debe

satisfacer mis necesidades hasta el momento, por lo
tanto se est conforme con los diseos planteados.
MARCO PANDURO
(CLIENTE)