Lineamientos para el Diseño De Portales Web Institucionales · 2020. 12. 21. · Portales Web...

Lineamientos para el

Diseño De Portales Web

Institucionales

2016-2022

Lineamientos para el diseño de

Portales Web Institucionales

2016-2022

pág. 2

Contenido

• PRESENTACIÓN .............................................................................................................. 4

• JUSTIFICACIÓN ............................................................................................................... 5

• PALETA DE COLORES .................................................................................................... 6

• TIPOGRAFÍA ..................................................................................................................... 7

• MAQUETADO ................................................................................................................... 7

• ESTRUCTURA .................................................................................................................. 8

• CABECERA INSTITUCIONAL ........................................................................................ 10

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

1. MISIÓN, VISIÓN Y OBJETIVO .............................................................................................. 17



2016-2022

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

• ANEXOS ......................................................................................................................... 22



2016-2022

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.



2016-2022

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.



2016-2022

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 Imagen 1 Paleta de colores para Portales Web



2016-2022

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



1234567890

Open Sans Regular



1234567890

Open Sans Bold



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.



2016-2022

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



2016-2022

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 Menu Pricipal Redes sociales

Menú Secundario

Contenedor

Enlaces

Enlaces principales a sitios de

gobierno

Contacto

Dirección y Teléfonos de

contacto

Teléfono de

emergencia

oaxaca.gob.mx

Imagen 4 Ejemplo de la estructura de un portal web de la APE



2016-2022

pág. 10

Cabecera Institucional

Leyenda del Año

Leyenda vigente aprobada por el congreso del Estado de Oaxaca.

Enlace a la página de Oaxaca

Texto de enlace al portal de Oaxaca.

Imagen 5 Enlace al Portal Web de Oaxaca

Menú principal

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

Imagen 7 Implementación incorrecta del menú principal



2016-2022

pág. 11

Redes Sociales y correo institucional

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

Logo de la Dependencia o Entidad

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

100px



2016-2022

pág. 12

Buscador

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

Menú secundario

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

Secciones

Inicio

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.



2016-2022

pág. 13

Uso correcto

Uso incorrecto

451px

1141px



2016-2022

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


Uso correcto

Uso alternativo



2016-2022

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


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

4. Título descriptivo

5. Son ordenadas automáticamente



2016-2022

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


Uso correcto

278 px

532 px



2016-2022

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.

¿Quiénes somos?

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.



2016-2022

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.

Transparencia

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

Datos de interés

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.



2016-2022

pág. 19

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

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

Trámites y Servicios

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

Contacto

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.

Sala de prensa

1. Noticias

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



2016-2022

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.

Multimedia

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.

Contenido de Redes Sociales

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

social requiere la aprobación de la DGTID.



2016-2022

pág. 21

Footer

Enlaces a Dependencias

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.

Ubicación

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

Número único de emergencia

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

270px

300px



2016-2022

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

Liga al correo institucional Obligatorio

Lineamientos para el Diseño De Portales Web Institucionales · 2020. 12. 21. · Portales Web...

Documents

Transcript of Lineamientos para el Diseño De Portales Web Institucionales · 2020. 12. 21. · Portales Web...