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.
Desde la red de desarrolladores de Mozilla llega a nosotros esta fantástica propuesta que consiste en un efecto de plegado de papel para ocultar elementos.
Este efecto sería una alternativa completamente nueva para realizar el trabajo de ocultar-mostrar elementos, complementando los clásicos efectos fade y sliding que se utilizan comúnmente para esta clase de tareas tremendamente conocidos por los programadores que suelen trabajar con el framework jQuery.
PaperFold esta desarrollado utilizando tecnologías como CSS3, JavaScript y HTML5.
Actualmente el proyecto es tan solo una propuesta de un desarrollador, pero viendo su buena aceptación no dudo que sea pulido y mejorado para ser utilizado de forma masiva.
Web: PaperFold
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
En la búsqueda de opciones originales para presentar galerías fotográficas, se pueden encontrar diferentes métodos técnicos o se puede optar por opciones vistosas que solo cumplan con una función decorativa.
Al utilizar este tipo de elementos, debemos tener en cuenta que poseen una estética propia y generan un entorno en consecuencia, es por ello que si necesitan realizar algún proyecto extremadamente sobrio, puede que no sea la mejor opción.
Descargar Taped Image Corners | PixelsDaily
En cambio, si lo que desean es simplemente destacar una galería de forma fácil y rápida, este efecto de cintas puede resultarles muy útil. Como podrán ver cuando descarguen el recurso, el funcionamiento es muy simple y no posee mayores complicaciones para su utilización. Hay siete opciones con diferentes posiciones de cinta adhesiva en sus esquinas, todo elaborado en html y css.
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
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/
ChiliStats es un pequeño sistema de estadísticas web, desarrollado con PHP y MySQL, para el control y seguimiento de los visitantes. Muy sencillo y fácil de instalar.
Entre las principales características podemos destacar:
Al momento de escribir esta entrada la versión vigente del sistema es la 3.0, en la cual se mejoraron y agregaron muchas de las principales características del sistema de estadísticas.
Pueden ver una demostración totalmente funcional en la web oficial de ChiliScripts.
Web: ChiliStats
Via: http://www.kabytes.com/programacion/sistema-de-estadisticas-php-mysql
© 2006 Miracle Design. Todos los derechos reservados
