Micaela 24 de Noviembre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

Guardar un registro del texto seleccionado en tu web con Mootols o jQuery

PHP, AJAX, buscador, recursos, javascript, jQuery, texto, java, mootools, mouseup

mootoolsUna técnica muy utilizada últimamente es la grabación con AJAX del texto seleccionado, lo que puede resultar muy útil para detectar qué términos de nuestra web comparten o copian y pegan en los buscadores nuestros visitantes.

En el artículo de hoy hemos duplicado esa funcionalidad utilizando una librería javascript MooTools y otra librería JavaScript jQuery. ¡Utiliza la que te resulte mejor!

MooTools

PLAIN TEXT
  1. window.addEvent('domready',function(){
  2.     //gets the selected text
  3.     var getSelection = function() {
  4.         return $try(
  5.             function() { return window.getSelection(); },
  6.             function() { return document.getSelection(); },
  7.             function() {
  8.                     var selection = document.selection && document.selection.createRange();
  9.                     if(selection.text) { return selection.text; }
  10.                     return false;
  11.               }
  12.         ) || false;
  13.     };
  14.     //event to listen
  15.     var selectRequest = new Request({
  16.         url: 'ajax-selection-copy.php',
  17.         method: 'post'
  18.     });
  19.     $('content-area').addEvent('mouseup',function(e) {
  20.         var selection = getSelection();
  21.         if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
  22.             selectRequest.send('selection=' + encodeURI(selection));
  23.         }
  24.     });
  25. });

El primer paso es intentar tomar el texto seleccionado durante el mouseup (es decir, durante el momento en que el mouse se posiciona sobre el texto) con nuestro contenedor designado. Si encontramos una selección de texto, disparamos una petición AJAX a un script PHP que guardará la selección del texto.

jQuery

PLAIN TEXT
  1. /* attempt to find a text selection */
  2. function getSelected() {
  3.     if(window.getSelection) { return window.getSelection(); }
  4.     else if(document.getSelection) { return document.getSelection(); }
  5.     else {
  6.         var selection = document.selection && document.selection.createRange();
  7.         if(selection.text) { return selection.text; }
  8.         return false;
  9.     }
  10.     return false;
  11. }
  12. /* create sniffer */
  13. $(document).ready(function() {
  14.     $('#content-area').mouseup(function() {
  15.         var selection = getSelected();
  16.         if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
  17.             $.ajax({
  18.                 type: 'post',
  19.                 url: 'ajax-selection-copy.php',
  20.                 data: 'selection=' + encodeURI(selection)
  21.             });
  22.         }
  23.     });
  24. });

El código MooTools, traducido a jQuery. Básicamente realiza las mismas acciones.

PHP

PLAIN TEXT
  1. if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
  2.     mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
  3. }

Este código PHP es muy primitivo. Dependiendo de la programación de tu sistema (seguridad, framework PHP, configuración, etc.) preferirás implementar algunas medidas adicionales para prevenir ataques en este script.

Haz clic aquí para ver la demostración en MooTools »

Haz clic aquí para ver la demostración en jQuery »

Grabar selecciones de texto es una gran forma de descubrir qué tópicos o términos interesan más a tu audiencia.

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión