Guia de Estandarizacion de Imagen y Aplicación Grafica

MANUAL DE ESTANDARIZACIN DE IMAGEN Y APLICACIN GRFICA PARA SITIOS WEB ESTADO PLURINACIONAL DE BOLIVIA
Indroduccin
La Agencia para el Desarrollo de la Sociedad de la Informacin en Bolivia -ADSIB- ha desarrollado, junto al Ministerio de Transparencia y el Ministerio de Comunicacin, la gua de estndares tcnicos y de contenidos aplicable a sitios Web del Estado Plurinacional de Bolivia, con el objetivo de generar un proceso de estandarizacin y homogeneizacin de las mismas, mejorando la experiencia de navegacin de los usuarios. El objetivo de estandarizacin y homogeneizacin de los sitios WEB del Estado Plurinacional de Bolivia 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 informacin. La presente gua establece los criterios generales de desarrollo de contenidos de los sitios Web del Estado Plurinacional, as como el manejo grfico de los mismos.
ndice
INTRODUCCIN NDICE FORMA DE USO ESTRUCTURA 1.1 1.2 1.3 1.4
Pg 2 Pg 3 Pg 5
DIAGRAMACIN Y PGINAS MODELO Pg 26-47 6.1 Inicio

Pg 26-27
Pgina modelo A ............................................Pg 26 Diagramacin ..................................................Pg 27 6.2 Sobre la institucin

Pg 28-31
Pg 6-9
Estructura bsica .............................................................. Pg 6 Diagramacin y grilla ............................................... Pg 7 Medidas Grilla .................................................................... Pg 8 Grilla de fondos de color ............................................ Pg 9
Pg 10-22 Pg 11-15
Pgina modelo B, C ..............................Pg 28 y 30 Diagramacin ..........................................Pg 29 y 31 6.3 Gestin

Pg 32-33
ESTRUCTURA ESTTICA 2. Cabecera 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
Pgina modelo D .............................................Pg 32 Diagramacin ...................................................Pg 33 6.4 Transparencia

Pg 34-38
Construccin de la cabecera..................................Pg 11 Medidas de la cabecera................................................Pg 11 Construccin marca pas ..............................................Pg 11 Construccin nombre de la institucin ............Pg 12 Construccin cuadro de dilogo buscador....Pg 12 Construccin botones de idioma .........................Pg 13 Enlace mapa web ..........................................................Pg 13 Construccin botonera principal .........................Pg 14 a) Botonera principal desplegada caso A .............Pg 14 b) Botonera principal desplegada caso B ..............Pg 15 2.9 Men de rastro ...............................................................Pg 15 2.10 Contenidos botonera principal ......................Pg 16-17
Pg 18-20
Pgina modelo E, F ................................Pg 34 y 35 Diagramacin .........................................Pg 36 y 37 6.5 Marco legal

Pg 38-39
Pgina modelo G ............................................Pg 38 Diagramacin ....................................................Pg 39 6.6 Prensa

Pg 40-41
Pgina modelo H ............................................Pg 40 Diagramacin ....................................................Pg 41 6.7 Contacto

Pg 42-43
3. Botonera lateral 3.1 3.2 3.3 3.4
Construccin banner lateral ....................................Pg 18 Medidas banner lateral.............................................Pg 19 Construccin botonera de inters ........................Pg 20 Construccin botones de gobierno ...................Pg 20
Pg 21-22
Pgina modelo I................................................Pg 42 Diagramacin ...................................................Pg 43 6.8 Instituciones dependientes 6.9 Repositorio de datos
Pg 43 Pg 44-45
4. Pe de pgina
4.1 Construccin pe de pgina ...................................Pg 21 4.2 Construccin enlace polticas de uso .................Pg 22 4.3 Construccin validacin tcnica ...........................Pg 22 5. CRITERIOS GENERALES DE DIAGRAMACIN Pg 23-25 a. Textos ............................................................................Pg 23-24 b. Tablas ..................................................................................Pg 24 c. Esquemas ..........................................................................Pg 24 d. Fotos y videos ..................................................................Pg 24 e. Botones de descargas ..............................................Pg 25 f. Formularios .....................................................................Pg 25
Pgina modelo J ..............................................Pg 44 Diagramacin ...................................................Pg 45 6.10 Formulario de reclamos

Pg 46-47
Pgina modelo K .............................................Pg 46 Diagramacin ....................................................Pg 47 6.11 Pgina mapa web

Pg 48-49
Pgina modelo L ..............................................Pg 48 Diagramacin ....................................................Pg 49
05
Forma de Uso
El manual es la gua que explica de manera grfica todas las partes que componen la estructura base para la construccin de sitios web del estado plurinacional de Bolivia.
Manual de Estandarizacin
para Pginas web
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 construccin hasta llegar a la descomposicin del sitio web en su totalidad.
Imgenes de apoyo
Existe un archivo complementario al manual denominado elementos grficos anexos . Este archivo contiene imgenes que ayudan al desarrollado de los sitios web. Todas las imgenes del sitio web se encuentran en formato .png a 72 px. de resolucin. Las imgenes de apoyo estn disponibles en el tamao definido en el manual. Estos tamaos varan segun la imagen.
06
1. 1 Estructura bsica
La tecnologa empleada para la estandarizacin 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 especfico 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 pgina y contiene los elementos de identificacin del sitio web. - Cuerpo o body: Se ubica en la parte central del sitio web; se caracteriza por cambiar de la distribucin de elementos de acuerdo al volumen de informacin. - Banner lateral: Se ubica a la derecho de la estructura y contiene informacin relacionada con el Gobierno. - Pie de pgina: Es la parte inferior de la pgina y contiene la informacin tcnica y de contacto referente a la institucin. IMAGEN 1.
para Pginas web
* Aclaracin: La cabecera, el banner lateral derecho y el pie de pgina se mantiene en esta disposicin en todas las pginas, independientemente de su funcin, es espacio que vara segn los contenidos es el cuerpo o body.
MARCA PAS PARA WEB
CABECERA
CUERPO
BANNER LATERAL
IMAGEN 1
Estructura bsica
PIE DE PGINA
07
1.2 Diagramacin 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.
para Pginas web
El cuerpo: Contiene un banner superior con las fotos representativas del rubro al que se dedica la institucin. La figura 2 muestra la grilla base de los sitios web. Para las posibilidades de diagramacin en cuatro columnas ver pginas 26 - 49. Banner lateral derecho: Es un espacio destinado para una botonera secundaria denominada de inters e informacin del gobierno en general.
Pie de pgina: Contiene la informacin tcnica y de contacto con la institucin.

IMAGEN 2.
Cabecera: Contiene informacin que ayuda a identificar a que institucin pertenece el sitio web y los elementos que la componen son: Marca pas, Nombre de la institucin, botonera de idiomas, buscador, enlace a el mapa web y botonera principal.
Criterio de xito (Nivel A). El sitio Web deber mantener la estructura descrita en la IMAGEN 2.
MARCA MARCA MARCA PAS PAS PAS PARA WEB PARA PARAWEB WEB
BANNER SUPERIOR BOTONERA PRINCIPAL BANNER CENTRAL BOTONERA LATERAL DE INTERS
TEXTO TEXTO COLUMNA 1 COLUMNA 2
TEXTO TEXTO COLUMNA 3 COLUMNA 4
BOTONES DE GOBIERNO
ESPACIO MARCA PAS WEB
IMAGEN 2
Diagramacin y estilo
PIE DE PGINA
08
1.3 Grilla de tamaos
Los pixeles son la unidad de medida estndar que se utiliza en el diseo de pginas web, en la imagen 3 se puede observar cada espacio con su medida respectiva. IMAGEN 3.
150 px 850 pxl
para Pginas web
160 px
MARCA MARCA PAS PAS PARA PARAWEB WEB
BANNER SUPERIOR BOTONERA PRINCIPAL
120 px
40 px
20 px
150 px
BANNER CENTRAL
810 px 10 px 170 px 770 pxl 70 px 10 px 20 px
190 px
20 px
X px
X px
PIE DE PGINA
1000 px
100 px
IMAGEN 3
Grilla de medidas
09
1.4 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 desarroBanner Superior Color de Fondo
R: 230 G: 230 B: 230
para Pginas web
llo de una Marca Pas, que determina la paleta de colores a utilizar. Gradiente Gris - Botonera principal y cabecera. Grises plenos: fondo web, Botonera lateral y pie de pgina. Blanco: Fondo. IMAGEN 4.
Color web
#E6E6E6
Gradiente
87%
R: 255 G: 255 B: 255
#FFFFFF
13%
Botonera Principal Color de Fondo Color web

R: 200 G: 200 B: 200 R: 255 G: 255 B: 255 #C8C8C8
Gradiente
50%
MARCA PAS PARA WEB
BANNER SUPERIOR BOTONERA PRINCIPAL
#FFFFFF
50%
Botonera de Inters Color de Fondo

R: 241 G: 241 B: 241
Color web
#F2F2F2
185 pxl
Fondo Color de Fondo

R: 255 G: 255 B: 255
Color web
#FFFFFF
PIE DE PGINA
IMAGEN 4
Color del explorador Color web
R: 240 G: 240 B: 240 #F0F0F0
Pie de Pgina Color de Fondo

R: 170 G: 170 B: 170
Diagramacin y Color web

#AAAAAA
estilo
010
2. Estructura esttica
La estructura esttica est compuesta por los elementos de la grilla que no cambian al presionar el cursor sobre un botn del sitio web. Los elementos marcados con gris oscuro pertenecen a la estructura esttica. Cabecera. IMAGEN 5. Banner lateral. IMAGEN 5. Pie de pgina. IMAGEN 5.
para Pginas web
MARCA PAS PARA WEB
CABECERA
CUERPO
BANNER LATERAL
IMAGEN 5.
Estructura esttica
PIE DE PGINA
011
2.1 Construccin Cabecera
para Pginas web
Se conforma por los elementos que ayudan a identificar el sitio web (Marca pas web, nombre de la institucin), botoneras bsicas de funcionamiento (idiomas, buscador, mapa web) y la botonera principal. IMAGEN 6.
IMAGEN 6.
2.2 Medidas de la cabecera

Para la construccin de la cabecera se realiza todas las medidas en pixeles.
IMAGEN 7.
IMAGEN 7.
2.3 Construccin marca pas

Es rectangular y mide 160 px X 150 px . IMAGEN 8 .
150 px
IMAGEN 6.
160 px
Foto provisional
Elementos de La Cabecera
IMAGEN 7.
Medidas de la cabecera
IMAGEN 8.
La marca pas
IMAGEN 8.
012
2.4 Construccin Nombre de la institucin
Se ubica en la parte superior de la cabecera y sirve para potenciar la identidad de las pginas Web haciendo referencia a la institucin como en la grfica Ministerio de Economa y Finanzas Pblicas.
IMAGEN 9.
para Pginas web
2.5 Construccin cuadro de dilogo buscador

Es un cuadro de dilogo que busca mediante palabras claves temas de inters. IMAGEN 10.
IMAGEN 9.
IMAGEN 9.
Nombre de la institucin
IMAGEN 10.
Botn idiomas
IMAGEN 10.
013
2.6 Construccin botones de idioma
Los botones para seleccionar el idioma en el que se desea navegar en la pgina se ubican en la parte superior derecha de la diagramacin. La caracterstica de estos botones es que tiene dos estados el normal (Color negro) y cuando est presionado (Color Rojo). IMAGEN 11.
para Pginas web
IMAGEN 11.
2.7 Enlace mapa Web

El enlace de mapa Web se encuentra ubicado en la derecha de la cabecera sobre el cuadro de dilogo del buscador y es un enlace a un esquema de todos los enlaces de la pgina Web.
IMAGEN 12.
IMAGEN 12.
IMAGEN 11.
Grilla de medidas
IMAGEN 12.
Grilla de medidas
014
2.8 Construccin Bonotera Principal
La botonera principal se ubica en la parte inferior de la cabecera y tiene las siguientes caractersticas Ancho: 850 px Alto: 40 px
IMAGEN 13.
para Pginas web
* Aclaracin: La cantidad mxima de

botones es de 9. Si excede el lmite se debe colocar los botones exedentes en en la botonera de inters.
IMAGEN 21.
IMAGEN 13.
a. Bonotera Principal Desplegada Caso A

En el caso de la botonera principal cada botn 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 botn.
* Aclaracin: En el caso que el men

con enlaces secundarios sea ms ancho que el botn debe ir alineado a la izquierda del botn. IMAGEN 15 .
IMAGEN 13.
Botonera principal
IMAGEN 14.
Botonera principal desplegada caso A
IMAGEN 14.
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.
para Pginas web
IMAGEN 15.
2.9 Men de rastro

Deber orientar al usuario sobre la ubicacin de la pgina que se est visitando en el sitio Web.
IMAGEN 16.
IMAGEN 16.
IMAGEN 15.
Botonera principal desplegada caso B.
IMAGEN 16.
Men de rastro.
016
2.10 Contenidos botonera principal
Botn de inicio: Este botn tiene como funcin llevarnos a la pgina principal, en cualquier pgina interior que nos encontremos. Sobre la Institucin: Los enlaces secundarios de este botn responden a informacin de carcter institucional:
a) Misin y Visin de institucin b) Funcin de la institucin c) Estructura de la institucin d) Organigrama de la institucin e) Marco normativo que da la existencia a la institucin f) Mensaje de la cabeza de institucin (ministro, viceministro, director, etc.) g) Trayectoria de MAE (Curriculum)
para Pginas web
Botn gestin: Este botn nos lleva a un enlace secundario con informacin sobre los Resultados de Gestin de la institucin. Estos resultados podrn ser presentados en orden cronolgico, por rea de desarrollo, por proyectos o programas dependientes de la institucin o el criterio que se considere ms adecuado para la institucin. Botn transparencia: Este botn presenta enlaces secundarios con informacin establecida por el Ministerio de Transparencia Institucional y Lucha contra la Corrupcin:
a) Nmina del Personal (cargos y dependencia) b) Convocatorias de personal (trminos de referencia y perfil del cargo) c) Escalas salariales d) Plan Estratgico (Programado, ejecutado y resultados de gestin) e) POA (Programado, ejecutado y resultados de la gestin)
017
para Pginas web
f) Presupuesto Institucional g) Fuentes de financiamiento h) Balance de la gestin i) Nmina 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 botn son las leyes o decretos que establecen los objetivos, reas de trabajo, alcances, responsabilidades y/o obligaciones de la institucin, as como la compilacin de normas generales, especiales, conexas y complementarias. Prensa: Los enlaces secundarios del botn son el repositorio de notas de prensa, coberturas y noticias referentes a la institucin y relevantes al rea sectorial de la institucin. Contacto: Este botn nos lleva al enlace secundario con informacin de contacto con la institucin, herramienta interactiva para preguntas, comentarios o quejas. Instituciones dependientes: Son Instituciones dependientes las que operan bajo el control o normativa de una institucin mayor: (Ej. Viceministerios son dependientes de un Ministerio. Programas y Proyectos son dependientes de Viceministerios o Ministerios). Este botn nos lleva a los enlaces secundarios de estas instituciones dependientes. Repositorio de Datos: Enlace a base de datos de la institucin. Las bases de datos pueden ser de documentos sobre las actividades de la institucin, fotografas, mapas, documentos, banco de trabajos de investigacin, informacin estadstica, videos o cualquier informacin de acceso pblico de la institucin.
018
3.1 Construccin Banner Lateral
El banner lateral est conformado por: Botonera de inters: Son los botones adicionales que corresponden al sitio web dando informacin que no se la encuentra en la botonera principal. Botones del gobierno: Espacio destinado a contenidos de carcter poltico. Estos contenidos estarn normados y administrados por el Ministerio de Comunicacin, con temticas coyunturales o de inters particular del Estado Plurinacional. Espacio marca pas: El espacio de la marca pas se repite en todas las pginas y contiene informacin puntual sobre la marca pas.
IMAGEN 17.
para Pginas web
IMAGEN 17.
Banner Lateral
019
3.2 Medidas del banner lateral
Las medida son: el ancho 190 px y el alto responden al volumen de informacin con las siguientes limitaciones. Botonera de inters: La cantidad mxima de botones es de 8. Botones de gobierno: La cantidad mxima de botones es de 8.
IMAGEN 18.
para Pginas web
IMAGEN 18.
Banner lateral con medidas
020
3.3 Construccin del botonera lateral de inters
Los botones de inters son estndares y miden: De ancho: 190 px De alto: 30 px
IMAGEN 19.
para Pginas web
IMAGEN 19.
3.4 Construccin botones de gobierno

Los botones del gobierno pueden ser implementados de dos formas: 1.- Modelo de botn 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 inters
IMAGEN 20.
Botones de gobierno
021
4.1 Construccin Pie de Pgina
El pie de pgina contiene tres tipos de informacin: Informacin de la institucin: informacin imprescindible de contacto. Polticas de uso: Informacin legal del uso de la pgina web. Validacin: son links que sirven para realizar la validacin tcnica de la pgina web. La normativa de tamao y color est en el cuadro. IMAGEN 21.
para Pginas web
IMAGEN 21.
4.2 Construccin de la informacin de la institucin

La informacin imprescindible del pie de pgina son: telfonos, correo electrnico (*enlace de texto), direccin.
La normativa de tamao y color est en el cuadro. IMAGEN 22.
IMAGEN 22.
IMAGEN 21.
Botonera de inters
IMAGEN 22.
Botones de gobierno
022
4.3 Construccin enlace polticas de uso
Enlace de texto polticas de uso.
IMAGEN 24.
para Pginas web
IMAGEN 23.
4.5 Construccin de la validacin

Validacin en: - XHTML - CSS
IMAGEN 25.
IMAGEN 24.
IMAGEN 23.
Polticas de uso
IMAGEN 24.
Validacin
023
5. Criterios generales de diagramacin
para Pginas web
El ttulo, los subttulos y epgrafe o cuerpo de texto es lo que llamamos paratexto. ste incluye todos los elementos que dan el formato final a los contenidos de texto, otorgndole las caractersticas formales de un texto acadmico. Son todas las normas bsicas de diagramacin descripcin se realiza a detalle normando: tipografa, tamao, etc.
a. TEXTOS
Ttulos
Se denominan Ttulos a la descripcin del enlace secundario en el que navegamos o nos encontramos, Ej.: PGINA PRINCIPAL, SOBRE LA INSITUCIN, GESTIN, etc.) Tipografa: Arial (TODO EN ALTAS negrillas) Tamao: 21 pts / 21 px Color R: 51 G: 51 B: 51 Web: #333333 Alineacin de texto: Izquierda.
Epgrafe
Se utiliza para el resumen de una noticia o cita textual de alguna intervencin de una persona en particular. Tipografa: Arial (Altas y bajas negrillas) Tamao: 14 pts / 14 px Color R: 102 G: 102 B: 102 Web: #666666 Alineacin de texto: Izquierda.
Fechas A (Antes de filete)

Informacin sobre el da, mes y ao que se emiti la noticia que estar en la pgina web, o fecha que se empez o termin la ejecucin de algn resultado de gestin. Tipografa: Arial (normal) Tamao: 14 pts / 14 px Color
Subttulo A Grande
Se utiliza el Subttulo A Grande para los titulares tradicionales de secciones, noticias, informacin sectorial, presentacin de leyes, programas, proyectos, logros de gestin o cualquier tipo de contenido que tenga un nombre o definicin de trabajo. Tipografa: Arial (TODO EN ALTAS negrillas) Tamao: 16 pts / 16 px Color R: 51 G: 51 B: 51 Web: #333333 Alineacin de texto: Izquierda.
R: 204 G: 51 B: 0 Web: #CC3300
Fechas B
Se encuentra debajo un ttulo, Nota de prensa, artculo, etc. Tipografa: Arial (normal) Tamao: 10 pts / 10 px Color R: 204 G: 51 B: 0 Web: #CC3300 Alineacin de texto: Izquierda.
Subttulo B pequeo
Dentro de una seccin que est presentada en un Subttulo A Grande encontramos temas puntuales que se diferenciarn utilizando el Subttulo B Pequeo. Tipografa: Arial (Altas y bajas negrillas) Tamao: 14 pts / 14 px Color R: 51 G: 51 B: 51 Web: #333333 Alineacin de texto: Izquierda.
Masa de texto
Texto en general.
Tipografa: Arial (normal) Interlineado: 13 pts Tamao: 11 pts / 11 px
024
Color R: 102 G: 102 B: 102 Web: #666666
Alineacin de texto: Justificado.
para Pginas web
Color R: 51 G: 51 B: 51 Web: #333333

Alineacin de texto: Izquierda.
Punteo dentro de la masa de texto

Jerarquizacin conceptual, cronolgica para el enunciado de varios conceptos.
Texto Tablas
Tipografa: Arial (normal) Tamao: 11 pts / 11 px Color R: 102 G: 102 B: 102 Web: #666666
Tipografa: Arial (normal) Interlineado: 13 pts Tamao: 11 pts / 11 px Color R: 102 G: 102 B: 102 Web: #666666
Alineacin de texto: comienza un guin intermedio y tres espacios ms a la derecha del inicio del prrafo justificado, alineado a la izquierda.
c. ESQUEMAS
Ttulos Esquemas
Tipografa: Arial (Altas negrillas) Tamao: 12 pts / 12 px Color R: 51 G: 51 B: 51 Web: #333333
Alineacin de texto: Centro.
Pe de foto, video
Debe contener informacin sobre la fuente, lugar y fecha.
Tipografa: Arial (normal) Tamao: 9 pts / 9 px Color R: 102 G: 102 B: 102 Web: #CC3300
Alineacin de texto: Derecha de la fotografa, video.
Texto del esquema

Tipografa: Arial (normal) Tamao: 10 pts / 10 px Color R: 102 G: 102 B: 102 Web: #666666
Alineacin de texto: Centro.
Enlace de texto
Se utiliza para acceder a enlaces con ms informacin sobre la temtica. Ver esquema. Tipografa: Arial (subrayada) Tamao: 8 pts / 8 px Color R: 0 G: 0 B: 250 Web: #0000FF Alineacin de texto: inmediatamente despus del: texto, punto, etc.
d. FOTOS Y VIDEOS
Modelo A (a 2 columnas)
Tamao: 350 px x X
Alineacin de texto: Alineado en 2 columnas .
Modelo B (a 1 columnas)
Tamao: 170 px x X
Alineacin de texto: Alineado en 1 columnas .
b. TABLAS
Ttulos tabla
Tipografa: Arial (Altas y bajas negrillas) Tamao: 12 pts / 12 px
025
e. BOTONES DE DESCARGAS
Botn de descargas PDF, Word
Tamao: 30px x 30px Alineacin de texto: Alineado en una columna.
para Pginas web
f. FORMULARIOS
Ttulos formulario
Tipografa: Arial (Altas y bajas negrillas) Tamao: 12 pts / 12 px Color R: 51 G: 51 B: 51 Web: #333333
Sub ttulo Formulario

Tipografa: Arial (TODO EN ALTAS negrillas) Tamao: 16 pts / 16 px Color R: 51 G: 51 B: 51 Web: #333333 Alineacin de texto: Izquierda.
Texto formulario
Tipografa: Arial (Altas y bajas negrillas) Tamao: 13 pts / 1 px Color R: 102 G: 102 B: 102 Web: #666666 Alineacin de texto: Izquierda.
Texto espacio obligatorio

Tipografa: Arial (normal) Tamao: 9 pts / 9 px Color R: 102 G: 102 B: 102 Web: #CC3300
Alineacin de texto: Derecha.
026
6.1 Inicio (Pgina modelo A)
El pgina de Inicio es el primer impacto que recibe el usuario al entrar a cualquier pgina de Estado Plurinacional. Siendo que la INFORMACIN es el impulsor bsico de navegacin, el criterio bsico de las pginas WEB del Estado Plurinacional estar centrado en la presentacin de informacin. La seccin est destinada a Informacin Sectorial, es decir, informacin relativa al rea de trabajo de la institucin, puede contener informacin sobre los obje-
para Pginas web
tivos de la institucin, tcnicas, tecnologas, experiencias internacionales, transferencia de tecnologa, etc. Bajo el criterio de presentar informacin relevante, coyuntural y actual sobre el rea de trabajo de la institucin. Si existe ms de una lnea de informacin que se desee presentar en la pgina de inicio se debe utilizar el criterio de ttulos y subttulos de la presente gua.
IMAGEN 25.
MARCA PAS PARA WEB

INICIO/
AYMARA
CASTELLANO
QUECHUA
INGLES
MINISTERIO
INICIO SOBRE LA INSTITUCIN
Economa y Finanzas Pblicas
mapa del sitio
fsfgfghhjjj
GESTIN
TRANSPARENCIA
MARCO LEGAL
PRENSA
CONTACTO
VICEMINISTERIO
REPOSITORIO DE DATOS
DE INTERS
Portal MEFP Poltica tributaria Tesoro y Crdito pblico Pensiones y Servicios PROYECTOS
INICIO
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.
LOREM IPSUM
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.
REDES SOCIALES LNE A GRATUITA 800-100-100 MENSAJE DEL PRESIDENTE GOBIERNO ELECTRNICO
12/04/11
12/04/11
12/04/11
12/04/11
12/04/11
12/04/11
MARCA PAS PARA WEB

XHTML CSS RSS
Telfono: (591-2) 2203434 - 2392220 - 2392779 Fax: (591-2) 2359955 Correo Electrnico: ministro_web@economiayfinanzas.gob.bo Direccin : Edificio Palacio de Comunicaciones Piso 19 La Paz-Bolivia
polticas de uso
027
Espacio de gestin inicio
Este espacio est destinado a Informacin de Gestin, por lo tanto se encuentra subdividido en secciones de informacin con un espacio para fechas o imgenes relativas a los resultados de gestin. Es importante mantener al da la informacin sobre los resultados de gestin de la institucin, estos resultados incluyen los logros realizados por programas o proyectos, mientras estos dependan de la institucin.
para Pginas web
Diagramacin
La diagramacin 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 pgina de inicio.
IMAGEN 26.
028
6.2 Sobre la institucin (Pgina modelo B)
Los enlaces secundarios de este botn responden a informacin de carcter institucional: Misin y Visin de institucin Funcin de la institucin Estructura de la institucin Organigrama de la institucin Marco normativo que da la existencia a la institucin Mensaje de la cabeza de institucin (ministro, viceministro, director, etc.) (OPCIONAL)
para Pginas web
IMAGEN 27.
MARCA PAS PARA WEB

INICIO/SOBRE LA INSTITUCIN
AYMARA
CASTELLANO
QUECHUA
INGLES
MINISTERIO
mapa del sitio
fsfgfghhjjj
GESTIN
TRANSPARENCIA
MARCO LEGAL
PRENSA
CONTACTO
VICEMINISTERIO
DE INTERS
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
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 L A 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 PAS PARA WEB

XHTML CSS RSS
polticas de uso
029
Diagramacin
En el ejemplo se puede observar una diagramacin mixta, donde se distribuyen las 4 columnas en dos y cuatro espacios respondiendo al volumen de texto.
para Pginas web
IMAGEN 28.
030
Sobre la institucin (Pgina modelo C)
El Mensaje de la cabeza de Institucin Este espacio es opcional. El contenido es de carcter individual, un mensaje o planteamiento de gestin o administracin por parte de la cabeza de la institucin.
para Pginas web
IMAGEN 29.
MARCA PAS PARA WEB

INICIO/SOBRE LA INSTITUCIN
AYMARA
CASTELLANO
QUECHUA
INGLES
MINISTERIO
mapa del sitio
fsfgfghhjjj
GESTIN
TRANSPARENCIA
MARCO LEGAL
PRENSA
CONTACTO
VICEMINISTERIO
DE INTERS
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.
Elizabeth Salguero Carrillo
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.
MARCA PAS PARA WEB

XHTML CSS RSS
polticas de uso
031
Diagramacin
En el ejemplo de pgina de la institucin B se puede observar una diagramacin donde se fusionan 3 columnas para el texto y se utiliza la 4 para la imagen.
para Pginas web
IMAGEN 30.
032
6.3 Gestin (Pgina modelo D)
Este botn nos lleva a un enlace secundario con informacin sobre los Resultados de Gestin de la institucin. Estos resultados podrn ser presentados en orden cronolgico, por rea de desarrollo, por proyectos o programas dependientes de la institucin o el criterio que se considere ms adecuado para la institucin. Debe ser una redaccin sinttica, con informacin tcnica bsica sobre el logro de gestin, cmo mnimo
para Pginas web
deber contener: Nombre de la obra de gestin Alcance (nacional, departamental, regional, etc.) Lugar de realizacin Fecha de inicio y fecha de conclusin. Beneficiarios. Inversin. Resumen ejecutivo de la obra, caractersticas tcnicas o sociales y beneficios de la misma.
IMAGEN 31.
033
Diagramacin
Se distribuyen las 4 columnas en dos espacios grandes uno para el texto (fusin de dos columnas) y las otro para fotografas.
para Pginas web
IMAGEN 32.
034
6.4 Transparencia (Pgina modelo E)
Este botn presenta enlaces secundarios con informacin establecida por el Ministerio de Transparencia Institucional y Lucha contra la Corrupcin: Nmina del Personal (cargos y dependencia) Convocatorias de personal (trminos de referencia y perfil del cargo) Escalas salariales Plan Estratgico (Programado, ejecutado y resultados de gestin)
para Pginas web
POA (Programado, ejecutado y resultados de la gestin) Presupuesto Institucional Fuentes de financiamiento Balance de la gestin Nmina 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.
035
Diagramacin
En la diagramacin de la pgina de transparencia se utiliza la primera columna para el men y en caso de existir tabla se fusionan de 3 a 4 columnas.
para Pginas web
IMAGEN 34.
036
Transparencia (Pgina modelo F)
para Pginas web
IMAGEN 35.
037
Diagramacin
para Pginas web
IMAGEN 36.
038
6.5 Marco legal (Pgina modelo G)
El o los enlaces secundarios de este botn son las leyes o decretos que establecen los objetivos, reas de trabajo, alcances, responsabilidades y/o obligaciones de la institucin, as como la compilacin de normas generales, especiales, conexas y complementarias.
para Pginas web
IMAGEN 37.
039
Diagramacin
Se distribuyen las 4 columnas en dos espacios que responden al volumen de existente en la pgina de Marco legal.
para Pginas web
IMAGEN 38.
040
6.6 Prensa (Pgina modelo H)
El o los enlaces secundarios del botn son el repositorio de notas de prensa, coberturas y noticias referentes a la institucin y relevantes al rea sectorial de la institucin. Preferentemente las notas deben estar presentadas en orden cronolgico, empezando con las notas ms recientes a las antiguas.
para Pginas web
IMAGEN 39.
041
Diagramacin
En el ejemplo de pgina de prensa distribuyen enen dos espacios, tomando las dos primeras columnas para el texto y las otras dos para imagen.
para Pginas web
IMAGEN 40.
042
6.7 Contacto (Pgina modelo I)
Este botn nos lleva al enlace secundario con informacin de contacto con la institucin, direccin o direcciones, telfonos, mail institucional, persona o personas de contacto. Contar con un mapa (Google maps) de la ubicacin de la institucin es preferible.
para Pginas web
IMAGEN 41.
Formulario de reclamos
043
Diagramacin
En el ejemplo de pgina 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 pgina de contacto se recomienda tener un enlace a google map.
para Pginas web
6.8 Instituciones dependientes

Son Instituciones dependientes las que operan bajo el control o normativa de una institucin mayor: (Ej. Viceministerios son dependientes de un Ministerio. Programas y Proyectos son dependientes de Viceministerios o Ministerios). Este botn nos lleva a los enlaces secundarios de estas instituciones dependientes..
IMAGEN 42.
Formulario de reclamos
044
6.9 Repositorio de datos (Pgina modelo J)
Enlace a base de datos de la institucin. Las bases de datos pueden ser de documentos sobre las actividades de la institucin, fotografas, mapas, documentos, banco de trabajos de investigacin, informacin estadstica, videos o cualquier informacin de acceso pblico de la institucin.
para Pginas web
IMAGEN 43.
045
Diagramacin
La pgina de repositorio de datos se caracteriza por ser una pgina nicamente de descargas, donde se usan las dos primeras columnas para una breve descripcin y las tercera para los botones de descarga, la particularidad que tiene es que la cuarta columna no existe.
para Pginas web
IMAGEN 44.
046
6.10 Formulario de reclamo (Pgina modelo K)
Esta pgina debe establecer un contacto con la institucin, debe existir un responsable de recibir, gestionar y responder a los reclamos de la poblacin para su real funcionabilidad.
para Pginas web
IMAGEN 45.
047
Diagramacin
En el diseo de los formularios se utiliza tres columnas donde se alinean las etiquetas a la derecha y todo el formulario alineado al centro de pginas. En caso de contar con formularios procure disear 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.
para Pginas web
En el caso de un formulario largo procure que los usuarios graben los formularios a travs de botones que realicen la accin de grabar.
IMAGEN 46.
048
6.11 Pagina de mapa web (Pgina modelo L)
El mapa de la pgina web deber ser presentada de forma sencilla para el entendimiento de cualquier usuario.
para Pginas web
IMAGEN 47.
049
Diagramacin
Se diagrama en cuatro columnas que se distribuyen en dos espacios donde se colocan en orden jerrquico lo enlaces primarios, enlaces secundarios, etc. desplegndose por etapas generando espacios de izquierda a derecha.
para Pginas web
IMAGEN 48.

Guia de Estandarizacion de Imagen y Aplicación Grafica

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Guia de Estandarizacion de Imagen y Aplicación Grafica

Hochgeladen von

Copyright:

Verfügbare Formate

MANUAL DE ESTANDARIZACIN DE IMAGEN Y APLICACIN GRFICA PARA SITIOS WEB ESTADO PLURINACIONAL DE BOLIVIA

DIAGRAMACIN Y PGINAS MODELO Pg 26-47 6.1 Inicio

Pgina modelo A ............................................Pg 26 Diagramacin ..................................................Pg 27 6.2 Sobre la institucin

Pgina modelo B, C ..............................Pg 28 y 30 Diagramacin ..........................................Pg 29 y 31 6.3 Gestin

Pgina modelo D .............................................Pg 32 Diagramacin ...................................................Pg 33 6.4 Transparencia

Pgina modelo E, F ................................Pg 34 y 35 Diagramacin .........................................Pg 36 y 37 6.5 Marco legal

Pgina modelo G ............................................Pg 38 Diagramacin ....................................................Pg 39 6.6 Prensa

Pgina modelo H ............................................Pg 40 Diagramacin ....................................................Pg 41 6.7 Contacto

3. Botonera lateral 3.1 3.2 3.3 3.4

Pgina modelo J ..............................................Pg 44 Diagramacin ...................................................Pg 45 6.10 Formulario de reclamos

Pgina modelo K .............................................Pg 46 Diagramacin ....................................................Pg 47 6.11 Pgina mapa web

Pgina modelo L ..............................................Pg 48 Diagramacin ....................................................Pg 49

para Pginas web

Estado Plurinacional de Bolivia

Para el buen uso

para Pginas web

Estado Plurinacional de Bolivia

MARCA PAS PARA WEB

para Pginas web

Estado Plurinacional de Bolivia

Pie de pgina: Contiene la informacin tcnica y de contacto con la institucin.

BANNER SUPERIOR BOTONERA PRINCIPAL BANNER CENTRAL BOTONERA LATERAL DE INTERS

TEXTO TEXTO COLUMNA 1 COLUMNA 2

TEXTO TEXTO COLUMNA 3 COLUMNA 4

ESPACIO MARCA PAS WEB

para Pginas web

Estado Plurinacional de Bolivia

MARCA MARCA PAS PAS PARA PARAWEB WEB

BANNER SUPERIOR BOTONERA PRINCIPAL

para Pginas web

Estado Plurinacional de Bolivia

R: 255 G: 255 B: 255

Botonera Principal Color de Fondo Color web

MARCA PAS PARA WEB

BANNER SUPERIOR BOTONERA PRINCIPAL

Botonera de Inters Color de Fondo

Fondo Color de Fondo

Pie de Pgina Color de Fondo

Diagramacin y Color web

para Pginas web

Estado Plurinacional de Bolivia

MARCA PAS PARA WEB

para Pginas web

Estado Plurinacional de Bolivia

2.2 Medidas de la cabecera

2.3 Construccin marca pas

para Pginas web

Estado Plurinacional de Bolivia

2.5 Construccin cuadro de dilogo buscador

para Pginas web

Estado Plurinacional de Bolivia

2.7 Enlace mapa Web

para Pginas web

Estado Plurinacional de Bolivia

* Aclaracin: La cantidad mxima de

a. Bonotera Principal Desplegada Caso A

* Aclaracin: En el caso que el men

para Pginas web

Estado Plurinacional de Bolivia

2.9 Men de rastro

para Pginas web

Estado Plurinacional de Bolivia

para Pginas web