Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.
Simple pdf.js page viewer
/ --
Vía / @badass_js
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:
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
Vía / WebAppers
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});Hace unos días hablábamos de cómo comparar imágenes mediante PHP, y hoy, debido a una pregunta de un lector de Sentido Web, vamos a explicar cómo comparar un texto mediante Javascript.
Read More “Laboratorio: Comparar textos mediante Javascript”
Un gran script que nos permite insertar sliders en nuestras webs, que sean accesibles y no obstrusivos. A parte, permiten ser manejados por las flechas del cursor, por las teclas de inicio y fin, o el ratón, incluido el scroll.
El script le asigna automáticamente a cada slider el rol slider requerido por ARIA y los estados valuemax, valuemin y valuenow.
Un ejemplo de uso para un slider horizontal con una llamada de función serÃa la siguiente:
class="fd_range_0_255 fd_classname_extraclass fd_callback_updateColor"
VÃa / WebAppers
En mi blog personal, me ocurre que cuando quiero mostrar código en un post tengo que modificarlo para que quede bonito, poniéndole estilos, etc… La verdad es que es bastante aburrido y no es algo que me guste mucho hacer, me da mucha pereza.
Supongo que hay más gente que se encuentra en mi situación y me entenderán. La solución es usar unas librerías que me modifiquen el código y lo muestre con colores y tabulado. No me he puesto a buscar en Google, pero habrá ya alguna, de todas formas, siempre está bien saber cómo se podría hacer.
En este caso vamos a explicar como realizar un pequeño parser de código PHP, con tan solo unas funcionalidades: reconoce comentarios, palabras reservadas, funciones, variables y texto entrecomillado, a parte de realizar una mínima tabulación. No reconoce código HTML, ni realiza otras cosas, aunque las ampliaciones son posibles.
Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe
Comments are closed.
En opera el blog se ve espantoso…
Aunque en navegadores de equipos de sobremesa también funcionaria bien, nada mejor que tener una pagina autónoma que no dependa de muchas otras aplicaciones por parte del usuario para mostrar su contenido!