javascript

Hasta hace escasas fechas, he venido usando este qTip para estilizar ligeramente los atributos title de la web. Pero como soy culo inquieto me dió por buscar en Google y resulta que hay una versión para jQuery…y la he tenido que probar. Curiosamente los creadores de ambos sistemas se llaman igual.

En términos comparativos la de jQuery “pesa” bastante más pero también ofrece muchas más opciones de configuración tanto a nivel estético como funcional. Basta echarle un ojo a las demos disponibles [en] para entender lo que digo.

Por tanto, si estás buscando un añadido tooltip para tu proyecto, piensa que quizá este qTip te venga bien.

:: qTip tooltip con jQuery [en] ::

En ocasiones contadas llego hasta alguna web que tiene implementado algún complemento o sistema de mostrar información que me llama la atención. Lo que hago entonces es tan simple como bucear en el código fuente a ver si es algo propio y desarrollado exclusivamente para el site en cuestión o si por el contrario es alguna cosilla que se puede encontrar y emplear como uno quiera.

Lo último que me encontré y que he implementado parece haberos gustado a unos cuantos a tenor de los comentarios y correos que me han llegado. Como ayer me llegó otro más, pensé que lo mejor era deciros cómo hago eso de que las imágenes carguen a medida que nos desplazamos con el scroll.

Es tan sencillo como usar jQuery y Lazy Load [en].

No creo que tenga que ponerme a explicar cómo “enchufarlo”. Si tienes un mínimo (pero mínimo mínimo) conocimiento de hacer llamadas a javascript te bastará para hacerlo funcionar.

En cualquier caso también hay un plugin para Wordpress [en] que no he probado y que en teoría debería facilitar la tarea (que, repito, es bastante sencilla ya de por sí).

Ojito al tema compatibilidad con otros plugins de jQuery puesto que Lazy Load no funciona bien con la última versión de la librería. Y recordad que para agilizar peticiones al servidor, siempre podréis cargarlo externamente (desde Google mejor)

El otro día me estaba peleando con Lazy Load [en] y llegué de rebote a un buen artículo donde enumeran unas cuantas técnicas relativas al buen uso de jQuery.

A mí se me escapan muchas de ellas pues como ya he dicho en numerosas ocasiones, sólo lo empleo para hacer algunos apaños. Pero como sé que alguno por aquí le da bastante al javascript, quizá alguno de los puntos tratados, le vengan bien. Bon profit!

:: Improve your jQuery 25 excellent tips [en] ::

Uno de mis jefazos dejaba el otro día en [Q]blog una interesante página que nos permite comparar las diferentes compatibilidades que ofrecen los navegadores actuales frente a características propias de HTML5 o CSS3 por citar un par.

Es bastante configurable a la hora de mostrar según qué datos sobre los navegadores que queramos. Y tiene pinta que el autor quiere mantenerla actualizada regularmente. Ale, a favoritos!

:: Tabla comparativa de navegadores con soporte HTML5, CSS3, SVG… ::

No sé si recordaréis Glimmer, ese intento de aplicación de escritorio destinada a hacernos la vida un poco más fácil a los “pezuñeros” (esos que de código sabemos 4 cosas pero toqueteamos igualmente). Entiendo que IxEdit está enfocada también para los de esta especie puesto que pretende ayudar a la creación de interacciones y efectos mediante un sencillo editor. Está claro que igualmente hace falta un mínimo conocimiento de lo que se está haciendo pero al menos la tarea se hace algo menos tediosa de esta forma.

Es multiplataforma, gratuito y tiene bastante información en la web oficial. Por probarlo no pasa nada.

:: IxEdit [en] :: (Vía Ceslava + PixelGangster [en])

Como no todos somos unos máster del Universo con jQuery seguro que a más de uno nos vendrán muy bien estos videotutoriales jQuery para principiantes que abarcan desde el empleo de efectos básicos y la carga de la librería, hasta cosas más complejas usando selectores avanzados o creando nuestros propios switchers y tooltips.

Para ser gratis, no está pero que nada mal. Están en inglés pero bueno, son vídeos ¿no? :)

:: videotutoriales jQuery para principiantes :: (Vía [Q])

¿Conoces ya Snipplr? ¿Y DevSnippets? Pues para que tú también hagas triplete apúntate Snipt como otro de esos sitios super interesantes en los que hay un buen montón de porciones de código que usamos de manera frecuente y que nunca está de más tener a mano. Las gracias al jefe [Q] que fue quien lo descubrió.

:: Snipt [en] ::

En Webmaster libre me he encontrado una pequeña aplicación que seguro que hace las delicias a más de uno.

Se trata de Glimmer, una aplicación de escritorio que te permite crearte menús, efectos de paso de imágenes y tooltips sin sudar la gota gorda con jQuery. Porque a muchos el tema de meter la zarpa en el código o bien no nos gusta o no terminanos de pillarle el truco, este programita viene como anillo al dedo.

Lo verdaderamente interesante es que tiene un modo más avanzado para crear tus propios scripts. Bastaría con editar el HTML con el que estés trabajando haciendo uso de Glimmer para asignar eventos y efectos.

Esto último no lo he probado en profundidad y realmente aunque soy algo torpe, me gusta meterme directamente con el código. Pero eso no quita que Glimmer tenga buena pinta y pueda ser una buena opción para alguno de vosotros.

:: Glimmer [en] ::

DevSnippets es una página que tiene relativamente poca vida y que guardar junto a otras imprescindibles como Devkick o Snipplr pues se trata de un buen lugar donde encontrar recursos y técnicas ya sean para diseño o programación web.

Truquitos CSS, formularios y efectos con javascript, un poquito de todo…

:: DevSnippets [en] ::

Mini pack de enlaces (enfocados sobre todo a tema web) que se me acumulaban:

Desde Xyberneticos me traigo Effect Generator [en] para hacer animaciones sencillotas realizadas en Flash sin necesidad del susodicho.

Desde Sentidoweb una interesante (y de valor “cuasincalculable”) tabla de propiedades CSS en gestores de e-mail [en]

Vía Vecindad Gráfica, nos vamos al site de Kemie para descubrir como integrar sIFR usando jQuery en nuestras webs. Ole!

Carlos ha preparado una plantilla para presentar nuestros diseños webs. Se trata de un psd por capas en el que encontraremos la interfaz de explorer y firefox tanto en su versión windows como linuxera (ubuntu). Scrolls, botón de feed,… todo!

Por cierto, que Google comienza a indexar contenido Flash. Bastante limitado de momento pero el camino se hace andando.
Aprovecho para comentar que me molesta (y mucho) la postura de la gente que habla por hablar cuando el tema es Flash. Que si no se puede hacer tal cosa, que si esto, que si lo otro… Antes de hablar, hay que informarse un poquito mejor. Yo de Flash, cero patatero, pero no voy diciendo por ahí que es el horror.

Mi no al target=”_blank” sigue vigente. Había encontrado lo que comenté en su día: dar la opción al usuario de abrir los links en ventanas nuevas o no. La gente de Smashing lo recuerda y también ofrece la opción: Should links open in new windows? [en]

Y para cerrar una recomendación de un “recién nacido”: Mina Lab, sitio experimental de diseño de interacción. Un sitio que guardar en favoritos. Gracias, alquimistas.

Estaba buscando información para crear tooltips con un poco más de chicha que los que salen por defecto y me he guardado dos opciones bastante interesantes.

La primera Prototip, tira de la librería Prototype [en] y está bastante trabajada. Incluye bastantes opciones de configuración. Prototip [en]

La otra opción barajada es jTip que también está bastante apañada y corre bajo jQuery. jTip [en]

Seguro que hay un montón más. Estaría bien que hubiese una tabla comparativa similar a la que ya hay para los efectos lightbox. Mmm, este listado [en] podría valer.

Al final me he quedado con qTip [en] por ser el más liviano y el que más se adaptaba a lo que yo quería. Presenta incompatibilidad con niceforms a menos que se saquen de ambos las llamadas del body.onload fuera de los javascript.

Que desde hace algún tiempo el apogeo del javascript ha vuelto es indiscutible. Muestra de ello son la cantidad de nuevas librerías con las que darle vidilla a nuestros diseños web.

Os traigo uno de esos recopilatorios tan de moda en el que listan 10 scripts o componentes con los que hacer más sencilla la tarea de crear gráficos tipo tarta, de barra, lineales…

Los hay en javascript puro y duro o también alternativas flasheras. Yo en su día probé ligeramente el amCharts y me pareció una pasada. Aunque ahora me decantaría más por el flot. Es que jQuery me tiene “engatusao”

:: 10 Free Chart Scripts [en] :: (Vía Uno de los otros)

Y es que creo que debería estar recomendando esta web cada semana porque no deja de sorprenderme (nos).

Le lavaron la cara no hace mucho y está convirtiéndose en un site de referencia para estar al tanto de novedades sobre programación web. jQuery, AJAX…de todo señores. En serio, guardarla en favoritos junto a Snipplr [en] y podréis dormir tranquilos.

:: Devkick [en] ::

Hasta la fecha el fenómeno lightbox se ha reproducido a la velocidad de la luz dando lugar a más y más variantes creadas con nuevos efectos o sobre librerías distintas.

Ante tan caótica situación uno ya quizá empiece a dudar si usa la versión más idónea para sus necesidades. Pero para eso está The Lightbox Clones Matrix, un listado que enumera todas las versiones disponibles actuales y las capacidades que ofrece cada una de ellas. Indispensable.

:: The Lightbox Clones Matrix [en] :: (Gracias Intenta).

El título deja clarito de qué va la cosa. Vía número f me traigo el enlace hasta un recopilatorio de esos que tanto gustan. Esta vez toca ración de galerías flash y javascript. Yo, sinceramente, sigo viendo rentable el desembolso que hice por SlideShowPro [en] + Director. Pero bueno, ahí tendréis para todos los gustos.

:: 33 Most Beautiful Javascript and Flash Galleries [en] ::