TFC Web CulturaNocturna

Universitat de Lleida - Escola Universitaria Politcnica Enginyeria Tcnica en Informtica de Sistemes
Trabajo Final de Carrera
Ingeniera de la Usabilidad
aplicada al desarrollo de un portal web administrado dinmicamente
Jos M. Belmonte Marn
Director: Dr. Jess Lors i Vidal
Septiembre 2003
Para Sergi, te considero mi hermano. Para Noem, ven, sube a mi nube y qudate para siempre.
CONTENIDOS
Captulo 0. Captulo 0.
CONTENIDOS............................................................... 5
RESUMEN.................................................................................................... x
INTRODUCCIN........................................................... 1
MSICA ELECTRNICA Y CULTURA DE CLUB....................................... 2 CULTURANOCTURNA.COM....................................................................... 3 OBJETIVOS DEL PROYECTO.................................................................... 4 ESTRUCTURA DEL DOCUMENTO............................................................ 8
ESTADO DEL ARTE................................................ 11

Captulo 0.
WORLD WIDE WEB.................................................... 12

CIBERNTICA, COMUNICACIN ENTRE MQUINAS........................... 13 TCP/IP........................................................................................................ 13 LA WORLD WIDE WEB............................................................................. 14 EL PROTOCOLO HTTP............................................................................. 16 HTML.......................................................................................................... 18 TENDENCIA ACTUAL................................................................................ 20 XHTML....................................................................................................... 20 HTML DINMICO....................................................................................... 21 HOJAS DE ESTILO.................................................................................... 21 JAVASCRIPT............................................................................................. 23 MACROMEDIA FLASH.............................................................................. 25
Captulo 0.
SOFTWARE OPEN SOURCE..................................... 28

SOFTWARE LIBRE.................................................................................... 29 APACHE..................................................................................................... 31 PHP............................................................................................................ 33 PEAR.......................................................................................................... 40 MySQL........................................................................................................ 40
MODELO DE PROCESO......................................... 43
Captulo 0.
MPIU PARA LA WEB.................................................. 44

INGENIERA DEL SOFTWARE................................................................. 45 DISEO CENTRADO EN EL USUARIO.................................................... 46 INGENIERIA DE LA USABILIDAD............................................................. 48 USABILIDAD EN LA WEB.......................................................................... 50 BUSCANDO UN MODELO DE PROCESO............................................... 52 MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD......... 53 APLICACIN DEL MODELO DE PROCESO A LA WEB.......................... 54 ESQUEMA DEL MODELO......................................................................... 55
CASO DE ESTUDIO................................................. 63
Captulo 0. vi
APLICACIN DEL MODELO...................................... 64

PLANIFICACIN........................................................................................ 65
CONTENIDOS
EVALUACIN............................................................................................ 65 GLOSARIO................................................................................................. 68
Captulo 0.
ANLISIS DE REQUISITOS....................................... 70
ANLISIS ETNOGRFICO........................................................................ 71 ANLISIS DE LOS IMPLICADOS.............................................................. 75 ACTORES, ROLES Y ORGANIZACIN.................................................... 78 PLATAFORMA........................................................................................... 79 OBJETIVOS DE LA USABILIDAD..............................................................80 OBJETIVOS DE LA APLICACIN............................................................. 82 ENCUESTAS, ESCENARIOS Y ANLISIS COMPETITIVO......................83
Captulo 0.
DISEO CONCEPTUAL............................................. 86
ANLISIS DE TAREAS.............................................................................. 87 ARQUITECTURA DE LA INFORMACIN................................................. 94 ELEMENTOS FUNDAMENTALES DE DISEO DE LA PGINA............118
Captulo 0.
PROTOTIPADO......................................................... 126
DISTRIBUCIN DE LA PGINA.............................................................. 127 MAQUETAS............................................................................................. 128 TEST.DE LAS MAQUETAS CON USUARIOS.........................................133 PROTOTIPOS.......................................................................................... 138 TEST DE LOS PROTOTIPOS CON USUARIOS..................................... 145
Captulo 0.
IMPLEMENTACIN.................................................. 148
USABILIDAD EN EL DESARROLLO DEL SOFTWARE.......................... 149 DISEO BSICO DE LA PGINA........................................................... 157 ESCRIBIR PARA LA WEB....................................................................... 159
Captulo 0.
LANZAMIENTO......................................................... 162
PRE-LANZAMIENTO............................................................................... 163 LANZAMIENTO........................................................................................ 164 POST-LANZAMIENTO............................................................................. 166
CONCLUSIONES Y LNEAS FUTURAS............... 169

Captulo 0.
CONCLUSIONES ..................................................... 170

ESTADO ACTUAL.................................................................................... 173 LINEAS FUTURAS................................................................................... 173
Captulo 0.
APNDICES.............................................................. 178
PLANIFICACIN DEL PROYECTO......................................................... 179 GLOSARIO DE TRMINOS RELACIONADOS CON LA MSICA ELECTRNICA........................................................................................ 184 CUESTIONARIO...................................................................................... 191 ESCENARIOS.......................................................................................... 194 ESTADSTICAS........................................................................................ 200 ANLISIS COMPETITIVO........................................................................ 202 REVISIN DE LA ARQUITECTURA........................................................211 Proceso.................................................................................................... 211 General..................................................................................................... 211 Tratamiento.............................................................................................. 211 Organizacin............................................................................................ 211 Clasificacin............................................................................................. 211 Enlaces..................................................................................................... 212 Bsqueda................................................................................................. 212 REVISIN DE LOS PROTOTIPOS..........................................................213 Distribucin............................................................................................... 213 Navegacin............................................................................................... 213 REVISIN DETALLADA DE PROPSITO GENERAL............................ 214 Grficos.................................................................................................... 214 Color......................................................................................................... 215 Tipografa................................................................................................. 215
CONTENIDOS
vii
FORMULARIO DE PREPARACIN DE UN TEST CON USUARIOS..... 216 GUA DE ESTILO PARA LA REDACCIN DE CONTENIDO..................217 FORMULARIO DE INFORME Y RESOLUCIN DE PROBLEMAS........ 220 REVISIN DE LA POST-PRODUCCIN................................................ 222 Contenido................................................................................................. 222 Distribucin y grficos.............................................................................. 222 Compatibilidad con navegadores............................................................. 222 Compatibilidad con las preferencias de usuario....................................... 222 HTML y cdigo......................................................................................... 222 Documentacin......................................................................................... 222 LISTA DE CONTROL PARA UN MANTENIMIENTO MNIMO................ 224
Captulo 0.
REFERENCIAS......................................................... 226
REFERENCIAS........................................................................................ 227 BIBLIOGRAFA......................................................................................... 229 ENLACES................................................................................................. 230
viii
CONTENIDOS
RESUMEN La Web ha ido convirtindose paulatinamente en una de las interfaces ms utilizadas para distribuir contenidos de forma masiva y, actualmente, tiende a ser una de las plataformas estndar. Los diseadores y tcnicos informticos estn escribiendo un nuevo captulo en el diseo de publicaciones on-line, autoedicin y tipografa digital. Como fruto del aprovechamiento de este nuevo flujo de comunicacin surge el proyecto de apoyar un contenido especializado en ocio musical con el diseo y la tecnologa adecuadas para este medio. Este documento recoge el trabajo realizado para la creacin de un sitio web de tipo portal desde el cual, por una parte, ofrecer informacin y servicios relacionados con los intereses especficos de la escena musical electrnica, y, por la otra, permitir que los miembros de edicin de contenido puedan actualizar dinmicamente la pgina web y desempear su trabajo desde cualquier parte, slo con tener una maquina conectada a Internet. Para tal fin, en todo el proceso de produccin se han aplicado las metodologas de ingeniera y tcnicas de calidad necesarias conformes al seguimiento del Modelo de Proceso de la Ingeniera de la Usabilidad. Un modelo centrado en el usuario que nos permite obtener una aplicacin final de mayor calidad. En ltima instancia, para la implementacin del sistema nos hemos basado, en la mayor medida de lo posible, en tecnologas Open Source (Apache, PHP y MySQL) y hemos perseguido la conformidad con los estndares del W3C (XHTML y CSS).
Palabras clave
Web, sitio web, portal, usabilidad, ingeniera de la usabilidad, modelo de proceso, evaluacin, prototipado, diseo centrado en el usuario, diseo, msica electrnica, informacin dinmica, publicacin on-line, Open Source.
CONTENIDOS
INTRODUCCIN
MSICA ELECTRNICA Y CULTURA DE CLUB CULTURANOCTURNA.COM OBJETIVOS DEL PROYECTO ESTRUCTURA DEL DOCUMENTO
Usabilidad Implementacin
Con la llegada de Internet como canal de distribucin masiva de contenidos (escritos), el editor de cualquier medio impreso puede competir directamente con sus anlogos ms importantes; el coste de edicin y distribucin deja de ser un factor significativo. Para sacar el mximo partido a esta forma de publicar sin tener que pasar por los grandes grupos mediticos, debemos primar el valor (rigor, imparcialidad, calidad de los artculos) de la informacin. Esto se consigue, en parte, si los encargados de elaborar el contenido demuestran ser expertos en la materia [KOT02]. Cmo podemos cumplir este requisito? La respuesta se encuentra en el , Anlisis de requisitos. Son los propios usuarios a los que va dirigida la informacin quienes darn vida y dinamismo al contenido. Una audiencia que participa activamente del ocio y que comparte rasgos comunes de entusiasmo y admiracin por el medio. Una industria dedicada a promocionarse y expandirse, y un equipo humano que no slo disfruta de la posibilidad de ser diseadores/programadores/periodistas sino que estn felizmente sorprendidos de ser impactantes comunicadores que trabajan en un medio dinmico y en continuo cambio. Pero, como bien seala John Blossom la informacin no es contenido hasta que se haya creado un entorno til para su consumo, para una audiencia concreta situada en un contexto especfico y que suponga un valor aadido [KOT02]. Es decir, solamente podremos centrar todos los esfuerzos en proveer informacin de alto valor aadido para la audiencia cuando dispongamos de la tecnologa que permita olvidarse de ella a los editores de contenido. Ese entorno, como veremos ms adelante, es la Web. MSICA ELECTRNICA 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 ms se ha apropiado del espacio del ocio son los jvenes, lo que ha dado lugar a la expansin de una industria y un mercado especficos. Concretamente las actividades relacionadas con el salir de marcha por las noches, buscar la diversin yendo de bares, discotecas, a bailar o a escuchar msica, son actividades que han experimentado una expansin enorme en estas ltimas dos dcadas. Se trata de actividades que, debido a la organizacin del tiempo, se realizan de noche y en espacios donde el ambiente, la esttica, el tipo de gente y, sobretodo la msica, son los elementos que ms identidad le otorgan. La msica y el baile son el principal ingrediente de la diversin nocturna. La dcada de los noventa se caracteriza por el auge de la msica electrnica de tal forma que convierten el movimiento musical juvenil, e incluso adulto, en un fenmeno social especfico. Hace poco ms de 15 aos se asista al nacimiento de una nueva escena, an un poco underground y minoritaria, pero con un extraordinario potencial latente, en la cual se proyectaba el espritu de
INTRODUCCIN
mticos clubs como The Warehouse (Chicago) o The Music Institute (Detroit, vase la Figura 1) y, a la vez, exaltaba el triunfo de la electrnica como msica de consumo masivo: era la definicin de la cultura de clubs (club culture), en el ncleo de la cual, sin duda, la aplicacin de las nuevas tecnologas en la creacin/produccin, reproduccin y difusin musicales, as como el auge y la consolidacin de la msica electrnica (la cual desplaza da a da el pop/rock como oferta de ocio nocturna [GAR01]) ejercen una determinante influencia en el rumbo de la cultura/msica popular contempornea.
Figura 1 La ciudad de Detroit. Considerada la ciudad en la que naci el techno, uno de los gneros musicales con ms aceptacin dentro de la msica electrnica.
En este sentido, es preciso tomar conciencia de las estrechas relaciones entre la dimensin artstica y las nuevas tecnologas, puesto que las relaciones que se han establecido entre msica y tecnologa siempre tienen que definirse en trminos de ntima relacin [ADE97]. La msica sigue siendo una de las palabras clave con las que se empieza una sesin de navegacin y la Web es el medio natural de comunicacin para la msica electrnica. Partiendo de la idea de ser un recurso propio para amantes de la msica electrnica, especializado (tal como afirma Kevin Goldsmith, a medida que avance la tecnologa las revistas on-line sern cada vez ms 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 rpida evolucin de Internet est dejando obsoleto el diseo tradicional de sitios estticos cuyo objetivo es tener una presencia bsica en Internet. A da de hoy para que un sitio sea exitoso, dinmico y abierto a los usuarios debe convertirse en un autntico portal con informacin relevante y dinmica. culturanocturna.com necesita un sistema de gestin de contenidos implementado en la figura de un portal vertical o temtico, es decir, un portal
INTRODUCCIN
especializado en un tema determinado, con contenidos especficos relacionados exclusivamente con la msica electrnica, para convertirse en un referente en su sector dentro de la web. En el otro lado estaran los portales generalistas, que no podrn competir en un futuro con un sitio especializado. El problema de estos portales es que piensan que los internautas entrarn en ellos para todo, que el resto de Internet no estar a la altura de sus contenidos. Adems, son igualmente conocidos sus numerosos problemas de gestin: necesidad de una gran inversin inicial, necesidad de un gran equipo humano para creacin 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 comunicacin o portal vertical, tendern a la especializacin, porque si no, se asociarn con contenidos superficiales. El sitio web de culturanocturna.com ser un portal vertical que girar en torno a la escena musical electrnica. En el sitio, los usuarios podrn consultar informacin sobre la programacin de eventos y sobre artistas, leer actualizaciones de noticias y entrevistas. Adems incluir crticas y reseas musicales, reportajes fotogrficos y listas de enlaces de inters. Todo un contenido fresco y reportajes generalmente ms 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 gestin y administracin on-line de toda la web. OBJETIVOS DEL PROYECTO Mediante la expansin y el crecimiento de la Red se est creando un nuevo papel para los diseadores y programadores on-line, que se enfrentan a los retos de la tecnologa rpidamente cambiante, frustrados a la vez por la velocidad del cambio y por la sensacin 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 difcil mantenimiento. Para paliar estos problemas, en los ltimos aos se ha asistido a un incremento de propuestas de mtodos para estructurar el proceso de diseo y desarrollo de aplicaciones web (vase [HEN00], [CER00], [CAC00], [TRO97], [MAY99], [NIE99]). Una correcta y detallada planificacin previa del diseo del sitio se hace indispensable. El proyecto se va a realizar siguiendo un modelo de ciclo de vida basado en la Ingeniera de la Usabilidad, en el cual en todas las etapas interviene la evaluacin, ya sea inicialmente evaluando al usuario y su lugar de trabajo, o posteriormente realizando algn tipo de prototipado en el que se cuestione la usabilidad [LOR02]. Adems, para la implementacin del proyecto se estudiarn y aplicarn un conjunto de herramientas y lenguajes de desarrollo de sitios web. En
INTRODUCCIN
particular, aquellas que permitan disear y producir sitios web dinmicos, dando preferencia en su eleccin a aquellas basadas en software Open Source.
Usabilidad
Usabilidad se define coloquialmente como facilidad de uso, ya sea de una pgina web, una aplicacin informtica o cualquier otro sistema que interacte con un usuario. Un mtodo basado en la usabilidad utiliza tcnicas para disear desde una perspectiva centrada en el usuario, que deben ser considerados prematura y frecuentemente durante todo el proceso. La idea de "diseo centrado en el usuario" propone que los diseadores 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. Adems, se contemplarn los aspectos de mantenimiento del producto o sistema, asistencia al usuario y documentacin. En la actualidad, debido a la expansin de los ordenadores, el usuario mayoritario es un tipo de persona para la que los computadores no son ms que una herramienta a su disposicin en la vida cotidiana. Ya no se trata de que una persona utilice y aprenda a utilizar la Web por obligacin, sino de que perciba rpidamente 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 diseo basados en la usabilidad, Eduardo Manchn seala los siguientes [MAN02]:

Reduccin de los costes de aprendizaje. Disminucin de los costes de asistencia y ayuda al usuario. Optimizacin de los costes de diseo, rediseo y mantenimiento de los sitios. Aumento de la tasa de conversin 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 estrs, incrementa la satisfaccin y la productividad.
Todos estos beneficios implican una reduccin y optimizacin general de los costes de produccin, as como un aumento en la productividad de los sitios web de comercio electrnico. La usabilidad permite mayor rapidez en la realizacin de tareas y reduce las prdidas de tiempo (vase la Figura 2).
Implementacin
A pesar de los intentos que desde los ltimos treinta aos vienen realizando distintas empresas por obtener control de la informacin, 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 educacin, se detienen en los aspectos tcnicos: en la actualidad existe software libre que se usa exitosamente en universidades, estados y empresas an en sus sistemas ms crticos.
INTRODUCCIN
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 vnculos? Dnde estamos? Porqu la pantalla est prcticamente vaca? Tengo un navegador compatible?
La Free Software Foundation define el software libre de la siguiente manera: Software libre se refiere a la libertad de los usuarios para ejecutar, copiar, distribuir, estudiar, cambiar y mejorar el software. Ms precisamente, se refiere a cuatro libertades para los usuarios del software:

La libertad de ejecutar el programa, con cualquier propsito. La libertad de estudiar cmo funciona el programa, y adaptarlo a sus necesidades. El acceso al cdigo fuente es una precondicin para esto. La libertad de distribuir copias, con lo que puede ayudar a su vecino. La libertad de mejorar el programa y hacer pblicas las mejoras a los dems, de modo que toda la comunidad se beneficie. El acceso al cdigo fuente vuelve a ser una precondicin para esto.
Un programa es software libre si los usuarios tienen todas estas libertades. La gran mayora del software libre tiene como postulado la determinacin de que el usuario no es un iletrado computacional. Parte del hecho de que confa 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 educacin favorece la dependencia tecnolgica, no slo de los futuros profesionales sino tambin 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
INTRODUCCIN
Desde abril de 1996, el servidor web ms utilizado en Internet es Open Source: Apache. En Junio de 2002, Apache tena un 60% de la cuota de mercado, y en agosto un 64%. Wu-ftpd (Open Source) es el servidor FTP ms utilizado en Internet. PHP (Open Source) es el lenguaje ms utilizado en Internet para serverside-scripting (programacin de pginas web dinmicas), por delante del lenguaje ASP de Microsoft, segn un estudio de abril de 2002. Un informe de IDC indica que en el ao 2000 Linux era el 2 sistema operativo ms 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) slo recibi 12.000 ataques, segn 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 informticas 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, segn indica un estudio publicado en 2002 por Cybersource en el que se modela una organizacin con 250 puestos de trabajo, servidores, aplicaciones estndar, conexin 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 ms utilizado en Internet, est soportado por un cluster de ms de 10.000 mquinas Linux, uno de los mayores del mundo. Administraciones pblicas En Per, est en debate una ley que requerir que los organismos de la administracin pblica utilicen exclusivamente software Open Source. Para el caso que nos ocupa, la combinacin Open source de PHP, Apache y MySQL se ha considerado como la mejor combinacin para el desarrollo de pginas Web. En concreto, PHP est diseado para la web, es multiplataforma y multisistema operativo. Soporta varios servidores web y prcticamente cualquier base de datos. Por su parte, MySQL fue diseada con el objetivo principal de la velocidad y consume muy pocos recursos. Este tndem cuenta con usuarios tan notables como la NASA, Yahoo! (vase Figura), Ericsson o el Censo Norteamericano. Y sus beneficios son realmente determinantes:
INTRODUCCIN
Coste de software 0 Euros. Actualizaciones inmediatas y gratuitas. Potencia, velocidad y seguridad demostradas. Estndar en continuo y rpido crecimiento.
Figura 3 Pgina de inicio de Yahoo!

Yahoo!, una de las empresas ms representativas de Internet, decidi abandonar su propio lenguaje propietario (yScript, empleado desde hace ms de seis aos) para pasar a emplear PHP.
ESTRUCTURA DEL DOCUMENTO El presente documento se encuentra dividido en cinco secciones. Incluimos en ellas una completa descripcin de las tecnologas empleadas, as como de los mtodos y procesos de diseo estudiados y seguidos para llevar a cabo el desarrollo del proyecto. El resultado de la aplicacin de estos recursos se muestra en los captulos posteriores, donde hacemos un seguimiento de la evolucin del sitio web a lo largo de todo su desarrollo, haciendo hincapi en las etapas que particularizan este proyecto. A continuacin comentamos brevemente la estructura del documento:

Introduccin. En la actual seccin describimos la finalidad y la motivacin del proyecto, as como los objetivos que se pretenden alcanzar. Estado del arte. A continuacin situaremos al lector en el entorno en el que se desarrolla el proyecto. Adems, definiremos y expondremos como se han alcanzado las tecnologas apropiadas para su aplicacin en el proyecto. Modelo de proceso. En esta seccin se dar una visin global de las bases tericas y las aproximaciones que intentan resolver el modelado conceptual de aplicaciones web. Concretamente, estudiaremos el Modelo de Proceso de la Ingeniera de la Usabilidad. Caso de estudio. Aplicaremos, en este apartado, el modelo estudiado anteriormente a la implementacin del portal culturanocturna.com. Se detallarn todas las fases seguidas, aplicadas e implementadas en la realizacin 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.
INTRODUCCIN
INTRODUCCIN
10
INTRODUCCIN
1
ESTADO DEL ARTE
WORLD WIDE WEB
CIBERNTICA, COMUNICACIN ENTRE MQUINAS TCP/IP LA WORLD WIDE WEB

El modelo cliente-servidor Cliente local Cmo se organiza la Informacin? Conclusiones Funcionamiento Los servidores de WWW Correccin sintctica de los documentos Evolucin del HTML
EL PROTOCOLO HTTP HTML TENDENCIA ACTUAL XHTML HTML DINMICO HOJAS DE ESTILO JAVASCRIPT MACROMEDIA FLASH
JavaScript en los documentos HTML
CIBERNTICA, COMUNICACIN ENTRE MQUINAS En una de las obras de mayor repercusin 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 comunicacin de una manera muy sencilla: comunicacin son todos aquellos procedimientos por medio de los cuales una mente afecta a otra. Esto incluye voz, texto impreso o escrito, msica, artes, teatro y danza. En la misma obra se ampla la idea anterior para incluir la posibilidad de comunicacin entre mquinas: comunicacin son todos aquellos procedimientos por medio de los cuales un mecanismo afecta la operacin de otro, y se menciona explcitamente, como ejemplo, el control de aviones. En sentido estricto, comunicacin es transmisin de informacin. Hoy es indudable que estamos viviendo lo que se llama la era de la informacin y adems estamos inmersos en un mundo cada vez ms dependiente de dispositivos electrnicos digitales que procesan informacin. Uno de estos sistemas de comunicacin, cuyo gran impacto slo es comparado con el de la televisin o la radio, son las redes digitales de informacin, basadas en la comunicacin entre ordenadores. Sin duda alguna, la red de redes de ordenadores por excelencia es Internet, mucho ms que una tecnologa. Un medio de comunicacin, de interaccin y de organizacin social, pero una red de ordenadores al fin y al cabo. Y como tal, necesita un lenguaje comn para la intercomunicacin total, una especie de esperanto informtico que permita la comunicacin entre mquinas de distinto tipo, el protocolo TCP/IP. TCP/IP Hasta el ao 1983 la red ARPANET se basaba en NCP (Network Control Protocol) que conviva con el novato IP. No haba un protocolo nico para comunicar las 213 mquinas que formaban parte de la red. Pero un par de aos antes se haba desarrollado el RFC 801 conocido como NCP/TCP TRANSITION PLAN y el da elegido para la migracin 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 informacin. Todos los ordenadores en Internet utilizan el protocolo TCP/IP, y gracias a eso se consigue eliminar la barrera de la heterogeneidad de las mquinas 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 mquinas remotamente (TELNET), todos basados en la misma filosofa. Apenas 10 aos despus del cambio a IP, el mundo presenci el nacimiento del World Wide Web y la Internet como hoy en da la conocemos comenz a tomar forma.
Captulo 1: World Wide Web
13
LA WORLD WIDE WEB La World Wide Web, abreviado frecuentemente como WWW, W3 o Web, es el servicio que ms ha popularizado el uso de Internet, tanto que frecuentemente se utiliza el trmino Web para referirse a la Red. Es un sistema integrador de informacin para su distribucin en Internet basado en pginas 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 Europen de la Recherche Nuclaire) en 1991, para proporcionar un medio de compartir documentos entre los fsicos europeos que colaboraban con el laboratorio. Era necesario un sistema que permitiera, por una parte, el acceso remoto a la informacin independientemente el sistema empleado y, por otra, conectar la informacin de distintas fuentes. Surge entonces la idea de incorporar en el sistema la nocin de hipertexto, trmino acuado por Ted Nelson en los aos sesenta para referirse a un cuerpo de material escrito o grfico interconectado de modo complejo que no se puede representar convenientemente sobre papel; puede contener anotaciones, adiciones y notas de los estudiosos que lo examinan. Para conseguir todo lo anterior el WWW se dise usando el modelo clienteservidor y estableciendo como formato de la informacin un lenguaje de marcas especfico, 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 consegua 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 informacin es independiente del sistema en el que reside y, disponiendo de un visor, est accesible desde cualquier entorno. Ms adelante, el sistema de pginas hipertexto se convertira en un verdadero sistema hipermedia, basado en la suma de las potencialidades hipertextuales y multimediticas, en el cual las pginas permiten acceder a imgenes, sonidos, vdeos, etc. Lo que ha permitido interconectar e integrar conjuntos de informacin prcticamente ilimitados, incrementado as el atractivo de la Web.
El modelo cliente-servidor
Internet se basa en el modelo cliente-servidor (vase Figura 4). Mientras los estratos inferiores son comunes entre dos mquinas que se comunican, en los superiores una suele tener un programa servidor y la otra una aplicacin cliente. Pero el enfoque es radicalmente diferente a las primeras redes de computadoras, basadas en un sistema centralizado. En Internet, el proceso de informacin reside tanto en el servidor como en el cliente, por lo que se puede decir que la inteligencia de la red est distribuida.
14
ESTADO DEL ARTE
Figura 4 Modelo cliente-servidor.
Es una filosofa que se basa en la peticin de un servicio por parte de un cliente, realizacin del mismo por parte del servidor y eventual respuesta de los resultados.
Cliente local
Una de las formas ms verstiles y potentes de acceder a la WWW es a travs de un cliente local denominado navegador o browser. Actualmente, la mayora de los usuarios de Internet utilizan navegadores de entorno grfico en sus comunicaciones con los servidores de datos. Los dos ms usados y extendidos son el Microsoft Internet Explorer y el Netscape Navigator. Sin embargo, la primaca de un nico navegador en la informtica domstica, como ocurre con Microsoft Internet Explorer, hace que para muchos usuarios este sea el nico navegador conocido y no simplemente una opcin ms entre una variada gama. Al estar los ordenadores domsticos copados por Explorer, se tiende a actuar como si el navegador de Microsoft fuera el nico, cuando no es precisamente el ms escrupuloso con los estndares. Por esa razn, 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.
Cmo se organiza la Informacin?
En general, los documentos, escritos en el lenguaje HTML, se colocan en una mquina 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 raz del rbol). Estas pginas pueden hacer referencia a otras, que se pueden encontrar en el mismo directorio, en otro dentro de la misma mquina o en cualquier otro servidor de la red.
15
En realidad, los enlaces mencionados en el punto anterior son URI (Uniform Resource Identifiers), que pueden referenciar cualquier tipo de recurso de la Red. Existen varios tipos de URI, aunque en la actualidad los nicos realmente generalizados son los URL (Uniform Resource Locators), que hacen referencia de forma compacta a un recurso, indicando de qu tipo es y dnde se encuentra. En un futuro se usarn los URN (Uniform Resource Names), que identificarn el tipo de recurso y cmo se llama, independientemente de su posicin en la Red, de modo que cuando queramos acceder a un recurso ser el servidor ms cercano (que lo tenga) el que nos lo enve. Hasta ese da nos conformaremos con direcciones de recursos usando URL de la forma http://servidor.de.www/directorio/destino/pgina.html. En primer lugar se indica que tenemos que acceder a un servidor de HTTP, luego se da la direccin de la mquina que nos va a proporcionar el documento, su situacin 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 direccin 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 podramos destacar: la sencillez y pocos requisitos para cliente y servidor, la simplificacin de la navegacin y los escasos conocimientos necesarios por parte del usuario, las vistosas presentaciones que permite con poco esfuerzo, su mantenimiento econmico, su independencia de sistemas operativos, su capacidad como medio de edicin 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 conexin 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 estn resolviendo o estn apareciendo extensiones. Todo ello es causa y efecto de su xito, que se demuestra con datos como el nmero de pginas que el robot explorador de Google ha visitado, ms 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 informacin. Este protocolo es el denominado HTTP (HyperText Transfer Protocol), un protocolo genrico a nivel de aplicacin, orientado a objetos y sin estados que se ha usado en la WWW desde 1990. Entre otras caractersticas, el HTTP se basa en la tipificacin de la representacin de los datos, lo que permite la construccin de sistemas independientemente de la informacin 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 aadir ficheros de todo tipo, reconociendo el formato para poder lanzar las aplicaciones ligadas. En Internet la comunicacin 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 versin de este protocolo presentaba una serie de problemas que han venido a solucionarse con la versin 1.1, normalizada por el W3C (WWW Consortium). Una de los principales era la necesidad de establecer y terminar una conexin TCP por cada recurso, que resultaba tremendamente ineficiente en una Internet saturada en la que el establecimiento de cada nueva conexin es un proceso lento y costoso. Con la nueva versin se implement un mecanismo denominado HTTP Keep Alive, que permite que una misma conexin se mantenga activa durante un cierto tiempo, de forma que sea utilizada en sucesivas transacciones.
Funcionamiento
El protocolo se basa en el paradigma peticin-respuesta (vase Figura). Un cliente establece una conexin con un servidor y le enva una peticin en la que incluye el mtodo de peticin, el URI (Uniform Resource Identifier) del recurso a obtener y la versin del protocolo, seguido de un mensaje MIME que contiene modificadores de la peticin, informacin del cliente y, posiblemente, el cuerpo del mensaje con contenido. El servidor responde con una lnea de estado, incluyendo la versin del protocolo del mensaje y un cdigo de xito o error, seguido de un mensaje que contiene informacin del servidor, metainformacin 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 peticin que debe ser aplicada a un recurso en algn servidor origen.
Figura 5
Paradigma peticin-respuesta del protocolo HTTP.
Los servidores de WWW
Para distribuir el hipertexto en Internet es necesario instalar en una mquina un servidor HTTP, que permite que los clientes soliciten las pginas y los
17
archivos. Los servidores son programas que esperan permanentemente que alguien solicite una conexin. 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 conexin al servidor correspondiente. La aplicacin que satisface las solicitudes HTTP realizadas por los navegadores es un servidor web. HTML El formato de las pginas de la WWW es el lenguaje de marcas HTML (HyperText Markup Language). A pesar de la multitud de utilidades que ayudan a generar pginas web de una forma rpida, eficiente y vistosa, todas se basan en este sistema de definicin de documentos hipertexto. El HTML no es ms que una aplicacin 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 distribucin y estilo de cada uno de los elementos de una pgina de Web, a base de combinar el texto de la pgina con los diferentes comandos del lenguaje. El resultado de la presentacin de un documento HTML es muy similar a lo que se puede conseguir con un procesador de textos; sin embargo, el cdigo HTML puede ser interpretado y visualizado en una gran variedad de entornos, desde una impresora de lneas hasta una sofisticada estacin grfica. Los documentos HTML son ficheros de texto plano, sin caracteres especiales o de control (todos deben ser cdigos ASCII). Suelen tener asignada las extensiones htm o html (depende del sistema operativo), pero gracias a MIME es posible utilizar otras extensiones, sin ms 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 informacin pueda ser vista por usuarios diferentes, con independencia de las capacidades de su entorno de trabajo. Un documento HTML slo contiene la especificacin de los elementos que lo componen (ttulos, prrafos, imgenes, etc.), y es responsabilidad de cada cliente el mostrar esta informacin de la manera ms adecuada, en funcin de sus capacidades y las caractersticas 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 presentacin de un documento HTML en funcin de los recursos disponibles. Por lo tanto, se debe ser consciente que, dependiendo del entorno de trabajo de cada cliente (sistema operativo, tipo y versin 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 lnea o los espacios mltiples entre palabras. Si se desea incluir un salto de lnea, se debe indicar explcitamente a travs de su correspondiente etiqueta; por tanto, la inclusin de espacios adicionales entre lneas de cdigo HTML ayuda a mejorar la legibilidad del documento, pero no afecta a la forma en que este se
18
ESTADO DEL ARTE
representa. La composicin y formato de un documento se realiza a base de insertar de etiquetas, palabras reservadas del lenguaje rodeadas de los smbolos < >. 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 smbolos </ >. De esta forma, se puede cambiar el formato de bloques completos. Por ejemplo: <H1>Esto es un ttulo</H1> Sin parear, cuando la etiqueta representa la insercin de un elemento, como una imagen, un salto de lnea, 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 prrafos o los elementos de una lista. Por ejemplo: <P>Esto es un prrafo <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 smbolos < >. Las etiquetas de final nunca incluyen atributos. HTML no distingue entre maysculas y minsculas, por lo que las etiquetas podrn escribirse con cualquier combinacin de caracteres, buscando siempre la mejor legibilidad del documento.
Correccin sintctica de los documentos
Como cualquier lenguaje de programacin, 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 estndar. Por ejemplo, W3C Validator dispone de un servicio de validacin de documentos accesible a travs de la Web (http://validator.w3.org/).
Evolucin del HTML
La rpida evolucin del HTML, y las incorporaciones que ha recibido, principalmente por parte de Netscape y Microsoft, ha roto con la filosofa original con que se dise, que buscaba un lenguaje universal de descripcin de documentos. Cada vez es ms comn encontrarse con pginas cuya visualizacin depende de las caractersticas concretas de un tipo de navegador, que dificultan o hacen imposible el acceso para los usuarios que no puedan (o quieran) utilizarlo. Detrs 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 prcticas existe un organismo llamado World Wide Consortium (W3C) que se dedica a numerosas labores de
19
coordinacin y estandarizacin de todo lo relacionado con las tecnologas Web, para facilitar la integracin 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 evolucin 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 creacin de nuevas herramientas de desarrollo web, estn orientados a la generacin de pginas dinmicas, produciendo numerosos sistemas encargados de actuar como pasarela con una base de datos, automatizar diferentes tipos de bsquedas de informacin, o generar dinmicamente texto o grficos. Las ltimas tendencias estn orientadas a disponer de herramientas ms universales, extensibles y generales. Para conseguir que un documento HTML incluya informacin 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 envirselo al cliente. Son ms universales, ya que no dependen de las caractersticas 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 travs de CGI. Client-side executables, aplicaciones que pueden ser transferidas a un cliente para que ste las ejecute.
Adems, debido a que, como hemos dicho, HTML ya no se utiliza como lenguaje de marcacin, se empieza a reemplazar por la nueva especificacin XHTML, un paso hacia delante muy significativo en la normalizacin 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 migracin hacia esta especificacin habilita las siguientes mejoras:
Los documentos XHTML son conformes a XML. Como tales, son fcilmente visualizados, editados y validados con herramientas XML estndar. Los documentos XHTML pueden escribirse para que funcionen igual o mejor que lo hacan 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 estarn ms preparados para interactuar dentro de y entre distintos entornos XHTML.
La familia XHTML es el siguiente paso en la evolucin 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 DINMICO El objetivo final del HTML Dinmico o DHTML es aumentar la interactividad de las pginas web. Se considera un estndar de facto que permite controlar mejor la disposicin, el formato y la animacin de las pginas web. La forma de conseguirlo resulta de la combinacin de HTML con varios elementos:
El DOM (Document Object Model) una especificacin que permite describir la estructura y composicin de una pgina, sin hacer referencia a su contenido. Las Hojas de Estilo en Cascada (CSS) para controlar los atributos de presentacin de cada elemento de una pgina. Lenguajes de script, como JavaScript, Jscript, VBScript o ECMAScript que tienen la capacidad de modificar el DOM y con ello el contenido y presentacin de la pgina.
HOJAS DE ESTILO Hasta este momento, hay una gran diferencia cualitativa entre los documentos de hipertexto y los generados en sistemas profesionales de composicin grfica. La causa es el escaso control que HTML ofrece en aspectos tan importantes como el formato del texto o la integracin entre imgenes 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. Adems, no es posible reutilizar estos estilos en otras secciones del documento, salvo replicando de nuevo todas las etiquetas. El diseador debe recurrir a trucos, empleando tablas y grficos, para construir ciertas presentaciones, imposibles con las capacidades de HTML. En un rpido resumen, las Hojas de Estilo son plantillas que permiten cambiar el formato de presentacin de cualquier etiqueta de HTML. Por ejemplo, se puede hacer que todos los ttulos de nivel 1 se presenten en color rojo, o que los prrafos estn alineados a la derecha por defecto. Adems, y como aspecto fundamental, permiten crear nuevas clases de texto, que agrupen estilos de presentacin comunes. Por ejemplo, se puede definir un prrafo normal, otro de comentarios y otro resaltado, y cambiar la apariencia de un prrafo sin ms que aplicar el correspondiente estilo. Sus caractersticas ms importantes son:
Controlan todos los elementos de la presentacin de un documento HTML: mrgenes de pgina, espaciado entre prrafos, tamaos y tipos de letra, color y fondos, etc.
21
Permiten agrupar varios formatos en nuevas clases de texto, para evitar tener que repetir las mismas etiquetas HTML en diferentes partes del documento. La presentacin final de un servicio de informacin se puede alterar sin ms que alterar una hoja de estilo comn que compartan todos los documentos.
El estndar del W3C habla de Cascading Style Sheets (CSS) ya que son unas guas 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 presentacin del usuario final, que puede alterar a su conveniencia la forma en que se muestra un documento recibido. La especificacin de las hojas de estilo define unas reglas de precedencia para decidir en qu forma se aplica una de estas 'cascadas' de estilos.
Figura 6 Hojas de estilo. El mismo documento con (a) y sin (b) aplicarle una hoja de estilos (CSS).
(a)
(b)
La gran ventaja de las hojas de estilo es que separan las propiedades del documento y el propio contenido. Este hecho permite cambiar rpidamente la 22
ESTADO DEL ARTE
apariencia y adems, aplicarlo a todas las pginas sin necesidad de modificarlas individualmente (vase 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 aadir cierta interactividad a sus contenidos, evitando tener que realizar programacin en el servidor. Fue desarrollado por Netscape y Sun Microsystems, y se puede usar en los clientes Web de Netscape (a partir de la versin 2.0) y Microsoft (a partir de la versin 3.0); hay ligeras diferencias en los intrpretes JavaScript de cada plataforma (vase 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 informacin de referencia del fabricante. Las diferentes versiones de JavaScript han sido finalmente integradas en un estndar denominado ECMAScript-262. Dicho estndar ha sido realizado por la organizacin ECMA dedicada a la estandarizacin de informacin y sistemas de comunicacin. Las versiones actuales de los navegadores soportan este estndar, as que basaremos el uso de JavaScript en este estndar. Navegador Version de JavaScript Javascript 1.0 No soporta JavaScript Javascript 1.1 Javascript 1.0 Javascript 1.2 - 1.3 incompleta Javascript 1.2 ECMA compliant Javascript 1.4 ECMA compliant Javascript 1.3 Soporte ECMA ----ECMA-262-compliant hasta la version 4.5 ECMA-262-compliant Full ECMAScript-262 Full ECMAScript-262
Tabla 1 Tabla de versiones.
Nestcape 2 Internet El programa que va a interpretar los programas JavaScript es el Explorer 2 propio navegador, lo que significa 3 Nestcape que si el nuestro no soporta JavaScript, no podremos Internet ejecutar las funciones que programemos. 3 Explorer Nestcape 4 Internet Explorer 4 Nestcape 6 Internet Explorer 5
Sus caractersticas 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 ejecucin del programa. Todas las referencias entre objetos se resuelven en tiempo de ejecucin; Java lo realiza en tiempo de compilacin. JavaScript tambin es interpretado, pero a diferencia de Java, el cdigo JavaScript no se compila, sino que se inserta directamente en los
23
documentos HTML. Por ello, no es necesario disponer de ninguna herramienta de compilacin, slo un browser que lo interprete. Utiliza un gestor automtico de memoria dinmica, 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 programacin orientados a eventos. En Java, las funciones slo pueden existir como mtodos de acceso a un objeto. Esta es una de las caractersticas 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 rpido una vez ha sido cargada la pagina en el cliente.
JavaScript en los documentos HTML
JavaScript est diseado para ser insertado entre las etiquetas de HTML. Es capaz de realizar pequeos clculos, responder a los eventos del usuario (movimientos y pulsaciones del ratn, envo de formularios, etc.), manejar frames, verificar la informacin introducida en un campo de formulario, realizar operaciones con cookies o alterar la presentacin de diversos elementos de un cliente web, entre otras cosas. Es muy fcil 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 extensin a HTML. Los comandos JavaScript se pueden insertar en un documento HTML de tres formas diferentes, dentro del propio documento HTML (las lneas 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 mayora de las operaciones se realizan utilizando las propiedades (variables) o mtodos (funciones) de estos objetos. Para facilitar la interaccin con el browser y los componentes de un documento HTML, el intrprete de JavaScript pone a disposicin del programador un conjunto predefinido de objetos, de los que se debe conocer su jerarqua y propiedades. A modo de ejemplo (vase Tabla 2), podemos representar la jerarqua de los objetos del navegador, atendiendo a una relacin 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). Segn esta jerarqua, 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 notacin .. 24
ESTADO DEL ARTE
Tabla 2
window
<BODY>...</BODY> <A NAME="...">...</A> <APPLET>...</APPLET> <MAP>...</MAP> <FORM>...</FORM> <INPUT TYPE="button">
<INPUT TYPE="checkbox">
history Jerarqua JavaScript para location document los objetos del

navegador.
ancho r applet area form button checkbox fileUpload hidden password radio reset select submit text textarea image link plugin
<INPUT TYPE="file"> <INPUT TYPE="hidden">

<INPUT TYPE="password">
<INPUT TYPE="radio"> <INPUT TYPE="reset"> <SELECT>...</SELECT> options <INPUT TYPE="option"> <INPUT TYPE="submit"> <INPUT TYPE="text">
<TEXTAREA>..</TEXTAREA>
frame navigator MACROMEDIA FLASH
<IMG SRC="..."> <A HREF="...">...</A> <EMBED SRC="..."> <FRAME>
Probablemente, uno de los avances ms importantes en materia de diseo en el web ha sido la aparicin de la tecnologa desarrollada por Macromedia denominada Flash. Flash es la tecnologa ms comnmente utilizada en el Web que permite la creacin de animaciones vectoriales. El inters en el uso de grficos 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 grficos vectoriales, fcilmente redimensionables y alterables por medio de funciones, as que de un almacenamiento inteligente de las imgenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamao de los archivos que contienen las animaciones. Esta optimizacin del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animacin al mismo tiempo que sta se muestra en el navegador (tcnica denominada streaming), permite aportar elementos visuales que dan vida a una web sin que para ello el tiempo de carga de la pgina se prolongue hasta lmites insoportables por el visitante.
25
Adems de este aspecto meramente esttico, Flash introduce en su entorno (vase Figura 7) la posibilidad de interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programacin 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 animacin en funcin de eventos producidos por el usuario, saltar a otras pginas, etc. De este modo, Macromedia pone a nuestra disposicin una tecnologa 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 diseo vectorial aplicada al Web pero, sin duda, se trata de la ms popular y ms completa de ellas.
Figura 7 Entorno de trabajo de Macromedia Flash 5.
26
ESTADO DEL ARTE
2
ESTADO DEL ARTE
SOFTWARE OPEN SOURCE
SOFTWARE LIBRE APACHE PHP

Integracin de PHP Diferencias entre CGI y PHP Como funciona Caractersticas de PHP Sintaxis bsica Libreras Manejo de errores Caractersticas especiales para la web Definicin Tecnologas Open Source:
PEAR MySQL
PHP con MySQL
SOFTWARE LIBRE Internet se desarrolla a partir de una arquitectura informtica abierta y de libre acceso desde el principio, y esto est en la base de la capacidad de innovacin tecnolgica constante que se ha desarrollado en Internet. Los protocolos TCP/IP se distribuyen gratuitamente y a cuya fuente de cdigo tiene acceso cualquier tipo de investigador o tecnlogo. UNIX es un cdigo 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 da maneja ms de dos terceras partes de los servidores web del mundo, es tambin un programa de cdigo abierto. Y tal es, obviamente, el caso de Linux, aunque Linux es fundamentalmente para las mquinas UNIX a travs 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 fcilmente en contacto con otras. Internet de esta manera acta como un catalizador que acelera el desarrollo y sintetiza el conocimiento en reas muy especficas. Hay diferentes motivaciones que impulsan a los contribuidores y desarrolladores a trabajar en el software Open Source, las ms importantes son:

El deseo de crear nuevo software. El deseo de crear software ms robusto. La posibilidad de estar en control del software. Esto es importante para aplicaciones de misin crtica donde es imperante tener un control total sobre posibles problemas en cualquier punto. Crear aplicaciones de bajo costo. Reutilizacin 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 tcnica de programacin. Reconocimiento de colegas. Lo mencionado arriba ha dado cabida a que se desarrollen sistemas de cmputo 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 pblico en general.
Definicin
El software libre (free software, en ingls) es a veces mal traducido como software gratuito, lo cual desvirta 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 expresin, no en cerveza gratis, jugando con la ambigedad del significado de la palabra free en el idioma ingls.
Captulo 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 trmino FS (free software), y la OSI (Open Source Initiative), que promueve el uso de la nomenclatura OSS (Open Source software). En espaol, los trminos equivalentes seran software libre, o bien software "de cdigo abierto" o "de cdigo libre". Un programa puede considerarse libre si su licencia nos garantiza las siguientes libertades: Libertad de ejecutar el programa, con cualquier propsito. Libertad de estudiar cmo 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 restriccin: si redistribuye el programa, modificado o no, debe hacerse bajo las mismas condiciones. Esta clusula 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 caractersticas. 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 compaa que lo produce). Mucha gente tiende a contribuir, por que es en el inters de todos mejorar esta base comn. Tiende a ser muy diverso: la gente que contribuye tiene muchas necesidades diferentes y esto hace que el software est adaptado a una cantidad ms grande de problemas. A pesar de ello, adolece de algunas desventajas, que se reducen mucho en el caso de un uso acadmico y que pueden tornarse en potencialidades:

La curva de aprendizaje es mayor. El software libre no tiene garanta proveniente del autor (los contratos de software propietario tampoco se hacen responsables por daos econmicos, y de otros tipos por el uso de sus programas). Se necesita dedicar recursos a la reparacin de erratas (en el software propietario es imposible reparar erratas). No existira una compaa nica que respaldar toda la tecnologa. Las interfaces amigables con el usuario (GUI) y la multimedia apenas se estn estabilizando. La mayora de la configuracin 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 intrusin. La diversidad de distribuciones, mtodos de empaquetamiento, licencias de uso, herramientas con un mismo fin, etc., pueden crear confusin en cierto nmero de personas. (Cabe notar que la posibilidad de crear distribuciones completamente a la medida para atacar situaciones muy especficas es una ventaja que muy pocas marcas de software propietario pueden ofrecer y que Microsoft ha sido completamente incapaz de hacer.)
Tecnologas Open Source:
En los ltimos aos, el software libre parece haberse convertido en una alternativa real al software propietario. Cada vez son ms 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 supercomputacin (Beowulf, Mosix), clculo simblico y numrico (Maxima, Scilab, Octave) o como un simple sistema de escritorio alternativo a Microsoft Windows (KDE, Gnome). Uno de los mltiples campos de la Informtica en los que el software libre ha asentado sus bases de manera profunda es en el desarrollo web, especialmente el caso de la solucin 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 acrnimo de Linux, Apache, MySQL y PHP, consideradas como unas de las mejores herramientas que el software libre puede proporcionar y que permiten a cualquier organizacin o individuo tener un servidor Web verstil y poderoso, independientemente del hecho que no es necesario pagar licencias por su utilizacin, 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 caracterstica muy interesante es el hecho que estos cuatro productos pueden funcionar en una amplia gama de hardware, con requerimientos relativamente pequeos 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 ms 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 cooperacin y los esfuerzos de un grupo de personas conocidas como grupo Apache (Apache Group), los cuales se comunican a travs de Internet y del Web. Juntos se dedican a 31
perfeccionar el servidor y su documentacin regidos por la ASF (Apache Software Foundation). En la actualidad Apache es el servidor Web ms utilizado en el mundo de acuerdo con las estadsticas de Netcraft (www.netcraft.com/Survey/) que lo colocan en ms de 7 millones de servidores que sirven poco ms de 18 millones de sitios Web, lo cual significa ms del 60% en todo el mundo. Entre las caractersticas 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 travs de la definicin de mdulos empleando su propio API (Aplication Programming Interface). Provee todo su cdigo 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 mayora de los Unix existentes: IRIX, Solaris, HPUX, SCO, FreeBSD, NetBSD, AIX, Digital Unix, etc. Se desarrolla de forma acelerada estimulando la retroalimentacin desde sus usuarios a travs de nuevas ideas, reportes de errores y parches. Apache significa ``A PAtCHy sErver'', o sea se basa en un cdigo 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 autenticacin. Permiten establecer fcilmente la proteccin de documentos a travs de passwords para una gran cantidad de usuarios sin daar 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 mltiples 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 definicin de alias para los URLs. Apache no tiene un lmite establecido para definir alias y redireccionamientos que pueden ser declarados en sus ficheros de configuracin. Negociacin del contenido de las respuestas. Apache es capaz de ofrecer la mejor representacin de la informacin 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 mquina. Configuracin flexible de las trazas generadas. Es posible adaptar el formato de las trazas obtenidas as como redireccionarlas a travs de tuberas (Unix) en aras de filtrarlas. De esta forma se puede lograr por ejemplo dividir dinmicamente las trazas de los hosts virtuales en distintos ficheros.
La configuracin se realiza editando el archivo httpd.conf y cambiando algunos parmetros.
32
ESTADO DEL ARTE
PHP PHP (acrnimo de PHP: Hypertext Preprocessor) es un lenguaje interpretado de alto nivel embebido en pginas HTML y ejecutado en el servidor. PHP es un lenguaje con una sintaxis cmoda y similar a la de lenguajes como C o C++, es rpido a pesar de ser interpretado, multiplataforma y dispone de una gran cantidad de libreras que facilitan muchsimo el desarrollo de las aplicaciones. El cdigo generado es mantenible, se lee muy bien y podemos programar utilizando objetos. Segn Netcraft, el organismo que realiza las estadsticas de uso de software en Internet, PHP es empleado por ms de la mitad de los sitios web en todo el mundo (uno de los nodos ms complejos y con ms 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.
Integracin de PHP
Hoy por hoy, PHP es competencia directa, dentro del campo de las pginas generadas dinmicamente, 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 mdulo de forma que aprovecha la mxima integracin con el servidor y velocidad posible. Sin embargo, tambin puede ser compilado como un ejecutable ms, 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 ejecucin de CGIs en dichas plataformas. Nos podramos encontrar con la curiosa situacin 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 realizacin de pginas dinmicas, dejando de lado por un momento el lenguaje ASP que, recordamos, es propietario y puede utilizarse (casi) slo 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 cdigo HTML de las pginas y no necesita, por lo tanto, otros archivos para que se ponga en marcha. Un script PHP, de hecho, no necesita ser instalado como ocurre con un script CGI.
33
Con PHP ya no se necesitan configuraciones especiales del servidor de la red para que se habiliten directorios cgi-bin o la realizacin de unos archivos que tengan determinadas extensiones. Primero se dan instrucciones al servidor de la red, luego cada script (o mejor, cada pgina que tenga el cdigo del script) se puede poner en marcha en cada directorio donde est. Las posibilidades del PHP son prcticamente 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 cdigo 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 slo recibe cdigo HTML (vase Figura 8).
Figura 8 Esquema de produccin de cdigo HTML mediante PHP.
Los navegadores no tienen ningn problema con PHP, ya que nunca llegan a verlo: el cdigo PHP se interpreta para generar la pgina 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 pginas 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.
Caractersticas de PHP
PHP puede hacer cualquier cosa que se pueda hacer con un script CGI, como procesar la informacin de formularios, generar pginas con contenidos dinmicos, o mandar y recibir cookies. Quizs la caracterstica ms potente y destacable de PHP es su soporte para un gran nmero de gestores de bases de datos a los que puede acceder (PosgreSQL, Oracle, ODBC, MySQL, dBase, Microsoft SQL Server...). Pero adems, PHP ofrece soporte para:

Acceso a servidores IMAP Envo de correo con SMTP Acceso a servidores de FTP Acceso a SNMP para gestin de redes y equipos Generacin dinmica de grficos y documentos PDF
34
ESTADO DEL ARTE
Anlisis de documentos XML Corrector de ortografa Generacin 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 ejecucin de pginas PHP. Este nuevo rendimiento le ha puesto por delante de ASP, la tecnologa 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 haba sucedido hasta ahora. Por otro lado, PHP estaba hasta el momento pensado bsicamente para Apache. Era el nico que tena soporte para tener a PHP como un mdulo del servidor. Todos los dems servidores de web slo podan utilizar a PHP como cgi. En PHP4 se han aadido 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 podrn lograr rendimientos similares a Apache en su ejecucin de PHP. Adems 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 aadido la posibilidad de mtodos polimrficos, mtodos que segn desde que referencia a un objeto se llamen se comportan de una forma o de otra. Esta caracterstica es muy importante para incluir soporte para acceder a las arquitecturas CORBA y COM.
Sintaxis bsica
El cdigo PHP no se mezcla con las etiquetas HTML, ya que est acotado siempre por los smbolos <? y ?>, de forma que para los programas compositores de pginas web son etiquetas que no soporta y las deja tal y como estn. De esta forma, puede trabajarse a la vez en el diseo visual de la pgina y en la funcionalidad (programacin) de la misma cmodamente. Hay cuatro formas de salir de HTML y entrar en el modo de cdigo PHP:
1. <? echo (Esta es la ms simple, una instruccin de procesado SGML\n); ?> Formas de salir de HTML. 2. <?php echo (Esta es para servir documentos XML\n); ?> Ejemplo 1 3. <script language=php> echo (Editores como FrontPage no permiten instrucciones de procesado); </script> 4. <% echo (Etiquetas tipo ASP); %>
Cualquiera de estas formas es vlida, sin embargo, la ms comn entre los desarrolladores es la segunda, encerrar el cdigo PHP entre los caracteres <?php y ?>.
35
Vamos a ver un ejemplo sencillo:
<HTML> <BODY> <?php echo Esto es PHP<BR>; // Primera parte
Ejemplo 2 Sintaxis en PHP.
for ($i=0; $i<10; $i++) { // Segunda parte echo Linea.$i.<BR>; } ?> </BODY> </HTML>
El cdigo 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 lnea, la variable $i contiene el nmero de lnea que se est escribiendo. Las instrucciones se separan igual que en C o Perl, terminando cada sentencia con un punto y coma. PHP soporta comentarios tipo C, C++ y shell de Unix. Por ejemplo:
Ejemplo 3 <?php echo Esto es una prueba; // Comentario tipo CC++ para una Comentarios en PHP. lnea /* Esto es un comentario multilnea otra lnea ms de comentario */ echo Una prueba final; # Este es un comentario tipo shell ?>
Libreras
El uso de libreras en PHP permite agrupar funciones y cdigo que puede ser reutilizado, por ejemplo, si se repite a lo largo de diferentes pginas. 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 cdigo (Parser Errors) 8 - Avisos (Notices, advertencia que puede ignorarse, pero que puede implicar un error en el cdigo).
36
ESTADO DEL ARTE
Los 4 nmeros 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 tambin llamarse con el prefijo @, que desactiva el aviso de errores para esa expresin en particular. Si ocurre un error en una expresin en tal situacin y la caracterstica track_errors est habilitada, podremos encontrar el mensaje de error en la variable global $php_errormsg.
Caractersticas especiales para la web Formularios
El lenguaje PHP nos proporciona una manera sencilla de manejar formularios, permitindonos de esta manera procesar la informacin que el usuario ha introducido. Al disear un formulario debemos indicar la pgina PHP que procesar el formulario, as como el mtodo por el que se le pasar la informacin a la pgina. Al pulsar el botn Enviar el contenido de cuadro de texto es enviado a la pgina 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 pgina anterior y el valor que hayamos introducido.
Envo de e-mails
PHP nos ofrece la posibilidad de enviar e-mails de una manera sencilla y fcil, para ello el lenguaje nos proporciona la instruccin mail( ).
Ejemplo 4 Especificacin de la funcin mail(). <?php mail (destinatario, tema, texto del mensaje): ?>
En el parmetro destinatario pondremos la direccin de e-mail a donde se enviar el mensaje, en el parmetro tema el tema o subject del mensaje y el parmetro texto del mensaje el cuerpo del mensaje en formato texto plano.
Cookies
PHP soporta transparentemente cookies HTTP. La filosofa con la que nacieron las cookies es la de hacer una navegacin ms 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 (vase Figura 9). Se utilizan de varias maneras, pero los usos ms extendidos hacen referencia a personalizacin de pginas, de idiomas, en tiendas electrnicas y para carritos de la compra. Aunque tambin se usan para fines menos ticos, como son el seguimiento de visitas, marketing personalizado, mostrar banners publicitarios y almacenar informacin sensible del usuario. Se pueden poner cookies usando la funcin setcookie(). Las cookies son parte de la cabecera HTTP, por tanto la funcin setcookie() debe ser llamada antes de que se produzca cualquier salida al navegador.
37
Cualquier cookie enviada desde el cliente, automticamente se convertir en una variable PHP igual como ocurre con los mtodos de datos GET y POST.
Figura 9 Funcionamiento de las cookies.
(a)
La cookie se enva al navegador desde el servidor y si este la acepta permanece en l (a). Entonces, las pginas piden la cookie al navegador (b) y ste las enva (c), permitiendo la identificacin del usuario.por parte del servidor.
(b)
(c)
Sesiones
El uso de sesiones es un mtodo ampliamente extendido en cualquier aplicacin de cierta entidad. Bsicamente una sesin es la secuencia de pginas que un usuario visita en un sitio web. Desde que entra en nuestro sitio, hasta que lo abandona. El trmino sesin en PHP, session en ingls, se aplica a esta secuencia de navegacin, para ello crearemos un identificador nico que asignamos a cada una de estas sesiones de navegacin. A este identificador de sesin se le denomina, comnmente, como la sesin. El proceso en cualquier lenguaje de programacin podra ser algo as:

Existe una sesin? Si existe la retomamos. Si no existe creamos una nueva. Generar un identificador nico.
Y para que no perdamos el hilo de la navegacin del usuario deberemos asociar esta sesin a todas las URLs y acciones de formulario. Podemos tambin crear una cookie que incluya el identificador de sesin, 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 programacin C, Perl, etc. En PHP4 toda la gestin de sesiones la hace el mismo PHP. Para utilizar sesiones en PHP lo primero es inicializarlas. Podemos hacerlo explcitamente, mediante la funcin session_start(), o al registrar una 38
ESTADO DEL ARTE
variable en una sesin mediante session_register('miVariable'). En ambos casos se crea una nueva sesin, si no existe, o se retoma la sesin actual. Veamos un sencillo ejemplo:
Ejemplo 5 Session_start().
<?php session_start(); echo 'La sesin ?>
actual
es:
'.session_id();
En este caso session_start() comprueba en los cookies que existe una sesin y continua con ella, session_id() devuelve el identificador actual.
Creacin de imgenes y documentos dinmicamente
PHP no est limitado a crear solo salidas de HTML. Puede usarse tambin para crear ficheros de imgenes GIF, o incluso secuencias de imgenes GIF. Tambin para crear documentos PDF, aunque la librera que permite hacerlo no es software libre, y para la creacin de formatos de pelculas Flash, en este caso una librera Open Source aunque en fase experimental.
Restringir el acceso
Podemos restringir el acceso a segn qu pginas, para que solo las personas autorizadas puedan acceder a ciertas partes del nuestro sitio web. Para conseguir la autentificacin en las pginas usaremos el sistema de autentificacin 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. Contrasea introducida. Para que el navegador nos muestre la ventana de peticin de nombre de usuario y contrasea basta con enviar la siguiente cabecera:
Ejemplo 6 Cabecera de autentificacin. <?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 contrasea: $PHP_AUTH_PW<br>"; } ?>
Esto provoca que se muestre la ventana de nombre de usuario y contrasea y los datos introducidos se asignen a las variables $PHP_AUTH_USER y $PHP_AUTH_PW.
39
A partir de aqu realizaremos las comprobaciones necesarias para asegurarnos que los datos introducidos son los correctos.
Ejemplo 7 <?php Autentificacin de usuario. if (($PHP_AUTH_USER!="Jose") || ($PHP_AUTH_PW!="123")) { header('WWW-Authenticate: Basic realm="Acceso restringido"'); header('HTTP/1.0 401 Unauthorized'); echo 'Authorization Required.'; exit; } ?>
En el siguiente ejemplo pediremos autorizacin y comprobaremos si el nombre de usuario es Jose y la contrasea 123, si es as tendremos acceso al resto de la pgina.
PEAR PEAR (acrnimo de PHP Extensin and Application Repository) es el repositorio oficial de clases y extensiones de PHP, es decir, PEAR rene clases escritas en PHP o en C que sirven, o mejor dicho, que son extensiones para usar en nuestras aplicaciones PHP, una autntica librera de cdigo. PEAR provee un conjunto estndar 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. Adems PEAR sustituye a estndares y normas que se deben seguir al crear aplicaciones Web o aplicaciones PHP para su posterior distribucin. PEAR provee las siguientes caractersticas:

Un librera definida de funciones de cdigo abierto con la que el usuario puede escribir cdigo. Un conjunto de herramientas para distribucin de cdigo y para que los desarrolladores puedan compartir su cdigo unos con otros. Un conjunto detallado de estndares que los desarrolladores pueden seguir al escribir su cdigo. 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 implementacin de nuestro sitio web, codificaremos siguiendo los estndares en PEAR. MySQL La incipiente demanda de las bases de datos para la Web se debe fundamentalmente al incremento de la popularidad de la tecnologa clienteservidor dentro de las aplicaciones web.
40
ESTADO DEL ARTE
MySQL Database Server es la base de datos de cdigo fuente abierto ms usada del mundo. Su ingeniosa arquitectura lo hace extremadamente rpido y fcil de personalizar. La extensiva reutilizacin del cdigo dentro del software y una aproximacin minimalstica para producir caractersticas funcionalmente ricas, ha dado lugar a un sistema de administracin de la base de datos incomparable en velocidad, compactacin, 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 definicin de datos, consultas y manipulacin 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 pgina PHP. Para ello PHP nos proporciona una serie de instrucciones para acceder a bases de datos MySQL.
<?php function Conectarse() { Conexin a una base de if datos MySQL desde PHP. (!($link=mysql_connect("localhost","usuario","Password"))) { echo "Error conectando a la base de datos."; exit(); } if (!mysql_select_db("base_datos",$link)) { echo "Error seleccionando la base de datos."; exit(); } return $link; } Ejemplo 8 $link=Conectarse(); echo "Conexin con la base de datos conseguida.<br>"; mysql_close($link); //cierra la conexion ?>
Al ejecutar la instruccin mysql_connect() creamos un vnculo entre la base de datos y la pagina PHP, este vnculo ser usado posteriormente en las consultas que hagamos a la base de datos. Finalmente, una vez que hemos terminado de usar el vnculo con la base de datos, lo liberaremos con la instruccin mysql_close() para que la conexin no quede ocupada.
41
42
ESTADO DEL ARTE
3
MODELO DE PROCESO
MPIU PARA LA WEB
INGENIERA DEL SOFTWARE DISEO CENTRADO EN EL USUARIO INGENIERIA DE LA USABILIDAD USABILIDAD EN LA WEB BUSCANDO UN MODELO DE PROCESO MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD APLICACIN DEL MODELO DE PROCESO A LA WEB ESQUEMA DEL MODELO
Organizacin Conceptual. Anlisis de requisitos Diseo Conpetual Prototipado Evaluacin Implementacin Lanzamiento El proceso de software El Lenguaje de Modelamiento Unificado, UML. Qu es la usabilidad? Por qu es importante la usabilidad? Ciclos de vida en el desarrollo software
INGENIERA DEL SOFTWARE La ingeniera del software es una disciplina que trata de todos los aspectos de la produccin de software. Los principios de ingeniera suelen estar basados en leyes de la fsica, la biologa o las matemticas, pero en el caso de la ingeniera del software estos principios estn basados en la experiencia vivida por muchas personas a lo largo de los aos. La situacin de la ingeniera del software en los aos 80 slo permita una arquitectura fsica y lgica restringida a lo que ofrecan 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 degradacin de la aplicacin 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 traduccin correcta al espaol sera codifica y corrige, donde se codifica y luego se piensa en los requisitos, diseo, pruebas, mantenimiento [BOE88], dieron origen a un reconocimiento de la crisis del software, que desemboc en el nacimiento de la ingeniera del software como disciplina. Desde entonces, el desarrollo de software ira unido a un ciclo de vida compuesto por una serie de etapas que comprenderan 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 sistemtico y organizado de su trabajo y usar herramientas y tcnicas 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 ms bsicos, y que sirve como bloque de construccin para los dems modelos de ciclo de vida, fue el modelo en cascada (vase Figura 10). Pero en la actualidad, el modelo en cascada est comenzando a ser sustituido por los modelos iterativos e incrementales asociados con la tecnologa ms reciente orientada a objetos. Los mtodos actuales de la ingeniera de software, estimulan el uso de esquemas de desarrollo ms flexibles de tipo espiral, que permiten ir hacia atrs y haca adelante, rompiendo un poco las barreras entre cada etapa. Se estimula mucho el desarrollo incremental (vase Figura 11) en el ciclo de vida: no lo hagas todo de una vez. Estos esquemas tambin promueven el prototipaje. Es necesario darle al cliente una idea de cmo va a funcionar su sistema, implementando en prototipos aquellos requerimientos de mayor riesgo y poder brindar al ciclo de desarrollo, flexibilidad para la modificacin de los requerimientos iniciales.
Captulo 3: MPIU para la Web
45
Figura 10 Modelo en cascada. El inconveniente del modelo en cascada es la dificultad de permitir cambios despus de que el proceso haya empezado.
Figura 11 El modelo incremental.

El modelo incremental se centra en la entrega de un producto funcional con cada uno de los incrementos. Los incrementos iniciales no son programas completos, pero proporcionan al usuario la base para evaluar el producto.
Estos cambios de paradigmas en los modelos y procesos de desarrollo de software imponen tambin un cambio de paradigma en la interaccin usuariosistema en sus diferentes niveles, que provoca el origen de una metodologa que apunta a asegurar una interaccin usuario-sistema ms natural (cmoda) y eficiente (productiva), as como facilitar la comprensin del sistema por parte de nuevos usuarios y eliminar inconsistencias en la interaccin. Del estudio de las metodologas de la Interaccin Persona-Ordenador (IPO), surge uno de los paradigmas que ms ha beneficiado al desarrollo del software, el denominado Diseo Centrado en el Usuario. DISEO CENTRADO EN EL USUARIO Hay una larga tradicin de ergonoma e ingeniera de factores humanos. Butler nos recuerda que estudios sobre performancia humana y tcnicas de diseo para el control de mquinas se convirtieron ya en campo de una intensa actividad de investigacin aplicada durante la Segunda Guerra Mundial, cuando la complejidad de los equipos empez a sobrepasar los lmites humanos para una operacin segura. Por este camino, la aeronutica lleg en los aos sesenta a considerar a los seres humanos como un componente del 46
MODELO DE PROCESO
sistema tcnico total, hasta culminar su evolucin en el concepto de diseo centrado en el piloto. Por su parte, el inters por la interaccin de humanos con sistemas de informacin arranca en los aos 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 mquina Star, de Xerox, y ms tarde la estacin Lisa, de Apple, materializan, aunque con poco xito comercial, la metfora del escritorio, en forma de las primeras interfaces ms o menos intuitivas pensadas para usuarios no informticos. La informtica personal revoluciona el mundo de la informtica y pone silenciosamente en marcha un movimiento de cambio de mtodos y sistemas centrados en la tecnologa, hacia mtodos y sistemas centrados en el usuario. La actual sofisticacin alcanzada en las soluciones informticas 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 ms exigentes y crticos: esperan un alto grado de elaboracin en las Interfaces Grficas de Usuario (GUI), as como aqul en el cdigo y en el funcionamiento del sistema en s. Esta reflexin histrica nos ayuda a hacer una reduccin simplista de las diversas formas de entender el problema y plantear una solucin; cada una de ellas han marcado el tiempo y la poca en la que evolucionaron. La primera, denominada, Centrado en la Mquina, culpaba al usuario de los errores y dificultades encontradas en la interaccin con el software. Esto quiere decir, la mquina estaba bien, la culpa era del usuario. Despus, los usuarios empezaron a quejarse; los desarrolladores escucharon. Entonces culparon a los diseadores. Aunque no resolva el problema totalmente, se sentaron las bases para el Diseo Centrado en el Usuario (UCD). La solucin no slo requera de buenas intenciones. Se requera, adems, iterar la solucin una y otra vez. Se necesitaba interrelacionar, de alguna manera, al diseo, y el proceso del diseo, con los usuarios. As surgi la metodologa de UCD [NOR86]. En el modelo bsico del Diseo Centrado en el Usuario de una aplicacin de software se concibe al usuario como al ente que no slo opera el sistema sino que integra sus metas de trabajo con las funciones implementadas en la aplicacin. Para ello, debe emplear y combinar sus propias funciones cognitivas, manejando diversas capas operativas. La ms elevada consiste en encajar su modelo conceptual del trabajo con su percepcin de las funciones de la aplicacin informtica. En una capa intermedia tiene el usuario que construir los comandos correctos para controlar en cada caso las funciones necesarias de la aplicacin. Por ltimo, la capa inferior comprende las acciones especficas sobre los dispositivos de entrada al sistema. Se cierra el circuito cuando el usuario interpreta el lenguaje de presentacin de la aplicacin -normalmente en forma icnica sobre la pantalla-, representativa del estado en el que se encuentra el procesamiento de la aplicacin. Con UCD, se puede mejorar la utilidad (relevancia) y usabilidad (facilidad de uso) de cualquier aplicacin de software [TRU98].
47
Del aprovechamiento de estas medidas de calidad, del UCD como metodologa predominante en la Ingeniera del software y de los conocimientos de la disciplina de la IPO, la Ingeniera de la Usabilidad proporcionar un proceso para el diseo 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 interaccin hombre-mquina) y la complejidad de hacerlo, que desborda de lejos lo que se entiende por tcnicas informticas. La Ingeniera de la Usabilidad es multidisciplinar; se nutre de la informtica, de la psicologa, de la lingstica, de la sociologa, de la antropologa y del diseo industrial. Este trmino viene utilizndose desde mediados de los ochenta, para designar a una nueva disciplina (UE, en siglas inglesas), que se ocupa de proporcionar mtodos sistemticos y herramientas para la compleja tarea de disear interfaces de usuario fcilmente comprensibles, rpidamente aprendibles y fiablemente operables [BUT96]. La importancia a la que se dota a la interfaz de usuario de una aplicacin informtica es primordial, ya que en cierta manera es para el usuario la aplicacin, el medio por el que la visualiza y por el que accede a sus prestaciones y servicios. La mayor parte de la calidad tcnica de la aplicacin acaba fluyendo por este conducto. Si no lo hace, queda indita, o es intil. Si la interfaz no es efectiva, la funcionalidad de la aplicacin y su utilidad estn limitadas; los usuarios se confunden, se frustran y se enojan; los desarrolladores pierden credibilidad y la empresa tiene que soportar altos costes y baja productividad.
Figura 12 Metodologa esquemtica de la Ingeniera de la Usabilidad.
El objeto de la Ingeniera de la Usabilidad es minimizar la sobrecarga cognitiva y perceptiva del usuario de esa aplicacin. Utiliza un mtodo de diseo iterativo con prototipado rpido (es imprescindible contar con herramientas de ayuda), cuyo esqueleto es el ciclo "anlisis-diseo-implementacinevaluacin" (vase Figura 12), que se repite varias veces con vistas a ir enriqueciendo progresivamente el sistema. La etapa de evaluacin del
48
MODELO DE PROCESO
prototipo, confrontndolo con usuarios reales a cada repeticin del ciclo, se revela como trascendental para obtener resultados dignos de una ingeniera.
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 difciles de precisar y de medir y la usabilidad no es una excepcin en absoluto, sino todo lo contrario, como cualquiera puede colegir del hecho de que las mtricas ms habituales para su evaluacin son un tanto psicolgicas, como la facilidad de aprendizaje, las prestaciones y la satisfaccin del usuario. Usabilidad es un factor plenamente aceptado de la calidad del software en particular y de la de los sistemas de informacin, en general, definido recientemente por instituciones normalizadoras como ISO o ETSI. Aunque el trmino, por ahora, no existe en espaol. 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 bsicos [BRI02]:
Funcionalmente correcto: el sistema tiene que alcanzar los objetivos para los que ha sido diseado. 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 ms eficiente posible. Facilidad de aprendizaje: se refiere a la facilidad con la que nuevos usuarios pueden tener una interaccin efectiva. Est relacionada con la predicibilidad, sintetizacin, familiaridad, la generalizacin de los conocimientos previos y la consistencia. En general, cuantos menos pasos contenga un procedimiento, ms fcil ser de aprender. Fcil de recordar: el grado con el que un sistema carga la memoria del usuario determina como de fcil es para los usuarios recordarlo. La interaccin 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 situacin de error una vez identificada. El sistema tiene que ser capaz de volver fcilmente a su estado normal despus de una situacin errnea provocada por una interaccin incorrecta con l. A su vez, tiene que disponer de mecanismos para informar al usuario de los errores en la interaccin para que no se produzcan nuevamente despus de la recuperacin. 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 sensacin de una experiencia satisfactoria. Aunque los grficos no funcionales y otros elementos de las interfaces puedan sesgar la usabilidad de la percepcin
49
del usuario, la satisfaccin de ste es probablemente una combinacin de estos criterios. En este punto, no debe confundirse el concepto de usabilidad con el de amigabilidad o de congenialidad (en ingls, user friendliness), porque la usablidad es un nivel superior al de "amigabilidad", puesto que incorpora tambin criterios de rendimiento, tales como efectividad y eficiencia.
Por qu es importante la usabilidad?
El establecimiento de unos principios de diseo en ingeniera basados en la usabilidad han tenido como consecuencia probada:
Una reduccin de los costes de produccin: los costes y tiempos de desarrollo totales pueden ser reducidos evitando el sobrediseo y reduciendo el nmero de cambios posteriores requeridos en el producto. Reduccin de los costes de mantenimiento y apoyo: los sistemas que son fciles de usar requieren menos entrenamiento, menos soporte para el usuario y menos mantenimiento. Reduccin 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 ms fciles de utilizar reducen el esfuerzo (stress) y permiten a los trabajadores manejar una variedad ms amplia de tareas. Los sistemas difciles de usar disminuyen la salud, bienestar y motivacin y pueden incrementar el absentismo. Tales sistemas suponen prdidas en los tiempos de uso y no son explotados en su totalidad en la medida en que el usuario pierde inters en el uso de las caractersticas avanzadas del sistema, que en algunos casos podran no utilizarse nunca. Mejora en la calidad del producto: el diseo centrado en el usuario resulta en productos de mayor calidad de uso, ms competitivos en un mercado que demanda productos de fcil 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 travs de la Red. La rapidez con la que Internet est creciendo hace necesario la utilizacin de mtodos ingenieriles para poder construir aplicaciones web de calidad, de fcil mantenimiento y con el menor esfuerzo posible. En Internet es bsico garantizar la usabilidad, los usuarios han cambiado, ya no son los mismos y cada vez se parecen ms a una persona corriente. Para los nuevos usuarios medios la informtica no es un hobby sino una herramienta ms a su disposicin por ello no se puede esperar que aprendan ms del mnimo necesario. El nivel medio de conocimientos est bajando, ms gente sabe usar Internet, pero a un nivel ms 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 navegacin, el tiempo de respuesta, el contenido, la interactividad y la facilidad de comprensin. Hasta lo humanamente posible, cuando se mire una pgina 50
MODELO DE PROCESO
web sta ha de ser obvia, evidente, clara y fcil de entender. Tendra que poderse "entender" (qu es y cmo 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 pgina fcil de entender hay que pensar incluso un poquito para "entenderla" (pero slo un poquito). La apariencia de las cosas, sus nombres bien escogidos, la disposicin de la pgina y los textos pequeos y cuidadosamente elaborados tienen que funcionar bien en su conjunto para conseguir un reconocimiento casi instantneo. Si no puede hacerse una pgina fcil de entender, al menos tendr que hacerse clara. . Una base de principios bsicos que debe seguir un sitio web usable seran [MAN02b]:

Anticipacin, el sitio web debe anticiparse a las necesidades del usuario. Autonoma, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situacin en un entorno abarcable y no infinito. Los colores han de utilizarse con precaucin para no dificultar el acceso a los usuarios con problemas de distincin 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 nmero de pasos son ms rpidas de realizar para una persona que otras tareas con menos pasos, pero ms 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 ratn esta en funcin de la distancia y el tamao del objetivo. A menor distancia y mayor tamao ms facilidad para usar un mecanismo de interaccin. Reduccin del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realizacin de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalizacin de la tarea. Aprendizaje, los sitios web deben requerir un mnimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. El uso adecuado de metforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje. La proteccin 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 tamao de fuente debe ser suficientemente grande. Seguimiento de las acciones del usuario. Conociendo y almacenando informacin sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera ms rpida. Interfaz visible. Se deben evitar elementos invisibles de navegacin que han de ser inferidos por los usuarios, mens desplegables, indicaciones ocultas, etc.
Otros principios para el diseo de sitios web son:
Los usuarios deben ser capaces de alcanzar sus objetivos con un mnimo esfuerzo y unos resultados mximos.
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 ningn 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 trmino peligroso, cuanto mayor sea el nmero de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el nmero de acciones al pblico objetivo se facilita el uso de un sitio web. Los usuarios no deben sufrir sobrecarga de informacin. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de informacin. Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes reas tengan diseos diferentes, la consistencia entre los diseos 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 ms generales de usabilidad en la web. Su aplicacin concreta y casustica ser abordada a lo largo de la aplicacin 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 slo por la evaluacin del producto entregado sino por la evaluacin del proceso aplicado. Hasta ahora hemos empleado el termino proceso de software, pero qu queremos decir con este trmino?: 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 planificacin y desarrollo de un trabajo. Un grupo de actividades cuya meta es el desarrollo o evolucin de software es un proceso de software. No existe un proceso de software universal. Las caractersticas 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 innovacin, al mismo que debe poder ser aprendido.
El Lenguaje de Modelamiento Unificado, UML.
Una de las herramientas de diseo y anlisis ms utilizadas en los procesos de desarrollo de software bajo una perspectiva orienta a objetos, es la notacin UML. El Lenguaje de Modelamiento Unificado (UML - Unified Modeling Language) es un lenguaje grfico 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 versin del producto. Cada ciclo est compuesto por fases y cada una de estas fases est compuesta por un nmero de iteraciones. Como lenguaje de modelado que es, no define un proceso estndar. Sin embargo, existen una serie de actividades genricas para todos los procesos de software:

Anlisis. Que es lo que se quiere hacer. Diseo. Como se quiere que se haga. Programacin. Escritura del cdigo. Mejora, depuracin, 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 Ingeniera del Software. Tendr un enfoque generalista y a su vez suficientemente conciso y robusto para que el desarrollador pueda aplicarlo sin dudas ni ambigedades. 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 Diseo Centrado en el Usuario. Deber ser aplicable a todo tipo de proyectos y adaptarse tanto a desarrollos comerciales como a proyectos a medida ms especficos y especializados. Este proceso ser proporcionado por la Ingeniera de la Usabilidad.
MODELO DE PROCESO DE LA INGENIERA DE LA USABILIDAD Una de las principales causas para no incluir la ingeniera de factores humanos o Ingeniera 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 tpicamente la figura del usuario exclusivamente aparece al principio del desarrollo (Ingeniera de Requerimientos), al final del mismo o al final de cada etapa, pero no durante el proceso de desarrollo. Como contribucin a cambiar esto, el Modelo de Proceso de la Ingeniera de la Usabilidad (MPIU) [LOR02] especifica una metodologa que gua al equipo de desarrollo de aplicaciones interactivas con altos niveles de usabilidad. El MPIU tiene sus cimientos por una parte en la Ingeniera del Software (IS) y por otra en la disciplina de la Interaccin Persona-Ordenador, la cual contribuye -entre otras- con toda una slida base de conocimiento y un conjunto de tcnicas y experiencias conocidas para el diseo de interfaces centrados en sus usuarios. Pretende ser una herramienta de trabajo para ayudar metodolgicamente a los equipos de desarrollo. No especifica ni el uso de un determinado lenguaje de programacin, ni ninguna tecnologa especfica, ni ningn factor que pueda determinar la aplicacin, sino todo lo contrario, est pensado para todo tipo de aplicaciones y tecnologas -actuales y futuras, en definitiva, es independiente de los dispositivos y la tecnologa.
53
APLICACIN DEL MODELO DE PROCESO A LA WEB En el rea de desarrollo de aplicaciones web se ha introducido un gran nmero de iniciativas para la creacin de soluciones web al diseo clsico de software. Estos mtodos pueden ser clasificados en dos enfoques principales: los mtodos hipermediales de desarrollo y los mtodos que extienden la aproximacin UML. Si adems, pretendemos priorizar la incorporacin de la usabilidad en un sitio web desde un principio y basarnos en la Ingeniera del Software y en la disciplina de la Interaccin Persona-Ordenador, aplicaremos el Modelo de Proceso de la Ingeniera 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 aplicacin iterativa de las actividades de Prototipado y Evaluacin aplicadas a todas las etapas considerando la usabilidad desde un principio, a la vez que integra, a diferencia de aquellas, actividades propias de la Ingeniera del Software. Veamos, a grandes rasgos, aquellos aspectos ms importantes cuando tratamos de aplicar el MPIU al desarrollo de un sitio Web. Anlisis de Requisitos. (1) el estudio de la audiencia [HYS98]; (2) las redes sociales identificando patrones comunicativos y flujos de informacin [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 parmetros funcionales y de usabilidad [STE02]; (5) las diferencias individuales del mercado (edad, gnero, educacin, ocupacin), de las discapacidades (visuales, auditivas, motrices) o del nivel de experiencia. Prototipado a partir de la realizacin de maquetas (bocetos, maquetas de papel y digitales) [BRI02] evaluadas a base de encuestas, focus groups [NIE93] con implicados (stakeholders) son especialmente indicadas. Cmo tambin lo son las evaluaciones a partir de descripciones formales de escenarios de casos de uso [CON95]. Diseo. Aunque el diseo grfico es importante debe invertirse ms tiempo en el diseo de la interaccin del sitio. Implementar el diseo conceptual del sitio con la Arquitectura de la Informacin [ROS98] es especialmente relevante. Estudiar los modelos de navegacin, de la pgina de inicio o homepage [NIE02], o los distintos elementos de navegacin (barras de navegacin, mens desplegables, opciones de bsqueda, mapa del sitio, sistema de etiquetas, los textos alternativos y de las metforas a utilizar en toda la interfaz). La tcnica conocida como card sorting [ROB01] permite entender y ajustar el diseo de la actividad relativa a las interacciones de los usuarios. La realizacin de prototipos digitales o de software horizontales ya sea con una estructura almbrica (wireframe) o bien con un prototipo detallado (highend) evaluados por el mtodo del focus group o del thinking aloud, as cmo tambin el mtodo de inspeccin de estndares nos servirn para la fase de prototipado y evaluacin.
54
MODELO DE PROCESO
ESQUEMA DEL MODELO Un mtodo basado en la usabilidad debe disponer de un esquema claro y consistente, que permita ver claramente al usuario de este mtodo y que sirva como gua en todo momento para saber en que fase del desarrollo se encuentra y que posibilidades se tienen a partir de la fase actual de continuar su desarrollo.
Figura 13 Modelo de Proceso de la Ingeniera de la Usabilidad (MPIU).
El modelo (vase Figura 13), adems, no es extenso ni tiene muchos nodos y ramificaciones, que podran provocar desconcierto para el desarrollador, sino que muestra una idea lo ms clara posible del significado de todo el proceso a primera vista. Estas caractersticas bsicas son:
Organizacin Conceptual.
55
El esquema se encuentra organizado sobre la base de una serie de mdulos o nodos que determinan la fase del desarrollo en que nos encontramos y da una idea de las pautas a seguir durante el diseo de un sistema interactivo. Tres pilares bsicos. El objetivo del Modelo de Proceso es conseguir aunar el modelo clsico del desarrollo de la Ingeniera del Software con los principios bsicos de la Ingeniera de la Usabilidad. El esquema refleja claramente, con una codificacin en colores, los pilares bsicos de este modelo: Ingeniera del Software clsico representada en la columna azul de la izquierda y que muestra la integracin de la Ingeniera de la Usabilidad con esta disciplina, puesto que aparecen las cuatro fases principales del modelo de proceso clsico: anlisis, diseo, implementacin, instalacin. El prototipado, columna verde del centro, como metodologa que engloba tcnicas que permitirn la posterior fase de evaluacin. La evaluacin, codificada en amarillo a la derecha, que engloba y categoriza los mtodos de evaluacin existentes.
El usuario
Desde un primer vistazo al esquema, queda claro que es un proceso de diseo centrado en el usuario. Esto se refleja colocndole en la parte central y por encima del resto de nodos de todo el Modelo de Proceso.
Un mtodo iterativo
En todo proceso de desarrollo de software existe una fase ms o menos importante en la cual, a base de una serie de repeticiones, se pasa de una aproximacin de la solucin ideal a la solucin definitiva. Este proceso de repeticin en la Ingeniera clsica del software se produce en una fase ms tarda que en la Ingeniera de la Usabilidad, y suele ser ms 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, ms pequeas, se corresponden con el modelo clsico y las de color gris, ms grandes, indican cuando interviene el usuario, es decir, se corresponden con el modelo centrado en el usuario.
Podemos observar tambin que el modelo no sigue un sentido lineal ni restrictivo. Esto se debe a que es el diseador junto con los requisitos de desarrollo los que marcarn cuantos iteraciones son necesarias. A continuacin, detallamos los mdulos:
Anlisis de requisitos
En esta fase se formula el problema de diseo: se determina la audiencia y las plataformas destino, las metas de los usuarios y los requisitos tcnicos, as como las necesidades de los usuarios y los requisitos de usabilidad. Supone determinar, enumerar y clasificar todas las caractersticas, 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 (vase Figura 14).
56
MODELO DE PROCESO
Esta fase es tan inmensamente crtica e importante que de ella depender la buena continuacin del proyecto. Repercute directamente en la disminucin del numero de iteraciones necesarias para conseguir el proceso global y, en consecuencia, disminuir el coste del desarrollo tanto en tiempo como en recursos. Adems, si los requisitos no se definen correctamente, el cliente puede crearse falsas expectativas sobre el producto y finalmente quedar insatisfecho con el resultado.
Figura 14 Actividades del anlisis de requisitos.
Los mtodos de evaluacin ms comunes en esta fase son el anlisis 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 aplicacin del anlisis de requisitos al proyecto se cubre en el .
Diseo Conpetual
En la fase de diseo conceptual, debe alcanzarse una idea clara de cmo ser la interfaz de usuario y las relaciones con esta para desarrollar las especificaciones funcionales que sirvan de gua al diseo posterior. La interfaz determinar en gran medida la percepcin que el usuario tendr de la aplicacin (vase Figura 15).
Figura 15 Actividades del diseo.
Cada tipo de interfaz tiene sus propias particularidades de su campo de aplicacin. Son especificaciones que hay que tener en consideracin en el
57
momento de crear e implementar los prototipos. Sin embargo, cabe tenerlos presentes en la etapa de diseo porque pueden afectar a las funcionalidades de la interfaz y pueden venir determinadas por los requisitos del sistema a desarrollar. Mtodos tpicos de diseo incluyen los Casos de Uso, Anlisis de Tareas y la Arquitectura de la Informacin (AI), que se refiere al diseo, organizacin, etiquetado, navegacin y sistemas de bsqueda que ayudan a los usuarios a encontrar y gestionar la informacin de manera efectiva [ROS98]. El caso particular de diseo conceptual de sitios web y la aplicacin en nuestro proyecto se expondr en el .
Prototipado
Los prototipos son documentos, diseos o sistemas que simulan o tienen implementadas partes del sistema final a desarrollar. Los prototipos son cruciales para disear un buen sitio web, facilitan la planificacin del proceso de creacin, reducen el coste de las evaluaciones, aumentan su efectividad y evitan graves errores en el diseo (vase Figura 16).
Figura 16 Actividades del prototipado.
El solo propsito de crear estos prototipos es dar la oportunidad de evaluar el diseo prematuramente. El objetivo es producir estos prototipos rpidamente y evaluarlos eficazmente para que puedan ser refinados, elaborados y reevaluados antes del producto final. Entre los mtodos comunes de evaluacin en esta fase incluyen los test con los usuarios y los focus groups. Se cubre en el .
Evaluacin
En cada fase de desarrollo, se necesita algn tipo de realimentacin del sistema, puesto que queremos identificar tan rpidamente como sea posible cuando el proceso de diseo se desva hacia un mal camino (vase Figura 17).
58
MODELO DE PROCESO
Figura 17 Lista de posibles actividades de evaluacin.
Inspeccin
El trmino inspeccin aplicado a la usabilidad aglutina un conjunto de mtodos para evaluar la usabilidad en los que hay unos expertos conocidos como evaluadores que explican el grado de usabilidad de un sistema basndose en la inspeccin o examen de la interfaz del mismo. Existen varios mtodos que se enmarcan en la clasificacin de evaluacin por inspeccin. Los ms importantes son:
Heurstica. Mtodo desarrollado por Nielsen [NIE94] y Molich [MOL90] que consiste en analizar la conformidad de la interfaz con unos principios reconocidos de usabilidad (la heurstica) mediante la inspeccin de varios evaluadores expertos. La aplicacin del mtodo se basa en validar las 10 reglas heursticas de usabilidad conjunto revisado de reglas heursticas de usabilidad a partir del anlisis de 249 problemas de usabilidad [NIE94] por dichos evaluadores. Recorrido de la Usabilidad Plural. Mtodo desarrollado por Bias [BIA95] en los laboratorios IBM. Las principales caractersticas de este mtodo son que se realiza con tres tipos de participantes que evalan el modelo a partir bsicamente de prototipos de papel y con una especie de debate final entre los participantes. Recorrido Cognitivo. Este mtodo de inspeccin de la usabilidad se centra en evaluar la facilidad de aprendizaje del sistema. Se realiza bsicamente de la forma que la mayora de los usuarios prefieren o suelen aprender software: por exploracin [WHA94]. Los revisores evalan una propuesta de interfaz en el contexto de una o ms tareas especficas. Estndares. Para evaluar este mtodo se precisa de un evaluador que sea un experto en el o los estndares a evaluar. Dicho evaluador va pasando por la interfaz comprobando el cumplimiento o incumplimiento de dichos estndares.
Indagacin
El proceso de indagacin trata de llegar al conocimiento de una cosa discurriendo o por conjeturas y seales. En los mtodos de evaluacin realizados por indagacin 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 mtodos de evaluacin por indagacin son:
Observacin de campo. La observacin de campo la describe Nielsen [NIE93] en base al trabajo que se realiza al visitar el lugar o lugares de trabajo donde se estn realizando las actividades objeto de nuestro estudio
59
y donde se encuentran los usuarios representativos. El principal objetivo consiste en observarlos para entender cmo realizan sus tareas y qu clase de modelo mental tienen sobre ellas. Esta informacin ser completada con preguntas y/o entrevistas personales. Este mtodo se puede utilizar en las etapas de prueba y del despliegue del desarrollo del producto. Focus Group. El Focus Group [NIE93] o Grupo de Discusin Dirigido es una tcnica de recoleccin de datos donde se rene 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 informacin que necesita de la discusin. Esto permite capturar reacciones espontneas e ideas de los usuarios que evolucionan en el proceso dinmico del grupo. Entrevistas. Entrevistar a los usuarios respecto de su experiencia con un sistema interactivo resulta una manera directa y estructurada de recoger informacin. Adems las cuestiones se pueden variar con tal de adaptarlas al contexto. Las entrevistas aportan informacin muy valiosa sobre aspectos que a veces no son tenidos suficientemente en cuenta por los diseadores. 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 tcnica del logging o grabacin de uso se basa en grabar o recoger todas las actividades realizadas por el usuario con el sistema para su posterior anlisis. Para ello es preciso de una aplicacin secundaria que realice automticamente esta labor que pase, adems, totalmente desapercibida por el usuario. Cuestionarios. El cuestionario es menos flexible que la entrevista, pero puede llegar a un grupo ms numeroso y se puede analizar con ms rigor. Se puede utilizar varias veces en el proceso de diseo. Y, como tambin 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 ambigedades que puedan confundirlos.
Test
En los mtodos de usabilidad por test usuarios representativos trabajan en tareas utilizando el sistema o el prototipo y los evaluadores utilizan los resultados para ver cmo la interfaz de usuario soporta a los usuarios con sus tareas. Los principales mtodos de evaluacin por test son:
Medida de las Prestaciones. Este mtodo tiene como primer objetivo el mejorar la usabilidad del producto gracias a realizar el test con usuarios -personas o grupos- reales realizando labores habituales tambin reales. Thinking Aloud. En este mtodo de evaluacin 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 diseo y la funcionalidad del sistema. Interaccin 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 podan quedar cosas en la mente del usuario. Suele aportar ms y mejor informacin que su antecesor. Test Retrospectivo. Esta tcnica realmente es un complemento de las dems, ya que se trata de realizar alguno de los mtodos anteriores, grabarlo en vdeo y analizar dicha grabacin 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. Mtodo del Conductor. En los mtodos anteriores el usuario suele ir a su aire y el evaluador analiza los resultados a posteriori. En este mtodo el evaluador conduce al usuario en la direccin correcta durante su uso del sistema.
Implementacin
En la fase de implementacin o produccin, 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 programacin que mejor se adapten a nuestro proyecto, las bases de datos correspondientes que se precisen, la tecnologa que garantice el xito, etc. Se desarrollan los grficos y textos definitivos y el sitio debe ser codificado. Esta etapa corresponde exactamente a la que se describira en la Ingeniera del Software clsica, puesto que la Ingeniera de la Usabilidad no trata de cmo programar un producto interactivo, sino de la metodologa para conseguir un producto usable. Mtodos de evaluacin comunes en esta fase incluyen test con los usuarios, Quality Assurance y test de campos. Los temas de produccin/implementacin 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 crticas 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 percepcin que el usuario final del producto tiene un peso especfico 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 cmodo con el sistema. Entendiendo cmo sentirse cmodo el que no le d errores, que no le resulte complicado usarlo, que recuerde fcilmente donde estn las diferentes opciones y sus funcionalidades, etc., y por otro lado que los responsables obtengan los resultados esperados. El ciclo de vida de la Ingeniera de la Usabilidad asegura que ambos aspectos se vean satisfechos puesto que:
61
el diseo se ha hecho en base y para los usuarios, hacindoles partcipes del mismo se consigue un efecto doble, por un lado cmo se sienten responsables en parte de dicho diseo 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 mtodos clsicos, la evaluacin 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 ms importante es lo que se suele conocer como User Feedback (reaccin o realimentacin del usuario) [MAY99]. Feedback del usuario. Una vez el producto ha sido instalado y puesto en explotacin 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 satisfaccin total. Podramos pensar que como el sistema se ha desarrollado siguiendo el modelo de proceso centrado en el usuario esta etapa debera 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 implementacin de futuras revisiones del producto. proporcionar una entrada para el diseo y desarrollo de productos relacionados que sern utilizados por los mismos usuarios o de caractersticas 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
APLICACIN DEL MODELO
PLANIFICACIN EVALUACIN
Evaluacin anterior a los prototipos Evaluacin de los prototipos Evaluacin posterior
GLOSARIO
A lo largo de esta seccin detallaremos y documentaremos tanto el proceso de elaboracin como los resultados obtenidos de la aplicacin del Modelo de Proceso de la Ingeniera 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 especficos del proyecto en concreto. Hay que tener muy presente que aqu se presenta una agrupacin y ordenacin de los resultados de las tcnicas empleadas, los documentos escritos, las caractersticas implementadas y las decisiones tomadas y que se han ido produciendo e iterando durante todo el proceso. Es decir, que aunque la informacin se presente secuencialmente, es el resultado de la clasificacin de los elementos de informacin 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. PLANIFICACIN La estimacin suele resultar especialmente difcil, porque slo puede realizarse de forma rigurosa si se tiene implantado un buen sistema de medicin sobre proyectos anteriores; y aun en ese caso pasa por fases de progresiva precisin, pero inicialmente hay que admitir un abultado margen de error. En la prctica, 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 situacin 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 solucin satisfactoria, lo mejor que tenemos es el criterio del desarrollador. Una estimacin no se negocia. Hay que dividir las tareas hasta llegar a un tamao muy pequeo, y estimar esas minitareas. La estimacin final se obtiene combinando las parciales.
En el apndice PLANIFICACIN DEL PROYECTOPLANIFICACIN DEL PROYECTO, se adjunta una planificacin inicial y su correspondiente diagrama de Gantt. Tambin se incluye un diagrama que representa la evolucin temporal del proyecto a travs de las diferentes iteraciones en las fases del Modelo de Proceso de la Ingeniera de la Usabilidad, detallando cada una de las tareas realizadas en cada etapa y en cada momento. EVALUACIN La evaluacin de la usabilidad debe estar presente en cada etapa del ciclo de diseo y durante todo el desarrollo para verificar la buena marcha del proyecto. Para ello, debemos primero identificar los problemas y entonces
Captulo 4: Aplicacin del modelo
65
sugerir soluciones prcticas para mejorar la usabilidad del sitio. Despus 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 consideracin: los usuarios pueden no estar presentes para realizar las pruebas de usabilidad o incluso, puede que no tengamos idea de quienes podran ser. Realizar un Diseo Centrado en el Usuario sin el usuario no es ciertamente imposible. Existen tcnicas para realizar pruebas de usabilidad sin que los usuarios estn fsicamente presentes [MCD99]. Adems, aunque consideraremos la evaluacin durante todos los ciclos del modelo de proceso, detallaremos realmente los mtodos de usabilidad seguidos en cada fase, que sern comentados en sus respectivos captulos. La evaluacin, en su mayor grado, ir estrechamente unida a la etapa de generacin de prototipos, en el . A partir del anlisis y evaluacin de estos prototipos, ser posible la creacin de una versin nica del sitio web que a su vez, ser nuevamente evaluada y modificada. Existen diferentes mtodos de evaluacin de sitios web que varan en su rigurosidad, costes y conocimientos necesarios para llevarlas a cabo. La estrategia de evaluacin ms aconsejable [MAN02c] es combinar una evaluacin heurstica con un test de usuarios posterior, por considerarlas las tcnicas ms eficientes, prcticas y asequibles:
Evaluacin heurstica. Evaluadores expertos en los heursticos (principios) de la usabilidad evaluan el sitio y elaboran un informe siguiendo esos principios. Es uno de los mtodos ms informales, pero se considera como uno de los principales por su excelente relacin calidad/coste. En la mayora de los casos se debe realizar antes del test de usuarios. Test de usuarios. A travs de la observacin y registro del comportamiento de los usuarios en tareas previamente encomendadas, se extrae la informacin sobre la usabilidad de un sitio web. El test de usuarios es el tipo de evaluacin ms importante y la mayor herramienta de desarrollo posible para un sitio web. Adems de descubrir problemas y potenciales mejoras para un sitio web, es la manera ms cercana de aproximarse al uso real de ste.
Evaluacin anterior a los prototipos
En primer lugar se requiere una adecuada planificacin para lo que tanto el enfoque persona y la creacin 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 proposicin de valor es atractiva. Y puede ser una buena manera de probar los nombres que se estn usando para los elementos del sitio, y para averiguar qu siente el pblico 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 ms bajo, como son las encuestas-cuestionarios y un anlisis competitivo.
Evaluacin 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 evaluacin con los usuarios y la realimentacin. Desarrollaremos un sistema de mltiples borradores que refinaremos progresivamente hasta alcanzar una opcin nica lista para la produccin. Cada refinamiento ser consecuencia directa de una prueba de usabilidad, bien heurstica 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 pginas individuales) y se le pedir que (a) averige 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 evaluacin de la usabilidad mediante test de usuarios. Steve Krug afirma que para la mayora de los sitios, lo que realmente se necesita es gente que haya usado la Web lo suficiente para conocer lo bsico, es prcticamente decir que no importa a quien se pruebe y que ms 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 evaluacin heurstica previamente, realizaremos antes de cada prueba con los usuarios una evaluacin heurstica de los prototipos a evaluar para, de una manera rpida, detectar a bajo coste los errores de usabilidad. Un sitio que no haya pasado por evaluacin heurstica previa suele estar plagado de errores y en estas condiciones el test de usuarios descubre nicamente los errores de bulto en el diseo, pero no es capaz de aportar informacin realmente valiosa que justifique su alto coste. Un experto puede detecar rpidamente 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].
Evaluacin posterior
En estas fases se incluyen mtodos de evaluacin basados en garantizar la calidad (QA) y mtodos de evaluacin automatizados. Existen una serie de datos que pueden ser recogidos automticamente por programas especficos, como el tiempo de descarga, la validacin del cdigo HTML, el estado de los enlaces y la accesibilidad para discapacitados. Adems, deberemos analizar los logs generados por el servidor y el posterior mantenimiento y realimentacin con los usuarios tras el lanzamiento.
Captulo 4: Aplicacin del modelo
67
GLOSARIO En el apndice GLOSARIO DE TRMINOS RELACIONADOS CON LA MSICA ELECTRNICA se incluye un glosario con los trminos ms comunes referentes a la escena musical electrnica.
68
CASO DE ESTUDIO
5
CASO DE ESTUDIO
ANLISIS DE REQUISITOS
ANLISIS ETNOGRFICO
Msica electrnica de baile Dinmica recreativa juvenil Objetos y contexto de accin
ANLISIS DE LOS IMPLICADOS ACTORES, ROLES Y ORGANIZACIN PLATAFORMA

Hardware y Sistemas Operativos Navegadores Monitores Velocidad de conexin
OBJETIVOS DE LA USABILIDAD OBJETIVOS DE LA APLICACIN ENCUESTAS, ESCENARIOS Y ANLISIS COMPETITIVO

Escenarios Anlisis competitivo Encuestas
Un diseo centrado en el usuario debe iniciarse conociendo quienes son nuestros usuarios. En esta fase inicial del proyecto estableceremos, de la manera ms precisa que podamos, la audiencia destino. Con la ayuda de encuestas, un anlisis etnogrfico, un anlisis de los implicados, los actores, sus roles y organizacin, junto con un enfoque persona y el uso de escenarios, identificaremos a nuestra audiencia y sus objetivos y necesidades. No slo bastar con entender los atributos personales de la audiencia, deberemos tambin investigar las configuraciones de hardware y software de los usuarios. A pesar de los nobles intentos por hacer las tecnologas web transparentes, las diferentes plataformas todava juegan un rol significativo. Definiremos las plataformas objetivo y las restricciones tcnicas. Por ltimo, basndonos en estas necesidades y requisitos, especificaremos detalladamente los objetivos de la aplicacin y los requisitos de usabilidad. No sin antes haber realizado un anlisis competitivo de otros portales web con nuestros mismos intereses. ANLISIS ETNOGRFICO Los jvenes de hoy se han socializado dentro de los parmetros de una sociedad del bienestar donde la experiencia del ocio se concibe como una necesidad y casi un derecho fundamental del individuo. Para muchos jvenes la diversin y el ocio tienen que ver con actividades relacionadas con la msica y el baile. A lo largo de esta dcada, la cultura de club y la msica electrnica han dejado de ser un fenmeno de minoras para entrar por la puerta grande de la cultura en maysculas.
Msica electrnica de baile
La msica electrnica engloba una gran variedad de estilos musicales que plantea, dentro del anlisis etnogrfico, la necesidad de definir un concepto/trmino suficientemente objetivo, genrico y vlido como para designar y englobar la multiplicidad de estilos musicales que son producidos de forma electrnica (es decir, mediante la utilizacin y la aplicacin de nuevas tecnologas) y que ligan con la esencia de la club culture. En primer lugar, desestimamos la propuesta terica de varios autores que enfatizan el uso del trmino techno para referirse indistintamente a la multiplicidad de estilos musicales electrnicos, ya que, desde nuestro punto de vista, plantea una profunda confusin en el mbito de contenidos estilsticos: techno se refiere ms a una etiqueta formulada para un especfico estilo musical, no para denominar todo el panorama electrnico. En segundo lugar, si bien ya hemos empleado la expresin msica electrnica, consideramos que no resultara plenamente vlida en el tratamiento del clubbing, puesto que tambin integra la dimensin de la msica culta contempornea (clasicismo contemporneo) provocando cierta indeterminacin cuando se tratasen los dos mbitos a la vez. Sin embargo, al ser una expresin ampliamente difundida y aceptada en la literatura especializada y en los mass media, mantendremos puntualmente su utilizacin, dando prioridad al concepto formulado por Peter Jowers electronic dance music, el cual consideramos que posee el grado de precisin, objetividad, validez y visin genrica adecuados
Captulo 5: Anlisis 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 produccin electrnica y tecnolgica y, por el otro, la nocin de dance music, indispensable e inherente al nightclubbing, pues el baile y la msica 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 pblicas, el gerente del club, el discjockey, etc.).
Dinmica recreativa juvenil
Para un anlisis somero de las tareas que comprenden la dinmica recreativa de los jvenes, es necesario tener presente la idea de que los jvenes elaboran distintos modelos de diversin. Algunos experimentan la diversin recreativa de forma dogmtica, es decir, como el centro de inters de sus vidas, una necesidad dominante y excluyente de otras experiencias y que legitima todos los medios para alcanzarla. Los jvenes que experimentan la diversin 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 jvenes que limitan sus amistades a aquellos que comparten tambin esa misma actividad. Otros jvenes experimentan la diversin nocturna de forma eclctica, son los jvenes que tambin se divierten saliendo de marcha por las noches, pero para los que existen adems otras reas de inters 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 jvenes la diversin 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 jvenes ms dogmticos y los ms eclcticos hay un amplio abanico de gradaciones donde situar la dinmica que desarrolla cada tribu. Toda la actividad de estos jvenes 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 poblacin es nmada 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 bsqueda de nuevas estticas. En este punto, es necesario puntualizar que dentro de este universo, club no es equivalente a discoteca. Estas ltimas son locales de diversin 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 msica: techno, trance, acid-jazz, hip-hop, house, jungle, etc. De igual forma, dentro del crisol de modalidades existentes, las hay mas propicias para ser escuchadas de forma individual, como el trip-hop, el deephouse o el intelligent techno (calificadas como msicas easy listening o mas concretamente "msica electrnica para ser escuchada"), o bien, estilos que por su ritmo, duracin y tensin, estn especialmente adaptados a su 72
CASO DE ESTUDIO
ejecucin y disfrute colectivo dentro o fuera del club, aunque en su origen los padres del techno europeo (Kraftwerk, vase Figura 18, New Order, etc.) albergaran intenciones ms intelectuales y menos ldicas.
Figura 18 Kraftwerk, los padres del techno europeo. En una actuacin en 1976 (a) y ms de veinte aos despus, en un concierto en 1998 (b).
(a)
(b) A diferencia de lo que ocurre en Europa los espaoles son ms eclcticos en cuanto a gustos musicales y no se han especializado tanto en cultivar la msica house y todos los subestilos que engloban. Es por ello, que desde culturanocturna.com ofreceremos un contenido informativo ms orientado a la especializacin musical que a la cara meramente ldica, puesto que, por ejemplo, en Espaa cuando se habla de house o dance se hace referencia a un conjunto de subestilos musicales, desde los ms comerciales conocidos como msica mquina o bakalao hasta los ms elitistas o alternativos. En Espaa donde ms se notan las influencias es en Barcelona, bsicamente por su extensa y cualificada cultura de club y en las fiestas y salas punteras del pas, donde el presupuesto permite adoptar por una noche a grandes artistas.
73
Objetos y contexto de accin
El ocio basado en la msica electrnica 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 promocin se realiza a travs de un marketing publicitario que ha creado distintos materiales de difusin como psters o postales (flyers, vase Figura 19) que se adquieren de forma gratuita. Mediante los cuales puede apreciarse que las ofertas son muy diversas y estn presentadas de manera muy atractiva, convirtindose esta misma publicidad en un producto cultural que da identidad a grupos de jvenes.
Figura 19 Flyers.
Ejemplo de dos flyers con los que el club fragatino Florida 135 informa de su programacin.
(a)
(b)
Son especialmente significativos los flyers, pequeas hojas dotadas de informacin sobre la programacin de un evento, con contenidos repletos de inters sobre las actuaciones y con un diseo llamativo e inusual. Es la manera con la que los clubbers estarn informados de los distintos eventos programados en una sala en concreto. Los flyers se encuentran distribuidos por distintos lugares relacionados con los jvenes, tales como tiendas de ropa, de discos, peluqueras, bares y otros clubs. Gracias a la recoleccin 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 asistirn. Por su parte, el club basar gran parte de su xito en el artista o artistas que ofrece en su programacin, acorde al estilo que acostumbra a cubrir la sala y a la formacin de estructuras econmicas ligadas a la creacin y a la difusin musical -firmas discogrficas, organizacin de fiestas, etc-.
74
CASO DE ESTUDIO
En este contexto aparece la figura del administrador de los sonidos y conductor de las sesiones de baile: el DJ o antiguo discjockey, tomando entonces una relevancia especial, pues se ha convertido en la figura ms representativa del panorama musical, llegando a veces, a relegar a un segundo plano la msica que pinchan. Si en otras pocas, los interpretes, autores y productores protagonizaban la creacin musical, en la actualidad estos personajes han perdido gran parte de su brillo a favor de estos "modernos encantadores" que estn sujetos a un destacadsimo proceso de reconocimiento pblico y de valoracin social, hasta el punto de ser considerado como uno de los artfices de la nueva vanguardia popular [BEL97]. Una dinmica que ha significado, a su vez, una verdadera legitimacin dentro del mbito musical, provocando el surgimiento de un nuevo rol social, de un nuevo concepto de profesionalidad artstica vinculada a las nuevas tecnologas alrededor de la actividad y significacin del discjockey. Esta reciente popularidad que han adquirido promueve, no slo la mayor o menor asistencia de pblico, sino un inters por conocer ms sobre los creadores/productores de esta msica. Aunque no podemos negar que favorece una tmida aparicin del star system respecto a los DJ, tmida si la comparamos con la de las otras msicas pop, lo cierto es que la admiracin creada a su alrededor motiva la generacin de informacin sobre biografas, entrevistas y otro material relativo al DJ. La prensa especializada es muy escasa, prcticamente inexistente si buscamos contenidos exclusivos, y la forma en la que los interesados se abastecen de estos datos es a travs de los flyers y masivamente a travs de Internet. La msica electrnica 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 comunicacin para la msica electrnica. ANLISIS DE LOS IMPLICADOS Ya se ha comentado que uno de los grupos sociales que ms de ha apropiado del espacio del ocio son los jvenes, que para facilitar su descripcin dividiremos en cuatro subgrupos [IRE99]: Los ms jvenes, prcticamente adolescentes, que no seran una masa crtica 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 mnimo. El grupo propiamente dicho de los jvenes. Es el grupo ms difcil de definir por ser el ms numeroso y heterogneo. Pueden definirse como jvenes normativos puesto que participan del espacio y tiempo que adquiere ms intensidad cuando se sale de marcha. Tienen un estatus socioeconmico medio y medio alto, formado por muchos estudiantes, especialmente universitarios, profesionales y jvenes con un cierto poder adquisitivo. Otro grupo son los alternativos, que suelen ser mayores de edad y compartir actividades de carcter reivindicativo. Estos jvenes estn estrechamente unidos al fenmeno rave. Las raves se han considerado un fenmeno social muy importante y se han analizado como un movimiento juvenil reivindicativo, y como una necesidad de algunos grupos de jvenes de tener un espacio propio. En Espaa 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 jvenes estn activos sin embargo estos
75
alargan la vida nocturna unas cuantas horas ms, a veces todo el fin de semana. En esos ambiente tambin participan trabajadores de la vida recreativa cuando terminan la jornada laboral, los camareros, discjockeys, msicos, relaciones pblicas, 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 jvenes son polivalentes, individuos muy integrados socialmente, pertenecen bsicamente a la clase media o media-alta, la gran mayora trabajan o estudian con un nivel de estudios alto en general, con una ligera mayor proporcin 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, segn el cual es joven la persona fisiolgicamente madura que todava no posee ocupacin productiva estable, cnyuge estable, domicilio propio estable ni descendencia conviviente [CAL84] muchos jvenes espaoles ya entrados en los treinta aos aun pueden considerarse jvenes. Consideraremos a este grupo de implicados como nuestra masa crtica 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 artstica. Formarn parte de este grupo promotores y dueos de salas y eventos, relaciones pblicas, DJs (vase Figura 20), productores/creadores, etc. Analizaremos detenidamente estas lneas base de implicados.
Figura 20 La figura del DJ. Actualmente, la figura del DJ va ms all de la mezcla de una sucesin de discos.
76
CASO DE ESTUDIO
Puede decirse que actualmente la alta tecnologa instrumental que permite or, sintetizar, grabar o manipular las piezas musicales ha permitido el despegue de una nueva cultura musical. Los jvenes tienen mayor acceso al instrumental musical, lo que ha creado una nueva profesin y cultura donde la mezcla de piezas musicales, sampleados, deviene todo un arte. Podemos hacer una distincin que acostumbra a solaparse entre productor y discjockey. Los discjockeys (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 heterogneas. Probablemente lo que otorga mayor significado a la creacin de los DJ es que su logro es efmero, del momento, nico e irrepetible. Cada DJ crea mezclas distintas de espritu mestizo y eclctico. Este lugar central que ocupa en el mundo del clubbing, hace que se le considere la pieza ms importante en nuestro sistema, pues es la personalizacin de la msica electrnica. Acta tanto de implicado proveedor, como de cliente. En el mundo de la msica electrnica se distorsiona la frontera autor/pblico: en primer lugar, constituye la apertura de la creacin musical a aquellos que no son msicos. El uso de las tecnologas y la eleccin de las herramientas de composicin depende la mayora de las veces de la accesibilidad y del precio, como el ejemplo de los sintetizadores analgicos Roland, utilizados por los pioneros del house en Chicago y Detroit, que eran ms baratos que sus homlogos digitales. As, cualquiera con un mnimo equipo tcnico, un ordenador con los programas adecuados, un sampler o incluso una grabadora, puede hacer msica desde casa, en el home studio, y encontrar una estructura independiente para grabar, difundir y programar esta msica, o hacer lo mismo a travs de las herramientas informticas. Esta accesibilidad de los medios de composicin y difusin hace que la creacin musical sea ms abierta y favorezca la comunicacin entre el mundo de los autores y el del publico. La disposicin de material sonoro en la red, que no slo suponen la difusin directa entre el autor y el oyente sino la posibilidad que este ultimo retrabaje la pieza, le aada sonidos o los quite, modifique o recree lo que escucha, acenta este elemento. Muchos msicos electrnicos 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 msicas pasadas son reutilizadas y recreadas en las nuevas composiciones, estas pasan a formar parte del mismo movimiento, como ponen de relevo los mltiples remixes o su difusin en la red para favorecer esta dinmica de reutilizacin. La implicacin que supone la creacin y la difusin musical crea estructuras econmicas a su alrededor, como los sellos discogrficos y la organizacin de fiestas. Por un lado, el desarrollo de la industria y la difusin de msica electrnica de una manera ms artstica que econmica se promueve gracias a los sellos discogrficos. Por primera vez en la historia de la msica, y gracias a la electrnica, los sellos discogrficos son referencia, y a menudo emblema, para los compradores de msica contempornea. Por esta parte, se descubren nuevos personajes implicados como los dueos de estos sellos y de tiendas de discos, distribuidoras y programadores musicales de cadenas de radio.
77
Por el otro lado, la organizacin de fiestas rene a todo un abanico de implicados, entre los que se incluyen los promotores musicales y dueos de salas, managers de clubs y bares, y las relaciones pblicas. Debemos adems resaltar la importancia de las relaciones pblicas de los diversos clubs. Su labor de contacto y promocin del local al que representan facilita el acceso a informacin valiosa sobre las actuaciones que ofrecern (imgenes, biografas, programacin). Actan como puerta de enlace entre la direccin de un club y la prensa especializada y su relevancia es fundamental a la hora de conseguir acreditaciones para cubrir un evento. Adems, su trabajo de documentacin para con su empresa la convierten no slo en un implicado proveedor sino en posible cliente de nuestro proyecto. Por ltimo, consideraremos a los responsables del diseo, el desarrollo y el mantenimiento un grupo de implicados ms 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 diseado y desarrollado, el sitio web ser mantenido por un grupo de personas hacia el que migrar el grupo de programacin que ya ha desarrollado el portal. ACTORES, ROLES Y ORGANIZACIN Previamente habamos esbozado una pequea organizacin en torno a los implicados que consista en dividirlos en lo que llambamos 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 inters y por otro la posicin profesional, por lo que estos tres tipos de actores pueden compartir un rol comn y genrico como visitantes del sitio. Una audiencia destino cuyas tareas se corresponden con la navegacin, bsqueda de informacin y participacin en la comunidad. Adems, son los mismos actores quienes desarrollarn un rol temporal y de extrema importancia para la Web, la colaboracin. Una tarea ms propia de la comunidad clubber, aunque llevada a cabo de manera ms 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 colaboracin directa para la propia comunidad clubber. Una masa crtica de audiencia objetivo que no son vctimas 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 ms modernas tecnologas, especialmente aquellas que tienen que ver con la comunicacin. 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 surgirn activos digitales contenidos, conocimientos, informacin comentada e instantnea...- de inters para nuestro pblico objetivo. Estos datos sern manejados por los editores, que podrn actualizar 78
CASO DE ESTUDIO
dinmicamente el sitio a travs del sistema, ya que sern usuarios con privilegios a los que asignaremos la administracin de secciones especficas, como las noticias, artculos, foros... etc. En resumen, esencialmente sern los profesionales y la comunidad clubber quienes en su rol de colaboracin generen una informacin que ser transformada en activos digitales por los editores. PLATAFORMA Como resulta imposible crear un diseo ptimo para todo el mundo, ser necesario identificar las plataformas de nuestra audiencia destino, con el fin de evaluarlas minuciosamente. Consideraremos adems a un pblico relativamente ms minoritario, para asegurarnos que el sitio se adecuar, aunque no tan eficazmente, a plataformas menos implantadas. En el apndice ESTADISTICAS podemos encontrar las estadsticas que hemos utilizado para el anlisis de las plataformas objetivo.
Hardware y Sistemas Operativos
Sin duda, aunque Windows PC es la plataforma ms comn, hay que considerar que otras plataformas juegan un rol significativo en nuestra poblacin objetivo. Si bien es cierto que las industrias pueden tener un uso muy pequeo del Mac, Mac tiene un share de mercado ms alto en produccin 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 variacin entre los browsers (vase Figura 21) es extraordinariamente difcil de llevar al da. Si bien la inmensa mayora usan el Internet Explorer (versin 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 evaluacin prolongada. Por otra parte, un 6 % de los usuarios de la web no tienen JavaScript habilitado. Si basamos nuestros trabajos exclusivamente con mens de esa tecnologa, no podrn navegar. Sin embargo, si es necesario su uso, podremos implementar con la versin 1.2.
Monitores
Prcticamente la mitad de la poblacin utilizan una resolucin de 800 x 600, con lo que ser conveniente probar a fondo nuestro sitio a esa definicin adems de evitar la aparicin de scrolls horizontales. Es fundamental tambin darle la misma importancia a resoluciones de 1024x768. As como evaluar minuciosamente definiciones de colores de 16 bits (65.000 colores).
79
Figura 21 Navegadores ms usados.
Velocidad de conexin
Un tiempo largo de descarga es uno de las quejas de usabilidad ms frecuentes. Las conexiones de alta velocidad ms 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 mnimo 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 utilizarn Internet Explorer 5.0 o posterior. Un nmero inferior de visitantes utilizar Netscape Navigator y una plataforma Macintosh. En cuanto a la plataforma de implementacin, utilizaremos un backend fabricado con tecnologa Open Source: Apache + MySQL + PHP, del que ya hemos hablado especficamente en el . OBJETIVOS DE LA USABILIDAD A continuacin listamos los principales objetivos para determinar que nuestros usuarios dispondrn de un buen funcionamiento del sistema:
80
CASO DE ESTUDIO
Facilidad de aprendizaje:

Nuestros usuarios sern capaces de usar la web la primera vez sin ningn tipo de aprendizaje. La interfaz ha de ser simple, fcil de aprender y utilizar, con funcionalidades accesibles y bien definidas.
Consistencia:
Primaremos el uso de convenciones de diseo siempre que sea posible. Los usuarios se vern presionados a recordar cualquier truco especial de interaccin de una visita a otra, dada la cantidad de tiempo que dedicarn a visitar otros sitios web. Para entonces, los usuarios habrn acumulado un modelo mental genrico de la forma en que deben funcionar las pginas web, en base a sus experiencias en los dems sitios. Utilizaremos y crearemos guas de estilo, que permitirn alcanzar la consistencia del look & feel del sitio. En el texto evitaremos los fondos oscuros y los colores llamativos. Tambin evitaremos subrayar las palabras, porque un usuario las podra confundir con hipervnculos. Subrayaremos los vnculos y usaremos el azul como el color para los vnculos no visitados. Si los vnculos son azules, los usuarios sabrn que hacer. Excepto en las barras de navegacin que utilicen un diseo que deje ms que claro dnde puede hacer clic el usuario.
Flexibilidad: Evitaremos requerir escritura cuando un botn de seleccin 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 caracterstica. Esta caracterstica tambin 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 botn de abajo. Minimizaremos en lo posible el uso de DHTML o Java. Elementos como los rollovers o pop-ups no estndares son difciles de interpretar para los programas lectores de pantalla. Recuperabilidad: Hay que contemplar los errores del usuario. Debe haber una retroalimentacin apropiada del sistema. Crearemos pginas de error tiles y que permitan al usuario saber donde est. Tiempo de respuesta: El tiempo mximo de descarga ha de ser de 10 segundos a la velocidad de conexin media de los usuarios. Disminucin de la carga cognitiva:
81
El usuario debera alcanzar cualquier pgina en el menor nmero posible de clics de ratn, a ser posible menos de 3. Aunque no importa el nmero de veces que hay que hacer clic en algo si la opcin es mecnica e inequvoca.
Esttica: Es preciso proporcionar un entorno agradable que contribuya al entendimiento por parte del usuario de la informacin presentada. En una escala del 1 (muy agradable) al 7 (nada esttico), los usuarios valorarn el sitio al menos con un 4. Accesibilidad: La inclusin de texto ALT en las imgenes es la ms 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 imgenes. 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 difcil, evitaremos al mnimo el uso de colores rojos y verdes para ayudar a los usuarios daltnicos (el 8% de los hombres y 0,5% de las mujeres de Europa y Norteamrica 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 tamao de las fuentes para una lectura optimizada, utilizando tamaos relativos. Ofreceremos contenido alternativo si las funciones de los scripts, applets y plugins no son accesibles. OBJETIVOS DE LA APLICACIN Esta claro que si los usuarios simplemente no pueden hacer algo que necesitan hacer, entonces el sistema no es usable. Los objetivos de la aplicacin dependen directamente del rol del usuario y sus accesos. Revelamos a continuacin una lista de los requisitos funcionales para el visitante del sitio, resultado de una revisin exhaustiva de las fases anteriores:
No utilizaremos pginas de enrutamiento o intermedias. Una pgina de enrutamiento es una pgina que ven los usuarios antes de acceder a la verdadera pgina de inicio. Suponen un obstculo inicial que los usuarios tienen que superar, as que no cansaremos al usuario y agilizaremos la descarga prescindiendo de ella. El sistema debe actualizarse dinmicamente y gestionarse a travs a travs de la web. Aplicacin de consulta y bsqueda de eventos mediante una agenda o calendario. Ofrecer un foro de discusin para la comunidad. Proporcionaremos una opcin de bsqueda, habilitada en la parte superior de la pgina de inicio. Las bsquedas que resulten vacas incluirn sugerencias. Una seccin del sitio ofrecer enlaces o vnculos externos a sitios web que estn estrechamente relacionados con el contenido de la pgina y pueda ser de inters 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 revisin o crtica de los artculos. Incluiremos informacin 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 gestin de contenidos debe permitir a aquellas personas que no sean expertas en el desarrollo web actualizar y manejar el sitio a travs de la Red. Esta interfaz debe cumplir las siguientes especificaciones funcionales:

Administracin de gestin de contenido basada en Web; Administracin grfica; Facultad para aadir, modificar y borrar contenidos del sitio. Mantenimiento y gestin de la agenda de eventos: aadir, 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 seccin 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 programacin ser PHP + XHTML. Soporte de base de datos MySQL. En principio, el sitio no tiene intencin de cruzar los lmites nacionales. La audiencia es espaola, as que los contenidos sern realizados en castellano. Diez segundos es el tiempo mximo que pacientemente esperarn los usuarios mientras se descarga una pgina Web; ms all de este tiempo se suele perder el inters. La anchura de la pgina estar optimizada para 770 pxeles, pero con un diseo lquido que funcione desde 620 hasta 1024 pxeles. La longitud no tendr ms de 3 pantallas completas (actualmente de 1000 a 1600 pxeles). Al menos el 50 por ciento de los usuarios registrados volvern a visitar la web al menos un par de veces al mes.
ENCUESTAS, ESCENARIOS Y ANLISIS COMPETITIVO Nos ayudaremos de encuestas, escenarios y un anlisis competitivo para tener una mejor idea del verdadero perfil de nuestro usuario, sus necesidades y preferencias.
Escenarios
El enfoque persona y la creacin de escenarios son tcnicas que facilitan ponerse en el lugar del usuario y disear la web adecuadamente para este. Un escenario tpico incluye un perfil del usuario (llamado persona), un anlisis de las tareas que realiza y una foto del usuario en su entorno de uso del sitio.
83
Realizaremos tres escenarios para cubrir los usuarios primarios y los validaremos pidiendo a los usuarios que los representan que los revisen. En el apndice ESCENARIOS podemos encontrar el resultado de la creacin de los escenarios.
Anlisis competitivo
Un anlisis competitivo es un camino fcil y rpido para establecer un punto de partida en el diseo. Desde el punto de vista de la usabilidad, buscaremos buenas ideas de interfaz de usuario para aplicarlas a nuestro diseo. En el apndice ANLISIS COMPETITIVO podemos encontrar un anlisis competitivo de tres sitios web representativos de la escena musical electrnica, cuyo audiencia es nuestro mismo objetivo y cuyas metas de usuario son similares.
Encuestas
En el apndice CUESTIONARIO podemos encontrar la plantilla de encuesta que hemos utilizado como uno de los mtodos para conocer a nuestra audiencia. Este es uno de los mtodos ms familiares para los usuarios, ya que la mayora ha respondido alguna vez a alguna encuesta. Fijaremos un mnimo de 10 encuestas devueltas.
84
CASO DE ESTUDIO
6
CASO DE ESTUDIO
DISEO CONCEPTUAL
ANLISIS DE TAREAS ARQUITECTURA DE LA INFORMACIN

Revisin de material previo Evaluacin de nuestro contenido. Crear y evaluar nuestra estructura esencial Aadir atajos, vnculos redundantes, y pginas de apoyo Desarrollo y evaluacin de la barra de navegacin y seales de orientacin (orientation cues) Mantenimiento y expansin Casos de Uso
ELEMENTOS FUNDAMENTALES DE DISEO DE LA PGINA
Una vez establecidos los requisitos iniciales de nuestro sitio web, analizaremos y optimizaremos los procedimientos que los usuarios seguirn al usar nuestra web. El diseo 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 informacin. Con el anlisis de tareas vamos a especificar como se utilizarn las funcionalidades y la informacin encontradas en el anlisis de requisitos. Adems usaremos el anlisis de tareas como una herramienta de diseo al codificar los procedimientos del usuario. Por otra parte, la arquitectura de la informacin comprender los sistemas de organizacin y estructuracin de los contenidos, los sistemas de rotulado o etiquetado de dichos contenidos, y los sistemas de recuperacin de informacin y navegacin que proporcionar nuestro sitio web. Por ltimo, definiremos el estilo del sitio mediante un anlisis y consideracin de los elementos principales de diseo de pginas web, que seguirn unos principios heursticos de tcnicas de buen diseo. ANLISIS DE TAREAS Una vez determinados los requisitos iniciales, procederemos a analizar y optimizar los procedimientos que seguirn nuestros usuarios mientras usan nuestro sitio web. Para ello realizaremos un Anlisis 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 tpicos dependiendo de las metas que se quieran alcanzar:
Escenario Agenda. Figura 22 Diagrama del Escenario Agenda.
Muestra los actores involucrados en el proceso de obtencin de contenido para la agenda de eventos.
BUSCA CONTACTO CON EL CLUB PIDE PROGRAMACIN ENTREGA PROGRAMA Profesional OBTIENE PROGRAMACIN OBTIENE CONTACTO
Editor
Caso de Uso: Gestionar los Eventos Descripcin: El editor procesa la informacin que ha recibido de la programacin de un club Actores: Editor, Sistema
Captulo 6: Diseo conceptual
87
Caso de uso adicional necesitado: Login y Bsqueda 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 administracin. 3. El editor identifica el vnculo de la seccin de administracin de la agenda. 4. El editor hace clic en ese vnculo. 5. El sistema muestra la pgina agenda con habilitacin para administracin. 6. El editor selecciona el da del evento (sigue el caso de uso Bsqueda de eventos en la agenda. 7. El editor identifica la zona donde aadir el evento y hace clic en el vnculo. 8. El sistema muestra un formulario de entrada de datos. 9. El editor rellena el formulario de entrada y presiona el botn de confirmacin. 10. El sistema guarda los datos y muestra la informacin como presentacin. 11. El editor verifica la presentacin. Alternativa 1: Evento ya introducido En el paso 10 el sistema encuentra informacin 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 opcin de editar y vuelve al paso 8.
Caso de uso: Bsqueda de eventos desde pgina de inicio Descripcin: El usuario busca que eventos hay un cierto da desde la pgina de inicio Actores: Usuario, Sistema Caso de uso adicional necesitado: Caso de uso Bsqueda de eventos en la agenda 1. 2. 3. 4. 5. El usuario localiza el calendario en la pgina de inicio. El usuario selecciona la zona regional en la que est interesado. El usuario elige el da que le interesa en el calendario. El sistema le muestra la lista de eventos seleccionados. El usuario puede seguir buscando (seguira el caso de uso Bsqueda de eventos en la agenda).
88
CASO DE ESTUDIO
Caso de uso: Bsqueda de eventos en la agenda Descripcin: El usuario busca que eventos hay un cierto da desde la pgina de agenda Actores: Usuario, Sistema 1. 2. 3. 4. 5. 6. 7. El usuario localiza la agenda y sigue el vnculo. El sistema muestra un calendario. El usuario se dirige al da que le interesa. El sistema le muestra las zonas. El usuario elige su zona. El sistema le muestra los eventos. El usuario puede seguir buscando por das 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: Bsqueda de eventos en la agenda Descripcin: El usuario busca que eventos hay un cierto da desde la pgina de agenda Actores: Usuario, Sistema 1. 2. 3. 4. 5. 6. El usuario localiza la agenda y sigue el vnculo. El sistema muestra un calendario y las zonas. El usuario elige su zona. El usuario se dirige al da que le interesa. El sistema le muestra los eventos. El usuario puede seguir buscando por das en la misma zona.
Escenario Reportajes. Figura 23 Diagrama del Escenario Reportajes.

Muestra los actores involucrados en el proceso de creacin y obtencin de un reportaje para el sitio web. Editor
PIDE COLABORACION CONFIRMACION ENTREGA REPORTAJE Colaboradores HACEN REPORTAJE
PIDE ACREDITACION CONFIRMA ACREDITACION Profesional ACREDITA EN PUERTA
89
Caso de Uso: Gestionar los reportajes Descripcin: El editor introduce el artculo de un evento junto con el reportaje fotogrfico Actores: Editor, Sistema Caso 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 administracin. 3. El editor identifica el vnculo de la seccin de administracin de los reportajes. 4. El editor hace clic en ese vnculo. 5. El sistema muestra la pgina de reportajes con habilitacin para administracin. 6. El editor selecciona un reportaje a editar o identifica el vnculo aadir nuevo reportaje. 7. El editor hace clic en el vnculo de edicin o aadir. 8. El sistema muestra un formulario de entrada de datos. 9. El editor rellena el formulario de entrada y presiona el botn de confirmacin. 10. El sistema guarda los datos y muestra la informacin como presentacin. 11. El editor verifica la presentacin. Alternativa 1: El evento produce errores En el paso 10 el sistema encuentra errores en la informacin 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 opcin de editar y vuelve al paso 8.
Caso de uso: Bsqueda de reportajes Descripcin: El usuario elige ver un reportaje en el que est interesado Actores: Usuario, Sistema 1. 2. 3. 4. 5. 6. El usuario localiza la pgina de reportajes. El usuario hace clic en ese vnculo. El sistema muestra un ndice paginado de reportajes realizados. El usuario hace clic en el reportaje en el que est interesado. El sistema le muestra el artculo con unas fotografas de muestra. El usuario puede acceder al resto de fotografas siguiendo el enlace.
Escenario General.
90
CASO DE ESTUDIO
Figura 24 Diagrama del Escenario General.

Muestra los actores involucrados en el proceso de creacin y obtencin de activos generales (informacin de artistas, clubs, listas, etc.) para el sitio web.
Editores PETICION DE ACTIVOS CONFIRMACIONES ENTREGA ACTIVOS Colaboradores
CREAN ACTIVOS
PETICION DE ACTIVOS CONFIRMACIONES ENTREGA ACTIVOS Profesionales PRODUCEN ACTIVOS
Caso de Uso: Gestionar activos Descripcin: El editor procesa la informacin que ha recibido y la introduce en la pgina correspondiente al activo Actores: Editor, Sistema Caso 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 administracin. 3. El editor identifica el vnculo de la seccin a la que pertenece el activo. 4. El editor hace clic en ese vnculo. 5. El sistema muestra la pgina del activo correspondiente con habilitacin para administracin. 6. El editor identifica las opciones de gestin en la pgina. 7. El editor selecciona la opcin 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 botn de confirmacin. 10. El sistema guarda los datos y muestra la informacin como presentacin. 11. El editor verifica la presentacin. Alternativa 1: Activo ya introducido En el paso 10 el sistema encuentra informacin 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 opcin de editar y vuelve al paso 8.
Caso de uso: Seleccin general de contenido desde pgina de inicio Descripcin: El usuario selecciona contenido de la pgina de inicio Actores: Usuario, Sistema
91
Caso de uso adicional necesitado: Acceder a los contenidos 1. El usuario localiza el enlace que cree puede llevarle a la informacin que le interesa. 2. El usuario hace clic en ese vnculo. 3. El sistema muestra la informacin o un ndice de posibles enlaces a la informacin. 4. El usuario consume la informacin o sigue vnculos. 5. El usuario debera llegar a la informacin final en menos de 3 pasos siempre. 6. El usuario puede seguir buscando contenido (seguira el caso de uso Acceder a los contenidos).
Caso de uso: Acceder a los contenidos Descripcin: El usuario accede a un contenido particular desde la pgina del activo en cuestin Actores: Usuario, Sistema 1. 2. 3. 4. 5. 6. El usuario localiza el activo y hace clic en el vnculo. El sistema muestra la pgina del activo correspondiente. El usuario identifica la navegacin de esta seccin. El usuario selecciona el activo en el que est interesado. El sistema muestra el contenido seleccionado. El usuario consume la informacin.
Caso de uso: Acceder a los contenidos Descripcin: El usuario accede a un contenido particular mediante bsqueda de palabra clave Actores: Usuario, Sistema 1. 2. 3. 4. 5. El usuario localiza el campo de bsqueda. El usuario introduce la palabra clave que desea buscar en el campo. El usuario pulsa el botn Buscar. El sistema muestra una pagina de resultados. El usuario verifica los resultados y sigue el enlace que desea.
Alternativa 1: Palabra clave incorrecta o resultados no satisfactorios En el paso 5 el usuario se da cuenta que los resultados no coinciden con lo que busca. 5a. El usuario no encuentra la informacin. 5b. El usuario localiza el campo de bsqueda y vuelve al paso 2.
92
CASO DE ESTUDIO
Otros casos de uso.
Caso de Uso: Suscripcin a una lista de correo Descripcin: El usuario se suscribe a una lista de correo mediante la introduccin de su e-mail Actores: Usuario, Sistema 1. El usuario localiza en vnculo a suscripciones. 2. El sistema muestra posibles listas o boletines a los que puede suscribirse (flyers, lista de correo, informacin, colaboracin). 3. El usuario puede o no hacer clic en el enlace con informacin sobre la lista. 4. El usuario localiza el campo donde introducir su direccin de correo electrnica. 5. El usuario introduce su e-mail o rellena el formulario. 6. El usuario pulsa el botn de darse de alta o enviar. 7. El sistema muestra la confirmacin y agradecimiento. Alternativa 1: Datos introducidos incorrectamente En el paso 6 el sistema avisa que ha introducido los datos incorrectamente. 6a. El usuario ve los errores que ha cometido. 6b. El usuario localiza los campos a corregir y vuelve al paso 4.
Caso de uso: Acceso al Foro de la Comunidad Descripcin: El usuario accede al Foro para opinar y acceder a la comunidad Actores: Usuario, Sistema Caso de uso adicional necesitado: Introducir mensajes 1. 2. 3. 4. 5. 6. 7. El usuario localiza el enlace al foro y hace clic en l. El sistema le muestra los grupos de debates posibles. El usuario localiza el que le interesa y accede. El sistema muestra la lista de temas en el foro. El usuario localiza un tema y accede. El sistema muestra los mensajes de ese tema. El usuario examina los mensajes y responde (sigue el caso de uso Introducir mensajes)
Alternativa 1: El usuario quiere introducir un tema En el paso 5 el usuario va a crear un nuevo tema de debate 5a. El usuario en vez de acceder a un tema, identifica el enlace para crear un nuevo tema (sigue el caso de uso Introducir mensajes).
93
Caso de uso: Introducir mensajes Descripcin: El usuario introduce un nuevo mensaje o responde a un mensaje en el foro Actores: Usuario, Sistema 1. 2. 3. 4. 5. 6. El usuario localiza el vnculo hacia la introduccin del mensaje. El usuario hace clic en ese vnculo. El sistema le muestra un formulario para introducir el mensaje. El usuario rellena el formulario o mensaje. El usuario presiona el botn de publicacin del mensaje. El sistema le muestra una presentacin del mensaje.
Caso de uso: Login Descripcin: El editor o usuario con privilegios se identifica como tal Actores: Editor, Sistema 1. El editor identifica el acceso a la zona de administracin. 2. El editor hace clic en el vnculo de administracin. 3. El sistema muestra un cuadro de dilogo 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 botn aceptar y lo pulsa. 9. El sistema muestra el panel de administracin. Alternativa 1: Login incorrecto En el paso 9 el sistema no encuentra al usuario 9a. El sistema muestra un aviso de login incorrecto. 9b. El usuario pulsa aceptar y se vuelve al paso 3.
ARQUITECTURA DE LA INFORMACIN La arquitectura de informacin hace referencia a la estructura u organizacin de nuestro sitio web, especialmente en como las diferentes pginas del sitio se relacionan entre s. En esta etapa involucraremos puntos tales como el anlisis y la planificacin del contenido, la organizacin de las pginas, el etiquetado, tcnicas de bsqueda y el diseo de la navegacin. Recogeremos todo el material y la informacin 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 navegacin y el mantenimiento del sitio.
94
CASO DE ESTUDIO
Revisin de material previo
De la revisin de los resultados del anlisis de requisitos, los sitios de los competidores y las tareas, surge una lista completa de los contenidos potenciales, etiquetas candidatas y esquemas posibles de organizacin:

Agenda de eventos, para que los usuarios puedan consultar la programacin de una zona en un da concreto; Bsquedas, en todo nuestro sitio por introduccin de palabra clave; Informacin de los artistas, sus biografas; Base de datos de todos los Clubs del estado; Listas de xitos o charts de los DJs; Entrevistas con los artistas; Crticas y comentarios de discos y CDs; Noticias actualizadas sobre la escena electrnica; Artculos o reportajes con fotografas; Foros de discusin para que la comunidad clubber pueda encontrarse y debatir temas; Enlaces o vnculos a otros sitios interesantes para la comunidad; Artculos u opinin; 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 produccin musical; Reportajes sobre eventos especiales (festivales, conciertos, ...); Los Flyers mejor diseados; Boletines por correo electrnico; Votaciones en lnea; Anuncios; Informacin de contacto y de colaboracin.
Evaluacin 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 aplicacin permitir a los usuarios consultar la programacin de los clubs y eventos especiales que tengan lugar un cierto da, elegido por el propio usuario. Dependiendo de la cantidad de resultados que se generen, se mostrarn todos los eventos o solamente aquellos que pertenezcan a una determinada zona. Tambin podr consultarse la programacin disponible (generalmente mensual) de un determinado club o consultar las prximas actuaciones de un determinado artista. Motor de bsqueda: mediante la introduccin de una palabra clave, el usuario podr obtener un conjunto de resultados dentro del contenido del sitio web que se ajusten a su bsqueda. Tambin permitir refinar la bsqueda con opciones avanzadas una vez mostrados los resultados. Biografas de los artistas: informacin relacionada con la vida de los artistas, como producciones, actuaciones, nacionalidad, fotografas, etc. Lista de clubs: una base de datos con todos los clubs, bares y discotecas de los que tenemos constancia que ofrecen msica electrnica a lo largo del territorio espaol. Listas o charts de los DJs: los mejores discos que a juicio de los DJs han sido producidos durante un determinado mes.
95
Entrevistas con los artistas. Crticas de discos: comentarios y crticas de los ltimos discos lanzados al mercado. Noticias: ltimas noticias que se produzcan dentro de la escena electrnica. Reportajes fotogrficos: artculos en los que se resea un determinado evento al que asistieron nuestros colaboradores con una galera de fotos tomadas durante ese evento. Artculos, especiales, cursos, opiniones... cualquier material que verse sobre temas que puedan interesar a la comunidad clubber. Enlaces o vnculos hacia otros sitios web que contengan material de inters para nuestra audiencia. Foros con los que facilitamos la participacin activa de los usuarios registrados o no registrados en una discusin on-line. Boletn de suscripcin para que nuestros usuarios reciban informacin peridica sobre la actualizacin de la pgina y noticias. Votaciones en lnea: encuestas que ayudan a conocer a nuestra audiencia. Cita: incorporacin de una cita o frase clebre pronunciada por alguien referente al mundo de la msica electrnica. Informacin de contacto, normas de privacidad y ayudas: opciones habituales de los sitios web que favorecen la confianza del usuario en nuestro proyecto. Informacin de colaboracin: 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 aadido a cada elemento de contenido su correspondiente sistema de gestin.

Gestin y administracin de la agenda de eventos: permitiremos aadir, modificar y borrar la informacin referente a la agenda. Gestin y administracin de artistas: permitiremos aadir, modificar y borrar tanto artistas, como sus biografas, entrevistas y sus charts. Gestin y administracin de clubs: podremos gestionar la base de datos de clubs. Aadir y editar crticas de discos, noticias, artculos especiales, citas, etc. Crear nuevas encuestas y votaciones. Administracin del foro. Reportajes fotogrficos: artculos en los que se resea un determinado evento al que asistieron nuestros colaboradores con una galera de fotos tomadas durante ese evento. Boletn de suscripcin para que nuestros usuarios reciban informacin peridica sobre la actualizacin de la pgina y noticias. Informacin de colaboracin: para que cualquiera que quiera colaborar con nosotros sepa como hacerlo con facilidad y seguridad.
Crear y evaluar nuestra estructura esencial
Basndonos en la estructura de la informacin, las tareas, los tipos de usuario y tcnicas de evaluacin con el usuario, crearemos una organizacin de nuestro contenido, decidiendo su agrupacin y mostrando un esquema de organizacin.
96
CASO DE ESTUDIO
Haremos uso de las dos aproximaciones principales para desarrollar una arquitectura: un diseo de abajo a arriba (bottom-up design) y un diseo de arriba abajo (top-down design). Desde una aproximacin de arriba a abajo, consideraremos que la informacin que podemos situar en un primer nivel podra venir relacionada con las tareas ms frecuentes, que seran la agenda y los reportajes con fotografas, junto con las noticias y el foro, por su prioridad de actualizacin. Aadiremos en este nivel la informacin relativa a los artistas y los clubes. Ahora bien, desde una aproximacin de abajo a arriba nos preguntamos por qu materiales disponemos para construir el sitio. Disponemos de bases de datos con biografas de los artistas, bases de datos de artistas y clubes, la informacin de sus programaciones, fotografas de reportajes, entrevistas, listas de discos y crticas, etc.
Card sorting
Debido a la multitud de alternativas para organizar los contenidos, usaremos la tcnica de open card sort con los usuarios.
Figura 25 Biografias Hoja de etiquetas usadas Charts en la prueba de card sorting. Eventos Noticias Comunidad Internet Sets Postales Contacto Mapa del sitio Reseas
Lista de Correo
Artistas DJ Charts Fiestas Reportajes Debates Opinin Especiales Festivales Colabora Ayuda Bsqueda Boletn
DJs Listas DJ Calendario Articulos Enlaces Sonido Produccin Clips Clubbers

Quienes somos
Clubs Entrevistas Criticas Fotos Vinculos Audio Creacin Tecnologa Sellos Nosotros Top 10 Editorial
Listas Agenda Discos Foros Sitios Sesiones Flyers Links

Informacin legal
Privacidad Crditos Novedades
Composicin Conciertos
Etiquetamos las cartas. Hemos etiquetado las cartas sin sugerir ningn tipo de categora. 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 agrupacin que tenga ms sentido para ti. Despus de la divisin, etiqueta cada grupo. Dejamos que los usuarios agrupen los elementos y etiqueten los grupos.
Tras repetir el proceso con cinco usuarios ms, la realizacin de esta prueba (vase Figura 26) nos permite rechazar ciertas etiquetas (debido a la
97
confusin que producen en los usuarios) y detectar los esquemas dominantes de organizacin. Un resumen de las conclusiones extradas sera el siguiente:
Figura 26 Mtodo de card sorting.
Descartamos las siguientes etiquetas: crditos, editorial, postales, sitios, reseas, tecnologa, sets, vnculos, clips, creacin y listas. No se relaciona boletn con lista de correo. Noticias y Novedades crean la expectativa de que pueden aadirse a cualquier grupo. Grupos diferenciados y conexiones:
Agenda
Agenda Calendario Eventos
Informacin sobre la pgina Quienes somos Privacidad Nosotros Contacto Links Enlaces Informacin legal Mapa del sitio
Comunidad
Comunidad
Msica

DJs

Foros Opinin Debates Clubbers
Discos Sesiones Sellos Crticas
Artistas
Produccin
Sesiones Entrevistas Biografas Listas Dj DJ Charts Top 10 DJs Sellos Discos
Relacionado con:

Ayuda Bsqueda Internet Boletn Colabora
Festivales Fiestas Conciertos

Flyers Ayuda Bsqueda Internet Boletn Colabora Crticas
Reportajes

Links

Ayuda Bsqueda

Msica

Reportajes Fotos Articulos
Links Enlaces Internet
Ayuda Bsqueda Relacionado con:
Discos Sesiones Sellos Crticas
Resto e inconexas Audio Colabora Especiales Produccin
98
CASO DE ESTUDIO
Flyers Clubs Criticas Discos
Sonido
Composicin
Tras revisar los resultados, esbozaremos un esquema dominante de organizacin:
Agenda Festivales Fiestas Conciertos Calendario Eventos Clubs Contacta Quienes somos? Privacidad Informacin Legal Contacto Mapa del Sitio Nosotros Comunidad Debates Opinin Clubbers Foros Criticas Enlaces Links Clubs Tiendas de discos Bares musicales Sellos DJs Top 10 Listas DJ DJ Charts Artistas Biografas Entrevistas Sesiones Artculos Fotos Reportajes Discos Sellos Criticas Multimedia Sonido Audio Composicin Produccin
-
99
Sesiones Bsqueda Ayuda Colabora Noticias - Novedades Listas de correo Boletn Flyers
-
Finalmente nos dispondremos a representar los resultados de todo este proceso tras una primera evaluacin con los usuarios, que representa nuestra arquitectura de informacin. El resultado (vase Figura 27) es un esquema con estructura ancha (en vez de profunda):
Pgina principal de CulturaNocturna.com
Figura 27 Representacin de la arquitectura.
NIVEL 1
Agenda
Artistas
Clubs
Noticias
Reportajes
Especiales
Discos
Enlaces
Foros
NIVEL 2
Biografas
Entrevistas
DJ Charts
Artculos
Fotos
Diagrama en rbol con disposicin horizontal de la arquitectura de la informacin de culturanocturna.com
NIVEL 3
Aadir atajos, vnculos redundantes, y pginas de apoyo
Revisaremos las tareas primarias y procedimientos para mapearlos en la organizacin del sitio, intentando optimizar la arquitectura para que sea eficaz en las tareas de ms alta prioridad y para los tipos de usuario primarios. Al esquema anterior le aadiremos atajos, vnculos redundantes, herramientas de ayuda, mapas del sitio, bsqueda, etc. As disearemos una serie de pginas de apoyo (support pages) para facilitar las tareas a nuestros usuarios y que puedan hacer un uso eficiente de nuestro contenido.
Pginas de encaminamiento. Ayudan a que la gente navegue hasta sus destinos. Incluyen la pgina de inicio y mapas del sitio. La pgina de inicio es la pgina ms importante de cualquier sitio web, y se ve mucho ms que cualquier otra pgina. Evidentemente, los usuarios no acceden siempre a un sitio web a travs de su pgina de inicio. Sin embargo, una de las primeras acciones que llevarn a cabo estos usuarios al llegar a un nuevo sitio web es ir a su pgina de inicio. Por esta razn es preciso dedicarle una atencin especial. Deberemos crear un diseo de pgina de inicio que se ajuste estrechamente a las directrices de usabilidad. Pginas de ayuda. pginas de referencia, FAQs, soporte al cliente, pginas de contacto.
100
CASO DE ESTUDIO
Pginas de Error. Disearemos para el sitio completo pginas del estilo file-not-found. Estas pginas no pueden mantener la estructura del sitio web ya que la informacin presentada es totalmente diferente. Sin embargo, es importante que se identifiquen rpidamente con el sitio que las ha generado. Algo que facilitar la recuperacin del error, un aspecto fundamental de la usabilidad.
AGENDA
Figura 28 Diagrama en rbol vertical de la arquitectura de la informacin de culturanocturna.com

EVENTOS
BIOGRAFIAS
ARTISTA
ARTISTAS
ENTREVISTAS DJ CHARTS
ARTISTA
ARTISTA
CLUBS NOTICIAS
CLUBS
NOTICIAS
ARTICULOS
REPORTAJES FOTOS
FOTOS
ESPECIALES INICIO CITA

ENCUESTA
ESPECIALES
DISCOS
DISCOS
Artistas ENLACES Clubs Discos FORO TEMAS

MENSAJES
BSQUEDA
BOLETN COLABORA QUIENES SOMOS CONTACTA CON NOSTROS MAPA DEL SITIO NORMAS DE PRIVACIDAD
101
Secuencia paso a paso Enlace hacia el exterior Atajo Listado de pginas similares Contenido dentro de una pgina
Pgina esttica Pgina dinmica Propuesta a aadir
Figura 29 Leyenda del diagrama de la Figura 28.
En el apndice REVISIN DE LA ARQUITECTURA, encontramos una plantilla con la que evaluaremos la arquitectura del sitio web.
Desarrollo y evaluacin de la barra de navegacin y seales de orientacin (orientation cues)
Existen cuatro esquemas de navegacin distintos que parece que tienen una buena usabilidad y que son muy comunes en la Web:
Ral de navegacin a la izquierda. Este diseo fue popularizado por CNET, y se conoci como el diseo de la fiebre amarilla (una banda amarilla que discurre por la parte izquierda de todas sus pginas). Fichas. Originalmente las populariz Amazon.com. Vnculos en la parte superior. Categoras en la parte central de la pgina. Popularizado (y todava utilizado) por Yahoo!.
Optaremos por una fila de vnculos en la parte superior. Situaremos (primaca y recencia) las opciones ms 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 navegacin con un ral de navegacin a la izquierda. Especialmente en las pginas de administracin del sitio web, que seguirn un formato de lista de opciones que se expanden por cada categora seleccionada. Inicio Citas Recomendados Artistas Biografas Aadir biografa Entrevistas DJ charts
102
CASO DE ESTUDIO
Navegacin en el pie de pgina
No existe acuerdo sobre qu incluir en esta lista de navegacin. Algunos sitios enumeran las reas principales del sitio con el fin de ofrecer a los usuarios una segunda oportunidad para usar estos vnculos si los omitieron al desplazarse hacia abajo por la pgina. Otros sitios adoptan la solucin contraria y reservan la parte inferior de la pgina para otros vnculos, llamados notas a pie de pgina, como el copyright y la informacin de contacto. Debido a la falta de un estndar, los usuarios no saben lo que se van a encontrar en el pie de pgina. Dado que la navegacin en la parte inferior de la pgina es muy poco apropiada, no la utilizaremos para las opciones de navegacin importantes. Adems, un principio general de usabilidad es de minimizar la duplicacin: si la misma opcin aparece dos veces, los usuarios se preguntarn si los dos vnculos son distintos o idnticos. En conclusin, utilizaremos el pie de pgina para la navegacin tipo nota a pie de pgina y que no repita los segmentos principales de la arquitectura de la informacin del sitio. La lista de vnculos en esta zona deber tener un mximo de siete vnculos y las palabras elegidas permitirn colocar toda la lista en una sola lnea de texto cuando se visualice en el tamao de ventana ms normal.
Mapa del sitio
Los mapas de sitios web pretenden dar una visin de conjunto al usuario permitindole, a la vez, dirigirse a las pginas de su inters. 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 pginas. A pesar de su abundancia, creemos que deberan catalogarse ms bin como ndices o tablas de contenido que como mapas del sitio web, puesto que nadie llamara 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 diseo y lo evaluaremos extensivamente con usuarios reales.
Quines somos
Proporcionar informacin sobre la organizacin es una de las finalidades bsicas de cualquier sitio web, es uno de los mejores elementos que se pueden aadir para generar confianza. Esta informacin puede no figurar entre las ms tiles o las ms solicitadas, pero tiene que estar ah. Incluiremos un vnculo Quines somos.
Informacin de contacto
Incluiremos un vnculo contacta con nosotros, para que puedan localizarnos.

Normas de privacidad
Aunque muchos usuarios no leern estas normas en condiciones normales, ponerlas a su disposicin en un lugar destacado constituye una forma de instarles a que confen en el sitio (unas normas explcitas transmiten que la privacidad se toma en serio). Incluiremos un vnculo con las normas de privacidad en la pgina de inicio, ya que solicitamos informacin a los usuario. Es preciso incluir un vnculo en cada ubicacin en la que se pida informacin a los usuarios (por ejemplo, al solicitar las direcciones de correo electrnico para suscripciones a boletines).
103
Ayuda
El uso de la ayuda no est todava lo suficientemente generalizado en la Web como para que los usuarios esperen encontrarla sin falta. Adems, 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 slo por el hecho de que el sitio disponga de esta opcin. Finalmente, la navegacin a pide de pgina queda como sigue:
Quienes somos Contacta con nostros Suscrbete Aviso legal Mapa del sitio Navegacin con barras de progreso
Para pginas que caigan dentro de una secuencia lineal, implementaremos una lista de pginas con enlaces a anterior y siguiente, del estilo: 1 2 3 4 | Anterior Siguiente
Navegacin constante
El trmino navegacin constante (o global) describe el conjunto de los elementos de navegacin que aparecen en todas las pginas del sitio. La navegacin constante de culturanocturna.com (vase Figura 30) queda como sigue::
Figura 30 Navegacin constante de culturanocturna.com.
La pgina de inicio
A diferencia de las pginas de menor nivel, la pgina principal tiene que atraer a cualquiera que visite el sitio, sin importar sus distintos intereses. La pequea cantidad del espacio visible por encima del pliegue (trmino heredado de los peridicos, que significa la parte de la pgina que puede verse sin desplazarse) en la pgina principal es la zona favorita. El campo de la usabilidad web ha madurado lo suficiente como para desarrollar directrices especiales que codifiquen las mejores prcticas de diseo para los componentes especficos de un sitio web. Adems primaremos la incorporacin de convenciones estndar de diseo de la interfaz de usuario, ya que los usuarios no dedicarn tiempo a aprender nada nuevo, sino a extraer el valor del objetivo y contenidos [NIE02].
104
CASO DE ESTUDIO
La funciones ms importante de la pgina de inicio con respecto a los smiles a los que puede aludir son: Definir el contenido y el estilo; No ser demasiado superficial e invertir en el diseo de la interaccin del sitio; Estar bien sealizada, como primera pgina de un peridico pero aportando ms servicios y, Tiene que alentar a la gente a que siga leyendo. A menudo, la pgina de inicio es la primera oportunidad (y posiblemente la ltima) de atraer y retener a cada cliente, haciendo las veces de la primera pgina de un peridico. Uno de los valores ms grandes de la primera pgina de un peridico es la prioridad que se da a los titulares de las noticias ms importantes. Todas las pginas de inicio se veran beneficiadas si fueran tratadas como la primera pgina de un peridico importante, con editores que determinaran el contenido de mayor inters y que aseguraran la continuidad y coherencia del estilo. El reto consiste en disear una pgina web que permita el acceso a todas las opciones importantes sin crear desorden en la pgina web. La claridad es vital, porque as se atienden las necesidades de los usuarios.
Directrices principales que garantizan la usabilidad de la pgina de inicio.
Si bien muchas de estas directrices se pueden aplicar al diseo web en general, son especialmente importantes a la hora de disear la pgina 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 informacin iterativa en el ciclo de desarrollo. Hemos englobado estas directrices en categoras temticas: FINALIDAD DEL SITIO (vase Figura 31). La pgina de inicio debe transmitir enseguida dnde 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 tamao razonable y en la esquina superior izquierda, que suele ser la mejor ubicacin para los idiomas que se escriben de izquierda a derecha. 2. Incluiremos un eslogan que resume explcitamente la actividad del portal, msica electrnica 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 pgina 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 ubicacin prominente, como la parte central superior de la pgina, y no las rodearemos de mucha competencia visual. Por esta ltima razn, incluiremos una cita (que por frecuencia de actualizacin,
105
tiene una prioridad alta) que relaja la carga visual de imgenes en la parte superior. 4. Para designar claramente la pgina de inicio restringiremos el uso de los trminos Inicio, Pgina de Inicio y Sitio Web en todo nuestro sitio para hacer referencia a esta pgina de inicio principal. Esto no confundir a los usuarios por vnculos o botones Inicio que conduzcan a lugares distintos. No incluiremos vnculos a sitios web externos en la pgina de inicio. 5. El diseo de la pgina de inicio deber diferenciarse claramente de todas las dems pginas del sitio. Utilizaremos un diseo visual algo distinto y habilitaremos un sealizador de ubicacin en el apartado navegacional.
Figura 31 Finalidad del sitio en pgina de inicio.
INFORMACIN SOBRE EL SITIO (vase Figura 32). Muchos usuarios siguen queriendo saber quin est detrs del servicio. 6. Agruparemos la informacin sobre el sitio y otras secciones de ayuda, como Quines somos, Contacta con nosotros, Mapa del sitio en un rea separada. Este agrupamiento proporciona a las personas que deseen obtener informacin un lugar claro y memorizable al que ir. Esto tambin ayudar a los usuarios que no estn interesados en esta informacin, al separarla del resto del contenido de la pgina de inicio. No incluiremos la informacin de contacto directamente en la pgina de inicio puesto que no es relevante ms que para la colaboracin, que ya se promociona de diversas maneras y debe ser eleccin expresa del usuario. 8. Adems, incluiremos un vnculo Normas de privacidad en la pgina de inicio, ya que el sitio solicita informacin al usuario para subscribirse al boletn o colaborar en la pgina. As como tambin un Aviso legal sobre el contenido del sitio.
Figura 32 Navegacin a pie de pgina.
REDACCIN DE CONTENIDO (vase Figura 33). La mayora de los usuarios hojea el contenido on-line, en vez de leerlo cuidadosamente, por lo que deberemos optimizar el contenido para ser fcilmente localizado, y adaptarlo para transmitir el mximo de informacin posible con el mnimo de palabras. En el caso particular de la pgina de inicio, deberemos esforzarnos especialmente por captar la atencin de los usuarios,
106
CASO DE ESTUDIO
disponiendo de un espacio mnimo para dar cabida al mximo nmero de temas. 9. Utilizaremos un lenguaje dirigido a nuestra audiencia destino. La arquitectura de la informacin, resultado de la investigacin y el trabajo realizado en la fase de diseo, nos permitir etiquetar las secciones y las categoras con arreglo al valor que tienen para nuestra audiencia. Por ejemplo, disponemos de una seccin principal que contiene las actuaciones que consideramos ms destacadas esa semana dentro de la escena electrnica. Hemos optado por denominar a esta seccin Recomendamos en vez de Esta semana o Destacados porque esta ltima sera la manera en que se trata esta informacin, en vez de ser lo que el usuario est viendo o leyendo, esto es, una lista de las actuaciones que recomendamos. De manera anloga, hemos hecho con Lo ha dicho... en vez de Cita.
Figura 33 Contenido destacado y etiquetado de secciones.
10. La repeticin de elementos idnticos, como categoras y vnculos, en la pgina 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 pgina. Por otra parte, repetir el contenido puede ayudar a los usuarios si repite elementos que pertenecen a mltiples categoras o si incluye vnculos con la misma pgina, que es lo que sucede dentro de una misma seccin y lo que hace diferenciarlas como bloques comunes, como sucede, por ejemplo, con los Reportajes. 11. Evitaremos categoras de un solo elemento y listas de una sola vieta, acompaando al elemento ms reciente de cada seccin con un mnimo de los 2 ltimos elementos de contenido que fueron ms recientes. Por ejemplo, las secciones Especiales y Entrevistas incluyen un par de vnculos ms hacia los ltimos archivos que estuvieron en portada. 12. Al utilizar diseos multicolumna, el texto debe entrar en espacios muy reducidos. Dado que existirn muchas posibilidades de que haya particiones en el texto, dependiendo de la resolucin de pantalla, el tamao del monitor, el
107
tamao de la ventana y la versin del navegador de cada usuario, el hecho de que ciertas frases permanezcan juntas puede ayudar a mantener la integridad y la lgica del contenido. As que para facilitar la comprensin y la localizacin, no partiremos ni titulares, ni nombres de artistas que estn vinculados. 13. Todo el texto de la pgina de inicio deber contener informacin y no ser ambiguo. El uso correcto de maysculas, lenguaje, signos de puntuacin y otras reglas de estilos se comenta en la gua de estilos del apndice GUA PARA LA REDACCIN DE CONTENIDO. REVELAR EL CONTENIDO A TRAVS DE EJEMPLOS (vase Figura 34). Mostrar ejemplos del contenido del sitio en la pgina de inicio ayuda a los usuarios. Entre las mltiples ventajas que esto conlleva, la ms 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 categoras. Los ejemplos ayudan a diferenciar las categoras, evitando que los usuarios tengan que hacer clic en las diferentes categoras para ver que contienen. 14. Utilizaremos ejemplos que revelarn el contenido del sitio, en vez de limitarnos a describirlo. La categora de Noticias contendr los cinco primeros titulares, seguidos por un vnculo con todas las noticias ms interesantes. La categora llamada Reportajes contendr una fotografa representativa de esa actuacin.
Figura 34 Seccin de noticias en pgina de inicio.
15. Para cada ejemplo, dispondremos de un vnculo que ir directamente a la pgina detallada de ese ejemplo, en vez de ir a una categora general de la que forme parte el elemento. Todos los vnculos de los reportajes llevan directamente a la informacin correspondiente a ese reportaje en concreto, y no con la pgina dedicada a los reportajes. De igual manera ocurre con el resto de secciones. 16. Nos aseguramos que queda claro qu vnculos conducen a la informacin de seguimiento de cada ejemplo y qu vnculos conducen a informacin general acerca de la categora como un todo. Para ello, el vnculo con la categora lo separaremos de los vnculos de ejemplo por un pequeo espacio. Esto es as en cada bloque, donde aparece un vnculo claramente separado al final de cada seccin y alineado de la misma forma que el nombre de la categora, a la derecha.
108
CASO DE ESTUDIO
ACCESO A ARCHIVOS Y CONTENIDO YA APARECIDO (vase Figura 35). Con frecuencia, hay usuarios que vuelven a un sitio regularmente o nuevos usuarios que estn interesados en lo que ste ha ofrecido antes de localizarlo. Resulta til incluir archivos del contenido que se haya retirado recientemente de la pgina de inicio. 17. Facilitaremos el acceso al contenido que se haya presentado recientemente en la pgina de inicio, por ejemplo, en la ltima semana o mes, incluyendo una lista de las opciones recientes.
Figura 35 Acceso a las ltimas entrevistas y al archivo con todas ellas.
VNCULOS (vase Figura 36). Las pginas de inicio tienden a incluir ms vnculos que las pginas convencionales del sitio. 18. Diferenciaremos los vnculos y haremos que sean hojeables. Encabezaremos los vnculos con informacin que incluya texto, ya que los usuarios suelen primero buscar la primera palabra o las dos primeras palabras de los vnculos para compararlos. Haremos que los vnculos sean lo ms especficos y breves posible. Una manera sencilla de conseguir esto es haciendo que nuestros vnculos sean titulares y/o nombres propios, como el nombre de los artistas, por ejemplo. 19. Utilizaremos texto significativo. No utilizaremos instrucciones genricas, 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 vnculos genricos, como Ms... al final de una lista de elementos o artculos. En vez de ello, indicaremos a los usuarios lo que van a ver, como Ms noticias o Todos los reportajes. Los vnculos genricos Ms... son especialmente problemticos cuando la pgina contiene varios de ellos, ya que a los usuarios les resultar difcil diferenciarlos al hojear la pgina.
Figura 36 Utilizacin de vnculos con texto significativo.
20. Asignaremos colores distintos a los vnculos para mostrar los estados de visitado y no visitado. Reservaremos el azul para los vnculos no visitados y utilice un color ms discernible y menos saturado para los vnculos visitados. El gris para indicar los sitios visitados no es conveniente, ya que es difcil de leer y ha sido muy utilizado en interfaces de usuario para indicar que algo no est disponible. De manera anloga, no es muy til utilizar el negro para los
109
sitios visitados cuando el color de texto es el negro, ya que puede inducir a errores a la hora de buscar los vnculos visitados anteriormente. 21. Si un vnculo hace una cosa que no sea conducir a otra pgina web, como enlazar con archivo PDF o iniciar un reproductor de audio o vdeo, un mensaje de correo electrnico u otra aplicacin, nos aseguraremos de que el vnculo indica explcitamente 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 vern abocados a esperar a que se cargue la nueva aplicacin para poder salir de ella. Y lo que es peor, en una situacin de memoria limitada, el inicio de una aplicacin 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 vdeo. NAVEGACIN (vase Figura 37). Dado que la finalidad de una pgina de inicio es la de facilitar la navegacin hacia cualquier otra parte del sitio, es fundamental que los usuarios sean capaces de detectar el rea de navegacin apropiada sin esfuerzo alguno, diferenciar entre las opciones y saber bien lo que hay detrs de cada vnculo. El rea de navegacin tambin deber revelar el contenido ms importante del sitio, de manera que los usuarios puedan formarse una idea bastante definida de lo que hay viendo las categoras de nivel superior. 22. Colocaremos el rea principal en un lugar tan revelante como es la parte superior de la pgina, junto al cuerpo principal. 23. Agruparemos los elementos del rea de navegacin de forma que los elementos semejantes queden los unos junto a los otros. El agrupamiento ayuda a los usuarios a diferenciar entre categoras similares o relacionadas. As, junto a Agenda agrupamos Artistas y Clubs. A continuacin Noticias y agrupamos juntos Reportajes y Especiales. Luego Crticas, Enlaces y Foros.
Figura 37 Barra de navegacin superior.
24. No incluiremos un vnculo activo con la pgina de inicio en la propia pgina de inicio. Ya que incluimos el vnculo Inicio como parte de la barra de navegacin normal, no se podr hacer clic en l en la pgina de inicio. Si se pudiese hacer clic en l, algunos usuarios inevitablemente harn clic en l y se preguntarn si la pgina ha cambiado. Asimismo, como vincularemos el logotipo de culturanocturna.com con la pgina de inicio desde otras pginas del sitio, no se podr hacer clic en el logotipo desde la pgina de inicio. Todas las dems pginas del sitio necesitarn tener un vnculo con la pgina de inicio. 25. No emplearemos iconos, ya que los vnculos de texto son claramente diferenciables entre s, puesto que son los nombres de las categoras; simplemente crearan confusin en la pgina. BSQUEDA (vase Figura 38). La bsqueda es uno de los elementos ms importantes de la pgina de inicio, y resulta esencial que los usuarios sean capaces de encontrarla y usarla sin 110
CASO DE ESTUDIO
ningn tipo de esfuerzo. Las recomendaciones para el tratamiento de la bsqueda de la pgina de inicio son muy claras: hacer que sea visible, amplia y sencilla. Evidentemente, el verdadero poder de la bsqueda est en la implementacin. 26. En vez de proporcionar un vnculo con una pgina de bsqueda, proporcionaremos a los usuarios un cuadro de entrada (con un botn al lado) en la pgina de inicio para introducir consultas de bsqueda, que es lo que esperan encontrar para presuponer que el sitio tiene opcin de bsqueda. Habilitaremos una bsqueda sencilla y sin vnculo a una bsqueda avanzada. En lugar de ello, ofreceremos a los usuarios la opcin de realizarla cuando les presentemos los resultados de la bsqueda. 27. Dejaremos el espacio suficiente en el cuadro de entrada como para que quepan 30 caracteres en el tamao de fuente ms utilizado. 28. Colocaremos la bsqueda en la parte superior del cuerpo principal de la pgina, pero por debajo de cualquier rea de banner. No ser necesario etiquetar el rea de bsqueda con un encabezado; pues utilizaremos en su lugar un botn Buscar que quede a la derecha del cuadro.
Figura 38 Cuadro de bsqueda.
29. La bsqueda en la pgina 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 estn buscando si no lo encuentran con la bsqueda. Adems, no ofreceremos una opcin de Buscar en la web, ya que los usuarios utilizarn su motor de bsqueda favorito, y esta opcin har que la bsqueda sea ms complicada y est ms expuesta a posibles errores. HERRAMIENTAS Y ACCESOS DIRECTOS A TAREAS (vase Figura 39). Las herramientas de las pginas de inicio, o los accesos directos a ciertas tareas, pueden suponer una forma inmejorable de destacar las prestaciones ms populares del sitio y satisfacer las exigencias de los usuarios ms rpidamente. 30. Ofreceremos a los usuarios un acceso directo a la agenda, una de las tareas de ms alta prioridad. Desde ella podrn realizar una bsqueda bsica y sencilla de los eventos que se produzcan en su zona regional el da elegido. 31. No ofreceremos herramientas que reproduzcan la funcionalidad del navegador, como establecer una pgina como pgina de inicio predeterminada del navegador o agregar el sitio a favoritos.
111
Figura 39 Acceso directo a la agenda desde pgina de inicio. Se habilita un calendario con el que acceder a los eventos directamente.
IMGENES Y ANIMACIN (vase Figura 40). El hecho de utilizar imgenes para ilustrar el contenido, puede mejorar mucho una pgina de inicio. Por otra parte, las imgenes pueden entorpecer el diseo debido a la aglomeracin visual y a los tiempos de descarga lentos, por lo que resulta importante utilizarlas con precaucin para publicarlas en la Web. 32. Utilizaremos imgenes nicamente para mostrar contenido real, no para decorar la pgina de inicio. Usaremos fotografas de personas e imgenes identificables en conexin con el contenido y de esta manera no ser necesario etiquetarlas con un pie de foto.
Figura 40 Fotografas en culturanocturna.com
33. Las fotografas se ajustarn al tamao apropiado para su visualizacin. Evitaremos las imgenes pequeas con demasiado nivel de detalle y no usaremos imgenes con marca de agua. 34. La animacin requiere atencin por parte del usuario y debe mostrarse aisladamente, mientras que la pgina de inicio tiene mltiples elementos que requieren atencin. La animacin raras veces dispone de un lugar en la pgina de inicio, ya que desva la atencin de los otros elementos. As no dotaremos de animacin ni al logotipo, ni al eslogan ni a los encabezados. DISEO GRFICO (vase Figura 41).
112
CASO DE ESTUDIO
El diseo grfico suele vulnerar la usabilidad cuando se usa como punto de partida del diseo de la pgina de inicio en vez de cmo ltimo paso para captar la atencin en un diseo de interaccin centrado en el usuario. El diseo grfico debe ayudar a dar un sentido de la prioridad al diseo de interaccin atrayendo la atencin del usuario hacia los elementos ms importantes de la pgina. 35. Limitaremos los estilos de fuente y otros formatos de texto, como los tamaos, los colores, etc., en la pgina, ya que el texto con demasiado diseo 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 ms legible posible. 37. Evitaremos el desplazamiento horizontal a 800x600, puesto que el desplazamiento horizontal plantea invariablemente problemas de usabilidad (el ms 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 ms importantes de la pgina sern visibles en su totalidad (en la primera pantalla de contenido, sin desplazarse) a un tamao que sea el ms habitual (800x600 en la actualidad). Por esta razn, no incluiremos grandes espacios en blanco entre los elementos de contenido y colocaremos el contenido y las tareas de ms alta prioridad y actualizacin en la parte superior de la pgina. A una resolucin de 800x600, la Agenda, los Recomendados y los primeros Reportajes se visualizan completamente.
Figura 41 Informacin visible antes del pliegue.
39. Utilizaremos un diseo lquido, de forma que el tamao de la pgina de inicio se ajuste a las distintas resoluciones de pantalla. 40. Aparte del logotipo de culturanocturna.com no utilizaremos otros logotipos, que podran perjudicar el aspecto de la interfaz. WIDGETS DE LA IU (vase Figura 42).
113
Los widgets de la IU, como los mens desplegables, las listas de seleccin y los cuadros de texto, atraen invariablemente la atencin de los usuarios. 41. Utilizaremos widgets slo 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 pgina contiene nicamente dos widgets que consideramos imprescindibles, el cuadro de texto de la bsqueda y los botones de seleccin de tipo radio para la zona regional de la agenda. 42. Evitaremos el uso de mltiples cuadros de entrada de texto en la pgina de inicio, especialmente en la parte superior de la pgina, donde la gente tiende a mirar si est la opcin de bsqueda. Ya que los usuarios confunden los cuadros de entrada de texto con cuadros de bsqueda, y a menudo escriben consultas de bsqueda en el lugar equivocado. Para evitar esto, la suscripcin al boletn y la colaboracin se traducirn en vnculos. 43. Los usuarios se ven atrados por los mens desplegables, aunque suelen ser los dispositivos de navegacin menos tiles. Si disponemos de unos cuantos elementos en una lista desplegable, a menudo es mejor enumerarlos directamente en la pgina de inicio. Por esa razn, hemos incluido cuatro radio buttons en la agenda, en vez de utilizar una lista.
Figura 42 Radio buttons empleados.
TITULOS DE VENTANA (vase Figura 43). Aunque a mucha gente le pueda pasar inadvertida la existencia de ttulos de ventana cuando utiliza los sitios web, los ttulos juegan un papel fundamental a la hora de marcar como favorito y localizar el sitio con los motores de bsqueda. 44. El ttulo debera empezar por la palabra que los usuarios generalmente asociarn con el sitio cuando estn buscando en una lista de marcadores, ya que el ttulo de la ventana se convierte en el nombre del marcador predeterminado. Adems, si encabezramos el ttulo de la ventana con algo que no sea la palabra ms importante, el nombre quedara perdido en las listas de resultados de bsqueda. No debe empezar ni con Bienvenido, ni con Pgina de inicio, ni por artculos determinados. Incluir el dominio de nivel superior, como el .com en el ttulo de ventana, porque forma parte del nombre: culturanocturna.com ser correcto.
Figura 43 Ttulo de pgina.
45. Incluiremos una breve descripcin del sitio en el ttulo de la ventana, pero lo limitaremos a no ms de siete u ocho palabras y menos de 64 caracteres. Los ttulos largos son ms difciles de hojear, especialmente en las listas de marcadores, y no aparecen correctamente en muchas aplicaciones. Usaremos 114
CASO DE ESTUDIO
el eslogan, puesto que es breve, significativo e incorpora un lenguaje conciso y claro: culturanocturna.com, msica electrnica y cultura de club Titulo de la pgina. LOS URL Resulta fundamental que los URL de la pgina de inicio sean lo ms sencillos y memorizables posible. 46. Debemos tener el URL http://www.culturanocturna.com. Sin incorporar cdigos complejos, ni siquiera index.html detrs del nombre de dominio. Un URL de pgina de inicio sencillo ayudar a los usuarios a entender rpidamente donde se encuentran, mientras que si el URL es complejo puede que se pregunten si en verdad estn en la pgina 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 ms detalles sobre este tema. NOTICIAS Y NOTAS DE PRENSA (vase Figura 44). Para que las noticias y las notas de prensa sean eficaces en la pgina de inicio, deberemos incorporar titulares y entradillas (el resumen que aparece debajo del titular) efectivos. 48. Vincularemos los titulares, en vez de la entradillas, con la noticia completa. El usuario debe captar que el titular es donde tiene que hacer clic.
Figura 44 Noticia con entradilla.
49. Las noticias de la pgina de inicio se habrn 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 PGINAS INTERMEDIAS. Por regla general, lo ms conveniente es mostrar el contenido del sitio inmediatamente. 50. Puesto que nuestro sitio no contendr material inapropiado para menores ni tiene intencin de herir la sensibilidad de los usuarios, no ser necesario ningn tipo de pantalla intermedia. Llevaremos a los usuarios a la pgina 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 informacin til, es probable que los usuarios las tomen por anuncios. En su lugar, colocaremos la informacin ms importante en un rea muy destacada de la pgina de inicio y promocionaremos la suscripcin y colaboracin desde diferentes lugares del sitio web.
115
PERSONALIZACIN. La personalizacin de la pgina de inicio puede funcionar bien si ello aporta a los usuarios valor sin requerir esfuerzo alguno por su parte. Se haba pensado en ofrecer a los usuarios opciones para personalizar el aspecto bsico de la IU de la pgina de inicio, como, por ejemplo, los esquemas de color. Es mejor centrarse en los recursos que aportan el mejor diseo para el mayor nmero de usuarios. No obstante, respetaremos las preferencias de navegador de los usuarios, como, por ejemplo, el tamao de fuente, utilizando tamaos relativos en lugar de absolutos. RECOPILACIN DE DATOS DEL CLIENTE (vase Figura 45). Por regla general, muchos usuarios web, incluso los ms experimentados, son muy cuidadosos a la hora de revelar sus datos personales, ya que saben que la accin de rellenar tales datos suele acabar en la recepcin de correo electrnico comercial no solicitado y en el colapso de sus buzones. 52. No habilitaremos vnculos para el registro en la pgina de inicio; en su lugar, explicaremos las ventajas que obtendr el cliente al registrarse. Diremos simple y llanamente Suscrbete a nuestro boletn mensual. Los usuarios no entran en los sitios para registrarse, pero puede que lo hagan si las razones son lo suficientemente convincentes.
Figura 45 Vnculos de suscripcin y colaboracin.
53. Explicaremos las ventajas y la periodicidad de la publicacin a los usuarios antes de pedirles sus direcciones de correo electrnico. No pediremos a los usuarios sus direcciones de correo electrnico para enviarles un boletn no especificado u otro elemento de frecuencia o contenido indeterminados. Adems, colocaremos un vnculo con un boletn de ejemplo y explicaremos las normas de privacidad cuando solicitemos la direccin de correo electrnico al usuario. FOMENTO DE UNA COMUNIDAD Lo mejor que puede hacer a nivel de pgina 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 vnculos genricos a comunidad, ofreceremos un vnculo a los foros y citaremos los temas de discusin reales. FECHAS Y HORAS Los usuarios tienen que saber que la informacin que estn viendo en la pgina de inicio es actual, pero no siempre necesitan ver la fecha y la hora junto a cada elemento.
116
CASO DE ESTUDIO
55. Mostraremos las fechas de la informacin ms necesaria, como las actuaciones recomendadas y los reportajes correspondientes a algunas de estas actuaciones. Hemos desestimado aadir fechas en los DJ Charts, pues no son realmente necesarios en la pgina de inicio (s se aadirn en la pgina correspondiente a esta categora). A pesar de no considerar oportuno escribir los meses con letras, pues la internacionalizacin no se contempla en profundidad, como en algunos pases esto puede llevar a confusin, siempre que nos sea posible escribiremos la fecha con el siguiente formato: Lun, 23 de Junio de 2003.
Figura 46 Formato de las fechas.
Migas (breadcrumbs)
Los breadcrumbs o migas de pan es un elemento muy utilizado para que el usuario no se pierda, indicndole dnde est y la relacin jerrquica de ese nodo con el resto de la estructura de la web. Utilizaremos la forma ms comn y a la que el usuario est acostumbrado. Es decir, un texto Ests aqu, y las diferentes secciones (siempre como enlaces) separadas por el smbolo '>'. Aunque se podra utilizar otro smbolo para separar las secciones, habra que asegurarse que denotan relacin de superioridad jerrquica, como por ejemplo una flecha. Por tanto, utilizar smbolos de separacin como '-' '|' sera un error, ya que estos smbolos denotan una relacin de igualdad jerrquica, por lo que suelen utilizarse en mens de navegacin 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 adems, que el website utilice breadcrumbs no significa que tenga un estructura hipertextual puramente jerrquica. Indican un posible camino desde la pgina de inicio hasta la pgina actual, y la relacin jerrquica entre todos los elementos del breadcrumbs. En la Figura 47 podemos ver una muestra de las migas en culturanocturna.com:
Figura 47
Breadcrumbs o migas de pan. Mantenimiento y expansin
Ensearemos a los que mantienen el sitio a interpretar correctamente y aplicar las especificaciones de mantenimiento, para que conozcan los estndares para actualizar el sitio y evaluar esas actualizaciones. Sirva esta memoria como base de estos documentos de mantenimientos y expansin. La gua de estilo debera incluir la explicacin de la arquitectura y suministrar un esquema de etiquetado para nombrar consistentemente nuevos topics. Procedimientos a documentar:
117
Aadir nuevo contenido de bajo nivel. La gua de estilo debera documentar como actualizar la navegacin, generar nuevos grficos, la composicin de la barra de navegacin y los ttulos y examinar la necesidad de atajos. Aadir una nueva categora. Esta documentacin debera incluir la determinacin del lugar adecuado, decidir cuantas opciones son demasiado y cuando la arquitectura necesita reorganizarse. Eliminar pginas y/o categoras, y salvar los datos que se eliminan para recuperarlos en caso de que sean necesarios. La documentacin debera incluir el trabajo con links anticuados tanto internos como externos y actualizar barras de navegacin Archivar la informacin anticuado (pero mantenindola disponible). El contenido anticuado puede ser necesario mantenerlo disponible aunque no sea activamente relevante, teniendo que eliminarlo de la navegacin primaria y localizndolo en una seccin de archivos del sitio. La documentacin debera incluir la actualizacin de links y barras de navegacin y adecuarla a una organizacin sistemtica y un esquema de renombrar los ficheros para archivarlos.
ELEMENTOS FUNDAMENTALES DE DISEO DE LA PGINA

Colores
La calibracin 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 percepcin del color. Adems, la ceguera de color (daltonismo) es relativamente comn (alrededor de un 4%). Como resultado de todas estas limitaciones, nos aseguraremos que nuestro diseo funciona en blanco y negro (vase Figura 48). Para distinguir entre dos reas coloreadas debemos asegurar que contrastan tanto en brillo como en color.
Figura 48 Test en escala de grises.
Ciertos pares de colores no funcionan bien trabajando codo con codo, debido a que el borde entre ellos parece vibrar; incluyen los pares rojo/verde, azul/violeta y rojo/azul. Si es necesario poner estos pares uno al lado del otro, podemos reducir la vibracin separndolos con una lnea slida negra. Hay gente que tiene dificultad enfocando lneas delgadas azules. Evitaremos por esta razn, un azul altamente saturado para lneas ntidas o detalladas. Se ha optado por un estilo minimalista, acorde con el carcter que se ha querido dar al sitio web. La gama de colores utilizada es bsica, pero han sido en ltima estancia los usuarios quienes han elegido un esquema de naranjas y negros en detrimento de otros esquemas usados. Los vnculos no visitados llevarn colores saturados. Los vnculos visitados llevarn un color poco saturado o menos prominente, pero no el gris claro. Subrayaremos los vnculos excepto en las listas de las barras de navegacin.
118
CASO DE ESTUDIO
Resolucin de pantalla
Disearemos las pginas para una visualizacin ptima en torno a los 770 pxeles, ya que es el rea disponible para el contenido en una ventana de 800 pxeles. Adems, el diseo ser lquido que funcione desde 620 a 1024 pxeles, de forma que se adapte al mximo nmero posible de tamaos de ventana, ms anchos o ms estrechos que la ventana estndar. Los usuarios que tengan monitores grandes apreciarn el hecho de poder ver ms contenido al poder hacer la ventana tan grande como quieran, rentabilizando as parte del precio que pagaron por ellos. Los usuarios que tengan monitores pequeos tambin se aprovecharn de una pgina que se contrae para adaptarse a sus ventanas ms pequeas. Por ltimo, los diseos lquidos se imprimen bien tanto en papel de 8,5x11 como en A4. Prevendremos el exceso de desplazamiento en la longitud de la pgina. No disearemos ms all de las cuatro pantallas completas en el tamao de ventana ms comn entre la base de usuarios (800x600).
Cuadros de entrada
El blanco parece ser una caracterstica definitoria de un campo de entrada de usuario. En consecuencia, los campos de texto sern blancos. Para conseguir la mejor usabilidad de la opcin (de bsqueda 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 cabrn 30 caracteres (vase Figura 49).
Figura 49 Cuadros de entrada en un formulario.
Imgenes
Es recomendable dedicar entre el 5 y el 15% de la pgina de inicio a imgenes. Podran necesitarse ms si su contenido fuera muy visual. Esta cuestin 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 imgenes correspondern a fotografas. Se decidir que existirn los siguientes tamaos bsicos:
Fotografa cuadradas de 160x160 pxeles. Se utilizarn para la pgina de inicio, biografas, discos y en particular siempre que haya que mostrar la fotografa de un artistas. Fotografas de 120x90 pxeles. Sern utilizadas siempre que haya que mostrar listas de items, como por ejemplo, reportajes, noticias, etc. Fotografas de 300x225 pxeles. Para titulares de noticias o especiales y cuando se requira una fotografa de mayor tamao. Fotografas de reportajes con un tamao que depender de la fotografa original, pero siempre manteniendo la calidad de la imagen.
119
Tipografa
Aunque las fuentes serif impresas suelen ser ms fciles de leer, los tipos serif muy finos no se visualizan muy bien en la generacin actual de pantallas de baja resolucin, por lo que la legibilidad es ms alta con los tipos de fuente sans-serif, como Verdana y Arial. Usaremos el tipo san-serif para el cuerpo de texto. El tamao medio de la fuente ser de 12 pxeles, que al utilizar dimensiones relativas en una vista de tamao mediano corresponde a un volumen del 75%. De acuerdo con la tabla que mostramos a continuacin (vase Tabla 3), restringiremos el uso de texto grfico solamente para el logotipo de culturanocturna.com. El resto de texto estar formateado en XHTML con el uso de CSS.
Uso de grficos para el texto El diseador tiene control total sobre el tipo de fuente y el tamao y puede garantizar la calidad visual. La distribucin de la pgina puede ser controlada porque el grfico no variar de tamao. El diseador puede controlar los bordes y el contraste para conseguir mayor claridad. Se habilitan efectos visuales (animacin GIF o rollovers en JavaScript) Se puede mantener la marca de la empresa u organizacin. Se puede integrar y posicionar el texto con elementos grficos. Tabla Uso de HTML para el texto 3 Ventajas e El texto se carga ms rpido que los inconvenientes del uso de grficos. grficos y de HTML para crear el texto en una Las fuentes pueden ser controladas web. pgina y modificadas por hojas de estilo. Los usuarios pueden modificar el tamao de la fuente para ajustarlo a su agudeza visual. Muchos usuarios navegan con la carga de imgenes desactivada. Las interfaces de los PDAs y telfonos mviles 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 ms fcilmente para ajustarse a diferentes tamaos de ventana y navegadores. Las modificaciones son mas fciles de hacer.
Utilizaremos preferiblemente el blanco como color de fondo y el negro para el cuerpo de texto, consiguiendo as el mximo contraste posible y el mximo de legibilidad. Tambin convendremos vlido 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 tambin el mximo de contraste posible, aunque tiene una legibilidad menor que el texto negro sobre un fondo blanco, que es ms estndar y se parece ms al texto impreso.
120
CASO DE ESTUDIO
Formularios
La administracin del sitio web de culturanocturna.com va a requerir un gran uso de formularios para la introduccin de contenido. Los formularios son por definicin un impedimento para el uso del sitio y por ello se deben hacer lo ms sencillos posible. El diseo 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 gua de estilos para el diseo de todos los formularios:
En el diseo de un formulario es prioritario reducir al mximo el nmero de datos a introducir por el usuario. En los casos en los que sea posible inferir informacin a partir de cualquier otra disponible, se evitar su peticin. Por ejemplo del cdigo postal o del nmero de telfono se puede inferir de la provincia. En los formularios se debe autocompletar con informacin previa tantos campos como sea posible, por ejemplo reutilizando algunos campos (corre electrnico = nombre de usuario). Si bien esto supone un mayor peso del formulario, los estudios muestran que los usuarios son ms tolerantes con el tiempo de descarga de formularios puesto que entienden que se tratan de procesos complejos y que hay informacin que procesar. Los mens desplegables frecuentemente dificultan ms que ayudan a completar los formularios, en muchos casos es ms rpido escribir directamente la informacin que seleccionarla de una larga lista de tems. Un usuario escribe antes su direccin completa, nmero, 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 inequvocas 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 ms informacin de la estrictamente necesaria. En el uso de radio buttons para respuestas largas y ms de dos, es mejor la alineacin vertical. Aunque si la respuesta tiene solo dos posibilidades, tipo "sexo", se puede optar tambin por presentarlas en horizontal, para ocupar menos espacio. Lo que nunca se debe hacer es insertar varias lneas de texto o espacios entre los radio buttons porque las posibles opciones quedan demasiado lejos unas de otras, no queda claro en un vistazo rpido que se ha de escoger solo una y obliga a leer atentamente los textos. Adems si se selecciona una opcin por defecto, sta debe ser la primera en el orden y la ms comn. El nmero mximo de opciones oscila dependiendo de su longitud y complejidad. Si las opciones son cortas y sencillas, hasta un mximo de cinco sera aceptable. Sin embargo, si las opciones son largas y de ideas complejas un nmero mayor de 3 disminuira mucho su usabilidad. En estos casos es recomendable dividir la pregunta compleja en dos ms simples. Para evitar la incomodidad del cambio entre teclado y ratn, es recomendable, cuando tenga sentido, agrupar por un lado los controles que se manejan con el ratn (radio buttons, check boxes, combos) y por otro los que se manejan con el teclado (campos de texto), en lugar de alternarlos.
121
Respecto a la situacin, tanto los radio button como los check-box siempre se han situar a la izquierda de la etiqueta del campo, as se favorece la alineacin vertical de todos los controles. Por el contrario los combos y los campos de texto deben situarse a la derecha de la etiqueta del campo.
Figura 50 Formulario de administracin.
Los elementos que requieren clic estn agrupados en el inferior (a). Adems, si podemos optar por no utilizar un combo, as lo haremos (b).
(a)
(b)
Interactividad y multimedia
Integrar elementos multimedia en nuestros diseos es una eleccin que puede tener un alto coste, como por ejemplo, restringir el acceso al sitio de determinados usuarios, distraccin de los usuarios del punto de partida o simplemente colgar sus navegadores. A su misma vez, tiene importantes ventajas, como por ejemplo, incrementar la comprensin, facilitar el entendimiento de la informacin o exaltar la experiencia del usuario. Una pgina multimedia interactiva, con animaciones Flash o con cualquier otra tecnologa, normalmente ocupar ms que la equivalente pgina con contenido esttico. Pero se puede lograr que este tamao 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 ms usable posible.
122
CASO DE ESTUDIO
Macromedia Flash
Flash puede usarse con bastante eficacia para proporcionar altos niveles de interaccin y una interesante animacin on-line, pero debe considerarse su uso cuidadosamente para asegurarnos que proporciona valor al usuario final sin causarle problemas. Por ejemplo, el empeo de algunos diseadores de desarrollar la web en un marco completo de Flash puede acarrear con graves repercusiones:

Anulacin total del sitio en buscadores. Anulacin total de la medicin del sitio va logs. No hay manera de saber que contenido interesa ms a los usuarios, que productos se visitan ms o que rutas son ms comunes. Anulacin total de crecimiento. Todo sitio web desarrollado en un marco Flash est condenado a sufrir la tirana de las versiones de desarrollo dictadas por Macromedia.
Por ello, usaremos Flash nicamente embebido dentro del cdigo HTML y solamente en casos puntuales. El Flash, como todo en el diseo 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 pginas ocupen un tamao excesivo y tarden demasiado en descargarse. Siempre proporcionando mtodos alternativos para obtener la informacin si el usuario no tiene el plug-in adecuado.
Figura 51 Matriz de fotos en Flash para los reportajes.
123
124
CASO DE ESTUDIO
7
CASO DE ESTUDIO
PROTOTIPADO
DISTRIBUCIN DE LA PGINA
Simplicidad Consistencia y contraste Foco Simplificacin y reduccin Equilibrio Repeticin Principios de Gestalt Seleccin de las pginas que requieren maqueta Pgina de inicio Maquetas Digitales Evaluacin del primer borrador en maqueta digital Evaluacin del segundo borrador en maqueta digital Evaluacin de variables concretas Storyboards Wireframes y prototipos de alta fidelidad Evaluacin del primer prototipo Evaluacin del sitio en vivo
MAQUETAS
TEST.DE LAS MAQUETAS CON USUARIOS
PROTOTIPOS TEST DE LOS PROTOTIPOS CON USUARIOS
La disposicin del contenido de la pgina est relacionada inmediatamente con el look & feel de nuestro sitio. Las primeras impresiones son fundamentales a la hora de realizar una pgina web altamente usable, bien estructurada y centrada en el usuario, pues esa ser la experiencia del usuario, el aspecto ms crtico. Un diseo que tenga xito se alcanza mediante un proceso iterativo de maquetas y prototipos. El uso combinado de maquetas y prototipos nos permitir obtener un diseo prematuro adecuado, cuando el coste de cambio es razonable y se ve posible una exploracin de alternativas ms amplia, en vez de reparar un diseo despus de que el sitio haya sido implementado por completo. Los prototipos responden cuestiones y dan soporte a los diseadores a la hora de escoger entre varias alternativas. Es ms, sirven para una gran variedad de propsitos, como, por ejemplo, testear la fiabilidad tcnica de una idea, clarificar requisitos que quedaron imprecisos, ver como responde con el resto de la aplicacin, etc. DISTRIBUCIN DE LA PGINA El objetivo principal del diseo grfico es obtener una comunicacin visual eficaz, estructurando las pginas con jerarquas consistentes de los elementos de diseo, enfatizando los ms relevantes y mostrando el contenido de una manera lgica y ordenada. Esto no significa que las pginas tengan que ser montonas y sin inspiracin. La esttica es un elemento de usabilidad, pero el diseo completo falla si se atienden pobremente los otros objetivos de la comunicacin visual. Un buen diseo debe ser estticamente agradable, pero dentro de un contexto usable. Mantener una pgina consistente, simple y enfocada en los elementos clave nos permitir explorar creativamente el espacio de diseo mientras mantenemos una pgina altamente usable [BRI02].
Simplicidad
Nos aseguraremos que los ttulos de la pgina, los elementos de navegacin y la informacin contenida son reconocidos como tales por el usuario.
Consistencia y contraste
Estableceremos unicidad a lo largo de las pginas del portal. Adems, podemos usar el contraste para conducir la atencin 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 ttulo o un icono- deben comunicar inmediatamente la informacin que contienen.
Captulo 7: Prototipado
127
Simplificacin y reduccin
Simplificacin de la estructura de la pagina y reduccin de los elementos contenidos dentro de la pgina (reducir el nmero de lneas verticales, por ejemplo, una buena manera de mantener el control sobre la estructura es limitar la pgina a 4 o menos alineamientos verticales).
Equilibrio
Se usa el equilibrio para establecer un sentimiento de consistencia y armona en la disposicin. Para desarrollar una pagina bien equilibrada, empezaremos identificando un eje central (vertical). Una distribucin simtrica es altamente organizada, es ms fcil de implementar y de revisar y adaptar. La asimtrica no es buena para contenido que cambia a menudo.
Repeticin
Reforzaremos la estructura teniendo consistentemente repetidos ciertos elementos a travs del espacio de diseo. Esto adems identificar el sitio como un conjunto cohesionado. La repeticin reduce el tiempo de bsqueda visual del usuario y mejorar la percepcin grupal. Contribuye, en un nivel ms prctico, a la usabilidad minimizando el tiempo de bajada si repetimos. En resumen, usaremos elementos repetidos en nuestra pgina para desarrollar una estructura jerrquica de acuerdo a la localizacin, tamao y matiz de los elementos repetidos; para reducir el tiempo de bajada de grficos nicos tenindolos repetidos que pueden estar en la cach local; y para facilitar la identificacin de la marca u organizacin.
Principios de Gestalt
Los principios generales de organizacin perceptual son la proximidad, la similitud y la buena continuacin. Se pueden usar para organizar una distribucin visual y, rompiendo las reglas, se pueden usar efectos (pop-out, por ejemplo) para atraer la atencin de elementos que cambian frecuentemente y reas de contenido (nuevos elementos), para resaltar la actual navegacin y localizacin o para mostrar informacin crtica. MAQUETAS Usaremos representaciones estticas del espacio de diseo para centrarnos en su look & feel y tratar de abordar los problemas de distribucin del contenido ms complejos (vase Figura 52). Adems, las maquetas nos servirn como mtodo de evaluacin con los usuarios.
Seleccin de las pginas que requieren maqueta
Elegiremos que pginas vamos a maquetar dependiendo del objetivo del borrador: si bsicamente se usarn para desarrollo interno y evaluacin con el usuario, o si su principal objetivo es la revisin con la audiencia y el acabado del look & feel. Realizaremos las maquetas de pginas que incluyen grandes cantidades de datos, estn generadas dinmicamente y/o se desvan significativamente del 128
CASO DE ESTUDIO
resto de pginas, como por ejemplo, la pgina principal o de inicio, algunas pginas de administracin, la agenda de eventos y la pgina de error. Estas maquetas en papel formarn la base de posteriores prototipos, tanto maquetas digitales, como prototipos HTML.
Figura 52 Mquetas en papel. Diversas miniaturas y maquetas en papel de las pginas de inicio (a-c), esquemas (d) y la pgina de agenda (e).
(a)
(b)
(c)
(d)
(e) En refinamientos posteriores y etapas ms avanzadas usaremos las maquetas para la aprobacin del look & feel por la audiencia. En este caso, escogeremos la pgina de inicio. Vamos a ejemplificar paso a paso la creacin de una de las versiones de sta pgina, en la que posteriormente basaremos el diseo definitivo.
Pgina de inicio
129
Miniaturas (thumbnails). Empezaremos desarrollando una serie de thumbnails basados en los requisitos bsicos de la pgina (vase Figura 53). Con los thumbnails exploraremos el espacio de diseo de una forma extremadamente rpida, ya que son pequeos y no estn muy detallados.
Figura 53 Conjunto de miniaturas (thumbnails) de la pgina de inicio.
Crearemos un bosquejo ms refinado del thumbnail escogido. Una vez escogido el thumbnail del cual realizaremos la maqueta, bosquejaremos un borrador en grande y ms refinado. Crearemos la maqueta (vase Figura 54) dibujando los lmites de la pgina, los elementos bsicos y la estructura: reas de navegacin, cabeceras, pies de pgina, rea de contenido... Aadiremos logotipos, grficos clave, etiquetas principales y ttulos y acabaremos aadiendo texto de contenido y la situacin de las fotos. Chequeo de la maqueta y evaluacin. Nos aseguraremos que hemos seguido todos los criterios de creacin evaluando la maqueta con unos principios heursticos incluidos en el apndice REVISIN DE LOS PROTOTIPOS.
130
CASO DE ESTUDIO
Figura 54 Maqueta en papel de la pgina de inicio.
Maquetas Digitales
Una vez hemos conseguido un diseo de una manera rpida y poco costosa, produciremos maquetas digitales, debido a su facilidad para cambiar colores y mover los elementos a lo largo del espacio, permitiendo rpidos cambios en la paleta de colores, tipos de fuentes, etc. Se realizarn maquetas digitales bsicamente para evaluarlas con los usuarios. En este punto, nos interesar que los usuarios se centren en detalles de la distribucin de la pgina y en cuestiones como la eleccin de la fuente, los espaciados, los nombres de las etiquetas o los colores. En la Figura 55 pueden verse dos versiones diferentes de la pgina de inicio. La intencin buscada no es compararlas, sino extraer conclusiones de las pruebas con los usuarios y optar por una versin en la que centrarnos para alcanzar un diseo nico. La comparacin como mtodo para obtener conclusiones tiene su fortaleza cuando los sitios comparados son idnticos y solo difieren en una sola caracterstica, es decir, la caracterstica que estamos comparando [MAN02d]. El nico uso adecuado de la comparacin como herramienta de la usabilidad es durante la fase de creacin de prototipos de bajo coste. Es posible crear dos prototipos idnticos que solo varen en una caracterstica y realizar test de usuarios sobre ellos.
Figura 55 Maquetas digitales de la pgina de inicio. La versin (a) fue desestimada. Se escogi Prototipado 131 para futuras interaciones la versin (b).
Captulo 7:
(a)
(b)
132
CASO DE ESTUDIO
TEST.DE LAS MAQUETAS CON USUARIOS El proceso general para realizar la evaluacin de prototipos con usuarios se compone de los siguientes pasos:

Planificacin del test. Determinaremos el alcance de la prueba y de las tareas. Reunin 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. Preparacin 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 duracin. Conduccin de la prueba. Obtendremos el consentimiento del usuario y procederemos a evaluar una tarea, recordando el comportamiento al usuario. Anlisis 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 apndice FORMULARIO DE PREPARACIN DE UN TEST CON USUARIOS para preparar las pruebas con los usuarios.
Evaluacin del primer borrador en maqueta digital
Las dos opciones evaluadas con los usuarios constan de dos borradores de la pgina principal, uno organizado horizontalmente y otro organizado verticalmente (vase Figura 55). El objetivo es extraer conclusiones de las opiniones de los usuarios para elegir un diseo nico. Nos centraremos en los siguientes objetivos:

Principales secciones del sitio. Examinar la disposicin de la navegacin. Lugares donde hacer clic. Valoracin esttica de la maqueta (del 1 al 7 -estticamente inmejorable-).
A continuacin recogeremos las conclusiones alcanzadas:

El etiquetado de las secciones en vertical es ms difcil de leer que en horizontal. Un usuario se quej de los espacios asimtricos en blanco de la maqueta con disposicin vertical. Los usuarios creen que son ms importantes las secciones ms grandes y centrales. En la maqueta con distribucin horizontal, todas las secciones parecen tener la misma importancia. El usuario declara que una distribucin vertical le recuerda ms a una revista. Un usuario confunde con un banner la barra de navegacin de la maqueta con disposicin horizontal. Las valoraciones estticas no decantan hacia ninguna solucin clara.
133
Evaluacin del segundo borrador en maqueta digital
Refinaremos la maqueta de la pgina principal seleccionada y evaluaremos plantillas de pginas de segundo nivel y de contenido.
Figura 56 Miniaturas de la pgina de la agenda.
Figura 57 Miniaturas de la pgina de reportajes.
Figura 58 Maqueta digital de la pgina de reportajes.
134
CASO DE ESTUDIO
Figura 59 Maqueta digital de la pgina de inicio.
135
Figura 60 Maqueta digital de pgina no encontrada.
El objetivo de esta evaluacin es probar si en los diseos de pgina se alcanzan las metas y necesidades del usuario. Si adivinan donde encontrar las cosas y si consiguen entender la navegacin de la pgina:

Qu sitio es este? En que pgina ests? Cul es la funcin del sitio? Por dnde crees que debes empezar? Sobre que haras clic?
Cambios y conclusiones:
Los usuarios creen que deberan hacer clic en los titulares de las secciones. Slo cuando no encuentran la opcin en las secciones buscan en la barra de navegacin. Se opta por intercambiar la ubicacin del calendario y la seleccin de zona. Los usuarios tienden a hacer clic en el da del calendario antes de fijarse en la posible seleccin de zona. La etiqueta DJ Charts se cambiar por Top Ten y se seguir evaluando. Los usuarios resaltan la importancia de las fotografas. En un caso se adivin el tema de la pgina en funcin de la foto de un DJ. Siempre que el peso de la pgina no aumente demasiado se aadirn fotografas. Con relacin a lo anterior, los usuarios encuentran los reportajes como lo ms importante.
Evaluacin de variables concretas
En esta evaluacin compararemos determinadas maquetas con una variable concreta, es decir, cambiando un nico elemento del diseo. Probaremos distintos esquemas de colores, tipografas (vase Figura 62), etc. Se elaborarn 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 (vase Figura 61). Los usuarios nos darn su opinin.
136
CASO DE ESTUDIO
Figura 61 Maqueta digital de la pgina de inicio. ltimo borrador antes de implementar.
137
Figura 62 Diversas maquetas de la pgina de enlaces. Revisamos el ttulo de la pgina: alineado a la derecha (a), a la izquierda (b) o con una tipografa diferente (c).
(a)
(b)
(c) Las conclusiones:

Dos de los tres usuarios evaluados optaron por un esquema de colores de naranjas y negros. Colocar el ttulo de la pgina a la derecha no es un handicap que haya que evitar obligatoriamente. Una vez han encontrado el ttulo a la derecha recordarn buscarlo la prxima vez en la misma ubicacin. No es algo que moleste a los usuarios.
PROTOTIPOS Los prototipos proporcionan un marco de trabajo ms til para estudiar la interaccin de la estructura completa del sitio. Existen varios tipos de prototipos: storyboards, pantallas de distribucin o storyboards de uso (wireframes) y prototipos de alta fidelidad (high-end prototypes).
138
CASO DE ESTUDIO
Storyboards
La cantidad de trabajo con storyboards es mayor que con la generacin de maquetas digitales o en papel, debido al nmero de pantallas que hay que presentar. Adems, aprovecharemos cuanto antes la oportunidad de probar y poner en prctica el uso de las tecnologas que permitirn construir el sitio web, programando los prototipos posteriores en XHTML y la interaccin de PHP con la base de datos MySQL. Por esta razn, reduciremos la creacin de storyboards a una evaluacin interna para diseo y desarrollo (vase Figura 63).
Figura 63 Storyboards del formulario de administracin de la agenda.
(a)
(b)
Wireframes y prototipos de alta fidelidad
Para los prototipos finales disearemos pginas en XHTML lo ms completas y funcionales posibles. Estas pginas servirn 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 versin anterior al lanzamiento.
139
Figura 64 Prototipos finales. Podemos ver la pgina de la agenda de eventos (a) y la pgina de artistas (b).
(a)
(b)
140
CASO DE ESTUDIO
Figura 65 Prototipos finales. Podemos ver la pgina que se usar para archivos no encontrados (a) y el mapa del sitio (b).
(a)
(b)
141
Figura 66 Prototipos finales. Podemos ver la pgina de noticias (a) y una noticia en concreto (b).
(a)
(b)
142
CASO DE ESTUDIO
Figura 67 Prototipos finales. Podemos ver la pgina de login para identificacin de usuarios (a) y la pgina de administracin de la agenda (b).
(a)
(b)
143
Figura 68 Prototipos finales. Podemos ver la pgina de administracin de artistas (a) y la pgina de administracin de la citas (b).
(a)
(b)
144
CASO DE ESTUDIO
TEST DE LOS PROTOTIPOS CON USUARIOS

Evaluacin del primer prototipo
Comprobaremos que todava se mantiene la usabilidad alcanzada con la evaluacin 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 continuacin: Revisaremos la navegacin. Consiguen entender el sitio? Tareas clave: Puedes encontrar la biografa de tu DJ favorito? Qu programacin hay en tu club favorito el prximo da que salgas de fiesta? Cmo dejaras tu opinin en el foro? Qu haras si estuvieras interesado/a en colaborar con culturanocturna.com? Puedes encontrar una noticia que se haya publicado hace una semana? Navegacin por placer.

Notas y cambios propuestos a travs de las pruebas con los usuarios:
Originalmente, el calendario tena resaltado el da actual. Esto confunde a los usuarios cuando seleccionan otro da y se mantiene resaltado el da actual, en vez del seleccionado. En pgina principal mantendremos el da actual y en agenda se resaltar el da seleccionado. La mayora de usuarios tienden a hacer clic en las fotografas. Intentaremos que todas las fotografas lleven a un contenido lgico. Lo usuarios no tienen problemas para utilizar el calendario como buscador de eventos. Es una metfora 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 mayora de los usuarios tienden a hacer clic en titulares, aunque no estn subrayados. Los convertiremos en vnculos. La bsqueda 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 rpidas de bsqueda como no se tendr en cuenta el prefijo DJ o busca por la letra inicial del nombre artstico del DJ o productor.
Evaluacin del sitio en vivo
Una vez hagamos accesible on-line el sitio web, deberemos evaluar todo el contenido disponible, as como todas las pginas. Adems, en esta fase se probarn extensiva y minuciosamente las pginas de administracin.
145
146
CASO DE ESTUDIO
8
CASO DE ESTUDIO
IMPLEMENTACIN
USABILIDAD EN EL DESARROLLO DEL SOFTWARE

Arquitectura de aplicacin lgica 3-tiered Gestin de los Activos Eleccin de las herramientas de desarrollo Ingeniera de los componentes del sitio web
DISEO BSICO DE LA PGINA ESCRIBIR PARA LA WEB
En esta fase agruparemos todo el trabajo de codificacin 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 evaluacin 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 bsicos que se producen en esta etapa:

Un tiempo de respuesta pobre; Inconsistencia en el cdigo de la pgina web; Incompatibilidades entre plataformas; Uso pobre de la tecnologa; Documentacin insuficiente.
Para tal fin, no es necesario un tratamiento independiente de cada problema de usabilidad, bastar con la aplicacin de tcnicas y buenas practicas de desarrollo para solucionar mltiples de ellos.
Arquitectura de aplicacin lgica 3-tiered
El desarrollo de la aplicacin sigue una aproximacin sistemtica del tipo divide y vencers (divide-and-conquer) llamada arquitectura de 3 capas (3tiered architecture) [BRI02], [SAD00],[WHI98], debido a que distribuye la arquitectura en las siguientes capas (vase Figura 69): Capa 1. Capa de presentacin o interface. La capa de presentacin representa la parte del sistema con la que interacta el usuario. En una aplicacin web, generalmente la capa de presentacin se divide en dos: el lado servidor y el lado cliente. En el lado servidor ocurre toda la interaccin con la lgica de negocio, y es tambin 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 lgica de negocios o middleware. El comportamiento de la aplicacin es definido por los componentes que modelan la lgica de negocio. Estos componentes reciben las acciones a realizar a travs de la capa de presentacin, y llevan a cabo las tareas necesarias utilizando la capa de datos para manipular la informacin 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 dinmico o aplicaciones web, se usa adems una tercera capa, la capa de servicios, datos o backend. Capa 3. Capa de datos o backend. La capa de datos tiene como misin la administracin de la informacin que maneja el sistema. Esto incluye el almacenamiento, la actualizacin y la consulta de todos los datos contenidos 149
Captulo 8: Implementacin
en el sistema. En la prctica, esta capa es esencialmente un servidor de bases de datos.

Figura 69 Ejemplo de Arquitectura 3tiered.
La implementacin de un sitio web se divide en 3 capas. La capa de presentacin, que incluye todos los componentes de la interfaz de usuario. La capa de datos, que proporciona servicios de bases de datos. La capa de lgica de negocio que conecta las anteriores capas.
Las aplicaciones 3-tiered que funcionan de esta manera, tienen su origen en el estndar del modelo de cliente-servidor (2-tiered), pues colocan un servidor conteniendo una aplicacin multiproceso (multithread) entre la aplicacin 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 gestin de sesiones con PHP, que permiten llevar un control sobre identificacin de usuarios, necesario para la administracin. El middleware responde a cuestiones como los datos a introducir en la base de datos, la peticin SQL y el uso general de PHP desde el lado del servidor. La interfaz de usuario se disea a partir de XHTML generado por PHP que se mostrar en el navegador del usuario. Se hace tambin un uso, lo ms escaso posible, de JavaScript y de la tecnologa Flash.
En general, esta aproximacin 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 cuestin una mayor estabilidad y robustez. Dicho sistema no necesariamente tiene que encontrarse en una sola mquina sino tambin pueden ser manipulados a travs de cierto tipo de comunicacin, especficamente mensajes que es como se comunican las computadoras inmersas dentro de una red. Adems, el desarrollo y el mantenimiento es ms sencillo y mejora la escalabilidad y la seguridad. Separando lgicamente (y fsicamente) las capas, los componentes de cualquiera de estas pueden actualizarse o mantenerse relativamente independientes de las otras capas. 150
CASO DE ESTUDIO
Figura 70 Arquitectura 3-Tiered para el desarrollo software.
Finalmente, las arquitecturas de 3 capas se usan a menudo para planificar medidas de seguridad en el sistema. Esto se consigue normalmente aadiendo cortafuegos (firewalls) entre cada capa. Por ejemplo, un protocolo cortafuegos puede permitir peticiones HTTP a travs del servidor web, pero no peticiones Telnet que permitieran a usuarios externos controlar el servidor web. Entre la capa de lgica de negocio y la capa de datos se sita un cortafuegos de dominio que solamente permite servicios para ser suministrados a maquinas dentro del domino de confianza.
Mapeo de los flujos de datos y control
Existen varias maneras de representar visualmente el flujo de control y de datos basndonos en una arquitectura de 3 capas: Una traza de peticin dinmica (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 informacin. La muestra una traza dinmica para la tarea de administracin de un contenido genrico, que incluye las tareas de identificacin (login), bsqueda de la informacin a administrar, seleccin de esa informacin y confirmacin.
151
Figura 71 Traza de peticin dinmica.

Este diagrama traza el flujo de datos a travs de los componentes del sistema. De una manera general muestra como se procesa una peticin de acceso y como se genera la confirmacin a travs de una arquitectura 3-tiered.
Los diagramas de latencia del sistema (system latency diagrams) son tiles para mostrar como contribuye cada funcin del sistema al total del tiempo que conlleva realizar una tarea en concreto. Es especialmente til para optimizar la ejecucin del sistema y reducir los efectos de los cuellos de botella. No hemos trabajado con estos mtodos directamente, as que no profundizaremos ms en ellos.
Gestin de los Activos
La gestin de los activos es la prctica sistemtica del seguimiento de los diversos recursos del sistema, tales como imgenes, 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 vnculos y actualizar las pginas (vase Figura 72).
Dividiremos el sitio en categoras. Colocaremos las pginas relacionadas en una misma carpeta. Este tipo de organizacin facilitar el mantenimiento y la navegacin por el sitio. Por ejemplo, a la hora de mostrar las migas (breadcrumbs). Administracin. Los archivos correspondientes a la administracin y gestin de contenidos del sitio web se separarn del resto de ficheros pblicos. Todos los ficheros de la seccin de administracin irn protegidos por autentificacin de usuario. Imgenes y otros activos. Colocaremos todas las imgenes y fotografas en sus emplazamientos propios, a fin de facilitar su localizacin cuando queramos insertarlas en la pgina. Uso de la misma estructura para el sitio local y el remoto. El sitio local y el sitio web remoto tendrn exactamente la misma estructura.
Eleccin 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: gestin del proyecto, gestin del sitio y los activos, soporte a la codificacin y
152
CASO DE ESTUDIO
soporte a la tecnologa. Veamos las caractersticas que nos sern particularmente tiles:
Figura 72 Imagen de la estructura de directorios de culturanocturna.com.
Gestin del proyecto. Soporte para las siguientes reas:

Colaboracin y control de versiones. Notas de diseo: la capacidad para aadir notas o tareas a pginas individuales con referencias a su estado actual. Facilidad para la gestin del proyecto: soporte para asignar tareas y producir informes de estado.
Gestin del sitio y los activos:

Mapas del sitio: que pueda mostrarse visualmente en estructura de rbol o diagramas. Importacin y exportacin del sitio. Vista de los activos: para organizar los activos de un tipo particular de una manera coherente. Creacin de plantillas. Transferencia de archivos: poder transferir las pginas modificadas automticamente al servidor.
Soporte al cdigo:

Coloreado del cdigo. Chequeo de la sintaxis. Chequeo de los links: para controlar los enlaces invlidos o muertos.
153
Chequeo de accesibilidad: asegurar que todas las etiquetas ALT y otros elementos de cdigo usados aseguren igual accesibilidad al contenido. Sangra de cdigo: para ayudar al desarrollador a organizar el cdigo de una forma legible. WYSIWYG y vistas de cdigo: capacidad para cambiar fcilmente entre el cdigo y las vistas del diseo de la pagina Edicin y depuracin de scripts. Creacin de tablas con herramientas grficas. Creacin de formularios rpidamente con tcnicas de arrastrar y soltar. Sin mutilacin del cdigo: las herramientas automatizadas nunca cambiaran el cdigo creado a mano.
Soporte a la tecnologa especializada:

Dependencia de tecnologas de servidor no estndares. Soporte para la creacin, mantenimiento y uso de hojas de estilos. Soporte XHTML. Integracin de bases de datos. Soporte de plug-in para tecnologas de terceros que no soporta directamente.
Optaremos por el uso de Macromedia Studio MX, como suite integrada para la produccin de nuestro sitio web. Cumple todos los requisitos expuestos anteriormente e incluye programas de diseo grfico como son Fireworks MX y FreeHand 10, que utilizaremos en el diseo de los elementos de la interfaz y en el retoque de fotografas para la web. Tambin se acompaa del programa Macromedia Flash MX para la creacin e inclusin 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 corrern en una plataforma Linux, ms estable e infinitamente ms segura trabajando con el tpico LAMP (comentado con mas detalle en el ).
Ingeniera 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: construccin de la pgina, scripting y programacin del lado del cliente: La construccin de la pgina se refiere al formateo del contenido y diseo de pginas individuales con XHTML, tanto como integrar otras tecnologas dentro del HTML, como applets Flash. El scripting del lado del cliente incluye Javascript que se incluyen como parte de la pgina web e interactan con componentes visuales de ella. La programacin 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: programacin PHP e integracin y desarrollo de bases de datos: La integracin de la base de datos MySQL y la programacin 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 diseo de las bases de datos que alimenta las paginas dinmicas. Se comenta brevemente el uso de la base de datos MySQL en el .
Usaremos algunas tcnicas de desarrollo del cdigo para prevenir los tipos de problemas de usabilidad ya comentados anteriormente:
Tcnicas de construccin de pginas HTML
Codificacin para velocidad: para que el tiempo de descarga sea de un mximo de 10 segundos a la velocidad de conexin media de los usuarios, el tamao de archivo para usuarios provistos de MODEM ha de ser menor de 50Kb. Codificacin para mantenimiento: documentaremos el cdigo con profusin de comentarios. Codificacin para calidad: se pueden eliminar la mayora de los problemas de compatibilidad de navegadores de una pgina con slo verificar si el cdigo es correcto, pasndolo por un validador. La parte ms difcil de corregir problemas pequeos es encontrarlos en primer lugar. Para eso sirve el validador. Validaremos nuestras pginas usando servicios de validacin disponibles en la red, para garantizar la estandarizacin del cdigo. 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 validacin de HTML y XHTML (http://validator.w3.org/) Servicio de validacin de CSS (http://jigsaw.w3.org/css-validator/) Codificacin para los motores de bsqueda: como primera medida aadiremos los campos adecuados a los metatags. Codificacin semntica en vez de la presentacin por cdigo: 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 solucin ms apropiada pasa por separar el contenido de las instrucciones especficas sobre la visualizacin. La informacin relativa a la presentacin de la informacin habra que mantenerla en un archivo de hoja de estilos separado que estara vinculado a un archivo de contenido que solo incluira marcado semntico. 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 marcacin. Su reemplazo es HTML ampliable (en ingls XHTML): una implementacin 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.
Programacin del lado del cliente
Incluiremos JavaScript y Flash en el lado del cliente. Mediante la inclusin de estas tcnicas, la interaccin con el usuario se vuelve muy rica, proporcionando posibilidades ilimitadas en la interfaz y un comportamiento dinmico 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, dejndoles tener la eleccin de usar esta tecnologa, de tal manera que si no hacen uso de ella
155
proporcionaremos alternativas posibles. En todo caso, reduciremos en lo posible los requisitos de la parte del cliente. Exportaremos JavaScript y CSS a archivos externos: con ello lograremos centralizar el cdigo, ya que si tenemos que hacer cambios slo es necesario hacerlo una vez para cada pgina que lo utiliza, y ahorrar ancho de banda, ya que el cliente slo descarga los archivos de JavaScript y CSS una vez, en lugar de una vez por pgina.
Programacin PHP
Escribiremos el cdigo para un fcil mantenimiento, aadiendo comentarios y modularizando y encapsulando siempre que nos sea posible. Codificaremos atendindonos a los estndares del PEAR, comentado en el . No dependeremos exclusivamente de la validacin de la parte del cliente para las entradas.
Integracin 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 pgina de inicio y la base de datos culturanocturna, que comprende tablas con prcticamente todo el contenido del sitio web, como son las tablas de la agenda, los artistas, los clubes, las citas, los reportajes o las noticias. Veamos como ejemplo una muestra de 6 tablas de las 16 que conforman la base de datos:
TABLE agenda ( TABLE artista ( id int(10) unsigned - auto_increment, id int(10) unsigned - auto_increment, fecha date - default '0000-00-00', artista varchar(40) - default '', zona varchar(40) - default '', nombre varchar(40) - default '', fiesta varchar(40) default NULL, pseudonimo varchar(80) default NULL, artistas tinytext -, nacionalidad varchar(20) default NULL, club varchar(40) - default '', sello varchar(40) default NULL, horario varchar(20) - default '', url varchar(80) default NULL, precio varchar(7) - default '', biografia enum('si','no') - default 'no', recomendado enum('si','no') - default 'no', entrevista enum('si','no') - default 'no', revisado enum('si','no') - default 'no', chart enum('si','no') - default 'no', PRIMARY KEY (id) PRIMARY KEY (id) ); ); 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 especial ( 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 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) );
DISEO BSICO DE LA PGINA Dado que no existe forma de saber el tamao que pueden tener las pantallas de los usuarios, hay que disear para todas las resoluciones de pantalla (en otras palabras, pginas independientes de la resolucin que se adapten al tamao de la pantalla en la que se vayan a visualizar). El principio bsico del diseo independiente de la resolucin consiste en no usar nunca un ancho de pxel fijo para ninguna tabla, marco o elemento de diseo (exceptuando las barras finas en la parte lateral de la pgina). En vez de usar tamaos fijos, habr que especificar diseos como porcentajes del espacio disponible (vanse Figura 73, Figura 74, Figura 75 y Figura 76). Las dimensiones de una pgina web son entidades movibles dinmicamente que se niegan a permanecer constantes. Pero existen consistencias en las que podemos confiar (vase Tabla 4): La esquina superior izquierda es esttica: es el nico lugar en el que podemos confiar, todo lo dems puede cambiar. Las pginas se cargan de arriba abajo, de manera que la esquina superior izquierda es esttica y las esquinas derecha e inferiores variarn. 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 pgina en una tabla).
Figura 73 Pgina de inicio con una resolucin de 800X600 y tamao de letra mediano.
157
Figura 74 Pgina de inicio en una resolucin de 1024x768, con un tamao de letra mediano.
Figura 75 Pgina de inicio en una resolucin de 1024x768, con el mayor tamao de letra disponible en el navegador.
El espacio blanco, aunque pueda parecer que es una perdida de espacio, puede ser efectivo en la organizacin y soporte de la estructura de la pgina. Mientras que el espacio blanco vertical puede ser til para diferenciar entre secciones de contenido, el espacio horizontal tiene un coste ms 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 informacin. Si tenemos la opcin de separar dos segmentos de contenido con una lnea gruesa o con espacios en blanco, normalmente ser mejor utilizar la solucin de los espacios en blanco, que suele descargarse antes [NIE99].
158
CASO DE ESTUDIO
Figura 76 Pgina de inicio en una ventana reducida del navegador a una resolucin de 1024x768 y tamao de letra mediano.
Tabla 4 Anchos y altos de pgina y resolucin comunes para soluciones de ancho Plataforma fijo.
Esta tabla presenta las dimensiones recomendadas PC a las que el diseo debera ajustarse para plataformas y Internet Explorer 5.0 resoluciones de pantalla Netscape 4.5 especificas.
Espacio de pantalla usado por los navegadores (en Pxeles)
AREAS SEGURAS DE RESOLUCIN (Ancho x Alto) Resoluciones de pantalla 640 x 480 800 x 600 1.024 x 768
43 x 160 46 x 125
597 x 320 594 x 355
757 x 440 754 x 475
981 x 608 978 x 643
MacOs
Internet Explorer 5.0
Netscape 4.7
53 x 152 44 x 130
587 x 328 596 x 350
747 x 448 756 x 470
971 x 616 980 x 638
ESCRIBIR PARA LA WEB Escribir para la web no es lo mismo que si lo hiciramos para un medio impreso. Hay algunos aspectos bsicos de la web que afectan a la manera de escribir el texto:

Las pginas son fciles de cambiar y fijar y por lo tanto son ms transitorias que el papel. La poblacin de usuarios generalmente sabe algo de ordenadores e Internet. El contexto de la web es normalmente ms informal que el papel.
159
La tecnologa restringe la navegacin y la muestra del texto. Y el texto puede contener enlaces y otros elementos interactivos.
En el apndice GUA DE ESTILO PARA ESCRIBIR CONTENIDO hemos incluido una gua de estilo que define la manera de desarrollar contenido escrito para culturanocturna.com. Adems, debemos tener en cuenta el texto que no aparece como contenido en la pgina:

Ttulos de pgina, texto ALT, cabeceras, metatags y botones. Usaremos ttulos en los enlaces para indicar el tipo de enlace, ya que algunos navegadores usan el parmetro TITLE que muestra un mensaje especifico cuando el usuario posiciona el puntero del ratn sobre el vnculo: <a href=http://www.culturanocturna.com title=Pgina de inicio de culturanocturna.com>culturanocturna.com</a> Podemos prevenir que en los vnculos se partan las palabras usando espacios sin particin (nonbreaking spaces, en HTML). No ocultaremos las direcciones de correo dentro de un enlace. Es decir, usaremos vnculos 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 pginas 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 Promocin del sitio web Directorios y motores de bsqueda Enlaces en pginas afines Resolucin rpida de problemas Anlisis de los Hit Logs
LANZAMIENTO
POST-LANZAMIENTO
El lanzamiento del sitio web no es un evento aislado que se alcanza en el momento en el que el sitio est preparado, sino que requiere un conjunto de actividades y de preparacin. 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 crticos. Despus del lanzamiento, deberemos promover y mantener el sitio y continuar evaluando su ejecucin. PRE-LANZAMIENTO En el diseo web se dice que es ms probable encontrar el Santo Grial que una web que cumpla con la fecha de lanzamiento. Por esa razn, entre otras, se incluye en la planificacin del desarrollo del proyecto un tiempo aadido (10%) para tratar con situaciones inesperadas que seguramente acontecern.
Registro del nombre de dominio
Uno de los pasos cruciales en la planificacin 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 extensin. Adems, considerando posibles alternativas, registraremos los siguientes nombres de dominio:

culturanocturna.com culturanocturna.net cultura-nocturna.com culturanocturna.org
Quality Assurance
Los procesos de garanta de calidad (QA) tendrn lugar durante el proceso de produccin.
Test con regresin: significa volver a efectuar un test despus de efectuar cambios para la resolucin de un error. Verifica dos cosas, que el cambio que se ha hecho soluciona el problema identificado y que el cambio no deshace nada ms en el proceso. La introduccin 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 deberan alcanzar los usuarios. Test de cdigo: revisin del cdigo y de la capacidad del servidor para cumplir los requisitos tecnolgicos. Test de carga: comprobaremos los tiempos de respuesta del sistema.
Severidad de los errores
Un objetivo comn para un lanzamiento sin errores consiste en eliminar todos los problemas de objetivo crtico (mission-critical), que son fatales porque no permiten alcanzar la meta del usuario (por ejemplo, la ausencia de un botn enviar), eliminar la mayora de los problemas moderados, que son problemas
Captulo 9: Lanzamiento
163
que permiten realizar la tarea pero con obstculos (por ejemplo, que el botn enviar se llame ok) y tantos problemas menores como podamos permitirnos (no causan obstculo, como por ejemplo que el botn est mal alineado).
Tipos de errores
Errores estticos: problemas de carga de imgenes, fallos en el alineamiento, problemas de legibilidad, colores, tipos y distribucin de la presentacin. Errores estructurales: diseos estructurales con relacin a la arquitectura de la informacin, como por ejemplo llegar a pginas sin vnculos de salida o la ausencia de un vnculo desde reportajes a fotos. Errores de plataforma: aparecen solo en hardware especfico, sistemas operativos o configuraciones de navegadores diferentes. Errores de cdigo: 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 apndice FORMULARIO DE INFORME Y RESOLUCIN DE PROBLEMAS. Adems, realizaremos una evaluacin automtica que consistir en el uso de software que detecte problemas elementales, como por ejemplo:

Tamaos absolutos de fuentes y de tablas . Formato de los textos. Tamao de las pginas. Tiempos de descarga. Enlaces rotos.
Usaremos los recursos de dominio pblico de Web Metric Tools. La ventaja de esta evaluacin es la rapidez, pero no detecta cuestiones globales de usabilidad, las ms importantes. Muchas de las cuestiones cruciales slo pueden ser detectadas de forma heurstica. An 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-produccin, que permite testear decisiva y rpidamente la calidad del HTML en el que se basa la pgina. La podemos encontrar en el apndice REVISIN DE LA POSTPRODUCCIN.
164
CASO DE ESTUDIO
Promocin del sitio web
A continuacin vendran una serie de actividades de promocin del sitio. Los usuarios debern ser capaces de encontrar nuestro sitio cuando naveguen por Internet. Si no pueden encontrar el sitio, no lo podrn usar. Cmo podemos encontrar un sitio? Hay tres formas principales [BAE02]:

Directa: conocemos la direccin del sitio ya sea por publicidad en medios de comunicacin 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 slo llegaremos a los sitios con ms recursos o que son populares. La tercera opcin es la ms sencilla y adems es casi la nica para sitios nuevos o sitios pequeos. 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 despus de encontrarlo, hay que poder verlo. Al concepto de poder ver un sitio se le llama visibilidad.
Directorios y motores de bsqueda
Describiremos el sitio de acuerdo a las necesidades de informacin de los usuarios. Hay varias maneras de incrementar las oportunidades de que nuestro sitio aparezca en las listas de los motores de bsqueda:
Colocaremos las palabras claves en sitios cruciales dentro de las pginas web para que los buscadores puedan encontrar fcilmente esta informacin y extraerla. El ttulo de la pgina es lo ms importante. Una de las causas ms comunes por la que una pgina muy buena y relevante muestra un ranking muy bajo es porque no hay palabras claves en el ttulo. Tambin utilizaremos palabras claves en los primeros prrafos de la pgina web. Normalmente los buscadores suelen extraer del ttulo hasta los primeros 60 a 80 caracteres (aunque hay excepciones), intentaremos introducir el texto ms importante dentro de estos lmites. 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 cdigo fuente de la pgina el texto aparecer mucho ms abajo). El uso de metatags simplifica la tarea de indexar una pgina web (slo en los buscadores que soportan metatags) por los spiders de los buscadores. Las metatags ms importantes son: el ttulo, descripcin y palabras claves. Insertar metatags es una manera de controlar la informacin que el buscador extraer de nuestra pgina.
Enlaces en pginas afines
Intercambiaremos enlaces con otros sitios. Especialmente aquellos cuya temtica extienda la de culturanocturna.com. Esta es la mejor forma de mejorar la posicin en las respuestas, ya que los buscadores ms importantes usan la estructura de enlaces para jerarquizar sus resultados.
165
Resolucin rpida de problemas
Para una rpida verificacin de que el sitio permanece estable despus de una actualizacin menor, podemos usar la lista de control del apndice LISTA DE CONTROL PARA UN MANTENIMIENTO MNIMO, 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 mtodos de evaluacin pueden ayudar a redisear un sitio web, pero sus resultados deben ser interpretados con cautela. Aunque son capaces de dar mucha informacin y de obtener tericos ndices de la usabilidad de un sitio, no dicen como se ha de disear de manera usable.
Anlisis de los Hit Logs
Tcnicamente 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 mtodo de recogida de informacin el log presenta una tolerancia en su precisin. El principal problema que tiene el log es que nos puede dar menos visitas de las que realmente se estn produciendo. La cach (del navegador o del servidor proxy) harn que mltiples 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 conexin del usuario. Al no tener esta referencia, el tiempo de conexin se convierte en un parmetro algo incierto. Del tiempo de conexin, cunto se dedica a la bajada de datos y cuanto a tiempo de lectura? Adems, como hemos dicho, en estos estudios los parmetros registrados no siempre son buenos como prediccin de la usabilidad. Por ejemplo, supongamos que una pgina en particular recibe el 65 por ciento de las visitas (hits). Podramos pensar que esa pgina debe ser la preferida por los usuarios, que debe ser muy til. Sin embargo, en realidad, puede ser que nuestra estructura de navegacin fuerce a la mayora de los usuarios a cruzar esta pgina para obtener la informacin que realmente estn buscando. As pues, es la relevancia de los datos lo que importa, no los nmeros en crudo. Para valorar los resultados de nuestro log, deberemos comparar. Lo mas normal es comparar los datos de forma interna viendo la evolucin en el tiempo (comparando el nmero de visitas mes a mes, nmero de pginas vistas, duracin de las visitas). Esta comparacin nos dar una idea sobre la evolucin del sitio, como cambios en la portada pueden afectar al nmero de pginas vistas, reduccin del peso del sitio y la evolucin 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 pginas similares. Pginas de men, fichas de artistas, formularios... debern ser extradas del log para ver informacin sobre el tiempo de permanencia, siguiente pgina, pgina de referencia, etc. Esta comparacin resultar ms sencilla cuanto ms homogneo 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 informacin. Utilizaremos dos herramientas de dominio pblico y cdigo Open Source para el anlisis de nuestros logs: Webalizer (http://www.mrunix.net/webalizer) (vase Figura 77) y Analog (http://www.analog.cx).
Figura 77 Anlisis de logs con Webalizer.
167
168
CASO DE ESTUDIO
10
CONCLUSIONES Y LNEAS FUTURAS
CONCLUSIONES
ESTADO ACTUAL LINEAS FUTURAS

Mtricas del xito Publicidad Futuras extensiones
El diseo de interfaces web es un tema complejo en el que no slo intervienen procesos de diseo grfico y programacin, sino que tambin resultan imprescindibles aspectos de la arquitectura de la informacin, navegacin, funcionalidad y, sobretodo, de la usabilidad. Actualmente, nos encontramos en un momento de cambio y maduracin en el diseo web. Poco a poco se tender a hacer las cosas ms sencillas, ms fciles de usar y ms adaptadas a las necesidades del usuario final. En esta era, las soluciones interactivas se van a adaptar al usuario y no al revs, como ha venido sucediendo. El futuro del diseo web deber concentrarse, de hecho, mucho ms en las necesidades y capacidades del usuario. Esto, que inicialmente puede parecer trivial, significa un cambio fundamental en la manera de conceptuar, disear, desarrollar, lanzar y explotar una solucin interactiva como lo es un sitio web. Significa tambin un cambio fundamental en la metodologa de diseo utilizada. El objetivo principal de este proyecto ha sido el estudio y la aplicacin de una de estas metodologas de diseo web, concretamente el Modelo de Proceso de la Ingeniera de la Usabilidad. El seguimiento de este modelo ha primado la accesibilidad, la ortogonalidad, la robustez (hay poqusimo JavaScript y no limita la navegacin), la velocidad de descarga y en general todo aquello que favorece la usabilidad en un sitio web. En nuestro caso, un portal administrado dinmicamente, lo que actualmente se denomina un sistema de gestin de contenidos para la web. Posteriores evaluaciones del sitio en vivo demostrarn que es una web fcil de aprender, usar y recordar. A continuacin, recogeremos una serie de conclusiones finales, experiencias y conocimientos destacados y otras reflexiones:
La creacin de un sitio web requiere formar un equipo multidisciplinario. No basta con el perfil creativo y el tcnico informtico. Debemos involucrar a personas que hasta ahora permanecan 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 integracin de un conjunto de programadores, diseadores grficos, evaluadores, etc. Consecuencia del punto anterior es el caso de la evaluacin heurstica. Estas evaluaciones las efectan expertos en usabilidad. En nuestro caso esas heursticas han sido realizadas desde la posicin y los conocimientos de un servidor. Estrictamente no seran vlidas, pero dada la situacin, el presupuesto (nulo) y la mxima de que es mejor una evaluacin heurstica que ninguna, podemos considerar que han cumplido su funcin. Sobretodo en que han servido como herramienta de diseo seguidas como directrices a la hora de implementar y disear. Un diseo y produccin centrado en el usuario significa que debemos involucrar lo mximo posible al usuario final durante todo el ciclo de vida del sitio web, el nico problema es que no hay usuario medio. Una complejidad aadida, ya que todos los usuarios de la web son nicos. La manera de afrontar este hecho no es determinar lo que a la mayora de los usuarios les gusta o no, sino tener en cuenta que existen formas de disear las pginas que son claramente errneas.
Captulo 10: Conclusiones
171
Otra conclusin respecto a los usuarios es que el trato y trabajo con ellos no puede ser considerada una tarea trivial. En ocasiones, no es fcil motivarlos y mantenerlos prestando una cierta atencin cuando no se ofrece nada a cambio de su colaboracin. En otras ocasiones, no nos ofrecen respuestas de valor (los usuarios tienen la mana de responder algo si les preguntamos algo. Y si le plantemos planteamos algo que el no se habra planteado nunca, pues obtendremos una respuesta poco valida). Sin embargo, por regla general se sienten importantes al pedirles que efecten 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 diseo. Incluso cuando resulta complicado medir la satisfaccin del usuario (Cmo se supone que juzga un usuario que algo es "fcil 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 entraramos en el campo de la emocin, que es extenso y se aleja del alcance de este proyecto. Es fundamental que tengamos claro que el diseo 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 presentacin y disear en consecuencia, sabiendo que el usuario puede variar (con o sin conocimiento) la apariencia visual de nuestra pgina. Ya se ha comentado en el la dificultad que supone hacer una estimacin. 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 situacin ideal para realizar buenas estimaciones. La usabilidad es, en muchas ocasiones, un concepto esquivo y abstracto. Si, en ocasiones, no es fcil definirla, menos lo es medirla. El trmino ya es en s una traduccin del ingls (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 decisin, "lo uso o no lo uso" y aqu tienen mas fuerza muchsimas otras variables: necesidades del usuario, atractivo, estetica, mostrar o mejorar el estatus social, la identificacin con un grupo social, etc. Pero la gente no va por ah plantendose la usabilidad de las cosas hasta que no las ha usado. Por ltimo, una pequea crtica al concepto actual de usabilidad debido a que el mercado ha malinterpretado el concepto. Sufre a veces una pequea desvirtualizacin proveniente del radicalismo con el que se ha introducido el concepto en los ltimos aos (links azules subrayados, fuera Flash, etc.), cuando ha demostrado que, cuando conviene, resulta fcil cambiar el rumbo del concepto (especialmente en el uso del Flash, vase [NOT02]). Creemos que la Web es demasiado grande para que reine un paradigma. Algunos sitios necesitarn explosiones intensivas de marcas que los principios de Nielsen no permitiran y otros sitios necesitarn nociones bsicas de navegacin y tiempos de descarga rpidos. Como todo en la vida, la usabilidad es una eleccin que depender del contexto y fundamentalmente del uso que se le d a cierta tecnologa. Tal como afirma Douglas Thornsjo, auto editor de Millennium, no seremos juzgados por nuestra tecnologa: sino por el uso que hicimos de ella". Pero no debemos olvidar que pensar en la usabilidad de los sitios web, no es una opcin: es una necesidad inevitable.
172
CONCLUSIONES y LNEAS FUTURAS
ESTADO ACTUAL El estado actual del sitio web requiere todava de muchas pruebas a realizar, como son las de mantenimiento, correccin de errores y evaluacin del sitio en vivo. De todas formas, estas tareas estn ya especificadas y documentadas. Adems, tendremos en consideracin 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 produccin. Las razones por las que los usuarios volvern a visitar nuestro sitio web constituyen la base de un buen diseo web, ya que son las cuatro cosas que ms persiguen los usuarios [NIE99]:

Contenido de gran calidad. Actualizacin a menudo. La frecuencia de actualizacin requerida depende del tema y de los objetivos del sitio. Las noticias pueden tener una frecuencia de actualizacin diaria, mientras que los reportajes pueden ser semanales. Mnimo tiempo de descarga. Facilidad de uso.
Seguiremos trabajando en mejorar y mantener estos cuatro criterios. Adems, actualmente se contina trabajando en varios flancos paralelos:
Diseo e implementacin del motor de bsqueda local. Los buscadores internos, adems de influir decisivamente en la primera impresin 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 prestrsele especial atencin. En esta fase estamos considerando los buscadores textuales y los buscadores en bases de datos. Introduccin de contenido. Actualmente se dispone de una batera de contenido dispuesto a ser lanzado. Con esta base se seguir aadiendo contenido a una frecuencia variada (diaria, semanal o mensualmente) dependiendo de la seccin y del tema en cuestin. Indexacin en los buscadores. El posicionamiento en buscadores se ha comentado brevemente en el . Cada buscador utiliza un algoritmo de indexacin 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 bsqueda. Estamos documentndonos de [UGA02]. Pruebas en diferentes plataformas y navegadores. Evaluaremos el sitio usando las plataformas y los navegadores considerados en el anlisis de requisitos.
LINEAS FUTURAS Ningn diseo 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 habamos obviado. Los sitios web y los conocimientos que tenemos sobre el diseo web evolucionarn, los objetivos cambiarn, aparecern nuevas caractersticas, etc. El rediseo no es un lujo, es una necesidad que tendremos que ir cumpliendo en un futuro si la web quiere ser competitiva.
173
A esto habr que aadir posibles extensiones que surjan de la propia evolucin de las tecnologas. Nuevas tecnologas que nos aportarn ms posibilidades de interaccin, tanto a nivel de usuario como a nivel de desarrollo. Se tomarn en cuenta futuras plataformas (Palm OS, WebTV o WAP) que actualmente representan un objetivo de audiencia ridculo, pero debido al incremento de la popularidad de las aplicaciones de Internet y los telfonos mviles 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.
Mtricas del xito
Los sitios Web que ofrecen contenido gratuito deben estar concentrados en las medidas como el nmero de pginas vistas y el numero de visitantes nicos (los que visitan un sitio ms de una vez, durante un perodo de tiempo especfico) para poder satisfacer, por ejemplo, los requerimientos de las agencias de publicidad y los anunciantes. De otra forma, las mtricas no son tan fciles 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 mtricas 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 pginas vistas, todos indicadores importantes para las agencias. Tambin se puede ver los dominios y los proveedores que estn visitando el sitio para mostrar que est atrayendo la audiencia buscada por los anunciantes. Satisfaccin del usuario: aunque las herramientas existentes permiten medir el flujo de clics que hace un visitante, no puede explicar cmo se siente una personas mientras navega. Es aqu donde juega un papel importante la encuesta en lnea, herramienta apropiada para determinar gustos y satisfaccin del visitante. La mejor estadstica de satisfaccin por lo general es obtener respuestas a la pregunta recomendara 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 maduracin. Continuamente, se van creando nuevos formatos publicitarios, campaas y se van ajustando precios y formatos a lo que realmente funciona. Sin embargo, los usuarios cada vez se estn volviendo ms recelosos con respecto a los anuncios en los sitios web y estn empezando a ignorar todo tipo de banners (tanto los rich media, mayoritariamente creados en Flash, como los estticos) y ventanas emergentes (pop-ups) y, por desgracia, todo lo que se parece a ellos [RED02].
174
La publicidad contina en fase de sequa y experimental. Los medios on-line siguen a la espera de que se produzca el deseado matrimonio entre creativospublicitarios-marketing e Internet-tecnologa. Pese a la pertinaz incapacidad de la publicidad on-line de aprovechar las ventajas del medio, es difcil 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 bsicos 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 demogrfico joven y urbano es muy interesante para los anunciantes. Por una parte, debido a que es la parte de la poblacin que suele marcar las tendencias de consumo a largo plazo. Por otra parte, la inversin 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 poblacin [KOT02a]. Nuestro modo de tratar la publicidad generadora de ingresos, seguir una vez ms una visin 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 recomendara en portada la actuacin de su club, aparecera al principio de las bsquedas, se diseara de un modo ms llamativo su perfil en la base de datos o se incluiran enlaces con su pgina. Como afirma el diseador 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 recogern nuevos requisitos para versiones posteriores o se deducirn de los resultados de las evaluaciones. Apuntaremos brevemente unas serie de ideas para dejar constancia de las futuras extensiones que iremos aadiendo al sitio:

Sistemas de revisin y opinin 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. Creacin 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 pgina a otras personas va e-mail.
175
176
APNDICES
PLANIFICACIN DEL PROYECTO
Diagrama de Gantt Diagrama de tareas en el ciclo de vida GLOSARIO DE TRMINOS RELACIONADOS CON LA MSICA ELECTRNICA
CUESTIONARIO ESCENARIOS ESTADSTICAS

Sistema Operativo Navegadores Conexin por da de la semana Resolucin de pantalla Profundidad de color JavaScript Java Servidores web
ANLISIS COMPETITIVO REVISIN DE LA ARQUITECTURA REVISIN DE LOS PROTOTIPOS REVISIN DETALLADA DE PROPSITO GENERAL FORMULARIO DE PREPARACIN DE UN TEST CON USUARIOS GUA DE ESTILO PARA LA REDACCIN DE CONTENIDO
Estilo de escritura Formateo Deletreo y marcas registradas Escribir para los motores de bsqueda Formateo de entrega de contenido
FORMULARIO DE INFORME Y RESOLUCIN DE PROBLEMAS REVISIN DE LA POST-PRODUCCIN LISTA DE CONTROL PARA UN MANTENIMIENTO MNIMO
PLANIFICACIN DEL PROYECTO Mostramos una tabla con el anlisis y la estimacin del desarrollo inicial de los procesos principales del proyecto. Sigue a continuacin un diagrama de Gantt que ilustra la relacin de los procesos de desarrollo del proyecto y el diagrama de las tareas en el ciclo de vida del proceso. PROCESO DE DESARROLLO Anlisis de requisitos Diseo conceptual Prototipado Produccin: Grficos Escritura HTML & PHP Base de datos MySQL
Desarrollo de software (Javascript, FLASH...)
CICLOS 3 3 6 3 2 5 3 3
DIAS / CICLO 5 5 5 1 1 5 2 3
DIAS 15 15 30 3 2 25 6 9 10 10
Gestin del proyecto (10%) Tiempo imprevisto (10%) EVALUACIN Encuestas Heurstica Test con el usuario QA 1 8 3 1 5 1 4 1
5 8 12 1
Total: 151 das
Planificacin del proyecto
179
Diagrama de Gantt
AB RIL 1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30 MAYO
Diseo conceptual Heurstica Prototipado Grficos Test con el usuario
MAYO 5 6 7 8 9 10 11 12 13 14
JUNIO 17 18 19 20 21 24 25 26 27 28 31
Analisis de requisitos Diseo conceptual Heurstica Prototipado Grficos Heurstica HTML & PHP
180
APNDICES
JU NIO 1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30
Prototipado
Heurstica
Test con el usuario Grficos HTML & PHP

MySQL
Desarrollo software
JULIO SEPTIEMBRE 5 6 7 8 9 10 11 12 13 14 17 18 19 20 21 24 25 26 27 28 31
Prototipado
Test con el usuario Escritura Heurstica

MySQL
HTML & PHP
Heurstica
Desarrollo software
181
SEPTIEMBRE Figura 78 1 2 3 4 7 8 9 10 11 14 15 16 17 22 23 24 25 28 29 30
Diagrama de Gantt.
Prototipado
Test con el usuario Escritura Heurstica

MySQL
En esta y en las pginas 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. Adems, tendremos en cuenta los fines Testde semana y los festivos. con el
usuario
HTML & PHP
Heurstica
Desarrollo software
QA
182
APNDICES
Diagrama de tareas en el ciclo de vida

ANLISIS DE DISEO PRODUCCIN LANZAMIENTO MAQUETAS Y EVALUACIN REQUISITOS PROTOTIPOS
ANLISIS ETNOGRFICO ANLISIS DE IMPLICADOS OBJETIVOS DE LA APLICACIN ELEMENTOS DE DISEO
REGISTRO DOMINIO
ENCUESTAS
ANLISIS DE LA COMPETENCIA
GENERACIN DE IDEAS
ACTORES Y ROLES OBJETIVOS DE LA USABILIDAD PLATAFORMA

ELEMENTOS DE DISEO ANLISIS DE TAREAS
ESCENARIOS
MAQUETAS EN PAPEL
HEURSTICA
GRFICOS CDIGO
ARQUITECT. DE LA I NFORMAC.
CARD SORTING
OBJETIVOS DE LA APLICACIN
GRFICOS CDIGO MAQUETAS EN PAPEL MAQUETAS DIGI TALES HEURSTICA HEURSTICA TEST CON USUARIOS
OBJETIVOS DE LA USABILIDAD
ELEMENTOS DE DISEO
BASE DE DATOS CDIGO SOFTWARE PROTOTIPOS HEURSTICA TEST CON USUARIOS HEURSTICA TEST CON USUARIOS
MAQUETAS DIGITALES BASE DE DATOS

ELEMENTOS DE DISEO
ARQUITECT. DE LA I NFORMAC.
CDIGO SOFTWARE
EXTENSIONES FUTURAS
PROTOTIPOS EVALUACIN AUTOMTICA
OBJETIVOS DE LA USABILIDAD
CDIGO
183
GLOSARIO DE TRMINOS RELACIONADOS CON LA MSICA ELECTRNICA
Acid House: Estilo musical que nace en Chicago a finales de los 80 cuando Spanky y DJ Pierre descubren las posibilidades del secuenciador de bajos TB303. El sonido repetitivo e hipntico que produce esta mquina 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 aos setenta, a los que se aade una base rtmica ms 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 despus de una sesin en horario normal o despus de una rave. Ambient: Msica climtica y relajada, que crea atmsferas profundas similares a los grandes espacios abiertos. Brian Eno fue el inventor del trmino en 1978. Amplificador: Aparato que recibe la seal sonora y la transmite aumentada a los altavoces para ser escuchada. Bakalao: EBM, Rock Gtico y Acid House que se pinchaba en la costa valenciana a principios de los aos 90 // Ruta que los aficionados al gnero realizaban para ir de una discoteca a la otra // Traduccin espaola del Hardcore Techno europeo // Acepcin despectiva de la msica de baile en general. Beat: Golpe que delimita en tiempo rtmico de la msica. Big Beat: Estilo musical que combina el Techno con riffs Rockeros y Breakbeats veloces. B.P.M.: Beats (Golpes) Por Minuto. El tiempo rtmico de un disco se mide en BMP. Breakbeat: Ritmo que esta en la base del Hip Hop, cuya aceleracin ha dado origen el Jungle y al Big Beat. Cpsula Fonocaptora: Es el componente encargado de transformar el movimiento mecnico que realiza la aguja sobre el surco en seal elctrica (seal sonora). Chicago: Adems de ser la ciudad del Blues, es donde se origino el House, ritmo que a mediados de los 80 cambi el espectro de la msica de baile. Chill Out: Zona de relajamiento en un club, rave o festival. El origen viene de los aos ochenta con la introduccin 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
APNDICES
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. Msica 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 ms profundo, clido y prximo al Soul. Deejay: ver DJ. Disco: vinilo, CD // Msica nacida en los aos 70 en Mnich reconocible gracias a ritmos repetitivos y pegajosos. Discoteca: Lugar destinado al almacenaje de disco // Local donde se puede escuchar y bailar msica a la vez que se consumen bebidas. Discjockey: ver DJ. DJ: Persona encargada de poner discos y animar al pblico de las discotecas o bien a las personas que le escuchan a travs la radio. Dolby System: Sistema que incorporan los aparatos de grabacin y reproduccin de cintas magnetofnicas, y que reduce el ruido de fondo (soplo) de estas. Dream House: Trance muy meldico, con piano o guitarra en primer plano. Tambin se le denomina Dream. Drum'n'Bass: Percusin y bajo. Es una derivacin experimental del Jungle sin las conexiones con el Raggamuffin y el Breakbeat-Techno, que fueron la base inicial del Jungle. Dub: Inicialmente, una versin instrumental, llena de ecos, bajos profundos y samples de temas Reggae. Posteriormente, se ha convertido en una tcnica muy utilizada por los productores y remezcladores del House, Techno y el Jungle. Easy Listening: Msica de fcil escucha, ideal para colocar de fondo musical en las fiestas. Su origen se encuentra en las pelculas de los aos cincuenta, y su derivacin contempornea ha dado lugar al Future Listening. EBM: Electronic Body Music. Gnero musical patentado por Front 242, cuyas seas de identidad son sus ritmos glidos y compactos. Ruidos industrial y monocorde que influyeron en el New Beat y el Agrepo. EDM: Electronic Dance Music. Msica electrnica de baile.
Glosario
185
Electro: Estilo musical surgido en Nueva York y en Detroit a comienzos de los aos 80. Es la unin del Groove afro americano y la msica electrnica europea. Ecualizador: Aparato electrnico que sirve para modificar el tono de una fuente de sonido en cualquier corte de frecuencia grave, media aguda. Etapa de Potencia: Aparato electrnico similar a un amplificador, pero sin los controles de graves y agudos, que aumenta la potencia de una fuente de sonido. Experimental: Extrao e inclasificable, vanguardista, se dice de todo aquel gnero musical que intenta ir ms lejos buscando nuevos ritmos. Fader: Es el mando de control para incrementar o disminuir volumen, ecualizacin o balance y panorama de una fuente de sonido. Puede ser deslizante o giratorio. Flyer: Prospecto o folleto que sirve para anunciar una actuacin, sesin 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, versin y sello discogrfico. Garage: Denominacin que se da en Nueva York al Deep House. Es el House que ms est unido al Soul y a la Disco Music. Se caracteriza por un ritmo vibrante y una voces desgarradas y profundas. Goa Trance: Techno psicodlico y extico, que tiene su origen en los raves playeros celebrados en Goa (India). Tiene un ritmo hipntico y repetitivo. Go-Go: Bailarina o bailarn que animan al publico a bailar en los clubes o discotecas. Go-Go tambin es el nombre de un estilo surgido en Washington en los aos ochenta, que mezclaba Hip Hop con ritmos Funk. Groove: Es el impulso que lleva mover el cuerpo al ritmo de la msica generalmente de raz negra. Funk, Hip Hop, Drum'n'Bass o Reggae son ritmos groovies. Hardcore: Estilo musical derivado del Techno con un ritmo duro, implacable y machacn. 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 aos ochenta en la ciudad de Chicago y que recoge influencias de la Msica Disco, el Funk y el TechnoPop europeo. Debe su nombre al club Warehouse, en Chicago, donde pinchaba el pionero de este ritmo: Frankie Knuckles.
186
APNDICES
IDM: Intelligent Dance Music.Nnuevo modo de interpretar los sonidos electrnicos influenciados por la musica de baile de los noventa. Industrial: Estilo nacido a fines de los 70 que experimenta con ruidos, msica de mquinas , ritmos metlicos y sonidos urbanos Intelligent Techno: Termino sectario que engloba a algunos de los artistas ms interesantes y exploradores de la escena Techno. Jungle: Estilo musical que se basa en un desarrollo polirtmico 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 discogrfico. Latin House: Estilo musical creado por los hispanos como derivacin del House con sus propias seas de identidad. Line-up: Orden de aparicin de los DJ's y live acts. // Programa del evento. Live Act: Artista que acta en directo, para diferenciarlo de la sesin 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 creacin de la msica de baile. LP: Long Play. Disco que incluye varios temas de uno o ms interpretes y que gira a 33 RPM. Su tamao es de 12 pulgadas. Makina: Tambin denominado Maquina. Hardcore-Techno hecho en Espaa, por lo general con unos gimmicks muy facilones y repetitivos. Maxisingle: Disco del tamao de un LP de 12 pulgadas, pero con un tema y diferentes remezclas del mismo. Tambin 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 ecualizacin. Midi: Interfaz Digital de Instrumentos Musicales. Es el lenguaje que utilizan los aparatos musicales electrnicos 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. Msica electrnica: msica imposible de tocar (y con toda probabilidad tambin imposible de componer) sin sintetizadores, secuenciadores,
Glosario
187
ordenadores u otro equipamiento electrnico. Es msica total y especialmente elaborada para tocarla slo con sintetizadores y otro equipamiento electrnico. New Order: uno de los grandes grupos de la msica electrnica de los 80. Party: Fiesta, velada (House Party, Techno Party...). Patinador: Es un cartn o plstico 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: Finsima regulacin 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 ms 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 Recopilacin: Disco que contiene los mejores temas actuales o del recuerdo, siendo una buena frmula de ventas. Suelen ser dobles o triples. Remix: Remezcla. Es una nueva mezcla de una tema pudiendo sonar totalmente diferente y tener ms xito que la versin original. Resident: Discjockey residente. Es el que pincha de forma habitual en un club o discoteca. Roland: Marca de aparatos para crear msica , entre ellos el TB 303, adems 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 ms se utiliza en la msica de baile. A la tcnica de registrar sonidos en un Sampler se le llama Sampling (samplear). Tambin existen muchos programas para PC y Mac que se utilizan como Sampler. Scratch: Efecto que consiste en girar el disco hacia atrs 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
APNDICES
Sello discografico: Empresa encargada de "lanzar" un disco al mercado. Session: Actuacin de un discjockey. Set: Sesin de un DJ. Single: Disco que incluye solo una cancin por cada cara. Tambin es conocido cono disco sencillo o 7 pulgadas debido a su tamao. Technics: Marca del famoso plato giradiscos Technics SL1200, muy utilizado y prestigiado por todos los discjockeys. Techno: Estilo musical que tuvo sus orgenes en la msica de Kraftwerk y los grupos tecno-pop de principios de los aos ochenta. Como gnero bailable, el Techno tuvo su cuna en Detroit cuyos pioneros fueron Juan Atkins, Derrick May y Kevin Saunderson. La evolucin de Techno ha dado lugar a innumerables subgneros y tendencias. Technohead: Seguidor fantico del Techno. Tecno-Pop: Estilo musical que tuvo su edad de oro en los aos ochenta y que combina una base rtmica con preciosas melodas creadas a base de sintetizador. Tracklisting: Relacin de temas que aparecen en una recopilacin. 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 aos noventa y que combina ritmos hipnticos con largas evoluciones sintticas y efectos cidos. Tribal: Adjetivo que se utiliza para definir al House y al Techno que utilizan percusiones tribales y atmsferas selvticas para incrementar su efecto hipntico. 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 llamndose "voicebeat" con grupos como Massive Attack, Portishead o Tricky. Underground: subterrneo, estado inicial de cualquier gnero musical. // Tambin, estilo musical surgido en el "subsuelo" de alguno de los mejores clubs de Nueva York, y que constituye una evolucin del Deep House hacia ritmos repetitivos y fracturados, el Jazz y la experimentacin. Es un estilo altamente creativo y trepidante. Vinilo: Material con el que estn construidos los discos. Normalmente suele ser de color negro. VJ: Vdeo-Jockey: Equivalente al discjockey en la msica, 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 todava no ha sido publicado. Se le da ese nombre ya que la galleta del vinilo est "en blanco" sin ningn ttulo explicativo.
190
APNDICES
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 electrnica espaola. 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 colaboracin, por lo que te agradecemos que nos dediques unos minutos de tu tiempo para contestar algunas preguntas. Este cuestionario es annimo. Te rogamos que lo contestes con franqueza y tan completamente como puedas.
Datos personales
1. Qu edad tienes? _________ 2. Sexo: Varn Mujer 3. Nivel de estudios realizados o en curso: Estudios primarios Bachiller o estudios equivalentes Estudios superiores 4. Cul es tu ocupacin actual? (una sola respuesta) - Estudio............................ [1] - Estudio y trabajo.............. [2] - Trabajo temporal.............. [3] - Trabajo fijo...................... [4] - Parado............................ [5] - Realizo servicio militar....... [6] - Otro................................ [7] Cul? ____________
Tu experiencia
5. Cunto tiempo lleva usando ordenadores? - Menos de 1 ao.................. [1] - De 1 a 3 aos..................... [2] - Ms de 3 aos.................... [3] 6. Qu sistemas usas normalmente? - Windows......................... [1] - Mac................................ [2] - Unix............................... [3] - Otro................................ [4] 7. Con que frecuencia usas Internet? - 15 horas al da o ms......... [1] - 10-15 horas al da.............. [2]
Encuesta
Cul? ____________
191
- 5-10 horas al da................ [3] - Menos de 5 horas al da....... [4] 8. Qu navegador usas normalmente? - Internet Explorer............. [1] - Netscape Navigator......... [2] - Otro................................. [3] Cul? ____________ 9. Qu resolucin de pantalla utilizas en tu ordenador? - 800 x 600........................ [1] - 1024 x 768...................... [2] - 1152 x 864...................... [3] - 1280 x 1024.................... [4] - Otra................................. [5] Cul? ____________
Nuestra web
10. Escoge tus tres estilos de msica favoritos de los sealados en la lista y escribe el nmero 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] - Drumnbass.......[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] - Cafs.............. [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 informacin te gustara encontrar en culturanocturna.com? Noticias Fotos Programacin de clubs Entrevistas con DJs Artculos Foros de discusin 13. Cules de estos aspectos consideras que es el PEOR a la hora de navegar? Velocidad Incompatibilidad del navegador Perderse
192
APNDICES
14. Qu color de fondo prefieres en los sitios web? _________________________________________________ 15. Lista las pginas que visitas normalmente _________________________________________________ _________________________________________________ _________________________________________________ 16. En tu opinin, qu aspectos consideras ms importantes en una web? Valralos: Fcil de usar Atractiva til Eficaz Bien organizada Entretenida Informacin valiosa Rpida respuesta 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 Dficil de usar Nada atractiva Prdida de tiempo Pesada Catica Aburrida Sin informacin Lenta
17. Tienes algn otro comentario sobre lo que te gustara que ofreciera culturanocturna.com? _________________________________________________ _________________________________________________ _________________________________________________
Gracias por contestar nuestro cuestionario.
Encuesta
193
ESCENARIOS
PROYECTO:
Portal Web de Msica Electrnica
NOMBRE: EDAD: SEXO: LUGAR: ESTUDIOS: ESTADO CIVIL: HOBBIES:
OCUPACIN: HORARIO DE TRABAJO: DISCAPACIDADES: ORDENADOR: MONITOR: CONEXIN: NAVEGADOR: CONOCIMIENTOS DE INFORMTICA: ESTILO FAVORITO: HORARIO TPICO: 7 a.m.
Sergi 26 Hombre Barcelona Estudiante Universitario (Ingeniera) Soltero, vive con sus padres Fotografa, escuchar y componer msica electrnica, navegar por Internet, hacer deporte (ftbol, gimnasio) Departamento informtico de una empresa comercial 8 a.m. 3 p.m. Ninguna LAN de 2 Pentium PC (en casa) Pentium 4 Porttil (en el trabajo) 800 x 600 y 1024 x 768 Cable MENTA en casa Internet Explorer v.5.0. y Netscape Navigator 4.7 Nivel alto en general y hbil en la Web, experto en electrnica y hardware Techno, Industrial, EBM, Electro Sergi se levanta y se prepara para trabajar. Algunos das 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 crticas de discos en pginas webs de msica electrnica. En el trabajo tiene nuestro sitio web en favoritos y cuando se aproxima el fin de semana aprovecha para informarse de los artistas, DJs y festivales programados para esa semana. Despus de comer y ya en casa se dedica a hacer msica electrnica con los programas Reason y Ableton Live. Si est inspirado sigue con el ordenador, sino hace una siesta. Durante sus horas libres Sergi navega,
10:30 a.m.
4 p.m.
7 p.m.
194
APNDICES
10:30 p.m.
responde su correo electrnico, escucha la msica que obtiene del Soulseek y participa en foros de msica electrnica opinando. Luego va al gimnasio hasta las 9:30 p.m. Despus de cenar hace lo que el define como un mini live con el ordenador. Sergi acostumbra a salir casi todos los fines de semana.
EXCEPCIONES
Escenarios
195
PROYECTO:
NOMBRE: EDAD: SEXO: LUGAR: ESTUDIOS: ESTADO CIVIL: HOBBIES:
OCUPACIN:
HORARIO DE TRABAJO: DISCAPACIDADES: ORDENADOR: MONITOR: CONEXIN: NAVEGADOR: CONOCIMIENTOS DE INFORMTICA: ESTILO FAVORITO: HORARIO TPICO: 9:30 a.m. 11 a.m. 4 p.m.
Pep 27 Hombre Lleida Tcnico de Sonido Soltero Produce y mezcla msica electrnica (utiliza el ordenador y otros equipos para estas tareas) Productor, DJ y socio de una tienda de discos de msica electrnica. Dirige y es socio de un Club que programa Techno Minimal, Electro y Techno House. 11 a.m. 3 p.m. Ninguna Mac porttil (en casa) Pentium PC (en el trabajo) 1024 x 768 (casa) y 800 x 600 (trabajo) RDSI (casa) y ADSL (trabajo) Internet Explorer v.5.0. Nivel bsico en general, experto en hardware de sonido Minimal Techno, Microhouse, Experimental Pep se levanta y desayuna. Abre su tienda de discos. Escucha los discos que vende y los clasifica por estilo musical. Despus de comer vuelve a la tienda de discos y abre a las 5 p.m. Usa el ordenador bsicamente por el programa de gestin, pero a veces se conecta. Si se conecta, echa un vistazo a las listas de discos preferidos de otros DJs y a crticas en pginas web especficas. Cierra la tienda a las 8:30 p.m. y va a clases de ingls con un profesor particular. Despus de cenar se pone con el ordenador a navegar, revisa el correo electrnico y se baja algunos archivos de msica usando el programa Kazaa. Si es Viernes, Sbado o Domingo, Pep tiene
9 p.m. 10:30 p.m.
Madrugada
196
APNDICES
que abrir el Club Electrnico que dirige. Muchas veces es l mismo quien pincha.
EXCEPCIONES
Los lunes, la tienda de discos no se abre y junto un amigo hace msica 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 Electrnico que dirige. Actualmente, los Mircoles a partir de las 10 p.m. asiste a un curso del sistema M.I.D.I. (Musical . Los Sbados y Domingos tarde antes de abrir el Club usa el ordenador.
Escenarios
197
PROYECTO:
NOMBRE: EDAD: SEXO: LUGAR: ESTUDIOS: ESTADO CIVIL: HOBBIES: OCUPACIN: HORARIO DE TRABAJO: DISCAPACIDADES: ORDENADOR: MONITOR: CONEXIN: NAVEGADOR: CONOCIMIENTOS DE INFORMTICA: ESTILO FAVORITO: HORARIO TPICO: 8 a.m.
Laila 20 Mujer Madrid Estudiante Universitaria (Filosofa) Soltera, vive en un piso de estudiantes Lectura, escuchar msica, navegar por Internet, bailar y comprar zapatos Trabajos temporales y camarera De Jueves a Sbado de 11 p.m. 5 a.m. Ninguna Pentium III PC 800 x 600 MODEM 56 Kbps. Tarifa plana de 6 p.m. a 8 a.m. y Sbados y festivos todo el da Internet Explorer v.5.0. Nivel bsico-medio en aplicaciones ofimticas y, en general hbil en la Web House, Techno-pop, Electroclash Laila se levanta y se prepara para ir a la facultad. Si por la noche ha dejado el ordenador encendido y conectado a la Red, se asegura de desconectarlo y apagarlo, pues su tarifa plana finaliza a las 8 a.m. de cada da lectivo. En ocasiones, si tiene horas libres entre clases, Laila entra en la sala de ordenadores y mira su correo a travs de la web o navega. Come. Habla con sus amigos por telfono y comentan que tal ha ido el fin de semana o quedan para tomar algo. En este momento se activa la tarifa plana de Laila. Lo primero que hace es revisar su correo electrnico a travs de web. Tambin le interesan las fotos de eventos que aparecen por la web y utiliza servicios como el CHAT y el Messenger. Despus de cenar se conecta al IRC. Le gusta conectarse a canales de la escena electrnica, para poder comunicarse con
10 a.m.
3 p.m.
6 p.m.
10:30 p.m.
198
APNDICES
gente con sus mismas aficciones.

EXCEPCIONES
Cuando llega el fin de semana, Laila trabaja de camarera en un Club.
Escenarios
199
ESTADSTICAS La presente estadstica 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 estadsticas sobre los sistemas operativos, navegadores, resoluciones y colores que tienen configurados los usuarios de Internet. As como los das de la semana que tienen ms afluencia de conexin y las configuraciones de Java y JavaScript. A continuacin se presentan los anlisis de Netcraft (http://www.netcraft.com), el organismo que realiza las estadsticas de uso de software en Internet, sobre la utilizacin de servidores web en agosto de 2003.
Sistema Operativo 1. Windows 98 2. Windows 2000 3. Windows ME 4. Windows NT 5. Windows 95 6. Mac OS 7. Desconocido 8. Windows 3.x 9. Linux 10. WebTV 11. Unix 12. Windows XP 13. OS/2 14. Amiga 50557611 32263269 19215159 4121994 2978481 2522310 1398885 338247 296373 182259 65859 25362 6360 1410 (44%) (28%) (16%) (3%) (2%) (2%) (1%) (0%) (0%) (0%) (0%) (0%) (0%) (0%)
Navegadores 1. MSIE 6.x 2. MSIE 5.x 3. Netscape 4.x 4. Netscape 5.x 5. MSIE 4.x 6. Netscape comp. 7. Opera x.x 8. Netscape 6.x 9. Desconocido 10. MSIE 2.x 11. Netscape 3.x 12. MSIE 3.x 13. Netscape 2.x 14. Netscape 1.x 15. MSIE 1.x 61315569 44416527 1991436 1950525 1769898 1221273 580020 437619 193221 36645 32046 27135 1491 126 48 (53%) (38%) (1%) (1%) (1%) (1%) (0%) (0%) (0%) (0%) (0%) (0%) (0%) (0%) (0%)
Conexin por da de la semana Domingo 15863100 (13%)
200
APNDICES
Lunes Martes Mircoles Jueves Viernes Sbado Resolucin de pantalla 800x600 1024x768 1280x1024 1152x864 640x480 Desconocido 1600x1200 Profundidad de color (32bit) 65K (16bit) 16M (24bit) 256 (8bit) Desconocido 16 (4bit) JavaScript
19584357 18610317 17897205 17460183 10065651 14492766
(17%) (16%) (15%) (15%) (8%) (12%)
49786698 42951891 5053401 3395451 2633787 1240242 801555
(47%) (40%) (4%) (3%) (2%) (1%) (0%)
46488183 46023375 10210506 2921085 193617 26259
(43%) (43%) (9%) (2%) (0%) (0%)
Javascript 1.2+: 105863025 (92%) Javascript <1.2: 218382 (0%) Javascript false: 7892172 (6%)
Java
Java enabled: 104951916 (92%) Java disabled: 852636 (0%) Java unknown: 8169027 (7%)
Servidores web
Servidor Apache Microsoft-IIS SunONE Zeus
Julio 2003 26951879 10976342 674571 766943
Porcentaje 63.72 25.95 1.59 1.81
Agosto 2003 27388860 10165745 1534586 746240
Porcentaje 63.98 23.75 3.58 1.74
Cambio 0.26 -2.20 1.99 -0.07
Estadsticas
201
ANLISIS COMPETITIVO www.clubbingspain.com
Clubbingspain.com es el portal de referencia de la cultura de club en Espaa. Abarca todo tipo de msica electrnica de baile (techno, house, breakbeat, drum & bass, trip hop) e incorpora una agenda de eventos y fiestas, biografas y entrevistas con artistas, directorio de clubes y discotecas, DJ charts, noticias actualizadas, enlaces a otros recursos y crticas de discos. Adems, dispone de un foro con alta afluencia y concursos donde los usuarios pueden ganar entradas gratis. Tambin ofrece suscripcin a boletines y listas de correo. Sin embargo, est excesivamente cargado con banners publicitarios animados y sus artculos no se acompaan de galeras con fotografas. Por otra parte, la agenda dispone de una gran cantidad de informacin til, pero es poco usable, lo que resta eficacia al contenido.
Ttulo de la ventana
Al poner Bienvenido a Clubbingspain.com se ordenar alfabticamente bajo la letra B en vez de la letra C. Aunque al ser dos letras sucesivas no crear mucha confusin, no es correcto.
Eslogan
Habra sido til que Clubbingspain.com hubiera incorporado un eslogan que describiera brevemente la finalidad del sitio y sus diferencias con la competencia. 202
APNDICES
Categoras y etiquetas
Agenda | Artistas | Clubs | Clubbers | DJ Charts | Entrevistas | Especiales | Noticias | Sonorama | Links
Desglose del espacio de la pantalla
Sin utilizar 6% Publicidad y patrocinio 20%
Controles del sistema operativo y del navegador 19% Identidad y bienvenida al sitio 11%
Contenido de inters 20%
Navegacin 22%
Breve anlisis de usabilidad:
1. Los anuncios podran ser efectivos ya que muestran informacin exclusivamente con los propsitos de la pgina; sin embargo, en directo estn animados y muestran mltiples mensajes. Los usuarios tienden a desdear los anuncios tipo banner, especialmente si estn animados, y esta pgina de inicio est cargada de anuncios animados creando una experiencia catica y dispersa.
Anlisis competitivo
203
2. Las fotografas e imgenes no llevan ni ttulo 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 pginas no deben contener vnculos con la pgina activa). Adems, es excesivamente grande e impide que ver la mitad del contenido de la pgina. 4. Resulta confuso que todos los titulares sean vnculos a excepcin de esta semana, que muestra informacin redundante de la pgina de inicio. Es muy apropiado que las fotografas incluyan el nombre de la persona en texto real, sin embargo el texto no enlaza con la biografa del artista, mientras que la imagen s. 5. El acceso a la agenda requiere un clic que conduce a la pgina que hemos comentado en el punto anterior. Contiene fotografas grandes de los artistas que actuarn en un lugar concreto y a la derecha, un pequeo calendario. Con un clic en el da del calendario en el que estamos interesados accedemos a otra pgina donde podremos seleccionar la zona. Por ltimo, con un clic ms accedemos a la lista de eventos. Pero si queremos cambiar de da tenemos que volver a seleccionar la zona. 6. Dnde est la bsqueda? No se encuentra en la pgina ni en otro lugar del sitio. Todos los sitios de este tamao deberan ofrecer acceso a una bsqueda amplia en la pgina de inicio. Algunos usuarios prefieren la bsqueda como herramienta principal para hallar informacin, mientras que otros se decantan por ella como alternativa cuando fallan la navegacin y las categoras. 7. No hay manera de saber que contenido se ha ledo ya. No hace distincin entre vnculos visitados y no visitados. 8. La barra de navegacin usa un tipo de letra que no es muy legible. 9. Sonorama es una etiqueta que no expresa adecuadamente la opcin que oculta. Es difcil saber que contiene, sonido, instrumentos? . En realidad el vnculo lleva a una pgina con los ltimos discos comentados y criticados, pero no hace uso de streaming que supondra un uso fantstico de los aspectos multimedia de la Web. 10. El contenido que aparece en novedades slo aparece fijo durante unos instantes, y los usuarios debern leerlo rpidamente antes de que desaparezca.
204
APNDICES
www.florida135.com
Florida135.com es la presencia on-line del club ms prestigioso e innovador de Espaa. Ha creado un portal con la pretensin de alcanzar todos los aspectos de la escena electrnica, tanto que en ocasiones algunas secciones se intuyen inconexas o fuera de contexto. Los usuarios disponen de informacin relativa a la programacin del propio club, que incluye biografas y entrevistas con los artistas, tambin 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 tabln de anuncios, hasta descarga de utilidades para el telfono mvil.
Ttulo de la ventana
Este ttulo se agregar apropiadamente a favoritos con arreglo al nombre del sitio Florida 135, aunque podra haber ido seguida de una breve explicacin.
Eslogan
Este sitio no tiene eslogan, pero debera incorporar uno breve que explicara que es Florid135.
Anlisis competitivo
205
SHOP
Moda club Dicos/libros Tiendas DJs Ofertas Venta entradas
MSICA
Noticias Discos Maxis Clips En la red Editorial/opinin Entrevistas/artculos techno-diccionario
DEEJAYS
Noticas Charts Clips Entrevistas Diccionario DJs Accesorios Ms all de los platos Biografas
CLUBS HOME
Florida 135 Site Studio Groove Parade Bath Room Otros Clubs
CULTURA
Cine Libros Cmics Televisin DVD/Video Videojuegos Tendencias Bazar Kiosko Internet
AGENDA
Agenda nacional Festivales Radios
DESCARGA
Mviles Salvapantallas Fondos Enva tu postal
COMUNIDAD Foro enlaces Galera de fotos Tabln anuncios
Desglose del espacio de la pantalla
Publicidad y patrocinio 15%
Sin utilizar 4%
Controles del sistema operativo y del navegador 19% Identidad y bienvenida al sitio 4%
Contenido de inters 47%
Navegacin 11%
206
APNDICES
1. No debera haber un vnculo activo (ni vnculo alguno) con la pgina de inicio desde la propia pgina de inicio. El logotipo de Florida135 incluye un vnculo activo con la pgina que se est visualizando. 2. El cuadro de bsqueda se encuentra en la ubicacin 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 fcilmente reconocible para los usuarios como Buscar. 3. Es chocante que haya un vnculo msica, cuando el sitio gira en torno a la msica. Adems, cultura es un nombre de categora demasiado amplio y parece un cajn de sastre, con contenidos que nada tienen que ver con la pgina (cmics, televisin). 4. En un intento por hacer del sitio un portal , encontramos vnculos de navegacin redundantes. Los vnculos Newsletter y Registrate conducen prcticamente al mismo sitio. Hay vnculos repetidos de discos y libros en las categoras Shop y Cultura, adems de repetir el contenido en Msica y Deejays. 5. Cuando se coloca el puntero del ratn sobre los vnculos del rea de navegacin superior, cambia el cuadro de la segunda fila de vnculos de navegacin. Si el usuario desplaza el ratn desde el campo principal y pasa por fuera del campo, aparecer el conjunto de vnculos por defecto. 6. La agenda se reduce a un conjunto de recomendaciones y no conduce a una bsqueda. Adems, 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 desva la atencin de los dems elementos de la pgina, y no es una forma agradable ni efectiva de leer. Irnicamente, lo usuarios tendern a pasar por alto
Anlisis competitivo
207
esta rea, a pesar del nfasis visual que proporciona la animacin. Dado que las animaciones suelen indicar algo intil y suponen realizar un esfuerzo adicional, los usuarios tienden a ignorarlas. 8. Ninguno de los colores de los vnculos cambia cuando estos son visitados. Los colores de los vnculos visitados indican dnde se ha estado en el sitio, especialmente cuando los usuarios estn buscando algo. 9. Adems, el rea anterior, as como el resto de la Web, se acompaan de exclamaciones y flechas que no sealan a ninguna parte. Parece que se pueda hacer clic en ellas, pero en realidad no se puede. 10. Los ttulos de los prrafos no son vnculos, crea confusin que donde se pueda hacer clic sea en el prrafo y no en el ttulo. 11. El diseo debera ser visible sin desplazamientos horizontales en una ventana con un ancho de 800 pxeles.
208
APNDICES
www.offtechno.com
Offtechno.com es un sitio web del tipo de Clubbingspain.com pero centrado exclusivamente en msica techno. Presenta prcticamente los mismo contenidos, pero con un menor nivel de actualizacin.
Menu: Noticias | Agenda | Clubs | Artculos | Reportajes | Foro | Links | Chat Artistas: Artistas | Charts | Entrevistas Audio: Offaudio | Offradio | Msica
1. Los sitios no deberan incluir un vnculo activo con la pgina de inicio en la propia pgina de inicio. 2. Un icono de pgina de inicio en la pgina de inicio no slo sobra, sino que potencialmente tambin induce a errores. 3. Los anuncios del sitio son anuncios internos de Offtechno. Habra sido mejor eliminarlos y dedicar el espacio a contenido real, promocionando posiblemente las mismas opciones. Los usuarios tienden a desdear todo lo que se parezca a un banner, por lo que sta es una forma deficiente de promocionar los elementos del sitio. 4. Toda pgina de inicio necesita incorporar un cuadro de entrada de bsqueda en la parte superior de la pgina, los usuarios lo necesitan y lo esperan. Sin embargo, este cuadro es insulso. La etiqueta Busca clubs habra sido completamente innecesaria si el botn de la lupa hubiera sido un botn Busca clubs). 5. Hay tres formas distintas de navegar hacia los mismo contenidos: un men desplegable de acceso rpido, el men de navegacin de la
Anlisis competitivo
209
6. 7. 8.
9.
izquierda y el contenido central. El cuadro despegable es intil por ser complicado para la navegacin de los usuarios y por no ser ms rpido, en realidad, que el men de la izquierda. Los ttulos y cabeceras son demasiado pequeos en comparacin con el cuerpo del texto. El acceso a las noticias es demasiado redundante, se podra aprovechar en otros contenidos. Algunas fotografas son demasiado detalladas para ese tamao. Tambin es acertado que la fotografa contenga texto ALT con el nombre del artista y un vnculo con la pgina que especifica el texto que le acompaa. El color de los vnculos no es uniforme y crea confusin. Ninguno de los colores de los vnculos cambia cuando stos son visitados. Los colores de los vnculos visitados indican donde se ha estado en el sitio, especialmente cuando los usuarios estn buscando algo.
210
APNDICES
REVISIN DE LA ARQUITECTURA Proceso

General
La organizacin del sitio se ha evaluado con usuarios. La organizacin 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 obtencin. Los logs del sitio y logs de bsqueda se han revisados para posibles refinamientos.
La arquitectura se ajusta a los requisitos generales del sitio. La arquitectura tiene sentido al primer vistazo.
Tratamiento
No falta ningn contenido relevante. No hay pginas innecesarias que se puedan eliminar. El sitio tiene todas las secciones necesarias: Inicio Pginas de contenido Contacta con nosotros Mapa del sitio Bsqueda Pginas de error Normas de privacidad
Anlisis de tareas
Se soportan todas las tareas importantes y los tipos de usuario. Las tareas comunes fluyen a lo largo de una secuencia de pginas
corta y natural.
Las tareas importantes se alcanzan desde un enlace o tienen una

seccin en el sitio.
Organizacin
El sitio es relativamente ancho y poco profundo, no ms de 3 niveles

de profundidad y no ms ancho de 16 opciones.
Las categoras estn situadas en la profundidad adecuada.

Clasificacin
Basndose en la importancia, no hay ninguna categora que deba ser promocionada o eliminada. Las opciones importantes se sitan primero. Las opciones relacionadas estn agrupadas. La organizacin es flexible. Se pueden aadir y eliminar secciones sin una reorganizacin excesiva.
Las categoras se reparten el espacio sensiblemente. Cada categora tiene un tratamiento comprensivo. Todos los temas se encuentran en la categora correcta.
Orientacin y etiquetado
Las pginas estn claramente identificadas y explicadas, con ttulos

de pginas claros y buenas descripciones.
Las pginas de sealizacin son suficientemente distintas. Las etiquetas son claras, llenas de significado y apropiadas al
contenido al cual apuntan.
Las etiquetas son consistentes en especificacin, tono y uso.

Revisin de la arquitectura
211
Las etiquetas de los vnculos proporcionan sentido a todas las

subcategoras.
Las notas de alcance se proporcionan cuando son tiles. Los usuarios pueden determinar su progreso a travs de la
informacin.
Enlaces
El enlace a la pgina de inicio se indica explcitamente. Los enlaces externos estn elegidos con moderacin, son
Barra de navegacin
apropiados y se mantienen regularmente. La pgina de enlaces es minimal y est claramente etiquetada. No hay pginas dead-end - aquellas sin enlaces posibles.
La barra de navegacin indica donde se encuentra el usuario

Bsqueda
actualmente. El usuario puede ver como la pgina actual se dispone en el sitio entero. La jerarqua est clara. El usuario puede determinar que opciones estn en el nivel superior y cuales en subniveles. La navegacin textual se proporciona para usuarios que no utilizan imgenes. La navegacin est en la parte superior e inferior a lo largo de las pginas. El usuario puede revisar rpidamente todas las opciones sin necesidad de desplazarse por ellas.
Los usuarios pueden escoger entre navegar y buscar. La alcance de la bsqueda est clara. Se proporcionan consejos de bsqueda, especialmente despus de
que se encuentren pocos o demasiados resultados. el total de campos o documentos.
Los resultados de la bsqueda indican el nmero de coincidencias y Los resultados de la bsqueda son amplios, precisos y relevantes. Los resultados de la bsqueda estn ordenador tilmente. Los resultados de la bsqueda proporcionan el contexto y/o
descripcin de cada coincidencia. Los resultados de la bsqueda estn clasificados cuando se da un gran nmero de coincidencias. La cadena de bsqueda se repite en los resultados, y el usuario puede refinar fcilmente las bsquedas. Las peticiones comunes producen buenos resultados. La bsqueda es robusta con respecto a las faltas ortogrficas, deletreos alternativos, sinnimos, plurales y prefijos y sufijos.
212
APNDICES
REVISIN DE LOS PROTOTIPOS Distribucin Simplicidad, consistencia y foco. Contraste, balance y repeticin. Proximidad, similitud y buena continuacin. Los elementos crticos sobresalen. La informacin critica aparece prxima a la parte superior izquierda de la pgina. Se proporciona el punto de focalizacin, el nfasis y la jerarqua de informacin apropiada. Navegacin La navegacin es escalable. La pgina ms compleja puede desarrollarse utilizando el mismo marco de trabajo. Se han utilizado las etiquetas de enlaces y ttulos de pagina apropiados. Texto / fuentes El tipo de fuente se ajusta al estilo de la pgina. El nmero de tipos de fuentes es limitado. El uso de tipos de letra, ancho y nfasis es limitado. El tamao de la fuente es flexible. Los enlaces de texto estn subrayados. Los enlaces de texto tienen diferentes colores para vnculos visitados y para los no visitados. El texto del cuerpo, ttulos y etiquetas es legible. Imgenes Se utiliza una fuente de luz consistente. La compresin del prototipo no pierde mucha calidad visual. Se usan las imgenes para dar soporte al contenido de la pgina. 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 ttulos de pginas, etiquetas de los botones, y nombres de los vnculos son precisos. Se incluyen la identificacin de imgenes y marcas apropiadas.
Revisin de los prototipos
213
REVISIN DETALLADA DE PROPSITO GENERAL Arquitectura y navegacin

Distribucin y diseo
La estructura se ajusta al propsito? Est claro el esquema de navegacin? Dnde estamos? Cmo encontraramos lo que queremos? Es razonable el nmero de opciones en la barra de navegacin? Estn las opciones de la barra de navegacin ordenadas lgicamente? Se ajustan los nombres de los enlaces a las pginas que llevan? Estn los vnculos marcados claramente? Hay un enlace claro hacia la pgina de inicio? Hay alguna opcin para buscar informacin? Hay un mapa del sitio? Dejan claro todas las pginas en que sitio web ests? Tiene el usuario el control sobre la navegacin? Excede la pgina el tamao de la ventana? Es consistente la disposicin a travs de las pginas? Hay un foco claro en todas las pginas? Funciona visualmente la distribucin? Se usa eficazmente la alineacin? Se usa eficazmente la agrupacin? Hay un buen contraste? Est la distribucin desordenada? Es estticamente agradable? Es el texto conciso y claro? Est el texto organizado en pequeas secciones? Hay errores de ortografa o gramtica? Tienen las pginas un texto de introduccin? Los componentes multimedia dan soporte a las tareas?

Contenido

Formularios e interaccin
Los formularios soportan la tarea? Los dilogos siguen una progresin lgica? Queda claro dnde se ir luego? Los mtodos de dilogo son concisos y consistentes? Se usan los elementos de los formularios correctamente? Estn agrupados correctamente los elementos de los formularios? Son claros los botones de envo de formularios?

Grficos
Es adecuada la calidad de las imgenes? Las imgenes incluyen texto alternativo? Las imgenes incluyen informacin del tamao?
214
APNDICES
Usan las imgenes una fuente de luz consistente? Estn almacenadas las imgenes con la mxima
compresin?
Se proporciona informacin al pasar el puntero del ratn

sobre la imagen? Es til?
Son tiles las animaciones? Hay demasiadas? Estn

comprimidas apropiadamente? Color

Tipografa
Es apropiada la eleccin de colores para el sitio? Se usan demasiados colores? Se usan los colores consistentemente? Son claros los colores de los grficos? Funciona la eleccin de colores en escala de grises?
El texto es legible? El tamao de las fuentes es lo suficientemente grande? Son apropiados los colores de las fuentes y hay suficiente
contraste? Hay mrgenes suficientes? Los tipos de fuentes se usan adecuada y consistentemente? Tolerancia a errores
Los usuarios necesitan recordar algunos elementos a

travs de las pginas o las sesiones?
Son reversibles las acciones de alto riesgo o coste? Se proporciona una confirmacin antes de las acciones de
Plataforma e implementacin alto riesgo o coste? Se controlan internamente los errores de entrada? Las pginas de error proporcionan suficiente informacin? Las pginas de error de bsqueda proporcionan varios consejos de bsqueda? Est disponible la ayuda?
Es suficientemente rpido el tiempo de carga? Est

entre 3 a 15 segundos?
Funcionan todos los vnculos? Hay imgenes rotas? Estn escritas las pginas 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 resolucin? Se requieren plug-ins no estndares? Son tiles o necesarios?
Revisin general
215
FORMULARIO DE PREPARACIN DE UN TEST CON USUARIOS
Proyecto de test con el usuario ________________________________________ Fecha ____________________ Configuracin del/los ordenador/es: Hardware ___________________________________________ SO y versin _________________________________________ Navegador y versin ___________________________________ Otro software _________________________________________ Lista de tareas: Listado de tareas primarias a probar: 1. ____________________________________________________________ 2. ____________________________________________________________ 3. ____________________________________________________________ 4. ____________________________________________________________ 5. ____________________________________________________________ 6. ____________________________________________________________ 7. ____________________________________________________________ 8. ____________________________________________________________ 9. ____________________________________________________________ 10. ___________________________________________________________
216
APNDICES
GUA DE ESTILO PARA LA REDACCIN DE CONTENIDO
Esta gua de estilo suministra estndares para el desarrollo y la presentacin 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. Adems, estas guas se usarn por los desarrolladores del sitio para corregir pruebas de las pginas 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 disposicin ms enlaces. (es decir, no referirse nunca como ellos, la pgina o el portal). Referirse a nuestros lectores en segunda persona, como Tu colaboracin es fundamental para nosotros. Uso de frases simples y directas. Dividir el texto en prrafos pequeos y fciles de leer. Proporcionar informacin creble y rica en contenido. Evitaremos cualquier cosa que pueda ser percibido como una copia, un anuncio o una tontera. Poner los temas principales en la parte superior de cada pgina y en las primeras frases de cada prrafo. Presentar las listas como elementos numerados o listados, no como prosa. Usar ttulos de seccin claros, e incluir cabeceras con sentido comn que ayuden a los usuarios a encontrar la informacin rpidamente. Evitar la ambigedad. Evitar meter a la gente en un rompecabezas. Darles la informacin que necesitan tan pronto y clara como sea posible. Utilizar con moderacin las palabras o frases en maysculas, y nunca como un estilo de formato. Un texto en maysculas no es tan fcil de leer como un texto en caja mixta, ya que dan a la pgina un aspecto muy abigarrado. Por ejemplo, PSICOLOGA DE LAS PALABRAS no es tan legible como Psicologa de las palabras. Utilizar un lenguaje imperativo como Introduzca el nombre del artista slo para las tareas obligatorias, o redactar la instruccin correctamente. Por ejemplo, podra decirse: Para ver los eventos de su zona, introduzca su ciudad. Los usuarios se ven naturalmente atrados 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 debern ser breves pero descriptivos, para proporcionar el mximo de informacin con el menor nmero de palabras. Por ejemplo, el titular Sven Vth se est recuperando proporciona ms informacin en menos palabras que los doctores informan de la mejora de Sven Vth, que promete ampliar la noticia en un artculo, pero que en realidad no transmite nada a los usuarios. Los titulares deben estar relacionados con las entradillas que haya debajo, ms que con la ampliacin de la noticia. Escribir y publicar resmenes especficos de las notas de prensa y las noticias. No repetir el primer prrafo del artculo, 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
Redaccin de contenido
217
despus. 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 ms y estar ms tiempo junto a los seres queridos son dos de las cinco formas de aumentar la esperanza de vida en cinco aos, afirma el Dr. Weil es ms intrigante e informativo que El Dr. Weil nos describe como aumentar la esperanza de vida de la poblacin. Resulta esencial incluir la fecha cuando mostramos un artculo completo, porque los artculos pueden residir en la cach (por ejemplo, mediante los motores de bsqueda) con mucha posteridad, y el contenido atrasado podra ser confundido con las noticias actuales, a menos que los elementos tuvieran una fecha completas, incluyendo el ao. Por el mismo motivo, los artculos no deben hacer referencia a momentos relativos, como hoy o la prxima semana.
Formateo

Alinear el texto a la izquierda, incluyendo cabeceras y pargrafos. Separar los pargrafos con 2 saltos de lnea. Poner una lnea en blanco antes de las cabeceras y ninguna lnea en blanco despus de las cabeceras. Aadir un salto de lnea a la ltima lnea del texto. No usar comillas dobles. Usar slo comillas simples y apstrofes. Evitar caracteres especiales que no estn disponibles en HTML. Si tienes la oportunidad, puedes ahorrar mucho tiempo a los desarrolladores proporcionando una copia impresa de cualquiera de las pginas que utilicen caracteres inusuales, con estos caracteres resaltados en negrita. Ejemplos de estos caracteres que pueden requerir un trabajo extra para reproducirlos incluyen el guin 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 difcil de leer en pantalla). No poner todo en maysculas. No confiar en las variaciones de fuentes y tamaos. No son consistentes en navegadores de diferentes plataformas y con configuraciones distintas de los usuarios. Evitar el uso incorrecto de espacios y signos de puntuacin 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. podra parecerle interesante, pero anulara los esfuerzos de un usuario que estuviese buscando reportajes. Un uso poco comn de los signos de puntuacin tambin reduce la capacidad de bsqueda 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 exclamacin. El uso de este tipo de signos denota poca profesionalidad, por lo que no deben incluirse en una pgina de inicio. Los signos de exclamacin no aportan nada y elevan el tono (no forzar a los usuarios). En caso de utilizar abreviaturas y acrnimos, aadir su significado inmediatamente detrs. 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
APNDICES
Superpitcher, ni Jeff Mills es DJ Jeff Mills. Escribir Internet como nombre propio. Escribir en minsculas y todo junto culturanocturna.com o culturanocturna. Dejar un espacio despus 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 estn etiquetadas de acuerdo a la referencia estndar de la corporacin. Los principales estilos de msica electrnica deben escribirse como sigue: techno, house, techno-house, drumnbass, 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 tambin: DJ o deejay. Escribir e-mail en vez de email. chart es femenino.
Escribir para los motores de bsqueda

Asegurarse de que el texto incluye trminos comunes que pueden usarse para buscar la informacin. Para cada pgina, proporcionar una oracin (25 palabras o menos) que describa la pgina, que usaremos en un campo de cabecera de descripcin (esta es la descripcin que muchos motores de bsqueda proporcionan en sus listados de resultados de bsqueda). Para cada pgina, proporcionar un pequeo conjunto de palabras que se usarn 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 vth 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 ms fcil de trabajar con contenido nuevo si esta creado en Word o texto plano. Por favor, no convertir el texto en HTML. El contenido grfico puede ser entregado en casi todos los formatos estndares, incluyendo EPS, Photoshop, TIFF, GIF, JPEG, Frenad, Ilustrator, BMP, y PICT. Para mantener la ms alta calidad, evitar usar un formato comprimido, como GIF o JPEG, y suministrar la versin de ms alta resolucin posible que tengas. Si no tienes versiones digitales podemos escanear versiones impresas. Entregar el texto y las imgenes en archivos adjuntos cuando los enviemos por correo electrnico.
Redaccin de contenido
219
FORMULARIO DE INFORME Y RESOLUCIN DE PROBLEMAS
Fecha de informe del problema _______________________ Sitio web _________________________________________ URL de la pgina ___________________________________ Pginas adicionales _________________________________ Tipo de error:
Esttico Error de cdigo

Severidad del error:
Estructural/Navegaciona
l Usabilidad
Hardware
Crtico
Moderado
Menor
Plataforma y navegadores donde ocurre el problema:
Mac OS Otro
Win 95 / 98 / 2000 / NT IE v. _______
Unix/Linux Otro ___________
______________ Netscape v. _______
Descripcin del problema y como ocurri: _______________________________________________________________ _______________________________________________________________ _______________________________________________________________ _____________________
Fecha de solucin del problema _________________________ Resolucin del problema: Solucionado No se pudo solucionar Aplazado El problema informado no es un problema real (por ejemplo, ha sido diseado as): __________________________________________________________ No se pudo reproducir el error Descripcin de la resolucin del problema: _______________________________________________________________ _______________________________________________________________ _______________________________________________________________ _____________________
220
APNDICES
Test con regresin:
Solucin probada en todas las plataformas y navegadores Pginas relacionadas probadas
Informe de problemas
221
REVISIN DE LA POST-PRODUCCIN OK NO OK

N / E Contenido Ortografa y gramtica El sitio incluye informacin fundamental (por ejemplo, informacin de contacto, ayuda, etc.) Los ttulos de pgina (el tag <TITLE>), las cabeceras y las etiquetas de los botones son correctos y consistentes La lista de requisitos ha sido revisada y aprobada Distribucin y grficos
Todas las imgenes estn marcadas con las etiquetas de tamao y <ALT> (probado sin cargar las imgenes ni pasar el ratn por encima) El tiempo de carga es aceptable La calidad de las imgenes es aceptable Disposicin del texto: el espaciado, los tipos de letra y los tamaos de fuente son aceptables Los grficos estn 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 distribucin y de contenido) Compatibilidad con las preferencias de usuario
La distribucin funciona en todos los tamaos de ventana La distribucin se imprime aceptablemente (sin cortar los bordes) La distribucin es razonable para todos los tipos de letra tpicos y configuraciones de tamao de fuente HTML y cdigo
Todos los vnculos han sido probados en todas las pginas Los enlaces de e-mail se han probado enviando correos o haciendo clic y revisando las direcciones Los MetaTags estn presentes en todas las pginas (palabras claves, descripciones, etc.) La funcionalidad del cdigo JavaScript est probada totalmente (y el HTML contiene etiquetas apropiadas ALT) Los errores crticos de cdigo se han eliminado Documentacin
222
APNDICES
Se han anotado los colores y las fuentes Se ha anotado la organizacin de ficheros y su localizacin Se han anotado las convenciones inusuales de nombres Promocin del sitio (una vez aprobado el lanzamiento) Yahoo! y Google Motores de bsqueda Indexadores especficos El nombre de dominio funciona
Revisin de post-produccin
223
LISTA DE CONTROL PARA UN MANTENIMIENTO MNIMO
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 Ortografa y gramtica correcta Todos los vnculos funcionan La distribucin se mantiene intacta Se cargan todas las imgenes El cdigo HTML y JavaSript funciona El sitio funciona en todas las plataformas soportadas
224
APNDICES
REFERENCIAS
REFERENCIAS
[ADE97] [BAE02] [BIA95] [BEL97]
ADELL J. Msica I simulacre a lera digital (Limaginari social en la cultura

de masses. Pags Editors, pg. 53, 1997. BAEZA YATES R. Y RIVERA LOAIZA C. Ubicuidad y Usabilidad en la Web recogido de la World Wide Web: http:// sunsite.dcc.uchile.cl/~rbaeza/inf/usabilidad.html, 2002. BIAS R. Y MAYHEW D. J. CostJustifying Usability, 1994. AP Professional Cambridge, MA, 1994. BELAUSTEGUI JIMENEZ R. Manifestaciones sonoras modernas: Msica electrnica y experimental en Barcelona (Modernidad y Postmodernidad en la msica contempornea. Butllet de la Societat Catlana de Musicologa, IV, pg. 190, 1997. BOEHM B.. A Spiral Model of software development and Enhancement. Computer, May 1988. BUTLER K.A. Usability Engineering turns 10. Interactions, June 1996. BRINK T., GERGLE D., WOOD S.D. Usability for the Web: Designing Web Sites that Work. Morgan Kaufmann, San Francisco, USA, 2002. ISBN: 155860-658-0 BROWNE D.P. Y SUMMERSGILL R.. Human Factors: Its place in system. Proceedings of the fifth international workshop on software specification and design, Pennsylvania, United States, pgs 227-234, 1989. CACHERO C., GMEZ J. Y PASTOR O. Conceptual Design of Electronic Product Catalogs Using OOH-Method Techniques. 19th International Conference on Conceptual Modeling (ER00), Salt Lake City, USA, 2000 GIL CALVO E. Los depredadores audiovisuales, juventud urbana y cultura de masas. Tecnos, Madrid, 1984. CERI S., FRATERNALI P., Y BONGIO A. Web Modeling Language (WebML): a Modeling Language for Designing Web Sites. WWW9, volume 33 (1-6), pgs. 137-157. Computer Networks, 2000. CONSTANTINE L.L. Use Cases for user Interfaces. ACM Interactions, 1995. DE TROYER O. Y LEUNE C. \WSDM: A user-centered design method for web sites. Proc. Of the 7th international World Wide Web Conference, 1997. GARCA J. El Techno Sacseja les Nits dAgost en El Peridico, edicin del 19 de Agosto de 2001 GARTON L. ET AL. Studying online socialnetworks.. Journal of Computer Communication, 1997. Re-reviewed 2002. GILL M. E-zines, diseo de revistas digitales. Ediciones G.Gili, Mxico, SA de CV, pg. 177, 2000. HENNICKER R. Y KOCH N. A UML-based Methodology for Hypermedia Design. En Evans A., Stuart S. y Selic B. editores, UML2000 The Unified Modeling Language Advancing the Standar, volume 1939 of Lecture Notes in Computer Science, York, England, Octubre de 2000. HYSELL D. Proc. Of the 16th international conference on Computer documentation: ACM, 1998. IREFREA. Salir de marcha y consumo de drogas. Edita Ministerio del Interior, Madrid, 1999. JOWERS PETER. Timeshards: Repetition, Timbre and Identity in Dance Music. Time & Society, volumen 8 (2), pg. 381, 1999. KOTZRINCKER J. Por qu comprar contenido si se puede obtener gratis? recogido de la World Wide Web: http:// www.baquia.com/com//20020604/art00010.html, 2002. KOTZRINCKER, J. Una audiencia joven, el bien ms preciado recogido de la World Wide Web: http://www.baquia.es/com/20021015/art00013.html, 2002.
[BOE88] [BUT96] [BRI02] [BRO89] [CAC00] [CAL84] [CER00] [CON95] [TRO97] [GAR01] [GAR97] [GIL00] [HEN00]
[HYS98] [IRE99] [JOW99] [KOT02] [KOT02a]
[KRU01]
Referencias
227
KRUG STEVE. No me hagas pensar. Prentice Hall, 2001. ISBN: 84-2053252-5 [LOR02] [MAN02] [MAN02a] [MAN02b] [MAN02c] [MAN02d] [MAY99] [MCD99] [MOL90] [NIE93] [NIE94] [NIE99] [NIE02] [NOR86] [NOT02]
LORS J. Introduccin a la Interaccin Persona-Ordenador. AIPO, Lleida,

2002.
MANCHN E. Qu es la usabilidad? (Definicin) recogido de la World

Wide Web: http://ainda.info/que_es_usabilidad.html, 2002. MANCHN E. La evolucin del perfil del usuario medio recogido de la World Wide Web: http://ainda.info/evolucion_perfil.html, 2002. MANCHN E. Principios generales de usabilidad en sitios web recogido de la World Wide Web: http://ainda.info/principios_generales.html, 2002. MANCHN E. Tipos de evaluacin de la usabilidad recogido de la World Wide Web: http://ainda.info/tipos_evaluacin.html, 2002. MANCHN E. Errores frecuentes en los test de usuarios recogido de la World Wide Web: http://ainda.info/errores_evaluacin.html, 2002. MAYHEW DEBORAH J. The Usability Engineering Lifecycle: A Practitioners Handbook for User Interface Design. Morgan Kaufmann, USA, 1999. ISBN: 1-55860-561-4 MCDANIEL SCOTT. Reimpreso de Usability Interface. Volumen 6, N 1, Julio 1999. MOLICH R. Y NIELSEN J. Heuristic evaluation of user interfaces en Proceedings of ACM CHI 1990. Seattle, WA, Abril 1990, Pg. 249-256, 1990 NIELSEN J. Usability engineering. AP Professional, Boston, MA, 1993. NIELSEN J. Y MARK R. L. Usability inspection methods. Wiley, Nueva York, NY, 1994. NIELSEN JAKOB. Designing Web Usability: The Practice of Simplicity. New Riders Publishing, USA, 1999. NIELSEN J. Y TAHIR M. USABILIDAD de pginas de inicio: anlisis de 50 sitios web. Prentice Hall, Pearson educacin, SA, 2002. ISBN: 84-2053202-9 NORMAN D. Y DRAPER S. User Centered System Design. Lawrence Erlbaum Associates, Publishers, Hillsdale, NJ, 1986. Macromedia y Jakob Nielsen trabajaran juntos para mejorar la navegacin por internet recogido de la World Wide Web: http://www.noticiasdot.com/publicaciones/2002/0602/0706/noticias0706/n oticias0706-7.htm, 2002. ROSSON M.B. Y CARROLL J.M. Usability Engineering. Morgan Kaufmann, USA, 2002. REDACCIN BAQUIA.COM. Los anunciantes afinan su puntera recogido de la World Wide Web: http://www.baquia.com/com/20021210/not00008.html, 2002. REDACCIN BAQUIA.COM. Google: dejad de espantar usuarios con popups recogido de la World Wide Web: http://www.baquia.es/com/20021025/not00011.html, 2002. ROBERTSON J. Information design using card sorting. Inf. & Design, 2001. ROSENFELD L. Y MORVILLE P. Information Architecture for the World Wide Web: Designing Larg-Scale Web Sites, 2nd Edition. Editorial OReilly, USA, 1998. 2nd Edition, Agosto 2002
[RCA02] [RED02] [RED02a] [ROB01] [ROS98] [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. SNCHEZ DE OCAA J.M. Mitos y leyendas del software open source recogido de la World Wide Web: http:// www.evolucy.com/esp/articulos/20020915_open_source.html, 2002. SOMMERVILE IAN. Software engineering, 6th edition. Addison Wesley.
[SAN02]
[SOM01]
228
APNDICES
[STE02] [TRU98] [UGA02] [WHA94] [WHI98]
Reading, MA, 2001. STERNE J. Web Metrcis: Proven Methods for Measuring Web Sites Success. John Wiley & Sons, 2002. TRUCHARD A., EDITOR Y KATZ-HAAS R., AUTOR. Reimpreso de Usability Interface. Volumen 5, N 1, Julio 1998. UGARTE, DE D. El libro del posicionamiento en buscadores. www.lasindias.com, Madrid, 2002.
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, Pg. 105-140, 1994. WHITE B, BAGWELL D., GALAMBOS G., VAN WINKLE R., WALMSLEY A. An approach to designing e-business solutions. Raleigh, NC: IBM Publications, 1998.
BIBLIOGRAFA A continuacin presentamos una lista de lecturas que han servido como base y ayuda para la realizacin de este proyecto. Alguna de esta bibliografa 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. Msica i ideologies. Mentre la meva guitarra parla suaument... Universitat de Lleida: Generalitat de Catalunya, pgs 153170 y 261-288, 2003. GIL MARTHA. E-zines, diseo de revistas digitales. Ediciones G.Gili, SA de CV, Mxico, 2000. ISBN: 968-887-378-0 GRANOLLERS T., LORS J. y PERDRIX F. Aplicacin del Modelo de Proceso de la Ingeniera de la Usabilidad a entornos web. Departamento de Informtica e Ingeniera Industrial. Universitat de Lleida, 2003. KUHLMAN F. y ALONSO C. A. Informacin y telecomunicaciones. FCE, Mxico, 1997. NIELSEN J. Y TAHIR M. USABILIDAD de pginas de inicio: anlisis de 50 sitios web. Prentice Hall, Pearson educacin, SA, 2002. ISBN: 84-205-3202-9 ROMERO LAGUILLO L.F. Publicar en Internet. Gua prctica para la creacin de documentos HTML. Servicio de publicaciones de la Universidad de Cantabria. Universitat de Lleida, 1999. SAVAGO S., NAVARRETE T. y BLAT J. Tcnicas de Ingeniera de Usabilidad y metodologa de diseo conceptual en algunas aplicaciones informticas. Departament de Tecnologa, Grupo de Tecnologas Interactivas, Universitat Pompeu Fabra, 2002. TALENS S. y HERNNDEZ J. Internet, redes de computadoras y sistemas de informacin. Paraninfo, Madrid, 1997. ISBN: 84-283-2334-8
Referencias
229
ENLACES http://www.ainda.info Usabilidad, diseo web fcil de usar. http://www.baquia.com/com//20020326/art00012.html Analtico (2002). Qu importa ms, el precio de la accin o la calidad del contenido? http://www.jjg.net/ia/visvocab/spanish.html Vocabulario visual para describir arquitectura de informacin y diseo de interaccin de J.J. Garret. http://www.baquia.com/com/20020704/art00007.html Los portales generalistas: El fin de una era por Antonio Delgado Barrera. http://www.baquia.com/com//20020828/art00012.html Pop-down por Iaki I. Rojo http://www.baquia.es/com/20021104/not00003.html Redaccin Baqua.com (2002). Yahoo! usar PHP en lugar de su propio lenguaje propietario. Recogido de la World Wide Web. http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2901102,00.html Anlisis del valor de Linux por su uso de la arquitectura Intel. http://zdnet.com.com/2100-1104-975848.html Resumen del estudio de IDC sobre costo total de Linux vs Windows patrocinado por MS http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2901156,00.html Comentario al estudio de IDC sobre el Costo Linux vs. Windows. http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2907876,00.html Anlisis del costo total de propiedad de Linux sobre Windows.
http://techupdate.zdnet.com/techupdate/stories/main/0,14179,2878232-3,00.html
Anlisis de las dificultades para migrar de workstation Windows a Linux en entornos empresariales.
http://es.tldp.org/Manuales-LuCAS/conf-MigraNT2GNU/doc-migrar-nt-linux-html/
Libro blanco de Jon C. LeBlanc sobre los motivos, ventajas y procedimientos para migrar de servidores NT a Linux. http://www.infoworld.com/articles/tc/xml/00/08/28/000828tcroi.xml Nota sobre el desarrollo de IBM para portar servicios y aplicaciones para reducir costos empresariales. http://www.eweek.com/article2/0,3959,293,00.asp Resultados de la comparacin entre MySQL 4, Oracle 9i, DB2 7.2, SQL Server 2000 y ASE 12.5 de PC Computing. http://www.microsoft.com/windows2000/server/howtobuy/pricing/default.asp Listas de precios de Microsoft Windows 2000 Server. 230
APNDICES
http://www.microsoft.com/windowsxp/pro/howtobuy/pricingretail.asp Precios de Microsoft Windows XP Profesional. http://www.linux.org http://www.apache.org http://www.mysql.com http://www.php.net URLs oficiales LAMP. http://www.zend.com/zend/tut/tut-hatwar.php http://www.zend.com/zend/tut/tut-hatwar2.php Develop rock-solid code in PHP. http://www.zend.com/zend/spotlight/code-gallery-wade7.php Working with Multi-page Forms. http://www.netcraft.com/Survey/index-200206.html En Junio de 2002, Apache tena un 60% de la cuota de mercado. http://ciac.llnl.gov/ciac/ToolsUnixGeneral.html#Wuftpd Servidor FTP ms utilizado en Internet. http://lwn.net/Articles/1433/ PHP (open source) es el lenguaje ms utilizado en Internet para serverside-scripting. http://www.forbes.com/2002/07/15/0715linux.html En el ao 2000 Linux era el 2 sistema operativo ms utilizado para servidores en el mundo. http://www.samag.com/articles/2001/0107/ Linux tiene mejor rendimiento que Solaris y Windows 2000. http://www.cyber.com.au/cyber/about/linux_vs_windows_tco_comparison.pdf Las soluciones informticas basadas en Linux y software abierto tienen un coste global entre un 24% y un 34% menor que las soluciones basadas en el enfoque propietario de Microsoft. http://conferences.oreillynet.com/cs/os2002/view/e_sess/2600 Yahoo utiliza, entre otro software open source, MySQL. http://www.google.com/press/highlights.html Google, el buscador ms utilizado en Internet, est soportado por un cluster de ms de 10.000 mquinas Linux. http://www.proyectoweb.cubaweb.cu/boletines/032-feb03.html Qu nos depara el futuro en el Diseo Web?
Referencias
231
232
APNDICES

TFC Web CulturaNocturna

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TFC Web CulturaNocturna

Uploaded by

Copyright:

Available Formats

Universitat de Lleida - Escola Universitaria Politcnica Enginyeria Tcnica en Informtica de Sistemes

Trabajo Final de Carrera

Jos M. Belmonte Marn

Director: Dr. Jess Lors i Vidal

ESTADO DEL ARTE................................................ 11

WORLD WIDE WEB.................................................... 12

SOFTWARE OPEN SOURCE..................................... 28

MPIU PARA LA WEB.................................................. 44

APLICACIN DEL MODELO...................................... 64

CONCLUSIONES Y LNEAS FUTURAS............... 169

CONCLUSIONES ..................................................... 170

Figura 2 Un ejemplo de pobre usabilidad.

Figura 3 Pgina de inicio de Yahoo!

WORLD WIDE WEB

CIBERNTICA, COMUNICACIN ENTRE MQUINAS TCP/IP LA WORLD WIDE WEB

Captulo 1: World Wide Web

ESTADO DEL ARTE

Figura 4 Modelo cliente-servidor.

Captulo 1: World Wide Web

ESTADO DEL ARTE

Los servidores de WWW

ESTADO DEL ARTE

ESTADO DEL ARTE

Tabla 1 Tabla de versiones.

Sus caractersticas principales son:

Captulo 1: World Wide Web

JavaScript en los documentos HTML

history Jerarqua JavaScript para location document los objetos del

<INPUT TYPE="file"> <INPUT TYPE="hidden">

frame navigator MACROMEDIA FLASH

<IMG SRC="..."> <A HREF="...">...</A> <EMBED SRC="..."> <FRAME>

Captulo 1: World Wide Web

ESTADO DEL ARTE

SOFTWARE OPEN SOURCE

SOFTWARE LIBRE APACHE PHP

Captulo 2: Software Open Source

ESTADO DEL ARTE

Tecnologas Open Source:

Captulo 2: Software Open Source

La configuracin se realiza editando el archivo httpd.conf y cambiando algunos parmetros.

ESTADO DEL ARTE

ESTADO DEL ARTE

Vamos a ver un ejemplo sencillo:

<HTML> <BODY> <?php echo Esto es PHP<BR>; // Primera parte

Ejemplo 2 Sintaxis en PHP.

ESTADO DEL ARTE

Figura 9 Funcionamiento de las cookies.

<?php session_start(); echo 'La sesin ?>

ESTADO DEL ARTE

Captulo 2: Software Open Source

ESTADO DEL ARTE

MPIU PARA LA WEB

Captulo 3: MPIU para la Web

Figura 11 El modelo incremental.

Figura 12 Metodologa esquemtica de la Ingeniera de la Usabilidad.

Otros principios para el diseo de sitios web son:

Figura 13 Modelo de Proceso de la Ingeniera de la Usabilidad (MPIU).

Figura 14 Actividades del anlisis de requisitos.

Figura 17 Lista de posibles actividades de evaluacin.

Captulo 3: MPIU para la Web

APLICACIN DEL MODELO

Evaluacin anterior a los prototipos

Captulo 4: Aplicacin del modelo

ANLISIS DE LOS IMPLICADOS ACTORES, ROLES Y ORGANIZACIN PLATAFORMA