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.
ssh username@ischool.berkeley.edu
Make necessary changes to your madlib html
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)
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 login
s 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
- Make the server respond with your full name (including spaces), the title of the page should be the full title of this class
- What is the HTTP response code for http://people.ischool.berkeley.edu/~<USER>/server/wiki ?
- Use a PUT request to set the redirect target of http://people.ischool.berkeley.edu/~<USER>/server/wiki
- How do you verify this change?
- Use a POST to update the redirect target of http://people.ischool.berkeley.edu/~<USER>/server/wiki to a another new location.
- 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’sAccept
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 usingtelnet
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
- Text field
- Text field (for numeric input)
- radio buttons
- checkboxes
- drop-down
- labels for all input types
- 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
- Save the file as madlibform.html somewhere where you can find it later.
- Open up FileZilla and connect to your I School account.
- Go to folder public_html/i253
- Drag and drop the madlibform.html (and other files like .css, jpegs etc) file you just created into the i253 folder.
- 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:
- Utilizes html, title, head, body, a, ul/ol, li, img, p, em, div and nested divs and an assortment of other HTML elements.
- 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.
- Utilizes inline CSS to selectively override styles certain styles in the linked CSS files.
- Carefully maintains a strict division of CSS for presentation and HTML for content.
- Uses copious comments in the CSS and HTML to indicate what is going on in each.
- Validates on the W3C HTML validator found here: http://validator.w3.org.
- Make sure your HTML file looks good on at least 2 browsers.
- Once complete and valid, upload the file on ischool server (instructions below).
- Also, submit your work by git (Instructions below)
Extra Credit:
- 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/
- Upload the files on ischool server (instructions below).
- Submit your work by git (Instructions below)
Instructions for uploading HTML to ISchool personal webspace
- Save the file as index.html somewhere where you can find it later.
- Install (http://filezilla-project.org/download.php) and open up FileZilla and connect to your I School account.
- Go to folder public_html. Create a folder within called i253 (right click -> Create directory)
- Drag and drop the index.html (and other files like .css, jpegs etc) file you just created into the i253 folder.
- 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
- Firebug is indispensable for Web programming. You will want to familiarize yourself with it as soon as possible if you have not already (http://getfirebug.com). Check out Firebug Lite as well for use with other browsers (http://getfirebug.com/lite.html). Another useful add-on is the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60).
- You may find the HTML and CSS examples at w3schools.com to be useful: http://www.w3schools.com/html/html_examples.asp.
- You can find more information about I school hosting service at https://www.ischool.berkeley.edu/intranet/computing/connecting/webspace
- The CSS Zen Garden is an interesting place to learn about the power of CSS: http://csszengarden.com.
General Commands
- Learn as much as you like at learn.github
- ssh ischool
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)
- Your experience with web architecture. Have you written HTML before? Written Javascript? etc.
- What are your favorite features from at least 2 browsers?
- Reading: