Monday, April 2, 2007

Project 4

Due Date: Wednesday, 2 May (firm)

Group Project (done in pairs)

Objectives

Familiarity with

Description

In this project, you will develop a browser-based mashup (from at least two sources) of your choice, pending on instructor approval. No later than Monday, April 16, should you have found your project partner and discussed your project choice with the instructor and finalized the project requirements. Hint: keep it simple!

As discussed in class, a great example of a simple yet effective mashup is HousingMaps.

As a default project, in case you prefer not to come up with your own, you could explore an integration of Google Maps with suitably tagged del.icio.us bookmarks that represent geographic locations of interest (for example, places you have visited).

Alternatively, you are also welcome to build your mashup using Yahoo! Pipes, Ning, or QEDWiki. You will need a Yahoo! account to use this service.

Project 3

Due Date: Saturday, 21 April

Objectives

Familiarity with

  • Dojo Toolkit
  • AJAX
  • JavaScript Object Notation (JSON)
  • Social bookmarking, del.icio.us
  • Remixing
  • Automated testing, JsUnit testing framework

Description

In this project, you will develop a browser-based remix of the del.icio.us social bookmarking application. A remix is a wrapper around an existing application that exposes the functionality of the existing application in a novel way.

Functional Requirements (50%)

Your remix should have the following user interface elements:
  • text field for del.icio.us userid
  • text field for max number (default 20) of matching bookmarks (having all selected tags) to fetch
  • button for obtaining that user's tags (and initial list of bookmarks)
  • left list for displaying unselected tags
  • buttons for adding and removing tags to and from the selection
  • right list for displaying selected tags
  • element for displaying the current number of matching bookmarks
  • section for the bookmarks themselves shown as links
Your remix should update dynamically if any of the following events happen:
  • change of userid
  • tags selected or unselected
  • change of max number of matches
  • one minute has elapsed (periodic update)
(You don't need your own del.icio.us userid for this project but may want to get one anyway.)

Your system must also satisfy the nonfunctional requirements stated below.

Look and Feel (10%)

The look and feel of the application must be both attractive and effective. In particular:
  • There should be no unnecessary reloading of pages.
  • There should be no unnecessary alerts or popups.

Nonfunctional Requirements (15%)

  • All content must be valid XHTML 1.1 documents. You are advised to use a validating editor or the W3C Validation Service to ensure that your content is valid. For convenience, you may want to place a link on each document that runs the validation service on this document. Your document should state the correct document type at the top.
  • All rendering styles must be provided using a single shared valid CSS2 style sheet. There must not be any rendering styles in the documents themselves. You are advised to use a validating editor or the W3C CSS Validation Service to verify that your style sheet is valid.
  • All code must be provided in the form of external JavaScript source files. The code must use the Dojo Toolkit's object-oriented capabilities and a model-view-controller (MVC) architecture.

Automated Testing (15%)

Use the JsUnit testing framework to test your model class in ways that cover the scenarios listed above.

Documentation (10%)

The following documentation is required:
  • Sufficient inline documentation (comments) in your JavaScript code for me to comprehend your work

References

Submission

Please submit the complete URL of the home page of your project under project 3 in the assignments section in Blackboard or send me email with the URL.

Thursday, February 15, 2007

Project 2

Due Date: Friday, 16 March

Objectives

Familiarity with

  • Separation of concerns between content, visual styles, and event handling code
  • XHTML forms
  • Event handling
  • JavaScript
  • Document object model (DOM)
  • Cookies
  • Automated testing
  • Selenium testing IDE

Description

In this project, you will develop an interactive, browser-based Black Jack game, in which one player (the user) plays against the bank (the application).

Functional Requirements (50%)

The rules of the game are as follows:
  • First, the player starts a new game. At that point, the player must first bid some money for this game.
  • Next, the player and the bank receive two cards each.
  • Now, after bidding, the player can either request another card or pass.
    • If the player chooses to receive another card, then one of the following happens:
      • If the player's score is within the limit, then the player can again request another card or pass.
      • If the player's score exceeds the limit, then the player loses immediately.
    • If the player passes, then the bank takes more cards until it decides to pass (using some algorithm) or exceeds the limit, and the following applies:
      • If the bank's score is within the limit, then the player's score is compared with the bank's score; if the player's score is higher, then the player wins, else the player loses.
      • If the bank's score exceeds the limit, then the player wins.
  • After the game ends (player wins or loses), the player can start another new game.
  • The application keeps track of the total number of games played and the number of times the player has won. This information is displayed each time the game ends (player wins or loses).
  • In addition, this information (total played, total won) is stored in a client-side cookie so that it continues to be available even if the user closes the browser between games. The application also provides the option to reset this information.
Your system must also satisfy the nonfunctional requirements stated below.

Look and Feel (10%)

The look and feel of the application must be both attractive and effective. There should be no unnecessary reloading of pages. For example, when the user requests a new card, an image of the new card should show up immediately in the designated area of the window. You should use playing card images such as the ones available here.

Nonfunctional Requirements (10%)

  • All content must be valid XHTML 1.1 documents. You are advised to use a validating editor or the W3C Validation Service to ensure that your content is valid. For convenience, you may want to place a link on each document that runs the validation service on this document. Your document should state the correct document type at the top.
  • All rendering styles must be provided using a single shared valid CSS2 style sheet. There must not be any rendering styles in the documents themselves. You are advised to use a validating editor or the W3C CSS Validation Service to verify that your style sheet is valid.
  • All code must be provided in the form of external JavaScript source files. The code must be object-oriented; in particular, there must be a class for the event handling code and a separate class for the game model (domain-specific, UI-independent functionality). Any event handlers must be registered by the JavaScript code itself instead of using event handling attributes in the XHTML document.

Automated Testing (20%)

Use the Selenium testing IDE to develop tests that cover all of the various branches listed above. More details will be provided later.

Documentation (10%)

The following documentation is required:
  • Sufficient inline documentation (comments) in your JavaScript code for me to comprehend your work
  • A brief readme document (200-300 words, in XHTML) describing the overall approach and architecture

References

Submission

Please submit the complete URL of the home page of your project under project 2 in the assignments section in Blackboard.

Wednesday, February 14, 2007

Project 1b

Due Date: Wednesday, 14 February

Objectives

Familiarity with

  • Separation of concerns between content and visual styles
  • XHTML
  • divs, tables and layers
  • Forms
  • CSS

Description

In this project, you will put together a small static prototype for a couple of scenarios from these requirements for a simple web-based application. Specifically, your prototype should represent the following scenarios:

  • Guest sends file
  • User authenticates, then sends file, then views list of notes sent

The visual design requirements for this static prototype is as follows:

  • All pages must have the same, consistent layout
  • All pages must have the same, consistent text styles, using some cool fonts and colors other than the default
  • Use divs to divide each page into (common) navigation and (page-specific) content
  • Use layers to place a cool logo somewhere (consistent) on each page
  • Use forms wherever the user needs to be prompted to submit some information

The static prototype of the system, by its nature, ignores any attempts to change the data in the system. It does not perform email notification either.

Your system must also satisfy the nonfunctional requirements stated below. It is recommended to use Kompozer to author the XHTML documents and CSS style sheets for this static version; you can then browse the documents locally or remotely using a web browser.

Nonfunctional Requirements

  • All content must be valid XHTML 1.1 documents. You are advised to use a validating editor or the W3C Validation Service to ensure that your content is valid. For convenience, you may want to place a link on each document that runs the validation service on this document. Your document should state the correct document type at the top.
  • All rendering styles must be provided using a single shared valid CSS2 style sheet. There must not be any rendering styles in the documents themselves. You are advised to use a validating editor or the W3C CSS Validation Service to verify that your style sheet is valid.

Grading

Total: 10 points
  • 1 - valid XHTML 1.1
  • 1 - external CSS, no style attributes in content documents
  • 1 - correct use of divs and tables
  • 1 - overall visual design
  • 1 - consistent layout and navigation
  • 2 - scenario: guest sends file
  • 3 - scenario: member logs in, sends file, views notes

Submission

Please send the instructor email as soon as your project is ready to be reviewed. The date your message is received counts as the submission date. Be sure to include your departmental Linux ID in your email message.