View
8
Download
0
Category
Preview:
Citation preview
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
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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.
Lineamientos para el diseño de
Portales Web Institucionales
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.
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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
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.
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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.
Lineamientos para el diseño de
Portales Web Institucionales
2016-2022
pág. 13
Uso correcto
Uso incorrecto
451px
1141px
Lineamientos para el diseño de
Portales Web Institucionales
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
4. Máximo 6 elementos
Uso correcto
Uso alternativo
Lineamientos para el diseño de
Portales Web Institucionales
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
2. Máximo 1 elementos
3. Imagen relacionada con el tema de 253 x 158 pixeles
4. Título descriptivo
5. Son ordenadas automáticamente
Lineamientos para el diseño de
Portales Web Institucionales
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
3. Máximo 5 elementos
Uso correcto
278 px
532 px
Lineamientos para el diseño de
Portales Web Institucionales
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.
Lineamientos para el diseño de
Portales Web Institucionales
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.
Lineamientos para el diseño de
Portales Web Institucionales
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:
Lineamientos para el diseño de
Portales Web Institucionales
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:
Importante: Cualquier publicación del contenido de cualquier otra red
social requiere la aprobación de la DGTID.
Lineamientos para el diseño de
Portales Web Institucionales
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
Lineamientos para el diseño de
Portales Web Institucionales
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
Recommended