Utilidades
Módulos Javascript: DHTML no intrusivo
Filosofía
Javascript es una capa diferente de la capa estilos y la capa estructural, y al igual que el CSS, debería ser prescindible, de manera que sin el uso de esta tecnología la página debería ser accesible y navegable. Si el navegador no sabe interpretar el código simplemente no lo ejecutará pero los contenidos seguirán siendo accesibles. Esto es lo que se conoce como degradación del script. He elaborado más extensamente este concepto en un artículo sobre DHTML no intrusivo publicado en diseñorama.
Ejemplos
Destructor de target _blank
Adiós a los malditos target _blank. Si quereis saber cómo, lee la explicación oficial
FLACCESS: flash manteniendo la accesibilidad
Este script añade objeto(s) flash a la página si el navegador tiene el plugin adecuado. La ventaja de este método, es que a diferencia de el 99% de los métodos habituales, si el navegador no tiene javascript o no puede cargar el objeto flash, el contenido alternativo sigue estando en el html, por lo cual la accesibilidad es alta. En cambio, en los otros métodos, el javascript se encarga de escribir en el documento el objeto flash y el contenido alternativo, que evidentemente resulta inaccesible en caso de no tener javascript activado. Además permite opcionalemente que el objeto flash se cargue una vez finalizada la carga de la página. Esto es ideal para banners, puesto que permite que cargue primero el contenido real de la página.
Descarga FLACCESS (rar) o lee el tutorial y la actualización
Tabla de contenidos a partir de títulos (TOC)
Este script lee todos los nodos del documento y guarda en una variable la estructura jerárquica de los títulos de secciones de una página, mostrándolos en una lista indentada acorde a ese órden. Las secciones de la lista son enlaces a las secciones reales de la página, usando el id de los elementos (si no existe se crea automáticamente).
Descarga toc
Validador de formularios
Este script lee todos los campos de texto de un formulario y si encuentra una clase
"required" hace que ese campo deba ser llenado antes de enviar el formulario al servidor.
En caso contrario te avisa de forma visual y con un alert. Si el campo se denomina
email obliga mediante una expresión regular a usar un correo válido.
Descarga validador
Bookmarklets
Definición
Los bookmarklets son pequeños scripts guardados en los favoritos (bookmarks) para realizar acciones
rutinarias en las páginas que se están visualizando, para extraer datos, realizar búsquedas de palabras
seleccionadas, cambiar la apariencia de una página, etc. En nuestros bookmarklets hago una pequeña
trampa para poder tener más de 256 carácteres, evitar el uso de void(0) y proporcionar siempre
la versión más actual: añadir el script a la página con document.createElement('script'),
de manera que se llama a un script que está alojado en este servidor.
Ejemplos
Lista indentada de nodos de una página
Puede usarse para revisar el marcado correcto (más bien la semántica) de una página sin tener que usar el DOM Inspector, puesto que no deberemos expandir los nodos uno a uno.
Ejecuta lista indentada de nodos
Listado de objetos y de CSS y JS externos
el script abre una ventana mostrando una lista de enlaces a los archivos js y css de la página (y de cualquier frame si los hay) y de objetos (flash por ejemplo). Solamente hay que seguir los enlaces para ver el código o las películas.
Ejecuta listado de objetos, CSS y JS externos
Ruta de nodos a elemento
Una vez inicializado (llamándolo desde favoritos) el script espera un click en la página y entonces abre un popup mostrando la ruta de nodos hasta el elemento sobre el cual se ha hecho click.
Ejecuta ruta de nodos a elemento
Ejecuta (un solo uso) ruta de nodos a elemento
Estilos calculados de un nodo
Una vez inicializado el script espera un click en la página y entonces abre un popup mostrando la ruta de nodos hasta el elemento sobre el cual se ha hecho click y una lista de todos los valores calculados de ese elemento.
Ejecuta estilos calculados de un nodo
Ejecuta (un solo uso) estilos calculados de un nodo
Estilos calculados de un nodo (II): mouseover
Igual al anterior pero también muestra, en la barra de estado, la ruta de los elementos sobre los que hacemos mouseover con el ratón
Ejecuta estilos calculados de un nodo con mouseover
Ejecuta (un solo uso) estilos calculados de un nodo con mouseover
Usar hoja de estilos propia
Este script deshabilita todas las hojas de estilos de una página y abre una ventana pidiendo una hoja de estilos del usuario. En navegadores Mozilla si la hoja de estilos del usuario es local no se cargará por motivos de seguridad, pero si se da una ruta a una hoja de estilos situada en la web, se cargará sin problemas. Explorer no tiene esa restricción.
Ejecuta usar hoja de estilos propia
Aumentar el tamaño de tus ... textarea
Este script aumenta el tamaño de todos los textarea de una página (incluyendo las páginas interiores de un frame) hasta los 450px de ancho y 250px de alto.