Contactable es un plugin para wordpress para feedback y contacto desarrollado en PHP y JQuery (también podemos adaptarlo a cualquier sistema) con un atractivo aspecto y una buena funcionalidad.

Instalar Contactable: Plugin para wordpress para feedback y contacto en Wordpress

• En primer lugar descargamos el plugin Contactable para Wodpress y lo colocamos en el directorio /wp-content/plugins/.
• Activamos el plugin desde la sección de plugins de nuestra administración de Wordpress.
• Establecemos la configuración a nuestro gusto.

Instalar Contactable: Plugin para feedback y contacto en nuestra web

• Colocamos en nuestro HTML una capa con el id contact de la siguiente forma:

  <div id="contact">
  </div>

• Incluye los archivos javascript necesarios para el funcionamiento de Contactable de la siguiente forma:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.validate.pack.js"></script>
  <script type="text/javascript" src="jquery.contactable.min.js"></script>

• Añade este codigo para que convierta la capa contact en el formulario de contacto con el siguiente código:

  $(function(){
   $('#contact').contactable({
    subject: 'A Feeback Message'
   });
  });

• Abre el archivo mail.php y dirígete a la línea 12. Cambia la cadena /*RECIPIENTS EMAIL ADDRESS HERE*/ por tu dirección de correo electrónico tal y como se muestra:

  mail('/*RECIPIENTS EMAIL ADDRESS HERE*/', $subject, $contactMessage);

Con estos pasos tendremos un bonito y útil formulario de contacto y feedback que nos ayudará a dar una mejor imagen a nuestros usuarios y, además, nos servirá para contactar con otros navegantes que nos pueden proponer interesantes cosas o darnos un buen feedback.

Descarga: Contactable: Plugin para wordpress para feedback y contacto
Demo: Demo de Contactable: Plugin para wordpress para feedback y contacto
Fuente: Chica Blogger

Todos sabemos que el tabaco es perjudicial para la salud, desarrollando enfermedades crónicas, por ello hay que evitarlo a toda costa. Los adictos al tabaco lo tienen bastante difícil a la hora de poder dejarlo, pero existe multitud de ayudas para empezar a dejarlo, una de ellas es Quitomzilla, un plugin para Firefox para ayudarnos a dejar de fumar mientras navegamos por Internet.

Se posiciona en la parte inferior derecha de nuestro navegador, para tenerlo visible mientras navegamos o miramos el correo electrónico. Si mantenemos el ratón encima de Quitomzillanos mostrará la cantidad de cigarrillos que no hemos fumado, tiempo que llevamos sin fumar y el dinero que nos hemos ahorrado en estos cigarrillos que no nos hemos llegado a fumar. Obviamente esto solo te ayuda psicológicamente, mostrándote cuanto te has ahorrado y el tiempo que llevas sin fumar delante del ordenador. Aunque para dejar de fumar toda ayuda es buena y Quitomzilla puede ser un gran aliado para ayudarnos a dejar de fumar.

Fuente y descarga: Mozilla

Otra medida importante es colocar el atributo nofollow en enlaces internos de nuestra página a los que no nos interese transmitir PR, o que no los indexemos, como es el caso de enlaces de ayuda, o contacto.

En sitios web con muchos enlaces y estructuras algo más complejas, es fácil saltarse algún enlace y no colocarle el atributo correcto. Aquí es donde RelNoDoFollow, un plugin de Firefox para resaltar enlaces nofollow, nos puede ayudar perfectamente. A continuación una imagen demostrativa:

Como bien podemos ver en la imagen, los enlaces que queremos que se sigan (enlaces dofollow) están marcados de un color diferente de los que no queremos que se sigan (enlaces nofollow). De esta forma tenemos una representación visual del comportamiento de los enlaces de nuestro sitio web en este aspecto.

Plugin: Descargar e Instalar RelNoDoFollow: Plugin Firefox para resaltar enlaces nofollow

Una de dichas herramientas de la que os hablo es SEO Doctor, un plugin SEO para Firefox que, al ser plugin y estar integrado en nuestro navegador, nos hace más fácil la labor de testear y diagnosticar nuestro sitio web.

Entre las múltiples utilidades de las que dispone el plugin destacamos las siguientes:

• Puntuación SEO: Una puntuación que determina tu calidad SEO.
• Flujo de PR: Determina el flujo de PR, según si está más conservado en tu sitio o no.
• Links Salientes; Links Totales: Número de enlaces salientes frente al número de enlaces totales de la página.
• Visitas: Visitas diarias según el ranking de compete.com.
• Menú de más información: En cualquier lugar de la barra de diagnístico de SEO Doctor, podemos clicar con el botón derecho de nuestro ratón y tener un menú con muchas más opciones. Entre ellas destacamos la información de dominio, páginas indexadas, Ranking de Alexa, etc.

Sin duda es un sensacional plugin que nos ayudará a tener mejor controlado el SEO on page de nuestra web, algo muy de agradecer.

Fuente: CodigoGeek

En esta versión 1.3.0 beta para Google Chrome no sustituirá la herramienta de desarrollo que ya está en Google Chrome, sino tan sólo es para utilizarla en combinación con ella. Firebug lite contiene la característica habitual de poder inspeccionar elementos HTML con nuestro ratón y modificar las propiedades de nuestros elementos, haciendo la edición de páginas Web realmente cómoda.

Sin duda este añadido a Google Chrome convierte a este navegador cada vez más en unos de mis preferidos, por su simpleza y velocidad en cargar páginas Web. Pienso que una vez pasado un tiempo y dispongamos de una gran colección de buenas extensiones el futuro de Firefox peligrará y mucho.

Fuente y descarga de la extensión: Google Chrome

¿Que necesitamos para empezar a crear nuestro Widget?

Necesitamos ante todo disponer de un theme que soporte Widgets, tal y como aprendimos en el tutorial “Wordpress: Crear theme para usar Widgets“. Recomiendo hacer las pruebas en nuestro servidor local por las posibles incidencias que podrían ocurrir mientras realizamos nuestro Wiget y una vez terminado se actualizaría en el servidor de producción. Podremos continuar cuando tengamos un theme que soporte Widgets.

Nombre para nuestro Widget

Como hemos comentado anteriormente, nuestro Widget mostrará los editores del Blog con sus últimas X entradas publicadas. Un nombre por ejemplo seria “Últimos post por autor”. Tendremos que comprobar si dicho nombre existe ya para otro plugin, para evitar posibles incompatibilidades si tenemos los dos instalados. Podríamos usar el buscador de plugins de Wordpress o el propio Google para verificar si existe un plugin con el mismo nombre.

Empezamos a crear el Widget

Comenzamos creando un directorio con el nombre de nuestro Widget en el directorio “wp-content/plugins/”. Aquí es donde Wordpress almacena los plugins. Recomiendo crear un directorio siempre que se crea un Widget, aunque éste contenga sólo un archivo, ya que más tarde podrías incorporarle más archivos y te verías obligado a tocar porciones del código del Widget. En nuestro caso vamos a crear el directorio “ultimos-post-por-autor” y dentro de él un archivo llamado “widget-ultimos-post-por-autor.php”

La cabecera de nuestro Widget

<?php
/*
Plugin Name: NOMBRE_DE_NUESTRO_PLUGIN
Plugin URI: URL_DONDE_EXISTE_INFORMACION_DE_NUESTRO_PLUGIN
Description: DESCRIPCION_DE_NUESTRO_PLUGIN
Version: VERSION_DEL_PLUGIN
Author: AUTOR_DEL_PLUGIN
Author URI: URL_DEL_AUTOR
*/
?>

Toda esta información se utilizará para identificar nuestro Widget en la administración de plugins para Wordpress, como podemos ver en la siguiente imagen.

Estructura principal de nuestro Widget

// Cuando se inicializa el widget llamaremos al metodo register de la clase Widget_ultimosPostPorAutor
add_action( "widgets_init", array( "Widget_ultimosPostPorAutor", "register" ) );

// Clase Widget_ultimosPostPorAutor
class Widget_ultimosPostPorAutor
{
    // Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
    function control()
    {
        echo "Hola, soy el panel de control.";
    }

    // Metodo que se llamara cuando se visualize el Widget en pantalla
    function widget($args)
    {
        echo $args["before_widget"];
        echo $args["before_title"] . "Editores de " . get_option( "blogname" ) . $args["after_title"];

        echo "Hola soy tu Widget";
        echo $args["after_widget"];
    }

    // Meotodo que se llamara cuando se inicialice el Widget
    function register()
    {
        // Incluimos el widget en el panel control de Widgets
        register_sidebar_widget( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "widget" ) );

        // Formulario para editar las propiedades de nuestro Widget
        register_widget_control( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "control" ) );
    }
}

Una vez guardado nos dirigiremos al Panel de Control de plugins y lo activaremos. Una vez activado, vamos a las opciones de los Widgets, dentro del submenú apariencia, y lo añadiremos a nuestro sidebar. En nuestro template aparecerá nuestro Widget.

Datos dinámicos para nuestro Widget

Se añadirá fuera de la clase del Widget las llamadas a “register_activation_hook” y “register_deactivation_hook”, que serán las encargadas de llamar a los métodos de la clase cuando se active o desactive el plugin. Tambien se añadirán dos nuevas funciones llamadas “activate” y “deactivate” que serán para los métodos llamados.

// Cuando se active el plugin se llamara al metodo activate de la clase Widget_ultimosPostPorAutor
// donde añadiremos los argumentos por defecto para que funcione el plugin
register_activation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "activate" ) );

// Cuando se desactive el plugin se llamara al metodo desactivate de la clase Widget_ultimosPostPorAutor
// donde se eliminaran los argumentos anteriormente guardados, para tener una DB limpia
register_deactivation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "deactivate" ) );
function activate()
{
    // Argumentos y sus valores por defecto
    $aData = array( "SIZE_AVATAR" => 50, "NUMERO_POST" => 5 );

    // Comprobamos si existe opciones para este Widget, si no existe las creamos por el contrario actualizamos
    if( ! get_option( "ultimosPostPorAutor" ) )
        add_option( "ultimosPostPorAutor" , $aData );
    else
        update_option( "ultimosPostPorAutor" , $data);
}

function deactivate()
{
    // Cuando se desactive el plugin se eliminaran todas las filas de la DB que le sirven a este plugin
    delete_option( "ultimosPostPorAutor" );
}

Como se puede apreciar, hemos creado dos datos que son dinámicos para nuestro Widget. Uno llamado “SIZE_AVATAR” que será el que contenga el tamaño para el avatar de los editores. Y otro llamado “NUMERO_POST” que es el encargado de mostrar el número máximo de posts por editor.

Crear el panel de control para nuestro Widget

Usaremos el método control para la visualización y actualización de las opciones de nuestro Widget.

// Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
function control()
{
    $aData = get_option( "ultimosPostPorAutor" );

    // Mostraremos un formulario en HTML para modificar los valores del Widget
    ?>
        <p>
            <label>Tamaño del avatar:</label>
            <input name="ultimosPostPorAutor_SIZE_AVATAR" type="text" value="<?php echo $aData["SIZE_AVATAR"]; ?>" />
        </p>
        <p>
            <label>Numero máximo de post:</label>
            <input name="ultimosPostPorAutor_NUMERO_POST" type="text" value="<?php echo $aData["NUMERO_POST"]; ?>" />
        </p>
    <?php

    // Si se ha enviado uno de los valores del formulario por POST actualizaremos los datos
    if( isset( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] ) )
    {
        $aData["SIZE_AVATAR"] = attribute_escape( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] );

        $aData["NUMERO_POST"] = attribute_escape( $_POST["ultimosPostPorAutor_NUMERO_POST"] );

        update_option( "ultimosPostPorAutor", $aData );
    }
}

En el Panel de Control de Widgets, dentro de “apariencia”, nos mostrará el sidebar con nuestro Widget en él. Si desplegamos las opciones podremos editarlas como se aprecia en la imagen a continuación.

Funcionalidad del Widget

<?php
function widget($args)
{
	// Variables
	$aData     = get_option( "ultimosPostPorAutor" );
	$aUsuarios = null;
	$aUsuario  = null;
	$aPosts    = null;
	$aPost     = null;
	global $wpdb;

    // Cargamos en un array todos los editores del blog
    $aUsuarios = $wpdb->get_results( "SELECT ID, user_login, user_nicename, user_email FROM " . $wpdb->users . " WHERE user_login != "admin"" );

    // Recorremos todos los editores
    foreach( $aUsuarios as $aUsuario )
    {
        echo "<li>
				  <a class="avtr" rel="nofollow" title="Avatar del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">
					 " . get_avatar( $aUsuario->user_email, $aData["SIZE_AVATAR"] ) . "
				  </a>
				  <div>
					  <a rel="nofollow"  title="Perfil del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">" . $aUsuario->user_login . "</a>
					  <a onclick="document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display = (document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display == \"block\" ? \"none\" : \"block\");" class="mas" href="javascript:void(0);"><span>[+]</span> Ver las últimas entradas publicadas</a>
					  <div class="post" id="slde-edit" . $aUsuario->user_nicename . "">
						  <ul>";

        // Cargamos en un array todos los post de un editor
        $aPosts = $wpdb->get_results( "SELECT ID, post_title, post_date, comment_count
                                       FROM " . $wpdb->posts . "
                                       WHERE post_status = "publish" and post_type = "post" AND post_author = " . $aUsuario->ID . "
                                       ORDER BY post_date DESC
                                       LIMIT " . $aData["NUMERO_POST"] );

        // Recorremos todos los post del editor
        foreach( $aPosts as $aPost )
        {
            // Obtenemos el permalink del post
            $sSlug = get_permalink( $aPost->ID );

            echo "<li>
                      <a title="" . $aPost->post_title . "" href="" . $sSlug . "">" . $aPost->post_title . "</a>
                      <span>" . date( "d/m/Y", strtotime( (string)$aPost->post_date ) ) . " - <a title="Comentarios para " . $aPost->post_title . "" href="" . $sSlug . "#comments">" . $aPost->comment_count . " comentario" . ($aPost->comment_count > 0 ? "s" : "") . "</a></span>
                  </li>";
        }

        echo "</ul></div></div></li>";
    }
}
?>

En el método “widget” hemos añadido la funcionalidad del Widget, es decir mostrar los editores de Blog junto con sus X post que han escrito. Como dije antes en el código fuente del Widget que podéis descargaros al final del tutorial se encuentra todo documentado para no perderse.

Hemos aprendido a crear un Widget, usar el objeto “$wpdb” de Wordpress para realizar nuestros consultas y añadir opciones al Panel de Control de Widgets en nuestra administración de Wordpress. Ésta es la forma que he utilizado yo para crear el Widget “últimos post por autor”, seguramente existan muchos caminos mejores o peores para crearlo, así que eres libre de modificarlo a tu antojo. Se pueden añadir más funcionalidades como por ejemplo un efecto slide para visualizar los post, como se puede ver en Ruta Relativa. Si usas este Widget puedes modificar el CSS dentro del plugin.

Enlace: Demo Widget últimos post por autor
Enlace: Descargar Widget últimos post por autor
Fuente: Valums

Mozilla ha presentado la nueva versión de su software Personas, la versión 2.0. Ésta incluye notorias actualizaciones como la inclusión de favoritos, lo más nuevo o reciente, e incluso una categorización de los skins. Despues de ocho meses de trabajo y con ayuda del feedback de usuarios han podido sacar esta nueva versión. Pero antes…

¿Que es Personas de Mozilla Firefox?

Es un plugin creado por los de Mozilla Labs que pretende crear una mayor experiencia de usuario en la web, proponiendo cambiar el aspecto del navegador por uno personal que diseñemos o escogiendo uno de los más de 35.000 diseños disponibles en la web. Si usas Mozilla Firefox, puedes pasarte por la web oficial de Personas e instalarte el plugin, ver y compartir los diseños o skins.

Personas de Mozilla Firefox

Aquí os dejo una imagen de como sería el aspecto del plugin Personas de Firefox y, además, un video explicativo acerca del proyecto Personas de Mozilla Firefox, explicando paso a paso las cualidades de este plugin.:

Haz click en la imagen para ampliar

Algunos usuarios ya disfrutan del plugin WpMooSnow que incluye en tu blog de Wordpress un bonito efecto nieve, pero sólo funcionaba para los usuarios de la librería para javascript llamada Mootools. Existe un gran número de usuarios que utilizan en lugar de Mootools la librería JQuery, y es por eso por lo que hemos querido adaptar este plugin para esos usuarios.

Ya, pero yo uso Mootools, ¿que hago?

Dirígete al post donde hablamos sobre el plugin y ahí te informamos de todo.

Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en JQuery para Wordpress funcionando.

¿Como lo instalo?

• Descomprime el archivo .zip
• Sube el directorio wpmoosnow al directorio de plugins “/wp-content/plugins/”.
• Activa el plugin desde el apartado “Plugins” de la administración de Wordpress.
• Ahora puedes cambiar las opciones desde el menú WpMooSnow que aparece en el menú Opciones.
• La opción más importante es la de “Contenedor donde se mostrarán los copos de nieve”, en la que tendrás que insertar el ID de la capa en la que quieras que apareza el efecto nieve. Si no indicas nada en el campo ID, se mostrará automáticamente en toda la web, de modo que es la opción más recomendable si no entiendes este punto. Si tienes dudas acerca de esto escríbenos un comentario y te ayudaremos.
• El resto de opciones puedes dejarlas tal y como están, pero si te apetece puedes trastear y configurar a tu gusto el efecto de los copos de nieve.
• Selecciona si usas Mootools o JQuery.

Descargar WpMooSnow: Plugin efecto nieve en JQuery para Wordpress

Descargar

Ya estamos en época estival, en breve comienza la Navidad y lo que ello conlleva: compra de objetos decorativos para el hogar, el árbol e incluso los hay que visten sus mascotas para la ocasión. Vuestro blog no podría ser menos y ahora podrá lucir un aspecto más Navideño. Hemos realizado un plugin efecto nieve en Mootools para Wordpress con un efecto de copos de nieve cayendo desde el “cielo”.

¿Pero ya existen muchos plugins efecto nieve, no?

Si es verdad, pero este efecto nieve en Mootools está actualizado a la última version de Mootools 1.2.4 por Dimitar Christoff y creado por Rutarelativa para Wordpress de forma que sea mucho más fácil la instalación y además es muy configurable. Por eso este este es tu plugin perfecto para mostrar efecto nieve en Wordpress y tener tu blog listo para las Navidades.

Puntos a favor de WpMooSnow

• Instalación sencilla con tan sólo un par de clics.
• Configuración en el panel de administración donde es posible cambiar colores, fuentes y efectos.
• Está testeado y es compatible con los exploradores IE6+, Firefox 2.0+, Opera 9+, Safari Windows 3.2.1+ y Google Chrome 2.0+.

Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en Mootools para Wordpress funcionando.

¿Como lo instalo?

• Descomprime el archivo .zip
• Sube el directorio wpmoosnow al directorio de plugins “/wp-content/plugins/”.
• Activa el plugin desde el apartado “Plugins” de la administración de Wordpress.
• Ahora puedes cambiar las opciones desde el menú WpMooSnow que aparece en el menú Opciones.
• La opción más importante es la de “Contenedor donde se mostrarán los copos de nieve”, en la que tendrás que insertar el ID de la capa en la que quieras que apareza el efecto nieve. Si no indicas nada en el campo ID, se mostrará automáticamente en toda la web, de modo que es la opción más recomendable si no entiendes este punto. Si tienes dudas acerca de esto escríbenos un comentario y te ayudaremos.
• El resto de opciones puedes dejarlas tal y como están, pero si te apetece puedes trastear y configurar a tu gusto el efecto de los copos de nieve.
• Selecciona si usas Mootools o JQuery.

Descargar WpMooSnow: Plugin efecto nieve en Mootools para Wordpress

Descargar

Ya, pero yo uso Jquery, ¿que hago?

Dirígete al post donde hablamos sobre el plugin y ahí te informamos de todo.

Navegando por Delicious he encuentrado un plugin para realizar una galería en Jquery que muestra imágenes en pantalla completa que incluye un sistema de navegación con un diseño simple y claro. Para todos los que busquéis una galería de imágenes en Jquery, esta es una buena opción a tener en cuenta. Lo que realiza es:

• Redimensiona las imágenes al tamaño de la ventana del navegador para que se visualizen en pantalla completa.
• Temporizador entre imágenes con transiciones y precarga entre ellas.
• Control de navegación para realizar pausa / play / hacia delante y atrás

A mi personalmente me encanta, el único problema que le veo es el gran consumo de CPU al pasar de una imagen a otra; supongo que la resolución de pantalla dependerá de esto al tener que redimensionar las imágenes al tamaño del explorador. Podéis ver la demo vosotros mismos para poder decidir antes de añadirlo a vuestros proyectos.

Fuente: Supersized: Galería de imágenes en Jquery.