jueves, 3 de enero de 2013

¡Firefox Share: levántate y anda!

ACTUALIZACION: a partir de Firefox 20 no sirve más esta modificación de Share, por otros cambios más extensos que ahora invalidan este parche :(
Nota original:
Con las últimas versiones de Firefox, al menos desde Firefox 16, no funciona más la extensión "Firefox Share" :(.
Es una lástima, porque era un excelente agregado, que permite compartir en las redes sociales (o enviar por correo) la página que estamos visitando, de una forma muy simple y elegante.
Por un tiempo probé otras alternativas, pero la verdad que ninguna me convenció, no encontré nada tan rápido y eficiente como esta "vieja" extensión. Así que un día decidí investigar el problema por mi cuenta.
Encontré que la extensión fallaba en el arranque, cuando intentaba agregar algunas entradas en el menú contextual y en el menú principal, dentro de la sección "enviar página"... ¡que casualmente no existe más! Rápidamente mi solución salomónica fue eliminar todo ese segmento de código :D. Y ahora funciona de maravilla. Por mi parte jamás usé ese menú, porque prefiero acceder al icono de compartir que se crea en la barra asombrosa, así que para mi no fue ninguna pérdida.
Para hacer la corrección ustedes mismos, sigan estos pasos:
  1. Descargar el archivo .xpi de la última versión de la extensión publicada a la fecha, que es la versión 0.2.3(alpha) desde https://addons.mozilla.org/es/firefox/addon/firefox-share-alpha
  2. Internamente la extensión es un archivo .zip. La descomprimen y editan el archivo /resources/fx-share-addon/lib/overlay.js con cualquier editor de texto. 
  3. Eliminan o comentan todo el código JavaScript desde la linea 114 hasta la linea 176 inclusive.
  4. Después vuelven a comprimir todo de nuevo en un archivo zip, sin cambiar la estructura de directorios ni ninguna otra cosa, renombrando luego la extensión del archivo .zip a .xpi como estaba originalmente.
Para instalar el archivo .xpi en Firefox pueden hacer arrastrar y soltar desde el escritorio, y soltarlo en cualquier ventana de Firefox. O usar el menú Archivo -> Abrir archivo..., como prefieran.
Si no se animan a hacer los cambios ustedes mismos, y me tienen confianza (muejeje :D), les dejo enlazado aquí el archivo .xpi resultante. No tiene ningún otro cambio, pero no hay garantías de ningún tipo, ni me hago cargo de ningún daño que les pueda producir. Personalmente lo vengo usando hace varios meses, y recién ahora me tomé el tiempo de escribir y documentarlo en el blog para compartirlo. Que lo disfruten :)

lunes, 19 de septiembre de 2011

Google + Intel = Android x86

Recientemente hay varias noticias que hablan de la alianza entre Google e Intel para desarrollar Android en los procesadores x86. Ya había un proyecto de la comunidad de desarrolladores para portarlo, que estaba dando sus frutos, y ahora se suma esta iniciativa conjunta de estos dos pesos pesados.

Estaba leyendo una nota al respecto, y pensaba que acá el problema es que Intel tiene que resolver el mayor consumo de los procesadores Atom, si se los compara con los efectivos y rendidores diseños de ARM. Intel necesita dejar de perder mercado en los sectores móviles, donde la arquitectura ARM es hoy por hoy el rey absoluto, y esta alianza con Google, puede llevar a Android a nuevos sectores.

jueves, 4 de agosto de 2011

Invitación a Android Connect

Esta vez los quiero invitar a conocer el blog de Android Connect, una comunidad Android que se gestó en La Plata y está empezando a dar sus primeros pasos. Van a encontrar todo tipo de información, desde el usuario hasta el programador. Les copio el mensaje de bienvenida y espero encontrarlos por allá también :-)

Bienvenidos a esta nueva comunidad Android. La idea nace desde un grupo de usuarios y desarrolladores de Android en La Plata, Argentina, con la misma inquietud de compartir ideas, trucos y tips, consejos, soluciones a problemas encontrados, ejemplos de programas para hacer tus propios desarrollos, noticias de interés para la comunidad y mucho más.

Android Connect sos vos y todos los interesados en este fascinante mundo de Android. Te invitamos a participar de esta joven comunidad, un punto de encuentro donde podamos compartir nuestro conocimiento y hallazgos, brindar consejos y participar de proyectos juntos, un lugar donde podamos intercambiar ideas y experiencias.

¡Bienvenido!

Fuente: Android Connect

miércoles, 25 de mayo de 2011

Juegos en JavaScript: frameworks, recursos y ejemplos

Si bien los juegos en JavaScript no son nuevos, ahora con la introducción de HTML5 y todas las novedades que trae la nueva generación de navegadores,  se están convirtiendo en una alternativa cada vez más seria, muy tentadora por la posibilidad de llegar a todo tipo de plataformas: escritorio, portátiles, celulares, tabletas, consolas de videojuegos, etc.

Tal vez el caso más conocido por todos es el recientemente presentado Angry Birds Webapp, que en una alianza entre Rovio (la creadora del exitoso juego) y Google (como promoción de su navegador Chrome) han publicado de forma gratuita en versión web del ya clásico juego.

Aunque se promociona como un juego para Chrome, también es cierto que funciona con otros navegadores modernos que soporten Canvas de HTML5 y Flash. Por ejemplo, le he probado en Firefox 4 sobre Linux y funciona perfectamente.

¿Pero porqué requiere Flash? Bueno, precisamente una de las APIs que están más verdes en este momento es la API de audio, o al menos su funcionamiento está muy variable entre distintos navegadores. Por lo cual han recurrido a una solución pragmática y temporal hasta que madure este tema: usar un pequeño fragmento de Flash para controlar el audio, y hacer todo el resto con HTML5.

En la implementación han usado el framework open source ForPlay, que es un nuevo proyecto Java creado por Google y Rovio para este desarrollo, y que permite a partir del lenguaje Java, generar o compilar distintos tipos de salidas: Desktop Java, HTML5 Browsers, Android y Flash. Esta idea de generar código HTML o Flash a partir de código Java, ya la hemos visto antes en Google GWT (con el cual tiene bastante que ver) o en Adobe Flex.

Como amablemente han publicado este framework bajo una licencia open source, va a permitir que cualquier desarrollador pueda reutilizarlo y mejorarlo, y pronto empezaremos a ver muchos otros proyectos que lo usen o que estén basados en él.

Pero si queremos hacer juegos o aplicaciones que usen HTML5 Canvas, vamos a encontrar que hay muchos otros frameworks open source y/o bajo licencias libres, cada uno con sus propias características. Algunos ejemplos interesantes son:
  • gameQuery. es un framework JavaScript basado en jQuery. No parece tan maduro como las demás opciones, pero es muy natural y fácil de asimilar para quienes ya tienen experiencia con jQuery.
  • RPG JS: un framework para realizar los clásicos juegos RPG 2D, con características muy completas para este tipo de juegos. Tienen una demo muy bien lograda.
  • Akihabara: es un framework JavaScript para HTML5 muy maduro, para realizar todo tipo de juegos clásicos arcade de 8/16 bit. Tienen muchos ejemplos fantásticos de los arcades clásicos, que vale la pena probar :-)
También hay mucha documentación para quien quiera hacer sus primeros pinitos con Canvas. Algunos recursos para empezar pueden ser:
  • Tutorial de Canvas de Mozilla MDC: es un excelente recurso, que además se encuentra en castellano y en varios idiomas.
  • Canvas Tutorial de billmill.org: es un mini-curso en inglés muy rápido y didáctico, que a través de la construcción paso a paso del clásico juego del breakout, nos enseña todo lo básico para comenzar a realizar nuestros propios juegos. Lamentablemente no explica demasiado los ejemplos, pero el código es muy claro y está armado de tal forma que nos permite experimentar con él sin salir de la página.
  • HTML5CanvasTutorial: un tutorial en inglés más extenso, que nos enseña con más detalle las posibilidades de Canvas, con algunos muy buenos ejemplos.  No está tan orientado a juegos, pero es muy buen recurso.
Algunos frameworks incluso combinan varias APIs y técnicas, desde Canvas de HTML5 hasta DHTML, incluso WebGL también. En cuanto a técnicas para implementar juegos, hay muchos sitios para ello, y toda esa experiencia es trasladable a cualquier lenguaje, API o plataforma. Entonces para eso mejor referirse a sitios específicos sobre diseño de juegos.

Los dejo con un catálogo de juegos en JavaScript, donde hay una sección específica con varios ejemplos realizados con Canvas. Hay muchos juegos clásicos y algunos novedosos. Algunos permiten acceder al código fuente para aprender de ellos, otros no, pero igualmente la mayoría son entrenidos :D

Para los que les gustan los juegos solitarios con cartas de póker, encontrarán un fantástico ejemplo de una buena implementación en WorldOfSolitaire, no es libre, está basado en YUI, y está muy bien hecho. La única contra es que aún no tiene un buen soporte de dispositivos móviles (me fue imposible jugarlo en Android).

sábado, 21 de mayo de 2011

Galería de imágenes usando jQuery

Continuando con el artículo anterior, vamos a ver cómo hacer una sencilla galería de imágenes estáticas. Este ejemplo y el código del mismo, está basado en How to Create your own jQuery Slider Plugin, aunque le he modificado algunas cosas para mejorar su reutilización, manteniendo la misma idea y sin grandes cambios.

La técnica usada es una de las más comunes, y se puede adaptar a muchas otras cosas. Tenemos una lista de imágenes, inicialmente ocultas, que se irán mostrando de a una a la vez, usando algo de JavaScript. Agregándole un efecto en la transición del cambio de imagen, es de lo más trivial gracias a jQuery, logrando un resultado mucho más cuidado.

Vamos por partes.

Primer paso: el HTML

<div class="slideshow">
        <h3><a href="#">Título</a></h3>
        <ul>
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
        </ul>
        <div class="counter"></div>
</div>

El <div> con clase "slideshow" será el contenedor. Se usará para inicializar el plugin de jQuery y para brindarle estilos al componente. Dentro hay un título, una lista de elementos con UL-LI, y un contenedor para mostrar el número de página actual y el número total. Es interesante el uso de una lista UL, porque semánticamente expresa mejor su intención, que por ejemplo si hubiésemos usado DIV, SPAN, TABLE, u otro elemento. Las listas también las podemos encontrar adecuadas para representar pestañas/tabs, etiquetas, menúes, etc., al menos hasta usar HTML5, que nos trae nuevas etiquetas más específicas, como NAV.

Segundo paso: el CSS

<style>
.slideshow { background:#FFF; width:500px; border:1px #000 solid; margin:20px auto; padding:15px;}
.slideshow ul { width:500px; height:auto; min-height: 335px; overflow: hidden; position:relative; padding:0; margin:0;}
.slideshow li { position:absolute; top:0px; left:0px; display:none; list-style:none;}
.slideshow li img { width: 100% }
.slideshow li:first-child {display:block;}
.slideshow .counter {text-align:right; width:100%;}
</style>

Los 500px en las lineas 3 y 5 determinan el ancho de la galería. Los 335px en la linea 5 determinan la altura. En la linea 7, se hacen invisibles todos los LI con display:none, y se les quita toda la decoración por defecto (el círculo o botón que prefija a cada elemento de una lista). Después, en la linea 11 se hace visible solo al primer elemento de la lista.
El UL tiene position:relative, y los LI tienen position:absolute. Como el contenedor de los LI (el UL) tiene posicionamiento, las coordenadas de los LI toman como origen de las coordenadas a su padre, y se posicionan todos en (0px, 0px), lo que hace que todos los elementos queden en el mismo lugar. Podemos pensar que están como "apilados", unos encima de otros (pero no tienen distinto z-index, realmente están todos al mismo nivel de stack).

Tercer y último paso: el JavaScript

(function($){
        $.fn.slideshow = function(interval) {
                var slides;
                var cnt;
                var amount;
                var i;
                function run() {
                        // hiding previous image and showing next
                        $(slides[i]).fadeOut(1000);
                        i++;
                        if (i >= amount) i = 0;
                        $(slides[i]).fadeIn(1000);
                        // updating counter
                        cnt.text(i+1+' / '+amount);
                        // loop
                        setTimeout(run, interval);
                }
                slides = $(this).find('ul').children();
                cnt = $(this).find('.counter');
                amount = slides.length;
                i=0;
                // updating counter
                cnt.text(i+1 + ' / ' + amount);
                setTimeout(run, interval);
        };
})(jQuery);
$(function(){
        $('.slideshow').slideshow(5000);
});

Aquí voy a tener que deternerme un poco más. Entre las lineas 1 y 51 se crea un plugin de jQuery. Este fragmento deberíamos guardarlo en un archivo aparte como slider-jquery-plugin.js para vincularlo a la página.
Las líneas 54 a 56 es una forma típica de realizar inicializaciones con jQuery, es decir, de ejecutar algo una vez que la página está cargada y la DOM está liberada para recibir modificaciones. La expresión $('.slideshow') de jQuery busca a los elementos que tengan el class 'slideshow', y les aplica el plugin slideshow(), El parámetro que se pasa es el tiempo en milisegundos que queremos de demora entre una imagen y la siguiente, en este caso de 5 segundos.
Luego, entre las lineas 35 y 47 se hace la incialización del plugin. No voy a detenerme aquí, pero basta decir que recupera a los elementos hijos del UL (los LI) y los guarda en un arreglo llamado 'slides', y en la linea 47 registra un timer que llamará al método run() del plugin en X tiempo (que fue recibido por parámetro).
El método run(), definido entre las lineas 13 y 33, es donde sucede lo interesante. Primero hace un efecto fadeOut() ("desaparecer") sobre el item actual, avanza al siguiente item, y hace un efecto fadeIn() ("aparecer") sobre el siguiente elemento. Si se llega al último elemento, se vuelve a comenzar con el primero. Se actualiza el contador de página/imagen actual, y se vuelve a registrar un timer para volver a llamar a run() en otro X tiempo.
Lo interesante de esto, es que se aprovecha de una característica de los efectos especiales (FXs) de jQuery, que son implementados como animaciones. Estas animaciones, cuando inicializan, en realidad estamos pidiendo que comiencen, y durarán un tiempo predefinido (normalmente 200 milisegundos, que se puede cambiar pasando un parámetro al efecto). Entonces, al solicitar la desaparición del elemento actual, y la aparición del elemento siguiente, y al animarse ambos a la vez, para nuestros ojos se produce un efecto de fusión (o morph) de una imagen en otra, que es solo un efecto visual. Como ven, era más largo explicarlo que hacerlo :D
Al combinar todo, recuerden que deben incluir la libería JavaScript de jQuery. Una forma de hacerlo es cargarla desde el CDN (Content Delivery Network) de Google, donde está a disposición de los desarrolladores web muchas librerías JS de uso habitual. Por ejemplo, pueden hacerlo así:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Les dejo una versión completa para descargar y probar localmente. A continuación tienen el ejemplo terminado. No olviden hacer sus comentarios y sugerencias.