Internet para la Rendición de Cuentas - IPRC

Gráfica con el logo de IPRC

Soporte técnico

Internet para la Rendición de la Cuentas es un proyecto que busca fortalecer la transparencia en
alcaldías, entidades gubernamentales y contralorías territoriales
, mediante la implementación de un software que permite el montaje de un sitio Web, facilitando la entrega de información pública a través de Internet.

IPRC

Validación XHTML 1.0 Transitional exitosa

Validación CSS exitosa!

Nivel Triple-A de Conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 (WCAG 1.0)

Validación de accesibilidad TAW

Soporte Técnico

Aspectos técnicos para nuevas CSS

¿Cómo modificar el diseño gráfico de los sitios web municipales?

¿Cómo funcionan los sitios web municipales?

Los sitios web municipales que utilizan la herramienta del proyecto IPRC han sido creados utilizando el Administrador de Contenidos Aplicación de Acción de la Asociación para el Progreso de las Comunicaciones (APC). Este administrador de contenidos permite a los usuarios publicar información a través de una interfaz web, utilizando formularios sencillos que permiten su almacenamiento en una base de datos. Para conocer más información sobre la aplicación de sitios web municipales y acceder a los manuales de usuario visite el sitio oficial del proyecto.

La información almacenada es mostrada a los visitantes a través de una interfaz web que utiliza código html para definir la estructura de la información y hojas de estilo para dar la apariencia gráfica de las páginas en el navegador y en el formato de impresión en papel.

La hoja de estilo permite dar características a las etiquetas html utilizadas en la página web , como colores, tamaños, posiciones, entre otras. Esto facilita la modificación del diseño gráfico de los sitios sin que sea necesario realizar cambios en el código html, además permite resolver problemas de lectura para personas con discapacidades, dar una mejor apariencia gráfica a las publicaciones, hace menos complejo el código, posibilita establecer diseños diferentes para distintos medios (impresoras, navegadores, equipos móviles) y permite utilizar diferentes apariencias gráficas que se adapten a las necesidades y características de cada municipio.

¿Qué es HTML?

HTML es el acrónimo inglés de HyperText Markup Language, que se traduce al español como Lenguaje de Marcas Hipertextuales. Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a los navegadores como Internet Explorer, Opera, Firefox, Netscape o Safari, el HTML se ha convertido en uno de los formatos más populares y fáciles de aprender que existen para la elaboración de documentos para web. Tomado de wikipedia

¿Qué es Hoja de estilo en cascada?

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación Tomado de wikipedia

Arriba

¿Cómo crear nuevo diseño para los sitios web municipales?

La creación de un nuevo diseño para los sitios web municipales requiere la generación de una nueva hoja de estilo. Es muy importante tener en cuenta que las reglas del concurso no permiten modificar el código html de los sitios, de manera que el diseño debe ser logrado únicamente con la hoja de estilo que posibilita además el uso de imágenes de fondo. Esto se hace para asegurar que los diseños resultantes puedan ser utilizados por cualquiera de los sitios web municipales que lo deseen. Le recomendamos revisar primero el código html de los sitios para que conozca los bloques y posibilidades para su diseño.

Para generar una nueva hoja de estilos usted puede crear un nuevo archivo de extensión "css" y empezar a definir los selectores de acuerdo al código html de los sitios o puede copiar y renombrar una de las hojas de estilo existentes que ya tiene los selectores definidos.

En la parte inferior de la pantalla usted puede descargar versiones comentadas del código html y de una hoja de estilos de los sitos web con indicaciones de los bloques y selectores utilizados. Así mismo puede descargar el código html y archivos de hojas de estilo originales utilizados en los sitios web junto a las imagenes asociadas.

Pasos para crear una nueva hoja de estilos

Para crear su nueva hoja de estilos tenga en cuenta los siguientes pasos.

Nota:

Le recomendamos probar su diseño en una instalación real de un sitio web municipal. Para esto usted puede descargar los instaladores de la herramienta en la página oficial del proyecto, en dónde encontrará además manuales de instalación y uso de la herramienta. Si desea tener soporte para la instalación comuníquese con soporte.alcaldia@iprc.org.co.
Si lo prefiere puede solicitar la disposición de un sitio de pruebas en línea en el cuál podrá cargar y probar su hoja de estilo. Realice su solicitud dando su nombre y documento de identificación a la dirección soporte.alcaldia@iprc.org.co. Usted recibirá a vuelta de correo (en su dirección de correo registrada en el formulario de inscripción) instrucciones sobre cuándo estará disponible el sitio de pruebas y los datos de acceso.

Aspectos importantes a tener en cuenta

Arriba

¿Cómo utilizar mi diseño en un sitio web municipal?

Para modificar la apariencia gráfica de los sitios web municipales debe crear una nueva hoja de estilos que corresponda al nuevo diseño que desea implementar. La hoja de estilo (y las gráficas utilizadas) debe ser cargada en el servidor en el que se encuentra alojado el sitio y enlazada desde el código html, esto último se puede hacer a través del administrador de contenidos.

Cargar la hoja de estilo en el servidor

Si cuenta con los permisos necesarios, acceda al servidor en el que se encuentra alojado el sitio web municipal, vaya al directorio "css" que se encuentra en la raiz del sitio y copie allí su hoja de estilo. La hoja de estilo debe tener uno nombre con la forma:

nombrecss-pantalla.css

Donde nombrecss es el nombre que usted dá a su hoja de estilo (ej: mihojadeestilo-pantalla.css).

Seleccionar la hoja de estilo como el diseño del sitio

Ingrese al administrador de contenidos utilizando un nombre de usuario y contraseña y vaya al canal de configuración. Si aún no se ha registrado un item en el canal, seleccione ingresar un nuevo item. Si en el canal ya existe un item, pulse sobre el ítem existente para modificarlo.
En la sección "Configuración de apariencia" puede seleccionar una de las hojas de estilo disponibles en el listado o adicionar una nueva. Para adicionar una nueva hoja de estilo escriba el nombre dado a su hoja de estilo (ej: mihojadeestilo) en el campo de texto que se encuentra al lado de la caja de selección.
Diligencie todos los campos obligatorios (marcados con asterisco) y guarde la información.

Arriba

Código html y hoja de estilo

Código comentado

Para conocer y comprender el código HTML definido para la pagina web puede revisar el código comentado, estos códigos presentan una variación con los originales, para hacer más clara la información presentada en ellos. Para efectos prácticos funcionan igual

HTML

Hoja de estilo

Código original

Descargue el archivo comprimido con el código html de la página de inicio y algunas páginas secundarias, las hojas de estilo disponibles y las imágenes utilizadas

Arriba

Guía breve para crear sitios web accesibles (Web Accessibility Initiative - W3C):

Pautas y puntos de verificación: www.w3.org/WAI:

Logo de GTZ Logo de Transparencia por Colombia Logo Agencia Internacional de los Estados Unidos Logo Colnodo