Archivos para la categoria jQuery
jQuery Script: Clic en me gusta de Facebook para descargar o ver contenido premium
Es común hoy día ofrecer contenido premium o descargas a cambio de un me gusta. En la Web podemos encontrar varios scripts o plugins que nos permiten este objetivo.
Ver Demo.
Navegando la Web me encuentro con este completo script creado por “easyjquery”, que esta desarrollado en jQuery y el cual nos permite, ofrecer contenido en descarga o premium a cambio de “me gusta” en Facebook, un Tweet o un G+ de Google.
Su implementación es sencilla solo debes seguir estos pasos:
1. Creas un archivo html y entre las etiquetas <head> … </head> pegas lo siguiente:
<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script language="Javascript" type="text/javascript" src="http://api.easyjquery.com/easyjquery.js"></script> <!-- facebook like by easyjquery.com ---> <script language="Javascript" src="http://api.easyjquery.com/easyjquery.facebook.js"></script> <link rel="stylesheet" type="text/css" href="http://api.easyjquery.com/facebook_like.css"> <script src="http://connect.facebook.net/en_US/all.js"></script> <script src="http://platform.twitter.com/widgets.js"></script> <!-- end facebook like --->
En la primera línea del código hemos incluido la libraría jQuery, en la segunda línea el plugin “easyjquery.js” desarrollado por easyjquery, en las siguientes se incluyen los archivos necesarios para crear el botón ”me gusta” y dar estilo a la ventana emerjente, así como archivos para acceder a determinadas funcionalidades de facebook y twitter.
Después del salto los demás sencillos pasos, y el enlace para descargar el código de ejemplo.
Programr: Programa tu lenguaje favorito Online, añade soporte para Android
Si no lo conoces de paso te presento “Programr” y su nueva noticia.
Cuando estamos aprendiendo un lenguaje de programación los más importante es su practica, y para ello debemos lidiar con crear los entornos adecuados donde correr, ejecutar y en ocasiones compilar nuestro código. Aquí es donde nos ayuda Programr, ya que nos permite elaborar el código, ejecutarlo, compilarlo e incluso compartirlo con colaboradores en nuestro proyecto, y todo desde nuestro navegador, sin necesidad de instalar compiladores, servidores Web, etc.
Programr nos permite desarrollar en lenguajes como PHP, C++, Java, C#, VB, Ruby, Python, Javascript (jQuery), FLEX, J2EE, AJAX, SQl y ahora ha anunciado la buena nueva de soporte para aplicaciones Android, permitiendo su compilación Online, es decir todo a través de nuestros navegador, así mismo podremos obtener el APK que podrá ser difundido por el medio que deseemos e incluso lo podremos llevar directamente a Google Play.
Además pronto brindara soporte para el desarrollo de aplicaciones iOS, y aplicativos para la red social Facebook.
Enlace:
Sitio oficial | Programr
Vía techcrunch
Embeber vídeo con jQuery
Varias personas me han preguntado ¿Cómo embeber un vídeo de YouTube con su URL únicamente?
Desde “workup.com” crear un interesante plug-in desarrollado en jQuery, él cual nos permite incrustar contenido de varios servicios en nuestras aplicaciones Web, tan solo agregando su url.
El plug-in esta basado en oohembed que a su ves se basa en el formato oembed, que nos permite incrustar contenido de sitios Web de terceros. Gracias a este formato es muy sencillo mostrar vídeos, fotos, etc. en nuestros sitios Web tan solo referenciando su URL, como de seguro habrás visto en servicios como Facebook.
El uso del plug-in es bastante sencillo solo debes:
- Descargar el Plug-in, el cual viene en versión completa y min, deberías seleccionar el que más te conviene para tu aplicativo.
- En tu header haces un llamado a jQuery:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script> - Después llamas el plug-in:
<script type=”text/javascript” src=”jquery.oembed.js”></script> - Agregas una función como esta:
<script type=”text/javascript”>
$(document).ready(function() {
$(”#olink”).blur(function (){
olink = $(”#olink”).val();
$(”#oembedcont”).fadeOut(1000);
$(”#oembed”).oembed(olink);
})
});
</script> - Por último agregas estos div para agregar el contenido:
<div id=”oembedcont”><input type=”text” id=”olink”/></div>
<div id=”oembed”></div>En el div con id=”oembedcont” aquí agregamos la URL del contenido a mostrar, y en div id=”oembed se desplegará el contenido.
Los archivos que puedes descargar vienen con un código de ejemplo, que te mostrará lo sencillo que es el uso de este plug-in, con el cual podrás incluir facilmente contenidos de fivemin, amazon, flickr, googlevideo, hulu, imdb, metacafe, qik, revision3, slideshare, twitpic, vimeo, youtube, entre otros.
Si estas interesado en incluir contenido de terceros en tus aplicativos Web, te recomiendo que des una leída al formato oembed, cabe destacar que oohembed fue adquirida por embed.ly, que nos brinda una excelente API para embeber contenido, así que te recomiendo 100% que visites su sitio y te familiarices con esta API.
Espero que esto sea de su ayuda, gracias.
Enlace:
Descargar | Plug-in
HTML KickStart: Recursos de HTML5, CSS3 y Javascript
“HTML KickStart” es un conjunto bastante liviano de archivos, patrones y elementos en HTML5, CSS y jQuery (Javascript), diseñado para ayudarnos ahorrándonos tiempo, gracias a las etiquetas, menús, tipografías, galerías de imágenes, botones, formularios, listas, iconos, entre otros, que pueden ser descargado gratuitamente para basar nuestros desarrollos en su código, además son compatibles con tus navegadores favoritos.
Así que si diseñas o desarrollas sitios o aplicativos Web, te invitamos a que le heches un vistazo a HTML KickStart, sin duda te ayudará.
Enlace:
99Lime
FeedEk: Plugin jQuery para mostrar RSS/Atom
FeedEk es un plugin jQuery que nos permite mostrar contenido RSS y Atom en nuestra Web, de forma bastante sencilla, permitiéndonos configurar la url desde donde queremos traer el contenido, cantidad de artículos a mostrar, fecha, entre otros.
Uso:
1. Incluye la librería jQuery y FeedEk en la etuiqueta <head> de tu sitio.
2. Agrega un div en el lugar donde mostraras el widget
3. Agrega el código Javascript que traerá la información del sitio externo.
Cambias en FeedUrl por la url de donde quieres traer el contenido.
Opciones:
FeedUrl: Url desde donde traes el contenido (Requerido).
MaxCount: Número de items (Por defecto 5).
ShowDesc: Si quieres mostrar la descripción (Por defecto true) .
ShowPubDate: Si quieres mostrar fecha de publicación (Por defecto true).
Ideal si quieres agregar un widget con contenido interesante de terceros en tu Web.
Enlaces:
Sitio | FeedEk
Descarga | FeedEk plugin
Demo | FeedkEk
Vía | web resources depot
Marketing: Seguir abandonos en formularios con jQuery y Google Analytics
En este vídeo veremos como hacer seguimiento a los abandonos en los formularios de nuestros sitios Web, usando jQuery y Google Analytics. De esta forma podremos optimizar nuestros sitios Web y evitar abandonos de usuarios o clientes, tal ves por información innecesaria solicitada en uno de nuestros formularios, que los hace extensos y engorrosos a la hora de llenarlos.
Veremos como por medio de jQuery, el código de seguimiento ga.js, un plugin para jQuery llamado jQuery URL parser y los seguimientos de eventos de Google, podremos lograr algo que sin duda será útil si estas en el área de marketing Web o si eres desarrollador.
Necesitarás estar usando Google Analytics en tus sitios Web para emplear esta técnica, ya que no se profundiza en el uso de Google Analytics y el seguimiento de eventos.
El vídeo cuenta con poco más de 13 minutos y desde el enlace podrás descargar el código usado en el ejemplo.
Enlaces:
Código de ejemplo incluye plugin jQuey URL parser y jQuery
Uso de Google Anaytics
Guía de seguimiento de eventos
Plugin URL parser
jQuery (Sitio oficial)
jQuery: Enviar formularios sin recargar la página
En ocasiones es interesante enviar un formulario sin recargar la página, navegando la Web me encuentro con un sencillo tuto que podemos usar para conseguir este objetivo.
A continuación se lista los pasos y el código que involucra la parte del trabajo con jQuery, los estilos CSS, imágenes y archivos PHP están el ejemplo que puedes descargar al final de esta entrada.
Para conseguirlo seguimos los siguientes 4 pasos.
FireQuery: Optimiza Firebug en el desarrollo jQuery
FireQuery extiende la funcionalidad de Firebug y lo enfoca al desarrollo con jQuery, permitiendo ver información adicional de los eventos que se insertan con jQuery.
Gracias, a que jQueryify bookmarklet está integrado a FireQuery permite inyectar código de jQuery en cualquier sitio web.
Para usar Firequery se debe contar con Firebug 1.3 o superior.
Enlace: FireQuery
jQuery Tools: La librería UI perdida para la Web
jQuery Tools es una librería UI, que reune una colección de las más comunes interfases para usuario usadas en los desarrollos de los sitios Web actuales.
jQuery Tools como su nombre lo indica utiliza la librería jQuery como núcleo central de su funcionamiento, jQuery Tools se centra fundamentalmente en cuatro aspectos que son:
- Las partes esenciales que debe llevar una aplicación Web 2.0, haciendo énfasis principalmente en su diferenciación de las aplicaciones de escritorio.
- El tamaño y desempeño, ya que la librería pesa tan solo 5.8 KB hace énfasis en la Red de Entrega de Contenidos “Content Delivery Network (CDN)”.
- Facilidad de uso ya que no requieres de ser un programador para usar esta librería, y sacarle gran provecho.
- La posibilidad de ampliación, ya que se puede modificar el funcionamiento de la librería para lograr otros comportamientos más a medida. Separa el CSS del código lo que lo hace bastante fácil de aplicar sin conocimientos avanzados.
La librería es constantemente soportada por lo que se actualiza con frecuencia, además cuenta con gran número de Demos de su uso lo que muestra su potencial, así como tiene una muy buena documentación.
Desde el área de descarga puedes bajar herramientas por separado o todo el conjunto similar a jQueryUI, cuenta con herramientas para el trabajo con Tabs, Tooltips, Expose, Overlay, Scroll, FlashEmbed y jQuery toosl y Flowplayer.
Habilitar gestos del ratón con jQuery
jquery Fancy Gestures es un plugin jQuery, que permite habilitar el uso de gestos complejos del ratón como letras, alfabetos y sus gestos personalizados en cualquier sitio Web.
Por medio de este plugin se puede recibir entradas en sus sitios Web como si de un smartphone se tratase, y de esta forma podemos dar muchos usos a nuestras aplicaciones como captchas, firmas, dibujos, etc. todo dependerá de nuestra imaginación.
Características:
- Crear sus gestos personalizados.
- Crear múltiples entradas donde aceptar gestos.
- Previsualización.
- Trabaja con la mayoría de navegadores.
Requerimientos:
El plugin esta bajo una licencia MIT, lo que nos permite darle un uso libre.
Enlace: Descargar plugin
Enlace: jQuery fancy gestures (Documentación)
Nuestro canal
LqN RSS
LqN en Twitter
LqN en Facebook
LqN en iGoogle
