Project 2 - HTML5 Web App Mashup of Awesomeness!

1) Overview

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.

I. Web APIs

You must use 2 distinctive web service APIs in your completed project. The exact web services used are up to you, here are some ideas:

• Giant Bomb Game API and other Game APIs
• USGS Earthquake data visualized in Google Maps
• Book information
• Woot deals
• Nearby concerts www.last.fm/api (If you use Last.fm in this project, you must have a third API and go well beyond what we did in class)
• Nearby restaurants - Yelp API
• Crime
• Nearby gas stations

For a list of available Web services, see www.programmableWeb.com/apis for thousands of APIs - most free to use with sign-up. Google alone has over 50 APIs - sign up at developers.google.com and then check out their API console.

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 Web application technology, that we did not cover in class, in a significant way. A list of these are showcased on these slides from the html5rocks.com website. These slides list and demonstrate many new Web technologies - some of these are not yet standardized - but most are supported in modern browsers. Note that utilizing jQuery does not meet this requirement. You must implement the technology without the use of a library like jQuery.

III. Interactivity and UI

It is required that you utilize some of the features of the jQuery and jQuery UI libraries 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 widgets like accordions, progress bars, and spinners; and effects such as fade-ins, fade-outs, and slides. Alternatively, if you can achieve jQuery style effects without the use of a library, for example by utilizing CSS3 transforms/transitions/animations, you may omit the jQuery library.

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

IV. Graphic Design Elements

• An attractive and functional page design backed by valid HTML5 markup and CSS
• HTML5 Web Fonts. Times New Roman need not apply!

V. Impact

• Your app should do something useful, and be attractive and easy to use
• Need a name for your app? Check out the Web 2.0 Name Generator or the Dotomator

2) Requirements and Grade Rubric

• 20% - Media Requirements:
  • Images:
    • Consistent theme or style
    • Optimized bitmap Graphics (JPEG or PNG) must be used, NOT BMP, TIFF, and so on
  • HTML/CSS Page Design:
    • Text must be displayed in theme appropriate embedded Web Fonts - Times New Roman need not apply! Size the text so that it is easy to read. google.com/fonts and fontsquirrel.com have a wide variety of free fonts
    • The page design should be pleasant and professional and done by you. If you are starting from a template for page layout, be sure to modify it heavily so it looks nothing like the template when you are done. Use a wide variety of CSS selectors and styling as needed.
    • Ideally you will have used progressive enhancement techniques to make your app display nicely on a wide variety of devices. If not, be sure that the main idea of the app fits in an 800 x 600 pixel or so space (i.e. Don't just test it on a 20" monitor)
    • Page must pass HTML validation at validator.w3.org
  • Sound (optional):
    • Subtle UI sound can be a nice extra
    • Keep your sound file sizes as small as possible. Primarily use MP3's; WAV's are OK for short sound effects
  • Canvas Drawing/Animation (optional):
    • <canvas> visualization of web service data can be a nice extra
    • Drawing libraries such as Three.js, Processing.js and D3.js will be allowed
• 20% - Interaction/Usability Requirements:
  • See Interactivity and UI above
  • jQuery is used for UI effects
  • A variety of controls will allow the user to alter parameters of the app. The user should feel they have sufficient and satisfying control of the app
  • The user should "know what's going on" as they use the application through the use of spinners, progress bars, and other UI effects.
  • Errors (such as no data returned from the web service) should be handled gracefully by notifying the user
• 20% - Web Services / Browser Technologies:
  • See sections I. and II. above
  • At least 2 web APIs are used
  • An HTML5 technology that we didn't cover in class was used
• 20% - Impact:
  • Does the app work as intended and do something useful?
  • Is this project "portfolio quality" that you would not hesitate to show a potential employer?
  • Is the app attractive and easy to use?
  • Does the app functionality and programming go beyond what we did in class?
• 20% - OOP and Coding Standards:
  • JS libraries (other than jQuery, PreloadJS and SoundJS) may be used with prior approval only.
  • Code runs with no errors
  • Code Conventions and Practices:
    • No global variables! Use an IIFE or the module pattern
    • D.R.Y. - Don't Repeat Yourself. Repeated blocks of nearly identical code should be factored out and placed in a separate function
    • "use strict" at the top of every JS file
    • Function constructors that will be called with the new operator must be capitalized
    • All other variable and function names must begin with a lowercase letter
    • Every JS statement ends with a semi-colon - don't rely on the JS interpreter to insert them for you
    • Well-commented code. Each and every function gets a comment indicating what it does
    • Delete or comment out your console.log() calls
  • You will only receive credit for code that you write beyond what you've inherited from our ICEs.
  • Any borrowed libraries or code fragments must be credited (author and URL) in both your code comments, and in the final documentation of the project
  • Will be graded on Chrome! Ideally it will also run on the other major HTML5-friendly browsers
  • Both partners must produce code that appears in the final version of the project. Failing to do so will result in a -20% grade penalty for the non-contributing partner

Doing the above well means a 'B' - we need to see "Above and Beyond" to award an 'A'.

3) Deliverables

The following schedule will hopefully keep you on track.