El trabajo de un diseñador usando CCS y xhtml strict, puede ser muy tedioso, sobre todo a la hora de testear diferentes navegadores. Ni hablemos de la situación actual: Microsoft lanzando un navegador nuevo, el IE7, que implica desinstalar la versión previa de Explorer para poder ser usado.

Mientras hoy estaba dando forma a un nuevo sitio basado en estándares, me agarró la paranoia: ¿y si todo el cuidado que estoy teniendo para que esto se vea bien en Explorer 6 y Mozilla Firefox es en vano?

El motivo de la paranoia es más que válido: siempre que Microsoft actualiza uno de sus productos estrella (en este caso, Internet Explorer), los efectos colaterales de esa actualización suelen ser:

• Incontables fallas de seguridad en el navegador
• Caos total en la forma de mostrar las páginas que funcionaban "maravillosamente bien" en la versión anterior

Pero el motivo de este breve artículo no es hacer leña del browser caído, ni mucho menos.

Dando vueltas por la web, llegué a varios sitios que hacen capturas (screenshoots) de como se ve una dirección web en diferentes navegadores, e incluso, diferentes plataformas. Me he topado con un sitio muy interesante, pero pago, y de ninguna manera pensaba pagar por este servicio.

Finalmente encontré browsershots.org.

Este sitio no sólo es gratuito, sino que muy eficaz: uno tipea la url a testear, y la página encola el pedido, hasta que en un momento devuelve las capturas de  los navegadores en cuestión (17 para Linux, 4 para Windows, 1 para Mac). Uno puede ver los previews de las capturas, hacer click y ampliarlas (a la resolución solicitada, si es que pedimos una en particular) y ver el resultado final.

Como si fuera poco, además de diferentes plataformas y navegadores, browsershoots.org nos permite testear nuestro sitio con los siguientes parámetros:

• Resolución de pantalla
• Javascript
• Macromedia Flash
• Profundidad de Color
• Java
• Plugins Multimedia 

 Muy recomendable, espero les sea de utilidad.

Eduardo Cesario

El tema parece simple, pero en realidad, es crucial.

Todos los que hacemos diseño, o al menos los que recibimos una formación proyectual y conceptual, se nos ha inculcado desde el principio, la importancia de un boceto para llegar a dar forma a lo que será la idea/concepto final de nuesto diseño.

Hasta ahí vamos bien, ahora, ¿qué pasa cuando lo que tenemos que representar es un diseño en plantilla xhtml/css? 

En realidad esta pregunta, que puede parecer obvia, no lo es tanto. Algunos dirán "me bajo una plantilla prearmada y la modifico", si, pero se supone que la plantilla la estamos creando y diseñando nosotros, por ende, esa respuesta queda descartada del razonamiento.

"Empiezo a codificar con un editor visual del tipo Dreamweaver, y voy usando las paletas para guiarme": esa es una posible solución, pero no para la persona que recién se está adentrando en el mundo xhtml: sabemos que un div mal cerrado puede producir un desastre en nuestro diseño…

"Codifico todo de cero", pero cómo hacer eso sin tener la idea realmente definida, y la destreza aplicada a esa resolución.

Lo que yo propongo es lo siguiente: revalorizar nuestra capacidad de dibujar y bocetar (por más que no seamos Leonardo Da Vinci, de hecho, yo estoy muy lejos de serlo), para poder visualizar con mucha más claridad y de forma más amena, lo que vamos a intentar decirle al navegador que haga.

Estoy hablando de un boceto no para concebir la idea gráfica (se supone que ese/esos ya los hicimos antes de plantear la estética, concepto, etc.), sino uno que va a ser una suerte de mapa de como descompondremos el cuerpo del documento en divs o areas para ser traducidas a código.

A continuación detallo un ejemplo para un diseño que estamos haciendo en el estudio:

Primero tenemos el layout o plantilla, en mi caso, un png, hecho en Fireworks. La primer parte es observación pura, determinar que áreas vamos a separar, agrupar, etc.

En nuestro block o cuaderno, hacemos un rápido esquema representando en abstracción, la plantilla supuesta.

Yo recomiendo:

• Usar 'cotas' para medir en pixels o porcentajes las areas a designar.
• Usar rectángulos para separar los divs.
• Colocar aunque sea abreviado, el nombre para cada div.
• Tratar de utilizar la menor cantidad de zonas.
• Usar nuestra inteligencia, para poder visualizar cual solución es la mejor y menos costosa.

En esta figura, si bien no es lo más clara posible,vemos el resultado de superponer el boceto de la estructura, sobre el diseño original: si bien no tienen que coincidir fielmente, este paso es completamente ilustrativo y no es necesario hacerlo, me tome el trabajo para que vean como conviven ambas figuras.

Ahora si: en nuestro boceto original no se veía con mucha claridad el trabajo, pero si lo aprolijamos un poco, vemos detalladamente cada una de las zonas o divs en las cuales descompondremos el cuerpo del documento xhtml, para llegar al resultado final.

Si bien este procedimiento/método no nos va a solucionar el problema que representa la crudeza de encarar un diseño xhtml, la compatibilidad en diferentes browsers/plataformas, la 'reinterpretación' de cada browser de nuestro código, etc, puedo garantizar que hace el trabajo mucho más ameno, y que con el paso del tiempo, hasta quizás podamos prescindir de este paso para diseñar.

Espero les haya sido de utilidad.

Eduardo Cesario

Es oficial señores:

Tengo el agrado de anunciar que luego de muchas idas y vueltas, me he decidido a lanzar el sitio de Organica Creativa.

Las motivaciones de esto son conocidas por muchos de ustedes: sentía la necesidad de hacer algo exclusivo dedicado a este diseño que tantas satisfacciones me ha dado en este tiempo, y que a tanta gente le gusta en el mundo. Por eso, lo que por el momento se puede ver, es una homepage, con un estilo de Organica Creativa Remixed, podríamos decir. Pienso incorporar mucha información sobre el proceso de diseño, las versiones que hay dando vueltas por ahí y otras tantas curiosidades e informaciones.

Algunos datos curiosos de organicacreativa.com:

• Diseño Gráfico y Proyección: 2 días.
• Armado de xhtml y css: 5 horas.
• El prototipo fue armado de las 12:00 AM a las 5:00 AM del 2 de enero (si, si, los diseñadores preferimos la noche…)
• El sitio validó en la primer prueba hecha contra el validador de la W3C.

Espero puedan visitarlo, y dejar algún comentario sobre lo que les pareció. 

Eduardo Cesario

Un año prácticamente ha pasado desde que redefiní la estructura de mi emprendimiento, La Criatura Creativa (sitio personal que había creado en el 2001) a CCS Criatura Creativa Studio , un proyecto mucho más ambicioso en el cual tengo el orgullo de contar con un equipo de gente que potencia cada diseño y producto que llevamos adelante.

Estos meses transcurridos han dado frutos en muchos aspectos: una gran producción de diseños creativos y usables, proyectos para empresas del extranjero (incluyendo uno para Apple), nominaciones en webs de diseño, y reconocimientos de Organica Creativa en un libro de diseño web.

A manera de cierre del año, me pareció interesante mostrar un compendio con los mejores diseños que pudimos concretar en el 2006.

Fundación CEDEMIL [Argentina]

Sitio para la Fundación CEDEMIL, encargada de darle empleo a personas con discapacidad.

Interdisziplinäre Vorlesungsreihe Tierrechte [Alemania]

Proyecto para la Ruprecht-Karls-Universität Heidelberg, con motivo de unas jornadas para la concientización sobre los derechos de los animales.

SNH Translations [EEUU /Argentina]

Este sitio fue desarrollado junto a la imagen corporativa de la empresa, para lograr una imagen altamente profesional, amena y experimentada.

Expan Tours Argentina [Argentina]

Sitio para la agencia de Tursimo representante oficial de Swiss Airlines en Argentina.

Sociedad Latinoamericana de Hombro y Codo [Latinoamérica]

Esta comunidad de profesionales de la medicina necesitaba una imagen limpia y precisa. Diseñamos la marca y el sitio web para el proyecto del Dr. Daniel Moya.

ThingFling [EEUU]

Un sitio de ventas de productos, que requirió una imagen tipo Austin Powers, y una alta versatilidad y usabildad en su planteo.

BLAST Fireworks [Canada]

Más que un rediseño, un nuevo diseño, en el que solo conservamos el logotipo, para llegar a un resultado altamente profesional.

Megaconsumo [Argentina]

Futuro sitio de ventas online de productos eléctricos y para el hogar. Un impacto visual producido por la riqueza en los íconos y la cromaticidad de los mismos.

Organica Creativa para DirectToWeb [EEUU]

La versión de Organica Creativa diseñada especialmente para DirectToWeb, una interface pensada para interactuar con ITunes. Este diseño fue creado para Ravi Mendis, desarrollador de Apple.

Como cierre a esta suerte de inventario del año, quiero particularmente hacer notar la versatilidad que tiene diseñar con Cascade Style Sheets y XHTML Strict: si bien puede parecer algo desafiante e imposible de lograr, los ejemplos que expuse arriba demuestran lo contrario.

Es particularmente notable la diversidad de estéticas y layouts conseguidos usando esta tecnología, donde priman tanto el concepto en el diseño, como un nivel muy profesional en la resolución de cada proyecto.

Un muy feliz 2007 para todos.

Eduardo Cesario

Recibí un email de Jennifer Robbins, quien escribe libros para O'Reilly Media. En este momento está elaborando la tercera edición de "Learning Web Design".

"Me gustaría presentar tu diseño para Zen Garden, Organica Creativa , como un excelente ejemplo de diseño web basado en CSS".

Creo que si hay algo que incentiva a un diseñador gráfico, es el reconocimiento. Cuando uno ve que su trabajo gusta, el efecto inmediato es el retroalimentar el entusiasmo para seguir produciendo piezas de calidad.

Eduardo Cesario

Reducir al mínimo la capacidad de "interpretación" de los browsers

Hoy me vino esta oración a la cabeza, mientras me debatía, junto con Alejandro, con un sitio web en xhtml y css que se había 'descajado' completamente. La situación era que un pie de página, en Explorer se veía perfecto, y en Mozilla aparecía incrustado en el medio de parrafos que lo precedían.

Luego de dar vueltas sobre el asunto, me doy cuenta que en el código se había especificado un alto de 18 pixels, que Mozilla ejecutaba a la perfección (y el diseño se veía mal), mientras que explorer, "interpretaba" el código, y lo acomodaba al final de los párrafos que precedían.

Esto, que puede parecer beneficioso en este caso particular, es terriblemente perjudicial: si explorer mostrara el código tal cual era, debía producir un resultado similar a Mozilla, que por lo general, toma al pie de la letra cualquier sentencia de css, y viendo una reacción errónea similar o igual en ambos navegadores, la búsqueda de la eventual solución es mucho más fácil

Conclusión

Siempre que sepamos:

• anchos
• altos
• ubicaciones en píxels
• medidas exactas sobre elementos de nuestro diseño
• otros datos útiles que nos ayuden a su correcta y precisa representación…

Integrémolos a nuestro código css (si bien esto lo que hace es 'fixear' el código, hoy en día con las malas implementaciones de estos estándares, no nos queda una mejor solución), y de esta forma vamos a cercar posibles problemas con mayor facilidad, reduciendo considerablemente la "libre interpretación" de los navegadores (sobre todo la del IE).

Eduardo Cesario

Se nos ha contactado para el rediseño, en principio, de la homepage de un sitio para una empresa de fuegos artificales de Canadá, llamada Blast! Fireworks. 

A partir de la solicitud del Señor Tom Jacobs, dueño de esta empresa, fue que partimos a bocetar unas propuestas básicas, pero que revitalicen sustancialmente el sitio, que hasta el momento carecía de una estética potente, llamativa y "explosiva" propia de los fuegos de artificio.

  A continuación puede verse una captura de la homepage actual del sitio, sin rediseñar:

A raíz de los bocetos vistos arriba, fue que se comenzó a gestar la nueva estética: el logo, que en si no presentaba graves problemas formales, fue utilizado de una forma más impactante (aumentamos un poco el tamaño relativo al sitio), y el diseño en sí, se pautó siempre pensando en la usabilidad y funcionalidad:

• Sumamente editable
  La mayoría de los contenidos en la página son actualizables fácilmente, ya que son texto en html.
• Tecnología XHTML/CSS
  Codigo 100% válido y funcional.
• Alto criterio estético, que completa el esquema de funcionalidad planteado anteriormente.

Este proyecto, fue realizado en un plazo de 2 semanas, con un constante y ameno trato via email con Tom, nuestro cliente. Es interesante plantearlo como un caso modelo, a la hora de evaluar el proceso de diseño, la fluída comunicación (a pesar de haber sido totalmente realizada por email), y la satisfacción del comitente con el producto terminado, a tal punto de solicitarnos un ante-proyecto para rediseñar el sitio completo.

También es vital en cualquier actividad vinculada al diseño gráfico, que el cliente sea capaz de delegar en el profesional su requerimiento, confiar en el diseñador, y otorgar ciertas licencias y libertades a la hora del planteo visual y conceptual del trabajo, para que uno se sienta realmente valorado y orgulloso frente al trabajo final, como lo ha sido en este caso.

Eduardo Cesario

Hace unos cuantos días que vengo pensando en escribir algo sobre la web: tendencias de diseño, optimización de sitios web, buscadores…

En principio este iba a ser un artículo orientado a como es nuestra experiencia en la web ahora, y como era hace unos 10 o 15 años. Pero este punto me llevó a orientar el artículo hacia la parte de SEO (Search Engine Optimization, u Optimización para Motores de Búsqueda), hoy tan de moda.

Actualmente estamos migrando hacía una web orientada a la usabilidad e interacción. Estos dos tópicos son beneficiosos y recomendables, ya que la finalidad primitiva de la web es poder compartir. Si a eso agregamos que los sitios diseñados son accesibles en práctiamente todas las plataformas, navegadores y sistemas operativos, tenemos un sitio útil y funcional.

Estamos mutando a una web mucho más útil y conciente: es por eso que hoy los navegantes se nutren de los sitios, más que navegar por esparcimiento, o este esparcimiento lo encuentran en comunidades interactivas, foros, intercambio de fotos, photologs, portales de noticias, etc. Hace 15 años, no tener un splash en un sitio web era un crimen, y saber flash significaba estar en la cresta de la ola.

Qué pasa hoy: el cliente pide usabildad, accesibilidad y diseño de calidad y escalable.

¿Pero que tiene esto que ver con la optimización para buscadores?

Como primer punto, es conveniente aclarar el alto nivel de ignorancia sobre el tema que hay en el ambiente. No sólo entre potenciales clientes, sino también entre profesionales, algunos que utilizan este argumento para vender servicios de los que no tienen idea, o simplemente aprovechan esto para vanagloriarse de estar en lo último, y mentir para obtener réditos extra (económicos o de otro tipo).

Mi propia experiencia en diseño de sitios me lleva a esta conclusión: no existen garantías algunas de aparecer 1, 2, 10 o 50 en Google o en cualquier otro buscador, sencillamente, porque los motores de búsqueda van optimizando cada vez más sus procedimientos y disciernen cada vez mejor lo que es spam de lo que son sitios utilies y profesionales, y porque los criterios son combinaciones de muchos datos para llegar a una posición en el ranking.

Una vez desmitificado esto, que me parece fundamental, voy a seguir exponiendo el segundo punto: Optimización.

Acá es donde aparecen las herramientas que nadie nombra como potenciales optimizadores de un sitio web, y que para mi son:

• Diseño simple basado en standards, como por ejemplo, xhtml/css/ajax.
  Simple no significa básico, puede ser un diseño simple, y muy bello.
• Areas de interactividad con el usuario (que cumplen con el punto anterior): un blog, un foro, etc.
• Buena calidad de enlaces entrantes (sitios que nos 'linkean'), más que cantidad.

Estos son para mi los preceptos básicos, si bien hay muchos datos más específicos que no entran en el marco de este artículo, y otros tantos generales que por ahí este olvidando ahora.

Pero la estrella de la optimización hoy en día es… ¡EL CONTENIDO!.

Así es: nadie menciona que los contenidos son lo que dan valor a un sitio web. De nada sirve tener el mejor diseño, ultra optimizado, si no hay contenidos de calidad. Me atrevo a decir, que hoy en día es tan, o más importante, que la optimización y el diseño. Y en realidad, no estoy descubriendo nada probablemente: la forma puede ser la más sensual, bella o atractiva, pero si no está respaldada con ideas/contenidos, se cae, es un romance a corto plazo. El costado más técnico revela que los contenidos son lo más importante para los buscadores líderes a la hora de indexar (catalogar e incoporar al índice del motor de búsqueda) las páginas: cuando editamos contenidos de calidad sobre temas que son de consulta habitual, es cuestión de tiempo para que empecemos a tener visitas al sitio gracias a las búsquedas de cibernautas.

Esto trae aparejado, por ejemplo, que un blog que empieza como una diversión, termine siendo un sitio ampliamente visitado y rentable, a medida que genera contenidos de calidad (ya sea por diversión, originalidad, especificidad, etc) ¿Que está por detrás de ese simple blog? probablemente una plataforma del tipo de Wordpress, que permite publicar un blog con una visualización propia (como éste que ves ahora), con código válido, rss, y muchos más chiches, tan sólo con descargarlo de la web, subirlo a un hosting, y dar unos cuantos clicks.

¿Y la intro en flash? Nada tiene que ver.

Buscamos eso que nos nutre y nos divierte, emociona, llama la atención, pero el acento va puesto en el contenido de calidad, lo cosmético viene después.

Por Eduardo Cesario

Recibí de parte de Ravi Mendis, desarrollador de Apple, un iPod Video de 80GB. Este aparato es un monstruo, la verdad que todavía no lo usé mucho, pero es una joya del diseño industrial, y la fidelidad con que reproduce el sonido es increíble.

Hace unos meses que he sido contactado por Ravi, y estoy desarrollando para él una interface para su proyecto DirectToWeb, un desarrollo Open Source que usa la aplicación Web Site Objects de Apple para conectarse a Itunes, y poder cambiar la apariencia de la aplicación mediante xhtml y css.

Es muy gratificante que mi diseño haya sido elegido para formar parte del trabajo. Arriba pueden ver un pequeño preview de como se está conformando la aplicación con el skin de Organica Creativa.

Gracias Ravi por tu espectacular regalo.

Los que trabajamos en Diseño Gráfico, en realidad, en cualquier disciplina que se vincula a lo proyectual (desde Arquitectura hasta Diseño de Imagen y Sonido), nos hemos visto envueltos desde hace años, en el eterno dilema del funcionalismo/racionalismo, opuesto diametralmente al concepto de forma/ornamento/belleza.

A lo largo de unas cuantas décadas ya, ha quedado demostrado que, tanto en Diseño Gráfico, como en cualquier otra actividad, los fundamentalismos sobre una u otra postura, nos llevan a cometer errores inconmensurables, y a enrolarnos en ciertas "tendencias" o "formas de pensamiento", que terminan condicionando nuestro desempeño como profesionales.

En este pequeño artículo, lo que quiero plantear es una revisión de estos aspectos, función y forma, que tan bastardeados han sido durante años, pero esta vez volcándolos a un nuevo enfoque de análisis: la tan de moda usabilidad.

Haciendo una búsqueda rápida a través de Google, encontramos unas cuantas definiciones del término, bastante atractivas y complementarias:

• Según Jakob Nielsen, autoridad mundial en la materia, la usabilidad se define como un atributo de calidad de una página o sitio web, que determina la facilidad de la interfaz para ser utilizada. La palabra también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño.
• En el contexto de las aplicaciones informáticas, se refiere al conjunto de características que inciden en la utilización, atendiendo a cualquier contexto o tipo de usuario.
• Cualidad que tiene un algo de ser usado con facilidad para el fin al que ha sido destinado. Así, una herramienta es muy usable cuando con ella se puede hacer fácilmente el trabajo para el que se fabricó y el usuario no necesita explicaciones sobre cómo usarla.

Revisando estas definiciones, yo podría definir a Usabilidad, como el valor que posee un diseño, plasmado fundamentalmente en la web, que permite su fácil e intuitiva utilización por el usuario/navegante, así como también un amplio soporte de plataformas y navegadores/clientes donde será visualizado. Así, ponemos no sólo en primer plano a la facilidad de utilización, sino también un amplio espectro de tecnologías y sistemas que podrán decodificar sin mayores problemas, y con un criterio muy similar, nuestro diseño.

Ahora, ¿qué tendrá que ver todo esto con el planteo inicial que hice relacionado a forma/función?

La Usabilidad acerca posiciones en ambos extremos: porque justamente lo que hace no es sólo llamar nuestra atención para crear diseños y contenidos 'usables' o útiles, sino que también plantea una importante parte estética en la cuestión, que esta íntimamente relacionada con la faceta intuitiva y amigable de la interface del sitio, que es la que en definitiva va a vincular los contenidos con el usuario.

Aquí es donde radica la diferencia y lo que creo sumamente interesante de este concepto: la simbiosis. La Usabilidad nos propone un puente entre la forma (diseño web) y la función (utilidad y arquitectura de esos contenidos, adaptables a la forma).

Como tecnologías referentes de este paradigma, aparecen:

• La parte de contenidos o estructural, diseñada en xhtml (con sus diferentes variantes), altamanente estandarizada para que los tags, el formato del documento y los diferentes modificadores sean validados correctamente, eliminando así lo que conocemos por código invalido (siempre y cuando se respeten las especificaciones, claro).
• La parte visual y de organización espacial/esética, en CCS, Cascade Style Sheets, u hojas de estilos, que no sólo formatean los elementos a nivel estético, sino que también los posicionan en la página.
• Estas tecnologías separan la presentación visual de la arquitectura de datos del documento.

De esta feliz conciliación entre forma y función, podemos ver hoy en día una web orientada mucho más a los contenidos y su correcta visualización, que a la espectacularidad de la animación de sitios Flash de hace unos 10 años.

Actualmente podemos diseñar un sitio web con cientos de tipo de visualizaciones o 'skins' distintas, sin tocar una sola línea de código html. Basta chequear uno, sino el precursor, de los colectivos pro usabilidad en la web, el CSS Zen Garden , donde el código xhtml,  es "interpretado" por cientos de diseñadores web, con las más distintas influencias y posturas para plasmar el diseño. El código html por un lado (la función, si se me permite la analogía), y la forma (la plantilla CSS con sus imágenes asociadas), por el otro lado.

Dejando de lado los fundamentalismos, y sumando los dos recursos, uno orientado a lo funcional, y el otro a lo estético, podemos darle una carga más sensible a esa función, y lograr del diseño web, algo útil, y porque no, bello y amigable a la vez.

Por Eduardo Cesario