MANUAL DE ESTANDARIZACIÓN DE IMAGEN Y APLICACIÓN GRÁFICA PARA SITIOS WEB ESTADO PLURINACIONAL DE BOLIVIA

Transcripción

1 MANUAL DE ESTANDARIZACIÓN DE IMAGEN Y APLICACIÓN GRÁFICA PARA SITIOS WEB ESTADO PLURINACIONAL DE BOLIVIA

2 Indroducción La Agencia para el Desarrollo de la Sociedad de la Información en Bolivia -ADSIB- ha desarrollado, junto al Ministerio de Transparencia y el Ministerio de Comunicación, la guía de estándares técnicos y de contenidos aplicable a sitios WEB del, con el objetivo de generar un proceso de estandarización y homogeneización de las mismas, mejorando la experiencia de navegación de los usuarios. El objetivo de estandarización y homogeneización de las páginas WEB del responde a dos objetivos primordiales: 1. Presentar una imagen articulada de las instituciones del Órgano Ejecutivo. 2. Satisfacer la necesidad primaria del usuario de Internet, el acceso a información. La presente guía establece los criterios generales de desarrollo de contenidos de las páginas WEB del Estado Plurinacional, así como el manejo gráico de las mismas.

3 Índice INTRODUCCIÓN Pág 2 ÍNDICE Pág 3 FORMA DE USO Pág 5 ESTRUCTURA Pág Estructura básica... Pág Diagramación y grilla... Pág Medidas Grilla... Pág Grilla de fondos de color... Pág 9 ESTRUCTURA ESTÁTICA Pág Cabecera Pág Construcción de la cabecera...pág Medidas de la cabecera...pág Construcción marca país...pág Construcción nombre de la institución...pág Construcción cuadro de diálogo buscador...pág Construcción botones de idioma...pág Enlace mapa web...pág Construcción botonera principal...pág 14 a) Botonera principal desplegada caso A...Pág 14 b) Botonera principal desplegada caso B...Pág Menú de rastro...pág Contenidos botonera principal...pág Botonera lateral Pág Construcción banner lateral...pág Medidas banner lateral...pág Construcción botonera de interés...pág Construcción botones de gobierno...pág Píe de página Pág Construcción píe de página...pág Construcción enlace políticas de uso...pág Construcción validación técnica...pág CRITERIOS GENERALES DE DIAGRAMACIÓN Pág a. Textos...Pág b. Tablas...Pág 24 c. Esquemas...Pág 24 d. Fotos y videos...pág 24 e. Botones de descargas...pág 25 f. Formularios...Pág 25 DIAGRAMACIÓN Y PÁGINAS MODELO Pág Inicio Pág Página modelo A...Pág 26 Diagramación...Pág Sobre la institución Pág Página modelo B, C...Pág 28 y 30 Diagramación...Pág 29 y Gestión Pág Página modelo D...Pág 32 Diagramación...Pág Transparencia Pág Página modelo E, F...Pág 34 y 35 Diagramación...Pág 36 y Marco legal Pág Página modelo G...Pág 38 Diagramación...Pág Prensa Pág Página modelo H...Pág 40 Diagramación...Pág Contacto Pág Página modelo I...Pág 42 Diagramación...Pág Instituciones dependientes Pág Repositorio de datos Pág Página modelo J...Pág 44 Diagramación...Pág Formulario de reclamos Pág Página modelo K...Pág 46 Diagramación...Pág Página mapa web Pág Página modelo L...Pág 48 Diagramación...Pág 49

4

5 05 Forma de Uso El manual es la guía que explica de manera gráica todas las partes que componen la estructura base para la construcción de sitios web del estado plurinacional de Bolivia. Para el buen uso Para el buen entendimiento del manual se recomienda leerlo detenidamente. Se encuentra ordenado de forma correlativa partiendo de la grilla de construcción hasta llegar a la descomposición del sitio web en su totalidad. Imágenes de apoyo Existe un archivo complementario al manual denominado elementos gráicos anexos. Este archivo contiene imágenes que ayudan al desarrollado de los sitios web. Todas las imágenes del sitio web se encuentran en formato.png a 72 px. de resolución. Las imágenes de apoyo están disponibles en el tamaño deinido en el manual. Estos tamaños varían segun la imagen.

6 Estructura básica La tecnología empleada para la estandarización de los sitios web del estado plurinacional de Bolivia es la de CSS o Hojas de Cascadas de Estilo, que se caracterizan por que la estructura se desarrolla en base a grillas dando la posibilidad de asignar un lugar especíico para cada elemento. La maqueta o tabla base de los sitios web del estado plurinacional de Bolivia se componen por cuatro grandes espacios: - La cabecera o head: Se ubica en la parte superior de la página y contiene los elementos de identiicación del sitio web. - Cuerpo o body: Se ubica en la parte central del sitio web; se caracteriza por cambiar de la distribución de elementos de acuerdo al volumen de información. - Banner lateral: Se ubica a la derecho de la estructura y contiene información relacionada con el Gobierno. - Pie de página: Es la parte inferior de la página y contiene la información técnica y de contacto referente a la institución. IMAGEN 1. * Aclaración: La cabecera, el banner lateral derecho y el pie de página se mantiene en esta disposición en todas las páginas, independientemente de su función, es espacio que varía según los contenidos es el cuerpo o body. MARCA PAÍS PARA WEB CABECERA CUERPO BANNER LATERAL IMAGEN 1 Estructura básica PIE DE PÁGINA

7 Diagramación y grilla Para poder responder a las diferentes necesidades los sitios web se deben diagramar de acuerdo al volumen de los contenidos. VER FIGURA 2. Cabecera: Contiene información que ayuda a identiicar a que institución pertenece el sitio web y los elementos que la componen son: Marca país, Nombre de la institución, botonera de idiomas, buscador, enlace a el mapa web y botonera principal. El cuerpo: Contiene un banner superior con las fotos representativas del rubro al que se dedica la institución. La igura 2 muestra la grilla base de los sitios web. Para las posibilidades de diagramación en cuatro columnas ver páginas Banner lateral derecho: Es un espacio destinado para una botonera secundaria denominada de interés e información del gobierno en general. Pie de página: Contiene la información técnica y de contacto con la institución. IMAGEN 2. Criterio de éxito (Nivel A). El sitio Web deberá mantener la estructura descrita en la IMAGEN 2. MARCA MARCA PAÍS PAÍS PARA PARA WEB WEB BANNER SUPERIOR BOTONERA PRINCIPAL BANNER CENTRAL BOTONERA LATERAL DE INTERÉS TEXTO COLUMNA 1 TEXTO COLUMNA 2 TEXTO COLUMNA 3 TEXTO COLUMNA 4 BOTONES DE GOBIERNO ESPACIO MARCA PAÍS WEB IMAGEN 2 Diagramación y estilo PIE DE PÁGINA

8 Grilla de tamaños Los pixeles son la unidad de medida estándar que se utiliza en el diseño de páginas web, en la imagen 3 se puede observar cada espacio con su medida respectiva. IMAGEN px 850 pxl 160 px MARCA PAÍS PARA WEB BANNER SUPERIOR BOTONERA PRINCIPAL 20 px 120 px 40 px 150 px BANNER CENTRAL 810 px 190 px 20 px 70 px 10 px 10 px 20 px 170 px 770 pxl A X px X px PIE DE PÁGINA 100 px IMAGEN 3 Grilla de medidas 1000 px

9 Uso de colores de fondo Los colores de fondo ayudan a organizar y a diferenciar los elementos que componen los sitios web. Para cumplir con el objetivo de estandarizar se utiliza la gama de grises, colores neutros por excelencia, ya que no se cuenta con el desarrollo de una Marca País, que determina la paleta de colores a utilizar. Gradiente Gris - Botonera principal y cabecera. Grises plenos: fondo web, Botonera lateral y pie de página. Blanco: Fondo. IMAGEN 4. Banner Superior Color de Fondo R: 230 G: 230 B: 230 Color web #E6E6E6 Gradiente 87% MARCA PAÍS PARA WEB R: 255 G: 255 B: 255 #FFFFFF BANNER SUPERIOR BOTONERA PRINCIPAL 13% Botonera Principal Color de Fondo R: 200 G: 200 B: 200 R: 255 G: 255 B: 255 Color web #C8C8C8 #FFFFFF Gradiente 50% 50% Botonera de Interés Color de Fondo Color web 185 pxl R: 241 G: 241 B: 241 #F2F2F2 A Fondo Color de Fondo Color web R: 255 G: 255 B: 255 #FFFFFF PIE DE PÁGINA IMAGEN 4 Color del explorador Color web Pie de Página Color de Fondo Color web Diagramación y estilo R: 240 G: 240 B: 240 #F0F0F0 R: 170 G: 170 B: 170 #AAAAAA

10 Estructura estática La estructura estática está compuesta por los elementos de la grilla que no cambian al presionar el cursor sobre un botón del sitio web. Los elementos marcados con gris oscuro pertenecen a la estructura estática. Cabecera. IMAGEN 5. Banner lateral. IMAGEN 5. Pie de página. IMAGEN 5. MARCA PAÍS PARA WEB CABECERA CUERPO BANNER LATERAL IMAGEN 5. Estructura estática PIE DE PÁGINA

11 Construcción Cabecera Se conforma por los elementos que ayudan a identiicar el sitio web (Marca país web, nombre de la institución), botoneras básicas de funcionamiento (idiomas, buscador, mapa web) y la botonera principal. IMAGEN 6. IMAGEN Medidas de la cabecera Para la construcción de la cabecera se realiza todas las medidas en pixeles. IMAGEN 7. IMAGEN Construcción marca país Es rectangular y mide 160 px X 150 px. IMAGEN px 160 px Foto provisional IMAGEN 6. Elementos de La Cabecera IMAGEN 7. Medidas de la cabecera IMAGEN 8. La marca país IMAGEN 8.

12 Construcción Nombre de la institución Se ubica en la parte superior de la cabecera y sirve para potenciar la identidad de la páginas web haciendo referencia a la institución como en la gráica Ministerio de Economía y Finanzas Públicas. IMAGEN Construcción cuadro de diálogo buscador IMAGEN 9. Es un cuadro de diálogo que busca mediante palabras claves temas de interés. IMAGEN 10. IMAGEN 9. Nombre de la institución IMAGEN 10. Botón idiomas IMAGEN 10.

13 Construcción botones de idioma Los botones para seleccionar el idioma en el que se desea navegar en la página se ubican en la parte superior derecha de la diagramación. La característica de estos botones es que tiene dos estados el normal (Color negro) y cuando está presionado (Color Rojo). IMAGEN 11. IMAGEN Enlace mapa web El enlace de mapa web se encuentra ubicado en la derecha de la cabecera sobre el cuadro de diálogo del buscador y es un enlace a un esquema de todos los enlaces de la página web. IMAGEN 12. IMAGEN 12. IMAGEN 11. Grilla de medidas IMAGEN 12. Grilla de medidas

14 Construcción Bonotera Principal La botonera principal se ubica en la parte inferior de la cabecera y tiene las siguientes características Ancho: 850 px Alto: 40 px IMAGEN 13. * Aclaración: La cantidad máxima de botones es de 9. Si excede el límite se debe colocar los botones exedentes en en la botonera de interés. IMAGEN 21. IMAGEN 13. a. Bonotera Principal Desplegada Caso A En el caso de la botonera principal cada botón se despliega mostrando un sub menú con enlaces secundarios. IMAGEN 14. La forma en la que se despliega es de arriba a abajo y manteniendo el ancho del botón. * Aclaración: En el caso que el menú con enlaces secundarios sea más ancho que el botón debe ir alineado a la izquierda del botón. IMAGEN 15. IMAGEN 13. Botonera principal IMAGEN 14. Botonera principal desplegada caso A IMAGEN 14.

15 015 b. Bonotera Principal Desplegada Caso B En el caso B de despliegue de la botonera principal se puede observar que el menú con enlaces secundarios. IMAGEN 15. IMAGEN Menú de rastro Deberá orientar al usuario sobre la ubicación de la página que se está visitando en el sitio Web. IMAGEN 16. IMAGEN 16. IMAGEN 15. Botonera principal desplegada caso B. IMAGEN 16. Menú de rastro.

16 Contenidos botonera principal Botón de inicio: Este botón tiene como función llevarnos a la página principal, en cualquier página interior que nos encontremos. Sobre la Institución: Los enlaces secundarios de este botón responden a información de carácter institucional: a) Misión y Visión de institución b) Función de la institución c) Estructura de la institución d) Organigrama de la institución e) Marco normativo que da la existencia a la institución f) Mensaje de la cabeza de institución (ministro, viceministro, director, etc.) g) Trayectoria de MAE (Curriculum) Botón gestión: Este botón nos lleva a un enlace secundario con información sobre los Resultados de Gestión de la institución. Estos resultados podrán ser presentados en orden cronológico, por área de desarrollo, por proyectos o programas dependientes de la institución o el criterio que se considere más adecuado para la institución. Botón transparencia: Este botón presenta enlaces secundarios con información establecida por el Ministerio de Transparencia Institucional y Lucha contra la Corrupción: a) Nómina del Personal (cargos y dependencia) b) Convocatorias de personal (términos de referencia y peril del cargo) c) Escalas salariales d) Plan Estratégico (Programado, ejecutado y resultados de gestión) e) POA (Programado, ejecutado y resultados de la gestión)

17 017 f) Presupuesto Institucional g) Fuentes de inanciamiento h) Balance de la gestión i) Nómina de proveedores j) Convocatorias de bienes y servicios k) Informes de viajes al exterior de la MAE l) Formularios y reglamentos vigentes m) Flujos de procesos (responsables y tiempos) Marco Legal: El o los enlaces secundarios de este botón son las leyes o decretos que establecen los objetivos, áreas de trabajo, alcances, responsabilidades y/o obligaciones de la institución, así como la compilación de normas generales, especiales, conexas y complementarias. Prensa: Los enlaces secundarios del botón son el repositorio de notas de prensa, coberturas y noticias referentes a la institución y relevantes al área sectorial de la institución. Contacto: Este botón nos lleva al enlace secundario con información de contacto con la institución, herramienta interactiva para preguntas, comentarios o quejas. Instituciones dependientes: Son Instituciones dependientes las que operan bajo el control o normativa de una institución mayor : (Ej. Viceministerios son dependientes de un Ministerio. Programas y Proyectos son dependientes de Viceministerios o Ministerios). Este botón nos lleva a los enlaces secundarios de estas instituciones dependientes. Repositorio de Datos: Enlace a base de datos de la institución. Las bases de datos pueden ser de documentos sobre las actividades de la institución, fotografías, mapas, documentos, banco de trabajos de investigación, información estadística, videos o cualquier información de acceso público de la institución.

18 Construcción Banner Lateral El banner lateral está conformado por: Botonera de interés: Son los botones adicionales que corresponden al sitio web dando información que no se la encuentra en la botonera principal. Botones del gobierno: Espacio destinado a contenidos de carácter político. Estos contenidos estarán normados y administrados por el Ministerio de Comunicación, con temáticas coyunturales o de interés particular del Estado Plurinacional. Espacio marca país: El espacio de la marca país se repite en todas las páginas y contiene información puntual sobre la marca país. IMAGEN 17. IMAGEN 17. Banner Lateral

19 Medidas del banner lateral Las medida son: el ancho 190 px y el alto responden al volumen de información con las siguientes limitaciones. Botonera de interés: La cantidad máxima de botones es de 8. Botones de gobierno: La cantidad máxima de botones es de 8. IMAGEN 18. IMAGEN 18. Banner lateral con medidas

20 Construcción del botonera lateral de interés Los botones de interés son estándares y miden: De ancho: 190 px De alto: 30 px IMAGEN 19. IMAGEN Construcción botones de gobierno Los botones del gobierno pueden ser implementados de dos formas: 1.- Modelo de botón base. Ancho: 190 px Alto: 20 px y 50px 2.- Imagen referencias de contenido. IMAGEN 20. Ancho: 190 px Alto: 50px 3.- Botones redes sociales IMAGEN 20. Ancho: 15 a 25 px Alto: 15 a 25 px IMAGEN 20. IMAGEN 19. Botonera de interés IMAGEN 20. Botones de gobierno

21 Construcción Pie de Página El pie de página contiene tres tipos de información: Información de la institución: información imprescindible de contacto. Validación: son links que sirven para realizar la validación técnica de la página web. La normativa de tamaño y color está en el cuadro. IMAGEN 21. Políticas de uso: Información legal del uso de la página web. IMAGEN Construcción de la información de la institución La información imprescindible del pie de página son: teléfonos, correo electrónico (*enlace de texto), dirección. La normativa de tamaño y color está en el cuadro. IMAGEN 22. IMAGEN 22. IMAGEN 21. Botonera de interés IMAGEN 22. Botones de gobierno

22 Construcción enlace políticas de uso Enlace de texto políticas de uso. IMAGEN 24. IMAGEN Construcción de la validación Validación en: - XHTML - CSS IMAGEN 25. IMAGEN 24. IMAGEN 23. Políticas de uso IMAGEN 24. Validación

23 Criterios generales de diagramación El título, los subtítulos y epígrafe o cuerpo de texto es lo que llamamos paratexto. Éste incluye todos los elementos que dan el formato inal a los contenidos de texto, otorgándole las características formales de un texto académico. Son todas las normas básicas de diagramación descripción se realiza a detalle normando: tipografía, tamaño, etc. a. TEXTOS Títulos Se denominan Títulos a la descripción del enlace secundario en el que navegamos o nos encontramos, Ej.: PÁGINA PRINCIPAL, SOBRE LA INSITUCIÓN, GESTIÓN, etc.) Tipografía: Arial (TODO EN ALTAS negrillas) Tamaño: 21 pts / 21 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Subtítulo A Grande Se utiliza el Subtítulo A Grande para los titulares tradicionales de secciones, noticias, información sectorial, presentación de leyes, programas, proyectos, logros de gestión o cualquier tipo de contenido que tenga un nombre o deinición de trabajo. Tipografía: Arial (TODO EN ALTAS negrillas) Tamaño: 16 pts / 16 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Subtítulo B pequeño Dentro de una sección que está presentada en un Subtítulo A Grande encontramos temas puntuales que se diferenciarán utilizando el Subtítulo B Pequeño. Tipografía: Arial (Altas y bajas negrillas) Tamaño: 14 pts / 14 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Epígrafe Se utiliza para el resumen de una noticia o cita textual de alguna intervención de una persona en particular. Tipografía: Arial (Altas y bajas negrillas) Tamaño: 14 pts / 14 px Color R: 102 G: 102 B: 102 Web: # Alineación de texto: Izquierda. Fechas A (Antes de ilete) Información sobre el día, mes y año que se emitió la noticia que estará en la página web, o fecha que se empezó o terminó la ejecución de algún resultado de gestión. Tipografía: Arial (normal) Tamaño: 14 pts / 14 px Color R: 204 G: 51 B: 0 Web: #CC3300 Fechas B Se encuentra debajo un título, Nota de prensa, artículo, etc. Tipografía: Arial (normal) Tamaño: 10 pts / 10 px Color R: 204 G: 51 B: 0 Web: #CC3300 Alineación de texto: Izquierda. Masa de texto Texto en general. Tipografía: Arial (normal) Interlineado: 13 pts Tamaño: 11 pts / 11 px

24 024 Color R: 102 G: 102 B: 102 Web: # Alineación de texto: Justiicado. Punteo dentro de la masa de texto Jerarquización conceptual, cronológica para el enunciado de varios conceptos. Tipografía: Arial (normal) Interlineado: 13 pts Tamaño: 11 pts / 11 px Color R: 102 G: 102 B: 102 Web: # Alineación de texto: comienza un guión intermedio y tres espacios más a la derecha del inicio del párrafo justiicado, alineado a la izquierda. Píe de foto, video Debe contener información sobre la fuente, lugar y fecha. Tipografía: Arial (normal) Tamaño: 9 pts / 9 px Color R: 102 G: 102 B: 102 Web: #CC3300 Alineación de texto: Derecha de la fotografía, video. Enlace de texto Se utiliza para acceder a enlaces con más información sobre la temática. Ver esquema. Tipografía: Arial (subrayada) Tamaño: 8 pts / 8 px Color R: 0 G: 0 B: 250 Web: #0000FF Alineación de texto: inmediatamente después del: texto, punto, etc. b. TABLAS Títulos tabla Tipografía: Arial (Altas y bajas negrillas) Tamaño: 12 pts / 12 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Texto Tablas Tipografía: Arial (normal) Tamaño: 11 pts / 11 px Color R: 102 G: 102 B: 102 Web: # Alineación de texto: Izquierda. c. ESQUEMAS Títulos Esquemas Tipografía: Arial (Altas negrillas) Tamaño: 12 pts / 12 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Centro. Texto del esquema Tipografía: Arial (normal) Tamaño: 10 pts / 10 px Color R: 102 G: 102 B: 102 Web: # Alineación de texto: Centro. d. FOTOS Y VIDEOS Modelo A (a 2 columnas) Tamaño: 350 px x X Alineación de texto: Alineado en 2 columnas. Modelo B (a 1 columnas) Tamaño: 170 px x X Alineación de texto: Alineado en 1 columnas.

25 025 e. BOTONES DE DESCARGAS Botón de descargas PDF, Word Tamaño: 30px x 30px Alineación de texto: Alineado en una columna. f. FORMULARIOS Títulos formulario Tipografía: Arial (Altas y bajas negrillas) Tamaño: 12 pts / 12 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Sub título Formulario Tipografía: Arial (TODO EN ALTAS negrillas) Tamaño: 16 pts / 16 px Color R: 51 G: 51 B: 51 Web: # Alineación de texto: Izquierda. Texto formulario Tipografía: Arial (Altas y bajas negrillas) Tamaño: 13 pts / 1 px Color R: 102 G: 102 B: 102 Web: # Alineación de texto: Izquierda. Texto espacio obligatorio Tipografía: Arial (normal) Tamaño: 9 pts / 9 px Color R: 102 G: 102 B: 102 Web: #CC3300 Alineación de texto: Derecha.

26 Inicio (Página modelo A) El página de Inicio es el primer impacto que recibe el usuario al entrar a cualquier página de Estado Plurinacional. Siendo que la INFORMACIÓN es el impulsor básico de navegación, el criterio básico de las páginas WEB del Estado Plurinacional estará centrado en la presentación de información. La sección está destinada a Información Sectorial, es decir, información relativa al área de trabajo de la institución, puede contener información sobre los objetivos de la institución, técnicas, tecnologías, experiencias internacionales, transferencia de tecnología, etc. Bajo el criterio de presentar información relevante, coyuntural y actual sobre el área de trabajo de la institución. Si existe más de una línea de información que se desee presentar en la página de inicio se debe utilizar el criterio de títulos y subtítulos de la presente guía. IMAGEN 25. MARCA PAŒS PARA WEB MINISTERIO Economa y Finanzas Pblicas INICIO SOBRE LA INSTITUCIN GESTIN TRANSPARENCIA MARCO LEGAL PRENSA CONTACTO AYMARA CASTELLANO VICEMINISTERIO QUECHUA mapa del sitio fsfgfghhjjj INGLES REPOSITORIO DE DATOS INICIO/ DE INTERS Portal MEFP Poltica tributaria Tesoro y Crdito pblico Pensiones y Servicios PROYECTOS INICIO LOREM IPSUM REDES SOCIALES LOREM IPSUM Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te usu noster tacimates reprimique, inani recusabo adolescens per ex. Homero assueverit quo ut, te falli error altera eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te usu noster tacimates reprimique, inani recusabo adolescens per ex. Homero assueverit quo ut, te falli error altera eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. 12/04/11 12/04/11 12/04/11 12/04/11 12/04/11 12/04/11 12/04/11 Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. isque. LŒNEA GRATUITA MENSAJE DEL PRESIDENTE GOBIERNO ELECTRNICO MARCA PAŒS PARA WEB Telfono: (591-2) Fax: (591-2) Correo Electrnico: ministro_web@economiayfinanzas.gob.bo Direccin : Edificio Palacio de Comunicaciones Piso 19 La Paz-Bolivia polticas de uso XHTML CSS RSS

27 027 Espacio de gestión inicio Este espacio está destinado a Información de Gestión, por lo tanto se encuentra subdividido en secciones de información con un espacio para fechas o imágenes relativas a los resultados de gestión. Es importante mantener al día la información sobre los resultados de gestión de la institución, estos resultados incluyen los logros realizados por programas o proyectos, mientras estos dependan de la institución. Diagramación La diagramación se realiza en cuatro columnas organizadas de la siguiente forma: Se distribuyen las 4 columnas en dos espacios grandes que responden al volumen de texto existe en el ejemplo de la página de inicio. IMAGEN 26.

28 Sobre la institución (Página modelo B) Los enlaces secundarios de este botón responden a información de carácter institucional: Misión y Visión de institución Función de la institución Estructura de la institución Organigrama de la institución Marco normativo que da la existencia a la institución Mensaje de la cabeza de institución (ministro, viceministro, director, etc.) (OPCIONAL) IMAGEN 27. MARCA PAŒS PARA WEB MINISTERIO Economa y Finanzas Pblicas INICIO SOBRE LA INSTITUCIN GESTIN TRANSPARENCIA MARCO LEGAL PRENSA CONTACTO AYMARA CASTELLANO VICEMINISTERIO QUECHUA mapa del sitio fsfgfghhjjj INGLES REPOSITORIO DE DATOS INICIO/SOBRE LA INSTITUCIN DE INTERS Portal MEFP Poltica tributaria Tesoro y Crdito pblico Pensiones y Servicios PROYECTOS SOBRE LA INSTITUCIN MISIN Y VISIN Misin Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Visin REDES SOCIALES LŒNEA GRATUITA MENSAJE DEL PRESIDENTE GOBIERNO ELECTRNICO Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te usu noster tacimates reprimique, inani recusabo adolescens per ex. Homero assueverit quo ut, te falli error altera eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. FUNCIN DE LA INSTITUCIN Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Estructura de la institucin Volumus vivendum ea eos. Et soleat honestatis sea, quas Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appel. Mel tacimates constituam no, pro ut magna numquam abhorreant. ut per. Sea errem mandamus instructior in, noster tacimates reprimique, inani recusabo adoles- Organigrama de la institucin Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te uloren impsum dasd adkh eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. ver esquema MARCA PAŒS PARA WEB Telfono: (591-2) Fax: (591-2) Correo Electrnico: ministro_web@economiayfinanzas.gob.bo Direccin : Edificio Palacio de Comunicaciones Piso 19 La Paz-Bolivia polticas de uso XHTML CSS RSS

29 029 Diagramación En el ejemplo se puede observar una diagramación mixta, donde se distribuyen las 4 columnas en dos y cuatro espacios respondiendo al volumen de texto. IMAGEN 28.

30 030 Sobre la institución (Página modelo C) El Mensaje de la cabeza de Institución Este espacio es opcional. El contenido es de carácter individual, un mensaje o planteamiento de gestión o administración por parte de la cabeza de la institución. IMAGEN 29. MARCA PAŒS PARA WEB MINISTERIO Economa y Finanzas Pblicas INICIO SOBRE LA INSTITUCIN GESTIN TRANSPARENCIA MARCO LEGAL PRENSA CONTACTO AYMARA CASTELLANO VICEMINISTERIO QUECHUA mapa del sitio fsfgfghhjjj INGLES REPOSITORIO DE DATOS INICIO/SOBRE LA INSTITUCIN DE INTERS Portal MEFP Poltica tributaria Tesoro y Crdito pblico Pensiones y Servicios PROYECTOS MENSAJE DE LA CABEZA DE LA INSTITUCIN Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qlorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. ualisque. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. olumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te usu noster tacimates reprimique, inani recusabo adolescens per ex. Homero assueverit quo ut, te falli error altera eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute le Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te usu noster tacimates reprimique, inani recusabo adolescens per ex. Homero assueverit quo ut, te falli error altera eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. CURRICULUM VITAE DEL MAE Curriculum Lorem ipsum dolor sit amet, ex reque propriae senserit quo, pri fastidii albucius ea. Ad nobis postea ancillae ius. Vix te congue partem, ad eam impedit volumus, id nec veniam labitur qualisque. Utamur definiebas nec at, in blandit appellantur philosophia mei, ocurreret explicari disputando et vix. Mel tacimates constituam no, pro ut magna numquam abhorreant. Volumus vivendum ea eos. Et soleat honestatis sea, quas neglegentur ut per. Sea errem mandamus instructior in, te uloren impsum dasd adkh eam. Cum nonumy impedit repudiandae in, tamquam consulatu nam ne, munere virtute legendos ne ius. Elizabeth Salguero Carrillo REDES SOCIALES LŒNEA GRATUITA MENSAJE DEL PRESIDENTE GOBIERNO ELECTRNICO MARCA PAŒS PARA WEB Telfono: (591-2) Fax: (591-2) Correo Electrnico: ministro_web@economiayfinanzas.gob.bo Direccin : Edificio Palacio de Comunicaciones Piso 19 La Paz-Bolivia polticas de uso XHTML CSS RSS

31 031 Diagramación En el ejemplo de página de la institución B se puede observar una diagramación donde se fusionan 3 columnas para el texto y se utiliza la 4 para la imagen. IMAGEN 30.

32 Gestión (Página modelo D) Este botón nos lleva a un enlace secundario con información sobre los Resultados de Gestión de la institución. Estos resultados podrán ser presentados en orden cronológico, por área de desarrollo, por proyectos o programas dependientes de la institución o el criterio que se considere más adecuado para la institución. Debe ser una redacción sintética, con información técnica básica sobre el logro de gestión, cómo mínimo deberá contener: Nombre de la obra de gestión Alcance (nacional, departamental, regional, etc.) Lugar de realización Fecha de inicio y fecha de conclusión. Beneiciarios. Inversión. Resumen ejecutivo de la obra, características técnicas o sociales y beneicios de la misma. IMAGEN 31.

33 033 Diagramación Se distribuyen las 4 columnas en dos espacios grandes uno para el texto (fusión de dos columnas) y las otro para fotografías. IMAGEN 32.

34 Transparencia (Página modelo E) Este botón presenta enlaces secundarios con información establecida por el Ministerio de Transparencia Institucional y Lucha contra la Corrupción: Nómina del Personal (cargos y dependencia) Convocatorias de personal (términos de referencia y peril del cargo) Escalas salariales Plan Estratégico (Programado, ejecutado y resultados de gestión) POA (Programado, ejecutado y resultados de la gestión) Presupuesto Institucional Fuentes de inanciamiento Balance de la gestión Nómina de proveedores Convocatorias de bienes y servicios Informes de viajes al exterior de la MAE Formularios y reglamentos vigentes Flujos de procesos (responsables y tiempos) IMAGEN 33.

35 035 Diagramación En la diagramación de la página de transparencia se utiliza la primera columna para el menú y en caso de existir tabla se fusionan de 3 a 4 columnas. IMAGEN 34.

36 036 Transparencia (Página modelo F) IMAGEN 35.

37 037 Diagramación IMAGEN 36.

38 Marco legal (Página modelo G) El o los enlaces secundarios de este botón son las leyes o decretos que establecen los objetivos, áreas de trabajo, alcances, responsabilidades y/o obligaciones de la institución, así como la compilación de normas generales, especiales, conexas y complementarias. IMAGEN 37.

39 039 Diagramación Se distribuyen las 4 columnas en dos espacios que responden al volumen de existente en la página de Marco legal. IMAGEN 38.

40 Prensa (Página modelo H) El o los enlaces secundarios del botón son el repositorio de notas de prensa, coberturas y noticias referentes a la institución y relevantes al área sectorial de la institución. Preferentemente las notas deben estar presentadas en orden cronológico, empezando con las notas más recientes a las antiguas. IMAGEN 39.

41 041 Diagramación En el ejemplo de página de prensa distribuyen enen dos espacios, tomando las dos primeras columnas para el texto y las otras dos para imagen. IMAGEN 40.

42 Contacto (Página modelo I) Este botón nos lleva al enlace secundario con información de contacto con la institución, dirección o direcciones, teléfonos, mail institucional, persona o personas de contacto. Contar con un mapa (Google maps) de la ubicación de la institución es preferible. IMAGEN 41. Formulario de reclamos

43 043 Diagramación En el ejemplo de página de contacto se distribuyen en dos espacios, Utilizando las dos primeras columnas para el texto y las otras dos para imagen en el caso de la página de contacto se recomienda tener un enlace a google map. 6.8 Instituciones dependientes Son Instituciones dependientes las que operan bajo el control o normativa de una institución mayor : (Ej. Viceministerios son dependientes de un Ministerio. Programas y Proyectos son dependientes de Viceministerios o Ministerios). Este botón nos lleva a los enlaces secundarios de estas instituciones dependientes.. IMAGEN 42. Formulario de reclamos

44 Repositorio de datos (Página modelo J) Enlace a base de datos de la institución. Las bases de datos pueden ser de documentos sobre las actividades de la institución, fotografías, mapas, documentos, banco de trabajos de investigación, información estadística, videos o cualquier información de acceso público de la institución. IMAGEN 43.

45 045 Diagramación La página de repositorio de datos se caracteriza por ser una página únicamente de descargas, donde se usan las dos primeras columnas para una breve descripción y las tercera para los botones de descarga, la particularidad que tiene es que la cuarta columna no existe. IMAGEN 44.

46 Formulario de reclamo (Página modelo K) Esta página debe establecer un contacto con la institución, debe existir un responsable de recibir, gestionar y responder a los reclamos de la población para su real funcionabilidad. IMAGEN 45.

47 047 Diagramación En el diseño de los formularios se utiliza tres columnas donde se alinean las etiquetas a la derecha y todo el formulario alineado al centro de páginas. En el caso de un formulario largo procure que los usuarios graben los formularios a través de botones que realicen la acción de grabar. En caso de contar con formularios procure diseñar elementos en estos que permitan asegurar que los usuarios puedan lograr sus objetivos, tan cortos como sea posible, con etiquetas que muestren claramente los espacios obligatoreios. IMAGEN 46.

48 Pagina de mapa web (Página modelo L) El mapa de la página web deberá ser presentada de forma sencilla para el entendimiento de cualquier usuario. IMAGEN 47.

49 049 Diagramación Se diagrama en cuatro columnas que se distribuyen en dos espacios donde se colocan en orden jerárquico lo enlaces primarios, enlaces secundarios, etc. desplegándose por etapas generando espacios de izquierda a derecha. IMAGEN 48.