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 de Progreso de HTML5 para poder mostrar:

• total: total de bytes
• loaded: bytes subidos
• lengthComputable: indica si el tamaño del fichero es conocido
• transferSpeed: velocidad de transferencia
• timeRemaining: tiempo que falta (en formato Date)

Por ahora solo es compatible con Firefox, Chrome y Safari.

En el post lo explican con gran detalle.

Html5 File Upload with Progress

Nuestra fuente: Sentidoweb

El servidor web Apache es uno de los más extendidos y con más opciones de configuración, esto implica que es complejo. Vamos a ver cómo sobrevivir con Apache.

(más…)

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 generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.

Nuestra fuente: SentidoWeb

Adobe lleva defendiendo a Flash con uñas y dientes desde que empezó la polémica de si la plataforma tenía que formar parte del futuro de los estándares web, encendida por Apple y sus medidas para que Flash no esté presente en sus dispositivos. Aún así, en la compañía responsable de aplicaciones como Photoshop contemplan todos los caminos y han lanzado Adobe Edge, una plataforma para crear animaciones web usando HTML5, CSS y Javascript.

La idea de Adobe es que Edge coexista con la plataforma Flash, pero algunos ya lo están viendo como una solución alternativa para que todo el contenido web sea más estándar y se pueda ver desde cualquier gadget. Con Edge se pueden crear animaciones web, y en el futuro podremos crear incluso juegos. Suena mucho a una evolución de Flash a largo plazo más que a su compañero.

Adobe Edge puede descargarse de forma gratuita al estar en una fase de pruebas preliminar, aunque pasará a tener un precio en cuanto sea lanzado definitivamente el año que viene. Hay versiones para Windows y Mac OS X. Si habéis hecho algunos pinitos con animaciones en Flash, quizás tengáis curiosidad para ver cómo se puede hacer lo mismo con Edge.

Vía | ReadWriteWeb
Más información | Adobe Edge
En Genbeta | Hablamos con Anup Murarka, director de márketing de Adobe Flash

Nuestra fuente: Genbeta

El formato CSV resulta muy cómodo tanto de generar como leer, por eso muchos programas lo aceptan. Se trata simplemente de valores separados por comas (Comma-Separated Values). Vamos a ver como generar un fichero desde MySQL para almacenar datos.

Para generar el fichero desde un comando SQL en MySQL deberemos indicar INTO OUTFILE con el nombre de fichero y las siguientes opciones:

• FIELDS TERMINATED BY: Indicamos como terminan los campos, en este caso deben ser separados por comas ‘,’
• OPTIONALLY ENCLOSED BY: Como se deben indicar en el caso que tengan el separador como valor. En este caso mediante comillas dobles ‘”‘
• ESCAPED BY: Indicamos como debemos escapar los carácteres, en este caso mediante la contrabarra ‘\\’
• LINES TERMINATED BY: Indicamos como especificamos una nueva fila, en este caso mediante un intro ‘\n’

Por lo tanto el comando SQL quedaría:

mysql>  select * from loquesea
INTO OUTFILE "/tmp/inventari.txt"
FIELDS TERMINATED BY  ','
OPTIONALLY ENCLOSED BY '"'
ESCAPED BY  '\\'
LINES TERMINATED BY '\n' from RackObject;
Query OK, 168 rows affected (0.29 sec)

Nuestra fuente: Systemadmin.es

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.

(más…)

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");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

Nuestra fuente: Sentidoweb

Una opción interesante del mysqld es la opción –bootstrap, esta se usa para inicializar la base de datos sin arrancar totalmente la instancia. Vamos a ver como funciona y como podemos usarla para tener el MySQL en un modo similar a lo que sería el single user de Unix.

Con dicha opción –bootstrap arranca el mínimo de la instancia sin tener disponible ni el socket ni el puerto TCP para conexiones de clientes, sino que únicamente se comunica con el usuario por stdin.

Por lo tanto, deberemos pasar los comandos que queremos que ejecute. Cuando le mandemos el EOF, se cerrará la base de datos y terminará la aplicación. Por ejemplo, con el MySQL apagado ejecutamos el mysqld con la opción bootstap y le mandamos crear una base de datos:

(más…)

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.
(más…)