TCS Instructional Design

Hey all, so quite a while ago I was wondering how to embed Google Calendars into a course. At the time I had no SMEs who were interested in integrating (alliteration) such a thing into their courses. But now I have a couple who are asking me to do this for them. It is actually an incredibly easy process, and the end result is very professional. I decided to create a screencast for my SMEs (who are jointly collaborating on a couple of Fall courses), and am going to embed it below:

Yea, I know that it has been a while since the last post. I've been busy lately! Anyway, this one will be very short and sweet and perhaps moderately useful every once in a while. We will discuss how to modify the properties of a horizontal rule <hr>. <hr>'s have been revered as rogue html elements for many years now. They don't behave well and often when styled they appear differently based on which browser you are using. So why bother even learning this, you ask? And I answer: I don't know. So let's get into it, shall we? In days past, you could actually style <hr>'s using pure html. You could type something like <hr size="5px" width="90%" align="center"> and it would actually render. But that is all deprecated now. As is becoming the trend with everything web-design related in terms of formatting, you'll want to switch over to CSS for that stuff. Let's begin exploring the possibiliti...

What up? I have a couple of CSS gems I wanted to share with you. This first one is called a top shadow. Here is the effect: Compare this version to the not so fun version: Here is the code for that little effect: Another little gem is putting a drop shadow under images. Here is a screenshot within eCollege with two images, one has a drop shadow: If you like that shadow as it is, then use this code: Okay, now stay with me. That code should put a drop shadow on all images on the page (if you have multiple images). The code is essentially saying that whereever there is an <img>, then the browser is to apply those settings. You can also put drop shadows on <div>s if you would like. Just change the img { … } so that it reads If you want some pictures to have shadows and not others, then create a class. In the above example I had the two pictures and for the sake of illustrating the drop shadow, I wanted one to have the shadow and the oth...

For those of you who are interested in exporting Captivate 5 SWFs for use in Articulate Presenter, there is an interesting dilemma preventing us from importing Flash Movies. We will address a workaround for the dilemma in this blog post. My hope is that this issue will become irrelevant as Articulate upgrades their standards, but for the moment it seems as though Articulate only recognizes Flash Movies written in ActionScript 2. The current design standard is ActionScript 3. ActionScript is essentially the code used to define the various flash components in the SWF. It was originally developed by Macromedia, but now Adobe owns it. For those of you who are still using Captivate 4, the solution is actually fairly simple. When you publish your SWF file in Captivate, make sure that the settings are set to publish using AS2 (ActionScript 2). To import it, simply click on Flash Movie (in the Insert group of the Articulate ribbon) and locate your SWF file. The Captivate 5 users wil...

Okay team, by now you should have an idea of the functionality of html. Html is code that allows you to write in a language that web browsers can read. You use the html tags to define certain elements on the page such as: <h1>This is a heading</h1> <p>This is a paragraph.</p> But there is a main problem with using html. It is not useful for defining large quantities of elements on a page. A very relevant example is that some designer prefer the font in eCollege to be size 3. In order to do this, you highlight everything and select "3" from the font dropdox in the visual editor. The result is a whole lot of <font> tags throughout the page. But what if you could say once and for all "I want all the font to be size 3 unless I specify otherwise (and quit making my code all cluttery!!!)". Come to think of it, who is it that decided the "default font size anyway?? The font, it turns out, is defined either by 1. the browse...

I honestly thought that I had written a blog already that covered html lists, but apparently not. I know that I have shown a couple of you some tips and tricks, but now I will formally get this written for you guys. Essentially there are two types of lists that a web browser reads. They are: ordered <ol> and unordered <ul>. You would use an ordered list if the items are sequential (1,2,3, ... A,B,C ... i, ii, iii). Unordered lists are bullet points. Here are some examples of ordered and unordered lists: How to make toast: Why online learning is good: Put bread in toaster Turn toaster on Wait for bread to toast Remove toast when done butter toast and put junk on it Allows for asynchronous discussion Prevents academic loafing Utilized interactivity and technology Provides scheduling flexibility ...

Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...