Digital Media Technology (Spring 2009) / Project Work

Description

Project work is supposed to generously complete the technical questions from the exam, and its doing is supposed to be fun.

You can choose a ready-given topic, or suggest your own (similar) one. The topics can also be broken and recombined together, if only the size remains mostly same. Regardless of the topic, you have to chat with the instructor to make it valid, preferably live at the exercise session.

What ever you do, it must be reuseable! (Unless it's a game.) Example: a picture gallery of your own (already taken) pictures won't do, but a gallery for your untaken pictures will do. The idea is to separate the application from its "input".

You can use (JavaScript) libraries, but not "code from the net". Library use must be documented, though!

Course Staffs' Back-end

You can also use the given, simple back-end. It'll offer you generic put+get for key-value-pairs. Using this back-end will almost certainly lead to bigger requirements for your other project work parts.

Back-end's description is available on the back-end page.

Topic/Subject

The topic selection process is supposed to verify that all topics are comparable.

Topic selection paths

Staff-given topic and technical requirements (list below).
(Your own) topic → exercise instructor will give you technical requirements.
- (Too) small technical requirements leads you to do an another small work.
- Staff's back-end usage will also cause extra requirements, which the instructor will define.
(Your own) techniques defined, but a topic is missing → choose one from the list below, or ask instructor for help.

Possible topics

The topics are now artificially categorized into easy, mid- and difficult. This isn't really supposed to affect anyones topic selection, it's just a small hint of their difficulty. An easy topic can easily be hard, if you make it too big.

The techniques mentioned on the topic list are suggestions, you don't have to follow them! Choose the techniques you want to use. Note that you can just fine get full points without any PHP.

Creating "extra" material (images and stuff) might benefit from online generators. These haven't been tested, there might be some good ones too!

Topic: suggested, techniques, for the topic; A short description or an example of topics content/implementation.
Picture gallery: php, html, javascript, ajax; As a server extra, maybe metadata and comments?
Chat: php, html, javascript, ajax; How to route messages to the server and back to all clients?
Guest book: php, html, javascript; Spam filtering?
Form generator: json input, javascript validation; Kinda like a real smallE-form.
Form validator: javascript; A separate brick OR an extra brick to form generator!
Graph generator: svg/css; Histograms/curves/pies from given data.
Video gallery: flash, html; YouTube-embed video wall or maybe your own Flash player?
Content management system: javascript, html, css, rss feed from edits; Really, really small!; Like: when clicking a text paragraph, it'll change into text box, where you can edit and save the text.
RSS reader+combiner: rss, javascript; Your own small Google Reader!
CSS live editor: css, javascript; Kinda like Firebug, but easier and alooot smaller.
Site "enhancer": javascript; Dynamic link icons based on link type (external vs. internal vs. image vs. etc), TOC generating, etcetc.
CSS image map: css, generate with javascript?; Clean packaging, easy reuse.; http://frankmanno.com/ideas/css-imagemap/
Drawing application: javascript, canvas, svg; Should you use Canvas or SVG?; http://webkit.org/blog/122/webkit-3-10-new-things/
A small game!: javascript, canvas, svg; Maybe use a physics engine library?; interesting technical requirements based on game's nature!; http://box2d-js.sourceforge.net/

Structure

Project work has an XHTML document as a starting page. This page documents the whole work. It's also part of the work, and is graded just as the rest of it. You must define the layout with CSS. This way, every project has an XHTML+CSS part, which is the delicious core substance of this course.

Documenting shall include

A short functional description (what is it, what it does).
Short description of technical implementation (not source code documentation).
All libraries and components that are used and where they are used.
Browser requirements: if it doesn't work in some browser, it's ok, but you have to explain why.
Short documentation of any source code in the work, and easy way to examine the code.
Sources used, if they are relevant or might affect the grading.
Permission to use as teaching material (missing permission doesn't affect grading).

Grading is contributed from (in order of relevance)

Separation of structure, layout and functionality.
Reuseability.
Standards compliance (source code validation).
Source code readability, indentation, and commenting when appropriate.
Usability.
If the application is composed of several views/pages, their logical division.
Are user inputs validated, is it possible to hang the application (in less than a minute).
Are different techniques used extensively...
...and is their usage justified.
Browser independence: the application should work in all mainstream browsers.
Accessibility, if the application is supposed to offer accessible content.

Submission

Submission will be done in CS department's Moodle. Moodle has a assignment submission form for both the first part and the final submission. Copy-paste your project's www address into submission form. We recommend that you make a separate branch copy (to different address) of the project for the first submission, so that you can immediately continue working on it without breaking anything while waiting on instructor's feedback. (It's also nice to see afterwards, what the project's state was back then.)

Introductory submission 5.4.

This first submission is just the project's current (unbroken) state. It won't be graded, and doesn't affect final grading. You'll get useful comments though, by following which you should get good points for sure.

Consider the following perspectives:

"Waterfall": UI proto→HTML→CSS→JavaScript/DOM→Ajax/PHP. Where do you draw a line for introductory submission?
Technical demo: minimal HTML (+CSS), but working JavaScript(+PHP), so that the functionality can already be tested and demoed.

Final submission 29.4.

The project is done. Validate your documents. Read the text once through. Check in other browsers (IE). DONE.