aNieto2K » flash http://www.anieto2k.com Desarrollo web, Wordpress, y alguna cosilla más Sun, 12 Feb 2012 10:15:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Flash vs HTML5, pongámoslos a prueba http://www.anieto2k.com/2010/03/22/flash-vs-html5-pongamoslos-a-prueba/ http://www.anieto2k.com/2010/03/22/flash-vs-html5-pongamoslos-a-prueba/#comments Mon, 22 Mar 2010 12:14:58 +0000 aNieto2k http://www.anieto2k.com/?p=9728 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 :D

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/03/22/flash-vs-html5-pongamoslos-a-prueba/feed/ 75 Gordon, el reproductor flash en Javascript http://www.anieto2k.com/2010/02/02/gordon-el-reproductor-flash-en-javascript/ http://www.anieto2k.com/2010/02/02/gordon-el-reproductor-flash-en-javascript/#comments Tue, 02 Feb 2010 19:06:27 +0000 aNieto2k http://www.anieto2k.com/?p=9652 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/02/02/gordon-el-reproductor-flash-en-javascript/feed/ 7 jpegcam, adelántate al W3C Capture API http://www.anieto2k.com/2009/12/20/jpegcam-adelantate-al-w3c-capture-api/ http://www.anieto2k.com/2009/12/20/jpegcam-adelantate-al-w3c-capture-api/#comments Sun, 20 Dec 2009 12:19:16 +0000 aNieto2k http://www.anieto2k.com/?p=9426 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 :D

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/12/20/jpegcam-adelantate-al-w3c-capture-api/feed/ 15 ZeroClipboard: Copia al portapapeles desde Javascript http://www.anieto2k.com/2009/10/29/zeroclipboard-copia-al-portapapeles-desde-javascript/ http://www.anieto2k.com/2009/10/29/zeroclipboard-copia-al-portapapeles-desde-javascript/#comments Thu, 29 Oct 2009 09:41:29 +0000 aNieto2k http://www.anieto2k.com/?p=9155 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/10/29/zeroclipboard-copia-al-portapapeles-desde-javascript/feed/ 8 Plugin Check, mantén tu Firefox actualizado http://www.anieto2k.com/2009/10/15/plugin-check-manten-tu-firefox-actualizado/ http://www.anieto2k.com/2009/10/15/plugin-check-manten-tu-firefox-actualizado/#comments Thu, 15 Oct 2009 07:07:22 +0000 aNieto2k http://www.anieto2k.com/?p=9116 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/10/15/plugin-check-manten-tu-firefox-actualizado/feed/ 4 16 ejemplo de Javascript que intenta acabar con Flash http://www.anieto2k.com/2009/07/29/16-ejemplo-de-javascript-que-intenta-acabar-con-flash/ http://www.anieto2k.com/2009/07/29/16-ejemplo-de-javascript-que-intenta-acabar-con-flash/#comments Wed, 29 Jul 2009 16:34:38 +0000 aNieto2k http://www.anieto2k.com/?p=8695 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).

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/07/29/16-ejemplo-de-javascript-que-intenta-acabar-con-flash/feed/ 12 Mapas vectoriales de los municipios de España http://www.anieto2k.com/2009/03/16/mapas-vectoriales-de-los-municipios-de-espana/ http://www.anieto2k.com/2009/03/16/mapas-vectoriales-de-los-municipios-de-espana/#comments Mon, 16 Mar 2009 09:54:16 +0000 aNieto2k http://www.anieto2k.com/?p=7704 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!.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/03/16/mapas-vectoriales-de-los-municipios-de-espana/feed/ 4 101 galerías de imagenes en javascript/flash/css http://www.anieto2k.com/2008/11/25/101-galerias-de-imagenes-en-javascriptflashcss/ http://www.anieto2k.com/2008/11/25/101-galerias-de-imagenes-en-javascriptflashcss/#comments Tue, 25 Nov 2008 07:50:00 +0000 aNieto2k http://www.anieto2k.com/?p=6888 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/25/101-galerias-de-imagenes-en-javascriptflashcss/feed/ 2 FlickrVisión, el día que FlickR conoció a Flash http://www.anieto2k.com/2008/07/29/flickrvision-el-dia-que-flickr-conocio-a-flash/ http://www.anieto2k.com/2008/07/29/flickrvision-el-dia-que-flickr-conocio-a-flash/#comments Tue, 29 Jul 2008 08:40:23 +0000 aNieto2k http://www.anieto2k.com/?p=5853 FlickrVisión es una muestra del potencial de este lenguaje en aplicaciones gráficas basadas únicamente en imagenes. El dinamismo y la fluidez obtenido con Flash para hacer este tipo de cosas, sería demasiado pesado para el procesador del cliente si se desarrollara en Javascript.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/07/29/flickrvision-el-dia-que-flickr-conocio-a-flash/feed/ 1 Google comienza a indexar fichero Flash http://www.anieto2k.com/2008/07/01/google-comienza-a-indexar-fichero-flash/ http://www.anieto2k.com/2008/07/01/google-comienza-a-indexar-fichero-flash/#comments Tue, 01 Jul 2008 09:57:41 +0000 aNieto2k http://www.anieto2k.com/?p=5683 Google va a indexar los ficheros flash. Por el momento solo será benficioso de cara al SEO, pero esto abre una puerta a navegadores accesibles capaz de leer el contenido de los elementos flash. ¿podría esto llegar a un renacimiento del flash? [Via]

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/07/01/google-comienza-a-indexar-fichero-flash/feed/ 18