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

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

TwitPic es un servicio que se utiliza para subir fotos que luego publicas en Twitter. Si estás realizando una aplicación que tira de Twitter y quieres dar la oportunidad al usuario de subir sus fotos puedes hacer uso de esta aplicación y su API (es necesario darse de alta):

(más…)

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…)

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.
Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
<meta name="viewport" content="target-densitydpi=device-dpi">

Nuestra fuente: Sentidoweb