Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating mobile web apps


Published on

Published in: Technology, Design
  • Hello! I can recommend a site that has helped me. It's called ⇒ ⇐ So make sure to check it out!
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here

Creating mobile web apps

  1. 1. Building cross-platform mobile web applications
  2. 2. The strategy <ul><li>Use web technology, not native </li></ul><ul><li>Use frameworks to support the design </li></ul><ul><li>Use standard packaging to distribute </li></ul>
  3. 3. Implementation <ul><li>HTML 5 : the content </li></ul><ul><li>JQuery Mobile : the framework </li></ul><ul><li>W3C Widgets : the packaging </li></ul><ul><li>Alternatives: </li></ul><ul><li>Sencha framework : much steeper learning curve, but can lead to faster, more “native looking” apps </li></ul><ul><li>Molly : for institutional services </li></ul>
  4. 4. Web Apps vs Websites <ul><li>“ There isn't a line you can draw and say that things on this side are &quot;web pages&quot; and on that side they're &quot;apps.&quot; It’s more of a common-sense definition: Google Docs is an app, Wikipedia is not. If I had to define one factor, it would be how long do you go between page loads? In an app, you may work for an hour or more before reloading the page.” - Zachary Kessin </li></ul>
  5. 5. 1. Start with a basic page skeleton <ul><li><!DOCTYPE html> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. 2. Add the viewport tag <ul><li>The viewport meta tag hints to mobile browsers how your site/application should be rendered. It is ignored by desktop browsers </li></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;> </li></ul>
  7. 7. 3. Include JQuery Mobile <ul><li>Copy and paste from: </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;; /> </li></ul><ul><li><script src=&quot;;></script> </li></ul><ul><li><script src=&quot;;></script> </li></ul>
  8. 8. 4. Create a mobile “page” <ul><li><div id=“home” data-role =&quot; page &quot;> </li></ul><ul><li><div data-role =&quot; header &quot;> </li></ul><ul><li><h1>My App</h1> </li></ul><ul><li></div> </li></ul><ul><li><div data-role =&quot; content &quot;> </li></ul><ul><li><h1>Hello World</h1> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  9. 9. 5. Create a dialog box <ul><li>First, create the button to open it in your content div: </li></ul><ul><li><a data-role=&quot; button &quot; href=&quot;#dialog&quot; data- transition =&quot; slidedown &quot; >open dialog box</a> </li></ul>
  10. 10. 5. Create a dialog box <ul><li>Next, the dialog box itself: </li></ul><ul><li><div id=&quot;dialog&quot; data-role =&quot; dialog &quot; > </li></ul><ul><li><div data-role =&quot; content &quot;> </li></ul><ul><li><p>I am a dialog box</p> </li></ul><ul><li><a data-role =&quot; button &quot; href=&quot;#home&quot;>OK</a> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  11. 11. OK, lets try it out
  12. 12. <ul><li> </li></ul>
  13. 13. 6. Themes <ul><li><div data-role=&quot;page&quot; data-theme =&quot; a &quot; > </li></ul>
  14. 14. 7. Lists <ul><li><ul data-role =&quot; listview ” > </li></ul><ul><li><li><a href=”#1&quot;>Item1</a></li> </li></ul><ul><li><li><a href=”#2&quot;>Item2</a></li> </li></ul><ul><li><li><a href=”#3&quot;>Item3</a></li> </li></ul><ul><li></ul> </li></ul>
  15. 15. 7b Home buttons <ul><li><div id=&quot;p1&quot; data-role =&quot; page &quot;> </li></ul><ul><li><div data-role=&quot; header &quot;> </li></ul><ul><li><a href=&quot;#page &quot; data-icon =&quot; home &quot; data-direction =&quot; reverse &quot; >Home</a> </li></ul><ul><li><h1>My App</h1> </li></ul><ul><li></div> </li></ul><ul><li><div data-role =&quot; content &quot;> </li></ul><ul><li><h1>Page One</h1> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  16. 16. 8 Fun Stuff <ul><li>Transitions: </li></ul><ul><ul><li>Slideup, slidedown, twist, pop, fade flip… </li></ul></ul><ul><li>Button themes </li></ul><ul><ul><li>Groups, icons… </li></ul></ul><ul><li>Toggles and sliders </li></ul>
  17. 17. 9. Packaging <ul><li>W3C Widget config.xml </li></ul><ul><li><widget xmlns=&quot;; </li></ul><ul><li>id=&quot;http://my.widget”> </li></ul><ul><li><name>My App</name> </li></ul><ul><li><description>A silly app</description> </li></ul><ul><li><author>Me</author> </li></ul><ul><li></widget> </li></ul><ul><li>NB: For Opera Widgets you have to make all your JQM refs local not CDN for some reason… </li></ul>
  18. 18. Distribution <ul><li>Hosting like any other website </li></ul><ul><li>Side-loading onto mobiles </li></ul><ul><li>Installing as desktop widget using Opera </li></ul><ul><li>Deploying in Apache Wookie as a website widget </li></ul>
  19. 19. Layouts with progressive enhancement <ul><li>Media queries to detect desktop environments </li></ul><ul><li>Mobile as default stylesheet </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;default.css&quot; media=&quot;screen&quot;/> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;desktop.css&quot; media=&quot;screen and ( min-device-width:1024px )&quot;/> </li></ul>