FINAL PROJECT (60 points)
Due Sunday, April 19, by 11:59 PM
Upload to Blackboard
For the final project of the semester, you will be asked to apply the skills we’ve learned throughout the course into creating a simple single-page application. The final project will account for 30% of your final grade this semester. You have the option of either working individually or in a group of 2-3 people; if you work with other students, you are free to choose your own groups.
Your submission will consist of 2 parts: code for the application itself, and a reflective code and design critique about that application. Additional details are provided below.
SINGLE-PAGE APPLICATION (40 POINTS)
The single-page application should be a “creative” web application, i.e., something that enables you to flex your design skills and/or that allows the user to interact with it in some creative way. Your application may be either of the following:
• A completely new application of your own creation and design, separate from any of the examples
we have demonstrated in class this semester
• A derivation of an application we have demonstrated in class, which is augmented or extended
in some substantive way of your choice
In either case, your work should substantively engage with skills in HTML, CSS, JavaScript, and D3 that we have been developing throughout this course. To get a sense of what I mean by “substantive,” look at the example applications we have demonstrated in class, e.g., task list generator, data visualizations, drawing shapes based on mouse movement (in the weeks to come), among others. In each of these, we used some combination of HTML, CSS, JavaScript, and D3 to make them work. If you are interested in creating a derivation of one of these existing projects, think about how you can extend the functionality of the project using JavaScript and/or D3 to challenge yourself. Also note that each of these is “single-page” in the sense that the application is contained within a single page, where the URL does not change over the course of interacting with the application.
PROGRAMMING BASICS
SPRING 2020
PROGRAMMING BASICS
SPRING 2020
Ø Your HTML must have a minimum of five different kinds of tags (beyond ,
• An external CSS stylesheet, which styles the visual appearance of the page
Ø Your CSS stylesheet must be external, meaning loaded from a separate .css file, and it must
feature a minimum of 10 CSS rules
• D3 code (and/or plain JavaScript code), which makes the application functional and interactive Ø Your JavaScript/D3 component must include a minimum of 50 lines of code, excluding comments; if you choose to submit a variation on a demonstration in class, this means that your minimum of 50 lines of code must be above and beyond the original code. Your D3 code
must use D3 version 5, NOT previous versions.
Please note the code quantity requirements for each component. These are meant purely to ensure that your project substantively engages with each component and that you don’t spend all of your time only working on the JavaScript. Otherwise, beyond that, the requirements are nonspecific. This means you have a lot of freedom to decide what you would like to create. Regardless of what you create, your project and the code that you write must be original. You are encouraged to challenge yourself as much as possible and choose a project that relates to your interests outside of this class.
Some examples of projects you could create include the following – consider how each of these engages with HTML, CSS, and JS/D3 in substantive ways:
• A thoughtful series of visualizations of a dataset we did not use in class, through different
varieties of chart (e.g., line chart, donut chart), that sits inside a web page that describes or
explains the dataset and what is being portrayed in the visualizations
• A web page that creates different colorful shapes or drawings based on how the user’s mouse
interacts with the page, which also includes buttons that control or change things like shape,
color, or size of the drawn shapes
• An example of an application from the D3 examples gallery that you rewrite and redesign with
your own original code (you would need to demonstrate how you adapted the example code)
• A simple “scrollytelling” webpage that features narrative text on one side and some sort of
illustration, figure, visualization, or other graphic that changes interactively
• A simple application that enhances the user’s productivity, e.g., a tipping calculator, word
frequency counter for user-supplied text, or anything else you could think of
In terms of technical requirements, your application must feature all of the following: • HTML source code, which provides the structure, layout, and content of the page
PROGRAMMING BASICS
SPRING 2020
There are many, many possibilities! Think of something you would enjoy creating and have fun. Some examples of projects submitted by students last semester include a variation on the coloring book demo with multiple pages/illustrations, a decision matrix calculator, an elaboration on the task list generator that allows the user to sort tasks by category and visualize how much time each category takes up, a simple live drawing application, and a random compliment generator. Your application will be graded according to the rubric available on Blackboard.
As you work on your application, please remind yourself of the policy on third-party code in the syllabus. Simply copying and pasting code from other sources, without critical reflection or thoughtful integration into your project, is unacceptable. I reserve the right to award 0 points for any components that I find are clearly duplicated from elsewhere through my own investigation.
CODE AND DESIGN CRITIQUE (20 POINTS)
In addition to creating the application, you will be required to submit a reflective code and design critique that will offer you the space to consider how you constructed the application, ways you might alternatively construct it, and ways you might improve upon it. You will be provided a template for the critique, including prompt questions, but to prepare for the critique, think about the following kinds of questions as you work on the project:
• Adopt a neutral perspective, imagining you are a user viewing the project for the first time. What works well about the project? What does not work well? Why?
• Does the application construction make sense, in terms of code structure? Were appropriate code patterns used? Why or why not?
• What are some alternative ways you might create this same application, using different code patterns? Are those alternatives “better” or “worse” than your chosen approach, from a design perspective?
• What about the application could be improved, in terms of code construction, visual layout, and functionality?
The template, with prompt questions, is posted to Blackboard.
PROJECT PACKAGE: WHAT TO SUBMIT TO BLACKBOARD
You will submit a zip folder that includes the following files:
• Your reflective code critique (as PDF)
• An HTML (.html) file
• A CSS (.css) file
• JavaScript (.js) file
• Any additional assets necessary for your project to function (e.g., the D3 library, images, media)
EXPECTATIONS AND EVALUATION
The move to online instruction has severely disrupted our ability to talk to each other and my ability to provide regular feedback. The adjustment over the next remaining weeks will likely occupy a significant amount of our mental and emotional bandwidth. I acknowledge that this will have an effect on your ability to work on this final project.
For the final project, I will be scaling back my expectations for what you will be able to produce in order to provide space for this. For the purposes of this project, it is more important that you submit a minimalistic project that is relatively simple but thoughtfully designed than it is that you submit something very complex. In my grading, this is true regardless of circumstances, but especially relevant in the current environment.
As you examine the grading rubric for the final project, please note that I evaluate projects across 4 dimensions: completeness, clarity, creativity, and efficiency. Please think about these dimensions as you work on your project. For example, for the “clarity” rubric, how can you make your code clearer, cleaner, and easier to understand, in terms of things like appropriate variable names or using clean code conventions with whitespace and indentation? For the “efficiency” rubric, how can you minimize the number of lines of code to accomplish a specific task in your application? I won’t be evaluating you as though you’re experts on these things, but I will be looking for you to apply some key principles of code design that we’ve discussed so far this semester.
In the coming weeks, homework assignments will be increasingly focused on asking you to brainstorm ideas and begin building prototypes of your project. Please start thinking about ideas now, and reach out to Steven (via Slack [preferred] or email) if you’d like to get some first feedback on possible projects.
PROGRAMMING BASICS
SPRING 2020