Hacer por hacer...: Android

Mostrando las entradas con la etiqueta Android. Mostrar todas las entradas

1 de octubre de 2013

Ejemplo de jQuery Mobile

En esta entrada publicare un pequeño código para mostrar lo sencillo que es desarrollar una aplicación web móvil con jQuery Mobile. Como se muestra en el recuadro que se encuentra a continuación, una típica página de jQuery Mobile tiene tres secciones: un encabezado, contenido y pie de página.

El código anterior genera una vista similar a la que se muestra en la siguiente figura.

La sección de encabezado es donde normalmente se coloca los encabezados de página y/o logos. La sección de contenido es donde la web específica de la aplicación y el contenido de los diferentes widgets. La sección de pie de página es ideal para la navegación.

Para aprovechar las funciones de jQuery Mobile avanzadas y la sintaxis HTML, un documento HTML jQuery Mobile debe definir el doctype HTML5. El resto del documento HTML consta de:

El encabezado contiene las referencias a jQuery Mobile y los temas CSS.
La sección del cuerpo contiene el contenido de la aplicación Web.
El pie de página puede ser fácilmente utilizado como una barra de navegación.

Con el siguiente código se muestra un ejemplo de un documento jQuery Mobile con HTML5.


<!-- Definir el doctype HTML5: -->



<!DOCTYPE html> 



<!-- Definir el <head> HTML5 con referencias a jQuery, jQuery Mobile y temas CSS móviles: -->



<html> 



<head> 

    <title> Título de la página </title> 

 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 



    <link rel = "stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css "/>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js "> </script>

</head> 



<!-- Definir el <body> documento HTML que incluye los elementos móviles de jQuery: -->



<body> 



<div data-role="page" id="page1">

    <div data-role="header">

       <h1> HEADER </h1>

    </div>



    <div data-role="content">

       <p>

       ÁREA DE CONTENIDO

       </p>



    </div>



    <div data-role="footer">

       <h1> FOOTER </h1>

<!-- El pie de página se puede convertir en una barra de navegación muy fácilmente, como sigue: -->

      <center>

       <div data-role="footer" class="ui-bar">

        <div data-role="controlgroup" data-type="horizontal">

         <a href="index.html" data-role="button"> One </a>

         <a href="index.html" data-role="button"> Two </a>

         <a href="index.html" data-role="button"> Tres </a>

         <a href="index.html" data-role="button"> Ninguno </a>

        </div>      

       </div>

      </center>



    </div>

</div>



<div data-role="page" id="page2">

:

:

</div>



</body>

</html>

El resultado del código anterior se puede observar en la siguiente figura.

Referencias:

[1] http://www.ibm.com/developerworks/library/wa-jquerymobileupdate/index.html
[2] http://jquerymobile.com/demos/1.2.0/
[3] http://the-jquerymobile-tutorial.org/

Breve reseña de jQuery Mobile

Introducción

jQuery Mobile es un excelente Framework para la creación de aplicaciones web para dispositivos móviles. Desarrollado en base al popular jQuery y su interfaz de usuario (UI), jQuery Mobile es un Framework eficaz y unificado para escribir aplicaciones web para móviles. Con jQuery Mobile se puede asegurar del diseño y comportamiento persistente a través de diferentes plataformas móviles. Las características básicas de jQuery Mobile incluyen:

Simplicidad y flexibilidad general: El Framework es fácil de usar. El desarrollador puede:

Desarrollar páginas utilizando principalmente etiquetado manejado con poco o sin Javascript.
Uso de JavaScript avanzado y eventos.
Uso de un único documento HTML con múltiples páginas embebidas.
División de la aplicación en varias páginas.

Mejora progresiva y la degradación agraciada: Mientras jQuery Mobile aprovecha lo último de HTML5, CSS 3 y JavaScript, no todos los dispositivos móviles cuentan con soporte para estas tecnologías. La filosofía de jQuery Mobile es apoyar a tanto dispositivos de gama alta y de menor capacidad, como los que no tienen soporte de JavaScript y aun así proporcionar la mejor experiencia posible.

Soporte para el tacto y otros métodos de entrada: jQuery Mobile proporciona soporte para diferentes métodos de entrada y eventos: el tacto, el ratón y el cursor de enfoque basados en los métodos de entrada de usuario.
Accesibilidad: jQuery Mobile se ha diseñado pensando en la accesibilidad. Tiene soporte para Aplicaciones de Internet Enriquecidas Accesibles (WAI-ARIA) para ayudar a hacer páginas web accesibles para los visitantes con discapacidades que utilicen tecnologías de asistencia.
Ligero y modular: El Framework es ligero, con un tamaño total (miniaturizada y comprimido para la versión 1.0.1) de 24KB para la biblioteca JavaScript 7KB para la CSS, además de algunos iconos.
Tematización: El Framework también proporciona un sistema temático que le permite utilizar y definir su estilo propio. Con la nueva aplicación ThemeRoller el desarrollador puede crear fácilmente sus propios temas.

El Framework de jQuery Mobile incluye todos los componentes de interfaz de usuario necesarios para la construcción de aplicaciones web completas móviles y sitios web: páginas, cuadros de diálogo, barras de herramientas, diferentes tipos de vistas de lista, una gran variedad de elementos de formulario y botones, y mucho más. Además jQuery Mobile se basa en la parte superior del núcleo de jQuery, por lo que tiene acceso a los servicios esenciales, entre ellos: HTML y el modelo de objetos de documento (DOM) XML de desplazamiento y manipulación, gestión de eventos, la comunicación servidor usando Ajax y efectos de animación e imágenes de las páginas web.

Con jQuery Mobile se pueden escribir aplicaciones básicas de Internet móvil sin mucho esfuerzo. Debido a que jQuery Mobile es un Framework muy amplio con eventos avanzados y muchas APIs, también se pueden escribir aplicaciones avanzadas de Internet móvil y sitios web.

Compatibilidad con navegadores móviles

Los navegadores web móviles han recorrido un largo camino, pero no todos los dispositivos móviles ofrecen soporte para HTML5, CSS 3 y JavaScript. En este escenario es donde se puede observar como la consolidación progresiva de jQuery Mobile y el apoyo de la degradación agraciada entran en juego.

jQuery Mobile es compatible tanto con dispositivos de gama alta y menos capaces, como los que no tienen soporte de JavaScript. La “Mejora progresiva” es una filosofía de diseño, consta de los siguientes principios básicos:

Todo el contenido básico debe ser accesible a todos los navegadores.
Toda la funcionalidad básica debe ser accesible a todos los navegadores.
Disposición mejorada mediante CSS’s externamente vinculadas.
Comportamiento mejorado mediante JavaScript externamente vinculadas.
Las preferencias del navegador del usuario se respetan.

Todo el contenido básico debe representarse (según el diseño) en los dispositivos básicos, mientras que en las plataformas y navegadores más avanzadas se deben mejorar el contenido progresivamente con el uso de JavaScript y CSS.

jQuery Mobile proporciona soporte para un gran número de dispositivos móviles. jQuery Mobile clasifica (o agrupa) los dispositivos soportados en tres categorías en función de su nivel de soporte:

Grado A: Los dispositivos con soporte para una experiencia totalmente mejorada con Ajax basadas en transiciones de página animadas. jQuery Mobile es compatible con más de 20 dispositivos diferentes, incluyendo: iOS 3.2 a 5.0; Android 2.1-2.3 y 3.0, BlackBerry Playbook y 6-7; Skyfire 4.1, Opera Mobile, y el escritorio navegadores Chrome, Firefox, Internet Explorer y Opera.
Grado B: Los dispositivos con soporte para una experiencia mejorada pero sin las funciones de Ajax de navegación. Los dispositivos compatibles incluyen: BlackBerry 5.0, Opera Mini 5.0-6.5, y Nokia Symbian.
Grado C: Los dispositivos con soporte básico que utilizan solo HTML. Los dispositivos compatibles incluyen: la mayoría de los Smartphone BlackBerry, incluyendo 4.x, Windows Mobile, entre otros.

Referencias:
[1] http://www.ibm.com/developerworks/library/wa-jquerymobileupdate/index.html
[2] http://jquerymobile.com/demos/1.2.0/
[3] http://the-jquerymobile-tutorial.org/

21 de septiembre de 2013

Aplicaciones Móviles Web: Ventajas y Desventajas

Aplicaciones Móviles Web

La principal característica de las aplicaciónes móviles Web es que son Multiplataforma. Aunque se requieran algunos ajustes, una aplicacion móvil Web funciona generalmente en todos los dispositivos móviles. La tecnología utilizada en este tipo de aplicaciones es más sencilla que la necesaria para desarrollar aplicaciones nativas, teniendo la opcion de utilizar lenguajes como HTML5, JS o CSS. En consecuencia es mucho más extendida, popular y general.

Debido a que funcionan con independencia de los canales de distribución de operadores y fabricantes, no se someten a ningún control, ni en la publicación inicial ni en las posteriores actualizaciones, como sucede por ejemplo con las aplicaciones en el App Store, Play Store o Marketplace. Por tanto, no hay revisión de las versiones que se publiquen, y las actualizaciones llegan de manera automática a todos los usuarios y plataformas a la vez.

Relacionado con lo anteriormente mencionado, la independencia del canal de distribución permite un mayor control de la política de precios sobre la distribución de contenidos desde la aplicación (in-App), evitando los rangos fijos, como los que tiene establecidos el App Store. Adicionalmente a la libertad en la política de precios, una aplicación móvil Web permite implementar uno o varios mecanismos de pago diferentes y de esta manera no tener que pagar las altas comisiones de las tiendas de aplicaciones (alrededor del 30%). Como inconvenientes, la descentralización del Store implica un mayor esfuerzo de marketing para que los usuarios tengan conocimiento de la disponibilidad de la aplicación, además de necesitar más recursos para distribuir la aplicación.

Teniendo en cuenta las características mencionadas, para desarrollar una aplicacion móvil es necesario ajustar el desarrollo al tipo de aplicación que ofrezca mayores prestaciones para el tipo de contenido, objetivo y funcionalidad. Es decir, aplicaciones como Páginas Amarillas o GasAll, cuya funcionalidad principal es la utilización del GPS integrado para determinar qué establecimientos o gasolineras están más cerca, en función de la posición del usuario, no tendrían sentido como aplicación web.

Por el contrario, tenemos el ejemplo de un sector tan influyente como el editorial, como la cara más visible de una tendencia que se va asentando. Ante la negativa de aceptar las condiciones de Apple, se decantan por las aplicaciones web basadas en HTML5. El caso más escuchado es el Financial Times. Después de varios meses de tira y afloja, Apple ha optado por retirar la aplicación de esta cabecera de prácticamente todos los Stores. El detonante, la normativa relativa a la suscripción de contenidos, puesto que las Guidelines de Apple obligan a realizarlas a través del Store y, de esta manera, retienen el 30% de los beneficios generados. Dado que la funcionalidad de la aplicación del Financial Times no requiere de las prestaciones del iPhone o del iPad, al optar por una aplicación web evitan las revisiones de Apple y, al mismo tiempo, consiguen que los suscriptores accedan al contenido desde cualquier dispositivo y que el beneficio obtenido con las suscripciones de los usuarios se quede íntegramente en sus arcas.

5 de septiembre de 2013

DroidExplorer en Windows 7 (x64)

DroidExplorer es un programa muy útil para los desarrolladores de Android puesto que permite entre muchas cosas explorar el sistema de archivos del dispositivo móvil con Android, tomar capturas de pantallas, obtener videos, acceder a la bases de datos de las aplicaciones, etc.

DroidExplorer puede ser descargado de la siguiente liga http://de.codeplex.com/.

Existen muchos tutoriales que muestran como se utiliza e instala dicho programa, pero el motivo de esta entrada es porque existe un error cuando se trata de utilizarlo en Windows 7 (64 bits). Durante la instalación de DroidExplorer se nos pide indicar la ruta del Android SDK (1) o también ofrece la opción para descargarlo (2).

En mi caso ya tengo instalado el Android SDK es por ello que coloque la dirección al mismo. El problema comienza después de que el DroidExplorer se ejecuta porque muestra el siguiente error "Unable to identify the specified path as a valid Android SDK directory". Dicho error se corrige siguiendo los siguientes pasos:

Se debe abrir la dirección donde se encuentra el Android SDK e ingresar a la siguiente sub carpeta "C:\Users\...\AppData\Android\android-sdk\build-tools\17.0.0".
Copiar el ejecutable aapt.exe a la carpeta "C:\Users\...\AppData\Android\android-sdk\platform-tools" del Android SDK.

Después de realizar lo anterior dicho error debería corregirse. En el caso de Windows 7 curiosamente ocurre otro error que está relacionado a que DroidExplorer no encuentra una imagen PNG.

Para solucionar este nuevo error se debe realizar un procedimiento similar al anterior. A continuación se muestran los pasos a seguir:

Se debe abrir la carpeta donde se instalo el DroidExplorer y copiar la sub carpeta nombrada assets.
Pegar la carpeta assets dentro de la carpeta "C:\Users\...\AppData\Roaming\DroidExplorer".

De esta forma se corrigen estos dos problemas de DroidExplorer, debería aparecer la siguiente ventana para seleccionar el dispositivo móvil con el que trabajara el programa.

24 de julio de 2013

PLATAFORMAS DE DESARROLLO PARA ANDROID

Android SDK

Figura 1.- Android SDK corriendo sobre Ubuntu.

El SDK de Android incluye un conjunto de herramientas de desarrollo: el depurador de código, una biblioteca, un simulador de teléfono basado en QEMU, documentación, ejemplos de código y tutoriales. Entre los SO soportados se incluyen a Linux, Max OS X 10.4.9 o posterior, y Windows (XP o posterior). El IDE soportado oficialmente es Eclipse junto con el complemento ADT (Android Development Tools plugin), aunque también puede utilizarse un editor de texto y con la ayuda de comandos en una terminal (se necesitan los paquetes JDK, Java Development Kit y Apache Ant) se crean y depuran las aplicaciones. Otra característica de este SDK es que pueden controlarse dispositivos Android que estén conectados a la computadora (e.g. reiniciarlos, instalar aplicaciones en remoto).

Las Actualizaciones del SDK están coordinadas con el desarrollo general de Android. El SDK soporta también versiones antiguas de Android, por si los programadores necesitan instalar aplicaciones en dispositivos ya obsoletos o más antiguos. Las herramientas de desarrollo son componentes descargables, de modo que una vez instalada la última versión, pueden instalarse versiones anteriores y hacer pruebas de compatibilidad.

Una aplicación Android está compuesta por un conjunto de ficheros empaquetados en formato .apk y guardada en el directorio /data/app del sistema operativo Android (este directorio necesita permisos de root, por razones de seguridad). Un paquete APK incluye ficheros .dex (ejecutables Dalvik, un código intermedio compilado), recursos, etc.

Android Studio

Figura 2.- Android Studio con Emulador integrado.

Android Studio es un entorno de desarrollo basado en IntelliJ IDEA. Siendo similar a Eclipse con el plugin ADT, Android Studio también proporciona herramientas integradas para el desarrollo y depuración de errores.

De las mejores capacidades esperadas de IntelliJ, Android Studio ofrece entre otras cosas:

Soporte para diseño basado en cuadriculas.
Asistente basado en plantillas para la creación de diseños y componentes comunes de Android.
Un editor de Layouts que permite el arrastrar y pegar de componentes de UI.
Un editor WYSIWYG.

La versión mas reciente de Android Studio es la 0.20 lo que significa que es una versión beta. En la página de Android Developers se indica que debido a que Android Studio se encuentra en desarrollo, muchas funciones están inhabilitadas y que tiene errores.

Native Development Kit (NDK)

Figura 3.- Interfaz y emulador del NDK.

El NDK permite instalar bibliotecas escritas en C y otros lenguajes, una vez compiladas para ARM o código x86 nativo. Los programas Java corriendo en la máquina virtual Dalvik (Dalvik VM) pueden llamar a clases nativas por medio de la función System.loadLibrary, que forma parte de las clases estándar Java en Android.

Se pueden compilar e instalar aplicaciones completas utilizando las herramientas de desarrollo habituales. El depurador ADB proporciona un shell root en el Simulador de Android que permite cargar y ejecutar código nativo ARM o x86. Este código puede compilarse con GCC en un ordenador normal. La ejecución de código nativo es difícil porque Android utiliza una biblioteca de C propia (libc, llamada Bionic). Se accede al dispositivo gráfico como un framebuffer disponible en /dev/graphics/fb0. La biblioteca gráfica que utiliza Android para controlar el acceso a este dispositivo se llama Skia Graphics Library (SGL), disponible con licencia de código abierto. Skia tiene implementaciones en win32 y Unix, permitiendo el desarrollo cruzado de aplicaciones, y es el motor de gráficos que soporta al navegador web Google Chrome.

App Inventor para Android

Figura 4.- App Inventor es un entorno visual Web de desarrollo para Android.

Google anunció en julio de 2010 la disponibilidad de App Inventor para Android, que es un entorno de desarrollo visual Web, para programadores novatos, basado en la biblioteca Open Blocks Java, del MIT. Este entorno proporciona acceso a funciones GPS, acelerómetro y datos de orientación, funciones de teléfono, mensajes de texto, conversión habla a texto, datos de contacto, almacenamiento permanente y servicios Web, incluyendo inicialmente Amazon y Twitter.

Hal Abelson, director del proyecto en el MIT, dijo: "Sólo hemos podido hacerlo porque la arquitectura Android es tan abierta". Después de un año de desarrollo, la herramienta de edición de bloques se ha utilizado para enseñanza a principiantes en ciencias de computación en Harvard, MIT, Wellesley, y en la Universidad de San Francisco, donde el profesor David Wolber desarrolló un curso de introducción a la ciencia de los ordenadores y un libro de enseñanza para estudiantes que no estudian computación, basado en App Inventor para Android.

HyperNext Android Creator (HAC)

Figura 5.- HAC es un entorno visual de desarrollo para programadores novatos.

HyperNext Android Creator (HAC) es un sistema de desarrollo de programas dirigido a programadores novatos, permitiéndoles crear sus propias aplicaciones sin necesitar conocimientos de Java y del SDK de Android. Está basado en HyperCard, que gestiona el software como una pila de tarjetas en la que sólo una de ellas es visible en un momento dado y por tanto encaja bien en aplicaciones para teléfonos móviles, con una sola ventana disponible a la vez.

El lenguaje principal de desarollo se llama simplemente HyperNext y está relacionado con el lenguaje de HyperCards HyperTalk. HyperNext es un intérprete de un lenguaje similar al inglés y tiene muchas funciones para crear aplicaciones Android. Soporta un subconjunto creciente del SDK de Android incluyendo sus propias versiones de controles gráficos de interfaz de usuario (GUIs) y ejecuta automáticamente su propio servicio, de forma que las aplicaciones pueden continuar ejecutándose y procesando información, sin estar en el frontal del usuario.

El proyecto Simple

El objetivo de Simple es ser un lenguaje fácil de aprender para la plataforma Android. Simple es un dialecto de BASIC para Android. Sirve tanto para progrAamadores profesionales como aficionados permitiendo escribir rápidamente aplicaciones que utilizan los componentes de Android.

Parecido a Visual Basic 6 de Microsoft, los programas Simple consisten en definiciones de formularios (que contienen componentes) y código (con la lógica del programa). La interacción entre ellos se hace por medio de eventos lanzados por los componentes. La lógica del programa consiste en gestores de eventos, que ejecutan código dependiendo del evento.

El proyecto Simple no tiene mucha actividad. La última actualización de código se realizó en agosto de 2009. Existe un producto comercial parecido llamado Basic4android, inspirado en Visual Basic 6 y Microsoft Visual Studio. Este proyecto si tiene actividad y hay una comunidad sólida de programadores.

Referencias

[1] http://es.wikipedia.org/wiki/Desarrollo_de_Programas_para_Android

[2] http://applicantes.com/una-herramienta-gratuita-para-desarrollar-apps-en-ios-y-android/