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.
Los hay realmente interesantes así que no dejéis de echarles un vistazo.
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.
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.
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)
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
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?
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 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
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
Proto.Menu es una interesante solución para crear un menú contextual basado en la librería Prototype.
Entre sus principales caracteristicas destacan:
Para funcionar requiere prototype.js 1.6.0_rc0
Proto.Menu:
http://yura.thinkweb2.com/scripting/contextMenu/
Via Ajaxian
Con Canvas 3D Graph podrás introducir en tus páginas, de forma sencilla, impresionantes gráficos en 3D gracias a Bajcic Dragan
Como no podía ser de otra forma, Internet Explorer no soporta la etiqueta <canvas> y, por ello, tendremos que utilizar también excanvas.js con lo que nuestros gráficos cargarán más lentos cuando se intenten visualizar con IE.
Canvas 3D Graph está bajo licencia BSD.
Canvas 3D Graph: http://dragan.yourtree.org/code/canvas-3d-graph/
Via Ribosomatic
Si andabas buscando un efecto que sorprendiese a tus visitantes, Scrollovers te va a encantar. Con un simple script javascript conseguirás que tus enlaces destaquen del resto.
Descarga o enlaza directamente el archivo javascript al servidor de Scrollovers, añade los estilos para tus links a tu hoja de estilo y emplea la clase y el tipo scrollovers en los enlaces a los que quieras aplicar el efecto.
<a href="[YOUR PAGE HERE]" class="scrollover" type="scrollover">[YOUR TEXT HERE]</a>No os perdáis el efecto en la página del autor, el texto cambia de color con un fantástico efecto de scroll que podréis configurar a vuestro gusto.
Compatible con: Firefox 2.0, Internet Explorer 7, Internet Explorer 6, Internet Explorer 5.5, Safari 3 (Windows) y Opera 9
Scrollovers: http://www.scrollovers.com/
Si ofreces a tus usuarios alguna forma de introducir comentarios en tus sitios seguro que ya sabrás el peligro que supone dejarse agujeros de seguridad que puedan llevar a ataques XSS.
HTML Purifier es una librería libre escrita en PHP con la que, además de eliminar cualquier código malicioso que pueda introducir un usuario en tus comentarios, te asegurarás de que todo el código introducido valida según los estándares web.
En su sitio comentan su utilidad y facilidad para integrarlo en nuestros CMS, si este fin de semana tengo tiempo probaré a ver como funciona con WordPress. Mientras tanto, los usuarios de drupal disponen de un plugin (en beta de momento) para ir viendo como funciona. Por supuesto, si lo probáis dejad vuestras impresiones en los comentarios.
HTML Purifier: http://htmlpurifier.org/
HTML Purifier para Drupal: http://bart.motd.be/projects/html-purifier-drupal-module
Webmaster Libre es un blog de Alma Fernández
Iconos: FamFamFam
Manejado con WordPress
Sitemap (xml): Mapa del Sitio
