Homework 1

Due: Wednesday Oct 10, 11pm.

Submission instructions

Deadline: Wednesday, October 10, 11pm (NOT midnight).

Instructions: zip the whole bottle directory (the one with the server.py file), along with subdirectories, and submit it to this crowdgrader assignment: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4033

Use zip, not 7z, rar, tgz, tar, or other formats. If you have zip/unzip available on the command line, and you are in the parent directory of the bottle directory, you can do:

zip -r hw1.zip my_bottle_dir

You can resubmit as many times as you want before the deadline.

The Assignment

You need to create a web page that is similar to the image below. All the images you need (and some more) are in this zip file.

Specifications

Serving. You must use bottle.py, and your main file must be called, as in our class examples, server.py, so that it can be run with the command

python server.py

The page should be served by the top URL. There are two approaches to this. One is to use a template, for example, news.tpl, and write:

@get('/')

define news():

    return template('news_template')

(You would have to define a template). Another way is to serve a static HTML file: you can create a subdirectory called html, put a news.html page there, and write:

@route('/'):

    return static_file('news.html', root='html', mimetype='text/html')

It is up to you to decide which of these ways to use.

CSS Framework. You must use stupid.css as your css framework. See the examples done in class to see how to link to stupid.css from the head of the web page you are developing.

Quality. You should strive to create a page that is as nice as you can, but in practice, you are going to be graded on three types of things (the detailed rubric will be released soon):

1. Are things in the right place: in the correct column, and properly aligned? We are not talking esthetics but placement. Is there reasonable padding around sections of text and columns?
2. Are the fonts of roughly the correct size and proportions? You should not be overly concerned with replicating exactly the same fonts; we care that boldface is used where it needs to be used, and that titles are biggen than subtitles, and subtitles in turn bigger than normal paragraph text.
3. Esthetics. Some points will be awarded for esthetics.

Hints

To do the homework, I suggest you proceed as follows:

• Get the code, e.g. from the compass branch of https://bitbucket.org/luca_de_alfaro/bottle_intro
• Remove the stuff you don't need.
• Add the images from the zip folder into the /images directory.
• Setup server.py so that you serve either news_template.tpl or news.html
• Edit news.html to create the HTML content
• Create myapp.css, either by editing it directly, or via compass.

Some image files are .png; to serve those, do:

@route('/images/<filename:re:.*\.png>') def serve_image(filename):     return static_file(filename, root='images', mimetype='image/png')

Resources

• This gives you a bird's eye view of the commits in the code repository. You can look at the server file, and at the templates, for instance,
  • the cat cards template or
  • the news-column template.
• Documentation for stupid.css
• Documentation for bottle.py
• How to change font size, boldface, etc, via styling
• The <img> tag for images

Submission Instructions

TBA

You may need a CrowdGrader subscription to be able to submit your assignment.