Posts Tagged ‘html5’

Flash VS < canvas >

Thursday, July 1st, 2010

Video, Audio y Canvas. De todas las nuevas etiquetas agregadas a HTML5 estás son las que han puesto en duda el futuro de Flash.

Desde el inicio me quedó clara la situación de las primeras 2 (que ya expliqué), pero con Canvas siempre he tenido mis dudas pues lo considero muy poderoso,  a mi parecer es el único que le dará batalla a flash, permitanme explicarles por qué.

Rendimiento

Estaba conforme con los resultados  del test de rendimiento que hizo The man in blue, donde con un sencillo sistema de partículas se medían los fps que podía lograr Canvas, HTML, SVG y Flash.

http://www.themaninblue.com/writing/perspective/2010/03/22/

El ganador indiscutible fué Flash, hice el test en win7 con firefox, chrome, ie8 y el resultado fué el mismo. El rendimiento era el mejor argumento para eliminar a canvas como competencia de flash.

Pero… (chan chan chan chaaaaan)

En el siguiente video podemos ver a IE9, Firefox 4, Chrome 6 y Opera, todas estas nuevas versiones de navegadores tienen aceleración por hardware, lo que cambia totalmente el panorama para Canvas.

http://www.youtube.com/watch?v=OIZUdZdFzOo

El rendimiento es increible (Firefox 4 FTW!) aunque no estoy seguro si con estas versiones canvas superaria a Flash en el test anterior (pues no tengo ninguno de estos instalado) creo que si tendríamos resultados similares.

Implementación

Canvas & Flickr : http://www.xs4all.nl/~peterned/3d/

Este ejemplo utiliza el api de flickr para hacer un grid en 3d de fotografias, afortunadamente con canvas todo el trabajo lo hace Javascript, con el cúal muchos flashers estamos familiarizados:

 
var stage = new Clay.Stage(640, 480, document.getElementById("canvas"));
var world = stage.getWorld();
var camera = stage.getCamera();
 
camera.set(0, 0, 800);
camera.setTarget(Clay.Vector.ZERO);
 
var light = new Clay.Light(-2,-2, 1, 3, .5);
light.setColor(255, 255, 255)
world.addLight(light);
 
stage.resizeTo(640, 480);
 
var palet = [
    new Clay.Material(37,47,51, 1, stage),
    new Clay.Material(65,92,79, 1, stage),
    new Clay.Material(134,156,128, 1, stage),
    new Clay.Material(147,194,204, 1, stage),
    new Clay.Material(206,234,238, 1, stage)
];
 
var rib = 256;
var amount = 3;
var offset = 266;
function rand(range) { return Math.floor(Math.random() * range); };
 
for (var i=0; i<amount; i++) {
    for (var j=0; j<amount; j++) {
        for (var k=0; k<amount; k++) {
 
            var x = ((offset * i) - (offset * (amount-1))/2)*1.5,
                y = (offset * j) - (offset * (amount-1))/2,
                z = (offset * k) - (offset * (amount-1))/2;
 
            var m = palet[rand(palet.length)];
 
            var cube = new Clay.Cube(x, y, z, 4, rib, rib, m);
            world.addShape(cube);
        }
    }
}
 
var flickr = [];
var photos = document.getElementById("photos").getElementsByTagName("img");
 
for(var i=0; i<photos.length; i++) {
    var photo = photos[i];
    var parent = photo.parentNode;
    if(/^a$/i.test(parent.nodeName)) {
        flickr.push(
            new Clay.Texture(photos[i].src, stage)
        );
    }
}

Cabe mencionar que aunque tenemos CSS3 considero Canvas la mejor opción para graphics, animación o hasta interacción, si bien hay algún desquiciado que se atreve a hacerlo con CSS3 creo que no es una buena práctica, pero ya haré un post de CSS3 vs Canvas..

Volviendo al versus, se me hace un poco injusto comparar el engine del ejemplo anterior contra un PV3d , porque canvas aún esta en pañales y tiene mucho por delante, si bien ya hay un gran avance creo que lo mejor esta por venir, me entusiasma pensar que pronto alguien sacara un framework 3d completo para  JQuery.

A mi parecer Canvas llega a suplir todo lo que le faltaba a Javascript para poder compararse con Actionscript3 en el terreno de graphics y al ser un lenguaje no tan ordenado como AS3 se vuelve más fácil para algunos de implementar, que es un punto clave en el futuro de canvas

Veamos Unos Ejemplos:

Dibujo de formas

// Actionscript 3
var sprite:Sprite = new Sprite();
    sprite.graphics.beginFill(0x333333,1) 
    sprite.graphics.lineTo(10, 10) // lineas
    sprite.graphics.drawRect(0, 0, 100, 100) // dibuja rectángulos
    sprite.graphics.endFill()
addChild(sprite)
//HTML 5 Canvas
<canvas id="canvas">
Tu navegador chafa no soporta Canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');  
var context = canvas.getContext('2d');  
     context.fillStyle = "#33";
     context.lineTo(10, 10) // dibuja lineas
     context.fillRect(0,0,100,100); // dibuja rectangulo
</script>

Trabajo con Bitmaps

Carga de imagenes

// Actionscript 3
var src:URLRequest = new URLRequest("image.jpg")
var loader:Loader = new Loader();
    loader.load(src);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage)
 
function onLoadImage(e:Event):void{
    var image:Bitmap = Bitmap(e.target.content);
    addChild(image)
}
//HTML5 Canvas
var image = new Image()
     image.src= "image.jpg";
     img.onload = function(){  
          context.drawImage(image, 0, 0);
         }

Manipulación de Pixeles

//Actionscript 3
var data:BitmapData = image.bitmapData;
for (var px:int=0; px<image.width; px++) {
	for (var py:int=0; py<image.height; py++){
 
               var pixel:uint = data.getPixel32(px , py)	// obtiene pixeles
               data.setPixel32(xx, yy, color);                //escribe pixeles
 
	}
}
//Canvas
 
var image = context.createImageData(50,50);
var data = image.data;
 
for (var i = 0; n = data.length, i < n; i +=4) {
 // obtiene pixeles
  data [i  ] = 255 - pix[i  ]; // rojo
  data [i+1] = 255 - pix[i+1]; // verde
  data [i+2] = 255 - pix[i+2]; // azul
}
 
context.putImageData(image, 0,0);   //escribe pixeles

Por supuesto la comparación podría ser más exhaustiva (texto, transformaciones, efectos, paths avanzados) pero les dejo estas para darse una idea del alcance que canvas tiene (aún sigo aprendiendo el 2d Context por lo que puede que algo del código canvas tenga errores).

Pero todo lo que he escrito es para coders ¿que hay de todos aquellos que no hacen javascript y que odian tanto a flash que quieren moverse urgentemente a Canvas? aqui está la solución:

Ya casi en la última parte de este video (3:20) podemos ver una animación en Canvas utilizando el smart Paste de Dreamweaver, se sorprenderán desde donde fué creada 😀 (FXG FTW!)

Espero haber dejado en claro el panorama de Canvas, es la parte que mas me entusiasma de HTML5, trataré de meterme más pero tampoco dejaré Flash, aun tiene cosas interesantes como pixel Bender(que jamas he usado) y el acceso a la camara con el que puedes hacer cosas interesantes con graphics, Flartoolkit por ejemplo.

Creo que en para este versus a comparacion de los anteriores declararé un empate :).

Para terminar este post quiero aclarar algo: Jamás ha sido culpa de Flash, si a la gente le das un lienzo en blanco pueden hacerte desde cosas increibles hasta asquerosidades,  ya estoy ansioso por ver los primeros banners parpadeantes ó  los primeros intros animados en Canvas, solo que ahora serán intros estandares.

Flash vs < audio >

Thursday, July 1st, 2010

Como se podrán imaginar este es mi tema preferido, no lo puse antes de video por que ya quedó claro que Flash arrasa con HTML5 en ese contexto, pero en este, aunque no es tan polémico, creo que hay mas equidad entre ambas tecnologias.

<audio> es una etiqueta muy simple que hace referencia a un archivo el cúal podemos cargar, reproducir, loopear y detener; cuenta ademas con la opción de añadir controles para el volúmen y mute.

<audio id="audio" src="song.ogg" controls="controls">
</audio>

Es muy práctico para cosas simples, pero si lo comparamos con las caracteristicas de audio que tiene Flash, si le añadimos el acceso al micrófono y agregamos que <audio> no tiene soporte para algunos formatos, obtendremos el mismo resultado que con <video>.

¿Entonces por que digo que hay mas equidad entre Flash vs <audio>?

Actualmente se esta desarrollando un API para audio con caracteristicas similares a las que nos llegaron con Flash player 10,  concretamente la generación de audio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Actionscript 3
var sound:Sound = new Sound();
sound.addEventListener(Event.SAMPLE_DATA, onSampleData);
sound.play();
 
var freq:Number = 440;
var phase:Number = 0;
 
function onSampleData(e:SampleDataEvent):void
{
 
for (var c:int=0; c<8000; c++)
{
phase += 100 / 44100;
var waveform:Number = 100 * Math.PI * 2;
sample = Math.sin(waveform);
e.data.writeFloat(sample);
e.data.writeFloat(sample);
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//HTML5
<audio id="a1" 
       src="song.ogg" 
       onloadedmetadata="loadedMetadata(event);"
       onaudiowritten="audioWritten(event);"
       controls="controls">
</audio>
<script>
var a1 = document.getElementById('a1'),
    a2 = new Audio(),
    buffer = [];
 
function loadedMetadata(event) {
  a1.volume = 0;
  a2.mozSetup(event.mozChannels, event.mozSampleRate, 1);
}
 
function audioWritten(event) {
  var frameBuffer = event.mozFrameBuffer;
  writeAudio(frameBuffer);
}
 
function writeAudio(audio) {
  buffer = (buffer.length === 0) ? audio : buffer.concat(audio);
 
  var written = a2.mozWriteAudio(buffer);  //<<--
 
}
</script>

Gracias a esto ya podemos ver la llegada de algunos sintetizadores y cajas de ritmos en HTMl5:

HTML5 and Javascript Synthesizer from Corban Brook on Vimeo.

Y por supuesto, al igual que AS3, HTML5 tambien es capaz de leer audio, lo que nos permitirá crear desde visualizaciones hasta efectos de audio a los archivos que carguemos (filtros, compresores, delays, ecualizadores, etc)

Creo que todos en alguna ocasión vimos alguna visualización de audio creada en Flash, con la llegada de Flash Player 10 pudimos empezar a jugar con sintetisis y ahora después de algunos años tenemos Digital Workstations directamente en el navegador como Myna, Soundation y por supuesto Audiotool que nos llego con un increible sintetizador creado en AS3:

Creo que en este punto HTMl5 dió un paso muy grande, que si bien no será muy explotado por la mayoría de las personas que hacen web, si nos traerá cosas muy interesantes.

Flash VS < video >

Wednesday, June 30th, 2010

Pensé en escribir los siguientes post aprovechando que los blogstars ya agotaron la parte sensacionalista del tema HTML5 vs Flash, ahora ya veo mas objetividad en los articulos, mostrando código y ejemplos, por supuesto casi todos hechos por desarrolladores

Para el tema de video pensaba poner cada una de las cosas por las que Flash supera a esta etiqueta pero afortunadamente Youtube hoy lo ha hecho y creo que no hay alguien con mas derecho y experiencia para hablar de video que ellos:

There’s been a lot of discussion lately about whether or not the HTML5 <video> tag is going to replace Flash Player for video distribution on the web. We’ve been excited about the HTML5 effort and <video> tag for quite a while now, and most YouTube videos can now be played via our HTML5 player. This work has shown us that, while the <video> tag is a big step forward for open standards, the Adobe Flash Platform will continue to play a critical role in video distribution.
It’s important to understand what a site like YouTube needs from the browser in order to provide a good experience for viewers as well as content creators. We need to do more than just point the browser at a video file like the image tag does – there’s a lot more to it than just retrieving and displaying a video. The <video> tag certainly addresses the basic requirements and is making good progress on meeting others, but the <video> tag does not currently meet all the needs of a site like YouTube:
Standard Video Format
First and foremost, we need all browsers to support a standard video format. Users upload 24 hours of video every minute to YouTube, so it’s important to minimize the number of video formats we support. Especially when you consider that for each format, we also provide a variety of sizes (360p, 480p, 720p, 1080p). We have been encoding YouTube videos with the H.264 codec since early 2007, which we use for both Flash Player and mobile devices like the iPhone and Android phones. This let us quickly and easily launch HTML5 playback for most videos on browsers that support H.264, such as Chrome and Safari.
Concerns about patents and licensing have prevented some browsers from supporting H.264; this in turn has prevented the HTML5 spec from requiring support for a standard format. We believe the web needs an open video format option. One that not only helps address the licensing concerns, but is also optimized for the unique attributes of serving video on the web. To that end, we’re excited about the new WebM project. Google is open sourcing and contributing the VP8 codec to the WebM effort. Google, Mozilla, and Opera have all committed to support WebM, and we have already started making YouTube videos available in the WebM format. Adobe has also committed to support VP8, the video codec for WebM, in an upcoming Flash Player release.
Robust video streaming
Closely related to the need for a standard format is the need for an effective and reliable means of delivering the video to the browser. Simply pointing the browser at a URL is not good enough, as that doesn’t allow users to easily get to the part of the video they want. As we’ve been expanding into serving full-length movies and live events, it also becomes important to have fine control over buffering and dynamic quality control. Flash Player addresses these needs by letting applications manage the downloading and playback of video via Actionscript in conjunction with either HTTP or the RTMP video streaming protocol. The HTML5 standard itself does not address video streaming protocols, but a number of vendors and organizations are working to improve the experience of delivering video over HTTP. We are beginning to contribute to these efforts and hope to see a single standard emerge.
Content Protection
YouTube doesn’t own the videos that you watch – they’re owned by their respective creators, who control how those videos are distributed through YouTube. For YouTube Rentals, video owners require us to use secure streaming technology, such as the Flash Platform’s RTMPE protocol, to ensure their videos are not redistributed. Without content protection, we would not be able to offer videos like this.
Encapsulation + Embedding
Flash Player’s ability to combine application code and resources into a secure, efficient package has been instrumental in allowing YouTube videos to be embedded in other web sites. Web site owners need to ensure that embedded content is not able to access private user information on the containing page, and we need to ensure that our video player logic travels with the video (for features like captions, annotations, and advertising). While HTML5 adds sandboxing and message-passing functionality, Flash is the only mechanism most web sites allow for embedded content from other sites.
Fullscreen Video
HD video begs to be watched in full screen, but that has not historically been possible with pure HTML. While most browsers have a fullscreen mode, they do not allow javascript to initiate it, nor do they allow a small part of the page (such as a video player) to fill the screen. Flash Player provides robust, secure controls for enabling hardware-accelerated fullscreen displays. While WebKit has recently taken some steps forward on fullscreen support, it’s not yet sufficient for video usage (particularly the ability to continue displaying content on top of the video).
Camera and Microphone access
Video is not just a one-way medium. Every day, thousands of users record videos directly to YouTube from within their browser using webcams, which would not be possible without Flash technology. Camera access is also needed for features like video chat and live broadcasting – extremely important on mobile phones which practically all have a built-in camera. Flash Player has provided rich camera and microphone access for several years now, while HTML5 is just getting started.
We’re very happy to see such active and enthusiastic discussion about evolving web standards – YouTube is dependent on browser enhancement in order for us to improve the video experience for our users. While HTML5’s video support enables us to bring most of the content and features of YouTube to computers and other devices that don’t support Flash Player, it does not yet meet all of our needs. Today, Adobe Flash provides the best platform for YouTube’s video distribution requirements, which is why our primary video player is built with it.

El post original aquí:

http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

Me agrada que Youtube haya hecho esto, porque de verdad, hay muchos aferrados en destruir a Flash sin entender las capacidades reales que tiene, muchos Flashers conocemos estas caracteristicas pero aah que dificil es hacer entender a los fanboys, creo que con esto Youtube lo logrará.