{"id":166,"date":"2022-05-18T11:36:30","date_gmt":"2022-05-18T10:36:30","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/?page_id=166"},"modified":"2022-05-20T20:09:44","modified_gmt":"2022-05-20T19:09:44","slug":"design","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/design\/","title":{"rendered":"Design"},"content":{"rendered":"

A good design makes implementation easier<\/span><\/p>\n

The design should consider the three factors below:<\/span><\/p>\n

    \n
  1. Design of the user interface\u00a0<\/strong><\/li>\n
  2. Design of the structure of the software\u00a0<\/strong><\/li>\n
  3. Design of data flow of variables moving in\/out of sub programs\u00a0<\/strong><\/li>\n<\/ol>\n

    Modular<\/h2>\n

    When a problem is broken down into smaller sub-problems\/components, the task becomes more manageable because each part can be worked on separately. This is called\u202f<\/span>modular design<\/span><\/b>.\u202f\u202f<\/span><\/p>\n

    There are several other advantages to this system:<\/p>\n

      \n
    • Different components can be worked on simultaneously by separate programmers.<\/span><\/b>\u202f<\/span><\/li>\n
    • <\/b>Components can be tested independently as the software is being built.<\/span><\/b>\u202f<\/span><\/li>\n
    • <\/b>Aids code re-use within a program and\/or other programs.<\/span><\/b>\u202f<\/span><\/li>\n<\/ul>\n

      Top Level Design<\/h2>\n

      Top level Design should be modular\u00a0<\/span>\u2013<\/span>\u00a0allows us to break a bigger program into smaller parts.\u00a0 This allows different modules to be programmed by different people<\/span><\/p>\n

      Top level design involves looking at the main problem and breaking it down into smaller more manageable modules<\/span><\/p>\n

      This process is repeated, breaking the problems into smaller steps.\u00a0 This is known as\u00a0<\/span>stepwise refinement<\/strong>.<\/span><\/p>\n

      Top Level Design<\/strong><\/p>\n

        \n
      1. \u00a0read scores file into arrays<\/span> \u00a0 <\/span> \u00a0 \u00a0 \u00a0<\/span><\/li>\n
      2. get valid username\u00a0<\/span><\/li>\n
      3. search for user & display score<\/span> \u00a0 \u00a0\u00a0<\/span><\/li>\n<\/ol>\n

        Stepwise Refinements<\/strong><\/p>\n

        1.1<\/span> \u00a0Open highscores file<\/span>\u00a0<\/span>
        \n1.2\u00a0 <\/span>Start fixed loop for each record<\/span>\u00a0<\/span>
        \n1.3\u00a0 \u00a0 \u00a0<\/span> \u00a0Get userName\u00a0<\/span>\u00a0<\/span>
        \n1.4<\/span>\u00a0 \u00a0 \u00a0 \u00a0Get bestScores\u00a0<\/span>\u00a0<\/span>
        \n1.5<\/span> \u00a0End fixed loop<\/span>\u00a0<\/span>
        \n1.6<\/span> \u00a0Close highscores file<\/span>\u00a0<\/span><\/p>\n

        2.1<\/span> \u00a0Get targetUser from user\u00a0<\/span>\u00a0<\/span>
        \n2.2<\/span> \u00a0Start conditional loop while length of targetUser is not between 3 and 8<\/span>\u00a0<\/span>
        \n2.3<\/span>\u00a0 \u00a0 \u00a0 \u00a0 Display error message<\/span>\u00a0<\/span>
        \n2.4<\/span>\u00a0 \u00a0 \u00a0 \u00a0 Get targetUser from user<\/span>\u00a0<\/span>
        \n2.5\u00a0<\/span> End loop<\/span>\u00a0<\/span><\/p>\n

        3.1<\/span> \u00a0found = False<\/span>\u00a0<\/span>
        \n3.2<\/span> \u00a0position = 0<\/span> \u00a0<\/span>
        \n3.3<\/span> \u00a0Start conditional loop<\/span>\u00a0<\/span>
        \n3.4<\/span>\u00a0 \u00a0 \u00a0 \u00a0 If userNames(position) = targetUser Then<\/span>\u00a0<\/span>
        \n3.5\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span> found = True<\/span>\u00a0<\/span>
        \n3.6<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Display targetUser(position), bestscores(position)<\/span>\u00a0<\/span>
        \n3.7\u00a0 \u00a0 \u00a0 \u00a0<\/span> End If<\/span>\u00a0<\/span>
        \n3.8\u00a0 \u00a0 \u00a0 \u00a0 <\/span>add 1 to position<\/span>\u00a0<\/span>
        \n3.9\u00a0 <\/span>Repeat until found=true or end of file<\/span>\u00a0<\/span>
        \n3.10<\/span> If found=false Then<\/span>\u00a0<\/span>
        \n3.11<\/span>\u00a0 \u00a0 \u00a0 \u00a0 display not found message<\/span>\u00a0<\/span>
        \n3.12<\/span> end if<\/span>\u00a0<\/span><\/p>\n

        A Structured Diagram<\/h2>\n

        A <\/span><\/span>structure diagram<\/span><\/span> is one notation that can be used to represent the top down design of the software specification.\u00a0 It is a highly visual way of representing the <\/span>top level<\/span> components and their subsequent refinement – making the structure and hierarchy of the program components very clear.\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        Data Flow<\/h2>\n

        The\u202fdata flow is\u202frequired\u202fin the design to:\u200b<\/span><\/p>\n

          \n
        • work\u202fout how the parameters should be passed between\u202fthe main program and any sub-programs\u202f\u200b<\/span><\/li>\n
        • and\u202fbetween\u202fthe sub-programs themselves<\/span><\/li>\n<\/ul>\n

          Dataflow<\/strong> shows the information that must flow In or Out from the sub-programs.<\/span><\/p>\n

          The top level design identifies the main components required as well as the data flow in and out of components.<\/strong> Notice how arrays are denoted with brackets ().<\/p>\n

            \n
          1. Get results\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/strong><\/span>(OUT: pupil name(), prelim mark(), course mark())<\/strong><\/li>\n
          2. Calculate percentage\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>(IN: prelim mark(), course mark())\u00a0 \u00a0(OUT: percentage)<\/span>\u00a0<\/span><\/strong><\/li>\n
          3. Find position of pupil with top mark\u00a0\u00a0\u00a0\u00a0<\/strong><\/span>(IN: percentage) (Out: Top position)<\/strong><\/li>\n
          4. Display pupil with top mark\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0<\/strong><\/span>(IN: pupil name(), Top position)\u00a0<\/strong><\/li>\n<\/ol>\n

            \"\"<\/p>\n

            Note:\u00a0 The structured diagram illustrated the flow of data in and out of each procedure\/function<\/span><\/span>\u00a0<\/span><\/strong><\/p>\n

            Wireframe<\/h2>\n

            The <\/span>user interface<\/span><\/b> (UI)<\/span><\/b> provides the means by which the user can <\/span>interact<\/span><\/b> any computer system.\u00a0 A key selling point of software is its UI since it determines its <\/span>usability<\/span><\/b>.\u00a0 If the UI is poor, then it is more difficult for a user to access the software’s features and use it to its full potential.<\/span>\u00a0<\/span><\/p>\n

            Wireframes are one of the techniques used for UI design. A <\/span>wireframe<\/span><\/b> is a visual outline that represents a program or website interface.\u00a0 It is created at an early stage in the development of an application to give the client and developers a clear idea of how the finished product will look and function. It should show how users will interact with the program in terms of input and output.<\/span>\u00a0<\/span><\/p>\n

            \"\"<\/p>\n

            Wireframes can be as simple as a rough sketch or can be a detailed design showing colour combinations and images.\u00a0\u00a0\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

            A good design makes implementation easier The design should consider the three factors below: Design of the user interface\u00a0 Design of the structure of the software\u00a0 Design of data flow of variables moving in\/out of sub programs\u00a0 Modular When a problem is broken down into smaller sub-problems\/components, the task becomes more manageable because each part […]<\/p>\n","protected":false},"author":79984,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-166","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/pages\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/users\/79984"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":10,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/pages\/166\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/pages\/166\/revisions\/187"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/phshighercomputingscience\/wp-json\/wp\/v2\/media?parent=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}