Your SlideShare is downloading. ×
J query mobile tech talk
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

J query mobile tech talk


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Good supportSpecific example
  • Transcript

    • 1. Tech Talk presented by Visual Schedule
    • 2. The Browser Wars• There were no standards, so each browser required it’s own special coding to get your web page to display properly
    • 3. W3C Standards• The W3C came in and implemented standards that every browser had to use, this solved the problem.
    • 4. 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
    • 5. 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
    • 6. JavaScript Libraries
    • 7. jQuery• jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.
    • 8. jQueryjQuery jQuery UIMobile TouchPunch
    • 9. jQuery Mobile OverviewWhat 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
    • 10. 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
    • 11. jQuery Mobile Overview HTML and XML document object model The jQuery (DOM) traversing and manipulation Mobile framework Event handling builds on top of the jQuerycore, providing Communication with the server (via Ajax) a number of additional features Animation and image effects for web pages.
    • 12. jQuery Mobile Overview• jQuery Mobile supports both high-end and less capable devices
    • 13. 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
    • 14. jQuery Mobile OverviewAdvantages• 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.
    • 15. jQuery Mobile OverviewAdvantages• 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.
    • 16. Why it is Important?
    • 17. Multibrower Support
    • 18. “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
    • 19. What does jQuery do by itself?
    • 20. Java Script/jQuery code comparision
    • 21. Java Script/jQuery code comparision
    • 22. Java Script/jQuery code comparision
    • 23. What does jQuery Mobile do?• It adds tons of easily usable elements most of which are based off data-*
    • 24. What it looks like
    • 25. Coding Demo• The code is editable here:• A more complex layout:
    • 26. jQuery mobile code!• Brief jQuery Mobile Tutorial: mobile-need-to-know/• jQuert Mobile Tutorials:
    • 27. 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
    • 28. jQueryjQuery jQuery UIMobile TouchPunch
    • 29. 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
    • 30. 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:
    • 31. 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”
    • 32. 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
    • 33. QUESTIONS?