Crear degradados con jQuery

Gradientz es un plugin para jquery creado por los británicos de parkerfox que nos permite crear degradados mediante javascript.

Como se puede observar en la imagen su uso es de lo más sencillo, solo cuenta con 5 parámetros y todos son opcionales. Otro punto fuerte de el plugin es su tamaño, poco más de 2Kb. Aquí tenéis un ejemplo de la llamada con la explicación de cada uno de los parametros:

$(selector).gradientz({
   start: "red",      // Color inicial del degradado.
   end: "blue",      // Color final del degradado.
   distance: 100,  // distancia, alto del div por default
   angle: 72         // Angulo para el degradado
   css: "right: 0px" // Css adicionales
 }

webtips 07 – drag and drop

Ya esta aquí la última entrega de webtips. En este video se muestra como crear un efecto de drag & drop como los utilizados en netvibes o igoogle.

He dejado de lado algunas mejoras que hubiera sido interesante mostrar, el script ya alcanzaba las 200 lineas de código y de hacerlo me hubiera sido imposible grabarlo todo en un único video. Por lo tanto he optado por dejarlo así. De todas formas se cubren los aspectos fundamentales del tema tratado. Espero que os guste.

descargar video
descargar código
Nos vemos en septiembre con nuevos cursos

Flip! jquery

Flip! es un plugin para jquery que permite girar capas de contenido sobre si mismas. El efecto es de lo más espectacular y jamas lo he visto en una web. Es además muy muy fácil de aplicar y esta perfectamente explicado/documentado en la web.

En la imagen he intentado reflejar el efecto, pero no me ha quedado especialmente bien, así que nada como pasarse por la web del autor y probar la demo para entenderlo.

Read more

Detectar copiar, cortar y pegar con jQuery

Vía sentidoweb me entero de la existencia de los eventos copy paste y cut en jQuery. Gracias a ello la detección de los mismos en una caja de texto es casi un juego niños.

Aquí tenéis un ejemplo de el código:

        $(document).ready(function() {
            $("#Text1").bind('copy', function(e) {
                alert('copying text!');
            });
            $("#Text1").bind('paste', function(e) {
                alert('pasting text!');
            });
            $("#Text1").bind('cut', function(e) {
                alert('cut text!');
            });
        });

También podéis echarle un vistazo a esta tabla que muestra la compatibilidad de los distintos browsers con distintos elementos (formularios, imágenes y demás)

Artículo original en devcurry.com

webtips 06 – Ventanas modales 2.0

Nueva entrega de webtips. En está ocasión el tema tratado son las populares ventanas modales, como las del lightbox, haciendo uso de jquery y css. El video es larguillo, 35 minutos, pero creo que se tratan algunos puntos bastante interesantes a la vez que desconocidos.

Read more

Easy Slider

Easy Slider es un plugin para jquery que permite crear sliders horizontales y verticales de forma sencilla. Cuenta con varias opciones default fácilmente personalizables para ser adaptado a diferentes necesidades.

Lista de funcionalidades:
- Slide automático
- Slide continuo
- Botones “ir al principio” e “ir al final”
- Slide vertical
- Múltiples sliders por página

Aquí tenéis algunas demos: demo horizontal, demo vertical

Más info y descarga del plugin en el post original del autor.

Scrolling Background Effect

El efecto de cabecera de youlove.us es uno de los más bonitos que he visto últimamente.

La técnica usada es de lo más simple, una imagen de 4000px de alto deslizándose por detrás de un png con fondo transparente. El fondo lo mueven mediante jquery acompañado del plugin backgroundposition.js de Alexander Farkas.

En el blog de la página encontramos un artículo donde comparten y explican el código javascript.

Si habéis seguido el videotutorial “efecto zoom con jquery” no tendréis ningún problema para entenderlo, hace uso de la propiedad background-position de css para crear la animación.

webtips 05 – Efecto zoom

Quinta entrega de webtips. Con este vídeo entramos en la recta final de la serie ya que en septiembre comenzará un nuevo curso sobre seguridad web.

Si queréis podéis dejar algún comentario explicando que os ha parecido la serie de vídeos, si os gustaría que explicara alguna cosa más, profundizar más en algún tema/apartado… lo que queráis.

Tenéis la opción de descargar el vídeo (142 mb – 1440×900px) y el código.

NOTA:
En el código descargable la propiedad opacity del <div id=”cursor”> es asignada mediante javascript en lugar de css.
El código ha sido testeado y funciona correctamente bajo Mozilla Firefox 3.0/3.5 preview, Google Chrome e Internet Explorer 8.

Read more

Lo mejor de la semana en la red

Google Chrome 2.0
Versión que trae mejoras de estabilidad y velocidad. En cuanto a nuevas funcionalidades… poquita cosa, opción de rellenar automáticamente los formularios web y poco más que mencionar.

Dell prueba android en sus netbooks
Vídeo de un ingeniero de Dell mostrando un Mini 10v funcionando con la versión Cupcake de Android.

Ubuntu 9.10 alpha 1 apunta maneras
Parece que Ubuntu 9.10 va a ser una buena versión, de momento la primera alpha ya muestra mejoras importantes de rendimiento y en acceso a disco.

Gmail labs añade traducción a los correos
Ya es capaz de traducir automáticamente cualquier e-mail que nos llegue tan sólo haciendo un simple clic.

Agresiva campaña de pepephone
¡Mira que me voy! Una campaña fresca y un tanto desvergonzada que, a buen seguro, no dejará indiferente a nadie

Calendario con jQuery
Plugin que te permite generar un calendario flexible y ligero para tus aplicaciones web, muy al estilo de Google Calendar.

Explain en Mysql
Función que nos puede ayudar a la hora de optimizar nuestra tablas y consultas sql.

Webtips 02 : Efecto con jquery 2/2

Segundo videotutorial (segunda parte), 15 minutos de vídeo donde veremos los últimos pasos para crear el efecto que empezamos la semana pasada.

Tenéis el vídeo en youtube y el link para descargar el vídeo en hd (73 mb – 1440x 900 px).

Read more

Webtips 02 : Efecto con jquery 1/2

Segundo videotutorial, veremos un curioso efecto con css  y jquery inspirado en el efecto  parallax. Aquí teneis la primera parte del video, 26 min, que finalizara la semana que viene. Creo que este video ha quedado bastante mejor que el anterior. Pero bueno… ya me contareis

Como siempre os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (133 mb – 1440x 900 px).

Read more