1 | P g i n a

Hhu-Soft

UNIVERSIDAD TECNOLGICA

DEL VALLE DEL MEZQUITAL

Aprender, Emprender, Transformar

Gua de Estilo

Hhu-Soft

Presentan:

Alejandro Hernndez Pea

Areli Cruz Simon

Anali Trejo Rubio

Asesor:

Ing. Mara de Lourdes Prez Ruiz

Revisores:

Jacobo de Jess Morales Aburto: Programacin en general

Alfredo Prez Gmez: Estructura del proyecto

Michelle Saldaa Tapia: Psicloga y Pedaggica

2 | P g i n a

Hhu-Soft

Contenido

El abanico de colores Hhu Soft .................................................................................................. 3

Descripcin de la paleta Bsica ....................................................................................................... 3

Descripcin de elementos ............................................................................................................... 5

Parmetros Visuales ........................................................................................................................ 6

Mapa de navegacin ....................................................................................................................... 7

Descripcin de elementos ............................................................................................................. 16

Elementos Externos ....................................................................................................................... 20

Fuentes .......................................................................................................................................... 21

3 | P g i n a

Hhu-Soft

El abanico de colores Hhu Soft

Los colores que se muestran en la interfaz grfica as como los colores que se muestran en

los diferentes elementos del logo fueron seleccionados en base a una investigacin, la

cual refiere que los colores que los nios consideran atractivos son colores Vivos colores

luminosos, mas sim embargo se debe buscar mantener una estandarizacin dentro del

software. Por ello los colores primarios de la aplicacin son el azul, amarillo, verde caf,

rojo y rosa.

Descripcin de la paleta Bsica

Para la definicin de la paleta principal o paleta bsica del software se realiz con la ayuda de una

aplicacin web llamada Kuler, la funcin de este software es brindar un estndar y una correcta

combinacin de colores de acuerdo a las necesidades del usuario.

Los colores sugeridos por Kuler son: Verde, amarillo, rosa, azul y anaranjado.

4 | P g i n a

Hhu-Soft

Los colores mostrados anteriormente son sugerencia de la aplicacin web y cabe mencionar que

estos colores coinciden con la paleta establecida por Hhu Soft.

Colores Sugeridos por Kuler:

Verde:

RGB: 10-148-14

Anaranjado:

RGB: 249-89-21

Rojo:

RGB: 231-36-246

Amarillo:

RGB: 251-202-45

Azul:

RGB: 9-166-223

5 | P g i n a

Hhu-Soft

Descripcin de elementos

Todo software tiene elementos como botones, Labels o splash etc. Estos elementos deben regirse

bajo un estndar determinado, este estndar contempla ciertas caractersticas como tamao, tipo

y desde luego colores a utilizar, por ello en la siguiente tabla se muestran los elementos generales

estandarizados del software.

Elemento Descripcin

Botn aceptar: Tiene la funcin de confirmar la ejecucin de determina accin.

Botn detalles: este botn permite acceder a visualizador de progresos del alumno

Botn Home: En cualquier parte del software donde se encuentre este botn realizar la misma funcin, llevarlo a la pantalla anterior a la actual excepcin si est en la pantalla principal, all el botn funciona para cerrar el juego.

Diccionario: Botn para acceder al diccionario de Hhu Soft y esta disponible desde cualquier zona del juego.

Logo del software puede encontrarse en varias zonas del juego

Logo de software este logo es poco comn encontrarlo dentro del juego pero existe en determinadas zonas su uso est asignado a mostrarse en documentos oficiales del proyecto.

Botn Guardar: Botn guardar generalmente aparece en las zonas donde se est evaluando una actividad y su nico propsito es guardar su progreso para consultas posteriores.

Botn sonido: se encuentra disponible solo si el contenido actual mostrado posee pronunciacin, de ser as al pulsar sobre l nos mostrar la pronunciacin del contenido mostrado.

6 | P g i n a

Hhu-Soft

Botn siguiente: permite mostrar el contenido que prosigue

Botn siguiente: permite mostrar el contenido que antecede

Parmetros Visuales

Los parmetros visuales hacen referencia a tamao de pantallas as como caractersticas de las

mismas, a continuacin se establece el estndar para los Frames del Hhu Soft.

Las dimensiones sugeridas para cada frame de la aplicacin son las siguientes:

800px

600px

7 | P g i n a

Hhu-Soft

As tambin para los mdulos se sugiere utilizar el siguiente fondo:

Para las secciones en donde se desarrollen actividades y juegos se debe utilizar el siguiente fondo.

800px

600px

800px

600px

8 | P g i n a

Hhu-Soft

Dentro del software existe un elemento denominado barra de controles este elemento puede

contener controles de avance y retroceso adems del diccionario, el botn guardar y el botn

home segn las necesidades de la actividad.

Las dimensiones de este elemento deben ser de 800 px X 90 px y siempre debe situarse en la

parte inferior de frame.

Los frames en Hhu Soft comparten caractersticas que garantizar un software consistente en

cuanto a interfaz grfica se refiere, por ello en la siguiente tabla se especifican las caractersticas

que deben contener todos los frames del software.

Caractersticas

Sebe ser tipo Undecorated

Debe estar centrado en la pantalla

No debe ser redimensionable

Debe ser opaco

La transparencia debe ser de .9f

Barra de tareas siempre debe aparecer el icono Hhu Soft

Opacidad en 1.0

Fuente: Tempus Tamao: Variable

9 | P g i n a

Hhu-Soft

Mapa de navegacin

10 | P g i n a

Hhu-Soft

11 | P g i n a

Hhu-Soft

12 | P g i n a

Hhu-Soft

13 | P g i n a

Hhu-Soft

14 | P g i n a

Hhu-Soft

15 | P g i n a

Hhu-Soft

16 | P g i n a

Hhu-Soft

Descripcin de elementos

17 | P g i n a

Hhu-Soft

18 | P g i n a

Hhu-Soft

19 | P g i n a

Hhu-Soft

20 | P g i n a

Hhu-Soft

Elementos Externos

Gua de estilo de la documentacin

Especificacin de logos

Estilo del CD

Estilo de manuales

21 | P g i n a

Hhu-Soft

Estilo de Paquetera

Fuentes

Poner Fuentes en APA

Kuler