Introduction to j query mobile framework
-
Upload
shreerang-patwardhan -
Category
Technology
-
view
117 -
download
2
description
Transcript of Introduction to j query mobile framework
![Page 1: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/1.jpg)
INTRODUCTION TO JQUERY MOBILE FRAMEWORK
![Page 2: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/2.jpg)
ABOUT THE AUTHORName: Shreerang Patwardhan
A Sr. Web Developer with a MNC in India and loves the Jquery Mobile Framework. He actively blog about Jquery Mobile on his blog “Spatial Unlimited”.
![Page 3: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/3.jpg)
AGENDA
Overview Why mobile? What’s the big deal? The problem Responsive Web Design What’s Jquery Mobile? Why Jquery Mobile?
Features Compatibility (Supported Platforms)
Jquery Mobile Components (JQM 1.3.1 is used) Theming Debugging mobile applications Pros & Cons of Jquery Mobile
![Page 4: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/4.jpg)
WHY MOBILE?
Personal Billion Users Will be the #1 web
browsing device soon
Makes users focus Always available … and everywhere
![Page 5: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/5.jpg)
WHAT’S THE BIG DEAL?
Web development is still HTML, CSS, Javascript; isn’t it? What’s
the big deal with the mobile web then?
![Page 6: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/6.jpg)
THE PROBLEM… WELL PROBLEMS
![Page 7: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/7.jpg)
CLIENT REQUIREMENTS V/S WHAT IS ACHIEVABLE
What Clients want What is achievable
![Page 8: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/8.jpg)
LOTS OF PLATFORMS Tizen Jolla Firefox OS Ubuntu OS Android iOS Blackberry Windows Bada Meego Symbian S40 Nokia Proprietary … and about a ton more Further fragmented in
versions as well…
![Page 9: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/9.jpg)
LOTS OF MOBILE WEB BROWSERS Too many (some) too limited (some) too innovative (some) proxy based (most) without
documentation (most) without a name (most) without debugging
tools (some) touch based (some) multi-touch based (some) with zooming
support (most) unknown to web
devs (all) available in various
versions
![Page 10: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/10.jpg)
OTHER MAJOR CHALLENGES Mobile devices available in several form factors (sizes)
Mobile devices ranging from 2” to 5” Phablets ranging from 5” to 7” Tablets ranging from 7” to 10”
Comparisons to native web applications Speed Animations
Lack of definitions Mobile web lacks standards and a defined set of rules There are no guidelines set to mobile web development
Testing & Debugging Device specific issues OS version specific issues Browser specific issues … and yes a combination of all the above
![Page 11: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/11.jpg)
RESPONSIVE WEB DESIGN
![Page 12: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/12.jpg)
INTRODUCTION TO RESPONSIVE WEB DESIGN
Why do we need RWD?
It is an approach aimed at crafting sites to provide an Optimal Viewing Experience across a wide range of devices.
Portrait and Landscape mode on the same device
Scalability across device form factors All widths to be in percentage Images should be responsive too…
![Page 13: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/13.jpg)
JQUERY MOBILE FRAMEWORK
![Page 14: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/14.jpg)
INTRODUCTION TO JQUERY MOBILE
What is Jquery Mobile?
It is a unified UI system that works seamlessly across popular mobile device platforms.
Built on HTML5, CSS3, Jquery and Jquery UI. A wide variety of mobile platforms are targeted,
so that no browser or device is left behind. All Jquery pages are built using a clean,
semantic HTML to ensure compatibility with a wide range of platforms.
Accessibility features like the WAI-ARIA are tightly integrated.
![Page 15: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/15.jpg)
INTRODUCTION TO JQUERY MOBILE
Why Jquery Mobile?
Jquery Mobile is a new, easy to learn and simple to use UI framework for building cross-platform mobile web applications.
The framework is optimized to run on several phones, phablets, tablets, desktops and e-readers.
Helps create a unified user-experience across various platforms.
Constantly evolving and improving. A large user base and community.
![Page 16: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/16.jpg)
JQUERY MOBILE FEATURES
Lightweight and minimal dependency on images Progressive enhancement Responsive Design Powerful AJAX-navigation system Touch and mouse event support Powerful theming framework Easily customizable Built on Jquery core Compatible on various device platforms and
mobile web browsers HTML5 markup-driven configuration for fast
development and minimal required scripting
![Page 17: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/17.jpg)
JQUERY MOBILE SUPPORTED PLATFORMS
Platform support is available in 3 grades A-grade : Fully enhanced experience with AJAX-
based animated page transitions B-grade : Enhanced experience without the
AJAX navigation features C-grade: Basic, non-enhanced HTML experience
that is still functional
![Page 18: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/18.jpg)
JQUERY MOBILE SUPPORTED PLATFORMS (A-GRADE)
Platforms Browsers
Apple iOS 3.2*-6.1 Chrome for Android 18
Android 2.1-2.3 Skyfire 4.1
Android 3.2 Opera Mobile 11.5-12
Android 4.0 UC Browser
Windows Phone 7.5-7.8 Internet Explorer 8-10
Blackberry 6-10 Firefox Desktop 10-18
Blackberry Playbook (1.0-2.0) Opera Desktop 10-12
Palm WebOS (1.4-3.0) Safari Desktop 5-6
Firefox Mobile 18 Chrome Desktop 16-24
Tizen
Meego 1.2
Samsung Bada 2.0
Kindle3, Fire and Fire HD
![Page 19: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/19.jpg)
JQUERY MOBILE COMPONENTS
![Page 20: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/20.jpg)
JQUERY MOBILE – SINGLE PAGE ARCHITECTURE Page is a primary unit of interaction in Jquery Mobile. Jquery Mobile page must start with HTML5 doctype. In the head – references to Jquery, Jquery Mobile and
Jquery Mobile CSS are all required to strat things off. Include the mobile spedific viewport meta tag. Inside the <body> tag, each view or “page” on the
mobile device is identified with an element (usually a div) with the data-role=“page” attribute.
For typical pages in Jquery Mobile, the intermediate children of a “page” are divs with data roles of “header”, “content” and “footer”.
Demo link: Basic single page template
![Page 21: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/21.jpg)
JQUERY MOBILE – MARKUP ENHANCEMENT
Semantic HTML Markup
Jquery Mobile Page
Enhancements
![Page 22: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/22.jpg)
JQUERY MOBILE – MULTI PAGE ARCHITECTURE
Multiple “pages” are loaded by stacking multiple divs with a data-role of “page”
Each “page” block needs to have a unique id which is used to link internally.
All “pages” loaded at once and so available in the DOM at the same time.
Demo link: Basic multi page template
![Page 23: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/23.jpg)
JQUERY MOBILE – AJAX NAVIGATION & TRANSITIONS Jquery Mobile includes a navigation system to load pages
into the DOM via AJAX, enhance the new content, then display pages with a rich set of animated transitions.
Jquery Mobile supports a wide range of animations for inter-page transitions, opening/closing dialogs, pop-ups, panels and many such components.
Transitions supported include: Fade Pop Flip Turn Flow Slidefade Slide SlideUp SlideDown None
Some patforms currently have issues with transitions, especially Android
Devices that lack 3D support will fail for several transitions and fallback to “fade”
Caution: Use transitions with care Demo link: Inter Page transitions
![Page 24: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/24.jpg)
JQUERY MOBILE - LISTVIEWS A listview is coded as a simple unordered list (ul) or an ordered list
(ol) with data-role=“listview” attribute and has a wide range of features and theming.
Read only ordered/unorderd Linked Inset Filter Filter reveal List dividers Auto list dividers Count bubbles Icons Thumbnails Split buttons Formatted content Theming icons Customization – The easy way & The challenging way
![Page 25: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/25.jpg)
JQUERY MOBILE – COLLAPSIBLE LISTVIEW
Creating a collapsible listview or in common terms the Accordion control is simple with Jquery Mobile.
Wrap your content within a div with data-role=“collapsible”
A collection of collapsibles can be created by wrapping the divs with data-role=“collapsible” within a div with data-role=“collapsible-set”
Collapsible/ Accordion Collapsible Set
![Page 26: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/26.jpg)
JQUERY MOBILE – FORM ELEMENTS All form elements are native form elements enhanced to make
them more attractive and finger-friendly. HTML5 input types are further enhanced. Buttons Slider Range slider Flip switch Check boxes Radio buttons Selects Text inputs & Textareas
Different styles with the basic input type text Other input types Advantage of HTML5 input types in the mobile web Customizing the input type search
Native Form elements Refreshing form elements
![Page 27: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/27.jpg)
JQUERY MOBILE – TOOLBARS & NAVBARS Header Toolbar
Serves as a page title Usually the first element inside each mobile page Usually contains page title and up to 2 buttons Demo link: Header Toolbar
Footer Toolbar Usually the last element inside each mobile page More freedom compared to the header toolbar Usually contains a combination of text and buttons Demo link: Footer Toolbar
Navbar A coded unordered list of links wrapped in a container
element with data-role=“navbar” Useful for providing up to 5 buttons with optional icons in a
bar Demo link: Navbar
![Page 28: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/28.jpg)
JQUERY MOBILE - DIALOGS
A page presented as a modal dialog. Implementation is done in 2 parts:
Anchor link with data-rel=“dialog” A container element with data-role=“dialog”
Animation can be provided using data-transition attribute.
Jquery Mobile dialog can be implemented in 2 ways: Using a multi-page approach Including the dialog in a different HTML page
altogether Demo link: Dialog
![Page 29: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/29.jpg)
JQUERY MOBILE - POPUP
Wide range of implementation from a small tooltip to a large photo lightbox.Implementation is done in 2 parts: Anchor link with data-rel=“dialog” A container element with data-role=“dialog”
Animation can be provided using data-transition attribute
Basic Popup Tooltip Photo lightbox Menu popup Nested menu popup Form popup
![Page 30: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/30.jpg)
JQUERY MOBILE - PANELS
Popular mode of providing site navigation Panel markup is at the same level (sibling to)
other components like header, content and footer inside a Jquery Mobile page.
Animations can be provided for opening/closing a panel.
Absolute positioned and fixed positioned panels are used.
Responsive non-modal panel can be created for larger displays
Basic Panel Panel with position fixed Responsive Panel
![Page 31: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/31.jpg)
JQUERY MOBILE – TABLE: COLUMN TOGGLE
Selectively hide columns at narrower widths. Allows users to select which columns they
want to see. Set the priority for each column using “data-
priority” attribute. Important markup: <table data-role=“table”
data-mode=“columntoggle” id=“my-table”> Demo link: Table: Column Toggle
![Page 32: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/32.jpg)
JQUERY MOBILE – TABLE: REFLOW
A stacjed representation of table columns like blocks of label/data pairs of each row.
Table element should be with data-role=“table”
thead and tbody elements need to be included.
A preset responsive breakpoint can be applied via ui-responsive class.
Custom breakpoints can also be included. Demo link: Table: Reflow
![Page 33: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/33.jpg)
JQUERY MOBILE - GRIDS
Jquery Mobile provides a simple way to build CSS-based clumns which can also be made responsive.
Grids are - 100% width Completely invisible (no borders, no
backgrounds, no padding, no margins) Single, 2-column, 3-column, 4-column, 5-column
and responsive Fixed column grid Responsive grid
![Page 34: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/34.jpg)
THEMEROLLER & SWATCHES
Jquery Mobile theme contains a global setting for things like rounded corner radius and active (on) states.
Up to 26 swatches lettered from A-Z can be creaated.
ThemeRoller allows for easy customization and creation of themes which can be shared and downloaded.
Demo link: http://jquerymobile.com/themeroller
![Page 35: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/35.jpg)
WHAT DESIGNERS SHOULD TAKE CARE OF.. Fixed footer should be avoided as it causes a lot of
issues in the iOS and Android devices. JQM default styles which include background-gradient,
rounded corners should be used. Icon sizes should always be double the actual size which
is required for retina display devices. Inter-page transitions should be avoided as Android does
not support transitions really well. Listviews should be an integral part of the design if
Jquery Mobile framework is to be used. Large content in dialogs and popups must be avoided as
scrolling the content in dialogs and popups results in several issues in various platforms and browsers.
Tables with large number of columns and tabular layout in general should be avoided.
![Page 36: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/36.jpg)
MOBILE APPLICATION DEBUGGING
![Page 37: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/37.jpg)
DEBUGGING ON DESKTOP
Mozilla Firefox is your best friend. Offers resizing your browser to various mobile
device sizes (Press Ctrl+Shift+M) Firebug to override the Jquery Mobile default
CSS. User-agents help to some extent in resolving
the platform OS version specific issues. Caution: Changing user-agent does not help
resolving platform-specific and device-specific issues.
![Page 38: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/38.jpg)
DEBUGGING ON IOS PLATFORM
Remote debugging can now be done from iOS 6 and above.
Connect your iOS 6 device to your Mac machine and open up Safari browser on your machine.
Select the remote debugging option and you can debug your web page on the connected iOS device.
Requirements: Mobile OS version: iOS 6 Mac machine Safari browser on Mac machine version: 6.0+
![Page 39: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/39.jpg)
DEBUGGING ON ANDROID PLATFORM
Requirements Android device with Chrome browser installed Windows machine with Chrome browser installed USB cable to connect the device to the machine. USB debugging enabled on the Android device
![Page 40: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/40.jpg)
ADVANTAGES OF JQUERY MOBILE
Saves development time to a great extent. Accelerates the development Takes care of device, OS and browser
fragmentation to a great level. Includes media queries that support a wide
range of device form-factors This framework is pretty light-weight. A large user base and community for all the
help that you need during development.
![Page 41: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/41.jpg)
DISADVANTAGES OF JQUERY MOBILE
Certain level of design constraints Customization overload
![Page 42: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/42.jpg)
QUERIES?You can redirect your queries on my blog “Spatial Unlimited” or tweet me at @shreerangp
![Page 43: Introduction to j query mobile framework](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c877804a7959ad288b4677/html5/thumbnails/43.jpg)
THANK YOU- Shreerang Patwardhan