manual de estilo entidades sitios web gubernamentales

Transcripción

MANUAL DE ESTILO
PARA USO DE
EN LAS
SITIOS WEB
ENTIDADES
GUBERNAMENTALES
MANUAL DE ESTILO
PARA USO DE
EN LAS
SITIOS WEB
ENTIDADES
GUBERNAMENTALES
Manual de estilo
Indice
1. Presentación
2. Propósitos de este manual
3. Usos de los sitios web
4. Dinámicas de los sitios web
5. Generación de sitios web
6. Elementos generales
7. Página de inicio
8. Páginas internas 9. La Institución 10. Transparencia 11. Programas / Servicios 12. Comunicamos
13. Biblioteca
14. ¡Participa!
15. Contacto
16. Búsqueda
17. Mapa de sitio
18. Glosario 19. Créditos 7
8
9
11
12
16
30
39
40
48
50
56
68
69
71
72
74
76
77
Manual de estilo
Presentación
1. Presentación
Los sitios web son un elemento fundamental para la
interacción con los ciudadanos, quienes buscan a través
de estos sistemas, un involucramiento con el sector público
y con los servicios que prestan sus distintas instituciones.
Este documento es preparado para apoyar la labor de todas
las entidades gubernamentales, que buscan generar una
cercanía con el ciudadano usuario de nuevas tecnologías.
El Manual de Estilo para Manejo de Sitios Web en las
Entidades Gubernamentales, es una guía sencilla que
resuelve las necesidades de quienes operan estos medios,
encaminados a incentivar la participación del ciudadano
en las actividades que realiza la institución y sus autoridades.
Este manual se aplica a los recursos tecnológicos que
lo van a soportar, conteniendo las formas de proceder en las
diversas publicaciones.
7
Manual de estilo
Propósitos de este manual
2. Propósitos de este manual
La utilización de sitios web tiene como propósito generar
un relacionamiento entre el Estado y el ciudadano, con el
fin de incentivar la participación y la interacción entre ellos.
Se busca una cercanía entre ambos actores, para que el Estado
pueda escuchar al ciudadano y a la vez éste pueda intervenir
activamente en la gestión que realizan sus autoridades.
El Manual de Estilo busca proporcionar una herramienta que
permita unificar los criterios para el uso de sitios web de todas
las instituciones del Estado, con el fin de que se conviertan
en un efectivo puente de comunicación entre el gobierno
y los ciudadanos.
8
Manual de estilo
Usos de los sitios web
3. Usos de los sitios web
El posicionamiento que ha logrado el uso de Internet a nivel
mundial, invita a que el producto mostrado por las entidades
gubernamentales sea de óptima calidad, con el propósito de
presentar a un gobierno moderno y ordenado en su identidad
informática.
El contenido que abarcan los sitios web de las instituciones
públicas, permanece disponible las 24 horas del día
y a escala global para cualquier usuario. El servicio público
puede establecer un contacto con el ciudadano sin necesidad
de obligarlo a acudir físicamente a determinado lugar o tener
a un funcionario atendiendo en un despacho o en una línea
telefónica. La información, noticias, documentos, programas
y servicios de cada entidad, pueden ser obtenidas a cualquier
hora y desde cualquier lugar.
La universalidad del uso de sitios web, además, nos brinda
la oportunidad de presentar al Gobierno Nacional a nivel
internacional, estrechando los lazos de comunicación
institucional con usuarios del exterior.
3.1 Fortalecimiento de imagen
Un formato homologado en diseño y actualizado en contenidos
de los sitios web gubernamentales, presenta un nivel
de administración pública estandarizada y progresista,
lo que transmite confianza en su identidad visual. La oferta
de programas y servicios puede ser detallada con amplitud.
3.2 Simplificación de trámites
Los sitios web de las entidades gubernamentales simplifican
la ejecución de todo tipo de trámites ante la disponibilidad
permanente de la información, con el propósito de hacer
más eficiente, rápido y sencillo el servicio público. Se genera
un significativo ahorro de tiempo al momento de evitar filas
y turnos en la relación entre el ciudadano con el Gobierno. Los
usuarios pueden familiarizarse con los contenidos expuestos
en los sitios web y en el caso de requerir un servicio presencial,
podrán acudir con insumos previamente analizados que le
servirán como de hoja de ruta en lo que requiera su gestión.
9
Manual de estilo
Usos de los sitios web
3.3 Cero papeles
La ejecución de trámites y la búsqueda de información
a través de los sitios web, permite un ahorro de material
impreso que no sólo se contabiliza en recursos económicos
sino principalmente ecológicos. Especificaciones de productos,
catálogos, guías didácticas, formularios y demás insumos,
podrán ser visualizadas en el computador. Los documentos
no serán físicos sino virtuales, generando otro ahorro en
enseres de oficina.
10
Manual de estilo
Dinámicas
de los sitios web
4. Dinámicas de los sitios web
• Los sitios web de las entidades gubernamentales
permiten difundir contenidos lúdicos, gráficos, animados
y atractivos para la visualización y navegación. El formato
de hipertexto orienta de una dirección a otra, haciendo
más entretenida y funcional la experiencia del usuario.
• Al conocer cuáles son los contenidos más requeridos
por los ciudadanos, los administradores del sitio web
institucional podrán ampliar el volumen informativo
y facilitar el acceso a las búsquedas.
• La información es de acceso público, lo que permitirá
que los ciudadanos puedan descargar, copiar y pegar
los contenidos. Esta herramienta puede ser útil para
consultas e investigaciones.
• El uso frecuente de los sitios web gubernamentales,
deberá propiciar una familiaridad entre el usuario y las
nuevas tecnologías, incentivándole a dinamizar en la
navegación y hacer más habitual el contacto entre el
ciudadano y el Gobierno por estos canales comunicativos.
• Al ser sitios web de concurrencia periódica, sus
contenidos deben ser actualizados de forma constante,
evitando la permanencia de informaciones anacrónicas.
11
Manual de estilo
Generación de sitios web
5. Generación de sitios web
La Presidencia de la República, a través de la Secretaría
Nacional de la Administración Pública (SNAP), coordina
el proceso de modernización, mejoramiento y optimización
de los sitios web de las entidades gubernamentales,
garantizando los estándares de contenido y de imagen.
La Presidencia de la República entregará a cada uno de los
Ministerios y Entidades Gubernamentales, los sitios web
preestablecidos, para homologar una plantilla de diagramación
única. Ninguna institución podrá modificar la página web
o crear una nueva sin la autorización de la SNAP.
5.1 Consideraciones generales
• Los sitios web gubernamentales durante momentos de
crisis1 o eventos en vivo, deberán publicar en su página web
en la sección de banner rotativo una alerta de crisis o un
enlace para live stream que direccione a la información de
la situación que se está viviendo. Durante esta etapa dicho
banner (default) deberá ser el único que se presente en la
página web gubernamental, deshabilitando los restantes.
Ejemplo: alerta de tsunami, problemas del medio ambiente,
enlace ciudadano, cadenas en vivo, etcétera.
• Ninguna institución gubernamental podrá tener activados
los pop ups en sus sitios web.
5.2 Normas generales de uso ortográfico
5.2.1 Uso de mayúsculas en los sitios web
• Todas las mayúsculas siempre se tildan. Ejemplos:
Árbitro, Íbamos, Ávido, REVOLUCIÓN, LÁPIZ, REGIÓN.
1 Definidas por el Ministerio de Coordinación de Seguridad, a través del Plan Nacional
de Seguridad Integral.
12
Manual de estilo
• El nombre completo de la entidad gubernamental.
Ejemplos:
Presidencia de la República; Ministerio de Agricultura, Ganadería,
Acuacultura y Pesca.
• Los movimientos o partidos políticos, las asambleas,
los congresos o cumbres usan mayúscula si integran una
denominación oficial. Ejemplos:
Partido Liberal, Asamblea Nacional del Ecuador, Cumbre del
ALBA.
• Los meses de fechas históricas. Ejemplos:
10 de Agosto de 1809, 24 de Mayo de 1822, 6 de Diciembre de 1534.
• Las cuatro regiones del país: Costa, Sierra, Oriente, Insular.
• El nombre de la dignidad se escribe con mayúscula,
pero no su cargo. Ejemplos:
presidente Rafael Correa, papa Juan Pablo II, premio nobel
Gabriel García Márquez.
• Las siglas de organismos internacionales se escriben
con mayúscula y sin punto entre las letras. Ejemplos:
ALBA, OEA, ONU, FIFA.
13
Manual de estilo
5.2.2 Uso de paréntesis y comillas
• Los signos de puntuación deben escribirse siempre
fuera del paréntesis. Ejemplo:
El 15 de Enero de 2006, Michelle Bachelet ganó las elecciones en
Chile (enfrentando en segunda vuelta a Sebastián Piñera), y con
el 53,50% de la preferencia electoral, se convirtió en la primera
mujer electa presidenta en la historia del país (frente al 46,50%
alcanzado por Piñera).
• Toda cita textual deberá ir entre comillas tipográficas
(“ ”), y de necesitar abrirlas nuevamente dentro de la cita,
use comillas sencillas (‘ ’).
5.2.3 Números
• Todos los números que componen fechas, deben
escribirse sin espacios. Ejemplo:
El 24 de junio de 2009, Ecuador formalizó su inclusión a la ALBA.
• En cantidades, se diferencia la utilización de punto,
comilla y coma. Ejemplo:
--
Decimales se identifican con coma: Según datos de la CEPAL,
en las últimas dos décadas la tasa
de pobreza en América Latina se redujo de 48,4%
a 31,4% de la población.
--
Millares se identifican con punto: El Estadio Reina
del Cisne de Loja tiene un aforo de 14.594 aficionados.
--
Millones se identifican con comilla: En Ecuador existen
14’483.499 habitantes, según el último censo desarrollado
en el 2010.
14
Manual de estilo
5.2.4 Moneda
Cuando necesite referirse a cantidades en dólares, utilice la
referencia del país de origen (US) antes del signo “$”. Ejemplo:
El presupuesto en salud pública aprobado por la Asamblea
Nacional para el 2012 fue de US $891.4 millones.
5.2.5 Idiomas oficiales
Conforme al Art. 2 de la Constitución, “el kichwa y el shuar son
idiomas oficiales de relación intercultural”, por lo que la aplicación
del Manual, regirá en sus usos lingüísticos particulares.
15
Manual de estilo
Elementos generales
6. Elementos generales
6.1 Cabecera – Header
La cabecera de los sitios web gubernamentales contienen
la logomarca “Ecuador ama la vida” al lado izquierdo
y la logomarca de cada institución al lado derecho.
482 px
303 px
280 px
90 px
Proporción según el logo de cada entidad
16
Manual de estilo
Elementos generales
6.2 Tipografía
La tipografía que se emplea en los sitios web gubernamentales
es: Familia Tipográfica Helvetica. El estilo de letra que se utilizará
por defecto en los contenidos es Helvetica Regular, caso
contrario se especificará el estilo de letra para los elementos
que así lo requieran.
6.3 Color
La gama de colores de los sitios web gubernamentales es:
Rojo
df5f84
R: 223 G: 95
Rojo
e21350 R: 226 G: 19
Familia Tipográfica Helvetica.
B: 132
B: 80
Azul
0f6cb6 R: 15
G: 108 B: 182
Violeta
192b7a R: 25
G: 43
B: 122
Violeta
1d1060 R: 29
G: 16
B: 96
Gris
303030 R: 48
G: 48
B: 48
Gris
646464 R: 100 G: 100 B: 100
Gris
898989 R: 136 G: 136 B: 136
17
Manual de estilo
Elementos generales
Gris
989898 R: 152 G: 152 B: 152
Gris
b0b0b0 R: 176 G: 176 B: 176
Gris
acabab R: 172 G: 171 B: 171
Gris
b5b5b5 R: 181 G: 181 B: 181
Gris
c4c2c2 R: 196 G: 194 B: 194
Gris
dadada R: 218 G: 218 B: 218
Gris
eae6e6 R: 234 G: 1230 B: 230
Gris
f4f4f4
R: 244 G: 244 B: 244
Gris
f9f9f9
R: 249 G: 249 B: 249
Negro
000000 R: 0
G: 0
B: 0
Blanco
ffffff
R: 255 G: 255 B: 255
18
Manual de estilo
Elementos generales
6.4 Menú
El Menú de los sitios web gubernamentales contiene ocho
categorías en las que se distribuye toda la información. Estas
categorías son:
• Inicio: Es la página de inicio del sitio web.
• Institución: Incluye la siguiente información institucional:
valores, misión, visión, objetivos, ejes estratégicos,
estructura, autoridades, directorio, entidades adscritas,
webmail e intranet. El nombre de este elemento del menú
cambiará según la institución a la que pertenezca la
página web. Ejemplo:
“La Presidencia”, “La Vicepresidencia”, “La Secretaría”,
“El Ministerio”, “La Institución”.
• Transparencia: Esta pestaña incluye la información que la
Ley Orgánica de Transparencia y Acceso a la Información
Pública - LOTAIP, exige sea de acceso público.
• Programas / Servicios: Esta categoría agrupa
la información de todos los programas, servicios,
proyectos, planes, etc., que ejecuta la entidad.
• Comunicamos: Esta pestaña incluye las noticias,
eventos, boletines de prensa, vídeo, audio y fotos
de las entidades gubernamentales.
• Biblioteca: La categoría incluye un listado de
documentos descargables: publicaciones, decretos,
oficios, libros, material pop, presentaciones, etcétera.
• ¡Participa!: Esta etiqueta incluye un formulario para
promover la participación ciudadana, mediante el cual
el ciudadano interactúa con la institución. El formulario
permite registrar opiniones, sugerencias, preguntas
o denuncias a manera de un blog.
• Contacto: Formulario de contacto a través del cual
el ciudadano puede enviar mensajes a la institución.
19
Manual de estilo
Elementos generales
• Dimensiones: 960 X 34 pixeles.
• Color web: 0f6cb6
• Color web de letra: ffffff
Menú
6.5 Submenú desplegable
El submenú desplegable de los sitios web gubernamentales
contiene la información de todas las categorías agrupadas
en no más de cinco familias.
• Dimensiones: El listado de textos posee un margen
de respeto de 20 pixeles por lado.
• Color web de fondo: 1d1060
• Opacidad: 70 %
• Tamaño de letra: 14 puntos.
Submenú desplegable
20
Manual de estilo
Elementos generales
6.6 Título de página
• Dimensiones: 913 X 40 pixeles
• Color web de fondo: df5f84
• Tamaño de letra: 18 puntos
• Estilo de letra: negrita
Título de página
6.7 Black menú
El black menú es un listado completo de los hipervínculos
existentes dentro de las categorías de los sitios web.
Siempre debe ser usado en: La Institución, Comunicamos
y eventualmente en Programas/Servicios. Su función
es permitir una navegación más sencilla para el usuario
y tener acceso directo a cualquier otro sitio dentro de la categoría.
• Color web de fondo: 898989
• Tamaño de letra: 12 puntos (títulos) – 11 puntos (contenido)
• Estilo de letra: negrita (títulos) – regular (contenido)
Black menú
21
Manual de estilo
Elementos generales
El modelo de black menú para La Institución, debe contener
los siguientes elementos básicos. Según el caso y necesidad
de cada institución, se pueden añadir más niveles de
información en el black menú superior.
• Valores
-- Valores / Misión / Visión
-- Objetivos
-- Ejes Estratégicos
• Estructura
-- Organigrama de la institución
-- Autoridades
-- Ministro
-- Hoja de Vida
-- Directorio
-- Entidades Adscritas
• Webmail
• Intranet
Black menú para “Institución”
El modelo de Comunicamos para noticias y eventos, permite
localizar los datos a través de un filtro de temporalidad.
--
Hoy
--
Mes anterior
--
2009
--
Días anteriores
--
2011
--
2008
--
Este mes
--
2010
--
2007
22
Manual de estilo
Elementos generales
Black menú para “Noticias”
En el caso de que la información sea muy extensa, se ubicarán
módulos de navegación alineados en la esquina inferior
derecha, para saltar de un menú a otro sin cambiar de página.
• Color web de módulos de navegación: ffffff (inactivo) 9c9896 (activo)
Black menú con módulos de navegación
6.8 Título de black menú
El black menú posee un título similar al de la página y se ubica
sobre la caja. En el caso de que el título del menú sea el mismo,
se colocará únicamente el de la página sobre el black menú.
• Color web de fondo: 303030
23
Manual de estilo
Elementos generales
Título de black menú
6.9 Título de contenido
Los colores se ubicarán de modo alternado. Se permite el uso
de un número máximo de 50 caracteres para la caja pequeña,
y un número máximo de 100 caracteres para caja grande.
• Dimensiones caja pequeña: 434 X 40 pixeles
(caja de texto) - 426 X 4 pixeles (subrayado)
• Dimensiones caja grande: 860 X 40 pixeles
• Colores web de fondo: 0f6cb6 / 192b7a
Título de contenido - caja pequeña
Título de contenido - caja grande
24
Manual de estilo
Elementos generales
6.10 Scroll bar
Para la barra de scroll se deberá considerar:
• Dimensiones: 9 pixeles X (largo ajustable al espacio)
• Color web: 898989 (fondo) - b5b5b5 (figura)
Scroll bar
6.11 Barra de acceso a más información
Para la barra de acceso a más información se deberá considerar:
• Dimensiones: (ancho ajustable al espacio) X 17 pixeles
• Color web de fondo: adacac
• Color web de letra: 000000
Barra de acceso a más información
6.12 Botón de expansión de información
Para el botón de expansión de información se deberá considerar:
• Color web: adacac (fondo) - 000000 (+)
Botón de expansión de información
25
Manual de estilo
Elementos generales
6.13 Explorador de documentos
El explorador puede ser incluido en el área de contenidos de
cualquier página interna, en la que sea necesario adjuntar
archivos descargables.
• Etiqueta Contenedora de 1er Nivel
-- Dimensiones: 861 X 52 pixeles
-- Color web de fondo 1: 989898
-- Color web de fondo 2: b0b0b0
-- Tamaño de letra: 14 puntos
-- Color web de letra: 00000
• Etiqueta Contenedora de 2do Nivel
-- Color web de fondo 1: eae6e6
-- Color web de fondo 2: f9f9f9
-- Color web letra: 00000
Explorador de documentos
26
Manual de estilo
Elementos generales
6.14 Módulo de accesibilidad
Este módulo está presente en todas las páginas de los sitios
web gubernamentales, con el objetivo de que los ciudadanos
puedan cambiar el tamaño de letra para la lectura y seleccionar
el idioma (español, kichwa , shuar, inglés y chino).
Módulo de accesibilidad
6.15 Pie – Footer
6.15.1 Estructura
El pie de las páginas web institucionales se estructura de la
siguiente manera:
• Se encabeza con el logotipo de Presidencia, centrado
con una barra horizontal a cada lado.
Logotipo Presidencia
27
Manual de estilo
Elementos generales
• Lista de todos los links a los sitios web gubernamentales.
Links a los sitios web gubernamentales
Al final del pie, en una franja horizontal, se incluirá:
• Logo de la institución.
• Marca País “Ecuador ama la vida”.
• Un bloque de texto con la dirección, ubicación geográfica
y un número telefónico de la institución. También se
incluirán dos links con el contacto y mapa de sitio.
Pie
28
Manual de estilo
Elementos generales
6.15.2 Especificaciones
• Dimensiones logomarca Presidencia: 192 X 152
pixeles
• Dimensiones logomarca Institución: 160 X 50 pixeles
(proporción según el caso)
• Dimensiones logomarca “Ecuador ama la vida”:
243 X 65 pixeles
• Dimensiones barras laterales: 329 X 1 pixeles
• Dimensiones bloque de los links institucionales:
960 X 265 pixeles
• Dimensiones bloque pie: 960 X 92 pixeles
• Dimensiones módulo completo: 960 X 352 pixeles
• Color web barras de laterales: 646464
• Color web de links instituciones: dadada
• Color web de pie: f4f4f4
• Tamaño de letra títulos: 14 puntos
• Tamaño de letra contenidos: 11 puntos
29
Manual de estilo
Página de inicio
7. Página de inicio
7.1 Plantilla de diagramación
Los sitios web de las entidades gubernamentales contarán
con una plantilla de diagramación estandarizada, que tiene
como objetivo homologar la información que se presenta
a la ciudadanía.
El diseño que se muestra como ejemplo es el de la Secretaría
Nacional de la Administración Pública (SNAP). Si bien
el formato estandariza la información, también se acopla
a las particularidades que cada institución posee.
Formato estándar de plantilla de diagramación
30
Manual de estilo
Página de inicio
• Dimensiones de la página: 1313 X 1645 pixeles
Accesibilidad
Header
Menú
Banner Rotativo
Contenido
Footer
Plantilla de diagramación - SNAP
7.2 Estructura web
La página de inicio está organizada por sectores, los cuales
contienen módulos específicos para los diferentes contenidos.
A continuación se lista la estructura de la página de inicio,
agrupada en categorías y sub-categorías:
31
Manual de estilo
Página de inicio
• Cabecera - Header
-- Logomarca “Ecuador ama la vida”
-- Logomarca Institucional
• Menú (ocho categorías)
-- Inicio
-- Institución
-- Transparencia
-- Programas / Servicios
-- Comunicamos
-- Biblioteca
-- ¡Participa!
-- Contacto
• Banner Rotativo
-- Slider
-- Frase
• Contenido
-- Noticias Tu Gobierno
-- Título / Buscador
-- Redes Sociales
-- Vídeo
-- Foto
-- Banner Presidencia
-- Publicidad
-- Módulo Institución
-- Publicidad
-- Noticias
-- Programas / Servicios
• Pie - Footer
-- Logomarca Presidencia
-- Links Instituciones
-- Logomarca Institución
-- Logomarca “Ecuador ama la vida”
-- Bloque de texto: dirección, locación, teléfono, contacto (link),
mapa de sitio (link)
• Módulo de Accesibilidad
-- Fuente
-- Idioma
32
Manual de estilo
Página de inicio
7.3 Cabecera - Header
Para el elemento cabecera, aplica el descrito en el apartado
de Elementos generales (apartado 6.1).
7.4 Menú
Para el elemento menú, aplica el descrito en el apartado de
Elementos generales (apartado 6.4).
7.5 Banner Rotativo
7.5.1 Slider
El Slider superior es el módulo principal en los sitios web
gubernamentales, por la información que se destaca y por
su tamaño. Una imagen llamativa será utilizada como la
identidad primaria, así los usuarios sabrán dónde están
navegando y se generará el acceso directo a los sitios web.
• Resolución mínima: 72 dpi
Slider
33
Manual de estilo
Página de inicio
7.5.2 Frase
Esta será una frase específica, que se podrá modificar
según lo decida la administración de cada sitio web. Cada
frase debe tener relación con la imagen y expresar el sentido
institucional, bajo ningún concepto se deberá hacer alusión
al evento al cual pertenece la fotografía. Ejemplo:
--
Marcha del día del trabajo
--
Marcha del día de la mujer
--
Feria del libro de Quito
• Dimensiones : 960 X 40 pixeles
• Color web de fondo: e21350
• Número máximo de caracteres: 135
• Tamaño de letra: 14 puntos.
Frase
7.6Contenido
El contenido de los sitios web gubernamentales consta
de tres módulos principales. El módulo correspondiente
a la Secretaría Nacional de Comunicación - SECOM, al de
la Secretaría Nacional de la Administración Pública – SNAP,
y el correspondiente a los contenidos de la institución.
• Color web fondo: dadada
34
Manual de estilo
Página de inicio
Contenido
7.6.1 Noticias Tu Gobierno
Está presente en todos los sitios web gubernamentales.
Es el canal de comunicación oficial. Su título es “Tu Gobierno”.
En él se encuentra un canal de vídeo y una fotografía
destacada, links a todas las redes sociales del Gobierno Central
y un buscador.
• Color web de fondo: c2c2c2
Noticias Tu Gobierno
35
Manual de estilo
Página de inicio
Los elementos que componen el móduloNoticias Tu Gobierno
son:
• Título / Buscador
-- Dimensiones de título: 108 X 23 pixeles
-- Dimensiones línea de título: 135 X 1 pixeles
-- Color web de título y línea de título: 192b7a
-- Dimensiones de buscador: 132 X 17 pixeles
• Redes sociales
En la barra de redes sociales se muestran ocho iconos/links:
Twitter, Facebook, YouTube, Flickr, Google Plus, Vimeo,
SoundCloud, Webmail y RSS.
-- Dimensiones: 20 X 20 pixeles (cada icono)
• Vídeo
-- Dimensiones de módulo: 220 X 236 pixeles
-- Dimensiones de vídeo: 210 X 171 pixeles
-- Color web de fondo: dadada
-- Número máximo de caracteres: 120
• Foto
-- Dimensiones de foto: 210 X 171 pixeles
7.6.2 Banner Presidencia
Es uno de los dos módulos publicitarios que contiene
el home page.
• Color web de fondo: afadad
• Resolución mínima: 72 dpi
36
Manual de estilo
Página de inicio
Banner Presidencia
7.6.3 Módulo Institución
Es específico para la información de cada institución. Consta
de un banner publicitario, un sub-módulo para noticias
destacadas y un módulo para listar programas y servicios.
• Color web de fondo: dadada
Módulo Institución
Los elementos que componen el Módulo Institución son:
• Publicidad
-- Resolución mínima: 72 dpi
• Noticias
El título del módulo noticias es “Noticias Institución”, donde la
palabra Institución será reemplazada por el nombre específico
de la actividad principal del ministerio o secretaría. Ejemplo:
• Noticias Administración Pública
37
Manual de estilo
Página de inicio
En este módulo se presentan dos noticias destacadas
acompañadas de una fotografía.
-- Dimensionesde título: 240 X 23 pixeles
-- Dimensiones de línea de título: 270 X 1 pixeles
-- Color web de título y línea de título: 192b7a
-- Tamaño de letra título: 14 puntos
-- Dimensiones de imagen noticia: 202 X 131 pixeles
-- Resolución mínima de imagen noticia: 72 dpi
-- Dimensiones de caja de texto noticia: 273 X 129 pixeles
-- Dimensiones de link noticia completa: 20 X 20 pixeles
-- Dimensiones de link todas las noticias: 486 X 17 pixeles
-- Tamaño de letra link todas las noticias: 14 puntos
-- Color web de links: adacac
El formato de texto de cada noticia es:
-- Tamaño de letra de título: 14 puntos
-- Estilo de letra de título: negrita
-- Fecha de publicación: 11 puntos
-- Formato de fecha: Ciudad, dd mm aaaa.
-- Tamaño de letra de texto: 11 puntos
-- Botón de expansión de información.
• Programas / Servicios
Contiene una imagen con título para programas y una
para servicios. Además se listan los links para ir a los
programas o servicios específicos.
-- Dimensiones de título Programas: 191 X 23 pixeles
-- Dimensiones de título Servicios: 214 X 23 pixeles
-- Color web de títulos: 192b7a
-- Tamaño de letra de títulos: 14 puntos
-- Dimensiones de imágenes: 191 X 157 pixeles
-- Resolución mínima de imágenes: 72 dpi
-- Dimensiones caja de texto lista: 377 X 145 pixeles
-- Tamaño de letra lista: 12 puntos
38
Manual de estilo
Páginas internas
8. Páginas internas
Se manejan dos tamaños de sitios web internos, los
mismos que son designados a partir de la cantidad y el
tipo de información para cada caso específico.
600 px
900 px
39
Manual de estilo
La Institución
9. La Institución
Esta sección define el tipo de entidad a la que corresponde
el sitio web, sea Secretaría, Ministerio Coordinador
o Ministerio en línea.
• Portada
Al ingresar a La Institución, siempre tendremos una imagen
representativa de la entidad como portada de la sección con
una dimensión de 914 x 632 pixeles. Se contienen cuatro
niveles básicos de información que especifican la estructura
de cada entidad. Todos los niveles de información manejan
la misma diagramación y diseño de contenido.
900 pixeles para contenido
9.1 Valores
Es el primer link de visualización de los cuatro que despliega
La Institución. Dentro de Valores se contiene la filosofía
institucional presentada en tres dimensiones: Valores, Misión
y Visión; Objetivos y Ejes estratégicos.
Las tres dimensiones manejan la misma interface
de diagramación:
40
Manual de estilo
La Institución
900 pixeles para contenido
• Título de Contenido
-- Color web de fondo: df5784
-- Color web de letra: ffffff
-- Estilo de letra: negrita
Título de contenido
41
Manual de estilo
La Institución
• Imagen
-- Dimensiones : 313 X 219 pixeles
Imagen / encabezado y pie de foto
• Encabezado y pie de foto
El pie de foto, según el caso, puede tener 2 o 3 líneas de
texto, alineando el último renglón a la imagen.
-- Encabezado
-- Estilo de letra: cursiva
-- Pie de Foto
-- Estilo de letra: cursiva
• Texto
No existe límite de caracteres en el texto informativo,
gracias al scroll bar del módulo.
-- Tamaño de letra título y subtítulo: 12 puntos
-- Estilo de letra de título y subtítulo: negrita
-- Tamaño de letra contenido: 11 puntos
42
Manual de estilo
La Institución
• Publicidad
Texto
Cuenta con tres módulos publicitarios según la necesidad
de la entidad.
-- Publicidad doble
Publicidad doble
43
Manual de estilo
La Institución
-- Publicidad triple
Publicidad triple
-- Publicidad Mixta
-- Dimensiones de recuadro horizontal: 315 x 206 pixeles
-- Dimensiones de recuadro vertical: 315 x 413 pixeles
Publicidad mixta
44
Manual de estilo
La Institución
9.2 Estructura
• Organigrama
Es la representación gráfica de la estructura de la entidad.
Para el contenido se deberá considerar:
-- Tipo de letra: Calibri
-- Tamaño de letra: 17,85 puntos
-- Color web de fondo recuadro principal: 0f6cb6
-- Color web de fondo recuadro secundario: ffffff
-- Ángulo de recuadro redondeado: 0,5 cm
• Visor
Es
la
vista
que
se
genera
al
agrandar
la imagen. Todas las imágenes que se agranden
al hacer clic sobre ellas, se abrirán en la misma ventana
con un efecto de visualización.
-- Color web de fondo: 000000
-- Opacidad de fondo: 80%
-- Color web de margen: dadada
-- Espacio de margen: 30 pixeles
• Directorio
Este menú es
de archivos PDF.
un
enlace
a
un
visualizador
• Entidades adscritas
Módulo que detalla la información pertinente a las entidades
anexas a la institución.
-- Tamaño de letra: 12 puntos.
-- Dimensiones logo de la entidad adscrita: 53 pixeles ancho
45
Manual de estilo
La Institución
Visualizador
900 pixeles para contenido- Entidades adscritas
46
Manual de estilo
La Institución
9.3 Webmail
El enlace direcciona al usuario a un servicio de correo interno.
9.4 Intranet
Se trata del módulo que contiene un listado de los sistemas
de información interna de la entidad gubernamental, con
acceso restringido.
• Color web de letra de sitio web o sistema: 00000
• Tamaño de letra de sitio web o sistema: 12 puntos
• Dimensiones del logo del sitio web o sistema:
150 X 50 pixeles
900 pixeles para contenido- Intranet
47
Manual de estilo
Transparencia
10. Transparencia
Esta pestaña incluye la información que la Ley Orgánica
de Transparencia y Acceso a la Información Pública (LOTAIP)
exige sea de dominio público. El módulo se presenta como
un listado con subniveles de información, que permiten la
descarga o visualización de archivos. Los archivos se encuentran
organizados en tres niveles; en cada uno de ellos, el usuario
tiene la opción de ver o descargar la información contenida.
600 pixeles para contenido - Transparencia
• Etiqueta Contenedora de 2do Nivel
48
Manual de estilo
Transparencia
• Botones
-- Tamaño de letra botón ver: 10 puntos
-- Tamaño de letra botón descarga: 10 puntos
-- Dimensión de icono: 15 x 17 pixeles
Etiqueta contenedora de 1er nivel
Etiqueta contenedora de 2do nivel
Etiqueta contenedora de 3er nivel
49
Manual de estilo
Programas / Servicios
11. Programas / Servicios
La portada de la sección Programas / Servicios muestra
un contenido a manera de resumen de cada programa que
maneja la institución. Esta información está diagramada en
forma de tarjetas que contienen un titular, un área de texto,
una columna y una imagen.
La tarjeta nos direcciona hacia la página interna donde
se desarrollan los contenidos y/o sub-categorías de cada
programa, ubicándose una a continuación de otra, alternando
la ubicación de texto e imagen.
900 pixeles para contenido - Programas / Servicios
• Tarjetas
La información que se incluye en las tarjetas, varía
de acuerdo a la forma en cómo la institución tiene
categorizados sus programas y servicios.
En las tarjetas se presentará la información introductoria
de un Programa Macro, para luego desarrollar las
subcategorías en la página interna. Existen programas
que no contienen sub-categorías, en este caso se mostrará
la información específica de dicho programa, considerando
la cantidad de información que posea:
50
Manual de estilo
-- Información menor a 1200 caracteres:
La información se diagramará en una Tarjeta X que no direcciona
a páginas internas. El programa estará presente únicamente
en la portada.
-- Información entre 1200 y 2400 caracteres:
La información se diagramará en una Tarjeta XX que no direcciona
a páginas internas. El programa estará presente únicamente
en la portada.
-- Información superior a 2400 caracteres:
La información se diagramará en una Tarjeta X direccionando
hacia una página interna, en donde se desarrollará el resto
del contenido en una ficha.
-- Dimensiones de tarjeta X: 861 X 292 pixeles
-- Dimensiones de caja de texto tarjeta X: 405 X 200 pixeles
-- Dimensiones de imagen tarjeta X: 405 X 230 pixeles
-- Dimensiones de tarjeta XX: 861 X 521 pixeles
-- Dimensiones de caja de texto tarjeta XX: 405 X 400 pixeles
-- Dimensiones de imagen tarjeta XX: 405 X 460 pixeles
-- Resolución mínima de imágenes: 72 dpi
-- Tamaño de texto: 12 puntos
Tarjeta X
Tarjeta XX
51
Manual de estilo
• Portada - ficha
Está considerada para un solo programa o servicio,
el mismo que no posea subprogramas o links a portales
externos. En este caso, la portada muestra el contenido
completo del único programa que maneja la institución.
Esta información está diagramada en una ficha que
contiene un titular, un área de texto a una columna y una
imagen. El tamaño de la imagen es específico, mientras
que el texto puede exceder el área visible; para ese caso
se utilizará una barra de scroll que permite la navegación.
-- Número de caracteres: ilimitado
-- Dimensiones de caja de texto: 405 X 700 pixeles
-- Dimensiones de imagen: 405 X 700 pixeles
-- Resolución mínima de imagen: 72 dpi
-- Tamaño de texto: 12 puntos
Portada - ficha
52
Manual de estilo
• Interno síntesis
La página interna con síntesis, consta de un black menú en la
parte superior, a continuación se enlistan los subprogramas
valiéndose de Tarjetas X y XX, según el caso.
Interno síntesis
53
Manual de estilo
• Interno ficha
La página interna con ficha, consta de un black menú en
la parte superior, a continuación se desarrolla el contenido
de cada subprograma, valiéndose de fichas internas:
-- Dimensiones: 863 X 550
-- Número máximo de caracteres: ilimitado
-- Dimensiones caja de texto: 405 X 490 pixeles
-- Dimensiones imagen: 405 X 490 pixeles
Interno ficha
54
Manual de estilo
• Interno ficha mapa
Esta sección consta de un black menú en la parte superior, a
continuación se desarrolla el contenido de cada subprograma,
valiéndose de una ficha y mapa según el esquema:
-- Dimensiones: 863 X 550
-- Número máximo de caracteres: ilimitado
-- Dimensiones de caja de texto: 405 X 490 pixeles
-- Dimensiones del mapa: 405 X 490 pixeles
Interno ficha mapa
55
Manual de estilo
Comunicamos
12. Comunicamos
Está organizada en ocho secciones; dependiendo del
contenido del sitio web, algunas pueden ser excluidas. Radio
y video en vivo únicamente se listan en el submenú con un
link que redireccione a los sitios web en donde se alojan estos
servicios, no se incluirán en contenido. A continuación se lista
la estructura de la portada:
• Submenú
-- Noticias
-- Eventos
-- Boletín de Prensa
-- Vídeo
-- Audio
-- Fotos
-- Radio
-- Video en vivo
• Contenido
-- Noticias
Dos noticias actualizadas (imagen / título noticia y fecha).
-- Eventos
Dos eventos destacados (imagen / nombre evento).
-- Boletín de Prensa
Listado de cinco boletines de prensa en pdf.
-- Vídeo
Dos vídeos importados de YouTube.
-- Audio
Dos reproductores de audio.
-- Fotos
Dos fotos representativas (imagen / pie de foto).
56
Manual de estilo
Comunicamos
Comunicamos
57
Manual de estilo
Comunicamos
12.1 Noticias
Se organizan cronológicamente los títulos en un listado
de noticias Time-line que está conformado por submódulos,
dependiendo de la cantidad de noticias, existen dos modelos.
Listado de noticias Time-line
• Módulo 1 – 2: Consta el día y el título de la noticia
en 140 caracteres.
Módulo 1 - 2
58
Manual de estilo
Comunicamos
• Módulo 3 - 4: Consta el día, el título en 90 caracteres
y un máximo de hasta cuatro noticias, con una imagen
referente. Cada titular será un link direccionado a una
información ampliada de la noticia.
Módulo 3 - 4
• Noticias – caso especial: Existen casos aislados
en los que en un mismo día se publican más de cuatro
noticias, para los cuales se usa un modelo especial
de 900 pixeles. Se visualiza el día, el título en 110
caracteres y una imagen referente.
Caso especial
En el enlace “Clique para leer más noticias”, se visualizará
el listado de las noticias más recientes, donde aparece
la fecha completa (dd/mm/aaaa), un título de 145 caracteres
y cada titular es un link a una información ampliada.
Listado de noticias
59
Manual de estilo
Comunicamos
• Noticia específica
Se compone de lugar y fecha (día, mes y año). Se
especifica el título de la noticia en 125 caracteres, una
redacción ampliada de 1500 caracteres, la imagen
relacionada en la parte superior y una publicidad ubicada
a continuación de la foto de la noticia.
Noticia específica
60
Manual de estilo
Comunicamos
12.2 Eventos
Abarca el cronograma de actividades planificadas por la
entidad gubernamental.
• Caso uno: El contenido se diagrama en un listado de
eventos Time-line. Este listado se compone de los días
del cronograma, el título del evento en 65 caracteres,
la hora, el lugar y la descripción en 250 caracteres.
Listado de eventos - Time-line
En caso de que la descripción del evento sea más amplia,
se usará el modelo de evento específico.
61
Manual de estilo
Comunicamos
Evento específico
Descripción del evento
-- Nombre: 125 caracteres
-- Fecha: dd/mm/aaaa
-- Lugar: ciudad/locación
-- Hora: 00h00
-- Descripción: 1450 caracteres
-- Imagen: ubicada en la parte superior
-- Publicidad: ubicada a continuación de la foto
Descripción de evento
62
Manual de estilo
Comunicamos
• Caso 2: Este diseño es utilizado cuando los eventos están
divididos geográficamente por provincias o zonas, para lo
cual se combina un mapa y una time-line, en la que
se indica los eventos a realizarse cronológicamente.
Listado de noticias- caso dos
-- Día señalado
-- Nombre del evento en negrita: 65 caracteres
-- Hora: 00h00 – Lugar: locación
• Caso 3: Este diseño se utiliza cuando las entidades
gubernamentales tienen departamentos que se encargan
de organizar eventos continuos, sin fechas específicas.
63
Manual de estilo
Comunicamos
Listado de noticias- caso tres
-- Título del evento: 54 caracteres
-- Imagen: Representativa del evento
Descripción de evento
64
Manual de estilo
Comunicamos
12.3 Boletín de Prensa
Los boletines de prensa se colocan en lista ordenada
cronológicamente. Se presentan numerados y en formato PDF.
Boletín de prensa
• Listado de boletines
Esta sección consta de un listado de todos los boletines en
formato PDF, para que puedan ser desplegados o descargados.
-- Título de la sección: Enumerado por año:
-- Título boletín: 100 caracteres
-- Link ver: Visualizarlo en línea
-- Link descargar: Descargar en el equipo para transportarlo
Listado de boletines
65
Manual de estilo
Comunicamos
12.4 Vídeos
En este módulo se incluyen dos vídeos importados del canal
oficial de YouTube de la entidad.
Clique para ver todos los vídeos (el link dirige al canal de YouTube de la entidad).
Videos
12.5 Audios
En este módulo se incluyen dos reproductores de audio
enlazados a la cuenta oficial de SoundCloud de la entidad.
Clique para ver la lista de audios (el link dirige al canal de SoundCloud de la entidad).
Audios
66
Manual de estilo
Comunicamos
12.6 Fotos
En esta sección se incluyen dos fotografías. Cada módulo tiene
una imagen y un pie de foto compuesto de 130 caracteres.
Clique para ver todas los fotos (el link dirige a la página de Flickr de la entidad).
Fotos
67
Manual de estilo
Biblioteca
13. Biblioteca
Esta sección contiene un listado de diversos documentos
descargables, entre los que aparecen publicaciones,
decretos, oficios, libros, presentaciones, etc. La información
se encuentra numerada como guía de lectura para el usuario.
• Etiqueta contenedora:
• Botones
-- Botón ver: 10 puntos
-- Botón descarga: 10 puntos
-- Dimensión de icono: 15 x 17 pixeles
Biblioteca
68
Manual de estilo
¡Participa!
14. ¡Participa!
Es un espacio de participación, a través del cual el ciudadano
usuario del sitio web interactúa con la entidad gubernamental.
Este formulario permite registrar opiniones, sugerencias,
preguntas o denuncias.
• Texto introductorio: es el texto estandarizado que
presenta a la sección:
¡Participa! Es el espacio que promueve e incentiva el contacto
entre las entidades gubernamentales y los ciudadanos. El
propósito de esta sección es alcanzar un servicio público
cada vez más eficiente y comprometido con las reformas
que promueve el Gobierno Nacional.
Forma parte del cambio. Regístrate y déjanos saber tus
dudas, intereses y necesidades.
¡Participa!
69
Manual de estilo
¡Participa!
• Formulario
Son los campos que se visualizan para registrar la
información del ciudadano, antes de que pueda realizar su
opinión o consulta.
¡Participa!
• Espacio de interacción
Esta sección permite visualizar las preguntas y respuestas que
se originan en la interacción entre el ciudadano y la institución.
-- Color web de letra: Pregunta- Respuesta: 0f6cb6
-- Tamaño de letra fecha: 12 puntos
-- Estilo de letra fecha: cursiva
¡Participa!
70
Manual de estilo
Contacto
15. Contacto
Este formulario permite que el ciudadano haga un acercamiento
directo con la entidad a través de un mensaje personalizado.
Texto introductorio: es el texto estandarizado que presenta
a la sección.
¡Tú puedes ser parte del cambio! Llena tus datos y déjanos
saber tus dudas, comentarios y sugerencias. De inmediato
recibirás nuestra respuesta a tu solicitud.
Contacto
71
Manual de estilo
Búsqueda
16. Búsqueda
Es la función de consulta sobre cualquier requerimiento
que el ciudadano precise del sitio web institucional. Aparece
en la página de inicio y en las interiores.
Búsqueda
• Encabezado: enumera la cantidad
de resultados encontrados
Encabezado
-- Número de caracteres: 130
-- Color web de fondo: fffff
-- Color web de letra: 0f6cb6
72
Manual de estilo
Búsqueda
• Resultado
Se listan nueve resultados encontrados por cada página.
Cada resultado tiene un titular y un texto destacado.
Resultado
-- Número de caracteres del titular: 130
-- Color web de letra titular: 0f6cb6
-- Número de caracteres del texto destacado: 315
-- Color web de letra texto destacado: 000000
-- Color web de fondo: f2eeee
• Pie
Contiene un navegador con cinco páginas disponibles,
un botón para ir a páginas anteriores y otro para ir
a las siguientes.
Pie
-- Color web de letra textos activos: 000000
-- Color web de cuadros activos: ffffff
-- Color web de letra texto no activos: ffffff
-- Color web de cuadros no activos: 898989
-- Dimensiones de cuadros para número de página:
20 X 20 pixeles
-- Dimensiones de cuadros para textos navegación:
67 X 20 pixeles
73
Manual de estilo
Mapa de sitio
17. Mapa de sitio
Esta página está diseñada en base al modelo black menú.
Se ensambla a partir de la unión de un módulo para cada
categoría, el mismo que se distribuyen en:
• Solo título para los casos Inicio, Transparencia,
¡Participa! y Contacto
-- Estilo web de letra: negrita
Mapa de sitio
• Tres y cuatro columnas según
se requiera.
Mapa de sitio
Mapa de sitio
74
Manual de estilo
Mapa de sitio
-- Tamaño de letra: 14 puntos (títulos de categoría) 12 puntos (título de grupo) - 11 puntos (listado de contenido)
-- Estilo de letra: negrita (títulos) - regular (contenido)
75
Manual de estilo
Glosario
18. Glosario
• Banner: Espacio de contenido gráfico que permite hacer
pública una información resaltando un mensaje.
• Black menú: Cuadro donde se encuentra desplegado
un listado de enlaces, que orientan y facilitan la navegación
y el acceso a los contenidos del sitio web.
• Footer (pie): Área estática que se encuentra en la zona inferior
de un sitio web.
• Header (cabecera): Área estática que se encuentra en la zona
superior de un sitio web.
• Intranet: Red de sistemas de información privados, que
son utilizados internamente por lo funcionarios de una
organización.
• Link: Enlace de un sitio web que se encuentra vinculado con
nueva información. Direcciona al usuario a otra página.
• Logomarca: Elemento gráfico conformado por un nombre,
una imagen y la promesa, que representan la identidad
de una institución.
• Píxel: Elemento unitario más pequeño que forma a la imagen
digital. Su uso es para determinar la medida de una imagen.
• Scroll bar: Barra de desplazamiento horizontal o vertical, que
permite el movimiento dentro del cuadro de contenido
en un sitio web.
• Slider: Conjunto de imágenes que se intercalan
automáticamente cada determinado tiempo o a través de un
indicador, con la intención de resaltar el mensaje institucional
de cada sitio web.
• Time-line (línea de tiempo): Elemento que organiza
cronológicamente la información. Su orden se determina
en parámetros de año, mes y día.
• URLs: Dirección que permite acceder a un archivo, sitio
o recurso alojado en la web.
• Visualizador: Interface que despliega las imágenes
de una manera amigable y comunicativa, permitiendo navegar
entre varios gráficos que facilitan el mensaje a transmitirse
dentro del sitio web.
76
Manual de estilo
Créditos
19. Créditos
Presidencia de la República del Ecuador
García Moreno N10-43 entre Chile y Espejo
Quito – Ecuador
Telf.: (593-2) 3827000 / (593-2) 2584-000
http://www.presidencia.gob.ec
Derechos Reservados
Secretaría Nacional de la Administración Pública
Primera edición: Junio de 2012
77

manual de estilo entidades sitios web gubernamentales

Transcripción

Documentos relacionados

Tarifas Comerciales www.micasaya.gov.co v4

Manual redimensionar imagen

HOTEL CONQUISTADOR Guatemala

3.1 Si tu archivo pesa 1.5 GB o menos

dossier av451 h