jquery plugins

Lunes, 27 d septiembre d 2010.

Crear tu propio slider con jquery paso a paso

Como otras veces simplemente dejar el apunte del código necesario para hacer algo bastante común en las webs actuales: Un slider.

Existen gran cantidad de plugins de jquery para hacer sliders (aunque yo suelo recomendar el plugin Easy Slider por su sencillez y cantidad de opciones. Si lo único que quieres es disponer de un slider en tu web mejor usa uno de estos plugins. Si en cambio, lo que quieres es un código sencillo con el que empezar a hacer realmente un slider a tu medida -para ahorrarte lineas de javascript innecesario o porque tienes una necesidad que ningún plugin te da- espero que con el siguiente ejemplo puedas ahorrarte algunos minutos u horas de trabajo...

[...]

¿Te interesa? Sigue leyendo...

10 Comentarios, leelos

Temas Relacionados: jquery tutoriales

Autor:

Martes, 07 d septiembre d 2010.

Plugin jquery para incluir el muro de una página de Facebook en tu web

El otro día descubrí que Facebook graph api no solo te permite hacer consultas fácilmente mediante json, sino que implementa jsonp (json con padding) para hacerlas. Esto significa básicamente que se pueden hacer consultas fácilmente a Facebook mediante Javascript. Esto tiene una limitación y es que para que nuestra consulta sea realmente simple tenemos que solicitar solo información pública. Es decir, no vamos a identificarnos, por lo que olvidémonos de usuarios, amigos, etc... Básicamente podremos acceder a la información de páginas de Facebook (y usuarios que lo tengan todo abierto).

Empecé por hacer un pequeño objeto en javascript literal que haga la mayor parte del trabajo, pero al final me he animado un poco más y he terminado por crear un plugin de jquery que nos permita incluir el Feed de una página. Además le añadi un filtro para poder mostrar todos los mensajes del feed o solo los que la propia página ha escrito ya que para integrar en una web me parece mucho más interesante lo segundo.

[...]

¿Te interesa? Sigue leyendo...

22 Comentarios, leelos

Temas Relacionados: jquery programacion

Autor:

Miércoles, 04 d agosto d 2010.

Efecto para mapas de google maps.

Hace tiempo que no escribo ninguna entrada con alguna idea desarrollada con jquery. Así que hoy voy a dejar escrita una. Se trata de un sencillo efecto para añadir a mapas estáticos de Google maps un efecto que permita ver mejor pequeños mapas con bastante zoom al clickar en los mismos.

Para quien no conozca los mapas estáticos de google maps puede visitar la API de Google Static Maps. Se trata de una sencilla api para llamar a los mapas como imágenes estáticas. A mi, particularmente me gusta mucho puesto que me ahorra tener que cargar todas las librerías javascript de google maps en páginas que no necesitan tanto.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: jquery programacion

Autor:

Martes, 15 d junio d 2010.

16 plugins jquery para formularios

Mientras termino de escribir un par de posts que no acabo de darles forma os dejo otra recopilación de plugins jquery interesantes. En este caso unos cuantos dedicados a la gestión de formularios, esos elementos que tan importantes son para interaccionar con el usuario y a los que muchas veces no se les presta toda la atención que merecen. Espero que os sirva a algunos os sirvan en vuestras futuras webs y administradores:

- Jquery Ui. Sin duda tengo que empezar por mencionar la espectacular librería de efectos de "Jquery User Interface". Ante los efectos más típicos no lo dudes, úsala. Te evitarás sorpresas y quebraderos de cabeza: ventanas modales, acordeones, elementos 'arrastrables', autocompletados, pestañas, etc. Todo muy bien pensado y totalmente crossBrowser.

- Really Simple Validation (RSV). Seguimos con el que es con diferencia el sistema de validación de formularios más cómodo que existe para jquery. Una implementación lógica y sencilla unida a una estupenda documentación y la posibilidad de crear nuestras propias reglas de validación hacen que pocas veces necesites algo más.

- jwysiwyg, es el editor de textos enriquecidos basado en jquery. Sin duda no es el mejor editor de este tipo y no puede pretender rivalizar con cKEditor o con TinyMCE (muy recomendados ambos), pero el hecho de estar basado en jQuery hace que para adaptaciones muy personales el trabajo se simplifique. Para otros casos mejor usar uno de los 2 anteriormente mencionados que aun sin ser plugins de jquery son muy versátiles y están bien documentados.

- JqTransform, es un plugin que por si solo es capaz de dar estilos originales a tus formularios. Solo con usarlo puedes marcar la diferencia sin preocuparte demasiado de hacer un formulario a medida.

- Jquery Form, es un plugin jquery destinado a facilitarnos -muchísimo- la vida cuando tenemos la necesidad de enviar formularios usando ajax. El plugin recoge todos los campos dentro de una etiqueta 'form' los ordena y los envía por post o get en la llamada ajax.

- También tenemos que tener en cuenta otros 3 recursos gráficos que pueden sacarnos de algún apuro: filestyle, para dar tu propio estilo a los botones de selección de ficheros, selectlist para hacer lo mismo con los 'combos' creados con la etiqueta 'select' y jConfirmAction para cambiar un poco las alertas de confirmación.

- textBoxList, nos permite crear tags en un único elemento input de texto de una forma muy gráfica y amigable que nos recuerda a la forma de añadir amigos en Facebook.

- wdContextMenu, nos permitirá de una forma muy sencilla crear nuestros propios menús de acciones con el botón derecho del mouse. Ideal para cuando un administrador empieza a ser bastante complejo.

- En el otro extremo, para los administradores sencillos, tenemos a Masked input plugin que nos permite indicar una mascara en cualquier elemento input de texto en los formularios. De esta forma obligar a los usuarios a escribir siempre algunos campos (fechas, horas, etc.) resulta mucho más sencillo. Por otro lado, este sistema resulta poco usable para usuarios normales por lo que yo no lo aconsejaría fuera de administradores.

- imgAreaSelect, puede ser un tremendo aliado para cuando desarrollemos aplicaciones destinadas a cortar imágenes. Con él, la parte del formulario destinada a seleccionar la imagen se vuelve realmente sencilla.

- date Range Picker, es a día de hoy, el único seleccionador de rangos de fechas usable y fácil de implementar que conozco. Muy recomendado para herramientas de reporting en las que constantemente tengamos que ir seleccionando rangos de fechas concretos.

- Ajax MultiFile Upload, es una pequeña ayuda para subir varios archivos emulando el comportamiento de Ajax (un efecto parecido a lo que hace Gmail para subir nuestros adjuntos).

- Tablesorter, también puede ayudarnos mucho en administradores sencillos en los que tengamos que mostrar en una única página todos nuestros datos. Simplemente incluyendo este plugin haremos que estos sean bastante manejables (ordenables, paginados, etc.).

- Por último no puedo acabar sin mencionar a Ext.js, un completo y complejo entorno destinado a crear herramientas y administradores online con gran cantidad de funcionalidades ya creadas por defecto. Si bien, podemos usarlo como una extensión de jquery este producto (porque no vamos a llamarlo plugin) también puede aplicarse por si solo con su propia API.

Espero que no los conocieseis todos y alguno de estos plugins os permitan mejorar aunque sea un poco vuestros formularios y administradores.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: jquery

Autor:

Miércoles, 09 d junio d 2010.

8 Plugins Jquery para Imágenes

Bueno, la verdad es que la parte de desarrollo web de este blog cada vez la tengo más abandonada. Para compensar, os muestro una selección de los plugins de Jquery para imágenes que actualmente más me gustan y que recomiendo. Espero que a alguien le sirvan para su próximo proyecto...

[...]

¿Te interesa? Sigue leyendo...

4 Comentarios, leelos

Temas Relacionados: jquery

Autor:

Sábado, 28 d noviembre d 2009.

Insertar twitter en tu web con jquery

Poco a poco, ya que el tiempo no me da para más, estoy haciendo un nuevo diseño para este blog. Una de las cosas que quiero añadir es mi hilo de twitter pero haciéndolo a mi manera...

Por suerte Twitter en su API te da la posibilidad de cargar sus contenidos con jsonp, un formato que nos permite cargar las cosas con ajax cross-domain. Las ventajas de cargar así tus tweets son claras:

[...]

¿Te interesa? Sigue leyendo...

16 Comentarios, leelos

Temas Relacionados: jquery programacion tutoriales

Autor:

Miércoles, 01 d julio d 2009.

Efectos sobre Google Static Maps en el mouseover con un plugin de jquery

Estoy haciendo algunas pruebas para un proyecto personal y como resultado de estas he creado este sencillo plugin de jquery destinado a hacer un pequeño efecto en los mapas estáticos de Google Maps cuando pasamos el ratón por encima.

Lo que hacemos es definir dos tipos de mapa entre los 5 que nos da Google Maps. Uno será el tipo de mapa que se vea por defecto al cargar la página, el otro sólo será visible cuando el usuario pase el ratón por encima del mapa. El mismo proceso se sigue con el zoom, pudiendo especificar 2 zooms distintos uno para el estado en reposo, y otro para la cuando pasemos el ratón por encima.

Podéis ver un ejemplo del resultado al pasar el ratón por el siguiente mapa:

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: jquery

Autor:

Miércoles, 24 d junio d 2009.

Plugin Jquery para medir en tiempo de escritura de formularios en Google Analytics

El siguiente plugin esta destinado a ser usado en cualquier formulario. Necesita hacer uso de la librería jQuery y de la librería javascript de Google Analytics. Su función es empezar a capturar el tiempo cuando un usuario empieza a rellenar un formulario concreto de nuestra página y lanzar un evento de la Google Analytics Tracking Api con el tiempo total que se ha tardado en completarlo cuando el formulario se envía.

[...]

¿Te interesa? Sigue leyendo...

3 Comentarios, leelos

Temas Relacionados: analitica web jquery

Autor:

Domingo, 21 d junio d 2009.

Crear un plugin de jquery

Una de las capacidades más conocidas de jquery es su posibilidad de ser mejorado con plugins. Estos en su mayoría lo que hacen es crear un nuevo método a aplicar sobre los elementos DOM seleccionados con la funcion $() de forma que acciones bastante comunes en las páginas puedan replicarse solo con incluir el plugin.

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Temas Relacionados: jquery tutoriales

Autor:

Domingo, 07 d junio d 2009.

Como crear nuevos selectores en jquery

2 de los puntos más fuertes de jquery son: sus selectores, que nos permiten con unos pocos caracteres seleccionar cualquier elemento de nuestro documento y su sistema para ser extendido a base de plugins.

Lo más común es crear plugins para jquery que hagan complejas funciones a partir de unos elementos seleccionados. Algo no tan común es crear un nuevo selector, hecho a medida de nuestra web, y que nos permita por lo tanto escoger de forma cómoda elementos de nuestra web.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: jquery tutoriales

Autor: