Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de la categoría "Javascript"

HeatColor, color dinámico para complementar tu mensaje

El color es, sin duda, una de las formas más simples de transmitir un mensaje. A pesar de que, para crear sitios accesibles, no debemos usar el color como único medio de comunicar un mensaje, nadie dice que sea malo hacerlo de forma complementaria.

HeatColor es un plugin para jQuery creado por Josh Nathanson que nos permite asignar colores a los elementos de nuestros sitios (como tablas, divs, listas…) basándose en valores, bien pasándole al programa los valores minimo y máximo, bien introduciéndolos manualmente.

HeatColor

HeatColor:
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm

Via Ajaxian

Datejs, una librería javascript para domar las fechas

Datejs es una librería javascript con la que podrás manipular fechas y permitir a tus usuarios utilizarlas de una forma más intuitiva.
Seguro que lo habéis visto en aplicaciones como Remember the Milk! o Todoist, en lugar de tener que escribir las fechas completas podemos usar expresiones como “today”, “tomorrow” que se traducirán automáticamente en una fecha exacta.

Datejs

Datejs está liberada bajo licencia MIT y disponible para descarga en Google Code y, por si fuera poco, dispone de soporte para múltiples idiomas (+ de 150) y cambiar el idioma es tan simple como:

<!-- Set the CultureInfo to de-DE (German/Deutsch) -->
<script type="text/javascript" src="date-de-DE.js"></script>

13 excelentes menús con Javascript

A lo largo del día son muchos los que aparecen por aquí buscando un menú con javascript, o al menos eso dicen mis estadísticas. Hoy en mi repaso al lector de feeds me he encontrado con una estupenda recopilación de 13 menús con Javascript que han publicado en Noupe.

Sexy Sliding Menu

Los hay realmente interesantes así que no dejéis de echarles un vistazo.

Mejorando la usabilidad de nuestras tablas

Cuando usamos las tablas para lo que son, mostrar datos, se convierten en elementos realmente útiles. Con una tabla bien planteada podemos transmitir gran cantidad de información en poco espacio, de una forma ordenada y sencilla de entender.
No obstante, cuando nuestras tablas empiezan a acumular demasiados datos puede hacerse confuso consultarlas. Al menos yo si me reconozco haciendo lineas con los dedos por la pantalla para encontrar la unión entre una fila y determinada columna, supongo que sabéis a lo que me refiero.

En los últimos días se han dado a conocer dos aproximaciones a este tema, la solución consiste en variaciones de una idea común: destacar la celda sobre la que coloquemos el ratón así como las línea y columna a las que pertenece.

Ejemplo de tabla con la fila y la columna claramente resaltadas

Por un lado tenemos la solucion de The CSS Guy, una solución totalmente manual con un poquito de javascript [ver ejemplo]

Por otro lado surge Tablecloth, una pequeña librería javascript que incluye una hoja de estilo bastante agradable y múltiples opciones para nuestras tablas. Una solución más rápida y, sin duda, cómoda para los menos avezados con el javascript y las css.

Escoged la que más os guste y no dejéis de hacer vuestras tablas mucho más sencillas de leer, sobre todo si vais a usar tablas largas o complicadas.

Un colorpicker como el del Photoshop

John Dyer, cansado de las limitaciones que tienen los colorpickers más conocidos, ha creado uno que imita a la perfección el del Photoshop. Su colorpicker nos ofrece todas las opciones de selección de colores disponibles en los programas de escritorio (H, S, V, R, G, B)

PhotoShop-like color picker

El resultado es realmente impresionante, puede que haya ya muchos colorpickers pero este merece sin duda un vistazo en profundidad.

PhotoShop-like Javascript color picker

Via Ajaxian

Editores de HTML, CSS, Javascript y PHP para Gnome (gtk)

Ayer, cuando os pedía consejo sobre editores de código para Gnome no me esperaba esa respuesta (gracias, de verdad). Ahora tengo un montón de ellos para escoger y creo que lo mejor es que los pongamos todos juntos en un artículo como referencia para futuros linuxeros desamparados. Cito por orden alfabético:

Algunos son completos IDEs, otros simples editores de código con resaltado de sintáxis y algunos son sólo para los más fuertes de ánimo.

Seguro que nos hemos dejado muchos en el tintero, una vez más quedan abiertos los comentarios, por si se os ocurre algún otro.

Una forma menos agresiva de mostrar imágenes grandes

Seguro que alguna vez os habéis visto en la situación: llegáis a un sitio web con unas imágenes enormes y tarda en cargarse años. Desanima y desespera horriblemente.

A través de Ajaxian me entero de que desde hace tiempo la librería javascript de Yahoo contaba con un plugin, YUI Image Loader, que nos permitía ir cargando sólo las imágenes necesarias (las que están dentro del punto de vista del usuario) y hacer así más cómoda la visualización de muchas imágenes grandes en una sola página.

A partir de ahora, los amantes de prototype también disponen de uno: Lazy Loader por Mika Tuupola.

Pasaos por la demo para comprobar lo interesante del script.

¿Conocéis algún otro independiente de librerías o que utilice otras?

LiveValidation, validando los campos según escribes

Si validar los campos al finalizar de completarlos no es lo bastante moderno para tu sitio, ahora lo tendrás más que sencillo para darle un toque simpático a la validación.

LiveValidation

LiveValidation es una pequeña librería Javascript que te permitirá dar ese efecto de validación “al vuelo” y, de paso, validar cuantas cosas necesites validar en tus sitios.

Está escrita de una forma muy cercana a Ruby on Rails por lo que, como comenta su autor, son compañeros ideales. No obstante, puede usarse con cualquier otro lenguaje ya que es una librería sencilla de aprender e implementar.

LiveValidation: http://www.livevalidation.com/

Via dZone

df Javascript Smooth Scroll

Buscando otra cosa me encuentro en Deziner Folio este ligerísimo script con el que podremos dotar a nuestros enlaces internos (anchors) de ese elegante efecto de desplazamiento suave

df Javascript Smooth Scroll

Ver demo

Deziner Folio: df Javascript Smooth Scroll

Proto.Menu: un menú contextual con Prototype

Proto.Menu es una interesante solución para crear un menú contextual basado en la librería Prototype.

Proto.Menu

Entre sus principales caracteristicas destacan:

  • Ligero: ~2 KB (~1.5 KB comprimido)
  • No obtrusivo
  • Totalmente personalizable
  • Compatible con todos los principales navegadores
  • Rápido

Para funcionar requiere prototype.js 1.6.0_rc0

Proto.Menu:
http://yura.thinkweb2.com/scripting/contextMenu/

Via Ajaxian