Computer Science Year 1

SECTION

5 COMPUTATIONAL
THINKING AND WEB
DEVELOPMENT

1
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Computational Thinking (Programming

Logic)
Web Technologies and Databases

INTRODUCTION
Take a moment to explore the beauty of this website here or https://t-tel.org/. Are you
curious about how it was expertly created? In this section, you will learn the basics of
building a website. Through hands-on activities and problem-solving tasks, you will
develop your coding skills and understand how websites are made using tools such as
HTML, CSS, and JavaScript.
We will focus on web outline plans, which include essential elements like sitemaps,
wireframes, and prototypes. These tools will help you see the different parts of a web
page and may even inspire you to try web development yourself!
There are many excellent websites, such as w3schools.com and codecademy.com,
where you can learn more and practise your skills.
We are excited for you to gain these valuable skills – let us get started then!

At the end of this section, you will be able to:

1. Identify and describe the key components of a Web page, including headings, menus,
links, text, images, and other relevant elements.
2. Draw and explain 2 web outline plans showing the wireframes.

Key Ideas
1. Web design - Web design involves planning and creating the visual layout and structure
of a website. It ensures the site is attractive, user-friendly, and works well on different
devices.
2. Web development – Is the process of building and maintaining websites
3. Front-end – Refers to the part of a website that users interact with directly
4. Back-end – Ensures that the front-end operates smoothly by handling data processing,
storage, and security
5. Sitemap - A sitemap is a visual or structured map that outlines the organisation and
hierarchy of a website’s pages
6. User experience (UX) - Refers to how users interact with and feel about a website
7. User interface (UI) - Refers to the visual elements of software or a website that users

2
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

interact with
8. Website blueprint - A detailed plan that outlines the structure, content, and navigation
of a website
9. Content structure - Refers to the organised arrangement of information on a website,
ensuring that content is presented in a logical and easy-to-navigate manner.
10. Wireframe – Like a house plan, a wireframe is a simple sketch that shows the structure
of a website.
11. Prototype – Like a small model of the house, a prototype allows you to see how the
structure works in real life.

Let’s begin this section with an interesting activity!

Activity 5.1

Do this activity individually.

1. Click on these two links and explore the similarities and differences on the
landing page (the first page that opens when you click the link).
Link 1
Link 2
2. List 5 things they have in common.
3. What are the key differences between them?
4. Share your finding with the class and discuss.

From the activity you just completed, you will notice that link 1 is just a design, without
any functionality, while link 2 has functionality which makes the website respond to
what you clicked on.
In this learning, we will look at the difference between web design and web development,
which you may have already understood from Activity 5.1.

3
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

THE DIFFERENCE BETWEEN WEB DESIGN AND

WEB DEVELOPMENT

Web Design
Web design is about making a website look good. It deals with the colours, layout, and
overall appearance of the website. However, web development is about making the
website work (function). This means, it involves creating the parts of the website that
users interact with, using coding languages like HTML and JavaScript.
Before a website is developed, web developers take the ideas that web designers come
up with and make them work by writing codes. In SHS Years 2 and 3, you will learn
more about how this coding works, especially HTML. For now, you will learn the
basic idea(s) of how websites are built. See the simple one-page website example from
Activity 5.1 link 2. This helps you understand how web design and development come
together to create websites.
Figure 5.1 highlights some of the key differences between web design and web
development.

Figure 5.1: Differences between web design and web development

Now that you understand the difference between web design and web development, let
us look at web development in more detail.

4
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Activity 5.2

1. Imagine you are to create a human being using these three images. Arrange
them in the best possible order.

1 2 3

Figure 5.2: JH Figure 5.3: CSS Figure 5.4: HTML

2. Justify your reasons for the arrangement.

3. Share your arrangement and reasons with your peers.

Good work, the activity you just completed is a process of how web development works.

Web Development
Web development is the process of creating and maintaining websites and web
applications. It involves using different tools and technologies (such as JavaScript,
CSS, HTML, etc.) to build these sites. The main goal of web development is to meet
the needs of the client, who is the person or organisation paying for the project. This
means creating online experiences that are accurate, informative, reliable, interactive,
and easy for users to navigate.
There are two aspects – front-end development and back-end development:
1. Front-end development is all about designing the parts of a website that users
see and interact with. It focuses on the user interface (how the website looks) and
the user experience (how easy and enjoyable the website is to use). Here are the
main technologies used in front-end development:

5
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

a. HTML (Hypertext Markup Language):

HTML is the standard language used to create web pages. It provides the
basic structure and content of a webpage. HTML uses special bracketed codes
called tags (like <body>, <p>, <img>) to tell the web browser how to display
different parts of the page.
b. CSS (Cascading Style Sheets):
CSS is the language used to style the visual appearance of a website. It allows
developers to customise colours, layouts, fonts, and other design elements. CSS
can be written directly in the HTML file or in a separate file that is linked to
the HTML document. Keeping the content (HTML) separate from the design
(CSS) makes it easier to apply the same styles across multiple pages.
c. JS (JavaScript):
JavaScript is a type of programming language called a scripting language
which adds interactivity and dynamic features to websites. It allows developers
to create things like animations, interactive maps, real-time updates, and form
validations. JavaScript makes websites more engaging and responsive to user
actions, enhancing the user experience.
Think of it this way, just like the completed Activity 59.
• HTML is like the skeleton of a website, providing its basic structure.
• JavaScript is like the muscles and nerves, adding movement and interactive
functions to make the website come alive.
• CSS is like the skin and clothes, giving the website its style and appearance
(beauty).
By combining HTML, CSS, and JavaScript, front-end developers create websites
that are not only visually appealing but also easy and enjoyable to use.
Mastering the skills of these tools and technologies will help you become a
good front-end developer – would you like to be one?

Activity 5.3

Let us have some fun playing with this front-end code. Follow these instructions
carefully to enjoy this simple website.
1. Click here to download the zip file.
2. Unzip or extract the file to a specific location where you can easily get access
to it.
3. Double click on “simple website” to Run the website.
4. What do you notice about the website? Write down some observations.
5. Share your observation with peers in the classroom.
Congrats, you are on your way to be one of the best website developers.

6
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

2. Back-end Development involves the parts of a website that you do not see but
makes everything work smoothly. It includes managing servers, databases, and
the logic that powers the website. Here is a simple breakdown of what back-end
development is all about:
a. Server-Side Processes:
Think of the server as the brain of the website. It handles requests from users
(like when you click a button) and sends back the right information.
b. Database Management:
A database is like a digital storage room where all the website’s data is kept.
This includes things like user information, products in an online store, and
articles on a blog. Without a database, the website cannot save or find any
information.
c. Application Logic:
This is the set of instructions that tells the website how to behave. It processes
the data from the database and ensures that everything runs correctly. For
example, when you log in to a website, say Facebook, the application logic
checks your username and password against the database before it allows you
to login to your account.
Common Back-End Programming Languages include:
• Python
• Ruby
• Java
• PHP
These languages help developers create the functionality that makes websites
interactive and responsive to users’ actions.

Web Hosting and Deployment

This is the process that is followed after development has finished (which includes
testing and adding security measures). Websites need to be hosted on a web server so
that a user can access the content from their browser over the internet. Web hosting
services provide the server space for the website content and resources to be stored on,
allowing the website to run.
Deployment involves uploading the files and resources for the website to the hosting
servers, then configuring them so that they run successfully in a browser on the internet.

Activity 5.4

1. List at least four (4) browsers you know.

7
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

2. State what you used the browser for.

3. Explain why the browser was able to function based on your understanding
of front-end and back-end development.
4. Share your response with your peers using a PowerPoint presentation.

You may have noticed that anytime you type a website address like (www.ges.gov.gh)
into a browser, the browser leads you to the website.
Web browsers are like cars that take you to a specific location (like the school park).
The URL (Uniform Resource Locator) is the address of that specific location. Every
website has its own unique URL (meaning no two or more websites can use the same
address/URL).

Accessing the Website

Each website has a unique URL (short for Uniform Resource Locator), commonly
called its web address. The URL tells your browser where to go on the internet. When
you type a URL into the browser’s address bar and press Enter on your keyboard, the
browser will load the page associated with that URL. A browser is software which is
used to show web pages. See Figure 5:5 for examples of popular browsers.

Figure 5.5: Some popular browsers

Components Of Web Pages

Understanding the different parts of a web page helps you create websites that are easy
to navigate and enjoyable to use. These parts are called web elements. Let us explore
three important web elements: Headings, Menus and Links. We will use Ghana
Education Service (GES) website: www.ges.gov.gh as an example for our activities.
1. Headings are the titles or subtitles you see on a web page. They help organise
the information shown on the page, making it easier for users to understand the
structure of the content.
a. Different Sizes: Headings come in various sizes. The main heading is larger,
while subheadings are smaller.
b. Visual Clarity: Larger headings stand out, making it easier for users to scan
the page and find what they are looking for.

8
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Importance of Headings
Headings guide users through the content. They break up the text into sections, so
users can quickly locate the information they need without getting lost.

Activity 5.5

1. Open your web browser and go to www.ges.gov.gh

2. Look at the homepage and identify at least three headings.
3. Note the size and placement of each identified heading.
4. Share with your peers how the headings help organise the information on the
page.

2. Menus, also known as navigation bars, are lists of links that help users move
around the website. They are usually found at the top or down the side of the page.
Importance of Menus
Menus provide a consistent way for users to explore the website. They make it
easy to find the information you need without getting lost.

Activity 5.6

1. Visit the website www.ges.gov.gh

2. Find the main menu or navigation bar on the homepage.
3. Click on different menu items.
4. Observe how the menu helps you find various sections of the website.
5. If the menu has dropdown options, hover over the main links to see
additional links.
6. Explore these dropdown menus to see what extra information they provide.
7. Share your finding on how the menu helped you navigate the website with
your peer and discuss.

3. Links, also known as hyperlinks, are clickable elements on the web page that
connect to other parts of the website. They allow the user to navigate between the
different pages of the website or between different sections within the same page
(internal hyperlinks). Links can also direct the user to a different website (external

9
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

hyperlinks). Hyperlinks within a website can be either text-based or represented

by images.
We will learn more about internal and external hyperlinks as we move through
this course.

Other Relevant Elements

1. Headers/Footers
The header and footer are typically at the top and bottom of the web page. They
tend to be the same across all web pages and provide a consistent style throughout.
The header typically contains the websites logo, title and navigation/menu, and
the footer typically contains the websites contact information, copyright details
and links to important pages such as the privacy policy.
2. Forms
These enable the user to interact with the website by entering information,
making selections or uploading files. The data can be submitted for processing by
the back-end.
3. Buttons
These provide interactive elements to the user; they trigger actions or events when
clicked. Examples include navigating to a different page and pressing the submit
button at the end of a form. Buttons typically trigger a function in the back-end
code that completes a specific processing action.
4. Audio/Video
Audio and video elements can be included in a web page and can be used to
present engaging content to enhance the overall user experience.
5. Web Widgets
These are small standalone elements that can be included in a web page to provide
specific functionality for example:
a. Calendar widgets: displaying a calendar view of events of appointments.
b. Social media widgets: displaying updates, feeds or recent posts from social
media accounts.
c. Website search widgets: providing search functionality across the whole
website, making it easier for users to find what they are looking for. These are
particularly useful for content-heavy websites such as news sites.
d. Digital clock widget: display a digital clock.
e. Weather widget: displays weather updates and forecasts for a given location.
Widgets can save developers having to code features and functionality from
scratch, providing reusable elements that can be easily included into any web
page. They can aid in making the website more engaging to the users.

10
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

ROLE OF WEB DESIGNERS

Web designers are in charge of how a website looks and how easy it is to use. They
decide things like the layout, colours, images, and fonts of a site. Web designers use
a company’s brand identity to ensure the website matches its style. They can either
create brand new websites or make changes to existing ones.
While web designers come up with the idea for how the website should look, web
developers are the ones who actually build it by writing the code. Both front-end (what
you see) and back-end (behind the scenes) parts of a website are created by developers.
One important part of designing a website is creating a web outline plan, which is a
basic guide for how the site will be structured. If there is no dedicated web designer,
sometimes a web developer will create the web outline plan.

What is a Web Outline Plan?

A website outline plan, or web outline, is a detailed guide that shows how a website
will be organised before it is created. It acts as a blueprint for the site, helping to plan its
structure, content, and how it will work. Developing a web outline is usually a process
that might need to be repeated to improve it, especially after testing or receiving
feedback. For instance, changes might be made to the Home page based on how users
interact with it. The first step in making this plan usually starts with what the client
and web development team have agreed on as to how the website should look and do.

General Guidelines in Developing a Web Outline Plan

1. Identify website’s goals and target audience: Before creating a website, it is important
to identify its goals and who its users will be (the people who will use it). The
goals might be to attract more traffic (visitors) or increase online sales.
2. Create a user persona: A helpful step is to create a user persona. This is a fictional
character that represents the typical person who will visit the website. The user
persona helps in making decisions about what content to include and how the
website should look. It is like imagining the kind of users who would access the
website and designing it to meet their needs. Figure 5.6 gives one possible template
that can be used when creating a user persona.

11
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Figure 5.6 User Persona

3. Categorise the information: Group the website content into related categories and
subcategories. Consider the main topics or sections the website will include. This
will help determine the number and names of the main pages and subpages.
4. Create a sitemap: This will show the basic structure and organisation of a website.
You will find explanations and examples later.
5. Create a content outline: A content outline is a detailed plan that shows what
each page of a website will include. It lists all the sections and features needed
for the website, just like a sitemap but more detailed. You can make this outline
as a graphic, which shows how everything is organised, or as a simple list. For
example, you might see a website’s navigation bar as a graphic (Figures 5.7 and
5.8), and another website’s Home page layout as a list (Figure 5.9). Both ways help
you see and organise the website’s content before building it.

Figure 5.7: Home page of weignitegrowth.com

Figure 5.8: Home page of ignite

12
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Homepage
• Header with menu and logo
• Hero image with text and call to action (cta)
• Product Value Section
• Why the Production Content section
• Competitor Comparison Chart
• Feature Content Section
• Testimonials
• CTA Form
• Footer
Figure 5.9: Home page

Note that CTA/cta stands for call to action which is a prompt that encourages
visitors to take a desired action on a website. It is often designed in the form of a
button with a clear command or action phrase.
An example of a CTA is the “CHECK”, “SUBMIT”, “APPLY NOW” and
“CHECKOUT”, buttons on the images below:

Figure 5.10 : Example of a CTA

6. Wireframing and Prototyping: Wireframes and prototypes are like rough drafts for
web pages. They help both clients and developers see how a website will look and
how it will be arranged before it is fully built. We will learn more about how to
create and use these tools later.

13
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Activity 5.7

1. Think of a website you like and list two or three goals that the website might
have.
2. Imagine a typical visitor to your chosen website. Give them a name, age,
interests, and reasons for visiting the website.
3. Organise the content types into main categories and subcategories in your
notebook.
4. Share your findings with your peers and discuss.

Sitemap
What is a sitemap?
A sitemap is like a map for a website. It shows how different pages of the website
are connected and how they are organised. Search engines use sitemaps to find and
understand all the pages on a website more easily.
Think of a sitemap as a guide for building a website. It shows the basic layout of the
website without worrying about the fancy design. This helps web designers plan how
the website will look and how it will work.
There are two main types of sitemaps: visual and XML. For now, we will focus only on
visual sitemaps.

Examples of Visual Sitemaps

To make a website’s structure easier to understand, you can use a visual sitemap. This
is like a drawing that shows how different pages or sections of the website are linked
together.
A visual sitemap can be drawn in two main ways: vertically (up and down) or horizontally
(side to side). For simplicity, we will focus on horizontal diagrams. You can create this
diagram with pen and paper, in Microsoft Word, or with special software designed for
making these kinds of diagrams.
Designers generally recommend that a website should not have more than four levels
of pages, as if a website is too complicated, with too many layers or hard-to-find links,
it can be frustrating for users. The goal is to make sure that all of the important pages
are easy to access from the main menu or other links on the site.

Example 1
See Figure 5.6 for an example of a horizonal sitemap with two levels drawn using
Microsoft Word. It consists of a home page with a navigation bar (indicated in this
example by shading) that gives clear links to four main pages.

14
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

The BBC Bitesize page has a link to a sub-page (Quiz page).

Figure 5.11: Sitemap example 1

Example 2
Barefoot is a business that sells shoes in Tamale. The website being developed for this
business should have a homepage and three linked multimedia pages of the shoes currently
on sale. These three pages (Men, Women and Children) should be navigated backwards
and forwards. A link should exist to the www.howtomeasure.co.uk website from the home
page.
A design of a single-level visual sitemap for Barefoot’s website, created manually, is
shown is figure 5.7. Note that the arrow to the external link is in one direction only, this
indicates that there is no link from www.howtomeasure.co.uk back to the Barefoot’s
website.
The navigation bar is not indicated but is obvious in this case, and has links to three
pages: Men, Women and Children.

Figure 5.12: Sitemap example 2

Example 3
Digital Centre, an IT training company in Wa, is developing a website for their customers
about web development. A horizontal navigation bar will be used with links to three
pages: Content & Structure, Styling, and Interactivity. Customers should be able to access
further pages to learn about analysing or implementing the code for each of these three
elements of web development.

15
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Figure 5.13: Sitemap example 3

A design of a multi-level visual sitemap for the Digital Centre’s website created in
Microsoft Word is shown in Figure 5:8. A dotted line is sometimes used to indicate the
navigation bar. In this example and in example 1, the navigation bar is indicated by
shading.

Activity 5.8 (building on Activity 5.7)

1. Using paper or a digital tool, sketch a simple sitemap for your website in
activity 64. Include the main pages, navigation bar and any subpages.
2. Choose the Homepage from your sitemap and list all the sections and
features that will appear on this page.
3. Draw a simple wireframe of the homepage, placing each component in its
designated spot.
4. Develop three CTAs (call to actions) for your website’s homepage. Consider
their placement and wording.
5. Share your work with your facilitator for review.

Activity 5.9

1. A1 Bakery is a chain of bakery shops in Ghana. There is a need for a new

website to be developed for this business. This website should have a home
page and three linked multimedia pages of the products that the bakery
currently sells. These three pages (Breads, Pastries, and Cakes) should be
navigated backwards and forwards from the home page.
Create a single level /top-level visual sitemap for this website.
2. Additionally, the owner of A1 Bakery wants the customers to be able to
access a further page on the website with an order form for a celebration
cake.

16
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Amend the sitemap from (a) to include this page.

Next steps
Content creation: The content creators make or gather content for different parts of
the website and ensure that this content aligns with the website’s goals and that it is
engaging for the visitors. For example, a video editor may be commissioned to produce
a promotional video for a university website. Copyright needs to be considered when
making and gathering content for a website.

Activity 5.10 (Building on Activities 5.8 and 5.9)

1. Highlight the key contents on your chosen website.

2. Suggest alternative content which may enhance the websites’ goal (if
applicable).
3. Have you identified any copyright issue on your chosen website? If yes, how
can you correct it?
4. Share your response with peers in the class using PowerPoint slides.

Development and testing: Web developers will use the web outline plan to code and test
the website. Testers can use the web outline and sitemap, as they adopt the role of the
user personas as part of usability testing, following the structure of the website to test
that it works as expected.
Deployment and launch: This is where the developer will set up hosting, configure
the domain, and deploy the website to a live server. They will conduct final checks to
ensure all elements, functionality, and links work correctly. They will then create a
backup and have a plan for ongoing maintenance and updates for the website.
Analytics and monitoring: This the stage where the developers will set up tools to see
how users are using the website. This includes how many people visit, what they do
on the site, and how well the site meets its goals. Developers will regularly check the
collected data to monitor and understand what is happening on the website. They will
then use the data to find out what’s working well and what needs fixing, as well as
make any improvements as necessary. This helps make the website better, easier to use,
and more effective in reaching its goals.

Activity 5.11

1. In your own words, explain the following in your jotter:

a. Development and testing.
b. Development and launching.

17
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

c. Analytics and monitoring.

2. Share your responses with your colleagues.

Conclusion
A web outline plan is like a detailed map for building a website. It shows how the website
will be organised, including the main sections, sub-sections, and how everything
will link together. This plan helps make sure the website’s content is easy to find and
understand. It also guides the team creating the website, including designers and
content writers, to make sure everything fits together well. Good planning is important
because it helps make the website easy to use, saves time and money, and can help the
site perform better in search engine results.
Hello learner, we saw in our previous learning that one of the general guidelines in
developing a web outline plan is wireframing and prototyping, our focus will be on
them in this learning.
Let us look at them now!

Activity 5.12

Now, imagine you are building a house,

1. What is the first thing that you would do?
2. Sketch the layout of the house (Hint: Think about where each room and
auxiliary would go).
3. How does this relate to wireframes in computing?
4. Share your responses with your peers and facilitator in the classroom for
discussion.
The first thing you would do is to create a blueprint or a sketch that shows the
structure of the house. This is like a wireframe in computing, which is a basic
visual guide to the layout (structure) of a website (how the website would look
like).

18
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

WIREFRAMES

What are wireframes?

Wireframes are simple drawings that show how a webpage will be arranged. They are
like a rough plan that shows what information should be on the webpage and where
everything should go. A good wireframe should clearly show:
1. navigational links.
2. text areas.
3. media used (including file format).
4. position and type of hyperlinks on a page.
Wireframes are basic designs that focus on where things will be placed on a webpage.
They use simple shapes and shades of grey to show where content and buttons will go,
without using distractions such as colours, pictures, or detailed images. This helps to
focus on how the webpage will work, not how it will look. Figure 5.14 and Figure 5.15
show some examples of wireframes.

Figure 5.14: Wireframe for a gym website

19
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Figure 5.15: Wireframe for a mobile App

Boxes with an ‘X’ are used as placeholders to show where images will go. For videos, a
plain box with a play button or controls in the middle is used, and audio placeholders
show media controls. The names of media files should also be written.
Text areas are shown with horizontal lines. Sometimes, these lines are replaced by a
short summary or sample text. Headings are added to help make the layout easier to
understand.
Links are shown in a different colour and are labelled. Wireframes may also have notes,
called annotations, that give design details (specifications) like background colours,
font styles, and the sizes of images.

How to Create a wireframe?

A wireframe can be made by hand (manually) using a pen/pencil and paper, or it
can be created electronically using online or installed software tools that come with
templates to help design the layout. Some online platforms to draw wireframes include
Wireframe.cc and Moqups.com. Digital tools include Microsoft Word, Adobe XD,
Figma, Sketch, and Balsamiq, as well as Axure RP. A screenshot of a digital wireframe
template is shown in Figure 5.16.

20
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

Figure 5.16: Digital wireframe template

Activity 5.13

With your peers, read the design specification below and perform the activity that
follows.
DM Photography is a business that takes photographs of family events and
celebrations. This includes birthdays and weddings, as well as photographs of
other special occasions.
The business wants a website containing the following elements:
1. the title ‘Pretty Pictures’.
2. a short statement about the business’s quality assurance to customers.
3. separate pages for each category of photograph package: birthday, wedding
and other special occasions.
4. a ‘Recommend a Friend’ page that gives details on how to register for rewards
for customers and their friends.
5. at least one photograph on each page showing previous examples of images
taken.
6. a video on the home page showing the business owner talking about their
three packages on offer.
7. an external link on the ‘Recommend a Friend’ page to ‘The International
Photography Awards’ website (www.tipa.com),GES (https://ges.gov.gh/) and
T-TELL (https://t-tel.org/) websites.
Perform the following tasks;
1. Design a top-level visual sitemap for this website.
2. Draw a wireframe for each page manually and electronically.

21
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

3. Share your responses to your peers in class using SlideShare.

Activity 5.14

Alhaj Habib and Sons’ BikeStore is a charity bike shop. They need a single page
website to encourage donations of bikes and to advertise what bikes they have in
stock.
This web page should have:
1. the charity logo (PedalPower.jpg) and name at the very top of the page.
2. a heading with the title “We need your old bikes!”
3. a graphic of a bike (bike.png).
4. a subheading entitled “What we need”.
5. a numbered list detailing the top 5 types of bikes the charity shop would like
donated.
6. a subheading titled “Our current stock”.
7. a video showing the current stock (ppstock.mp4).
8. a page background of pale blue/cyan.
9. other design specifications are at the discretion of the designer.
Perform the following tasks;
1. Draw a wireframe for this page either manually or electronically.
2. Show your design to your facilitator for review.

Activity 5.15

1. Using a pen/pencil, draw a wireframe for the following individually in your

notebook:
a. A web page about your family.
b. A web page about your favourite animal.
c. A Home page of a website about Ghana.
2. Share your drawing with your facilitator for review.

Activity 5.16

1. Individually, using the shapes in Microsoft Word or an online wireframing

tool, create a wireframe for the following:
a. A web page about your family.
b. A web page about your favourite animal.

22
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

c. A Home page of a website about Ghana.

2. Share your drawings with your peers and facilitator.

Prototypes
Compare the wireframe of your house to building a small model of the house to test
the design and see how things will function. This is like a prototype, where the basic
interactivity and functionality are tested.

What is a website prototype?

A website prototype is a visual representation (model) of a website design used to
show how it works and how users can interact with it. The main difference between a
wireframe and a low-fidelity prototype is that the prototype allows you to interact with
the pages, click on buttons and test how the website functions.
A low-fidelity prototype builds on wireframes and is a simple way to turn basic ideas
from the wireframes into a testable product. It usually includes more detail than a
wireframe, allowing users to interact with buttons and links to test how the website
will work:
1. text areas might include the full text that will be on the website.
2. image and video areas might show hand-drawn versions of the final images or
videos.
A low-fidelity prototype can be made quickly and cheaply by hand using pen/pencil
and paper. It can also be created electronically with presentation software or specialised
online/installed tools that provide templates.

Figure 5.17: Testing with a low-fidelity prototype

When using paper-based prototypes, you need two people to show how the website
works. One person acts as the user, pretending to click on ‘hyperlinks’ on the page,

23
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

while the other person plays the role of the computer browser, moving from page to
page or section to section. At this stage, you will use the user personas you created
earlier to guide the demonstration.

Figure 5.16: Low-fidelity and high-fidelity prototype

A high-fidelity prototype is a very detailed and interactive version of a website. It

closely resembles how the final website will look and work, with many of the features
and functions already included. An example is shown in Figure 5.16.

Advantages of Using Wireframes and Prototypes?

Showing to a client the wireframes and both low-fidelity and high-fidelity prototypes
before starting more detailed work can be very useful. It helps the client make sure that
the site includes all the necessary functions and information. If you only show a final
design, the client might focus on how the site looks and not notice any functionality
issues until the site is built. At which point, it can be difficult to go back and fix.
To summarise, some of the main advantages of using wireframes and prototypes in
web design are:
i. Identifying design flaws early on in the development process.
ii. Reducing the costs of the website development.
iii. Receiving feedback from the client.
iv. Improving communication between the client and those creating the website.
v. Testing functionality and interactivity using prototypes.

24
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

vi. Providing a guide to the web developers on how the website they are tasked to
create should look and behave.

Activity 5.17

Individually, do the following:

1. Explain what a prototype is and why it is important. Use the house model
analogy to illustrate the concept.
2. Think of a simple website. What is its purpose, target audience, and key
features?
3. Sketch the main pages of the website on paper. They should include:
a. The homepage.
b. Key pages (e.g., About, Contact, Blog).
c. Navigation elements (e.g. menu, links).
4. Show the layout, content placement, and how users will navigate between
pages.
5. Use digital tools if available or continue with paper sketches to create a low-
fidelity prototype. It should include:
a. Basic page layout and structure.
b. Main navigation elements (menu, links).
c. Key content areas (header, footer, main sections).
6. Present your website prototypes to the class. The presentation should include:
a. The purpose of your website.
b. The main features and content areas.
c. How users will interact with the site.
7. Discuss what you learned from the prototyping process by answering the
following questions:
a. What aspects of website design were challenging?
b. How did feedback from peers help to refine your design?
c. What improvements would you make based on the feedback?

Activity 5.18

1. With your peers, prepare a PowerPoint slide of answers to the following

questions:
a. What is the difference between a wireframe and a prototype in web design
and how could both be used when designing a website for your school?
b. Where do wireframes and prototypes fit in a web outline plan?

25
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

c. What happens in web development after wireframes and prototypes have

been made?
2. Present your answers to the class.

26
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

EXTENDED READING 5.1

1. Explore other websites and identify their headings and menus. Notice how
different sites use these elements to enhance the user experience.
2. Use simple web design tools like Google Drawings or Canva to create a digital
version of your web page layout.
3. Write a short guide on website accessibility. Consider a variety of potential website
users in your guide, including those who are visually impaired, hard of hearing,
colour-blind or elderly.

EXTENDED READING 5.2

1. Robbins J. N. (2018). A Beginner’s Guide to HTML, CSS, JavaScript, and Web
Graphics. Published by O’Reilly Media, Inc., page 3 – 46.
2. Robbins J. N. (2012). Learning Web Design: A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. Published by O’Reilly Media, Page 10 – 25.
3. Osborn J., Smith J, and AGI Training Team (2011). Web Design with HTML and
CSS Digital Classroom. Published by Wiley Publishing, Inc. ISBN: 978-0-470-
58360-9. Pages 1 – 34.
4. Research what is meant by an XML sitemap. Create a report on your findings.
Include a description of how it differs from a visual sitemap and how search
engines use XML sitemaps.
5. Investigate the following and create a presentation summarising your findings:
a. The various techniques used in website usability testing such as the think-
aloud protocol, co-discovery learning, and eye tracking.
b. Other types of website testing such as compatibility testing.

EXTENDED READING 5.3

• Click here or https://www.youtube.com/watch?v=qpH7-KFWZRI to watch how
wireframing and prototyping are done.
• Osborn J., Smith J, and AGI Training Team (2011). Web Design with HTML and
CSS Digital Classroom. Published by Wiley Publishing, Inc. ISBN: 978-0-470-
58360-9. Pages 1 – 34.
• Robbins J. N. (2012). Learning Web Design: A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. Published by O’Reilly Media, Page 10 – 25.
• Robbins J. N. (2018). A Beginner’s Guide to HTML, CSS, JavaScript, and Web
Graphics. Published by O’Reilly Media, Inc., page 3 – 46.
• Use the link or https://flatironschool.com/blog/wireframing-and-prototyping-in-
product-design/ to find out more about wireframing and prototyping.

27
Review Questions

Review Questions 5.1

1. All the web pages in a bank’s website contain a footer with a number of links.
Describe two items that would be expected to be linked from the footer area of this
website
2. A website is being developed that will be used by runners to register online for
an upcoming marathon. What components must this website have? Explain your
reasoning.
3. A business having a social media presence can benefit both the business and
its customers. Describe how a social media presence can be incorporated into a
website

Review Questions 5.2

1. Mr. Gyampo, a computer science teacher, has created a website about AI (artificial
intelligence).
The website has a home page and linked pages on four areas of AI: NLP, computer
vision, robotics and machine learning. All pages can be navigated backwards and
forwards. The file structure of the website is as shown below. There is a link from
the homepage (index. html) to the external website – www.google.ai.
Draw the navigational structure for this website.
CSS

Media

JS

index.html

NLP.html

computer_vision.html

robotics.html

machine_learning.html

virtual_assistants.html

chatbots.html

28
2. Describe what is meant by the following:
a. Website structure
b. A hierarchical navigation website structure
3. With respect to web design, give one difference between a sitemap and a content
outline
4. Imagine that you are the owner of a new gym, and you are working with a web
designer to create a website for this business. Create a slideshow that will show
the following for your website:
a. At least three goals
b. Three different user personas
c. A multi-level visual sitemap
d. A list of the items that you wish to appear on the Home page

Review Questions 5.3

1. Explain how presenting wireframes to a client early in development can prevent
future functional issues with a website.
2. Evaluate how each of the main elements of a web outline plan can impact the
effectiveness of a website.
3. Why do web designers seek feedback from the client on wireframes and prototypes?

29
Answers to Review Questions

Answers to Review Questions 5.1

1. For a bank’s website, the footer typically contains important links that are easily
accessible to users. Two items that would be expected to be linked in the footer
are:
a. Privacy Policy: This explains how the bank handles and protects the personal
data of its users, ensuring transparency regarding data security.
b. Contact Information: A link to the bank’s contact details, including phone
numbers, email addresses, and branch locations, helping customers reach the
bank for support or inquiries.
2.
a. Registration Form: To allow runners to input their personal details such as
name, age, contact information, and running category. This is essential for
keeping track of participants.
b. Payment Gateway: For runners to securely pay any registration fees. This
component is necessary to handle online transactions.
c. Confirmation Page/Email: Once registration is complete, the website
should provide a confirmation page or send an email to confirm the runner’s
successful registration. This ensures the runner knows their registration has
been accepted.
d. Terms and Conditions: A section where runners can agree to the rules of the
marathon. It is necessary for legal and organisational purposes.
e. User Login System: To allow runners to log in and update their details if
necessary. This helps them manage their own information after registration.
Reason
These components are critical for the website to function properly, ensuring that
registration is smooth and that participants receive all the information they need.
3. A social media presence can be incorporated into a website by adding links or
buttons that direct users to the business’s social media accounts, such as Facebook,
Twitter, or Instagram. These buttons allow customers to easily follow, like, or
share the business’s posts. The website can also display live social media feeds to
show recent updates or customer interactions, this would be using a standalone
widget. This helps the business connect with more people and gives customers a
way to stay informed and engage with the company directly through social media
platforms.

30
Answers to Review Questions 5.2
1.

2.
a. Website structure refers to how a website is organised and arranged, including
how different pages are linked together. It helps users and search engines navigate
the site easily, making sure information is presented in a clear and logical way,
such as grouping related content under sections or categories.
b. A hierarchical navigation website structure means that the website is organised
in a tree-like format, where pages are arranged from general to specific. The
homepage is at the top, and other sections or subpages branch out underneath it,
helping users easily move from broad topics to more detailed information.
3. In web design, a sitemap shows the structure and layout of a website’s pages,
while a content outline focuses on the specific information and details that will be
included on each page. The sitemap is more about the page arrangement, whereas
the content outline deals with what each page will contain.
4. Click on this link or scan the QR code for solution.

Answers to Review Questions 5.3

1. Presenting wireframes to a client early in the development of a website helps
prevent future problems by allowing the client to see the layout and design before
the coding starts. The client can give feedback on the structure, navigation, and
overall appearance, making sure it meets their expectations. If there are issues or
misunderstandings, they can be fixed at this early stage, saving costs, time and
effort later. This also helps in identifying any missing features or design changes,
ensuring the final product functions as expected.

31
2. A web outline plan includes key elements like the structure, content organisation,
and navigation of a website. Each of these elements play a crucial role in how well
a website functions:
a. Structure: This is how the website is organised. A clear and simple structure
helps users find information quickly and easily, making the website more user-
friendly. If the structure is confusing, users may struggle to navigate and might
leave the site.
b. Content Organisation: This involves arranging information logically. Good
content organisation ensures that users can easily understand the information
provided, making it more likely they will stay on the website and find what
they need.
c. Navigation: Easy-to-use navigation menus help visitors move around the
website smoothly. Poor navigation can frustrate users, leading them to leave
the website without finding what they need or exploring further.
3. Web designers seek feedback from the client on wireframes and prototypes to
ensure the design meets the client’s expectations and requirements before moving
forward. By getting feedback early, designers can make necessary changes to the
layout, features, and overall look, saving time and avoiding major revisions later
in the process. This also ensures that the final product is user-friendly and aligns
with the client’s vision.

32
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

REFERENCES
• Computing – Teacher Manual (2024), Year One Book 2 for SHS, SHTS, STEM
curriculum – pages 96 – 130.
• NaCCA (2023) Computing curriculum for Secondary Education (SHS1-3) pages
50 – 53.
• Osborn J., Smith J, and AGI Training Team (2011). Web Design with HTML and
CSS Digital Classroom. Published by Wiley Publishing, Inc. ISBN: 978-0-470-
58360-9. Pages 1 – 34.
• Robbins J. N. (2012). Learning Web Design: A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. Published by O’Reilly Media, Page 10 – 25.
• Robbins J. N. (2018). A Beginner’s Guide to HTML, CSS, JavaScript, and Web
Graphics. Published by O’Reilly Media, Inc., page 3 – 46.
• The Interaction Design Foundation (2015). UX Tools: Wireframing and Prototyping
Tools retrieved from https://www.interaction-design.org/literature/article/ux-
tools-wireframing-and-prototyping-tools?srsltid=AfmBOoqCI4vkBjz1dPTnsIUey
GtouprMgoyz-IQQjpEaXNNtnjL-RXPD on 17/09/2024.

GLOSSARY
• Database: A digital system for storing and organizing data.
• Moqups: A tool for creating rough sketches of websites or apps.
• Model: A simple representation of a system or process.
• Null Pointer: A variable that does not point to any data or memory location.
• Programming: Writing a set of instructions (program) for computers to perform
tasks.

33
SECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT

ACKNOWLEDGEMENTS

List of Contributors
Names Institution

Dordoe Senyo Raphael Ziavi SHTS

Eric Asomani Asante Naylor SDA School

Miheso Daniel Wa SHTS

Osei Amankwa Gyampo Kumasi Wesley Girls High School

34