javascript

Webshims: Polyfill para JavaScript

Webshims Lib es una biblioteca polyfill modular centrada en implementaciones preciosas de las características ya estables de HTML5, de manera que los desarrolladores puedan escribir código moderno, interoperable y robusto para todos los navegadores. Funciona sobre jQuery y Modernizr.

¿Pero qué es un polyfill?

Es un término acuñado por Remy Sharp que define una porción de código (o un plugin) que proporciona la base tecnológica que tú, como programador, esperas que ofrezca nativamente el navegador.

Por ejemplo, el propio Remy Sharp colgó un gist con un ejemplo de polyfill que permite que navegadores antiguos ofrezcan soporte a localStorage y a sessionStorage mediante las cookies. Fue a partir de este gist desde el que hace dos años comenzó el desarrollo de Webshims Lib.

Webshims Lib

Actualmente funciona sobre la mayoría de navegadores (incluso IE6), y su funcionamiento es vergonzosamente sencillo:

<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>

<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
   // implement all unsupported features || call polyfill
   // before DOM-Ready to implement everything as soon and
   // as fast as possible
   $.webshims.polyfill();

   // or load only specific features you need
   // $.webshims.polyfill('forms json-storage');

   $(function(){
      //use all implemented API-features on DOM-ready
   });
</script>

Características:

Ámbitos en eventos JavaScript

Últimamente mi buen amigo Álex me está animando a que dé una oportunidad a CoffeeScript, el preprocesador de JavaScript que más está triunfando. Hablando de todo un poco, hemos comentado que JavaScript tiene algunas peculiaridades que, cuando uno empieza a trabajar con él, le descoloca un poco. Por ejemplo, el hecho de que su orientación a objetos esté basada en prototipos. Otra de esas peculiaridades que han salido a relucir es el cómo se manejan los ámbitos en eventos JavaScript. O dicho de otra forma: ¿Dónde debería apuntar this cuando estamos en la función manejadora de un evento?

Introducción a la programación en Facebook IV

En la primera parte vimos una introducción a las tecnologías usadas para programar en Facebook. En la segunda, creamos una aplicación, y le añadimos algún Social Plugin y etiquetas Open Graph. En el tercero, nos zambullimos en el SDK JavaScript, y autenticamos al usuario en nuestra aplicación, le solicitamos permisos extra, publicamos en su muro, y mostramos algún diálogo.

Hasta ahora hemos trabajado sobre una aplicación que funcione sobre nuestra página web. Sin embargo, como ya sabes, Facebook nos da más opciones: aplicaciones en móviles, y aplicaciones dentro de Facebook. Hoy vamos a ver cómo crear una aplicación dentro de Facebook. Esto se hace mediante un canvas (iframe) en Facebook en el que se mostrará la página web que deseemos. Por supuesto, en esa página web podremos gestionar JavaScript, CSS y HTML como queramos.

Introducción a la programación Facebook II

Ok, el anterior artículo no estuvo mal; vimos una introducción conceptual a las piezas clave para la construcción de aplicaciones en Facebook. ¡Pero no llegamos a hacer nada! En este post vamos a construir algo sencillo, jugando con el SDK en JavaScript. Vamos a probar a mostrar algunos de los social plugins, usaremos Open Graph, y presentaremos dos nuevas tecnologías: XFBML y Facebook Insights. ¡Al lío!

Bibliotecas JavaScript: Motores de física

Hoy hemos visto en el Google I/O la noticia de que Angry Birds estará disponible para el navegador Google Chrome. ¿Cómo es esto posible? Gracias al objeto canvas :D Ahora que HTML5 ha llegado para quedarse, y que incluso Internet Explorer ofrece soporte para el elemento canvas, poco a poco se irán popularizando las animaciones y juegos en el navegador, sin necesidad de Flash. Uno de los elementos clave son los motores de física; consiste en una serie de bibliotecas que permiten modelar sistemas donde exista gravedad, y se puedan definir objetos rígidos o dinámicos, con coeficientes de fricción, elasticidad, etc. Suena bien, ¿verdad? :)

Mejorar el rendimiento de javascript con timers

Uno de mis últimos encargos consiste en una aplicación financiera para el navegador. En resumen, se trata de “traducir” una serie de hojas en Excel a javascript. El cómo lo he implementado da para otro artículo.

Básicamente el funcionamiento es el siguiente:

  • Creamos un campo de texto por cada celda del fichero Excel.
  • Muchas celdas tienen valores dinámicos, es decir, se generan a partir del valor de otras.
  • Definimos la fórmula que genera el valor de cada celda dinámica, y esa fórmula la añadimos a la pila de callbacks del evento ‘change’ de todas las celdas de las que depende.

Problema: Hay miles de celdas, prácticamente todas dinámicas. Esto implica que a menudo, al cambiar un sólo valor, se generan cientos o miles de cálculos. Javascript es single threaded, es decir, sólo se ejecuta una única hebra (para realizar cálculos, modificar el árbol DOM, gestionar eventos, o redibujar la pantalla). Si una operación muy costa en cálculos conlleva 8 segundos, la interfaz de usuario se quedará bloqueada hasta que finalice. Mal asunto.

El experto en usabilidad Jakob Nielsen dijo:

0,1 segundos es el límite para que el usuario perciba que el sistema responde inmediatamente.

Programación basada en prototipos

En los resúmenes de los distintos paradigmas de programación se suele mencionar la programación funcional, lógica, procedural, orientada a objetos…

Dentro de la programación orientada a objetos, hay distintos tipos. El más conocido es el basado en clases, donde encontramos lenguajes como Java, C++, C#… Sin embargo, hay más tipos de programación orientada a objetos, y es usada por lenguajes muy conocidos. Me estoy refiriendo a la programación basada en prototipos, y su lenguaje más conocido es JavaScript.

Según la Wikipedia: Programación basada en prototipos es un estilo de programación orientada a objetos en el cual, las “clases” no están presentes, y la re-utilización de procesos (conocida como herencia en lenguajes basados en clases) se obtiene a través de la clonación de objetos ya existentes, que sirven de prototipos, extendiendo sus funcionalidades.

Historial y botón volver en JavaScript

Cada día son más frecuentes las aplicaciones web que hace un uso extensivo de JavaScript, relegando una mayor carga computacional al cliente, dentro de la arquitectura cliente-servidor, lo que habitualmente se conoce como cliente pesado. Con ello, entre otras cosas, se logra una interfaz de usuario mucho mas rica en prestaciones.

Algunos ejemplos de webs que hacen uso de esto es el cliente de correo de Google Gmail, o las famosas redes sociales como Facebook o Tuenti. En estas aplicaciones, toda la interfaz está gobernada por JavaScript. Cuando accedemos a un enlace, generalmente no conlleva una nueva petición HTTP sino que, en su lugar, el documento actual se actualiza con nuevo contenido (AJAX).

Internet Explorer 9 sigue imparable

Todos estamos siendo testigos del empujón que están dando desde Microsoft a la próxima versión de su navegador, Internet Explorer 9. Si bien hace poco veíamos que ya obtenía una puntuación de 83/100 en el Acid3 test, su última Plaform Preview ya logra un increíble 95/100.

Y es que ya es la Fourth Platform Preview, la versión que precede a la Beta de IE9, donde ya podremos probar de verdad cómo funciona el nuevo navegador.

Una de las principales novedades que trae es la aceleración hardware HTML5, esto es, aceleración completa tanto en texto, gráficos, audio y vídeo. Presentan una completa lista de ejemplos demostrando el rendimiento del navegador, comparándolo además con otros.

SVG, ya plenamente funciona dentro de IE9. Lo venden, no sólo como una herramienta para realizar diagramas estáticos, sino como un una excelente elección que permite crear un nuevo escenario de animaciones.

La integración nativa de JavaScript, hasta ahora una pieza fuera del navegador. En IE9, su nuevo motor de JavaScript (Chakra), mejora muy notablemente el rendimiento si lo comparamos con sus antecesores. Como nota curiosa, parece que ya oficialmente han abandonado la terminología JScript para referirse a JavaScript. Además, han mejorado el árbol DOM.

Vemos también como siguen mejorando posiciones en la batalla por el mejor motor de JavaScript, superando ya las últimas versiones de Safari y de Firefox.

Todo parece indicar que para finales de este año, cuando salga IE9, realmente va a suponer el principio de una revolución en la web, ya que podremos por fin empezar a usar HTML5. Sólo veo una pega: No estará disponible para Windows XP, que a día de hoy, mantiene todavía una cuota de mercado de casi el 60%.

Más información, en IEBlog.

http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx

Vídeo, audio e imágenes de entrada al navegador

Hace poco se ha publicado un nuevo borrador del w3c (The Capture API) que permitirá conectar dispositivos de entrada al navegador, permitiendo por ejemplo capturar una fotografía, mensaje de audio por el micrófono, o un vídeo.

Aun se encuentra en un estado muy prematuro, pero nos enumeran una serie de posibles casos de uso:

  • Captura y envío de imágenes. Permitiendo el envío por XHR de varias imágenes.
  • Captura de imagen panorámica. Por ejemplo, con 3 tomas que posteriormente se “concatenan” automáticamente para mostrar la panorámica.
  • Video Chat. Aun está sin definir el método para realizar streaming, sin embargo todas las soluciones propuestas pasan por websockets.
  • Cámara web. Permitirá realizar una aplicacion de vigilancia para controlar la cámara, incluyendo movimientos como arriba, abajo, izquierda o derecha, o hasta aplicaciones de detección de movimiento.
  • Búsqueda por voz. Introduciendo por el micrófono la cadena de búsqueda.
  • Recordatorio de voz. De nuevo, desde el micrófono.

Por supuesto, para proteger la privacidad de los usuarios, el navegador tendrá que pedir explícitamente confirmación del usuario para permitir que se acceda a estos dispositivos.

Ejemplo de uso:

// Create a container div element and append it to the document body.
var container = document.createElement("div");
document.body.appendChild(container);

// The browser viewport width in pixels.
var screenWidth = window.innerWidth;

function successCallback(data) {
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].uri;
// If the image width exceeds that of the browser viewport, the image
// is scaled to fit the screen keeping the aspect ratio intact.
if (data[i].format.width > screenWidth) {
img.style.width = screenWidth + "px";
img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
}
container.appendChild(img);
}
}

function errorCallback(err) {
alert(err.message + " (" + err.code + ")");
}

// Launch the device camera application and invoke the callback once 
// the user exits the camera application.
transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);

Mientras tanto, y hasta que esto sea una realidad, se puede utilizar el paquete flash.media de ActionScript3, en concreto las clases Camera y Micrphone. Pero claro, no es lo mismo. Una verdadera lástima tener que esperar tanto tiempo. Veremos cuándo tiene el navegador más utilizado estas funcionalidades.