BIS 450 DeVry Week 5 I Lab 6

BIS 450 DeVry Week 5 I Lab 6
Downloading is very simple, you can download this Course here:
https://www.mindsblow.com/product/bis-450-devry-week-5-ilab-6/
Or
Contact us at:
SUPPORT@MINDSBLOW.COM
BIS 450 DeVry Week 5 iLab 6
BIS450
BIS 450 DeVry Week 5 iLab 6
iLab 6 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: acadDnnnnnnnn, 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, addandtags around the heading
“Healthy Eating with Dr. Dinewell”. Also, putandtags 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.