• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Phonegap
 

Phonegap

on

  • 4,044 views

Introduction to phonegap

Introduction to phonegap

Statistics

Views

Total Views
4,044
Views on SlideShare
4,040
Embed Views
4

Actions

Likes
1
Downloads
121
Comments
0

3 Embeds 4

http://www.slashdocs.com 2
https://si0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Phonegap Phonegap Presentation Transcript

    • Ing. César Eduardo Suárez Trujillo @cesarlarsson
    • Simplemente JS o cualquiera de los demás frameworks
    • ¿QUE ES PHONEGAP?Este framework nace en San Francisco en 2009 por laempresa Nitobi Software obteniendo el premio del publico enel O’Reilly Media de ese año.En Octubre de 2011 Adobe compra Nitobi
    • ¿CÓMO FUNCIONA?Esta grafica ilustra fácilmente como funciona 
    • NATIVA O BASADA EN WEBVentajas de la tecnologías nativas: Mejor experiencia del usuario (en lainterfaz del móvil) y mejor uso de las características de hardware del mismo.Desventajas: Incompatibilidad de plataformas por lo que el app debedesarrollarse varias veces, una por cada plataforma que se quiera (Android,iOS, Blackberry, Windows Phone, etc.) utilizar.Ventajas de tecnologías Web: Un desarrollo que funcionará para cualquierplataforma. Sólida integración con aplicaciones basadas en servidoresempresariales (aplicaciones Web y de bases de datos). Desventajas: Unainterfaz de usuario móvil comparativamente débil y poca capacidad deinteractuar con el móvil (sonido, pantalla, GPS, cámara, etc.). Además, no sepueden publicar en los App Stores y Markets para distribuirse y serdescargadas.
    • ¿Y COMO ES ESTA VUELTA?Lo primero que tenemos que saber que a pesar de quenuestra aplicación técnicamente solo la vamos a escribir unavez (html- css -javascript). Cada plataforma de desarrollotiene sus librerías propias para la compilación del proyecto.En esta guía hablaremos de Android y iOS
    • JQUERY MOBILEjQuery mobile es un framework de javascript que extiende lafuncionalodad del framework estandar de jQuery como lohace jQueryUI para las aplicaciones web.
    • UNIVERSO PHONEGAP
    • CREANDO LA INTERFAZ Nuestra aplicación requiere una interfaz, es por eso que recurrimos a jQuery Mobile. Ventajas: • Simple: El framework es muy facil de usar. • Mejora progresiva: La filosofía de jQuery Mobile es soportar tanto la gama alta de los dispositivos, como aquellos que no soportan grandes funcionalidades. • Accesibilidad: jQuery Mobile ha sido diseñado pensando en la accesibilidad. • Tamaño pequeño: El tamaño total de jQuery Mobile framework es relativamente pequeño. Unos 12kb de la biblioteca JavaScript, 6kb de CSS y algunos íconos. • Tematización: proporciona un sistema de temas que nos ofrece una aplicación a nuestro propio estilo.
    • COMPARATIVO Area JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWTExecution 70% 75% 58% 62% 55% 55% 57% 57%Development 98% 77% 52% 73% 80% 64% 41% 52%Product 88% 100% 48% 48% 55% 60% 48% 63%Support and 65% 65% 65% 65% 65% 65% 65% 65%DocumentationAcumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11%
    • ESTRUCTURA BÁSICA Nuestra primera pagina en jQuery debe tener los siguiente elementos básicos: <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Titulo de la pagina</h1> </div><!-- /header --> <div data-role="content"> <p>Contenido de la pagina.</p> </div><!-- /content --> <div data-role="footer"> <h4>Pie de pagina</h4> </div><!-- /footer --> </div> <!-- /page --> </body> </html>
    •  Un solo documento html puede contener multiples paginas <div data-role="page” id=“pagina1”> <div data-role="header"> <h1>Titulo de la pagina</h1> </div><!-- /header --> <div data-role="content"> <p>Contenido de la pagina.</p> </div><!-- /content --> <div data-role="footer"> <h4>Pie de pagina</h4> </div><!-- /footer --> </div>
    • ETIQUETAS IMPORANTES En esta pagina de la documentación la encontramos http://jquerymobile.com/test/docs/api/data-attributes.htmlComponent HTML5 data-*Header, Footer <div data-role="header"> <div data-role="footer">Content body <div data-role="content">Buttons <a href="index.html" data-role="button" data-icon="info">Button</a>Grouped buttons <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div>Inline buttons <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div>
    • Component HTML5 data-*Form element <div data-role="fieldcontain">(Select menu) <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div>Basic List views <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul>Dialogs <a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true” data-rel="dialog" data- transition="pop">Open dialog</a>Transitions <a href="index.html" data-transition="pop" data-back="true">
    • LISTAS No hay elemento más básico en una aplicación movil tradicional. El contenido principal de nuestra aplicación o nuestro web site se puede plasmar como una lista. <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul> Si agregamos elementos dinámicamente simplemente usamos $(#mylist).listview(refresh) Para actualizar los nuevos elementos.http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html
    • ENTRADAS EN HMTL5Una de las cosas que nos trae HTML5 es poder tener inputscon tipos de datos específicos. Estos tipos nos ayudaran adecirle al dispositivo que “teclado” nos debe mostrar.• Email• Url• Number• Range• Date pickers (date, month, week, time, datetime, datetime-local)• Search• Color
    • TRANSICIONESSlide – La página actual se desplaza hacia la izquierda a la vez que entradesde la derecha la página nueva.Pop – La página nueva se abre sobra la antigua en forma de pop-up peroocupando todo el espacio.Slideup – La página nueva aparece desde abajo, desplazándose hastaocupar toda la pantalla.Slidedown – La página nueva aparece desde arriba y se desplaza haciaabajo ocupando la pantalla.Fade – La pantalla nueva se monta sobre la actual con una transición decambio de opacidad.Flip – El más espectacular. Esta transición entre pantallas simula un girode 180º de la página, simulando que la nueva es el dorso de la queteníamos.Para utilizar esta transicion en nuestra pagina: <a href="index.html" data-transition="pop”>Page2</a>
    • EVENTOSEl framework de jQuery ya nos traía una serie de eventossimples de usar, pero en jQueryMobile tenemos que tener encuenta lo siguiente: $(document).bind(pageinit), no $(document).ready()Realmente cada una de la paginas va cargando según se vanllamando http://jquerymobile.com/test/docs/api/events.html
    • $( #aboutPage ).live( pageinit,function(event){ alert( ‘Esta pagina se ha cargado ); });$(.quickNav).live(tap,function(event) { $(".select_body").toggle(); // toggles thevisibility/display of the element.});
    • TOUCH EVENTSAlgo realmente importante en dispositivo móviles y tablets son lo eventossobre la pantalla, jQuery Mobile trae consigo una serie de eventos para talfin como son:tap : Toque rápidotaphold : Toque completo (1 seg aprox)swipe : Cuando arrastras en horizontal más de 30px o 20px en verticaldurante 1 seg.swipeleft : Cuando te desplazas a la izquierdaswiperight : Cuando te desplazas a la derechaorientationchange : Cuando se cambia la orientación del dispositivoscrollstart : Se activa al empezar el scroll.scrollstop : Se activa al finalizar el scroll.También podemos detectar cambio de orientación• orientationchange
    • TEMASLos temas son algo clave, podemos generar nuestro propios temas desde la aplicaciónonline <a href="#" data-role="button" data-theme="a">About this app</a> <a href="#" data-role="button" data-theme="b">About this app</a>
    • Para cambiar temas utilizamos el atributo data-theme=“d” en elElemento al que se le desee cambiar el tema especifico. Tambiende manera general se puede cambiar de forma general loselementos. $.mobile.page.prototype.options.theme = "d"; $.mobile.page.prototype.options.addBackBtn = false; $.mobile.page.prototype.options.backBtnTheme = "d"; // Page $.mobile.page.prototype.options.headerTheme = "d"; // Page header only $.mobile.page.prototype.options.contentTheme = "d"; $.mobile.page.prototype.options.footerTheme = "d"; // Listviews $.mobile.listview.prototype.options.headerTheme = "d"; // Header for nested lists $.mobile.listview.prototype.options.theme = "d"; // List items / content $.mobile.listview.prototype.options.dividerTheme = "d"; // List divider $.mobile.listview.prototype.options.splitTheme = "d"; $.mobile.listview.prototype.options.countTheme = "d"; $.mobile.listview.prototype.options.filterTheme = "d"; $.mobile.listview.prototype.options.filterPlaceholder = "Buscar por...";
    • ANDROID Y PHONEGAPLo primero que tenemos que hacer es bajar el SDK de Android que esta disponiblepara Windows, MacOS y Linux http://developer.android.com/sdk/index.html
    • La pagina de desarrollo de Android recomienda, el uso de eclipse y realmente es muy bueno para las aplicaciones nativas, pero cuando se trata de phonegap, netbeans tiene ventajas dado su interfaz para el manejo de HTML, css y javascript Para utilizar facilmente netbeans con nuestro SDK de Android, ingresamos a Options->pluginshttp://kenai.com/projects/nbandroid
    • http://kenai.com/projects/nbandroid/downloads/download/updatecenter/updates.xml
    • CONFIGURANDO PHONEGAPBueno phone son realmente una serie de librerias quedebemo integrar a nuestro proyecto, por eso primerodebemos ingresar al sitio oficial http://phonegap.com/ en lasección descargas seleccionamos la version que queramos.Para este momento acaban de liberal la versión 1.8, igualutilizaremos la 1.7 denominada apache cordova, aquí estan lalibrerías para cada una de la plataformas.
    • HELLO WORLDComo en todo inicio, no hay nada como nuestro hello world, pordefecto si corremos nuestro proyectos no crea un hello worldnativo, pero lo que haremos sera crear nuestro hello world conphonegap.
    • Luego configuramos nuestro proyecto, y seleccionamos a quePlataforma vamos a usa en nuestro proyecto. Creo que la 2.2Cobija una gran gama de dispositivos
    • Importamos las librerias de phonegap e nuestro proyectos
    • Luego de editar nuestro principal archivo de actividades, modificamos elManifiesto AndroidManifest.xml que se encuentra
    • En la carpeta assets creamos la carpeta /www donde se colocara nuestroproyecto. Por defecto netbeans no es capaz de encontrar esta ubicación, poreso debemos realizar los siguiente:Buscar el archivo project.propertiesAgregar los siguiente:assets.dir=assetsassets.available=true
    • Ahora agregamos nuestro archivo index.html a nuestra carpetawww y lo ejecutamos.
    • PHONEGAP Y IOSPara trabajar con phonegap en iOS es mucho massencillo, simplemente en el paquete que descargamosinstalamos el plugin utilizando cordova-1.7.0.dmg
    • Si corremos el emulador a la loca tendremos lo siguiente
    • CASOS DE ESTUDIO http://phonegap.com/app/hockey-community/
    • http://phonegap.com/app/tiny-terrors/
    • ALTERNATIVASPhonegap no es el único proyecto de este tipo, existen másde 15 proyectos mal contados de este estilo. Algunos inclusocon mas potencial (unas pagas) en este momento quephonegap. Entre lo mas importantes estan: http://www.quickconnectfamily.org/ http://appspresso.com/
    • http://www.sencha.com/http://www.applicationcraft.com/ http://www.appfurnace.com/ http://www.iui-js.org/