02Ago 2010 3 Comments */?>

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

Categorías: 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.

Seguir leyendo

21Jul 2010 12 Comments */?>

7 códigos JQuery que todos deberían tener

Categorías: JQuery, Recursos - Tags: ,

Hoy les traigo un pequeño recopilatorio de JQuery code snippets que hacen la vida más fácil. Aunque para la mayoría de estos ejemplos existen extensos plugins que hacen lo mismo, con unas simples lineas de código podemos realizar lo mismo y a su vez aprendemos como funciona.

Seguir leyendo

15Jun 2010 1 Comment */?>

JcubeiT – Plugin JQuery para hacer cubos con HTML5

Categorías: JQuery, Plugins jQuery - Tags: , ,

Buenas tardes!! Como ven sigo experimentando y haciendo plugins para JQuery.

Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS.

Su utilización es muy sencilla, tan solo necesitamos 3 objetos ( las caras visibles del cubo) dentro de un objeto contenedor. Dichos objetos pueden ser links , imágenes, otros divs, etc

1
2
3
4
5
<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Una vez que tenemos nuestra estructura HTML armada debemos aplicar el plugin de la siguiente forma:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

Y voila!! Tendremos un cubo perfecto con el cual podremos hacer un poco más original nuestros diseños.

El plugin posee algunos valores por defecto que se pueden cambiar pasando opciones.

  • size:’200px’
  • background: ‘#666’
  • border: true
  • borderColor: ‘#000’
  • rounded: false

Podemos cambiar estos valores pasando las opciones como se suele hacer en JQuery

1
2
3
4
5
var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//o simplemente
$('.cube').JcubeiT({ size:'100px' , border: false});

Jugando con las opciones podremos crear por ejemplo una barra de menu más original

Pueden ver el ejemplo online o descargarse el código desde la página oficial de JQuery

ENGLISH

Hello!As you see im still experiencing and doing plugins for JQuery

Today I did a pretty funny one based on the explanations of lanrat about how to build a cube using new CSS properties.

Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a container object. Such objects could be links, images, other divs, etc.

1
2
3
4
5
<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Once we have our HTML structure we have to apply the plugin like this:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

And voila! We will have a perfect cube to be a little more original in our designs.

The plugin has some defaults values that can be changed via the options var.

  • size:’200px’
  • background: ‘#666’
  • border: true
  • borderColor: ‘#000’
  • rounded: false

We may change these values from the options as is usually done in JQuery

1
2
3
4
5
var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//or just
$('.cube').JcubeiT({ size:'100px' , border: false});

Playing with the options we can create for example a more original menu bar

You can check the online demo or download the plugin from JQuery

13Jun 2010 10 Comments */?>

Esquinas redondeadas y degradados con CSS3

Categorías: 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

28May 2010 5 Comments */?>

Que necesitan ?

Categorías: Recursos - Tags: , , ,

Hola a todos!! En este post no voy a explicar ningun plugin , ni hablar de JQuery , ni juegos , ni nada. Tan solo les quiero preguntar a ustedes, mis lectores ¿Que necesitan?

Si hace tiempo que buscan algun tutorial o tienen visto alguno que no deja de todo claro las cosas. Encontraron un plugin raro de JQuery y no le sacan la vuelta a como usarlo. No entienden bien algun tema de PHP o Mysql. Hoy están de suerte, dejen en los comentarios que necesitan y si puedo los iré ayudando.

Eso es todo , un saludo!!!

24May 2010 2 Comments */?>

Como crear un script para GreaseMonkey con JQuery

Categorías: 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)

24May 2010 1 Comment */?>

eMessages Timersys para eRepublik

Categorías: Juegos - Tags: ,

El otro día les hablé de eRepublik y de como habia puesto en marcha un sistema de lotería despues de jugar durante un tiempo.

Hoy vengo con un sistema de mensajes  creado con para Greasemonkey que es perfecto para que los partidos políticos, organizaciones militares, etc se puedan comunicar facilmente y de forma directa con sus miembros. Su nombre es eMessages Timersys y lo pueden descargar en la famosa web userscripts.org

Su funcionamiento es bastante simple. Primero hay que registrarse en http://masquewordpress.com/erepublik/ tan solo eligiendo un usuario , password , title (título , en la foto eMessages Timersys) y un avatar (en la foto el logo de elottery).

Una vez registrado se va a generar el script personalizado que tendrás que compartir con todos los usuarios que quieras que te lean.

Y con estos simples pasos ya tendrás tu sistema de mensajes para comunicarte de forma simple con la gente que quieras.

Una vez más les comento para los que no conozcan este juego prueben a darle una oportunidad. Aunque al principio es un poco lento y aburrido con el tiempo crecen las posibilidades.

En el próximo post les voy a hablar un poco de greasemonkey, de como crear un script y trabajar con JQuery. Y si les gusto el script, donen algunos GOLD 😀

Un saludo!!