Hace algunas semanas estuve buscando un plugin jQuery con el que poner un “slider” a pantalla completa con imágenes de background para un sitio web que estoy diseñando. Tras una larga búsqueda en la que me centraba en bastantes criterios (ligero, sencillo, actualizado, html, responsive, touchable) encontré varios candidatos para ser incluídos pero ninguno de ellos llegó a convencerme.
Probé más de una decena de sliders sin suerte ya que encontré algunos que no parecen estar muy testeados y otros que no parecen haber sido pensados para usar fácilmente y requerían de una cantidad de parámetros exagerada (debe ser que no se conocen los valores por defecto) o una estructura HTML que no viene a cuento y que parece de la época de FrontPage, pero el mayor problema era la funcionalidad que yo quería encontrar y que no encontré nadie que la implementara, es decir, tener la posibilidad de que el indicador de posición (las bolitas que todos tienen) que marca la slide que se muestra en cada momento en pantalla, pudiera ser sustituido por un bloque de contenido y que además, al seleccionarla navegara al contenido y no a la slide relacionada.
Por lo tanto, hice una evaluación del tiempo que había perdido en buscar y probar y… no me había salido rentable así que, aunque no me gusta reinventar la rueda, me apliqué el lema “do it yourself” y empecé a crear mi propio plugin con las premisas de que debe ser LIGERO, SIMPLE, MODIFICABLE, SIN ESTILOS y MUY FÁCIL DE USAR, para que cualquiera lo pueda integrar en sus sitios web. Además, también quiero que tenga otras características que lo acerquen a la realidad actual, RESPONSIVE y TOUCHABLE.
Así pues, tras 3 horitas de desarrollo/investigación conseguí tener una versión “Alpha” que pueda servir para integrar en nuestros sites y la he publicado en GitHub bajo la licencia GNU GPL 2 con el fin de que esté accesible a todos.
Lo que sí me gustaría pediros es:
Si lo utilizáis en algún caso, decídmelo para poder promocionar vuestro site desde la página de plugin.
Conocer vuestra impresión sobre el plugin.
Proponed mejoras y nuevas features que se puedan incluir y, si son aceptables las incluiré 🙂
Este 2014 que dejamos atrás ha sido un año muy especial para mi porque ha habido cambios muy importantes tanto en mi vida laboral como en mi vida personal.
Empezando el año
Comencé el año trabajando en SolidQ, empresa en la que dejo grandes amigos y en la que pude crecer un poco más aún ya que, el hecho de trabajar en remoto para una multinacional como SolidQ representaba un reto y había que estar a la altura.
Primeros viajes del 2014
Nada más comenzar el año, empecé una rutina de viajes mezclando los eventos de comunidad con los de trabajo y así, pude estar presente en el Global Azure Bootcamp de 2014 donde di una sesión junto al gran Rafa Serna sobre Azure Mobile Services.
Los viajes laborales me llevaron a estar inmerso en un gran equipo de consultores de varias empresas (que no nombraré porque no viene al caso) donde pude conocer más a fondo a auténticos maeses tan conocidos como Unai Zorrilla, Luis Ruiz Pavón y Jorge Serrano, aparte de mis ex-compañeros, auténticos libros de conocimiento, Rubén Garrigós, Miguel López y Enrique Catalá. (Me falta foto de alguno de esos momentos)
Mobile World Congress Barcelona 2014
De la mano de Nokia, asistí al Mobile World Congress Barcelona 2014. Fueron unos días inolvidables junto a Guillermo Bas, Javier Suárez, Rafa Serna y Josué Yeray durante los que conocí a otro monstruo como Quique Martínez y al no menos monstruo Stephen Elop… jejejeje (hay prueba de ello)
Viaje a San Francisco
Todos arrastramos sueños desde nuestra época de pequeños y, viajar a los Estados Unidos es uno de los míos. Así, en marzo-abril tuve la gran fortuna de culminar este sueño gracias a Miguel López y a SolidQ que me permitieron viajar a San Francisco a unas sesiones sobre Microsoft Azure que se daban justo unos días antes del //build/ y gracias a eso pude encontrarme con otro chicharrero, el grandísimo Josué Yeray.
Nombramiento como MVP
Precisamente durante la estancia en San Francisco, tuve la grata, gratísima, infinita sorpresa de ser nombrado MVP Client Development Windows Platform Development. Sin duda un premio que siempre agradeceré y que se lo debo sobre todo al gran maestre Alberto Díaz que ha sido el referente que necesitaba para centrarme en lo que me gusta, y también han influido otros compañeros como Josue Yeray y David Rodríguez, ambos compañeros en TenerifeDev y MVP y Jose Fortes también compañero de TenerifeDev pero en el área de negocios. A todos los nombrados y al resto que ha aportado un granito de arena a mi vida laboral y a este MVP, os doy mis más sinceras GRACIAS y un fuerte abrazo!.
Fichaje por ENCAMINA
Tras unos meses algo agotado por los viajes a cliente, decidí dar un nuevo vuelco a mi vida laboral y, tras una gran oferta de ENCAMINA y tras ver que podría aportarme todo lo que me satisfacía en mi vida laboral e incluso también en lo personal, di el salto a una nueva familia muy dinámica, muy cercana, muy acogedora y sobre todo con unas enormes ganas de crecer, aprender y hacer las cosas con un plus de excelencia. Así que, aquí estoy, nuevamente junto a Alberto Díaz y con un gran equipo de trabajo en el que se incluye Adrián Díaz, un departamento de diseño, unos directores con mucha ilusión y pasión por su trabajo y unos compañeros que rebosan pasión y hambre por comerse el mundo. Así que… creo que finalmente tomé un buen “camino”.
Viaje a Seattle – MVP Summit 2014
Este año ha estado sembrado de viajes y pude repetir en Estados Unidos, pero esta vez en Seattle para asistir al MVP Summit de Microsoft. Sin duda fue la experiencia más enriquedora de mi vida en cuanto a conocimientos, tecnología y networking se refiere. Además, poder compartir esta experiencia con Alberto Díaz, David Rodríguez y Carmen, Rafa Serna, Juan Carlos González, Gustavo Vélez, etc etc… ha sido increíble. Nos faltó Josué Yeray para ser los 4 canarios del apocalípsis en Seattle 🙂 Maybe next year??
Segunda participación en Codemotion Madrid
Por segundo año, he participado en Codemotion Madrid. En esta ocasión he estado junto a Rubén Pertusa hablando sobre la conjunción entre Datos y Frontend con un ejemplo basado en una aplicación y un conector a cubos analíticos. Fue toda una sorpresa ver la sala completamente llena habiendo incluso gente de pie que aguantaron así hasta el final.
Además, incluso me grabaron una entrevista (shhhh no le digáis a nadie que es la primera entrevista de mi vida jjjjj)
TenerifeDev – Eventos durante todo el año
He esperado al final por ser algo “transversal”. La labor de TenerifeDev no para en todo el año, ya sea colaborando con Microsoft en la organización de eventos y con los ponentes o realizando nuestros propios eventos. Así, hemos participado en la Tenerife Lan Party 2014 como todos los años, hemos estado en Madrid en Global Azure Bootcamp 2014, en FEULL y en la escuela de informática de la Universidad de la Laguna ETSII con sesiones que creemos interesantes para todos los asistentes y, sobre todo, para alumnos que aún no tienen un rumbo prefijado o preconcebido.
Christmas Mobile Apps Sessions
Un año más estuve enrolado en esta serie de sesiones sobre desarrollo de aplicaciones móviles (Apps) para cerrar el año, gracias a la labor de Alejandro Campos Magencio, Evangelista de Microsoft Ibérica. ¿El próximo año repetimos? Espero que sí 😛
Objetivos para 2015
Bueno, para el 2015 sólo pido poder aprender más cosas, poder participar en algún proyecto que incluya las últimas tecnologías de desarrollo móvil, seguir pudiendo influir en alguien cuando de tecnología se trate y, sobre todo, seguir divirtiéndome con mi trabajo y con los eventos en los que participo.
Agradecimientos
No hay hueco para tanta gente, así que lo reduciré a mis compañeros de TenerifeDev, con los que comparto las batallas del día a día y con los que no paro de pensar eventos en los que participar u organizar. Pero sobre todo, a mi pequeña gran familia por apoyarme y darme los ánimos necesarios para seguir creciendo, mejorando y aprendiendo. Para mis chicas, mi mayor abrazo y mi mayor beso.
Desde hace ya algunos años, una de las técnicas más usadas en las Hojas de Estilo en Cascada (CSS) para maquetar en sitios web que deban mostrar elementos de tipo bloque en línea es la de establecer su regla “display” con el valor “inline-block”. El uso de “display: inline-block;” nos permite realizar menús, muestras de elementos, etc, sin necesidad de recurrir a elementos flotantes con la regla “float” que ya se encuentra desaconsejada salvo necesidad expresa o la muy mala práctica de maquetación consistente en usar tablas para distribuir el contenido. Así pues, en este artículo os expongo el problema y varias soluciones en mayor o menos medida recomendadas puesto que algunas las considero malas prácticas y otras son algo “raras”, pero sin duda, al final del artículo encontraréis la que a mi parecer es la forma correcta de realizar este tipo de maquetado. Podéis descargaros el website de ejemplo para seguir el artículo desde este enlace.
Bien, veamos un ejemplo en el que queremos mostrar un menú de elementos en línea
<navclass="mainNav">
<divclass="navItem">Item 1</div>
<divclass="navItem">Item 2</div>
<divclass="navItem">Item 3</div>
<divclass="navItem">Item 4</div>
</nav>
Y añadimos un poco de estilos CSS
nav.mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
border: 1px solid #4800ff;
}
nav.mainNav >.navItem {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
Esto nos producirá la siguiente salida
Como se puede apreciar, existe un espacio entre los elementos que realmente no existe ni en HTML, ni en CSS, “ni por el propio navegador”… lo que puede producirnos un problema si queremos que los elementos aparezcan completamente juntos. ¿Cómo lo solucionamos?
Solución 1: Minimizando el HTML
Si minimizamos el HTML eliminando el espacio entre los elementos que queremos mostrar en línea “inline-block”, es decir, si los mostramos en una línea sin espacio o salto de línea entre ellos… misteriosamente se soluciona el problema. Aquí tenemos el ejemplo y su resultado
También podemos usar algunos trucos muy feos como cerrar el elemento en la siguiente línea o usar comentarios en los saltos de línea tal y como os muestro más abajo
<navclass="mainNav">
<divclass="navItem">Item 1</div
><divclass="navItem">Item 2</div
><divclass="navItem">Item 3</div
><divclass="navItem">Item 4</div>
</nav>
<navclass="mainNav">
<divclass="navItem">Item 1</div><!--
--><divclass="navItem">Item 2</div><!--
--><divclass="navItem">Item 3</div><!--
--><divclass="navItem">Item 4</div>
</nav>
Estos trucos nos funcionarán sin problemas aunque, para ser sinceros me quedo con el tercero por ser menos “raro”.
Solución 2: Ajustar márgenes (negativos)
La siguiente solución pasa por ajustar los márgenes entre los elementos. Después de indagar y probar, resulta que el margen que se añade en los lados de los elementos es de 4px y sólo necesitaríamos restarlos. En el ejemplo, añadiré una nueva clase a los elementos sobre la que aplicaré el arreglo.
<navid="mainNav">
<divclass="navItem navItemSolution2">Item 1</div>
<divclass="navItem navItemSolution2">Item 2</div>
<divclass="navItem navItemSolution2">Item 3</div>
<divclass="navItem navItemSolution2">Item 4</div>
</nav>
nav#mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
border: 1px solid #4800ff;
}
nav#mainNav >.navItem {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
nav#mainNav >.navItemSolution2{
margin: 0 -4px;
}
Esta solución podría es tar bien pero… ¿y si mañana cambian las interpretaciones en algún navegador? ¿Se seguirá mostrando bien? Pues… podría darnos muchos problemas puesto que habría que reescribir nuestras hojas de estilo.
Solución 3: Ajustar fuente
Otra posible solución, dado que lo que se añade podría equivaler a un espacio de texto…, pasa por ajustar el tamaño de fuente, poniéndolo a 0px en el contenedor y estableciendo el correcto en los propios elementos en línea tal y como os muestro más abajo. Nuevamente jugaré con las clases de los elementos para no tener que reescribir todo.
<navclass="mainNav mainNavSolution3">
<divclass="navItem navItemSolution3">Item 1</div>
<divclass="navItem navItemSolution3">Item 2</div>
<divclass="navItem navItemSolution3">Item 3</div>
<divclass="navItem navItemSolution3">Item 4</div>
</nav>
nav.mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
border: 1px solid #4800ff;
}
nav.mainNavSolution3 {
font-size: 0;
}
nav.mainNav>.navItem {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
nav.mainNav>.navItemSolution3 {
font-size: 16px;
}
Como podéis ver, esta solución tampoco es nada buena puesto que nuevamente podemos enfrentarnos a problemas si mañana tenemos que actualizar nuestras hojas de estilo.
Solución 4: Flotar los elementos con float (volver al pasado y a sus horrores)
La siguiente solución pasa por poner los elementos como flotantes, con lo que estaríamos volviendo al pasado y a los problemas de que salten de línea, o que no se ajuste el contenido que se encuentra bajo él, al uso de elementos con “clear:both” para corregir problemas y a veces crear otros…, pero bueno, aquí tenéis el ejemplo.
<navclass="mainNav">
<h2>Elementos flotantes</h2>
<divclass="navItem navItemSolution4">Item 1</div>
<divclass="navItem navItemSolution4">Item 2</div>
<divclass="navItem navItemSolution4">Item 3</div>
<divclass="navItem navItemSolution4">Item 4</div>
</nav>
nav.mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
border: 1px solid #4800ff;
}
nav.mainNav>.navItem {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
nav.mainNav>.navItemSolution4{
float: left;
}
Como podéis observar funciona perfectamente pero, por favor, no viváis del pasado y mantened las cosas más simples, así que olvidad los elementos flotantes salvo que sea estrictamente necesario (K.I.S.S.). Hay soluciones mucho mejores como la que os pongo al final del artículo.
Solución 5: No cerrar los elementos en línea… (MUY MUY MALA PRÁCTICA)
La característica de HTML5 que permite no cerrar los elementos es algo que siempre me ha chirriado y dolido en el alma y provoca problemas como uno que me encontré hace no mucho en un mega-producto de una gran compañía (a Alberto Díaz y a Adrían Díaz les sonará), pero si sois amantes de esta práctica (espero con el corazón que no haya nadie), esta solución os puede valer.
<navclass="mainNav">
<h2>No cerrar elementos</h2>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
</nav>
nav.mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
vertical-align: top;
border: 1px solid #4800ff;
}
nav.mainNav>ul {
margin: 0;
padding: 0;
}
nav.mainNav>ul>li {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
No quiero ser pesado pero… esta me parece una muy mala práctica.
Solución 6: Usar modelo de caja flexible (Mi recomendación)
Otro día hablaré más a fondo de este modelo que es una gozada para maquetar y para modelar nuestros sitios responsivos (responsive web design). Esta característica es una de las más potentes porque permite jugar mucho con el modelado de los elementos, su comportamiento, etc etc y es muy simple de usar como podréis observar.
<h2> Modelo de caja flexible</h2>
<navclass="mainNav flexbox">
<divclass="navItem flex-item">Item 1</div>
<divclass="navItem flex-item">Item 2</div>
<divclass="navItem flex-item">Item 3</div>
<divclass="navItem flex-item">Item 4</div>
</nav>
nav.mainNav {
display: inline-block;
margin: 20px;
padding: 20px;
vertical-align: top;
border: 1px solid #4800ff;
}
nav.mainNav.flexbox {
/* BROWSER DEFINITION */
display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
/* W3C DEFINITION */
display: flex;
display: inline-flex;
}
nav.mainNav>.navItem {
display: inline-block;
padding: 20px;
background: #4800ff;
color: #fff;
}
Se puede usar tanto “display: flex” como “display: inline-flex” para el contenedor para poder así controlar el modelado dentro de la página (en bloque o en línea). Los elementos que contenga el contenedor al que le apliquemos una de estas propiedades, automáticamente pasarán a comportarse como elementos de caja flexible, adaptándose a la perfección a nuestras necesidades. Si queréis saber más sobre el modelo de caja flexible (flexbox) podéis esperar a que escriba un artículo sobre ello o simplemente consultar este artículo de la MSDN
NOTA: Tened mucho cuidado con Safari porque aún parece que no se ha subido al carro de las especificaciones de W3C
El pasado 11 de diciembre de 2014 tuvo lugar una nueva sesión organizada por TenerifeDev en la que compartí cartel nuevamente con David Rodríguez para hablaros de ASP.NET vNext. La sesión la comencé con una introducción a ASP.NET para después meteros en el mundo de vNext, las novedades que trae, las facilidades y la potencia que aporta, etc. Todo esto lo escenifiqué con un ejemplo que hacía uso de Azure Mobile Services. Finalmente, David os habló de cómo publicar un sitio desarrollado con ASP.NET vNext como Azure Website, lo que sin duda os aportará una gran ventaja sobre el resto de desarrolladores.
Aquí os dejo las slides y las demos. (Recordad que he quitado las credenciales de acceso a mi Azure Mobile Services y que podréis sustituirlo por el vuestro o por otra fuente de datos)
El pasado lunes 15 de diciembre tuve el placer de poder realizar un nuevo webcast sobre aplicaciones móviles gracias a Alejandro Campos Magencio, evangelista de Microsoft, que nos subió al carro de un nuevo final de año hablando sobre lo que más nos gusta.
En esta ocasión hablé de diseño en aplicaciones móviles en una sesión más teórica que práctica dado que en las cosas del diseño hay mucho de gusto personal y pocas reglas que seguir salvo unas bases en las que asentarse (y de las que no debemos escapar) que nos sirven no sólo para aplicaciones móviles de la plataforma Windows, sino que también nos vale para el resto de plataformas ahora que está tan de moda usar Xamarin (lo mejorcito para cross platform) y Cordova (o PhoneGap) que por fin ha sido integrado con Visual Studio.
El contenido que seguí lo podéis encontrar en las slides que he subido a Slideshare y además podéis descargaros y ver la grabación en este enlace
Si necesitáis ayuda sobre diseño de Apps o sobre desarrollo de Apps para la plataforma Windows, como siempre podéis contactarme vía twitter@saintwukong o desde este mismo blog
Mañana estaré como ponente en una nueva sesión online de “Christmas Mobile Apps Sessions“. Este año una vez más, Alejandro Campos Magencio, evangelista de Microsoft Ibérica, nos ha liado a los MVP Windows Platform Development Josué Yeray, Rafa Serna, Javier Suárez and me, junto con Eduard Tomás (MVP ASP.NET), para acabar el año de la mejor forma posible con una serie de Web Casts con el fin de prepararos y animaros a desarrollar Universal Apps. La serie completa de sesiones la podéis encontrar en este artículo junto con sus enlaces de inscripción.
Así pues, yo os hablaré de diseño una vez más e incluiré algunos truquitos de “perro viejo” que he aprendido con el tiempo
Introducción al Diseño, trucos y consejos en Universal Apps
Conoce los conceptos esenciales del diseño de Aplicaciones Universales para poder crear aplicaciones que atraigan a los usuarios. Además, aprenderás algunos trucos y consejos simples para diferenciarte y crear experiencias únicas.
Mañana participaré en una nueva sesión de TenerifeDev en la que os hablaremos David Rodríguez y un servidor sobre ASP.NET vNext, la nueva generación de tecnología web con la que Microsoft quiere seguir creciendo entre la comunidad de desarrolladores acogiendo también a los que crean aplicaciones para Linux y MacOSX. Esta sesión estaba prevista que la diera Tiberiu Covaci que se nos ha venido a vivir a la isla con lo que seguimos concentrando maestros dentro de isla. Entre otras cosas, vamos a hablar de qué es, qué novedades tiene, que ventajas propone y veremos algunos ejemplos de cómo utilizarlo para nuestros proyectos y desplegarlo en Microsoft Azure.
Además, esta sesión coincide dentro de la semana en la que se celebra el evento de aprendizaje más grande de de la historia “The hour of code” en el que se trata de incentivar el aprendizaje a la programación pero no sólo entre los desarrolladores y gente próxima a la tecnología, sino abierto a todo el mundo.
Esperamos que no nos falléis y que participéis de este gran evento durante nuestra sesión 🙂
Datos de la sesión
Sesión: Introducción a ASP.NET vNext
Descripción: Ven y conoce de primera mano cómo será la próxima versión de ASP.net, qué cosas cambian, dónde quedan los WebForms, cómo funcionan los controladores y qué le ha pasado al web.config. Santiago Porras, MVP de Windows Platform (@saintwukong) y David Rodriguez, MVP de Azure (@davidjrh) nos harán un recorrido por cada una de las novedades de la nueva plataforma para aplicaciones web y cloud. ASP.net vNext (aka ASP.NET 5), es completamente Open Source y está disponible en GitHub. ASP.NET 5 está actualmente en Preview.
El próximo Jueves 20 de Noviembre a las 16:00 horas de Madrid, tendré el placer de compartir un nuevo Webinar junto a Adrián Díaz en el que hablaremos sobre soluciones de movilidad para entornos empresariales.
La agenda del mismo será la siguiente:
Los aspectos de movilidad que trae SharePoint
Como introducirnos en el desarrollo de Aplicaciones móviles (nativas, multiplataforma haciendo uso de Apache Cordova y Xamarin)
Ver como aprovechar el Cloud dentro de nuestros desarrollos
Si estáis interesado en asistir, podéis registraros desde el siguiente enlace.
Hoy tendrá lugar una nueva sesión de TenerifeDev en la que volveremos contar con dos temáticas relacionadas para aumentar el alcance de los contenidos. En esta ocasión David Rodríguez hablará de Azure Mobile Services y yo haré lo propio sobre Aplicaciones Universales..
Azure Mobile Services y Aplicaciones Universales
Lugar: Salón de Grados ETSII
Horario: 18.00 – 19.30
Y recuerda que ya tenemos programado el evento de diciembre con la colaboración de un speaker internacional, Tiberiu Covaci (Microsoft MVP ASP.NET) que nos hablará de vNext
Es muy común que en nuestras aplicaciones necesitemos abrir popups y, para ello, generalmente se suelen usar plugins JavaScript como jQuery.UI u otros que son algo más pesados de lo que realmente necesitamos. Además, normalmente, los plugins añaden estilos que no nos hacen falta y que debemos sobreescribir con gran esfuerzo para no perder el look&feel de nuestro sitio web.
¿Qué podemos hacer para evitar «problemas» sólo por intentar abrir popups?
Opción 1: Imitar a Chuck Norris y hacerlo por nuestra cuenta
Esta opción me suele gustar pero sólo es aplicable en caso de que seáis buenos programando JavaScript, porque de lo contrario estaréis desaprovechando el tiempo y es posible que acabéis enredados en un código difícil de mantener.
Opción 2: Buscar un plugin simple con pocos o ningún estilo
Esto puede ser realmente lo que necesitamos en la mayoría de los casos y, en la temática de este artículo, os hablaré un poco de bPopup con además una solución de ejemplo.
bPopup es un plugin que nos permite abrir ventanas modales (popups) que aplica muy poco (o nada) de estilos, es ligero y fácil de configurar, con muchas opciones accesibles que nos permitirán rápidamente crear un popup que encaje perfectamente en el look&feel de nuestro sitio web.
La opción más simple es abrir el popup y, para ello, sólo necesitamos ejecutar una pequeña instrucción JavaScript
$(‘element_to_pop_up’).bPopup();
Popups infinitos
A priori parece una opción que no tiene mayor complejidad, pero la muchos plugins que implementan la funcionalidad de abrir ventanas modales no permiten la creación de infinitos popups unos sobre otros por problemas a la hora de tratar las clases que aplican. Con bPopup es muy sencillo tener esta funcionalidad que nos permitirá trabajar con popups sobre popups.
$(‘element_to_pop_up_1’).bPopup({
closeClass:‘close1’,
follow: [false, false] //x, y
});
$(‘element_to_pop_up_2’).bPopup({
closeClass:‘close2’,
follow: [false, false] //x, y
});
…
$(‘element_to_pop_up_N’).bPopup({
closeClass:‘closeN’,
follow: [false, false] //x, y
});
Control de eventos
bPopup también nos aporta control de eventos para poder realizer tareas en cada instante de la vida del popup.
$(‘element_to_pop_up’).bPopup({
onOpen: function() { alert(‘onOpen fired’); },
onClose: function() { alert(‘onClose fired’); }
},
function() {
alert(‘Callback fired’);
});
Carga de contenido externo
bPopup nos permite realizer la carga de un contenido externo mediante su URL. En el siguiente ejemplo sacado de la página de bPopup, vemos como se carga de forma asíncrona, el contenido del blog del autor.
Hace algunas semanas estuve buscando un plugin jQuery con el que poner un “slider” a pantalla completa con imágenes de background para un sitio web que estoy diseñando. Tras una larga búsqueda en la que me centraba en bastantes criterios (ligero, sencillo, actualizado, html, responsive, touchable) encontré varios candidatos para ser incluídos pero ninguno de ellos llegó a convencerme. 
Mañana participaré en una nueva sesión de 
