Busy days for me! I’ve been working like crazy all week to get caught up – since life happened so many, many times over the course of the semester. I’ve been feeling like I’m behind basically the entire semester, but thankfully we didn’t have to turn in our blog reflections until the 25th.
This post is about the project I chose for the R685 final project. I decided to go with a student-suggested option: creating a resource for use with the class. In discussing this with Dr. Bonk, he suggested I create a web site with four to ten video resources per topic.
The link to the site I created is here – check it out!
Behind the cut is my full reflection, which I turned in with this project.
As an information technology professional specializing in web development, information architecture, and usability, I spend a lot of time thinking about how content is organized. This is key, I believe, to furthering the use of technology as a tool to support learning. After all, if information isn’t easy to find, most of the time nobody is going to find it. So, for the final project, I decided to spend some time building a site (with Dr. Bonk’s recommendation) containing video resources as a companion resource to R685. The site is available, currently, at http://ella.slis.indiana.edu/~bahalloc/r685, but I plan to move it in its current incarnation over to a subdomain on my personal web space at http://dementedpants.com where I keep my portfolio pieces.
Good web design begins with content. In this case, I already had an organizational schema laid out for me: the topics, broken down by week, for the class. It was up to me to find resources for each topic, but I certainly wasn’t alone in my work. I began by listing out the titles and web addresses for all of the cool resources that were videos posted to the forums by my classmates (and, one week, myself) this semester.
I wanted there to be some resources that might lead students and teachers to challenge, to question; that meant picking videos that didn’t rate as highly, or that were quite obviously sales pitches for a particular piece of technology. A good example of a video I selected for this reason is in the third week, titled, “Pair Follett eBooks with an Interactive Whiteboard.” While this video functions as a product demo and a proof of concept, it is also quite clearly a marketing video. My hope is that videos such as that one might lead users of the site to challenge the “quality,” so to speak, of the other videos.
Having the categories pre-defined for me really made the organization of the information into a trivial task (which is often not the case). I just placed the videos in the section to which they related. In retrospect, however, I wish I had selected additional metadata to display for each video – I think having information about length, for example, or even a short synopsis of each video, would be useful to people trying to select readings. I also considered having some sort of special symbol to denote which videos were of Dr. Bonk, since those particular ones may duplicate lecture content.
The Information Architecture
Often times, it seems as if instructors do not give much thought to arranging content for the web instead of for print. This is an important distinction; we don’t consume text on a screen the same way we do on a piece of paper. Consider the R685 syllabus: it’s a ton of information and all of it is on a single page. That makes it rather difficult to find what you’re looking for. I wanted to specifically address this because it’s something I’ve found frustrating a number of times during the semester. I think a division of information into separate pages is really a very useful tactic in cases like online syllabi.
When I do information architecture work, I try to abide by the principles laid forth by Steve Krug in his book Don’t Make Me Think! – the first and foremost of which is the title of the book. It has a lot of good information on how people use web pages, and is a short and entertaining read. I would recommend it to anyone, and particularly any teacher, struggling with how to organize course content for the web.
Though at first glance the site I built may seem very simple, it’s actually a highly dynamic application instead of just a simple web site. I used PHP, HTML, CSS, and Adobe Photoshop and Dreamweaver.
Everything for the display for the entire web site is contained in a single PHP page, with certain things pulled out into separate files to keep everything simple and easy to read. This means that this site would not work on a server not configured to run PHP, but since PHP is open-source this is often a trivial task to enable if it isn’t already supported.
Using PHP actually made the process of building the site feel a little like cheating – it was much easier than creating a separate page for each week, and then having to go back and change things on every page when I wanted to make a change. In addition to the site, I have created a guide to adding videos to it, which I will upload as a separate document. I believe that the way I set things up would make it incredibly easy for anyone with even a cursory knowledge of web design to update the site (though I admit it looks intimidating at first glance).
The setup I used also makes it a trivial task to go through and add additional pieces of metadata to each video; all I would need to do is add the item to each video entry, then go and update my block of code to display whatever it is I want to share about the video. It would also be almost no work at all to adapt this design for another class, provided a list of resources and topics was already available.
I used HTML5 and CSS to handle page structure and styling. Though HTML5 is in its infancy, and I didn’t make use of even a tiny percentage of the features it offers, I feel it’s important to stay current with my skills, and this offered me an opportunity to do just that.
Despite the fact that web development is my job (and likely will continue to be for a good long time), I’m not much of a designer – at least, not from an artistic perspective. So I decided that I would keep things simple. I used a Web 2.0 logo generator to handle the header; the rest of the color scheme was inspired by the Cheshire Cat from Disney’s Alice in Wonderland, and by a desire to make sure that users with color vision deficiencies didn’t have trouble reading anything on the page.
As always, the content drove the design. I knew that each page would need navigation, and that nothing would be more than one click away from anything else on the site. I considered embedding YouTube videos in the site itself where appropriate; however, since a not-insignificant minority of links did not have actual videos, I opted not to include embedded video at all for consistency of appearance. Because I wanted this to be usable for even people with a minimum of technical knowledge, I went out of my way to preserve standard design principles – consistent navigation on every page, with links clearly differentiated from non-hyperlinked text.
The Learning Experience
Over the course of the semester we were required to read at least 30 short articles and watch at least five videos. I ended up watching way more than 30 videos! There were a lot of incredible resources I found while searching, and I’m glad to be able to share them with others. Given that my passion is for sharing technology with others, this was an especially rewarding project for me.
Of all the videos I shared, my favorite is among the longest: during the Alter Reality Learning week, I included a talk by Sarah “intellagirl” Robbins from 2007 at UNC Chapel Hill. Dr. Robbins is directly responsible for my interest in educational technology, and so it was immensely gratifying for me to be able to share one of her talks with others. There’s a lot going on in that video, as well – Dr. Robbins is an incredible public speaker in addition to being very knowledgeable and infectious in her enthusiasm.
I feel that these video resources definitely increased my understanding of the potential technology has to enhance learning and engage students. In addition, I’ve created something that I can share with other people; in fact, I’ve already shared the site with an acquaintance in the education department and she was very excited to have the resources available (in exchange, she gave me feedback on the colors I selected for my design, ultimately leading to a slightly lighter-colored background on the navigation bar and hyperlinks).
To conclude, I am glad to have chosen something that isn’t just useful to me, but to others, as a final project. This is something I would have loved to have had available toward the beginning of the semester, and I hope that it will be useful to future students in this class.