Inserta tus fotos de Instagram en tu web

Estoy en pleno proceso de rediseño de la web, y una de los primeros problemas que me he encontrado es al intentar integrar mis imágenes de instagram en mi web.

Hay varias opciones:

  1. Utilizar uno de los plugins de wordpress que insertar las fotos de Instagram.
  2. Hacer un componente propio que haga exactamente lo que quieras.

En mi caso, opté por la segunda opción. Encontré un código jquery  + php muy sencillo que hace este proceso. El problema ha sido el registrar mi aplicación en Instagram para poder obtener el access token, y sobre todo me ha costado obtener mi numero de usuario. Ya lo sé, es una tontería, pero nunca antes me había tenido que pelear con ello.

Para registrarla he seguido los pasos del articulo de Dan Pavitt:

var access_token = location.hash.split('=')[1];

if (location.hash) {

} else {
    location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
}

Es necesario remplazar [clientid] y  [callbackuri] por el Client ID y la Redirect URI que te aparece al dar de alta al cliente.

Este proceso solo debes de ejecutarlo una vez, y solo vale para obtener un token de acceso que te permitirá obtener tus fotos de Instagram.

El último datos que necesitaremos será nuestro identificador de usuario. En un principio yo pensé que será el Client ID que nos devolvió nuestro cliente, pero resulta que no.

Yo he usado esta aplicación de Instagram para obtener mi id de usuariohttp://yvesvanbroekhoven.github.com/get-your-instagram-user-id/ pero entiendo que tiene que haber una forma mas sencilla de hacerlo.

Una vez que tengamos toda esta información ya podremos utilizar el código que nos devolverá nuestras imágenes:

$(function() {

$.ajax({
  type: "GET",
  dataType: "jsonp",
  cache: false,
  url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
  success: function(data) {
    for (var i = 0; i < 6; i++) {
      if(data.data[i]) { // to prevent a bug with non missing images
         $(".instagram").append("<div class="instagram-placeholder"><a href="' + data.data[i].link + '" target="_blank"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url + '" alt="" /></a></div>");
      }
    }
  }
});
});

Evidentemente tendremos que remplazar [userid] y [access_token] por los datos correctos.

Aquí podéis ver en funcionamiento este ejemplo:

Ahora ya solo me queda el integrar estas imágenes con un slider chulo y listo. Pero eso es otra historia.

Mostrar imágenes por tag

Tal como me ha comentado charlescuellar, tambien podemos obtener las imágenes de instagram por tag, en lugar de por usuario.

Tan solo es necesario remplazar la url de llamada a la API por esta:

</pre>
https://api.instagram.com/v1/tags/[tag]/media/recent/?access_token=[access_token]
<pre>

iosSlider: Responsive and touchable Carousel

Después de llevar todo el día buscando un buen carrusel para usar en mis proyectos he conseguido encontrar lo que buscaba:

  • Un carrusel que se adapte en tamaño, para poder ser usado en los proyectos de responsive design.
  • Válido tanto para ordenadores de escritorio como para terminales táctiles (móviles y tablets)
  • Que las animaciones se hicieran con el acelerador hardware de CSS3 para que funcione de una manera más fluida.
  • Opensource

Finalmente me he decantado por iosSlider . Tiene muy buena pinta, y está muy bien documentado.

Todavía no me he “peleado” con el, pero ya me muero de ganas por meterle mano.

Otra alternativa también muy atractiva era TouchCarousel, pero el hecho de que sea un plugin de pago (aunque tan solo son 10$) me ha hecho decantarme por iosSlider.

jQuery Event Calendar Plugin – english version

I’m trully glad to publish today my first jQuery plugin. It has taken a big amount of hours of hard work, but as long as I see the results, I realize that it has all been worth it.

DEMO Page / jQuery Event Calendar Plugin examples | jQuery Event Calendar Plugin download

Introduction


jQuery Event Calendar Plugin is another plugin to show events in a calendar directly in your web app.

The presentation of the events is made in a really comfortable way, as long as you can see all the following events at eyesight, or just a particular date event (displaying the whole month or just a day).

This widget shows the current day and all the other days that have events scheduled.

So… just another calendar plugin

Well, it is, but it also goes far beyond.

There are several jQuery plugins to visionate and manage calendars and events:

But… even when we had done a great research, none of them adjusted with the needs that we have in our projects, and if they did, they were prepaid plugins that we couldn’t nor wanted to use in our OpenSource projects.

In particular, this plugin has been created for an OpenSource project that we are developing in  Paradigma Tecnológico for agile project management using Scrum, a project I’ll show you in a very short period of time.

Also, it has been develop for responsive design, so you can work fine with it in desktop, tablet and even smartPhones

How does it work?

The first thing we have to know is how the plugin recieves the events. There are some methods to communicate between the plugin and the events, but in all cases the information has to be represented as a json with the following structure:

The plugin is highly customizable, so you are able to modify it through these parameters:

  • Send the json to the plugin in an inline JavaScript function or on an extern file.
  • Cache the received events or make new calls on every date change.
  • Change the calendar size to every width we need (it is 100% responsive, it is 100% fluid)
  • Supports all languages
  • Limit the number of events to show
  • Weeks start on Sundays or Mondays
  • Show the days in a calendar view, by weeks or all the month in a single line
  • Show the event description, or not
  • Open the event links in a new window, or not
  • Change the velocity of the animation when changing dates
  • Show the events inside a panel with scroll to avoid the widget from changing its size

We encourage you to visit the demo page of the plugin to see all its posibilities in action, and the explanation of each parameter that has been used.

And, if you like it, don’t doubt on downloading the plugin

And now, what?

I’m thinking on improving the plugin, so any kind of bugs you find on it will be highly welcomed.

Following tasks:

  • timeago integration
  • Make the plugin 100% responsive: addapt to its content as it already does, but also to the browser size changes. Already done

jQuery Event Calendar Plugin

Hoy tengo el gustazo de hacer publico mi primer plugin jQuery. Han sido unas cuantas horas de trabajo, pero creo que el resultado merece la pena.

Página de DEMO/EJEMPLOS de jQuery Event Calendar Plugin | DESCARGA de jQuery Event Calendar Plugin

Introducción a jQuery Event Calendar Plugin

jQuery Event Calendar Plugin es otro plugin más para visionar eventos en un calendario en tu aplicación web.

La representación de los eventos es realmente cómoda, ya que de un simple vistazo vemos los próximos eventos que tengamos, o los eventos de una fecha en particular (mes completo o día).

El widget nos muestra tanto el día actual, como los días en los que hay eventos.

Pues vaya…. otro plugin más de calendario

Pues si y no. Me explico.

Es cierto que hay montones de plugins jQuery para la gestión y visionado de calendarios y eventos:

Pero lo cierto es que por unos motivos u otros ninguno de ellos se adaptaba a las necesidades que teníamos en nuestros proyectos, y si se adaptaban, eran plugins de pago que no podíamos ni queríamos usar en nuestros proyectos OpenSource.

En particular el desarrollo de este plugin ha sido creado para un proyecto OpenSource que estamos desarrollando en Paradigma Tecnológico para la gestión de proyectos ágiles con Scrum, y del cual pronto os hablaremos.

¿Cómo funciona?

Lo primero que debemos conocer es como recibe el plugin los eventos. Hay varios métodos de comunicación entre el plugin y los eventos, pero en todos los casos la información debe de ser representada en un json con la siguiente estructura:

El plugin es altamente configurable, pudiendo modificarlo a través de parámetros:

  • Enviar al plugin el json a través del propio fichero JS, o tenerlo en un fichero externo
  • Cachear los eventos recibidos, o realizar nuevas llamadas con cada cambio de fecha
  • Representar el calendario al tamaño deseado (todavía no es 100% responsive o fluido, pero estamos trabajando en ello para la próxima versión)
  • Posibilidad de traducirlo al idioma deseado
  • Limitar el número de eventos a mostrar
  • Definir el día de comienzo de la semana
  • Mostrar los días en modo calendario por semanas o todo en una sola linea
  • Mostrar o no la descripción de los eventos
  • Abrir los links de los eventos en nueva ventana o no
  • Cambiar la velocidad de animación en el cambio de fechas
  • Mostrar los eventos en un panel con scroll, y así evitar cambios en el tamaño del widget.

Os recomendamos visitar la página de demo del plugin para ver todas las posibilidades en acción, y la explicación de los parámetros usados.

Si os gusta no dudéis en descarse el plugin

¿Y ahora qué?

Pues por mi parte tengo algunas tareas para mejorar el plugin y la intención de resolver todas las incidencias que surjan.

Próximas tareas:

  • Integración del plugin timeago
  • Realizar cambios necesarios para convertir el plugin en 100% responsive: aparte que se adapte al ancho de su contenedor, que eso ya lo hace ahora, que se adapte a los cambios de tamaño del navegador. Ya hecho

Convierte tu WP e-commerce Plugin en multi imagen

Estoy empezando a trastear con el Plugin de WordPress WP e-commerce y de momento me parece muy completo y sencillo.

En la tienda que estoy haciendo necesito que los productos que quiero vender tengan varias imagenes asociadas, y con la versión gratuita de este plugin esta opción esta capada. Podría comprar su version de pago, Gold Cart, que tiene dicha función y solo cuesta 40$, pero he preferido buscarme las castañas por mi cuenta, y tras pelearme un poco con el codigo lo he conseguido.

Tras investigar unas cuantas páginas para ver como podía convertir mi WP e-commerce plugin en multi imagen y ver que ninguna me funcionaba decidi crear una nueva función que me hiciera este trabajo.

Encontré una buena aproximación, pero la estructura de la base de datos ya no era la misma, así que hice unos cambios:

Añadir este codigo en el fichero functions.php

// function to receive all the images related to one product
function get_all_images($product) {
	global $wpdb;
	return $wpdb->get_results( "SELECT guid, menu_order FROM wp_posts WHERE post_type='attachment' AND post_parent=$product ORDER BY menu_order ASC" );
}

Y en la pagina donde se presenta el detalle de mi producto, wpsc-single-product.php añado esto donde se mostraba la imagen individual:

// multimage product hack for e-commerce
if ( function_exists( 'get_all_images' ) ) { // check if function exists
	foreach ( get_all_images(wpsc_the_product_id()) as $product_image )
		{
		echo "<img src='".$product_image->guid."' alt='".wpsc_the_product_title()."' />";
		}
} else {
  // simple image
}

Con estos dos sencillos pasos ya puedes mostrar tantas imagenes como quieras a tus productos en el WP e-commerce Plugin.

Ahora solo queda presentarlo de una manera mas bonito.

¿ Conocéis algún sistema mejor?

HeadJS un script para todos los demás

HeadJS es una librería javscript que tiene multitud de virtudes, pero sobre todas ellas yo destacaría las siguientes:

Cargar Javascript en Paralelo:

HeadJS nos facilita cargar varios javscript en paralelo, pero ejecutarlos en orden.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
    // all done
});

Esto nos permite cargar librerías javascript sin bloquear la página, y reducir el número de peticiones al servidor.

Puede parecer una tontería, pero el cargar los javascript en paralelo puede hacer que nuestra pagina reduzca el tiempo de carga en varios segundos, dando a nuestros usuarios la sensación de que nuestra web es mucho más rápida.

Degración de CSS 3

HeadJS añade clases a la etiqueta HTML, informándonos de la capacidad del navegador para soportar determinadas propiedades de CSS3

/* target CSS for browsers without box-shadow support */
.no-boxshadow .box {
    border: 2px solid #ddd;
}

Diferentes diseños para diferentes dispositivos

Podemos definir diferentes estilos en función del tamaño de la pantalla. Si el usuario redimensiona la pantalla, las reglas CSS cambiarán automáticamente.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

Otras Ventajas

  • También nos permite usar etiquetas de HTML5 aunque el navegador todavía no lo soporte
  • Detección del navegador
  • Es una librería muy ligera. Tan solo pesa 2.5Kb (minimizada y comprimida)

Si queréis conocer en mayor profundidad esta librería os recomiendo leer la documentación desde su web

Uso

Todos los scripts se cargar a través de head.js()

// el caso mas simple.carga y ejecuta un fichero js.
head.js("/path/to/file.js");

// carga un script y ejecuta una function cuando se cargue
head.js("/path/to/file.js", function() {

});

// carga ficheros en paralelo pero ejecutalos en el siguiente orden
head.js("file1.js", "file2.js", ... "fileN.js");

//carga los ficheros  en paralelo y ejecutalos segun se carguen
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

//el ejemplo anterior también se puede poner así
head.js("file1.js").js("file1.js").js("file3.js");

Con head.js() podemos ejecutar javscript antes de que los scripts sean cargados. Esto elimina ese molesto lapso de tiempo que pasa desde que se carga el HTML de la pagina hasta que se ejecuta el $(document).ready()

Organización de Script

// llamar a una funcción después de que todos los scripts hayan sido cargados
head.ready(function() {   });

// llamar a una funcción cuando un determinado fichero sea cargado
head.ready("file2.js", function() {   });

Estos es útil cuando tienes ficheros javasciprt muy grandes, y quieres ejecutar algo antes de que sean cargados.

// head.ready() tambien se puede escribir así

head(function() {   });

Configuración

HeadJS es configurado con un variable global llamada head_conf antes de que el script sea cargador:

<script>
    var head_conf = { screens: [640, 1024, 1280, 1680] };
</script>

<script src="/js/head.min.js"></script>

Conclusión

En definitiva, esta parece una herramienta extremadamente útil y fácil para cargar asíncronamente nuestro javascript. Además aporta otras ventajas, que siendo en mi opinión de menor importancia, pueden ser también de gran utilidad.

Estoy deseando poderlo probar en un proyecto real, y así comprobar de todo lo que es capaz.

Y Vosotros ¿lo habéis probado ya? ¿os ha gustado? ¿conocéis alguna otra alternatíva?

Pods CMS, mejora tu WordPress

Pods es un plugin que convierte tu WordPress en un completo CMS. Cierto que WordPress ya es un CMS, pero se queda un poco limitado con los tipos de contenido que puedes crear.

Existen plugins como Custom Field Template o los propios Custom Fields de WordPress para añadir campos especificos a tus post, y esto está muy bien para muchos casos, pero yo prefiero usar Pods, ya que es mucho mas completo y cambia completamente la forma de trabajar con tus entradas.

Los Custom Fields son muy faciles de implementar, pero pueden ser poco intuitivos cuando nuestros clientes son los que tienen que introducir el contenido en la web. Con Pods haremos la vida mucho más facil a los editores de la web.

INSTALACIÓN

Se instala igual que cualquier otro plugin. Basta con descargar el plugin, descomprimirlo en la carpeta plugins y activarlo.

Puede que tengas que editar el fichero .htaccess para que el plugin funcione bien con las URLs amigables. El plugin te dirá que codigo debes de introducir y donde.

Una vez instalado, se añadirá en el menu izquierdo con los siguientes enlaces:

  • Manage Content: Ver el contenido de las tablas de Pods
  • Pachage Manager: Herramienta de exportación e importación
  • Menu Editor: Te permite crear una estructura de navegación como en las páginas de WordPress

CREAR UN POD

Es conveniente crear un Pod cuando una sección, o incluso una página, requiere campos especificos.

En mi caso, voy a crear un Pod para la sección Portfolio de mi web.

El nombre del pod debe de estar en minúsculas y no tener caracteres especiales ni espacios.

Una vez creado, verás el gestor de Pods, donde pondrás los campos que tendrá esta sección. Por defecto creara un campo “name”, que es obligatorio.

Los tipos de campos diponibles son:

  • Date
  • Number
  • Boolean: Renderiza un checkbox
  • Single Line Text: renderiza un input
  • Paragraph Text: Textarea con botones de formato HTML
  • Code: Campo para introducir código
  • File Upload: Permite añadir ficheros a la WordPress Media Library
  • Permalink: Genera el slug para la entrada
  • Relationship: Permite enlazar la entrada con otra entrada Pod o WordPress (pagina, post, usuario)

Con los atributos, puedes definir el campo como único o requerido.

Puedes añadir tantos campos como sean necesarios. En nuestro caso de ejemplo para el portfolio, añadiremos los siguientes:

  • intro: Single Line text
  • description: Paragraph text
  • image: Fule upload
  • tasks: Single Line text
  • endDate: Date
  • siteUrl: Single Line text
  • position: Number

Machine Name es el identificador del campo, no puede tener espacios ni caracteres especiales. Label es la descripción del campo que verá el usuario.

GESTIONAR EL CONTENIDO

Una vez creado el Pod se añadira un link en el menu de la izquierda (en nuestro caso Add Portfolio)

Si hacemos clic en este link, podremos gestionar su contenido.

Una vez creado, tendremos acceso al listado con todas las entradas creadas para este grupo

Para integrar Pods mas dentro de nuestro WordPres podemos marcar “Top Level Menu?” en la administración del Pod. Esto hará que nuestro Pod se muestre en la barra de menus de la adminsitracion de WordPress.

Otra útil caracteristica de este plugin es la posibilidad de limitar el acceso a ciertos apartados del plugin segun el rol de usuario.

MOSTRAR EL CONTENIDO DE TUS PODS EN TU TEMA

Aunque el plugin tiene una seccion llamada Page para gestionar esto, yo prefiero editar los ficheros de mi tema para mostrar la información de mis Pods.

Tendremos que añadir el siguiente código:

<?PHP
findRecords('position ASC');

$total_portfolio = $portfolio->getTotalRows();
if( $total_portfolio > 0 )
{
// Retrieves the next record from our object
?>
fetchRecord() ) : ?>

get_field('id');
$portfolio_name     = $portfolio->get_field('name');
$portfolio_intro    = $portfolio->get_field('intro');
$portfolio_description	= $portfolio->get_field('description');
$portfolio_image  = $portfolio->get_field('image');
$portfolio_tasks  = $portfolio->get_field('tasks');
$portfolio_endDate  = $portfolio->get_field('endDate');
$portfolio_siteUrl  = $portfolio->get_field('siteUrl');
$portfolio_position = $portfolio->get_field('position');

// data cleanup
$portfolio_description       = wpautop( $portfolio_description );
$portfolio_image     = $portfolio_image[0]['guid'];
?>

<!-- show data -->
<div id="portfolio_<?= $portfolio_id; ?>"><img src="<?= $portfolio_image; ?>" alt="" /></div>


CAMPOS TIPO RELATIONSHIP

Estos campos tienen un gran potencial, ya que podemos relacionar una entrada con cualquier otra entrada, pod, o pagina del wordpress.

Más Información

Para obtener mas información sobre este tipo de campos, podeis leer este articulo.

Para obtener más información, os recomiendo leer estos ariculos, en los que yo me h basasdo:

  • Introduction to pods cms wordpress
  • Pods basics installation and setup
  • Pulling pods data
  • How to use pick columns relationships in pods
  • Pods pagination sorting