Estándares Técnicos para la Creación, Mantenimiento y Operación de sitios Web del Gobierno del Estado.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Estándares Técnicos para la Creación, Mantenimiento y Operación de sitios Web del Gobierno del Estado."

Eduardo Aguilar Plaza
hace 8 años
Vistas:

1 Estándares Técnicos para la Creación, Mantenimiento y Operación de sitios Web del Gobierno del Estado. ABRIL 2012

Ejemplo de la Estructura de la Página Principal 3 Secciones 4 Header

2 CONTENIDO 1 Introducción 2 Estructura a. Diagrama de la Estructura de la Página Principal b. Ejemplo de la Estructura de la Página Principal 3 Secciones 4 Header institucional 5 Diseño de Opciones de Menú 6 Imágenes y Logos 7 Tipografía 8 Pie de Página 9 Organización de Carpetas 2

3 1.- Introducción El objetivo del presente documento es sentar las bases para establecer los estándares básicos que deberán observar las Dependencias y Entidades de la Administración Pública del Gobierno del Estado de Oaxaca al crear, diseñar y estructurar sus sitios Web. Se proponen modelos de diseño, estructura e integración de contenido más eficientes, de manera que los usuarios visitantes tengan una buena experiencia de navegación y localización de contenido similar en los distintos diseños de interface que aplique cada dependencia gubernamental. Cada Dependencia y Entidad deberá contar con un responsable de actualización del sitio, que fungirá como enlace con la Coordinación de Tecnologías de la Información y Comunicaciones de la Secretaría de Administración, para las actualizaciones adecuadas de su Sitio de Internet. Los diseños, imágenes y colores estarán apegados al contenido del Manual de Identidad del Poder Ejecutivo. Por lo anterior, el presente documento es un instrumento de apoyo y observancia para quienes son responsables de crear, diseñar y publicar los sitios de Internet de las Dependencias y Entidades, a efecto de unificar criterios en torno a su contenido y presentación. 3

Se proponen modelos de diseño, estructura e integración de contenido más eficientes, de manera que los usuarios visitantes tengan una buena experiencia de navegación y localización de contenido

4 2. Estructura Es importante señalar que la Secretaría de Administración, a través de la Coordinación de Tecnologías, ofrece el Servicio de Hospedaje a las Dependencias y Entidades con la siguiente infraestructura de desarrollo: Sistema OperativoUnix ( Linux/ Ubuntu), Freebsd (Solaris) Lenguaje de ProgramaciónRuby, Phyton, Php/java Base de DatosMysql/postgres/Oracle Servidor WebApache/glassfish/tomcat Formato HTML ver. 4.0 o superior Una buena Estructura y Diseño permite al visitante visualizar todos los contenidos de una manera fácil, clara y homogénea, de tal forma que la estructura de las Dependencias y Entidades deben guardar similitud entre ellas, por tal motivo se hace importante cumplir con los siguientes lineamientos en la estructura de los sitios de internet Gubernamentales: 1) La resolución de la presentación del sitio web será de 960 píxeles de ancho, centrando el contenido por medio de una tabla con 3000 píxeles, dejando espacio para la barra de desplazamiento y previniendo visualización para otras resoluciones. 2) La página principal deberá estructurarse con el header Institucional, Trámites y Servicios en Línea, Información General y Noticias, Eventos e Información, Pie de Página. 3) Las páginas secundarias deberán estructurarse según el contenido a presentar, pudiendo tener Banner, menú izquierdo, información central y pie de página. 4) Los espacios de cada sección se manejará por porcentajes: a. Menú izquierdo 20% b. Información Central 80 % 5) El uso de las tablas (<table>) se crearán por porcentajes. 4

WebApache/glassfish/tomcat Formato HTML ver. 4.

5 2.1 Diagrama de la Estructura de la Página Principal 5

6 2.2 Ejemplo de la Estructura de la Página Principal 6

7 3.- Secciones Las Dependencias y Entidades mantendrán su autonomía en el desarrollo y publicación de su información respetando los Estándares Técnicos de Creación de Portales Gubernamentales, en el cual tendrán que anexar las secciones mínimas requeridas en este documento. Las secciones a incluir los Portales de las Dependencias y Entidades son las siguientes: Servicios en Línea: Se enlistan todos los servicios que cuenta la dependencia, en caso de no contar con alguno se omite esta sección. Información General: Se publica toda la información referente a la Dependencia como son Titular, Bienvenida, Antecedentes, Misión, Visión, Reglamento Interno o Marco Jurídico, Organigrama, Direcciones o Áreas, etc. Noticias: Lista de las Noticias de la Dependencia, con suscripción RSS. Trámites: Se enlistan todos los servicios que cuenta la dependencia, en caso de no contar con alguno se omite esta sección. Eventos: Una lista con logos o fotos de los eventos que se tengan en el sitio internet. Transparencia: Se debe tener una sección especial ligada a la página oficial de transparencia de la Dependencia contemplando los siguientes puntos: Unidad de Vinculación del Ejecutivo Información de la Ley de Transparencia Otras Acciones de Transparencia Vínculo directo al Portal de Directorio Gubernamental de su Dependencia. Vínculo directo al sistema de Catálogos de trámites y servicios. Buscador interno del Portal Gubernamental Si en ambas secciones se cuenta con más información se puede anexar respetando la 7

Las secciones a incluir los Portales de las Dependencias y Entidades son las siguientes: Servicios en Línea: Se enlistan todos los servicios que cuenta la dependencia, en caso de no contar con alguno

8 estructura y diseño. 4.-Header Institucional. El Header (encabezado) es una imagen que proporciona una identidad propia al sitio, por lo cual es uno de los elementos que ayudan al portal para que se vea integrado, permitiendo generar un ambiente de un solo sitio. Los colores y diseños del banner se basaran en el Manual de Identidad del Poder Ejecutivo, diseñado de una forma sencilla y clara. Las especificaciones que tendrán los banners son los siguientes: El tamaño a utilizar será de 770 x 140 px. Se exportará e insertará en formato JPG. Los colores institucionales son los que indican en el manual de identidad del Gobierno del Estado. Sobre el Header del lado izquierdo irá el escudo del gobierno del estado. Del lado derecho ira el logo institucional del Gobierno con la leyenda Oaxaca de todos un gobierno para todos. En el centro se insertara el nombre de la Dependencia/Entidad, en Texto o en Imagen. o Incluirá en la parte inferiorderechavínculos con iconos sombreados. Contacto: Formulario de contacto Ejemplo: Posterior al Header institucional, de ser necesario se contará con el menú superior lineal, el cual contendrá: Vínculo directo al Portal del Gobierno Vínculos a los Servicios en Línea, Sala de Prensa, Temas, Transparencia, Blog y Trámites. 8

de un solo sitio. Los colores y diseños del banner se basaran en el Manual de Identidad del Poder Ejecutivo, diseñado de una forma sencilla y clara.

9 Para los portales que tienen algún Sistema en línea, estos podrán contar con información adicional al banner indicando su nombre parte derecha del banner, respetando los estándares de diseño. 5. Diseño de Opciones de Menú El diseño de las Opciones se prohíbe el uso y manejo de flash. Las propiedades de los encabezados del menú serán los utilizados como lo muestra el Manual de identidad según colores institucionales. Tipo de Letra: Helvética 11 px. Color de Letra: Café (8960-C) o Amarillo (117-C) Las propiedades recomendadas de las opciones del menú son: Fondo: Normal: Blanco (#FFFFFF) Sobre: Crema (#FFF9E1) Tipo de Letra: Helvética 11 px Color de Letra: Link: Azul (#326598) Visitado: Azul (#326598) Activo: Azul (#326598) Sobre: Rojo (#FF0000) 6. Imágenes y Logos Las imágenes y logos se tendrán que solicitar para que estos cumplan con los criterios de imagen del Gobierno del Estado. Las especificaciones que tendrán los gráficos son: En la sección de lo Nuevo en el Portal se insertarán logos de 235x55 px, en la sección de Eventos e Información se insertarán logos de 160x 60 px Cuando se inserte una imagen a la página, hay que usar los atributos height y width, ya que esto produce que el navegador sepa el tamaño de la imagen antes de que empiece a cargarla, 9

Las propiedades de los encabezados del menú serán los utilizados como lo muestra el Manual de identidad según colores institucionales. Tipo de Letra: Helvética 11 px.

10 lo que le permite reservar espacio en la página. Hay que usar la misma imagen tantas veces como sea posible, ya que de esta manera se aprovecha la característica que disponen la mayoría de navegadores de almacenar en la caché las imágenes ya cargadas. Los tipos de archivo para imágenes permitidos son: a. JPG (Joint Photographic Experts Group) b. GIF (Graphics Interchange Format) c. PNG (Portable Network Graphics) ( 32bits ) No se debe subir imágenes de mapa de bits (.bmp) Como fondo de la página se utilizará el que se establezca en el presente documento. 7. Tipografía Se utilizará la siguiente prioridad de tipografía en la hoja de estilos: Helvética. El contenido del portal en cuanto al texto que se insertarán para proporcionar la información deberá cumplir con los siguientes estándares de colores. Título del tema a desarrollar: Tipo de Letra: Helvética a 12 pt en negrita Color: #990000; Subtitulo del tema a desarrollar: Tipo de Letra: Helvética a 12 pt en negrita y cursiva Color: #990000; Tipo de Letra: Helvética a 10 pt Texto del Contenido: Ejemplo: 10

cargadas. Los tipos de archivo para imágenes permitidos son: a. JPG (Joint Photographic Experts Group) b. GIF (Graphics Interchange Format) c.

11 8. Pie de Página Tendrá el URL de la dependencia con la tipografía oficial. 9. Organización de Carpetas Los Portales Gubernamentales deben tener una estructura mínima en sus carpetas donde se guardan sus Scripts del Contenido de su sitio, el cual se recomienda que sea el siguiente: Contendrá las imágenes generales del sitio (imágenes) Contendrá las librerías de PHP que se incluirán al diseñar el portal. (lib) Estas contendrán las funciones del encabezado, pie de página, menú, etc. Scripts con las hojas de estilo y Javascript que sea necesarios para el diseño. (scripts) Páginas con el contenido de las secciones ya definidas. (info) Para información adicional se podrán crear carpetas que sean nemónicas a la información a proporcionar. Los nombres de los archivos a manejar en el portal deben de ir en minúsculas, extensiones en minúsculas, sin acentos y sin espacios. 11

siguiente: Contendrá las imágenes generales del sitio (imágenes) Contendrá las librerías de PHP que se incluirán al diseñar el portal.

Documentos relacionados

GUÍA DE IMAGEN Portales Institucionales www.bajacalifornia.gob.mx

GUÍA DE IMAGEN Portales Institucionales www.bajacalifornia.gob.mx Manual de Imagen para Portales Introducción Este manual de imagen fue elaborado por la Dirección General de Informática del Gobierno de