Archive for Agosto, 2006

26 Ago 2006

La Carrera Muestra

No Comments

Bueno, a esta altura creo que todos los que podrían estar interesados de la muestra, ya fueron avisados. Hoy, en un par de horas, se inaugura la muestra de La Carrera de Fotografo Profesional en Motivarte. Alli, cada uno de nosotros, alumnos de la carrera, expondrá una foto.

Les dejo un "plano de copia", resultado del trabajo de laboratorio para llegar a la final, que la podrán ver expuesta en la Escuela…. :)

La Criatura Creativa

 In Ansel We Trust

Saludos y los espero.

PD: por si no saben donde queda Motivarte, la dirección es Malabia 1141, y el horario de la Expo es de 17 a 21 hs. 

23 Ago 2006

Nominados en webdesignbook.net

No Comments

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í! 

20 Ago 2006

TheDailySlurp incluyó el blog en su índice

1 Comment

Así es, como dice el título del post, el día 19 de Agosto fuimos incluidos en este prestigioso sitio, que muestra diariamente una serie de websites 'hermosos'. Pueden vernos en el índice de dicho día, haciendo click en este link.

 TheDailySlurp

Mis agradecimientos al staff de TheDailySlurp.

17 Ago 2006

DirectToWeb: diseño de interfase para Apple WebObjects

3 Comments

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.

 La pantalla de DirectToWeb, tal cual me la envio Ravi

La pantalla de DirectToWeb, con la estética de Organica Creativa

 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.

14 Ago 2006

Propuesta de Isologotipo para la Sociedad Latinoamericana de Hombro y Codo

No Comments

Esta es la propuesta de diseño de identidad que estoy realizando para la SLAHOC (Sociedad Latinoamericana de Hombro y Codo).

Propuesta de Isologotipo para la SLAHOC

La propuesta, acompañada de su carta indicadora de color, la reducción, y la versión blanco y negro. 

El Proyecto 

Hace unos meses que he concluido con el diseño del sitio web, en xhtml y css. Ahora se me ha pedido que presente un candidato de marca, basado en el diseño del isologo del sitio.

El concepto se mantiene: la idea es mostrar la parte del mapa que ocupan los paises latinoamericanos afiliados a la Sociedad, con colores propios de lo latino, sin por eso caer en algo poco serio. Mediante unos planos de color muy orgánicos y simples, se representaron los paises, simulando ser articulaciones o partes del brazo, visto del lateral. El remate cromático-institucional se plasma mediante un pantone 280c. 

A la marca se le aportó un valor agregado con dos círculos con esfumados de azul a blanco, que le dan una sensación tecnológica y precisa, propia de cualquier actividad médica, sobre todo la cirugía.  La tipografía utilizada es la Caxton, una tipografia romana muy delicada, que contrastaba muy delicadamente con la otra parte del isotipo, más limpio y orgánico.

08 Ago 2006

Técnica para equilibrar el alto de un div cuando el contenido es variable

6 Comments

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

Pantalla 1, el diseño se visualiza bien

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.

Pantalla 1, el diseño se visualiza bien

Problema

 Pantalla 2, si el contenido es insuficiente, el pie sube y el diseño se ve mal.

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.

Pantalla 2, si el contenido es insuficiente, el pie sube y el diseño se ve mal.

Solución

 Pantalla 3, el div adicional, fuerza a #contenido para que tenga la misma altura que #menu1.

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;
    }

Pantalla 3, el div adicional, fuerza a #contenido para que tenga la misma altura que #menu1.

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.

La Criatura Creativa

05 Ago 2006

Wolko Happening ‘06: Diapo+Nuch

4 Comments

Wolko Happening 2006 | Diapo + Nuch

Un día al año, en la cursada de Diseño 1 Wolkowicz, tenemos la oportunidad de participar de la clase más experimental y divertida de la cursada: el "happening".

Creo que todos los docentes esperamos ese día: el taller se oscurece, se prenden los proyectores, brillan los colores y filtran la luz los acetatos…

La consigna es simple: mediante el proyector de diapositivas, generar una secuencia en la cual puedan explorar técnicas, lenguajes gráficos, iluminación, tramas, texturas, para producir una proyección secuencial de varios cuadros, basándose en una clave conceptual simple, una palabra.

Los recursos: completamente libres, pueden utilizar acetatos, tinta china, acrílicos, acuarelas, fotocopias sobre acetatos con fotos o texturas, adhesivos, papeles, etc. 

Se da así, que los alumnos pueden llegar a resultados increíblemente sensibles e interesantes, mediante la investigación en el taller de los lenguajes que ellos crean pertinentes para representar su mini-audiovisual. El happening, que por definición "es una manifestación artística caracterizada por la participación del público, donde las acciones surgen espontáneamente, sin previa organización", toma lugar en el espacio-taller, acompañado de música de fondo de diversos tipos (dance, 80's, rock, techno, etc). 

Este año además contamos con la participación de la banda NUCH, de la cual Pablo Nuciforo, docente de la cátedra (y amigo), es cantante y compositor. Los chicos de Nuch se apropiaron de una de las esquinas del taller, y mediante su musica, que mezcla sonidos de los 80's, matizados con climas / colchones de teclado pseudo-progresivos, y una performance básicamente rocker, despuntaron unos cuantos temas del que será su primer disco "Peligrosas Canciones", para el deleite de la "audiencia estudiante".

Volviendo al happening, en nuestro grupo de alumnos hubieron resultados muy interesantes, aunque a los chicos quizás les costó un poco descontracturarse en la forma de trabajar y producir material. A continuación incluyo en grupos,el material producido por ellos:

Grupo 01: Diapositivas

Grupo 01: Diapositivas 

Grupo 02: Diapositivas

Grupo 02: Diapositivas

Grupo 03: Diapositivas

 Grupo 03: Diapositivas

Grupo 04: Diapositivas

 Grupo 04: Diapositivas

Grupo 05: Diapositivas

 Grupo 05: Diapositivas

 Grupo 06: Diapositivas

 Grupo 06: Diapositivas

Felicitaciones a los chicos por haber participado, a la Cátedra Wolkowicz gracias a la cual este evento es posible año tras año, y a los demás docentes, en especial a mis co-equipers Micaela Costa y Adriana Campos.

 Foto del Grupo
Los chicos de nuestro grupo de Diseño 

Nuch en Vivo

Nuch(*) en Vivo en el Wolko Hapening 2006

(*) NUCH // Eliecer Ascurza en bajo, cajón y guitarras; Nico Mozzi en guitarra y efectos; Pablo Nuciforo en voces, programaciones, acusticas; Matias Placona en teclados; Pablo Mozzi sonido en vivo; Alejandra Serra en cello.

CCS | BlogOrganica CreativaCCS | Criatura Creativa Studio