Manual de Estilo Serveis Al Personal

Manual de Estilo
del portal de Servicios al Personal
DOCUMENTO / ARCHIVO
Ttulo: Fecha: Nombre archivo: Manual de Estilo del portal de Servicios al Personal Enero de 2007 Manual de estilo Serveis al Personal.doc Basado en el documento: IBCEGE-PORPER-MGE-001_v1 Manual Grfico Estilos Serveis al Personal CAIB Autor: Ismael Morn (INDRA, S.A.) para la Direccin General de Tecnologa y Comunicaciones Consejera de Economa, Hacienda e Innovacin
Administraci Digital de les Illes Balears

Manual de Estilo del portal de Servicios al Personal
Pg. I
NDICE
1 2 3 INTRODUCCIN ............................................................................................................ 1
1.1 Objetivo del documento ......................................................................... 1
LA MARCA ONLINE. ........................................................................................................ 2 GAMA CROMTICA. ....................................................................................................... 3

3.1 Colores principales ................................................................................ 3 3.2 Colores secundarios .............................................................................. 4 3.3 Colores terciarios .................................................................................. 5
TIPOGRAFA ................................................................................................................. 6
4.1 Tipo .................................................................................................... 6 4.2 Carta de estilos..................................................................................... 6 4.3 Aplicaciones ......................................................................................... 7
ELEMENTOS GRFICOS ................................................................................................... 8

5.1 Imgenes ............................................................................................ 8
Logotipo oficial del Govern de les Illes Balears. ....................................................... 8 Logotipo Administraci Digital............................................................................... 8 Ttulos de las pginas internas.............................................................................. 8
5.2 Iconografa .......................................................................................... 9
Marco Superior................................................................................................... 9 Para listados ...................................................................................................... 9 Para enlaces que muestran todos los contenidos ..................................................... 9 Para mens desplegables..................................................................................... 9 Para mdulos con informacin importante .............................................................. 9 Como refuerzo para enlaces a diferentes tipos de documentos .................................. 9 Para enlaces que llevan pginas con informacin completa ....................................... 9
MDULOS.................................................................................................................. 10
6.1 Mdulo encabezamiento ....................................................................... 12 6.2 Mdulo pie de pgina........................................................................... 14 6.3 Mdulo de contenidos .......................................................................... 15
Pgina Pgina Pgina Pgina Pgina Pgina Pgina
inicio del portal .......................................................................................18 con informacin presentada en campos INPUT (versin 1) .............................21 con informacin presentada en campos INPUT (versin 2) .............................23 con una tabla simple ................................................................................25 genrica de contenidos (Canvi de contrasenya)............................................27 con formulario de bsqueda ......................................................................28 con resultados de una bsqueda ................................................................29
6.4 Recomendaciones generales ................................................................. 30

Pg. I
1
1.1
INTRODUCCIN
Objetivo del documento
El objetivo del manual de estilo es definir tanto el estilo visual como las caractersticas de programacin de la maquetacin del portal Serveis al Personal del Govern de les Illes Balears cara a futuras actualizaciones o nuevos desarrollos, con el propsito de mantener la coherencia de lo que en un principio se cre como lnea grfica y maquetacin del site. Este manual ser una gua imprescindible para cualquier diseador o programador que recoja el trabajo realizado y pretenda seguir consecuentemente la lnea establecida por sus creadores. A continuacin se explicar la lnea grfica que se ha utilizado con todos los datos necesarios para que un diseador no tenga ningn problema en ampliar el portal si fuera necesario. A su vez, tambin se explicar la forma de maquetacin (XHTML y CSS) utilizada para crear una pgina en su totalidad.
Para ms referencias contacte con el Servicio de Sistemas de Informacin, de la Direccin General de Tecnologa y Comunicaciones, o consulte en la web: >>> http://dgtic.caib.es/estandards

Pg. 1
LA MARCA ONLINE.
La posicin del logotipo en el rea corporativa del site se encuentra en la parte izquierda del marco superior que preside todas las pginas de la intranet, con un fondo degradado en tonalidades granate, guardando un margen de seguridad de 10 pixels por todos sus lados. Su tamao es de 188x44 pixels y posee un enlace directo a la pgina de inicio del site. El logotipo es el oficial del Govern de les Illes Balears y est formado por el escudo de la comunidad y el texto (en blanco) a su lado colocado en dos lneas. sta es la zona ms destacada del site ya que es la que primero se visualiza.

Pg. 2
3
3.1
GAMA CROMTICA.
Colores principales
RGB Hexadecimal 177/3/3 # b10303
Este color se emplea como fondo de la cabecera que preside todas las pginas del portal, adems de poder utilizarse como color de linea de separacin entre secciones importantes de una pgina, como por el ejemplo el pie. Se utiliza por defecto para todos los textos del portal siempre que estn sobre fondo blanco. Se utiliza para el color de la tipografa de los ttulos de todas las pginas de la intranet. Es el color de los enlaces del portal siempre que estn sobre fondo blanco.
RGB Hexadecimal RGB Hexadecimal RGB Hexadecimal
73/73/73 # 494949 138/71/0 # 8a4700 0/71/178 # 0047b2

Pg. 3
3.2
Colores secundarios
ste es el color de fondo de los diferentes mdulos situados en la parte lateral izquierda del portal, como por ejemplo el men que acompaa a todas las pginas. Utilizaremos este color para la lnea que enmarca los mdulos de informacin que necesiten ser resaltados sobre los contenidos que lo rodean, tanto en la columna lateral debajo del men, como en la central con la informacin principal de la pgina. Se usa para los ttulos de todas las pginas. Tambien si se desea para colorear texto destacado dentro de un prrafo. Se usa para los textos cuyo fondo no sea el color blando, ya que necesitan de mayor contraste para su correcta lectura. Se usa para los enlaces cuyo fondo es dististo al blanco.
RGB Hexadecimal
247/247/247 # f7f7f7
RGB Hexadecimal
228/228/228 # e4e4e4
RGB Hexadecimal
125/0/0 # 7d0000
RGB Hexadecimal
51/51/51 # 333
RGB Hexadecimal
0/84/142 # 00548e

Pg. 4
3.3
Colores terciarios
RGB Hexadecimal 241/226/226 # f1e2e2
Se utiliza explusivamente como color de fondo de todas las pginas de la intranet. Se utiliza como fondo de determinados elementos que quieran ser resaltados, como por ejemplo las cabeceras de las tablas. Se emplea como fondo de color para informacin que necesita ser destacada. Suelen ser prrafos cortos. Se usa para colorear las lneas de separacin entre los subttulos y los contenidos que les siguen en una misma pgina. Tambin para enmarcar informacin destacada. Se utiliza para los bordes de separacin de mdulos que ocupan todo el ancho de la pgina, por ejemplo la cabecera superior, el mdulo de identificacin personal o el pie de la pgina.
RGB Hexadecimal
249/243/243 # f9f3f3
RGB Hexadecimal
255/255/232 # ffffe8
RGB Hexadecimal
237/202/202 # edcaca
RGB Hexadecimal
222/77/77 # de4d4d

Pg. 5
4
4.1
TIPOGRAFA
Tipo
Las familias utilizadas para todo el portal son (por este orden de prioridad) las siguientes: Arial, Helvetica, Verdana, Times, sans-serif; siendo la Arial la preferente para su uso y las dems por si el usuario no dispone de la misma. El tamao para toda la web es del 75%, y a partir de ah se puede realizar cualquier cambio en sus medidas siempre que se creen con valores porporcionales utilizando la unidad de medida em. Para los distintos ttulos del portal hemos utilizado los siguientes tamaos: h1: 1.7em h2: 1.3em h3: 1.1em h4: 1em
4.2
Carta de estilos
Texto general Enlaces en general Enlaces con fondo Ttulos Ayuda cabecera y pie Arial .7em normal y negrita Arial .7em normal y negrita Arial .7em normal y negrita Arial 1.7em negrita Arial .7em
#494949 #0047b2 #00548e #7d0000 #000

Pg. 6
4.3
Aplicaciones
Pestaas Ayuda
Informacin del usuario Ttulo men
Informacin importante
Enlaces serveis Texto genrico
Listados de enlaces Modulos laterales
Miga de pan
Ttulo pgina Cabecera de tabla
Filas pares Pie pgina

Pg. 7
5
5.1
ELEMENTOS GRFICOS
Imgenes
Logotipo oficial del Govern de les Illes Balears.
Se situa en el marco superior de todas las pginas de la web y enlaza con la pgina de inicio del mismo. Su texto alternativo es Logo del Govern de les Illes Balears y el ttulo del enlace Anar a la pgina dinici de Serveis del Personal. Su tamao: 188x44 pxels. Logotipo Administraci Digital
Est colocado en el pie de todas las pginas de la intranet. Si formato es GIF con fondo trasparente y enlaza con la web promocional del proyecto. El texto alternativo para la imagen es Logo de lAdministraci Digital y el ttulo del enlace es Enlace a la web de lAdministraci Digital. Su tamao: 44x39 pxels. Ttulos de las pginas internas
Estos ttulos llevan una imagen asociada que refuerza su significado. Esta imagen debe ser un archivo GIF con fondo de color blanco, siguiendo el mismo estilo de diseo y sus mismos colores. Su tamao: 82x81 pxels.

Pg. 8
5.2
Iconografa
Marco Superior 16x16 pxels. Icono para remarcar el telfono y el correo de ayuda al usuario Para listados Se crean en formato GIF con fondo transparente y el siguiente color base #de4d4d. Tamao: 15x12 pxels. Utilizaremos el que ms nos interese por la maquetacin de la pgina Para enlaces que muestran todos los contenidos Esta imagen que acompaa estos enlaces es de tipo GIF con fondo transparente y el siguiente color base #de4d4d. 6x7 pxels Para mens desplegables Se crean en formato GIF con fondo transparente y el siguiente color base #de4d4d. Tamao: 9x9 pxels. Cuando los tems del men no estn desplegados Cuando s estn desplegados Para mdulos con informacin importante Icono de mensaje importante que requiere la atencin del usuario Como refuerzo para enlaces a diferentes tipos de documentos Icono de documento genrico Icono de documento Word Icono de documento PDF Para enlaces que llevan pginas con informacin completa Icono de tamao 20x22 pxels

Pg. 9
MDULOS
Todas las pginas se estructuran en formato modular, siendo cada parte de ella un mdulo que puede aadirse o borrarse segn las necesidades del administrador. Estos mdulos vienen identificados por la propiedad id. De todas formas hay un estilo general que se aplica a la etiqueta BODY del documento, que obviamente afectar a todas las pginas del portal.
body { font:normal 75% Arial, Helvetica, sans-serif; color:#494949; background-color:#f1e2e2; margin:0; padding:0; }
Todo el diseo se construye dentro de una capa (div) que se centra a resoluciones superiores al tamao de la misma.
#contenedor { margin:0 auto; width:65em; }
En el diseo general del portal existen varios mdulos que son constantes en todas las pginas: las pestaas (para poder cambiar de aplicacin), la ayuda (telfono y correo), la cabecera con el logotipo y la informacin del usuario y el pie.
ayuda
pestaas
cabecera
pie contenedor
La programacin en XHTML es la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Serveis del Personal - Govern de les Illes Balears</title> <link href="css/estilos_sap.css" rel="stylesheet" type="text/css" />

Pg. 10
<script type="text/javascript" src="js/globales.js"></script> </head> <body> <div id="contenedor"> (contenidos) </div> </body> </html>
Siempre debemos especificara el tipo de documento HTML que estamos mostrando, en este caso y para toda la web XHTML de transicin. Es recomendable colocar en toda la web el idioma de la misma con las etiquetas xml:lang y lang. Tambin en la etiqueta <title> (el ttulo de la pgina) debe aparecer en un primer momento el ttulo de la misma y posteriormente separado por un guin el nombre del portal, en este caso Serveis del Personal - Govern de les Illes Balears. Esto aumenta la accesibilidad de la web, dotndola de mayor significado el mostrar el ttulo de la informacin que va a encontrar el usuario en esa pgina. Pasamos a describir los diferentes mdulos que forman parte de todas las pginas del portal.

Pg. 11
6.1
Mdulo encabezamiento
El encabezado general comn a todas las pginas de la intranet se divide en diversas partes que explicamos en la siguiente imagen:
capsalpestanyes telefonAjuda capsal capsalUsuari
La hoja de estilos detallada es la siguiente: telefonAjuda. Capa que engloba la informacin de contacto para receibir ayuda
#telefonAjuda { float:right; padding:.2em 0; color:#000; } #telefonAjuda img { vertical-align:middle; margin-right:.5em; }
capsalpestanyes. Capa que contiene las pestanyas para el cambio de aplicacion

ul#capsalpestanyes { margin:.5em 0 0 0; padding:0; list-style:none; line-height:2em; } ul#capsalpestanyes li { display:inline; padding:.3em 1em; margin-right:1em; background-color:#efefef; border:1px solid #fff; } ul#capsalpestanyes li.seleccionado { color:#fff; background-color:#b10303; border:1px solid #b10303; } ul#capsalpestanyes li a { color:#000; }
La clase seleccionado se colocar siempre en la pestaa de la seccin donde nos encontremos en ese momento. En este caso, Serveis del Personal. capsal. Capa amb el logotip
#capsal { padding:0.5em 1em 0.7em 1em; background:url(../imgs/capsal/fondo_sap.gif) repeat-x #7d0000; color:#000; border-bottom:.3em solid #de4d4d; }
capsalUsuari. Capa amb la informaci del usuari conectat

#capsalUsuari { background-color:#efefef; padding:.3em 1em .4em 1em; border-bottom:1px solid #de4d4d; color:#000; display:block; } #capsalUsuari a { color:#00548e; }
Su programacin en XHTML.
 <div id="telefonAjuda"><img src="imgs/capsal/ico_info.gif" alt="" /> <strong>Necessita ajuda?</strong> Cridi al <strong>77070</strong> o envie un correu a <a href="mailto:suport@caib.es">suport@caib.es</a></div>  <ul id="capsalpestanyes"> <li><a href="#">Internet</a></li> <li><a href="00index.html">Intranet</a></li>

Pg. 12
<li class="seleccionado">Serveis del Personal</li> </ul>  <div id="capsal"><a href="90index.html" accesskey="i" title="Anar a la pgina d'inici de Serveis del Personal"><img class="logo" src="imgs/capsal/logo_caib_sap.gif" alt="Logo del Govern de les Illes Balears" /></a></div> <div id="capsalUsuari"><strong>Andreu Font Bibiloni</strong> (u80009) - Conselleria de Medi Ambient - <a href="91canviContrasenya.html">Canvi de contrasenya</a></div>
Como se puede apreciar, algunos enlaces llevan un aceso por teclado (accesskey) para mejorar la accesibilidad de sus contenidos.

Pg. 13
6.2
Mdulo pie de pgina
Este mdulo aparece al final de todas las pginas y tiene estas caractersticas grficas:
peu logoAD
La hoja de estilos se implementa de esta manera: peu. Pie para todas las pginas del portal
#peu { padding-top:1em; height:3.5em; color:#000; border-top:.3em solid #ff8400; background:url(../imgs/peu/fondo_peu.gif) repeat-x; } #peu img#logoAD { float:left; position:relative; top:-0.5em; }
Su prograciacin XHTML:
 <div id="peu"> <a href="#" title="Enlla a la web d'Administraci Digital"><img id="logoAD" src="imgs/peu/logo_ad.gif" alt="Logo de l'Administració Digital" /></a> © Govern de les Illes Balears </div>
Como se puede apreciar, los enlaces pueden tener ttulo para mejorar su comprensin o acceso directo por teclado para facilitar su consulta. Tambin debemos aadir que todas las imgenes deben tener el atributo alt, que explica brevemente su composicin.

Pg. 14
6.3
Mdulo de contenidos
Es el espacio dedicado a mostrar la informacin relevante en una pgina al usuario. Este mdulo siempre vendr precedido por el encabezamiento y terminar con el de pie de pgina. Hay diversas modalidades de pgina de contenidos dependiendo de la jerarqua que ocupa en la estructura organizativa del site. O tambin segn la longitud, cantidad y relevancia de los mismos. Este mdulo siempre estar comprendido en una capa general (DIV) llamada continguts, la cual posee los siguientes estilos:
#continguts { margin:0; padding-bottom:2em; background-color:#fff; }
En azul remarcamos la capa continguts en la pgina de Serveis Bancaris:
A continuacin explicaremos los diferentes mdulos que se dibujan en este espacio de todas las pginas web del portal de Serveis del Personal.
mollaPa titolOmbra h1
marcEsquerre
marcInfo

Pg. 15
Los estilos son los siguientes: mollaPa. Listado de todas las secciones por donde ha navegado el usuario hasta llegar a la pgina donde se encuentra. El ttulo de esos pasos estar enlazado con su pgina de origen.
ul#mollaPa { position:relative; margin:0; padding-left:.7em; line-height:2em; border-bottom:1px solid #e3e3e3; } ul#mollaPa li { list-style:none; display:inline; padding-right:1.3em; background:url(../imgs/mollapa/flecha.gif) norepeat right center #fff; }
El XHTML especfico:
<ul id="mollaPa"> <li><a href="90index.html">Inici</a></li> <li>Serveis disponibles</li> <li><a href="98serveis01bens.html">Guia de bens i serveis</a></li> <li>Serveis bancaris</li> </ul>
h1. Ttulo de la pgina donde nos encontramos. ste ttulo posee un class para colocar la imagen que lo acompaa
#continguts h1.canviContrasenya, #continguts h1.expPersonal, #continguts h1.dadesEcon, #continguts h1.gestioVacances, #continguts h1.formacio, #continguts h1.relacioLlocs, #continguts h1.concurs, #continguts h1.serveis { position:relative; font-size:1.7em; font-weight:normal; color:#7d0000; padding:.5em .7em .5em 4em; margin:0; border-bottom:1px solid #fff; } #continguts h1.canviContrasenya { background:url(../imgs/titulo/03canvicontrasenya_sap.gif) no-repeat #fff; } #continguts h1.expPersonal { background:url(../imgs/titulo/05_exppersonal_sap.gif) no-repeat #fff; } #continguts h1.dadesEcon { background:url(../imgs/titulo/06dadeseco_sap.gif) no-repeat #fff; } #continguts h1.gestioVacances { background:url(../imgs/titulo/07gestiovacances_sap.gif) no-repeat #fff; } #continguts h1.formacio { background:url(../imgs/titulo/08formacio.gif) no-repeat #fff; } #continguts h1.relacioLlocs { background:url(../imgs/titulo/09relaciollocs.gif) no-repeat #fff; } #continguts h1.concurs { background:url(../imgs/titulo/10concurstrasllats.gif) no-repeat #fff; } #continguts h1.serveis { background:url(../imgs/titulo/12serveis.gif) no-repeat #fff; }
titolOmbra. Capa con la sombra inferior del ttulo

#continguts #titolOmbra { height:1em; font-size:.5em; background:url(../imgs/titulo/titolombra.gif) repeat-x #fff; }
El XHTML especfico:
 <h1 class="serveis">Serveis bancaris</h1> <div id="titolOmbra"></div>
infoMarc. Capa que engloba los contenidos de una pgina.

#infoMarc { float:right; margin:1em 0 0 0; padding-right:1em; width:45.5em; }
marcEsquerre. Columna lateral que contiene el men principal y diversos mdulos de contenidos secundarios

Pg. 16
#marcEsquerre { margin:1em; width:16em; }
indexFi. Capa que siempre va al final de dos capas con la propiedad float, para simular su misma altura y conseguir un color de fondo uniforme.
div.indexFi { display:table; clear:both; font-size:.1em; height:.1em; }
El XHTML especfico:
<div id="infoMarc"> <p>Relaci de serveis bancaris que hi han actualment.</p> (continguts...) </div>  <div id="marcEsquerre"> (continguts...) </div> <div class="indexFi"></div>
Si necesitramos crear una pgina sin men lateral, deberamos utilizar uma sla capa que englobara todos los contenidos justo detrs de la miga de pan con el siguiente id: info. Obviamente no utilizaramos ni la capa infoMarc ni marcEsquerre. info. Capa para crear una pgina sin columna lateral izquierda
#info { padding:0 1em 1em 1em; }
El XHTML especfico:
<div id="info"> (continguts...) </div>

Pg. 17
Pgina inicio del portal Se plantea a dos columnas, una lateral para el men y otra para los contenidos principales. Este sera el ejemplo:
muyImportante
menuSAP atencio pareAD
serveisDisponiblesLE
h2
Sirvindonos como ejemplo de esta pgina podemos apreciar diferentes bloques de informacin. Repasemos cmo estn diseados cada uno de ellos: menuSAP. Men principal del portal que aparece en todas las pginas que dependen de l. Es un men que se despliega en forma de rbol con 2 niveles de profundidad.
#menuSAP { background-color:#f7f7f7; padding:.5em 1em; vertical-align:top; margin-bottom:1em; } #menuSAP ul { list-style:none; margin:0; padding:0; } #menuSAP ul li { padding-bottom:.5em; } #menuSAP ul li a { color:#00548e; padding-left:1.5em; background:url(../imgs/listados/menu_sap_off.gif) no-repeat left .2em #f7f7f7; display:block; }
pareAD. Estilo para los enlaces padre que disponen de un submen. Si este submen estuviera visible (display=block), deberamos cambiar el estilo a pareADon.
#menuSAP ul li a.pareAD { padding-left:1.5em; background:url(../imgs/listados/menu_sap_off.gif) no-repeat left .2em #f7f7f7; } #menuSAP ul li a.pareADon { padding-left:1.5em; background:url(../imgs/listados/menu_sap_on.gif) no-repeat left .2em #f7f7f7; } #menuSAP ul li ul { display:none; padding:.5em 0 0 2.5em; list-style:circle; margin:0; width:85%; } #menuSAP ul li ul li a { background:none; padding-left:0; font-size:.9em; }

Pg. 18
Imagen de ejemplo:
A veces ocurre que hay mens exclusivos de pginas internas que sustituyen al principal. En estas pginas no suele haber un enlace a su pgina inicia, con lo que colocaremos un <span> con en enlace a esa pgina.
#menuSAP span { display:block; margin-top:1em; padding:1em 0 .5em 0; border-top:1px dashed #edcaca; textalign:right; } #menuSAP span a { color:#00548e; padding-right:1em; background:url(../imgs/enlaces/flecha_derecha_sap.gif) norepeat right center #f7f7f7; }
Imagen de ejemplo:
pareADon
span
El XHTML de ejemplo con este ltimo men (ms completo que el anterior):
<div id="menuSAP"> <h1>Men Comisions de serveis</h1> <ul> <li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareADon">Trmit sol.licitud lloc de treball</a> <ul style="display:block;"> <li><a href="98serveis01com01tr01inst.html">Instruccions per participar</a></li> <li><a href="#">Model sol.licitud</a></li> <li><a href="#">Annex: Index dels documents presentats</a></li> </ul> </li> <li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Inici de procedimient i publicitat</a> <ul> <li><a href="#">Instruccions per publicar la comissi</a></li> <li><a href="#">Model sol.licitud publicaci intranet</a></li> </ul> </li> <li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Instrucci regulaci comissions</a> <ul> <li><a href="#">Instrucci 3/2004 per la qual es fixen els criteris i es regula el procediment per adjudicar les comissions de servei</a></li>

Pg. 19
<li><a href="#">Instrucci 1/2005, per la qual es modifica la Instrucci 3/2004 d'adjudicaci de comissions de servei de carcter voluntari</a></li> </ul> </li> </ul> <span><a href="98serveis01com.html">Inici Comisions de serveis</a></span> </div>
serveisDisponiblesLE. Capa con un listado de enlaces. Sera por ejemplo um mdulo com informacin secundaria que nos llevara a otros contenidos del site.
#serveisDisponiblesLE { border:1px solid #e4e4e4; padding:1em; margin-bottom:1em; } #serveisDisponiblesLE ul { margin:0 0 0 1em; padding:0; list-style-image:url(../imgs/listados/flecha_sap.gif); } #serveisDisponiblesLE ul li { padding-bottom:.5em; }
El XHTML especfico:
 <ul id="mollaPa"> <li><a href="00index.html">Inici</a></li> <li>Directori de personal</li> </ul>  <h1 class="dirPersonal">Directori de personal</h1> <div id="titolOmbra"></div>  <div id="info"> (contenidos) </div>
atencio. Capa con informacin muy importante que debe impactar al usuario
div.atencio { background:url(../imgs/icones/ico_atencio.gif) no-repeat center 1em #ffffe8; border:1px solid #f3f3d2; padding:2.5em 1em 0 1em; text-align:justify; }
muyImportante. Prrafo que necesita ser destacado

p.muyImportante { font-weight:bold; }
El XHTML especfico:
<div class="atencio"> <p class="muyImportante">()</p> <p>()</p> </div>

Pg. 20
Pgina con informacin presentada en campos INPUT (versin 1) La mayora de las pginas de Serveis del Personal con pginas destinadas a mostrar informacin relevante en forma de listados extensos. Para reducir el tamao de ciertas informaciones se ha seguido con la lnea anterior creada, que consista en disponer de campos INPUT de cierto tamao especfico y colocar la informacn, aunque quedara cortada dentro. Luego con una aplicacin JavaScript el usuario, posando el puntero del ratn sobre el campo, poda extenderlo y ver sus contenidos al completo. Este sera un ejemplo de su maquetacin de la pgina Dades personals:
h1
h2 ambForm
input
th

Pg. 21
Los estilos de los diferentes mdulos son los siguientes: h2. Ttulos de los contenidos de la capa de informacin de la pgina donde nos encontremos (h1 se reserva al ttulo de la pgina).
h2 { font-size:1.3em; margin:2em 0 1em 0; clear:left; position:relative; border-bottom:1px dashed #edcaca; texttransform:uppercase; font-weight:normal; }
ambForm. Tabla que maqueta los datos que en ese momento se representen. Su construccin no se ajusta a ningn diseo preestablecido en cuanto a filas y celdas, y deja libertad para crearlas segn se ajuste a sus contenidos. La etiqueta del campo se construir dentro de un <th>, mientras que el campo en un <td>.
table.ambForm { font-size:.9em; border:0; } table.ambForm th { text-align:right; font-weight:normal; } table.ambForm th, table.ambForm td { padding:.3em; } table.ambForm input, table.ambForm select { font-size:.9em; }
input. Campos de modo texto para incluir los contenidos. Siempre poseen um estilo para la longitud de los mismos y poder adaptarse a la informacin que pretende maquetarse. Esta longitud siembre se deber realizar con la medida em.
div.sepMax { clear:both; height:1em; font-size:1em; }
Un ejemplo en XHTML:
<table class="ambForm" cellpadding="1" cellspacing="0"> <tr> <th>Nom</th> <td><input type="text" class="show" name="nom" readonly="readonly" value="GUILLERMO" style="width:12em" onclick="showOverlibText(this)" /></td> <th>Llinatges</th> <td><input type="text" class="show" name="llinatges" readonly="readonly" value="CASAA PALLI" style="width:20em" onclick="showOverlibText(this)"/></td> </tr> (etc) </table>

Pg. 22
Pgina con informacin presentada en campos INPUT (versin 2) Esta pgina es similar a la anterior, con la diferencia que incluyen nuevos bloques de informacin dentro de las tablas principales. ste sera un ejemplo:
ambForm
fieldset sub_ambForm
input
legend

Pg. 23
Los estilos de la nueva tabla seran los siguientes: sub_ambForm. Tabla que dispone los contenidos en columnas
table.sub_ambForm { border:0; width:100%; } table.sub_ambForm th { text-align:center; font-weight:normal; }
fieldset. Estilo para esta etiqueta

fieldset { border:1px solid #e4e4e4; margin:0 0 1em 0; padding:1em; }
legend. Estilo para esta etiqueta

fieldset legend { font-weight:bold; padding:0 1em; }
Ejemplo en XHTML:
<table class="ambForm" cellpadding="0" cellspacing="0"> (contenidos) <tr> <td> <fieldset <legend>Situacions administratives</legend> <table id="campo" class="sub_ambForm" cellpadding="1" cellspacing="0"> <tr> <th>Data d'inici</th> <th>Data de fi</th> <th>Situaci</th> <th>Motiu</th> </tr> <tr> <td align="center"><input type="text" () /></td> <td align="center"><input type="text" ()/></td> <td align="center"><input type="text" () /></td> <td align="center"><input type="text" () /></td> </tr> </table> </fieldset> </td> </tr> </table>

Pg. 24
Pgina con una tabla simple Cuando se necesita crear una tabla simple con un listado de datos recurrimos a un estilo especfico. Como se puede apreciar en la pgina Comisions de serveis, las ltimas convocatorias se presentan en este formato.
tablaContinguts
par
Los estilos se definiran de la siguiente manera: tablaContinguts. Tabla con listado de contenidos. Debemos destacar que las lneas paren llevan una clase especfica para resaltarla.
table.tablaContinguts { width:100%; border:1px solid #edcaca; font-size:.9em; } table.tablaContinguts th { background-color:#f9f3f3; padding:.5em; } table.tablaContinguts tr.par { background-color:#f7f7f7; } table.tablaContinguts td { padding:.5em; }
Ejemplo en XHTML:
<table cellpadding="0" cellspacing="0" class="tablaContinguts"> <tr> <th>LLOC</th> <th>ORGANISME</th> <th>DESTINACIÓ</th> <th>C. ESPEC.</th> <th>CD</th> <th>GR</th> <th>CAT.</th>

Pg. 25
<th>TERMINI</th> <th>DOC.</th> </tr> <tr> <td>ZELADOR/A</td> <td>C. DE MEDI AMBIENT</td> <td>EIVISSA</td> <td>2340</td> <td>14</td> <td>C,D</td> <td>A</td> <td>7 a 17 de juliol</td> <td><a href="comissions/celador.pdf" target="_blank" title="Document en format PDF"><img src="imgs/listados/ico_pdf.gif" alt="Document en format PDF"></a></td> </tr> <tr class="par"> <td>ZELADOR/A</td> <td>C. DE MEDI AMBIENT</td> <td>EIVISSA</td> <td>2340</td> <td>14</td> <td>C,D</td> <td>A</td> <td>7 a 17 de juliol</td> <td><a href="comissions/celador.pdf" target="_blank" title="Document en format PDF"><img src="imgs/listados/ico_pdf.gif" alt="Document en format PDF"></a></td> </tr> (etc) </table>

Pg. 26
Pgina genrica de contenidos (Canvi de contrasenya) Esta sera una pgina tipo de contenidos de la intranet:
atencio
formCanviContrasenya
h2 p
ul
Como se puede apreciar siempre hay que utilizar las etiquetas especficas (X)HTML segn contenga, como se puede apreciar con el subttulo (h2), el prrafo (p) y el listado (ul). Los nuevos mdulos de programaran en la hoja de estilos de la siguiente manera: atencio. Prrafo con informacin muy importante
p.atencio { background:url(../imgs/icones/ico_atencio.gif) no-repeat 1em .9em #ffffe8; border:1px solid #f3f3d2; padding:1em 1em 1em 4em; font-weight:bold; text-align:justify; }
formCanviContrasenya. Formulario de cambio de contrasenya

#formCanviContrasenya { border:1px solid #e4e4e4; width:60%; margin:0 auto; } #formCanviContrasenya form { margin:0; padding:0 1em; } #formCanviContrasenya form p.numUsuari { text-align:center; padding:.3em; background-color:#faefef; fontweight:bold; } #formCanviContrasenya form div.etiqueta { width:50%; }

Pg. 27
Pgina con formulario de bsqueda Este sera un ejemplo de maquetacin de este tipo de pgina, donde los campos del formulario se maquetan dentro de una tabla y los botones se colocan en un prrafo.
form
botonera
stos seran sus estilos: input, select, textarea. Elementos del formulario
input, select { vertical-align:middle; } select.tipoPetit { font-size:1em; } textarea { font:normal 70% Arial, Helvetica, sans-serif; font-size:1em; }
botonera. Prrafo destacado donde se colocan los botones de accin

form p.botonera { background-color:#efefef; padding:.5em; text-align:center; }

Pg. 28
Pgina con resultados de una bsqueda Cuando se realiza una bsqueda, los resultados se pueden maquetar a modo de lneas de una tabla con una serie de celdas que no superen el tamao en horizontal de la pgina. Esta pgina seria un ejemplo de un listado de resultados.
sub_ambForm
h2
input
form
botonera
marcEsquerre
infoMarc
Todos los estilos ya han sido explicados con anterioridad. Simplemente destacar que los input siguen teniendo el tamao en la programacin junto al XHTML y la unidad de medida siempre relativa (em).

Pg. 29
6.4
Recomendaciones generales
Para conseguir un diseo coherente y estructurado, tanto en la maquetacin del cdigo como en la utilizacin de grficos y colores debe seguir las siguientes recomendaciones:
Proporcione un texto equivalente para todo elemento no textual utilizando el atributo alt. Evite utilizar imgenes animadas que distraen la atencin del usuario. Deben ser imgenes fijas y con una paleta de colores similar a la genrica del portal. Utilice un lenguaje claro y simple, comprensible para los usuarios potenciales del portal y de las herramientas que en l se incluyen. Cuando utilice tablas, identifique los encabezamientos de filas y columnas. Si es para maquetar contenidos no utilice marcadores estructurales. Asegrese de que los colores de fondo y primer plano tengan suficiente contraste para poder ser ledos fcilmente. Cuando exista un marcador apropiado, use marcadores en vez de imgenes para trasmitir la informacin. Utilice hojas de estilo para controlar la maquetacin y la presentacin. Utilice unidades relativas en vez de absolutas al especificar los valores de los diferentes elementos de la pgina web, tanto tipologas de letras como en capas, listas, tablas, etc. Utilice elementos de encabezado para trasmitir la estructura lgica de la pgina. Marque correctamente las listas y los tems de las listas. Identifique claramente el objeto de cada vnculo y evite utilizar el tpico pinche aqu. Entre diferentes elementos grficos o textuales utilice mrgenes adecuados, siendo el mnimo recomendado 10 pxeles para tamaos fijos y 1em para tamaos relativos.

Pg. 30

Manual de Estilo Serveis Al Personal

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual de Estilo Serveis Al Personal

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de Estilo

del portal de Servicios al Personal

Administraci Digital de les Illes Balears

LA MARCA ONLINE. ........................................................................................................ 2 GAMA CROMTICA. ....................................................................................................... 3

ELEMENTOS GRFICOS ................................................................................................... 8

5.2 Iconografa .......................................................................................... 9

6.4 Recomendaciones generales ................................................................. 30

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

RGB Hexadecimal RGB Hexadecimal RGB Hexadecimal

73/73/73 # 494949 138/71/0 # 8a4700 0/71/178 # 0047b2

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

#494949 #0047b2 #00548e #7d0000 #000

Administraci Digital de les Illes Balears

Informacin del usuario Ttulo men

Enlaces serveis Texto genrico

Listados de enlaces Modulos laterales

Ttulo pgina Cabecera de tabla

Filas pares Pie pgina

Administraci Digital de les Illes Balears

Logotipo oficial del Govern de les Illes Balears.

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

La programacin en XHTML es la siguiente:

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

capsalpestanyes. Capa que contiene las pestanyas para el cambio de aplicacion

capsalUsuari. Capa amb la informaci del usuari conectat

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Mdulo pie de pgina

Administraci Digital de les Illes Balears

En azul remarcamos la capa continguts en la pgina de Serveis Bancaris:

Administraci Digital de les Illes Balears

titolOmbra. Capa con la sombra inferior del ttulo

infoMarc. Capa que engloba los contenidos de una pgina.

Administraci Digital de les Illes Balears

#marcEsquerre { margin:1em; width:16em; }

Administraci Digital de les Illes Balears

menuSAP atencio pareAD

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

muyImportante. Prrafo que necesita ser destacado

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

fieldset. Estilo para esta etiqueta

legend. Estilo para esta etiqueta

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

formCanviContrasenya. Formulario de cambio de contrasenya

Administraci Digital de les Illes Balears

botonera. Prrafo destacado donde se colocan los botones de accin

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Administraci Digital de les Illes Balears

Das könnte Ihnen auch gefallen