Visualizador de imágenes en DHTML con javascript no obstructivo

ByLuis

En Dynamic Drive nos ofrecen una buena utilidad y un magnífico ejemplo de uso de DHTML accesible. Se trata de un sencillo sistema que permite previsualizar o ampliar imágenes desde un enlace poniendo “thumbnail” como valor del atributo rel del enlace. Además el contenido atributo title será mostrado junto a la imagen.
http://sentidoweb.com/img/2007/01/dinamic_drive-thumb.png
Lo mejor es que está hecho de forma no obstructiva, es decir, dado que enlace apunta a la imagen, si el usuario no tiene habilitado el javascript al pulsar en enlace le llevará a la misma. En caso contrario mostrará una capa con ésta.
Vía / Ajaxian

Similar Posts

Lawnchair: ‘base de datos’ clave-valor en Javascript

ByLuis

Lawnchair es una base de datos documental basada en JSON y que funciona en el cliente (Javascript). Puede venir muy bien para desarrollo de aplicaciones para móviles. Es muy fácl de usar y permite operaciones de escritura, lectura, búsqueda y eliminación.

var people = new Lawnchair('people');
// Saving a document async
people.save({name:'frank'}, function(r) {
    console.log(r);
});
// Specifying your own key
people.save({key:'whatever', name:'dracula'});

Lawnchair

| |

Laboratorio: shortcuts en formularios

ByLuis

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

Read More “Laboratorio: shortcuts en formularios”

Mootools FormCkeck: comprobación de formularios

ByLuis

Mootools FormCheck es un script que permite añadir comprobaciones a nuestros formularios y que muestre mensajes de error cuando alguna de esas comprobaciones falle.
formcheck.png
Se puede comprobar los errores cuando se realiza un submit o cuando se abandona el elemento HTML (blur). Los errores aparecen como un bocadillo emergente (con posibilidad de cerrar) y se puede especificar el tipo de dato que queremos comprobar: texto, numérico, alfanumérico…
El problema de estas librerías es que existen para un framework en particular, estaría bien que existiera (o crearlo nosotros) un grupo de trabajo que tradujera las librerías útiles a diferentes frameworks (mootools, jquery, yui, …), ya que cuando buscamos un módulo específico a veces lo encontramos para otro framework. ¿Alguien se apunta?.
Mootools FormCkeck
Vía / WebAppers

Detectar copiar, pegar y cortar en una caja de texto con jQuery

ByLuis

Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.

$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
});

Detect Copy, Paste and Cut operations on a TextBox using jQuery

Vía / Script & Style

Boomerang: medición de rendimiento desde la perspectiva del usuario

ByLuis

Boomerang es una librería desarrollada por Yahoo que permite medir diferentes aspectos de rendimiento de nuestra web desde la perspectiva del usuario final. Añadiendo un script y distintas funciones, podemos comprobar diversos aspectos de nuestra web como:

  • El tiempo que el usuario cree que tarda en cargarse la web
  • El tiempo de carga de contenido dinámico
  • El ancho de banda durante la carga de la página
  • Tiempo de carga de diferentes módulos, por ejemplo módulos de Twitter o Facebook
  • Latencia HTTP
  • Latencia DNS
BOOMR.init({
  user_ip: "",
  beacon_url: "http://yoursite.com/path/to/beacon.php",
  BW: {
    base_url: 'http://yoursite.com/path/to/bandwidth/images/"
  }
});

Además permite etiquetar páginas para realizar distintos tests y poder compararlos, realizar tests a usuarios aleatorios y evitar abusos de uso

Boomerang

Vía / WebAppers

Tutoriales de Javascript

ByLuis

Está claro que tutoriales hay muchos, pero no todos son iguales, ni están enfocados para un mismo público. En este caso, yo creo que se trata de tutoriales sencillos pensados para empezar de cero, para quien no tenga ningún conocimiento de Javascript, incluso diría que para quienes el HTML es solo una forma de mostrar texto.
Empieza por lo más básico, luego nos introduce los objetos, funciones, tipos básicos, arrays, formularios y validaciones, trabajar con frames. Lo dicho, para empezar creo que es muy adecuado.
JavaScript Cake: Tutorials and Scripts
Vía / dzone