Homeworks

Deadline

Sept 11, 2013

Grading

Not graded, but necessary for class

Tasks

• Subscribe to the class mailing list
• Join the class page on Piazza
• Create and upload a simple “Hello World!” page onto your (I School) webpage
• Set up a GitHub account
• Install Git
• Fill out the class survey

Deadline

Sept 23, 2013

Grading

5 points

Tasks

In this homework, you will practice basic HTML/CSS/jQuery skills by editing a simple to-do list. Your tasks are below:

• Currently, the web page has a browser title (as indicated by the <title> tag). However, it doesn’t have a main title on the page itself. Add a title using the appropriate HTML tag. (.5 point)
• The column widths are too narrow at the moment. In the css file (_css/style.css), make the columns wider without pushing the form below the list. (.5 point)
• Add various styles to create some hierarchy in the layout and make the to-do list easier to use. For example, you may consider making the input field bigger, adding a background color, making “remove” a button instead of a link, etc. (1 point)
• The user should be able to add/remove an item to/from the to-do list. Build these two functionalities using jQuery in the script file (_js/script.js). You may find the jQuery API documentation helpful. (3 points)

Deadline

Oct 14, 2013

Grading

5 points

Tasks

Part A: Enhance the to-do list from HW 1 with more functionality (3 points)

• Add at least one animation effect using either CSS3 or jQuery. The animation should make sense for a to-do list (for example, animate the to-do items on hover, or when added or removed from the list). (1 point)
• Implement one of the following CSS3 properties in your CSS (1 point): border-radius, box-shadow, text-shadow, translate, rotate, scale, skew
• Write JavaScript that uses the HTML5 Geolocation API to obtain the user's location when the page loads. Print the latitude and longitude values to the console. (1 point)
• EXTRA CREDIT: Do something useful with the location data (add a map? tag to-dos with location data?) (1 point)

Part B: Accessibility (1 point)

• Open this page in your browser: All About Lemurs. View the HTML code in the Chrome/Firefox inspector or using View Source (CTRL-U/CMD-U). Name at least three improvements you could make to make this page more accessible and/or semantic.

Part C: APIs (1 point)

• Review the documentation for the Yelp API. What would the URL look like for an API call to find Mexican restaurants that are closest to the following location?
  37.8717 latitude, -122.2728 longitude.

---

Deliverable

To submit your assignment, send in a zip file containing:

• Your code for part A
• A text file, word doc, or pdf containing your answers for parts B and C as well as a link to your code for part A somewhere on the web (e.g. your I School webspace).

Deadline

Nov 6, 2013

Grading

5 points

Tasks

Part A: Mobile Web (2 points)

Open the files part A. index.html is a simple page layout that is optimized for “big browser.”

• Using responsive web techniques, create a mobile version for this page. You will be changing the section of the HTML slightly (recall ), but otherwise the DOM should not change. (1.5 points)
• Describe the changes you made in a few sentences (<100 words). (.5 point)

Part B: Data Visualization (3 points)

Open the files for part B. index.html contains a blank svg that will house your visualization.

• Create a simple visualization based on the data included in _js/script.js. Think about the type of visualization that would make the most sense given the data (would it be a pie chart? A treemap? Line chart?). You may use D3.js or other charting libraries if you wish. (2.5 points)
• In a few sentences (<100 words), explain your choice. Why did you decide to use a bar chart over a donut chart, for example? (.5 point)

Part C: Extra Credit (1 point)

Find an existing data visualization (static or interactive) and critique it.

• Is it a good or bad example of data visualization?
• Why do you think it’s a good/bad example? State two or three reasons.
• Name two or three potential changes you would make to improve the visualization.

In addition to your answers, don’t forget to include a screenshot of the visualization (and a link if it’s interactive).

---

Submission Notes

Create one pdf that contains your answers for parts A2 and B2 (and part C if you choose to do it). Include this pdf in your zipped file submission.

Deadline

Nov 27, 2013

Grading

5 points

Tasks

Part A: Organizing System (1 point)

As we learned in 202, anything can be considered a resource. On the web, this abstraction is a guiding principle behind REST APIs. From Wikipedia:

An important concept in REST is the existence of resources (sources of specific information), each of which is referenced with a global identifier (e.g., a URI in HTTP). In order to manipulate these resources, components of the network (user agents and origin servers) communicate via a standardized interface (e.g., HTTP) and exchange representations of these resources (the actual documents conveying the information).

Any number of connectors (e.g., clients, servers, caches, tunnels, etc.) can mediate the request, but each does so without "seeing past" its own request ... Thus, an application can interact with a resource by knowing two things: the identifier of the resource and the action required &em; it does not need to know whether there are caches, proxies, gateways, firewalls, tunnels, or anything else between it and the server actually holding the information. The application does, however, need to understand the format of the information (representation) returned, which is typically an HTML, XML, or JSON document of some kind, although it may be an image, plain text, or any other content.

Imagine you are building a web-based organizing system according to this principle. Consider:

1. What resource(s) would your system organize?
2. What interactions would the system support?
3. What routes (URL paths and HTTP methods) correspond to each of these actions?

Deliverable: Create a table that outlines the structure of resources in your app. For example, if I was building a recipe organizing system, I might have the following table:

Path	Method	Parameters	Returns	Description
/	GET	None	HTML	Goes to the home page
/recipes	GET	keyword	JSON	Returns list of recipes, optionally filtered by keyword
/recipe/<id>	GET	None	HTML	Detail page for a single recipe
/recipes	POST	title, ingredients, steps, difficulty, image_file	JSON	Creates a new recipe. Returns JSON success message.
/recipe/<id>	DELETE	None	JSON	Deletes the recipe with the specified id. Returns JSON success message.

Send us the table as a PDF or Word doc.

Part B: Complete the Todo List (4 points)

Build a back end for the to-do list you created for HW 1 and 2. See here for instructions: Homework 4 Part B

Deliverable: Send us a zip file of your Flask app directory.

---

Submission Notes

Send us a pdf or word doc with your answer for part A, and a zip file of your code for part B.