Empowerment

Technologies
QUARTER 1
MODULE

7 Collaborative Development of ICT Content

1erv
 Empowerment Technologies
Quarter 1 – Module 7: Collaborative Development of ICT Content

Republic Act 8293, Section 176 states that no copyright shall subsist in any work of the Government of
the Philippines. However, prior approval of the government agency or office wherein the work is created shall
be necessary for the exploitation of such work for a profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been exerted to locate
and seek permission to use these materials from their respective copyright owners. The publisher and authors do
not represent nor claim ownership over them.

EXPECTATIONS
Learning Competency
✓ evaluate the quality, value, and appropriateness of peers’ existing or previously developed
ICT content in relation to the theme or intended audience/viewer of an ICT project.
Learning Objectives
At the end of the learning period, the students shall have:
▪ recognize the difference between a website and a web page;
▪ explain the concepts behind web design principles and elements as a tool for
communication;
▪ identify the different parts of a website; and
▪ design a personal website that includes the basic parts of a website.

LESSON

A web page is a document created for the World Wide Web (www) that can be accessed
via a web browser such as Firefox, Google Chrome, Microsoft Edge, or Apple’s Safari. It may
include many types of data or resources that you can see, hear, and interact with. A web
page could include text, graphics, sound, video, and animation.
You may ask, how is a web page different from a website? A web page is one of many
files that make up a website; an example is a home page or a contact page of a particular
site. A website on the other hand is a collection of web pages coded in HTML that are linked
to each other and pages on other sites. Examples of these websites are facebook.com,
youtube.com, google.com and gmanetwork.com. Remember, all websites are made
accessible through the use of the Internet.
There is many software available which you can use to create a web page. Back in
the day, to create a decent website, you would have to learn HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets). Today, we use the WYSIWYG (What You See
Is What You Get) editor. This means that all you write, insert, draw, put, rearrange, and
everything you do on a page is what the audience will see.
In this particular lesson, you will be creating your website. But before we proceed to
the creation of such, there are important elements and principles that we need to follow
when creating a website.

2erv
 Basic Web Design Principles and Elements
Web design is a concept where websites are planned, created, updated, and
maintained. A good website design allows the user to understand the message, contents,
and ideas in the most convenient way.

Web Design Elements

To create an attractive, technically sound, and effective web design, elements must
be organized in a manner that is pleasing to the eye, well-coordinated, and that maintains
a good balance between elements.
1. Text – font family and type must be chosen correctly, simply, and in a readable
format.
2. Graphics/Illustrations – must be of high quality and the text and other elements
must be well organized.
3. Shapes – may be used to exemplify an enclosed boundary in the web page’s overall
layout. Any type, such as normal geometric or abstract shape, that can be positioned
that match the user’s design can be placed. You should play with whatever shape
you consider is appropriate.
4. Background – or texture will help provide your website with a feeling of a surface
underneath. To make it look more attractive, this feature must be used to bring out
the content offered on the website.
5. Color – must blend well and go with the elements on the page. It will help to achieve
this effect by using bright and bold colors that attract but don’t disrupt too much.
6. Video/Audio – can help viewers understand quickly what you are teaching or selling.
7. Links – will enable users to connect to another site or page that is related to the
content of your page or site.

Web Design Principles

A good website design should be attractive, functional, responsive and useful. Follow
the basic principles of effective web design to create a functional and impressive website.
1. Portable Design – website design must be portable and available to end-users who
have various browsers, operating systems, and computer platforms. Often check
compatibility by viewing your sites through other browsers.
2. Design for Low Bandwidth – website design must be available at different speeds.
Avoid large graphics or animations because if downloading is slow, users will leave
the site.
3. Direction – define the order of importance of the different elements and position them
in a sequence where the eye moves and perceive the objects it sees. Design and
structure should be consistent.
4. Accessibility – a visitor must be able to quickly access the information when he/she
enters the website. This means that the text needs to be legible/readable, the colors
have to establish visual harmony and balance, and the pictures should be of high
quality.
5. White Spaces – use white spaces intentionally as breathing space in your design.
White spaces can also be used to indicate the division of content.
6. Simplify – the more choices you add to your site, the more difficult it is for a visitor
to make a decision and more time is required to browse through them. Simplify your
web page by removing distracting options and clutter.
7. Convenience – to allow users to make an action, the click buttons should be
accessible and strategically placed on the web page.
8. Regular testing – the website should be periodically upgraded, updated, and reviewed
so that bugs can be fixed quickly. This includes the hyperlinks and the loading of
images and other elements on the page. Visitors will not stick around or proceed if
they encounter problems in loading or viewing.

3erv
Parts of a Website
1. The Header
A website’s header or banner is the consistent section at the top of the site with the
logo and navigation menu in it. It is a zone at the top of the page that stays constant and
visible as visitors click around your site.

Figure 1: http://www.ocamposfinejewelry.com/
A header might include:

✓ Logo ✓ Phone number ✓ Search box

✓ Navigation menu ✓ Buttons ✓ Tagline
✓ Address ✓ Social media icons ✓ Login or My Account link

2. The Menu System

These are the hyperlinks at the top of the page to help you find what you’re searching
for. Typically, the navigation links are in or just below the header for convenient access. For
certain situations, putting the navigation bar vertically on the left side of each page might
be sensible.

4erv
 The navigation bar/menu tab allows the visitors to search other website links or
sites. It appears on all pages within a website for more easy navigation.
Common menu found on a website:
a. Home - A home page is a web page that serves as the starting point of the website.
This is usually the main web page that a user can see while heading to a website
from a search engine, and it may also serve as a landing page for attracting web
users.
b. About - The primary purpose of your site's About Us page is to provide
information about your website and what it can do or deliver.
c. Contact - A contact page is a common web page on a website that allows visitors
to contact the organization or individual providing the website.
Menus found in a website varies depending on the nature of the
organization or business.
3. The Content Area
This is where the main content of the web page is positioned. Content can be in
several different forms such as text, images, video and Flash movies. Sound can also
be inserted in a web page such as background music. Website content is the
information your visitors consume.

4. Sidebar - A sidebar is a website region used to view information that is not part of
the main content of the page. A sidebar can include an opt-in, call to action, links to
other parts of the website links to popular or recent blog posts, ads, social media
links, or a brief “About” paragraph for context.

Figure 2: http://www.arbor-restaurant.co.uk/

5erv
5. The Footer
A footer serves the same function as the header — it’s a region on a website that’s
constant from page to page — except a footer is at the bottom of a page, rather than at the
top. The following information may be included in the footer: copyright information, contact
details, a map, links, opt-ins, social icons, a search box, and many more.

Figure 3: https://www.bentley.edu/

ACTIVITIES

Activity: Personal Website Design

Draw a simple design of your website. The design should be able to include the 5 essential parts of a
website discussed in this module. Each link included in the website menu should be designed/drawn separately.
Use short bond paper/s to draw your design. You may use any drawing or coloring materials. The criteria are as
follows:
Criteria 20 15 12 10
All the essential parts One essential Two essential Three or more
Parts of the of the website are part of the parts of the essential parts of
Website present. website is website are the website are
missing. missing. missing.
The website has an The web pages The web pages The web pages
outstandingly have an have a usable are cluttered
appealing and usable appealing and layout but may looking or
layout. All essential usable layout. All appear boring. confusing. It is
elements are easy to essential Many of the often difficult to
Layout
find. White space, elements are essential locate important
design elements easy to find. elements are elements.
and/or alignments are easy to find.
used to arrange
content effectively.

6erv
 WRAP-UP
1. State the difference between a website and a web page.
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
2. What are the elements involved in designing a website?
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
3. Identify the principles included in designing a website.
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

VALUING

Why do you think there is a need for us to study basic web design principles and
elements?

Place your answer here.

_____________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
______________________________.

References
Villarroya, M. (2020). Quarter 1 – Module 16: Collaborative Development of ICT Content (Part 1) [PDF
Document]. Department of Education - Schools Division of Pasig City.

7erv
 WEEKLY School: GENERAL SANTOS CITY NATIONAL HIGH SCHOOL Quarter: Quarter 1
HOME
LEARNING Teacher: HUMSS-1D Week: Week 7
PLAN Subject: Empowerment Technologies Date: October 25-29, 2021

Day and Learning Learning

Learning Tasks Mode of Delivery
Time Area Competency
6:00–6:45 Wake up, eat breakfast and get ready for the scheduled lessons.
6:45-7:30 Doing other activities before the start of the lesson. (Exercising, taking a bath, changing clothes)
M-W-F Specific Activities For Printed Modular: Learners or
Empowerment evaluate the quality, At the end of the learning period, the students shall have: Parents/guardians will hand in the
or Technologies value, and 1. recognize the difference between a website and a web page; output, answer sheets or activity
(for the appropriateness of peer’s
existing or previously 2. explain the concepts behind web design principles and sheets to the school based on the date
T-TH Strand) elements as a tool for communication; and time scheduled.
developed ICT content
3. identify the different parts of a website; and
in relation to the theme
As 4. design a personal website that includes the basic parts of a For Digital Modular: Learners may
or intended audience/
reflected in viewer of an ICT website. upload/submit the output, answer
the class project Instructional Delivery sheets or activity sheets to the LMS
program. CS_ICT11/12-ICTPT- (e.g., Google Classroom or other
Ii-j-12 ▪ Use the SLM on familiarizing oneself, doing self-awareness online platforms) based on the date
activities and exploring oneself through the concept notes of
and time scheduled.
the lessons.
Assessment/Activities *As the learner/parent enter the school,
Answer/Do the following: strict implementation of the minimum health
o Activities protocols will be followed as prescribed by
o Wrap-Up the DOH and IATF.
o Valuing
Note: The teacher can communicate to
his/her learners and do oral questioning and
Note: Summative tests may be given every Thursday or Friday assessment to the learner for follow-up and
every other 2 weeks as the basis for written tasks. verification.
IPT may be given for performance tasks.

1erv