Upload
chris-griffith
View
634
Download
0
Embed Size (px)
DESCRIPTION
As more and more projects are requiring mobile applications, developers are faced with a wide range of options. AIR for mobile? PhoneGap? Titanium's Appcelerator? Sencha? Native? Which development environment makes sense? This session will explore the advantages and limitations of each of these environments from someone who has been in the mobile application development world for over 4 years. Get a clear picture of what these technologies can offer for your mobile development needs.
Citation preview
Choosing the Right Mobile Development Platform (Part 2)
@ChrisGriffith
What does jQuery Mobile do?
jQuery Mobile makes it easy to develop user interfaces for mobile web apps.
<body><div id="homePage" data-role="page">
<div data-role="header"><h1>Header</h1>
</div><div data-role="content">
<p>Content</p></div><div data-role="footer">
<h4>Footer</h4></div>
</div></body>
Basic Structure
Basic Structure
<body><div id="homePage" data-role="page">
<div data-role="header"><h1>Page Title</h1>
</div><div data-role="content">
<p>My page content</p><p><a href="#about">About this app</a></p>
</div><div data-role="footer">
<h4>Footer</h4></div>
</div><div data-role="page" id="about">
<div data-role="header"><h1>About This App</h1>
</div><div data-role="content">
<p>This app rocks! <a href="#homePage">Go home</a></p></div>
</div></body>
Basic Structure
Performance
$(document).bind("mobileinit", function() { $.mobile.defaultPageTransition = "none"; $.mobile.defaultDialogTransition = "none";});
Performance
Device Access?
Limited
Device by device
But…
Getting better
Templating
Templating
$('#hikeDetailsPage').live('pageshow', function(event) {var hikeDetailsHTML;
hikeDetailsHTML = Mustache.to_html(hikeDetailsTemplate, currentHikeData);
$('#hikeDetails').html(hikeDetailsHTML);});
Styling
iOS
iOS
Android
Android
This presentation continues in part 3