Sumolari.com » jQuery

Comienza el desarrollo de WP Carousel 0.6

Sumolari — Fri, 30 Jul 2010 13:55:35 +0000

No tenía pensado retomar el desarrollo de WP Carousel hasta finales de verano, pero durante estos días que he estado fuera he recibido muchas sugerencias sobre nuevas características, que sumadas a las que tenía en mente al liberar la versión 0.5 hacen que me decante por comenzar el desarrollo de la próxima versión hoy mismo. No me gusta dar fechas de lanzamiento, pero esta versión estará disponible antes de finales de verano, y la siguiente gran revisión tardará mucho en llegar (no tengo pensados grandes cambios después de estos).

En esta versión me centraré en la sección de opciones (veréis muchos cambios a nivel de usuario y otros tantos a nivel de desarrolladores) y en un nuevo motor para los carruseles. A continuación os resumo las principales novedades.

Nuevo motor, nuevas posibilidades

Hasta ahora usaba Step Carousel para hacer funcionar los carruseles, sin embargo no veo que avance demasiado y otros scripts ya le superan en funciones útiles, como por ejemplo, el desplazamiento vertical en lugar de horizontal. Aún no he decidido cuál será el sucesor de Step Carousel, pero ya podéis dar por seguro que a partir de ahora Step Carousel no será el script que haga funcionar vuestros carruseles. Eso sí, jQuery seguirá siendo el framework que use el próximo motor.

Lamentablemente, este cambio requiere también cambio a nivel de themes, ya que el código necesario para crear los carruseles difiere en cada script. Por este motivo Step Carousel seguirá estando disponible dependiendo del theme activado. La API de themes variará bastante (lo explicaré más adelante), y una de las nuevas variables que añadiré indicará si el theme soporta o no el nuevo motor. Por defecto se supondrá que no lo soporta, así que a no ser que el theme se haya actualizado, se tomará Step Carousel como motor.

Si el theme está actualizado (todos los themes por defecto estarán actualizados) nos permitirá escoger el motor que queramos y dependiendo de lo que hayamos escogido se nos mostrarán unas opciones u otras diferentes. Un theme podrá tener versiones para Step Carousel y para el nuevo motor en un mismo paquete.

No lo voy a comentar con más profundidad, pero al tener un nuevo motor tendremos más opciones a la hora de mostrar el carrusel, que dependerán del motor que acabe decidiendo usar.

Nueva API de themes

Algo que habéis pedido muchos es poder cambiar los colores de los themes. Esta característica no me parece demasiado importante ya que cambiar los colores en el CSS es realmente simple, y hacer modificaciones más complejas requiere conocimientos básicos de programación en PHP, no un editor WYSIWYG con esteroides. Sin embargo en la nueva API de themes añadiré un sistema para que los autores de los themes puedan añadir campos de opciones en la página del carrusel, de modo que cada theme tendrá sus opciones únicas de forma más visible. Yo por mi parte añadiré un theme algo más personalizable, aunque no esperéis poder cambiarlo todo sin saber nada de código, los editores WYSIWYG se los dejo a Adobe.

Estas mejoras en la API de themes también repercutirán en la API de Extras, ya que seguramente añada la posibilidad de usar más campos en los formularios para mostrar contenido generado por Extras.

Nuevo diseño de la página de opciones

Toda la zona de opciones estará rediseñada y mejorada. La idea es aplicar lo aprendido al diseñar la interfaz Drag & Drop para crear una interfaz más cómoda, sencilla y potente para las opciones. Las únicas cosas que seguro que voy a añadir son el soporte para campos creados por los themes (a través de la nueva API) y el guardado AJAX. Todo lo demás aún está en el aire.

Mejoras en la interfaz Drag & Drop

También mejoraré algunas cosas de la interfaz Drag & Drop. La petición más popular ya está lista: la posibilidad de ocultar y mostrar contenido del carrusel está en la versión en desarrollo. Podéis ver cómo queda en la imagen de la izquierda. No tiene demasiada dificultad entender el funcionamiento y facilita bastante las cosas.

La verdad es que no sé cómo se me pasó esto durante el desarrollo de la nueva UI. Lo cierto es que hasta yo lo pasé mal a veces al añadir cierto contenido al carrusel, pero no se me ocurrió la idea hasta que me llegó la propuesta.

Otra novedad que me gustaría añadir es mostrar una miniatura de la imagen que se mostrará del artículo o del contenido personalizado (etiquetas, autores y categorías quedan fuera porque aún no he dado con una forma eficaz de mostrar las imágenes de diversos artículos en poco espacio), aún no sé las dificultades con las que me encontraré, pero me parece que esta característica de la antigua interfaz era muy interesante y se perdió (lamentablemente) con el paso al Drag & Drop.

Nuevo sistema de Backup

El sistema de Backup de WP Carousel es de lo más sencillo: copiar y pegar. Sin embargo se requiere de otro equipo donde almacenar la copia en un archivo creado manualmente por el usuario. Me ha llegado una propuesta realmente interesante para un nuevo sistema de Backup y me gustaría implementarla en la próxima versión.

El nuevo sistema crearía copias de seguridad cada X tiempo o cada cierta cantidad de cambios en el carrusel, y las almacenaría en la Base de Datos de WordPress. Dependiendo de cómo esté configurado el plugin, enviaría por email el Backup cada vez que se crease, permitiendo desde la página de Backup descargar el archivo de Backup, eliminar el Backup de la Base de Datos o restaurar el carrusel desde un Backup, aunque me gustaría seguir permitiendo copiar y pegar el código de Backup de forma manual, ya que es realmente cómodo para aquellas ocasiones en las que se presiente que el siguiente cambio va a estropear el carrusel (y realmente práctico durante el desarrollo).

Vídeos

Sí, muchos lo habéis pedido, y sí, mucho habéis esperado. Para mí no tiene demasiada utilidad, pero creo que para muchos es algo prácticamente imprescindible. WP Carousel permitirá añadir vídeos a partir de la versión 0.6. Aún no tengo decidido del todo cómo implementaré esta opción en la zona administrativa, así que se admiten propuestas. Estoy en contacto con Viper007Bond, autor de Viper’s Video Quicktags, para utilizar este plugin como intermediario entre los vídeos y WP Carousel, siendo necesario tener activado el plugin Viper’s Video Quicktags para poder mostrar vídeos.

Como veis, son muchas novedades que requerirán tiempo de desarrollo, tiempo que estará compartido con mis estudios de Objective-C que poco a poco van avanzando y ya están dando como fruto pequeñas y simples aplicaciones para el iPhone carentes de momento de utilidad alguna.

Una versión para durar

Todos estos cambios van enfocados a crear una versión estable que permanecerá sin cambios grandes durante una buena temporada. Hasta ahora cada relativamente pocos meses liberaba una nueva versión de WP Carousel, sin embargo quiero dejar esta política de lado para disponer de más tiempo para programar en Objective-C y aprender más y más.

Creo que con todas estas novedades WP Carousel se habrá convertido en un plugin digno de ser considerado versión 1.0 (a pesar de que la próxima versión será la 0.6). A lo largo de este año WP Carousel ha ido mejorando notablemente y sinceramente, me parece que he implementado todas las características que habéis ido pidiendo a lo largo del tiempo a excepción de aquellas que los medios técnicos no me permitían añadir.

Me alegra ver que ya se ha descargado más de 14000 veces y que la opinión de aquellos que lo prueban es muy buena. Cuando libere la próxima versión seguro que a muchos de los que no les acababa de gustar WP Carousel cambian de opinión, porque voy a implementar prácticamente todas las características que habéis pedido a lo largo de este año de vida del plugin. De hecho la única característica que no voy a implementar es la lista de categorías y de tags, una característica que tenía planeada para WP Carousel 0.5 pero que finalmente descarté debido a qué no encontré un modo sencillo de asignarle una imagen a una categoría o a una etiqueta.

Haz que WordPress cargue los frameworks desde servidores externos

Sumolari — Wed, 17 Feb 2010 19:18:29 +0000

WordPress utiliza varios frameworks Javascript para hacer diversos efectos y mejorar a interfaz, además de que algunos themes se aprovechan de esto para añadir mejoras al diseño utilizando funciones que ofrecen estos frameworks. Recurrir a estos métodos ocasiona un aumento del tiempo de carga de la página y del ancho de banda consumido por el servidor al enviar los archivos solicitados al usuario, sin embargo, podemos hacer que WordPress cargue estos archivos desde servidores externos que nos reducen el ancho de banda gastado y que, en algunos casos, son más rápidos que nuestro servidor. Además, usar este método también nos permite cargar automáticamente la versión más actualizada de los diversos frameworks, evitando tener que volver a subir las nuevas versiones a nuestro servidor.

En este artículo me centraré en jQuery, jQuery UI y Prototype, los frameworks que utiliza actualmente Sumolari.com, pero antes de hacer que WordPress cargue los archivos desde servidores externos (usaremos los de Google), veremos primero el método general.

wp_deregister_script, wp_register_script y wp_enqueue_script

WordPress tiene varias funciones para gestionar el código Javascript que se carga en cada página. Esta funciones permiten, a grandes rasgos, añadir un script con un nombre identificatorio (del cual se definen la URL del archivo, las dependencias, la versión o incluso si se puede cargar en el pie de página o no), eliminarlo o cargarlo.

Para el primero de todos los usos, recurriremos a la función wp_register_script. Esta función tiene 5 parámetros: $handle, $src, $deps, $ver e $in_footer.

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

La primera de todas debe contener el nombre identificatorio del script. Yo recomiendo usar nombres coherentes, así evitamos posibles problemas al usar muchos scripts y no distinguir unos de otros por su nombre.

El segundo parámetro de la función indica la URL del archivo a cargar. Tanto el primer parámetro como éste son obligatorios, los otros tres son opcionales y son, por orden de aparición, la matriz que indica las dependencias (estas dependencias se deben indicar usando el nombre identificatorio del script correspondiente), la versión del archivo a cargar (se utiliza para evitar problemas con la caché y demás, pero en muchos casos basta con dejarlo en blanco) y si el script se puede cargar al final de la página o no.

La función wp_deregister_script es la que elimina un script previamente registrado. Esto nos permitirá eliminar los script registrados por WordPress y añadir los nuestros modificados. El uso sería el siguiente:

wp_deregister_script( $handle );

La función wp_enqueue_script es la que le indica a WordPress que debe cargar cierto script. Admite los mismos parámetros que wp_register_script, sólo que en la primera, a diferencia de la segunda, el nombre identificatorio le indica a la función qué script debe cargar (ya que esta función no registra ningún script) y sólo usará los demás parámetros en caso de no existir el script solicitado.

El uso es el siguiente:

wp_enqueue_script( $handle ); // Mínimo
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); // Parámetros opcionales

Tenéis más información sobre estas funciones en el Codex de WordPress.

Dicho lo cual ya podemos pasar a aplicar lo visto hasta ahora.

Cargando jQuery, jQuery UI y Prototype desde los servidores de Google

Una pequeña aclaración antes de comenzar: podemos cargar cualquier script de WordPress (lista completa) desde cualquier servidor, de hecho veréis como no es nada complicado hacerlo.

Los scripts están alojados en los servidores de Google, que ofrecen una buena velocidad y se actualizan con cada nueva versión. También almacenan versiones antiguas de los frameworks, con lo que podemos optar por cargar una versión actualizada, la última o una más antigua.

El proceso para cargar los scripts es el siguiente:

Eliminamos (des-registramos) el script correspondiente a los frameworks jQuery, jQuery UI y Prototype de WordPress
Registramos de nuevo los tres scripts anteriores, cambiando la URL de los archivos
Cargamos los scripts recién registrados

Esto en código quedaría así:

// jQuery
		wp_deregister_script(‘jquery’); // Des-registramos jQuery
		wp_register_script(‘jquery’, ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, ”); // Registramos de nuevo jQuery, con la URL de la última versión del framework alojada en el servidor de Google
		wp_enqueue_script(‘jquery’); // Cargamos jQuery
		// jQuery-UI
		wp_deregister_script(‘jquery-ui-core’); // Des-registramos jQuery-UI
		wp_register_script(‘jquery-ui-core’, ("http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"), false, ”); // Registramos de nuevo jQuery-UI, con la URL de la última versión del framework alojada en el servidor de Google
		wp_enqueue_script(‘jquery-ui-core’); // Cargamos jQuery-UI
		// Prototype
		wp_deregister_script(‘prototype’); // Des-registramos Prototye
		wp_register_script(‘prototype’, ("http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"), false, ”); // Registramos de nuevo Prototype, con la URL de la última versión del framework alojada en el servidor de Google
		wp_enqueue_script(‘prototype’); // Cargamos Prototype

Como veis, no tiene mucho misterio y es muy fácil ampliarlo a otros scripts. Como siempre, cualquier duda o sugerencia la podéis hacer en los comentarios.

Nota: La versión que carga por defecto WordPress de jQuery incluye una llamada a la función jQuery.noConflict, por lo que en el primer script que utilice jQuery deberemos hacer una llamada a esta función para asegurar que todos los scripts funcionen correctamente.

Creando múltiples carruseles con jQuery

Sumolari — Sat, 24 Oct 2009 16:25:24 +0000

En vista de que algunos tenían problemas para mostrar varios carruseles con aquel tutorial que escribí sobre cómo crear un carrusel con jQuery, hoy voy a explicar cómo crear varios carruseles, a modo de continuación del anterior tutorial, así que os recomiendo leerlo antes de continuar con éste.

Bien, partiremos del código que usé en la demo (que podéis descargar aquí), y tendremos que cambiar tanto el CSS como el Javascript que hay incrustado en el HTML, dejando intacto los dos primeros códigos Javascript que llamamos (jQuery y Stepcarousel), en definitiva, que partiremos del siguiente código:





Carousel con jQuery

















Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble

Vale, primero nos centraremos en el CSS, que es la parte más fácil de adaptar, lo que tenemos que hacer es cambiar todas las líneas que definan un estilo para el elemento con ID carousel, ya que al haber varios carruseles necesitaremos un estilo común a ellos, y no es lo mejor usar el mismo ID para dos elementos (además de que no sería compatible con Stepcarousel), así que básicamente lo que tenemos que hacer es cambiar #carousel por .carousel, dejando el código CSS así:

/* Carousel */
.carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}
.carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}
.carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}
.carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
.carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}
.carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}
/* Botones del carousel */
.button-prev {
height:250px;
width:35px;
float:left;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:10px 0 0 10px;
}
.button-prev a {
display:block;
padding:5px;
margin-top:105px;
}
.button-next {
height:250px;
width:35px;
float:right;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:0 10px 10px 0;
}
.button-next a {
display:block;
padding:5px;
margin-top:105px;
}
a img {
border:none;
}

Como os podréis imaginar, ahora tendremos que actualizar el código HTML del carrusel para que se adapte al nuevo CSS. Lo único que hay que hacer es añadir la clase carousel al div con ID carousel. Fácil, ¿verdad? El código quedará así:












Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble

Lo siguiente será crear el código HTML del segundo carrusel. En mi caso serán idénticos (tendrán los mismos elementos), así que lo único que tendré que hacer será duplicar el código HTML y cambiar la ID del segundo carrusel de “carousel” a “carousel2“, de forma que el código quedará así:












Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble















Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble

Ya sólo queda adaptar el código Javascript. Lo primero que tenemos que hacer es añadir una línea más al código original que nos evitará problemas: defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]}, . A continuación duplicaremos el código y añadiremos un punto y coma (;) al final del código original. Por último cambiaremos la ID que hay en el segundo código de “carousel” a “carousel2“. El código Javascript quedaría así:

stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
});
stepcarousel.setup({
galleryid: ‘carousel2′, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

Y con esto ya lo tenemos acabado. El código final que tendríamos sería este:





Carousel con jQuery

















Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble















Este carousel es una demostración





de un tutorial de Sumolari.com.





Puedes ver el tutorial en cuestión





en este artículo del blog.





Lorem ipsum dolor sit amet.





Amet sit dolor ipsum lorem.





Bla bla bla bla bla bla bla





Ble ble ble ble ble ble ble

Como en el tutorial anterior, he publicado una pequeña demo para que veáis el código en acción, que podéis descargar desde aquí.

Nota: Acabo de ver que han actualizado el script de Stepcarousel y le han añadido algunas funciones nuevas. En cuento tenga algo de tiempo libre (últimamente ando algo ocupado) actualizaré WP Carousel.

Crea un carrusel con jQuery

Sumolari — Thu, 16 Apr 2009 17:16:40 +0000

En muchas páginas webs hay carruseles que muestran una imagen y un pequeño texto. Un ejemplo de estos carruseles lo podemos ver algunas páginas de empresas de diseño web, donde nos muestras el nombre de uno de sus diseños y una pequeña captura. También son frecuentes en webs de revistas, usados para mostrar los artículos más destacados.

Desde hacía tiempo quería crear un carrusel con jQuery y hace un rato he encontrado un plugin de este framework que es precisamente lo que andaba buscando: Step Carousel.

Para añadir el carrusel basta con enlazar jQuery y el plugin mediante

También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:

#carousel { position: relative; /* Necesario */ overflow: hidden; /* Necesario */ height: 250px; margin-left:35px; background:#5B5B5B url(carousel-bg.png) bottom left repeat-x; } #carousel .belt { position: absolute; /* Necesario */ left: 0; top: 0; margin:0 10px 10px 0; } #carousel .panel { width:265px; float: left; /* Necesario */ overflow: hidden; margin: 15px; padding:7px; border:1px solid #5B5B5B; background:#383838 url(carousel-panel-bg.png) bottom left repeat-x; }

Finalmente, este es el código HTML que usaremos en el carrusel:

Anterior Posterior

Este carousel es una demostración

de un tutorial de Sumolari.com.

El código es sencillo de entender y fácil de personalizar. Por ejemplo, para añadir más paneles basta con añadir más bloques, que tienen la siguiente estructura:

de un tutorial de Sumolari.com.

Si lo que queremos es que el link pase dos paneles en lugar de uno, basta con cambiar el -1 o el 1 por -2 o 2 respectivamente.

He montado una demostración del carrusel que se puede ver aquí.

Por último, podéis descargar la demostración desde aquí (incluye imágenes, Javascript y CSS).

Ordena tablas con jQuery y Tablesorter

Sumolari — Mon, 19 Jan 2009 20:09:21 +0000

Hace un par de días me vino a la cabeza la idea de ordenar tablas por orden ascendente y descendente. Las pocas veces que he hecho algo así, he recurrido a usar PHP y variables de URL (algo como archivo.php?columna=nombre&orden=ascendente), pero es lento de usar y de programar.

Así que se me ha ocurrido buscar una solución alternativa usando jQuery, y buscando un poco por Google he descubierto Tablesorter, un plugin de jQuery que nos permite ordenar las tablas de forma rápida y fácil.

Para comenzar, nuestra tabla debe tener un código similar a este:

Nombre Apellidos Email Web

Pepe García pepe_garcia@gmail.com http://www.pepegarcia.com

Paco Pérez paco_perez@yahoo.com http://www.pacoperez.com

Iniciamos Tablesorter con este otro código Javascript:

$(document).ready(function() { $("#myTable").tablesorter(); } );

Sin duda, es un plugin de jQuery que utilizaré bastante para futuros proyectos.

Más información, demostración, descarga y documentación en tablesorter.com.

Valida formularios con jQuery

Sumolari — Thu, 18 Dec 2008 15:20:20 +0000

Cuando tenemos que validar los datos de un formulario podemos recurrir a Javascript y crear nuestra función de validación, pero también podemos recurrir a jQuery para validar el formulario de forma rápida y sencilla.

Para esto descargarmos jQuery y el plugin Validate.

Pasos previos

En el header del archivo que contiene el formulario añadimos:

A continuación añadimos:

Para distinguir el formulario al que se le aplica la validación, jQuery busca el que tenga por id formulario. Podemos cambiar #formulario por #loquesea, siendo loquesea la id del formulario.

El código HTML del formulario puede ser una cosa así:

Nombre: Contraseña: Repite contraseña: Email:

Ahora tenemos que definir qué campos necesitan validación, para ello disponemos de dos métodos:

Ponerle una clase específica a cada input, por ejemplo, class=”required” harí que el campo fuese obligatorio.

Definir los campos que requieres validación y qué tipo de validación requieren en el código Javascript que hemos añadido al principio.

El método de las clases

Comencemos por el primer método: añadiendo clases a los campos del formulario.

Si queremos que todos los campos sean obligatorios basta con añadirles a todos class=”required”, ahora si dejamos en blanco un campo con esta clase nos mostrará un aviso.

Si le ponemos de clase “email”, buscará la estructura de una dirección de correo electrónico, en casi de no ser una estructura correcta (nombre@dominio.nnn), mostrará un aviso.

Podríamos dejar así el formulario anterior:

Nombre: Contraseña: Repite contraseña: Email:

El método de la definición

El segundo método es un poco más complejo. Volvemos al punto en el que añadimos:

Ahora en lugar de esto debemos añadir:

¿Cómo funciona?

Bien, después de rules:{ añadimos el id del campo de nuestro formulario seguido de las reglas que debe cumplir.

En este ejemplo el campo pass_2 es obligatorio, y además debe ser igual a pass_1, si no lo es mostrará un aviso.

Podemos añadir más reglas, como caracteres máximos, rango de caracteres (sólo para número enteros), fechas, etc, podéis ver una lista de todas las reglas aquí.

Ambos métodos son compatibles, podemos usar los dos en el mismo formulario.

Cualquier duda que tengáis no dudéis en preguntarla en los comentarios, espero que os sea útil.

Crea un panel deslizante con jQuery

Sumolari — Sat, 01 Nov 2008 08:17:56 +0000

Si ya os conté cómo evitar conflictos entre jQuery y Mootools, hoy os explico para qué estaba usando jQuery en el nuevo diseño.

Probablemente os habréis fijado en el link que dice Sidebar, en el index del blog. Pues bien, este link despliega la sidebar superior del blog.

Para añadir este efecto a tu web debes seguir unos pasos sencillos, comenzando por descargar jQuery.

Ahora abrimos el archivo en el que queremos añadir el efecto.

El código Javascript

Nos situamos en antes del y añadimos las siguientes líneas:

La primera línea llama a jQuery, tened en cuenta que la URL al archivo debe ser la correcta, sino no funcionará.

La tercera indica que se realicen las acciones una vez la página esté cargada.

La cuarta determina qué clase llevará el link que activará el efecto (.boton es una clase, si fuese #boton sería una id) e inicia una condición.

La quinta indica qué id tiene la capa que se ocultará / mostrará, e inicia el efecto.

La sexta cierra la condición iniciada en la cuarta línea.

La séptima no es necesaria. Lo que hace es ocultar la capa. Podría hacerlo mediante CSS, pero en caso de no estar activado javascript no se mostraría nada, mientras que en este caso si no estuviese el javascript activado se vería la capa, pero sin efecto.

La octava línea indica al script el fin de las acciones que debe llevar a cabo jQuery.

Podemos personalizar un poco más el script, cambiando en la línea 10 slow por normal o fast (para modificar la velocidad del efecto).

El código HTML

Lo último que nos queda es añadir el código HTML correspondiente al link de ocultar / mostrar y al contenido que se ocultará / mostrará.

Comenzaremos con el enlace, que debe tener de clase boton. El código que uso yo para el enlace es:

Ver / Ocultar contenido

Pero se pueden hacer variaciones, lo único necesario es la clase boton.

Ahora añadimos la capa con id desplegable, que será la que se ocultará y se mostrará. El código que uso yo es:

Contenido oculto

Sólo verás este contenido si despliegas el panel.

Como antes, este código se puede variar.

Y ya tenemos completo el efecto.

Demo

Podéis ver el efecto en este mismo blog (en la sidebar superior) o en esta página de demostración.

Añade un efecto hover animado con jQuery

Sumolari — Sat, 04 Oct 2008 16:00:51 +0000

Uno de los principales motivos por los que me gusta Mootools es la cantidad de efectos que podemos lograr con él.

Sin embargo hoy os traigos un efecto logrado con jQuery y creado por Timothy van Sas.

El código

Javascript

$(function() { $('ul.hover_block li').hover(function(){ $(this).find('img').animate({top:'182px'},{queue:false,duration:500}); }, function(){ $(this).find('img').animate({top:'0px'},{queue:false,duration:500}); }); });

CSS

ul.hover_block li{ list-style:none; float:left; background: #fff; padding: 10px; width:300px; position: relative; margin-right: 20px; } ul.hover_block li a { display: block; position: relative; overflow: hidden; height: 150px; width: 268px; padding: 16px; color: #000; font: 1.6em/1.3 Helvetica, Arial, sans-serif; } ul.hover_block li a { text-decoration: none; } ul.hover_block li img { position: absolute; top: 0;left: 0; border: 0; }

HTML

Text Text.

Podemos ver el ejemplo que ha creado Timothy para hacernos una idea de cómo queda.

Vía Anieto2k.

Como evitar conflictos entre Mootools y jQuery

Sumolari — Sun, 14 Sep 2008 22:00:34 +0000

No sé a vosotros, pero a mí trabajar con frameworks me facilita mucho la cosa, ya que no sé mucho de javascript y puedo lograr bonitos efectos sin tener que invertir mucho tiempo.

El último trabajo que he realizado con frameworks de javascript ha sido en el diseño de este blog.

WordPress utiliza jQuery para algunas funciones, y yo personalmente prefiero Mootools. Esta vez he decidido usar ambos, y el principal problema que he encontrado han sido los conflictos entre ambos.

Para evitar tener que usar solo un frameworks, podemos recurrir a una función que nos permitirá usar ambos, la función jQuery.noConflict().

¿Qué hace esta función? Hace que en lugar de usar el caracter $ en las funciones, usemos jQuery, evitando así los conflictos entre ambos frameworks.

Un ejemplo: Si antes teníamos este código javascript (obviamente incompatible con Mootools):

$(document).ready(function(){ $(".btn-slide").click(function(){ $("#slide_top-sidebar").slideToggle("slow"); $("#slide_top-subsidebar").slideToggle("normal"); }); $("#slide_top-sidebar").css({ display: 'none', }); $("#slide_top-subsidebar").css({ display: 'none', }); });

Para hacerlo compatible con Mootools añadiremos la función jQuery.noConflict() y cambiaremos las $ por jQuery, dejando así el código javascript:

jQuery.noConflict(); jQuery(document).ready(function(){ jQuery(".btn-slide").click(function(){ jQuery("#slide_top-sidebar").slideToggle("slow"); jQuery("#slide_top-subsidebar").slideToggle("normal"); }); jQuery("#slide_top-sidebar").css({ display: 'none', }); jQuery("#slide_top-subsidebar").css({ display: 'none', }); });

Sencillo, ¿verdad?

Nombre	Apellidos	Email	Web
Pepe	García	pepe_garcia@gmail.com	http://www.pepegarcia.com
Paco	Pérez	paco_perez@yahoo.com	http://www.pacoperez.com