Archive for category: Tutoriales

23Sep 2010 7 Comments */?>

Como integrar Twitter @anywhere en 5 minutos

Categories: Tutoriales - Tags:

Twitter anywhere es el nuevo framework de Twitter que tan solo con unas lineas de código javascript puede ser implementando en tu blog o web. A partir de ahora será más fácil todo, desde seguir a una persona (@chifliiiii) tan solo pasando el mouse por encima , activando los hovercards. O simplemente permitir que twiteen desde tu web.
Read more

18Sep 2010 3 Comments */?>

Como añadir css y js a tus plugins de wordpress

Categories: Tutoriales - Tags: ,

Realizando mi plugin de wordpress Test it Yourself descubrí que hay varios métodos para incluir css y javascript con tu plugin.

La diferencia principal de estos métodos es precisamente donde creo que algunos creadores de plugins se equivocan ya que añaden los archivos .css y .js aunque no se este ejecutando su plugin en concreto , ralentizando así la carga de la página y añadiendo código innecesario.

Read more

08Sep 2010 9 Comments */?>

Como crear tu propio Google Instant Search

Categories: Tutoriales - Tags:

Me pareció tan interesante esta nueva función de Google que me dio por probar como hacer para tener mi propio Google instant search.

Lo primero que pense fue en utilizar Ajax autosuggest + un buscador por relevancia pero antes de empezar a mirar me acorde de que Google ofrece su propio buscador gracias a Google AJAX Search API .

Por lo que después de hacer algunas pruebas llegue a crear este Google instant search casero

Read more

13Ago 2010 72 Comments */?>

Actualizar Twitter a traves de PHP y OAuth

Categories: Tutoriales - Tags: ,

Hasta hace poco Twitter permitía la actualización de status a través de un método sencillo mandando usuario , contraseña y mensaje de una sola vez a través de una sencilla función. Hoy en día esto ya no es así y el único modo de interactuar con la API de Twitter es usando OAuth
Read more

02Ago 2010 3 Comments */?>

Como mejorar la velocidad de carga de tu página web

Categories: Recursos, Tutoriales - Tags:

Hoy en día los buscadores están empezando a puntuar la velocidad de carga de las páginas webs para mostrar los diferentes resultados ( engrosando así sus algoritmos para mejorar la experiencia de los usuarios). Hay diversidad de formas de acelerar la carga de una página web pero podemos resumirlas en unas cuantas.

Read more

13Jun 2010 10 Comments */?>

Esquinas redondeadas y degradados con CSS3

Categories: Tutoriales - Tags: , ,

Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1
<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

24May 2010 2 Comments */?>

Como crear un script para GreaseMonkey con JQuery

Categories: Tutoriales - Tags: ,

En mi post anterior prometí que iba a explicar un poco de que trata GreaseMonkey y como lo prometido es deuda aca estamos.

Como bien dice la wikipedia Greasemonkey es una extensión para el navegador Mozilla Firefox e Iceweasel que permite, por medio de pequeñas porciones de código creadas por usuarios, modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio web, hacerlo más usable, añadir nuevas funciones a las páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más.

Estas pequeñas o no tan pequeñas porciones de código estan creadas por diversos usuarios de internet en lenguaje javascript y se les llama user scripts. Los nombres de dichos script tienen el formato xxxxxx.user.js , donde xxxxxx es el nombre que querramos ponerle.

Ahora veamos como es un user script por dentro empezando por la cabezera y sus @

1
2
3
4
5
6
7
// ==UserScript==
// @name          eMessages Timersys  
// @namespace  http://masquewordpress.com 
// @description   eMessages tool to display messages in eRepublik 
// @require        http://direccionweb.com/jquery.js  
// @include        http://ww*.erepublik.com/*
// ==/UserScript==
  • @name :nombre del programa
  • @namespace :web del autor o otra dirección de interes
  • @description :descripción del programa
  • @include : Página web en la cual nuestro script funcionará
  • @require : A diferencia del resto esta no es obligataria y tan solo la debemos usar cuando querramos cargar uno o más archivos externos. En este caso lo voy a usar para cargar JQuery

A partir de la cabezera todo lo que sigue es código Javascript. En nuestro caso podemos usar JQueryya que hemos incluido el archivo en la cabezera metadata.

Además Greasemonkey dispone de su propia API. Con la cual por ejemplo podemos hacer llamada AJAX de forma similar a como lo hacemos con JQuery.

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function(){
				GM_xmlhttpRequest({
	method: 'GET',
      url: 'http://masquewordpress.com/erepublik/ajax_progreso.php?usuario=12',
 
	onload:function(response){
			  $('.column:first').prepend( response.responseText);
 
    }	
	});

Con esta explicación se pueden dar un pequeña idea de como funciona GreaseMonkey. La mayor base de datos de user scripts está en userscripts.org
.
En taringa hay 2 buenos tutoriales para los que quieran empezar: Parte I + Parte II
Documentación de GreaseMonkey (en ingles)