jquery

Crea fondos dinámicos según los colores de una imagen [jQuery]

por

jQuery Adaptivve Backgrounds

 

Adaptive Backgrounds es un plugin de jQuery que obtiene el color dominante de una imagen y la aplica como color de fondo a su elemento padre.

El plugin funciona con mínima configuración, solo basta tener el script de jQuery y después el script del plugin y establecer un atributo a todas las imágenes a las cuales desees extraerle el color dominante.

Atributo en las imágenes

img alt="" src="/image.jpg" data-adaptive-background="1"

(no puse los delimitadores porque WordPress interpreta la etiqueta ;) )

 

jQuery

$(document).ready(function(){
  $.adaptiveBackground.run()
});

Y listo, ya tienen el plugin funcionando, un efecto muy agradable y bonito a la vista.

Pueden descargar el plugin y obtener más detalles de su funcionamiento en su repositorio oficial en GitHub.

Documentación de HTML, CSS y jQuery en un solo lugar

por

6-30-2013 2-26-32 PM

Cuando estamos programando algún proyecto siempre necesitamos a la mano la documentación del lenguaje de programación, librería o utilidad que estemos empleando para su implementación, porque no sabemos como hacer algo o saber si lo que necesitamos hacer es posible hacerlo con dicho lenguaje o librería.

Cada una de estas herramientas tiene sus sitios oficiales y su documentación oficial para ser consultada, pero como buen geeks que somos es mejor tener toda esta información reunida en un solo lugar para que sea mucho más rápido la consulta y no perder tanto tiempo buscando entre varias página la forma de hacer algo.

El desarrollador web Thibaut Courouble se dio cuenta de esto y decidió crear DevDocs, un sitio que recopila la documentación de los tres principales lenguajes de programación web, HTML, CSS y jQuery cuenta con una sección para cada lenguaje donde se encuentran organizadas por orden alfabético las etiquetas, atributos y utilidades de cada uno de los lenguajes, cada una con ejemplos, documentación clara y precisa sobre su correcto uso y la forma correcta de utilizarlas.

DevDocs

Unheap: Repositorio de plugins jQuery

por

5-5-2013 6-00-55 AM

jQuery es una librería de JavaScript que facilita muchísimo el desarrollo de aplicaciones web interactivas, jQuery no es un framework como algunos desarrolladores suelen llamarle, jQuery hace muchísimo más fácil la manipulación del DOM (Document Object Model), controlar los eventos del navegador, animar elementos HTML, hacer Ajax, entre otros.

jQuery es la librería de JavaScript más utilizada en el mundo, los millones de desarrolladores web del mundo han creado miles de plugins o librerías más pequeñas basadas en jQuery para hacer casi cualquier cosa, creación de menús automáticamente; organizar texto; animaciones CSS; cargar imágenes dinámicamente;  convertir imágenes en Sprites; manipular el favicon y otros miles de ejemplos.

Con tantas librerías es difícil a veces encontrar justo la que necesitas, pero para ello existe Unheap, una página a modo de repositorio, pequeño según ellos, en el cual hay más de 600 librerías de jQuery categorizadas por Interfaz, Entradas, Media, Navegación y otros, cada librería tiene un enlace al sitio web de la misma, un demo de la librería y en algunos casos vídeos para mostrar su funcionamiento.

Así que ya no hay excusas para no encontrar una librería a tus gustos y necesidades para tu proyecto web, aunque algunos desarrolladores no les gusta utilizar librerías porque les parece una forma perezosa de desarrollar, la verdad es que no hay razón para reinventar la rueda. ¡Ya existe!

Unheap

Aprende jQuery paso a paso con tryjQuery

por

3-6-2013 5-03-16 PM

jQuery es una librería gratuita de JavaScript que facilita muchísimo el trabajo al momento de trabajar con el HTML de páginas web y la más popular en el mundo JavaScript, su slogan es «Escribe menos, haz más» y lo cumple al pie de la letra, tiene métodos, funciones y una sintaxis que mejora el rendimiento del trabajo cuando trabajar con HTML se trate, permite crear animaciones, manejar eventos, crear plugins para la librería y especialmente, crear aplicaciones AJAX.

Aunque la librería y los métodos son expresivos, fáciles de usar y con una documentación completa y extensa nunca está de más tener a mano un buen tutorial práctico para comprender mejor su uso, para ello existe tryjQuery, un sitio web creado por CodeSchool y jQuery para ayudarte paso a paso y de una manera muy práctica conocer jQuery a través de vídeos, una consola interactiva en la cual puedes escribir código jQuery directamente en el navegador.

Se empieza por supuesto desde lo más básico, como seleccionar elementos del DOM y progresivamente aumenta el nivel de dificulta al manejo de eventos y cambios en el estilo del HTML, está pensado lanzar la versión número 2 del curso/tutorial con temas más avanzados en algunas semanas.

Aprende jQuery: tryjQuery

jPages – Paginando resultados fácilmente con jQuery

por

Si estás en busca de una forma fácil y rápida de paginar resultados, este plugin de jQuery te vendrá como anillo al dedo. Se trata de jPages, y lo que permite es lo que describe el título de la entrada. La manera de invocarlo, al igual que todo aquello hecho con jQuery resulta casi que ridículo, de lo sencillo que es:

/* when document is ready */
$(function() {
/* initiate plugin */
$("div.holder").jPages({
containerID: "itemContainer"
});
});

Con este plugin tendrás la posibilidad de paginar no sólo texto, sino además galerías de imágenes, con efecto de aparición incluido.

Documentación: jPages (Descargar)

Visto en: Kabytes

Recurso online para aprender jQuery

por

 Una de las librerías con mayor éxito para el desarrollo web ha sido, es y será por un buen tiempo más jQuery. Aunque es muy sencilla de utilizar, he de ahí su popularidad, existen recursos que nos brindar un panorama claro sobre como implementar esta herramienta en nuestros proyectos.

Tenemos por supuesto como primera instancia el sitio oficial  así como un buen número de tutoriales, blogs y foros regados a lo largo y ancho de Internet. Entre ellos se encuentra el siguiente libro online que les traigo directo a la puerta de su hogar. Es bastante básico, pero si llegaste a esta entrada, supongo que buscas algo similar.

El libro lo puedes consultar desde aquí.

Espero que les sea de utilidad, y puedan con ello salir de uno que otro apuro.

Visto en: wwwhatsnew

Divide una imagen con jQuery

por

Los que conocen jQuery sabrán que nos abre un mundo de posibilidades, una de ella muy enfocada a la parte visual de algún sitio web. En esta ocasión me encontré con un curioso plugin, bastante ligero y fácil de usar, que da un toque diferente a las imágenes, dividiéndolas en varias partes, tal como se muestra en la imagen que encabeza la entrada.

Su implementación es muy sencilla, y por cierto, se llama PicStrips:

$("#s").picstrips( {
	splits: 18,
	hgutter: '2px',
	vgutter: '10px',
	bgcolor: '#fff'}
);

Pueden modificar el número de divisiones, su grosor, color de fondo y el espaciado en la parte inferior y superior. Sencillo, ¿No?

Sitio web: PicStrips

Visto en: kabytes

La web desde cero

por

Hace unos días Marc Rubiño junto a  secondnug dieron dos Webcast para dar soporte a temas que normalmente suelen estar en todos los foros de programación web. En esta ocasión lo hicieron con «JavaScript«, «JQuery» y «Ajax«.

Les dejo el material que se uso para los eventos:

Material [Webcast] La web desde cero I – JavaScript

https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?culture=es-AR&EventID=1032486642&CountryCode=AR

Material [Webcast] La web desde cero II – JQuery

streaming Material streaming WebCast streaming PPT 

 

Visto en mrubino.net

 

Personaliza las alertas de confirmación con jQuery y AJAX

por

A Clean jQuery AJAX Alert Box

En muchos proyectos se requiere de cierta interacción con el usuario, ya sea para que este de su permiso, se le brinde un aviso, o cualquier otra cosa que requiera llamar su atención. Para ello se utilizan generalmente las llamadas a la función alert de javascript. Pero para mi gusto siempre han sido algo feas.

Con Clean jQuery AJAX Alert podremos lograr lo mismo, sólo que de una manera más estética y atractiva visualmente. Haciéndole un favor tanto al usuario, como a nuestro diseño, ya que este no se verá corrompido por las alertas por defecto tan difícil de configurar de los navegadores.

Su implementación es muy sencilla, son pocas líneas de código las que utilizaremos, y como único parámetro le diremos la URL de la página a la que se redirigirá con una respuesta afirmativa del usuario, y claro, el ID del elemento con el que vayamos a interactuar, como se observa a continuación:

$(function() {
$('#id_elemento').alertBox({
href: 'pagina_de_resultado.html'
});
});

Ahora bien, si gustas ver como funciona, da click acá: Demo

Descargalo desde: thefinishedbox