GUIA DE ESTILOS

LIBRARYSEARCH
 Índice
Introducción ................................................................................................................................................ 3

Estructura ..................................................................................................................................................... 4

Área superior .............................................................................................................................................. 6

Inicio ........................................................................................................................................................... 6

Paginas ...................................................................................................................................................... 7

Área central ................................................................................................................................................. 8

Inicio ........................................................................................................................................................... 8

Quienes somos ...................................................................................................................................... 9

Contáctanos .......................................................................................................................................... 10

Área inferior ............................................................................................................................................... 11

General .................................................................................................................................................... 11

Elementos visuales ................................................................................................................................ 12

Diseño ....................................................................................................................................................... 12

Tipografía .................................................................................................................................................... 12

Color .............................................................................................................................................................. 13

Uso de los colores ............................................................................................................................. 14

Iconografía ................................................................................................................................................. 15

Imágenes..................................................................................................................................................... 16

Plantilla ........................................................................................................................................................ 18

Usabilidad Usuario ................................................................................................................................. 19

Buscador ................................................................................................................................................. 19

Contáctanos .......................................................................................................................................... 22

Usabilidad Administrador ................................................................................................................... 24

Inicio Sesión ......................................................................................................................................... 24

Bibliotecas ............................................................................................................................................. 25

Zonas ........................................................................................................................................................ 27

Servicios ................................................................................................................................................. 29

Temas ....................................................................................................................................................... 31

Comentarios .......................................................................................................................................... 33

P á g i n a 1 | 33
Guía de Estilos de

P á g i n a 2 | 33
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 | 33
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
1.-Cabecera: En esta sección se mostrará la barra de menú y
el fondo de la cabecera
2.-Cuerpo: Se mostrará la información que se dé como
resultado de la búsqueda
3.-Pie de página: Se muestra la información más relevante del
sitio web

P á g i n a 4 | 33
P á g i n a 5 | 33
Á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 6 | 33
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 7 | 33
Á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 8 | 33
Quienes somos
1.- Se mostrará la información de los diseñadores del sitio web

P á g i n a 9 | 33
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 10 | 33
Área inferior
General
1.- Pie de página: es destinado a la información destacada del
sitio web

P á g i n a 11 | 33
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 12 | 33
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 13 | 33
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 14 | 33
Iconografía

Icono Facebook: Este icono te redireccionará a

la página de Facebook de Troyanos

Icono Twitter: Este icono te redireccionará a la

página de Twitter de Troyanos

Icono Fallo de CRUD: Este icono será mostrado

a partir de un error al consultar

Icono Inicio Sesión: Este icono te redireccionará

al formulario para iniciar sesión como administrador

Icono de ubicación: Este icono sirve como

identificador para nuestra ubicación.
P á g i n a 15 | 33
 Icono de teléfono: Este icono sirve como identificador
para nuestro contacto por medio de un numero de teléfono.

Icono de correo: Este icono sirve como identificador

para nuestro correo y puedas enviar mensaje para aclarar
dudas.

Imágenes
Las imágenes utilizadas en el sitio son distintivas de este y sus
medidas están hechas en pixeles (px)

Tamaño que tomara el fondo de la cabecera en la pantalla de

una laptop

P á g i n a 16 | 33
Tamaño que tomara el fondo de la cabecera en la pantalla de
una Tablet

Tamaño que tomara el fondo de la cabecera en la pantalla de

un celular (iPhone X)

P á g i n a 17 | 33
 1. En la página de inicio se incorpora como fondo de la
cabecera

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

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 18 | 33
Usabilidad Usuario
Buscador
Para que el usuario/visitante pueda realizar una búsqueda no es
necesario que inicie sesión.
P á g i n a 19 | 33
Debe iniciar por seleccionar una de las ubicaciones que se
encuentran registradas.

Despues deberas seleccionar el servicio que buscas dentro de

la biblioteca.

P á g i n a 20 | 33
Antes de terminar tendrás que seleccionar el tema de tu interés

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 21 | 33
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 22 | 33
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 23 | 33
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 24 | 33
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 bibliotecas.

P á g i n a 25 | 33
Después de agregar una biblioteca se mostrará en una tabla
que contiene el ID de la biblioteca, el nombre, zona en la que
se ubica, los servicios que presta y los temas que tiene.
Así como dos botones los cuales son para modificar y eliminar
la biblioteca.
Al dar clic sobre eliminar borrara el registro de la biblioteca por
completo.

Al presionar sobre editar te redireccionará a un nuevo

formulario donde podrás modificar la ubicación, servicios y
temas
P á g i n a 26 | 33
Zonas

Para poder Realizar operaciones en el gestor de bibliotecas

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

Después de agregar una zona se mostrará en una tabla que

contiene el ID de la zona, el nombre y su descripción.

P á g i n a 27 | 33
Así como dos botones los cuales son para modificar y eliminar
la biblioteca.

Al dar clic sobre eliminar borrara el registro de la zona por

completo.

Al presionar sobre editar te redireccionará a un nuevo

formulario donde podrás modificar la descripción de la zona.

P á g i n a 28 | 33
Servicios

Para poder Realizar operaciones en el gestor de bibliotecas

deberá ingresar a “Servicios” y encontrará un formulario que le
permitirá agregar servicios.

Después de agregar una zona se mostrará en una tabla que

contiene el ID del servicio, el nombre y su descripción.

P á g i n a 29 | 33
Así como dos botones los cuales son para modificar y eliminar
la biblioteca.

Al dar clic sobre eliminar borrara el registro del servicio por

completo.

Al presionar sobre editar te redireccionará a un nuevo

formulario donde podrás modificar la descripción del servicio.

P á g i n a 30 | 33
Temas

Para poder Realizar operaciones en el gestor de bibliotecas

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

Después de agregar una zona se mostrará en una tabla que

contiene el ID del tema, el nombre y su descripción.

P á g i n a 31 | 33
Así como dos botones los cuales son para modificar y eliminar
la biblioteca.

Al dar clic sobre eliminar borrara el registro del tema por

completo.

Al presionar sobre editar te redireccionará a un nuevo

formulario donde podrás modificar la descripción del tema.

P á g i n a 32 | 33
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 33 | 33