GUÍA DE IMAGEN Portales Institucionales

Transcripción

1 GUÍA DE IMAGEN Portales Institucionales

2 Manual de Imagen para Portales Introducción Este manual de imagen fue elaborado por la Dirección General de Informática del Gobierno de Baja California, en base a los lineamientos de imagen establecidos por la Dirección de Comunicación Social, con el fin de establecer una imagen institucional en los portales de las dependencias que conforman la estructura estatal. Lo anterior nos permitrá posicionar la imagen de nuestro estado en la red como una sola entidad, ofreciendo un punto único donde se concentre la información y servicios que ofrece el Gobierno, a través de las dependencias que lo conforman, con una navegación amigable, una estructura, lenguaje e imagen homogénea. En el presente documento se describen las especificaciones técnicas del diseño, imagen (look and feel), estructura y navegación del sitio.

3 Dirección General de Informática Uno Manual de Imagen para Portales ENCABEZADO Elementos básicos COLUMNA DERECHA CONTENIDO COLUMNA IZQUIERDA La plantilla está constituida por varios elementos dentro del diseño que deben mantenerse los cuales más adelante se explican detalladamente: encabezado, columna derecha (trámites y servicios, eventos y enlaces de interés) columna izquierda (búsqueda, titular de la dependencia, Secciones y Acerca de Nosotros) contenido (donde se despliega la información de la dependencia como noticias, programas e información importante a destacar, ) y pie de página (nombre de la dependencia y ubicación). Además de los elementos anteriores se debe incluir el fondo azul con lineas curvas, el cual se les proporcionará junto con la hoja de estilos (CSS). PIE DE PAGINA La plantilla debe medir 860 pixeles de ancho y compuesta por 3 columnas donde se despliegan el menu derecho, con las opciones principales del sitio, la columna izquierda con los servicios, eventos y ligas de interés y la parte del centro con el contenido de la página. Colores a utilizar: # #CDE99E #6E6D6B #F0F0F0

4 Manual de Imagen para Portales Dos Encabezado El encabezado se compone por un collage con una imagen de fondo del cielo con fotografías transparentes relacionadas con el tema de la dependencia, apareciendo del lado izquierdo el logo GobBC, y del lado derecho el logo tú eres el progreso. ENCABEZADO En la barra verde aparece el nombre de la dependencia de que se trate. Por último y es importante recalcar que la barra gris debe quedar fija con las opciones de Inicio, Contáctanos, Gobierno, Transparencia y Servicios en Línea. COLLAGE DE FOTOS REFERENTES A LA FUNCIÓN DE LA DEPENDENCIA NOMBRE DE LA DEPENDENCIA BARRA DE OPCIONES FIJA Inicio: Regresar a la página principal del sitio Contáctanos: Enlace al directorio o a un correo electrónico de atención Especificaciones Banner con collage: 860 pixeles de ancho por 94 pxs de alto Barra con nombre de dependencia: 860px de ancho por 21px de alto, color gradiente de # a # Barra de opciones fija: 860 px de ancho por 22px de alto, color #FFFFFF Gobierno: Enlace al Portal de Gobierno Transparencia: Enlace al portal de Transparencia Servicios en línea: Enlace a la sección de servicios en línea

5 Tres Manual de Imagen para Portales MENÚ IZQUIERDO Menú izquierdo (principal) El menú izquierdo debe estar conformado de la siguiente manera: en la parte superior la búsqueda, el recuadro con la foto y el nombre del titular de la dependencia, el apartado de Secciones, Acerca de nosotros, Anuncios (en caso que se requiera) y el banner Nos interesa tu opinión. Motor de búsqueda en el sitio Búsqueda Tamaño de la columna 180px Información o temas principales de cada dependencia Secciones Menú Opciones Opción uno Opción dos Opción tres Nombre Opción cuatro Tipografía: Nombre: Trebuchet MS 12 puntos color#ffffff Opciones menú: Verdana 11 puntos, color # Información sobre la estructura interna de la dependencia En caso que se requiera Liga a forma de contacto o correo electrónico para opinión sobre el sitio Acerca de nosotros Anuncio Nos interesa tu opinión Es importante recalcar que los nombres de las opciones del sitio deben estar enfocadas a facilitar la navegación del usuario, es decir, usar un lenguaje simple, claro y directo, que permite a los visitantes ubicar la información que quieren consultar de manera sencilla y rápida.

6 Manual de Imagen para Portales Cuatro Menú derecho El menú derecho esta compuesto por la sección de Servicios, Eventos de la dependencia y Sitios de interés, relacionados a su área de competencia. MENÚ DERECHO Servicios Servicios que ofrece la dependencia Eventos Promocionar los eventos que realiza la dependencia Tamaño de la columna 196px Menú Opciones Nombre Sitios de interés Enlaces de interés que se relacionan con el área Opción uno Opción dos Opción tres Opción cuatro Tipografía: Nombre: Trebuchet MS 12 puntos color #FFFFFF Opciones menú: Verdana 11 puntos, color # El contar con un sitio WEB es una poderosa herramienta de promoción, por lo mismo se recomienda aprovechar este medio para destacar los servicios que ofrece la dependencia, ya que un gran por ciento de la ciudadanía utiliza Internet como primera vía para consultar información sobre los trámites gubernamentales.

7 Cinco Manual de Imagen para Portales Contenido La parte central de la plantilla esta reservada para el contenido, donde se recomienda colocar algunas noticias, incluirse un mensaje del titular o utilizarse para destacar información importante y programas. CONTENIDO Tamaño del área 470px En el caso de las noticias o comunicados de prensa, anuncios e información en general, se deben actualizar continuamente, esto con el fin de atraer al usuario a visitar con más frecuencia el sitio. PIE Tamaño del área 860px Pie Es la parte inferior del sitio donde vienen plasmados el nombre de la Dependencia y su ubicación. Así mismo se incluyen las opciones generales como lo son: Inicio, Contacto, Transparencia y Servicios en Línea, las cuales ya se explicaron con anterioridad en la presente guía. Se recomienda que los contenidos de interés o las opciones de mayor utilidad y consulta de los usuarios, se despliege en varias partes dentro del sitio, es decir, si esta en alguno de los menús es recomendable, si la estructura del sitio lo permite, colocarla en la página de inicio con el fin de hacerla más accesible al ciudadano.

8 Manual de Imagen para Portales Seis Banners Este elemento es de mucha utilidad ya que permite promocionar de manera gráfica un tema en específico que se quiere resaltar ya sean programas, formatos, etc., los banners se pueden colocar en los espacios de los menús derecho e izquierdo, dependiendo de los requerimientos del mismo (tamaño, imagen, información, etc.). Ejemplos banners Información o enlace que se desea recalcar Banner de promoción Los banners, en la medida de lo posible, deben aparecer claros y no saturados de imagen para el mensaje o la información que se esta promocionando llegue en forma directa al usuario que esta visitando el sitio.

9 Siete 3MG 1MG Documentos PDF: Se debe verificar que el tamaño de los archivos que se publiquen en el sitio, sea adecuado, no debe exceder de 3MG para que el usuario pueda accesar a el rápida y fácilmente. Manual de Imagen para Portales Documentos PDF (Portable Document Format) Este tipo de formato es de gran utilidad ya que permite mostrar documentos electrónicos con el formato original, es decir, fuentes, imagenes y estructura, con un buen nivel de compresión que permite generar documentos accesibles para WEB. Videos Si se considera publicar videos en el sitio, se recomienda utlilizar Flash Video, el cual permite colocar videos fácilmente con aceptable calidad y en un formato apto para que pueda verlo prácticamente cualquier usuario. Es importante recalcar que no se debe abusar de este formato dentro del sitio, ya que lo contrario causaría que la página se volviera inaccesible, lenta y cargada. Animaciones en Flash Aunque las animaciones en flash ayudan gráficamente a que la página sea más atractiva debido al movimiento de las mismas, tienen algunas desventajas como que requieren que el usuario deba tener instalado en Plugins de Flash, además se debe limitar el número de éstos elementos dentro de un sitio, debido a que hará la carga de la pagina más lenta y con esto podremos desanimar a los usuarios a visitar el sitio en otras ocasiones. GIF Animados Una opción para animaciones sencillas o pequeños banners que pueden utilizarse en lugar de las animaciones en flash son los llamados GIFs animados, que ofrecen entre otras ventajas que es compatible con todos los navegadores, es rápido de cargarse, el tamaño del archivo físico es menor.

10 Manual de Imagen para Portales Ocho Hojas de Estilo Como su nombre lo dice esta herramienta permite establecer estilos o atributos a diferentes elementos que tengamos en el sitio, permitiendo aplicar diferente formato en una misma página por ejemplo: establecer un estilo para los encabezados (color, tipo de letra y tamaño), uno para el texto del cuerpo de la página, otro para la apariencia de las ligas, entre otros. Encabezado TITULOS: Fuente: Trebuchet MS Estilo: Bold Tamaño: 13 puntos Color: #4D8575 Cuerpo Fuente: Verdana Estilo: Normal Tamaño: 11 puntos Color: # Pie Fuente: Verdana Estilo: Normal Tamaño: 10 puntos Color: #FFFFFF Si no se esta familiarizado con las hojas de estilo pueden solicitar el CSS estándar para los portales del Gobierno del Estado, que se les enviará una vez solicitado.

11 Nueve Manual de Imagen para Portales Minisitios Para las dependencias que manejen poca información o que no cuenten con un sitio web, existe la opción de una plantilla sencilla donde se publique la información básica sobre ésta, a continuación un ejemplo: En caso de requerir apoyo por parte de la Dirección General de Informática para la elaboración de su sitio, favor de hacer llegar la petición mediante oficio dirigido a la Directora General de Informática, Lourdes Baltazar Gómez, con las necesidades que tenga la dependencia.

12 SUBSECRETARÍA DE INNOVACIÓN Y MODERNIZACIÓN GUBERNAMENTAL Jorge Flores Vásquez COORDINADORA DE GOBIERNO DIGITAL Rosa María Baltazar rbaltazar@baja.gob.mx Contacto y dudas: Claudia Herrera Arámburo cherrera@baja.gob.mx Tel (686) ext Gobierno del Estado de Baja California