Posts etiquetados ‘jQuery’

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.

<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="FeedEk.js"></script>

</head>

2. Agrega un div en el lugar donde mostraras el widget

<body>
    ...
    <div id="divRss">
    </div>
    ...
</body>

3. Agrega el código Javascript que traerá la información del sitio externo.

$('#divRss').FeedEk({
   FeedUrl : 'http://rss.cnn.com/rss/edition.rss',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate:true
  });

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

MotionCAPTCHA: Dibuja figuras para evitar el spam jQuery

MotionCaptchaCuando estamos involucrados en proyectos donde recojemos datos de nuestros visitantes, siempre estamos expuestos al spam, es por esta razón que salen los sistemas de captcha, aquellas imagenes distorcionadas que debemos escribir adecuadamente para que el formulario pueda ser enviado correctamente.

“MotionCAPTCHA” es un plugin captcha de jQuery basado en la etiqueta Canvas de HTML5, y que nos brinda una manera diferente de validar la identidad humana a la hora de llenar los formularios, este nos provee con un cuadro y una figura la cual debemos dibujar con el mouse para poder validarnos y enviar la información.

Actualmente esta en etapa de prueba, lo cual lo hace vulnerable ya que el código solo es validado del lado del cliente, en su próximo lanzamiento se espera tener validación del lado del servidor, así como se espera mejorar el soporte en más navegadores.

Aca tienes un Demo para que te hagas a la idea de su funcionamiento, que sin duda es interesante.

Enlace: MotionCAPTCHA (Sitio oficial)

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

jQuery

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.

Leer el resto de la entrada »

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.

Leer el resto de la entrada »

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:

  1. Crear sus gestos personalizados.
  2. Crear múltiples entradas donde aceptar gestos.
  3. Previsualización.
  4. Trabaja con la mayoría de navegadores.

Aquí puedes ver un Demo.

Requerimientos:

  1. jQuery
  2. Walter Zorn’s VectorGraphics Library

El plugin esta bajo una licencia MIT, lo que nos permite darle un uso libre.

Enlace: Descargar plugin

Enlace: jQuery fancy gestures (Documentación)

Crea tu propio reproductor MP3 con la ayuda de jQuery

jPlayer es un plugin para jQuery que permite reproducir archivos MP3 dentro de una página Web. El reproductor utiliza un archivo swf para reproducir los archivos, pero este no es mostrado en la página por lo que el reproductor puede ser totalmente personalizado con XHTML y CSS.

El reproductor ofrece funciones que permiten reproducir un archivo MP3, pausar, detener y ver el progreso de la pista en una barra, así como controlar el volumen.

Ver demos después del salto.

Leer el resto de la entrada »

Tooltips y Flash con jQuery

Tooltips Flash con jQuery

Navegando la Web me encuentro que Peter Goodman, creo un Plugin para jQuery que permite poner contenido Flash dentro de los tooltips.

Desde aquí puedes bajar el plugin y el ejemplo completo para usarlo, incluye el ActionScript.

jQuery Flash Plugin

Otro plugin bastante bueno, que permite de una forma sencilla pero poderosa, agregar contenido Flash mediante jQuery, permitiendo agregar vídeos de Youtube, reproductores mp3, etc de forma sencilla.

Basta con agregar unas lineas como estas:

$('#hello').flash({
    src: 'hello.swf',
    width: 320,
    height: 240
});

Enlace: jQuery Flash Plugin

Enlace: Flash tooltips using jQuery

jTouch: Guia jQuery para Iphone y IpodTouch

jTouch es un manual para jQuery que se adapta perfecto a las funcionalidades Touch del Iphone o del IpodTouch, de momento esta para la versión 1.2.3 de jQuery.

La herramienta se adapta perfecto al entorno del Iphone y de esta forma nos permite acceder a ella desde cualquier lugar siempre y cuando tengamos una conexión a Internet.

Enlace: jTouch

Guía visual de jQuery

jQuery es sin lugar a duda una de las librerías JavaScript más eficientes y usadas, en la Web encontramos infinidad de guías para documentarnos acerca de esta, visualjquery.com es un sitio Web que nos permite conocer las funcionalidades a la vez que nos sirve de manual de forma visual e intuitiva, cuenta con un buscador con sistema de autocompletado, esta guia esta actualizada a la versión 1.2.6, y la información se encuentra organizada de forma muy eficiente.

Enlace: VisualjQuery