Downloaded 28 times
More Related Content
Similar to Creating mobile web apps
Creating mobile web apps
- 1. Building cross-platform mobileweb applications
- 2. The strategy Useweb technology, not native Use frameworks to support the design Use standard packaging to distribute
- 3. Implementation HTML 5: the content JQuery Mobile : the framework W3C Widgets : the packaging Alternatives: Sencha framework : much steeper learning curve, but can lead to faster, more “native looking” apps Molly : for institutional services
- 4. Web Apps vsWebsites “ There isn't a line you can draw and say that things on this side are "web pages" and on that side they're "apps." 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
- 5. 1. Start witha basic page skeleton <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
- 6. 2. Add theviewport tag The viewport meta tag hints to mobile browsers how your site/application should be rendered. It is ignored by desktop browsers <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- 7. 3. Include JQueryMobile Copy and paste from: http://jquerymobile.com/download/ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
- 8. 4. Create amobile “page” <div id=“home” data-role =" page "> <div data-role =" header "> <h1>My App</h1> </div> <div data-role =" content "> <h1>Hello World</h1> </div> </div>
- 9. 5. Create adialog box First, create the button to open it in your content div: <a data-role=" button " href="#dialog" data- transition =" slidedown " >open dialog box</a>
- 10. 5. Create adialog box Next, the dialog box itself: <div id="dialog" data-role =" dialog " > <div data-role =" content "> <p>I am a dialog box</p> <a data-role =" button " href="#home">OK</a> </div> </div>
- 11. OK, lets tryit out
- 12.
- 13. 6. Themes <divdata-role="page" data-theme =" a " >
- 14. 7. Lists <ul data-role =" listview ” > <li><a href=”#1">Item1</a></li> <li><a href=”#2">Item2</a></li> <li><a href=”#3">Item3</a></li> </ul>
- 15. 7b Home buttons<div id="p1" data-role =" page "> <div data-role=" header "> <a href="#page " data-icon =" home " data-direction =" reverse " >Home</a> <h1>My App</h1> </div> <div data-role =" content "> <h1>Page One</h1> </div> </div>
- 16. 8 Fun StuffTransitions: Slideup, slidedown, twist, pop, fade flip… Button themes Groups, icons… Toggles and sliders
- 17. 9. Packaging W3CWidget config.xml <widget xmlns="http://www.w3.org/ns/widgets" id="http://my.widget”> <name>My App</name> <description>A silly app</description> <author>Me</author> </widget> NB: For Opera Widgets you have to make all your JQM refs local not CDN for some reason…
- 18. Distribution Hosting likeany other website Side-loading onto mobiles Installing as desktop widget using Opera Deploying in Apache Wookie as a website widget
- 19. Layouts with progressiveenhancement Media queries to detect desktop environments Mobile as default stylesheet <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and ( min-device-width:1024px )"/>