December 17, 2012

APLICACIONES NATIVAS vs HTML5

¿En qué lenguaje programar nuestra aplicación?



Esta pregunta cada vez empieza a ser más común entre desarrolladores y empresas que desean crear sus propias aplicaciones. Y es que a pesar de que HTML5 nos proporciona una aplicación multiplataforma  que funcione en cualquier sistema operativo y cualquier versión nos encontramos unas cuantas limitaciones que hacen que nuestra aplicación no consiga rendir al 100%. Podríamos decir que HTML5 esta perdiendo terreno respecto a las apps nativas. El más reciente ejemplo es el caso de Facebook.   

Declaraciones de Marc Zuckerberg, creador y CEO de Facebook:
“El mayor error que hicimos como empresa fue apostar demasiado por las aplicaciones en HTML5 en lugar de las nativas…desperdiciamos dos años. (…) Apostaremos completamente a las aplicaciones nativas en iOS y Android.”

Para responder a nuestra pregunta vamos a mostrar una comparativa entre las ventajas de una app nativa y una app en HTML5.



Aplicaciones nativas:


- En primer lugar debemos destacar que permiten explotar al máximo las prestaciones integradas en los dispositivos ya sea GPS, acelerómetro, imágenes, audio, vídeo, 3D... Aprovechamos nuestro dispositivo al 100% .

- Podemos beneficiarnos de los canales de distribución de los stores de cada plataforma. Desde el punto de vista de marketing es una característica muy importante pues nos permite difundir y promocionar mśs nuestra app, dandole opción a mucha más gente de acceder a ella. Con lo que conlleva también la actualización de la app y el uso de notificaciones push, podemos tener informado al usuario de cualquier noticia, promoción... Además contamos con que la app a pasado un control y unos requisitos impuestos por cada plataforma por lo que nos aseguramos que es compatible con nuestro dispositivo.

- Una app nativa puede funcionar sin estar conectada a la red, el modo off-line es una gran ventaja y esque permite la sincronización y el cacheo de datos para conseguir que la aplicación funcione en modo off-line. También hay que decir que HTML5 dispone de este modo pero los resultados no son del todo buenos.

- Las compras son una ventaja ya que las realizamos desde el usuario del dispositivo y no necesitamos facilitar datos de nuestra tarjeta de crédito. Es una manera de comprar mucho más fácil y más segura.

- Y por último una de las características más importante es la experiencia de usuario que se consigue con una app nativa. El rendimiento de la app es mucho más rápido y genera un menor número de basura pues se a conseguido separar la carga de datos de la de interfaz. Este es un punto fundamental para aplicaciones con mucho contenido como es el caso de Facebook, permite cargar imágenes, vídeos y cualquier tipo de contenido con mucha más velocidad que una app web. La navegación es mucho más cómoda e intuitiva. En general la aplicación aprovecha al máximo las capacidades del dispositivo.

Aplicaciones HTML5:


- La principal ventaja de desarrollar aplicaciones web es que son multiplataforma. Pueden ser visualizadas desde cualquier dispositivo móvil. Pero nos encontramos con un problema y esque el unificar todas las plataformas hace que la aplicación contenga un número elevado de limitaciones, esto hace que la usabilidad y las prestaciones de la app disminuyan.

- La programación en HTML es mucho más sencilla y se necesitan menos recursos, en cambio programar en nativo requiere mayores recursos y para cada una de las plataformas en particular.

- Estas apps no se someten a ningún control ya que no pertenecen a la plataforma, al contrario que en Android, IOS..., además las actualizaciones se establecerán automáticamente a todos los usuarios a la vez.

- La interfaz de la aplicación es completamente distinta a una nativa, esto hace que la aplicación no parezca integrada a la plataforma o dispositivo, es posible disimularlo pero los resultados no llegan a ser iguales. Por otro lado, del rendimiento tenemos que decir que que es menor y a medida que los contenidos de la app van aumentando el rendimiento de la app es menor.


Para contestar a la pregunta del principio, podemos decir que depende de las necesidades que tengamos. Si buscamos una app sencilla, rápida y económica, que sea fácil de utilizar por el mayor número de personas, nos decantaremos por una web móvil. Si lo que buscamos es una app de calidad, profesional,que ofrezca un gran rendimiento, que busque explotar al máximo el potencial y las prestaciones de nuestro dispositivo y que además este disponible en los markets para una mayor difusión necesitaremos crear un app nativa. Últimamente esta última opción es la más utilizada por las grandes empresas ya que buscan de su empresa la mejor imagen posible hacia el usuario.

En eMobc consideramos que todas las posibilidades son buenas dependiendo de la necesidad de cada uno, por lo que ofrecemos ambos servicios, web móvil y app nativa. Contacta con nosotros y solicita un proyecto

eMobc mobile for everyone

Aitor García 
Equipo eMobc


December 5, 2012


Cómo Crear una Nueva Pantalla en IOS

Antes de empezar con el manual de como crear una nueva pantalla en IOS, vamos a puntualizar que este manual no incluye la lógica de la pantalla sólo incluye los pasos para conseguir que nuestro framework tenga y pueda cargar una nueva pantalla.
Para crear un nuevo estilo de pantalla lo primero que tenemos que hacer es una pantalla que esté vacía, es decir, que sólo tenga lo básico para poder funcionar.
Para nuestro ejemplo vamos a tomar una plantilla que se puede corresponder con una de las pantallas básicas.

Pasos para crear una nueva pantalla de IOS en el framework:

Crear los archivos correspondientes para guardar los datos de nuestra aplicación.

Puesto que contienen los datos de la aplicación, es dentro de este fichero donde tenemos que declarar todos los datos que nuestra aplicación va a necesitar para funcionar. Estos archivos deben estar dentro de la carpeta DATA y tendrán los siguientes nombres:

*nuevaPantallaLevelData.h
*nuevaPantallaLevelData.m



Crear los nuevos niveles para nuestra pantalla.

El Level será el encargado de añadir los datos de la pantalla en el array de la clase padre, de la clase que contiene los datos de la aplicación.
En nuestro caso sólo contendrá un método (como todos los Level) que los añadirá a una lista y a un diccionario de la aplicación
Nuestros Archivos están en la carpeta LEVEL con los nombres de:

nuevaPantallaLevel.h
nuevaPantallaLevel.m



Crear el xib de nuestra pantalla.

Es decir, tenemos que crear el aspecto de nuestra pantalla. Siguiendo el razonamiento de ir copiando los archivos que dan forma a una plantilla básica bastará con copiar el mismo xib y pegarlo dentro de la carpeta XIB.
A la hora de personalizar nuestra pantalla tendremos que incluir en el xib aquellos componentes que necesitemos para crear el aspecto de la pantalla que necesitemos.
El nuevo archivo tendrá el nombre de:

NwNuevaPantallaController.xib

Crear el nuevo controlador para que dirija nuestra interfaz.

Debido a que hemos creado un nuevo xib, le tenemos que asociar a un nuevo controlador.

El controlador es quién se encarga de llevar toda la lógica de la pantalla.
Como queremos que crear una nueva pantalla tenemos que crear un nuevo controlador aunque de momento sólo vamos a copiar el controlador de la pantalla de plantilla renombrandolo para que nos quede de la siguiente manera:

NwNuevaPantallaController.h
NwNuevaPantallaController.m

Si queremos personalizar nuestra pantalla tendremos que incluir dentro de estos archivos los métodos necesarios para que la nueva pantalla se comporte como queremos.
En este punto no sólo vamos a tener que crear los ficheros de los controladores si no que le tenemos que decir al sistema que cuando cargue la Vista de nuestra pantalla cargue también su controlador.

Para ello tenemos que abrir el xib y abrir el Inspector sobre el File’s Owner.
Cuando lo tengamos abierto nos vamos a la última pestaña, Identity (comando-4) y cambiamos la pestaña de clase donde le vamos a poner el nuevo controlador que hemos creado. De esta manera lo que estamos haciendo es decirle al Owner de nuestra Vista que necesita de nuestro nuevo controlador para funcionar.

El File’s Owner es el encargado de cargar el xib. Podemos decir que es el que enlaza la parte gráfica de nuestra pantalla con la parte de código bien sea el controlador como los eventos (IBAction) y los componentes (IBOutLet)

Modificar el archivo de AppLevel.h

AppLevel contiene todos los tipos de pantalla que hasta ahora soportaba el framework, para que el framework reconozca el nuevo tipo de pantalla que estamos creando tenemos que añadir a la variable de tipo enumerado ActivityType el nuevo tipo que representará a la nueva pantalla en nuestro caso sería así:

NUEVAPANTALLA_ACTIVITY



De esta manera cuando queramos navegar hasta nuestra nueva pantalla podremos reconocerla e invocar a los métodos específicos que me indicaran el controlador a usar, el parser o el xml asociados

Ahora nos vamos a la clase nwUtil

Esta clase es la que se encarga de dado el tipo de actividad invocar al método que indica el parser a utilizar, para conseguir esta funcionalidad tenemos que seguir los siguientes pasos:
  • Lo primero que tenemos que hacer es irnos a nwUtil.h y declarar un nuevo método que nos ayudará a elegir el parser adecuado para nuestra pantalla, el propio de la pantalla.
  • readNuevaPantallaData
  • Después de haber añadido el nuevo método en la cabecera de nuestro archivo, vamos a seguir estos dos pasos:
  • Implementar el método readNuevaPantallaData, que será el encargado de cargar todos los datos del xml en la nueva pantalla (para ello para empezar y puesto que todos siguen la misma estructura, podemos copiar el método correspondiente a nuestra plantilla)





  • Añadir al método readAppLevelData la opción necesaria para cuando le entre nuestro tipo de pantalla (NUEVAPANTALLA_ACTIVITY) pueda llamar al método antes implementado.



El eMobcViewController es el encargado de invocar al método adecuado para poder cambiar de nivel, es decir cambiar de pantalla y asociar el controlador adecuado.
Para conseguir que el eMobcViewController pueda llamar al controlador de nuestra nueva pantalla tenemos que crear los siguientes métodos con su correspondiente definición en la cabecera.
Puesto que la estructura de estos métodos es la misma prácticamente para todos podemos tomar los métodos correspondientes a nuestra plantilla y ajustarlos a la nueva pantalla


  • Dentro de eMobcViewController tenemos que definir e implementar los siguientes métodos. Para ello y puesto que la estructura es semejante en todos podemos tomar los métodos asociados a la plantilla y cambiar aquello que sea específico a de cada pantalla.
  • loadNuevaPantallaNextLevel, carga el nuevo nextLevel y su correspondiente controlador, es decir, invoca a loadNuevaPantallaController



  • loadNuevaPantallaController, carga el nuevo controlador



  • Para conseguir que se llame al NextLevel de nuestra pantalla y que se le asocie el controlador adecuado tenemos que modificar:
  • showNextLevel, dentro de este métodos tenemos que añadir otra opción dentro del case que soporte el nuevo tipo de actividad y que cuando le entre este tipo invoque al método de loadNuevaPantallaNextLevel



Llegados a este punto tenemos que modificar el app.xml añadiendo la nueva actividad, es decir, sabemos que el app.xml es el xml que va a tener la información de todo (o casi todo) lo que puede hacer el framework.
No sólo eso sino que es al app.xml donde vamos a ir a buscar los demás ficheros xml cuando queramos cargar un nuevo nextLevel.
Debido a ello tenemos que añadir un nuevo nivel donde tenemos que indicar el nuevo tipo de actividad (NUEVAPANTALLA_ACTIVITY),el levelID, y el levelFile que será el nombre del archivo xml asociado con nuestra nueva pantalla.



Modificado el app.xml tenemos que tomar el nombre que le hemos puesto dentro de la etiqueta levelFile y crear así el xml que va a definir los datos de nuestra pantalla.
Como lo que estamos haciendo simplemente es incluir una nueva pantalla en el framework y siguiendo el procedimiento de tomar la plantilla para conseguir una rápida integración, en este caso sólo será necesario tomar el xml asociado a nuestra plantilla. Podemos llamar al nuevo xml de la siguiente manera:
  • nueva_pantalla.xml
Tenemos que tener en cuenta que cuando queramos personalizar nuestra pantalla tendremos que crear un xml ajustado a sus necesidades, de tal manera que podamos definir una nueva pantalla con los datos correspondientes.
Cabe destacar que los xml no son implementados por nosotros a mano, si no que son generados por el panel de control.
Llegados a este punto y recien modificado el app y creado nueva_pantalla.xml, tenemos que modificar AppParser (asociado al app.xml) y además tenemos que crear un nuevo parser para que pueda leer el xml que tendrá nuestra nueva pantalla.


  • AppParser, será el encargado de parsear app.xml por lo que si hemos añadido nuevas etiquetas (en este caso el nuevo tipo de actividad) se lo tendremos que indicar, para que cuando lo lea pueda reconocerla, así que le tendremos que añadir esta nueva constante como:
  • kActTypeNuevaPantalla = @”NUEVAPANTALLA_ACTIVITY”



NuevaPantallaParser, este será el parser que esté asociado a la nueva pantalla. Debido a ello este parser tiene que contener una constante por cada etiqueta del xml que queramos reconocer, y una acción que se corresponda con la lectura del valor de la etiqueta.
Como lo que estamos haciendo es una rápida integración, bastará con copiar el parser asociado a nuestra plantilla. No debemos olvidar que si queremos personalizar la pantalla vamos a tener que crear un nuevo parser que sea capaz de leer el xml específico de la nueva pantalla. Para crearlo, tenemos que saber que todos los parser siguen una estructura fija por lo que conviene seguirla, para saber más acerca de las estructuras de los parser, ve al capítulo de Estructura de Parser.


Si hemos seguido todos los pasos anteriores y si no hemos tocado el código de todos los ficheros que hemos copiado tendremos que tener una copia de la pantalla que hemos tomado como plantilla sólo que con diferente nombre.
Para ver si realmente nuestra pantalla ha quedado integrada (aunque de momento sea una copia de otra) sólo tendremos que modificar (por ejemplo) el xml de la portada para que sea capaz de cargar como nextLevel nuestra nueva pantalla.


Aitor García
Equipo eMobc

Crear un nuevo tipo de pantalla (Android)


Si necesita crear un nuevo tipo de pantalla porque ninguna de las existentes se adapta a sus necesidades, puede crear una nueva siguiendo los pasos que se muestran a continuación:


Paso 1: Tipo de actividad

Añadir nuevo caso al enumerado ActivityType dentro del paquete com.emobc.android. El nuevo caso es el nuevo tipo de pantalla.


ACTIVITY_NAME_ACTIVITY

Paso 2: Crear y definir un XML

Es necesario definir el xml para el nuevo tipo de pantalla. Tendría que incluir todos los datos necesarios para poder construir la pantalla. Es posible reutilizar alguno existente.


Paso 3: Crear datos de la aplicación

Crear los datos que se usarán en tiempo de ejecución por la aplicación. Estos datos serán clases que almacenan toda la información contenida en los xml previamente definidos.
Las clases de datos están almacenadas en neurowork.mobile.android.fw.levels.impl.

<NAME>LevelDataItem.java
<NAME>DataItem.java

Paso 4: Añadir parser

  • Crear un nuevo método dentro de ParseUtils.java para parsear el archivo xml del nuevo tipo de pantalla.

private static Map<String, Object> parse<ACTIVITY_NAME>LevelDataFile(XmlPullParser xpp)

  • Añadir el nuevo caso dentro del método parseLevelDataFile en ParseUtils.java para que devuelva el nuevo parser creado ante el nuevo tipo de pantalla.

Paso 5: Añadir Activity

  • Si fuera necesario, crear una nueva activity para el nuevo tipo de pantalla que herede de createMenus.

<ActivityName>Activity.java


Es posible reutilizar una activity previamente creada si se adapta a las necesidades del nuevo tipo de pantalla.
IMPORTANTE: Si se crea una nueva Activity, es necesario declararla en Manifest.xml
  • Añadir el nuevo caso al método getActivityClass en AppLevel.java dentro del paquete neurowork.mobile.android.fw.levels donde se devolverá la clase de la actividad creada o la que se reutilizará.
  • Crear el layout correspondiente al nuevo tipo de pantalla.

<activity_type>_layout.xml

Paso 6: Crear ActivityGenerator

  • Crear el nuevo generador de pantalla para el nuevo tipo de pantalla dentro del paquete net.neurowork.mobile.fw.activities.generators

<ActivityName>Generator.java


En esta pantalla incluimos toda la lógica que queremos que tenga nuestra aplicación.
El generator utilizará el tipo de datos del paso 3 para configurar el layout del paso 5.


  • Incluir este nuevo generator en la clase ActivityGeneratorFactory, en el método createActivityGenerator(), añadiendo un nuevo caso.


    Aitor García 
    Equipo eMobc

December 4, 2012


Primeros pasos desarrollo framework android

Empezar a utilizar eMobc framework


1) Descargar el framework de GitHub
https://github.com/emobc/emobc-android


2) Renombrar la carpeta del framework emobc-android por el nombre de vuestra aplicación, vamos a suponer que la realizaremos sobre balonmano.

3) Borrar el contenido de la carpeta assets.


4) Descargar y copiar el samples de balonmano de https://github.com/emobc/emobc-samples/tree/master/balonmano en assets


5) Renombrar el fichero de .project


Abrir eclipse e importar el proyecto



Modificar el proyecto con las versiones que tenemos de Android en local.properties y project.properties.



Mover la imagen de images/icon.png a drawable. (Generar en panel de control)
Hacer un refresh y project clean del proyecto





Por último ejecutar en la máquina virtual de Android


La documentación podéis descargarla desde nuestro repositorio de Github o desde nuestra web.


Aitor García
Equipo eMobc

November 27, 2012


Documentación del framework eMobc para el desarrollo de aplicaciones móviles.

Documentación oficial eMobc


Desde el 26 de noviembre podéis disponer de la documentación correspondiente a Android, IOS y HTML5. Y podréis descargar tanto en formato ODT como en formato PDF.

La documentación publicada corresponde a la versión 0.1 del framework que iremos modificando y mejorando a la vez que evolucione el framework eMobc.

Los objetivos principales de la documentación es cubrir los siguientes puntos:

  • Descripción general: eMobc es un framework que permite generar aplicaciones móviles definidas en embML (nuestro XML ;-)) para distintas plataformas: Android, iOS y HTML5.
    El framework está basado en archivos XML. Una vez se ha definido la aplicación que se quiere crear desde el panel de control, o manualmente, éste genera una serie de archivos XML que describen todas las propiedades, pantallas y funciones que tendrá la aplicación.

    En este apartado también se hablara sobre Levels y Nextlevels, funcionamiento y estructura de la app, asociación de datos de los levels...


  • Tipos de actividades (Pantallas): Descripción de todos los tipos de pantallas del framework, en la
    actualidad contamos con 16 pantallas diferentes entre las que encontramos pantalla de Splash, QR, PDF, Galería fotos, vídeos, mapas, formularios, perfiles...

  • Como crear una pantalla: Ya sea en Android o en IOS dependiendo del documento. Este apartado es una guía de programación para crear un nuevo tipo de pantalla. Muestra en detalle los archivos y métodos que hay que modificar para conseguir que el framework trabaje con el nuevo tipo de ventana apoyándose en un ejemplo concreto .

  • Extender el framework: Conocer como integrar third parties o conocer en detalle todo el funcionamiento interno de eMobc para crear nuevas plataformas (Windows Phone, Blackberry, etc).


La documentación podéis descargarla desde nuestro repositorio de Github o desde nuestra web.

¡Únete a la comunidad y ayúdanos a mejorar la documentación y el framework eMobc!


Aitor García
Equipo eMobc


November 12, 2012

Crear aplicaciones móviles en la universidad

eMobc : Herramienta universitaria para programar apps.
Universitarios creando aplicaciones móviles




Permitir el desarrollo de aplicaciones móviles en el entorno universitario, eso es lo que queremos y podemos alcanzar con el uso de herramientas de acceso libre, como eMobc.com

November 11, 2012

Proyectos Colaborativos de aplicaciones móviles

En eMobc.com puedes participar en proyectos de creación de aplicaciones móviles colaborativas.


Aplicaciones móviles con licencia libre, programadas y diseñadas por grupos de trabajo abiertos, donde cada profesional aporta su trabajo con el fin de conseguir apps útiles a todos los ciudadanos. 

Buscamos programadores y diseñadores

en eMobc estamos en constante búsqueda de programadores y diseñadores de aplicaciones móviles. Estas dos profesiones son la base del desarrollo de herramientas móviles y nunca falta de más un C.V. por sencillo que sea.

Todos tenemos un valor que aportar

embML : Lenguaje común para definir aplicaciones móviles

embML sirve para definir, diseñar y programar aplicaciones móviles con el framework eMobc



Con el lenguaje embML podrás definir estructuras de aplicaciones móviles.
Es muy sencillo de aprender.

November 10, 2012

Crear una aplicación móvil con el framework eMobc : Panel de control básico



¿ Qué hace el panel de control eMobc básico ?

El panel de control es una herramienta web para diseñar de manera gráfica el esqueleto de una aplicación móvil. Su estructura y propiedades básicas. Igualmente sirve para introducir los contenidos ( texto, imágenes, etiquetas, multimedia..) y asignar propiedades a los elementos.

Se simplifica así la manera de trabajar, dando como resultado una estructura válida para poder desarrollar en las 3 plataformas : Android, IOS, Web mediante el framework eMobc




November 9, 2012

Tipos de eMobber

Aquí tenéis unos cuantos tipos de eMobbers.

¿ Cual es el tuyo ?. Únete a la comunidad.  /  www.eMobc.com


Tipos de eMobbers


BetaTester
Es el punto de inicio. Todos somos betatester en este momento. Al utilizar la herramienta podemos descubrir errores o mejoras que realizar en ella. Participa identificándolos y obtén puntos de experiencia.

Participa de betatester en proyectos remunerados, analizando aplicaciones profesionales.

Que es un eMobber

Un eMobber es un miembro activo de la comunidad eMobc



Los eMobbers son una comunidad de estudiantes y profesionales que trabajan en la creación de apps móviles.

Los eMobber son personas que contribuyen a la mejora de las herramientas comunes de trabajo eMobc a la vez que hacen sus aplicaciones móviles : corrigiendo fallos, aportando ideas, introduciendo mejoras..


Las mejoras se publican bajo licencia Affero GPLv3. Son de acceso libre.

El uso compartido de la información es el núcleo de este proyecto.
El objetivo es conseguir una completa herramienta de diseño distribuido de aplicaciones móviles, accesible a todos los profesionales, bajo licencia libre.

Su descarga es libre y gratuita a nivel mundial. Cualquier persona puede contribuir.


eMobc : un framework con bolsa de trabajo


Unificar un framework de programación y una bolsa de trabajo. 

Esa es una parte importante de la idea.
La gente necesita trabajar y ganar dinero.
Existen oportunidades de trabajo en el desarrollo móvil


Y existe gente con buenas ideas y proyectos.

¿ Te gustaría trabajar en el mundo de las apps ?

Hold your horses !! Estamos realizando mejoras importantes :-)

En breve dispondréis de toda la documentación para empezar a conocer por dentro el framework eMobc. Estamos añadiendo mejoras para que dispongáis de todas las facilidades posibles para acceder a ella.



No nos pierdas de vista en Twitter, noticias de última hora.


Únete a la comunidad eMobber aquí,  y podrás acceder a servicios en nube exclusivos para betatester. Plazas limitadas.

Horas en la cuenta atrás...

Disculpad la espera y gracias por vuestro apoyo demostrado :-)



April 9, 2012

Video corporativo de eMobc - español


¡Descubra las ventajas de utilizar eMobc! Reduzca tiempos de entrega, integre con sus procesos de negocio, transforme sus ideas en aplicaciones, comuníquese con sus clientes, gestione sus contenidos. esté presente en todos los dispositivos y formatos... ¡Todo esto y mucho más con eMobc! ;-)

Diseño y desarrollo de aplicaciones móviles

¡Bienvenido al blog de eMobc!

En eMobc diseñamos y creamos aplicaciones móviles. ¿Cómo? Hemos desarrollado eMobc framework para facilitar la creación de aplicaciones móviles de manera rápida y sencilla permitiendo elegir en una plataforma más de 20 tipos de pantallas -¡y creciendo!- que aportan todo tipo de funcionalidad a sus aplicaciones.

Con eMobc no sólo pensamos en el diseño de la solución, sino que aportamos valor haciendo aplicaciones escalables multiplataforma y multiformato. ¡Sí! Para todos los dispositivos, sea HTML5, iPhone, Android, iPad... y de forma nativa, mejorando la experiencia de usuario y la navegación en cada una de las distintas plataformas.

Cree con nosotros su primera aplicación semilla y entre al mundo móvil.