Jason Rhode, Ph.D.

For the Web-based Learning Technology Repository (WBLTR), at the end of Module 4 and Module 8 you’ll be your compressing (aka: zipping) the site you are developing and submitting for grading via the dropbox in D2L. Both the Mac and Windows operating systems have the built-in capability to create compressed .zip files for submitting. Below I’ve provided short video tutorials illustrating the process for both Mac or Windows.

How to create a .zip file using Mac OS X:

How to create a .zip file using Windows:

Due to the Thanksgiving holiday, our synchronous class session on Wed, 11/25 is canceled. Have a wonderful Thanksgiving! ~ Dr. J

Those of you who are adding photos, images, or embedded media to your modules may be looking for ways to align your images in different ways. In my sample site at edtechsandbox.com/~hre472/summer2009/samplesite I’ve included a few image placeholders and embedded video and positioned them without using tables with some simple HTML code!

To align a photo to the right of text, in the HTML code, simply add this code in front of the image code:

<p style=”float: right; margin-bottom: 10px; margin-left: 10px;” align=”right”>

Then, just make sure to also add a </p> after the image code.

For example, here’s the code for a right-aligned image that I have on my front page of my module:

<p style=”float: right; margin-bottom: 10px; margin-left: 10px;” align=”right”><img style=”width: 300px; height: 300px;” alt=”Placeholder IMAGE” src=”images/image300×300.gif”></p>

To have the image aligned on the left and text to the right, simply change the “float: right” to “float: left” as this will then cause the image to float on the left side with text to the right. You can add margin-top and margin-right values to add more white space and/or adjust the px values to reflect more or less white space.

I can explain this in more detail in a future synchronous session but wanted to share the code in advance for anyone wishing to give this a try!

~ Dr. J

HTML tags comprise the backbone of any web-based content, providing the stylistic and functional information that a web browser needs to display the page. While web editors like KompoZer and Dreamweaver as well as the built-in text editor in Edublogs (WordPress) feature a WYSIWYG (What You See is What You Get) editor, it is possible to do a great deal of HTML content creation or adjustment to existing HTML by knowing just a few simple HTML tags.

Below is a table of basic HTML tags. Remember that tags are generally always used in pairs, with the closing tag identical to the opening tag with the exception of including a forward slash to begin the closing tag. For the examples provided below, the opening tag is shown in ALL CAPS with the closing tag in lowercase. Tags are not case sensitive, but typically only lowercase tags are used.

For those experienced with HTML, what are some other basic HTML tags that you’ve found to be helpful that I should consider adding to this list?

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

I’m giving my new educational technology blog a try. If you found this posting, feel free to leave a comment. I already post the following blogs and Twitter accounts extensively and you can find me in these locations:

• jasonrhode.com
• twitter.com/jrhode
• twitter.com/rhodestuff

I’ll be devoting this blog specifically to the Concordia University Chicago EDT courses I lead. I’ll be including links to the various blogs of students in my courses.

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 are some resources that you might want to ask for as a holiday gift:

Empower English Language Learners with Tools from the Web
Lori Langer de Ramirez
Aligned with TESOL standards, this user friendly guide shows how teachers can use Web 2.0 tools to help English language learners build language build language proficiency. Readers will find descriptions of Web tools such as blogs, podcasts, and social networking sites; classroom-ready projects for K-12; and guidelines on safe and appropriate internet use.

Teaching with Author Web Sites, K-8
Rose Cherie Reissman, Mark Gura
Author web sites can easily be integrated into any classroom as a free, accessible resource for instruction, thus inviting students into a fascinating literary community. This book examines the web sites of favorite children’s book authors, offers activities for promoting literacy and class participation, and includes suggestions for math, science, and social studies.

Empowering Students with Technology: Second Edition
Alan November
Offering more than 50 web sites, plus practical lesson ideas, new resources, and real-life examples, this second edition helps educators expand classroom experiences and strengthens students; critical thinking, research, and problem-solving skills. Examines learning in a globally connected community; opportunities for learners with special needs; information literacy; applications for digital cameras and cell phones, and more.</p

Teaching in the Digital Age: Using the Internet to Increase Student Engagement and Understanding, Second Edition
Kristen J. Nelson
The author helps teachers encourage active student involvement through internet-based activities that focus on individual learning styles and reflect current brain research. This how-to book helps teachers generate projects on information gathering and analysis, interpersonal exchange, and problem solving, and also includes lesson plans, curriculum standards, and assessment rubrics.

Blogs, Wikis, Podcasts, and Other Powerful Web Tools for Classrooms: Second Edition
Will Richardson
With updated research on web technology, a critical section on internet safety, and a new emphasis on information literacy with related links, this resource demystifies powerful internet tools for classrooms. The author provides definitions and explanations, teaching applications, and real-world examples for relevant, interactive learning.