Índice. Introducción 04 Objetivos. 05 Roles 06

Transcripción

1 GUÍA DE ESTILO WEB PARA LA CONSTRUCCIÓN DE SITIOS DE INSTITUCIONES EDUCATIVAS DEL SECTOR DESCENTRALIZADO DE LA SECRETARÍA DE EDUCACIÓN DEL GOBIERNO DEL ESTADO DE MÉXICO (CATEGORÍA 4)

2 Índice Introducción 04 Objetivos. 05 Roles Arquitectura de la información 1.1. Mapa de sitio Asignación de contenidos a tipos de páginas Página principal Página de contenido Estructura del sistema Diseño de la interfaz 2.1. Estructura de la página (topología) Retícula Tipos de ventana Encabezados Pie de página Herramientas de navegación Plantillas de diseño y uso de elementos 3.1. Plantilla de diseño Página principal Páginas de texto, con columna única Página de texto, con dos columnas Tablas Gráficos Sitios de interés Mapa de sitio Contáctanos Elementos de diseño Logotipos Tipo de fuente Enlaces Paletas de color Íconos Plecas y elementos de estructuración Recursos visuales, sonoros y audiovisuales Imágenes Videos Sonido Contenido dinámico Documentos en otros formatos Lineamientos de contenido 4.1. Información escrita.. 43

3 4.2. Espacio central Espacios laterales Preguntas frecuentes Lenguaje ciudadano Enlaces Diseño para el Acceso Rápido 5.1. Normas Mínimas para facilitar el vía conexión telefónica Peso de las páginas Diagramación de las páginas Uso de presentaciones en Flash Uso de marcos o frames Uso de imágenes de background Uso de Meta Tags adecuados Normas para incorporar elementos gráficos y multimedia Interoperabilidad Estándares internacionales Sistemas para generar feedback (atención a usuarios) 6.1. Formularios del sitio (contáctanos) Correos electrónicos Boletines de noticias y novedades Sistemas para recibir y administrar mensajes de usuarios Foros, blogs y chats Puesta en marcha 7.1. Plan de Pruebas Pruebas de Interfaces y Contenidos Pruebas de Funcionalidades y Operación Pruebas de Carga Pruebas de Seguridad Pruebas de Respaldo y Recuperación Registro y Control de Pruebas y Errores Derechos del Usuario Política de Privacidad Política de uso de información y Licencia Creative Commons Desarrollo de un Plan de lanzamiento Desarrollo de un Plan de Comunicaciones El Sitio como apoyo de la Institución Métricas de Evaluación de Desempeño Internas y Externas Google Analytics Enlaces desde otros sitios 58

4 Introducción Brindar una mayor y mejor oferta de contenidos y servicios a través del reconocimiento de las diferencias y de las necesidades de los ciudadanos, es una manera de fomentar un mayor acercamiento del gobierno del estado con la sociedad. A través del portal electrónico y los sitios web se desea mejorar los servicios y facilitar a los usuarios el acceso a la información, por lo que para garantizar una experiencia agradable y fomentar una imagen positiva del gobierno, es necesario que las dependencias presenten sitios web actualizados, fáciles de usar, atractivos, accesibles, consistentes con la imagen del Gobierno del Estado de México. La presente guía está sustentada en el Manual de Uso de la Identidad Gráfica del Gobierno del Estado de México, editado por la Coordinación General de Comunicación Social, y tiene como objetivo que las diferentes páginas que conforman el portal web del Gobierno del Estado, mantengan una imagen gráfica homogénea pero diferenciada. Es por eso que el diseño se basó en la filosofía de la Diversidad Armónica que enfatiza las funciones y el contenido como las piedras angulares de un portal diverso. Se crearon una serie de lineamientos que ahora sirven como guía para que los diseñadores y programadores de páginas de las diferentes dependencias del gobierno tengan las pautas indicadas para el buen funcionamiento y mantenimiento de los sitios y portales del Gobierno del Estado de México. Los lineamientos fueron divididos en cuatro categorías, en la primera se especifican las características que deberán cumplir los sitios de las secretarías. La segunda aplica a los sitios de organismos auxiliares, descentralizados y desconcentrados, así como a los micrositios temáticos de programas y proyectos gubernamentales. La tercera categoría señala los requerimientos mínimos de identidad para los sitios de imagen abierta. Hasta el momento se han identificado y autorizado los siguientes: Gubernatura, Radio y Televisión Mexiquense, Turismo, Niños, Jóvenes (Instituto Mexiquense de la Juventud), Cultura (Instituto Mexiquense de Cultura), Artesanías, Pirotecnia (Instituto Mexiquense de la Pirotecnia), Parques y Fauna. Y la categoría cuatro se enfoca los sitios de las instituciones educativas de nivel medio superior y superior. Los siguientes apartados ofrecen una serie de recomendaciones y especificaciones relacionadas con los contenidos, el diseño, el uso de recursos visuales, sonoros, audiovisuales y de navegación, que deberán seguirse para mantener la funcionalidad de los sitios de categoría cuatro. 4

5 Objetivos y estrategias Hacer una sitio web puede ser algo muy sencillo, sin embargo, lograr que cumpla su objetivo y sea interesante para los visitantes es un gran reto. Por ello el Gobierno del Estado de México ha desarrollado una estrategia de homologación de los sitios de todas sus unidades administrativas con la finalidad de que cumplan con altos estándares de calidad y denoten confiabilidad en los servicios que se ofrecen. Se ha sistematizado el proceso de diseño y desarrollo de los sitios para facilitar a los responsables de cada unidad administrativa su creación y al mismo tiempo garantizar una oferta de contenidos útiles a la comunidad mexiquense a través de una imagen estándar y consistente con la administración del Gobierno del Estado de México. La guía tiene por objeto servir de pauta de trabajo durante el proceso de rediseño de los sitios web de las instituciones de educación superior pertenecientes al sector descentralizado de la Secretaría de Educación del Gobierno de Estado de México, desde la planificación inicial hasta la puesta en marcha y posterior mantenimiento. Presenta un excelente método para tener una visión completa de cómo rediseñar un sitio con un formato accesible y fácil de implementar. 5

6 Roles La Dirección de Gobierno Electrónico a través de sus diferentes áreas será la encargada de regular y vigilar el cumplimiento de los lineamientos de diseño, imagen, contenido y aspectos técnicos que se establecen en la presente guía, a fin de que los sitios de las instituciones educativas adscritas al Gobierno del Estado de México mantengan una imagen uniforme, sean funcionales e incluyan información y servicios de utilidad. De acuerdo con lo establecido en el Artículo 34 del Reglamento de Tecnologías de la Información del Poder Ejecutivo del Estado de México, las Unidades Administrativas, en el ámbito de su competencia, deben realizar lo siguiente: Mantener la calidad y actualizar la información publicada en las páginas y portales electrónicos. Dar cumplimiento a los lineamientos de imagen, contenido y técnicos para la construcción de páginas electrónicas. Asegurar que sus páginas o portales contengan el dominio institucional del Gobierno del Estado de México. Atender y dar respuesta de forma expedita a la solicitud de servicios, correos electrónicos, mensajes, foros y otros esquemas electrónicos de interacción, así como llevar el registro y control de dichas solicitudes. Realizar la identificación, normalización y modelado de los procesos que soportan los servicios en línea. Incorporar servicios en línea, así como operar los procesos que permitan proporcionar atención oportuna a las solicitudes recibidas por este medio. Implementar estándares de calidad y mejora continua en los procesos soporte de los servicios en línea. Para lograr lo anterior, las Unidades Administrativas deberán asignar a un responsable del sitio web que se encargará de la parte tecnológica y a un responsable de la información que se evocará al contenido, ambos coordinarán los esfuerzos de todo el equipo de trabajo para el rediseño y manutención del sitio. A continuación se detalla el perfil de los profesionales que deben intervenir en las diferentes tareas que involucra el desarrollo y operación de un sitio web: Responsable de sitio. Su tarea principal será la coordinación los equipos de trabajo y ser la contraparte permanente del proyecto, además será el encargado de la seguridad y administración de las cuentas del sitio así como de la asignación de perfiles para el desarrollo del proyecto. Debe tener claro cada uno de los procesos y metodologías que serán aplicadas. Programador. Programará los diferentes componentes del sitio (páginas, formularios, funcionalidades) y estructurarán los documentos bajo las recomendaciones tecnológicas y operativas establecidas. 6

7 Responsable de información. Definirá el estilo de los contenidos de las diferentes secciones del sitio y aprobará su publicación, con el objeto de poder dar respaldo a las modificaciones, actualizaciones y nuevas decisiones relativas al contenido del sitio. Deberá estar en contacto con el personal de la institución que tenga la capacidad para interpretar adecuadamente los desafíos de la institución y los puedan transformar en elementos concretos. Se requiere que esté en constante comunicación con las áreas que manejan las líneas de trabajo de la institución (dirección programática y estratégica); quienes trabajan en la forma de darla a conocer al público (comunicaciones) y quienes se preocupan de que esa información llegue efectivamente al público mediante un medio electrónico (informática). Además coordinará el trabajo de los actualizadores de información. Actualizador (es) de información. Serán los encargados de generar contenidos, recopilar, redactar y capturar la información para su publicación, incluyendo textos, imágenes, video, animaciones y audio; por lo que tendrán una relación estrecha con el diseñador. Diseñador. Creará las piezas y componentes visuales del sitio web aplicando los estándares establecidos en la presente guía. 7

8 1. Arquitectura de la Información 1.1. Mapa de sitio Estructura o mapa de información que permite que las personas encuentren lo que buscan dentro de un sitio, es la organización del total de los contenidos. Dentro de sus funciones están el clarificar la misión y visión del sitio, equilibrando las necesidades de la organización patrocinadora y las del público, determinar el contenido y la funcionalidad del sitio, indicar el modo en que los usuarios encontrarán la información definiendo los sistemas de organización, navegación rotulación y búsqueda. Los cinco pasos esenciales para la organización de la información según Patrick J Lynch y Sarah Horton (2000) son: Dividir el contenido en unidades básicas. Establecer una jerarquía de importancia entre las unidades. Utilizar la jerarquía para estructurar los vínculos entre unidades Construir un sitio que siga de cerca la estructura de información propuesta Analizar el éxito funcional y estético del sistema Mapa de sitio para Tecnológicos y Universidades 8

9 1.1.2 Mapa de sitio para Portales de Instituciones de Educación Media Superior y Normales Las instituciones de educación Media Superior (Colegio de Bachilleres, Colegio de Estudios Científicos y Tecnológicos, Colegio Nacional de Educación Profesional Técnica) y las Escuelas Normales contarán con dos arquitecturas de información, una para los portales y otra para los sitios de las unidades o planteles. En la primera se mostrará la información general sobre el sistema e institución (acerca de) y un mapa del estado con enlaces a los sitios de cada plantel. La arquitectura de los sitios de los planteles se enfoca en información específica para cada uno. 9

10 1.1.3 Mapa de sitio para sitios de Instituciones de Educación Media Superior y Normales Para un mejor visualización de las arquitecturas de información ver en la carpeta anexa arq-ies los archivos Arquitectura-IEMS.htm y Arquitectura-IES.htm Asignación de contenidos a tipos de páginas Página principal La organización del sitio se basa en la página principal o homepage, que actúa como punto de entrada. En la estructura jerárquica ocupa el lugar superior. La página de inicio es la parte más importante en cualquier sitio por ser la más visitada, y pese a que no siempre se entra a un sitio a través de ella, el usuario generalmente la ubica como punto de referencia para la exploración, puesto que presenta la idea general y las posibilidades de exploración más importantes. Debe mostrar de forma eficaz lo que se puede o no obtener si se explorara el resto del sitio, es decir, presentar de manera clara y breve los datos que servirán como punto de partida para la exploración, además deberá establecer credibilidad y confianza, todo esto de forma atractiva y diferencial. Los contenidos que se mostrarán en ella serán: Jerarquía del sitio, una visión conjunta. (menús de navegación global y accesos directos a secciones sobre el acerca de la institución). Contenido temporal, con fecha de actualización como: Noticias y Eventos Enlaces externos de importancia 10

11 Accesos director a temas relevantes Se utilizará la misma plantilla de diseño en las siguientes páginas: Mapa de sitio Preguntas frecuentes Resultados del buscador Contáctanos Páginas de texto Estas páginas están más orientadas al contenido que conforma los niveles inferiores en la jerarquía, después de la página principal. En esta categoría se encuentran diferentes tipos que son: Páginas específicas para exploración, índices, menús, submenús, listas de recursos, páginas de enlace, índices de materias, contenidos del sitio, mapas de sitio y buscadores. Páginas de contenido, con información sobre determinados temas, legales, de privacidad, bibliográficas, apéndices, glosarios. Páginas específicas para tareas, de contacto, de error del servidor. Páginas de salida, de créditos, conclusiones 1.3. Estructura del sistema Estructura de sistema para sitios de Tecnológicos y Universidades 11

12 Estructura de sistema para portales de Instituciones de Educación Media Superior y Normales Estructura de sistema para sitios de planteles de Instituciones de Educación Media Superior y Normales Para un mejor visualización de las estructura de sistema ver en la carpeta anexa arq-ies el archivo Estructura-sistema.htm. 12

13 2. Diseño de la interfaz 2.1. Estructura de la página (topología) Estructura de la página de los sitios de Tecnológicos 13

14 Estructura de la página de los sitios de Universidades 14

15 Estructura de la página de los portales de las Instituciones de Educación Media Superior y Normales 15

16 Estructura de la página de los sitios de los planteles de Instituciones de Educación Media Superior y Normales 16

17 2.2. Retícula Retícula de la página de los sitios de Tecnológicos En las páginas interiores el espacio para contenidos es de 602 pixeles, el cual se puede emplear de una o dos columnas con un medianil de 15 pixeles. 17

18 Retícula de la página de los sitios de Universidades En las páginas interiores el espacio para contenidos es de 602 pixeles, el cual se puede emplear de una o dos columnas con un medianil de 15 pixeles. 18

19 Retícula de la página de los portales de las Instituciones de Educación Media Superior y Normales En las páginas interiores el espacio para contenidos es de 602 pixeles, el cual se puede emplear de una o dos columnas con un medianil de 15 pixeles. 19

20 Retícula de la página de los sitios de los planteles de Instituciones de Educación Media Superior y Normales En las páginas interiores el espacio para contenidos es de 602 pixeles, el cual se puede emplear de una o dos columnas con un medianil de 15 pixeles Tipos de ventana Todos los enlaces del menú deberá llevar a una página html de contenido, nunca deberán abrir un documento en otro formato. En el caso de los documentos de otro formatos (pdf, Excel, powerpoint, Word, video, audios, etc.) se deberá colocar : 20

21 El icono correspondiente. El título del documento. Una descripción breve sobre su contenido. El peso y número de páginas o duración del archivo. Plug in necesario para su visualización, con enlace para descargarlo. Tanto el icono como el título del documento deberán tener un enlace que lo abra en una nueva ventana (Target = blank). No se deberán colocar ventanas emergentes (pop ups), ya que por el mal uso que se ha hecho de las mismas en los sitios comerciales, ya que provocan una reacción de rechazo por parte de los usuarios.. Usar ventanas emergentes (pop-ups) en páginas principales (homepages) corrompe sistemática y constantemente la navegación, agrede a usuarios avanzados y principiantes en su interacción ya que aparecen inesperadamente sin ser llamadas o controladas por ellos, confunde a los buscadores y genera ruido en el código. Además de resultar agresivas y molestas para los usuarios que visitan constantemente a un sitio, dejan de ser efectivas para comunicar eventos importantes, ya que el usuario automáticamente las identifica como elementos publicitarios sin importancia por lo que de no contar con un sistema de bloqueo de ventanas emergentes, las cierra prácticamente sin leerlas (son intrusivas, inesperadas y generalmente olvidadas) Encabezados Cuando la red era una tecnología novedosa, los usuarios buscaban una experiencia diferente y libre, por lo que no se preocupan por la cantidad de texto que se le ofrecía. Actualmente se incrementa la demanda de información clara, completa y precisa. Los documentos deben ser concisos y estructurados, ya que el usuario hojea las páginas. Cuando se utilizan títulos, listas y se da énfasis a las palabras clave dentro del texto se facilita la lectura superficial. También es recomendado evitar discursos innecesarios, ya que carecen de información práctica y sólo distraen la atención. Con base en las características del texto es posible establecer ciertas jerarquías que facilitarán la lectura. Entre los elementos más utilizados para establecerlas están: los titulares, subtitulares y párrafos. Los titulares se utilizan para indicar de qué trata la página y los subtítulos para indicar las diversas secciones del texto. En HTML generalmente se indica un título mediante la etiqueta H, que adquiere valores del 1 para el más importante hasta el 6 para lo menos importante y más pequeño Pie de página Deberá de incluirse en el pie de página: 21

22 Fecha de la última actualización de la página de la siguiente manera: Última actualización: día mes año, hora Ejemplo: 23 de enero de 2007, 10:20 hrs. Dirección de correo electrónico de la persona responsable de mantener la página y dar retroalimentación a los usuarios, webmaster, de la siguiente manera: webmaster@ies.edu.mx (Crear un vínculo mailto:) Nota: Se deberá contar con un mecanismo de respuesta, de manera que los correos electrónicos sean leídos por la persona apropiada y se dé respuesta si ésta es requerida. Una auto-respuesta deberá ser enviada para confirmar la recepción del correo electrónico. Versión de navegador, resolución de pantalla recomendada para una óptima visualización y plugins necesarios. Para un óptimo funcionamiento se recomienda una resolución de 1024 x 768, Internet Explorer 5.5 y Flash Player 6 ó superiores Herramientas de navegación Se establecerán diferentes tipos de búsqueda para los diversos niveles de habilidad y preferencias. Se colocará información distintora al principio de cada párrafo o lista, tales como encabezados, subtítulos, párrafos, pies de foto o avisos. La barra de navegación deberá incluir: Inicio: que llevará a la página principal del organismo. Mapa de sitio: que llevará a una página en donde se muestre de forma clara la estructura total del sitio de la dependencia. Contáctanos: que tendrá una liga al formulario en línea que está a cargo del responsable de la información. Cuadro de búsqueda: En todas las páginas deberá existir una herramienta de búsqueda interna, dentro del sitio, que contenga al menos el cuadro para ingresar el texto que se desea buscar y un botón para realizar la acción. Los resultados se deberán mostrar en la página de resultados de búsqueda. El menú de navegación global se colocará en la parte superior de la página, mientras que los menús locales se ubicarán en la columna izquierda. Se deberá comprobar que todos los vínculos del sitio funcionen correctamente y que sean claros para el usuario. Como recurso de navegación se deberán incluir rutas de temas o migas (topic paths/ breadcrumbs), herramientas que facilitarán al usuario saber su ubicación dentro del sitio jerárquicamente organizado. Ejemplo: Aspirantes > Oferta Educativa > Carreras > Ingeniería en Mecatrónica 22

23 Hay que diferenciar claramente los vínculos, del texto de contenido. Los elementos más importantes de la página tienen que ser visibles en su totalidad en la primera pantalla de contenido, sin tener que desplazarse dentro de la página. Se tienen que utilizar los diferentes estados del hipertexto, link, visted, rollover, active, de acuerdo a la guía de estilo de cada dependencia. La organización de la página deberá evitar las categorías de un sólo elemento y las listas de una sola viñeta. Es imperante utilizar un lenguaje dirigido al ciudadano, etiquetando las secciones y las categorías de la manera más clara posible, evitando tecnicismos, para una mejor comprensión del ciudadano común. 23

24 3. Plantillas de diseño y uso de elementos 3.1. Plantilla de diseño Página principal Tecnológicos 24

25 Universidades 25

26 Portales Educación Media Superior y Normales 26

27 Sitios planteles Educación Media Superior y Normales 27

28 Páginas de texto, con columna única 28

29 Página de texto, con dos columnas 29

30 Tablas 30

31 Gráficos 31

32 Sitios de interés 32

33 Mapa de sitio 33

34 Contáctanos 34

35 3.2. Elementos de diseño Logotipos Logo Institucional La posición del logo institucional será en la parte superior derecha, con los siguientes tamaños: Tecnológicos, planteles de educación media superior y normales de 60 x 60 pixeles Universidades de 85 x 103 pixeles Para los portales de Media Superior de 127 x 101 pixeles Logo Compromiso Se deberá colocar el logo Compromiso en la parte inferior derecha, en un tamaño de 113 x 34 pixeles. El logo no debe ser modificado o alterado, y deberá ser reproducido con los colores oficiales de acuerdo con el Manual de Uso de la Identidad Gráfica del Gobierno del Estado de México. Escudo del Estado de México Se deberá colocar el escudo del Estado de México en la parte inferior izquierda, en un tamaño de 125 x 36 pixeles. El escudo no debe ser modificado o alterado, y deberá ser reproducido con los colores oficiales, conforme al Manual de Uso de la Identidad Gráfica del Gobierno del Estado de México Tipo de fuente El sitio no debe requerir que el usuario descargue tipografías o software para poder ver el texto y el contenido relevante. El subrayado no deberá usarse para elementos de navegación, texto o encabezados, pues se puede confundir con una liga. Su uso queda restringido para hacer vínculos a otras páginas. Palabras en mayúsculas e itálicas deberán usarse poco ya que pueden hacer ilegibles grandes bloques de texto. Tampoco se deberán de espaciar las letras, especialmente en los títulos, ya que son listados por motores de búsqueda. Los párrafos de texto deben estar justificados en sus cajas, a menos que el ancho de columna o la tecnología usada no lo permita. Características del texto de contenido: Fuente: arial Color: gris # Tamaño: 12px Estilo: normal Características de los títulos para cada canal: 35

36 Inicio y Acerca de Fuente: arial; color: verde #74C142; tamaño: 15px;!;!estilo: bold. Aspirantes Fuente: arial; color: rojo #FF0000; tamaño: 15px;!;!estilo: bold. Alumnos Fuente: arial; color: naranja # FF7F00; tamaño: 15px;!;!estilo: bold. Exalumnos Fuente: arial; color: verde # 026B33; tamaño: 15px;!;!estilo: bold. Docentes Fuente: arial; color: azul # 003CFE; tamaño: 15px;!;!estilo: bold. Padres de familia Fuente: arial; color: morado # D010B1; tamaño: 15px;!;!estilo: bold. Empresas e Instituciones Fuente: arial; color: rojo oscuro # 8F0100; tamaño: 15px;!;!estilo: bold Enlaces Un sitio web debe contener vínculos o enlaces a cada una de sus páginas y en algunas ocasiones también se incluyen links a páginas que pertenecen a otros sitios. Los vínculos pueden ser textuales programados con el HTML o mediante botones gráficos de diferentes formas, desde tratamientos tipográficos, íconos, metáforas de botones, gráficos e imágenes complejas que pueden programarse como mapas de navegación. Los menús de navegación de cada canal serán programados de forma textual para optimizar el tamaño de las páginas y facilitar la indexación de los contenidos. Los enlaces externos de la página principal serán en forma de banners con un tamaño de 160 x 32 pixeles. Para personalizar los banners se debe editar con un programa edición de imágenes digitales el archivo BVERDE1.PNG y salvar el banner resultante con la extensión jpg o gif en la carpeta correspondiente. También se contará con 3 o 4 botones gráficos que funcionarán como accesos directos a secciones del sitio de mayor importancia o para eventos destacados como periodo de inscripciones, concursos etc. Estos banners tendrán un tamaño de 147 x 80 pixeles 36

37 Para personalizar los banners se debe editar con un programa edición de imágenes digitales el archivo BVERDE2.PNG y salvar el banner resultante con la extensión jpg o gif en la carpeta correspondiente. Para los portales de Instituciones de Educación Media Superior y Normales el tamaño de los banners será de 84 x 46 pixeles. Para personalizar los banners se debe editar con un programa edición de imágenes digitales el archivo bverde4.png y salvar el banner resultante con la extensión jpg o gif en la carpeta correspondiente. Para los sitios de Instituciones de Educación Media Superior y Normales el tamaño de los banners será de 102 x 54 pixeles. Para personalizar los banners se debe editar con un programa edición de imágenes digitales el archivo bverde5.pngy salvar el banner resultante con la extensión jpg o gif en la carpeta correspondiente Paletas de color Hay que asegurarse de que el color de fondo provea suficiente contraste para los elementos de navegación, texto e información, cuando sea visto en una pantalla blanco y negro. No se permite el uso de imágenes como fondo, texturas, fotografías, degradados, total o parcialmente. Los colores usados para textos, fondos, ligas y gráficos de color sólido deberán ser de la paleta de 216 colores, web safe. Se tienen que respetar los colores oficiales indicados en el Manual de Uso de la Identidad Gráfica del Gobierno del Estado de México, así como la paleta complementaria para web que incluye los siguientes colores: Colores institucionales: 37

38 Color Color web RGB Muestra Verde claro #7AC142 R=122 G=193 B=66 Verde #00853E R=0 G=133 B=62 Verde oscuro #004C3E R=0 G=66 B=62 Rojo claro #EC627F R=236 G=98 B=127 Rojo #D31145 R=211 G=17 B=69 Rojo oscuro #9A1145 R=154 G=17 B=69 Blanco #FFFFFF R=255 G=255 B=255 Negro # R=0 G=0 B=0 El uso adecuado del color comunica hechos e ideas rápida y estéticamente más atractivos al usuario. El color también puede ayudar a desarrollar modelos mentales eficientes y factibles, si se siguen las siguientes pautas: simplicidad, consistencia, claridad y lenguaje del color. Para facilitar navegación y la creación de modelos mentales en el usuario se estableció una sistema de jerarquización de los contenidos basado en el color de la siguiente manera: Inicio y Acerca de Color: verde #74C142 Aspirantes Color: rojo #FF0000 Alumnos Color:: naranja # FF7F00 Exalumnos Color: verde # 026B33 Docentes Color: azul # 003CFE. Padres de familia Color: violeta # D010B1 Empresas e Instituciones Color: rojo oscuro # 8F0100. Los colores de los títulos, enlaces, menús y el pie de página deberán corresponder a esta gama de color. El gris se podrá emplear en todas sus tonalidades. Se deberá cuidar que los colores armonicen correctamente y no alteren la imagen institucional Íconos Incluir en la cabecera de todas las páginas los iconos de herramientas: Inicio, Mapa de sitio, Contáctanos y Preguntas frecuentes, (FAQs) en este orden y con un tamaño adecuado acompañados del texto de cada sección. 38

39 Inicio Mapa de sitio Contáctanos Preguntas frecuentes PDF Sonido Video Word Flash El tamaño mínimo que podrá tener un icono será de 10 pixeles en su lado más grande y deberá mantener una coherencia visual con los íconos que se utilicen simultáneamente. Los iconos solo podrán emplearse en páginas web. La serie completa de iconos en formato digital será entregada junto con las plantillas Plecas y elementos de estructuración Las plecas y elementos de estructuración se encuentran definidos en la plantilla de diseño, los cuales no deberán ser alterados o eliminados. El contenido de las páginas deberá estar ubicado dentro del marco, para diferenciarlo del resto de los elementos de la página Recursos visuales, sonoros y audiovisuales Imágenes Los gráficos e imágenes se utilizarán para complementar la información de la página y facilitar su comprensión. 39

40 Las imágenes o ilustraciones deben ocupar entre el 5 y 15% del total de información de la página principal. Formato. Los formatos de imagen recomendados son GIF y JPEG, y se determina usar cada formato según corresponda: GIF para imágenes con pocos colores y con áreas de color sólido. JPEG para imágenes con sombreado de color y con más de 256 colores. Tamaño. Se debe intentar manejar imágenes de menos de 30 KB, sobre todo en la página de inicio. De ser más grandes, se deben usar vistas miniatura y proveer ligas para ver la imagen a mayor tamaño. Las ligas a imágenes deberán indicar el tamaño y tipo del mismo. Siempre se utilizarán las imágenes en el tamaño correspondiente, alto-ancho, evitando hacer reducciones o ampliaciones, ya que esto ocasiona que las imágenes pierdan definición, o tengan un peso mayor al necesario incrementando el tiempo de descarga. Resolución. Siempre se deberán utilizar imágenes a 72dpi, puntos por pulgada, optimizadas para su visualización en Internet, sin que pierda calidad la imagen Videos Únicamente se podrá incluir video en las páginas interiores, nunca en la principal. Todo video deberá usar un sistema de compresión utilizando el codec más simple y más común. Por ejemplo, MPEG-4 es una buena elección porque es un estándar muy usado, casi todos los reproductores de media pueden reproducir audio y video en este formato. También se recomienda el formato FLV que utiliza el programa Flash. Siempre que se utilice un video se deberá colocar un texto descriptivo de su contenido, e instrucciones claras y precisas de cómo utilizar el recurso. Se deberá evitar el uso de formatos: wmv, mov y avi. Todos los videos deberán presentar los controles de reproducción: Reproducir, Detener, Pausa, Avanzar, Retroceder, así como los controles de volumen de sonido. Los videos no se podrán reducir automáticamente al ingresar a una página, se deberá incluir un enlace que lo abra en una ventana nueva. Junto con el enlace se deberá indicar el peso del archivo, formato, duración y un enlace al plugin necesario para su reproducción Sonido En la página principal no se debe utilizar ningún tipo de sonido. En las páginas interiores se recomienda su utilización moderada, y su uso será exclusivamente para transmitir información que contenga algún valor agregado respecto de otros medios. Con la finalidad de garantizar que todos los usuarios puedan acceder a los sonidos 40