Mi solución es bastante artesanal y no tiene nada de sofisticada. Aunque hay artículos bastante completos sobre el tema, yo había leído alguna vez que tenía que ver con el viewport, y entre los resultados de mi búsqueda di con el uso del parámetro media y los CSS Media Queries. En los siguientes recursos está cómo emplear diferentes hojas de estilo dependiendo del medio:

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/6731-css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://www.css3.info/preview/media-queries/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.thecssninja.com/css/iphone-orientation-css

En cuanto al diseño web, siempre tuve una preferencia por layouts fijos por tener un mayor control del espacio en ventana y por tomar en cuenta la resolución estándar de un usuario potencial. Nunca me había preocupado porque la información quedara bien acomodada en diferentes resoluciones; es un reto interesante conservar la estética reticular y mantener un flujo de lectura adecuado para cada resolución. Este tipo de soluciones requiere que tengamos una actitud algo quisquillosa y obsesiva, así como trabajar cada layout hasta quedar satisfechos.

Justo por el cambio de "paradigma" de fijo a adaptable, y ante una especie de "bloqueo ante la hoja en blanco", no quedaba conforme en (regresar a) maquetar primero en algún software de diseño, así que lo trabajé directo en pantalla. Un pro de esta decisión es que vas viendo "en tiempo real" como quedan las cosas en diferentes navegadores y resoluciones. Un contra es que podemos perder el control fácilmente —sobretodo si dejamos el proyecto un día o dos. Es importante hacer anotaciones en papel y documentar en las hojas de estilo para que recordemos por qué tomamos ciertas decisiones. En este proyecto, me resultaron —a mi juicio— muchas hojas de estilo y fui redundante en ciertas reglas, dejándolas en cada hoja porque no sabía como iba a verse "el final" en todas las resoluciones; algo así como "un cambio por aquí y luego ajusto por acá".

Con un layout fijo no considero útil que tengamos muchas hojas de estilo, pero dadas las múltiples resoluciones, parece ser necesario un mayor número de "enlaces". Un colega me sugirió hacer importaciones, pero al final descarté esta opción porque según hojeé, afecta el rendimiento:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Otro punto importante es verificar la compatibilidad de los CSS Media Queries. Originalmente estaba muy feliz —tipo the Oatmeal— porque IE se comportaba decente; pero por no leer, me llevo la sorpresa de que fuera de IE 9, simplemente no funcionan:

http://caniuse.com/css-mediaqueries

Ante esta situación, decidí dejarle un layout fijo a todos aquellos usuarios que tuvieran de IE 8 para abajo y tomando como resolución estándar 1024 px de ancho.

Luego está el asunto del iPhone y del iPad. Hay que poner una línea de código que indique qué va a pasar cuando el navegador sea Safari. Esta línea asocia la variable "ancho" empleada en el CSS Media Query con el "ancho" del iPad, iPod o iPhone —según sea el caso. Además, resulta que cuando pasamos de modo landscape a portrait, o viceversa, se hace un zoom medio raro y es posible que los textos se desplieguen de diferente tamaño a como los observamos en una computadora de escritorio. Para validar todo lo anterior está como referencia el siguiente recurso:

http://stackoverflow.com/questions/2977550/iphone-safari-css-rotation-bug

A mi me divirtió mucho esta idea de presentar el mejor layout dado el ancho del iPod, iPhone o iPad. Sin embargo, siendo sinceros y "usables", la desventaja de jugar con diferentes acomodos de la información es que rompemos con la navegación (browsing) del usuario. Cuando alguno de estos dispositivos se rota 90 grados, debido a este re-acomodo, el usuario pierde vista la información de su interés. Lo anterior es más evidente en el caso del iPod/iPhone. Cognitivamente, lo que hacemos es "resetear"  el flujo de interacción; definitivamente algo no bueno para ningún usuario. En este proyecto, la mayoría de la información es estática y aquella que podría cambiar o agregarse durante el año, estará ubicada en la parte superior de las páginas correspondientes.

Una colega me señaló que estos ajustes automáticos no siempre convenían si trabajamos en una computadora de escritorio  —o en una laptop con pantalla grande — porque quizá el re-acomodo de la información podría perjudicarnos cuando llevemos a cabo una tarea más compleja, donde trabajemos con la información proveniente de diversas ventanas. Se me hizo un punto válido; por ejemplo, yo mismo he copiado y pegado información de una página web a Word o Excel. En este tipo de situaciones, debería de haber una opción para "fijar" el layout.

Por último, no olviden visitar http://ciria.udlap.mx/franciscana/ para enterarse de qué conferencias y exposiciones habrá en dicha biblioteca. Saludos

En verdad se manejan varios conseptos de GUI y HCI, pero esto ya rompio la barrera del cliché cinematográfico, verás la persona que asesoro a Ironman y Minority Report en el ambito “futurista” es un reconocido investigador del MIT que ya ha desarrollado un interfaz espacial llamada g-speak. Su nombre John Underkoffler y para muestras de lo que ha logrado aqui les dejo su pagina de videos oficiales: http://www.vimeo.com/user922585.

Gracias por compartirme esta información. Inmediatamente me fui a revisar la liga de Vimeo y qué agradable sorpresa resultó el g-speak. Abajo dejo el video de este sistema ambiental para quienes gustan de las interfaces por gestos.

g-speak overview 1828121108 from john underkoffler on Vimeo.

En corto y para acceso rápido: John Underkoffler, fundador de Oblong Industries, es doctor egresado en 1999 del Tangible Media Group del Media Lab del MIT, grupo dirigido por Hiroshi Ishii.

]]> http://tzek-design.com/blog/2009/08/11/g-speak-de-john-underkoffler/feed/ 2 http://tzek-design.com/blog/2009/06/01/mauro-pinheiro-diseno-de-interaccion-desde-brasil/ http://tzek-design.com/blog/2009/06/01/mauro-pinheiro-diseno-de-interaccion-desde-brasil/#comments Mon, 01 Jun 2009 22:46:07 +0000 Tzek http://tzek-design.com/blog/?p=681

Mauro Pinheiro. Diseñador de Interacción.
http://www.feiramoderna.net/blog

¿Puedes contarnos un poco de ti?

Soy carioca, nacido en Río de Janeiro en 1972. Soy diseñador, egresado de la Escuela Superior de Diseño Industrial (ESDI) en 1995, con especialidad en diseño gráfico y diseño de producto. Desde antes de terminar los estudios ya trabajaba con proyectos de medios interactivos, inicialmente desarrollando software educativo. Después con la llegada del Internet comercial en Brasil, pasé a trabajar en sitios, desarrollando proyectos de educación a distancia.

Después de terminar la maestría en diseño, en el año 2000, trabajé en Globo.com, un portal importante en Brasil donde me involucré en actividades relacionadas con arquitectura de información. Ahí tuve la oportunidad de coordinar un equipo de arquitectos de información y de realizar pruebas de usabilidad con los proyectos que desarrollábamos.

A partir del 2004 me dedico exclusivamente a la academia como profesor del Departamento de Diseño Industrial en la Universidad Federal del Espíritu Santo. Desde 2007 estoy cursando el doctorado en la Universidad Pontificia Católica de Río de Janeiro (PUC-Rio), donde desarrollo una investigación sobre el diseño de interacción en un contexto de ubicuidad y generalización computacional (ubiquitous and pervasive computing).

¿Qué significa para ti el término “diseño de interacción”?

Esa pregunta no tiene una respuesta simple. El diseño de interacción es un término cuya comprensión varia mucho, dependiendo del contexto en el que aparece. El propio término “interacción” es complejo.

Una de las primeras cuestiones que surge cuando se intenta definir el significado de diseño de interacción es su relación con los medios digitales. Si bien reconozco que cualquier objeto permite algún tipo de interacción, históricamente el término “diseño de interacción” se refiere al hecho de diseñar para medios digitales. El avance de la computación ha ampliado las posibilidades del diseño de interacción, que deja de tener la pantalla de la computadora como principal elemento de mediación. Ubiquitous computing, tangible media, wearable computing, ambient inteligence son algunas vertientes actuales de la computación que aportan nuevas cuestiones relacionadas con el diseño de la experiencia de uso de sistemas computacionales.

Pienso que el diseño de interacción sí es una disciplina distinta al diseño gráfico, diseño de producto, el cual necesita una formación particular. No se trata tan solo de una palabra de moda, aunque mucha gente se considera diseñador de interacción sin estar consciente de lo que constituye a esta disciplina.

Botanicalls: plantas que "twittean" cuando necesitan agua (posteado en PetitInvention).

¿Cuál es la situación del diseño de interacción en Brasil, tanto a nivel académico como a nivel laboral?

El diseño de interacción en Brasil se encuentra todavía en una fase embrionaria. Hay un mercado relativamente maduro para aquellos que se dedican a diseño de sitios web y, más recientemente, a interfaces para teléfonos celulares (aunque en menor escala).  Sin embargo, básicamente nos limitamos a esto, ya que, a pesar de que tenemos una producción considerable de software en el país, no tenemos inversión en tecnología computacional como sucede en otros países como Estados Unidos o Reino Unido.

Quickies: Intelligent Sticky Notes (MIT Media Lab).

Aquí la discusión sobre los sistemas computacionales integrados al medio ambiente o el diseño de objetos inteligentes es muy limitada, restringida a algunas universidades, con poco o ninguna participación de la industra. Ya hay algunas iniciativas aisladas de creación de grupos de investigación y cursos de especialización en diseño de interacción que propone una mirada más global, incluyendo temas como persasive computing y ambient intelligence.

Digital Tattoo Interface (Greener Gadgets Design Competition 2008).

¿Qué habilidades, conocimientos básicos y herramientas crees que deba tener un diseñador de interacción?

Tradicionalmente el diseño, en todas sus especializaciones, tiene una relación profunda con la tecnología, con herramientas y procesos productivos. Aunque estos componentes determinan parte de nuestro lenguaje, no somos meramente técnicos que utilizan las herramientas de manera mecánica. Necesitamos renovar constantemente nuestro repertorio conceptual y técnico al mismo tiempo, un proceso que nunca acaba.

Object Aware (MIT Media Lab).

Es importante conocer al menos las tecnologías computacionales involucradas, de acuerdo con el tipo de proyecto. Si estamos hablando de un sitio web, es preciso conocer el lenguaje de ese medio, las tecnologías más recientes apropiadas para su desarrollo. No se espera que un diseñador sea un buen programador en Ajax, JavaScript. Sin embargo, debe saber cuáles son las posibilidades de interacción que le ofrecen estas herramientas.

En un proyecto de algún tipo de interacción integrado al ambiente, es preciso conocer otras tecnologías, como sensores y sistemas de transmisión por radio. Es común que en las escuelas de diseño de interacción los alumnos trabajen con hardware y algún lenguaje de programación básico, montando prototipos de baja fidelidad para probar sus ideas.

Relational Pillow (MIT Media Lab).

Después de muchos años de una perspectiva enfocada en los objetos, los diseñadores han notado que estos objetos existen en un contexto y que son utilizados por personas que tiene características particulares. El estudio de los contextos de uso y del comportamiento humano parece estar entrando finalmente en los intereses de los diseñadores. Yo diría que ese es un “conocimiento básico” necesario actualmente para cualquier especialidad del diseño.

Como investigador en diseño, ¿crees que puede vincularse la investigación con la práctica real del diseño?

Durante mucho tiempo la producción de conocimiento en el ámbito del diseño fue basada en el empirismo, sobre una base práctica. Ahí hay un componente en el proceso de enseñanza que me parece, en cierto modo, una herencia del modelo “maestro-aprendiz”: se aprende haciendo. Para un disciplina que siempre tiene un vínculo estrecho con la práctica, es natural que un cuerpo teórico y la práctica en investigación no se consoliden como herramientas a tomar en la elaboración de proyectos.

Es un hecho que la industria tiene un “tiempo” y características muy distintas del universo académico y de investigación. La investigación es algo que se pretende a largo plazo, mientras que la industria pide el resultado de inmediato. Todavía hay un brecha entre aquellos que se dedican a la investigación y aquellos que están involucrados con proyectos en la industria, sin embargo creo que esa distancia disminuye.

Ambient Umbrella (Ambient).

La industria, especialmente la del diseño de interacción, parece haberse dado cuenta que la investigación tiene mucho que ver para la creación de productos más adecuados a las necesidades del público. Una de las principales cuestiones es justamente entender el factor humano. A pesar que el discurso del diseño centrado en el usuario no es nuevo, no es hasta ahora que la industria parece notar que comprender a los usuarios es fundamental para el éxito de cualquier proyecto, y que no basta solamente con la experiencia de los diseñadores.

Claro que en el día a día y en función de los plazos, el empirismo y las soluciones ya conocidas acaban prevaleciendo la mayoría de las veces. Sin embargo, la consciencia de que es necesario buscar conocimiento científico para auxiliar la práctica proyectual, indica que el distanciamiento entre la práctica y la teoría tiende a disminuir cada vez más.

Future of Internet Search (posteado en PetitInvention).

Como profesor, ¿existe algún tipo de formación especial que deseas “dejar” en tus alumnos que los distinga de otro tipo de diseñadores, sobretodo para competir en el mundo laboral?

He pensado mucho sobre ese tema ya que trabajo como profesor. La formación de los diseñadores de interacción es algo difícil por el hecho de ser una disciplina reciente y más aún, por nuestra situación particular, de estar en países sin una tradición en el desarrollo tecnológico. Especialmente en Brasil, donde consumimos y utilizamos tecnologías de todo tipo en nuestro día a día: celulares de última generación son utilizados sin problemas por niños en las comunidades más pobres, que normalmente tendrían dificultades para acceder a ese tipo de productos. Sin embargo, no tenemos participación activa en el desarrollo de esa tecnología.

Para que los diseñadores de interacción puedan realmente ampliar sus posibilidades de acción, creo que deben ser sobretodo curiosos y mantener su interés por la investigación constantemente alimentado. Su formación es algo que no se termina con la universidad. Este es un campo de trabajo en que las cosas ocurren muy rápido, y más ahora que vivimos literalmente en un mercado global.

Frase de Mauro:

Somos países que no cuentan con una tradición en desarrollo tecnológico, al menos no en los productos y servicios correspondientes al campo de acción de diseño de interacción. Por lo tanto, estamos en una situación extraña, tanto como diseñadores o investigadores, porque al mismo tiempo estamos en contacto con el trabajo de nuestros pares en países más desarrollados, el cual acaba por conducir la producción tecnológica que utilizamos y estudiamos, y por otro lado, tenemos la tarea de pensar qué es el diseño de interacción dentro de los límites de nuestra realidad, dentro de países en un estado de desarrollo tecnológico diferente a aquellos más avanzados. Creo que tendríamos que aprender mucho de las relaciones entre nuestros países*.

* Refiriéndose a México y Brasil.

-----------------------------------------------------------------

Me tomé la libertad de adjuntar la liga del instituto de diseño de interacción donde Mauro ha sido invitado a dar unas charlas, así como dos presentaciones de él que me gustan mucho [Tzek].

Liga al Instituto Faber Ludens: http://www.faberludens.com.br/