Ingeniería de la Usabilidad

Transcripción

Universitat de Lleida - Escola Universitaria Politècnica
Enginyeria Tècnica en Informàtica de Sistemes
Trabajo Final de Carrera
Ingeniería de la Usabilidad
aplicada al desarrollo de un portal web
administrado dinámicamente
José M. Belmonte Marín
Director:
Dr. Jesús Lorés i Vidal
Septiembre 2003
Para Sergi,
te considero mi hermano.
Para Noemí,
ven, sube a mi nube y quédate para siempre.
CONTENIDOS
Capítulo 0.
CONTENIDOS............................................................... 5
RESUMEN.................................................................................................... x
Capítulo 0.
INTRODUCCIÓN........................................................... 1
MÚSICA ELECTRÓNICA Y CULTURA DE CLUB....................................... 2
CULTURANOCTURNA.COM....................................................................... 3
OBJETIVOS DEL PROYECTO.................................................................... 4
ESTRUCTURA DEL DOCUMENTO............................................................ 8
ESTADO DEL ARTE................................................ 11
Capítulo 0.
WORLD WIDE WEB.................................................... 12
CIBERNÉTICA, COMUNICACIÓN ENTRE MÁQUINAS........................... 13
TCP/IP........................................................................................................ 13
LA WORLD WIDE WEB............................................................................. 14
EL PROTOCOLO HTTP............................................................................. 16
HTML.......................................................................................................... 18
TENDENCIA ACTUAL................................................................................ 20
XHTML....................................................................................................... 20
HTML DINÁMICO....................................................................................... 21
HOJAS DE ESTILO.................................................................................... 21
JAVASCRIPT............................................................................................. 23
MACROMEDIA FLASH.............................................................................. 25
Capítulo 0.
SOFTWARE OPEN SOURCE..................................... 28
SOFTWARE LIBRE.................................................................................... 29
APACHE..................................................................................................... 31
PHP............................................................................................................ 33
PEAR.......................................................................................................... 40
MySQL........................................................................................................ 40
MODELO DE PROCESO......................................... 43
Capítulo 0.
MPIU PARA LA WEB.................................................. 44
INGENIERÍA DEL SOFTWARE................................................................. 45
DISEÑO CENTRADO EN EL USUARIO.................................................... 46
INGENIERIA DE LA USABILIDAD............................................................. 48
USABILIDAD EN LA WEB.......................................................................... 50
BUSCANDO UN MODELO DE PROCESO............................................... 52
MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD......... 53
APLICACIÓN DEL MODELO DE PROCESO A LA WEB.......................... 54
ESQUEMA DEL MODELO......................................................................... 55
CASO DE ESTUDIO................................................. 63
Capítulo 0.
APLICACIÓN DEL MODELO...................................... 64
PLANIFICACIÓN........................................................................................ 65
vi
CONTENIDOS
EVALUACIÓN............................................................................................ 65
GLOSARIO................................................................................................. 68
Capítulo 0.
ANÁLISIS DE REQUISITOS....................................... 70
ANÁLISIS ETNOGRÁFICO........................................................................ 71
ANÁLISIS DE LOS IMPLICADOS.............................................................. 75
ACTORES, ROLES Y ORGANIZACIÓN.................................................... 78
PLATAFORMA........................................................................................... 79
OBJETIVOS DE LA USABILIDAD..............................................................80
OBJETIVOS DE LA APLICACIÓN............................................................. 82
ENCUESTAS, ESCENARIOS Y ANÁLISIS COMPETITIVO......................83
Capítulo 0.
DISEÑO CONCEPTUAL............................................. 86
ANÁLISIS DE TAREAS.............................................................................. 87
ARQUITECTURA DE LA INFORMACIÓN................................................. 94
ELEMENTOS FUNDAMENTALES DE DISEÑO DE LA PÁGINA............118
Capítulo 0.
PROTOTIPADO......................................................... 126
DISTRIBUCIÓN DE LA PÁGINA.............................................................. 127
MAQUETAS............................................................................................. 128
TEST.DE LAS MAQUETAS CON USUARIOS.........................................133
PROTOTIPOS.......................................................................................... 138
TEST DE LOS PROTOTIPOS CON USUARIOS..................................... 145
Capítulo 0.
IMPLEMENTACIÓN.................................................. 148
USABILIDAD EN EL DESARROLLO DEL SOFTWARE.......................... 149
DISEÑO BÁSICO DE LA PÁGINA........................................................... 157
ESCRIBIR PARA LA WEB....................................................................... 159
Capítulo 0.
LANZAMIENTO......................................................... 162
PRE-LANZAMIENTO............................................................................... 163
LANZAMIENTO........................................................................................ 164
POST-LANZAMIENTO............................................................................. 166
CONCLUSIONES Y LÍNEAS FUTURAS............... 169
Capítulo 0.
CONCLUSIONES ..................................................... 170
ESTADO ACTUAL.................................................................................... 173
LINEAS FUTURAS................................................................................... 173
Capítulo 0.
APÉNDICES.............................................................. 178
PLANIFICACIÓN DEL PROYECTO......................................................... 179
GLOSARIO DE TÉRMINOS RELACIONADOS CON LA MÚSICA
ELECTRÓNICA........................................................................................ 184
CUESTIONARIO...................................................................................... 191
ESCENARIOS.......................................................................................... 194
ESTADÍSTICAS........................................................................................ 200
ANÁLISIS COMPETITIVO........................................................................ 202
REVISIÓN DE LA ARQUITECTURA........................................................211
Proceso.................................................................................................... 211
General..................................................................................................... 211
Tratamiento.............................................................................................. 211
Organización............................................................................................ 211
Clasificación............................................................................................. 211
Enlaces..................................................................................................... 212
Búsqueda................................................................................................. 212
REVISIÓN DE LOS PROTOTIPOS..........................................................213
Distribución............................................................................................... 213
Navegación............................................................................................... 213
REVISIÓN DETALLADA DE PROPÓSITO GENERAL............................ 214
Gráficos.................................................................................................... 214
Color......................................................................................................... 215
Tipografía................................................................................................. 215
CONTENIDOS
vii
FORMULARIO DE PREPARACIÓN DE UN TEST CON USUARIOS..... 216
GUÍA DE ESTILO PARA LA REDACCIÓN DE CONTENIDO..................217
FORMULARIO DE INFORME Y RESOLUCIÓN DE PROBLEMAS........ 220
REVISIÓN DE LA POST-PRODUCCIÓN................................................ 222
Contenido................................................................................................. 222
Distribución y gráficos.............................................................................. 222
Compatibilidad con navegadores............................................................. 222
Compatibilidad con las preferencias de usuario....................................... 222
HTML y código......................................................................................... 222
Documentación......................................................................................... 222
LISTA DE CONTROL PARA UN MANTENIMIENTO MÍNIMO................ 224
Capítulo 0.
REFERENCIAS......................................................... 226
REFERENCIAS........................................................................................ 227
BIBLIOGRAFÍA......................................................................................... 229
ENLACES................................................................................................. 230
viii
CONTENIDOS
RESUMEN
La Web ha ido convirtiéndose paulatinamente en una de las interfaces más
utilizadas para distribuir contenidos de forma masiva y, actualmente, tiende a
ser una de las plataformas estándar. Los diseñadores y técnicos informáticos
están escribiendo un nuevo capítulo en el diseño de publicaciones on-line,
autoedición y tipografía digital. Como fruto del aprovechamiento de este nuevo
flujo de comunicación surge el proyecto de apoyar un contenido especializado
en ocio musical con el diseño y la tecnología adecuadas para este medio.
Este documento recoge el trabajo realizado para la creación de un sitio web de
tipo portal desde el cual, por una parte, ofrecer información y servicios
relacionados con los intereses específicos de la escena musical electrónica, y,
por la otra, permitir que los miembros de edición de contenido puedan
actualizar dinámicamente la página web y desempeñar su trabajo desde
cualquier parte, sólo con tener una maquina conectada a Internet.
Para tal fin, en todo el proceso de producción se han aplicado las
metodologías de ingeniería y técnicas de calidad necesarias conformes al
seguimiento del “Modelo de Proceso de la Ingeniería de la Usabilidad”. Un
modelo centrado en el usuario que nos permite obtener una aplicación final de
mayor calidad.
En última instancia, para la implementación del sistema nos hemos basado, en
la mayor medida de lo posible, en tecnologías Open Source (Apache, PHP y
MySQL) y hemos perseguido la conformidad con los estándares del W3C
(XHTML y CSS).
Palabras clave
Web, sitio web, portal, usabilidad, ingeniería de la usabilidad, modelo de
proceso, evaluación, prototipado, diseño centrado en el usuario, diseño,
música electrónica, información dinámica, publicación on-line, Open Source.
x
CONTENIDOS
INTRODUCCIÓN
MÚSICA ELECTRÓNICA Y CULTURA DE CLUB
CULTURANOCTURNA.COM
OBJETIVOS DEL PROYECTO
•
•
Usabilidad
Implementación
ESTRUCTURA DEL DOCUMENTO
Con la llegada de Internet como canal de distribución masiva de contenidos
(escritos), el editor de cualquier medio impreso puede competir directamente
con sus análogos más importantes; el coste de edición y distribución deja de
ser un factor significativo.
Para sacar el máximo partido a esta forma de publicar sin tener que pasar por
los grandes grupos mediáticos, debemos primar el valor (rigor, imparcialidad,
calidad de los artículos) de la información. Esto se consigue, en parte, si los
encargados de elaborar el contenido “demuestran ser expertos en la materia”
[KOT02]. ¿Cómo podemos cumplir este requisito?
La respuesta se encuentra en el , “Análisis de requisitos”. Son los propios
usuarios a los que va dirigida la información quienes darán vida y dinamismo
al contenido. Una audiencia que participa activamente del ocio y que comparte
rasgos comunes de entusiasmo y admiración por el medio. Una industria
dedicada a promocionarse y expandirse, y un equipo humano que no sólo
disfruta de la posibilidad de ser diseñadores/programadores/periodistas sino
que están felizmente sorprendidos de ser impactantes comunicadores que
trabajan en un medio dinámico y en continuo cambio.
Pero, como bien señala John Blossom “la información no es contenido hasta
que se haya creado un entorno útil para su consumo, para una audiencia
concreta situada en un contexto específico y que suponga un valor añadido”
[KOT02]. Es decir, solamente podremos centrar todos los esfuerzos en
proveer información de alto valor añadido para la audiencia cuando
dispongamos de la tecnología que permita olvidarse de ella a los editores de
contenido. Ese entorno, como veremos más adelante, es la Web.
MÚSICA ELECTRÓNICA Y CULTURA DE CLUB
El ocio está definido como un logro de las sociedades del bienestar, como el
espacio donde el individuo se libera de las obligaciones impuestas por el
mundo laboral, la etiqueta y la rutina para dedicarse a aquellas otras
actividades que elige libremente y le permiten expandir algunas de sus
mejores cualidades.
Uno de los grupos sociales que más se ha apropiado del espacio del ocio son
los jóvenes, lo que ha dado lugar a la expansión de una industria y un
mercado específicos. Concretamente las actividades relacionadas con el salir
de marcha por las noches, buscar la diversión yendo de bares, discotecas, a
bailar o a escuchar música, son actividades que han experimentado una
expansión enorme en estas últimas dos décadas. Se trata de actividades que,
debido a la organización del tiempo, se realizan de noche y en espacios donde
el ambiente, la estética, el tipo de gente y, sobretodo la música, son los
elementos que más identidad le otorgan.
La música y el baile son el principal ingrediente de la diversión nocturna. La
década de los noventa se caracteriza por el auge de la música electrónica de
tal forma que convierten el movimiento musical juvenil, e incluso adulto, en un
fenómeno social específico. Hace poco más de 15 años se asistía al
nacimiento de una nueva escena, aún un poco underground y minoritaria, pero
con un extraordinario potencial latente, en la cual se proyectaba el espíritu de
2
INTRODUCCIÓN
míticos clubs como The Warehouse (Chicago) o The Music Institute (Detroit,
véase la Figura 1) y, a la vez, exaltaba el triunfo de la electrónica como música
de consumo masivo: era la definición de la cultura de clubs (club culture), en
el núcleo de la cual, sin duda, la aplicación de las nuevas tecnologías en la
creación/producción, reproducción y difusión musicales, así como el auge y la
consolidación de la música electrónica (la cual “desplaza día a día el pop/rock
como oferta de ocio nocturna” [GAR01]) ejercen una determinante influencia
en el rumbo de la cultura/música popular contemporánea.
Figura 1
La ciudad de Detroit.
Considerada la ciudad en la
que nació el techno, uno de
los géneros musicales con
más aceptación dentro de la
música electrónica.
En este sentido, es preciso tomar conciencia de las estrechas relaciones entre
la dimensión artística y las nuevas tecnologías, puesto que “las relaciones que
se han establecido entre música y tecnología siempre tienen que definirse en
términos de íntima relación” [ADE97]. La música sigue siendo una de las
palabras clave con las que se empieza una sesión de navegación y la Web es
el medio natural de comunicación para la música electrónica.
Partiendo de la idea de ser un recurso propio para amantes de la música
electrónica, especializado (tal como afirma Kevin Goldsmith, “a medida que
avance la tecnología las revistas on-line serán cada vez más especializadas, y
así es como debe ser. Las mejores revistas en papel lo son” [GIL00]),
completamente gratuito y con la necesidad de encontrar una comunidad a su
alrededor, nace como proyecto culturanocturna.com.
CULTURANOCTURNA.COM
La rápida evolución de Internet está dejando obsoleto el diseño tradicional de
sitios estáticos cuyo objetivo es tener una presencia básica en Internet. A día
de hoy para que un sitio sea exitoso, dinámico y abierto a los usuarios debe
convertirse en un auténtico portal con información relevante y dinámica.
culturanocturna.com necesita un sistema de gestión de contenidos
implementado en la figura de un portal vertical o temático, es decir, un portal
INTRODUCCIÓN
3
especializado en un tema determinado, con contenidos específicos
relacionados exclusivamente con la música electrónica, para convertirse en un
referente en su sector dentro de la web.
En el otro lado estarían los portales generalistas, que no podrán competir en
un futuro con un sitio especializado. El problema de estos portales es que
piensan que los internautas entrarán en ellos para todo, que el resto de
Internet no estará a la altura de sus contenidos. Además, son igualmente
conocidos sus numerosos problemas de gestión: necesidad de una gran
inversión inicial, necesidad de un gran equipo humano para creación y
mantenimiento, mercado copado por los grandes portales, tendencia de los
navegantes a dejar de visitar los portales conforme aumenta su experiencia en
el manejo de Internet, etc. A la hora de competir con un medio de
comunicación o portal vertical, tenderán a la especialización, porque si no, se
asociarán con contenidos superficiales.
El sitio web de culturanocturna.com será un portal vertical que girará en
torno a la escena musical electrónica. En el sitio, los usuarios podrán consultar
información sobre la programación de eventos y sobre artistas, leer
actualizaciones de noticias y entrevistas. Además incluirá críticas y reseñas
musicales, reportajes fotográficos y listas de enlaces de interés. Todo un
contenido fresco y reportajes generalmente más atrevidos y agresivos que
reflejan que la audiencia de nuestro medio es joven. Por otra parte,
incluiremos un foro para que la comunidad de usuarios pueda discutir temas y
ponerse en contacto, y un sistema de gestión y administración on-line de toda
la web.
OBJETIVOS DEL PROYECTO
Mediante la expansión y el crecimiento de la Red se está creando un nuevo
papel para los diseñadores y programadores on-line, que se enfrentan a los
retos de la tecnología rápidamente cambiante, frustrados a la vez por la
velocidad del cambio y por la sensación de que el cambio no se está
produciendo con suficiente rapidez.
En la actualidad y debido a la complejidad de las aplicaciones web, muchas de
las soluciones se plantean ad-hoc. Esto lleva a sistemas software de baja
calidad, poco extensibles y de difícil mantenimiento. Para paliar estos
problemas, en los últimos años se ha asistido a un incremento de propuestas
de métodos para estructurar el proceso de diseño y desarrollo de aplicaciones
web (véase [HEN00], [CER00], [CAC00], [TRO97], [MAY99], [NIE99]). Una
correcta y detallada planificación previa del diseño del sitio se hace
indispensable.
El proyecto se va a realizar siguiendo un modelo de ciclo de vida basado en la
Ingeniería de la Usabilidad, en el cual en todas las etapas interviene la
evaluación, “ya sea inicialmente evaluando al usuario y su lugar de trabajo, o
posteriormente realizando algún tipo de prototipado en el que se cuestione la
usabilidad” [LOR02].
Además, para la implementación del proyecto se estudiarán y aplicarán un
conjunto de herramientas y lenguajes de desarrollo de sitios web. En
4
INTRODUCCIÓN
particular, aquellas que permitan diseñar y producir sitios web dinámicos,
dando preferencia en su elección a aquellas basadas en software Open
Source.
Usabilidad
Usabilidad se define coloquialmente como facilidad de uso, ya sea de una
página web, una aplicación informática o cualquier otro sistema que interactúe
con un usuario. Un método basado en la usabilidad utiliza técnicas para
diseñar desde una perspectiva centrada en el usuario, que deben ser
considerados prematura y frecuentemente durante todo el proceso. La idea de
"diseño centrado en el usuario" propone que los diseñadores comprenden el
contexto de uso: esto significa un profundo entendimiento del usuario, del
entorno en el que se desarrolla el trabajo y las tareas de usuario. Además, se
contemplarán los aspectos de mantenimiento del producto o sistema,
asistencia al usuario y documentación.
En la actualidad, debido a la expansión de los ordenadores, el usuario
mayoritario es un tipo de persona para la que los computadores no son más
que una herramienta a su disposición en la vida cotidiana. Ya no se trata de
que una persona utilice y aprenda a utilizar la Web por obligación, sino de que
perciba rápidamente los beneficios de usar la Web. Hasta hace bien poco, la
gente se adaptaba a las webs, ahora las webs han de adaptarse a la gente.
Entre los beneficios probados que aporta seguir unos principios de diseño
basados en la usabilidad, Eduardo Manchón señala los siguientes [MAN02]:
•
•
•
•
•
•
Reducción de los costes de aprendizaje.
Disminución de los costes de asistencia y ayuda al usuario.
Optimización de los costes de diseño, rediseño y mantenimiento de los
sitios.
Aumento de la tasa de conversión de visitantes a clientes del sitio web.
Mejora la imagen y el prestigio del sitio web.
Mejora la calidad de vida de los usuarios del sitio, ya que reduce su estrés,
incrementa la satisfacción y la productividad.
Todos estos beneficios implican una reducción y optimización general de los
costes de producción, así como un aumento en la productividad de los sitios
web de comercio electrónico. La usabilidad permite mayor rapidez en la
realización de tareas y reduce las pérdidas de tiempo (véase la Figura 2).
Implementación
A pesar de los intentos que desde los últimos treinta años vienen realizando
distintas empresas por obtener control de la información, existe gran cantidad
de software que escapa a su control y que ha sido desarrollado por millones
de programadores de todo el mundo, se lo conoce como software libre o
software Open Source. Gracias a él ha sido posible, por ejemplo, el
crecimiento y el estado actual de Internet. Esto pone otro freno a quienes,
desvirtuando la esencia de la educación, se detienen en los aspectos técnicos:
en la actualidad existe software libre que se usa exitosamente en
universidades, estados y empresas aún en sus sistemas más críticos.
INTRODUCCIÓN
5
Figura 2
Un ejemplo de pobre
usabilidad.
No está claro como continuar.
¿Se está cargando algo?
¿Supone el usuario que ha de
hacer clic en alguno de los
vínculos? ¿Dónde estamos?
¿Porqué la pantalla está
prácticamente vacía? ¿Tengo
un navegador compatible?
La Free Software Foundation define el software libre de la siguiente manera:
“Software libre” se refiere a la libertad de los usuarios para ejecutar, copiar,
distribuir, estudiar, cambiar y mejorar el software. Más precisamente, se refiere
a cuatro libertades para los usuarios del software:
•
•
•
•
La libertad de ejecutar el programa, con cualquier propósito.
La libertad de estudiar cómo funciona el programa, y adaptarlo a sus
necesidades. El acceso al código fuente es una precondición para esto.
La libertad de distribuir copias, con lo que puede ayudar a su vecino.
La libertad de mejorar el programa y hacer públicas las mejoras a los
demás, de modo que toda la comunidad se beneficie. El acceso al código
fuente vuelve a ser una precondición para esto.
Un programa es software libre si los usuarios tienen todas estas libertades. La
gran mayoría del software libre tiene como postulado la determinación de que
el usuario no es un iletrado computacional. Parte del hecho de que confía en
los conocimientos y habilidad del usuario para lograr su objetivo. Este punto
de partida otorga gran poder y flexibilidad para los usuarios capaces y con
ánimo de aprender, pero limita al resto de las personas que solo quieren
facilitarse una tarea de manera inmediata.
Por el contrario, el uso de software propietario en la educación favorece la
dependencia tecnológica, no sólo de los futuros profesionales sino también de
sus futuros clientes (o alumnos, en el caso en que dicho profesional incursione
en la docencia).
He aquí algunos datos referentes a la realidad actual del software Open
Source [SAN02] que pueden interesarnos por el tema del proyecto:
Cuota de mercado
6
INTRODUCCIÓN
•
•
•
•
Desde abril de 1996, el servidor web más utilizado en Internet es Open
Source: Apache. En Junio de 2002, Apache tenía un 60% de la cuota de
mercado, y en agosto un 64%.
Wu-ftpd (Open Source) es el servidor FTP más utilizado en Internet.
PHP (Open Source) es el lenguaje más utilizado en Internet para serverside-scripting (programación de páginas web dinámicas), por delante del
lenguaje ASP de Microsoft, según un estudio de abril de 2002.
Un informe de IDC indica que en el año 2000 Linux era el 2º sistema
operativo más utilizado para servidores en el mundo, con un 27% del
mercado, frente a Windows con un 40%.
Rendimiento
• Un estudio del Sys Admin Magazine en Julio de 2001 muestra que Linux
tiene mejor rendimiento que Solaris y Windows 2000.
Seguridad
• Durante 2001, IIS (producto de servidor web de Microsoft) sufrió 17
millones de ataques en Internet, mientras que Apache (producto Open
Source con una presencia de mercado mucho mayor) sólo recibió 12.000
ataques, según lo reportado en febrero de 2002 por SecurityFocus.
• En septiembre de 2001, Gartner Group recomendó que las empresas que
utilizasen IIS migrasen a Apache o iPlanet, debido a los altos costes de
mantenimiento derivados de la vulnerabilidad del producto.
Coste
• Las soluciones informáticas basadas en Linux y software libre tienen un
coste global entre un 24% y un 34% menor que las soluciones basadas en
el enfoque propietario de Microsoft, según indica un estudio publicado en
2002 por Cybersource en el que se modela una organización con 250
puestos de trabajo, servidores, aplicaciones estándar, conexión a Internet,
sistema de e-business, etc.
Algunos casos en el sector privado
• Yahoo! utiliza, entre otro software Open Source, MySQL (gestor de bases
de datos Open Source) para proporcionar sus servicios.
• Google, el buscador más utilizado en Internet, está soportado por un
cluster de más de 10.000 máquinas Linux, uno de los mayores del mundo.
Administraciones públicas
• En Perú, está en debate una ley que requerirá que los organismos de la
administración pública utilicen exclusivamente software Open Source.
Para el caso que nos ocupa, la combinación Open source de PHP, Apache y
MySQL se ha considerado como la mejor combinación para el desarrollo de
páginas Web.
En concreto, PHP está diseñado para la web, es multiplataforma y
multisistema operativo. Soporta varios servidores web y prácticamente
cualquier base de datos. Por su parte, MySQL fue diseñada con el objetivo
principal de la velocidad y consume muy pocos recursos. Este “tándem”
cuenta con usuarios tan notables como la NASA, Yahoo! (véase Figura),
Ericsson o el Censo Norteamericano. Y sus beneficios son realmente
determinantes:
INTRODUCCIÓN
7
•
•
•
•
Coste de software 0 Euros.
Actualizaciones inmediatas y gratuitas.
Potencia, velocidad y seguridad demostradas.
Estándar en continuo y rápido crecimiento.
Figura 3
Página de inicio de Yahoo!
Yahoo!, una de las empresas
más representativas de
Internet, decidió abandonar su
propio lenguaje propietario
(yScript, empleado desde hace
más de seis años) para pasar
a emplear PHP.
ESTRUCTURA DEL DOCUMENTO
El presente documento se encuentra dividido en cinco secciones. Incluimos en
ellas una completa descripción de las tecnologías empleadas, así como de los
métodos y procesos de diseño estudiados y seguidos para llevar a cabo el
desarrollo del proyecto. El resultado de la aplicación de estos recursos se
muestra en los capítulos posteriores, donde hacemos un seguimiento de la
evolución del sitio web a lo largo de todo su desarrollo, haciendo hincapié en
las etapas que particularizan este proyecto. A continuación comentamos
brevemente la estructura del documento:
•
•
•
•
•
8
Introducción. En la actual sección describimos la finalidad y la motivación
del proyecto, así como los objetivos que se pretenden alcanzar.
Estado del arte. A continuación situaremos al lector en el entorno en el
que se desarrolla el proyecto. Además, definiremos y expondremos como
se han alcanzado las tecnologías apropiadas para su aplicación en el
proyecto.
Modelo de proceso. En esta sección se dará una visión global de las
bases teóricas y las aproximaciones que intentan resolver el modelado
conceptual de aplicaciones web. Concretamente, estudiaremos el Modelo
de Proceso de la Ingeniería de la Usabilidad.
Caso de estudio. Aplicaremos, en este apartado, el modelo estudiado
anteriormente a la implementación del portal culturanocturna.com. Se
detallarán todas las fases seguidas, aplicadas e implementadas en la
realización del proyecto, estructurada de una forma que refleje el modelo
de proceso seguido.
Conclusiones. Por último, se comentan las conclusiones obtenidas, así
como los trabajos futuros y los trabajos en curso.
INTRODUCCIÓN
INTRODUCCIÓN
9
10
INTRODUCCIÓN
1
ESTADO DEL ARTE
WORLD WIDE WEB
CIBERNÉTICA, COMUNICACIÓN ENTRE MÁQUINAS
TCP/IP
LA WORLD WIDE WEB
•
•
•
•
El modelo cliente-servidor
Cliente local
¿Cómo se organiza la Información?
Conclusiones
•
•
Funcionamiento
Los servidores de WWW
•
•
Corrección sintáctica de los documentos
Evolución del HTML
•
JavaScript en los documentos HTML
EL PROTOCOLO HTTP
HTML
TENDENCIA ACTUAL
XHTML
HTML DINÁMICO
HOJAS DE ESTILO
JAVASCRIPT
MACROMEDIA FLASH
CIBERNÉTICA, COMUNICACIÓN ENTRE MÁQUINAS
En una de las obras de mayor repercusión sobre las telecomunicaciones
modernas, A Mathematical Theory of Communication, de C. E. Shannon y W.
Weaver, editada por la Universidad de Illinois en 1949, se define el concepto
de comunicación de una manera muy sencilla: “comunicación son todos
aquellos procedimientos por medio de los cuales una mente afecta a otra”.
Esto incluye voz, texto impreso o escrito, música, artes, teatro y danza. En la
misma obra se amplía la idea anterior para incluir la posibilidad de
comunicación entre máquinas: “comunicación son todos aquellos
procedimientos por medio de los cuales un mecanismo afecta la operación de
otro”, y se menciona explícitamente, como ejemplo, el control de aviones.
En sentido estricto, comunicación es transmisión de información. Hoy es
indudable que estamos viviendo lo que se llama “la era de la información” y
además estamos inmersos en un mundo cada vez más dependiente de
dispositivos electrónicos digitales que procesan información. Uno de estos
sistemas de comunicación, cuyo gran impacto sólo es comparado con el de la
televisión o la radio, son las redes digitales de información, basadas en la
comunicación entre ordenadores.
Sin duda alguna, la red de redes de ordenadores por excelencia es Internet,
mucho más que una tecnología. Un medio de comunicación, de interacción y
de organización social, pero una red de ordenadores al fin y al cabo. Y como
tal, necesita un lenguaje común para la intercomunicación total, una especie
de esperanto informático que permita la comunicación entre máquinas de
distinto tipo, el protocolo TCP/IP.
TCP/IP
Hasta el año 1983 la red ARPANET se basaba en NCP (Network Control
Protocol) que convivía con el novato IP. No había un protocolo único para
comunicar las 213 máquinas que formaban parte de la red. Pero un par de
años antes se había desarrollado el RFC 801 conocido como NCP/TCP
TRANSITION PLAN y el día elegido para la migración del protocolo NCP al
TCP/IP fue el 1 de Enero de 1983.
El Internet Protocol se convirtió así en la única forma aprobada de mover
datos dentro de esa joven red global donde todas las computadores iban a
poder intercambiar información. Todos los ordenadores en Internet utilizan el
protocolo TCP/IP, y gracias a eso se consigue eliminar la barrera de la
heterogeneidad de las máquinas y resolver el problema del direccionamiento.
Con el IP nacieron toda una serie de protocolos de alto nivel para transferir
archivos (FTP o File Transfer Protocol), intercambiar correo (SMTP o Simple
Mail Transfer Protocol) o acceder a máquinas remotamente (TELNET), todos
basados en la misma filosofía. Apenas 10 años después del cambio a IP, el
mundo presenció el nacimiento del World Wide Web y la Internet como hoy en
día la conocemos comenzó a tomar forma.
Capítulo 1: World Wide Web
13
LA WORLD WIDE WEB
La World Wide Web, abreviado frecuentemente como WWW, W3 o Web, es el
servicio que más ha popularizado el uso de Internet, tanto que frecuentemente
se utiliza el término Web para referirse a la Red.
Es un sistema integrador de información para su distribución en Internet
basado en páginas hipertexto, escritas en el lenguaje HTML (HyperText
Markup Language), que se distribuyen empleando el protocolo HTTP
(HyperText Transfer Protocol).
La World Wide Web fue desarrollado inicialmente por Tim Berners-Lee y
Robert Cailliau del CERN (Centre Européen de la Recherche Nucléaire) en
1991, para proporcionar un medio de compartir documentos entre los físicos
europeos que colaboraban con el laboratorio.
Era necesario un sistema que permitiera, por una parte, el acceso remoto a la
información independientemente el sistema empleado y, por otra, conectar la
información de distintas fuentes.
Surge entonces la idea de incorporar en el sistema la noción de hipertexto,
término acuñado por Ted Nelson en los años sesenta para referirse a “un
cuerpo de material escrito o gráfico interconectado de modo complejo que no
se puede representar convenientemente sobre papel; puede contener
anotaciones, adiciones y notas de los estudiosos que lo examinan”.
Para conseguir todo lo anterior el WWW se diseñó usando el modelo clienteservidor y estableciendo como formato de la información un lenguaje de
marcas específico, el HTML, suficientemente sencillo como para ser
independiente del sistema, pero a la vez lo bastante potente como para
soportar la idea del hipertexto.
Uniendo ambas cosas se conseguía un verdadero sistema multiplataforma; lo
único que se necesitaba era el desarrollo de clientes para cada sistema,
capaces de comunicarse con los servidores y representar los documentos en
HTML. De este modo, la información es independiente del sistema en el que
reside y, disponiendo de un visor, está accesible desde cualquier entorno.
Más adelante, el sistema de páginas hipertexto se convertiría en un verdadero
sistema hipermedia, basado en la suma de las potencialidades hipertextuales
y multimediáticas, en el cual las páginas permiten acceder a imágenes,
sonidos, vídeos, etc. Lo que ha permitido interconectar e integrar conjuntos de
información prácticamente ilimitados, incrementado así el atractivo de la Web.
El modelo cliente-servidor
Internet se basa en el modelo cliente-servidor (véase Figura 4). Mientras los
estratos inferiores son comunes entre dos máquinas que se comunican, en los
superiores una suele tener un programa servidor y la otra una aplicación
cliente. Pero el enfoque es radicalmente diferente a las primeras redes de
computadoras, basadas en un sistema centralizado. En Internet, el proceso de
información reside tanto en el servidor como en el cliente, por lo que se puede
decir que la inteligencia de la red está distribuida.
14
ESTADO DEL ARTE
Figura 4
Modelo cliente-servidor.
Es una filosofía que se basa en la petición de un servicio por parte de un
cliente, realización del mismo por parte del servidor y eventual respuesta de
los resultados.
Cliente local
Una de las formas más versátiles y potentes de acceder a la WWW es a
través de un cliente local denominado navegador o browser. Actualmente, la
mayoría de los usuarios de Internet utilizan navegadores de entorno gráfico en
sus comunicaciones con los servidores de datos.
Los dos más usados y extendidos son el Microsoft Internet Explorer y el
Netscape Navigator. Sin embargo, la primacía de un único navegador en la
informática doméstica, como ocurre con Microsoft Internet Explorer, hace que
para muchos usuarios este sea el único navegador conocido y no simplemente
una opción más entre una variada gama. Al estar los ordenadores domésticos
copados por Explorer, se tiende a actuar como si el navegador de Microsoft
fuera el único, cuando no es precisamente el más escrupuloso con los
estándares. Por esa razón, muchas veces será necesario tener en cuenta el
navegador que se comunicará con un servidor, ya que el resultado puede ser
diferente dependiendo del navegador utilizado.
¿Cómo se organiza la Información?
En general, los documentos, escritos en el lenguaje HTML, se colocan en una
máquina que ejecuta un programa servidor de HTTP. En el servidor se crea un
árbol de directorios y cada directorio contiene un fichero índice, de modo que
al acceder al servidor siempre hay un documento inicial (el índice del directorio
raíz del árbol).
Estas páginas pueden hacer referencia a otras, que se pueden encontrar en el
mismo directorio, en otro dentro de la misma máquina o en cualquier otro
servidor de la red.
15
En realidad, los enlaces mencionados en el punto anterior son URI (Uniform
Resource Identifiers), que pueden referenciar cualquier tipo de recurso de la
Red. Existen varios tipos de URI, aunque en la actualidad los únicos realmente
generalizados son los URL (Uniform Resource Locators), que hacen referencia
de forma compacta a un recurso, indicando de qué tipo es y dónde se
encuentra.
En un futuro se usarán los URN (Uniform Resource Names), que identificarán
el tipo de recurso y cómo se llama, independientemente de su posición en la
Red, de modo que cuando queramos acceder a un recurso será el servidor
más cercano (que lo tenga) el que nos lo envíe.
Hasta ese día nos conformaremos con direcciones de recursos usando URL
de la forma http://servidor.de.www/directorio/destino/página.html. En primer
lugar se indica que tenemos que acceder a un servidor de HTTP, luego se da
la dirección de la máquina que nos va a proporcionar el documento, su
situación dentro del árbol y su nombre. Si no se pone el nombre del fichero, el
servidor nos devuelve el índice del directorio referenciado. En definitiva, un
URL es como una dirección completa de un determinado servicio y
proporciona todos los datos necesarios para localizar el recurso.
Conclusiones
En definitiva, la Web se ha impuesto por muchas razones, entre las que
podríamos destacar: la sencillez y pocos requisitos para cliente y servidor, la
simplificación de la navegación y los escasos conocimientos necesarios por
parte del usuario, las vistosas presentaciones que permite con poco esfuerzo,
su mantenimiento económico, su independencia de sistemas operativos, su
capacidad como medio de edición distribuida y muchas otras.
Pero, sin embargo, la web tiene grandes inconvenientes, sobre todo en
aspectos de seguridad, de rendimiento (ya que la velocidad de la conexión
suele ser insuficiente), el equilibrio de cargas es inadecuada entre servidor y
cliente, las incompatibilidades existentes entre versiones de HTML, etc.
Afortunadamente, muchas de ellas se están resolviendo o están apareciendo
extensiones. Todo ello es causa y efecto de su éxito, que se demuestra con
datos como el número de páginas que el robot explorador de Google ha
visitado, más de tres mil millones.
EL PROTOCOLO HTTP
Al igual que el resto de servicios Internet, la WWW se basa en el empleo de un
protocolo para la transferencia de información. Este protocolo es el
denominado HTTP (HyperText Transfer Protocol), un protocolo genérico a
nivel de aplicación, orientado a objetos y sin estados que se ha usado en la
WWW desde 1990.
Entre otras características, el HTTP se basa en la tipificación de la
representación de los datos, lo que permite la construcción de sistemas
independientemente de la información a transmitir. Para esto último usa
muchas de las construcciones definidas en el MIME (Multipurpose Internet
Mail Extensions), extensiones al formato texto permitido en los documentos de
16
ESTADO DEL ARTE
correo que permite añadir ficheros de todo tipo, reconociendo el formato para
poder lanzar las aplicaciones ligadas.
En Internet la comunicación HTTP generalmente funciona sobre conexiones
TCP/IP. El puerto por defecto es el 80, pero se pueden emplear otros. Esto no
elimina la posibilidad de que el HTTP se implemente sobre cualquier otro
protocolo de Internet u otras redes.
Sin embargo, la primera versión de este protocolo presentaba una serie de
problemas que han venido a solucionarse con la versión 1.1, normalizada por
el W3C (WWW Consortium). Una de los principales era la necesidad de
establecer y terminar una conexión TCP por cada recurso, que resultaba
tremendamente ineficiente en una Internet saturada en la que el
establecimiento de cada nueva conexión es un proceso lento y costoso. Con la
nueva versión se implementó un mecanismo denominado HTTP Keep Alive,
que permite que una misma conexión se mantenga activa durante un cierto
tiempo, de forma que sea utilizada en sucesivas transacciones.
Funcionamiento
El protocolo se basa en el paradigma petición-respuesta (véase Figura). Un
cliente establece una conexión con un servidor y le envía una petición en la
que incluye el método de petición, el URI (Uniform Resource Identifier) del
recurso a obtener y la versión del protocolo, seguido de un mensaje MIME que
contiene modificadores de la petición, información del cliente y, posiblemente,
el cuerpo del mensaje con contenido.
El servidor responde con una línea de estado, incluyendo la versión del
protocolo del mensaje y un código de éxito o error, seguido de un mensaje que
contiene información del servidor, metainformación de entidades y,
generalmente, una o varias entidades del cuerpo del mensaje.
La mayor parte de comunicaciones HTTP son iniciadas por el programa cliente
(el del usuario) y consisten en una petición que debe ser aplicada a un recurso
en algún servidor origen.
Figura 5
Paradigma petición-respuesta
del protocolo HTTP.
Los servidores de WWW
Para distribuir el hipertexto en Internet es necesario instalar en una máquina
un servidor HTTP, que permite que los clientes soliciten las páginas y los
17
archivos. Los servidores son programas que esperan permanentemente que
alguien solicite una conexión. Cuando a un ordenador le llega una solicitud de
servicio enviada por otro ordenador de la red, se interpreta el tipo de llamada y
se pasa el control de la conexión al servidor correspondiente. La aplicación
que satisface las solicitudes HTTP realizadas por los navegadores es un
servidor web.
HTML
El formato de las páginas de la WWW es el lenguaje de marcas HTML
(HyperText Markup Language). A pesar de la multitud de utilidades que
ayudan a generar páginas web de una forma rápida, eficiente y vistosa, todas
se basan en este sistema de definición de documentos hipertexto.
El HTML no es más que una aplicación del SGML (Standard Generalized
Markup Language), un sistema para definir tipos de documentos estructurados
y lenguajes de marcas para representar esos mismo documentos. Los ficheros
HTML describen la distribución y estilo de cada uno de los elementos de una
página de Web, a base de combinar el texto de la página con los diferentes
comandos del lenguaje. El resultado de la presentación de un documento
HTML es muy similar a lo que se puede conseguir con un procesador de
textos; sin embargo, el código HTML puede ser interpretado y visualizado en
una gran variedad de entornos, desde una impresora de líneas hasta una
sofisticada estación gráfica.
Los documentos HTML son ficheros de texto plano, sin caracteres especiales
o de control (todos deben ser códigos ASCII). Suelen tener asignada las
extensiones htm o html (depende del sistema operativo), pero gracias a MIME
es posible utilizar otras extensiones, sin más que alterar la correspondiente
base de datos MIME de los clientes o servidores.
Estas dos condiciones son muy importantes, ya que permiten que una
determinada información pueda ser vista por usuarios diferentes, con
independencia de las capacidades de su entorno de trabajo. Un documento
HTML sólo contiene la especificación de los elementos que lo componen
(títulos, párrafos, imágenes, etc.), y es responsabilidad de cada cliente el
mostrar esta información de la manera más adecuada, en función de sus
capacidades y las características del entorno.
Se puede decir que HTML es un lenguaje interpretado, ya que son los
browsers los encargados de procesar y representar su contenido. Un browser
tiene mucha libertad para ajustar la presentación de un documento HTML en
función de los recursos disponibles. Por lo tanto, se debe ser consciente que,
dependiendo del entorno de trabajo de cada cliente (sistema operativo, tipo y
versión del browser, etc.), un documento HTML puede ser visualizado de
manera diferente.
En general, un browser no respeta nada del posible formato que contenga el
documento HTML que interpreta, por lo que se ignoran los saltos de línea o los
espacios múltiples entre palabras. Si se desea incluir un salto de línea, se
debe indicar explícitamente a través de su correspondiente etiqueta; por tanto,
la inclusión de espacios adicionales entre líneas de código HTML ayuda a
mejorar la legibilidad del documento, pero no afecta a la forma en que este se
18
ESTADO DEL ARTE
representa.
La composición y formato de un documento se realiza a base de insertar de
etiquetas, palabras reservadas del lenguaje rodeadas de los símbolos < >. Las
etiquetas pueden ser de tres tipos:
•
•
•
Pareadas, cuando siempre aparece una etiqueta de inicio y otra de final.
La etiqueta de final es como la de inicio, salvo que utiliza los símbolos </ >.
De esta forma, se puede cambiar el formato de bloques completos.
Por ejemplo: <H1>Esto es un título</H1>
Sin parear, cuando la etiqueta representa la inserción de un elemento,
como una imagen, un salto de línea, etc. Por ejemplo:
<IMG SRC="foto.gif"><BR>
Con final opcional, son etiquetas pareadas en las cuales no es necesario
emplear la etiqueta de final. El final de un bloque viene marcado por el
inicio de otro. Ejemplos de este tipo son los párrafos o los elementos de
una lista. Por ejemplo: <P>Esto es un párrafo <P>Y esto otro.
Un elemento muy importante del lenguaje HTML son los atributos de cada
etiqueta, que representan opciones que modifican su comportamiento por
defecto. Los atributos se incluyen junto con la etiqueta correspondiente, dentro
de los símbolos < >. Las etiquetas de final nunca incluyen atributos.
HTML no distingue entre mayúsculas y minúsculas, por lo que las etiquetas
podrán escribirse con cualquier combinación de caracteres, buscando siempre
la mejor legibilidad del documento.
Corrección sintáctica de los documentos
Como cualquier lenguaje de programación, HTML tiene un conjunto estricto de
reglas, recogido en su DTD, que fijan la sintaxis correcta de un documento;
estas reglas se centran en tres aspectos principales: estructura general de un
documento, etiquetas y atributos disponibles, y posibles formas de anidar
etiquetas.
Existen herramientas que ayudan a garantizar que un documento HTML
cumple un determinado estándar. Por ejemplo, W3C Validator dispone de un
servicio de validación de documentos accesible a través de la Web
(http://validator.w3.org/).
Evolución del HTML
La rápida evolución del HTML, y las incorporaciones que ha recibido,
principalmente por parte de Netscape y Microsoft, ha roto con la filosofía
original con que se diseñó, que buscaba un lenguaje universal de descripción
de documentos. Cada vez es más común encontrarse con páginas cuya
visualización depende de las características concretas de un tipo de
navegador, que dificultan o hacen imposible el acceso para los usuarios que
no puedan (o quieran) utilizarlo. Detrás de estas versiones especiales de
HTML se suelen esconder las estrategias comerciales de empresas, que tratar
de obtener una mayor cuota de usuarios en el lucrativo negocio de las redes
de telecomunicaciones.
Como una defensa frente a estas prácticas existe un organismo llamado
World Wide Consortium (W3C) que se dedica a numerosas labores de
19
coordinación y estandarización de todo lo relacionado con las tecnologías
Web, para facilitar la integración entre productos de diferentes fabricantes, que
tiende a conseguir un futuro modelo único de HTML.
Sin embargo, se debe reconocer que las ideas propuestas por los fabricantes
de clientes Web han 'acelerado' la evolución de la Web e Internet,
presentando propuestas novedosas que, en general, mejoran los servicios que
recibe el usuario.
TENDENCIA ACTUAL
Actualmente, la mayor parte de los esfuerzos y de los recursos destinados a la
creación de nuevas herramientas de desarrollo web, están orientados a la
generación de páginas dinámicas, produciendo numerosos sistemas
encargados de actuar como pasarela con una base de datos, automatizar
diferentes tipos de búsquedas de información, o generar dinámicamente texto
o gráficos. Las últimas tendencias están orientadas a disponer de
herramientas más universales, extensibles y generales.
Para conseguir que un documento HTML incluya información dependiente del
entorno, podemos utilizar varios de estos sistemas:
•
•
•
•
Server-side Scripting, lenguajes de script que se incluyen dentro de un
documento del servidor y que éste filtra antes de enviárselo al cliente. Son
más universales, ya que no dependen de las características del entorno
que los recibe.
Client-side Scripting, lenguajes de script (Visual Basic o JavaScript) que se
incluyen dentro de un documento HTML. El cliente será el encargado de su
procesamiento.
Server-side executables, aplicaciones y servicios que se instalan en un
servidor, con los que es posible dialogar y obtener resultados. El acceso a
los mismos se suele realizar a través de CGI.
Client-side executables, aplicaciones que pueden ser transferidas a un
cliente para que éste las ejecute.
Además, debido a que, como hemos dicho, HTML ya no se utiliza como
lenguaje de marcación, se empieza a reemplazar por la nueva especificación
XHTML, un paso hacia delante muy significativo en la normalización del
lenguaje.
XHTML
XHTML (eXtensible HyperText Markup Language) es, en pocas palabras,
rescribir HTML (lenguaje para representar datos) en XML (lenguaje para
describir datos). La migración hacia esta especificación habilita las siguientes
mejoras:
•
•
20
Los documentos XHTML son conformes a XML. Como tales, son
fácilmente visualizados, editados y validados con herramientas XML
estándar.
Los documentos XHTML pueden escribirse para que funcionen igual o
mejor que lo hacían antes tanto en los agentes de usuarios conformes a
HTML como en los nuevos agentes conformes a XHTML.
ESTADO DEL ARTE
•
•
Los documentos XHTML pueden usar aplicaciones (por ejemplo, scripts y
applets) que se basen ya sea en el Modelo del Objeto Documento de
HTML o XML [DOM].
A medida que la familia XHTML evolucione, los documentos conformes a
XHTML estarán más preparados para interactuar dentro de y entre
distintos entornos XHTML.
La familia XHTML es el siguiente paso en la evolución de Internet. Al migrar en
este momento hacia XHTML, los desarrolladores de contenidos web entran en
el mundo de XML con todos los beneficios que se esperan de él a la vez que
se aseguran la compatibilidad con agentes de los usuarios pasados y futuros.
HTML DINÁMICO
El objetivo final del HTML Dinámico o DHTML es aumentar la interactividad de
las páginas web. Se considera un estándar de facto que permite controlar
mejor la disposición, el formato y la animación de las páginas web. La forma
de conseguirlo resulta de la combinación de HTML con varios elementos:
•
•
•
El DOM (Document Object Model) una especificación que permite describir
la estructura y composición de una página, sin hacer referencia a su
contenido.
Las Hojas de Estilo en Cascada (CSS) para controlar los atributos de
presentación de cada elemento de una página.
Lenguajes de script, como JavaScript, Jscript, VBScript o ECMAScript que
tienen la capacidad de modificar el DOM y con ello el contenido y
presentación de la página.
HOJAS DE ESTILO
Hasta este momento, hay una gran diferencia cualitativa entre los documentos
de hipertexto y los generados en sistemas profesionales de composición
gráfica. La causa es el escaso control que HTML ofrece en aspectos tan
importantes como el formato del texto o la integración entre imágenes y texto.
El conjunto de formatos de texto disponibles es limitado, y por ello es preciso
incluir numerosas etiquetas HTML para lograr el efecto deseado. Además, no
es posible reutilizar estos estilos en otras secciones del documento, salvo
replicando de nuevo todas las etiquetas. El diseñador debe recurrir a trucos,
empleando tablas y gráficos, para construir ciertas presentaciones, imposibles
con las capacidades de HTML.
En un rápido resumen, las Hojas de Estilo son plantillas que permiten cambiar
el formato de presentación de cualquier etiqueta de HTML. Por ejemplo, se
puede hacer que todos los títulos de nivel 1 se presenten en color rojo, o que
los párrafos estén alineados a la derecha por defecto. Además, y como
aspecto fundamental, permiten crear nuevas clases de texto, que agrupen
estilos de presentación comunes. Por ejemplo, se puede definir un párrafo
normal, otro de comentarios y otro resaltado, y cambiar la apariencia de un
párrafo sin más que aplicar el correspondiente estilo. Sus características más
importantes son:
•
Controlan todos los elementos de la presentación de un documento HTML:
márgenes de página, espaciado entre párrafos, tamaños y tipos de letra,
color y fondos, etc.
21
•
•
Permiten agrupar varios formatos en nuevas clases de texto, para evitar
tener que repetir las mismas etiquetas HTML en diferentes partes del
documento.
La presentación final de un servicio de información se puede alterar sin
más que alterar una hoja de estilo común que compartan todos los
documentos.
El estándar del W3C habla de Cascading Style Sheets (CSS) ya que son
unas guías de estilo que pueden proceder de diversas fuentes: el formato
general dado a un documento, las modificaciones puntuales que se apliquen a
un solo elemento o las preferencias de presentación del usuario final, que
puede alterar a su conveniencia la forma en que se muestra un documento
recibido. La especificación de las hojas de estilo define unas reglas de
precedencia para decidir en qué forma se aplica una de estas 'cascadas' de
estilos.
Figura 6
Hojas de estilo.
El mismo documento con
(a) y sin (b) aplicarle una
hoja de estilos (CSS).
(a)
(b)
La gran ventaja de las hojas de estilo es que separan las propiedades del
documento y el propio contenido. Este hecho permite cambiar rápidamente la
22
ESTADO DEL ARTE
apariencia y además, aplicarlo a todas las páginas sin necesidad de
modificarlas individualmente (véase Figura 6).
JAVASCRIPT
JavaScript es un lenguaje interpretado, inspirado en Java, y por ende
orientado a objetos, que se incluye en los documentos HTML para añadir
cierta interactividad a sus contenidos, evitando tener que realizar
programación en el servidor. Fue desarrollado por Netscape y Sun
Microsystems, y se puede usar en los clientes Web de Netscape (a partir de la
versión 2.0) y Microsoft (a partir de la versión 3.0); hay ligeras diferencias en
los intérpretes JavaScript de cada plataforma (véase Tabla 1), puesto que
Microsoft no adoptó el mismo sistema de objetos y definió su propio lenguaje
de script VBScript. Por lo que en caso de duda, se deberá consultar la
información de referencia del fabricante.
Las diferentes versiones de JavaScript han sido finalmente integradas en un
estándar denominado ECMAScript-262. Dicho estándar ha sido realizado por
la organización ECMA dedicada a la estandarización de información y
sistemas de comunicación. Las versiones actuales de los navegadores
soportan este estándar, así que basaremos el uso de JavaScript en este
estándar.
Navegador
Tabla 1
Version de JavaScript
Soporte ECMA
Javascript 1.0
--
No soporta JavaScript
--
Javascript 1.1
--
Javascript 1.0
--
Nestcape 4
Javascript 1.2 - 1.3
incompleta
ECMA-262-compliant hasta la
version 4.5
Internet
Explorer 4
Javascript 1.2
ECMA-262-compliant
Tabla de versiones.
Nestcape 2
Internet
El programa que va a interpretar
los programas JavaScript
es el
Explorer
2
propio navegador, lo que
significa
Nestcape 3
que si el nuestro no soporta
JavaScript, no podremos Internet
ejecutar
las funciones que programemos.
Explorer 3
Nestcape 6
Internet
Explorer 5
ECMA compliant
Javascript 1.4
ECMA compliant
Javascript 1.3
Full ECMAScript-262
Full ECMAScript-262
Sus características principales son:
•
•
Es un lenguaje de sintaxis similar a Java, en cuanto a tipos de datos y
estructuras de control; sin embargo, al no ser compilado, realiza un control
de tipos menos estricto. Por ejemplo, no es necesario declarar las
variables, y su tipo puede cambiar durante la ejecución del programa.
Todas las referencias entre objetos se resuelven en tiempo de ejecución;
Java lo realiza en tiempo de compilación.
JavaScript también es interpretado, pero a diferencia de Java, el código
JavaScript no se compila, sino que se inserta directamente en los
23
•
•
•
•
documentos HTML. Por ello, no es necesario disponer de ninguna
herramienta de compilación, sólo un browser que lo interprete.
Utiliza un gestor automático de memoria dinámica, que reserva espacio
para crear objetos y lo elimina cuando éstos ya no se utilizan.
Está basado en un conjunto predefinido de objetos, que pueden ser
extendidos. Sin embargo, no es posible crear nuevas clases, o establecer
relaciones de herencia.
Permite utilizar funciones, al estilo de los lenguajes de programación
orientados a eventos. En Java, las funciones sólo pueden existir como
métodos de acceso a un objeto. Esta es una de las características que han
muy útil este lenguaje, pues tiene la posibilidad de incluir respuestas
programadas a determinadas acciones realizadas por el usuario o por el
propio navegador.
JavaScript se ejecuta en el cliente no en el servidor, por eso es tan rápido
una vez ha sido cargada la pagina en el cliente.
JavaScript en los documentos HTML
JavaScript está diseñado para ser insertado entre las etiquetas de HTML. Es
capaz de realizar pequeños cálculos, responder a los eventos del usuario
(movimientos y pulsaciones del ratón, envío de formularios, etc.), manejar
frames, verificar la información introducida en un campo de formulario, realizar
operaciones con cookies o alterar la presentación de diversos elementos de
un cliente web, entre otras cosas.
Es muy fácil de aprender, y evita el desarrollo de complicadas aplicaciones
CGI o Java. Sin embargo, y a diferencia de Java, no es posible crear
aplicaciones JavaScript independientes, por lo que se puede considerar una
sofisticada extensión a HTML.
Los comandos JavaScript se pueden insertar en un documento HTML de tres
formas diferentes, dentro del propio documento HTML (las líneas se
interpretan a medida que se presenta el documento HTML), como un fichero
externo (el resultado es equivalente al anterior) o como respuesta a
operaciones realizadas por el usuario o cambios en contenido del documento
HTML.
Como hemos dicho, JavaScript es un lenguaje orientado a objetos, en el que
la mayoría de las operaciones se realizan utilizando las propiedades
(variables) o métodos (funciones) de estos objetos. Para facilitar la interacción
con el browser y los componentes de un documento HTML, el intérprete de
JavaScript pone a disposición del programador un conjunto predefinido de
objetos, de los que se debe conocer su jerarquía y propiedades.
A modo de ejemplo (véase Tabla 2), podemos representar la jerarquía de los
objetos del navegador, atendiendo a una relación contenedor-contenido que
se da entre estos objetos, de esta manera (al lado está la directiva HTML con
que se incluyen en el documento objetos de este tipo, cuando exista esta
directiva).
Según esta jerarquía, podemos entender el objeto area (por poner un ejemplo)
como un objeto dentro del objeto document que a su vez está dentro del
objeto window. Para denotar a un objeto que está dentro de un objeto, se usa
la notación ‘.’.
24
ESTADO DEL ARTE
Tabla 2
window
history
Jerarquía JavaScript para location
document
los objetos del
navegador.
<BODY>...</BODY>
<A NAME="...">...</A>
ancho
r
applet
area
form
button
checkbox
fileUpload
hidden
password
radio
reset
select
submit
text
textarea
image
link
plugin
frame
<APPLET>...</APPLET>
<MAP>...</MAP>
<FORM>...</FORM>
<INPUT TYPE="button">
<INPUT TYPE="checkbox">
<INPUT TYPE="file">
<INPUT TYPE="hidden">
<INPUT TYPE="password">
<INPUT TYPE="radio">
<INPUT TYPE="reset">
<SELECT>...</SELECT>
options <INPUT TYPE="option">
<INPUT TYPE="submit">
<INPUT TYPE="text">
<TEXTAREA>..</TEXTAREA>
<IMG SRC="...">
<A HREF="...">...</A>
<EMBED SRC="...">
<FRAME>
navigator
MACROMEDIA FLASH
Probablemente, uno de los avances más importantes en materia de diseño en
el web ha sido la aparición de la tecnología desarrollada por Macromedia
denominada Flash.
Flash es la tecnología más comúnmente utilizada en el Web que permite la
creación de animaciones vectoriales. El interés en el uso de gráficos
vectoriales es que éstos permiten llevar a cabo animaciones de poco peso, es
decir, que tardan poco tiempo en ser cargadas por el navegador.
Así, Flash se sirve de las posibilidades que ofrece el trabajar con gráficos
vectoriales, fácilmente redimensionables y alterables por medio de funciones,
así que de un almacenamiento inteligente de las imágenes y sonidos
empleados en sus animaciones por medio de bibliotecas, para optimizar el
tamaño de los archivos que contienen las animaciones.
Esta optimización del espacio que ocupan las animaciones, combinada con la
posibilidad de cargar la animación al mismo tiempo que ésta se muestra en el
navegador (técnica denominada streaming), permite aportar elementos
visuales que dan vida a una web sin que para ello el tiempo de carga de la
página se prolongue hasta límites insoportables por el visitante.
25
Además de este aspecto meramente estético, Flash introduce en su entorno
(véase Figura 7) la posibilidad de interaccionar con el usuario. Para ello, Flash
invoca un lenguaje de programación llamado ActionScript. Orientado a
objetos, este lenguaje tiene claras influencias del Javascript y permite, entre
otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas
partes de una animación en función de eventos producidos por el usuario,
saltar a otras páginas, etc.
De este modo, Macromedia pone a nuestra disposición una tecnología
pensada para aportar vistosidad a nuestra web al mismo tiempo que nos
permite interaccionar con nuestro visitante. Por supuesto, no se trata de la
única alternativa de diseño vectorial aplicada al Web pero, sin duda, se trata
de la más popular y más completa de ellas.
Figura 7
Entorno de trabajo de
Macromedia Flash 5.
26
ESTADO DEL ARTE
2
ESTADO DEL ARTE
SOFTWARE OPEN SOURCE
SOFTWARE LIBRE
•
•
Definición
Tecnologías Open Source:
•
•
•
•
•
•
•
•
Integración de PHP
Diferencias entre CGI y PHP
Como funciona
Características de PHP
Sintaxis básica
Librerías
Manejo de errores
Características especiales para la web
•
PHP con MySQL
APACHE
PHP
PEAR
MySQL
SOFTWARE LIBRE
Internet se desarrolla a partir de una arquitectura informática abierta y de libre
acceso desde el principio, y esto está en la base de la capacidad de
innovación tecnológica constante que se ha desarrollado en Internet. Los
protocolos TCP/IP se distribuyen gratuitamente y a cuya fuente de código
tiene acceso cualquier tipo de investigador o tecnólogo. UNIX es un código
abierto que permitió el desarrollo de USENET News, la red alternativa de
Internet, el World Wide Web es abierto. Apache, que es el programa de
software que hoy en día maneja más de dos terceras partes de los servidores
web del mundo, es también un programa de código abierto. Y tal es,
obviamente, el caso de Linux, aunque Linux es fundamentalmente para las
máquinas UNIX a través de las cuales funciona Internet.
Así pues, el éxito del software libre se debe en su mayor parte a Internet.
Internet ha permitido que las personas interesadas en los varios componentes
del software libre se pongan fácilmente en contacto con otras. Internet de esta
manera actúa como un catalizador que acelera el desarrollo y sintetiza el
conocimiento en áreas muy específicas. Hay diferentes motivaciones que
impulsan a los contribuidores y desarrolladores a trabajar en el software Open
Source, las más importantes son:
•
•
•
•
•
•
•
•
•
El deseo de crear nuevo software.
El deseo de crear software más robusto.
La posibilidad de estar en control del software. Esto es importante para
aplicaciones de misión crítica donde es imperante tener un control total
sobre posibles problemas en cualquier punto.
Crear aplicaciones de bajo costo.
Reutilización del conocimiento: Esto permite que la gente reutilice el
conocimiento que se ha sintetizado en el software. En vez de empezar
siempre desde cero (que es el caso de la industria de software actual)
siempre se puede empezar un proyecto desde un fundamento establecido.
Esto es equivalente a la manera en la que la ciencia se desarrolla: no se
parte de cero, se parte de los descubrimientos previos y se innova sobre el
conocimiento que ya se tiene.
La posibilidad de adaptar el software a sus necesidades
Aprender alguna técnica de programación.
Reconocimiento de colegas.
Lo mencionado arriba ha dado cabida a que se desarrollen sistemas de
cómputo que compiten en casi todos los niveles con los sistemas
propietarios, pero no contemplan sistemas de marketing y son
tradicionalmente esfuerzos que no son conocidos por el público en general.
Definición
El software libre (free software, en inglés) es a veces mal traducido como
“software gratuito”, lo cual desvirtúa su significado real. El mismo Richard
Stallman (uno de los creadores del movimiento de software libre) ha hecho
famosa una frase que describe claramente la diferencia: “when you say free,
think free speech, not free beer”, que significa: “cuando digas libre, piensa en
libertad de expresión, no en cerveza gratis”, jugando con la ambigüedad del
significado de la palabra free en el idioma inglés.
Capítulo 2: Software Open Source
29
Sin embargo, el nombre es ya de por sí un motivo de debate entre dos
‘facciones’ de un mismo movimiento: la FSF (Free Software Foundation), que
defiende el término FS (free software), y la OSI (Open Source Initiative), que
promueve el uso de la nomenclatura OSS (Open Source software). En
español, los términos equivalentes serían “software libre”, o bien software "de
código abierto" o "de código libre".
Un programa puede considerarse libre si su licencia nos garantiza las
siguientes libertades:
• Libertad de ejecutar el programa, con cualquier propósito.
• Libertad de estudiar cómo funciona el programa y de adaptarlo a nuestras
necesidades.
• Libertad de redistribuir copias del programa.
• Libertad de mejorar el programa y redistribuir dichas modificaciones.
Éstos últimos dos puntos deben tener una restricción: si redistribuye el
programa, modificado o no, debe hacerse bajo las mismas condiciones. Esta
cláusula es la que garantiza la libertad del programa, impidiendo que alguien
tome un desarrollo libre y lo transforme (o incluya) en un desarrollo propietario,
limitando alguna de las libertades citadas.
Claramente puede notarse que, al poder distribuir el programa libremente, su
precio tenderá a ser muy bajo y, en el mejor de los casos, será nulo.
La apertura del software y las libertades garantizadas por la licencia evitan la
posibilidad de que una gran empresa intente controlar ese mercado con un
software del que las empresas de un sector son dependientes, permitiendo a
las mismas, los usuarios de esos productos, una mayor influencia en el
sistema final y en sus características.
Los derechos mencionados anteriormente tienen una serie de efectos
colaterales sobre el software:
• Tiende a ser muy eficiente (por que mucha gente lo optimiza, mejora).
• Tiende a ser muy robusto (mucha gente “puede” arreglarlo, no solamente
el creador o la compañía que lo produce). Mucha gente tiende a contribuir,
por que es en el interés de todos mejorar esta base común.
• Tiende a ser muy diverso: la gente que contribuye tiene muchas
necesidades diferentes y esto hace que el software esté adaptado a una
cantidad más grande de problemas.
A pesar de ello, adolece de algunas desventajas, que se reducen mucho en el
caso de un uso académico y que pueden tornarse en potencialidades:
•
•
•
•
•
•
30
La curva de aprendizaje es mayor.
El software libre no tiene garantía proveniente del autor (los contratos de
software propietario tampoco se hacen responsables por daños
económicos, y de otros tipos por el uso de sus programas).
Se necesita dedicar recursos a la reparación de erratas (en el software
propietario es imposible reparar erratas).
No existiría una compañía única que respaldará toda la tecnología.
Las interfaces amigables con el usuario (GUI) y la multimedia apenas se
están estabilizando.
La mayoría de la configuración de hardware no es intuitiva, se requieren
conocimientos previos acerca del funcionamiento del sistema operativo y
ESTADO DEL ARTE
•
•
fundamentos del equipo a conectar para lograr un funcionamiento
adecuado.
En sistemas con acceso a Internet, se deben de monitorear
constantemente las correcciones de bugs de todos los programas que
contengan dichos sistemas, ya que son fuentes potenciales de intrusión.
La diversidad de distribuciones, métodos de empaquetamiento, licencias
de uso, herramientas con un mismo fin, etc., pueden crear confusión en
cierto número de personas. (Cabe notar que la posibilidad de crear
distribuciones completamente a la medida para atacar situaciones muy
específicas es una ventaja que muy pocas marcas de software propietario
pueden ofrecer y que Microsoft ha sido completamente incapaz de hacer.)
Tecnologías Open Source:
En los últimos años, el software libre parece haberse convertido en una
alternativa real al software propietario. Cada vez son más los administradores
de sistemas y desarrolladores que conocen las ventajas y desventajas de los
sistemas de software libre. Son muchos los que conocen la flexibilidad y
potencia que ofrecen los Sistemas GNU/Linux en campos tan variados como
los servidores de red (Apache Web Server), bases de datos (PostgreSQL y
MySQL), sistemas empotrados (uLinux), clustering y supercomputación
(Beowulf, Mosix), cálculo simbólico y numérico (Maxima, Scilab, Octave) o
como un simple sistema de escritorio alternativo a Microsoft Windows (KDE,
Gnome). Uno de los múltiples campos de la Informática en los que el software
libre ha asentado sus bases de manera profunda es en el desarrollo web,
especialmente el caso de la solución para servicios Web llamada LAMP. Sin
que haya sido nunca esta su finalidad, el continuo proceso de desarrollo y
adecuaciones por parte de sus respectivos grupos de desarrolladores ha
logrado que operen de forma bastante poderosa y efectiva en conjunto.
LAMP es el acrónimo de Linux, Apache, MySQL y PHP, consideradas como
unas de las mejores herramientas que el software libre puede proporcionar y
que permiten a cualquier organización o individuo tener un servidor Web
versátil y poderoso, independientemente del hecho que no es necesario pagar
licencias por su utilización, su mantenimiento se reduce a actualizar paquetes
que se pueden descargar por Internet y su nivel de seguridad es muy bueno,
al liberarse parches de seguridad al muy poco tiempo que se declara una
alerta.
Una característica muy interesante es el hecho que estos cuatro productos
pueden funcionar en una amplia gama de hardware, con requerimientos
relativamente pequeños pero que no por eso dejan de ser menos estables que
en equipos de grandes capacidades.
APACHE
Apache surgió a partir del servidor de HTTP más famoso y difundido en su
época: NCSA. Desde entonces se convirtió en un poderoso rival de todos los
servidores Unix utilizados hasta la fecha por su eficiencia, funcionalidad y
rapidez. Es por ello que se conoce como el rey de los servidores Web. Se
desarrolla de forma estable y segura gracias a la cooperación y los esfuerzos
de un grupo de personas conocidas como grupo Apache (Apache Group), los
cuales se comunican a través de Internet y del Web. Juntos se dedican a
31
perfeccionar el servidor y su documentación regidos por la ASF (Apache
Software Foundation).
En la actualidad Apache es el servidor Web más utilizado en el mundo de
acuerdo con las estadísticas de Netcraft (www.netcraft.com/Survey/) que lo
colocan en más de 7 millones de servidores que sirven poco más de 18
millones de sitios Web, lo cual significa más del 60% en todo el mundo. Entre
las características principales del Apache se encuentran:
•
•
•
•
•
•
•
•
Es un servidor Web potente, flexible y ajustado al HTTP/1.1
Es altamente configurable y extensible.
Puede ser ajustado a través de la definición de módulos empleando su
propio API (Aplication Programming Interface).
Provee todo su código fuente de forma libre y se distribuye bajo una
licencia no restrictiva.
Se ejecuta en diversas plataformas operativas tales como: Windows 9x/NT,
Macintosh, Novell NetWare, OS/2, Linux y la mayoría de los Unix
existentes: IRIX, Solaris, HPUX, SCO, FreeBSD, NetBSD, AIX, Digital
Unix, etc.
Se desarrolla de forma acelerada estimulando la retroalimentación desde
sus usuarios a través de nuevas ideas, reportes de errores y parches.
Apache significa ``A PAtCHy sErver'', o sea se basa en un código y un
conjunto de ficheros ``parches''. Otros desarrolladores relacionan su
nombre con el de las tribus nativas americanas de Apaches.
Implementa muchas posibilidades frecuentemente demandadas, tales
como:
Bases de datos DBM para autenticación. Permiten establecer fácilmente
la protección de documentos a través de passwords para una gran
cantidad de usuarios sin dañar el funcionamiento del servidor.
Respuestas adaptables a los errores o problemas. Se pueden definir
ficheros o scripts de tipo CGI11.3 que respondan ante la ocurrencia de
errores internos o en las solicitudes realizadas.
Directiva para definir múltiples índices. Se utiliza cuando se solicitan
directorios por parte de los clientes a partir de lo cual se puede buscar
en estos y devolver un documento índice cuyo nombre puede ser por
ejemplo: ‘index.html’, ‘index.cgi’ o ‘default.html’. Ilimitadas y flexibles
posibilidades de redireccionamiento y definición de alias para los URLs.
Apache no tiene un límite establecido para definir alias y
redireccionamientos que pueden ser declarados en sus ficheros de
configuración.
Negociación del contenido de las respuestas. Apache es capaz de
ofrecer la mejor representación de la información accedida de acuerdo
con las capacidades del cliente solicitante.
Soporte de hosts virtuales. Es la habilidad del servidor de distinguir
entre los pedidos hechos a diferentes direcciones IP o nombres de
dominio definidos en la misma máquina.
Configuración flexible de las trazas generadas. Es posible adaptar el
formato de las trazas obtenidas así como redireccionarlas a través de
tuberías (Unix) en aras de filtrarlas. De esta forma se puede lograr por
ejemplo dividir dinámicamente las trazas de los hosts virtuales en
distintos ficheros.
La configuración se realiza editando el archivo ‘httpd.conf’ y cambiando
algunos parámetros.
32
ESTADO DEL ARTE
PHP
PHP (acrónimo de PHP: Hypertext Preprocessor) es un lenguaje interpretado
de alto nivel embebido en páginas HTML y ejecutado en el servidor.
PHP es un lenguaje con una sintaxis cómoda y similar a la de lenguajes como
C o C++, es rápido a pesar de ser interpretado, multiplataforma y dispone de
una gran cantidad de librerías que facilitan muchísimo el desarrollo de las
aplicaciones. El código generado es mantenible, se lee muy bien y podemos
programar utilizando objetos.
Según Netcraft, el organismo que realiza las estadísticas de uso de software
en Internet, PHP es empleado por más de la mitad de los sitios web en todo el
mundo (uno de los nodos más complejos y con más trafico de la Red como es
el celebre portal de Yahoo! emplea desde hace poco PHP). Este lenguaje está
alcanzando unos niveles de uso que convierten su conocimiento en algo
indispensable para los profesionales del desarrollo en Internet.
Integración de PHP
Hoy por hoy, PHP es competencia directa, dentro del campo de las páginas
generadas dinámicamente, de las Active Server Pages (ASP) que Microsoft
implementa en su servidor web Internet Information Server, o las JSP del
Netscape Enterprise Server de Netscape. Otro producto comercial equivalente
puede ser Cold Fusion de Macromedia.
PHP ha sido desarrollado principalmente para usar conjuntamente con el
servidor web libre Apache en cualquiera de las plataformas que éste soporta.
De hecho, está implementado como un módulo de forma que aprovecha la
máxima integración con el servidor y velocidad posible.
Sin embargo, también puede ser compilado como un ejecutable más, para
cualquiera de las plataformas en las que está soportado (Unix, Windows, ...) y
usarse como un CGI. De esta forma puede ser empleado con cualquier
servidor web que soporte ejecución de CGIs en dichas plataformas. Nos
podríamos encontrar con la curiosa situación de usar por ejemplo PHP en un
Microsoft IIS si lo configuramos adecuadamente.
Diferencias entre CGI y PHP
Los script CGI escritos en Perl y los script PHP se utilizan sobre todo para la
realización de páginas dinámicas, dejando de lado por un momento el
lenguaje ASP que, recordamos, es propietario y puede utilizarse (casi) sólo en
webserver NT con IIS.
El PHP, lentamente e inexorablemente, está superando por complejidad a los
CGI y esto se puede justificar por varias cuestiones:
• PHP es un lenguaje embeeded (empotrado) en el código HTML de las
páginas y no necesita, por lo tanto, otros archivos para que se ponga en
marcha.
• Un script PHP, de hecho, no necesita ser instalado como ocurre con un
script CGI.
33
•
•
Con PHP ya no se necesitan configuraciones especiales del servidor de la
red para que se habiliten directorios ‘cgi-bin’ o la realización de unos
archivos que tengan determinadas extensiones. Primero se dan
instrucciones al servidor de la red, luego cada script (o mejor, cada página
que tenga el código del script) se puede poner en marcha en cada
directorio donde esté.
Las posibilidades del PHP son prácticamente iguales a las de los CGI en
Perl, pero no a las del mismo Perl.
Como funciona
Las paginas PHP son interpretadas por parte del servidor y como resultado se
devuelve al cliente código HTML que es lo único que sabe interpretar el
navegador, es decir las paginas PHP dependen del servidor y no del
navegador dado que este sólo recibe código HTML (véase Figura 8).
Figura 8
Esquema de producción
de código HTML
mediante PHP.
Los navegadores no tienen ningún problema con PHP, ya que nunca llegan a
verlo: el código PHP se interpreta para generar la página HTML solicitada
antes de ser transmitida al navegador. Eso sí, el navegador debe ser capaz de
reconocer las extensiones .php, .php3 y antiguamente .phtml, como
documentos de tipo text/html, o tratará de bajar las páginas como si fueran
ficheros en vez de visualizarlas.
Afortunadamente, PHP está lo suficientemente extendido para que no
tengamos que preocuparnos de ese problema, puesto que los principales
navegadores ya reconocen tales extensiones.
Características de PHP
PHP puede hacer cualquier cosa que se pueda hacer con un script CGI, como
procesar la información de formularios, generar páginas con contenidos
dinámicos, o mandar y recibir cookies. Quizás la característica más potente y
destacable de PHP es su soporte para un gran número de gestores de bases
de datos a los que puede acceder (PosgreSQL, Oracle, ODBC, MySQL,
dBase, Microsoft SQL Server...). Pero además, PHP ofrece soporte para:
•
•
•
•
•
34
Acceso a servidores IMAP
Envío de correo con SMTP
Acceso a servidores de FTP
Acceso a SNMP para gestión de redes y equipos
Generación dinámica de gráficos y documentos PDF
ESTADO DEL ARTE
•
•
•
Análisis de documentos XML
Corrector de ortografía
Generación de datos en WDDX (Intercambio Web de Datos Distribuidos)
La principal novedad de PHP4 es en el interprete del lenguaje PHP. Gracias al
Zend Engine, un potente motor (parser) de scripts desarrollado por Andi
Gutmans y Zeev Suraski, se han logrado aumentos de entre 5 y 10 veces en
la velocidad de ejecución de páginas PHP. Este nuevo rendimiento le ha
puesto por delante de ASP, la tecnología de Microsoft, por lo que le va a
permitir competir directamente con ASP en la plataforma de Microsoft. La
plataforma de desarrollo Apache + PHP en entornos Microsoft está logrando
ya rendimientos superiores a IIS + ASP, por lo que el aumento de su uso en
estas plataformas parece muy probable. Esto significará que en el futuro el
desarrollador en plataformas NT, por ejemplo, no se verá obligado al uso de
IIS + ASP para el desarrollo de sistemas web, tal y como había sucedido hasta
ahora. Por otro lado, PHP estaba hasta el momento pensado básicamente
para Apache. Era el único que tenía soporte para tener a PHP como un
módulo del servidor. Todos los demás servidores de web sólo podían utilizar a
PHP como cgi. En PHP4 se han añadido al soporte de la API de Apache, el de
Netscape (NSAPI), el soporte para ISAPI ( API de Internet Explorer) y para la
API del servidor de AOL. De esta forma todos estos servidores podrán lograr
rendimientos similares a Apache en su ejecución de PHP.
Además del aumento en rendimiento en lo referente al soporte de objetos en
PHP, la sobrecarga de objetos se ha mejorado. De esta forma se ha añadido
la posibilidad de métodos polimórficos, métodos que según desde que
referencia a un objeto se llamen se comportan de una forma o de otra. Esta
característica es muy importante para incluir soporte para acceder a las
arquitecturas CORBA y COM.
Sintaxis básica
El código PHP no se mezcla con las etiquetas HTML, ya que está acotado
siempre por los símbolos <? y ?>, de forma que para los programas
compositores de páginas web son etiquetas que no soporta y las deja tal y
como están. De esta forma, puede trabajarse a la vez en el diseño visual de la
página y en la funcionalidad (programación) de la misma cómodamente.
Hay cuatro formas de salir de HTML y entrar en el ‘modo de código PHP’:
1. <? echo (“Esta es la más simple, una instrucción de
procesado SGML\n”); ?>
Formas de salir de HTML.
2. <?php echo (“Esta es para servir documentos XML\n”); ?>
Ejemplo 1
3. <script language=”php”>
echo (“Editores como FrontPage no permiten instrucciones de
procesado”);
</script>
4. <% echo (“Etiquetas tipo ASP”); %>
Cualquiera de estas formas es válida, sin embargo, la más común entre los
desarrolladores es la segunda, encerrar el código PHP entre los caracteres
<?php y ?>.
35
Vamos a ver un ejemplo sencillo:
Ejemplo 2
<HTML>
<BODY>
<?php
echo “Esto es PHP”<BR>”;
Sintaxis en PHP.
// Primera parte
for ($i=0; $i<10; $i++) { // Segunda parte
echo “Linea”.$i.”<BR>”;
}
?>
</BODY>
</HTML>
El código PHP ejecutado tiene dos partes: la primera imprime ‘Esto es PHP’ y
la segunda es un bucle que se ejecuta 10 veces de 0 a 9, por cada vez que se
ejecuta se escribe una línea, la variable $i contiene el número de línea que se
está escribiendo.
Las instrucciones se separan igual que en C o Perl, terminando cada
sentencia con un punto y coma.
PHP soporta comentarios tipo ’C’, ’C++’ y shell de Unix. Por ejemplo:
Ejemplo 3
<?php
echo “Esto es una prueba”; // Comentario tipo CC++ para una
Comentarios en PHP.
línea
/* Esto es un comentario multilínea
otra línea más de comentario */
echo “Una prueba final”; # Este es un comentario tipo shell
?>
Librerías
El uso de librerías en PHP permite agrupar funciones y código que puede ser
reutilizado, por ejemplo, si se repite a lo largo de diferentes páginas. Para ello
se utilizan las directivas include() o require().
Manejo de errores
Hay 4 tipos de errores y avisos en PHP:
1 - Errores normales de funciones (Normal Function Errors)
2 - Avisos normales (Normal Warnings)
4 - Errores del analizador de código (Parser Errors)
8 - Avisos (Notices, advertencia que puede ignorarse, pero que puede implicar
un error en el código).
36
ESTADO DEL ARTE
Los 4 números de arriba se suman para definir un nivel de aviso de error. El
nivel de aviso de error por defecto es el nivel 7, que es la suma de 1+2+4, es
decir todo excepto los avisos. Todas las expresiones PHP pueden también
llamarse con el prefijo ‘@’, que desactiva el aviso de errores para esa
expresión en particular. Si ocurre un error en una expresión en tal situación y
la característica track_errors está habilitada, podremos encontrar el mensaje
de error en la variable global $php_errormsg.
Características especiales para la web
Formularios
El lenguaje PHP nos proporciona una manera sencilla de manejar formularios,
permitiéndonos de esta manera procesar la información que el usuario ha
introducido. Al diseñar un formulario debemos indicar la página PHP que
procesará el formulario, así como el método por el que se le pasará la
información a la página. Al pulsar el botón Enviar el contenido de cuadro de
texto es enviado a la página que indicamos en el atributo ACTION de la
etiqueta FORM.
PHP crea una variable por cada elemento del FORM, esta variable creada
tiene el mismo nombre que el cuadro de texto de la página anterior y el valor
que hayamos introducido.
Envío de e-mails
PHP nos ofrece la posibilidad de enviar e-mails de una manera sencilla y fácil,
para ello el lenguaje nos proporciona la instrucción mail( ).
Ejemplo 4
Especificación de la
función mail().
<?php
mail (destinatario, tema, texto del mensaje):
?>
En el parámetro destinatario pondremos la dirección de e-mail a donde se
enviará el mensaje, en el parámetro tema el tema o subject del mensaje y el
parámetro texto del mensaje el cuerpo del mensaje en formato texto plano.
Cookies
PHP soporta transparentemente cookies HTTP. La filosofía con la que
nacieron las cookies es la de hacer una navegación más personalizada,
liberando al usuario de introducir datos constantemente. Las cookies son un
mecanismo que sirve para almacenar datos en el navegador del usuario
remoto, para así poder identificar al usuario cuando vuelva (véase Figura 9).
Se utilizan de varias maneras, pero los usos más extendidos hacen referencia
a personalización de páginas, de idiomas, en tiendas electrónicas y para
carritos de la compra. Aunque también se usan para fines menos éticos, como
son el seguimiento de visitas, marketing personalizado, mostrar banners
publicitarios y almacenar información sensible del usuario.
Se pueden poner cookies usando la función setcookie(). Las cookies son
parte de la cabecera HTTP, por tanto la función setcookie() debe ser
llamada antes de que se produzca cualquier salida al navegador.
37
Cualquier cookie enviada desde el cliente, automáticamente se convertirá en
una variable PHP igual como ocurre con los métodos de datos GET y POST.
Figura 9
Funcionamiento de las
cookies.
(a)
La cookie se envía al
navegador desde el servidor y
si este la acepta permanece en
él (a). Entonces, las páginas
piden la cookie al navegador
(b) y éste las envía (c),
permitiendo la identificación del
usuario.por parte del servidor.
(b)
(c)
Sesiones
El uso de sesiones es un método ampliamente extendido en cualquier
aplicación de cierta entidad. Básicamente una sesión es la secuencia de
páginas que un usuario visita en un sitio web. Desde que entra en nuestro
sitio, hasta que lo abandona.
El término sesión en PHP, session en inglés, se aplica a esta secuencia de
navegación, para ello crearemos un identificador único que asignamos a cada
una de estas sesiones de navegación. A este identificador de sesión se le
denomina, comúnmente, como la sesión.
El proceso en cualquier lenguaje de programación podría ser algo así:
•
•
•
•
¿Existe una sesión?
Si existe la retomamos.
Si no existe creamos una nueva.
Generar un identificador único.
Y para que no perdamos el hilo de la navegación del usuario deberemos
asociar esta sesión a todas las URLs y acciones de formulario. Podemos
también crear una cookie que incluya el identificador de sesión, pero es
conveniente recordar que la disponibilidad o no de las cookies depende del
usuario, y no es conveniente fiarse de lo que un usuario pueda o no tener
habilitado.
Lo contado hasta ahora es aplicable a cualquier lenguaje de programación C,
Perl, etc. En PHP4 toda la gestión de sesiones la hace el mismo PHP.
Para utilizar sesiones en PHP lo primero es inicializarlas. Podemos hacerlo
explícitamente, mediante la función session_start(), o al registrar una
38
ESTADO DEL ARTE
variable en una sesión mediante session_register('miVariable'). En
ambos casos se crea una nueva sesión, si no existe, o se retoma la sesión
actual. Veamos un sencillo ejemplo:
Ejemplo 5
Session_start().
Ejemplo 6
Cabecera de
autentificación.
<?php
session_start();
echo 'La sesión
?>
actual
es:
'.session_id();
En este caso session_start() comprueba en los cookies que existe una
sesión y continua con ella, session_id() devuelve el identificador actual.
Creación de imágenes y documentos dinámicamente
PHP no está limitado a crear solo salidas de HTML. Puede usarse también
para crear ficheros de imágenes GIF, o incluso secuencias de imágenes GIF.
También para crear documentos PDF, aunque la librería que permite hacerlo
no es software libre, y para la creación de formatos de películas ‘Flash’, en
este caso una librería Open Source aunque en fase experimental.
Restringir el acceso
Podemos restringir el acceso a según qué páginas, para que solo las personas
autorizadas puedan acceder a ciertas partes del nuestro sitio web.
Para conseguir la autentificación en las páginas usaremos el sistema de
autentificación del protocolo HTTP, este sistema se basa en las variables
globales $PHP_AUTH_USER y $PHP_AUTH_PW.
$PHP_AUTH_USER. Nombre de usuario introducido.
$PHP_AUTH_PW. Contraseña introducida.
Para que el navegador nos muestre la ventana de petición de nombre de
usuario y contraseña basta con enviar la siguiente cabecera:
<?php
if (!isset($PHP_AUTH_USER)) {
header('WWW-Authenticate: Basic realm="Acceso
restringido"');
header('HTTP/1.0 401 Unauthorized');
echo 'Authorization Required.';
exit;
}
else {
echo "Ha introducido el nombre de usuario:
$PHP_AUTH_USER<br>";
echo "Ha introducido la contraseña:
$PHP_AUTH_PW<br>";
}
?>
Esto provoca que se muestre la ventana de nombre de usuario y contraseña y
los datos introducidos se asignen a las variables $PHP_AUTH_USER y
$PHP_AUTH_PW.
39
A partir de aquí realizaremos las comprobaciones necesarias para
asegurarnos que los datos introducidos son los correctos.
Ejemplo 7
<?php
Autentificación
de usuario.
if (($PHP_AUTH_USER!="Jose") || ($PHP_AUTH_PW!="123"))
{
header('WWW-Authenticate: Basic realm="Acceso
restringido"');
header('HTTP/1.0 401 Unauthorized');
echo 'Authorization Required.';
exit;
}
?>
En el siguiente ejemplo
pediremos autorización y
comprobaremos si el nombre
de usuario es Jose y la
contraseña 123, si es así
tendremos acceso al resto de
la página.
PEAR
PEAR (acrónimo de PHP Extensión and Application Repository) es el
repositorio oficial de clases y extensiones de PHP, es decir, PEAR reúne
clases escritas en PHP o en C que sirven, o mejor dicho, que son extensiones
para usar en nuestras aplicaciones PHP, una auténtica librería de código.
PEAR provee un conjunto estándar de clases para el tratamiento de errores y
destructores. Estos pueden extenderse de modo que todas las clases hijas los
puedan usar. Como las clases en PHP no soportan los destructores, podemos
usar las derivadas de PEAR para suplir esta funcionalidad. Además PEAR
sustituye a estándares y normas que se deben seguir al crear aplicaciones
Web o aplicaciones PHP para su posterior distribución.
PEAR provee las siguientes características:
•
•
•
•
•
Un librería definida de funciones de código abierto con la que el usuario
puede escribir código.
Un conjunto de herramientas para distribución de código y para que los
desarrolladores puedan compartir su código unos con otros.
Un conjunto detallado de estándares que los desarrolladores pueden
seguir al escribir su código.
La PHP Foundation Classes (PFC), un conjunto de paquetes PEAR que se
caracterizan por su calidad, interoperabilidad y compatibilidad.
La PHP Extension Code Library (PECL), un sub-repositorio para
extensiones en C.
Para la implementación de nuestro sitio web, codificaremos siguiendo los
estándares en PEAR.
MySQL
La incipiente demanda de las bases de datos para la Web se debe
fundamentalmente al incremento de la popularidad de la tecnología clienteservidor dentro de las aplicaciones web.
40
ESTADO DEL ARTE
MySQL Database Server es la base de datos de código fuente abierto más
usada del mundo. Su ingeniosa arquitectura lo hace extremadamente rápido y
fácil de personalizar. La extensiva reutilización del código dentro del software y
una aproximación minimalística para producir características funcionalmente
ricas, ha dado lugar a un sistema de administración de la base de datos
incomparable en velocidad, compactación, estabilidad y facilidad de
despliegue.
Su conectividad, velocidad y seguridad hacen a MySQL altamente satisfactorio
para accesar bases de datos en Internet.
PHP con MySQL
PHP tiene definida una serie de funciones para acceder a servidores de bases
de datos MySQL y realizar todas las operaciones de definición de datos,
consultas y manipulación mediante sentencias SQL (Structured Query
Language o Lenguaje Estructurado de Consultas).
Una vez que tenemos creada la base de datos en nuestro servidor, el
siguiente paso es conectarnos a la misma desde una página PHP. Para ello
PHP nos proporciona una serie de instrucciones para acceder a bases de
datos MySQL.
<?php
function Conectarse()
{ de
Conexión a una base
if
datos MySQL desde
PHP.
(!($link=mysql_connect("localhost","usuario","Password")))
{
echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db("base_datos",$link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}
Ejemplo 8
$link=Conectarse();
echo "Conexión con la base de datos conseguida.<br>";
mysql_close($link); //cierra la conexion
?>
Al ejecutar la instrucción mysql_connect() creamos un vínculo entre la
base de datos y la pagina PHP, este vínculo será usado posteriormente en las
consultas que hagamos a la base de datos.
Finalmente, una vez que hemos terminado de usar el vínculo con la base de
datos, lo liberaremos con la instrucción mysql_close() para que la conexión
no quede ocupada.
41
42
ESTADO DEL ARTE
3
MODELO DE PROCESO
MPIU PARA LA WEB
INGENIERÍA DEL SOFTWARE
•
Ciclos de vida en el desarrollo software
•
•
¿Qué es la usabilidad?
¿Por qué es importante la usabilidad?
•
•
El proceso de software
El Lenguaje de Modelamiento Unificado, UML.
•
•
•
•
•
•
•
Organización Conceptual.
Análisis de requisitos
Diseño Conpetual
Prototipado
Evaluación
Implementación
Lanzamiento
DISEÑO CENTRADO EN EL USUARIO
INGENIERIA DE LA USABILIDAD
USABILIDAD EN LA WEB
BUSCANDO UN MODELO DE PROCESO
MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD
APLICACIÓN DEL MODELO DE PROCESO A LA WEB
ESQUEMA DEL MODELO
INGENIERÍA DEL SOFTWARE
La ingeniería del software es una disciplina que trata de todos los aspectos de
la producción de software. Los principios de ingeniería suelen estar basados
en leyes de la física, la biología o las matemáticas, pero en el caso de la
ingeniería del software estos principios están basados en la experiencia vivida
por muchas personas a lo largo de los años.
La situación de la ingeniería del software en los años 80 sólo permitía una
arquitectura física y lógica restringida a lo que ofrecían los grandes fabricantes
de software y hardware (sobre todo IBM, que suministraba ambos
componentes consiguiendo así una dependencia total del cliente). Estos
sistemas eran sometidos a un mantenimiento estresante y, normalmente,
indocumentado, que desembocaba en una degradación de la aplicación y, por
ende, en un servicio deficiente para el usuario.
Situaciones como ésta y el modelo de desarrollo adoptado hasta entonces, el
llamado code-and-fix, cuya traducción correcta al español sería ‘codifica y
corrige’, donde se codifica y luego se piensa en los requisitos, diseño,
pruebas, mantenimiento [BOE88], dieron origen a un reconocimiento de la
crisis del software, que desembocó en el nacimiento de la ingeniería del
software como disciplina.
Desde entonces, el desarrollo de software iría unido a un ciclo de vida
compuesto por una serie de etapas que comprenderían todas las actividades,
desde el momento en que surge la idea de crear un nuevo producto software,
hasta aquel en que el producto deja definitivamente de ser utilizado por el
último de sus usuarios.
Los ingenieros de software deben entonces adoptar un enfoque sistemático y
organizado de su trabajo y usar herramientas y técnicas apropiadas
dependiendo del problema que van a solucionar, las restricciones de
desarrollo y los recursos disponibles.
Ciclos de vida en el desarrollo software
Uno de los modelos estructurados más básicos, y que sirve como bloque de
construcción para los demás modelos de ciclo de vida, fue el modelo en
cascada (véase Figura 10). Pero en la actualidad, el modelo en cascada está
comenzando a ser sustituido por los modelos iterativos e incrementales
asociados con la tecnología más reciente orientada a objetos.
Los métodos actuales de la ingeniería de software, estimulan el uso de
esquemas de desarrollo más flexibles de tipo espiral, que permiten ir hacia
atrás y hacía adelante, rompiendo un poco las barreras entre cada etapa. Se
estimula mucho el desarrollo incremental (véase Figura 11) en el ciclo de vida:
no lo hagas todo de una vez. Estos esquemas también promueven el
prototipaje. Es necesario darle al cliente una idea de cómo va a funcionar su
sistema, implementando en prototipos aquellos requerimientos de mayor
riesgo y poder brindar al ciclo de desarrollo, flexibilidad para la modificación de
los requerimientos iniciales.
Capítulo 3: MPIU para la Web
45
Figura 10
Modelo en cascada.
El inconveniente del modelo
en cascada es la dificultad
de permitir cambios
después de que el proceso
haya empezado.
Figura 11
El modelo incremental.
El modelo incremental se
centra en la entrega de un
producto funcional con cada
uno de los incrementos. Los
incrementos iniciales no son
programas completos, pero
proporcionan al usuario la base
para evaluar el producto.
Estos cambios de paradigmas en los modelos y procesos de desarrollo de
software imponen también un cambio de paradigma en la interacción usuariosistema en sus diferentes niveles, que provoca el origen de una metodología
que apunta a asegurar una interacción usuario-sistema más natural (cómoda)
y eficiente (productiva), así como facilitar la comprensión del sistema por parte
de nuevos usuarios y eliminar inconsistencias en la interacción.
Del estudio de las metodologías de la Interacción Persona-Ordenador (IPO),
surge uno de los paradigmas que más ha beneficiado al desarrollo del
software, el denominado Diseño Centrado en el Usuario.
DISEÑO CENTRADO EN EL USUARIO
Hay una larga tradición de ergonomía e ingeniería de factores humanos. Butler
nos recuerda que estudios sobre “performancia” humana y técnicas de diseño
para el control de máquinas se convirtieron ya en campo de una intensa
actividad de investigación aplicada durante la Segunda Guerra Mundial,
cuando la complejidad de los equipos empezó a sobrepasar los límites
humanos para una operación segura. Por este camino, la aeronáutica llegó en
los años sesenta a considerar a los seres humanos como un componente del
46
MODELO DE PROCESO
sistema técnico total, hasta culminar su evolución en el concepto de “diseño
centrado en el piloto”.
Por su parte, el interés por la interacción de humanos con sistemas de
información arranca en los años cincuenta y sesenta, pero su punto de partida
industrial nace con el ordenador personal, a finales de los setenta y primeros
de los ochenta. La máquina Star, de Xerox, y más tarde la estación Lisa, de
Apple, materializan, aunque con poco éxito comercial, la metáfora del
escritorio, en forma de las primeras interfaces más o menos intuitivas
pensadas para usuarios no informáticos. La informática personal revoluciona
el mundo de la informática y pone silenciosamente en marcha un movimiento
de cambio de métodos y sistemas centrados en la tecnología, hacia métodos y
sistemas centrados en el usuario.
La actual sofisticación alcanzada en las soluciones informáticas demanda un
mejor software. Los usuarios, acostumbrados, gracias a Internet, a obtener,
probar y comparar diversos sistemas y herramientas de software, se han
convertido en clientes más exigentes y críticos: esperan un alto grado de
elaboración en las Interfaces Gráficas de Usuario (GUI), así como aquél en el
código y en el funcionamiento del sistema en sí.
Esta reflexión histórica nos ayuda a hacer una reducción simplista de las
diversas formas de entender el problema y plantear una solución; cada una de
ellas han marcado el tiempo y la época en la que evolucionaron.
La primera, denominada, Centrado en la Máquina, culpaba al usuario de los
errores y dificultades encontradas en la interacción con el software. Esto
quiere decir, la máquina estaba bien, la culpa era del usuario.
Después, los usuarios empezaron a quejarse; los desarrolladores escucharon.
Entonces culparon a los diseñadores. Aunque no resolvía el problema
totalmente, se sentaron las bases para el Diseño Centrado en el Usuario
(UCD).
La solución no sólo requería de buenas intenciones. Se requería, además,
iterar la solución una y otra vez. Se necesitaba interrelacionar, de alguna
manera, al diseño, y el proceso del diseño, con los usuarios. Así surgió la
metodología de UCD [NOR86].
En el modelo básico del Diseño Centrado en el Usuario de una aplicación de
software se concibe al usuario como al ente que no sólo opera el sistema sino
que integra sus metas de trabajo con las funciones implementadas en la
aplicación. Para ello, debe emplear y combinar sus propias funciones
cognitivas, manejando diversas capas operativas. La más elevada consiste en
encajar su modelo conceptual del trabajo con su percepción de las funciones
de la aplicación informática. En una capa intermedia tiene el usuario que
construir los comandos correctos para controlar en cada caso las funciones
necesarias de la aplicación. Por último, la capa inferior comprende las
acciones específicas sobre los dispositivos de entrada al sistema. Se cierra el
circuito cuando el usuario interpreta el lenguaje de presentación de la
aplicación -normalmente en forma icónica sobre la pantalla-, representativa del
estado en el que se encuentra el procesamiento de la aplicación.
Con UCD, se puede mejorar la utilidad (relevancia) y usabilidad (facilidad de
uso) de cualquier aplicación de software [TRU98].
47
Del aprovechamiento de estas medidas de calidad, del UCD como
metodología predominante en la Ingeniería del software y de los
conocimientos de la disciplina de la IPO, la Ingeniería de la Usabilidad
proporcionará un proceso para el diseño y desarrollo de sistemas interactivos
centrados en el usuario.
INGENIERIA DE LA USABILIDAD
La complejidad de los ordenadores y de sus aplicaciones han ahondado la
necesidad de desarrollar su usabilidad (extendida a todo el campo de la
interacción hombre-máquina) y la complejidad de hacerlo, que desborda de
lejos lo que se entiende por técnicas informáticas. La Ingeniería de la
Usabilidad es multidisciplinar; se nutre de la informática, de la psicología, de la
lingüística, de la sociología, de la antropología y del diseño industrial.
Este término viene utilizándose desde mediados de los ochenta, para designar
a una nueva disciplina (UE, en siglas inglesas), que se ocupa de proporcionar
“métodos sistemáticos y herramientas para la compleja tarea de diseñar
interfaces de usuario fácilmente comprensibles, rápidamente aprendibles y
fiablemente operables” [BUT96].
La importancia a la que se dota a la interfaz de usuario de una aplicación
informática es primordial, ya que en cierta manera es para el usuario ‘la
aplicación’, el medio por el que la visualiza y por el que accede a sus
prestaciones y servicios. La mayor parte de la calidad técnica de la aplicación
acaba fluyendo por este conducto. Si no lo hace, queda inédita, o es inútil. Si
la interfaz no es efectiva, la funcionalidad de la aplicación y su utilidad están
limitadas; los usuarios se confunden, se frustran y se enojan; los
desarrolladores pierden credibilidad y la empresa tiene que soportar altos
costes y baja productividad.
Figura 12
Metodología esquemática
de la Ingeniería de la
Usabilidad.
El objeto de la Ingeniería de la Usabilidad es minimizar la sobrecarga cognitiva
y perceptiva del usuario de esa aplicación. Utiliza un método de diseño
iterativo con prototipado rápido (es imprescindible contar con herramientas de
ayuda), cuyo esqueleto es el ciclo "análisis-diseño-implementaciónevaluación" (véase Figura 12), que se repite varias veces con vistas a ir
enriqueciendo progresivamente el sistema. La etapa de evaluación del
48
MODELO DE PROCESO
prototipo, confrontándolo con usuarios reales a cada repetición del ciclo, se
revela como trascendental para obtener resultados dignos de una ingeniería.
¿Qué es la usabilidad?
La utilidad de un sistema [NIE93], en tanto que medio para conseguir un
objetivo, tiene una componente de funcionalidad (utilidad funcional) y otra
basada en el modo en que los usuarios pueden usar dicha funcionalidad. Es
esta componente la que nos interesa ahora.
Los componentes de la calidad del software son difíciles de precisar y de
medir y la usabilidad no es una excepción en absoluto, sino todo lo contrario,
como cualquiera puede colegir del hecho de que las métricas más habituales
para su evaluación son un tanto psicológicas, como la facilidad de aprendizaje,
las prestaciones y la satisfacción del usuario.
Usabilidad es un factor plenamente aceptado de la calidad del software en
particular y de la de los sistemas de información, en general, definido
recientemente por instituciones normalizadoras como ISO o ETSI. Aunque el
término, por ahora, no existe en español.
Podemos definir usabilidad como el grado con el que la gente (los usuarios)
puede realizar un determinado conjunto de tareas. Es el producto de varios, a
veces conflictivos, objetivos básicos [BRI02]:
•
•
•
•
•
•
Funcionalmente correcto: el sistema tiene que alcanzar los objetivos para
los que ha sido diseñado. Tiene que realizar las funciones que el usuario
necesita. Un software que no permita a los usuarios realizar sus tareas no
es usable.
Eficiente en el uso: podemos medir la eficiencia como el tiempo o las
acciones requeridas para realizar una tarea. El sistema ha de alcanzar los
objetivos de la forma más eficiente posible.
Facilidad de aprendizaje: se refiere a la facilidad con la que nuevos
usuarios pueden tener una interacción efectiva. Está relacionada con la
predicibilidad, sintetización, familiaridad, la generalización de los
conocimientos previos y la consistencia. En general, cuantos menos pasos
contenga un procedimiento, más fácil será de aprender.
Fácil de recordar: el grado con el que un sistema carga la memoria del
usuario determina como de fácil es para los usuarios recordarlo. La
interacción que permita alcanzar los objetivos no puede ser tan complicada
que no pueda repetirse.
Tolerancia a errores: se determina por la eficacia con la que se previenen
los errores, la facilidad con la que se detectan e identifican cuando ocurren
y por como se corrige la situación de error una vez identificada. El sistema
tiene que ser capaz de volver fácilmente a su estado normal después de
una situación errónea provocada por una interacción incorrecta con él. A
su vez, tiene que disponer de mecanismos para informar al usuario de los
errores en la interacción para que no se produzcan nuevamente después
de la recuperación.
Subjetivamente agradable: por último, la usabilidad a menudo se determina
por como los usuarios se sienten usando el sistema. Es necesario que
todos los requisitos anteriores provoquen en el usuario la sensación de una
experiencia satisfactoria. Aunque los gráficos no funcionales y otros
elementos de las interfaces puedan sesgar la usabilidad de la percepción
49
del usuario, la satisfacción de éste es probablemente una combinación de
estos criterios.
En este punto, no debe confundirse el concepto de usabilidad con el de
amigabilidad o de congenialidad (en inglés, user friendliness), porque la
usablidad es un nivel superior al de "amigabilidad", puesto que incorpora
también criterios de rendimiento, tales como efectividad y eficiencia.
¿Por qué es importante la usabilidad?
El establecimiento de unos principios de diseño en ingeniería basados en la
usabilidad han tenido como consecuencia probada:
•
•
•
•
Una reducción de los costes de producción: los costes y tiempos de
desarrollo totales pueden ser reducidos evitando el “sobrediseño” y
reduciendo el número de cambios posteriores requeridos en el producto.
Reducción de los costes de mantenimiento y apoyo: los sistemas que son
fáciles de usar requieren menos entrenamiento, menos soporte para el
usuario y menos mantenimiento.
Reducción de los costes de uso: los sistemas que mejor se ajustan a las
necesidades del usuario mejoran la productividad y la calidad de las
acciones y las decisiones. Los sistemas más fáciles de utilizar reducen el
esfuerzo (stress) y permiten a los trabajadores manejar una variedad más
amplia de tareas. Los sistemas difíciles de usar disminuyen la salud,
bienestar y motivación y pueden incrementar el absentismo. Tales
sistemas suponen pérdidas en los tiempos de uso y no son explotados en
su totalidad en la medida en que el usuario pierde interés en el uso de las
características avanzadas del sistema, que en algunos casos podrían no
utilizarse nunca.
Mejora en la calidad del producto: el diseño centrado en el usuario resulta
en productos de mayor calidad de uso, más competitivos en un mercado
que demanda productos de fácil uso.
USABILIDAD EN LA WEB
La tendencia natural de los desarrollos de software van hacia Internet. No hay
ninguna actividad que no se realice actualmente a través de la Red. La rapidez
con la que Internet está creciendo hace necesario la utilización de métodos
ingenieriles para poder construir aplicaciones web de calidad, de fácil
mantenimiento y con el menor esfuerzo posible.
En Internet es básico garantizar la usabilidad, “los usuarios han cambiado, ya
no son los mismos y cada vez se parecen más a una persona corriente. Para
los nuevos usuarios medios la informática no es un hobby sino una
herramienta más a su disposición por ello no se puede esperar que aprendan
más del mínimo necesario. El nivel medio de conocimientos está bajando, más
gente sabe usar Internet, pero a un nivel más elemental. Si hasta hace poco la
gente se adaptaba a las webs, ahora las webs han de adaptarse a la gente”
[MAN02a].
La usabilidad de un documento web descansa en pilares tales como la
navegación, el tiempo de respuesta, el contenido, la interactividad y la facilidad
de comprensión. Hasta lo humanamente posible, cuando se mire una página
50
MODELO DE PROCESO
web ésta ha de ser obvia, evidente, clara y fácil de entender. “Tendría que
poderse "entender" (qué es y cómo usarla) sin agotar esfuerzos pensando en
ella. No obstante, algunas veces, si se hace algo en concreto que es
realmente original o innovador, o incluso, algo bastante complicado, hay que
conformarse con claridad. En una página fácil de entender hay que pensar
incluso un poquito para "entenderla" (pero sólo un poquito). La apariencia de
las cosas, sus nombres bien escogidos, la disposición de la página y los textos
pequeños y cuidadosamente elaborados tienen que funcionar bien en su
conjunto para conseguir un reconocimiento casi instantáneo. Si no puede
hacerse una página fácil de entender, al menos tendrá que hacerse clara.” .
Una base de principios básicos que debe seguir un sitio web usable serían
[MAN02b]:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
Autonomía, los usuarios deben tener el control sobre el sitio web. Los
usuarios sienten que controlan un sitio web si conocen su situación en un
entorno abarcable y no infinito.
Los colores han de utilizarse con precaución para no dificultar el acceso a
los usuarios con problemas de distinción de colores (aprox. un 15% del
total).
Consistencia, las aplicaciones deben ser consistentes con las
expectativas de los usuarios, es decir, con su aprendizaje previo.
Eficiencia del usuario, los sitios web se deben centrar en la productividad
del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas
con mayor número de pasos son más rápidas de realizar para una persona
que otras tareas con menos pasos, pero más complejas.
Reversibilidad, un sitio web ha de permitir deshacer las acciones
realizadas.
Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta
en función de la distancia y el tamaño del objetivo. A menor distancia y
mayor tamaño más facilidad para usar un mecanismo de interacción.
Reducción del tiempo de latencia. Hace posible optimizar el tiempo de
espera del usuario, permitiendo la realización de otras tareas mientras se
completa la previa e informando al usuario del tiempo pendiente para la
finalización de la tarea.
Aprendizaje, los sitios web deben requerir un mínimo proceso de
aprendizaje y deben poder ser utilizados desde el primer momento.
El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero
un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
La protección del trabajo de los usuarios es prioritario, se debe asegurar
que los usuarios nunca pierden su trabajo como consecuencia de un error.
Legibilidad, el color de los textos debe contrastar con el del fondo, y el
tamaño de fuente debe ser suficientemente grande.
Seguimiento de las acciones del usuario. Conociendo y almacenando
información sobre su comportamiento previo se ha de permitir al usuario
realizar operaciones frecuentes de manera más rápida.
Interfaz visible. Se deben evitar elementos invisibles de navegación que
han de ser inferidos por los usuarios, menús desplegables, indicaciones
ocultas, etc.
Otros principios para el diseño de sitios web son:
•
Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo
esfuerzo y unos resultados máximos.
51
•
•
•
•
•
•
Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario
comete un error el sistema ha de solucionar el problema, o en su defecto
sugerir varias soluciones posibles, pero no emitir respuestas que
meramente informen del error culpando al usuario.
En ningún caso un sitio web puede venirse abajo o producir un resultado
inesperado. Por ejemplo no deben existir enlaces rotos.
Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio
web es un término peligroso, cuanto mayor sea el número de acciones que
un usuario pueda realizar, mayor es la probabilidad que cometa un error.
Limitando el número de acciones al público objetivo se facilita el uso de un
sitio web.
Los usuarios no deben sufrir sobrecarga de información. Cuando un
usuario visita un sitio web y no sabe donde comenzar a leer, existe
sobrecarga de información.
Un sitio web debe ser consistente en todos los pasos del proceso. Aunque
pueda parecer apropiado que diferentes áreas tengan diseños diferentes,
la consistencia entre los diseños facilita al usuario el uso de un sitio.
Un sitio web debe proveer de un feedback a los usuarios, de manera que
éstos siempre conozcan y comprendan lo que sucede en todos los pasos
del proceso.
Hemos expuesto los principios más generales de usabilidad en la web. Su
aplicación concreta y casuística será abordada a lo largo de la aplicación de
estas directrices en nuestro proyecto.
BUSCANDO UN MODELO DE PROCESO
El proceso de software
Es importante recordar que la calidad de un desarrollo se mide no sólo por la
evaluación del producto entregado sino por la evaluación del proceso aplicado.
Hasta ahora hemos empleado el termino “proceso de software”, pero ¿qué
queremos decir con este término?: ”Un proceso es un conjunto de pasos
definidos para lograr una tarea”, mientras que “un proceso definido es aquel
que está escrito a tal detalle que permite que los ingenieros lo usen
constantemente”. Los procesos definidos ayudan a la planificación y desarrollo
de un trabajo. Un grupo de actividades cuya meta es el desarrollo o evolución
de software es un proceso de software.
No existe un proceso de software universal. Las características de cada
proyecto (equipo de desarrollo, recursos, etc.) exigen que el proceso sea
configurable. Pero el proceso que establezcamos debe ser flexible y debe
facilitar el cambio y la innovación, al mismo que debe poder ser aprendido.
El Lenguaje de Modelamiento Unificado, UML.
Una de las herramientas de diseño y análisis más utilizadas en los procesos
de desarrollo de software bajo una perspectiva orienta a objetos, es la
notación UML. El Lenguaje de Modelamiento Unificado (UML - Unified
Modeling Language) es un lenguaje gráfico para visualizar, especificar y
documentar cada una de las partes que comprende el desarrollo de software.
52
MODELO DE PROCESO
El ciclo de vida para UML consiste en una serie de ciclos cada uno de los
cuales produce una nueva versión del producto. Cada ciclo está compuesto
por fases y cada una de estas fases está compuesta por un número de
iteraciones. Como lenguaje de modelado que es, no define un proceso
estándar. Sin embargo, existen una serie de actividades genéricas para todos
los procesos de software:
•
•
•
•
Análisis. Que es lo que se quiere hacer.
Diseño. Como se quiere que se haga.
Programación. Escritura del código.
Mejora, depuración, mantenimiento, soporte.
Haciendo un resumen o compendio de todos los elementos expuestos hasta
ahora, convendremos en buscar un modelo cuyos beneficios sean los
siguientes:
•
•
•
•
•
•
Debe apoyarse en principios bien conocidos de la Ingeniería del Software.
Tendrá un enfoque generalista y a su vez suficientemente conciso y
robusto para que el desarrollador pueda aplicarlo sin dudas ni
ambigüedades.
Cubrirá todas las fases, tareas y actividades esenciales de un proyecto de
software cuyo ciclo de vida queda especificado mediante UML.
Su paradigma fundamental será el del Diseño Centrado en el Usuario.
Deber ser aplicable a todo tipo de proyectos y adaptarse tanto a
desarrollos comerciales como a proyectos a medida más específicos y
especializados.
Este proceso será proporcionado por la Ingeniería de la Usabilidad.
MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD
Una de las principales causas para no incluir la ingeniería de factores
humanos o Ingeniería de Usabilidad en los tradicionales modelos de desarrollo
software [SOM01] es la complejidad que existe para unir las actividades que
tienen lugar en estas dos disciplinas [BRO89].
Habitualmente se suele otorgar poca importancia a los usuarios en los
modelos de desarrollo software, ya que típicamente la figura del usuario
exclusivamente aparece al principio del desarrollo (Ingeniería de
Requerimientos), al final del mismo o al final de cada etapa, pero no durante el
proceso de desarrollo.
Como contribución a cambiar esto, el Modelo de Proceso de la Ingeniería de la
Usabilidad (MPIU) [LOR02] especifica una metodología que guía al equipo de
desarrollo de aplicaciones interactivas con altos niveles de usabilidad.
“El MPIU tiene sus cimientos por una parte en la Ingeniería del Software (IS) y
por otra en la disciplina de la Interacción Persona-Ordenador, la cual
contribuye -entre otras- con toda una sólida base de conocimiento y un
conjunto de técnicas y experiencias conocidas para el diseño de interfaces
centrados en sus usuarios. Pretende ser una herramienta de trabajo para
ayudar metodológicamente a los equipos de desarrollo. No especifica ni el
uso de un determinado lenguaje de programación, ni ninguna tecnología
específica, ni ningún factor que pueda determinar la aplicación, sino todo lo
contrario, está pensado para todo tipo de aplicaciones y tecnologías -actuales
y futuras–, en definitiva, es independiente de los dispositivos y la tecnología.”
53
APLICACIÓN DEL MODELO DE PROCESO A LA WEB
En el área de desarrollo de aplicaciones web se ha introducido un gran
número de iniciativas para la creación de soluciones web al diseño clásico de
software. Estos métodos pueden ser clasificados en dos enfoques principales:
los métodos hipermediales de desarrollo y los métodos que extienden la
aproximación UML. Si además, pretendemos priorizar la incorporación de la
usabilidad en un sitio web desde un principio y basarnos en la Ingeniería del
Software y en la disciplina de la Interacción Persona-Ordenador, aplicaremos
el Modelo de Proceso de la Ingeniería de la Usabilidad aplicado al paradigma
Web.
Aunque existen otras propuestas ([BRI02], [RCA02], [NIE99], [MAY99])
nuestro modelo basa todo el proceso de desarrollo en una constante
aplicación iterativa de las actividades de Prototipado y Evaluación aplicadas a
todas las etapas considerando la usabilidad desde un principio, a la vez que
integra, a diferencia de aquellas, actividades propias de la Ingeniería del
Software. Veamos, a grandes rasgos, aquellos aspectos más importantes
cuando tratamos de aplicar el MPIU al desarrollo de un sitio Web.
Análisis de Requisitos. (1) el estudio de la audiencia [HYS98]; (2) las redes
sociales identificando patrones comunicativos y flujos de información [GAR97];
(3) la diversidad en cuanto a plataformas, velocidades de acceso, preferencias
personales o navegadores condicionan directamente el modelo mental del
usuario; (4) la medida del éxito utilizando parámetros funcionales y de
usabilidad [STE02]; (5) las diferencias individuales del mercado (edad, género,
educación, ocupación), de las discapacidades (visuales, auditivas, motrices) o
del nivel de experiencia.
Prototipado a partir de la realización de maquetas (bocetos, maquetas de
papel y digitales) [BRI02] evaluadas a base de encuestas, focus groups
[NIE93] con implicados (stakeholders) son especialmente indicadas. Cómo
también lo son las evaluaciones a partir de descripciones formales de
escenarios de casos de uso [CON95].
Diseño. Aunque el diseño gráfico es importante debe invertirse más tiempo en
el diseño de la interacción del sitio. Implementar el diseño conceptual del sitio
con la Arquitectura de la Información [ROS98] es especialmente relevante.
Estudiar los modelos de navegación, de la página de inicio o homepage
[NIE02], o los distintos elementos de navegación (barras de navegación,
menús desplegables, opciones de búsqueda, mapa del sitio, sistema de
etiquetas, los textos alternativos y de las metáforas a utilizar en toda la
interfaz). La técnica conocida como card sorting [ROB01] permite entender y
ajustar el diseño de la actividad relativa a las interacciones de los usuarios. La
realización de prototipos digitales o de software horizontales ya sea con una
“estructura alámbrica” (wireframe) o bien con un “prototipo detallado” (highend) evaluados por el método del focus group o del thinking aloud, así cómo
también el método de inspección de estándares nos servirán para la fase de
prototipado y evaluación.
54
MODELO DE PROCESO
ESQUEMA DEL MODELO
Un método basado en la usabilidad debe disponer de un esquema claro y
consistente, que permita ver claramente al usuario de este método y que sirva
como guía en todo momento para saber en que fase del desarrollo se
encuentra y que posibilidades se tienen a partir de la fase actual de continuar
su desarrollo.
Figura 13
Modelo de Proceso de la
Ingeniería de la
Usabilidad (MPIU).
El modelo (véase Figura 13), además, no es extenso ni tiene muchos nodos y
ramificaciones, que podrían provocar desconcierto para el desarrollador, sino
que muestra una idea lo más clara posible del significado de todo el proceso a
primera vista. Estas características básicas son:
Organización Conceptual.
55
El esquema se encuentra organizado sobre la base de una serie de módulos o
nodos que determinan la fase del desarrollo en que nos encontramos y da una
idea de las pautas a seguir durante el diseño de un sistema interactivo.
Tres pilares básicos. El objetivo del Modelo de Proceso es conseguir aunar el
modelo clásico del desarrollo de la Ingeniería del Software con los principios
básicos de la Ingeniería de la Usabilidad. El esquema refleja claramente, con
una codificación en colores, los pilares básicos de este modelo:
• Ingeniería del Software clásico representada en la columna azul de la
izquierda y que muestra la integración de la Ingeniería de la Usabilidad con
esta disciplina, puesto que aparecen las cuatro fases principales del
modelo de proceso clásico: análisis, diseño, implementación, instalación.
• El prototipado, columna verde del centro, como metodología que engloba
técnicas que permitirán la posterior fase de evaluación.
• La evaluación, codificada en amarillo a la derecha, que engloba y
categoriza los métodos de evaluación existentes.
El usuario
Desde un primer vistazo al esquema, queda claro que es un proceso de
diseño centrado en el usuario. Esto se refleja colocándole en la parte central y
por encima del resto de nodos de todo el Modelo de Proceso.
Un método iterativo
En todo proceso de desarrollo de software existe una fase más o menos
importante en la cual, a base de una serie de repeticiones, se pasa de una
aproximación de la solución ideal a la solución definitiva.
Este proceso de repetición en la Ingeniería clásica del software se produce en
una fase más tardía que en la Ingeniería de la Usabilidad, y suele ser más
costosa en cuanto a recursos y tiempo empleado.
•
•
Las flechas del esquema especifican los sentidos posibles del flujo de
avance en el desarrollo del sistema.
Las flechas azules, más pequeñas, se corresponden con el modelo clásico
y las de color gris, más grandes, indican cuando interviene el usuario, es
decir, se corresponden con el modelo centrado en el usuario.
Podemos observar también que el modelo no sigue un sentido lineal ni
restrictivo. Esto se debe a que es el diseñador junto con los requisitos de
desarrollo los que marcarán cuantos iteraciones son necesarias.
A continuación, detallamos los módulos:
En esta fase se formula el problema de diseño: se determina la audiencia y las
plataformas destino, las metas de los usuarios y los requisitos técnicos, así
como las necesidades de los usuarios y los requisitos de usabilidad. Supone
determinar, enumerar y clasificar todas las características, capacidades y
restricciones que ha de cumplir y a las que se verá sometido. Los requisitos
suelen estar enfocados en qué hará el sistema y no en como ha de hacerlo
(véase Figura 14).
56
MODELO DE PROCESO
Esta fase es tan inmensamente crítica e importante que de ella dependerá la
buena continuación del proyecto. Repercute directamente en la disminución
del numero de iteraciones necesarias para conseguir el proceso global y, en
consecuencia, disminuirá el coste del desarrollo tanto en tiempo como en
recursos. Además, si los requisitos no se definen correctamente, el cliente
puede crearse falsas expectativas sobre el producto y finalmente quedar
insatisfecho con el resultado.
Figura 14
Actividades del análisis
de requisitos.
Los métodos de evaluación más comunes en esta fase son el análisis
competitivo, las entrevistas con los usuarios y las encuestas. De lo que se
puede deducir que será imposible determinar todos estos objetivos en una
primera fase o estudio del cliente, debido, en parte, a que los clientes no son
capaces de apreciar sus necesidades completas hasta que no pueden ver o
interactuar con las opciones disponibles.
La aplicación del análisis de requisitos al proyecto se cubre en el .
Diseño Conpetual
En la fase de diseño conceptual, debe alcanzarse una idea clara de cómo será
la interfaz de usuario y las relaciones con esta para desarrollar las
especificaciones funcionales que sirvan de guía al diseño posterior. La interfaz
determinará en gran medida la percepción que el usuario tendrá de la
aplicación (véase Figura 15).
Figura 15
Actividades del diseño.
Cada tipo de interfaz tiene sus propias particularidades de su campo de
aplicación. Son especificaciones que hay que tener en consideración en el
57
momento de crear e implementar los prototipos. Sin embargo, cabe tenerlos
presentes en la etapa de diseño porque pueden afectar a las funcionalidades
de la interfaz y pueden venir determinadas por los requisitos del sistema a
desarrollar.
Métodos típicos de diseño incluyen los Casos de Uso, Análisis de Tareas y la
Arquitectura de la Información (AI), que “se refiere al diseño, organización,
etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a
encontrar y gestionar la información de manera efectiva” [ROS98].
El caso particular de diseño conceptual de sitios web y la aplicación en nuestro
proyecto se expondrá en el .
Prototipado
Los prototipos son documentos, diseños o sistemas que simulan o tienen
implementadas partes del sistema final a desarrollar. Los prototipos son
cruciales para diseñar un buen sitio web, facilitan la planificación del proceso
de creación, reducen el coste de las evaluaciones, aumentan su efectividad y
evitan graves errores en el diseño (véase Figura 16).
Figura 16
Actividades del
prototipado.
El solo propósito de crear estos prototipos es dar la oportunidad de evaluar el
diseño prematuramente. El objetivo es producir estos prototipos rápidamente y
evaluarlos eficazmente para que puedan ser refinados, elaborados y
reevaluados antes del producto final. Entre los métodos comunes de
evaluación en esta fase incluyen los test con los usuarios y los focus groups.
Se cubre en el .
Evaluación
En cada fase de desarrollo, se necesita algún tipo de realimentación del
sistema, puesto que queremos identificar tan rápidamente como sea posible
cuando el proceso de diseño se desvía hacia un mal camino (véase Figura
17).
58
MODELO DE PROCESO
Figura 17
Lista de posibles
actividades de
evaluación.
Inspección
El término inspección aplicado a la usabilidad aglutina un conjunto de métodos
para evaluar la usabilidad en los que hay unos expertos conocidos como
evaluadores que explican el grado de usabilidad de un sistema basándose en
la inspección o examen de la interfaz del mismo.
Existen varios métodos que se enmarcan en la clasificación de evaluación por
inspección. Los más importantes son:
•
•
•
•
Heurística. Método desarrollado por Nielsen [NIE94] y Molich [MOL90] que
consiste en analizar la conformidad de la interfaz con unos principios
reconocidos de usabilidad (la “heurística”) mediante la inspección de varios
evaluadores expertos. La aplicación del método se basa en validar las “10
reglas heurísticas de usabilidad” –conjunto revisado de reglas heurísticas
de usabilidad a partir del análisis de 249 problemas de usabilidad [NIE94]–
por dichos evaluadores.
Recorrido de la Usabilidad Plural. Método desarrollado por Bias [BIA95] en
los laboratorios IBM. Las principales características de este método son
que se realiza con tres tipos de participantes que evalúan el modelo a
partir básicamente de prototipos de papel y con una especie de debate
final entre los participantes.
Recorrido Cognitivo. Este método de inspección de la usabilidad se centra
en evaluar la facilidad de aprendizaje del sistema. Se realiza básicamente
de la forma que la mayoría de los usuarios prefieren o suelen aprender
software: por exploración [WHA94]. Los revisores evalúan una propuesta
de interfaz en el contexto de una o más tareas específicas.
Estándares. Para evaluar este método se precisa de un evaluador que sea
un experto en el o los estándares a evaluar. Dicho evaluador va pasando
por la interfaz comprobando el cumplimiento o incumplimiento de dichos
estándares.
Indagación
El proceso de indagación trata de llegar al conocimiento de una cosa
discurriendo o por conjeturas y señales. En los métodos de evaluación
realizados por indagación hay un gran trabajo de hablar con los usuarios y
observarlos detenidamente usando el sistema en trabajo real (no para un test
de usabilidad) o obteniendo respuestas a preguntas verbalmente o por escrito.
Los principales métodos de evaluación por indagación son:
•
Observación de campo. La observación de campo la describe Nielsen
[NIE93] en base al trabajo que se realiza al visitar el lugar o lugares de
trabajo donde se estén realizando las actividades objeto de nuestro estudio
59
•
•
•
•
y donde se encuentran los usuarios representativos. El principal objetivo
consiste en observarlos para entender cómo realizan sus tareas y qué
clase de modelo mental tienen sobre ellas. Esta información será
completada con preguntas y/o entrevistas personales. Este método se
puede utilizar en las etapas de prueba y del despliegue del desarrollo del
producto.
Focus Group. El Focus Group [NIE93] o Grupo de Discusión Dirigido es
una técnica de recolección de datos donde se reúne de 6 a 9 usuarios para
discutir aspectos relacionados con el sistema. Un ingeniero de factores
humanos hace las veces de moderador, que tiene que preparar la lista de
aspectos a discutir y recoger la información que necesita de la discusión.
Esto permite capturar reacciones espontáneas e ideas de los usuarios que
evolucionan en el proceso dinámico del grupo.
Entrevistas. Entrevistar a los usuarios respecto de su experiencia con un
sistema interactivo resulta una manera directa y estructurada de recoger
información. Además las cuestiones se pueden variar con tal de adaptarlas
al contexto. Las entrevistas aportan información muy valiosa sobre
aspectos que a veces no son tenidos suficientemente en cuenta por los
diseñadores. Las entrevistas son realmente efectivas si el evaluador la ha
preparado eficientemente de manera que conduce la misma y trata los
temas que son realmente necesarios. Las entrevistas son muy bien
complementadas por los cuestionarios.
Logging. La técnica del logging o grabación de uso se basa en “grabar” o
“recoger” todas las actividades realizadas por el usuario con el sistema
para su posterior análisis. Para ello es preciso de una aplicación
secundaria que realice automáticamente esta labor que pase, además,
totalmente desapercibida por el usuario.
Cuestionarios. El cuestionario es menos flexible que la entrevista, pero
puede llegar a un grupo más numeroso y se puede analizar con más rigor.
Se puede utilizar varias veces en el proceso de diseño. Y, como también
se ha apuntado en el apartado de las entrevistas suelen complementarse
muy bien. Estas, a igual que pasaba con las entrevistas, deben prepararse
muy bien ya que como es un documento a cumplimentar por los usuarios
debe ser muy claro y exento de ambigüedades que puedan confundirlos.
Test
En los métodos de usabilidad por test usuarios representativos trabajan en
tareas utilizando el sistema –o el prototipo– y los evaluadores utilizan los
resultados para ver cómo la interfaz de usuario soporta a los usuarios con sus
tareas. Los principales métodos de evaluación por test son:
•
•
•
60
Medida de las Prestaciones. Este método tiene como primer objetivo el
mejorar la usabilidad del producto gracias a realizar el test con usuarios
-personas o grupos- reales realizando labores habituales también reales.
Thinking Aloud. En este método de evaluación conocido como thinking
aloud (pensando en voz alta) descrito por Nielsen [NIE93] se les pide a los
usuarios que expresen en voz alta sus pensamientos, sentimientos y
opiniones mientras que interaccionan con el sistema –o un prototipo del
mismo–. Es muy útil en la captura de un amplio rango de actividades
cognitivas. Se realiza con usuarios únicos que expresan libremente todo lo
que piensan sobre el diseño y la funcionalidad del sistema.
Interacción Constructiva. Este sistema puede ser visto como una variante
del anterior (thinking aloud) puesto que se trata de hacer lo mismo pero en
vez de con usuarios únicos aquí se hace con grupos de dos usuarios
hablando entre ellos. La principal ventaja es que como los usuarios tienen
MODELO DE PROCESO
•
•
que hablar entre ellos salen a la luz muchas mas ideas que en el anterior –
al ser uno solo podían quedar cosas en la mente del usuario–. Suele
aportar más y mejor información que su antecesor.
Test Retrospectivo. Esta técnica realmente es un complemento de las
demás, ya que se trata de realizar alguno de los métodos anteriores,
grabarlo en vídeo y analizar dicha grabación posteriormente. El hecho de
hacerlo así permite “pasar” varias veces la cinta y examinar todos y cada
uno de los detalles sin que pase ninguno por alto.
Método del Conductor. En los métodos anteriores el usuario suele ir “a su
aire” y el evaluador analiza los resultados a posteriori. En este método el
evaluador conduce al usuario en la dirección correcta durante su uso del
sistema.
Implementación
En la fase de implementación o producción, se crea el producto final. Llegados
a este punto, a groso modo, es cuando debe empezarse a programar, lo cual
implica haber escogido el o los lenguajes de programación que mejor se
adapten a nuestro proyecto, las bases de datos correspondientes que se
precisen, la tecnología que garantice el éxito, etc. Se desarrollan los gráficos y
textos definitivos y el sitio debe ser codificado.
Esta etapa corresponde exactamente a la que se describiría en la Ingeniería
del Software clásica, puesto que la Ingeniería de la Usabilidad no trata de
cómo programar un producto interactivo, sino de la metodología para
conseguir un producto usable.
Métodos de evaluación comunes en esta fase incluyen test con los usuarios,
Quality Assurance y test de campos. Los temas de producción/implementación
se tratan en el .
Lanzamiento
Finalmente, el producto se lanza y se hace disponible al publico. La fase de
lanzamiento de todo proyecto, sea interactivo o de otra índole, suele ser una
de las mas críticas de todo el proceso. Es el momento en que se ven
concretadas en mayor o menor grado las expectativas puestas en el producto.
De todas formas cabe indicar que la percepción que el usuario final del
producto tiene un peso específico enorme a la hora de indicar si el producto
será aceptado o no.
Resumiendo, podemos indicar que el éxito total del producto dependerá de
dos factores muy importantes:
• por un lado que el usuario se sienta cómodo con el sistema. Entendiendo
cómo sentirse cómodo el que no le dé errores, que no le resulte
complicado usarlo, que recuerde fácilmente donde están las diferentes
opciones y sus funcionalidades, etc., y
• por otro lado que los responsables obtengan los resultados esperados.
El ciclo de vida de la Ingeniería de la Usabilidad asegura que ambos aspectos
se vean satisfechos puesto que:
61
•
•
el diseño se ha hecho en base y para los usuarios, haciéndoles partícipes
del mismo se consigue un efecto doble, por un lado cómo se sienten
responsables en parte de dicho diseño no encontraran motivos para
criticarlo, y por otro como todo ha sido evaluado por ellos no les reportará
una gran carga cognitiva ni de aprendizaje.
como todo producto software, desarrollado por los métodos clásicos, la
evaluación funcional es lo primero que se prima y no se da por bueno si no
se cumplen sus especificaciones.
Por lo indicado anteriormente podemos ver que en esta fase el factor más
importante es lo que se suele conocer como User Feedback (“reacción o
realimentación del usuario”) [MAY99].
Feedback del usuario.
Una vez el producto ha sido instalado y puesto en explotación durante un
cierto periodo –denominado habitualmente como fase de pruebas–, se recoge
lo que se llama el feedback del usuario, o sea las impresiones, pegas,
mejoras, defectos, etc. que los usuarios.
A partir de dichas impresiones se hacen las mejoras y retoques que se crean
oportunas, dejando el producto nuevamente en fase de testeo por parte del
usuario hasta tener una satisfacción total.
Podríamos pensar que como el sistema se ha desarrollado siguiendo el
modelo de proceso centrado en el usuario esta etapa debería ser innecesaria
a este nivel del modelo, pero la misma autora nos describe cuatro buenas
razones para que debamos tener en cuenta este factor:
• proporcionar una entrada para el mantenimiento y posibles mejoras del
producto.
• proporcionar una entrada para la implementación de futuras revisiones del
producto.
• proporcionar una entrada para el diseño y desarrollo de productos
relacionados que serán utilizados por los mismos usuarios o de
características similares.
• incrementar el autoaprendizaje en cuanto a la usabilidad (toda nueva
experiencia supone un incremento en cuanto a conocimientos ya sean
nuevos o mejoras de los ya adquiridos).
Las actividades del pre-lanzamiento y el post-lanzamiento se cubren en el .
62
MODELO DE PROCESO
4
CASO DE ESTUDIO
APLICACIÓN DEL MODELO
PLANIFICACIÓN
EVALUACIÓN
•
•
•
Evaluación anterior a los prototipos
Evaluación de los prototipos
Evaluación posterior
GLOSARIO
A lo largo de esta sección detallaremos y documentaremos tanto el proceso de
elaboración como los resultados obtenidos de la aplicación del Modelo de
Proceso de la Ingeniería de la Usabilidad al portal web de
culturanocturna.com.
Agruparemos las conclusiones de las actividades para cada una de las etapas
del modelo de proceso, que se han aplicado dependiendo de factores
específicos del proyecto en concreto. Hay que tener muy presente que aquí se
presenta una agrupación y ordenación de los resultados de las técnicas
empleadas, los documentos escritos, las características implementadas y las
decisiones tomadas y que se han ido produciendo e iterando durante todo el
proceso. Es decir, que aunque la información se presente secuencialmente, es
el resultado de la clasificación de los elementos de información obtenidos
durante un proceso iterativo e incremental. Por ejemplo, es evidente que algo
como el registro del nombre de dominio ha sido realizado en una fase muy
prematura del proyecto, sin embargo, en este documento lo presentamos en la
etapa de lanzamiento del modelo de proceso.
Esto nos permitirá ver el conjunto de especificaciones necesarias y reflejar
como ha ido evolucionando el sitio web durante el desarrollo del proyecto.
PLANIFICACIÓN
La estimación suele resultar especialmente difícil, porque sólo puede
realizarse de forma rigurosa si se tiene implantado un buen sistema de
medición sobre proyectos anteriores; y aun en ese caso pasa por fases de
progresiva precisión, pero inicialmente hay que admitir un abultado margen de
error. En la práctica, juegan un importante papel la experiencia y el instinto del
desarrollador.
A la luz de esto, es evidente que un alumno de un TFC no se encuentra en
una situación ideal para realizar buenas estimaciones (y así lo hemos
percibido). De todas formas, hemos seguido una estrategia que ha seguido los
siguientes principios:
•
•
•
•
Ya que el problema no tiene solución satisfactoria, lo mejor que tenemos
es el criterio del desarrollador.
Una estimación no se negocia.
Hay que dividir las tareas hasta llegar a un tamaño muy pequeño, y estimar
esas minitareas.
La estimación final se obtiene combinando las parciales.
En el apéndice PLANIFICACIÓN DEL PROYECTOPLANIFICACIÓN DEL
PROYECTO, se adjunta una planificación inicial y su correspondiente
diagrama de Gantt. También se incluye un diagrama que representa la
evolución temporal del proyecto a través de las diferentes iteraciones en las
fases del Modelo de Proceso de la Ingeniería de la Usabilidad, detallando
cada una de las tareas realizadas en cada etapa y en cada momento.
EVALUACIÓN
La evaluación de la usabilidad debe estar presente en cada etapa del ciclo de
diseño y durante todo el desarrollo para verificar la buena marcha del
proyecto. Para ello, debemos primero identificar los problemas y entonces
Capítulo 4: Aplicación del modelo
65
sugerir soluciones prácticas para mejorar la usabilidad del sitio. Después de
haber hecho los arreglos, lo ideal es reevaluar la web para verificar que las
soluciones realmente mejoran la usabilidad (test regresivo).
Sin embargo, existe un factor de gran consideración: los usuarios pueden no
estar presentes para realizar las pruebas de usabilidad o incluso, puede que
no tengamos idea de quienes podrían ser. Realizar un Diseño Centrado en el
Usuario sin el usuario no es ciertamente imposible. Existen técnicas para
realizar pruebas de usabilidad sin que los usuarios estén físicamente
presentes [MCD99].
Además, aunque consideraremos la evaluación durante todos los ciclos del
modelo de proceso, detallaremos realmente los métodos de usabilidad
seguidos en cada fase, que serán comentados en sus respectivos capítulos.
La evaluación, en su mayor grado, irá estrechamente unida a la etapa de
generación de prototipos, en el . A partir del análisis y evaluación de estos
prototipos, será posible la creación de una versión única del sitio web que a su
vez, será nuevamente evaluada y modificada.
Existen diferentes métodos de evaluación de sitios web que varían en su
rigurosidad, costes y conocimientos necesarios para llevarlas a cabo. La
estrategia de evaluación más aconsejable [MAN02c] es combinar una
evaluación heurística con un test de usuarios posterior, por considerarlas las
técnicas más eficientes, prácticas y asequibles:
•
•
Evaluación heurística. Evaluadores expertos en los heurísticos (principios)
de la usabilidad evaluan el sitio y elaboran un informe siguiendo esos
principios. Es uno de los métodos más informales, pero se considera como
uno de los principales por su excelente relación calidad/coste. En la
mayoría de los casos se debe realizar antes del test de usuarios.
Test de usuarios. A través de la observación y registro del comportamiento
de los usuarios en tareas previamente encomendadas, se extrae la
información sobre la usabilidad de un sitio web. El test de usuarios es el
tipo de evaluación más importante y la mayor herramienta de desarrollo
posible para un sitio web. Además de descubrir problemas y potenciales
mejoras para un sitio web, es la manera más cercana de aproximarse al
uso real de éste.
Evaluación anterior a los prototipos
En primer lugar se requiere una adecuada planificación para lo que tanto el
enfoque “persona” y la creación de “escenarios” de uso del sitio web son de
gran utilidad.
Los grupos de enfoque (focus group) pueden ser apropiados para determinar
lo que la audiencia quiere, necesita y le gusta, en abstracto. Son buenos para
comprobar si la idea del sitio tiene sentido y si su proposición de valor es
atractiva. Y puede ser una buena manera de probar los nombres que se estén
usando para los elementos del sitio, y para averiguar qué siente el público
sobre nuestros competidores. Pero no son buenos para saber si el sitio
funciona ni para saber como mejorarlo. El tipo de cosas que se pueden
aprender de los grupos de enfoque son las cosas que necesita conocer antes,
antes de empezar con el sitio.
66
CASO DE ESTUDIO
Deducimos de esto que los grupos de enfoque tienen que estar al principio del
proceso, pero debido al alto coste que supone realizar una prueba de estas,
optaremos por medidas que resuelvan las mismas cuestiones con un coste
más bajo, como son las encuestas-cuestionarios y un análisis competitivo.
Evaluación de los prototipos
El mayor uso de las maquetas y prototipos se consigue cuando se realizan de
un modo iterativo para refinar las ideas basadas en la evaluación con los
usuarios y la realimentación. Desarrollaremos un sistema de múltiples
borradores que refinaremos progresivamente hasta alcanzar una opción única
lista para la producción.
Cada refinamiento será consecuencia directa de una prueba de usabilidad,
bien heurística o un test con usuarios, en los cuales mostraremos algo a un
usuario (el sitio web, una maqueta digital, un prototipo o algunos pasajes de
páginas individuales) y se le pedirá que (a) averigüe lo que es, o (b) intente
utilizarlo para hacer una tarea normal.
El bajo o nulo presupuesto del que se dispone no deberá ser impedimento a la
hora de obtener resultados satisfactorios en la evaluación de la usabilidad
mediante test de usuarios. Steve Krug afirma que “para la mayoría de los
sitios, lo que realmente se necesita es gente que haya usado la Web lo
suficiente para conocer lo básico”, es prácticamente decir que “no importa a
quien se pruebe” y que “más vale probar a un usuario que a ninguno”.
Para no cometer el error de testar con usuarios un sitio web que no ha pasado
por una evaluación heurística previamente, realizaremos antes de cada
prueba con los usuarios una evaluación heurística de los prototipos a evaluar
para, de una manera rápida, detectar a bajo coste los errores de usabilidad.
Un sitio que no haya pasado por evaluación heurística previa suele estar
plagado de errores y en estas condiciones el test de usuarios descubre
únicamente los errores de bulto en el diseño, pero no es capaz de aportar
información realmente valiosa que justifique su alto coste.
Un experto puede detecar rápidamente muchos problemas de usabilidad de
un formulario de registro y proponer soluciones. Si se realiza directamente un
test y los usuarios se quedan bloqueados en un paso del formulario no será
posible evaluarlo completamente [MAN02d].
Evaluación posterior
En estas fases se incluyen métodos de evaluación basados en garantizar la
calidad (QA) y métodos de evaluación automatizados.
Existen una serie de datos que pueden ser recogidos automáticamente por
programas específicos, como el tiempo de descarga, la validación del código
HTML, el estado de los enlaces y la accesibilidad para discapacitados.
Además, deberemos analizar los logs generados por el servidor y el posterior
mantenimiento y realimentación con los usuarios tras el lanzamiento.
Capítulo 4: Aplicación del modelo
67
GLOSARIO
En el apéndice GLOSARIO DE TÉRMINOS RELACIONADOS CON LA
MÚSICA ELECTRÓNICA se incluye un glosario con los términos más
comunes referentes a la escena musical electrónica.
68
CASO DE ESTUDIO
5
CASO DE ESTUDIO
ANÁLISIS DE REQUISITOS
ANÁLISIS ETNOGRÁFICO
•
•
•
Música electrónica de baile
Dinámica recreativa juvenil
Objetos y contexto de acción
•
•
•
•
Hardware y Sistemas Operativos
Navegadores
Monitores
Velocidad de conexión
•
•
•
Escenarios
Análisis competitivo
Encuestas
ANÁLISIS DE LOS IMPLICADOS
ACTORES, ROLES Y ORGANIZACIÓN
PLATAFORMA
OBJETIVOS DE LA USABILIDAD
OBJETIVOS DE LA APLICACIÓN
ENCUESTAS, ESCENARIOS Y ANÁLISIS COMPETITIVO
Un diseño centrado en el usuario debe iniciarse conociendo quienes son
nuestros usuarios. En esta fase inicial del proyecto estableceremos, de la
manera más precisa que podamos, la audiencia destino. Con la ayuda de
encuestas, un análisis etnográfico, un análisis de los implicados, los actores,
sus roles y organización, junto con un enfoque persona y el uso de escenarios,
identificaremos a nuestra audiencia y sus objetivos y necesidades.
No sólo bastará con entender los atributos personales de la audiencia,
deberemos también investigar las configuraciones de hardware y software de
los usuarios. A pesar de los nobles intentos por hacer las tecnologías web
transparentes, las diferentes plataformas todavía juegan un rol significativo.
Definiremos las plataformas objetivo y las restricciones técnicas.
Por último, basándonos en estas necesidades y requisitos, especificaremos
detalladamente los objetivos de la aplicación y los requisitos de usabilidad.
No sin antes haber realizado un análisis competitivo de otros portales web con
nuestros mismos intereses.
ANÁLISIS ETNOGRÁFICO
Los jóvenes de hoy se han socializado dentro de los parámetros de una
sociedad del bienestar donde la experiencia del ocio se concibe como una
necesidad y casi un derecho fundamental del individuo. Para muchos jóvenes
la diversión y el ocio tienen que ver con actividades relacionadas con la
música y el baile.
A lo largo de esta década, la cultura de club y la música electrónica han
dejado de ser un fenómeno de minorías para entrar por la puerta grande de la
cultura en mayúsculas.
Música electrónica de baile
La música electrónica engloba una gran variedad de estilos musicales que
plantea, dentro del análisis etnográfico, la necesidad de definir un
concepto/término suficientemente objetivo, genérico y válido como para
designar y englobar la multiplicidad de estilos musicales que son producidos
de forma electrónica (es decir, mediante la utilización y la aplicación de nuevas
tecnologías) y que ligan con la esencia de la club culture.
En primer lugar, desestimamos la propuesta teórica de varios autores que
enfatizan el uso del término techno para referirse indistintamente a la
multiplicidad de estilos musicales electrónicos, ya que, desde nuestro punto de
vista, plantea una profunda confusión en el ámbito de contenidos estilísticos:
techno se refiere más a una etiqueta formulada para un específico estilo
musical, no para denominar todo el panorama electrónico. En segundo lugar,
si bien ya hemos empleado la expresión música electrónica, consideramos
que no resultaría plenamente válida en el tratamiento del clubbing, puesto que
también integra la dimensión de la música culta contemporánea (clasicismo
contemporáneo) provocando cierta indeterminación cuando se tratasen los
dos ámbitos a la vez. Sin embargo, al ser una expresión ampliamente
difundida y aceptada en la literatura especializada y en los mass media,
mantendremos puntualmente su utilización, dando prioridad al concepto
formulado por Peter Jowers electronic dance music, el cual consideramos que
posee el grado de precisión, objetividad, validez y visión genérica adecuados
Capítulo 5: Análisis de requisitos
71
“to describe a specific popular musical aesthetic” [JOW99], esto es, la cultura
de clubs, ya que, por un lado, recoge la idea primaria de producción
electrónica y tecnológica y, por el otro, la noción de dance music,
indispensable e inherente al nightclubbing, pues el baile y la música han
pasado de ser un medio a convertirse en un fin en sí mismos, cosa que, en
parte, nos permite hablar de cultura de clubs. Un rompecabezas que se
integra y compone de los diferentes roles, funciones y protagonismos de los
actores (el clubber, la relaciones públicas, el gerente del club, el discjockey,
etc.).
Dinámica recreativa juvenil
Para un análisis somero de las tareas que comprenden la dinámica recreativa
de los jóvenes, es necesario tener presente la idea de que los jóvenes
elaboran distintos modelos de diversión. Algunos experimentan la diversión
recreativa de forma dogmática, es decir, como el centro de interés de sus
vidas, una necesidad dominante y excluyente de otras experiencias y que
legitima todos los medios para alcanzarla. Los jóvenes que experimentan la
diversión recreativa de ese modo son los que podemos presumir dedican la
mayor parte de su tiempo libre al conjunto de actividades que incorpora el salir
de marcha. Son jóvenes que limitan sus amistades a aquellos que comparten
también esa misma actividad. Otros jóvenes experimentan la diversión
nocturna de forma ecléctica, son los jóvenes que también se divierten saliendo
de marcha por las noches, pero para los que existen además otras áreas de
interés en sus vidas. El salir de marcha supone una de las actividades de los
fines de semana que comparten con otro tipo de actividades. Para estos
jóvenes la diversión se obtiene de diversas fuentes, su grupo de amistad es
diverso y no comparten con todos ellos la actividad de salir de marcha. Es
seguro que entre los jóvenes más dogmáticos y los más eclécticos hay un
amplio abanico de gradaciones donde situar la dinámica que desarrolla cada
tribu.
Toda la actividad de estos jóvenes asiduos a los clubs va unida a las
actuaciones programadas por los promotores de estas salas. Los eventos se
concentran los fines de semana aunque durante la semana se mantiene una
cierta actividad. Existe un movimiento constante de apertura y cierre de
locales debido a que la población es nómada y cambia de locales buscando
ambientes novedosos que creen nuevas sensaciones. Surgen nuevos tipos de
locales en respuesta a una demanda creciente de novedad y búsqueda de
nuevas estéticas.
En este punto, es necesario puntualizar que dentro de este universo, club no
es equivalente a discoteca. Estas últimas son locales de diversión donde se
pincha cualquier producto bailable de cualquier estilo y época. A diferencia de
ello, el club es un local creador o impulsor de tendencias musicales y
destinado al baile. Es su importancia en los ’90 lo que ha dado origen a la
cultura de club iniciada desde los mas diversos locales especializados en
distintos tipos de música: techno, trance, acid-jazz, hip-hop, house, jungle, etc.
De igual forma, dentro del crisol de modalidades existentes, las hay mas
propicias para ser escuchadas de forma individual, como el trip-hop, el deephouse o el intelligent techno (calificadas como músicas easy listening o mas
concretamente "música electrónica para ser escuchada"), o bien, estilos que
por su ritmo, duración y tensión, están especialmente adaptados a su
72
CASO DE ESTUDIO
ejecución y disfrute colectivo dentro o fuera del club, aunque en su origen los
padres del techno europeo (Kraftwerk, véase Figura 18, New Order, etc.)
albergaran intenciones más intelectuales y menos lúdicas.
Figura 18
Kraftwerk, los padres del
techno europeo.
En una actuación en 1976
(a) y más de veinte años
después, en un concierto en
1998 (b).
(a)
(b)
A diferencia de lo que ocurre en Europa los españoles son más eclécticos en
cuanto a gustos musicales y no se han especializado tanto en cultivar la
música house y todos los subestilos que engloban. Es por ello, que desde
culturanocturna.com ofreceremos un contenido informativo más orientado a
la especialización musical que a la cara meramente lúdica, puesto que, por
ejemplo, en España cuando se habla de house o dance se hace referencia a
un conjunto de subestilos musicales, desde los más comerciales conocidos
como música máquina o ‘bakalao’ hasta los más elitistas o alternativos.
En España donde más se notan las influencias es en Barcelona, básicamente
por su extensa y cualificada cultura de club y en las fiestas y salas punteras
del país, donde el presupuesto permite adoptar por una noche a grandes
artistas.
73
Objetos y contexto de acción
El ocio basado en la música electrónica de baile ha sido asimilado por el
mercado y está siendo definido por los criterios del consumo, lo que ha dado
lugar a una industria muy activa dedicada a promocionar actividades que no
deja de expandirse participando activamente en crear y establecer criterios de
estilo de vida.
Esta forma de promoción se realiza a través de un marketing publicitario que
ha creado distintos materiales de difusión como pósters o postales (flyers,
véase Figura 19) que se adquieren de forma gratuita. Mediante los cuales
puede apreciarse que las ofertas son muy diversas y están presentadas de
manera muy atractiva, convirtiéndose esta misma publicidad en un producto
cultural que da identidad a grupos de jóvenes.
Figura 19
Flyers.
Ejemplo de dos flyers con los
que el club fragatino Florida
135 informa de su
programación.
(a)
(b)
Son especialmente significativos los flyers, pequeñas hojas dotadas de
información sobre la programación de un evento, con contenidos repletos de
interés sobre las actuaciones y con un diseño llamativo e inusual. Es la
manera con la que los clubbers estarán informados de los distintos eventos
programados en una sala en concreto. Los flyers se encuentran distribuidos
por distintos lugares relacionados con los jóvenes, tales como tiendas de ropa,
de discos, peluquerías, bares y otros clubs. Gracias a la recolección de los
distintos flyers, que llegan incluso a ser coleccionados, los interesados logran
informarse de la oferta de que disponen y, de esta forma, eligen en virtud de
sus intereses el local al que asistirán.
Por su parte, el club basará gran parte de su éxito en el artista o artistas que
ofrece en su programación, acorde al estilo que acostumbra a cubrir la sala y a
la formación de estructuras económicas ligadas a la creación y a la difusión
musical -firmas discográficas, organización de fiestas, etc-.
74
CASO DE ESTUDIO
En este contexto aparece la figura del administrador de los sonidos y
conductor de las sesiones de baile: el DJ o antiguo discjockey, tomando
entonces una relevancia especial, pues se ha convertido en la figura más
representativa del panorama musical, llegando a veces, a relegar a un
segundo plano la música que pinchan. Si en otras épocas, los interpretes,
autores y productores protagonizaban la creación musical, en la actualidad
estos personajes han perdido gran parte de su brillo a favor de estos
"modernos encantadores" que están sujetos a un destacadísimo proceso de
reconocimiento público y de valoración social, hasta el punto de ser
considerado como uno de los artífices de la nueva vanguardia popular
[BEL97]. Una dinámica que ha significado, a su vez, una verdadera
legitimación dentro del ámbito musical, provocando el surgimiento de un nuevo
rol social, de un nuevo concepto de profesionalidad artística vinculada a las
nuevas tecnologías alrededor de la actividad y significación del discjockey.
Esta reciente popularidad que han adquirido promueve, no sólo la mayor o
menor asistencia de público, sino un interés por conocer más sobre los
creadores/productores de esta música. Aunque no podemos negar que
favorece una tímida aparición del star system respecto a los DJ, tímida si la
comparamos con la de las otras músicas pop, lo cierto es que la admiración
creada a su alrededor motiva la generación de información sobre biografías,
entrevistas y otro material relativo al DJ. La prensa especializada es muy
escasa, prácticamente inexistente si buscamos contenidos exclusivos, y la
forma en la que los interesados se abastecen de estos datos es a través de
los flyers y masivamente a través de Internet. La música electrónica no tiene
casi prensa escrita, esta demasiado unida a la Red, con la que es la mejor
forma de transmitir. La Red es el medio natural de comunicación para la
música electrónica.
ANÁLISIS DE LOS IMPLICADOS
Ya se ha comentado que uno de los grupos sociales que más de ha apropiado
del espacio del ocio son los jóvenes, que para facilitar su descripción
dividiremos en cuatro subgrupos [IRE99]:
Los más jóvenes, prácticamente adolescentes, que no serían una masa crítica
de audiencia, pues no responden al perfil de clubber, ya que no les está
permitida la entrada a estos locales, y su bagaje de cultura musical es mínimo.
El grupo propiamente dicho de los jóvenes. Es el grupo más difícil de definir
por ser el más numeroso y heterogéneo. Pueden definirse como jóvenes
normativos puesto que participan del espacio y tiempo que adquiere más
intensidad cuando se sale de marcha. Tienen un estatus socioeconómico
medio y medio alto, formado por muchos estudiantes, especialmente
universitarios, profesionales y jóvenes con un cierto poder adquisitivo.
Otro grupo son los alternativos, que suelen ser mayores de edad y compartir
actividades de carácter reivindicativo. Estos jóvenes están estrechamente
unidos al fenómeno rave. Las raves se han considerado un fenómeno social
muy importante y se han analizado como un movimiento juvenil reivindicativo,
y como una necesidad de algunos grupos de jóvenes de tener un espacio
propio. En España este tipo de fiesta está empezando a popularizarse.
El último grupo son los llamados after, son parte de los otros grupos en
espacios de tiempo cuando todos los jóvenes están activos sin embargo estos
75
alargan la vida nocturna unas cuantas horas más, a veces todo el fin de
semana. En esos ambiente también participan trabajadores de la vida
recreativa cuando terminan la jornada laboral, los camareros, discjockey’s,
músicos, relaciones públicas, etc.
Estos cuatro subgrupos que se han presentado se han definido y delimitado
para hacerlos operativos y comparables, aunque en la realidad las fronteras
entre unos y otros se difuminan.
Así, en resumen y de forma general, podemos afirmar que en todas las
ciudades los jóvenes son polivalentes, individuos muy integrados socialmente,
pertenecen básicamente a la clase media o media-alta, la gran mayoría
trabajan o estudian –con un nivel de estudios alto en general–, con una ligera
mayor proporción de varones (60,9%). Si entendemos que se deja de ser
joven cuando la persona ha logrado el cuarteto de requisitos que propone Gil
Calvo, según el cual “es joven la persona fisiológicamente madura que todavía
no posee ocupación productiva estable, cónyuge estable, domicilio propio
estable ni descendencia conviviente” [CAL84] muchos jóvenes españoles ya
entrados en los treinta años aun pueden considerarse jóvenes.
Consideraremos a este grupo de implicados como nuestra masa crítica de
audiencia. Usuarios finales del sistema a los que nos referiremos como
comunidad clubber.
Otra masa de audiencia destino que consideraremos primaria, estará
compuesta por lo que llamaremos profesionales del sector. Son implicados
que se interesan por el medio, ya sea de una manera lucrativa o meramente
artística. Formarán parte de este grupo promotores y dueños de salas y
eventos, relaciones públicas, DJ’s (véase Figura 20), productores/creadores,
etc. Analizaremos detenidamente estas líneas base de implicados.
Figura 20
La figura del DJ.
Actualmente, la figura del
DJ va más allá de la mezcla
de una sucesión de discos.
76
CASO DE ESTUDIO
Puede decirse que actualmente la alta tecnología instrumental que permite oír,
sintetizar, grabar o manipular las piezas musicales ha permitido el despegue
de una nueva cultura musical. Los jóvenes tienen mayor acceso al
instrumental musical, lo que ha creado una nueva profesión y cultura donde la
mezcla de piezas musicales, sampleados, deviene todo un arte. Podemos
hacer una distinción que acostumbra a solaparse entre productor y discjockey.
Los discjockey’s (DJ) se han convertido en los principales creadores de la
fiesta sustituyendo en la fama incluso a los interpretes. Su arte consiste en
crear un entramado de piezas musicales diversas y heterogéneas.
Probablemente lo que otorga mayor significado a la creación de los DJ es que
su logro es efímero, del momento, único e irrepetible. Cada DJ crea mezclas
distintas de espíritu mestizo y ecléctico. Este lugar central que ocupa en el
mundo del clubbing, hace que se le considere la pieza más importante en
nuestro sistema, pues es la personalización de la música electrónica. Actúa
tanto de implicado proveedor, como de cliente.
En el mundo de la música electrónica se distorsiona la frontera autor/público:
en primer lugar, constituye la apertura de la creación musical a aquellos que
no son músicos. El uso de las tecnologías y la elección de las herramientas de
composición depende la mayoría de las veces de la accesibilidad y del precio,
como el ejemplo de los sintetizadores analógicos Roland, utilizados por los
pioneros del house en Chicago y Detroit, que eran más baratos que sus
homólogos digitales. Así, cualquiera con un mínimo equipo técnico, un
ordenador con los programas adecuados, un sampler o incluso una grabadora,
puede hacer música desde casa, en el home studio, y encontrar una
estructura independiente para grabar, difundir y programar esta música, o
hacer lo mismo a través de las herramientas informáticas. Esta accesibilidad
de los medios de composición y difusión hace que la creación musical sea
más abierta y favorezca la comunicación entre el mundo de los autores y el del
publico. La disposición de material sonoro en la red, que no sólo suponen la
difusión directa entre el autor y el oyente sino la posibilidad que este ultimo retrabaje la pieza, le añada sonidos o los quite, modifique o recree lo que
escucha, acentúa este elemento. Muchos músicos electrónicos comenzaron
siendo fans, trainspotters de otros.
Por otra parte, la obra no se considera un objeto acabado propiedad del autor.
De la misma manera que las músicas pasadas son reutilizadas y recreadas en
las nuevas composiciones, estas pasan a formar parte del mismo movimiento,
como ponen de relevo los múltiples remixes o su difusión en la red para
favorecer esta dinámica de reutilización.
La implicación que supone la creación y la difusión musical crea estructuras
económicas a su alrededor, como los sellos discográficos y la organización de
fiestas.
Por un lado, el desarrollo de la industria y la difusión de música electrónica de
una manera más artística que económica se promueve gracias a los sellos
discográficos. Por primera vez en la historia de la música, y gracias a la
electrónica, los sellos discográficos son referencia, y a menudo emblema, para
los compradores de música contemporánea. Por esta parte, se descubren
nuevos personajes implicados como los dueños de estos sellos y de tiendas
de discos, distribuidoras y programadores musicales de cadenas de radio.
77
Por el otro lado, la organización de fiestas reúne a todo un abanico de
implicados, entre los que se incluyen los promotores musicales y dueños de
salas, manager’s de clubs y bares, y las relaciones públicas.
Debemos además resaltar la importancia de las relaciones públicas de los
diversos clubs. Su labor de contacto y promoción del local al que representan
facilita el acceso a información valiosa sobre las actuaciones que ofrecerán
(imágenes, biografías, programación). Actúan como puerta de enlace entre la
dirección de un club y la prensa especializada y su relevancia es fundamental
a la hora de conseguir acreditaciones para cubrir un evento. Además, su
trabajo de documentación para con su empresa la convierten no sólo en un
implicado proveedor sino en posible cliente de nuestro proyecto.
Por último, consideraremos a los responsables del diseño, el desarrollo y el
mantenimiento un grupo de implicados más al que nos referiremos con el
nombre de editores. Los cambios que se produzcan en el sitio no deben estar
exclusivamente bajo el control del desarrollador. Posiblemente, una vez
diseñado y desarrollado, el sitio web será mantenido por un grupo de personas
hacia el que migrará el grupo de programación que ya ha desarrollado el
portal.
ACTORES, ROLES Y ORGANIZACIÓN
Previamente habíamos esbozado una pequeña organización en torno a los
implicados que consistía en dividirlos en lo que llamábamos comunidad
clubber, profesionales y editores.
Las motivaciones de los lectores de revistas y sitios web giran en torno a dos
criterios. Por un lado, el ámbito de interés y por otro la posición profesional,
por lo que estos tres tipos de actores pueden compartir un rol común y
genérico como visitantes del sitio. Una audiencia destino cuyas tareas se
corresponden con la navegación, búsqueda de información y participación en
la comunidad.
Además, son los mismos actores quienes desarrollarán un rol temporal y de
extrema importancia para la Web, la colaboración. Una tarea más propia de
la comunidad clubber, aunque llevada a cabo de manera más especializada e
indirecta por los profesionales. Hemos comentado que son una industria muy
activa dedicada a promocionar y difundir los avances en torno a la cultura de
club. En base a este hecho promocional y, en especial, al hecho de que
actuaremos como publicidad a su favor, este grupo colabora de una forma
indirecta, puesto que dejaremos la colaboración directa para la propia
comunidad clubber. Una masa crítica de audiencia objetivo que no son
víctimas ni agentes pasivos del ocio, sino que participan de lo que hay y
construyen nuevos valores, parte de lo cual ocurre en el espacio recreativo,
como es el consumo de las más modernas tecnologías, especialmente
aquellas que tienen que ver con la comunicación. Esto es así porque la
experiencia del ocio no depende únicamente de disponer de tiempo, sino de
actuar en ese tiempo que se supone propio, de hacer algo considerado
creativo, liberador y participar de la industria del ocio.
De estas tareas surgirán activos digitales –contenidos, conocimientos,
información comentada e instantánea...- de interés para nuestro público
objetivo. Estos datos serán manejados por los editores, que podrán actualizar
78
CASO DE ESTUDIO
dinámicamente el sitio a través del sistema, ya que serán usuarios con
privilegios a los que asignaremos la administración de secciones específicas,
como las noticias, artículos, foros... etc.
En resumen, esencialmente serán los profesionales y la comunidad clubber
quienes en su rol de colaboración generen una información que será
transformada en activos digitales por los editores.
PLATAFORMA
Como resulta imposible crear un diseño óptimo para todo el mundo, será
necesario identificar las plataformas de nuestra audiencia destino, con el fin de
evaluarlas minuciosamente. Consideraremos además a un público
relativamente más minoritario, para asegurarnos que el sitio se adecuará,
aunque no tan eficazmente, a plataformas menos implantadas.
En el apéndice ESTADISTICAS podemos encontrar las estadísticas que
hemos utilizado para el análisis de las plataformas objetivo.
Hardware y Sistemas Operativos
Sin duda, aunque Windows PC es la plataforma más común, hay que
considerar que otras plataformas juegan un rol significativo en nuestra
población objetivo. Si bien es cierto que las industrias pueden tener un uso
muy pequeño del Mac, Mac tiene un share de mercado más alto en
producción musical. En cuanto a los usuarios de Unix y Linux, aunque son
relativamente poco comunes, los consideraremos a la hora de evaluar el sitio.
Navegadores
La variación entre los browsers (véase Figura 21) es extraordinariamente difícil
de llevar al día. Si bien la inmensa mayoría usan el Internet Explorer (versión
5.0 y posterior) y no se puede descuidar al porcentaje que utiliza Netscape
Navigator o similares, las variaciones entre versiones de estos browsers exige
una evaluación prolongada.
Por otra parte, un 6 % de los usuarios de la web no tienen JavaScript
habilitado. Si basamos nuestros trabajos exclusivamente con menús de esa
tecnología, no podrán navegar. Sin embargo, si es necesario su uso,
podremos implementar con la versión 1.2.
Monitores
Prácticamente la mitad de la población utilizan una resolución de 800 x 600,
con lo que será conveniente probar a fondo nuestro sitio a esa definición
además de evitar la aparición de scrolls horizontales. Es fundamental también
darle la misma importancia a resoluciones de 1024x768. Así como evaluar
minuciosamente definiciones de colores de 16 bits (65.000 colores).
79
Figura 21
Navegadores más
usados.
Velocidad de conexión
Un tiempo largo de descarga es uno de las quejas de usabilidad más
frecuentes. Las conexiones de alta velocidad más implantadas en nuestra
audiencia son el ADSL y el Cable, pero tendremos especialmente presentes el
uso de modems de 28.8K y 56K, para que nuestro sitio tenga un mínimo
tiempo de espera.
En resumen, la audiencia destino estará formada predominantemente por
usuarios de Windows con resoluciones de pantalla de 800x600 y 1024x768 y
que utilizarán Internet Explorer 5.0 o posterior. Un número inferior de visitantes
utilizará Netscape Navigator y una plataforma Macintosh.
En cuanto a la plataforma de implementación, utilizaremos un backend
fabricado con tecnología Open Source: Apache + MySQL + PHP, del que ya
hemos hablado específicamente en el .
OBJETIVOS DE LA USABILIDAD
A continuación listamos los principales objetivos para determinar que nuestros
usuarios dispondrán de un buen funcionamiento del sistema:
80
CASO DE ESTUDIO
Facilidad de aprendizaje:
•
•
Nuestros usuarios serán capaces de usar la web la primera vez sin ningún
tipo de aprendizaje.
La interfaz ha de ser simple, fácil de aprender y utilizar, con
funcionalidades accesibles y bien definidas.
Consistencia:
•
•
•
•
Primaremos el uso de convenciones de diseño siempre que sea posible.
Los usuarios se verán presionados a recordar cualquier truco especial de
interacción de una visita a otra, dada la cantidad de tiempo que dedicarán
a visitar otros sitios web. Para entonces, los usuarios habrán acumulado un
modelo mental genérico de la forma en que deben funcionar las páginas
web, en base a sus experiencias en los demás sitios.
Utilizaremos y crearemos guías de estilo, que permitirán alcanzar la
consistencia del look & feel del sitio.
En el texto evitaremos los fondos oscuros y los colores llamativos.
También evitaremos subrayar las palabras, porque un usuario las podría
confundir con hipervínculos.
Subrayaremos los vínculos y usaremos el azul como el color para los
vínculos no visitados. Si los vínculos son azules, los usuarios sabrán que
hacer. Excepto en las barras de navegación que utilicen un diseño que
deje más que claro dónde puede hacer clic el usuario.
Flexibilidad:
• Evitaremos requerir escritura cuando un botón de selección o un enlace lo
pueden hacer.
• Evitaremos requerir que el usuario tenga que cambiar constantemente
entre hacer clic y escribir.
Robustez:
• Evitaremos el uso de marcos (frames). Ciertos navegadores no soportan
esta característica. Esta característica también prima la accesibilidad delos
lectores de pantalla.
• No confiaremos en relaciones espaciales para hacer el texto sensible. Por
ejemplo, no referirse a la columna de la izquierda o al botón de abajo.
• Minimizaremos en lo posible el uso de DHTML o Java. Elementos como los
rollovers o pop-ups no estándares son difíciles de interpretar para los
programas lectores de pantalla.
Recuperabilidad:
• Hay que contemplar los errores del usuario. Debe haber una
retroalimentación apropiada del sistema.
• Crearemos páginas de error útiles y que permitan al usuario saber donde
está.
Tiempo de respuesta:
• El tiempo máximo de descarga ha de ser de 10 segundos a la velocidad de
conexión media de los usuarios.
Disminución de la carga cognitiva:
81
•
•
El usuario debería alcanzar cualquier página en el menor número posible
de clics de ratón, a ser posible menos de 3.
Aunque no importa el número de veces que hay que hacer clic en algo si la
opción es mecánica e inequívoca.
Estética:
• Es preciso proporcionar un entorno agradable que contribuya al
entendimiento por parte del usuario de la información presentada.
• En una escala del 1 (muy agradable) al 7 (nada estético), los usuarios
valorarán el sitio al menos con un 4.
Accesibilidad:
• La inclusión de texto ALT en las imágenes es la más antigua y sencilla de
las directrices para hacer los sitios web accesibles a los usuarios
discapacitados, por lo que incluiremos texto ALT en todas las imágenes.
• Evitaremos usar color para hacer distinciones significativas entre los
objetos a causa de la discapacidad visual del color. Eligiremos
combinaciones de color de modo que la lectura no sea difícil, evitaremos al
mínimo el uso de colores rojos y verdes para ayudar a los usuarios
daltónicos (el 8% de los hombres y 0,5% de las mujeres de Europa y
Norteamérica tienen estos problemas visuales).
• Usar alto contraste y fuentes altamente legibles para ayudar a los que
tienen menos capacidad visual.
• Permitiremos al usuario controlar fuentes y el tamaño de las fuentes para
una lectura optimizada, utilizando tamaños relativos.
• Ofreceremos contenido alternativo si las funciones de los scripts, applets y
plugins no son accesibles.
OBJETIVOS DE LA APLICACIÓN
Esta claro que si los usuarios simplemente no pueden hacer algo que
necesitan hacer, entonces el sistema no es usable. Los objetivos de la
aplicación dependen directamente del rol del usuario y sus accesos.
Revelamos a continuación una lista de los requisitos funcionales para el
visitante del sitio, resultado de una revisión exhaustiva de las fases anteriores:
•
•
•
•
•
•
•
82
No utilizaremos páginas de enrutamiento o intermedias. Una página de
enrutamiento es una página que ven los usuarios antes de acceder a la
verdadera página de inicio. Suponen un obstáculo inicial que los usuarios
tienen que superar, así que no cansaremos al usuario y agilizaremos la
descarga prescindiendo de ella.
El sistema debe actualizarse dinámicamente y gestionarse a través a
través de la web.
Aplicación de consulta y búsqueda de eventos mediante una agenda o
calendario.
Ofrecer un foro de discusión para la comunidad.
Proporcionaremos una opción de búsqueda, habilitada en la parte superior
de la página de inicio.
Las búsquedas que resulten vacías incluirán sugerencias.
Una sección del sitio ofrecerá enlaces o vínculos externos a sitios web que
estén estrechamente relacionados con el contenido de la página y pueda
ser de interés a la comunidad.
CASO DE ESTUDIO
•
•
•
•
El sitio enviará un e-mail con un mensaje de bienvenida a los usuarios
cuando se registran.
El sistema tendrá registrado todo el material.
Sistemas de revisión o crítica de los artículos.
Incluiremos información de contacto y normas de privacidad.
Por otro lado, el rol de editor requiere una interfaz administrativa para
actualizar el contenido del sitio. Este sistema de gestión de contenidos debe
permitir a aquellas personas que no sean expertas en el desarrollo web
actualizar y manejar el sitio a través de la Red. Esta interfaz debe cumplir las
siguientes especificaciones funcionales:
•
•
•
•
•
•
Administración de gestión de contenido basada en Web;
Administración gráfica;
Facultad para añadir, modificar y borrar contenidos del sitio.
Mantenimiento y gestión de la agenda de eventos: añadir, modificar y
borrar las programaciones y los eventos que se producen diariamente,
semanalmente, mensual e incluso anualmente.
Facultad para administrar el foro.
Capacidad para gestionar la sección de enlaces para mantenerla
actualizada, que los enlaces sean de calidad y que no se conviertan en
enlaces muertos.
Por último, determinaremos los requisitos no funcionales del sitio (restricciones
del sistema y para su desarrollo):
•
•
•
•
•
•
El lenguaje de programación será PHP + XHTML.
Soporte de base de datos MySQL.
En principio, el sitio no tiene intención de cruzar los límites nacionales. La
audiencia es española, así que los contenidos serán realizados en
castellano.
Diez segundos es el tiempo máximo que pacientemente esperarán los
usuarios mientras se descarga una página Web; más allá de este tiempo
se suele perder el interés.
La anchura de la página estará optimizada para 770 píxeles, pero con un
diseño líquido que funcione desde 620 hasta 1024 píxeles. La longitud no
tendrá más de 3 pantallas completas (actualmente de 1000 a 1600
píxeles).
Al menos el 50 por ciento de los usuarios registrados volverán a visitar la
web al menos un par de veces al mes.
ENCUESTAS, ESCENARIOS Y ANÁLISIS COMPETITIVO
Nos ayudaremos de encuestas, escenarios y un análisis competitivo para
tener una mejor idea del verdadero perfil de nuestro usuario, sus necesidades
y preferencias.
Escenarios
El enfoque persona y la creación de escenarios son técnicas que facilitan
ponerse en el lugar del usuario y diseñar la web adecuadamente para este. Un
escenario típico incluye un perfil del usuario (llamado persona), un análisis de
las tareas que realiza y una foto del usuario en su entorno de uso del sitio.
83
Realizaremos tres escenarios para cubrir los usuarios primarios y los
validaremos pidiendo a los usuarios que los representan que los revisen. En el
apéndice ESCENARIOS podemos encontrar el resultado de la creación de los
escenarios.
Un análisis competitivo es un camino fácil y rápido para establecer un punto
de partida en el diseño. Desde el punto de vista de la usabilidad, buscaremos
buenas ideas de interfaz de usuario para aplicarlas a nuestro diseño.
En el apéndice ANÁLISIS COMPETITIVO podemos encontrar un análisis
competitivo de tres sitios web representativos de la escena musical
electrónica, cuyo audiencia es nuestro mismo objetivo y cuyas metas de
usuario son similares.
Encuestas
En el apéndice CUESTIONARIO podemos encontrar la plantilla de encuesta
que hemos utilizado como uno de los métodos para conocer a nuestra
audiencia. Este es uno de los métodos más familiares para los usuarios, ya
que la mayoría ha respondido alguna vez a alguna encuesta.
Fijaremos un mínimo de 10 encuestas devueltas.
84
CASO DE ESTUDIO
6
CASO DE ESTUDIO
DISEÑO CONCEPTUAL
ANÁLISIS DE TAREAS
•
Casos de Uso
•
•
•
•
•
Revisión de material previo
Evaluación de nuestro contenido.
Crear y evaluar nuestra estructura esencial
Añadir atajos, vínculos redundantes, y páginas de apoyo
Desarrollo y evaluación de la barra de navegación y señales de orientación
(orientation cues)
Mantenimiento y expansión
ARQUITECTURA DE LA INFORMACIÓN
•
ELEMENTOS FUNDAMENTALES DE DISEÑO DE LA PÁGINA
Una vez establecidos los requisitos iniciales de nuestro sitio web,
analizaremos y optimizaremos los procedimientos que los usuarios seguirán al
usar nuestra web. El diseño conceptual aprovecha los requisitos establecidos
en la etapa anterior para, primero, establecer la tareas que se pueden realizar
en el sitio y, entonces, desarrollar la arquitectura de la información.
Con el análisis de tareas vamos a especificar como se utilizarán las
funcionalidades y la información encontradas en el análisis de requisitos.
Además usaremos el análisis de tareas como una herramienta de diseño al
codificar los procedimientos del usuario.
Por otra parte, la arquitectura de la información comprenderá los sistemas de
organización y estructuración de los contenidos, los sistemas de rotulado o
etiquetado de dichos contenidos, y los sistemas de recuperación de
información y navegación que proporcionará nuestro sitio web.
Por último, definiremos el estilo del sitio mediante un análisis y consideración
de los elementos principales de diseño de páginas web, que seguirán unos
principios heurísticos de técnicas de buen diseño.
ANÁLISIS DE TAREAS
Una vez determinados los requisitos iniciales, procederemos a analizar y
optimizar los procedimientos que seguirán nuestros usuarios mientras usan
nuestro sitio web. Para ello realizaremos un Análisis de los Casos de Uso (use
case analysis).
Casos de Uso
Describiremos en primera instancia las actividades de nuestros actores
mientras utilizan el sistema, desarrollando escenarios típicos dependiendo de
las metas que se quieran alcanzar:
Escenario Agenda.
Figura 22
Diagrama del Escenario
Agenda.
BUSCA CONTACTO
CON EL CLUB
Muestra los actores
involucrados en el proceso
de obtención de contenido
para la agenda de eventos.
PIDE PROGRAMACIÓN
Editor
OBTIENE
CONTACTO
OBTIENE
PROGRAMACIÓN
ENTREGA PROGRAMA
Profesional
Caso de Uso: “Gestionar los Eventos”
Descripción: El editor procesa la información que ha recibido de la
programación de un club
Actores: Editor, Sistema
Capítulo 6: Diseño conceptual
87
Caso de uso adicional necesitado: “Login” y “Búsqueda de eventos en la
agenda”
1. El editor se identifica como gestor de contenidos (sigue el caso de uso
“Login”).
2. El sistema muestra el panel de administración.
3. El editor identifica el vínculo de la sección de administración de la
agenda.
4. El editor hace clic en ese vínculo.
5. El sistema muestra la página agenda con habilitación para
administración.
6. El editor selecciona el día del evento (sigue el caso de uso “Búsqueda
de eventos en la agenda”.
7. El editor identifica la zona donde añadir el evento y hace clic en el
vínculo.
8. El sistema muestra un formulario de entrada de datos.
9. El editor rellena el formulario de entrada y presiona el botón de
confirmación.
10. El sistema guarda los datos y muestra la información como
presentación.
11. El editor verifica la presentación.
Alternativa 1: Evento ya introducido
En el paso 10 el sistema encuentra información ya introducida.
10a. El sistema muestra que el evento ya existe.
10b. El sistema muestra las opciones de editar y/o borrar el evento.
10c. El editor elige la opción de editar y vuelve al paso 8.
Caso de uso: “Búsqueda de eventos desde página de inicio”
Descripción: El usuario busca que eventos hay un cierto día desde la
página de inicio
Actores: Usuario, Sistema
Caso de uso adicional necesitado: Caso de uso “Búsqueda de eventos en
la agenda”
1.
2.
3.
4.
5.
88
El usuario localiza el calendario en la página de inicio.
El usuario selecciona la zona regional en la que está interesado.
El usuario elige el día que le interesa en el calendario.
El sistema le muestra la lista de eventos seleccionados.
El usuario puede seguir buscando (seguiría el caso de uso “Búsqueda
de eventos en la agenda”).
CASO DE ESTUDIO
Caso de uso: “Búsqueda de eventos en la agenda”
página de agenda
1.
2.
3.
4.
5.
6.
7.
El usuario localiza la agenda y sigue el vínculo.
El sistema muestra un calendario.
El usuario se dirige al día que le interesa.
El sistema le muestra las zonas.
El usuario elige su zona.
El sistema le muestra los eventos.
El usuario puede seguir buscando por días en la misma zona.
Optimizaremos este último procedimiento, debido a su frecuencia de uso y la
posibilidad de reducir los pasos necesarios para alcanzar el objetivo:
Caso de uso: “Búsqueda de eventos en la agenda”
página de agenda
1.
2.
3.
4.
5.
6.
El usuario localiza la agenda y sigue el vínculo.
El sistema muestra un calendario y las zonas.
El usuario elige su zona.
El usuario se dirige al día que le interesa.
El sistema le muestra los eventos.
El usuario puede seguir buscando por días en la misma zona.
Escenario Reportajes.
Figura 23
Reportajes.
Muestra
los
actores
de creación y obtención de
un reportaje para el sitio
web.
Editor
PIDE COLABORACION
HACEN
REPORTAJE
CONFIRMACION
ENTREGA REPORTAJE
Colaboradores
PIDE ACREDITACION
ACREDITA
EN PUERTA
CONFIRMA ACREDITACION
Profesional
89
Caso de Uso: “Gestionar los reportajes”
Descripción: El editor introduce el artículo de un evento junto con el
reportaje fotográfico
Caso de uso adicional necesitado: “Login”
“Login”).
3. El editor identifica el vínculo de la sección de administración de los
reportajes.
5. El sistema muestra la página de reportajes con habilitación para
administración.
6. El editor selecciona un reportaje a editar o identifica el vínculo “añadir
nuevo reportaje”.
7. El editor hace clic en el vínculo de edición o añadir.
confirmación.
presentación.
Alternativa 1: El evento produce errores
En el paso 10 el sistema encuentra errores en la información introducida.
10a. El sistema muestra el error producido.
10b. El sistema muestra las opciones de editar y/o borrar el evento.
Caso de uso: “Búsqueda de reportajes”
Descripción: El usuario elige ver un reportaje en el que está interesado
1.
2.
3.
4.
5.
6.
El usuario localiza la página de reportajes.
El usuario hace clic en ese vínculo.
El sistema muestra un índice paginado de reportajes realizados.
El usuario hace clic en el reportaje en el que está interesado.
El sistema le muestra el artículo con unas fotografías de muestra.
El usuario puede acceder al resto de fotografías siguiendo el enlace.
Escenario General.
90
CASO DE ESTUDIO
Figura 24
General.
Muestra los actores
de creación y obtención de
activos generales
(información de artistas,
clubs, listas, etc.) para el
sitio web.
Editores
CREAN
ACTIVOS
PETICION DE ACTIVOS
CONFIRMACIONES
ENTREGA ACTIVOS
Colaboradores
PETICION DE ACTIVOS
PRODUCEN
ACTIVOS
CONFIRMACIONES
ENTREGA ACTIVOS
Profesionales
Caso de Uso: “Gestionar activos”
Descripción: El editor procesa la información que ha recibido y la introduce
en la página correspondiente al activo
Caso de uso adicional necesitado: “Login”
“Login”).
3. El editor identifica el vínculo de la sección a la que pertenece el activo.
5. El sistema muestra la página del activo correspondiente con
habilitación para administración.
6. El editor identifica las opciones de gestión en la página.
7. El editor selecciona la opción en la que está interesado.
confirmación.
presentación.
Alternativa 1: Activo ya introducido
En el paso 10 el sistema encuentra información ya introducida.
10a. El sistema muestra que el activo ya existe.
10b. El sistema muestra las opciones de editar y/o borrar el activo.
Caso de uso: “Selección general de contenido desde página de inicio”
Descripción: El usuario selecciona contenido de la página de inicio
91
Caso de uso adicional necesitado: “Acceder a los contenidos”
1. El usuario localiza el enlace que cree puede llevarle a la información
que le interesa.
2. El usuario hace clic en ese vínculo.
3. El sistema muestra la información o un índice de posibles enlaces a la
información.
4. El usuario consume la información o sigue vínculos.
5. El usuario debería llegar a la información final en menos de 3 pasos
siempre.
6. El usuario puede seguir buscando contenido (seguiría el caso de uso
“Acceder a los contenidos”).
Caso de uso: “Acceder a los contenidos”
Descripción: El usuario accede a un contenido particular desde la página
del activo en cuestión
1.
2.
3.
4.
5.
6.
El usuario localiza el activo y hace clic en el vínculo.
El sistema muestra la página del activo correspondiente.
El usuario identifica la navegación de esta sección.
El usuario selecciona el activo en el que está interesado.
El sistema muestra el contenido seleccionado.
El usuario consume la información.
Caso de uso: “Acceder a los contenidos”
Descripción: El usuario accede a un contenido particular mediante
búsqueda de palabra clave
1.
2.
3.
4.
5.
El usuario localiza el campo de búsqueda.
El usuario introduce la palabra clave que desea buscar en el campo.
El usuario pulsa el botón Buscar.
El sistema muestra una pagina de resultados.
El usuario verifica los resultados y sigue el enlace que desea.
Alternativa 1: Palabra clave incorrecta o resultados no satisfactorios
En el paso 5 el usuario se da cuenta que los resultados no coinciden con lo
que busca.
5a. El usuario no encuentra la información.
5b. El usuario localiza el campo de búsqueda y vuelve al paso 2.
92
CASO DE ESTUDIO
Otros casos de uso.
Caso de Uso: “Suscripción a una lista de correo”
Descripción: El usuario se suscribe a una lista de correo mediante la
introducción de su e-mail
1. El usuario localiza en vínculo a suscripciones.
2. El sistema muestra posibles listas o boletines a los que puede
suscribirse (flyers, lista de correo, información, colaboración).
3. El usuario puede o no hacer clic en el enlace con información sobre la
lista.
4. El usuario localiza el campo donde introducir su dirección de correo
electrónica.
5. El usuario introduce su e-mail o rellena el formulario.
6. El usuario pulsa el botón de darse de alta o enviar.
7. El sistema muestra la confirmación y agradecimiento.
Alternativa 1: Datos introducidos incorrectamente
En el paso 6 el sistema avisa que ha introducido los datos incorrectamente.
6a. El usuario ve los errores que ha cometido.
6b. El usuario localiza los campos a corregir y vuelve al paso 4.
Caso de uso: “Acceso al Foro de la Comunidad”
Descripción: El usuario accede al Foro para opinar y acceder a la
comunidad
Caso de uso adicional necesitado: “Introducir mensajes”
1.
2.
3.
4.
5.
6.
7.
El usuario localiza el enlace al foro y hace clic en él.
El sistema le muestra los grupos de debates posibles.
El usuario localiza el que le interesa y accede.
El sistema muestra la lista de temas en el foro.
El usuario localiza un tema y accede.
El sistema muestra los mensajes de ese tema.
El usuario examina los mensajes y responde (sigue el caso de uso
“Introducir mensajes”)
Alternativa 1: El usuario quiere introducir un tema
En el paso 5 el usuario va a crear un nuevo tema de debate
5a. El usuario en vez de acceder a un tema, identifica el enlace para crear
un nuevo tema (sigue el caso de uso “Introducir mensajes”).
93
Caso de uso: “Introducir mensajes”
Descripción: El usuario introduce un nuevo mensaje o responde a un
mensaje en el foro
1.
2.
3.
4.
5.
6.
El usuario localiza el vínculo hacia la introducción del mensaje.
El usuario hace clic en ese vínculo.
El sistema le muestra un formulario para introducir el mensaje.
El usuario rellena el formulario o mensaje.
El usuario presiona el botón de publicación del mensaje.
El sistema le muestra una presentación del mensaje.
Caso de uso: “Login”
Descripción: El editor o usuario con privilegios se identifica como tal
1. El editor identifica el acceso a la zona de administración.
2. El editor hace clic en el vínculo de administración.
3. El sistema muestra un cuadro de diálogo para introducir el nombre de
usuario y el password.
4. El editor localiza el campo de entrada de nombre de usuario.
5. El editor introduce su nombre de usuario.
6. El editor localiza el campo de entrada de password.
7. El editor introduce el password.
8. El editor localiza el botón aceptar y lo pulsa.
Alternativa 1: Login incorrecto
En el paso 9 el sistema no encuentra al usuario
9a. El sistema muestra un aviso de login incorrecto.
9b. El usuario pulsa aceptar y se vuelve al paso 3.
ARQUITECTURA DE LA INFORMACIÓN
La arquitectura de información hace referencia a la estructura u organización
de nuestro sitio web, especialmente en como las diferentes páginas del sitio se
relacionan entre sí. En esta etapa involucraremos puntos tales como el
análisis y la planificación del contenido, la organización de las páginas, el
etiquetado, técnicas de búsqueda y el diseño de la navegación.
Recogeremos todo el material y la información disponible y lo organizaremos
en una estructura que ayude al usuario a navegar eficazmente.
Presentaremos los resultados en un diagrama o un bosquejo del sitio que
usaremos para el desarrollo de la web y detallaremos las especificaciones del
contenido, la navegación y el mantenimiento del sitio.
94
CASO DE ESTUDIO
Revisión de material previo
De la revisión de los resultados del análisis de requisitos, los sitios de los
competidores y las tareas, surge una lista completa de los contenidos
potenciales, etiquetas candidatas y esquemas posibles de organización:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Agenda de eventos, para que los usuarios puedan consultar la
programación de una zona en un día concreto;
Búsquedas, en todo nuestro sitio por introducción de palabra clave;
Información de los artistas, sus biografías;
Base de datos de todos los Clubs del estado;
Listas de éxitos o charts de los DJ’s;
Entrevistas con los artistas;
Críticas y comentarios de discos y CD’s;
Noticias actualizadas sobre la escena electrónica;
Artículos o reportajes con fotografías;
Foros de discusión para que la comunidad clubber pueda encontrarse y
debatir temas;
Enlaces o vínculos a otros sitios interesantes para la comunidad;
Artículos u opinión;
Chat para que la comunidad puede relacionarse en tiempo real;
Archivos de audio y video para descargar;
Sesiones que puedan escuchar o descargar;
Reportajes o especiales sobre temas de producción musical;
Reportajes sobre eventos especiales (festivales, conciertos, ...);
Los Flyers mejor diseñados;
Boletines por correo electrónico;
Votaciones en línea;
Anuncios;
Información de contacto y de colaboración.
Evaluación de nuestro contenido.
Crearemos un inventario del contenido, que especifica la lista completa de
contenido para el sitio y que deber ser desarrollado.
•
•
•
•
•
Agenda de eventos: esta aplicación permitirá a los usuarios consultar la
programación de los clubs y eventos especiales que tengan lugar un cierto
día, elegido por el propio usuario. Dependiendo de la cantidad de
resultados que se generen, se mostrarán todos los eventos o solamente
aquellos que pertenezcan a una determinada zona. También podrá
consultarse la programación disponible (generalmente mensual) de un
determinado club o consultar las próximas actuaciones de un determinado
artista.
Motor de búsqueda: mediante la introducción de una palabra clave, el
usuario podrá obtener un conjunto de resultados dentro del contenido del
sitio web que se ajusten a su búsqueda. También permitirá refinar la
búsqueda con opciones avanzadas una vez mostrados los resultados.
Biografías de los artistas: información relacionada con la vida de los
artistas, como producciones, actuaciones, nacionalidad, fotografías, etc.
Lista de clubs: una base de datos con todos los clubs, bares y discotecas
de los que tenemos constancia que ofrecen música electrónica a lo largo
del territorio español.
Listas o charts de los DJ’s: los mejores discos que a juicio de los DJ’s han
sido producidos durante un determinado mes.
95
•
•
•
•
•
•
•
•
•
•
•
•
Entrevistas con los artistas.
Críticas de discos: comentarios y críticas de los últimos discos lanzados al
mercado.
Noticias: últimas noticias que se produzcan dentro de la escena
electrónica.
Reportajes fotográficos: artículos en los que se reseña un determinado
evento al que asistieron nuestros colaboradores con una galería de fotos
tomadas durante ese evento.
Artículos, especiales, cursos, opiniones... cualquier material que verse
sobre temas que puedan interesar a la comunidad clubber.
Enlaces o vínculos hacia otros sitios web que contengan material de
interés para nuestra audiencia.
Foros con los que facilitamos la participación activa de los usuarios
registrados o no registrados en una discusión on-line.
Boletín de suscripción para que nuestros usuarios reciban información
periódica sobre la actualización de la página y noticias.
Votaciones en línea: encuestas que ayudan a conocer a nuestra audiencia.
Cita: incorporación de una cita o frase célebre pronunciada por alguien
referente al mundo de la música electrónica.
Información de contacto, normas de privacidad y ayudas: opciones
habituales de los sitios web que favorecen la confianza del usuario en
nuestro proyecto.
Información de colaboración: para que cualquiera que quiera colaborar con
nosotros sepa como hacerlo con facilidad y seguridad.
Este contenido debe ser actualizado frecuentemente, por lo que hemos
añadido a cada elemento de contenido su correspondiente sistema de gestión.
•
•
•
•
•
•
•
•
•
Gestión y administración de la agenda de eventos: permitiremos añadir,
modificar y borrar la información referente a la agenda.
Gestión y administración de artistas: permitiremos añadir, modificar y
borrar tanto artistas, como sus biografías, entrevistas y sus charts.
Gestión y administración de clubs: podremos gestionar la base de datos de
clubs.
Añadir y editar críticas de discos, noticias, artículos especiales, citas, etc.
Crear nuevas encuestas y votaciones.
Administración del foro.
Reportajes fotográficos: artículos en los que se reseña un determinado
evento al que asistieron nuestros colaboradores con una galería de fotos
tomadas durante ese evento.
Boletín de suscripción para que nuestros usuarios reciban información
periódica sobre la actualización de la página y noticias.
Información de colaboración: para que cualquiera que quiera colaborar con
nosotros sepa como hacerlo con facilidad y seguridad.
Crear y evaluar nuestra estructura esencial
Basándonos en la estructura de la información, las tareas, los tipos de usuario
y técnicas de evaluación con el usuario, crearemos una organización de
nuestro contenido, decidiendo su agrupación y mostrando un esquema de
organización.
96
CASO DE ESTUDIO
Haremos uso de las dos aproximaciones principales para desarrollar una
arquitectura: un diseño de abajo a arriba (bottom-up design) y un diseño de
arriba abajo (top-down design).
Desde una aproximación de arriba a abajo, consideraremos que la información
que podemos situar en un primer nivel podría venir relacionada con las tareas
más frecuentes, que serían la agenda y los reportajes con fotografías, junto
con las noticias y el foro, por su prioridad de actualización. Añadiremos en
este nivel la información relativa a los artistas y los clubes.
Ahora bien, desde una aproximación de abajo a arriba nos preguntamos por
qué materiales disponemos para construir el sitio. Disponemos de bases de
datos con biografías de los artistas, bases de datos de artistas y clubes, la
información de sus programaciones, fotografías de reportajes, entrevistas,
listas de discos y críticas, etc.
Card sorting
Debido a la multitud de alternativas para organizar los contenidos, usaremos la
técnica de open card sort con los usuarios.
Figura 25
Biografias
Hoja de etiquetas usadas
en la prueba de cardCharts
sorting.
Eventos
•
•
•
Artistas
DJ’s
Clubs
Listas
DJ Charts
Listas DJ
Entrevistas
Agenda
Fiestas
Calendario
Criticas
Discos
Noticias
Reportajes
Articulos
Fotos
Foros
Comunidad
Debates
Enlaces
Vinculos
Sitios
Internet
Opinión
Sonido
Audio
Sesiones
Sets
Especiales
Producción
Creación
Flyers
Postales
Festivales
Clips
Tecnología
Links
Contacto
Colabora
Clubbers
Sellos
Información legal
Mapa del sitio
Ayuda
Quienes somos
Nosotros
Privacidad
Reseñas
Búsqueda
Composición
Top 10
Créditos
Lista de Correo
Boletín
Conciertos
Editorial
Novedades
Etiquetamos las cartas. Hemos etiquetado las cartas sin sugerir ningún tipo
de categoría. En la Figura 25 puede verse esta lista.
Damos instrucciones a los usuarios. ”Organiza estas cartas en grupos.
Recuerda que no hay respuesta correcta, así que elije la agrupación que
tenga más sentido para ti. Después de la división, etiqueta cada grupo.”
Dejamos que los usuarios agrupen los elementos y etiqueten los grupos.
Tras repetir el proceso con cinco usuarios más, la realización de esta prueba
(véase Figura 26) nos permite rechazar ciertas etiquetas (debido a la
97
confusión que producen en los usuarios) y detectar los esquemas dominantes
de organización. Un resumen de las conclusiones extraídas sería el siguiente:
Figura 26
Método de card sorting.
•
•
•
•
Descartamos las siguientes etiquetas: créditos, editorial, postales, sitios,
reseñas, tecnología, sets, vínculos, clips, creación y listas.
No se relaciona boletín con lista de correo.
Noticias y Novedades crean la expectativa de que pueden añadirse a
cualquier grupo.
Grupos diferenciados y conexiones:
Información sobre
la página
• Quienes somos
•
• Privacidad
•
• Nosotros
•
• Contacto
• Links
• Enlaces
• Información legal
• Mapa del sitio
Agenda
Comunidad
•
Agenda
Calendario •
•
Eventos
•
•
Música
•
•
•
•
Comunidad
Foros
Opinión
Debates
Clubbers
DJ’s
Discos
Sesiones
Sellos
Críticas
Relacionado con:
•
•
•
•
•
•
•
•
Ayuda
Búsqueda
Internet
Boletín
Colabora
Reportajes
•
•
•
Reportajes
Fotos
Articulos
•
•
•
Festivales •
Fiestas
•
Conciertos •
•
•
•
•
Flyers
Ayuda
Búsqueda
Internet
Boletín
Colabora
Críticas
Links
Ayuda Búsqueda
Links
Enlaces
Internet
•
•
Ayuda
Búsqueda
Relacionado con:
98
CASO DE ESTUDIO
Música
•
•
•
•
Discos
Sesiones
Sellos
Críticas
•
•
•
•
•
•
•
•
•
•
•
•
•
Artistas
•
•
Sellos
Discos
Producción
Sesiones
Entrevistas
Biografías
Listas Dj
DJ Charts
Top 10
DJ’s
Resto e
inconexas
Audio
Colabora
Especiales
Producción
•
•
•
•
•
•
Flyers
Clubs
Criticas
Discos
Sonido
Composición
Tras revisar los resultados, esbozaremos un esquema dominante de
organización:
•
Agenda
Festivales
Fiestas
Conciertos
Calendario
Eventos
Clubs
Contacta
Quienes somos?
Privacidad
Información Legal
Contacto
Mapa del Sitio
Nosotros
Comunidad
Debates
Opinión
Clubbers
Foros
Criticas
Enlaces
Links
Clubs
Tiendas de discos
Bares musicales
Sellos
DJ’s
Top 10
Listas DJ
DJ Charts
Artistas
Biografías
Entrevistas
Sesiones
Artículos
Fotos
Reportajes
Discos
Sellos
Criticas
Multimedia
Sonido
Audio
Composición
Producción
-
•
•
•
•
•
•
•
•
99
Sesiones
Búsqueda
Ayuda
Colabora
Noticias - Novedades
Listas de correo – Boletín
Flyers
-
•
•
•
•
•
Finalmente nos dispondremos a representar los resultados de todo este
proceso tras una primera evaluación con los usuarios, que representa nuestra
arquitectura de información. El resultado (véase Figura 27) es un esquema
con estructura ancha (en vez de profunda):
Página principal de
CulturaNocturna.com
Figura 27
Representación de la
arquitectura.
NIVEL 1
NIVEL 2
Agenda
Biografías
Artistas
Entrevistas
Clubs
DJ Charts
Noticias
Reportajes
Artículos
Especiales
Discos
Fotos
Enlaces
Foros
Diagrama en árbol con
disposición horizontal de
la arquitectura de la
información de
culturanocturna.com
NIVEL 3
Añadir atajos, vínculos redundantes, y páginas de apoyo
Revisaremos las tareas primarias y procedimientos para “mapearlos” en la
organización del sitio, intentando optimizar la arquitectura para que sea eficaz
en las tareas de más alta prioridad y para los tipos de usuario primarios.
Al esquema anterior le añadiremos atajos, vínculos redundantes, herramientas
de ayuda, mapas del sitio, búsqueda, etc. Así diseñaremos una serie de
páginas de apoyo (support pages) para facilitar las tareas a nuestros usuarios
y que puedan hacer un uso eficiente de nuestro contenido.
•
•
100
Páginas de encaminamiento. Ayudan a que la gente navegue hasta sus
destinos. Incluyen la página de inicio y mapas del sitio. La página de inicio
es la página más importante de cualquier sitio web, y se ve mucho más
que cualquier otra página. Evidentemente, los usuarios no acceden
siempre a un sitio web a través de su página de inicio. Sin embargo, una
de las primeras acciones que llevarán a cabo estos usuarios al llegar a un
nuevo sitio web es ir a su página de inicio. Por esta razón es preciso
dedicarle una atención especial. Deberemos crear un diseño de página de
inicio que se ajuste estrechamente a las directrices de usabilidad.
Páginas de ayuda. páginas de referencia, FAQs, soporte al cliente, páginas
de contacto.
CASO DE ESTUDIO
•
Páginas de Error. Diseñaremos para el sitio completo páginas del estilo
file-not-found. Estas páginas no pueden mantener la estructura del sitio
web ya que la información presentada es totalmente diferente. Sin
embargo, es importante que se identifiquen rápidamente con el sitio que
las ha generado. Algo que facilitará la recuperación del error, un aspecto
fundamental de la usabilidad.
AGENDA
Figura 28
EVENTOS
Diagrama en árbol
vertical de la arquitectura
de la información de
culturanocturna.com
ARTISTAS
BIOGRAFIAS
ARTISTA
ENTREVISTAS
ARTISTA
DJ CHARTS
ARTISTA
CLUBS
CLUBS
NOTICIAS
NOTICIAS
ARTICULOS
REPORTAJES
FOTOS
INICIO
ESPECIALES
ESPECIALES
DISCOS
DISCOS
FOTOS
CITA
Artistas
ENCUESTA
Clubs
ENLACES
Discos
FORO
TEMAS
MENSAJES
BÚSQUEDA
BOLETÍN
COLABORA
QUIENES SOMOS
CONTACTA CON NOSTROS
MAPA DEL SITIO
NORMAS DE PRIVACIDAD
101
Secuencia paso a paso
Página estática
Figura 29
Enlace hacia el exterior
Página dinámica
Leyenda del diagrama de
la Figura 28.
Atajo
Propuesta a añadir
Listado de páginas similares
Contenido dentro de una página
En el apéndice REVISIÓN DE LA ARQUITECTURA, encontramos una plantilla
con la que evaluaremos la arquitectura del sitio web.
Desarrollo y evaluación de la barra de navegación y señales de
orientación (orientation cues)
Existen cuatro esquemas de navegación distintos que parece que tienen una
buena usabilidad y que son muy comunes en la Web:
•
•
•
•
Raíl de navegación a la izquierda. Este diseño fue popularizado por CNET,
y se conoció como el diseño de la “fiebre amarilla” (una banda amarilla que
discurre por la parte izquierda de todas sus páginas).
Fichas. Originalmente las popularizó Amazon.com.
Vínculos en la parte superior.
Categorías en la parte central de la página. Popularizado (y todavía
utilizado) por Yahoo!.
Optaremos por una fila de vínculos en la parte superior. Situaremos (primacía
y recencia) las opciones más importantes en los primeros puestos y
posiblemente en los últimos puestos de la lista.
INICIO | AGENDA | ARTISTAS | CLUBS | NOTICIAS | REPORTAJES | ESPECIALES | DISCOS | ENLACES | FORO
Combinaremos esta navegación con un raíl de navegación a la izquierda.
Especialmente en las páginas de administración del sitio web, que seguirán un
formato de lista de opciones que se expanden por cada categoría
seleccionada.
Inicio
Citas
Recomendados
Artistas
Biografías
Añadir biografía
Entrevistas
DJ charts
102
CASO DE ESTUDIO
Navegación en el pie de página
No existe acuerdo sobre qué incluir en esta lista de navegación. Algunos sitios
enumeran las áreas principales del sitio con el fin de ofrecer a los usuarios una
segunda oportunidad para usar estos vínculos si los omitieron al desplazarse
hacia abajo por la página. Otros sitios adoptan la solución contraria y reservan
la parte inferior de la página para otros vínculos, llamados notas a pie de
página, como el copyright y la información de contacto.
Debido a la falta de un estándar, los usuarios no saben lo que se van a
encontrar en el pie de página. Dado que la navegación en la parte inferior de
la página es muy poco apropiada, no la utilizaremos para las opciones de
navegación importantes. Además, un principio general de usabilidad es de
minimizar la duplicación: si la misma opción aparece dos veces, los usuarios
se preguntarán si los dos vínculos son distintos o idénticos.
En conclusión, utilizaremos el pie de página para la navegación tipo nota a pie
de página y que no repita los segmentos principales de la arquitectura de la
información del sitio. La lista de vínculos en esta zona deberá tener un máximo
de siete vínculos y las palabras elegidas permitirán colocar toda la lista en una
sola línea de texto cuando se visualice en el tamaño de ventana más normal.
Mapa del sitio
Los mapas de sitios web pretenden dar una visión de conjunto al usuario
permitiéndole, a la vez, dirigirse a las páginas de su interés. Acostumbran a
ser textuales, como índices de contenido que presentan la estructura del sitio
como un listado, mejor o peor organizado visualmente, de enlaces a las
páginas. A pesar de su abundancia, creemos que deberían catalogarse más
bién como índices o tablas de contenido que como mapas del sitio web,
puesto que nadie llamaría mapa del libro al sumario. De todas formas, no está
claro actualmente si los mapas del sitio realmente ayudan a los usuarios a
navegar, lo incluiremos solamente cuando hayamos dedicado recursos
sustanciales a su diseño y lo evaluaremos extensivamente con usuarios
reales.
Quiénes somos
Proporcionar información sobre la organización es una de las finalidades
básicas de cualquier sitio web, es uno de los mejores elementos que se
pueden añadir para generar confianza. Esta información puede no figurar
entre las más útiles o las más solicitadas, pero tiene que estar ahí. Incluiremos
un vínculo Quiénes somos.
Información de contacto
Incluiremos un vínculo contacta con nosotros, para que puedan localizarnos.
Normas de privacidad
Aunque muchos usuarios no leerán estas normas en condiciones normales,
ponerlas a su disposición en un lugar destacado constituye una forma de
instarles a que confíen en el sitio (unas normas explícitas transmiten que la
privacidad se toma en serio).
Incluiremos un vínculo con las normas de privacidad en la página de inicio, ya
que solicitamos información a los usuario. Es preciso incluir un vínculo en
cada ubicación en la que se pida información a los usuarios (por ejemplo, al
solicitar las direcciones de correo electrónico para suscripciones a boletines).
103
Ayuda
El uso de la ayuda no está todavía lo suficientemente generalizado en la Web
como para que los usuarios esperen encontrarla sin falta. Además, los
usuarios suelen evitar la ayuda incluso cuando se ofrece, debido a dudosas
experiencias previas en otros sitios web. Por tanto, no incluiremos la ayuda
sólo por el hecho de que el sitio disponga de esta opción.
Finalmente, la navegación a pide de página queda como sigue:
Quienes somos – Contacta con nostros – Suscríbete – Aviso legal – Mapa del sitio
Navegación con barras de progreso
Para páginas que caigan dentro de una secuencia lineal, implementaremos
una lista de páginas con enlaces a anterior y siguiente, del estilo:
1 2 3 4 | Anterior Siguiente
Navegación constante
El término navegación constante (o global) describe el conjunto de los
elementos de navegación que aparecen en todas las páginas del sitio. La
navegación constante de culturanocturna.com (véase Figura 30) queda como
sigue::
Figura 30
Navegación constante
de
La página de inicio
A diferencia de las páginas de menor nivel, la página principal tiene que atraer
a cualquiera que visite el sitio, sin importar sus distintos intereses. La pequeña
cantidad del espacio visible por encima del pliegue (término heredado de los
periódicos, que significa la parte de la página que puede verse sin
desplazarse) en la página principal es la zona favorita.
El campo de la usabilidad web ha madurado lo suficiente como para
desarrollar directrices especiales que codifiquen las mejores prácticas de
diseño para los componentes específicos de un sitio web. Además
primaremos la incorporación de convenciones estándar de diseño de la
interfaz de usuario, ya que los usuarios no dedicarán tiempo a aprender nada
nuevo, sino a extraer el valor del objetivo y contenidos [NIE02].
104
CASO DE ESTUDIO
La funciones más importante de la página de inicio con respecto a los símiles
a los que puede aludir son:
• Definir el contenido y el estilo;
• No ser demasiado superficial e invertir en el diseño de la interacción del
sitio;
• Estar bien señalizada, como primera página de un periódico pero
aportando más servicios y,
• Tiene que alentar a la gente a que siga leyendo.
A menudo, la página de inicio es la primera oportunidad (y posiblemente la
última) de atraer y retener a cada cliente, haciendo las veces de la primera
página de un periódico. Uno de los valores más grandes de la primera página
de un periódico es la prioridad que se da a los titulares de las noticias más
importantes. Todas las páginas de inicio se verían beneficiadas si fueran
tratadas como la primera página de un periódico importante, con editores que
determinaran el contenido de mayor interés y que aseguraran la continuidad y
coherencia del estilo.
El reto consiste en diseñar una página web que permita el acceso a todas las
opciones importantes sin crear desorden en la página web. La claridad es vital,
porque así se atienden las necesidades de los usuarios.
Directrices principales que garantizan la usabilidad de la página de inicio.
Si bien muchas de estas directrices se pueden aplicar al diseño web en
general, son especialmente importantes a la hora de diseñar la página de
inicio. Mejoraremos la usabilidad siguiendo estas directrices que no axiomas, y
deberemos implicar a los propios usuarios en el proceso y probar la usabilidad
e incorporar información iterativa en el ciclo de desarrollo.
Hemos englobado estas directrices en categorías temáticas:
FINALIDAD DEL SITIO (véase Figura 31).
La página de inicio debe transmitir enseguida dónde se encuentran los
usuarios y qué pueden hacer en el sitio. Debe hacer hincapié en las tareas de
mayor prioridad y tener un aspecto impactante y distinto, de forma que los
usuarios puedan reconocerla como punto de partida cuando procedan de
cualquier otra parte del sitio.
1. Mostraremos el nombre y el logotipo de culturanocturna.com a un tamaño
razonable y en la esquina superior izquierda, que suele ser la mejor ubicación
para los idiomas que se escriben de izquierda a derecha.
2. Incluiremos un eslogan que resume explícitamente la actividad del portal,
“música electrónica y cultura de club”. Es lo que se denomina una tagline, la
frase medular que caracteriza a culturanocturna.com, resumiendo lo que es
lo que la hace especial.
3. Para hacer hincapié en las tareas de mayor prioridad, de forma que los
usuarios tengan un punto de referencia claro en la página de inicio, debemos
revisar las necesidades de los usuarios y determinar cuales son las tareas de
mayor prioridad desde su punto de vista. Las secciones prioritarias son: la
“agenda”, los “recomendados” de la semana, los “reportajes” y las “noticias”.
Asignaremos a estas tareas una ubicación prominente, como la parte central
superior de la página, y no las rodearemos de mucha competencia visual. Por
esta última razón, incluiremos una cita (que por frecuencia de actualización,
105
tiene una prioridad alta) que relaja la carga visual de imágenes en la parte
superior.
4. Para designar claramente la página de inicio restringiremos el uso de los
términos “Inicio”, “Página de Inicio” y “Sitio Web” en todo nuestro sitio para
hacer referencia a esta página de inicio principal. Esto no confundirá a los
usuarios por vínculos o botones “Inicio” que conduzcan a lugares distintos. No
incluiremos vínculos a sitios web externos en la página de inicio.
5. El diseño de la página de inicio deberá diferenciarse claramente de todas
las demás páginas del sitio. Utilizaremos un diseño visual algo distinto y
habilitaremos un señalizador de ubicación en el apartado navegacional.
Figura 31
Finalidad del sitio en
página de inicio.
INFORMACIÓN SOBRE EL SITIO (véase Figura 32).
Muchos usuarios siguen queriendo saber quién está detrás del servicio.
6. Agruparemos la información sobre el sitio y otras secciones de ayuda, como
“Quiénes somos”, “Contacta con nosotros”, “Mapa del sitio” en un área
separada. Este agrupamiento proporciona a las personas que deseen obtener
información un lugar claro y memorizable al que ir. Esto también ayudará a los
usuarios que no están interesados en esta información, al separarla del resto
del contenido de la página de inicio. No incluiremos la información de contacto
directamente en la página de inicio puesto que no es relevante más que para
la colaboración, que ya se promociona de diversas maneras y debe ser
elección expresa del usuario.
8. Además, incluiremos un vínculo “Normas de privacidad” en la página de
inicio, ya que el sitio solicita información al usuario para subscribirse al boletín
o colaborar en la página. Así como también un “Aviso legal” sobre el contenido
del sitio.
Figura 32
Navegación a pie de
página.
REDACCIÓN DE CONTENIDO (véase Figura 33).
La mayoría de los usuarios hojea el contenido on-line, en vez de leerlo
cuidadosamente, por lo que deberemos optimizar el contenido para ser
fácilmente localizado, y adaptarlo para transmitir el máximo de información
posible con el mínimo de palabras. En el caso particular de la página de inicio,
deberemos esforzarnos especialmente por captar la atención de los usuarios,
106
CASO DE ESTUDIO
disponiendo de un espacio mínimo para dar cabida al máximo número de
temas.
9. Utilizaremos un lenguaje dirigido a nuestra audiencia destino. La
arquitectura de la información, resultado de la investigación y el trabajo
realizado en la fase de diseño, nos permitirá etiquetar las secciones y las
categorías con arreglo al valor que tienen para nuestra audiencia. Por ejemplo,
disponemos de una sección principal que contiene las actuaciones que
consideramos más destacadas esa semana dentro de la escena electrónica.
Hemos optado por denominar a esta sección “Recomendamos” en vez de
“Esta semana” o “Destacados” porque esta última sería la manera en que se
trata esta información, en vez de ser lo que el usuario está viendo o leyendo,
esto es, una lista de las actuaciones que recomendamos. De manera análoga,
hemos hecho con “Lo ha dicho...” en vez de “Cita”.
Figura 33
Contenido destacado y
etiquetado de secciones.
10. La repetición de elementos idénticos, como categorías y vínculos, en la
página de inicio a fin de hacer hincapié en su importancia, minimiza su
impacto. Para destacar algo, lo presentaremos claramente en un único lugar.
Este es el caso particular de los “Recomendados”, a los que damos un
tratamiento diferente y destacado en el centro de la página. Por otra parte,
repetir el contenido puede ayudar a los usuarios si repite elementos que
pertenecen a múltiples categorías o si incluye vínculos con la misma página,
que es lo que sucede dentro de una misma sección y lo que hace
diferenciarlas como bloques comunes, como sucede, por ejemplo, con los
“Reportajes”.
11. Evitaremos categorías de un solo elemento y listas de una sola viñeta,
acompañando al elemento más reciente de cada sección con un mínimo de
los 2 últimos elementos de contenido que fueron más recientes. Por ejemplo,
las secciones “Especiales” y “Entrevistas” incluyen un par de vínculos más
hacia los últimos archivos que estuvieron en portada.
12. Al utilizar diseños multicolumna, el texto debe entrar en espacios muy
reducidos. Dado que existirán muchas posibilidades de que haya particiones
en el texto, dependiendo de la resolución de pantalla, el tamaño del monitor, el
107
tamaño de la ventana y la versión del navegador de cada usuario, el hecho de
que ciertas frases permanezcan juntas puede ayudar a mantener la integridad
y la lógica del contenido. Así que para facilitar la comprensión y la localización,
no partiremos ni titulares, ni nombres de artistas que estén vinculados.
13. Todo el texto de la página de inicio deberá contener información y no ser
ambiguo. El uso correcto de mayúsculas, lenguaje, signos de puntuación y
otras reglas de estilos se comenta en la guía de estilos del apéndice GUÍA
PARA LA REDACCIÓN DE CONTENIDO.
REVELAR EL CONTENIDO A TRAVÉS DE EJEMPLOS (véase Figura 34).
Mostrar ejemplos del contenido del sitio en la página de inicio ayuda a los
usuarios. Entre las múltiples ventajas que esto conlleva, la más importante que
hay que destacar es que los ejemplo pueden ayudar a los usuarios a navegar
satisfactoriamente, ya que muestran lo que subyace a los nombres abstractos
de las categorías. Los ejemplos ayudan a diferenciar las categorías, evitando
que los usuarios tengan que hacer clic en las diferentes categorías para ver
que contienen.
14. Utilizaremos ejemplos que revelarán el contenido del sitio, en vez de
limitarnos a describirlo. La categoría de “Noticias” contendrá los cinco primeros
titulares, seguidos por un vínculo con todas las noticias más interesantes. La
categoría llamada “Reportajes” contendrá una fotografía representativa de esa
actuación.
Figura 34
Sección de noticias en
página de inicio.
15. Para cada ejemplo, dispondremos de un vínculo que irá directamente a la
página detallada de ese ejemplo, en vez de ir a una categoría general de la
que forme parte el elemento. Todos los vínculos de los reportajes llevan
directamente a la información correspondiente a ese reportaje en concreto, y
no con la página dedicada a los reportajes. De igual manera ocurre con el
resto de secciones.
16. Nos aseguramos que queda claro qué vínculos conducen a la información
de seguimiento de cada ejemplo y qué vínculos conducen a información
general acerca de la categoría como un todo. Para ello, el vínculo con la
categoría lo separaremos de los vínculos de ejemplo por un pequeño espacio.
Esto es así en cada bloque, donde aparece un vínculo claramente separado al
final de cada sección y alineado de la misma forma que el nombre de la
categoría, a la derecha.
108
CASO DE ESTUDIO
ACCESO A ARCHIVOS Y CONTENIDO YA APARECIDO (véase Figura 35).
Con frecuencia, hay usuarios que vuelven a un sitio regularmente o nuevos
usuarios que están interesados en lo que éste ha ofrecido antes de localizarlo.
Resulta útil incluir archivos del contenido que se haya retirado recientemente
de la página de inicio.
17. Facilitaremos el acceso al contenido que se haya presentado
recientemente en la página de inicio, por ejemplo, en la última semana o mes,
incluyendo una lista de las opciones recientes.
Figura 35
Acceso a las últimas
entrevistas y al archivo
con todas ellas.
VÍNCULOS (véase Figura 36).
Las páginas de inicio tienden a incluir más vínculos que las páginas
convencionales del sitio.
18. Diferenciaremos los vínculos y haremos que sean hojeables.
Encabezaremos los vínculos con información que incluya texto, ya que los
usuarios suelen primero buscar la primera palabra o las dos primeras palabras
de los vínculos para compararlos. Haremos que los vínculos sean lo más
específicos y breves posible. Una manera sencilla de conseguir esto es
haciendo que nuestros vínculos sean titulares y/o nombres propios, como el
nombre de los artistas, por ejemplo.
19. Utilizaremos texto significativo. No utilizaremos instrucciones genéricas,
como “haga clic aquí”, en vez de, por ejemplo, decir “Haga clic aquí para ver la
entrevista a Robert Lamart”, pondremos “Entrevista a Robert Lamart”.
Tampoco vínculos genéricos, como “Más...” al final de una lista de elementos
o artículos. En vez de ello, indicaremos a los usuarios lo que van a ver, como
“Más noticias” o “Todos los reportajes”. Los vínculos genéricos “Más...” son
especialmente problemáticos cuando la página contiene varios de ellos, ya
que a los usuarios les resultará difícil diferenciarlos al hojear la página.
Figura 36
Utilización de vínculos
con texto significativo.
20. Asignaremos colores distintos a los vínculos para mostrar los estados de
visitado y no visitado. Reservaremos el azul para los vínculos no visitados y
utilice un color más discernible y menos saturado para los vínculos visitados.
El gris para indicar los sitios visitados no es conveniente, ya que es difícil de
leer y ha sido muy utilizado en interfaces de usuario para indicar que algo no
está disponible. De manera análoga, no es muy útil utilizar el negro para los
109
sitios visitados cuando el color de texto es el negro, ya que puede inducir a
errores a la hora de buscar los vínculos visitados anteriormente.
21. Si un vínculo hace una cosa que no sea conducir a otra página web, como
enlazar con archivo PDF o iniciar un reproductor de audio o vídeo, un mensaje
de correo electrónico u otra aplicación, nos aseguraremos de que el vínculo
indica explícitamente lo que va a ocurrir. Ser transportado a un medio nuevo
sin previo aviso es desconcertante para cualquier usuario, pero es
especialmente oneroso para los usuarios que tengan conexiones lentas, que
se verán abocados a esperar a que se cargue la nueva aplicación para poder
salir de ella. Y lo que es peor, en una situación de memoria limitada, el inicio
de una aplicación de ayuda o plug-in que utilice muchos recursos de memoria
puede hacer que el navegador o la computadora se bloqueen. Utilizar iconos
para indicar, por ejemplo, archivos de audio y vídeo.
NAVEGACIÓN (véase Figura 37).
Dado que la finalidad de una página de inicio es la de facilitar la navegación
hacia cualquier otra parte del sitio, es fundamental que los usuarios sean
capaces de detectar el área de navegación apropiada sin esfuerzo alguno,
diferenciar entre las opciones y saber bien lo que hay detrás de cada vínculo.
El área de navegación también deberá revelar el contenido más importante del
sitio, de manera que los usuarios puedan formarse una idea bastante definida
de lo que hay viendo las categorías de nivel superior.
22. Colocaremos el área principal en un lugar tan revelante como es la parte
superior de la página, junto al cuerpo principal.
23. Agruparemos los elementos del área de navegación de forma que los
elementos semejantes queden los unos junto a los otros. El agrupamiento
ayuda a los usuarios a diferenciar entre categorías similares o relacionadas.
Así, junto a “Agenda” agrupamos “Artistas” y “Clubs”. A continuación “Noticias”
y agrupamos juntos “Reportajes” y “Especiales”. Luego “Críticas”, “Enlaces” y
“Foros”.
Figura 37
Barra de navegación
superior.
24. No incluiremos un vínculo activo con la página de inicio en la propia página
de inicio. Ya que incluimos el vínculo “Inicio” como parte de la barra de
navegación normal, no se podrá hacer clic en él en la página de inicio. Si se
pudiese hacer clic en él, algunos usuarios inevitablemente harán clic en él y se
preguntarán si la página ha cambiado. Asimismo, como vincularemos el
logotipo de culturanocturna.com con la página de inicio desde otras páginas
del sitio, no se podrá hacer clic en el logotipo desde la página de inicio. Todas
las demás páginas del sitio necesitarán tener un vínculo con la página de
inicio.
25. No emplearemos iconos, ya que los vínculos de texto son claramente
diferenciables entre sí, puesto que son los nombres de las categorías;
simplemente crearían confusión en la página.
BÚSQUEDA (véase Figura 38).
La búsqueda es uno de los elementos más importantes de la página de inicio,
y resulta esencial que los usuarios sean capaces de encontrarla y usarla sin
110
CASO DE ESTUDIO
ningún tipo de esfuerzo. Las recomendaciones para el tratamiento de la
búsqueda de la página de inicio son muy claras: hacer que sea visible, amplia
y sencilla. Evidentemente, el verdadero poder de la búsqueda está en la
implementación.
26. En vez de proporcionar un vínculo con una página de búsqueda,
proporcionaremos a los usuarios un cuadro de entrada (con un botón al lado)
en la página de inicio para introducir consultas de búsqueda, que es lo que
esperan encontrar para presuponer que el sitio tiene opción de búsqueda.
Habilitaremos una búsqueda sencilla y sin vínculo a una búsqueda avanzada.
En lugar de ello, ofreceremos a los usuarios la opción de realizarla cuando les
presentemos los resultados de la búsqueda.
27. Dejaremos el espacio suficiente en el cuadro de entrada como para que
quepan 30 caracteres en el tamaño de fuente más utilizado.
28. Colocaremos la búsqueda en la parte superior del cuerpo principal de la
página, pero por debajo de cualquier área de banner. No será necesario
etiquetar el área de búsqueda con un encabezado; pues utilizaremos en su
lugar un botón “Buscar” que quede a la derecha del cuadro.
Figura 38
Cuadro de búsqueda.
29. La búsqueda en la página de inicio deber afectar por defecto al resto del
sitio. Los usuarios casi siempre presuponen que han buscado en la totalidad
del sitio, a menos que se les indique lo contrario, y presuponen que el sitio
carece de aquello que están buscando si no lo encuentran con la búsqueda.
Además, no ofreceremos una opción de “Buscar en la web”, ya que los
usuarios utilizarán su motor de búsqueda favorito, y esta opción hará que la
búsqueda sea más complicada y esté más expuesta a posibles errores.
HERRAMIENTAS Y ACCESOS DIRECTOS A TAREAS (véase Figura 39).
Las herramientas de las páginas de inicio, o los accesos directos a ciertas
tareas, pueden suponer una forma inmejorable de destacar las prestaciones
más populares del sitio y satisfacer las exigencias de los usuarios más
rápidamente.
30. Ofreceremos a los usuarios un acceso directo a la agenda, una de las
tareas de más alta prioridad. Desde ella podrán realizar una búsqueda básica
y sencilla de los eventos que se produzcan en su zona regional el día elegido.
31. No ofreceremos herramientas que reproduzcan la funcionalidad del
navegador, como establecer una página como página de inicio
predeterminada del navegador o agregar el sitio a favoritos.
111
Figura 39
Acceso directo a la agenda
desde página de inicio.
Se habilita un calendario
con el que acceder a los
eventos directamente.
IMÁGENES Y ANIMACIÓN (véase Figura 40).
El hecho de utilizar imágenes para ilustrar el contenido, puede mejorar mucho
una página de inicio. Por otra parte, las imágenes pueden entorpecer el diseño
debido a la aglomeración visual y a los tiempos de descarga lentos, por lo que
resulta importante utilizarlas con precaución para publicarlas en la Web.
32. Utilizaremos imágenes únicamente para mostrar contenido real, no para
decorar la página de inicio. Usaremos fotografías de personas e imágenes
identificables en conexión con el contenido y de esta manera no será
necesario etiquetarlas con un pie de foto.
Figura 40
Fotografías en
culturanocturna.com
33. Las fotografías se ajustarán al tamaño apropiado para su visualización.
Evitaremos las imágenes pequeñas con demasiado nivel de detalle y no
usaremos imágenes con marca de agua.
34. La animación requiere atención por parte del usuario y debe mostrarse
aisladamente, mientras que la página de inicio tiene múltiples elementos que
requieren atención. La animación raras veces dispone de un lugar en la página
de inicio, ya que desvía la atención de los otros elementos. Así no dotaremos
de animación ni al logotipo, ni al eslogan ni a los encabezados.
DISEÑO GRÁFICO (véase Figura 41).
112
CASO DE ESTUDIO
El diseño gráfico suele vulnerar la usabilidad cuando se usa como punto de
partida del diseño de la página de inicio en vez de cómo último paso para
captar la atención en un diseño de interacción centrado en el usuario. El
diseño gráfico debe ayudar a dar un sentido de la prioridad al diseño de
interacción atrayendo la atención del usuario hacia los elementos más
importantes de la página.
35. Limitaremos los estilos de fuente y otros formatos de texto, como los
tamaños, los colores, etc., en la página, ya que el texto con demasiado diseño
puede ocultar el significado de las palabras.
36. Utilizaremos texto con mucho contraste y colores de fondo, para que el
tipo de fuente sea lo más legible posible.
37. Evitaremos el desplazamiento horizontal a 800x600, puesto que el
desplazamiento horizontal plantea invariablemente problemas de usabilidad (el
más importante es que los usuarios no den cuenta de la existencia de la barra
de desplazamiento y que no vean el contenido que queda fuera de la pantalla).
38. Los elementos más importantes de la página serán visibles “en su
totalidad” (en la primera pantalla de contenido, sin desplazarse) a un tamaño
que sea el más habitual (800x600 en la actualidad). Por esta razón, no
incluiremos grandes espacios en blanco entre los elementos de contenido y
colocaremos el contenido y las tareas de más alta prioridad y actualización en
la parte superior de la página. A una resolución de 800x600, la “Agenda”, los
“Recomendados” y los primeros “Reportajes” se visualizan completamente.
Figura 41
Información visible
antes del pliegue.
39. Utilizaremos un diseño líquido, de forma que el tamaño de la página de
inicio se ajuste a las distintas resoluciones de pantalla.
40. Aparte del logotipo de culturanocturna.com no utilizaremos otros
logotipos, que podrían perjudicar el aspecto de la interfaz.
WIDGETS DE LA IU (véase Figura 42).
113
Los widgets de la IU, como los menús desplegables, las listas de selección y
los cuadros de texto, atraen invariablemente la atención de los usuarios.
41. Utilizaremos widgets sólo cuando sean absolutamente necesarios para
llevar a cabo la tarea, y no los utilizaremos como partes de la pantalla en las
que no deseemos que la gente haga clic. Nuestra página contiene únicamente
dos widgets que consideramos imprescindibles, el cuadro de texto de la
búsqueda y los botones de selección de tipo radio para la zona regional de la
agenda.
42. Evitaremos el uso de múltiples cuadros de entrada de texto en la página
de inicio, especialmente en la parte superior de la página, donde la gente
tiende a mirar si está la opción de búsqueda. Ya que los usuarios confunden
los cuadros de entrada de texto con cuadros de búsqueda, y a menudo
escriben consultas de búsqueda en el lugar equivocado. Para evitar esto, la
suscripción al boletín y la colaboración se traducirán en vínculos.
43. Los usuarios se ven atraídos por los menús desplegables, aunque suelen
ser los dispositivos de navegación menos útiles. Si disponemos de unos
cuantos elementos en una lista desplegable, a menudo es mejor enumerarlos
directamente en la página de inicio. Por esa razón, hemos incluido cuatro
radio buttons en la agenda, en vez de utilizar una lista.
Figura 42
Radio buttons
empleados.
TITULOS DE VENTANA (véase Figura 43).
Aunque a mucha gente le pueda pasar inadvertida la existencia de títulos de
ventana cuando utiliza los sitios web, los títulos juegan un papel fundamental a
la hora de marcar como favorito y localizar el sitio con los motores de
búsqueda.
44. El título debería empezar por la palabra que los usuarios generalmente
asociarán con el sitio cuando estén buscando en una lista de marcadores, ya
que el título de la ventana se convierte en el nombre del marcador
predeterminado. Además, si encabezáramos el título de la ventana con algo
que no sea la palabra más importante, el nombre quedaría perdido en las
listas de resultados de búsqueda. No debe empezar ni con “Bienvenido”, ni
con “Página de inicio”, ni por artículos determinados. Incluir el dominio de nivel
superior, como el “.com” en el título de ventana, porque forma parte del
nombre: “culturanocturna.com” será correcto.
Figura 43
Título de página.
45. Incluiremos una breve descripción del sitio en el título de la ventana, pero
lo limitaremos a no más de siete u ocho palabras y menos de 64 caracteres.
Los títulos largos son más difíciles de hojear, especialmente en las listas de
marcadores, y no aparecen correctamente en muchas aplicaciones. Usaremos
114
CASO DE ESTUDIO
el eslogan, puesto que es breve, significativo e incorpora un lenguaje conciso
y claro: “culturanocturna.com, música electrónica y cultura de club – Titulo de
la página”.
LOS URL
Resulta fundamental que los URL de la página de inicio sean lo más sencillos
y memorizables posible.
46. Debemos tener el URL http://www.culturanocturna.com. Sin incorporar
códigos complejos, ni siquiera “index.html” detrás del nombre de dominio. Un
URL de página de inicio sencillo ayudará a los usuarios a entender
rápidamente donde se encuentran, mientras que si el URL es complejo puede
que se pregunten si en verdad están en la página correcta.
47. Registraremos los nombres de dominio con formas distintas, así como con
abreviaturas o errores habituales en la forma de escribir el sitio y redirigiremos
a los usuarios desde todas las formas alternativas de escribirlo a
http://www.culturanocturna.com. En el , damos más detalles sobre este tema.
NOTICIAS Y NOTAS DE PRENSA (véase Figura 44).
Para que las noticias y las notas de prensa sean eficaces en la página de
inicio, deberemos incorporar titulares y entradillas (el resumen que aparece
debajo del titular) efectivos.
48. Vincularemos los titulares, en vez de la entradillas, con la noticia completa.
El usuario debe captar que el titular es donde tiene que hacer clic.
Figura 44
Noticia con entradilla.
49. Las noticias de la página de inicio se habrán producido durante la semana,
por lo que no será necesario incluir la fecha y la hora en la entradilla de cada
noticia, a menos que sea en verdad una noticia importante que experimente
actualizaciones frecuentes.
VENTANAS EMERGENTES Y PÁGINAS INTERMEDIAS.
Por regla general, lo más conveniente es mostrar el contenido del sitio
inmediatamente.
50. Puesto que nuestro sitio no contendrá material inapropiado para menores
ni tiene intención de herir la sensibilidad de los usuarios, no será necesario
ningún tipo de pantalla intermedia. Llevaremos a los usuarios a la página de
inicio “real” cuando escriban el URL principal.
51. Evitaremos las ventanas emergentes. Las ventanas adicionales
entorpecen a los usuarios en su avance hacia el contenido del sitio, y aunque
este tipo de ventanas incluya información útil, es probable que los usuarios las
tomen por anuncios. En su lugar, colocaremos la información más importante
en un área muy destacada de la página de inicio y promocionaremos la
suscripción y colaboración desde diferentes lugares del sitio web.
115
PERSONALIZACIÓN.
La personalización de la página de inicio puede funcionar bien si ello aporta a
los usuarios valor sin requerir esfuerzo alguno por su parte.
Se había pensado en ofrecer a los usuarios opciones para personalizar el
aspecto básico de la IU de la página de inicio, como, por ejemplo, los
esquemas de color. Es mejor centrarse en los recursos que aportan el mejor
diseño para el mayor número de usuarios. No obstante, respetaremos las
preferencias de navegador de los usuarios, como, por ejemplo, el tamaño de
fuente, utilizando tamaños relativos en lugar de absolutos.
RECOPILACIÓN DE DATOS DEL CLIENTE (véase Figura 45).
Por regla general, muchos usuarios web, incluso los más experimentados, son
muy cuidadosos a la hora de revelar sus datos personales, ya que saben que
la acción de rellenar tales datos suele acabar en la recepción de correo
electrónico comercial no solicitado y en el colapso de sus buzones.
52. No habilitaremos vínculos para el registro en la página de inicio; en su
lugar, explicaremos las ventajas que obtendrá el cliente al registrarse. Diremos
simple y llanamente “Suscríbete a nuestro boletín mensual”. Los usuarios no
entran en los sitios para registrarse, pero puede que lo hagan si las razones
son lo suficientemente convincentes.
Figura 45
Vínculos de suscripción y
colaboración.
53. Explicaremos las ventajas y la periodicidad de la publicación a los usuarios
antes de pedirles sus direcciones de correo electrónico. No pediremos a los
usuarios sus direcciones de correo electrónico para enviarles un boletín no
especificado u otro elemento de frecuencia o contenido indeterminados.
Además, colocaremos un vínculo con un boletín de ejemplo y explicaremos las
normas de privacidad cuando solicitemos la dirección de correo electrónico al
usuario.
FOMENTO DE UNA COMUNIDAD
Lo mejor que puede hacer a nivel de página de inicio para fomentar una
comunidad de usuarios es revelar que recursos aporta el sitio para unir a la
gente.
54. En vez de mostrar vínculos genéricos a comunidad, ofreceremos un
vínculo a los foros y citaremos los temas de discusión reales.
FECHAS Y HORAS
Los usuarios tienen que saber que la información que están viendo en la
página de inicio es actual, pero no siempre necesitan ver la fecha y la hora
junto a cada elemento.
116
CASO DE ESTUDIO
55. Mostraremos las fechas de la información más necesaria, como las
actuaciones recomendadas y los reportajes correspondientes a algunas de
estas actuaciones. Hemos desestimado añadir fechas en los “DJ Charts”, pues
no son realmente necesarios en la página de inicio (sí se añadirán en la
página correspondiente a esta categoría). A pesar de no considerar oportuno
escribir los meses con letras, pues la internacionalización no se contempla en
profundidad, como en algunos países esto puede llevar a confusión, siempre
que nos sea posible escribiremos la fecha con el siguiente formato: “Lun, 23
de Junio de 2003”.
Figura 46
Formato de las fechas.
Figura 47
Migas (breadcrumbs)
Los breadcrumbs o ”migas de pan” es un elemento muy utilizado para que el
usuario no se pierda, indicándole dónde está y la relación jerárquica de ese
nodo con el resto de la estructura de la web. Utilizaremos la forma más común
y a la que el usuario está acostumbrado. Es decir, un texto “Estás aquí”, y las
diferentes secciones (siempre como enlaces) separadas por el símbolo '>'.
Aunque se podría utilizar otro símbolo para separar las secciones, habría que
asegurarse que denotan relación de superioridad jerárquica, como por ejemplo
una flecha. Por tanto, utilizar símbolos de separación como '-' ó '|' sería un
error, ya que estos símbolos denotan una relación de igualdad jerárquica, por
lo que suelen utilizarse en menús de navegación y nunca en breadcrumbs.
Los breadcrumbs no indican necesariamente el camino que han seguido los
usuarios para llegar a ese nodo web, por dos razones: los usuarios pueden
venir redirigidos de otras webs; y además, que el website utilice breadcrumbs
no significa que tenga un estructura hipertextual puramente jerárquica. Indican
un posible camino desde la página de inicio hasta la página actual, y la
relación jerárquica entre todos los elementos del breadcrumbs. En la Figura 47
podemos ver una muestra de las migas en culturanocturna.com:
Breadcrumbs o migas de
pan.
Mantenimiento y expansión
Enseñaremos a los que mantienen el sitio a interpretar correctamente y aplicar
las especificaciones de mantenimiento, para que conozcan los estándares
para actualizar el sitio y evaluar esas actualizaciones. Sirva esta memoria
como base de estos documentos de mantenimientos y expansión.
La guía de estilo debería incluir la explicación de la arquitectura y suministrar
un esquema de etiquetado para nombrar consistentemente nuevos topics.
Procedimientos a documentar:
117
•
•
•
•
Añadir nuevo contenido de bajo nivel. La guía de estilo debería
documentar como actualizar la navegación, generar nuevos gráficos, la
composición de la barra de navegación y los títulos y examinar la
necesidad de atajos.
Añadir una nueva categoría. Esta documentación debería incluir la
determinación del lugar adecuado, decidir cuantas opciones son
demasiado y cuando la arquitectura necesita reorganizarse.
Eliminar páginas y/o categorías, y salvar los datos que se eliminan para
recuperarlos en caso de que sean necesarios. La documentación debería
incluir el trabajo con links anticuados tanto internos como externos y
actualizar barras de navegación
Archivar la información anticuado (pero manteniéndola disponible). El
contenido anticuado puede ser necesario mantenerlo disponible aunque no
sea activamente relevante, teniendo que eliminarlo de la navegación
primaria y localizándolo en una sección de archivos del sitio. La
documentación debería incluir la actualización de links y barras de
navegación y adecuarla a una organización sistemática y un esquema de
renombrar los ficheros para archivarlos.
ELEMENTOS FUNDAMENTALES DE DISEÑO DE LA PÁGINA
Colores
La calibración de color entre monitores es relativamente pobre, y los colores
aparecen distintos en diferentes plataformas hardware. Las restricciones
humanas incluyen diferencias en las preferencias de color, en significados
culturales y en percepción del color. Además, la ceguera de color (daltonismo)
es relativamente común (alrededor de un 4%).
Como resultado de todas estas limitaciones, nos aseguraremos que nuestro
diseño funciona en blanco y negro (véase Figura 48). Para distinguir entre dos
áreas coloreadas debemos asegurar que contrastan tanto en brillo como en
color.
Figura 48
Test en escala de
grises.
Ciertos pares de colores no funcionan bien trabajando codo con codo, debido
a que el borde entre ellos parece vibrar; incluyen los pares rojo/verde,
azul/violeta y rojo/azul. Si es necesario poner estos pares uno al lado del otro,
podemos reducir la vibración separándolos con una línea sólida negra. Hay
gente que tiene dificultad enfocando líneas delgadas azules. Evitaremos por
esta razón, un azul altamente saturado para líneas nítidas o detalladas.
Se ha optado por un estilo minimalista, acorde con el carácter que se ha
querido dar al sitio web. La gama de colores utilizada es básica, pero han sido
en última estancia los usuarios quienes han elegido un esquema de naranjas y
negros en detrimento de otros esquemas usados.
Los vínculos no visitados llevarán colores saturados. Los vínculos visitados
llevarán un color poco saturado o menos prominente, pero no el gris claro.
Subrayaremos los vínculos excepto en las listas de las barras de navegación.
118
CASO DE ESTUDIO
Resolución de pantalla
Diseñaremos las páginas para una visualización óptima en torno a los 770
píxeles, ya que es el área disponible para el contenido en una ventana de 800
píxeles. Además, el diseño será “líquido” que funcione desde 620 a 1024
píxeles, de forma que se adapte al máximo número posible de tamaños de
ventana, más anchos o más estrechos que la ventana “estándar”. Los usuarios
que tengan monitores grandes apreciarán el hecho de poder ver más
contenido al poder hacer la ventana tan grande como quieran, rentabilizando
así parte del precio que pagaron por ellos. Los usuarios que tengan monitores
pequeños también se aprovecharán de una página que se contrae para
adaptarse a sus ventanas más pequeñas. Por último, los diseños líquidos se
imprimen bien tanto en papel de 8,5x11 como en A4.
Prevendremos el exceso de desplazamiento en la longitud de la página. No
diseñaremos más allá de las cuatro pantallas completas en el tamaño de
ventana más común entre la base de usuarios (800x600).
Cuadros de entrada
El blanco parece ser una característica definitoria de un campo de entrada de
usuario. En consecuencia, los campos de texto serán blancos. Para conseguir
la mejor usabilidad de la opción (de búsqueda o de entrada de texto), los
usuarios deben ser capaces de escribir consultas bastante largas, viendo la
totalidad del texto sin tener que desplazarse por el cuadro. En los cuadros de
entrada cabrán 30 caracteres (véase Figura 49).
Figura 49
Cuadros de entrada en un
formulario.
Imágenes
Es recomendable dedicar entre el 5 y el 15% de la página de inicio a
imágenes. Podrían necesitarse más si su contenido fuera muy visual. Esta
cuestión no puede decidirse en abstracto, ya que depende de la naturaleza del
sitio y de su contenido.
Exceptuando el logotipo de culturanocturna.com, el resto de imágenes
corresponderán a fotografías. Se decidirá que existirán los siguientes tamaños
básicos:
•
•
•
•
Fotografía cuadradas de 160x160 píxeles. Se utilizarán para la página de
inicio, biografías, discos y en particular siempre que haya que mostrar la
fotografía de un artistas.
Fotografías de 120x90 píxeles. Serán utilizadas siempre que haya que
mostrar listas de items, como por ejemplo, reportajes, noticias, etc.
Fotografías de 300x225 píxeles. Para titulares de noticias o especiales y
cuando se requira una fotografía de mayor tamaño.
Fotografías de reportajes con un tamaño que dependerá de la fotografía
original, pero siempre manteniendo la calidad de la imagen.
119
Tipografía
Aunque las fuentes serif impresas suelen ser más fáciles de leer, los tipos serif
muy finos no se visualizan muy bien en la generación actual de pantallas de
baja resolución, por lo que la legibilidad es más alta con los tipos de fuente
sans-serif, como Verdana y Arial. Usaremos el tipo san-serif para el cuerpo de
texto. El tamaño medio de la fuente será de 12 píxeles, que al utilizar
dimensiones relativas en una vista de tamaño mediano corresponde a un
volumen del 75%.
De acuerdo con la tabla que mostramos a continuación (véase Tabla 3),
restringiremos el uso de texto gráfico solamente para el logotipo de
culturanocturna.com. El resto de texto estará formateado en XHTML con el
uso de CSS.
Uso de gráficos para el texto
El diseñador tiene control total sobre
el tipo de fuente y el tamaño y
puede garantizar la calidad visual.
La distribución de la página puede
ser controlada porque el gráfico no
variará de tamaño.
El diseñador puede controlar los
bordes y el contraste para
conseguir mayor claridad.
Se habilitan efectos visuales
(animación GIF o rollovers en
JavaScript)
Se puede mantener la marca de la
empresa u organización.
Se puede integrar y posicionar el
texto con elementos gráficos.
Tabla 3
Uso de HTML para el texto
Ventajas e
El texto se carga más rápido que
los
inconvenientes
del uso de
gráficos.
gráficos y de HTML para
crear el texto en una
Las fuentes pueden ser controladas
página web.
y modificadas por hojas de estilo.
Los usuarios pueden modificar el
tamaño de la fuente para ajustarlo a
su agudeza visual.
Muchos usuarios navegan con la
carga de imágenes desactivada.
Las interfaces de los PDA’s y
teléfonos móviles son normalmente
navegadores basados en texto.
El texto habilita las interfaces de voz
solamente (por ejemplo, para
ciegos).
El texto se reestructura a sí mismo
más fácilmente para ajustarse a
diferentes tamaños de ventana y
navegadores.
Las modificaciones son mas fáciles
de hacer.
Utilizaremos preferiblemente el blanco como color de fondo y el negro para el
cuerpo de texto, consiguiendo así el máximo contraste posible y el máximo de
legibilidad. También convendremos válido que el texto sea lo suficientemente
oscuro como para obtener suficiente contraste con un fondo gris, que servirá
como delimitador en algunas ocasiones. El blanco sobre fondo negro
proporciona también el máximo de contraste posible, aunque tiene una
legibilidad menor que el texto negro sobre un fondo blanco, que es más
estándar y se parece más al texto impreso.
120
CASO DE ESTUDIO
Formularios
La administración del sitio web de culturanocturna.com va a requerir un gran
uso de formularios para la introducción de contenido. Los formularios son por
definición un impedimento para el uso del sitio y por ello se deben hacer lo
más sencillos posible. El diseño de todos los formularios ha de ser similar,
constar de una serie de preguntas y respuestas sencillas en un proceso lineal
y ser consistente. La mejor manera para alcanzar la consistencia es establecer
una guía de estilos para el diseño de todos los formularios:
•
•
•
•
•
•
En el diseño de un formulario es prioritario reducir al máximo el número de
datos a introducir por el usuario. En los casos en los que sea posible inferir
información a partir de cualquier otra disponible, se evitará su petición. Por
ejemplo del código postal o del número de teléfono se puede inferir de la
provincia.
En los formularios se debe autocompletar con información previa tantos
campos como sea posible, por ejemplo reutilizando algunos campos (corre
electrónico = nombre de usuario). Si bien esto supone un mayor peso del
formulario, los estudios muestran que los usuarios son más tolerantes con
el tiempo de descarga de formularios puesto que entienden que se tratan
de procesos complejos y que hay información que procesar.
Los menús desplegables frecuentemente dificultan más que ayudan a
completar los formularios, en muchos casos es más rápido escribir
directamente la información que seleccionarla de una larga lista de ítems.
Un usuario escribe antes su dirección completa, número, piso y puerta en
un solo campo que en 4 diferentes. Sin embargo, los utilizaremos si
ayudan a procesar los datos y son lo suficientemente claros. Para que los
combos sean usables deben contener opciones simples. Estas opciones
han de ser completamente predecibles, sencillas e inequívocas tras leer el
enunciado de la pregunta. Si se ha de desplegar el combo para
comprender las opciones contenidas en un combo, no se cumple el
principio de la visibilidad.
Los usuarios prefieren el anonimato y sienten su intimidad invadida cuando
se les pregunta en exceso. No se debe preguntar por más información de
la estrictamente necesaria.
En el uso de radio buttons para respuestas largas y más de dos, es mejor
la alineación vertical. Aunque si la respuesta tiene solo dos posibilidades,
tipo "sexo", se puede optar también por presentarlas en horizontal, para
ocupar menos espacio. Lo que nunca se debe hacer es insertar varias
líneas de texto o espacios entre los radio buttons porque las posibles
opciones quedan demasiado lejos unas de otras, no queda claro en un
vistazo rápido que se ha de escoger solo una y obliga a leer atentamente
los textos. Además si se selecciona una opción por defecto, ésta debe ser
la primera en el orden y la más común. El número máximo de opciones
oscila dependiendo de su longitud y complejidad. Si las opciones son
cortas y sencillas, hasta un máximo de cinco sería aceptable. Sin embargo,
si las opciones son largas y de ideas complejas un número mayor de 3
disminuiría mucho su usabilidad. En estos casos es recomendable dividir la
pregunta compleja en dos más simples.
Para evitar la incomodidad del cambio entre teclado y ratón, es
recomendable, cuando tenga sentido, agrupar por un lado los controles
que se manejan con el ratón (radio buttons, check boxes, combos) y por
otro los que se manejan con el teclado (campos de texto), en lugar de
alternarlos.
121
•
Respecto a la situación, tanto los radio button como los check-box siempre
se han situar a la izquierda de la etiqueta del campo, así se favorece la
alineación vertical de todos los controles. Por el contrario los combos y los
campos de texto deben situarse a la derecha de la etiqueta del campo.
Figura 50
Formulario de
administración.
Los elementos que requieren
clic están agrupados en el
inferior (a). Además, si
podemos optar por no utilizar
un combo, así lo haremos
(b).
(a)
(b)
Interactividad y multimedia
Integrar elementos multimedia en nuestros diseños es una elección que puede
tener un alto coste, como por ejemplo, restringir el acceso al sitio de
determinados usuarios, distracción de los usuarios del punto de partida o
simplemente colgar sus navegadores. A su misma vez, tiene importantes
ventajas, como por ejemplo, incrementar la comprensión, facilitar el
entendimiento de la información o exaltar la experiencia del usuario.
Una página multimedia interactiva, con animaciones Flash o con cualquier otra
tecnología, normalmente ocupará más que la equivalente página con
contenido estático. Pero se puede lograr que este tamaño adicional no sea
excesivo si se programa adecuadamente y el resultado final puede ser mejor
en cuanto a la experiencia del usuario con el sitio web. Debemos asegurarnos
que entendemos sus limitaciones y hacemos un esfuerzo consciente para
proporcionar el contexto más usable posible.
122
CASO DE ESTUDIO
Macromedia Flash
Flash puede usarse con bastante eficacia para proporcionar altos niveles de
interacción y una interesante animación on-line, pero debe considerarse su
uso cuidadosamente para asegurarnos que proporciona valor al usuario final
sin causarle problemas. Por ejemplo, el empeño de algunos diseñadores de
desarrollar la web en un marco completo de Flash puede acarrear con graves
repercusiones:
•
•
•
Anulación total del sitio en buscadores.
Anulación total de la medición del sitio vía logs. No hay manera de saber
que contenido interesa más a los usuarios, que productos se visitan más o
que rutas son más comunes.
Anulación total de crecimiento. Todo sitio web desarrollado en un marco
Flash está condenado a sufrir la ‘tiranía’ de las versiones de desarrollo
dictadas por Macromedia.
Por ello, usaremos Flash únicamente embebido dentro del código HTML y
solamente en casos puntuales. El Flash, como todo en el diseño web y en la
vida, será positivo o negativo dependiendo del uso que le demos. Lo
importante es usarlo adecuadamente para enriquecer la experiencia del
usuario sin que las páginas ocupen un tamaño excesivo y tarden demasiado
en descargarse. Siempre proporcionando métodos alternativos para obtener la
información si el usuario no tiene el plug-in adecuado.
Figura 51
Matriz de fotos en Flash
para los reportajes.
123
124
CASO DE ESTUDIO
7
CASO DE ESTUDIO
PROTOTIPADO
DISTRIBUCIÓN DE LA PÁGINA
•
•
•
•
•
•
•
Simplicidad
Consistencia y contraste
Foco
Simplificación y reducción
Equilibrio
Repetición
Principios de Gestalt
•
•
•
Selección de las páginas que requieren maqueta
Página de inicio
Maquetas Digitales
•
•
•
Evaluación del primer borrador en maqueta digital
Evaluación del segundo borrador en maqueta digital
Evaluación de variables concretas
•
•
Storyboards
Wireframes y prototipos de alta fidelidad
•
•
Evaluación del primer prototipo
Evaluación del sitio en vivo
MAQUETAS
TEST.DE LAS MAQUETAS CON USUARIOS
PROTOTIPOS
TEST DE LOS PROTOTIPOS CON USUARIOS
La disposición del contenido de la página está relacionada inmediatamente
con el look & feel de nuestro sitio. Las primeras impresiones son
fundamentales a la hora de realizar una página web altamente usable, bien
estructurada y centrada en el usuario, pues esa será la experiencia del
usuario, el aspecto más crítico.
Un diseño que tenga éxito se alcanza mediante un proceso iterativo de
maquetas y prototipos. El uso combinado de maquetas y prototipos nos
permitirá obtener un diseño prematuro adecuado, cuando el coste de cambio
es razonable y se ve posible una exploración de alternativas más amplia, en
vez de reparar un diseño después de que el sitio haya sido implementado por
completo.
Los prototipos responden cuestiones y dan soporte a los diseñadores a la hora
de escoger entre varias alternativas. Es más, sirven para una gran variedad de
propósitos, como, por ejemplo, ‘testear’ la fiabilidad técnica de una idea,
clarificar requisitos que quedaron ‘imprecisos’, ver como responde con el resto
de la aplicación, etc.
DISTRIBUCIÓN DE LA PÁGINA
El objetivo principal del diseño gráfico es obtener una comunicación visual
eficaz, estructurando las páginas con jerarquías consistentes de los elementos
de diseño, enfatizando los más relevantes y mostrando el contenido de una
manera lógica y ordenada. Esto no significa que las páginas tengan que ser
monótonas y sin inspiración. La estética es un elemento de usabilidad, pero el
diseño completo falla si se atienden pobremente los otros objetivos de la
comunicación visual. Un buen diseño debe ser estéticamente agradable, pero
dentro de un contexto usable.
Mantener una página consistente, simple y enfocada en los elementos clave
nos permitirá explorar creativamente el espacio de diseño mientras
mantenemos una página altamente usable [BRI02].
Simplicidad
Nos aseguraremos que los títulos de la página, los elementos de navegación y
la información contenida son reconocidos como tales por el usuario.
Consistencia y contraste
Estableceremos unicidad a lo largo de las páginas del portal. Además,
podemos usar el contraste para conducir la atención del usuario hacia
elementos particulares de la pantalla. El contraste y la consistencia van unidos
de la mano: las cosas iguales han de parecer iguales y las diferentes han de
parecen diferentes.
Foco
Haremos hincapié en los elementos clave de una pagina. Estos elementos –
una etiqueta, un título o un icono- deben comunicar inmediatamente la
información que contienen.
Capítulo 7: Prototipado
127
Simplificación y reducción
Simplificación de la estructura de la pagina y reducción de los elementos
contenidos dentro de la página (reducir el número de líneas verticales, por
ejemplo, una buena manera de mantener el control sobre la estructura es
limitar la página a 4 o menos alineamientos verticales).
Equilibrio
Se usa el equilibrio para establecer un sentimiento de consistencia y armonía
en la disposición. Para desarrollar una pagina bien equilibrada, empezaremos
identificando un eje central (vertical). Una distribución simétrica es altamente
organizada, es más fácil de implementar y de revisar y adaptar. La asimétrica
no es buena para contenido que cambia a menudo.
Repetición
Reforzaremos la estructura teniendo consistentemente repetidos ciertos
elementos a través del espacio de diseño. Esto además identificará el sitio
como un conjunto cohesionado. La repetición reduce el tiempo de búsqueda
visual del usuario y mejorar la percepción grupal. Contribuye, en un nivel más
práctico, a la usabilidad minimizando el tiempo de bajada si repetimos.
En resumen, usaremos elementos repetidos en nuestra página para
desarrollar una estructura jerárquica de acuerdo a la localización, tamaño y
matiz de los elementos repetidos; para reducir el tiempo de bajada de gráficos
únicos teniéndolos repetidos que pueden estar en la caché local; y para
facilitar la identificación de la marca u organización.
Principios de Gestalt
Los principios generales de organización perceptual son la proximidad, la
similitud y la buena continuación. Se pueden usar para organizar una
distribución visual y, rompiendo las reglas, se pueden usar efectos (pop-out,
por ejemplo) para atraer la atención de elementos que cambian
frecuentemente y áreas de contenido (nuevos elementos), para resaltar la
actual navegación y localización o para mostrar información crítica.
MAQUETAS
Usaremos representaciones estáticas del espacio de diseño para centrarnos
en su look & feel y tratar de abordar los problemas de distribución del
contenido más complejos (véase Figura 52). Además, las maquetas nos
servirán como método de evaluación con los usuarios.
Selección de las páginas que requieren maqueta
Elegiremos que páginas vamos a maquetar dependiendo del objetivo del
borrador: si básicamente se usarán para desarrollo interno y evaluación con el
usuario, o si su principal objetivo es la revisión con la audiencia y el acabado
del look & feel.
Realizaremos las maquetas de páginas que incluyen grandes cantidades de
datos, están generadas dinámicamente y/o se desvían significativamente del
128
CASO DE ESTUDIO
resto de páginas, como por ejemplo, la página principal o de inicio, algunas
páginas de administración, la agenda de eventos y la página de error. Estas
maquetas en papel formarán la base de posteriores prototipos, tanto maquetas
digitales, como prototipos HTML.
Figura 52
Máquetas en papel.
Diversas miniaturas y
maquetas en papel de las
páginas de inicio (a-c),
esquemas (d) y la página
de agenda (e).
(a)
(b)
(c)
(d)
(e)
En refinamientos posteriores y etapas más avanzadas usaremos las maquetas
para la aprobación del look & feel por la audiencia. En este caso,
escogeremos la página de inicio. Vamos a ejemplificar paso a paso la creación
de una de las versiones de ésta página, en la que posteriormente basaremos
el diseño definitivo.
Página de inicio
129
•
Miniaturas (thumbnails). Empezaremos desarrollando una serie de
thumbnails basados en los requisitos básicos de la página (véase Figura
53). Con los thumbnails exploraremos el espacio de diseño de una forma
extremadamente rápida, ya que son pequeños y no están muy detallados.
Figura 53
Conjunto de miniaturas
(thumbnails) de la página
de inicio.
•
•
•
130
Crearemos un bosquejo más refinado del thumbnail escogido. Una vez
escogido el thumbnail del cual realizaremos la maqueta, bosquejaremos un
borrador en grande y más refinado.
Crearemos la maqueta (véase Figura 54) dibujando los límites de la
página, los elementos básicos y la estructura: áreas de navegación,
cabeceras, pies de página, área de contenido... Añadiremos logotipos,
gráficos clave, etiquetas principales y títulos y acabaremos añadiendo texto
de contenido y la situación de las fotos.
Chequeo de la maqueta y evaluación. Nos aseguraremos que hemos
seguido todos los criterios de creación evaluando la maqueta con unos
principios heurísticos incluidos en el apéndice REVISIÓN DE LOS
PROTOTIPOS.
CASO DE ESTUDIO
Figura 54
Maqueta en papel de la
página de inicio.
Maquetas Digitales
Una vez hemos conseguido un diseño de una manera rápida y poco costosa,
produciremos maquetas digitales, debido a su facilidad para cambiar colores y
mover los elementos a lo largo del espacio, permitiendo rápidos cambios en la
paleta de colores, tipos de fuentes, etc.
Se realizarán maquetas digitales básicamente para evaluarlas con los
usuarios. En este punto, nos interesará que los usuarios se centren en detalles
de la distribución de la página y en cuestiones como la elección de la fuente,
los espaciados, los nombres de las etiquetas o los colores.
En la Figura 55 pueden verse dos versiones diferentes de la página de inicio.
La intención buscada no es compararlas, sino extraer conclusiones de las
pruebas con los usuarios y optar por una versión en la que centrarnos para
alcanzar un diseño único.
La comparación como método para obtener conclusiones tiene su fortaleza
cuando los sitios comparados son idénticos y solo difieren en una sola
característica, es decir, la característica que estamos comparando [MAN02d].
El único uso adecuado de la comparación como herramienta de la usabilidad
es durante la fase de creación de prototipos de bajo coste. Es posible crear
dos prototipos idénticos que solo varíen en una característica y realizar test de
usuarios sobre ellos.
Figura 55
Maquetas digitales de la
página de inicio.
Capítulo 7:
La versión (a) fue
desestimada. Se escogió
Prototipado
131
para futuras interaciones la
versión (b).
(a)
(b)
132
CASO DE ESTUDIO
TEST.DE LAS MAQUETAS CON USUARIOS
El proceso general para realizar la evaluación de prototipos con usuarios se
compone de los siguientes pasos:
•
•
•
•
•
•
•
•
Planificación del test. Determinaremos el alcance de la prueba y de las
tareas.
Reunión del material. Prepararemos los prototipos o el sitio para la prueba,
así como los formularios y hojas de control del test y cualquier otro material
que podamos necesitar.
Preparación del lugar.
Prueba piloto. Probaremos con uno o dos desarrolladores para descubrir
los errores de la prueba.
Reclutar usuarios. Seleccionaremos los usuarios de la prueba y el tiempo
de duración.
Conducción de la prueba. Obtendremos el consentimiento del usuario y
procederemos a evaluar una tarea, recordando el comportamiento al
usuario.
Análisis de los resultados. Revisaremos los problemas encontrados, los
clasificaremos por prioridad de frecuencia o severidad e identificaremos
posibles soluciones.
Refinaremos el sitio y volveremos a probar. Nos aseguraremos que el
problema ha sido resuelto.
Nos ayudaremos del formulario del apéndice FORMULARIO DE
PREPARACIÓN DE UN TEST CON USUARIOS para preparar las pruebas
con los usuarios.
Evaluación del primer borrador en maqueta digital
Las dos opciones evaluadas con los usuarios constan de dos borradores de la
página principal, uno organizado horizontalmente y otro organizado
verticalmente (véase Figura 55). El objetivo es extraer conclusiones de las
opiniones de los usuarios para elegir un diseño único. Nos centraremos en los
siguientes objetivos:
•
•
•
•
Principales secciones del sitio.
Examinar la disposición de la navegación.
Lugares donde hacer clic.
Valoración estética de la maqueta (del 1 al 7 -estéticamente inmejorable-).
A continuación recogeremos las conclusiones alcanzadas:
•
•
•
•
•
•
El etiquetado de las secciones en vertical es más difícil de leer que en
horizontal.
Un usuario se quejó de los espacios asimétricos en blanco de la maqueta
con disposición vertical.
Los usuarios creen que son más importantes las secciones más grandes y
centrales. En la maqueta con distribución horizontal, todas las secciones
parecen tener la misma importancia.
El usuario declara que una distribución vertical le recuerda más a una
revista.
Un usuario confunde con un banner la barra de navegación de la maqueta
con disposición horizontal.
Las valoraciones estéticas no decantan hacia ninguna solución clara.
133
Evaluación del segundo borrador en maqueta digital
Refinaremos la maqueta de la página principal seleccionada y evaluaremos
plantillas de páginas de segundo nivel y de contenido.
Figura 56
Miniaturas de la página
de la agenda.
Figura 57
Miniaturas de la página
de reportajes.
Figura 58
Maqueta digital de la
página de reportajes.
134
CASO DE ESTUDIO
Figura 59
Maqueta digital de la
página de inicio.
135
Figura 60
Maqueta digital de página
no encontrada.
El objetivo de esta evaluación es probar si en los diseños de página se
alcanzan las metas y necesidades del usuario. Si adivinan donde encontrar las
cosas y si consiguen entender la navegación de la página:
•
•
•
•
•
¿Qué sitio es este?
¿En que página estás?
¿Cuál es la función del sitio?
¿Por dónde crees que debes empezar?
¿Sobre que harías clic?
Cambios y conclusiones:
•
•
•
•
•
Los usuarios creen que deberían hacer clic en los titulares de las
secciones. Sólo cuando no encuentran la opción en las secciones buscan
en la barra de navegación.
Se opta por intercambiar la ubicación del calendario y la selección de zona.
Los usuarios tienden a hacer clic en el día del calendario antes de fijarse
en la posible selección de zona.
La etiqueta “DJ Charts” se cambiará por “Top Ten” y se seguirá evaluando.
Los usuarios resaltan la importancia de las fotografías. En un caso se
adivinó el tema de la página en función de la foto de un DJ. Siempre que el
peso de la página no aumente demasiado se añadirán fotografías.
Con relación a lo anterior, los usuarios encuentran los reportajes como lo
más importante.
Evaluación de variables concretas
En esta evaluación compararemos determinadas maquetas con una variable
concreta, es decir, cambiando un único elemento del diseño. Probaremos
distintos esquemas de colores, tipografías (véase Figura 62), etc. Se
elaborarán dos versiones de las maquetas a evaluar y en unas utilizaremos,
por ejemplo, un esquema de color con amarillos y azules y en la otra un
esquema de negros y naranjas (véase Figura 61). Los usuarios nos darán su
opinión.
136
CASO DE ESTUDIO
Figura 61
Maqueta digital de la página
de inicio.
Último borrador antes de
implementar.
137
Figura 62
Diversas maquetas de la
página de enlaces.
Revisamos el título de la
página: alineado a la
derecha (a), a la izquierda
(b) o con una tipografía
diferente (c).
(a)
(b)
(c)
Las conclusiones:
•
•
Dos de los tres usuarios evaluados optaron por un esquema de colores de
naranjas y negros.
Colocar el título de la página a la derecha no es un “handicap” que haya
que evitar obligatoriamente. Una vez han encontrado el título a la derecha
recordarán buscarlo la próxima vez en la misma ubicación. No es algo que
moleste a los usuarios.
PROTOTIPOS
Los prototipos proporcionan un marco de trabajo más útil para estudiar la
interacción de la estructura completa del sitio. Existen varios tipos de
prototipos: storyboards, pantallas de distribución o storyboards de uso
(wireframes) y prototipos de alta fidelidad (high-end prototypes).
138
CASO DE ESTUDIO
Storyboards
La cantidad de trabajo con storyboards es mayor que con la generación de
maquetas digitales o en papel, debido al número de pantallas que hay que
presentar. Además, aprovecharemos cuanto antes la oportunidad de probar y
poner en práctica el uso de las tecnologías que permitirán construir el sitio
web, programando los prototipos posteriores en XHTML y la interacción de
PHP con la base de datos MySQL.
Por esta razón, reduciremos la creación de storyboards a una evaluación
interna para diseño y desarrollo (véase Figura 63).
Figura 63
Storyboards del formulario
de administración de la
agenda.
(a)
(b)
Wireframes y prototipos de alta fidelidad
Para los prototipos finales diseñaremos páginas en XHTML lo más completas
y funcionales posibles.
Estas páginas servirán para evaluar el sitio justo antes de introducir contenido
real y para evaluar el sitio on-line. En las figuras siguientes podemos ver
algunos prototipos finales en la versión anterior al lanzamiento.
139
Figura 64
Prototipos finales.
Podemos ver la página
de la agenda de
eventos (a) y la página
de artistas (b).
(a)
(b)
140
CASO DE ESTUDIO
Figura 65
Prototipos finales.
Podemos ver la página
que se usará para
archivos no encontrados
(a) y el mapa del sitio (b).
(a)
(b)
141
Figura 66
Prototipos finales.
Podemos ver la página de
noticias (a) y una noticia en
concreto (b).
(a)
(b)
142
CASO DE ESTUDIO
Figura 67
Prototipos finales.
login para identificación
de usuarios (a) y la
página de administración
de la agenda (b).
(a)
(b)
143
Figura 68
Prototipos finales.
administración de artistas
(a) y la página de
administración de la citas
(b).
(a)
(b)
144
CASO DE ESTUDIO
TEST DE LOS PROTOTIPOS CON USUARIOS
Evaluación del primer prototipo
Comprobaremos que todavía se mantiene la usabilidad alcanzada con la
evaluación de las maquetas y empezaremos a realizar pruebas de tarea clave
con prototipos HTML. Haremos ver a los usuarios que hacen tareas que tienen
al alcance de su mano. Cuando la gente realiza tareas inventadas no se
implica emocionalmente, y no puede usar todo su conocimiento personal
[KRU01]. La lista de tareas es la que sigue a continuación:
Revisaremos la navegación.
¿Consiguen entender el sitio?
Tareas clave:
¿Puedes encontrar la biografía de tu DJ favorito?
¿Qué programación hay en tu club favorito el próximo día que salgas de
fiesta?
¿Cómo dejarías tu opinión en el foro?
¿Qué harías si estuvieras interesado/a en colaborar con
culturanocturna.com?
¿Puedes encontrar una noticia que se haya publicado hace una
semana?
• Navegación por placer.
•
•
•
Notas y cambios propuestos a través de las pruebas con los usuarios:
•
•
•
•
•
•
Originalmente, el calendario tenía resaltado el día actual. Esto confunde a
los usuarios cuando seleccionan otro día y se mantiene resaltado el día
actual, en vez del seleccionado. En página principal mantendremos el día
actual y en agenda se resaltará el día seleccionado.
La mayoría de usuarios tienden a hacer clic en las fotografías.
Intentaremos que todas las fotografías lleven a un contenido lógico.
Lo usuarios no tienen problemas para utilizar el calendario como buscador
de eventos. Es una metáfora efectiva.
En la agenda de eventos los usuarios intuyen correctamente que un
determinado campo es el lugar del evento. Sin embargo, esto les hace
pensar. Probaremos a introducir los nombres de los campos al inicio de la
tabla.
La mayoría de los usuarios tienden a hacer clic en titulares, aunque no
estén subrayados. Los convertiremos en vínculos.
La búsqueda de artistas no genera problemas, pero un usuario buscó el
nombre del artista por el apellido (buscó Ángel Molina en la M). Al no
encontrarlo optó por buscar por nacionalidad y entonces sí alcanzó la
tarea. Probaremos a introducir unas normas rápidas de búsqueda como
“no se tendrá en cuenta el prefijo DJ” o “busca por la letra inicial del
nombre artístico del DJ o productor”.
Evaluación del sitio en vivo
Una vez hagamos accesible on-line el sitio web, deberemos evaluar todo el
contenido disponible, así como todas las páginas. Además, en esta fase se
probarán extensiva y minuciosamente las páginas de administración.
145
146
CASO DE ESTUDIO
8
CASO DE ESTUDIO
IMPLEMENTACIÓN
USABILIDAD EN EL DESARROLLO DEL SOFTWARE
•
•
•
•
Arquitectura de aplicación lógica 3-tiered
Gestión de los Activos
Elección de las herramientas de desarrollo
Ingeniería de los componentes del sitio web
DISEÑO BÁSICO DE LA PÁGINA
ESCRIBIR PARA LA WEB
En esta fase agruparemos todo el trabajo de codificación y de desarrollo del
contenido final del sitio que hasta este punto hemos ido creando.
Durante el desarrollo del software, nos encontramos con la última oportunidad,
dentro del ciclo de vida, para prevenir problemas de usabilidad antes de la
evaluación final. Seguiremos un proceso bien documentado y unas simples
directrices para detectar y eliminar estos problemas potenciales.
USABILIDAD EN EL DESARROLLO DEL SOFTWARE
En esta fase del proyecto mejoraremos la usabilidad evitando los problemas
básicos que se producen en esta etapa:
•
•
•
•
•
Un tiempo de respuesta pobre;
Inconsistencia en el código de la página web;
Incompatibilidades entre plataformas;
Uso pobre de la tecnología;
Documentación insuficiente.
Para tal fin, no es necesario un tratamiento independiente de cada problema
de usabilidad, bastará con la aplicación de técnicas y buenas practicas de
desarrollo para solucionar múltiples de ellos.
Arquitectura de aplicación lógica 3-tiered
El desarrollo de la aplicación sigue una aproximación sistemática del tipo
“divide y vencerás” (divide-and-conquer) llamada arquitectura de 3 capas (3tiered architecture) [BRI02], [SAD00],[WHI98], debido a que distribuye la
arquitectura en las siguientes capas (véase Figura 69):
Capa 1. Capa de presentación o interface. La capa de presentación
representa la parte del sistema con la que interactúa el usuario. En una
aplicación web, generalmente la capa de presentación se divide en dos: el
lado servidor y el lado cliente. En el lado servidor ocurre toda la interacción
con la lógica de negocio, y es también donde se genera la interfaz del usuario.
En el lado cliente se presenta la interfaz generada en el servidor al usuario, de
forma tal que éste pueda trabajar con ella. Los datos o acciones reunidas por
el cliente son luego enviadas de vuelta al servidor para su procesamiento.
Capa 2. Capa de lógica de negocios o middleware. El comportamiento de la
aplicación es definido por los componentes que modelan la lógica de negocio.
Estos componentes reciben las acciones a realizar a través de la capa de
presentación, y llevan a cabo las tareas necesarias utilizando la capa de datos
para manipular la información del sistema. Incluye el servidor web y cualquier
programa que corra al lado del servidor, tales como CGIs o Java Servlets o
PHP.
Para sitios complejos, tales como aquellos que sirven contenido dinámico o
aplicaciones web, se usa además una tercera capa, la capa de servicios,
datos o backend.
Capa 3. Capa de datos o backend. La capa de datos tiene como misión la
administración de la información que maneja el sistema. Esto incluye el
almacenamiento, la actualización y la consulta de todos los datos contenidos
Capítulo 8: Implementación
149
en el sistema. En la práctica, esta capa es esencialmente un servidor de bases
de datos.
Figura 69
Ejemplo de Arquitectura 3tiered.
La implementación de un sitio
web se divide en 3 capas. La
capa de presentación, que
incluye todos los componentes
de la interfaz de usuario. La
capa de datos, que
proporciona servicios de bases
de datos. La capa de lógica de
negocio que conecta las
anteriores capas.
Las aplicaciones 3-tiered que funcionan de esta manera, tienen su origen en el
estándar del modelo de cliente-servidor (2-tiered), pues colocan un servidor
conteniendo una aplicación multiproceso (multithread) entre la aplicación
cliente y el servidor de almacenamiento (back-end).
En nuestro caso,
•
•
•
En el backend hacemos uso de la base de datos MySQL (descrita en
detalle en el ), estrechamente unida a la gestión de sesiones con PHP, que
permiten llevar un control sobre identificación de usuarios, necesario para
la administración.
El middleware responde a cuestiones como los datos a introducir en la
base de datos, la petición SQL y el uso general de PHP desde el lado del
servidor.
La interfaz de usuario se diseña a partir de XHTML generado por PHP que
se mostrará en el navegador del usuario. Se hace también un uso, lo más
escaso posible, de JavaScript y de la tecnología Flash.
En general, esta aproximación de desarrollo puede aplicarse a cualquier
proyecto, como puede observarse en la Figura 70.
Las ventajas del uso de esta arquitectura proporcionan al sistema en cuestión
una mayor estabilidad y robustez. Dicho sistema no necesariamente tiene que
encontrarse en una sola máquina sino también pueden ser manipulados a
través de cierto tipo de comunicación, específicamente mensajes que es como
se comunican las computadoras inmersas dentro de una red.
Además, el desarrollo y el mantenimiento es más sencillo y mejora la
escalabilidad y la seguridad. Separando lógicamente (y físicamente) las capas,
los componentes de cualquiera de estas pueden actualizarse o mantenerse
relativamente independientes de las otras capas.
150
CASO DE ESTUDIO
Figura 70
Arquitectura 3-Tiered
para el desarrollo
software.
Finalmente, las arquitecturas de 3 capas se usan a menudo para planificar
medidas de seguridad en el sistema. Esto se consigue normalmente
añadiendo cortafuegos (firewalls) entre cada capa. Por ejemplo, un protocolo
cortafuegos puede permitir peticiones HTTP a través del servidor web, pero no
peticiones Telnet que permitieran a usuarios externos controlar el servidor
web. Entre la capa de lógica de negocio y la capa de datos se sitúa un
cortafuegos de dominio que solamente permite servicios para ser
suministrados a maquinas dentro del domino de confianza.
Mapeo de los flujos de datos y control
Existen varias maneras de representar visualmente el flujo de control y de
datos basándonos en una arquitectura de 3 capas:
Una traza de petición dinámica (dynamic request trace) especifica el flujo de
datos producido al cumplir una tarea de usuario determinada y el orden en que
ocurre el intercambio de información.
La muestra una traza dinámica para la tarea de administración de un
contenido genérico, que incluye las tareas de identificación (login), búsqueda
de la información a administrar, selección de esa información y confirmación.
151
Figura 71
Traza de petición
dinámica.
Este diagrama traza el flujo
de datos a través de los
componentes del sistema.
De una manera general
muestra como se procesa
una petición de acceso y
como se genera la
confirmación a través de una
arquitectura 3-tiered.
Los diagramas de latencia del sistema (system latency diagrams) son útiles
para mostrar como contribuye cada función del sistema al total del tiempo que
conlleva realizar una tarea en concreto. Es especialmente útil para optimizar la
ejecución del sistema y reducir los efectos de los cuellos de botella. No hemos
trabajado con estos métodos directamente, así que no profundizaremos más
en ellos.
Gestión de los Activos
La gestión de los activos es la práctica sistemática del seguimiento de los
diversos recursos del sistema, tales como imágenes, ficheros de contenido y
ficheros HTML. Para ello, organizaremos cuidadosamente el sitio desde el
primer momento para administrar mejor los archivos del sitio, controlar los
vínculos y actualizar las páginas (véase Figura 72).
•
•
•
•
Dividiremos el sitio en categorías. Colocaremos las páginas relacionadas
en una misma carpeta. Este tipo de organización facilitará el
mantenimiento y la navegación por el sitio. Por ejemplo, a la hora de
mostrar las migas (breadcrumbs).
Administración. Los archivos correspondientes a la administración y
gestión de contenidos del sitio web se separarán del resto de ficheros
públicos. Todos los ficheros de la sección de administración irán protegidos
por autentificación de usuario.
Imágenes y otros activos. Colocaremos todas las imágenes y fotografías
en sus emplazamientos propios, a fin de facilitar su localización cuando
queramos insertarlas en la página.
Uso de la misma estructura para el sitio local y el remoto. El sitio local y el
sitio web remoto tendrán exactamente la misma estructura.
Elección de las herramientas de desarrollo
A la hora de evaluar que herramientas usaremos para el desarrollo del sitio
web, consideraremos cuatro áreas generales de la usabilidad de éstas:
gestión del proyecto, gestión del sitio y los activos, soporte a la codificación y
152
CASO DE ESTUDIO
soporte a la tecnología. Veamos las características que nos serán
particularmente útiles:
Figura 72
Imagen de la estructura de
directorios de
Gestión del proyecto. Soporte para las siguientes áreas:
•
•
•
Colaboración y control de versiones.
Notas de diseño: la capacidad para añadir notas o tareas a páginas
individuales con referencias a su estado actual.
Facilidad para la gestión del proyecto: soporte para asignar tareas y
producir informes de estado.
Gestión del sitio y los activos:
•
•
•
•
•
Mapas del sitio: que pueda mostrarse visualmente en estructura de árbol o
diagramas.
Importación y exportación del sitio.
Vista de los activos: para organizar los activos de un tipo particular de una
manera coherente.
Creación de plantillas.
Transferencia de archivos: poder transferir las páginas modificadas
automáticamente al servidor.
Soporte al código:
•
•
•
Coloreado del código.
Chequeo de la sintaxis.
Chequeo de los links: para controlar los enlaces inválidos o muertos.
153
•
•
•
•
•
•
•
Chequeo de accesibilidad: asegurar que todas las etiquetas ALT y otros
elementos de código usados aseguren igual accesibilidad al contenido.
Sangría de código: para ayudar al desarrollador a organizar el código de
una forma legible.
WYSIWYG y vistas de código: capacidad para cambiar fácilmente entre el
código y las vistas del diseño de la pagina
Edición y depuración de scripts.
Creación de tablas con herramientas gráficas.
Creación de formularios rápidamente con técnicas de arrastrar y soltar.
Sin mutilación del código: las herramientas automatizadas nunca
cambiaran el código creado a mano.
Soporte a la tecnología especializada:
•
•
•
•
•
Dependencia de tecnologías de servidor no estándares.
Soporte para la creación, mantenimiento y uso de hojas de estilos.
Soporte XHTML.
Integración de bases de datos.
Soporte de plug-in para tecnologías de terceros que no soporta
directamente.
Optaremos por el uso de Macromedia Studio MX, como suite integrada para la
producción de nuestro sitio web. Cumple todos los requisitos expuestos
anteriormente e incluye programas de diseño gráfico como son Fireworks MX
y FreeHand 10, que utilizaremos en el diseño de los elementos de la interfaz y
en el retoque de fotografías para la web. También se acompaña del programa
Macromedia Flash MX para la creación e inclusión de contenido Flash en
nuestro sitio.
Debido a la mayor disponibilidad de estas herramientas en entornos Windows,
se desarrollará en esta plataforma, aunque el servidor y el gestor de base de
datos correrán en una plataforma Linux, más estable e infinitamente más
segura trabajando con el típico LAMP (comentado con mas detalle en el ).
Ingeniería de los componentes del sitio web
El desarrollo del sitio web de culturanocturna.com puede descomponerse en
dos esfuerzos generales de desarrollo: el lado cliente (client-side) y el lado
servidor (server-side).
El desarrollo del lado del cliente consistirá en tres áreas generales:
construcción de la página, scripting y programación del lado del cliente:
• La construcción de la página se refiere al formateo del contenido y diseño
de páginas individuales con XHTML, tanto como integrar otras tecnologías
dentro del HTML, como applets Flash.
• El scripting del lado del cliente incluye Javascript que se incluyen como
parte de la página web e interactúan con componentes visuales de ella.
• La programación del lado del cliente incluye programas Flash que corren
primariamente en las plataformas del usuario.
El desarrollo del lado servidor estará clasificado en dos componentes:
programación PHP e integración y desarrollo de bases de datos:
• La integración de la base de datos MySQL y la programación del lado del
servidor se realiza en lenguaje PHP, comentado detalladamente en el .
154
CASO DE ESTUDIO
•
El desarrollo de bases de datos incluye el diseño de las bases de datos
que alimenta las paginas dinámicas. Se comenta brevemente el uso de la
base de datos MySQL en el .
Usaremos algunas técnicas de desarrollo del código para prevenir los tipos de
problemas de usabilidad ya comentados anteriormente:
Técnicas de construcción de páginas HTML
•
•
•
•
•
•
Codificación para velocidad: para que el tiempo de descarga sea de un
máximo de 10 segundos a la velocidad de conexión media de los usuarios,
el tamaño de archivo para usuarios provistos de MODEM ha de ser menor
de 50Kb.
Codificación para mantenimiento: documentaremos el código con profusión
de comentarios.
Codificación para calidad: se pueden eliminar la mayoría de los problemas
de compatibilidad de navegadores de una página con sólo verificar si el
código es correcto, pasándolo por un validador. La parte más difícil de
corregir problemas pequeños es encontrarlos en primer lugar. Para eso
sirve el validador. Validaremos nuestras páginas usando servicios de
validación disponibles en la red, para garantizar la estandarización del
código. Podremos validar todos los tipos de HTML y XHTML, así como
archivos CSS. Los validadores se encuentran en el sitio web del W3C:
Servicios de validación de HTML y XHTML (http://validator.w3.org/)
Servicio de validación de CSS (http://jigsaw.w3.org/css-validator/)
Codificación para los motores de búsqueda: como primera medida
añadiremos los campos adecuados a los ‘metatags’.
Codificación semántica en vez de la presentación por código: debido a la
gran diversidad en el software que se emplea para acceder a la web. Para
los navegadores basados en voz y para las computadores no tradicionales.
En vez de integrar las especificaciones de apariencia en el contenido, una
solución más apropiada pasa por separar el contenido de las instrucciones
específicas sobre la visualización. La información relativa a la presentación
de la información habría que mantenerla en un archivo de hoja de estilos
separado que estaría vinculado a un archivo de contenido que solo incluiría
marcado semántico.
Prepararemos el sitio para el futuro con XHTML: HTML ha llegado al final
de su vida y ya no se desarrolla como un lenguaje de marcación. Su
reemplazo es HTML ampliable (en inglés XHTML): una implementación de
XML que funciona en todos los navegadores, tanto los antiguos como los
nuevos. Aunque XHTML es puro XML, sus etiquetas y atributos son tan
similares a HTML que los navegadores antiguos no notan la diferencia. El
uso de XML tiene ventajas porque es una norma moderna y preparada
para el futuro.
Programación del lado del cliente
•
Incluiremos JavaScript y Flash en el lado del cliente. Mediante la inclusión
de estas técnicas, la interacción con el usuario se vuelve muy rica,
proporcionando posibilidades ilimitadas en la interfaz y un comportamiento
dinámico sin acceder al servidor, sin embargo ese poder puede tener un
precio. Codificaremos defensivamente (por ejemplo, envolviendo las
rutinas en etiquetas de comentario para que los navegadores antiguos las
ignoren) y daremos al usuario el control, dejándoles tener la elección de
usar esta tecnología, de tal manera que si no hacen uso de ella
155
•
proporcionaremos alternativas posibles. En todo caso, reduciremos en lo
posible los requisitos de la parte del cliente.
Exportaremos JavaScript y CSS a archivos externos: con ello lograremos
centralizar el código, ya que si tenemos que hacer cambios sólo es
necesario hacerlo una vez para cada página que lo utiliza, y ahorrar ancho
de banda, ya que el cliente sólo descarga los archivos de JavaScript y CSS
una vez, en lugar de una vez por página.
Programación PHP
Escribiremos el código para un fácil mantenimiento, añadiendo comentarios y
modularizando y encapsulando siempre que nos sea posible. Codificaremos
atendiéndonos a los estándares del PEAR, comentado en el . No
dependeremos exclusivamente de la validación de la parte del cliente para las
entradas.
Integración de base de datos
culturanocturna.com hace uso de tres bases de datos relacionales: una base
de datos para gestionar el foro, una propia para las encuestas de la página de
inicio y la base de datos ‘culturanocturna’, que comprende tablas con
prácticamente todo el contenido del sitio web, como son las tablas de la
agenda, los artistas, los clubes, las citas, los reportajes o las noticias. Veamos
como ejemplo una muestra de 6 tablas de las 16 que conforman la base de
datos:
TABLE agenda (
TABLE artista (
id int(10) unsigned - auto_increment,
fecha date - default '0000-00-00',
artista varchar(40) - default '',
zona varchar(40) - default '',
nombre varchar(40) - default '',
fiesta varchar(40) default NULL,
pseudonimo varchar(80) default NULL,
artistas tinytext -,
nacionalidad varchar(20) default NULL,
club varchar(40) - default '',
sello varchar(40) default NULL,
horario varchar(20) - default '',
url varchar(80) default NULL,
precio varchar(7) - default '',
biografia enum('si','no') - default 'no',
recomendado enum('si','no') - default 'no',
entrevista enum('si','no') - default 'no',
revisado enum('si','no') - default 'no',
chart enum('si','no') - default 'no',
PRIMARY KEY (id)
PRIMARY KEY (id)
);
);
156
TABLE club (
club tinytext -,
poblacion tinytext -,
provincia tinytext -,
comunidad tinytext -,
direccion tinytext -,
cp tinytext,
horario tinytext -,
telefono tinytext,
mail tinytext,
url tinytext,
PRIMARY KEY (id)
);
TABLE disco (
artista varchar(40) - default '',
titulo varchar(40) - default '',
sello varchar(40) - default '',
autor varchar(20) - default '',
critica mediumtext -,
PRIMARY KEY (id)
);
TABLE especial (
TABLE noticia (
CASO DE ESTUDIO
titulo varchar(40) - default '',
autor varchar(20) - default '',
intro tinytext -,
especial text -,
PRIMARY KEY (id),
FULLTEXT KEY titulo (titulo)
);
fecha date default NULL,
autor varchar(20) default NULL,
titulo varchar(150) default NULL,
intro tinytext,
noticia mediumtext,
PRIMARY KEY (id)
);
DISEÑO BÁSICO DE LA PÁGINA
Dado que no existe forma de saber el tamaño que pueden tener las pantallas
de los usuarios, hay que diseñar para todas las resoluciones de pantalla (en
otras palabras, páginas independientes de la resolución que se adapten al
tamaño de la pantalla en la que se vayan a visualizar). El principio básico del
diseño independiente de la resolución consiste en no usar nunca un ancho de
píxel fijo para ninguna tabla, marco o elemento de diseño (exceptuando las
barras finas en la parte lateral de la página). En vez de usar tamaños fijos,
habrá que especificar diseños como porcentajes del espacio disponible
(véanse Figura 73, Figura 74, Figura 75 y Figura 76).
Las dimensiones de una página web son entidades movibles dinámicamente
que se niegan a permanecer constantes. Pero existen consistencias en las
que podemos confiar (véase Tabla 4):
La esquina superior izquierda es estática: es el único lugar en el que podemos
confiar, todo lo demás puede cambiar. Las páginas se cargan de arriba abajo,
de manera que la esquina superior izquierda es estática y las esquinas
derecha e inferiores variarán.
Algunos navegadores no muestran el contenido de una tabla hasta que se
haya cargado todo lo que hay dentro de la tabla (por lo que no encerraremos
toda la página en una tabla).
Figura 73
Página de inicio con una
resolución de 800X600 y
tamaño de letra mediano.
157
Figura 74
Página de inicio en una
resolución de 1024x768,
con un tamaño de letra
mediano.
Figura 75
resolución de 1024x768,
con el mayor tamaño de
letra disponible en el
navegador.
El espacio blanco, aunque pueda parecer que es una perdida de espacio,
puede ser efectivo en la organización y soporte de la estructura de la página.
Mientras que el espacio blanco vertical puede ser útil para diferenciar entre
secciones de contenido, el espacio horizontal tiene un coste más alto –es
inadmisible un gasto gratuito de espacios en blanco horizontales. Los espacios
en blanco pueden ayudar a los usuarios a entender el agrupamiento de la
información. Si tenemos la opción de separar dos segmentos de contenido con
una línea gruesa o con espacios en blanco, normalmente será mejor utilizar la
solución de los espacios en blanco, que suele descargarse antes [NIE99].
158
CASO DE ESTUDIO
Figura 76
ventana reducida del
navegador a una
resolución de 1024x768 y
tamaño de letra mediano.
Tabla 4
Anchos y altos de página
y resolución comunes
para soluciones de ancho
Plataforma
fijo.
Esta tabla presenta las
dimensiones recomendadas
PC
a las que el diseño
debería
ajustarse para plataformas
y
Internet Explorer
5.0
resoluciones de pantalla
Netscape 4.5
especificas.
Espacio de
pantalla usado
por los
navegadores (en
Píxeles)
AREAS SEGURAS DE RESOLUCIÓN
(Ancho x Alto)
Resoluciones de pantalla
640 x 480
800 x 600
1.024 x 768
43 x 160
46 x 125
597 x 320
594 x 355
757 x 440
754 x 475
981 x 608
978 x 643
53 x 152
44 x 130
587 x 328
596 x 350
747 x 448
756 x 470
971 x 616
980 x 638
MacOs
Internet Explorer 5.0
Netscape 4.7
ESCRIBIR PARA LA WEB
Escribir para la web no es lo mismo que si lo hiciéramos para un medio
impreso. Hay algunos aspectos básicos de la web que afectan a la manera de
escribir el texto:
•
•
•
Las páginas son fáciles de cambiar y fijar y por lo tanto son más
transitorias que el papel.
La población de usuarios generalmente sabe algo de ordenadores e
Internet.
El contexto de la web es normalmente más informal que el papel.
159
•
•
La tecnología restringe la navegación y la muestra del texto.
Y el texto puede contener enlaces y otros elementos interactivos.
En el apéndice GUÍA DE ESTILO PARA ESCRIBIR CONTENIDO hemos
incluido una guía de estilo que define la manera de desarrollar contenido
escrito para culturanocturna.com.
Además, debemos tener en cuenta el texto que no aparece como contenido en
la página:
•
•
•
•
•
Títulos de página, texto ALT, cabeceras, ‘metatags’ y botones.
Usaremos títulos en los enlaces para indicar el tipo de enlace, ya que
algunos navegadores usan el parámetro TITLE que muestra un mensaje
especifico cuando el usuario posiciona el puntero del ratón sobre el
vínculo: <a href=”http://www.culturanocturna.com” title=”Página de inicio de
culturanocturna.com”>culturanocturna.com</a>
Podemos prevenir que en los vínculos se partan las palabras usando
“espacios sin partición” (nonbreaking spaces,   en HTML).
No ocultaremos las direcciones de correo dentro de un enlace. Es decir,
usaremos vínculos del tipo mailto: <a href=”mailto: culturanocturna@
culturanoturna.com”>contacta con culturanocturna</a>
Evitaremos el tag <BLINK>, es muy molesto para los usuarios.
Una buena manera de testear páginas para su accesibilidad por lectores de
pantalla es verlas en un navegador de texto con una interfaz por teclado, como
es el Lynx.
160
CASO DE ESTUDIO
9
CASO DE ESTUDIO
LANZAMIENTO
PRE-LANZAMIENTO
•
•
•
Registro del nombre de dominio
Quality Assurance
Severidad de los errores
•
•
•
•
Promoción del sitio web
Directorios y motores de búsqueda
Enlaces en páginas afines
Resolución rápida de problemas
•
Análisis de los Hit Logs
LANZAMIENTO
POST-LANZAMIENTO
El lanzamiento del sitio web no es un evento aislado que se alcanza en el
momento en el que el sitio está preparado, sino que requiere un conjunto de
actividades y de preparación. En los momentos previos al lanzamiento, es
necesario un extenso proceso que nos garantice la calidad (QA) y, en el
lanzamiento debe evaluarse una diversidad de elementos críticos. Después
del lanzamiento, deberemos promover y mantener el sitio y continuar
evaluando su ejecución.
PRE-LANZAMIENTO
En el diseño web se dice que es más probable encontrar el Santo Grial que
una web que cumpla con la fecha de lanzamiento. Por esa razón, entre otras,
se incluye en la planificación del desarrollo del proyecto un tiempo añadido
(10%) para tratar con situaciones inesperadas que seguramente acontecerán.
Registro del nombre de dominio
Uno de los pasos cruciales en la planificación es asegurarse que hemos
seleccionado y registrado el nombre de dominio antes del lanzamiento.
Elegiremos el nombre de domino .com, ya que los navegadores por defecto se
dirigen al .com cuando se omite la extensión. Además, considerando posibles
alternativas, registraremos los siguientes nombres de dominio:
•
•
•
•
culturanocturna.com
culturanocturna.net
cultura-nocturna.com
culturanocturna.org
Quality Assurance
Los procesos de garantía de calidad (QA) tendrán lugar durante el proceso de
producción.
•
•
•
•
•
Test con regresión: significa volver a efectuar un test después de efectuar
cambios para la resolución de un error. Verifica dos cosas, que el cambio
que se ha hecho soluciona el problema identificado y que el cambio no
deshace nada más en el proceso.
La introducción de nuevos problemas puede ser minimizada si se
documentan los cambios hechos y los test ejecutados.
Test basado en la tarea: examinaremos y comprobaremos que las tareas
que han sido definidas pueden llevarse a cabo satisfactoriamente.
Bosquejaremos una lista formal de las tareas y los resultados que deberían
alcanzar los usuarios.
Test de código: revisión del código y de la capacidad del servidor para
cumplir los requisitos tecnológicos.
Test de carga: comprobaremos los tiempos de respuesta del sistema.
Severidad de los errores
Un objetivo común para un lanzamiento sin errores consiste en eliminar todos
los problemas de objetivo crítico (mission-critical), que son fatales porque no
permiten alcanzar la meta del usuario (por ejemplo, la ausencia de un botón
enviar), eliminar la mayoría de los problemas moderados, que son problemas
Capítulo 9: Lanzamiento
163
que permiten realizar la tarea pero con obstáculos (por ejemplo, que el botón
enviar se llame ‘ok’) y tantos problemas menores como podamos permitirnos
(no causan obstáculo, como por ejemplo que el botón esté mal alineado).
Tipos de errores
•
•
•
•
Errores estéticos: problemas de carga de imágenes, fallos en el
alineamiento, problemas de legibilidad, colores, tipos y distribución de la
presentación.
Errores estructurales: diseños estructurales con relación a la arquitectura
de la información, como por ejemplo llegar a páginas sin vínculos de salida
o la ausencia de un vínculo desde reportajes a fotos.
Errores de plataforma: aparecen solo en hardware específico, sistemas
operativos o configuraciones de navegadores diferentes.
Errores de código: como por ejemplo un mal calculo del precio total.
La manera de tratar con ellos es probar continuamente y en todo momento.
Para ello podremos utilizar el formulario incluido en el apéndice FORMULARIO
DE INFORME Y RESOLUCIÓN DE PROBLEMAS.
Además, realizaremos una evaluación automática que consistirá en el uso de
software que detecte problemas elementales, como por ejemplo:
•
•
•
•
•
Tamaños absolutos de fuentes y de tablas .
Formato de los textos.
Tamaño de las páginas.
Tiempos de descarga.
Enlaces rotos.
Usaremos los recursos de dominio público de Web Metric Tools. La ventaja de
esta evaluación es la rapidez, pero no detecta cuestiones globales de
usabilidad, las más importantes. Muchas de las cuestiones cruciales sólo
pueden ser detectadas de forma heurística. Aún así es un buen punto de
partida que permite ahorrar trabajo posterior.
LANZAMIENTO
Una vez realizados y pasados con éxito los test anteriores, durante la etapa de
lanzamiento cumpliremos los siguientes pasos:
•
•
•
•
164
Ejecutaremos el chequeo del nombre de dominio final para asegurarnos
que el encaminamiento DNS funciona.
Copiaremos los ficheros en la plataforma servidor.
Realizaremos un chequeo final de la funcionalidad. Testearemos
direcciones de correo, formularios, interacciones con las bases de datos,
tiempos de descarga, etc.
Revisaremos la lista de control de post-producción, que permite testear
decisiva y rápidamente la calidad del HTML en el que se basa la página.
La podemos encontrar en el apéndice REVISIÓN DE LA POSTPRODUCCIÓN.
CASO DE ESTUDIO
Promoción del sitio web
A continuación vendrían una serie de actividades de promoción del sitio. Los
usuarios deberán ser capaces de encontrar nuestro sitio cuando naveguen por
Internet. Si no pueden encontrar el sitio, no lo podrán usar. ¿Cómo podemos
encontrar un sitio? Hay tres formas principales [BAE02]:
•
•
•
Directa: conocemos la dirección del sitio ya sea por publicidad en medios
de comunicación tradicionales o por medio de otra persona.
Navegando: para esto deben haber enlaces al sitio, ya sea mediante
publicidad en Internet o por otras razones.
Usando un buscador: para esto el buscador debe haber previamente
encontrado el sitio.
La primera forma es cara si usamos publicidad o lenta si esperamos a que las
personas pasen la buena nueva. La segunda forma es la natural, pero sólo
llegaremos a los sitios con más recursos o que son populares. La tercera
opción es la más sencilla y además es casi la única para sitios nuevos o sitios
pequeños. Al concepto de estar en la Web y poder ser encontrado y visto se le
llama ubicuidad. Ubicuidad tiene dos partes: el poder encontrar el sitio, que se
llama buscabilidad. Para usar un sitio Web después de encontrarlo, hay que
poder verlo. Al concepto de poder ver un sitio se le llama visibilidad.
Directorios y motores de búsqueda
Describiremos el sitio de acuerdo a las necesidades de información de los
usuarios. Hay varias maneras de incrementar las oportunidades de que
nuestro sitio aparezca en las listas de los motores de búsqueda:
•
•
Colocaremos las palabras claves en sitios cruciales dentro de las páginas
web para que los buscadores puedan encontrar fácilmente esta
información y extraerla. El título de la página es lo más importante. Una de
las causas más comunes por la que una página muy buena y relevante
muestra un ranking muy bajo es porque no hay palabras claves en el título.
También utilizaremos palabras claves en los primeros párrafos de la
página web. Normalmente los buscadores suelen extraer del título hasta
los primeros 60 a 80 caracteres (aunque hay excepciones), intentaremos
introducir el texto más importante dentro de estos límites. Si utilizamos
tablas pueden hacer que el texto no aparezca arriba del todo desde el
punto de vista del buscador (aparece arriba para los usuarios, pero si
miramos el código fuente de la página el texto aparecerá mucho más
abajo).
El uso de ‘metatags’ simplifica la tarea de indexar una página web (sólo en
los buscadores que soportan ‘metatags’) por los spiders de los buscadores.
Las ‘metatags’ más importantes son: el título, descripción y palabras
claves. Insertar ‘metatags’ es una manera de controlar la información que
el buscador extraerá de nuestra página.
Enlaces en páginas afines
Intercambiaremos enlaces con otros sitios. Especialmente aquellos cuya
temática extienda la de culturanocturna.com. Esta es la mejor forma de
mejorar la posición en las respuestas, ya que los buscadores más importantes
usan la estructura de enlaces para jerarquizar sus resultados.
165
Resolución rápida de problemas
Para una rápida verificación de que el sitio permanece estable después de una
actualización menor, podemos usar la lista de control del apéndice LISTA DE
CONTROL PARA UN MANTENIMIENTO MíNIMO, que nos permitirá
garantizar la calidad (QA) del procedimiento.
POST-LANZAMIENTO
Una vez lanzado el sitio web, estudiaremos el uso que hacen los visitantes del
sitio. Hay que ser cuidadoso a la hora de interpretar datos como los que se
generan en el log del servidor. Estos métodos de evaluación pueden ayudar a
rediseñar un sitio web, pero sus resultados deben ser interpretados con
cautela. Aunque son capaces de dar mucha información y de obtener teóricos
índices de la usabilidad de un sitio, no dicen como se ha de diseñar de manera
usable.
Análisis de los Hit Logs
Técnicamente el log de visitas es un archivo creado por el servidor donde se
registran las acciones que los usuarios generan en la web.
Como todo método de recogida de información el log presenta una tolerancia
en su precisión. El principal problema que tiene el log es que nos puede dar
menos visitas de las que realmente se están produciendo. La caché (del
navegador o del servidor proxy) harán que múltiples visitas cuenten como una
única vista y que movimientos de avance y retroceso puedan no quedar
registrados en el log.
El otro problema es el no poder contar con la velocidad de conexión del
usuario. Al no tener esta referencia, el tiempo de conexión se convierte en un
parámetro algo incierto. Del tiempo de conexión, ¿cuánto se dedica a la
bajada de datos y cuanto a tiempo de lectura?
Además, como hemos dicho, en estos estudios los parámetros registrados no
siempre son buenos como predicción de la usabilidad. Por ejemplo,
supongamos que una página en particular recibe el 65 por ciento de las visitas
(hits). Podríamos pensar que esa página debe ser la preferida por los
usuarios, que debe ser muy útil. Sin embargo, en realidad, puede ser que
nuestra estructura de navegación fuerce a la mayoría de los usuarios a cruzar
esta página para obtener la información que realmente están buscando.
Así pues, es la relevancia de los datos lo que importa, no los números en
‘crudo’. Para valorar los resultados de nuestro log, deberemos comparar. Lo
mas normal es comparar los datos de forma interna viendo la evolución en el
tiempo (comparando el número de visitas mes a mes, número de páginas
vistas, duración de las visitas). Esta comparación nos dará una idea sobre la
evolución del sitio, como cambios en la portada pueden afectar al número de
páginas vistas, reducción del peso del sitio y la evolución de tiempo de
permanencia, etc.
A la hora de comparar debemos seleccionar elementos que presenten
equivalencias. A parte de comparar valores absolutos en distintos periodos de
166
CASO DE ESTUDIO
tiempo, deberemos ser capaces de comparar los resultados de páginas
similares. Páginas de menú, fichas de artistas, formularios... deberán ser
extraídas del log para ver información sobre el tiempo de permanencia,
siguiente página, página de referencia, etc. Esta comparación resultará más
sencilla cuanto más homogéneo sea nuestro sitio (ya que podremos aislar las
variables).
Por último, el ser capaz de representar los datos de forma comprensible para
nuestra audiencia es un paso muy importante para mostrar la validez del
sistema y poder justificar el desarrollo de esta fuente de información.
Utilizaremos dos herramientas de dominio público y código Open Source para
el análisis de nuestros logs: Webalizer (http://www.mrunix.net/webalizer)
(véase Figura 77) y Analog (http://www.analog.cx).
Figura 77
Análisis de logs con
Webalizer.
167
168
CASO DE ESTUDIO
10
CONCLUSIONES Y LÍNEAS FUTURAS
CONCLUSIONES
ESTADO ACTUAL
LINEAS FUTURAS
•
•
•
Métricas del éxito
Publicidad
Futuras extensiones
El diseño de interfaces web es un tema complejo en el que no sólo intervienen
procesos de diseño gráfico y programación, sino que también resultan
imprescindibles aspectos de la arquitectura de la información, navegación,
funcionalidad y, sobretodo, de la usabilidad.
Actualmente, nos encontramos en un momento de cambio y maduración en el
diseño web. Poco a poco se tenderá a hacer las cosas más sencillas, más
fáciles de usar y más adaptadas a las necesidades del usuario final. En esta
era, las soluciones interactivas se van a adaptar al usuario y no al revés, como
ha venido sucediendo. El futuro del diseño web deberá concentrarse, de
hecho, mucho más en las necesidades y capacidades del usuario. Esto, que
inicialmente puede parecer trivial, significa un cambio fundamental en la
manera de conceptuar, diseñar, desarrollar, lanzar y explotar una solución
interactiva como lo es un sitio web. Significa también un cambio fundamental
en la metodología de diseño utilizada.
El objetivo principal de este proyecto ha sido el estudio y la aplicación de una
de estas metodologías de diseño web, concretamente el Modelo de Proceso
de la Ingeniería de la Usabilidad. El seguimiento de este modelo ha primado la
accesibilidad, la ortogonalidad, la robustez (hay poquísimo JavaScript y no
limita la navegación), la velocidad de descarga y en general todo aquello que
favorece la usabilidad en un sitio web. En nuestro caso, un portal administrado
dinámicamente, lo que actualmente se denomina un sistema de gestión de
contenidos para la web.
Posteriores evaluaciones del sitio en vivo demostrarán que es una web fácil de
aprender, usar y recordar.
A continuación, recogeremos una serie de conclusiones finales, experiencias y
conocimientos destacados y otras reflexiones:
•
•
•
La creación de un sitio web requiere formar un equipo multidisciplinario. No
basta con el perfil creativo y el técnico informático. Debemos involucrar a
personas que hasta ahora permanecían calladas y considerar nuevos
perfiles, así como nombrar una única persona capaz de liderar el proyecto
y de tomar las decisiones finales. Así pues, son obvias la complejidad y las
limitaciones que supone llevar el peso del proyecto en una sola persona,
en vez de la integración de un conjunto de programadores, diseñadores
gráficos, evaluadores, etc.
Consecuencia del punto anterior es el caso de la evaluación heurística.
Estas evaluaciones las efectúan expertos en usabilidad. En nuestro caso
esas heurísticas han sido realizadas desde la posición y los conocimientos
de un servidor. Estrictamente no serían válidas, pero dada la situación, el
presupuesto (nulo) y la máxima de que “es mejor una evaluación heurística
que ninguna”, podemos considerar que han cumplido su función.
Sobretodo en que han servido como herramienta de diseño seguidas como
directrices a la hora de implementar y diseñar.
Un diseño y producción centrado en el usuario significa que debemos
involucrar lo máximo posible al usuario final durante todo el ciclo de vida
del sitio web, el único problema es que no hay usuario medio. Una
complejidad añadida, ya que todos los usuarios de la web son únicos. La
manera de afrontar este hecho no es determinar lo que a la mayoría de los
usuarios les gusta o no, sino tener en cuenta que existen formas de
diseñar las páginas que son claramente erróneas.
Capítulo 10: Conclusiones
171
•
•
•
•
•
172
Otra conclusión respecto a los usuarios es que el trato y trabajo con ellos
no puede ser considerada una tarea trivial. En ocasiones, no es fácil
motivarlos y mantenerlos prestando una cierta atención cuando no se
ofrece nada a cambio de su colaboración. En otras ocasiones, no nos
ofrecen respuestas de valor (los usuarios tienen la “manía” de responder
algo si les preguntamos algo. Y si le plantemos planteamos algo que el no
se habría planteado nunca, pues obtendremos una respuesta poco valida).
Sin embargo, por regla general se sienten importantes al pedirles que
efectúen las pruebas y se esfuerzan y ayudan en la medida de lo posible.
Por supuesto, queda demostrado lo enriquecedor que resulta observar al
usuario real probando el diseño. Incluso cuando resulta complicado medir
la satisfacción del usuario (¿Cómo se supone que juzga un usuario que
algo es "fácil de usar"?), lo que supone tener en cuenta el valor intangible
de lo emocional y de lo subjetivo para que un objeto sea ampliamente
aceptado. Y aquí entraríamos en el campo de la emoción, que es extenso
y se aleja del alcance de este proyecto.
Es fundamental que tengamos claro que el diseño web no se basa en el
control absoluto de la apariencia (esto es totalmente imposible), sino en la
sugerencia visual. Debemos limitarnos a sugerir una presentación y
diseñar en consecuencia, sabiendo que el usuario puede variar (con o sin
conocimiento) la apariencia visual de nuestra página.
Ya se ha comentado en el la dificultad que supone hacer una estimación.
Corroboramos este hecho y admitimos un abultado margen de error, mas
cuando, como ya hemos comentado, un alumno de un TFC no se
encuentra en una situación ideal para realizar buenas estimaciones.
La usabilidad es, en muchas ocasiones, un concepto esquivo y abstracto.
Si, en ocasiones, no es fácil definirla, menos lo es medirla. El término ya es
en sí una traducción del inglés (usability) no aceptada por la Real
Academia de la Lengua y se barajan muchos conceptos relacionados con
ella. Las percepciones previas al uso real de un producto afectan al
proceso de decisión, "lo uso o no lo uso" y aquí tienen mas fuerza
muchísimas otras variables: necesidades del usuario, atractivo, estetica,
mostrar o mejorar el estatus social, la identificación con un grupo social,
etc. Pero la gente no va por ahí planteándose la usabilidad de las cosas
hasta que no las ha usado.
Por último, una pequeña crítica al concepto actual de usabilidad debido a
que el mercado ha malinterpretado el concepto. Sufre a veces una
pequeña desvirtualización proveniente del radicalismo con el que se ha
introducido el concepto en los últimos años (links azules subrayados, fuera
Flash, etc.), cuando ha demostrado que, cuando conviene, resulta fácil
cambiar el rumbo del concepto (especialmente en el uso del Flash, véase
[NOT02]). Creemos que la Web es demasiado grande para que reine un
paradigma. Algunos sitios necesitarán explosiones intensivas de marcas
que los principios de Nielsen no permitirían y otros sitios necesitarán
nociones básicas de navegación y tiempos de descarga rápidos. Como
todo en la vida, la usabilidad es una elección que dependerá del contexto y
fundamentalmente del uso que se le dé a cierta tecnología. Tal como
afirma Douglas Thornsjo, auto editor de Millennium, “no seremos juzgados
por nuestra tecnología: sino por el uso que hicimos de ella". Pero no
debemos olvidar que pensar en la usabilidad de los sitios web, no es una
opción: es una necesidad inevitable.
CONCLUSIONES y LÍNEAS FUTURAS
ESTADO ACTUAL
El estado actual del sitio web requiere todavía de muchas pruebas a realizar,
como son las de mantenimiento, corrección de errores y evaluación del sitio en
vivo. De todas formas, estas tareas están ya especificadas y documentadas.
Además, tendremos en consideración que muchas de las situaciones que
puedan llegar a surgir son, actualmente, inestimables.
culturanocturna.com es un proyecto web vivo, su contenido debe ser
administrado constantemente y su crecimiento es continuo. El sitio deberá
funcionar a partir de ahora por su contenido y no por sus valores de
producción. Las razones por las que los usuarios volverán a visitar nuestro
sitio web constituyen la base de un buen diseño web, ya que son las cuatro
cosas que más persiguen los usuarios [NIE99]:
•
•
•
•
Contenido de gran calidad.
Actualización a menudo. La frecuencia de actualización requerida depende
del tema y de los objetivos del sitio. Las noticias pueden tener una
frecuencia de actualización diaria, mientras que los reportajes pueden ser
semanales.
Mínimo tiempo de descarga.
Facilidad de uso.
Seguiremos trabajando en mejorar y mantener estos cuatro criterios. Además,
actualmente se continúa trabajando en varios flancos paralelos:
•
•
•
•
Diseño e implementación del motor de búsqueda local. Los buscadores
internos, además de influir decisivamente en la primera impresión de los
usuarios, son herramientas cruciales para que éstos encuentren los
contenidos que buscan. Por ello, su usabilidad condiciona
significativamente la usabilidad global del sitio web, y debe prestársele
especial atención. En esta fase estamos considerando los buscadores
textuales y los buscadores en bases de datos.
Introducción de contenido. Actualmente se dispone de una batería de
contenido dispuesto a ser lanzado. Con esta base se seguirá añadiendo
contenido a una frecuencia variada (diaria, semanal o mensualmente)
dependiendo de la sección y del tema en cuestión.
Indexación en los buscadores. El posicionamiento en buscadores se ha
comentado brevemente en el . Cada buscador utiliza un algoritmo de
indexación diferente que es permanentemente actualizado y mejorado. Un
estudio de los diferentes buscadores nos permitirá organizar nuestro sitio
para que salga bien posicionado en los resultados de búsqueda. Estamos
documentándonos de [UGA02].
Pruebas en diferentes plataformas y navegadores. Evaluaremos el sitio
usando las plataformas y los navegadores considerados en el análisis de
requisitos.
LINEAS FUTURAS
Ningún diseño es perfecto y menos la primera vez que se lanza la web. Simple
y sencillamente el uso cotidiano de la misma nos mostrará errores que
habíamos obviado. Los sitios web y los conocimientos que tenemos sobre el
diseño web evolucionarán, los objetivos cambiarán, aparecerán nuevas
características, etc. El rediseño no es un lujo, es una necesidad que
tendremos que ir cumpliendo en un futuro si la web quiere ser competitiva.
173
A esto habrá que añadir posibles extensiones que surjan de la propia
evolución de las tecnologías. Nuevas tecnologías que nos aportarán más
posibilidades de interacción, tanto a nivel de usuario como a nivel de
desarrollo. Se tomarán en cuenta futuras plataformas (Palm OS, WebTV o
WAP) que actualmente representan un objetivo de audiencia ridículo, pero
debido al incremento de la popularidad de las aplicaciones de Internet y los
teléfonos móviles pueden representar una audiencia deseable. Pero sin
alcanzar metas tan lejanas, a corto plazo nos centraremos en temas como la
medida del éxito del sitio web, la publicidad en el medio o ideas a implementar
en un futuro.
Métricas del éxito
Los sitios Web que ofrecen contenido gratuito deben estar concentrados en
las medidas como el número de páginas vistas y el numero de visitantes
únicos (los que visitan un sitio más de una vez, durante un período de tiempo
específico) para poder satisfacer, por ejemplo, los requerimientos de las
agencias de publicidad y los anunciantes. De otra forma, las métricas no son
tan fáciles como pueden ser para los sitios que pueden medir el éxito en
ventas. Sin embargo, estos sitios, entre los que se encuentran desde sitios de
medios hasta portales gubernamentales, deben medir como los ven los
usuarios.
Algunas métricas pueden ser:
•
•
Índice de lealtad: este índice de lealtad mide la permanencia de los
visitantes en el sitio. Se puede hacer midiendo el numero de visitantes y el
numero de visitantes únicos al igual que las páginas vistas, todos
indicadores importantes para las agencias. También se puede ver los
dominios y los proveedores que están visitando el sitio para mostrar que
está atrayendo la audiencia buscada por los anunciantes.
Satisfacción del usuario: aunque las herramientas existentes permiten
medir el flujo de clics que hace un visitante, no puede explicar cómo se
siente una personas mientras navega. Es aquí donde juega un papel
importante la encuesta en línea, herramienta apropiada para determinar
gustos y satisfacción del visitante. La mejor estadística de satisfacción por
lo general es obtener respuestas a la pregunta ¿recomendaría este sitio a
otro usuario?
Publicidad
Es una realidad que muchos sitios web tienen en los anuncios externos una
parte importante de sus ingresos. Pero el sector publicitario se encuentra en
un periodo de maduración. Continuamente, se van creando nuevos formatos
publicitarios, campañas y se van ajustando precios y formatos a lo que
realmente funciona.
Sin embargo, los usuarios cada vez se están volviendo más recelosos con
respecto a los anuncios en los sitios web y están empezando a ignorar todo
tipo de banners (tanto los rich media, mayoritariamente creados en Flash,
como los estáticos) y ventanas emergentes (pop-ups) y, por desgracia, todo lo
que se parece a ellos [RED02].
174
La publicidad continúa en fase de sequía y experimental. Los medios on-line
siguen a la espera de que se produzca el deseado matrimonio entre creativospublicitarios-marketing e Internet-tecnología. Pese a la pertinaz incapacidad de
la publicidad on-line de aprovechar las ventajas del medio, es difícil
recomendar que se elimine la publicidad en un sitio web que vive de ella,
aunque ello suponga una mejora de la usabilidad.
Así pues, trataremos de esbozar unos principios básicos para tratar este tema
en caso de que culturanocturna.com se vea con la posibilidad de estar
patrocinada, puesto que “cae de maduro que el segmento demográfico joven y
urbano es muy interesante para los anunciantes. Por una parte, debido a que
es la parte de la población que suele marcar las tendencias de consumo a
largo plazo. Por otra parte, la inversión en publicidad dirigida a gente joven
suele tener un rendimiento alto, debido a la larga expectativa de vida, y, por
tanto, de consumo, que tiene este sector de la población” [KOT02a].
Nuestro modo de tratar la publicidad generadora de ingresos, seguirá una vez
más una visión usable. La publicidad no debe espantar al usuario (no debe ser
intrusiva). Para tal fin, se utilizará un sistema de patrocinio en la que el
anunciante verá primadas sus programaciones y su club. Por ejemplo, se
recomendaría en portada la actuación de su club, aparecería al principio de las
búsquedas, se diseñaría de un modo más llamativo su perfil en la base de
datos o se incluirían enlaces con su página. Como afirma el diseñador de
Google en referencia a su sistema de patrocinio de resultados [RED02a]
“Internet transformará la publicidad por su efectividad, no por su belleza”.
Futuras extensiones
Se recogerán nuevos requisitos para versiones posteriores o se deducirán de
los resultados de las evaluaciones. Apuntaremos brevemente unas serie de
ideas para dejar constancia de las futuras extensiones que iremos añadiendo
al sitio:
•
•
•
•
•
•
Sistemas de revisión y opinión por parte de los usuarios de todo el
contenido.
Posibilidad de puntuar los clubs, las fotos y los discos a gusto del usuario.
Cuentas de usuario personalizadas.
Creación de una comunidad a partir de las cuentas, el foro, un chat, listas
de correo, etc.
Sistema de archivado del contenido a partir de 2004.
Permitirle a los usuarios enviar fotos y otro contenido de la página a otras
personas vía e-mail.
175
176
APÉNDICES
PLANIFICACIÓN DEL PROYECTO
• Diagrama de Gantt
• Diagrama de tareas en el ciclo de vida
GLOSARIO DE TÉRMINOS RELACIONADOS CON LA MÚSICA ELECTRÓNICA
CUESTIONARIO
ESCENARIOS
ESTADÍSTICAS
•
•
•
•
•
•
•
•
Sistema Operativo
Navegadores
Conexión por día de la semana
Profundidad de color
JavaScript
Java
Servidores web
•
•
•
•
•
Estilo de escritura
Formateo
Deletreo y marcas registradas
Escribir para los motores de búsqueda
Formateo de entrega de contenido
ANÁLISIS COMPETITIVO
REVISIÓN DE LA ARQUITECTURA
REVISIÓN DE LOS PROTOTIPOS
REVISIÓN DETALLADA DE PROPÓSITO GENERAL
FORMULARIO DE PREPARACIÓN DE UN TEST CON USUARIOS
GUÍA DE ESTILO PARA LA REDACCIÓN DE CONTENIDO
FORMULARIO DE INFORME Y RESOLUCIÓN DE PROBLEMAS
REVISIÓN DE LA POST-PRODUCCIÓN
LISTA DE CONTROL PARA UN MANTENIMIENTO MÍNIMO
PLANIFICACIÓN DEL PROYECTO
Mostramos una tabla con el análisis y la estimación del desarrollo inicial de los
procesos principales del proyecto. Sigue a continuación un diagrama de Gantt
que ilustra la relación de los procesos de desarrollo del proyecto y el diagrama
de las tareas en el ciclo de vida del proceso.
PROCESO DE DESARROLLO
Diseño conceptual
Prototipado
Producción:
Gráficos
Escritura
HTML & PHP
Base de datos MySQL
Desarrollo de software (Javascript, FLASH...)
CICLOS
DIAS
3
3
6
DIAS /
CICLO
5
5
5
3
2
5
3
3
1
1
5
2
3
3
2
25
6
9
10
10
1
8
3
1
5
1
4
1
5
8
12
1
Gestión del proyecto (10%)
Tiempo imprevisto (10%)
15
15
30
EVALUACIÓN
Encuestas
Heurística
Test con el usuario
QA
Total: 151 días
Planificación del proyecto
179
Diagrama de Gantt
AB RIL
1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30
MAYO
Diseño
conceptual
Heurística
Test con el
usuario
Prototipado
Gráficos
MAYO
5 6 7 8 9 10 11 12 13 14
JUNIO
17 18 19 20 21 24 25 26 27 28 31
Analisis de
requisitos
Diseño
conceptual
Heurística
Prototipado
Gráficos
Heurística
HTML & PHP
180
APÉNDICES
JU NIO
1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30
Prototipado
Heurística
Test con el
usuario
Gráficos
HTML & PHP
MySQL
Desarrollo
software
JULIO
SEPTIEMBRE
5 6 7 8 9 10 11 12 13 14 17 18 19 20 21 24 25 26 27 28 31
Prototipado
Test con el
usuario
Escritura
Heurística
HTML & PHP
Heurística
MySQL
Desarrollo
software
181
SEPTIEMBRE
Figura 78
1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30
Diagrama de Gantt.
En esta y en las páginas
mostramos los meses
estimados de trabajo. El
diagrama de Gantt es un buen
formato para visualizar las
relaciones de estos pasos y
considerar aquellos que
ocurren en serie y los que lo
hacen en paralelo. Además,
tendremos en cuenta los fines
Testde
consemana
el
y los festivos.
Prototipado
Test con el
usuario
usuario
Escritura
Heurística
HTML & PHP
Heurística
MySQL
Desarrollo
software
182
APÉNDICES
QA
Diagrama de tareas en el ciclo de vida
ANÁLISIS DE DISEÑO PRODUCCIÓN LANZAMIENTO MAQUETAS Y EVALUACIÓN
REQUISITOS
PROTOTIPOS
ANÁLISIS
ETNOGRÁFICO
REGISTRO
DOMINIO
ANÁLISIS DE
IMPLICADOS
ENCUESTAS
ANÁLISIS DE
LA COMPETENCIA
OBJETIVOS DE
LA APLICACIÓN
GENERACIÓN
DE IDEAS
ELEMENTOS
DE
DISEÑO
ACTORES
Y ROLES
OBJETIVOS DE
LA USABILIDAD
ESCENARIOS
PLATAFORMA
ELEMENTOS
DE
DISEÑO
MAQUETAS
EN PAPEL
HEURÍSTICA
ANÁLISIS
DE TAREAS
GRÁFICOS
CÓDIGO
CARD
SORTING
ARQUITECT.
DE LA
I NFORMAC.
GRÁFICOS
OBJETIVOS DE
LA APLICACIÓN
CÓDIGO
OBJETIVOS DE
LA USABILIDAD
ELEMENTOS
DE
DISEÑO
MAQUETAS
EN PAPEL
HEURÍSTICA
MAQUETAS
DIGI TALES
HEURÍSTICA
TEST CON
USUARIOS
BASE DE
DATOS
CÓDIGO
SOFTWARE
PROTOTIPOS
HEURÍSTICA
TEST CON
USUARIOS
MAQUETAS
DIGITALES
HEURÍSTICA
TEST CON
USUARIOS
BASE DE
DATOS
ELEMENTOS
DE
DISEÑO
CÓDIGO
SOFTWARE
ARQUITECT.
DE LA
I NFORMAC.
PROTOTIPOS
EXTENSIONES
FUTURAS
OBJETIVOS DE
LA USABILIDAD
CÓDIGO
EVALUACIÓN
AUTOMÁTICA
183
GLOSARIO DE TÉRMINOS RELACIONADOS CON LA MÚSICA ELECTRÓNICA
Acid House: Estilo musical que nace en Chicago a finales de los 80 cuando
Spanky y DJ Pierre descubren las posibilidades del secuenciador de bajos TB303. El sonido repetitivo e hipnótico que produce esta máquina es la base del
Acid y que actualmente se sigue utilizando.
Acid Jazz: Estilo musical que recupera el Jazz bailable y el Funk de los años
setenta, a los que se añade una base rítmica más rotunda y algo de Rap.
After-Hours: Es una discoteca cuyas sesiones comienzan en la madrugada y
finalizan por la tarde // Fiesta que se desarrolla después de una sesión en
horario normal o después de una rave.
Ambient: Música climática y relajada, que crea atmósferas profundas
similares a los grandes espacios abiertos. Brian Eno fue el inventor del término
en 1978.
Amplificador: Aparato que recibe la señal sonora y la transmite aumentada a
los altavoces para ser escuchada.
Bakalao: EBM, Rock Gótico y Acid House que se pinchaba en la costa
valenciana a principios de los años 90 // Ruta que los aficionados al género
realizaban para ir de una discoteca a la otra // Traducción española del
Hardcore Techno europeo // Acepción despectiva de la música de baile en
general.
Beat: Golpe que delimita en tiempo rítmico de la música.
Big Beat: Estilo musical que combina el Techno con riffs Rockeros y
Breakbeats veloces.
B.P.M.: Beats (Golpes) Por Minuto. El tiempo rítmico de un disco se mide en
BMP.
Breakbeat: Ritmo que esta en la base del Hip Hop, cuya aceleración ha dado
origen el Jungle y al Big Beat.
Cápsula Fonocaptora: Es el componente encargado de transformar el
movimiento mecánico que realiza la aguja sobre el surco en señal eléctrica
(señal sonora).
Chicago: Además de ser la ciudad del Blues, es donde se origino el House,
ritmo que a mediados de los 80 cambió el espectro de la música de baile.
Chill Out: Zona de relajamiento en un club, rave o festival. El origen viene de
los años ochenta con la introducción del Ambient en los clubs.
Club: Local nocturno que está en la base de la dance music. Creador de
tendencias, estilos y destinado al baile .
Club Culture: Cultura ligada a los clubs y que ha originado tendencias de
moda, revistas e incluso tribus.
184
APÉNDICES
Club Wear: Moda que se genera en los clubs y que sirve para diferenciarse de
otros clubs.
Clubber: Persona adicta a los clubs.
Cultura de club: ver club culture.
Dance: Baile. Música de baile. Originalmente abarcaba todos los ritmos y
estilos, en cambio ahora se relaciona con el movimiento techno
Dancefloor: Pista de baile.
Deep House: Es el House más profundo, cálido y próximo al Soul.
Deejay: ver DJ.
Disco: vinilo, CD // Música nacida en los años 70 en Münich reconocible
gracias a ritmos repetitivos y pegajosos.
Discoteca: Lugar destinado al almacenaje de disco // Local donde se puede
escuchar y bailar música a la vez que se consumen bebidas.
Discjockey: ver DJ.
DJ: Persona encargada de poner discos y animar al público de las discotecas
o bien a las personas que le escuchan a través la radio.
Dolby System: Sistema que incorporan los aparatos de grabación y
reproducción de cintas magnetofónicas, y que reduce el ruido de fondo (soplo)
de estas.
Dream House: Trance muy melódico, con piano o guitarra en primer plano.
También se le denomina Dream.
Drum'n'Bass: Percusión y bajo. Es una derivación experimental del Jungle sin
las conexiones con el Raggamuffin y el Breakbeat-Techno, que fueron la base
inicial del Jungle.
Dub: Inicialmente, una versión instrumental, llena de ecos, bajos profundos y
samples de temas Reggae. Posteriormente, se ha convertido en una técnica
muy utilizada por los productores y remezcladores del House, Techno y el
Jungle.
Easy Listening: Música de fácil escucha, ideal para colocar de fondo musical
en las fiestas. Su origen se encuentra en las películas de los años cincuenta, y
su derivación contemporánea ha dado lugar al Future Listening.
EBM: Electronic Body Music. Género musical patentado por Front 242, cuyas
señas de identidad son sus ritmos gélidos y compactos. Ruidos industrial y
monocorde que influyeron en el New Beat y el Agrepo.
EDM: Electronic Dance Music. Música electrónica de baile.
Glosario
185
Electro: Estilo musical surgido en Nueva York y en Detroit a comienzos de los
años 80. Es la unión del Groove afro americano y la música electrónica
europea.
Ecualizador: Aparato electrónico que sirve para modificar el tono de una
fuente de sonido en cualquier corte de frecuencia grave, media aguda.
Etapa de Potencia: Aparato electrónico similar a un amplificador, pero sin los
controles de graves y agudos, que aumenta la potencia de una fuente de
sonido.
Experimental: Extraño e inclasificable, vanguardista, se dice de todo aquel
género musical que intenta ir más lejos buscando nuevos ritmos.
Fader: Es el mando de control para incrementar o disminuir volumen,
ecualización o balance y panorama de una fuente de sonido. Puede ser
deslizante o giratorio.
Flyer: Prospecto o folleto que sirve para anunciar una actuación, sesión o
rave.
Gabber (Gabba): Hardcore Techno tremendamente acelerado que tuvo su
origen en Rotterdam.
Galleta: Etiqueta circular que se coloca en el interior de disco de vinilo para
identificar al interprete, tema, versión y sello discográfico.
Garage: Denominación que se da en Nueva York al Deep House. Es el House
que más está unido al Soul y a la Disco Music. Se caracteriza por un ritmo
vibrante y una voces desgarradas y profundas.
Goa Trance: Techno psicodélico y exótico, que tiene su origen en los raves
playeros celebrados en Goa (India). Tiene un ritmo hipnótico y repetitivo.
Go-Go: Bailarina o bailarín que animan al publico a bailar en los clubes o
discotecas. Go-Go también es el nombre de un estilo surgido en Washington
en los años ochenta, que mezclaba Hip Hop con ritmos Funk.
Groove: Es el impulso que lleva mover el cuerpo al ritmo de la música
generalmente de raíz negra. Funk, Hip Hop, Drum'n'Bass o Reggae son ritmos
groovies.
Hardcore: Estilo musical derivado del Techno con un ritmo duro, implacable y
machacón.
Hip-Hop: Estilo musical surgido en los distritos neoyorquinos del Bronx y
Brooklyn. Engloba el Rap, el Breakdance y el Graffiti.
Home Studio: Estudio musical casero.
House: Estilo musical que surge a mediados de los años ochenta en la ciudad
de Chicago y que recoge influencias de la Música Disco, el Funk y el TechnoPop europeo. Debe su nombre al club Warehouse, en Chicago, donde
pinchaba el pionero de este ritmo: Frankie Knuckles.
186
APÉNDICES
IDM: Intelligent Dance Music.Nnuevo modo de interpretar los sonidos
electrónicos influenciados por la musica de baile de los noventa.
Industrial: Estilo nacido a fines de los 70 que experimenta con ruidos, música
de máquinas , ritmos metálicos y sonidos urbanos
Intelligent Techno: Termino sectario que engloba a algunos de los artistas
más interesantes y exploradores de la escena Techno.
Jungle: Estilo musical que se basa en un desarrollo polirítmico del Breakbeat,
y que surgió de la escena hardcore londinense.
Kraftwerk: grupo musical de Dusseldorf, nacido en los 70 y creador del sonido
Tecno-pop.
Label: ver Sello discográfico.
Latin House: Estilo musical creado por los hispanos como derivación del
House con sus propias señas de identidad.
Line-up: Orden de aparición de los DJ's y live acts. // Programa del evento.
Live Act: Artista que actúa en directo, para diferenciarlo de la sesión de un
DJ.
LJ: (Light-Jockey): Persona que maneja las luces de un club o discoteca.
Loop: Serie de notas musicales o sonidos que se repiten en forma de bucle y
que es la base de la creación de la música de baile.
LP: Long Play. Disco que incluye varios temas de uno o más interpretes y que
gira a 33 RPM. Su tamaño es de 12 pulgadas.
Makina: También denominado Maquina. Hardcore-Techno hecho en España,
por lo general con unos gimmicks muy facilones y repetitivos.
Maxisingle: Disco del tamaño de un LP de 12 pulgadas, pero con un tema y
diferentes remezclas del mismo. También se le conoce como Maxi y supone el
soporte sonoro ideal para los DJ's. Puede editarse a 33 o 45 RPM.
Mezclador: Es el dispositivo a los que van conectadas todas las fuentes de
sonido (platos giradiscos, reproductores de CD, etc.). Cada una de ellas entra
por un canal distinto con su respectivo control de volumen y ecualización.
Midi: Interfaz Digital de Instrumentos Musicales. Es el lenguaje que utilizan los
aparatos musicales electrónicos para conectarse entre sí.
Minimal: Tendencia seguida fundamentalmente por artistas del Techno y
Hardhouse, y que se basa en buscar la esencia del ritmo.
Mix: Mezcla.
Música electrónica: música imposible de tocar (y con toda probabilidad
también imposible de componer) sin sintetizadores, secuenciadores,
Glosario
187
ordenadores u otro equipamiento electrónico. Es música total y especialmente
elaborada para tocarla sólo con sintetizadores y otro equipamiento electrónico.
New Order: uno de los grandes grupos de la música electrónica de los 80.
Party: Fiesta, velada (House Party, Techno Party...).
Patinador: Es un cartón o plástico con forma de disco que se coloca entre el
plato giradiscos y el disco para permitir que gire éste sin que el plato deje de
girar.
Pinchar: poner discos, uno tras otro, sin que se note el cambio entre ellos.
Pitch: Finísima regulación de la velocidad del giradiscos. Es necesario para
poder mezclar un disco con otro ya que con el pitch se consigue un ajuste de
velocidad muy preciso.
Playlist: Lista de los discos más pinchados por un discjockey.
Rap: Hablar con ritmo encima de una base instrumental.
Raper: Persona que hace Rap.
Rave: Fiesta dance que se celebra en sitios al aire libre como playas o
campos.
Raver: Habitual de las raves
Recopilación: Disco que contiene los mejores temas actuales o del recuerdo,
siendo una buena fórmula de ventas. Suelen ser dobles o triples.
Remix: Remezcla. Es una nueva mezcla de una tema pudiendo sonar
totalmente diferente y tener más éxito que la versión original.
Resident: Discjockey residente. Es el que pincha de forma habitual en un club
o discoteca.
Roland: Marca de aparatos para crear mùsica , entre ellos el TB 303, además
existen otros modelos como el 505, 808, 909.
R.P.M.: Revoluciones por minuto. Es la unidad de medida de la velocidad de
giro de un plato giradiscos. Normalmente la velocidad de un disco es de 33 1/3
o 45 RPM.
Sampler: Aparato musical que funciona como un archivo de sonidos. Es el
instrumento que más se utiliza en la música de baile. A la técnica de registrar
sonidos en un Sampler se le llama Sampling (samplear). También existen
muchos programas para PC y Mac que se utilizan como Sampler.
Scratch: Efecto que consiste en girar el disco hacia atrás y hacia adelante
teniendo la aguja en un punto concreto. Se suele utilizar subiendo y bajando el
volumen del mezclador de una forma sincronizada al giro del disco.
Scratcher: Discjockey especializado en scratch.
188
APÉNDICES
Sello discografico: Empresa encargada de "lanzar" un disco al mercado.
Session: Actuación de un discjockey.
Set: Sesión de un DJ.
Single: Disco que incluye solo una canción por cada cara. También es
conocido cono disco sencillo o 7 pulgadas debido a su tamaño.
Technics: Marca del famoso plato giradiscos Technics SL1200, muy utilizado
y prestigiado por todos los discjockey’s.
Techno: Estilo musical que tuvo sus orígenes en la música de Kraftwerk y los
grupos tecno-pop de principios de los años ochenta. Como género bailable, el
Techno tuvo su cuna en Detroit cuyos pioneros fueron Juan Atkins, Derrick
May y Kevin Saunderson. La evolución de Techno ha dado lugar a
innumerables subgéneros y tendencias.
Technohead: Seguidor fanático del Techno.
Tecno-Pop: Estilo musical que tuvo su edad de oro en los años ochenta y que
combina una base rítmica con preciosas melodías creadas a base de
sintetizador.
Tracklisting: Relación de temas que aparecen en una recopilación.
Trainspotter: Es la persona que disfruta observando al DJ manejando los
platos.
Trance: Estilo musical variante del Techno aparecida en Alemania a principios
de los años noventa y que combina ritmos hipnóticos con largas evoluciones
sintéticas y efectos ácidos.
Tribal: Adjetivo que se utiliza para definir al House y al Techno que utilizan
percusiones tribales y atmósferas selváticas para incrementar su efecto
hipnótico.
Trip-Hop: Estilo musical que evoluciona el Hip Hop hacia territorios
experimentales de Jazz y el Dub. Su origen está en la ciudad de Bristol
cuando comenzó llamándose "voicebeat" con grupos como Massive Attack,
Portishead o Tricky.
Underground: subterráneo, estado inicial de cualquier género musical. //
También, estilo musical surgido en el "subsuelo" de alguno de los mejores
clubs de Nueva York, y que constituye una evolución del Deep House hacia
ritmos repetitivos y fracturados, el Jazz y la experimentación. Es un estilo
altamente creativo y trepidante.
Vinilo: Material con el que están construidos los discos. Normalmente suele
ser de color negro.
VJ: Vídeo-Jockey: Equivalente al discjockey en la música, pero en el mundo
de la imagen y los video clips.
Glosario
189
Warm-Up: Preambulo de una fiesta, destinado a Calentar el ambiente, similar
al "telonero"
White Label: Disco que utilizan los DJ's y que todavía no ha sido publicado.
Se le da ese nombre ya que la galleta del vinilo está "en blanco" sin ningún
título explicativo.
190
APÉNDICES
CUESTIONARIO
Cuestionario sobre la audiencia de culturanocturna.com
‘culturanocturna.com’ pretende ser un portal web independiente dedicado a
ofrecerte lo mejor de la escena musical electrónica española.
El objetivo de este cuestionario es conocer a los potenciales usuarios de
nuestro sitio web en vistas de asegurar que serviremos a tus necesidades tan
bien como nos sea posible.
Para ello necesitamos tu colaboración, por lo que te agradecemos que nos
dediques unos minutos de tu tiempo para contestar algunas preguntas.
Este cuestionario es anónimo. Te rogamos que lo contestes con franqueza y
tan completamente como puedas.
Datos personales
1. ¿Qué edad tienes? _________
2. Sexo:
‫ ٱ‬Varón
‫ ٱ‬Mujer
3. Nivel de estudios realizados o en curso:
‫ ٱ‬Estudios primarios
‫ ٱ‬Bachiller o estudios equivalentes
‫ ٱ‬Estudios superiores
4. ¿Cuál es tu ocupación actual? (una sola respuesta)
- Estudio............................ [1]
- Estudio y trabajo..............
[2]
- Trabajo temporal.............. [3]
- Trabajo fijo...................... [4]
- Parado............................
[5]
- Realizo servicio militar....... [6]
- Otro................................ [7]
¿Cuál? ____________
Tu experiencia
5. ¿Cuánto tiempo lleva usando ordenadores?
- Menos de 1 año.................. [1]
- De 1 a 3 años..................... [2]
- Más de 3 años.................... [3]
6. ¿Qué sistemas usas normalmente?
- Windows.........................
[1]
- Mac................................
[2]
- Unix...............................
[3]
- Otro................................ [4]
¿Cuál? ____________
7. ¿Con que frecuencia usas Internet?
- 15 horas al día o más......... [1]
- 10-15 horas al día.............. [2]
Encuesta
191
- 5-10 horas al día................ [3]
- Menos de 5 horas al día....... [4]
8. ¿Qué navegador usas normalmente?
- Internet Explorer.............
[1]
- Netscape Navigator.........
[2]
- Otro................................. [3]
¿Cuál? ____________
9. ¿Qué resolución de pantalla utilizas en tu ordenador?
- 800 x 600........................ [1]
- 1024 x 768......................
[2]
- 1152 x 864......................
[3]
- 1280 x 1024....................
[4]
- Otra................................. [5]
¿Cuál? ____________
Nuestra web
10. Escoge tus tres estilos de música favoritos de los señalados
en la lista y escribe el número correspondiente por orden de
preferencia en los espacios situados debajo de la lista:
- House...... [1]
- Minimal.....[5]
- Hardtechno........ [9]
- Techno..... [2]
- Breakbeat. [6]
- Techno-pop .......[10]
- Acid……….. [3]
- Trance……. [7]
- Drum’n’bass.......[11]
- Electro..... [4]
- Hip hop..… [8]
- Ambient............ [12]
a)..................
b)..................
c)...........................
11. ¿Con qué frecuencia vas a los siguientes lugares?
nunca
a veces
a menudo casi siempre
- Bares................ [1]............. [2]............. [3]............. [4]
- Discotecas......... [1]............. [2]............. [3]............. [4]
- Pubs…............... [1]............. [2]............. [3]............. [4]
- Cafés.....…......... [1]............. [2]............. [3]............. [4]
- Clubs...…………..… [1]............. [2]............. [3]..........… [4]
- After Hours………. [1]............ [2]............. [3]............. [4]
- Raves.....…………. [1]............. [2]............. [3]............. [4]
- Otros.....………….. [1]............. [2]............. [3]............. [4]
12. ¿Qué tipo de información te gustaría encontrar en
‘culturanocturna.com’?
‫ ٱ‬Noticias
‫ ٱ‬Fotos
‫ ٱ‬Programación de clubs
‫ ٱ‬Entrevistas con DJs
‫ ٱ‬Artículos
‫ ٱ‬Foros de discusión
13. ¿Cuáles de estos aspectos consideras que es el PEOR a la
hora de navegar?
‫ ٱ‬Velocidad
‫ ٱ‬Incompatibilidad del navegador
‫ ٱ‬Perderse
192
APÉNDICES
14. ¿Qué color de fondo prefieres en los sitios web?
_________________________________________________
15. Lista las páginas que visitas normalmente
_________________________________________________
_________________________________________________
_________________________________________________
16. En tu opinión, ¿qué aspectos consideras más importantes en
una web? Valóralos:
Fácil de usar
1234567
Díficil de usar
Atractiva
1234567
Nada atractiva
Útil
1234567
Pérdida de tiempo
Eficaz
1234567
Pesada
Bien organizada
1234567
Caótica
Entretenida
1234567
Aburrida
Información valiosa
1234567
Sin información
Rápida respuesta
1234567
Lenta
17. ¿Tienes algún otro comentario sobre lo que te gustaría que
ofreciera ‘culturanocturna.com’?
_________________________________________________
_________________________________________________
_________________________________________________
Gracias por contestar nuestro cuestionario.
Encuesta
193
ESCENARIOS
PROYECTO:
Portal Web de
Música
Electrónica
NOMBRE:
EDAD:
SEXO:
LUGAR:
ESTUDIOS:
ESTADO CIVIL:
HOBBIES:
OCUPACIÓN:
HORARIO DE TRABAJO:
DISCAPACIDADES:
ORDENADOR:
MONITOR:
CONEXIÓN:
NAVEGADOR:
CONOCIMIENTOS DE
INFORMÁTICA:
ESTILO FAVORITO:
HORARIO TÍPICO:
7 a.m.
10:30 a.m.
4 p.m.
7 p.m.
194
APÉNDICES
Sergi
26
Hombre
Barcelona
Estudiante Universitario (Ingeniería)
Soltero, vive con sus padres
Fotografía, escuchar y componer música
electrónica, navegar por Internet, hacer
deporte (fútbol, gimnasio)
Departamento informático de una empresa
comercial
8 a.m. – 3 p.m.
Ninguna
LAN de 2 Pentium PC (en casa)
Pentium 4 Portátil (en el trabajo)
800 x 600 y 1024 x 768
Cable MENTA en casa
Internet Explorer v.5.0. y Netscape Navigator
4.7
Nivel alto en general y hábil en la Web,
experto en electrónica y hardware
Techno, Industrial, EBM, Electro
Sergi se levanta y se prepara para trabajar.
Algunos días revisa la lista de ficheros mp3
que obtiene desde su programa favorito, el
Soulseek, y si no sabe que poner a bajar echa
un vistazo a las críticas de discos en páginas
webs de música electrónica.
En el trabajo tiene nuestro sitio web en
favoritos y cuando se aproxima el fin de
semana aprovecha para informarse de los
artistas, DJ’s y festivales programados para
esa semana.
Después de comer y ya en casa se dedica a
hacer música electrónica con los programas
Reason y Ableton Live. Si está inspirado
sigue con el ordenador, sino hace una siesta.
Durante sus horas libres Sergi navega,
10:30 p.m.
responde su correo electrónico, escucha la
música que obtiene del Soulseek y participa
en foros de música electrónica opinando.
Luego va al gimnasio hasta las 9:30 p.m.
Después de cenar hace lo que el define como
un ‘mini live’ con el ordenador.
EXCEPCIONES
Sergi acostumbra a salir casi todos los fines
de semana.
Escenarios
195
PROYECTO:
Portal Web de
Música
Electrónica
NOMBRE:
EDAD:
SEXO:
LUGAR:
ESTUDIOS:
ESTADO CIVIL:
HOBBIES:
OCUPACIÓN:
HORARIO DE TRABAJO:
DISCAPACIDADES:
ORDENADOR:
MONITOR:
CONEXIÓN:
NAVEGADOR:
CONOCIMIENTOS DE
INFORMÁTICA:
ESTILO FAVORITO:
HORARIO TÍPICO:
9:30 a.m.
11 a.m.
4 p.m.
9 p.m.
10:30 p.m.
Madrugada
196
APÉNDICES
Pep
27
Hombre
Lleida
Técnico de Sonido
Soltero
Produce y mezcla música electrónica (utiliza
el ordenador y otros equipos para estas
tareas)
Productor, DJ y socio de una tienda de discos
de música electrónica. Dirige y es socio de un
Club que programa Techno Minimal, Electro y
Techno House.
11 a.m. – 3 p.m.
Ninguna
Mac portátil (en casa)
Pentium PC (en el trabajo)
1024 x 768 (casa) y 800 x 600 (trabajo)
RDSI (casa) y ADSL (trabajo)
Internet Explorer v.5.0.
Nivel básico en general, experto en hardware
de sonido
Minimal Techno, Microhouse, Experimental
Pep se levanta y desayuna.
Abre su tienda de discos. Escucha los discos
que vende y los clasifica por estilo musical.
Después de comer vuelve a la tienda de
discos y abre a las 5 p.m. Usa el ordenador
básicamente por el programa de gestión, pero
a veces se conecta. Si se conecta, echa un
vistazo a las listas de discos preferidos de
otros DJ’s y a críticas en páginas web
específicas.
Cierra la tienda a las 8:30 p.m. y va a clases
de inglés con un profesor particular.
Después de cenar se pone con el ordenador a
navegar, revisa el correo electrónico y se baja
algunos archivos de música usando el
programa Kazaa.
Si es Viernes, Sábado o Domingo, Pep tiene
que abrir el Club Electrónico que dirige.
Muchas veces es él mismo quien pincha.
EXCEPCIONES
Los lunes, la tienda de discos no se abre y
junto un amigo hace música en casa. Tiene
un secuenciador Yamaha QY700, un sampler
Akai S5000, un mezclador Spirit Folio SX1 y
un lector de CD-Rom Ultraplex.
Por la tarde limpia, hace y recibe pedidos
para el Club Electrónico que dirige.
Actualmente, los Miércoles a partir de las 10
p.m. asiste a un curso del sistema M.I.D.I.
(Musical .
Los Sábados y Domingos tarde antes de abrir
el Club usa el ordenador.
Escenarios
197
PROYECTO:
Portal Web de
Música
Electrónica
NOMBRE:
EDAD:
SEXO:
LUGAR:
ESTUDIOS:
ESTADO CIVIL:
HOBBIES:
OCUPACIÓN:
HORARIO DE TRABAJO:
DISCAPACIDADES:
ORDENADOR:
MONITOR:
CONEXIÓN:
NAVEGADOR:
CONOCIMIENTOS DE
INFORMÁTICA:
ESTILO FAVORITO:
HORARIO TÍPICO:
8 a.m.
10 a.m.
3 p.m.
6 p.m.
10:30 p.m.
198
APÉNDICES
Laila
20
Mujer
Madrid
Estudiante Universitaria (Filosofía)
Soltera, vive en un piso de estudiantes
Lectura, escuchar música, navegar por
Internet, bailar y comprar zapatos
Trabajos temporales y camarera
De Jueves a Sábado de 11 p.m. – 5 a.m.
Ninguna
Pentium III PC
800 x 600
MODEM 56 Kbps. Tarifa plana de 6 p.m. a 8
a.m. y Sábados y festivos todo el día
Internet Explorer v.5.0.
Nivel básico-medio en aplicaciones ofimáticas
y, en general hábil en la Web
House, Techno-pop, Electroclash
Laila se levanta y se prepara para ir a la
facultad. Si por la noche ha dejado el
ordenador encendido y conectado a la Red,
se asegura de desconectarlo y apagarlo, pues
su tarifa plana finaliza a las 8 a.m. de cada
día lectivo.
En ocasiones, si tiene horas libres entre
clases, Laila entra en la sala de ordenadores
y mira su correo a través de la web o navega.
Come. Habla con sus amigos por teléfono y
comentan que tal ha ido el fin de semana o
quedan para tomar algo.
En este momento se activa la tarifa plana de
Laila. Lo primero que hace es revisar su
correo electrónico a través de web. También
le interesan las fotos de eventos que
aparecen por la web y utiliza servicios como
el CHAT y el Messenger.
Después de cenar se conecta al IRC. Le
gusta conectarse a canales de la escena
electrónica, para poder comunicarse con
gente con sus mismas aficciones.
EXCEPCIONES
Cuando llega el fin de semana, Laila trabaja
de camarera en un Club.
Escenarios
199
ESTADÍSTICAS
La presente estadística nos muestra en detalle las plataformas desde las
cuales se accede a Internet. Estos datos fueron tomados durante todo el mes
de febrero de 2003 por The Counter (http://www.thecounter.com/), que recibió
113,973.510 visitantes. Se incluyen estadísticas sobre los sistemas operativos,
navegadores, resoluciones y colores que tienen configurados los usuarios de
Internet. Así como los días de la semana que tienen más afluencia de
conexión y las configuraciones de Java y JavaScript.
A continuación se presentan los análisis de Netcraft (http://www.netcraft.com),
el organismo que realiza las estadísticas de uso de software en Internet, sobre
la utilización de servidores web en agosto de 2003.
Sistema Operativo
1. Windows 98
2. Windows 2000
3. Windows ME
4. Windows NT
5. Windows 95
6. Mac OS
7. Desconocido
8. Windows 3.x
9. Linux
10. WebTV
11. Unix
12. Windows XP
13. OS/2
14. Amiga
50557611
32263269
19215159
4121994
2978481
2522310
1398885
338247
296373
182259
65859
25362
6360
1410
(44%)
(28%)
(16%)
(3%)
(2%)
(2%)
(1%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
Navegadores
1. MSIE 6.x
2. MSIE 5.x
3. Netscape 4.x
4. Netscape 5.x
5. MSIE 4.x
6. Netscape comp.
7. Opera x.x
8. Netscape 6.x
9. Desconocido
10. MSIE 2.x
11. Netscape 3.x
12. MSIE 3.x
13. Netscape 2.x
14. Netscape 1.x
15. MSIE 1.x
61315569
44416527
1991436
1950525
1769898
1221273
580020
437619
193221
36645
32046
27135
1491
126
48
(53%)
(38%)
(1%)
(1%)
(1%)
(1%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
(0%)
15863100
(13%)
Conexión por día de la semana
Domingo
200
APÉNDICES
Lunes
Martes
Miércoles
Jueves
Viernes
Sábado
19584357
18610317
17897205
17460183
10065651
14492766
(17%)
(16%)
(15%)
(15%)
(8%)
(12%)
49786698
42951891
5053401
3395451
2633787
1240242
801555
(47%)
(40%)
(4%)
(3%)
(2%)
(1%)
(0%)
46488183
46023375
10210506
2921085
193617
26259
(43%)
(43%)
(9%)
(2%)
(0%)
(0%)
800x600
1024x768
1280x1024
1152x864
640x480
Desconocido
1600x1200
Profundidad de color
(32bit)
65K (16bit)
16M (24bit)
256 (8bit)
Desconocido
16 (4bit)
JavaScript
Javascript 1.2+: 105863025 (92%)
Javascript <1.2: 218382 (0%)
Javascript false: 7892172 (6%)
Java
Java enabled: 104951916 (92%)
Java disabled: 852636 (0%)
Java unknown: 8169027 (7%)
Servidores web
Servidor
Apache
Microsoft-IIS
SunONE
Zeus
Julio 2003
26951879
10976342
674571
766943
Porcentaje
63.72
25.95
1.59
1.81
Agosto 2003
27388860
10165745
1534586
746240
Porcentaje
63.98
23.75
3.58
1.74
Cambio
0.26
-2.20
1.99
-0.07
Estadísticas
201
ANÁLISIS COMPETITIVO
www.clubbingspain.com
Clubbingspain.com es el portal de referencia de la cultura de club en España.
Abarca todo tipo de música electrónica de baile (techno, house, breakbeat,
drum & bass, trip hop) e incorpora una agenda de eventos y fiestas, biografías
y entrevistas con artistas, directorio de clubes y discotecas, DJ charts, noticias
actualizadas, enlaces a otros recursos y críticas de discos.
Además, dispone de un foro con alta afluencia y concursos donde los usuarios
pueden ganar entradas gratis. También ofrece suscripción a boletines y listas
de correo.
Sin embargo, está excesivamente cargado con banners publicitarios animados
y sus artículos no se acompañan de galerías con fotografías. Por otra parte, la
agenda dispone de una gran cantidad de información útil, pero es poco usable,
lo que resta eficacia al contenido.
Título de la ventana
Al poner ‘Bienvenido a Clubbingspain.com’ se ordenará alfabéticamente bajo
la letra “B” en vez de la letra “C”. Aunque al ser dos letras sucesivas no creará
mucha confusión, no es correcto.
Eslogan
Habría sido útil que Clubbingspain.com hubiera incorporado un eslogan que
describiera brevemente la finalidad del sitio y sus diferencias con la
competencia.
202
APÉNDICES
Categorías y etiquetas
Agenda | Artistas | Clubs | Clubbers | DJ Charts | Entrevistas | Especiales |
Noticias | Sonorama | Links
Desglose del espacio de la pantalla
Sin utilizar
6%
Publicidad y
patrocinio
20%
Contenido de interés
20%
Controles del sistema
operativo y del navegador
19%
Identidad y bienvenida
al sitio
11%
Navegación
22%
Breve análisis de usabilidad:
1. Los anuncios podrían ser efectivos ya que muestran información
exclusivamente con los propósitos de la página; sin embargo, en
directo están animados y muestran múltiples mensajes. Los usuarios
tienden a desdeñar los anuncios tipo banner, especialmente si están
animados, y esta página de inicio está cargada de anuncios animados
creando una experiencia caótica y dispersa.
203
2. Las fotografías e imágenes no llevan ni título ni texto ALT.
3. El logotipo del portal está correctamente colocado en la parte superior
derecha, sin embargo, se puede hacer clic en él (las páginas no deben
contener vínculos con la página activa). Además, es excesivamente
grande e impide que ver la mitad del contenido de la página.
4. Resulta confuso que todos los titulares sean vínculos a excepción de
esta semana, que muestra información redundante de la página de
inicio. Es muy apropiado que las fotografías incluyan el nombre de la
persona en texto real, sin embargo el texto no enlaza con la biografía
del artista, mientras que la imagen sí.
5. El acceso a la agenda requiere un clic que conduce a la página que
hemos comentado en el punto anterior. Contiene fotografías grandes
de los artistas que actuarán en un lugar concreto y a la derecha, un
pequeño calendario. Con un clic en el día del calendario en el que
estamos interesados accedemos a otra página donde podremos
seleccionar la zona. Por último, con un clic más accedemos a la lista
de eventos. Pero si queremos cambiar de día tenemos que volver a
seleccionar la zona.
6. ¿Dónde está la búsqueda? No se encuentra en la página ni en otro
lugar del sitio. Todos los sitios de este tamaño deberían ofrecer acceso
a una búsqueda amplia en la página de inicio. Algunos usuarios
prefieren la búsqueda como herramienta principal para hallar
información, mientras que otros se decantan por ella como alternativa
cuando fallan la navegación y las categorías.
7. No hay manera de saber que contenido se ha leído ya. No hace
distinción entre vínculos visitados y no visitados.
8. La barra de navegación usa un tipo de letra que no es muy legible.
9. Sonorama es una etiqueta que no expresa adecuadamente la opción
que oculta. Es difícil saber que contiene, ¿sonido, instrumentos? . En
realidad el vínculo lleva a una página con los últimos discos
comentados y criticados, pero no hace uso de streaming que
supondría un uso fantástico de los aspectos multimedia de la Web.
10. El contenido que aparece en novedades sólo aparece fijo durante unos
instantes, y los usuarios deberán leerlo rápidamente antes de que
desaparezca.
204
APÉNDICES
www.florida135.com
Florida135.com es la presencia on-line del club más prestigioso e innovador
de España. Ha creado un portal con la pretensión de alcanzar todos los
aspectos de la escena electrónica, tanto que en ocasiones algunas secciones
se intuyen inconexas o fuera de contexto.
Los usuarios disponen de información relativa a la programación del propio
club, que incluye biografías y entrevistas con los artistas, también pueden
comprar todo tipo de merchandising producido por la discoteca, desde
camisetas hasta discos y documentarse sobre todo lo relativo a Florida 135.
Por último, cabe destacar las opciones de las que dispone la comunidad de
usuarios, desde un foro y un tablón de anuncios, hasta descarga de utilidades
para el teléfono móvil.
Título de la ventana
Este título se agregará apropiadamente a favoritos con arreglo al nombre del
sitio ‘Florida 135’, aunque podría haber ido seguida de una breve explicación.
Eslogan
Este sitio no tiene eslogan, pero debería incorporar uno breve que explicara
que es Florid135.
205
SHOP
Moda club Dicos/libros Tiendas DJs Ofertas Venta entradas
MÚSICA
Noticias Discos Maxis Clips En la red Editorial/opinión Entrevistas/artículos techno-diccionario
DEEJAYS
Noticas Charts Clips Entrevistas Diccionario DJs Accesorios Más allá de los platos Biografías
CLUBS
Florida 135 Site Studio Groove Parade Bath Room Otros Clubs
CULTURA
Cine Libros Cómics Televisión DVD/Video Videojuegos Tendencias Bazar Kiosko Internet
AGENDA
Agenda nacional Festivales Radios
DESCARGA
Móviles Salvapantallas Fondos Envía tu postal
HOME
COMUNIDAD Foro enlaces Galería de fotos Tablón anuncios
Desglose del espacio de la pantalla
Publicidad y
patrocinio
15%
Sin utilizar
4%
Controles del sistema
operativo y del navegador
19%
Identidad y bienvenida
al sitio
4%
Contenido de interés
47%
206
APÉNDICES
Navegación
11%
1. No debería haber un vínculo activo (ni vínculo alguno) con la página de
inicio desde la propia página de inicio. El logotipo de Florida135 incluye
un vínculo activo con la página que se está visualizando.
2. El cuadro de búsqueda se encuentra en la ubicación habitual, la
esquina superior derecha, sin embargo no es lo suficientemente ancho
para que los usuarios puedan repasar y modificar sus entradas, y el
icono de la lupa no es tan fácilmente reconocible para los usuarios
como “Buscar”.
3. Es chocante que haya un vínculo música, cuando el sitio gira en torno
a la música. Además, cultura es un nombre de categoría demasiado
amplio y parece un cajón de sastre, con contenidos que nada tienen
que ver con la página (cómics, televisión).
4. En un intento por hacer del sitio un portal , encontramos vínculos de
navegación redundantes. Los vínculos Newsletter y Registrate
conducen prácticamente al mismo sitio. Hay vínculos repetidos de
discos y libros en las categorías Shop y Cultura, además de repetir el
contenido en Música y Deejays.
5. Cuando se coloca el puntero del ratón sobre los vínculos del área de
navegación superior, cambia el cuadro de la segunda fila de vínculos
de navegación. Si el usuario desplaza el ratón desde el campo
principal y pasa por fuera del campo, aparecerá el conjunto de vínculos
por defecto.
6. La agenda se reduce a un conjunto de recomendaciones y no conduce
a una búsqueda. Además, estas recomendaciones se abren en
cuadros.
7. El área que muestra las últimas actualizaciones desplaza el contenido
hacia la izquierda. El texto animado es molesto y desvía la atención de
los demás elementos de la página, y no es una forma agradable ni
efectiva de leer. Irónicamente, lo usuarios tenderán a pasar por alto
207
esta área, a pesar del énfasis visual que proporciona la animación.
Dado que las animaciones suelen indicar algo inútil y suponen realizar
un esfuerzo adicional, los usuarios tienden a ignorarlas.
8. Ninguno de los colores de los vínculos cambia cuando estos son
visitados. Los colores de los vínculos visitados indican dónde se ha
estado en el sitio, especialmente cuando los usuarios están buscando
algo.
9. Además, el área anterior, así como el resto de la Web, se acompañan
de exclamaciones y flechas que no señalan a ninguna parte. Parece
que se pueda hacer clic en ellas, pero en realidad no se puede.
10. Los títulos de los párrafos no son vínculos, crea confusión que donde
se pueda hacer clic sea en el párrafo y no en el título.
11. El diseño debería ser visible sin desplazamientos horizontales en una
ventana con un ancho de 800 píxeles.
208
APÉNDICES
www.offtechno.com
Offtechno.com es un sitio web del tipo de Clubbingspain.com pero centrado
exclusivamente en música techno. Presenta prácticamente los mismo
contenidos, pero con un menor nivel de actualización.
Menu: Noticias | Agenda | Clubs | Artículos | Reportajes | Foro | Links | Chat
Artistas: Artistas | Charts | Entrevistas
Audio: Offaudio | Offradio | Música
1. Los sitios no deberían incluir un vínculo activo con la página de inicio
en la propia página de inicio.
2. Un icono de página de inicio en la página de inicio no sólo sobra, sino
que potencialmente también induce a errores.
3. Los anuncios del sitio son anuncios internos de Offtechno. Habría sido
mejor eliminarlos y dedicar el espacio a contenido real, promocionando
posiblemente las mismas opciones. Los usuarios tienden a desdeñar
todo lo que se parezca a un banner, por lo que ésta es una forma
deficiente de promocionar los elementos del sitio.
4. Toda página de inicio necesita incorporar un cuadro de entrada de
búsqueda en la parte superior de la página, los usuarios lo necesitan y
lo esperan. Sin embargo, este cuadro es insulso. La etiqueta Busca
clubs habría sido completamente innecesaria si el botón de la lupa
hubiera sido un botón “Busca clubs”).
5. Hay tres formas distintas de navegar hacia los mismo contenidos: un
menú desplegable de “acceso rápido”, el menú de navegación de la
209
6.
7.
8.
9.
210
izquierda y el contenido central. El cuadro despegable es inútil por ser
complicado para la navegación de los usuarios y por no ser más
rápido, en realidad, que el menú de la izquierda.
Los títulos y cabeceras son demasiado pequeños en comparación con
el cuerpo del texto.
El acceso a las noticias es demasiado redundante, se podría
aprovechar en otros contenidos.
Algunas fotografías son demasiado detalladas para ese tamaño.
También es acertado que la fotografía contenga texto ALT con el
nombre del artista y un vínculo con la página que especifica el texto
que le acompaña.
El color de los vínculos no es uniforme y crea confusión. Ninguno de
los colores de los vínculos cambia cuando éstos son visitados. Los
colores de los vínculos visitados indican donde se ha estado en el sitio,
especialmente cuando los usuarios están buscando algo.
APÉNDICES
REVISIÓN DE LA ARQUITECTURA
Proceso
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
La organización del sitio se ha evaluado con usuarios.
La organización del sitio ha finalizada y está documentada.
Se ha documentado un plan de mantenimiento del sitio.
Se ha adquirido todo el contenido o está planificada su obtención.
Los logs del sitio y logs de búsqueda se han revisados para posibles
refinamientos.
General
‫ ٱ‬La arquitectura se ajusta a los requisitos generales del sitio.
‫ ٱ‬La arquitectura tiene sentido al primer vistazo.
Tratamiento
‫ ٱ‬No falta ningún contenido relevante.
‫ ٱ‬No hay páginas innecesarias que se puedan eliminar.
‫ ٱ‬El sitio tiene todas las secciones necesarias:
Inicio
‫ٱ‬
Páginas de contenido
‫ٱ‬
Contacta con nosotros
‫ٱ‬
Mapa del sitio
‫ٱ‬
Búsqueda
‫ٱ‬
Páginas de error
‫ٱ‬
Normas de privacidad
‫ٱ‬
Análisis de
tareas
‫ ٱ‬Se soportan todas las tareas importantes y los tipos de usuario.
‫ ٱ‬Las tareas comunes fluyen a lo largo de una secuencia de páginas
corta y natural.
‫ ٱ‬Las tareas importantes se alcanzan desde un enlace o tienen una
sección en el sitio.
Organización
‫ ٱ‬El sitio es relativamente ancho y poco profundo, no más de 3 niveles
de profundidad y no más ancho de 16 opciones.
‫ ٱ‬Las categorías están situadas en la profundidad adecuada.
‫ٱ‬
‫ٱ‬
‫ٱ‬
Basándose en la importancia, no hay ninguna categoría que deba
ser promocionada o eliminada.
Las opciones importantes se sitúan primero.
Las opciones relacionadas están agrupadas.
La organización es flexible. Se pueden añadir y eliminar secciones
sin una reorganización excesiva.
Clasificación
‫ ٱ‬Las categorías se reparten el espacio sensiblemente.
‫ ٱ‬Cada categoría tiene un tratamiento comprensivo.
‫ ٱ‬Todos los temas se encuentran en la categoría correcta.
Orientación
y etiquetado
‫ ٱ‬Las páginas están claramente identificadas y explicadas, con títulos
de páginas claros y buenas descripciones.
‫ ٱ‬Las páginas de señalización son suficientemente distintas.
‫ ٱ‬Las etiquetas son claras, llenas de significado y apropiadas al
contenido al cual apuntan.
‫ ٱ‬Las etiquetas son consistentes en especificación, tono y uso.
Revisión de la arquitectura
211
‫ ٱ‬Las etiquetas de los vínculos proporcionan sentido a todas las
subcategorías.
‫ ٱ‬Las notas de alcance se proporcionan cuando son útiles.
‫ ٱ‬Los usuarios pueden determinar su progreso a través de la
información.
Enlaces
‫ ٱ‬El enlace a la página de inicio se indica explícitamente.
‫ ٱ‬Los enlaces externos están elegidos con moderación, son
‫ٱ‬
‫ٱ‬
apropiados y se mantienen regularmente.
La página de enlaces es ‘minimal’ y está claramente etiquetada.
No hay páginas dead-end - aquellas sin enlaces posibles.
Barra de
navegación
‫ ٱ‬La barra de navegación indica donde se encuentra el usuario
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
actualmente.
El usuario puede ver como la página actual se dispone en el sitio
entero.
La jerarquía está clara. El usuario puede determinar que opciones
están en el nivel superior y cuales en subniveles.
La navegación textual se proporciona para usuarios que no utilizan
imágenes.
La navegación está en la parte superior e inferior a lo largo de las
páginas.
El usuario puede revisar rápidamente todas las opciones sin
necesidad de desplazarse por ellas.
Búsqueda
‫ ٱ‬Los usuarios pueden escoger entre navegar y buscar.
‫ ٱ‬La alcance de la búsqueda está clara.
‫ ٱ‬Se proporcionan consejos de búsqueda, especialmente después de
que se encuentren pocos o demasiados resultados.
‫ ٱ‬Los resultados de la búsqueda indican el número de coincidencias y
el total de campos o documentos.
‫ ٱ‬Los resultados de la búsqueda son amplios, precisos y relevantes.
‫ ٱ‬Los resultados de la búsqueda están ordenador útilmente.
‫ ٱ‬Los resultados de la búsqueda proporcionan el contexto y/o
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
212
APÉNDICES
descripción de cada coincidencia.
Los resultados de la búsqueda están clasificados cuando se da un
gran número de coincidencias.
La cadena de búsqueda se repite en los resultados, y el usuario
puede refinar fácilmente las búsquedas.
Las peticiones comunes producen buenos resultados.
La búsqueda es robusta con respecto a las faltas ortográficas,
deletreos alternativos, sinónimos, plurales y prefijos y sufijos.
REVISIÓN DE LOS PROTOTIPOS
Distribución
Simplicidad, consistencia y foco.
Contraste, balance y repetición.
Proximidad, similitud y buena continuación.
Los elementos críticos sobresalen.
La información critica aparece próxima a la parte superior
izquierda de la página.
‫ ٱ‬Se proporciona el punto de focalización, el énfasis y la
jerarquía de información apropiada.
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Navegación
‫ ٱ‬La navegación es escalable.
‫ ٱ‬La página más compleja puede desarrollarse utilizando el
mismo marco de trabajo.
‫ ٱ‬Se han utilizado las etiquetas de enlaces y títulos de pagina
apropiados.
Texto /
fuentes
El tipo de fuente se ajusta al estilo de la página.
El número de tipos de fuentes es limitado.
El uso de tipos de letra, ancho y énfasis es limitado.
El tamaño de la fuente es flexible.
Los enlaces de texto están subrayados.
Los enlaces de texto tienen diferentes colores para vínculos
visitados y para los no visitados.
‫ ٱ‬El texto del cuerpo, títulos y etiquetas es legible.
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Imágenes
‫ ٱ‬Se utiliza una fuente de luz consistente.
‫ ٱ‬La compresión del prototipo no pierde mucha calidad visual.
‫ ٱ‬Se usan las imágenes para dar soporte al contenido de la
página.
Color
‫ ٱ‬Se usa apropiadamente el color (por ejemplo, para agrupar,
para efectos de sobresalto, etc.)
‫ ٱ‬El color es apropiado para configuraciones de monitor
oscuros, luminosos y en escala de grises.
‫ ٱ‬El contraste es apropiado para configuraciones de monitor
oscuros, luminosos y en escala de grises.
Requisitos
‫ ٱ‬Se incluyen en el prototipo los logotipos, fuentes y colores
requeridos.
‫ ٱ‬Los títulos de páginas, etiquetas de los botones, y nombres
de los vínculos son precisos.
‫ ٱ‬Se incluyen la identificación de imágenes y marcas
apropiadas.
Revisión de los prototipos
213
REVISIÓN DETALLADA DE PROPÓSITO GENERAL
Arquitectura y
navegación
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
¿La estructura se ajusta al propósito?
¿Está claro el esquema de navegación?
¿Dónde estamos?
¿Cómo encontraríamos lo que queremos?
¿Es razonable el número de opciones en la barra de
navegación?
¿Están las opciones de la barra de navegación ordenadas
lógicamente?
¿Se ajustan los nombres de los enlaces a las páginas que
llevan?
¿Están los vínculos marcados claramente?
¿Hay un enlace claro hacia la página de inicio?
¿Hay alguna opción para buscar información?
¿Hay un mapa del sitio?
¿Dejan claro todas las páginas en que sitio web estás?
¿Tiene el usuario el control sobre la navegación?
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
¿Excede la página el tamaño de la ventana?
¿Es consistente la disposición a través de las páginas?
¿Hay un foco claro en todas las páginas?
¿Funciona visualmente la distribución?
¿Se usa eficazmente la alineación?
¿Se usa eficazmente la agrupación?
¿Hay un buen contraste?
¿Está la distribución desordenada?
¿Es estéticamente agradable?
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
¿Es el texto conciso y claro?
¿Está el texto organizado en pequeñas secciones?
¿Hay errores de ortografía o gramática?
¿Tienen las páginas un texto de introducción?
¿Los componentes multimedia dan soporte a las tareas?
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Distribución y
diseño
Contenido
Formularios e
interacción
¿Los formularios soportan la tarea?
¿Los diálogos siguen una progresión lógica?
¿Queda claro dónde se irá luego?
¿Los métodos de diálogo son concisos y consistentes?
¿Se usan los elementos de los formularios correctamente?
¿Están agrupados correctamente los elementos de los
formularios?
‫¿ ٱ‬Son claros los botones de envío de formularios?
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Gráficos
‫¿ ٱ‬Es adecuada la calidad de las imágenes?
‫¿ ٱ‬Las imágenes incluyen texto alternativo?
‫¿ ٱ‬Las imágenes incluyen información del tamaño?
214
APÉNDICES
‫¿ ٱ‬Usan las imágenes una fuente de luz consistente?
‫¿ ٱ‬Están almacenadas las imágenes con la máxima
compresión?
‫¿ ٱ‬Se proporciona información al pasar el puntero del ratón
sobre la imagen? ¿Es útil?
‫¿ ٱ‬Son útiles las animaciones? ¿Hay demasiadas? ¿Están
comprimidas apropiadamente?
Color
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
¿Es apropiada la elección de colores para el sitio?
¿Se usan demasiados colores?
¿Se usan los colores consistentemente?
¿Son claros los colores de los gráficos?
¿Funciona la elección de colores en escala de grises?
Tipografía
‫¿ ٱ‬El texto es legible?
‫¿ ٱ‬El tamaño de las fuentes es lo suficientemente grande?
‫¿ ٱ‬Son apropiados los colores de las fuentes y hay suficiente
contraste?
‫¿ ٱ‬Hay márgenes suficientes?
‫¿ ٱ‬Los tipos de fuentes se usan adecuada y
consistentemente?
Tolerancia a
errores
‫¿ ٱ‬Los usuarios necesitan recordar algunos elementos a
través de las páginas o las sesiones?
‫¿ ٱ‬Son reversibles las acciones de alto riesgo o coste?
‫¿ ٱ‬Se proporciona una confirmación antes de las acciones de
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
alto riesgo o coste?
¿Se controlan internamente los errores de entrada?
¿Las páginas de error proporcionan suficiente información?
¿Las páginas de error de búsqueda proporcionan varios
consejos de búsqueda?
¿Está disponible la ayuda?
Plataforma e
implementación
‫¿ ٱ‬Es suficientemente rápido el tiempo de carga? ¿Está
entre 3 a 15 segundos?
‫¿ ٱ‬Funcionan todos los vínculos?
‫¿ ٱ‬Hay imágenes rotas?
‫¿ ٱ‬Están escritas las páginas para que las encuentren los
buscadores?
‫¿ ٱ‬Funciona el sitio correctamente con el navegador del
usuario?
‫¿ ٱ‬Funciona el sitio correctamente con la plataforma
hardware del usuario?
‫¿ ٱ‬Funciona el sitio correctamente en monitores de alta y
baja resolución?
‫¿ ٱ‬Se requieren plug-ins no estándares? ¿Son útiles o
necesarios?
Revisión general
215
FORMULARIO DE PREPARACIÓN DE UN TEST CON USUARIOS
Proyecto de test con el usuario
________________________________________
Fecha ____________________
Configuración del/los ordenador/es:
Hardware ___________________________________________
SO y versión _________________________________________
Navegador y versión ___________________________________
Otro software _________________________________________
Lista de tareas:
Listado de tareas primarias a probar:
1. ____________________________________________________________
2. ____________________________________________________________
3. ____________________________________________________________
4. ____________________________________________________________
5. ____________________________________________________________
6. ____________________________________________________________
7. ____________________________________________________________
8. ____________________________________________________________
9. ____________________________________________________________
10. ___________________________________________________________
216
APÉNDICES
GUÍA DE ESTILO PARA LA REDACCIÓN DE CONTENIDO
Esta guía de estilo suministra estándares para el desarrollo y la presentación
del texto, de tal manera que minimizan la complejidad de editar contenido
consistente y coherente que sea tanto eficaz como legible para los usuarios
del sitio. Además, estas guías se usarán por los desarrolladores del sitio para
corregir pruebas de las páginas web.
Estilo de escritura
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Usar la voz activa.
Referirse a Culturanocturna.com en primera persona (cuando se usen
pronombres), tal como, “Hemos puesto a vuestra disposición más
enlaces”. (es decir, no referirse nunca como “ellos”, “la página” o “el
portal”).
Referirse a nuestros lectores en segunda persona, como “Tu colaboración
es fundamental para nosotros.”
Uso de frases simples y directas.
Dividir el texto en párrafos pequeños y fáciles de leer.
Proporcionar información creíble y rica en contenido. Evitaremos cualquier
cosa que pueda ser percibido como una copia, un anuncio o una tontería.
Poner los temas principales en la parte superior de cada página y en las
primeras frases de cada párrafo.
Presentar las listas como elementos numerados o listados, no como
prosa.
Usar títulos de sección claros, e incluir cabeceras con sentido común que
ayuden a los usuarios a encontrar la información rápidamente.
Evitar la ambigüedad. Evitar meter a la gente en un rompecabezas. Darles
la información que necesitan tan pronto y clara como sea posible.
Utilizar con moderación las palabras o frases en mayúsculas, y nunca
como un estilo de formato. Un texto en mayúsculas no es tan fácil de leer
como un texto en caja mixta, ya que dan a la página un aspecto muy
abigarrado. Por ejemplo, “PSICOLOGÍA DE LAS PALABRAS” no es tan
legible como “Psicología de las palabras”.
Utilizar un lenguaje imperativo como “Introduzca el nombre del artista”
sólo para las tareas obligatorias, o redactar la instrucción correctamente.
Por ejemplo, podría decirse: “Para ver los eventos de su zona, introduzca
su ciudad”. Los usuarios se ven naturalmente atraídos por un texto que les
indica lo que pueden hacer en un sitio, especialmente si se parecen a un
widget reconocible, como un cuadro de entrada de texto o un menú
desplegable, y suelen seguir las instrucciones al pie de la letra, ya que
piensan que deben hacerlo.
Los titulares deberán ser breves pero descriptivos, para proporcionar el
máximo de información con el menor número de palabras. Por ejemplo, el
titular “Sven Väth se está recuperando” proporciona más información en
menos palabras que “los doctores informan de la mejoría de Sven Väth”,
que promete ampliar la noticia en un artículo, pero que en realidad no
transmite nada a los usuarios. Los titulares deben estar relacionados con
las entradillas que haya debajo, más que con la ampliación de la noticia.
Escribir y publicar resúmenes específicos de las notas de prensa y las
noticias. No repetir el primer párrafo del artículo, el cual probablemente no
fue escrito para ser un fragmento aislado. Ofrecer contenido en la
entradilla, y no limitarse a describir el contenido que vaya a aparecer
Redacción de contenido
217
•
después. Si tratamos de omitir los detalles para tentar a los usuarios a que
hagan clic, puede que nos salga el tiro por la culata; las generalidades no
son tan interesantes como las especificidades. Por ejemplo, “Dormir más y
estar más tiempo junto a los seres queridos son dos de las cinco formas
de aumentar la esperanza de vida en cinco años, afirma el Dr. Weil” es
más intrigante e informativo que “El Dr. Weil nos describe como aumentar
la esperanza de vida de la población”.
Resulta esencial incluir la fecha cuando mostramos un artículo completo,
porque los artículos pueden residir en la caché (por ejemplo, mediante los
motores de búsqueda) con mucha posteridad, y el contenido atrasado
podría ser confundido con las noticias actuales, a menos que los
elementos tuvieran una fecha completas, incluyendo el año. Por el mismo
motivo, los artículos no deben hacer referencia a momentos relativos,
como “hoy” o la” próxima semana”.
Formateo
•
•
•
•
•
•
•
•
•
•
•
218
Alinear el texto a la izquierda, incluyendo cabeceras y parágrafos.
Separar los parágrafos con 2 saltos de línea. Poner una línea en blanco
antes de las cabeceras y ninguna línea en blanco después de las
cabeceras.
Añadir un salto de línea a la última línea del texto.
No usar comillas dobles. Usar sólo comillas simples y apóstrofes.
Evitar caracteres especiales que no estén disponibles en HTML. Si tienes
la oportunidad, puedes ahorrar mucho tiempo a los desarrolladores
proporcionando una copia impresa de cualquiera de las páginas que
utilicen caracteres inusuales, con estos caracteres resaltados en negrita.
Ejemplos de estos caracteres que pueden requerir un trabajo extra para
reproducirlos incluyen el guión largo (—), copyright (©), trademark (™),
marca registrada (®), cedilla (ç), micro (μ), yen (¥), euro (€), grados (º),
libras (£), etc.
Usar la negrita para resaltar palabras y frases. No usar cursiva (que puede
ser difícil de leer en pantalla). No poner todo en mayúsculas.
No confiar en las variaciones de fuentes y tamaños. No son consistentes
en navegadores de diferentes plataformas y con configuraciones distintas
de los usuarios.
Evitar el uso incorrecto de espacios y signos de puntuación para enfatizar.
Por ejemplo, R E P O R T A J E S o R.E.P.O.R.T.A.J.E.S. podría
parecerle interesante, pero anularía los esfuerzos de un usuario que
estuviese buscando “reportajes”. Un uso poco común de los signos de
puntuación también reduce la capacidad de búsqueda y resulta molesto
para los usuarios con discapacidades visuales, cuyos navegadores de
audio deletrean la palabra, en vez de leerla como una palabra.
Evitar los signos de exclamación. El uso de este tipo de signos denota
poca profesionalidad, por lo que no deben incluirse en una página de
inicio. Los signos de exclamación no aportan nada y elevan el tono (no
forzar a los usuarios).
En caso de utilizar abreviaturas y acrónimos, añadir su significado
inmediatamente detrás. Esto es de ayuda especial para los usuarios que
utilizan un lector de pantalla. Las abreviaturas que ya se han
generalizado, como DVD, constituyen excepciones a esta directriz.
No incluir ‘DJ’ delante de nombres propios de artistas y mantenerse fiel a
los nombres de grupos o artistas. Por ejemplo, Superpitcher no es DJ
APÉNDICES
•
•
•
Superpitcher, ni Jeff Mills es DJ Jeff Mills.
Escribir ‘Internet’ como nombre propio.
Escribir en minúsculas y todo junto ‘culturanocturna.com’ o
‘culturanocturna’.
Dejar un espacio después de puntos y de comas. Escribir como en el
ejemplo: ‘A, B y C’ y no ‘A, B, y C‘.
Deletreo y marcas registradas
•
•
•
•
•
Asegurarse de que todas las marcas registradas, marcas de servicios y
trademarks están etiquetadas de acuerdo a la referencia estándar de la
corporación.
Los principales estilos de música electrónica deben escribirse como sigue:
techno, house, techno-house, drum’n’bass, jungle, electro, techno-pop,
electro-clash, minimal, microhouse, experimental, acid, ebm, industrial,
hardtechno, dub, downtempo, ambient, chill out, breakbeat, intelligent
techno.
Para el discjockey puede utilizarse también: DJ o deejay.
Escribir ‘e-mail’ en vez de ‘email’.
‘chart’ es femenino.
Escribir para los motores de búsqueda
•
•
•
•
Asegurarse de que el texto incluye términos comunes que pueden usarse
para buscar la información.
Para cada página, proporcionar una oración (25 palabras o menos) que
describa la página, que usaremos en un campo de cabecera de
descripción (esta es la descripción que muchos motores de búsqueda
proporcionan en sus listados de resultados de búsqueda).
Para cada página, proporcionar un pequeño conjunto de palabras que se
usarán en un campo oculto de cabecera de palabras clave.
En las palabras clave, incluir deletreos comunes y deletreos alternativos
(ejemplo: techno-house y technohouse o sven väth y sven vaeth)
Formateo de entrega de contenido
•
•
•
El equipo de desarrollo del sitio web puede convertir entre varios formatos
de texto, incluyendo Word, PowerPoint, Excel, texto plano, RTF, Quark y
Pagemaker. Sin embargo, es más fácil de trabajar con contenido nuevo si
esta creado en Word o texto plano. Por favor, no convertir el texto en
HTML.
El contenido gráfico puede ser entregado en casi todos los formatos
estándares, incluyendo EPS, Photoshop, TIFF, GIF, JPEG, Frenad,
Ilustrator, BMP, y PICT. Para mantener la más alta calidad, evitar usar un
formato comprimido, como GIF o JPEG, y suministrar la versión de más
alta resolución posible que tengas. Si no tienes versiones digitales
podemos escanear versiones impresas.
Entregar el texto y las imágenes en archivos adjuntos cuando los
enviemos por correo electrónico.
Redacción de contenido
219
FORMULARIO DE INFORME Y RESOLUCIÓN DE PROBLEMAS
Fecha de informe del problema _______________________
Sitio web _________________________________________
URL de la página ___________________________________
Páginas adicionales _________________________________
Tipo de error:
‫ ٱ‬Estético
‫ ٱ‬Error de código
‫ ٱ‬Estructural/Navegaciona
l
‫ ٱ‬Usabilidad
‫ ٱ‬Hardware
‫ٱ‬
Severidad del error:
‫ ٱ‬Crítico
‫ ٱ‬Moderado
‫ ٱ‬Menor
Plataforma y navegadores donde ocurre el problema:
‫ ٱ‬Mac OS
‫ ٱ‬Otro
______________
‫ ٱ‬Netscape v. _______
‫ ٱ‬Win 95 / 98 / 2000 / NT
‫ ٱ‬Unix/Linux
‫ ٱ‬IE v. _______
‫ ٱ‬Otro ___________
Descripción del problema y como ocurrió:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_____________________
Fecha de solución del problema _________________________
Resolución del problema:
‫ ٱ‬Solucionado
‫ ٱ‬No se pudo solucionar
‫ ٱ‬Aplazado
‫ ٱ‬El problema informado no es un problema real (por ejemplo, ha sido
diseñado así):
__________________________________________________________
‫ ٱ‬No se pudo reproducir el error
Descripción de la resolución del problema:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_____________________
220
APÉNDICES
Test con regresión:
‫ٱ‬
‫ٱ‬
Solución probada en todas las plataformas y navegadores
Páginas relacionadas probadas
Informe de problemas
221
REVISIÓN DE LA POST-PRODUCCIÓN
OK NO OK
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
N / E Contenido
‫ٱ‬
Ortografía y gramática
‫ٱ‬
El sitio incluye información fundamental (por ejemplo,
información de contacto, ayuda, etc.)
‫ٱ‬
Los títulos de página (el tag <TITLE>), las cabeceras y
las etiquetas de los botones son correctos y
consistentes
‫ٱ‬
La lista de requisitos ha sido revisada y aprobada
Distribución y gráficos
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Todas las imágenes están marcadas con las etiquetas
de tamaño y <ALT> (probado sin cargar las imágenes ni
pasar el ratón por encima)
El tiempo de carga es aceptable
La calidad de las imágenes es aceptable
Disposición del texto: el espaciado, los tipos de letra y
los tamaños de fuente son aceptables
Los gráficos están alineados correctamente
Se presentan los logotipos requeridos y el copyright.
Compatibilidad con navegadores
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Probado en Windows, Mac y Linux (chequeados los
problemas con las fuentes y los colores)
Probado en Netscape e IE en todas las versiones
objetivo (chequeados los problemas de distribución y de
contenido)
Compatibilidad con las preferencias de usuario
La distribución funciona en todos los tamaños de
ventana
La distribución se imprime aceptablemente (sin cortar
los bordes)
La distribución es razonable para todos los tipos de letra
típicos y configuraciones de tamaño de fuente
HTML y código
Todos los vínculos han sido probados en todas las
páginas
Los enlaces de e-mail se han probado enviando correos
o haciendo clic y revisando las direcciones
Los MetaTags están presentes en todas las páginas
(palabras claves, descripciones, etc.)
La funcionalidad del código JavaScript está probada
totalmente (y el HTML contiene etiquetas apropiadas
ALT)
Los errores críticos de código se han eliminado
Documentación
222
APÉNDICES
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Se han anotado los colores y las fuentes
Se ha anotado la organización de ficheros y su
localización
Se han anotado las convenciones inusuales de nombres
Promoción del sitio (una vez aprobado el
lanzamiento)
Yahoo! y Google
Motores de búsqueda
Indexadores específicos
El nombre de dominio funciona
Revisión de post-producción
223
LISTA DE CONTROL PARA UN MANTENIMIENTO MÍNIMO
URL _____________________________________________________
Fecha ________________________
Verifique que son correctos y funcionan los siguientes elementos cuando el
sitio web se actualiza y antes de poner el sitio otra vez on-line.
OK
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
224
APÉNDICES
NO OK
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
N/E
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
‫ٱ‬
Contenido verificado
Ortografía y gramática correcta
Todos los vínculos funcionan
La distribución se mantiene intacta
Se cargan todas las imágenes
El código HTML y JavaSript funciona
El sitio funciona en todas las plataformas
soportadas
REFERENCIAS
REFERENCIAS
[ADE97]
[BAE02]
[BIA95]
[BEL97]
[BOE88]
[BUT96]
[BRI02]
[BRO89]
[CAC00]
[CAL84]
[CER00]
[CON95]
[TRO97]
[GAR01]
[GAR97]
[GIL00]
[HEN00]
[HYS98]
[IRE99]
[JOW99]
[KOT02]
[KOT02a]
ADELL J. Música I simulacre a l’era digital (L’imaginari social en la cultura
de masses. Pagès Editors, pág. 53, 1997.
BAEZA YATES R. Y RIVERA LOAIZA C. «Ubicuidad y Usabilidad en la Web»
recogido de la World Wide Web: http://
sunsite.dcc.uchile.cl/~rbaeza/inf/usabilidad.html, 2002.
BIAS R. Y MAYHEW D. J. Cost–Justifying Usability, 1994. AP Professional
Cambridge, MA, 1994.
BELAUSTEGUI JIMENEZ R. Manifestaciones sonoras modernas: Música
electrónica y experimental en Barcelona (Modernidad y Postmodernidad
en la música contemporánea. Butlletí de la Societat Catlana de
Musicología, IV, pág. 190, 1997.
BOEHM B.. A Spiral Model of software development and Enhancement.
Computer, May 1988.
BUTLER K.A. Usability Engineering turns 10. Interactions, June 1996.
BRINK T., GERGLE D., WOOD S.D. Usability for the Web: Designing Web
Sites that Work. Morgan Kaufmann, San Francisco, USA, 2002. ISBN: 155860-658-0
BROWNE D.P. Y SUMMERSGILL R.. Human Factors: Its place in system.
Proceedings of the fifth international workshop on software specification
and design, Pennsylvania, United States, págs 227-234, 1989.
CACHERO C., GÓMEZ J. Y PASTOR O. Conceptual Design of Electronic
Product Catalogs Using OOH-Method Techniques. 19th International
Conference on Conceptual Modeling (ER’00), Salt Lake City, USA, 2000
GIL CALVO E. Los depredadores audiovisuales, juventud urbana y cultura
de masas. Tecnos, Madrid, 1984.
CERI S., FRATERNALI P., Y BONGIO A. Web Modeling Language (WebML):
a Modeling Language for Designing Web Sites. WWW9, volume 33 (1-6),
págs. 137-157. Computer Networks, 2000.
CONSTANTINE L.L. Use Cases for user Interfaces. ACM Interactions, 1995.
DE TROYER O. Y LEUNE C. \WSDM: A user-centered design method for
web sites. Proc. Of the 7th international World Wide Web Conference,
1997.
GARCÍA J. «El Techno Sacseja les Nits d’Agost» en El Periódico, edición
del 19 de Agosto de 2001
GARTON L. ET AL. Studying online socialnetworks.. Journal of Computer
Communication, 1997. Re-reviewed 2002.
GILL M. E-zines, diseño de revistas digitales. Ediciones G.Gili, México,
SA de CV, pág. 177, 2000.
HENNICKER R. Y KOCH N. A UML-based Methodology for Hypermedia
Design. En Evans A., Stuart S. y Selic B. editores, UML’2000 – The
Unified Modeling Language – Advancing the Standar, volume 1939 of
Lecture Notes in Computer Science, York, England, Octubre de 2000.
HYSELL D. Proc. Of the 16th international conference on Computer
documentation: ACM, 1998.
IREFREA. Salir de marcha y consumo de drogas. Edita Ministerio del
Interior, Madrid, 1999.
JOWERS PETER. Timeshards: Repetition, Timbre and Identity in Dance
Music. Time & Society, volumen 8 (2), pág. 381, 1999.
KOTZRINCKER J. «Por qué comprar contenido si se puede obtener gratis?»
recogido de la World Wide Web:
http:// www.baquia.com/com//20020604/art00010.html, 2002.
KOTZRINCKER, J. «Una audiencia joven, el bien más preciado» recogido de
la World Wide Web: http://www.baquia.es/com/20021015/art00013.html,
2002.
[KRU01]
Referencias
227
KRUG STEVE. No me hagas pensar. Prentice Hall, 2001. ISBN: 84-2053252-5
[LOR02]
LORÉS J. Introducción a la Interacción Persona-Ordenador. AIPO, Lleida,
2002.
[MAN02]
[MAN02a]
[MAN02b]
[MAN02c]
[MAN02d]
[MAY99]
[MCD99]
[MOL90]
[NIE93]
[NIE94]
[NIE99]
[NIE02]
[NOR86]
[NOT02]
[RCA02]
[RED02]
[RED02a]
[ROB01]
[ROS98]
[SAD00]
[SAN02]
[SOM01]
228
APÉNDICES
MANCHÓN E. «¿Qué es la usabilidad? (Definición)» recogido de la World
Wide Web: http://ainda.info/que_es_usabilidad.html, 2002.
MANCHÓN E. «La evolución del perfil del usuario medio» recogido de la
World Wide Web: http://ainda.info/evolucion_perfil.html, 2002.
MANCHÓN E. «Principios generales de usabilidad en sitios web » recogido
de la World Wide Web: http://ainda.info/principios_generales.html, 2002.
MANCHÓN E. «Tipos de evaluación de la usabilidad» recogido de la World
Wide Web: http://ainda.info/tipos_evaluación.html, 2002.
MANCHÓN E. «Errores frecuentes en los test de usuarios» recogido de la
World Wide Web: http://ainda.info/errores_evaluación.html, 2002.
MAYHEW DEBORAH J. The Usability Engineering Lifecycle: A Practitioner’s
Handbook for User Interface Design. Morgan Kaufmann, USA, 1999.
ISBN: 1-55860-561-4
MCDANIEL SCOTT. Reimpreso de Usability Interface. Volumen 6, Nº 1, Julio
1999.
MOLICH R. Y NIELSEN J. «Heuristic evaluation of user interfaces» en
Proceedings of ACM CHI 1990. Seattle, WA, Abril 1990, Pág. 249-256,
1990
NIELSEN J. Usability engineering. AP Professional, Boston, MA, 1993.
NIELSEN J. Y MARK R. L. Usability inspection methods. Wiley, Nueva York,
NY, 1994.
NIELSEN JAKOB. Designing Web Usability: The Practice of Simplicity. New
Riders Publishing, USA, 1999.
NIELSEN J. Y TAHIR M. USABILIDAD de páginas de inicio: análisis de 50
sitios web. Prentice Hall, Pearson educación, SA, 2002. ISBN: 84-2053202-9
NORMAN D. Y DRAPER S. User Centered System Design. Lawrence
Erlbaum Associates, Publishers, Hillsdale, NJ, 1986.
«Macromedia y Jakob Nielsen trabajaran juntos para mejorar la
navegación por internet» recogido de la World Wide Web:
http://www.noticiasdot.com/publicaciones/2002/0602/0706/noticias0706/n
oticias0706-7.htm, 2002.
ROSSON M.B. Y CARROLL J.M. Usability Engineering. Morgan Kaufmann,
USA, 2002.
REDACCIÓN BAQUIA.COM. «Los anunciantes afinan su puntería» recogido de
la World Wide Web:
http://www.baquia.com/com/20021210/not00008.html, 2002.
REDACCIÓN BAQUIA.COM. «Google: dejad de espantar usuarios con popups» recogido de la World Wide Web:
http://www.baquia.es/com/20021025/not00011.html, 2002.
ROBERTSON J. Information design using card sorting. Inf. & Design, 2001.
ROSENFELD L. Y MORVILLE P. Information Architecture for the World Wide
Web: Designing Larg-Scale Web Sites, 2nd Edition. Editorial O’Reilly,
USA, 1998. 2nd Edition, Agosto 2002
SADTLER C., HILGENBERG F., KWEK J., MARLAND L., SZCZEPONIK W. Y
VASUDEVA G. Patterns for e-business: User-to-business patterns for
topology 1 and 2 using WebSphere advanced edition. Raleigh, NC: IBM
Publications, 2000.
SÁNCHEZ DE OCAÑA J.M. «Mitos y leyendas del software open source»
recogido de la World Wide Web:
http:// www.evolucy.com/esp/articulos/20020915_open_source.html,
2002.
SOMMERVILE IAN. Software engineering, 6th edition. Addison Wesley.
[STE02]
[TRU98]
[UGA02]
Reading, MA, 2001.
STERNE J. Web Metrcis: Proven Methods for Measuring Web Sites
Success. John Wiley & Sons, 2002.
TRUCHARD A., EDITOR Y KATZ-HAAS R., AUTOR. Reimpreso de Usability
Interface. Volumen 5, Nº 1, Julio 1998.
UGARTE, DE D. El libro del posicionamiento en buscadores.
www.lasindias.com, Madrid, 2002.
[WHA94]
WHARTON C. ET AL.. «The cognitive walkthrough method: a practitioner's
[WHI98]
guide» en Usability Inspection Methods (Nielsen J. y Mack R. L. eds.).
John Wiley & Sons, New York, NY, Pág. 105-140, 1994.
WHITE B, BAGWELL D., GALAMBOS G., VAN WINKLE R., WALMSLEY A. An
approach to designing e-business solutions. Raleigh, NC: IBM
Publications, 1998.
BIBLIOGRAFÍA
A continuación presentamos una lista de lecturas que han servido como base
y ayuda para la realización de este proyecto. Alguna de esta bibliografía no se
encuentra referida desde el documento.
BRINK T., GERGLE D., WOOD S.D. Usability for the Web: Designing Web Sites that
Work. Morgan Kaufmann, San Francisco, USA, 2002. ISBN: 1-55860-658-0
FEIXA C., SAURA J. Y DE CASTRO J. Música i ideologies. Mentre la meva guitarra
parla suaument... Universitat de Lleida: Generalitat de Catalunya, págs 153170 y 261-288, 2003.
GIL MARTHA. E-zines, diseño de revistas digitales. Ediciones G.Gili, SA de CV,
México, 2000. ISBN: 968-887-378-0
GRANOLLERS T., LORÉS J. y PERDRIX F. Aplicación del Modelo de Proceso de la
Ingeniería de la Usabilidad a entornos web. Departamento de Informática e
Ingeniería Industrial. Universitat de Lleida, 2003.
KUHLMAN F. y ALONSO C. A. Información y telecomunicaciones. FCE, México,
1997.
NIELSEN J. Y TAHIR M. USABILIDAD de páginas de inicio: análisis de 50 sitios
web. Prentice Hall, Pearson educación, SA, 2002. ISBN: 84-205-3202-9
ROMERO LAGUILLO L.F. Publicar en Internet. Guía práctica para la creación de
documentos HTML. Servicio de publicaciones de la Universidad de Cantabria.
Universitat de Lleida, 1999.
SAVAGO S., NAVARRETE T. y BLAT J. Técnicas de Ingeniería de Usabilidad y
metodología de diseño conceptual en algunas aplicaciones informáticas.
Departament de Tecnología, Grupo de Tecnologías Interactivas, Universitat
Pompeu Fabra, 2002.
TALENS S. y HERNÁNDEZ J. Internet, redes de computadoras y sistemas de
información. Paraninfo, Madrid, 1997. ISBN: 84-283-2334-8
Referencias
229
ENLACES
http://www.ainda.info
Usabilidad, diseño web fácil de usar.
http://www.baquia.com/com//20020326/art00012.html
Analítico (2002). ¿Qué importa más, el precio de la acción o la calidad
del contenido?
http://www.jjg.net/ia/visvocab/spanish.html
Vocabulario visual para describir arquitectura de información y diseño
de interacción de J.J. Garret.
http://www.baquia.com/com/20020704/art00007.html
Los portales generalistas: El fin de una era por Antonio Delgado
Barrera.
http://www.baquia.com/com//20020828/art00012.html
Pop-down por Iñaki I. Rojo
http://www.baquia.es/com/20021104/not00003.html
Redacción Baquía.com (2002). Yahoo! usará PHP en lugar de su
propio lenguaje propietario. Recogido de la World Wide Web.
http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2901102,00.html
Análisis del valor de Linux por su uso de la arquitectura Intel.
http://zdnet.com.com/2100-1104-975848.html
Resumen del estudio de IDC sobre costo total de Linux vs Windows
patrocinado por MS
Comentario al estudio de IDC sobre el Costo Linux vs. Windows.
Análisis del costo total de propiedad de Linux sobre Windows.
http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2878232-3,00.html
Análisis de las dificultades para migrar de workstation Windows a Linux
en entornos empresariales.
http://es.tldp.org/Manuales-LuCAS/conf-MigraNT2GNU/doc-migrar-nt-linux-html/
Libro blanco de Jon C. LeBlanc sobre los motivos, ventajas y
procedimientos para migrar de servidores NT a Linux.
http://www.infoworld.com/articles/tc/xml/00/08/28/000828tcroi.xml
Nota sobre el desarrollo de IBM para portar servicios y aplicaciones
para reducir costos empresariales.
http://www.eweek.com/article2/0,3959,293,00.asp
Resultados de la comparación entre MySQL 4, Oracle 9i, DB2 7.2, SQL
Server 2000 y ASE 12.5 de PC Computing.
http://www.microsoft.com/windows2000/server/howtobuy/pricing/default.asp
Listas de precios de Microsoft Windows 2000 Server.
230
APÉNDICES
http://www.microsoft.com/windowsxp/pro/howtobuy/pricingretail.asp
Precios de Microsoft Windows XP Profesional.
http://www.linux.org
http://www.apache.org
http://www.mysql.com
http://www.php.net
URLs oficiales LAMP.
http://www.zend.com/zend/tut/tut-hatwar.php
http://www.zend.com/zend/tut/tut-hatwar2.php
Develop rock-solid code in PHP.
http://www.zend.com/zend/spotlight/code-gallery-wade7.php
Working with Multi-page Forms.
http://www.netcraft.com/Survey/index-200206.html
En Junio de 2002, Apache tenía un 60% de la cuota de mercado.
http://ciac.llnl.gov/ciac/ToolsUnixGeneral.html#Wuftpd
Servidor FTP más utilizado en Internet.
http://lwn.net/Articles/1433/
PHP (open source) es el lenguaje más utilizado en Internet para serverside-scripting.
http://www.forbes.com/2002/07/15/0715linux.html
En el año 2000 Linux era el 2º sistema operativo más utilizado para
servidores en el mundo.
http://www.samag.com/articles/2001/0107/
Linux tiene mejor rendimiento que Solaris y Windows 2000.
http://www.cyber.com.au/cyber/about/linux_vs_windows_tco_comparison.pdf
Las soluciones informáticas basadas en Linux y software abierto tienen
un coste global entre un 24% y un 34% menor que las soluciones
basadas en el enfoque propietario de Microsoft.
http://conferences.oreillynet.com/cs/os2002/view/e_sess/2600
Yahoo utiliza, entre otro software open source, MySQL.
http://www.google.com/press/highlights.html
Google, el buscador más utilizado en Internet, está soportado por un
cluster de más de 10.000 máquinas Linux.
http://www.proyectoweb.cubaweb.cu/boletines/032-feb03.html
¿Qué nos depara el futuro en el Diseño Web?
Referencias
231
232
APÉNDICES

Ingeniería de la Usabilidad

Transcripción

Documentos relacionados

Pájaros Pintados - Ana Paula da Silva

Descargar - Comunidad no oficial de Entidad-3d