3. The Browser Wars
• There were no standards, so each browser
required it’s own special coding to get your
web page to display properly
4. W3C Standards
• The W3C came in and implemented standards
that every browser had to use, this solved the
problem.
5. The Mobile Browser Wars
• The problems of multi-browser support has
come back for phones
• Most of the market is now Droid and iOS,
which simplifies things,
but doesn’t solve them
6. A Solution
• jQuery Mobile is a cross device package that
simplifies creating web apps for mobile
devices
• Before getting too much into the details
though, we need to give an overview of how
javascript libraries work
10. jQuery Mobile Overview
What is jQuery Mobile?
jQuery Mobile is a web UI development
framework that is touch-friendly. It allows you
develop mobile web applications that work across
basically all smartphones and tablets.
jQuery’s motto is “write less, do more” and
jQuery Mobile certainly follows this trend
11. Why should I use jQuery Mobile?
• It is easy to use!
– The hard coding has already been done, all that is left
is the implementation
• It is already debugged!
– Any errors that occur are in a very limited area,
making debugging much easier (also, moves work
from coding to declaring, which is both good and bad)
• Maintainability!
– The simplified code makes it easier to edit and update
12. jQuery Mobile Overview
HTML and XML
document object model
The jQuery (DOM) traversing and
manipulation
Mobile
framework Event handling
builds on top
of the jQuery
core, providing Communication with
the server (via Ajax)
a number of
additional
features Animation and image
effects for web pages.
14. jQuery Mobile Overview
• jQuery Mobile focuses on creating a
framework that is compatible with a wide
variety of smartphones and tablet computers.
• The JQuery Mobile framework is compatible
with other mobile app frameworks and
platforms:
– PhoneGap
– Worklight
15. jQuery Mobile Overview
Advantages
• General simplicity:
– The framework is simple. You can develop pages
mainly using markup with little to no JavaScript.
• Small size:
– The jQuery Mobile framework is only 12KB for the
JavaScript library and 6KB for the CSS.
• Theming:
– It also provides a way to create your own application
styling.
16. jQuery Mobile Overview
Advantages
• Accessibility
– jQuery Mobile is built with accessibility in mind. It
supports Accessible Rich Internet Applications which
help make web pages accessible for assistive
technologies.
• Progressive enhancement:
– While implementing the latest HTML5, CSS3, and
JavaScript, the jQuery Mobile philosophy is to support
both high-end and less capable devices.
19. “Graceful Degradation”
• jQuery Mobile implements an idea called
graceful degradation.
– If a browser does not implement certain features,
jQuery Mobile uses alternate methods or simpler
versions rather than breaking
26. Coding Demo
• The code is editable here:
http://jsbin.com/enayan/1/edit
• A more complex layout:
http://jsbin.com/welcome/32654/edit
27. jQuery mobile code!
• Brief jQuery Mobile Tutorial:
http://www.1stwebdesigner.com/css/jquery-
mobile-need-to-know/
• jQuert Mobile Tutorials:
http://jquerymobile.com/demos/1.2.0/
28. How it applies to us
• Our app needs to have two distinct parts
– Reading (jQuery UI and Touch Punch):
• Only able to pull the schedules that have been made
from the server, and drag/drop tasks from “to-do” to
“finished”
• Only used on an iPad
– Authoring (jQuery Mobile):
• Able to push and pull from the server and create a
variety of different schedules/schedule types
• Needs to be functional from any device with an
internet connection
30. jQuery UI?
• jQuery UI is more similar to the jQuery Core
than jQuery Mobile is; jQuery UI still primarily
uses JavaScript rather than HTML additions.
– Like jQuery Mobile it adds many new features to
the jQuery Core
– However, despite having a greater variety of
added function, it lacks one key component:
innate touch recognition
31. Touch Punch!
• Touch Punch is an add on to jQuery UI that
adds touch functions
– It was originally made by one guy in about an
hour, so he could show his friend how to do it
– After he started getting a flood of requests for the
code, he decided to clean it up and share it with
the public
– The website has a good demo of the added
functions: http://touchpunch.furf.com/
32. Which to choose?
jQuery UI/Touch Punch jQuery Mobile
• Larger library, including • Smaller file size
smoother drag and drop • Easier coding/debugging,
• Looks more like coding you once you get used to it
are already used to • Easier set up
• jQuery Mobile themes can • More Native feel on mobile
look odd when not on devices
mobile devices • Only one file
• Features “graceful
degradation”
33. Conclusion
• jQuery Mobile helps ease cross platform coding
– This saves you from the hassle of dealing with a variety of
different browsers at different functionality levels
• jQuery Mobile helps simplify the coding process by
having a lot of pre-made, easy-to-use functions
– This will save you time, effort and a lot of frustration
during your build process
• jQuery Mobile incorporates a wide variety touch
events
– This allows you to fully utilize the touch screen capability
of mobile devices
