BTC640/Overview

Lecture

Textbook chapter: 1

• Ignore the term 'Hypermedia' in the textbook. This term was never adopted outside of academics.
• DHTML used to be a big fancy complicated thing back in the days but now (even before HTML5 it is irrelevant. Ignore this term also.

What is multimedia, where is it used, evolution, technologies. Presentations is not the same as powerpoints.

Technologies

• HTML (http://littlesvr.ca/)
• CSS (http://www.w3schools.com/css/css_examples.asp)
• Static images (http://littlesvr.ca/misc/lacloche/)
• Animated images (http://en.wikipedia.org/wiki/Animation)
• JavaScript (any modern website)
• Traditional slideshows (MS Powerpoint, LibreOffice Impress)
• Slideshows on the web (http://www.w3.org/Talks/Tools/Slidy2/)
• Browser plugins (Java, Flash, Silverlight)
• Video (TV, files, disks, on the web)
• Audio (Radio, files, disks, on the web)
• VRML
• Traditional applications (using rich text, images, sound, video)
• Kiosk type applications (e.g. Seneca Freedom Toaster)

Distribution

• Copying - little distribution opportunity.
• Readonly media - limited distribution and expensive.
• Downloads - good distribution opportunity but limited by bandwidth and hosting is not completely free.
• Live on the web - client-side bandwidth limit very important.
  • First rule: don't test locally or on a LAN, use at least a regular highspeed internet connection to test your work.
  • Second rule: see if your website is at all usable on low speeds (dialup, "Lite" services).
  • Use a tool like http://www.websiteoptimization.com/services/analyze/ to measure how big your pages are.

Degree students

Read the 10 page paper Multimedia Information and Learning (Najjar, 1996). We are not writing academic papers in this course but you should be familiar with what an academic paper looks like and as degree students you're supposed to be able to write one. If you choose to continue your studies after graduation you will have to read hundreds of these and write some too. Read it here because it's relevant to the course and will give you (perhaps a first) feel for this type of document.

Note that even though the paper is 15 years old the substance basically hasn't changed. While going through this course you will find that despite many updates to technologies the same principles that have been studied before the explosion of the web still stand today.

Lab

This first lab should be very easy if you still remember the basics you've learned in your HTML course. If you don't remember them - now is a good time to relearn the stuff you forgot.

• Set up a Wiki account. This can take 48 hours so make sure you do it well before the lab deadline.
• Create a wiki page at http://zenit.senecac.on.ca/wiki/index.php?title=USERNAME , where you would replace USERNAME with the user name you used to register. Add some text, grouped in a few sections with proper level1 and level2 headings. Add an image (can be your photo or something random). Add a table with your timetable.
• Set up a Moodle account: https://open.senecac.on.ca/cms/
• If you just had it set up - make sure you change your moodle password. If you already had the account - make sure you remember the username and password. Log in to Moodle and familiarize yourselves with it.
• Go through the slidy slideshow (link in the notes above) and make your own slidy presentation with at least three slides: have bulleted lists, links, and lists. Test it in two or three browsers.
• Create an HTML page from scratch and add at least the following elements to it:
  • a - with a link to your wiki page.
  • br
  • button
  • div
  • form
  • hr
  • img
  • input
  • ul, ol, li
  • p
  • pre
  • select
  • script
  • style
  • table, th, tr, td
• Add a stylesheet to your HTML page. Add it into the page, don't create a separate file. In the stylesheet change the background colour of all the DIVs, add a border around all the buttons, set the font size of all the Ps with the class "YourName" to 20pt, the postion (use an absolute position) of one of your images identified by its ID "SpecialImage".
• Add a simple script to your HTML file that will bring up an alert when your button is clicked. The alert will contain the current size of your browser window, e.g.: "Your browser window size is 640x480".
• Find a flash animation on the web that you can download. There are many samples you can find online. Place that into your HTML page.
• Don't forget this part: make a list of links of all the places where you got resourses/code/images/animations from. It's ok to use any online resources you want, but you must tell me what they were.

Submit

After you finished everything - submit your HTML page and your Slidy page to Moodle. That will contain everything except the wiki page (which I will get to by following the link) and the flash animation (I just want to see the HTML code you used to embed the animation).

I expect to see only one file in Moodle, and not an archive. That will make marking this stuff actually doable for me.