PDF.js librería Javascript para leer PDF en Canvas

ByLuis

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
  
  





  

    
    
    
    / --

PDF.js

Vía / @badass_js

Similar Posts

Indicar calidad de la password con Javascript

ByLuis

Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
passwordmeter.png
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librería, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
Vía / WebAppers

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Consejos para jQuery

ByLuis

Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:

  • Carga la librería desde Google Code
  • Almacena en variables los selectors que vayas a usar en varias ocasiones
  • Evita la manipulación DOM lo máximo que puedas, es mejor realizar una llamada “gorda” que varias pequeñas
  • Usa preferiblemente IDs en vez de nombres de clase cuando realices búsquedas
  • Realiza la captura de eventos correctamente, muchas capturas suele ser ineficiente
  • Usa los nombres de clase para guardar el estado de un objeto
  • Incluso mejor que el anterior, usa el método data() para guardar datos en un objeto
  • Aprende a crear tus propios selectores
  • Usa noConflict() para renombrar el objeto jQuery y no tener problemas con otras librerías
  • Aprende a controlar cuando se cargan las imágenes
  • Usa .lenght en un selector para saber si un objeto existe
  • Añade una clase al objeto HTML para modificar elementos por CSS cuando el documento se haya cargado

Improve your jQuery – 25 excellent tips

Vía / Intenta

Mejora tus técnicas de programación en Javascript

ByLuis

Ya hemos publicado anteriormente una referencia a un artículo de new earth online y hoy vamos a hablar sobre otro de sus grandes artículos.

En este caso se trata de cómo mejorar nuestra forma de programar con Javascript. Una de las ventajas o inconvenientes de Javascript, según quien lo vea, es que se puede usar en cualquier parte de la página web y que no existe ningún método obligatorio de uso. Pero aún así, hay veces que es mejor seguir ciertos pasos para tener un código mejor y más limpio:

  • Separa el contenido de la funcionalidad, por ejemplo, si vas a añadir un evento a un objeto (onclick) añádelo mediante el evento window.onload usando un archivo js.
  • Una cosa que ya hemos comentado anteriormente es ver cómo funciona tu aplicación web si no está activado Javascript.
  • Realiza código compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver según el navegador que sea.
  • Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una función tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma función, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

Vía / dzone

Hacer drag & drop de ficheros fuera del navegador con Chrome

ByLuis

Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.

El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

Sólo disponible en Chrome

Drag out files like Gmail

Menú contextual mediante Javascript

ByLuis

Libería Javascript para crear un menú contextual cuando se pincha con el botón derecho del ratón, centrado en el contenido en el que se pulsa.contextmenu.png

Entre las opciones que ofrece está:

  • Opciones del menú que enlazan a cualquier sitio.
  • Opciones del menú que realizan cualquier función de Javascript.
  • Opciones del menú que muestran texto estatico.
  • Opciones del menú que recuperan texto vía una llamada Ajax.
  • Separadores de opciones en el menú.
  • Iconos para las opciones del menú.
  • Diferentes menús que son llamados dependiendo del elemento que se pulsa.
  • Todos los elementos del menú tienen etiquetas que son transformadas en tiempo de ejecución por los valores introducidos en el elemento pulsado.
  • Evaluación condicional de las opciones del menú, una opción se puede mostrar o no dependiendo de una condición en la plantilla del menú.
  • Estilos CSS.
  • Javascript no obtrusivo.

Right Context

Vía / Ajaxian

2 Comments

  2. 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!

Comments are closed.