
DOMTab nos permite crear estupendas interfaces divididas por pestañas por medio de Javascript no intrusivo.
Aplicar DOMTab a nuestras páginas es francamente sencillo. Primero llama al script desde la cabecera de tu documento
El código html de nuestra página debe ser algo así, [... and so on ...]
Tenemos, además, la opción de presentar un enlace donde se mostrarán todos los contenidos en una sola pantalla, por ejemplo para imprimir.
Puedes editar todas las opciones del script ya que todos lo que se espera del HTML son parámentros.
listClass:’domtabs’, // class de los menús
activeClass:’active’, // class del enlace actual
contentElements:’div’, // elements to loop through
backToLinks:/#top/, // patrón para buscar enlaces “volver arriba”
printID:’domtabprintview’, // id del enlace para imprimir todo
showAllLinkText:’show all content’, // texto del enlace para imprimir todo
A la hora de dar estilo, tenemos a nuestra disposición tanto las clases e id utilizadas por el script como el resto de recursos a nuestro alcance por medio de CSS:
Rails es un excelente framework, especialmente para construir aplicaciones AJAX, pero el Javascript que resulta de utilizar los helpers de serie de Rails es la manzana de la discordia para muchos. Unobtrusive Javascript for Rails pretende ayudar a solucionar eso.
Con UJS for Rails podrás:
UJS Rails Plugin: http://www.ujs4rails.com/
Con Javascript Lint podrás comprobar todo tu código Javascript en busca de errores comunes sin necesidad de abrir la página en un navegador.
El programa está basado en el motor de Javascript de Firefox, con lo que, además de buscar errores puede también mostrar advertencias sobre prácticas no recomendables.
Javascript Lint está disponible para Windows y Linux. Además, es muy versátil y te permite utilizarlo de diversas formas:
Javascript Lint: http://www.javascriptlint.com
Demo Online: http://www.javascriptlint.com/online_lint.php
Todos sabemos que los popups son un asco, la mayoría de los usuarios los ignora para simplemente cerrarlos y el resto los bloquea automáticamente con su navegador. A pesar de todo, en muchas ocasiones nos interesaría utilizar un popup para mostrar alguna información adicional sin que el visitante tuviese que abandonar la página o abrir otra ventana de su navegador.
DOMinclude es un script que nos permite abrir archivos adicionales, como por ejemplo fotografías o imágenes, en una nueva capa dentro del documento. Cuando no se encuentra disponible el Javascript se abre un iFrame.
DOMinclude es muy sencillo de implementar en tus páginas, incluye lo siguiente en la cabecera (head) de tu documento:
Agrega la clase DOMpop a cada enlace en el que quieras utilizarlo
photo of a confused puppy
Y edita el archivo DOMinclude_config.js para adaptarlo a tus necesidades:
// Clases CSS
// que activan DOMinclude
triggerClass:'DOMpop',
// class del popup
popupClass:'popup',
// class del enlace cuando el popup
// está abierto
openPopupLinkClass:'popuplink',
//texto para añadir al enlace cuando el
// popup está abierto
displayPrefix:'Ocultar ',
// filtro para definir que archivos no deberían
// abrirse en un iframe
imagetypes:'jpg|JPG|JPEG|jpeg|gif|GIF|png|PNG',
// dimensiones del popup
frameSize:[320,180]
}
Enlace, ejemplos y explicación original en inglés:
http://onlinetools.org/tools/dominclude/
Encontré estos dos enlaces sobre Javascript en CodigoPHP.com y como son bastante interesantes aquí os los dejo:
El equipo del GWT ha lanzado una actualización de su librería. En este caso, han mejorado diversas cosas e introducido novedades:
Algunos cambios a nivel de API pueden requerir retoques en el código al actualizar, pero debería ser una actualización sencilla.
Descarga GWT 1.1:
http://code.google.com/webtoolkit/download.html
Via Google Code Blog
A principios de este mes os comentaba JSMin, un compresor para Javascript. Hoy me encuentro en Agile Ajax una comparativa entre cinco de estos algoritmos de compresión: Javascript/HTML Cruncher-Compressor, Dojo Shrinksafe, Javascript Compressor, Packer y JSMin.
Es común que en nuestras webs tengamos que incluir tablas de datos, generalmente cuando tenemos un campo de texto más grande que el tamaño de la celda permitimos que éste se expanda, modificando todo el aspecto de la tabla, para poder mostrar todo el contenido.
Para evitar que la celda se expanda desencajándolo todo, podemos fijar el tamaño de la tabla y no permitir que esta se adapte a los contenidos pero cuando un contenido sea mayor que su contenedor aparecerá un incómodo scroll.
How to Display Tabular Data – A New Perspective es un artículo (en inglés) que nos enseña cómo crear una tabla cuyas celdas, en lugar de expandirse para adaptarse, utilizarán un agradable scroll con Javascript para mostrar su contenido, algo así:

Compatible con todos los navegadores.
En la última página del artículo podréis descargar el script completamente funcional con todo lo necesario en un archivo zip.
A pesar del paulatino repudio de los desarrolladores web hacia las tablas, éstas siguen teniendo su función: mostrar datos de forma tabular. Obvio, ¿no?
Cuando nos encontramos ante una tabla de datos, puede surgirnos la necesidad de permitir a nuestros usuarios ordenar los datos (por orden alfabético, de mayor a menor…). Esto que, en principio es algo simple, puede envolver múltiples líneas de código PHP, consultas a la base de datos y recargas de la página…
Sorttable es un sencillo script javascript, creado por Stuart Langridge, con el que podremos convertir los encabezados de la tabla en objetos sobre los que hacer click para ordenar los datos.

Sin recargas de página ni complicados códigos, simplemente se carga el script en el header de la página y asociamos las tablas que queramos hacer interactivas mediante una clase. La personalización corre de tu cuenta editando unas líneas de CSS.
Entre las múltiples ventajas del uso de este script destacan dos: es totalmente no obstrusivo y es capaz de detectar el tipo de datos contenidos en una columna y ordenarlos adecuadamente de forma automática.
En Tu Función tenéis todas las instrucciones detalladas y una tabla de ejemplo.
Sorttable: http://kryogenix.org/code/browser/sorttable/

JQuery es una potente librería Javascript. Visitando Despues de Google conozco jQuery Visual Documentation. Una guia visual, con ejemplos, de las funciones de la librería. Ideal para consulta rápida.
jQuery: http://jquery.com/
jQuery Visual Documentation: http://www.visualjquery.com/
Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna