iLab 7 of 8: Mobile Version of Food Information Form
Submit your assignment to the Dropbox located on the silver tab at the top of this page.
See Syllabus, Due Dates for Assignments & Exams, for due dates.

i L A B O V E R V I E W
Scenario/Summary
Dr. Dinewell has been very happy with your work on her Healthy Eating website so far. However, for the first time, she tried visiting the site using the web browser on her cell phone. She was not pleased with how the site looked on the small screen, and the limitations of the mobile device made the site difficult to navigate.
Based on user feedback, Dr. Dinewell has found that the feature of the site that most people will find useful on their phones is the Food Information form. This form will allow people who are dining out the ability to check the number of calories in certain food items right at their restaurant table using their web-enabled cell phones. As a result, Dr. Dinewell has asked you to create a mobile version of the Food Information form that is adapted to browsing from mobile devices.
The most important issue with mobile versions of web pages is adapting the content for a much smaller screen size. After background research, you decide to target devices with a screen size of 240×320 pixels, as most web-enabled phones today have screens at least this large. Additionally, you have also learned that support for CSS in mobile devices is inconsistent; as such, you have decided for universal availability that your mobile version of the Food Information form will not use CSS.
Deliverables
1. FoodInfo-M.aspx Web form adapted for use from a mobile device, with associated code-behind file
2. TestMobile.htm page for testing FoodInfo-M.aspx
3. Word document submitted to Dropbox with screenshot of food-search results displayed in mobile test page (Your Name BIS450 Lab7 Screenshot.docx)

Grading Rubric

Criteria Points %
Step 2: Create Mobile Version of Food Information Form (FoodInfo-M.aspx).
• FoodInfo-M.aspx form created on the Web server by copying and renaming FoodInfo.aspx 5 20%
Step 3: Create Mobile Test Page (TestMobile.htm).
• TestMobile.htm page created on the Web server
• Displays FoodInfo-M.aspx form in a 240x320px iframe 5 20%
Step 4: Customize Mobile Version of Food Information Form.
• Link to sylesheet removed
• Heading “Healthy Eating with Dr. Dinewell” bolding used
• Footer text made smaller using tags
• GridView replaced by DataList showing Food, Amount, and Calories in a single column 10 40%
Step 5: Test, Capture Screenshots, and Submit (Student Name BIS450 Lab7 Screenshots.docx).
• Word file submitted to Dropbox with screenshot of TestMobile.htm page showing food search results in the iframe 5 20%
Total 25 100%

i L A B S T E P S
Preparation

1. Download the BIS450 Lab7 Code Snippets.txt file from Doc Sharing and save it in your working folder for this lab.
2. Using the Citrix remote lab:
a. Follow the log-in instructions located in the iLab tab in Course Home.
b. Upload the file that you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1).
STEP 1: Open Website on the DeVry Web Server.

1. Launch Microsoft Visual Studio 2010.
You must use Visual Studio 2010 in the Citrix environment.
2. Pull down the File menu and select Open, then select Website. In the Open Website dialog, select FTP Site in the left column. The connection information that you used in the previous lab should be displayed:
• Server: bisweb.devry.edu
• Port: 21
• Directory: coursefolder/yourname, where coursefolder = folder on the Web server for your course (provided by your professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith).
• Passive Mode and Anonymous Log-in: Both unchecked.
• Username: acad\Dnnnnnnnn, where Dnnnnnnnn = your DSI number.
• Password: Enter the same password as the one that you use for Citrix iLab (must be re-entered each time).
Click Open.
STEP 2: Create Mobile Version of Food Information Form.

1. In the Solution Explorer window, right-click on FoodInfo.aspx and select Copy; then pull down the Edit menu and select Paste, or press Ctrl+V. A new file named Copy of FoodInfo.aspx will appear in the Solution Explorer tree.
2. Right-click on Copy of FoodInfo.aspx and select Rename. Rename the file as FoodInfo-M.aspx. This will become the mobile version of the form that is optimized for use on mobile devices.

3. Right-click on FoodInfo-M.aspx and select View in Browser. Test the form to verify that it looks and works identically to the original FoodInfo.aspx. Close the browser when done.
STEP 3: Create Mobile Test Page.

1. Before starting to customize the mobile Food Information form, you need a way to see what it will look like when displayed on a small screen similar to that of a mobile device. To simulate this action, add an HTML page named TestMobile.htm to the site.
2. Open the file BIS450 Lab7 Code Snippets.txt that you downloaded from Doc Sharing. Select and copy the first two lines of this file, beginning with “Mobile Test Page
“. With TestMobile.htm open in Source View, paste these lines in between the and tags, as shown:

This creates a page that displays FoodInfo-M.aspx inside an inline frame (iframe) that is restricted to 240×320 pixels, a common screen size for Web browsers on low-end mobile phones.
3. Save your changes to TestMobile.htm.
4. Right-click on TestMobile.htm and select View in Browser. You should see something like the following:

5. Try using the Food Information form to look up some foods while working through the small window. Notice what a difference the screen size makes! Now you are ready to start adapting the mobile version of the form to make it look and work better in the small format. Leave the web browser open while you work through the next steps; you will be able to see the effects of your changes by saving your work and refreshing the browser.
STEP 4: Customize Mobile Version of Food Information Form.

1. At this time, support for Cascading Style Sheets is inconsistent on mobile devices. Developers choose to deal with this setback in various ways. Since you want to keep things as simple as possible, and because Dr. Dinewell expects the Healthy Eating site to be used by a wide variety of people, including many with low-end “feature phones” rather than Smartphones, you have decided to eliminate stylesheets completely for your mobile version of this page.
Open FoodInfo-M.aspx and in Source View, find and delete the “ ” tag that attaches the stylesheet to this form. Save the change and refresh the TestMobile.htm page in the web browser to see the result:

2. You want to add some minimal formatting without using styles. In Source View, add and tags around the heading “Healthy Eating with Dr. Dinewell”. Also, put and tags around the text inside the footer div at the bottom of the form: “All information on this site . . . Healthy Eating, LLC”.
3. You do not want the navigation links to appear on the mobile version of the page. Delete the nav div and all of its contents.
4. You decide that the GridView, while well suited to displaying data in a full-width browser screen, is not ideal for the narrow screen. You want to replace it with a display component that will avoid the need for horizontal scrolling. In Design View, delete the GridView control. In its place, drag and drop a DataList control from the Data section of the Toolbox. Set the data source for the DataList control to AccessDataSource1.

TIP: If the DataList control doesn’t change to show the Food: Amount: and Calories: fields after you select the data source, click Refresh Schema under DataList Tasks in the smart tag. If you are prompted to supply a parameter value, enter any food (e.g. apples) under Value and click OK.
5. Save your changes to the form, and refresh the TestMobile.htm page in the browser. Try searching for some foods and see whether this version of the application is easier to use on the narrow screen. You should see results like this:

STEP 5: Test, Capture Screenshot, and Submit

1. Capture a screenshot of the TestMobile.htm page with the results of a food search displayed in the browser. Paste this screenshot into a Word document.
2. Save the Word document containing your screenshot as Your Name BIS450 Lab7 Screenshot.docx. (Make sure that the browser URL is visible in the screenshot). Submit this file to the Week 6 iLab Dropbox.