J query mobile tech talk
description
Transcript of J query mobile tech talk
![Page 1: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/1.jpg)
Tech Talk presented by Visual Schedule
![Page 2: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/2.jpg)
Hello
![Page 3: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/3.jpg)
The Browser Wars
• There were no standards, so each browser required it’s own special coding to get your web page to display properly
![Page 4: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/4.jpg)
W3C Standards
• The W3C came in and implemented standards that every browser had to use, this solved the problem.
![Page 5: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/5.jpg)
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
![Page 6: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/6.jpg)
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
![Page 7: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/7.jpg)
JavaScript Libraries
![Page 8: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/8.jpg)
jQuery
• jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.
Write Less, Do More
![Page 9: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/9.jpg)
jQuery
jQuery Mobile jQuery UI
TouchPunch
![Page 10: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/10.jpg)
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
![Page 11: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/11.jpg)
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
![Page 12: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/12.jpg)
jQuery Mobile Overview
The jQuery Mobile
framework builds on top of the jQuery
core, providing a number of additional features
HTML and XML document object model
(DOM) traversing and manipulation
Event handling
Communication with the server (via Ajax)
Animation and image effects for web pages.
![Page 13: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/13.jpg)
• jQuery Mobile supports both high-end and less capable devices
jQuery Mobile Overview
![Page 14: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/14.jpg)
• 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
jQuery Mobile Overview
![Page 15: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/15.jpg)
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.
jQuery Mobile Overview
![Page 16: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/16.jpg)
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.
jQuery Mobile Overview
![Page 17: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/17.jpg)
Why it is Important?
![Page 18: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/18.jpg)
Multibrower Support
![Page 19: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/19.jpg)
“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
![Page 20: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/20.jpg)
What does jQuery do by itself?
![Page 21: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/21.jpg)
Java Script/jQuery code comparision
![Page 22: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/22.jpg)
Java Script/jQuery code comparision
![Page 23: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/23.jpg)
Java Script/jQuery code comparision
![Page 24: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/24.jpg)
What does jQuery Mobile do?
• It adds tons of easily usable elements most of which are based off data-*
![Page 25: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/25.jpg)
What it looks like
![Page 26: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/26.jpg)
Coding Demo
• The code is editable here:http://jsbin.com/enayan/1/edit
• A more complex layout:http://jsbin.com/welcome/32654/edit
![Page 27: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/27.jpg)
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/
![Page 28: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/28.jpg)
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
![Page 29: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/29.jpg)
jQuery
jQuery Mobile jQuery UI
TouchPunch
![Page 30: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/30.jpg)
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
![Page 31: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/31.jpg)
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/
![Page 32: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/32.jpg)
Which to choose?
jQuery UI/Touch Punch• Larger library, including
smoother drag and drop• Looks more like coding you
are already used to• jQuery Mobile themes can
look odd when not on mobile devices
jQuery Mobile• Smaller file size• Easier coding/debugging,
once you get used to it• Easier set up• More Native feel on mobile
devices• Only one file• Features “graceful
degradation”
![Page 33: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/33.jpg)
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
![Page 34: J query mobile tech talk](https://reader034.fdocuments.us/reader034/viewer/2022042601/54c71d824a79595e4e8b45c0/html5/thumbnails/34.jpg)
QUESTIONS?