Today I was looking for a jQuery Colorpicker plugin for my new aplication (an online magazine generator)
I found a lot of options, and the one that I like more was the jQuery Color Picker of izzy. I’d download it, but when i saw the code there was a lot of things I didn’t like, so I have recode a little bit the plugin to fit my need.
(más…)
En muchas ocasiones queremos que ciertos elementos de nuestra web permanezcan siempre visibles, sin importar el movimiento del scroll.
Por ejemplo, si entramos en gmail, podemos ver que tanto la barra latera como los botones superiores siempre nos acompañan cuando hacemos scroll en la página.
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:
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 usuario: http://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.
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>
Después de llevar todo el día buscando un buen carrusel para usar en mis proyectos he conseguido encontrar lo que buscaba:
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.
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
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.
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
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:
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
I’m thinking on improving the plugin, so any kind of bugs you find on it will be highly welcomed.
Following tasks:
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
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 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.
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:
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
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:
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 es una librería javscript que tiene multitud de virtudes, pero sobre todas ellas yo destacaría las siguientes:
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.
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;
}
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); }
Si queréis conocer en mayor profundidad esta librería os recomiendo leer la documentación desde su web
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()
// 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() { });
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>
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 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.
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:
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:
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:
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.
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.
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>
Estos campos tienen un gran potencial, ya que podemos relacionar una entrada con cualquier otra entrada, pod, o pagina del wordpress.
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:
Soy un Front Developer, con amplia experiencia con Javascript, CSS y HTML. Cuando me dejan también me gusta pringarme las manos con PHP o diseñando aplicaciones.
July 2014
Aplicación móvil que te ayudará a controlar el tiempo que pasas en reuniones, y el coste que esa reunión tiene para tu empresa. ver más
December 2020
Herramienta web para la gestión de reservas de mi comunidad de vecinos. ver más
June 2014
Portal web de la compañía teléfonica de bajo coste para Argentina, México y Perú ver más