Mobile technology such as smartphones and tablets provide a unique opportunity to develop learning content that can be accessed on the move with the advantages that these devices offer.
One way to build a mobile web application for a device such as a smartphone is to develop for the "mobile web". At its basic level this is a web site consisting of HTML, CSS and JavaScript technologies designed to display in the device’s web browser.
If you have already developed a web site or want to get started in developing for the "mobile web" then Dreamweaver CS5 (which also comes as part of the Adobe eLearning Suite) provides the tools required to create your first mobile app and then move on to bigger and more complex things.
Completed Mobile Web Application
This screenshot shows the completed application web application running in Safari on an Apple iPhone.
Ingredients – What tools do you need
1. Adobe Dreamweaver CS5 – a trial version is available
2. iUI Widget – requires an Adobe ID to be download
3. Install Adobe Dreamweaver CS5 and the iUI Widget
Once installed an option for Widget… will appear under the Insert menu in Dreamweaver.
Create a site in Dreamweaver
Best practice is to create a site in Dreamweaver which will contain all page assets such as images, CSS and JavaScript files.
Create a folder on your local machine and then from the Site menu in Dreamweaver create a new site by providing a name and the path to the folder
Create a New Page
From the File menu in Dreamweaver create a New HTML page and save it. In this example the page was saved as start.htm.
Add the iUI Widget Framework to the Page
Select the Widget … option from the Insert menu add the iUI object – you can specify a theme preset.
Click OK.
Save and Preview the Page
Save the file.
During the save process a message will explain that the page requires to copy dependent files (required to create the application) – click OK to save the required files.
The Page Areas
iUI provides a useful framework which allows content to be modified while keeping the underlying styling for a mobile device. The default content describes music albums, artists and songs.
Each of the text areas can be edited directly in the Dreamweaver interface to match your specific content and then previewed at any time by pressing F12.
Preview the Page
Once changes have been made, the page should be previewed to ensure that changes are working as expected.
Device Central
If you have installed the Adobe eLearning Suite, an application called Device Central is also installed. This is useful as it allows web pages to be previewed in a "virtual device" that mimics a mobile device.
Different types of profiles (describing the properties of different devices) can be accessed and the site previewed without requiring a specific model of smartphone.
1. Device profiles can be grouped together to facilitate testing
2. Content type can be selected to test different aspects of a mobile device
3. The navigation on the "virtual device" allows the application to be tested – e.g. keyboard is active, buttons work as if on a live device
Multiscreen View
Dreamweaver CS5 also has a new featured Multiscreen View.
This allows a web site to be viewed at multiple resolutions at one time – smartphone, tablet and desktop – for example.
Multiscreen preview can also add CSS Media Queries to assign individual CSS files for the appropriate target device.
Important Information
By default, Safari on the iPhone will render a web page as if it was a desktop browser with 980 pixels width available for the web content. As a result, the user sees a page with small, illegible letters and must zoom in to see the content.
Adding the following line of using the code view in Dreamweaver to the <head> section of the HTML code will ensure that the device width will be used to display the content at its correct magnification when rotated too.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
This element instructs the browser to use the width of the device as the width of the viewport, instead of the default 980 pixels.
A Finished Article
To view the finished application on your smartphone go to the following url using the browser on your mobile device:
http://www.tidalfire.com/mobile/acrox/start.htm
To get more information view the start.htm page source to see how images and navigation were added to create the final web app.
Software used: Adobe Dreamweaver CS5
This work is licensed under a Creative Commons Attribution 2.5 UK: Scotland License.
Follow us