Referente Web

Caja de búsqueda en jQuery con SearchMeMe

Javier — Sat, 24 Mar 2012 23:55:19 +0000

SearchMeMe, es un plugin realizado en jQuery que nos permite de forma práctica y sobre todo muy fácil, implementar un buscador más amigable al usuario.

Tiene los conceptos básicos de búsqueda y Ajax implementado en sus diversas funciones.

No es un plugin que sobresalga demasiado del resto, pero para los 5kb que pesa, puede servir para más de algún proyecto web.

Sitio web oficial: www.egrappler.com/jquery-plugin-for-on-demand-search-box-seacrhmeme

Demo: www.egrappler.com/searchMeme/index.htm

Sube archivos en HTML5 con jQuery File Upload

Javier — Thu, 22 Mar 2012 02:26:01 +0000

jQuery File Upload es un plugin que nos permite realizar la subida de archivos con toda la potencia que tiene HTML5, sin duda es un plugin bastante bueno y que además posee retrocompatibilidad con navegadores antiguos como IE7-8.

Además del punto anterior tiene una infinidad de usos y ejemplos que puedes encontrar en la documentación, aqui se realiza la aplicación para distintos lenguajes paso por paso.

Algunas de las características por las que me parecio un plugin interesante son:

Drag&Drop de imágenes.
Cola de subida.
Fácil implementación.
Callbacks en casi todos los eventos lo que nos provee una altísima flexibilidad.
Mínimo y máximo peso permitido por archivos.
Restricción de tipos de archivos entre otros.

Sitio web oficial: blueimp.github.com/jQuery-File-Upload

Como crear un menú dinámico con jQuery stick

Javier — Sat, 17 Mar 2012 01:59:56 +0000

Muchas veces hemos encontrados sitios donde al hacer scroll, el menú siempre se mantiene arriba y luego vuelve a su lugar si estamos en el inicio de la página.

Este efecto se consigue con un simple pero potente plugin llamado jQuery stick, el cual nos permite aplicar el efecto deseado en tan solo 1.9kb y solo una línea de programación.

Vamos directamente al html:

Ejemplo jQuery Stick

Inicio
Somos
Servicios
Contacto

Contenido Principal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros ligula, fringilla gravida nunc. Mauris auctor ipsum nec lorem viverra pellentesque. Integer massa eros, tempor in pretium nec, lobortis eget erat. Aenean pellentesque, mi id hendrerit suscipit, lacus diam sollic
itudin sapien, ac molestie libero orci nec odio. Nullam in ligula diam, sed mollis sapien. Pellentesque sed lacus metus, non semper risus. Sed purus lacus, pulvinar a posuere luctus, placerat ut nisi. Donec porta rhoncus placerat. Mauris blandit posuere interdum. Cras sollicitudin felis rutrum quam ultrices eget aliquam diam bibendum. Duis et euismod dui. Donec quis sollicitudin ligula.
Mauris accumsan tellus vel magna ultrices ut fermentum augue pulvinar. Proin at justo non nunc egestas dictum sed ac eros. Praesent venenatis est vel sapien facilisis vehicula. Pellentesque at tellus erat. Vivamus suscipit tellus non massa ullamcorper scelerisque posue
re leo tincidunt. Vestibulum felis nunc, hendrerit et fermentum at, semper ut nisl. Sed vitae euismod risus. Duis aliquam nulla eget urna sodales aliquam. Suspendisse nunc arcu, porta eu accumsan a, placerat et nisl. Ut tincidunt mattis varius. Fusce sit amet felis nisi, a varius ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros ligula, fringilla gravida nunc. Mauris auctor ipsum nec lorem viverra pellentesque. Integer massa eros, tempor in pretium nec, lobortis eget erat. Aenean pellentesque, mi id hendrerit suscipit, lacus diam sollic
itudin sapien, ac molestie libero orci nec odio. Nullam in ligula diam, sed mollis sapien. Pellentesque sed lacus metus, non semper risus. Sed purus lacus, pulvinar a posuere luctus, placerat ut nisi. Donec porta rhoncus placerat. Mauris blandit posuere interdum. Cras sollicitudin felis rutrum quam ultrices eget aliquam diam bibendum. Duis et euismod dui. Donec quis sollicitudin ligula.
Mauris accumsan tellus vel magna ultrices ut fermentum augue pulvinar. Proin at justo non nunc egestas dictum sed ac eros. Praesent venenatis est vel sapien facilisis vehicula. Pellentesque at tellus erat. Vivamus suscipit tellus non massa ullamcorper scelerisque posue
re leo tincidunt. Vestibulum felis nunc, hendrerit et fermentum at, semper ut nisl. Sed vitae euismod risus. Duis aliquam nulla eget urna sodales aliquam. Suspendisse nunc arcu, porta eu accumsan a, placerat et nisl. Ut tincidunt mattis varius. Fusce sit amet felis nisi, a varius ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros ligula, fringilla gravida nunc. Mauris auctor ipsum nec lorem viverra pellentesque. Integer massa eros, tempor in pretium nec, lobortis eget erat. Aenean pellentesque, mi id hendrerit suscipit, lacus diam sollic
itudin sapien, ac molestie libero orci nec odio. Nullam in ligula diam, sed mollis sapien. Pellentesque sed lacus metus, non semper risus. Sed purus lacus, pulvinar a posuere luctus, placerat ut nisi. Donec porta rhoncus placerat. Mauris blandit posuere interdum. Cras sollicitudin felis rutrum quam ultrices eget aliquam diam bibendum. Duis et euismod dui. Donec quis sollicitudin ligula.
Mauris accumsan tellus vel magna ultrices ut fermentum augue pulvinar. Proin at justo non nunc egestas dictum sed ac eros. Praesent venenatis est vel sapien facilisis vehicula. Pellentesque at tellus erat. Vivamus suscipit tellus non massa ullamcorper scelerisque posue
re leo tincidunt. Vestibulum felis nunc, hendrerit et fermentum at, semper ut nisl. Sed vitae euismod risus. Duis aliquam nulla eget urna sodales aliquam. Suspendisse nunc arcu, porta eu accumsan a, placerat et nisl. Ut tincidunt mattis varius. Fusce sit amet felis nisi, a varius ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros ligula, fringilla gravida nunc. Mauris auctor ipsum nec lorem viverra pellentesque. Integer massa eros, tempor in pretium nec, lobortis eget erat. Aenean pellentesque, mi id hendrerit suscipit, lacus diam sollic
itudin sapien, ac molestie libero orci nec odio. Nullam in ligula diam, sed mollis sapien. Pellentesque sed lacus metus, non semper risus. Sed purus lacus, pulvinar a posuere luctus, placerat ut nisi. Donec porta rhoncus placerat. Mauris blandit posuere interdum. Cras sollicitudin felis rutrum quam ultrices eget aliquam diam bibendum. Duis et euismod dui. Donec quis sollicitudin ligula.
Mauris accumsan tellus vel magna ultrices ut fermentum augue pulvinar. Proin at justo non nunc egestas dictum sed ac eros. Praesent venenatis est vel sapien facilisis vehicula. Pellentesque at tellus erat. Vivamus suscipit tellus non massa ullamcorper scelerisque posue
re leo tincidunt. Vestibulum felis nunc, hendrerit et fermentum at, semper ut nisl. Sed vitae euismod risus. Duis aliquam nulla eget urna sodales aliquam. Suspendisse nunc arcu, porta eu accumsan a, placerat et nisl. Ut tincidunt mattis varius. Fusce sit amet felis nisi, a varius ante.

Con esta simple línea:

$("nav").stick();

Puedes acceder a las funcionalidades de este plugin.

La demostración la puedes ver aquí.

Y el sitio web oficial es: github.com/benmills/jquery-stick

La única desventaja que encontré de este plugin, es que no funciona en IE7, por lo que si quieres una alternativa que sea crossbrowser o solo para IE7 puedes usar este script (en el document ready de jquery)

        var stickyHeaderTop = $('#elemento').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#elemento').css({position: 'fixed', top: '0px'});
                } else {
                        $('#elemento').css({position: 'static', top: '0px'});
                }
        });

Espero les resulte útil.

Únete a nuestro nuevo foro

Javier — Thu, 15 Mar 2012 01:25:26 +0000

En conjunto a Guiafireworks hemos lanzado un nuevo foro para que seas participe de una nueva gran comunidad.

Mezclando Diseño, Web e Informática, BetaRedes tratara de complementar estos 3 temas para que lo encuentres todo en un solo lugar.

El lanzamiento apenas ha sido realizado ayer y llegando a tener un registro de más de 30 personas en un solo día, esperamos que puedas unirte a esta comunidad para resolver dudas o hacernos llegar tus aportes.

Sitio web: betaredes.com

Te esperamos!

Chico-ui, Pack de elementos para desarrolladores

Javier — Sun, 11 Mar 2012 03:18:07 +0000

Chico-ui es un pack de interfaces, plugins y widgets para desarrolladores, está basado en jQuery y provee una amplia variedad de utilidades para maximizar la usabilidad de tus sitios webs.

Básicamente posee muchas funcionalidades similares a lo que actualmente tiene jQuery UI, sin embargo podemos encontrar varias alternativas mucho más livianas y distintas a este mismo.

Algunos de los plugins más destacados son:

Contador de caracteres.
Calendario.
Ventanas modales.
Zoom.
Validaciones y elementos para formularios (select box modificados, tooltips, css predefinidos para estos elementos, etc).
Autocompletar.
Tabs.
Caruseles, acordeones, sliders.

La verdad trae una diversidad muy amplia y en la sección descargas puedes seleccionar los elementos que deseas utilizar, para que este mejor optimizado.

Sitio web oficial: chico-ui.com.ar

La documentación de Drupal 7 en un Cheat Sheet

Javier — Thu, 08 Mar 2012 02:09:56 +0000

A continuación les traigo otra cheat sheet (chuleta o torpedo) basado en Drupal, la cual consta de las funciones más utilizadas a la hora de programar con este CMS tan popular hoy en día.

Los autores de esta cheat sheet son www.quicklycode.com, los mismos que elaboraron la cheat sheet para wordpress que destacamos en un artículo pasado.

Bueno les dejo las fuentes:

Sitio web oficial: www.quicklycode.com/wallpapers/drupal-7-cheat-sheet-desktop-wallpaper

Puedes descargarlo en: 1024×768, 1280×800, 1440×900, 1680×150, 1920×1200.

Ventanas de notificación con jQuery Noty

Javier — Wed, 07 Mar 2012 02:32:15 +0000

jQuery Noty es un plugin de notificaciones (error, confirmación o éxito), el cual nos permite realizar estas 3 acciones de una forma más amigable e intuitiva para el usuario.

Alguna de sus características y por las cuales me parece un plugin recomendable son:

Posee diversos tipos de animación, por lo que puedes implementarlo como ventana modal, pegado al contenido, etc.
Callback para cada evento.
Puedes crear temas en CSS para cada ventana.
Métodos para la manipulación total del plugin.
Crossbrowser (para IE hay que tener cuidado con el CSS).
Soporta el complemento easing.
Tiempo de cerrado automático.

Bueno esos son los aspectos más relevantes, asi que les dejo el enlace para que puedan probarlo.

Sitio web oficial: needim.github.com/noty

Creación de gráficos o lineas de tiempo con jQuery y Morris.js

Javier — Tue, 06 Mar 2012 01:11:40 +0000

Morris-js es un plugin para la creación de gráficos o líneas de tiempo, esta potenciado mediante jQuery y es Crossbrowser.

La verdad es un plugin bastante amistoso y fácil de usar, ya que simplemente debes indicar las valores para cada eje (X e Y), lo cual facilita enormemente la creación y desarrollo del gráfico.

Actualmente puedes revisar su sitio web y podrás darte cuenta que recién está comenzando con el desarrollo de este potente plugin, sin embargo, funciona perfectamente en todos los exploradores sin dejar de lado el rendimiento.

Bueno para revisar más detalles acerca de su implementación y uso, puedes visitar el siguiente enlace.

Sitio web oficial: oesmith.github.com/morris.js

60 nuevos themes para WordPress de Febrero 2012

Esteban — Sat, 03 Mar 2012 19:13:05 +0000

En el sitio inglés OurTuts.com han hecho una estupenda recopilación de themes para WordPress que han sido liberados en el mes de febrero 2012.

Gran parte de ellos proviene del sitio de compra/venta de themes, ThemeForest, lo cual nos indica que la calidad está asegurada ya que no sólo incluyen un diseño, sino que también poseen paneles de control, de ajustes de fondos, colores, etc. y una extensa documentación, además de los archivos editables.

En fin, puedes ver toda la recopilación en el siguiente enlace:

OurTuts: 60 awesome WordPress themes of february 2012

Como crear una galería de imágenes con Shadowbox y jQuery

Javier — Wed, 29 Feb 2012 22:34:43 +0000

A continuación realizare un tutorial de como crear una galería con esta ventana modal, que para mi gusto es adaptable a casi cualquier proyecto web.

Primero detallare las características que posee este plugin:

Plugin nativo de javascript.
Permite utilizar un adaptador para los frameworks más populares: jQuery, Prototype, Dojo, Mootols, Yahoo toolkit.
Permite crear galerías de: imágenes, videos flash, videos swf, quicktime, window media player y contenido externo via iframes o inline.
Posee soporte para una gran variedad de idiomas (incluye español obviamente).
Tiene una API bastante potente, por lo que puedes realizar casi cualquier cosa con este plugin.
Y el punto más importante por el cual lo utilizo bastante, es que se escala a cualquier tipo de pantalla, por lo que si lo ves en resoluciones más pequeñas no tendrás ningún problema.

Bueno seguimos con las instrucciones para la implementación:

Paso 1:

Descargar la librería desde el siguiente enlace y seleccionamos las siguientes preferencias:

En adaptador seleccionas jQuery, ya que es el framework que utilizaremos.
En el tipo de reproductor seleccionamos “images”.
Luego el lenguaje a utilizar, en nuestro caso “spanish”.
Y dejamos checkeado el soporte de CSS

Nota: si por alguna razón al hacer click en el icono de ZIP no te descarga nada, abre con otro explorador web, ya que una vez experimente problemas con chrome y la descarga no se realizaba.

Paso 2:

Descomprimimos el ZIP y copiamos los archivos a la carpeta donde estará alojado nuestro proyecto, luego comenzamos con la maquetación del HTML:





Ejemplo Shadowbox-js








    
        Galeria con Shadowbox

Explicación del HTML:

Primero comenzamos inicializando el shadowbox fuera de la función de jQuery, esto lo podemos realizar debido a que es una librería nativa de javascript.

Luego dentro $(function) accedemos a Shadowbox.setup, indicándole que todos los elementos con la clase shadowbox pertenezcan al conjunto “Galeria”, esto permitirá que solo esas imágenes serán mostradas en la ventana modal.

Otro punto es que utilizando esta técnica en vez de rel=”shadowbox” como lo indica la página del autor, es que podemos validar nuestro código en la W3C y además tener opciones personalizadas para cada galería que queramos.

Finalmente agregamos los enlaces que apuntaran a nuestras imágenes en alta resolución y dentro de él las imágenes que servirán de thumbnails para identificar cada imagen.

Explicación del CSS

Para implementar shadowbox solo debes señalar la ruta de shadowbox.css y será suficiente para tener todas las funcionalidades.

Demo: referenteweb.com/demos/shadowbox

Sitio web oficial: shadowbox-js.com