Presentaci

1
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Índice
ÍNDICE
0.- Objetivos del presente documento. 1.-
Estructura y retícula. 2.- Construcción
gráfica. 3.- Navegación. 4.- Ejemplos de
pantallas.
Índice Página 01
2
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Objetivos
0.- OBJETIVOS
Este documento tiene como propósito la
homogeneización visual y estructural de las
aplicaciones que se vayan a desarrollar en el
futuro y que se integren en el sitio
madrid.org. Aunque las aplicaciones sean muy
diferentes, el seguir con rigor y escrupulosidad
esta guía de estilo dotará de un aspecto
coherente y uniforme futuras aplicaciones. Este
documento lo deberá leer y aplicar cualquier
persona que tenga la capacidad de creación,
edición o modificación de dichas aplicaciones.
Objetivos Página 02
3
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Estructura y Retícula
1.- ESTRUCTURA Y RETÍCULA
Esta es la estructura principal, consta de 3
grandes áreas cabecera, área de aplicación y pie.
1.1 Cabecera
1.2 Área de Aplicación
1.3 Pie
Estructura y Retícula Página 03
4
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Estructura y Retícula
1.1- CABECERA
Aunque las cotas y reglas sobre la cabecera
vienen definidas por la hoja de estilo de
Madrid.org, podemos decir que se divide en 3
zonas - Logotipo - Nombre del Centro y Título de
la Aplicación - Ruta de Navegación La única
regla a tener en cuenta sobre la cabecera es que
su espacio NO debe ser utilizado ni invadido por
elementos de la aplicación que no sea la Ruta de
Navegación.
Este icono invade el área de Cabecera. Esto NO es
correcto.
Este icono está en el área de Aplicación. Esto SÍ
es correcto.
Cabecera Página 04
5
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Estructura y Retícula
1.2- ÁREA DE APLICACIÓN
Se debe respetar un espacio de 12 píxeles entre
las áreas cabecera/aplicación, y aplicación/pie.
1.1 Cabecera
12 píxeles
1.2 Área de Aplicación
12 píxeles
1.3 Pie
Área de Aplicación Página 05
6
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Estructura y Retícula
1.2- ÁREA DE APLICACIÓN
En la primera pantalla, a través de un menú
inicial vertical se entra en la aplicación, al
mismo tiempo esta ruta de navegación se queda
marcada en la cabecera en el espacio reservado a
tal efecto. Una vez escogida la ruta, el menú
vertical desaparece y deja lugar al área de
contenidos. La ruta de navegación estará siempre
visible.
Ruta de Navegación
Menú Inicial
Paso 1
Ruta de Navegación
Área Navegación Secundaria
Paso 2
Área Contenidos Aplicación
Área de Aplicación Página 06
7
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Estructura y Retícula
1.3- PIE
La misma norma de no invasión de elementos de la
aplicación que rige en la cabecera será válida
para el área del pie, no pudiendo utilizar ese
espacio en ningún caso. Se debe respetar un
espacio de 12 píxeles entre el área de
aplicación/pie, como se comentó anteriormente.
Este icono invade el área de Pie. Esto NO es
correcto.
El área del pie se ha respetado. Esto SÍ es
correcto.
Pie Página 07
8
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.1- TIPOGRAFÍAS
Se empleará Arial, una de la tipografías estándar
en HTML que asegurará una perfecta legibilidad en
web. Esta fuente será usada en sus versiones
regular y bold. Los colores y tamaños dependerán
del entorno y del color de fondo de la imagen,
teniendo siempre como preferencia la
legibilidad. arial regular ABCDEFGHIJKLMNÑOPQR
STUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890
arial bold ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghi
jklmnñopqrstuvwxyz 1234567890
Tipografías Página 08
9
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.1.1- TIPOGRAFÍAS COLORES Y TAMAÑOS
A continuación se muestra una tabla con los
colores usados en tipografías y en qué tamaño
deben usarse.
color
rgb
hex
tipografías y tamaños (en puntos)
255, 255, 255 67, 67, 67 100, 100, 100 125, 125,
125 150, 150, 150 190, 190, 190 85, 124, 172 182,
205, 224 212, 7, 7 228, 146, 146 34, 131, 57
FFFFFF 434343 646464 7D7D7D 969696 BEBEBE 5
57CAC B6CDE0 D40707 E49292 228339
arial bold (11) arial regular (11) bold
(11) arial regular (10, 11) bold (11) arial
bold (11) arial regular (11) arial regular
(11) arial regular (9, 11) bold (11) arial
regular (11) arial regular (10, 11) bold
(11) arial regular (11) arial regular (10)
Tipografías Colores y Tamaños Página 09
10
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.2- COLORES
Tomando como referencia los colores corporativos
del sitio madrid.org y de la marca La Suma de
Todos de La Comunidad de Madrid, se ha realizado
una paleta de colores web (hexadecimales)
mostrados en la siguiente tabla. Con el objetivo
de remarcar el carácter corporativo de las
aplicaciones que se creen, se optará por la
utilización de una escala de grises y azules.
color
rgb
hex
color
rgb
hex
255, 255, 255 0, 0, 0 67, 67, 67 100, 100,
100 125, 125, 125 150, 150, 150 190, 190,
190 224, 224, 224 243, 243, 245
FFFFFF 000000 434343 646464 7D7D7D 969696 B
EBEBE E0E0E0 F3F3F5
85, 124, 172 146, 173, 207 182, 205, 224 206,
221, 241 230, 240, 255 0, 70, 155 212, 7, 7 228,
146, 146 248, 213, 213 34, 131, 57 254, 248,
237 255, 251, 233
557CAC 92ADCF B6CDE0 CEDDF1 E6F0FF 00469B D
40707 E49292 F8D5D5 228339 FEF8ED FFFBE9
Colores Página 10
11
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.3- ICONOS
Se distinguen dos grupos Específicos Son
dos, lupa y calendario. Acompañan a un campo y
actúan solos, sin texto.
Cotas Espacio mínimo en píxeles a respetar
alrededor del icono.
Texto seguido de flecha roja Deben aparecer
siempre que esté visible el área de aplicación y
siempre en la misma posición, habilitados o
deshabilitados según contexto. Son Alta, Baja,
Modificación, Aceptar, Cancelar. También se
admite Detalle, si lo hay.
Cotas Espacio mínimo en píxeles a respetar
alrededor del icono.
Texto Iconos Tipografía Arial regular, 10
puntos. Color hex 646464
Barra de Iconos/Botones Los iconos fijos se
presentan en fila sobre una barra de color como
en la imagen Color hex de la Barra E6F0FF
Iconos Página 11
12
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.4- COTAS
A continuación se muestran las guías y cotas en
píxeles a tener en cuenta a la hora de construir
una aplicación.
12
22
6
6
9
9
-- espacio mínimo de px a respetar
6
El área de aplicación se alinea con el logo de
la Comunidad de Madrid
-- espacio mínimo de px a respetar para mensaje
26
26
12
Cotas Página 12
13
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.5- MENÚ PRINCIPAL Y PESTAÑAS
1.- Menú Principal y Menú Principal con
subniveles. 2.- Pestañas de Menú.
1.-
Arial bold 11 FFFFFF
557CAC
Estado de Rollover Arial regular 11 - 557CAC
92ADCF 1 píxel
Arial regular 11 434343
FEF8ED
2 píxeles
30
148
2.-
557CAC
557CAC 1 pixel
22
Arial bold 11 FFFFFF
Arial regular 11 557CAC
Arial regular 11 B6CDE0
Menú Principal y Pestañas Página 13
14
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.6- FIELDSETS
Arial bold 11 557CAC
92ADCF 1 píxel
5
5
5
5
5
5
Arial regular 11 434343
Arial regular 11 646464
B6CDE0 1 píxel
FFFFFF
Arial bold 11 646464
F3F3F5
E6F0FF
9 píxeles
Arial regular 11 557CAC
FieldSets Página 14
15
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.7- ESTILOS DE ELEMENTOS TIPO
Campo Obligatorio Interior FFFFFF Trazo 1px
00469B Texto Arial regular 11 646464
Tooltip Interior FFFBE9 Trazo 1px
B6CDE0 Texto Arial regular 10 646464
Ruta de Navegación Texto Arial regular 9 -
646464 Rollover Arial reg 9 - 557CAC
Input Text Interior FFFFFF Trazo 1px
B6CDE0 Texto Arial regular 11 646464
Foco Error Interior FFFFFF Trazo 1px
E49292 Texto Arial regular 11 D40707
Foco Activo Interior FEF8ED Trazo 1px
557CAC Texto Arial regular 11 646464
Mensaje Ok/Error Error Arial regular 10
D40707 Ok Arial regular 10 228339
5
Estilos de Elementos Tipo Página 15
16
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.8- BÚSQUEDAS
Resultados paginación Texto Arial regular 11
434343 Rollover Arial bold 11
557CAC
Búsquedas Página 16
17
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Construcción Gráfica
2.9- AGENDA
Interior CEDDF1 Texto Arial regular 11
646464
Interior E6F0FF Trazo 1px CEDDF1 Texto Arial
regular 11 646464
Arial bold 11 434343
Arial bold 11 557CAC
Arial regular y bold 11 646464
Interior 557CAC Texto Arial bold 11
FFFFFF
557CAC 1 píxel
5
92ADCF 1 píxel
Interior BEBEBE Texto Arial bold 11
434343
2 píxeles
Interior E0E0E0 Texto Arial regular 11
646464
92ADCF
Interior D40707 Texto Arial bold 11
FFFFFF
E6F0FF
Interior E0E0E0 Texto Arial regular 11
969696
Interior F8D5D5 Texto Arial regular 11
E49292
FFFFFF
9 píxeles
Arial regular 9 557CAC
F3F3F5
5
10
5
Arial regular 11 646464
E6F0FF 26 px de alto
Arial regular 10 228339
Agenda Página 17
18
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Navegación
3.- NAVEGACIÓN
Flujo de Navegación El orden de utilización de
los menús de navegación viene dado por el
siguiente esquema.
Ruta de Navegación
Primer Nivel
Segundo Nivel (subniveles)
Se accede por un menú inicial vertical que puede
tener subniveles. Al mismo tiempo esta elección
queda marcada en la ruta de navegación situada en
la cabecera en el espacio reservado a tal efecto.
1.-
Ruta de Navegación
Área Navegación Secundaria
Una vez escogida la ruta, el menú vertical
desaparece y deja lugar al área de contenidos. La
ruta de navegación estará siempre visible.
2.-
Área Contenidos Aplicación
Acciones (Botones / Iconos)
Flujo de Navegación Página 18
19
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Navegación
3.- NAVEGACIÓN
Flujo de Navegación en modo Gráfico En esta
pantalla se muestran los elementos que aparecen
al prinicipio. La navegación comienza en el menú
inicial vertical y la ruta de Navegación va
dejando constancia de ello.
Ejemplo 1.-
Flujo de Navegación Página 19
20
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Navegación
3.- NAVEGACIÓN
Flujo de Navegación en modo Gráfico El segundo
nivel se podrá utilizar para dar acceso a
subniveles de información cuando la aplicación lo
requiera.
Ejemplo 2.-
Flujo de Navegación Página 20
21
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Navegación
3.- NAVEGACIÓN
Flujo de Navegación en modo Gráfico En este
pantalla podemos ver cómo el menú vertical ha
desaparecido y ha dejado lugar al área de
contenidos. La ruta de Navegación estará siempre
visible en el espacio reservado a tal efecto en
la cabecera. A través de las pestañas podremos
recorrer todas las ventanas de la aplicación.
Ejemplo 3.-
Flujo de Navegación Página 21
22
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Ejemplos de Pantallas
4.- EJEMPLOS DE PANTALLAS
Ejemplos de Pantallas Página 22
23
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Ejemplos de Pantallas
4.- EJEMPLOS DE PANTALLAS
Ejemplos de Pantallas Página 23
24
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Ejemplos de Pantallas
4.- EJEMPLOS DE PANTALLAS
Ejemplos de Pantallas Página 24
25
Aplicaciones del Sistema de Información Judicial
de la Comunidad de Madrid
Ejemplos de Pantallas
4.- EJEMPLOS DE PANTALLAS
Ejemplos de Pantallas Página 25