By        Jorge GarifunaProfessional Web Developer   info@GariDigital.com         213-915-4402      JGari.com/resume     T...
Web                          MobilePresentation   HTML                         HTML5Styling        CSS                    ...
1.   Build Mobile App2.   Test App on Browser3.   Test App on IOS Simulator4.   Test App on IOS Devices5.   Test App on An...
1.   SketchyPad/iMockups for wireframing2.   DreamWeaver CS5.53.   Jquery Mobile 1.0a34.   PhoneGap5.   Xcode 46.   IOS Si...
JGari.com/resume
JGari.com/resume
JGari.com/resume
   Create New Site     Site -> New Site   Configure Application Frameworks    (IOS, Android)     Site -> Mobile Applic...
   Create New Mobile Project in DreamWeaver     File -> New -> Page from Sample -> Mobile      Starters -> Jquery Mobile...
   File -> Save                   JGari.com/resume
   Activate LiveView in DreamWeaver   Click on buttons of Mobile App   Optionally Transfer to Server For More    Testin...
   From DreamWeaver Menu     Site -> Mobile Applications -> Application Settings      ▪ VERY IMPORTANT: Make sure the Bu...
   From DreamWeaver Menu     For iPhone      ▪ Site -> Mobile Applications -> Build and Emulate ->        iPhone     Fo...
   Start Android Emulator      ▪ From command line:       ▪ /Applications/Android/tools/emulator -avd DW_AVD          NO...
1.     From Android Market install          AppInstaller or          Quick App Install2.     Insert Micro SD Card on And...
1.    You need to be a paid IOS Developer     1.    Your IOS Device must be registered at:          1.   http://developer....
   Add better navigation provided by Jquery    Mobile     http://jquerymobile.com/demos/1.0a4.1/   Tap into the device’...
1.    Jquery Mobile (v1.0a3) does not re-style dynamic list      views (yet)     1.    Need to upgrade to JQM v1.0a4.1    ...
   While you think…     Sign up to LAMPsig’s mailing list at:      ▪ http://lampsig.org     Join LAMPsig on Meetup at: ...
1.  http://tv.adobe.com/watch/cs-55-web-    premium-feature-tour-2. http://jquerymobile.com3. http://www.phonegap.com4. ht...
Upcoming SlideShare
Loading in …5
×

Intro to Mobile Development for Web iOS and Android

2,790 views

Published on

These slides were created by Jorge Garifuna for the first SendGrid Mobile Hackathon: http://sendgridmh.eventbrite.com

Published in: Technology
  • Be the first to comment

Intro to Mobile Development for Web iOS and Android

  1. 1. By Jorge GarifunaProfessional Web Developer info@GariDigital.com 213-915-4402 JGari.com/resume Twitter: @jgarifuna
  2. 2. Web MobilePresentation HTML HTML5Styling CSS CSS3Logic PHP, Perl, Python, Ruby, J PHP, Objective-C, Java, ava, C, C++, Javascript JavascriptDatabase MySQL, PostgreSQL SQLiteIDE NetBeans, Eclipse, Xcode, Eclipse, DreamWeaver DreamWeaver CS5.5Frameworks CakePHP, Symphony, ATK, Jquery Mobile, Sencha Jquery, Sencha EXT JS Touch, Jo, PhoneGapDistribution Web Hosting Web Hosting, App Store, Market JGari.com/resume
  3. 3. 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 JGari.com/resume
  4. 4. 1. SketchyPad/iMockups for wireframing2. DreamWeaver CS5.53. Jquery Mobile 1.0a34. PhoneGap5. Xcode 46. IOS Simulator & Real iPhone7. Android Emulator & Real Phone JGari.com/resume
  5. 5. JGari.com/resume
  6. 6. JGari.com/resume
  7. 7. JGari.com/resume
  8. 8.  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: /Developer JGari.com/resume
  9. 9.  Create New Mobile Project in DreamWeaver  File -> New -> Page from Sample -> Mobile Starters -> Jquery Mobile (phonegap)  DocType: HTML 5 JGari.com/resume
  10. 10.  File -> Save JGari.com/resume
  11. 11.  Activate LiveView in DreamWeaver Click on buttons of Mobile App Optionally Transfer to Server For More Testing JGari.com/resume
  12. 12.  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 ▪ Save JGari.com/resume
  13. 13.  From DreamWeaver Menu  For iPhone ▪ Site -> Mobile Applications -> Build and Emulate -> iPhone  For iPad ▪ Site -> Mobile Applications -> Build and Emulate -> iPad JGari.com/resume
  14. 14.  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 JGari.com/resume
  15. 15. 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 JGari.com/resume
  16. 16. 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 JGari.com/resume
  17. 17.  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.com JGari.com/resume
  18. 18. 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> JGari.com/resume
  19. 19.  While you think…  Sign up to LAMPsig’s mailing list at: ▪ http://lampsig.org  Join LAMPsig on Meetup at: ▪ http://www.meetup.com/LAMPsig  Me on twitter: @jgarifuna JGari.com/resume
  20. 20. 1. http://tv.adobe.com/watch/cs-55-web- premium-feature-tour-2. 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 JGari.com/resume

×