Table of Contents

T5. ESTRATEGIAS DE PLANIFICACIÓN Y DISEÑO1. Estrategias y técnicas de composición y diseño visual
1.1. Diseño de Interfaces
a. Concepto de Interfazb. Los principios de diseño de las interfacesc. Tipología de interfaces

1.1.1.Diseño interfaz.
1.2. Tipografía web
a. Característicasb. Recomendaciones tipográficas generales para la Webc. Tamaños de texto recomendadosd. Selección de fuentese. Elementos tipográficos a tener en cuenta en la elección de fuentes para el diseño

2. Estrategias y técnicas de guionización multimedia
2.1. Técnicas de guionización específicas
a. Storyboarding
b1. Wireframe
c. Técnica del “prototipado"
2.2. Herramientas
a. Aplicaciones para el desarrollo de guiones gráficosb. Aplicaciones para el desarrollo de wireframes

3. Visualización de información
3.1. Concepto3.2. Factores que influyen en la percepción visual3.3. Aplicaciones
Referencias de interés
Recursos para Wireframes y Fuentes a consultar
EnlacesBibliografía

T5. ESTRATEGIAS DE PLANIFICACIÓN Y DISEÑO

t5-mapa.jpg
MAPA CONCEPTUAL T5. Estrategias de planificación y diseño

MAPA CONCEPTUAL T5. Estrategias de planificación y diseño

1. Estrategias y técnicas de composición y diseño visual

1.1. Diseño de Interfaces

a. Concepto de Interfaz

La teorización sobre el Diseño de interfaces podemos abordarla desde distintas disciplinas que van desde el “Diseño gráfico” a la “Interacción persona-ordenador” pasando por la “Psicología del Arte” (Fechner, Arheim, Vygotski, Gardner…) o la “Psicología cognitiva” (Norman)

Para adentrarse dentro de la psicología cognitiva de Donald Norman y el diseño de interfaces, adjunto un enlace al blog creado por Eduardo Manchón, co-fundador de Panoramio.com (adquirido por Google en 2007) y actualmente en el proyecto de consumo colaborativo Swaapping.com.

http://www.alzado.org/articulo.php?id_art=147

La Teoría de los procesos de interacción persona-ordenador define la interfaz de un sistema interactivo como un dispositivo tecnológico que permite una interacción amigable con dicho sistema a través de modelos de representación de distinto tipo (textual, visual, sonoro, etc.)
Habitualmente se utiliza el término Interfaz gráfica de usuario (GUI, Graphical user Interface) para hacer referencia a un modelo concreto de representación que hace uso de distintos objetos gráficos e imágenes para mostrar la información disponible dentro de un sistema. Aunque realmente los modelos de interfaz son extremadamente variados, y no aluden, como hemos visto, de forma exclusiva a los sistemas digitales, el concepto de GUI quedó definido a partir de los sistemas orientados a objetos, en los que el usuario puede manipular directamente los elementos que conforman la interfaz cambiando su estado, propiedades e incluso naturaleza.
Desde el análisis semiótico, para Scolari (2004) el término se ha convertido en los últimos años en un concepto-paraguas que ha terminado definiendo cosas de naturaleza bastante diversa que mantienen entre sí, solamente, una lógica de intercambio informacional. Sin embargo, de todas las definiciones que trae a colación en su obra nos interesa la interpretación de Pierre Lévy (1992) cuando conceptualiza la interfaz como una red cognitiva de interacciones. El propio Scolari proyecta un modelo metafórico que no pretende definir tanto la interfaz como comprender los tipos de metáfora que se esconden tras su uso (conversacional, instrumental, capilar-osmótica, espacial, y sociosemiótica)
No podemos olvidar, en cualquier caso, que las interfaces son elementos evolutivos que van mutando en función de múltiples circunstancias que tiene que ver con los contextos de uso, con las competencias lectoras, con las necesidades de los usuarios, con las tendencias, con los criterios de desarrollo, etc. Así, por ejemplo, Forest Key (responsable de interfaces de usuario de la empresa Microsoft) plantea cómo la nueva versión del SO de la compañía ha sustituido los menús por cintas contextuales y ventanas emergentes, disponibles en cualquier parte de la pantalla, como una evolución lógica del proceso del modelo de interfaz.
En esta línea de secuenciación lingüística a la que responden aún los sistemas operativos y los nuevos medios, Pablo Manzini (2006) señalaba en un artículo de Educ.ar:
“Lo interesante de la discusión no es tanto quién tiene razón como el problema que emerge de ella, que nos advierte directamente sobre la cuestión de las interfaces actuales de los sistemas operativos que usamos y del cúmulo de objetos vagamente agrupados como “nuevos medios”.
Una interfaz en Java es una colección de métodos abstractos y propiedades. En ellas se especifica qué se debe hacer pero no su implementación. Serán las clases que implementen estas interfaces las que describan la lógica del comportamiento de los métodos.
La principal diferencia entre interface y abstract es que un interface proporciona un mecanismo de encapsulación de los protocolos de los métodos sin forzar al usuario a utilizar la herencia.Java proporciona dos palabras reservadas para trabajar con interfaces: interface eimplements.
Para declarar una interfaz se utiliza:
modificador_acceso puede ser public o no existir, siendo entonces por defectopackage. Los atributos que definamos en el cuerpo de la interfaz serán atributos de tipo constante en las clases en las que se implemente.
Eduardo Mercovich, en la SIGGRAPH ’99


en Buenos Aires, Argentina, dio una ponencia sobre Diseño de Interfaces y Usabilidad: cómo hacer productos más útiles, eficientes y seductores. Según este autor la interfaz "no es sólo el programa o lo que se ve en la pantalla. Desde el momento que el usuario abre la caja, comienza a interactuar con el producto y por lo tanto, comienza su experiencia". Además en esta misma ponencia define:
  • La importancia de la interfaz de usuario.
  • El precio de una mala interfaz.
  • La usabilidad en la informática, como total de la buena interfaz.
  • El diseño de interfaces.
  • El desarrollo de las mismas.

Nos relacionamos con el mundo que nos rodea a través de cientos de interfaces de usuario. Muchas son tan conocidas y aceptadas que ni siquiera las vemos, como el picaporte de las puertas o el volante de un coche. Por eso, la mejor interfaz es la que no se ve. Sin embargo, muchas de ellas, por ser nuevas, desconocidas o estar mal diseñadas, se hacen visibles. ¿Cuántas veces no encuentras lo que buscas en una web o no sabes cómo usar u programa, un cajero automático o un teléfono móvil? Son situaciones muy comunes resultado de un mal diseño de interfaz, que a su vez genera un problema de usabilidad. El mejor de los sistemas o de las herramientas es inútil si no sabemos usarla.

Internet en un medio de comunicación, donde la interfaz tiene un papel fundamental y hace que tu producto sea o no competitivo. La fidelidad de tus usuarios-clientes la consigues cuando cumples sus objetivos de forma eficiente. No sirve de nada la tecnología si sus usuarios:

- No consiguen ralizar una transacción económica
- No entiendes las secuencias de compras que les presentas.
- No encuentran un producto.
- No consideran atractivo el diseño.

Cuantificar el coste de una mala interfaz no es, a veces, posible. ¿Cuánto vale un cliente insatisfecho?
Actualmente, hasta el 45% del código de una aplicación está dedicado a la interfaz. Más de un tercio de los análisis, comparaciones y opiniones de la prensa se dedican a la facilidad de uso. Sin embargo se dedica algo menos del 10% del presupuesto global de un proyecto en su desarrollo. (Fuente de información principal: Alberto Lacalle, 2001)


images.jpg
interfaz-4.jpg


1.1.1.INTERFAZ USUARIO

INTERFAZ DE USUARIO
Inicialmente las interfaces de usuario eran desarrolladas pensando solamente en su correcto funcionamiento, luego se comprobó la necesidad de que fueran fácilmente usables y después se hizo patente la importancia de la estética en las mismas, punto en el que el diseño gráfico entró de lleno en el mundo de las interfaces de usuario. Un sistema de este tipo no sólo tiene que funcionar, debe ser bello, acorde con las inquietudes estéticas del mundo que nos rodea. Colores, formas, agrupaciones y comunicación forman en la actualidad parte indispensable de una interfaz de usuario.


Con la aparición de los ordenadores y su posterior popularización se hizo patente la creación de mecanismos que hicieran posible a un usuario medio comunicarse de forma correcta con los sistemas operativos y las aplicaciones que en ellos se estaban ejecutando, sistemas que no son más que interfaces de usuario

interfaz_msdos.gif
Estas interfaces se crearon en un principio en modo comandos, pero su utilidad práctica era limitada, ya que no eran aptas para usuarios normales que no poseían conocimientos avanzados de informática. Fue necesario entonces crear interfaces basadas en iconos y menús, accesibles por medio del ratón, surgiendo los entornos de ventanas, como Windows o MAC, que empezaron a utilizar interfaces gráficas de usuario, verdaderas protagonistas del mundo informático actual.

Estamos tan acostumbrados a las interfaces gráficas que se puede afirmar que si desaparecieran la gran mayoría del los usuarios de aplicaciones informáticas quedarían anulados. Tanto es así que sistemas operativos y programas que antes funcionaban casi exclusivamente en modo de comandos han tenido que actualizarse y ofrecer a los usuarios interfaces gráficas equivalentes para no quedarse olvidados por el público general.
Así estaban las cosas cuando se produjo un fenómeno sorprendente, llamado a revolucionar la comunicación entre seres humanos: Internet y la WWW. Con la aparición de la web se hizo posible que cualquier persona pudiera ofrecer información particularizada a los demás y encontrar documentos interactivos sobre cualquier tema, relacionados unos con otros mediante enlaces que permitían saltar de página en página alrededor del mundo.
Las páginas web supusieron la aparición de las interfaces web, interfaces gráficas de usuario con unos elementos comunes de presentación y navegación que pronto se convirtieron en estándares de facto. Este tipo de interfaces deben servir de intermediarias entre unos usuarios genéricos, no acostumbrados generalmente al uso de aplicaciones informáticas, y unos sistemas de información y procesos transaccionales que corren por debajo, debiendo posibilitar la localización de la información deseada, el entendimiento claro de las funcionalidades ofrecidas, la realización práctica de tareas específicas por parte de los usuarios y la navegación intuitiva por las diferentes páginas que forman el sitio web.

Buscando una homogeneidad entre los millones de páginas web que existen actualmente en Internet, el diseño de las mismas ha evolucionado con el tiempo hacia un esquema general perfectamente definido, ofreciendo unas interfaces bien definidas, con un conjunto de componentes gráficos y funcionales similares que hacen posible que sea cual sea el usuario que accede a un sitio web cualquiera la comunicación entre ellos sea posible y efectiva.


interfaz_navegador.gif

Elementos compositivos básicos de la Interfaz de Usuario

  • Menú: lugar que alberga las opciones funcionales ofrecidas al espectador-usuario. Pueden existir varios menús atendiendo a jerarquías, ubicaciones, etc. Se suele mantener un menú principal que se repite a lo largo de todo el programa.
  • Background:o fondo de la pantalla es generalmente un elemento gráfico que sirve como base o soporte a cada una de las escenas o pantallas el relato y sobre el cual se sitúan los restantes.
  • Botones:representación gráfica de las diferentes opciones/funciones que el relato ofrece al espectador-usuario. Puede considerarse botón cualquier zona interactiva, es decir allí donde el espectador-usuario pueda intervenir sobre el relato. Estos pueden ser explícitos o implícitos -no identificables como tales- dentro de cada una de las pantallas, muchas veces se refuerza su identificación con distintos tipos de "iluminación" visual o sonora, además es frecuente incorporar pequeños textos asociados que informan de su cometido. Cualquier gráfico o parte del mismo puede ser convertido en un botón que remita a otro gráfico (hipergráfico) o fragmento del programa. También se ocultan estos botones en algunas ocasiones para crear procesos de descubrimiento en el relato.
  • Ventanas: zonas de imagen enmarcadas para la representación de "medias" gráficos, especialmente utilizadas para vídeo debido a su formato característico, también es muy utilizado para presentar texto o hipertexto, o cualquier tipo de ayuda. Los distintos elementos que se incorporan a un programa multimedia no tienen que ocupar forzosamente una ventana pueden, y en la mayoría de los casos es lo más aconsejable, integrarse en la pantalla o background. Pueden ser flotantes o fijas.
  • Ayudas: elementos textuales o icónicos utilizados para facilitar la navegación del usuario, habitualmente se presenta en lo que llamamos ventanas flotantes que aparecen y desaparecen cumplida su misión.
  • Guías: señales indicativas de la situación y la trayectoria realizada, pueden formar parte de lo que llamaríamos menú principal, pueden estar acompañadas de botones que permiten retroceder o recordar el trayecto realizado.
  • Resaltes: indicaciones de puntos de decisión o interacción, ya comentados en el punto referido a los botones.
  • Objetos ornamentales: cualquier elemento que no esté incluido en el background, sea animado o no. Se utiliza como recurso estético y participa de la composición visual de la pantalla.
  • Cursores:representación gráfica del lugar que señala el ratón. Pueden cambiar de color, tamaño o forma, con la intención de indicar y reforzar un objeto o situación del relato.
  • Barras:representación gráfica de “desplazadores” o “regletas” que permiten seleccionar un determinado valor del rango ofrecido; por ejemplo una barra de tiempo nos permitirá elegir un año determinado.
  • Cajas de texto:espacios reservados para la presentación de texto o la introducción de texto por el usuario.
  • Marcadores:espacios reservados para la presentación de valores referentes a puntuaciones obtenidas por el usuario o su contrincante (sea o no el ordenador).
  • Personajes:representaciones animadas de seres vivos u objetos que protagonizan una determinada acción. Pueden representar al espectador-usuario.

Diseño de Interfaces/Tipologia Igus

En tecnología se denomina interfaz a muchas cosas, pero es la interfaz gráfica de usuario el concepto aquí tratado. De forma abreviada en inglés, también se le denomina Graphic User Interface (GUI), oUser interface (UI).
La primera interfaz gráfica de usuario fue diseñada por Xerox en los años 70. Pero no fue hasta los 80 cuando Apple las hizo mundialmente populares en sus ordenadores, posteriormente fueron copiadas por Microsoft con sus "windows".
En un software bien diseñado, los elementos que componen la interfaz, son funcionalmente independientes y están conectados de forma indirecta al programa.

Algunos componentes básicos

  1. Puntero: en un símbolo de pantalla que te permite mover o seleccionar objetos y comandos.
  2. Periféricos de puntero: como el ratón del ordenador.
  3. Iconos: Pequeñas imágenes que representan comandos, documentos o ventanas.
  4. Escritorio: área de la pantalla que representa una mesa de trabajo.
  5. Ventanas: conocidas en inglés como Windows. Sirven para dividir la pantalla en diferentes secciones.
  6. Menús: La mayoría de las interfaz de usuario te permiten ejecutar comandos seleccionando opciones en ellos.



interfaz-apple.jpg

¿Por qué es importante la interfaz?

Cuando utilizas un programa informático, suele haber «algo» entre tú y él. Ese algo, que es a la vez un límite y un espacio común entre ambas partes, es la interfaz.
En tecnología se denomina interfaz a muchas cosas, pero es la interfaz gráfica de usuarioel concepto que aquí tratamos.
En Internet la interfaz no es sólo la web que se ve en la pantalla; la experiencia con tu producto empieza desde el momento en que tus clientes teclean tu URL o te buscan en Google.

Bases para el funcionamiento de las interfaces
Antonio Fernández – Coca, en su libro “Producción y diseño gráfico de la Wold Wide Web” destaca que el funcionamiento correcto de una interfaz de usuario descansa en las siguientes bases:
- Facilidad de aprendizaje: conviene utilizar elementos que tengan un significado global o no variar determinadas costumbres extendidas entre los usuarios para facilitar el aprendizaje del uso del interfaz (por ejemplo: mantener el botón “X” de cerrar las pantallas siempre en el mismo sitio o utilizar el color rojo para señalar algún problema).
- Facilidad de uso: no es mala idea apoyar los iconos difíciles de entender, por ejemplo, mediante palabras. Se ha de lograr que el interfaz resulte lo más fácil posible para el manejo del usuario.
- Inmediatez: Si logramos facilidad y simplicidad lograremos una respuesta rápida por parte del usuario. Si la interfaz tiene menos datos visuales en los que distraer su mirada, el usuario podrá reaccionar con mayor celeridad.
- Símbolos útiles y reconocibles: un ejemplo clásico para entender esta característica sería el de los botones de un vídeo; si cambiaran el símbolo del play se complicaría el uso del aparato.
- Unidad de imagen gráfica: esto es algo básico. Sería un error garrafal cambiar de estilo gráfico en las distintas ventanas y elementos del interfaz. Crearía confusión en el usuario.
- Estándar: viene a decir lo mismo que el anterior: toda la iconografía así como todo el aspecto general de la interfaz constituirá la imagen corporativa de la información que estamos ofreciendo. El estilo gráfico y las normas de navegación han de mantenerse para no confundir al usuario. Saltarse este principio constituye un error bastante extendido.

Existe un diseño tradicional de interfaces sobre el que el diseñador podía controlar hacia donde quería que fuera el usuario y cuándo. Pero la proliferación de motores de búsqueda ha hecho que esto quede en desuso.

Ahora, el usuario tiene el control total de navegación por la página. Los usuarios pueden llegar a un sitio de forma inesperada y siguiendo caminos que el diseñador no habría imaginado. Es muy habitual hoy en día llegar a un sitio sin haber pasado por su página de inicio. ¿Quién no ha buscado información en un buscador y ha entrado en una página de un sitio que jamás había visto y después ha ido a su página de inicio? Actualmente, es muy habitual que se produzca este efecto.

Por todo ello, los diseñadores, cuando planifican una interfaz, deben hacerlo para que haya libertad de movimientos y una navegación flexible.

b. Los principios de diseño de las interfaces

La práctica del diseño de interfaces y los diversos estudios sobre el tema, han generado numerosas listas de principios que deben aplicarse. Algunos de estos principios son:

1. El principio de familiaridad del usuario sugiere que los usuarios no deben ser obligados a adaptarse a una interfaz sólo porque sea inconveniente implementarla. La interfaz debe utilizar términos familiares para los usuarios, y los objetos que el sistema manipula deben estar directamente relacionados con el entorno de trabajo del usuario.
2. El principio de uniformidad de la interfaz de usuario significa que los comandos y menus del sistema deben tener el mismo formato, los parámetros deben pasarse a todos los comandos de la misma forma, y la puntuación de los comandos debe ser similar.Las interfaces uniformes reducen el tiempo de aprendizaje del usuario. Por lo tanto, el conocimiento aprendido en un comando o aplicación es aplicable en otras partes del sistema o en aplicaciones relacionadas. La uniformidad de la interfaz a lo largo de las aplicaciones también es importante. En lo posible, los comandos con significados similares en aplicaciones diferentes se deben expresar de la misma forma.
3. El principio de mínima sorpresa es apropiado debido a que las personas se irritan demasiado cuando el sistema se comporta de forma inesperada.Cuando se utiliza un sistema, los usuarios construyen un modelo mental de la forma en que trabaja dicho sistema. Si una acción en algún contexto provoca un tipo de cambio particular, es razonable pensar que la misma acción en un contexto diferente cause un cambio comparable. Si sucede algo completamente diferente, el usuario se sorprende y confunde.
4. El principio de recuperabilidad es importante debido a que los usuarios inevitablemente cometen errores cuando utilizan un sistema. El diseño de la interfaz puede minimizar estos errores, pero los errores nunca pueden eliminarse completamente. Por consiguiente, se deben incluir recursos que permitan a los usuarios recuperarse de sus errores. Estos ueden ser de tres tipos:
  • Confirmación de acciones destructivas
  • Proporcionar un recurso para deshacer
  • Generar puntos de control

5. Un principio relacionado es el de asistencia al usuario o características de ayuda. Éstas se deben integrar en el sistema y proporcionar diferentes niveles de ayuda y asesoramiento.
El principio de diversidad de usuarios ajustandose a los diferentes tipos de usuarios del sistema.

La perspectiva desde la que se elaboran estos principios es el llamado Diseño Centrado en el Usuario (UCD). La base de todo el proceso es como la gente usará el producto, se centra en
el usuario a través de las diferentes fases. En la siguiente figura se ilustra el proceso de diseño general de la UI (user interface)


el_proceso_de_diseño_de_la_UI.jpg
el_proceso_de_diseño_de_la_UI.jpg



Una decisión importante a tener en cuenta es el color. Muchas personas no le prestan la menor atención, pero el diseñador debe tener cuidado con él.

Al hablar de color hay que distinguir entre el color como fenómeno físico, donde intervienen la luz y la visión, y el color como fenómenos sensorial, que es el que nos ocupa.

Como fenómeno que percibimos a través de los sentidos, el color está sometido a criterios de análisis subjetivos. Depende de las preferencias personales, la relación que mantenga con otros colores dentro del campo visual, el estado de ánimo, etc.

A grandes rasgos podemos distinguir entre colores fríos y cálidos. Los primeros son los violetas, azules y verdes y dan la impresión de frescor, tristeza, reducción del espacio… Los segundos son los amarillos, naranjas, rojos, etc., que producen una sensación de alegría y de amplitud del espacio. Por ejemplo: un botón amarillo sobre fondo azul se ve como si fluyera hacia fuera tomando así el primer plano para el espectador.

El color en la Web se convierte en una herramienta de comunicación, además de llamar la atención: por un lado transmiten información, y por otro, establecen el tono del sitio. Una mala elección del color puede conllevar una errónea interpretación del significado. Por este motivo hay que tener en cuenta el factor cultural y climático de algunos países porque afectará a la percepción que se pueda tener de los mismo. Estas son algunas de las asociaciones más básicas por colores individuales:

- Blanco: inocencia, limpieza, bueno
- Negro: miedo, muerte, malo, oscuridad
- Marrón: sucio, tierra
- Amarillo: precaución, agobio
- Rojo: pasión, prohibido, calor
- Verde: naturaleza, campo, tranquilidad
- Azul: frío, tristeza, relajación

Otra de las opciones que tienen que ver con el color es retocar una de sus cualidades: el contraste. Variando esta propiedad se puede crear un patrón jerárquico que el usuario identifique a simple vista.

El objetivo del color en el sitio web, como el de otros elementos, es garantizar la mayor usabilidad del mismo. Por esta razón debe de adecuarse a la finalidad que persiga el diseñador.

Diseño equilibrado

Como las páginas Web pueden incluir texto, botones, iconos, fotografía, etc. , es necesario organizarla de forma eficaz y diseñarla de modo que quede equilibrada.

El equilibrio hace referencia, al igual que ocurre en composición fotográfica, a la distribución del peso óptico en la disposición, es decir, a un correcto reparto de los elementos de la composición. El peso óptico es la capacidad de un elemento de atraer la mirada del usuario. Este viene determinado por el color, el aspecto o el tamaño del elemento.

El equilibrio puede ser simétrico o asimétrico, aunque también puede no disponer de tal característica. Es simétrico cuando lo elementos se organizan horizontal o verticalmente a ambos lados de una línea central. Esto causa una sensación de rigor, fuerza y equilibrio. Un ejemplo:

simetrica.jpg

Una composición asimétrica no presenta esta estructura regular, pero sí está ordenada por el juego de volúmenes, colores, etc., y el conjunto queda equilibrado en el formato. Este tipo de diseño es dinámico e informal. Utilizado sobre todo para sitios lúdicos o de entretenimiento.

En el diseño sin equilibrio hay elementos organizado en la página, pero sin tener en cuenta su peso visual.

Diseño intuitivo

Según el diccionario de la RAE, 'intuición' es la "percepción clara e inmediata de una idea o situación, sin necesidad de razonamiento lógico" y, por tanto, cuando decimos que una interfaz es intuitiva hacemos referencia a su capacidad para que un nuevo usuario consiga de un simple vistazo entender su estructura, captar sus contenidos e interactuar con ella con casi la misma familiaridad que si ya la conociera de antes. Lograr que la interfaz diseñada sea intuitiva a la vez que novedosa y creativa es un reto que, en muchas ocasiones, obliga a sacrificar en alguna medida una u otra característica.

Daniel Mordecki, profesor universitario y director de Concreta -empresa uruguaya especializada en la usabilidad y estrategia en internet- apunta algunas indicaciones que es conveniente tener presentes en la búsqueda de un diseño intuitivo para la interfaz. Partiendo de la base de que toda interacción de un usuario con un sitio web se desarrolla simultáneamente (y de manera inconsciente) en los niveles de 'mirar', 'leer' y 'pensar', en Concreta han desarrollado un modelo denominado, precisamente, "Miro, Leo, Pienso" que se divide en varios niveles de interacción de menor a mayor complejidad.

interfaces_intuicion.jpg
En esta imagen intuimos fácilmente que los objetos están relacionados dos a dos

El más básico sería el nivel de "Miro y entiendo" que supone un escaso esfuerzo por parte del usuario de la web. De un solo vistazo, y en base a la experiencia de navegación acumulada, la interfaz debe poder trasmitir su estructura casi de manera inconsciente. Por ejemplo, en la imagen de la derecha se intuye fácilmente que los cuadrados están relacionados de dos en dos.
Si el diseño tuvo en cuenta este nivel, entonces "la agrupación visual, los efectos cromáticos, los espacios, la ubicación, los tamaños, entre otros elementos, permiten al visitante comprender múltiples aspectos de la página que ve sin esfuerzo alguno y de forma prácticamente inmediata, aumentando enormemente la facilidad de uso" (Mordecki: "Interfaces e Intuición", nº 1 revista Faz 2007).


El segundo nivel requiere más esfuerzo y Mordecki lo denomina "Leo y entiendo". Aquí el usuario debe leer los textos y etiquetas y, si responde a un buen diseño, ese texto debería ser suficientemente autoexplicativo para no requerir ninguna información complementaria acerca de su uso o utilidad: "Es muy importante NO asumir que los visitantes tienen más conocimientos o background que los que realmente tienen, en particular con respecto al propio sitio" (Mordecki, op.cit.). "Pienso y entiendo" sería el nivel superior al que solo se debería acudir si el contenido que se ofrece y para el que se requiere ese esfuerzo complementario, al final debe merecer la pena al usuario ya que, en caso contrario, se puede sentir defraudado. Según Mordecki: "Si estoy dentro del público objetivo, se supone que cualquier contenido publicado por un sitio debiera ser para mí comprensible en el nivel 'Pienso y entiendo'.




Además de poseer un diseño equilibrado e intuitivo, una interfaz debe tener un diseño claro, ya que debe evitar la ambigüedad y dejar lo suficientemente claro los distintos elementos a través del lenguaje, la jerarquía y las metáforas para los elementos visuales. También debe ser concisa, ya que a veces se crea una interfaz con demasiadas etiquetas y especificaciones, sobrecargándola de manera que el usuario no encuentra fácilmente aquello que busca, así como familiar, con elementos que le resulten conocidos al usuario, empleando, por ejemplo, metáforas de la vida real.
Debe tener capacidad de respuesta, ser veloz y no hacer esperar al usuario además de proporcionar un buen feedback al usuario, y ser consistente para permitir al usuario reconocer determinados patrones de uso y así evitar confusiones.
Sin ser un objetivo principal, una interfaz debe tener un diseño estético, ya que eso ayudará a que la experiencia de los usuarios sea más positiva, pero también debe ser eficiente y permitir realizar un mayor número de tareas en menos tiempo y gestionar los errores de manera que sea posible deshacer acciones o poder recuperar archivos borrados.



Crear una interfaz con todas estas características es complicado, pero Alfred Astort, diseñador de interfaces de Microsoft, afirma en una entrevista a infonomía.com que “el siguiente paso deben ser los interfaces que podríamos llamar fluidos, donde podremos movernos de una aplicación a otra sin darnos cuenta; el escritorio tampoco será como lo conocemos ahora, será un espacio sin límite donde accederemos a la información «zambulléndonos» en ella. No más carpetas con ficheros dentro, el ordenador deberá superar estos anacronismos del pasado y crear un lenguaje visual propio.”

  • Evolución de las interfaces

Antes de la llegada de las Gráficas de Usuario (GUI) se trabaja fundamentalmente en los computadores en lo que se conocía como modo texto o consola. En este tipo de interfaces, que aún hoy actualmente se sigue utilizando en los terminales X, en las consolas de sistemas Unix o cuando abrimos una consola de MSDOS, la interfaz que se le ofrece al usuario espera de este que sepa introducir comandos a ser procesados y recibir unos resultados.


Figura 1. Ejemplo de terminal modo texto

external image terminal.jpg

A muchos usuarios aún le siguen gustando estas interfaces, que no necesitan para su uso de dispositivos como el ratón, y que permiten centrarse muy bien en las labores que se están llevando a cabo. Además, son interfaces que consumen muy pocos recursos del sistema y a las que es sencillo por ejemplo acceder de forma remota utilizando muy poco ancho de banda. Pero, ¿qué problemas presentan estas interfaces? ¿Son tan necesarios las GUI para trabajar?
Uno de los primeros problemas que nos encontramos a la hora de utilizar interfaces modo texto es su limitada capacidad expresiva. En las interfaces iniciales sólo se disponía de un tipo de texto sin colores y con unos caracteres limitados. Poco a poco se fue enriqueciendo las posibilidades de estos terminales modo texto y por ejemplo, en los actualas terminales X tenemos colores, diferentes tipos de letra, incluso interfaces modo texto con ventanas.
Pero basta ver un ejemplo de widgets de un toolkit como Gtk para ver que las posibilidades expresivas de las interfaces gráficas son muy superiores.


Figura 2. Ejemplo de ventana con paneles
external image paneles.jpg

Por otro lado, la sencillez de uso y robustez que podemos alcanzar dentro de una interfaz gráfica son mucho mayores que en las interfaces texto. Por ejemplo, mediante el uso de menús podemos hacer que el usuario pueda ejecutar comandos de forma guiada, sin necesidad de conocer la sintaxis concreta del mismo. Con un diseño adecuado de los menús de una aplicación, se pueden poner a disposición del usuario decenas de comandos fácilmente accesible y que pueden guiar al usuario a la hora de ejecutar los comandos. Incluso los comandos más utilizados se pueden incluir en una barra de herramientas de fácil acceso para un uso más rápido de la interfaz.

Y algunas de las gran ventajas de las interfaces texto, como son la accesibilidad para personas con discapacidades, o el uso por completo desde el teclado sin necesidad de perder el tiempo apuntando con el ratón, se puede lograr igualmente diseñando de forma correcta las interfaces gráficas.

En resumen, las interfaces gráficas son una evolución natural de las interfaces modo texto. Permiten interfaces mucho más ricos visualmente, mucho más expresivos y más sencillos de utilizar, pudiendo ser tan accesibles y rápidos de utilizar como interfaces modo texto. Por ello, vamos a mostrar a lo largo de este artículo como se crean de forma sencilla dichas interfaces utilizando la herramienta Glade.

c. Tipología de interfaces

Desde nuestra perspectiva, que ha de centrarse en el desarrollo de las interfaces digitales, nos interesa aproximarnos a los modelos de interfaz existentes. Así, podemos hablar de cinco tipos distintos de interfaces:
  • PARC User Interface (PUI) Conocido también como WIMP, se estructura por medio de una representación que combina objetos gráficos como ventanas, menús, botones de radio, botones de marcar e iconos, dentro de un entorno contextualizado por algún tipo de metáfora (v.g. escritorio) Utiliza como dispositivos de entrada, además del teclado, algún instrumento apuntador que permite seleccionar qué parte del entorno manipularemos como usuarios. Las primeras interfaces PUI surgieron de los desarrollos llevados a cabo en los laboratorios de Xerox PARC (Palo Alto Research Center) a finales de los años setenta, si bien el primer sistema operativo que instrumentalizó la idea fue la compañía Apple, con sus ordenadores Macintosh, entrados ya en la década de los setenta. El éxito obtenido animó a, posteriormente, a IBM y Microsoft para acoger estas ideas en sus especificaciones Common User Acces, que son la base de las interfaces de los sistemas operativos Microsoft Windows e IBM OS/2, además de las de otros interfaces para otros entornos basado en Unix. Actualmente vivimos rodeados digitalmente de estos modelos de interfaz.

t5-interfaz-pui.png
MODELO DE INTERFAZ PUI. Fuente: Animal Logic

MODELO DE INTERFAZ PUI. Fuente: Animal Logic






  • Touchscreen user interface (TUI) Son todas aquellas interfaces basadas en el uso de pantallas táctiles. Creada por Eugene Mosher, uno de los pioneros de la Teoría de la interacción hombre-máquina, su lógica representacional es muy similar a las PUI, dado que la forma de organizar la información y mostrarla en pantalla responde a criterios muy homogéneos cuando no idénticos. La diferencia fundamental radica en la forma de interacción que se le propone al usuario; en este caso, gracias a la capacidad sensitiva de la capa de contacto (pantalla), el dispositivo apuntador no es una extensión electrónica, si no que esta responde a la presión efectuada. Su utilización es habitual en puestos electrónicos(cajeros, sistemas electrónicos de control…) en sistema de control domótico, y, de forma profusa en los últimos años, en dispositivos de informática y comunicación móvil (PDAs, móviles, etc.

En este mini-documental de la empresa Tactus Technology, que trabaja en el desarrollo y la implementación de sistemas de manejo táctil a través de este tipo de interfaces.


  • Zooming user interface (ZUI) Se trata de un sistema avanzado de interfaz basado en realidad virtual, en el que se mezclan elementos 3D con sistemas planos multicapa. Son numerosos los grupos de investigación que actualmente están trabajando en Norteamérica y Europa para el desarrollo de este modelo de interfaz dirigido hacia la experiencia de usuario, pues aporta mayor realismo y flexibilidad al tradicional concepto de interfaz. Su utilidad está enfocada hacia los dispositivos de pantalla reducida, fundamentalmente los de movilidad, por lo que las líneas de investigación están dirigidas a la búsqueda de modelos que optimicen las prestaciones de estos entornos reducidos mediante sistemas de representación complejos en los que sea sencillo pasar entre escalas y representar distintos niveles de detalle. Como señala el profesor Ken Perlin, de la Universidad de Nueva York:
Los elementos de información en una interfaz ZUI son mostrados directamente en un escritorio virtual “infinito”, usando gráficos vectoriales en vez de ventanas. Los usuarios pueden pasar de un plano general del escritorio virtual y hacer zoom en los objetos de su interés… (2007)
Entre los proyectos más conocidos que usan la interfaz de Zooming destaca Google Maps y Google Earth, donde el usuario puede cambiar la escala del visionado (hacer zoom) para obtener más detalle de una zona en concreto.
Los primeros intentos para desarrollar el interfaz ZUI fue el proyecto Pad++, llevado a cabo por la New York University y continuado por la University of New Mexico, con el que se desarrolló Piccolo, y ahora la reciente versión Piccolo2D, a través de Java. Además de ampliar, permite crear efectos visuales de animación.

t5-interfaz-zui.png
ESQUEMA Y EJEMPLO DE UNA INTERFAZ ZUI.
ESQUEMA Y EJEMPLO DE UNA INTERFAZ ZUI.



En este vídeo vemos el PA3D, uno de los primeros ejemplos de ZUI.
  • Interfaces 3D. La última innovación en el campo del diseño de las interfaces viene de la mano de las conocidas como interfaces 3D. Este tipo trata de vencer el modelo tradicional 2D basado en modelo lineales y rígidos, para ofrecer sistemas de interacción más complejos, con mayores funcionalidades integradas, con arquitecturas menos rígidas y predefinidas, y que permitan modelos de interacción más cognitivos que físicos. En este campo se hallan iniciativas como el proyecto de Sun Microsystems, //Looking Glass//, una plataforma abierta que trata de explorar las posibilidades de las Interfaces de usuario en 3D. En esa misma línea, se encuentra el proyecto //Open Croquet// , de la fundación “The Croquet Consortium”, que amplía el concepto de GUI 3D añadiéndole el concepto de multiusuario, o el proyecto Virtual Objet System (VOS) que incorpora una tecnología informática para crear sistemas distribuidos de objetos.
t5-interfazopen.png
SCREENSHOT DEL MODELO DE INTERFAZ DEL PROYECTO OPEN CROQUET. Fuente: Fundación “The Croquet Consortium”.
SCREENSHOT DEL MODELO DE INTERFAZ DEL PROYECTO OPEN CROQUET. Fuente: Fundación “The Croquet Consortium”.
.
Las características básicas que definen este modelo de interfaces son:
  1. Aprovechan las posibilidades de la Web 2.0, pues trabajan en modelos de proceso en servidor (aplicaciones y sistemas operativos en línea)
  2. Ofrecen un sistema de interacción 3D cercano a los modelos de los videojuegos.
  3. Poseen estructuras más abiertas que permiten a los usuarios compartir y crear información en línea, con arquitecturas de red P2P (par a par)
  • Interfaces multimodales (IMM) Se trata de interfaces que utilizan simultáneamente varios sentidos (vista, oído y voz) para ofrecer a los usuarios una experiencia de usuario más natural y sencilla. Se trata de un sistema novedoso, que soporta los estándares industriales básicos: WML, HTML, XHTML , VoiceXML, C++ y Java. Aplicada al campo de los dispositivos móviles (como la patente Interacción natural de la empresa Vida Software) permite enriquecer las aplicaciones de contenidos para móviles a través de interfaces de usuario multimodales y biométricas. Las interfaces multimodales son de las más adaptadas para usuarios con discapacidades y permiten acceder a una web desde diferentes dispositivos. Según Caicedo Castro y Rueda Fajardo la aproximación más básica consiste en codificar la información en varios formatos:
En HTML para que puedan accederla los PC de escritorio y portátiles, en WML para que puedan accederla teléfonos celulares y PDA a través de WAP; además, en construir aplicaciones especiales para interactuar por otras modalidades de conexión como SMS o MMS. Los inconvenientes de este enfoque, que a veces se llama "múltiple authoring" (Simon, Wegscheider y Tolar, 2005) son los típicos de la replicación: duplicación de trabajo, posibilidad de inconsistencias y dificultad de mantenimiento (Caicedo Castro y Rueda Fajardo, 2008).
Procesamiento de la señal Audiovisual en Interfaces Multimodales Avanzados
Procesamiento de la señal Audiovisual en Interfaces Multimodales Avanzados

Procesamiento de la señal Audiovisual en Interfaces Multimodales Avanzados


En el siguiente video vemos la nueva herramienta, llamada Cyber-commons, impulsada por una plataforma de software llamado SAGE (escalable adaptable entorno gráfico). SAGE permite a varios usuarios interactuar simultáneamente con alta resolución en una gran pantalla de pared, usando una variedad de dispositivos de entrada, tales como multi-touch, laptops, gyromouse, el Wiimote ... Una muestra más de la capacidad de evolución de la sociedad de la información y, sobre todo, de las nuevas tecnologías.

Varios usuarios pueden analizar y manipular información de forma simultánea a través de interfaces de usuario multimodales (por ejemplo, contacto y laptops personales). El gran tamaño y la alta resolución de la pared anima a todos los participantes a compartir información mediante arrastrar y soltar archivos multimedia y documentos desde sus computadoras portátiles o recuperar información, ya cargada, de sesiones de trabajo anteriores. Dando a cada usuario el control sobre la pantalla de pared y permitiendo la interacción verdaderamente simultánea, hace que el trabajo de colaboración sea más dinámico e intuitivo, ya que cada usuario puede participar y contribuir sin interferir con los otros. Además, cada usuario puede emplazar su escritorio personal en la pared que elimina la necesidad de cambiar los cables de vídeo o ver sólo un escritorio a la vez, como es el caso en los tradicionales entornos basados proyector.







Debido a estas dificultades, se han desarrollado otras aproximaciones, como por ejemplo, usar formatos estándar como XHTML; convertir un recurso codificado en HTML o XML (formatos neutros) al formato que nos interesa; o el estándar tecnológico VoiceXML Forum, que permite el acceso a contenidos web a través de teléfonos y sigue los estándares de W3C.

La mayoría del diseño de las interfaces de usuario se ha centrado en el aspecto cognitivo y en la representación visual de la información. Sin embargo en este terreno de las interfaces multimodales es donde se sitúan las fronteras que más se están explorando. Emergen nuevos dispositivos y con ellos nuevas interfaces donde el cuerpo y la interacción con él cobran protagonismo.

Donde encontramos algunos de los avances más espectaculares es en las interfaces gestuales. Como casi siempre, los videojuegos han sido punteros en aplicar está tecnología (Wii, Kinect, etc.) pero los usos potenciales son enormes. La tecnología Sixth Sense [1] es un ejemplo espectacular de interfaz gestual, que pretende eliminar la barrera entre en el mundo virtual y el físico, integrando ambos.















A partir de esta tecnología, Microsoft elaboró una visión del futuro de nuestra interacción con los datos virtuales. En esta visión se apuntan las características con las que evolucionarán las interfaces y como habrán de tener en cuenta no solo el aspecto visual.
















Jakob Nielsen, uno de los expertos mundiales más reputados en el tema de la usabilidad, publico una lista con las que, a su juicio, eran las 10 mejores interfaces de usuario que podían encontrarse en Internet. Son las siguientes:

- Campaing Monitor. EyeBlaster (Israel)


- CMSBox. CMSBox (Suiza)

- PRISMAprepare. Océ (Holanda)

- FotoFlexer. Arbor Labs (EEUU)
- Seating Management. Magellan Network and DesingBox (EEUU)

- SQL Diagnostic Manager. Idera (EEUU)

- SugarSync. Sharpcast (EEUU)

- SuperSaaS. SuperSaas (Holanda)
- Wufoo. Infinity Box Inc. (EEUU)

- Xero. Xero (Nueva Zelanda)


1.2. Tipografía web


La tipografía es el oficio que trata el tema de las letras, números y símbolos de un texto impreso (ya sea sobre un medio físico o electromagnético), tales como su diseño, su forma, su tamaño y las relaciones visuales que se establecen entre ellos.
Tipografía de ediciónReúne las cuestiones tipográficas relacionadas con las familias, el tamaño de las letras, los espacios entre las letras y las palabras; intertipo e interlínea y la medida de línea y columna o caja, es decir aquellas unidades que conceden un carácter normativo.[2]Tipografía creativaEsta contempla la comunicación como una metáfora visual, donde el texto no sólo tiene una funcionalidad lingüística, y donde a veces, se representa de forma gráfica, como si se tratara de una imagen.

a. Características

La importancia de la tipografía en el diseño web radica en la cantidad de información que esta aporta a los usuarios: les da una idea sobre quién está detrás, sobre lo que se puede hacer en el sitio, les otorga acceso a la información, ofrece impacto visual, genera “marca”, otorga estilo…
Aparentemente es un elemento simple, pero lo cierto es que muchos problemas de usabilidad de los sitios web están relacionados con el uso que se hace de los componentes tipográficos, y, especialmente, de la falta de legibilidad de los textos. Los principales problemas observados son:
  • Texto demasiado pequeño o confuso.
  • El tamaño de texto no puede modificarse fácilmente (por ejemplo, mediantes las opciones del navegador)
  • Poco contraste entre texto y fondo.
  • Poco espacio blanco alrededor de los bloques de texto


b. Recomendaciones tipográficas generales para la Web

Podemos sintetizar algunas de las principales recomendaciones en las que coinciden la mayor parte de los autores y diseñadores profesionales en las siguientes:
  • Priorizar la legibilidad por encima de todo
  • Usar fuentes sans-serif para mostrar en pantalla
  • Usar medidas relativas (porcentajes, “ems”) e integradas en CSS (nunca píxeles)
  • Alto contraste letra-fondo
  • Evitar fondos excesivamente llenos
  • Reducir, al mínimo, los textos en movimiento, en mayúsculas (según las reglas de //Netiqueta//equivale a gritar, y está demostrado que reducen la velocidad de lectura en un 10%) y el texto gráfico.
  • No utilizar “cursivas”
  • Preferentemente, usar colores seguros para la web
  • Fuentes “seguras”: Arial, Verdana y Georgia.
  • Evitar utilizar, durante el diseño, textos falsos (como el famoso “lorem ipsum”, para poder detectar problemas de legibilidad/comprensión en el texto real.
  • Evitar el uso de anti-aliasing (suavizado de los bordes dentados de las formas y el texto basado en vectores) pues tiende a generar textos más borrosos.

Los autores más puritas insisten en la permanencia de determinadas reglas, como, por ejemplo, que los textos enlazados vayan en azul y estén subrayados. No obstante, hay que señalar que sobre esto, considerando los hábitos actuales de los internautas, existe cierta controversia.

Podemos decir que, cuando alguien visita un sitio web que hemos diseñado, lo más probable es que por encima de los colores, imágenes o sonidos, se base en el texto para encontrar aquello por lo que visita el sitio web. Esto debería hacer que la tipografía, el arte de la organización del tipo, sea una prioridad para cualquier diseñador web. Así y teniendo en cuenta las recomendaciones referidas anteriormente, podemos tener en cuenta 10 reglas básicas en el desarrollo de un proyecto web:
1.- Debe leerse el texto íntegramente: un diseñador si no comprende la gran mayoría del texto, tendría dificultades para reunir la tipografía que hace que el sitio realmente funcione. Motivo por el cual el diseñador debe leer lo que escribe para poder determinar la tipografía que mejor se adapte a aquél.
Algunos diseñadores de páginas web creen que sólo con copiar y pegar un archivo de texto quedan completadas todas las funciones textuales. Si bien, debemos tener en cuenta que cuando se lee un texto ha de proporcionarse al menos una idea básica de cómo puede ser integrado en un sitio web, evitando la desconexión entre la escritura y el diseño del mismo; se busca una lectura fácil de la línea textual, evitando que lleve demasiado tiempo leerlas y que resulte engorrosa su lectura.

2.- Volcado de Lorem Ipsum, tan pronto como sea posible: El sitio web es muy dependiente de la palabra escrita así como de palabras muy específicas. EL cuerpo del texto en sí puede suponer que se le preste una especial atención con una letra capital y alguna que otra modificación del mismo, atención que podría no ser posible con el denominado “lorem ipsum
” (texto falso).

A menos que el texto sea en realidad lorem ipsum, el texto de relleno no tendrá ninguna similitud con la realidad. Esto significa que cualquier ajuste podría hacer que el texto o el diseño que lo rodea tengan que esperar hasta que se consiga una visión real. Preguntar y obtener el texto por parte del usuario tan pronto como sea posible en el proceso, supondrá una gran capacidad para ajustar el diseño y la tipografía en su conjunto.
3.- Mostrar una clara jerarquía: Cuando se visita una página web, uno debe saber de forma cuasi inmediata dónde debe comenzar a leer. Utilizando la tipografía se puede establecer una jerarquía clara entre los distintos conceptos que se representan en la web. Cada sitio tiene una jerarquía bien desarrollada con indicadores de por dónde y cómo se debe empezar a leer. Al pensar sobre el tamaño y tipos de letra, se puede resaltar un trozo de texto como si de un titular se tratase, predominando sobre el resto del texto a tratar.
4.- Mostrar atención a la Macro y Micro-tipografía: Cuando hablamos de Macro-tipografía nos referimos a la estructura general de su tipo, la forma en que aparece en el contexto de su diseño y su estética, se considera el texto como un bloque en sí mismo. Es la oportunidad para que el texto sea visto de forma atractiva en su conjunto, para lo cual juegan un papel fundamental la elección de los tipos de letra y colores.
Mientras que si hablamos de Micro-tipografía nos estamos preocupando más por los detalles de la separación, las cuestiones que determinan si las palabras son fáciles de leer. Así la Micro-tipografía se convierte en una necesidad absoluta cuando tratamos de configurar un texto en sí mismo: si no es legible, no tiene sentido.

5.- Hay que tener especial cuidado con los colores de tipo: Cuando un diseñador de páginas web trabaja con el tipo de color, la atención del internauta se considera absolutamente necesaria, por lo que debe tenerse muy en cuenta las combinaciones de colores de la página; por ejemplo, si escribimos un texto en color rojo sobre un fondo rojo no será fácilmente legible, lo que provocará la desatención del usuario. La solución más fácil para esta situación es asegurarse de que el color de su tipo es totalmente diferente al del fondo sobre el cual se asienta.
6.- El Cascading Style Sheets (CSS) ha de ser tomado realmente en serio: Estas Hojas de Estilo en Cascada consisten en un mecanismo que detallan la forma en que va a mostrarse un determinado documento en la pantalla del ordenador, cómo se va a exponer la información que el mismo contiene o incluso cómo va a imprimirse el mismo.
Si el CSS es claro, el usuario puede moverse entre las páginas de un sitio web sin problemas, así como garantizar la coherencia de la tipografía de la cual se compone el mismo. También podemos afirmar que si se rompe en un pequeño lapso la coherencia del texto en sí, podríamos conseguir dar importancia a lo que realmente queremos destacar, consiguiendo un diseño efectivo.

7.- Picar el texto de forma centrada: La elección de una alternativa al texto centrado puede hacer que un sitio web sea fácil de leer, evitando así una posible distorsión del resto de los diseños de diversas pantallas que se presenten en la web. En algunos círculos, el tipo de centro es sólo un paso hasta el uso de la Comic Sans en un diseño de página web. Es posible que se considere por un título, pero en general, la alineación del texto a la izquierda hará que los lectores se sientan mucho más cómodos leyendo.
8.- Problemática a la hora de tratar con las comillas tipográficas y otros símbolos: Muchos sitios web están llenos de símbolos que un navegador no puede mostrar ya que la mayor parte de un texto creado por un diseñador de páginas web probablemente se hubiese realizado con el programa Microsoft Word u otro programa de software de procesamiento de palabras, chocando en ciertos aspectos con el lenguaje HTML.
Así nos podemos encontrar con diversos problemas como el uso de las comillas tipográficas o trabajar con un texto que ha sido escrito en otro idioma, lo que conllevaría tener que efectuar modificaciones posteriores. Por todo ello, a la hora de desarrollar el diseño de nuestra página web, debemos centrarnos en elegir aquel texto que mejor se vaya a ajustar a nuestro diseño, y viceversa; así, si queremos que, por ejemplo, las comillas se reflejen en nuestra web, deberemos romper con las entidades HTML.

9.- Idear un planteamiento para que el texto aumente: Al aumentar el tamaño del texto en la página web podemos crear una mejor visualización del mismo y conseguir así una mejor lectura. Podemos considerar usar una fuente de tamaño 10, dado que la mayoría de la gente está acostumbrada a la lectura de fuentes de este tamaño.
No debemos olvidar que el tamaño del navegador puede variar de forma drástica, ya que los distintos usuarios pueden tener configurada la visión de los mismos de formas muy variables y distintas, por lo que el diseño del texto tiene que ser capaz de adaptarse a ese hecho a fin de no distorsionar el propio diseño en sí.

10.- Mostrar una preferencia por la tipografía sans serif: Si echamos un vistazo a los distintos sitios web de la red, casi todos los grandes bloques de texto se fijan en un tipo de letra sans serif, mucho más fácil de leer. Aspecto que destaca sobre todo en los titulares y otros bloques más pequeños de texto, creando lo que podemos llegar a determinar como un equilibrio entre los dos.

Estos diez pasos pueden resumirse en tres premisas básicas que han de ser tenidas en cuenta a la hora de elegir una tipografía para la web:

Visibilidad, Legibilidad y Lecturabilidad:

VISIBILIDAD: grado en que las letras pueden distinguirse unas de otras.
Fuentes más visibles:
-Blanco interno de mayor tamaño (ojo medio)
-Tamaño individual de las letras
-Rasgos del diseño de algunos tipos
-Grosor
-Color y contraste.

LEGIBILIDAD: rapidez con la que el ojo identifica un carácter, letra, palabra o grupo de palabras.
-Tipógrafo: necesidad / expectativas lector.
-Métodos:
-Tiempo de lectura.
-Control del movimiento del ojo y parpadeos.
-Distancia de lectura
-Depende de muchos factores: letras mayúsculas o minúsculas, del número de palabras por línea, cursiva, negrita, si hay muchos números o signos de puntuación, grafía con remates…

LECTURABILIDAD: facilidad y confort con la que un texto es leído.
-Interés del lector.
-Forma, tipo y texto.
-Tamaño tipo.
-Ancho de línea.
-Espacio / interlineado.
-Contraste cromático.
-Calidad de reproducción.


c. Tamaños de texto recomendados

Nielsen establece para el cuerpo de texto la denominada regla de los diez puntos (o valor equivalente) Se considera que por debajo de ese tamaño existirán serios problemas de legibilidad.
En todo caso, tal como se muestra en la siguiente tabla, la edad del público objetivo recomienda usar las siguientes horquillas en el tamaño del cuerpo de letra:

t5-tipografia1.png
t5-tipografia1.png

d. Selección de fuentes

Salvo que se utilice texto gráfico (y siempre con mesura, como hemos visto antes) es recomendable utilizar fuentes de las que existan garantías que estarán disponibles en los equipos y navegadores de los usuarios. El listado de estas fuentes “seguras” no es muy largo, como se aprecia en este cuadro.
Ello no significa que no podamos utilizar otras, pero debemos al menos conocer que si un usuario no dispone de dicha fuente, el navegador la cambiará por una fuente alternativa lo más similar posible.
No obstante, para salvar esta limitación, disponemos actualmente de algunas soluciones (vg. Typekit, Google Font Directory) que siguen la lógica de utilizar las fuentes como un servicio web, lo que permite que, desde cualquier página web, podamos “llamar” al servicio de fuentes para que muestre la información con el catálogo disponible de estas.
Aunque la calidad de las pantallas ha experimentado un extraordinario avance, aún sigue siendo recomendable, en pro de la legibilidad, utilizar para pantalla fuentes sans-serif (carecen de adornos decorativos).

e. Elementos tipográficos a tener en cuenta en la elección de fuentes para el diseño

  • Altura de las mayúsculas (letras de caja alta)
  • Altura X (letras de caja baja, minúsculas salvo ascendentes y descendentes)
  • Anillos (astas curvas y cerrada, por ejemplo en las letras “b”, “o” y “p”)
  • Ascendentes (astas que sobresalen por encima de la “altura x”, como en las letras “b”, “d” o “k”
  • Astas (rasgos principales y definitorios de las letras)
  • Astas montantes (astas principales y oblicuas de una letra)
  • Astas onduladas o espinas (astas curvas como en la letra “s”)
  • Astas transversales (horizontales)
  • Brazos (astas terminales que se proyectan horizontalmente o hacia arriba, como en la letra “K”)
  • Colas (astas colgantes y oblicuas como en la letra “R”)
  • Descendentes (astas de las letras de caja baja que se salen por debajo de la línea base, como en la letra “p”)
  • Inclinación (ángulo que forma un tipo respecto a la línea base)
  • Línea base (línea imaginaria sobre la que se apoyan todas las letras de un texto)
  • Orejas (añadido curvo de algunas letras como la “g”)
  • Rebaba (espacio entre un carácter y el borde de éste)
  • Serifa, también llamado remate o gracia (trazo embellecedor al final de un asta, brazo o cola)

En este vídeo se explica gráficamente cada una de las partes en que se divide una letra:


Es importante remarcar que la utilidad de las serifas en el diseño facilitar la lectura, ya que estos elementos tipográficos crean en el ojo del lector la ilusión de una línea horizontal, que sirve de guía a la vista que se desplaza mientras lee. Sin embargo, un gran número de diseñadores profesionales y manuales aconsejan evitarlas porque pueden resultar borrosas o poco claras en la pantalla. Por lo tanto, debe tenerse en cuenta esta problemática en el diseño y elegir la solución más conveniente en cada caso.

Las letras que no tienen serifas, también llamadas “de palo seco”, son las que no llevan terminación alguna. Suelen considerarse poco adecuadas para textos largos, ya que la lectura puede resultar incómoda al existir una tendencia visual a la identificación de estos tipos de letras como una sucesión de trazos o palos verticales difíciles de distinguir en algunos casos..

Las letras con serifas, que también se denominan romanas, suelen usarse en formatos de diseño impreso como periódicos, revistas o libros (o publicaciones con textos extensos, en general). La principal utilidad de las letras sin serifas o palo seco son los titulares, rótulos, anuncios breves y publicaciones con textos cortos, en general.

En el diseño de proyectos en la red, que están pensados para visualizarse en la pantalla de un ordenador o dispositivo similar, las letras de palo seco han ganado la hegemonía. Muchos diseñadores las consideran un estándar para la creación de webs y otros formatos electrónico. El principal motivo es la baja resolución que tenían antiguamente los monitores y la consiguiente distorsión de las serifas, que dificulta la lectura del tipo. Actualmente las pantallas no dejan de mejorar su resolución, por lo que cada vez tiene menos sentido esta justificación.


1.2.1. @font-face y las nuevas tendencias en el uso de tipografías web


Los avances acontecidos en el mundo del diseño web con la aparición de CSS3 hacen que todas las convenciones sobre el diseño tipográfico estén hoy en día en permanente cambio y modificación. La llegada de la tecnología @font-face (Six Revisions) ha supuesto un avance importante en el diseño web, que se ha desprendido de los límites que suponía el uso de tipografías seguras o de tecnologías algo menos recomendables como sIFR o Cufon (que requerían el uso de Javascript) para pasar a una tecnología ligera, de fácil acceso y prácticamente universal por su compatibilidad con navegadores de antiguas generaciones.

La propiedad @font-face supone que el diseñador puede subir al servidor las tipografías que quiera utilizar en su diseño, más allá de las tradicionalmente seguras (Arial, Helvetica, Times o Georgia, por ejemplo). Esto ha supuesto una verdadera revolución por la cual la mayoría de los diseños pueden pasar a ser mucho más ricos visualmente, sin temor a la compatibilidad de los diferentes navegadores. En el siguiente vídeo se puede ver cómo a través de unos sencillos pasos se puede utilizar cualquier tipografía en el diseño de una página web.



Actualmente existen servicios múltiples donde conseguir tipografías web:

- Font squirrel
Uno de los más destacados es Font Squirrel, donde además de encontrar tipografías de uso libre y gratuito ya preparadas para @font-face, podemos crear nuestros propios 'kits' subiendo tipografías de las que dispongamos en nuestro ordenador.

Fontsquirrel (Imagen: Switched.com)
Fontsquirrel (Imagen: Switched.com)



- Google Web Fonts
El servicio Google Web Fonts surgió casi a la par que la propiedad @font-face, con una importante colección con más de 600 tipografías de uso libre. En este caso la particularidad es que no es necesario instalar las tipografías en nuestro servidor, sino que simplemente podemos utilizarlas enlazando con los servidores de Google desde el código HTML. Este servicio incluye la posibilidad de utilización de las tipografías Droid creadas por Google, que se están convirtiendo en una de las más habituales en las páginas web de nueva generación.

external image The-New-Face-of-Google-Web-Fonts.gif

- Typekit

El servicio Typekit, comprado recientemente por Adobe tiene una importante diferencia respecto de los anteriores, y es la necesidad de enlazar a sus servidores a través de un pequeño script de Javascript. A cambio ofrece una importante colección de tipografías profesionales y comerciales en sus colecciones de pago, que dan una imagen aún más profesional a nuestros diseños.

external image typekit1.png

1.2.2. FUENTES Y FONDOS: ¿QUÉ COMBINACIONES DE COLORES SON MÁS LEGIBLES?

Aunque en un primer momento, añadir color a las fuentes y al fondo en una página web pueda parecer atractivo, sólo si se hace de forma efectiva se conseguirá que el resultado sea legible y que resulte atractivo.

Una de las principales reglas es la de usar un alto contraste entre el color del texto y del fondo (siendo el negro sobre blanco una de las combinaciones más tradicionales por su legibilidad).
Elegir colores similares dificultan la legibilidad. Sin embargo, es necesario que el contraste se dé de una manera no discordante, como el caso de caracteres rojos sobre fondo azul oscuro.

Respecto al fondo, buscar la sencillez es fundamental. Cuanto más uniforme sea el fondo, más fácil será leer los caracteres. Un fondo recargado puede distraer, y en el caso de que haya distintas combinaciones de colores puede afectar al contraste con el color de las fuentes y dificultar la legibilidad.

Según Jakob Nielsen, se deben usar colores con alto contraste entre el texto y el fondo. La legibildad óptima es la que da un texto negro sobre un fondo blanco (conocido como texto positivo), aunque texto blanco sobre fondo negro (texto negativo) proporciona resultados casi igual de buenos. Es importante que el texto sea negro, el uso de un color más claro que el negro, especialmente si el fondo no es blanco puro, dificulta también la legibilidad.

Colores.jpg


1.3. Imágen web

La web es sin duda un medio visual. Es por ello que aquellas páginas que poseen una imagen atractiva, suelen destacarse más sobre aquellas que tienen solo texto. No obstante la tarea de buscar imágenes para cada tipo de contenido, puede resultar difícil, sobre todo si tenemos en cuenta que la gran mayoría de fotos que habitan en Internet, están protegidas con copyright y su uso no autorizado puede traer serios problemas.



2. Estrategias y técnicas de guionización multimedia

Funciones del guión multimedia:

  • Recoge los resultados de las tareas de documentación.
  • Concreta la arquitectura de la información.
- Ordenar y disponer los elementos y el contenido multimedia.
- Seguir una estrategia de selección y presentación, distribución y secuencia de la información.
- Atender, adecuadamente, al perfil del usuario de destino, y a los objetivos comunicativos.
  • Define la utilización de elementos multimedia.
  • Define los elementos narrativos:
- personajes
- acción
- espacio
- tiempo
  • presenta la estructura narrativa.
  • Sirve de orientación a las tareas de producción.
  • Desarrolla la información, los contenidos, el relato.

Fases de elaboración:
1) Documentación previa (ideación)
2) Selección de elementos multimedia.
- ilustración, animación, fotografía, video, música, efectos sonoros, locuciones textos escritos,
- y su tratamiento.
3) Diseño de la arquitectura de la información:
- selección de contenidos.
- Definición de la interfaz (funciones y elementos)
- Definición de la navegación- estructura de contenidos.
4) Descripción de existentes: escenarios, personajes y elementos gráficos de la interfaz.
5) Descripción de la acción y la interacción:
- estructura: bloques/secuencias/escenas/planos.
- Variables: tareas de fondo; eventos de interacción.
- Contenidos: acción y diálogos-locuciones.

El desarrollo del guión multimedia supone dar respuesta a las seis preguntas clásicas: el Qué (los contenidos que vamos a contar) el Cómo (la manera en la que articulamos la presentación multimedia de cada recurso) el Cuándo (secuencia informativa e interactiva) el Quién (qué utilizamos para presentar la información) el Dónde (modelo de organización estructural, distribución…) y el Para quién (nuestro lectoautor buscado)
@font-face { font-family: "Times New Roman"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }table.MsoNormalTable { font-size: 10pt; font-family: "Times New Roman"; }div.Section1 { page: Section1; }
El guión completo es el anteproyecto de todas las actividades de diseño futuras, la creación de los gráficos y los medios que componen cada pantalla.

Para realizar una aplicación multimedia se debe pensar constantemente en una concepción global, es decir, no se puede perder de vista en cada detalle de la aplicación el diseño maestro que rige la estrategia de formación.

Otro factor a tener en cuenta es en qué material de soporte se hará el guión, es evidente que sobre el papel el desarrollo del guión estaría muy limitado ya que no se puede valorar “en tiempo real” la secuenciación de imágenes, sonidos, textos e hipervínculos, tal como se apreciará una vez concluido el material multimedia. Por esta razón, el Proyecto Hermes usó el lenguaje HTML para el desarrollo del guión general, en donde se pudo presentar cada pantalla y los enlaces correspondientes del proyecto sobre una página web, ya que el HTML deja vislumbrar sobre todo, el tratamiento hipertextual (aunque restringido) e interactivo que se le dará a la futura aplicación.


  • Guión de contenidos: incluirá todo lo relativo a la organización y estructuración de los contenidos, y que entre otros incluirá aspectos que tienen que ver con la modularización (diferentes niveles de fragmentación e interpretación) e interrelación (diferentes formas de vinculación entre los diferentes módulo) de los mismos. Como punto de partida se puede considerar como una primera aproximación a una representación hipertextual de los contenidos.







  • Guión de la aplicación: representa el esquema de la organización funcional de la aplicación y abarca aspectos tales como organización de la navegación, vinculación física entre elementos, etc. Estos aspectos tienen bastante que ver con la forma en como los contenidos van a ser transmitidos, o bien mediante un simple pasapáginas o vinculados a través de una historia que incluya los aspectos típicos de cualquier dramatización: planteamiento, nudo y desenlace.







  • Guión multimedia: posiblemente se debería referir a guiones en plural, debido a que una aplicación multimedia para la formación suele incluir varios elementos multimedia. En todos estos casos será preciso que exista un guión específico, que sirva de base al producto final. Se debe tener en cuenta que cuando se habla de vídeo y animaciones con sonido, las similitudes con el del cine y la televisión son más que casuales.


Una vez respondidas con profundidad todas esas preguntas, deberemos comenzar a traducir las ideas en imágenes y sonidos. Para ello, es útil establecer una rutina de trabajo que estructure los contenidos. Esa rutina de trabajo comprenderá las siguientes fases:
—Guión de contenido.
—Guión narrativo.
—Guión icónico.
—Guión de sonido.
—Guión técnico.
El Guión de Contenido indica el material textual que se va a utilizar en las diferentes secuencias y la manera en la que se va relacionando mediante una jerarquización conceptual que irá de lo más importante o lo más general o específico y que deberá transmitirse en forma muy clara en el guión.
El Guión Narrativo establece cómo se va a presentar esa información. Se corresponde a lo que conocemos también como guión literario, indicando el punto de vista y el estilo. Por tanto, se dará forma al contenido establecido en el paso anterior.
El Guión Icónico marca las imágenes que se tiene disponibles, sean gráficos, fotos, figuras, cuadros, imágenes de video o animación, y en qué momento de la narración serán utilizadas. Para que resulte más fácil, suele usarse un código que identifica cada imagen y en qué secuencia va.
El Guión de Sonido se debe desarrollar en forma sincrónica con el guión narrativo. Los registros de sonido deberán ser secuenciales, y esta secuencialidad se indicará mediante un número de orden. Los registros de sonido pueden ser directos o indirectos según la fuente de la que se haya tomado (un registro directo es por ejemplo, la grabación en off de una voz que realiza un relato y, uno indirecto, cualquier música empleada).
El Guión técnico consiste en definir las bases de la realización, la metodología, los programas a utilizar, los formatos de presentación, diseño de pantalla, los efectos a utilizar en cada parte, etc.

La unidad mínima multimedia viene definida por la “escena interactiva”. Esta escena está compuesta por elementos distintos: las tareas de entrada, las tareas de fondo, las zonas sensibles e interactivas, las tareas de salida.
Los elementos del relato multimedia son:
  • Personajes: asociados a acciones.
  • Acción: orientada a objetivos.
  • Espacio: discontinuo.
  • Tiempo: Discontinuo y variable.
  • Diálogos: Variedad formal y de origen.
La escritura del guión multimedia deberá dar respuesta a un conjunto amplio de criterios: los objetivos y el perfil de los usuarios, la selección y tratamiento de los contenidos, la organización y distribución de la información, la propuesta de itinerarios de navegación, etc.
t5-modelo-guion.png
MODELO DE GUIÓN MULTIMEDIA. Fuente: Manuel Gértrudix
MODELO DE GUIÓN MULTIMEDIA. Fuente: Manuel Gértrudix
Para Guillén Bou (2003) los principios estratégicos de la estructura multimedia son:
  • Sorpresa-coherencia
  • Atención: naturaleza y apariencia
  • Economía y “crescendos”
  • Uniformidad o unicidad
  • Dramatización.
Asimismo, indica que los principios de usabilidad lo conforman el Grado de interactividad, la redundancia o refuerzo, la vitalidad y la necesidad.

2.1. Técnicas de guionización específicas

Las Técnicas de planificación nos permiten llevar a cabo un diseño previo del multimedia. En esta etapa resulta fundamental llevar a cabo todas aquellas operaciones que garanticen que, antes de comenzar el desarrollo, el producto multimedia final responderá realmente a la idea germinal que lo ha motivado.

Según José Luis Orihuela y María Luisa Santos en su libro "Introducción al Diseño Digital", sería bueno comenzar con un "Diagrama del hipertexto". Diseñar la estructura hipertextual de la aplicación exige fragmentar el contenido editorial disponiéndolo en zonas, secuencias y nodos y estableciendo su correspondiente codificación.



Guión_multimedia.jpg
Guión_multimedia.jpg


Para cada uno de los nodos, los autores proponen la confección de una ficha que dé cuenta de los elementos utilizados y su articulación en la pieza.

Más información aquí.



a. Storyboarding



Un storyboard es un conjunto de ilustraciones mostradas en secuencia con el objetivo de servir de guía para entender una historia, previsualizar una
animación o seguir la estructura de una película antes de realizarse o filmarse.

El proceso de storyboarding, en la forma que se conoce hoy, fue desarrollado en el estudio de Walt Disney durante principios de los años 1930, después de varios años de procesos similares que fueron empleados en Disney y otros estudios de animación. El storyboarding se hizo popular en la producción de películas de acción viva durante principios de los años 1940.
En la creación de una película con cualquier grado de fidelidad a una escritura, un storyboard proporciona una disposición visual de acontecimientos tal como deben ser vistos por el objetivo de la cámara. En el proceso de storyboarding, los detalles más técnicos complicados en el trabajo de una película pueden ser descritos de manera eficiente en el cuadro (la imagen), o en la anotación al pie del mismo.
La elaboración de un storyboard está en función directamente proporcional con el uso: en publicidad a menudo es mucho más general para que el director y el productor aporten con su talento y enriquezcan la filmación, mientras que en cine es mucho más técnico y elaborado para que sirva de guía a cada miembro del equipo de trabajo.
También podemos encontrar storyboardsllenos de color o en blanco y negro, lleno de detalles o simplemente trazos que esbozan una idea de figuras. Es común la utilización del storyboard en animaciones ya sea tradicionales o por computadoras


Aunque la evolución y desarrollo de los guiones gráficos o Storyboard está vinculada con el cine, en la producción y realización de productos multimedia, es un elemento fundamental.
Básicamente podemos definir un Storyboard como un modelo de visualización gráfica del guión y su estructura (Hart, 2001: 25)
Como técnica de representación gráfica de soporte a la producción, bebe en sus orígenes del cine y del cómic fundamentalmente (Bou, op.cit.: 127 y sucs.) si bien ha sido aplicada con fortuna en otros campos.
En una producción multimedia nos permite realizar una primera aproximación a las necesidades de producción, por una parte, y definir la tipología de diseño que vamos a seguir. En la medida en que la producción multimedia se acerque en su lenguaje al cine (v.g. animación) será útil, además, para establecer la planificación básica (ángulos de cámara, posiciones, encuadres, etc.).
Granollers i Saltiveri y Lorés Vidal reconocen que para algunos autores, el storyboarding es un prototipado de baja fiabilidad. No obstante, ellos lo recomiendan especialmente para proyectos dirigidos a modificar un proceso de trabajo o las tareas habituales de un trabajador. El storyboarding no sirve para comprobar la interactividad del sistema, pero sí para discutir con diseñadores, clientes y responsables del proyecto los detalles de su funcionamiento.

t5-modelo-story.png
EJEMPLO DE STORYBOARD DE UNA AVENTURA GRÁFICA. Fuente: Elaboración propia. (Recurso Folclore y Flamenco. CNICE-MEC)
EJEMPLO DE STORYBOARD DE UNA AVENTURA GRÁFICA. Fuente: Elaboración propia. (Recurso Folclore y Flamenco. CNICE-MEC)





Una manera sencilla de realizar un storyboard, es la siguiente: debe combinar de manera interactiva texto, imágenes, audio y video. Lo primero que hay que hacer es dividir la historia sobre sus partes lógicas, no lineales, como:- Una introducción con una entrada o párrafo principal donde se refleje por qué esta historia es importante. - Perfiles de los personajes de la historia.- Los acontecimientos que se quieren contar- El proceso de cómo se produjo lo que se va a contar.- Los pros y los contras- La historia del acontecimiento o la situación.- Otras cuestiones relacionadas con la historia.La página inicial (home) debe comprender un titular, el gráfico principal, un establecimiento visual y debe vincularse a otras partes, que son, por lo general, los subtemas de la historia total.Después, de distribuir el contenido de la historia entre los medios a utilizar: video, fotos, audio, gráficos y texto, habrá que decidir qué parte de la historia se trabaja mejor con cada medio.
Un mapa interactivo ayuda a personalizar una historia, dándole al lector el camino para ubicar las ciudades o lugares específicos donde se desarrolla la historia que se está relatando. Es importante verificar que la información en cada medio sea complementaria y no redundante.La historia no debe ser lineal, sino interactiva. Lo que el storyboard hace es ayudar a precisar los puntos principales de la historia. Esto ayudará a identificar los recursos que se necesitarán para completar la historia, y a saber cómo se tendrá que modificar la historia para adaptarse a esos recursos.
Podemos ver más ejemplos de storyboard, aquí

CARACTERÍSTICAS BÁSICAS DE FORMATO DEL STORYBOARD:

1. El tamaño de las viñetas debe ser proporcional al formato de pantalla utilizado en la producción final. Los trabajos hechos para la televisión, producidos en cine o vídeo (videoclips, anuncions comerciales) y los audiovisuales con transparencias utilizan el formato denominado "académico" que tiene una proporción de tres tantos de altura por cuatro de ancho (3x4 ó 1.33:1). Los trabajos hechos para el cine pueden variar de proporción según el formato de película o de proyección que se utilice. La película de Super 8 mm y la de 16 mm utilizan el formato de 1.33:1 Para la película de 35 mm (cine comercial profesional) existen los siguiente tres formatos:


- Widescreen o Pantalla Ancha (1.85:1). Es la norma comercial en la actualidad.
- CinemaScope (2.35:1) Antiguamente este formato variaba de 2.55:1 a 1.66:1.
- Panavision (2.4:1)
- Super Panavision (2.4:1)
- Super 35 (varía de 1.66:1 a 2.35:1)
- Vista Vision (varía de 1.66:1 a 2:1)

2. Una vez determinado el orden de lectura del storyboard (de izquierda a derecha o de arriba hacia abajo) este se debe mantener hasta el final.
3. Aunque existe un elevado número de formas para indicar la transacción entre las imágenes de un stroyboard, la siguiente nomenclatura puede resultar sencilla de utilizar:
- Las transacciones por corte directo no se indican.
- Las transacciones por movimiento de cámara hacia o desde el tema (dolly in, dolly out) se indican con una flecha diagonal, dirigida hacia donde va el movimiento.
- Las transacciones por movimiento de lente de la cámara (zoom) se indican con cuatro flechas dibujadas dentro de la viñeta, todas dirigidas hacia donde va el movimiento (hacia dentro de la imagen o desde dentro de la imagen).
- Las transacciones por disolvencia entre una imagen y otra se indican con dos líneas curvas cruzadas en x.
- Las transacciones por movimiento de cámara laterales (travelling, paneo) o verticales (tilt) se indican con una flecha dirigida hacia donde va el movimiento (de izquierda a derecha, de derecha a izquierda, de arriba hacia abajo o de abajo hacia arriba). (Fuente de información principal: scribd. com, Carlos Medrano, 2009)


storyboard_seniorcorps.jpgstoryboard-pro-36.jpg




a1. Storyboard

El “storyboarding” se remonta a los comienzos del cine, cuando el celebre director ruso Sergei Eisenstein (El acorazado de Potemkin) empezó a usar esta técnica, pero se cree que una metodología similar fue puesta en práctica por Leonardo Da Vinci, quién utilizó tarjetas para poner sus ideas sobre la pared y examinar su disposición.
El Storyboarding es una técnica de creatividad que permite sumergirse de forma total en ciertas ideas, con el fin de resolver un problema o generar un nuevo concepto, pues gracias a ella es posible ver las ideas de forma conjunta, junto con sus similitudes e interconexiones.
La práctica del Storyoarding es hoy en día una popular técnica para facilitar el proceso de pensamiento creativo, que consiste básicamente en escribir sus ideas y pensamientos -y los de otros-, y ubicarlos sobre un pizarrón o pared, tanto si se trabajará en un proyecto o en la resolución de un problema.
Claro que si bien, como señalamos, esta técnica tiene una larga historia, la misma no se popularizó sino hasta que, dentro del mundo de la animación, Walt Disney junto con todo su personal desarrollaron un sistema de Story Board en 1928.
Disney buscaba lograr una animación total y para esto necesitaba producir un enorme número de dibujos. Pero manejar los miles de dibujos era muy difícil, así que Disney les dijo a sus artistas que los sujetaran con chinches sobre las paredes del estudio. De esta manera, se podría verificar el progreso, y así agregar o desechar escenas con suma comodidad.
Con el uso de tarjetas, se logran ver mejor las interrelaciones y correspondencias entre las ideas, y se tiene una mejor proyección del panorama global. Además, una vez que se comenzaron a utilizar las tarjetas, es más probable que las personas que intervienen se comprometan (y entusiasmen) con la tarea, y comiencen a surgir nuevas ideas e interrelaciones.
Para implementar una solución de Story Board, se puede utilizar una pared de corcho o una superficie semejante, que permita sujetar algunas fichas de papel. También existen programas de software de disponibles, como el Corkboard de Macintosh.

Primero se coloca una tarjeta que indica el tema, y bajo la misma se van poniendo diversas tarjetas que hacen las veces de encabezados sobre las tarjetas que vendrán: aspectos generales, categorías, consideraciones, etc.
Bajo estas tarjetas de encabezamiento, se pondrán tarjetas de sub-ítems, que contendrán ideas relacionadas con las tarjetas de cada encabezamiento; estas son ideas de detalles generados por la sesión de pensamiento creativo, es decir ideas que desarrollan o complementan los encabezamientos.
El Storyboarding, funciona muy bien en las sesiones grupales.
Según los especialistas, existen cuatro tipos principales de Storyboarding: 
- de Planeamiento,
- de Ideas, 
- de Comunicación 
- de Organización.

Durante una sesión de storyboarding, se deben considerar todas las ideas pertinentes, incluso por poco prácticas que ellas se vean.
En efecto, se debe pensar positivamente, dejando de lado toda crítica, por lo menos hasta más tarde, y prestando atención -y participando- a las ideas que se consideren relevantes.

En otras palabras: las sesiones de pensamiento creativo deben ser separadas de las sesiones de pensamiento crítico.

A continuación expongo un vídeo explicativo sobre cómo desarrollar un storyboard, tanto para animaciones como para película.




b. Técnica del wireframing

Wireframing es una manera de diseñar un sitio web en el nivel estructural analizando las necesidades de el usuario, asi como la información que llevara dicho sitio .
Los Wireframes se usan al incio de un proceso de desarrollo para establecer la estructura básica de una página antes de que el diseño visual y el contenido se agrege.
El objetivo de un Wireframe es proporcionar una comprensión visual de una página de inicio de un proyecto web para obtener la aprobación de los interesados y de el equipo del proyecto, antes de que la fase creativa se ponga en marcha.


El concepto de //wireframe// deriva del diseño gráfico, donde hace referencia al esqueleto de una imagen semitransparente que muestra solo las aristas de la malla del objeto que representa.

Así, la técnica del wireframing aplicada a esta fase del desarrollo permite generar una estructura básica (estática o funcional) del multimedia y comprobar si esta responde adecuadamente a las necesidades del destinatario. Dejando de lado el diseño, un wireframe muestra la armadura del multimedia, y representa el flujo de entradas y salidas de cada pantalla. De este modo, se atiende a los dos aspectos básicos previos al diseño: operatividad (usabilidad, accesibilidad, funcionalidad…) y estructura del contenido.

t5-modelo-wireframe.png
t5-modelo-wireframe.png











En el desarrollo web, suele hacerse partícipes a los usuarios del proceso de diseño a través de la publicación de los wireframes que reflejan la estructura. Las observaciones que realizan los testeadores (cliente, agencia, usuarios tipo…) resultan de gran valor al facilitar una información de primera mano sobre las dificultades y ventajas que encuentran en la estructura propuesta. Cuando se trata de nuevos desarrollos, especialmente en proyectos de tamaño medio o grandes proyectos, además del criterio del cliente se suelen utilizar pruebas con usuarios potenciales para analizar si la planificación de la web está bien enfocada.

t5-modelo-wireframe2.png
NARRACIÓN GUIADA CON WIREFRAMES. Fuente: CNICE (MEC) Datos propios.
NARRACIÓN GUIADA CON WIREFRAMES. Fuente: CNICE (MEC) Datos propios.
Una de las evoluciones de esta técnica es la narración guiada con wireframes (Guided wireframe narrativa) propuesta por Zapata (2006) Su utilización está indicada en aquellos casos en los que no es posible desarrollar un prototipo pero sí es necesario, por la complejidad de la aplicación a desarrollar, disponer de un modelo que permita contrastar con los usuarios (y los clientes) si el diseño contempla toda la información que será necesario manejar.
Se trata, en definitiva, de la presentación secuenciada de los wireframes (con algún programa al efecto) relatando, en cada caso, las precisiones o excepciones que sean necesarias para comprender, correctamente, el futuro funcionamiento de la aplicación. Este tipo de narraciones deben mostrar, de forma desagregada (para evitar sobrecargas de información): la jerarquía del multimedia, la definición de las pantallas, los elementos básicos de diseño, y los modelos de interacción previstos. Sus principales ventajas, frente a la técnica de los prototipos, es que resulta más sencilla y económica; frente a los wireframes clásicos y los guiones gráficos, que permiten una cierta funcionalidad que simula, a grandes rasgos, lo que se ha pensado para la aplicación definitiva.

b1. Wireframe

Un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios. No es el aspecto final del sitio, sino una mera representación gráfica de su contenido.

Antes de acometer un wireframe se deben realizar las siguientes tareas:
  • Entrevistas con el cliente y el equipo de desarrollo para definir los requisitos, los objetivos y el público objetivo.
  • Estudio del portal actual (si existe): problemas de usabilidad y accesibilidad, estadísticas de acceso, test con usuarios y encuestas (en función del tipo del portal).
  • Benchmarking, o estudio comparativo de la competencia.
  • Definición de la arquitectura de información y mapa web.

Ventajas de crear Wireframes
Hay dos grandes ventajas, por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costes y tiempos.
El doctor Granollers resume estupendamente las principales características o ventajas de los prototipos (se refiere a los prototipos en general, no a los wireframes en particular):
  • Son formidables herramientas de:
  • Comunicación entre todos los componentes del equipo de desarrollo y los usuarios
  • Participación, para integrar activamente a los usuarios en el desarrollo.
Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.
Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos).
Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas concretas del mismo.
Son el primer paso para que ideas abstractas sean concretas, visibles y testables.
Fomentan la iteratividad.
Mejoran la calidad y la completitud de las especificaciones funcionales del sistema.
Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de una idea, clarificar requisitos que quedaron “indeterminados” o ver cómo responde con el resto de la aplicación.

Tipos de Wireframe
  • Content-only: tan sólo consta del nombre de la página y un listado de contenidos
  • Diagrama de bloques: contiene sólo la información básica a través de bloques de funcionalidad y agrupamiento de contenidos.
  • Wireframe detallado: tendría todos los elementos antes mencionados incluidas las notas de comportamiento (Ejemplo: Wireframe del Rediseño del blog El Factor Humano 2.0 de WebStudio)

Como se hace un wiriframe
  • Haz una lista numerada de toda la información que debe tener tu página (no sólo datos, sino también acciones, actitudes), lo que llaman "bit".
  • Agrupa los "bits" que se relacionan entre sí. A cada grupo lo llamarías con una letra y asociada a esa letra pondrías los números de la información que relaciona. Por ejemplo A:1,3,5
  • Prioriza qué grupos son los más importantes desde un punto funcional, agrupando los grupos en tres prioridades: Lo más importante, Lo necesario y Lo que es bueno tener.
  • Diseña cada fragmento, cada agrupación de "bits". Lo podemos hacer sin preocuparnos de los conflictos porque ya sabemos que incluyen a todos los elementos relacionados entre si.
  • Junta los fragmentos teniendo en cuenta la prioridad y el equilibrio.
  • Hazlo real. Hasta ahora todo lo hemos hecho en papel, es el momento de pasarlo a pantalla y hacer los ajustes necesarios para ello.

Para realizar un Wiriframe:

Depende de cual manejes con mayor fluidez. Puedes usar Illustrator, Photoshop, PowerPoint, Visio, OpenOfficeDraw, Omnigraffe, etc.
Pero sí que existen herramientas específicas para realizar Wireframes, por ejemplo Axure.
Axure permite crear de manera muy sencilla un prototipo funcional (mostrar y ocultar paneles, cambiar el estado o el contenido de los elementos, por ejemplo de los campos de un formulario; crear zonas fijas reaprovechables por todo el prototipo, etc.) También permite exportar un documento Word con los pantallazos de la aplicación y sus partes para redactar el análisis funcional. Podéis conocer las novedades de Axure 6 en el artículo: Novedades Axure 6

Errores en la creación de Wireframes



Hay tres errores típicos:
  • Realizar Wireframes demasiado complejos en su forma
  • Realizar Wireframes con algo diseño gráfico
  • Incluir un exceso de información
Para evitarlos es bueno seguir las recomendaciones de Liz Danzico en “The Devil’s in the Wireframes”
  • Amplifica a través de la simplificación:

    El Wireframe debe ser claro, sin diseño, ni iconos, ni color. Por ello Gene Smith propone usar una única figura, un único color y un único tipo de letra. Tampoco es necesario ser tan estrictos, pero ayuda a entender la filosofía del Wireframe.
  • Quita los detalles innecesarios: debe contener el mínimo número de elementos necesarios para que no distraigan la atención.
  • Anota cuidadosamente pero sólo lo realmente relevante.http://www.ehu.es/Degypi/Gestion/gespro2va.htm#_2.-_Herramientas_de

    Habrá que tener en cuenta además como se va a presentar, si va a ser un entregable deberá ser autoexplicativo por si mismo, pero si se va a presentar personalmente al cliente (como debería hacerse siempre para evitar interpretaciones subjetivas) no necesitará anotaciones tan detalladas.

c. Técnica del “prototipado"

La elaboración de prototipos es una técnica que resulta útil cuando se trata de proyectos complejos, de alcance económico alto, y en los que se cuenta con clientes o usuarios finales que son capaces de “leer” adecuadamente las características de un prototipo. El objetivo de un prototipo es ayudar en la detección de posibles errores funcionales o de diseño, evitar malas orientaciones de desarrollo (derivadas, por ejemplo, de diferentes interpretaciones entre el cliente y el equipo de diseño multimedia) y, sobretodo, ayudar a organizar efectivamente el camino de producción, lo que ha de suponer un ahorro de costes y tiempo en la fase de desarrollo.
Son numerosas las formas de realizar un prototipo, pues podemos ir desde esquemas básicos realizados en papel, a representaciones de gran fidelidad que, además, ofrecen un modelo de funcionalidad característica del multimedia.
Es recomendable que los prototipos estén desarrollados de forma modular y sean reutilizables, pues ello permite que el esfuerzo realizado pueda aprovecharse en fases posteriores del desarrollo. Así, podemos considerar dos tipos de prototipos:
  • Reutilizables (evolutionary prototyping): Se elabora de modo que el conjunto o algunas partes sirvan de base al desarrollo final.
  • Modulares (incremental prototyping): Se genera un modelo básico y, a partir de este, se van añadiendo nuevos elementos según evoluciona el ciclo de desarrollo.
La técnica del prototipado en papel es un modelo dirigido al diseño iterativo de interfaces de usuario que se basa en la producción de un modelo en soporte papel sobre el que se realizan pruebas de usuario en el diseño inicial de interfaces y estructuras de información de productos multimedia.
Reúne algunas características interesantes por las que resulta eficaz en numerosos casos. En primer lugar, es un sistema rápido y barato para realizar pruebas con usuarios y calibrar, de este modo, la utilidad del diseño de un sistema multimedia. En segundo, al poder realizarse de forma sencilla permite realizar pruebas correctivas de forma secuenciada, con lo que es posible ir realizando cambio de manera ágil en el diseño inicial.

Supongamos que tratamos de simular el comportamiento de una funcionalidad concreta de una aplicación que se ejecuta en un PDA. Los prototipos de papel serán las diferentes pantallas que el usuario se encontraría como resultado de las diferentes interacciones que produciría, las cuales son, evidentemente, ficticias.
Cuando se realiza un prototipo de papel, no debemos olvidar que de lo que se trata es de reflejar aquellos aspectos de la interfaz del usuario referidos a las interacciones que el sistema le proporciona. Esto indica un prototipo de papel que deberá mostrar dos aspectos muy importantes: uno es la presentación, que hace referencia a qué elementos proporciona esta interfaz para la interacción, y el otro es la navegación, en forma de información complementaria con diseño claramente perceptible que facilite la movilidad durante la fase de evaluación del prototipo. Esta técnica proporciona ciertas posibilidades interactivas al prototipo que facilitan su evaluación (Granollers i Saltiveri y Lorés Vidal, 2005).
.

Dado que supone realizar pruebas sobre un soporte distinto sobre el que se desarrollará posteriormente el producto, posee sus propias estrategias de desarrollo, así como códigos específicos para ilustrar convenientemente la representación de pantallas, los widgets de la interfaz, o los elementos que responden a interacciones complejas del usuario, como búsquedas, soltar y arrastrar, cambios de foco, scrolling, o manejo de elementos multimedia.

t5-prototipado-papel.png
EJEMPLO DE PROTOTIPADO DE PAPEL. Fuente: Nielsen Norman Group

EJEMPLO DE PROTOTIPADO DE PAPEL. Fuente: Nielsen Norman Group

PARA QUE SIRVEN Y COMO SE UTILIZAN LOS PROTOTIPOS.
No siempre resulta conveniente el desarrollar una página Web definitiva desde el inicio de un proyecto, ¿qué sucede si al solicitante le resulta muy difícil expresar sus requerimientos?, ¿Si por la propia naturaleza del proyecto, no se cuenta con la información necesaria?, o si el Usuario se limita a señalar a grandes rasgos sus requerimientos, sin ahondar en ningún detalle?, en ese momento el desarrollador Web debe tener en cuenta que quizás es mucho más seguro y menos costoso descubrir los requerimientos reales creando un modelo preliminar, es decir, un modelo navegable, con una colección sencilla de documentos entrelazados y gráficos estáticos, pero que se utilizará para definir y probar el contenido de la página definitiva. Es comprensible que en estos casos, es mucho mejor desarrollar ese modelo preliminar y corregirlo cuantas veces sea necesario, que modificar una página Web que esté completamente terminada, esto último resultará tardado y costoso.
A este modelo preliminar se le conoce con el nombre de prototipo, un primer modelo, por lo general, aún en fase de diseño o desarrollo y con sus características todavía no completamente definidas, pero que antes de que entre en uso, podrá servir para detectar errores, deficiencias, carencias, probar opciones, aclarar dudas de diseño en cuanto a funcionalidades o apariencia.

Un PROTOTIPO es una visión preliminar del modelo futuro, es un modelo operable, fácilmente ampliable y modificable, que tiene todas las características propuestas, pero realmente es un modelo básico que tiene que ser mejorado.

El usuario puede interactuar con la página -Web-prototipo, sin embargo la calidad de los gráficos, los sonidos, la propia interfaz, o los enlaces, son únicamente una muestra de lo que se espera incluir en forma definitiva.
Es claro que las ventajas principales de la elaboración de prototipos son: la posibilidad de cambiar el modelo, la oportunidad para suspender el desarrollo del modelo si no es funcional y la posibilidad de crear un nuevo modelo que se ajuste mejor a las necesidades y expectativas de los usuarios. Cuando se hace un modelo de este tipo, el desarrollador Web está buscando las reacciones iniciales de los Usuarios ante el prototipo (sugerencias sobre cambios, posibles innovaciones, partes a realizar primero, contenidos adicionales, gráficos distintos, más o menos colores, textos diferentes, etc.)
Las sugerencias por parte de los Usuarios son el producto de su interacción con el prototipo, al igual que sus reacciones sobre esa interacción. Las sugerencias obtenidas de los usuarios llevan al analista hacia adecuaciones o cambios que se ajustan mejor a las necesidades de los usuarios, y que no habían sido pensadas antes de la interacción el usuario con el prototipo.
La elaboración de prototipos de páginas Web requieren de tiempo, por lo que hay que tener cuidado de que durante este lapso de desarrollo los requerimientos del usuario no hayan cambiado, ni sus objetivos apunten hacia otro lado; de aquí la importancia de una planeación adecuada para la creación del prototipo, que contemple la secuencia correcta y lleve al desarrollador Web a pasar sin problemas del modelo
“muestra” al modelo “definitivo” en el tiempo adecuado.

Tipos de prototipo.
Walter Maner (1997), en su artículo “Prototipado”, establece una clasificación de los prototipos, misma que ha tomado para su clasificación:
  • Baja Fidelidad: conjunto de dibujos estáticos, no computarizados y no operativa de una interfaz de usuario de una página Web en planeación. Son realizados de manera rápida y sencilla (papel, dibujos, o presentaciones en la pantalla de la computadora).
  • Alta Fidelidad: conjunto de pantallas que proporcionan un modelo dinámico, computarizado y operativo de una página Web en planeación. Son modelos con mucho más detalle desde el punto de vista gráfico y de programación.
  • Exploratorio: prototipo no reutilizable utilizado para clarificar las metas delproyecto, identificar requerimientos, examinar alternativas de diseño o investigar un modelo extenso y complejo.
  • Experimental: prototipo utilizado para la validación de especificaciones de una página Web.
  • Operacional: prototipo iterativo que es progresivamente refinado hasta que se convierte en el modelo.
  • Horizontal: prototipo que modela muchas características de una página Web pero con poco detalle, será particularmente útil en las primeras etapas, y tiene como objetivo probar el modo de interacción global, al contemplar funciones comunes que el usuario va a utilizar frecuentemente.
  • Vertical: prototipo que modela pocas características de la página Web pero con mucho detalle, va a resultar especialmente útil en etapas más avanzadas del diseño y tiene como objetivo el probar detalles del diseño.
  • Global: prototipo del modelo completo. Prototipo horizontal expandido que modela una gran cantidad de características y cubre un amplio rango de funcionalidades.
Va a resultar muy útil a lo largo de todo el proceso de diseño.
  • Local: prototipo de un único componente o característica del modelo de usabilidad crítica. Va a resultar de utilidad en algunas etapas específicas del proceso de diseño.

Ventajas y desventajas de un prototipo.
La elaboración de un prototipo puede tener varias VENTAJAS:
Ø Ser fácilmente modificable.
Ø Evitar sorpresas desagradables al destacar los requerimientos incompletos o inconsistentes y la falta de funcionalidad.
Ø Reducir los costos de rediseño si los problemas se detectan pronto y cuando son fáciles de localizar.
Sin embargo, también hay que tener en cuenta los RIESGOS que pueden representar:
Ø Llevar a un número de cambios excesivo.
Ø Hacer pensar a los usuarios que el producto final está prácticamente terminado.
Ø Ignorar importantes características del modelo durante el desarrollo del prototipo, o alargarse el proceso de desarrollo en exceso si no se han establecido criterios para la terminación pertinente.

METODOLOGÍA PARA LA CONSTRUCCIÓN DE PROTOTIPOS.
La metodología propuesta para la elaboración de “prototipos de páginas Web” contempla siete etapas: 1. Delimitación del proyecto, 2. Planeación del proyecto,
3. Análisis del prototipo, 4. Diseño del prototipo, 5. Desarrollo del prototipo,
6. Implementación del prototipo, y 7. Evaluación del prototipo

ETAPA 1. DELIMITACIÓN DEL PROYECTO
Tiene por objetivo lograr un entendimiento claro de las necesidades del proyecto y del ambiente en que operará el prototipo.

1.1 Definir la situación actual: identificar todos los factores relacionados con el contexto del proyecto, ubicando el alcance del prototipo, describiendo cómo se está manejando la información, qué desea el Usuario que contemple la página
Web, quienes son los usuarios reales y potenciales, así como, las políticas y estrategias que aplican para el proyecto.

1.2 Definir la situación deseada: Describir a detalle qué espera el Usuario lograr con el prototipo, qué piensa que deberá contener, preferencias sobre un tipo en especial de modelo, etc.

1.3 Limitaciones o restricciones: Listar cualquier restricción que pueda impedir el desarrollo o publicación del prototipo.

ETAPA 2. PLANEACION DEL PROYECTO.
Es un conjunto de acciones que permiten guiar y controlar el proyecto hacia su terminación exitosa; comienza a partir del establecimiento (en la etapa anterior) de las necesidades del Usuario, y abarca hasta la terminación del producto y su entrega.

2.1 Formar el equipo de trabajo: Se trata de conformar el conjunto de personas que estarán a cargo de la concepción, construcción, evaluación y mantenimiento del sitio.
Este tipo de proyectos deben ser desarrollados por un equipo multidisciplinario integrado por: programadores, ingenieros en telecomunicaciones, diseñadores gráficos, correctores de estilo, y especialistas en mercadotecnia; siendo éstos los más comunes, pero pudiendo integrarse a éste, una gran diversidad de técnicos de otras áreas relacionadas con la naturaleza propia del proyecto.
De este conjunto seleccionado deberá nombrarse un “Coordinador” del proyecto, que será el responsable de la comunicación directa con el Usuario, del control del desarrollo de las actividades y de guiar al equipo en todo momento.

2.2 Control del proyecto:
Es necesario diseñar un plan, que deberá estar siempre a la vista y disponible para todos y cada una de las personas perteneciente al equipo de trabajo, y que permita el control y desarrollo eficiente de las actividades del proyecto.
Este plan debe contener cada una de las acciones a realizar, por más trivial que parezca, siendo responsabilidad del Coordinador del equipo, ejecutarlo y darle seguimiento. El plan también debe contemplar las políticas, estrategias, tiempos, recursos financieros, recursos humanos, y un cronograma, que permitirán guiar las acciones del proyecto adecuadamente.

ETAPA 3. ANALISIS
La etapa de análisis toma los aspectos detectados en la delimita ción del proyecto y los desglose a detalle, haciendo posible un diseño sólido dentro de las metas fijadas por el Usuario y tomando en cuenta la planeación establecida en la etapa anterior.

3.1 Recopilación de la información.
a. Alcances y objetivos del proyecto:
Si el prototipo de página Web está inmerso en un proyecto del cual únicamente en un producto más, deberá establecerse con claridad tanto el alcance (área), como el objetivo del mismo.
b. Objetivo(s) del prototipo:
Qué se busca, qué se espera obtener con el modelo a construir, ajustándose éstos fines a los objetivos del proyecto en general.
c. Tipo de usuario:
Conocer el tipo de personas a las cuales estará dirigida la página, tanto reales como potenciales; debiendo considerar la edad, preferencias, idioma, nacionalidad, etc.; la elección objetiva de los usuarios potenciales del modelo, repercutirá en forma directa sobre el contenido, diseño y promoción de la página-prototipo.
d. Tipo de prototipo a desarrollar:
Determinar si el prototipo será: de alta fidelidad, de baja fidelidad, exploratorio, experimental, operacional, horizontal, vertical, global o local.
e. Recursos:
Determinar que recursos materiales y humanos se necesitarán para desarrollar el prototipo y quienes los han de proporcionar.
f. Contenido del prototipo:
Listar la información que debe tener el prototipo para lograr alcanzar los objetivos establecidos y satisfacer los requerimientos del Usuario.
g. Infraestructura:
Identificar el lugar físico donde residirá el servidor y las computadoras para el desarrollo, considerando también el aire, la seguridad, etc.
h. Hardware:
Identificar la(s) computadora(s) para el desarrollo del prototipo, así como el posible servidor.
i. Sitios Web:
Detectar sitios Web similares que sirvan a los desarrolladores como puntos de partida para el diseño y usabilidad del prototipo.
j. Criterios de calidad:
Establecer con el Usuario los criterios de calidad que debe tener el prototipo.
k. Imágenes:
Recolectar, definir o elaborar las imágenes que puedan servir para la página (animaciones, fondos, imágenes fijas, iconos, botones, logotipos, interfaces prestablecidas, ...)
l. Software:
Identificar los programas disponibles que se usarán para:
* Crear y editar la página Web: Front Page (de Microsoft), Dreamweaver (de Macromedia), Adobe GoLive, Yahoo Page builder.
* Editor de gráficos: Fireworks, Photo Shop, Ulead Photo Impact, Paint Shop Pro.
* Crear animaciones: Flash MX, Gif animador.
* Creación y visualización de documentos: Acrobat reader, Acrobat
Writer
* Navegador: Microsoft Explorer, Netscape, Firefox, Opera
* Editor de videos: Sony Vegas
* Editor de sonidos y procesador de audio: Sony Sound Forge, Real producer
* Creación de vistas panorámicas: Easypano, Panavue
* Creación y edición de realidad virtual: Maya, 3D Studio Max
* Creación y edición de textos estáticos: Word
3.2 Análisis de la información.
Después de haber reunido todos los datos necesarios, se procederá a analizarlos, para poder llegar a una definición precisa de lo que se espera y el tipo de prototipo de página Web a desarrollar. Si con la información reunida quedasen algunas dudas sobre el contenido de la página prototipo, entonces deberá acudir nuevamente con el Usuario y aclararlas.

ETAPA 4. DISEÑO DEL PROTOTIPO
Esta etapa toma los requerimientos y especificaciones de la etapa de análisis y determina la mejor manera de satisfacerlos, según las apreciaciones del Usuario y del que lo desarrolla.

4.1 Bosquejo
Después de haber definido el proyecto y haber planeado el desarrollado del mismo es necesario hacer una presentación a los Usuarios, de lo que se espera obtener, esto puede ayudar a hacer más eficiente el prototipo antes de su diseño definitivo.
La finalidad de este bosquejo es establecer, a partir del trabajo con los Usuarios, las líneas básicas del proyecto, principalmente en lo que respecta a funcionalidad y estructura del prototipo. Este “diseño rápido” normalmente se hará de manera sencilla (diagramas o presentaciones en la pantalla de la computadora), pero dará una idea clara al Usuario del tipo de página Web con que puede contar y sus alcances.
Este bosquejo deberá exponer claramente el prototipo, sus alcances, tipo de modelo a desarrollar, el equipo de trabajo, un cronograma, los requerimientos para el diseño y desarrollo, el contenido de la página -prototipo, la interfaz y las potencialidades.
Una vez realizada la presentación, el Coordinador podrá determinar si la idea ha sido correcta, o si se ha presentado algún desvío con respecto a las metas fijadas, pudiendo en este momento corregir y “repensar” sin ninguna dificultad el modelo a desarrollar.

4.2 Diseño detallado.
Una vez que el Usuario ha autorizado el “bosquejo” presentado, es el momento de diseñar la página-prototipo, tomando para ello en cuenta los siguientes aspectos:

a. Alojamiento del prototipo:
Definir el lugar “hosting” donde será colocado el prototipo para su publicación, de forma que los Us uarios puedan tener acceso a él a través de
Internet.
Este alojamiento puede ser: virtual (se alquila o regala, pero no se tiene control sobre él), un servidor propio (el control sobre él es total, pero es caro), y servidor dedicado (se alquila, y es de uso exclusivo).

b. Claridad:
“La información tiene que ser clara y concisa, de acuerdo al tipo de Usuario.
El prototipo debe estructurarse de manera que la información esté siempre localizable, el usuario debe saber en todo momento dónde está y dónde puede ir, pero sin que resulte recargada” (Depto. de Marketing y Servicios
Internet de Iuris.doc, 2005).

c. Contenido:
Determinar cuál y de que tipo es la información que se va a mostrar, con qué recursos materiales y herramientas se cuenta (se van a realizar especialmente para el proyecto o se usarán algunas ya existentes), las bases que albergarán los datos, el o los idiomas en que se presentarán los contenidos, contendrá la página información de impacto (¿cuál sería?), estará resumida o completa, de que naturaleza es el contenido, cual se imprimirá, que hay que resaltar, ayudas, etc.
Una vez, enlistado lo anterior, hay que considerar que la información debe tener una organización que facilite su acceso y la presente como un todo, considerando que la lectura en la Web no es secuencial, debe tenerse especial cuidado en suministrar formas adecuadas para que la navegación sea directa.
Es necesario organizar la información, dividirla en áreas (lógicas) y ligar a cada una de éstas los documentos correspondientes, construyendo una estructura jerárquica, estableciendo niveles y relaciones; la definición correcta de esta estructura permitirá al Usuario encontrar “las cosas” más fácilmente.

d. Datos generales de la página-prototipo:
Establecer el nombre de la página, el autor, contadores, correos para contactos, copyright, logotipos, colores, emblemas, …

e. Estandarización:
El Depto. de Marketing y Servicios Internet de la compañía “Iuris.doc”
recomienda: Tener cuidado en respetar el contenido y no tomar como base para el diseño de la página lo atrayente de los elementos gráficos, es importante que el prototipo no esté “cargado” facilitando de esta manera la descarga en el momento de visualizarla.
Es recomendable utilizar un formato de resolución de pantalla estándar (actualmente 800x600) que permita a una mayoría de usuarios visualizar correctamente la información, así como usar diferentes tipologías y versiones de navegador.

f. Esquema de navegación:
Realizar un gráfico que muestre la página de acceso principal al prototipo, los documentos clasificados, y la relación entre ellos.

g. Hardware:
Detallar las características de las computadoras para el desarrollo del prototipo, así como las del servidor.

h. Integración:
Conservar la integración de cada uno de los elementos, es decir, que el diseño de los logotipos, e incluso el lenguaje utilizado, se mantengan homogéneos en cada sección del prototipo. Esta integración se debe mantener también respecto a la estrategia general del Usuario y su imagen hacia el exterior.

i. Interactividad:
Al respecto el Depto. de Marketing y Servicios Internet de la compañía
“Iuris.doc” señala que la interactividad es el elemento primordial que “hace la diferencia” entre Internet y otros medios de comunicación, por lo que es importante aprovechar estos elementos interactivos para conocer a los usuarios y atraerlos a la consulta permanente de la página (foros, chats, cuestionarios, juegos, etc.)

j. Interfaz:
El formato gráfico debe estar centrado en el usuario y su accesibilidad, debe ser atractivo para él, creándolo con una lógica visual que represente y optimice la lógica de la estructura de los contenidos, y que sea coherente con los objetivos del proyecto y de la página establecidos inicialmente.
Carlos Dorado en su artículo “El diseño del interfaz y la navegación” señala:
“Podemos definir el interfaz como: el conjunto de trabajos y pasos que seguirá el Usuario, durante todo el tiempo que se relacione con el prototipo, detallando lo que verá y escuchará en cada momento, y las acciones que realizará, así como las respuestas que el sistema le dará”.
Se tendrá especial cuidado en la organización de la interfaz, combinando
Información, elementos de interacción y la información interactiva , y prestando especial atención a el color, la tipografía, y la integración de recursos multimedia.

k. Software:
Es necesario definir el software a utilizar para el desarrollo del prototipo, especificando a detalle sus características (precio, disponibilidad en el país, facilidad de uso, potencialidad, etc.)

l. Usabilidad:
Realizar un análisis de la usabilidad del prototipo, para prevenir errores futuros, comprobar si el prototipo propuesto es el adecuado, y si realmente es fácil de usar por los Usuarios.
Para determinar la usabilidad del producto, se pueden usar las siguientes técnicas:
  • Detectar páginas similares, que efectúen su objetivo de la mejor manera posible, analizándolas para identificar que puede servir como referencia para llevar a cabo acciones parecidas en el prototipo a diseñar.
  • Que el prototipo sea revisado por un grupo de expertos en usabilidad, mediante una serie de criterios generales previamente definidos, conocidos y aceptados por la comunidad de expertos en el área.

ETAPA 5. DESARROLLO DEL PROTOTIPO.
A partir de la conceptualización realizada en la etapa de diseño, en esta de construcción, se elaboran y prueban los elementos que conforman el modelo, usando para ello las herramientas apropiadas existentes en el mercado.
Hasta este momento se ha establecido el diseño visual de la información que se desea editar, se ha trabajado la distribución del texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia, es hasta entonces cuando se pasa al desarrollo o programación del prototipo en sí.
Durante esta etapa se recomienda tomar en consideración los siguientes aspectos:
  • Una vez diseñado el prototipo de página Web, se procederá a su construcción, tal y como ha sido planeada y concebida, pero siempre en una estructura tentativa, que pueda en cada momento, ser analizada y confrontada con los objetivos establecidos.
  • Un aspecto muy importante a considerar, si la naturaleza del proyecto lo requiere, son las normas de seguridad convenientes.
  • El proyecto debe documentarse desde sus inicios, ésta actividad no es propia de esta etapa, sino de todas y cada una de las que conforman la metodología expuesta en este documento.
  • Se debe comprobar cómo funcionan elementos incorporados en el prototipo en los navegadores más utilizados por los internautas, ya que si emplean una tecnología ligeramente diferente el aspecto visual de las páginas puede variar de lo diseñado.
  • Realizar la producción del contenido permitirá pasar a un formato (adecuado para
Internet) todos los gráficos, sonidos, etc., que formarán parte del modelo Web.
  • Se deben elaborar las plantillas que conformarán el prototipo completo; la página
Web se codifica con: las especificaciones hechas durante el diseño, el contenido disponible de fases anteriores, y las plantillas creadas.

ETAPA 6. IMPLEMENTACIÓN DEL PROTOTIPO.
Al terminar el desarrollado del prototipo, es momento de publicarlo, esto es, permitir el acceso al mismo para que sea utilizado y probado por los Usuarios, lo cual implica una serie de tareas a realizar, tales como:
  • Colocar en el servidor la página -prototipo para probarla.
  • Probar la carga y descarga de documentos.
  • Poner a disposición de los usuarios.

ETAPA 7. EVALUACION DEL PROTOTIPO
Esta etapa a pesar de estar situada como última en la lista del método propuesto, es un proceso que desde principio hasta el fin del proyecto se estará llevando a cabo.
Durante las etapas de diseño y construcción, hay que tener la precaución de someter a prueba su funcionamiento, para que si alguna falla se llega a presentar no afecte al conjunto de elementos que conforman el prototipo. Por lo tanto, la evaluación es un proceso sistemático que prueba los elementos del prototipo y que debe realizarse durante las diferentes etapas de su desarrollo. Su propósito es recopilar información sobre las posibles fallas del modelo, con el fin de superarlas, tomando en cuenta tanto las características de los elementos del prototipo como sus efectos en la reacción de los Usuarios cuando lo utilizan.
Se evalúan los efectos que haya producido en el Usuario, en cuanto a logros, actitud
e interés; en qué medida los contenidos han “quedado” en el Usuario o no, la monotonía que representa para ellos el material expuesto, la facilidad de acceso, la visualización del contenido, la disponibilidad del prototipo en el servidor, la velocidad de la navegación, etc. Una vez que todos los elementos en forma individual han sido probados, se procede a la prueba en conjunto de los mismos, esto para comprobar que funcionan perfectamente; en este momento pueden surgir problemas, que quizás lleven a rediseñar alguna parte del modelo, o incluso a desecharlo completamente por no ajustarse a los requerimientos señalados.





2.2. Herramientas

a. Aplicaciones para el desarrollo de guiones gráficos

Actualmente existen en el mercado numerosas aplicaciones que facilitan, y abaratan notablemente, la elaboración de guiones gráficos (Storyboard) para desarrollos multimedia.
t5-frameforge.png
t5-frameforge.png











Por un lado están las herramientas de gestión de producción audiovisual como Movie Magic Screenwriter o Movie Magic Scheduling, o software de escritura de guiones como Final Draft, pero también existen distintas soluciones especializadas en el desarrollo de Storyboards como Storyboards Artist o FrameForge 3D Studio 2.
Entre sus múltiples funciones, estas aplicaciones nos permiten:
  • Planificación detallada de los escenarios con controles sobre elementos como posicionamiento de cámara, control de objetos, la profundidad de campo, punto de foco, uso de ópticas, etc.
  • Amplia biblioteca de actores con variaciones de vestuario, evolución dinámica de edad, distintas etnias, expresiones, etc.
  • Distintos acabados de dibujo y presentaciones de las ilustraciones: renderizado realista, sobrelineado, dibujo o boceto de líneas.
  • Parrilla de construcción de espacios.
Extensas bibliotecas de efectos (transparencias, “calcomanías” para sobreimpresiones, manejo de objetos, etc.) Posibilidad de ampliación de bibliotecas con espacios, sujetos y objetos específicos (guerra, ciencia ficción, etc.)

t5-writter.png
t5-writter.png











b. Aplicaciones para el desarrollo de wireframes

Las herramientas utilizadas para elaborar un wireframe son, normalmente, aplicaciones de diseño que permiten elaborar diagramas y estructuras de forma sencilla. También se realizan en ocasiones “navegables” con esos diseños montados con programas de presentaciones de distintos paquetes ofimáticos.
Como en todo este campo, los avances teóricos son constantes, y, en la misma Red, se publican diariamente artículos y conferencias que van sedimentando un poso teórico que, por una parte, fundamenta el copioso hacer y, por otro, establece un marco epistemológico que sirve de referencia a las nuevas producciones. En relación a la técnica del wireframe, uno de los especialistas en desarrollo web más contrastados, el canadiense Dan Brown, ha desarrollado un sistema para la presentación de datos en este tipo de representaciones.

t5-modelo-wireframe3.png
t5-modelo-wireframe3.png






En la siguiente página se puede encontrar un listado de algunas herramientas Web para realizar wireframes, tales como Hot Gloo, Mockingbird, Pencil Project, Proto Share, Balsamiq, Flair Builder, Cacoo, Serena: Prototype Composer, MockFlow, FluidIA, Lumzy, GUI Studio Desing, iPlotz, OmniGraffle, o MocklupScreens.

http://collectioncode.com/interes/herramientas-web-para-disenar-interfaces-mockups-wireframes-prototipos/


3. Visualización de información

3.1. Concepto

Las personas nos servimos de la información para tomar decisiones y conducir nuestras acciones. Aunque esta afirmación nos pueda parecer un tópico conviene tenerla muy presente en un tiempo como el nuestro donde la sobreabundancia de información constituye paradójicamente un obstáculo más que una ventaja. El reto consiste en ser capaces de transformarla en auténtico conocimiento como medio para conducir nuestras acciones reduciendo al máximo nuestra incertidumbre.
Los conceptos dato, información y conocimiento, no son intercambiables. Thomas H. Davenport y Lawrence Prusak en el ya clásico Working Knowledge (1998) proponen las siguientes definiciones:
  • Dato: conjunto discreto de factores objetivos sobre un hecho real.
  • Información: A diferencia de los datos la información tiene significado. Los datos llegan a ser información cuando su creador añade significado. Tiene forma; se encuentra organizada con un propósito. Los datos pueden transformarse a través de diversos métodos: contextualizar, categorizar, calcular, corregir, condensar.
  • Conocimiento: Es una mezcla fluida de experiencia enmarcada, de valores, de información contextual y entendimiento experto que proporciona un marco para evaluar e incorporar nuevas experiencias e información.
En el proceso de producción del conocimiento, la visualización de información interviene en el paso de datos a información con el objetivo de facilitar el análisis de la misma revelando conexiones y patrones que se encuentran detrás de esos datos. La visualización analítica no persigue la representación de la información desde un enfoque estético, sino científico. No se trata de embellecer la información sino de presentarla ante nuestros ojos facilitando su recepción y comprensión. Se trata de un proceso en el que cognición y comunicación se encuentran estrechamente entrelazadas con el objetivo de hacer compresibles los fenómenos.

Alberto Cairo [2] , consultor de infografía y visualización de información, distingue entre información desestructurada (sinónimo de realidad y su complejidad) e información estructurada. A partir de ahí elabore un esquema conceptual, basado en el trabajo de Richard Saul Wurman [3] , que incorpora los concepto de dato, información, conocimiento y sabiduría.

Fig01.jpg
Alberto Cairo. "El arte funcional"
Alberto Cairo. "El arte funcional"


Alberto Cairo también propone el estudio de la visualización como una tecnología, entendiendo tecnología como cualquier objeto, proceso o método creado para cumplir una tarea. Así establece una definición de visualización que pretende eliminar la confusión con otras disciplinas.

Visualización es aquella tecnología plural (esto es, disciplina) que consiste en transformar datos en información semántica – o en crear las herramientas para que cualquier persona complete por si sola dicho proceso- por medio de una sintaxis de fronteras imprecisas y en constante evolución basada en la conjunción de signos de naturaleza icónica (figurativos) con otros de naturaleza arbitraria y abstracta (no figurativos: textos, estadísticas, etc.)." Cairo, A. (2011)

Chaomei Chen, editor de la revista Information Visualization, definió este nuevo campo de estudio interdisciplinar como el proceso asistido por ordenador que persigue desvelar elementos de un fenómeno transformando datos abstractos en formas espacio-visuales con el objetivo de optimizar el uso de nuestra facultad perceptiva y cognitivo-visual cuando nos enfrentamos a fenómenos que no necesariamente son de esta naturaleza (Cfr. Chaomei Chen, 2002, 1).
Alfonso Palazón, de la Universidad Rey Juan Carlos, establece (2008) cuatro nodos importantes en la visualización de la información. En el primero, "Visualización y conocimiento", determina la importancia de definir correctamente las estructuras y representaciones visuales que nos permitan interiorizar la gran cantidad de datos e información que recibimos (cada vez más en esta era de la “infonomía”), para encontrar los patrones que hacen posible la construcción del conocimiento.
En el nodo 2, "Hipertexto y periodismo digital", afirma que el hipertexto ayuda a ordenar este conocimiento a través de la disposición de una estructura mental determinada. Cuanto mejor sea la organización hipertextual, más ligera podrá ser la interfaz de la pantalla. La composición de las páginas web aún está muy vinculada a la composición sobre papel y eso es algo que debe ser superado.
El nodo 3, "Representación visual", nos recuerda que la apariencia de nuestra web no es sólo estética, sino que es la mejor forma que tenemos de gestionar nuestra información. La base para definir la representación visual es la sencillez: sencillez para que el usuario sepa de forma intuitiva cómo obtener la información que busca.

Los sistemas hipertextuales se basan en la opción que tiene el usuario de crear, enlazar y compartir información con la posibilidad de acceder a los documentos de manera no secuencial. La información se organiza en bloques distintos de contenidos y conectados con una serie de enlaces. El usuario […] no está obligado a seguir una secuencia establecida sino que puede moverse a través de la información intuitivamente (Palazón, A. (2008)

En el último nodo, "Formas", Palazón introduce algunas posibilidades que ofrecen las estructuras gráficas y afirma que el campo de las diferentes formas de presentar la información en el ciberespacio aún está en sus inicios y todo periodista digital debe intentar encontrar otras nuevas.

PERCEPCIÓN VISUALProceso cognoscitivode recepción e interpretaciónde la información recibida mediante un estímulo visualIMAGENcomo representación visual de una forma o de una idea
OJO y CEREBROComprenden y Organizanla información contenida en el estímulo visual
Fases de la Percepción
1. Reconocimiento
2. Análisis
Aceptación y comprensiónde la información recibida
Interpretación y Organizaciónracional del estímulo
Experiencia intelectual del receptor
Subjetiva. Selectiva. Temporal.
Niveles de la Percepción
Instintivo. Descriptivo. Simbólico
(Extraído de
http://www.aloj.us.es/galba/digital/cuatrimestre_ii/imagen-pagina/1codigos1.htm)

Contenido y forma en los contenidos multimedia

- Según el libro de D. A. Dondis, “La sintaxis de la imagen”, los dipolos son técnicas de la comunicación visual que manipulan los elementos visuales con un énfasis cambiante, como respuesta directa al carácter de lo que se diseña y de la finalidad del mensaje. La técnica visual, más dinámica es el contraste, que se contrapone a la técnica opuesta, la armonía.


El contenido y la forma son componentes básicos de todos los medios.
El contenido es lo que se está expresando de forma directa o indirecta. Será el carácter de la información, el mensaje. En la comunicación multimedia, visual, el contenido nunca está separado de la forma. Se adapta a la forma y a las circunstancias de cada uno, desde el diseño de un cartel hasta el de una fotografía.

En todos, el contenido puede ser el mismo ero debe encajar en su marco y al hacerlo presentar modificaciones en su composición y elementos.
Un mensaje se compone con el fin de de expresar, explicar, instigar dirigir y aceptar. Para alcanzar este fin se persiguen formas de fortalecer las intenciones expresivas a fin de controlar lo máximo posible la respuesta del usuario. La composición está destinada a controlar la reinterpretación de un mensaje visual y sus receptores.
El significado estará tanto en el observador como en el talento del que crea ese contenido.

El resultado de toda la experiencia visual radicará e la interacción de los dos frentes respecto al contenido (mensaje y significado), la forma (diseño, medio y ordenación) y en el efecto recíproco del creador del contenido y el receptor. La forma es aceptada por el contenido y éste a su vez por la forma.
El mensaje lo emite el creador y es modificado a su gusto por el que lo recibe. La composición es lo más importante informativamente.


Susanne Langer sostiene este mismo punto de vista en: Problems of Art

«Se hace una imagen desplegando pigmentossobre un trozo de lienzo, pero la imagen no es la suma del pigmento y la estructura del lienzo. La imagen que emerge del proceso es una estructura de espacio, y el espacio mismo es un todo emergente de formas, de volúmenes coloreados y visibles.» El mensaje y el significado no están en la sustancia física sino en lacomposición. La forma expresa el contenido. «Es artísticamente bueno todo aquello que articule y presenteuna sensación a nuestro entendimiento.»





Conceptualización teórica Visualización de la Información
Juan Carlos Dürsteler define la visualización de la información como “proceso de interiorización del conocimiento mediante la percepción de la información o, si se quiere, mediante la elaboración de datos” (Dürsteler 2003). La visualización de la información, como proceso en sí mismo, interviene en el paso de datos a información y en la posibilidad de la construcción misma del conocimiento, al revelar los patrones que subyacen a los datos.

Aunque la información se presentará preferentemente de forma visual, en este contexto Visualización se ha de entender de forma amplia encaminada a los procesos de percepción o interiorización, es decir, a la comprensión misma de la información y el conocimiento. Resulta, en este mismo sentido, indiferente por qué medio se pueda acceder o conseguir tal percepción –ya sean gráficos, texto escrito, sonido, animaciones- etc.

Según expone Juan Carlos Dürsteler la Visualización de la Información se beneficia básicamente que:
  • Los seres humanos reciben información de forma eminentemente visual ya que es el sentido mayormente predispuesto para ello, es decir, que proporciona unos mayores niveles de cantidad de información.
  • Y en la capacidad simbólica del cerebro humano.
Por otro lado, la Visualización de la Información incluye explícitamente los siguientes subtemas entre otros:

El Diseño o Arquitectura de Información

Conlleva el estudio de la organización de la información con el objetivo o finalidad de permitir al usuario encontrar su vía de navegación hacia el conocimiento y comprensión de la información.
Según Richard Saul Wurman un Arquitecto de Información es:
  • El individuo que organiza los patrones inherentes a los datos, haciendo claro lo complejo.
  • Una persona que crea la estructura o mapa de la información, que permite a otros encontrar sus caminos personales hacia el conocimiento
  • La ocupación profesional emergente en el siglo XXI que se dirige a las necesidades de la época enfocado hacia la claridad, el entendimiento humano y la ciencia de la organización de la información.
La Arquitectura de la Información tiene muchos aspectos compartidos y relacionados con el propio Diseño de la Información. Por dicha razón, a veces ambos conceptos o términos pueden entrañar cierta confusión. De un modo u otro, se considera la Arquitectura de la Información una parte integrante y fundamental de la Visualización de la Información.

Visualización Científica

Persigue la transformación de datos científicos y abstractos en imágenes constituyendo una forma específica de la visualización. La visualización científica conforma una parte del proceso de representación de la realidad:
  • Realidad: la cosa u objeto que se quiere examinar
  • Datos: que se hayan colectado de la realidad. En general son datos abstractos, intangibles que “no se pueden ni ver ni tocar”
  • Imagen: imagen concreta resultante u obtenida de los datos abstractos
  • Espectador: que desea examinar y comprender la realidad autoimpuesta

Entre los objetivos que persigue están:
  • Evitar qué datos importantes son omitidos por equivocación
  • Facilitar la comprensión de conceptos abstractos o complejos
  • Concretar qué datos son importantes y cuáles no lo son
  • Simplificar la comunicación entre la comunidad científica
  • Mostrar a profanos el contexto y avance de un proyecto
La visualización se ha convertido en un elemento fundamental en el manejo y distribución actual de la información. La razón principal para visualizar es la tesis de que el sentido más desarrollado de los humanos es la vista y por eso la manera más fácil de comunicar la información, especialmente cuando resulta compleja o viene dada en grandes e ingentes cantidades.

Las representaciones gráficas en general

La Visualización se deduce, en este contexto, de la representación gráfica de variables asociadas al concepto que se pretende visualizar. Es decir, contribuyen a la formación mental de una imagen convertida en un concepto.

En este sentido conceptual de Visualización de la Información, según reseña el profesor Alfonso Palazón, de la Universidad Rey Juan Carlos, nos encontraríamos ante “un proceso inverso en lo que respecta a la información que nos llega como usuarios en un medio como Internet y en concreto con la Web”. Lo que resulta imprescindible construir una estructura que facilite el entendimiento de lo que se quiere transmitir y de lo que recibimos. Y esta organización, indisociablemente unida al diseño de sitios Web, se convierte por tanto en un hecho o parte esencial de la conversión de información en conocimiento. Y añade el citado autor, “estamos refiriéndonos a un proceso continuo que nace de los datos y que finalizaría con la sabiduría pasando por la información y el conocimiento”.

3.2. Factores que influyen en la percepción visual


El sentido de la vista es espacial pero también está afectada por factores temporales que la condicionan de manera decisiva.
El tiempo determina la percepción espacial-visual.
  1. Los estímulos pueden variar con la percepción o producirse sucesivamente. En algunos casos el ojo sólo puede distinguir como diferentes dos estímulos luminosos, si están distanciados uno de otro y si hay un espacio temporal.
  2. El tiempo afecta a la percepción porque esta misma no es un proceso instantáneo, ya que la captación de esta necesita de un tiempo para comprenderlo.
  3. El tiempo también afecta a la percepción visual porque el ojo está en constante movimiento, y esto va a condicionar la propia percepción del individuo.
Dentro de los movimientos del ojo encontramos:
    • Sacádicos voluntarios e involuntarios: son muy veloces, sirven para reaccionar ante estímulos.
    • De Compensación: son movimientos reflejos, de compensación, tienden a fijar una imagen que está en movimiento. Cuando el cuerpo se mueve inesperadamente podemos fijar la imagen unos instantes.
    • De deriva: el ojo no focaliza su atención en un objeto solo, esta en una tarea constante de exploración, movimiento de deriva, de velocidad moderada.
La existencia de cierto objeto viene a determinar el proceso de percepción. La percepción del ser humano está condicionada por su posición en el espacio.

El proceso de la percepción posee 3 fases
Primera Fase
Segunda Fase
Tercera Fase
Recepción de información
Almacenamiento de información
Procesamiento de información
Sensación visual
Memoria visual
Pensamiento visual.
Constancia Perceptiva: Cualidad que permite localizar unas constantes de orientación espacio-temporal y reconocer las formas, es una tendencia estabilizadora. Gracias a la constancia perceptiva podemos reconocer ciertas cosas, el reconocimiento es igual a rememorar (constancia perceptiva-memoria).
El reconocer determinadas cosas nos da placer pero el no conocerlo o no reconocerlo nos da displacer, dolor.
La atención: Para poder activar todos los sensores perceptivos es fundamental la atención visual, que se puede dividir en:
Atención Periférica: se capta o presta atención a objetos que se sitúan en la zona periférica del campo visual.

Atención Central: focalización de la mirada sobre objetos que aparecen en el campo visual.
Como el ojo puede detectar y clasificar los colores que le llegan.
Bien, ya sabemos de dónde vienen los colores, pero, ¿cómo puede el ojo humano ver estas ondas y distinguirlas unas de otras?. La respuesta a esta cuestión se encuentra en el ojo humano, básicamente una esfera de 2 cm de diámetro que recoge la luz y la enfoca en su superficie posterior.
En el fondo del ojo existen millones de células especializadas en detectar las longitudes de onda procedentes de nuestro entorno. Estas maravillosas células, principalmente los conos y los bastoncillos, recogen las diferentes partes del espectro de luz solar y las transforman en impulsos eléctricos, que son enviados luego al cerebro a través de los nervios ópticos, siendo éste el encargado de la sensación del color



naturaleza_5.gif

Los conos se concentran en una región cerca del centro de la retina llamada fóvea. Su distribución sigue un ángulo de alrededor de 2° contados desde la fóvea. La cantidad de conos es de 6 millones y algunos de ellos tienen una terminación nerviosa que va al cerebro.

Los conos son los responsables de la visión del color y se cree que hay tres tipos de conos, sensibles a los colores rojo, verde y azul, respectivamente. Dada su forma de conexión a las terminaciones nerviosas que se dirigen al cerebro, son los responsables de la definición espacial. También son poco sensibles a la intensidad de la luz y proporcionan visión fotópica (visión a altos niveles).
Los bastones se concentran en zonas alejadas de la fóvea y son los responsables de la visión escotópica (visión a bajos niveles). Los bastones comparten las terminaciones nerviosas que se dirigen al cerebro, siendo por tanto su aportación a la definición espacial poco importante. La cantidad de bastones se sitúa alrededor de 100 millones y no son sensibles al color. Los bastones son mucho más sensibles que los conos a la intensidad luminosa, por lo que aportan a la visión del color aspectos como el brillo y el tono, y son los responsables de la visión nocturna.

Teoría de la Gestalt:
Es una rama de la psicología que estudia la percepción visual y del estudio de las representaciones cómo el espectador actúa y reacciona ante las percepciones.
Estudiosos como Ehrenfels, Max Wertheimer, Wolgang Köhler. Kurt Koffka desarrollo los principios de psicología de la forma (1936)
Esta teoría nos dice que la percepción del mundo que nosotros vemos es el resultado de un proceso de organización, de ordenación de todos los datos sensoriales que nos llegan a partir de categorías perceptivas (trabajo perceptivo).
Objeto real
Estímulo
Experiencia perceptiva
Realidad
Retina
Cerebro
Recepción sensorial
Organización y reconocimiento
Entre el estímulo visual y la experiencia perceptiva puede haber grandes diferencias. El proceso perceptivo reaparece en el deseo y el miedo, y el psicoanálisis nos ayuda a comprender esto. En el proceso de percepción se impone la idea del todo por encima de la idea de las partes.
Rudolph Arnheim: todo esquema estimulador tiende a ser visto de manera tal que la estructura resultante sea tan sencilla como lo permitan las condiciones dadas.Esta premisa tan sencilla es lo que debe primar a la hora de organizar una infromación dentro de la web para que el usuario capte dicha información como una unidad y le sea más fácil moverse y tomar decisiones dentro del sitio web.

Percepción Visual en la Web
La percepción visual implica un proceso psicológico básico consistente en la interpretación o discriminación de estímulos externos visuales asociados a un conocimiento previo. Exige la capacidad de interpretar la información recibida, constituyendo un proceso activo y en el que se ve partícipe elementos psicofisiológicos con la finalidad de procesar cualquier realidad externa medida en términos de estímulos que llegan al cerebro. Como tal, existen una serie de parámetros y principios que la determinan y la rigen que; también, se identifican o se encuentran presentes en el desarrollo y creación de interfaces Web.

El diseño visual de cualquier interface requiere, a su vez, activar mecanismos de comprensión y procesamiento mismo de la información, es decir, conlleva la activación de saber comprender cómo mira y entiende el propio usuario; puesto que será, uno de los primeros factores que facilitarán o entorpecerán el uso del sitio web por parte del éste.

Por todo ello, desde el punto de vista de la percepción visual, ésta también entra de lleno en el diseño centrado en la experiencia de usuario como estrategia encaminada a favorecer los procesos de los que el individuo se ve implicado en cualquier entorno Web y que determinan la estructura informativa y el propio diseño interactivo. En este sentido, diseñar para el usuario conlleva implícitamente estudiar como miran y entienden las personas la Web; lo cual desencadena la búsqueda de une equilibrio entre armonía estética y funcionalidad, capaz de generar una amplia satisfacción y evitar el abandono o frustración en el uso de la misma por parte del usuario.

En lo que a percepción visual en interfaces Web se refiere, según J.M. Wolfe, el proceso se desencadena en una serie de fases que se abordan de manera secuencial o procedimental:

Percepción pre-atentiva:
En esta fase antes de fijar la atención y de poder dar forma y significado a los propios objetos de la interfaz, hemos de ser plenamente conscientes de lo que se está visualizando en ese momento, es decir, debemos anteponernos al ejercicio mismo que conlleva la visualización-conceptualización de la información a la que habrá de exponerse el propio usuario. Según la teoría de la Búsqueda Guiada existen dos factores fundamentes por los que hay determinados componentes de una escena que son capaces de captar o atraer nuestra atención con mayor predominancia que otros:


  • el grado de disimilitud entre un objeto y los objetos vecinos o aledaños: cuanto más se diferencie gráficamente un elemento de los elementos cercanas o colindantes, más fácil será la capacidad de atraer o demandar nuestra atención.
  • el grado de similitud entre propiedades del objeto y las propiedades pretendidas, deseadas o buscadas: si buscamos de manera intencional elementos con una cierta propiedad específica o determinada, éstos tenderán a una mayor capacidad de atracción que los que no la posean.
Por ello, resulta conveniente detenerse y conocer cómo atraer la atención misma del usuario cuando se encuentre delante de una interfaz, lo que nos permitirá guiar su exploración visual y por tanto, estructurar o jerarquizar la importancia de unos elementos sobre otros de entre todos los que compongan el compendio global de la interfaz:
  • Se deberá evitar, en la medida de lo posible, el colapso atentito del usuario que se produce cuando todos los elementos de una página compiten entre sí intentando atraer o dominar la atención; así como evitar una apariencia homogénea en que ningún elemento destaca del resto y por tanto no atrae la atención del usuario.
  • El color, tamaño, orientación son también otro de los principales atributos visuales con mayor capacidad potencial para demandar la atención de los usuarios.
  • Y el movimiento también juega un factor determinante en la atracción de la atención pero resulta ser mucho menos recomendable ya que puede llegar a convertirse en aspecto contraproducente –podría interferir constantemente en la exploración visual-.
En definitiva, es la fase en la que antes de fijar la atención en función a estímulos visuales, en un primer momento, nuestra percepción es capaz de procesar una serie de características básicas como el color, la dirección del movimiento y las formas como antesala a reclamar una mayor atención que lleve al usuario a experimentar las potencialidades y por tanto, un mejor acceso al entorno Web y por extensión, a la visualización de la información y el conocimiento.

Percepción atentiva:

Tras conseguir detener y fijar la atención en un elemento de la interfaz se abre paso la segunda fase consistente en un proceso organizativo perceptual sobre lo que se está visualizando y cuyo eje pasa por la agrupación perceptual del elemento y de las relaciones que éste establezca con el conjunto de los mismos. Al respecto, la propia teoría desarrollada por la Escuela de la Gestalt determina esos mecanismos de organización de la percepción como “el todo es más que la suma de sus partes”: los patrones percibidos no se originan únicamente por la información visual básica sobre la que fijamos nuestra atención sino que más bien es fruto del resultado de la mediación de una serie de leyes o principios propios de la percepción, con más implicaciones para el diseño de interfaces como:
gestalt-150x150.jpg
Leyes Gestalt









































Una vez que la atención del usuario se centra en una Web, el cerebro pasa a organizar las diferentes percepciones como totalidades, de manera que cuando los diversos elementos son similares en tamaño, longitud, color, forma se nos representan mentalmente como grupos de manera que, cuando se esté maquetando y jerarquizando una Web, habrá que agrupar los elementos de la página que tengan vinculación entre sí; para que así sean percibidos como grupo, mientras que cuando dichos elementos no mantengan ningún tipo de relación deberán verse tales como independientes.

Percepción post-atentiva:

Fase destinada a contribuir lograr la eficacia de los procesos de interiorización y asignación de significado concreto a los objetos visualizados: los objetos permanecen retenidos en la memoria operativa durante el tiempo necesario para poder realizar las diferentes operaciones cognitivas sobre ellos. En este sentido, el uso de iconos o elementos gráficos resulta de gran importancia para el diseño de interfaces siempre y cuando sean claramente identificables y no entrañen confusión alguna. Tal y como afirma Ortega Santamaría, la función principal icónica debe ser “simplificar la información, para lograr una mayor claridad en nuestra comunicación y reducir importante espacio para mantener –incluso superar- la efectividad de los mecanismos de interacción”.

iconos_8-300x218.jpg
Icónos como mecanismo de simplificación de la información


Cómo creamos la inteligencia visual

- Previsualización:

La previsualizacion es la etapa del diseño en la que el diseñador manipula o trabaja el elemento visual con técnicas apropiadas al contenido y al mensaje.

La elaboración de declaraciones visuales se ha asociado a las actividades no racionales quizá, debido a la flexibilidad y aleatoriedad de esta etapa en la que se busca una solución compositiva que agrade al diseñador, sirva a la función y exprese las ideas o el carácter deseado.
Una serie de bocetos, desde luego toscos e indisciplinados no sugiere rigor. Lo cierto es que el diseñador, el comunicador visual , está en este punto crucial de sus decisiones enzarzado en un proceso muy complejo de selección y rechazo. El talento, control artístico y la intuición han llegado a ser algo confuso.La inspiración súbita e irreflexiva no es aceptable en ningún diseño.El talento intelectual y el conocimiento técnico son necesarios en el diseño y reproducción visual.

A través de sus estrategias compositivas debe buscar soluciones a los problemas de comunicabilidad, belleza, funcionalidad y equilibrio entre la forma y el contenido (sus opciones, através de la elección de técnicas, tienen que ser cerebrales y controladas).

La inteligencia visual no difiere de la inteligencia general y el control de los elementos de los medios visuales que plantean los mismos problemas de dominio que cualquier disciplina.
Para lograr controlarlos, hay que saber con qué se está trabajando y cómo hay que proceder. La composición visual, parte de los elementos básicos: punto, línea, contorno, dirección, textura, dimensión,escala y movimiento.
El primer paso compositivo es una elección de elementos apropiados para el medio encuestión. En otras palabras, la forma es la estructura elemental.


- Visualización.Inteligencia Visual

Pero ¿qué se hace para crear la estructura elemental?.
Las opciones y/o elecciones que conducen al efecto expresivo dependen de la manupulación del contenido, de la forma y con ello del usuario al que va dirigido
Estamos hablando de percepción visual, cómo vemos, cómo llega la información a nuestro cerebro, cómo la percibimos y para qué nos sirven, sus leyes y tipos de percepciones.

A la hora de diseñar una web, al querer comunicar, llamar la atención de un usuario en la página web que hemos creado o cualquier contenido de nuestro trabajo, es necesario pararnos a pensar e investigar mínimamente la inteligencia visual.
Ya que una imagen vale más que mil palabras comenzaré con este video:

http://www.youtube.com/watch?v=uaO4uSv8ccE


Este video a mi parecer expresa con cortes de diferentes películas, anuncios o series todo lo que un profesional desea hacer sentir a un espectador, como: escalofrío, deseo o ternura, en definitiva, TRANSMITIR.

La estrategia del multimedia del diseño busca transmitir sensaciones, enseñar al usuario. La inteligencia visual realmente es esto. Por ello el mundo multimedia cada día cobra más fuerza y esta más presente, porque llega a más usuarios en menos tiempo y con mucha, muchísima más fuerza.

3.3. Aplicaciones

De nuevo, el desarrollo de las Tecnologías de la Información y la Comunicación ha producido un enorme impacto en áreas tradicionalmente vinculadas a la representación de la información como la cartografía o la estadística.
Entre las técnicas que se pueden emplear se encuentran, según Mari Carmen Marcos (Marcos, 2004) las siguientes:
  • Utilización de iconos para representar conceptos. [4]
  • Empleo de colores y texturas con el objetivo de destacar o diferenciar elementos.
  • Gráficos con presentación jerárquicas que facilitan el ojeo.
  • Mapas que presentan información agrupada en función de su similitud empleando técnicas de clustering (Según el Dr. Elmer A. Fernández,el clustering se basa en intentar responder como es que ciertos objetos -casos- pertenecen o "caen" naturalmente en cierto número de clases o grupos, de tal manera que estos objetos comparten ciertas características. Razonablemente, los objetos pueden dividirse en grupos que contienen objetos similares. Si tal división existe, ésta puede ser oculta y el objetivo principal de las ténicas o estudios de clustering es descubrirla) .
  • Efectos de zoom para mostrar en detalle la información.
  • Animación y perspectiva en 3D.

En realidad, los métodos utilizados en la visualización de información emplean en la mayoría de las ocasiones una combinación de estas técnicas produciendo resultados verdaderamente satisfactorios. Merece la pena destacar a Alfons Cornella (2002), que nos recuerda que para que una imagen transmita información, emisor y receptor deben disponer de y compartir una adecuada cultura gráfica: el emisor debe saber cómo condensar la información y el receptor debe saber cómo interpretarla.
Existen numerosas herramientas offline y online que, actualmente, son especialmente útiles para que los comunicadores puedan facilitar información compleja, sintetizada mediante representaciones visuales que permitan hacer una lectura más directa y evidente de la información, facilitando el conocimiento. Entre estas, podemos destacar algunas como Many Eyes de IBM, Newsmap (un sistema de visualización del servicio de noticias de Google) o el sistema de búsqueda orientada Touchgraph.

Referencias de interés

Accesibilidad
Usabilidad
  • Usability.gov(Guía para el diseño y desarrollo de sitios web usables)
  • Herramientas de evaluación automática: Web metrics tools, Doctor HTML
Validación de gramáticas
Herramientas para diseño y desarrollo

Visualización de información
  • Infovis.net Revista digital sobre visualización de información, principalmente a través de imágenes y gráficos

Organismos
  • W3C España àhttp://www.w3c.es/
  • La Fundación CTIC (Centro Tecnológico de la Información y de la Comunicación) es una institución privada, sin ánimo de lucro, de carácter social y de cooperación para el desarrollo tecnológico. Está constituida por un patronato de empresas del ámbito de las Tecnologías de la Información y la Comunicación (TIC) y por el Gobierno del Principado de Asturias. http://www.fundacionctic.org
  • INTECO à El Instituto Nacional de Tecnologías de la Comunicación (INTECO), promovido por el Ministerio de Industria, Turismo y Comercio, es una plataforma para el desarrollo de la Sociedad del Conocimiento a través de proyectos del ámbito de la innovación y la tecnología. http://www.inteco.es/


Ofrezco a continuación una completa compilación de las normas que un profesional en el diseño de contenidos multimedia está utilizando en su trabajo diario. De la misma manera que los grandes periódicos funcionan desde hace años con sus códigos formales, o libros de estilo, son diversos (y aún por aunar) la relación de maneras de actuación ante el reto de elaboración de diferentes productos en la red. Este ejemplo lo he recogido en una entrevista mantenida con María Velázquez, especialista en comunicación digital y profesional desde hace más de diez años en http://www.abaco-digital.es/.



Consejos para diseñar y estructurar aplicaciones multimedia y páginas web.



1. Dimensiones- resolución / dispositivos

Debemos optimizar el diseño web a la mejor resolución de pantalla.

Una web diseñada para una resolución determinada, implica que aquellos usuarios que la visualicen a resoluciones menores no tengan espacio suficiente en pantalla para abarcar toda la página, mientras que aquellos que visualicen un sitio a resoluciones mayores tengan demasiado espacio libre en pantalla y la lectura de textos resultará difícil.Por ello es interesante conocer cuáles son las resoluciones de pantalla más utilizadas en la actualidad por nuestros usuarios así como cuáles son las tendencias generales.
Existen la opción de utilizar utilizar un diseño "líquido" creado mediante CSS que se adapte a la resolución del dispositivo.
Ranking Resoluciones de Pantalla septiembre 2011



1. 1024x768: 17.01% 2. 1280x800: 13.86% 3. 1366x768: 11.94% 4. 1280x1024: 9.41% 5. 1440x900: 6.94% 6. 1680x1050: 4.76% 7. 1920x1080: 4.26% 8. 1600x900: 3.09% 9. 320x480: 3.01% 10. 768 x 1024: 2.08%

Dentro de este apartado hay que valorar de forma especial la diferencia de soportes de navegación que existen en la actualidad. A la hora de planificar un sitio web, no sólo hay que pensar en la pantalla del ordenador, sino en los múltiples dispositivos que ofrecen conexión a internet y navegación al usuario.

Hay que valorar igualmente qué tipo de contenidos se incluyen. Por ejemplo, si se trata de una web sobre un restaurante, es fundamental que la visualización sea óptima en dispositivos móviles, ya que serán desde éstos desde donde habrá un mayor tráfico.

A la hora de considerar los dispositivos, no hay que limitarse al binomio ordenador-móvil. Las tabletas (tipo iPad) son cada vez más populares, existen en el mercado muchos televisores con acceso a internet e incluso desde algunos dispositivos de lectura (eBooks) se permite el acceso a contenidos web. Resulta realmente difícil hacer un test de todos los dispositivos disponibles, pero al menos hay que visualizar, para conseguir una seguridad en que el diseño se adapta correctamente, la página en cada uno de los tipos de dispositivos: ordenador, tableta, smartphone y televisor.

En el caso del ordenador, además, hay que testear con diferentes navegadores. Muchas veces las páginas se muestran diferentes en función del navegador que se use. Los más populares hoy en día son Internet Explorer, Mozilla Firefox, Google Chrome y Safari. Opera, que también es un navegador con bastante uso (aunque muy por debajo de los demás) suele plantear algunos problemas de visualización por contar con una arquitectura distinta a los demás.

Una de las pruebas más habituales a pasar por los navegadores la constituyen los tests "acid":
http://www.acidtests.org/, que permiten ver como se muestra un diseño predeterminado en los distintos exploradores y la adaptación de estos a los estándares web.


2. Navegación

Debemos posibilitar al usuario una movilidad clara y ágil al acceder a los diversos elementos de la web, permitiéndole saber en todo momento dónde está y de qué modo puede conectarse con otras partes de la aplicación. Esto requiere planificar al comienzo del proyecto una estructura de navegación, el esqueleto, un diagrama de flujo claro para definir los índices principales, las páginas secundarias y las ramificaciones de todos los documentos.



Al mismo tiempo, también es importante diseñar la estructura de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la página. Para ello resulta práctico crearse unas hojas de estilo para aplicar a todas las páginas que vayamos generando, incluyendo los logotipos, encabezados y pies (páginas CSS).



Hay muchas formas de estructurar el contenido de una web: en árbol, de forma lineal, mixta, en red... Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas.



Elementos básicos dentro de una web:

Página de inicio: Principal puerta de entrada de visitas a tu página. En ella deben estar bien visibles los contenidos de más interés. Especifica claramente qué se va a encontrar el usuario al explorar la web. Se debe incluir un enlace bien visible a la página principal en todas tus páginas interiores esto facilita muchísimo la navegación.

Menú de navegación: Son los accesos a las secciones destacadas. Conviene que aparezca en cada página el mismo menú y en la misma posición.

• Páginas generales: En ellas se desarrolla el contenido general de la web.

• Información adicional:información acerca de la web, aviso legal, política de privacidad, datos de contacto, etc, Este tipo de información suele incluirse en un menú horizontal al pie de la página.



3. Estética

El diseño ha de potenciar la intención del mensaje, facilitando la usabilidad y visibilidad de los contenidos. Debemos procurar un diseño coherente, funcional, intuitivo, creativo y seductor.

Para ello debemos valernos de las herramientas gráficas, el color, fotografía, gráficos, animaciones, iconos, imágenes corporativas, barras de navegación, enlaces, vídeos, sonido...

Debe tenerse siempre presente el destinatario a quien va dirigida nuestra WEB (infantil, juvenil, adulto, sectores profesionales,...), para adecuar los contenidos y el estilo en función del colectivo que va a leer nuestras páginas. Y no olvidar en ningún momento el mensaje que se desea transmitir, el objetivo del trabajo (publicitario, promocional, turistico, cultural, educativo,...).



Recomendaciones:

• Mantener un estilo común en toda la web, la misma posición y estética en todas las páginas de los elementos más importantes como el logotipo, menú de navegación, encabezamientos...

• Evitar texto muy extensos o farragosos, la lectura prolongada en pantalla puede resultar agotadora para la vista.

• Evitar el uso excesivo de animaciones y efectos. Son particularmente molestas y pueden cansar al usuario.

• Evitar en la medida de lo posible el uso de la barra de desplazamiento o scroll, muy especialmente el horizontal.

• Es muy útil emplear elementos decorativos en botones, íconos y fondos que utilicen figuras directamente relacionadas con la temática abordada.

• El uso de iconos permite minimizar el espacio utilizado en pantalla, manteniendo al mismo tiempo mucha información.

• Utilizar imágenes cuando acompañan al contenido ayuda a su compresión. Aunque deben optimizarse puesto que pueden dificultan la descarga.



4. Accesibilidad

Los desarrolladores y diseñadores de páginas web deberían comprometerse desde una ética profesional en la creación de proyectos accesibles. La Accesibilidad Web se refiere a la capacidad de acceso a la web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales).

Por ejemplo, si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan leerlo sin dificultad. De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los usuarios que no pueden controlar el ratón con precisión. Si se evitan las acciones que dependan de un dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el usuario podrá escoger el dispositivo y formato que más le convenga: tablets, teléfonos móviles, ordenadores a diferentes resoluciones, televisisores...

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han convertido en un referente internacionalmente aceptado. En diciembre del 2008 las WCAG 2.0 fueron aprobadas como recomendación oficial. Desde el año 2002, en España se han desarrollado varias leyes que definen los niveles de accesibilidad y fechas de cumplimiento. Desde el 2009, las páginas de Internet de las administraciones públicas españolas tienen la obligación de cumplir determinados requisitos de accesibilidad.



5. De peso ligero

El tamaño o peso de las páginas es crítico puesto que afectará directamente a la velocidad con la cual las páginas pueden ser descargadas y mostradas. En general, el tiempo de cuanto tardan las peticiones de un usuario en llegar a su pantalla, el tiempo de carga, debe ser menos de 10 segundos para tener la atención del usuario, si no, es muy probable que el usuario cancele la sesión.

Está comprobado que los webs que son más rápidos, consiguen más tráfico. Se recomienda que sean de un tamaño menor de 150 KB donde sea posible. Además, cualquier archivo más grande de 250 KB debe ser separado hacia fuera y ser identificado al usuario como un archivo grande, preferiblemente indicando su peso aproximado.



Recomendaciones:

• Reutilizar imágenes en otras páginas dentro de la misma web (cómo por ejemplo los fondos o cabeceras). Los navegadores suelen guardar en caché la información con lo que si la imagen ya ha sido cargada, no tendrá que volver a hacer ese esfuerzo.

• Evitar animaciones en la web, a menos que agregue verdad al significado de la información.

Utilice siempre el formato más eficiente para sus imágenes para reducir el tiempo de la transferencia desde el servidor. Para las fotografías, utilice el JPEG con tanta compresión como sea posible. Otros tipos de imágenes de colores planos se deben almacenar usando formato del GIF (menos de 256 colores). La reducción en la resolución de la imagen mejora muchísimo la transferencia directa de la información.

Reduzca el tamaño de un archivo gráfico, utilice menos colores, reduzca el alto y el ancho del gráfico o recórtelo.

• Algunas animaciones flash que se incluyen en páginas de presentación suelen pesar mucho (sobretodo si utilizan fotografías) y en la mayor parte de los casos aportan información poco práctica. Si insiste en utilizarlas no olvide ofrecer al usuario la posibilidad de obviar la animación con un botón que diga “saltar la animación”.



6. El color
Los colores son códigos que ayudan a la identificación de ideas clave, sección de contenidos y refuerzo en los conceptos. Crear un sistema de colores facilita al usuario un reconocimiento visual del contenido.
Los colores a utilizar deberán tener en cuenta principalmente, hacia quien va dirigido y el tipo de mensaje que pretende comunicar.

Una pauta importante a seguir puede ser basarse en la guía de estilos y colores propio de la entidad que emite la página, los colores de su propio logotipo o anagrama serán siempre un símbolo visual representativo de la empresa.

Significado de los colores:

Blanco: el blanco es luz, bondad, inocencia, pureza y virginidad. Se le considera el color de la perfección.
En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de la nieve.
Se utiliza en la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.

Negro: representa el poder, la elegancia, la formalidad, la muerte y el misterio. En una página Web puede dar imagen de elegancia y sofisticación y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es muy recomendable utilizarlo como fondo ya que disminuye la legibilidad.

Azul: es el color del cielo y el mar, por lo que se suele asociar con la estabilidad y profundidad. Es muy adecuado para presentar productos relacionados con la limpieza y todo aquello relacionado directamente con el cielo, el aire, el mar o agua.

Rojo: es el color del fuego y la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, determinación, así como la pasión, deseo y amor. Como está muy relacionado con la energía, es muy adecuado para anunciar coches, motos, bebidas energéticas, juegos, deportes y actividades de riesgo.

Naranja: combina la energía del rojo con la felicidad del amarillo. Es acogedor, cálido, estimulante y una cualidad muy positiva y enérgica. Tiene una visibilidad muy alta, por lo que es muy útil para captar atención y subrayar los aspectos más destacables de una pagina Web.

Verde: es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura. Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismos, actividades al aire libre o productos ecológicos.

Púrpura: aporta la estabilidad del azul y la energía del rojo. En la antigüedad era considerado el color más bello. Es bastante contradictorio, sugiere abundancia, sofisticación, inteligencia, espiritualidad, religiosidad, dignidad…Pero también puede provocar frivolidad, artificialidad y pomposidad. Es brillante ideal para diseños dirigidos a la mujer. También es muy adecuado para promocionar productos para niños.

Rosado: utilizado universalmente para el romance y presencia femenina por que sugiere calma y tranquilidad. Muy útil para crear atmósferas relajadas, reflejar diversión o para demostrar un lado creativo.

Marrón: puede ofrecer una variedad de significados desde la asociación con naturaleza, parques, hogar, hasta la vejez. Tiene connotaciones de calida, comodidad, conservador y natural. Es páginas web se utiliza para demostrar formalidad, honradez y experiencia.

Gris: es un excelente acompañante que ayuda a resaltar los demás colores. Connotaciones del gris: elegante, fresco, innovador, moderno, futurista, tecnología, espacioso, suave y neutral.

Arco Iris: representa la diversidad y la cultura. Muchos sitios lo utilizan para simbolizar amistad y alegría. Representa la diversidad, multicultural, fantástico, ligero, feliz, amistoso, alegre, fantasía, orgullo, energía y promesa.


Recomendaciones:

Los coloresno decoran. Son tu marca, y el contraste que los clientes valoran.

• No utilices fondos de colores muy saturados, a no ser que tengas un buen motivo.

• No apliques nunca texto extensos sobre colores saturados.

• Es muy importante tomar en cuenta espacios en blanco, refuerzan y delimitan el contenido.

• Una página web no puede estar saturada de muchos elementos de colores intensos sin objetivo alguno, dificulta focalizar la atención y hacer una lectura ordenada, consiguiendo que lo verdaderamente importante pierda interés.
Es recomendable tener en cuenta dos aspectos a la hora de tratar con el color en el diseño web. Para empezar, es preferible usar "colores seguros". Esta paleta está formada por 216 colores expresados por su valor hexadecimal, aunque puede ser usado su nombre equivalente a la hora de diseñar (ver:
http://roble.pntic.mec.es/apuente/nombre.html). Usando estos colores, la web mostrará los colores del modo esperado.

Por otro lado, los navegadores juegan también su papel a la hora de mostrar el color. Y es que sólo algunos poseen capacidad de gestión de este. Safari incorpora gestión directa e color. En Firefox, esta gestión debe ser activada. Gestionarlo en Internet Explorer resulta más complicado todavía. Un ejemplo de la importancia de la gestión de color se puede ver aquí:
http://www.jpereira.net/software/perfiles-de-color-e-internet

Y uno más espectacular, aquí (es necesario un navegador con la gestión de color activada):

http://www.fotomaf.com/blog/06/12/2007/activa-la-gestion-de-color-en-firefox-3/

A la hora de publicar gráficos y fotografías, el perfil sRGB es el más utilizado cuando se quieren evitar sorpresas.
7. La tipografía

No debemos considerar a los textos solo como la herramienta para desarrollar una idea, sino que además debemos incluirlo en el diseño de la página desde el punto de vista gráfico. Los textos se comportan también como un elemento gráfico, y poseen ,además, algunos atributos que comparten con éstos, como color, tamaño y forma.



• Tamaño de las fuentes

La determinación correcta del tamaño de las fuentes es muy importante, tanto para obtener una buena legibilidad de los textos, como desde el punto de vista estético. Existen muchas formas de establecer los tamaños de las fuentes, pero la más recomendable es establecer un tamaño de fuente para toda la página y luego hacer variaciones del tamaño empleando porcentajes o ems.

Las medidas más aconsejables para los textos, es de 11 puntos para la fuente y 13 puntos para el interlineado, ya que brindan una lectura descansada.

Pero debemos tener en cuenta que con técnicas de diseño cada vez más flexibles y con la llegada de navegadores alternativos, los textos de la página web deben ser flexibles. Atajos de teclado como «Aumentar fuente» o «Disminuir fuente» permiten «modificar» cualquier página rápidamente.



• Tipos de fuentes

Debemos esforzarnos en elegir bien las fuentes tipográficas, en Internet no todas valen.

La visualización de textos en monitores es especial. Existe controversia entre los especialistas en el tipo de fuente que es más legible. La mayoría de los profesionales sostienen que las fuentes más legibles son las fuentes sin serifa (Arial, Verdana, Tahoma), frente a las del tipo Serif o con serifa (Times New Roman o Georgia).

Lo más conveniente es el empleo de una sola fuente, o dos, y luego modificar los atributos de la misma, de forma que podamos establecer diferencias entre los diferentes tipos de texto (títulos, subtítulos, párrafos, etc.) que se encontrarán en la página.

Se debe tener en cuenta que los navegadores y sistemas operativos soportan tipos de letras diferentes, por lo que será necesario establecer un tipo de letras y algunos suplentes. Esto se establece en las hojas de estilo, los CSS.

A la hora de escribir estas hojas de estilo se pueden adoptar las siguientes soluciones:

-Definir, una detrás de otra, las distintas fuentes a mostrar. De este modo, el navegador usará la primera de estas fuentes que tenga disponible. De no hallar ninguna, usará la fuente predeterminada del sistema.

-Es posible limitarse a definir una familia de fuentes (serif, sans-serif...). El navegador elegirá una fuente que se corresponda con esos criterios.

-Existe la posibilidad de, mediante la regla @font-face, importar la familia de fuentes deseada indicándole al navegador desde donde debe descargarla (el propio sitio web u otro). No obstante, esta posibilidad todavía está poco desarrollada en los navegadores actuales.

Actualmente, el gigante Google también ha desarrollado la posibilidad de usar fuentes almacenadas en sus servidores para el diseño web. Más información:
http://blog.continuum.cl/archives/594
http://www.red-team-design.com/google-font-api-and-typekit-solutions-vs-font-face



• Legibilidad de la tipografía

La legibilidad de los textos es un aspecto muy importante ya que la dificultad para leerlos puede hacer que el visitante opte por retirarse de la página.

Por norma general se acepta que aquellas tipografías diseñadas para textos impresos no son convenientes para los textos de la web, ya que contienen elementos que necesitan de resoluciones mayores que las que ofrecen los monitores.

Para esto se han diseñado algunas tipografías que resultan particularmente útiles para ser aplicadas en el diseño que se van a visualizar en monitores, entre ellos las páginas web. Estas tipografías son, por ejemplo, Tahoma, Verdana y Georgia, que permiten una fácil lectura aún cuando se empleen tamaños pequeños.

Tampoco resulta conveniente el empleo de tipografías diseñadas con ornamentaciones, ya que las mismas pueden resultar de dificultosa lectura en tamaños normales o pequeños. Este tipo de fuentes ornamentales son útiles solo para emplear en los títulos y como parte de los gráficos.

También es importante recordar que muchas tipografías, a pesar de estar diseñadas para su empleo en informática, no se encuentran estandarizadas, por lo que algunos ordenadores podrían no visualizarlas, empleando en su lugar la tipografía que viene “por defecto” en el navegador.

Otro aspecto que influye negativamente en la legibilidad del texto en una página web es el uso de mayúsculas. Para palabras sueltas es un recurso respetable, pero para frases o párrafos enteros, más que enfatizar dificulta la lectura por lo que el efecto se pierde.



• Color de la tipografía de una web

El color de las tipografías, si bien deben integrarse con el resto del diseño, no debe rebajar la visibilidad de los textos. El color que se emplea en las fuentes debe contrastar nítidamente con el color del fondo donde es colocado. Un bajo contraste, hace que el texto se vuelva difícil de leer.

Las fuentes pueden tener diferentes grosores, pero las letras cuyo grosor es mayor a lo normal, solo deben ser empleadas en caso de que se quiera resaltar una parte del texto, ya que su uso continuo también resulta ser una dificultad para la lectura.



• Disposición de los textos en una página web

En aquellos sitios donde se debe colocar textos de gran extensión, es conveniente que el mismo se encuentre dividido en párrafos no muy largos, de modo que el usuario pueda realizar un rápido recorrido por el texto y no se “pierda” con facilidad.

Además es aconsejable la utilización de diferentes niveles de titulación para ordenar la secuencia de los textos, lo que también facilita al usuario encontrar aquellas partes del texto que le resulten más atractivas.

También es útil la creación de listas, se leen muy bien en pantalla y atraen la atención de visitante.

8. Botones y enlaces

Los botones de un sitio web cumplen con varias finalidades, más allá de principalmente conducir a otro link o ejecutar cierta acción. Los botones llevan un mensaje inherentemente visual que debe ser coherente con la imagen general del sitio. Por ello, un botón es más que un hiperlink, es un ícono que invita a realizar alguna acción en particular.

Es recomendable crear diseños sencillos que minimicen los tiempos de carga.

Es importante mantener una identidad visual y una coherencia visual, para que los botones no pasen desapercibidos a los ojos de los usuarios. Por ello, la mayoría de los botones son rectangulares, más anchos que altos, y pueden acomodar un icono y dos o tres palabras de texto. Por lo general, los botones de mayor tamaño son de bordes redondeados. El tamaño debe ser equilibrado, no sólo en cuanto al resto de los componentes del sitio, sino en cuanto al texto que se incluya en el botón mismo.

El uso de íconos en los botones aporta una gran fuerza comunicativa.

Para lograr un índice óptimo de usabilidad, es necesario que el botón sea efectivamente clickeable. Lo mejor es respetar los estados clásicos de los botones: que cambie de aspecto ligeramente al pasarle el ratón por encima, y que haga algún tipo de click cuando se pincha en él.



9. Redes sociales

Actualmente la forma más rápida de promover nuestro web site es a través de las redes sociales como Facebook, Twitter, etc... Es muy recomendable crear los enlaces para que nuestros visitantes puedan agregarlo directamente a su red o marcador social favorito.



Por otro lado, en los contenidos de planificación de productos, de contenidos multimedia, resulta creciente el lógico interés por la seguridad. Éste es un decálogo para mantener un control de seguridad en el uso cotidiano de Internet, publicado por la Oficina de Seguridad del Internauta del Instituto Nacional de Tecnologías de la Comunicación y que está siendo utilizado por profesionales de los medios de comunicación en sus rutinas diarias:
  1. Fraude online: Es la técnica que intenta suplantar la identidad de tu banco, red social o tienda online,y así capturar tus contraseñas y datos privados para usarlos ellos en tu lugar.
  2. Redes sociales:Antes de publicar nada en Internet, hazte las siguientes preguntas: “¿Quién va a acceder a esto que publico? ¿Me interesa que estas personas lo vean?” Protege tu privacidad, piensa antes de publicar.
  3. Programas de seguridad: Si no proteges correctamente tu ordenador, puedes ser víctima de virus y usuarios maliciosos al navegar por Internet. Los programas de seguridad te ayudarán a prevenir estos problemas.
  4. Descargas: Para evitar virus, descarga los ficheros sólo de fuentes confiables y los programas, desde las páginas oficiales. Y además, no olvides analizar con un antivirus todo lo que descargues antes de ejecutarlo.
  5. Dispositivo móvil: Tu móvil contiene gran cantidad de datos personales que debes proteger con contraseñas seguras. Empieza activando el PINcuando no lo estés usando.
  6. Actualizar: Es de vital importancia que actualices regularmente tanto el sistema operativo como el resto de aplicaciones de tu ordenador para reparar posibles fallos de seguridad y añadir nuevas mejoras.
  7. Compras seguras: A la hora de comprar en Internet, comprueba que las primeras letras de la dirección de la página son ‘HTTPS‘, de modo que la información viaje cifrada y así evitar que un atacante pueda capturar los datos.
  8. Informaciones falsas: Contrasta siempre la información antes de creértela. Sospecha de las páginas con mensajes llamativos o muy alarmantes, en ocasiones, intentan captar tu atención para redirigirte a páginas maliciosas.
  9. Copias de seguridad: ¿Has pensado lo útiles que son? Sé previsor y aprende a hacer copias de seguridad (o backup,en inglés). No cuesta mucho y puede ahorrarte disgustos y malos ratos…
  10. Contraseña: La mayoría de las veces una contraseña es la única barrera entre nuestros datos confidenciales y los ciberdelincuentes, por lo que merece la pena invertir un poco de tiempo para gestionarlas eficazmente.

Recursos para Wireframes y Fuentes a consultar


Fuentes a consultar

Enlaces

Tipografías web. Guía útil para decidirnos sobre la tipografía de nuestra web:
http://www.guiawebmaster.com/diseno-web/tipografia-web.php

Bibliografía


  • ALBERICH I PASCUAL, J., CAMPO VIDAL, M., CLAVELL CORBERA, F. et al (2005). Comunicación audiovisual digital. Barcelona: Editorial UOC, pp. 193-194.
  • CAICEDO CASTRO, I.B., y RUEDA FAJARDO, F. (2008). "Herramienta para habilitar el acceso multimodal a recursos de la WWW desde diversos dispositivos". Revista Ingeniería e Investigación[en línea], Vol. 28, Núm. 3, diciembre, 2008, pp. 53-57. Universidad Nacional de Colombia, Colombia. Consultado el 31 de octubre de 2011. Disponible en http://redalyc.uaemex.mx/pdf/643/64328308.pdf
  • CORNELLA, A. (2002). Infonomía.com: la gestión inteligente de la información en las organizaciones. 2ª ed. Bilbao: Deusto, p. 154.
  • GRANOLLERS I SALTIVERI, T., y LORÉS VIDAL, J. (2005). Diseño de sistemas interactivos centrados en el usuario. Barcelona: Editorial UOC, p. 146-147.
  • PALAZÓN, A. (2008). "Visualización en la información". En GARCÍA, A. Aproximaciones al periodismo digital. Madrid: Dykinson.Guión multimedia.
  • TSUJI TERESA. [En línea] http://www.areacomunicacion.com.ar/digital/cursosociales/multimedia/guionmulti.htm
  • Taller de periodismo multimedia. http://tallermultimedia.blogspot.com/2006/08/clase-3-haciendo-el-storyboard.html
  • SOMMERVILLE, I.Ingeniería del software. (2006) Unated Kingdom: Pearson Educación.

  1. ^ Web de la tecnología Sixth Sense
  2. ^ Cairo, Alberto. "El arte funcional" Ed. Alamunt. Madrid 2011. www.elartefuncional.com
  3. ^ Wurman describió el objetivo de la arquitectura de la información como una actitud para combatir la ansiedad que provoca la abundancia de información. Esta ansiedad informativa sería el agujero negro entre datos y conocimiento. Wikipedia: Richard Saul Wurman
  4. ^ Como curiosidad mencionar el trabajo de Otto Neurath, que en 1936 publicó Isotype, un lenguaje pictográfico que pretendía ser una alternativa al lenguaje escrito cuando fuera necesario. Este lenguaje estaba construido por pictogramas, iconos que podían agruparse y formar frases o pensamientos. Algunos de estos pictogramas, dibujados por Gerd Arntz, están disponibles en http://www.gerdarntz.org/




ESTRATEGIAS DE PLANIFICACIÓN Y DISEÑO
Centrándonos en el diseño y realización de una página web, vamos a basarnos en los aspectos básicos que se deben realizar para poder realizar y compner una web bajo los preceptos necesarios para una ordenación y composición idónea del contenido web.
Analicemos a continuación las directrices y pasos a seguir para la consecución idónea del servicio web y su diseño.
- Enfoque y objetivos de la web
Cualquier acción que realicemos debemos desarrollarla bajo el marco que nos dote de unas directrices a desarrollar para llevar a cabo el propio diseño web.
Conocer para qué y por qué realizamos el contenido web, nos delimitará y orientará sobre el futuro diseño. Ejemplos prácticos: Se puede realizar para el control y manejo de clientes prácticos; para simple exposición y presentación del producto o gestión y programación de servicios.
- Características específicas de la web
Una vez conocidos los servicios a prestar y la orientación de la propia web, tenemos que alimentar de contenido y de características el propio espacio. Para ello, dotar de diferentes medios la web, nos ayudará a otorgar una funcionalidad más o menos ceñida a nuestro objetivo final.
El uso de contraseñas para cuidar la seguridad de los usuarios, la aportación de una tienda on line, el contacto directo con clientes y proveedores, servirá para encaminar de una manera más detallada las funciones de la web, valiéndonos de un diseño que facilite dichas maniobras empresariales y multimedia.
- Definición de las secciones de la web
Por medio de diagramas, podremos facilitar las diferentes secciones con las que alimentaremos los contenidos de la web.
Dichas secciones deben ceñirse al propio diseño multimedia previamente programado, para de esta manera, poder dividir en diferentes temas y subtemas tanto los diferentes servicios como medios que se facilitan en dicho espacio.
El propio diseño otorgará una mayor flexibilidad o rigurosidad a la hora de poder adjuntar más o menos secciones.

- Contenido definitivo
Es uno de los últimos pasos a desarrollar y tal vez, el de mayor relevancia y trascendencia. Hay que tener en cuenta que el qué se cuenta y el cómo cimentará todas las bases sólidas sobre la que se sustentarán los documentos e informaciones que en el espacio web se presenten.
El contenido ceñido a los parámetros que otorga el diseño, debe exponer y presentar la idea última del proyecto.

- Estilo/Apariencia
Será la imagen externa de la web. Debe tener en cuenta que dicha imagen será rápidamente vinculada a la de la empresa o ente que tras ella se anuncia o presenta.
Hay varias formas de desarrollar dicho estilo: Bien siendo nosotros mismo quien configuremos el mismo, corriendo el riesgo que, sin ser profesionales, el resultado final quede lejos de nuestra idea principal; Directamente se puede contratar a un diseñador gráfico que nos oriente y ejecute nuestro originario objetivo; y por último, utilizando un template de website como modelo y base del diseño. Aquí corremos el riesgo de perder en originalidad y se nos puede encasillar por dicho diseño en el grupo de webs que hayan elegido el mismo diseño, pero también es verdad que operamos sobre seguro.

- Creación
Llegado a este punto puede comenzar con la realización y construcción de la propia web. Una vez afianzados los objetivos y el diseño, simplemente hay que darle forma al contenido web
- Revisualización
Tras finalizar el espacio, hay que retomar el contacto con él, transcurrido un prudencial tiempo, para de esta manera poder evaluar objetivamente el uso y funcionamiento del espacio.
Analizar la velocidad y localización de los aspectos desarrollados, así como el correcto uso de links o medios multimedia que se facilitan en dicho espacio, son algunas de las pruebas a desarrollar una vez tengamos lista la web.
Cerciorarnos de que hemos logrado lo que desde un primer momento buscábamos así como su funcionalidad desde el punto de vista del cliente o usuario, otorgará a nuestra novedosa creación del éxito que perseguimos desde la idea originaria.

- Mostrar el espacio
Una vez ya concluido el trabajo y el proceso de realización, estamos listos para subir nuestros contenidos y hacerlos visibles y públicos.
Para ello, mencionaremos los tres mecanismos más comunes y frecuentes para globalizar nuestro producto.
  • Registre un dominio
  • Encuentre una compañía host
  • Upload el website

Los mecanismos y las variables para desarrollar dichas acciones son diversas y múltiples, debiendo seleccionar la que más se asemeje a nuestras posibilidades y objetivos.


3.2 Mundos virtuales.

Uno de los fenómenos que se ha dado en los últimos años en lo que a visualización de información se refiere son los mundos virtuales. Entendemos por tales aquellas interfaces que representan el mundo real a través de interacciones que podríamos establecer igual que en la vida real e interactuar de la misma manera que si lo hiciéramos en realidad. Este tipo de interfaces requieren una serie de elementos para su correcta visualización que han dado pie al nacimiento de un nuevo lenguaje y una nueva relación hombre-máquina del que todavía desconocemos su auténtica dimensión.
Como primer punto a destacar, podemos decir que los mundos virtuales pueden estar basados o no en la realidad. Programas interactivos como Second Life, que se popularizó en los principios de este siglo, permiten recrear escenarios y diseños interactivos de relaciones personales que pueden estar basados en mundos conocidos o pueden ser completamente recreados desde cero a gusto del usuario. Sí requiere una serie de elementos que permitan interactuar.




Un sistema de computación usado para crear un mundo artificial donde que el usuario tiene la impresión de estar en ese mundo y la habilidad de navegar y manipular objetos en él.


Mundos virtuales son un campo de la tecnología muy relacionado con la inteligencia artificial ya que consisten en la simulación de mundos o entornos a los cuales se les denomina virtuales.





  1. Escenarios identificables. Entendemos por tales incluso las propias divisiones que Second Life establece para poder ser usuario. Nos movemos a través de islas que recrean a su vez, estructuras sociales de la realidad. Al fin y al cabo todos tenemos nuestra isla compuesta por el entorno físico en el que nos desarrollamos.
  2. Personajes tipo. Creamos un avatar para desarrollarnos en ese mundo virtual. Ocurre lo mismo que en la vida real, sólo que en la vida virtual podemos diseñar ese personaje a nuestro antojo sin dejarnos influir por estereotipos sociales.
  3. Acciones. Los personajes interactúan entre si y, a su vez, en unos escenarios, pero combinando acciones de la vida real y nuevos elementos que llegan hasta donde la propia imaginación del usuario pueda alcanzar. Por ejemplo, un avatar puede teletransportase o puede volar por si mismo.

Esta es la estructura de un mundo virtual.

mundos virtuales.png

El espacio, en los mundos virtuales, es compartido entre muchos usuarios, que pueden interactuar en tiempo real y de manera inmediata. Se representa un espacio que puede incluir mundos 2D y 3D. La interactividad permite crear, desarrollar, construir y compartir contenido y, por último, es un mundo social que se desarrolla en comunidad, lo que permite crear desde relaciones personales hasta grupos sociales identificables o completamente nuevos. Además, tiene múltiples aplicaciones: el simple ocio o entretenimiento, el entorno educativo, el comercial, el de desarrollo de comportamiento y el desarrollo social y cultural. Por lo tanto, estamos hablando de un entorno que permite el desarrollo social del individuo tanto en su propio yo como en un entorno más social. Además, en los últimos años, y con la expansión de los smartphone y las rede sociales estamos asistiendo a una expansión de esos mundos que exigen una nueva manera de entender la interfaz de usuario.


http://www.taringa.net/posts/juegos-online/11641701/los-23-mejores-juegos-de-mundos-virtuales.html


Bibliografía

Hall, R.H. Color combinations and readability. Obtenido el 3 de diciembre de 2012 de http://web.mst.edu/~rhall/web_design/color_readability.html
Uribe Mendoza, Bernardo; Mundos virtuales. Definiciones multidisciplinares. Universidad Nacional de Colombia. http://www.virtual.unal.edu.co/cursos/artes/2003259/pdf/libro1.pdf

http://www.ucm.es/info/multidoc/multidoc/revista/num8/hilera-oton.html

http://vik91110-mundosvirtuales.blogspot.com.es/