Realtime Web

Due Date: 11/14/14 11:59pm

Gain experience with the real-time web, XML, JSON and Javascript

The first goal of this assignment is to find examples of json or xml data on the web and to use AJAX design to load the data into a webpage.

The second goal is to use responsive design to display your data.

Task (5 - 15 hours)

  • This is a solo assignment
    • Identify 5 JSON/XML data sources (URLs) that have geo-data in them. They must come from different domains.
      • For full credit the source of the data that you pull from should be dynamic. Not a static XML or JSON file sitting on a server somewhere. By "dynamic" I mean it should give you different data from the same URL depending on when you request it *or* it should be constructed from the parameters of the URL that you give it.
      • If you use things that are completely static there will be a 3 point penalty per static source.
      • If you put the static feed in your ajax display then there will be an additional 5 point penalty
    • Create a web-page that loads one of the 5 data-sources using AJAX, parses it and presents the data as a set of responsive columns on the webpage.
      • You must deal with cross-site data requests (you need a proxy or JSONP),
      • You must use jQuery to parse and manipulate the data
      • You must insert/modify an html structure into a web-page using javascript
      • For the dynamic ajax data:
        • It must have one responsive row for every entry in the feed
        • Each row must have a description of the feed entry and the associated geo-data (at least)
        • The number of rows must *not* be hardcoded into the HTML. It must be dynamically loaded from the remote URL
    • The web page should have a responsive design using Bootstrap and present differently on a desktop device vs a smart phone
    • Turn in a link to your web-page using the EEE Quiz Mechanism https://eee.uci.edu/quiz/C3ZsR6Wu6J
      • The web-page should list the 5 data sources (by URL) and your written description of what they are
      • Also on the web page should be a description of how you accomplished your data-parsing
      • Also on the web page is the dynamic ajax data that is the result of your parsing (it should generate itself from a live AJAX call)
    • For bonus points do this three times: load one XML AJAX example, one JSON AJAX example and one JSONP example.
    • While graphic design is not the focus of this assignment, feel free to make your webpage look good.
Suggested steps for how to accomplish this:
  1. Build the most simple website possible and put it on a server. This is a free service from ICS
  2. Load that web site in a browser
  3. Make a grid based layout using Bootstrap that changes when the browser viewport changes sizes
  4. Upload that website
  5. Load that web site in a browser
  6. Find your data feeds
  7. Describe your data feeds
  8. Add the feeds and their description to your web page
  9. Upload that website
  10. Make sure it loads in your browser
  11. Decide how you what to format the dynamic data visually
  12. Write the AJAX code to get the data and present it as a big ugly string
  13. Iteratively improve your code so it displays the way you intended.
  14. Review your website to make sure it meets every requirement.
  15. Ask a friend to test in their browser. Fix it. Repeat
  16. Turn in your assignment
sketch of webpage

wireframe sketch of what we are looking for

Resources:
  • a proxy program which will get around the cross-site data restrictions:
    • Please note that this file must be on a machine that has both php and curl installed (students.ics.uci.edu is one such machine). The myProxy.php file must be on the same domain as the one that is executing the javascript. That's the whole point of why you need it.
    • When it is called with a url like this:
      • http://www.mydomain.com/myProxy.php?http://www.yourdomain.com/file.xml
    • It will use php and curl to load www.yourdomain.com/file.xml and send it back as if it were on the local machine
Approximate grading rubric:
  • The parsed feed doesn't have geo-data, but the URL has a geo-parameter: -10
  • The example feeds don't have geo-data or aren't data-feeds: -5 each
  • An example feed had a geo-query but doesn't contain geo-data -5
  • The parsed feed doesn't have geo-data: -20
  • If I had to do work to fix a URL that was entered incorrectly: -5
  • If I had to do work to fix a URL that required authentication that was broken : -5
  • Some geo-data in ajax data but obviously broken: -5
  • The geo-feeds represent the same data from different providers -5 each
  • Some of links that you provided are geo related, but don't have parseable geodata in them. -10
  • There's no ajax data (e.g.,because the javascript isn't correctly linked) -50
  • The ajax data doesn't load -50
  • The feeds are just a static file -5 each
  • Missing a description of the data-parsing but it works -5
  • The title of one of your feeds is wrong -1
  • Not using an asynchronous callback -25 ... -10
  • It look like you overwrote this assignment before we were done grading. penalties according to above
  • An example feed is different but from the same domain -5 each
  • No description of the feeds -10 - -25
  • Parsing description was too minimal or inaccurate -3
  • Data not presented as a responsive set of rows -10
  • Data presented as a malformed set of rows -5
  • Required loading "unsafe scripts" to run -5 (Probably jsonp on an http feed without a proxy)
  • You didn't use Bootstrap -25
  • You didn't use a responsive design -20
  • Your responsive design was broken -5 - -20
  • You did a particularly nice job with your website +5
  • You found a particularly cool data feed +5