Kentico Technical Learning: Exploring jQuery Mobile

  • 924 views
Uploaded on

jQuery Mobile is a unified, HTML5-based user interface system designed for all popular mobile device platforms. Built on top of the jQuery and jQuery UI foundation the mobile framework is built with …

jQuery Mobile is a unified, HTML5-based user interface system designed for all popular mobile device platforms. Built on top of the jQuery and jQuery UI foundation the mobile framework is built with progressive enhancement in mind. Join Thom Robbins, Chief Evangelist of Kentico CMS as he explores the basics of jQuery Mobile.
In this interactive webinar we looked at:
What a mobile framework is
Integrating Kentico CMS into your jQuery mobile applications
How to design mobile applications using progressive enhancement
Understand how HTML, CSS and JavaScript work together to build mobile applications
Learn how to write a mobile web application using jQuery mobile

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
924
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • http://www.markus-falk.com/mobile-frameworks-comparison-chart/

Transcript

  • 1. Kentico Technical LearningExploring jQuery Mobile Thomas Robbins @trobbins
  • 2. 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
  • 3. GETTING STARTED
  • 4. This webinar is a follow up to…. Available athttp://devnet.kentico.com/Videos/Mobile/Kentico-Technical-Learning-Responsive-Design-with.aspx
  • 5. A quick review… Access Methods Solution Benefits Drawbacks The Web Mobile Sub Site Separate navigation, site map and page content. Search Engines Create a separate site alongside the existing site to Easy to implement reusing Two site maps serve mobile optimised existing skills, hosting and Other Sites content. content. Which Banner Ads access Printed Media Responsive Design Single screen to rule all. New skills needed. For example; different Could break existing site. Enhance existing site so that it methods Web Address dynamically changes to menu formats, or switching Complexity between column or row support mobile. content layout. Standards not ratified. do you QR Codes require? Native/Hybrid Different versions of the application needed for Applications Essential for high end Apple, Android, Windows, Application Create a program that runs gaming. Blackberry, etc. Stores on the mobile device Works without a network Requires continued independent of the browser connection. maintenance as platforms or internet. change.
  • 6. 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.
  • 7. ScenarioJQUERY MOBILE
  • 8. 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/
  • 9. Our Scenario… http://jquerymobile.com/
  • 10. jQuery in actionMEET JQUERY MOBILE
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Responsive design ISN’T… • A single technology • A checkbox in Kentico • A magic formula • A quick fix
  • 15. Progressive enhancementBasic Definition: Progressive enhancements is the separation of HTML, CSS and Javascriptin your website. When these website components are compartmentalized a website canmore easily allow the sites ability to become enhanced depending on the web browser’scapabilities Peel the onion of your code! The Benefits of PE! Client Side Scripting Accessibility Layer (Javascript, jQuery) Content is within the reach of all site visitors Presentation Layer Portability (CSS) Cross browser and cross device Websites remain effective not support matter the browser or device Modularity Assists the developer in managing the application Content Layer (HTML) Site performance Layered approach ensures that the content is loaded first, then styles and then behaviors
  • 16. 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
  • 17. jQuery in ActionPAGE COMPONENTS
  • 18. Data-role = “??”Data-* Attribute Data-role• Used by Javascript • Used by jQuery UI and• No pre-defined functionality jQuery Mobile• Used to make attributes • 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">
  • 19. Pages & Dialogs jQuery mobile allows multiple pages stored in a single page!Pages Dialogs• Consists of an element with a • Add the data-rel=“dialog” to data-role="page" attribute. the link• Within the "page" container, any valid HTML markup can be used • Gives the appearance of a with data-roles of "header", modal dialog "content", and "footer"
  • 20. Buttons• All buttons in the body • Basic content are styled as <A href="#" data- role="button">Button1</A> block-level elements to fill screen width• Use anchor links for navigation buttons, and • Inline input or form <A href="#" data-role="button" submission. data-inline="true">True</A>
  • 21. Navigation - Listview• Lists… lists and more • Unordered List lists.. <ul data-role="listview"> <li>Item</li>• Coded as data- <li>Item</li> <li>Item</li> role=“Listview” </ul>• Built in filter • Ordered list <ul data-role="listview" data-inset="true" data-filter="true"> <ol data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li> </ol> This is just the basics!
  • 22. Navigation - Toolbars• Set of buttons across <nav data-role="navbar"> <a href="#">Reviews</a> top of page <a href="#">Partners</a> <a href="#">Customers</a>• Coded as simple data- <a href="#">Training</a> <a href="#">Purchase</a> role=“navbar” </nav> This is just the basics!
  • 23. Checkboxes and Radio buttons• Enhanced checkboxes, • Checkboxes radio buttons and <fieldset data-role="controlgroup"> <legend>Filter Restaurants others 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>
  • 24. This is just the basics!!!
  • 25. jQuery in ActionINTEGRATION WITH KENTICO CMS
  • 26. Show me an Example!E-Commerce Full Site E-Commerce Mobile Site• http://demostore.kenticolab.com/Home.aspx • http://demostore.kenticolab.com/Mobile/Home.aspxhttp://devnet.kentico.com/Blogs/Milan-Kacurak/January-2013/Integrating-jQuery-Mobile-into-Kentico-CMS.aspx
  • 27. Questions Thanks! Thomas Robbins, Chief Evangelist thomasr@kentico.com @trobbins