Presentación donde se detallan los recursos de diseño utilizados para construir el sitio web de una floristería ecológica. Como proyecto para la asignatura GISC. Lic mk. Universidad de Sevilla.
Desarrollo y Aplicación de la Administración por Valores
Diseñoyrecursosenflowerment
1. Ubicación de los principales recursos
y elementos de diseño empleados.
2. VISUALIZACIÓN
UTILIZAR INTERNET EXPLORER EN 1024 X 768:
– EVITA EL MOVIMIENTO DE CAPAS
– BUEN FUNCIONAMIENTO DEL MENU POR CAPAS
– APARECEN TODOS LOS RECURSOS
(PLUG-INS, JAVA, ETC.)
3. esquema de la web
INDEX"
HOME "
- ABOUT US"
Empresa"
Historia"
- FLOWERS"
Ramos"
Centros"
Bouquets"
Para la casa"
- ARTDECORA"
- ENJOYFLOWERS"
Aprendeflowers"
Dedicatorias"
Videoflowers"
Artmacetas"
- CONTACT US
"
Pedidos"
Contacto"
4. index
RECUSOS
• Música: Salta al entrar en Index. (Midi)
– Se escucha este formato en la mayoría de navegadores.
– Añadida como propiedad de página.
• Imagen vinculada a la Landig page (HOME 11)
• Etiqueta en la imagen inicial, de “entrar en la Web”.
• Marquesina con información de la empresa en el
margen inferior.
DISEÑO
• Tabla.
– Incluye imagen de fondo dentro de una celda (lunares
rosas) y también de rosas en otras dos (arriba y abajo).
– Diferentes tamaños de celda.
– Sin bordes.
5. home
RECUSOS
• Formulario de registro
– Botón interactivo para enviar formulario
• BANNER: Administrador de titulares
• Menú principal: Iframe
– Hipervínculos a Html.
• Hipervínculo a pdf en distinta ventana (boletín)
DISEÑO
• Tabla.
– Diferentes tamaños de celda.
– Sin bordes. Excepto en la del bottom que separa los
logos (propiedades de celda).
6. Menú principal
Desde este menú accedemos mediante hipervínculos a
distintas páginas html
RECUSOS QUE ENCONTRAMOS EN TODAS ESTAS
PÁGINAS Y EN HOME
• Hipervínculos externos (redes sociales)
• Publicidad de otra página en el margen superior
derecho (Capa)
• Hipervínculo en el nombre de la empresa con index
• Hipervínculo a html
- política de privacidad,
- programa de afiliados
- política de seguridad
7. Menú principal
DISEÑO
• Tabla.
– Diferentes tamaños de celda.
– Sin bordes.
– Color de fondo plano beig
DISEÑO SUBMENÚ
Submenú con capas en todas (a excepción de Artdecora):
– Incluye imagen de fondo dentro de una celda (lunares rosas).
– En esta celda está el submenú que muestra las diferentes
capas pasando el ratón por encima, sin necesidad de clikear
(Comportamientos-Visibilidad)
– La celda central es la única que posee barra de
desplazamiento y donde encontraremos la información útil de la
página. (Iframe a html creados por nosotros)
8. about us
DISEÑO
• Iframe a HTML en el que mediante una tabla con
diferentes tamaños de celda se distribuye el
contenido (Uniones, divisiones, celdas con fondo
y bordes de diferente color – enflowerizate 6 razones-)
RECUSOS
• En la capa de historia, al final, encontramos un
hipervínculo a un documento .pdf que se abrirá en
una nueva ventana
• Links a redes sociales para comentar la filosofía
enflowerment.
9. flowers
RECUSOS
– En cada una de las capas de la celda central,
donde se encuentran los productos divididos por
categorías, encontramos debajo de cada uno e
ellos un hipervínculo a una página html, donde se
muestran:
- más características del producto
- Iframe de botón “Me gusta” donde el
ususario puede opinar si le gusta el producto
- Iframe para hacer cualquier comentario o
sugerencia sobre el producto.
– En las diferentes secciones se muestra debajo la
complementariedad de productos (Servicio
ampliado)
10. artdecora
RECUSOS
• Galería fotográfica donde los usuarios de la página
pueden observar diferentes tipos de decoraciones
florales llevadas a cabo por empresa
• Fondo de la celda negro para que se asemeje a
una proyección cinematográfica.
11. enjoyflowers
RECUSOS
aprendeflowers
- Gráfico con zonas activas para visualizar los
diferentes cursos ofertados
- Marcador en palabra “volver” al finalizar la
información de cada curso que te lleva de nuevo
al gráfico de zonas activas para seguir visitando
cursos (evita el desplazamiento con la barra)
- Marcador para contacta con nosotros después
del gráfico
- Sustitución de imágenes: sobre de mail.
- Hipervínculo sobre mail: editor de correo.
12. enjoyflowers
RECUSOS
dedicatorias
- Marcadores para navegar dentro del Iframe. Para
evitar que el usuario se tenga que desplazar con
la barra. Palabras destacadas en verde y
subrayadas.
- Hipervínculos a páginas externas.
- DISEÑO: TABLA con fondos diferentes de celdas
para aparentar un cuadro.
- Iframe vinculado a un servidor externo de foros
gratuitos.
- Editor de imágenes Front Page: cambio de color
dedicatoria escrita a mano en rosa.
13. enjoyflowers
RECURSOS
videoflowers
-Marcadores y Iframes copiando el código Insertar en
Youtube.
RECUSOS
artmacetas
- Marcadores para el desplazamiento
- Hipervínculo Enflowerment a About us.
- Editor de imágenes: Suprimir fondo imagen top
macetas.
- Diseño tablas, encuadra macetas cambiantes.
- Intercambio de imágenes.
- Hipervínculo a web externa: masquemuchoo
14. contact us
RECUSOS
pedidos
• Botón interactivo hipervínculo a microsite (html
en nueva ventana): OFERTAS y REGALOS
• Hipervínculo a otra sección dentro de la
página ABOUT US en Enflowerment
destacado.
• DISEÑO tablas, celdas propiedades diferentes
(colores de fondo, tamaños distintos)
• Formulario: Opciones diversas (cajas de texto,
botón de opción, cuadro desplegable, etc.)
No funciona al no estar conectado con una base de datos.
Ni el de la home tampoco, sólo a modo de muestra.
15. contact us
RECUSOS
contacto
• Marcadores para el desplazamiento a mail
• Sustitución de imágenes borde o resplandor
sobre.
• Hipervínculo de imagen, sobre a servidor de
correo preestablecido en el equipo.
• DISEÑO tablas, celdas sin borde diferentes
tamaños.
• Iframe de Google Maps en al insertar el código
en el nuestro.
16. microsite
RECUSOS
• Efectos de transición de páginas
• El logotipo SB es un hipervínculo a index
DISEÑO
• Página de marcos
– Incluye imagen de fondo dentro de una celda (lunares
rosas).
– Diferentes tamaños de celda.
– Sin bordes.
– en este submenú hay que clikear para pasar de unas
páginas html a otras.
17. CARGA EN UN SERVIDOR
http://enflowerment.260mb.com/about.htm