After taking both MDIA 1206 and MDIA 2205 at the same time and finding them relatively easy, I decided to take on both MDIA 3207 and MDIA 3208 at the same time as well. Boy, was I in for a wild ride.

I spent on the order of 6 hours/day on those courses throughout the semester. Although I learned a lot, it was quite difficult balancing real life with the heavy workload required by those courses.

As I mentioned in the MDIA 1206 review, if you want to get good marks in these courses (especially these two), don't stray too far off the beaten path. The instructors will crucify you if you make mistakes on the basics. Your cool stuff just won't make up for it.

The good: I learned to use the DOM, and I learned to use cookies. Javascript is a lot of fun and can really make your site dynamic.

The bad: Despite doing some cool things that other students didn't attempt, I didn't get much/any credit for them. Rather, I lost marks on HTML/CSS warnings and several marks on a date calculation mistake.

The class average for this course was 74%, while my mark was 88%.

For this assignment we were to continue with the collectibles pages from assignment 4 and to add a Javascript shopping cart to it. Fortunately, the instructor provided some in depth examples, which I was relatively easily able to integrate in with assignment 4. I was very fortunate in that there was little hard coded HTML in assignment 4, which made the integration and conversion over to a shopping cart much easier.

I lost a few marks because some of the HTML code was deprecated, and I think that code originated from the example. Guess I should have been more rigorous with the validation.

Lesson learned: Validate everything. Again!

The Javascript assignment 4 required us to create a website in which to buy and sell goods. We haven't learned cookies yet, so this is just a build up to a real shopping cart. I decided to try something different, so I came up with an unusual 'Barbie' theme.
As with the other Javascript assignments, this one was pretty tough, and required a lot of work with Arrays, opening windows and the like. Rather than hard coding the HTML, it's all dynamic and is updated via Javascript.
One more assignment to go.

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.

We were asked to create a site with 5 menu items and to use some basic Javascript code with it, including:

• for loops
• switch
• if, then, else

This site was for an artist/musician. I originally wanted to download a cool Javascript image gallery, but ended up creating my own simple one. This assignment stretched me a bit as I had to learn some 'DOM' functionality in order to pull it off. Lots of fun.

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