Universitat de Lleida - Escola Universitaria PolitècnicaEnginyeria Tècnica en Informàtica de Sistemes

Trabajo Final de Carrera

Ingeniería de la Usabilidadaplicada 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............................................................... 5RESUMEN.................................................................................................... x

Capítulo 0. INTRODUCCIÓN........................................................... 1MÚSICA ELECTRÓNICA Y CULTURA DE CLUB....................................... 2CULTURANOCTURNA.COM....................................................................... 3OBJETIVOS DEL PROYECTO.................................................................... 4ESTRUCTURA DEL DOCUMENTO............................................................ 8

ESTADO DEL ARTE................................................ 11Capítulo 0. WORLD WIDE WEB.................................................... 12

CIBERNÉTICA, COMUNICACIÓN ENTRE MÁQUINAS........................... 13TCP/IP........................................................................................................ 13LA WORLD WIDE WEB............................................................................. 14EL PROTOCOLO HTTP............................................................................. 16HTML.......................................................................................................... 18TENDENCIA ACTUAL................................................................................20XHTML....................................................................................................... 20HTML DINÁMICO....................................................................................... 21HOJAS DE ESTILO.................................................................................... 21JAVASCRIPT............................................................................................. 23MACROMEDIA FLASH.............................................................................. 25

Capítulo 0. SOFTWARE OPEN SOURCE..................................... 28SOFTWARE LIBRE.................................................................................... 29APACHE..................................................................................................... 31PHP............................................................................................................ 33PEAR.......................................................................................................... 40MySQL........................................................................................................ 40

MODELO DE PROCESO......................................... 43Capítulo 0. MPIU PARA LA WEB.................................................. 44

INGENIERÍA DEL SOFTWARE................................................................. 45DISEÑO CENTRADO EN EL USUARIO.................................................... 46INGENIERIA DE LA USABILIDAD............................................................. 48USABILIDAD EN LA WEB..........................................................................50BUSCANDO UN MODELO DE PROCESO............................................... 52MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD......... 53APLICACIÓN DEL MODELO DE PROCESO A LA WEB.......................... 54ESQUEMA DEL MODELO......................................................................... 55

CASO DE ESTUDIO.................................................63Capítulo 0. APLICACIÓN DEL MODELO...................................... 64

PLANIFICACIÓN........................................................................................ 65

vi CONTENIDOS

EVALUACIÓN............................................................................................ 65GLOSARIO................................................................................................. 68

Capítulo 0. ANÁLISIS DE REQUISITOS....................................... 70ANÁLISIS ETNOGRÁFICO........................................................................ 71ANÁLISIS DE LOS IMPLICADOS.............................................................. 75ACTORES, ROLES Y ORGANIZACIÓN.................................................... 78PLATAFORMA........................................................................................... 79OBJETIVOS DE LA USABILIDAD..............................................................80OBJETIVOS DE LA APLICACIÓN............................................................. 82ENCUESTAS, ESCENARIOS Y ANÁLISIS COMPETITIVO......................83

Capítulo 0. DISEÑO CONCEPTUAL............................................. 86ANÁLISIS DE TAREAS.............................................................................. 87ARQUITECTURA DE LA INFORMACIÓN................................................. 94ELEMENTOS FUNDAMENTALES DE DISEÑO DE LA PÁGINA............118

Capítulo 0. PROTOTIPADO......................................................... 126DISTRIBUCIÓN DE LA PÁGINA.............................................................. 127MAQUETAS............................................................................................. 128TEST.DE LAS MAQUETAS CON USUARIOS.........................................133PROTOTIPOS.......................................................................................... 138TEST DE LOS PROTOTIPOS CON USUARIOS..................................... 145

Capítulo 0. IMPLEMENTACIÓN.................................................. 148USABILIDAD EN EL DESARROLLO DEL SOFTWARE..........................149DISEÑO BÁSICO DE LA PÁGINA........................................................... 157ESCRIBIR PARA LA WEB....................................................................... 159

Capítulo 0. LANZAMIENTO......................................................... 162PRE-LANZAMIENTO............................................................................... 163LANZAMIENTO........................................................................................ 164POST-LANZAMIENTO............................................................................. 166

CONCLUSIONES Y LÍNEAS FUTURAS............... 169Capítulo 0. CONCLUSIONES ..................................................... 170

ESTADO ACTUAL....................................................................................173LINEAS FUTURAS................................................................................... 173

Capítulo 0. APÉNDICES.............................................................. 178PLANIFICACIÓN DEL PROYECTO......................................................... 179GLOSARIO DE TÉRMINOS RELACIONADOS CON LA MÚSICA ELECTRÓNICA........................................................................................ 184CUESTIONARIO...................................................................................... 191ESCENARIOS.......................................................................................... 194ESTADÍSTICAS........................................................................................200ANÁLISIS COMPETITIVO........................................................................202REVISIÓN DE LA ARQUITECTURA........................................................211Proceso.................................................................................................... 211General..................................................................................................... 211Tratamiento.............................................................................................. 211Organización............................................................................................ 211Clasificación............................................................................................. 211Enlaces..................................................................................................... 212Búsqueda................................................................................................. 212REVISIÓN DE LOS PROTOTIPOS..........................................................213Distribución............................................................................................... 213Navegación...............................................................................................213REVISIÓN DETALLADA DE PROPÓSITO GENERAL............................214Gráficos.................................................................................................... 214Color......................................................................................................... 215Tipografía................................................................................................. 215

CONTENIDOS vii

FORMULARIO DE PREPARACIÓN DE UN TEST CON USUARIOS..... 216GUÍA DE ESTILO PARA LA REDACCIÓN DE CONTENIDO..................217FORMULARIO DE INFORME Y RESOLUCIÓN DE PROBLEMAS........ 220REVISIÓN DE LA POST-PRODUCCIÓN................................................ 222Contenido................................................................................................. 222Distribución y gráficos.............................................................................. 222Compatibilidad con navegadores............................................................. 222Compatibilidad con las preferencias de usuario.......................................222HTML y código......................................................................................... 222Documentación.........................................................................................222LISTA DE CONTROL PARA UN MANTENIMIENTO MÍNIMO................ 224

Capítulo 0. REFERENCIAS......................................................... 226REFERENCIAS........................................................................................ 227BIBLIOGRAFÍA.........................................................................................229ENLACES................................................................................................. 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.COMOBJETIVOS 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.

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

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.

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

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

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?

• 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 server-

side-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.

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:

• 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.

8 INTRODUCCIÓN

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.

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

EL PROTOCOLO HTTP • Funcionamiento • Los servidores de WWW

HTML • Corrección sintáctica de los documentos • Evolución del HTML

TENDENCIA ACTUAL XHTML HTML DINÁMICO HOJAS DE ESTILO JAVASCRIPT

• JavaScript en los documentos HTML 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 cliente-servidor 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

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.

Capítulo 1: World Wide Web 15

Figura 4

Modelo cliente-servidor.

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.

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

Capítulo 1: World Wide Web 17

Figura 5Paradigma petición-respuesta del protocolo HTTP.

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

Capítulo 1: World Wide Web 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:

• 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.

20 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.

Capítulo 1: World Wide Web 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.

(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

Figura 6

Hojas de estilo.

El mismo documento con (a) y sin (b) aplicarle una hoja de estilos (CSS).

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 Version de JavaScript Soporte ECMA

Nestcape 2 Javascript 1.0 --Internet

Explorer 2 No soporta JavaScript --

Nestcape 3 Javascript 1.1 --Internet

Explorer 3 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

Nestcape 6 ECMA compliant Javascript 1.4 Full ECMAScript-262

Internet Explorer 5

ECMA compliant Javascript 1.3 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

Capítulo 1: World Wide Web 23

Tabla 1

Tabla de versiones.

El programa que va a interpretar los programas JavaScript es el propio navegador, lo que significa que si el nuestro no soporta JavaScript, no podremos ejecutar las funciones que programemos.

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

windowhistorylocationdocument <BODY>...</BODY>

anchor

<A NAME="...">...</A>

applet <APPLET>...</APPLET>

area <MAP>...</MAP>

form <FORM>...</FORM>

button <INPUT TYPE="button">

checkbox <INPUT TYPE="checkbox">

fileUpload <INPUT TYPE="file">

hidden <INPUT TYPE="hidden">

password <INPUT TYPE="password">

radio <INPUT TYPE="radio">

reset <INPUT TYPE="reset">

select <SELECT>...</SELECT>

options <INPUT TYPE="option">

submit <INPUT TYPE="submit">

text <INPUT TYPE="text">

textarea <TEXTAREA>..</TEXTAREA>

image <IMG SRC="...">

link <A HREF="...">...</A>

plugin <EMBED SRC="...">

frame <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.

Capítulo 1: World Wide Web 25

Tabla 2

Jerarquía JavaScript para los objetos del navegador.

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.

26 ESTADO DEL ARTE

Figura 7

Entorno de trabajo de Macromedia Flash 5.

2

ESTADO DEL ARTE

SOFTWARE OPEN SOURCE

SOFTWARE LIBRE • Definición • Tecnologías Open Source:

APACHE PHP

• 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

PEAR MySQL

• PHP con 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:

• 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

30 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

Capítulo 2: Software Open Source 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.

Capítulo 2: Software Open Source 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).

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:

• 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

Figura 8

Esquema de producción de código HTML mediante PHP.

34 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”); ?>

2. <?php echo (“Esta es para servir documentos XML\n”); ?>

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 ?>.

Capítulo 2: Software Open Source 35

Ejemplo 1

Formas de salir de HTML.

Vamos a ver un ejemplo sencillo:

<HTML><BODY>

<?php echo “Esto es PHP”<BR>”; // 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:

<?php echo “Esto es una prueba”; // Comentario tipo CC++ para una 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).

Ejemplo 2

Sintaxis en PHP.

Ejemplo 3

Comentarios en PHP.

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

FormulariosEl 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-mailsPHP 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( ).

<?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.

CookiesPHP 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.

Capítulo 2: Software Open Source 37

Ejemplo 4

Especificación de la función mail().

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.

(a)

(b)

(c)

SesionesEl 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

Figura 9

Funcionamiento de las cookies.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.

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:

<?phpsession_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ámicamentePHP 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 accesoPodemos 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.

Capítulo 2: Software Open Source 39

Ejemplo 5

Session_start().

Ejemplo 6

Cabecera de autentificación.

A partir de aquí realizaremos las comprobaciones necesarias para asegurarnos que los datos introducidos son los correctos.

<?php 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; } ?>

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 cliente-servidor dentro de las aplicaciones web.

Ejemplo 7

Autentificación de usuario.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.

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() { if (!($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; }

$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.

Capítulo 2: Software Open Source 41

Ejemplo 8

Conexión a una base de datos MySQL desde PHP.

42 ESTADO DEL ARTE

3

MODELO DE PROCESO

MPIU PARA LA WEB

INGENIERÍA DEL SOFTWARE • Ciclos de vida en el desarrollo software

DISEÑO CENTRADO EN EL USUARIO INGENIERIA DE LA USABILIDAD

• ¿Qué es la usabilidad? • ¿Por qué es importante la usabilidad?

USABILIDAD EN LA WEB BUSCANDO UN MODELO DE PROCESO

• El proceso de software • El Lenguaje de Modelamiento Unificado, UML.

MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD APLICACIÓN DEL MODELO DE PROCESO A LA WEB ESQUEMA DEL MODELO

• Organización Conceptual. • Análisis de requisitos • Diseño Conpetual • Prototipado• Evaluación • Implementación • Lanzamiento

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

Estos cambios de paradigmas en los modelos y procesos de desarrollo de software imponen también un cambio de paradigma en la interacción usuario-sistema 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

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.

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].

Capítulo 3: MPIU para la Web 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.

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ón-evaluació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

Figura 12

Metodología esquemática de la Ingeniería de la Usabilidad.

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

Capítulo 3: MPIU para la Web 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.

Capítulo 3: MPIU para la Web 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) ypor 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.”

Capítulo 3: MPIU para la Web 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” (high-end) 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.

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.

Capítulo 3: MPIU para la Web 55

Figura 13

Modelo de Proceso de la Ingeniería de la Usabilidad (MPIU).

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 usuarioDesde 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 iterativoEn 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:

Análisis de requisitos

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.

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).

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

Capítulo 3: MPIU para la Web 57

Figura 14

Actividades del análisis de requisitos.

Figura 15

Actividades del diseño.

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).

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 Figura17).

58 MODELO DE PROCESO

Figura 16

Actividades del prototipado.

InspecciónEl 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ónEl 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

Capítulo 3: MPIU para la Web 59

Figura 17

Lista de posibles actividades de evaluación.

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.

TestEn 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:

• 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

60 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:

Capítulo 3: MPIU para la Web 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 DELPROYECTO, 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 LAMÚ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

ANÁLISIS DE LOS IMPLICADOS ACTORES, ROLES Y ORGANIZACIÓN PLATAFORMA

• Hardware y Sistemas Operativos • Navegadores • Monitores • Velocidad de conexión

OBJETIVOS DE LA USABILIDAD OBJETIVOS DE LA APLICACIÓN ENCUESTAS, ESCENARIOS Y ANÁLISIS COMPETITIVO

• Escenarios • Análisis competitivo • Encuestas

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 deep-house 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.

(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.

Capítulo 5: Análisis de requisitos 73

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).

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.

(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

Figura 19

Flyers.

Ejemplo de dos flyers con los que el club fragatino Florida 135 informa de su programación.

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

Capítulo 5: Análisis de requisitos 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.

76 CASO DE ESTUDIO

Figura 20

La figura del DJ.

Actualmente, la figura del DJ va más allá de la mezcla de una sucesión de discos.

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 re-trabaje 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.

Capítulo 5: Análisis de requisitos 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).

Capítulo 5: Análisis de requisitos 79

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

Figura 21

Navegadores más usados.

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:

Capítulo 5: Análisis de requisitos 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:

• 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.

82 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.

Capítulo 5: Análisis de requisitos 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.

Análisis competitivo

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

ARQUITECTURA DE LA INFORMACIÓN • 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

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.

Editor Profesional

PIDE PROGRAMACIÓN

BUSCA CONTACTOCON EL CLUB

ENTREGA PROGRAMAOBTIENEPROGRAMACIÓN

OBTIENECONTACTO

Caso de Uso: “Gestionar los Eventos”Descripción: El editor procesa la información que ha recibido de la programación de un clubActores: Editor, Sistema

Capítulo 6: Diseño conceptual 87

Figura 22

Diagrama del Escenario Agenda.

Muestra los actores involucrados en el proceso de obtención de contenido para la agenda de eventos.

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 introducidoEn 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 inicioActores: Usuario, SistemaCaso de uso adicional necesitado: Caso de uso “Búsqueda de eventos en la agenda”

1. El usuario localiza el calendario en la página de inicio.2. El usuario selecciona la zona regional en la que está interesado.3. El usuario elige el día que le interesa en el calendario.4. El sistema le muestra la lista de eventos seleccionados.5. El usuario puede seguir buscando (seguiría el caso de uso “Búsqueda

de eventos en la agenda”).

88 CASO DE ESTUDIO

Caso de uso: “Búsqueda de eventos en la agenda”Descripción: El usuario busca que eventos hay un cierto día desde la página de agendaActores: Usuario, Sistema

1. El usuario localiza la agenda y sigue el vínculo.2. El sistema muestra un calendario.3. El usuario se dirige al día que le interesa.4. El sistema le muestra las zonas.5. El usuario elige su zona.6. El sistema le muestra los eventos.7. 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”Descripción: El usuario busca que eventos hay un cierto día desde la página de agendaActores: Usuario, Sistema

1. El usuario localiza la agenda y sigue el vínculo.2. El sistema muestra un calendario y las zonas.3. El usuario elige su zona.4. El usuario se dirige al día que le interesa.5. El sistema le muestra los eventos.6. El usuario puede seguir buscando por días en la misma zona.

Escenario Reportajes.

Editor

Profesional

PIDE ACREDITACION

CONFIRMA ACREDITACIONACREDITAEN PUERTA

Colaboradores

HACENREPORTAJE

PIDE COLABORACION

CONFIRMACION

ENTREGA REPORTAJE

Capítulo 6: Diseño conceptual 89

Figura 23

Diagrama del Escenario Reportajes.

Muestra los actores involucrados en el proceso de creación y obtención de un reportaje para el sitio web.

Caso de Uso: “Gestionar los reportajes”Descripción: El editor introduce el artículo de un evento junto con el reportaje fotográficoActores: Editor, SistemaCaso de uso adicional necesitado: “Login”

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 los

reportajes.4. El editor hace clic en ese vínculo.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.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: El evento produce erroresEn 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.10c. El editor elige la opción de editar y vuelve al paso 8.

Caso de uso: “Búsqueda de reportajes”Descripción: El usuario elige ver un reportaje en el que está interesadoActores: Usuario, Sistema

1. El usuario localiza la página de reportajes.2. El usuario hace clic en ese vínculo.3. El sistema muestra un índice paginado de reportajes realizados.4. El usuario hace clic en el reportaje en el que está interesado.5. El sistema le muestra el artículo con unas fotografías de muestra.6. El usuario puede acceder al resto de fotografías siguiendo el enlace.

Escenario General.

90 CASO DE ESTUDIO

Editores

Profesionales

PRODUCENACTIVOS

Colaboradores

CREANACTIVOSPETICION DE ACTIVOS

CONFIRMACIONES

ENTREGA ACTIVOS

PETICION DE ACTIVOS

CONFIRMACIONES

ENTREGA ACTIVOS

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 activoActores: Editor, SistemaCaso de uso adicional necesitado: “Login” 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 a la que pertenece el activo.4. El editor hace clic en ese vínculo.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.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: Activo ya introducidoEn 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.10c. El editor elige la opción de editar y vuelve al paso 8.

Caso de uso: “Selección general de contenido desde página de inicio”Descripción: El usuario selecciona contenido de la página de inicioActores: Usuario, Sistema

Capítulo 6: Diseño conceptual 91

Figura 24

Diagrama del Escenario General.

Muestra los actores involucrados en el proceso de creación y obtención de activos generales (información de artistas, clubs, listas, etc.) para el sitio web.

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ónActores: Usuario, Sistema

1. El usuario localiza el activo y hace clic en el vínculo.2. El sistema muestra la página del activo correspondiente.3. El usuario identifica la navegación de esta sección.4. El usuario selecciona el activo en el que está interesado.5. El sistema muestra el contenido seleccionado.6. 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 claveActores: Usuario, Sistema

1. El usuario localiza el campo de búsqueda.2. El usuario introduce la palabra clave que desea buscar en el campo.3. El usuario pulsa el botón Buscar.4. El sistema muestra una pagina de resultados.5. El usuario verifica los resultados y sigue el enlace que desea.

Alternativa 1: Palabra clave incorrecta o resultados no satisfactoriosEn 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-mailActores: Usuario, Sistema

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 incorrectamenteEn 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 comunidadActores: Usuario, SistemaCaso de uso adicional necesitado: “Introducir mensajes”

1. El usuario localiza el enlace al foro y hace clic en él.2. El sistema le muestra los grupos de debates posibles.3. El usuario localiza el que le interesa y accede.4. El sistema muestra la lista de temas en el foro.5. El usuario localiza un tema y accede.6. El sistema muestra los mensajes de ese tema.7. El usuario examina los mensajes y responde (sigue el caso de uso

“Introducir mensajes”)

Alternativa 1: El usuario quiere introducir un temaEn el paso 5 el usuario va a crear un nuevo tema de debate5a. El usuario en vez de acceder a un tema, identifica el enlace para crear un nuevo tema (sigue el caso de uso “Introducir mensajes”).

Capítulo 6: Diseño conceptual 93

Caso de uso: “Introducir mensajes”Descripción: El usuario introduce un nuevo mensaje o responde a un mensaje en el foroActores: Usuario, Sistema

1. El usuario localiza el vínculo hacia la introducción del mensaje.2. El usuario hace clic en ese vínculo.3. El sistema le muestra un formulario para introducir el mensaje.4. El usuario rellena el formulario o mensaje.5. El usuario presiona el botón de publicación del mensaje.6. El sistema le muestra una presentación del mensaje.

Caso de uso: “Login”Descripción: El editor o usuario con privilegios se identifica como talActores: Editor, Sistema

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.9. El sistema muestra el panel de administración.

Alternativa 1: Login incorrectoEn el paso 9 el sistema no encuentra al usuario9a. 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.

Capítulo 6: Diseño conceptual 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 sortingDebido a la multitud de alternativas para organizar los contenidos, usaremos la técnica de open card sort con los usuarios.

Biografias Artistas DJ’s Clubs Listas

Charts DJ Charts Listas DJ Entrevistas Agenda

Eventos 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

Capítulo 6: Diseño conceptual 97

Figura 25

Hoja de etiquetas usadas en la prueba de card sorting.

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:

• 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

Agenda Comunidad Música DJ’s

• Quienes somos• Privacidad• Nosotros• Contacto• Links• Enlaces• Información legal• Mapa del sitio

• Agenda• Calendario• Eventos

• Comunidad• Foros• Opinión• Debates• Clubbers

• Discos• Sesiones• Sellos• Críticas

• Artistas• Producción• Sesiones• Entrevistas• Biografías• Listas Dj• DJ Charts• Top 10• DJ’s

Relacionado con:

• Ayuda• Búsqueda• Internet• Boletín• Colabora

• Festivales• Fiestas• Conciertos

• Flyers• Ayuda• Búsqueda• Internet• Boletín• Colabora• Críticas

• Sellos• Discos

Reportajes Links Ayuda Búsqueda Música Resto e inconexas

• Reportajes• Fotos• Articulos

• Links• Enlaces• Internet

• Ayuda• Búsqueda

• Discos• Sesiones• Sellos• Críticas

• Audio• Colabora• Especiales• Producción

Relacionado con:

98 CASO DE ESTUDIO

Figura 26

Método de card sorting.

• 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

Capítulo 6: Diseño conceptual 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 deCulturaNocturna.com

Agenda ClubsArtistas Noticias Reportajes Especiales ForosEnlacesDiscos

Biografías Entrevistas DJ Charts Artículos Fotos

NIVEL 1

NIVEL 2

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.

• 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.

100 CASO DE ESTUDIO

Figura 27

Representación de la arquitectura.

Diagrama en árbol con disposición horizontal de la arquitectura de la información de culturanocturna.com

• 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.

INICIO

ARTISTAS

BIOGRAFIAS

ENTREVISTAS

DJ CHARTS

ARTISTA

ARTISTA

ARTISTA

CLUBS CLUBS

NOTICIAS NOTICIAS

ESPECIALES

DISCOS

ENLACES

FORO

BÚSQUEDA

COLABORA

CITA

AGENDA

EVENTOS

REPORTAJESARTICULOS

FOTOS FOTOS

ESPECIALES

DISCOS

ClubsArtistas

Discos

TEMAS MENSAJES

ENCUESTA

BOLETÍN

QUIENES SOMOS

CONTACTA CON NOSTROS

MAPA DEL SITIO

NORMAS DE PRIVACIDAD

Capítulo 6: Diseño conceptual 101

Figura 28

Diagrama en árbol vertical de la arquitectura de la información de culturanocturna.com

Secuencia paso a paso

Enlace hacia el exterior

Atajo

Página estática

Página dinámica

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.

InicioCitasRecomendados

ArtistasBiografías

Añadir biografíaEntrevistasDJ charts

102 CASO DE ESTUDIO

Figura 29

Leyenda del diagrama de la Figura 28.

Navegación en el pie de páginaNo 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 sitioLos 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 somosProporcionar 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 contactoIncluiremos un vínculo contacta con nosotros, para que puedan localizarnos.

Normas de privacidadAunque 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).

Capítulo 6: Diseño conceptual 103

AyudaEl 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 progresoPara 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::

La página de inicioA 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

Figura 30

Navegación constante de culturanocturna.com.

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,

Capítulo 6: Diseño conceptual 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.

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.

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

Figura 31

Finalidad del sitio en página de inicio.

Figura 32

Navegación a pie de página.

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”.

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

Capítulo 6: Diseño conceptual 107

Figura 33

Contenido destacado y etiquetado de secciones.

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.

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

Figura 34

Sección de noticias en página de inicio.

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.

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.

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

Capítulo 6: Diseño conceptual 109

Figura 35

Acceso a las últimas entrevistas y al archivo con todas ellas.

Figura 36

Utilización de vínculos con texto significativo.

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”.

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

Figura 37

Barra de navegación superior.

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.

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.

Capítulo 6: Diseño conceptual 111

Figura 38

Cuadro de búsqueda.

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.

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

Figura 39

Acceso directo a la agenda desde página de inicio.Se habilita un calendario con el que acceder a los eventos directamente.

Figura 40

Fotografías en culturanocturna.com

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.

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).

Capítulo 6: Diseño conceptual 113

Figura 41

Información visible antes del pliegue.

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.

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.

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

Figura 42

Radio buttons empleados.

Figura 43

Título de página.

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 URLResulta 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.

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.

Capítulo 6: Diseño conceptual 115

Figura 44

Noticia con entradilla.

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.

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 COMUNIDADLo 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 HORASLos 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

Figura 45

Vínculos de suscripción y colaboración.

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”.

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:

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:

Capítulo 6: Diseño conceptual 117

Figura 46

Formato de las fechas.

Figura 47

Breadcrumbs o migas de pan.

• 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

ColoresLa 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.

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

Figura 48

Test en escala de grises.

Resolución de pantallaDiseñ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 entradaEl 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).

ImágenesEs 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.

Capítulo 6: Diseño conceptual 119

Figura 49

Cuadros de entrada en un formulario.

TipografíaAunque 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 Uso de HTML 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.

El texto se carga más rápido que los gráficos.

Las fuentes pueden ser controladas 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

Tabla 3

Ventajas e inconvenientes del uso de gráficos y de HTML para crear el texto en una página web.

FormulariosLa 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.

Capítulo 6: Diseño conceptual 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.

(a)

(b)

Interactividad y multimediaIntegrar 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

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).

Macromedia FlashFlash 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.

Capítulo 6: Diseño conceptual 123

Figura 51

Matriz de fotos en Flash para los reportajes.

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

MAQUETAS • Selección de las páginas que requieren maqueta • Página de inicio • Maquetas Digitales

TEST.DE LAS MAQUETAS CON USUARIOS • Evaluación del primer borrador en maqueta digital • Evaluación del segundo borrador en maqueta digital • Evaluación de variables concretas

PROTOTIPOS • Storyboards • Wireframes y prototipos de alta fidelidad

TEST DE LOS PROTOTIPOS CON USUARIOS • Evaluación del primer prototipo • Evaluación del sitio en vivo

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.

(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

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).

Capítulo 7: Prototipado 129

• Miniaturas (thumbnails). Empezaremos desarrollando una serie de thumbnails basados en los requisitos básicos de la página (véase Figura53). 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.

• 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.

Figura 53

Conjunto de miniaturas (thumbnails) de la página de inicio.

130 CASO DE ESTUDIO

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 54

Maqueta en papel de la página de inicio.

Figura 55

Maquetas digitales de la página de inicio.

La versión (a) fue desestimada. Se escogió para futuras interaciones la versión (b).

Capítulo 7: Prototipado 131

(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.

Capítulo 7: Prototipado 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.

Capítulo 7: Prototipado 135

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.

Figura 60

Maqueta digital de página no encontrada.

136 CASO DE ESTUDIO

Figura 61

Maqueta digital de la página de inicio.

Último borrador antes de implementar.

Capítulo 7: Prototipado 137

(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).

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).

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).

(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.

Figura 63

Storyboards del formulario de administración de la agenda.

Capítulo 7: Prototipado 139

(a)

(b)

Figura 64

Prototipos finales.

Podemos ver la página de la agenda de eventos (a) y la página de artistas (b).

140 CASO DE ESTUDIO

(a)

(b)

Figura 65

Prototipos finales.

Podemos ver la página que se usará para archivos no encontrados (a) y el mapa del sitio (b).

Capítulo 7: Prototipado 141

(a)

(b)

Figura 66

Prototipos finales.

Podemos ver la página de noticias (a) y una noticia en concreto (b).

142 CASO DE ESTUDIO

(a)

(b)

Figura 67

Prototipos finales.

Podemos ver la página de login para identificación de usuarios (a) y la página de administración de la agenda (b).

Capítulo 7: Prototipado 143

(a)

(b)

Figura 68

Prototipos finales.

Podemos ver la página de administración de artistas (a) y la página de administración de la citas (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.

Capítulo 7: Prototipado 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 (3-tiered 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.

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.

Figura 69

Ejemplo de Arquitectura 3-tiered.

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.

150 CASO DE ESTUDIO

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 controlExisten 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.

Figura 70

Arquitectura 3-Tiered para el desarrollo software.

Capítulo 8: Implementación 151

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

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.

152 CASO DE ESTUDIO

soporte a la tecnología. Veamos las características que nos serán particularmente útiles:

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.

Figura 72

Imagen de la estructura de directorios de culturanocturna.com.

Capítulo 8: Implementación 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

Capítulo 8: Implementación 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 ( id int(10) unsigned - auto_increment, fecha date - default '0000-00-00', zona varchar(40) - default '', fiesta varchar(40) default NULL, artistas tinytext -, club varchar(40) - default '', horario varchar(20) - default '', precio varchar(7) - default '', recomendado enum('si','no') - default 'no', revisado enum('si','no') - default 'no', PRIMARY KEY (id));

TABLE artista ( id int(10) unsigned - auto_increment, artista varchar(40) - default '', nombre varchar(40) - default '', pseudonimo varchar(80) default NULL, nacionalidad varchar(20) default NULL, sello varchar(40) default NULL, url varchar(80) default NULL, biografia enum('si','no') - default 'no', entrevista enum('si','no') - default 'no', chart enum('si','no') - default 'no', PRIMARY KEY (id));

TABLE club ( id int(10) unsigned - auto_increment, 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 ( id int(10) unsigned - auto_increment, artista varchar(40) - default '', titulo varchar(40) - default '', sello varchar(40) - default '', fecha date - default '0000-00-00', autor varchar(20) - default '', critica mediumtext -, revisado enum('si','no') - default 'no', PRIMARY KEY (id));

TABLE especial ( TABLE noticia (

156 CASO DE ESTUDIO

id int(11) unsigned - auto_increment, titulo varchar(40) - default '', fecha date - default '0000-00-00', autor varchar(20) - default '', intro tinytext -, especial text -, revisado enum('si','no') - default 'no', PRIMARY KEY (id), FULLTEXT KEY titulo (titulo));

id int(11) unsigned - auto_increment, fecha date default NULL, autor varchar(20) default NULL, titulo varchar(150) default NULL, intro tinytext, noticia mediumtext, revisado enum('si','no') - default 'no', 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.

Capítulo 8: Implementación 157

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].

Figura 74

Página de inicio en una resolución de 1024x768, con un tamaño de letra mediano.

Figura 75

Página de inicio en una resolución de 1024x768, con el mayor tamaño de letra disponible en el navegador.

158 CASO DE ESTUDIO

Plataforma

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

PCInternet Explorer 5.0 43 x 160 597 x 320 757 x 440 981 x 608Netscape 4.5 46 x 125 594 x 355 754 x 475 978 x 643

MacOsInternet Explorer 5.0 53 x 152 587 x 328 747 x 448 971 x 616Netscape 4.7 44 x 130 596 x 350 756 x 470 980 x 638

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.

Figura 76

Página de inicio en una 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 fijo.

Esta tabla presenta las dimensiones recomendadas a las que el diseño debería ajustarse para plataformas y resoluciones de pantalla especificas.

Capítulo 8: Implementación 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, &nbsp; 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

LANZAMIENTO • Promoción del sitio web • Directorios y motores de búsqueda • Enlaces en páginas afines • Resolución rápida de problemas

POST-LANZAMIENTO • Análisis de los Hit Logs

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:

• 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 POST-PRODUCCIÓN.

164 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.

Capítulo 9: Lanzamiento 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.

Capítulo 9: Lanzamiento 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

• 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.

172 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.

Capítulo 10: Conclusiones 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 CONCLUSIONES y LÍNEAS FUTURAS

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 creativos-publicitarios-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.

Capítulo 10: Conclusiones 175

176 CONCLUSIONES y LÍNEAS FUTURAS

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 • Resolución de pantalla • Profundidad de color • JavaScript • Java • Servidores web

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

• Estilo de escritura • Formateo • Deletreo y marcas registradas • Escribir para los motores de búsqueda • Formateo de entrega 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 CICLOS DIAS / CICLO

DIAS

Análisis de requisitos 3 5 15Diseño conceptual 3 5 15Prototipado 6 5 30Producción: Gráficos 3 1 3 Escritura 2 1 2 HTML & PHP 5 5 25 Base de datos MySQL 3 2 6 Desarrollo de software (Javascript, FLASH...) 3 3 9Gestión del proyecto (10%) 10Tiempo imprevisto (10%) 10

EVALUACIÓN

Encuestas 1 5 5Heurística 8 1 8Test con el usuario 3 4 12QA 1 1 1

Total: 151 días

Planificación del proyecto 179

Diagrama de Gantt

MAYOABRIL1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30

Diseñoconceptual

Prototipado

Test con elusuario

Heurística

Gráficos

MAYO5 6 7 8 9 10 11 12 13 14 17 18 19 20 21 24 25 26 27 28 31

JUNIO

HTML & PHP

Heurística

Analisis derequisitos

Diseñoconceptual

Prototipado

Heurística

Gráficos

180 APÉNDICES

JUNIO1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30

Prototipado

HTML & PHP

Desarrollosoftware

MySQL

Heurística Test con elusuario

Gráficos

JULIO5 6 7 8 9 10 11 12 13 14 17 18 19 20 21 24 25 26 27 28 31

SEPTIEMBRE

Prototipado

Heurística

Test con elusuario

HTML & PHP

Desarrollosoftware

MySQL

Escritura

Heurística

Planificación del proyecto 181

SEPTIEMBRE1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30

Test con elusuario

Heurística

Prototipado

Test con elusuario

HTML & PHP

Desarrollosoftware

MySQL

Escritura

Heurística

QA

Figura 78

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 de semana y los festivos.

182 APÉNDICES

Diagrama de tareas en el ciclo de vida

ANÁLISIS DEREQUISITOS LANZAMIENTOPRODUCCIÓN MAQUETAS Y

PROTOTIPOSDISEÑO EVALUACIÓN

ANÁLISISETNOGRÁFICO

ANÁLISIS DEIMPLICADOS

OBJETIVOS DELA APLICACIÓN

ELEMENTOSDE

DISEÑO

GENERACIÓNDE IDEAS

ENCUESTAS

ACTORESY ROLES

OBJETIVOS DELA USABILIDAD

PLATAFORMA

ANÁLISIS DELA COMPETENCIA

ELEMENTOSDE

DISEÑO

ANÁLISISDE TAREAS

MAQUETASEN PAPEL

ESCENARIOS

HEURÍSTICA

GRÁFICOS

CÓDIGO

OBJETIVOS DELA USABILIDAD

OBJETIVOS DELA APLICACIÓN

ARQUITECT.DE LA

INFORMAC.

CARDSORTING

GRÁFICOS

CÓDIGO MAQUETASEN PAPEL HEURÍSTICA

MAQUETASDIGITALES

BASE DEDATOS

CÓDIGO

HEURÍSTICATEST CONUSUARIOS

ELEMENTOSDE

DISEÑO

HEURÍSTICATEST CONUSUARIOS

MAQUETASDIGITALES

SOFTWARE

PROTOTIPOS

HEURÍSTICATEST CONUSUARIOS

BASE DEDATOS

CÓDIGO

SOFTWARE

ELEMENTOSDE

DISEÑO

ARQUITECT.DE LA

INFORMAC.

EXTENSIONESFUTURAS

OBJETIVOS DELA USABILIDAD CÓDIGO

REGISTRODOMINIO

EVALUACIÓNAUTOMÁTICA

PROTOTIPOS

Planificación del proyecto 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 TB-303. 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 Techno-Pop 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 1 2 3 4 5 6 7 Díficil de usar

Atractiva 1 2 3 4 5 6 7 Nada atractiva

Útil 1 2 3 4 5 6 7 Pérdida de tiempo

Eficaz 1 2 3 4 5 6 7 Pesada

Bien organizada 1 2 3 4 5 6 7 Caótica

Entretenida 1 2 3 4 5 6 7 Aburrida

Información valiosa 1 2 3 4 5 6 7 Sin información

Rápida respuesta 1 2 3 4 5 6 7 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: SergiEDAD: 26SEXO: Hombre

LUGAR: BarcelonaESTUDIOS: Estudiante Universitario (Ingeniería)

ESTADO CIVIL: Soltero, vive con sus padresHOBBIES: Fotografía, escuchar y componer música

electrónica, navegar por Internet, hacer deporte (fútbol, gimnasio)

OCUPACIÓN: Departamento informático de una empresa comercial

HORARIO DE TRABAJO: 8 a.m. – 3 p.m.DISCAPACIDADES: Ninguna

ORDENADOR: LAN de 2 Pentium PC (en casa)Pentium 4 Portátil (en el trabajo)

MONITOR: 800 x 600 y 1024 x 768CONEXIÓN: Cable MENTA en casa

NAVEGADOR: Internet Explorer v.5.0. y Netscape Navigator 4.7

CONOCIMIENTOS DE INFORMÁTICA:

Nivel alto en general y hábil en la Web, experto en electrónica y hardware

ESTILO FAVORITO: Techno, Industrial, EBM, Electro

HORARIO TÍPICO:7 a.m. 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.

10:30 a.m. 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.

4 p.m. 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.

7 p.m. Durante sus horas libres Sergi navega,

194 APÉNDICES

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.

10:30 p.m. Después de cenar hace lo que el define como un ‘mini live’ con el ordenador.

EXCEPCIONESSergi acostumbra a salir casi todos los fines de semana.

Escenarios 195

PROYECTO: Portal Web de Música Electrónica

NOMBRE: PepEDAD: 27SEXO: Hombre

LUGAR: LleidaESTUDIOS: Técnico de Sonido

ESTADO CIVIL: SolteroHOBBIES: Produce y mezcla música electrónica (utiliza

el ordenador y otros equipos para estas tareas)

OCUPACIÓN: 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.

HORARIO DE TRABAJO: 11 a.m. – 3 p.m.DISCAPACIDADES: Ninguna

ORDENADOR: Mac portátil (en casa)Pentium PC (en el trabajo)

MONITOR: 1024 x 768 (casa) y 800 x 600 (trabajo)CONEXIÓN: RDSI (casa) y ADSL (trabajo)

NAVEGADOR: Internet Explorer v.5.0.CONOCIMIENTOS DE

INFORMÁTICA:Nivel básico en general, experto en hardware de sonido

ESTILO FAVORITO: Minimal Techno, Microhouse, Experimental

HORARIO TÍPICO:9:30 a.m. Pep se levanta y desayuna.

11 a.m. Abre su tienda de discos. Escucha los discos que vende y los clasifica por estilo musical.

4 p.m. 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.

9 p.m. Cierra la tienda a las 8:30 p.m. y va a clases de inglés con un profesor particular.

10:30 p.m. 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.

Madrugada Si es Viernes, Sábado o Domingo, Pep tiene

196 APÉNDICES

que abrir el Club Electrónico que dirige. Muchas veces es él mismo quien pincha.

EXCEPCIONESLos 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: LailaEDAD: 20SEXO: Mujer

LUGAR: MadridESTUDIOS: Estudiante Universitaria (Filosofía)

ESTADO CIVIL: Soltera, vive en un piso de estudiantesHOBBIES: Lectura, escuchar música, navegar por

Internet, bailar y comprar zapatosOCUPACIÓN: Trabajos temporales y camarera

HORARIO DE TRABAJO: De Jueves a Sábado de 11 p.m. – 5 a.m.DISCAPACIDADES: Ninguna

ORDENADOR: Pentium III PCMONITOR: 800 x 600

CONEXIÓN: MODEM 56 Kbps. Tarifa plana de 6 p.m. a 8 a.m. y Sábados y festivos todo el día

NAVEGADOR: Internet Explorer v.5.0.CONOCIMIENTOS DE

INFORMÁTICA:Nivel básico-medio en aplicaciones ofimáticas y, en general hábil en la Web

ESTILO FAVORITO: House, Techno-pop, Electroclash

HORARIO TÍPICO:8 a.m. 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.

10 a.m. 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.

3 p.m. Come. Habla con sus amigos por teléfono y comentan que tal ha ido el fin de semana o quedan para tomar algo.

6 p.m. 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.

10:30 p.m. Después de cenar se conecta al IRC. Le gusta conectarse a canales de la escena electrónica, para poder comunicarse con

198 APÉNDICES

gente con sus mismas aficciones.

EXCEPCIONESCuando 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 50557611 (44%)2. Windows 2000 32263269 (28%)

3. Windows ME 19215159 (16%)4. Windows NT 4121994 (3%)5. Windows 95 2978481 (2%)

6. Mac OS 2522310 (2%)7. Desconocido 1398885 (1%)8. Windows 3.x 338247 (0%)

9. Linux 296373 (0%)10. WebTV 182259 (0%)

11. Unix 65859 (0%)12. Windows XP 25362 (0%)

13. OS/2 6360 (0%)14. Amiga 1410 (0%)

Navegadores

1. MSIE 6.x 61315569 (53%)2. MSIE 5.x 44416527 (38%)

3. Netscape 4.x 1991436 (1%)4. Netscape 5.x 1950525 (1%)

5. MSIE 4.x 1769898 (1%)6. Netscape comp. 1221273 (1%)

7. Opera x.x 580020 (0%)8. Netscape 6.x 437619 (0%)9. Desconocido 193221 (0%)

10. MSIE 2.x 36645 (0%)11. Netscape 3.x 32046 (0%)

12. MSIE 3.x 27135 (0%)13. Netscape 2.x 1491 (0%)14. Netscape 1.x 126 (0%)

15. MSIE 1.x 48 (0%)

Conexión por día de la semana

Domingo 15863100 (13%)

200 APÉNDICES

Lunes 19584357 (17%)Martes 18610317 (16%)

Miércoles 17897205 (15%)Jueves 17460183 (15%)Viernes 10065651 (8%)Sábado 14492766 (12%)

Resolución de pantalla

800x600 49786698 (47%)1024x768 42951891 (40%)

1280x1024 5053401 (4%)1152x864 3395451 (3%)640x480 2633787 (2%)

Desconocido 1240242 (1%)1600x1200 801555 (0%)

Profundidad de color

(32bit) 46488183 (43%)65K (16bit) 46023375 (43%)16M (24bit) 10210506 (9%)

256 (8bit) 2921085 (2%)Desconocido 193617 (0%)

16 (4bit) 26259 (0%)

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 Julio 2003 Porcentaje Agosto 2003 Porcentaje CambioApache 26951879 63.72 27388860 63.98 0.26Microsoft-IIS 10976342 25.95 10165745 23.75 -2.20SunONE 674571 1.59 1534586 3.58 1.99Zeus 766943 1.81 746240 1.74 -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 ventanaAl 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.

EsloganHabrí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 etiquetasAgenda | Artistas | Clubs | Clubbers | DJ Charts | Entrevistas | Especiales | Noticias | Sonorama | Links

Desglose del espacio de la pantalla

Controles del sistemaoperativo y del navegador

19%

Identidad y bienvenidaal sitio11%

Navegación22%

Contenido de interés20%

Publicidad ypatrocinio

20%

Sin utilizar6%

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.

Análisis competitivo 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 ventanaEste 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.

EsloganEste sitio no tiene eslogan, pero debería incorporar uno breve que explicara que es Florid135.

Categorías y etiquetas

Análisis competitivo 205

HOME

SHOP

MÚSICA

DEEJAYS

CLUBS

CULTURA

AGENDA

DESCARGA

COMUNIDAD

Moda club � Dicos/libros � Tiendas DJs � Ofertas � Venta entradas

Noticias � Discos � Maxis � Clips � En la red � Editorial/opinión � Entrevistas/artículos � techno-diccionario

Noticas � Charts � Clips � Entrevistas � Diccionario DJs � Accesorios � Más allá de los platos � Biografías

Florida 135 � Site Studio � Groove Parade � Bath Room � Otros Clubs

Cine � Libros � Cómics � Televisión � DVD/Video � Videojuegos � Tendencias � Bazar � Kiosko � Internet

Agenda nacional � Festivales � Radios

Móviles � Salvapantallas � Fondos � Envía tu postal

Foro � enlaces � Galería de fotos � Tablón anuncios

Desglose del espacio de la pantalla

Controles del sistemaoperativo y del navegador

19%

Identidad y bienvenidaal sitio

4%

Navegación11%Contenido de interés

47%

Publicidad ypatrocinio

15%

Sin utilizar4%

206 APÉNDICES

Breve análisis de usabilidad:

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

Análisis competitivo 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.

Categorías y etiquetas

Menu: Noticias | Agenda | Clubs | Artículos | Reportajes | Foro | Links | ChatArtistas: Artistas | Charts | EntrevistasAudio: Offaudio | Offradio | Música

Breve análisis de usabilidad:

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

Análisis competitivo 209

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.

6. Los títulos y cabeceras son demasiado pequeños en comparación con el cuerpo del texto.

7. El acceso a las noticias es demasiado redundante, se podría aprovechar en otros contenidos.

8. 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.

9. 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.

210 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

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.

212 APÉNDICES

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?

Distribución y diseño

ٱ ¿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?

Contenidoٱ ¿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?

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

• 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

218 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 ٱ Estructural/Navegacional

ٱ Hardware

ٱ Error de código ٱ Usabilidad ٱ

Severidad del error:

ٱ Crítico ٱ Moderado ٱ Menor

Plataforma y navegadores donde ocurre el problema:

ٱ Mac OS ٱ Win 95 / 98 / 2000 / NT ٱ Unix/Linuxٱ Otro

______________ٱ Netscape v. _______ ٱ 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 errorDescripció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 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

224 APÉNDICES

REFERENCIAS

REFERENCIAS

[ADE97] 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.

[BAE02] 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.

[BIA95] BIAS R. Y MAYHEW D. J. Cost–Justifying Usability, 1994. AP Professional Cambridge, MA, 1994.

[BEL97] 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.

[BOE88] BOEHM B.. A Spiral Model of software development and Enhancement. Computer, May 1988.

[BUT96] BUTLER K.A. Usability Engineering turns 10. Interactions, June 1996.[BRI02] 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

[BRO89] 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.

[CAC00] 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

[CAL84] GIL CALVO E. Los depredadores audiovisuales, juventud urbana y cultura de masas. Tecnos, Madrid, 1984.

[CER00] 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.

[CON95] CONSTANTINE L.L. Use Cases for user Interfaces. ACM Interactions, 1995.[TRO97] 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.

[GAR01] GARCÍA J. «El Techno Sacseja les Nits d’Agost» en El Periódico, edición del 19 de Agosto de 2001

[GAR97] GARTON L. ET AL. Studying online socialnetworks.. Journal of Computer Communication, 1997. Re-reviewed 2002.

[GIL00] GILL M. E-zines, diseño de revistas digitales. Ediciones G.Gili, México, SA de CV, pág. 177, 2000.

[HEN00] 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.

[HYS98] HYSELL D. Proc. Of the 16th international conference on Computer documentation: ACM, 1998.

[IRE99] IREFREA. Salir de marcha y consumo de drogas. Edita Ministerio del Interior, Madrid, 1999.

[JOW99] JOWERS PETER. Timeshards: Repetition, Timbre and Identity in Dance Music. Time & Society, volumen 8 (2), pág. 381, 1999.

[KOT02] 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.

[KOT02a] 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-205-3252-5

[LOR02] LORÉS J. Introducción a la Interacción Persona-Ordenador. AIPO, Lleida, 2002.

[MAN02] MANCHÓN E. «¿Qué es la usabilidad? (Definición)» recogido de la World Wide Web: http://ainda.info/que_es_usabilidad.html, 2002.

[MAN02a] MANCHÓN E. «La evolución del perfil del usuario medio» recogido de la World Wide Web: http://ainda.info/evolucion_perfil.html, 2002.

[MAN02b] MANCHÓN E. «Principios generales de usabilidad en sitios web » recogido de la World Wide Web: http://ainda.info/principios_generales.html, 2002.

[MAN02c] MANCHÓN E. «Tipos de evaluación de la usabilidad» recogido de la World Wide Web: http://ainda.info/tipos_evaluación.html, 2002.

[MAN02d] MANCHÓN E. «Errores frecuentes en los test de usuarios» recogido de la World Wide Web: http://ainda.info/errores_evaluación.html, 2002.

[MAY99] MAYHEW DEBORAH J. The Usability Engineering Lifecycle: A Practitioner’s Handbook for User Interface Design. Morgan Kaufmann, USA, 1999. ISBN: 1-55860-561-4

[MCD99] MCDANIEL SCOTT. Reimpreso de Usability Interface. Volumen 6, Nº 1, Julio 1999.

[MOL90] 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

[NIE93] NIELSEN J. Usability engineering. AP Professional, Boston, MA, 1993.[NIE94] NIELSEN J. Y MARK R. L. Usability inspection methods. Wiley, Nueva York,

NY, 1994.[NIE99] NIELSEN JAKOB. Designing Web Usability: The Practice of Simplicity. New

Riders Publishing, USA, 1999.[NIE02] 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

[NOR86] NORMAN D. Y DRAPER S. User Centered System Design. Lawrence Erlbaum Associates, Publishers, Hillsdale, NJ, 1986.

[NOT02] «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/noticias0706-7.htm, 2002.

[RCA02] ROSSON M.B. Y CARROLL J.M. Usability Engineering. Morgan Kaufmann, USA, 2002.

[RED02] 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.

[RED02a] REDACCIÓN BAQUIA.COM. «Google: dejad de espantar usuarios con pop-ups» recogido de la World Wide Web: http://www.baquia.es/com/20021025/not00011.html, 2002.

[ROB01] ROBERTSON J. Information design using card sorting. Inf. & Design, 2001.[ROS98] 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

[SAD00] 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.

[SAN02] 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.

[SOM01] SOMMERVILE IAN. Software engineering, 6th edition. Addison Wesley.

228 APÉNDICES

Reading, MA, 2001.[STE02] STERNE J. Web Metrcis: Proven Methods for Measuring Web Sites

Success. John Wiley & Sons, 2002. [TRU98] TRUCHARD A., EDITOR Y KATZ-HAAS R., AUTOR. Reimpreso de Usability

Interface. Volumen 5, Nº 1, Julio 1998.[UGA02] 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 guide» en Usability Inspection Methods (Nielsen J. y Mack R. L. eds.). John Wiley & Sons, New York, NY, Pág. 105-140, 1994.

[WHI98] 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 153-170 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.infoUsabilidad, diseño web fácil de usar.

http://www.baquia.com/com//20020326/art00012.htmlAnalítico (2002). ¿Qué importa más, el precio de la acción o la calidad del contenido?

http://www.jjg.net/ia/visvocab/spanish.htmlVocabulario visual para describir arquitectura de información y diseño de interacción de J.J. Garret.

http://www.baquia.com/com/20020704/art00007.htmlLos portales generalistas: El fin de una era por Antonio Delgado Barrera.

http://www.baquia.com/com//20020828/art00012.htmlPop-down por Iñaki I. Rojo

http://www.baquia.es/com/20021104/not00003.htmlRedacció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.htmlAnálisis del valor de Linux por su uso de la arquitectura Intel.

http://zdnet.com.com/2100-1104-975848.htmlResumen del estudio de IDC sobre costo total de Linux vs Windows patrocinado por MS

http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2901156,00.htmlComentario al estudio de IDC sobre el Costo Linux vs. Windows.

http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2907876,00.htmlAnálisis del costo total de propiedad de Linux sobre Windows.

http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2878232-3,00.htmlAná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.xmlNota sobre el desarrollo de IBM para portar servicios y aplicaciones para reducir costos empresariales.

http://www.eweek.com/article2/0,3959,293,00.aspResultados 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.aspListas de precios de Microsoft Windows 2000 Server.

230 APÉNDICES

http://www.microsoft.com/windowsxp/pro/howtobuy/pricingretail.aspPrecios de Microsoft Windows XP Profesional.

http://www.linux.orghttp://www.apache.orghttp://www.mysql.comhttp://www.php.net

URLs oficiales LAMP.

http://www.zend.com/zend/tut/tut-hatwar.phphttp://www.zend.com/zend/tut/tut-hatwar2.php

Develop rock-solid code in PHP.

http://www.zend.com/zend/spotlight/code-gallery-wade7.phpWorking with Multi-page Forms.

http://www.netcraft.com/Survey/index-200206.htmlEn Junio de 2002, Apache tenía un 60% de la cuota de mercado.

http://ciac.llnl.gov/ciac/ToolsUnixGeneral.html#WuftpdServidor FTP más utilizado en Internet.

http://lwn.net/Articles/1433/PHP (open source) es el lenguaje más utilizado en Internet para server-side-scripting.

http://www.forbes.com/2002/07/15/0715linux.htmlEn 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.pdfLas 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/2600Yahoo utiliza, entre otro software open source, MySQL.

http://www.google.com/press/highlights.htmlGoogle, 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