ITIOX | Desarrollo de aplicaciones móviles

Guardar imágenes en la galería de Android

2013-09-16T00:52:00.003-07:00

Si quieres que las fotos o vídeos de tu aplicación aparezcan en la galería de Android, copia y pega el siguiente código:

 
/**
 * Save image to gallery
 */
 public static void SaveToGallery(String path, Context context)
 {
    ContentValues v = new ContentValues();
    v.put(Images.Media.TITLE, "MIFOTO");
    v.put(Images.Media.DISPLAY_NAME, "MIFOTO.jpg");
    v.put(Images.Media.DESCRIPTION, "Una foto de mi app");
    v.put(Images.Media.MIME_TYPE, "image/*");
    v.put(Images.Media.ORIENTATION, 0);

    File f = new File(path);
    File parent = f.getParentFile();
    String fpath = parent.toString().toLowerCase(Locale.getDefault());
    String name = parent.getName().toLowerCase(Locale.getDefault());
    v.put(Images.ImageColumns.BUCKET_ID, fpath.hashCode());
    v.put(Images.ImageColumns.BUCKET_DISPLAY_NAME, name);
    v.put(Images.Media.SIZE, f.length());
    f = null;

    v.put("_data", path);
    ContentResolver c = context.getContentResolver();
    c.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, v);
}

Después, sólo hay que pedirle al sistema que refresque el contenido multimedia:

// update gallery
sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED, 
   Uri.parse("file://"+ Environment.getExternalStorageDirectory())));

XCode: 4 formas de ordenar un NSArray

2013-07-17T09:04:00.000-07:00

Tenemos un NSArray o un NSMutableArray que queremos ordenar. Lo primero es conocer NSComparisonResult, es un "enum" que indica si el resultado de una comparación entre dos elementos es ascendente (a < b), descendente (a > b) o ambos son iguales (a == b). Hay varias clases de uso común que la implementan (p.ej. NSString).

Supongamos que queremos ordenar un "array" de personas por su nombre:

@interface Persona

@property NSString *nombre;

@end

// Y luego tenemos declarado

@property NSArray *personas

Hay varias formas de hacerlo:

-(NSComparisonResult)compare:

- (NSComparisonResult)compare:(Persona *)other {
  
  return [self.nombre compare:other.nombre];
}

// Y luego en otro sitio
NSArray *sortedArray;
sortedArray = [originalArray sortedArrayUsingSelector:@selector(compare:)];

NSSortDescriptor

// Y luego en otro sitio
NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc] initWithKey:@"nombre" ascending:YES];

NSArray *sortDescriptors = [NSArray arrayWithObject:sortDescriptor];

NSArray *sortedArray = [personas sortedArrayUsingDescriptors:sortDescriptors];

Blocks

NSArray *sortedArray;
sortedArray = [personas sortedArrayUsingComparator:^NSComparisonResult(id a, id b) {
    NSString *nombreA = [(Persona*)a nombre];
    NSString *nombreB = [(Persona*)b nombre];
    return [nombreA compare:nombreB];
}];

sortUsingFunction:context:

Este metodo sólo es válido para NSMutableArray's, pero tiene la ventaja de que en el context le podemos enviar el parámetro que queramos (útil por ejemplo para ordenar objetos geolocalizados).

NSComparisonResult compare(Persona *a, Persona *b, void *context) {
  return [a.nombre compare:b.nombre];
}

// Y luego en otra parte

NSMutableArray *sortedArray = [NSMutableArray arrayWithArray:personas];

[sortedArray sortUsingFunction:compare context:nil];

XCode: SQLite en 5 minutos

2013-07-04T09:30:00.000-07:00

Esta es la continuación de éste otro post de introducción a SQLite. En esta ocasión vamos a utilizar la base de datos creada en una App para iPhone.

Aún no tengo ningún post de como crear una App en iOS desde cero, pero si os interesa dejad un comentario. Así que vamos a suponer que sabéis como crear un simple proyecto. Además vamos a utilizar ARC, que para quien no lo sepa, en pocas palabras significa que nos podemos olvidar de los "alloc" y los "dealloc" de Objective-C. Si no tocáis ningún ajuste y utilizáis una versión medianamente moderna de XCode, los proyectos utilizan ARC por defecto.

Crear el proyecto

Creamos un nuevo proyecto en XCode que podemos llamar Highscores. Vamos a crear un proyecto con una sola vista y una tabla para mostrar los datos.

Añadimos en "Frameworks" la librería "libsqlite3.dylib".

Modelo

Creamos algunas entradas más en el archivo de base de datos del post anterior ("ABC.sqlite") y lo añadimos al proyecto (clic derecho y "Add Files to X" dejando marcada la casilla de "Copy items into destination group..."):

Creamos la clase "Puntuacion" donde guardaremos los datos. Con ARC y las últimas versiones de XCode y de iOS, no hace falta que toquemos el ".m"para añadir las sentencias "@synthesize" ya que se generan de forma automática. Añadimos a Puntuacion.h:

#import <Foundation/Foundation.h>

@interface Puntuacion : NSObject

@property NSNumber *mode;
@property NSString *name;

@property NSNumber *value; @end

Creamos la clase "BaseDeDatos". Esta clase será un Singleton que nos permitirá comunicarnos con la base de datos desde cualquier punto de la App. El archivo "BaseDeDatos.h" debería de quedar tal que así:

#import <Foundation/Foundation.h>
#import <sqlite3.h>

@interface BaseDeDatos : NSObject

+(id)sharedInstance;

-(NSArray*)puntuacionesOrdenadasAscendentemente;
-(NSArray*)puntuacionesOrdenadasPorNombre;
-(NSArray*)puntuacionesOrdenadasPorModo;

@end

Y "BaseDeDatos.m" tal que así:

#import "BaseDeDatos.h"

#import "Puntuacion.h"

@interface BaseDeDatos()

@property sqlite3 *database;

-(NSArray*)performQuery:(NSString*)query;

@end

@implementation BaseDeDatos

static BaseDeDatos *_sharedInstance;

+(id)sharedInstance {
  if (_sharedInstance == nil) {
    _sharedInstance = [[BaseDeDatos alloc] init];
  }
  return _sharedInstance;
}

- (id)init {
  if ((self = [super init])) {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"ABC"
                                                         ofType:@"sqlite"];
    
    if (sqlite3_open([path UTF8String], &_database) != SQLITE_OK) {
      NSLog(@"¡Error al abrir la base de datos!");
    }
  }
  
  return self;
}

-(NSArray*)performQuery:(NSString*)query {
  NSMutableArray *values = [NSMutableArray array];
  
  sqlite3_stmt *statement;
  if (sqlite3_prepare_v2(_database, [query UTF8String], -1, &statement, nil)
      == SQLITE_OK) {
    while (sqlite3_step(statement) == SQLITE_ROW) {
      
      char *name = (char *) sqlite3_column_text(statement, 0);
      int value = (int) sqlite3_column_int(statement, 1);
      int mode = (int) sqlite3_column_int(statement, 2);
      
      Puntuacion *puntuacion = [[Puntuacion alloc] init];
      puntuacion.name = [NSString stringWithUTF8String:name];
      puntuacion.value = @(value);
      puntuacion.mode = @(mode);
      
      [values addObject:puntuacion];
    }
    
    sqlite3_finalize(statement);
  }
  
  return values;
}

-(NSArray*)puntuacionesOrdenadasAscendentemente {
  return [self performQuery:@"select * from puntuaciones order by puntuacion asc"];
}

-(NSArray*)puntuacionesOrdenadasPorNombre  {
  return [self performQuery:@"select * from puntuaciones order by nombre asc"];
}

-(NSArray*)puntuacionesOrdenadasPorModo {
  return [self performQuery:@"select * from puntuaciones order by modo asc"];
}

@end

Vista

Vamos al Storyboard y añadimos un UITableView y tres botones a nuestra vista. La App va a ser muy sencilla, va a mostrar los datos en la tabla y los botones van a servir para ordenarlos según un campo tal y como definimos en la base de datos.

Añadimos el siguiente código a ViewController.h:

#import 

@interface ViewController : UIViewController<UITableViewDataSource>
@property IBOutlet UITableView *tableView;

- (IBAction)orderByName:(id)sender;
- (IBAction)orderByMode:(id)sender;
- (IBAction)orderByScore:(id)sender;

@end

Volvemos a nuestro Storyboard y conectamos los botones con las acciones y la referencia del "tableView" y el datasource:

Controlador

Y por último en el "ViewController.m":

#import "ViewController.h"

#import "BaseDeDatos.h"
#import "Puntuacion.h"

@interface ViewController ()

@property NSArray *puntuaciones;

@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
  self.puntuaciones = [[BaseDeDatos sharedInstance] puntuacionesOrdenadasAscendentemente];
  [self.tableView reloadData];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  if (self.puntuaciones != nil) {
    return self.puntuaciones.count;
  }
  
  return 0;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  Puntuacion *puntuacion = self.puntuaciones[indexPath.row];
  UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"puntuacion"];
  
  cell.textLabel.text = puntuacion.name;
  cell.detailTextLabel.text = [NSString stringWithFormat:@"%@:%@", puntuacion.mode, puntuacion.value];
  
  return cell;
}

- (IBAction)orderByName:(id)sender {
  self.puntuaciones = [[BaseDeDatos sharedInstance] puntuacionesOrdenadasPorNombre];
  [self.tableView reloadData];
}

- (IBAction)orderByMode:(id)sender {
  self.puntuaciones = [[BaseDeDatos sharedInstance] puntuacionesOrdenadasPorModo];
  [self.tableView reloadData];
}

- (IBAction)orderByScore:(id)sender {
  self.puntuaciones = [[BaseDeDatos sharedInstance] puntuacionesOrdenadasAscendentemente];
  [self.tableView reloadData];
}

@end

Resultado

Y el resultado totalmente funcional (cambia el orden al pulsar en cada botón según el criterio):

Esto evidentemente no es una App, es un punto de partida con algunos de los conceptos básicos de SQLite en iOS. Y ahora, ¡a programar!

Android + Guava + ProGuard

2013-07-02T11:05:00.000-07:00

Si habéis llegado a este post no ha sido por casualidad: ¿Cómo utilizar ProGuard en una App de Android que use Guava? Es un infierno mal documentado que vamos a solucionar en 4+1 pasos:

Descargad la librería javax.inject-*.jar ("*" es la versión, bajaros la última claro está).
Descargad la librería jsr305-*.jar.
Copiad las librerías en la carpeta libs de vuestro proyecto.
Añadid lo siguiente a vuestro archivo "proguard.cfg"

-libraryjars libs/guava-14.0.1.jar
-libraryjars libs/jsr305-2.0.1.jar
-libraryjars libs/javax.inject-1.jar
-dontwarn sun.misc.Unsafe
-dontwarn com.google.common.collect.MinMaxPriorityQueue

Dad gracias a MVNRepository por los JARs.

SQLite en 5 minutos

2013-07-02T10:03:00.004-07:00

En este post hablamos de datos y Apps.

Siempre he pensado que lo más importante en el desarrollo de Apps es el contenido. De nada vale usar las últimas novedades del sistema operativo ni efectos visuales espectaculares si tu App no tiene contenido. Y de igual forma, hay auténticos "truños" (p.ej. las primeras versiones de cierta red social...) cuyas descargas se cuentan por millones, ¿por qué? por que tiene fotos, contactos, mensajes... de millones de usuarios, es decir contenido.

En Software, los contenidos son datos y los datos hay que almacenarlos y gestionarlos. Cuando necesitas almacenar una alta cantidad de datos y acceder a ellos de forma rápida y eficiente tecnologías como SharedPreferences (Android) y NSUserDefaults (iOS) ya no son suficientes. Necesitamos más artillería, y esta lleva el nombre de SQLite.

Es una tecnología sencilla (los archivos de bases de datos consisten en archivos planos autocontenidos), conocida (un par de nociones de SQL y ya se puede hacer mucho), multiplataforma (la misma base de datos os servirá para Android e iOS) y con las ventajas de trabajar con una base de datos (operaciones simples como buscar, insertar, modificar filas y/o columnas se realizan de forma muy sencilla) y además ofrece una alta capacidad de almacenamiento (cadenas de texto, fechas, números... difícilmente serán un problema).

Como he comentado, una base de datos SQLite consiste en un único archivo autocontenido, es decir toda la información de la base de datos se guarda en ese mismo archivo y no hacen falta archivos adicionales.

Si trabajáis en Windows tenéis varias posibilidades (en orden): formatear e instalar alguna distro de Linux, instalar cygwin, bajaros el precompilado de SQLite, o utilizar alguna herramienta gráfica de terceros.

En cualquier caso vamos a considerar que tenéis correctamente instalada y configurada la versión 3 de SQLite y un Terminal (OSX), un Shell (Linux) o cualquier tipo de consola de línea de comandos. Es decir podemos ejecutar y obtenemos:

$ sqlite3
SQLite version 3.7.17

Antes que otra cosa, posibles causas de error y pequeñas recomendaciones:

No olvidar el ; (punto y coma) al final de las sentencias.
El apóstrofe (') que sale es el que normalmente en un teclado español aparece en la tecla "?" (a la derecha del "0").
El prompt ($) puede variar dependiendo de vuestro Shell y sesión. Cuando estáis dentro de la sesión de SQLite el prompt cambia a "sqlite>" (ah, y el prompt es lo que aparece en la línea donde introducís las órdenes).
Los datos que devuelve el Shell, están en cursiva para que los distingáis fácilmente.

Vamos a crear una simple base de datos para guardar las puntuaciones de un juego llamado ABC:

Crear base de datos (la extensión no es necesaria pero ayuda a reconocer el tipo de archivo):

$ sqlite3 ABC.sqlite3
SQLite version 3.7.17
Enter ".help" for instructions
Enter SQL statements terminated with a ";"

Creamos la tabla de puntuaciones (cada entrada tendrá un campo para guardar el nombre y otro campo para guardar la puntuación)

sqlite> create table puntuaciones(nombre varchar(10), puntuacion smallint);

Insertamos algunas puntuaciones:

sqlite> insert into puntuaciones values('Pepe',10);
sqlite> insert into puntuaciones values('Juan', 20);

Leemos las puntuaciones:

sqlite> select * from puntuaciones;
Pepe|10
Juan|20

Añadimos un nuevo jugador y leemos las puntuaciones de forma ordenada ("asc" de menor a mayor y "desc" de mayor a menor):

sqlite> insert into puntuaciones values('Eva', 15);
sqlite> select * from puntuaciones order by puntuacion asc;
Pepe|10
Eva|15
Juan|20

Obtenemos la puntuación de un jugador:

sqlite> select puntuacion from puntuaciones where nombre='Eva';
15

Imaginemos que el juego tiene varios modos de dificultad (0,1,2...), creamos una columna para el modo y actualizamos las entradas al modo en el que consiguieron la puntuación:

sqlite> alter table puntuaciones add column modo smallint;
sqlite> update puntuaciones set modo=0 where nombre='Pepe';
sqlite> update puntuaciones set modo=2 where nombre='Eva';
sqlite> update puntuaciones set modo=0 where nombre='Juan';
sqlite> select * from puntuaciones;
Pepe|10|0
Juan|20|0
Eva|15|2

Y finalmente para salir de la sesión:

sqlite> .exit

Ya tenéis creada vuestra base de datos con las puntuaciones del juego en el archivo "ABC.sqlite3" (o como lo hayáis nombrado). Evidentemente son ejemplos sencillos fácilmente adaptables a vuestras necesidades.

Más cosas

Tabla con los típicos campos id "autoincrement" y timestamp con la fecha por defecto de inserción:

CREATE TABLE nombre_de_tabla (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  t TIMESTAMP
  DEFAULT CURRENT_TIMESTAMP
);

Ver las tablas que hay en una base de datos:

sqlite> .tables

Obtener información de una tabla (varios métodos):

sqlite> .schema nombre_de_tabla
sqlite> pragma table_info(nombre_de_tabla);

Borrar una tabla:

sqlite> drop table hombre_de_tabla;

Supongamos que tenemos la tabla "clientes" (con campos "id" y "nombre") y la tabla "compras" (con campos "cliente_id" y "precio"). Y queremos obtener todos los nombres de clientes que hayan realizado una compra de más de 50$:

sqlite> select X.* from clientes X inner join compras Y on X.id = Y.cliente_id where Y.precio>=50;

SQLite admite múltiples tipos de datos en su sintaxis, pero todos los convierte a alguno de estos tipos básicos según unas reglas definidas.

NULL
INTEGER
REAL
TEXT
BLOB

Principios de Diseño Universal

2013-07-01T11:44:00.003-07:00

En este post voy a tratar un tema con el que me ha tocado trabajar últimamente. Es el tema de la accesibilidad para los usuarios con algún tipo de discapacidad o handicap en el uso de aplicaciones.

Me parece un tema muy importante, pero que a priori no genera mucho interés entre nuestra comunidad de desarrolladores (me temo que este post no será de los que tengan más visitas :( ). De hecho y sin ir más lejos, el propio autor de este post al principio tenía poco o casi ningún interés. Sin embargo hay cosas técnicamente muy interesantes que se han desarrollado al respecto y a poco que te introduces en este tema, si que te vas interesando.

En otros posts hablaré sobre la accesibilidad en iOS y Android, pero en este os voy a hablar de un documento, poco conocido en español, pero que hemos tenido que utilizar en uno de nuestros últimos proyectos para obtener una certificación de la App que se desarrollaba.

Principios de Diseño Universal

Uso equitativo

Proveer los mismos medios a todos los usuarios: de forma idéntica cuando sea posible; de forma equivalente cuando no.
Evitar segregar o estigmatizar a cualquier usuario.
Lo dispuesto para la privacidad, la seguridad debe garantizar el acceso a todos los usuarios.
Hacer el diseño atractivo para todos los usuarios.

Flexibilidad en el Uso

Proporcionar elección en los métodos de uso.
Acomodar el acceso y el uso diestro y zurdo.
Facilitar la exactitud y la precisión del usuario.
Proporcionar capacidad de adaptación al ritmo del usuario.

Uso Simple e Intuitivo

Eliminar la complejidad innecesaria.
Ser consistente con la intuición y las expectativas del usuario.
Adaptar a una amplia gama de conocimientos y habilidades lingüísticas.
Organizar la información de acuerdo con su importancia.
Ofrecer indicaciones e información relevante durante y después de la finalización de las tareas.

Información Perceptible

Usar diferentes modos (gráficos, verbales, táctiles) para la presentación redundante de información esencial.
Ofrecer un adecuado contraste entre la información esencial y sus alrededores.
Maximizar la "legibilidad" de información esencial.
Diferenciar los elementos de formas que puedan ser descritas (p.ej. facilitar dar instrucciones o direcciones).
Proporcionar compatibilidad con una variedad de técnicas o dispositivos usados por personas con discapacidades sensoriales.

Tolerancia al Error

Organizar los elementos para minimizar los riesgos y errores: los elementos más usados, más accesibles; los elementos peligrosos eliminados, aislados o asegurados.
Proporcionar advertencias de riesgos y errores.
Proporcionar características de seguridad ante fallos.
Desalentar las acciones inconscientes en tareas que requieran vigilancia.

Esfuerzo Físico Bajo

Permitir que el usuario mantenga una posición corporal neutra.
Uso razonable de las fuerzas operativas.
Minimizar las acciones repetitivas.
Minimizar el esfuerzo físico sostenido.

Tamaño y Espacio para el Acceso y el Uso

Proporcionar una línea de visión clara hacia los elementos importantes, para cualquier usuario que se encuentre sentado o de pie.
Facilitar el acceso a todos los componentes para cualquier usuario que se encuentre sentado o de pie.
Adaptarse a las variaciones en la mano y el tamaño de la empuñadura.
Proporcionar un espacio adecuado para el uso de dispositivos de ayuda o asistencia personal.

Documento original: “The Center forUniversal Design (1997). The Principles of Universal Design, Version 2.0. Raleigh,NC: North Carolina State University.” “Copyright © 1997 NC State University, The Center for Universal Design.”

Gadget de entradas con navegador para Blogger

2013-06-30T02:27:00.001-07:00

Este gadget es muy práctico. Te permite navegar por todo el blog viendo las entradas con un resumen y una foto sin cambiar de página. El resultado es algo así:

Si lo quieres en tu blog, añade un nuevo gadget HTML/Javascript desde Diseño.

Copia el siguiente código:

<div class="widget-content">
<style type="text/css">
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGINo_YC8IZCBtH5wFfIMbQvHnuvsW8Q_TXvHBB9qebYTLl0uz5iZZ7wCQCuiIpFug4YeOl-IDUiU1tEUyIbh5mcvXV67oMZ_TVeAN_cIz3QO6cRoW76mjs7tN4n583p9-maQexkXboxQ/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script type="text/javascript">
//<![CDATA[
var numfeed = 4;
var startfeed = 0;
var urlblog = "http://MIBLOG.blogspot.com/";
var charac = 60;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6aLR5ybD96BEPqPjMcOWNKXrPAUs6hIoUA93NdJG0uV8ClpIv_yvWcVCCNJwq1K5jlpN59wjt-SdW2HaUWe7dBS99cYag0GZ_fus5EWXa4X00uRmxbRvFCfgUV3OlSr-y6pjojHoUcM/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6>
<a href='" + posturl + "'>" + posttitle + "</a></h6>
";
showblogfeed += "<p>
" + maskolisfeed(postcontent,charac) + "...</p>
";
showblogfeed += "</div>
";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'>
</div>
";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<br />
<div id="terbaru">
</div>
<div id="mas-navigasifeed">
</div>
</div>

Cambia MIBLOG por el nombre de tu blog.
Puedes cambiar el número de entradas que quieres que aparezca y la longitud del resumen. Vamos, te puedes entretener en personalizar el gadget.

Sólo una advertencia, y es que consume mucho tiempo de carga :( , por eso no lo ves es este blog.

XCode: UIPageControl

2013-06-25T09:18:00.002-07:00

¿Conocéis el típico interfaz de iOS con varios puntitos y que os permite hacer scroll sobre varias vistas? He aquí un tutorial rápido de como conseguirlo:

1. Añadís un UIViewController en vuestro Storyboard y cambiáis el nombre de la clase por PageViewController:

Añadís un UIScrollView, desactiváis las barras de scroll y habilitáis el paging:

Añadís un UIPageControl (y ajustáis el color de los puntos...). Hay que tener cuidado de no añadirlo dentro del UIScrollView, tienen que estar ambos al mismo nivel dentro del UIView:

Creáis un nuevo UIViewController al que llamáis PageViewController:

Añadís el siguiente código a PageViewController.h:

#import 

@interface PageViewController : UIViewController 

@property (strong, nonatomic) IBOutlet UIScrollView* scrollView;
@property (strong, nonatomic) IBOutlet UIPageControl* pageControl;

-(IBAction)pageControlValueChanged:(id)sender;

@end

Añadís el siguiente código a PageViewController.m:

#import "PageViewController.h"

@interface PageViewController ()

@end

@implementation PageViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  
  int count = 0;
  float width = self.scrollView.frame.size.width;
  float height = self.scrollView.frame.size.height;
  
  NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:@"PageViews" owner:self options:nil];
  for (UIView *view in nibViews) {
    [view setFrame:CGRectMake(width*count++, 0, width, height)];
    [self.scrollView addSubview:view];
  }
  
  self.scrollView.contentSize = CGSizeMake(width*count, height);
  self.pageControl.currentPage = 0;
  self.pageControl.numberOfPages = count;
}

- (void)didReceiveMemoryWarning
{
  [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(IBAction)pageControlValueChanged:(id)sender {
  
    // First, determine which page is currently visible
  CGFloat pageWidth = self.scrollView.frame.size.width;
  
  self.scrollView.contentOffset = CGPointMake(self.pageControl.currentPage*pageWidth, 0);
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  
    // First, determine which page is currently visible
  CGFloat pageWidth = self.scrollView.frame.size.width;
  NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));
  
    // Update the page control
  self.pageControl.currentPage = page;
}

@end

Conectáis los IBOutlets, delegate del UIScrollView y el IBAction del UIPageControl en Interface Builder:

Y ahora vamos a añadir las vistas, pero de un modo bastante práctico. Vamos a crear un NIB con todas ellas y se van a cargar automáticamente. Creamos un NIB que llamaremos PageViews:

Y le añadimos todas las vistas que queramos de modo secuencial:

Aconsejo renombrar las vistas (tontería, siempre lo aconsejo, mientras más descriptivo el software mejor) porque en el orden en que aparezcan en la columna de la izquierda (en Objects) es como luego aparecerán.

Y el resultado:

Podéis moveros entre las diferentes vistas con sólo deslizar el dedo y los puntitos se actualizarán solos. Además los puntitos también responden y podéis ir de una a otra pantalla al tocarlos.

XCode: UIWebView

2013-06-25T08:41:00.002-07:00

Si quieres cargar contenidos web de forma fácil en iOS la respuesta es UIWebView. Pero no sólo eso, también vale para cargar texto formateado de forma fácil y rápida. Y además con la ventaja de que no os tenéis que preocupar por si el texto no cabe ya que permite hacer scroll.

Lo puedes añadir desde Interface Builder o crear una instancia en código:

UIWebView *webView = [[UIWebView alloc] init];

Desde Interface Builder puedes seleccionar que detecte varios tipos de datos (Links, números de teléfono, direcciones...) de forma que si aparece uno al seleccionarlo se producirá la acción correspondiente (p.ej. si es un número de teléfono se realizará una llamada a ese número). También da la opción de escalar la página al View, lo cual suele ser interesante para código HTML que no se adapte automáticamente.

Para cargar una página web externa:

  NSURL *url = [NSURL URLWithString:"www.direcciondemiweb.com"];
  NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
  [webView loadRequest:requestObj];

Para cargar código HTML directamente desde un NSString:

NSString* htmlString = @"<h2>Título</h2><p>Algo de texto</p>";
[webView loadHTMLString:htmlString baseURL:nil];

Para cargar una página desde un archivo local:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"mi_pagina" ofType:@"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:baseURL];

Y si queréis cargar alguna imagen local lo podéis hacer así:

<img src="mi_imagen.png">

Además tiene un delegate (UIWebViewDelegate) que podéis implementar y os informa del estado de la operación de cargar una web (p.ej. si ha habido error, si se ha cargado correctamente...).

Y juntando una cosa con la otra surge un hack muy útil (definiendo hack como dar un uso alternativo a una funcionalidad para conseguir una solución práctica a un problema):

Supongamos que nos conectamos a un servidor y este nos devuelve datos de texto pero formateados en html y/o unicode (p.ej. con etiquetas o códigos de caracteres: <b>, \u00d1...). Y los queremos mostrar en un UILabel, pero si lo hacemos tal cual, aparecerán esas etiquetas y códigos. Sin embargo sólo nos interesa el texto y si lo puede parsear otro (Homer: "¡que lo haga otro!", en este caso que lo haga el UIWebView) mejor que mejor.

Podemos crear un UIWebView (invisible, no hace falta añadirlo a la vista), cargarle el HTML e implementar el delegate. Y cuando termine de cargar:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *textoPlano = [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
}

Android y JavaCV: Cargar imágenes

2013-06-23T10:22:00.000-07:00

Tanto JavaCV como OpenCV son muy fáciles de utilizar en un ordenador. Pero a la hora de trabajar en Android en seguida surge un pequeño problema: ¿Cómo cargo las imágenes?. La clase BufferedImage no existe en Android, y la mitad de los métodos no funcionan por una u otra razón.

Nota: Recordad que en OpenCV (y por lo tanto JavaCV), el formato por defecto es BGR para las imágenes en color (CV_LOAD_IMAGE_COLOR).

Soluciones para cargar imagenes

Desde recursos (p.ej: res/drawable/imagen.png)

Aquí el problema consiste en que los recursos se accede a través de un identificador tipo int, así que el truco consiste en cargar un bitmap y copiar directamente los píxeles desde el bitmap a una IplImage:

// Se carga el recurso en un bitmap
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.imagen);

// Se crea la imagen
IplImage image = IplImage.create(bitmapMask.getWidth(), bitmapMask.getHeight(), IPL_DEPTH_8U, 4); // ARGB

// Se copian los píxeles del bitmap a la imagen
bitmap.copyPixelsToBuffer(image);

Desde Assets (p.ej: assets/imagen.jpg)

El problema consiste en que los archivos guardados en assets están comprimidos, por lo que acceder a través del path (file:///android_asset/imagen.jpg) no funciona. El truco consiste en copiarlo a la caché y cargar la imagen desde ahí:

// type: CV_LOAD_IMAGE_COLOR
public static IplImage loadImageFromAsset(Context context, String filename, int type) {

  IplImage image = null;

  File file = new File(context.getCacheDir() + "/" + filename);
  if (!file.exists())
   try {

    InputStream is = context.getAssets().open(filename);
    int size = is.available();
    byte[] buffer = new byte[size];
    is.read(buffer);
    is.close();

    FileOutputStream fos = new FileOutputStream(file);

    fos.write(buffer);
    fos.close();
   } catch (Exception e) {
    throw new RuntimeException(e);
   }

  if (file.exists()) {
   image = cvLoadImage(file.getAbsolutePath(), type);
  }

  return image;
 }

Y por último desde la SD o path (y aunque resulte obvio desde el ejemplo anterior):

IplImage image = cvLoadImage(path, CV_LOAD_IMAGE_COLOR);

Android y JavaCV: Grabar videos con la cámara

2013-06-21T16:21:00.000-07:00

Si hay una diferencia entre Android e iOS realmente objetiva es el tema de las cámaras de videos. En iOS existen multitud de cámaras con diversos efectos especiales y únicos, mientras que en Android nos resignamos a los pocos que vienen de fábrica dependiendo de la versión de Android que tengas. Y el efecto sepia no mola.

Y con la amplia gama de dispositivos Android, de los cuales más de uno cuentan con mejores procesadores y cámaras que la gama iPhone, ¿cómo se pueden hacer aplicaciones de cámaras con efectos especiales al igual que existen en iPhone?:

Pues oficialmente no se puede, el firmware en Android funciona de otra forma que impide este tipo de aplicaciones. Si cuentas con acceso root, podrías intentar hacer algo con el Framebuffer... pero eso sería pasar al lado oscuro... (y no tengo nada en contra excepto que si te saltas las "reglas" es cuando comienzan los errores inesperados porque cada Android es diferente).

Hay dos formas de grabar vídeos en Android "oficialmente":

Lanzando un Intent: lo cual es como pedirle al usuario que si quiere grabar un video abra la aplicación de la cámara y que por favor lo grabe.
Con las clases Camera y MediaRecorder: Te permiten grabar un video, controlando algunos parámetros como la resolución, el zoom... y puedes aplicar unos pocos efectos predefinidos (según versión, pero casualmente siempre podrás aplicar el efecto sepia :( ).

Oficialmente no puedes "meter código" entre la cámara y el codificador de video, por lo que no se puede alterar las imágenes antes de que se graben en el archivo de video y por lo tanto la tarea de hacer efectos de video se complica.

¿Pero hay solución no?: ¡Claro! (bueno, hay soluciones...):

Lo primero que hay que hacer es obtener los frames de la cámara. O bien las obtenéis directamente a través de la clase Camera (en este post hablo de ello) o bien usáis una librería de terceros (OpenCV es una opción).
En segundo lugar procesáis los frames, aplicáis efectos especiales, máscaras, filtros, ... (OpenCV e ImageMagick son dos buenas opciones según lo que busquéis).
Y luego grabar el video (y aquí ffmpeg es "la solución").

Pues existe la librería JavaCV que integra OpenCV, ffmpeg y un montón de cosas más y además ¡os permite programar en Java!.

¿Cómo se integra?

De este enlace, os descargáis javacv-*-bin.zip (* es la versión) y javacv-cppjars.zip y los descomprimimos.
Creáis un proyecto (también vale uno que ya esté creado) y en la carpeta libs copiáis javacv.jar y javacpp.jar (ambos de javacv-*-bin.zip).
Los archivos jar, no son más que contenedores a los que les podéis cambiar la extensión por .zip y descomprimir para ver lo que hay dentro. Pues eso tenéis que hacer con los archivos javacv-android-arm.jar, ffmpeg-*-android-arm.jar y opencv-*-android-arm.jar. Dentro encontraréis varias subcarpetas anidadas y al fondo del todo unos cuantos archivos .so (librerías nativas).
Debéis crear una subcarpeta dentro de la carpeta libs en vuestro proyecto que se llame armeabi y copiáis dentro todos los .so del punto anterior (luego habrá tiempo para quitar los que no utilicéis).
En Eclipse seleccionáis el proyecto, clic derecho --> Properties --> Java Build Path --> Libraries --> Add JARs y añadís las librerías del punto 2.
Dentro de la carpeta javacv-bin (del punto 1) hay una subcarpeta samples. De ella copiáis el archivo RecordActivity.java en el source de vuestro proyecto. Lo más fácil en Eclipse es copiar el archivo y pegarlo directamente en la carpeta en Eclipse, le cambiáis el nombre del paquete por el correspondiente y punto.
En la cabecera del archivo anterior explica como usarlo, básicamente copiáis la parte del Manifest que indica en el vuestro (más que nada los permisos y la declaración de la clase) y luego creáis un layout para la actividad en los recursos con el código que indica a continuación.
Conectáis vuestro Android (con cámara) y ejecutáis la aplicación.

Si no cambiáis nada el resultado se almacena en un archivo de extensión FLV en /mnt/sdcard/stream.flv" y el resultado es:

Mostrar código fuente en Blogger

2013-06-21T04:58:00.001-07:00

Hace algunos posts, explicábamos cómo formatear el código fuente de una entrada usando
SyntaxHighlighter. Puedes leerla aquí. El resultado es muy bonito, pero el rendimiento es bastante pobre.

Otra forma para conseguir código con formato para tu blog, es usar google-code-prettify. Se instala muy fácilmente siguiendo esto pasos:

Entra en tu blog
Ve a Diseño->Edición HTML
Busca el cierre del head, </head> y justo arriba pegas el siguiente código

<script src="
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>

También puedes descargarte el módulo completo desde aquí y usar esto:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Guarda los cambios

Así, cuando escribas una entrada nueva, en la edición HTML, debes encerrar tu código con estos tags:

mi código aquí

</pre>

Puedes ir comprobando el resultado con la Vista previa del blog. El resultado es:

mi código aquí

Redes, Apps y JSON: JSend

2013-06-20T11:10:00.002-07:00

JSON es un formato de intercambio de datos cliente-servidor muy liviano y fácil de utilizar. Junto con XML son los formatos (basados en texto) probablemente más extendidos en la red.

{
    "firstName": "John",
    "lastName": "Smith",
    "age": 25,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": 10021
    },
    "phoneNumbers": [
        {
            "type": "home",
            "number": "212 555-1234"
        },
        {
            "type": "fax",
            "number": "646 555-4567"
        }
    ]
}

Fácil, ¿no?

En el mundo de las aplicaciones móviles JSON es muy importante porque la gran mayoría necesitan conectarse a un servidor para funcionar. AdMob, Yahoo Weather, Google Play Game Services... casi todos los "grandes" usan JSON (y XML), para codificar los datos que intercambian con las aplicaciones.

Y si eres de los "pequeños" ( o de los nuestros ;)), y tienes un servidor que quieres utilizar para desarrollar una App, quizás una base de datos MySql y unos cuantos PHP, un sincero consejo: usa JSON. Las dos grandes plataformas móviles (iOS y Android o Android e iOS), se integran muy bien y también se lleva bien con PHP+MySql. La segunda opción sería XML, pero en mi opinión los móviles hacen mejores migas con JSON.

Y entonces llega la segunda gran pregunta cuando diseñas uno de estos sistemas de intercambio de datos y te das cuenta de que tienes 10 o 20 tipos de mensajes diferentes cliente-servidor y el mismo número de archivos de código para interpretarlos (y por lo tanto un montón de bugs y errores): "Debe existir algún sistema estándar para estructurar estos mensajes, ¿no?. Así podría reutilizar algo de código y eliminar bugs...".

Pues a falta de una gran respuesta oficial, mi sugerencia es JSend:

{
    status : "success",
    data : {
        "post" : { "id" : 1, "title" : "Título", "body" : "Mensaje" }
     }
}

Los campos principales son:

status: que indica si la operación ha sido correcta ("success"), ha fallado ("fail") o ha habido un error ("error"). La diferencia entre fallo y error es que el primero se utiliza cuando hay un problema con los datos que se han enviado en la petición o cuando hay un problema en la llamada a la API (p.ej. una petición que requiere estar logueado sin estarlo).
data: contiene los datos que se envían en el mensaje en caso de haber sido la operación correcta, o los motivos de fallo. Obligatorio en caso de petición correcta o con fallo.
message: En caso de haber ocurrido un error (p.ej. en el servidor) indica los motivos del error. Obligatorio en caso de error.
code: Código descriptivo del error, podéis utilizar los mismos que de HTTP si queréis. Opcional en caso de error.

Ejemplos:

Petición de datos de un usuario correcta:

{
    "status" : "success",
    "data" : { "post" : { "id" : 1, "username" : "pepe", "name" : "José", "lastname" : "Navarro" }
}

Fallo de autenticación:

{
    "status" : "fail",
    "data" : { "title" : "La contraseña no es correcta" }
}

Error en el servidor por tiempo de espera superado:

{
    "status" : "error",
    "message" : "Tiempo de espera superado"
    "code" : "508"
}

Cocos2d-X: Menús y botones

2013-06-19T15:03:00.002-07:00

En Cocos la manera más sencilla de crear botones es a través de las clases CCMenu y CCMenuItem. Es decir se crea un menú (CCMenu) y se le añaden los botones (CCMenuItem).

Lo primero y más importante es como recibir el evento de botón pulsado:

// Dentro del método init() de vuestro CCLayer
// CCMenuItem *button;
button->setTarget(this, menu_selector(TuClase::buttonCallback));

Donde el callback lo podéis definir como:

// pSender es la instancia del botón
void buttonCallback(cocos::CCObject* pSender);

Para crear un botón a partir de imagen

// CCSprite *normalSprite; --> Botón sin pulsar
// CCSprite *selectedSprite; --> Botón pulsado
CCMenuItemSprite::create(normalSprite, selectedSprite);

Y para crear un botón a partir de texto (los dos últimos parámetros son para el evento de botón pulsado):

CCMenuItemFont* pCreditsButton = CCMenuItemFont::create("Jugar", this, menu_selector(TuClase::botonJugarCallback) );

Menús

Normalmente en la pantalla de inicio de juego, suele haber un menú con botones para jugar, ver la ayuda, los créditos, la tienda... Para crear un menú, se crean los ítems que va a albergar (heredan todos de CCMenuItem), se crea el menú, se le añaden los items y se añade el menú a la capa (CCLayer).

La manera más sencilla es crear un array con todos los botones y añadírselos al menú al crear este último:

// Dentro del método init() de vuestro CCLayer
// CCArray* arrayOfCCMenuItems
CCMenu *menu = CCMenu::createWithArray(arrayOfCCMenuItems);

// O también
CCMenu::create(pButton0, pButton1, pButton2, NULL);

this->addChild(menu);

Si es un menú como el descrito, querréis alinear automáticamente los botones:

// Alineación vertical
menu->alignItemsVertically();

// Alineación horizontal
menu->alignItemsHorizontally()

Ejemplo de pantalla de menú completo (a partir de un proyecto recien creado, en el archivo HelloWorld.cpp):

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
  if ( !CCLayer::init() )
  {
    return false;
  }
  
    // ask director the window size
  CCSize size = CCDirector::sharedDirector()->getWinSize();

  CCMenuItemFont* pPlayButton = CCMenuItemFont::create("Jugar", this, menu_selector(HelloWorld::playCallback) );
  CCMenuItemFont* pHelpButton = CCMenuItemFont::create("Ayuda", this, menu_selector(HelloWorld::helpCallback) );
  CCMenuItemFont* pCreditsButton = CCMenuItemFont::create("Créditos", this, menu_selector(HelloWorld::creditsCallback) );

  // create menu, it's an autorelease object
  CCMenu* pMenu = CCMenu::create(pPlayButton, pHelpButton, pCreditsButton, NULL);
  pMenu->setPosition( ccp(size.width / 2, size.height / 2) );
  pMenu->alignItemsVertically();
  this->addChild(pMenu);
  return true;
}

void HelloWorld::playCallback(CCObject *) {
  // TODO
}
...

Y el resultado:

Gadget Seguir a de Twitter para Blogger

2013-06-19T03:53:00.002-07:00

Si quieres incluir en tu blog el gadget "Seguir a" de Twitter, sigue estos pasos.

Entra en tu blog a la sección de Diseño
Añade un nuevo gadget del tipo HTML/Javascript
Copia y pega el siguiente código

<a href="https://twitter.com/USUARIO" class="twitter-follow-button" 
data-show-count="true" data-lang="es">Seguir a USUARIO</a><br/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");</script>

Cambia USUARIO por tu usuario de twitter
La opción data-show-count="true" mostrará el número de seguidores en un recuadro
Dale a guardar y ¡voilá!

Relacionado

Botones sociales en vertical para Blogger

Gadget Twitter para Blogger

Cocos2d-X Backgrounds: Color, Gradiente, Imagen de fondo, Tiled...

2013-06-15T09:48:00.000-07:00

Cocos2d es genial, y la versión Cocos2d-X es de mis favoritas. Pero a veces lo simple se complica.

Por ejemplo el fondo de una escena. ¿Cómo se pone de un color?:

  CCLayerColor *backgroundLayer = CCLayerColor::create(ccc4(255, 0, 0, 255));
  backgroundLayer->setZOrder(0);
  this->addChild(backgroundLayer);

¿Y un gradiente?:

  CCLayerGradient *backgroundLayer = CCLayerGradient::create(ccc4(255, 0, 0, 255), ccc4(0, 0, 255, 255));
  backgroundLayer->setZOrder(0);
  this->addChild(backgroundLayer);

¿Y un gradiente pero con otra dirección, por ejemplo diagonal?

  CCSize size = CCDirector::sharedDirector()->getWinSize();

  CCLayerGradient *backgroundLayer = CCLayerGradient::create(ccc4(255, 0, 0, 255), ccc4(0, 0, 255, 255), ccp(size.width/2, size.height/2));
  backgroundLayer->setZOrder(0);
  this->addChild(backgroundLayer);

¿Y una imagen de fondo?

  CCSprite *backgroundSprite = CCSprite::create("HelloWorld.png");
  backgroundSprite->setPosition(ccp(size.width/2, size.height/2));
  backgroundSprite->setZOrder(0);
  this->addChild(backgroundSprite);

Y para sacar nota: ¿Qué pasa si tengo una imagen que quiero que se repita en el eje X y el eje Y de forma automática ocupando toda la pantalla (y claro, que funcione no sólo en el tamaño de la pantalla del iPhone)?

    // ask director the window size
  CCSize size = CCDirector::sharedDirector()->getWinSize();

  CCRect rect(0, 0, size.width, size.height);
  CCSprite *backgroundSprite = CCSprite::create("WhereIsThatFly.png", rect);
  backgroundSprite->setPosition(ccp(size.width/2, size.height/2));
  backgroundSprite->setZOrder(0);
  ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
  backgroundSprite->getTexture()->setTexParameters(&params);
  this->addChild(backgroundSprite);

En este caso hay que tener cuidado el tamaño de la imagen, funcionará sin problemas si las longitudes (ancho y alto) en píxeles son potencia de dos (es decir 16, 32, 64, 128, 256...).

La imagen utilizada es el icono de nuestro último (¡y primer!) juego hasta la fecha (espero que cuando leáis esto haya alguno más) disponible en Google Play: ¿Dónde está la mosca? Actualmente estoy haciendo el port a Cocos2D-X.

Xcode: Archivos de recursos, pantalla retina, iPhone 5 y iPad's

2013-06-14T11:48:00.001-07:00

Hay iPhone 3GS, otros con pantalla retina, luego está el iPhone 5 que es más largo y a parte están los iPad (con y sin retina).

Una imagen que carguéis para uno de estos dispositivos puede que no se vea bien (o todo lo bien que se podría ver), según el dispositivo. Por eso a veces conviene hacer diferentes versiones que se adapten a cada uno de los diferentes tipos de dispositivos.

En Xcode es posible y de manera muy fácil, usar diferentes recursos que se carguen de forma automática según si la pantalla es retina o no, si es iPhone 5 o si es un iPad. Todo se basa en un sistema de sufijos que se añaden entre el nombre del archivo y su extensión (p.ej. ".png"). Son los siguientes:

Pantallas retina: añadir @2x (p.ej. imagen@2x.png).

iPads: añadir ~ipad (p.ej. imagen~ipad.png y si fuera también retina imagen@2x~ipad.png).

iPhone 5: añadir -568h@2x (p.ej. imagen-568h@2x.png).

Sólo para iPhones y iPods Touch: añadir ~iphone (p.ej. imagen~iphone.png).

Y para cargar una imagen en un UIImage por ejemplo, debéis usar el nombre del archivo normal sin ningún tipo de sufijo, ya que la elección se realiza de forma automática. Por ejemplo: [UIImage imageNamed:@"image.png"];

Xcode: Localizar o Internacionalizar tu App

2013-06-14T11:20:00.000-07:00

Una vez has desarrollado tu aplicación toca internacionalizarla. Excepto algunas aplicaciones que tocan temas muy locales, si desarrollas tu aplicación sólo en español estás perdiendo un montón de usuarios potenciales de habla inglesa (o que más o menos se defienden con el inglés). De igual forma si tu aplicación está sólo en inglés hay un gran público de habla hispano que estás marginando (y si estás leyendo este blog es porque hablas español).

El mecanismo en Xcode ha ido cambiando con cada versión y aquí voy a explicar como se hace en la versión 4.6. Para otras versiones supongo que casi o todo de lo siguiente se puede aplicar:

Haciendo clic en el proyecto, buscas la sección "Localizations" en el formulario que aparece. Tienes que añadir los idiomas que vaya a soportar tu aplicación (por ejemplo inglés y español).
Añades al proyecto un nuevo archivo de recursos de tipo Strings y lo llamas Localizable.strings
Seleccionas el nuevo archivo y normalmente en el lado derecho, bajo la descripción del archivo, aparece la opción Localizar. Lo localizamos y añadimos los idiomas de inglés y español (o los que hayamos añadido en el paso 1).
Lo que Xcode realmente hace es crear dos carpetas (en.lproj y es.lproj para inglés y español respectivamente) donde crea dos versiones diferentes del archivo Localizable.strings. Luego en tiempo de ejecución detecta el idioma en el que el usuario tiene configurado su dispositivo y carga la correcta.
Abrimos uno de los dos archivos y el formato que hay que seguir para añadir traducciones es: "Key" = "Value"; es decir una clave entre comillas dobles, símbolo igual, y el valor (normalmente la traducción) también entre comillas, ah ¡y no olvidar el punto y coma al final!
Hay bastante discusión sobre las buenas prácticas a la hora de añadir traducciones, yo suelo ver tres formas:

"Valor por defecto en inglés" = "Valor por defecto en el idioma local"; (p.ej. "Hello" = "Hola";).
"Clave descriptiva" = "Valor por defecto en el idioma local"; (p.ej. en la pantalla ficticia llamada "ayuda", tenemos un botón de contacto: "ayuda_boton_contacto" = "Contactar";).
Una mezcla de las dos anteriores. Por ejemplo lo que yo suelo hacer es usar el primer método para palabras y expresiones muy comunes en mi aplicación (nombre de la aplicación, diálogos de error o botones como aceptar o cancelar...).

Por último y para utilizar todo esto, nada más fácil que usar el método NSLocalizedString(NSString *key, NSString *comment) que devuelve un NSString. key es la clave y comment es un comentario para uso de desarrollo que a veces tiene sentido usarlo y otras simplemente lo podéis poner a nil. Por ejemplo NSLocalizedString(@"Hello", nil) devolvería @"Hola" según el ejemplo del punto anterior si el usuario tuviera ajustado su móvil a español.

Hasta aquí lo básico que es localizar texto. Sin embargo podéis localizar cualquier otro recurso, por ejemplo gráficos, audio... siguiendo el mismo procedimiento. De esta forma podéis mostrar imágenes o reproducir sonidos diferentes según el idioma del usuario.

No sólo los recursos, sino también los Storyboards y los XIBs. Por lo que el ejemplo anterior ("ayuda_boton_contacto") puede que no tenga demasiado sentido ya que podéis poner diferentes textos al botón según la versión del Storyboard.

Y luego hay ciertos "hacks" que pueden resultar muy útiles en el caso del archivo Localizable.strings. Consisten en utilizarlos no para traducciones de texto, si no para cambiar el funcionamiento de la aplicación según el idioma:

Por ejemplo, en el caso de que si la aplicación se ejecuta en español os queréis conectar al servidor A y en el caso de inglés al servidor B podríais añadir una clave "server" donde en el archivo localizado en español tenga como valor A y en el otro valor B.

iOS y Augmented Reality: Mostrar la cámara en un UIView

2013-06-14T04:00:00.002-07:00

En la mayoría de las aplicaciones de realidad aumentada se usa la cámara.

La forma directa de mostrar la cámara es a través de la clase UIImagePickerController. Básicamente te permite abrir la cámara en todos los modos disponibles, hacer fotos, vídeos, ... Y usar un overlay que podéis colocar encima.

Sin embargo puede que por el diseño o los requisitos de vuestra aplicación el mencionado overlay no sea la opción más adecuada. ¿Cuál es la otra opción? : El framework AV Foundation.

Este método os va a permitir diseñar vuestra aplicación con vuestro Storyboard, XIB, ... y mostrar la previsualización de la cámara en el UIView que queráis. El cual no tiene porque ser de pantalla completa ni situarse en el centro.

Instrucciones:

Añadir el framework de AV Foundation a vuestro proyecto.
Necesitáis una referencia al UIView sobre el que queráis mostrar la cámara. Supongamos que la llamamos cameraView.

Añadir el código:

- (void)startCameraPreview {
  NSLog(@"startCameraPreview");
  captureSession = [[AVCaptureSession alloc] init];
  
  
  AVCaptureDevice *captureDevice = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
  NSError *error = nil;
  AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:captureDevice error:&error];
  if (input) {
    [captureSession addInput:input];
    AVCaptureVideoPreviewLayer *previewLayer = [AVCaptureVideoPreviewLayer layerWithSession:captureSession];
    
      // Custom Fix to fill the view
    CGRect bounds=self.cameraView.layer.bounds;
    previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill;
    previewLayer.bounds=bounds;
    previewLayer.position=CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
    
    [self.cameraView.layer addSublayer:previewLayer];
    [captureSession startRunning];
  }
  else {
      // Handle the failure.
  }
  
}

No olvidéis llamar a stopRunning al acabar!

Con pequeñas modificaciones lo podéis adaptar para capturar audio o audio y video a la vez.

Xcode y GIT: Conectar tu proyecto a un repositorio remoto GIT

2013-06-14T03:27:00.002-07:00

Hay dos cosas imprescindibles en la programación que no son programar: comentar adecuadamente el código y usar un sistema de control de versiones.

Si no sabes que es un sistema de control de versiones, en pocas y toscas palabras: es como lo que hacías cuando empezaste a programar y para no perder los cambios ibas copiando los archivos de código en diferentes carpetas con nombres como "prueba1_del_martes", "prueba10_funciona_en_X" y otros nombres Sui generis. Pues todo eso (y mucho más) pero bien pensado, diseñado y estandarizado.

A todos (o casi todos, Subversion tiene muchos fans y aún queda algún dinosaurio que usa CVS) nos gusta GIT, el cual es un sistema de control de versiones diseñado por nada más y nada menos que Linus Torvalds (¡nada más que añadir!).

Cuando creas un nuevo proyecto en Xcode te da la oportunidad de crear un repositorio GIT local el cual es una buena idea porque así puedes mantener un sistema de versiones de forma local (es decir, en tu propio ordenador). Puedes volver a versiones anteriores, crear branches para testeo o release, etc. Marcas la casilla y creas el proyecto normalmente.

Pero una de las cosas más interesantes del control de versiones, es poder trabajar en remoto. Es decir tener un repositorio en un servidor externo (que puede ser casero o alojado en algún proveedor). Si se te rompe tu ordenador no pierdes el proyecto porque puedes recuperarlo (con un simple git clone) del servidor y además si sois varios podéis tener un punto común (el servidor) donde mandar vuestros cambios (git push) y obtener los cambios de los demás (git pull).

No voy a explicar como crear el repositorio en el servidor porque hay un montón de sitios que hablan de ello y muchas formas de hacerlo. Lo que voy a explicar es como conectar tu repositorio local (en tu ordenador) al repositorio remoto (en el servidor):

Desde Xcode, File --> Source Control --> repositories y se abrirá una nueva pantalla.

Buscáis vuestro proyecto y seleccionáis la carpeta Remotes. Y entonces hacéis clic en "Add Remote".

En el diálogo que aparece, rellenáis el nombre remoto con "origin" y en el otro apartado ponéis la ubicación y el método de acceso. En mi caso suelo configurarlo con un acceso SSH pero la persona que os haya creado el repositorio remoto (si no sois vosotros mismos) sabrá que poner en este campo.

Y ya está configurado, a partir de aquí es usarlo.

Uso rápido (todo dentro de File --> Source Control):

Cuando tengáis cambios hacéis un Commit donde escribís una breve explicación de los cambios realizados y luego hacéis un Push para subirlo al servidor (seleccionando origin/master).

Cuando otra persona haya hecho cambios hacéis un Pull.

Luego existen un montón de cosas que se pueden hacer como Merge, crear Branches... pero ya debéis consultar una guía de GIT.

Android Code Snippet: Augmented Reality y Sistemas de coordenadas

2013-06-13T09:45:00.000-07:00

La realidad aumentada es un concepto que incluye a muchos tipos diferentes de aplicaciones.

Algunas descodifican códigos QR dibujando "Pokemons" (o coches, dinosaurios, personajes animados...) 3D sobre ellas, otras detectan caras y rasgos faciales, reconocen objetos...

Y luego hay otro gran grupo que utiliza los sensores del teléfono para "localizar" objetos o información a nuestro alrededor.

Para este último grupo necesitamos usar los sensores del dispositivo para localizarnos con respecto al entorno que nos rodea. Hay varios tipos de sensores (aceleración, geomagnéticos, gravedad...) que junto a la información de geoposicionamiento podemos utilizar para nuestra aplicación.

Lo primero que hay que saber, es que la información que se obtiene de estos sensores se refiere al sistema de coordenadas del dispositivo y éste no cambia con la orientación ("portrait"/"landscape"), ni con el movimiento del dispositivo.

En segundo lugar, debéis decidir cual es el sistema de referencia que vuestra aplicación necesita. En mi opinión a varios tipos que dependen del diseño de vuestra aplicación y sobre todo de como se sujete el móvil:

Aplicación en el que el móvil se sujeta verticalmente: la más común, por ejemplo la típica aplicación en la que se utiliza la cámara y que situáis información de objetos/edificios/monumentos sobre la pantalla.
Aplicación en el que el móvil se sujeta horizontalmente (paralelo al suelo): por ejemplo una brújula, compás, mapas...
Otras: por ejemplo las de posición de estrellas/fases lunares... en el firmamento o juegos como ¿Dónde está la mosca? aquí que cada uno aguante su vela y elija su propio sistema (aunque lo más probable es que el más conveniente sea el del primer tipo).

Siendo el tipo 1 el más común es el que vamos a explicar ya que adaptarlo para los otros tipos no es muy difícil. En este caso se define el eje Y hacia dentro (hacia adonde apunta la cámara). Lo explican aquí.

Implementáis el interfaz SensorEventListener en vuestra clase.
Obtenéis una instancia de SensorManager (p.ej. desde una Activity (SensorManager)getSystemService(Context.SENSOR_SERVICE); ).

Registráis los sensores:

private void registerSensors() {
 Sensor accelerometer = mSensorManager
   .getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
 boolean success = mSensorManager.registerListener(this, accelerometer,
   SensorManager.SENSOR_DELAY_GAME);
 Sensor magneticField = mSensorManager
   .getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
 success &= mSensorManager.registerListener(this, magneticField,
   SensorManager.SENSOR_DELAY_GAME);
 
 if(!success) {
  Log.e(TAG, "SensorManager not supported");
  new java.lang.Exception("SensorManager not supported");
 }
}

En el método del interfaz implementado:

@Override
public void onSensorChanged(SensorEvent event) {

    float[] gravity = new float[3];
    float[] linearAcceleration = new float[3];
    float[] magnetic = new float[3];
    float[] matrixInR = new float[16];
    float[] matrixOutR = new float[16];
    float[] matrixI = new float[16];
    float[] orientation = new float[3];
  
    switch (event.sensor.getType()) {
    case Sensor.TYPE_ACCELEROMETER:
    gravity = event.values.clone();
    break;
    case Sensor.TYPE_MAGNETIC_FIELD:
    magnetic = event.values.clone();
    break;
    default:
    break;
    }

  // If gravity and geomag have values then find rotation matrix
  if (gravity != null && magnetic != null) {
   
  // checks that the rotation matrix is found
  boolean success = SensorManager.getRotationMatrix(matrixInR,
     matrixI, gravity, magnetic);
  if (success) {
    // Re-map coordinates so y-axis comes out of camera
    SensorManager.remapCoordinateSystem(matrixInR,
    SensorManager.AXIS_X, SensorManager.AXIS_Z,
    matrixOutR);

    // Finds the Azimuth and Pitch angles of the y-axis with
    // magnetic north and the horizon respectively
    SensorManager.getOrientation(matrixOutR, orientation);
    float azimuth = (float) Math.toDegrees(orientation[0]);
    float pitch = (float) Math.toDegrees(orientation[1]);
    float roll = (float) Math.toDegrees(orientation[2]);
   }
 }
}

¡Y ya está! :P Bueno aún queda un poco. Como podéis comprobar el resultado son 3 parámetros (azimuth, pitch y roll) que si tenéis algo de conocimientos de aeronáutica o astronomía os sonarán mucho. Son los ángulos de rotación de vuestro dispositivo con respecto al sistema de referencia por el norte magnético, el eje de gravedad y el eje resultante del producto vectorial de ambos:

Donde los ángulos se definen como (documentación):

azimuth: rotación sobre el eje Z
pitch: rotación sobre el eje X
roll: rotación sobre el eje Y

Dependiendo de la aplicación y el tipo de cálculos matemáticos que requiera, podéis utilizar los ángulos de rotación, la propia matriz de rotación (la que he definido en el ejemplo como matrixOutR, es la típica matriz 4x4 de rotación tal y como se define en Wikipedia) e incluso existen métodos para trabajar con Cuaternios. A partir de aquí ya cada uno tendrá que seguir su camino.

Y por último hay que tener en cuenta el ruido en los datos proporcionados por los sensores. Puede que sea necesario, por ejemplo, aplicar un filtro paso baja a los valores obtenidos antes de hacer los cálculos. Aunque en mi experiencia es casi más importante si no ya imprescindible filtrar los valores obtenidos para pintar una vez ya calculados (es decir las posiciones x,y donde pintas en el display), porque puede resultar muy molesto al usuario.

Android Code Snippet: Augmented Reality y la Apertura de la cámara

2013-06-12T09:54:00.004-07:00

Estáis desarrollando una app de realidad aumentada, probablemente tengáis un SurfaceView para la cámara y otro sobre el anterior para los objetos y la información propia de vuestra realidad aumentada.

Probablemente situéis los objetos utilizando el GPS y los sensores de orientación con respecto al dispositivo móvil, pero claro: ¿dónde pintáis las cosas?

Con pápel, lápiz y un poco de trigonometría, rápidamente os dais cuenta que os falta un parámetro: el ángulo de visión de la cámara (Wikipedia), el cual es un parámetro bastante complejo de calcular y que además depende de "otros" factores que tampoco conocéis.

¡No desesperemos y seamos prácticos!

En primer lugar el ángulo de visión depende del zoom, eso es evidente así como lo es que si no necesitáis hacer uso del mismo mejor.

En segundo lugar estamos hablando de una lente estándar, por lo cual su ángulo de apertura estará aproximadamente definido entre 25º y 50º, siendo lo más común en los dispositivos unos 45º (//TODO: poner fuentes de estos datos).

Para complicarlo un poco más el ángulo de visión horizontal puede ser diferente (y de hecho suele serlo) al vertical.

¿Y cuáles son las opciones?

La clase Camera.Parameters (accesible a través del método de instancia getParameters() ), contiene dos métodos para obtener estos dos ángulos (getHorizontalViewAngle() y getVerticalViewAngle() ). Google obliga a los fabricantes de móvil a proporcionar un valor que es el que devuelven estos métodos, pero paradójicamente, este valor no tiene por qué ser cierto, y de hecho suele ser una constante.
En ciertas aplicaciones (por ejemplo para medir objetos reales), se puede idear algún tipo de procedimiento para calcular el ángulo de visión del dispositivo móvil en concreto (por ejemplo a partir de una fotografía y varios puntos conocidos).
La opción rápida es comprobar el valor que devuelve el método 1 y si estos valores no tienen sentido hacer una aproximación. La que utilizo en el juego ¿Dónde está la mosca? es 40º para el ángulo horizontal y 50º para el vertical.

Google Play Game Services (Android)

2013-06-11T11:53:00.001-07:00

Marcadores y puntuaciones en tiempo real, logros y premios, botón +1, mensajería en tiempo real entre jugadores y mucho más. Eso es lo que ofrece el nuevo servicio de Google a los desarrolladores.

Requisitos previos

Necesitas un dispositivo con la versión 2.2 de Android o superior (API 8) y con Google Play para probar (así que alguna ROM puede que no vaya). Si no también se puede probar con el simulador, creando una instancia del AVD del 4.2.2 o superior.
Si usáis eclipse (como el 99% de todos), abrís Android SDK Manager y en la carpeta Extras, marcáis "Google Play Services". Actualizar además a la última API (mínimo la 17) y las herramientas es recomendable. Instaláis los paquetes.
Una vez instalados y desde eclipse, en el mismo workspace que vuestro juego, importáis el proyecto que está en la carpeta <android-sdk>/extras/google/google_play_services/libproject/google-play-services_lib/ (<android-sdk> es donde hayáis instalado el SDK).
En las propiedades del proyecto de vuestro juego (clic-derecho en la carpeta desde Eclipse), os vais a Android y añadís el proyecto de google-play-services-lib como referencia.
Además seleccionáis el Target de vuestro proyecto con la última versión que tengáis de las Google APIs (mínimo la 17).

Dentro de Eclipse

En el archivo de Proguard, (proguard-project.txt se puede abrir desde Eclipse), añadís

-keep class * extends java.util.ListResourceBundle { protected Object[][] getContents();}

Os descargáis de GitHub https://github.com/playgameservices/android-samples/tree/master/BaseGameUtils y añadís el contenido de la carpeta src a vuestro proyecto. Es licencia Apache y funciona muy bien para empezar. Hay sólo un par de clases y es muy fácil de usar, de hecho la única que usaréis será BaseGameActivity
Evidentemente vuestra actividad principal, o desde la que queráis hacer todo el tema social (marcadores, logros, etc), debe heredar de BaseGameActivity.
En el Manifest, dentro de la etiqueta application añadís el siguiente código:

<meta-data android:name="com.google.android.gms.games.APP_ID" android:value="@string/app_id" />

¡Error de compilación! No os preocupéis , necesitamos el app_id, y para ello nos vamos a la consola de desarrollador

Consola de desarrollador

Lo primero que necesitáis es subir una versión del juego, si ya está publicado ya la tenéis y si no firmad una versión y la subís a alpha.
En la sección "Servicios de juegos" añadís el juego, esto es un poco engañoso, puesto que no se refiere al APK, si no a una "entidad" en la que podréis crear marcadores, logros, gestionar mensajería y enlazar las aplicaciones, de forma que podéis tener varias versiones del APK (de pago, gratis con publicidad) o en diferentes plataformas (en iOS o Web) y todas compartiendo los mismos marcadores y logros. Podéis crear algún marcador y añadir algún logro para probar después.
Enlazáis el APK que habéis subido previamente.

El identificador que necesitamos (app_id) es un código numérico que aparece justo al lado del nombre del juego, en el título. Lo copiamos y creamos un archivo XML en la carpeta de res/values donde lo añadimos: <string name="app_id">XXXXXXXX</string>
En la sección de Testing, debéis añadir al menos una cuenta de prueba, para poder probar los servicios antes de publicar la app. Deben ser cuentas con perfiles Google+ (p.ej. de GMail).

Consola API de Google

En la "otra" consola (https://code.google.com/apis/console) entráis en la sección API Access y dentro en hacéis clic en "Create another client ID".
Seleccionáis Installed application, Android, introducís el nombre del paquete, y deshabilitáis la opción Deep Linking. Todavía no le dáis a crear.
El certificado SHA1 lo podéis obtener con la herramienta keytools. En un Mac/Ubuntu estará en el Path por lo que no habrá problema y en un Windows la encontraréis dentro del JDK. En un terminal introducís: keytool -list -v -keystore vuestro_archivo_de_firmas.key Donde vuestro_archivo_de_firmas.key es evidentemente el que utilizáis para firmar los APK. Introducís en el formulario el código obtenido y ya podéis crear. Si había otro identificador de cliente lo podéis borrar.

De nuevo en Eclipse

Google Play Services sólo funciona en aplicaciones firmadas, por lo que debéis firmar los APK antes de testearlos.
Es fácil comprobar si Google Play Services está disponible, podéis usar el método estático: GooglePlayServicesUtil.isGooglePlayServicesAvailable(Context context)
Y ya sólo consiste en curiosear dentro de las clases del proyecto de GitHub que hemos importado previamente. Según que queráis hacer podéis habilitar un cliente u otro (p.ej. CLIENT_GAMES para marcadores y logros, CLIENT_PLUS para el botón +1) y con los métodos getGamesClient y getPlusClient podéis acceder a las instancias desde las que podréis realizar todas las operaciones.

Podéis probar el resultado con nuestro último juego: ¿Dónde está la mosca? / Where's That Fly?

¿Dónde está la mosca?

2013-06-11T08:14:00.002-07:00

Introducción

Dos desarrolladores y un perro, un cuarto lleno de trastos, una buena dosis de ilusión y otra de incertidumbre y casi dos meses de desarrollo, publicamos nuestro primer juego (por ahora para Android): ¿Dónde está la mosca?. Un juego sencillo y sin grandes pretensiones, de tipo "casual" y apto para todos los públicos.

Antecedentes

Trata un tema que no distingue entre clases: la típica mosca y/o mosquito que te quita el sueño durante la noche rondándote la oreja hasta que decides encender las luces y acabar con el asunto. Y sin embargo nada más encenderlas y aún con los ojos entreabiertos la mosca deja de hacer ruido y desaparece misteriosamente.

Juego

Abres la aplicación, pulsas el botón de "Jugar" y comienza el juego. Debes mover el móvil a tu alrededor buscando donde el sonido del insecto se hace más intenso hasta que aparezca en la pantalla. En ese momento, y con un golpe seco hacia delante, agitas tu dispositivo como si fuera un matamoscas real y si lo haces bien aplastarás al bicho.

Tienes 50 segundos para aplastar a todos los bichos que puedas, estos pueden estar abajo, detrás, encima de ti... en cualquier lugar y no hay trampas, siguen trayectorias bien definidas.

Hay diferentes tipos de bichos, desde moscas comunes a moscas tsetse, y cada una tiene un valor en puntos y una dificultad diferente para acabar con ella. Con los puntos puedes comprar diferentes armas que te harán menos ardua la tarea, comprar tiempo adicional o incluso quitar el baner de publicidad (sin tener que pagar dinero de verdad).

Fundamentos físicos y Realidad aumentada

La Realidad aumentada es una tecnología que se basa en "aumentar" la información que proporciona la realidad, con otros estímulos sensoriales como sonidos, imágenes... En este caso aprovechamos los acelerómetros y sensores magnéticos de los dispositivos para crear un sistema de referencia donde "volará" la mosca.

De esta forma podemos situar la mosca con unas coordenadas con unos ejes ortonormales apuntando al norte magnético y al centro de gravedad de la tierra (al norte y hacia abajo) y con centro en el dispositivo móvil. Estas coordenadas las transformamos a otro sistema de referencia con origen en el dispositivo móvil pero ya con los ejes coincidentes con la pantalla. Y a partir de estas coordenadas 3D, de la apertura focal de la cámara y del tamaño del insecto lo podemos transformar en un Sprite que por fin podemos pintar en pantalla.

Los insectos siguen trayectorias espirales (el propio logo de ITIOX sigue la formula de una espiral) con un factor de probabilidad para cambiar de dirección y velocidad según la fase del juego (cada vez vuelan más rápido).

Y al igual que en la realidad, los bichos sienten cierta atracción por la luz, así que la luminancia que capta la cámara también se tiene en cuenta, ¡pero esto es un truco del juego, por lo que no se puede decir más!

Desarrollo

Gráficos, sonidos, música y ¡a parte el código! Ha sido intenso y muy divertido al mismo tiempo.

Es un juego (o aplicación), que pese a no utilizar demasiados recursos (no consume ni el 10% que otros juegos hechos con motores gráficos y además apenas ocupa 5MB), sí que utiliza casi todos los sensores y cosas que tiene un dispositivo móvil moderno: acelerómetros, sensores magnéticos, cámara, GPS e internet (para los marcadores de google), OpenGL, audio...

También utiliza, después del fallecido Openfeint :'( , lo último de Google, que te permite tener marcadores en tiempo real, logros, etc y todo conectado a través de Google+ (ya no saben que hacer para que usemos Google+ :P) que está muy bien, aunque muy mal documentado, por lo que escribiré algún post sobre esta API en breve.

Conclusión

Un juego, aunque aparentemente simple, lleva su tiempo en completarse (optimizar gráficos, testear, depurar errores, testear, ajustar la dificultad, testear...).

Desarrollar una aplicación simple de entretenimiento con los mismos fundamentos no es muy difícil y en apenas un par de semanas habría estado lista. La diferencia está en convertirla en un juego. Y un juego según mi definición tiene la muchas de las siguientes características: "fácil de comenzar, difícil de dominar", marcadores ("hiscores/high scores"), logros, puntos, variantes de armas y/o monstruos, fases, tiempo, cierta estética y cuidado gráfico/audio...

Por nuestra parte y con el conocimiento de que es un juego muy modesto, nos lo hemos pasado muy bien al desarrollar nuestro primer videojuego. Y sin más dejamos a los usuarios tener la última palabra.

Cómo promocionar tu aplicación

2013-06-11T05:29:00.002-07:00

Eres o sois un pequeño grupo de desarrolladores trabajando casi o sin ingresos. Mucha ilusión, pocos recursos, una buena dosis de talento y muchísimas más ganas que nadie de hacer las cosas bien.

Acabáis de desarrollar una app y la habéis publicado en el market (iTunes, Google Play, Amazon, sin distinciones).

Y entonces el peor castigo: la indiferencia. Ni para bien ni para mal, veis pasar los días como vuestra app va desapareciendo entre otros millones sin más pena que gloria y apenas descargas.

Opciones Kowalski:

Hundirse en la miseria, abandonar la programación y echar curriculum en un McDonalds de algún país extranjero en el que aún haya empleo. Problema: no mola volver a tener granos pasada la adolescencia.
Entrar en una cabina telefónica, arrancarse la camisa dejando a la luz un uniforme, discutiblemente masculino, compuesto por unas mallas azules y dar varias vueltas a la tierra a una velocidad mayor que la luz para así volver atrás en el tiempo e invertir en Apple o en Google asegurándose que se compran acciones y no preferentes. Problema: encontrar una cabina telefónica.
Seguir estos sencillos consejos, que os llevarán mucho tiempo de dedicación ("Si se siembra la semilla con fe y se cuida con perseverancia, sólo será cuestión de tiempo recoger sus frutos.", Thomas Carlyle).

Advertencia: el autor está actualmente poniéndolos en práctica a la vez que escribe este post. Para más info: https://play.google.com/store/apps/details?id=com.itiox.wtf

Instrucciones:

Hay que hacer marketing, lamentablemente no todo se soluciona con unas líneas de código. Y para esta labor existen (entre otros) los foros, agregadores, bloggers y cómo no, twitter.

Antes de soltar una lista de sitios, foros, blogs, grupos, etc. una serie de consejos muy básicos pero muy importantes:

Designad a una persona para estos menesteres, si vas en rollo "solo" ánimo, te ha tocado.
Cread una cuenta de mail específica para asuntos "sociales", porque os va a llegar mucho Spam sobre todo de gente que quiere que le paguéis a cambio de publicidad. Utilizad LastPass (o similar) para los cientos de claves o una clave "soft" (por eso también es importante que sea otra cuenta).
Registraos cuanto antes (con la cuenta anterior) en todo tipo de foros, sitios, comunidades, grupos y redes sociales que tengan algo que ver con aplicaciones, software y móviles.
No vale registrarse y a continuación publicar un thread del tipo: "nueva aplicación superdivertida, probadla ya!". Os pondrán en la lista de Spammers, os bannearan, borrarán el thread y no os harán ni caso. Esperad al menos un mes desde que os hayáis registrado.
Publicad, contestad, preguntad o responded a los usuarios de esa comunidad al menos una vez por semana para crear actividad en vuestra cuenta. No hace falta que sea sobre lo vuestro, podéis hablar de cualquier otra cosa, dejad que os conozcan.
Todos los puntos anteriores son válidos para redes sociales y vuestros propios blogs y webs, creadlos cuanto antes mejor y que haya actividad regular en ellos.
Imprescindible screenshots, capturas imágenes promocionales preparadas y listas para usar/compartir. Quasi imprescindible video (Youtube) también preparado y listo.
Y todo hay que empezar a hacerlo antes de publicar la app, no hay excusas, de nada valdrá tanto trabajo si nadie se la baja.

Listados

Casi todos tratan indiferentemente de Android, iOS, Windows... pero como regla general si contiene la palabra Android van a ser de Android e iOS para iPhone/iPad.

Lista de foros (¡muy importante presentarse antes de postear!):

Sitios de reviews, consejos:

Probad muy bien y corregir todos los errores posibles antes de mandar la app a algún review.
Os mandarán Spam, os dirán que tienen mucho trabajo y que tienen un servicio especial que acaban de sacar que pagando una pequeña cantidad... Centraos en que si tenéis una buena aplicación es importante pasar por el aro pero no hace falta pagar (¡y si podéis pagar iros a otro blog!).
Sea un correo, formulario, twitter... rellenar todos los campos de cada uno de los sitios (¡y no en plan robot copiando y pegando lo mismo en todas partes!).
Por último echad un vistazo a cada sitio y con algo de humildad, pensad si vuestra app tiene cabida y sentido en el sitio.

Twitter:

IDRTG Sólo para muy indies. Funciona así PLZ RT - "Your Tweet" #IDRTG donde en "Your Tweet" pones un link a tu app. Las reglas son sencillas, tener más de 50 seguidores y ayudar también retuiteando las apps de los otros miembros.

Nota adicional:

Los piratas ya no son ingleses o argelinos como cuando navegaban en barco, ahora tienen los ojos rasgados, llevan gafas y pasan muchas horas delante de los ordenadores. Su modus operandi consiste en coger vuestra app (un apk de Android es lo más fácil), decompilarla, cambiar un par de códigos y volverla a subir usando sobre todo los mercados secundarios chinos (aunque a veces ni eso y lo publican directamente en los oficiales asumiendo la autoría). Un post interesante hablando del asunto se encuentra en Andengine.

Referencias:

http://blog.muhammada.li/where-to-promote-android-apps
http://blog.tapgage.com/2012/10/81-different-ways-to-promote-your-mobile-app-game/
http://www.ideatoappster.com/20-ways-to-promote-your-app-for-free/