Open Source Software and Web 2.0

It's hard to know where to begin this discussion. I've been observing the issue of open source versus commercial software for educational use first hand in my school so I have a lot of thoughts about that. We installed Moodle three years ago as our course management system (CMS) and we also bought Blackbaud's (not to be confused with Blackboard) suite of student records management applications, all of which are meant to integrate the financial, educational, and admissions records of students and their families for our K-12 school of about 500 students, which cost a huge amount of money. So we have both open source and commercial applications in our school for different purposes.

But part of this assignment is to discuss this in relation to the two magazine articles about the changing face of the web with the innovations of user-generated content and social networking capabilities. The commercial student records applications are not designed to meet these needs at all, so that helps narrow it a bit.

The picture above shows our installation of Moodle, which we call Hewitt CourseWeb. I've been very involved in its implementation over the last few years. I have focused on exploring its different features in my own classes, trained teachers on these features, worked with administrative functions, and developed strategies for importing our courses and users into the system. Recently I led a workshop for teachers that I called "CourseWeb 2.0" because virtually no teachers have been taking advantage of the features in the CMS that enable students to share their own content with their classmates. They've been using it exclusively to post homework assignments and provide lesson materials for students to download. I had been frustrated with this until I realized that our school's philosophy is very teacher- and content-driven, espousing a model of teaching and learning that emphasizes teachers delivering information to students and students simply studying it and demonstrating that they 'know' it. The concept of Web 2.0, that content and feedback should be generated and shared among users does not figure into this model. So in my workshop I presented the social networking capabilities of Moodle--discussion forums, glossaries, blogs, and even chats--in the larger context of its benefits to teachers even in a content-driven curriculum. It was nice to see the reaction because while the teachers know what kind of school they teach in they are sometimes frustrated with the exclusive emphasis on the traditional philosophy and I think they are looking for alternatives. I could see the lights go on when they saw that our CMS could serve as a medium for them to explore that in their teaching. I think we'll finally start seeing some exciting things happen with it next year.

There are some other minor issue that also come to mind. One is that as an educational technologist who sees the web as a creative medium it was a little frustrating to move from using FrontPage to design an individual instructional web site I used in my classes to a CMS with much more functionality but almost no control from the teacher's perspective over how the course pages look. Everything has the same color and layout and while I can innovate by embedding things like streaming video from Flickr into a page I'm mostly restricted to choosing modules from drop-down menus. I know a few other teachers who were into experimenting with their own HTML code were sad to lose that bit of sandbox to play with and individualize. While we have implemented Moodle in grades 4-12, the lower school teachers have reluctantly dealt with the transition from their colorful web pages full of clip art to the uniform Word Press blogs they now update with class news. The administration is happy, though, because under the old system they were frustrated by the lack of uniformity in design and navigation schemes. As the intermediaries of this issue, we in the tech department had to work constantly to help teachers at least put their navigation links in the same place on the page, but it was a losing battle.

While we've made the transition to open source software for our CMSs with great success, I've encountered a couple frustrations that weren't mentioned in the open source versus commercial apps paper. One is that while the CAOs/CIOs are concerned with the 'uncertain life expectancy' of vendors as they can be bought up by other vendors, I find that features can change with open source applications from one version to another and there is no one you can complain to about it. Usually upgrades bring improvements, but with our most recent upgrade we discovered that the new version of Moodle had taken a step backward in its handling of multimedia files. We had previously enjoyed the ability to upload MP3s and have them immediately stream in a nice, easy-to-use web player with a link to the file for download right below it. It was the perfect solution to students needing to both hear audio on their computer but also be able to download it to their iPod to listen to later. In the new version you have to choose one or the other so teachers have to upload the same audio file twice to make it available in both formats. That additional work effectively killed the option for most of the teachers I work with.

So that does raise the additional issue of open source applications changing in ways that you have no control over since the people responsible for its development are a community of programmers rather than a service-oriented company. The best you might hope for is to post feedback to a community forum and hope they the developers take it upon themselves to incorporate the feedback in a future version.

How my project reduces cognitive load

My project employs the strategies of pre-training, segmenting, weeding, signaling, and aligning words and pictures. The website is here: http://openblackboard.com/ErikNauman/midterm

Pre-training: When students are encountering the website for the first few times, they will be using it as a learning resource. They will use the 'find' link to look up vocabulary words and concepts they don't understand yet. This will enable them to work successfully on their own robotics project that they can later share with others on the website. Students with more knowledge of the vocabulary and a finished project can use the 'share' link when they are ready to upload a project of their own.

Segmenting: There will be a lot of information of different kinds on the website. Some will be more abstract, such as the vocabulary and concepts, whereas the projects will be applied and concrete. It is very important that the different types of information are clearly categorized so students can find exactly what they are looking for without being confronted with a lot of overwhelming or distracting information. The DHTML menus help a lot in this regard, because originally I had vocabulary, concepts, projects, and creators (engineers) all arranged in columns on one 'find' page. This could be overwhelming to see and cause cognitive overload just trying to distinguish which column you need to focus on. The DHTML menus clearly distinguish the categories with simple labels and allow the student to navigate to the information they need without having to sort through it all.

Weeding: The information on the website is very concise, so I don't need to weed it, or eliminate the extraneous information. The way information gets on the site is what does the weeding. People will submit information with a form that has very concise labels, so extraneous information can't be added. And I haven't included information that doesn't facilitate learning to program robots in some way, such as a photo gallery of random kids with robots or something.

Signaling: The navigation provides the first layer of signaling, guiding the students clearly to the type of information they need to find. On the sub-pages it is clear how to get to the home page and the other sections, so the basic organization of the site's information is clear to the user throughout.

Aligning pictures and text: The table layout maintains a close arrangement of pictures and text. Pictures and text are used together on the pages where projects are featured. The pictures and text are side-by-side rather than above and below to prevent the need for scrolling down to access part of the text or picture.

Example of Anchored Instruction

I'm crazy about the Arduino. I really want to get one. It's a circuit board you can plug in to your computer and program it to do cool stuff. But once I get one I'll have to learn how to set it up and program it. Well, there happens to be this website dedicated to instructing people how to do just that, here at Arduino.cc. I think it's a great example of anchored instruction because of its goal oriented nature. Right there on the website you can find sources to buy one, download the software, and then find tons of sample programs to learn the basics. All of the sample projects seem to have accompanying graphics that would provide the types of benefits mentioned by Bransford. While these aren't video materials, they would still provide two of the three benefits of video materials, by providing "rich sources of information" and visual cues supporting recognition of patterns. The latter is accomplished by showing the physical configuration of the Arduino and accompanying input and output devices so that you can see how the programming commands are affecting the physical device. In terms of the first benefit, it is essential that photographs be used as "rich sources of information" because one would be unable to picture the ultimate goal of the project without them.

Anchored Instruction notes

• Knowledge will not be transferred, or used in the real world, if the appropriate "triggering conditions" aren't applied. A triggering condition is identification of a condition under which knowledge is acted upon, where a condition-action pairing is defined.
• Video is often a good medium for instruction because it facilitates learning in 3 regards: 1) It contains richer sources of information, 2) it can represent dynamic, animated material, and 3) visual and auditory cues support recognition of patterns, which is a prerequisite for applying condition-action pairings.
• In a study it was demonstrated that students who had been given a problem in the context of a video segment turned out to transfer the solution strategy they learned in many other contexts, whereas teh students who didn't use the video segment did not.
• I was thinking while reading this paper what does this have to do with making my robotics programming web site if it won't have any videos? Well I realized the important point is that the information I'm hoping to teach the students using it must be presented in the context of real, useful information. In this case that means that commands and concepts should always be linked with real projects with accompanying pictures so students can see the application of the new information.
  

Learned some new things about text formatting with HTML

• font size: in CSS definitions, best practice is to define the base font size in px, in the body styles definition, then the remaining sizes in ems. So the base size is set to an absolute size and the other styles will be a percentage of that. This follows from the inheritance rule that the child styles will inherit the parent font size as an absolute, then modify it by a defined percentage.
• HTML syntax: <tag attribute="value">
• W3C defined font families, 5 of them: Serif, Sans-serif, Monospace, Fantasy (Curlz, Jokerman), Cursive (Zapf-Chancery, Lucida Handwriting)
• blockquote tag: The text indent button in DW actually adds a blockquote tag around the selected block (p or div) of text
• physical versus logical styles: HTML text styles come in two philosophically distinct categories. Physical styles define the appearance, such as <b> or <i>. Logical styles set the appearance of a type of information, such as <code> or a <cite> (for a citation), or, yes, <em> and <strong> (see below). Logical styles aren't defined in the code, however, but by the browser, so if you want control over those definitions you must define them in your CSS. There are some logical tags I'd never heard of, like Variable, <var>, Sample, <samp>, Keyboard, <kbd>, Definition, <dfn>, Deleted, <del>, and Inserted, <ins>.
• bold and italic: <b> and <i> tags are physical, whereas <strong> and <em> are logical tags. It is considered "better practice" to use the logical tags rather than the physical.

Learned something new about hyperlink styles

In my Dreamweaver CS3 reading I learned something new about defining hyperlink styles in your CSS. It was stated that the four link styles had to be defined in a certain order for them to work properly, namely a:link, a:visited, a:hover, a:active. I didn't know why and I'm sure I haven't always followed this practice, so I did some research. First, I found a really good tutorial about defining link styles using Dreamweaver's interface here. But this still didn't explain why the special order, and I was beginning to think it was one of those professional things where it's just done that way and if you don't you'll be made fun of. Then I found a fantastic post at meyerweb that explains it perfectly. I can't explain in a nutshell but it's worth reading. What I have done is thought of a mnemonic to remember the order: Let's Visit Hyperlinks Always (LVHA). Of course this isn't necessary if you're using Dreamweaver to define the styles because the order is right there in the drop down, but it seems so much easier to just write that CSS by hand than going through all those clicks.

Web site project

I've been thinking more about my web site project, this web site that (I hope) my students will use to find their way through programming their Lego robots. I'd like them to be able to find out how to use commands in program structures, get ideas for projects, and share their own ideas for programming and projects. I've got some PHP and MySQL under my belt from a couple other web sites so I'm going to use it here to create a database of Logo robotics programming commands with descriptions and examples of each, and maybe even pictures of sample projects. So I've done a brief sketch of the information architecture for the site, or maybe this is an early version of the flow chart. Basically, I'm looking at a page for people to find commands or project ideas, a page for them to add their own commands and project ideas, and a page for me to administer the database. I guess I'll also add a page about me, too. And then they just better use it. I don't want to go to all this trouble for no use. I guess what I hope is for them to add some content and then widen the audience to a broader Logo robotics community and hope they find it useful as well.

One of the keys will be making it look nice with an enjoyable, easy, and intuitive interface. So I hope to achieve that in this class, and the PHP/MySQL can come later. I know that's a bit backwards, but it'll still work. Famous last words, right?

McLuhan, The Medium is the Massage, notes

• pg 22: "the mass audience can be used as a creative, participating force." I guess reality TV is the lowest common denominator of this phenomenon. Does Youtube represent this? or is all Web 2.0 a step further than he imagined?
  
• pg 22: Interesting that he sees television as participatory. Now it's seen as a passive activity.
• pg 41: "Electric circuitry is an extension of the central nervous system." And then, when the reach of any one of our senses change, we change. Maybe robotics is interesting because of this, an extension of our senses that changes what and how we can perceive. If you can make and program something to gather data or send a message, you not only gain control in the world, but have special knowledge of how to see things in a new way.
• Also, re: electrical circuitry, is blogging an extension of self? and with so many doing it is this a new mass participation in this global village? But one problem is blogging does not help one understand the circuitry at all, it's still magic, like HTML was in the beginning.
• First was oral literacy, then print literacy, now what?
• pg. 117: We are visually biased.
• pg. 125: He says "Television completes the cycle of the human sensorium." He says it abolishes writing, and therefore, I think, the linear thought of the printed word. If we extend the medium of television to include web browsing, maybe we have a key to why people have such a hard time following textual directions on web sites. With such an overwhelmingly visual medium people turn off their linear, textual thought processes. So often I have to help teachers simple read instructions on the page in front of them when they are trying to complete tasks. What would be a more effective way to communicate instructions?
  

About Me Colors

I found it hard to get inspiration for a web page color scheme by looking at photos. A photo's colors are so grounded in what they inhabit and web page colors are abstract, hard, and too much themselves by contrast. So I don't know if this will translate, but I was thinking sunsets and I have a lot of sunset pictures from out of our living room window, but those all seemed too dark, so I found a sunrise picture from a trip to Mohonk and I think it might work. But just the sky part, not the dark mountain. I think this is a monochromatic color scheme, with the main color being blue and the inclusion of shades of blue and gray and some orange highlights. I think the background should be light blue to give a light feeling and the navigation should be a combination of dark blue/gray and orange. The place I'm eventually heading with this web site is a robotics help site for my students, so I may want to make the colors more saturated than they are in this picture.
Anyway, here is the page I ended up making: http://openblackboard.com/class

Web site evaluation

The One Laptop per Child web site is very pleasing to look at and navigate as well as being informative. It is the antithesis of a busy web site. The home page is deceptively simple. All you see is the iconic message on the left and the title of the site in the upper left. The icons spell out "One Laptop per Child" as you look at them left to right, so this would be how it establishes its "brand." But then upon mousing over them you see that the icons are the central navigation for the site as a word appears below representing that page's content. Clicking on one of them brings you to one of four sections (vision, laptop, participate, children).

Visual consistency is achieved as the iconic message/navigation is maintained on each sub-page and used for the site navigation throughout. Aside from the site title in the corner the rest of the page is white, so this phrase establishes its central importance very quickly by being right up front and center. The message is visually engaging as well with its dramatic color scheme, featuring highly saturated primary colors and one secondary color. The colors aren't in their pure form, though, so the yellow is more of a goldenrod, the green more grassy green, the blue a sky blue, and the red edging toward pink. I believe they were carefully chosen, because this makes them more interesting to the eye and (at least to me) they have a calming effect rather than the brash feeling pure primary colors would have. The color palette is maintained throughout the website as each section keeps the main color of its navigation icon. The web site layout is bounded by vertical lines that separate sections of text from each other and imply a rectangular boxy structure without being heavy-handed. The layout also achieves a kind of consistency in structure by separating the text sections with the vertical lines in the same way the icons on the front page and in the navigation are separated. Thus the visual flow is left to right as you look across the main sections in each sub-page.

Overall, I think the site's pleasant and simple appearance really facilitates a positive feeling in the user and makes them happy to be getting the information from the site. There is a lot of good information, so I'm glad the site's design facilitates it's dissemination well.