MANUAL DE ESTILO MANEJO DE LÍNEA GRÁFICA SITIOS WEB DEL LOS GUBERNAMENTALES 3.0 GOBIERNO CENTRAL DEL

Transcripción

1 Y MANUAL DE ESTILO MANEJO DE LÍNEA GRÁFICA DEL LOS SITIOS WEB GUBERNAMENTALES 3.0 DEL GOBIERNO CENTRAL

2

3 Y MANUAL DE ESTILO MANEJO DE LÍNEA GRÁFICA DEL LOS SITIOS WEB GUBERNAMENTALES 3.0 DEL GOBIERNO CENTRAL

4

5 1. Presentación 7 2. Propósitos de este manual 8 3. Usos de los sitios web Fortalecimiento de imagen Menos papeles Dinámicas de los sitios web Generación de sitios web Elementos generales de las páginas web Cabecera Header Tipografía Color Menú Título de página Menú de páginas internas Título de contenidos (HOME) Scroll bar Explorador de documentos Accesibilidad Pie Footer Página de inicio Home Plantilla de diagramación Estructura Web Cabecera - Header Menú Frase de la foto del Header Contenido La Institución Estructura Intranet Webmail Transparencia Programas y Servicios Noticias Noticias Biblioteca Enlaces Enlaces Gubernamentales Contacto Búsqueda Accesibilidad Glosario Créditos 53

6 CMS 3.0 WordPress

7 Presentación 1. Presentación Los sitios web son una herramienta fundamental para las instituciones públicas; su correcto uso permite una mayor interacción con los ciudadanos al garantizar el acceso a información oficial y al agilitar la prestación de servicios en cada institución. El Manual de Estilo para Uso de Sitios Web 3.0 de las Entidades Adscritas al Gobierno, es una guía de consulta para quienes manejan estos medios logren una participación activa de la ciudadanía. A través de este manual se resuelven las principales inquietudes en cuanto a los recursos tecnológicos de soporte y a la forma correcta de proceder en las diversas publicaciones. 7

8 Propósitos de este manual 2. Propósitos de este manual En un Estado participativo, el manejo de la comunicación debe estar enfocado en la vinculación de la ciudadanía en los distintos procesos de gestión, planificación y prestación de servicios que se adelantan desde el Gobierno. En tal sentido, el manejo de los sitios web adscritos a las distintas organizaciones gubernamentales debe responder a la búsqueda constante de interacción entre la ciudadanía y el Estado. 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, sirviendo de guía para que quienes manejan cada sitio, logren servir de canal comunicativo entre el Gobierno y los ciudadanos. 8

9 Usos de los sitios web 3. Usos de los sitios web El acceso y el uso de internet en la sociedad ecuatoriana permiten que parte de la gestión del Estado pueda difundirse desde los distintos sitios web gubernamentales. Gracias a estas herramientas, la ciudadanía puede acceder a una gran cantidad de servicios públicos. La responsabilidad desde las distintas instituciones es brindar calidad y eficacia en la prestación de los mismos reflejando la capacidad organizativa del Estado al dar respuesta a las exigencias ciudadanas. El contenido de los sitios web permanece disponible las 24 horas del día y a escala global para cualquier usuario, permitiéndole el acceso a información, noticias, documentos, programas y servicios de cada entidad. De esta manera, el contacto ciudadano se establece sin necesidad de que el usuario acuda físicamente a determinado 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 La oferta de programas y servicios presentados a la ciudadanía a través de sitos web gubernamentales con un diseño unificado y actualizado, permite afianzar la una identidad visual que genera confianza en el ciudadano; además, la armonización de los sitios garantiza una idea de coordinación interinstitucional, que se corresponde con las estrategias, políticas y planes que son prioridad para el Gobierno. 3.2 Simplificación de trámites Los sitios web de las entidades gubernamentales constituyen espacios de participación ciudadana, que facilitan la labor de 9

10 Usos de los sitios web las entidades en cuanto a la prestación de servicios y permiten al usuario un significativo ahorro de tiempo al momento de evitar filas y turnos. Desde estos espacios es posible que los ciudadanos ejerzan un control social a la gestión gubernamental y que a su vez las instituciones amplíen su capacidad para mejorar la gestión pública. 3.3 Menos papeles La ejecución de trámites y la búsqueda de información a través de los sitios web, garantizan una reducción del tiempo en la prestación del servicio y un ahorro significativo de papel. Gracias a este recurso las instituciones gubernamentales pueden hacer un mejor uso de los recursos económicos y contribuir con la ecología. La generación de publicaciones digitales como especificaciones de productos, catálogos, guías didácticas, formularios y demás insumos, permiten un ahorro significativo de documentación, sin que esto signifique una pérdida de contacto ciudadano. 10

11 Dinámicas de los sitios web 3. Dinámicas de los sitios web Los sitios web de las entidades gubernamentales permiten difundir contenidos lúdicos, gráficos 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 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 extemporáneas. 11

12 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 las Gobernaciones e Instituciones Adscritas al Estado, 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 crisis 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, cadenas en vivo, etc. Ninguna institución gubernamental podrá tener activados los pop ups en sus sitios web. Definidas por el Ministerio de Coordinación de Seguridad, a través del Plan Nacional de Seguridad Integral. Ninguna institución gubernamental podrá tener activados los pop ups en sus sitios web. 5.2 Normas generales de uso ortográfico Uso de mayúsculas en los sitios web Todas las mayúsculas siempre se tildan. Ejemplos: Dirección, división, veintidós, PERÚ, SÁNCHEZ, PAÍS 12

13 Generación de sitios web El nombre completo de la entidad gubernamental. Ejemplos: Presidencia de la República del Ecuador; Ministerio Coordinador de Producción, Empleo y Competitividad Los movimientos o partidos políticos, las asambleas, los congresos o cumbres usan mayúscula si integran una denominación oficial. Ejemplos: Partido de los Trabajadores, Asamblea Nacional del Ecuador, Cumbre de las Américas Los meses de fechas históricas. Ejemplos: 10 de Agosto de 1809, 24 de Mayo de 1822, 6 de Diciembre de Las cuatro regiones del país: Costa, Sierra, Oriente, Insular. El nombre de la dignidad se escribe con ayúscula, pero no su cargo. Ejemplos: Presidente Rafael Correa, papa Francisco, premio nobel Mario Vargas Llosa Las siglas de organismos internacionales se escriben con mayúscula y sin punto entre las letras. Ejemplos: ALBA, ONU, OEA, MERCOSUR, FIFA. 13

14 Generación de sitios web Uso de paréntesis y comillas Los signos de puntuación deben escribirse siempre fuera del paréntesis. Ejemplo: Los servicios aportan cerca del 60% del Producto Interno Bruto (PIB) nacional, según cifras del Banco Central del Ecuador (BCE). Toda cita textual deberá ir entre comillas tipográficas ( ) y, de necesitar abrirlas nuevamente dentro de la cita, use comillas sencillas ( ) Números Todos los números que componen fechas, deben escribirse sin espacios. Ejemplo: El 10 de Agosto de 1809, se dio en Ecuador el Primer Grito de Independencia. En cantidades, se diferencia la utilización de punto, comilla y coma. Ejemplo: El Gobierno Nacional informó que Ecuador tiene la tasa de desempleo más baja de América Latina con 4,12%. Millares se identifican con punto. Ejemplo: El Estadio Olímpico Atahualpa tiene una capacidad de espectadores sentados. Millones se identifican con comilla. Ejemplo: La Superintendencia de Telecomunicaciones (Supertel), reportó un crecimiento de millones de usuarios estimados de internet hasta junio de

15 Generación de sitios web Moneda Cuando necesite referirse a cantidades en dólares, utilice la referencia del país de origen (US) antes del signo $. Ejemplo: Las exportaciones petroleras disminuyeron en $ 834,3 millones asociadas a la reducción del precio del crudo en el mercado internacional Idiomas oficiales Conforme al Art. 2 de la Constitución, el kichwa y el shuar con idiomas oficiales de relación intercultural, por lo que la aplicación del Manual, regirá en sus usos lingüísticos particulares Denominación de imágenes Las imágenes que se visualicen en los sitios webs estandarizados, deberán ajustarse al proceso de optimización de contenidos SEO (Search Engine Optimization). Este formato de denominación, permitirá que las imágenes sean de más fácil localización en los motores de búsqueda, por el uso estratégico de palabras claves. Las Palabras no deben poseer mayúsculas o caracteres especiales y deben estar separadas por guiones. Ejemplo: Banner: nombre_de_la_institucion_ecuador_descripcion_de_la_ imagen_ciudad_mes_ano presidencia_ecuador_presidente_rafael_correa_delgado_guayaquil_febrero_2013.png 15

16 Elementos generales de las páginas web 6. Elementos generales de las páginas web 6.1 Cabecera Header La cabecera de los sitios web gubernamentales tienen una imagen representativa de todo el país, sobre la imagen contiene la logomarca de cada institución al lado superior izquierdo en color blanco, el ícono de MENÚ, los íconos de redes sociales (Twitter, Facebook, You Tube, Flicker), el ícono de búsqueda y los íconos de accesibilidad, transparencia e idioma. 261 px 58 px 20 x 23 px 25 x 25 px 16

17 Elementos generales de las páginas web 6.2 Tipografía La tipografía que se emplea en las páginas web gubernamentales defecto en los contenidos del sitio web es Arial Regular, caso así lo requieran. ABCDEFGHIJKLMN OPQRSTUVWXYZË ƒëíabcdefghijklmn ($%.,!?) 6.3 Color La gama de colores de los sitios web gubernamentales es: Blanco: fondo ffffff R: 255 G: 255 B: R: 40 G: 40 B: 40 Celeste: Cromática utilizada en la botonera Programas/Servicios, lineas debajo del header en páginas internas, scroll, cuadros de texto en páginas internas 26506d R: 38 G: 80 B: 109 Azul: Cromática utilizada en botónes de slide de fotos principales cuando esta activado R: 39 G: 39 B:

18 Elementos generales de las páginas web Rojo: Cromática utilizada en botónes activos de banners centralizados y no centralizados E02727 R: 224 G: 39 B: 39 Gris: Cromática utilizada en botónes de Temas Importantes y demàs botoneras horizontales de despliegue de información F8F8F8 R: 248 G: 248 B: 248 Magenta: Cromática utilizada las líneas debajo del header en paginas internas E02C75 R: 224 G: 44 B: 117 Gris: Cromática utilizada en tipografía de menor jerarquía y botónes de slides de fotos y banners cuando estan desactivados. BEBEBE R: 190 G: 190 B:

19 Elementos generales de las páginas web 6.4 Menú El Menú de las páginas web gubernamentales contiene nueve categorías en las que se distribuye toda la información del sitio. Estas 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 Gobernación, 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. Indicadores: Programas / Servicios: Esta categoría agrupa la información de todos los programas, servicios, proyectos, planes, etc, que ejecuta la entidad. Existe un caso especial con el Ministerio de Educación, donde la información de Programas y Servicios ha sido organizada de manera personalizada. Noticias: Esta pestaña incluye las noticias, eventos, boletines de prensa, vídeo, audio y fotos de las entidades gubernamentales. 19

20 Elementos generales de las páginas web Biblioteca: La categoría incluye un listado de documentos descargables: publicaciones, decretos, oficios, libros, material pop, presentaciones, etc. Enlaces: Ruta de acceso a los sistemas públicos de mayor interés para el funcionario y el ciudadano. Enlaces Gubernamentales: Ruta de acceso a todos los sitios de gobierno. Contacto: Formulario de contacto a través del cual el ciudadano puede enviar mensajes a la institución. Dimensiones: 250 pixeles x (proporcional en y). Color web: Color web de letra: aaaaaa 20

21 Elementos generales de las páginas web 6.6 Título de página Dimensiones: 1220 X 44 pixeles Color web de fondo: fotografía Tamaño de letra: 16 puntos Estilo de letra: negrita Color web de letra: ffffff Número máximo de caracteres: Menú de páginas internas Algunas páginas incluyen un menú interno de los hipervínculos existentes dentro de las categorías de los sitios web. Siempre debe ser usado en las páginas de: La Institución y 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. Menú - Páginas internas Dimensiones de la etiqueta (1er nivel): 700 X 44 pixeles Dimensiones de la etiqueta (2do nivel) : 671 X 34 pixeles - Color web de fondo: f8f8f8 - Color web de de letra: 5A Color web de de letra (menú activado): 1fa0e4 - Tamaño de letra (1er nivel): 14 puntos - Tamaño de letra (2do nivel): 13 puntos - Número máximo de caracteres por menú: 90 21

22 Elementos generales de las páginas web 6.8 Título de contenidos (HOME) Para el título de contenido se deberá considerar que, si esta alienado hacia la izquienda, este debe tener una viñeta de 5 x 11px, si el contenido esta en posiciones centrales o alienados a la derecha no se coloca viñeta: Tamaño de letra: 12 puntos Estilo de letra: Regular Color web de letra: Scroll bar Para la barra de scroll se deberá considerar: Dimensiones: 5 pixeles X (largo ajustable al espacio) Color web: cccccc (fondo) - 019be2(figura) 22

23 Elementos generales de las páginas web 6.10 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. Para cada nivel el usuario tiene la opción de ver o descargar la información contenida. Los niveles pueden incrementarse n número de veces en caso de que sean necesario. Etiqueta Contenedora de 1er Nivel - Dimensiones: 842 X 42 pixeles - Tamaño de letra: 14 puntos Etiqueta Contenedora de 2do Nivel - Dimensiones: 827 X 42 pixeles - Tamaño de letra: 14 puntos Etiqueta Contenedora de 3er Nivel - Dimensiones: 812X 42 pixeles - Tamaño de letra: 14 puntos Etiqueta Contenedora de 4to Nivel - Dimensiones: 812 X 42 pixeles - Tamaño de letra: 14 puntos Aplica para toodos los niveles: - Color web letra (etiqueta desctivada): 66666B - Color web letra (etiqueta activa): 019BD8 - Color web de fondo: F8F8F8 23

24 Elementos generales de las páginas web 6.11 Accesibilidad Este link está presente en el footer de 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 según las instrucciones que se les da y según el navegador que usen Pie Footer Estructura El pie de las páginas web institucionales se estructura de la siguiente manera: Links de los servicios ciudadanos principales y accesibilidad. Ventanilla Única Virtual, Ventanilla Única de Comercio Exterior, Gobierno Abierto, Visor Ciudadano, Accesibilidad Inferior a la izquierda logomarca del Gobierno Nacional de la república del Ecuador Inferior a la derecha logomarca Ecuador ama la vida Centrado entre logomarcas, dirección de la entidad Como margen inferior de la página se usa una líena crómatica 24

25 Elementos generales de las páginas web Especificaciones Dimensiones logomarca del Gobierno Nacional de la república del Ecuador: 170 X 38 pixeles Dimensiones logomarca Ecuador ama la vida : 128 X 38 pixeles Dimensiones del módulo de los links: 40 pixeles en Y (ancho ajustable a la cantidad de caracteres) Color web de links: cccccc Tamaño de letra de los links: 13 pixeles Dimensiones módulo completo: 1208 X106 pixeles Color web de pie: 7B7B7B 25

26 Página de Inicio - Home 7. Página de inicio Home 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 Presidencia de la República. Si bien el formato estandariza la información, también se acopla a las particularidades que cada Institución posee. 26

27 Manual de estilo Página de Inicio - Home Dimensiones de la página: 1856 X 688 pixeles Header Contenido Footer 7.2 Estructura Web La página de inicio está organizada por sectores, los contenidos. A continuación se lista la estructura de la página de inicio, agrupada en categorías y sub-categorías: Cabecera - Header - Logomarca Institucional - Redes sociales (4 íconos) - Ícono de busqueda - Ícono de menú - Título de la página Menú desplegable (10 links) - Inicio - Institución - Transparencia - Programas / Servicios 27

28 Página de Inicio - Home - Comunicamos - Biblioteca - Enlaces - Enlaces Gubernamentales - Contacto - Íconos de redes sociales Contenido - Módulo Actual - Módulo Servicios - Módulo Temas Importantes - Módulo Banner de la Institución - Módulo Entérate - Módulo Tu Gobierno Informa Pie - Footer - Links Instituciones, accesibilidad - Logomarca del Gobierno Nacional de la república del Ecuador - Logomarca Ecuador ama la vida - Bloque de texto: dirección, locación, teléfono, 28

29 Página de Inicio - Home 7.3 Cabecera - Header Para el elemento Cabecera, aplica el ya descrito en el apartado de Elementos generales de las páginas web (apartado 6.1). 7.4 Menú Para el elemento Menú, aplica el ya descrito en el apartado de Elementos generales de las páginas web (apartado 6.4) Frase de la foto del Header Se cargarán de una base de fotos. Cada frase debe tener relación con la imagen, la frase nombra el lugar al cual pertenece la fotografía o explica el evento que se muestra, seguido por el signo de coma (,) y el nombre de la provincia. Solo en el caso de ser una foto centralizada que deba aparecer en todos los sitios web institucionales no se editara la información. Ejemplo: - Volcán Cotopaxi, Cotopaxi - Playa de los Faailes, Manabí - Catedral Ciudad de Cuenca, Azuay Dimensiones de la fotografía: 1856 X 186 pixeles Número máximo de caracteres: 80 Tamaño de letra: 12 puntos. Color web de letra: ffffff 29

30 Manual de estilo Página de Inicio - Home 7.6 Contenido El contenido de los sitios web gubernamentales consta de 6 módulos principales. 1. Módulo Actual, donde se muestran las y principales una descripción al píe de cada imagen. 2. Módulo Servicios, Contiene un listado automático de los programas y servicios de la institución. Estos nombres son 3. Módulo Temas Importantes, que muestra botones con los temas coyunturales de gobierno. 4. Módulo Banner de la Institución, espacio de publicidad para la institución. 5. Módulo Entérate, está presente en todos los sitios web encuentran dos espacios para ubicar fotografías. 6. Módulo Tu Gobierno Informa, está presente en todos los sitios web gubernamentales. Es el canal de comunicación 30

31 Manual de estilo Página de Inicio - Home Actual - Rotativo 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. Las imágenes del Banner Rotativo deben enlazarse a cualquier dirección que se encuentre dentro o fuera del sitio. Dimensiones de la foto: 800 X 370 pixeles Resolución mínima: 72 dpi Módulo Servicios Tamaño de letra: 10 puntos Dimensiones del botón: 77 X 77 pixeles Color web del botón: 26506d Dimensiones del módulo: 392 X 77 pixeles 31

32 Página de Inicio - Home Módulo Temas Importantes Tamaño de letra: 12 puntos Color web de la letra: Color web de la letra (botón activo): 428bca Dimensiones del boton: 275 X 27 pixeles Color web del botón: F8F8F8 Dimensiones del módulo: 275 X 175 pixeles Módulo Banner de la Institución Dimensiones de la imagen y del mòdulo: 520 X 330 px 32

33 Página de Inicio - Home Módulo Entérate Dimensiones de la imagen y módulo: 520 X 330 pixeles Módulo Tu Gobierno Informa Dimensiones de la imagen: 275 X 160 pixeles Dimensiones del módulo: 275 X 170 pixeles 33

34 La Institución 8. 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. La sección lista los siguientes contenidos: Planificación Estratégica - Valores / Misión / Visión - Objetivos Estructura Intranet Webmail - Ejes Estratégicos - Entidades Adscritas - Reseña Histórica - Organigrama de la institución - Autoridades - Gobernador - Jefe Político - Intendente - Directorio - Hoja de Vida Únicamente las categorías Planificación Estratégica y Estructura despliegan contenido en la página. Intranet y Webmail poseen enlaces externos. Los enlaces de Intranet dependen de los sistemas que maneje la institución. 34

35 La Institución Menú - La Institución 35

36 Página interna - Ejes Estratégicos (Modelo sin fotografía) 36

37 Manual de estilo La Institución Página interna - Objetivo (Modelo con fotografía) Imagen - Dimensiones: px o proporción 16:9 37

38 La Institución Título El título, según el caso, puede tener 1 o 2 líneas de texto, alineando a la izquierda en la parte superior. - Color web de letra: Número máximo de caracteres: 50 - Tamaño de letra: 25 puntos - Estilo de letra: bold Pie de foto El pie de foto, según el caso, puede tener 1 o 2 líneas de texto, alineando el último renglón a la imagen. - Color web de letra: Número máximo de caracteres: 80 - Tamaño de letra: 11 puntos - Estilo de letra: regular Extracto del contenido El extracto del contenido puede ser sacado de alguna parte del mismo contenido que tenga relevancia, puede ser una cita o puede ser la sístesis de lo que trata el contenido. Puede tener 1 o 2 líneas de texto. Texto - Color web de letra: Número máximo de caracteres: 80 - Tamaño de letra: 17 puntos - Estilo de letra: cursiva - Tipografía: Georgia No existe límite de caracteres en el texto informativo, el scroll de la página crece según la extensión del contenido. - Color web de letra:

39 La Institución - Tamaño de letra título y subtítulo: 13 puntos - Estilo de letra de título y subtítulo: negrita - Tamaño de letra contenido: 13 puntos 8.1 Estructura Organigrama Es la representación gráfica de la estructura de la entidad. Directorio Este menú es un enlace a un visualizador de archivos PDF externo. Entidades adscritas Módulo que detalla la información pertinente a las entidades anexas a la institución, listadas a doble columna. - Color web de letra: Tamaño de letra titulares: 16 puntos (Bold) - Tamaño de letra contenido: 16 puntos - Dimensiones logo de la entidad adscrita: proporcional. 8.2 Intranet Se trata del módulo que contiene un listado de links de los sistemas de información interna de la entidad gubernamental, con acceso restringido. 8.3 Webmail El enlace direcciona al usuario a un servicio de correo interno. NOTA: La estructura del manú puede modificarse según la necesidad de cada institución sin dejar de lado la linea de estilos y gráfica. 39

40 La Institución Organigrama Entidades Adscritas 40

41 Comunicamos Caso específico Existe la posibilidad de que la portada de Comunicamos necesite de una organización por categorías, en este caso se utilizará el siguiente esquema: Noticia página interna con foto (caso específico) Tamaño de letra fecha y hora: 12 puntos Color web letra fecha y hora: A8A8A8 Tamaño de letra titulares: 18 puntos Color web titulares: Tamaño de letra links (caso específico): 13 (cursiva) 41

42 Transparencia 9. 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. Transparencia 42

43 Programas y Servicios 10. Programas y 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 un menú que muestra un listado de todos los programas y servicios que maneja la institución. Cada categoría se despliega en la sección de contenido de la misma forma que en la sección La Institución. Portada Programas y Servicios Contenidos Programas y Servicios 43

44 Comunicamos 12. Noticias Está organizada en dos secciones;. Contenido - Noticias: se presentan de dos formas, las noticias destacadas con 4 fotografías de la noticia en el lado derecho, cuando el usuario ubica el cursor sobre la fotografía aparece el titular de la noticia. Además se presenta una lista de noticias en orden cronológico en el lado izquierdo, el cual esta conformado por la fecha de la noticia, la hora y el titulo de la misma. - Boletínes de Prensa: link que lleva a un listado de boletines de prensa en formato descargable pdf. Portada Noticias / Prensa 44

45 Manual de estilo Comunicamos 12.1 Noticias Se tiene dos modelos para presentar la noticia; con fotografía y sin fotografía, los dos modelos tienen en la parte derecha un módulo para compartir la noticia en redes sociales y por correo y también tenemos la opción de enviar a imprimir la noticia. En la parte superior izquierda del contenido tenemos un un breadcrumb (miga de pan), es un recurso informático que permite que el usuario conozca la ruta de su ubicación en directorios y subdirectorios, y navegue a través de ella. Noticia página interna con foto 45

46 Comunicamos Página interna sin foto 46

47 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: - Dimensiones: 847 X 42 pixeles - Dimensiones 2do nivel: 832 X 40 pixeles - Color web de fondo: F8F8F8 - Tamaño de letra: 14 puntos - Color web de letra: Color web de letra (link seleccionado): 52A2E3 - Dimensión de ícono pdf: 16 x 16 pixeles Biblioteca 47

48 Enlaces 14. Enlaces Sección destinada a los ciudadanos y funcionarios del servicio público, donde podrán ingresar de forma directa a los sistemas informáticos con los que se maneja el gobierno nacional en sus distintas áreas. Los links que se despliegan en el submenú Enlaces, redireccionan a páginas en donde se localizan los sistemas informáticos, que se enumeran a continuación: Compras Públicas - URL: Quipux Sistema de Gestión Documental - URL: Gobierno Por Resultados - URL: Portal de Trámites Ciudadanos - URL: Sistema de Solicitud de Viajes al Exterior

49 Enlaces 15. Enlaces Gubernamentales Sección destinada a los ciudadanos y funcionarios del servicio público, donde podrán ingresar de forma directa a los sitios web de las Instituciones gubernamentales. 49

50 Contacto 16. Contacto Este formulario permite que el ciudadano haga un acercamiento directo con la entidad a través de un mensaje personalizado. Existen dos posibilidades para la configuración del formulario: para una o para varias localidades de contacto. Texto introductorio: es el texto estandarizado que presenta a la sección. Llena tus datos y déjanos saber tus dudas, comentarios y sugerencias. De inmediato recibirás nuestra respuesta a tu solicitud. La Institución puede incluir el número de direcciones que sean necesarias. 50

51 Búsqueda 17. Búsqueda Es la función de consulta sobre cualquier requerimiento que el ciudadano precise del sitio web institucional. El campo de búsqueda aparece en la página de inicio, en las interiores y en el menú desplegable. Noticia página interna sin foto 51

52 Accesibilidad 18. Accesibilidad La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad. 52

53 Glosario 19. Glosario Banner: Espacio de contenido gráfico que permite hacer pública una información resaltando un mensaje. Breadcrumb (Miga de pan): Las migas de pan suelen aparecer de manera horizontal al principio de una página web. Pulsando sobre los enlaces que los forman el usuario puede volver a recorrer el camino que le ha llevado a la página en la que se encuentra. 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. Banner Rotativo: 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. URLs: Dirección que permite acceder a un archivo, sitio o recurso alojado en la web. 53

54 Créditos 20. Créditos Secretaría Nacional de la Administración Pública Av. 10 de Agosto OE1-14 y Ramírez Dávalos Código Postal: / Quito - Ecuador Teléfono: (593 2) Derechos Reservados Secretaría Nacional de la Administración Pública Edición: Octubre