Sentido Web

Referencias y explicaciones sobre desarrollo web, PHP, Ajax, XHTML, MySQL ...

Archivo para la categoría ‘Javascript’

19Nov
2011
<!-- 1 -->

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 [...]
06Oct
2011
<!-- 1 -->

JSZip: crear ficheros ZIP mediante Javascript

Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios… var zip = new JSZip(); zip.add(”Hello.txt”, “Hello World\n”); img = zip.folder(”images”); img.add(”smile.gif”, imgData, {base64: true}); content = zip.generate(); location.href=”data:application/zip;base64,”+content; El único problema que hay es a la hora de [...]
15Jun
2011
<!-- 2 -->

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

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. <html> <head> <title>Simple pdf.js page viewer</title> <script type=”text/javascript” src=”pdf.js”></script> <style type”text/css”> body { margin: 6px; padding: 0px; background-color: [...]
08Jun
2011
Comments Off

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad: document.addEventListener(”DOMContentLoaded”, function () { // Create a popcporn instance by calling Popcorn("#id-of-my-video") var pop = Popcorn(”#video”); // [...]
22Apr
2011
<!-- 1 -->

MathJax: librería javascript para mostrar fórmulas matemáticas

MathJax es una librería javascript que permite mostrar fórmulas LaTeX y MathML en nuestras páginas. Es compatible con casi todos los navegadores (menos IE5.5 lógicamente), permite copiar el código TeX y MathML de la página, utiliza fuentes CSS y no imágenes o Flash y muchas cosas más. <!DOCTYPE html> <html> <head> <title>MathJax TeX Test Page</title> [...]
18Apr
2011
Comments Off

jQuery Graceful Websocket: plugin jQuery para websockets

jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite [...]
23Mar
2011
Comments Off

Clipping de vídeo usando HTML5 y SVG en Firefox4

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 [...]
16Nov
2010
Comments Off

El rendimiento de Google Instant Previews

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas [...]
09Nov
2010
Comments Off

Heatmap en tiempo real con Javascript y Canvas

Los heatmaps son muy útiles para ver qué zonas de nuestras webs atraen la atención de los usuarios. Esta función de Javascript permite mostrar en tiempo real el heatmap que se va produciendo gracias a Javascript y el elemento HTML de Canvas. Real-time heatmap example with Javascript and HTMLCanvas Post originalVía / WebAppers
20Oct
2010
<!-- 2 -->

Close Pixelate: pixela imágenes con HTML5

Close Pixelate es un script que convierte una imagen en su correspondiente pixelada haciendo uso de HTML5 y canvas. Se le pueden indicar las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha Su uso es tan sencillo como ejecutar lo siguiente: var docReady = function() { document.getElementById(’portrait-image’).closePixelate([ { resolution : 24 }, [...]