Introduction

This article provides a brief review of BCIT's MDIA program for aspiring web designers and developers as well as their new Desire 2 Learn to support online classrooms.

The D2L Environment

The new Desire 2 Learn environment provides features to simulate a classroom environment such as:

• Discussion Area
• Presentation Area
• Quizzes & Surveys
• Content Publishing
• Calendar
• Email
• And more . .

This environment looks a lot like Microsoft Sharepoint and is configurable for each class. There's also an overall Portfolio section as well a a blog. One thing I appreciated is that they can keep your previous classes online long after they have ended.

Rating: A

General:

There were 5 assignments in this course, each building upon the knowledge gained in the previous assignments. Your first assignment starts off with a knowledge of just a few HTML tags and NO CSS. From there, you add more tags, but you are NOT allowed to go beyond the material you have taken. It's not until assignment 5, that you are allowed to use CSS at all.

The good:

This was a good course to get introduced to the way they do things in the MDIA series of courses. You are supplied with reading material, online forums, publishing capabilities. You need to submit assignments that get marked and so on.

This Javascript assignment revolved around making a simple Weather web site, and it required use of Javascript math and date functions.

To me, the trick for this assignment was to come up a cool temperature generator. Most of the rest was image and innerhtml updates which we did a lot of in assignment 2. Rather than use links to select cities, I used a 'select' field in conjunction with some Javascript and then modified the DOM to place images and text. Much more interactive that way.

I continued to work on layout techniques and tried out Layer Comps in Photoshop with limited success. Will continue to press on.

Finished. Wow! What an assignment. There are better looking ones out there in the class, but mine was the only one that used the select field to select a city. That took a bit of work in Firefox, and much more so to make it IE compatible.

Update: I was the only one in the class that used the select field. In addition, the temperature generator was really cool. The instructor found a mistake in my timezone calculations and I lost marks big time there. Maybe I should have spent less time learning the cool stuff in order to get the basics right. :(

This assignment is about being a tour operator, and we were given a couple of inspiration sites.

Here's how I'm (currently) going about laying out this assignment:

1. Load up Firefox with the'Fireshot' image capture add-on.
2. Copy a 960 column 'PSD template' to my assignment directory and open it with Photoshop.
3. With Firefox, search for some inspiration sites.
4. Use Fireshot to capture the entire page and paste it as a new layer in Photoshop.
5. Repeat for a few sites (make sure you rename the layer to the URL of the site).
6. Once done, I may wish to cut up sections of the pages into blocks, each on its own layer.
7. Create a 'mock' layout using the various blocks.
8. Hide everything except for my 'mock' layout, and lower it's opacity and set it as the background layer.
9. Now I start designing my own site in Photoshop loosely based on the 'mock' one.
10. Of course, my PSD to CSS conversion will make it looser still.
11. Then there's the Javascript component. Yikes!

PSD template:

http://github.com/nathansmith/960-grid-system/blob/568eeac257602df35a920b18eafc8a5bb6e8825d/templates/photoshop/960_grid_12_col.psd

Update:

- Playing with Photoshop built-in grid sizes & colour contrast
- Turning off template once I am happy with overall layout
- Printing out pages of the inspiration sites
- Lay out major sections first, then work on detail
- Using Photoshop folders and name them
- Using shape layers drawing mode and not fill pixels and using masks for rounded corners
- www.sxc.hu has a LOT of free stock images and graphics
- I'm developing core HTML/CSS first, then adding Javscript later
- Yikes! Don't forget cross browser testing.  Sure wish there was a Firebug for all browsers.

Update 2:

- Most of the HTML/CSS is done
- The key to most of the Javascript effects are found in the examples,
I'm thinking 6-3, 6-11, 6-5, 6-8  and 8-8 (for a random image on the
main page).
- Using 'mod' or '%' saves some lines of code when going through a slideshow

Finished.  I was really happy with how this looked in the end. Sure it could have done with some more polish, but the image management was really cool.

This course is titled "Using New Media on the Web: Flash".

• #1 - Not to be submitted
• #2 - First assignment with basic tweens
  
• #3 - Use motion tween and masks
• #4 - Flash website with scenes and buttons
  
• #5 - Add sounds and images

I received 10/30 on my final assignment. The instructor didn't seem to like the fact that I deviated from the course and delved into Actionscript 3 programming. He really wanted his tweens, and my mark suffered when I zagged from what was expected. My final mark for this course was 67% and would have been much higher if I stayed within the lines. Despite the above issue, I learned a LOT in this course.

Oh, and his advanced course covers some basic Actionscript 2.

This is the Javascript course.

• #1 - Basic Javascript with a single image DOM
• #2 - Image DOM manipulation and timing - travel site
• #3 Date and math calculations - weather site
• #4 - Javascript Shopping Cart part I
• #5 - Javascript Shopping Cart with cookies

This is the Introduction to CSS class, which I plan to file for exemption. In order to do so, you need to complete the assignments within 3 weeks. They are:

• #1 - Not started
• #2 - Not started
• #3 - Not started

Various test script directories can be found below:

• Test 1 - Javascript sliding a DOM item
• Test 2 - Single/dual image rollover
• Test 3 - Javascript onclick & form action
• Test 4 - jquery text fade
• Test 5 - Simple form
• Test 6
• Test 7 - Random image using PHP

This course is titled "Weaving the Web: Publishing on the Internet 2", and builds from what we learned in MDIA 1206. My assignments can be found below:

• #1 - Create a single page form
• Test - An offshoot of #1
• #2 - Demonstrate the use of frames
• #3 - Demonstrate basic CSS inheritance

I really liked this course, as each assignment was significantly different than the last. One big advantage to this course over MDIA 1206 is that we weren't restricted with the use of HTML tags and CSS. I even added a bit of jQuery to my first assignment.

I ended up with an a final mark of 96% in this course.

I'm taking the MDIA1206 course at BCIT, and although I already know much of what is being taught in this course, it's a great opportunity to learn a lot of basic principles in more depth. For instance, for our early assignments we are only allowed to use a limited subset of HTML tags in order to create our web pages. This forces us to find creative use for these tags in order to make our pages look attractive.

• #1 - Your resume with only a few HTML tags and no CSS
• #2 - Starter page with a few more tags and colours
• Test - My own conversion of assignment 2 to CSS
• #3 - Add a few pages
• #4 - Adding images (no CSS or tables yet)
• #5 - Add tables
• #6- Add media, and you can now use CSS

The challenge with MDIA 1206 was that you were very limited with the tags you were allowed to use with each assignment. It wasn't until assignment 6 that we were allowed to use CSS and HTML as we would like.

This class was a lot of fun and we had a lot of discussions in it, much thanks to our course instructor, Bonnie.

Post note: 1 year on in this series of courses, and I've found that NONE of the followup courses had the classroom interaction like we did in Bonnie's course. She set a high water mark.

My final mark for this course was 89%. I could have done better had I spent more time validating my assignments and staying within the assignment guidelines.