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/
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/
Hace tiempo llegó a portada de digg un artículo, del que se hicieron eco algunos blogs como Sentido Web, que hablaba de cómo dar estilo a los checkboxes y radio buttons de los formularios. Como viene siendo habitual, la mayor pega de este método es que no funciona en Internet Explorer.
Si quieres dar estilo a los radio buttons y checkbox de tus formularios, para todos los navegadores con javascript activado, prueba la técnica de Chris Erwin.
Por medio de Javascript se ocultan los botones y se le da estilo a la etiqueta label.
El formulario sigue recogiendo los datos normalmente ya que es la propia etiqueta label la que activa el control correspondiente.
Y si el Javascript no está activado, no se ocultarán los controles y el formulario se presentará como un formulario normal, totalmente funcional.

Su implementación es muy sencilla, tenéis instrucciones detalladas en la página del autor.
Generalmente vivimos muy bien sin dar sombra a nuestros textos, a la espera de que más navegadores acepten la propiedad text-shadow de CSS 3, no obstante muchas veces nos resultaría realmente útil poder usarla con resultados uniformes en todos los navegadores.
Hasta ahora teníamos tres aproximaciones al tema, que cuando funcionaban en un navegador fallaban en otro e incluso haciendo uso de una combinación de las tres los resultados eran muy diferentes en los diversos navegadores:
text-shadow de CSS 3, de momento :before antes del texto para duplicarlo y simular una sombra, cosa que no funcionaría en MSIEScott Jehl nos ofrece un script en Javascript, no obstrusivo, que nos permite de forma sencilla conseguir este efecto de forma homogénea en todos los navegadores que tengan soporte para Javascript.
Para utilizarlo simplemente se carga el script
<link href="css/dropShadows.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/dropShadows.js"></script>
y se añade la clase highContrast (recuerda, respeta las mayúsculas y las minúsculas)
<h2 class="highContrast">Here's an example</h2>
La apariencia de la sombra puede editarse en el archivo dropshadow.css
Descarga Javascript:
http://www.scottjehl.com/jsDropShadows/scripts/dropShadows.js
Descarga CSS:
http://www.scottjehl.com/jsDropShadows/css/dropShadows.css
En el blog de Scott tenéis más información sobre el funcionamiento del script.
Hace ya algo os había comentado la existencia de HTML Slidy, un sistema bastante simple para generar presentaciones tipo Power Point con XHTML, CSS y Javascript que se pueden reproducir en cualquier navegador.

S5 es un sistema similar, creado por Eric Meyer, que cuenta con bastante más documentación y ayuda que HTML Slidy, además de existir varios themes para escoger, más cómodo imposible.
Los tooltips son esos mensajes emergentes que surgen para añadir más información, generalmente, a un enlace o una imagen. Los tooltips en html suelen generarse por medio del atributo “title” y, en el caso de las imágenes, erroneamente, con el atributo “alt” que, a pesar de presentarse como un tooltip en muchos navegadores, es un reemplazo de texto para las mismas. Para más información podéis ojear The Alt and Title Attributes en 456 Berea Street y la referencia al atributo alt en las faq para desarrolladores de Mozilla.
La falta de consistencia en la representación de estos mensajes por parte de los navegadores provoca usos incorrectos que, si bien pueden servirnos en algunos casos, producen un empeoramiento de la funcionalidad para usuarios no-visuales.
Además, en ocasiones puede resultarnos útil añadir este tipo de mensajes emergentes a elementos que no sean enlaces o imágenes, incluso puede que necesitemos que esta información aparezca en pantalla asociada a gestos diferentes del de pasar el ratón por encima o, incluso, con un estilo definido por nosotros mismos.
Para todos estos usos, puede solucionarnos la papeleta el uso de un poco de Javascript. He estado mirando un poco y he encontrado unos cuantos scripts.
(más…)

DHTML Goodies es una excelente colección de scripts DHTML y AJAX que podrás descargar y utilizar en cualquier página web personal o comercial e introducir en tus aplicaciones. Las únicas limitaciones a las que están sujetos los scripts son: no redistribuirlos o reempaquetarlos y respetar los créditos que aparecen en el código fuente (que podrías eliminar previo pago).
DHTML Goodies: http://dhtmlgoodies.com/index.html
Me encanta el efecto que se consigue usando Lightbox, ya sabéis al dar click en una imágen se oscurece toda la página y surge la imagen ampliada en primer plano…
Queda realmente bien pero el script es un poquito grande y pesa bastante.
Si a ti también te parece que pesa demasiado quizá quieras probar Litebox, se trata de una versión adelgazada de Lightbox, con el mismo resultado en mucho menos peso. ¿Y cómo se obra el milagro? Simple, en lugar de utilizar la libreria Script.aculo.us se utiliza la infinitamente más ligera moo.fx y en lugar de usar la version completa de Prototype se utiliza la versión lite.
Enlaces:
Litebox
Lightbox
Script.aculo.us
Prototype
Moo.fx
Via Download Squad
Y no pasa un día sin que descubra otro lugar donde mostrar diseños, en este caso específicamente páginas que dispongan su contenido horizontalmente en lugar de la clásica disposición vertical.
Lo más interesante de la página, además claro de la inspiración, es que tenemos la posibilidad de descargarnos una plantilla, que incluye un práctico script para el scroll, con la que empezar a diseñar páginas con un aspecto, sin duda, poco convencional.
Enlace: http://www.thehorizontalway.com/
Via dzone
Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna