GUÍA DE ESTILO WEB PORTALES DEPENDIENTES DE LA COMUNIDAD AUTÓNOMA DE LA REGIÓN DE MURCIA TÍTULO. LORE IPSUM lore ipsum dolor

Transcripción

1 TÍTULO LORE IPSUM lore ipsum dolor GUÍA DE ESTILO WEB PORTALES DEPENDIENTES DE LA COMUNIDAD AUTÓNOMA DE LA REGIÓN DE MURCIA JULIO

2 INTRODUCCIÓN Esta guía de estilo recoge las normas y recomendaciones que deben seguirse para el diseño de los portales dependientes de la CARM. En las siguientes páginas se describirá cómo ha de ser la estructura, navegación, tipografía, color... aportando pormenorizadamente los estilos que se han de aplicar en cada caso. Se ha tenido especial interés en aportar coherencia a la navegación y disposición de los elementos para asegurar un diseño limpio, coherente y que aporte una experiencia de usuario satisfactoria. Se aportan también las diferentes posibilidades de personalización de los portales que facilitan la diferenciación entre ellos sin perder unidad de estilo. Navegadores y resoluciones El diseño y sus plantillas están desarrollados para ser visualizados en los navegadores más comunes: Google Chrome, Firefox, Safari e Internet Explorer (desde su versión 8 hasta la actual 11). Adaptabilidad En 2014 el 85% de los españoles utilizan, además de sus ordenadores de sobremesa, los smartphones para acceder a los contenidos de Internet. También es creciente el número de conexiones desde tablets situándose cerca del 40%. Las plantillas aportadas se comportan de manera responsive, es decir, su diseño y estructura se adaptan a las diferentes resoluciones de pantalla de los dispositivos que hay en la actualidad. Con elllo se consigue una navegación más adecuada y fluida. Recomendaciones generales a diseñadores y documentalistas Imágenes e iconos Las imágenes tienen un gran poder comunicativo. Se recomienda el uso de ellas para acompañar noticias, destacados, artículos, etc. Es importante que dichas imágenes sirvan de complemento a la narración y en la medida de lo posible tengan una buena calidad (una imagen con una baja definición o demasiado estándar empobrece la comunicación y la imagen que transmite el portal). Los iconos refuerzan el mensaje pero han de usarse con mesura y criterio. Si un se sustituye por un icono ha de asegurarse que el mensaje es inteligible para el usuario. Textos Tanto titulares como entradillas deben ser claros y dar una idea clara al usuario del contenido del artículo. Las pruebas de usabilidad demuestran que los usuarios recorren a gran velocidad el contenido de una página y solo repararán en aquellos puntos que muestren información clara y concreta. Se ha de tener especial cuidado con negritas, s a mayor tamaño o con diferente color para resaltar contenidos, dejando estos recursos solamente en casos necesarios. Si se destaca demasiado se perderá la intención de este recurso. Menús Se recomienda economizar tanto como sea posible en la cantidad de secciones que puedan contener los diferentes menús en su primer nivel. Para el usuario es más claro e intuitivo un menú con pocos elementos y por ello es necesario hacer un esfuerzo de condensación y agrupación. Colores Cada portal deberá tener un color identificativo. Este color se usará en la barra de menú, botones, pie, enlaces y otros elementos generales del portal. Para asignar un color a cada portal esta guía propone una paleta de colores asociados a temas pero, de igual manera, se pueden utilizar para perfiles, departamentos, banners o cualquier elemento que deba diferenciarse. Consideraciones finales Todas las pautas que vienen indicadas en esta guía están dirigidas a facilitar la creación y documentación de los diferentes portales teniendo en cuenta técnicas ya probadas de experiencia de usuario y usabilidad. Es importante atenerse a estas pautas y abordarlas con la intención de mantener diseños y contenidos limpios, ordenados y coherentes entre sí. En esta guía se indica los tamaños exactos que deben tener cada una de las imágenes según su ubicación. Respetar estos tamaños es sumamente importante. Nota: las imágenes utilizadas en esta guía son puramente demostrativas y no pueden utilizarse. 2

3 ÍNDICE PÁGINA PRINCIPAL ESTRUCTURA GENERAL ESTRUCTURA GENERAL (CON FONDO) 2 COLUMNAS (SIN MENÚ LATERAL) ELEMENTOS WEB GENERALES CABECERA MENÚS MÓDULOS PÁGINA PRINCIPAL LATERAL PIE PÁGINAS INTERIORES ESTRUCTURA GENERAL INTERIOR 2 COLUMNAS (CON FONDO) ELEMENTOS PÁGINAS INTERIORES DESTACADOS LISTAS Y TABLAS PUBLICACIONES Y DOCUMENTOS LISTADO DE ELEMENTOS CON IMÁGENES DOCUMENTOS DE INTERÉS FORMULARIO BÚSQUEDA AVANZADA INICIO DE SESIÓN PAGINACIÓN NOTICIAS LISTADO NOTICIA AGENDA COMPONENTES 20 ELEMENTOS GRÁFICOS TIPOGRAFÍA COLOR PALETA DE COLORES ICONOS BOTONES ADAPTABILIDAD A DISPOSITIVOS 27 3

4 PÁGINA PRINCIPAL / ESTRUCTURA GENERAL (an: 15px) (an: 30px) (an: 1170px) (an: 30px) (an: 15px) MENÚ LATERAL (an: 165px) CONTENIDO CENTRAL (an: 652px) LATERAL (an: 263px) TOP CABECERA (al: 36px) CABECERA (al mín: 105px) MENÚ PERFILES (al: 36px) MENÚ GENERAL (al: 40px) MIGA NAVEGACIÓN (al: 40px) SLIDER SERVICIOS DESTACADOS DESTACADOS NOTICIAS AGENDA NOVEDADES ENLACES DE INTERÉS MÁS INFORMACIÓN BANNERS ENCUESTAS PIE (al: variable) MENÚ PIE PIE DIRECCIÓN (al: variable) 4

5 PÁGINA PRINCIPAL / ESTRUCTURA GENERAL (CON FONDO) IMAGEN FONDO (al: 600px) COLOR FONDO (#eee) 5

6 PÁGINA PRINCIPAL / 2 COLUMNAS (SIN MENÚ LATERAL) (an: 15px) (an: 30px) (an: 1170px) (an: 30px) (an: 15px) CONTENIDO CENTRAL (an: 847px) LATERAL (an: 263px) 6

7 ELEMENTOS WEB GENERALES / CABECERA 1 TOP CABECERA Color blanco con una línea gris de separación en la parte inferior de 1px (#ddd). LOGOTIPO (an: variable - al max: 105px) MENÚ AUXILIAR BÚSQUEDA REDES SOCIALES (iconos: an: 21px - al: 21px) En esta zona se mostrará el menú auxiliar, la zona de búsqueda y los accesos a las redes sociales. Color fondo: blanco (#fff) Color : gris genérico (#808080) Color enlace: gris genérico (#808080) 5 1 TOP CABECERA 2 CABECERA 3 MENÚ PERFILES 4 MENÚ GENERAL MIGA NAVEGACIÓN Menú auxiliar: contiene enlaces a secciones funcionales como Iniciar sesión, Contacto, Idiomas (con menú desplegable), etc. Las secciones tienen borde lateral de 1px (#ddd). Búsqueda: contiene caja para buscar y botón con icono de lupa. A su izquierda debe llevar un enlace a Búsqueda avanzada junto al icono +. IMAGEN CABECERA (an: 487px - al mín: 105px) LOGOTIPO CARM (an: 135px - al: 56px) Redes sociales: contiene los iconos enlazados a los canales sociales del portal. Los iconos serán circulares con fondo del color corporativo y en blanco el icono del canal. ELEMENTOS WEB / VARIACIONES DE CABECERA CABECERA CON LOGO CARM INTEGRADO + IMAGEN CABECERA 2 CABECERA Incluye logotipo, imagen de cabecera (si la tiene) y escudo de la Comunidad Autónoma de Murcia. Logotipo: el logotipo debe tener un espacio por arriba y por abajo de 20px salvo en el caso de que esté sobre una fondo de color que no deberá tener margen vertical. Imagen cabecera: es una imagen de fondo y tiene un borde lateral izquierdo de 6px del color corporativo. Logotipo CARM: podrá ser gris, blanco (si está sobre fondo de color) o en sus colores originales. CABECERA CON LOGO SIN MARGEN + IMAGEN CABECERA + LOGO CARM 3 MENÚ PERFILES Enlaza a los distintos perfiles del portal o a secciones/departamentos que por su interés conviene destacarlos. Tiene un borde inferior de 8 px (#ddd). Cada perfil tendrá su propio color (se utilizará la paleta de colores proporcionada en este documento), un icono de la colección aportada y un borde inferior de 8 píxeles en el color del perfil. En el caso de que haya más de ocho perfiles o más se optará por un menú desplegable. CABECERA SIN IMAGEN CABECERA + LOGO CARM 4 MENÚ GENERAL Color fondo: corporativo Color enlaces: blanco (#fff) Color submenú: blanco (#fff) Color submenú enlaces: gris oscuro (#333) Color submenú hover: gris medio (#b2b2b2) 5 En la parte izquierda el menú llevará un icono home que enlazará a la página de inicio. MIGA NAVEGACIÓN Será sobre fondo blanco con un borde inferior de 1px (#ddd). El color de los enlaces será el corporativo. 7

8 ELEMENTOS WEB GENERALES / MENÚS (: 12px) MENÚ CABECERA TOP MENÚ CABECERA TOP + IDIOMA DESPLEGADO (: 13px) MENÚ PERFILES 1 2 MENÚ GENERAL CON SUBMENÚS DESPLEGADOS Las secciones que llevan submenú desplegable contienen un + a la derecha. El menú permite tantos subniveles como se desee pero no se aconseja más de cuatro. MENÚ GENERAL CON SUBMENÚ DESPLEGADO CON ICONOS También es posible incluir personalizar con iconos cada ítem del menú. Especialmente es conveniente en casos de departamentos, perfiles, etc. Se usarán los iconos de la colección aportada y podrán ser monocromáticos o en color. 1 MENÚ PERFILES (PUNTERO SOBRE PERFIL 03) MENÚ GENERAL MENÚ GENERAL CON SUBMENÚS DESPLEGADOS (: 13px) (: 13px) 3 MENÚ LATERAL Debe ir en el lateral izquierdo y puede tener hasta tres niveles. Los enlaces del primer nivel irán en mayúsculas y los dos siguientes en minúsculas. Si ayuda a la comprensión y usabilidad se pueden añadir iconos. Los enlaces están separados por un borde de 1px (#ddd) y al pasar el puntero por encima el color de fondo cambia de blanco (#fff) a gris muy claro (#f2f2f2). 2 MENÚ GENERAL CON SUBMENÚ DESPLEGADO CON ICONOS 3 MENÚ LATERAL (: 13px) 8

9 ELEMENTOS WEB GENERALES / MÓDULOS PÁGINA PRINCIPAL 1 CARRUSEL IMAGEN Estructura 2 columnas (an: 654px - al: 260px) Estructura 3 columnas (an: 847px - al: 340px) NAVEGACIÓN TEXTO Titular (: 24px; h2;) Texto (: 15px; h2;) 1 2 CARRUSEL Deberá contener al menos dos imágenes y estas deben tener las medidas exactas. El (titular y de desarrollo) será de color blanco y se situará sobre una banda del color corporativo para facilitar su lectura) DEPARTAMENTOS/PERFILES DESTACADOS Son accesos directos desde la página principal a los distintos perfiles que existan en el portal. Cada uno de ellos llevará el color de fondo asignado a su perfil y una pequeña imagen alineada a la izquierda. El nombre del perfil siempre irá en blanco. 2 DEPARTAMENTOS/PERFILES DESTACADOS Este módulo también puede situarse en el lateral y los perfiles se visualizarían en una sola columna TÍTULO MÓDULO (: 14px; h3; mayúsculas) 3 DESTACADOS Contendrá información destacada y que no esté incluida en el módulo Noticias. Pueden ser Congresos, Programas, Ruedas de Prensa, Presentaciones, etc. CAJA DEPARTAMENTO/SECCIÓN (an: 295px - al: 82px) (: 14px; h4) IMAGEN DEPARTAMENTO/SECCIÓN (an: 60px - al: 60px) Puede contener tantos destacados como se desee y su visualización se adaptará al ancho de la pantalla: se mostrarán desde tres cajas hasta una en móviles. Los destacados se desplazan de izquierda a derecha pulsando los botones anterior y siguiente y también con los botones circulares situados en la parte inferior de la caja (el número de estos botones dependerá de la cantidad de destacados). 3 DESTACADOS 4 NAVEGACIÓN: ANTERIOR Y SIGUIENTE MARQUESINA TEXTO (: 14px; cursiva) 4 MARQUESINA Se trata de una caja de en movimiento y se usará para titulares o cualquier contenido que se desee destacar. TÍTULO MÓDULO (: 14px; h3; mayúsculas) La marquesina puede ir incorporada en el módulo de destacados o fuera de él. IMAGEN DESTACADOS (an: 300px - al: 200px) TEXTO DESTACADOS Titular (: 17px; h4) Entradilla (: 13px) 5 DESTACADOS CON PICTO A DOS COLUMNAS Sirve para casos en que haya un elevado número de servicios a destacar. Cada bloque contiene un pictograma alineado a la izquierda, un título y una descripción. También se puede presentar en una sola columna. NAVEGACIÓN: BOTONES CÍRCULOS 4 DESTACADOS CON PICTO A DOS COLUMNAS TÍTULO MÓDULO (: 14px; h3; mayúsculas) ICONO DESTACADOS (an: 21px - al: 21px) TEXTO DESTACADOS Titular (: 14px; h4) Entradilla (: 13px) 9

10 ELEMENTOS WEB GENERALES / MÓDULOS PÁGINA PRINCIPAL 5 NOTICIAS DESTACADAS TÍTULO MÓDULO (: 14px; h3; mayúsculas) ver todo ((: 75%; h5; small) IMAGEN (an: 300px - al: 200px) TEXTO DESTACADOS Titular (: 14px; h4) Fecha y categoría (: 75%; small) Entradilla (: 13px) NOTICIAS DESTACADAS Muestra un número determinado de las últimas noticias incluidas en el portal. Contiene una imagen alineada a la izquierda, titular, fecha, categoría y breve descripción. Desde Ver todo se accede al listado completo de noticias. MAS INFORMACIÓN Idéntico al módulo Destacados. Incluirá información complementaria que se deba resaltar en la página principal: Documentos interesantes, funcionalidades, etc. NOVEDADES Contiene las últimas novedades añadidas al portal. Es un listado con fecha, categoría y titular. No contiene imágenes. 8 ENLACES DE INTERÉS Listado de enlaces importantes. Las listas de enlaces (o cualquier otra) pueden llevar un icono. 6 MÁS INFORMACIÓN TÍTULO MÓDULO (: 14px; h3; mayúsculas) IMAGEN DESTACADOS (an: 300px - al: 200px) TEXTO DESTACADOS Titular (: 17px; h4) Entradilla (: 13px) 7 NOVEDADES 8 ENLACES DE INTERÉS TÍTULO MÓDULO (: 14px; h3; mayúsculas) ver todo (: 75%; h5; small) ENLACES (: 13px; h4) TITULARES Fecha y categoría (: 75%; small) Titular (: 13px; h4) ICONO ENLACE (aplicando estilo.enlaces) 10

11 ELEMENTOS WEB GENERALES / LATERAL 1 SERVICIOS DESTACADOS TEXTO Titular (: 14px; h4) Entradilla (: 75%; small) IMAGEN (an: 50px - al: 50px) 2 AGENDA CALENDARIO Días (: 11px; ) Días -no mes actual- (color: #bbb) 1 2 SERVICIOS DESTACADOS Accesos a servicios, funciones o secciones destacados. Funciona como un carrusel vertical y los manejadores situados arriba a la derecha desplazan uno a uno los servicios. Deben contener una imagen y un máximo de cuatro líneas, incluyendo titular y descripción. La imagen debe ser cuadrada. Posteriormente los estilos incluidos la convierten en circular. AGENDA En este módulo se ven las actividades incluidas en el portal. Contiene: Calendario: con manejadores para navegar entre meses y rejilla con los días de la semana. Los días con actividades son resaltados con un color de fondo (el mismo asignado a esa categoría). Cuando un día contiene varias actividades el fondo es gris oscuro con un borde gris claro de 3px. Buscador: con desplegable de categorías y búsqueda por rango de fechas. ACTIVIDADES Fecha y categoría (: 75%; small) Titular (: 12px; h4) LEYENDA LEYENDA Categorías (: 11px; ) Círculo (an: 10px - al: 10px) 3 Pestañas Actividades y Leyenda : la primera pestaña contiene un listado de las actividades más recientes y la segunda un listado con la leyenda de categorías y sus colores asignados. BANNERS Cajas que enlazarán a distintas zonas internas o a páginas externas. Su función es destacar y por tanto no se debe abusar de su uso recomendando incluir una cantidad moderada de ellos. Modelo icono + fondo de color: sus esquinas son redondeadas, tiene un fondo de color (elegido de la paleta de colores), un icono blanco (de la colección) y un titular en blanco. 3 BANNERS BANNER ICONO + FONDO COLOR Titular (: 14px; h4) Icono (an: 40px - al: 40px) BANNER IMAGEN + TITULAR + DESCRIPCIÓN Titular (: 14px; h4) Imagen (an: 80px - al: 80px) 4 Modelo imagen + titular + descripción: sus esquinas son redondeadas, tiene un borde de 1px y contiene una imagen cuadrada, un titular y una descripción. Se debe evitar que la descripción sea demasiado larga. ENCUESTAS Módulo para hacer consultas a los usuarios. Contendrá introducción de la encuesta y los campos necesarios para rellenarlas. Junto al botón Enviar habrá otro para ver los resultados. 4 ENCUESTAS 11

12 ELEMENTOS WEB GENERALES / PIE 1 2 LOGOS EUROPEOS / FIRMANTES LOGOS CARM + COPYRIGHT 5 Dirección (: 13px) 3 MENÚ PIE (: 13px) SELLOS W3C / ACCESIBILIDAD PIE El pie de página está dividido en tres columnas. Bajo ellas hay una banda del color corporativo que contiene la dirección física del servicio. LOGOS EUROPEOS / FIRMANTES Ocupan la primera columna de tres y deben ir alineados. Si fueran tantos que no caben en la columna deberán ir uno debajo de otro. LOGOS CARM + COPYRIGHT Contiene el escudo de la Carm y su copyright con el intervalo de fechas entre el año de publicación y el actual. Todo este contenido debe ir centrado en la columna. MENÚ PIE Contiene enlaces secundarios que no se incluyen en los menús principales, tales como Accesibilidad, Mapa web, Aviso legal, Sobre el portal, etc. SELLOS Contiene las pastillas que indican que el portal cumple con las especificaciones de la W3C y de accesibilidad. DIRECCIÓN Dirección de contacto, teléfonos, etc. Fondo de color corporativo. 12

13 PÁGINAS INTERIORES / ESTRUCTURA GENERAL (3 COLUMNAS) TÍTULO SECCIÓN (: 24px; h1) ENTRADILLA (: 16px; h2) TEXTO CONTENIDO + IMÁGENES (: 13px) 13

14 PÁGINAS INTERIORES / ESTRUCTURA GENERAL (2 COLUMNAS + FONDO) 14

15 ELEMENTOS PÁGINAS INTERIORES 1 INTERIOR CON DESTACADOS 1 INTERIOR CON DESTACADOS Contiene noticias/novedades destacadas pertenecientes a la sección. TÍTULO MÓDULO (: 14px; h3; mayúsculas) ver todo (: 75%; h5; small) Icono: (an: 18px - al: 18px) CATEGORÍA (: 14px;) ver todo (: 75%; h5; small) Imagen: (an: 110px - al: 80px) TITULARES Fecha y categoría (: 75%; small) Titular (: 13px; h4) 2 Este listado puede estar categorizado y por tanto cada categoría tendría su cabecera consistente en una caja de borde de 1px redondeado y fondo gris (#e3e3e3) que contendrá una imagen y el título de la categoría, LISTAS Las listas serán sencillas. Las listas no ordenadas contendrán el boliche por defecto de los navegadores. 3 TABLAS Tendrán un borde de 1px para filas y columnas y las filas alternarán los colores blanco y gris claro (#f9f9f9). Los estilos incluidos harán que al pasar el puntero sobre una fila blanca, esta se resaltará levemente. PUBLICACIONES Y COMUNICADOS Estas cajas tendrán un fondo gris (#f5f5f5) con borde más oscuro de 1px (#ccc). En ellas se deben incluir datos relativos a publicaciones, notas de prensa, etc. 2 LISTAS Y TABLAS 3 PUBLICACIONES Y COMUNICADOS 15

16 ELEMENTOS PÁGINAS INTERIORES 4 LISTADO DE ELEMENTOS CON IMAGEN 4 LISTADO DE ELEMENTOS CON IMAGEN Este elemento se puede utilizar para listados que necesiten una imagen como, por ejemplo, listados de programas europeos donde la imagen será el logo del programa. IMAGEN (an: 300px - al: 200px) TEXTO Titular (: 14px; h4) Entradilla (: 13px) 5 DOCUMENTOS DE INTERÉS Listado de documentos descargables. Estará categorizado y cada archivo tendrá su título, descripción (si es necesario) y un icono en color con el nombre del tipo de archivo en blanco. Documentos de interés desplegado: también se puede utilizar un componente para plegar y desplegar información que pueda ser demasiado larga (ver ejemplo). 6 FORMULARIO Estará en dos columnas. La de la izquierda contendrá los nombres de los campos (alineados a la derecha). Es importante incluir la casilla de aceptación de política de privacidad para cumplir la normativa. Para evitar correo no deseado se puede activar el popular componente Captcha. 5 DOCUMENTOS DE INTERÉS TEXTO Botón descarga (: 75%; small) *En la sección Iconos y botones se muestran los diferentes modelos de botones de descarga DOCUMENTOS DESPLEGADOS 6 FORMULARIO 16

17 ELEMENTOS PÁGINAS INTERIORES 7 BÚSQUEDA AVANZADA 7 BÚSQUEDA AVANZADA Los elementos se dispondrán igual que en el formulario. Estos estarán dentro de una caja con fondo gris claro. 8 9 INICIO DE SESIÓN Al pulsar sobre Iniciar sesión en el menú de la cabecera se abrirá una ventana modal que contendrá un formulario de acceso. También se podrá, en algunos casos, acceder con una cuenta de redes sociales como Facebook o Twitter. Los botones para su acceso incluirán el icono de la aplicación. PAGINACIÓN En caso de listados largos se puede incluir el componente de navegación que contendrá la cantidad de páginas existentes y las flechas de navegación para ir hacia atrás o hacia delante. El número de página en la que nos encontremos estará resaltado. 8 INICIO DE SESIÓN 9 PAGINACIÓN 17

18 NOTICIAS / LISTADO LISTADO DE NOTICIAS (ENTRE 6 Y 10) TÍTULO SECCIÓN (: 24px; h1) MENÚ CATEGORÍAS IMAGEN (an: 300px - al: 200px) TEXTO Titular (: 14px; h4) Fecha y categoría (: 75%; small) Entradilla (: 13px) PAGINACIÓN 18

19 NOTICIAS / NOTICIA NOMBRE DE SECCIÓN (: 14px; h3) TÍTULO DE LA NOTICIA (: 24px; h1) MENÚ CATEGORÍAS FECHA + CATEGORÍA (: 14px; h3) VOLVER AL LISTADO (: 75%; small) ENTRADILLA (: 16px; h2) TEXTO GENERAL DE LA NOTICIA (: 13px) 19

20 AGENDA / COMPONENTES AGENDA FILTROS NAVEGACIÓN AGENDA FILTRO AÑO AGENDA FILTRO MES AGENDA FILTRO SEMANA AGENDA FILTROS DÍA 20

21 AGENDA / COMPONENTES AGENDA EVENTO / ACTIVIDAD 21

22 ELEMENTOS GRÁFICOS / TIPOGRAFÍA FUENTE UTILIZADA La fuente por defecto será Open Sans. Esta fuente es gratuita y se puede obtener en Google Fonts. Para activar esta fuente en el portal se usará la regla url( OPEN SANS 300 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz ?().; OPEN SANS 400 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz ?().; OPEN SANS 600 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz ?().; OPEN SANS 700 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz ?().; TAMAÑO DE TEXTO El tamaño de por defecto será de 13px; Los tamaños de los elementos más frecuentes son: h1: 24px h2: 20px h3: 16px h4: 14px h5: 12px h6: 11px small: 75% 22

23 ELEMENTOS GRÁFICOS / COLORES COLOR DE FONDO DE LA PÁGINA: #EEE COLOR DE FONDO DEL CONTENIDO: #FFF COLOR GENERAL DEL TEXTO: #EEE COLOR GENERAL DE ENCABEZADOS: # COLOR FONDO MÓDULOS DESTACADOS: #F2F2F2 23

24 ELEMENTOS GRÁFICOS / PALETA DE COLORES Para personalizar los diferentes portales se utilizará la siguiente paleta de colores. PALETA DE COLORES ORGANIZADA POR SECTORES Cada color se presenta en su color base (derecha) y en su versión atenuada (izquierda). Todos los colores permiten usar en color blanco sobre ellos. Esta paleta también se puede usar para definir los colores de perfiles y departamentos. AGRICULTURA #A7CF8F #8EC475 CIENCIA Y TECNOLOGêA #CBD0D8 #AAB2BD COMERCIO #4684B2 #235B84 CULTURA Y OCIO #6498D0 #5085C4 DEPORTE #EA7A56 #E9573F ECONOMêA #F2B0A1 #E58373 EDUCACIîN #4FC1E9 #3AAEDA EMPLEO #50BECB #0BABC4 ENERGêA #E89612 #ED6E12 HACIENDA #8AA8B6 #69899E INDUSTRIA # # JUVENTUD #EA5465 #DA4452 t exto LEGISLACIîN Y JUSTICIA #CC939E #B5626C MEDIO AMBIENTE #aacd72 #8cc052 MEDIO RURAL #BA9E78 #9F7D59 SALUD #78C3AC #30B19C SECTOR PòBLICO #BA457C #A5275B SEGURIDAD #5A6D72 #3A4E56 SOCIEDAD Y BIENESTAR #E487B6 #D46FA9 TRANSPORTES #9BD4DE #81CBD6 TURISMO #F7D078 #FABC50 URBANISMO E INFRAESTRUCTURAS #ED565 #C6143F VIOLENCIA DE GƒNERO #A290C4 #8A78B5 VIVIENDA #f2dba7 #d7a874 24

25 ELEMENTOS GRÁFICOS / ICONOS Para facilitar el uso de iconos se ha optado por usar el conjunto de iconos Font Awesome. Esta colección de iconos es gratuita y su principal característica es que se pueden utilizar como una fuente y por tanto son vectoriales y escalables (no pierden resolución al cambiar de tamaño) y se les puede aplicar cualquier color. Estos son algunos ejemplos de iconos Font Awesome : Para conocer más sobre su uso se puede visitar la siguiente dirección: EJEMPLOS DE USO DE ICONOS 25

26 ELEMENTOS GRÁFICOS / BOTONES Botón principal COLOR BOTÓN PRINCIPAL: USAR COLOR CORPORATIVO DEL PORTAL COLOR TEXTO: #FFF BORDER-RADIUS: 16PX PADDING: 5PX 10PX TAMAÑO TEXTO: 11PX Botón secundario COLOR BOTÓN SECUNDARIO: #CCC COLOR TEXTO: #333 BORDER-RADIUS: 16PX PADDING: 5PX 10PX TAMAÑO TEXTO: 11PX COLOR BOTÓN SUBIR: USAR COLOR CORPORATIVO DEL PORTAL COLOR TEXTO: #FFF COLOR BOTÓN NAVEGACIÓN: USAR COLOR CORPORATIVO DEL PORTAL COLOR TEXTO: #FFF BOTONES DESCARGA: Ver PDF COLOR: #DA4453 COLOR TEXTO: #FFF TAMAÑO TEXTO: 75% PADDING: 2PX 4PX Ver Excel Novedad! COLOR: #30B19C COLOR TEXTO: #FFF TAMAÑO TEXTO: 75% PADDING: 2PX 4PX Ver Imagen COLOR: #8CC052 COLOR TEXTO: #FFF TAMAÑO TEXTO: 75% PADDING: 2PX 4PX BOTÓN NOVEDAD EJEMPLOS DE USO BOTÓN NOVEDAD Novedad! COLOR: USAR COLOR CORPORATIVO DEL PORTAL COLOR TEXTO: #FFF TAMAÑO TEXTO: 65% PADDING: 1PX 3PX Novedad! 26

27 ADAPTABILIDAD A DISPOSITIVOS El HTML y CSS desarrollado es adaptativo o responsive. Es decir, la disposición de los elementos se ajustan en función de los distintos tamaños de pantallas de los diferentes dispositivos que utilizan los usuarios. CABECERA Y MENÚ EN SMARTPHONE Los s de los iconos desaparecen. El menú general se contrae y muestra un icono para desplegar el menú. MENÚ DESPLEGADO EN SMARTPHONE 27

28