Skip to Content »

Hotlinking

  • 23/03/2008
  • 12:57 pm
  • unijimpe

Hotlinking es el enlazar directamente archivos (.jpg, .gif, .flv, zip, etc) de un web desde otro web. El ejemplo mas común es cuando se enlazan imágenes directamente desde los foros o blogs si permiso del web original.

Esto es un problema por que se consume ancho de banda ajeno por que el archivo se esta cargando y consumiendo recursos de otro dominio. Además al enlazar directamente puedes estar infringiendo derechos de autor, pues lo estas haciendo sin permiso.

Como saber si hago Hotlinking
Si por ejemplo tienes un dominio llamado mydomain.com y muestras imágenes en tu web, puedes tener las siguientes situaciones:

HTML:
  1. <!-- correcto -->
  2. <img src="img.jpg" width="50" height="50">
  3. <!-- correcto -->
  4. <img src="http://mydomain.com/img.jpg" width="50" height="50">
  5. <!-- hotlinking!!! -->
  6. <img src="http://otherdomain.com/img.jpg" width="50" height="50">

Es decir si hay una imagen con una ruta a un dominio que no es el propio se esta haciendo hotlinking.

Prevenir Hotlinking mediate .htaccess
Para ello en la raiz de nuestro servidor, creamos un archivo llamado .htaccess, dentro de el colocamos:

CODE:
  1. RewriteEngine on
  2. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mydomain.com(/)?.*$ [NC]
  3. RewriteRule .*\.(jpg|jpeg|gif|png|bmp|zip|rar)$ notimg.jpg [R,NC]

En donde se tiene que hemos bloqueado el acceso remoto a todos los archivos de imágenes, archivos comprimidos y lo hemos reemplazado por una imagen (notimg.jpg) que muestra un mensaje de advertencia.

Pero hay un pequeño inconveniente, esto bloquea el acceso a todos los dominios externos, pero que pasa si nuestros usuarios acceden por lectores de Feeds como Google Reader, Bloglines, etc. Entonces para ello podemos agregarle excepciones:

CODE:
  1. RewriteEngine on
  2. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mydomain.com(/)?.*$ [NC]
  3. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?google\.com/ [NC]
  4. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?bloglines\.com/ [NC]
  5. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?feedburner\.com/ [NC]
  6. RewriteRule .*\.(jpg|jpeg|gif|png|bmp|zip|rar)$ notimg.jpg [R,NC]

Plugin hotlinking protection para Wordpress
Si utilizas Wordpress hay un plugin que te permitirá automatizar el proceso de prevenir el Hotlinking, se trata de Hotlink Protection Plugin for Wordpress, para ello descargas el archivo hotlink-protection.zip, descomprimes el archivo descargado y subes la carpeta hotlink-protection al directorio de plugins de Wordpress (/wp-content/plugins/), luego activas el plugin en el panel de administrador y finalmente accedes a Options > Hotlinking Protection para configurar el plugin.

hotlinking.gif

Utilizar imágenes de otras webs sin hacer Hotlinking
Para ello podemos utilizar un servicio llamado ImgRed.com, de esta forma la petición la hará al servicio de ImgRed, la cual hace una copia en cache de la imagen original la primera vez que se solicita y las siguientes veces solo accedes a la imagen de la cache de ImgRed.

Utilizar este servicio es sencillo, solo es necesario agregar http://imgred.com/ antes de la ruta de la imagen original, de la siguiente forma:

HTML:
  1. <!-- hotlinking -->
  2. <img src="http://otherdomain.com/img.jpg">
  3. <!-- not hotlinking!!! -->
  4. <img src="http://imgred.com/http://otherdomain.com/img.jpg">

Posts Relacionados

  • No related posts

SWFObject 2.0

  • 15/03/2008
  • 6:46 pm
  • unijimpe

Se acaba de lanzar SWFObject 2.0 la librería mas popular y mas versatil para insertar SWF en páginas html. SWObject es el producto del trabajo de Geoff Stearns creador de SWFObject y Bobby van der Sluis creador de UFO los cuales habían estado desarrollando SWFFix del cual comentamos hace un tiempo pero que ahora lo han llamado SWFObject 2.0.

swfobject-20.gif

Utilizando SWFObject 2.0
Primero descargamos los archivos desde http://code.google.com/p/swfobject/downloads/list, luego del zip extraemos el archivo swfobject.js que contiene todas las funciones necesarias para el uso de SWFObject 2.0. Lo siguiente es crear nuestra página html e insertar el javascript en el header del HTML de la siguiente forma:

HTML:
  1. <script type="text/javascript" src="swfobject.js"></script>

Luego creamos un div en donde se mostrará el SWF que deseamos insertar, dentro de este div colocamos un texto alternativo que se mostrará en caso el usuario no tenga Flash.

HTML:
  1. <div id="main">SWFObject 2.0 Demo - unijimpe</div>

El ultimo paso es utilizar el método embedSWF al cual le pasamos: el archivo swf a insertar, el identificador del div donde deseamos insertar el swf, el ancho, el alto y la versión de flash requerida. Luego si insertamos un archivo llamado main.swf tendríamos:

HTML:
  1. <script type="text/javascript">
  2.  swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
  3. </script>

Luego uniendo todos los elementos tenemos la forma completa de insertar SWFs utilizando SWFObject 2.0. (Pueden ver el resultado en swfobject20/index.html)

HTML:
  3. <title>SWFObject 2.0 Demo - unijimpe</title>
  4. <script type="text/javascript" src="swfobject.js"></script>
  5. <script type="text/javascript">
  6.  swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
  7. </script>
  8. </head>
  10. <div id="main">
  11.     SWFObject 2.0 Demo - unijimpe
  12. </div>
  13. </body>
  14. </html>

Ahora si por ejemplo deseamos insertar un vídeo de Youtube en nuestra página, podemos hacerlo utilizando SWFObject 2.0 de la siguiente forma (Pueden ver el resultado en: swfobject20/youtube.html):

HTML:
  3. <title>Youtube Video with SWFObject 2.0 - unijimpe</title>
  4. <script type="text/javascript" src="swfobject.js"></script>
  5. <script type="text/javascript">
  6.  swfobject.embedSWF("http://www.youtube.com/v/yXQ7-9pV7RM&hl=en", "main", "425", "355", "9.0.0");
  7. </script>
  8. </head>
  10. <div id="main">Youtube Video with SWFObject 2.0 - unijimpe</div>
  11. </body>
  12. </html>

Agregando Flashvars, Parámetros y atributos
Uno de los usos mas corrientes es el agregar flashvars o parámetros adicionales, para ello SWFObject 2.0 puede recibir parámetros adicionales

HTML:
  1. <script type="text/javascript">
  2. var flashvars = {};
  3. var params = {};
  4. var attributes = {};
  5. swfobject.embedSWF("myswf.swf", "mydiv", "300", "120", "9.0.0","", flashvars, params, attributes);
  6. </script>

Luego si por ejemplo deseamos pasarle una variable con el url de un web y además deseamos que no se muestre el menú y que el swf sea transparente tendríamos:

HTML:
  1. <script type="text/javascript">
  2. var flashvars = {url: "www.google.com"};
  3. var params = {menu: "false", wmode: "transparent" };
  4. var attributes = {};
  5. swfobject.embedSWF("myswf.swf", "mydiv", "300", "120", "9.0.0","", flashvars, params, attributes);
  6. </script>

Como pueden ver no es muy complicado de utilizar, es mas podría asegurar que es mas sencillo de utilizar que su predecesor. Además tiene la ventaja que la librería ha sido re-escrita completamente para adecuarse a los nuevos estándares.

Ahora si aún asi se parece complicado utilizar esta librería se ha creado SFWObject Generator el cual es una aplicación que te permitirá mediante un formulario muy intuitivo generar el código que necesitas para insertar flash en tu página.

Mas Información

Posts Relacionados

Enviar email con AS3 y PHP

  • 05/03/2008
  • 12:25 am
  • unijimpe

ActionScript 3 viene con nuevos métodos para el envío y recepción de datos, en esta ocasión les presentamos un ejemplo de como enviar email con AS3 y PHP a semejanza de Enviar email con Flash y PHP pero esta vez actualizando con los nuevos métodos disponibles en AS3.

email-as3.gif

Implementando el Formulario en Flash
Sea que vamos a implementar un formulario de contácto, creamos cuatro campos de texto: txtnombre, txtempresa, txtemail y txtmensaje en los cuales el usuario ingresará sus datos. Además de ello creamos dos MovieClips btenviar y btborrar que servirán para enviar o limpiar el formulario.

Agregando Eventos a los Botones
Lo primero es agregar los eventos para el funcionamiento de los botones, para ello hacemos uso del método addEventListener de la siguiente forma:

Actionscript:
  1. btborrar.addEventListener(MouseEvent.MOUSE_DOWN, onBorrar);
  2. btenviar.addEventListener(MouseEvent.MOUSE_DOWN, onEnviar);
  3.  
  4. function onBorrar(obj:Event) {
  5.     // acción para el botón btborrar
  6. }
  7. function onEnviar(obj:Event) {
  8.     // acción para el botón btenviar
  9. }

Implementando el botón Borrar
Para el botón borrar asignamos a todos los campos del formulario a un texto vacío para de esta forma tener todos los campos limpios.

Actionscript:
  1. function onBorrar(obj:Event) {
  2.     txtnombre.text = "";
  3.     txtempresa.text = "";
  4.     txtemail.text = "";
  5.     txtmensaje.text = "";
  6. }

Implementando el botón Enviar
El presionar el botón Envíar, se tienen que enviar los datos de los campos como variables a un script del servidor que encargue del envío del correo (En nuestro caso mail.php). Para ello hacemos uso de las clases URLVariables que permitirá definir las variables a enviar, URLRequest que permite definir a donde se enviaran los datos y bajo que método y URLLoader que permite hacer el envío de datos y la detección de este proceso.

Actionscript:
  1. function onEnviar(obj:Event) {
  2.     // variables a enviar
  3.     var urlVars:URLVariables = new URLVariables();
  4.     urlVars.nombre = txtnombre.text;
  5.     urlVars.empresa = txtempresa.text;
  6.     urlVars.email = txtemail.text;
  7.     urlVars.mensaje = txtmensaje.text;
  8.     // opciones para el envío
  9.     var urlRequ:URLRequest = new URLRequest("mail.php");
  10.     urlRequ.method = URLRequestMethod.POST;
  11.     urlRequ.data = urlVars;
  12.     // envío y detección de la respuesta
  13.     var urlLoad:URLLoader = new URLLoader();
  14.     urlLoad.load(urlRequ);
  15.     urlLoad.addEventListener(Event.COMPLETE, onSendComplete);
  16.     urlLoad.addEventListener(IOErrorEvent.IO_ERROR, onSendError);
  17. }

Como se observa hemos agregado dos detectores de eventos para mostrar un mensaje de texto de acuerdo a la respuesta del proceso. Para ello implementamos los dos detectores.

Actionscript:
  1. function onSendComplete(obj:Event) {
  2.     txtestado.text = "Mensaje Enviado";
  3. }
  4. function onSendError(obj:Event) {
  5.     txtestado.text = "Mensaje Fallido";
  6. }

Finalizando
Unimos todos los bloques de código que hemos desarrollado para obtener nuestro script en AS3 que permitirá el envío de los datos del formulario al script mail.php que se encargará del envío de correo.

Actionscript:
  1. btborrar.addEventListener(MouseEvent.MOUSE_DOWN, onBorrar);
  2. btenviar.addEventListener(MouseEvent.MOUSE_DOWN, onEnviar);
  3.  
  4. function onBorrar(obj:Event) {
  5.     txtnombre.text = "";
  6.     txtempresa.text = "";
  7.     txtemail.text = "";
  8.     txtmensaje.text = "";
  9. }
  10. function onEnviar(obj:Event) {
  11.     var urlVars:URLVariables = new URLVariables();
  12.     urlVars.nombre = txtnombre.text;
  13.     urlVars.empresa = txtempresa.text;
  14.     urlVars.email = txtemail.text;
  15.     urlVars.mensaje = txtmensaje.text;
  16.    
  17.     var urlRequ:URLRequest = new URLRequest("mail.php");
  18.     urlRequ.method = URLRequestMethod.POST;
  19.     urlRequ.data = urlVars;
  20.    
  21.     var urlLoad:URLLoader = new URLLoader();
  22.     urlLoad.load(urlRequ);
  23.     urlLoad.addEventListener(Event.COMPLETE, onSendComplete);
  24.     urlLoad.addEventListener(IOErrorEvent.IO_ERROR, onSendError);
  25. }
  26.  
  27. function onSendComplete(obj:Event) {
  28.     txtestado.text = "Mensaje Enviado";
  29. }
  30. function onSendError(obj:Event) {
  31.     txtestado.text = "Mensaje Fallido";
  32. }

Para ver en detalle como se envía correo con PHP, pueden leer Envíar E-mail con PHP. Pueden ver el ejemplo funcionando en mailas3 y finalmente pueden descargar los archivos fuente que incluye el script para el envío de correo en PHP.

Posts Relacionados