Diseñoyrecursosenflowerment

17
Ubicación de los principales recursos y elementos de diseño empleados.

description

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.

Transcript of Diseñoyrecursosenflowerment

Page 1: Diseñoyrecursosenflowerment

Ubicación de los principales recursos y elementos de diseño empleados.

Page 2: Diseñoyrecursosenflowerment

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.)

VISUALIZACIÓN

Page 3: Diseñoyrecursosenflowerment

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"

Page 4: Diseñoyrecursosenflowerment

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.

Page 5: Diseñoyrecursosenflowerment

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).

Page 6: Diseñoyrecursosenflowerment

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

Page 7: Diseñoyrecursosenflowerment

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)

Page 8: Diseñoyrecursosenflowerment

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.

Page 9: Diseñoyrecursosenflowerment

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)

Page 10: Diseñoyrecursosenflowerment

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.

Page 11: Diseñoyrecursosenflowerment

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.

Page 12: Diseñoyrecursosenflowerment

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.

Page 13: Diseñoyrecursosenflowerment

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

Page 14: Diseñoyrecursosenflowerment

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.

Page 15: Diseñoyrecursosenflowerment

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.

Page 16: Diseñoyrecursosenflowerment

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.

Page 17: Diseñoyrecursosenflowerment

http://enflowerment.260mb.com/about.htm

CARGA EN UN SERVIDOR