Libro de Estilos Web

8/6/2019 Libro de Estilos Web

1/14

1

LIBRO DE ESTILOS SITIO WEB


2/14


3/14

3

En un segundo nivel de jerarquia mediante mens

desplegables estar en cada seccion correspon-diente:

NOVEDADES : Las novedades del sector

CATALOGO : catalogo de todos los productosy unacceso a la tieda para adquirir el producto.

LA REVISTA : todo lo relacionado con la revista ,suscripciones , informacion , ademas de un con-curso para los proximos numeros de la revista.

CONOCENOS : Mapa interacctivo del centro contodas las secciones y la informacion .

BLOG : Acceso a un blog exterior creado para laweb , donde los usuarios podras comentar , ect..

SUBSECCIONES :

_ DVD_ Blu-Ray_ Libros_ Cd_ Proximamente_ Top 10

_ DVD_ Blu-Ray_ Libros_ Cd_ Coleccionismo_ Acceso a tienda

_ Suscrpcion_ Informacin_ El festival_ Concurso

EL CENTRO

home catalogonovedades la revista recomendamos


4/14

4

En un segundo nivel de jerarquia mediande mens

desplegables estar en cada seccion correspon-diente:

SUBSECCIONES :

_ Informacin del festival_ Proximos festivales_ Colabora con nosotros

PROGRAMACIN : Toda la programacin del fes-tival .

CALENDARIO : Calendario mensual con los dea-tos de los dias de las proyecciones .

INFORMACIN : Informacion sobre el festival yproximos eventos.

TEMTICA: Informacion sobre la temtica del mes

NOTCIAS : Noticias que esten relacionadas con latemtica del mes.

En el footer estarn , acceso a rede sociales , con-tacto , e informacion practica del centro .

FOOTER :

EL FESTIVAL

home calendarioprogramacin tematica noticias


5/14

5

SUBMEN

contactoayuda

zona usuariobuscar

CONTACTO: Informacin de contcto para losusuarios

ZONA USUARIOS: Zona reservada mediante cla-ve para los usuarios .-Esta zona deber estar en formato PHP ya que

requiere de una base de datos y un buscador paralos usuarios.

AYUDA: Zona de ayuda a la navegacion por el sitio

BUSCAR: Buscador de palabras clave para la faci-lidad de busqueda de los usuarios.

SUBMENS:


6/14

6

_ Potenciar el festival de cine como evento inde-pendiente pero al mismo tiempo relacionado con elcentro , de esta manera atraer e cliente que esteninteresado solo por el festival y biceversa.

_ Mayor intereaccion con nuestros clientes me-

diante un blog._ Tienda on-line para abaracar mayor espaciogeogrco.

PUNTO FUERTE DE LA WEB :

FESTIVAL

DE CINE

BLOGde usuar ios


7/14


8/14

8

_ En el Heather estar el logotipo con una proyec-cion de imagenes hecho con ash , y se manten-dr jo en el scrool de la web .

_ El men ser ser superior y se mantendr jo enel scrool de la web insertado dentro del footer.

_ El top 10 se mantendra en casi todas las seccio-nes.

_ Scroll vertical (90 px aprox)

_ Acceso directo a la seccion de festival

_ En esta seccion apareceran novedades e image-nes relacionadas.

_Se utilizar la misma reticula para ambas webs,cambiando solo a nivel cromatico.

RETICULAS POR SECCIONES :


9/14

9

_ Esta reticula ser solo para la seccion de catalogo _ Esta reticula ser para el resto de secciones


10/14

10

_ Web de ANCHO FIJO ( 960 px )

_ Scroll vertical (90 px aprox)

_ Navegacin reticular

_ El formato ser en PHP ya que la web requiere debase de datos de usuarios y de contenidos.

_ BLOG y TIENDA sern externos a la web : el blogcon wordpress y la tienda con prestashop.

_ La division en dos partes de la web lo es tambienen contenidos . La 1 web ser sobre contenidos yservicios del centro y la 2 ser exclusibamente decontenidos sobre el festival de cine del centro.

_Para los recursos grcos se utilizar Javascrip

en vez de Flahs ya que el Javascrip es mucho mascomun en los equipos de los usuarios.

DATOS TECNICOS:


11/14

11

CABECERA:

_ La cabecera ser esttica ((no se mover con elScrool)) de manera que el usuario siempre trengavisible el men de navegacio.

_ En la cabecera estar el logor , el men , y elsubmen .

_ Habr un clip de imagenes que se ira proyectan-do al mismo tiempo que el carrete de pelicula del

logotipo ir girando , para dar la sensacion de quese proyectan las imagenes sobre la cabecera.

FOOTER:

_ El footer ser estatico ((no se mover con elScrool)) de manera que el usuario siempre trengavisible el men de navegacio.

_ Contendr acceso a redes sociales e informa-cion legar y de contacto.

_ Habr tambien acceso directo a todas las partesde los mens de ambas paginas.

NAVEGACIN:

MEN Y SUBMEN

ACCESO A REDES SOCIALES


12/14

12

_ A medida que los usuarios se muevan por lassecciones del men tendran una indicacion me-diante un color gris de la seccion exacta del men

en la que se encuentras . As se facilitar la nave-gacion por los contenidos .


13/14

13

NATIVAS:

_ Arial black textos y titulares

_Arial textos y titulares

RASTERIZADAS:

_Cooperplate men

_Las pastillas publicitarias y de noticas tendran suspropias tipograas acordes con las imagenes y es-taran raterizadas.

_LOS TEXTOS ESTARAN SIEMPRE JUSTIFICA-DOS EN BANDERA.

TIPOGRAFIAS:


14/14

14

METAFORA DE CLARO / OSCURO:

_Con la nalidad de diferenciar las dos web rela-cionadas entre si , se utilizara una metafora entreclaro y oscuro .

WEB DE EL CENTRO : Estar en CLAVE BAJA confondo en blanco 100% y siempre utilizando tam-bien el color Gris corporativo para diferenciar sec-ciones o pestaas.

WEB DEL FESTIVAL : Estar en CLAVE ALTA confondo negro 100% y siempre utilizando tambien elcolor Gris corporativo para diferenciar secciones opestaas.

Se a decidido este color para reforzar la sensacionde oscuro en una sala de cine ya que esta webes exclusibamente sobre el festival.

El logotipo y el color gris corporativo se suavizarpara que se distinga bien del fondo negro.

USOS DEL COLOR:

RGB :135 - 35 - 51 RGB :135 - 35 - 51 MODIFICADO

Documents

Libro de Estilos Web