Assignments

Project 1 - HTML5 Rich Media Experience of AWESOMENESS

Constructed in 3 phases. See below for details.

This project is a draft. Project requirements are tentative and may be updated.

Overview

With a partner, your mission is to create a significant HTML5 Media Experience (or Game) that is visually engaging, and highly interactive.

HTML5 Media Experience examples - see the processing.org examples page (this multiple particle systems example is from there). Also check out Khan Academy's Drawing, Animation and User Interaction pages. Also check out www.chromeexperiments.com>.

Game examples include shooters, platformers, tile-based puzzles, or ?? Choose an existing game genre or come up with something new! See the "Project 1" links on this page and that page for examples of previous HTML5/JS student work.

Ideally the experience will run in all modern browsers, but at a bare minimum it must run in Webkit-based browsers (Chrome and Safari) on both Windows and Mac.

The goal of this project is for you to demonstrate your mastery of HTML5/CSS/JS and <canvas> programming in a rich media context. You will be evaluated on your creativity, how far you went beyond what we did in class, the quality of the experience you create, and the soundness of your programming, as described below.

Required Design Elements

• <canvas> Animation - visually engaging dynamically-created graphics and effects. Use a variety of <canvas> capabilities including the ability to draw paths, bitmaps, gradients, shadows, the globalCompositeOperation property, and so on. Note: pre-made graphics are allowed of course, but the majority of your grade is based on the dynamic visual experience you create.
• User Input & Feedback - the experience will be controlled by mouse/keyboard or taps/swipes/gestures/device orientation (mobile)
• HTML Widgets (required on experience only: checkboxes, custom buttons, sliders, drop-downs, etc ...) - allow user to alter parameters of the experience
• Sound (required on game only) - both background and incidental. But don't kill the browser with too many simultaneous sounds.
• HTML5 Web Fonts somewhere on the page. Times New Roman need not apply!
• Performance - the experience should perform well without any hiccups on target hardware.

Note: If you are doing a game, a simple game that is well-executed is often better than an ambitious game that is incomplete. Games like Boomshine (Web & App store), Squares 2 (Web & App Store), Falling Balls (App Store), Pixel Sniper (App Store), and 10 Second Run (DSI Ware - YouTube) are all good examples.

Programming Requirements

• Follows Coding Standards:
  • Separation of Concern - You should have multiple scripts, with each script having well-defined functionality.
  • D.R.Y. - Don't Repeat Yourself. Repeated blocks of nearly identical code should be factored out and placed in a separate function.
  • Code Conventions:
    • "use strict"
    • 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.
    • Always use the var keyword when declaring your variables.
  • Well-commented code. Each and every function gets a comment indicating what it does.
  • Any borrowed libraries or code fragments must be credited in both your code comments, and in the final documentation of the project.
• Free of Runtime Errors:
  • There should be no JS errors in the console while the experience is running.
  • For best performance - also be sure to comment out all your console.log() calls before submitting the project.
• Will be graded on the Chrome browser! Ideally it will also run on the other major Webkit browser Safari, as well as HTML5 friendly browsers like Firefox and Opera.

Final Documentation

• Written Document (PDF or DOC or Web Page):
  • Title Page - use a nice font!
  • Abstract
  • Design Decisions - these came after your concept document - what design decisions did you make while implementing your experience.
  • Technical Decisions - ditto...
  • Screen Shots showing your experience in action.
  • Document your Extras - (see below)
  • Give Credit Where Credit is Due - (see below)

Extras

Doing the above well means a 'B' - we need to see "Above and Beyond" to award an 'A'. If you don't document your hard work, I might not give you credit for it.

Give Credit Where Credit is Due

The use of JS libraries is approved to speed the development of your experience, but the course expectation is that the overwhelming majority of the experience code was written by you.

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.

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

Deliverables

The following schedule will hopefully keep you on track.

Phase 0 - Get a partner - end of Week 4

30 students = 15 teams. Find a partner yourself, or I'll assign you one.

Phase 1 – Concept Document and first prototype – end of Week 6

A) If your project is an experience, the document will probably be a very short description of the experience and how the user can interact with it. Discuss and put links to any inspirations you found online. If your project is a game, you will have to go into more detail about the high concept, story, game play, controls, UI, and so on.

B) Implement some of the scripts of your experience/game. Use temporary artwork to get a "gray box prototype" up and running. Rough out the mechanics before you worry about the visuals.
WILL BE DEMO’D AND DISCUSSED IN CLASS.

Phase 2 – Second Prototype – End of Week 7

Go further with your artwork, and interactions. WILL BE DEMO’D AND DISCUSSED IN CLASS. Get some feedback from the prof and your classmates on what could be improved before the final submission.

Phase 3 – All Done! – Start of class Week 8

WILL BE DEMO’D AND DISCUSSED IN CLASS.

Project 2 - HTML5 Web Mashup of Awesomeness!

This project is a draft. Project requirements are tentative and will be updated.

Constructed in 3 phases. See below for details. Need a "cool and hip" name? Look here.

Overview and functional requirements

1) By yourself or with a partner, your mission is to create a useful and visually rich HTML5 application that "mashes up" 2 or more web services (XML or JSON based), that 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, and the soundness of your programming, as described below.

2) The exact web services used are up to you, but music and game related APIs have been popular. Other examples include an application that allows users to visualize USGS Earthquake data in google maps, or view sports news, search for book information, see Woot deals, view nearby concerts (www.last.fm/api), nearby restaurants (Yelp), crime, or nearby gas stations. For a list of available web services, see www.programmableweb.com/apis for 1000's of API's - most free to use with sign-up. Google alone has 51 API's - sign up at developers.google.com and then check out their API console.

3) 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.

4) You will also be required to utilize at least one new web application technology 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 - most 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.

5) Ideally the application will run in all modern browsers, but at a bare minimum it must run in Webkit-based browsers (Chrome and Safari) on both Windows and Mac.

Option A - An RIT Mashup

Significantly extend the RIT Food Finder II mashup (Google Maps and RIT's MIS) that we created in class. Here are some ideas (pick some, all, or come up with your own):

• Allow the user to view RIT RSS Feeds
• Access Twitter or other services and display information relevant to RIT (use a keyword or location search in the API)
• Add more clickable overlays to the google map and javascript street view functionality, and or static street view image to create a "guided tour" for students and parents.
• Improve the restaurant finder functionality: add google.maps.Marker objects to the screen to show the locations of all of the restaurants returned by the search, zoom to the correct restaurant when a restaurant in a list is clicked on, and so on.
• Utilize technologies from the HTML5rocks.com slides in a meaningful way. (mandatory)
• Dramatically improve the UI and interactions through the use of modern CSS, as well as CSS Transitions, Transforms, and Animations.
• Utilize our read/write web service in a meaningful way
• After adding other features, optimize it for display on a tablet.
• After adding other features, turn it into a multi-page smart phone web app (use jQuery Mobile)

Option B - A Web Service Mashup or ??? Web Application

This has the same scope as the RIT mashup, but the theme and technologies are up to you. You are still required to use a technology listed on the HTML5rocks slides, and you will most likely use a web service as well. It could be:

• A music (or game) web app where users can look up information about artists and listen to/view previews. This app would be heavily driven by web services and could use one of the HTML5 client-side data storage technologies to store user preferences.
• A location-based game.
• A twitter or RSS reader that visualizes information in <canvas>
• An HTML5 Enhanced Video App

Note: Option B is subject to Prof approval - so have a detailed proposal completed on-time!

Other Required Design Elements

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

Programming Requirements

• Object-Oriented Programming:
  • Separation of Concern - You should have multiple scripts, with each script having well-defined functionality accessed through a public interface.
  • D.R.Y. - Don't Repeat Yourself. Repeated blocks of nearly identical code should be factored out and placed in a separate method.
  • Design Patterns - use the Object literal Singleton pattern, Constructor pattern, and or the Module pattern from class, and any other JS design patterns as appropriate.
  • **DO NOT** use the "jQuery pattern" of putting all of your code in the jQuery ready function as nested anonymous functions - this pattern is fine for a simple page, but results in hard-to-read-and-debug code on a more significant application. Demonstrate the other OOP techniques you learned in this class.
• Free of Runtime Errors:
  • There should be no JS errors in the console while the app is running.
  • For best performance - also be sure to comment out all your console.log() calls before submitting the project.
• Follows Coding Standards:
  • Multiple scripts and Module Pattern (or similar) for OOP, and to avoid cluttering the global namespace of the browser.
  • Code Conventions:
    • Avoid global variables and functions. Global scope occurs in JS when you declare something outside of a function
    • 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 interpreter to insert them for you.
    • Always use the var keyword when declaring your variables.
  • Well-commented code. Each and every method gets a comment indicating what it does.
  • Any borrowed libraries or code fragments must be credited in both your code comments, and in the final documentation of the project.
• Will be graded on the Chrome browser! Ideally it will also run on the other major Webkit browser Safari, as well as HTML5 friendly browsers like Firefox and Opera.

Extras

Doing the above well means a 'B' - we need to see "Above and Beyond" to award an 'A'. If you don't document your hard work, I might not give you credit for it.

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.

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

Deliverables

The following schedule will hopefully keep you on track.

Phase 0 - Get a partner - end of class week ??

Phase 1 – Design Doc – start of class week ??

This HTML5 document will be college-level work, well organized with section headers, containing proper spelling and punctuation. Write down some ideas, make some sketches, and decide what your application will do. Describe the following:

1. The name of your project and the names of the team members.
2. A one sentence application definition statement - What's it do? Who's it for? Example: A Food Finder for hungry RIT students. OR An online photo filter application for everyone (or people who want to create and share funny photos).
3. Which web services it will utilize. Give names and URLs.
4. Is it primarily a desktop, mobile, or tablet app?
5. A full list of features you could possibly implement to meet the application definition statement.
6. A filtered list of features to meet the product definition statement (and fit into our time frame)
7. A sketch or mockup of your UI. (this can be a sketch, JPG file, or HTML5 Mock up)
8. If you already have a working prototype, put a link to it!

Phase 2 – Prototype – start of class week?

A working prototype we can view in class after the written exam. The functionality should be 70-80% done. Get some feedback from the prof and your classmates on what could be improved before the final submission.

Phase 3 – All Done! – start of class week ?

Final Documentation

• Written Document (PDF or DOC) or HTML page:
  • 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 your Extras - (see below)
  • Give Credit Where Credit is Due - (see below)

Extras

Doing the above well means a 'B' - we need to see "Above and Beyond" to award an 'A'. If you don't document your hard work, I might not give you credit for it. Be sure to document how you met the "new HTML5 technology" requirement.

Give Credit Where Credit is Due

The use of JS libraries is approved to speed the development of your game, but the course expectation is that the overwhelming majority of the game code was written by you.

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.

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