Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Drupal on the go with jQuery Mobile
Transcript of Drupal on the go with jQuery Mobile
@timcosgrove Brian McMurray
@bmcmurray Any questions? Why Mobile? 1.83 billion mobile browsers by 2013, 1.78 billion desktop
By 2015, a majority of people will use a mobile device as their primary internet access device Mobile sites need: Simple, finger-friendly controls
To work on many browsers on many operating systems
To surface relevant information quickly jQuery Mobile
</div> <!DOCTYPE html> <div data-role="page">
</div> Contents of the page container will be loaded via AJAX Outer content ignored scripts
footer info How did we solve this? A patch:
Keeps track of loaded scripts and styles and does not reload them
Adds Drupal.attachBehaviors to jQM's page retrieval/build method
AJAX can be turned off per-link, or at the framework level.
Framework level is safer. HTML5 What is jQuery Mobile? Project of the jQuery Foundation
Built upon jQuery and jQuery UI
Web presentation framework optimized for touch-enabled devices and small screens
Aim to support a wide variety of mobile platforms and browsers. source: Gartner Mobify Drupal-as-services and Native App Mobify has its own applications to allow you to quickly create a mobile-optimized site from your existing site. Use Drupal for the backend aspects and make that data available as services to a native app.
See "Developing Apps for iPhone/iPad/Android using Drupal as Base System" at 1:00 pm in the Acquia Room. Mobile on Drupal Themes Themes make different assumptions about what you may want to be doing with your website and will need to be evaluated accordingly.
Note: not many mobile themes currently have Drupal 7 versions. There are a number of mobile themes already out there. jQuery Mobile has two broad functions:
Provides touch-optimized interfaces for modern devices while degrading gracefully for other form factors
Performs page requests and form submissions via AJAX to minimize mobile bandwidth usage and provide more responsive sites. Why this is a problem: scripts outside page load
form submission AJAX/AHAH where possible ...but you can, of course. First load Content Scripts Scripts Content Second load AJAX First load Scripts ...and this way also: scripts inside AJAX Scripts Second load Content Content jQuery Mobile BoF Missouri Room at 2:15 today Thanks! jQueryMobile + jQM jQueryMobile: module
inserts library files
provides form element alters jQM: theme
requires jQueryMobile module
provides minor adjustments for Drupal-specific markup, but is otherwise mostly straight jQM
can be used directly or as a base theme Demo Overview Admin Challenges large tables
contrib modules in general
what admin makes sense on mobile? Live demo:
Twitter: remove jQuery Mobile patch
integration with jQM theme tool
test with contributed modules
community use, testing, feature requests General Challenges (Semantic HTML5 elements also work.) HTML5 data-* attributes? Any data-* attribute is storage for private data that will not affect layout or presentation.
HTML5 compliant; will validate.
http://ejohn.org/blog/html-5-data-attributes/ Markup and Display Apart from a bit of padding and header font adjustments, jQM leaves most of your markup alone. Many form elements will be transformed without any extra markup work. However, in many cases you can use data-* attributes to modify elements. Additionally, jQM allows you to group elements by using data-* attributes in surrounding elements. jQuery Mobile supports 6 CSS-based page transitions slide
flip Will it Blend? jQM has its own theming system, which can be applied to elements via
data-theme. Allows up to 26 variations
Customizable via a tool similar to theme-roller (still to come). http://tha.cm/jqm-demo
@timcosgrove + BFFs! (...in time.) What is jQuery Mobile?
What other options are out there for Mobile with Drupal?
How does jQuery Mobile work?
jQuery Mobile + Drupal == BFF? Hi there I am some text.