Hola el día de  hoy les traigo la segunda parte del tutorial de navigation drawer, antes de seguir si todavia no vieron la 1er parte hagan click aqui.  En esta parte lo que aprenderemos es como incorporar el botón para abrir y cerrar el menú de navegación y como asignarle una acción a la pulsación sobre un item del menu.

Abrir y Cerrar Menu desde un Icono

Les mostrare como implementar el clasico boton para abrir y cerrar el menu,

el boton se mostrara en el angulo superior izquierdo junto al titulo.

Para poder realizar esto utilizaremos una clase llamada ActionBarDrawerToggle, su  uso es muy simple como veremos a continuación,

Como ven dentro del onCreate declaramos el  mDrawerToggle al cual hay que especificar

El contexto, el drawerLayout,el icono que se mostrara en el boton (disponible en el pack de iconos que comente en la 1er paerte.), y 2 string de descripcion (yo no los he usado).

Tambien podemos especificar una acción al abrir y cerrar el menú en onDrawerClosed() y  onDrawerOpened(), dar un vistazo al Logcat durante el funcionamiento de la aplicación.

Mediante NavDrawerLayout.setDrawerListener(mDrawerToggle);  asignamos cual sera el DrawerListener que utilizara en este caso

sera nuestro mDrawerToggle .

Luego en getActionBar().setDisplayHomeAsUpEnabled(true); Establecemos que el ActionBar muestre el Boton Home.

Si corremos la app en esta parte podemos ver como al presionar el icono el menu se cierra y abre también podrán observar que este se desplaza segun este el menú abierto o no.

Asignar accion a la pulsacion de un Item del menu de navegación:

Esto es igual que en cualquier listiew que ya hallan visto antes, basicamente hay que asignar cual sera el ItemClickListener que usaremos para especificar cada opción, en este caso lo que haremos es segun la opción del menu que pulse mostrara un fragment especifico, si no saben lo que es un fragment hagan un parate aqui y vean estos links:

http://developer.android.com/training/basics/fragments/creating.html

https://developer.android.com/training/basics/fragments/index.html

Por lo que para cada pantalla habra que definir un fragment y un layout para esa opcion.

Al codigo de la primer parte del tutorial le he agregado en el menu una opcion “home” que antes no estaba.

He creado las pantallas solo para  ”Home” y para “Perfil”

Opcion Home:

Este fragment tiene asociado home.xml (no mostrare el codigo del layout ya que es basico puden verlo haciendo click en el nombre del layout.)

la pantalla tendra la siguiente apariencia.

Opcion Perfil:

Utilizara el framgent ProfileFragment.java y el layout profile.xml

Como ven es igual al anterior solo que con diferente layout, aquí sera donde tendrán que incluir todo el código para darle funcionamiento a los widgets que coloquen dentro.

La pantalla tendrá la sig. apariencia.

Una vez que ya tenemos listo los fragments el código que utilizaremos sera el siguiente:

Dentro de OnCreate() al Navlist le asignamos el OnItemClickListener y dentro coloque que llame al metodo

MostrarFragment(position) al cual le paso como parametro la posicion de la opcion seleccionada en el menu, en base a esto mostrara el fragment especifico.

Luego fuera de esto  indico que cuando la aplicacion cargue muestre la opcion “home”  por defecto, para eso le paso el numero 1 el cual equivale a la primer opcion del menú.

MostrarFragment(1)

Ver los comentarios en cada linea par entender como funciona.

Con esto básicamente ya podemos dotar a nuestra aplicación de la lógica necesaria para poder mostrar cada opción del menú, luego depende de cada uno lo que  quiera poner dentro. Recuerden que esto solamente funciona con versiones de android >= 4.0 para poder utilizarla en 2.3 hay que incluir la Support Library

pueden dar un vistazo a los sig. links

https://developer.android.com/tools/support-library/setup.html

http://stackoverflow.com/questions/16605005/adding-supported-libraries-in-android-application

En el sig. video pueden ver como es el funcionamiento de la aplicación.

Pueden descargarse el código desde nuestro repositorio haciendo click en la imagen debajo.

Cualquier consulta o sugerencia siéntanse libres de hacerlas utilizando el cuadro de comentarios.

Esto fue todo por hoy, espero que les halla gustado, hasta la próxima.!

Saludos

Sebastian

Fuentes:

http://developer.android.com/training/implementing-navigation/nav-drawer.html

¿Te gustó este artículo? ¡Compártelo!

Por muchos es sabido que el emulador de android que viene con el SDK deja mucho que desear. Afortunadamente existen alternativas como usar android-x86 y virtualbox para virtualizar un dispositivo android como vimos anteriormente. Pero hoy voy a contaros otra forma, disponible desde hace un tiempo, que también está basado en virtualización pero está mejor integrado con el entorno de desarrollo como puede ser Eclipse. En este caso vamos a usar la virtualización existente en los procesadores Intel, y una imagen de disco de android para x86, también provista por intel a través del SDK Manager de Android, de forma que convierte este proceso en algo fácil y rápido.

Requisitos:

• Procesador con Intel que soporte Intel VT-x, EM64T y Execute Disable(XD) Bit habilitado en la BIOS.
• Tener instalado el SDK de Android.

Instalación en Windows

Una vez instalado el SDK de Android, abrimos el SDK Manager que usamos para descargarnos las diferentes versiones de Android y marcamos para descargar el Intel HAXM dentro de la pestaña de “extras”. Aunque lo instalemos desde el SDK Manager en realidad sólo nos copia un instalador a la carpeta “extras” donde está instalado el SDK de Android, así que vamos a ésa carpeta de nuestro disco duro e instalamos IntelHaxm.exe. Otra cosa que debemos marcar para instalar es la Intel x86 Atom System Image de la versión de Android que deseemos, de esta manera podremos crear AVDs con esta imagen del sistema.Ejecutamos el instalador y seguimos los pasos. En caso de que nuestra BIOS no tenga configurada la opción de VT-x deberemos arrancar la BIOS, para activarla más o menos así, y luego volver a instalar el Intel HAXM:

Crear el AVD

Una vez instalado el SDK y el Intel HAXM, procederemos a crear un dispositivo android virtual, para ello abrimos el AVD Manager y creamos un AVD nuevo.

Deberemos elegir un target del que nos hayamos bajado su imagen Intel x86 como hemos hecho en el paso anterior con el SDK Manager, así podremos elegir, en CPU/ABI, la opción Intel Atom (x86).

Ponemos un nombre y elegimos un dispositivo cualquiera.

Importante seleccionar “Use Host GPU” para que utilice OpenGL para el renderizado, de esta manera la parte gráfica irá más rápida. Una vez hecho todo esto, hacemos click en OK, para generar el AVD y luego una vez creado, pulsamos en Start y arrancamos el emulador. Debería tardar sólo 15 segundos y debemos ver un mensaje de que está arrancando en “fast virtual mode”

Una vez hecho esto, podemos instalar y probar nuestra aplicación en el emulador e incluso controlar algunos aspectos como la ubicación GPS, simular recibir llamadas o mensajes, etc. desde la pestaña “Emulator control” de la perspectiva “DDMS” (En Eclipse: Window > Open perspective > DDMS).

Para más información, resolución de problemas y cómo instalarlo en Linux, podéis leer este artículo de la página de Intel que lo explica con más detalle.

Hoy os presentamos un artículo que se sale de lo habitual en este blog y es que hoy os traemos una barra de sonido que hará las delicias de los amantes del cine en casa. Se trata de la Energy Soundbar SB5 Bluetooth, un sistema de sonido completo para vuestro salón. 120W de sonido estéreo …

Continuar leyendo »

The post Energy Soundbar SB5 Bluetooth appeared first on DesAndrOId.

Me preguntan en multitud de ocasiones por otros recursos, además de mi Curso de Programación Android, que estén disponibles en internet para seguir profundizando en este mundillo del desarrollo para Android. Hoy ha sido otro de esos días, me han preguntado por algún otro libro electrónico que recomiende personalmente sobre esta temática, a poder ser de un nivel avanzado.

Y voy a aprovechar la ocasión para inaugurar una nueva “sección” en el blog, por llamarlo de alguna manera, en la que pretendo dar a conocer recursos interesantes sobre programación Android. Y con “recursos” me quiero referir a todo aquello de lo que se pueda aprender, ya sean libros, blogs, tutoriales, artículos, código open source, o simplemente personas de referencia a seguir en las redes sociales.

Y para empezar, hoy quiero contestar públicamente a la cuestión del libro que ya he comentado.

Existen muy buenos libros sobre este tema que cubren desde aspectos básicos hasta temas avanzados de la plataforma, entre los más conocidos el “Professional Android 4 Application Development” del gran Reto Meier.  Pero cuando pienso en un libro “distinto” sobre programación Android, al margen de los publicados por las editoriales clásicas (Wrox, OReilly, Apress, …), que pueda recomendar siempre me viene a la cabeza el mismo.

¿Cuántas veces habéis hecho una pregunta sobre Android en Stack Overflow o habéis llegado allí a través de una consulta en Google y os habéis encontrado con una respuesta fantástica de un usuario llamado CommonsWare? Al menos en mi caso he de decir que muchas.

Pues detrás de ese nombre de usuario está Mark Murphy, programador y consultor en Android, y lo más importante, a lo que quería llegar, autor del libro “The Busy Coder’s Guide to Android Development“. Dentro de los márgenes de maniobra posibles que puede dejar el género de la literatura técnica, puedo decir que no se trata de un libro al uso. Y es algo que percibes desde que empiezas a leerlo.

Se trata de un libro que actualmente cuenta con más de 2500 páginas. Y digo actualmente, porque está en continua actualización, algo que ocurre aproximadamente una vez al mes. Trata desde los aspectos más básicos hasta temas muy avanzados, y lo hace en mi humilde opinión de forma excelente. Como muestra, podéis consultar y descargar la tabla de contenidos y un fragmento gratuito desde su web.

Ojo, el libro completo no es gratuito, los recursos de calidad hay que pagarlos, pero os aseguro que merece la pena hacerlo. Además, en este caso, el modelo de distribución es bastante peculiar. Pagas por el libro una vez, su precio es de 45 dólares (unos 33 euros), pero tienes acceso a todas las actualizaciones que publique durante un año, y como digo lo hace aproximadamente una vez al mes. Una vez pagado tienes acceso a una página personal desde la que puedes descargar los contenidos actualizados cada vez que quieras, en formato PDF, EPUB, KINDLE/MOBI, o incluso en forma de aplicación para Android (APK) lo que permite consultarlo fácilmente desde un móvil o tablet.

En definitiva, un recurso que recomiendo a todas aquellas personas interesadas en ampliar sus conocimientos sobre desarrollo para Android. Por cierto, también recomiendo su blog, que aunque no es muy activo, sí que aparecen en ocasiones artículos muy interesantes sobre detalles y entresijos de la plataforma Android.

Como bien dice el título de este post, acabamos de estrenar año y desde DesAndrOId.com queremos que este 2014 este lleno de sorpresas para todos vosotros. Y que mejor manera de empezar que sorteando este fabuloso teléfono, el Opis 60s, un teléfono retro que hará las delicias de los mas especiales. Si quieres que este …

Continuar leyendo »

The post Año Nuevo, Sorteo Nuevo, te regalamos un Opis 60s appeared first on DesAndrOId.

No os mentiré si os digo que cada vez que uso o pruebo Google Now y Google Voice Search (a veces erróneamente interpretados como la misma cosa) no puedo evitar pensar en la de posibilidades que tendríamos de existir una API con la que integrar nuestras aplicaciones. Y no os mentiré tampoco si os digo que a día de hoy no existe tal cosa… de manera oficial. Existe una forma de aprovechar Google Voice Search al menos para interceptar los comandos de voz que le demos, y hoy os voy a contar cómo. Aquí tenéis un ejemplo de lo que yo mismo conseguí en una mañana para controlar remotamente mi estufa gracias a mi Raspberry Pi.

Google Voice Search API y Xposed Framework

La magia que cuento arriba tiene condiciones, no todo podía ser de color rosa. Es necesario tener el acceso root en el dispositivo, e instalar el famoso Xposed Framework. Éste es un framework que funciona mediante módulos, con los que se permite modificar el comportamiento de ciertas partes del sistema sin necesidad de instalar ninguna ROM especial, sólo teniendo acceso root. Hay multitud de módulos para realizar diversas modificaciones, entre ellos uno gracias a Mohammad Abu-Garbeyyeh que nos da acceso a una API para trabajar con Google Search. No es tan potente como podría de ser una API oficial, pero más que suficiente para hacer alguna cosa curiosa como la que veis en el vídeo anterior. No os voy a explicar cómo montar todo esto en vuestro teléfono. Es realmente fácil, y si no sabéis hay muchos tutoriales por la red. Sólo hay que tener root, instalar Xposed Framework, e instalar la Google Voice Search API.

El funcionamiento es francamente simple: cada vez que el usuario haga una búsqueda en Google, se lanzará un Broadcast Intent con el texto de búsqueda. Nuestra aplicación puede recibir dicho Intent y hacer lo que le apetezca con la cadena de búsqueda: buscar patrones o palabras claves, lanzar una aplicación, ejecutar un servicio, etc.

Show me the code

Veamos algún ejemplo de cómo usar esta API. Os muestro la parte del código que utilizo yo en el ejemplo de la estufa remota que puse más arriba. Lo primero que os recomiendo es copiar este archivo de código a vuestra aplicación. Contiene las constantes para manejar los Intents de recepción de consultas y contestar mediante voz.

package com.mohammadag.googlesearchapi;

import android.content.Context;
import android.content.Intent;

public class GoogleSearchApi {
	public static final String INTENT_NEW_SEARCH = "com.mohammadag.googlesearchapi.NEW_SEARCH";
	public static final String INTENT_REQUEST_SPEAK = "com.mohammadag.googlesearchapi.SPEAK";

	public static final String KEY_VOICE_TYPE = "is_voice_search";
	public static final String KEY_QUERY_TEXT = "query_text";
	public static final String KEY_TEXT_TO_SPEAK = "text_to_speak";

	/* This method allows you to do TTS without implementing your own activity.
	 * Note that this may not work if Google Search is not in the foreground.
	 */
	public static void speak(Context context, String text) {
		Intent intent = new Intent(INTENT_REQUEST_SPEAK);
		intent.putExtra(KEY_TEXT_TO_SPEAK, text);
		context.sendBroadcast(intent);
	}
}

A continuación creamos un BroadcastReceiver que recibirá el Intent de búsqueda, y opcionalmente otros. Limitarse a admitir sólo este método para recibir comandos es limitarse mucho. Si implementáis comandos por voz en vuestra aplicación, quizá queráis permitir la introducción de comandos a usuarios que no tengan root ni Xposed Framework instalado, por ejemplo mediante un widget dedicado que active el reconocimiento, o un botón en la misma aplicación. Dependerá de vuestro caso, en el mío decidí asignar dos acciones adicionales al Receiver para encender y apagar la estufa por otros medios que no vienen ahora al caso.

public class HeaterBroadcastReceiver extends BroadcastReceiver {

    public static final String ACTION_HEATER_ON = "com.sloydev.remoteheater.ACTION_HEATER_ON";
    public static final String ACTION_HEATER_OFF = "com.sloydev.remoteheater.ACTION_HEATER_OFF";

    @Override
    public void onReceive(Context context, Intent intent) {
        String action = intent.getAction();
        if (action == null) {
            return;
        }
        Log.d("Heater", "Broadcast Received: " + action);

        if (action.equals(GoogleSearchApi.INTENT_NEW_SEARCH)) {
            String queryText = intent.getStringExtra(GoogleSearchApi.KEY_QUERY_TEXT);
            if (queryText == null) {
                return;
            }
            queryText = queryText.toLowerCase();

            if (queryText.contains("make it burn")) {
                action = HeaterBroadcastReceiver.ACTION_HEATER_ON;
                GoogleSearchApi.speak(context, "Burning");
            } else if (queryText.contains("stop it")) {
                action = HeaterBroadcastReceiver.ACTION_HEATER_OFF;
                GoogleSearchApi.speak(context, "Yes sir");
            } else if (queryText.contains("heater") && queryText.contains("turn")) {
                if (queryText.contains("on")) {
                    action = HeaterBroadcastReceiver.ACTION_HEATER_ON;
                    GoogleSearchApi.speak(context, "Turning it on");
                } else if (queryText.contains("off")) {
                    action = HeaterBroadcastReceiver.ACTION_HEATER_OFF;
                    GoogleSearchApi.speak(context, "Turning it off");
                } else {
                    return;
                }
            } else if (queryText.contains("estufa")) { //Español
                if (queryText.contains("enciende") || queryText.contains("encender")) {
                    action = HeaterBroadcastReceiver.ACTION_HEATER_ON;
                    GoogleSearchApi.speak(context, "Encendiendo");
                } else if (queryText.contains("apaga")) {
                    action = HeaterBroadcastReceiver.ACTION_HEATER_OFF;
                    GoogleSearchApi.speak(context, "Apagando");
                }
            } else {
                return;
            }
        }

        // Lanzo otro intent para abrir un IntentService que, en mi caso, hará lo necesario 
        // para encender o apagar la estufa según el contenido de action
        Intent serviceIntent = new Intent(context, HeaterController.class);
        serviceIntent.setAction(action);
        context.startService(serviceIntent);
    }
}

Como veis el código es bastante intuitivo. Cuando recibe un Intent, primero comprueba si la acción que lo lanzó corresponde a la de Google Search. En caso afirmativo, busca determinadas palabras clave en el texto. En resumen, cuando el comando contenga la frase “make it burn” encenderá la estufa, y cuando contenga “stop it” la apagará. Además, si contiene las palabras “heater” y “turn“, la encenderá o apagará dependiendo de si contiene “on” o “off“. Y por último, por si dije el comando en español, si contiene la palabra “estufa” buscará “enciende/encender” o “apaga/apagar” para realizar la acción correspondiente. En todos los casos el móvil contesta con una frase en voz alta para confirmar la acción.

Al final, lanzo un Intent con la acción seleccionada para ejecutar un IntentService, que en el caso de mi estufa conectará con la Raspberry Pi, pero esta parte cambiará en vuestra aplicación. Hay que tener en cuenta que este Receiver se llamará cada vez que hagamos una búsqueda cualquiera en la aplicación de Google Search, por lo que si el texto recibido no se corresponde con ningún comando nuestro debemos salir del método sin hacer nada. Además, en mi caso como dije este Receiver puede recibir otras dos acciones aparte de la de búsqueda, por lo que si la acción recibida no era ésta se la paso directamente al IntentService, ya que éste sabe lo que debe hacer con ellas. Por último, en el AndroidManifest debemos añadir un permiso para usar esta API, y de paso declaramos el Receiver para recibir los comandos de voz.

   ...
    <uses-permission android:name="com.mohammadag.googlesearchapi.permission.ACCESS_GGOGLE_SEARCH_API" />

    <application
        ...
        >
        <receiver android:name="com.sloydev.remoteheater.HeaterBroadcastReceiver">
            <intent-filter>
                <action android:name="com.sloydev.remoteheater.ACTION_HEATER_ON"/>
                <action android:name="com.sloydev.remoteheater.ACTION_HEATER_OFF"/>
                <action android:name="com.mohammadag.googlesearchapi.NEW_SEARCH" />
            </intent-filter>
        </receiver>
        ...

Y listo, ya tenemos nuestra aplicación recibiendo comandos de voz personalizados. Podéis ver más ejemplos e información en el post oficial del módulo en XDA. ¡A disfrutarlo! Contandos, ¿qué os gustaría hacer con esta API?

El uso del móvil puede provocarnos estrés y tristeza. Así al menos se desprende de un estudio realizado por la Universidad de Kent State de Ohio, en Estados Unidos, en el que se afirma que estar siempre conectado y chatear por medio de mensajería instantánea mediante dispositivos móviles provoca un aumento de estrés y de ansiedad por el miedo a sentirnos excluidos y disminuye, también, el sentimiento de felicidad.

El estudio, en el que se analiza el uso que 500 universitarios hacen diariamente de sus móviles, resulta, como mínimo, llamativo. En plena revolución de las tecnologías móviles, son pocas las personas que hoy en día saben vivir sin recurrir a su smartphone o tablet para llevar a cabo acciones tan cotidianas como comunicarse, hacer fotografías o navegar por Internet. Sin embargo, esta investigación deja patente que es necesario usar con responsabilidad estos dispositivos para no depender en exceso de ellos.

No obstante, una fórmula de utilizar el móvil para no sentirnos tristes es convertirlo en una herramienta lúdica. Es lo que se consigue, por ejemplo, a través del portal de casino online más español, cuyos usuarios encuentran los mejores casinos en línea del mercado, cuando y donde quieran, desde la pantalla de su teléfono. Con un solo click, y ya sea por diversión o por dinero, podemos descargarnos las versiones virtuales de los juegos de azar y casino más populares, tanto para iPad y iPhone, como para Blackberry, Nokia o dispositivos de Samsung, Android y Windows 8.

¿Te imaginas sumar 21 desde tu móvil y ganar una partida de blackjack? ¿O elegir entre variedad de máquinas tragaperras? ¿O quizás prefieres apostar por tu número de la suerte en la ruleta americana? Todas son formas de pasarlo bien y todas pueden hacerse ya desde el teléfono gracias este portal. ¿Aún crees que el uso del móvil provoque tristeza? Eso sí, para disfrutarlo de verdad es necesario responsabilidad y autocontrol, ya que aunque la diversión está asegurada, la suerte no siempre está de nuestro lado.

Si el otro día os presentábamos el primero de nuestras propuestas para estas navidades, hoy os presentamos la segunda, hoy os presentamos el Energy eReader E6, un eBook de la marca Española Energy Sistem y que pese a no estar relacionado con el mundo Android, nos ha parecido una tan buena opción que queríamos presentárosla. …

Continuar leyendo »

The post Energy eReader E6, un eBook de altos vuelos appeared first on DesAndrOId.

Cada vez más, el diseño en Android se toma más y más en serio. Es una alegría ver cómo ha evolucionado el ecosistema en los últimos años. El buen gusto y el diseño cuidado ya no son una cosa exclusiva de la competencia, tanto usuarios como desarrolladores Android se van dando cuenta de que cuando las cosas se hacen bien, se nota. Y no sólo hablo de diseño gráfico, también de interacción. En general, experiencia de usuario.

Y con este incremento de dedicación, también se incrementan las ganas de enseñar el fruto de nuestro trabajo que tanto nos ha costado conseguir. A veces las capturas de pantalla se quedan cortas, una imagen estática no es capaz de expresarlo todo. Es por eso que últimamente vemos más tendencia por usar GIFs animados para mostrar la cara más dinámica de la aplicación. ¿Por qué? Porque son más fáciles de visualizar y compartir que un vídeo. Si los gatitos los usan para dominar el mundo, será por algo. Pero la pregunta que muchos nos hacemos es, ¿cómo los creamos? Hoy vamos a ver cómo. Y al final del tutorial os dejo un script para hacer todo el proceso con un único comando.

La idea de esta entrada viene a raíz de una publicación en Google+ de Javi Pacheco, en la que lanzaba la pregunta de cómo generar este tipo de imágenes y discutíamos algunas posibilidades. Aquí voy a explicar de forma más detallada el procedimiento al que acabé llegando para hacerlo. La idea base es sencilla: 1) Hacer un vídeo; 2) Extraer frames del mismo; y 3) Componer una imagen GIF a partir de ellos.

Grabar un vídeo

Hay varias formas de grabar un vídeo de la pantalla de nuestro móvil. El más directo y el que voy a contar es el añadido en Android 4.4 KitKat con el comando screenrecord. Si no disfrutáis aún de la última versión de Android, hay multitud de aplicaciones que permiten hacerlo según el dispositivo que tengas, pero aquí no entraremos en eso.

Con KitKat podemos grabar un vídeo de nuestra pantalla en un archivo mp4 mediante el comando adb shell screenrecord, y luego sacarlo al ordenador con adb pull. Para parar la grabación cancelamos el comando con Ctrl+C. Por ejemplo:

adb shell screenrecord /sdcard/video.mp4

adb pull /sdcard/video.mp4

O si sois más de interfaz gráfica que de consola, las versiones recientes de Android Studio incluyen un asistente muy sencillo de usar. Hacedlo como más os guste.

Extraer imágenes del vídeo

Para construir una animación, necesitamos sacar imágenes a partir del vídeo para componer el GIF. Tras indagar un poco, el método más sencillo que he podido observar es usar ffmpeg. Es un software, de código abierto, con el que se pueden hacer multitud de procesados de vídeos, y compatible con Windows, OSX, y Linux. Podéis ver cómo descargarlo e instalarlo para las diferentes plataformas aquí.

Una de las funciones que tiene es justo la que queremos, y se usa mediante el siguiente comando:

ffmpeg -i <archivo_entrada.mp4> -r <frames_por_segundo> -s <tamaño_imágenes> -f image2 img%3d.png

Por ejemplo:

ffmpeg -i videoapp.mp4 -r 7 -s 270x480 -f image2 frames/img%3d.png

Esto leerá el archivo de vídeo videoapp.mp4, sacará 7 imágenes por segundo a tamaño 270×480, y las guarda en un directorio llamado frames de la carpeta actual como img001.png, img002.png, etc… Cuanto menos imágenes por segundo y tamaño pongamos, menos pesará la animación final, pero peor calidad tendrá, busca tu equilibrio. Además, cuidado con dónde ejecutamos el comando y la ruta de salida que ponemos, porque por corto que sea el vídeo generará un mogollón de imágenes. Hacedlo en una carpeta recogidita, no en medio el escritorio.

Construir el GIF animado

El último paso es hacer el propio GIF a partir de los frames extraídos. En mi caso personal, tras probar varios métodos, he decidido hacerlo con ImageMagick por tres motivos:

1) Es tremendamente fácil de usar.

2) El resultado es bastante bueno.

3) Con añadir un argumento al comando aplica distintas optimizaciones para reducir el tamaño final del gif automáticamente.

En su página web tenéis más información y las instrucciones de cómo instalarlo para diferentes sistemas operativos. Si tenéis problemas con el proceso podéis preguntar en los comentarios.

El comando para construir la animación se llama convert y se usa de la siguiente manera:

convert -layers Optimize -delay 1x7 frames/img*.png animacion.gif

Donde Optimize le indica que aplique optimización de transparencia y de Frame, delay establece el tiempo entre frames (como antes muestreamos a 7 frames por segundo, ahora le decimos que tarde 1 segundo cada 7 frames, para que vaya a la misma velocidad que el vídeo), el formato de la ruta de los archivos de entrada, y el nombre del archivo final.

¡Listo! Si lo hemos hecho bien ya tenemos nuestra animación GIF similar a la de arriba para enseñar. Podéis subirla a un servicio como Imgur.com, publicarla en Google+, o pasarla por Hangouts. Sed cuidadosos con el tamaño del archivo, especialmente si tenéis animaciones pesadas, no gasteis a lo loco la tarifa de datos de la pobre gente.

Automatizar el proceso

Como veis el proceso es bastante sencillo, teniendo las herramientas instaladas son sólo 2 comandos (si contar la captura de vídeo). Pero somos desarrolladores, ¡nacimos para facilitar las tareas manuales! No sería nada complicado meter ejecutar estos comandos mediante un script, y de manera los parámetros sean más fácilmente configurables.

Como dije al principio de la entrada, la idea de este artículo surgió a raíz de un post en Google+. Y el resultado original no fue esta entrada, sino un script para hacer lo que acabo de explicar. Lo escribí en Python, y lo publiqué en Gists para uso y disfrute de todo el mundo. No entraré en detalles, es bastante autoexplicativo y entendible por cualquiera que sepa escribir código (¡así es Python! ). Lo tenéis aquí:

https://gist.github.com/Sloy/7813189

Ejecutad en la línea de comandos python video2gif.py y hará todo el proceso de conversión. Lo que sí incluye el script que no está explicado en este artículo es el proceso opcional (USE_DEVICE_FRAME = False) de insertar las capturas en una imagen de fondo, para que la animación se genere con el marco del móvil, porque dependerá del móvil que queráis usar, del tamaño de las capturas, etc. Como podéis ver se hace con el comando composite de ImageMagick y no es difícil de utilizar.

Espero que el tutorial y/o el script os sirvan para generar animaciones que muestren la parte más dinámica de vuestras aplicaciones. ¡Compartid con nosotros vuestros resultados en los comentarios! O si tenéis dudas o sugerencias sobre el proceso o el mismo script.

¡Bon appétit!

Muchos somos los que ya hace algunos años decidimos cuidar nuestra salud, labor que no resulta nada fácil con el ajetreo del día a día, y es por este motivo por el que hoy os queremos presentar el primer producto de nuestra guía de regalos navideños, un producto que os ayudará a controlar vuestra actividad …

Continuar leyendo »

The post Jawbone UP, el regalo navideño que te cuida. appeared first on DesAndrOId.