GUIA DE ESTILOS

LIBRARYSERACH
 Índice
Introducción ................................................................................................................................. 3
Estructura...................................................................................................................................... 4
Área superior ............................................................................................................................... 5
Inicio............................................................................................................................................. 5
Paginas ....................................................................................................................................... 6
Área central .................................................................................................................................. 7
Inicio............................................................................................................................................. 7
Quienes somos ....................................................................................................................... 8
Contáctanos ............................................................................................................................. 9
Área inferior ............................................................................................................................... 10
General...................................................................................................................................... 10
Elementos visuales ................................................................................................................ 11
Diseño ........................................................................................................................................ 11
Tipografía..................................................................................................................................... 11
Color ............................................................................................................................................... 12
Uso de los colores .............................................................................................................. 13
Iconografía .................................................................................................................................. 14
Imágenes ..................................................................................................................................... 15
Plantilla ......................................................................................................................................... 16
Usabilidad Usuario.................................................................................................................. 17
Buscador .................................................................................................................................. 17
Contáctanos ........................................................................................................................... 20
Usabilidad Administrador.................................................................................................... 22
Inicio Sesión........................................................................................................................... 22
Bibliotecas .............................................................................................................................. 23
Zonas ......................................................................................................................................... 24
Servicios................................................................................................................................... 24
Temas ........................................................................................................................................ 25

P á g i n a 1 | 25
Comentarios ........................................................................................................................... 25

Guía de Estilos de

P á g i n a 2 | 25
Introducción

Esta guía de estilos está dirigida a los usuarios y a los

administrativos según su función o curiosidad para el
entendimiento de la página, en este se desglosa de manera
amplia y detallada cada sección de los estilos de la página,
explica las dimensiones de cada sección, la simbología
utilizada dentro de la página, además de definir los
hipervínculos y los métodos de búsqueda y acceso a cuentas
y la ubicación de estas dentro de la página.
Esta guía es una referencia, que busca informar a cualquier
usuario las funciones principales de la página y de esta forma
poder utilizarla de manera correcta o en todo caso corregir
errores que pueden surgir a largo plazo.
Cabe resaltar que estos parámetros son los utilizados en las
primeras versiones del proyecto y que pueden ser
modificados con el paso del tiempo y con esto también se
verá afectada la guía de estilos, aun de esta forma la utilidad
de esta guía de estilos no es efímera, sirve como una base la
cual se verá en una constante actualización y servirá como
una especie de registro la cual marque la evolución de
nuestro proyecto en sus etapas.
Como último, cabe resaltar la utilidad de la guía de estilos en
la administración del proyecto ya que ofrece un mayor control
en las nuevas versiones y como un punto de comparación
con versiones anteriores.

P á g i n a 3 | 25
Estructura
La interfaz se conforma por 1 columna y 3 filas, que permitirá
ayudar a la distribución de las secciones. Las secciones son:
Cabecera
Cuerpo
Pie de pagina
Esta organización permite:
Que sea amigable para el usuario
Se pueda adaptar completamente a diferentes
dispositivos
Fácil localización de los elementos que componen el sitio
web

P á g i n a 4 | 25
Área superior
Inicio
1.- Barra de menú: este espacio es destinado para el logo y
menú que contendrá el sitio web
2.- Fondo cabecera: espacio destinado para un fondo de la
cabecera como contraste de la barra de menú, y también se
encontrará el buscador del sitio.

P á g i n a 5 | 25
Paginas
1.- Barra de menú: este espacio es destinado para el logo y
menú que contendrá el sitio web
2.- Fondo cabecera: espacio destinado para un fondo de la
cabecera como contraste de la barra de menú, y mostrara el
nombre de la sección vista.

P á g i n a 6 | 25
Área central
Inicio
1.- El área central se compone de una única columna donde se
mostrarán los resultados de la búsqueda realizada en el inicio.

P á g i n a 7 | 25
Quienes somos
1.- Se mostrará la información de los diseñadores del sitio web

P á g i n a 8 | 25
Contáctanos
1.- En este apartado se mostrará los datos de donde ubicarnos,
así como un formulario para enviar sus comentarios

P á g i n a 9 | 25
Área inferior
General
1.- Pie de página: es destinado a la información destacada del
sitio web

P á g i n a 10 | 25
Elementos visuales
Diseño

Tipografía
Para el sitio web se ha empleado la fuente Poppins, y en caso
de no poder ser utilizada emplea Sans-serif.

P á g i n a 11 | 25
Color
LibrarySearch utiliza los colores negro, café y amarillo en el
sitio como parte de su diseño

Negro: Es utilizado para la barra de menú para separarlo de la

imagen de fondo

Café: Es utilizado para el botón de “Buscar Bibliotecas” por

parte del usuario y para los botones “Agregar”, “Modificar” y
“Eliminar” por parte del administrador

P á g i n a 12 | 25
Amarillo: Es utilizado para resaltar el texto de la barra de menú
sobre el que está puesto el mouse, así como para el botón
“Enviar Mensaje” por parte del usuario

Uso de los colores

P á g i n a 13 | 25
Iconografía

1.- Icono Facebook: Este icono te redireccionará a la página de

Facebook de Troyanos

1.- Icono Twitter: Este icono te redireccionará a la página de

Twitter de Troyanos

1.- Icono Fallo de CRUD: Este icono será mostrado a partir de

un error al consultar

1.- Icono Inicio Sesión: Este icono te redireccionará al

formulario para iniciar sesión como administrador

P á g i n a 14 | 25
Imágenes
Las imágenes utilizadas en el sitio son distintivas de este y sus
medidas están hechas en pixeles (px)

1. En la página de inicio se incorpora como fondo de la

cabecera

2. En el sitio se incorpora como Logo de este.

P á g i n a 15 | 25
Plantilla
En la plantilla es posible cambiar la información y diseño, pero
es recomendable mantener el diseño ya que podrían presentar
fallas al realizarse modificaciones.

P á g i n a 16 | 25
Usabilidad Usuario
Buscador
Para que el usuario/visitante pueda realizar una búsqueda no
es necesario que inicie sesión.

Debe iniciar por seleccionar una de las ubicaciones que se

encuentran registradas.

Después selecciona el horario en el que está abierta la

biblioteca
P á g i n a 17 | 25
Despues de seleccionar el horario deberas seleccionar el
servicio que buscas dentro de la biblioteca

Antes de terminar tendrás que seleccionar el tema de tu interés

P á g i n a 18 | 25
Por ultimo deberás dar clic sobre “Buscar Bibliotecas” para que
te muestre las bibliotecas que tengan esas características.

P á g i n a 19 | 25
Contáctanos

Para poder enviar un mensaje deberas ingresar tu nombre

(Este puede ser solamente el nombre o con apellidos).

Despues deberas ingresar tu correo electronico por el cual nos

podremos poner en contacto en caso de ser necesario

P á g i n a 20 | 25
Deberas ingresar el tema y el mensaje por el cual nos
contactas

Por ultimo deberás dar clic sobre enviar mensaje, una vez
hecho no podrás modificar el mensaje por lo que tendrás que
escribir uno nuevo.

P á g i n a 21 | 25
Usabilidad Administrador
Inicio Sesión

En el inicio del usuario en el pie de página se encuentra un

icono negro que permite el acceso al formulario de inicio de
sesión.

Para poder ingresar como administrador se deberá identificar

con un correo y contraseña válidos.

P á g i n a 22 | 25
Una vez hecho esto tendrá acceso a las opciones del
administrador.

Bibliotecas

Para poder Realizar operaciones en el gestor de bibliotecas

deberá ingresar a “Bibliotecas” y encontrará un formulario que
le permitirá agregar, modificar y eliminar bibliotecas.

P á g i n a 23 | 25
Zonas

Para poder Realizar operaciones en el gestor de bibliotecas

deberá ingresar a “Zonas” y encontrará un formulario que le
permitirá agregar, modificar y eliminar zonas.

Servicios

Para poder Realizar operaciones en el gestor de bibliotecas

deberá ingresar a “Servicios” y encontrará un formulario que le
permitirá agregar, modificar y eliminar servicios.
P á g i n a 24 | 25
Temas

Para poder Realizar operaciones en el gestor de bibliotecas

deberá ingresar a “Temas” y encontrará un formulario que le
permitirá agregar, modificar y eliminar temas.

Comentarios

Para poder visualizar el gestor de comentarios deberá ingresar

a “Comentarios” y encontrará los comentarios enviados por
parte de los usuarios.
P á g i n a 25 | 25