Topic

Web Design and Development (WDD) – Higher (v2.1)

Analysis

 Identify the end-user and functional requirements of a website problem that relates to the design and implementation at this level.

Design

 Describe and exemplify the website structure of a multi-level website with a home page and two additional levels, with no more than four pages per level.

Describe, exemplify and implement, taking into account end-user requirements and device type, an effective user-interface design (visual layout and readability) using wire-framing:

  • horizontal navigational bar
  • relative horizontal and vertical positioning of the media
  • form inputs
  • file formats of the media (text, graphics, video, and audio)

Describe, exemplify and implement prototyping (low-fidelity) from wireframe design at this level.

Implementation (CSS)

 Describe, exemplify and implement efficient inline, internal and external Cascading Style Sheets (CSS) using grouping and descendant selectors to:

  • control appearance and positioning:
    • display (block, inline, none)
    • float (left, right)
    • clear (both)
    • margins/padding
    • sizes (height, width)
  • create horizontal navigation bars:
    • list-style-type:none
    • hover

Read and explain code that makes use of the above CSS.

Implementation (HTML)

 Describe, exemplify and implement HTML code:

  • nav
  • header
  • footer
  • section
  • main
  • form
  • id attribute

Describe, exemplify and implement form elements:

  • form element: input
    • text
    • number
    • textarea
    • radio
    • submit
  • form element: select

Describe, exemplify and implement form data validation:

  • length
  • presence
  • range

Read and explain code that makes use of the above HTML.

Implementation (Javascript)

 Describe, exemplify and implement coding of JavaScript functions related to mouse events:

  • onmouseover
  • onmouseout
  • onclick

Testing

 Describe, exemplify and implement usability testing using personas, test cases and scenarios based on low-fidelity prototypes.

Describe and exemplify testing:

  • input validation
  • navigational bar works
  • media content displays correctly

Describe and exemplify compatibility testing:

  • device type:
    • tablet, smartphone, desktop
  • browser

Evaluation

 Evaluate solution at this level in terms of:

  • fitness for purpose
  • usability