Pandemia Talks.

The web eye for the design guy.

A talk for the students of graphic design, oriented to explain how to design for the web, what skills are needed to don’t die in the process and how to take advantage of tools to show their work on the web.

16:30 hrs, saturday 13, november
Universidad de las Américas.
Av. Antonio Varas 880, Providencia, Santiago, Chile.

Webprendedor Workshop.

User experience and the new interfaces paradigms, HTML5 and the new challenges.

An open workshop, to see and discuss how to face the new interfaces paradigms, the web on TV and touch devices. HTML5 and the new technologies.

hour TBA, friday 19, november
MBA Universidad Católica.
Av. Alameda 440, Santiago, Chile.

The “opacity” problem

The simple and short CSS “opacity:0.5″ property works just fine, at least on the most modern browsers, but affects not only the div`s background, but also the inner elements, making everything inside transparent. This can be solved by two ways.

The solution from the future

Using the CSS3 background property RBGA, the only problem its this will only works with CSS3 enabled browsers.

CSS
div{
background-color:rgba(255,255,255,0.5);
}

The solution for the past

Or by a workaround using a transparent empty element positioned behind the content, like this:

HTML

<div class="trans_box">
<p>My awesome content</p>
<div class="trans_back"></div>
</div>

CSS

.trans_box{
position:relative;
z-index:1;
}
.trans_back{
position:absolute;
z-index:-1
top:0;
left:0;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
background:black;
opacity:0.5;
}

The problem, again, its this just work on modern browsers, but we have a Javascript solution for the always loved IE family

CSS

.trans_back{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // ie8 hack
filter: alpha(opacity=50); // ie6-7 hack
}

The Jquery way

But hey, thats was an UGLY solution, so here it comes jQuery to saves the day. Using the same concept we can make a simple function that replace the ugliness of the hack, and will maintain the simplest html structure possible.

HTML
<div class="trans_box">
<p>My awesome content</p>
</div>

JS
$('.trans_box').append('<div class="trans_back"></div>');
$('.trans_box .trans_back').css({'opacity':0.50});

CSS
.trans_box{
position:relative;
z-index:1;
}
.trans_back{
background:black;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
position:absolute;
top:0;left:0;
z-index:-1;
display:block;
}

And thats all, i hope this little resume could save you some headaches.

$(".clean").each(function(){
var value = $(this).val();
$(this).focusin(function(){if($(this).val() == value){$(this).val("");};});
$(this).focusout(function(){if($(this).val() == ''){$(this).val(value);};});
});

Just add the class “.clean” to your input tag and voilá.

Cocombobox Jquery Plugin

This will add a “Combobox” kind of interaction to a standard list of elements, view the example page:

http://pablonoel.com/lab/jquery/cocombobox/

Default HTML:

<form action="#" method="post">
<h3>Combobox Default Configuration</h3>
<ol>
<li>Select an Option</li>
<li><a title="enlace" rel="first" href="#">First Option</a></li>
<li><a title="enlace" rel="second" href="#">Second Option</a></li>
<li><a title="enlace" rel="third" href="#">Third Option</a></li>
</ol>
</form>

Default Call

$("ol").cocombobox();

Generated HTML

<form action="#" method="post">
<h3>Combobox Default Configuration</h3>
<div style="position: relative; height: 20px; z-index: 9938;" class="comboboxccbx"><ol style="overflow: hidden; position: absolute; height: 20px; z-index: 9938;" class="min">
<li id="option">Select an Option</li>
<li><a href="#" title="enlace" rel="first">First Option</a></li>
<li><a href="#" title="enlace" rel="second">Second Option</a></li>
<li><a href="#" title="enlace" rel="third">Third Option</a></li>
</ol><input name="combobox" id="combobox" value="" type="hidden"></div>
</form>
There is no documentation yet, and no changelog, but this is the first release, you can Download it and tell me your comments.

Si hay algo en el mundo que me apasiona enormemente es el mundo del skateboarding, hace unos cuantos dias se inauguro en Sydney Australia una exposición con el trabajo de mas de 70 artistas de todo el mundo, con trabajos en formato skateboard, y para todos aquellos que no tenemos la posibilidad de visitar Sydney mientras dura la exposición tenemos la suerte de que todos los trabajos han sido fotografiados y archivados online para nuestro disfrute.

Algunos trabajos de mi total agrado a continuación:

Sitio Oficial de No Comply
Galería en Flickr del Lanzamiento

Cuando se habla del DIY (Do It Yourself) se suele vanalizar su existencia olvidando los profundos cambios y aportes que se han creado a partir de este movimiento. Definir el DIY como una moda es ignorar su historia y su legado. Historia ligada a los movimientos mas extremos y vanguardistas del arte, la música y la política, y un legado de obras que han inspirado transversalmente el modo en que actualmente la cultura es percibida.

Beautiful Losers (Documental, Ingles, 90min, 2008)

Un documental que celebra este espíritu, mostrando la vida y obra de un grupo de artistas de New York, que en busca de una identidad propia crearon sin proponerlo, lo que seria una revolución en el arte.

Con artistas como Ed Templeton y Geoff McFetridge, artistas que han trascendido en mundos tan distintos como el skate y el diseño corporativo, un documental que muestra sus trabajos y su visión frente a esta revolución.

Ver la Sinopsis en Vimeo.
Sitio Oficial del Documental
Beautiful Losers en la IMDB

Con mis mas cercanos amigos tenemos la tradición de presentarnos bandas que, por uno u otro motivo, sabemos que cambiaran nuestras vidas, hace unos meses atrás armando llego con una de esas propuestas.

Mono, es una banda Japonesa, de carácter independiente avocada al mas hermoso Noise que he escuchado en estos últimos años, pero esta entrada no es para hablar de lo increíble de su música, si no de lo delicado de su arte, y de como la pasión por su trabajo ha logrado traspasar las limitaciones por la que, actualmente, muchos artistas en mi país están protestando.

Para entrar en contexto, el problema básicamente se reduce a un grupo de artistas que imposibilitados de generar un cambio frente al nuevo paradigma dado por la revolución de internet, se ven acorralados por sus propias limitaciones frente a estos nuevos modelos de negocios. Debido a esto han generado una campaña llamada “Trato Justo” que entre otras cosas pretende obligar a cada usuario de internet, a pagar un “impuesto a la descarga”, en favor obviamente de un grupo, obviamente liderado por ellos mismos.

Luego de que armando llegara a mi con esta banda, obviamente en formato mp3, bajado de alguno de los MILLONES de sitios de descarga musical gratuita, yo no solo pude acceder de manera INMEDIATA a su obra, si no que ademas, esta pudo traspasar no solo las barreras geográficas e idiomáticas que existen entre Japon y Chile. Esto significo que independiente de estas limitaciones la creación de un grupo de artistas pudiese conmover a un receptor al otro lado del mundo. Un receptor que no tuvo que pagar NADA por ello, por que no podia pagar por algo que NO CONOCIA. Pero gracias a un modelo abierto de publicación de contenidos, considero que esta obra, merecia no solo ser escuchada, si no que eventualmente, adquirida.

Personalmente soy un consumidor bastante frecuente de música, PAGO por ella, cuando esta lo vale. Ayer, rondando por una de mis tiendas favoritas, encontré con un disco que de otra manera podría haber pasado desapercibido a mi búsqueda. Tenia en ese momento en mis manos:

Walking Cloud and Deep Red Sky, Flag Fluttered and the Sun Shined

Este disco, lanzado el 14 de Abril del 2004, bajo el sello Temporary Residence Limited, un sello independiente de la ciudad de New York, que entre otras bandas a editado a Envy y Explosions in the Sky, es el tercer LP de MONO. Un disco que musicalmente es hermoso, pero ademas constituye una obra de arte en si mismo, dado su formato y su arte.

El disco, un vinilo doble, incluye un par de detalles que elevan el valor de la obra, por el mero cuidado y pasion que se le dedico. El “sleeve” viene croquelado con la figura de dos niñas con violines, un arte con un lado rojo, da el fondo  al croquel. Un pequeño papel cuadrado con la frase “one for a thousand paper cranes” se adjunta con las instrucciones para crear un cisne de origami, un detalle no menor, considerando que tambien es el nombre del ultimo tema de este disco, segun armando me comentaba, este tema fue dedicado a una pequeña niña de pocos años de edad, que como ultimo deseo antes de morir, pidio que se le enseñara a crear el cisne de papel. Para coronar todo, se incluye un pequeño folleto, con los discos distribuidos por el sello, con una ilustracion que recita “THANK YOU”.

Luego de admirar tan delicado trabajo me queda solo pensar en los musicos “grandes” de mi pais, que entregan su arte de mala gana, casi mesquinamente, que te obligan a solo poder elegir el formato que ellos proponen, con un arte horrible, sin agradecimientos, sin delicadeza, sin PASION.

Los invito a visitar www.tratojustoparatodos.cl, y ser parte de la conversación, sobre el tema de los derechos de autor, y lo ridiculo de la propuesta de “nuestros artistas”.

Mono, Sitio Oficial
Mono, en Wikipedia

Esto no significa que deje de escribir, todo lo contrario, es la búsqueda de un espacio mas profesional, o quizás mas apasionado, sobre el maravilloso mundo del diseño y la comunicación, sin interrupciones de carácter personal, ni el peso que me implica tener TODA mi vida respaldada y expuesta.

A estas alturas no se si alguien siga leyendo esto regularmente, no llevo registros de eso, pero muchas gracias a todos, y pronto los invitare a una charla un poco mas amena, o aburrida, depende de usted.

Saludos.

Por que nuestros únicos limites siempre han sido los que nos auto-imponemos.

Si, ahora se puede subir videos a flickr!.
Actualmente solo aguanta 90 Segundos de Video o 150MB de peso, en formatos: AVI, WMV, MOV, MPEG (1, 2, y 4) y 3gp.
Esta opción solo esta disponible para usuarios con cuentas pagadas.Se ha generado, como siempre, mucho revuelo y discusión al respecto, tanto de usuarios que no estan de acuerdo con el cambio, como de usuarios que, como yo, lo encontramos lo máximo.PD: si se pregunta de donde rayos salio este video, la respuesta corta es: http://pablonoel.com/archivos/processing/Cubos_video.pde