EdTech 502: Week 9, Web Pages for Mobile Devices

Week 9: March 12 – March 21

Topic: Web Pages for Mobile Devices

Assignments Due: March 21

Introduction

This week we are working with Web page design for mobile devices. There are more and more cell phones with Web browsers and Internet access these days and many people access the Web using them. However, the screen is very small and full-sized Web pages don’t always display well. The entire field of mobile website design is expanding and standard methods that work across multiple devices are not fully developed. We will be using an alternative style sheet strategy that should work for many, but not all cell phones and mobile devices. This approach also works great for creating print-friendly pages. When you create your project this week it will have three external style sheets. Each style sheet is set with a media type so that one will be applied to mobile devices, one will be applied when printing, and the other will be applied when opening the page in a normal computer screen display.

The educational portion of the project this week is mobile learning, or m-learning. This type of educational approach takes advantage of the fact that mobile access to information is available. It requires thinking about the specific instructional attributes of the mobile Web. In the example I have structured an activity for Yellowstone National Park. The Web page can be opened from a cell phone with Web access. The activity helps to facilitate informal or formal learning while taking a tour of the park. Field-based learning is just one way to take advantage of mobile Web services for m-learning.

How else might we use mobile devices for learning?

  • A few examples:
    • Children visiting the zoo look at animals in their cages. They browse to video clips of the animals in the wild for comparison.
    • Students visiting a geologic site look up scientific animations showing how the landforms were created over time.
    • Students collect water quality data at a stream and submit it through an online form that updates dynamically from the field.
  • What other techniques can you think of? This is a great topic for discussion.

To learn more about m-learning please browse the following sites:

m-Learning Activity (75 Points)

In this project you will create a Web page that uses three style sheets designed for screen, handheld, and print devices. The activity you create on your m-learning page will be designed to take advantage of mobility. In other words, it is a mobile-learning activity designed for use with a cell phone or other handheld device with a browser and Web access. The example page has an activity designed for use during a tour of Yellowstone National Park. The Web page is structured to be accessed and used to structure either informal or formal learning during the park visit.

When I created my alternative style sheets, I started with the handheld version and made two copies. Then, I modified the copies to work with each device: screen and print. This way, I could use the same id and class names. The XHTML page only had to be structured so that each division had an id and classes that were applied as needed to format the page using the collection of style sheets.

Instructor Example:http://edtech2.boisestate.edu/snelsonc/502/mobile.html
and http://edtech2.boisestate.edu/evanouskil/502/mobile.html (Note: To view the XHTML code on the example open this page in Firefox, click the View menu, then click Page Source.)

The instructor example will open using the screen media style sheet. Use print preview in the browser to see what the the page looks like with the print media style sheet applied.

In order to view the instructor example in handheld mode you will need the Opera browser: http://www.opera.com/In Opera click View then Small Screen. Otherwise, you can look at

this pdf copy of the page in handheld mode (You may have to use the zoom tool after opening): http://edtech.boisestate.edu/snelsonc/internet_educators/mobileexample.pdf

Another way to view your mobile page is to use MobiReady. This will allow you to view your mobile screen and test it’s mobile readiness.

Instructor Alternative CSS Pages for the m-Learning Example (Best viewed with the Firefox browser):

When you look at the XHTML of the example page you will notice three links to each of the alternative style sheets in the head section. The code looks like this:

<link href=”../styles/mobilehh.css” rel=”stylesheet” type=”text/css” media=”handheld” />
<link href=”../styles/mobilescr.css” rel=”stylesheet” type=”text/css” media=”screen” />
<link href=”../styles/mobileprt.css” rel=”stylesheet” type=”text/css” media=”print” />

The media type has been set for each style sheet so that the appropriate one opens for the correct device. Please note that this might not work correctly with every cell phone or hand held device currently available. This field is dynamic and will continually change for some time.

Dr. Snelson has prepared a series of videos designed to help you learn the skills needed to complete the assignment. Please do the reading first and then watch the videos. Much of what we do now is repeated from previous weeks (e.g. creating and uploading pages) so only the new elements of the project are explained.

Video Presentations

  1. About the Mobile Learning Example: http://edtech.boisestate.edu/snelsonc/videos/dwcs4mlearning/dwcs4mlearning.html (Recorded by Dr. Snelson)
  2. Using Multiple Style Sheets for Devices: http://edtech.boisestate.edu/snelsonc/videos/dwcs4multiplecss/dwcs4multiplecss.html (Recorded by Dr. Snelson)
  3. Test Mobile Learning Webstie in Device Central CS5: http://edtech2.boisestate.edu/hungj/edtech502/template/video/devicecentralcs5/devicecentralcs5.html (Recorded by Dr. Hung)
  4. Using Alternative Style Sheets to Change the Display: http://edtech.boisestate.edu/snelsonc/videos/dwcs4multiplecsscode/dwcs4multiplecsscode.html (Recorded by Dr. Snelson)

Alternative style sheets for two different screen resolutions (0-320 and 320+) and print.

<link href=”../styles/mobilehh.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 0px) and (max-width: 320px)” />
<link href=”../styles/mobileprt.css” rel=”stylesheet” type=”text/css” media=”print” />
<link href=”../styles/mobilescr.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 321px)” />

Alternative style sheets for three different screen resolutions (0-320, 321-768, and 768+).

<link href=”../styles/mobilescr1.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 0px) and (max-width: 320px)” />
<link href=”../styles/mobilescr2.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 321px) and (max-width: 768px)” />
<link href=”../styles/mobilescr3.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 769px)” />

Assignment Instructions

  1. For this project you will need to develop an activity that can be done using a handheld device that has a Web browser and Internet access. You may want to spend some time browsing through m-Learning or mobile learning sites to get ideas. To find these do a Google search for “mobile learning” or “m-learning” Your activity should take advantage of the fact that the technology is mobile. Try to design an activity that works particularly well in a setting away from a traditional classroom or computer lab. I encourage you to post your ideas and thoughts on mobile learning in the discussion forum. This is a new and rapidly growing segment of educational technology that we really must explore. How can we tap into the power of mobile computing for learning?
  2. After you have made a decision about an activity, then start looking for online resources that would support the activity. The sites you select must support mobile handheld device browsing or at least use styles that are elastic enough to scale down into the small-screen format. For this activity you may use Google search, YouTube, and Google Maps, since they do support mobile devices. A Google search for “mobile-friendly sites” will lead you to additional options. You must integrate and link to at least one external website for this project AND your activity must be different than the instructor’s example.
  3. Create a new Web page for this project. Save it in the 502 folder of you Web site and name it mobile.html.
  4. You will need to create three external style sheets for this project. These will be saved as: mobilehh.css, mobilescr.css, and mobileprt.cssjust like the example. I found it easiest to create one style sheet for the handheld, format that, then make copies for the other two style sheets and modify them for the device display they were intended to style.
    • Use mobilehh.css to write style rules for the handheld device
    • Use mobilescr.css to write style rules for the computer screen
    • Use mobileprt.css to write style rules for print
  5. Link each of the three alternative style sheets to the head section of mobile.html. Add the media type code in each style link exactly the way it is shown in the example.
    • For mobilehh.css use media=”handheld”
    • For mobilescr.css use media=”screen”
    • For mobileprt.css use media=”print”
  6. After attaching your style sheets you can switch among them in Dreamweaver by using View–>Style Rendering and then select the correct device. This will activate the selected style sheet created for each media type.
  7. Type a title on your page. If you use an image banner it should be fairly small. The example uses a graphic with the words Mobile Quest m-learning. This image is 100 pixels wide and 80 pixels tall. It is inserted into a header div with a background color that matches the background color of the graphic. If you use a similar technique, you might find that best results occur with Web-safe colors: http://www.cookwood.com/html/colors/websafecolors.html Otherwise, the graphic and page background may differ slightly among browsers.
  8. Type a brief learner description. This should include language that indicates who the intended learners are. Use the words “Learner Description” to indicate this line of text.
  9. Add your name and copyright information to your page. In the example this is in the footer of the page.
  10. Write a set of instructions to explain how to do the mobile learning activity.
  11. Link to at least one mobile-friendly website that is used in the activity. Examples include Google, YouTube, and Google Maps. A Google search for “mobile-friendly sites” will lead you to many sites that you may find valuable for the activity you have designed.
  12. Design your mobile.html page so that it has a display that is suitable for a small screen. In the example, I used several named anchor links to jump to various parts of the page and back to the top. You may use a similar strategy if you wish.
  13. Write the style rules for each of the three alternative style sheets. Each set of style rules should be written so that the display is noticeably different and appropriate for the specified device. In the example, I made the named anchors visible in the handheld style sheet and hidden in the screen and print style sheets where they were less useful. The screen style sheet had a background image that was not included in the other two style sheets. The print style sheet was formatted to produce a simple display formatted for printing. When you write your own style rules, think about what makes logical sense for each device. Then, write rules accordingly.
  14. In addition to the necessary XHTML and CSS needed to format your page and make it attractive, please add the following code elements and styles to your project:
    • Text between <title></title>
    • Div tags as needed to structure the content of the page. The page should make logical sense without a style sheet.
    • Heading tags as needed to identify major sections: Start with h1 and move progressively down through h2, h3, etc. as necessary for the page.
    • Three style sheets linked from the head section and set to the correct media type as indicated above.
    • CSS rules for each sheet that are appropriate for the intended device. The three style sheets should NOT be 100% identical to each other. Some styles may be reused on more than one style sheet (e.g. body tag or headings), but there should be noticeable differences among each sheet. All of your style sheets should be written from scratch and be your own original work.
  15. Your page should be attractive regardless of style sheet applied and adhere to the design principles in the Non-Designer’s Web Book.
  16. Save and upload all of the files: mobile.html, mobilehh.css, mobilescr.css, mobileprt.css and any image file(s) for the page. The mobile.html page should be inside the 502 folder. All three style sheets should be saved in the styles folder and images, if any should be saved inside the images folder. The styles and images folders should NOT be saved inside the 502 folder.
  17. Try typing the address to your page to open your project page from the server. Your page should have an address similar to the instructor example. However, the snelsonc part of the URL will be changed to your own user name (typically last name and first initial).
  18. Validate your XHTML. http://validator.w3.org/
  19. Validate your CSS code with the W3C CSS Validation Service at: http://jigsaw.w3.org/css-validator/
  20. Correct any problems with the code.
  21. I would suggest spell checking your page. Click the Commands menu then Check Spelling.
  22. If you make any additional changes, please be sure to save your pages and upload them to the EDTECH2 server.
  23. Open your 502.html page and create a link to the mobile.html page.
  24. Post 502.html URL on the Assignment 9 Showcase discussion board to share with the class.
This entry was posted in EdTech 502 and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s