Archive for Julio, 2007

30 Jul 2007

Anatomía del proceso de diseño de un blog, en 7 pasos.

3 Comments

Hoy en día en el universo de Internet, tener un blog no es novedad para nadie. Si bien hay muchos sitios o proveedores que brindan el servicio de blogs gratuitos, lo más interesante de la experiencia de tener uno, no es sólo poder compartir notas y artículos que me parecen interesantes, sino también hablar con su diseño. Para mi la experiencia de tener un blog es completa cuando más personal es el diseño de la interface de dicho sitio.

Claro está que todo este planeamiento es posible, siempre y cuando contemos con algunos conocimientos para llevar a cabo el diseño de la interfase:

  1. Limitaciones Técnicas: es fundamental tener conocimiento en manejo de software para diseño web, tratamiento de imagen y armado de sitios. De esto surge la primer limitación, acaso la más fácil de resolver, que es la parte técnica y de aprendizaje de manejo de herramientas. Yo utilizo para armar un blog: Fireworks, Dreamweaver y algún programa de ftp.
  2. Limitaciones Teórico/Conceptuales: a toda la cosmética y funcionalidad, es necesario sostenerla con una buena idea, que a su vez debe ser traducida a una buena idea gráfica. Este tipo de planteo es más teórico y supone conocimientos de diseño gráfico, interfases en la web y navegación

Cabe aclarar que este artículo presupone que el punto 1 está resuelto. Lo que propongo aquí es contarles como abordo el proceso de diseño de un blog, no en cuanto al detalle técnico, sino al proceso y la evolución de la idea, en torno a la plataforma Wordpress.

 1. Elegir la plataforma de publicación.

Elegir la plataforma de publicación:yo elijo Wordpress

Elijo Wordpress porque es la mejor plataforma que conozco para llevar adelante un blog con muy poco esfuerzo, y es altamente personalizable. Es gratuito, y la instalación no nos llevará más de 5 minutos, y con conocimientos mínimos.

2. Entender y visualizar la estructura.

Hablando sintéticamente, la estructura de un típico blog de Wordpress está organizada en pocas y autodescriptivas partes:

  • HEADER (Encabezado): que se repite en todas las páginas.
  • CONTENT (Contenido): generalmente donde se ubicarán los posts. Es la sucesión de los mismos.
  • SIDEBAR (Barra lateral): es la barra de navegación que se presenta en la homepage sobre el lado derecho, y que podemos configurar de manera que aparezca en todas las páginas.
  • FOOTER (pie): una especie de colofón donde ubicaremos copyright y demás.

Entendiendo a grandes rasgos como se estructura un blog, se puede empezar el plenamiento del diseño con este simpole esquema, teniendo en cuenta que los contenidos (texto, imágenes, videos, etc) estarán "contenidos" en estos bloques. Si propongo un fondo que continúa en varias partes, hay que prestar particular atención a los empalmes del mismo, los colores, etc, para que la experiencia visual sea armónica.

3. Boceto, boceto, y más boceto…

Es fundamental, como en cualquier proceso de diseño, bocetar mucho para decantar ideas en papel.

Creo que en mi epitafio van a poner "Muerto bocetando…". Es fundamental para llegar a un buen diseño, plasmarlo antes en papel. Las primeras imágenes mentales aparecen siempre como deslumbrantes en nuestro cerebro, pero es un grave error ir de nuestra imaginación creadora directamente a la computadora. Seguramente el resultado será tosco y desalentador.

4. Dar vida al boceto en fireworks.

El paso siguiente es ubicar dentro del material creado en papel, el que más me guste y sienta que va con mi idea, y la imagen mental que tengo. Con el archivo original a un tamaño representativo de la realidad promedio de navegantes (digamos 1024 x 1024 píxeles), monto en una capa (layer) el boceto, y la bloqueo. Luego trabajo en capas adicionales, cada detalle, desde colores de fondo, texturas, tipografía y bullets.

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco"

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco" 

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados. 

5. Dejar que el diseño crezca hasta el prototipo final.

El prototipo final del diseño.

Lo más probable es que la imagen mental y el resultado en pantalla difieran. Es bueno poder amalgamar elementos o recursos que provengan de otros bocetos. Muchas veces fluyen conceptos gráficos a través de la serie de dibujos y bocetos que se hicieron.

6. Codificar las hojas de estilo (CSS).

Una captura de la pantalla de edición de codigo del Dreamweaver

Para cada sección de la estructura que describí en el punto 2, así como para el documento en general, podemos definir tipografía, colores, fondos, espaciados, etc. Ponerme a detallar tags y modificadores de CCS, escapa a la idea de este artículo. Lo importante es entender que cada zonificación del diseño, tanto a grandes rasgos, como en el más mínimo detalle, puede ser personalizado y diseñado mediante Cascade Style Sheets.

7. Grabar, subir, testear.

La versión final del blog, funcionando.

Mi método se fundamentea en diseñar las hojas de estilo, subirlas al servidor e ir refrescando continuamente la página, al menos en Explorer y Mozilla, para ver "en vivo" los resultados del diseño. Dado que Wordpress reagrupa los "bloques" de la estructura, en principio puede resultar difícil editar cada pedacito de código (el header, content, sidebar y footer son "pedazos" de codigo, que se ensamblan al momento de mostrar el blog). Una técnica que uso es hacer el preview en el browser, y el documento HTML a la carpeta local donde estoy trabajando con el blog. Se puede editar esa hoja de estilos y aplicarla al archivo descargado, para ver el "todo" de la página del blog de forma más organizada.

El proceso de diseño descripto es el que uso habitualmente a la hora de diseñar un blog, aunque en general, puede ser trasladado a unas cuantas piezas más. En este caso particular, las imágenes que ilustran el artículo corresponden al diseño del blog de sobreexpuestos , completamente dedicado a la fotografía.

Espero encuentren este artículo de utilidad, me gustaría escuchar comentarios sobre que les pareció.

Eduardo Cesario La Criatura Creativa

20 Jul 2007

“A mí lo que me gusta es que un tipo me diga que se cagó de risa con mi cuento. Con eso estoy bien”.

No Comments

Homenaje al Negro Fontanarrosa [1944-2007]

Y si Negro. Con ese pensamiento tan positivo que tuviste, es que este modesto blog te rinde el más sentido homenaje.

Gracias por haber iluminado páginas y páginas con tu humor, impecablemente impregnado de genialidad.

ROBERTO FONTANARROSA [1944-2007] 

Eduardo Cesario  La Criatura Creativa

16 Jul 2007

SE+ Sobreexpuestos: el nuevo proyecto fotográfico de Criatura Creativa Studio

1 Comment

Sobreexpuestos [se+]: El nuevo proyecto fotográfico de CCS

Sobreexpuestos es el nuevo proyecto de Criatura Creativa Studio . Habrán notado en estas últimas semanas, que el blog ha permanecido prácticamente en silencio, y eso es debido a varias razones: por suerte en el estudio hay bastante demanda de trabajo, eso sumado a sacar fotos y demás proyectos (también incluído está vivir entre ellos), hacen que el tiempo que disponga sea poco como para poder publicar cosas que considere interesantes.

En este caso, es para anunciar con mucho orgullo, que luego de unas semanas de trabajo específico para este proyecto, el blog de sobreexpuestos ya está en el aire, así que espero que lo visiten en cuanto tengan tiempo y ganas.

Podría sintetizar el nuevo sitio de esta forma:

"Sobreexpuestos es una idea que surge como catalizador entre pasiones y razones: poder sobreexponer fotografías que merecen ser observadas más tiempo del habitual. En caso de que el eventual lector no conozca en detalle el signficado del término “sobreexponer” o “sobreexposición”, se denomina de esta manera a aquellos fotogramas que han recibido más luz de la ideal, para que los tonos y colores se registren correctamente. El efecto de una toma sobreexpuesta, es el de una imagen “quemada, donde las altas luces carcomen gran parte de información y detalle útil para apreciar la imagen en sí. Jugando metafóricamente con ese término fotográfico, es que llega la idea de este blog: sobreexponer, como un exceso, una virtud y un deseo, obras o fotografías que merezcan ser apreciadas por mucho tiempo (en el sentido literal de tiempo, no como variable de exposición fotográfica)."

Este sitio será específicamente dedicado a la fotografía y demás formas de expresión que se integren con ésta, lo cual no va a implicar que en este blog no se sigan publicando artículos de técnica, procesos y trucos que tienen que ver con este arte.

Espero verlos involucrados en el nuevo proyecto, ya sea aportando material, o comentando y participando del blog/grupo flickr.

Un abrazo a todos

Eduardo Cesario La Criatura Creativa

13 Jul 2007

Exposición de Ciruelo en el Zoologico de Buenos Aires

1 Comment

El 12 de Julio se inauguró la exposición titulada "Los Dragones llegaron al Zoo".

La expo consta de treinta reproducciones en tela a gran formato. Además habrá dragones vivos. Nos referimos a lagartos, iguanas y varanos que son llamados dragones y que estarán expuestos en vitrinas junto con las obras de Ciruelo.

¿Por qué la figura del dragón ha estado tan presente en la historia de la humanidad? Esta pregunta sigue sin tener una respuesta única y definitiva. Pero con esta exposición podrás tener una idea general para sacar tus propias conclusiones.

Entre las obras expuestas habrá pinturas del nuevo libro que Ciruelo escribió e ilustró, Hadas y Dragones, y que será publicado en Agosto.

La exposición tendrá lugar en el Zoológico de Bs. As., Av. Sarmiento y Av. Las Heras
Informes: 4011 9900  - Reservas: 4011 9999

La duración de la muestra no está especificada todavía, pero en principio estará más de un mes.

Ciruelo estará presente en el Zoo los días viernes 13, sábado 14 y domingo 15 de Julio para charlar con el público y firmar pósters y libros.

Más información en http://www.dac-editions.com/xexpoZoo07.htm

CCS | BlogOrganica CreativaCCS | Criatura Creativa Studio