Similar Posts
Progreso de subida de ficheros únicamente con HTML5
Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.
El script hace uso de Evento de Progreso de HTML5 para poder mostrar:
- total: total de bytes
- loaded: bytes subidos
- lengthComputable: indica si el tamaño del fichero es conocido
- transferSpeed: velocidad de transferencia
- timeRemaining: tiempo que falta (en formato Date)
Por ahora solo es compatible con Firefox, Chrome y Safari.
En el post lo explican con gran detalle.
Select Box Factory: combos con diseño y funcionalidades
Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

- Usa divs en vez de options
- Añade funcionalidades al desplegable
- Los contenedores pueden contener lo que necesitemos
- Las opciones pueden estar activas o inactivas
- Los estilos se pueden modificar con facilidad
- Distintos tipos de combos
- Filtros
Algunos scripts para jQuery
He encontrado en Script & Style algunos scripts/pluigns para jQuery que son interesantes:
- Linkselect: transforma elementos select en listas de enlaces con forma de select.
- URL parser: nos permite obtener datos de una URL: protocolo, query, puerto, …
- Virtual jQuery Keyboard: añade un teclado virtual a cajas de texto
- Word-counter for textarea: el título lo dice todo, cuenta las palabras que hay en un textarea
- Smooth popup: crear un popup no modal
- idTabs: ayuda a crear pestañas de forma sencilla
- dwFadingLinks: crea el efecto fadding en los links cuando se produce un onmouseover
- ColorPicker: selector de color
Cambiar el tamaño de letra dinámicamente
![]()
Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.
Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.
Canvas2Imagen: convertir canvas a imagenes
El elemento CANVAS nos permite dibujar directamente en el HTML y el script que os muestro nos permite transformar el canvas en imagen (BMP, JPEG y PNG) o guardarla en nuestro disco duro.
Un ejemplo de uso es el siguiente:
var strDataURI = oCanvas.toDataURL("image/jpeg");
Laboratorio: realizar drag and drop de elementos HTML
Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sÃ, la forma de realizarlo es la misma.

En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podrÃa hacer asÃ, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podrÃa ir seleccionando el texto según se mueve el ratón.
Read More “Laboratorio: realizar drag and drop de elementos HTML”
