Archive for category: Plugins

Un Fondo diferente para cada página

Categories: Plugins, Tips de wordpress - Tags:

Te ha ocurrido que algunos diseños web te gustaría colocar un fondo diferente para cada página o post de WordPress? claro que sin llegar a abusar de esto, pues sería algo fastidioso y poco profesional pero si en algún momento sientes esta necesidad les traigo un plugin maravilloso para esto…. y es gratis.
Read more

WP Network Recent Posts Plugin

Categories: Plugins, Wordpress - Tags:

WP Network Recent Posts Plugin es un plugin de WordPress que crea un Widget fácilmente configurable donde podremos elegir que blogs queremos usar de nuestra red de blogs para mostrar así los posts más recientes.
Este plugin lo realize para un cliente que tiene un comunidad basada en WordPress Mu y Buddypress y me parece buena idea compartirlo con todos ustedes por si alguno lo necesita.
Mi cliente no necesitaba más que esto por lo que esta versión del plugin no trae muchas más opciones de las que pueden ver que son:

  • Título del widget
  • Número de posts a mostrar por cada blog
  • Tamaño de las thumbnails
  • Los blogs a seleccionar de la red de Blogs
  • Mostrar los títulos de los blogs
  • Dar credito al autor del plugin
  • Posibilidad de editar la hoja de estilos del widget desde el settings page
Si le resulta útil a más gente y piden alguna mejora , puede que le añada algo a una próxima versión. Los interesados lo pueden descargar en http://wordpress.org/extend/plugins/wp-recent-network-posts/
Saludos!

 

Plugin jQuery para limitar caracteres en un campo de texto

Categories: JQuery, Plugins, Tutoriales - Tags: , ,

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.
Read more

Introducción a JQuery Template plugin jquery.tmpl.js

Categories: JQuery, Plugins - Tags: , ,

Hace poco el equipo de JQuery anuncio que el  plugin de templates de Microsoft es ahora soportado oficialmente. Esto quiere decir que el propio equipo de JQuery se va a encargar de su desarollo y actualizaciones. A continuación les explico como integrarlo y usarlo de una forma sencilla.

Read more

Test it Yourself – Plugin para wordpress

Categories: Plugins, Wordpress - Tags: ,

Español

Test it Yourself es un plugin para wordpress que te permite agregar un editor en tus post para que los visitantes puedan probar tus ejemplos y ejecutar código de forma fácil.
Pueden ver un ejemplo a continuación:

Es mi primer plugin para wordpress (espero que no el último), si les parece interesante y quieren saber más, sigan leyendo. En unos días voy a explicar cuales son los pasos básicos para hacer un plugin de wordpress.
Read more

JcubeiT – Plugin JQuery para hacer cubos con HTML5

Categories: JQuery, Plugins - 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

JQuery nightMode Plugin

Categories: JQuery, Plugins - Tags: , ,

Download JQuery nightMode Plugin

/////////////////////////ESPAÑOL //////////////////////

Anoche estaba aburrido y me puse a trabajar en un plugin para JQuery ya que nunca habia echo ninguno . Así nacio nightMode Plugin que es simplemente un script chiquitito que cambia el color de las letras y el fondo de pantalla. Con eso logramos ahorrar un poco de energia apagando algunos pixeles de nuestra pantalla y además nos facilita la lectura. Espero que les guste!!

El color tanto de las letras o el fondo se puede cambiar pasando opciones.

Uso:

1
 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6
 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Tan solo cambiar body por cualquier selector válido

También se puede ejecutar con opciones

1
2
3
4
5
 var options={
      color: '#ffffff',
     background:'#ccc'
 }
 $('body').nightMode(options);

Pueden probar como funciona haciendo click en la lamparita que aparece en la parte superior derecha de mi blog :D

Descargar JQuery nightMode Plugin

////////////////////////ENGLISH/////////////////////////////

JQuery nightMode Plugin
its a funny tiny plugin that will allow you to change your background and letter colors for a night mode. Saving energy turning off pixels of your screen and allowing you to have a confortable read .

Letter colors and background can be moddified by options

Ussage:

1
 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6
 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Just change body to any valid selector you wish

Can also be called with options:

1
2
3
4
5
 var options={
      color: '#ffffff',
      background:'#ccc'
 }
 $('body').nightMode(options);

You can try how it works by clicking on the light bulb on the top right corner of my blog :D
Download JQuery nightMode Plugin