Contenido

Flash vs HTML5, pongámoslos a prueba

22 Mar

+ 75

Se habla mucho de que HTML5 va a matar a Flash, y que las nuevas tecnologías que se están integrando en los nuevos estándares ofrecen versiones compatibles muy superiores a lo que ahora podemos conseguir con flash.

Pero la gente de Man in Blue, no se contentó con solo leer lo que otros opinaban, así que se han puesto manos a la obra para realizar un benchmark entre los diferentes lenguajes disponibles.

flash-vs-html5
(Ver Imagen)

En el ejemplo ha usado una aplicación que genera partículas aleatorias y las mueve por la página caóticamente haciendo trabajar el procesador de nuestra máquina.

Podemos verla funcionando en:

Los resultados

graph_win_ie
(Ver Imagen)
graph_win_chrome
(Ver Imagen)
graph_osx_safari
(Ver Imagen)
graph_osx_ff
(Ver Imagen)

Como podemos ver en las gráficas, la superioridad de Flash está latente en todos los navegadores. Da igual el número de partículas que se usen, los resultados, actualmente, son muy superiores a los conseguidos con las otras alternativas.

«Han ganado esta batalla, pero aún no han ganado la guerra«, con esta frase expreso lo que siento al ver estos resultados. Flash está ahí, y poco a poco esto debería de ir cambiando. Tendremos que estar atentos 😀

Plupload, sube ficheros como quieras, pero súbelos

10 Feb

+ 4

Ajaxian publica un artículo sobre Plupload, una aplicación Javascript que nos permite seleccionar de entre una serie de opciones posibles las herramientas con las que queremos permitir subir ficheros a nuestros usuarios.

  • Google Gears
  • Silverlight
  • Flash
  • BrowserPlus
  • HTML5

Simplemente tendremos que especificar uno o varios de ellos y los parámetros necesarios para poder cargar las herramientas necesarias para cada tecnología.

var uploader = new plupload.Uploader({
	runtimes : 'gears,html5,flash,silverlight,browserplus',
	browse_button : 'pickfiles',
	max_file_size : '10mb',
	resize : {width : 320, height : 240, quality : 90},
	url : 'upload.php',
	flash_swf_url : '/plupload/js/plupload.flash.swf',
	silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"},
		{title : "Zip files", extensions : "zip"}
	]
});

Tenemos una API disponible y un ejemplo para verlo funcionando.

Gordon, el reproductor flash en Javascript

2 Feb

+ 7

Mucho se está hablando de la muerte de Flash con la llegada de HTML5, principalmente por que sitios como YouTube o Vimeo están implementando ya versiones del tag <video /> de HTML5 en ciertas secciones y para navegadores que lo soporten. Aunque Adobe parece no verlo igual.

Por otro lado, Tobias Scheneider ha desarrollado «Gordon«, una implementación en Javascript de un reproductor de Flash usando SVG para ello.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="../gordon.js"></script>
		<script type="text/javascript">
 			window.onload = function(){
 				// Opciones
 				var opt = { id: 'stage', // ID del contenedor
 					width: 500,
 					height: 400};

 				// Definimos la nueva película
 				new Gordon.Movie('blue.swf', opt);
 			}
		</script>
	</head>
 	<body>
 		<div id="stage"></div>
 	</body>
</html>

El resultado es realmente sorprendente, y podemos disfrutar de algunos ejemplos directamente aquí (aún está un poco verde y solo está disponible para Firefox y WebKit). Además, tenemos disponible el código en GitHub.

jpegcam, adelántate al W3C Capture API

20 Dic

+ 15

Via el Tumblr de Esteban Saiz descubro jpegcam, que aunque es antigua se trata de una herramienta que aprovecha varias tecnologías para conseguir integrar una webcam en nuestro sitio web.

Como vimos hace unos días, una nueva especificación nos permitirá conseguir esto mismo desde el mismo navegador sin tener que usar Flash para activar la cámara, pero por el momento esta herramienta permitirá que vayamos disfrutando de esta posibilidad.

Instalación

La herramienta está compuesta de una serie de ficheros que debemos incluir en el directorio en el que incluyamos la aplicación:

  • webcam.js: Fichero que aporta la API con la que acceder a la cámara
  • webcam.swf: Interfaz flash que permite conectar con la cámara
  • shutter.mp3: Audio que simulará el sonido de captura de fotos.

Una vez colocados en lugar que deben estar tenemos que cargar el fichero webcam.js en nuestra página. Para ello, incluiremos el siguiente código:

<script type="text/javascript" src="webcam.js"></script>

Aunque puede ir entre los tags <head /> lo pondría al final del <body /> para aligerar un poco la carga de la página.

En este punto ya tenemos cargada la API que nos permite trabajar con la cámara, ahora nos quedará la configuración previa:

<script type="text/javascript">
 webcam.set_api_url( 'test.php' ); // Fichero de subida
 webcam.set_swf_url( '/path/to/webcam.swf' ); // Fichero SWF
 webcam.set_quality( 90 ); // Cálidad JPEG (1 - 100)
 webcam.set_shutter_sound( true ); // Activar sonido 

 // Eventos (onLoad, onComplete, onError)
 webcam.set_hook( 'onComplete', 'my_callback_function' );

 function my_callback_function(response) {
    alert("Success! PHP returned: " + response);
 }
</script>

Una vez configurado, ya podemos ponernos a usarlo. Para ello disponemos de una serie de métodos que nos permitirán generar el HTML e interactuar con las acciones que la cámara tendrá que realizar.

<script type="text/javascript">
 // Código necesario para incrustar la cámara
 document.write( webcam.get_html(320, 240) );
</script>

Con esto ya tenemos la película Flash cargada y ubicada allá donde lo hayamos puesto en nuestra página. Ahora solo nos quedará añadir los métodos para que el usuario pueda tomar la captura o configurar la cámara.

<form>
 <!-- Activamos la configuración -->
 <input type=button value="Configure..." id="configure" />

 <!-- Tomamos la imagen -->
 <input type=button value="Take Snapshot" id="capture" />
</form>
<script type="text/javascript">
 document.getElementById("configure").appendChild('click', function(){
 webcam.configure();
 }, false);

 document.getElementById("capture").appendChild('click', function(){
 webcam.snap();
 }, false);
</script>

Ya está hecho, con todo esto ya tenemos preparada nuestra página para aceptar las imágenes capturadas desde la webcam de nuestros usuarios. Solo tenemos que implementar, en el lado del servidor, la recepción de imágenes, en PHP sería algo parecido a esto:

$jpeg_data = file_get_contents('php://input');
$filename = "my_file.jpg";
$result = file_put_contents( $filename, $jpeg_data );

El script está preparado para recibir una URL y recibirla en el callback que recibirán los eventos disponibles por webcam, haciendo posible la carga asíncrona, para ello simplemente debemos pasar la URL después de haber subido el fichero.

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI'])
 . '/' . $filename;
print "$url\n";

He montado un pequeño ejemplo para que me dejéis una foto de vuestra cara 😀

ZeroClipboard: Copia al portapapeles desde Javascript

29 Oct

+ 8

David Walsh publicó hace unos días una implementación del método con flash para poder interactuar con el portapapeles desde nuestro Javascript.

// HTML
<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
 The David Walsh Blog is the best blog around!  MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>

// Javascript

 ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
 // Creamos el cliente
 var clip = new ZeroClipboard.Client();

 // Eventos
 clip.addEventListener('mousedown',function() {
 clip.setText(document.getElementById('box-content').value);
 });
 clip.addEventListener('complete',function(client,text) {
 alert('copied: ' + text);
 });

 clip.glue('copy');

Este sistema se basa en el uso de un pequeño componente SWF al que le puedes enviar un texto y este se encarga de alojarlo en el portapapeles para posteriormente usarlo con cualquier aplicación.

David pone a nuestra disposición el script en un proyecto de Google Code para que podamos integrarlo fácilmente en nuestros proyectos.

Plugin Check, mantén tu Firefox actualizado

15 Oct

+ 4

Plugin Check es una aplicación de la fundación Mozilla que nos ayuda a mantener nuestros plugins actualizados.

plugin_check
(Ver Imagen)

Esta aplicación no se encarga de tener actualizadas las extensiones del navegador, sinó que nos revisa los plugins externos (como los de Adobe, Apple, ..) con el fin de que estemos actualizados y por lo tanto más seguros.

16 ejemplo de Javascript que intenta acabar con Flash

29 Jul

+ 12

Si pensamos en el uso de Flash para darle movimiento a elementos de nuestras páginas web, estos ejemplos están pensados para que puedas sustituirlo sin vacilar. Entre esto y el tag HTML5 <video />, le veo un futuro muy negro (a medio largo plazo).

Colorotate, aplicación para la generación de paletas de colores muy molona

14 May

+ 10

Michael Douma, me avisa por email de la última aplicación que ha desarrollado. Colorotate, se trata de un generador de paletas de colores muy chulo, una herramienta realmente necesaria para los ineptos del color, entre los que me encuentro.

colorotate
(Ver Imagen)

Una aplicación desarrollada en Flash, con muchas opciones para sacarle el máximo partido a los pocos conocimientos de colores que podamos tener. Y para los amantes más experimentados, seguro que saben como sacarle partido a esta genial herramienta.

Mapas vectoriales de los municipios de España

16 Mar

+ 4

Marc Palau, me envia un enlace para mostrarme el lo que ha estado trabajando estas semanas, y menudo trabajazo. Se trata de una vectorización de todos los municipios de España que podemos descargar en FLA, SWF y SQL para usas en nuestras aplicaciones. Podemos verlo funcionando y descargarlo diréctamente desde aquí. Gracias Marc!.

101 galerías de imagenes en javascript/flash/css

25 Nov

+ 2

WebKreation ha recopilado más de 100 galerías de imagenes con las que mostrar imagenes a nuestros usuarios. Usando teconologías como Javascript, Flash o CSS nos será realmente sencillo añadir una de estas galerías a nuestra aplicación.