Hace un tiempo atrás encontramos una herramienta de imágenes que tuvo buena aceptación por parte de la comunidad de  SummArg. Ahora, en esta oportunidad, queremos compartir otras opciones disponibles de parte de la misma empresa que la desarrolló: Idée. Si entran al sitio podrán ver que cuentan con distintas opciones, unas en funcionamiento completo, y algunas otras en la parte del laboratorio, es decir, que aún están siendo desarrolladas.

La primera herramienta a la que no podemos dejar de referiremos es el TinEye, un buscador de imágenes, pionero en buscar mediante identificación de imagen, en lugar de palabras clave, metadatos o en marcas de agua. Para un mayor abundamiento sobre esta novedosa herramienta, les dejamos este  enlace, que los dirigirá al thread de nuestro foro donde presentamos y comentamos la misma, aunque faltó aclarar allí que de esta herramienta está disponible una API, pero la misma es comercial.

La segunda herramienta que queremos destacar, se trata de algo muy interesante y potente para los profesionales del diseño, imagen, fotografías, y todo lo relacionado. PixID es una marca importante en la tecnología de identificación y seguimiento de imágenes para publicaciones impresas, que utilizando algoritmos avanzados logra identificar en qué publicaciones web están siendo utilizadas nuestras imágenes. Incluso llega hasta el punto de lograr relacionar una imagen que fue recortada o que tuvo otro tipo de edición, con la original. Les recomiendo ver el video en la página del producto.

Se estarán preguntando cuál es la utilidad de esto. Pues bien, la principal es el poder identificar quién está utilizando nuestras imágenes o diseños sin permiso (en el caso que seas el propietario), y en consecuencia poder reclamar las ganancias por los mismos.

Si seguimos viendo las herramientas que nos ofrece esta empresa, podremos descubrir a Piximilar, que busca, a través de una amplia colección, imágenes similares visualmente, yendo más allá de las palabras claves o metadatos. Sin embargo, lo que destaca  son los 3 tipos de búsqueda que permite realizar:

• seleccionando una imagen de tu colección;
• subiendo tu propia imagen;
• seleccionando múltiples colores (hasta 10) desde una paleta, o también de una rueda, de colores, lo cual devolverá imágenes alojadas en Flickr que contengan ese/esos color/es como principales.

Las dos primeras opciones son similares a las que contienen las otras herramientas, variando sólo la fuente, con la salvedad de que para ayudar en la búsqueda también utiliza tags, y con esta combinación logra resultados realmente sorprendentes.

En cuanto a la otra forma de exploración, por colores, debemos admitir que es la que más nos sorprendió, y creemos que será una herramienta indispensable para todos los que trabajan en diseño. Dejamos una muestra en la imagen a continuación.

Para poder ver el laboratorio de pruebas de estas herramientas lo pueden hacer en: labs.ideeinc.com, y si quieren visitar el sitio principal es: www.ideeinc.com.

Después de esto creemos que tienen bien merecido el título de: «La compañía de búsqueda visual».

No es novedad que el pionero indiscutido de los buscadores es Google, pero Bing está ganando mercado lentamente y realmente tienen material novedoso para hacerlo. Según la investigación de Nielsen, el buscador de Microsoft escala el puesto número 3 en Estados Unidos:

1. Google (64,6%)
2. Yahoo! (16,0%)
3. MSN/Windows Live/Bing (10,7%)
4. AOL (3,1%)
5. Ask.com (1,7%)
6. My Web (1,2%)
7. Comcast (0,5%)
8. Yellow Pages (0,4%)
9. NexTag (0,3%)
10. Local.com (0,2%)

En Alt1040 nos traen un video para recordarnos la impresionante presentación de la búsqueda visual que se viene. Personalmente entiendo, que no hay que ir tan lejos para ver que, en algunos aspectos, Bing está en vías de superar a Google, cuando entramos a ver la búsqueda por imágenes, increíblemente cómoda, con un “scroll infinito” (nunca pide pasar de página, siempre nos trae las búsquedas siguientes), tecnología dinámica para mostrarnos los detalles sobre la imagen, varios modos de visualización de las imagenes y una barra lateral que nos trae más opciones de búsqueda.

Pruebenló y me comentan. Para imágenes estoy empezando a dejar de lado Google. ¿Ustedes probaron Bing? ¿Qué les pareció?

Siguiendo algunos links recomendados de anieto2k, terminé guardando algunos plugins muy vistosos que hacen uso de jQuery. Algunos son más faciles de instalar que otros y todos funcionan para la serie actual de WordPress. Vale la pena echarles una mirada y utilizar alguno para implementar en nuestro blog.

WP-Slimbox2

El plugin Javascript Slimbox2 fue escrito por Christophe Beyls usando jQuery framework. Y esta adaptación para usarlo sencillamente en WordPress podés descargarla desde acá. El plugin te permite configurar varios aspectos desde su panel de opciones referentes al modo en que se despliegan las imagenes y cómo seleccionar a que imagenes habrá de aplicarse el efecto. Trae una integración para Picassa y para Flickr. Mirá el demo!

Wordpress jQuery Lightbox Plugin

Basado en jQuery Lightbox Plugin de Balupton, este plugin requiere que agreguemos a las imagenes el atributo rel=”lightbox” para que se aplique el efecto. Vean el demo en este link.

Accordion Image Menu Plugin

Una muy buena idea para colocar en la sidebar los últimos posts, o los posts más destacados. Despliega de a una imagen por vez mostrandonos el title del post. Tiene varios efectos de transición para aplicar y soporta personalización en los posts que mostrará (basándose en categorías, páginas, etc). El título del post en cada imagen es opcional.

La instalación es sumamente sencilla. El demo pueden verlo en este link.

WP Thickbox Integration

Otro lightbox muy simple basado en jQuery.  Únicamente requiere clickear el botón “File URL” y dejar la opción de abrir en la misma ventana y “SI” para que funcione sin más. Podés saber más sobre su funcionamiento en el sitio oficial.

Carousel Gallery

Con solamente colocar un tag [g allery] llamamos a la galería que funciona con jCarousel y admite varios tipos de configuración, desde modificar el CSS hasta elegir si queremos o no que se muestren los títulos de las entradas, entre otros. Podés verlo en marcha en la web del autor y descargarlo desde el repositorio oficial de plugins.

jQuery Lightbox For Native Galleries

Este plugin nos permite visualizar una galería de fotos con el motor nativo de WordPress y el efecto añadido de Lightbox. Pueden ver una demo del plugin en la web del autor. Muy facil de configurar y usar.

Tutorial para crear WP Post Carousel

Descargando el plugin jflow 1.2, este tutorial nos enseña como aplicar el efecto Carousel a los posts ubicados en una categoría especial. Es una guía realmente fácil de seguir y nos abre la puerta a que modifiquemos el plugin para descubrir nuevos efectos en nuestro WordPress. Mirá el demo!

Hace poco se hablaba de la nueva función de papelera que traerá incorporada WordPress 2.9, ahora en WP-Engineer.com publicaron imagenes con nuevas funciones en el gestor de imágenes de WordPress. Siempre creí que uno de los puntos mas débiles de WP era su gestor de imagenes, ya que no nos permite recortar a conveniencia la imagen. Siempre hay que recurrir a un editor externo ya sea para recortar, girar la imagen, cambiar el tamaño, etc.

Ahora tendremos una mayor cantidad de opciones para bloggear sin la necesidad de otra cosa que no sea nuestro navegador favorito, ya que la libertad para manipular las imagenes sin la necesidad de un editor externo está cerca. Ciertamente un gran avance!

No pocas veces vemos un theme de WordPress que deseamos usar pero, lamentablemente, todavía no posee ningún script para facilitarnos la tarea de subir imagenes y redimensionarlas o recortarlas para ser reutilizadas en el home del theme. En la mayoría de los casos, veremos que es muy simple identificar en el theme la porción de código a reemplazar para aminorarnos el trabajo. Si usamos TimThumb, debemos tener presente que hay que usar Campos Personalizados (es facil, no se asusten).

Preparando Archivos y Carpetas

Descargá el archivo TimThumb.php, cuyo autor es darrenhoyt.com (autor del famoso theme Mimbo). Subilo a la carpeta del theme al que le vamos a colocar el script. Creá una carpeta dentro de tu theme llamada /cache/ y asignale permisos 777.

Si vas a utilizar el editor de themes de WordPress, asigná permisos 777 a los archivos del Theme y luego retornalos a 644. Sino trabajá desde tu equipo utilizando Notepad ++ y subiendo los archivos con tu FTP favorito.

Editando el Loop

El archivo index.php o el home.php de tu theme necesita de alguna imagen de tamaño especial para funcionar. Cierto? Queremos eliminar la necesidad de hacer algún crop o resize especial para la portada por cada nota. En mi caso modifiqué el theme CSS Gallery y en su index.php la parte del loop que necesitaba modificar era la siguiente:

<?php while (have_posts()) : the_post(); ?>

<div class="item" onmouseover="this.className='item2'" onmouseout="this.className='item'">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<p><a href="<?php $values = get_post_custom_values("url"); echo $values[0]; ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("thumbs"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a></p>

Allí llama al custom field en el que nosotros indicamos la ruta de la miniatura resizeada (de un modo bastante rústico y semi-manual). Nosotros tenemos que indicarle la ruta con la que trabaja el script TimThumb. Reemplazamos la línea en donde llama a la imagen (en rojo) por esto:

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&amp;w=225&amp;h=144" alt="<?php the_title(); ?>"  class="borderimg" /></a> </p>

El Theme utiliza miniaturas de 255 x 144 px, por lo que hay que solicitar al script ese tamaño para nuestra portada, siendo w=Ancho (wide) y h=Alto (height).

Veamos otros ejemplos para setear la imagen extraidos de c.hadcoleman.com

Mostrar Solo Imagen

<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
	</div>
<?php } ?>

Mostrar Imagen con Link al Post

 <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
	</div>
<?php } ?>

Mostrar Imagen e Insertarle Link a URL personalizada

<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
	<div class="postthumb">
		<a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
	</div>
<?php } ?>

Insertando las imagenes desde los Campos Personalizados

Como último paso deberemos hacer uso de los Campos Personalizados (Custom Fields) cuando escribamos un post. Seleccionemos cualquier imagen de nuestro artículo y entremos a la solapa editar de modo de poder ver la URL a la imagen

Copiamos ese enlace, cerramos la pantalla de opciones de la imagen y vamos al pié de la página de edición del post, a la sección de Campos Personalizados.

Insertá el nombre del campo personalizado tal cual lo generaste en la nueva URL de tu index.php. En nuestro caso es “thumbs” como podemos ver:

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&amp;w=225&amp;h=144" alt="<?php the_title(); ?>"  class="borderimg" /></a> </p>

Si utilizaras el último ejemplo brindado, en donde aparece otro campo mas para la URL personalizada, insertamos “imglink” de nombre al campo y al lado la URL en cuestión.

Espero les sirva!

Este pequeño script nos permite reemplazar texto por imagenes, facilitando la tarea de mostrar títulos, por ejemplo, con fuentes variadas sin la necesidad de que nuestros visitantes tengan dicha fuente instalada en sus computadoras.

Es necesario tener instaladas librerias GD con FreeType habilitado en nuestro servidor, preferentemente php 5 pero con la version 4 también funciona. También debe soportar PNG. Estos pocos requisitos se cumplen en casi todos los servicios de hosting.

Luego se descarga el script y se sube al servidor. Se instroducen los siguientes cambios en nuestras plantillas Quick Start Guide y finalmente seguimos el tutorial de facelift que realizaron en divitodesign.com.

Como resultado cualquier tipografía nueva que deseemos agregar en nuestro website, no requerirá de ninguna instalación en la pc del navegante y lograremos una estetica mas agradable. Incluso podremos utilizar fuentes de símbolos!

Vean un demo con los resultados, clickeen en el botón para ver la transformación. Descarguen Facelift de su sitio oficial.

Visto en Xyberneticos

Desde leigeber.com siempre podemos ver material de calidad, en este caso nos trae una hermosa galería de imagenes con un slider para seleccionar la imagen deseada. Si no hay acción por parte del usuario, las imagenes correran solas, y tenemos disponible la opción de agregar un texto descriptivo.

Vean el demo de la galería para que no les queden dudas sobre lo que digo. Ahora veamos como se pone en marcha esto. El código lo descargan desde el site del autor en TinySlideShow 

Deben subir los dos archivos .js para que funcione, y tienen un ejemplo con imagenes cargadas en el zip para que puedan basarse en él.

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

El autor nos señala que cada li representa a una imagen, el h3 es el título de la imagen y p la descripción (el texto que aparece debajo). Con las etiquetas span indicamos la ruta a la imagen en tamaño completo. Finalmente en el site mencionado encontrarán los valores que pueden cambiar para modificar el modo en que se ven las imagenes (velocidad del show, transparencia, colores) desde el archivo javascript.

Es un complemento muy liviano para añadir a una web.

TinySlideShow