Rich Media Web App Dev I
IGME-330
Project 3 - 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 (except that you may not use the Eventful API), here are some ideas:
- Giant Bomb Game API and other Game APIs
- USGS Earthquake data visualized in Google Maps - here's an example JSONP call to the earthquake service.
- Book information
- Woot deals
- Best Buy deals - developer.bestbuy.com
- Movie Info - themoviedb.org
- Nearby restaurants - Yelp API
- Crime
- Current weather and forecasts: openweathermap.org
- Business and start-up info: data.crunchbase.com/v3
- Nearby gas stations
- League of Legends API - developer.riotgames.com
For lists of even more Web services, see:
- www.programmableWeb.com/apis has links to thousands of APIs - most free to use with sign-up.
- developers.google.com has over 50 APIs - sign up at then check out their API console.
- github.com/toddmotto/public-apis - but don't use the "F*** Off as a Service" one :-|
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 at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5. 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.
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. (Note: You must additional effects besides fadeIn()
and fadeOut()
)
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.
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
- 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
- Images:
- 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.
Phase 1 – Design Doc – due Thursday 5/5 (week 14)
This is in PDF format, it will be college level work, one submission per team please. Write down some ideas, make some sketches, and decide what your application will do. Describe the following:
- The name of your project.
- Your name (and the name of your project partner if applicable).
- 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. Give names and URLs.
- A full list of features you could possibly implement to meet the application definition statement.
- A filtered list of features to meet the product definition statement (and fit into our time frame)
- A sketch or mockup of your UI. (this can something you created in Photoshop, a hand-drawn sketch you took a photo of, or a screenshot of an HTML5 Mock up)
- If you already have a working prototype onloine, give a link to it.
Submission: Your concept document must be posted to the web. Also post it to the dropbox, with a link to the online version in the comments field. -15% deducted from final project grade if not completely done.
Phase 2 – Prototype – due Tuesday 5/10 (week 15)
A working prototype posted to the dropbox - the basic functionality of connecting to your web services and displaying some results should be functional. 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. Be sure to post to web, and put a link to this prototype in the comments field of the dropbox. -15% deducted from final project grade if not completely done.
Phase 3 – All Done! – due Tuesday 5/17 (finals week)
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
- Word DOC:
- Title Page - use a nice font!
- The product definition statement and a list of features (recycle from design doc)
- High-Level Architecture - (e.g. modules, classes)
- Design Decisions
- Technical Decisions
- Document which HTML5 Technology you used
- Document your Extras - (see below)
- Give Credit Where Credit is Due - (see below)
- Grade each team member (0-100%) and justify it.
- -15% deducted from final project grade if 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.