jueves, 4 de diciembre de 2014

VIDEO: CREAR UNA APP CON JQUERYMOBILE Y PHONEGAP BUILD

En el siguiente video te explicamos de forma sencilla, divertida y entendiendo los conceptos aplicados, la manera de crear tu primera APP con Jquery Mobile y PhoneGap Build.

Así explicamos en Appositivas!!!

lunes, 24 de noviembre de 2014

NUESTRA PRIMERA APP. COMPILACION EN PHONEGAP BUILD


En el post anterior creamos nuestra plantilla de jQueryMobile (http://appositivas.blogspot.com/2014/11/plantilla-jquerymobile-en-4-pasos.html) y ahora vamos a incluirle los ficheros necesarios para poder compilarlo en PhoneGap Build.

Como habeis visto en nuestro primer post, no gusta explicarlo todo de forma gráfica y clara. Así que vamos a seguir con nuestro simil de explicar el HTML, CSS y JS usado para crear APPs pero aplicado a las personas. Le llamaremos "persona/APP"

En el post anterior ya le dimos a nuestra persona una esqueleto de APP (a través del index.html), una apariencia exterior de APP (a través del jquerymobile.css) y un pensamiento y comportamiento de app (a través del jquerymobile.js), convirtiéndola en una persona/APP. Pero claro si ahora queremos instalarlo en nuestros dispositivos móviles vamos a necesitar:
  • Herramientas que nos compilen nuestra APP para poder ser instalada en todo tipo de dispositivos.
  • Herramientas que le permitan a nuestra APP acceder a los recursos de los dispositivos en los que sea instalado.
¿Y como hacemos esto? Pues con PHONEGAP!! PHONEGAP es una herramienta multiplataforma que se basa en la libreria Apache Cordova. Y además nosotros usaremos Phonegap Build que nos permite crear directamente la app en diferentes plataformas en la nube.

Para hacer un simil facil de recordar, vamos a imaginarnos que nuestra persona/APP va una fábrica (llamada Phonegap Build) y allí le dan una caja de herramientas Android, otra IOS y otra Windows Phone, así que nuestra persona/APP está lista para trabajar en una sucursal de Android, IOS o WP, porque tiene ya las herramientas adecuadas. 

En este post veremos que se necesita incluir en nuestra carpeta "MyApp" el archivo "config.xml" en el que vamos a configurar los aspectos fundamentales de nuestra App en cuanta a recursos necesarios, además de incluir la carpeta "res" con los distintos tamaños del logo de la app. Por seguir con el simil, es como decir que nuestra persona/APP, para ser admitida en la fábrica, tiene que ir con su CV bien escrito y con su foto (logo). Este CV será el archivo "config.xml" y la foto la carpeta "res".

 

PASO 1: Creamos una cuenta ADOBE (gratuita)


Lo primero que vamos a hacer es hacernos una cuenta de ADOBE porque la vamos a necesitar para poder compilar nuestra App en Phonegap Build.

Entramos en: https://build.phonegap.com/ y hacemos los pasos que se explican en esta imagen:




Una vez tenemos nuestra cuenta de Adobe para PhoneGap Build vamos a modificar nuestra plantilla de jQueryMobile.


PASO 2: Incluimos referencia a Cordova.js en el index.html

Es necesario incluir la referencia a "cordova.js" en el <meta> del "index.html". Con esto ya no es necesario descargarse e incluir la libreria de Apache/Cordova en ninguna de las carpetas puesto que como vamos a compilarlo con PHONEGAP BUILD el propio proceso nos lo carga.

Incluir en Index.html

<script type="text/javascript" src="cordova.js"></script>

 

PASO 3: Incluimos el archivo "config.xml" en "MyApp"



Es necesario también incluir el archivo "config.xml" donde se configura las distintas opciones de nuestra app. Vamos a copiar el siguiente config.xml que contiene los máximos que puede tener un archivo config.xml:

Config.xml 

 <?xml version="1.0" encoding="UTF-8"?>  
 <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->  
 <widget xmlns   = "http://www.w3.org/ns/widgets"  
     xmlns:gap = "http://phonegap.com/ns/1.0"  
     id    = "com.phonegap.MyApp"  
     version  = "1.0.0">  
   <name>MyApp</name>  
   <description>  
     My first Hybrid App created with Appositivas.
   </description>  
   <author href="http://appositivas.blogspot.com" email="appositivas@gmail.com">  
     Appositivas  
   </author>  
   <!--  
     If you do not want any permissions to be added to your app, add the  
     following tag to your config.xml; you will still have the INTERNET  
     permission on your app, which PhoneGap requires.  
   -->  
   <preference name="permissions"        value="none"/>  
   <!-- Customize your app and platform with the preference element. -->  
   <preference name="phonegap-version"      value="3.5.0" />     <!-- all: current version of PhoneGap -->  
   <preference name="orientation"        value="default" />    <!-- all: default means both landscape and portrait are enabled -->  
   <preference name="target-device"       value="universal" />   <!-- all: possible values handset, tablet, or universal -->  
   <preference name="fullscreen"         value="true" />      <!-- all: hides the status bar at the top of the screen -->  
   <preference name="webviewbounce"       value="true" />      <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->  
   <preference name="prerendered-icon"      value="true" />      <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->  
   <preference name="stay-in-webview"      value="false" />     <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->  
   <preference name="ios-statusbarstyle"     value="black-opaque" />  <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->  
   <preference name="detect-data-types"     value="true" />      <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->  
   <preference name="exit-on-suspend"      value="false" />     <!-- ios: if set to true, app will terminate when home button is pressed -->  
   <preference name="show-splash-screen-spinner" value="true" />      <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->  
   <preference name="auto-hide-splash-screen"  value="true" />      <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->  
   <preference name="disable-cursor"       value="false" />     <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->  
   <preference name="android-minSdkVersion"   value="7" />       <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->  
   <preference name="android-installLocation"  value="auto" />      <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->  
   <!-- Plugins -->  
   <!-- Core plugins -->  
   <gap:plugin name="org.apache.cordova.battery-status" />  
   <gap:plugin name="org.apache.cordova.camera" />  
   <gap:plugin name="org.apache.cordova.media-capture" />  
   <gap:plugin name="org.apache.cordova.console" />  
   <gap:plugin name="org.apache.cordova.contacts" />  
   <gap:plugin name="org.apache.cordova.device" />  
   <gap:plugin name="org.apache.cordova.device-motion" />  
   <gap:plugin name="org.apache.cordova.device-orientation" />  
   <gap:plugin name="org.apache.cordova.dialogs" />  
   <gap:plugin name="org.apache.cordova.file" />  
   <gap:plugin name="org.apache.cordova.file-transfer" />  
   <gap:plugin name="org.apache.cordova.geolocation" />  
   <gap:plugin name="org.apache.cordova.globalization" />  
   <gap:plugin name="org.apache.cordova.inappbrowser" />  
   <gap:plugin name="org.apache.cordova.media" />  
   <gap:plugin name="org.apache.cordova.network-information" />  
   <gap:plugin name="org.apache.cordova.splashscreen" />  
   <gap:plugin name="org.apache.cordova.vibration" />  
   <!-- Third party plugins -->  
   <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->  
   <!--  
     <gap:plugin name="com.phonegap.plugins.barcodescanner" />  
   -->  
   <!-- Define app icon for each platform. -->  
   <icon src="icon.png" />  
   <icon src="res/icon/android/icon-36-ldpi.png"  gap:platform="android"  gap:qualifier="ldpi" />  
   <icon src="res/icon/android/icon-48-mdpi.png"  gap:platform="android"  gap:qualifier="mdpi" />  
   <icon src="res/icon/android/icon-72-hdpi.png"  gap:platform="android"  gap:qualifier="hdpi" />  
   <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android"  gap:qualifier="xhdpi" />  
   <icon src="res/icon/blackberry/icon-80.png"   gap:platform="blackberry" />  
   <icon src="res/icon/blackberry/icon-80.png"   gap:platform="blackberry" gap:state="hover"/>  
   <icon src="res/icon/ios/icon-57.png"      gap:platform="ios"    width="57" height="57" />  
   <icon src="res/icon/ios/icon-72.png"      gap:platform="ios"    width="72" height="72" />  
   <icon src="res/icon/ios/icon-57-2x.png"     gap:platform="ios"    width="114" height="114" />  
   <icon src="res/icon/ios/icon-72-2x.png"     gap:platform="ios"    width="144" height="144" />  
   <icon src="res/icon/webos/icon-64.png"     gap:platform="webos" />  
   <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />  
   <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"  gap:role="background" />  
   <!-- Define app splash screen for each platform. -->  
   <gap:splash src="res/screen/android/screen-ldpi-portrait.png"    gap:platform="android" gap:qualifier="port-ldpi" />  
   <gap:splash src="res/screen/android/screen-mdpi-portrait.png"    gap:platform="android" gap:qualifier="port-mdpi" />  
   <gap:splash src="res/screen/android/screen-hdpi-portrait.png"    gap:platform="android" gap:qualifier="port-hdpi" />  
   <gap:splash src="res/screen/android/screen-xhdpi-portrait.png"   gap:platform="android" gap:qualifier="port-xhdpi" />  
   <gap:splash src="res/screen/blackberry/screen-225.png"       gap:platform="blackberry" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait.png"     gap:platform="ios"   width="320" height="480" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png"   gap:platform="ios"   width="640" height="960" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"   width="640" height="1136" />  
   <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"   width="768" height="1024" />  
   <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"   width="1024" height="768" />  
   <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"   gap:platform="winphone" />  
   <gap:config-file platform="ios" parent="CFBundleShortVersionString">  
   <string>100</string>  
   </gap:config-file>  
   <!--  
     Define access to external domains.  
     <access />      - a blank access tag denies access to all external resources.  
     <access origin="*" /> - a wildcard access tag allows access to all external resource.  
     Otherwise, you can specify specific domains:  
   -->  
   <access origin="*"/>  
   <!--  
     <access origin="http://phonegap.com" />          - allow any secure requests to http://phonegap.com/  
     <access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/  
     <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.  
   -->  
 </widget>  


Como hemos dicho este config.xml contiene los máximos que puede tener un archivo config.xml. 

Explicamos las partes de este archivo:
  • Parte inicial: donde se define la versión, el nombre de la app, descripción y autor.
     xmlns:gap = "http://phonegap.com/ns/1.0"  
     id    = "com.phonegap.MyApp"  
     version  = "1.0.0">  
   <name>MyApp</name>  
   <description>  
     My first Hybrid App created with Appositivas.
   </description>  
   <author href="http://appositivas.blogspot.com" email="appositivas@gmail.com">  
     Appositivas  
   </author>  


  • Parte donde se definen las preferencias: La más importante de estas preferencias es en la que se define la versión de Phonegap que vamos a usar. en este caso la 3.5.0. Simplemente con cambiar la versión que queremos en este archivo estaremos usando una versión nueva de Phonegap (esto es porque Phonegap build nos la va a cargar directamente en nuestra App al compilarla):
<preference name="phonegap-version"      value="3.5.0" />     <!-- all: current version of PhoneGap -->
  • Parte donde se definen los plugins: Se identifican todos los plugins que vamos a necesitar. Puedes encontrar una lista de todos ellos en el siguiente link: https://build.phonegap.com/plugins lo que recomendamos es borrar todos e ir metiendo los plugins que vayamos necesitando en función de nuestra App.
  • Parte donde se definen las imagenes de iconos y splash screens.






    Esto lo incluimos en una carpeta "res". Podemos descargar la carpeta "res" del siguiente enlace que tiene los iconos y pantallas con el logo de phonegap y luego iremos sustituyendo cada una con nuestro logo: http://archive.apache.org/dist/cordova/tools/cordova-app-hello-world-3.6.1.zip . En este zip nos vamos a encontrar una carpeta que se llama "res" y tiene las siguientes subcarpetas:


    Cada una de estas carpetas contiene las imagenes que debes sustituir por las de tu logo.
  • Parte donde se definen los accesos en el caso de que necesitemos conectar con algún sitio esterno. En principio, poniendo la siguiente linea tienes acceso a todos los sitios:
      <access origin="*"/>  

 

PASO 4: Comprobamos la plantilla

Hechos estos pasos, nuestro archivo index.html debe quedar de la siguiente manera:

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 <title>MyApp</title>
        <!--grupo CSS-->
 <link href="css/index.css" type="text/css" rel="stylesheet"/>
        <link href="css/jquery.mobile-1.4.5.min.css" type="text/css" rel="stylesheet"/>
        <!--grupo JavaScript-->
        <script src="js/index.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="cordova.js"></script>

</head>
<body>
 <div data-role="page">   
     <div data-role="header">
      <h1>My APP</h1>        
     </div>        
        <div data-role="main" class="ui-content">
         Content
        </div>        
        <div data-role="footer" data-position="fixed">
         <h4>Footer</h4>
        </div> 
    </div>
</body>
</html>

Y la estructura de carpetas de nuestra plantilla de App para phonegap build queda:



Con esto sólo nos falta comprimirlo en un archivo .zip y subirlo a la página de Phonegap Build!!!

Hecho!! Ya tenemos la app compilada para Android y para Windows Phone. Para IOS no está compilada porque necesitamos el certificado de desarrollador de IOS. Si lo tenemos lo metemos y ya compilará correctamente.

Ahora desde nuestro dispositivo leemos el codigo QR y se nos instalará la App en nuestro dispositivo. 
Esquema Mental by Versión Lunática:


 

 

viernes, 21 de noviembre de 2014

VIDEO: PLANTILLA JQUERYMOBILE EN 53 SEGUNDOS

En el siguiente video te explicamos de forma sencilla, divertida y entendiendo los conceptos aplicados, la manera de crear tu plantila de jQueryMobile en 53 segundos.

Así explicamos en Appositivas!!!



martes, 18 de noviembre de 2014

PLANTILLA JQUERYMOBILE EN 4 PASOS

Pues vamos a ponernos manos a la obra y vamos a crear nuestra primera plantilla para nuestra app híbrida que contruiremos con jQuery Mobile y Phonegap. 
En este Post vamos a crear la plantilla de HTML, CSS y JS con jQueryMobile y a partir de esta plantilla, en el siguiente post, le meteremos los ficheros necesarios para que sea compilada con Phonegap y ya estará lista. Posteriormente le iremos metiendo contenido para darle cuerpo a nuestra app.

 

Aprende HMTL, CSS y JS para poder ser libre 

Lo primero que queremos exponeros es que aqui vamos a realizar esta plantilla explicando las distintas carpetas y el código que vamos a tener en cada una de ellas. No vamos a deciros que hay una botón magico que te vas a apretar y ya está. De hecho, no recomendamos para principiantes las webs en las que te dicen que puedes crear tus propias Apps sin saber código ni programar nada. 

Nuestra teoría es que aprendas un poco de HTML, un poco de CSS, un poco de JavaScript y un poco de Phonegap, por lo menos lo suficiente para saber lo que estás implementando. De este modo sabrás lo que estás haciendo en cada momento y tendrás la autonomía suficiente para poder hacer modificaciones y Apps diferentes en lugar de tener que ceñirte a los frameworks y funciones que te dan hechos y no puedes modificar opciones que te gustaría. Con estos conocimientos bases podrás además utilizar cualquier framework que conozcas o nuevos que salgan y tendrás autonomia para descubrir fallos o probar cosas diferentes.

Asique nuestra recomendación es que aprendas conceptos básicos de HMTL, CSS y JS para poder ser libre y hacer Apps chulas.

 

HMTL, CSS y JS en una persona

Lo siguiente es la explicación, que desde Appositivas, hemos pensado para explicar lo que es el HMTL, CSS y JS de una manera gráfica. Así la explicación llega mejor. La idea sería la siguiente. Si pensamos en una App o una Web como una persona podemos decir que:
  • El HTML es el esqueleto: El esqueleto define la estructura, que en este caso vamos a tener una cabeza, una columna, unas piernas, unos brazos, etc. Y lo que define esta estructura es el HTML.
  • El CSS es el conjunto de elementos externos y ropa que cubre el esqueleto y van a definir el exterior y la apariencia de la persona:  Los músculos de las piernas son diferentes que los de los brazos, la piel tambien es diferente entre unas personas y otras, su color de pelo también, etc. Y lo que define estas diferencias y caracteristicas exteriores es el CSS.
  • El JavaScript (JS) es el cerebro y el sistema nervioso: Las personas se mueven, se emocionan, piensan, reaccionan, reciben y dan información, etc. Y lo que define estos comportamientos es su JS.


 


Plantilla jQueryMobile (4 pasos)

Teniendo claro esto, vamos a empezar con la creación de nuestra plantilla de jQueryMobile en 4 sencillos pasos y luego (en el siguiente post) transformarla con los archivos de phonegap necesarios para poder compilada como App en Phonegap Build para todas las plataformas.

Lo que vamos a hacer es crear un HTML con estructura de APP, meterle un CSS que le de apariencia de APP (jQueryMobile.css) y unos archivos JS que le den pensamiento y comportamiento de APP.

 

Paso 1: Creamos la estructura de carpetas y ficheros

Creamos en nuestro disco duro una carpeta que llamaremos "MyHybridApps" (donde guardaremos las Apps que vayamos creando) y dentro otra carpeta llamada "MyApp" (mi primera App que me servirá de plantilla para crear todas las demás) donde vamos a ir guardando nuestros ficheros. Creamos la carpeta "css" y "js" dentro de "MyApp".



Ahora vamos a empezar a manejar ficheros htm, css y js y para eso tenemos que descargar un editor de texto. Se puede utilizar cualquiera que os guste o conozcais. El que vamos a usar aqui es "Sublime Text" que podemos descragar aqui: http://www.sublimetext.com/2

Os dejo tambien este enlace con un manual rápido del sublime text que te dice como instalarlo y lo básico: http://www.jorgesanchez.net/programacion/manuales/sublimeText2.pdf

Creamos un proyecto en Sublime haciendo referencia a la carpeta MyApp que hemos creado (project -> Add folder to project y marcamos la carpeta MyApp) y ahora creamos tres nuevos ficheros (File -> New File) y lo guardamos el la carpeta MyApp como "index.html", en la carpeta "MyApp/css" como "index.css" y en la carpeta "MyApp/js" como "index.js". Y ahora escribimos en este index.html lo siguiente:


 <!DOCTYPE html>  
 <html>   
  <head>   
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>   
    <title>MyApp</title>   
    <!--grupo CSS-->  
    <link href="css/index.css" type="text/css" rel="stylesheet"/>  
    <!--grupo JavaScript-->  
    <script src="js/index.js" type="text/javascript"></script>   
  </head>   
  <body>   
    <div data-role="page">   
      <div data-role="header">  
        <h1>My APP</h1>   
      </div>   
      <div data-role="main" class="ui-content">  
        Content    
      </div>   
      <div data-role="footer" data-position="fixed">  
        <h4>Footer</h4>   
      </div>    
    </div>   
  </body>   
 </html>   


Comentamos un poco algunas lineas


  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  • width=device-width: el viewport igual a la anchura real de la pantalla del dispositivo.
  • initial-scale=1: conseguimos que no se haga zoom sobre el documento.
  • user-scalable=no: conseguimos que el usuario no pueda hacer zoom en la página.
<link href="css/index.css" type="text/css" rel="stylesheet"/> 
Llamamos como hoja de estilo de esta página al archivo "index.css". Se pueden llamar a más de una hoja de estilos (recordad, lo que define la apariencia exterior).

<script src="js/index.js" type="text/javascript"></script> 
Llamamos como documento de javascript de esta página al archivo "index.js". Se pueden llamar a más de un documento js (recordad, lo que hace que el programa piense y ejecute acciones).


<body>   
    <div data-role="page">   
      <div data-role="header">  
        <h1>My APP</h1>   
      </div>   
      <div data-role="main" class="ui-content">  
        Content    
      </div>   
      <div data-role="footer" data-position="fixed">  
        <h4>Footer</h4>   
      </div>    
    </div>   
  </body>  
Este es el cuerpo del HTML es el que definimos la estructura de la página inicial (llamada "page"):
  • El "header": que es es la cabecera
  • El "main":que es la parte de contenido.
  • El "footer": que es el pie de página. Le ponemos el complemento data-position="fixed" para que se quede en la parte inferiror de la pantalla.
Ya tenemos nuestra estructura básica, pero claro, nuestro CSS y nuestro JS están vacios. Hay que buscar los frameworks adecuados para darle aspecto de movil a nuestra estructura. Vamos a por el JqueryMobile!!

 

Paso 2: Descargarnos las librerias de jQueryMobile.

Entramos en el siguiente link, http://jquerymobile.com/download/ y veremos las distintas opciones que tenemos y nos fijamos en esta:


Descargamos la última versión estable, que en el momento de escribir este post era la 1.4.5, y al descomprimir te apareceran todos estos ficheros:





En principio para la primera app, sólo vamos a necesitar la hoja de estilos (.css), la carpeta "images" (a la que hace referencia el fichero css) y el archivo javascript (.js). Así que copiamos:
  • El fichero "jquery.mobile-1.4.5-min.css" y la carpeta "images" en la carpeta "MyApp/css"
  • El fichero "jquery.mobile-1.4.5.min.js" en la carpeta "MyApp/js".
Tenemos entonces que incluir las siguiente líneas en nuestro index.html para hacer referencia a esa hoja de estilos y ese archivo js:

    <link href="css/jquery.mobile-1.4.5.min.css" type="text/css" rel="stylesheet"/>    
    <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script> 

Ahora bien, necesitamos el framework de jQuery también para que funcione el framework de jQueryMobile.

 

Paso 3: Descargamos las librerias de jQuery.

Entramos en el siguiente link, http://jquery.com/download/ y veremos las distintas opciones que tenemos y nos fijamos en esta:




Descargamos la última versión estable, que en el momento de escribir este post era la 1.11.1 (existen las versiones 2.x que no soportan Internet Explorer 6,7 y 8).

Pinchamos en "Download the compressed, production jQuery 1.11.1" y nos aparecerá la siguiente pantalla:


Le damos a "Guardar página como..." y guardamos en la carpeta "MyApp/js" (te guarda directamente el archivo "jquery-1.11.1.min.js").

Tenemos entonces que incluir la siguiente línea en nuestro index.html:

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>  

 

Paso 4: Comprobamos la plantilla

Hechos estos pasos, nuestro archivo index.html debe quedar de la siguiente manera:

Index.html

<!DOCTYPE html>
<html>
 <head> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 
        <title>MyApp</title>

        <!--grupo CSS-->
        <link href="css/index.css" type="text/css" rel="stylesheet"/>
        <link href="css/jquery.mobile-1.4.5.min.css" type="text/css" rel="stylesheet"/>

        <!--grupo JavaScript-->
        <script src="js/index.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
 </head>
 <body>
     <div data-role="page">   
        <div data-role="header">
          <h1>My APP</h1>       
        </div>        
        <div data-role="main" class="ui-content">
          Content
        </div>    
        <div data-role="footer" data-position="fixed">
          <h4>Footer</h4>     
        </div>     
      </div>
 </body>
</html> 


Y la estructura de carpetas final de nuestra plantilla para jQueryMobile queda:


Si ahora abrimos el archivo "index.html" con nuestro navegador veremos algo así:



Listo!! Muy Facil!! No te pierdas el siguiente post en el que le incluiremos a nuestra "MyApp" los ficheros necesarios para compilarlo en Phonegap Build y haremos nuestra primera APP!! (sin contenido aún, eso sí).


Materiales Recomendados:

Hay miles de cursos en internet sobre HTML5, CSS y JS. Nosotros os ponemos como ejemplo este:
https://www.youtube.com/watch?v=qz8Q1UGQdts

Esquema Mental by Versión Lunática:

martes, 11 de noviembre de 2014

HERRAMIENTAS PARA CREAR NUESTRA APP HÍBRIDA

Vamos ahora a hacernos nuestra lista de herramientas que vamos a necesitar para ponernos manos a la obra. Lo primero es definir cómo vamos a programar nuestra App. Existen varias opciones en función del tipo de programador que seas.

  • Puedes programar una app nativa, lo que significa que programas en Java para dispositivos Android, IOS para dispositivos Apple, y C# o Visul Basic para Windows Phone.
  • Puedes programar una app híbrida, lo que significas que usas una parte de código nativo y parte de código web (HTML, CSS y JavaScript). La parte de código nativo suele ser dada por una cross platform tool (herramienta multiplataforma) que nos "adapte" la app al dispositivo móvil, como Phonegap o Appcelerator que nos permite, entre otras cosas, el uso de recursos del dispositivo móvil en el que instalemos la app (desarrollada con programación web) y que nos va a permitir compilar la app para todo tipo de dispositivos (android, ios, window phone).

Desde el punto de vista de performances (actuaciones, fluidez y acceso a recursos del móvil) es siempre mejor una programación nativa, pero la programación híbrida permite compilar para todas las plataformas con un único código y además la distancia con las apps nativas en terminos de performances se está estrechando cada vez más.

Para ver como están las opciones más y menos elegidas en el mercado os dejemos este artículo sobre los lenguajes de progamación seleccionados por los programadores de apps: http://www.developereconomics.com/report/q3-2014-language-apps/

En nuestro caso vamos a realizar una app híbrida. Con esta primera elección ya sabemos que vamos a necesitar, como hemos dicho, una herrramienta multiplataforma para adoptar la app al móvil (lo que se llama un cross-platform tool). Existen varias.

CROSS PLATFORM TOOLS

Phonegap (Apache Cordova):la más usada, de código libre y gratuita lo que permite el uso de multiple plugins públicos. Es un puro desarrollo web (HTML, CSS y JavaScript). No presenta UI frameworks de por sí sino que hay que usar unos externos (Jquery Mobile, Kendo UI, ...) como veremos más abajo. Cuenta con la herramienta Phonegap Build que permite la compilación a todos los dispositivos de manera online en la nube.


Appcelerator: la segunda más usada con su versión Titanium Appcelerator (hay otra de pago para empresas). Necesitas descargar un SDK de forma local. No es puro desarrollo web sino que es sólo Javascript lo que puede complicar un poco la maquetación. Está a la cabeza en cuanto recursos UI pues los controles y el aspecto son nativos. Presenta también compilación online en la nube.
 

Adobe Air: Usado para apps desarrolladas en flash, es decir, realmente no es para HTML y JS, sino para Flash/Actionscript. Además para que la apps corran en un dispositivo es necesario que tengan instaldo Adobe Air o bien instalarlo junto con la app, lo que incrementa el tamaño de la misma.

Para utilizarlo como cross platform tool es necesario instalar un SDK en las herramientas de desarrollo de las apps nativas (por ejemplo instalar el SDK de Sencha en eclipse para compilar en Android). Tiene un UI framework llamado Senda Touch que permite compilarlo con Phonegap. El servicio completo Sencha Complete es de pago.


 

Existen varias opciones más como Monaca que desconocemos un poco pero creemos que realmente usa Phonegap pero facilita su uso y el de sus plugins, y otras como Qt orientado más a C++, o Unity orientado a desarrollo 3D. Pero pensamos que de momento con estas es más que suficiente.
En principio, según hemos leido (no nos dedicamos al estudio de mercado), las dos más usadas son Phonegap y Appcelerator. Nosotros, en Appositivas, usaremos para nuestra primera app Phonegap.

Pero aún tenemos que elegir más cosas antes de empezar y es si vamos a utilizar un UI Framework (librería gráfica) para darle a nuestra App un aspecto de móvil. En nuestro caso, al haber seleccionado Phonegap deberemos hacerlo, porque podemos ir jugando con el HTML, CSS y JS y podríamos hacerlo nosotros mismos, pero estos frameworks permiten de una forma rápida y sencilla adaptar el aspecto de nuetro diseño web a uno de app para dispositivos móviles. Veamos algunos ejemplos.

UI FRAMEWORKS

jQuery Mobile: Es la más común y la más usada. Basada en Jquery. Tiene buena documentación y es gratuita. En la propia documentación recomiendan el uso de una hoja css customizada que varie un poco la libreria, porque se corre el riesgo de hacer apps iguales unas a otras con estas librerias.


Kendo UI: Es la que mejor resultado presenta y la que más se acerca a las apps nativas. Basada en Jquery. Tiene buena documentación. Lo malo es que es de pago si quieres usarlo para una app comercial (licencia comercial)


Sencha Touch: Ya hemos hablado de Sencha como cross platform tool y ahora hablamos de sencha touch como librería gráfica. Basada en Javascript. Tiene buena documentación. También es de pago si se quiere usar para una app comercial (licencia comercial). Sencha Touch puede ser compilado con Phonegap.


Ionic: Tiene buena documentación y compila para IOS y Andorid. Es necesario hacer instalaciones locales (tienes que tener node.js instalado y luego cargar Ionic).


Existen más, como Boostrap que es una UI framework general para HTML5 para responsive design pero que permite crear apps, o la japonesa Onsen UI que desconocemos un poco pero que va asociada a Monaca de la que hemos hablado antes (hay que investigarlo). De momento pensamos que con esto es suficiente. Nosotros, en Appositivas, usaremos para nuestra primera app jQuery Mobile. 

Llamadnos clasicos, pero usaremos  jQuery Mobile y Phonegap, porque en nuestra primera app, como ya dijimos en post anteriores, no queremos hacer la mejor y más alucinante, si no que pensamos que lo primero es desarrollar nuestra app, acabarla, entender el proceso
y asentar conceptos. Luego ya haremos otras apps utilizando alguna de estas otras herramientas y frameworks.

Asique ya lo tenemos!! Lo que vamos a necesitar para realizar nuestra primera app va a ser:

CONOCIMIENTOS (que iremos dando):
  • Conocimientos de HTML5, CSS y JavaScript
  • Conocimientos de JqueryMobile.
  • Conocimientos de Phonegap.
PROGRAMAS y ARCHIVOS:
  • Un editor de texto para HTML, CSS y JavaScript. Lo suyo es usar Adobe Dreamweaver, pero hay que pagarlo y como alternativa nosotros recomendamos Sublime Text que está muy bien y es gratuito.
  • Descargaremos Phonegap de su página web.
  • Descargaremos la librería de jQuery Mobile de su página web. 
  • Una cuenta de Adobe que es gratuita y te permitirá tener una app privada con Phonegap Build.
En cualquier caso en el próximo post haremos el proceso para crearnos una plantilla básica para una app detallando las descarga y la estrucutra de carpetas que necesitaremos.

Materiales Recomendados:

Existen en la red multiples comparativas de las herramientas multiplataformas. Os ponemos algunas, pero buscad en la red y encontraréis más:
Lo mismo sucede con los UI frameworks para HTML5. Os ponemos algunas:

Esquema Mental by Versión Lunática:



martes, 4 de noviembre de 2014

EL QUÉ Y PROCESO DE LA APP


Una vez que tenemos el objeto, el "para qué" va a servir nuestra app y tras ver la gran conexión con nuestra motivación y con ello sobre nuestro esfuerzo y trabajo que es directamente proporcional al resultado, vamos a centrarnos en "el qué". Pero "el qué" entendido ya como el contenido y las funcionalidad que queremos mostrar en nuestra app.

Se ha escrito mucho sobre este tema y nosotros, en Appositivas, no prentendemos inventar nada nuevo, simplemente poner de manifiesto una serie de reflexiones y consejos que nosotros hemos experimentado.

Creemos que hay que pasar mucho tiempo definiendo claramente y con detalle qué contenido vas a mostrar y qué funcionalidad quieres implementar (definición de requisitos) antes de diseñar y programar nada. 
  • Si la app viene de un cliente, define cláramente con él estos puntos antes de nada. Frases como "quiero una app para mi negocio, que se vea lo que vendo" o "pasame la web que tengo a una aplicación" o "quiero algo creativo y chulo" es no definir nada.
  • Si la app es una idea propia, definelo cláramente y trata de compartir tu idea con otros. Si has encontrado un problema que solucionar intenta compartir con un potencial usuario, es decir, alguien que tenga ese problema, el contenido y funcionalidad detallado (muchas veces lo que tú crees que soluciona un problema no lo hace).
Cuanto más tiempo pases en esta primera fase y cuanto más mejores este primer paso, menos energias tendrás que emplear corrigiendo o como dicen ahora "pivotando" cuando ya tienes parte del trabajo hecho. Pivotar es hacer un cambio de planteamiento en función del feedback que tengamos de un cliente o grupo de potenciales usuarios. Es muy útil para aprender que no hay que aferrarse a la idea que uno tenía y pivotar no significa venderse a la demanda del mercado, sino que significa "adaptarse, aprender y ampliar el campo de visión". Pero está claro que cuanto antes se produzca este pivotaje mejor (aunque en ocasiones no queda más solución que hacerlo en fases avanzadas).

Así que ojito con el "pivotar" mucho, sobre todo si estamos empezando en esto, porque nos puede llevas a la "paralisis por análisis" y a la desmotivación. Para nostros, Appositivas, lo que pretendemos no es hacer la mejor app del mundo a la primera porque hemos tenido una idea genial y así forrarnos. Nosotros disfrutamos con el mundo de las apps, diseñando, programando, aprendiendo, y por eso es muy importante notar y sentir que estamos creando algo, que avanzamos, que lo que hacemos tiene un resultado, mejorable y con algún fallo, por supuesto, pero un resultado fruto de nuestro esfuerzo. Por el camino dejaremos miles de mejoras que por supuesto habrá que ir anotando porque van a ser la base para nuestra segunda versión. Pero por el camino hemos conseguido también aprender el proceso completo desde la idea hasta que se hace una realidad y a partir de aqui iremos avanzando más y más.

No nos dejemos atrapar por esas mejoras que son "faciles" de meter y que "no cuestan nada", porque de seguro que acabaran dando problemas por algún otro lado de nuestro código y que habrá que solucionar y esto nos lleva a otro y a otro y lo que parece cosa de una tarde se convierte en una adaptación completa de nuestro código.

Por lo tanto, creemos que los pasos a seguir serían:
  • Definir el contenido y la funcionalidad de nuestra app con el mayor detalle que podamos (para evitar pivotar en fases más avanzadas).
  • Diseñar y programar y probar la app, anotando las mejoras que nos vayan surgiendo en el camino.
  • Acabar la primera versión de una aplicación y subirla.
  • Ser conscientes de todo el proceso.
  • Debemos celebrar y disfrutar de lo conseguido.
  • Ponerse manos a la obra con la segunda versión teniendo en cuenta el feedback de los usuarios de la primera versión y las mejoras anotadas.
Estos son los pasos que vamos a seguir en este blog. La siguiente entrada definiremos el contenido y funcionalidad de nuestra app y de las herramientas que vamos a usar para crearla (basicamente html5, css, javascript y phonegap).
Materiales Recomendados:

Busca y lee sobre "El Proceso Unificado de Desarrollo de Software (RPU)".

Respecto a las opiniones sobre pivotar y acabar tu primera versión han sido reflexiones y pensamientos que vienen de nosotros mismos y no nos atrevemos a dar ningún material recomendado sobre este aspecto. Al final, cada uno debería encontrar su mejor metodo.

Esquema Mental by Versión Lunática:




sábado, 1 de noviembre de 2014

LA MOTIVACIÓN


Tras la presentación, y antes de meternos en materia de diseño y programación, permitidnos sacar un poco los pies del tiesto (no somos expertos de coaching) y hacer una pequeña entrada para enmarcar mejor el arranque de nuestras iniciativas. Y no es otra cosa que definir la motivación que nos lleva a iniciar nuestro proyecto. Por decirlo de otro modo el "para qué", el objetivo.

Esta motivación es fundamental ya que tendremos que recurrir a ella en los momentos de desesperación y angustia que seguro, y repito, seguro que nos van a suceder a lo largo del camino.Cuanto mas fortalecida y mejor definida tengamos esta motivación, más facil nos será superar esos momentos.

Como dijimos en la presentación de Appositivas, el objeto de nuestras apps es algo que sume, que aporte valor, que nos ilusione. Y lo escribimos así y lo decidimos así, porque no puede ser de otra manera. Nosotros estamos convencidos que si nuestro objetivo fuera hacer apps para ganar mucho dinero y forrarnos, sin importar el valor o el para qué de esa app, no duraríamos ni tres días y jamás llegaríamos a finalizarlas. 

Y no es hipocresía, creemos que es verdad, lo que tu app o web aporte y ayude a los demás será directamente proporcional a las ganas que les pongas y con ello llegara la recompensa, a nivel profesional y al económico. El dinero es una consecuencia, no un fin.

Antes de aceptar un proyecto, el desarrollo de una app o una web, procura que tus motivaciones, las de tu cliente o colaborador y las del proyecto que tengais entre manos estén alineadas porque de esa manera tenéis el éxito asegurado.

El siguiente paso será hablar sobre "el qué" y los peligros de no definirlo bien y apartir de ahí, comenzaremos ya a meternos en materia. 

Materiales Recomendados:

Podcast sobre emprendedores del programa de radio Pensamiento Positivo, conducido por Sergio Fernández que es un tío que además tiene libros como "El sorprendedor" que ilustran esto que hemos escrito aquí mucho mejor que nosotros. En los diferentes programas además te dan mucha bibliografía.

Si no tienes clara tu idea, te recomendamos también esta lista de 75 formas de encontrar la siguiente gran idea para tu startup publicada por Eureka Startups.

Esquema Mental by Versión Lunática: