CS115 Term Project

PM4: Visualization

Short summary: In this milestone, you will continue to work on the layout of your page by adding visual elements to break the monotony of the text.

Overview and goals
Submission guidelines
Updating your layout
Feedback and grading

Overview and Goals

What makes web exiting is its multimodality: even on a single web page one can experience text, images, videos, sounds, infographics, interactive visualizations, etc. While we all have seen examples of such websites, here are some recent examples by the New York Times that stand out for their multimodality. They are provided here for inspiration.

This Music issue about the 19 best songs of the moments combines audio clips, animated text, colored backgrounds, large images, photoshoped images and more in a mix of visual and sound effects.
This Movie issue about the 25 best actors of the century mimics the "look-and-feel" of movies, through features like scrolling text, close-up images, moving images, etc.
This science article about the incoming cicadas of Brood X combines audio clips and animations.

Reminder: Wellesley College provides a free NYT subscription for all students, in case you are having a problem accessing the articles.

Your goal for this milestone is to consider making your website as interesting as possible by thinking about how the use of colors, images, audio, video, infographics, etc. might benefit your website, and then implement some of these ideas.

Submission Guidelines

In this milestone, your output will include the following components:

An HTML page, titled pm4_graphics.html, which contains your latest version of the website. (You can have other files, prefixed with pm4, to indicate they belong to PM4.)
An HTML page, titled pm4_changes.html, which contains a brief description of the things that changed from PM3 to PM4 (what was added, what was removed or modified). This file doesn't need to have any fancy formatting, use pmstyle.css, since it's not part of your final product.

As usually, you'll store all your files in a folder titled pm4 and upload them on the CS server, where all other project subfolders are stored.

Updating the layout

In PM3 you were asked to create about 50% of the layout for the website. In this milestone, you should try to complete the layout, while also thinking about how to make it visually more dynamic.

I invite you to consider various opportunities for achieving this goal:

Using conspicuous images to illustrate the content
Using colors to distinguish various sections
Including videos (In case you have the skills to create short videos yourself do so, or consider editing existing clips from news outlets. You can use the <video> tag to embed videos to the page. Also, screencasts are an easy way to make videos.)
Creating infographics using statistics from the studies you read. Do not try to put your text into an infographic, that will make your text inaccessible (e.g., screen readers for people with poor vision cannot read text in images, this is why we use the ALT attribute.)
Embedding photo galleries or slideshows
Creating your own visual effects with CSS. CSS has some advanced properties that we haven't discussed, but are not difficult to learn, such as CSS Transitions or CSS Animations.
Adding other graphical elements such as FontAwesome icons or emoji-s, if they fit your theme.

To the extent that it is possible, try to make progress with your content writing as well, since the final milestone is fast approaching.

Recording your changes

On a simple page, pm4_changes.html keep track of what you changed from PM3 to PM4. In particular, highlight components of your design that you believe will fulfill the spirit of PM4, making your page visually more dynamic.

Feedback and Grading

This milestone counts for 6 points (out of 40 for the whole project).

Here is what we will consider in our grading:

Coding

You submitted your work on time (automatic 48-hour late period applies for this milestone)
You followed the instructions for the submission (e.g. file naming)
The HTML and CSS documents are valid (if you check them with W3Validators: HTML validator, and CSS validator.)
Your code follows the good style practices from the previous assignments (indentation, comments, etc.)

Visualization and layout

Your layout is almost complete
You have implemented at least one visual component (from the examples listed above, or in that category) that is your own creation and fits well with the theme of your project. [If you are having difficulty deciding on something to implement, come and see me, so that we can discuss.]

What comes next? In PM5, you will create a short presentation screencast, 3-5 minutes, to share with the class an overview of your project. Your website should be complete. PM5 is the final milestone.

Back to table of contents

Project Milestones Overview

Project Milestone 1 (PM1)

Project Milestone 2 (PM2)

Project Milestone 3 (PM3)