GUÍA DE IMAGENPortales Institucionales

www.bajacalifornia.gob.mx

IntroducciónEste 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.

Manual de Imagen para Portales

La plantilla está constituida por varios elementos dentro del diseño que deben mantenerse los cuales más adelante se explican detalladamente: , (trámites y servicios, eventos y enlaces de interés) (búsqueda, titular de la dependencia, Secciones y Acerca de Nosotros) (donde se despliega la información de la dependencia como noticias, programas e información importante a destacar, ) y (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).

encabezado columna derechacolumna izquierda

contenido pie de página

Manual de Imagen para Portales

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.

PIE DE PAGINA

ENCABEZADO

COLUMNADERECHA

COLUMNAIZQUIERDA

CONTENIDO

Uno

Dirección General de Informática

Elementos básicos

Colores a utilizar:

#006600

#CDE99E

#6E6D6B

#F0F0F0

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.

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.

Banner con collage: 860 pixeles de ancho por 94 pxs de altoBarra con nombre de dependencia: 860px de ancho por 21px de alto, color gradiente de #009900 a #006634Barra de opciones fija: 860 px de ancho por 22px de alto, color #FFFFFF

ENCABEZADO

Manual de Imagen para Portales

Encabezado

Contáctanos: Enlace al directorio o a un correo electrónicode atención

Inicio: Regresar a la página principal del sitio

Transparencia: Enlace al portal de Transparencia

Servicios en línea: Enlace a la sección de servicios en línea

Gobierno: Enlace al Portal de Gobierno

COLLAGE DE FOTOS REFERENTES A LA FUNCIÓNDE LA DEPENDENCIA

NOMBRE DE LADEPENDENCIA

BARRA DE OPCIONES FIJA

Dos

Especificaciones

Manual de Imagen para Portales

Nombre

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.

Búsqueda

Secciones

Acerca denosotros

Nos interesatu opinión

Anuncio

Opción uno

Opción dos

Opción tres

Opción cuatro

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.

Motor de búsqueda en el sitio

Información o temas principales decada dependencia

Información sobre la estructurainterna de la dependencia

En caso que se requiera

Liga a forma de contacto o correoelectrónico para opinión sobreel sitio

Menú izquierdo (principal)

Tres

Tipografía:Nombre: Trebuchet MS 12 puntos color#FFFFFFOpciones menú: Verdana 11 puntos, color #666666

Tamaño de la columna 180px

MENÚIZQUIERDO

Menú Opciones

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.

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.

Servicios

Eventos

Sitios de interés

Servicios que ofrece ladependencia

Promocionar los eventos querealiza la dependencia

Enlaces de interés que serelacionan con el área

Manual de Imagen para Portales Cuatro

Menú derecho

MENÚDERECHO

Nombre

Opción uno

Opción dos

Opción tres

Opción cuatro

Menú Opciones

Tipografía:Nombre: Trebuchet MS 12 puntos color #FFFFFFOpciones menú: Verdana 11 puntos, color #666666

Tamaño de la columna 196px

Manual de Imagen para Portales

Tamaño del área 470px

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.

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.

Contenido

Cinco

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.

CONTENIDO

PiePIE

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.

Tamaño del área 860px

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

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.

Banner depromoción

Información o enlaceque se desea recalcar

Manual de Imagen para Portales Seis

BannersEjemplos banners

Manual de Imagen para Portales

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.

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.

Documentos PDF (Portable Document Format)

Siete

3MG

1MG

Aunque las animaciones en flash 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.

ayudan gráficamente a que la página sea más atractiva debido al

Animaciones en Flash

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.

GIF Animados

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.

Videos

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.

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.

Encabezado

Cuerpo

Pie

TITULOS: Fuente: Trebuchet MS Estilo: Bold Tamaño: 13 puntos Color: #4D8575

Manual de Imagen para Portales Ocho

Hojas de Estilo

Fuente: Verdana Estilo: NormalTamaño: 11 puntos Color: #666666

Fuente: Verdana Estilo: NormalTamaño: 10 puntos Color: #FFFFFF

Manual de Imagen para Portales

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:

Minisitios

Nueve

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.

DIRECTORA GENERAL DE INFORMÁTICA

JEFA DEL DEPTO DE CONTENIDOS DIGITALESY MULTIMEDIARosa María Baltazarrbaltazar@baja.gob.mx

Contacto y dudas:Claudia Herrera Arámburocherrera@baja.gob.mxTel (686) 558 1000 ext. 1403

Lourdes Baltazar Gómez

Gobierno del Estado de Baja Californiawww.bajacalifornia.gob.mx