Webmaster Libre

Hace tiempo hablabamos de SortTable, un script que permitiría que nuestros usuarios ordenasen las columnas de nuestras tablas de mayor a menor tanto numérica como alfabéticamente.

Brian McAllister ha creado un script que va un paso más allá de Sorttable, Unobtrusive Table Sorting. Se trata de un javascript no obstrusivo que permitirá a nuestros usuarios ordenar las tablas basándose en numerosos criterios (demo) a la vez que nos permitirá conseguir el encantador «efecto de cebra» en las tablas y el resaltado de la columna que se está ordenando.

Para utilizarlo simplemente tendremos que incluirlo en la cabecera de nuestro documento

y asignar a las tablas y etiquetas TH los nombres de clase especificados en las instrucciones.

Descarga, instrucciones y ejemplos:
Unobtrusive Table Sorting (Revisited)

Si hay algo que confunda a nuestros usuarios, al menos los menos «tecnológicos», es pulsar sobre un link y terminar en la misma página en la que estaban. Ya lo dijo Nielsen (traduccion de Torres Burriel), salvo en el caso de los «skiplinks» o de las anclas para dividir textos largos, no deberíamos ofrecer enlaces que apunten a la página actual.

Una forma muy sencilla de limpiar el sitio de esos enlaces «redundantes» es mediante Javascript, Jonathan Snook nos ofrece un sencillo script que examinará automáticamente los enlaces de un sitio y eliminará los que apunten a la página actual salvo los que contienen un ancla:

Clear links to current page with unobtrusive Javascript

Y si no os gusta utilizar Javascript, dos métodos más:

1. Mediante PHP (o ASP): http://www.maratz.com/blog/archives/2004/11/18/faux-active-link/
2. Simulándolo con CSS: http://www.themaninblue.com/writing/perspective/2004/11/19/

TargetOrder es un ligero script que nos permite reordenar tablas de datos sin necesidad de hacer drag&drop. Es ideal para tablas con muchas filas de datos, simplemente pinchas sobre el elemento a reordenar y vuelves a pinchar sobre el lugar donde quieres colocarlo (ver demo)

Es totalmente no obstrusivo, no emplea nada de Javascript en línea y ha sido probado con casi todos los navegadores con excelentes resultados.

Está liberado bajo una licencia Creative Commons de Atribución 2.5

TargetOrder: http://www.dancinginquicksand.com/targetorder/

Seguro que, como yo, muchos le habréis estado dando vueltas al hecho de que ciertos componentes como animaciones en Flash o Applets hayan de ser activados por el usuario en algunos navegadores como Explorer 7, algunas actualizaciones de Explorer 6 y algunas versiones de Opera 9.

En Armonía han publicado un script creado por David Muñoz que, precisamente, nos alivia de este quebradero de cabeza.

Enlace | Activar contenido embebido con Javascript

Si conocíais PHP Grid entonces no es necesario presentaros a slGrid. slGrid es simplemente un cambio de nombre, manos y licencia del archiconocido script para presentar datos en tablas de forma cómoda e interactiva.

slGrid es un script que combina PHP y AJAX para ofrecernos una forma cómoda de mostrar y editar tablas y que, ahora, se presenta con licencia Open Source (y con una opcional licencia comercial que exime a los desarrollos derivados de la obligación se ofrecer el código).

Tenéis toda la información en la web de los nuevos orgullosos dueños del invento Senza Limiti.

slGrid: http://www.senzalimiti.sk/slgrid/

Hace tiempo hablabamos de DOMTab un script que nos permitía crear un interfaz tabular de forma relativamente simple. Hoy, a través de Anieto2k, descubro Javascript Tabifier.

Javascript Tabifier te permite crear interfaces tabulares sin necesidad de establecer una lista de enlaces o una serie de anclas. Además, el estilo de las pestañas se hace mediante CSS y se degrada sin problemas para los usuarios sin Javascript.

Su implementación no podría ser más sencilla.

1. Primero rodearemos todo el código a introducir en pestañas con un div con clase tabber
   1. <div class="tabber">
   2.   <h3>Section One</h3>
   3.   Section one content.
   4.  
   5.   Section two content.
   6. </div>
2. Luego iremos añadiendo un div con la clase tabbertab alrededor de cada sección. Por defecto las pestañas como título utilizan el título de la sección. En caso de querer especificar otro incluiremos un atributo title
   1. <div class="tabber">
   2.  
   3.   <div class="tabbertab">
   4.     <h3>Section One</h3>
   5.     Section one content.
   6.   </div>
   7.  
   8.   <div class="tabbertab" title="MyTabTitle">
   9.     Section two content.
   10.   </div>
   11.  
   12. </div>

   Los elementos “tabbertab” siempre deben ser hijos del elemento “tabber”

3. Cargamos el script en la cabecera
   1. <script type="text/javascript" src="tabber.js">
   2. </script>

Finalmente, el script convertirá el código en algo así:

Fíjate que el contenedor ha cambiado su clase de tabbertab a tabberlive, lo cual te permite definir estilos diferentes para usuarios con y sin javascript.

Javascript Tabifier:
http://www.barelyfitz.com/projects/tabber/

A través de Ajaxian me entero de que Sebastien Gruhier ha desarrollado una alternativa al pesado (200kb) YUI Carousel de Bill Scott

Prototype Carousel es un script muy ligero (6kb) que podrás utilizar tanto en Ruby como HTML y con contenido estático o generado con AJAX. Esta primera versión 0.1 tiene pocos parámetros pero, el autor, promete más opciones para la próxima.
Está bajo una licencia tipo MIT que te permite utilizarlo para lo que prefieras siempre que mantengas la noticia del copyright.

Prototype Carousel Class:
http://prototype-carousel.xilinus.com/

No es la primera vez que hablamos sobre un script Javascript que nos permite crear presentaciones online del estilo de las que genera Power Point (S5 o HTML Slidy) pero Scriptio va un paso más allá.

Scriptio es un framework Javascript que nos permite crear presentaciones animadas, acopañadas de audio. Al más claro estilo de Flash, cuando Flash se utilizaba para eso…

• Lenguaje de Scripting intuitivo: simple y sencillo de comprender, además puede expandirse al tratarse de Javascript
• Rico juego de objetos: Dispondrás de herramientas para texto, imágenes, rectángulos, líneas y círculos. Además los campos de entrada, como botones o checkboxes, se utilizan para crear presentaciones educativas claramente interactivas
• Multiples opciones para el audio
• Herramientas para autores

Scriptio: http://www.scriptio.us/index.php
Ejemplos: http://www.scriptio.us/examples.php

Si alguna vez has utilizado servicios como TinyURL para ayudarte a recordar enlaces, haciéndolos mas legibles te gustará Shorty.

Con Shorty podrás crear redirecciones cortas basadas en tu nombre de dominio, con la ventaja de que, al ir alojado en tu propio servidor las redirecciones permanecerán activas tanto tiempo como tu consideres oportuno (o conserves el dominio).
En el panel de control podrás, además, acceder a estadísticas y controlar tus enlaces de forma sencilla

Para instalar Shorty, tu servidor debe contar con PHP 4+, MySQL 3.23+, y Apache 1.2+. Para acceder al panel de control deberás utilizar navegadores como Firefox o Safari, no funciona con Internet Explorer.

Shorty: http://get-shorty.com/

Edición: Alex de Buayacorp nos indica en un comentario que el código no es seguro así que evitad usarlo en entornos de producción.

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í,

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.

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:

DOMTab: http://onlinetools.org/tools/domtabdata/