Some CMS are made to manage web sites like Wordpress for blogs or Moodle for courses. These CMS are often well design and allow the user to add its own extensions to personnalise its web site or do everything he wants.
The Mobile Authoring Tool Library is a library which consist of a plugin into two parts : one common and one CMS dependant. This plugin is made to be evolutive so everybody can be a part of this project.
The Web is more and more use through mobile phones. But there is no ONE rule to be accessible by a mobile phone for a web site. There are a lot of mobile phones and each of them has its own properties like the screen width, …
The Mobile Web Best Practicies Working Group of the W3C provides some guidelines to build a mobile friendly web site. Of course, a lot of web sites don't follow these advices and then, can't be seen correctly on mobile devices.
Considering the two previous parts, this plugin has two main aims.
The first one is the content adaptation. A web site doesn't have to be entirely designed for mobile devices and doesn't have to pretend to be accessible for all mobile devices of course. Therefore, this plugin will adapt the content of the web site considering the kind of devices which is accessing the web site to be more friendly with it.
The second one to teach some best practicies. This plugin will adapt the content but some content isn't adaptable automatically. The user which is publishing content has to be aware of it. Most of the time, he is not. This plugin will try to focus on problems concerning the mobile friendly side of the web site to make the user aware of this big problem.
This plugin is totally open source and all the following paths are relatives to this URL : http://dev.w3.org/cvsweb/2009/mobileok-authoring/
As we saw before, this plugin is divided into two parts : a common library and a CMS dependant part.
The folder " common/ " contains the common library. Its content is divided into four parts
The DDR Simple API : The device detection is done by the files in the " common/ddrsimpleapi/ " folder. It contains an interface following the DDR Simple API (see http://www.w3.org/TR/DDR-Simple-API/). An implementation using the WURFL system (the default implementation) is also in this folder but everybody can add it's own implementation of the DDR Simple API.
The logger : The files in the " common/logger/ " folder are used to keep important informations. You can find in this folder a basic class and an implementation using serialisation into files. You also can add your own implementation of the Logger class.
The Transcoding actions : The files in the " common/transcoding/ " folder are used to adapt the HTML content of the web sites. You can find here a transcoding action manager (the Transcoder class) and a basic class of transcoding action (the TranscodingAction class). You also can find some transcoding actions which implement the TranscodingAction class (one for each kind of code adaptation). Here again you can add your own classes.
The Powder file management : A powder file is a little xml file which certify that the website is mobileOK. In the " common/powder/ " folder, there is only one file which describe a class to build the powder file.
The folder " plugin/ " contains the CMS dependant part of the plugin. In this folder, you can find one folder for each CMS. The files inside each folder are differents because of the CMS dependance.
For now, only Wordpress, Joomla and Moodle are supported. Joomla folder contains four parts (three plugins and one theme), Wordpress contains two parts (one plugin and one theme) and Moodle contains three parts (one filter, one theme and one block).
Before installating the Mobile Authoring Tool Library, and if you want to use the default device detection which use the WURFL system, you have to prepare the WURFL files with the last version of WURFL.
Before any manipulation, you can get the " common/ " folder.
First, you have to get the last version of the WURFL xml file on this website : http://wurfl.sourceforge.net/.
Then, run the " common/ddrsimpleapi/implementation/wurfl/WURFL_prepareDatabase.php " script. Indicate the path of the WURFL file. Then clic on the button and wait.
Finally, three files will be generated : one big (>10Mo), one medium (~2Mo) and one little (<1Mo)
If you don't have generated the WURFl files, and if you want to use the WURFL device recognition system, please follow the instruction of WURFL file generation part before continuing this part
Installing the plugin in Wordpress is very simple. Get the " plugin/wordpress/ " folder. Put the " common/ " folder into the " W3CMobileOKAuthoringToolLibrary " folder.
Copy/Past " W3CMobileOKAuthoringToolLibrary/ " in the " wordpress_installation_path/wp-content/plugins/ " folder and " theme/mobileFriendly " in the " wordpress_installatio_path/wp-content/themes/ " folder.
You can now activate the plugin using the wordpress admin interface.
PS : If you want to use the cache file system, you have to give the written right to the " common/transcoding/cache/ " and " common/logger/filelogger/log/ " folders.
If you don't have generated the WURFl files, and if you want to use the WURFL device recognition system, please follow the instruction of WURFL file generation part before continuing this part
Installing the plugin in Joomla is very simple. Get the " plugin/joomla/ " folder. Put the " common/ " folder into the two folders " content " and " system ".
In each folder (theme included), zip all the files and use the joomla admin interface to install the plugins and the theme.
If you don't have generated the WURFl files, and if you want to use the WURFL device recognition system, please follow the instruction of WURFL file generation part before continuing this part
Installing the plugin in Moodle is very simple. Get the "plugin/moodle/" folder. Put the "common/" folder into the two folders "mobile_friendly/" and "W3CMobileAuthoringToolLibrary/".
Copy/paste the "W3CMobileAuthoringToolLibrary/" folder in the "filter/" folder of your Moodle installation. In the Moodle admin interface, clic on "notifications". The plugin options should be installed automatically in the database.
Copy/paste the "mobile_friendly/" folder in the "theme/" folder of your moodle installation. Then, activate this theme via the admin interface. The theme selection for when a non mobile device is detected could be done in the admin interface of the previous filter.
Copy/past the "MobileOKChecker/" folder in the "blocks/" folder of your Moodle installation. In the Moodle admin interface, clic on "notification". The block should be installed. Then, when you want to use it, go to a course page, change to edit mode and add the block (it is visible only in editing mode but it will test the non editing side of the page).
Warning : The theme uses options of the first plugin. So, take care that the filter is installed before installing the theme. If you want to use the theme all the time, you can set the two used themes at mobile_friendly in the admin interface of the filter.
Search for img markups in the given content. Determine if there is a need to change them and do it if necessary. It take in consideration the source of the image, its size and its format.
This functionnality is using a cache system to create and place the modified images.
Option : You can purge the cache folder (remove all the files in this folder).
Option : You can enable/disable the remote image resizing. In fact, to resize an image, you need to have the rights. Some images are protected (copyright for example) and you can't modify them ! Moreover, resizing remote image means getting them. It could extremly increase the execution time of your web site. So, be careful if you enable this options.
Search for table markups in the given content. Determine the use of the table. We are considering three kind of table : layout, vertical data, horrizontal data. "Vertical data tables" means that one row (mostly the first) is composed only by headers. "Horrizontal data tables" means that one collumn (mostly the first) is composed only by headers. The other tables are layout tables and are deprecated.
This functionnality try to keep the meaning of the table by adapting the linearisation to the kind of table.
Option : You can enable/disable each kind of table to be adapted.
Try to divide the content into shorter parts. The goal is to keep the meaning of the original content. Moreover, some markups will not be adapted like forms.
Option : You can set the homepage URL and the number of articles in this page. In fact, one rule to be mobile friendly is to limit the content size. And if there are a lot of article in the home page, it will not be paginate by the same way as the other pages.
You can set the percentage representing the size of the article compared to the size of the page (with stylesheet).
You can enable/disable a functionnality which suppress images which are too big (and set the limit value for " too big ").
Search for popups in the content and replace them if possible to be open in the same window.
Search for scripts in the content and delete them.
If you want to change the theme used when a mobile phone is detected, activate this option. You can specify three templates : the one used when a mobile device is detected and the two used when mobile devices are not detected (one for when the template switching is activated and one for when it's not activated).
The themes given with the plugins are mobileOK and can be used as a mobile theme in this option. They are desined to be a good version of the default theme of the CMS but in its mobile version.
Add an http header to link the powder file. To known what is a powder file, you can refer to the Powder Technical Report from the W3C.
In each plugin, a link is added when creating or editing some content. This link tests the page in which the content will be displayed in the MobileOK Checker.
This validator from the W3C is made to represents the combination of all the worst properties of known devices. It will indicates you what's wrong in the page and how you could improve your mobilefriendlyness.
A logger is scribing all the important informations.
Option (Wordpress only) : You can set the number of messages to be display in the admin interface.
We will add a preview functionnality which will emulate some mobile devices.
We will add some test of the mobileOK checker directly in the admin page.
We will add a functionnality to test the mobile friendlyness of a theme.
We will develop the CMS dependant files of an other CMS : Mediawiki.