1

UNIVERSIDAD AUTÓNOMA CHAPINGO Dirección General Académica

Centro de Cómputo Universitario

LINEAMIENTOS GENERALES PARA EL DISEÑO DEL PORTAL, SITIOS Y PÀGINAS WEB DE LA UACh.

El Portal Web de la Universidad Autónoma Chapingo

SEPTIEMBRE 2006

Comisión Asesora de Políticas Institucionales

Articulación Académica-Administrativa

2

PRESENTACIÓN

Este manual tiene como objetivo dictar los procedimientos que se deberán seguir las diferentes instancias universitarias para el diseño y creación del portal, sitios y páginas de la Universidad Autónoma Chapingo. Contiene una serie de criterios de usabilidad1 que deben aplicarse en los sitios y páginas WEB de la Universidad para que cada sitio sea intuitivo y cumpla con su misión: presentar contenidos e información fácil y útil para el usuario

Criterios Institucionales: El diseño gráfico del Portal, Sitios y Páginas Web debe responder a las necesidades y servicios que una institución de educación debe ofrecer a los miembros que la conforman, así como, ser medio de difusión y promoción de las actividades que se realizan en ella:

El compromiso por impartir educación de nivel medio superior, superior y postgrado. Su tarea en el desarrollo de investigación científica y tecnológica. Su papel de difusión y creación cultural como institución de educación. Su tarea en la promoción y el aprovechamiento racional, económico y social de los recursos

agropecuarios, forestales y otros recursos naturales. Su responsabilidad por el impulso y la realización del hombre especialmente en el medio rural.

El portal debe presentar una imagen formal, con personalidad, que proyecte sus principios filosóficos, sus raíces, la lucha por la tierra, por el campesino y su compromiso con la investigación, es decir, una institución que está orienta y dirigida al progreso agropecuario de la población rural y sobre todo a formar profesionales capaces y comprometidos con su trabajo su gente y su país (México). También debemos tener en cuenta que la imagen a diseñar tiene la misión de presentar una Institución moderna, contemporánea y vanguardista. Una imagen única. A todo lo anterior debemos agregarle el principal objetivo que es dar a conocer a la Universidad a un usuario final, donde dicho usuario tenga la fácil y rápida accesibilidad a los artículos o información de su interés contenida en las distintas secciones que lo conforman. Criterios de Usabilidad: El diseño debe considerar en primera instancia al público al cual estará dirigido, así como, su funcionalidad, normas y parámetros de diseño, entre los cuales se encuentran:

1) Criterios estructurales: están enfocados a que los sitios sean fáciles de navegar, con una arquitectura de información clara y contenidos agrupados de forma intuitiva.

2) Criterios de diseño: ayudan a que los sitios sean estéticamente agradables, presentando contenidos de forma clara con tipografías y colores adecuados.

3) Criterios de contenidos: consideran la transmisión de información y conocimiento relevante y pertinente a través de una adecuada presentación y contextualización2 de los contenidos propios del sitio o páginas Web. Textos claros, de fácil lectura y concisos

1 La usabilidad (del inglés usability) es la medida de la facilidad de uso de un producto o servicio. Generalmente se define en términos de las necesidades de los usuarios de dicho producto o servicios, necesidades que frecuentemente entran en conflicto directo con las intenciones de los diseñadores. Así pues, la usabilidad se encarga de todo lo que influya en el éxito y la satisfacción del usuario. 2 La existencia de una consistencia descrita de los contenidos con el propósito de evitar inconsistencias y duplicidades, así como optimizar recursos.

3

4) Criterios de operación: promueven el óptimo desempeño del sitio a través del correcto funcionamiento y actualización de los contenidos.

5) Criterios de mejores prácticas: fomentan la adopción de estándares y mejores prácticas en comparación con aquellos adoptados por sitios líderes en el mundo.

Los criterios anteriores tienen la pretensión de lograr sitios y páginas web que contribuyan a: Reducir los tiempos para encontrar información. Efectividad de búsqueda deseada por el usuario. Lograr la satisfacción de los usuarios en la visita a los sitios. Reducir costos de navegación para la universidad. Incrementar las visitas.

Notas: 1. Será requisito obligatorio en cada sitio incluir una sección que presente el mapa de sitio. 2. Se deberá enviar al administrador web del CCU los nombres del o los responsables de las páginas que

conforma el sitio.

Formatos de documentos

No se podrán subir documentos en la página principal de Chapingo, ni en ningún sitio web que dependa de la dicha página principal, archivos en pdf, doc, xls, etc. así con en formatos que no sea específicos para protocolo http. Los documentos en pdf deberán ser re-elaborados por el interesado en formato html compatible con navegadores usuales como Mozilla, Netscape y Opera.

Sólo se aceptarán archivos html y lenguajes embebidos compatibles con el Site de Chapingo tales como php, salvo excepciones muy específicas.

Las páginas en html deberán elaborarse en un editor de html profesional como Macromedia Dreamweaver. No se aceptarán documentos en html exportados desde word por no ser compatibles con navegadores usuales, salvo el caso de internet Explorer.

No se deberán crear documentos html extensos ni con estilos no compatibles con navegadores usuales.

Concepto de diseño para Páginas Web Estáticas. Tomando como base que los sitios y páginas Web contendrán temas diversos y una cantidad considerable de información, el formato de diseño deberá considerar sus dimensiones, su funcionalidad y la plataforma en la cual debe funcionar. Plataforma.

Tomando en consideración la gran cantidad de información y los diversos contenidos en cambios constantes, se ha instalado un administrador de auto contenido “Joomla” 3. Esta herramienta facilitará la administración, ya que la aplicación genera automáticamente los contenidos y da forma al portal a partir de las características especificadas. Se ha seleccionado Joomla por ser una plataforma amigable que no requiere de grandes conocimientos de informática, ni programación o HTML para actualizar, mantener y personalizar los contenidos de los sitios web, además de requerir de un espacio reducido.

3 Joomla es un sistema de contenidos (CMS o Content Management System) programado en PHP y con base de datos MySQL

4

En caso de no emplear el administrador Joomla, deberán tenerse las siguientes consideraciones: a) Diseño:

1. Diseño por medio de capas (layers) 2. No usar frames 3. Posicionar capas con hojas de estilo CSS.

b) Dimensiones. El tamaño propuesto es 800X600 píxeles que reducido a estándares de navegadores resulta en un tamaño de 760X430 píxeles. La propuesta de estas dimensiones se fundamenta en la existencia de numerosos equipos de cómputo con características de hardware con visualización máxima de 800X600 píxeles. En el entendido de que no se debe restringir la cantidad de información en cada sección o artículo y con el fin de cumplir con las dimensiones anteriormente propuestas, debe respetarse la proporción de 760 píxeles de ancho pudiéndose variar el largo de acuerdo a la cantidad de información a presentar. c) Colores: Se utilizarán los colores institucionales de la Universidad los cuales son básicamente:

Azul con valor hexadecimal 003366 Azul claro con valor hexadecimal EFF3F6 Plata, para este color se utilizará un degradado que simula el acabado metálico. Es compuesto por un

color gris con valor hexadecimal 96999A y el otro color es un blanco con ligeros tonos de gris y azul con un valor hexadecimal ECF0F3.

Ejemplo.

Gama cromática: A partir de estos colores se puede crear toda una gama cromática en armonía, esto con el fin de tener una variedad en los tonos de color evitando con ello la monotonía visual. Ejemplo.

Color para cada tema: Se usarán distintos tonos de color para diferenciar las secciones del portal entre sí y/o para separar dentro de una misma sección distintas áreas o elementos del diseño, navegación, consulta, etc.

5

El mantener una gama de colores, en este caso de los azules, ayudará a conservar la imagen institucional de la Universidad.

Subgama cromática: También se podrán emplear otros colores que resulten contrastantes a nuestra gama cromática propuesta, con el objetivo de resaltar o jerarquizar algunos elementos de nuestro sitio y/o de cumplir con un ornamento del diseño.

Elementos estructurales del diseño. El diseño debe ser limpio, con un estilo minimalista que permita la fácil y rápida localización de los elementos presentados, así como de una lectura clara sin que enreden la asimilación de contenidos. Se propone el uso de gamas de colores e imágenes representativas de la universidad para diferenciar las secciones. Las imágenes deben ilustrar los conceptos y características de la institución, es decir, su filosofía, su carácter social, la búsqueda de la realización del hombre en el medio rural, así como el desarrollo de investigación científica y tecnológica. Partiendo del concepto de un diseño limpio, funcional y fácil para el usuario, es necesario el empleo de elementos claros en cuanto a su función y fácil de reconocimiento, elementos como botones de acceso, vínculos, ligas a otros contenidos. Es conveniente observar un cuidado especial en elementos propios del contenido como son títulos, subtítulos, pies de página, notas, créditos, etc. Así como de definir formatos y tipos de fuentes adecuados al diseño.

6

Logotipo. Logotipo UACH: Un elemento muy importante en el diseño es la imagen que representa a nuestro producto, servicio o institución, en nuestro caso es el logotipo de la Universidad Autónoma de Chapingo, es el principal elemento visual distintivo de la institución. En base al concepto de diseño propuesto, se debe aplicar el siguiente tratamiento al logotipo.

El logotipo que debe emplearse es el que en la actualidad aparece en la actual página principal Web de la UACh.

No se hará acompañar de algún elemento que no pertenezca a él o pueda interferir en su lectura clara y directa.

Ejemplo.

Su escritura y representación gráfica no se debe de abreviar o modificar. Se debe utilizar tal y como los estatutos de la Universidad marquen, o en caso de alguna modificación a él, dicho cambio debe ser consultado o autorizado por la instancia correspondiente.

Ejemplo.

Los colores de dicho logotipo deben de ser los mismos que indique la Universidad en su manual de imagen, por ningún motivo podrán ser alterados y de ser así se consultará con la universidad dichos cambios.

Ejemplo.

Ubicación del logotipo: En las páginas internas o correspondientes a cada sección el logotipo de la Universidad se situará al lado izquierdo superior. Su tamaño será más pequeño que el de nuestro inicio, esto debido a la necesidad de optimizar espacios para nuestros artículos pero siguiendo la premisa de ser identificable fácilmente para nuestro usuario. El logotipo de las instancias correspondientes a cada página deberá ubicarse en el lado derecho y con las mismas proporciones del logotipo UACh procurando guardar la misma jerarquía. Ejemplo.

7

Tipografía. Por el tipo de información, que en su mayoría se proporcionará de forma textual, es importante considerar las características tipográficas para las páginas Web. La información se debe presentar de forma clara y concisa para que el usuario tenga una buena percepción de lo que se desea exponer. Proponemos una tipografía sin patines para facilitar la lectura, es decir, evitaremos el uso de fuentes tipográficas que puedan confundir la lectura al tener rasgos o formas que dificulten su comprensión. Ejemplo.

Partiendo de esto tenemos los siguientes puntos a contemplar tipográficamente. Fuente tipográfica: Entre las fuentes tipográficas que recomendamos se encuentran la Arial, Verdana, y Tahoma proponemos estas fuentes por que son tipografías que generalmente se encuentran en la mayoría de los sistemas operativos. Arial de 10 puntos: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Verdana de 10 puntos: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Tahoma de 10 puntos: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Contenidos de texto: Se propone que el texto de cada artículo tenga un tamaño de 10 pts., con ello tendremos un tamaño adecuado tanto para la lectura como para la incorporación de información, ya que el uso de un puntaje mayor nos llevaría a páginas muy largas con un exagerado uso de la barra de desplazamiento vertical y la constante interrupción de la lectura. Si se usa una tipografía pequeña al usuario le costaría trabajo realizar una buena lectura ya que tendría a perderse y sería más difícil la rápida localización de ideas o conceptos. El color a usar en el texto debe de ser negro o gris oscuro, para facilitar la lectura al tener una clara definición y contraste entre el fondo y bloque de texto, el color final a usar dependerá del diseño elegido. El conjunto del texto se justificará o alineará a la izquierda para seguir las normas de lectura de la mayoría de los usuarios que visiten el sitio.

8

Ejemplo.

Títulos: Serán siempre visibles en la parte superior de cada artículo o sección. El color dependerá del diseño elegido; se recomienda un color que contraste con el conjunto del texto pero sin salir de la gama cromática propuesta. La tipografía elegida será de igual manera sin patines y de trazos sencillos para evitar la dificultad al leerlos y así el usuario lo identificará y localizará de forma inmediata. En tamaño a emplear debe ser mayor que el del texto del contenido y estará sujeto al número de caracteres, si el título ocupa una sola línea tendrá un tamaño y si ocupa dos o más líneas el tamaño de los títulos será menor. Ejemplo.

Subtítulos: En caso de existir algún subtítulo, se ocupara la misma fuente tipográfica que los títulos y la única diferencia es que el tamaño será menor a los títulos. Ejemplo.

Pie de página: Se distinguirán por estar en un puntaje menor que nuestro texto de contenido, serán del mismo color que éste y tendrán la misma fuente tipográfica. Dependiendo de la función que describan variarán sus características por ello lo dividimos de la siguiente clasificación.

Notas: Los textos que hagan referencia a alguna nota tendrán la característica de usar una fuente regular itálica. Se acompañarán de una numeración consecutiva a partir del número “1” hasta el número de notas que se incluyan en esa página y se vinculará a nuestro texto del artículo por el mismo número, que tendrá que ir como un superíndice en dicho texto.

Ejemplo.

9

-

Referencias: Estas se marcarán en nuestro texto con un asterisco “*” y en el pie de página se pondrá la referencia empezando por el asterisco. La tipografía será en negrita o bold.

Ejemplo.

Créditos: Se contemplan que tengan las mismas características que nuestro cuerpo de texto, solo con la diferencia de que irán en negritas o bold. Ejemplo.

Pie de Foto: En caso de que alguna imagen necesite un Pie de Foto, este se realizará con las siguientes características. Contarán con la misma fuente tipográfica que el texto de contenido, un color distinto a éste, estará en negritas y con un tamaño más chico que los pies de página. Ejemplo.

10

Texto en botones de navegación: El texto en los botones debe contar con un puntaje pequeño pero legible. Los colores a emplear estarán sujetos a la realización de las propuestas de diseño. Ejemplo.

Ejemplo.

Vínculo: Cuando la información por diversas circunstancias se corte y tenga que continuar en otra página o liga se escribirá la leyenda más información, la cual será un vínculo que nos llevará a la continuación de ese artículo, tendrá un puntaje menor y un color distinto al texto de nuestro contenido. Ejemplo.

Imágenes. Con respecto al uso de imágenes, se recomienda tener un stock o banco de imágenes para emplearlas en la realización del diseño, así como para ilustrar el contenido de algunas secciones. Manipulación de imágenes: Las fotografías deberán retocarse de manera digital, adecuándolas al diseño y formato en donde sean requeridas dentro de las páginas. Se buscará que la imagen se vea contemporánea, moderna, y se cuidarán los encuadres de las fotos para ajustarse a los formatos y características de los espacios asignados. Ejemplos.

11

Iconografía. Se contempla el uso iconos que faciliten el reconocimiento de ciertas tareas y de accesos a determinadas secciones del portal o que simplifiquen algunas tareas mediante el uso de un solo paso. Ejemplo. Se usará una iconografía sencilla fácil de entender por cualquier usuario, se hará uso de representaciones gráficas universales, que se adaptarán al estilo, formato y parámetros a emplear. Se crearán los iconos necesarios para brindar al usuario una navegación idónea, rápida y entendible.

Con base en un análisis realizado en la web de la universidad, las herramientas para navegar en el portal universitario pueden emplear la siguiente iconografía, ya sea a corto, mediano o largo plazo:

Mapa del sitio Home Contacto Búsqueda Ayuda Correo Galería Avanzar

12

Regresar Más información Cerrar Radio Chapingo Descargas Documentos Chat Interno de Chapingo Foros Internos Imprimir Preguntas frecuentes (FAQ) Calendario Directorio Teléfono Intranet Emergencia Clima Ligas de interés.

Con estos iconos se tiene cubierta la necesidad del usuario en cuanto a botones auxiliares de navegación, operación y funcionalidad del portal. Existen otros tipos de elementos gráficos a considerar en el diseño de la imagen del portal pero el uso de ellos estará determinado por la propuesta grafica de cada instancia universitaria. Concepto de diseño para Sitios Web Dinámicas Para el caso de sitios dinámicos o diseños de sistemas, se deberán contemplar los siguientes requisitos:

PHP 5.0 o última versión estable antes de 5.1 con register_global = off activados. La conexión a la base de datos se apuntará al servidor database.chapingo.mx La base de datos, update, seletc, insert, create table, etc. Deberán estar elaborados para MySQL

versión 5.0 o última versión estable antes de la 5.1