Manual de estilo Intranet

Administració Digital de les Illes Balears Pág. 1Manual de Estilo de la Intranet Corporativa

Manual de Estilode la INTRANET CORPORATIVA

DOCUMENTO / ARCHIVO

Título: Manual de Estilo de la Intranet Corporativa

Fecha: Enero de 2007

Nombre archivo: Manual de estilo Intranet.doc

Basado en el documento: IBCEGE-PORINT-MGE-001_v1Manual Gráfico Estilos Intranet CAIB

Autor:

Ismael Morán (INDRA, S.A.) para la

Dirección General de Tecnología y Comunicaciones

Consejería de Economía, Hacienda e Innovación

Administració Digital de les Illes Balears Pág. IManual de Estilo de la Intranet Corporativa

ÍNDICE

1 INTRODUCCIÓN ............................................................................................................ 1

1.1 Objetivo del documento ......................................................................... 1

2 LA MARCA ONLINE. ........................................................................................................ 2

3 GAMA CROMÁTICA. ....................................................................................................... 3

3.1 Colores principales ................................................................................ 33.2 Colores secundarios .............................................................................. 43.3 Colores terciarios .................................................................................. 5

4 TIPOGRAFÍA ................................................................................................................. 6

4.1 Tipo .................................................................................................... 64.2 Carta de estilos..................................................................................... 64.3 Aplicaciones ......................................................................................... 7

5 ELEMENTOS GRÁFICOS ................................................................................................... 8

5.1 Imágenes ............................................................................................ 8Logotipo oficial del Govern de les Illes Balears. ....................................................... 8Imágenes para los principales apartados................................................................ 8Logotipo Administració Digital............................................................................... 8Títulos de las páginas internas.............................................................................. 8Imágenes asociadas a novedades ......................................................................... 9

5.2 Iconografía ........................................................................................ 10Marco Superior..................................................................................................10Acceso a las diversas aplicaciones (ofimáticas y corporataivas) ................................10Para los botones de los formularios de búsqueda....................................................10Para listados .....................................................................................................10Para enlaces que muestran todos los contenidos ....................................................11Para menús desplegables....................................................................................11Para módulos con información importante .............................................................11Para información desplegada en forma de árbol .....................................................11

6 MÓDULOS.................................................................................................................. 12

6.1 Módulo encabezamiento....................................................................... 146.2 Módulo pie de página........................................................................... 166.3 Módulo de contenidos .......................................................................... 17

Página de inicio .................................................................................................18Páginas internas ................................................................................................22Página con listados a doble columna (Avisos i novetats) ..........................................24Página con listado en tabla (Directori al personal) ..................................................26Página con contenido en forma de árbol (Informació del organisme) .........................28Página genérica de contenidos (Canvi de contrasenya)............................................30Página con listados desplegables (Aplicacions departamentals).................................31Página maquetada con marco lateral (Aplicacions personals)....................................33

6.4 Aplicaciones internas ........................................................................... 34Elementos generales ..........................................................................................34Cabecera..........................................................................................................35Pie...................................................................................................................35Contenedor.......................................................................................................36

6.5 Recomendaciones generales ................................................................. 37


1 INTRODUCCIÓN

1.1 Objetivo del documento

El objetivo del manual de estilo es definir tanto el estilo visual como las características deprogramación de la maquetación de la intranet del Govern de les Illes Balears cara a futurasactualizaciones o nuevos desarrollos, con el propósito de mantener la coherencia de lo que enun principio se creó como línea gráfica y maquetación del site.

Este manual será una guía imprescindible para cualquier diseñador o programador que recojael trabajo realizado y pretenda seguir consecuentemente la línea establecida por sus creadores.

A continuación se explicará la línea gráfica que se ha utilizado con todos los datos necesariospara que un diseñador no tenga ningún problema en ampliar el portal si fuera necesario. A suvez, también se explicará la forma de maquetación (XHTML y CSS) utilizada para crear unapágina en su totalidad.

Para más referencias contacte con el Servicio de Sistemas deInformación, de la Dirección General de Tecnología yComunicaciones, o consulte en la web:

>>> http://dgtic.caib.es/estandards


2 LA MARCA ONLINE.

La posición del logotipo en el área corporativa del site se encuentra en la parte superiorizquierda del marco superior que preside todas las pàginas de la intranet, con un fondodegradado en tonalidades naranja, guardando un margen de seguridad de 10 pixels por todossus lados. Su tamaño es de 188x44 pixels y posse un enlace directo a la pàgina de inicio de laintranet.

El logotipo es el oficial del Govern de les Illes Balears y está formado por el escudo de lacomunidad y el texto a su lado colocado en dos líneas.

Ésta es la zona más destacada del site ya que es la que primero se visualiza.


3 GAMA CROMÁTICA.

3.1 Colores principales

Este color se emplea como fondo de lacabecera que preside todas las páginas delportal, además de poder utilizarse como colorde linea de separación entre seccionesimportantes de una página, como por elejemplo el pie.

Se utiliza como defecto para todos los textosdel portal siempre que estén sobre fondoblanco.

Se utiliza para el color de la tipografía de lostítulos de todas las páginas de la intranet.

Es el color de los enlaces del portal siempreque estén sobre fondo blanco.

RGB 255/132/0Hexadecimal # ff8400

RGB 0/71/178Hexadecimal # 0047b2

RGB 73/73/73Hexadecimal # 494949

RGB 138/71/0Hexadecimal # 8a4700


3.2 Colores secundarios

Éste es el color de fondo de los diferentesmódulos situados en la parte lateral derechadel portal a modo de informacióncomplementaria de los contenidos principales.

Utilizaremos este color para la línea queenmarca los módulos situados en la partelateral de la intranet a modo de informacióncomplementaria de los contenidos principales.También para líneas punteadas que separandistintos bloques de información en unamisma página.

Se usa para los textos cuyo fondo seacualquiera de los colores anteriores.

Se usa para los enlaces cuyo fondo es dististoal blanco. Su valor hexadecimal es: #ecf4fb.

RGB 255/247/238Hexadecimal # fff7ee

RGB 51/51/51Hexadecimal # 333

RGB 0/84/142Hexadecimal # 00548e

RGB 255/189/119Hexadecimal # ffbd77


3.3 Colores terciarios

Se utiliza explusivamente como color de fondode todas las páginas de la intranet.

Se emplea como fondo de color parainformación que necesita ser destacada.Suelen ser párrafos cortos.

Se utiliza para los bordes de separación demódulos que ocupan todo el ancho de lapágina, por ejemplo la cabecera superior, elmódulo de identificación personal o el pie dela página.

Se usa como color de fondo de partes de unapágina que necesitan ser resaltados sobre elresto.

RGB 255/255/232Hexadecimal # ffffe8

RGB 190/89/0Hexadecimal # be6200

RGB 239/239/239Hexadecimal # efefef

RGB 236/224/211Hexadecimal # ece0d3


4 TIPOGRAFÍA

4.1 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 demáspor si el usuario no dispone de la misma.

El tamaño para toda la web es del 75%, y a partir de ahí se puede realizar cualquier cambio ensus medidas siempre que se creen con valores porporcionales utilizando el sistema em.

Para los distintos títulos del portal hemos utilizado los siguientes tamaños:h1: 1.7em (1.3em para la página inicial)h2: 1.3emh3: 1.1emh4: 1em

4.2 Carta de estilos

#494949 Texto general Arial .7em normal y negrita

#0047b2 Enlaces en general Arial .7em normal y negrita

#00548e Enlaces con fondo Arial .7em normal y negrita

#8a4700 Títulos Arial .7em normal y negrita

#fff Cabeceras de tablas Arial .7em

#000 Ayuda cabecera y pie Arial .7em


4.3 Aplicaciones

Pestañas

Título página

Resultados

Cabecera de tabla

Información del usuario

Pie página

Ayuda

Texto destacado

Enlaces novedades

Títulos apartados

Texto genérico

Listados de enlacesModulos laterales

Miga de pan

Barra denavegación

entre resultados


5 ELEMENTOS GRÁFICOS

5.1 Imágenes

Logotipo oficial del Govern de les Illes Balears.

Se situa en el marco superior de todas las páginas de la intranet y enlaza con la página de iniciodel mismo. Su texto alternativo es Logotipo del Govern de les Illes Balears y el título del enlace Ir a lapágina de inicio de la Intranet. Su tamaño: 188x44 píxels.

Imágenes para los principales apartados

En la página inicial del portal se muestran 2 apartados destacados. Éstas son las imágenes decada uno de ellos, cuya extensión es GIF, con fondo trasparente. Su tamaño: 91x56 píxels.

Logotipo Administració Digital

Está colocado en el pie de todas las páginas de la intranet. Si formato es GIF con fondotrasparente y enlaza con la web promocional del proyecto. El texto alternativo para la imagenes Logo de l’Administració Digital y el título del enlace es Enlace a la web de l’Administració Digital. Sutamaño: 44x39 píxels.

Títulos de las páginas internas

Estos títulos llevan una imagen asociada que refuerza su significado. Esta imagen debe ser unarchivo GIF con fondo de color blanco, siguiendo el mismo estilo diseño y sus mismos colores.Su tamaño: 82x81 píxels.


Imágenes asociadas a novedades

Se colocan al lado del título y una pequeña descripción del enlace a la web externa. Si no hayimagen se dibuja la genérica que se muestra como ejemplo. Su tamaño: 50x50 píxels.


5.2 Iconografía

Marco Superior

16x16 píxels. Icono para remarcar el teléfono y el correo de ayuda al usuario

Acceso a las diversas aplicaciones (ofimáticas y corporataivas)

Se usan en la página de inicio de la intranet para enfatizar la aplicación e identificarlarápidamente. Tamaño: 26x26 píxels.

Microsoft Word

Microsoft Excel

Microsoft Access

Microsoft Outlook

Microsoft Powerpoint

Eurocalculadora

Lotus Notes

MS Office 05

Correu web

AS/400

Aranzadi

Portal de personal

Elaboració de normatives

Gestió de la web

Para los botones de los formularios de búsqueda

18x18 píxels. Inicia la búsqueda

Para listados

Se crean en formato GIF con fondo transparente y el siguiente color base #ff8400. Tamaño:15x12 píxels.

Utilizaremos el que más nos interese por la maquetación de la página


Para enlaces que muestran todos los contenidos

Esta imagen que acompaña estos enlaces es de tipo GIF con fondo transparente y el siguientecolor base #ff8400.

6x7 píxels

Para menús desplegables

Se crean en formato GIF con fondo transparente y el siguiente color base #ff8400. Tamaño:9x9 píxels.

Cuando los ítems del menú no están desplegadosCuando sí están desplegados

Para módulos con información importante

Icono de mensaje importante que requiere la atención del usuario

Para información desplegada en forma de árbol

1er nivelSucesivos niveles


6 MÓDULOS

Todas las páginas se estructuran en formato modular, siendo cada parte de ella un módulo quepuede añadirse o borrarse según las necesidades del administrador. Estos módulos vienenidentificados por la propiedad ‘id’.

De todas formas hay un estilo general que se aplica a la etiqueta BODY del documento, queobviamente afectará a todas las páginas del portal.

body { font:normal 75% Arial, Helvetica, sans-serif; color:#494949; background-color:#ece0d3; margin:0; padding:0; }

Todo el diseño se construye dentro de una capa (div) que se centra a resoluciones superiores altamaño de la misma.

#contenedor { margin:0 auto; width:65em; }

En el diseño general del portal existen varios módulos que son constantes en todas las páginas:las pestañas (para poder cambiar de aplicación), la ayuda (teléfono y correo), la cabecera conel logotipo y la información del usuario y el pie.

cabecera

pie

pestañas

contenedor

ayuda


La programación 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>Intranet - Govern de les Illes Balears</title><link href="css/estilos.css" rel="stylesheet" type="text/css" media="screen" /><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 estecaso y para toda la web XHTML de transición.

Es recomendable colocar en toda la web el idioma de la misma con las etiquetas xml:lang ylang.

También en la etiqueta <title> (el título de la página) debe aparecer en un primer momento eltítulo de la misma y posteriormente separado por un guión el nombre del portal, en este casoIntranet - Portal de les Illes Balears. Esto aumenta la accesibilidad de la web, dotándola de mayorsignificado el mostrar el título de la información que va a encontrar el usuario en esa página.

Pasamos a describir los diferentes módulos que forman parte de todas las páginas del portal.


6.1 Módulo encabezamiento

El encabezado general común a todas las páginas de la intranet se divide en diversas partes queexplicamos en la siguiente imagen:

La hoja de estilos detallada es la siguiente:

telefonAjuda. Capa que engloba la información 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:.30em 1em; margin-right:1em; background-color:#efefef; border:1pxsolid #fff; }ul#capsalpestanyes li.seleccionado { color:#fff; background-color:#ff992b; border:1px solid #ff992b; }ul#capsalpestanyes li a { color:#000; }

La clase seleccionado se colocará siempre en la pestaña de la sección donde nosencontremos en ese momento.

capsal. Capa amb el logotip

#capsal { padding:0.5em 1em 0.7em 1em; background:url(../imgs/capsal/fondo.gif) repeat-x #ff8400; color:#000;border-bottom:.3em solid #be6200; }

capsalUsuari. Capa amb la informació del usuari conectat

#capsalUsuari { background-color:#efefef; padding:.3em 1em .4em 1em; border-bottom:1px solid #be6200;color:#000; display:block; }#capsalUsuari a { color:#00548e; }

Su programación 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:[email protected]">[email protected]</a></div><ul id="capsalpestanyes">

<li><a href="#">Internet</a></li><li class="seleccionado">Intranet</li>

capsalpestanyes

telefonAjuda

capsal

capsalUsuari


<li><a href="90index.html">Serveis del Personal</a></li></ul><div id="capsal"><a href="00index.html" accesskey="i" title="Anar a la pàgina d'inici de la Intranet"><img class="logo"src="imgs/capsal/logo_caib.gif" alt="Logo del Govern de les Illes Balears" /></a></div><div id="capsalUsuari"><strong>Andreu Font Bibiloni</strong> (u80009) - Conselleria de Medi Ambient - <ahref="03canviContrasenya.html">Canvi de contrasenya</a></div>

Así pues algunos enlaces llevan un aceso por teclado (accesskey) para mejorar la accesibilidadde sus contenidos.


6.2 Módulo pie de página

Este módulo aparece al final de todas las páginas y tiene estas características gráficas:

La hoja de estilos se implementa de esta manera:

peu. Pie para todas las páginas 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 prograciación 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 del'Administració Digital" /></a>© Govern de les Illes Balears

</div>

Como se puede apreciar, los enlaces pueden tener título para mejorar su comprensión o accesodirecto por teclado para facilitar su consulta. También debemos comentar que todas lasimágenes deben tener el atributo alt, que explica brevemente su composición.

peu

logoAD


6.3 Módulo de contenidos

Es el espacio dedicado a mostrar la información relevante en una página al usuario. Estemódulo siempre vendrá precedido por el encabezamiento y terminará con el de pie de página.

Hay diversas modalidades de página de contenidos dependiendo de la jerarquía que ocupa enla estructura organizativa del site. O también según la longitud, cantidad y relevancia de losmismos.

Este módulo siempre estará comprendido en una capa general (DIV) llamada continguts, lacual posee los siguientes estilos:

#continguts { margin:0; padding-bottom:2em; background-color:#fff; }

En azul remarcamos la capa continguts de la página Directori de Personal:

A continuación explicaremos las diferentes estructuraciones de estos módulos.


Página de inicio

Es la primera página del portal, llamada normalmente por el anglicismo ‘home’.

Los estilos para esta estructura son los siguientes:

mollaPa. Listado de todas las secciones por donde ha navegado el usuario hasta llegar ala página donde se encuentra. En esta primera página se muestra, aunque realmente notiene utilidad alguna, simplemente es un preludio de lo que el usuario encontrará eneste módulo.

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) no-repeat right center #fff; }

El XHTML específico:

<ul id="mollaPa"><li>Inici</li>

</ul>

infoMarc. Capa que engloba todos los accesos directos de la página a las diversasaplicaciones que existen

mollaPa

dae

o

c

serveisDisponiblesLE

lateralEsquerre

directoriPersonalLE

novetats

avis

infoMarc


#infoMarc { float:right; margin:1em 0 0 0; width:41.5em; padding-right:1em; }

dae, c, c. Son las tres capas dentro de infoMarc, y diferencian los tres listados que vemosen la página principal de la intranet

#infoMarc #dae div, #infoMarc #o div, #infoMarc #c div { background:url(../imgs/index/fondo_img.gif) repeat-xbottom #fff; }#infoMarc #dae { margin-bottom:2em; }#infoMarc #dae ul { margin:0 0 0 2em; padding:0; list-style-image:url(../imgs/listados/rombo.gif); }#infoMarc #dae ul li { padding-bottom:.5em; }#infoMarc #dae p { border-top:1px dashed #ffbd77; padding-top:.8em; text-align:right; }#infoMarc #dae p a { padding-right:1em; background:url(../imgs/enlaces/flecha_derecha.gif) no-repeat right center; }#infoMarc #o { float:left; width:48%; }#infoMarc #o ul, #infoMarc #c ul { list-style:none; margin:1em; padding:0; }#infoMarc #o ul li, #infoMarc #c ul li { padding-left:3em; height:2.2em; padding-top:.5em; }#infoMarc #o ul li.word { background:url(../imgs/index/ico01op_01word.gif) no-repeat #fff; }#infoMarc #o ul li.excel { background:url(../imgs/index/ico01op_02access.gif) no-repeat #fff; }#infoMarc #o ul li.access { background:url(../imgs/index/ico01op_03excel.gif) no-repeat #fff; }#infoMarc #o ul li.outlook { background:url(../imgs/index/ico01op_04outlook.gif) no-repeat #fff; }#infoMarc #o ul li.power { background:url(../imgs/index/ico01op_05power.gif) no-repeat #fff; }#infoMarc #o ul li.euro { background:url(../imgs/index/ico01op_06euro.gif) no-repeat #fff; }#infoMarc #o ul li.lotus { background:url(../imgs/index/ico01op_07lotus.gif) no-repeat #fff; }#infoMarc #o ul li.office { background:url(../imgs/index/ico01op_08office.gif) no-repeat #fff; }#infoMarc #o ul li.correu { background:url(../imgs/index/ico01op_09correu.gif) no-repeat #fff; }#infoMarc #c { float:right; width:49%; }#infoMarc #c ul li.as { background:url(../imgs/index/ico02co_01as.gif) no-repeat #fff; }#infoMarc #c ul li.aranzadi { background:url(../imgs/index/ico02co_02aranzadi.gif) no-repeat #fff; }#infoMarc #c ul li.pp { background:url(../imgs/index/ico02co_03pp.gif) no-repeat #fff; }#infoMarc #c ul li.norm { background:url(../imgs/index/ico02co_04norm.gif) no-repeat #fff; }#infoMarc #c ul li.gestio { background:url(../imgs/index/ico02co_05gestio.gif) no-repeat #fff; }#infoMarc h1 { margin-top:.5em; }

Debemos destacar que el primer listado es simple, y que los referentes a las distintasaplicaciones llevan incluidos una class que les confiere el icono que acompaña al enlace.


<div id="infoMarc"><div id="dae">

<div><img src="imgs/index/sec01_dae.gif" alt="" /></div><h1>Darreres aplicacions emprades</h1><ul>

<li><a href="#">Accés al SAC</a></li><li><a href="#">Gestió de la WEB</a></li><li><a href="#">Regions On Line - SAC - backoffice (entorn en proves)</a></li>

</ul><p><a href="04aplicacions.html">Aplicacions departamentals</a></p>

</div><div id="o">

<div><img src="imgs/index/sec02_o.gif" alt="" /></div><h1>Ofimàtica</h1><ul>

<li class="word"><a href="#">Microsoft Word</a></li><li class="excel"><a href="#">Microsoft Excel</a></li><li class="access"><a href="#">Microsoft Access</a></li><li class="outlook"><a href="#">Microsoft Outlook</a></li><li class="power"><a href="#">Microsoft Powerpoint</a></li><li class="euro"><a href="#">Eurocalculadora</a></li>


<li class="lotus"><a href="#">Lotus Notes</a></li><li class="office"><a href="#">MS Office 95</a></li><li class="correu"><a href="#">Correu web</a></li>

</ul></div><div id="c">

<div><img src="imgs/index/sec03_c.gif" alt="" /></div><h1>Corporatives</h1><ul>

<li class="as"><a href="#">AS/400</a></li><li class="aranzadi"><a href="#">Aranzadi</a></li><li class="pp"><a href="#">Portal del personal</a></li><li class="norm"><a href="#">Elaboració de normatives</a></li><li class="gestio"><a href="#">Gestió de la WEB</a></li>

</ul></div>

</div>

marcEsquerre. Capa donde se disponen las novedades y avisos, y diferentes módulos deinformación. Es de menor tamaño que el marco general de trabajo

#marcEsquerre { margin:1em; width:20em; text-align:justify; }

novetats. Capa donde se muestra un listado con todas las novedades.

#marcEsquerre #novetats { padding:.5em 1em; background-color:#fff7ee; margin-bottom:1em; }#marcEsquerre #novetats ul { list-style-image:url(../imgs/listados/rombo.gif); margin:0 0 0 1em; padding:0; }#marcEsquerre #novetats ul li { margin-bottom:1em; }#marcEsquerre #novetats p { border-top:1px dashed #ffbd77; padding-top:.8em; text-align:right; }#marcEsquerre #novetats p a { padding-right:1em; background:url(../imgs/enlaces/flecha_derecha.gif) no-repeat rightcenter; }#marcEsquerre #novetats a { color:#00548e; }

avis. Capa donde se informa a los usuarios sobre un aviso importante. Se encuentradentro de la capa novetats. Sólo se mostrará cuando haya um aviso.

#marcEsquerre #novetats #avis { margin-bottom:1.5em; background:url(../imgs/icones/ico_atencio.gif) no-repeatcenter .8em #ffffe8; border:1px solid #f3f3d2; padding:3em 1em 1em 1em; font-weight:bold; text-align:justify; }

directoriPersolalLE, serveisDisponiblesLE. La primera posee eun formulario debúsqueda y la segunda un listado de servicios.

#directoriPersonalLE, #serveisDisponiblesLE { border:1px solid #ffbd77; padding:1em; margin-bottom:1em; }#directoriPersonalLE p { line-height:1.7em; margin:0 0 .5em 0; }#directoriPersonalLE p input.txt { width:14em; }#serveisDisponiblesLE ul { margin:0 0 0 1em; padding:0; list-style-image:url(../imgs/listados/flecha.gif); }#serveisDisponiblesLE ul li { padding-bottom:.5em; }


<div id="marcEsquerre"><div id="novetats">

<h1>Avisos i novetats</h1><div id="avis">Avís: es fa saber a tothom que açò és un avís molt importat que es te que tindre en compte, al menys durant unasetmana.</div><ul>

<li><a href="#">Resultats de les proves de llengua catalana dels certificats A</a><br />


Convocatòria de març de 2006</li><li><a href="#">Línia de finançament ICO-CAIB 2006</a>

<br />fins al 30 de juny, prorrogable fins al 31 de desembre o al esgotament dels fons

</li><li><a href="#">Oficina del Canvi Climàtic</a>

<br />Estaria be que hi hagueren un parell de frases d'explicació.

</li></ul><p><a href="02avisosNov.html">Mostrar totes les novetats</a></p>

</div><div id="directoriPersonalLE">

<h1>Directori de Personal</h1><p>

<label for="dp1">Personal</label><br /><input name="dp1" id="dp1" type="text" value="" class="txt" /> <input name="buscar" type="image"src="imgs/form/buscar_dirpersonal.gif" title="Buscar per nom" onclick="document.location='01dpersonal.html';" />

</p><p>

<label for="dp2">Organismes</label><br /><input name="dp2" id="dp2" type="text" value="" class="txt" /> <input name="buscar" type="image"src="imgs/form/buscar_dirpersonal.gif" title="Buscar per organisme" onclick="document.location='05dirOrganismes.html';"/>

</p></div><div id="serveisDisponiblesLE">

<h1>Serveis disponibles</h1><ul>

<li><a href="#">Guía de comunicació</a></li><li><a href="#">Recursos disponibles</a></li>

</ul></div>

</div>

indexFi. Capa que siempre va al final de dos capas con la propiedad float, para simularsu misma altura y conseguir un color de fondo uniforme.

div.indexFi { display:table; clear:both; font-size:.1em; height:.1em; }


Páginas internas

Todas las páginas internas del portal empiezan por la miga de pan y el título (al que acompañauna imagen). Posteriormente los contenidos se pueden maquetar como se desee, siendorecomendable separarlos por al menos 1em.

Este sería el ejemplo de la página de Canvi de contrasenya, donde la maquetación se ha realizadoa una columna:

Los estilos para esta estructura son los siguientes:

mollaPa. Listado de todas las secciones por donde ha navegado el usuario hasta llegar ala página donde se encuentra

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) no-repeat right center #fff; }

h1. Título de la página donde nos encontramos. Éste título posse un class para colocarla imagen que lo acompaña

#continguts h1.dirPersonal, #continguts h1.avisosNovetats, #continguts h1.canviContrasenya, #contingutsh1.aplicacions, #continguts h1.dirOrganismes{ position:relative; font-size:1.7em; font-weight:normal; color:#8a4700; padding:.5em .7em .5em 4em; margin:0;border-bottom:1px solid #fff; }#continguts h1.dirPersonal { background:url(../imgs/titulo/01dirpersonal.gif) no-repeat #fff; }#continguts h1.avisosNovetats { background:url(../imgs/titulo/02avisosnovetats.gif) no-repeat #fff; }#continguts h1.canviContrasenya { background:url(../imgs/titulo/03canvicontrasenya.gif) no-repeat #fff; }

mollaPah1 (título)

titolOmbra

info


#continguts h1.aplicacions { background:url(../imgs/titulo/04aplicacions.gif) no-repeat #fff; }#continguts h1.dirOrganismes { background:url(../imgs/titulo/01dirpersonal.gif) no-repeat #fff; }

titolOmbra. Capa con la sombra inferior del título

#continguts #titolOmbra { height:1em; font-size:.5em; background:url(../imgs/titulo/titolombra.gif) repeat-x #fff; }

info. Capa que engloba los contenidos principales de la página

#info { padding:0 1em 1em 1em; }


<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>


Página con listados a doble columna (Avisos i novetats)

Página que muestra la información a doble columna, utilizando para ello un div con un classespecífico y una capa que simula el salto de línea. Esta página en concreto, puede conteneralgún aviso importante, por lo que se ha programado una capa para esa función que apareceráal principio de la página.

Los estilos de los diferentes módulos son los siguientes:

atencio. Capa que pretende comunicar un mensaje importante al usuario

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; }

item2col. Clase para un ítem que pertenece a un listado a doble columna

div.item2col { float:left; width:47%; padding:0 .2em; margin-right:1em; }div.item2col img { float:left; margin:0 1em .5em 0; border:1px solid #ffbd77; }

La clase texte enmarca los textos del ítem.

div.item2col div.texte { padding-left:5.3em; }div.item2col div.texte p { margin:.4em 0 0 0; }

sepMax. Clase para una capa que simula un salto de línea con una altura máxima

div.sepMax { clear:both; height:1em; font-size:1em; }

atencio

sepMax

item2col

barraNav


El XHTML cíclico:

<div class="item2col"><img src="imgs/listados/img_base.gif" alt="" /><div class="texte">

<a href="#">Servei Renda Àgil</a><p>(Direcció General de Tributs i Recaptació)</p><p>Informació i cita prèvia: per Internet o per telèfon 900 700 012 (fins al 29 de juny).</p>

</div></div><div class="item2col">

<img src="imgs/listados/img_base.gif" alt="" /><div class="texte">

<a href="#">Trobada Pobles del Món</a><p>(Conselleria d'Immigració i Cooperació)</p><p>Torneigs futbol, basket, premi pintura, etc.</p>

</div></div><div class="sepMax"></div>

Hay que destacar que siempre debemos acabar el listado con la clase sepMax, ya que esla que obliga al salto de línea.

barraNav. Esta capa siempre se utilizará cuando se presenten listados en pantalla queno quepan em uma página.

div#barraNav { clear:both; padding:.5em 1em; background-color:#fff7ee; text-align:center; }

El XHTML del marco:

<div id="barraNav"><< <a href="#">Inici</a> < <a href="#">Anterior</a> - Del 1 al 10, de 12 - <a href="#">Següent</a>> <a href="#">Final</a> >></div>


Página con listado en tabla (Directori al personal)

Esta sería la estructura de los contenidos de una página de una materia de este apartado.Como se puede apreciar algunos módulos del marco lateral derecho se repiten con respecto ala página anterior.

Los estilos se definen de esta manera:

tablaResultats. Tabla con el listado de los contenidos demandados

table#tablaResultats { border:0; width:100%; margin-bottom:1em; }table#tablaResultats th { text-align:left; background-color:#be6200; color:#fff; }table#tablaResultats tr.par { background-color:#f2f2f2; }table#tablaResultats tr td { border-bottom:1px solid #f2f2f2; }

Para remarcar los contenidos de cada línea a las pares se le incluirá al <tr> la clase par.

Ejemplo en XHTML:

<table cellpadding="7" cellspacing="0" id="tablaResultats"><tr>

<th>Nom</th><th>Unitat orgànica</th><th>Càrrec/funció</th><th>Telf./Extensió</th><th>Adreça electrònica</th>

tablaResultats

novaConsulta

par

barraNav

th


</tr><tr>

<td><strong>Antonio Briz, José Antonio</strong></td><td><a href="#">S. d'Admin. Esportiva</a></td><td>Cap de personal<br />La funció en questió</td><td>971 209 422<br />84 715</td><td><a href="mailto:[email protected]">[email protected]</a></td>

</tr><tr class="par">

<td><strong>Aguiló Monjo, Pere Antoni</strong></td><td><a href="#">A. Contenciosa</a></td><td>Cap de l'Area Contenciosa<br />La funció en questió</td><td>971 209 422<br />84 715</td><td><a href="[email protected]">[email protected]</a></td>

</tr>

(etc...)

</table>

novaConsulta. Capa que contiene el formulario de búsqueda por si el usuario necesitarealizar otra rápidamente

#novaConsulta { text-align:center; border:1px solid #ffbd77; margin-top:2em; }#novaConsulta span { margin-right:3em; }

Ejemplo en XHTML:

<div id="novaConsulta"><h2>Vol realitzar una nova consulta?</h2><p>

<span><label for="dp1">Personal</label> <input name="dp1" id="dp1" type="text" value="" class="txt" /> <input name="buscar"type="image" src="imgs/form/buscar_dirpersonal.gif" title="Buscar per nom"onclick="document.location='01dpersonal.html';" /></span><label for="dp2">Organismes</label> <input name="dp2" id="dp2" type="text" value="" class="txt" /> <inputname="buscar" type="image" src="imgs/form/buscar_dirpersonal.gif" title="Buscar per organisme"onclick="document.location='05dirOrganismes.html';" />

</p></div>


Página con contenido en forma de árbol (Informació del organisme)

La maquetación de esta página vendría representada por diversas capas cada una de ellasperteneciente a unos de los niveles. En este caso concreto se desglosa la información del nivel 3,pero sería posible recoger las mismas capas de este nivel y colocarlas en otro para que lamaquetación fuera similar manteniendo los márgenes empleados por el nivel donde seencuentre.

Los estilos se definirían de la siguiente manera:

nivell01, nivell02, nivell03, nivell04. Capas de los diferentes niveles

div.nivell01, div.nivell02, div.nivell03, div.nivell04 { position:relative; padding-left:2em; margin-top:1em; }div.nivell01 { margin-top:3em; background:url(../imgs/dirorganismes/nivell01.gif) no-repeat left top #fff; font-weight:bold; color:#8a4700; }div.nivell02 { margin-left:2em; background:url(../imgs/dirorganismes/nivell02.gif) no-repeat left top #fff; }div.nivell03 { margin-left:4em; background:url(../imgs/dirorganismes/nivell02.gif) no-repeat left top #fff; }div.nivell04 { margin-left:6em; background:url(../imgs/dirorganismes/nivell02.gif) no-repeat left top #fff; }

dadesGenerals. Capa con los datos generales del ítem desplegado

#dadesGenerals { padding:.2em 1em; background-color:#fff7ee; margin-bottom:.5em; position:relative; }#dadesGenerals span {margin-right:3em; }

colAplicacions. Capa que contiene el listado de aplicaciones de este organismo

#colAplicacions { padding:0 1em 1em 1em; border-bottom:1px dashed #ffbd77; }

colAplicacionsTabla. Tabla con las aplicaciones (una imagen y un enlace asociado)

dadesGenerals

nivell01

nivell03

nivell02

nivell04

colAplicacions

colAplicacionsTabla


table#colAplicacionsTabla { width:100%; border:0; }table#colAplicacionsTabla td { width:32%; vertical-align:top; }table#colAplicacionsTabla td img { float:left; border:1px solid #be6200; }table#colAplicacionsTabla td a { display:block; margin:0 1em 0 3em; }

Ejemplo en XHTML:

<p>La informació del organisme <strong>Direcció General de Tecnologia i Comunicació</strong> es mostra en forma d'arbre per aconeixer la seva disposició dins de la estructura orgànica del Govern.</p><div class="nivell01">Govern de les Illes Balears</div><div class="nivell02"><a href="#">Conselleria d'Economia, Hisenda i Innovació</a></div><div class="nivell03">

<h2>Direcció General de Tecnologia i Comunicació</h2><div id="dadesGenerals">

<p><strong>Directora General</strong>: Sra. Encarnación Padilla Baena</p><p>

<span><strong>Adreça</strong>: Sant Pere nº 7 - 7012 Palma</span><span><strong>Telèfon</strong>: 971 784 178</span><strong>Fax</strong>: 971 176 499

</p></div><div id="colAplicacions">

<h3>Aplicacions</h3><table cellpadding="5" cellspacing="0" id="colAplicacionsTabla">

<tr><td><img src="imgs/dirorganismes/llistaPersonal.gif" alt="" /><a href="#">Llistat de personal y si el text es molt llarg i nocap a una línia</a></td><td><img src="imgs/dirorganismes/webPublica.gif" alt="" /><a href="#">Web pública</a></td>

</tr></table>

</div></div><div class="nivell04"><a href="#">Centre de Procés de Dades i Xarxa Corporativa</a></div><div class="nivell04"><a href="#">Servei de Sistemes d'Informació</a></div><div class="nivell04"><a href="#">Servei de Telecomunicacions</a></div><div class="nivell04"><a href="#">Servei de Seguretat</a></div>


Página genérica de contenidos (Canvi de contrasenya)

Esta sería una página tipo de contenidos de la intranet:

Como se puede apreciar siempre hay que utilizar las etiquetas específicas (X)HTML segúncontenga, como se puede apreciar con el subtítulo (h2), el párrafo (p) y el listado (ul).

Los nuevos módulos de programarían en la hoja de estilos de la siguiente manera:

formCanviContrasenya. Formulario de cambio de contrasenya

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

atencio

formCanviContrasenya

h2

p

ul


Página con listados desplegables (Aplicacions departamentals)

Este sería un ejemplo de maquetación de este tipo de página:

Éstos serían sus estilos:

aplicacionsDep. Listado con todos los enlaces

#aplicacionsDep { list-style:none; margin:0 0 0 2em; padding:0; }#aplicacionsDep li { padding-bottom:.5em; }#aplicacionsDep li a.pareAD { padding-left:1.5em; background:url(../imgs/listados/menu_off.gif) no-repeat left center#fff; }#aplicacionsDep li a.pareADon { padding-left:1.5em; background:url(../imgs/listados/menu_on.gif) no-repeat leftcenter #fff; }#aplicacionsDep li ul { display:none; padding-top:.5em; list-style:none; }#aplicacionsDep li ul li ul { list-style:circle; }

pareAD. Clase para el enlace que contiene uno o varios elementos hijos, pero sinmostrarlos

#aplicacionsDep li a.pareAD { padding-left:1.5em; background:url(../imgs/listados/menu_off.gif) no-repeat left center#fff; }

pareADon. Clase para el enlace que mustra todos sus elementos hijos

#aplicacionsDep li a.pareAD { padding-left:1.5em; background:url(../imgs/listados/menu_off.gif) no-repeat left center#fff; }

aplicacionsDep

pareAD

pareADon


Ejemplo en XHTML

<ul id="aplicacionsDep"><li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Presidència de Govern</a>

<ul><li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Direcció General 01</a>

<ul><li><a href="javascript:alert('Aplicació 01');">Aplicació 01</a></li><li><a href="javascript:alert('Aplicació 02');">Aplicació 02</a></li><li><a href="javascript:alert('Aplicació 03');">Aplicació 03</a></li>

</ul></li><li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Direcció General 02</a>


</ul></li><li><a href="javascript:void(0);" onclick="obrirArbre(this);" class="pareAD">Direcció General 03</a>


</ul></li>

</ul></li>

</ul>

Hay que destacar que la clase pareADon se coloca dinámicamente y siempre cuando sehaga clic sobre el enlace padre.


Página maquetada con marco lateral (Aplicacions personals)

Esta página sería similar a la inicial, con dos capas principales: marcEsquerre para el menú ocontenidos secundarios, e infoMarc para los contenidos principales. En este caso el menúlateral, al ser similar que novedades utilizamos su mismo estilo para no duplicarlos en el .CSS.

Los nuevos estilos serían los siguientes:

apliPersonals. Capas con el listado de las aplicaciones personales

#apliPersonals h2 { border-bottom:1px dashed #; margin-top:.5em; }#apliPersonals ul { list-style-image:url(../imgs/listados/circulo.gif); }#apliPersonals ul li { padding-bottom:.5em; }

apliPersonals

infoMarc

novetats

marcEsquerre


6.4 Aplicaciones internas

Al margen de la navegación por la intranet, existen pequeñas aplicaciones web que deben tenerel mismo estilo. Estas aplicaciones se arrancan desde la intranet y se ejecutan en ventana nueva,que puede tener o no todas las opciones y menús del navegador, según estime adecuado eladministrador del portal.

Elementos generales

Todas las aplicaciones tendrán una programación similar, tanto a nivel de maquetación comovisual, con unos módulos generales a todas ellas.

Veamos un ejemplo en la Bandeja Telemática.

Como se puede apreciar en la imagen todas las aplicaciones tendrán 3 módulos esenciales: lacabecera, los contenidos y el pie.

En los estilos se programarán cada uno de estos módulos, pero además se dotará al elemento<body> de unos estilos especiales que afectaran a todas las páginas de la aplicación. Y otrapara los párrafos <p>.

body { font:normal 75% Arial, Helvetica, sans-serif; color:#494949; background-color:#fff; margin:0; padding:0; }

p { margin:1em 0; }

cabecera

peu

contenidos


Cabecera

Se compone de diversos elementos.

Éstos son los estilos:

capsal. Capa de la cabecera, la cual posee el logo del Govern Balear, el logo y el títulode la aplicación y un enlace para cerrar la aplicación y volver a la intranet.

#capsal { background:url(../imgs/capsal/fondo.gif) repeat-x #ff8400; color:#fff; border-bottom:5px solid #be6200; }#capsal a { float:right; margin-right:1em; display:block; padding:1em 2em 1em 0;background:url(../imgs/aplicacio/marcsup_tornar.gif) no-repeat right 1em; color:#fff; font-weight:bold; }#capsal img { float:left; }#capsal h1 { background:url(../imgs/aplicacio/marcsup_titol_ico.gif) no-repeat; margin:0 0 0 200px; padding:.5em 0.6em 75px; font-size:1.5em; }

Pie

Se compone de diversos elementos.

Éstos son los estilos:

peu. Capa del pie de la página, con el logo de Administració Digital.

#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; margin-left:1em; }

imgh1 a

logoAD


Contenedor

Sería el espacio dedicado propiamente a la aplicación. Aquí se pueden seguir todas las normasindicadas con anterioridad para la creación de módulos en la intranet: colores, tipografías, etc.

Su estilo sería el siguiente:

contenedor. Capa que engloba todos los elementos de la aplicación

#contenedor { padding:1em; }

Ejemplo en XHTML de la página sin mostrar la aplicación:

<!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="es" lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Inicio - Bandeja Telemática</title><link href="css/estilos_aplicacio.css" rel="stylesheet" type="text/css" /></head>

<body><div id="capsal">

<a href="#">Tornar a la Intranet</a><img src="imgs/aplicacio/logo_caib.gif" alt="Govern de les Illes Balears" /><h1>Nom de la aplicació</h1>

</div><div id="contenedor">

(Contenidos…)

</div><div id="peu">

<img id="logoAD" src="imgs/peu/logo_ad.gif" alt="Logo de l'Administració Digital" /> © Govern de les IllesBalears</div>

</div></body></html>


6.5 Recomendaciones generales

Para conseguir un diseño coherente y estructurado, tanto en la maquetación de código comoen la utilización de gráficos y colores debe seguir las siguientes recomendaciones:

• Proporcione un texto equivelente para todo elemento no textual utilizandoel atributo ‘alt’.

• Evite utilizar imágenes animadas que distraen la atención del usuario.Deben ser imágenes fijas y con una paleta de colores similar a la genéricadel portal.

• Utilice un lenguaje claro y simple, comprensible para los usuariospotenciales del portal y de las herramientas que en él se incluyen.

• Cuando utilice tablas, identifique los encabezamientos de filas y columnas.

• Asegúrese de que los colores de fondo y primer plano tengan suficientecontraste para poder ser leídos fácilmente.

• Cuando exista un marcador apropiado, use marcadores en vez de imágenespara trasmitir la información.

• Utilice hojas de estilo para controlar la maquetación y la presentación.

• Utilice unidades relativas en vez de absolutas al especificar los valores de losdiferentes elementos de la página web, tanto tipologías de letras como encapas, listas, tablas, etc.

• Utilice elementos de encabezado para trasmitir la estructura lógica de lapágina.

• Marque correctamente las listas y los ítems de las listas.

• Identifique claramente el objeto de cada vínculo y evite utilizar el típico‘pinche aquí’.

• Entre diferentes elementos gráficos o textuales utilice márgenes adecuados,siendo el mínimo recomendado 10 píxeles para tamaños fijos y 1em paratamaños relativos.

Documents

Manual de estilo Intranet