Want to go to D.C?

When: April 18-20. Leaving at 4p.m. from Carroll on Thursday the 18th, returning Saturday the 20th in the afternoon.
Tentative schedule:
  • Thursday: Leave at 4, dinner on the road, check in to the hotel around 9.
  • Friday: visit with Washington Post graphics team in the morning, lunch meeting and tour at NPR’s new building, CNN interactive studio tour in the later afternoon
  • Saturday: Newseum in the morning, head home afterwards
Cost: $160 per person. This includes transportation/gas (we’re taking a UNC van to save money), lodging, and your ticket to the Newseum. Money is due to Steven King by Friday, April 12th, either cash or check.
Where we’re staying:  Hilton Alexandria Mark Center. You’ll share a room with one other person
If you want to go, please respond here by the end of this week so we can get a head count on how many people will be going. And if you have any questions, don’t hesitate to ask! We’re really excited about the trip and hope a lot of you can go – it will be a great opportunity to network with designers and developers in the industry and to see how the skills we learn in our classes are being used in the real world.
~Ashlyn Still

API Integration

Yesterday we learned the basics of APIs using Google Maps as an example. Today we will look more into Twitter and see how this will work with your final project.


Basics of APIs (Slides from Monday)

Learning the Twitter API (Starter Files | Slides)

Final Project: Story Based Mashup


Find an issue, event or news situation that is ideal for a mashup. You will need to combine multiple free services to present the best interactive experience.


  • Responsive design
  • Must be made of at lease 3 services
  • Integrate twitter in some way
  • Integrate photos dynamically (news, instagrame, flickr, other)
  • Integrate google maps

As with all of your previous projects there is a burdon of great storytelling presentation.

Previous Examples:

All projects due before noon on the last day of class, Wednesday, April 24 at 9am. (Last Class)

Dynamic Charts

We will be expanding on our High Charts example and using dynamic data from an XML file.


Assignment: Interactive Feature Review

Screen shot 2012-08-27 at 7.06.53 AM

For details and example: https://www.box.com/s/928503fbd8af17610a45

During this course you will be assigned a date when you will be responsible to choose a multimedia interactive and present it to the class.  The goal of this assignment is to gain an understanding of what makes a good multimedia piece and to become comfortable critiquing professional work. It is also important to have experience making presentations on creative work and this assignment will try to simulate making a critique of a competitor’s work in the creative corporate environment.

You should choose a piece of work that is from your discipline, for example multimedia track students might choose something from the graphics team at the NY Times while a public relations student might choose something from a creative design firm but they should be considered features or interactive graphics rather than a basic website. Look for examples that are successful (award winning or received a lot of buzz at launch possibly) but they do not have to be perfect nor will they be.



  1. Review (50%)

You will submit a written review of the site (with link) that critiques (positive and negative) the design, use of media, creativity, interactivity and effectiveness. Your review is not limited to a traditional paper. Use good information presentation and be creative. Screen shots for demonstration purposes are expected and links to other professional reviews are helpful.


  1. Presentation (50%)

Make a 10 minute presentation and demonstration to the class that expresses the positive and negatives of the site or interactive. Your presentation should be professional, captivating and elicit dialog among the class. You can use any visual tools you find helpful but you should also demo the site showing the features and problems. Feel free to be creative and even assume the role of an advertising executive or art director of a firm if it contributes to your presentation.


Your class peers will represent co-workers and respectfully but inquisitively ask questions that challenge or promote your opinion. You should respond professionally but with authority, as you are the expert on this topic.


Grading: 100 pts

You will be graded on your professionalism and quality of your critique. Your ability to present the information well and to create a discussion among your peers is a major part of the grade. I expect this to be the type of pitch or critique I would see in a New York boardroom of a creative agency.


  • Find a great piece
  • Don’t wait till the last minute
  • Ask critical questions
  • Research other views
  • Dress professionally
  • Don’t read the screen, present!
  • Have fun wit it!

High Charts and Data

Today, we are going to learn how to implement HighCharts for graphing. You could also use other technologies but  this one is pretty easy.



I also need to know DataSet you will be using.

PROJECT 3: Government Data Driven Dashboard (GD3)

Due: March 31st by Midnight


Points: 100

Using any data set from data.gov, create a data driven dashboard that accurately tells a story or shows breakdowns and collections of the data in a visual way. This dashboard should be a well designed web application that is interactive and visual. Whenever possible, data should link to outside sources.


  1. Responsive Design (Bootstrap-minus-bs)
  2. Styles must follow one of the style guides linked below.
  3. Use of Charts and Graphs (Suggest HighCharts)
  4. Featured Tabular Display of a subset of data (Top 10, Specific tag, or date)
  5. Tabular Display of ALL data (suggest http://datatables.net/)
  6. Use of strong UI elements, (tabs, accordion, sliders)
  7. Use of XML Data from data.gov


This site/app should professional and work well enough to publish on NYTimes or Washington Post when you turn it in. It will use their style guide so it better be good!

33% of the grade will be the working code and how you implemented it, 33% will be the design and how well it looks and %33% will be the storytelling and presentation of data.

Style Guides 











Making a Data-Driven Web page

Screen Shot 2013-02-26 at 9.22.29 PMToday we will create an interactive project page about the UNC NCAA investigation. It will be generated off of XML data and include images. You will also integrate the Tiny Scrollbar jQuery plugin.

Starter Files (File–Download)

Assignment: Google Glass Idea Submission

What you would do if you had Glass, starting with the hashtag #ifihadglass.

  • Your application must be 50 words or less
  • You must include #ifihadglass in your application
  • You can include up to 5 photos with your application
  • You can include a short video (15 secs max)
  • Be sure to follow us on Google+ (+ProjectGlass) or Twitter (@projectglass) so that we can contact you directly
  • You must be at least 18 years old and live in the U.S. to apply
  • For more details, please see our full Terms and FAQ

Class 11 AJAX



Today we are going to learn the basics of AJAX.

Slides | Files