4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design

 

4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design

 

Front-End

·       The front-end is the part of an application or website that users directly interact with.

·       It is often referred to as the "client side" of an application.

·        Examples: Webpages, forms, menus, and buttons that users click, The layout of a mobile app or a website.

 

Back-End

·       The back-end is the part of an application that operates behind the scenes like handling data processing, storage, and server-side logic.

·       It is often referred to as the "server side" of an application.

·       Examples: Retrieving data from a database when a user logs in, Storing user preferences or purchase history.

 

User Interface (UI)

·       UI is the visual part of an app or website that users interact with — including buttons, icons, colors, fonts, and layout.

·       UI focuses on how a product looks and feels visually — it's all about design and presentation.

·       E.g. In the Daraz or eSewa app, the home screen layout, colorful icons, and menu buttons are all part of the UI.

 

 

User Experience (UX)

·       User Experience (UX) is the overall feeling and flow a person has while using a product — it includes ease of use, speed, satisfaction, and usefulness.

·       UX focuses on how the product works and whether users can complete their tasks easily and happily.

·       E.g. If we can book a bus ticket in 2 clicks and feel confident while using the app, that’s good UX.

 

Advantages of UI (User Interface) Design:

·       Makes the app or website look attractive and professional.

·       Helps users easily see and understand what to do.

·       Organizes buttons, icons, and content clearly.

·       Supports brand identity through colors, fonts, and layout.

 

Advantages of UX (User Experience) Design:

1.     Makes the app or website easy to use and navigate.

2.     Helps users finish tasks quickly with less effort.

3.     Increases satisfaction and builds user trust.

4.     Saves time and money by fixing problems early.

 

Software used for UI/UX design

·       Figma: It is used for collaborative design where multiple people can work on the same project simultaneously.

·       Adobe XD: It is used for creating different interfaces, buttons, and layouts.

·       Balsamiq: It is a software used for creating wireframes.

 

Concept of wireframe

·       A wireframe is a basic sketch or layout of a screen that shows where things will be placed — without color or design.

·       The purpose of wireframe is to plan the structure and layout of an app before adding visual design or functionality.

·       We can use different software such as Sketch, Figma, and Balsamiq to design wireframes.

 

Concept of wireframe design

Wireframe design is the process of creating a simplified representation of a user interface (UI) or webpage.

 

Here are the key aspects of wireframe design:

·       Layout structure – Shows the basic arrangement of screen sections.

·       UI element placement – Displays where buttons, text, and images will be placed.

·       Content hierarchy – Organizes content from most to least important.

·       User flow – Shows how users move from one screen to another.

·       Navigation design – Adds menus or tabs to help users explore the app.

·       No visual styling – Uses only simple shapes without colors or fonts.

 

Benefits of wireframe

·       Easy to draw – Wireframes use a simple and clean layout with basic screen elements.

·       Easy to understand – They focus on only the essential parts, without colors or decorations.

·       Easy to modify – You can update wireframes without knowing any programming language.

·       No coding required – Wireframes can be created like simple sketches using drawing tools or paper.

 

How do UI, UX, and Wireframe work together?
Wireframe builds the layout → UX designs the experience → UI makes it visually attractive and interactive.

 

What’s the difference between UI and UX in one sentence?
UI is what you see, UX is how it works and feels.

DNS (Domain Name System) - How DNS Works (4 Simple Steps) - Grade 9 Computer Science 2082

 

DNS (Domain Name System)

·       DNS is the internet’s naming system that converts website names into IP addresses, helping browsers find and open websites.

·       DNS is important because it helps users access websites without needing to remember complex IP addresses.

 

How DNS Works (4 Simple Steps)

·       Type a website name (like www.google.com).

·       DNS finds the IP address (like 142.250.190.68) linked to that name.

·       Browser uses the IP to connect to the correct server.

·       Website loads on the screen.

Typing www.youtube.com → DNS → Finds IP 142.250.190.78 → Loads YouTube

 

 

IP address

A unique number used to identify a device or website on the internet.

 

There are many types of Domain Name(Top Level Domain). Some of them are listed below:

·       .com (Commercial)

·       .np (Country Code Top-Level Domain for Nepal)

·       .edu (Education)

·       .gov (Government)

·       .org (Organization

 

DNS registration process

·       Choose the domain name: Choose a domain name that is unique and memorable that identifies your website.

·       Check the availability: Verify the availability of the chosen domain using the registrar’s domain checker tool.

·       Choose a domain name registrar: Choose a trusted registrar to officially register your chosen domain name. (gurkhahost.com, prabhuhost.com)

·       Buy and register your domain name: Once availability has been verified and a registrar has been chosen, buy and register your domain name.

·       Do not lose your domain name: Renew the domain registration before it expires so that you don’t lose your domain name.

 

(Think of a Name, Check if It's Taken, Choose Where to Buy It, Buy the Domain Name, Renew It Every Year)

Web Development Life Cycle - Grade 9 Computer Science

 Web Development Life Cycle

Web Development Life Cycle

·       The web development life cycle is the process of planning, designing, building, testing, deploying, and maintaining a website or web application.

·       This gives everyone—developers, designers, and clients—a clear plan to work together and build a successful website.

Stages of WDLC

·       Gathering Information: This first stage focuses on understanding the project’s goals and collecting all the necessary information to build the website.

·       Planning: In this stage, a basic layout and design are created to outline the website’s overall structure, like a blueprint.

·       Design and Layout: This stage focuses on creating the website’s look and feel to ensure it is visually appealing and easy to use.

·       Content creation: In this stage, the actual content for the website is created using text, images, audio, and videos.

·       Development: In this stage, developers use code to convert the design and content of websites into a useful platform.

·       Testing: This stage involves checking the website for errors, ensuring all features work correctly, and fixing any problems found.

·       Deployment: After successful testing, the website is installed on the server and made live for users to access.

·       Maintenance and Updating: This stage involves regularly updating the website’s content and fixing any issues to keep it running smoothly and staying up-to-date.

What is Web Technology? Examples/Components of Web Technology | Grade 9 Computer Science 2082 Nepal

 

4. Web Technology

 

4.1 Concepts of Web Technology

·       Web technology refers to the tools, languages, and protocols used to create, manage, and interact with content on the internet.

·       Web technology enables the creation of websites, web applications, and online services that are accessible via the internet.

 

Some examples of web technologies are:

·       HTML: Hypertext Markup Language, the standard language for creating web pages

·       CSS: Cascading Style Sheets, the language for styling and formatting web pages

·       JavaScript: A scripting language for adding functionality, interactivity, and logic to web pages.

·       PHP: A server-side scripting language for creating dynamic web pages and web applications.

·       Python: A versatile programming language commonly used for web development.

·       MySQL: A database management system for storing and retrieving data for web applications.

·       WordPress: A web content management system for creating and managing websites and blogs.

SOLVED Pathibhara English School, Itahari, Sunsari First Term Question 2082 Subject: Computer Science

 

 

Pathibhara English School, Itahari, Sunsari

First Term Question 2082

Subject: Computer Science

 

Group-A [10 Marks]

1. Answer the following questions in one sentence. [6×1=6]

a. What term describes the unique address given to each device in a network?

IP address is the term used to describe the unique address given to each device in a network.

b. Give any two examples of bounded media for data transmission.

Two examples of bounded media are twisted pair cable and coaxial cable.

c. List any two components of data communication.

Two components of data communication are the sender and the transmission medium.

d. Which datatype is suitable for storing graphic content in MS-Access?    

  The suitable datatype for storing graphic content in MS-Access is OLE Object.

   

e. What is a tuple in database?

A tuple in a database is a single row or record in a table.

f. Define global variable in modular programming.

A global variable in modular programming is a variable that is declared outside all functions and is accessible throughout the program.

 

2. Write the appropriate technical terms for the following. [2×1=2]
   a. The security barrier that monitors and filters incoming and outgoing

    network traffic. Firewall
b. The set of rules that govern how data is sent and received over

                  the internet. Protocol

3. Write the full forms. [2×1=2]
   i. UTP - Unshielded Twisted Pair
   ii. NOS - Network Operating System

 

 

 

 

Group-B [24 Marks]

4.     Answer the following questions. [9×2=18]
a. Write any one difference between LAN and MAN. Draw well-labelled diagram  of star topology.

Any one difference between LAN and MAN is

LAN (Local Area Network) covers a small geographical area like a home, office, or building, whereas MAN (Metropolitan Area Network) spans a larger area, like a city or campus.

Diagram  of star topology:

                  [Computer]

                       |

[Computer] --- [Hub/Switch] --- [Computer]

                       |

                  [Computer]

b. What is ISP? Why internet is called network of network?
ISP (Internet Service Provider) is a company that provides users access to the Internet.

The Internet is called a network of networks because it connects millions of smaller networks globally, allowing them to communicate and share data.

 

c. What is malware? Mention two safety measures you can take to avoid malware on your computer or smartphone.

Malware is a malicious software designed to harm, exploit, or disable computers and networks.

Two safety measures you can take to avoid malware on your computer or smartphone are:

·  Install and regularly update antivirus software.

·  Avoid downloading files or clicking links from unknown or untrusted sources.

 

 

d. Define hardware security. List any two ways to protect hardware devices at home.

Hardware Security refers to the protection of physical devices from theft, damage, or unauthorized access.

Any two ways to protect hardware devices at home are:

·  Use surge protectors to prevent damage from power spikes.

·  Lock your devices or store them in secure places when not in use.

e. What is authentication? List some examples of biometric verifications.
The process of identifying an individual usually based on a username and password is called an authentication system.

Some examples of biometric verifications are:

·  Fingerprint recognition

·  Facial recognition

f. Explain about cryptography with a diagram.

Cryptography is the technique of securing data by converting it into a coded format to prevent unauthorized access.

Diagram

Plain Text → [Encryption] → Cipher Text → [Decryption] → Plain Text

          (Sender)                           (Receiver)

g.  You received an email claiming to be from your bank, asking for your account password. What type of cyberattack is this? What steps should you take in response?

The email is an example of a phishing attack, which attempts to trick users into providing sensitive information.

The steps should be taken are:

·  Do not reply or click on any links.

·  Report the email to your bank and delete it.

 

h. Write down the advantages of database management system (DBMS) over traditional data storage system.

The advantages of database management system (DBMS) over traditional data storage system

a)      It reduces data redundancy which means duplication of data.

b)     It allows multiple users to access the same data simultaneously.

c)      Large volume of data can be stored and updated easily.

d)     It provides high security of data as well as maintains accurate database.

 

i. Define Query and Report in MS Access.

A Query in MS Access is a request to retrieve specific data from one or more tables based on given criteria.

A Report is a formatted output that presents data from tables or queries, typically for printing or sharing.

 

 

5.     Write the output of the following program by making dry run table. [2]

DECLARE SUB series ( )

CALL series

END

SUB series ( )

i = 3

FOR c = 1 TO 5

t = i * (c ^ 2)

PRINT t;

NEXT c

END SUB

 

Dry Run

i	c = 1 TO 5	t = i * (c ^ 2)	PRINT t;
3	1 TO 5 Yes	3x(1^2)=3	3
	2 TO 5 Yes	3x(2^2)=12	12
	3 TO 5 Yes	3x(3^2)=27	27
	4 TO 5 Yes	3x(4^2)=48	48
	5 TO 5 Yes	3x(5^2)=75	75
	6 TO 5 No

The output of the program is:

3 12 27 48 75

 

6.     Re-write the given program after correcting the bugs. [2]

REM to find the factorial of a given number

DECLARE FUNCTION FACTO (N$)

CLS

INPUT "Enter a number"; N

CALL FACTO (N)

END

FUNCTION FACTO ()

F = 1

WHILE N = 0

F = F * N

N = N - 1

WEND

FACTO = F

END FUNCTION

 

Debugged Program

REM to find the factorial of a given number

DECLARE FUNCTION FACTO (N)

CLS

INPUT "Enter a number"; N

PRINT FACTO (N)

END

 

FUNCTION FACTO (N)

F = 1

WHILE N < > 0

F = F * N

N = N - 1

WEND

FACTO = F

END FUNCTION

 

7.     Study the given program and answer the given questions. [2]

DECLARE SUB SUM (N)

CLS

INPUT "Enter any number"; N

CALL SUM (N)

END

SUB SUM (N)

WHILE N > 0

R = N MOD 10

T = T + R

N = N \ 10

WEND

PRINT "The Sum of individual digit is"; T

END SUB

Questions:
a) How many parameter(s) is used in the above program? List them.

One parameter is used in the program.

b) Write the use of MOD in above program.

The MOD operator is used to find the remainder.

 

Group-C [16 Marks]

8.     Convert/Calculate the following as per instructions [4×1=4]
i. into Octal

 

986 ÷ 8 = 123, remainder 2 

123 ÷ 8 = 15, remainder 3 

15 ÷ 8 = 1, remainder 7 

1 ÷ 8 = 0, remainder 1

(986)₁₀ = (1732)₈

ii. into Binary

Hex to Binary conversion (4-bit for each digit):

A = 1010

2 = 0010

D = 1101

 (A2D)₁₆ = (101000101101)₂

iii.

   11010

+ 10110

   --------

  110000

11010 + 10110 = (110000)₂

 

iv.

101)	1	0	1	1	1	0	(1001
	1	0	1
	0	0	0	1	1	0
				1	0	1
				0	0	1

Q=1001

R=1

 

 

 

 

 

 

9.      

a.      Write a program in QBASIC to calculate the area of a rectangle using SUB….. END SUB and perimeter of rectangle using FUNCTION... END FUNCTION. [4]

 

DECLARE SUB Area(L, B)

DECLARE FUNCTION Perimeter(L, B)

CLS

INPUT "Enter Length: ", L

INPUT "Enter Breadth: ", B

CALL Area(L, B)

PRINT "Perimeter of Rectangle: "; Perimeter(L, B)

END

 

SUB Area(L, B)

    A = L * B

    PRINT "Area of Rectangle: "; A

END SUB

 

FUNCTION Perimeter(L, B)

    Perimeter = 2 * (L + B)

END FUNCTION

 

 

 

 

b.     Write a program in QBASIC to ask user any word and reverse it using SUB..... END SUB [4]

 

 

DECLARE SUB REV(W$)

CLS

INPUT "Enter any word: ", W$

CALL REV(W$)

END

 

SUB REV(W$)

    FOR i = LEN(W$) TO 1 STEP -1

        R$ = R$ + MID$(W$, i, 1)

    NEXT i

    PRINT "Reversed Word: "; R$

END SUB

 

 

 

 

 

10.  Write a program in QBASIC to ask user any number and check whether it is odd or even using SUB..... END SUB. [4]

 

DECLARE SUB CHECK(N)

 

CLS

INPUT "Enter any number: ", N

CALL CHECK(N)

END

 

SUB CHECK(N)

    IF N MOD 2 = 0 THEN

        PRINT N; " is Even"

    ELSE

        PRINT N; " is Odd"

    END IF

END SUB

 

 

OR,

Write a program in QBASIC to count the occurrence of letter 'a' in the supplied string using FUNCTION…END FUNCTION. [4]

 

DECLARE FUNCTION CountA(S$)

CLS

INPUT "Enter a string: ", S$

PRINT "Number of 'a' in the string: "; CountA(S$)

END

 

FUNCTION CountA(S$)

    C = 0

    FOR i = 1 TO LEN(S$)

        IF MID$(LCASE$(S$), i, 1) = "a" THEN

            C = C + 1

        END IF

    NEXT i

    CountA = C

END FUNCTION