Project 4: Interactive Graphics on the Web
Your focus should be on visuals and interaction, rather than text (although you can include some text if you feel it will enhance the appearance and/or interaction of the site). Your project does not need to be highly complex. It should, however, be polished.
I will allow you to work with a partner, but only if in your proposal you provide detailed breakdowns of each person's specific responsibilities.
I have put together a list of tutorials and examples that you can use for this project. If you find other sites that you think would be useful to add, let me know.
Project Proposal (submit to myCourses and post to GitHub by 8am on Monday, 24 April)
Before thinking about the technical aspects of your project, take some time to consider how you would like to approach it. What kind of experience do you intend to create? How will the three drawings relate to each other aesthetically and/or conceptually? What kind of interactivity will there be and how will you achieve it?
Required Proposal Elements
- A brief (~200 word) description of what you plan to do
- Sketches (hand-drawn, digitally designed, or coded) to illustrate your ideas for the navigation page and the illustrations
- If you are proposing to work with a partner, a clear breakdown of each person's individual responsibilities
- A description of what you will need to learn in order to implement your idea, and what resources you'll use to accomplish that.
- A link to the GitHub repository for your project (see below)
Create a new GitHub repository for your final project. Initialize a README file that includes the text of your proposal. If you will be working with a partner, create a single repo and add the other person as a collaborator. (I would prefer that you make the repo public, but if you feel strongly about making it private, make sure that you add me as a collaborator, as well.)
Submitting Your Proposal
Submit your project proposal to the myCourses dropbox by 8am on Monday, April 24th. If you are proposing to work with a partner, the proposal should include both of your names, and you should each submit a copy to myCourses.
Final Project (Updated on GitHub and linked from your course page by 10:30am on Tuesday, 16 May)
Your documentation page should use a design that clearly links it to the rest of the site. It should describe what technologies and techniques you used to create the site, what you had to learn in order to complete it, and how you went "above and beyond" the basic functionality that we covered in our in-class exercises. If you worked with a partner, you should have separate sections for each person describing what you did and what you learned in order to do it.
All of your project files should be maintained in the GitHub repository you created with your proposal. Your commits to the repository will serve as documentation of your development process; any significant changes to content or function should be committed to GitHub.
- HTML and CSS should validate properly (this applies only to CSS and HTML that you create, not to linked libraries)
- All pages should be work properly in current versions of Chrome and Safari
- To get the "above and beyond" points, you must do something more than replicate the functionality from in-class exercises
Submitting Your Project
You must have your completed project and your GitHub repository linked from your main class website by 10:30am on May 16 (our scheduled final exam time). If you worked with a partner, you both must have links to the project and repo in order to receive credit.
|GitHub Set Up with README||2|
|Navigation page including links to illustrations and documentation||3|
|Interactive component to navigation page||1|
|Three full-screen illustration/visualization pages||3|
|At least one rendered raster or vector image per page||3|
|Motion graphics using CSS and/or JS on each page||3|
|Documentation page discussing techniques used||1|
|All pages use consistent and thoughtful design||4|
|Project files maintained in GitHub repository||2|
|GitHub README file updated with final project info||1|
|HTML validates properly||1|
|CSS validates properly||1|
|CSS stored in external file||1|
|Documentation of "above and beyond" work||5|