JQuery Mobile agenda and notes from Wednesday
Kim Slawson
What is it?
* Mobile web framework. Using it, it's possible to create not only simple web pages that look good on mobile devices, but also rich web applications (with much of the interactivity thrown in for free).
* Relatively recent framework, with a long list of predecessors. Rapid adoption (even in alpha state) points toward de-facto standard for frameworks.
* Extends JQuery, providing interface elements much as JQueryUI does, but also provides structure for building rich mobile applications.
Why use JQuery Mobile?
* It has a lightweight, standards-compliant native HTML/CSS implementation of gradients, rounded corners, transparency, other UI features while maintaining interactivity. It faithfully adheres to "progressive enhancement." It aims to strongly support accessibility features (e.g.: focus management, keyboard navigation, screen readers).
* It leverages JQuery.
* It aims for best presentation on mobile devices, but it's also acceptable on desktop browsers (with some styling caveats — e.g.: unnecessarily truncated content with ellipses, rather than breaking to multiple lines)
* It's easy to retrofit existing pages to work with JQuery Mobile: add data-roles, ids, and link to the .css and .js files in your <head>.
* Generalized UI doesn't directly clone any one mobile platform, but aims to feel familiar to users of all mobile devices.
* Quite theme-able/skin-able via images and CSS (will use JQueryUI's Themeroller) — you could clone a particular device's UI.
Timeline:
* JQuery Mobile announced 2010-08-13
* JQuery Mobile 1.0 Alpha 1 released 2010-10-16
* JQuery Mobile 1.0 Alpha 2 released 2010-11-12
Other alternatives: (google "web application frameworks" / "mobile web frameworks")
* IUI - Joe Hewitt's original framework; mimics iphone UI and is iPhone-specific in resolution and capabilities. Not as compatible as JQuery Mobile.
* PastryKit - Apple's internal, completely undocumented framework for help pages, iTunes.com content. Webkit-specific.
* JQTouch - similar in goals to JQuery Mobile; based upon JQuery. Not as compatible as JQuery Mobile.
* Sencha Touch
* iWebkit
* CiUI
* PhoneGap
* Safire
* Cappuccino
* SproutCore
* XUI
* Rhodes (ruby-based)
* JPint
...
Basic Concept:
* each HTML page can consist of one to many JQuery Mobile pages.
* each JQuery Mobile page is defined by giving a containing HTML element (typically a <div>) a data-role="page" attribute and an id (for internally or externally linking to the page).
* each JQuery Mobile page typically contains <div>s for a header, page content, and a footer (having data-role="header", data-role="content" or data-role="footer", respectively).
* JQuery Mobile pages can contain regular old plain-Jane HTML, but it's easy to transform content to be mobile-friendly. Simply add data-roles to your markup to create specific elements: e.g.: data-role="button", data-role="listview".
Easily Extensible: (from http://insideria.com/2010/11/a-look-at-jquery-mobile-10-alp.html, 2010-11-27)
* Within a page you can add any HTML content you want, style it however you want, etc. Transitions between pages can be defined by the data-transition object, and a large number of transitions are already available.
* Adjusting for orientation is as simple as defining CSS for your portrait and landscape modes. The main HTML object on your page will always have its class attribute set to include "portrait" or "landscape" accordingly, so you can let your CSS handle this itself or listen for the orientationchange event and adjust anything that requires JavaScript code yourself.
* Interaction with touch events comes through simple JavaScript events. Touch events currently supporting include tap, taphold, swipe, swipeleft and swiperight. Swipe gestures seem to be currently limited to horizontal swiping only. There are also events for scrolling, orientation change, pages showing and hiding, initialization, and animation completion.
Show Demos
Look at Examples:
* single page
* multi-page
Regarding page structure and navigation:
* loads external pages by using AJAX to import them into the DOM, and then transition to the newly-created JQuery page.
* hash-based navigation allows direct linking/bookmarking and use of browser's back/forward button.
Caveat Developer - Alpha-level framework changes frequently:
* JQuery Mobile 1.0 Alpha 2 requires JQuery 1.4.4. Make sure to keep your versions of JQuery and JQuery Mobile in sync.
* As with JQuery itself, you can either link to the .css and .js files hosted online at code.jquery.com or host them locally (but keep them up-to-date!)
* JQuery Mobile is in a state of constant flux. They broke^h^h^h^h^h improved the navigation model between Alpha 1 and Alpha 2. Check the github issue tracker frequently.
Useful sites:
* http://jquerymobile.com/ - news, download, documentation, examples
* http://forum.jquery.com/jquery-mobile - very active forum; people with all levels of experience
* https://github.com/jquery/jquery-mobile/issues - github bug reports; responsive developer community
* http://jquerymobile.com/gbs/ - browser support matrix
Questions?
* Forms http://jquerymobile.com/demos/1.0a2/docs/forms/forms-sample.html
* Google Maps http://jquerymobile.com/test/experiments/google-maps/
* Styling dynamically generated content (populated from AJAX or Javascript) needs a "refresh" — e.g.:
$('ul').listview("refresh");
* Check the forum!
Experiments with the latest release:
* http://jquerymobile.com/test/experiments/weather/
* http://jquerymobile.com/test/experiments/api-viewer/index.html
* http://jquerymobile.com/test/experiments/scrollview/
* http://jquerymobile.com/demos/1.0a1/experiments/ajax-search/_search.html
* http://jquerymobile.com/test/experiments/google-maps/map.html
John Smith
And Thanks to Kevin "Magic" Wentworth for hosting. You guys both rock!
On 12/10/2010 12:33 PM, Kim Slawson wrote:
> Here's the agenda from Wednesay, plus a few links at the bottom (see
> "experiments"). Thanks to everyone who came. We should do this more
> often :-)
>
>
>
> *What is it?*
>
> * Mobile web framework. Using it, it's possible to create not only
> simple web pages that look good on mobile devices, but also rich web
> applications (with much of the interactivity thrown in for free).
>
>
> * Relatively recent framework, with a long list of predecessors. Rapid
> adoption (even in alpha state) points toward de-facto standard for
> frameworks.
>
>
> * Extends JQuery, providing interface elements much as JQueryUI does,
> but also provides structure for building rich mobile applications.
>
>
>
> *Why use JQuery Mobile?*
>
> * It has a lightweight, standards-compliant native HTML/CSS
> implementation of gradients, rounded corners, transparency, other UI
> features while maintaining interactivity. It faithfully adheres to
> "progressive enhancement." It aims to strongly support accessibility
> features (e.g.: focus management, keyboard navigation, screen readers).
>
>
> * It leverages JQuery.
>
>
> * It aims for best presentation on mobile devices, but it's also
> acceptable on desktop browsers (with some styling caveats � e.g.:
> unnecessarily truncated content with ellipses, rather than breaking to
> multiple lines)
>
>
> * It's easy to retrofit existing pages to work with JQuery Mobile: add
> data-roles, ids, and link to the .css and .js files in your <head>.
>
>
> * Generalized UI doesn't directly clone any one mobile platform, but
> aims to feel familiar to users of all mobile devices.
>
>
> * Quite theme-able/skin-able via images and CSS (will use JQueryUI's
> Themeroller) � you *could* clone a particular device's UI.
>
>
>
> *Timeline:*
>
> * JQuery Mobile announced 2010-08-13
>
> * JQuery Mobile 1.0 Alpha 1 released 2010-10-16
>
> * JQuery Mobile 1.0 Alpha 2 released 2010-11-12
>
>
>
> *Other alternatives: (google "web application frameworks" / "mobile web
> frameworks")*
>
> * IUI - Joe Hewitt's original framework; mimics iphone UI and is
> iPhone-specific in resolution and capabilities. Not as compatible as
> JQuery Mobile.
>
> * PastryKit - Apple's internal, completely undocumented framework for
> help pages, iTunes.com content. Webkit-specific.
>
> * JQTouch - similar in goals to JQuery Mobile; based upon JQuery. Not as
> compatible as JQuery Mobile.
>
> * Sencha Touch
>
> * iWebkit
>
> * CiUI
>
> * PhoneGap
>
> * Safire
>
> * Cappuccino
>
> * SproutCore
>
> * XUI
>
> * Rhodes (ruby-based)
>
> * JPint
>
> ...
>
>
>
> *Basic Concept:*
>
> * each HTML page can consist of one to many JQuery Mobile pages.
>
>
> * each JQuery Mobile page is defined by giving a containing HTML element
> (typically a <div>) a /data-role="page"/ attribute and an id (for
> internally or externally linking to the page).
>
>
> * each JQuery Mobile page typically contains <div>s for a header, page
> content, and a footer (having /data-role="header"/,
> /data-role="content"/ or /data-role="footer"/, respectively).
>
>
> * JQuery Mobile pages can contain regular old plain-Jane HTML, but it's
> easy to transform content to be mobile-friendly. Simply add /data-role/s
> to your markup to create specific elements: e.g.: /data-role="button"/,
> /data-role="listview"/.
>
>
>
> *Easily Extensible: *(from
> http://insideria.com/2010/11/a-look-at-jquery-mobile-10-alp.html,
> 2010-11-27)
>
> * Within a page you can add any HTML content you want, style it however
> you want, etc. Transitions between pages can be defined by the
> data-transition object, and a large number of transitions are already
> available.
>
>
> * Adjusting for orientation is as simple as defining CSS for your
> portrait and landscape modes. The main HTML object on your page will
> always have its class attribute set to include "portrait" or "landscape"
> accordingly, so you can let your CSS handle this itself or listen for
> the /orientationchange/ event and adjust anything that requires
> JavaScript code yourself.
>
>
> * Interaction with touch events comes through simple JavaScript events.
> Touch events currently supporting include /tap/, /taphold/, /swipe/,
> /swipeleft/ and /swiperight/. Swipe gestures seem to be currently
> limited to horizontal swiping only. There are also events for scrolling,
> orientation change, pages showing and hiding, initialization, and
> animation completion.
>
>
>
> *Show Demos*
>
>
>
> *Look at Examples:*
>
> * single page
>
> * multi-page
>
>
>
> *Regarding page structure and navigation:*
>
> * loads external pages by using AJAX to import them into the DOM, and
> then transition to the newly-created JQuery page.
>
> * hash-based navigation allows direct linking/bookmarking and use of
> browser's back/forward button.
>
>
>
> *Caveat Developer - Alpha-level framework changes frequently:*
>
> * JQuery Mobile 1.0 Alpha 2 requires JQuery 1.4.4. Make sure to keep
> your versions of JQuery and JQuery Mobile in sync.
>
>
> * As with JQuery itself, you can either link to the .css and .js files
> hosted online at code.jquery.com <http://code.jquery.com> or host them
> locally (but keep them up-to-date!)
>
>
> * JQuery Mobile is in a state of *constant* flux. They broke^h^h^h^h^h
> improved the navigation model between Alpha 1 and Alpha 2. Check the
> github issue tracker *frequently*.
>
>
>
> *Useful sites:*
>
> * http://jquerymobile.com/ - news, download, documentation, examples
>
> * http://forum.jquery.com/jquery-mobile - very active forum; people with
> all levels of experience
>
> * https://github.com/jquery/jquery-mobile/issues - github bug reports;
> responsive developer community
>
> * http://jquerymobile.com/gbs/ - browser support matrix
>
>
>
> *Questions? *
>
> * Forms http://jquerymobile.com/demos/1.0a2/docs/forms/forms-sample.html
>
>
> * Google Maps http://jquerymobile.com/test/experiments/google-maps/
>
>
> * Styling dynamically generated content (populated from AJAX or
> Javascript) needs a "refresh" � e.g.:
>
> /$('ul').listview("refresh");/
>
>
> * *Check the forum*!
>
>
>
> *Experiments with the latest release:*
>
> * http://jquerymobile.com/test/experiments/weather/
>
> * http://jquerymobile.com/test/experiments/api-viewer/index.html
>
> * http://jquerymobile.com/test/experiments/scrollview/
>
> * http://jquerymobile.com/demos/1.0a1/experiments/ajax-search/_search.html
>
> * http://jquerymobile.com/test/experiments/google-maps/map.html
>
> * http://jquerymobile.com/test/experiments/ui-datepicker/
>
>
>
>
> KP logo Kim Slawson
> Kernel Panic Consulting <http://slawson.org/kernelpanic>
> kimsl...@gmail.com <mailto:kimsl...@gmail.com>
> 207-370-7401
>
> --
> You received this message because you are subscribed to the Google
> Groups "From the Hip" group.
> To post to this group, send email to from-t...@googlegroups.com.
> To unsubscribe from this group, send email to
> from-the-hip...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/from-the-hip?hl=en.
Kevin Callahan
On Fri, Dec 10, 2010 at 12:34 PM, John Smith <jo...@whitelancer.com> wrote:
> Thanks for this Kim!
>
> And Thanks to Kevin "Magic" Wentworth for hosting. You guys both rock!
>
>
>
> On 12/10/2010 12:33 PM, Kim Slawson wrote:
>>
>> Here's the agenda from Wednesay, plus a few links at the bottom (see
>> "experiments"). Thanks to everyone who came. We should do this more
>> often :-)
>>
>>
>>
>> *What is it?*
>>
>> * Mobile web framework. Using it, it's possible to create not only
>> simple web pages that look good on mobile devices, but also rich web
>> applications (with much of the interactivity thrown in for free).
>>
>>
>> * Relatively recent framework, with a long list of predecessors. Rapid
>> adoption (even in alpha state) points toward de-facto standard for
>> frameworks.
>>
>>
>> * Extends JQuery, providing interface elements much as JQueryUI does,
>> but also provides structure for building rich mobile applications.
>>
>>
>>
>> *Why use JQuery Mobile?*
>>
>> * It has a lightweight, standards-compliant native HTML/CSS
>> implementation of gradients, rounded corners, transparency, other UI
>> features while maintaining interactivity. It faithfully adheres to
>> "progressive enhancement." It aims to strongly support accessibility
>> features (e.g.: focus management, keyboard navigation, screen readers).
>>
>>
>> * It leverages JQuery.
>>
>>
>> * It aims for best presentation on mobile devices, but it's also
>> acceptable on desktop browsers (with some styling caveats — e.g.:
>> unnecessarily truncated content with ellipses, rather than breaking to
>> multiple lines)
>>
>>
>> * It's easy to retrofit existing pages to work with JQuery Mobile: add
>> data-roles, ids, and link to the .css and .js files in your <head>.
>>
>>
>> * Generalized UI doesn't directly clone any one mobile platform, but
>> aims to feel familiar to users of all mobile devices.
>>
>>
>> * Quite theme-able/skin-able via images and CSS (will use JQueryUI's
>> Themeroller) — you *could* clone a particular device's UI.
>> Javascript) needs a "refresh" — e.g.: