Blog tecnológico http://www.asoma.es/blog Asoma Proyectos Digitales - Actualidad del mundo del diseño web e internet y artículos de interés Mon, 09 Aug 2010 12:14:43 +0000 http://wordpress.org/?v=2.1 en Cómo evitar que nos roben imágenes de nuestras páginas web http://www.asoma.es/blog/2008/01/07/como-evitar-que-nos-roben-imagenes-de-nuestras-paginas-web/ http://www.asoma.es/blog/2008/01/07/como-evitar-que-nos-roben-imagenes-de-nuestras-paginas-web/#comments Mon, 07 Jan 2008 09:17:43 +0000 administrador http://www.asoma.es/blog/2008/01/07/como-evitar-que-nos-roben-imagenes-de-nuestras-paginas-web/ Cuando realizamos una página web, una de las grandes preocupaciones (entre otras) es evitar que nos roben nuestros contenidos. Sobre todo si hablamos de sitios con textos o gráficos muy exclusivos o difíciles de conseguir.

En primer lugar hay que decir que desgraciadamente todo lo que publiquemos en internet podrá ser copiado de alguna manera u otra. Y que la única forma segura de evitar que nos "fusilen" algo es no publicarlo.

Sin embargo, podemos hacer algo al respecto, y al menos ponérselo un poco más difícil a los que quieran coger contenido "prestado". En este post vamos a hablar de las formas de persuadir a quienes quieran acceder a nuestros contenidos gráficos.

Deshabilitar botón derecho con javascript

Uno de los recursos más empleados en este tipo de casos es deshabilitar el botón derecho a través de javascript. Este recurso al menos deshabilita la función de "Guardar imagen como..." con el botón derecho. Además si lo acompañamos con un mensaje tipo alert recordando el copyright, mucho mejor.

Botón derecho deshabilitado

Un ejemplo de código javascript para emplear en estos casos es el siguiente, que debemos incluir en nuestros archivos html entre las etiquetas <head> y </head>:

JavaScript:

  1. <script>  var sMensaje = \\\\\\'Botón derecho deshabilitado. \n Todos los derechos reservados  ©\\\\\\';
  2.  
  3. function anularBotonDerecho(e) {
  4.  
  5. if (navigator.appName == \\\\\\'Netscape\\\\\\'        && (e.which == 3 || e.which ==    2)){       alert(sMensaje);       return false;     } else if (navigator.appName == \\\\\\'Microsoft Internet Explorer\\\\\\'          && (event.button    == 2)) {       alert(sMensaje);     }   }
  6.  
  7. document.onmousedown=anularBotonDerecho;   document.oncontextmenu=new Function("return false");
  8.  
  9. </script>

Marcas de agua

Con el anterior ejemplo tan sólo hemos deshabilitado el botón derecho. De todas maneras sabemos que un usuario medianamente experto podía haber guardado las imágenes en su disco duro de alguna manera.

Otro métido para persuadir a los usuarios es colocar una "marca de agua" en nuestras fotografías. Este método resulta más "intrusivo", ya que estamos modificando la foto original, pero por contra resultará más difícil que después esa imagen sea empleada con otros motivos.

Existen dos maneras de realizar marcas de agua. Una es realizarla con directamente con un programa de edición gráfica (por ejemplo Photoshop). Entonces podemos incluir una imagen encima de la original (en una nueva capa), con nuestro logotipo y jugando con la transparencia.

imagen con marca de agua

Evidentemente esto supone un trabajo importante si publicamos imágenes en nuestro sitio habitualmente. Pero si tenemos un publicador en php podemos hacer que este proceso se realice automáticamente cada vez que subimos una imagen al servidor.

En primer lugar tenemos que hacer una imágen en png que sirva de marca de agua. Es decir, una imagen con transparencia que se superpondrá a todas las imágenes que subamos. Y para que el sistema insete esta marca de agua automáticamente debemos usar la siguiente función:

PHP:

  1. function marcadeagua($img_original, $img_marcadeagua, $img_nueva, $calidad) {
  2.  
  3. // obtener datos de la fotografia
  4. $info_original = getimagesize($img_original);
  5. $anchura_original = $info_original[0];
  6. $altura_original = $info_original[1];
  7.  
  8. // obtener datos de la "marca de agua"
  9. $info_marcadeagua = getimagesize($img_marcadeagua);
  10. $anchura_marcadeagua = $info_marcadeagua[0];
  11. $altura_marcadeagua = $info_marcadeagua[1];
  12.  
  13. // calcular la posicion donde debe copiarse la "marca de agua" en la fotografia
  14. $horizextra = $anchura_original - $anchura_marcadeagua;
  15. $vertextra = $altura_original - $altura_marcadeagua;
  16. $horizmargen =  round($horizextra / 2);
  17. $vertmargen =  round($vertextra / 2);
  18.  
  19. // crear imagen desde el original
  20. $original = ImageCreateFromJPEG($img_original);
  21. ImageAlphaBlending($original, true);
  22.  
  23. // crear nueva imagen desde la marca de agua
  24. $marcadeagua = ImageCreateFromPNG($img_marcadeagua);
  25.  
  26. // copiar la "marca de agua" en la fotografia
  27. ImageCopy($original, $marcadeagua, $horizmargen, $vertmargen, 0, 0, $anchura_marcadeagua, $altura_marcadeagua);
  28.  
  29. // guardar la nueva imagen
  30. ImageJPEG($original, $img_nueva, $calidad);
  31.  
  32. // cerrar las imagenes
  33. ImageDestroy($original);
  34. ImageDestroy($marcadeagua);
  35. }

Después sólo tendríamos que llamar a la función:

PHP:
  1. marcadeagua("images/original.jpg","images/marcadeagua.png","images/original.jpg",100);

Más sobre la marca de agua en php: http://bitacora.guebs.com/articulo/28/anadir-marca-de-agua-a-fotografias/
Emplear flash

Otro recurso para evitar que nuestras imágenes se puedan coger fácilmente es emplear flash, por ejemplo para realizar una galería de fotos donde se muestren las imágenes más importantes. Con ello evitaremos que los usuarios se puedan descargar las imágenes de una manera directa. Aunque ni aún así estaremos a salvo de que nos puedan copiar.

Conclusión

Como decíamos al comienzo del artículo la única manera de que algo que publiquemos en internet no sea copiado es no publicándolo. Sin embargo con las técnicas que hemos explicado podemos, al menos dificultar esa tarea. Según nos convenga podemos usar cada una de las técnicas, e incluso combinarlas.

]]> http://www.asoma.es/blog/2008/01/07/como-evitar-que-nos-roben-imagenes-de-nuestras-paginas-web/feed/ RSS - Elige los contenidos más interesantes de la red http://www.asoma.es/blog/2007/04/13/rss-elige-los-contenidos-mas-interesantes-de-la-red/ http://www.asoma.es/blog/2007/04/13/rss-elige-los-contenidos-mas-interesantes-de-la-red/#comments Fri, 13 Apr 2007 12:14:11 +0000 administrador http://www.asoma.es/blog/?p=11 Feed - RssCada vez observamos en más páginas web este símbolo que tenemos justo a la izquierda. Sobre todo en blogs o periódicos on-line. Se trata del símbolo de RSS del que a continuación explicaremos su funcionamiento.

Pero antes nos vamos a poner en situación. Imaginemos que cada vez que nos conectamos a Internet echamos un vistazo a las mismas páginas web. Por ejemplo a un periódico en concreto, al blog personal de un amigo, a una publicación especializada en tecnología y otra en coches. Todo esto, después de mirar si tenemos nuevos mensajes en el correo electrónico.

Quizá del periódico sólo nos hayan interesado unas pocas noticias, puede que amigo no haya actualizado su blog, que en la publicación tecnológica no hayamos encontrado nada interesante, y que en la de coches sólo encontremos una nueva noticia.

En total hemos visitado cuatro páginas web, invirtiendo nuestro tiempo en mirar qué contenidos estaban actualizados, y cuál realmente interesantes.

¿No sería mejor tener todos los titulares en una misma página? Es decir, que en un vistazo pudiésemos ver qué páginas se han actualizado y de ellas, qué noticias nos interesa leer. Pues bien, para eso está el RSS o sindicación de contenidos.

 

Agregador de contenidos, todo en una página.

(more...)

]]> http://www.asoma.es/blog/2007/04/13/rss-elige-los-contenidos-mas-interesantes-de-la-red/feed/