Como agregar una marca de agua a las imágenes en WordPress

February 23, 2010 by Fedelosa · 8 Comments 

Hace unos días me encontraba creando (que se note que no digo diseñando porque NO SOY diseñador) la web de una discoteca, para la que use WordPress como para casi todas las webs que armo, ya que lo encuentro sumamente flexible para crear cualquier tipo de sitio, no solo blogs.

En ese momento me surgió la inquietud de agregarle una marca de agua a las fotos de la disco. para de esta forma reforzar la marca y evitar plagios y difusión de las fotos en redes sociales, ya que en muchas de ellas (la mayoría) aparecerían rostros de personas. Probé varios plugins para WordPress pero ninguno me satisfizo, así que decidí que lo haría sin usar plugins. Luego de buscar alternativas y algunos códigos (tampoco soy programador), me encontré con que tenía dos maneras de lograr “imprimirle” marcas de agua a las fotos, sin contar claro esta, las alternativas offline como Photoshop y otros softwares específicos para esta tarea. Las dos alternativas eran:

1.- Modificar la foto original agregándole la marca.

2.- Dejar intacta la foto original y superponerle la marca solo cuando es necesario.
W Lounge Tacuarembo

Por algún motivo me decidí por este último método que encontré en wpglamour.com, aunque luego Martín me explicó que era mucho mejor el primero, aunque tuviera que duplicar las fotos en el servidor para no perder las originales intactas, así que supongo que mas adelante cambiare el método y estaré publicando la nueva solución por aquí.

Superponer marca de agua

Debemos tener acceso al servidor donde esta hosteado nuestro blog, para poder editar en primer lugar el archivo .htaccess al que debemos agregarle la siguiente línea:

RewriteRule ^(.*)wp-content/uploads/(.*) $1watermark.php?src=wp-content/uploads/$2

Para que quede de esta forma:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteRule ^(.*)wp-content/uploads/(.*) $1watermark.php?src=wp-content/uploads/$2
</IfModule>
# END WordPress

Lo que hace esa línea agregada al .htaccess es que cada vez que una imagen es llamada para mostrarse en el navegador, va a redireccionar ese llamado al archivo watermark.php que crearemos a continuación y que sera el encargado de superponer la marca de agua. En la raíz de nuestro sitio, en el mismo directorio donde estan wp-admin, wp-content, wp-config.php, creamos un archivo llamado watermark.php con el siguiente contenido:

<?php
$src = $_GET['src'];

header('Content-type: image/jpeg');

//this will prevent the watermark from showing up in the thumbnail images
if (eregi("150x150", $src)) {
 $watermark = imagecreatefrompng('empty.png');
} else {
 $watermark = imagecreatefrompng('watermark.png');
}
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
if(eregi('.gif',$src)) {
$image = imagecreatefromgif($src);
}
elseif(eregi('.jpeg',$src)||eregi('.jpg',$src)) {
$image = imagecreatefromjpeg($src);
}
elseif(eregi('.png',$src)) {
$image = imagecreatefrompng($src);
}
else {
exit("Your image is not a gif, jpeg or png image. Sorry.");
}
$size = getimagesize($src);
$dest_x = $size[0] - $watermark_width - 0;
$dest_y = $size[1] - $watermark_height - 0;
imagecolortransparent($watermark,imagecolorat($watermark,0,0));
imagecopyresampled($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $watermark_width, $watermark_height);

imagejpeg($image, "", 95);
imagedestroy($image);
imagedestroy($watermark);
?>

Una vez llegamos a este punto, debemos crear la marca de agua que queremos superponer, esto es muy fácil de hacer en Photoshop por ejemplo, por lo que no diré como hacerlo, tengan en cuenta hacerla lo suficientemente opaca como para que no sobresalga demasiado, pero que tampoco pase desapercibida.
Cuando tengamos pronta la imagen, la subiremos también a la raíz de nuestro blog, con el nombre watermark.png, y también debemos crear y subir, una imagen transparente de 1px x 1px con el nombre de empty.png

ESO ES TODO!! Cada vez que alguien solicite ver una imagen, esta se verá con la marca de agua superpuesta, y funciona incluso con el link directo a la imagen o sea que de esta forma quienes nos hagan hotlink de las fotos, se las llevaran con nuestra marca incluida ;)

Sobrevivir gracias a la tecnología

February 5, 2010 by Fedelosa · 3 Comments 

Cada vez mas nuestras vidas offline y online se mezclan y confunden, ya son varias las personas de mi generación que han hecho muchos amigos gracias a Internet, y seguramente las generaciones siguientes seguirán esta tendencia quizás hasta que un día la interacción social nazca exclusivamente por Internet.

Hace unos días se conoció el caso de un director de cine que fue rescatado en Haití gracias a su iPhone, Dan Woolley pudo sobrevivir gracias a una aplicación que le enseñaba primeros auxilios. Varias veces aunque en distintas condiciones me ha ayudado tener Internet en el celular, me he perdido en lugares desconocidos y he podido encontrar lo que buscaba gracias al GPS en el celular.

Ahora hace un par de días, un turista Alemán se perdió en el norte de su país mientras tomaba fotos del atardecer en St Peter-Ording, una zona totalmente cubierta de nieve, pero al ser una zona turística la municipalidad local tiene un sitio web con webcams que muestran al mundo el lugar. Por suerte una mujer que miraba el atardecer a cientos de kilómetros a través de la webcam, pudo observar que el hombre se encontraba perdido en la nieve, con lo que dio aviso a la policía quien pudo ayudarlo a salir del lugar.

Fuente: http://news.bbc.co.uk/2/hi/europe/8496586.stm

Publicidad de Andes Teletransporter

February 5, 2010 by Fedelosa · 6 Comments 

La conocida marca de cerveza argentina, ANDES creó una campaña interactiva y viral como nunca he visto antes, lo inusual de esta campaña es que han diseñado unas cabinas con aislación acústica, las instalaron en varios bares y boliches con buen resultado según lo esperado. Aquí la campaña publicitaria:

GPS Garmin con tu propia voz

January 25, 2010 by Fedelosa · 1 Comment 

Para los que como yo son usuarios de GPS Garmin, ya sea en el celular o con un GPS propiamente dicho, y además les gusta personalizar las voces con las que el equipo nos da las instrucciones de navegación, acá les traigo un regalito.

Garmin Voice Studio es un software para Windows, hecho por Garmin que te permite grabar tus propias voces para usar en tu GPS, ahora podrás cambiar la voz de tu GPS a lo que tu quieras.

Imágenes en movimiento en nuestro blog

January 22, 2010 by Fedelosa · 4 Comments 

Si has llegado a este blog a través de un link roto, o queriendo encontrar una página que no existe, te habrás dado cuenta de la hermosisima (?) página de error 404 que tenemos, es muy fácil de lograr una página así, o hablando en serio, una linda página de error.

El efecto de las nubes moviéndose, inspirado en lo explicado por Gema,  lo logramos fácilmente con un poco de código en la plantilla de nuestro blog:

Para que las nubes puedan moverse, debemos descargar jquery.easing.1.3.js y subirlo a nuestro servidor.

Agregar el siguiente código al header.php entre las etiquetas HEAD:

<script src='RUTA_DONDE_ALOJE_JQUERY/jquery.easing.1.3.js' type='text/javascript'/></script>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/></script>

<script type='text/javascript'>
		$(document).ready(function() {
			setTimeout("animation()",300);
		});

		function animation(){
                        nube1();
						nubes2();
						nubes3();
						nubes4();
		}
				function nube1(){
			$("#nube1").animate({left:"+=85%"},30000).animate({left:"-0px"}, 30000)
			setTimeout("nube1()",5000);
		}
				function nubes2(){
			$("#nubes2").animate({left:"+=85%"},40000).animate({left:"-0px"}, 60000)
			setTimeout("nubes2()",5000);
		}
                function nubes3(){
			$("#nubes3").animate({left:"+=85%"},50000).animate({left:"-0px"}, 40000)
			setTimeout("nubes3()",5000);
		}
		        function nubes4(){
			$("#nubes4").animate({left:"+=85%"},60000).animate({left:"-0px"}, 50000)
			setTimeout("nubes4()",5000);
		}
	</script>

Allí podemos jugar un poco con los valores para determinar la velocidad de movimiento de las nubes por ejemplo.

Agregamos lo siguiente a nuestro archivo de CSS:

#nube1{ position:absolute; top:220px; left: 0px; z-index:6; }
#nubes2{ position:absolute; top:300px; left: 0px; z-index:5; }
#nubes3{ position:absolute; top:380px; left: 0px; z-index:4; }
#nubes4{ position:absolute; top:470px; left: 0px; z-index:5; }

Y lo siguiente en donde queremos que se muestren las imagenes,

<div id="nube1">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube1.png"/>
</div>
<div id="nubes2">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube2.png"/>
</div>
<div id="nubes3">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube1.png"/>
</div>
<div id="nubes4">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube2.png"/>
</div>

Las posibilidades son infinitas, solo queda jugar con la imaginación

Usuarios sugeridos de Twitter se renueva

January 21, 2010 by Fedelosa · 3 Comments 

Twitter acaba de anunciar en su blog, que ha renovado su sistema de sugerencia de usuarios a seguir, de la lista que prácticamente imponía al registrar una nueva cuenta, ha pasado a una lista de categorías temáticas y dentro de cada categoría 20 usuarios elegidos mediante un algoritmo que se va renovando, por lo que los usuarios que hoy nos sugieren, puede que mañana no estén ahí.

Creo que no nos merecemos estar por encima de Bill Gates, de todas formas muchas gracias (?)

Si algo le viene faltando a estas listas de usuarios, es la capacidad de seguir a varios con un solo clic, si quieres puedes seguir al equipo de LadoGeek en Twitter

Cómo conectar tu móvil a tu cuenta de Twitter

January 21, 2010 by Fedelosa · 9 Comments 

Existen varias aplicaciones que nos permiten actualizar nuestra cuenta de Twitter vía SMS, pero todas ellas con números premium que cuestan mas de lo que cuesta un SMS común y corriente, en algunos casos no logro entender como es que sobreviven, dado que sale mas barato actualizar mandando un mensaje de texto a los numeros de Twitter directamente, para esto justamente, hace un mes publicaron un tutorial en Twitter explicando como hacer el proceso.

Es muy simple, y se hace todo desde el celular:

  1. Envía un mensaje de texto al +447624801423 con la palabra START
  2. Espera un par de minutos y luego envía tu nombre de usuario (sin @) al mismo numero
  3. Espera 2 minutos mas y envía tu contraseña
  4. Luego de un par de minutos, el ultimo paso sera enviar OK al mismo numero tambien

Aprende a hablar Na’Vi el idioma de Avatar

January 16, 2010 by Fedelosa · 3 Comments 

Me encuentro en Chicageek con una interesante guía para aprender a hablar un idioma que no existe (?), si así como lo oyen (aunque en realidad no lo oyen, lo leen, a menos claro esta que estén leyendo el post en voz alta), pero volviendo al punto, el na’vi es un idioma artificial por llamarlo de alguna manera creado especialmente para la película Avatar que viene arrasando con todo en estos días, y como todo en esta vida tiene sus fanáticos, en este caso podrán aprender a hablar el idioma de la pelicula. No puedo dar detalles mas claros ya que aun no la vi, espero hacerlo en estos días, me la recomiendan?

La nube rollo y la foto de una Uruguaya en internet

January 10, 2010 by Fedelosa · 11 Comments 

A estas alturas todos deben haber leído algún tweet mencionando la foto en cuestión, confieso que hace una semana cuando me enteré por primera vez de la existencia de esta foto, la vi y no le di importancia, pero jamas crei que esto se convirtiera en un fenómeno viral, al punto que la misma NASA la publico.

Cuando Daniela Mirner Eberl tomo la foto hace un año en Punta del Este, estoy seguro que jamás pensó que miles y miles de personas estuvieran hablando de ella hoy en Internet, y muchísimo menos que la NASA publicara su foto obviamente otorgándole el crédito, no voy a hablar de lo que es una nube rollo porque ni yo termine de entender la descripción y ademas la pueden encontrar en cualquier lado, pero esto me hizo acordar al video de Federico Alvarez que hoy es famoso en el mundo entero por haber sido contratado por Hollywood, no es que Daniela haya sido premiada o contratada, pero no me van a decir que a ustedes no les llenaría el espíritu que miles de personas en el mundo hablen de su foto.

Con todo esto confirmo que para alcanzar la fama a veces un toque de suerte es suficiente, si a eso le sumamos redes sociales, un producto original, y un poco de tiempo para que el mismo se “viralice”, seguramente tendremos una alta posibilidad de que el mundo entero nos conozca.

Si si, ya se, son las 8 de la mañana y me pongo filosófico, pero este tema me dejo contento.

La época de los e-books

January 5, 2010 by Fedelosa · 2 Comments 

Desde hace poco menos de un año ha crecido la creación y distribución de libros electrónicos o e-books, y lo que mas abundan son tutoriales, en esta oportunidad les voy a presentar dos libros en español, uno llamado “Como hacer un buen blog“, escrito por Sergio de Actualidad y deporte y el segundo trata sobre Twitter, escrito por Juan Diego Polo de Wwwhatsnew.com y se llama “Twitter para quien no usa twitter“, este libro se puede descargar ahora gratuitamente desde Bubok.

Next Page »