phone gap & jquerymobile
DESCRIPTION
Phonegap y desarrollo en JQuery Mobile por @binibook en el primer Betabeers MallorcaTRANSCRIPT
![Page 1: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/1.jpg)
PhoneGap & jQueryMobile
A brief introduction by Binibook
![Page 2: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/2.jpg)
Binibook Intro
![Page 3: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/3.jpg)
What is Binibook?
● Binibook brings the YouTube concept to text
○ Anyone can publish books, poems, short stories... easily!
○ Anyone can read the texts through the platform.
![Page 4: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/4.jpg)
The Binibook Platform
The Website
○ To publish, discover, read and share.
binibook.com
![Page 5: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/5.jpg)
The Binibook Platform
Coming...
The Mobile Applications
○ To discover, read and share everything.
![Page 6: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/6.jpg)
Binibook: Price by Popularity
Binibook offers to writers 3 payment methods for their publications:
● Always free● Payment (from € 0.99 to € 6.99)● Price by popularity
Writers can choose it freely. The 95% of publications have "Price computed by
popularity".
![Page 7: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/7.jpg)
PhoneGap & jQueryMobile
![Page 8: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/8.jpg)
PhoneGap: Intro
![Page 9: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/9.jpg)
PhoneGap: Featured Apps
![Page 10: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/10.jpg)
What does PhoneGap?
● Mobile platform abstraction
● Code unification: HTML5, CSS & JS● Mapping of
native functionalities (camera, files, geolocation, etc.)
![Page 11: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/11.jpg)
PhoneGap: Supported Features
![Page 12: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/12.jpg)
PhoneGap: Example
Take a photo and retrieve the image:
![Page 13: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/13.jpg)
PhoneGap: Based On...
All mobile platforms has a native webview control.
For example, in Android, you can load a web page into your app doing:
![Page 14: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/14.jpg)
PhoneGap: Based On...
Keypoint: the webview javascript interface.
The webview control offers access to native functionalities using the javascript interface.
webview.addJavascriptInterface( MyJSInterface, "MyJSInterface" );
public class MyJSInterface {
private WebView mAppView;public MyJSInterface (WebView appView) { this.mAppView = appView; }
public void doEchoTest(String echo) { Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT); toast.show(); }}
Android.doEchoTest('Holaaa');
JAVA
JAVASCRIPT
![Page 15: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/15.jpg)
PhoneGap: Ugly Things
● No server-side process (PHP, JSP...)
○ Internationalization is difficult○ Database access○ Gallery access
● Solved by:○ Ajax calls to webservices. ○ HTML5 features: WebSQL, LocalStorage,
SessionStorage...
![Page 16: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/16.jpg)
jQueryMobile: Intro
![Page 17: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/17.jpg)
jQueryMobile: Featured Apps
![Page 18: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/18.jpg)
What does jQueryMobile?
● Make a website looks like mobile app.● Offers a set of methods to make powerful apps.
![Page 19: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/19.jpg)
jQueryMobile: Key Features
● Built on jQuery core.
● Compatible with all major mobile, tablet,
e-reader & desktop platforms.
● HTML5 Markup-driven configuration.
● Touch and mouse event support.
● Powerful Ajax-powered navigation
system.
![Page 20: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/20.jpg)
jQueryMobile: Ajax Navigation
See a demo here
![Page 21: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/21.jpg)
jQueryMobile: The Theme Roller
jQueryMobile has 4 default themes. You can create your own themes using:
See how it works here:http://jquerymobile.com/themeroller/
![Page 22: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/22.jpg)
jQueryMobile: The Methods
jQueryMobile has powerful methods:● $.mobile.changePage()● $.mobile.showPageLoadingMsg()● $.mobile.silentScroll()
And events● Tap, taphold, swipe● Orientationchange● Page (load, beforeload, etc.)
![Page 23: Phone gap & jquerymobile](https://reader033.vdocuments.mx/reader033/viewer/2022051412/54c2dedb4a7959ec238b4607/html5/thumbnails/23.jpg)
That's all!
Some geek resources: