Your SlideShare is downloading. ×
0
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5

2,134

Published on

We all know that Mobile Development is the big talk of the moment, but getting started brings more questions than answers. Questions such as: Where do you start? What platforms do you target? and/or …

We all know that Mobile Development is the big talk of the moment, but getting started brings more questions than answers. Questions such as: Where do you start? What platforms do you target? and/or Do you have to learn COCOA, JAVA, HTML5, CSS3 and all those technologies that you may not know much about?

The good news is that you can relax for now, because there is a new and exciting way to do it all in simple ways. In this workshop you will learn the following in a few short hours… Oh and actually be productive from day one:

- How to design and build a single application that runs perfectly on: mobile web browsers, iPhone (native app), iPad(native app) and Android(native app).

- How to test your application in IOS Simulator
How to test your application in Android Simulator

- How to transfer your application to an actual iPhone and/or iPad
How to transfer your application to an actual Android phone

- How to deploy your Android application to the Android Market and Amazon AppStore
How to deploy your iPhone/iPad application to the Apple AppStore

About the Speaker

Jorge Garifuna is a Professional Software Developer and Consultant with over 15 years of industry experience. His portfolio of technologies include but are not limited to various programming languages, Web 2.0, a diverse number of Frameworks, countless of databases and the latest and greatest in Mobile for popular platforms such as IOS, Android and BlackBerry, among many.

Over the years, Jorge has successfully Designed, Developed and Deployed Software in the areas of E-Commerce, Project Management, Content Management Systems (CMS), Enterprise Resource Planning (ERP) and Customer Relationship Management (CRM) to name a few. His technologies have been used, by many consumers, employees and businesses, some of which have grown to multi-million dollar businesses.

Jorge prides himself as a happy contributor to various Open Source Projects, including the ATK Framework and vTiger CRM to name a few. He has also given various presentations in the topics of: Joomla CMS; ATK Framework; Wordpress; ELGG Social Network Framework; Integration of Linux, Apache, MySQL, SQLite with Mkahawa Cyber Manager and PHP; and Mobile Development for Web, IOS Native and Android Native.

Jorge joined LAMPsig over six years ago and is currently serving as the president of this dynamic LAMP group. More details of Jorge’s professional qualifications can be found at: http://jgari.com/resume

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,134
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. By Jorge GarifunaProfessional Web Developer info@GariDigital.com 213-915-4402 JGari.com/resume Twitter: @jgarifuna
  • 2. idabiña? JGari.com/resume
  • 3. maga-dien-tina! JGari.com/resume
  • 4. idabiña? How are you?maga-dien-tina! I am fine! JGari.com/resume
  • 5.  NOW: Show you how easy it is to start native mobile development and illustrate how to test on different phones. SOON: Show you how to package your app to distribute to the different App stores. Interested? SMS your name and email to: 213-985-4413 JGari.com/resume
  • 6. • Very Expensive • Time Consuming • Maintenance NightmareSMS your name & email to: 213-985-4413 JGari.com/resume
  • 7. • Leverage Existing Skills• Get to Market Sooner• Reach More Users JGari.com/resume
  • 8. Join LA PhoneGap at: http://www.meetup.com/laphonegap/
  • 9. Web MobilePresentation HTML HTML5Styling CSS CSS3Logic PHP, Perl, Python, Ruby, PHP, Objective-C, Java, Java, C, C++, Javascript JavascriptDatabase MySQL, PostgreSQL SQLiteIDE NetBeans, Eclipse, Xcode, Eclipse, DreamWeaver DreamWeaver CS5.5Frameworks CakePHP, Symphony, Jquery Mobile, Sencha ATK, Jquery, Sencha EXT Touch, Jo, PhoneGapDistribution JS Hosting Web Web Hosting, App Store, Market SMS your name & email to: 213-985-4413 JGari.com/resume
  • 10. 1. Build Mobile App2. Test App on Browser3. Test App on IOS Simulator4. Test App on IOS Devices5. Test App on Android Emulator6. Test App on Android Phone7. Access Devices APIs SMS your name & email to: 213-985-4413 JGari.com/resume
  • 11. 1. SketchyPad/iMockups for wireframing2. DreamWeaver CS5.53. Jquery Mobile 1.0a34. PhoneGap5. Xcode 4 & Eclipse6. IOS Simulator & Real iPhone7. Android Emulator & Real Phone SMS your name & email to: 213-985-4413 JGari.com/resume
  • 12. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 13. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 14. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 15. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 16. JGari.com/resume
  • 17. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 18. SMS your name & email to: 213-985-4413 JGari.com/resume
  • 19.  Create New Site  Site -> New Site Configure Application Frameworks (IOS, Android)  Site -> Mobile Applications -> Configure Application Framework ▪ “Easy Install” for Android SDK Installation ▪ IOS Developer Tools Path: /DeveloperSMS your name & email to: 213-985-4413 JGari.com/resume
  • 20.  Create New Mobile Project in DreamWeaver  File -> New -> Page from Sample -> Mobile Starters -> Jquery Mobile (phonegap)  DocType: HTML 5SMS your name & email to: 213-985-4413 JGari.com/resume
  • 21.  File -> SaveSMS your name & email to: 213-985-4413 JGari.com/resume
  • 22.  Activate LiveView in DreamWeaver Click on buttons of Mobile App Optionally Transfer to Server For More TestingSMS your name & email to: 213-985-4413 JGari.com/resume
  • 23.  From DreamWeaver Menu  Site -> Mobile Applications -> Application Settings ▪ VERY IMPORTANT: Make sure the Bundle ID does not contain any underscores(_) and no spaces ▪ Fill out Information ▪ Optionally add Application Icon and Startup Screen ▪ Images must be PNG 8 ▪ SaveSMS your name & email to: 213-985-4413 JGari.com/resume
  • 24.  From DreamWeaver Menu  For iPhone ▪ Site -> Mobile Applications -> Build and Emulate -> iPhone  For iPad ▪ Site -> Mobile Applications -> Build and Emulate -> iPadSMS your name & email to: 213-985-4413 JGari.com/resume
  • 25.  Start Android Emulator ▪ From command line: ▪ /Applications/Android/tools/emulator -avd DW_AVD  NOTE: Substitute “/Applications/Android” with your Android installation path Site -> Mobile Applications -> Build and Emulate -> Android  On failure, simply build app and manually install ▪ adb install AppFile.apkSMS your name & email to: 213-985-4413 JGari.com/resume
  • 26. 1. From Android Market install  AppInstaller or  Quick App Install2. Insert Micro SD Card on Android Phone3. Connect Android Phone to Computer Via USB4. Mount Phone to Computer 1. Slide down from top bar 2. Select USB Connected 3. Click mount button5. Check mounted card under Devices on Mac OS Finder6. Copy Newly created .apk files from computer to Phone Card 1. Located in APP_NAME_Android/bin7. Unmount card from computer8. Turn off USB on Phone 1. Slide down from top bar 2. Click “Turn off USB storage” 3. Click on “turn off” button9. Install App either with AppInstaller or Quick App Install10. Open App SMS your name & email to: 213-985-4413 JGari.com/resume
  • 27. 1. You need to be a paid IOS Developer 1. Your IOS Device must be registered at: 1. http://developer.apple.com/ios/manage/overview/index.action2. Connect IOS Device to computer via USB3. Navigate to newly built IOS Project  Located at APP_NAME_IOS4. Double click on APP_NAME.xcodeproj to open in Xcode5. Click on the project name in Xcode 1. Set deployment target to the same version as your IOS device in IOS Application Target 2. Set the appropriate target device(iPhone, iPad, Universal) 3. Make your preferences in iPhone/iPod Deployment Info6. Select your IOS Device from drop down list of devices next to the run button7. Click the Run button SMS your name & email to: 213-985-4413 JGari.com/resume
  • 28.  Add better navigation provided by Jquery Mobile  http://jquerymobile.com/demos/1.0a4.1/ Tap into the device’s APIs (camera, GPS) with PhoneGap  http://docs.phonegap.comSMS your name & email to: 213-985-4413 JGari.com/resume
  • 29. 1. Jquery Mobile (v1.0a3) does not re-style dynamic list views (yet) 1. Need to upgrade to JQM v1.0a4.1 2. Refresh list with: jQuery(#link_list).listview();2. Navigation bar transition in Jquery Mobile is not very smooth (yet)  DAVID FELDMAN recommends ▪ Sencha Touch: ▪ http://www.sencha.com/products/touch/ ▪ Read David’s review: “Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium” at: ▪ http://interfacethis.com/2011/adventures-in-html5-part-one/3. To access devices’ APIs you need to either add or update PhoneGap path in index.html to:  <script src="phonegap.js" type="text/javascript"></script> SMS your name & email to: 213-985-4413 JGari.com/resume
  • 30.  While you think…  Sign up to LAMPsig’s mailing list at: ▪ http://lampsig.org  Join LAMPsig on Meetup at: ▪ http://www.meetup.com/LAMPsig  Jorge Garifuna ▪ info@GariDigital.com ▪ @jgarifunaSMS your name & email to: 213-985-4413 JGari.com/resume
  • 31. 1. http://tv.adobe.com/watch/cs-55-web-premium-fea2. http://jquerymobile.com3. http://www.phonegap.com4. http://html5doctor.com5. http://www.sencha.com/products/touch6. http://joapp.com7. http://dhtmlx.com/touch8. http://developer.apple.com9. http://lampsig.org10. http://www.meetup.com/LAMPsig SMS your name & email to: 213-985-4413 JGari.com/resume

×