Manual de Imagen

para

Sitios de Internet
del Gobierno Federal

El presente manual ha sido elaborada por el Sistema Internet de la Presidencia de la Coordinacin de Comunicacin Social de Presidencia de la Repblica. La informacin original contenida en el presente documento es propiedad del Sistema Internet de la Presidencia y la misma se encuentra disponible bajo una licencia Creative Commons BY-NC-ND 2.5 Mxico.

Algunos Derechos Reservados. Sistema Internet de la Presidencia. Mxico, 2007.

Manual de Imagen
para

Sitios de Internet
del Gobierno Federal

ndice
6

Introduccin Elementos fijos

Encabezado o Header Men Principal Pie o Footer
pg.

Nveles de Navegacin

pg.

Men Principal Sub-Mens Breadcrumb Ejemplo Navegacin

Zonas de Contenido
pg.

pg. pg. pg.

8 8 8 8

Zonas de Contenido
(pgina principal) Zona Central o Principal Zona Secundaria Zona Flexibles Zona de Banners Banners y su Interaccin con los Mens Secundarios Manejo de Mens Secundarios

Uso de Micrositios Intranets y Sistemas de Gestin Internos Manejo de Documentos y Formatos Relacionados
Uso de Flash Formatos de Audio y Video Formatos de Texto

pg.

Uso de Color y Tipografa

pg.

Uso de Plantillas para Organismos descentralizados y Empresas de Participacin Estatal

pg.

11

Introduccin

En los ltimos aos, el nivel en el que se encuentra el Gobierno Electrnico en Mxico, en relacin con otros Pases, ha cado significativamente. Estudios del Banco Mundial, de la Organizacin de las Naciones Unidas y de algunos Centros de Investigacin como la Brown Univeristy dan claras muestras de esta situacin. Tan slo en un ao, Mxico cay ms de treinta posiciones en la escala realizada por el Center of Public Policy de la Brown University, debido bsicamente a que otros Pases han avanzado a pasos agigantados en el desarrollo del E-Gobierno. Tomando en cuenta estos factores y las observaciones realizadas por estas Entidades a nivel global. Como primer punto recomiendan contar con una nica Imagen Institucional para todos los Sitios de Gobierno, para lograr consistencia y facilitar la navegacin a los visitantes de los Portales de la Admnistracin Pblica Federal, el Sistema Internet de la Presidencia, desarroll una serie de plantillas Web, sumamente flexibles, tiles y de fcil implementacin para los diferentes sectores del Gobierno Federal. Cada elemento que conforma dichas plantillas est dispuesto con objetivos especficos. La modificacin de los parmetros que se describen a continuacin provocara una percepcin errnea del mensaje y afectara en forma negativa la Imagen Global que se desea transmitir a los usuarios de los Sitios de Internet Gubernamentales. El objetivo de este Manual es posicionar la Imagen Institucional de la Administracin 2006-2012 y de esta forma darle personalidad al Gobierno en un medio electrnico tan importante como lo es Internet.

1
Elementos Fijos
Estos elementos tienen por objetivo: crear consistencia y homogeneidad para lograr en el usuario una percepcin de familiaridad al ingresar a cualquier Sitio Web del Gobierno Federal pues generan un principio de orden que se refleja en la disposicin de los elementos que auxiliarn al usuario durante su navegacin en el Portal. Existen 3 elementos o zonas que deben respetarse por completo en cuanto a diseo, tamao y contenido. Se les llama elementos fijos porque debern mantenerse en todo momento durante la navegacin del Sitio.

Encabezado Header.
El Encabezado se construye a partir de la Firma Institucional, que funge como el elemento ms importante de esta seccin. Esta zona est constituida por cuatro elementos principales: Firma Institucional, Logotipo Mxico, Barra de Herramientas de opciones comunes a todas las Secretaras de Estado y PGR y el Buscador, los dems elementos visuales, que componen el encabezado, estn diseados para armonizar y enmarcar. A continuacin se detalla cada uno de estos elementos.

Firma Institucional.
Debe colocarse en su versin completa, de acuerdo al Manual de Identidad del Gobierno Federal, en la esquina superior izquierda, en formato gif o jpg, con una medida de 195 px de ancho por 130 px de altura.

Logotipo Mxico.
El logotipo deber ser tomado directamente del Manual para preservar las caractersticas tipogrficas que se le han asignado, y no tratar de reescribirlo con la fuente Eureka Sans. Se colocar en la esquina superior derecha para sealar al usuario el Pas al que pertenece el Sitio al que ha ingresado, el color de fondo debe ser el color institucional, asignado en el Manual de Identidad a cada Dependencia.

Inicio

Mapa de Sitio

Contacto

English

Buscar en el Sitio
Ir

www.secretaria.gob.mx

Barra de Herramientas.
Su funcin es brindar a los usuarios las mismas opciones de navegacin presentes en todas las pginas de las Secretarias de Estado y PGR. Se compone de: Inicio, Mapa de Sitio, Contacto, Opciones de Idioma y Preguntas Frecuentes. No debern agregarse ms opciones al men, ya que est destinado, nicamente, a contar con elementos comunes de navegacin para todos los Sitios Web del Gobierno Federal. La seccin superior de la Barra de Herramientas debe conservar el diseo tal como aparece en la plantilla seleccionada y quedar libre de elementos como fotografas, banners o vnculos.

Buscador.
Debe ser colocado en la esquina superior derecha, abajo del logotipo de Mxico, tal como aparece en la ilustracin. Para comprobar el correcto despliegue y funcionamiento de la casilla de bsqueda es necesario realizar pruebas en diferentes navegadores.

2
Men Principal
Como su nombre lo indica, el Men Pricnipal, es el de mayor jerarqua para los Sitios Web del Gobierno Federal. Se compone de los temas centrales de cada Secretara, por lo que debe hacerse un esfuerzo especial en la eleccin y organizacin de los contenidos de este men. Se recomienda que no exceda de diez elementos y que se agrupen los contenidos de forma lgica y til, pensando en todo momento en satisfacer las necesidades de los ciudadanos que visiten el Sitio. Se coloca del lado izquierdo de la pgina en las variaciones de color que le fueron asignadas a la Dependencia, en algunos casos podr ser utilizado en escala de grises. La decisin para la opcin de color parte de lograr un buen contraste visual entre fondo y texto. Las opciones del Men debern escribirse en altas (maysculas) para favorecer la lectura y darle la importancia que el men requiere. Los ttulos deben ser cortos y describir de forma concreta el contenido de esa seccin. Construimos Sitios para el Ciudadano, esa es la prioridad, por tal motivo se debe evitar el uso de ttulos tcnicos que confundan al Ciudadano promedio.

Pie o Footer
Ubicado en la parte inferior del Sitio Web, contiene la direccin fsica de la Dependencia, telfonos, direccin electrnica de contacto y polticas de privacidad.

3
Zonas de Contenido (pgina principal)
Estn construidas para que cada Dependencia defina su contenido a partir de su estrategia de comunicacin, su buen manejo definir el xito del Portal. Cada zona cuenta con un tamao fijo e inalterable con el propsito de mantener el balance visual y la efectividad en la transmisin de los mensajes emitidos por cada rea. Existen cuatro zonas y estn construidas a partir de jerarquas visuales propias de cualquier Sitio Web:

Zona Central o Principal

Es el eje central del Sitio. Contiene el servicio ms importante que la Dependencia ofrece al ciudadano. En este apartado deber colocarse el mensaje central que requiera dar a conocer la Dependencia. Dicho mensaje se adecuar a las necesidades de comunicacin fundamentales de la Entidad, por ejemplo, un programa o un conjunto de programas sociales en el caso de SEDESOL, SAGARPA o SRA, una Sala de Prensa en el Caso de Presidencia, un acceso a contenidos por tipo de audiencia en el caso de SEGOB, etc.

Zona Secundaria
Esta zona es de gran importancia. Sirve para dar fuerza y soporte al eje principal en la Estrategia de Comunicacin de cada Secretara. En este espacio deben colocarse los contenidos que provoquen inters en el visitante recurrente del Portal.

Zonas Flexibles
Zonas destinadas a ser apoyo a la comunicacin. Son elementos dinmicos y de oportunidad que le dan frescura a nuestro Sitio. Por ejemplo, mens secundarios, encuestas, ligas a otros Sitios. Como su nombre lo indica, son reas con gran flexibilidad que ocupan un lugar importante dentro de la Pgina Principal del Sitio Web Gubernamental. El buen manejo de esta zona da como resultado la cohesin de todos los elementos de la Pgina de Inicio.

4
Zona de Banners
Conocemos como Banner a un elemento visualmente atrayente, colocado generalmente en las pginas de inicio de los Sitios Web, su funcin es promocionar algn tema o programa especfico de temporalidad definida. La dimensin de los Banners para las plantillas del Gobierno Federal ser de 130 x 65 pixeles. En el caso de las Secretaras de Estado, podrn descargar los Banners obligatorios desde el Sitio Web del SIP, www.sip.gob.mx. Un buen manejo de Banners en nuestro Sitio Web ser un factor esencial para la aplicacin de la estrategia de comunicacin de cada Secretara, adems su implementacin dar frescura a la Pgina Principal, sin embargo abusar de este recurso puede afectar de forma negativa la comunicacin con el usuario. Las plantillas para las Dependencias del Gobierno Federal estn diseadas para que el uso de esta herramienta no afecte el mensaje principal que ofrece la Institucin. En las plantillas se ofrecen dos opciones para estos elementos: 4 5 Banners para uso de la Entidad. Para las Cabezas de Sector existen dos Banners de uso obligatorio: www.presidencia.gob.mx y www.gob.mx. Los dems espacios se utilizarn segn la Dependencia crea conveniente.

Los Banners y su Interaccin con los mens secundarios

Ante la limitante en el nmero de banners para la pgina principal existe como alternativa el uso del Men Secundario de Enlaces o Ligas. Este Men est destinado para listar los enlaces a Sitios relacionados con el Portal de la Dependencia, y se encuentra del lado Izquierdo bajo el Men Principal. Este Men no es obligatorio pero es til para los Sitios que solan tener gran cantidad de banners en la pgina principal.

Manejo de Mens Secundarios

Los Mens Secundarios son un importante recurso para el manejo de los mensajes que se ofrecen en la pgina principal. Cabe sealar que al llamarles secundarios no estamos degradando a estos elementos, al contrario, la eficacia en su acomodo da soporte y fuerza al mensaje que buscan dar las Dependencias de la APF. En esta zona podemos encontrar secciones como: Temas de Inters, Informacin por Segmento de la Poblacin, Ligas, entre otros.

5
Uso de Color
El uso del color est definido en el Manual de Identidad Institucional del Gobierno Federal, que entreg la Presidencia de la Repblica a cada Dependencia. La Imagen Institucional ofrece colores slidos, as como sus variaciones en porcentajes de tonalidades del color principal para las distintas zonas que componen las plantillas. Se recomienda apoyarse con tonos grises para combinar. Queda prohibido cualquier tipo de sombra, difuminados y uso de curvas en el diseo ya que estos recursos rompen con los objetivos de la imagen.

Tipografa
Existen criterios claros para el uso de la tipografa, stos debern respetarse en todos los apartados y secciones del Portal, ya que permiten a los usuarios identificar con claridad y rpidez los ttulos, subttulos y contenidos publicados.

La tipografa institucional (Eureka Sans)

Slo debe utilizarse en textos que sean imgenes.

Ttulos
Fuente: Verdana Tamao: 14 px Estilo: Bold Color: institucional o un porcentaje del mismo, cuidando la legibilidad.

Subttulos
90% 75%

50%

30%

Fuente: Verdana Tamao: 12 px Estilo: Bold Color: institucional o un porcentaje del mismo, cuidando la legibilidad

Contenidos
Fuente: Verdana Tamao: 11 px Estilo: Normal Color: #666666

6
Niveles de Navegacin
Uno de los aspectos ms importantes en la homologacin de los Sitios Web es la navegacin. Las ventajas que obtenemos al contar con una navegacin comn y sencilla est en mejorar significativamente la experiencia del usuario, al crearle un sentido de familiaridad en la manera en que se desenvuelve a lo largo de todos los Sitios Web de Gobierno. La navegacin en base a niveles simples funciona muy bien para Portales con gran cantidad de informacin como los del Gobierno Federal.

Existen tres zonas que nos ayudan a conservar estos Nveles de Navegacin

Submen Men principal

Se encuentra abajo de la firma de la Dependencia en la parte izquierda de nuestro Sitio, no cambia durante la navegacin. Se encuentra colocado en la columna derecha a la misma altura del Men Principal. Su caracterstica esencial est en cambiar sus elementos segn la seccin en la que se encuentre el usuario.

Breadcrumb
Otro elemento importante para la navegacin, por niveles simples, es el Breadcrumb que se encuentra justo encima de nuestros contenidos en las pginas internas y funciona como un minimapa que indica al usuario en que parte del Portal se encuentra ubicado.

7
Ejemplo de la Navegacin por Niveles Simples
Supongamos que queremos conocer los datos de algn Funcionario Pblico. Tendramos que dirigirnos a la seccin de Directorio dentro del submen Quines Somos para poder hacerlo debemos escalar tres niveles: Quines Somos - Directorio - Funcionario.

Seleccionamos la Opcin Quines Somos (Men Principal) Al entrar a la seccin, el Men Principal, encabezado y footer quedarn en la misma posicin y con los mismos contenidos, la opcin del men seleccionado se mostrar en otro color.

Del lado derecho, se habilitar el submen correspondiente a dicha seccin, con las opciones especficas de Quines Somos: Historia, Estructura y Directorio.

Si se opta por la seccin de Directorio, sta quedar habilitada y se mostrarn en el submen las opciones especficas de dicha seccin, que podran ser: las reas de la Dependencia, el listado de Funcionarios o cualquier forma de organizacin de contenidos que se haya elegido.

Es importante sealar, que es indispensable, que todos los Sitios Web de la APF cuenten con esquemas de navegacin idnticos para evitar confundir al usuario y lograr una homologacin total, por tal motivo cualquier otro tipo de navegacin, como los mens desplegables, queda prohibido dentro de los Sitios de Gobierno.

8
Zonas de Contenido
Esta zona es exclusiva para el cuerpo del contenido de cada seccin. Queda prohibida la implementacin de mens, banners y de todo tipo de elementos ajenos a esta rea. Durante el recorrido de este Manual se hace una descripcin detallada de las zonas adecuadas para el manejo de estos elementos. De igual forma deben respetarse las dimensiones de la zona de contenido que se encuentra fija en toda la navegacin de nuestros Portales. Para el manejo de informacin con otro diseo se recomienda hacer una evaluacin sobre la posibilidad de crear un micrositio.

Uso de Micrositios
La implementacin de micrositios dentro del Portal debe pasar por un estricto proceso de evaluacin sobre las ventajas y desventajas que le traera a nuestro Sitio, ya que el exceso de estas herramientas puede causar confusin y problemas de navegacion para los usuarios. Los Requisitos que debe cumplir una seccin para convertirse en un micrositio son: Que la informacin sea temporal, es decir, con un periodo de vida limitado, que sea de gran inters para los visitantes y, en consencuencia, requieran dirigir toda su atencin a un tema en especfico. Que contemos con la suficiente informacin para que sea atractivo. Si no existe un micrositio robusto el usuario se desmotivar y saldr de nuestro Portal; por ltimo, que la informacin contenida dentro de ste, no encaje en ninguna de las secciones actuales del Sitio Web Principal.

Intranets y Sistemas de Gestin Internos

Para el manejo de los sistemas internos de las dependencias deben seguirse los mismos lineamientos de diseo en cuanto a color y concepto, con la gran diferencia de que deber respetarse el desarrollo tecnolgico que se haya construido, es decir, se privilegiar, hasta donde sea posible, la adaptacin de las aplicaciones a Intranets en la parte visual, sin que impacte significativamente en el desarrollo de cdigo fuente nuevo. Se utilizar la Imagen Institucional en su totalidad nicamente en el desarrollo de sistemas nuevos.

Manejo de Documentos y Formatos Relacionados

Uso de Flash
Las plantillas para Sitios Web del Gobierno Federal estn diseadas para trabajar con la estrategia de comunicacin de cada Secretara como eje del Portal y el manejo de sus zonas de trabajo son determinantes en la respuesta del usuario. Necesitamos contar con elementos comunes y de fcil acceso con la intencin de llegar a los ciudadanos mexicanos y extranjeros en cualquier zona del Pas y en cualquier rincn del mundo, por tal motivo queda prohibido el uso de herramientas en Flash y gif animados en la Pgina Principal. La forma en que organizamos los contenidos por medio de jerarquas es nica y est exclusivamente definida por el uso de las zonas de informacin. El uso de Flash y otras herramientas queda limitado a secciones y audiencias especficas del Sitio.

9
Formatos de Audio y Video
Existen diversos elementos que deben considerarse al momento de elegir un formato de audio o video para ser incluido en un Sitio Web del Gobierno Federal. Entre los principales destacan: Compatibilidad Tamao de los archivos Calidad de Audio / Video Facilidad de Edicin Si se cuenta con el software o las herramientas necesarias para su creacin/edicin. Si se requieren programas especiales del lado del usuario (plug-ins) para que puedan ser visualizados / escuchados. La tecnologa Adobe Flash comienza a ser ampliamente utilizada (segn cifras de la compaia, ms de 500 millones de computadoras conectadas a Internet cuentan con este programa o su Plug-in instalado), debido a su buen formato y a una excelente compresin, con lo que se puede tener informacin multimedia de gran calidad con un bajo peso en Kb, lo que facilita su intercambio. Dicha tecnologa se utiliza principalmente para transmitir video va Web, por lo que se recomienda utilizar archivos en formato FLV (Flash Video) como opcin secundaria. En caso de no contar con las herramientas necesarias para generar videos en Flash, se puede optar por la tecnologa Apple Quicktime, utilizada por el 1.4% de usuarios de Internet en Mxico, que tiene acceso a equipos Apple/Macintosh, la primera minora de sistemas operativos. Estadsticamente se sabe que en Mxico el 96% de los visitantes utilizan Microsoft Windows como sistema operativo para navegar en Internet y que Microsoft Internet Explorer en sus distintas versiones lo utiliza el 90% de los internautas. Por ello, se recomienda que se cuente, en la medida de lo posible, con formatos: WMV (Windows Media Video) para el contenido en video, y WMA (Windows Media Audio) para el contenido en audio. Ambos formatos tienen una calidad aceptable y una compresin que les permite ser utilizados en Web sin demasiadas complicaciones. Adicionalmente, se recomienda contar con formatos de audio y video secundarios, pues facilitan visualizar y escuchar el contenido de forma adecuada.

La premisa bsica que debe tomarse en cuenta, es que el contenido o la informacin debe de ser accesible para el mayor nmero de visitantes, sin importar el formato, es decir, se recomienda siempre utilizar cuando menos dos opciones distintas para publicar contenido multimedia. Adoptar estas medidas nos garantiza que dicha informacin ser vista por el mayor nmero de personas.

En relacin a tecnologas secundarias para archivos de audio, se recomienda el MP3. Dicho formato se ha hecho muy popular al contar con reproductores personales en amplios sectores de la sociedad. As mismo, el MP3 es uno de los formatos favoritos para la presentacin de Podcasts, (archivo de audio que es distribuido por medio de un canal RSS o Feed) herramienta cada vez ms utilizada para el manejo de noticias que se ofrecen desde los Sitios Gubernamentales alrededor del mundo.

10
Formatos de Texto
Generalmente en los Sitios Web Gubernamentales se requiere contar con documentos adicionales o material de apoyo que reafirme o proporcione mayor informacin sobre una nota en formato HTML. Existe una gran diversidad de formatos de texto, aunque no todos son totalmente estndares. Los formatos que se crean a travs de la Suite Microsoft Office: Word, Excel, PowerPoint, etc., requieren que el usuario cuente con un visualizador o con la misma Suite de Office, para accesar a ellos. Por esta razn se recomienda utilizar formatos estndar, que no necesiten aplicaciones adicionales que tengan costo para los visitantes del Sitio. Estos son algunos formatos recomendables: PDF (Portable Document Format) Es un formato ampliamente utilizado a nivel mundial, ya que permite contar con documentos en formato original (tamao y tipo de letra definidos, grficas, imgenes, colores), con un nivel de compresin aceptable, que permite generar documentos extensos de unos cuantos Kb. FLASH PAPER Es una aplicacin de la empresa Adobe, que genera documentos portables, de manera similar al formato PDF, pero con la ventaja de mostrar los archivos directamente en el navegador cuando no requieren bajarse a la PC. Es sumamente eficiente, ya que su descarga es paulatina, por lo que no se requiere bajar todo el contenido del documento para poderlo ver.

RTF Adicionalmente al uso de tecnologa PDF o Flash Paper (o ambas), se recomienda utilizar un formato de texto simple, para poder contar con una opcin que sea accesible para la mayora de los visitantes al Sitio. El RTF o formato de texto enriquecido, permite mantener el estilo de un documento sin requerir una aplicacin o software especfico para abrirlo. Dicho formato puede visualizarse directamente desde el navegador o utilizando una aplicacin de texto simple.

5mb 1mb

Cuando un documento es demasiado pesado (mayor a 5 Mb) recomendamos que se divida por secciones o captulos en archivos individuales y con un peso menor ( 1 Mb o menos por archivo). Recordemos que un 27% de la Poblacin utiliza conexiones dial-up para accesar a Internet; en la medida en la que nuestros recursos tengan un peso adecuado para todo el espectro de usuarios, nuestros Sitios sern ms xitosos y visitados.

11
Uso de Plantillas para Organismos descentralizados y Empresas de Participacin Estatal
Existen 3 plantillas para los Organismos Descentralizados y Empresas de Participacin Estatal que trabajan de igual forma que las destinadas a las Secretaras de Estado y Procuradura General de la Repblica, aunque con algunas diferencias en su construccin, con la finalidad de facilitar el manejo de la Imagen Institucional y no afectar en el posicionamiento dirigido a su Sector. Las diferencias bsicas consisten en la ubicacin del logotipo del Organismo o Empresa Paraestatal. Se ha colocado un espacio con fondo blanco dentro de las platillas en la esquina superior izquierda, para facilitar la inclusin de logos, de cualquier tamao, forma y color. Adicionalmente, en la esquina superior del lado derecho, deber colocarse el logo de la Cabeza de Sector a la que pertenece dicho Organismo o Empresa, como se ve en la aplicacin vertical que se detalla en el Manual de Identidad. En caso de no contar con Cabeza de Sector deber respetarse la posicin del Escudo Nacional y se continuar la barra de herramientas sustituyendo las siglas y el cuadro de color.

Contacto
Director General

Andrs Gmez Herrera

andres.gomez@sip.gob.mx Director de Investigacin, Estrategia y Vinculacin

Luis Antonio Delgado Barraza

luis.delgado@sip.gob.mx Director de Arte y Diseo

Miguel ngel Chvez Contreras

miguelangel.chavez@sip.gob.mx Subdirectora de Contenido e Informacin

Monserrat Barrera Tapia

monserrat.barrera@sip.gob.mx

Sistema Internet de la Presidencia

Descarga las plantillas y otros materiales del sitio www.sip.gob.mx. Solicita tu clave de acceso a la direccin de correo imagen@sip.gob.mx o comuncate al (55) 2789 1500. Telfono: 2789 1500 ext. 3469 imagen@sip.gob.mx www.sip.gob.mx

www.presidencia.gob.mx