Revolución móvil http://revolucion.mobi Tutoriales, cursos y recursos de desarrollo móvil con PhoneGap y HTML5 para iPhone, Android, Blackberry Mon, 20 May 2013 16:07:40 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 revolucionmobihttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with FeednessSubscribe with NewsGatorSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with PlusmoSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with Live.comSubscribe with Excite MIXSubscribe with WebwagSubscribe with Podcast ReadySubscribe with WikioSubscribe with Daily Rotation Novedades del Android Studio http://feedproxy.google.com/~r/revolucionmobi/~3/djMMza7Z1lk/ http://revolucion.mobi/2013/05/17/novedades-del-android-studio/#comments Fri, 17 May 2013 09:04:10 +0000 Carlos Solis http://revolucion.mobi/?p=1765 En el marco de la conferencia  Google I/O la compañía anuncio un nuevo IDE de desarrollo de aplicaciones llamado Android Estudio.

Screen Shot 2013-05-15 at 5.58.47 PM

La nueva herramienta de Google esta basada en el aclamado IntelliJ IDEA de la compañía JetBrains fabricante de otros famosos programas de desarrollo  como WebStorm para web o AppCode para crear aplicaciones en iOS.

Android Studio ya esta disponible para descarga en modalidad de vista previa para desarrolladores, pero Google advierte que aunque el programa es estable y de buena calidad,  aun esta en modo de prueba y puede tener errores, así que si quieres probarlo, no desinstales tu antiguo Eclipse, en especial si desarrollas aplicaciones de manera profesional.

http://developer.android.com/sdk/installing/studio.html#download

Novedades de Android Studio

Screen Shot 2013-05-17 at 3.54.55 AM

Nueva Interfaz

Atrás quedo la antigua interfaz genérica de Eclipse, este nuevo IDE tiene una gráfica mas moderna, simple y fácil de usar con pestañas para facilitar el acceso rápido a las herramientas de uso común. También incluye la opción de cambiar la apariencia completa del IDE.

androidstudio1
Soporte para proyectos Eclipse

Los proyectos de Eclipse tienen una estructura diferente de los nuevos proyectos de Android Studio. Al utilizar un nuevo sistema de compilación basado en Gradle ( Eclipse que usa ANT ) tus proyectos antiguos no son compatibles con el nuevo IDE, pero no te preocupes, Google pensó en todo e incluyó una herramienta para importar proyectos creados en Eclipse para facilitar el proceso de migración.

Screen Shot 2013-05-17 at 3.55.08 AM

Control de Versiones

Un punto crucial para todo desarrollador profesional es el control de código y si ese es un problema para ti, este programa tiene todas las bases cubiertas:  Mercurial, Git, Github, Subversion, en solo unos minutos puedes conectarte a un repositorio y programar con total tranquilidad de que tu código esta seguro.

Screen Shot 2013-05-17 at 4.01.02 AM

Autocompletado

Al igual que en Eclipse y programas similares, tiene la opción de autocompeltado de código  una herramienta en extremo útil para desarrolladores novatos y experimentados. En este mundo en el que tenemos que saber muchos lenguajes de programación distintos, si un editor moderno no tiene la función de autocompletado ni siquiera vale la pena descargarlo.
Screen Shot 2013-05-17 at 4.08.09 AM

Herramientas de formato, rendimiento y compatibilidad

Android Studio tiene incorporadas alertas que te avisaran en tiempo real cuando cometas errores de sintaxis, compatibilidad o cualquier problema que pueda afectar tu aplicación antes que siguiera la hayas compilado.

Screen Shot 2013-05-17 at 4.22.34 AM

Prevista en diferentes layouts

En este nuevo programa podemos ver una vista previa en diferentes dispositivos y resoluciones, el control de elementos permite configurar con facilidad los elementos gráficos y previsualizar la interfaz de tu app en pocos minutos.

Screen Shot 2013-05-17 at 4.20.00 AM

Acceso directo a herramientas Android

La ventaja de tener un IDE dedicado es que todo se trata de Android, atrás quedaron las “vistas” de eclipse que cambiaban los componentes y su posición. Ahora tenemos un acceso rápido a las herramientas comunes de desarrollo como administración de maquinas virtuales, SDK’s y la consola de depuración logcat.

Screen Shot 2013-05-17 at 4.21.12 AM

Conclusión

Por ahora las diferencias con el Eclipse Bundle no son tan amplias, pero desde ya se nota una mejora en el entorno, rendimiento  y  comodidad de tener un IDE dedicado a Android con todas las herramientas necesarias en la punta de los dedos.

Esta herramienta es un gran aporte a la madurez de la plataforma Android en general y con el apoyo de Google junto a la capacidad de ampliar el programa a través de plugins, es cuestión de tiempo para que Android Studio se convierta en la herramienta que ayude a los desarrolladores a preocuparse cada vez menos por los detalles del código y mas en crear aplicaciones espectaculares.

 

]]> http://revolucion.mobi/2013/05/17/novedades-del-android-studio/feed/ 1 http://revolucion.mobi/2013/05/17/novedades-del-android-studio/ Crear Aplicaciones con jQuery Mobile http://feedproxy.google.com/~r/revolucionmobi/~3/xW2draNjlD8/ http://revolucion.mobi/2013/05/03/aplicaciones-moviles-con-jquery-movile/#comments Fri, 03 May 2013 13:30:28 +0000 Carlos Solis http://revolucion.mobi/?p=1732 Posiblemente el framework de JavaScript más utilizado en la web es jQuery y tiene su versión adaptada para dispositivos móviles llamado jQuery Mobile.

jquery-logo

jQuery Mobile es un plugin del jQuery original y requiere que este último esté instalado previamente para poder funcionar.

Una vez activo, jQuery Mobile hace dos cosas: primero, optimiza las funciones nativas para mejorar su performance en equipos móviles , segundo, modifica el HTML y genera un layout con una serie de elementos gráficos predefinidos que acelera sustancialmente la velocidad de producción.

Instalar jQuery Mobile

Aunque es posible y es una técnica muy común en sitios web,  instalar jQuery Mobile enlazando directamente a los archivos almacenados en la nube, se recomienda ampliamente no aplicar esa técnica para aplicaciones PhoneGap. Muy frecuentemente tu aplicación será utilizada sin ninguna conexión a internet o con conexión intermitente. Si los archivos de jQuery están enlazados a documentos en la nube, la aplicación quedaría posiblemente inutilizable.

Para instalar este framework, lo primero que debes hacer es descargar jQuery en su página oficial:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Crea una subcarpeta llamada “js” dentro de tu proyecto PhoneGap y guarda allí el archivo de jQuery.

Una vez descargado jQuery, debes descargar el plugin de jQuery Mobile desde su sitio web oficial:

http://jquerymobile.com/download/

Crea una carpeta con el nombre “jQueryMobile”, descomprime el archivo .zip  que acabas de descargar y copia allí todos los archivos que contiene. Al final deberías tener una estructura similar a esta:


image06

El nombre de los archivos de jQuery y jQuery Mobile cambia según la versión. Si la versión que descargaste tiene otro nombre recuerda hacer los ajustes en el código del ejercicio.

Como mencionamos jQuery Mobile cumple dos funciones: optimiza las acciones de jQuery y genera una interfaz adaptada para dispositivos móviles, por eso es que este plugin contiene imágenes y hojas de estilo.

Pongamos manos a la obra con el código y comencemos a construir una aplicación con jQuery Mobile. comencemos con este código base:

<!DOCTYPE html>

<html>

<head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2″ />

    <title>Ejercicio 10.1</title>

    <meta charset=”utf-8″>

        <link rel=”stylesheet” href=”js/jQueryMobile/jQuery.mobile.theme-1.1.0.min.css” />

        <script src=”js/jQuery-1.7.2.min.js”></script>

        <script src=”js/jQueryMobile/jQuery.mobile-1.1.0.min.js”></script>

    </head>

<body>

</body>

</html>

Como se puede observar en negrita agregamos 3 líneas de código extra para incluir los archivos descargados. La primera incluye la hoja de estilos de jQuery Mobile que se usará para crear las interfaces, la segunda línea incluye el el framework de jQuery propiamente dicho y la tercera es la que inserta el plugin de jQuery Mobile.

Por ahora el código no muestra ningun elemento en el navegador, a continuación vamos a explorar cómo crear una interfaz de usuario con jQuery Mobile.

Creación de Interfaces

jQuery Mobile nos permite crear interfaces optimizadas para dispositivos móviles muy rápidamente y con relativamente poco esfuerzo.

La forma en que trabaja, es reescribiendo el código original del documento y generando uno nuevo, más complejo, según las características y argumentos solicitados.

Una característica interesante de jQuery Mobile es que, a diferencia de un sitio web, que pasa de un documento HTML a otro para mostrar la información, las páginas o “pantallas” de una aplicación se manejan desde un solo documento HTML.

Las páginas o “pantallas” están en un único archivo, jQuery Mobile las administra para mostrar sólo la parte del documento correspondiente a cada pantalla mientras que el resto permanece oculto. De esta forma se acelera sustancialmente la carga de páginas, también permite administrar eventos y animaciones entre una pantalla y otra.

jQuery Mobile aprovecha al máximo los nuevos elementos de HTML5 y hace un uso intensivo de los atributos personalizados que se definen con el prefijo “data-”

Por ejemplo “data-role”, uno de los atributos más usados en jQuery Mobile, permite definir el rol a nivel de funcionalidad y apariencia del elemento que lo contiene. Al definir el rol de un elemento, este atributo permite crear páginas, botones, menús y muchos elementos más.

Al insertar el atributo “data-role” en cualquier tag lo convertimos en un elemento de la interfaz. Sin necesidad agregar ningún código adicional jQuery agrega todos los elementos gráficos, clases y hasta animaciones necesarios para el funcionamiento de ese elemento en particular.

Por ejemplo, para crear una página se utiliza el atributo data-role=”page” de esta forma:

<div data-role=”page” id=”inicio”>

    Inicio

</div>

Cuando jQuery Mobile renderiza la aplicación comprende que este div debe ser interpretado como una página. Le agrega el código y eventos necesarios para que se comporte y vea como tal.

Usando el mismo principio, vamos a utilizar el atributo data-role=”header” para agregar un encabezado a la página que acabamos de crear:

<div data-role=”page” id=”inicio” >

    <div data-role=”header”>

   <h1> Inicio </h1>

   </div>

</div>

Ya tenemos una pagina con un encabezado, fijate que se generó un fondo negro detrás del texto, en este caso como jQuery detectó que ese elemento era un header y automáticamente le agregó las imágenes necesarias para que tenga la apariencia de un encabezado.


image00

Como se mencionó antes, jQuery Mobile encapsula toda la aplicación en un solo documento, así que todas las pantallas deben agregarse en el mismo documento, agreguemos dos pantallas más a esta aplicación:

<div data-role=”page” id=”pantalla2″>

   <h1> Pantalla 2 </h1>

</div>

<div data-role=”page” id=”pantalla3″>

   <h1> Pantalla 3 </h1>

</div>

Tenemos tres pantallas pero la aplicación se sigue viendo exactamente igual. Esto porque aun no tenemos ninguna forma de navegar entre ellas, para crear elementos de navegación sólo es necesario agregar un enlace normal de HTML, en este caso vamos a incluirlo en la primera pantalla, al inicio de la aplicación:

<div data-role=”page” id=”inicio” >

    <div data-role=”header”>

   <h1> Inicio </h1>

   </div>

   <a href=”#pantalla2″> Ir a Pantalla 2 </a>

</div>

Como habrá notado el lector, en el código todas las pantallas tienen un atributo “id” diferente. Para navegar entre pantallas los enlaces deben usar el nombre del ID agregando el signo “#” al inicio.


image08

El enlace del ejemplo no solo permite ir a la pantalla 2 , jQuery Mobile  automáticamente incluyó una animación de transición para darle una apariencia similar a la de una aplicación nativa.

Llevemos un poco más lejos el enlace que acabamos de crear y agreguemos el atributo de jQuery Mobile data-role=”button” para que este enlace se comporte como un botón:

<a href=”#pantalla2″ data-role=”button”> Ir a Pantalla 2 </a>

Al probar el código anterior se verá algo similar a esto:

 

image04

¡Mucho mejor, cada vez se ve más similar a una verdadera aplicación! El siguiente problema es que, en esta aplicación, cuando avanzamos a la siguiente pantalla, no hay forma de regresar.

Para regresar a la página principal, se puede aplicar la técnica anterior de enlazar un link al id de la página principal, o más sencillo aún, se puede utilizar el atributo data-rel=”back” que regresa la aplicación a la pantalla inmediatamente anterior.

<a href=”#” data-rel=”back” data-role=”button” > Regresar </a>

image07

En este punto ya tenemos una aplicación mínima con una navegación básica y hasta transiciones de pantalla.

Para crear una aplicación más compleja con muchas secciones,  es posible que se necesite mostrar estas secciones en forma de lista de enlaces directos a cada sección. Esto lo logramos aplicando el atributo data-role=”listview” a cualquier lista regular :

<ul data-role=”listview” >

   <li><a href=”#pantalla3″> Pantalla 1</a></li>

   <li><a href=”#pantalla3″> Pantalla 2 </a></li>

   <li><a href=”#pantalla3″> Pantalla 3 </a></li>

   <li><a href=”#pantalla3″> Pantalla 4 </a></li>

   <li><a href=”#pantalla3″> Pantalla 5 </a></li>

   <li><a href=”#pantalla3″> Pantalla 6 </a></li>

</ul>

En el código anterior creamos una lista normal de enlaces, pero con el uso de listview se genera un nuevo elemento de tipo lista:

image05

Con las listas podemos crear menús extensos que abarquen múltiples páginas internas. Al igual que en con los otros elementos de navegación, las transiciones entre pantallas incluyen las animaciones automáticamente.

Por último, vamos a agregar un menú de navegación en esta pantalla. Al igual que con el elemento anterior, utilizamos una lista con enlaces para generar el elemento, pero esta vez se usará el atributo data-role=”navbar”  para crear una barra de navegación :

<div data-role=”navbar”>

<ul>

<li><a href=”#pantalla1″>Inicio</a></li>

<li><a href=”#pantalla2″>Pantalla 2</a></li>

<li><a href=”#pantalla3″>Otros</a></li>

</ul>

</div>

image01

El siguiente ejercicio integra todos los elementos que examinamos en una sola aplicación:

<!DOCTYPE html>

<html>

<head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2″ />

    <title>Ejercicio 10.2</title>

    <meta charset=”utf-8″>

        <link rel=”stylesheet” href=”js/jqueryMobile/jquery.mobile.theme-1.1.0.min.css” />

        <script src=”js/jquery-1.7.2.min.js”></script>

        <script src=”js/jqueryMobile/jquery.mobile-1.1.0.min.js”></script>

    </head>

<body>

    <div data-role=”page” id=”inicio” >

        <div data-role=”header”>

            <h1> Inicio </h1>

        </div>

        <a href=”#pantalla2″ data-role=”button”> Ir a Pantalla 2 </a>

    </div>

    <div data-role=”page” id=”pantalla2″>

            <div data-role=”header”>

                <h1> Pantalla 2 </h1>

            </div>

            <a href=”#” data-rel=”back” data-role=”button” > Regresar </a>

        <ul data-role=”listview” >

            <li><a href=”#pantalla3″> Pantalla 1</a></li>

            <li><a href=”#pantalla3″> Pantalla 2 </a></li>

            <li><a href=”#pantalla3″> Pantalla 3 </a></li>

            <li><a href=”#pantalla3″> Pantalla 4 </a></li>

            <li><a href=”#pantalla3″> Pantalla 5 </a></li>

            <li><a href=”#pantalla3″> Pantalla 6 </a></li>

        </ul>

        <div data-role=”footer”>

            <div data-role=”navbar”>

                <ul>

                    <li><a href=”#pantalla1″>Inicio</a></li>

                    <li><a href=”#pantalla2″>Pantalla 2</a></li>

                    <li><a href=”#pantalla3″>Otros</a></li>

                </ul>

            </div><!– /navbar –>

        </div>

    </div>

    <div data-role=”page” id=”pantalla3″>

        <h1> Pantalla 3 </h1>

         <a href=”#” data-rel=”back” data-role=”button” > Regresar </a>

    </div>

 

</body>

</html>

Pros y contras de usar jQuery Mobile

No hay tecnología perfecta y jQuery no es la excepción. Muchos desarrolladores crean todas sus aplicaciones con esta tecnología mientras que otros la evitan al máximo, todo depende de las preferencias personales.

Aquí una breve lista de ventajas y desventajas de desarrollar con jQuery Mobile para que puedas tomar la mejor decisión.

 

Pros:

  • Desarrollo rápido de interfaces.

  • Sintaxis sencilla.

  • Efectos prediseñados.

  • Manejo de eventos.

  • Baja curva de aprendizaje.

Contras:

  • Agrega peso extra a la aplicación.

  • Manejo complejo de CSS.

  • Los efectos no funcionan fluidamente en algunos equipos de baja gama.

  • Las aplicaciones más grandes pueden hacer lenta la carga por trabajar en un solo archivo.

  • Menos control general del código.

jQuery Mobile es una excelente plataforma para comenzar a desarrollar, para aplicaciones pequeñas o medianas y para acelerar tu producción.

Si deseas aprender más sobre este framework puedes encontrar documentación detallada en su sitio oficial

http://jQuerymobile.com/demos/

También existen otros frameworks similares a jQuery Mobile como Sencha Touch o DHTMLX touch  con una aproximación similar de desarrollo rápido con elementos prediseñados.

jQuery Mobile es un paquete completo con su propio CSS, elementos gráficos, eventos y métodos, que  ofrecen una gran comodidad y aumentan velocidad de desarrollo.

]]> http://revolucion.mobi/2013/05/03/aplicaciones-moviles-con-jquery-movile/feed/ 0 http://revolucion.mobi/2013/05/03/aplicaciones-moviles-con-jquery-movile/ Login de usuarios con PhoneGap y jQuery Mobile http://feedproxy.google.com/~r/revolucionmobi/~3/AI38bkbaZac/ http://revolucion.mobi/2013/04/12/login-en-servidores-externos-con-phonegap/#comments Fri, 12 Apr 2013 07:23:33 +0000 Carlos Solis http://revolucion.mobi/?p=1647 La autenticación de usuarios es un proceso común en las aplicaciones móviles  pero,  aunque los desarrolladores web están acostumbrados a realizar rutinas de autenticación en un servidor , el proceso es algo distinto en PhoneGap.

url

Las aplicaciones PhoneGap, a diferencia de una aplicación web,  tienen toda su información almacenada en el equipo del usuario y no se pueden conectar directamente a una base de datos externa. Esto no significa que la información debe quedarse atrapada en el móvil. Tenemos muchas técnicas para conectar las aplicaciones a cualquier servidor e interactuar con cualquier base de datos.

En este tutorial vamos a revisar paso a paso el proceso de validación de un usuario en una aplicación PhoneGap con jQuery Mobile.

Código base de la aplicación

Vamos a arrancar con una aplicación básica que requiere autenticación,  usaremos una app basada en jQuery Mobile, si nunca haz hecho una puedes ver un tutorial acá.

El código de esta aplicación tiene dos pantallas, la primera tiene un formulario  y la segunda  solo puede verse luego de validarse en un servidor externo.

 phonegap app jqueryMobile

Recopilando la información

Para recopilar la información del formulario vamos a usar JavaScript. El primer paso es crear una función que se active cuando el usuario presiona el boton de envio:

<script>
$(‘#formulario’).submit(function() {

return false;
})
</script>

En esta función agregamos la instrucción return false para controlar la conducta regular del formulario y evitar que intente abrir otro documento.

Dentro de esta función que acabamos de crear, vamos a seguir agregando código, primero agregamos dos variables que recolectan la información de las casillas de texto.

var datosUsuario = $(“#nombredeusuario”).val()
var datosPassword = $(“#clave”).val()

Ahora que ya tenemos disponible la información del usuario ,vamos a enviarla a un archivo hospedado en un servidor externo, en este caso el archivo  ”validacion_de_datos.php” que se encuentra hospedado en este servidor.

archivoValidacion = “http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_de_datos.php?jsoncallback=?”

Para enviar la información a este archivo usaremos el comando de jQuery $.getJSON que ya incluye todos los settings y formato para enviar la información al servidor:

$.getJSON( archivoValidacion, { usuario:datosUsuario ,password:datosPassword})

Como parámetros de esta función incluimos la variable que define la ruta del archivo que recibe los datos (archivoValidacion) y los datos que recopilamos del formulario.

Procesando la información en el servidor

Para este punto tenemos una aplicación que puede recopilar y enviar información a un servidor, el siguiente paso es crear el archivo que va a procesar la información en el servidor (“validacion_de_datos.php”) . Vamos a usar PHP por ser un lenguaje sencillo y popular, pero la información que envía la aplicación puede leerse en cualquier otro lenguaje de programación.

En este caso, para mantener el ejemplo simple vamos a definir dos variables con el nombre de usuario y password correctos. Cuando hagas tu aplicación real, posiblemente estos valores vengan de una base de datos o algún otro proceso interno del servidor.

$usuarioValido = “revolucion”;
$passwordValido = “movil”;

A partir de este punto, nuestra aplicacion de prueba, le dará acceso a cualquiera que utilice el usuario “revolucion” y el password “movil“.

Ahora vamos a extraer la información enviada desde la aplicación  como puedes ver destacado en rojo, está el nombre de las variables que se enviaron desde la aplicación móvil.

$usuarioEnviado = $_GET['usuario'];
$passwordEnviado = $_GET['password'];

La aplicacion movil tiene la capacidad de leer cualquier informacion que envie el servidor, la complejidad de los datos depende de las necesidades de cada aplicacion. Para demostrar que podemos enviar datos compuestos, vamos a crear un arreglo con algunos datos extra que enviaremos de vuelta a la aplicacion. En este caso vamos a incluir la fecha y hora en que se realiza el proceso y el dominio en que se generó.

$resultados = array();
$resultados["hora"] = time();
$resultados["generador"] = “generado en revolucion.mobi”;

El siguiente paso es  verificar que los datos enviados desde la aplicación coincidan con los que están definidos en el servidor. Según el resultado de esta verificación agregaremos diferentes respuestas del servidor para que el usuario pueda saber si la autenticación tuvo exito o no.

if( $usuarioEnviado == $usuarioValido && $passwordEnviado == $passwordValido ){
$resultados["respuesta"] = “Validacion Correcta”;
$resultados["validacion"] = “ok”;
}else{
$resultados["respuesta"] = “Usuario y password incorrectos”;
$resultados["validacion"] = “error”;
}

Ya tenemos listos los resultados de la verificación. Vamos a convertir los datos que contiene el arreglo a formato JSON para enviarlo de vuelta a la aplicación.  Este formato es muy popular en aplicaciones móviles porque es fácil de leer y ocupa menos ancho de banda que formatos similares como XML.

$resultadosJson = json_encode($resultados);
echo $resultadosJson;

La aplicación esta lista para recibir datos, pero aun te falta aprender un truco extra.

Evitar restricción de seguridad de Javascript con JSONP

En javascript existe una restricción de seguridad llamada la política del mismo origen, que solo permite a los archivos javascript comunicarse únicamente con archivos que se encuentran en el mismo dominio. Tratar de leer archivos entre dominios diferentes despliega un error de seguridad y bloquea la lectura del archivo externo.

Si bien es cierto por la forma que se ejecutan las aplicaciones PhoneGap, esta restricción no aplica,  si tratas de emular tu app en un browser te encontraras con un error similar a este:

 

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

Para evitar esta restricción debemos usar el formato JSONP (JSON with Padding) que permite acceder al contenido en servidores externos sin generar errores en el navegador. Para usar el formato JSONP en esta aplicación solo tenemos que hacer dos leves cambios. El primero es editar la variable de javascript ”archivoValidacion” de esta forma:

archivoValidacion = “http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_de_datos.php?jsoncallback=?”

Observa que al final del URL se incluye “?jsoncallback=?” este texto envía una llamada de regreso o callback para que javascript pueda leer y procesar la respuesta del servidor sin problemas.

El segundo paso es reemplazar la ultima linea de tu archivo PHP para que se ajuste al formato correcto:

echo $_GET['jsoncallback'] . ‘(‘ . $resultadosJson . ‘);’;

Con estos mínimos cambios tu aplicación no solo funcionara en un móvil, también podrás probarla desde tu browser!

Recibir datos del servidor en la app

Ya casi esta lista nuestra aplicación, solo resta programar la conducta que tendrá la aplicación cuando reciba los datos de vuelta desde el servidor.

Como se menciono antes, el comando $.getJSON incluye todo lo que necesitamos para enviar y recibir datos del servidor. Vamos a agregarle un método extra llamado “.done” que se ejecuta únicamente cuando se recibe una respuesta válida desde el servidor, en este caso vamos a usar el parámetro ”respuestaServer” en el cual se almacenan automáticamente los datos que se reciben desde el servidor.

$.getJSON( archivoValidacion, { usuario:datosUsuario ,password:datosPassword})
.done(function(respuestaServer) {
alert(respuestaServer.mensaje + “\nGenerado en: ” + respuestaServer.hora + “\n” +respuestaServer.generador)
if(respuestaServer.validacion == “ok”){
  $.mobile.changePage(“#home”)
 }
})

Como se puede ver para acceder uno de los elementos que estaban en el arreglo del archivo PHP, solo se invocan dentro de la variable  respuestaServer.

Para terminar con el proceso de autenticacion, si la respuesta de la validacion es correcta, el comando $.mobile.changePage cambia de pagina y nos lleva a la pantalla de bienvenida porque presentamos las credenciales correctas.

Puedes ver el código completo acá

Conclusión

En esta aplicación de prueba hemos logrado enviar y recibir información dinámica a un servidor, con algo de código extra en el servidor puedes conectar tu app con cualquier base de datos o webservice externo.

También usamos el formato JSONP para ignorar restricciones del navegador y emular sin problemas nuestras aplicaciones en el browser. Este formato también puedes aplicarlo en cualquier interacción que realice tu aplicación con datos de un servidor externo.

Conectandote a datos externos usando la capacidad de proceso de un servidor,  podrás aumentar el nivel de complejidad de tu aplicación y llevarla al siguiente nivel!

Descargar ejemplo Ver ejemplo online 

]]> http://revolucion.mobi/2013/04/12/login-en-servidores-externos-con-phonegap/feed/ 3 http://revolucion.mobi/2013/04/12/login-en-servidores-externos-con-phonegap/ Encuentro de Desarrolladores en Santiago de Chile http://feedproxy.google.com/~r/revolucionmobi/~3/ZWgGRfbW3lQ/ http://revolucion.mobi/2013/03/25/encuentro-de-desarrolladores-en-santiago/#comments Mon, 25 Mar 2013 22:57:25 +0000 Carlos Solis http://revolucion.mobi/?p=1595 BlackBerry esta a la alza una vez mas y en Revolución Móvil queremos ayudarte a que tu app domine este nuevo ecosistema desde el primer día, por eso no te puedes perder el BlackBerry Dev Meeting que estamos organizando en Santiago de Chile.

blackberry 10

 Este 4 de Abril en el marco del lanzamiento del nuevo sistema operativo BlackBerry 10 vamos a  tener una reunión con desarrolladores y emprendedores en INACAP sede Santiago Centro ( 76 Almirante Barroso) . Tendremos talleres, charlas y muchas sorpresas para los asistentes.

El evento contará con la presencia de dos evangelistas técnicos de la marca que vienen exclusivamente a compartir todos los trucos y secretos para crear aplicaciones exitosas: Edgar Parada de México y  Bryan Tafel de Argentina.

Programa del evento

 

Hora Actividad
08:30 – 09:00 Registro y Bienvenida
09:00 – 10:00 Apertura:Presentación de la plataforma BlackBerry y tecnologías soportadas.Expositor: Bryan Tafel Developer Evangelist de BlackBerry
10:00 – 11:00 Workshop:
Creación de aplicaciones con HTML5 y Webworks
Expositor: Carlos Solis Elite Developer de  BlackBerry
11:00 – 12:00 Por Definir
12:00 – 13:00 Workshop:Creación de aplicaciones nativas BlackBerry 10 con Cascades.Expositor: Carlos Solis Elite Developer de  BlackBerry
13:00 Cierre del Evento y Despedida.

 

Fecha: 4 de Abril 2013

Hora: 9:00 am – 13:00 pm

Lugar: INACAP Santiago Centro<

Direccion: Almirante Barroso 76, Santiago [ver en google Maps]

 

Inscripción

El evento es totalmente gratuito, pero los cupos son limitados, para asistir solo debes reservar ahora mismo tu espacio en esta enlace:

http://blackberrydevmeetupsantiago.eventbrite.com

 

Trae tu ordenador y cuéntale a tus amigos!  Nos vemos en el BlackBerry Dev Meeting de Santiago!

 

]]> http://revolucion.mobi/2013/03/25/encuentro-de-desarrolladores-en-santiago/feed/ 0 http://revolucion.mobi/2013/03/25/encuentro-de-desarrolladores-en-santiago/ Crear aplicaciones para Firefox OS http://feedproxy.google.com/~r/revolucionmobi/~3/AfMl-nKS20o/ http://revolucion.mobi/2013/03/13/tutorial-crear-aplicaciones-para-firefox-os/#comments Wed, 13 Mar 2013 10:03:35 +0000 Carlos Solis http://revolucion.mobi/?p=1546 En el recién pasado congreso mundial de móviles, un nuevo sistema operativo se robó los titulares: FirefoxOS. Este es el nuevo sistema operativo de Mozilla que promete revolucionar la distribución de contenidos para móviles.

geeksphone

Ya están confirmados al menos dos nuevos equipos basados en FirefoxOS: KEON y PEAK. Mientras tanto, uno de los gigantes de las telecomunicaciones,  la española Telefonica, ya anunció su apoyo para distribuir estos equipos en el futuro cercano.

Aun faltan algunos meses para que salgan los nuevos móviles equipados con FirefoxOS, pero ya hay un movimiento importante de desarrolladores creando aplicaciones y poco a poco comienzan a poblar la tienda de aplicaciones.

Crear y probar aplicaciones

Las aplicaciones de FirefoxOS se basan completamente en tecnologías web: HTML5, CSS3 y Javascript. A diferencia de frameworks como PhoneGap, las aplicaciones de este sistema operativo funcionan sin ningún proceso o interprete de por medio lo que incrementa sustancialmente su rendimiento.

En el siguiente videotutorial te explicamos como instalar el emulador de FirefoxOS y crear una aplicación básica.

Descargar ejemplo

Puedes encontrar mas información para crear tus aplicaciones para FirefoxOS en su portal de desarrolladores.

Conclusión

FirefoxOS es un sistema aun muy joven, es imposible saber cual será su suerte frente a sistemas que están a la alza como Blackberry 10 o Ubuntu mobile. Pero si realmente logra tener éxito y consolidarse ante los usuarios, podemos estar frente a una revolución en la distribución de contenidos con una metodología descentralizada y enfocada a la web.

Es cierto que otros sistemas operativos como webOS han hecho intentos similares con resultados infructosos, pero esta es la primera vez que un especialista consolidado en la web como Firefox lo hace y la experiencia de la mano con una comunidad robusta pueden cambiar el juego completamente.

Le darías una oportunidad a FirefoxOS creando apps o comprando sus equipos?

]]> http://revolucion.mobi/2013/03/13/tutorial-crear-aplicaciones-para-firefox-os/feed/ 0 http://revolucion.mobi/2013/03/13/tutorial-crear-aplicaciones-para-firefox-os/ Probar aplicaciones con el Emulador Ripple http://feedproxy.google.com/~r/revolucionmobi/~3/wzIbthWEw-A/ http://revolucion.mobi/2013/03/07/probar-aplicaciones-con-el-emulador-ripple/#comments Thu, 07 Mar 2013 13:15:53 +0000 Carlos Solis http://revolucion.mobi/?p=1553 Ripple es un plugin de Blackberry para Google Chrome que recrea el entorno y sensores de un dispositivo móvil real dentro del navegador web. Tiene un sistema avanzado de simulación para probar aplicaciones basadas en PhoneGap y Webworks de Blackberry.

ripple_emulator_main_screen

Con este plugin y el soporte HTML5 de Google Chrome es posible simular, con bastante aproximación a la realidad, prácticamente cualquier aplicación basada en tecnologías web, incluso si utiliza eventos o sensores exclusivos del móvil como uso de botones o movimientos del acelerómetro.

Instalar Ripple

Ripple esta disponible en el sitio de desarrolladores de Blackberry , para instalarlo solo debes seguir las instrucciones en linea o seguir nuestro videotutorial

 

http://www.youtube.com/watch?v=UGM6WevQYW0

Probar archivos locales

Los archivos que se desean emular en Ripple deben estar almacenados en un servidor externo o en uno interno (localhost). En caso de no tener acceso a un servidor externo, es posible habilitar un servidor local de manera rápida y fácil con programas gratuitos como XAMPP  o WAMPP

Si deseas probar un archivo local y no tienes instalado un servidor local, este emulador tambien permite instalar tu propio servidor micro servidor local.

Para emular tu archivo, primero debes crear una carpeta con el nombre “RippleSites”. La ubicacion de esta carpeta varia segun el  sistema operativo, selecciona la que aplique en tu caso:

  • Windows XP: C:\Documents and Settings\<NombreDeUsuario>\RippleSites
  • Windows 7: C:\Users\<NombreDeUsuario>\RippleSites
  • Mac OS: /Users/<NombreDeUsuario>/RippleSites

Una vez que tengas la carpeta creada, solo es necesario abrir Ripple y seleccionar la opcion “Start Ripple Services”.

Screen Shot 2013-03-04 at 11.02.05 AM

Ahora puedes abrir y emular con Ripple cualquier archivo dentro de la carpeta “RippleSites” usando la direccion:

http://localhost:9910/<nombre_del_archivo_que_deseas_emular>

Capacidades de Ripple

A pesar que Chrome comparte el mismo motor de render (Webkit) que iOS, Android y Blackberry y tiene la posibilidad de mostrar elementos graficos practicamente en las mismas condiciones que un equipo movil, tiene algunas restricciones. Los navegadores carecen de algunos eventos y sensores exclusivos de los dispositivos móviles.

Ripple se encarga de simular estas capacidades para acercarse al maximo posible al verdadero entorno móvil  algunas de las capacidades que instala en el navegador son:

Devices: Simula la apariencia, tamaño y resolución de pantalla de múltiples equipos y sistemas operativos móviles. También permite cambiar la orientación del equipo en horizontal ó vertical.

Platforms: Muestra las plataformas y versiones disponibles para emulación: PhoneGap (Apache Cordova), Blackberry Webworks y web móvil.

Information: Despliega información importante sobre el documento y modo de emulación actual.

Accelerometer: Muestra un dispositivo virtual en 3D que se puede rotar libremente sobre todos sus ejes. Al manipular el dispositivo virtual se envía directamente la información a la aplicación para que reaccione de igual manera, simulando así el movimiento real de un dispositivo. La información detallada se muestra en tiempo real para depurar y comprobar los resultados. Incluye también la opción de simular la acción de “sacudida” o “shake”.

Device & Network Settings: Simula la presencia y tipos de conexión a internet propios de un dispositivo móvil.

Geo Location: Permite simular y manipular todos los valores de las coordenadas de geolocalización, desde la latitud y longitud hasta la dirección y velocidad en que se desplaza el móvil. Incluye además un mapa para ubicar gráficamente las coordenadas que se introducen.

Events: Activa eventos específicos de PhoneGap como deviceReady , que señala el momento en que el dispositivo esta listo o backbutton , que se activa cuando se presiona el botón de regresar de algunos dispositivos. Esta característica es particularmente útil porque permite emular el comportamiento de una aplicación PhoneGap en un dispositivo móvil real.

Conclusión

Muchos de los ejemplos que mostramos en este blog y en el Manual del guerrero móvil son probados con Ripple, no solo por todas sus capacidades de simulación, sino porque ahorra tiempo al eliminar la necesidad de compilar aplicaciones, ademas de  permitir el uso de otras herramientas de depuracion web como firebug.

Esta es sin duda una herramienta que no puede faltar en el navegador de cualquier desarrollador de sitios web  y es un excelente punto de partida para desarrollad aplicaciones nativas basadas en PhoneGap o Webworks.

]]> http://revolucion.mobi/2013/03/07/probar-aplicaciones-con-el-emulador-ripple/feed/ 0 http://revolucion.mobi/2013/03/07/probar-aplicaciones-con-el-emulador-ripple/ Queremos crear un ninja! http://feedproxy.google.com/~r/revolucionmobi/~3/5wfYO1oDqLo/ http://revolucion.mobi/2013/02/17/queremos-crear-ninja/#comments Sun, 17 Feb 2013 21:07:12 +0000 Carlos Solis http://revolucion.mobi/?p=1521 Buscamos un interno con gusto por el desarrollo móvil  y con ganas de ganar experiencia a toda velocidad!  Solo uno será el elegido para colaborar en nuestro proyecto y aprender todos los secretos de un verdadero guerrero móvil.

ninja_eyes

Nuestro sitio sigue creciendo y buscamos un interno con ganas de convertirse en un ninja del desarrollo móvil y el HTML5. Los requisitos para formar parte de este programa son:

  • Estudiante universitario o con menos de un año de graduado.
  • Conocimientos básicos de HTML.
  • Excelente ortografía.
  • Proactivo, con deseos de aprender y espíritu emprendedor.
  • Inglés básico es un gran plus.
  • Comprender conceptos como “NyanCat”, “FTW” o “Harlem Shake” es un plus ; )

El programa de internos se llevará a cabo durante el primer semestre del 2013 (Entre la segunda semana de Marzo y la ultima de Julio) . Puedes participar desde cualquier parte del mundo.

Este no es un internado normal, es una fabrica de ninjas y queremos darte un arsenal para que puedas patear traseros al estilo Chuck Norris, por eso tendrás todos estos beneficios:

  • Acceso a todos los materiales (tutoriales, cursos, libros) de Revolucion.mobi
  • Giftcard de Amazon por $100 USD para comprar los libros  que quieras.
  • Membresía por un año en Video2brain para que tengas acceso a cientos de cursos en video ( o si lo prefieres en inglés, en Lynda.com)
  • Coaching y tutorías para tus proyectos personales.

A cambio, necesitamos que tu nos colabores generando y revisando contenido para nuestros próximos proyectos.

Esta es una oportunidad única para ganar experiencia,  aprender mucho y conseguir material de primera calidad que te servirá en tu futuro profesional.

Si quieres participar, escribe un articulo de al menos 200 palabras sobre cualquier tema tecnológico usando tu mejor redacción y ortografía.

Envíalo junto con una breve introducción sobre ti y tus intereses al correo:

interno2013@revolucion.mobi 

La convocatoria se cierra el 1 de Marzo del 2013. El nuevo interno será anunciado el día 4 del mismo mes.

]]> http://revolucion.mobi/2013/02/17/queremos-crear-ninja/feed/ 1 http://revolucion.mobi/2013/02/17/queremos-crear-ninja/ Amazon presenta Coins: su propia moneda virtual http://feedproxy.google.com/~r/revolucionmobi/~3/EvmUrANv-RM/ http://revolucion.mobi/2013/02/06/amazon-presenta-coins-su-propia-moneda-virtual/#comments Wed, 06 Feb 2013 21:48:00 +0000 Carlos Solis http://revolucion.mobi/?p=1514 Amazon, el mayor retailer del mundo acaba de presentar Coins, una forma de moneda virtual que servira para pagar aplicaciones, juegos y elementos virtuales.

El producto se lanzará en mayo y desde ya amazon se prepara para que en ese momento sus usuarios tengan acceso a millones de dólares en bienes virtuales. Por el momento el servicio solo estará disponible únicamente para usuarios de los Estados Unidos, para juegos y aplicaciones de su tienda y para compras de bienes virtuales en equipos Kindle Fire.

blog-image

 

La nueva moneda virtual se podra comprar en Amazon.com y tendrá un valor de un centavo de dólar, lo que convertirá aplicaciones de $2.99 a 299 coins. Amazon conservará el mismo esquema de distribución de sus ganancias con los desarrolladores (70% para el desarrollador, 30% para la tienda)

Amazon Coins, otro Facebook credits?

Es inevitable ver los Amazon Coins sin pensar en los fallidos Facebook Credits, una moneda virtual lanzada por Facebook en el 2009 para ser descontinuado en el 2012. Desde ya la iniciativa de Amazon tiene una serie de críticos afirmando que el gigante del retail solo va a revivir un modelo que ya fallo y alientan a muchos desarrolladores a boicotear esta nueva moneda virtual.

facebook-credits

Sin embargo, personalemente creo que la idea es interesante.  Para el usuario, tal cual en un casino, al cambiar el efectivo real por Coins eliminas el problema de compatibilidad y medios de pago. Así como todas las maquinas y mesas de un casino aceptas sus fichas, todas las aplicaciones, juegos y compras de bienes virtuales usarían un medio de pago único eliminando la necesidad del usuario de darle su numero de tarjeta de crédito a cada sistema en el que quiera comprar. La seguridad de la transacción recae en Amazon que tiene la experiencia y confiabilidad de realizar varios miles de transacciones al día.

Para los vendedores este sistema tiene grandes ventajas no solo a nivel opertativo te quita el dolor de cabeza de buscar un medio para aceptar pagos.A nivel social , usar una moneda virtual elimina el peso o responsabilidad de gastar dinero real, así los usuarios, que no están tan apegados a sus coins como a sus dólares, tienden a relajarse y gastar más.

El gran problema que tuvieron los Facebook Points fue el fraccionamiento y la conversión a otras monedas virtuales que lo volvieron sumamente confuso, por ejemplo, Zynga no quiso incorporar los Credits directamente en su plataforma, sino que te obligaba a comprar con ellos, su propia moneda, peor aun la moneda cambiaba de acuerdo al juego y si comprabas Farmville Cash con tus credits, solo podías gastarlo en bienes virtuales de Farmille.

La nueva plataforma de Amazon no tiene ninguna restricción (aun) para convertir sus coins a otras monedas virtuales, por lo que corre el mismo riesgo de sufrir la fragmentación que tuvieron los Facebook Credits.

Otro gran problema de los Facebook Credits, fue que intentaron usar su moneda virtual en productos del mundo real,  manteniendo el esquema de ganancias del modelo virtual (70% para el vendedor, 30%para Facebook)  con una tasa tan alta de comisión  los vendedores prefirieron utilizar medios tradicionales que ofrecen tasas menores y por ende, mayores ganancias.

Amazon por su parte no desea vender productos reales aun, por el contrario quiere especializarse en los bienes virtuales, por esto incluyó un atractivo sistema para que los padres tengan control sobre el monto y límites de lo que gastan sus hijos en aplicaciones en juegos y aplicaciones.

Esta característica será la punta de lanza para penetrar entre los consumidores y dejar que el programa crezca y genere un flujo de dinero virtual que se vuelva atractivo para nuevos desarrolladores y productos… una gran jugada!

Coins, points y bitcoin, el ascenso de las monedas virtuales

Amazon o fecebook no son ni de lejos los primeros en crear el concepto de dinero virtual, de hecho muchos economistas e informáticos comienzan a creer de que el sistema actual de billetes y monedas se esta volviendo obsoleto este mundo crecientemente conectado.

Hoy en día millones de personas usan su dinero de manera virtual con tarjetas de crédito y banca online, porque no ir un paso mas adelante y crear una moneda completamente electrónica?

Precisamente eso fue lo que pensó el desarrollador japonés Satoshi Nakamoto en el 2008 cuando creo el Bitcoin una moneda virtual que se basa en un sistema descentralizado y que se mueve a través de una red de protocolo cifrado.

imgres

A diferencia de otros proyectos similares, esta moneda virtual ya esta generando valor real y crece constantemente. El tipo de cambio actual es de de $16 Dólares americanos por Bitcon. Tomando en cuenta el numero de bitcons emitidos hasta ahora, esta moneda virtual tiene un valor combinado de unos 150 millones de Dólares constantes y sonantes.

Los Bitcoins, que para muchos son la verdadera moneda virtual del futuro, ya son aceptados en muchas partes, por ejemplo Wikilieaks acepta donaciones en Bitcoins,  en WordPress.com se pueden ya hacer pagos directamente en esta moneda y hasta la empresa LaCie acepta Bitcoins para Wala, su servicio de almacenamiento y respaldo de datos en la nube.

Quien sabe si los Coins de Amazon o los Bitcoins lleguen a convertirse en la moneda oficial para comprar productos virtuales, lo que si es definitivo es que estamos a las puertas de una nueva forma de pensar el dinero y eso parece ser inevitable.

]]> http://revolucion.mobi/2013/02/06/amazon-presenta-coins-su-propia-moneda-virtual/feed/ 0 http://revolucion.mobi/2013/02/06/amazon-presenta-coins-su-propia-moneda-virtual/ Configurar Eclipse para Android en un solo paso http://feedproxy.google.com/~r/revolucionmobi/~3/wn9PjodOroQ/ http://revolucion.mobi/2013/01/22/configurar-eclipse-para-android-en-solo-paso/#comments Tue, 22 Jan 2013 12:45:06 +0000 Carlos Solis http://revolucion.mobi/?p=1480 Eclipse es la herramienta por excelencia para desarrollar aplicaciones Android, el problema es que la instalación de Android es lenta y complicada. Pero eso era antes de que Google lanzara su propia version de Eclipse que ya viene con el SDK y todas las herramientas de desarrollo instaladas.

Screen Shot 2013-01-19 at 10.23.31 PM

 

Puedes descargalo en esta dirección:

http://developer.android.com/sdk/index.html

Aprende a instalar y utilizar la nueva versión de Eclipse para Android en este video tutorial

El paquete de desarrollo incluye:

  • Eclipse Juno, la mas reciente version de este IDE.
  • El SDK de Android todas las herramientas de desarrollo y emuladores.
  • La version de ADT (Android Developer tools) preinstalada en Eclipse
  • Los paquetes y la maquina virtual de Android 4.2 (Jelly Bean).

Solo tienes que instalar el paquete y en un solo paso podrás comenzar a trabajar en tus aplicaciones!

No olvides suscribirte a nuestro canal de youtube!

]]> http://revolucion.mobi/2013/01/22/configurar-eclipse-para-android-en-solo-paso/feed/ 4 http://revolucion.mobi/2013/01/22/configurar-eclipse-para-android-en-solo-paso/ Opera lanza nuevo browser basado en Webkit http://feedproxy.google.com/~r/revolucionmobi/~3/haCQI2Dsaa8/ http://revolucion.mobi/2013/01/21/opera-lanza-nuevo-browser-basado-en-webkit/#comments Mon, 21 Jan 2013 21:39:25 +0000 Carlos Solis http://revolucion.mobi/?p=1491 Opera, el fabricante finlandés de navegadores creador del famoso browser Opera y Opera mini – uno de los browsers para móviles mas populares del mundo  -  ha lanzado un nuevo integrante a su familia de navegadores, se llama Opera Ice y promete ser el nuevo favorito de los usuarios iOS y Android.

Opera-Ice

UPDATE: Opera mueve todas sus versiones (movil, TV, escritorio) a webkit.

Opera Ice puede ser uno de los movimientos mas importantes de los finlandeses en mucho tiempo y ser su herramienta para posicionarse en los dos sistemas operativos móviles mas populares. La principal innovación que tiene este nuevo navegador es que en vez de utilizar el motor original de Opera llamado Presto, lo reemplaza por el motor Webkit, que es el mismo que usan los navegadores nativos de Android, Blackberry y iOS.

El uso de Webkit es una gran noticia para los desarrolladores de web móvil porque ademas de ahorra tiempo de pruebas, les permite usar  todas nuevas las capacidades de Javascript y CSS3 que incorpora este popular motor.

Opera Ice incorpora una interface enfocada al entorno móvil  no hay botones menús ni pestañas,  toda la navegación esta completamente basada en gestos táctiles.

Aunque fue originalmente previsto para ser presentado el próximo mes en el Mobile World Congress, se ha filtrado un  video con una demostración que presenta los detalles del nuevo software. Te invitamos a verlo y comentar que te parece el nuevo Opera Ice?

http://www.youtube.com/watch?v=ADZbdxyvoOY

]]> http://revolucion.mobi/2013/01/21/opera-lanza-nuevo-browser-basado-en-webkit/feed/ 1 http://revolucion.mobi/2013/01/21/opera-lanza-nuevo-browser-basado-en-webkit/