Kentico Technical Learning: Exploring jQuery Mobile
-
Upload
thomas-robbins -
Category
Technology
-
view
1.021 -
download
1
description
Transcript of Kentico Technical Learning: Exploring jQuery Mobile
![Page 1: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/1.jpg)
Kentico Technical Learning Exploring jQuery Mobile
Thomas Robbins@trobbins
![Page 2: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/2.jpg)
Our agenda…
• Getting started• Scenario: jQuery mobile• jQuery in Action: Meet jQuery Mobile• jQuery in Action: Page components• jQuery in Action: Integration with Kentico CMS
![Page 3: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/3.jpg)
GETTING STARTED
![Page 4: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/4.jpg)
This webinar is a follow up to….
http://devnet.kentico.com/Videos/Mobile/Kentico-Technical-Learning-Responsive-Design-with.aspx
Available at
![Page 5: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/5.jpg)
A quick review…
Solution DrawbacksAccess Methods
Two site maps
Separate navigation, site map and page content.
Easy to implement reusing existing skills, hosting and content.
Mobile Sub Site
Create a separate site alongside the existing site to serve mobile optimised content.
Which
access
methods
do you
require?
New skills needed.
Could break existing site.
Complexity
Standards not ratified.
Single screen to rule all.
For example; different menu formats, or switching between column or row content layout.
Responsive Design
Enhance existing site so that it dynamically changes to support mobile.
The Web
Search Engines
Other Sites
Banner Ads
Printed Media
Web Address
QR Codes
Different versions of the application needed for Apple, Android, Windows, Blackberry, etc.
Requires continued maintenance as platforms change.
Essential for high end gaming.
Works without a network connection.
Native/Hybrid Applications
Create a program that runs on the mobile device independent of the browser or internet.
Application Stores
Benefits
![Page 6: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/6.jpg)
Generic mobile requirements checklist…
• Is it readable? – Consider how easy it is to read text in
columns at various widths and page sizes.
• Is it visible? – Make sure all the key information is
above the fold to prevent scrolling.– Strike the proper balance between
number of display items and detail level.
• Is it usable? – Consider the page look when the page
elements are at the proper size and location for a screen size.
![Page 7: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/7.jpg)
JQUERY MOBILEScenario
![Page 8: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/8.jpg)
What is a mobile framework?
A mobile framework involves a combination of Javascript, CSS and other assets that aid in the styling of the mobile experience.
There are many choices!
http://www.markus-falk.com/mobile-frameworks-comparison-chart/
![Page 10: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/10.jpg)
MEET JQUERY MOBILEjQuery in action
![Page 11: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/11.jpg)
What is jQuery Mobile?
• JavaScript in a unified user interface• Works across the most-used mobile devices
and support mobile browsers• Treats mobile web browsers exactly the same
as desktop web browsers
![Page 12: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/12.jpg)
All pages in jQuery mobile….
• Are built on a foundation of clean, semantic HTML
• Ensure compatibility with pretty much any web-enabled device
• Attempt to transform the semantic page into a rich, interactive experience
• Leverages the power of jQuery and CSS• Are responsive• Applies progressive enhancement techniques
![Page 13: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/13.jpg)
Responsive design IS…
• Key elements– Fluid layouts/grid– Flexible images and media– CSS Media queries
• Google recommends responsive design for better SEO!
Examples• http://www.ecentricarts.com/• http://www.newbornfree.com/home• http://www.microsoft.com• Sample corporate site
![Page 14: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/14.jpg)
Responsive design ISN’T…
• A single technology• A checkbox in Kentico• A magic formula • A quick fix
![Page 15: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/15.jpg)
Progressive enhancement
Client Side Scripting Layer (Javascript,
jQuery)
Presentation Layer (CSS)
Content Layer (HTML)
Basic Definition: Progressive enhancements is the separation of HTML, CSS and Javascript in your website. When these website components are compartmentalized a website can more easily allow the sites ability to become enhanced depending on the web browser’s capabilities
Site performance
Layered approach ensures that the content is loaded first, then styles and then behaviors
ModularityAssists the developer in managing the application
PortabilityCross browser and cross device
supportWebsites remain effective not matter
the browser or device
AccessibilityContent is within the reach of all site visitors
Peel the onion of your code! The Benefits of PE!
![Page 16: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/16.jpg)
jQuery Mobile Boiler Plate Code
# Description
5 Recommended viewport configuration
6 jQuery mobile CSS
7 jQuery library declaration
8 Customizations that may look to override jQuery’s configuration
9 jQuery mobile library must be declared after jQuery and any custom scripts
12 data-role=“page” defines the page container
13 data-role=“header” is the header and title bar
16 data-role=“content” is the content body
19 data-role=“footer” contains the footer bar
![Page 17: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/17.jpg)
PAGE COMPONENTSjQuery in Action
![Page 18: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/18.jpg)
Data-role = “??”
Data-* Attribute• Used by Javascript • No pre-defined functionality• Used to make attributes
Data-role• Used by jQuery UI and
jQuery Mobile• An attribute of an HTML
elements• Used to give native look and
feel• Used for elements like
pages, buttons etc.
$("#list").data("role","header"); <div data-role="page" id="home">
![Page 19: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/19.jpg)
Pages & Dialogs
Pages• Consists of an element with a
data-role="page" attribute.• Within the "page" container, any
valid HTML markup can be used with data-roles of "header", "content", and "footer"
Dialogs• Add the data-rel=“dialog” to
the link• Gives the appearance of a
modal dialog
jQuery mobile allows multiple pages stored in a single page!
![Page 20: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/20.jpg)
Buttons
• All buttons in the body content are styled as block-level elements to fill screen width
• Use anchor links for navigation buttons, and input or form submission.
• Basic
• Inline
<A href="#" data-role="button" data-inline="true">True</A>
<A href="#" data-role="button">Button1</A>
![Page 21: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/21.jpg)
Navigation - Listview
• Lists… lists and more lists..
• Coded as data-role=“Listview”
• Built in filter
• Unordered List
• Ordered list
<ul data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li></ul>
<ol data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li></ol>
This is just the basics!
<ul data-role="listview" data-inset="true" data-filter="true">
![Page 22: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/22.jpg)
Navigation - Toolbars
• Set of buttons across top of page
• Coded as simple data-role=“navbar”
<nav data-role="navbar"> <a href="#">Reviews</a> <a href="#">Partners</a> <a href="#">Customers</a> <a href="#">Training</a> <a href="#">Purchase</a></nav>
This is just the basics!
![Page 23: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/23.jpg)
Checkboxes and Radio buttons
• Enhanced checkboxes, radio buttons and others
• Checkboxes<fieldset data-role="controlgroup"> <legend>Filter Restaurants By:</legend> <input type="checkbox" name="checkbox-french" id="checkbox-french"> <label for="checkbox-french">French</label> <input type="checkbox" name="checkbox-italian" id="checkbox-italian"> <label for="checkbox-italian">Italian</label> <input type="checkbox" name="checkbox-greek" id="checkbox-greek"> <label for="checkbox-greek">Greek</label></fieldset>
![Page 24: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/24.jpg)
This is just the basics!!!
![Page 25: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/25.jpg)
INTEGRATION WITH KENTICO CMSjQuery in Action
![Page 26: Kentico Technical Learning: Exploring jQuery Mobile](https://reader033.fdocuments.us/reader033/viewer/2022060109/55561118d8b42a3f168b4fb3/html5/thumbnails/26.jpg)
Show me an Example!
E-Commerce Full Site• http://demostore.kenticolab.com/Home.aspx
E-Commerce Mobile Site• http://demostore.kenticolab.com/Mobile/Home.aspx
http://devnet.kentico.com/Blogs/Milan-Kacurak/January-2013/Integrating-jQuery-Mobile-into-Kentico-CMS.aspx