| Date post: | 29-May-2018 |
| Category: |
Documents |
| Upload: | manuel-l-quezon-iii |
| View: | 222 times |
| Download: | 0 times |
of 20
8/9/2019 Internet Design Standards Federal Mexican Government
1/20
Manual de Imagenpara Sitios de Internet
del Gobierno Federal
8/9/2019 Internet Design Standards Federal Mexican Government
2/20
Algunos Derechos Reservados.
Sistema Internet de la Presidencia.
Mxico, 2007.
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.
8/9/2019 Internet Design Standards Federal Mexican Government
3/20
8/9/2019 Internet Design Standards Federal Mexican Government
4/20
8/9/2019 Internet Design Standards Federal Mexican Government
5/20
ndice
Elementos fijos pg. 1
pg. 6
pg. 8
pg. 11
pg. 8
pg. 8
pg. 8
pg. 3
pg. 5Uso de Color y Tipografa
Introduccin
Zonas de Contenido
(pgina principal)
Encabezado o Header
Men Principal
Pie o Footer
Nveles de Navegacin
Men Principal
Sub-Mens
Breadcrumb
Ejemplo Navegacin
Uso de Flash
Formatos de Audio y Video
Formatos de Texto
Zona Central o Principal
Zona Secundaria
Zona Flexibles
Zona de Banners
Banners y su Interaccin con
los Mens Secundarios
Manejo de Mens Secundarios
Zonas de Contenido
Manejo de Documentos
y Formatos Relacionados
Uso de Micrositios
Intranets y Sistemas
de Gestin Internos
Uso de Plantillas para Organismosdescentralizados y Empresas deParticipacin Estatal
8/9/2019 Internet Design Standards Federal Mexican Government
6/20
8/9/2019 Internet Design Standards Federal Mexican Government
7/20
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 plantillasWeb, 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 medioelectrnico tan importante como lo es Internet.
Introduccin
8/9/2019 Internet Design Standards Federal Mexican Government
8/20
8/9/2019 Internet Design Standards Federal Mexican Government
9/20
2
Como su nombre lo indica, el Men Pricnipal, es el de mayor jerarquapara los SitiosWeb del Gobierno Federal. Se compone de los temas centrales
de cada Secretara, por lo que debe hacerse un esfuerzo especial en laeleccin y organizacin de los contenidos de este men. Se recomiendaque no exceda de diez elementos y que se agrupen los contenidos deforma lgica y til, pensando en todo momento en satisfacer lasnecesidades de los ciudadanos que visiten el Sitio.
Se coloca del lado izquierdo de la pgina en las variaciones de color quele fueron asignadas a la Dependencia, en algunos casos podr serutilizado en escala de grises. La decisin para la opcin de color partede lograr un buen contraste visual entre fondo y texto.
Las opciones del Men debern escribirse en altas (maysculas) parafavorecer la lectura y darle la importancia que el men requiere. Losttulos deben ser cortos y describir de forma concreta el contenido deesa seccin.
Construimos Sitios para el Ciudadano, esa es la prioridad, por tal motivose debe evitar el uso de ttulos tcnicos que confundan al Ciudadanopromedio.
Men Principal
Ubicado en la parte inferior del SitioWeb, contiene la direccin fsicade la Dependencia, telfonos, direccin electrnica de contacto y
polticas de privacidad.
Pie o Footer
8/9/2019 Internet Design Standards Federal Mexican Government
10/20
3
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:
Zonas de Contenido (pgina principal)
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.
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.
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.
8/9/2019 Internet Design Standards Federal Mexican Government
11/20
Zona de Banners Los Banners y su Interaccin con
los mens secundarios
Conocemos como Banner a un elemento visualmente
atrayente, colocado generalmente en las pginas de inicio
de los SitiosWeb, 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 SitioWeb 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 comuni-
cacin 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 estoselementos: 4 5 Banners para uso de la Entidad.
Para las Cabezas de Sector existen dos Banners de uso
obligatorio: www.presidencia.gob.mxy www.gob.mx.
Los dems espacios se utilizarn segn la Dependencia crea
conveniente.
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.
4
8/9/2019 Internet Design Standards Federal Mexican Government
12/20
5
Uso de Color
El uso del color est definido en el Manual de
Identidad Institucional del Gobierno Federal, queentreg la Presidencia de la Repblica a cadaDependencia.
La Imagen Institucional ofrece coloresslidos, as como sus variaciones en porcen-tajes de tonalidades del color principal paralas distintas zonas que componen las plantillas.Se recomienda apoyarse con tonos grises paracombinar. Queda prohibido cualquier tipo de
sombra, difuminados y uso de curvas en eldiseo ya que estos recursos rompen con losobjetivos de la imagen.
Tipografa
Ttulos
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 quesean imgenes.
75%90%
50% 30%
Fuente: VerdanaTamao: 14 pxEstilo: BoldColor: institucional o un porcentajedel mismo, cuidando la legibilidad.
Subttulos
Fuente: VerdanaTamao: 12 px
Estilo: BoldColor: institucional o un porcentajedel mismo, cuidando la legibilidad
Contenidos
Fuente: VerdanaTamao: 11 pxEstilo: NormalColor: #666666
8/9/2019 Internet Design Standards Federal Mexican Government
13/20
6
Niveles de Navegacin
Men principal
Se encuentra abajo de la firma de la Depen-
dencia en la parte izquierda de nuestro Sitio,
no cambia durante la navegacin.
Submen
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.
Existen tres zonas que nos ayudan a conservar estos Nveles de Navegacin
Breadcrumb
Otro elemento importante para la navegacin,
por niveles simples, es el Breadcrumb que se
encuentra justo encima de nuestros conteni-
dos en las pginas internas y funciona como
un minimapa que indica al usuario en que
parte del Portal se encuentra ubicado.
Uno de los aspectos ms importantes en la homologacin de los SitiosWeb es la navegacin. Las ventajas que obtenemos al contar con una navegacin comny 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 SitiosWeb
de Gobierno.
La navegacin en base a niveles simples funciona muy bien para Portales con gran cantidad de informacin como los del Gobierno Federal.
8/9/2019 Internet Design Standards Federal Mexican Government
14/20
7
1 2 3
Supongamos que queremos conocer los datos de algn Funcionario Pblico. Tendramos que dirigirnos a la seccin de Directorio dentro del submen Quines Somospara poder hacerlo debemos escalar tres niveles: Quines Somos - Directorio - Funcionario.
Ejemplo de la Navegacin por Niveles Simples
S e l e c c i o n a m o s l a O p c i n
QuinesSomos (Men Principal)
Al entrar a la seccin, el Men Princi-pal, encabezado y footer quedarn enla misma posicin y con los mismoscontenidos, la opcin del menseleccionado se mostrar en otrocolor.
Del lado derecho, se habilitar elsubmen correspondiente a dichaseccin, con las opciones especficas
de Quines Somos: Historia,Estructura y Directorio.
Es importante sealar, que es indispensable, que todos los SitiosWeb de la APF cuenten con esquemas de navegacin idnticos para evitar confundir al usuario y lograr unahomologacin total, por tal motivo cualquier otro tipo de navegacin, como los mens desplegables, queda prohibido dentro de los Sitios de Gobierno.
Si se opta por la seccin de Directorio, sta quedar habilitada y semostrarn en el submen las opciones especficas de dicha seccin, quepodran ser: las reas de la Dependencia, el listado de Funcionarios o
cualquier forma de organizacin de contenidos que se haya elegido.
8/9/2019 Internet Design Standards Federal Mexican Government
15/20
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 descripcindetallada 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.
Manejo de Documentos y Formatos Relacionados
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 SitioWeb Principal.
Intranetsy Sistemas de Gestin InternosPara 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.
Uso de Flash
Las plantillas para SitiosWeb 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 ygifanimados
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 limitadoa secciones y audiencias especficas del Sitio.
8/9/2019 Internet Design Standards Federal Mexican Government
16/20
Estadsticamente se sabe que en Mxico el 96% de los visitantes utilizanMicrosoft Windows como sistema
operativo para navegar en Internet y queMicrosoft 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 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.
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, elMP3 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.
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 informacinser vista por el mayor nmero de personas.
Existen diversos elementos que deben considerarse almomento de elegir un formato de audio o video para serincluido en un SitioWeb del Gobierno Federal.
Entre los principales destacan:
Formatos de Audio y Video
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.
9
8/9/2019 Internet Design Standards Federal Mexican Government
17/20
1mb
5mb
Generalmente en los SitiosWeb Gubernamentales se requiere contar con documentos adicionales o material de apoyo que reafirme o proporcione mayor informacin sobreuna 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 elnavegador 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 documentopara poderlo ver.
RTF
Adicionalmente al uso de tecnologa PDFo Flash Paper (o ambas), se recomienda utilizar un formato de texto simple, para poder contar con una opcin que sea accesible parala mayora de los visitantes al Sitio. El RTFo formato de texto enriquecido, permite mantener el estilo de un documento sin requerir una aplicacin o software especfico paraabrirlo. Dicho formato puede visualizarse directamente desde el navegador o utilizando una aplicacin de texto simple.
Cuando un documento es demasiado pesado (mayor a 5 Mb) recomendamos que se divida por secciones o captulos en archivosindividuales y con un pesomenor ( 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 nuestrosrecursos tengan un peso adecuado para todo el espectro de usuarios, nuestros Sitios sern ms xitosos y visitados.
Formatos de Texto
10
8/9/2019 Internet Design Standards Federal Mexican Government
18/20
Uso de Plantillas para Organismos descentralizados y Empresas de Participacin Estatal
Existen 3 plantillas para los Organismos Descentralizados y Empresas de Participacin Estatalque 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 afectaren 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 elManual 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.
11
8/9/2019 Internet Design Standards Federal Mexican Government
19/20
Descarga las plantillas y otros materiales del sitio www.sip.gob.mx.
Solicita tu clave de acceso a la direccin de correo [email protected] comuncate al (55) 2789 1500.
Telfono: 2789 1500 ext. [email protected]
www.sip.gob.mx
Director General
Andrs Gmez Herrera
Director de Investigacin, Estrategia y Vinculacin
Luis Antonio Delgado [email protected]
Director de Arte y Diseo
Miguel ngel Chvez [email protected]
Subdirectora de Contenido e InformacinMonserrat Barrera [email protected]
Sistema Internet de la Presidencia
Contacto
8/9/2019 Internet Design Standards Federal Mexican Government
20/20
www.presidencia.gob.mx
