Tag Archives: demo

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.

Usando CSS3 para dar estilo a formularios escritos en HTML5

Dar estilo a un formulario nunca es algo fácil de hacer, pero añadir CSS3 a un formulario HTML5 es una tarea que muestra una larga variedad de resultados en lo que se refiere a probar diferentes navegadores. Mire el link de prueba.

En lo que se refiere a CSS3 no es mucho lo que se puede hacer: pero añadir esquinas redondeadas, gradientes y sombras es mas que nada y el aspecto general del formulario es muuuuuuuuucho mejor. Pero HTML5 es soportado por pocos navegadores (éste formulario HTML sólo por OPERA) y CSS3 también por algunos navegadores – pero diferentes del que soporta HTML5.

El resultado

imposible ver el resultado en sólo un navegador: las esquinas redondeadas pueden ser vistas en Mozilla/Chrome/Safari y los elementos HTML5 en Opera.

Internet Explorer? Mejor ni pregunte. No hay soporte aún.

Así que los resultados:

  1. Mozilla 3: esquinas redondeadas + / elementos HTML5 –
    capture-2
  2. Chrome: esquinas redondeadas + (se ven extrañas) / elementos HTML5 –
    chrome-screenshot
  3. Safari: esquinas redondeadas + / elementos HTML5 –
    capture-3
  4. Opera 9: esquinas redondeadas – / elementos HTML5 +
    capture-1
  5. IE (sin importar cual): esquinas redondeadas – / elementos HTML –
    ie8-screenshot

Parece que tendremos que esperar un poco más hasta que podamos lanzar Javascript desde dar estilos a las formas.

ACTUALIZACIÓN

Ric Ferrer envió una captura de pantalla con el comportamiento del safari móvil desde su Ipod. Gracias 🙂

37555934

Validación en el cliente con Mootools para formularios accesibles

Tal como discutimos en el artículo anterior acerca de formularios –Un básico copia y pega de un formulario de contacto accesible –  hicimos la validación del formulario usando una clase que resalta y nos indica los elementos que necesitan ser llenados o corregidos en caso de que la validación haya fallado.

Ahora, el único punto débil desde el punto de vista del usuario es el hecho de que necesitamos recargar la página cada vez que se haga click en submit y esto es de alguna forma fastidioso. Hoy en día la mayoría de los navegadores ofrecen capacidades de procesamiento en el lado del cliente (javascript) que puede ser usado para validación local – evitando recargar la página.

No me malinterpreten, la parte del lado del servidor necesita permanecer intacta para propósitos de accesibilidad.

La versión mas reciente de MooTools ofrece agregados de validación en el paquete “mootools-more”, que nos ayudará a resolver nuestras tareas. Básicamente necesitamos añadir algunas clases para dar salida a las entradas, para reflejar el tipo de validación que queremos. Para nuestro formulario sólo necesitamos un nombre – obligatorio, y correo electrónico – obligatorio + formato correcto de correo electrónico.

Así que usaremos requerido: required y validar email: validate-email de la lista de validadores que se encuentran incluidos, así:

<label for="name">Name <span>(required)</span></label>
<input  tabindex="1" type="text" name="name" id="name" class="required" />
<label for="mail">Email <span>(required)</span></label>
<input  tabindex="2" type="text" name="mail" id="mail" class="validate-email required" />

Crear el código que haga la validación

En el evento domready de la ventana (necesitamos permitir al html cargar y entonces será capaz de acceder a él), nosotros adjuntamos el validador a nuestro formulario con los métodos necesarios para mostrar al usuario lo que ha hecho mal (en caso de que lo haya hecho). Para mantener la presentación y la accesibilidad intacta – como en la validación definitiva – añadiremos el siguiente código:

window.addEvent('domready', function(){
 
var myFormValidator = new FormValidator($('contact'), {
 
onFormValidate: function(ok) {
 if (!ok) {
  $('error_wrapper').getElements('a').dispose();
  if (!ok) {
 
   $('contact').getElements('.validation-failed')
   .each( function(el) {
      var a = new Element( "a",{'href' : "#add"})
      .addEvent('click', function(){ el.focus(); return false; })
      .set('text', el.get('id').capitalize() )
      .inject($('error_wrapper'));
 
  })
 
 $('error_wrapper').setStyle('display','block');
 }
 else {
   $('error_wrapper').setStyle('display','none');
 }
 
}
},
stopOnFailure:true,
evaluateFieldsOnBlur:false
 
});
 
})

Ok, es un poco largo, pero básicamente está validando cada campo que se necesite, tal como se especifica en la clase, y adjunta en la envoltura del error (error_wraper) las etiquetas para las entradas erróneas. Es mejor estudiar el código fuente para ver cómo está hecho.

Validación en el cliente con Mootools

La librería de Mootools está validando cada campo que le especificamos en el evento enviar (submit) del formulario y añade predeterminadamente una clase validation-failed o validation-passed a cada campo que fue enviado a la rutina de validación.

Podemos usar esas dos clases para mejorar visualmente al formulario – aquí sólo hice que los fallidos fuesen rojos. Si la validación fallare, el evento enviar (submit) de la forma será detenido y los datos incompletos no alcanzarán a llegar al servidor.

Validacion con Mootools

Próximo paso: completar la data correctamente y reenviar.

Aquí esta el DEMO

La clase validadora del formulario es mas poderosa que esta así que dale un vistazo a la documentación en el sitio de MooTools. De cualquier manera, no importa lo que haga, no olvide hacer la validación del lado del servidor también. Es obligatorio para la seguridad de su servidor.