CSE 154: Web Programming, Summer 2013

Turn in EC2 Extra Credit 2 (CakePHP Blog)

Due , 11:30pm.
(No late submissions accepted.)

Continue and finish the CakePHP blog tutorial we began in the session, located here:

http://book.cakephp.org/2.0/en/getting-started.html

Complete all sections, with the exception of the “Optional Configuration” section, in which you can skip the security salt and cipher seed.

You will likely still need to do the last instruction in that section, modifying permissions of the app/tmp directory. However, to accomplish that, do the following instead:

• Right-click the app/tmp directory on Webster in FireZilla and select File Permissions…
• Enable Write permissions under “Group” and “Public”, and select the checkbox “Recurse into subdirectories”

Lastly, at the end of the tutorial it links to some suggested follow-up reading. Complete portions of the Layouts tutorial, located here:

http://book.cakephp.org/2.0/en/getting-started.html

Specifically, do the following:

• Create at least one view block (for example, for a list of navigation links, or a sidebar)
• Modify the site’s default header/footer HTML code and create your own stylesheet to customize the site’s appearance.

This optional assignment will be worth one (1) make-up point toward your homework grade. That is, it can take the place of a lost point, but it cannot earn you more than 100% for your overall course homework grade.

It will be graded all or nothing — so if you are missing any of the required components, you will not be awarded the point.

Turn in EC1 Extra Credit 1 (Responsive HW2)

Due , 11:30pm.
(No late submissions accepted.)

Adapt your HW2 solution to incorporate Responsive Web Design features. Specifically:

• Change the widths of the overall content area, the right sidebar, and the left area (which were all expressed in fixed pixel widths in HW2), to be expressed in percent-widths instead.
  • Make the widths of these columns retain the same proportions as the pixel widths specified in HW2.
  • Don’t forget to make the movie poster image in the right sidebar grow and shrink to fit the width of the right sidebar!
  Name your modified CSS file default.css.
• Add at least two new stop points using CSS3 Media Queries:
  1. At a medium stop point (medium.css), make the two review columns stack, rather than appearing side-by-side.
  2. At a small stop point (small.css), make the right sidebar and reviews areas stack. At this point all content on the page will be stacked vertically.
  3. (Optional, challenging:) At a larger stop point (large.css), make the reviews switch to 3 columns. For this particular page, since the reviews are all of different heights, it’s challenging to split the content into three columns while retaining natural stacking. (Hint: You will need to break the reviews up into six separate groupings rather than two, and you may need to switch to a layout strategy which uses a combination of floating and margins. For this step, you might not be able to retain the same ordering of reviews.)
  4. (Optional, if you’ve done #3:) At an even larger stop point (extralarge.css), make the movie poster and information appear side-by-side (with the poster to the right and info to the left).
• The banner at the top of the page should remain centered when the window width is greater than the width of the image itself. When the window width is less than the image’s width, the right portion of the image should be cut off so the left portion (which contains the name of the site) is always visible. You must do this in a way which does not result in horizontal scroll bars appearing.
• Enforce minimum and maximum pixel widths on the overall content area so the content does not get stretched or compressed to the point that it becomes unattractive or readability suffers. (In other words, decide at what point you don’t want lines of text to get any longer or shorter.)
• (Optional:) If or when you deem it appropriate, make font sizes grow or shrink so that the text better occupies the space.

This optional assignment will be worth one (1) make-up point toward your homework grade. That is, it can take the place of a lost point, but it cannot earn you more than 100% for your overall course homework grade.

It will be graded all or nothing — so if you are missing any of the required components, you will not be awarded the point.