Embed Size (px)
DESCRIPTION
The Codeworks presentation on mobile front ends including PhoneGap, jQuery Mobile, CSS Shaders and Proto.
Citation preview
Mobile Apps with PhoneGap and jQuery MobileTerry Ryan Worldwide Developer Evangelist@tpryan
Who Are You?
Why jQuery Mobile?
Fixed position toolbar
Expand <a> to fill entire <li> space for touchability
Fixed position toolbar that doesn’t work in Android, yet
Replace default link following with Ajax call and replacing <body>
Add margins to list to make work with toolbars
Also it doesn’t display right.
Doesn’t work on all mobile browsers
Doing it yourself sucks.
Especially if someone else
has done it
<div data-role=“header”>
<div data-role=“footer”>
<ul data-role="listview”>
<a> No AJAX required
Entire app is one HTML document
Works perfectly in many browsers, gracefully degrades in most.
jQuery makes stuff easy
jQuery has a huge
ecosystem
GETTING STARTED WITH JQUERY MOBILE
<!DOCTYPE html> <html> <head> <title>Codeworks</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /><script type="text/javascript" src="jquery-1.6.4.min.js"></script><script type="text/javascript" src="jquery.mobile-1.0.min.js"></script></head>
Basic Page Start
Page Model
<div data-role="page" id="landing" ><div data-role="header">
<!-- header content --></div><div data-role="content">
<!-- Page content --></div><div data-role="footer" >
<!-- Footer content --></div>
</div>
Basic Page Layout
<div data-role="page" id="landing"><!-- page content -->
</div>
<div data-role="page" id="detail"><!-- page content -->
</div>
<div data-role="page" id="map"><!-- page content -->
</div>
Basic Page Layout
<a href="#map" class="ui-btn-active">Map</a>
Navigation
<div data-role="page" id="second" data-add-back-btn="true">
Navigation
<ul data-role="listview"><li><a href="#second">Second</a></li><li><a href="#third">Third</a></li>
</ul>
Data Lists
<div data-role="navbar"><ul><li><a href="#landing" class="ui-btn-active">Schedule</a></li><li><a href="#map">Map</a></li></ul></div>
Tab Menus
<form > <label for="username">Username:</label> <input type="text" name="username" id="username" /> <label for="password">Password:</label> <input type="password" name="password" id="password" /> <input type="submit" name="submit" value="Login" /></form>
Forms
THEME ROLLER
I want my own design
• Download jQuery Mobile– http://jquerymobile.com/
• Check out killer documentation– http://jquerymobile.com/demos/1.0/
• Check out Theme Roller– http://jquerymobile.com/themeroller/
Next Steps with jQuery Mobile
We have a web app
We need a native app
Why do we need native?
CameraCompass
Accelerometer
The ease of web
the access of native
Enter PhoneGap
PhoneGap packages a
web app into a “native” app
What do you mean by
“native” apps
Apps can be distributed in
stores
UI is not native
PHONEGAP BUILD
One pain point: Lots of
software
Enter PhoneGap
Build
• Setup build– Certificates– Provision files
• Get code to cloud– Upload– Link to git repository
• Have servers build app files
PhoneGap Build
Demo
PhoneGap Build
• Look at Phone Gap– http://phonegap.com/
• Get started – http://phonegap.com/start
• Phone Gap Build– https://build.phonegap.com/
Next Steps with Phone Gap
ADOBE SNEAKSCSS Shaders and Proto
What if browsers could do more?
Enter CSS Shaders
Cinematic effects for the
web
Demo
CSS Shaders
Tablets are just about
consumption
Enter Adobe Proto
Proto is an whiteboarding app for tablets that output to
HTML
Demo
Proto
• More About CSS Shaders– http://www.adobe.com/devnet/html5/
articles/css-shaders.html
• More about Proto– http://www.adobe.com/products/
proto.html
Next Steps with Adobe
CONCLUSIONS
Timeout
Apps people have to use
Apps people love to use
![4 - Mobile Application Management [Compatibiliteitsmodus]20-%20Mobile%20Application%20Manageme… · −Apache Cordova (previously PhoneGap) −Dojo Mobile −jQuery −Sencha Supported](https://img.pdfslide.net/doc/110x75/5e0cd7ce16703823e9050184/4-mobile-application-management-compatibiliteitsmodus-20-20mobile20application20manageme.jpg)
