Cargador de vídeos dualSlider en jQuery

Cargador de vídeos dualSlider en jQuery

Cargador de vídeos en jQuery

Cargador de vídeos en jQuery

El diseño web con jQuery además de haber conseguido una mayor usabilidad y velocidad de navegación, nos proporciona una infinidad de soluciones a cuestiones que hasta ahora eran muy laboriosas y pesadas tanto de elaborar como a la hora de cargar la página. Hoy os dejo el dualSlider, otro slide en este caso utilizado como cargador de vídeos que además de ser muy vistoso, nos permite añadir acciones muy útiles a la vez que reproducimos nuestros vídeos (textos y titulares adicionales, reproducción automática…)

El paso de un vídeo a otro puede ser manual o automático, pudiendo además controlar fácilmente la velocidad de transición de uno a otro.

Por supuesto que código gratuito listo para funcionar. Podéis ver el funcionamiento y descargar todos los archivos necesarios en  http://www.hugoandcat.com/DualSlider/index.html

Si queréis ver otros slides en este blog de diseño, visitad los siguientes post

Diseño Web. Animación con jQuery

Diseño Web. Animación con jQuery

Magia con jQuery

Magia con jQuery

Ya conocéis mi debilidad por usar Ajax en diseño web, me parece una solución que además de dar usabilidad a nuestra web, nos da oportunidad de sorprender al usuario, captando así su atención.

En esta ocasión vamos a hablar de unas cuantas librerías para hacer animaciones.
Muchos de los ejemplos que vais a ver están en bruto, es decir, no llevan nada de diseño, en vosotros estará el hacer que esas animaciones sean todo lo espectaculares que vuestra imaginación os sugiera.

(más…)

Sexy LightBox 2.2 y compañía…

Sexy LightBox 2.2 y compañía…

LightBox

LightBox

Bien, como todos sabéis los popup hace tiempo que pasaron a la historia del diseño web.

Afortunadamente y debido a varios motivos (usabilidad, y popup killers en navegadores) esta práctica ha desaparecido y ha dejado paso a otro tipo de popups, menos agresivos y más vistosos.

Hoy, buscando un LightBox para un proyecto nuevo, me he dado cuenta de que no tenía material en el blog, así que aquí os dejo unas cuantas reseñas que seguramente os puedan ayudar.

(más…)

Espectacular jQuery

Espectacular jQuery

Espectacular jQuery

Espectacular jQuery

«Diseño web con jQuery, cada vez más y más utilidades para hacer un sitio bueno usable y vistoso», esto es lo que una y otra vez vemos en todos los post relacionados con el jQuery.

Sigo recopilando utilidades para el diseño web, y sigo sorprendiéndome. No existe límite, las distintas librerías Ajax, como el jQuery o Mootools, nos proporcionan herramientas suficientes para poder construir un sitio web usable y vistoso.

Hoy vamos a ver, desde cómo hacer la galería de productos de Apple, hasta un modo impresionante de ocultar y mostrar información.

(más…)

Carro de la compra con Ajax

Carro de la compra con Ajax

Carrito de la compra con Ajax

Carrito de la compra con Ajax

El diseño web se ha rendido definitivamente a las  funcionalidades de AJAX, no sólo porque nos permite actualizar nuestra página sin refrescar la pantalla, si no también por la gran ayuda que supone para el diseñador a la hora de diseñar un sitio usable.

Existen cientos de ejemplos que respaldan su uso, en este blog ya hemos hablado en varias ocasiones de ejemplos muy útiles realizados con Ajax. En esta ocasión, vamos a ver un ejemplo en el que la usabilidad de una tienda online se hace infinitamente más clara y visual para el usuario.

(más…)

Redondear divs e imágenes con Mootools

Redondear divs e imágenes con Mootools

Redondear esquinas de imágenes y capas

Redondear esquinas de imágenes y capas

Una práctica muy común en diseño web es redondear las imágenes o las capas que contienen nuestro texto. Existen muchas formas de hacer esto, desde meter un background para las capas o usar CSS en las imágenes hasta el que propongo hoy, usar Mootools.

Phatfusion nos enseña cómo hacerlo. Necesitamos tener la biblioteca Mootools v1.11 y es compatible con los navegadores más usados hoy en día, tanto para pc como mac.

Ver ejemplo y descargar código

Paneles deslizables con jQuery

Paneles deslizables con jQuery

Paneles deslizables en jQuery

Paneles deslizables en jQuery

Css-Triks es un blog de diseño web referente para muchos de nosotros.

Hace unos días encontré un post que me está sirviendo de mucha ayuda en un nuevo diseño web que tengo entre manos. Me parece genial, es muy ligero y es una solución muy buena para enseñar productos en una web.

Se trata de una galería que va mostrando y ocultando los divs que hemos definido en la página, con un efecto zoom.

Lo podéis descargar gratuitamente en el post original. Espero que os sirva.

PageSlide con jQuery

PageSlide con jQuery

PageSlide con JQuery

PageSlide con JQuery

¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.

Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.

Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.

Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!

Más información sobre PageSlide

Todo es posible con JQuery

Todo es posible con JQuery

Demostraciones de lo que se puede llegar a hacer con JQuery

Demostraciones de lo que se puede llegar a hacer con JQuery

Esta es una lista de algunos sitios en los que podemos ver hasta qué punto podemos diseñar una magnífica navegación con JQuery. Además de hacer todo más intuitivo y atractivo, el tiempo de carga es infinitamente inferior a otros sistemas al no tener que recargar la página o llamar a otra. JQuery consigue darnos una navegación tan fluida, que en numerosas ocasiones no sabrás si navegas por flash o html.

Estoy convencido que estas librerías ya son presente del diseño y que cada vez veremos más sitios programados con esta tecnología. Hoy en día cualquier web de primer orden ya incorpora Ajax en sus formularios, porque además de ser más rápida la navegación conseguimos ayudas geniales para el usuario.

A continuación una serie de webs que seguro que os van a sorprender:

(más…)

Formularios con Ajax

Formularios con Ajax

Ajax para formularios

Ajax para formularios

Poco más tengo que decir de las virtudes del Ajax, quien quiera saber más que vea los post relacionados con Ajax.

En este caso traigo código muy útil para webs con buscadores. Se trata de códigos para hacer más usable los formularios a los usuarios o por ejejmplo, para ordenar los resultados de una búsqueda por columnas (precio, nombre,…)

(más…)

Diapositivas con jQuery

Diapositivas con jQuery

Diapositivas con jQuery

Diapositivas con jQuery

A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.

JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).

Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com

Ajax IM, un messenger para tu web

Ajax IM, un messenger para tu web

Ajax IM, un messenger en tu web

Ajax IM, un messenger en tu web



Otra muestra de lo que podemos llegar a hacer con Ajax es este motor de mensajería instantánea, comparable con el mismísimo messennger, yahoo o talk. Pero a diferencia de los demás este puede estar empotrado en tu web, y los demás son aplicaciones de escritorio. El paquete se llama Ajax IM, y es una magnífica solución para foros privados, redes sociales, y cualquier lugar que se os ocurra en el que poder aumentar la interacción entre usuarios o con los usuarios.

Por supuesto que no necesita refrescar la página para trabajar, y es un programa vivo, ya que en la misma página podréis ir consultando y descargando las nuevas versiones. Y para que veáis el nivel de detalle de la programación, mirad lo que sucede cuando metéis un usuario y contraseña falsos.

Os dejo dos enlaces, uno para descargaros y ver las explicaciones de Ajax IM y otro para ver una demo del Ajax IM (usar test como usuario y password)

Varias páginas en una con jQuery

JQuery, varias páginas en una

JQuery, varias páginas en una

Hace tiempo ya escribí un post acerca de esta característica de Ajax, la de enseñar y esconder código, dado que cada vez estoy viendo más esta práctica, he decidido reciclarlo.

Ajax ha revolucionado el diseño web. Con librerías como jQuery podemos conseguir infinidad de efectos en una página web. Entre ellos está el de cargar contenido sin necesidad de recargar la página, el ejemplo lo tenéis en la web www.sourcebits.com, esta web muestra varias páginas dentro de una úncica.

Se trata de esconder y enseñar contenido, y para hacerlo, se sirve de efectos de desplazamiento o fundidos. En esta web podemos ver como se pliegan los contenidos que queremos abandonar, para luego desplegar los nuevos que hemos solicitado. Visualmente todo esto es genial pero como todo tiene sus pros y sus contras.

A favor: la carga de contenidos es muy rápida, la fluidez de navegación puede llegar a ser muy buena y el impacto visual es enorme, ante la novedad, el usuario recordará tu web como algo muy innovador.

Nos da la opción de generar nuevas url’s dentro de la actual del tipo «#loquesea», eso significa que nos quitamos de un plumazo los problemas SEO que pudiese originar.

Sinceramente no veo ningún problema en utilizar esta librería, creo que es futuro y como diseñadores deberíamos empezar a implantarlo en nuestros futuros proyectos.

Para saber más sobre cómo funciona y descargarse la librería, visita este post «contenidos con jQuery«

Menús para tu web o blog

Menús para tu web o blog

Menús gratis en JQuery, Ajax, CSS,...

Menús gratis en JQuery, Ajax, CSS,...

Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.

Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.

Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.

En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….

Zoom con jQuery… Alucinante !!!

Zoom con jQuery… Alucinante !!!

¿Cómo hacer zoom sobre una imágen con jQuery?

¿Cómo hacer zoom sobre una imágen con jQuery?

Cuanto más investigo más consigue sorprenderme. Ahora estoy con un proyecto en el que necesito hacer una lupa o zoom sobre las imágenes. Lo primero que se me pasó por la cabeza fue buscar una solución en flash, pero dadas mis limitaciones, eso me haría crear un flash para cada zoom. Hasta que finalmente encontré esta joya, ¿cómo hacer zoom con jQuery?.

El resultado como podréis comprobar, es alucinante !!!!. Al colocarnos sobre las imágenes se abre una capa flotante que nos va mostrando la selección que estamos marcando.

El plugin se llama jQzoom y tanto la descarga como los ejemplos los podéis conseguir en Mind Projects.

Javascript Vs Flash

Javascript Vs Flash

Javascript Vs Flash

Hasta ahora las animaciones en web eran exclusivas del flash, pero con la entrada del Ajax y de bibliotecas como jQuery, ahora podemos ver animaciones que nos hacen dudar sobre cual de las dos tecnologías ha sido la elegida para realizar la animación.

Esto fue lo que me ocurrió al ver esta web, jwhanif.net La carga es muy rápida y las animaciones tienen una fluidez increíble, como no podía ser de otra manera, mi primera reacción fue pulsar el botón derecho del ratón para comprobar que se trataba de flash… pero no!!

(más…)

¿Qué es Ajax?

¿Qué es Ajax?

¿Qué es Ajax?

Muchos amigos y cllientes me ha preguntado ¿Qué es Ajax?, eso de lo que tanto se habla en internet que dicen que va más rápido,…. Así que hace tiempo que tenía dedicar un post a esta «unión de tecnologías», ahí va…

¿QUÉ ES AJAX?

Según Wikipedia, Ajax es una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones tienen la particularidad de que se ejecutan en el cliente (en el navegador del usuario en lugar de hacerse en el servidor), esto permite que el usuario pueda hacer cambios en la página sin necesidad de que esta sea de nuevo recargada, lo cual implicaría de nuevo una consulta al servidor y que el servidor la vuelva a enviar al navegador, total, más tiempo y el consiguiente problema de usabilidad. Con esta «unión de tecnologías» lo que conseguimos es mayor velocidad, interactividad y usabilidad.

(más…)

Hacer un menú con CSS y más…

Hacer un menú con CSS y más…

Hacer un menú con CSS

Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.

Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.

En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…

dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.

Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.

Sin duda es una web de consulta obligatoria.