miércoles, 15 de septiembre de 2010

jQuery - Agregando parámetros a links existentes

Hace poco me encontré ante un problema en un sitio que estaba trabajando, y era que había muchísimos links, los cuales necesitaban un parametro adicional para evitar el cache de la página.


Se que hay parametros del html para evitar esto, pero los coloque, pero seguía con el mismo problema. Así que me puse a pensar en otra solución.


Al saber que jQuery puede manipular cualquier parte del documento html, me puse a buscar un poco al respecto en la documentación de la librería.


Aquí el código: 


$(function(){          
       $('a[href]').each(function(i){
            var currHref = $(this).attr("href");
                       
                if (currHref.charAt(currHref.length - 1) === '?')                           
                    $(this).attr("href",currHref);
                else if (currHref.indexOf('?') > 0)                
                    $(this).attr("href",currHref+"&rand="+getRandom());
                else                  
                    $(this).attr("href",currHref+"?rand="+getRandom());
     });               
});
  



function getRandom(){
        var randomnumber = Math.floor(Math.random()*10000); 
        return randomnumber;
}

Ahora expliquemos que hace esto.

  • $('a[href]').each(function(i){...Codigo...});
Esta linea de código su función será buscar todos los elementos anchor dentro del documento, e iterar uno por uno. Durante esta iteración es donde se trabajara para agregarle lo que necesitamos.

  • var currHref = $(this).attr("href");
Ahora almacenaremos en una variable el contenido href de nuestro link.

  •  if (currHref.charAt(currHref.length - 1) === '?')
    $(this).attr("href",currHref);
Ahora buscaremos la posición en donde se encuentre el signo "?" si este nos da un valor -1, quiere decir que no tenemos este signo en nuestro link.


  • else if (currHref.indexOf('?') > 0)                
        $(this).attr("href",currHref+"&rand="+getRandom());
     else                  
        $(this).attr("href",currHref+"?rand="+getRandom());

Por último será agregar el parámetro que queremos agregar a todos nuestros links.


Pero que pasa si en los href utilizas javascript:tufuncion(); pues es un hecho que marcaria error el script, para corregir esto, tendríamos que agregar unas cuentas lineas más de código y quedaría solucionado.


Quedaría:



$(function(){                                      
       $('a[href]').each(function(i){
            var currHref = $(this).attr("href");
            var isAfunction = currHref.substring(0,10);              
            if(isAfunction == "javascript"){                
                $(this).attr("href",currHref);
            }else{
                if (currHref.charAt(currHref.length - 1) === '?')                           
                    $(this).attr("href",currHref);
                else if (currHref.indexOf('?') > 0)                
                    $(this).attr("href",currHref+"&randFert="+getRandom());
                else                  
                    $(this).attr("href",currHref+"?randFert="+getRandom());
            }
     });               
});

Lo que esta en negritas seria nuestro nuevo resultado. Solo buscamos la cadena javascript para evitar que concatene en ese anchor, nuestro nuevo parametro.



Encontré un link donde ya estaban trabajando en ese problema.


http://stackoverflow.com/questions/2667551/add-parameter-to-links-on-page-using-jquery


Probé el código que ahí estaban trabajando, pero no funciono.


Espero esto te sirva.

Nueva Interfaz de Usuario en Twitter

Twitter ha presentado las nuevas funcionalidades e Interfaz que tendrá su plataforma web. Para muchos(incluyéndome)  quisieran ya usar lo nuevo que llegará en un par de semanas, ya que como es costumbre de Twitter, toda mejora se esparce a todos los usuarios poco a poco.

En su blog, hacen mención de 4 puntos principales de cambios en la web, estos son:
  • Nuevo Diseño
De lo que se ve en el diseño en el video, se ve que la usabiliad que le dieron al sitio realmente es sorprendente, se ve un TimeLine donde el scroll de twits no tendrá fin, a menos que llegas al primer twit de tu TimeLine.

  • Contenido Externo
Ahora al agregar contenido externo a los Twits, tales como videos de Youtube,Vimeo o Imagenes de Flickr o TwitPic, estas podrán ser visualizadas sin salir del sitio. Esta funcionalidad si no me equivoco, empezó a introducirla Brizzly en su plataforma para Twitter.

  • Información Pertinente
Ver información del twit relacionada con su autor, tema, @replies , incluso la ubicación del twit.

  • Mini Perfiles
Esta funcion ya estaba incorporada en esta versión pero de una manera más compacta, y era pasar el cursor sobre el nick el usuario para ver más información del mismo.
Ahora con dar click (adios al mouseover) al @nombredelusuario veremos esta misma información pero con un nuevo diseño.

Algo que quisiera resaltar con esta actualización de la interfaz, muchos sitios tales como HootSuite, Brizzly o aplicaciones que se utilizan para Twitter como Twetdeck, Twhirl ,  por citar algunos, pienso que van a tener una baja de usuarios ya que simplemente este Nuevo Twitter se ve genial.  Ahora sólo falta esperar a que la utilicemos y veamos lo que pasa.



martes, 20 de julio de 2010

PFA: PHP para Android



Desde ya hace un buen tiempo, le he tomado mucho gusto por desarrollar con PHP, y tengo la espinita de meterme ya en desarrollos móviles. y he aquí esto que esta saliendo PFA, creo que moverá a bastantes desarrolladores y estoy seguro que va a crecer y volverse oficial.

PFA (PHP for Android) es una extensión desarrollada por una empresa de Bilbao que permitirá desarrollar software escrito con PHP para Android. PFA utiliza la SL4A (Scripting Layer for Android), antes conocida como ASE (Android Scripting Environment), que debe ser previamente instalada en Android. Una vez hecho esto, las aplicaciones creadas con PFA serán capaces de acceder a funciones del API de Android como las relacionadas con el Bluetooth o las ventanas de diálogo.
Via webintenta 

Emocionado? Yo Sí! tu que opinas al respecto?

Más información sobre PFA aquí

viernes, 4 de junio de 2010

Poner una imagen de Fondo en Google.com

Google a puesto en su pagina en ingles, una nueva opción la cual nos permite personalizarla con un fondo.

Esta opción aparece debajo de la barra de búsqueda, cuando aun no la haz usado, una vez que ya la comenzaste a usar, la veras en la parte inferior izquierda de tu pantalla.


Las imágenes que puedes cargar pueden ser de:



El servicio solo esta para Google.com. (Por el momento)

Además le agrega un efecto de fade al momento de cargar la imagen! 

Aqui como la deje yo.



Pruébalo!