Similar Posts
Tinyfier: compresor CSS y Javascript
Me avisa Javier que ha desarrollado una aplicación para comprimir CSS y Javascript, parecida a Minify (del cual se obtiene gran parte del código empleado) o YUI Compressor
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.
Laboratorio: marcadores en los vídeos de YouTube
Una de las cosas que diferencia a YouTube de los demás es su API, la cual nos permite trabajar con los vídeos de forma muy sencilla. Y algo que echo en falta cuando me pasan videos de YouTube, ya sea en la propia web o en un videoblog, es tener que esperar a que llegue el momento destacado que querían que viera o tener que “jugar” con el controlador hasta que doy con el tiempo adecuado.
Por eso se me ha ocurrido que mediante la API se podría evitar esta situación facilmente, tan solo habría que indicar mediante un anchor la posición que queremos que se cargue el vídeo, ya sea mediante enlaces en la propia web o mediante la propia URL.
Se trata de un script muy sencillo, el cual he realizado sin frameworks como jQuery, porque a parte de intentar no olvidar el javascript normal, tampoco era necesario meterle jQuery o parecido. Eso sí, he utilizado swfobject porque es más sencillo trabajar con esta librería.
El script consta de dos partes: modificar los enlaces con anchors a partes del vídeo y acceder a una posición concreta del vídeo si se indica en la URL. Para ello es necesaria la función onYouTubePlayerReady, que es la que se ejecuta cuando el player de YouTube se carga y la API de javascript está activada.
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/AaO1FzE6J9I&border=0&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "344", "8", null, null, params, atts);
function onYouTubePlayerReady() {
// Calcula los segundos de un tiempo
var segundos = function(tiempo) {
var fact = 1;
var segs = 0;
for(var j=tiempo.length-1; j>=0; j--) {
segs += tiempo[j]*fact;
fact *= 60;
}
return segs;
}
// Modifico los anchors del video
var enlaces = document.getElementById('marcadores').getElementsByTagName('a');
for(var i=0; i<enlaces.length; i++) {
enlaces[i].addEventListener('click', function() {
var tiempo=this.href.substring(this.href.indexOf('#')+1).split(':');
var player = document.getElementById('myytplayer');
player.seekTo(segundos(tiempo), true);
player.playVideo();
return false;
}, true);
}
// Accedo al tiempo específico de la URL
var href = document.location.href;
if ((pos = href.indexOf('#')+1)) {
var player = document.getElementById('myytplayer');
player.seekTo(segundos(href.substring(pos).split(':')));
player.playVideo();
}
}
El formato del marcador tiene que ser #HH:MM:SS o #MM:SS o #SS
Yo creo que este script puede ser muy útil para los videoblogs para marcar momentos específicos y para que los visitantes puedan enviar a sus amigos los momentos que más le interesan.
jsPDF: crea PDFs directamente desde Javascript
Interesante javascript que nos permite crear PDFs sin necesidad de aplicaciones en el servidor, sino usando únicamente una librería PDF. Su uso es muy sencillo, devolviendo una URL con Content-type y codificada en Base64:
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
// Output as Data URI
doc.output('datauri');
A mí en Firefox no me ha funcionado, pero en Chrome sí.
Vía / DZone
FancyBox: zoom de imágenes mediante Javascript
Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.
Un ejemplo de uso sería el siguiente:
$(function() {
$("div#test_zone a").fancybox();
});
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”