MailCheck es un plugin jQuery de lo más simple pero no por eso menos útil. Sirve para validar direcciones de correo electrónico, pero no solamente su sintaxis, sino también verifica la validez del dominio que la acompaña. Es así que por ejemplo podemos validar si el usuario en lugar de escribir @hotmail.com escribe hotnail.com, sugiriendo del posible error.
Para comenzar con este artículo y la recomendación posterior debo decirles que tengan cuidado con su aplicación en sitios públicos ya que, como siempre aclaro, la utilización de CSS3 no está homogeneizada en todos los exploradores. Dicho esto, procedo a explicarles de qué se trata esta palabra parallax.
Como se habrán dado cuenta las aplicaciones de CSS3 parecen no tener límites. A medida que va pasando el tiempo, vamos descubriendo más y más opciones que quizás pueden no parecer útiles en un primer momento pero que pueden resultar la base de aplicaciones y conceptos posteriores que brinden aún más posibilidades al desarrollo de utilidades web y aplicaciones.
En este caso, quiero mostrarles una recomendación que encontré gracias a WebResourcesDepot, que ofrece varias opciones de animación de scrolls con diferentes efectos.
Ver Demo de CSS Scroll Effects | Lab.Hakim
Quizás en un primer momento les resulten extrañas, pero lo bueno de estos ejemplos es el poder ver el funcionamiento y entender las posibilidades que puede llegar a brindar su aplicación.
Hay una gran variedad de efectos para visualizar y utilizar en los casos que no requieran compatibilidad entre exploradores, ya que como saben, CSS3 no está normalizado. Sin embargo, es una buena oportunidad para pensar nuevas formas de desplegar información y obtener cierto atractivo desde el contenido a partir de las animaciones básicas o modificadas.
ArcText.js es un plugin jQuery basado en Lettering.js, que nos permite crear textos que sigan una curva, algo que es muy fácil de hacer con programas como Photoshop, no era tan fácil de lograr con jQuery y CSS3, al menos hasta ahora.
CSS3 permite rotar texto de forma muy sencilla, no obstante lo que no hace es seguir una curva. Para lograrlo el plugin realizar una rotación unitaria de cada letra para luego dar el efecto curvado a toda la frase.
Visiten la demostración del plugin online.
Ejemplo de uso de ArcText
$example1.arctext({radius: 300})
Con el plugin jQuery ArcText.js ya no quedan excusas para no aplicar el efecto de texto curvo a nuestros diseños, sin sobrecargar ni afectar los tiempos de descarga, ni agregando imágenes innecesarias.
Web: ArcText.js
Koottam Social es un plugin jQuery para reemplazar los iconos de las distintas redes sociales, de esta manera vamos a poder homologar totalmente el estilo y formato de los distintos widgets, algo que en la actualidad es un gran problema a la hora de diseñar.
Koottam utiliza el API de los distintos servicios para mostrar las cantidades, de esta manera nos garantizamos una correcta correspondencia entre lo que se muestra y la actividad relacionada con la red social. Ademas el plugin permite personalizar el aspecto de los botones, sin ir más lejos al momento de descargarlo el mismo cuenta con 7 temas distintos para seleccionar, ampliando considerablemente el abanico que nos proveen las redes sociales que en general cuentan con no más de 2 o 3 alternativas.
Los botones se ven de la siguiente manera:
No olviden visitar la demostración online
Ejemplo de uso:
HTML:
< a class="fb" href="http://facebook.com/jobysblog">Facebook< /a>
Inicialización del plugin:
< script type="text/javascript">//
El plugin funciona perfectamente en los navegadores más modernos, el mismo se encuentra testeado en IE, Firefox, Chrome, Safari y Opera.
Koottam se encuentra liberado bajo licencia MIT, por lo que no vamos a tener problemas para incluirlo en nuestro sitios web.
Web: Koottam Social jQuery Plugin ~ Visto en: WebAppers
Real Shadow es un pequeño plugin desarrollado con jQuery y que hace un uso intensivo de la propiedad CSS box-shadow. Este fantástico script nos permite animar sombras de forma dinámica, teniendo como posibilidad utilizar el puntero del mouse y su ubicación para definir la orientación de las sombras.
Al momento de configurar el plugin podemos definir si deseamos que las sombras se muevan con respecto a la posición del puntero del ratón, o bien fijando unas coordenadas que son las que muestran la ubicación del foco de luz, por lo que las sombras se verán directamente en la posición opuesta, obviamente dependiendo de la forma del objeto.
En la imagen que muestro a continuación el puntero del mouse se encuentra en el centro, de ahí que las sombras se reflejan en distintas direcciones.
$(selector).realshadow(); // options are optional
$(selector).realshadow({
followMouse: false, // true by default
pageX: x, // x coordinate of the light source
pageY: y // y coordinate of the light source
c: { // shadow color
r: 1, // red channel for shadow
g: 1, // green channel for shadow
b: 1, // blue channel for shadow
}
});
El plugin funciona en la mayoría de los navegadores modernos, la única limitación es simplemente que acepten el uso de box-shadow, algo que hacen casi todos los navegadores publicados en estos últimos años.
Web: Real Shadow
elFinder es un proyecto open-source para ser utilizado como un gestor de archivos online. Esta escrito en JavaScript usando jQuery UI para el desarrollo de la interface, y su nombre no es casualidad ya que se encuentra inspirado en el Finder de Max OS X.
Los requerimientos de instalación son de lo más sencillos, tan solo necesita un navegador web moderno. Esta completamente testeado en Firefox 10+, IE 8+, Safari 5, Opera 11 y Chrome 15+. Del lado del servidor no hay demasiada ciencia, funciona en cualquier servidor web que tenga instalado una versión de PHP 5.2 o superior.
Así se ve el gestor en todo su esplendor:
Algunas de sus características principales:
Les recomiendo visitar la web del proyecto para recibir más información sobre sus distintas formas de instalación. Inclusive encontraran un apartado en donde se indican distintas metodologías para su instalación en distintos entornos como Ruby on Rails, Django y muchos más.
Web: elFinder
Fuente: http://www.kabytes.com/programacion/gestor-de-archivos-con-jquery
Muchas veces vemos cuentas regresivas en sitios que están a punto de lanzar nuevas versiones, o bien cuando estamos a punto de presenciar un gran evento. Crear estas cuentas regresivas no es nada complicado con JavaScript, no obstante si lo que buscamos es una cuenta regresiva animada y que sea atractiva visualmente, entonces jQuery Countdown puede ser lo que estamos buscando.
jQuery Countdown es un plugin jQuery, gratuito, que nos permite instalar una cuenta regresiva con apenas unas lineas de código. Y que a diferencia de otras cuentas regresivas cuenta con un diseño de lo más atractivo.
La cuenta regresiva se visualiza de la siguiente manera:
Pueden ver una demostración online directamente desde el sitio oficial del proyecto dentro de Google Code.
Ejemplo de uso:
$('#counter').countdown({startTime: "01:12:32:55"});
Ejemplo más avanzado:
$('#counter').countdown({
stepTime: 60,
format: 'hh:mm:ss',
startTime: "12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('end!!'); },
image: "digits.png"
});
Para los más preocupados por el rendimiento, el plugin solo tiene como dependencia el framework jQuery, luego la biblioteca completa tiene un peso despreciable de apenas unos 1.7 KB.
El proyecto se encuentra liberado bajo licencia Apache 2.0, lo que nos da un muy buen nivel de libertad para su uso
Web: jQuery Countdown
Demo
Fuente: http://www.kabytes.com/programacion/cuenta-regresiva-animada-con-jquery/
Las lineas de tiempo pertenecen al grupo de estructuras para mostrar información que existen desde siempre y que con las redes sociales, especialmente Facebook, resurgieron con total fuerza.
Uno de los aspectos más atractivos de las lineas de tiempo es que su estructura permite mostrar muchísima información en un espacio reducido sin dejar de ser extremadamente fáciles de entender.
Crear una linea de tiempo es sencillo si nuestra información, especialmente los elementos que la componen son de similares características entre sí, lamentablemente esto es algo que no siempre ocurre, por lo que crear una linea de tiempo se vuelve un trabajo bastante complicado. Para nuestra suerte es que existe Timeline, un plugin jQuery que es una solución brillante a la hora de generar lineas temporales.
Visita la demostración online
Este plugin funciona de forma conjunta a otros dos plugin muy usados y conocidos, estoy hablando de Tabletop.js (para gestionar la información) y Isotope (para el layout). Son apenas dos dependencias para lograr un excelente resultado.
Timeline esta testeado en Chrome, Firefox, Safari, y IE 7-9. Así que no hay excusas para no agregar una linea de tiempo a tus proyectos si lo que estas buscando es una forma simple de mostrar mucha información de forma cronológica.
Pie Menu es un fantástico plugin desarrollado con el framework jQuery y con la potencia de CSS3 para la creación de un bonito menú circular animado.
Este menú circular funciona de tal modo que las opciones se encuentran escondidas, y solamente se muestran cuando decidimos extender el menú, para realizar esta acción el menú realiza una atractiva animación, la misma se puede configurar con apenas unos pocos parámetros que nos permiten seleccionar el ángulo de salida, el radio del circulo, etc.
Otro detalle es que el menú puede configurarse con la capacidad de poder ser arrastrado. Esta opción resulta practica para los usuarios en determinadas situaciones en donde el espacio de trabajo se modifica continuamente.
Ejemplo de uso:
Estructura HTML:
< div id='outer_container' class="outer_container" >
< a class="menu_button" href="#" title="Toggle">
< span>Menu Toggle
< ul class="menu_option">
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< /ul>
< / div>
JavaScript:
$('#outer_container').PieMenu({
'starting_angel':0(Starting Angle in degree),
'angel_difference' : 90(Displacement angle in degree),
'radius':100 (circle radius in px),
});
No olviden visitar el sitio oficial del plugin, si se encuentran interesados en utilizarlo les recomiendo ver su demostración online.
Web: Pie Menu
Fuente: http://www.kabytes.com/programacion/menu-circular-desplegable-que-funciona-con-jquery-y-css3
© 2006 Miracle Design. Todos los derechos reservados
