1 Formulario web en mejora continua https://www.gob.mx 2017 1

2 2 1. Guía de estilo para gob.mx Guía de estilo para gob.mx 1. Manual de uso de la gráfica base para la ventanilla única de gob.mx Manual de uso de la gráfica base para la ventanilla única de gob.mx 1. Estándar Técnico para el Formato Único de Trámites y Servicios en la Plataforma gob.mx, podrá encontrar los siguientes estándares: Estándar Técnico para el Formato Único de Trámites y Servicios en la Plataforma gob.mx ● Estándar de datos personales formularios web Estándar de datos personales formularios web ● Estándar de datos de contacto formularios web Estándar de datos de contacto formularios web ● Estándar de datos de domicilio formulario web Estándar de datos de domicilio formulario web ● Usabilidad en formularios Usabilidad en formularios 1. Estándar para correos y formatos descargables Estándar para correos y formatos descargables 1. Guía de implementación Digital Analytix Guía de implementación Digital Analytix 2. Videos tutoriales sobre la implementación de gráfica base Videos tutoriales sobre la implementación de gráfica base Estándares de gráfica base Guías y herramientas de implementación Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3)

3 3 Encabezado y pie de página 1 2 Breadcrumb 3 Favicon Ortografía 4 5 Revisión de altas y bajas 6 8 Alineación de los elementos 9 10 Estructura en tercios Uso y validación de campos obligatorios Título y subtítulo 7 Redacción en segunda persona 11 Uso correcto de alertas 12 Uso de tooltips 13 Uso y orden de los botones Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

4 4 1. Encabezado y pie de página Para visualizar correctamente el encabezado y pie de página, se debe de ingresar el framework copiando la siguiente liga: https://framework- gb.cdn.gob.mx/assets/styles/main.css Nota: dicha aplicación se puede corroborar entrado al código fuente del formulario. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

5 5 2. Breadcrumb El breadcrumb reduce el número de acciones que un visitante del sitio Web tiene que tomar con el fin de llegar a una página de nivel superior. Se deberá colocar el breadcrumb en la parte superior izquierda del sitio. Indicando con el ícono de casa el home, el cual deberá dirigir a la página principal de gob.mx; seguido por inicio, el cual debe llevar al inicio del formulario; y posteriormente irá la sección en la que se encuentra en usuario, la cual deberá de ir en active. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

6 6 3. Favicon El favicon es la imagen característica de gob.mx, la cual debe de ser visualizada en la pestaña del sitio. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

7 7 4. Título y subtítulo El título debe de cubrir los 2/3 primeros de la pantalla y el tamaño de letra debe corresponder a h1 (54px). Para los subtítulos el tamaño correcto es h2 (38px). Los subtítulos deberán llevar debajo un separador red. Títulos en h1 Separador red Subtítulos en h2 Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

8 8 5. Ortografía Es importante que en todo el formulario se respeten las reglas ortográficas y gramaticales. 6. Revisión de altas y bajas El uso combinado de minúsculas y mayúsculas en el interior de una misma palabra no es propio de nuestro sistema ortográfico y debe evitarse en la lengua general. Esta regla se exenta en nombres y/o denominaciones. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

9 9 7. Redacción en segunda persona Es importante que el ciudadano se sienta identificado con el lenguaje del formulario, por lo que todo el texto deberá estar redactado en segunda persona. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

10 10 8. Alineación de los elementos La estructura de gobmx se rige a través de una cuadrícula de 12 columnas que ayudan a dar orden al contenido dentro del portal y a mejorar la lectura del usuario. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

11 11 9. Alineación en tercios La alineación de todos los contenidos dentro de gob.mx deben de encontrarse alineados a los margenes exteriores, se recomienda tomar de referencia el logotipo de gobmx y el ícono de búsqueda. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

12 12 10. Uso y validación correcta de campos obligatorios Los campos obligatorios a llenar en un formulario deberán llevar " * ". Los campos que presenten un error en la captura, o no sean capturados deberán subrayarse con rojo y mostrar la leyenda del error suscitado. Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) Elementos básicos a revisar de gráfica base

13 13 11. Uso correcto de alertas La ubicación de las alertas deben de posicionarse en la parte superior justo después del nombre del trámite. De acuerdo a la acción que se desee resaltar será el color de la alerta a utilizar. Elementos básicos a revisar de gráfica base Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3)

14 14 12. Uso de tooltips La información adicional que se desee agregar a cierto campo deberá de colocarse dentro del icono de ayuda como tooltip, al pasar el cursor sobre éste, deberá aparecer un recuadro con fondo negro y el contenido en letras blancas. Es importante revisar su relevancia dentro del formulario. Elementos básicos a revisar de gráfica base Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3)

15 15 13. Uso y orden de los botones Las acciones neutrales deben de poseer el color más bajo para que no compita con otras acciones; las acciones positivas necesitan un contraste más alto (azul), mientras que las acciones negativas no deben de tener mayor contraste que las positivas (rojo). El orden correcto de los botones es el siguiente: Elementos básicos a revisar de gráfica base Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3)

16 Notificación por correo electrónico Acuse o resolución 16 Consulta la Guía de implementación: https://goo.gl/4XarWH https://goo.gl/4XarWH Consulta el html: https://goo.gl/Rac2tO https://goo.gl/Rac2tO Elementos básicos a revisar de gráfica base Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3) https://goo.gl/Rac2tO

17 Elementos a validar de Analíticos Con la finalidad de obtener y monitorear las métricas de visitas a los formularios, se deberá implementar el Tag Digital Analytix y los siguientes pasos según aplique el caso: 1.- Inserción del tag (dentro del body y lo más pegado a la etiqueta que lo abre) 2.- Medición de buscador interno (En caso de que su formulario cuente con un buscador interno) 3.- Medición de interacciones (Aplicarlo a todos los botones e hipervínculos) 4.- Medición de actividad de usuarios registrados (Únicamente aplica a los trámites que requieren que el usuario inicie sesión) 5.- Medición de formularios (Implementar la clase “ns_” en la etiqueta y en cada uno de los campos del formulario) El Tag con sus 5 pasos debe de implementarse en todas las pantallas del trámite. 17 Consulta la Guía de implementación: https://goo.gl/JIvmbzhttps://goo.gl/JIvmbz Opinión jurídica Gráfica base Formular io web MC (E3) Analítico s Segurida d (HTTPS) Análisis de vulnerabi lidades Pruebas de estrés Accesibili dad web Revisión de MC (E3) Aplicación de MC (E3)

18 Se deberá agregar el componente de encuesta de satisfacción, la cual deberá desplegarse al momento de que el usuario finalice el proceso del trámite exitosamente. 18 Encuesta de satisfacción Consulta la Guía de implementación: https://goo.gl/ZZBjClhttps://goo.gl/ZZBjCl Pruebas de estrés Gráfica base Formular io web (E3) Analítico s Opinión jurídica Segurida d SSL Análisis de vulnerab ilidades Accesibili dad web

19 19 Certificados de Seguridad SSL Los formularios web deberán contar con certificado de seguridad SSL (HTTPS). En caso de que la dependencia no cuente con certificados SSL, podrá solicitarlos a la UGD siguiendo el siguiente proceso: ●Capturar la información solicitada ●Enviar la información a [email protected] ●Se recibirá un correo por parte de la empresa Trend Micro en el cual solicita validar la información, el cual deberá ser contestado. ●De igual forma se recibirá posteriormente una llamada telefónica por parte de Trend Micro ●Ingresa a la liga proporcionada para ingresar el CSR. ●Se recibirá un correo con la confirmación de la generación del certificado. ●Descargar el certificado. Solicitud Validado Descarga Pruebas de estrés Gráfica base Formular io web (E3) Analítico s Opinión jurídica Segurida d SSL Análisis de vulnerab ilidades Accesibili dad web

20 Análisis de vulnerabilidades 20 Los análisis de vulnerabilidad deberán entregarse en forma confidencial y por oficio, en un CD, DVD o USB adjunto, y dentro de las fechas establecida en el plan de trabajo. Tienen una vigencia de 6 meses. Análisis de vulnerabilidades estático Análisis del código de la aplicación con el objetivo de descartar el uso de prácticas de programación que generen riesgo de vulnerabilidades. Análisis de vulnerabilidades dinámico Análisis de la aplicación de manera dinámica desde el exterior de la infraestructura que aloja el aplicativo, con el objetivo de descartar el uso de prácticas de configuración que generen riesgo de vulnerabilidades. NOTA: Los análisis de vulnerabilidad los podrán aplicar utilizando la herramienta (software) que la dependencia decida. Para las vulnerabilidades de nivel bajo y medio, se deberá anexar un plan de trabajo describiendo cómo solventarán dichas vulnerabilidades, y las de nivel alto/crítico deberán ser solventadas inmediatamente. Pruebas de estrés Gráfica base Formular io web (E3) Analítico s Opinión jurídica Segurida d SSL Análisis de vulnerab ilidades Accesibili dad web

21 21 Pruebas de estrés Las pruebas de estrés de sus formularios miden la capacidad de respuesta al someterse a una cierta cantidad de usuarios. Evitar realizar cambios, previo y durante la operación del trámite que afecten la estabilidad de su funcionamiento. Las pruebas de estrés deberán ser entregadas junto con el oficio de Análisis de vulnerabilidades, adjunto en un CD, DVD o USB. Tienen una vigencia de 6 meses. Pruebas de estrés Gráfica base Formular io web (E3) Analítico s Opinión jurídica Segurida d SSL Análisis de vulnerab ilidades Accesibili dad web

22 22 Opinión jurídica La dependencia deberá contar con una opinión del área jurídica en términos de estar dando cumplimiento con las leyes o normas que regulen la seguridad de información, protección de datos personales, prevención de vulnerabilidades o riesgos de seguridad de las aplicaciones. ●Dicha opinión deberá firmarse por parte del área jurídica o normativa de la institución. ●Deberá hacerse llegar a ésta Unidad vío oficio. ( Se recomienda enviar con toda la documentación referente a seguridad) Pruebas de estrés Gráfica base Formular io web (E3) Analítico s Opinión jurídica Segurida d SSL Análisis de vulnerab ilidades Accesibili dad web

23 23 A (Semana 1) B (Semanas 2 y 3) C (Semana 4) EstatusNombreAcciónResponsable 1AbiertoDar de alta en sistemaUGD 2AsignadoReferir un trámite/entregable abierto a una dependenciaUGD 3 Revisión en Proceso Comenzar el trabajo de revisión del estándar de servicios digitales de gob.mx OIC 4 Cerrado sin observaciones Indica que se han concluido los trabajos de revisión del estándar de servicios digitales de gob.mx sin que se haya obtenido alguna observación de mejora y/o actualización. OIC 5 Cerrado enviado a mejora Indica que se han concluido los trabajos de revisión del estándar de servicios digitales de gob.mx, obteniendo observaciones de mejora y/o actualización, por lo que los trámites en dicho estatus pasarán a una segunda etapa de trabajo donde se solventarán las observaciones realizadas por el OIC de la dependencia. OIC Gobtools Estados de trabajo revisión de mejora continua OIC

24 24 Recomendaciones al OIC 1. Identifica y conoce los estándares de gráfica base para una revisión más acertada y completa. 2. Identifica al enlace de la dependencia y al enlace por parte de la UGD para asesorarte en el proceso de revisión de mejora continua. 3. Comunicate con el enlace de la dependencia para que te proporcione un usuario de prueba para realizar la revisión y validación. 4. Crea un Plan de revisión por Ola. 5. Identifica la totalidad de las pantallas de tu formulario. 6. Actualiza siempre la herramienta de gobtools después de cualquier avance o en caso de comentarios o dudas.

25 25 Enlaces UGD Nubia Paola Patiño Avilés Coordinadora de Gestión del Cambio Unidad de Gobierno Digital Tel:(55) 2000 3000 ext. 4392 Correo electrónico: [email protected]@ugd.gob.mx Itzel Balderas Rodríguez Unidad de Gobierno Digital Tel:(55) 2000 3000 ext. 44467 Correo electrónico: [email protected]@ugd.gob.mx Danya Pérez Rodríguez Unidad de Gobierno Digital Correo electrónico: [email protected]@ugd.gob.mx

26 ¡Gracias! Ciudad de México, 15 de diciembre de 2016 ¡Muchas gracias! 26