Lineamientos para el Diseño De Portales Web Institucionales

Lineamientos para el

Diseño De Portales Web

Institucionales

2016-2022

pág. 2

Contenido

 LEYENDA DEL AÑO ... 10

 ENLACE A LA PÁGINA DE OAXACA ... 10

 MENÚ PRINCIPAL ... 10

 REDES SOCIALES Y CORREO INSTITUCIONAL ... 11

 LOGO DE LA DEPENDENCIA O ENTIDAD... 11

 BUSCADOR ... 12  MENÚ SECUNDARIO ... 12 • SECCIONES... 12  INICIO ... 12 O SLIDER ... 12 O EJES DE GOBIERNO ... 14 O NOTICIAS RECIENTES ... 15 O LO DESTACADO ... 16 O MULTIMEDIA ... 17  ¿QUIÉNES SOMOS? ... 17 O ACERCA DE ... 17

pág. 3 O FUNCIONES ... 17 O TITULAR DE LA DEPENDENCIA... 18 O DIRECTORIO ... 18 O ESTRUCTURA ORGÁNICA ... 18 O MANUAL DE ORGANIZACIÓN ... 18 O MARCO JURÍDICO ... 18  TRANSPARENCIA ... 18  DATOS DE INTERÉS ... 18  TRÁMITES Y SERVICIOS ... 19  CONTACTO ... 19 1. UBICACIÓN GEOGRÁFICA ... 19 2. FORMULARIO ... 19 3. TELÉFONOS ... 19  SALA DE PRENSA ... 19 1. NOTICIAS ... 19 2. BOLETINES ... 20 3. EVENTOS ... 20 4. GALERÍA ... 20  MULTIMEDIA ... 20

 CONTENIDO DE REDES SOCIALES ... 20

• FOOTER ... 21

 ENLACES A DEPENDENCIAS ... 21

 UBICACIÓN ... 21

 NÚMERO ÚNICO DE EMERGENCIA ... 21

pág. 4

Presentación

Los portales web gubernamentales son el medio por el cual interactúa ciudadanía y gobierno; sus funciones principales son proveer información de interés a las y los ciudadanos y favorecer el acercamiento e intercambio de información.

Por lo anterior, la Dirección General de Tecnologías e Innovación Digital (DGTID) promueve la modernización y actualización continua de los portales web gubernamentales. Para garantizar la seguridad y continuidad del servicio se debe realizar un trabajo en conjunto con los enlaces informáticos designados por los titulares de cada una de las Dependencias y Entidades de la Administración Pública Estatal (APE) con quienes se llevan a cabo acciones para optimizar e implementar herramientas que favorezcan la accesibilidad y la interacción.

Con la finalidad de presentar un modelo homologado y alineado a la imagen institucional del Gobierno del Estado, se elaboran los presentes lineamientos para el diseño de portales web gubernamentales.

pág. 5

Justificación

Para garantizar la generación de Portales Web homologados y alineados a la imagen institucional del Gobierno del Estado, se implementó un Sistema de Gestión de Contenido (Wordpress) en un servidor multisitios.

El multisitios fue optimizado y personalizado para garantizar la seguridad y estabilidad de todos los portales, así como para facilitar los mantenimientos preventivos, correctivos y actualizaciones. Permite la gestión y control de usuarios y proporciona ambientes de desarrollo para pruebas y puesta en producción de plugin’s o cualquier otra herramienta.

Además, se diseñó una plantilla genérica garantizando un diseño responsivo que permite la visualización correcta del contenido en cualquier dispositivo móvil, laptops o computadoras de escritorio. Cada elemento dentro de la plantilla de Portales Web de la APE fue seleccionado tras un análisis de temas de interés de los ciudadanos, mejores prácticas y los puntos en común de cada Dependencia, así como las particularidades de cada una.

pág. 6

Paleta de colores

La aplicación en color está basada en la paleta cromática del Manual de Identidad del Gobierno del Estado de Oaxaca, con ligeras variantes para su aplicación en la web. HEXADECIMAL RGB #622779 98, 39, 121 #8D3B88 141, 59, 136 #C4131B 196, 19, 27 #D60071 214, 0, 113 #E8550D 232, 85, 13 #E6AD2F 230, 173, 47 #8CC026 140, 192, 38 #1F934C 31, 147, 76 #00A097 0, 160, 151 #545454 84, 84, 84 #828282 130,130, 130

pág. 7

Tipografía

La fuente tipográfica oficial para los títulos es “UNIVIA PRO” en todas sus versiones Regular Bold. En los contenidos se utilizará la fuente “OPEN SANS”.

Univia Pro Regular

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890

Univia Pro Bold

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890

Open Sans Regular

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz

1234567890 Open Sans Bold

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890

Imagen 2 Fuentes oficiales para Portales Web

Maquetado

La librería utilizada para la creación del diseño de los Portales de la APE es Bootstrap 4.3. El cual garantiza la adaptabilidad a diferentes tamaños de pantallas.

pág. 8

Estructura

Imagen 3 Estructura de Portales Web de la APE

Leyenda del año

Logo de Oaxaca Menú principal Íconos de redes sociales

Logo de la Dependencia Buscador Menú Secundario Contenedor Altura automática Footer oaxaca.gob.mx 50px Galería Principal 1 col Contenedor a 1 columna 4 col 4 col 4 col Contenedor a 3 columnas Contenedor a 2 columnas 6 col 12 col 6 col 300px 27px 75px 50px 25px 75px

pág. 9

1. Leyenda del año

2. Logo de Oaxaca

3. Menú principal

4. Íconos de redes sociales y/o correo oficial

5. Logo de la dependencia

Leyenda del Año

oaxaca

.

gob

.

mx

Menú Secundario

Contenedor

Enlaces

Enlaces principales a sitios de gobierno

Contacto

oaxaca

.

gob

.

mx

pág. 10

Cabecera Institucional



Leyenda vigente aprobada por el congreso del Estado de Oaxaca.



Texto de enlace al portal de Oaxaca.

Imagen 5 Enlace al Portal Web de Oaxaca



Elemento obligatorio dentro del portal, debe como mínimo contenerlos los elementos listados en la tabla 1 (ver anexos) respetando el orden y agrupación, adicionalmente pueden agregarse particularidades de cada Dependencia o Entidad cuidando que no se exceda un máximo de 7 elementos en el primer nivel.

Debe hacerse un esfuerzo en concretar, agrupar y mostrar de la forma más resumida al usuario cuáles son los contenidos del Portal.

Uso correcto:

Imagen 6 Implementación correcta del menú principal

Uso Incorrecto:

Inicio ¿Quiénes Somos? Transparencia Datos de interés Trámites y

Servicios Sala de Prensa Contacto

Inicio Convocatoria II Transparencia Mi Sistema Trámites y

Servicios Sala de Prensa Contacto Otro menú más

pág. 11



Información obligatoria. Accesos directos a las redes sociales (Facebook, Twitter y/o YouTube) de la Dependencia o Entidad, cada enlace tendrá el ícono de la red social a la cual se liga.

Se permite la publicación de un máximo de 3 enlaces. De manera opcional se puede implementar el ícono de correo con un enlace directo al correo institucional de la Dependencia.

Imagen 8 íconos de redes sociales permitidos



El presente escudo es el logo de Oaxaca en su versión blanca y fondo negro propuesta en el Manual de Identidad del Gobierno del Estado de Oaxaca seguida de las siglas y nombre de la Dependencia en cuestión.

SIGLAS Nombre de la Dependencia

Imagen 9 Logotipo de Oaxaca para portal web

Imagen 10 Ejemplo de logotipo

251px

pág. 12



Formulario de búsqueda para ubicación de contenido de las noticias publicadas.



Elemento opcional ubicado debajo del buscador, permiten que el ciudadano acceda a informaciones básicas que no se encuentran en el menú principal.

Secciones



Vista principal del sitio web, contiene los siguientes elementos:

o Slider

Elemento obligatorio que se rige por las siguientes características:

1. Imágenes de 1141 x 451 pixeles

2. Máximo 10 elementos

3. Mínimo 3 elementos

4. Espacio de 3 segundos por imagen

5. Epígrafe informativo y un hipervínculo a la información completa.

6. Se prohíbe el uso de imágenes como fondo, texturas, degradados u

otro elemento que impida la visibilidad del texto o elemento a mostrar al usuario.

pág. 13 Uso correcto

Uso incorrecto

451px

pág. 14

o Ejes de Gobierno

Elemento opcional, muestra los ejes del Gobierno Actual y el contenido de cada ficha puede ser sustituido según las necesidades de cada Dependencia o entidad respetando los siguientes puntos:

1. Título del tema

2. Descripción de no más de 3 líneas

3. Mínimo 3 elementos

4. Máximo 6 elementos

Uso correcto

pág. 15 Uso incorrecto

o Noticias Recientes

Es obligatorio que el sitio o portal web cuente con la publicación de mínimo 3 entradas. Aunado a ello es obligatoria la utilización de la esta sección dentro de la página de inicio presentadas en forma de una tarjeta con una imagen ilustrativa seguida del título de la publicación. Características importantes:

1. Mínimo 3 elemento

2. Máximo 1 elementos

3. Imagen relacionada con el tema de 253 x 158 pixeles

4. Título descriptivo

pág. 16 Imagen 11 Tarjeta de noticias recientes

o Lo Destacado

Sección obligatoria, muestra contenido que puede ser de mayor importancia para la ciudadanía mediante un slider secundario. Es representada por una imagen con un enlace al texto que describe la noticia. 1. Imagen de 532 x 278 pixeles

2. Mínimo 1 elemento

3. Máximo 5 elementos

Uso correcto

pág. 17 Uso incorrecto

o Multimedia

Sección opcional, destinada a difundir contenido de la cuenta de FB, Tw o YouTube de la Dependencia.



o Acerca de

Sección opcional, de existir debe contener la razón de ser de la Dependencia.

1. Misión, Visión y Objetivo

Sección obligatoria, debe contener los siguientes subtítulos: 1. Visión

2. Misión

3. Objetivos

o Funciones

Sección obligatoria, la cual contiene la descripción de las atribuciones de la Dependencia. Pueden estar descritas según algún lineamiento legal.

pág. 18

o Titular de la Dependencia

Sección obligatoria, debe contemplar el nombre completo, cargo y mensaje de bienvenida u hoja de vida; este último punto es opcional.

o Directorio

Listado del personal de la Dependencia, debe mostrar nombre, puesto, contacto y ubicación de cada servidor público.

o Estructura orgánica

Diagrama de las Direcciones, Departamentos o Coordinaciones según orden jerárquico. En caso de que la estructura orgánica sea extensa, deberá adjuntarse en archivo PDF.

o Manual de organización

Para esta sección se debe adjuntar un documento que describa las funciones de las unidades administrativas que componen la Dependencia.

o Marco Jurídico

Elemento obligatorio, texto que hace referencia a Leyes, reglamentos y acuerdos que regulan a la Dependencia. También pueden incluirse normas, criterios o lineamientos. En caso de requerirlo puede adjuntar un PDF con la información.



Enlace obligatorio a la página que implementa el plugin de transparencia.



Esta sección se ubica únicamente en el menú; son enlaces que redireccionan páginas de transparencia.

• Información Pública. - Enlace al portal de transparencia, apartado de información pública.

pág. 19

• Gobierno abierto. - Enlace a la página principal de transparencia.

• Transparencia presupuestaria. - Enlace a la página de transparencia presupuestaria.



Apartado obligatorio para todas aquellas Dependencias que ofrecen trámites o servicios.

Esta información debe ser presentada en formato de tabla con los siguientes datos obligatorios:

• Nombre del trámite o servicio • Descripción ciudadana

• Requisitos • Costo

• URL del trámite en línea

• Ubicación para realizar el trámite • Teléfono(s) de ayuda ciudadana • Formatos descargables



Página obligatoria en los portales de la APE, consta de los siguientes elementos:

1. Ubicación geográfica

Implementación del plugin de ubicación SHORTCODESULTIMATE para puntualizar la ubicación de la Dependencia mediante el uso de mapas de Google.

2. Formulario

Implementación del plugin de Contacto desarrollado por la DGTID.

3. Teléfonos

Número(s) telefónico(s) de contacto con la Dependencia.



1. Noticias

Es obligatoria la captura de mínimo 3 noticias, las cuales pueden tener una o más categorías:

pág. 20 • Galería Principal

• Lo destacado • Boletines

2. Boletines

Sección opcional dentro de la página de Inicio, se trata de una noticia con esta categoría, por lo que de existir requiere lo siguiente:

• Título descriptivo

• Imagen de destacado: 532 x 278 pixeles

• Texto que descriptivo de la actividad relacionada

3. Eventos

Implementación de plugin All in One Calendar, el cual permite capturar eventos de la Dependencia o Entidad y hacerlos públicos a la ciudadanía.

4. Galería

Implementación del plugin GrandWP Gallery, la cual permite seleccionar las imágenes a mostrar.



Publicación de audio o video de la Dependencia, este apartado es

opcional, y está permitida la publicación de contenido de: Flicker, Pinterest o YouTube.

Importante: Cualquier otra publicación de alguna otra red social distinta

requiere la aprobación del a DGTID.



Esta sección es opcional y su finalidad es la publicación de contenido de cualquiera de las siguientes redes sociales:

• Twitter • Facebook

Importante: Cualquier publicación del contenido de cualquier otra red

pág. 21

Footer



Listado del nombre de máximo 10 Dependencias con temas relacionados al Portal Actual. Cada elemento debe contener un enlace al Sitio o Portal Web que se lista.



Dirección en formato de texto de la Dependencia en cuestión, seguida de teléfonos de contacto.



Imagen sin fondo del número único de emergencia, en tono morado. Dimensión: 300 por 270 pixeles.

270px

pág. 22

Anexos

Tabla 1 Clasificación de secciones de los portales web

Sección Nombre

¿Quiénes Somos?

Acerca de... (siglas de la Dependencia) Opcional

Misión, visión y objetivos Obligatorio

Funciones Obligatorio

Titular de la Dependencia Obligatorio

Directorio Obligatorio

Estructura orgánica u organigrama Obligatorio

Manual de organización Obligatorio

Marco Jurídico Obligatorio

Transparencia Transparencia Obligatorio

Datos de Interés _{Información pública} Obligatorio

Gobierno abierto Obligatorio

Transparencia presupuestaria Obligatorio

Trámites y servicios Obligatorio

Contacto

Ubicación geo-referenciada Obligatorio

Formulario Obligatorio Teléfonos Obligatorio Sala de prensa Boletines Opcional Noticias Obligatorio Eventos Opcional Galería Opcional Redes sociales Twitter Obligatorio Facebook Obligatorio