Exercise 10: Slicing and Dicing

Exercise 10 Exercise 10 Solution View Solution

Exercise 9: Looping and Data Retrieval

This exercise should be run on your web host. Make a new folder called ex9 somewhere in your account and upload all the files you’ve edited each time you need to see a change.

Exercise 9 Exercise 9 Solution View Solution

Project 2 Details

Assignment

Create an online visualization of an external dataset or source of visual material.

First choose an external source of text, data, or imagery to work with. Then buld a site that generates a visual expression from that source. Your final pages may be primarily typographic or image-based, informative or beautiful, organized or haphazard, but they should enhance or comment on the source material, and they should change over time or in response to user input. It is crucial that you sketch multiple ideas — both in Photoshop and in code — before arriving at your solution.

Do not feel beholden to traditional representations of your chosen source material; in fact, it may help to avoid them. What would the news report look like as a series of colors? How could a Flickr stream be expressed through typography?

Some possible data sources you might consider:

• The news, via Google or Yahoo: stories published in real-time, quantity of coverage that two opposing views receive, stories about a particular person, etc.
• Weather conditions, via Google or Yahoo: display a full report, the forecast for a given zip code, or focus just on a location’s temperature, wind speed, etc.
• Twitter: timelines on a per-user basis, a hashtag over time, or a search term of the user’s choosing.
• Wikipedia: articles on a given topic, edits to a particularly controversial entry.
• Flickr: images tagged with a particular phrase, popular images, etc.

Requirements

• Your site must use a source of text or images that you did not create, and must be approved by the instructor.
• Your site must not be static: it should change over time, in response to user input, depending on the user’s location, or all of the above.
• Your site does not need to adhere to the traditional rules of accessible, efficient web design. You are free to make use of inline styles, Javascript dependencies, image- heavy layouts, browser bugs, and other hacks.

Due Date

May 2, 2012

CSS Transitions Module

Pretty nice. CSS transitions allow for changes like :hover and :focus to occur over a specified time rather than being instant.

More info here

Also, just discovered that you can use multiple background-images on the same container

Examples

Here are some fancy examples of animation created with just CSS. Further proof that Flash has no value anymore.

HTML5 Canvas Pixelator

I found this really interesting HTML5 tool. Based on some javascript canvas libraries by David DeSandro that was then created into a site by someone else. Very cool, lot's of options. You can add layer after layer and then save the pixelated image.