TCS Instructional Design

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...

Okay, onto the final half of the CSS button tutorial. This part will deal with the code (CSS and HTML) and is quite easy. You will need two pieces of code for this to work. The CSS portion can be found here . The HTML portion is simply (button text) And on to the video part of the instruction. Again I would suggest watching this in fullscreen at 720p HD :  

This is part 1 of what I wanted to get through during the Lunch and Learn this week. I decided to start from scratch so that everyone can follow along from the beginning, and I tried to be as thorough and as brief as possible. This is really kind of an intermediate tutorial, but you should be able to follow along without any problems and do the steps to come up with a good product. *note: you'll want to blow this up to full screen and watch in 720p HD

Hey all, last month I was trying to work with the eCollege tech guys in coming up with a way for us to stream video in our courses locally, instead of having to rely on Youtube or Vimeo (which I still don't think is a bad alternative). Anyway, a workaround that might be feasible for us is to actually publish the video within Captivate, and then upload the Captivate project onto the eCollege page as web content. It's quite a bit of a workaround, but it may be worth it if your SME really could benefit from video in his/her course. I am going to insert a blog post from another blog, which does a good job of laying out how to use flv + Captivate in order to get videos up in eCollege. Ignore the part about getting a service from which to stream the videos. When you get to the step where you choose a source from which to upload the video, we will upload it locally and not from a a web server, unless you are interested in FTP-ing into the eCollege servers and streaming it from th...

Alright team, let's break some new ground with this blog post. I am sure you guys know by now that I am all about using the tools and software that we have to be the best designers ever. One of the richest resources that we have at our disposal is also perhaps the most under-utilized: Photoshop CS4. This is the most elite image editing software on the market right now and costs somewhere around a thousand dollars per license (of course we get it through the eLearners Suite—lucky us!!) Anyway, I thought that I would throw together a demonstration so that you guys can at least get some exposure the world that is Photoshop. In a past life, I was something of a Photoshop guru of sorts. I have forgotten a great deal, but still know a little. In this video I will demonstrate how to create reflections of images. Reflections are a big deal right now in print advertising and web design, and much of it is done very poorly. But in reality good reflections can actually be pretty simp...

This one will be short and sweet. I write this post intentionally on the eve of our unveiling of the new TCS websites (next week, yea!). First of all, I want to credit Mark for passing along some javascript code about three months ago. If this page does not change within a few seconds, please click here Of course, you would change YOURURL.html with the link to the page where you want the student directed. That code as written will show your url within the window in eCollege. Quick note, if you want the target page to open up in a new window (instead of within the eCollege frame), change target="_self" to target="_blank". If you want it to open in the same browser window, but in a new tab, use target="_new". Unfortunately, this code is now deprecated. This means that the page will not pass W3C XHTML 1.0 Strict validation,  *yawn*   but that is not really important to us. Again, kudos to Mark for the javascript, but I am going to show yo...

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...