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.

El otro día, revisando visitas me encuentro que habia unas cuantas de MSDN …cuando llego a la página en cuestión, encuentro una especie de ZenGarden, llamado ZenTek… Seguí investigando, y llegue a un documento donde Microsoft, muy orgullosos obviamente, presenta este skin para Zen Garden (se acordaron un poco tarde de los standards muchachos).

La cuestión es que es eso nomás: un estilo para Zen Garden. Lo irónico es que Microsoft, al arrasar el mercado de navegadores desde hace unos años, siempre se mostró completamente desinteresado e indiferente a la usabilidad y los standards, total, tienen el porcentaje más grande del mercado.

En el artículo se vanaglorian básicamente de 3 ideas:

1. El uso de las pseudoclases del tag a para hacer rollovers simples (a:hover).
2. La utilización de position:fixed; y position:static; en la hoja de estilos para armar un layout similar a los frames.
3. El soporte a las imágenes del formato PNG (que soportan un canal alpha y permiten hacer trnasparencia con el fondo).

Repasemos esos puntos:

1. Punto 1: Nada nuevo: de hecho, yo he diseñado con rollovers, pero tuve que forzarlos siempre al tag a, ya que el explorer actual no soporta pseudoclases a otros elementos, como si lo hace el Mozilla.
2. Punto 2: sólo la aplicación de las ventajas de diseño en CSS, que Microsoft siempre maneja a su antojo en cuanto a soporte.
3. Punto 3: los PNG son archivos muy versátiles, Mozilla los soporta hace rato, y uno de los últimos en dar ese soporte es justamente Microsoft, en su tan esperado "Explorer 7".

Bueno, acá viene la parte divertida

Si bien ya he probado que todo lo que MS anuncia como una novedad total y revolucionaria, lo vienen haciendo otros browsers mucho más estables como el Mozilla, la frutilla del postre es cuando vemos su pagina ZenTek en Explorer 6.0.2900:

SORPRESA! El explorer 6 no muestra bien el mismo estilo que Microsoft plantea como usable… patético!

Y como era de esperar, nuestro amado Firefox, que muestra perfectamente bien a Zentek. 

Conclusión 

Evidentemente, hay avances de MS hacia el soporte de standards, pero me parece increiblemente irónico e incomprensible, que haya que esperar que salga la versión 7 de Explorer, para ver su 'demo' de usabilidad, ya que ni en su propio browser actual puede verse.

Larga vida a Firefox.

Tengo el orgullo de anunciar, que luego de unos cuantos meses de espera, estamos entre los nominados de webdesignbook.net.

Este proyecto pretende publicar un libro sobre los mejores sitios web, orientados a la estética y usabilidad. Cualquiera podía participar, había que enviar la url del sitio en cuestión, y ellos validaban la página para habilitarla a la competencia, es decir, debía estar diseñada en xhtml strict y css, pasar por el validador de la W3C y obviamente, los diseños con tablas, estaban completamente fuera de competencia.

Luego de eso, los que recibian al menos 20 votos del público en general, pasaban la 'pre-selección'.

Ahora, fruto de ese proceso, quedaron 299 preseleccionados, de los cuales, un jurado optará por 150 sitios para integrar el libro impreso… y de los cuales, el sitio de Criatura Creativa Studio , está preseleccionado!

Esperamos lo mejor! Gracias a todos los que de una u otra forma ayudaron a que participemos, y lleguemos hasta aquí! 

He recibido el contacto del Sr. Ravi Mendis, un Desarrollador Senior de Software, que trabaja nada menos que para iTunes, la conocida tienda de música virtual de Apple.

Ravi vio el diseño de Organica Creativa a través del sitio CSS Zen Garden, y me escribió para evaluar la posibilidad de hacer una versión del diseño para el producto WebObjects, de Apple. La idea es crear una versión XHTML+CSS de WebObjects, bautizada DirectToWeb.

Ya comencé a diseñar el 'skin' para el desarrollo. Aquí pueden ver un adelanto, de la página de login original, y la nueva versión que estoy preparando.

 Es importante destacar, que todo el cambio de look and feel, se hará mediante CCS, manteniendo así la estructura original del documento XHTML, lo cual muestra la plasticidad y ductilidad de poder crear sitios web basados en xhtml/css, y con un click de mouse, poder cambiar completamente el 'tema', 'skin' o 'piel' de los mismos.

Una idea que fue inicialmente propulsada por la ya renombrada (y a mi también me verán nombrarla hasta el cansancio) CSS Zen Garden , de David Shea, en donde diseñadores operan sobre una estructura xhtml inalterable, para darle vida a distintos diseños propios.

Volviendo al proyecto, la idea de Ravi es presentar inicialmente DirectToWeb a varios equipos de gente de iTunes Music Store, quienes serían los que más provecho sacarían de la interfase.

El límite al que puede llegar el proyecto es realmente insospechado; en una segunda estapa, sería lanzado como Open Source a la comunidad. Ni que hablar de las posibilidades de Organica Creativa, un diseño que hasta el momento, no deja de darme gratificaciones, tanto personales como profesionales.

Bueno, finalmente me he decidido a escribir el primer tutorial sobre xhtml.  Esto no pretende ser "la solución", sino un aporte propio y muy simple, para solucionar un problema habitual en el uso de xhtml strict.

Entendiendo el Layout

En el caso problema que voy a desarrollar, contamos con los siguentes <divs>:

•  #HEADER: es el encabezado del documento, y esta a lo ancho del mismo, así que no nos molesta de momento para nuestro problema.

 
En la parte del cuerpo en si:

1.  #MENU1: Es una de las partes del problema: tiene una altura fija, y cuando lo que vamos a mostrar en #CONTENIDO es menos alto que este, el #PIE del documento nos queda inmediatamente donde termina el contenido a mostrar, quedando así el menú de la izquierda más alto que la parte central (figura 1). Esto se debe a xhtml strict usa lo mínimo necesario para mostrar el contenido, y colapsa la altura del <div> al mínimo posible.
2. #CONTENIDO: Es la segunda parte del problema, ya que si el contenido a mostrar no es suficiente para cubrir la altura del menu izquierdo, lo que va a pasar es que el #PIE se muestre muy arriba, y no queremos que eso pase.
3. #MENU2: Tiene ancho fijo y altura variable, pero no nos importa, ya que utiliza el fondo del BODY, entonces no hay problema en que sea mas o menos alto que #CONTENIDO.
4. #PIE: mediante el tag clear:both; hacemos que se ubique inmediatamente debajo de #CONTENIDO, por lo cual no nos dará mayores problemas, salvo en el caso de la Figura1.

Problema

El problema es el siguiente: cuando creamos un <div> con contenidos variables, el xthml strict tenderá a usar la menor cantidad de espacio para mostrarlo. Podríamos usar en nuestro documento css min-height: para especificar un alto minimo en un <div>, pero la realidad es que mozilla no interpreta bien dicho tag, o siempre se presta a problemas en algún navegado, ya que como tantos otros tags, no estan bien implementados en los diferentes navegadores.

Solución

Como solución simple, propongo colocar un <div> adicional, a modo de columna, con un ancho de 1 pixel, y una altura mínima que es la que nosotros deseamos para que se muestre minimamente bien nuestro sitio. Para ello deberemos ver que altura requerimos en función de las navegaciones laterales y el pie del documento.

Entonces creamos un <div> nuevo, que funcionará como una columna "de relleno": buscamos una altura ideal para ésta, en nuestro ejemplo, la altura del menú de la izquierda (ya que si la parte blanca sigue hacia abajo no nos arruina el diseño), lo flotamos hacia la derecha y con un ancho de 1 pixel.
En mi caso, voy a llamar a este <div>  #PARCHE, y el código sería este:

#parche    {
    display: block;
    width: 1px;
    height: 550px;
    float: right;
    }

Esto ha sido testeado en Internet Explorer y Mozilla Firefox, y en ambos funciona sin problema alguno, espero les haya servido el pequeño tutorial, todo feedback será apreciado.