Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�

Al paso de los años, las tecnologías de información han cobrado en la UACH un rol de creciente relevancia en cuanto a su valor estratégico. Hoy, una importante can-tidad de procesos y decisiones en nuestra universidad son soportadas -en mayor o menor grado- por algún tipo de aplicación de TI.

En éste contexto, la oferta y demanda de servicios basados en web se ha multi-plicado y diversificado a un grado tal que, cada vez que un usuario debe utilizar nuestros sitios y aplicaciones, se enfrenta a un abanico tan fragmentado y hetero-géneo que llega incluso a inhibir el interés en adoptar soluciones que, al ser des-aprovechadas, consumen importantes recursos humanos, materiales y financieros sin arrojar el retorno necesario.

Es atendiendo a esta problemática que la Coordinación General de Tecnologías de la Información de la UACH emite el documento PRÁCTICAS RECOMENDADAS PARA EL DISEÑO E IMPLEMENTACIÓN DE SITIOS Y APLICACIONES WEB EN LA UNIVERSIDAD AUTÓNOMA DE CHIHUAHUA; una gúia con herramientas de auto-diagnóstico que permitirá controlar la calidad de nuestras aplicaciones web desde su concepción hasta el momento previo a su publicación.

El documento aborda aspectos diversos y ofrece listas de verificación que, en suma, asegurarán niveles básicos de cumplimiento con respecto prácticas y estándares tecnológicos, de organización y de codificación, que no sólo tienen vigencia a ni-vel internacional, sino que –consideramos- resultarán de sencilla adopción para el creciente equipo de webmasters y desarrolladores en nuestra institución.

El objetivo de éste esfuerzo es homogeneizar al máximo posible la arquitectura, funcionalidades, usabilidad y seguridad de nuestras aplicaciones web, pensando siempre en el beneficio de nuestros usuarios.

La calidad –como sabemos- no es un estado de cosas, sino un proceso constan-te que exige que quienes nos relacionamos con la operación de TI asumamos la responsabilidad del autoaprendizaje y actualización permanentes; y no sólo para cumplir con estándares básicos, sino también para adoptar constantemente nue-vas ideas y enfoques que nos permitan continuar siempre en una posición de alta competitividad.

En este contexto, invitamos a desarrolladores, webmasters, diseñadores web y ad-ministradores de sistemas de la UACH a estrechar vínculos, creando una comuni-dad profesional que a patrir del conocimiento compartido y el debate de enfoques y opinones detone espirales ascendentes en términos de la calidad y la competiti-vidad de los productos y servicios que genere.

Agradecemos el decidido aval que nuestro rector Ing. Jesús Enrique Seáñez Sáenz ha brindado a esta iniciativa; una empresa que, estamos seguros, en poco tiempo nos llevará a brindar una oferta de servicios de TI a la altura de los encomiables retos y objetivos que persigue nuestra institución.

INTRODUCCIÓN

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�METODOLOGÍA

La aplicación de esta guía se basa en el llenado de una lista de verifica-ción o checklist general que incluye los puntos básicos a cumplir duran-te la producción y de manera previa a la publicación de un sitio.

Es un instrumento de autodiagnóstico y se debe aplicar tanto a la página principal de nuestros sitios como a una muestra de las páginas interiores, incluyendo formas y reportes.

Durante las diversas fases de producción del sitio se recomienda con-sultar con frecuencia los criterios aqui expresados, para registrar los avances y suplir oportunamente cualquier tipo de deficiencia.

SI bien los puntos se refieren a páginas públicas –que no requieren autenticación-, en su mayoría son aplicables también a otro tipo de pá-ginas, como secuencias de pantallas dentro de una aplicación, comuni-caciones enviadas por correo, sitios especiales, etc.

Los puntos incluidos representan tan sólo los aspectos elementales para asegurar la calidad de un sitio web; recomendamos al webmaster -una vez cumplidos los criterios básicos aqui expresados- emprender una ruta constante de mejoras e innovaciones.

EN PRÁCTICA

Una lista de verificación es una de las formas más objetivas de valorar el estado de aquello que se somete a control. El carácter cerrado de las res-puestas y su limitado número proporciona un nivel conside-rable de objetividad.

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�I. USABILIDAD Y ACCESIBILIDAD

La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso.

Un sitio usable no sólo proporcio-na al visitante un mejor servicio, sino que es más fácil de evaluar, administrar y mejorar.

Además, los sitios apegados a estándares se indizan de manera más eficiente en los buscadores, lo que le dará una mejor posición en las listas de resultados.

Accesibilidad se refiere a la posi-bilidad que brindamos a publicos con algún tipo de condición física limitante de obtener y aprovechar plenamente nuestros contenidos y servicios.

Debemos procurar, mediante el cumplimiento de principios gráficos, funcionales y técnicos, el acceso pleno a la información para cualquier tipo de usuario.

Debemos también promover el valor de la transparencia me-diante el acceso ágil y claro a la información que generamos.

El Diseño Web Centrado en el Usuario se caracteriza por asumir que todo el proceso de diseño y desarrollo del sitio web debe plantearse prioritariamente desde la visión del usuario, consideran-do sus necesidades, característi-cas y propósitos.

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�II. DISEÑO GRÁFICO Y FUNCIONAL

El diseño web va íntimamente li-gado con el tema de la usabilidad.

Debemos ofrecer un diseño claro, centrado en el usuario y evitando el abuso de elementos accesorios que no añaden valor a la expe-riencia; ésto es, páginas consis-tentes, cómodas y visualmente agradables.

En general, cuando hablamos de diseño para web, la eficiencia y la funcionalidad toman preceden-cia con respecto a la estética o el “apantalle“.

Sistema de navegación: El menú

Recomendamos planear el menú principal difiniendo previamen-te las áreas de contenido y sólo posteriormente abordar aspectos como HTML, CSS, Javascript y la apariencia.

Los nombres o etiquetas de los botones deben ser breves, pues su propósito es permitir que en un vistazo el visitante sepa qué es lo que cada sección contiene.

Desde el punto de vista de la fun-cionalidad, se recomienda el uso de rollovers para retroalimentar visualmente al usuario al momen-to de hacer una elección, asi como menús anidados para presentar de modo eficiente una mayor cantidad de enlaces.

Asimismo, asegurar que nues-tra navegación mantiene cierta uniformidad con respecto a otros sitios y portales de la universidad = Que todo se vea y funcione de modo muy similar; así, cuando un usuario pase de un sitio a otro dentro de la Universidad, no se sentirá perdido o desorientado.

Cabezal

El cabezal es el elemento principal de identificación institucional.

En todo sitio oficial deberá ape-garse a lo dispuesto en el Sistema de Identidad Visual y contener tanto los links “Transparencia“, “Di-rectorio“, “Contáctanos“, “English“ y “Portal UACH“ como el buscador.

Pie de página

El extremo inferior de nuestras pá-ginas deberá identificar claramen-te con texto la dependencia que publica, asi como proveer links a recursos auxiliares como mapa del sitio, descarga de plugins, etc.

EN PRÁCTICA

Un enfoque que ha demostrado su utilidad es el uso de “personas”, esto es, casos hipotéti-cos basados en las expectativas de uso para cada ca-tegoría o tipo de usuario: aspirantes, alumnos, maestros, personal, egresa-dos; son algunas de las “personas“ que pueden funcionar para nuestra univer-sidad.

Otra manera de probar a priori la eficiencia de nuestro diseño es a través del uso de escenarios, correspondiendo cada uno de éstos a una tarea u objetivo específico a cumplir como parte de la visita a un sitio web.

Diseño paralelo

Encargando propuestas del diseño de manera

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�II. DISEÑO GRÁFICO Y FUNCIONAL

Cabezal o headersitio principal

Pie de página o footer sitio principal

Ejemplo cabezal o header unidad académica

Caso real con aplicación correcta

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�II. DISEÑO GRÁFICO Y FUNCIONAL

Caso real con aplicación correcta

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�III. ORGANIZACIÓN DEL CONTENIDO

De lo bien o mal que se planee el diseño de información o manera en que se estructuren los con-tenidos en su sitio dependerá el qué tan útil lo encuentren nuestros visitantes.

Un sitio desorganizado e inco-herente hace que la informa-ción que contiene sea difícil de encontrar.

Procure entregar la información suficiente en una sóla página y, en caso de elaborar vínculos que llevan a contenidos más detalla-dos, debemos observar en todo momento la regla de los 3 clicks, es decir, partiendo de la página principal, cualquier información dentro de nuestro sitio debe estar a un máximo de 3 clicks de “profundidad”.

Por lo anterior, recomendamos organizar los contenidos de los sitio web universitarios en base a tres niveles estándar y una categoría especial:

a) Página principalb) Página de secciónc) Página de contenido especí-ficoe) Páginas especiales o auxiliares

Página principal

Es el portal o home de nuestro sitio, en el buscaremos enfatizar la información más importante, nuevo y/o actual (lo más leido, lo más nuevo, servicios, noticias, eventos, campañas, etc.). No todo debe ni puede estar en la página principal; sea selectivo y lleve a cabo una rotación cons-tante de contenidos, reservando siempre las áreas más prominen-tes a los contenidos más rele-vantes. Desde la página de inicio deberá establecerse el sistema de navegación que regirá todo el sitio.

Página de sección

En éstas se agrupan links a contenidos que se pueden rela-cionar entre sí de acuerdo a su

objetivo, naturaleza, etc.

Aunque es una circunstancia que procuraremos evitar, en algunos casos podrá ser necesario crear secciones dentro de una sección.

Página de contenido específico

En este nivel se presenta un tema o información al máximo detalle. Utilice una página para cada blo-que lógico de contenido. Aligere a la vista textos demasiados prolongados utilizando imáge-nes intercaladas, cajas, líneas de separación, etc.

Páginas auxiliares

Se reservan para casos únicos como formas, páginas de error, archivo no encontrado, avisos especiales, etc. Su estructura y presentación puede variar, aun-que deberá conservar siempre elementos estándar observables en el resto del sitio.

Los más importante se “anuncia“ en la página principal, ya sea de ma-nera permanente o temporal:

Una sección incluye links relaciona-dos con un mismo tema:

Página de contenido en su nivel más concreto:

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�IV. REDACCIÓN, FORMATO Y ESTILO

A diferencia de un libro o una revista, leer en pantalla puede resultar incómodo, sobretodo si se presentan al usuario textos prolongados, en grandes blo-ques y con poco o nulo formato; además, en este medio, el uso del lenguaje debe breve, sencillo y presentarse de manera lo más esquemática posible.

Cuando escriba para web procu-re ser directo, evite el uso de voz pasiva y plantee sus mensajes de modo tal que inviten a la acción.

Sea escrupuloso en cuanto a la forma y pulcro en la redacción de sus contenidos: Recordemos siempre que estamos hablando en nombre de la Universidad.

Nomenclatura

Entre universitarios es un error común asumir que todos nues-tros usuarios conocen la univer-sidad tan bien como nosotros, sin embargo, ello da pie a un problema de comunicación, pues un porcentaje importante de quienes nos visitan descono-cen cómo y bajo qué conceptos está organizada la universidad.

Por ello, sin importar si nuestros sitios web se dirigen a públicos internos o externos, debemos procurar hablar en un lenguaje claro y sencillo, omitiendo el uso de frases “techie” o asumir el conocimiento de conceptos exclusivos de la UACH.Ejemplos:

En links al “SEGA” - nuestro siste-ma de gestión académica, debe-

remos referir para simplificar que se trata del sistema en el que se pueden consultar “Calificaciones” o “Información escolar”.

Las menciones al “SUBA” –Siste-ma Universitario de Bibliotecas Académicas- deberán acompa-ñarse de la mención “Bibliotecas”.

Si hablamos del “SICUDD” –Sistema Integral del Centro Universitario para el Desarrollo Docente- debemos indicar que nos refierimos al sistema para “Capacitación Docente”.

¿Se puede decir lo mismo con menos?

En materia de web, el espacio es un factor costoso; algunas ins-tancias de nuestra Universidad tienen nombres muy largos, y en ocasiones se dispone de poco es-pacio para incluirlos. En casos asi –y haciendo uso de todo nuestro criterio- se recomienda que en aras de mensajes más eficientes y una mayor comprensión consi-deremos omitir elementos como “Facultad de”, “Dirección de”, “Coordinación General de”, etc., o bien optar por abreviaciones comunmente aceptadas como “Depto.”, “Dir.”, “C.”, “Admón.”, etc.

Aproveche las ventajas del hi-pertexto vinculando contenidos relacionados y evitando asi el uso de páginas con textos dema-siado extensos.

Escribir para ser encontrado

SEO -Search engine optimization- es una técnica que ayuda a que

nuestros contenidos se ubiquen mejor -dentro de las primeras 5 páginas- en las listas de resulta-dos de los buscadores.

Una parte importante de estos procesos de optimización de web consiste en redactar nues-tros contenidos utilizando con frecuencia los conceptos o pala-bras clave que nos interesan.

Importante: Tratándose de buscadores, cualquier página de tu sitio puede ser la página de entrada (¡!).

SEO en la página principal

Tu página principal o home debe recibir atención especial; ase-gúrate de que se haya perfec-cionado al máximo utilizando CSSs y JSs externos, imágenes optimizadas, nulo o poco Flash, uso prioritario de HTML vs. imá-genes, etc.

En sus procesos de indización, los buscadores van “siguendo” los links desde tu página princi-pal; de loa anterior la importan-cia de que los enlaces principales se incluyan como texto y no como imagen o Flash.

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

�0V ADMINISTRACIÓN, SEGURIDAD Y MANTENIMIENTO

La Universidad Autónoma de Chihuahua invierte una cantidad importante de recursos en infra-estructura de TI.

Dicha inversión tiene el propósi-to de beneficiar a la comunidad universitaria, por ello, como admi-nistradores de cuotas de dichos recursos, debemos ser siempre concientes y racionales procuran-do su óptima utilización.

Almacenamiento

Utiliza el espacio asignado en el servidor únicamente para alojar los recursos de tu sitio web; no dejes en el servidor software, pelícuas, canciones u otro tipo de archivos pesados.

Respalda con periodicidad men-sual los archivos y bases de datos que conforman el sitio.

Ancho de banda

Aunque actualmente la UACH dispone de un gran ancho de banda, sabemos también que es

un recurso de creciente demanda.

Por lo anterior, reduce al máxi-mo el tamaño de los archivos que integran tu sitio y optimiza cualquier recurso que ofrezcas para descarga (comprimiendo, bajando la resolución, cambiando al tamaño real, , ofreciendo thum-bnails, etc.).

Seguridad

Instala únicamente código de origen confiable.

Utiliza alguna de las mútiples herramientas y metodologías para auditar la seguridad de una aplicación o script.

Asigna contraseñas difíciles de hackear y cámbialas con relativa frecuencia.

Actualiza con frecuencia las versiones de cualquier tipo de aplicación que utilices en tu sitio.

EN PRÁCTICA

Joomla es un CMS cuya facilidad de implementación y uso para administradores no especializados ha derivado en una creciente populari-dad en nuestra universidad; sin embargo, es también una aplicación que, si no se implementa y administra correctamente, puede poner en riesgo tanto la información de tu sitio como la integridad lógica del servidor en el que se encuentra.

Si has seleccionado Joomla como la mejor alternativa para tu proyecto, recomendamos realizar de manera periódica actualizaciones y proce-dimientos de auditoría de seguridad.

La Coordinación General de Tecnologías de Información ofrece instalación y soporte para los CMS Jaws, Wordpress y Bricolage, que en conjunto cubren un vasto abanico de necesidades y requerimientos.

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��LISTA DE VERIFICACIÓN

I. USABILIDAD Y ACCESIBILIDAD

Se ve correctamente en Firefox 3+.

Se ve correctamente en Internet Explorer 8+.

Utilizamos el escudo UACH acorde a los lineamientos de imagen.

Funciona correctamente en Firefox 3+.

Funciona correctamente en Internet Explorer 8+.

Funcionalidades básicas disponibles en dispositivos móviles.

Funcionalidades básicas disponibles al desactivar CSS.

Funcionalidad básica disponible al desactivar Javascript.

Funcionalidad disponible al desactivar Flash.

Hemos incluido en texto la dirección y teléfono de la dependencia.

Hemos incluído una dirección de correo o mecanismo de comunicación con el Webmaster.

Incluimos el nombre de la institución y la dependencia en texto (No imagen o Flash).

Utilizamos el logo del sitio como link a la página principal.

Incluimos links a software complementario (Acrobat, Flash, etc.).

Hemos incluído –como mínimo- tags META para palabras clave y descripción.

El buscador está en todas las páginas, en el mismo lugar.

Hemos incluido al menos información básica en inglés.

Hay un link a página con declaración institucional de privacidad.

Hay un link a portal Institucional UACH en el extremo inferior de todas las páginas.

Todas las páginas incluyen un título que identifica el contenido y la institución.

Todas las páginas incluyen fecha de la última actualización.

Contenido básico disponible en dispositivos móviles.

Contenido básico disponible al desactivar CSS.

Contenido básico disponible al desactivar Javascript .

Contenido disponible al desactivar Flash.

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��

II. DISEÑO GRÁFICO Y FUNCIONAL

Nuestro diseño se planteó para resolución target mínima de 1024x768.

Ofrecemos un sistema de navegación principal doble: Temas / Perfil de usuarios.

El extremo superior derecho de mis páginas es igual al del portal de la Universidad.

Hemos limitado el uso de Flash a elementos estrictamente ornamentales y no informativos

(texto importante) o funcionales (navegación, formas).

Hemos elegido fondos claros y textos oscuros.

Utilizamos layouts centrados, de anchura fija a 950px.

Utilizamos mayoritariamente fotos e imágenes propias vs. “bajadas” de Internet.

Las imágenes se muestran al tamaño real (no “estiradas” o “achicadas”).

Evitamos el uso de marcos o frames.

III. ORGANIZACIÓN DEL CONTENIDO

Hemos organizado los contenidos en base a tres niveles.

Páginas como formas, mensajes de error, etc., se ven como el resto del sitio.

IV. REDACCIÓN, FORMATO, ESTILO

Los contenidos son breves y esquemáticos.

No hay errores de sintaxis, ortografía o redacción.

Utilizamos lenguaje de uso común, evitando “jerga” universitaria.

Hemos relacionado y cruzado contenidos a través de enlaces.

V. ADMINISTRACIÓN, SEGURIDAD Y MANTENIMIENTO

No hay archivos en el sitio cuyos nombres contengan espacios, letras “ñ“, acentos o diéresis.

Los nombres de los directorios dan una idea aproximada de la información que alojan.

Mis contraseñas son robustas y resultaría difícil adivinarlas.

Utilizo el espacio en el servidor para almacenar exclusivamente los archivos del sitio.

Las versiones del software utilizado son las más recientes y seguras.

LISTA DE VERIFICACIÓN

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��

Por considerarles de utilidad para los webmasters de la universidad, adjunto a este manual se han incluído los siguientes recursos:

a) Imágenes. Que contiene los PSD (separados en capas), y los JPG con los elementos necesarios para generar versiones propias de las imágenes que se utilizan en el modelo de sitio de referencia.

b) HTML. Que contiene un archivo HTML con un prototipo básico, 100% funcional y listo para adaptarse a las necesidades de su proyecto. El código del sitio ha sido validado con las herramientas de la W3C, asegurando así la accesibilidad y usabilidad básica en términos de estándares.

Asimismo, se proporcionan las imágenes y hojas de estilo que complemen-tan el sitio.

Para obtener los elementos y criterios de identidad visual, remítase al manual de imagen del Sistema de Identidad Visual de la UACH (http://www.uach.mx/imagen).

RECURSOS PARA WEBMASTERS

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��

La Coordinación General de Tecnologías de Información pone a la disposición de administradores de sitios web institucionales los siguientes recursos:

Software para gestión de contenidos.

Software para encuestas.

Software para gestión de eventos.

Software para videoconferencias en línea (próximamente).

Sindicación de contenidos con RSS (noticias, avisos, eventos, destacados,

banners).

Listas de correo específicas.

Lista de correo general Kiosko.

Acervo fotográfico de la universidad.

Publicación en portal institucional.

Publicación en Facebook institucional.

Publicación en Twitter institucional.

Transmisión de eventos con video streaming.

Instalación de software Webalizer para estadísticas de uso del sitio.

Generación de Código de Analytics.

Generación de buscador Google personalizado.

Archivos PSD con diseños y elementos utilizados en portal institucional.

HTML, Scrips y CSS utilizados en portal institucional.

Creación de cuentas de correo institucionales @uach.mx

Creación y administración de nombres de dominio.

Elaboración de panoramas interactivos de 360º.

Consultoría y asesoría en diseño y gestión de web, desarrollo de aplica-

ciones, seguridad informática, etc.

Asesoría en aplicación de imagen institucional en sitios web.

Para agendar alguno de los recursos previamente listados, o presentar algún requerimiento especial, envíe su solicitud a internet@uach.mx o bien a través del Departamento de Atención a Usuarios, en la ext. 1716.

Nuestra oferta de servicios para webmasters crece constantemente, por lo que te recomendamos visita la versión en línea:

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

RECURSOS PARA WEBMASTERS

http://www.uach.mx/portales

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��

Este documento fue elaborado en la Coordinación General de Tecnologías de Información de la UACH, por personal del Departamento de Servicios Electrónicos e Internet.

Para cualquier duda o comentario en torno al contenido de este documento, comuníquese al tel. (614) 439-1817 ext. 1735, o bien envíe un mensaje a la dirección internet@uach.mx.

Chihuahua, Chih., México, enero de 2011.

ACERCA DE

Prác

ticas

reco

men

dada

s pa

ra p

orta

les

web

inst

ituci

onal

es

��