Rich Media Web App Dev I


Project 3 - HTML5 Web App Mashup of Awesomeness!

1) Overview

Individually, your mission is to create a useful and visually-rich HTML5 application that "mashes up" 2 or more Web services (XML- or JSON-based), and showcases your mastery of modern Web technologies. As before, you will be evaluated on your creativity in design, the quality of the experience you create, the extent in which you go beyond what we did in class, and the soundness of your programming.

Ideally the application will run in all modern browsers, but at a bare minimum it must run in Chrome on both Windows and Mac.

The assignment is worth 22% of your final grade, is graded out of 100 points, and no late submissions will be accepted, so post what you have before the due date to receive partial credit. An A grade will be awarded only for meeting the requirements below, and going sufficiently "above and beyond".

Project Options

I. Web APIs

You must use 2 distinctive web service APIs (option 1) or one web service API with Node (option 2) in your completed project. The exact web services used are up to you, here are some ideas:

Please note: If you are using Node, you might be able to find API libraries for your API at Also just because there is a library for it does not mean it is a web API. A web API must be AJAX calls to get xml or json from a web service. Other node libraries would not count towards this requirement.

For lists of even more Web services, see:

Note: This is a Web programming class so I expect you to "roll your own" when it comes to adding Web service capability to your pages. That means that JavaScript "widgets" that display (for example) Twitter feeds or the current weather are expressly forbidden. You have the knowledge to write these yourself if you desire this sort of functionality in your project.

II. Browser Technologies

You will also be required to utilize at least one HTML5 Javascript Web application technology, that we did not cover in class, in a significant way. A list of these are at (just make sure it's a JS technology) or the JS API section of CanIUse. Note that utilizing jQuery does not meet this requirement. You must implement the technology without the use of a library like jQuery.

The most straightforward way to meet this requirement is to use the localStorage API to save user data, for example the last term they searched for. Here's a helpful tutorial. On banjo, be sure to use unique key names (i.e. the "item names") like abc1234_search_term or abc1234_username, where abc1234 is your id, as we discussed in class.
NOTE: Using ES6/7/8 (ES2015/ES2016/ES2017) will count towards this requirement as long as it's chrome compatible. Just be aware that employers looking at this on a portfolio may not have the capability to run your app.

III. Interactivity and UI

It is required that you utilize CSS3 transforms/transitions/animations to improve the usability and interactivity of your web application. Your goal is to not create gratuitous effects, but instead "let the user know what's going on" with effects like; fade-ins, fade-outs, and slides.

Alternatively, you may use some of the features of the jQuery and jQuery UI libraries, such as accordions, progress bars and spinners. (Note: With jQuery, you must use additional effects besides fadeIn() and fadeOut() )

The user should be able to interact with your application in a variety of ways. Keyboard, buttons, sliders, pull-downs, check boxes or others - if appropriate for your application.

Other features that would be nice:
- hitting the enter key performs the search (making clicking the button unnecessary)
- (assuming your app has a map) tapping a button that is grouped with a particular search result zooms the map at the location of that result.

IV. Graphic Design Elements

V. Impact

2) Requirements and Grade Rubric

3) Deliverables

The following schedule will hopefully keep you on track.

Phase 1 – Online Design Doc (10% deducted from final project grade if not completely done.)

You need to submit a txt, doc, docx or PDF file to the dropbox DO NOT put your file into zip. Please upload the document directly to the dropbox.
Describe the following:

  • The name of your project.
  • A one sentence application definition statement - What's it do? Who's it for? Example: A Food Finder for hungry RIT students. OR An earthquake and extreme weather tracker for weather buffs.
  • Which Web services it will utilize (including a custom Node one if you choose that option). Give names and URLs.
  • A list of features you could possibly implement to meet the application requirements.
  • If you already have a working prototype, put a link to it!

Submission: Your concept document must be posted to the dropbox. DO NOT zip your submission. Please upload the document directly to the dropbox.

Phase 2 – Prototype

A working prototype posted to the dropbox and online, viewable to the class. The functionality should be 50-60% done. Get some feedback from the prof and your classmates on what could be improved before the final submission.

Submission: Post this to the dropbox, and bring it to class to share. -10% deducted from final project grade if not completely done.

Phase 3 – All Done!

Submission: Post your app and documentation to the dropbox. Also post your app to the web and put a link to it on your online design doc.

Final Documentation

  • Web page, Word Doc, Google Doc or PDF:
    • The product definition statement and a list of features (recycle from design doc)
    • Design Decisions
    • Technical Decisions
    • Document which HTML5 Technology you used
    • Document your Extras - (see below)
    • Give Credit Where Credit is Due - (see below)
    • Grade yourself and justify it. Grade out of 0%-100%
    • -10% deducted from final project grade if documentation not completely done.

Give Credit Where Credit is Due

The use of JS libraries like jQuery is approved to speed the development of your application, but the course expectation is that the overwhelming majority of the code was written by you. Once again, the use of JavaScript widgets that were written by others is prohibited.

To avoid plagiarism charges and an F in the course, be sure to document (both in your final documentation AND in code comments) each and every instance of borrowed media, scripts, classes, functions, or JS libraries. Give a link back to the original code or page.

Don't forget to give yourself credit - document your extra work!

Any doubts about what's OK to borrow? Ask in advance.