manual del uso de las plantillas para mantener el estilo gobierno en ...

MANUAL DEL USO DE LAS PLANTILLAS PARA MANTENER 

EL ESTILO 

GOBIERNO EN LINEA TERRITORIAL- GELT 

FASE TRANSACCIONAL 

Área de Desarrollo 

Programa Agenda de Conectividad 

Estrategia de Gobierno en línea 

© República de Colombia - Derechos Reservados 

Bogotá, DC., Octubre de 2009

MANUAL USO DE LAS PLANTILLAS 

Título: 

Fecha 

elaboración 

aaaa-mm-dd: 

Sumario: 

Palabras 

Claves: 

FORMATO PRELIMINAR AL DOCUMENTO 

MANUAL DE USO DE LAS PLANTILLAS PARA MANTENER EL ESTILO - 

GOBIERNO EN LINEA TERRITORIAL – GELT FASE TRANSACCIONAL 

PROGRAMA AGENDA DE CONECTIVIDAD 

ESTRATEGIA DE GOBIERNO EN LÍNEA 

2009–10-22 

El manual del uso de las plantillas es una guía para mantener los nuevos estilos 

dentro del sitio de acuerdo a las 10 plantillas aceptadas por el PadC. 

Diseño, Plantilla, W3C 

Formato: .doc Lenguaje: Español 

Dependencia: 

Ministerio de Tecnologías de la información y las Comunicaciones – Programa 

Agenda de Conectividad (PAdC)– Estrategia de Gobierno en Línea 

Dirección de Desarrollo 

Código: Versión: 1.3 Estado: Generado 

Categoría: 

Autor (es): 

Heinsohn Software House 

Revisó: 

Aprobó: 

Eivi Macias 

Gerente de Proyecto 

Heinsohn Software House 

Lina María Cruz 

Consultora 

Área de Articulación y Gestión 

Programa Gobierno en línea 

Diana Carolina Martínez 

Líder de Solución 

Gobierno en línea - Programa Agenda 

de Conectividad – PAdC 

Claudia Jiménez 

Consultor Técnico 

REDCOM 

Johanna Pimiento 

Directora Dirección de Desarrollo 

Programa Agenda de Conectividad 

Olga Lucía Sabogal 

Director de Consultoría 

REDCOM 

Firmas: 

Pág. 2 de 32

ÁREA DE DESARROLLO 



Información 

Adicional: 

Ubicación: 

http://gforge5.heinsohn.com.co/gf/project/gelt_t/ docman /03 Fase ejecución/ 03 

implemetación/ 04 Manuales de operación/ 02 Técnico/GLFS-HSH-GELT-Sub1- 

ManUsuariov1.3.doc 



CONTROL DE CAMBIOS 

VERSIÓN FECHA No. SOLICITUD RESPONSABLE DESCRIPCIÓN 

1.0 2009-10-22 No aplica Heinsohn Software House S.A. Elaboración del manual de usuario. 

1.1 2009-11-04 No aplica Heinsohn Software House S.A. Adicionar las observaciones realizadas. 

1.2 2009-11-10 No aplica Heinsohn Software House S.A. Incluir roles y el uso de las plantillas. 

1.3 2009-11-18 No aplica Heinsohn Software House S.A. Explicar las gráficas de las plantillas. 





TABLA DE CONTENIDO 

DERECHOS DE AUTOR 7 

CRÉDITOS 8 

1. AUDIENCIA 9 

2. INTRODUCCIÓN 10 

3. ROLES MANEJADOS EN APLICACIONES DE ACCIÓN 11 

4. ACTUALIZACIÓN DE INTERNET EXPLORER 12 

5. GENERALIDADES DEL DISEÑO 14 

6. USO DE LAS PLANTILLAS 15 

7. ESTANDAR PLANTILLA 1 21 










17. TERMINOLOGÍA 31 



LISTA DE TABLAS Y FIGURAS 

FIGURA NO. 1. DESCARGAR INTERNET EXPLORER .......................................... 12 

FIGURA NO. 2. DESCARGAR INTERNET EXPLORER .......................................... 13 

FIGURA NO. 3. USO DE PLANTILLAS ................................................................ 14 

FIGURA NO. 4. INGRESO AL ADMINISTRADOR DE CONTENIDO ...................... 15 

FIGURA NO. 5. ADMINISTRADOR DE CONTENIDO ........................................... 16 

FIGURA NO. 6. ITEM DE LA CONFIGURACIÓN .................................................. 17 

FIGURA NO. 7. SELECCIÓN DE PLANTILLA ....................................................... 18 

FIGURA NO. 8. SITIO DEL MUNICIPIO ............................................................. 19 

FIGURA NO. 9A. CONFIGURACIÓN BÁSICA MOZILLA ...................................... 20 

FIGURA NO. 9B. CONFIGURACIÓN BÁSICA INTERNET EXPLORER. ................. 20 

FIGURA NO.10 PLANTILLA 1 ............................................................................. 21 









FIGURA NO.19 PLANTILLA 10 ........................................................................... 30 





DERECHOS DE AUTOR 

A 

menos que se indique de forma contraria, el copyright (traducido literalmente como 

derecho de copia y que, por lo general, comprende la parte patrimonial de los 

derechos de autor) del texto incluido en este documento es del Gobierno de la 

República de Colombia. Se puede reproducir gratuitamente en cualquier formato o 

medio sin requerir un permiso expreso para ello, bajo las siguientes condiciones: 

• El texto particular no se ha indicado como excluido y por lo tanto no puede ser 

copiado o distribuido. 

• La copia no se hace con el fin de ser distribuida comercialmente. 

• Los materiales se deben reproducir exactamente y no se deben utilizar en un 

contexto engañoso. 

• Las copias serán acompañadas por las palabras "copiado/distribuido con permiso 

de la República de Colombia. Todos los derechos reservados”. 

• El título del documento debe ser incluido al ser reproducido como parte de otra 

publicación o servicio. 

• Si se desea copiar o distribuir el documento con otros propósitos, debe solicitar el 

permiso entrando en contacto con el Programa Agenda de Conectividad del 

Ministerio de Tecnologías de la Información y las Comunicaciones de la República 

de Colombia. 



CRÉDITOS 

E 

l manual del uso de las plantillas para mantener el estilo, está basado en el Sistema 

de Calidad de Heinsohn Software House el cual se encuentra completamente 

definido en el esquema de la norma ISO 9001 y complementado con las áreas de 

proceso de nivel 2 y 3 del modelo CMMI, además considera el alcance del requerimiento 

definido por el Programa Agenda de Conectividad. 





1. AUDIENCIA 

Este manual contiene el diseño de cada una de las plantillas implementadas para el 

proyecto GOBIERNO EN LINEA TERRITORIAL – FASE TRANSACCIONAL. 

Este documento está dirigido a: 

• Autores, editores, administradores responsables de alimentar el contenido de las 

plantillas del sitio Web. 

• El equipo técnico del proyecto. 

• Gerente y Líder técnico del proyecto, por parte de HSH 

• En general a cualquier otra persona interesada en conocer los diseños que se 

implementaron en las plantillas. 



2. INTRODUCCIÓN 

Este manual es la guía para conocer los estilos de las plantillas establecidas por el 

programa de Gobierno en Línea donde el usuario tiene la posibilidad de escoger la 

más adecuada para el municipio. 

El programa Agenda de Conectividad, coloca a disposición del usuario 10 plantillas que 

varían en la presentación, las cuales se ilustran en este documento con las características 

específicas a tener en cuenta en el momento de ingresar la información al sitio como las 

dimensiones máximas de los logos, la foto del municipio, el tamaño del escudo entre otras 

y así evitar que se altere la plantilla. 

El alcance de este documento consiste en dar a conocer el nuevo diseño de las 10 

plantillas, se especifica los tamaños de las imágenes básicas del sitio, ya que son los 

únicos campos que el usuario puede alterar en el diseño en sí de las plantillas. Las demás 

características no son modificables directamente por el administrador de contenidos, autor 

o editor como la fuente, tamaño y color de la letra. 

Se aclara que ya existen manuales de usuario a nivel de administrador (1-Version2009- 

Manual-Administrador.pdf), de autor y editor (4-Version2009-Manual-Autores- 

Editores.pdf,), además un documento de recomendaciones para escribir en internet 

llamado 6-Version2009-Recomendaciones-para-escribir-en-internet.pdf. que fueron 

entregados por el programa de Agenda de conectividad. 





3. ROLES MANEJADOS EN APLICACIONES DE ACCIÓN 

A continuación, se indica los tres tipos de usuarios de las Aplicaciones de Acción que 

utiliza las plantillas de GELT Municipio. 

Autor. Es el rol que digita la información a ser publicada en la página de Internet del 

municipio. El autor tiene permiso para incluir información en la base de datos que 

alimenta la página y para modificar o suprimir los artículos escritos por él mismo. La 

información digitada por los autores no queda publicada hasta no recibir autorización de 

un editor. 

Editor. Es el rol responsable de la seguridad, calidad y veracidad de la información que 

queda publicada en la página de Internet del municipio. El editor puede publicar, editar, 

aprobar y suprimir cualquier artículo o ítem del sitio. 

Adminsitrador. Ingeniero de sistemas o técnico en sistemas, con conocimientos en 

páginas de Internet y lenguaje HTML. El administrador se encarga de instalar el software 

y colocar en funcionamiento la página de internet del municipio, crear o modificar la 

configuración del sitio utilizando las Aplicaciones de Acción, capacitar en el uso de la 

herramienta a los autores y editores y solucionar los problemas técnicos que se presenten 

en la alcaldía para el uso de la página de Internet, además es el encargado de asignar las 

claves a los autores y editores. 



4. ACTUALIZACIÓN DE INTERNET EXPLORER 

Las plantillas se desarrollaron para Internet Explorer versión 7 o superior aprovechando 

las bondades que manejan, por lo tanto, deben ser vistas desde esta versión. A 

continuación se indicará los pasos a seguir para realizar la actualización de la herramienta 

de Internet Explorer: 

Si el equipo no indica automáticamente que existe una nueva versión o actualización de 

internet explorer, puede ingresar a la url: 

http://www.microsoft.com/latam/windows/internet-explorer/" donde le mostrará la siguiente 

pantalla: 

Figura No. 1. Descargar Internet Explorer 





Dando click en el ícono Descargar ahora, se actualiza el internet, también puede 

encontrar en este sitio información sobre las nuevas características y ventajas 

entre otras cosas. 

En el caso de tener el navegador Mozilla, se ingresa a la página http://www.mozillahispano.org/documentacion/Descargar_e_instalar_Firefox 

para la actualización. En este 

sitio se indica los pasos a seguir para la instalación. 

Figura No. 2. Descargar Internet Explorer 



5. GENERALIDADES DEL DISEÑO 

El diseño gráfico de las siguientes interfaces se desarrolló según las necesidades de la 

estrategia de Gobierno en Línea - GELT para mejorar la calidad visual y la navegación del 

sitio web de los municipios. 

Se toman como base las 10 plantillas entregadas por el programa de Agenda de 

Conectividad. A cada plantilla se le aplico un rediseño para hacerlas más descansadas y 

atractivas visualmente, para lograrlo, se modifica los colores de fondo del sitio 

colocándolos más suaves, además, el tamaño y color de la letra se cambia para que 

tenga una jerarquía entre los contenidos, al glosario y al buscador se le cambia la letra, 

fondo, ícono de presentación entre otras características. 

El usuario editor, autor y administrador no podrán modificar las propiedades o 

características de las plantillas como el tamaño, fuente, color, estilo de la letra, 

justificación de los párrafos, ya que éstas son colocadas directamente por los archivos 

CSS, es decir, que el usuario solo podrá ingresar la información como noticias, eventos y 

en sí el contenido a desplegar y la plantilla se encarga de la parte visual del texto. 

Cada una de las plantillas tiene un estilo diferente de mostrar el sitio, estos difieren en los 

tamaños de las imágenes como la foto y el escudo del municipio, por lo tanto, al 

seleccionar la plantilla, se debe tener en cuenta que las características entre una plantilla 

y otra pueden alterar el despliegue. 

Desde el capítulo 6 de este documento, se presenta cada una de las plantillas con las 

dimensiones que se deben tener en cuenta como por ejemplo el tamaño de la foto del 

municipio, el tamaño del escudo del municipio. 

Dentro del gráfico se tiene un cuadro amarillo indicando el nombre del objeto, por ejemplo, 

Escudo. Luego indica el ancho y el alto que se debe tener en cuenta al subir la imagen 

en pixeles. La flecha apunta dentro de la plantilla al objeto al que se refiere. 

Figura No. 3. Uso de Plantillas 

. 





6. USO DE LAS PLANTILLAS 

Se indica la forma de ingresar a las diferentes plantillas para que el usuario pueda elegir 

la que más se ajuste a las necesidades del municipio. 

El encargado de cargar la plantilla que se va a utilizar en el sitio, es el administrador. Para 

realizar esta configuración, debe seguir los siguientes pasos: 

1. Ingrese a la url: http://localhost/apc-aa/admin/ 

2. Ingrese al administrador de contenidos con el usuario y contraseña del administrador 

en la siguiente pantalla. 

Figura No. 4. Ingreso al administrador de contenido 



3. Luego de colocar el usuario y la contraseña, sale la siguiente pantalla: 

Figura No. 5. Administrador de contenido 

4. En la parte superior derecha, debajo del botón salir, se selecciona el canal 

Configuración como se muestra en la figura anterior. 

5. Seleccione el item Municipios donde lo llevará a la siguiente pantalla: 





Figura No. 6. Item de la Configuración 

6. En la tercera sección llamada Configuración apariencia, ubique el campo llamado 

Hoja de estilos y seleccione la plantilla que desea ver en el sitio. 



Figura No. 7. Selección de plantilla 

7. Para confirmar el cambio, de click en el botón Actualizar. 

8. Ingrese al sitio para ver la nueva plantilla, se debe ingresar de la siguiente manera: 

http://localhost/municipio/sitio.shtml. 





Figura No. 8. Sitio del municipio 

Nota: 

Para no alterar la presentación del sitio, se debe visualizar con Internet Explorer versiones 

7, 8 o superior o Firefox versión 2.0 o superior; además la configuración del explorador 

debe ser la básica, es decir, no debe tener alteraciones o cambios en los tamaños de 

fuente tipográfica. A continuación se describe el procedimiento para visualizar esta 

configuración. 



Figura No. 9a. Configuración básica Mozilla 

Figura No. 9b. Configuración básica Internet Explorer. 





7. ESTANDAR PLANTILLA 1 

Con esta plantilla se busca darle un nuevo aire más fresco y moderno manteniendo la 

estructura y los estándares establecidos por GELT. Tamaño : 827 * 1282 px incluido el 

background para la plantilla 1: 

Grafica 

Municipio: 

Alto: 126 px 

Ancho : 192 px 

Escudo: 

Alto: 93 px 

Ancho : 90 px 

Imagen 

Anuncios: 

Alto: 150 px 


Imagenes 

Logos: 

Alto: 100 px 


Imagen Centro: 

Alto: 126 px 



Noticias: 

Alto: 150 px 

Ancho: 100 px 

Imágenes 

Logos: 

Alto: 100 px 


Contáctenos: 

Alto: 50 px 

Ancho: Ajustable. 

Imágenes 

Logos: 

Alto: 51 px 

Ancho : 88 px 


Alto: 60 px 


Figura No.10 Plantilla 1 




Diseño que le da un corte más suave mejorando las curvas sin dejar a un lado la 

estructura y el esquema de GELT. Tamaño : 812 * 1500 px incluido el background: 

Grafica Municipio: 

Alto: 114 px 


Escudo: 

Alto: 93 px 

Ancho: 90 px 

Imagen Anuncios: 

Alto: 150 px 


Imagen Noticias: 

Alto: 150 px 


Imagenes Logos: 

Alto: 100 px 



Imágenes Logos: 

Alto: 100 px 


Alto: 126 px 



Alto: 50 px 




Alto: 60 px 

Ancho : Ajustable. 

Alto: 51 px 

Ancho : 88 px 







Esquema estándar GELT con un diseño más fresco. Tamaño : 827 * 1282 px incluido el 

background: 

Grafica 

Municipio: 

Alto: 126 px 


Escudo: 

Alto: 93 px 

Ancho : 90 px 


Anuncios: 

Alto: 150 px 




Alto: 150 px 


Alto: 100 px 




Alto: 126 px 


Alto: 100 px 



Alto: 50 px 



Alto: 51 px 

Ancho : 88 px 


Alto: 60 px 






Diseño que maneja las estructuras para mantener la unidad gráfica, destacando los 

colores patrios en el encabezado. Tamaño: 800 * 1300 px incluido el background: 

Escudo: 

Alto: 117 px 

Ancho : 92 px 


Alto: 150 px 



Alto: 127 px 



Alto: 150 px 



Alto: 100 px 




Alto: 100 px 


Alto: 126 px 



Alto: 51 px 

Ancho : 88 px 


Alto: 50 px 



Alto: 60 px 








Diseño con las estructuras para mantener la unidad gráfica destacando los colores patrios 

en el encabezado. Tamaño : 800 * 1300 px incluido el background: 

Escudo: 

Alto: 93 px 

Ancho : 90 px 


Alto: 150 px 



Alto: 127 px 



Alto: 150 px 



Alto: 100 px 




Alto: 100 px 


Alto: 126 px 



Alto: 51 px 

Ancho : 88 px 


Alto: 50 px 



Alto: 60 px 






Diseño donde se muestra las jerarquías de azules y se mantiene en firme la estructura a 

tres columnas como base. Tamaño : 796 * 1456 px incluido el background: 

Escudo: 

Alto: 93 px 

Ancho : 90 px 


Alto: 155 px 

Ancho: 735 px 


Alto: 150 px 



Alto: 100 px 




Alto: 150 px 



Alto: 100 px 


Alto: 126 px 



Alto: 50 px 



Alto: 51 px 

Ancho: 88 px 


Alto: 60 px 








Modernización del esquema manejando los colores más limpios y estableciendo los 

colores de fondo blancos para una mejor legibilidad. Tamaño : 796 * 1456 px incluido el 

background: 


Alto: 127 px 


Escudo: 

Alto: 93 px 

Ancho : 90 px 


Alto: 150 px 



Alto: 150 px 



Alto: 100 px 



Alto: 100 px 



Alto: 126 px 



Alto: 50 px 



Alto: 60 px 



Alto: 51 px 

Ancho : 88 px 





Estilo de diseño web 2.0. para una mejor visibilidad y sencillez al ciudadano manejando la 

misma estructura. Tamaño : 796 * 1456 px incluido el background: 

Escudo: 

Alto: 93 px 

Ancho : 90 px 


Alto: 126 px 



Alto: 150 px 



Alto: 150 px 



Alto: 100 px 



Alto: 100 px 



Alto: 126 px 



Alto: 50 px 

Ancho:Ajustable. 


Alto: 60 px 



Alto: 51 px 

Ancho : 88 px 







Modernización de la bandera sin perder lo cultural y manteniendo una base de diseño 

sólidamente estructurada. Tamaño : 847 * 1400 px incluido el background: 

Escudo: 

Alto: 93 px 

Ancho : 90 px 


Alto: 104 px 



Alto: 150 px 




Alto: 150 px 


Alto: 100 px 




Alto: 126 px 


Alto: 100 px 



Alto:: 50 px 

ancho: Ajustable. 


Alto: 51 px 

Ancho : 88 px 


Alto: 60 px 






Se suaviza el verde de la plantilla representando lo natural de manera más eficiente 

visualmente. Tamaño : 871 * 1336 px incluido el background: 


Alto: 126 px 


Escudo: 

Alto:: 93 px 

Ancho : 90 px 


Alto: 150 px 



Alto: 100 px 

Ancho: 130 px 



Alto: 150 px 

Ancho: 100 px 


Alto: 100 px 

Ancho: 130 px 

Alto: 126 px 

Ancho: 124 px 


Alto: 51 px 

Ancho: 88 px 


Alto: 50 px 



Alto: 60 px 







17. TERMINOLOGÍA 

CSS. Es el lenguaje usado para definir la presentación y estructura de un documento 

estructurado escrito en HTML o XML., 

ESTILOS. Generalmente se refiere a los tipos de letra, tamaño y otras características 

de los textos que utiliza el sitio. 

GEL. Gobierno en Línea 

GELT. Gobierno en Línea Territorial 

HSH. Heinsohn Software House 

HTML (HyperText Markup Language) Lenguaje de programación para Internet. 

http Prefijo utilizado para establecer una conexión web a través de un navegador (o 

browser). Http significa Hypertext Transfer Protocol. 

INTERCONEXIÓN DE CONTENIDOS La interconexión de contenidos permite 

intercambiar la información de los canales de las Aplicaciones de Acción con otros 

sitios que también utilicen esta herramienta. 

INTERFAZ Término utilizado para definir la estructura e imagen comunicativa de un 

sistema con el usuario. Aplicado a Internet se puede decir que la interfaz es el 

conjunto todos aquellos elementos que son visibles para el usuario a través de la 

pantalla. 

ÍTEMS DE CONTENIDOS registro que se almacena con información pertinente del 

canal. Un ítem reúne varios campos. 

NAVEGADOR Aplicado normalmente a programas usados para consultar las páginas 

de Internet. 

PAdC. Programa de Agenda de Conectividad 

PÁGINA DE INTERNET Sitio web Lugar en Internet identificado por una dirección o 

URL(Uniform Resource Locator) 

PORTAL DE INTERNET Lugar en la Red desde donde un elevado número de 

usuarios inicia la navegación. Para que un sitio web se pueda considerar un portal 



debe ofrecer por ejemplo: un buscador, servicio de correo gratuito, servicio de noticias, 

foro web y tienda. 

RDC. Redcom 

URL Localizador Uniforme de Recursos. Denominación que representa una dirección 

de Internet. Uniform Resource Locator por sus siglas en inglés. 

VENTANA DE NAVEGACIÓN Es la zona que es desplegada por el navegador donde 

se despliega la información de una pagina de Internet especifica. 

W3C. World Wide Web Consortium. Es un consorcio internacional que produce 

estándares para la World Wide Web.

manual del uso de las plantillas para mantener el estilo gobierno en ...

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?