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

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

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

Cree sitios web basados en estándares, así como completas experiencias digitales para equipos de sobremesa, SmartPhones, dispositivos de tableta y TV. Cree trabajos con HTML5, CSS3 y jQuery Mobile. Los contenidos que cree se podrán ver en varias plataformas, por ejemplo, Android™, BlackBerry e iOS.

(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

Comenzamos el año con nuevos eSeminarios gratuitos. Esta vez le toca el turno a HTML5.
En este eSeminario conoceremos la estructura de los documentos HTML5  y daremos una visión general sobre las nuevas etiquetas que se incorporan en HTML5 haciendonos la vida un poco mas fácil. Como complemento a los anteriores eSeminarios que dimos de CSS, veremos algunas propiedades de CSS3 con algun ejemplo practico, todo esto de la mano de Luis Jhoham Venegas Tobar de Colombia

Recuerda el próximo 10 de Febrero a las 19:30h GMT+1 (Para ver el horario en diferentes paises, entrar en: http://bit.ly/9QYftS) te mostraremos cómo comenzar a trabajar con HTML5 y algo de CSS3.

También haremos entrega de suscripciones semanales a video2brain entre los asistentes. Para ello, la única condición es estar registrado en nuestro moodle.

Los cambios en Internet causados por la implementación de HTML5.

El HTML5, la próxima versión del lenguaje de marcas utilizado para crear páginas Web, ha llamado la atención por su capacidad para mostrar vídeo en un navegador Web sin necesidad de plug-ins, como el Flash de Adobe. Sin embargo, otras características menos conocidas podrían, en última instancia, tener un impacto mucho mayor sobre cómo los usuarios experimentan la Web.

Los expertos afirman que lo que el HTML5 hace por detrás –como sus comunicaciones de red y sus funciones de almacenamiento en el navegador– podría mejorar la velocidad de carga de las páginas (sobre todo en dispositivos móviles), hacer que las aplicaciones Web funcionen mucho mejor e incluso permitir a que los navegadores Web lean las páginas antiguas con más facilidad.
(más…)

Si hace poco comentaba el tema de Web SQL Database de HTML5, ahora encuentro un plugin para jQuery que nos facilita esta labor.

$.jStorage.set(key, value)
value = $.jStorage.get(key)

jStorage

Nuestra fuente: Sentidoweb

Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien: (más…)

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

(más…)