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

1. By
Jorge Garifuna
Professional Web Developer
info@GariDigital.com
213-915-4402
JGari.com/resume
Twitter: @jgarifuna

2. Web Mobile
Presentation HTML HTML5
Styling CSS CSS3
Logic PHP, Perl, Python, Ruby, J PHP, Objective-C, Java,
ava, C, C++, Javascript Javascript
Database MySQL, PostgreSQL SQLite
IDE NetBeans, Eclipse, Xcode, Eclipse,
DreamWeaver DreamWeaver CS5.5
Frameworks CakePHP, Symphony, ATK, Jquery Mobile, Sencha
Jquery, Sencha EXT JS Touch, Jo, PhoneGap
Distribution Web Hosting Web Hosting, App Store,
Market
JGari.com/resume

3. 1. Build Mobile App
2. Test App on Browser
3. Test App on IOS Simulator
4. Test App on IOS Devices
5. Test App on Android Emulator
6. Test App on Android Phone
7. Access Devices APIs
JGari.com/resume

4. 1. SketchyPad/iMockups for wireframing
2. DreamWeaver CS5.5
3. Jquery Mobile 1.0a3
4. PhoneGap
5. Xcode 4
6. IOS Simulator & Real iPhone
7. Android Emulator & Real Phone
JGari.com/resume

5. JGari.com/resume

6. JGari.com/resume

7. JGari.com/resume

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.  Create New Mobile Project in DreamWeaver
 File -> New -> Page from Sample -> Mobile
Starters -> Jquery Mobile (phonegap)
 DocType: HTML 5
JGari.com/resume

10.  File -> Save
JGari.com/resume

11.  Activate LiveView in DreamWeaver
 Click on buttons of Mobile App
 Optionally Transfer to Server For More
Testing
JGari.com/resume

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.  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.  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. 1. From Android Market install
 AppInstaller or
 Quick App Install
2. Insert Micro SD Card on Android Phone
3. Connect Android Phone to Computer Via USB
4. Mount Phone to Computer
1. Slide down from top bar
2. Select USB Connected
3. Click mount button
5. Check mounted card under Devices on Mac OS Finder
6. Copy Newly created .apk files from computer to Phone Card
1. Located in APP_NAME_Android/bin
7. Unmount card from computer
8. Turn off USB on Phone
1. Slide down from top bar
2. Click “Turn off USB storage”
3. Click on “turn off” button
9. Install App either with AppInstaller or Quick App Install
10. Open App
JGari.com/resume

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.action
2. Connect IOS Device to computer via USB
3. Navigate to newly built IOS Project
 Located at APP_NAME_IOS
4. Double click on APP_NAME.xcodeproj to open in Xcode
5. 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 Info
6. Select your IOS Device from drop down list of devices next to the
run button
7. Click the Run button
JGari.com/resume

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. 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.  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. 1. http://tv.adobe.com/watch/cs-55-web-
premium-feature-tour-
2. http://jquerymobile.com
3. http://www.phonegap.com
4. http://html5doctor.com
5. http://www.sencha.com/products/touch
6. http://joapp.com
7. http://dhtmlx.com/touch
8. http://developer.apple.com
9. http://lampsig.org
10. http://www.meetup.com/LAMPsig
JGari.com/resume