Assignments

Project 2
Due 12/6 11.59pm


Homework 10
HW10
Due 11/29/2012 11.59pm
Instructions for submission in the slides


Homework 9
HW9
Due 11/8/2012 11.59pm
Please submit via git (create a new branch for HW9)


Homework 8

Resubmit the missed midterm questions with an explanation of misunderstanding.  So for explanatory questions, please submit both the answer (in your own words) and the explanation.

Submit via email (to Jblomo and vimalkini @ ischool). Subject [PATCH] HW8.

Due at 23.59pm  -11/1

Homework 7
Due 10/26/12 11.59pm. Submit via git.

1. Compare the filesize differences between HTTP responses for yelp.com and gzip version of yelp.com
Hint : use curl
– Submit the curl commands
– submit the ls -l outputs
– save the results in txt file
2. Take javascript from the madlibs project, compress with http://jscompress.com/, replace original file, check to make sure it works, resubmit homework

ssh username@ischool.berkeley.edu
cd webarch253
cd i253 (In case you have a different file structure, please cd to appropriate folder that has your html for madlib form)
git branch (this command will list all the branches you have created so far)
git checkout madlib_form (this was the branch I used to for hw3. If you used some other branch please select the right branch from list)
Make necessary changes to your madlib html
Include any new files for homework
Include txt file from qtn 1
git add madlibform.html (please use the correct html file name here. My mad lib form was named madlibform.html)
git -add new file for question 2-
git -add txt file from qtn 1-
git commit -m "hw7: http://ischool.berkeley.edu/~username/i253/madlibform.html"
git format-patch --stdout origin/master | sendmail jblomo vimalkini


Homework 6
Due 10/5/12 11.59pm. Submit via email. Include the answer, and the URL(s) needed to find the answer. Subject line [PATCH] HW6

Use the Users resource to discover how many public repositories (public_repos) I have (jblomo).
Use the Repositories resource to discover which repositories (full_name) I am only a member of.
Use the Repositories resource to find the logins of the contributors to the mrjob repository owned by Yelp
Use the Commits resource to find what the message was of the first commit to the webarch253 repository owned by jblomo.


Homework 5
Due 9/27/12 11.59pm. Submit via email. Subject line [PATCH] HW5

cd webarch253
git checkout master
git pull
git checkout -b project
./server/app.py
http://people.ischool.berkeley.edu/~jblomo/server/

Tasks with Telnet

  1. Make the server respond with your full name (including spaces), the title of the page should be the full title of this class
  2. What is the HTTP response code for http://people.ischool.berkeley.edu/~<USER>/server/wiki ?
  3. Use a PUT request to set the redirect target of http://people.ischool.berkeley.edu/~<USER>/server/wiki
    1. How do you verify this change?
  4. Use a POST to update the redirect target of http://people.ischool.berkeley.edu/~<USER>/server/wiki to a another new location.
  5. Update app.py to correctly return an image from http://people.ischool.berkeley.edu/~<USER>/server/image
  • Use your browser to test
  • Including the Content-Type in your submission

Extra Credit

  • Extra credit makes up for mistakes in that homework
  • Each homework score is up to 100% (10)
  • This week’s extra credit: modify app.py to return either an image or text based on the request’s Accept header

Homework 4
Due 9/20/2012 11.59pm
Please submit by email. Use ‘[PATCH]’ in the subject line.

Using 127.0.0.1 PORT

  • What is the return code for GET / HTTP/1.1?
  • What is the return code for GET /foo HTTP/1.1?
  • What is the next HTTP statement a brwoser would send after this return code?
  • What is the return code for PUT /foo HTTP/1.1

Explain what happens when your browser loads http://people.ischool.berkeley.edu/~<USER>/server/foo

  • You can issue GET requests using telnet by specifying the server name, people.ischool.berkeley.edu, using the default HTTP port, 80.

What is the return code for http://people.ischool.berkeley.edu/~<USER>/i253/foobar.html?
Paste the full telnet transcript for this request


Homework 3
Due 9/13/2012 11.59pm
Create a mad lib form with at least one of each input form elements

  1. Text field
  2. Text field (for numeric input)
  3. radio buttons
  4. checkboxes
  5. drop-down
  6. labels for all input types
  7. button that validates inputs (check for blanks, numeric input) and generates mad lib that uses all of the user inputs to create a story

Get as creative as you like with the story!

A basic madlib form prototype will be provided (on Piazza) to get you started, feel free to style it as you like.

The output madlib can be displayed on the same page OR in a pop-over/modal. You can also use javascript components from Bootstrap for this assignment (but not required).

 extra credit:

  • Create a simple form to implement a credit card checksum validator ( http://en.wikipedia.org/wiki/Luhn_algorithm )
  • Form should have text field with label to enter CC number
  • Validate button and output result in an alert.

Upload to ISchool server

  1. Save the file as madlibform.html somewhere where you can find it later.
  2. Open up FileZilla and connect to your I School account.
  3. Go to folder public_html/i253
  4. Drag and drop the madlibform.html (and other files like .css, jpegs etc) file you just created into the i253 folder.
  5. Once it’s uploaded, preview your website:http://ischool.berkeley.edu/~username/i253/ madlibform.html (where username is your I School username).

How to submit

ssh username@ischool.berkeley.edu
cd webarch253
git checkout master
git checkout -b madlib_form
cp -r ../public_html/i253/madlibform.html .
git add madlibform.html
git commit -m "hw3: http://ischool.berkeley.edu/~/i253/madlibform.html"
git format-patch --stdout master | sendmail jblomo@ischool.berkeley.edu vimalkini@ischool.berkeley.edu


Homework 2

Due: 9/6/12 11.59pm

In this assignment, you will create a validate HTML+CSS Web page representing an Online Portfolio.  (You do not have to complete your portfolio, we will continue to build on the work you do for this homework in subsequent assignments)

Instructions:

To complete this assignment, create a Web page (index.html) that accomplishes the following:

  1. Utilizes html, title, head, body, a, ul/ol, li, img, p, em, div and nested divs and an assortment of other HTML elements.
  2. Links to multiple CSS files that cascade to mark up the HTML so that the content is aesthetically appealing and laid out in an intelligent manner.
  3. Utilizes inline CSS to selectively override styles certain styles in the linked CSS files.
  4. Carefully maintains a strict division of CSS for presentation and HTML for content.
  5. Uses copious comments in the CSS and HTML to indicate what is going on in each.
  6. Validates on the W3C HTML validator found here: http://validator.w3.org.
  7. Make sure your HTML file looks good on at least 2 browsers.
  8. Once complete and valid, upload the file on ischool server (instructions below).
  9. Also, submit your work by git (Instructions below)

Extra Credit:

  1. For extra credit, complete the above, then investigate and use Twitter Bootstrap CSS framework. (Use at least one of the ‘Components’ and one from the ‘Base CSS’) http://twitter.github.com/bootstrap/
  2. Upload the files on ischool server (instructions below).
  3. Submit your work by git (Instructions below)

Instructions for uploading HTML to ISchool personal webspace

  1. Save the file as index.html somewhere where you can find it later.
  2. Install (http://filezilla-project.org/download.php) and open up FileZilla and connect to your I School account.
  3. Go to folder public_html. Create a folder within called i253 (right click -> Create directory)
  4. Drag and drop the index.html (and other files like .css, jpegs etc) file you just created into the i253 folder.
  5. Once it’s uploaded, preview your website: http://ischool.berkeley.edu/~username/i253 (where username is your I School username).

Instructions for submitting homework with git
ssh username@ischool.berkeley.edu
cd webarch253
git checkout master
git pull
git checkout -b online_portfolio
cp -r ../public_html/i253 .
git add i253
git commit -m "hw2: http://ischool.berkeley.edu/~username/i253
Testing on Chrome 18.0.1025.168, Firefox 11 on OS X"
git format-patch --stdout master | sendmail
jblomo@ischool.berkeley.edu vimalkini@ischool.berkeley.edu youremailaddress

Hints


General Commands

git config --global user.name firstname lastname
git config --global user.email yourloginid@ischool.berkeley.edu
git clone git://github.com/jblomo/webarch253.git
cd webarch253

for every new homework
git checkout -b hw1 master
echo Jim Blomo > $USER.txt
git add $USER.txt
git commit -m "my first homework"
git format-patch --stdout master | sendmail jblomo@ischool.berkeley.edu

Homework 1

  • pico $USER.txt
  • Write two paragraphs (in $USER.txt)
    1. Your experience with web architecture. Have you written HTML before? Written Javascript? etc.
    2. What are your favorite features from at least 2 browsers?
  • Reading:
    1. A Brief History of the Web
    2. Long Live the Web