JaS es la abreviatura de Javascript Slides, una librería Javascript altamente personalizable que te permite convertir tus imágenes, de forma sencilla, en una colección que se puede ver como una presentación, incluso con efectos si se desea. Soporta la creación automática de miniaturas y las etiquetas.
Puedes personalizar el aspecto tanto como desees y, si te sientes generoso, enviárselo al autor para que lo publique en su sitio para que todos podamos descargarlo, como ejemplo el tema Pink
Puedes utilizar JaS en tus sitios personales o comerciales siempre que no cobres a tus visitantes por ver las imágenes y mantengas los créditos al comienzo del script. Para cualquier otro uso puedes contactar con el autor.
JaS - Javascript Slides: http://www.robertnyman.com/jas/
A través de despuesdegoogle conozco una nueva librería ultraligera de efectos javascript: Bytefx.
Bytefx:
http://webreflection.blogspot.com/2006/09/simple-effects-bytefx.html
Demo
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:
- Mediante PHP (o ASP): http://www.maratz.com/blog/archives/2004/11/18/faux-active-link/
- Simulándolo con CSS: http://www.themaninblue.com/writing/perspective/2004/11/19/
Publicado el: 21 Septiembre, 2006
Archivado en: Javascript
Cuando utilizamos muchos gráficos en nuestros sitios u ofrecemos imágenes en alta calidad puede resultarnos interesante precargar estas imágenes para que el sitio se muestre más rápido al usuario.
Un ejemplo de precarga simple con javascript podria ser el siguiente:
Introduce este código entre las etiquetas <head> de tu documento
- <script language="JavaScript">
-
- image1 = new Image();
- image1.src = "http://www.miweb.com/imagen1.png"; //ruta de la imagen
-
- image2 = new Image();
- image2.src = "http://www.miweb.com/imagen2.png";
-
- </script>
En Sentido Web hacen una aproximación «sólo CSS» del tema de las precargas: Precarga de imágenes mediante CSS, no parece un método muy ortodoxo y si seguís el enlace al sitio en inglés veréis que en los comentarios se duda de la efectividad del mismo, no obstante ahí queda como referencia para los que no queréis emplear javascript en vuestros sitios.
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
Low Pro es un conjunto de extensiones para la libería Prototype que hace más sencillo implementar un DOM scripting no obstrusivo y que forma el componente de Javascript del plugin Unobstrusive Javascript for Rails pero puede utilizarse de forma independiente.
Se trata de una compilación de numerosas técnicas adaptadas para ser utilizadas con Prototype, que se centran principalmente en mejorar el manejo de eventos y la manipulación del DOM de forma más acorde con el W3C.
Para comenzar a utilizarlo simplemente hay que descargarlo y cargarlo en nuestros documentos junto con Prototype.
- <script src="/js/prototype.js" type="text/javascipt"></script>
- <script src="/js/lowpro.js" type="text/javascipt"></script>
Low Pro es compatible con todas las versiones 1.5+ de Prototype pero no funciona con la 1.4 ni anteriores.
Enlace | Low Pro: Unobtrusive scripting for Prototype
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.
- Primero rodearemos todo el código a introducir en pestañas con un div con clase tabber
- <div class="tabber">
- <h3>Section One</h3>
- Section one content.
-
- Section two content.
- </div>
- 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
- <div class="tabber">
-
- <div class="tabbertab">
- <h3>Section One</h3>
- Section one content.
- </div>
-
- <div class="tabbertab" title="MyTabTitle">
- Section two content.
- </div>
-
- </div>
Los elementos “tabbertab” siempre deben ser hijos del elemento “tabber”
- Cargamos el script en la cabecera
- <script type="text/javascript" src="tabber.js">
- </script>
Finalmente, el script convertirá el código en algo así:
- <div class="tabberlive">
-
- <ul class="tabbernav">
- <li class="active">
- <a href="javascript:void(null)" onclick="">
- Section One</a>
- </li>
- <li>
- <a href="javascript:void(null)" onclick="">
- MyTabTitle</a>
- </li>
- </ul>
-
- <div class="tabbertab">
- <h3>Section One</h3>
- Section one content.
- </div>
-
- <div class="tabbertab">
- Section two content.
- </div>
-
- </div>
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/
Sin duda uno de los mayores inconvenientes del uso de AJAX en una aplicación web o sitio dinámico es la inutilización del botón atrás del navegador y la imposibilidad de seleccionar y agregar a favoritos secciones o vistas de la página.
En los sitios web tradicionales, al ir pulsando sobre los enlaces vamos abriendo páginas nuevas que se verán reflejadas en la barra de navegación. Si el usuario desea volver sobre sus pasos simplemente ha de ir pulsando el botón atrás de su navegador hasta regresar al lugar de donde vino. Además, si lo desea, el usuario puede guardar la dirección de determinada sección o vista para acceder a ella directamente o para compartirla con otros usuarios.
Los sitios web creados con tecnología AJAX no generan nuevas páginas al ir abriendo secciones si no que todo se carga dentro del mismo documento. Los navegadores no están acostumbrados a este comportamiento y si un usuario aprieta el botón atrás pensando volver al lugar donde estaba inmediatamente antes, puede llevarse una desagradable sorpresa al verse en el principio del sitio o, incluso, fuera de él. Ni que decir tiene que al ocurrir todo dentro de la misma página no se actualiza la url y por tanto es imposible seleccionar secciones concretas para favoritos.
Existen numerosas técnicas para corregir este comportamiento y permitir a los usuarios utilizar los botones de atrás y adelante de su navegador, así como acceder directamente a partes del sitio. No obstante la mayoría presenta fallos y, además, suelen estar integradas en librerías más extensas (por ejemplo, Dojo) obligándonos a adaptarnos a la librería seleccionada y a cargar scripts con un peso considerable.
Debido a estos fallos e inconvenientes de las soluciones preexistentes Brad Neuberg decidió crear Really Simple History: Un completo script que puede añadirse a cualquier aplicacion AJAX. RSH soluciona los fallos más comunes y funciona correctamente en Internet Explorer, Mozilla Firefox y Opera. Safari no está soportado por ningún script de este tipo ya que su forma de manejar la historia y los marcadores es totalmente diferente.
Si Really Simple History os parece demasiado pesado o si estáis utilizando Prototype/Script.aculo.us seguramente os interesará echarle un vistazo al script creado por Kevin Hoang, mucho más ligero (poco más 100 líneas de código) aunque seguramente con menos opciones.
Seguro que en alguna ocasión has necesitado una galería de imágenes, desde crear un portafolio hasta mostrarle al mundo las fotos de tu perro. Generalmente los CMS pensados como galerías terminan teniendo gran cantidad de opciones, muchas que ni siquiera vas a utilizar y que pueden dificultar el trabajo de administración o incluso de configuración.
A pesar de que buscando un poco no es difícil encontrar algo ya hecho que se adecue a nuestras necesidades, realizar nuestro propio script puede ser un ejercicio interesante. En The Shadow Fox Network hay publicado un tutorial con todos los pasos a seguir para crear nuestra propia galería, con todas las funciones básicas e incluso efectos y un slideshow en javascript, creado con la librería script.aculo.us.
How To Make Your Own Image Gallery With An Administration
Via dzone
