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

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

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

Uno de los problemas con los que nos podemos encontrar es tener un documento en un formato y tener que exportarlo en otro formato. La exportación se puede realizar utilizando Google Docs, quizás un tanto rebuscada la solución, aunque quizás no tanto.

Os paso un script que sube el fichero a Google Docs dentro de una carpeta y acto seguido lo exporta a otro formato, en este caso subo un PPT y lo convierto en PDF (me hubiese encantado que fuera a HTML pero no acepta esa opción).

(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

Desde el mx:riactive os invitan a todos a un evento enfocado a todos los entusiastas de la Plataforma Flash en México. La temática del evento serán las tecnologías móviles. Entre los temas a tratar: Desarrollo para Android, Blackberry y iOS con Flash.

Se llevará a cabo el jueves 3 de marzo en el Auditorio de Adobe en México. El cupo es limitado por lo que les recomendamos registrarse lo antes posible. Estaremos usando el siguiente hashtag #Flash2Dev por si gustan monitorear el evento vía redes sociales.

Para ver la agenda y registrarse utilicen el siguiente enlace.

Más información en: riactive