Kitchen Sink to App

887 views

Published on

My breakout session from Codestrong http://www.codestrong.com

Video is available on the Appcelerator Site http://www.appcelerator.com/showcase/videos/codestrong2011/

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
887
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kitchen Sink to App

  1. 1. From Kitchen Sink to App: Real World Case Studies or: How I Learned to Stop Worrying and Love the Kitchen Sink#codestrong
  2. 2. @Ketan Spirit Quest#codestrong
  3. 3. Case Studies#codestrong
  4. 4. Police Apps#codestrong
  5. 5. Brief Public Sector Engagement Transparency Open Data & Infrastructures Twitter Multiple Devices Cross Platform Police Live Tweeting http://www.flickr.com/photos/spiritquest/5070882391/in/set-72157619535937066/#codestrong
  6. 6. Decisions Device Reach Platform Tools GPS PhoneGap 29% Twitter Familiarity Titanium 39% Support / Roadmap Sencha Touch 32% Public Availability Native UI Sencha Touch Titanium PhoneGap#codestrong
  7. 7. Structured Approach Collaboration Workflow Coffee & WIFI Inspiration Wireframes App Concepts App Context Structures http://www.flickr.com/photos/spiritquest/4103710975/#codestrong
  8. 8. Outlines#codestrong
  9. 9. Outlines Splash/Loading page Twitter Website Email About Latest Local Surrey Map Phone Local police Crimes Settings Outcomes Contact Runnymede Terms of use Select your installed app. Important Phone Numbers Credits Officers that tweet Help - splash Priorities Email Us Twitter Events Visit our Site Facebook On Flickr Picture upload service On Twitter Want to see your Google RSS list of events neighbourhood here? On YouTube Report a crime Get Involved Email to Multizone and Surrey police List of officers Detail view of selected priority Dial/call 999 Text Service Officer Bio Prebuilt message Emergency Call Police runnymede Local Rate Phone website RSS feeds National Local Number (101) Local phone number Station location Latest incident tweets Facebook Tweet @Runnymedebeat 2 - step 1 Feed Police surrey Your Team website RSS feed 3 - step 2 Maps List of wards 4 - step 3 Officer list List of officers 5 - step 4 Social media icons Officer bio 6 - step 5 Priorities#codestrong
  10. 10. Mockups Splash/Loading page Twitter Website Email About Latest Local Surrey Map Phone Local police Crimes Settings Outcomes Contact Runnymede Terms of use Select your installed app. Important Phone Numbers Credits Officers that tweet Help - splash Priorities Email Us Twitter Events Visit our Site Facebook On Flickr Picture upload service On Twitter Want to see your Google RSS list of events neighbourhood here? On YouTube Report a crime Get Involved Email to Multizone and Surrey police List of officers Detail view of selected priority Dial/call 999 Text Service Officer Bio Prebuilt message Emergency Call Police runnymede Local Rate Phone website RSS feeds National Local Number (101) Local phone number Station location Latest incident tweets Facebook Tweet @Runnymedebeat 2 - step 1 Feed Police surrey Your Team website RSS feed 3 - step 2 Maps List of wards 4 - step 3 Officer list List of officers 5 - step 4 Social media icons Officer bio 6 - step 5 Priorities#codestrong
  11. 11. Mockups Splash/Loading page Twitter Website Email About Latest Local Surrey Map Phone Local police Crimes Settings Outcomes Contact Runnymede Terms of use Select your installed app. Important Phone Numbers Credits Officers that tweet Help - splash Priorities Email Us Twitter Events Visit our Site Facebook On Flickr Picture upload service On Twitter Want to see your Google RSS list of events neighbourhood here? On YouTube Report a crime Get Involved Email to Multizone and Surrey police List of officers Detail view of selected priority Dial/call 999 Text Service Officer Bio Prebuilt message Emergency Call Police runnymede Local Rate Phone website RSS feeds National Local Number (101) Local phone number Station location Latest incident tweets Facebook Tweet @Runnymedebeat 2 - step 1 Feed Police surrey Your Team website RSS feed 3 - step 2 Maps List of wards 4 - step 3 Officer list List of officers 5 - step 4 Social media icons Officer bio 6 - step 5 Priorities#codestrong
  12. 12. Mockups Splash/Loading page Twitter Website Email About Latest Local Surrey Map Phone Local police Crimes Settings Outcomes Contact Runnymede Terms of use Select your installed app. Important Phone Numbers Credits Officers that tweet Help - splash Priorities Email Us Twitter Events Visit our Site Facebook On Flickr Picture upload service On Twitter Want to see your Google RSS list of events neighbourhood here? On YouTube Report a crime Get Involved Email to Multizone and Surrey police List of officers Detail view of selected priority Dial/call 999 Text Service Officer Bio Prebuilt message Emergency Call Police runnymede Local Rate Phone website RSS feeds National Local Number (101) Local phone number Station location Latest incident tweets Facebook Tweet @Runnymedebeat 2 - step 1 Feed Police surrey Your Team website RSS feed 3 - step 2 Maps List of wards 4 - step 3 Officer list List of officers 5 - step 4 Social media icons Officer bio 6 - step 5 Priorities#codestrong
  13. 13. Mockups Splash/Loading page Twitter Website Email About Latest Local Surrey Map Phone Local police Crimes Settings Outcomes Contact Runnymede Terms of use Select your installed app. Important Phone Numbers Credits Officers that tweet Help - splash Priorities Email Us Twitter Events Visit our Site Facebook On Flickr Picture upload service On Twitter Want to see your Google RSS list of events neighbourhood here? On YouTube Report a crime Get Involved Email to Multizone and Surrey police List of officers Detail view of selected priority Dial/call 999 Text Service Officer Bio Prebuilt message Emergency Call Police runnymede Local Rate Phone website RSS feeds National Local Number (101) Local phone number Station location Latest incident tweets Facebook Tweet @Runnymedebeat 2 - step 1 Feed Police surrey Your Team website RSS feed 3 - step 2 Maps List of wards 4 - step 3 Officer list List of officers 5 - step 4 Social media icons Officer bio 6 - step 5 Priorities#codestrong
  14. 14. Working the Sink Emulator Check Platform Differences Buy Devices ExperienceStructure/Performance Time #codestrong
  15. 15. Working with Data XML Responses YQL {JSON} Filesystem Twitter & oAuth http://www.flickr.com/photos/spiritquest/5849484264/in/set-72157626393768195/#codestrong
  16. 16. Working with Data XML Responses filesystem.js YQL geolocation.js {JSON} map_view.js network.js Filesystem Resources examples picker_basic.js Twitter & oAuth table_view_layout.js table_view_row_append.js xhr_xml.js yql_flickr.js#codestrong
  17. 17. UI / UX Device Resolution Data Manipulation Caching Webview vs Native#codestrong
  18. 18. Mapping Map API vs Webview Local & Remote UK CrimeMapper Public Data#codestrong
  19. 19. Feedback and Testing Version Numbering Ti.App.Properties Changelogs Testflightapp Version Control http://www.flickr.com/photos/spiritquest/3782923164/in/set-72157621778256943/#codestrong
  20. 20. In The Field Populating Data Public Perception Bug Fixes Expectations Getting It Press#codestrong
  21. 21. In The Field Populating Data Public Perception Bug Fixes Expectations Getting It Press#codestrong
  22. 22. In The Field Populating Data Public Perception Bug Fixes Expectations Getting It Press#codestrong
  23. 23. In The Field Populating Data Public Perception Bug Fixes Expectations Getting It Press#codestrong
  24. 24. In The Field Populating Data Public Perception Bug Fixes Expectations Getting It Press#codestrong
  25. 25. Festival Apps#codestrong
  26. 26. Personal Challenges Data Management Microformats iUI (JS Library) Motivation http://www.flickr.com/photos/spiritquest/2457078664/in/set-72057594125240734/#codestrong http://www.flickr.com/photos/spiritquest/2460505217/in/set-72057594125240734/
  27. 27. Build on your success Police App Refactoring Research Q & A Site Github & Blogs Training Titanium Certified Application Developer http://www.flickr.com/photos/spiritquest/1374407445/#codestrong
  28. 28. Build on your success Police App Refactoring Research Q & A Site Github & Blogs Training Titanium Certified Application Developer http://www.flickr.com/photos/spiritquest/1374407445/#codestrong
  29. 29. Plot & Scheme Visual Challenges Problem Solving Personas Graphic Design Collaboration#codestrong
  30. 30. Future Design Attach Video CSV Add Thumbnails XML ICS EXCEL EXCEL Edit/Add Geodata ICS EDIT Existing Event FORMATS IMPORT REVIEW EXPORT LOGIN Choose Event Type ERROR HANDLING REPORTS EVENT EDITING IMPORT ADD New Event SIGN UP / SETUP Payment KEY VENUE EDITING & Addition Online Interface USER GUIDE Settings Social Media Connections Setup HELP EMAIL SUPPORT Contact Details Branding FORUM SUPPORT Image Upload (for App) Sponsor Details Festival Details Festival Name URL Sponsor Festival Trailer Sponsor Name Festival Logo Upload Sponsor Video Sponsor Festival Text / Synposis Text#codestrong
  31. 31. Outlines & Schemas Festival Venue: Nearest Phone Address Venue Name Venue ID Geo/ Long/Lat Email Website Box Office Station/Tube/ Venue Number Bus (•) Phone Number Genre Event Type Cast & Crew Events Pricing#codestrong
  32. 32. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  33. 33. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  34. 34. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  35. 35. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  36. 36. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  37. 37. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  38. 38. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  39. 39. Custom Views Wireframe iMockups Layout Design Data Caching Tracking Custom URLs Email Modal Dialog#codestrong
  40. 40. Icon Development icon@2x.png Retina Display icon.png HIG iTunesArtwork No Borders / Alpha Icon Details Check Emulator for Retina 512 x 512 px#codestrong
  41. 41. Strategies & Structures#codestrong
  42. 42. Break away from the sink Tackling Your First App Build/Install On Device Search / Explore Watch Out For Updates Install Direct From Studio Check Network for LIVE Apps http://www.flickr.com/photos/spiritquest/3601421463/in/set-72157619352436160/#codestrong
  43. 43. Pic n mix Find Kitchen Sink Examples Keep a Copy On Device. Native vs WebView Software Tools Ticket Tracking Consider Version Control http://www.flickr.com/photos/spiritquest/5604035309/in/set-72157626338910059/#codestrong
  44. 44. Get Help! Twitter Titanium / Javascript / Web App Meetups Q+A Participate Contribute Blogs / IRC / Github Books http://www.flickr.com/photos/spiritquest/5604047525/in/set-72157626338910059/#codestrong
  45. 45. Thank Youhttp://www.flickr.com/photos/spiritquest/5043558251/in/set-72157627151044919/ www.stereoartist.com/blog/codestrong-2011-session http://goo.gl/WFXb9#codestrong

×