Hackathon Titanium Appcelerator Spain 2011

Hace unos días escribí este post para la Comunidad de Titanium Appcelerator en Español y quiero copiarlo aquí para los que ya no se enteraron de nuestra idea.

Estaba pensando en hacer un pequeño hackathon donde podríamos poner en marcha un proyecto a elegir para aprender cosas nuevas y compartir experiencia. Lo ideal sería que la gente que venga tuviera por lo menos “algo” de experiencia en trabajar con Titanium para que el evento sea un intercambio de ideas y para que cada uno aprenda algo nuevo.

Como es sólo es una idea y depende si la gente quiere participar todavía no tengo muy claro como hacerlo y cuando. Propongo que cada uno que quiere participar deje un comentario con una idea de app que se podría hacer en una noche. Al final hacemos una encuesta y establecemos el tema. Igual con la fecha.

Como no tenemos patrocinadores, para ahorrar un poco, si el número de los participantes no pasa de 6-7 estaba pensando como lugar el salón de mi casa – la tengo en un entorno natural muy bonito a 35km de Oviedo 🙂 . Lo que si hay que pagar sería el transporte desde vuestra casa hasta Oviedo, una noche en una casa rural o hotel y claro la comida en un restaurante. Desde y hasta Oviedo me encargo yo del transporte.

¿Qué os parece la idea?

Espero sus comentarios en la página Hackathon Titanium de TitaniumES.

Posibles Nuevas Características CSS de Adobe

Inspirado en el mundo de la impresión, gente de Adobe y Microsoft vienen nuevas características que podrían (o quizás no) ser incluidas en futuras especificaciones CSS. Estas nuevas características – Regiones CSS y Exclusiones CSS permitirán al texto fluir en las páginas web de manera muy parecida a como lo hacen en los diarios y revistas.

Recuerda que la idea del que el texto fluya en forma de columnas es otra propuesta del CSS3: Las Capas Multi-Columnas en CSS y la de páginas que imitan las revistas ya están en el módulo CSS3 Paged Media

Veamos algunos ejemplos que ADOBE ha implementado:

Hilos de Contenido usando formas y regiones CSS

El texto podría fluir fácilmente de una región a otra y nosotros podríamos escoger intercalar regiones o darles diferente ancho, alto y posiciones en la capa (ver figura siguiente)

Hilos de Contenido

Si puedes establecer regiones rectangulares, por que no hacerlo con formas a discreción del usuario?

contenido en forma de corazon

El texto también fluye de una región (una figura en este caso) a otra.

La idea es súper estupenda y hemos esperado mucho por ellas, pero yo me pregunto sobre su usabilidad si pensamos en la manera en la que la gente lee contenido web versus texto impreso (eso podría cambiar la forma actual de lectura de abajo hacia arriba en forma de L que se ha observado con métodos de eye-tracking).

Exclusión de Contenido

Exclusión de Contenido
La idea opuesta es excluir texto de una cierta región o regiones. (rectangulares o figuras personalizadas)

Posibles implementaciones en el mundo real

adaptive design
Adobe ha mostrado ejemplos más complejos (que funcionan en su propia versión de navegadores basados en WebKit debido a que estas características son aún un borrador y altamente experimentales).

El texto puede fluir en áreas con formas personalizadas y nos permitirá crear gráficos accesibles con CSS con complejas capas que involucren imágenes y textos que se comportarán bien en dispositivos con diferentes tamaños de pantalla y resoluciones.

Transparencias de la presentación de Titanium Appcelerator en The Event 2011

Os pongo aquí los slides de la ponencia de @dan_tamas en The Event 2011 Cáceres. Espero poder ponerlos tambien en formato HTML e incluir el video de la presentación lo antes posible.

Tutorial Avanzado de Titanium – Bonjour Networking

Titanium Appceletaror Mobile ha implementado el protocolo de redes Bonjour para iOs (o ZeroConf si lo prefieres) que te permite conectarte a otro dispositivo que se encuentre en la misma red.

Antes de comenzar con la parte aburrida – quiero decir código – veamos un vídeo con una pequeña demostración que nos muestra a 3 dispositivos jugando juntos 🙂

Trabajando en Redes con Titanium Mobile en iOs

Me gustaría mencionar que el iPod es de segunda generación – por lo tanto menos capaz (los retrasos son visibles en el vídeo) y de alguna manera, algunas veces parece perder paquetes. Probé la misma aplicación con un iPad en vez de un iPod y todo funcionó bien.

Bonjour

Basandome en el código que se consigue en KitchenSink he creado una pequeña función que crea la conexión por nosotros y nos retorna un objeto que te permite iniciarlo, cerrarlo y escribir en el socket.

Bonjour es un poco extraño para entender por aquellos con menos experiencia pero en resumen, la cosa es así:

  • Necesitamos un socket en modo lectura-escritura que será usado por localService para publicar su presencia.
  • Cada localService tiene que tener su propio y único nombre para poder identificarse en la red.

Aparte de esto, necesitamos un serviceBrowser para encontrar a los demás dispositivos alrededor (que hayan publicado su presencia por supuesto).

Como todo funciona asíncronamente, tendremos que confiar en los eventos para capturar los datos enviados por alguien o los cambios en el número de dispositivos conectados.

El serviceBrowser tiene el evento updatedServices donde podemos capturar los servicios publicados. En esta función intentaremos capturar el evento de lectura de cada servicio que es el que nos dice qué datos son enviados por la red.

Advertencia: Cierra la conexión de red en el momento en que no la necesites más.

La Función de Conexión de Red

La función que he creado se encarga de esto, de manera que tu solo tienes que usarla como se encuentra el ejemplo debajo:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

En otro punto de tu app, donde quieras enviar el mensaje, solo tienes que hacer esto:

	connection.write('my_message');

Como dije antes, no olvides limpiar todo:

win.addEventListener('close', function(e) {
	connection.stop();
});

Que sucede en el demo?

El ejemplo en el video es bastante sencillo. Dependiendo de que bola toques (roja, verde o azul) creas una nueva conexión con ese nombre y la inicias. En este momento cualquier mensaje proveniente de la red es parseado en JSON y una pequeña bola es creada con las coordenadas y color específico.

En tu turno, cuando tocas la pantalla, envías tus coordenadas y color por la red para que los demás dispositivos sepan que dibujar. Cada mensaje es un Objeto JSON expreso en texto como el que sigue:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

Como nota adicional, el demo usa cero imágenes. Ninguna. Todo es nativo y planeo un futuro tutorial sobre cómo hacer esto. 🙂

El código

El código está en Github Github y puedes descargarlo desde aquí.

Todo se encuentra bajo licencia MIT pero me gustaría escuchar lo que tengan que decir.

Siete días con Titanium – día 6 – animaciones y transformaciones

Casi cualquier elemento de la interfaz de usuario puede ser animado y transformado, permitiéndote añadir a tu aplicación ciertas mejoras visuales o simplemente aprovechar las ventajas de los elementos predefinidos y darles un nuevo rol. Para aquellos familiarizados con las animaciones CSS3 esto se les hará fácil porque los conceptos son prácticamente los mismos.

Animaciones

Está de más decir que una animación cambiará uno o más propiedades de la forma de un elemento del actual estado a otro (establecido por nosotros) en un período de tiempo.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

El código de arriba animará el alto de la forma My_view de 20 a 100.

Puedes complicar las cosas más al añadirle más propiedades que animar (como el fondo, color, opacidad, etc), una duración (que tiene que ser en ms) y una curva (como ease-out o lineal, etc)

Algunos ejemplos

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Si necesitas hacer una animación para hacer volver los elementos a su estado original y repetirlo varias veces, hay dos propiedades que podrían interesarte: repeat y autoreverse.

El código siguiente hará que la vista “pulse” 3 veces.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Las animaciones tienen 2 eventos: start (iniciar) y complete (completo). El evento complete es muy útil porque podemos encadenar más animaciones, una detrás de la otra, o iniciar algunas otras acciones cuando la actual finalice.

Transformaciones

Similar a las transformaciones CSS3, en Titanium puedes usar transformaciones en 2D o 3D.

Básicamente puedes crear una matriz 2D o 3D para la transformación o usar los “atajos” predeterminados – (como escalar “scale” o rotar “rotate“) y pasar esta transformación al objeto que estás creando o a la animación.

Un ejemplo de transformaciones

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Los mejores recursos para ver cómo todo funciona son los ejemplos provistos por el equipo de Appceletaror en el KitchenSink:http://bit.ly/eiow0B

Estas animaciones y transformaciones no son apropiadas para un uso intenso (como juegos) pero pueden ser utilizadas exitosamente para mejorar la apariencia de las apps – y con esto, la experiencia del usuario.

Como siempre, espero sus preguntas, sugerencias y lo que se les ocurra 🙂