{"id":1976,"date":"2018-05-24T11:38:58","date_gmt":"2018-05-24T11:38:58","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/?page_id=1976"},"modified":"2018-09-20T19:37:10","modified_gmt":"2018-09-20T18:37:10","slug":"web-design-and-development","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/higher\/web-design-and-development\/","title":{"rendered":"Web Design and Development"},"content":{"rendered":"\n\n\n\n\n\n\n\n\n\n\n
\n

Topic<\/h2>\n<\/td>\n

\n

Web Design and Development (WDD) – Higher (v2.1)<\/h2>\n<\/td>\n<\/tr>\n<\/thead>\n

\n

Analysis<\/h3>\n<\/td>\n

Identify the end-user and functional requirements of a website problem that relates to the design and implementation at this level.<\/td>\n<\/tr>\n
\n

Design<\/h3>\n<\/td>\n

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.<\/p>\n

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:<\/p>\n

    \n
  • horizontal navigational bar<\/li>\n
  • relative horizontal and vertical positioning of the media<\/li>\n
  • form inputs<\/li>\n
  • file formats of the media (text, graphics, video, and audio)<\/li>\n<\/ul>\n

    Describe, exemplify and implement prototyping (low-fidelity) from wireframe design at this level.<\/td>\n<\/tr>\n

\n

Implementation (CSS)<\/h3>\n<\/td>\n

Describe, exemplify and implement efficient inline, internal and external Cascading Style Sheets (CSS) using grouping and descendant selectors to:<\/p>\n
    \n
  • control appearance and positioning:\n
      \n
    • display (block, inline, none)<\/li>\n
    • float (left, right)<\/li>\n
    • clear (both)<\/li>\n
    • margins\/padding<\/li>\n
    • sizes (height, width)<\/li>\n<\/ul>\n<\/li>\n
    • create horizontal navigation bars:\n
        \n
      • list-style-type:none<\/li>\n
      • hover<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

        Read and explain code that makes use of the above CSS.<\/td>\n<\/tr>\n

\n

Implementation (HTML)<\/h3>\n<\/td>\n

Describe, exemplify and implement HTML code:<\/p>\n
    \n
  • nav<\/li>\n
  • header<\/li>\n
  • footer<\/li>\n
  • section<\/li>\n
  • main<\/li>\n
  • form<\/li>\n
  • id attribute<\/li>\n<\/ul>\n

    Describe, exemplify and implement form elements:<\/p>\n

      \n
    • form element: input\n
        \n
      • text<\/li>\n
      • number<\/li>\n
      • textarea<\/li>\n
      • radio<\/li>\n
      • submit<\/li>\n<\/ul>\n<\/li>\n
      • form element: select<\/li>\n<\/ul>\n

        Describe, exemplify and implement form data validation:<\/p>\n

          \n
        • length<\/li>\n
        • presence<\/li>\n
        • range<\/li>\n<\/ul>\n

          Read and explain code that makes use of the above HTML.<\/td>\n<\/tr>\n

\n

Implementation (Javascript)<\/h3>\n<\/td>\n

Describe, exemplify and implement coding of JavaScript functions related to mouse events:<\/p>\n
    \n
  • onmouseover<\/li>\n
  • onmouseout<\/li>\n
  • onclick<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\n

Testing<\/h3>\n<\/td>\n

Describe, exemplify and implement usability testing using personas, test cases and scenarios based on low-fidelity prototypes.<\/p>\n

Describe and exemplify testing:<\/p>\n

    \n
  • input validation<\/li>\n
  • navigational bar works<\/li>\n
  • media content displays correctly<\/li>\n<\/ul>\n

    Describe and exemplify compatibility testing:<\/p>\n

      \n
    • device type:\n
        \n
      • tablet, smartphone, desktop<\/li>\n<\/ul>\n<\/li>\n
      • browser<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\n

Evaluation<\/h3>\n<\/td>\n

Evaluate solution at this level in terms of:<\/p>\n
    \n
  • fitness for purpose<\/li>\n
  • usability<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    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 …<\/p>\n","protected":false},"author":32,"featured_media":1386,"parent":763,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1976","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/pages\/1976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/comments?post=1976"}],"version-history":[{"count":4,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/pages\/1976\/revisions"}],"predecessor-version":[{"id":2111,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/pages\/1976\/revisions\/2111"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/pages\/763"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media\/1386"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media?parent=1976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}