Artículo 1.5. Diseño de sitios web: disciplinas, materias y esquemas integradores

Cristòfol Rovira; Mari-Carmen Marcos

Cristòfol Rovira; Mari-Carmen Marcos. Artículo 15. Diseño de sitios web: disciplinas, materias y esquemas integradores. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.

---

Sumario

1. Introducción

2. Interacción Persona-Ordenador: la disciplina madre

3. Arquitectura de la información y diseño de navegación

4. Usabilidad: las métricas

5. Experiencia de usuario

6. Relación entre disciplinas

7. Perfiles profesionales y especialización científica

8. Conclusiones

9. Ejercicio

10. Bibliografía

---

1. Introducción

En el diseño de cualquier producto, y en especial en el que aquí tratamos, los sitios web, la interfaz juega un papel primordial porque es la vía por la que el usuario se comunica con el sistema. Independientemente de la tecnología que se esconda tras una página web, la programación y el código que haya en sus ficheros, la carta de presentación y lo que permite que todas sus funciones sean accesibles es la interfaz. El mundo del diseño ha trabajado a conciencia desde sus inicios en hacer que los objetos sean “usables”, es decir, que permitan ser usados para el fin con el que fueron diseñados, y que ese uso se haga de una forma intuitiva. La informática no ha sido menos, y ya en los años 70, cuando llegaban al mercado los primeros ordenadores, había diseñadores ocupándose de ofrecer interfaces que ayudaran a las personas en su uso. En ese momento se acuñó la expresión “Interacción Persona-Ordenador” (Human-Computer Interaction) para denominar a la nueva disciplina que se estaba creando.

En las últimas décadas la rápida evolución de la Web ha calado hondo en el diseño de sitios web dando lugar a múltiples disciplinas, todas ellas encaminadas a obtener sitios web más fáciles de navegar, más usables (eficientes, efectivos y satisfactorios), y que además generen una experiencia positiva al usuario que los visita. El motivo de que haya este caos de disciplinas o materias es que muchos profesionales y estudiosos han abordado esta temática, pero desde distintas disciplinas. Por citar a algunos de los autores más reconocidos y citados, nombramos a Don Norman y John M. Caroll que hacen su aporte desde el mundo de la Psicología; Ben Schneiderman y Jakob Nielsen, con un background de Informática; Brenda Laurel, del mundo del Diseño; o Peter Morville y Louis Rosenfeld, graduados en Biblioteconomía y Documentación, por citar algún ejemplo de cada disciplina.

Al ser todavía un objeto de estudio novedoso falta que pase algún tiempo y que cada concepto se reordene. El esquema (figura 1) de Rosenfeld y McMullin, mostrado por sus autores en 2002 -hace más de una década- y actualmente ya no disponible online, trataba de ser exhaustivo y presentar todos los conocimientos que confluyen en la denominada user experience, que es la forma más genérica de denominar al conjunto de conocimientos relacionados con un tipo de diseño web que tiene como objetivo satisfacer al usuario.

Figura 1. Conocimientos relacionados con la experiencia de usuario, esquema de Rosenfeld y McMullin, 2002

El resultado de tantas materias interactuando hacia un mismo fin ha llevado también a una multiplicidad de nombres para denominar los procesos y conocimientos implicados. Las más habituales actualmente son estas, por orden alfabético:

• Accesibilidad
• Arquitectura de la información
• Diseño centrado en el usuario
• Diseño de experiencia de usuario
• Diseño de interacción
• Diseño de interfaces de usuario
• Diseño de navegación
• Interacción persona-ordenador
• Usabilidad

En algunos casos hay abundantes zonas de coincidencia, donde dos o más disciplinas se ocupan de lo mismo, incluso proponiendo recomendaciones de diseño muy parecidas. En otros casos, la disciplina plantea un esquema integrador que alberga todo el diseño web y que incluye otras disciplinas más concretas, tal como ocurre con el Diseño centrado en el usuario (Hassan, 2004), la Interacción persona-ordenador (IPO) e incluso la Usabilidad.

Si analizamos el volumen de búsquedas sobre estos términos que Google proporciona en su servicio Google Trends podemos identificar aquellas materias o disciplinas que tienen una mayor popularidad.

Tomando datos de los dos últimos años (figura 2), podemos ver que en idioma inglés el término más popular es “ux design”, especialmente si le sumamos los resultados de la misma búsqueda con las siglas desarrolladas (user experience design). Le siguen a una cierta distancia «human computer interaction«, «information architecture«, «web accessibility» y «web usability«. El resto de materias tienen un volumen de búsquedas muy inferior.

No obstante, si usamos las palabras “usability” y “accessibility” sin formar exacta con “web”, el volumen de búsquedas se dispara muy por encima de “ux design”, pero es posible que una parte de estas búsquedas no se refieran al entorno web.

Figura 2. Volumen de búsquedas en Google de los términos en inglés relacionados con el diseño web

Fuente: Google Trends

En el idioma español, la situación es distinta (figura 3). Las búsquedas más populares son “experiencia de usuario«, «accesibilidad web» y «usabilidad web» y a una cierta distancia «diseño centrado en el usuario» y “arquitectura de la información”. Las búsquedas por «interacción persona ordenador» son casi inapreciables.

Figura 3. Volumen de búsquedas en Google de los términos en español relacionados con el diseño web

Fuente: Google Trends

Se han tomado algunas precauciones para que la comparación entre las distintas búsquedas fuera equitativa. Por ejemplo, se ha restringido las búsquedas a frases exactas y se ha añadido la palabra “web” en los caso en los que la disciplina se puede aplicar a diversos contextos, como es el caso de la usabilidad o la accesibilidad. Finalmente se ha contabilizado los datos de la búsqueda en la web, de los dos últimos años y no se han aplicado filtros por categorías.

Los resultados más significativos después de analizar las búsquedas realizadas en Google por las disciplinas relacionadas con el diseño web son los siguientes:

• En el idioma inglés la denominación “ux design” o «user experience design» tiene una gran aceptación. Su traducción al español, «experiencia de usuario», tiene un volumen relativamente alto de consultas y parece que es un término que se va consolidado.
• En cambio, en el caso de «human computer interaction«, tiene una gran aceptación en el idioma inglés y se usa muy poco en español («interacción persona ordenador» ).
• Las disciplinas que tienen un mayor volumen de búsquedas en español son “usabilidad web” y “accesibilidad web”.
• En ambos idiomas, los términos “usabilidad” y “accesibilidad” sin formar parte de frase con “web” tienen un volumen de búsquedas muy superior a todos los demás, especialmente en español.

A continuación hacemos un recorrido por algunas de estas disciplinas, las más significativas, intentando poner un poco de orden en el caos. Nos centraremos en las materias relacionadas con las primeras fases del proceso de desarrollo de una sede web: la concepción inicial, también denominada análisis funcional o de requerimientos (Pedraza-Jiménez, 2013), y especialmente la posterior fase de diseño. En cambio, las disciplinas relacionadas con las fases de la implementación y del seguimiento no formarán parte de nuestro análisis.

2. Interacción Persona-Ordenador: la disciplina madre

La Interacción Persona-Ordenador es la disciplina que se ocupa de estudiar la manera en que las personas se comportan al utilizar sistemas tecnológicos (Marcos, 2001, 2004). Su objetivo es estudiar la forma en que las personas utilizan los ordenadores para así adaptar los sistemas a los usuarios. Aunque en su origen trataba sobre esta interacción con los ordenadores, hoy en día incorpora otras tecnologías como móviles, tablets, etc.

Surge en la segunda mitad del siglo XX, al mismo tiempo que los ordenadores comienzan a irrumpir en diversos ámbitos, con el fin de lograr mayor rentabilidad con mejor esfuerzo, es decir, de optimizar su uso. La preocupación por la IPO (HCI, Human-Computer Interaction) ha llevado a que de ella deriven estudios centrados en aspectos más concretos como la Usabilidad, la Accesibilidad o la Arquitectura de la Información.

En su más puro sentido, la IPO es una disciplina humanística, pues su objetivo final es mejorar la experiencia de las personas, pero no podemos descartar que sea una disciplina dentro del ámbito de la comunicación, pues trata de mejorar la comunicación entre éstas y las nuevas tecnologías, y por otro lado es evidente que tiene un alto componente tecnológico, pues son los sistemas informáticos los que deben ser estudiados y adaptados a las necesidades de las personas.

Por lo tanto, si tenemos que inscribir a la IPO dentro en una típica clasificación de las ciencias, no queda más remedio que ubicarla en una posición intermedia entre:

• Las Ciencias Humanas, porque estudia a las personas.
• Las Ciencias de la Comunicación, porque estudia los procesos de comunicación.
• Las Tecnologías de la Información, porque trabaja en la mejora de los sistemas informáticos.

Del lado de las personas se nutre de diversas ciencias:

• La Psicología: para estudiar cómo realizamos las personas los procesos de atención, percepción y procesamiento mental de la información. Por ejemplo, para conocer la forma en que memorizamos información y de esta forma diseñar los sistemas para hacer que recaiga el menor esfuerzo cognitivo en la persona.
• La Ergonomía: para estudiar tanto los aspectos cognitivos (ergonomía cognitiva) como los procesos mecánicos que se dan en la relación de las personas con los objetos, y hacer éstos más cómodos y adaptados a nosotros.
• La Sociología: para estudiar el comportamiento de las personas dentro de un grupo. Es muy útil para comprender la forma en que las personas trabajan con ordenadores u otras tecnologías de forma colaborativa.

En el lado de la comunicación toma conocimientos de:

• El Diseño: para mejorar la presentación de la información y por ende la satisfacción del usuario que la utiliza.
• La Lingüística: para mejorar la comunicación verbal entre los sistemas y las personas, pues el lenguaje sirve como vehículo de información.
• La Documentación: pues es la disciplina que se ocupa de organizar la información, clasificarla, etiquetarla, etc. y ponerla a disposición de los usuarios de la mejor manera posible.

Del lado de las herramientas tecnológicas (ordenadores, dispositivos móviles, etc.) resulta evidente la necesidad de la Ingeniería Informática, tanto en aspectos de hardware, como de software o aplicando sus metodologías (Rovira, 2003) y en especial en todo aquello relacionado con las interfaces de usuario.

Por tanto, la Interacción Persona-Ordenador es una disciplina teórica general que puede aplicarse al caso concreto del diseño web y que incluiría otras disciplinas más concretas como la Usabilidad, la Accesibilidad y la Arquitectura de la Información. Estas disciplinas específicas están más orientadas a la praxis, aunque tienen una carga importante de teoría que ha dado lugar a recomendaciones de diseño, técnicas de evaluación o procedimientos de diseño centrado en los usuarios. Aunque a menudo no se reconozca de forma explícita, las raíces de muchos de estos éxitos están en las propuestas del IPO, algunas de principios de los años noventa o incluso anteriores, como el propio diseño centrado en el usuario (Norman, Draper, 1986).

3. Arquitectura de la información y diseño de navegación

La arquitectura de la información (AI) se ocupa entre otras cosas de «definir cuál va a ser el contenido del sitio, sus objetivos, herramientas, cómo se llamarán los botones y en qué posición éstos van a estar, cómo se va a relacionar el usuario con el sitio». Algunos autores muy reconocidos en este campo han formalizado la definición de la disciplina, por ejemplo Wurman, o Rosenfeld y Morville.

Richard Saul Wurman, que en 1996 usó por primera vez la expresión «arquitectos de la información» en su libro así titulado (Information Architects), considera que la AI es una profesión dedicada a la organización de la información. Su punto de vista es anterior a la popularización de la web, por lo que el enfoque es más amplio de lo que hoy en día se considera la AI, y tiene una relación directa con la profesión de los bibliotecarios, documentalistas y otros profesionales de la información y la documentación.

Lou Rosenfeld y Peter Morville son arquitectos de información pioneros en esta disciplina. Ambos, graduados en los estudios universitarios en Biblioteconomía y Documentación, han publicado 3 ediciones de su libro Information Architecture for the World Wide Web (1998, 2002 y 2006). Para ellos (Rosenfeld y Morville, 2002; Hill, 2000), la arquitectura de la información es la disciplina encargada del etiquetado y del diseño estructural de espacios de información digital para facilitar la realización de tareas y el acceso a los contenidos de forma intuitiva. Garrett (2003: 94) apunta en la misma dirección indicando que la arquitectura de la información se ocupa de la creación de los esquemas de organización y navegación que permitan a los usuarios moverse a través de un sitio Web con eficiencia e eficacia.

En su libro presentan la AI con cuatro definiciones (Rosenfeld, Morville, 2002: 4):

• La combinación de organización, etiquetado y esquemas de navegación dentro de un sistema de información.
• El diseño estructural de un espacio de información para facilitar la consecución de tareas y el acceso intuitivo al contenido.
• El arte y la ciencia de estructurar y de clasificar sitios web e intranets para ayudar a las personas a encontrar y gestionar la información.
• Una disciplina emergente y una comunidad de trabajo centrada en proporcionar principios de diseño y arquitectura en el espacio digital.

En el proceso de diseño y creación de una sede Web, Lou Rosenfeld y Peter Morville identifican una «zona gris» en la que es muy difícil identificar las fronteras entre las distintas disciplinas implicadas: interacción persona-ordenador, arquitectura de la información, diseño de interacción, diseño de la información, diseño gráfico e ingeniería de la usabilidad: «The design of navigation systems takes as deep into the gray area between information architecture, interaction design, information design, visual design, and usability engineering, alt of which we might classify under the umbrella of experience design.» Rosenfeld y Morville (2002: 108)

Por otro lado, parece que hay un cierto consenso en que el diseño de navegación forma parte de la arquitectura de la información, disciplina más amplia encargada de proponer principios prácticos para la estructuración, etiquetado y navegación de la web. A su vez, ambas disciplinas se nutren de los resultados obtenidos por los estudios de usabilidad. Y es que efectivamente la Usabilidad y la Arquitectura de la Información se condicionan mutuamente. Cuando se desarrolla un sitio web, los principios de la Arquitectura de la Información son evaluados por medio de los tests de usabilidad aplicados a los prototipos. En función del resultado de estos tests se pueden modificar las decisiones tomadas por el arquitecto de la información. En la práctica las dos disciplinas aparecen inseparables. A menudo ambas son presentadas abarcando todo el ciclo de desarrollo de un sitio web, incluyendo aspectos relativamente lejanos al núcleo central de actividad, como la definición de los objetivos, la selección de los contenidos o las políticas de mantenimiento.

4. Usabilidad: las métricas

El término usabilidad es posiblemente es más utilizado para referirse a la facilidad de uso de un producto, por decirlo de una forma simple. La Wikipedia propone una definición también en esta línea: «La usabilidad (..) es la medida de la facilidad de uso de un producto o servicio, típicamente una aplicación software o un aparato (hardware)».

Pero usabilidad es mucho más que “facilidad”, como decía Engelbart (cita extraída de Fischer 2001: 66), “Si la facilidad de uso fuera el único criterio válido, las personas se quedarían en los triciclos y nunca probarían las bicicletas” (If ease of use was the only valid criterion, people would stick to tricycles and never try bicycles).

La norma ISO 9241-11 (1998) establece la definición que se ha aceptado internacionalmente para este concepto, y lo hace en función de cómo puede ser medida: usabilidad es la capacidad de un producto o servicio para que sea utilizado de forma eficiente, eficaz y satisfactoria por su público objetivo para los objetivos para los que fue diseñado en un determinado contexto de uso. La definición de la ISO hace hincapié en las tres métricas tradicionales de la usabilidad: eficiencia, eficacia y satisfacción. A ellas Nielsen (1993, 2000) añade dos cualidades más para medir: facilidad de aprendizaje (learnability) y capacidad de ser recordado (memorability).

Así pues, la usabilidad (Krug 2001, 2010) es una característica de un sitio web y por extensión también es la disciplina encargada de evaluarla mediante distintos tipos de pruebas (evaluación heurística, tests con usuarios, etc.) para posteriormente indicar cómo conseguir mejoras.

En el contexto de las disciplinas implicadas, es necesario mencionar las relaciones entre arquitectura de la información y usabilidad. Baeza-Yates, Ribera y Velasco (2004) proponen un «modelo causal» en el que la arquitectura de la información proporciona los principios teóricos que conducen el diseño para la creación de las sedes web de calidad: «Los proyectos se diseñan pensando en un modelo de usuario y en la experiencia que éste tendría al usar el sistema. Sin embargo, el verdadero resultado no se puede conocer hasta que usuarios reales se enfrenten a él. Es por eso que en un primer nivel el modelo presenta esta dualidad entre diseño y uso. En la dimensión del diseño se encuentran la arquitectura de información y la ubicuidad. No existe ubicuidad sin arquitectura de información y sólo si el sitio es ubicuo en la web, éste podrá ser usado. En la dimensión del uso aparece la usabilidad y su evaluación, así como el registro de actividad en las bitácoras (logs) para su análisis.» (Baeza-Yates, Ribera, Velasco 2004: 178).

Finalmente también mencionar las fuertes interrelaciones entre la Usabilidad y la Accesibilidad. Aunque la accesibilidad se define en relación a las capacidades personales de los individuos que actúan como usuarios, se refiere igualmente a la facilidad de uso, por tanto, es inevitable que haya un alto grado de solapamiento entre ambas disciplinas.

5. Experiencia de usuario

Así como la usabilidad se preocupa de que las cosas funcionen bien, de forma intuitiva, con el menor esfuerzo cognitivo posible, la experiencia de uso es un concepto más amplio que se focaliza en que el usuario disfrute, por lo tanto, añade a la satisfacción un componente de subjetividad más complicado de medir de una forma objetiva. Como decíamos antes, la usabilidad podría representarse por una autopista amplia, que permite circular con velocidad y seguridad, mientras que la experiencia de uso sería una carretera de montaña, con curvas, empinada, donde no se puede correr y no es tan segura, pero con un paisaje increíble y un olor a naturaleza que nos hace sentir muy bien. Esto, trasladado a un sitio web, hace que en ocasiones haya que equilibrar lo fácil, lo intuitivo, lo usable, con lo que hará que la persona se vaya de la página con una sensación agradable y que quiera regresar.

Como veremos en el siguiente punto, Jesse James Garrett, un arquitecto de información, creó un modelo (figura 4) que resume de forma visual los elementos que conforman lo que denominamos experiencia de usuario. Este esquema es además la primera propuesta con éxito de integración de todas las disciplinas implicadas en el diseño y el desarrollo de sitios web. El autor explica que «la web fue originalmente concebida como un espacio de información hipertextual; pero el desarrollo de tecnologías cada vez más sofisticadas tanto en el despliegue como la administración han nutrido su uso como interfaz remota de software. Esta naturaleza dual ha guiado a mucha confusión, ya que los practicantes del desarrollo de experiencia de usuario han intentado adaptar su terminología a casos más allá del alcance de su aplicación original». Como se puede ver en el gráfico (figura 4), la experiencia de usuario tiene dos ejes: uno que ve la web como una interfaz de software y otro como un sistema de hipertexto.

6. Relación entre disciplinas

Garrett (2003: 33) propuso hace ya más de diez años un esquema general (figura 4) del papel de cada una de estas disciplinas, estableciendo el tipo de interrelación entre ellas en el contexto de la experiencia de usuario (D’Hertefelt, 2000; Dillon, 2001; Hassan 2005). Por ejemplo, para Garrett, el diseño de navegación depende de la arquitectura de la información y se implementa al mismo tiempo que el diseño de la interfaz y antes que el diseño gráfico.

Figura 4. Diagrama de los elementos de la experiencia de usuario (Garrett, 2003: 33)

Versión completa: http://www.jjg.net/elements/pdf/elements.pdf (2000)

Este esquema tuvo gran éxito y fue reproducido y citado de forma generalizada. La gran aportación de Garrett fue integrar casi todas las disciplinas relacionadas con el diseño web sin exigir excesivas dependencias entre ellas. Cada una de ellas puede tener su propia identidad al mismo tiempo que se integra en el conjunto de una manera clara siguiendo los ejes de:

• Abstracción – concreción
• Concepción – realización

Y las dos perspectivas de todo el proceso:

• La web como interfaz de usuario
• La web como sistema hipertextual

Otros autores (Olsen, 2003; Dalton, 2007; Sherwin, 2010) han hecho ampliaciones y reelaboraciones de este esquema inicial que el propio Garrett valora muy positivamente (Van Geel, 2010).

Figura 5. George Olsen (2003)

Haz clic para acceder a uxapproachesmodel.pdf

En el esquema de Olsen (2003) se mantienen las principales características de la propuesta inicial de Garrett (2000), como ,por ejemplo, la ordenación general de acuerdo con el proceso cronológico de desarrollo, desde la concepción hasta la realización (figura 5). Se mantienen las mismas 5 capas o fases de este proceso. Olsen les da un nombre que curiosamente empieza en todos los casos por “S”: Strategy, Scope, Structure, Skeleton y Surface. También las disciplinas mencionadas en ambos esquemas son en gran parte coincidentes: Diseño de Interacción, Arquitectura de la Información, Diseño de Interfaz, Diseño de Navegación y Diseño Visual.

La principal aportación de Olsen fue añadir una nueva perspectiva. El esquema inicial de Garrett analizaba el proceso de desarrollo de las sedes web desde dos perspectivas: la web como interfaz de software (orientación a las tareas) y la web como sistema hipertextual (orientado a la información). De hecho, esta dualidad y las confusiones que generaba, fue el principal motivo que llevó a Garrett a la creación del esquema.

Olsen generaliza el esquema inicial aportando una tercera perspectiva sobre el desarrollo de interactivos multimedia (figura 6). Añade elementos para cubrir también la parte más creativa del proceso de desarrollo incluyendo la ficción que pueda estar relacionada en productos como por ejemplo los videojuegos.

Figura 6. Richard Dalton (2007)

Haz clic para acceder a rainbowplanes-6-15-2007.pdf

El esquema de Dalton (2007) es relativamente más sencillo que los dos anteriores (figura 6). Mantiene las 5 capas con los mismos nombres (Strategy, Scope, Structure, Skeleton y Surface) pero no entra en detalles sobre las disciplinas implicadas ni sobre las dos o tres perspectivas mencionadas en los esquemas anteriores. Su principal aportación, como el propio Dalton indica,, es resaltar algunas fuerzas adicionales que actúan en la fase inicial de la estrategia, en especial las necesidades de los usuarios y los objetivos empresariales.

Figura 7. Sherwin 2010

Haz clic para acceder a elementsofdesignstudioexperience_v1.pdf

Finalmente Sherwin (2010) reinterpreta las aportaciones anteriores, modifica la terminología pero mantiene una estructura muy parecida formada por 5 capas ordenadas de abstracto a concreto o de desde la concepción a la realización (figura 7). Las perspectivas cambian completamente, se reducen a dos y están centradas en el “diseño como empresa” (dinero) y al “diseño como práctica” (tiempo). Las disciplinas desaparecen y son fusionadas con las capas que pasan de denominarse: Portafolio, Clientes o Staff, Procesos o Cultura, Mercado o Capacidades y Filosofía.

El propio Sherwin (2010) reconoce que ha “masacrado” el esquema de Garrett, especialmente al eliminar las disciplinas. El esquema resultante es más sencillo y se presenta con una plantilla de espacios en blanco para que el usuario pueda llenar las 5 capas con sus propios contenidos.

7. Perfiles profesionales y especialización científica

La multiplicidad de materias que incluye el diseño web va de la mano con los tipos de conocimientos requeridos para ejercer la profesión en diversos puestos. Si bien en muchos casos es una misma persona o un mismo equipo el que se ocupa de todo lo que tiene que ver con el diseño del sitio web, las instituciones y empresas de cierto tamaño tratan de tener perfiles más especializados como el arquitecto de información, que se dedica a proponer la estructura del sitio web y prepara los prototipos, o el especialista en usabilidad, que se ocupa de evaluar el sitio web para proponer mejoras. Hay tantos nombres para estos perfiles como disciplinas -o más-, pueden encontrarse ofertas de empleo solicitando un diseñador de interacción, un diseñador de experiencia de usuario, etc. La figura 8 muestra en forma esquemática los perfiles más comunes.

Figura 8. Profesiones relacionadas con la web.
En la zona central están las que son específicas del diseño de sitios web. Fuente: UXnet

Los investigadores y los profesionales de estas disciplinas cuentan con diversas agrupaciones en las que compartir experiencias y conocimiento. A nivel internacional las asociaciones son las siguientes:

• ACM SIGCHI (Special Interest Group on Computer-Human Interaction), organiza la conferencia CHI. El capítulo local en España de este grupo es CHISPA.
• UPA (Usability Professionals’ Association). Existe UPA Spain pero en los últimos años no ha mostrado movimientos..
• IAI (Information Architecture Institute), organiza la conferencia IA Summit.
• IxDA (Interaction Design Association), organiza la conferencia Interaction.
• AIPO (Asociación de Interacción Persona-Ordenador), organiza la conferencia Interacción.

Estas disciplinas desarrollan su actividad empresarial pero también académica y científica que queda plasmada en las revistas académicas, algunas de ellas indexadas en el WOS (Web of Science). A continuación presentamos las más significativas indicando, cuando procede, el factor de impacto:

• Human-Computer Interaction (FI 4.682)
• Computers in Human Behavior (FI 2.293)
• Journal of the American Society for Information Science and Technology (FI 2.083)
• Communications of the ACM (FI 1.919)
• ACM Transactions on Computer-Human Interaction (TOCHI) (FI 1.833)
• User Modeling and User-Adapted Interaction (FI 1.318)
• Interacting with Computers (FI 1.233)
• Human Factors (FI 1.187)
• International Journal of Human-Computer Studies (FI 1.171)
• Journal of Collaborative Computing and Work Practices (CSCW) (FI 1.071)
• Behavior and Information Technology (FI 1.011)
• International Journal of Human-Computer Interaction (FI 0.521)
• ACM Transactions on Management Information Systems
• Advances in Human-Computer Interaction
• Faz: revista de diseño de interacción
• Human Technology
• Human-Centric Computing and Information Sciences
• Interactions of the ACM
• International Journal of Technology and Human Interaction
• Journal of Usability Studies
• Universal Access in The Information Society

8. Conclusiones

A modo de resumen y conclusión presentamos un gráfico que integra los 4 esquemas que hemos comentado (figura 9). El objetivo de este “esquema de esquemas” es mostrar el lugar que ocupan las distintas disciplinas implicadas. Es una visión panorámica que permite ver como la disciplina Interacción Persona-Ordenador (IPO), que es la primera y más teórica se ha concretado en diversas disciplinas más especializadas, a menudo sin que los propios profesionales que las ponen en práctica sean conscientes de ello. Por otro lado, los 4 esquemas integradores (Garrett, Olsen, Dalton y Sherwin) presentan 4 formas distintas de organizar estas disciplinas dentro del proceso de desarrollo de un sitio web. En todos ellos se establecen 5 capas o fases que van de lo más abstracto a lo más concreto, de lo intangible a la concreto, del deseo a la realización o de la concepción a la finalización.

Esperamos que el análisis y las reflexiones realizadas hayan permitido poner un poco de orden en el caos de conocimientos, disciplinas y materias que participan en el diseño de sitios web y que permiten la creación de documentos HTML de calidad.

Figura 9. Esquema de las disciplinas relacionadas con el diseño web

Fuente: Elaboración propia

9. Ejercicio

Haga un esquema, mapa conceptual o representación gráfica de media página mostrando cómo están relacionadas al menos 7 de las siguientes disciplinas. Sugerimos usar herramientas de edición de esquemas como CMapTools o Gliffy. En el apartado de Materiales Complementarios de esta semana hay un mini tutorial de Gliffy que aconsejamos especialmente.

• Accesibilidad
• Arquitectura de la información
• Ciencias de la Comunicación
• Ciencias Humanas
• Diseño de interfaz
• Diseño de navegación
• Documentación
• Ergonomía
• Interacción Persona-Ordenador
• Lingüística
• Psicología
• Sociología
• Tecnologías de la Información
• Usabilidad

Observaciones

• Se pueden añadir conceptos que no estén en la lista, pero hay que incluir al menos 7 de la lista.
• La entrega se puede hacer en formato PDF o en formato de fichero gráfico.
• En la entrega hay que incluir solo el esquema o mapa, no son necesarias explicaciones adicionales.

10. Bibliografía

James Kalbach. 2016. Mapping Experiences: A Complete Guide to Creating Value through Journeys, Blueprints, and Diagrams. O’Reilly Media.

Louis Rosenfeld, Peter Morville, Jorge Arango. 2015 . Information Architecture: For the Web and Beyond. O’Reilly Media.

Tom Greever. 2015. Articulating Design Decisions: Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience. O’Reilly Media.

Jaime Levy. 2015. UX Strategy: How to Devise Innovative Digital Products that People Want. O’Reilly Media

Corey Stern. September 25, 2014. CUBI: A User Experience Model for Project Success

http://uxmag.com/articles/cubi-a-user-experience-model-for-project-success

Olga Carreras. 8 de marzo de 2013. Disciplinas relacionadas con la Experiencia de Usuario

http://olgacarreras.blogspot.com.es/2007/01/disciplinas-relacionadas-con-la.html

Mark Wilson. 01.31.13. Infographic: The Intricate Anatomy Of UX Design

http://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design

James Pannafino. 2012. Interdisciplinary Interaction Design: A Visual Guide to Basic Theories, Models and Ideas for Thinking and Designing for Interactive Web Design and Digital Device Experiences. Assiduous Publishing.

Dan Saffer. 2009. The Disciplines of User Experience

http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/

Mario Pérez-Montoro Gutiérrez. 2009. Arquitectura de la información en entornos web. Ediciones Trea.

Baeza-Yates, Ricardo; Rivera, Cuauhtémoc.; Velasco, Javier (2004). «Arquitectura de la información y usabilidad en la web». El profesional de la información, v. 13, n. 3, 2004.

Dalton, Richard (2007). The Forces of User Experience. The Forces of User Experience. Junio 16. http://mauvyrusset.com/2007/06/16/the-forces-of-user-experience/

D’Hertefelt, S. (2000). Emerging and future usability challenges: designing user experiences and user communities. InteractionArchitect.com.

Dillon, A. (2001). Beyond Usability: Process, Outcome and Affect in human computer interactions. Lazerow Lecture 2001, at the Faculty of Information Studies, University of Toronto, March 2001. http://www.ischool.utexas.edu/~adillon/publications/beyond_usability.html

Fischer, Gerhard (2001). «User modeling in Human-Computer Interaction». User Modeling and User-Adapted Interaction, 11, pp. 65-86.

Garrett, Jesse James (2003). The elements of user experience: user-centered design for the web. New York: Aiga.

Garrett, Jesse James (2000). Los elementos de la experiencia de usuario, http://www.jjg.net/ia/elements_es.pdf

Hassan, Yusef; Martín Fernández, Francisco J.; Iazza, Ghzala. (2004). Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información. Hipertext.net, núm. 2.

http://www.hipertext.net/web/pag206.htm

Hassan Montero, Yusef; Martín Fernández, Francisco J. (2005). La Experiencia del Usuario. En: No Solo Usabilidad, nº 4, 2005. . ISSN 1886-8592

Hill, S. (2000). An interview with Louis Rosenfeld and Peter Morville, http://www.oreillynet.com/pub/a/oreilly/web/news/infoarch_0100.html

Krug, Steve (2001). No me hagas pensar. Madrid: Prentice Hall.

Krug, Steve (2010). Haz fácil lo imposible. Madrid: Anaya Multimedia.

Marcos, Mari-Carmen (2001). “HCI (Human computer interaction): concepto y desarrollo”. El profesional de la información, v. 10, n. 6, pp. 4-16.

Marcos, Mari-Carmen (2004). Interacción en interfaces de recuperación de información: conceptos, metáforas y visualización. Gijón: Trea.

Nielsen, Jakob (1993). Usability engineering. Cambridge, MA: Academic Press.

Nielsen, Jakob (2000). Usabilidad: diseño de sitios web. Madrid: Pearson Educación.

Norman, Don.; Draper, S. W. (Eds.) (1986). User centered system design: New perspectives on human-computer interaction. Hillsdale, NJ: Lawrence Erlbaum Associates.

Olsen, George (2003). Expanding the Approaches to User Experience. 10 de marzo. http://boxesandarrows.com/expanding-the-approaches-to-user-experience/

Pedraza-Jiménez, Rafael; Blanco, Saúl; Codina, Lluís; Cavaller, Víctor (2013). “Diseño conceptual y especificación de requerimientos para el desarrollo y rediseño de sitios web”. El profesional de la información, enero-febrero, v. 22, n. 1, pp. 74-79. pp. 74-79.

Rosenfeld, Louis; Morville, Peter (2002). Information architecture for the world wide web: designing large-scale web sites. Sebastopol (Canada): O’Reilly.

Rovira, Cristòfol; Codina, Lluís (2003). “La orientación a objetos en el diseño de sedes web: hipertextos y representación de la información”. Revista española de documentación científica 26(3): 267-290.

Sherwin, David (2010). The Elements of Design Studio Experience. March 08, 2010.

http://changeorder.typepad.com/weblog/2010/03/the-elements-of-design-studio-experience.html

Van Geel, Eroen (2010). UX at Year X: An interview with Jesse James Garrett. March 24. http://johnnyholland.org/2010/03/an-interview-with-jesse-james-garrett/

---

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 7.12 Comparación de los principales sistemas de gestión de contenidos de software libre

Rubén Alcaraz

Rubén Alcaraz. Artículo 7.12 Comparación de los principales sistemas de gestión de contenidos de software libre. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.

---

Sumario

1. Breve introducción a la gestión de contenidos

2. Origen y evolución de los CMS

3. Los CMS: componentes y características principales

4. El software libre como alternativa para la gestión de contenidos

5. Principales sistemas de gestión de contenidos de software libre

5.1. CMS multifunción

5.1.1 Drupal

5.1.2 Joomla!

5.1.3 Typo3

5.1.4 Concrete5

5.1.5 EZPublish

5.1.6 Liferay

5.1.7 MODx

5.1.8 Processwire

5.2. CMS orientados a la creación de blogs

5.2.1 WordPress

5.2.2 Ghost

5.2.3 b2evolution

5.2.4. AnchorCMS

5.3. Plataformas de ecommerce

5.3.1 OpenCart

5.3.2 Magento

5.3.3 Prestashop

5.3.4 WooCommerce

5.4. Wikis

5.4.1 MediaWiki

5.4.2 DokuWiki

5.5. Sistemas de gestión de activos digitales

5.5.1. Zenphoto

5.5.2. ResourceSpace

5.5.3. Phraseanet

6. Editores online de páginas web

6.1. Webnode

6.2. Jimdo

6.3. IM Creator

6.4. Weebly

6.5. Yola

6.6. Wix

6.7. Cargo

7. Criterios de selección de un CMS

8. Metodología para la selección de un CMS

9. Búsqueda y preselección de soluciones

10. Consejos finales

11. Bibliografía

11.1 Monografías y artículos de revista

11.2 Sedes web

11.3 Estadísticas

12. Propuesta para el debate

12.1 Como intervenir en el debate

12.2 Como valorar una intervención en el debate

---

1. Breve introducción a la gestión de contenidos

La gestión de contenidos se puede definir como el conjunto de procesos, tecnologías, conceptos y prácticas relacionadas con la creación, recopilación, gestión y distribución de información en formato digital. Un error común es entender la gestión de contenidos únicamente como el uso de una determinada tecnología como la de los sistemas de gestión de contenidos (en adelante CMS), y no como la adopción en el seno de una organización de una serie de procesos y técnicas orientadas a la gestión de la información a lo largo de su ciclo vital. Los CMS son solo una de las herramientas que participan en la gestión de los contenidos digitales.

La gestión de contenidos es una disciplina estrechamente relacionada con la gestión de la información, la gestión documental y la gestión del conocimiento. Veamos en qué consisten estas otras disciplinas.

• Gestión de la información: Se centra en la gestión y tratamiento de grandes cantidades de datos. Su objeto de estudio son los datos almacenados en grandes sistemas informáticos que han de ser utilizados por personas y por otros sistemas.
• Gestión documental: Surge de la necesidad de gestionar eficientemente la ingente cantidad de documentos que generan las organizaciones como resultado de sus actividades y procesos internos. Su objeto de estudio son los documentos a lo largo de su ciclo de vida y los procesos a los que están vinculados.
• Gestión del conocimiento: Se vale de las tecnologías de la información y la comunicación (búsqueda, indexación, minería de datos, herramientas de análisis y categorización…) para convertir la información en datos y conocimiento. Su objeto de estudio son los datos y la información, y se centra en sacar a la luz los activos de conocimiento para ponerlos a disposición de la organización.

2. Origen y evolución de los CMS

La gestión de contenidos surge durante la segunda mitad de los 90, como respuesta a las necesidades de creación, gestión y distribución cooperativa y descentralizada de los sitios web. A finales de los años 90, las tecnologías orientadas a dar soporte a la gestión de contenidos, estaban claramente diferenciadas del resto de aplicaciones de gestión documental, del conocimiento, y de otros sistemas de gestión como los CRM (Customer Relationship Management), o las herramientas de publicación. Desde principios del 2000, y como consecuencia, por un lado, de una realidad cada vez más compleja de gestionar y, por el otro, de la fuerte competencia del mercado, se advierte una convergencia entre aplicaciones. De esta manera, comienza a ser posible encontrar soluciones que pretenden abordar la problemática de la gestión de la información, la documental y la de los contenidos de manera global e integrada. En este sentido, muchos de los CMS orientados a la publicación de contenidos en la Web, comienzan a incorporar módulos propios de aplicaciones orientadas a la gestión documental o del conocimiento. Al mismo tiempo, esas otras aplicaciones, comienzan a incorporar capas de publicación para facilitar la distribución de contenidos en la Web, o a través de otros canales como las newsletter.

El actual mercado de los CMS se caracteriza por la gran cantidad de soluciones comerciales y libres disponibles. Otra de sus características es que si bien continúan apareciendo aplicaciones especializadas en un ámbito concreto, o en la gestión de un tipo de contenido determinado, cada vez más, los sistemas de gestión de contenidos se muestran como soluciones globales capaces de cubrir todas las necesidades de gestión de contenidos en las organizaciones.

3. Los CMS: componentes y características principales

Boiko (2005), identifica a nivel teórico, tres componentes esenciales para cualquier sistema de gestión de contenidos:

• Sistema de colección: Es la parte del sistema encargada de la creación o integración de información. Como tal, ofrece soporte a los procesos de creación mediante la definición de flujos de trabajo, la incorporación de herramientas de autor como editores de texto o HTML, herramientas de corrección y verificación, de integración de información externa, etc. Al mismo tiempo, se encarga de dar soporte a los procesos de conversión o migración de formatos.
• Sistema de gestión: Es el responsable del almacenamiento de los diferentes componentes que formarán los contenidos y cualquier otro tipo de recurso. Se encuentra integrado por el repositorio documental, el flujo de trabajo (del resto de sistemas) y las funcionalidades de administración del sistema (gestión de perfiles de usuario, seguridad, mantenimiento, etc.).
• Sistema de publicación: Es la parte del sistema que permite automatizar la producción de publicaciones o de cualquier tipo de producto documental a partir de los componentes almacenados en el sistema de gestión, previamente creados o adquiridos a través del sistema de colección. Para automatizar la publicación de contenidos se basa en un sistema de plantillas (templates) predefinidos para cada tipo de producto documental.

A los CMS, así como a otros tipos de aplicaciones informáticas, se les atribuyen tres características o propiedades deseables:

• Flexibilidad: Se refiere a la capacidad del CMS para responder a diferentes escenarios, entornos de trabajo o necesidades sin tener que recurrir a personalizaciones en su código fuente, o a terceras aplicaciones para solventar determinadas tareas. Un CMS flexible nos permitirá afrontar una gran variedad de proyectos diferentes como la creación de un blog, un portal web, una intranet, etc. Si estamos limitados a un sólo uso, el CMS no es flexible.
• Extensibilidad: Generalmente asociada a los sistemas modulares que permiten incorporar nuevas funcionalidades al sistema a partir de módulos o plugins. Un ejemplo lo podemos encontrar al instalar un plugin para gestionar galerías de imágenes en WordPress. Por defecto el sistema no incorpora esta funcionalidad, pero a partir de un plugin podemos extender esa capacidad en el sistema.
• Escalabilidad: Es la propiedad que indica la capacidad del CMS para adaptarse a un crecimiento continuo de trabajo, características u objetos digitales a gestionar. De esta manera, con un CMS escalable podemos ser capaces de comenzar gestionando un pequeño portal web y acabar administrando un portal de grandes dimensiones, usuarios, flujos de trabajo, etc., sin necesidad de cambiar de aplicación.

La arquitectura técnica de prácticamente la totalidad de CMS disponibles en el mercado se fundamenta en la tripleta: servidor web + sistema de gestión de base de datos + intérprete de lenguaje de programación. El lenguaje de programación PHP y el sistema de gestión de bases de datos MySQL, ambos abiertos, son dos de las herramientas más extendidas para la creación de CMS. La generalización de esta arquitectura ha popularizado los entornos LAMP (Linux, Apache, MySQL, PHP), entorno de desarrollo necesario para el funcionamiento de estos sistemas. Actualmente, también se desarrollan soluciones a partir de otros lenguajes de programación como Java, Ruby o Python. Por lo que respecta a los servidores web, Apache convive en la actualidad con otras alternativas, la más destacable, Nginx.

4. El software libre como alternativa para la gestión de contenidos

Cuando hablamos de software libre, nos referimos a una cuestión de libertad, no de precio. La libertad para ejecutar, copiar, distribuir, estudiar, modificar y mejorar el software. En concreto el software libre se asocia a cuatro clases de libertad (Stallman, 2004):

• Libertad 0: libertad para ejecutar el programa sea cual sea nuestro propósito.
• Libertad 1: libertad para estudiar el funcionamiento del programa y adaptarlo a nuestras necesidades (el acceso al código fuente es indispensable).
• Libertad 2: libertad para distribuir copias del programa.
• Libertad 3: libertad para mejorar el programa y posteriormente publicarlo para el bien de toda la comunidad.

Es importante destacar que, aunque a efectos prácticos el uso del software libre es muy similar al de cualquier otro tipo de software, éste es un legado que pertenece a la humanidad, sin propietarios, como las leyes de la física o las matemáticas (Mas, 2005). Las principales diferencias con las licencias de código abierto (open source) es que estas últimas a pesar de permitir el acceso y modificación del código fuente, generalmente no permiten distribuir las modificaciones o hacer un uso comercial de las mismas, por lo que limitan algunas de las libertades propuestas por las licencias de software libre.

El software libre, que en sus inicios en los años 80 tuvo detrás suyo a pequeños grupos de entusiastas y activistas, ha pasado en la actualidad a atraer la atención de empresas clave del mundo de la tecnología. Actualmente, el modelo de negocio del software libre puede consistir tanto en la asociación de diferentes licencias a dos versiones de un mismo programa, una totalmente libre y gratuita, y otra comercial con más funcionalidades, en la venta de personalizaciones, plantillas o módulos propietarios para una aplicación libre, o en la prestación de servicios de consultoría, mantenimiento u hospedaje, entre otros.

Una de las principales ventajas relacionadas al uso del software libre tiene que ver con el ahorro de costes en relación a las licencias de uso, pero sus ventajas no sólo se limitan al aspecto económico. La gestión de contenidos, por su naturaleza misma, requiere de una parte importante de personalizaciones específicas. La posibilidad de adaptar los CMS de software libre a nuestras necesidades está totalmente garantizada gracias al acceso al código fuente. En cuanto al soporte y mantenimiento, cabe destacar que aunque el hecho de ser una solución abierta no es en sí misma una garantía de eterna juventud, sí que es cierto, que ninguna aplicación libre acaba de un día para otro. En este sentido, la supervivencia de la aplicación no depende exclusivamente de su rentabilidad o de consideraciones de marketing, sino del interés de la comunidad de usuarios y desarrolladores. El libre acceso al código fuente es una garantía de durabilidad e independencia tecnológica, aún cuando la aplicación ha dejado de tener el soporte mayoritario de la comunidad. Al software libre también se le asocian otras ventajas como la posibilidad de escoger a cualquier empresa para que se encargue del desarrollo y mantenimiento de nuestro sistema, y no sólo a la empresa desarrolladora oficial, o la facilidad para migrar o establecer conexiones con nuevos entornos o sistemas al trabajar la mayoría de las aplicaciones de software libre con estándares y formatos abiertos.

5. Principales sistemas de gestión de contenidos de software libre

Como se ha comentado en apartados anteriores, existe un importante mercado de CMS libres. CMS especializados en diferentes tipos de contenidos, tipos de publicaciones, según el flujo de trabajo, etc., son sólo algunas de las soluciones disponibles en el mercado. La categorización de estas aplicaciones es compleja. Varias aplicaciones podrían estar al mismo tiempo en diferentes categorías, debido a la gran flexibilidad y extensibilidad que las caracteriza. A continuación se muestra una recopilación de los principales CMS de software libre organizados según su función principal.

5.1. CMS multifunción

Los que se muestran a continuación son CMS capaces de abordar diferentes proyectos relacionados con la gestión de contenidos: portales corporativos, blogs, foros, intranets, e-commerce, directorios, redes sociales, galerías fotográficas y de vídeo, entre otros. Por su capacidad para adaptarse a diferentes propósitos, también son conocidos como CMF (Content Management Framework).

5.1.1 Drupal

Con una inmensa comunidad de usuarios y desarrolladores, y con la vitola de ser considerado como uno de los CMS más seguros, Drupal es una de las opciones más flexibles y extensibles a la hora implementar un proyecto de gestión de contenidos. Desarrollado en PHP y MySQL se distribuye bajo licencia GPLv3. Los más de 38000 módulos y 2500 plantillas disponibles aseguran la extensibilidad y personalización del sistema. Algunas de sus principales características son la posibilidad de personalizar plantillas para la creación de diferentes tipos de contenidos, la gestión avanzada de perfiles de usuario, o un sistema de taxonomías muy avanzado. Muchos desarrolladores han visto en la potencia de Drupal la oportunidad de utilizarlo como parte componente de sus proyectos junto con otras aplicaciones. Algunos ejemplos son: OpenAtrium, OpenPublish o Islandora.

• URL oficial: https://www.drupal.org
• Demo en OpenSourceCMS, Demos y sitios gratuitos disponibles en Drupal.org

Algunos ejemplos de sitios gestionados con Drupal:

• The White House
• Ateneu Barcelonès
• Zoo de Barcelona
• Wizards of the Coast
• Sesame Street

5.1.2 Joomla!

Nace como fork del CMS Mambo en 2005. Actualmente se encuentra en su versión 3. Junto con WordPress y Drupal es uno de los CMS más populares y con mayor cuota de mercado. Destaca por sus casi 8000 módulos, plugins y componentes, capaces de adaptarlo a las necesidades de cualquier proyecto de gestión de contenidos. Una de las principales críticas por parte de sus usuarios es que si bien dispone de un buen conjunto de extensiones, una buena parte, especialmente las más utilizadas, son de pago. En este sentido, WordPress y Drupal ofrecen muchas más alternativas gratuitas para ampliar las funcionalidades del paquete básico de la aplicación.

• URL oficial: http://www.joomla.org
• Demo en OpenSourceCMS, Demo en Joomla.org

Algunos ejemplos de sitios gestionados con Joomla!:

• Peugeot
• WebEmpresa
• HighCharts

5.1.3 Typo3

Es el CMS de software libre más utilizado después de los populares WordPress, Drupal y Joomla!. Se trata de una aplicación con una gran aceptación en Europa, sobre todo en Alemania. Destaca la importante cantidad de extensiones disponibles (actualmente, algo más de 7500). Entre sus características principales cabe destacar la posibilidad de crear plantillas según el tipo de contenido, la posibilidad de gestionar diversos portales con una sola instalación (multisitio), la gestión avanzada de los perfiles de usuario o la capacidad de editar contenidos desde el panel de administración (backend) y desde la parte pública (frontend), entre otras muchas funcionalidades.

• URL oficial: http://typo3.org
• Demo en OpenSourceCMS

Algunos ejemplos de sitios gestionados con Typo3:

• Estudios de casos

5.1.4 Concrete5

Una buena alternativa a los CMS más populares que poco a poco se va haciendo un hueco en este competitivo mercado. Multiplataforma, desarrollado en PHP y MySQL, y liberado bajo licencia MIT, Concrete5 se caracteriza por contar con todas las funcionalidades básicas de los CMS, pero sobre todo por su potente sistema de gestión de perfiles de usuarios y flujos de trabajo y por su reducida curva de aprendizaje. Aunque la variedad de plugins no es tan grande como en el caso de WordPress o Drupal, en el Marketplace de Concrete5, podemos encontrar cientos de extensiones para el sistema.

• URL oficial: http://www.concrete5.org
• Demo en Softaculous, Demo en Concrete5.org

Algunos ejemplos de sitios gestionados con Concrete5:

• Cambridge University Press
• Switzerland Government
• Fly Peach
• Global Sign

5.1.5 EZPublish

Creado por la compañía noruega eZ Systems, y liberado bajo siete licencias diferentes, algunas de software libre y otras privativas. Dispone de un interesante sistema de gestión de perfiles de usuario y un módulo de content staging, funcionalidad que no está presente por defecto en ningún otro CMS de los comentados en este tema de manera nativa (sin módulos o extensiones extras). También destaca por ser una aplicación multi-sitio y multi-idioma. Se caracteriza por estar siendo utilizado por igual, tanto para la creación de sitios web corporativos, como por sitios de comercio electrónico o intranets, al incorporar soluciones nativas para estos tres tipos de entornos.

• URL oficial: http://ez.no

Algunos ejemplos de sitios gestionados con EZPublish:

• Biblioteca Nacional de Catalunya
• Barcelona World Race
• Fotogramas

5.1.6 Liferay

Se distribuye bajo dos versiones diferentes: Community Edition y Enterprise Subscription. La primera libre y la segunda bajo licencia comercial de pago. A diferencia de la mayoría de CMS del mercado, Liferay no está escrito en PHP, sino en Java. Entre sus principales características destaca un potente sistema de gestión de usuarios y permisos, un panel de administración altamente personalizable, creación de páginas y edición de plantillas para diferentes tipos de contenido, soporte multi-idioma y un sistema de mensajería privada entre usuarios. Principalmente se utiliza en la creación de intranets y extranets corporativas, pero también en todo tipo de portales.

• URL oficial: http://www.liferay.com
• Demo (previa solicitud)

Algunos ejemplos de sitios gestionados con Liferay:

• Diputació de Barcelona
• Cruz Roja Española
• eduCaixa

5.1.7 MODx

Elegido como mejor CMS de código abierto de 2013 por los lectores de CMS Critic, MODx ha sido una de las grandes sorpresas de los últimos años. Se trata de un CMS con el que podemos abordar la creación de un web corporativo, un blog, una tienda o incluso una intranet. Muy flexible y extensible, MODx se caracteriza por ser un CMS que puede llegar a ser muy complejo de utilizar para usuarios noveles por la gran cantidad de opciones y funcionalidades que presenta y la necesidad de personalizar una gran parte de los aspectos de nuestro portal antes de ponerlo en marcha. Actualmente cuenta con más de 800 extensiones que permiten añadir nuevas funcionalidades al paquete básico. También se encuentran disponibles una cantidad suficiente de plantillas gratuitas y, sobre todo, comerciales, aunque este CMS está pensado para que cada usuario cree la plantilla de su portal, ofreciendo diferentes herramientas de desarrollador para ello, integradas en el panel de administración.

Además de distribuirse bajo licencia de software libre GPLv2, la empresa responsable del mantenimiento de la aplicación también ofrece diferentes planes de pago que incluyen entre otros servicios, la instalación y hospedaje de MODx, la programación de copias de seguridad, soporte técnico, etc.

• URL oficial: http://modx.com
• Demo en OpenSourceCMS

Algunos ejemplos de sitios gestionados con MODx:

• Foodio
• Gym home

5.1.8 Processwire

Processwire lleva varios años en el top five de mejor CMS de la revista digital CMS Critic. Destaca por su capacidad para crear plantillas en forma de formularios según el tipo de contenido (páginas, entradas de blog, vistas de productos, etc.) y la posibilidad de crear campos personalizados para esas plantillas. También resulta interesante la gestión de usuarios, en la que podemos crear nuestros propios permisos, roles y asignarlos a cada usuario. A cada uno de los tipos de contenido, le podemos asignar una plantilla de presentación diferente. Con respecto a las plantillas de presentación, también es importante destacar que su disponibilidad es limitada. En este sentido, como en el caso de MODx, se trata de un CMS muy pensado para ser personalizado al máximo, por lo que esa tarea se deja a cargo de cada administrador. Actualmente se encuentran disponibles una buena cantidad de módulos pensados para añadir nuevas funcionalidades al sistema.

• URL oficial: http://processwire.com
• Demo oficial

Algunos ejemplos de sitios gestionados con Processwire:

• Green Man Festival
• Florida Association of Museums

5.2. CMS orientados a la creación de blogs

5.2.1 WordPress

Es el CMS con mayor cuota de mercado. Desarrollado en PHP y MySQL, se distribuye bajo licencia GPLv2. Detrás de WordPress se encuentra la empresa Automattic, propiedad del creador de la aplicación, Matt Mullenweg. Paralelamente a la posibilidad de descargar e instalar la aplicación en nuestro servidor, Automattic ofrece un servicio de alojamiento de blogs gratuito, con diversos extras de pago como la posibilidad editar las hojas de estilo, aumentar la capacidad del repositorio o utilizar un dominio propio. El éxito de WordPress radica en su facilidad de instalación y uso, y en la inmensa cantidad de plugins y plantillas gratuitas y de pago disponibles, capaces de extender las funcionalidades de una aplicación pensada inicialmente para la creación de blogs a prácticamente cualquier tipo de proyecto: sitios web corporativos, tiendas electrónicas, galerías de imágenes, portales de vídeos, prensa digital y revistas, etc. Es por este motivo que WordPress también podría ser considerado un CMS multifunción.

• URL oficial: https://wordpress.org
• Demo en OpenSourceCMS, Demo en Softaculous.

Algunos ejemplos de sitios gestionados con WordPress:

• The Guggenheim Museum
• Sony Music
• BBC America
• Walt Disney
• The New Yorker

5.2.2 Ghost

Ghost es un sistema de gestión de contenidos escrito íntegramente en JavaScript y liberado bajo licencia MIT. Su primera versión fue lanzada en el año 2013, gracias a la financiación obtenida en una campaña de crowdfunding en la plataforma Kickstarter.

Como decíamos anteriormente, una de las principales características de Ghost es la de estar escrito en JavaScript y no utilizar otros lenguajes del lado del servidor tradicionalmente asociados a los sistemas de gestión de contenidos como PHP o Java. En concreto, se ha desarrollado mediante Node.js, un entorno de programación diseñado para crear productos del lado del servidor, aunque no exclusivamente, basado en el motor de V8 de Google.

Desde su primera versión, Ghost ha pretendido ganarse un hueco entre las plataformas de publicación de blogs como alternativa a WordPress. En este sentido, Ghost presume una mayor facilidad de uso frente a sus competidores. También, como WordPress, y más allá de la versión disponible en GitHub, La Fundación Ghost ofrece una plataforma de hospedaje para blogs similar a la ofrecida por la empresa Automattic en WordPress.com, como alternativa a los usuarios que no deseen o no dispongan de los conocimientos necesarios para configurar y poner en marcha una instancia de Ghost en su propio servidor. En este caso, no obstante, no encontramos ningún plan gratuito.

• URL oficial: https://ghost.org
• Demo de 14 días en la versión Pro de Ghost: https://ghost.org/signup/

Algunos ejemplos de sitios gestionados con Ghost:

• Mozilla Blog
• Blog de Tinder
• Blog de Cloudflare
• Blog de Coding Horror

5.2.3 b2evolution

Como WordPress, se trata de un fork de b2/cafelog. Es una aplicación multi-idioma, multi-usuario y multi-sitio, creada en lenguaje PHP y respaldada por una base de datos MySQL. Dispone de las funcionalidades básicas tradicionalmente asociadas a los sistemas de gestión de blogs: creación de entradas, gestión de comentarios, usuarios, archivos multimedia, etc. Tiene una interfaz clara e intuitiva. También resulta interesante la posibilidad de crear posts multi-página, para estructurar entradas largas por capítulos o secciones. Como la mayoría de CMS analizados en esta unidad, se trata de una aplicación modular, que ofrece la posibilidad de ampliar funcionalidades vía plugins y plantillas.

• URL oficial: http://b2evolution.net
• Demo en Softaculous.

Algunos ejemplos de sitios gestionados con b2evolution:

• b2evolution site showcase

5.2.4. AnchorCMS

Un CMS muy ligero, fácil de instalar y de utilizar, pensado para aquellos autores de blogs que sólo quieren preocuparse de escribir sus entradas y publicarlas. Dispone de las funcionalidades mínimas necesarias para cualquier blog: creación de entradas y páginas estáticas, etiquetado y categorización de contenidos, gestión de comentarios y gestión de usuarios. De manera nativa nos permite crear campos personalizados y metadatos que podemos añadir a nuestra plantilla. Actualmente se está trabajando en un sistema de plugins para extender las funcionalidades del paquete básico.

• URL oficial: http://anchorcms.com
• Demo en OpenSourceCMS

Algunos ejemplos de sitios gestionados con AnchorCMS:

• Academia Cranio-Sacrale

5.3. Plataformas de ecommerce

5.3.1 OpenCart

La única de las plataformas de ecommerce de software libre analizadas en este apartado, el resto son open source. OpenCart presenta una curva de aprendizaje menos pronunciada que las dos alternativas siguientes, pero también algunas funcionalidades menos de partida. Con respecto a la posibilidad de ampliar funcionalidades, existe una importante colección de módulos y plantillas para OpenCart, así como de pasarelas de pago creadas por terceros. En general, todas son de pago, pero a unos precios más bajos que las de Magento o Prestashop.

• URL oficial: http://www.opencart.com
• Demo en OpenSourceCMS, Demo en Softaculous.

Algunos ejemplos de sitios gestionados con OpenCart:

• Arrow file
• Shorelines
• Wooden Posters

5.3.2 Magento

Considerado el líder de las plataformas de comercio electrónico. Se distribuye en forma de dos versiones diferentes: Community Edition, gratuita y de código abierto, con las funcionalidades básicas del sistema y ampliable a través del sistema de extensiones y Magento Commerce, una versión pensada para grandes empresas, que incluye todas las funcionalidades que hacen de Magento el actual líder del sector.

• URL oficial: http://magento.com
• Demos: Demo en OpenSourceCMS

Algunos ejemplos de sitios gestionados con Magento:

• Olympus
• Kinguin
• Missy Empire

5.3.3 Prestashop

Como los anteriores, se trata de un CMS orientado principalmente a la creación de portales de comercio electrónico. Ofrece soporte para la gestión de los productos y el catálogo, el proceso de compra, gestión de envíos y pagos, seguridad en las transacciones, análisis e informes de las ventas y uso del portal, optimización para buscadores, entre otros. Actualmente se encuentra disponible en más de 50 idiomas diferentes. Se distribuye bajo una licencia OSL Ver. 3, que aunque de código abierto, no es considerada libre. Dispone de una gran variedad de módulos y plantillas, pero la inmensa mayoría son de pago y a precios bastante elevados.

• URL oficial: http://www.prestashop.com
• Demos: Demo en Prestashop.com, Demo en OpenSourceCMS

Algunos ejemplos de sitios gestionados con Prestashop:

• Tienda Prado (Museo Nacional del Prado)
• Decathlon

5.3.4 WooCommerce

A diferencia de los anteriores, WooCommerce no es un CMS completo, sino un plugin que permite convertir una instalación de WordPress en una tienda electrónica completamente funcional. Totalmente traducido al español, la facilidad de uso de WooCommerce es equiparable a la del CMS que le da cobijo. Además, dispone de una gran cantidad de vídeotutoriales en los que se explica en detalle cómo abordar los diferentes procesos que se pueden gestionar desde la administración del sistema.

En cuanto a funcionalidades, además de las básicas para cualquier tienda de comercio electrónico, podemos destacar la posibilidad de gestionar diferentes formas de pago, la posibilidad de crear cupones de descuento, personalización total de las fichas de producto que pueden ser tanto físicos, como digitales, la disponibilidad de informes de inventario y del estado de los pedidos, ventas y clientes, entre otros muchos. Más allá de las comentadas, también dispone de alrededor de 300 extensiones y decenas de plantillas para añadir aún más funcionalidades. Eso sí, la gran mayoría de pago. En comparación con el resto de alternativas vistas en esta unidad para la creación de una tienda electrónica, así como de otras alternativas privativas, WooCommerce se encuentra muy por debajo en cuanto a funcionalidades y rendimiento. No obstante, su facilidad de uso lo hace muy atractivo y una buena opción para pequeños sitios web que necesiten comercializar unos pocos productos y no precisen de grandes requisitos.

• URL oficial: https://woocommerce.com/

Algunos ejemplos de sitios gestionados con WooCommerce:

• Life!
• XeroShoes
• EverBuild

5.4. Wikis

5.4.1 MediaWiki

El software para crear wikis más famoso y con mayores funcionalidades del mercado. Se trata de la aplicación desarrollada y utilizada por Wikipedia y el resto de proyectos de la Fundación Wikimedia para elaborar sus portales. Entre sus características principales destaca la posibilidad de crear plantillas para diferentes tipos de páginas, páginas de discusión, listas de seguimiento, un potente sistema de versiones, gestión de diferentes perfiles de usuario, entre otras muchas disponibles entre sus cerca de 2000 extensiones y plantillas que permiten ampliar las funcionalidades y cambiar la apariencia de la aplicación.

• URL oficial: http://www.mediawiki.org
• Demos: Demo en OpenSourceCMS, Demo en Softaculous.

Algunos ejemplos de sitios gestionados con MediaWiki:

• Wikipedia
• FFXIclopedia
• WaterWiki

5.4.2 DokuWiki

Similar a MediaWiki en cuanto a funcionalidades y con una sintaxis muy parecida. Su gran diferencia con respecto al software de la Fundación Wikimedia es que no precisa de una base de datos, sino que toda la información se almacena en archivos de texto plano. Lo que hace aún más sencilla la instalación y mantenimiento del sistema. Dispone de una importante colección de plugins (más de 400) y plantillas (alrededor de 30).

• URL oficial: https://www.dokuwiki.org
• Demo: Demo en OpenSourceCMS, Demo en Softaculous.

Algunos ejemplos de sitios gestionados con DokuWiki:

• Ubuntu.ru
• WinSCP

5.5. Sistemas de gestión de activos digitales

Los sistemas de gestión de activos digitales (Digital Asset Management o DAM) son aplicaciones pensadas para la automatización de todos aquellos procesos relacionados con la gestión de los activos digitales de una organización (ingesta, descripción, catalogación, almacenaje, preservación, recuperación y distribución). En esencia un activo digital es cualquier cosa en formato binario que contenga información de cualquier tipo. Tradicionalmente, los activos digitales se organizan en tres categorías: imágenes, documentos multimedia y documentos textuales. En la práctica, esto implica la existencia tanto de aplicaciones pensadas para gestionar todo tipo de activos digitales, como de otras especializadas en un tipo de activo específico como pueden ser imágenes o documentos textuales. También cabe mencionar la existencia de aplicaciones muy orientadas a la recuperación y distribución de este tipo de activos, y otras desarrolladas pensado exclusivamente en su preservación digital.

5.5.1. Zenphoto

Zenphoto es un DAM centrado en la gestión de archivos multimedia (imágenes, audios y vídeos) que incluye también funcionalidades propias de los CMS vistos en apartados anteriores (creación de páginas estáticas, noticias tipo blog, formularios de contacto, etc.). Esto hace que Zenphoto se erija como una solución ideal para la creación de sitios web personales de ilustradores, artistas, diseñadores, fotógrafos, músicos, etc.

Por lo que respecta a la administración del sitio, Zenphoto también ofrece un sistema de gestión de perfiles de usuario en el que podemos determinar permisos a nivel general, de álbumes o de galerías; etiquetado de elementos,opciones de configuración del motor de búsqueda; o gestión de logs, entre otras.

• URL oficial: http://www.zenphoto.org/
• Demos: Demo en OpenSourceCMS, Demo en Softaculous.

Algunos ejemplos de sitios gestionados con

• Florida Public Archaeology Network
• University Of Westminster – Chinese Poster Collection

5.5.2. ResourceSpace

Desarrollado por la empresa británica Montala Limited y liberado bajo licencia BSD. Escrito en PHP, utiliza el sistema de gestión de bases de datos MySQL y la librería nativa GD de PHP para la gestión de las archivos de imagen (gestión de derivados, compresión, etc.). Se trata de una aplicación que ofrece soporte no sólo para imágenes (png, jpg, tif, psd…), sino también para todo tipo de ficheros de texto, audio y vídeo (pdf, avi, mov, mpeg…). Incorpora también un interesante sistema de extracción de metadatos entre los cuales podemos destacar la importación de datos de localización GPS que se asocian a la localización concreta via OpenStreetMap o Google Maps, permitiendo de esta manera a los usuarios realizar búsquedas geográficas.

Para cada tipo de documento (imagen, audio, vídeo…) ofrece una serie de elementos de metadatos totalmente personalizables (podemos editarlos, borrarlos y crear nuevos). Elementos que podremos decidir de qué tipo son (texto, fecha, cuadro desplegable, botón de selección, etc.) si indexar o no o en qué posición mostrar, entre otros muchas opciones. Finalmente, también ofrece la posibilidad de editar estos metadatos en lote, de manera que resulta fácil modificar una gran cantidad de documentos simultáneamente.

• URL oficial: http://www.resourcespace.com/
• Demos: Demo en resourcespace.com (previo registro)

Algunos ejemplos de sitios gestionados con

• Lista de usuarios

5.5.3. Phraseanet

Similar a los dos anteriores, aunque de uso mucho menos extendido que éstos. Se trata de una aplicación desarrollada en PHP, inicialmente propietaria que desde 2010 se distribuye bajo licencia GPLv3. También, como en otros casos anteriores, Alchemy, la empresa desarrolladora de Phraseanet, ofrece un servicio de hospedaje y mantenimiento de la aplicación.

Entre sus características, destaca la posibilidad de utilizar tesauros y vocabularios controlados para la indexación de los objetos digitales, y el uso de Elasticsearch como motor de búsqueda con la integración de búsquedas facetadas. También cuenta con un plugin que permite publicar entradas con imágenes en un sitio WordPress desde Phraseanet. Otra característica interesante es su sistema de flujos de trabajo pensado para la validación de los documentos ingestados en la aplicación. Finalmente, cuenta con un interesante módulo de estadísticas que nos permite estudiar el uso efectivo de los recursos disponibles en el sitio web.

• URL oficial: https://www.phraseanet.com/
• Demos: Demo en el sitio web (previa solicitud)

Algunos ejemplos de sitios gestionados con

• Ejemplos de casos de uso.

6. Editores online de páginas web

La llegada de la conocida como Web 2.0 supuso un cambio de paradigma sobre la concepción de Internet y sus funcionalidades, siendo una de sus principales características el papel protagonista que asumió el usuario o internauta al pasar de ser un mero espectador, a un productor más de contenidos gracias a la aparición de los blogs, wikis, foros y, sobre todo, las redes sociales.

Esta democratización en la producción de contenidos fue posible gracias a la aparición de CMS como Drupal (2001), Mambo (2002) o WordPress (2003), los cuales permitieron por primera vez crear sitios web a usuarios sin conocimientos de programación. A pesar de la relativa facilidad de uso de estas aplicaciones, este tipo de tecnologías aún continuaban presentando importantes barreras para usuarios sin experiencia previa en la edición y puesta en marcha de un sitio web. Estas barreras no son otras que la contratación de un servicio de hospedaje, de un dominio y de la posterior instalación del CMS en cuestión. Conscientes de este problema, diferentes empresas han visto un importante nicho de mercado en la posibilidad de ofrecer acceso a una plataforma online que se encarga de todo aquello relacionado con la parte técnica de la implementación del sitio web. De esta manera, actualmente es posible encontrar en el mercado múltiples empresas que se han sumado a este modelo de distribución de software conocido con el nombre de software as a service o SaaS. Algunas de ellas pertenecen a la órbita del software libre, mientras que otras ofrecen software propietario bajo el mismo modelo de negocio. La mayoría, eso sí, coincide en ofrecer unos servicios básicos de manera gratuita o a precios muy reducidos, que suelen incluir el hospedaje del sitio (con un espacio en disco relativamente limitado o con restricciones en el tamaño de los archivos a cargar), el dominio (generalmente un subdominio en el dominio principal de la empresa), mantenimiento y actualizaciones del software, y acceso a las funcionalidades básicas de la aplicación (creación de entradas, páginas, etiquetaje, selección limitada de plantillas, etc.). A partir de aquí, todas ofrecen mejoras o servicios adicionales asociados a planes avanzados o profesionales entre los que se incluyen:

• Nombre de dominio personalizado.
• Mayor espacio de almacenamiento.
• Temas o plantillas premium.
• No inclusión de publicidad de terceros.
• Servicios de soporte personalizado.

A continuación se muestran algunos ejemplos de este tipo de servicios comerciales.

6.1. Webnode

• URL oficial: https://www.webnode.es/
• Rango de precios: 0$ a 16,95€/mes

6.2. Jimdo

• URL oficial: http://es.jimdo.com/
• Rango de precios: 0€ a 39€/mes

6.3. IM Creator

• URL oficial: http://www.imcreator.com/
• Rango de precios: 0$ a 350$/año

6.4. Weebly

• URL oficial: https://www.weebly.com/
• Rango de precios: 0€ a 20€/mes

6.5. Yola

• URL oficial: https://www.yola.com/es
• Rango de precios: 0€ a 19,95€/mes

6.6. Wix

• URL oficial: https://es.wix.com/
• Rango de precios: 0€ a 35€/mes

6.7. Cargo

• URL oficial: https://cargo.site/
• Rango de precios: 0€ a 66$/año

7. Criterios de selección de un CMS

El proceso de selección de un CMS es una tarea harto complicada en la que nunca se deben escatimar esfuerzos. Aspectos como la gran oferta disponible en el mercado, la complejidad de estas aplicaciones, la necesidad de someterlas a diferentes pruebas, o el mismo hecho de que una mala elección puede condicionar el proyecto o negocio para el que se desean poner en marcha, hacen del proceso de selección la fase más importante dentro de un proyecto de implementación de una aplicación de estas características.

Entre los criterios que nos guiarán en la selección del CMS más adecuado a nuestras necesidades, podemos diferenciar dos grandes grupos o categorías: criterios de negocio y criterios tecnológicos.

Los criterios de negocio tienen que ver principalmente con la estrategia y objetivos de la empresa. En este sentido, presentarán diferentes necesidades una empresa que simplemente desee tener presencia en la red, una empresa que busque la comercialización directa de productos a través de un portal de comercio electrónico, y una empresa que desee ofrecer diferentes servicios virtuales a sus clientes. Es por esto que cada empresa debe definir al detalle los requisitos asociados a su proyecto, intentando responder a preguntas cómo ¿para qué necesito un CMS?, o ¿qué procesos me puede ayudar a automatizar? Finalmente, también se deben valorar todos los costes asociados al CMS. Esto incluye no sólo su compra, licencia o implantación inicial, sino también la formación del personal, su mantenimiento o actualizaciones. Por este motivo, factores como el tipo de licencia asociada al producto, los costes de implantación y mantenimiento, o los de la propia infraestructura necesaria para alojar y poner en funcionamiento al CMS, deben ser analizados al detalle.

Por su parte, los criterios tecnológicos determinan la capacidad del CMS para satisfacer las funcionalidades requeridas. A continuación, se muestran sólo algunos de ellos, organizados en diferentes categorías:

• Creación y edición de contenidos: editor WYSIWYG, Editor HTML, Corrector ortográfico, categorización y etiquetado de contenidos, etc.
• Ingesta de contenidos: carga por lotes, carga de archivos zip, soporte FTP, etc.
• Metadatos: soporte para la asignación de meta descripciones y otros elementos HTML, uso de diferentes esquemas de metadatos (Dublin Core, etc.), metadatos sociales (Open Graph, Twitter Cards, etc.).
• Aplicaciones incorporadas: creación y administración de formularios, galerías fotográficas, gestión de administración de enlaces, agendas y calendarios, foros, encuestas, wikis, etc.
• Seguridad: control de sesiones y registro de autoría, autenticación, entornos sandbox y staging, antivirus, etc.
• Repositorio de documentos: soporte para diferentes formatos de archivo, control de versiones, posibilidad de aplicar cambios en lote, indexación a texto completo, etc.
• Flujo de trabajo: gestión y administración de flujos de trabajo, programación de publicaciones, gestión de usuarios, etc.
• Administración del sistema: estadísticas de uso del sistema, herramientas de analítica, etc.
• Otros requisitos: disponibilidad de soporte comercial, existencia de manuales y documentación, continuidad de la aplicación, etc.

8. Metodología para la selección de un CMS

Existen diferentes metodologías pensadas para abordar la selección de una aplicación como la que nos ocupa. Entre estas, destacamos el método MosCoW, una técnica utilizada en gestión de proyectos, análisis de negocios, o en el desarrollo y selección de aplicaciones de software. El término MoSCoW es un acrónimo derivado de la primera letra de cada una de las categorías propuestas en vistas a identificar la prioridad de las diferentes funcionalidades requeridas. Éstas son:

• Must have: Funcionalidad o característica imprescindible de la cual no se puede prescindir, y que por lo tanto debe ser cubierta por el CMS desde su implantación.
• Should have: Funcionalidad o característica necesaria que puede ser cubierta manualmente de manera temporal y que, por tanto, no es imprescindible en la fecha de lanzamiento. No obstante, se debe planificar su implementación en un plazo razonable de tiempo, en vistas a sustituir la solución temporal.
• Could have: Funcionalidad o característica que no es estrictamente necesaria para la implementación del proceso pero que, por el hecho de tenerla, por un pequeño coste adicional, incrementará la satisfacción y/o productividad de los miembros de la organización. Bajo ninguna circunstancia debería comprometer la fecha de entrega.
• Would like to have: Funcionalidades menos críticas, innecesarias en el desarrollo actual, pero que estaría bien tener en el futuro como parte de un proyecto de mejora.

Una vez recopiladas todas las funcionalidades necesarias y organizadas en las diferentes categorías propuestas por el método MoSCoW, obtenemos una escala nominal en la que los requisitos asociados a cada una de las categorías representan la misma prioridad.

Si se considera necesario, los requisitos asociados a cada categoría pueden ser ponderados de acuerdo a su nivel de cumplimiento. En este sentido, pueden definirse, entre otros, los siguientes:

• Core: funcionalidad o componente inherente incorporado al núcleo de la aplicación en la versión actual de la aplicación.
• Third party: funcionalidad no inherente al núcleo de la aplicación, pero que se puede integrar en el sistema mediante módulos existentes ofrecidos por terceros.
• Desarrollo: funcionalidad no inherente al núcleo de la aplicación, pero que puede ser desarrollada por la empresa o el departamento de informática encargados de su implementación.
• Planificado: funcionalidad no disponible en la versión actual de la aplicación, pero que se prevé sea incorporada en siguientes versiones dentro del núcleo o como módulo.
• No cumplida: funcionalidad que la aplicación no cumple a partir de su núcleo, ni con ningún módulo o extensión disponible. Tampoco se prevé su desarrollo a corto o medio plazo.

Tipo de requisito	Nivel de cumplimiento	Puntuación
Must have (x4)	Core (x6) Third party (x3) Desarrollo (x2) Planificado (x1)	24 puntos 12 puntos 8 puntos 4 puntos
Should have (x3)	Core (x6) Third party (x3) Desarrollo (x2) Planificado (x1) No cumplido (x0)	18 puntos 9 puntos 6 puntos 3 puntos 0 puntos
Could have (x2)	Core (x6) Third party (x3) Desarrollo (x2) Planificado (x1) No cumplido (x0)	12 puntos 6 puntos 4 puntos 2 puntos 0 puntos
Would like to have (x1)	Core (x6) Third party (x3) Desarrollo (x2) Planificado (x1) No cumplido (x0)	6 puntos 3 puntos 2 puntos 1 puntos 0 puntos

Aquel CMS que resuelva una mayor cantidad de requisitos, teniendo en cuenta que las funcionalidades prioritarias son, en este orden, las must have, should have, could have y would like to have y que, por lo tanto, como se puede observar en la tabla anterior, tienen un mayor peso sobre aquellas menos prioritarias, será el vencedor de la comparativa.

A la hora de establecer la lista de requisitos, debemos confeccionar una lista numerada que, en la medida de lo posible, sea totalmente exhaustiva. Es decir, que tenga en cuenta todas las funcionalidades necesarias atendiendo a las características de cada organización, las necesidades de los diferentes usuarios y los tipos de contenidos con los que se va a trabajar, así como los procesos internos que queremos automatizar, entre otros aspectos comentados anteriormente.

Asimismo, cada requisito deberá ser:

• Relevante: se debe evitar formular requisitos que no se atengan a las necesidades reales del proyecto.
• Específico: deberá expresar claramente cuál es la funcionalidad o característica que debe satisfacer.
• Preciso: no podrá ser descompuesto en diversas funcionalidades a su vez.
• Verificable: su cumplimiento deberá poder ser evaluado en una prueba.

9. Búsqueda y preselección de soluciones

Actualmente, es relativamente fácil encontrar suficiente información en la Red como para realizar una preselección de soluciones a analizar de manera informada. Más allá del uso de buscadores generalistas, en Internet podemos encontrar diferentes recursos de interés como:

• Directorios de aplicaciones: además de ofrecer acceso a los sitios web oficiales de cada aplicación, pueden contener información básica sobre estas, así como recursos de valor añadido, como demos o la valoración de los usuarios
• Blogs especializados: como pasa en otros ámbitos, el interés que despiertan este tipo de aplicaciones se ha traducido en una importante cantidad de medios digitales dedicados al análisis y la publicación de noticias de actualidad sobre este ámbito. Los blogs son recursos de interés tanto para descubrir aplicaciones nuevas como para mantenernos informados acerca de las novedades de las ya consolidadas. Con respecto a este tipo de recursos, es importante saber detectar contenido patrocinado.
• Artículos científicos: son varias las revistas científicas que dedican alguna de sus secciones a la reseña de software. Adicionalmente, también es posible encontrar artículos que explican las experiencias de una organización en la implementación o migración de aplicaciones informáticas.
• Empresas de consultoría: bien a través de sus sitios web, bien a través de blogs, las empresas de consultoría que ofrecen servicios en torno a las aplicaciones que nos ocupan pueden ser otra importante fuente de información acerca del mercado relacionado con los CMS. Igualmente, existen empresas especializadas que ofrecen servicios de acompañamiento en la búsqueda de la solución más adecuada. La visión de un profesional externo puede ayudar también en la elaboración de una lista de requisitos más completa, mientras que la experiencia del mercado permitirá un análisis más crítico del cumplimiento de los requisitos de las soluciones candidatas. Es importante que estas empresas consultoras manifiesten su carácter independiente, para asegurarnos que no estén vinculadas a un software concreto.

10. Consejos finales

Como hemos comentado anteriormente, la experiencia de otras organizaciones, especialmente si son similares a la nuestra, puede ser de gran ayuda en la decisión final. En este sentido, es interesante solicitar al proveedor o desarrollador una lista de clientes a los que se les pueda interrogar o visitar de forma privada. No obstante, seleccionar una aplicación simplemente porque otra empresa de referencia la utiliza puede ser un gran error. El tamaño de la institución, sus objetivos y la situación de partida son, entre otros, aspectos que debemos tener en cuenta.

El conocimiento o experiencia previa del departamento de informática o del responsable de la selección con un software determinado puede ser un punto a favor en la selección, pero la decisión final nunca debe basarse exclusivamente en ese tipo de criterios.

En el proceso de análisis, evaluación y decisión final deben participar todos los actores involucrados: informáticos, gestores de contenido, departamento de marketing, alta dirección, etc.

Si optamos por una solución de software libre, conviene asegurarnos de la existencia de una comunidad de usuarios activa, así como de empresas dedicadas a dar soporte y servicios relacionados.

Aunque en el caso de las aplicaciones privativas puede ser complicado de hallar, es conveniente revisar la hoja de ruta de desarrollo de la aplicación, así como el historial de versiones publicado hasta el momento. En este sentido, es interesante optar por aplicaciones que se actualizan con frecuencia, corrigiendo errores o añadiendo nuevas funcionalidades, y asegurando un soporte a largo plazo.

En la medida de lo posible, debemos intentar optar siempre por aplicaciones que trabajen con estándares; si son abiertos, mucho mejor.

11. Bibliografía

11.1 Monografías y artículos de revista

Boiko, Bob. Content management bible. 2nd ed. Indianopolis (Ind.) : Wiley, cop. 2005.

Mas i Hernández, Jordi. Software libre: técnicamente viable, económicamente sostenible y socialmente justo. Barcelona: Infonomía, 2005.

McKeever, susan. «Understanding Web content management systems: evolution, lifecycle and market». Industrial management & data systems. Vol. 103, issue 9 (2003).

Nakano, Russell. Web content management: a collaborative approach. Boston: Addison-Wesley, cop. 2002.

Stallman, Richard M. Software libre para una sociedad libre. Madrid: Traficantes de Sueños, 2004. http://www.gnu.org/philosophy/fsfs/free_software.es.pdf.

«The classification & evaluation of content management systems.»En: The Gilbane report, vol. 11, no. 2 (March 2003). http://gilbane.com/artpdf/GR11.2.pdf.

Tramullas, Jesús. «Herramientas de software libre para la gestión de contenidos». Hipertext.net. Nº 3 (2005). http://www.upf.edu/hipertextnet/numero-3/software-libre.html.

11.2 Sedes web

CMS critic

http://www.cmscritic.com/

Web CMS, CXM, ECM, EIM, Social, Marketing Automation Software

http://www.cmswire.com/cms/products/

11.3 Estadísticas

CMS Crawler

http://www.cmscrawler.com/tool/

Content Management System Distribution

http://trends.builtwith.com/cms

Usage of content management systems for websites

http://w3techs.com/technologies/overview/content_management/all

12. Propuesta para el debate

A continuación presentamos una propuesta para intervenir en el foro de debate de la asignatura. Esta intervención será valorada por los/as compañeros/as y el profesor/a con la ayuda de la propuesta de valoración que se indica al final de este apartado. Para superar una asignatura es necesario obtener una calificación de “apto” en el foro de debate de la asignatura y para ello es necesario:

• Realizar al menos 8 intervenciones en el foro a partir de las diferentes propuestas para el debate que aparecen al final de los artículos.
• Realizar al menos 8 mensajes valorando las intervenciones de compañeros/as.
• Recibir al menos 5 valoraciones.
• Obtener una valoración media de todas las intervenciones realizadas de al menos 5 sobre 8.

Edita directamente tu intervención en un mensaje en el foro de la asignatura y no pongas tu respuesta en ficheros adjuntos.

12.1 Como intervenir en el debate

Piensa y presenta un caso de implementación de un sistema de gestión de contenidos. Para ello haga una tabla comparativa de 3 CMS candidatos. En esta parrilla comparativa indique el cumplimiento o no de cada uno de los requisitos identificados y de cuál de las siguientes maneras lo cumple: core, third party y “no lo cumple”. La parrilla comparativa ha de incluir un mínimo de 10 requisitos o indicadores.

Algunos recursos que le pueden ser útiles para elaborar el ejercicio:

• CMS matrix: permite comparar, a partir de 142 indicadores organizados en 10 categorías, los requisitos y características de más de 1200 CMS. Es posible comparar hasta 10 aplicaciones de manera simultánea.
• OpenSourceCMS: Más que un comparador como en el caso anterior, OpenSourceCMS es un portal con demos de más de 200 CMS. Probando los CMS también es posible averiguar si cumplen o no con los requisitos.
• WikiMatrix: Para aquellos que decidan comparar Wikis. Permite comparar hasta 138 aplicaciones, cualquier cantidad simultáneamente. Ofrece 123 indicadores y 17 ejemplos de sintaxis.
• También es posible utilizar los portales oficiales de cada uno de los CMS que se decidan comparar, donde generalmente es posible encontrar la lista de funcionalidades de cada uno.

Algunos de los requisitos funcionales detectados a partir del estudio de los objetivos son:

Sistema de colección

• Soporte para la creación y publicación de contenidos (editor WYSIWYG, editor, HTML, previsualización, correctores de texto, modelos de plantillas…)
• Etc.

Sistema de gestión

• Gestión de usuarios y perfiles con diferentes roles.
• Estadísticas
• Content staging (entorno de preproducción)
• Etc.

Sistema de publicación

• Soporte multilingüe, para que cada sede pueda crear y publicar sus contenidos en su idioma.
• Soporte para la optimización en buscadores (SEO).
• Etc.

Otros requisitos

• Disponibilidad de manuales y documentación del producto.
• Amplia comunidad de usuarios.
• Disponibilidad de empresas que ofrezcan soporte y mantenimiento para la aplicación.
• Etc.

Ejemplo de parrilla comparativa:

Requisito	Drupal	Joomla!	WordPress	Prioridad
Editor WYSIWYG	Sí Core (x6)	Sí Core (x6)	Sí Core (x6)	Should have (x3)
Modelos de plantillas según el contenido	Sí Core (x6)	Sí Third party (x3)	Sí Core (x6)	Should have (x3)
Soporte multilingüe	Sí Third party (x3)	Sí Third party (x3)	Sí Third party (x3)	Must have (x4)
Content staging	Sí Third party (x3)	No No cumplido (x0)	Sí Third party (x3)	Would like to have (x1)
Etc.	Etc.	Etc.	Etc.	Etc.
Total	51	36	51

12.2 Como redactar un mensaje de valoración de una intervención del debate

Aplica la siguiente plantilla para la valoración de las intervenciones en el debate.

Usa las siguientes preguntas para orientar tu valoración. En todas ellas la respuesta debería ser “sí”. No es necesario que incluyas explícitamente estas preguntas y sus respuestas en tu mensaje de valoración, son tan solo elementos orientativos para redactar tu texto de valoración.

• ¿Hay al menos 3 CMS en la tabla de valoración?
• ¿Hay al menos 10 indicadores en la tabla de valoración?
• ¿Los indicadores son significativos para valorar los CMS seleccionados?
• ¿Los datos numéricos han sido calculados de forma correcta en función de la metodología explicada en el artículo?
• ¿Los CMS valorados son comparables por ser del mismo tipo?
• ¿Los resultados globales obtenidos están justificados en función de las características analizadas?

Valora la intervención con el desplegable del foro seleccionando entre una y ocho estrellas (de menor a mayor calidad).

Redacta un texto de al menos 100 palabras resaltando los aspectos más importantes de tu valoración.

---

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 1.23. Introducción al diseño centrado en el usuario

Mari-Carmen Marcos

Mari-Carmen Marcos. 1.23. Introducción al diseño centrado en el usuario. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.

---

 

Sumario

1. Conceptos relacionados con el Diseño Centrado en el Usuario

1.2. Interacción Persona-Ordenador (IPO, HCI), la disciplina paraguas que dio origen a todo esto

1.3. Usabilidad

1.4. Arquitectura de la información (AI)

1.5. Experiencia de usuario (UX)

2. El proceso del diseño centrado en el usuario (DCU)

2.1. Análisis de requisitos

2.2. Prototipado

2.3. Desarrollo

2.4. Publicación

2.5. Evaluación

3. Evaluación de interfaces desde el punto de vista del DCU

3.1. Técnicas de evaluación sin usuarios (evaluación por inspección). La evaluación heurística

3.1.1 Principios

3.1.2 Cómo realizar una evaluación heurística

3.1.3 Ventajas e inconvenientes de la evaluación heurística

3.2. Técnicas de evaluación con usuarios (evaluación por indagación). El test con usuarios

3.2.1 Planificación

3.2.2 Preparación de los materiales

3.2.3 El día del test

3.2.4 Análisis de los resultados

4. Bibliografía para comenzar a aprender

5. Propuesta para el debate

---

1. Conceptos relacionados con el Diseño Centrado en el Usuario

A lo largo del temario se van a tratar en profundidad conceptos, técnicas y herramientas del Diseño Centrado en el Usuario. Como introducción a esta unidad vamos a definir brevemente los conceptos básicos relativos a esta disciplina aunque algunos de estos conceptos ya hayan sido tratados y definidos en mayor profundidad en otras unidades didácticas. Por ejemplo, si ya ha estudiado la unidad 1.5 puede saltarse esta introducción. Los conceptos que vamos a recordar brevemente son: Human-Computer Interaction (HCI) o Interacción Persona-Ordenador (IPO), Arquitectura de la Información, Usabilidad y Experiencia de Usuario (UX).

1.2. Interacción Persona-Ordenador (IPO, HCI), la disciplina paraguas que dio origen a todo esto

Tal como se ha dicho en otras unidades didácticas, la Interacción Persona-Ordenador (IPO o HCI en inglés) es la disciplina que se ocupa de estudiar la manera en que las personas se comportan al utilizar sistemas tecnológicos. Su objetivo es adaptar los sistemas que hacen uso de las nuevas tecnologías a la forma que tienen las personas de utilizarlos. Aunque en su origen trataba sobre esta interacción con los ordenadores, hoy en día incorpora otras tecnologías como móviles, tablets, videojuegos, etc.

1.3. Usabilidad

La usabilidad es el concepto que más se escucha, un término que incluso podría decirse que se ha convertido en popular. La usabilidad viene definida por la norma ISO 9241-11 (Ergonomic requirements for office work with visual display terminals (VDTs) — Part 11: Guidance on usability ) como:

«The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use».

 

Ni los diccionarios de inglés ni los de español nos aclaran la diferencia entre «effectiveness» y «efficiency» o entre «efectividad», «eficiencia» y «eficacia», si bien por la práctica en la usabilidad podemos diferenciarlas con un matiz.

• Efectividad es la capacidad de lograr el efecto que se desea o se espera. Es decir, la capacidad de conseguir el objetivo marcado. Debería poder medirse en términos absolutos, “sí o “no”, pero según el caso admite matices.
• Eficiencia es la capacidad de lograr un objetivo con el mínimo gasto de recursos o con el menor esfuerzo posible.

1.4. Arquitectura de la información (AI)

La arquitectura de la información (AI) se ocupa entre otras cosas de «definir cuál va a ser el contenido del sitio, sus objetivos, herramientas, cómo se llamarán los botones y en qué posición éstos van a estar, cómo se va a relacionar el usuario con el sitio» (Velasco, http://mantruc.com/palabras/intro-ia/index.html). Algunos autores muy reconocidos en este campo han formalizado la definición de la disciplina, por ejemplo Wurman, o Rosenfeld y Morville.

1.5. Experiencia de usuario (UX)

Así como la usabilidad se preocupa de que las cosas funcionen bien, de forma intuitiva, con el menor esfuerzo cognitivo posible, la experiencia de usuario es un concepto más amplio que se focaliza en que el usuario disfrute, por lo tanto aporta más a la satisfacción, algo más subjetivo y que es complicado medir objetivamente.

2. El proceso del diseño centrado en el usuario (DCU)

Llamamos Diseño centrado en el usuario a aquellas prácticas del diseño de interfaces que tienen como eje central al target de ese producto. Normalmente se habla de DCU en un contexto de “pantallas”, concretamente de interfaces para ordenador, sobre todo cuando se trata del diseño de sitios web, y como tales, parten de la disciplina Interacción Persona-Ordenador. Entre sus criterios para lograr que realmente esas interfaces sean óptimas para su público, se tiene en cuenta la forma en que se trabaja la arquitectura de la información del sitio web y que se sigan las pautas que aseguran su usabilidad, y todo ello con el objetivo final de crear una buena experiencia en los usuarios.

El diseño centrado en el usuario (DCU) tiene un procedimiento de trabajo que como su nombre indica pone al usuario, receptor de la información, en un punto clave del diseño. Cuando se trabaja usando este planteamiento se pasa por cuatro etapas: análisis de los requisitos, prototipado, desarrollo y publicación, mientras que la evaluación está presente en cada una de las fases previas para asegurar que todo va a funcionar como está previsto (figura 1).

Figura 1. Proceso del diseño centrado en el usuario (DCU)

2.1. Análisis de requisitos

En la fase de análisis el diseñador estudia el contexto de trabajo: quién es el usuario al que se dirige el producto, en qué escenarios de uso debemos pensar, qué tareas deberá realizar el usuario, etc. En función de este análisis se deben plantear las funcionalidades del sistema.

2.2. Prototipado

La siguiente fase responde a la definición más concreta del diseño. En ella se estudia el modelo mental que los usuarios tienen del tipo de producto que se está diseñando. Es importante que el sistema responda a las expectativas de los usuarios, pues sólo así se evitarán frustraciones. Para lograr esta información es indispensable trabajar desde el principio con usuarios potenciales del sistema.

Dentro de esta etapa se construye una parte fundamental del diseño de sitios web: la arquitectura de contenidos. Consiste en definir el esquema en el que se distribuirán los contenidos en el sitio web, las jerarquías y las etiquetas que servirán para definir cada apartado. En esta etapa también se define el diseño de la interacción del sitio, de momento mediante prototipos no funcionales (wireframes), que una vez testados con los usuarios se trasladarán a un prototipo funcional.

Algunas de las técnicas que se utilizan en esta fase se podrán utilizar posteriormente para evaluar el sistema en su versión última antes de la distribución, así como en el seguimiento del producto para su mejora. Estas técnicas a las que nos referimos son el test de usabilidad (aplicado a los prototipos), el card-sorting (para conocer el modelo mental de los usuarios con respecto a la organización de la información y el vocabulario que utilizan) y la técnica de los personajes, que no recurre a usuarios reales sino imaginarios, pero que en parte la consideramos una técnica de evaluación con usuarios (similar a lo que sería el recorrido cognitivo).

2.3. Desarrollo

La tercera gran etapa es la de la construcción del sitio web, es la llamada etapa de producción. En esta fase entran los especialistas en lenguajes de marcado y en programación y los diseñadores gráficos. Un test de usabilidad en esta fase nos ayudará a determinar los aspectos que se pueden mejorar. Tras estas pruebas, y las correcciones que se deriven de ellas, el sistema estará listo para lanzarlo.

2.4. Publicación

La última etapa es la de distribución. En ella el producto está a disposición de los usuarios finales. Durante esta fase se deberán realizar algunos tests, análisis de logs, cuestionarios, etc. que sirvan como feedback y que permitan realizar las mejoras necesarias. En realidad no es una última etapa, pues el diseño centrado en el usuario es iterativo y si se aplica correctamente nunca se le pone punto final.

2.5. Evaluación

Se trata de una evaluación iterativa, que está presente en cada una de las etapas anteriores y que asegura que todo los pasos llevan a un buen diseño para los usuarios. Es un error pensar en la evaluación como la fase final de un producto porque en ese momento será mucho más difícil corregir los problemas que si se va realizando la evaluación a lo largo del proceso. En el apartado siguiente se trata con más detenimiento cómo evaluar interfaces.

3. Evaluación de interfaces desde el punto de vista del DCU

La evaluación es una fase necesaria en cualquier proceso. Permite comprobar si el resultado responde a los objetivos planteados. Por su propia naturaleza, la evaluación idealmente debe ser contemplada desde un inicio, cuando se planifica el producto o el proceso, y no dejarla para el final, ya que improvisar cómo evaluar dejará lagunas en los resultados.

Aplicada a usabilidad, es común clasificar la evaluación en dos grandes tipos: por inspección y por indagación. La primera, por inspección, se refiere a los métodos en los que una o varias personas expertas en usabilidad revisan el producto para detectar posibles problemas. La segunda, por indagación, incorpora técnicas de observación y los expertos en usabilidad observan a los usuarios realizando algunas tareas para detectar los problemas.

3.1. Técnicas de evaluación sin usuarios (evaluación por inspección). La evaluación heurística

La palabra “heurística” procede del griego (εὑρίσκειν) y literalmente significa hallar, inventar. Se aplica este término para referirse a técnicas de descubrimiento que lleven a la solución de un problema.

Como decíamos, una de las ramas donde se utilizan de forma más habitual estas técnicas es la de la evaluación de la usabilidad, donde es común para referirse a una forma de evaluación por inspección. Que sea por inspección significa que el evaluador, un experto en usabilidad, descubre problemas en un sistema o producto utilizando para ello una serie de herramientas: los principios heurísticos y concretamente los indicadores de calidad sobre el que se crean para poder detectar las carencias del producto.

En el campo de la usabilidad, los principios heurísticos describen propiedades de una interfaz y sirven de guía para detectar qué aspectos se cumplen y cuáles no.

3.1.1 Principios

Los principios heurísticos de la usabilidad están ampliamente reconocidos por la comunidad de Diseño Centrado en el Usuario. Posiblemente el primer autor, o al menos uno de los primeros, que recoge principios de evaluación heurística fue Ben Schneiderman (1986), si bien las bases tal y como las conocemos hoy en día las sentaron Molich y Nielsen (1990), y las popularizó Jacob Nielsen (1994) con el decálogo más conocido de la evaluación heurística:

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.nngroup.com/articles/ten-usability-heuristics/

Seguiremos las 10 reglas de Nielsen por ser las más extendidas en el ámbito profesional de la UX, y acompañaremos cada una de ejemplos que ayuden a concretar a qué se refieren.

Vamos a comenzar por una regla que numeraríamos como “cero” y que es previa a todas las demás ¿se puede acceder al sitio web? ¿se puede visualizar? No es en sí una heurística, pero sí una condición necesaria para poder aplicar todas las reglas que se presentarán a continuación… por lo tanto la incluimos como principio cero: ¿es posible acceder al sitio web? ¿ es posible verlo correctamente? ¿es accesible?

Una cláusula imprescindible y previa para poder plantear si un sistema es o no usable es que pueda ser usado. En el contexto de los sitios web, que sea usado implica que se pueda acceder a él. Se refiere a esto:

• Que se pueda abrir en ordenadores que usan diferentes sistemas operativos (distintas versiones de Windows, distintas versiones de sistemas operativos de Apple y de Linux).
• Que pueda abrirse desde cualquier navegador y en distintas versiones de ellos (Internet Explorer, Firefox, Safari, Chrome, Opera, etc.).
• Que se visualice correctamente en diferentes tamaños y tipos de monitores, así como en distintas resoluciones.
• Que se pueda ver en dispositivos distintos a los PCs: tablets, teléfonos móviles, etc.

En realidad, conseguir que el sitio web se visualice desde cualquier sistema operativo, navegador, resolución y dispositivo, depende de cómo se ha escrito el código fuente. La clave para hacerlo bien consiste en cumplir las recomendaciones del W3C.

Veamos cuáles son los 10 principios:

1. Visibility of system status. El sistema debe informar a los usuarios acerca de lo que está ocurriendo. Es habitual ver un mensaje del tipo “espere unos instantes, estamos buscando las mejores ofertas” que nos da ese tipo de feedback, o una barra de progresión que indica que un fichero se está descargando. A eso se refiere este principio.
2. Match between system and the real world. El sistema debe utilizar un lenguaje cercano al de los usuarios, con un vocabulario que el usuario entienda, y con iconos reconocibles. La idea es que el sistema no provoque frustración ni nos obligue a tener que aprender algo que no es necesario.
3. User control and freedom. Este principio indica que los usuarios deben poder deshacer y rehacer acciones realizadas. El sistema debe proveer al usuario de mecanismos de “escape” que les permitan cancelar la operación iniciada, retroceder o deshacer las acciones comenzadas.
4. Consistency and standards. Las personas seguimos ciertos patrones, unos aprendidos desde la niñez (ej. leemos de izquierda a derecha), otros aprendidos en el propio medio (ej. el logotipo está en la parte superior; al clicarlo se va a la página de inicio) y otros que aprendemos en la propia página web tras los primeros momentos navegando en ella (ej. los links son de color rojo; el menú está situado en la parte superior, debajo del banner).
5. Error prevention. Siendo claro en las explicaciones y ofreciendo la información necesaria se estará reduciendo el margen de confusión al usuario. Los casos más típicos de errores que podrían haberse previsto se dan en los formularios. Dos claves para que esto no ocurra: indicar qué campos son obligatorio y de qué manera deben ser rellenados.
6. Recognition rather than recall. Evitar al usuario tener que recordar dónde está cada opción, cada elemento, qué ha hecho hasta ese momento. Por ejemplo, en un proceso de compra en el que el usuario va añadiendo productos, debería estar siempre presente el carrito para que pueda ver qué ha ido comprando y cuánto va a costarle.
7. Flexibility and efficiency of use. Ya que los usuarios que pueden llegar a un sitio web pueden ser ya asiduos a la página, o bien ser su primera visitas, el sitio deberá estar preparado para ambos tipos de personas. Los aceleradores o atajos son útiles a los asiduos, por ejemplo les será cómodo poder usar la abreviatura “Bcn” para poner la ciudad de origen al comprar un vuelo, y el sistema le confirma que es “Barcelona, España”. En cambio alguien menos asiduo podría teclear “Barcelona” y que según escribe se le sugieran ciudades para autocompletar su palabra.
8. Aesthetic and minimalist design. Una página web sólo debe contener la información que realmente sea relevante o necesaria en cada momento. Cuando se ofrece al usuario una página cargada con mucha información, se reduce la visibilidad y es fácil desorientar al usuario. También debe cuidarse que haya un buen contraste de la letra con el fondo, un tamaño de letra legible, un ancho de columna cómodo, etc.
9. Help users recognize, diagnose, and recover from errors. En caso de que el sistema dé un mensaje de error, debe servir para explicar al usuario qué ha ocurrido y orientarle sobre cómo puede recuperarse de ese error.
10. Help and documentation. Si bien lo ideal es que el sitio web (o la aplicación) pueda ser usado sin ayuda, a veces es necesario proporcionar ciertas claves que ayuden, o al menos que den seguridad, al usuario.

A los principios de Nielsen se suman otros con algunas variaciones, como la propuesta de Tognazzini (2003) http://www.asktog.com/basics/firstPrinciples.html con estos principios:

1. Anticipation. Anticipación a las necesidades del usuario, mostrando al usuario toda la información y herramientas necesarias en cada momento.
2. Autonomy. Autonomía y control del usuario sobre el sitio web.
3. Color Blindness. Precaución en el uso del color . Transmitir información utilizando otros elementos complementarios al color para compensar la ceguera al color (daltonismo).
4. Consistency. Consistencia con las expectativas y aprendizaje previo de los usuarios.
5. Defaults. Uso de configuraciones y valores por defecto sólo en aquellos casos en qué tengan realmente sentido, permitiendo eliminarlas o cambiarlas con facilidad.
6. Efficiency of the User. Favorecer la eficiencia del usuario centrándose en su productividad.
7. Explorable Interfaces. Diseño de interfaces explorables que doten de libertad al usuario y que permitan reversibilidad sobre acciones realizadas.
8. Fitts’ Law. Ley de Fitts . Considerar que a menor distancia y mayor tamaño más facilidad del usuario para la interacción.
9. Human Interface Objects. Uso de estándares y objetos familiares en la interfaz.
10. Latency Reduction. Reducción del tiempo de latencia , optimizando el tiempo de espera de los usuarios.
11. Learnability. Minimizar el proceso y tiempo de aprendizaje necesario por parte del usuario.
12. Use of Metaphors. Uso adecuado de metáforas facilitando la comprensión del modelo conceptual presentado.
13. Protect Users’ Work. Protección del trabajo de los usuarios, asegurando que éstos no pierdan su trabajo como consecuencia de un error.
14. Readability. Favorecer la legibilidad mediante colores de texto contrastados y tamaños de fuente grandes.
15. Track State. Seguimiento del estado y de las acciones del usuario, permitiendo que éste realice operaciones frecuentes de manera más rápida.
16. Visible Navigation. Navegación visible, reduciéndola al máximo y presentándola de forma clara y natural.

Otros autores como Hassan-Montero y Martín-Fernández (2003) y Márquez-Correa (2003) concretan los principios heurísticos en indicadores más específicos que ayudan a aplicar este tipo de evaluación por evaluadores no expertos. Recomendamos su lectura para profundizar en el significado de los principios heurísticos.

3.1.2 Cómo realizar una evaluación heurística

Para realizar una evaluación heurística se debe contar con varios profesionales de UX familiarizados con la técnica. Nielsen recomienda que sean 3 personas (según sus cálculos, con 3 evaluadores se logran encontrar el 80% de los problemas de usabilidad). Cada evaluador debe realizar un entrenamiento previo para familiarizarse con la interfaz, para lo cual puede aplicar la técnica del “recorrido cognitivo” (cognitive walkthrough): revisa la web punto por punto, lo que le permite anotar las dificultades que tendría un usuario nuevo y medir la facilidad de aprendizaje (learnability).

A partir de ahí, cada evaluador va revisando de forma individual las distintas heurísticas para anotar problemas que encuentra en la web. En una tabla anota los problemas que observa, su frecuencia (si se dan constantemente o si son algo puntual) y la severidad (si impiden hacer la tarea serán graves, si molestan pero permiten continuar serán leves). Conviene guardar capturas de pantalla de los errores encontrados para después ilustrar el informe.

Para medir cada indicador, Nielsen propone una escala de 0 a 5 http://www.useit.com/papers/heuristic/severityrating.html

Una forma sencilla de puntuar consiste en usar una escala de 0-1-2 para la frecuencia y 1-2-3 para el impacto, de manera que se multiplica frecuencia por impacto y queda una puntuación de 0 a 6 para cada indicador.

Hecho este trabajo individual, los evaluadores ponen en común sus observaciones y llegan a un consenso. Juntos preparan un informe que recoge los problemas y las posibles soluciones.

3.1.3 Ventajas e inconvenientes de la evaluación heurística

Ahora que ya sabemos en qué consiste exactamente una evaluación heurística, podemos determinar cuándo aplicarla teniendo en cuenta que la técnica, como todas las técnicas, tiene una serie de ventajas y al mismo tiempo algunos inconvenientes. Entre las ventajas o puntos fuertes podemos destacar principalmente dos:

1. Es una técnica económica en tiempo y en dinero porque no trabaja con usuarios, con todo lo que conlleva: ni reclutar la muestra de usuarios ni preparar el protocolo de testeo, ni por tanto invertir el tiempo de testear con personas.
2. Es una técnica que puede aplicarse desde fases muy tempranas del desarrollo del producto, incluso con simples prototipos, de manera que se detectan los errores de usabilidad en un momento en que es mucho más fácil un rediseño.

Como inconvenientes o puntos débiles, al menos para tener en cuenta, se encuentran estos dos:

1. La aplicación correcta de una evaluación heurística requiere que los evaluadores tengan familiaridad con los principios heurísticos; de lo contrario pueden interpretarlos mal, detectar errores que no lo son o sobre todo no detectar los que hay.
2. Con esta técnica se identifican los problemas de la interfaz pero no los derivados de las expectativas del usuario o del contexto de uso, que si bien no necesariamente son problemas de usabilidad, si empobrecen la experiencia que tiene el usuario frente a producto que usa.

¿Qué más podemos hacer para evaluar un sitio web? Además de una evaluación heurística, que es una excelente forma de comenzar una evaluación, es importante complementar con otros métodos de evaluación que involucren a los usuarios.

3.2. Técnicas de evaluación con usuarios (evaluación por indagación). El test con usuarios

En un test de usuarios (user testing), los usuarios realizan una serie de tareas y el evaluador observa y anota lo que va ocurriendo. El test de usuario suele incluir cuestionarios y entrevistas. A los tests de usuarios se les pueden incorporar algunas formas de medición de aspectos biológicos, por ejemplo el seguimiento de la mirada (eye tracking), o los dispositivos EEG (Electroencephalography) para medir el esfuerzo cognitivo. En los últimos años se está aplicando la técnica de forma remota, de forma que los usuarios realizan los tests desde su propio ordenador en su casa, y un sistema graba la sesión para que después los evaluadores la revisen.

Como es una técnica un tanto compleja y que requiere una planificación detallada y una ejecución muy cuidada, vamos a explicar paso por paso todo lo que hay que tener en cuenta para plantear y llevar a cabo correctamente un test de usabilidad con usuarios.

3.2.1 Planificación

El planteamiento del test deberá quedar redactado con gran detalle en un informe para que todos los miembros del equipo lo tengan a mano en caso de dudas. Contendrá estos puntos que a continuación se explican con detenimiento.

1) Recabar información de usuarios. Es recomendable que antes de lanzarnos a hacer un test con usuarios se recabe información de forma rápida y automatizada, por ejemplo con un cuestionario breve online que podemos poner en Facebook, Google Docs, 5secondtest, etc. También se pueden hacer entrevistas a un grupo reducido de personas que nos resulten cercanas, para tener una primera impresión de los usuarios antes de continuar preparando el test. Con este feedback se podrán afinar los indicios y plantear un test más enfocado.

2) Escoger las técnicas de observación y seguimiento que se usarán en el test. Pueden ser desde simplemente observacionales hasta incorporar tecnología de seguimiento como mouse tracking y eye tracking. Si se requiere comparar dos interfaces para determinar cuál es más conveniente, será necesario plantear las métricas que se usarán para medirlo, y decidir si todos los participantes realizarán todas las tareas en todas las interfaces que se testean (lo que se llama un diseño experimental de tipo within-subjects), o si se dividirán para que unos hagan las tareas en una interfaz y otros en otra (diseño de tipo between-subjects). En la unidad dedicada a “Métricas de UX” se profundizará en estos dos tipos de diseño experimental.

3) Determinar el lugar de testeo. Se puede realizar el test en el entorno natural del usuario, por ejemplo en su oficina o en su casa, o bien en un laboratorio de UX más o menos equipado con dispositivos de grabación, o también se puede hacer un test en remoto utilizando tecnología que nos permita visualizar las acciones del usuario mientras las hace o posteriormente, si quedan grabadas en un servidor. Las opciones de compartir pantalla de programas como Skype facilitan este tipo de tests, si bien hay software específico para tests de usuarios en remoto, como Loop11 (con una versión reducida gratis) o UserZoom (de pago).

4) Asignación de roles y responsabilidades. Dentro del equipo de UX, una persona se ocupará de ser el moderador o conductor del test, acompañando al usuario durante las pruebas, mientras que otra u otras personas del equipo asumirán el rol de observador y anotarán las acciones del usuario y sus comentarios. Si sólo hay una persona en el equipo para realizar el test, grabar la sesión es lo más conveniente para poder repasarla y anotar lo que va ocurriendo. La mejor forma de anotar es disponer de una plantilla con espacios marcados para escribir en ellos lo que se quería observar, así se ahorra tiempo y en caso de que haya varias personas anotando a la vez, se asegura que siguen el mismo criterio.

5) Tareas. Las tareas son las acciones que se pide a los usuarios que realicen durante el test, por ejemplo “entra en la web de xxx y suscríbete al servicio de xxx”, o “compra un billete de tren para ir de xxx a xxx el día xx”. Se deben tener en cuenta varios aspectos:

• Cómo redactar las tareas. Es habitual que el usuario tienda a buscar la forma de realizar las tareas usando las palabras exactas de la redacción. Si pedimos al usuario que busque información de “créditos para compra de vivienda” es posible que se centre en esas palabras y no encuentre la información que hay sobre “hipotecas”. Las tareas deben estar inmersas en un “escenario”, es decir, un contexto que ayude a entender qué se le pide que haga, ya que en una situación real las personas hacemos acciones online con alguna finalidad, por ejemplo no compramos el billete de tren porque sí, lo hacemos porque queremos ir a algún lugar por algún motivo. Esta información debe dársele al usuario redactada de forma breve, que le ayude a entender pero que no le despiste. Una vez redactadas las tareas se puede comenzar a preparar el script (guión) que tendremos frente a nosotros durante las sesiones de testeo.
• Cuántas tareas proponer. Depende de distintos factores: la dificultad que entrañan, lo que se tarde en hacer cada una, si los usuarios van a ser remunerados o no, etc. No hay un número exacto de tareas, pero se recomienda que sea entre 3 y 5 tareas para que agotar al usuario. Un número menor no arroja suficientes datos, y un número mayor agota a los participantes y baja su rendimiento. También puede ocurrir que se tengan más tareas de las que un usuario vaya a realizar, de esa forma la muestra de tareas es mayor pero el número de usuarios que hace cada una desciende; puede interesar un diseño así si no la tarea en sí no influye y se quiere tener una muestra mayor de opciones.
• Cómo escoger las tareas. Las tareas serán aquellas que hayamos detectado que son importantes para los objetivos marcados para el test, y en las que las interfaces implicadas presenten potenciales problemas que ya se han intuido a través de encuestas, entrevistas, analítica web, et.. Entre las tareas es posible preparar algunas que consistan en hacer algo en productos de la competencia (benchmark) para saber cómo responden los usuarios a las interfaces de otros productos similares.
• En qué orden presentar las tareas. En caso de que una tarea requiera hacer otra previamente, el orden no podrá cambiarse. Si en cambio el orden no afecta, es preferible la aleatoriedad para evitar sesgos producidos por el cansancio (que afecta a las últimas tareas) o los nervios (que afectan a las primeras tareas). Igualmente se aconseja comenzar el test con una “tarea cero”, que es una tarea fácil que ayuda al usuario a introducirse en el test y tomar confianza.

6) Duración. La duración del test no debería superar una hora, incluyendo la presentación, las tareas, la entrevista y los cuestionarios. Las tareas en sí deberían poder ser hechas en máximo 30 minutos. Más tiempo resulta agotador y los usuarios no estarán tan atentos a las tareas. No debemos olvidar que están realizando tareas que no les interesan especialmente, pues se las hemos proporcionado nosotros, con lo cual su empeño no es tan alto como lo será cuando realicen tareas que les son de utilidad.

7) Datos para recoger. De toda la información que genera la interacción de una persona con una interfaz, hay unos datos de tipo cualitativo y otros de tipo cuantitativo. Los cualitativos nos ayudan a entender por qué los usuarios tienen cierto comportamiento, y los cuantitativos nos permitirán obtener métricas que serán de utilidad para medir el rendimiento (eficacia y eficiencia) y comparar con otras tareas, entre usuarios, entre dos interfaces, o una interfaz a lo largo del tiempo. En función de los objetivos del test, se recogerán y analizarán unos datos u otros, y en el caso de recoger datos cuantitativos se deberán tratar posteriormente con tests estadísticos apropiados (para más información, ver las unidades sobre Métricas de UX y Estadística para UX).

8) Selección de la muestra de participantes

• Cantidad. El número de participantes recomendado por Jakob Nielsen es de 4 o 5 personas (siempre y cuando tengan el mismo perfil, sean de un mismo target), porque con ese número ya se detectan un 80% de los problemas de usabilidad. Se ha cuestionado el número “mágico” de Nielsen alegando cuestiones puramente estadísticas; son especialmente relevantes los resultados de Sauro y Lewis (2012), que indican cómo calcular el número necesario de usuarios en base a dos datos. La tabla que mostramos a continuación pone algunos ejemplos de cuántos usuarios serían necesarios:

Tabla 1. Tamaño de muestra requerido en función del grado de descubrimiento de los problemas que se haya determinado

• Forma de reclutamiento. Es común que se haga a través de un anuncio, bien puesto por el propio equipo de UX, bien por una empresa de reclutamiento que puede contratarse. Este anuncio no puede revelar el objetivo ni decir para qué empresa se hará el test, sólo puede indicar la zona del lugar donde se hará y las fechas, el incentivo que se paga, y los datos que tiene que enviarnos toda aquella persona interesada.
• Screener. Se trata de un cuestionario breve para descartar/aceptar a las personas que voluntariamente hayan indicado que quieren participar en el test. Se suele hacer online. Si por ejemplo necesitamos a 4 personas menores de 20 años y a 4 mayores de 60 años, y tenemos más interesados de los que hacen falta, podemos determinar algún criterio para filtrar de entre las que han llegado.
• Gestión de no-show. Esto se refiere a qué pasa si alguna de las personas citadas al test no viene. Estaríamos perdiendo un tiempo para poder testear a otras. Unas empresas optan por tener a un usuario de reserva por si ocurre esto, y le pagan por las horas de espera que hace. Otras cuentan con usuarios cercanos (conocidos, familiares, compañeros) que pueden “tapar” ese agujero de tiempo en caso de que un usuario externo falle.

9) Calendario de tests. Cuando ya se tiene un panel de usuarios preparado hay que repartir las citas en los días de testeo. Es recomendable poner a los perfiles más complicados los primeros días, por si falla alguno tener tiempo para conseguir a alguien de ese perfil. En lo posible conviene evitar las citas los lunes por la mañana, ya que es el día que más personas olvidan su cita.

10) Incentivo. Cuánto pagar a los usuarios es un asunto que cada empresa o institución decide. Si es un perfil escaso se suele pagar más, lo mismo si las tareas son largas y difíciles. El pago puede hacerse en efectivo o con una tarjeta-regalo, o bien puede ser un regalo material (una camiseta, un pen-drive, una entrada para un evento, etc.).

3.2.2 Preparación de los materiales

Una vez que se ha terminado de planificar qué se va a testear, para qué y cómo, llega el momento de concretar todo lo anterior y preparar el test en sí. Habrá que tener en cuenta todo lo que se comenta a continuación. Según se vaya avanzando en la preparación del test se completará el script para que no quede nada en el aire.

• Revisión de software/hardware. No podemos arriesgarnos a que algo falle en el último momento, así que habrá que revisar que todo el equipo que se usará está funcionando en perfectas condiciones. Si se va a grabar con una webcam, se probará la webcam, si se va a seguir el ratón, se probará el software de mouse tracker. En ocasiones los software de observación, de grabación y de seguimiento requieren un determinado sistema operativo o navegador, por eso es importante probarlos bien antes de que lleguen los usuarios.

• Listado de usuarios con citas. Por banal que parezca, tener controlada la lista de usuarios, sus datos y los días y horas a los que se les cita es de gran importancia. Los usuarios pueden olvidar la cita, enviémosles un recordatorio por email el día anterior. Y el mismo día, un mensaje por SMS o whatsapp al móvil no está de más. Además, en caso de que la empresa cuente con una recepción, habrá que informar a las personas de la entrada para que les guíen hasta el laboratorio.

• Cuestionarios. Habitualmente se preparan 3 cuestionarios:
  • Previo, con preguntas sobre el perfil del usuario (edad, género, profesión, tipo de móvil que usa, tipo de ordenador que usa, tiempo de conexión a internet al día, etc.); si se hizo un screener para seleccionar la muestra, algunos de estos datos ya los tendremos y no necesitamos pedirlos de nuevo.
  • Post-tarea: se le pasa a continuación de cada tarea.
  • Final, para valorar la satisfacción. El más conocido es el cuestionario SUS (ver una explicación más amplia sobre este cuestionario en esta misma unidad más adelante).

• Entrevista final. Antes de que el usuario se vaya le haremos una entrevista para que nos diga su percepción sobre el sistema. Conviene tener una plantilla para hacerle preguntas y anotar sus respuestas, así llevamos la entrevista hacia lo que nos interesa.

• Tarjetas con las tareas. Es más cómodo para los usuarios si tienen las tareas escritas y en un formato cómodo. La tarjeta les permite tener a mano las tareas.

• Formularios de consentimiento. Como trabajamos con personas, es necesario que éstas firmen un consentimiento donde indican que realizan este test libremente y habiendo sido informadas de en qué consiste. Si se graba en vídeo debe indicarse qué uso se hará de él, y si se trabaja con menores deben firmarlo también sus padres o adultos a cargo de ellos.

• “Recibí”. Cuando el usuario recibe un incentivo debe confirmar que le ha sido entregado.

• Formulario de anotación para el observador. Prepararemos las hojas donde se anotarán las observaciones: tiempo que se tarda en hacer la tarea, si acaba o no, comentarios que hace, etc. Es mucho mejor tener estas plantillas que anotar de forma libre, pues con ellas se logra mayor coherencia en lo que se apunta y nos centremos en el objetivo.

• Check-list de todo lo que tiene que haber en la sala, para que no se nos olvide nada: bolígrafos, papel, agua, tarjetas de tareas, hojas de observación, script, etc.

• Preparación del laboratorio o de otro entorno donde se realice el test: iluminación, tipo de silla, enchufes, wifi, etc.

• Testeo del test. Antes de citar a los usuarios se debe hacer un recorrido completo por las tareas para asegurarse de que todo es coherente. A continuación se debe hacer una prueba piloto con un usuario cercano (un compañero puede servirnos), y finalmente una prueba piloto con un test real citando a un usuario real. Este piloto real nos permitirá detectar aspectos que se nos habían escapado, y mejoraremos el test antes de que vengan los demás usuarios.

3.2.3 El día del test

Llegados a este punto, comienza el test finalmente. Estos son los pasos que se realizan con cada uno de los usuarios citados que llegan al laboratorio:

• Recibimiento del usuario
  • Comenzamos con un saludo, presentándonos y presentando el test que haremos con una explicación breve y que no desvele los objetivos porque si los conoce, el usuario podría dejar de comportarse de forma natural. Es necesario e importante aclararle al usuario para qué está ahí, en qué va a colaborar y dejarle bien claro que se está evaluando una web y no a él, porque tienden a sentir que se les hace un examen o se les pone a prueba.
  • Firma del consentimiento informado.
  • Recordar que hay que apagar los móviles.
• Cuestionario inicial
• Realización del test
  • Pedirle que vaya comentando en voz alta lo que hace, como si pensara hablando (think aloud).
  • El moderador interviene sólo para guiar cuando haya que cambiar de tarea y para realizar el cuestionario post-tarea.
  • El observador está en la misma sala o bien en otra mirando tras el cristal (en salas de cristal-espejo se puede hacer).
• Encuesta final. Puede ser con preguntas abiertas y/o cerradas. Suele incluir un SUS
• Entrevista final

Ejemplos de distintos laboratorios en el momento en que los usuarios están realizando los tests. En todos los casos se ve cómo el moderador les acompaña.

3.2.4 Análisis de los resultados

Una vez terminadas las sesiones de testeo con los usuarios, llega el momento de obtener resultados. Para ello seguiremos estos pasos:

• Recoger inputs de todo el equipo. Ordenarlos por temas y por importancia
• Organizar los datos cuantitativos para aplicar fórmulas estadísticas: tiempo empleado para realizar cada tarea, número de errores cometidos, número de usuarios que han realizado correctamente una tarea etc. (ver la unidad sobre Estadística para UX)
• Analizar las respuestas de los cuestionarios
• Analizar los comentarios hechos por los usuario durante el test y durante la entrevista
• Triangulación de los datos: los cualitativos y los cuantitativos deben apuntar en la misma dirección. Usar varios métodos da rigurosidad a los resultados
• Ordenar resultados por alcance (de los problemas que se dan de forma puntual en algunos usuarios a los que ocurren de forma repetitiva) y severidad (de los más leves, que no afectan a la realización de las tareas, a los más graves, que impiden acabar las tareas). Crear una lista de problemas poniendo como prioritarios para resolver aquellos más graves que se dan de forma más repetitiva.

4. Bibliografía para comenzar a aprender

Desde la lectura de bibliografía especializada (libros y revistas) a blogs nada despreciables, el material para profundizar es amplio si se busca en inglés, y no tanto si buscamos textos en español. Algunas editoriales están traduciendo los libros más destacados de Jakob Nielsen, Donald Norman, Steve Krug, Lou Rosenfeld y Peter Morville, Alan Cooper, entre otros. Y poco a poco podemos encontrar libros en español, como el de Toni Granollers, Jesús Lorés y José Juan Cañas sobre diseño de sistemas interactivos, el de Adrián Coutín sobre arquitectura de la información, el libro digital publicado por AIPO o el de quien escribe ahora (Mari-Carmen Marcos) sobre IPO en sistemas de recuperación de información.

Además, las revistas de biblioteconomía y documentación publican puntualmente artículos sobre usabilidad, arquitectura de la información e interacción persona-ordenador. El profesional de la información, Item, BiD y la Revista española de documentación científica son ejemplos de revistas que en los últimos años han incorporado este tema.

Algunas lecturas que recomendamos para adentrarse en este tema son:

• Coutín Domínguez, Adrián. (2002). Arquitectura de información para sitios web . Madrid: Anaya Multimedia, 2002.
• Garret, Jessi James. (2003). The elements of user experience: user-centered design for the web . Indianapolis: New Riders Press.
• Granollers, Toni; Lorés, Jesús; Cañas, José Juan. (2005). Diseño de sistemas interactivos centrados en el usuario . Barcelona: UOC.
• Lorés, Jesús (ed.). Introducción a la interacción persona-ordenador.http://griho.udl.es/ipo/ipo/libroe.html
• Marcos, Mari-Carmen. (2004). Interfaces de recuperación de información: conceptos, metáforas y visualización . Gijón: Trea.
• Nielsen, Jacob. (1999). Designing Web Usability: The Practice of Simplicity. Indianapolis : New Riders Publishing.
• Norman, Donald. (2005) El diseño emocional: Por qué nos gustan (o no) los objetos cotidianos . Barcelona: Paidós.
• Rosenfeld, Lou; Morville, Peter. (2006). Information Architecture for the Wolrd Wide Web . 3ª ed. O’Reilli.

5. Propuesta para el debate

¿Le gustaría conocer el mercado laboral para consultores de usabilidad y UX? Hay lo siguiente:

• Revisar diversas ofertas de empleo relacionadas con usabilidad. Hacer la búsqueda en portales como Infojobs y UXplora
• Hacer una lista de las funciones que mencionan que realizará la persona contratada, no importa que estén repetidas (es mejor que lo estén)
• Crear una lista de palabras final de manera que se eviten los sinónimos (por ejemplo si tenemos prototipar y hacer prototipos, escoger una de las dos formas y usarla cada vez que tengamos ese concepto). Es posible que tengamos 10 veces “prototipar” y 5 veces “evaluar” en la lista creada
• Generar una nube de tags con Wordle (o similar) que contenga al menos 18 palabras, preferiblemente en un solo idioma, pero puede haber términos que se entienden mejor en inglés y no se traducen, ej. UX

Plantilla para la valoración de las intervenciones en el debate:

• ¿Las palabras de la nube de tags están directamente relacionadas con la usabilidad y el UX?
• ¿Hay al menos 18 palabras en la nube de tags?
• ¿Piensas que el resultado es lógico y que las palabras más grandes son también las que previsiblemente tienes que ser las más frecuentes en este tipo de demandas de empleo?
• Valorar la intervención con el desplegable del foro entre una y cinco estrellas (de menor a mayor calidad).

---

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 1.20 Tecnologías de la WWW

José R. Quevedo

José R. Quevedo. Artículo 1.20. Tecnologías de la WWW. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.

---

Sumario

1. Una incompleta historia de Internet

1.1. Internet y sus orígenes: años 60

1.2. Creando estándares y protocolos: años 70

1.3. Maduración tecnológica y expansión: años 80

1.3.1 Los comienzos de Internet en España: años 80

1.4. El “boom” comercial: años 90

1.4.1 Años 90 en España

1.5. Siglo XXI: de la Web 2.0 al Internet de las cosas

1.5.1 Web 2.0

1.5.2 La época de los servicios y herramientas para todo

1.5.3 Internet para llevar

1.5.4 Internet de las cosas

2. Conceptos fundamentales de Internet

2.1. ¿Qué es Internet?

2.2. Hosts y redes

2.3. Direcciones de Internet: URL, IP y DNS

2.4. Cómo se envía la información en Internet

2.4.1 Comunicación y procesado de paquetes

2.4.2 Backbones

2.5. Estructura Cliente-Servidor

3. World Wide Web

3.1. Los orígenes de WWW

3.2. Principios y componentes de WWW

3.2.1 Un protocolo de red: HTTP

3.2.2 Un tipo de documento: HTML

3.2.3 Un sistema para acceder a la información: hipertexto

4. Estándares Web

4.1. HTML, CSS y más acrónimos raros. Estándares Web

4.2. ¿Y quién dicta esas normas?

4.2.1 World Wide Web Consortium (W3C)

4.2.2 Internet Engineering Task Force (IETF)

4.2.3 El proceso de crear un estándar Web

4.3. Beneficios de usar Estándares Web

5. El contexto digital: diseñar para la Web

5.1. El lienzo infinito

5.2. Navegación e hipertexto: una forma de construir conocimiento

7. Bibliografía

7. Propuestas para el debate: timeline de Internet.

---

1. Una incompleta historia de Internet

1.1. Internet y sus orígenes: años 60

Se suele establecer que las primeras referencias documentadas sobre interacciones sociales a través del trabajo en red (networking) proceden de una serie de memorandos escritos por J.C.R. Licklider, científico del Massachusetts Institute of Technology (MIT), en agosto de 1962. En estos documentos se discute un concepto denominado Galactic Network (Red Galáctica), una red interconectada globalmente a través de la cual cada uno puede acceder, desde cualquier lugar, a datos y programas. En síntesis, algo muy parecido a la Internet que conocemos en la actualidad.

A principios de los años 60, Licklider fue el principal responsable del programa de investigación en ordenadores de la Agencia de Investigación de Proyectos Avanzados en Defensa (DARPA – Defense Advanced Research Projects Agency) del Gobierno Norteamericano.

Por su parte, Leonard Kleinrock, científico de la Universidad de California en Los Ángeles (UCLA), en julio de 1961, estaba preparando una teoría matemática de conmutación de paquetes, un nuevo y eficaz método de envío de datos en redes de ordenadores.

Para saber más…

Vídeo: UCLA’s Leonard Kleinrock on packet switching, early Internet (VOS) Artículo: The Room Where the Internet Was Born

Lawrence G. Roberts, uno de los discípulos de Licklider en DARPA, y que ya era conocedor de la importancia del concepto del trabajo en red, se había interesado en las teorías de paquetes propuestas por Kleinrock. Para explorar este terreno, en 1965, Roberts conectó vía telefónica un ordenador TX-2 ubicado en Massachusetts con un Q-32 situado en Santa Mónica (California), creando así la primera red de ordenadores de área amplia (Wide Area Network) jamás construida. El resultado del experimento fue la constatación de que los ordenadores podían trabajar juntos correctamente, ejecutando programas y recuperando datos en la máquina remota, pero que el sistema telefónico de conmutación de circuitos existente era totalmente inadecuado para esta labor. La convicción de Kleinrock acerca de la necesidad de la conmutación de paquetes quedó confirmada tras esta experiencia.

Fig. 1. Ordenador TX-2 ubicado en el MIT. © 2004 Computer History Museum.

A finales de 1966, Roberts confeccionó un plan para seguir desarrollando el concepto de la red de ordenadores, creando para ello una red experimental en la DARPA: ARPANET y publicando, en 1967, un documento en el que se postulaban las bases de la misma. El propósito de esta primera red era explotar tecnologías experimentales de conexión enlazando centros de investigación entre sí y acercando recursos remotos como bases de datos y grandes sistemas a investigadores de todo el mundo.

Con el aumento de las tensiones provocadas por la Guerra Fría, la seguridad de los datos de ARPANET cobró una especial importancia. Por ello, se desarrolló un complejo sistema de descentralización de la información consistente en distribuir los datos por los distintos ordenadores conectados a la red, de manera que si en un ataque algún equipo se veía comprometido, se podía seguir accediendo a la información localizada en los otros equipos.

Para saber más…

Documental: And the Internet was Born: The Creation of the ARPANET (VOS)

Coincidió que tres entidades estaban realizando trabajos sobre redes seguras basadas en la conmutación de paquetes: el MIT (1961-67), RAND Corporation (1962-65) y el National Physical Laboratory (NPL) en Inglaterra (1964-67). Paul Baran, Donald Davies, Leonard Kleinrock y otros científicos habían estado investigando en paralelo y sin que supieran del trabajo de los demás. Baran fue el primero en publicar sus conclusiones en “On Data Communications Networks”. La palabra packet (paquete) fue adoptada a partir del trabajo del NPL.

Fig. 2. Detalle del documento de Paul Baran sobre Redes de Conmutación de Paquetes Segura . © 2004 Computer History Museum.

En Agosto de 1968, después de que Roberts y la comunidad de la DARPA hubieran refinado la estructura global y las especificaciones de ARPANET, DARPA lanzó una solicitud de presupuesto (RFQ – Request for quotation) para el desarrollo de uno de sus componentes clave: los procesadores de mensajes de interfaz (IMP – Interface Message Processors). El RFQ fue ganado en Diciembre de 1968 por la empresa de alta tecnología Bolt, Beranek y Newman (BBN).

Fig. 3. El Equipo de Desarrollo IMP (de izquierda a derecha): Truitt Thatch, Bill Bartell, Jim Geisman, Dave Walden, Frank Heart, Ben Barker, Marty Thrope, Will Crowther, Severo Ornstein, y Bob Kahn. © 1970 BBN Systems and Technologies.

En Septiembre de 1969, cuando BBN instaló el primer IMP en el Network Measurement Center (Centro de Medidas de Red) de la UCLA y quedó el primer ordenador conectado (host), éste pasó a ser el primer nodo de ARPANET.

El Instituto de Investigación de Standford (SRI) proporcionó un segundo nodo. Un mes más tarde, cuando el SRI fue conectado a ARPANET, el primer mensaje de host a host fue enviado desde el laboratorio de Leinrock al SRI.

Se añadieron dos nodos más, uno en la Universidad de California en Santa Bárbara (UCSB) y otro en la Universidad de Utah. Así, a finales de 1969, cuatro ordenadores host fueron conectados conjuntamente a la ARPANET inicial y se hizo realidad una embrionaria Internet.

Fig. 4. Diagrama inicial de 4 nodos de ARPANET. © 2004 Computer History Museum.

1.2. Creando estándares y protocolos: años 70

En diciembre de 1970 se finalizó el protocolo host a host inicial para ARPANET, llamado Protocolo de Control de Red (NCP – Network Control Protocol). Durante el periodo 1971-72, se completó la implementación del NCP en los nodos de ARPANET, fue a partir de entonces cuando los usuarios de la red pudieron comenzar a desarrollar aplicaciones.

En Octubre de 1972, se organizó una exitosa demostración de ARPANET en la International Computer Communication Conference. Esta fue la primera demostración pública de la nueva tecnología de red.

Fue también en 1972 cuando se introdujo la primera aplicación «estrella»: el correo electrónico. En Marzo, Ray Tomlinson, de BBN, escribió el software básico de envío-recepción de mensajes de correo electrónico, impulsado por la necesidad que tenían los desarrolladores de ARPANET de un mecanismo sencillo de coordinación. En Julio de 1972, Roberts escribió el primer programa de correo electrónico que permitía relacionar, leer selectivamente, almacenar, reenviar y responder a mensajes. Desde entonces, la aplicación de correo electrónico se convirtió en la más utilizada de la red durante algo más de una década.

Los años 70 transcurren con instituciones conectándose directamente o conectando otras redes a ARPANET y con los responsables desarrollando estándares y protocolos. Vinton Cerf y Bob Kahn publican ”Protocolo para Intercomunicación de Redes por paquetes” que especifica en detalle el diseño del Programa de Control de Transmisión (TCP).

En 1973 ARPANET desarrolla una Red Experimental de Protocolos de Voz (VoIP: voice over IP). Esta red utilizaba los protocolos de internet (IP) para enviar las señales de voz de forma digital, es decir, a través de paquetes de datos. En la actualidad, aplicaciones como Skype, WhatsApp o Google Hangouts hacen uso de la tecnología VoIP para permitir las llamadas a través de internet. En 1973 también se establece la primera conexión de redes entre EE.UU. y Reino Unido. Noruega también se a la Red durante estas fechas.

En los siguientes años se fundan dos grandes empresas de la historia de la informática: MicroSoft (1975) y Apple (1976).

Aunque llevaban trabajando en ello desde 1972, es en 1977 cuando Robert Metcalfe y David Boggs reciben una patente sobre la tecnología Ethernet, que definía las características del cableado y señales de las redes físicas. Tras pasar las pruebas iniciales y obtener su validación comercial, Ethernet se convierte en el estándar para las redes cableadas. Sus fundamentos se siguen utilizando en nuestros días.

En 1979 comienzan a aparecer entre los estudiantes estadounidenses una nueva forma de comunicarse: NewsGroups, precursores de los foros de discusión.

1.3. Maduración tecnológica y expansión: años 80

A principios de 1981, algo más de 200 ordenadores de diversas instituciones ya estaban conectados. DARPA publica un plan para aplicar a toda la red un nuevo protocolo: TCP/IP (Transfer Control Protocol / Internet Protocol), que sustituya al vetusto NCP de 1970. Son las primeras referencias de Internet, como “una serie de redes conectadas entre sí, específicamente aquellas que utilizan el protocolo TCP/IP”. El IBM PC es lanzado en agosto de este año.

En 1983 ARPANET se separa de la red militar, denominada a partir de entonces como MILNET, que la originó y se queda únicamente con 45 hosts. De este modo, ya sin fines militares, se puede considerar esta fecha como el nacimiento de Internet. Este mismo año, Paul Mockapetris crea el Sistema de Nombres de Dominios (DNS – Domain Name System), lo que facilita que ya no sea necesario conocer la ruta exacta para acceder a un sistema.

Que ARPANET distribuyera a bajo coste sus protocolos fue una de las claves del éxito para la expansión de Internet en esta época. TCP/IP y las capacidades de trabajo en red fueron incluidas de serie en el sistema operativo UNIX de BSD (Berkeley Software Distribution). BSD, que se encontraba ampliamente difundido entre las universidades, permitió que muchos equipos de trabajo se conectaran y se empezaran a crear una gran cantidad de servicios para Internet.

En 1983 también aparece la primera versión de Microsoft Windows, aunque su aparición en el mercado se retrasó hasta el 20 de noviembre de 1985.

Fig. 5. Escritorio de Windows 1.0. © 2013 Microsoft.

En 1985, quince años después de la primera propuesta, se termina el desarrollo del, aún vigente, Protocolo para la Transmisión de Ficheros (FTP) en Internet, basado en la arquitectura Cliente-Servidor. Se crea NSFNET (National Science Foundation’s Network), el reemplazo de ARPANET como conexión troncal backbone de Internet, estableciendo cinco centros de supercomputadoras para proveer una mayor capacidad de proceso y velocidad a la red. A finales de 1985, se alcanzaba la cifra de 2.000 hosts en Internet, todos interconectados en redes TCP/IP.

Para saber más…

Vídeo: Explaining FTP for Dummies

A principios de 1987 se superan los 10.000 hosts conectados. La gestión de la red empieza a ser un problema importante y se evidencia la necesidad de un protocolo que permita la administración remota de los routers: aparece SNMP (Simple Network Management Protocol).

En 1988 el backbone NSFNET se termina de actualizar con una mayor velocidad en sus redes. Internet se empieza a expandir internacionalmente con la conexión de Canadá, Dinamarca, Finlandia, Francia, Islandia, Noruega y Suecia.

Fig. 6. Mapa de la red troncal “backbone” de NSFNET en 1988. © 2004 Computer History Museum.

Para saber más…

Vídeo: Doug Van Houweling: Building the NSFNet (VOS)

En 1988 el primer virus gusano, Morris, ataca 6.000 de los 60.000 hosts de Internet. ARPANET se prepara para ataques similares en el futuro.

En 1989, MCI Mail, OnTyme, Telemail y CompuServe empiezan ofertar sus servicios comerciales de correo electrónico. Es el tímido comienzo de los servicios comerciales en Internet en EE.UU. En el CERN de Suiza, Tim Berners-Lee, se enfrenta al problema del cambio constante de la información en los proyectos. En lugar de una organización jerárquica, propone un sistema de hipertexto que se ejecutará a través de Internet y en diferentes sistemas operativos. Nace la World Wide Web.

1.3.1 Los comienzos de Internet en España: años 80

Aunque en EE.UU. los orígenes de Internet estuvieron vinculados a programas militares, en España el contexto siempre estuvo relacionado con la investigación y la ciencia desde los centros universitarios.

En 1984 se pone en marcha el Plan Electrónico e Informático Nacional y aparece la primera iniciativa, la red FAENET (Física de Altas Energías Network), colaborando en labores de investigación con el CERN.

En 1985, FAENET interconecta 6 centros universitarios. Un año más tarde, Telefónica lanza Ibertex, una aplicación interactiva que permitía la consulta de contenidos en un terminal; era algo similar a un primitivo y lento teletexto por teléfono.

Fig. 7. Una página de Ibertext. © 2010 Habisoft.com

Para saber más… vídeo: Anuncio publicitario de Ibertex de Telefónica en 1990

En 1988 nace el Programa IRIS (Interconexión de Recursos InformáticoS), que buscaba coordinar y potenciar la comunicación de los científicos entre diversos centros y grupos de trabajo, financiando o facilitando los recursos necesarios para que las instituciones partícipes se conectaran a la red.

1.4. El “boom” comercial: años 90

Internet pasa a estar a cargo de la NSF (National Science Foundation). En 1990 desaparecía oficialmente la organización ARPANET. En 20 años, Internet había crecido de 4 a unos 300.000 hosts interconectados. Se conectan países como Argentina, Austria, Bélgica, Brasil, Chile, Grecia, India, Irlanda, Corea del Sur, España y Suiza.

Internet comenzó a saturarse y, para evitar el colapso, se restringieron los accesos. Eran años de incertidumbre, nadie había ideado la red para los fines y las dimensiones que se estaban alcanzando. Para ilustrar la situación que se vivía a principios de los años 90, InterNIC, el organismo encargado de los registros de nombres de dominios en esa época, estaba formado únicamente por dos personas que trabajaban a tiempo completo y una tercera a tiempo parcial; las solicitudes de registro habían aumentado de 300 a 1300 en un año y no existían criterios eficaces cuando varias empresas solicitaban un mismo nombre de dominio a la vez. Sus responsables manifestaban que aquello les superaba y carecían de la capacidad necesaria para poder gestionarlo adecuadamente.

En 1992 se superaban las 7.500 redes y el millón de hosts conectados.

A principios de 1993 había alrededor de 50 servidores. Este mismo año apareció NCSA Mosaic, el primer navegador con una interfaz gráfica intuitiva y que logró mostrar la dimensión multimedia de la Web. Funcionaba en X Windows, que era una plataforma bastante extendida entre la comunidad científica. En abril el tráfico de la WWW era el 0,1% del total de Internet. El CERN declaraba la WWW como tecnología de acceso gratuito. En septiembre ya había versiones de Mosaic para PC y Macintosh, aumentando exponencialmente su popularidad: gracias al navegador, el crecimiento anual de Internet fue de un contundente 341.634%. A finales de 1993, el tráfico Web alcanzaba el 1% de todo el tráfico de Internet y había algo más de 500 servidores. El crecimiento de la World Wide Web comenzó a ser vertiginoso.

Fig. 8. Interfaz del navegador NCSA Mosaic. © Wikipedia

En el año 1994 nace una empresa: Netscape, y con ella un nuevo navegador, Navigator, que superará el éxito de Mosaic. Para intentar poner algo de orden en la inmensa cantidad de contenido generado en la red aparecen los primeros directorios de búsqueda: Yahoo! ve la luz. Pizza Hut permite realizar pedidos electrónicos de pizza.

En julio de 1994, Jeff Bezos funda cadabra.com una de las primeras librerías en línea desde la que se podían comprar títulos mediante correo electrónico, poco después se renombraría como Amazon, uno de los líderes actuales en comercio electrónico y servicios de computación en la nube (cloud computing).

Fig. 9. La página de inicio de una de las primeras versiones de Amazon.com

En octubre de 1994 se crea World Wide Web Consortium (W3C), una comunidad internacional cuyo objetivo era, y sigue siendo, “guiar la WWW hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de las tecnologías Web”.

También en 1994 comienzan a aparecer las primeras bitácoras web o blogs, originalmente eran publicaciones personales y periódicas, que se caracterizaban por estar dispuestas en un orden cronológico inverso, es decir, de las más recientes a las más antiguas.

El año del gran “boom” de Internet es 1995. Puede ser considerado como el despegue definitivo de la Internet comercial. Desde ese momento, el crecimiento de la red supera todas las expectativas. En este año la Web se convierte en el servicio más popular de Internet, desbancando al correo electrónico. Sólo en EE.UU. ya había conectados 4 millones de ordenadores.

En 1995 se publica el estándar de la tecnología para redes locales cableadas más extendido, utilizado y veloz: Fast Ethernet (IEEE 802.11u), que permitía velocidades en la red local de 100 Mbps, hasta que fue superado, y paulatinamente reemplazado, por la versión Gigabit Ethernet en 1998.

En los primeros meses de 1995 se funda AltaVista, el que sería uno de los motores de búsqueda de internet más utilizados de la época, hasta la llegada del buscador de Google.

En septiembre de 1995 el empresario Pierre Omidyar crea eBay, uno de los primeros sitios web dedicados a la subasta de productos a través de Internet.

En 1996 se contabilizaban diez millones de ordenadores conectados y 45 millones de usuarios. Este mismo año, Sabeer Bhatia y Jack Smith fundan Hotmail, uno de los primeros, y más utilizados en su tiempo, servicios de correo electrónico basados en web (webmail); en diciembre de 1997 la empresa es vendida a Microsoft. Desde entonces ha pasado por diferentes denominaciones: MSN Hotmail, Windows Live Hotmail y Outlook.com.

En 1997 había más de 650.000 servidores conectados. Empiezan a incrementarse el número de servicios que funcionan en la red; banca, televisión, radio, comercio electrónico, etc. En enero de este año, el W3C publica la Recomendación HTML 3.2, ampliando y consolidando las capacidades del lenguaje de marcado web.

También en 1997, se lanza la primera versión del estándar de conexión inalámbrica (Wi-Fi): IEEE 802.11, con una velocidad de 2 Mbit/s. En 1999 se actualiza (802.11b) con velocidades de hasta 11 Mbit/s y empieza a hacerse popular.

En septiembre de 1998, Larry Page y Serguéi Brin, dos jóvenes estudiantes de Ciencias de la Computación en la Universidad de Stanford, fundan Google Inc., cuyo servicio estrella era su buscador web: Google Search. En los años posteriores la compañía se convertirá en un gigante tecnológico con decenas de productos y servicios. En agosto de 2015, sus creadores deciden crear Alphabet Inc., un conglomerado de empresas, Google Inc. entre sus subsidiarias, que trabajan en sectores tan diversos como internet, biotecnología, salud, telecomunicaciones, domótica, inversión y capital de riesgo, etc.

En 1998 se funda PayPal, una de las empresas pioneras en el servicio de transferencias de dinero y pagos online (e-payments). En 2002 es comprada por eBay, transformada en una empresa independiente de nuevo en 2014 y fusionada con Xoom Corporation en julio de 2015.

A finales de los años 90, el auge de las empresas y los servicios directamente relacionados con Internet es impresionante, son las designadas habitualmente como empresas “punto com”. Muchos ven una nueva economía en Internet, por lo que se apresuran a ocupar una posición e invertir en la red. Es un valor al alza. Al comienzo de la siguiente década, las expectativas y viabilidad de estas empresas, frecuentemente sobreestimadas, empezaron a caer en picado, provocando cierres, despidos y quiebras tan espectaculares como los ascensos que habían experimentado poco tiempo antes. Este fenómeno de fuerte economía especulativa es conocido como la burbuja de las “punto com”.

La televisión, el teléfono, la radio e, incluso, la electricidad necesitaron décadas enteras para ser adoptadas como tecnologías de uso masivo. Internet, no.

Internet es considerado el mayor invento desde la imprenta.

1.4.1 Años 90 en España

A finales de 1990 había unos 1.000 ordenadores españoles conectados y registrados bajo el dominio “.es”. A partir de 1990 el Programa IRIS inicia una nueva etapa y cambia su nombre a RedIRIS, síntoma del cambio de orientación realizado. Se empiezan a adoptar ampliamente los protocolos de conexión TCP/IP, se invierte en I+D y se actualizan los equipos informáticos. RedIRIS, al igual que otras redes académicas, pone en marcha un servicio de interconexión de redes de área local IP con acceso a Internet: SIDERAL (Servicio Internet de RedIRIS). A mediados del año 1990 tuvo lugar la primera conexión plena desde España a Internet.

En 1992 aparece Goya Servicios Telemáticos, el primer primer proveedor comercial de servicios de Internet (ISP) español y RedIRIS conecta a prácticamente todas las universidades españolas. Sus estudiantes comienzan a tener conectividad con Internet.

En 1993, Jordi Adell es uno de los pioneros de Internet en España, montando en la Universidad Jaime I el primer servidor Web español.

En 1994 los ordenadores conectados rondan los 20.000 y un centenar de organismos cuentan con acceso a Internet, aunque la la conexión sigue siendo cara y lenta. Aparece el segundo ISP español: Servicom.

En 1995, ya existen en España más de 10 proveedores comerciales de Internet. A finales de año, serán más de 30. Ibertex había alcanzado unos 400.000 usuarios. En diciembre de este año, Telefónica sentencia de muerte a Ibertex lanzando comercialmente Infovía, un paquete cerrado y personalizado de servicios que, paradójicamente, no permitía el acceso pleno a la Internet mundial. Los usuarios que querían acceder a Internet “de verdad” debían acudir a alguno de los proveedores de acceso a Internet de la época, como Goya, Sarenet, Servicom, etc. A pesar de sus limitaciones, Infovía es un éxito debido, en parte, a su bajo coste de conexión: 139 ptas/hora (106 ptas/hora en horario nocturno). En marzo, según una encuesta realizada por la Comisión Europea, el 55% de los españoles manifiesta que no había oído hablar nunca de Internet.

En 1998, hay 200.000 ordenadores conectados, el año acabará con 300.000. Se liberaliza el sector de las Telecomunicaciones.

En 1999 se produce un hecho clave para la popularización de Internet en España, el Ministerio de Fomento y Telefónica llegan a un acuerdo para aprobar la tarifa plana. Utilizará la tecnología ADSL, se implantará en un período de tres años y su coste no superará las 6.000 ptas: será la llegada de la “banda ancha” a los hogares españoles con una velocidad de conexión y precio que empiezan a ser aceptables. El 17 de marzo Telefónica lanza el portal TERRA, experimentará un crecimiento tan vertiginoso que acabará saliendo a bolsa en octubre de ese mismo año para, posteriormente, seguir una suerte similar a la de otras “punto com” de la época.

1.5. Siglo XXI: de la Web 2.0 al Internet de las cosas

Según Internet World Stats, a finales de 2000 el número de usuarios de Internet era, aproximadamente, de 361 millones en todo el Mundo.

1.5.1 Web 2.0

El término Web 2.0 fue utilizado por primera vez en 1999 por la diseñadora de experiencia de usuario, Darcy DiNucci, en su artículo “Fragmented future”. En él expone que la Web había pasado de un prototipo embrionario (Web 1.0) a algo más maduro, más compatible con diversos dispositivos y plataformas, con mejores tecnologías que permitían una interacción con el usuario más enriquecedora. El término se puso de moda a partir de que Tim O’Reilly, fundador de la editorial O’Reilly Media, lo utilizara en una conferencia sobre Web 2.0 en 2004.

La idea que subyace sobre este concepto es que la Web 1.0 estaba pensada para conectar máquinas y la Web 2.0 para conectar a las personas. Una Web centrada en los usuarios, orientada a la colaboración, la interacción y las redes sociales. Era un intento de dar cabida a esa dimensión social que la Web estaba adquiriendo.

El concepto tenía mucho de mercadotecnia y, en realidad, no era más que la evolución lógica de la maduración de las tecnologías Web. Tim Berners-Lee, creador de WWW, afirmaba que no existía tal diferencia entre Web 1.0 y 2.0: la interactividad y la colaboración social era la esencia de la Web desde su nacimiento.

1.5.2 La época de los servicios y herramientas para todo

En enero de 2001, Jimmy Wales y Larry Sanger crean Wikipedia, la que acabaría convirtiéndose en la mayor enciclopedia en línea. Wikipedia es una obra en línea de consulta libre, redactada y editada por voluntarios de todo el Mundo y con artículos en casi 300 idiomas. Actualmente, es una de las 10 páginas más visitadas del planeta.

En octubre de este mismo año, la empresa NTT DoCoMo comienza a ofrecer comercialmente en Japón los servicios de la tercera generación de la tecnología de telecomunicaciones móviles (comúnmente conocida como 3G), lo que supone un fuerte impulso para el desarrollo de los servicios de internet en dispositivos móviles.

En 2003 aparece Skype, un servicio que logra democratizar y popularizar la tecnología de vídeo y voz sobre internet (VoIP). Desde entonces, la empresa ha pasado por diversos dueños como eBay (2005) o Microsoft (2011).

En 28 de abril de 2003, Apple lanza iTunes Music Store, una tienda en línea con canciones en formato digital. Desde su lanzamiento ha ido ganando popularidad hasta convertirse en el mayor vendedor de música del Mundo. En la actualidad ha pasado a denominarse iTunes Store y su catálogo se ha ido ampliando con películas, series y aplicaciones.

En 2003, Mark Zuckerberg, un estudiante de la Universidad de Harvard, lanzó un sitio web llamado Facemash que contenía un amplio listado con nombres y fotos de los estudiantes de dicha universidad, rápidamente se hizo viral y comprendió la necesidad de crear una comunidad online donde sus integrantes compartieran sus preferencias y sentimientos. En febrero de 2004, Mark Zuckerberg, junto a Eduardo Saverin, Chris Hughes y Dustin Moskovitz fundaron Facebook, una de las redes sociales más populares de nuestros días.

En 2004, la empresa canadiense Ludicorp crea Flickr, un servicio web para alojar y compartir fotos y otras imágenes. En marzo de 2005 es adquirida por Yahoo!. El sitio ganará bastante popularidad en los años siguientes y la irá perdiendo en los últimos años ante la fuerte competencia de otros servicios con características similares.

En abril de 2004, Google lanza Gmail, un novedoso servicio de correo electrónico con una interfaz orientada hacia las búsquedas, donde los correos electrónicos se organizaban mediante “conversaciones” y con una enorme capacidad de almacenamiento: 1GB frente a los 2 o 4 MB que ofrecían sus competidores en esa época. Al principio apareció como una beta privada a la que sólo se podía acceder mediante invitación, hasta que se abrió para todo el público en febrero de 2007.

En febrero de 2005, Chad Hurley, Steve Chen y Jawed Karim, antiguos empleados de PayPal, crean YouTube, un servicio web en el se pueden ver, subir y compartir vídeos. Actualmente es el sitio web de su tipo más utilizado en internet y uno de los 3 más visitados del Mundo. La empresa fue comprada por Google en 2006. En 2014 YouTube afirmó que cada minuto se subían 300 horas de nuevos vídeos, tres veces más que el año anterior. Este año se alcanzan los 1.000 millones de usuarios conectados a Internet.

En marzo de 2006, Jack Dorsey, Evan Williams, Biz Stone y Noah Glass crean Twitter, una red social famosa por limitar los mensajes de sus usuarios a 140 caracteres. Lo que en un principio era una limitación técnica, ya que basaban el servicio en la tecnología SMS (Short Message Service), pronto ganó muchos adeptos por lo directos y concretos que eran estos mensajes. En mayo de 2015 esta red contaba con 332 millones de usuarios activos.

A finales de 2006, según fuentes de NetCraft y Internet Live Stats, existían 85,5 millones de sitios web y 1.160 millones de usuarios de internet.

En junio de 2007, Apple presenta su teléfono: iPhone. Aún con sus carencias iniciales, el dispositivo supuso toda una revolución al basar su interfaz en una pantalla multi-touch que permitió, por fin, una forma eficaz de navegar por la web desde un dispositivo móvil.

Para saber más…

Vídeo: Apple’s iPhone Introduction – MacWorld 2007 (1ª parte) y 2ª parte

Este mismo año el desarrollador web David Karp funda Tumblr, una red social y plataforma web de microblogging. Desde 2013 pertenece a Yahoo!

En 2008, Drew Houston, tras olvidar en repetidas ocasiones su lápiz de memoria USB durante su época de estudiante en el Massachusetts Institute of Technology (MIT), empieza a perfilar la idea de un servicio web donde poder alojar sus archivos, tenerlos disponibles y actualizados siempre que quisiera. Houston, junto a Arash Ferdowsi, lanza Dropbox este año. A finales de 2008, según fuentes de NetCraft e Internet Live Stats, se contabilizan 172.338.726 sitios web y 1.571.601.630 usuarios de internet.

En 2009, los programadores Jan Koum y Brian Acton fundan WhatsApp, una aplicación de mensajería entre dispositivos móviles. En febrero de 2014 es adquirida por Facebook Inc. En febrero de 2016, se estimaban 1.000 millones de usuarios de WhatsApp, lo que la convierte en la aplicación de mensajería más popular del Mundo.

En 2010 se alcanzan los 2.000 millones de usuarios de internet.

En 2011, según fuentes de NetCraft e Internet Live Stats, existían 346 millones de sitios web y casi 2.283 millones de usuarios de internet.

En abril de 2012, Facebook adquiere Instagram, una popular red social de fotografías.

En 2014, se superan los 3.000 millones de personas conectadas a la red. El 12 de marzo de este mismo año, la World Wide Web cumple 25 años. Con motivo de dicha celebración su creador, Tim Berners-Lee, habla sobre los retos pendientes: “A medida que la Web cumple 25 años se evidencia que hacen falta más datos para realzar y defenderla. La comunidad que formamos es tan grande como el mundo; luchamos con amenazas de seguridad cada vez más reales, así como de vigilancia, privacidad, infraestructuras abiertas, neutralidad de la red y protección de contenidos entre otros retos. Creo que es vital que se pase a la acción, que se realce y defienda la web”.

En junio de 2016, Microsoft anuncia la compra de LinkedIn, la mayor red social orientada a empresas, negocios y empleo. El 25 de julio de 2016, tras años de constantes pérdidas económicas, se anuncia la venta de Yahoo! al gigante de las telecomunicaciones norteamericano Verizon Communications. Unos meses más tarde sale a la luz que, al menos, 500 millones de cuentas Yahoo! han sido hackeadas, esta brecha de seguridad podría convertirse en la más grave de la historia, ya que superaría a la que hasta ahora ostentaba el récord, la de MySpace, que afectó a 427 millones de cuentas ese mismo año.

En septiembre de 2016, Google celebra su 18 cumpleaños e Internet Live Stats contabilizaba 3.459 millones de usuarios de internet y 1.082 millones de sitios web en el mundo.

En la última década Internet ha seguido creciendo hasta límites insospechados, y lo seguirá haciendo. Casi el 50% de la población mundial tiene acceso a Internet (en 1995 era menos del 1%), esta cifra sube hasta el 78% en los países desarrollados, y es un hecho que ha favorecido la comunicación y el intercambio de información en el mundo actual.

Como en su momento lo fue el teléfono, la radio o la televisión, Internet es uno de los pilares actuales de la Sociedad de la Información, formando parte esencial de las denominadas Tecnologías de la Información y la Comunicación (TIC). Internet está integrada en nuestra sociedad y ha modificado muchos aspectos de nuestra vida: ha distribuido y permitido un mayor acceso a la información y el conocimiento (aunque no siempre sea de calidad) y ha agilizado los contactos sociales y comerciales como nunca antes hubiéramos pensado. Internet ha adquirido una dimensión social que ha superado a la tecnológica.

Para saber más…

En esta entrevista de 1988, Isaac Asimov aportaba su visión sobre el impacto que tendría internet en la educación y en nuestras vidas: Vídeo: Isaac Asimov previendo el impacto de Internet

1.5.3 Internet para llevar

Resulta interesante observar cómo ha ido cambiando la forma en la que las personas se conectan a Internet. El acceso a Internet se ha ido democratizando y extendiendo (la tecnología ha mejorado y el coste se ha abaratado) y las conexiones desde los centros académicos o desde el trabajo han decrecido. Sin embargo, en los últimos 10 años, el porcentaje de conexiones desde casa o en la calle se ha disparado gracias a la irrupción de los dispositivos móviles. Los dispositivos móviles han eliminado la dependencia del PC como punto de conexión, Internet y sus servicios van con nosotros, es la integración de los dispositivos como algo que forma parte del entorno de la persona: es la Computación Ubicua (ubicomp).

Un paso más allá de esta integración es el hecho de que el usuario pueda interactuar de manera natural con sus dispositivos y realizar cualquier tarea diaria de manera completamente transparente a ellos. La tecnología está omnipresente en la vida cotidiana ofreciendo la interacción más natural y con menores fricciones. En este aspecto, la tendencia más reciente es la denominada “tecnología vestible” (Wearable technology), materializada en un sinfín de dispositivos (como pulseras, relojes, ropa tecnológica, gafas “inteligentes”, etc.) que registran diversos parámetros personales o aumentan las capacidades para realizar determinadas tareas, buscando un fin lúdico (gamificación) y social, y valiéndose de Internet para ello.

1.5.4 Internet de las cosas

El concepto de Internet de las cosas (IoT – Internet of Things) fue propuesto en 1999 por Kevin Ashton, cofundador del Auto-ID Center en el Massachusetts Institute of Technology (MIT), donde realizaba investigaciones en el campo de los sensores y la identificación por radiofrecuencia (RFID – Radio Frequency IDentification)

El “Internet de las cosas” busca que Internet trascienda del ordenador y del dispositivo móvil y que los objetos cotidianos también puedan interconectarse utilizando diversas tecnologías, convirtiéndolos en objetos “inteligentes” con capacidades como la automatización, la gestión o el control de sistemas en áreas tan diversas como la vigilancia medioambiental, sistemas médicos y de salud, domótica, sistemas de compra inteligentes, control de tráfico y transportes, etc.

Fig. 10. Notas sobre IoT. Ponencia de Josh Clark, experto en tecnología móvil, en An Event Apart Boston. © 2015 Gary Schroeder

2. Conceptos fundamentales de Internet

2.1. ¿Qué es Internet?

La palabra internet proviene de la abreviatura de Interconnected Networks, es decir, redes interconectadas: red de redes.

Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan unos protocolos comunes (TCP/IP), lo que garantiza que las redes físicas heterogéneas que la componen sean capaces de comunicarse entre sí, con alcance mundial.

2.2. Hosts y redes

Una red consiste en un grupo de ordenadores conectados entre sí con la finalidad de compartir -proveer y utilizar- servicios y recursos. A estos ordenadores conectados entre sí también se les denomina terminales o hosts.

Todos los terminales han de tener un lenguaje común, cumplir unas normas, para que puedan entenderse entre ellos. Al conjunto de esas normas se les llama protocolos.

Tradicionalmente, en función de su extensión, se pueden establecer tres tipos de redes principales:

• Redes locales (LAN – Local Area Network). Son redes que conectan ordenadores que se utilizan en entornos pequeños, generalmente, dentro de un mismo edificio.
• Redes metropolitanas (MAN – Metropolitan Area Network). Por ejemplo, las utilizadas en ordenadores distribuidos en edificios diferentes, pero dentro de una misma ciudad.
• Redes de área extensa (WAN – Wide Area Network). Las que se utilizan en ordenadores ubicados en ciudades distintas, incluso, en diferentes países o continentes.

Según esta clasificación, Internet pertenecería al tercer tipo de redes aunque, a su vez, también contiene a los otros tipos de redes descritos.

2.3. Direcciones de Internet: URL, IP y DNS

Cada dispositivo que utiliza Internet tiene su propio nombre y dirección única. Una vez que se conoce la dirección electrónica de alguien, se le puede enviar un correo, transferir archivos, mantener una conversación, etc. El sistema de direcciones de Internet se denomina URL (Uniform Resource Locator).

Para que dos dispositivos en red puedan “dialogar”, debe existir una forma de identificar a cada uno del resto del mundo. Esta identificación la proporciona la dirección IP (Internet Protocol). Una dirección IP es como una “llave de acceso” que sirve para identificar de forma única a un dispositivo conectado a Internet.

Una dirección IP puede ser representada de dos formas:

• Dirección numérica. Es un conjunto de cuatro números (tripletes), con valores comprendidos entre 0 y 255, separados por puntos. Por ejemplo, 91.198.174.192. Para evitar conflictos y errores, la dirección IP es única e irrepetible. Los tripletes se asignan de forma jerárquica, indicando las redes donde se encuentra conectado el dispositivo y la identificación individual del mismo.
• Dirección por nombre. Dado que es tedioso el aprendizaje de estos números para acceder a un dispositivo en la red, existe una jerarquía paralela de nombres asociada a la de los números. Es lo que se conoce como Servicio de Nombres de Dominio (DNS – Domain Name Service). DNS es, fundamentalmente, una gran base de datos, que utiliza la estructura Cliente-Servidor, distribuida entre los dispositivos de la red. El servicio DNS es capaz de “resolver” -consultar y averiguar- qué dirección IP numérica, entendida por las máquinas, corresponde a un nombre de dominio, con significado para las personas.

La World Wide Web utiliza el servicio DNS para lograr que el acceso y la navegación entre las páginas Web sea intuitivo y cómodo para los usuarios de Internet. Por supuesto, se podría acceder a los sitios Web mediante su dirección IP, pero el recordar esa cantidad de números arbitrarios no sería fácil para la mayoría de nosotros, especialmente, dada la inmensa cantidad de direcciones que podemos manejar en Internet. Es mucho más sencillo el recordar un sitio Web por un nombre que se identifique con su contenido. Por ejemplo, un usuario no tiene que conocer que la dirección IP numérica 91.198.174.192 corresponde a la página de Wikimedia, simplemente deberá escribir en su navegador la dirección http://www.wikimedia.org y el servicio DNS se encargará de encontrar el recurso solicitado.

Para saber más…

Vídeo: DNS Explained (VOS) Guía: Domain Name System (Complicated technology explained in simple terms)

2.4. Cómo se envía la información en Internet

Existen ordenadores especializados en encaminar sus mensajes a su destino, son los denominados enrutadores o routers.

2.4.1 Comunicación y procesado de paquetes

El proceso que sigue una comunicación desde nuestro dispositivo al destino es, aproximadamente, el siguiente:

• Cuando nos conectamos al proveedor de servicios de Internet (ISP), por ejemplo Movistar, se nos asigna una dirección IP temporal. Esto quiere decir que la próxima vez que conectemos podemos tener una dirección distinta (IP dinámica).
• Al enviar un mensaje, o al solicitar conectar con otro dispositivo, nuestro equipo verifica nuestra dirección IP y consulta con el servidor de nombres (DNS) la del destinatario.
• El mensaje es dividido en pequeñas partes (los conocidos como “paquetes”), y cada una de ellas es identificada con su dirección IP y con la del destinatario.
• Usando las líneas que nos conectan con Internet, estos paquetes son enviados desde nuestro dispositivo al sistema del proveedor.
• El proveedor comprueba la dirección a la que van dirigidos y, dependiendo del estado de la red, la distancia, el destino y la empresa con la que haya contratado el acceso el proveedor, los paquetes del mensaje irán pasando de router en router hasta llegar a su destino.
• Una vez recibidos los paquetes en el dispositivo-destino, éste los unirá ordenadamente, reconstruyendo el mensaje. Si algún paquete se ha perdido, el dispositivo-destino lo solicitará al origen de nuevo, que volverá a enviarlo siguiendo el mismo proceso.

2.4.2 Backbones

El camino recorrido por el mensaje se debe a la propia arquitectura de Internet. El proveedor está conectado a una red, y el ordenador con el que quiere conectar, casi siempre, estará conectado a una red distinta. Estas dos redes no están conectadas entre sí, para poder comunicarse utilizan a su vez otras redes.

La mayoría de las redes importantes están conectadas por líneas de muy alta velocidad, llamadas backbones, líneas troncales o “esqueletos”. Son líneas que recorren países enteros transmitiendo mensajes entre las redes con las que conecta. A veces, puede que nuestro mensaje tenga que atravesar varios de estos backbones.

2.5. Estructura Cliente-Servidor

En esencia, Internet es una estructura Cliente-Servidor gigante. La idea básica de un sistema Cliente-Servidor es que debe existir un sitio donde se centraliza la información que se desea distribuir, bajo demanda, a un conjunto de dispositivos conectados.

Un servidor es cualquier cosa que tenga un recurso que pueda ser compartido. Un cliente es cualquier otra entidad que quiera tener acceso a un servidor particular. Mientras el servidor es un recurso disponible permanentemente, el cliente es libre de desconectarse después de haber sido servido.

El objetivo de cualquier red es permitir que dos dispositivos se conecten y “dialoguen” entre ellos. Una vez que los dos se han encontrado pueden mantener una conversación en ambos sentidos. Los programas que habitualmente utilizamos en nuestras casas son programas clientes que hacen peticiones a los programas servidores que se encuentran repartidos por Internet.

Buscando una analogía cotidiana de la estructura Cliente-Servidor, podría ser la relación existente entre el camarero y el cliente en una cafetería. El camarero está situado detrás de la barra esperando las peticiones. Cuando llega un cliente, camarero y cliente se reconocen entre sí y se establece una comunicación. Mediante esta comunicación, el cliente hace la petición y el camarero la sirve. Al terminar se despiden.

3. World Wide Web

El World Wide Web, WWW, W3 o, simplemente, como se le denomina más a menudo, Web, es un sistema de intercambio de información multimedia desarrollado por el CERN (Centro Europeo de Investigación Nuclear) de Ginebra (Suiza) en 1989. La experiencia inicial, basada en el intercambio de documentación interna de proyectos, fue tan positiva que al poco tiempo de su creación se comenzó a difundir a otras entidades con el apoyo de Internet.

El servicio WWW está tan extendido que popularmente es confundido con la propia Internet.

3.1. Los orígenes de WWW

La World Wide Web fue inventada en 1989 por Tim Berners-Lee, informático teórico en el Centro Europeo de Investigación Nuclear. Era un sistema basado en Internet, concebido originalmente para compartir información a través de hipertextos.

3.2. Principios y componentes de WWW

Los documentos necesitaban un formato que fuera adecuado para su misión. Teniendo en cuenta que debían ser leídos por todo tipo de dispositivos, tanto el lenguaje de intercambio (HTML), como el protocolo de red (HTTP) se diseñaron para ser realmente simples.

WWW basa su diseño y funcionamiento en varios puntos clave:

3.2.1 Un protocolo de red: HTTP

Empleado por los servidores WWW. HTTP (HyperText Transfer Protocol) es un protocolo de transmisión de datos entre Clientes-Servidores. El cliente puede ser, por ejemplo, un navegador. El servidor es el encargado de almacenar o crear recursos como documentos web, imágenes, etc. A través de instrucciones simples el cliente indica al servidor qué acciones realizar para recibir o entregar datos. Opera sobre conexiones TCP/IP y se basa en transferencias de texto, aunque realizadas en modo binario.

3.2.2 Un tipo de documento: HTML

Los documentos Web están redactados conforme a un formato denominado HTML (HyperText Markup Language), que permite incluir elementos de texto, gráficos o, incluso, multimedia. HTML se utiliza para indicar a los navegadores cómo estructurar y mostrar las páginas Web.

HTML forma parte de los Estándares Web definidos por el W3C. El código HTML se basa en simples reglas de etiquetado que permiten especificar la estructura de los documentos, la jerarquía y semántica de sus elementos, especificar los hipervínculos, las imágenes, los elementos multimedia, etc. Los navegadores son capaces de interpretar este código y convertirlo (proceso de renderizado) en lo que el usuario finalmente ve como una página Web.

Para saber más…

Para profundizar, a un nivel técnico, sobre cómo funciona un navegador, Ryan Seddon ha compartido la charla que realizó con motivo de la conferencia JSConfEU 2015: So how does the browser actually render a website (EN)

3.2.3 Un sistema para acceder a la información: hipertexto

Una parte fundamental de HTML es su capacidad hipertextual. El concepto en sí no es nuevo. Las referencias a otros documentos, en forma de notas al margen, existían ya en los manuscritos medievales.

Fig. 11. Detalle de las notas al margen de una edición incunable de Santo Tomás de Aquino. In duodecim libros Metaphysicorum Aristotelis expositio (Venecia: Simon Bevilaqua para Alessandro Calcedonius, 20 de diciembre 1493). © Provenance Online Project

En 1945, el Director de la Oficina de Desarrollo e Investigación Científica de EE.UU., Vannevar Bush, escribió en el artículo “As We May Think” su preocupación por la ingente cantidad de información que existía y estaba siendo generada, y el poco tiempo y los ineficientes sistemas que había para encontrarla. Así, y basándose en la tecnología existente en aquel entonces, describió un dispositivo personal, al que llamó Memex, y que imaginaba como un suplemento íntimo a su memoria. Este aparato permitiría a cada individuo almacenar su información en microfilmes, consultarlos rápidamente y, lo que es más importante, crear vínculos entre unos documentos y otros, de modo que durante la lectura de un documento se recordara al lector qué documentos contenían información relacionada. Era una visión de lo que ocurriría 45 años después.

En los años 60, Douglas Engelbart, mientras trabajaba en el Stanford Research Institute (SRI), propuso NLS (oNLine System), un entorno de trabajo por ordenador con un sistema para almacenar publicaciones, con catálogos e índices para facilitar la búsqueda, y con reglas establecidas para citar documentos, de modo que fuera más fácil para los lectores acceder a los documentos referenciados. Era un entorno con teclado, pantalla, ratón e impresora, con posibilidad de teleconferencia y correo electrónico a través de una red de ordenadores para una rápida comunicación entre los profesionales. Tenía las herramientas básicas de composición, estudio, organización y modificación de la información. Los ficheros se guardaban jerárquicamente para su mejor organización. Se trabajaba con los documentos en modo multiventana para ver varios documentos a la vez, y se podían copiar objetos seleccionados de una ventana a otra.

Para saber más…

Douglas Englebart demuestra NLS, que utilizaba el ratón como elemento de interacción con el ordenador. Hizo una presentación mítica denominada “The mother of all demos” donde explica sus descubrimientos tecnológicos. Un fragmento de dicha presentación: Doug Engelbart – NLS Demo Clip – 1968 (VOS)

El término hipertexto (también denominado como enlace, hiperenlace, link o vínculo) fue acuñado por primera vez en 1965 por Ted Nelson, en su artículo “A File Structure for the Complex, the Changing, and the Indeterminate”. Nelson ideó un modelo para la interconexión de documentos electrónicos: el proyecto Xanadu.

Tim Berners-Lee había estado experimentando con hipertexto desde 1980, año en que programó Enquire, un programa para almacenar piezas de información y enlazarlas entre ellas. Enquire se ejecutaba en un entorno multiusuario y permitía acceder a varias personas a los mismos datos. En septiembre de 1990, el CERN dio el visto bueno a la propuesta de Berners-Lee y junto con Robert Cailliau comenzó a escribir el nuevo sistema de hipertexto.

HTML permite especificar enlaces (links) entre documentos, haciendo uso de técnicas hipertextuales. De este modo, en un documento pueden haber referencias a otros documentos, los cuales pueden estar situados en otro lugar de Internet. Los enlaces de un documento HTML no tienen por qué restringirse a otros documentos, sino que pueden hacer referencia a otros recursos, como ficheros de cualquier tipo, direcciones de correo electrónico, etc. Sin embargo, el modo de acceder a cada uno de estos recursos es siempre el mismo: el usuario selecciona el enlace resaltado y es el navegador el que se encarga de acceder al elemento.

Los enlaces están redactados conforme a una sintaxis determinada, que permite hacer referencia al nodo de Internet donde puede encontrarse la información, el nombre de fichero que la contiene y el protocolo de comunicaciones. Por este motivo, reciben el nombre genérico de Localizadores Universales de Recursos o URL (Universal Resource Location).

El usuario, sin embargo, no necesita saber nada sobre la existencia de protocolos, servidores, ficheros o cualquier otro tipo de recursos. La tecnología Web permite integrar todas las aplicaciones de comunicaciones desarrolladas con anterioridad, de tal manera que el usuario únicamente debe aprender a manejar una sencilla herramienta gráfica para poder utilizar la gran cantidad de recursos que proporciona Internet.

4. Estándares Web

4.1. HTML, CSS y más acrónimos raros. Estándares Web

Un estándar es un conjunto de reglas normalizadas que describen los requisitos que deben ser cumplidos por un producto, proceso o servicio, con el objetivo de establecer una base sobre la que los distintos elementos de hardware o software que lo utilicen, sean compatibles entre sí.

Los estándares relacionados con la Web han sido desarrollados con la premisa de que Internet sea un lugar donde la información contenida en los documentos WWW pueda ser usada de forma accesible, interoperable y eficiente por cualquier persona, en diversos lugares y sin importar el dispositivo de acceso a la Red que se utilice.

Los Estándares Web indican a los autores cómo crear el código de las páginas Web, pero también especifican a las aplicaciones y navegadores cómo interpretar ese código para que se muestre de la forma adecuada a los usuarios. Los estándares de la Web son la única manera de cerciorarse de que cada parte implicada está siguiendo las mismas «reglas del juego».

Cada nueva versión de las normas y protocolos de las tecnologías implicadas en la Web ha intentado reflejar un consenso, cada vez mayor, entre los interlocutores de la industria y los desarrolladores, de tal modo que no se desaprovechen las inversiones hechas por los proveedores de contenidos y que sus documentos no dejen de ser legibles a corto plazo.

4.2. ¿Y quién dicta esas normas?

Para nuestros intereses, dos son los actores principales que definen las normas que hacen posible que el complejo ecosistema Web funcione:

• World Wide Web Consortium (W3C)
• Internet Engineering Task Force (IETF)

4.2.1 World Wide Web Consortium (W3C)

Históricamente, el Consorcio World Wide Web (W3C) es una organización independiente y neutral responsable del diseño, validación, distribución, revisión y modificación de los Estándares Web en función de la demanda tecnológica de la Comunidad de Internet. Además, son responsables de cualquier tecnología relacionada con la WWW, es decir, protocolos (HTTP), Hojas de Estilo en Cascada (CSS), Lenguaje de Marcado de Hipertexto (HTML), Lenguaje de Marcado Extensible (XML), etc. El resultado: más de 110 tecnologías desde 1996.

El W3C es una comunidad internacional, sin ánimo de lucro, dirigida por el inventor de la Web, Tim Berners-Lee, y formada por más de 400 organizaciones, distribuidas a lo largo de todo el mundo y de diversos ámbitos: grandes empresas de hardware o software, centros investigadores, universidades, administraciones públicas, etc. Su misión es guiar la Web hacia su máximo potencial.

Para saber más…

Un vídeo para conocer un poco mejor la actividad del World Wide Web Consortium: W3C: The World Wide Web Consortium (VOS)

4.2.2 Internet Engineering Task Force (IETF)

Con todavía más alcance que el W3C, el Grupo de Trabajo de Ingeniería de Internet (IETF), es responsable de regular las propuestas y los estándares de Internet, de hecho, la WWW es una pequeña parte del trabajo del IETF.

4.2.3 El proceso de crear un estándar Web

El W3C cuenta con diversos grupos de trabajo (W3C Working Groups) que se organizan por áreas de interés.

Los grupos de trabajo están compuestos, en su mayor parte, por empresas miembro (fabricantes de navegadores, sitios web populares, instituciones académicas y de investigación, compañías tecnológicas, etc.) que son las financian principalmente la actividad del Consorcio y el motivo fundamental por el que se pueden distribuir los estándares Web de forma abierta y gratuita. En segundo lugar, se encuentra un grupo, mucho más reducido, compuesto por expertos invitados y, finalmente, el propio personal contratado por el W3C. Realmente son los grupos de trabajo los que crean los Estándares Web, el W3C se encarga de supervisar y controlar la inmensa información que se genera en este particular foro de debate.

Como es lógico imaginar, lograr el consenso no es una tarea fácil, cada estándar pasa por un tedioso y largo proceso, normalmente de años, hasta llegar a convertirse en una versión final. Por supuesto, en ocasiones, existen discrepancias y luchas de poder interno… como ejemplo, el libro The Truth About HTML5 (For Web Designers) de Luke Stevens contiene una reveladora y crítica historia sobre el proceso de creación de HTML5.

Estos son los estados habituales por los que pasa un estándar Web:

1. Editor’s Draft (ED)
2. First Public Working Draft (FPWD)
3. Working Draft (WD)
4. Candidate Recommendation (CR)
5. Proposed Recommendation (PR)
6. Recommendation (REC)

• Más detalles sobre este proceso: World Wide Web Consortium: Specification maturation (EN)

4.3. Beneficios de usar Estándares Web

A pesar de la labor divulgativa de diversos organismos, profesionales y entusiastas de la Web, la pregunta de por qué usar Estándares Web sigue siendo muy común. La siguiente lista puede ayudar a respondernos:

• Garantiza la compatibilidad. Los Estándares Web están definidos por el Consorcio Mundial de la Web (W3C), organismo encargado de establecer las tecnologías, especificaciones, guías, aplicaciones y herramientas para crear e interpretar el contenido en Internet. Al desarrollar nuestras páginas, estamos siguiendo unas normas aprobadas y consensuadas internacionalmente siguiendo un proceso controlado en el que participan los Expertos y la Industria. Por tanto, siguiendo los Estándares Web está asegurada gran parte de la compatibilidad con las aplicaciones y dispositivos existentes y los futuros.

• Aumenta la accesibilidad. Los Estándares Web proponen separar la estructura, el estilo y el comportamiento de las páginas Web utilizando las reglas normalizadas más adecuadas para cada caso. Este hecho mejora el acceso a la información para todos los usuarios, incluyendo a aquellos con diversidad funcional. Es posible dejar en las manos del usuario el control de la apariencia del contenido; tamaño, disposición y color, haciendo su uso más cómodo y adaptado a sus necesidades.

• Mejora la respuesta y rendimiento. Aplicar Estándares Web implica utilizar un código optimizado, más estricto y “limpio”, lo que redunda en menores tiempos de espera en la carga de las páginas y un mejor rendimiento. Además, jugando con el posicionamiento de los elementos HTML es posible presentar unas partes del contenido antes que otras, aumentando la sensación de velocidad percibida.

• Reduce los costes de mantenimiento. Un código más ordenado y el tener todas las reglas de estilo ubicadas en un único lugar, mediante las hojas de estilo, facilitan enormemente las tareas de actualización y mantenimiento.

• Aporta semántica. El contenido puede agruparse basándose en criterios lógicos, gracias a la utilización de diferentes etiquetas que nos permiten jerarquizar y organizar los contenidos o crear unidades informativas con significado.

• Signo de calidad y apuesta por el futuro. El uso de estándares tecnológicos para la Web se hace con la intención de que se reduzcan los costes y la complejidad en el desarrollo aumentando la viabilidad a largo plazo de cualquier sitio publicado en Internet. Es apostar por el futuro con garantías y trabajar en el camino adecuado para ello.

5. El contexto digital: diseñar para la Web

El diseño Web tiene muchos puntos en común con el diseño tradicional puesto que también se utilizan los elementos propios del diseño gráfico (formas, líneas, colores, tipografía, gráficos e imágenes, etc.). La diferencia fundamental es el medio donde se trabaja: el diseño Web se basa en las posibilidades y tecnologías que le brinda la World Wide Web.

Los diseñadores web deben tener los conocimientos técnicos necesarios para convertir su diseño en un sitio Web en funcionamiento; conocer las soluciones tecnológicas idóneas para cada caso, sus características y restricciones, cómo se comportan, cómo se ven en diferentes plataformas, navegadores, etc. Por tanto, deben conocer y saber aplicar el material con el que se fabrican sus diseños y, ese material, en los sitios Web no es el papel.

A diferencia del diseño tradicional, el diseño web requiere valorar aspectos como la consistencia en la navegación, la facilidad de uso (usabilidad), la organización de los contenidos (arquitectura de la información), la interacción, etc. Los sitios web también deben cargar rápido y funcionar eficientemente para lograr experiencias de uso satisfactorias. Aspectos como el tamaño de los archivos, las resoluciones de pantalla, la velocidad de carga y rendimiento general también deben tenerse en cuenta.

5.1. El lienzo infinito

El diseño tradicional, en papel, permite jugar con un espacio perfectamente delimitado que deja una mayor libertad creativa al diseñador ya que no está limitado por la programación, la resolución o la velocidad.

El diseño impreso es bidimensional. Se diseña para un espacio de un tamaño fijo, cuidando mucho la distribución de los elementos en una retícula invariable. Es una experiencia diseñada para ese lienzo concreto donde se controlan con detalle cómo se van a mostrar todos los elementos. Es un diseño ajustado al milímetro (píxel-perfect) donde se sabe cómo va a quedar cada elemento.

En la Web pueden existir varias dimensiones, es una experiencia flexible, fundamentalmente de desplazamiento (scrolling experience), donde no siempre se mantiene la misma relación de espacio fijo entre los elementos, puesto que depende de variables como las características del dispositivo donde se muestra.

Otra diferencia con el diseño “de papel” es que, debido a la naturaleza de HTML, el orden visual y el orden cognitivo no siempre coinciden: el contenido y su estilo pueden variar de forma independiente para adaptarse al contexto de uso.

En el diseño Web, un único tamaño no encaja para todo, no se trata de hacer el diseño perfecto sino el mejor de los posibles para cada situación.

5.2. Navegación e hipertexto: una forma de construir conocimiento

Sin duda una de las diferencias fundamentales de WWW con respecto a otros medios es su capacidad de navegación a través de hipertextos.

El hipertexto ofrece una forma de acceder a la información de manera asociativa y organizada, lo que supone una ruptura con linealidad en la representación de la información de los medios tradicionales.

El usuario decide el camino a seguir a través de los hipertextos y la “navegación” que los mismos propician. Desde una perspectiva constructivista, el usuario se convierte en “procesador” activo de la información, libre y constructor de su conocimiento, en función de sus intereses, de sus conocimientos y habilidades previas sobre los temas a los que accede.

7. Bibliografía

1. Cabrera Álamo, Domingo y Quevedo Santana, José R. Diseño Web.

Material formativo sin publicar, 2001-2002.

2. Guerra Vega, Ana María. Autopistas de la información: Internet e InfoVía.

Material formativo sin publicar, 1997.

3. Quevedo Santana, José R. HTML & XHTML.

Material formativo sin publicar, 2007.

4. Zeldman, Jeffrey y Marcotte, Ethan. Designing with Web Standards (3rd Edition). New Riders, 2010.

5. A CERN invention you are familiar with: the World Wide Web.

http://public.web.cern.ch/Public/ACHIEVEMENTS/WEB/Welcome.html (no operativo)

6. Breve historia de internet (Internet Society).

http://www.internetsociety.org/es/breve-historia-de-internet

7. Internet History (Computer History Museum).

http://www.computerhistory.org/internet_history/

8. Historia de Internet.

Haz clic para acceder a historiainternet.pdf

9. Tecnologías de Internet – Historia de la Web (WikiBooks).

http://es.wikibooks.org/wiki/Tecnolog%C3%ADas_de_Internet/Historia_de_la_Web

10. Billions Registered (Wired).

http://archive.wired.com/wired/archive/2.10/mcdonalds_pr.html

11. Evolución de Internet en España. Máster de Periodismo (El Mundo).

http://www.elmundo.es/imasd/docs/cursos/masterperiodismo/2002/rivero-master02-espana.html

12. Fundamentos históricos de la Internet en Europa y en España (RedIRIS).

http://www.rediris.es/difusion/publicaciones/boletin/45/enfoque2.html

13. Internet en España (Asociación de Usuarios de Internet).

http://www.aui.es/?page=doc_histo_seccion&id_rubrique=255

14. Uso de Internet en España 2004-2014. Datos EGM

https://docs.google.com/presentation/d/1HRsXafBNtdi9FqCOaQQuDCxXJnr7u0ujQ220233DIHw/edit?pli=1#slide=id.ge63b598_1_0

15. Impacto de Infovía de Telefónica (El profesional de la Información).

http://www.elprofesionaldelainformacion.com/contenidos/1995/noviembre/impacto_de_infova_de_telefnica.html

16. Wikipedia.

https://www.wikipedia.org/

https://en.wikipedia.org/wiki/History_of_the_Internet

7. Propuestas para el debate: timeline de Internet.

• Realiza una línea temporal, a modo de síntesis donde queden reflejados los principales hitos, tecnologías y personajes destacados en la historia de Internet que aparecen en el artículo.
• Cada hito se debe describir de forma breve y concisa, con tus palabras; no se trata simplemente de copiar y pegar desde textos encontrados en Internet.
• Selecciona un mínimo de 20 hitos y un Máximo de 50.
• Aunque puedes hacer simplemente una lista, es mucho mejor que utilices una herramienta gratuita, como venngage.com, para incluir elementos gráficos a tu timeline. De este modo será mucho más amigable y fácil de leer.

Plantilla para la valoración de las intervenciones en el debate respondiendo a estas propuestas:

• ¿Están presentes los hitos y acontecimientos más importantes de la historia Internet?
• ¿Los hitos están descritos de forma breve y concisa?
• ¿El formato del timeline es amigable y fácil de leer?
• ¿Se incluye un mínimo de 20 hitos y un máximo de 50?
• Valorar con el desplegable del foro entre una y cinco estrellas (de menor a mayor calidad).

---

© José R. Quevedo

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Esta obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported