Introduction to CSS, re-tool your class site - CSS resource:

https://www.w3schools.com/css/default.asp ; 

CSS examples: http://www.csszengarden.com/ ;

CSS Intro Course CH1: https://bit.ly/2Mxt0Ab

Create Your Data Visualization (Represent & Refine)

1. Using Adobe Illustrator create a new 1920x1080.

2. Create a title for your study/visualization.

3. Use the grid and guides to layout your design.

3. Using Illustrator Graph Tools, select the most appropriate graph to represent your data and graph the information that you have gathered.

4. Visually enhance your graphical presentation – use a color scheme, icons...

The simpler the data that you represent, the more visually enhanced your presentation should be. In other words, if you have tackled a complex set of data such as daily eating habits, you may want to use multiple graphs to represent different pieces of information such as eating habits versus exercise.

However, if you asked 20 people what their favorite Netflix show, a single straightforward question, you should find interesting ways to enhance your presentation such as creating unique icons or adding background images.

You may entirely transform your graph using your own graphics such as in examples presented in the lecture and in the video tutorials.

Some Student Examples:

https://equal-sulky-daisy.glitch.me/homework9.html

https://fanatical-pine-specialist.glitch.me/pic17.html

https://deadpan-cumbersome-drill.glitch.me/data.visualization.html

This homework assignment, to create a web-based non-linear story, is in two parts; we will be looking for a highly resolved work that builds on all of the technical and aesthetic material we’ve covered in class. For this assignment, you can use photography, illustration, montage, simple text, or animated GIFs to create a narrative with multiple story paths that can be navigated using hyperlinks. 80% of the imagery and all of the text used must be your own original content. 

1. Map out your narrative, using Illustrator or simply a pen and paper.

2. Develop the imagery/text for each page.

3. Make a new page on your website with its own sub-series of pages. Images should be jpg, 72 ppi, and no larger than 5" x 6", make sure your images are optimized to open quickly.

4. Post your project to the web, ensuring that all of your links work.

There must be at least three possible endings and there must be multiple ways to get to each one. 

Part 1 of the submission should include a brief (one-paragraph) description of your story (What is the premise? Are their characters? Where does it take place? What are the kinds of choices you will provide to your user?). It should also include the map of your narrative with the forking paths of decisions and one image of a possible scene/space for your story. 

Part 2 should include all other aspects of the work, it will be a functioning website following the description above with the URL provided to your Lab Instructor. 

Tip: If you are having trouble coming up with a story, you could make it location specific... Define one or more locations in NYC that you find interesting. Document the location(s) with several photographs. Write a brief story in relation to the location(s) and give it alternate paths. The story may document something that happened at the location or something more fantastic. Give your user choices to move through the location(s), perhaps something different happens in the story or to your user based on the choices. 

For the Interactive story assignment, you can create link hotspots on images this way: 

“HTML Image Map”  https://www.image-map.net/ 

HTML Image Map Tutorial

The Rustic Occult Detective story

The game of throwing the perfect party: 

Can you survive finals?

5 minutes until midnight

Franklin is in rascal mode!

Pablo the Penguin