33
33

Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

Embed Size (px)

Citation preview

Page 1: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

33

Page 2: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

1

ÍNDICE INTRODUCCIÓN .................................................................................................................. 3  CRITERIOS DE USO DE ESTE MANUAL ........................................................................... 3  1. PLANIFICACIÓN .............................................................................................................. 4  

1.1 CONSIDERACIONES DE LA PLANIFICACIÓN ......................................................... 4  1.2 DEFINIR LA VISIÓN Y LOS OBJETIVOS DEL SITIO WEB ....................................... 5  1.3 DEFINIR EL PÚBLICO OBJETIVO ............................................................................. 5  1.4 INFORMACIÓN Y PRODUCTOS A DIFUNDIR .......................................................... 5  1.5 EQUILIBRAR LA DEMANDA DEL USUARIO Y LA OFERTA INSTITUCIONAL ........ 5  1.6 CONTENIDOS ESTÁNDAR ........................................................................................ 6  1.7 INCLUIR ESPACIOS PARA LA ATENCIÓN CIUDADANA ......................................... 6  1.8 FUNCIONALIDADES BÁSICAS .................................................................................. 7  

1.8.1 BUSCADOR ......................................................................................................... 7  1.8.2 RUTA DE ACCESO O CAMINO DE MIGAS ........................................................ 7  1.8.3 MAPA DEL SITIO ................................................................................................. 7  

2. DISEÑO ............................................................................................................................ 8  2.1 LA GENTE NO LEE UNA PÁGINA, LA ESCANEA ..................................................... 8  2.2 ARQUITECTURA DE INFORMACIÓN ....................................................................... 8  2.3 JERARQUÍA DE LA INFORMACIÓN .......................................................................... 8  2.4 CLASIFICACIÓN DE LA INFORMACIÓN. .................................................................. 8  2.5 DEFINICIÓN DE MENÚS. .......................................................................................... 8  2.6 DEFINICIÓN DE BLOQUES. ...................................................................................... 9  2.7 RUTA DE NAVEGACIÓN O BREADCRUMBS. .......................................................... 9  

3. IMPLEMENTACIÓN ....................................................................................................... 10  3.1 CREACIÓN DE CONTENIDOS ................................................................................ 10  

3.1.1 CARACTERÍSTICAS PRINCIPALES DE LOS CONTENIDOS .......................... 10  3.1.2 REDACCIÓN ...................................................................................................... 10  3.1.3 LENGUAJE ........................................................................................................ 11  3.1.4 CONSIDERACIONES PARA LA CREACIÓN DE CONTENIDOS ...................... 11  

3.2 INFORMACIÓN FIDEDIGNA .................................................................................... 12  3.3 ACTUALIZACIÓN PERMANENTE DE LA INFORMACIÓN ...................................... 12  3.4 EVITAR LA DUPLICIDAD DE INFORMACIÓN ......................................................... 12  

4. USABILIDAD .................................................................................................................. 13  4.1 EVITAR UN SITIO WEB EXCESIVAMENTE DINÁMICO ......................................... 13  

Page 3: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

2

4.2 TEMAS Y PERFILES DE USUARIO ......................................................................... 13  4.3 NAVEGACIÓN DENTRO DE LOS CONTENIDOS. .................................................. 13  

4.3.1 CONSISTENCIA. ................................................................................................ 13  4.3.2 UNIFORMIDAD. ................................................................................................. 13  4.3.3 VISIBILIDAD. ...................................................................................................... 13  

5. NORMATIVIDAD ............................................................................................................ 14  5.1 DISPOSITIVOS ......................................................................................................... 14  5.2 ARCHIVOS DESCARGABLES ................................................................................. 14  5.3 REFERENCIAS A SITIOS EXTERNOS (CONTENIDOS EXTERNOS) .................... 14  5.4 SECCIONES DE INTERÉS ....................................................................................... 14  

5.4.1 ACERCA DE: ...................................................................................................... 14  5.4.2 TRÁMITES: ........................................................................................................ 14  5.4.3 SERVICIOS: ....................................................................................................... 15  5.4.4 PROGRAMAS: ................................................................................................... 15  

5.5 IMAGEN INSTITUCIONAL DEL GOBIERNO DEL ESTADO DE MORELOS ........... 15  5.5.1 COLORES INSTITUCIONALES ......................................................................... 15  5.5.2 COLORES PRINCIPALES ................................................................................. 15  5.5.3 TIPOGRAFÍA WEB ............................................................................................ 16  5.5.4 FORMATO Y ESTRUCTURA DE LOS CONTENIDOS ...................................... 16  

5.6 DOMINIO DE INTERNET DEL GOBIERNO DEL ESTADO DE MORELOS ............. 16  5.7 RESOLUCIÓN DE PANTALLA ................................................................................. 17  5.8 ESTRUCTURA O LAYOUT ...................................................................................... 18  

5.8.1 PÁGINA PRINCIPAL O PRIMER NIVEL: ........................................................... 21  5.8.2 PÁGINA DE SECCIÓN O SEGUNDO NIVEL: ................................................... 22  5.8.3 PÁGINA DE CONTENIDO O TERCER NIVEL: .................................................. 23  5.8.4 ENCABEZADO O HEADER ............................................................................... 24  5.8.5 BLOQUE PRINCIPAL ......................................................................................... 25  5.8.6 BLOQUE PARA PUBLICIDAD O BANNERS ..................................................... 26  5.8.7 BLOQUE CENTRAL ........................................................................................... 27  5.8.8 NOTICIAS ........................................................................................................... 28  5.8.9 VIDEO DE YOUTUBE Y BANNERS TRANSVERSALES .................................. 29  5.8.10 BLOQUE DE TRANSPARENCIA ..................................................................... 30  5.8.11 PIE O FOOTER ................................................................................................ 31  

6. CONTACTO ................................................................................................................... 32  REFERENCIAS .................................................................................................................. 32  

Page 4: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

3

INTRODUCCIÓN

Un portal de gobierno es un medio de comunicación muy importante que abre a la organización una gran cantidad de posibilidades para facilitar actividades de difusión, sensibilización, capacitación, participación y servicios en línea. El portal no suplantará a otros medios de comunicación pero sí constituye un complemento que permite facilitar el acceso a la información y los servicios a todos los ciudadanos. Por estas razones, al desarrollar un portal nos encontramos con que debemos tener en cuenta: Las necesidades de la organización, las expectativas de nuestro público objetivo, cuál es el mensaje a comunicar, la calidad de los contenidos, los requerimientos y limitaciones tecnológicas, la creatividad y el diseño, la imagen corporativa, criterios de usabilidad, criterios de accesibilidad, las normas legales que se deben cumplir, el equipo de trabajo que permitirá llevarlo adelante, la posterior gestión de los contenidos y los procedimientos de publicación, aprobación y control de calidad. Bajo este contexto, los sitios Web del Gobierno del Estado de Morelos, deben ser representaciones en internet de la administración pública, por lo que deben enfocar sus esfuerzos en brindar al ciudadano todos los elementos necesarios para la realización de trámites y servicios, y para mantenerlo informado sobre los temas de mayor interés, a través de elementos gráficos y de contenidos homogéneos, que generen una percepción en el usuario de que los sitios pertenecen a la misma organización. Pero por encima de todas las cosas se encuentra la obligación de diseñar una Web para todos. Esta guía fue pensada como material de apoyo para los equipos que tienen la responsabilidad de diseñar e implementar subportales estatales. La misma reúne un conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos de planificación, diseño, implementación, usabilidad, accesibilidad, normativa y seguridad.

CRITERIOS DE USO DE ESTE MANUAL

Se deberán respetar los lineamientos e indicaciones de este manual en la generación de sitios Web del Gobierno del Estado de Morelos. La correcta aplicación de criterios, medidas, colores, etc. favorecerá a la creación de un sistema de portales que refuerce la de imagen del Gobierno del Estado de Morelos mediante una efectiva y positiva experiencia por parte de los usuarios de éstos. Es importante tomar en cuenta que:

• No se permite mutilar por ninguna razón este manual, toda vez que es de consulta. • No deberán recortarse las páginas de este manual a menos que así se indique. • No deberán hacerse acotaciones sobre el mismo.

Page 5: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

4

1. PLANIFICACIÓN

Al comenzar a trabajar en el proyecto es importante conceptualizar que nivel de portal está preparada la organización para proporcionar y para ello deberá determinar: el alcance del proyecto, el público objetivo, las expectativas de la organización y un estudio de los portales de organizaciones equivalentes que permitan identificar mejores prácticas o aspectos a mejorar.

1.1 CONSIDERACIONES DE LA PLANIFICACIÓN

Al desarrollar un portal nos encontramos con que debemos compatibilizar estos conceptos:

• Las necesidades de la organización.

• Las expectativas de nuestro público objetivo.

• El mensaje a comunicar.

• La calidad de los contenidos.

• Los requerimientos y limitaciones tecnológicas.

• La creatividad y el diseño.

• La imagen corporativa.

• Criterios de usabilidad.

• Criterios de accesibilidad.

• Las normas legales que se deben cumplir.

• Los cuidados que debemos tener para no infringir derechos de propiedad intelectual.

• El equipo de trabajo.

• La posterior gestión de los contenidos.

• Los procedimientos de publicación, aprobación y control de calidad.

Muchas veces por la urgencia, porque no se disponen de equipos multidisciplinarios, o por falta de recursos no llegamos a controlar todos estos puntos, sin embargo deben ser tomados en cuenta independientemente de las limitaciones que tenga el proyecto.

Page 6: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

5

1.2 DEFINIR LA VISIÓN Y LOS OBJETIVOS DEL SITIO WEB

¿Para qué necesito el sitio? ¿Qué necesidad de la dependencia o entidad cubrirá el sitio? ¿Qué necesidades de los ciudadanos quedarán debidamente cubiertas con este sitio? ¿Qué ventajas y beneficios tengo al contar con un sitio Web? ¿Cuántos procesos, trámites, servicios o gestiones podré llegar a realizar a través de este medio? ¿Qué capacidad tiene la institución para mantener permanentemente actualizado el sitio? ¿El sitio será sólo informativo, o también interactivo o transaccional? Un sitio que no está bien planteado, que no es actualizado, que contiene información errónea o secciones inconclusas, lejos de apoyar, genera una mala imagen de la institución y malestar en los ciudadanos.

1.3 DEFINIR EL PÚBLICO OBJETIVO

El enfoque de los sitios del Gobierno del Estado de Morelos debe ser ciudadano, por esto es necesario definir qué tipo de ciudadano es el que está interesado en el sitio, esto se puede lograr cubriendo los siguientes elementos clave: • Identificar adecuadamente al público objetivo del sitio. • Levantar opiniones de este público sobre qué les gustaría encontrar en el sitio. • Diseñar un sitio para el usuario. • Probar el prototipo del sitio con el usuario. • Realizar modificaciones basadas en la información obtenida con la retroalimentación del usuario. • Probar el sitio final con el usuario.

1.4 INFORMACIÓN Y PRODUCTOS A DIFUNDIR

Por otra parte la organización tiene productos, servicios o información que desea posicionar entre los usuarios y los ciudadanos y que deben estar identificadas claramente, porque al igual que las expectativas del usuario hay que satisfacer las expectativas de comunicación de la organización. El equilibrio entre ambos factores es muy importante de encontrar sin perder la visión estratégica de gobierno electrónico.

1.5 EQUILIBRAR LA DEMANDA DEL USUARIO Y LA OFERTA INSTITUCIONAL

Para el diseño del sitio y sus diferentes elementos (estructura de información, lenguaje, interfaz gráfica, contenidos y herramientas tecnológicas), se debe realizar una planeación integral: •Pensar en el usuario final, para detectar y jerarquizar adecuadamente las necesidades e información de interés de los usuarios. •Pensar en los usuarios al interior de la dependencia o entidad; para detectar las necesidades y expectativas sobre el sitio web de quienes conforman la dependencia, y que son dueños y responsables en última instancia de la información y la calidad de los servicios.

Page 7: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

6

1.6 CONTENIDOS ESTÁNDAR

Independientemente de la información que se desea difundir, los sitios institucionales deben tener contenidos estándar, algunos como buena práctica y otros para cumplir con la ley de acceso a la información pública. Es recomendable contemplar en los sitios institucionales los siguientes contenidos estándares:

1. Logo y Nombre de la Dependencia u Organismo. 2. Información institucional:

• Acerca de, misión, visión • Funciones del organismo en general y de cada una de sus unidades o

dependencias. • Marco Normativo • Antecedentes • Información de la gestión: Indicadores y metas, plan estratégico, memoria

anual • Estructura organizativa, autoridades, organigrama, directorio de funcionarios. • Programas de capacitación interna. • Presupuesto y remuneraciones, informes de ejecución presupuestal. • Convenios con otras instituciones: listado del convenios, beneficios del

convenio, involucrados, documento del convenio • Información de contactos, ubicación del organismo y de las áreas claves para

el ciudadano, teléfonos, y correo, así como información de contacto de las autoridades.

• Convocatorias a concursos y resultados de los mismos. • Concesiones, licitaciones, permisos y autorizaciones • Información estadística.

3. Proyectos de la dependencia u organismo 4. Listado e información de Servicios y trámites 5. Se recomienda el desarrollo de áreas de interacción y participación

• Buzón de sugerencias (Formulario de contacto) • Foro de discusión de temas • Mecanismos para solicitar información

6. Acerca del Portal • Información de contacto en caso de problemas con el portal

7. Aspectos Legales o Condiciones de Uso 8. Políticas que cumple: accesibilidad, privacidad, protección de datos, propiedad

intelectual, y transparencia. 9. Se recomienda el desarrollo de una página de Transparencia donde coloque

vínculos a toda la información pública disponible para el ciudadano de manera que pueda acceder a ella fácilmente.

1.7 INCLUIR ESPACIOS PARA LA ATENCIÓN CIUDADANA

Al ser un elemento de contacto entre la ciudadanía y el gobierno, lo sitios web de las dependencias gubernamentales, deberán contar con un formato o buzón de atención para

Page 8: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

7

quejas, preguntas, denuncias y comentarios para fomentar la retroalimentación por parte de la ciudadanía.

1.8 FUNCIONALIDADES BÁSICAS

1.8.1 BUSCADOR

Debe incluir un buscador que permita contar con una opción básica de búsqueda disponible desde cualquier página del portal y que permita ubicar contenidos o personas según diferentes campos.

1.8.2 RUTA DE ACCESO O CAMINO DE MIGAS

Visible en todo el sitio, debe mostrar la traza de páginas que hay entre la Portada del Sitio hasta la página actual. Cada uno de los elementos que conforman este camino debe tener un enlace que permita el acceso a esas áreas.

1.8.3 MAPA DEL SITIO

Se debe generar automáticamente al publicar nuevos contenidos

Page 9: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

8

2. DISEÑO

2.1 LA GENTE NO LEE UNA PÁGINA, LA ESCANEA

Los contenidos para páginas web no se crean de la misma manera que los contenidos para impresos. Gran parte de los usuarios que visitan los sitios web, escanean la página en lugar de leerla. Esto debe ser tomado en cuenta para ofrecer al usuario contenidos claros, actualizados, jerarquizados o categorizados y en un formato adecuado para su lectura en pantalla.

2.2 ARQUITECTURA DE INFORMACIÓN

Se define como Arquitectura de Información a la disciplina encargada de estructurar y clasificar la información de sitios Web e Intranets, con el fin de ayudar a los usuarios a encontrar y manejar dicha información de una manera fácil y rápida. Los puntos clave a considerar para desarrollar un sitio adecuado con contenidos útiles para los usuarios son:

• Detectar y entender las necesidades de los usuarios. • Detectar y entender las necesidades de la dependencia. • Entender y ajustar la información al medio en el que se va a desarrollar (Internet). • Planear antes de diseñar.

2.3 JERARQUÍA DE LA INFORMACIÓN

La jerarquía es uno de los factores más importantes de un sitio web, Si conseguimos una buena jerarquización (categorización) el usuario se llevará una experiencia de uso positiva y seguirá navegando por nuestro sitio. La creación de árboles de contenidos es útil en el desarrollo de los sitios ya que permiten que de una manera gráfica y sencilla, se muestre la jerarquía de las secciones y contenidos que conformarán el sitio y cuántos niveles de navegación contendrá cada uno de los canales.

2.4 CLASIFICACIÓN DE LA INFORMACIÓN.

Para determinar la mejor manera de estructurar y organizar la información del sitio web, se debe pensar de forma funcional y no organizacional, hacia el usuario final, agrupando la información de manera lógica. La Arquitectura de Información y su etiquetado juegan un papel importante, ya que de éstas disciplinas depende el fácil acceso a la información para los usuarios.

2.5 DEFINICIÓN DE MENÚS.

Un menú es un acceso directo a una sección o contenido que es de suma importancia para el usuario, es por esto que para el diseño del menú principal del sitio se debe considerar qué información se pretende posicionar dentro de él.

Page 10: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

9

Es recomendable considerar secciones como Acerca De, Transparencia, Noticias, Contacto, Trámites y Servicios, entre otros.

2.6 DEFINICIÓN DE BLOQUES.

Un bloque es un contenedor de información que se puede situar en diferentes partes del sitio web. En su contenido se pueden presentar ligas de acceso a contenidos, imágenes, íconos, menús contextuales, etc. Es importante que al momento de diseñar los bloques se tome en cuenta la información que van a contener y la jerarquía de la misma para colocarlo en una posición adecuada dentro de la estructura del sitio

2.7 RUTA DE NAVEGACIÓN O BREADCRUMBS.

La ruta de navegación (migas o breadcrumbs) permite al usuario ubicarse dentro del portal y le ofrece la opción de poder regresar al punto anterior al que se encuentra así como visualizar las secciones a las que pertenecen los contenidos a los que accede. La ruta de navegación es una representación de la jerarquía o categorización de los contenidos.

Page 11: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

10

3. IMPLEMENTACIÓN

3.1 CREACIÓN DE CONTENIDOS

La redacción de los contenidos debe ser clara, concisa y sencilla. Una gran cantidad de texto en internet es difícil de leer. Por ello, se debe planear siempre la forma más fácil de emitir mensajes por este medio, como lo son textos de tamaño legible, formatos útiles de presentación, tablas para facilitar la comprensión de datos y gráficos para reforzar la información. Recordemos que existe la opción de adjuntar archivos donde se detalle la información, para que sean descargados únicamente por los usuarios a quienes interese conocer a mayor detalle.

3.1.1 CARACTERÍSTICAS PRINCIPALES DE LOS CONTENIDOS

Para asegurar que un contenido es adecuado para publicarse en la web, se recomienda que se cuente con las siguientes características:

• SER CONCISO. Escribir en pocas líneas la idea principal. El contenido web debe ser breve y conciso, e informar de una manera simple y directa (menos es más). Si el contenido no puede reducirse, se deben usar anclas al principio del contenido con un índice de subtítulos y enlazarlos a la parte del documento en el que se encuentre la información.

• REDACTARLO DE FORMA QUE PERMITA SER ESCANEADO. El texto debe ser fácil y rápido de leer, los usuarios no acostumbran leer grandes bloques de texto continuo, por lo que se recomienda paginarlo.

• LENGUAJE CLARO Y SIMPLE. No se recomienda usar textos promocionales, términos burocráticos o palabras rebuscadas, ya que puede causar molestia al usuario si no entiende su significado.

3.1.2 REDACCIÓN

Se recomienda utilizar el modelo de redacción pirámide invertida, la información más relevante al inicio y la menos relevante al final; además de procurar que el contenido responda a los seis principios del periodismo:

• Quién, qué, cómo, • Cuándo, dónde y porqué. • Los verbos deben ser consistentes en cuanto a tiempo. • Es imprescindible revisar la ortografía y la gramática del contenido.

Page 12: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

11

3.1.3 LENGUAJE

• El lenguaje deberá ser sencillo y enfocado al ciudadano. • No utilizar abreviaturas, a menos que se tenga la seguridad de que dichas

abreviaturas sean acrónimos conocidos por el público al que se dirige. Cabe mencionar que esto último es posible siempre y cuando, la primera vez se emplee la palabra completa.

• De ser posible, se sugiere evitar abreviaturas en nombres, apellidos y cargos. • Es preferible que los números del cero al nueve se escriban con letras; del 10 en

adelante se pueden utilizar cifras exceptuando el mil y el millón (Ejemplo: 15 mil).

3.1.4 CONSIDERACIONES PARA LA CREACIÓN DE CONTENIDOS

• AUDIENCIA. Es importante tomar en cuenta para quién se va a crear los distintos contenidos de nuestro sitio. Por ello es necesario realizar estudios previos a la creación, para así brindar contenidos de interés y gran valor a los usuarios. El realizar un análisis de las características de nuestros usuarios, ayuda a determinar qué tipo de contenido se debe generar, ya que sus intereses y las características específicas con las que se conectan al sitio, dispositivo, velocidad de conexión y resolución, influirá en la forma en la que podrá acceder al contenido y el valor que tendrá para el usuario.

• DIFUSIÓN.

Se recomienda publicar solamente documentos o textos cuyo contenido pueda hacerse público.

• PRESENTACIÓN.

Antes de generarlo para publicarse en la red, es necesario revisar el texto o documento y determinar de qué forma es más fácil leerlo para el usuario, ya que hay textos que son muy extensos y hace imposible leerlos en línea, en estos casos, deberá considerarse la integración de una versión descargable del documento o texto, con formato específico para imprimirse (PDF).

• IMÁGENES

Las imágenes sólo deben agregarse para incrementar el valor del contenido. Evite usar demasiadas imágenes, ya que se puede desajustar la presentación del contenido, además que puede incrementar los tiempos de descarga del contenido y se convertirá en un problema para los usuarios con conexiones de internet lentas.

• PALABRAS CLAVE

Debido a que los usuarios escanean los contenidos antes de leerlos, el resaltar con negritas las palabras clave de cada contenido le facilitará esta tarea.

Page 13: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

12

3.2 INFORMACIÓN FIDEDIGNA

El sitio debe contener información verídica sin tolerancia a ningún tipo de equivocación, porque un sitio que contenga información errónea o confusa, además de los problemas legales que puede generar, tiene como consecuencia la falta de credibilidad.

3.3 ACTUALIZACIÓN PERMANENTE DE LA INFORMACIÓN

Se debe tener presente que la actualización permanente del sitio será la clave para que éste y la imagen del Gobierno del Estado de Morelos, sean exitosas.

3.4 EVITAR LA DUPLICIDAD DE INFORMACIÓN

Las dependencias o entidades, deberán evitar publicar la misma información. Será válido sin embargo, proveer vínculos o referencias a la fuente original de la información.

Page 14: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

13

4. USABILIDAD

La Usabilidad es la disciplina que tiene como objetivo reducir al mínimo las dificultades de uso inherentes a una herramienta informática, analizando la forma en que los usuarios utilizan las aplicaciones y sitios Web con el objetivo de detectar los problemas que se les presentan y proponer alternativas para solucionarlos, de modo de que la interacción de dichos usuarios con las aplicaciones y sitios Web sea sencilla, agradable y productiva.

4.1 EVITAR UN SITIO WEB EXCESIVAMENTE DINÁMICO

Puede creerse que un sitio con muchas animaciones y movimiento es más impactante y llamativo, pero en términos de usabilidad el uso excesivo de estos recursos, lejos de ser agradable, genera ruido visual que confunde y molesta al usuario.

4.2 TEMAS Y PERFILES DE USUARIO

Para estructurar la información con un enfoque ciudadano, es importante que esta sea clasificada por temas y perfiles, lo que facilitará al usuario encontrar lo que busca de una forma rápida y clara.

4.3 NAVEGACIÓN DENTRO DE LOS CONTENIDOS.

Los elementos de navegación dentro de los contenidos permiten regresar o subir dentro de un mismo contenido. Al generar los elementos de navegación, se deben tomar en cuenta las siguientes características:

4.3.1 CONSISTENCIA.

Los elementos deben ser similares en todo el sitio, en cuanto a su ubicación y disposición en las páginas.

4.3.2 UNIFORMIDAD.

Los elementos de navegación deben utilizar términos similares con el fin de que el usuario que lo vea en las distintas páginas del sitio, confíe en que las opciones lo llevarán siempre al mismo punto al que está asignado el elemento.

4.3.3 VISIBILIDAD.

Los elementos deben distinguirse claramente dentro del sitio, con la finalidad de que el usuario lo utilice como guía permanente en el área en que se encuentre del sitio.

Page 15: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

14

5. NORMATIVIDAD

5.1 DISPOSITIVOS

Debido a la gran cantidad de dispositivos móviles que permiten a los usuarios acceder a nuestro sitio desde cualquier tipo de pantalla y resolución, no se recomienda el uso de tablas para estructurar el contenido, ya que la interpretación de dichas tablas varía de un dispositivo a otro y puede alterar la forma en el que el usuario lee el contenido.

5.2 ARCHIVOS DESCARGABLES

Los archivos a descargar no deben ser mayores a 10 megas de tamaño de archivo. En caso de rebasar el tamaño de archivo especificado, se deberá segmentar el archivo en varias partes, para así disminuir el tiempo de descarga. A un costado del vínculo de la descarga, se debe incluir el tamaño del archivo y el formato en el que se presenta. En caso de necesitar algún programa o plug-in para visualizar el archivo, es necesario colocar una liga o acceso directo al sitio del que se pueda descargar de forma gratuita dicho software.

5.3 REFERENCIAS A SITIOS EXTERNOS (CONTENIDOS EXTERNOS)

En ocasiones es necesario hacer referencia a contenidos ubicados en sitios externos. Los contenidos de sitios externos deben contener una leyenda en la que se libre de responsabilidad sobre el contenido a la dependencia que está haciendo referencia a éste. Los contenidos externos deben pertenecer a sitios externos oficiales o de renombre, ya sean dependencias gubernamentales, instituciones académicas, entre otros.

5.4 SECCIONES DE INTERÉS

5.4.1 ACERCA DE:

En este apartado se integrará toda la información institucional, que aunque no es información prioritaria para el ciudadano, es un apartado que todas las dependencias o entidades deben publicar en su sitio, para informar al ciudadano su razón de ser y el personal que las conforman. Esta sección deberá contener la información del titular, misión, visión, funciones, organigrama y directorio de la dependencia.

5.4.2 TRÁMITES:

En este apartado se brindará toda la información necesaria para llevar a cabo los trámites de la dependencia. Esta sección deberá contener un listado de los trámites de la dependencia que se encuentran registrados ante la CEMER.

Page 16: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

15

5.4.3 SERVICIOS:

En este apartado se brindará toda la información necesaria para poder acceder a los servicios que entrega la dependencia. Esta sección deberá contener un listado de los servicios de la dependencia.

5.4.4 PROGRAMAS:

En este apartado, se publicarán los diversos programas de cada dependencia o entidad.

5.5 IMAGEN INSTITUCIONAL DEL GOBIERNO DEL ESTADO DE MORELOS

5.5.1 COLORES INSTITUCIONALES

El color es un factor muy importante debido a que constituye un componente fundamental dentro de la comunicación visual. Los colores han de ser consistentes. Los valores señalados a continuación se deben asegurar para que los colores sean siempre los mismos, tanto en medios impresos como digitales.

5.5.2 COLORES PRINCIPALES

Estos dos colores serán los principales en identificar a las entidades de Gobierno.

Page 17: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

16

5.5.3 TIPOGRAFÍA WEB

ARIAL Normal abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Negrita abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

5.5.4 FORMATO Y ESTRUCTURA DE LOS CONTENIDOS

• La fuente para títulos será Arial negrita de 12 pixeles. • La fuente para contenidos será Arial de 10 pixeles. • La fuente para detalles de autor será Arial de 8 pixeles. • La fuente para subtítulos será Arial de 11 pixeles. • Interlineado sencillo. • Títulos centrados. • Detalles de autor con alineación a la izquierda. • Contenidos con alineación justificada. • El contenido debe comenzar con un único y preciso título en altas y bajas, de

manera que el usuario lea rápidamente de que trata el contenido, sin necesidad de leerlo en su totalidad.

5.6 DOMINIO DE INTERNET DEL GOBIERNO DEL ESTADO DE MORELOS

Un dominio es el nombre que identifica a un sitio web. Cada dominio tiene que ser único en internet. El Gobierno del Estado de Morelos utiliza para sus sitios web, dominios con la terminación .morelos.gob.mx, por lo que cualquier sitio web, debe llevar obligatoriamente la estructura:

dependencia.morelos.gob.mx

Page 18: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

17

Esto responde a un principio de orden institucional e imagen pública que transmita fortaleza de la administración. Es parte de la estrategia de imagen institucional y de marca, y permitirá generar claridad y confianza en los ciudadanos, así como un sentido de pertenencia por parte de las dependencias y entidades del Estado de Morelos. Por otra parte, y para cuestiones de penetración y recordación de los usuarios, se debe pensar en dominios sencillos y prácticos, evitando el uso de siglas, que generalmente no conocen ni forman parte del vocabulario de los ciudadanos, sino únicamente de los funcionarios y trabajadores del Estado de Morelos. EJEMPLO INCORRECTO: Las siglas de la Secretaria de Desarrollo Sustentable son: S.D.S., si el dominio de esta dependencia fuera sds.morelos.gob.mx, no resultaría sencillo para el usuario acordarse del nombre. EJEMPLO CORRECTO: El sitio web de la Secretaria de Desarrollo Sustentable tiene el dominio sustentable.morelos.gob.mx, por lo que es sencillo para el usuario acordarse del nombre.

5.7 RESOLUCIÓN DE PANTALLA

Los sitios web se diseñarán para verse a una resolución de: 1024 x 768 pixeles La resolución de pantalla estándar hace algunos años era de 800 x 600 pixeles. Sin embargo estadísticas recientes, tanto de México como en el resto del mundo, demuestran un incremento consistente y cada vez más importante en el uso de resoluciones de 1024 x 768 ó mayores. Es necesario considerar esta evolución como el nuevo estándar para los sitios de Internet. Será importante también evaluar las estadísticas en el corto plazo, ya que probablemente en poco tiempo el estándar cambie a 1280 x 1024. La resolución de 1024 x 768 debe considerar un área de seguridad, ya que los navegadores de internet utilizan espacio vertical para componentes como la barra de herramientas, y espacio horizontal para elementos como las barra de desplazamiento. De tal forma, el área de seguridad de la resolución 1024 x 768 es aproximadamente de 960 x 600. Se recomienda ubicar cualquier elemento relevante del sitio dentro de las dimensiones del área de seguridad descrita.

Page 19: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

18

Elementos adicionales del sitio fuera de los 600 pixeles de altura requerirán del desplazamiento de la barra para poder visualizarse.

5.8 ESTRUCTURA O LAYOUT

La estructura o layout del sitio web define la ubicación de los espacios de información y navegación, considerando fundamentos de usabilidad (consistencia, jerarquización, fácil reconocimiento y aprendizaje de los espacios de información, etc.). En términos generales, la estructura está diseñada para integrar los diferentes espacios de información a una resolución de 1024 x 768 pixeles, procurando páginas no saturadas. Cada pantalla se encuentra organizada en 3 columnas.

Page 20: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

19

Page 21: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

20

Los sitios Web del Gobierno del Estado de Morelos deben manejar una base reducida de plantillas o templates, que pueden diferenciarse a partir de este nivel (layout), en los siguientes tipos de página:

Los elementos que componen la estructura se detallan en las siguientes láminas, y corresponden a las pantallas de página principal o primer nivel, página de sección o segundo nivel y página de contenido o tercer nivel.

Page 22: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

21

5.8.1 PÁGINA PRINCIPAL O PRIMER NIVEL:

En el diagrama izquierdo se detalla la estructura de la página principal para los sitios web del Estado de Morelos.

Page 23: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

22

5.8.2 PÁGINA DE SECCIÓN O SEGUNDO NIVEL:

En el diagrama izquierdo se detalla la estructura de la página sección para los sitios web del Estado de Morelos.

Page 24: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

23

5.8.3 PÁGINA DE CONTENIDO O TERCER NIVEL:

En el diagrama izquierdo se detalla la estructura de la página de contenido para los sitios web del Estado de Morelos.

Page 25: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

24

5.8.4 ENCABEZADO O HEADER

Menú principal que ayuda al usuario a conocer el funcionamiento del portal y cómo navegar dentro del mismo, apoyándose de elementos alusivos al nombre de cada rubro.

Logo Nueva Visión

Logo de la Dependencia u Organismo, responsable del sitio

Menú superior o Top Menú que ayuda al usuario a dirigirse a otros sitios del Gobierno del Estado de Morelos

Page 26: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

25

5.8.5 BLOQUE PRINCIPAL

El Bloque Principal, ubicado en la parte superior de la columna izquierda, muestra los contenidos principales en orden jerárquico.

Page 27: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

26

5.8.6 BLOQUE PARA PUBLICIDAD O BANNERS

En este bloque, se podrán publicar banners de la dependencia para eventos, convocatorias, avisos, etc.

Page 28: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

27

5.8.7 BLOQUE CENTRAL

Es el bloque de información más grande de la página principal y se ubica al centro de la misma, puede dividirse en dos columnas si se desea. En él se deben colocar los contenidos más relevantes de la dependencia hacia el usuario, se recomienda colocar en este apartado los trámites, servicios, convocatorias, etc.

Page 29: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

28

5.8.8 NOTICIAS

En este bloque se mostrarán las noticias de la dependencia.

Page 30: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

29

5.8.9 VIDEO DE YOUTUBE Y BANNERS TRANSVERSALES

En este bloque deberán publicarse lo videos de youtube de la dependencia o del Gobierno del Estado en caso de no contar con un video propio. El bloque de banners transversales (heredados del portal principal) muestra las campañas que se pretenden difundir por todas las dependencias del Poder Ejecutivo.

Page 31: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

30

5.8.10 BLOQUE DE TRANSPARENCIA

En este bloque se presentan los logotipos de la Comisión Estatal de Mejora Regulatoria y del Instituto Morelense de Información Pública y Estadística, así como accesos a los sistemas de Solicitudes de Información y a la página de Información Pública de Oficio.

Page 32: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

31

5.8.11 PIE O FOOTER

Logo de la Dependencia

Estos bloques establecen links a contenidos que son de gran interés para el ciudadano.

Enlaces a Redes Sociales de la Dependencia o Titular

Page 33: Manual Lineamientos Web 1.0 - MORELOSmorelos.gob.mx/.../files/lineamientos/Manual_Lineamientos_Web_1.0.pdf · conjunto de buenas prácticas y recomendaciones donde se incluyen conceptos

32

6. CONTACTO

Para cualquier aclaración relativa a este manual favor de dirigirse a la Dirección General de Sistemas e Informática de la Secretaria de Información y Comunicación del Gobierno del Estado de Morelos. Reforma #204 Col. Reforma, Cuernavaca Tel.: 3-13-32-84 sicom.morelos.gob.mx

REFERENCIAS

http://agesic.gub.uy/innovaportal/file/549/1/Guia_Completa_simple_faz.pdf http://www.gobiernofacil.go.cr/e-gob/gobiernodigital/informes/Informe_INCAE2013.pdf