Estilo Sitios Web PDF

MANUAL DE ESTILO
ENTIDADES
SITIOS WEB 2.0
ADSCRITAS AL GOBIERNO
PARA USO DE
EN LAS
MANUAL DE ESTILO
ENTIDADES
SITIOS WEB 2.0
GUBERNAMENTALES
PARA USO DE
EN LAS
M
A
N
U
A
L

D
E

E
S
T
I
L
O
E
N
T
I
D
A
D
E
S
S
I
T
I
O
S

W
E
B

2
.
0
G
U
B
E
R
N
A
M
E
N
T
A
L
E
S
P
A
R
A

U
S
O

D
E
E
N

L
A
S
GOBERNACIONES, INSTITUCIONES
POLICA NACIONAL
MANUAL DE ESTILO
ENTIDADES
SITIOS WEB 2.0
ADSCRITAS AL GOBIERNO
GOBERNACIONES, INSTITUCIONES
POLICA NACIONAL
PARA USO DE
EN LAS
Manual de estilo
4
1. Presentacin 5
2. Propsitos de este manual 6
3. Usos de los sitios web 7
4. Dinmicas de los sitios web 9
5. Generacin de sitios web 10
6. Elementos generales de las pginas web 13
7. Pgina de inicio Home 24
8. La Institucin 35
9. Transparencia 41
10. Programas / Servicios 42
11. Planifcacin 43
12. Comunicamos 44
13. Biblioteca 48
14. Enlaces 49
15. Contacto 50
16. Agenda 51
17. Bsqueda 52
18. Mapa de sitio 53
19. Glosario 54
20. Crditos 55
Indice
Manual de estilo
5 *Los usos del presente Manual se aplican para los sitios web de Gobernaciones, Instituciones y Polica Nacional Nacional
Presentacin
Los sitios web son un elemento fundamental para la
interaccin con los ciudadanos, quienes buscan a travs
de estos sistemas, una inclusin con el sector pblico y con
los servicios que prestan sus distintas instituciones. Este
documento est preparado para apoyar la labor de todas
las entidades gubernamentales, que buscan generar una
cercana con el ciudadano.
El Manual de Estilo para Uso de Sitios Web en las
Entidades Adscritas al Gobierno, es una gua sencilla que
resuelve las necesidades de quienes operan estos medios,
encaminados a incentivar la participacin del ciudadano
en las actividades que realiza la institucin y sus autoridades.
Este manual se aplica a los recursos tecnolgicos que
lo van a soportar, conteniendo las formas de proceder en las
diversas publicaciones.
1. Presentacin
Manual de estilo
La utilizacin de sitios web tiene como propsito generar
un relacionamiento entre el Estado y el ciudadano, con el
fn de incentivar la participacin y la interaccin entre ellos.
Se busca una cercana entre ambos actores, para que el Estado
pueda escuchar al ciudadano y a la vez ste pueda intervenir
activamente en la gestin que realizan sus autoridades.
El Manual de Estilo busca proporcionar una herramienta que
permita unifcar los criterios para el uso de sitios web de todas
las instituciones del Estado, con el fn de que se conviertan
en un efectivo puente de comunicacin entre el Gobierno
y los ciudadanos.
2. Propsitos de este manual
Propsitos de este manual
Manual de estilo
El posicionamiento que ha logrado el uso de Internet a nivel
mundial, invita a que el producto mostrado por las entidades
gubernamentales sea de ptima calidad, con el propsito de
presentar a un gobierno moderno y ordenado en su identidad
informtica.
El contenido que abarcan los sitios web de las instituciones
pblicas, permanece disponible las 24 horas del da
y a escala global para cualquier usuario. El servicio pblico
puede establecer un contacto con el ciudadano sin necesidad
de obligarlo a acudir fsicamente a determinado lugar o tener
a un funcionario atendiendo en un despacho o en una lnea
telefnica. La informacin, noticias, documentos, programas
y servicios de cada entidad, pueden ser obtenidas a cualquier
hora y desde cualquier lugar.
La universalidad del uso de sitios web, adems, nos brinda
la oportunidad de presentar al Gobierno Nacional a nivel
internacional, estrechando los lazos de comunicacin
institucional con usuarios del exterior.
3.1 Fortalecimiento de imagen
Un formato unifcado en diseo y actualizado en contenidos
de los sitios web gubernamentales, presenta un nivel
de administracin pblica estandarizada y progresista,
lo que transmite confanza en su identidad visual. La oferta
de programas y servicios puede ser detallada con amplitud.
3.2 Simplifcacin de trmites
Los sitios web de las entidades gubernamentales simplifcan
la ejecucin de todo tipo de trmites ante la disponibilidad
permanente de la informacin, con el propsito de hacer
ms efciente, rpido y sencillo el servicio pblico. Se genera
un signifcativo ahorro de tiempo al momento de evitar flas
y turnos en la relacin entre el ciudadano con el Gobierno.
3. Usos de los sitios web
Usos de los sitios web
Manual de estilo
Usos de los sitios web
Los usuarios pueden familiarizarse con los contenidos
expuestos en los sitios web y en el caso de requerir un
servicio presencial, podrn acudir con insumos previamente
analizados que le servirn como de hoja de ruta para su
gestin.
3.3 Cero papeles
La ejecucin de trmites y la bsqueda de informacin
a travs de los sitios web, permite un ahorro de material
impreso que no slo se contabiliza en recursos econmicos
sino principalmente ecolgicos. Especifcaciones de productos,
catlogos, guas didcticas, formularios y dems insumos,
podrn ser visualizados en el computador. Los documentos
no sern fsicos sino virtuales, generando otro ahorro en
enseres de ofcina.
Manual de estilo
Los sitios web de las entidades gubernamentales
permiten difundir contenidos ldicos, grfcos y atractivos
para la visualizacin y navegacin. El formato de
hipertexto orienta de una direccin a otra, haciendo ms
entretenida y funcional la experiencia del usuario.
Al conocer cules son los contenidos ms requeridos
por los ciudadanos, los administradores del sitio web
institucional podrn ampliar el volumen informativo
y facilitar el acceso a las bsquedas.
La informacin es de acceso pblico, 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 tecnologas, incentivndole a dinamizar en la
navegacin y hacer ms habitual el contacto entre el
ciudadano y el Gobierno por estos canales comunicativos.
Al ser sitios web de concurrencia peridica, sus
contenidos deben ser actualizados de forma constante,
evitando la permanencia de informaciones anacrnicas.
4. Dinmicas de los sitios web
Dinmicas de los sitios
web
Manual de estilo
Generacin de sitios web
La Presidencia de la Repblica, a travs de la Secretara
Nacional de la Administracin Pblica (SNAP), coordina
el proceso de modernizacin, mejoramiento y optimizacin
de los sitios web de las entidades gubernamentales,
garantizando los estndares de contenido y de imagen.
La Presidencia de la Repblica entregar a cada uno de las
Gobernaciones e Instituciones Adscritas al Estado, los sitios web
preestablecidos, para homologar una plantilla de diagramacin
nica. Ninguna institucin podr modifcar la pgina web
o crear una nueva sin la autorizacin de la SNAP.
5.1 Consideraciones generales
Los sitios web gubernamentales durante momentos de
crisis
1
o eventos en vivo, debern publicar en su pgina
web, en la seccin de banner rotativo, una alerta de crisis o
un enlace para live stream que direccione a la informacin
de la situacin que se est viviendo. Durante esta etapa,
dicho banner (default) deber ser el nico que se presente
en la pgina web gubernamental, deshabilitando los
restantes. Ejemplo: alerta de tsunami, problemas del medio
ambiente, cadenas en vivo, etc.
1 Defnidas por el Ministerio de Coordinacin de Seguridad, a travs del Plan Nacional
de Seguridad Integral.
Ninguna institucin gubernamental podr tener activados
los pop ups en sus sitios web.
5.2 Normas generales de uso ortogrfco
5.2.1 Uso de maysculas en los sitios web
Todas las maysculas siempre se tildan. Ejemplos:
5. Generacin de sitios web
rbitro, bamos, vido, REVOLUCIN, LPIZ, REGIN.
Manual de estilo
El nombre completo de la entidad gubernamental.
Ejemplos:
Los movimientos o partidos polticos, las asambleas,
los congresos o cumbres usan mayscula si integran una
denominacin ofcial. Ejemplos:
Los meses de fechas histricas. Ejemplos:
Las cuatro regiones del pas: Costa, Sierra, Oriente, Insular.
El nombre de la dignidad se escribe con mayscula,
pero no su cargo. Ejemplos:
Las siglas de organismos internacionales se escriben
con mayscula y sin punto entre las letras. Ejemplos:
Presidencia de la Repblica del Ecuador; Ministerio de Agricultura,
Ganadera, Acuacultura y Pesca.
Partido Liberal, Asamblea Nacional del Ecuador, Cumbre del
ALBA.
10 de Agosto de 1809, 24 de Mayo de 1822, 6 de Diciembre de 1534.
presidente Rafael Correa, papa Juan Pablo II, premio nobel
Gabriel Garca Mrquez.
ALBA, OEA, ONU, FIFA.
Manual de estilo
5.2.2 Uso de parntesis y comillas
Los signos de puntuacin deben escribirse siempre
fuera del parntesis. Ejemplo:
Toda cita textual deber ir entre comillas tipogrfcas
( ), y de necesitar abrirlas nuevamente dentro de la cita,
use comillas sencillas ( ).
5.2.3 Nmeros
Todos los nmeros que componen fechas, deben
escribirse sin espacios. Ejemplo:
En cantidades, se diferencia la utilizacin de punto,
comilla y coma. Ejemplo:
El 24 de junio de 2009, Ecuador formaliz su inclusin a la ALBA.
- Decimales se identifcan con coma: Segn datos de la CEPAL,
en las ltimas dos dcadas la tasa
de pobreza en Amrica Latina se redujo de 48,4%
a 31,4% de la poblacin.
- Millares se identifcan con punto: El Estadio Reina
del Cisne de Loja tiene un aforo de 14.594 afcionados.
- Millones se identifcan con comilla: En Ecuador existen
14483.499 habitantes, segn el ltimo censo desarrollado
en el 2010.
El 15 de Enero de 2006, Michelle Bachelet gan las elecciones en
Chile (enfrentando en segunda vuelta a Sebastin Piera), y con
el 53,50% de la preferencia electoral, se convirti en la primera
mujer electa presidenta en la historia del pas (frente al 46,50%
alcanzado por Piera).
Manual de estilo
5.2.4 Moneda
Cuando necesite referirse a cantidades en dlares, utilice la
referencia del pas de origen (US) antes del signo $. Ejemplo:
5.2.5 Idiomas ofciales
Conforme al Art. 2 de la Constitucin, el kichwa y el shuar son
idiomas ofciales de relacin intercultural, por lo que la aplicacin
del Manual, regir en sus usos lingsticos particulares.
5.2.6 Denominacin de imgenes
Las imgenes que se visualicen en los sitios webs
estandarizados, debern ajustarse al proceso de optimizacin
de contenidos SEO (Search Engine Optimization). Este
formato de denominacin, permitir que las imgenes sean
de ms fcil localizacin en los motores de bsqueda, por el
uso estratgico de palabras claves. Las Palabras no deben
poseer maysculas o caracteres especiales y deben estar
separadas por guiones. Ejemplo:
El presupuesto en salud pblica aprobado por la Asamblea
Nacional para el 2012 fue de US $891.4 millones.
Banner: nombre_de_la_institucion_ecuador_descripcion_de_la_
imagen_ciudad_mes_ano
presidencia_ecuador_presidente_rafael_correa_
delgado_guayaquil_febrero_2013.jpg
6.1 Cabecera Header
La cabecera de los sitios web gubernamentales contienen
la logomarca Ecuador ama la vida al lado izquierdo
y la logomarca de cada institucin al lado derecho.
6. Elementos generales de las pginas web
Manual de estilo
Elementos generales
de las pginas web
482 px
303 px
280 px
65 px
Proporcin segn el logo de cada entidad
Manual de estilo
Elementos generales
de las pginas web
6.2 Tipografa
La tipografa que se emplea en las pginas web gubernamentales
es: Familia Tipogrfca Arial. El estilo de letra que se utilizar por
defecto en los contenidos del sitio web es Arial Regular, caso
contrario se especifcar el estilo de letra para los elementos
que as lo requieran.
6.3 Color
La gama de colores de los sitios web gubernamentales es:
Familia Tipogrfca Arial.
00aca2 R: 0 G: 172 B: 162
263692 R: 38 G: 54 B: 146
f58026 R: 245 G: 128 B: 38
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz&
1234567890($%.,!?)
0066cc R: 0 G: 102 B: 204
Naranja: Color representativo de las gobernaciones
Turquesa: Color representativo de Instituciones
Azul Color representativo de Polica Nacional
Azul Cromtica utilizada como fondo de Ttulos de pgina en
Gobernaciones, Instituciones y Polica Nacional
000000 R: 0 G: 0 B: 0
Negro Cromtica utilizada en Contenidos del sitios
Manual de estilo
Elementos generales
de las pginas web
666666 R: 102 G: 102 B: 102
dadada R: 218 G: 218 B: 218
f3eded R: 243 G: 237 B: 237
4c4c4c R: 76 G: 76 B: 76
f0f0f0 R: 240 G: 240 B: 240
cccccc R: 204 G: 204 B: 204
Gris: Cromtica utilizada en footer de sitios web
Gris: Cromtica utilizada scroll bar
Gris: Cromtica utilizada scroll bar
Gris: Cromtica utilizada en tipografa
Gris: Cromtica utilizada en footer de sitios web
Gris: Cromtica utilizada como fondo de ttulo de pgina
y publicidades internas
Blanco
ffffff R: 255 G: 255 B: 255
6.4 Men
El Men de las pginas web gubernamentales contiene
nueve categoras en las que se distribuye toda la informacin
del sitio. Estas son:
Inicio: Es la pgina de inicio del sitio web.
Institucin: Incluye la siguiente informacin institucional:
valores, misin, visin, objetivos, ejes estratgicos,
estructura, autoridades, directorio, entidades adscritas,
webmail e intranet. El nombre de este elemento del Men
cambiar segn la institucin a la que pertenezca la
pgina web. Ejemplo:
Transparencia: Esta pestaa incluye la informacin que la
Ley Orgnica de Transparencia y Acceso a la Informacin
Pblica - LOTAIP, exige sea de acceso pblico.
Turismo: Esta pestaa es especfca de Gobernaciones e
incluye las informacin turstica que cada provincia ofrece
al Ciudadano.
Planifcacin: Constituye el conjunto organizado de
elementos que permiten la interaccin de actores con
el objeto de acceder, recoger, almacenar y transformar
datos en informacin relevante para la planifcacin del
desarrollo y las fnanzas pblicas*
*Cdigo de Planifcacin y Finanzas Pblicas, Art.33 Registro Ofcial
No.306, ao 2010.
Programas / Servicios: Esta categora agrupa
la informacin de todos los programas, servicios,
proyectos, planes, etc, que ejecuta la entidad.
Comunicamos: Esta pestaa incluye las noticias,
eventos, boletines de prensa, vdeo, audio y fotos
de las entidades gubernamentales.
Manual de estilo
Elementos generales
de las pginas web
La Gobernacin,La Institucin.
Manual de estilo
Elementos generales
de las pginas web
Dimensiones: 965 X 36 pixeles.
Color web
Gobernaciones: f58026
Instituciones: 00aca2
Color web de letra: ffffff
Dimensiones: 965 X 36 pixeles.
Color web: 263692
Men Gobernaciones - Instituciones
Men Polica Nacional
Biblioteca: La categora incluye un listado de
documentos descargables: publicaciones, decretos,
ofcios, libros, material pop, presentaciones, etc.
Enlaces: Ruta de acceso a los sistemas pblicos de
mayor inters para el funcionario y el ciudadano.
Contacto: Formulario de contacto a travs del cual
el ciudadano puede enviar mensajes a la institucin.
Manual de estilo
Elementos generales
de las pginas web
6.6 Ttulo de pgina
Dimensiones: 945 X 45 pixeles
Color web de fondo:
Gobernaciones: 0066cc
Instituciones: 0066cc
Polica Nacional: 0066cc
Tamao de letra: 18 puntos
Estilo de letra: negrita
Nmero mximo de caracteres: 90
6.7 Men Lateral
El Men Lateral es un listado de los hipervnculos existentes
dentro de las categoras de los sitios web. Siempre debe
ser usado en las pginas de: Inicio y La Institucin y
eventualmente en Programas / Servicios. Su funcin es
permitir una navegacin ms sencilla para el usuario
y tener acceso directo a cualquier otro sitio dentro de la categora.
Men Lateral Home
- Dimensiones: 283 X 373 pixeles
- Color web de fondo :
- Dimensiones de lnea divisora: 244 x 1 pixeles
- Color web de lnea divisora: ffffff
- Tamao de letra: 13 puntos
- Color web de letra: ffffff
- Nmero mximo de caracteres por men: 35
Ttulo de pgina
Men Lateral
Manual de estilo
Men Lateral La Institucin - Programas / Servicios
- Dimensiones: 273 X 500 (mximo - altura autoajustable) pixeles
- Color web de fondo :
Polica Nacional: 263692
- Dimensiones de lnea divisora: 240 x 1 pixeles
- Color web de lnea divisora: ffffff
- Tamao de letra ttulos: 16 puntos
- Tamao de letra contenido: 12 puntos
- Color web de letra: ffffff
El modelo de Men Lateral para La Institucin, debe
contener los siguientes elementos bsicos. Segn el caso y
necesidad de cada institucin, se pueden aadir ms niveles
de informacin.
Planifcacin Estratgica
- Valores / Misin / Visin
- Objetivos
- Ejes Estrtgicos
- Entidades Adscritas
- Resea Histrica
Estructura
- Organigrama de la Institucin
- Autoridades
- Gobernador
- Hoja de Vida
- Jefe Poltico
- Intendente
- Directorio
Intranet
Webmail
Men Lateral editable
(La Institucin - Programas / Servicios)
Manual de estilo
Elementos generales
de las pginas web
6.8 Ttulo de contenido
Para el ttulo de contenido se deber considerar:
Tamao de letra: 14 puntos
Estilo de letra: negrita
Ttulo
6.9 Scroll bar
Para la barra de scroll se deber considerar:
Dimensiones: 13 pixeles X (largo ajustable al espacio)
Color web: 666666 (fondo) - cccccc (fgura)
Scroll bar
Manual de estilo
Elementos generales
de las pginas web
6.10 Explorador de documentos
El explorador puede ser incluido en el rea de contenidos de
cualquier pgina interna, en la que sea necesario adjuntar archivos
descargables. Para cada nivel el usuario tiene la opcin de ver
o descargar la informacin contenida; a partir del 4to y 5to nivel
el estilo se repetir con la cromtica del 2do y 3ro, manteniendo
el tamao del 3ro. Los niveles pueden incrementarse n nmero
de veces en caso de que sean necesario.
Etiqueta Contenedora de 1er Nivel
- Color web de fondo 1: ffffff
- Color web de fondo 2: e6e6e6
- Color web de letra: 00000
Etiqueta Contenedora de 2do Nivel
- Color web de fondo 1: c4c2c2
- Color web de fodno 2: dadada
- Color web letra: 00000
Etiqueta Contenedora de 3er Nivel
- Color web de fondo 1: eae6e6
- Color web de fondo 2: e0dddd
- Color web letra: 00000
Explorador de documentos
Manual de estilo
Elementos generales
de las pginas web
Mdulo de accesibilidad
6.11 Mdulo de accesibilidad
Este mdulo est presente en todas las pginas de los sitios
web gubernamentales, con el objetivo de que los ciudadanos
puedan cambiar el tamao de letra para la lectura.
6.12 Pie Footer
6.12.1 Estructura
El pie de las pginas web institucionales se estructura de la
siguiente manera:
Se encabeza con la logomarca de Presidencia centrada,
con una barra horizontal a cada lado.
Lista de todos los links a los sitios web gubernamentales
Pie - Footer
Logomarca Presidencia
Manual de estilo
Elementos generales
de las pginas web
Al fnal del pie en una franja horizontal se incluir:
Logo de la institucin.
Marca Pas Ecuador ama la vida.
Un bloque de texto con la direccin, ubicacin geogrfca
y un nmero telefnico de la institucin. Tambin se
incluir dos links con el contacto y mapa de sitio (link).
Pie - Footer
6.12.2 Especifcaciones
Dimensiones logomarca Presidencia: 192 X 152
pixeles
Dimensiones logomarca Institucin: 160 X 50 pixeles
(proporcin segn el caso)
Dimensiones logomarca Ecuador ama la vida:
243 X 65 pixeles
Dimensiones barras laterales: 329 X 1 pixeles
Dimensiones bloque de los links institucionales:
960 X 265 pixeles
Dimensiones bloque pie: 960 X 92 pixeles
Dimensiones mdulo completo: 960 X 352 pixeles
Color web barras laterales: 646464
Color web de links Instituciones: dadada
Color web de pie: f4f4f4
Tamao de letra ttulos: 14 puntos
Tamao de letra contenidos: 11 puntos
Manual de estilo
Los sitios web de las entidades gubernamentales contarn
con una plantilla de diagramacin estandarizada, que tiene
como objetivo homologar la informacin que se presenta
a la ciudadana.
El diseo que se muestra como ejemplo es el de Gobernaciones. Si
bien el formato estandariza la informacin, tambin se acopla
a las particularidades que cada Institucin posee.
7.1 Plantilla de diagramacin
7. Pgina de inicio Home
Pgina de inicio Home
Formato estndar de plantilla de diagramacin Gobernaciones
e Instituciones
Manual de estilo
Formato estndar de plantilla de diagramacin
Polica Nacional
Manual de estilo
Plantilla de diagramacin Gobernaciones - Instituciones
Dimensiones de la pgina: 1313 X 985 pixeles
Gobernaciones e Instituciones
A
c
c
e
s
i
b
i
l
i
d
a
d
Header
Men
Banner
Footer
Contenido
Manual de estilo
Plantilla de diagramacin - Polica Nacional
Polca Nacional
Header
A
c
c
e
s
i
b
i
l
i
d
a
d
Men
Banner
Footer
Contenido
Manual de estilo
7.2 Estructura Web
La pgina de inicio est organizada por sectores, los cuales contienen mdulos
especfcos para los diferentes contenidos.
A continuacin se lista la estructura de la pgina de inicio, agrupada en categoras
y sub-categoras:
Cabecera - Header
- Logomarca Ecuador ama la vida
- Logomarca Institucional
Men (nueve categoras)
- Inicio
- Institucin
- Transparencia
- Programas / Servicios
- Turismo (Gobernaciones)
- Planifcacin (Instituciones)
- Comunicamos
- Biblioteca
- Enlaces
- Contacto
Banner
- Men Lateral
- Banner Rotativo
- Frase y redes sociales
Contenido
- Mdulo Tu Gobierno
- Ttulo / Buscador
- Vdeo
- Foto
- Banner Presidencia
- Publicidad
Mdulo Institucin
- Publicidad
- Noticias
- Programas / Servicios
- Marcas
Pie - Footer
- Logomarca Presidencia
- Links Instituciones
- Logomarca Institucin
- Logomarca Ecuador ama la vida
- Bloque de texto: direccin, locacin, telfono,
contacto (link), mapa de sitio (link)
Mdulo de Accesibilidad
- Fuente
Manual de estilo
7.3 Cabecera - Header
Para el elemento Cabecera, aplica el ya descrito en el apartado
de Elementos generales de las pginas web (apartado 6.1).
7.4 Men
Para el elemento Men, aplica el ya descrito en el apartado
de Elementos generales de las pginas web (apartado 6.4).
7.5 Banner
7.5.1 Men Lateral
Para el elemento Men Lateral, aplica el ya descrito en
el apartado de Elementos generales de las pginas web
(apartado 6.7).
7.5.2 Banner Rotativo
El Banner Rotativo superior es el mdulo principal en los sitios
web gubernamentales, por la informacin que se destaca y
por su tamao. Una imagen llamativa ser utilizada como
la identidad primaria, as los usuarios sabrn dnde estn
navegando y se generar el acceso directo a los sitios web.
Las imgenes del Banner Rotativo deben enlazarse a
cualquier direccin que se encuentre dentro o fuera del sitio.
Resolucin mnima: 72 dpi
Banner Rotativo
Manual de estilo
7.5.3 Frase
Esta ser una frase especfca, que se podr modifcar
segn lo decida la administracin de cada sitio web. Cada
frase debe tener relacin con la imagen y expresar el sentido
institucional. Bajo ningn concepto se deber hacer alusin
al evento al cual pertenece la fotografa. Ejemplo:
Dimensiones : 297 X 120 pixeles
Color web de fondo: 4b4b4a
Nmero mximo de caracteres: 100
Tamao de letra: 12 puntos.
7.5.4 Redes Sociales
En la barra de Redes Sociales se muestran cuatro conos/
links: Twitter, Facebook, YouTube y Flickr.
- Dimensiones: 26 X 26 pixeles (cada cono)
Frase y Redes Sociales
- Marcha del da del trabajo
- Marcha del da de la mujer
- Feria del libro de Quito
Manual de estilo
Mdulo de la Secretara de la Administracin
Pblica y Secretara de Comunicacin
7.6 Contenido
El contenido de los sitios web gubernamentales consta
de tres mdulos principales. El mdulo Tu Gobierno
correspondiente a la Secretara Nacional de Comunicacin
- SECOM, el Banner Presidencia de la Secretara
Nacional de la Administracin Pblica SNAP,
y el correspondiente a los contenidos de la institucin.
Color web fondo: efefef
Los elementos que componen el mdulo SECOM son:
Ttulo / Buscador
- Dimensiones de ttulo: 148 X 34 pixeles
- Dimensiones lnea de ttulo: 350 X 2 pixeles
- Color web de ttulo y lnea de ttulo: f58026
- Dimensiones de buscador: 135 X 25 pixeles
Vdeo
- Dimensiones de mdulo: 226 X 155 pixeles
- Dimensiones de vdeo: 210 X 130 pixeles
- Color web de fondo: ffffff
- Nmero mximo de caracteres: 65 caracteres
Foto
- Dimensiones de foto: 210 X 130 pixeles
- Color web de fondo: ffffff
- Nmero mximo de caracteres: 65 caracteres.
Manual de estilo
Mdulo Tu Gobierno
7.6.1 Mdulo Tu Gobierno
Est presente en todos los sitios web gubernamentales.
Es el canal de comunicacin ofcial. En l se encuentran dos
espacios para ubicar vdeos o fotografas y un buscador.
Color web de fondo: efefef
Manual de estilo
Banner Presidencia
7.6.3 Mdulo Institucin
Es especfco para la informacin de cada institucin. Consta
de un banner publicitario, un sub-mdulo para noticias
destacadas y un mdulo para listar programas y servicios.
Color web de fondo: ffffff
7.6.2 Banner Presidencia
Tiene uno de los tres mdulos publicitarios que contiene
el home page.
Color web de fondo: efefef
Resolucin mnima: 72 dpi
Mdulo Institucin
Manual de estilo
En este mdulo se presenta tres noticias, la ltima que se
resalta con acompaamiento de una fotografa.
- Dimensionesde ttulo: 319 X 35 pixeles
- Dimensiones de lnea de ttulo: 285 X 2 pixeles
- Color web de ttulo y lnea de ttulo:
Polica Nacional: 263692
- Tamao de letra ttulo: 18 puntos
- Dimensiones de imagen noticia: 203 X 153 pixeles
- Resolucin mnima de imagen noticia: 72 dpi
- Dimensiones de caja de texto noticia: 278 X 157 pixeles
- Nmero de palabras: 20 palabras
El formato de texto de cada noticia es:
- Tamao de letra de ttulo noticias resaltada: 20 puntos
- Estilo de letra de ttulo noticia resaltada: negrita
- Tamao de letra de texto noticia resaltada: 12 puntos
- Tamao de letra de texto noticia: 14 puntos
Los elementos que componen el mdulo institucin son:
Publicidad
Dos banners ubicados uno al inicio y otro al fnal del mdulo.
- Resolucin mnima: 72 dpi
Noticias
El ttulo del mdulo noticias es Noticias Gobernacin -
Institucin, donde la palabra Institucin ser reemplazada por
el nombre especfco de la actividad principal del ministerio o
secretara. Ejemplo:
Noticias Gobernacin del Guayas
Manual de estilo
- Tamao de letra de fecha: 14 puntos
- Estilo de letra de fecha: negrita
- Color de letra de fecha: 263692
- Color de letra de hora: acacac
Programas / Servicios
Contiene un listado automtico de los programas y
servicios de la institucin. Estos nombres son enlaces
para ir a los programas o servicios especfcos.
- Dimensiones de ttulo: 148 X 28 pixeles
- Dimensiones lnea de ttulo: 343 X 2 pixeles
- Color web de ttulo y lnea de ttulo:
Gobernaciones: 0066cc
Instituciones: 616161
Polica Nacional: 0f6cb6
Mdulo Marcas
Contiene seis logomarcas vinculados a los sistemas ms
relevantes con los que mantiene relacin la institucin.
- Dimensiones de logomarca: 99 X 44 pixeles
- Color web de fondo: efefef
Mdulo Marcas
Manual de estilo
Esta seccin defne el tipo de entidad a la que corresponde
el sitio web, sea Secretara, Ministerio Coordinador
o Ministerio en lnea.
La seccin lista los siguientes contenidos en el Men Lateral:
Planifcacin Estratgica
- Valores / Misin / Visin
- Objetivos
- Ejes Estratgicos
- Entidades Adscritas
- Resea Histrica
Estructura
- Organigrama de la institucin
- Autoridades
- Gobernador
- Hoja de Vida
- Jefe Poltico
- Intendente
- Directorio
Intranet
Webmail
nicamente las categoras Planifcacin Estratgica y
Estructura despliegan contenido en la pgina. Intranet y
Webmail poseen enlaces externos.
Los enlaces de Intranet dependen de los sistemas que
maneje la institucin.
8. La Institucin
La Institucin
Manual de estilo
Manual de estilo
La Institucin
La Institucin
Manual de estilo
La Institucin
Imagen
- Dimensiones : 390 X 230 pixeles
Encabezado y pie de foto
El pie de foto, segn el caso, puede tener 2 o 3 lneas de
texto, alineando el ltimo rengln a la imagen.
- Encabezado
- Nmero mximo de caracteres: 96
- Estilo de letra: cursiva
- Pie de Foto
- Nmero mximo de caracteres: 28
- Estilo de letra: cursiva
Texto
No existe lmite de caracteres en el texto informativo, la
pgina crece segn la extensin del contenido.
- Tamao de letra ttulo y subttulo: 14 puntos
- Estilo de letra de ttulo y subttulo: negrita
Imagen / encabezado y pie de foto
Manual de estilo
Manual de estilo
La Institucin
Manual de estilo
Publicidad doble
Texto
Publicidad
Cuenta con un mdulo publicitario que incluye dos banners.
- Publicidad doble
- Dimensiones : 260 X 165 pixeles (cada una)
- Resolucin mnima: 72 dpi
Manual de estilo
8.1 Estructura
Organigrama
Es la representacin grfca de la estructura de la entidad.
Visor
Es la vista que se genera al agrandar
la imagen. Todas las imgenes que se agranden
al hacer clic sobre ellas, se abrirn en la misma ventana
con un efecto de visualizacin.
- Color web de fondo: 000000
- Opacidad de fondo: 80%
- Color web de margen: dadada
- Espacio de margen: 30 pixeles
Directorio
Este men es un enlace a un visualizador
de archivos PDF externo.
Entidades adscritas
Mdulo que detalla la informacin pertinente a las entidades
anexas a la institucin, listadas a doble columna.
- Tamao de letra titulares: 15 puntos
- Dimensiones logo de la entidad adscrita: proporcional
La Institucin
8.2 Intranet
Se trata del mdulo que contiene un listado de links de los
sistemas de informacin interna de la entidad gubernamental,
con acceso restringido.
8.3 Webmail
El enlace direcciona al usuario a un servicio de correo interno.
Manual de estilo
Manual de estilo
Organigrama
Entidades adscritas
La Institucin
Manual de estilo
Manual de estilo
Esta pestaa incluye la informacin que la Ley Orgnica
de Transparencia y Acceso a la Informacin Pblica (LOTAIP)
exige sea de dominio pblico. El mdulo se presenta como
un listado con subniveles de informacin, que permiten la
descarga o visualizacin de archivos.
9. Transparencia
Transparencia
Transparencia
Manual de estilo
Manual de estilo
La portada de la seccin Programas / Servicios muestra
un contenido a manera de resumen de cada programa que
maneja la institucin. Esta informacin est diagramada con
una imagen de cabecera seguida del rea de texto.
El men lateral muestra un listado de todos los programas
y servicios que maneja la institucin.
Cada categora se despliega en la seccin de contenido de la
misma forma que en la seccin La Institucin.
10. Programas / Servicios
Programas / Servicios
Portada Programas / Servicios
Contenidos Programas / Servicios
Manual de estilo
Manual de estilo
Planifcacin
SNI
Link externo al Sistema Nacional de Planifcacin SNI.
11. Planifcacin
Manual de estilo
12. Comunicamos
Est organizada en cinco secciones; dependiendo del contenido
del sitio web, algunas pueden ser excluidas o personalizadas.
A continuacin se lista la estructura estndar de la portada:
Contenido
- Noticias: dos noticias actualizadas (imagen / ttulo noticia), en el
espacio restante se cargarn las noticias correspondientes (ttulo
noticia / fecha / hora).
- Boletn de Prensa: listado de boletines de prensa en pdf.
- Fotos: dos fotos representativas (imagen / pie de foto), enlazado
con la cuenta institucional de Flickr.
- Vdeo: dos vdeos importados de YouTube.
- Eventos: dos eventos destacados (imagen / nombre evento).
Comunicamos
Manual de estilo
Comunicamos
Manual de estilo
Comunicamos
Noticias
12.1 Noticias
La accin de Noticias clasifca la informacin por niveles.
En el primer nivel est la portada de Noticias, donde
se muestran las cuatro noticias ms recientes acompaadas
de una imagen, un mdulo donde se listan los titulares de la
noticias organizadas cronolgicamente, un mdulo con las
noticias destacadas y un mdulo con las noticias ms ledas.
Manual de estilo
Comunicamos
Noticia Especfca
Noticia especfca
El segundo nivel nos muestra el contenido de la noticia
especfca con un titular, barra de redes sociales para
compartir el contenido e conos para administrar acciones
de impresin y envo de correo electrnico, una imagen
y un mdulo para comentarios DISQUS.
Adems esta pgina se acompaa de otros elementos en
una barra lateral: noticias destacadas, ltimas noticias, y
mdulo de Twitter.
Manual de estilo
Manual de estilo
Comunicamos
Caso especfco noticias categorizados
Caso especfco
Existe la posibilidad de que la portada de Noticias
necesite de una organizacin por categoras, en este
caso se utilizar el siguiente esquema:
Manual de estilo
Esta seccin contiene un listado de diversos documentos
descargables, entre los que aparecen publicaciones,
decretos, ofcios, libros, presentaciones, etc. La informacin
se encuentra numerada como gua de lectura para el usuario.
Etiqueta contenedora:
- Color web de fondo 1: eae6e6
- Color web de fondo 2: f9f9f9
Botones
- Botn ver: 10 puntos
- Botn descarga: 10 puntos
- Dimensin de cono: 15 x 17 pixeles
13. Biblioteca
Biblioteca
Biblioteca
Manual de estilo
Manual de estilo
Seccin destinada a los ciudadanos y funcionarios del
servicio pblico, donde podrn ingresar de forma directa a
los sistemas informticos con los que se maneja el gobierno
nacional en sus distintas reas. Los links que se despliegan
en el submen Enlaces, redireccionan a pginas en donde
se localizan los sistemas informticos, que se enumeran a
continuacin:
Compras Pblicas
- URL: www.compraspublicas.gob.ec
Quipux Sistema de Gestin Documental
- URL: http://www.gestiondocumental.gob.ec/
Centro de Gestin Gubernamental
- URL: www.sigob.gob.ec/
Gobierno Por Resultados
- URL: http://gpr.informatica.gob.ec
Portal de Trmites Ciudadanos
- URL: http://www.tramitesciudadanos.gob.ec
Sistema de Solicitud de Viajes al Exterior
- http://viajes.informatica.gob.ec
14. Enlaces
Enlaces
Enlaces
Manual de estilo
Este formulario permite que el ciudadano haga un acercamiento
directo con la entidad a travs de un mensaje personalizado.
Existen dos posibilidades para la confguracin del formulario:
para una o para varias localidades de contacto.
Texto introductorio: es el texto estandarizado que presenta
a la seccin.
Llena tus datos y djanos saber tus dudas, comentarios y
sugerencias. De inmediato recibirs nuestra respuesta a tu
solicitud.
La Institucin puede incluir el nmero de direcciones que sean
necesarias.
15. Contacto
Contacto
Contacto
Manual de estilo
Manual de estilo
Esta pgina es de uso especfco, segn los requerimientos
de cada institucin. La estructura de contenido muestra
un calendario comprimido y un listado de detalles de las
actividades ordenado cronolgicamente. Se acompaa a la
informacin de la pgina con la publicidad doble utilizada en
la seccin La Institucin.
16. Agenda
Extras
Agenda
Manual de estilo
Manual de estilo
Extras
Es la funcin de consulta sobre cualquier requerimiento
que el ciudadano precise del sitio web institucional. El campo
de bsqueda aparece en la pgina de inicio y en las interiores.
17. Bsqueda
Bsqueda
Manual de estilo
Manual de estilo
Esta pgina est diseada para mostrar un listado organizado
de la estructura del sitio web.
17. Mapa de sitio
Manual de estilo
Mapa de Sitio
Extras
Manual de estilo
Banner: Espacio de contenido grfco que permite hacer
pblica una informacin resaltando un mensaje.
Footer (pie): rea esttica que se encuentra en la zona inferior
de un sitio web.
Header (cabecera): rea esttica que se encuentra en la zona
superior de un sitio web.
Intranet: Red de sistemas de informacin privados, que
son utilizados internamente por lo funcionarios de una
organizacin.
Link: Enlace de un sitio web que se encuentra vinculado con
nueva informacin. Direcciona al usuario a otra pgina.
Logomarca: Elemento grfco conformado por un nombre,
una imagen y la promesa, que representan la identidad
de una institucin.
Pxel: Elemento unitario ms pequeo 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 imgenes que se intercalan
automticamente cada determinado tiempo o a travs de un
indicador, con la intencin de resaltar el mensaje institucional
de cada sitio web.
URLs: Direccin que permite acceder a un archivo, sitio
o recurso alojado en la web.
18. Glosario
Glosario
Manual de estilo
Manual de estilo
Manual de estilo
Crditos
19. Crditos
Presidencia de la Repblica del Ecuador
Garca Moreno N10-43 entre Chile y Espejo
Quito Ecuador
Telf.: (593-2) 3827000 / (593-2) 2584-000
http://www.presidencia.gob.ec
Derechos Reservados
Secretara Nacional de la Administracin Pblica
Primera Edicin: Agosto de 2012
Segunda Edicin: Marzo 2013

Estilo Sitios Web PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Estilo Sitios Web PDF

Încărcat de

Drepturi de autor:

Formate disponibile

MANUAL DE ESTILO

S-ar putea să vă placă și