BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Zebra_Dialog, ventanas modales muy livianas con jQuery

Zebra_Dialog, ventanas modales muy livianas con jQuery

09/ABR/2013 7.031 visitas Ver comentarios

Una ventana modal es una ventana secundaria que requiere que los usuarios interactúen con ella antes de que puedan seguir utilizando la aplicación principal. Las ventanas modales son uno de los elementos de la interfaz de usuario más comúnmente usados, y se utilizan, entre otras cosas, para comunicar información importante, o para alertar de error o advertencia.

Zebra_Dialog es un plugin de jQuery pequeño y compacto (un archivo Javascript, sin dependencias distintas de jQuery 1.4.1+) y altamente configurable para la creación de cuadros de diálogo modales, su intención es la de reemplazar el ALERT y CONFIRM nativos de Javascript además de brindar muchas más opciones como abrir páginas en modo iframe, carga de contenido vía ajax, etc...

LEER ENTRADA

jQuery Textarea Characters Counter Plugin

jQuery Textarea Characters Counter Plugin

05/ABR/2013 4.685 visitas Ver comentarios

Si habías visto mi antiguo post del plugin jQuery para contar y limitar caracteres dentro de un textarea (que un amigo twittero me avisó que la página original ya no funciona), he buscado una alternativa a ese antiguo post y he dado con el jQuery Textarea Characters Counter Plugin.

Este plugin, muy configurable y con poquitas opciones, y lo que es mejor, un peso de 5kb en versión producción, te permite personalizar la cantidad de caracteres permitidos, contar las palabras y alertar al usuario cuando está llegando al límite indicado.

LEER ENTRADA

Validar una cuenta bancaria española con jQuery Validate

Validar una cuenta bancaria española con jQuery Validate

26/MAR/2013 6.955 visitas Ver comentarios

Me ha surgido el problema de tener que validar que un número de cuenta (de un banco español) sea correcto y necesitaba integrar el método con un formulario en HTML que está utilizando jQuery Validate de Bassistance.de.

Como sabrás, este poderoso plugin de validación permite crear métodos propios de validación para agregarlos a los que ya trae por defecto que son campo requerido, número, dirección de email, dígitos, cantidad máxima y mínima de caracteres, número incluido en un rango, etc...

LEER ENTRADA

Pickadate un selector de fechas responsive con jQuery

Pickadate un selector de fechas responsive con jQuery

22/MAR/2013 8.247 visitas Ver comentarios

A menudo debemos hacer formularios web donde le solicitamos al usuario que ingrese una fecha. Hasta aquí no hay problema, pero el tema se complica cuando necesitamos que el usuario nos marque una determinada fecha, en un formato específico, o cualquier variante que se nos pueda presentar.

Lo normal sería, si estás usando el framework de jQuery UI, usar su datepicker, pero si no lo estás usando, cargar todos los js, css e imágenes se hace un tanto pesado, incluso, personalizar su apariencia, requiere que crees un tema o te adaptes a lo que trae.

LEER ENTRADA

Agrandar un textarea según su contenido con jQuery Autosize

Agrandar un textarea según su contenido con jQuery Autosize

21/MAR/2013 6.471 visitas Ver comentarios

El título lo dice todo. Si tienes un textarea en el que pretendes que el usuario rellene gran cantidad de texto, esta es una opción más que interesante para evitarle tener que moverse con barras de scroll.

Se trata de un plugin que actualiza el tamaño del textarea automáticamente a medida que vas escribiendo en él y puede ser de dos maneras, simple o con un desplazamiento suave.

LEER ENTRADA

Audiojs un plugin para reproducir ficheros de audio en tu web

Audiojs un plugin para reproducir ficheros de audio en tu web

21/MAR/2013 5.045 visitas Ver comentarios

Ocasionalmente podemos necesitar reproducir un fichero de audio en nuestra web, ya sea como muestra de una canción o grabación y no queremos depender de algún reproductor en flash.

Si bien HTML5 ya dispone del tag AUDIO para estas labores, debo aclarar que, como siempre, los distintos fabricantes de navegadores no se han puesto de acuerdo en el codec a estandarizar y algunos navegadores soportan el MP3 como audio mientras que otros, como Firefox, usan el formato ogg.

LEER ENTRADA

Marcar y desmarcar todos los checkbox recordando su estado original con jQuery

Marcar y desmarcar todos los checkbox recordando su estado original con jQuery

05/MAR/2013 10.717 visitas Ver comentarios

Cuantas veces nos ha pasado que tenemos que presentar una lista de opciones (por ejemplo para una eliminación masiva de registros) y queremos agregar la funcionalidad de marcar y desmarcar todos los checkboxes con uno ubicado, generalmente, en el encabezado de nuestra tabla.

Pues bien, hacer esto no requiere mayor sacrificio, pero esta vez, le quise agregar la dificultad de que el checkbox recuerde su estado original.

LEER ENTRADA

6 plugins jQuery que recomendaría

6 plugins jQuery que recomendaría

21/FEB/2013 7.645 visitas Ver comentarios

A veces me gusta darme una vuelta por la sección de plugins de jQuery.com y ver qué hay de nuevo. Muchas veces encuentro plugins que valdría la pena compartir pero que no tienen descripción ni información como para escribir un post entero y, para no terminar en post de 2 parrafitos, esta vez recopilo 6 miniposts en uno.

La minicolección de 6 plugins que dejo a continuación están bien, unos mejor que otros, unos mucho más funcionales que otros pero el que se lleva el premio es el de la marquesina, que, seguramente, alguna web todavía tendrá de estos odiosos textos caminando :)

LEER ENTRADA

Solución al espacio extra en los divs sin alto especificado con CSS

Solución al espacio extra en los divs sin alto especificado con CSS

15/FEB/2013 7.006 visitas Ver comentarios

A menudo te puede pasar de crear un DIV para poner únicamente una imagen (pensemos en una estructura header y 2 columnas) y no sabemos el alto que debe tener cada sección. Lo que tenemos claro es que no queremos que haya separación entre el header y las columnas.

Pues bien, lo que debería ser un simple trámite, de crear un div y meter la imagen dentro se complica por la aparición de un extraño espacio a mayores a base de margen o padding que sólo notarás si juntas las capas, ya sea con distintos fondos o (como en mi ejemplo, poniendo un borde y un fondo dorado).

LEER ENTRADA

Perfect Scrollbar, la barra de scroll perfecta con jQuery

Perfect Scrollbar, la barra de scroll perfecta con jQuery

13/FEB/2013 14.232 visitas Ver comentarios

Ya comenté varias veces distintos plugins para personalizar las barras de scroll de tu navegador, div o elemento mediante jQuery. Lo que traigo es otro más, que se suma a la gran lista de plugins para scrollbars y Jquery que encontré aquí.

Perfect Scrollbar es muy pequeño pero potente plugin para personalizar nuestras barras de desplazamientos y pequeño, en todo sentido, ya que cuenta con un CSS de 4 líneas en la versión min y el .js sin comprimir no supera los 8 kb.

LEER ENTRADA

Toolbar.js barra de herramientas en modo tooltip con jQuery

Toolbar.js barra de herramientas en modo tooltip con jQuery

04/FEB/2013 6.955 visitas Ver comentarios

Toolbar te permite crear rápidamente un tooltip con estilo barras de herramientas para su uso en aplicaciones web y para cualquier cosa que necesite un submenú con más opciones y no dispongas de lugar para mostrarlo. La barra de herramientas se puede personalizar fácilmente usando los iconos de Bootstrap de Twitter.

Lo veo como una opción muy interesante para aquellos gestores de contenido o intranets donde hay que mostrar perfiles de usuarios con opciones diferentes como modificar datos, avatar, y más opciones y no quieres mostrar todos los enlaces a la vez.

LEER ENTRADA

Calendario de eventos en PHP, Ajax, jQuery y ventanas modales

Calendario de eventos en PHP, Ajax, jQuery y ventanas modales

01/FEB/2013 26.171 visitas Ver comentarios

ACTUALIZACIÓN AGOSTO 2013. A pedido de una usuaria (en los comentarios se ve), he realizado una pequeña modificación para que el calendario soporte la edición de eventos. Si quieres descargar el código con edición de eventos, pulsa este enlace. Recuerda que el código aquí pegado y el que te descargas desde el botón azul, no contienen la edición de eventos.

Si ya conocías el antiguo calendario multieventos en PHP y te gustaba, lo que te dejo ahora te debería gustar aún más. Viendo que muchos comentarios me pedían funcionalidades para el antiguo calendario y, empujado, por la necesidad de hacer un calendario que no refrescara la página con el cambio de mes, he reescrito el código para modernizarlo.

LEER ENTRADA

Listas en columnas con Easy list splitter y jQuery

Listas en columnas con Easy list splitter y jQuery

28/ENE/2013 4.815 visitas Ver comentarios

Lo que traigo aquí es una alternativa al ya conocido jQuery Columnizer, que servía para separar contenidos en columnas de un modo muy fácil. Easy list splitter cumple la misma función, aunque sólo se encarga de separar en columnas elementos LI de nuestras listas, ya sean de tipo ordenadas (OL) o desordenadas (UL).

El plugin obtendrá la lista, que está dentro de un div contenedor y generará tantas listas como el número de columnas que requieren, dividiendo a partes iguales los elementos de la lista original.

LEER ENTRADA

Zoom de imágenes con jQuery snipe plugin

Zoom de imágenes con jQuery snipe plugin

23/ENE/2013 3.938 visitas Ver comentarios

Este plugin es muy sencillo pero nos da un efecto muy bonito para hacer zoom en nuestras imágenes en el mismo lugar y sin necesidad de otros plugins para ampliar como lightboxes o similares.

Todo lo que necesitamos son 2 imágenes, o mejor dicho, 2 versiones de la misma imagen. La primera que se mostrará como base a un tamaño normal y la segunda, o la imagen ampliada a un tamaño superior.

LEER ENTRADA

Rotar texto en PDF generado con FPDF

Rotar texto en PDF generado con FPDF

14/ENE/2013 13.631 visitas Ver comentarios

Me surgió el problema de tener que escribir texto con una rotación de 90 grados (simplificando, texto en vertical) en un fichero PDF que se generaba a través de la clase FPDF.

Como el PDF generado no incorporaba imágenes de fondo, sino que los logos y demás eran contenido independiente, no quería hacer un JPG de fondo con el texto en vertical así que googleé un poco (no mucho, la verdad) hasta que encontré una página donde nos regalan una extensión a la clase FPDF que pone tanto textos como imágenes con el ángulo de rotación que nosotros decidamos.

LEER ENTRADA

Un editor wysiwyg con jQuery

Un editor wysiwyg con jQuery

10/ENE/2013 5.949 visitas Ver comentarios

Un editor wysiwyg es un textarea con botones para marcar negritas, cursivas y una serie de estilos o tags html básicos. Dicho ésto, pasemos a hablar de un plugin que reemplaza los tradicionales textarea en cajas mágicas con mínimas opciones de personalización en textos.

El script, que pesa tan sólo 7 kb, se aplica al hacer foco sobre nuestro textarea.

LEER ENTRADA