CSE 154: Web Programming, Autumn 2012

• Specification
• Extra Features Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• names.html (complete version of HTML page to start from)

• initial appearance, Lisa, Zelda, Donald, Ethel, Stephanie,
  Morgan (male), Morgan (female), Taylor (male), Taylor (female), Aaliyah (male), Searching
• Web Page Comparison Tool

• Part A Specification
• Part B Specification
• Part B Extra Features Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• fifteen.html (complete version of HTML page; should be downloaded but not modified)

• Part A: initial page, wider, after moves, hovering on movable square
• Part B: initial page, after shuffling, after solving puzzle (Part B appearance does not need to match these exactly; be creative)
• Part A: Web Page Comparison Tool

• Fifteen puzzle article from Wolfram MathWorld
• Fifteen puzzle article from Wikipedia

• Specification
• Extra Features Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• StringMaker, a page that will help you convert your myanimation.txt into a JavaScript string for insertion into your myanimation.js
• (Your page should link to animations.js and gallery.js using absolute URLs. You shouldn't download them.)

• ascii.html
• wider
• exercise, large
• exercise, medium, animating
• juggler, XXL, slo-mo checked, animating
• bike, tiny
• Web Page Comparison Tool

• Reverse checkbox
• Custom font size

• Specification
• Extra Features Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• index.php (site front page; you should modify this as necessary)
• background.png, banner-background.png, favicon.png, kevin_bacon.jpg, mymdb.png (images; don't need to be downloaded)

• initial page: index.php
• some outputs from imdb_small (text only): imdb_small_output.txt
• Kevin Spacey: all, w/ Kevin
• Tom Cruise: all, w/ Kevin
• Julia Roberts: all, w/ Kevin
• William Shatner: all, w/ Kevin
• GU pearce: all (an approximate name match)
• Stuart Reges: all (an actor who is not found)
• Web Page Comparison Tool

• Scott 'Carrot Top' Thompson: all, w/ Kevin (for CSE majors who do the validation feature)

• Wikipedia - Six Degrees of Kevin Bacon
• Oracle of Bacon - a real implementation of the Six Degrees of Kevin Bacon
• Oracle of Bacon - stats on possible "center" actors

• Specification
• Extra Features Specification
• Frequently Asked Questions
• Message Board

• index.php skeleton HTML (HTML output to start from)
• todolist.php skeleton HTML
• (your pages also link to favicon.ico, logo.gif, and provided.js, but you don't need to download those)

(NOTE: Your pages do not need to output exactly this same HTML content. We're just providing it as a template and a starting point. Your HTML can have other elements and styling, as described in the spec.)

• index.php ( w/ last login text)
• todolist.php ( w/ items)
• Web Page Comparison Tool

(NOTE: You do not need to match these expected outputs exactly, other than the blue top/bottom bars. The main central content can look however you want, as long as you have the functionality and behavior described in the spec. Have fun and be creative!)

• incorrect password, bad username, bad password, blank item

• Specification
• Extra Features Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• index.php (site's front page)
• singles.txt (initial input file of users to match)
• nerdluv.css (style sheet; you don't need to download or modify this)
• singles2.txt (for CSE majors who complete gay/lesbian/bi match feature)

• Initial index.php page: index (this page is provided to you)
• Viewing matches: matches.php, Bjarne Stroustroup ( HTML output), Lara Croft, Leeloo, Stewie Griffin
• complete list of who matches with whom (for debugging)
• Signing up a new user: Elaine Benes: signup.php ( HTML output from POST), matches
• Web Page Comparison Tool

• Feature #1. Validation: invalid data
• Feature #2. User photos: signup form; matches for Bjarne Stroustroup
• Feature #3. Gay/Lesbian/Bisexual matches: signup form; matches for Nostalgia Critic, Rosie O Donnell, Stuart Reges
• complete list of matches, after Extra Feature #3

• Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• moviefiles.zip (input files for tmnt, tmnt2, princessbride, and mortalkombat)

• CSE non-majors (A): princessbride ( wider), tmnt, tmnt2, mortalkombat
• CSE majors (B): princessbride: top, bottom; wider: top, ( bottom; tmnt2: top, bottom; film=princessbride&reviews=4, bottom; &reviews=1, bottom; film-not-found
• Web Page Comparison Tool

• Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• skeleton.html (unfinished HTML text for you to use as a starting point; to use this file, right-click it and choose Save Link Target As....)

• CSE non-majors (A): output ( wider)
• CSE majors (B): top, ( bottom); wider: top, ( bottom)
• Web Page Comparison Tool

• Specification
• Frequently Asked Questions
• Message Board (please do not post solution code)

• skeleton.txt (The page's text contents without HTML/CSS markup, so you don't need to type in the whole page text.)

• out.png (without extra features)
• out-extra.png (with extra features) - both images taken in Firefox 11 on Windows 7
• Web Page Comparison Tool

• ---

• NOTE: The expected output images are taken on a computer whose screen resolution is 1024x768 pixels. So if your screen is larger, to you the screenshots may not reach all the way over to the right edge of your screen. You don't need to replicate that on your page. Your page's elements should extend all the way to the page's right edge. If you resize your window to 1024x768 resolution, your window should look similar to our screenshot.

  If you're interested, the Firefox Web Developer add-on has a resizer feature that you can use to resize the browser window to an exact width/height.

• W3Schools HTML5 tag reference
• W3Schools CSS3 property reference