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

El reto del concurso era diseñar una aplicación turística para ciudades donde ocurrirá un mega-evento, pero que al final pueda seguir siendo útil y provechosa para los locales y nuevos turistas. Fue así como presentaron InTour: una aplicación que no sólo es pensada para el turista individual, sino que fomenta la integración familiar y generacional a través de una vacaciones bien planificadas, tanto en presupuesto como en actividades. Dichas actividades son "manifestadas" por la ciudad misma —gobierno, empresas u ONGs, para demostrarle a los visitantes del mega-evento lo "viva que está la ciudad"— con opciones para armar un plan flexible dependiendo de la distancia, transporte, tópico, clima o dinero asignado para el día.

El proceso de diseño involucró investigación secundaria y entrevistas a usuarios con el perfil de usuario potencial. Se diseñaron Personas, se hizo lluvia de ideas y se elaboraron bocetos —parte que a mi siempre me parece muy entretenida. Cuando se pulieron los detalles, verificando cómo se cumplían las metas de las Personas, se elaboró el prototipo cuya usabilidad fue evaluada.

Algo que disfrute mucho y que fue parte del proceso, fue cuestionar a los muchachos sobre cómo se presenta la información, qué comunica de un solo golpe en cada pantalla, cómo sí influye la visualización en la interacción y temas similares. Espero haber dejado en ellos que el diseño visual para IHC no es solamente que se vea bonito, sino que es parte "del show".

Extiendo mis felicitaciones al equipo UDLAP: se decidieron, lo intentaron y completaron la misión. Y es que en México desde el 2010 se ha fomentado este tipo de concurso y por si no saben, México, y en particular el equipo de la UTM de Oaxaca, se ha llevado el primer lugar en foros importantes. Así que el hecho de que la UDLAP se una a este conjunto de jóvenes entusiastas y ganadores, no solo me da mucho gusto por el triunfo, sino que señala que en el ámbito universitario hay un mayor interés por desarrollar el Diseño de Interacción y la Interacción Humano-Computadora. Si la academia se pone en paralelo con lo que está sucediendo a nivel profesional desde hace un par de años —como la creación de startups y grupos de interés, entonces algo bueno sucederá o dirá de nuestro país, ¿no creen?

Más información en la nota del concurso en el Blog de la UDLAP.

Gracias a Thaís, Jorge, Rafa, Alan y Betty por haber estado dispuestos a idear, charlar, discutir, criticar y diseñar juntos. ¡Felicidades!

Es probable que no quedemos satisfechos con lo aprendido en la universidad jamás, no importa la licenciatura que hayamos o estemos estudiando. Parece que el problema es que los cursos universitarios son suficientes desde un punto de vista formativo —te dan las bases para crecer como profesional, como si fuera un trampolín— pero insuficientes desde un punto de vista laboral y práctico —y es que colegas diseñadores me han enseñado y confirmado que sólo haciendo se puede conseguir la maestría sobre alguna rama del diseño.

La idea de escribir este post salió de la discusión con un estudiante de administración de empresas que comentó que los diseñadores deberían de saber sobre negocios y administración; que aquello les daría una buena "arma" para ser competitivos. Yo secundé la idea, y mencioné que esto aplica sobretodo porque somos un mar de personas trabajando en el área. Sin embargo, mencioné que aunque era buena la idea, su insistencia tenía que ver con su formación. Comenté que de igual forma él debería aprender cosas sobre diseño o bien, aprender a hacer investigación y a escribir y publicar artículos, ya que no solo sería bueno para transmitir el conocimiento sino que también sería bueno para saber si ese camino podría ser para él. Aún más, que el mismo razonamiento podría aplicarse si a los diseñadores les enseñaran sobre Economía, Finanzas, Antropología, etc.

Luego, charlando con una colega diseñadora, salió al tema que en la escuela le habían enseñado a ser buena ejecutante gráfica pero que le hacía falta aprender a estructurar sus ideas y que eso era un factor para detener su proceso creativo. En una situación similar, de un colega diseñador he escuchado que su necesidad es tener idea de cómo constituir una empresa y saber asuntos mínimos legales y fiscales asociados a esta tarea.

¿Son estas carencias perjudiciales? No de primera mano. Es verdad que la universidad debe formar sólida e integralmente a un estudiante, pero también es una realidad que no puedes formar "todólogos" con cursos sobre todos temas "por si las moscas", ya que al final los cursos especializados serían muy pocos y entonces no existiría porque otorgar un título indicando la especialización con respecto a  alguna disciplina —sin duda, este es un problema al que se enfrentan los programas de licenciatura transdisciplinares.

Por otro lado, esta "falta de conocimientos" permite la capitalización del mismo: "yo se esto y sobre esto puedo cobrarte". El problema, al menos en el contexto mexicano, es que las empresas con tal de minimizar costos sí exigen "todólogos" y también no hay mucha cultura de trabajar en equipo —hay barreras de lenguaje disciplinar, asuntos de protagonismo, falta de administración de tiempo y objetivos, etc. Quizá la falta de dinero para pagar el conocimiento de cada quién influye mucho. Claro, no todo es "malo". He tenido la oportunidad de presenciar casos y/o situaciones donde "echar mano" y "hacer montón" han derivado en proyectos bien llevados, con resultados exitosos. Lo mejor de estos casos es que son lecciones por si mismos: ayudan a entender cuáles son tus capacidades y cuáles son tus limitaciones, desarrollar habilidades de comunicación, entender la perspectiva de otros perfiles para la solución de problemas, e incluso incrementar los niveles de tolerancia y respeto.

Entonces, el asunto no está en "saber vs. no saber", sino en "hacer y aprender". Y de vez en mucho, o cuando se reconozca que es primordial, entonces admitir que "dos o más cabezas, piensan y ejecutan mejor que una"; o dicho en otras palabras:

1% conocimientos. 99% relaciones humanas.

Saludos.