Foto de WWarby http://www.flickr.com/photos/wwarby/4782818106/

Imágenes Getty pone sus fotos gratis pero con condiciones

El día de ayer uno de los bancos de imágenes más grandes del mundo, Imágenes Getty, anunció que ya se aburrió de que la gente del internet le robe sus imágenes y las usen en su blog o algún otro lado sin permiso y sin pagar nada.

Para tratar de detener un poco a esta horda de lacras ladrones, o por lo menos sacarle un provecho a su actividad malechora, Getty anunció que sus fotos serán utilizables de forma gratuita empezando ahora.

Foto de WWarby http://www.flickr.com/photos/wwarby/4782818106/

Esos lentes no son baratos y a los fotógrafos les da hambre casi a diario, así que hay que sacar dinero de algún modo. Foto de WWarby.

¿Quiere decir eso que ya podrás ilustrar tus artículos con fotografías profesionales de gran calidad? Sí, pero hay varias cosas que lo hacen poco deseable.

La primera es que tienes que usar el código de imagen que Getty te propocionará. Esto para descargar la imagen desde su sitio pero también pondrá el crédito y un anuncio de Getty. Si quieres la imagen sin anuncio tendrás que pagar.

Getty ha dicho que recopilarán toda la información proveniente de este código. Aunque no han dicho lo que harán con la información es posible que en un futuro la usen para vender publicidad que aparezca junto con tu imagen.

Además, Getty sigue en control de la imagen y pueden quitarla o cambiarla cuando se les dé la gana. No es posible saber si algún día tu artículo se quedará sin imagen de repente y como está 500 páginas atrás ni te darás cuenta.

Tal vez Getty pueda obtener alguna ganancia, y cualquier cosa que se encuentre de lo perdido es buena, pero no creo que impacte mucho en el robo de imágenes. De la gente que usa imágenes de terceros para su blog, Tumblr o muro de Facebook la mayor parte las usa sin acreditación no porque sean malas personas sino ignorantes, es decir, no sabe que las imágenes tienen dueño aunque te las encuentres en Google. Estos ni se van a enterar que existe algo llamado banco de imágenes y menos habrán oído hablar de Getty.

Otra parte sabe que tienen dueño pero como sí son malas personas se las roban. Esta gente se las va a seguir robando de todos modos, les da igual. Hay otras que usan racionalizaciones para justificar el robo, estas no son necesariamente malas personas, nada más pendejas.

Unos poquitos saben que existen imágenes en el dominio público o con licencia Creative Commons que se pueden encontrar en Flickr y otros buscadores. De esta minoría a los que no les importe no tener el control de la imagen tal vez usarán el código de Getty; pero son una pequeña fracción de una pequeña fracción.

Como encontrar imágenes legales para usar en tu blog

Mucha gente usa Google para buscar imágenes y después copiarlas para reutilizar en su blog u otras páginas. En general esto no es legal. Una imagen tiene copyright a menos que diga lo contrario, lo que significa que necesitas pedirle permiso al autor para utilizarla. Claro, si la bajas y la usas estrictamente de manera personal (como fondo de pantalla, por ejemplo) entonces no tendrás problemas, pero si la usas para otra cosa, sobre todo si es pública o comercial, entonces sí puedes tener líos si te llegan a cachar.

Mucha gente cree que poniendo el nombre del autor, algo así como “Esta foto no es mía, es de Fulanito” con eso no tendrán problemas. En realidad a lo que equivale esa frase es a una admisión de culpa, ni siquiera pueden alegar ignorancia.

Pero hay opciones para no tener ningún problema con tus imágenes. Busca imágenes que tengan licencias Creative Commons. Esta licencia significa que puedes usar la imagen (u otra obra) libremente bajo ciertas limitaciones:

– Atribución: Debes decir quien es el autor original.
– No derivadas: Tienes que usar la imagen tal cual. No le puedes hacer cambios o usarla como parte de otra cosa.
– Compartir igual: Lo que hagas con esa imagen o donde la uses también deberás compartirlo con la misma licencia Creative Commons.
– No comercial: No podrás darle uso comercial a la imagen, es decir vender lo que hagas con ella o donde la utilices.

Una licencia puede contener una o más de las limitaciones anteriores, así que asegúrate bien que puedes hacer. Si tienes dudas contacta con el autor.

Un buen lugar donde buscar estas imágenes es usando la búsqueda avanzada de Flickr. (hacia abajo está la opción de buscar Creative Commons).

Búsqueda de Creative Commons en Flickr

La opción de buscar imágenes con licencia Creative Commons está hasta abajo de la forma de búsqueda avanzada.

Otra opción es PicFindr que busca en varios servicios las imágenes que tengan licencia Creative Commons.

Búsqueda de Creative Commons en PicFindr

PicFindr te muestra esta caja del lado derecho de los resultados para que puedas afinar tu búsqueda.

Y Google parece que también puede buscar imágenes con licencia Creative Commons, pero creo que todavía no es oficial. Por lo menos la capacidad está oculta en el sitio principal, así que tal vez lo que encuentres no es seguro que realmente lo puedas usar.

Hay una gran cantidad de imágenes que puedes usar legalmente para ilustrar tu blog, tareas, presentaciones y otros trabajos. Solo es cosa de tener en cuenta las licencias.

Como ponerle marcos decorativos a las capas

Uno de los retos que surgen cuando se hacen páginas web por medio de capas y css es como poner un marco decorativo o esquinas redondeadas. El reto es mayor cuando se está haciendo un diseño flexible o líquido y el tamaño de la ventana deba ser variable, ajustándose al tamaño de la letra o al de la ventana del visitante.

La manera de hacer eso es mediante el uso creativo de las posiciones absolutas de diferentes capas y sus fondos. Por ejemplo, teniendo el siguiente código:

      <div class="cajabonita">
        <div class="sup-izq"></div>
        <div class="sup-der"></div>

        <div class="caja-externa">
          <div class="caja-interna">
          <p>Por fin, aquí va el contenido de nuestra caja. El ancho de la caja debe variar con el ancho de la ventana del navegador.</p>
          </div>
        </div>

        <div class="inf"></div>
        <div class="inf-izq"></div>
        <div class="inf-der"></div>
      </div>

Hemos creado varias capas dentro de nuestra caja para poder colocar los diferentes segmentos de nuestro marco. Para colocar todo como se debe ponemos el css:

    .cajabonita {
      width: 50%;
      margin: 0 auto;
      color: #000;
      background: url('sup.gif') top repeat-x #fff;
      position: relative;
      border: 0 none #fff;
    }
    .sup-izq {
      width: 80px;
      height: 80px;
      background: url('sup-izq.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; left: 0;
    }
    .sup-der {
      width: 80px;
      height: 80px;
      background: url('sup-der.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; right: 0;
    }
    .caja-externa {
      width: 100%;
      padding: 80px 0;
      background: url('izq.gif') left repeat-y transparent;
    }
    .caja-interna {
      margin-left: 80px;
      padding-right: 80px;
      background: url('der.gif') right repeat-y transparent;

    }
    .inf {
      width: 100%;
      height: 80px;
      background: url('inf.gif') bottom repeat-x #fff;
      position: absolute;
      bottom: 0;
    }
    .inf-izq {
      width: 80px;
      height: 80px;
      background: url('inf-izq.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; left: 0;
    }
    .inf-der {
      width: 80px;
      height: 80px;
      background: url('inf-der.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; right: 0;
    }

Como ves primero posicionamos nuestra caja principal de manera relativa para después poder posicionar las esquinas de manera absoluta dentro de esta caja. Como tenemos un fondo para el lado izquierdo y otro para el lado derecho necesitamos poner dos cajas, una encima de otra. Las imágenes de las esquinas deben tener el mismo alto que las imágenes de los bordes superior e inferior y el mismo ancho que las imágenes de la izquierda y derecha. Mira el ejemplo terminado.

Este código funciona en Firefox, Safari, Opera e IE7. El único que tiene un problema menor es IE6 que pone los fondos inferiores un pixel arriba de donde debería. Esto tal vez se pueda arreglar mediante comentarios condicionales o con una elección de colores que haga que no se note.

Ten en cuenta que esta puede no ser la mejor forma de lograr este efecto ya que estamos añadiendo varias capas sin contenido y sin ningún significado particular dentro de la página. Una mejor solución podría ser añadir las capas adicionales mediante javascript para que nuestro código html quede más legible.

CSS3 incluye varias nuevas propiedades para bordes y fondos múltiples que pueden hacer que esta técnica quede inútil, pero mientras tanto te puede ayudar en algo.

Actualización

En Foros del Web Mikmoro me señala un par de técnicas más. La primera usa solo una imagen y la segunda requiere de cuatro. El primer caso ingeniosamente acomoda las capas de las esquinas y usa las propiedades para posicionar el fondo (bottom left, top left, etc.) según se requiera para cada esquina. En el segundo ejemplo cada esquina tiene su fondo.

Obviamente es mejor usar el menor número de imágenes, clases y capas en el código, reducirlos lo más posible para facilitar su manejo y mantenimiento. El único inconveniente con las técnicas de Mikel es que, aunque puedes hacer las capas flexibles o líquidas, el tamaño máximo que pueden tener es algo más que el del alto y ancho de las imágenes de fondo. Más allá se rompe el efecto del borde.

Esto no necesariamente es importante y si haces las imágenes de buen tamaño (un borde de colores comunes en gif no debe pesar demasiado) el efecto funcionará para cualquier capa de dimensiones prácticas. Esto será lo preferible en la mayoría de los casos.

Por otro lado, si necesitas que el efecto rodée enormes áreas sin tener que preocuparte por el alto o ancho que puedan llegar a tomar o por hacer imágenes grandes, entonces la técnica de aquí será mejor.

Imágenes que se estiran

Una de las cosas agradables de programar usando diseños flexibles es que las cosas se ajustan al tamaño de la ventana del usuario, independientemente de la resolución de su monitor. Pero a veces las imágenes dan problemas… De Robertobaca.Net

Las imágenes suelen tener una sola resolución y si tienes una imagen que debe ocupar 200 pixeles en tu encabezado de 800 pixeles para que se vea bien y no rompa el diseño puede ser difícil hacer un diseño flexible que se ajuste.

Por lo general nuestro código se verá así:

<div id='encabezado' style='width: 100%;'>
<img src='imagen' align='left' width='200' />
Bienvenidos a mi sitio
</div>

Y eso puede funcionar bien a cierta resolución, pero si hacemos la pantalla más chica o más grande, la imagen ocupará un área mayor o menor de la que queremos. Pero hay una manera de solucionarlo:

<div id='encabezado' style='width: 100%;'>
<div id='imagen' style='width: 25%; float: left;'>
<img src='imagen' style='width: 100%;' />
</div>
Bienvenidos a mi sitio
</div>

Como ves, he puesto la imagen dentro de otro div que tiene un ancho de 25% flotado a la izquierda y la imagen tiene un ancho de 100%, y el 100% de 25% es 25%.

Patos

Claro, para mejores resultados ocupa una imagen cuya resolución original sea lo bastante grande para verse bien incluso en tamaños grandes. Sin exagerar para que no sea demasiado pesada.