11 months ago

BIS 450 DeVry All Week iLabs

10. Save your Word

10. Save your Word document containing 5 screenshots as Your Name BIS450 Lab5 Screenshots.docx. (Make sure that the browser URL is visible in all your screenshot.) Submit this file to the Week 5 iLab Dropbox 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: • 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