Creating cross-platform mobile apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Creating cross-platform mobile apps

on

  • 1,579 views

Here is the deck for the "Creating Cross Platform Mobile Apps" presentation I gave at the Refresh Austin meeting on Apr 12, 2011

Here is the deck for the "Creating Cross Platform Mobile Apps" presentation I gave at the Refresh Austin meeting on Apr 12, 2011

Statistics

Views

Total Views
1,579
Views on SlideShare
1,579
Embed Views
0

Actions

Likes
1
Downloads
43
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
  • first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
  • first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
  • first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
  • \\\n
  • \\\n
  • \\\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
  • icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
  • icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
  • icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
  • icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
  • make sure to show \n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • make sure to show the data providers and transitionstransitions are fade, flip, pop, slide, slideup, slidedown\n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • \n
  • there are more ways to do this stuff. we talked about 2 ways I am most familiar with. \n
  • \n

Creating cross-platform mobile apps Presentation Transcript

  • 1. Building cross-platform mobile apps with your existing chopsRefresh Austin - April 12, 2011
  • 2. INTRO
  • 3. INTRO• Who am I?
  • 4. INTRO• Who am I?• Why am I giving this talk?
  • 5. INTRO• Who am I?• Why am I giving this talk?• What should you take away from this presentation?
  • 6. INTRO• Who am I?• Why am I giving this talk?• What should you take away from this presentation?• This talk is about mobile apps, not mobile websites That being said, I would love to hear someone volunteer to talk about Responsive web design at an upcoming meeting
  • 7. one thing
  • 8. I don’t claim to be a ninja with this stuff yet
  • 9. if I am a ninja, it’s more like this
  • 10. Another thing before we start...
  • 11. Native apps are better. I know.
  • 12. Native apps are better. I know.They are just not practical for everyproject and budget.
  • 13. Sencha Touch
  • 14. SENCHA TOUCH
  • 15. SENCHA TOUCH• Touch gestures and scrolling physics built in
  • 16. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)
  • 17. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)• Lots of ways to hook into data
  • 18. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)• Lots of ways to hook into data• Powerful theming
  • 19. USING SENCHA
  • 20. USING SENCHA• You will need to learn a bit about Ext.js
  • 21. USING SENCHA• You will need to learn a bit about Ext.js• Do some reading on Panels and Layouts (URL later)
  • 22. USING SENCHA• You will need to learn a bit about Ext.js• Do some reading on Panels and Layouts (URL later)• Panelsand layout concepts are not CSS-like and the syntax can get fugly
  • 23. SENCHA THEMES
  • 24. SENCHA THEMES• Easy to change the overall appearance
  • 25. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel
  • 26. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel• Complete set of png-based icons
  • 27. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel• Complete set of png-based icons• Uses SASS / Compass to generate CSS
  • 28. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel• Complete set of png-based icons• Uses SASS / Compass to generate CSS• Unfortunately, not well documented to date I will give you a link to some information I’ve found at the end of the presentation
  • 29. Let’s take Sencha out for a spin
  • 30. jQuery Mobile
  • 31. JQUERY MOBILE
  • 32. JQUERY MOBILE• HTML 5 based
  • 33. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha
  • 34. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha
  • 35. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha• Much smaller than Sencha
  • 36. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha• Much smaller than Sencha• CSS-based layouts - much easier to start with
  • 37. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha• Much smaller than Sencha• CSS-based layouts - much easier to start with• Easy to theme
  • 38. Let’s take jQuery Mobile out for a spin
  • 39. PhoneGap
  • 40. PHONEGAP• Putsa “wrapper” around your HTML5 apps so that they can be placed on the various App Stores• Allows you to access native features of phone• Up to recently, you needed to have the SDK installed for each platform you want to target, and follow a slightly different process for each one• With Phonegap Build, they do all this for you
  • 41. Let’s take Phonegap out for a spin
  • 42. A final comment:Sencha, jQuery Mobile are not the onlyoptions for cross-platform mobile apps...
  • 43. Thanks for listening!The links used in this presentation can be found at:http://delicious.com/2sidesdesign/refreshmobileVisit our site:http://2sidesdesignstudio.comFollow us on Twitter:@2sidesdesign