Moodle in English: myMobile Alpha 1

Just added a new theme (once approved) for moodle 2.x called myMobile.

Some light reading:

Intro:
myMobile is a theme for Moodle 2+ that is customized and optimized for smart phones and tablets. It is based on jquerymobile. For a device support grid, please visit the jquerymobile website (http://jquerymobile.com/).

This theme has been tested most thoroughly on IOS devices, including iPhone 3gs, iPhone 4 and iPad. IOS 4+ is highly recommended. Also tested on Android 2.1+. Desktop browser support includes Chrome 10+, safari, Firefox 4+ and Internet Explorer 9.

What this is:
This is a complex theme designed to provide a ui-enhanced mobile-ready version of your moodle2 install to students and teachers. It supports a basic student/teacher scenario: usage of standard moodle2 activities and assignments, as well as access to calendar, messages, blocks and resources.

This theme attempts to display your standard moodle course content in a mobile friendly format. You can assist in this process by making your moodle install more mobile friendly by:

making sure theme designer mode is turned off and that language cache is turned on.
Avoid placing large images and video directly on the front of course pages. Instead, link to images and video via activities, resources and pages.
using .mp4 for audio/video or the youtube embedder (youtube embedder seems to be the best cross-browser solution at the moment).
making sure your mobile device’s OS is up to date.
using the latest weekly install of Moodle 2.
Linking to resource files (PDF, MS Office files, etc.) instead of embedding them.

What this is NOT:
This is not designed to allow administrators, course managers or others a way to: add/edit activities, add/edit users, add/remove courses, add/remove blocks, edit courses, or edit install settings (etc). If you need to do any of the above, please do them via a normal theme on a standard computer as designed.

Installation:
Install as you would any other theme. Turn on: Allow theme changes in the URL, in theme settings and give mobile users the address of: http://yourmoodle.com/?theme=mymobile

Future versions of moodle may support selecting this theme as the moodle 2 install theme. See: http://moodle.org/mod/forum/discuss.php?d=162872

Bugs and Support:
For this alpha version, I am mainly looking for bugs related to the usage of core moodle 2 activities. Please report any found.

I cannot support every mobile device myself, hence the reason (one of the reasons anyway) jquerymobile is used. If a device does not work properly with this theme, all we can do is hope that it gets fixed or added to the next jquerymobile release.

Known issues:
The following are glitches that are known.
1. Setting a quiz to use ‘browser security‘ will cause issues. Please avoid.
2. Video/audio- some video will work on some devices, others won’t. There really isn’t too much that can be done but would appreciate suggestions (Note- updated moodle media filters are helping this issue).
3. Large settings pages (i.e., edit course settings, edit user profile, etc.) can take a long time to render (depending on device).
4. Advanced upload assignment- ‘add notes’ not working.
6. Adding a new calendar event is disabled for the moment.
7. It can be difficult to scroll embedded resources (i.e., PDFs). A workaround is in place (clicking the thumb ‘paperclip’ icon opens the file in a new window), but it is generally better to just link to resources).
8. Desktop versions of firefox below version 4 seem to stumble over some code. IE7/8 do not work at all although I hope to have all three of the above desktop browsers supported to some extent by the first official release.
9. A proper method to get back to a ‘desktop’ theme is not in place.
10. Back button is english only.

Theme Settings Page:
You can make changes to this theme via a settings page. The following are options:

Set custom text for the front page of the mobile version of your moodle site. This is text that only your mobile users will see.
Show or hide the site topic section. Useful if your default site topic section is not mobile friendly.
Turn on/off auto image thumbnail behavior. By default, the theme hides site index and course index images and replaces them with a clickable thumb icon (and caption). This behavior can be turned off via this setting.
Show desktop theme link (may or may not work), off by default.

Goals and Roadmap:
The primary goals of this beta release are:

To find and fix bugs in core activities.
Find methods to speed up load times.
Add method to switch to standard ‘desktop’ theme.
Use ajax for form posting whenever possible.

Updates:
This theme is an alpha release. Updates will occur in tandem with jquerymobile.

To Do:

Investigate fixed header/footer possibilities for a more native UI.
Tablet optimized layout that will take better advantage of the larger screens.
connections to native apps for specific functions.
Use ajax forms wherever possible.

Average of ratings: Useful (1)

Re: myMobile Alpha 1

by Danny Wahl - Wednesday, 27 April 2011, 8:04 AM

This sound great, just a thought for something you can use for the desktop theme instead of a method (at least for the interim).

Add a setting for this theme that can be populated with the desired desktop theme, NULL by default.

Then if the field is populated a link is added to the footer 'switch to full version'

The only caveat of this is that it would require the administrator to enable switching themes based on URL

Average of ratings: -

Re: myMobile Alpha 1

by John St - Wednesday, 27 April 2011, 8:23 AM

That probably would work, but I figured it would be taken care of by the planned inclusion of mobile detection in 2.1, so I really didn't want to spend much time on it. However, if mobile detection does not make it in 2.1 I may need to do as you outline.

Average of ratings: -

Re: myMobile Alpha 1

by Mary Evans - Wednesday, 27 April 2011, 9:33 AM

Hi John,

Thanks for adding this new theme. It's looking good! I've just approved it.

Not sure how relevant this is to this particular theme, but there is a line in the general.php which is out of date...it was updated in a upgrade of Moodle 20 Stable some weeks ago.

It's this line in the body tag...

<body id="<?php echo $PAGE->bodyid ?>" class="<?php echo $PAGE->bodyclasses.' '.join(' ', $bodyclasses) ?>">

It should read like this...

<body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses.' '.join(' ', $bodyclasses)) ?>">

I only found out this last week or so. It's a bit of a git!

Cheers

Mary

Average of ratings: -

Re: myMobile Alpha 1

by John St - Thursday, 28 April 2011, 7:14 PM

Thanks Mary, that is now included. I also updated the zip to fix a ton of debug warnings (thanks Paul N.!).

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Friday, 29 April 2011, 6:58 AM

Hi John, glad to be of assistance. The new version's looking good - just a couple of minor things I've noticed so far:

Ajax-loaded course pages have broken icons - for some reason, it seems to be prepending "/course" to the images' URLs. I haven't had time to investigate this thoroughly yet to work out why it's happening...
If your session has timed out, the formatting of the login page is a little off (text overlapping). Clicking on the help link results in a page which gives another warning about an undeclared variable - though truth be told, I've never clicked that link before, so I can't say for sure that it's not a core Moodle issue

I'll update you if I work out the icon issue (or if I find anything else). Great work - I'm following the development of this theme with excitement!

Average of ratings: -

Re: myMobile Alpha 1

by John St - Friday, 29 April 2011, 8:06 AM

Paul,

Can you give me a device/browser for the icon issue? I have only been able to replicate that in Desktop/Firefox3.6, which is a known issue with how it handles ajax...

I'll check the help links to see if missed a variable. Thanks again!!!

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Friday, 29 April 2011, 11:04 AM

To be honest, I was being lazy at that point and using Firefox 3.6 on Windows XP... I just tried it in the stock Android browser on my Galaxy Tab, and the icons are indeed fine. It also works fine in Firefox on the Tab, so it shouldn't be an issue on actual mobile devices - but it'd be nice if it can be dealt with in some way.

When you say that it's a known issue, do you mean that you were aware of it already or that it's an upstream (JQuery Mobile) issue that's known at that level? I'm happy to dig into it further, but it'd be good to know what level I should be looking at first...

Average of ratings: -

Re: myMobile Alpha 1

by John St - Friday, 29 April 2011, 7:02 PM

It is a known issue in the sense that I knew about it and reported it to JQM. Only seems to affect Firefox 3, FF4 works fine.

Also, it only cropped up when I upgraded from JQMa3 to JQMa4... I believe there are two issues at play. One I know about and is causing page loading lag in FF3. That issue is related to this regex in JQM:

pageElemRegex = new RegExp(".*(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>).*"),

Not sure why FF3 stumbles over this, but it does... The second has to do with a change in the way JQM handles absolute URLs and I'm not sure where the exact problems lies, but I'm pretty sure it is within JQM.

Average of ratings: -

Re: myMobile Alpha 1

by John St - Friday, 29 April 2011, 10:29 PM

Here is the 2nd issue for FF3.6 (it is in the JQM file):

var thisAttr = $(this).is('[href]') ? 'href' : 'src', thisUrl = $(this).attr(thisAttr);

//if full path exists and is same, chop it - helps IE out

thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
if( !/^(\w+:|#|\/)/.test(thisUrl) ){ $(this).attr(thisAttr, newPath + thisUrl); }

if you change thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );

thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );

FF3.6 starts showing the icons... Not sure why that is, or if I should change it or not. I would like to have FF3 support, but I'm not sure at what cost.

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Monday, 2 May 2011, 9:34 AM

This is a bit of an odd one. It looks as though there was a similar problem some time ago, which affected all (or at least more) images. The fix for that issue failed to address the case where a full URL (including protocol and domain) is used to reference an image which is internal but at a higher level in the site's heirarchy than the page being requested via AJAX.

I've posted a comment on the (closed) bug ticket from the earlier bug, since it seems to be a remnant of that issue, pointing out the issue and providing a test case I've put together from the JQM tests. Hopefully that'll get the issue reopened and fixed - if nothing happens in a timely manner, I might create a new ticket for it instead.

Your change effectively just disables the behaviour entirely - while it might not appear to cause any problems, I'm not entirely sure what that code is supposed to be doing (i.e. how it "helps" IE), so it might actually be breaking something somewhere. Might be best to wait a little bit and see if this gets fixed in JQM any time soon - if not, perhaps we can come up with a better workaround/fix for this...

Average of ratings: -

Re: myMobile Alpha 1

by John St - Monday, 2 May 2011, 6:58 PM

i'll do some more testing and keep on eye on github to see what happens. The other fix from below has really impacted page loading performance in a positive way!

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Tuesday, 3 May 2011, 12:32 PM

Upon further investigation, that code only actually runs in Firefox (<4) - so it can't help IE at all. Removing it doesn't seem to break anything else (in any browser) - it only fixes this issue - so I've committed the removal of this line to my fork of JQM and submitted another pull request for it.

Average of ratings: -

Re: myMobile Alpha 1

by John St - Tuesday, 3 May 2011, 10:49 PM

Tested and I found the same so it is now out of the main zip. I saw your other commit got pulled in, very cool!

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Monday, 2 May 2011, 6:52 AM

Edit: my reply's showing up under yours - this is a response to the first issue you mentioned...

This one doesn't seem to affect the icons, but does slow down page load/render in all browsers (though Firefox 3.6 on Windows XP does seem worse than Android browsers I've tried). The fix is to remove the trailing and leading ".*" from the regex - i.e.:

pageElemRegex = new RegExp("(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>)"),

As far as I can tell, that doesn't break anything, but speeds up page load/render by a few seconds - on Firefox 3.6 it reduced the relevant section of a page load from ~4.5 seconds to 3ms, and in the stock browser on my Galaxy Tab, the same section of code went from ~3.6 seconds to 1ms.

I've added a comment with these findings (and an explanation of why the slowdown happens) to the JQM bug ticket for this issue - hopefully they'll deal with it soon. In the mean time, it's such a quick and easy change that you could probably get away with just making the change in the copy of JQM included in your theme - you'd just have to remember to check for it in future versions of JQM as you update to them.

Average of ratings: -

Re: myMobile Alpha 1

by John St - Monday, 2 May 2011, 7:53 AM

Thanks Paul. Tested and works well. I have it added to the latest download.

Average of ratings: -

Re: myMobile Alpha 1

by Paul Nicholls - Tuesday, 3 May 2011, 8:19 AM

I forked JQM on github and submitted a pull request for this change/fix. They've pulled it already, so new builds of JQM should include this fix.

No action on the other one, yet - maybe I'll do a bit more digging and see if I can come up with a fix/workaround (though I'll need to try to work out exactly what it's trying to achieve and why, first!) for it...

Average of ratings: -

The content of this forum post has been removed and can no longer be accessed.

Re: myMobile Alpha 1

by John St - Thursday, 12 May 2011, 6:27 AM

There is nothing currently set up to redirect mobile users automatically. There is work going on that hopefully will allow this to occur in Moodle 2.1. If anyone has any temporary ideas for redirecting mobile users, I would be interested in hearing them.

Average of ratings: -

The content of this forum post has been removed and can no longer be accessed.

Re: myMobile Alpha 1

by John St - Thursday, 12 May 2011, 11:10 PM

There is this being worked on for 2.1:

http://tracker.moodle.org/browse/MDL-25394

You should even be able to pull down the code and try it out. it should accomplish what you outline above.

Average of ratings: -

回應: Re: myMobile Alpha 1

by Shwu-Fen Kuo - Monday, 8 August 2011, 10:39 AM

Dear John,

After seeing the intro video, I think this theme is great.

Our school will development mobile version of moodle in the feature.

But Our the version of moodle site is v1.9.5, it could not use the theme you provided.

Could you help me, how to change the code for v1.9.5? Or do you implement the theme for v1.9.x?

Thanks.

Average of ratings: -

Re: myMobile Alpha 1

by Yohanes Joko Wibowo - Monday, 22 August 2011, 3:31 PM

is this realy works? do you have a demo moodle website for this code implementation?

Average of ratings: -

Re: myMobile Alpha 1

by Yohanes Joko Wibowo - Friday, 9 September 2011, 4:01 PM

it' is not working on me, is their any other way?

I had edit the config.php and add the script as you sugested above, but the site came with mobile theme even with default wwwroot (not mobile address). Any sugestion ? or can you show me your moodle site with mobile theme?

Average of ratings: -

Re: myMobile Alpha 1

by Mary Evans - Friday, 9 September 2011, 5:04 PM

Hi,

For this theme to work you need to upload it to your Moodle site first, then select it as your 'default' Mobile theme and also check the settings in Theme settings.

Installation:
Install as you would any other theme. Turn on: Allow theme changes in the URL, in theme settings and give mobile users the address of: http://yourmoodle.com/?theme=mymobile

Also this theme only works automatically in Moodle 2.1+

HTH

Mary

Average of ratings: -

Re: myMobile Alpha 1

by Yohanes Joko Wibowo - Wednesday, 14 September 2011, 12:59 PM

I'm Using Moodle 2.0 version. It means I should upgrade it into 2.1+ version. I'm looking for simple upgrade tutorial. Any one can help me?

Average of ratings: -

Re: myMobile Alpha 1

by Steve Bailey - Tuesday, 15 November 2011, 6:24 PM

Hi Mary,

I'd like to test this theme for my institution but I'm having trouble working out the regular expression required to detect mobile devices. Could you point me to a list or give an example of how a user agent string can be converted into a regular expression? There's nothing on this in the Moodle Docs.

Any advice greatly appreciated. Steve

Average of ratings: -

Re: myMobile Alpha 1

by Richard Oelmann - Tuesday, 15 November 2011, 10:33 PM

Steve,

You shouldn't need to set the regular expression in the theme settings page, you should simply be able to apply the myMobile theme to the 'Mobile' section on the theme selector page.

I believe that the regular expression section on the theme setting is for if you need to add additional categories to the theme selector over and above the ones which are already there.

Richard

Average of ratings: -

Re: myMobile Alpha 1

by Mary Evans - Tuesday, 15 November 2011, 10:52 PM

Hi,

Have you tried adding the example given below the part where you are asked to add these 'expressions' 'return expression' ?

By default, Moodle can detect devices of the type default (desktop PCs, laptops, etc), mobile (phones and small hand held devices), tablet (iPads, Android tablets) and legacy (Internet Explorer 6 users). The theme selector can be used to apply separate themes to all of these. This setting allows regular expressions that allow the detection of extra device types (these take precedence over the default types).

For example, you could enter the regular expression ' /(MIDP-1.0|Maemo|Windows CE)/ ' to detect some commonly used feature phones add the return value 'My Phone'. This adds 'My Phone' as a new section on the theme selector page that would allow you to add a theme that would be used on these devices. Other phones would still use the theme selected for the Mobile device type and /or Tablet device.

See image below...

This shows the extra section whic is added when you ad the expression highlighted in green in the example.

HTH

Mary

Average of ratings: -

Re: myMobile Alpha 1

by Joseph Rézeau - Wednesday, 25 January 2012, 11:39 PM

@Steve: this discussion may help.

Average of ratings: -