Políticas de diseño de los portales de Internet e Intranet del Instituto Federal Electoral Diseño Web El diseño web es la actividad que permite que los elementos visuales se integren de manera efectiva con las aplicaciones de un sitio, permitiendo una buena integración entre lo estético y lo funcional. El diseño Web debe permitir a un sitio ser eficiente y eficaz. Para el diseño web se requiere que se sigan las mejores prácticas en los ámbitos de: Usabilidad Diseño Usabilidad La usabilidad es la facilidad de uso de la información dentro del sitio web. Al hablar de la usabilidad, nos referimos a la rapidez con que se puede navegar en él, la eficiencia al utilizarlo, su grado de propensión al error y cuánto le gusta a los usuarios. Las características de usabilidad son independientes al diseño gráfico para Web. Para que un sitio web tenga un alto nivel de usabilidad, hay una condición indispensable: la funcionalidad y la información deberán ser prioridad. Diversos estudios han revelado que los usuarios que abandonan un sitio web nunca lo hacen por motivos estéticos sino por otros dos motivos básicos: 1. Falta de funcionalidad (lentitud, deficiencias en búsquedas, enlaces mal definidos) 2. Falta de información (no tiene la información que se busca) Debe tomarse en cuenta que en Internet los usuarios no leen, sólo realizan lecturas rápidas en busca de las palabras que puedan llevarlos a la información que buscan, es decir: "escanean" el texto, por lo que es más complicado captar su atención. Por lo cual es indispensable presentar los contenidos de una manera clara y concisa. El desarrollo de un sitio web implica pensar en la experiencia del usuario. La experiencia del usuario es el grado en el que éste alcanza los objetivos que le llevaron a visitar el sitio web, y no en que el sitio web sea del gusto de quien lo genera. Adicionalmente, se debe considerar que los distintos tipos de usuarios tienen objetivos diversos en cuanto a sus necesidades de información, y por tanto es necesario estructurar el sitio web de manera tal que se cumplan los objetivos particulares de los usuarios que el Instituto determine como su público objetivo primario (ciudadanos comunes, periodistas, asociaciones políticas e investigadores), etc.. Las páginas deben ser: más rápidas que bonitas más sencillas que complejas más fiables que modernas Página 1 de 6
Diseño El diseño del sitio web debe ser limpio, es decir, no debe cargarse de elementos esto para facilitar la búsqueda de las secciones al usuario. Los componentes principales que se deben tomar en cuenta para la realización de los contenidos que se van a publicar en los portales son: Ligas o enlaces (Hipervínculos, links) Las ligas o enlaces son el rasgo distintivo de los sitios web, permite consultar información relacionada con lo que se consulta (texto, imágenes, descarga de archivos, etc.) el estándar es que estos sean texto Las características que deben tener los enlaces son las siguientes: No hacer la liga o muy largo. Si forma parte de una frase, hay que dejar solo las palabras clave resaltadas; (se recomienda máximo 5 palabras) No se recomienda utilizar haga click aquí Imágenes Los parámetros que más afectan la manera en que se muestra un elemento gráfico en la red, son: el monitor con el que el usuario accede a ellos y el ancho de banda de su conexión, por esto es importante considerar las características de los gráficos que se van a desplegar. La WEB soporta imágenes en mapa de bits que es una colección de pixeles con valores de color diferentes, los mapas de bits pueden llegar a ser muy grandes y ocupar muchos bytes, lo que hace poco práctica su carga o transmisión por internet. Para evitar lo anterior es necesario comprimir las imágenes. Los dos formatos más usados para compresión son GIF y JPG, que son imágenes de mapa de bits las cuales se pueden manejar en distintas compresiones. Formato GIF (Graphic Interchange Format: Formato de intercambio gráfico) La compresión de este formato elimina los datos no necesarios sin perder información o distorsionar las imágenes. Este formato permite crear transparencias en la imagen, por ejemplo: El logotipo del IFE para que se ubique sobre una superficie de color diferente al blanco y no se vea un recuadro alrededor. Gif, sin transparencia Gif con transparencia El uso de transparencias se recomienda para gráficos simples tipo diagrama, o que contengan trazos muy definidos (logotipos, esquemas, etc.) Página 2 de 6
También se permite crear animación con este formato, (gif animado) ya que permite combinar múltiples imágenes en un único archivo para crear así movimiento. El gif se recomienda para imágenes como: Logotipos, Imágenes con plastas de color (por ejemplo la boleta del logotipo del IFE), Animaciones. Si se utiliza este formato para publicar imágenes en el sitio del IFE deberán observar que el tamaño y peso máximo permitido por imagen es: 500 píxeles de ancho, 50 Kb. Formato JPEG o JPG (Joint Photographic Experts Group-Grupo conjunto de expertos en fotografía) Es un formato de compresión de imagen se basa en eliminar de la imagen aquellos colores que el ojo humano no puede distinguir y en agrupar gamas de colores similares. A mayor nivel de compresión, menor calidad en la imagen resultante. Diseñado para utilizarse en imágenes de fotografías que contengan miles o millones de colores o tonalidades de grises. Las características que deben tener los archivos en JPEG son: Deben ser imágenes guardadas en formato RGB, que es el formato que sirve para imágenes que van a verse en pantallas de computadora, teléfonos celulares, PDA s, etc Imagen JPG El tamaño y peso máximo permitido por imagen es: 500 píxeles de ancho, 50 Kb Comparativo entre formatos JPG es adecuado para fotografías y GIF para ilustraciones. Página 3 de 6
Ejemplo de fotografía guardada en los dos formatos con la consiguiente disminución de peso en bytes:.gif 16,6 K.jpg 15,8 K La mejor calidad y el menor peso en este tipo de imágenes corresponden al formato JPG. Ejemplo de gráfico guardado en los dos formatos con la consiguiente disminución de peso en bytes:.gif 1,1 K.jpg 1,6 K La mejor calidad y el menor peso en este tipo de imágenes corresponden al formato GIF. Por ejemplo, una imagen de 50 Kb puede tardar en cargarse aproximadamente unos 10 segundos usando una conexión vía módem, tiempo excesivo para el usuario, y si nuestra página contiene varias de estas imágenes el resultado es excesivo. Una página completa no debe ser pesada, por lo que debemos calcular el número de imágenes, peso, etc. No se debe sobrepasar un tiempo de carga total de la página de 10-12 segundos, tiempo en el cual los usuarios se cansan de esperar y abandonan el sitio. Página 4 de 6
Tipo de archivos y características para integrar a los sitios Web HTML Estas son las páginas base que se despliegan en los navegadores, se encuentran formadas de imágenes, texto, ligas, etc. Estas no deben pesar más de 100 kb. La extensión del archivo puede ser, html ó htm. PDF Es un formato de archivo universal que mantiene las fuentes, imágenes, gráficos y apariencia de cualquier documento de origen, independientemente de la aplicación y plataforma utilizadas para crearlo. Los archivos de tipo PDF son compactos y completos; se pueden compartir, ver e imprimir con el software gratuito Adobe Reader Los archivos que se publiquen deben ser ligeros Un archivo de PDF de aproximadamente 100 hojas de texto que incluya algunas imágenes debe de pesar aproximadamente 200k. Formato Word (doc) Powerpoint (ppt) Excel (xls) Los documentos con formato de Office son de los que más se utilizan, se pueden publicar en los portales Web, solo se debe considerar que esto permitirá al usuario obtener una copia directamente del archivo original a su computadora y manipularlo. Archivos Flash (swf) Flash es una tecnología que permite la creación de animaciones vectoriales que se pueden usar en páginas web. Su uso se debe considerar con cuidado, ya que en la navegación en Internet estos se usan para generar Banners publicitarios, lo que provoca en el usuario un efecto que se llama ceguera de Banner en donde el usuario ya no presta atención a ellos, ya que la mayoría de las veces son anuncios publicitarios que no van a proporcionar información relevante. Si se requiere su uso es importante considerarlo con el área técnica para darle las características que permitan explotar sus ventajas en un portal Web. Nomenclatura Los servidores Web tienen un sistema operativo diferente a Windows lo que hace que la lectura de los nombres de los archivos sea diferente. El servidor web no reconoce acentos ni espacios. Es importante para la creación de los nombres de los archivos seguir las siguientes recomendaciones: Nombres cortos No dejar espacio entre los caracteres Página 5 de 6
No usar caracteres especiales No usar acentos Evitar el uso de mayúsculas 30 caracteres como máximo para nombrar a los archivos Página 6 de 6