Creating a Slick Web App Using jQTouch
39
Creating a Slick Web App Using jQTouch
-
Upload
chad-mairn -
Category
Technology
-
view
114 -
download
0
description
According to jqtouch.com, jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.” Web apps can easily be created using jQTouch, and they resemble native apps. jQTouch includes native WebKit animations, automatic navigation, extensions for geo-location and offline capabilities, and themes built specifically for mobile WebKit browsers like the above-mentioned mobile devices. In this session, Chad Mairn will explain the differences between native and Web apps, highlight some free and useful web development tools, and will then demonstrate how to install and customize jQTouch in order to help kick start your library’s mobile Web presence.
Transcript of Creating a Slick Web App Using jQTouch
Creating a Slick Web App Using
jQTouch
http://www.slideshare.net/chadmairn
Timeline: http://bitly.com/u/chadmairn
at twitter.com/cmairn for automated tweets during today’s presentation! #MSULibCon
jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.”
Source: jqtouch.com,
http://net.educause.edu/ir/library/pdf/HR2011.pdf
Why libraries should have a mobile presence.
“Mobile phones create new kinds of bounded places that merge the infrastructures of geography and technology, as well as techno-social practices thatmerge technical standards and social norms." (Moll, 2007, p.12)
The mobile web is connecting people to information while they are on the go, so this is a great space for libraries!
Plus mobile phones have surpassed PCsand landline phones combined, so your potential audience is huge!
Quick Poll
“Fundamentally, 'mobile' refers to the user, not the
device or application.”
Barbara Ballard Designing the Mobile User Experience
Challenges and OpportunitiesChallenges: small screen size difficulty of data input user agent (browser) inconsistencies markup rendering
Opportunities: location specific data on-the-go messaging voice communication
Source: (Moll, 2007, p.21)
Four Methods
1. Do nothing and hope the site is rendered okay.
2. Reduce images and styling. (Mowser.com and Skweezer.net - reformat sites for mobile.)
3. Use handheld style sheets.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />
CSS can remove unnecessary styling and content.
For example: /* Handheld styles */ body {background-image:none;} #sidebar-ads {display: none;}
4. Create Mobile-optimized content. If your mobile site can’t be used while on the go, then you may want to consider removing it.
Source: http://www.cameronmoll.com/archives/000428.html
Important: ask your users what they want and watch them using your mobile site.
Small Screen Rendering (260 px)Desktop Small Screen
Emulated Website
Mobile Site Desktop Site
Emulators/Simulators: • dotMobi Emulator • Opera Mini Simulator • Mimic - emulates European and Japanese models: N400i and
N505i. • Android Emulator • BlackBerry Device Simulators • iPhone Dev Center• Palm Pre • Windows Mobile • JAVA ME - Java Platform Micro Edition was termed J2ME. It is
considered one of the most ubiquitous application platform for mobile devices.
Editors and Tools• You can use a simple text editor (e.g., Notepad) or a more sophisticated application
(e.g., Dreamweaver).
• Adobe Device Central is part of Adobe’s CS program and helps test web applications/sites on many mobile devices.
• iUI for iPhone and other comparable devices.
• MIT Mobile Web Open Source Project
• Device detection with http://detectmobilebrowsers.mobi/ or use a variety of scripts.
• To see your browser's HTTP Headers. Works on mobile browsers. http://rabin.mobi/http
• Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a mobile browser.
<p><a class="call" href="tel:17273417177" accesskey="0">Call the Library</a> | (727) 341-7177<br />
<a href="wtai://wp/ap;+17273417177; SPC%20Library">[Add to Phone Book]</a><br />
A simple mobile-optimized Website created using HTML and CSS can work on all devices!
Or you can build something using HTML, CSS, and JavaScript that acts like a native app!
Built using jQTouch Built using jQuery Mobile
Native Apps vs. Web AppsIssues Native apps Web apps
Internet access Not required Required, except for apps written in HTML5 (offline capabilities)
Shareable content (Twitter etc.)
Only if it is built in to the app Web links can be shared. Social API’s allow 1-click posting
Access to hardware sensors Yes: camera, gyroscope, microphone, compass, accelerometer, GPS
Access thru browser is limited. Geolocation works!
Development Build app for target platform (Android, iOS etc.)
Write once, publish once, view it anywhere.
Distribution Most app stores require approval.
No hassles.
Source: http://www.webmonkey.com/2010/08/how-do-native-apps-and-web-apps-compare/
jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.”
Source: jqtouch.com,
jQTouch
• User interface panels• Themes• Navigation• Animations• Events (e.g., tap)• Supports WebKit Browsers
Getting Started with jQTouch1. Visit www.jqtouch.com and download the archive (.zip) file.
2. Extract the 116 files from the archive (.zip) file to a folder on your computer.
Demos Included with jQTouch
How does jQTouch Work?
Basically, there is 1 HTML file and <div> tags are setup for each panel. It reminds me of a really
large Web page connected by anchor tags. And themes can easily be changed thanks to CSS.
jQTouch is using jQuery 1.4.2 and it can be loaded dynamically from Google Code, so you’d insert the following within the <head> tag.
Or you can add the .js files locally.
Change Themes
Testing and validation
Test Page Speed in Firebug
Other jQTouch/jQuery Examples
• Florida Library Association’s Mobile-optimized Conference Program was built using jQTouch.
• Florida’s Ask-a-Librarian Mobile is using jQTouch.
• Montana State University Library built their mobile-optimized website using jQuery Mobile.
• m.untappd.com, a powerful social beer web site, is using jQuery Mobile.
jQTouch - http://jqtouch.com jQuery Mobile - http://jquerymobile.com Sencha Touch - http://www.sencha.com Titanium - http://www.appcelerator.com
Other Mobile Development Options
Select Resources
Mehta, N. (2008). Mobile web development: Building mobile websites, SMS and MMS messaging, mobile payments, and automated voice call systems with XHTML MP, WCSS, and mobile AJAX. Birmingham [England: Packt Pub.]
Moll, Cameron. Mobile Web Design: A Web Standards Approach for Delivering Content to Mobile Devices. Salt Lake City, UT: Cameron Moll, 2007. Print.
Stark, J. (2010). Building iPhone apps with HTML, CSS, and JavaScript. Farnham: O'Reilly.
Ting, R., & Cartman, J. (2009). Strategic mobile design: Creating engaging experiences. Berkeley, CA: New Riders.
Mobile Friendly Library Websites by Fleur Helsingor http://www.lib.berkeley.edu/digicoll/libraryweb/mobile-websites.pdf
Developing the MIT Mobile Web: http://www.nercomp.org/data/media/3.%20Developing%20the%20MIT%20Mobile%20Web.pdf
2010 Horizon Report: http://wp.nmc.org/horizon2010/
Mobile User Experience (MEX) Conference (Manifesto: http://www.mobileuserexperience.com/?p=326
XHTML Mobile Profile / XHTML MP Tutorial http://www.developershome.com/wap/xhtmlmp/
Comparison of CSS 2.1, CSS MP, WCSS and CSS Level 1 http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1
Mobile Browser ID (User-Agent) Strings http://zytrax.com/tech/web/mobile_ids.html
User Agent Switcher extension for Firefox http://addons.mozilla.org/en-US/firefox/addon/59/
Page Speed works in Firebug http://code.google.com/speed/page-speed/
APIs and Mashups For The Rest Of Us http://www.digital-web.com/articles/apis_and_mashups/
Mobile Marketing Association http://mmaglobal.com/main
http://www.slideshare.net/chadmairn
Timeline: http://bitly.com/u/chadmairn
HangoutWe can also meet later via Skype or a
