Web

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

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

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.

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.

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

• onmouseover

• onmouseout

• onclick

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

Evaluate solution in terms of:

• fitness for purpose

• usability