E


Operating Instructions

Mobile Learning EXperimental(MLEX)

beta Version

last updated 11/06/2008

Gary Marrer

Glendale Community College


General Information


The MLEX (mobile learning experiment) program is a software tool designed to assist web page authors in creating a single web page that can be viewed on both a PC(large screen) or mobile device (small screen). It accomplishes this by restricting xHTML (Extensible Hypertext markup Language) and CSS (Cascading Style Sheets) tags/elements to only those elements which are known to be compatible with most mobile devices. The MLEX application offers the author a linear page design. The page is divided into a title, header, body and footer. The page is linear since each of these sections line up on top of each other. This is a very successful way of presenting content on a mobile device. The application uses div tags to segregate these sections allowing them to each have unique formatting.


Note: Using this program assumes the web page author has basic knowledge of HTML and xHTML. Ideally a knowledge of CSS would also be helpful but not required.


Note: MLEX was written in Visual Basic.Net 2008 and it can be run on personal computers that use the Microsoft Windows operating system. It has been tested on Microsoft Vista and XP.


Behind the scenes, the MLEX program will place the text and other content added by the author into sections of the xHTML (.html file extension) document segmented by a special MLEX tag (i.e. <!-- <MLX_dochead> -->). To use this tool, you will need to copy and paste text into one of the MLEX editing sections or use the conversion tool to process a rich text format (RTF) file. If you try to open a HTML web page file not built with MLEX, you will not be able to edit it.


MLEX can only modify files correctly if the file was created in MLEX. Due to additional MLEX tags added by teh program, you must create the MLEX web page in MLEX for it to work correctly. 


In the opposite direction, a file created for MLEX can be edited by other HTML editors but you should take special care not to edit MLEX tags or use HTML that will not display on a mobile device. In the next release of MLEX, there will be a feature that will report any mobile web page issues with your xHTML or CSS. In the mean time, there are several web sites that will also evaluate your xHTML for its compatibility with mobile browsers and devices.


In addition to special MLEX tags, the edited xHTML will also call out one of several external Cascading Style Sheet files that have been created for MLEX. The CSS files assist in the rendering on large or small screen devices and provide theme support (standardized color and style effects). These CSS files will need to uploaded to your Web Server for colors and formats to render the same as what is seen in the MLEX tool. Missing CSS files will not prevent the page from being displayed but will effect colors/fonts.


CSS Files used by MLEX

personalcomputer.css

personalcomputer-1.css

personalcomputer-2.css

personalcomputer-3.css

personalcomputer-4.css

mobile.css

mobile-1.css

mobile-2.css

mobile-3.css

mobile-4.css


Web Page Design Process


You can approach designing and editing pages in MLEX in whatever way you would like but there is an approach that seems the most productive. The process is as follows:


  1. Create your text in a word processor or text editor. Do not worry about style elements but spell check your document.

  2. Either copy and paste from your text editor to MLEX or use the MLEX convert tool on a Rich Text Format file to prep the file for use in MLEX

  3. Use the Edit tab to add style and text changes

  4. Use the PC Browse and Mobile Browse tabs to look at a emulation of your document

  5. Use HTML menu option or right click on web page sections to add xHTML

  6. Use the Theme menu option to select a color scheme

  7. Use the FTP tab to transfer file(s) to your web server.


Note: For compatibility with mobile device browsers, please use xHTML and not HTML in your document. They are very similar but not the same. The are many resources on the Internet regarding xHTML.


Screen Shots


Operation of MLEX is a visual process so the next section of this document uses screen shots to review how different features of MLEX are used.




When you start the application you will see a pop up dialog box that asks you to accept the terms of the beta version. You can opt out of the program at this time.




Launching the Program (beta Splash and Main Screens)


This is the main screen. The main screen contains set of pull down menus.

File

HTML (Help Quick Link also shows this list)


Themes (colors in appendix)

Validate (this menu option has limited function in the beta version)

Help


The tool bar consists of options equivalent to the menus for New, Open, Save, Exit with the addition of a button to pop up a Quick Help Screen.


When you start the program, a new MLEX HTML document is automatically created and displayed in the Edit tab. This is done so that any new text added to the document will be formated with the MLX tags already inserted behind the scenes.


Note: MLEX tags are now viewable in the edit tab but can be seen in the Browser tabs if you click the Show Source button.


If you want to work on a document previously created, select Open and use the Browse Dialog Box to either navigate to a file or type the file name in manually. The browse dialog box with automatically go to the install folder of MLEX.


Edit Tab


The edit tab is the window where the editing of your web page will take place. xHTML tags are highlighted with Blue when the document is opened and any new text will also be highlighted. The page is divided into four sections. The Title section is the information that will display in the title area of the web page when displayed in the browser.


The header section is where you would place Introductory information (page title, abstract, links, etc.). It will be at the top of the web page so it will most likely always be seen by the reader.


The Body section is where most of your page will be added. This sections could span several screens.  You will have scroll bars that will let you update web page content beyond the edit box on the edit tab.  This is also true of the header and footer edit boxes.


The Footer section is where you will place closing information. Common data here is copyright information, author contact information and page navigation links.


On the left of the display is a check box to add a box around this section of the web page. This box is added to the div tag for the section and can be helpful when viewing the web page on a mobile device.


If you look at the default text, you will see a mixture of text and xHTML tags. You will want to add paragraph and break xHTML tags at the minimum.


To add new xHTML tags you can select from the HMTL menu option or right click on the different MLEX sections. If you do not see an xHTML tag in the list, you can add any valid HTML you would like but make sure it will not cause problems on a mobile device (see appendix for a list of known web page incompatibilities with mobile devices).


Once you edit your page, you will probably want to view it in the PC or Mobile browser tab. I would suggest the PC Browser first since you will be able to see more of your document.




PC and Mobile Browser Tabs


You will be returning to these tabs throughout your editing session. The browser tabs will show the most recent changes rendered through a browser. This is the MLEX browser and you may not see external CSS files changes in this screen. Your final inspection of the page should be from the web server it will be called from.


Note: The PC and Mobile browsers are only to help you check on your edits. The final page may look different due to CSS or other features that can not be viewed in this tool. You will need to upload the web page to your web server and view it over the Internet on your browser to do your final page inspection.


Back and Next arrows are available on both pages in case you want to navigate to a link on your page and then return. In addition, each screen also has a Show Source button that will launch a pop up window that will display the entire web page source. This is for viewing only and can not be edited. If you look closely, this screen will show you the MLX tags.




Note: the mobile browser screen is just a simulation of how the text and images would render. There are several good mobile device emulators available and I have provided a list of their URL's in the appendix





PC CSS and Mobile CSS Tabs


The PC and Mobile CSS tabs will show you the source for the custom themes for display on a personal computer or mobile device. If you right click on this screen you will be given an opportunity to edit, save or cancel editing of this file. Do not edit this file unless you are familiar with CSS style statements and their syntax.




FTP Tab


The FTP tab is for sending your MLEX pages to your web server. You will need to know the FTP address of your server along with any authentication information. You can send any file to the web server or you can check the current file check box to send the file you are working on. If you check the Send CSS files check box, it will send all of the CSS theme files to display you page on a PC or Mobile device.



Themes Menu Option


The Themes menu pull down is availalbe if you want to use one of the four pre-determined color options. Color options are Winter, Spring, Summer and Fall.  If you select one of these themes are selected and saved with the document, they will be retained when the docment is viewed from the web server.


Note: For themes to work correctly, you must make sure all of the personalcomputer and mobile css files are copied to your web server. There is an FTP option to facilitate this automatically.


The custom option will use the personalcomputer.css and mobile.css files which can be edited with the PC CSS and Mobile CSS tabs.  Edit the CSS files only if you understand CSS and the tags.



Comments: Email Gary – gmarrer@gmail.com



Appendices:


Appendix I: Installation Notes


The program has been created to be installed with a setup.exe file and can be deleted with the Program Uninstall option found in control panel.


The program will install to the “MLEX files” folder found in the Program Files folder.


Here is a list of the files copied to your “c:\program files\MLEX files” folder:


cis159.html

Microsoft.VisualBasic.PowerPacks.Vs.dll

MLEX1.exe

mobile-1.css

mobile-2.css

mobile-3.css

mobile-4.css

mobile.css

personalComputer-1.css

personalComputer-2.css

personalComputer-3.css

personalComputer-4.css

personalComputer.css

settings.xml

syllabus.html

temp.html

template.html


Appendix II: Program Notes


MLEX works by adding xHTML comment tags that are ignored by the browser but are read by the MLEX program and used for formating (text and color). The file created is an HTML file but it is one which has these special MLEX tags. This file can be processed by any browser but MLEX can only edit its own HTML files. Sounds confusing but it is a simple idea that should allow you to mix and match it with other web technologies.


Appendix III: Mobile/PC Web Design Guidelines




Appendix IV: Mobile Device Emulators


(local) Microsoft Device Manager (Free) - http://www.microsoft.com/downloads/details.aspx?familyid=a6f6adaf-12e3-4b2f-a394-356e2c2fb114&displaylang=en


(web) Opera Mini Browser - http://www.operamini.com/demo/


(web) Ready Mobi Page Check - http://ready.mobi/launch.jsp?locale=en_EN


(web) List of Emulators (Klaus Kormenda) http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/