Assignment #2

This assignment tests your understanding of XHTML and CSS for layout, positioning, and the CSS box model. Please secure it using your .htaccess file from Assignment 0 (as long as you haven't done anything to turn it off, this password should still be working).

Git Setup

The files you need for this assignment have been uploaded to the class repository. They have been pushed to the master branch, so this is how to include them into your specific branch. On your machine, you'll do the following

$ ssh -i ~/.ssh/keyfile.pem ec2-user@ec2-XX-XX-XX-XX.compute-1.amazonaws.com

__|  __|_  )
_|  (     /   Amazon Linux AMI
___|\___|___|

cd /var/www/html
git pull origin master

1. at this point, you'll either see VIM open with something like the following (meaning it went cleanly, and you're good to go)
   

   
      1 Merge branch 'master' of github.com:RocHCI/CSC210 into Firstname-Lastname                                                                                                                                                          
      2 
      3 * 'master' of github.com:RocHCI/CSC210:
      4   added files for assigment 2
      5 
      6 # Please enter a commit message to explain why this merge is necessary,
      7 # especially if it merges an updated upstream into a topic branch.
      8 #
      9 # Lines starting with '#' will be ignored, and an empty message aborts
     10 # the commit.
   

   
   

   just press [Escape] followed by :wq to close VIM and write your merge commit.

2. or you'll see something like this.
   

   
   remote: Counting objects: 11, done.
   remote: Compressing objects: 100% (9/9), done.
   remote: Total 9 (delta 0), reused 9 (delta 0)
   Unpacking objects: 100% (9/9), done.
   From github.com:RocHCI/CSC210
    * branch            Alex-Silverman -> FETCH_HEAD
   Auto-merging index.html
   CONFLICT (content): Merge conflict in index.html
   Automatic merge failed; fix conflicts and then commit the result.
   

   which tells you that there was a conflict on some files. (That usually means you edited a file that someone else edited as well. We're going to need to fix these conflicts.

git status


# Unmerged paths:
#   (use "git add ..." to mark resolution)
#
#	both modified:      ../index.html

vi ../index.html

 <<<<<<< HEAD                                                                                                                                                                                                                 
   2  
  ...
  38   
  39 =======
  40 
 102   < / div>
 103  < /div>
 105 >>>>>>> 9e9d96f50ea81d1ab16db850471dc876136d7740
 106 
 107 
 108 

<<<<<<<< HEAD  
   ... Someoene elses work ....
============= 
   ... your work that is different....
>>>>>>> CommitNumber

Assignment Requirements

For this assignment you will recreate the following page exactly (between but not including the thick black lines). The instructions on this page and skeleton provided should help you with some of the specifications.

You will be creating a page for a movie review web site named Rancid Tomatoes for the film TMNT. Your page must match the appearance specified in this document. It would be difficult to produce a pixel-perfect representation of the page that matches the image shown here, and we do not expect you to do so, but your page should follow all of the styles specified in this document and should match the overall look, layout, and behavior of the page shown here as closely as possible.

Here*/ ?> A skeleton version of tmnt.html that contains most of the basic page contents, but without any page sections or style sheet, is available for download from git. You can pull it down, just like you did for Assignment 1, using git pull origin master. The only modifications you need to make to this file are to divide the page into sections using div and span tags, and adding id and class attributes. For full credit, you should not change the existing elements on the page other than the additions just described (and minor changes such as indentation and spacing). All of the rest of the changes will happen in a separate CSS file described below.

FYI, our next assignment is likely to build on the code you write in this assignment.

Appearance and Behavior Details

All images mentioned on this page are available via github, and can be accessed with relative URLs.

• http://www.cs.rochester.edu/courses/210/spring2012/assignments/2/

banner.png

generaloverview.png

background.png

bannerbackground.png

rottenbig.png

rottenbackground.png

fresh.gif

rotten.gif

critic.gif

The overall page has a background image of background.png. Text on the page uses an 8pt font. The preferred fonts for text are Verdana, Tahoma, or any sans-serif font available on the system (so you should give it a font-family of all three, in that order). The overall page body has no margin or padding, so its contents stretch to the very edge of the browser window.

The top of the page contains an image banner. The center of this banner is the image banner.png (this should be centered on the page). Behind this banner the image bannerbackground.png is repeated horizontally across the entire length of the page (so it should be spread equally on the left and right sides of banner.png. Each of these images is 50px tall. (Hint: To make the banner stretch all the way to the edges of the page, use the bannerbackground.png as the background image of a block element that is behind the banner.png.)

Underneath the image banner is a centered heading containing the movie name and year in a 24pt bold font. The preferred fonts for this heading are Tahoma, Verdana, or any sans-serif font available on the system.

Below the main heading is the page's overall content area, containing an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move itself dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border and should be sized large enough to contain all of its contents. (See textbook section 4.3.3 on making contents fit into a container.)

Within the overall content area, there is a 550px-wide left-central section that contains the overall rotten rating of 32% and the critics' reviews of the movie. The section is topped by a smaller section containing a large rotten image (rottenbig.png). Behind this the image rottenbackground.png repeats horizontally across the entire length of the section. Each of these images is 83px tall. This is followed by the 32% overall rating for the film, which is shown in a 48pt red bold font, and a message that there are 88 reviews total, which is shown in the standard 8pt font in white. (Hint: It can be tricky to get the large rotten image and the 32% rating text to line up vertically properly. Try adjusting vertical alignment and/or making some content float.)

Below the 32% overall rating, there are two columns of reviews. The columns each occupy 47% of the width of the overall left-center section of the page. There is a horizontal spacing of 2% between the columns and neighboring content. (See the textbook section 4.3.4 on creating multi-column layouts.)

Each individual review consists of a box in which the reviewer gives a quote about the movie, in bold 8pt font. The quote box has a background color of #E1D697. The box has a gray border, 2px thick. 8px separate the quote box's content from its border. Each quote box also contains an icon showing whether the reviewer liked (fresh.gif) or disliked (rotten.gif) the movie. These images are on the left side of the quote box, with 5px separating them from the text to their right. Text wraps around these images as needed.

The reviewer's personal information follows underneath the quote box, including the reviewer's name and publication in italic. A reviewer icon (critic.gif) is also shown, to the left of the name/publication text, with 5px of horizontal space separating it from the text. There is 3em of vertical space between reviews. (Hint: Paragraphs that are part of movie reviews should be sized large enough to contain all of their content, including any floating content. See textbook section 4.3.3 on making contents fit into a container.)

To the right of the critics' reviews is a General Overview section of the page with a list of information about the movie. This section is 250px wide, and there is 10px of space between the edge of the section and the text of the list. The overview's content uses a background color of #A2B964. Its text appears in an 8pt font of Arial or any sans-serif font available on the system.

The section includes a definition list (using dl, dt, and dd elements) about the movie such as its stars and director. Each term is bolded and has 1em of vertical separation between it and the element that precedes it. The bottom of this section contains a link to the movie web site, http://www.tmnt.com/.

Below the set of reviews is a bar with centered text explaining that the page shows reviews 1-8 of 88. This bar has a background color of #A2B964 and is placed directly up against its surrounding content. 5px separate the edge of its text and the element's own outer edge.

The bottom right corner of the page has a section containing two links to the W3C validators. These are the same images and links as used in the previous assignment, with no borders. The W3C images are always present immediately outside of the bottom-right corner of the content section, both when the page first appears and after any scrolling. The icons should be aligned against the page content, not floated all the way to the right of the page. So in other words, when the page is sufficiently wide, the icons should remain aligned against the right side of the content, it should not float all the way to the scrollbar on right side of the page. They should scroll with the page, so that they are always in view at the bottom, regardless of the page's scroll position.

All other style elements on the page are subject to the preference of the web browser. The screenshots in this document were taken on Windows XP in Firefox 3.0, which may differ from your system. The web page's title text should be TMNT - Rancid Tomatoes . The page should have a "favorites icon" or "favicon" of rotten.gif from the image directory shown previously.

Notes for Success

We strongly recommend that you install and use the Firebug add-on for Firefox, or use the built in Inspector in Safari or Chrome when working on this assignment. Using it to inspect elements will help you diagnose problems with the box model and get your styles just right. We particularly suggest using the "Layout" tab on the bottom right to investigate the box model settings for particular elements. (The screenshots shown below are for an in-progress version of the program and don't match the final appearance you are supposed to produce.

 

Implement the content of your web page using XHTML 1.1 as taught in class. For full credit, your page must successfully pass the W3C XHTML validator. Do not express stylistic information in the XHTML itself, such as inline styles or presentational HTML tags such as b or font.

Express all stylistic information on the page using CSS defined in the file movie.css. The majority of the points for this assignment will be for the movie.css file. For full credit, your style sheet must successfully pass the W3C CSS validator. Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles, as well as using context selectors to avoid applying classes and IDs to large numbers of elements when possible. As much as possible you should limit the use of absolute and fixed positioning on this assignment. You should not use HTML or CSS constructs past Chapter 4 of the textbook, and you should not use HTML tables for any reason on this assignment.

Format your HTML and CSS to be as readable as possible, similarly to the examples from class. Place a comment header in each file containing your name, section, a brief description of the assignment, and the file's contents. You must properly use whitespace and indent your XHTML and CSS code following examples shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin any block element past the 100th character on a line. For reference, our solution has roughly 125 lines of CSS (80 without blank lines and comments), though you do not need to match this exactly.

Submission and Grading

Please do not place a solution to this assignment online on a publicly accessible web site.

As is with other assignments, your README file needs to be an index located at http://your-public-dns-value/2/ . If the assignment is not at that location we will not be able to grade your work.

Extra Credit

• You may have noticed that the page you have created has a strong resemblance to a certain popular tomato-based movie review website. Go through your page and reproduce links for the names of all the actors, actresses, and reviewers. For example, under "Starring", the name "Mako" should link to http://www.rottentomatoes.com/celebrity/mako/.
• Your website has a similar style to an older version of the http://www.rottentomatoes.com website. Create another page that matches the current style more closely. Feel free to download any updated images for your new version. Depending on how close you are able to reproduce the original, you will get a whistle or a bell. Matching the colors, reproducing some of the navigation links, or reproducing the layouts are all good candidates for whistles.
• We've seen how with CSS3 with the Web Kit browser core (included in Safari and Google Chrome) we can make animations using only CSS. Use the three pictures here and this technique to make a good old-fashioned brawl between Michaelangelo and Shredder with the sewer as a backdrop (it's actually much bigger than shown here). If you'd like to end the violence, you can make them "dance" together instead.
• Duplicate and update the Teenage Mutant Ninja Turtles example above- replace the images of the characters with your favorite couple from your favorite Disney movie, put them on top of an appropriate background, and have them dance. (Turn in both the teenage mutant ninja turtles scene and your new disney scene.)

Props

This document's contents are (C) Copyright 2013
Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.
It's been changed and adapted to the UofR by Jeffrey Bigham and Kyle Liddell.