Jason Rhode, Ph.D.

As each of your continue working on developing your Web-based Learning Technology Respository site, I thought it would be helpful to provide links to some additional resources and readings related to the principles of web design. While this is not a course on web design or in-depth study of web development, those who are interested in digging a bit deeper into the fundamentals of these areas are welcome to do so. I’ve broken the resources below into groups based on various elements of the design process.

Planning a Web Site

• Web Style Guide: The Site Development Process
• Web Style Guide: Initial Plannning
• Webmonkey’s Crash Course in Information Architecture: Lesson 1
• Webmonkey’s Crash Course in Information Architecture: Lesson 2
• Webmonkey’s Crash Course in Information Architecture: Lesson 3

HTML Basics

• Make an HTML Document from Scratch
• HTML Cheatsheet
• HTML Basics Videos – YouTube
  Search with keywords “HTML basics” to find numerous videos related to the basics of HTML

Usability

• The Usable Web
• Value of Usability
• User Testing Techniques
• Hidden Keys to Reader Friendliness
• Use It
• Removing Stumbling Blocks by Usability Testing
• Practical Usability Testing

Accessibility

• Accessible Online Course Design
• Creating Printer-Friendly Documents for Your Online Course
• Making Educational Software and Web Sites Accessible
• Accessibility in Distance Education
• Web Accessibility Initiative (WAI)
• Web Accessibility Evaluation Tools

Evaluating Web Sites

• WWW CyberGuide Ratings for Web Site Design
• Rubric for Classroom Web Pages
• “Good Sites: A rubric for evaluating student sites”

Misc.

• ION’s Online Education Resources: Web Design

Have you found other great resources related to web design or web development? Post a comment and share them here! My ever-expanding collection of web design resources is available at delicious.com/jrhode/webdesign

For an exhaustive, every-expanding directory of screen capture, screen casting and software demo tools, bookmark Jane Hart’s directory at http://c4lpt.co.uk/Directory/Tools/capture.html

BTW…a great source to subscribe to to learn about new e-learning technologies is Jane Hart’s blog at http://janeknight.typepad.com/ or follow her on Twitter @c4lpt

Here’s a free, very simple screen capture & annotation tool that I just stumbled across called Aviary Talon. Capture any webpage by adding Aviary.com/ to the beginning of the URL!

Aviary offers a variety of other web-based graphics editing features if you’re looking to do some advanced editing to your screen captures.

Here’s an example of a sample screencast I recorded providing a quick introduction to one of my favorite websites, Google Reader. Notice that the media you see below is not the actual embedded video (since I recorded nearly the entire width of the screen). Rather, I took a screen capture of the video to serve as the placeholder media and then make it a link to view the screencast. This is an effective approach if the screencast you wish to embed is to wide for your blog template.

I look forward to viewing your screencast that you create for your Module 3 ELT Activity!

One of the powerful illustrative features of web-based communications is the ability to easily add various types of media to illustrate, explain, or describe. For our ELT activities in our course, a portion of the grade for each assignment is based on how media is used in the posting.

So, what are some easy ways to add media to a blog posting? Perhaps the easiest is to take a screen capture of a particular screen of a technology or tool when describing the various features. There are many, MANY different ways in which to take screen shots and post them. I’ll share my favorites here, but I’d love to hear from others what are your favorites.

On my Windows machine, I personally use the free Howies’ Quick Screen Capture software available as a free download from howiesfunware.com. Below I’ve included a screen shot I took of the software open on my PC desktop, along with the available preferences available.

So why do I use “Howie’s” screen capture tool? A few reasons…

1. It’s FREE
2. I can specify a bunch of preferences, such as shortcut “grab” key to press when I want to take a screen shot, file format, quality, location to save the file to, etc.
3. I can choose to either take a screen shot of my entire screen or just the active window

On my computer, I create a “Captures” folder and then have Howie’s set to save all my screen shots to this folder so it doesn’t clutter my desktop. Then, when I’m ready to add the images to either a blog post or some other online communication, I have all the images at my fingertips!

On my Mac, which is my preferred computer system, there are several, even easier ways to take screen captures. Mac OS X has a built-in keystroke shortcuts to take a screenshot of the entire screen (Command+Shift+3) or (Command+Shift+4) to have cross-hairs to select a specific location on the screen to capture. Here’s a short video description of how to capture screen images using Mac OS X.

Once you have a screen shot captured, whether you do it on a Windows or Mac computer, you can then easily upload the image(s) to your blog and embed them in your blog posting. Perhaps someone in our class who has already done this would be willing to record a short screencast explaining the steps? I’m hoping someone will take me up on this challenge

If you’re a Mac user and you’re interested in going to the next level in you screen capture capabilities without spending $ for software, I’d recommend giving Skitch a try. Skitch is free Mac software bundled with a is a webservice that provides 1-click uploading of images for fast and fun image sharing. Here’s a 3 minute video introduction to Skitch.

So there you have it…hopefully, you have a few more ideas regarding adding media to your blog posts. If you are already using screen capture software, what software tool(s) are you using and why? If you have questions about screen capture or posting different types of media to your blog, make sure to bring those questions to an upcoming synchronous class session.

During Module 3, we focus on the connection between learning theories and the practical design of instructional activities. Cognitive Load Theory is one of the learning theories to consider when designing effective learning activities. In this video clip, John Sweller discusses cognitive load and recommendations for reducing cognitive load.

As you proceed through this module, consider how one designing e-learning might reduce and/or manage the cognitive load for learners. What suggestions can you offer for managing cognitive load in an E-learning experience? What role can learning technology play in helping manage cognitive load?

Below are links to the Module 3 ELT postings by each class member, exploring screencasting:

• Rhonda Alterson: toondo.com
• Sharon Bowling: earth911.com
• Kari Brown-Herbst: pandora.com
• Kim Browning: student information system
• Tim Buteyn: google.com/ig
• Marianna Desmond: sonoworld.com
• Michelle Eddlemon-Flynn: youtube.com
• Jason Elliott: weather.gov
• Roberto Maduro: online Spanish workbook
• Myron Parks: eftps.com
• Brian Petrusch: online.wsj.com
• Kim Wheeler: youtube.com

If you’ve not already done so, please review the contributions from each class member and feel free to add your comments.