Phone gap & jquerymobile
Upcoming SlideShare
Loading in...5

Phone gap & jquerymobile



Phonegap y desarrollo en JQuery Mobile por @binibook en el primer Betabeers Mallorca

Phonegap y desarrollo en JQuery Mobile por @binibook en el primer Betabeers Mallorca



Total Views
Views on SlideShare
Embed Views



2 Embeds 81 78 3



Upload Details

Uploaded via as Adobe PDF

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.

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

Phone gap & jquerymobile Phone gap & jquerymobile Presentation Transcript

  • Gap & jQu eryMobilePhone ookA brief introduction by Binib
  • Bin ibook Intro
  • 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.
  • T he Biniboo k PlatformThe Website ○ To publish, discover, read and share.
  • T he Biniboo k PlatformThe Mobile Applications ○ To discover, read and share everything. Coming...
  • ok: Price by Popularity BiniboBinibook offers to writers 3 payment methodsfor 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".
  • neGap & jQ ueryMobileP ho
  • PhoneGap: Intro
  • neGap: Fea tured AppsPho
  • W hat does P honeGap?● Mobile platform abstraction● Code unification: HTML5, CSS & JS● Mapping of native functionalitie s (camera, files, geolocation, etc.)
  • p: Supporte d FeaturesPhoneGa
  • PhoneGap: ExampleTake a photo and retrieve theimage:
  • P honeGap: Based On...All mobile platforms has a native webviewcontrol.For example, in Android, you can load a web page intoyour app doing:
  • P honeGap: 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; Android.doEchoTest(Holaaa);public MyJSInterface (WebView appView) { this.mAppView = appView; } JAVASCRIPT public void doEchoTest( String echo) { Toast toast = Toast.makeText(mAppView.getContext(),echo, Toast.LENGTH_SHORT);; }} JAVA
  • P honeGap: 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...
  • jQueryMo bile: Intro
  • ry Mobile: Fe atured AppsjQue
  • at does jQu eryMobile? Wh● Make a website looks like mobile app.● Offers a set of methods to make powerful apps.
  • ry Mobile: Ke y Features jQue● 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.
  • bile: Ajax N avigation jQueryMoSee a demo here
  • il e: The The me Roller j QueryMobjQueryMobile has 4 default themes. You cancreate your own themes using: See how it works here:
  • ry Mobile: Th e Methods jQuejQueryMobile has powerful methods:● $.mobile.changePage()● $.mobile.showPageLoadingMsg()● $.mobile.silentScroll()And events● Tap, taphold, swipe● Orientationchange● Page (load, beforeload, etc.)
  • T hats all!Some geek resources: