Art 101, Spring 2015: Homework 05

NOTE:
M1 = Myers, Smarter Way HTML & CSS
M2 = Myers, Smarter Way JavaScript

Assignments, posted Monday, 4/27, due at 8 am on Monday, May 4.

A. From M1, read the text, Chs. 41-48, Tables, and do the corresponding online exercises.

C. From M2, read the text, Chs. 39-50, switch, events, and do the corresponding online exercises.

B. Update the website for your homework for this course.

  • B1. Create a folder in your website for your homework for this week, named "week-05"
  • B2. A list of links on your homepage should point to your assignments, including the new one.
    • IMPORTANT: The link for week-05, should be to the FOLDER "week-05"
    and not to any HTML page contained therein.
  • B3. Create an index page, "index.html" for the new folder.
    • Edit this index page, and your style sheet for this week, "hw-05.css",
    choosing fonts, colors, borders, margins, etc, as you please.
    Include an image on the page, relevant to the project.
    Include links to the HTML, CSS, JS, (hw-05.html, hw-05.css, hw-05.js)
    and the documentation file for your solution to part D of this assignment ("hw-05-about.html").
    Include an image on the page, relevant to part D.
  • B4. Include a description of part D in a separate file, ("hw-05-about.html").
    • The description should include the overall plan, inputs, outputs, variables, functions, etc.
    Optional but suggested: include a flowchart of your software.
    Include a list of your team members with their homepage URLs.
    The week-05 folders of each team member should be in sync.
    Include brief indications of the contributions of each team member.

    D. Create a triple (hw-05.css, hw-05.html, and hw-05.js) to solve the problem that you propose in B4.

    This is the first DIY assignment. You and your team are to design a project, to be executed as a triple of files as usual,
    plus the new page of description. and posted to the websites of all members of the team, satisfying the following constraints.

  • D1. The HTML page (hw-05.html) should include these compulsory elements:
    • The link to the JS code should be in the head section (see example 4-06).
    • The elements: header, section#menu, section#graphics, section#overlay, and footer.
    • A TABLE should be included to organise the layout of the HTML page.
    • The header section should include the title of the project.
    • The menu section should contain several links that trigger CANVAS text and/or drawings controlled by a switch
      (see examples 5-01 through 5-05).
    • The graphics section should show an image using the tag.
    • The overlay section should show a drawing and text created in a canvas element by JS code.
    • The overlay should fit exactly over the image (see example 4-09).
    • The footer section should include the date and time last modified (see example 4-05).
  • D2. The CSS page (hw-05.css) should control the position of the image and canvas elements (see example 4-09).
  • D3. The JS page (hw-05.js) should include these compulsory elements:
    • A window.onload method. (When a function is stored as a property of an object, we call it a method. See Crockford, p. 28.)
    • A globalApp function (see example 4-06).
    • The functions used for drawing and writing text on the canvas.
    • Events and a switch should trigger the appearance of drawings and/or text on the overlay on top of the image
      (see example 5-05).
  • D4. Post your homework D (five files) in the folder for this week.

    • Revised 26 April 2015 by Ralph