ACTIVITY-BASED LEARNING PLAN

TEACHER: MS. ELMA H. INSAIL DATE: JULY 17,18 2024

MS. ROSMIE A. JULHAN GRADE : 11
MS. SHIERALYN IDJIRAN SUBJECT: EMPOWERMENT
MR. ADZMIR A. TARANG TECHNOLOGIES

I. LESSON TITLE: The Current State of MATERIALS:

ICT Technologies, online system, POWERPOINT PRESENTATION
functions and platforms PEN AND PAPER
II. REFERENCE:
Bandahala, A.A. (2016) Empowerment
Technologies, DIWA LEARNING SYSTEM
INC. https://searchcio.techtarget.com

III. CONTENT STANDARDS: The learners demonstrate an understanding of: ICT in the
context of global communication for specific professional track
IV. PERFORMANCE STANDARDS: The learners shall be able to: at the end of the 2-week
period independently compose an insightful reflection paper on the nature of ICT in the
context of their lives, society, and professional tracks (Arts, Tech-Voc, Sports,
Academic)
V. LEARNING COMPETENCIES: The learners shall be able to: Compare and contrast
the nuances of varied online platforms, sites, and content to best achieve specific class
objectives or address situational challenges
SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN Compare and
contrast the nuances of varied online platforms, sites, and content to best achieve specific class
objectives or address situational challenges by: a. Enumerating online platforms and sites; b.
Identifying the uses and advantages of different platform and sites; and c. Differentiating the
various Social media platforms and sites.
VI. TIME ALLOTMENT: 1 week
VIII. INSTRUCTIONAL STRATEGIES
A. Pre-Lection (Activating Prior Knowledge)
We live in a connected world. The impact of information and communications technology (ICT)
can be seen in different facets of our society, such as economics, health, urban planning,
among others. Most notably, it has changed the way we communicate with others –
notwithstanding time difference, distance, and culture. *Observe the picture below and answer
the following questions:

Some common digital tools

1. Which of the items or icons in the image above are you familiar with? (At least 5 icons)
2. Which ones are you unfamiliar with?

B. Interactive Lecture (Focus Instruction- “I Do”)

1|Page
 Topic: Platforms and Website

What is Information?

What is communication?

What is Technology?

Information and Communication Technology (ICT)

ICT collectively refers to the technologies, both hardware and software, that enable humans to
communicate with one another. It deals with the use of technologies such as mobile phones,
telephone, and internet to locate, save, send and edit information.

What is computer?

2|Page
 Computer – an electronic device for storing and processing data, typically in binary form,
according to instructions given to it in a variable program.

WHAT IS INTERNET?

Internet – is the global system of interconnected computer networks that use the internet
protocol suite (TCIP/IP) to link billions of devices nationwide.

WHAT IS WORLD WIDE WEB or (WWW)

The World Wide Web (WWW) is the system that enables you to access hypertext documents
and other files over the internet. The technology was proposed by Tim Berners-Lee in 1989, in
which a database and interface will be implemented to associate links in readable documents.
In the previous system, documents are numbered with addresses that should be inputted to
retrieve the file.

Web Pages – is a hypertext document connected to the World Wide Web. It is a document that
is suitable for the World Wide Web.

Static Web page – is known as a flat page or stationary age in the sense that the page is ―as
is‖ and cannot be manipulated by the user.

3|Page
Dynamic Web page – web 2.0 is the evolution of web 1.0 by adding dynamic web pages. The
user is able to see web site differently than others e.g. social networking sites.
The different Online Platforms of World Wide Web:

1. Web 1.0 or Read-Only Web – refers to the first stage in the World Wide Web, which was
entirely made up of the Web pages connected by hyperlinks.

2. Web 2.0 or Read-and-Write Web – is the evolution of Web 1.0 by adding dynamic pages.
The user is able to see a web site differently than others.

Features of Web 2.0

1. Folksonomy

2. Rich User Experience

3. User Participation

4|Page
 4. Long Tail

5. Software as a services

6. Mass participation

3. Web 3.0 or Semantic Executing Web – aims to have machines (or servers) understand the
user‘s preferences to be able to deliver Web content.

Trends in ICT

1. Convergence – is the synergy of technological advancements to work on a similar goal

or task.

5|Page
 2. Social Media – the information can be in the form of ideas, pictures, videos, or anything
that you want to create and share will to the virtual communities. The information you
share will be the basis of the people to interact, share content and collaborate with you
and the large group of people.

TYPES OF SOCIAL MEDIA :

a. Social Networks – these are the sites that allows you to connect with other people with the
same interest or background.
E.g. Facebook and Google+

b. Bookmarking Sites – sites that allow you to store and manage links to various website and
resources. E.g. Pinterest

6|Page
c. Social News – sites that allows the users to post their own news items or links to other news
sources. E.g. Reddit and Digg

d. Media Sharing – sites that allow you to upload and share media content like images, music,
and video. E.g. Flickr, YouTube, and Instagram.

e. Microblogging – focus on the short updates from the user.

E.g. Twitter and Plurk

f. Blogs and Forums – allow user to post their content.

E.g. Blogger, WordPress and Tumblr.

7|Page
 3. Mobile Technologies – the popularity of smartphones and tablets has taken a major rise
over the years. This is largely because of the devices capability to do the tasks that were
originally found in PCs.

Mobile OS (OPERATING SYSTEM)

OS is the program that, after being initially loaded into the computer by a boot program,
manages all of the other application program in a computer.

 iOS – use in apple devices such as iPhone and iPad

 Android – an open source OS developed by Google.

 Blackberry OS – use the blackberry devices

 Windows phone OS – a closed source and proprietary operating

system developed by Microsoft.

 Symbiam – the original smartphone OS. Used by Nokia

devices

8|Page
  webOs – originally used in smartphone: now in smart TVs.

 Window Mobile – developed by Microsoft for smartphones and pocket

PCs.

4. Assistive Media – is a non-profit service designed to help people who have visual and
reading impairments.

5. Yahoo!, Gmail, HotmailCloud computing – distributed computing on internet or delivery

of computing service over the internet.

Three (3) Components:

1. Client computers – clients are the devices that the end user interact with cloud.

2. Distributed servers – often servers are geographically different places, but servers acts as if
they are working next to each other.

3. Datacenters – it is collection of servers where application is placed and is accessed via

internet.

9|Page
Content Management System (CMS) – allows one to publish, edit and manipulate, organize and
delete web content. It is commonly used in blogs, news websites, and online shopping.

Cloud Computing – is the delivery of computing services – servers, storage, database,

networking, software, analytics and more – over the internet.

Cloud Storage – is a service wherein files from users are stored online. The files are uploaded
by users and are received by a storage that hosts the service. Physical multiple storage devices
save the files that are uploaded and are waiting to be retrieve on the Web site.

Types of Clouds

1. Public Cloud – allows systems and services to be easily accessible to the general public.
2. Private Cloud – allows systems and services to be accessible within an organization.
3. Community Cloud – allows systems and services to be accessible by group of organizations.
4. Hybrid Cloud – is a mixture of public and private cloud.

Platforms
refers to the program created by developers that can be modified or reprogrammed by
outside users. Because of the development of different platforms and APIs, the convenience of
using online tools becomes popular. The inherent characteristic of online tools introduced
convenience and probability of developing contents even on-the-go. Furthermore, the content
being developed is stored in safe storage of a server that can be remotely accessed using
security provisions such as username and password.

Online Platforms is a based on technologies designed to run within an online environment and
provides interactive online services. Online platforms nowadays offer varied services which you
can use to develop your own ICT content. These online platforms currently include, but are not
limited to: presentation or visualization, cloud computing, social media, web page creation, file
management, and mapping.

Nature of Online Platform

10 | P a g e
The nature of online platforms introduced herein is categorized based from the services they
provide.

 Presentation or Visualization – this is an online platform that allows you to present and share
presentation, infographics, and videos with other people.

 Cloud Computing – this is a platform often referred to simply as ―The Cloud. In other words,
instead of using your computer‘s hard drive, you store and access your data and programs over
the internet.

 Google Drive – it is a cloud storage created by Google. It allows users to backup files in the
cloud, share files with collaborations, and access them anywhere. These files can either be
documents, spread sheets, and presentations. Google Drive includes Google Docs, Sheets and
Slides, an office suit that permits collaborative editing to documents, spread sheets,
presentations, drawing, forms, and more.

 Web Page Creation – this is an online platform that lets you build a web page that includes
colours, text, image, and often contain links to media such as video and audio. The platform
does not require any Web programming skill as they provide a drag and drop interface and free
hosting as well.

 File Management – this is an online platform that allows you to convert and manages files like
images, videos, documents, audio and more to other formats without downloading software tool.
 Mapping – this is an online platform that provides detailed information about geographical
regions and sites around the world. It allows for embedding of maps into proprietary sites.

The Application Programming Interface (API) is a set of programming protocol or rules on how
software elements should communicate and interact with one another.

API types and their functions are presented here:

1. Access API – this is type of API runs in a remote machine, server, or computer, and the
application is accessed remotely by a guest user application to draw data and services.

2. Plug-in API – most of the time, this API is used in the user end. Generally, different
developers create different applications that can be integrated or ―plugged in‖ to core
application and/or the GUI of these applications.

4. Runtime Environment – these APIs are platform for developing different applications,
wherein programs and application codes are evaluated and compiled in the said APIs.

C. Guided Practice (Group Activity- “We Do”)

GROUP YOURSELF INTO 7 MEMBERS AND DISCUSS ABOUT THE DIFFERENTS TYPE OF
SOCIAL MEDIA. CHOOSE 1 MEMBER TO ANSWER THE FOLLOWING:

1. In your perspective what is the most popular social media in your generation? Why?
2. What kind of information your generation needed?

D. Processing Students’ Response

What is the difference between platform and online platform?

11 | P a g e
 E. Independent Practice (“You Do”)
Direction: Identify the uses and advantages of different platforms and sites.
Platform and Sites Uses Advantages
1. Facebook
2. Messenger
3. Youtube
4. Wattpad
5. Google

F. Extended Classroom Activity Direction: Identify the uses and advantages of different
platforms and sites.

Directions: Make a reflection paper using an ICT platform or application of your choice (ex.
Facebook) to explain your journey of the learning process in making use of ICTs as an
empowerment tool. Refer to the guide questions below and write your answer on the space
provided. See rubric below for scoring.

Guide Questions:
1. How did this subject change the way you view ICT?
2. Are they tools to be used to achieve higher goals?
3. After going through the lessons and visiting online sites, reflect on how they are currently
being used. Do you agree or disagree with it?
4. Based on your reflection, do you have recommendations regarding ICT uses in the country?

ACTIVITY-BASED LEARNING PLAN

TEACHER: MS. ELMA H. INSAIL DATE:

MS. ROSMIE A. JULHAN GRADE : 11
MS. SHIERALYN IDJIRAN SUBJECT: EMPOWERMENT
MR. ADZMIR A. TARANG TECHNOLOGIES

12 | P a g e
 I. LESSON TITLE: Online safety, security, MATERIALS:
ethics, and etiquette POWERPOINT PRESENTATION
II. REFERENCE: Bandahala, A.A. (2016) PEN AND PAPER
Empowerment Technologies, DIWA
LEARNING SYSTEM INC.
https://Luminet.co.uk

III. CONTENT STANDARDS: The learners demonstrate an understanding of: ICT in the
context of global communication for specific professional track
IV. PERFORMANCE STANDARDS: The learners shall be able to: at the end of the 2-
week period independently compose an insightful reflection paper on the nature of
ICT in the context of their lives, society, and professional tracks (Arts, Tech-Voc,
Sports, Academic)
V. LEARNING COMPETENCIES: The learners shall be able to: apply online safety,
security, ethics, and etiquette standards and practice in the use of ICTs as it would relate
to their specific professional tracks
SPECIFIC LEARNING OUTCOMES: Specific Learning Outcomes: At the end of the lesson the
students CAN apply online safety, security, ethics, and etiquette standards and practice in the
use of ICTs as it would relate to their specific professional tracks by:
a. Illustrating the effect of media to one selves;
b. Relating cyber bullying and cybercrime; and
c. Demonstrating the importance of Online Ethics and Etiquette.
VI. TIME ALLOTMENT: 1 WEEK
VII. INSTRUCTIONAL STRATEGIES
A. Pre-Lection (Activating Prior Knowledge)
Think about your life with media. First consider the questions below. Use your responses to help
you finish the statement, “My media life is like a...” This statement is a simile, a literary device
for comparing two unlike things. For instance, someone who does not use much media might
say that her media life is like a desert, because there is little life there. Someone might say that
his media life is like a track meet, because he is exhausted at the end of the day.

Finally, make a picture or drawing of the simile you created. The drawing can include text.
Questions to consider:
 Are digital media a big part of your life?
 What kind of impact do digital media have on you (a little, some, a lot)?
 What are your favourite and least-favourite things to do with digital media?
 Do you connect with others or create things with digital media?

Finish this statement: My media life is like

_____________________________________________________________
because_____________________________________________________________________
___. Illustrate your simile in the box below (or on a separate piece of paper).

Source: MY MEDIA LIFE IS LIKE …

http://www2.powayusd.com/teacher_resources/digitalLiteracy/Grades68/digResp/Unit1-
6/HOMedia%20Life.pdf and https://goo.gl/eli6N

B. Interactive Lecture (Focus Instruction- “I Do”)

Each individual when accessing the World Wide Web is concerned with the safety of his or her
terminal or computer and the information that will be transmitted or received. Here are a number
of threats that can be acquired from connecting to World Wide Web.

13 | P a g e
1. Spam – the fact that most of our emails accounts came with a spam or junk folder
insinuates that spam emails are a huge issue, with more than 50% of emails being
siphoned into these folders. Aside from being an annoyance, spam emails are not a
direct threat. However, many can contain malware.

2. Adware – it is a type of malware software that displays unwanted ads when a user is
surfing the internet. The ads often redirect your searches to advertising websites and
collect marketing-type data about your back, which is considered malicious.

3. Trojan – it leave your computer completely unprotected, which can mean that hackers
can steal any data from your system. Trojans often present themselves as harmless
computer programmes so that hackers can penetrate your computer without being
detected.

4. Virus – one of the most talked about internet threats is a virus. Viruses usually attach
themselves covertly to downloads as they are designed to spread at an alarming rate.
Viruses are often attached to files for download, shared via CDs, DVDs, and USB sticks,
or loaded on to computers by opening infected email attachments.

5. Worms – usually make their way on to a computer via a malicious email attachment or
USB stick. Once your computer has been infected by a worm, it will likely send itself to
every email address logged in your system. To the receiver, your email will appear
harmless, until they open it and are infected by the same worm.

14 | P a g e
6. Phishing – in its simplest terms, phishing is a form of fraudulent activity. More often than
not, official-looking emails are sent impersonating a well-known provider, such as a
bank. These emails are sent to acquire people‘s passwords and credit card details.

7. Spyware – another form of malware is spyware. Spyware is an all-encompassing

internet nasty and is usually attached to pop-ups of downloadable files. Once installed
on your computer, spyware can monitor your keystrokes, and read and delete your files,
reformat your hard drive, and access your applications. Whoever is controlling the
spyware has access to your personal details without you even knowing.

8. Keyloggers - similar to a part of spyware, Keyloggers record a user‘s keyboard actions.

Most Keyloggers will be looking for distinguishable key entries, such as bank card details
and passwords. Keylogging is often linked to identity and intellectual property theft.

9. Pharming – is more complex version of phishing that exploits the DNS system. Pharmers
often create web pages mimicking that of a trustworthy business, such as online banking
log-in page. Users will then enter their details, thinking they are logging in to their usual
service, and their details will be stolen by the pharmer.

10. Rogue Security Software – if you are ever downloading antivirus or antispyware
programmes, make sure you have purchased it from legitimate source. Rouge security
software will often ask you to pay for extra protection, which is a huge con. The security
software is completely useless and criminals have robbed you of your money.

15 | P a g e
Protecting you on the internet:
1. Do not post anything that you do not want public.
2. Minimize posting information that can identify you or your location.
3. Do not share passwords with other people.
4. Create strong passwords. And avoid using the same password everywhere. If someone
steals this information, they may use this against you.
5. There are plenty of scams on the internet. Protect yourself from fraudulent offers, such as
fake job advertisements, emails claiming that you won a lottery or request from distant strangers
to transfer funds. Be careful with links, photos and videos that are sent to you, even if they are
from people you know. Clarify with them first before opening the content.
6. How do you know if website is safe? Signs of safe websites include having ―https‖ as the
start of the website address and a lock image beside the website name. When you see https
instead of ―http‖, it means the session is secure and encrypted.

Authenticity Verification of Information from the Web, the inherited property of Web 2.0 and its
later version give viewers the privilege to influence content or give anyone the freedom to
publish his or her own web sites regardless of the content. There are no standards governing
content publishing on the World Wide Web to ensure the correctness of information, but there
are ways on how to verify if the information is trustworthy or legitimate.
1. Published author’s name
2. Credible Web sites
3. Rating, number of viewers, and number of shares
4. Reference and related articles

Government Provision for Online Courtesy and Etiquette

The Philippine government ensures the welfare of its people in their ICT experience by enacting
various laws and regulations. Laws that aim to protect the people from these illegal activities
were presented.

1. Republic Act 10627 or Anti-Bullying Act of 2013 – this law includes protections of individuals
from bullying through electronic means. Bullying invades an individual‘s privacy by using photos
and other information meant to disgrace that individual.

2. Republic Act 10175 or Cybercrime Prevention Act of 2012 – this law protects an individual
from various unwanted online and cyber acts that may harm or evade one‘s privacy and
integrity.

Online Ethics and Etiquette

The term ―netiquette is a coined portmanteau term of network and etiquette. The term
―netizen refers to the person who is a member or a part of the online community. Hence is a
set of ideal rules and conduct that a netizen should observe in communicating and/or publishing
information and materials over the World Wide Web and in ICT in general.

16 | P a g e
TEN RULES OF NETIQUETTE
Rule No. 1 Remember the human
Rule No. 2 Adhere to the same standards online that you follow in real life
Rule No. 3 Know where you are in cyberspace
Rule No. 4 Respect other people‘s time and bandwidth
Rule No. 5 Make yourself look good online
Rule No. 6 Share expert knowledge
Rule No. 7 Help keep flame wars under control
Rule No. 8 Respect other people‘s privacy
Rule No. 9 Do not abuse your power
Rule No. 10 Be forgiving of other people‘s mistake

The rules of conduct in the Web vary from one community to another. However, there are some
key points to keep in mind to maintain a good conduct over the internet.
 Recognize that your cyber avatar, or your online presentation, is not another world but an
extension of your personality and an extension of the existing society that you are part of.
 You should apply the values and conduct learnt since childhood in the online extension of our
society.  Keep in mind that there are laws existing in our society and on the web. Remember
that there are punishments laid by the government, not for the sake of punishing, but for peace
and order among the citizens.
 Keep in mind that there are differences among the individuals you will interact with and
individuals who will read your published contents. Be sensitive with their beliefs, culture, and
religions.
 Everything published on the World Wide Web should be considered as copyrighted or owned
by another individual.
 In sending correspondence in either e-mail or chat, be careful in selecting words to
communicate. As much as possible, use the appropriate manner of communication and avoid
threatening and disrespectful words.

C. Guided Practice (Group Activity- “We Do”)

Direction: Put the possible effects of Cyber-Bullying and Cybercrime to the individual‘s Physical
health, Mental Health, Emotional Health on the blank box.

D. Processing Students’ Response

Why is it important to protect our self in the world of social media?

E. Independent Practice (“You Do”)

Checking for Understanding Instruction: encircle the letter of the correct answer.

1. Which of the following laws protects an individual‘s privacy online? a. Cybercrime Prevention
Act b. Republic Act 10628 c. Anti-Bullying Act d. Republic Act 9292
17 | P a g e
2. What type of Web is referred to as the ―Read-and-Write‖ Web? a. Web 1.5 b. Web 3.0 c.
Web 1.0 d. Web 2.0
3. Which is a term that describes the manners or etiquette of an individual when using the
internet? a. Behaviour b. Policy c. Netiquette d. Etiquette
4. What type of Web is referred to as the ―Semantic Executing Web‖? a. Web 1.5 b. Web 2.0
c. Web 3.0 d. Web 1.0
5. What application that grew with 2.0 aimed to communicate and socialize with other users? a.
World Wide Web b. Social Networking c. Mobile phone d. Computer
6. Which of the following terms describe the person who is a member of an online community?
a. Community b. Netizen c. Social media d. World Wide Web
7. Which law prohibits the use of an individual‘s private information to disgrace him or her
online? a. Cybercrime Prevention Act b. Anti-Bullying c. Republic Act 10275 d. Republic Act
9292
8. What was the first programming platform? a. C language b. Java c. FORTRAN d. Google
MIT-Senior High School Empowerment Technologies Page 28
9. Which of the following is referred to as the ―Read-only Web‖? a. Web 1.5 b. Web 2.0 c. Web
3.0 d. Web 1.0
10. It allowed us to keep connected with our loved ones and stay updated about goings-on in
their lives. a. Social networking b. Computer c. Cell phone d. Letters
F. Closure Activity or Reflection/Action

Topic : Online Ethics and Etiquette

1. What is the topic about?
2. What new information did you learn from the topic? Include new terms and their meanings.
3. Which of the new information is most significant to you? Why?

18 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: MS. ELMA H. INSAIL DATE:

MS. ROSMIE A. JULHAN GRADE : 11
MS. SHIERALYN IDJIRAN SUBJECT: EMPOWERMENT
MR. ADZMIR A. TARANG TECHNOLOGIES

I. LESSON TITLE: MATERIALS:

POWERPOINT PRESENTATION
Research And Information Seeking PEN AND PAPER

II. REFERENCE: Bandahala, A.A.

(2016) Empowerment
Technologies, DIWA LEARNING
SYSTEM INC.
https://Luminet.co.uk

III. CONTENT STANDARDS: The learners demonstrate an understanding of: ICT in

the context of global communication for specific professional track
IV. PERFORMANCE STANDARDS: The learners shall be able to: at the end of the 2-
week period independently compose an insightful reflection paper on the nature of
ICT in the context of their lives, society, and professional tracks (Arts, Tech-Voc,
Sports, Academic)
V. LEARNING COMPETENCIES: The learners shall be able to: use the Internet as a
tool for credible research and information gathering to best achieve specific class
objectives or address situational challenges
SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN use the
Internet as a tool for credible research and information gathering to best achieve specific class
objectives or address situational challenges by:
19 | P a g e
1. Understanding the meaning plagiarism;
2. Analysing searching on search engines and academic databases; and
3. Conducting basic search on academic databases on the internet
VI. TIME ALLOTMENT: 1 week
VIII. INSTRUCTIONAL STRATEGIES
A. Pre-Lection (Activating Prior Knowledge)
Challenge Questions:
1. Are you a smarter user of search engines?
2. Do you always rely on the first search results online?
3. Have you Google yourself lately? Are you happy with the results?
4. How do you find answers to questions from the simple to the complex?
5. Google might naturally come to mind. Did you know that you could also use Wolfram as an
alternative search engine?

B. Interactive Lecture (Focus Instruction- “I Do”)

There are number of information source over the internet, some of which are presented below:

 Web Search Engines – these are programs designed to search or mine the World Wide Web
based on the keywords provided by the users.

 Research Indexing Sites – these are the websites dedicated to compile and index researches
done by academic researchers, engineers, and social scientists, and so on.

 Massive Online Open Course (MOOC) sites or tutorial sites – these are the websites
dedicated to teach and inform users focused different areas. The delivery of information is
similar to a classroom lecture setup, wherein lectures and assignments are delivered and
submitted, respectively online.

 Employment Web sites – these are the web sites that enable companies to post job vacancies
and also accommodate job seekers by providing a resume-submission facility.

20 | P a g e
 Electronic commerce (e-commerce) – this is a technology that uses electronic means to trade
products and currencies. It also includes any technology that introduces case in business
management and customer convenience.

The following is a set of tips to help you build smart search skills, as adapted from Common
Sense Media.

A. Find the Hidden Calculator

B. Definitions and More
C. Age-Appropriate Results
D. Time-Zone Challenged
E. The Perfect Search
F. Photo Magic
G. Just for fun

Citing Your Sources

Every time you use information from the internet or any print source, you must give credit to the
author otherwise, you risk being charged of plagiarism.

Four Search Strategies

 Keyword searching – enter terms to search. Use quotation marks to search as a phrase and
keep the words are ignored (That, to, which, a, the …) +and can be used to include or exclude a
word
 Boolean AND – enter words connect with AND- it will include sites where both words and
found OR – requires at least one of the terms is found NOT – searches for the first term and
excludes sites that have the second term.
 Question – a question may be entered in the search field of search engine
 Advance – features are offered on many engines going to an ―Advance search‖ page and
making selections.

Plagiarism
means to steal and pass off (the ideas or words of another) as one‘s own, to use (another‘s
production) without crediting the source, to commit literary theft, to present as new and original
an idea or product derived from an existing source.

All of the following are considered plagiarism:

 Turning in someone else‘s work as your own
 Copying words or ideas from someone else without giving credit
 Failing to put a quotation in quotation marks
 Giving incorrect information about the source of a quotation
 Changing words but copying the sentence structure of a source without giving credit
 Copying so many words or ideas from a source that it makes up the majority of your work,
whether you give credit or not.

Using an image, video or piece of music in a work you have produced without receiving proper
permission or providing appropriate citation is plagiarism. The following activities are very
common in today‘s society. Despite their popularity, they still count as plagiarism.

21 | P a g e
 Copying media (especially image) from other websites to paste them into your own papers or
websites  Making a video using footage from others‘ video or using copyrighted music as part
of the soundtrack  Performing another person‘s copyrighted music (i.e. playing a cover)
 Composing a piece of music that borrows heavily from another composition

Certainly, these media pose situations in which it can be challenging to determine whether or
not the copyrights of a work are being violated. For example:
 A photograph or scan of a copyrighted image
 Recording audio or video in which copyrighted music or video is playing in the background
 Re-creating a visual work in the same medium.
 Re-creating a visual work in a different medium.
 Re-mixing or altering copyrighted images, videos, or audio, even if done so in an original way.

The legality of these situations, and others, would be dependent upon the intent and context
within which they are produced. The two safest approaches to take in regards to these
situations are:
 Avoid them altogether; or
 Confirm the works‘ usage permission and cite them properly.

When you cite a source, you give credit to the source by citing in-text and then writing down
your list of references. When writing a research paper, the reference list is usually the last page
of your manuscript

Source: https://www.plagiarism.org

C. Guided Practice (Group Activity- “We Do”)

Use Internet connection and search about

Answer the Following question:

1. Who is she?
2. What was the issue about her?
3. Do you think she is not aware about plagiarism? Why?
4. What move she did to solve her issue?

D. Processing Students’ Response

Why is it important to cite the source of the information you get from the internet?

E. Independent Practice (“You Do”)

A. Checking for Understanding Quiz Test I – True or False. Write T if the statement is True,
and write F if the statement is False.
______1. Web 1.5 is designed to search information on the internet.

22 | P a g e
 ______2. Research indexing sites are web sites dedicated to compile and index
researchers done by academic researchers, to deliver information similar to a classroom
lecture setup. ______3. Massive Online Open Course (MOOC) sites or tutorial sites are
web sites dedicated to teach and inform users focused on different areas.
______4. Employment Websites accommodate job seekers by providing
resumesubmission facility
______5. Web search engines are designed to search or mine the World Wide Web.
F. Closure Activity or Reflection/Action
Direction: Determine if each of the situation below constitute plagiarism or not. Explain why.

1. You are asked to summarize the plot of a chapter from Madame Bovary. You copy the
chapter description from the online Spark Notes Web site and don‘t cite your source. Is
this plagiarism?
2. You take a sentence from a professional journal and reorder the phrases, keeping the
meaning and most phrases intact. You cite your source. Is this plagiarism?
3. You find a paper online that answers you assignment instructions exactly and do it as
your work. Is this plagiarism?
4. Your roommate took the same main course last year that you are taking now. To save
yourself some time, you copy your roommates old work assignments and turn them in as
your own. Is this plagiarism?
5. Forgetting to cite a source isn‘t plagiarism as long as you have the citation information in
your notes. True or False?

G. Extended Classroom Activity

Searching Using Google Scholar: From Broad to Narrow

a. Choose a general topic of interest (e.g. boxing)
b. Enter the search term on Google Scholar. Write down the first three articles that come up.
c. Narrow your search. (e.g. Manny Pacquiao). Repeat step 2.
d. Further narrow your search. (e.g. Manny Pacquiao speed and agility). Repeat step 2

Base on the above instruction. Complete the table below:

Topic Results
Topic (Broad)

Topic (Narrow)

1. What is the topic about?

2. What new information did you learn from the topic? Include new terms and their
meanings.
3. Which of the new information is most significant to you? Why?

23 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: MS. ELMA H. INSAIL DATE:

MS. ROSMIE A. JULHAN GRADE : 11
MS. SHIERALYN IDJIRAN SUBJECT: EMPOWERMENT
MR. ADZMIR A. TARANG TECHNOLOGIES

I. LESSON TITLE: Applied productivity tools MATERIALS:

with advanced application technique POWERPOINT PRESENTATION
II. REFERENCE: Bandahala, A.A. (2016) PEN AND PAPER
Empowerment Technologies, DIWA
LEARNING SYSTEM INC.
https://Luminet.co.uk

III. CONTENT STANDARDS: The learners demonstrate an understanding of: the use of
advanced tools and techniques found in common productivity and software
applications in developing ICT content for specific professional tracks
IV. PERFORMANCE STANDARDS: The learners shall be able to: at the end of the 2-week
period independently apply advanced productivity tools to create or develop ICT
content for use in specific professional tracks These may be in the form of, but not
limited to:  Letterhead / business card design
V. LEARNING COMPETENCIES: The learners:  Uses common productivity tools
effectively by maximizing advanced application techniques.  Creates an original or derivative
ICT content to effectively communicate or present data or information related to specific
professional tracks.
SPECIFIC LEARNING OUTCOMES: : At the end of the lesson the students CAN uses common
productivity tools effectively by maximizing advanced application techniques and creates an

24 | P a g e
original or derivative ICT content to effectively communicate or present data or information
related to specific professional tracks by:
a. Understanding the advantage of Mail Merge and hyperlink;
b. Analyzing the difference between Mail Merge and Hyperlink; and
c. Producing multiple documents using Mail Merge and creating an organize contents of their
files using hyperlink
VI. TIME ALLOTMENT: 1 week
VIII. INSTRUCTIONAL STRATEGIES
A. Pre-Lection (Activating Prior Knowledge)

Review the previous lesson

B. Interactive Lecture (Focus Instruction- “I Do”)

Topic: Mail Merge and Hyperlink

Mail merge
is a word processing tool used to combine information stored on a spreadsheet with a template
created using a word processor. The advantage brought about by this tool is that it can save
time, as compared with the manual editing. This function can also help you further customize
the template by adding decisions based on the entries of the spreadsheet.

These are the steps in using Mail Merge:

1. Create a dataset with title headings on a spreadsheet application.

2. Create the template of the letter or document that will receive the dataset in a word
processor.
3. Insert the label of customized detail in the word processor and insert the label that
corresponds to the spreadsheet.
4. Select the option preview in the word processor to generate all of the pages with different
information.

Mail Merge Utilization

1. Create spreadsheet containing your information and make sure that the labels are
written in the first row. (Figure 1)

2. Indicate the source of information on your word processor (Figure 1.1)

a. On the upper part of the word processor, click the Mailings tab.
b. Under the Mailings tab, click the Select Recipients option.
c. Then under the Select Recipients option, click Use Existing List.

25 | P a g e
3. Select the spreadsheet file you‘ve created in Step 1.
a. Brows the directory where you saved the spreadsheet file containing the information you are
going to use (Figure 1.3).

4. Select which spreadsheet in the file contains the information.

a. Select the sheet that you are going to use as your reference for the information.
b. Click OK, after highlighting the sheet.

26 | P a g e
27 | P a g e
Hyperlink is a tool that can embed a file in a word or image written or inserted in a word
processor or presentation. By using hyperlinks, the time spent to search a file directory is
lessened. Furthermore, Web sites can be hyperlinked in the Word processor. This is a good
way of bookmarking a web site in a customized manner.

A hyperlink is a reference to another file that is represented by a word, an image, or any

document element on a document processor. The file referred to by the hyperlink can be
28 | P a g e
accessed by clicking or hovering the cursor on the hyperlink itself. The source code is a term
used to describe a document that contains hyperlinked elements. Usually, hyperlink texts are
colored blue for distinction and notice ability.

Two (2) types of links:

 Anchor link – this is hyperlink that points to a portion of the same document. The contents are
embedded in the same document but are located in some other location within the document.
 Inline link – this is a hyperlink wherein the content is located in other or remote files. The link
searches for the path of the document before displaying it. Also, the contents of the link are not
embedded in the document.

29 | P a g e
30 | P a g e
 C. Independent Practice (“You Do”)
Direction: After reading the lessons above. List at least (3) advantages of Mail Merge and
Hyperlink.

MAIL MERGE HYPELINK

31 | P a g e
 D. Extended Classroom Activity
Direction: choose between these two (2) situations.

1. Your family will hold its annual reunion two months from now. You are asked by your
grandmother to design the invitation for all the family members. The invitation should be
personalized, and the name of each recipient should be written in salutation. You are
asked to write a unique four-digit number in the invitations for the raffle draw in the
reunion. Your grandmother will check the file of the saved finish product through
screenshot before the invitations are printed. You are expected to successfully generate
a list of attendance on a spreadsheet together with the raffle numbers.

2. Create a PowerPoint presentation about your family members at least five (5) that uses
hyperlink. Each family member must have their biography written on each slide, together
with their picture. Where when you point the name of your family member on the listed
names on the first slide. It will directly open the assigned documents of the pointed
name.

Mail Merge Rubric You may use this rubric as a self-assessment as you are following the steps
to make sure that you are on right track. Please check off the each task as you complete the
section.

32 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: MS. ELMA H. INSAIL DATE:

MS. ROSMIE A. JULHAN GRADE : 11
MS. SHIERALYN IDJIRAN SUBJECT: EMPOWERMENT
MR. ADZMIR A. TARANG TECHNOLOGIES

I. LESSON TITLE: MATERIALS:

Visual Design: Imaging and Layout Design POWERPOINT PRESENTATION
PEN AND PAPER
II. REFERENCE: Bandahala, A.A. (2016)
Empowerment Technologies,
DIWA LEARNING SYSTEM
INC. https://Luminet.co.uk

III. CONTENT STANDARDS: The learners demonstrate an understanding of: how to

manipulate text, graphics, and images to create ICT content intended for an
online environment.
IV. PERFORMANCE STANDARDS: The learners shall be able to:
at the end of the 2-week period independently apply the techniques of image
manipulation and graphic design to create original or derivative ICT content from existing
images, text and graphic elements for use in specific professional tracks.
V. LEARNING COMPETENCIES: The learners:
 evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design
 Use image manipulation techniques on existing image to change or enhance their
current state to communicate a message for a specific purpose.
 Create an original or derivative ICT content to effectively communicate a visual
message in an online environment related to specific professional tracks
VI. SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN evaluate
existing websites and online resources based on the principles of layout, graphic, and visual
message design and use image manipulation techniques on existing image to change or
enhance their current state to communicate a message for a specific purpose by:
a. Recognizing online graphic design tools through features and advantages; and
b. Evaluating existing websites and online resources based on the principles of layout, graphic,
and visual message design
VII. TIME ALLOTMENT: 1 WEEK
VIII. INSTRUCTIONAL STRATEGIES
A. Pre-Lection (Activating Prior Knowledge)

REVIEW THE PREVIUOS LESSON

B. Interactive Lecture (Focus Instruction- “I Do”)

Topic: Basic Principle of Graphics and Layout

The main reason why you have to know about free online graphic design tools is to save your
time. As a designer, you have probably torn apart when multitasking every single day. Design,
just like any other creative field, demands a great deal of concentration and stamina. The
following are the 14 free online graphic design tools.

33 | P a g e
 ColorZilla – ultimate CSS Gradient Generator is an impressive online graphic design tool for
specifying gradients with pure CSS3.

 Canva – offers phenom quality at hand. Its potential is not limited to photo design online.

 BeFunky – is a reliable platform if you need to design online. It has three main tools. They are
free and can be used once you click on Get Started Button.
 Snappa – the free subscription plan from Snappa offers you 50,000+ HD photos and graphics
and 5 download per month.

 Pablo – is a super simple graphic design tool. Its aim is to help you choose an appropriate
image from 600+k options and add some next to it.

 Pictaculous – the main reason to use Pictaculous is to learn what colors denominate the
image you are about to use. This tool can come in handy if you want to stay consistent with your
project.

34 | P a g e
 Infogram – is an online graphic design tool famous for its easy graphic design. Infogram offers
you a free subscription plan with numerous advantages.

 Pxlr Editor – this online graphic design tool supports five popular file formats (.png, .jpeg., jpg.,
.bmp, .tiff). what is more, Pixlr Editor has its own specific file format.

 Tinkercad – with the help of tinkercad, you can build elegant 3D design online. Once you are
done with grouping multiple shapes, feel free to turn them into 3D models easy.

 Vectr – the best part about choosing this online tool is that you do not need to be professional
designer to create a visually attractive vector graphics.

35 | P a g e
 Figma – is a free for personal use which makes this online graphic tool quite a catch. Created
as a unique platform that connects the dots for designer, Figma allows you to design, prototype,
and communicate.

 Crello – it can be used for creating almost all possible designs, from Instgram adds to
business cards.
 Design Wizard – is excellent graphic design software that create high-quality visual content in
minutes.

 Poster My Wall – is an easy solution for anyone who wants to create stunning posters without
any required artistic or designer skills.

 Piktochart – infographic design application ―that requires very little effort to produce,
beautiful, high quality graphics.

 GIMP (GNU Image Manipulation Program) – is a free and open-source raster graphics editor
used for image retouching and editing, free-form drawing, resizing, cropping, photo montage,
converting between different image formats, and more specialize tasks.
36 | P a g e
The workflow of a designer is a fragile thing. That is why you have to be careful when speeding
it up.

The term “Infographic” is a short term for information graphic, which refers to an image that
combines information, storytelling, and perceptions that help that cause of an individual or an
institution to communicate a message to viewers.

Using infographics brings about numerous advantages. People rely mostly on their sense of
sight. By creating a catchy and attractive infographic, one can effectively communicate a
message to viewers.

Three (3) Basic Elements of Layout and Design

1. Lines – are the most basic of all the elements. Lines can define the characteristics of an
infographic.

2. Color – is one of the powerful and influential elements in an infographic. Using the right
combination of colors can catch the attention of a passerby or even glancing viewers.

37 | P a g e
 3. Shapes – these are defined by the enclosure created by a combination of lines.

Principles of Design

The use of different design elements defines the message and ideas that the image
depicts. Presented are the principles of design that will ensure a harmonious relationship
between the viewer and the image itself.
1. Balance – this describes the placements of elements, shapes, or lines throughout the
image.
Two types of Balance
 Formal Balance – when objects are placed symmetrically and are properly distributed
 Informal Balance – includes nonsymmetrical distribution of elements but is
compensated in different aspects such as colors and lines.

2. Contrast – the arrangement of elements in an image may be done by combining

elements with different properties and characteristics.

38 | P a g e
 3. Unity – it is when all of the elements seem to be singular element in unison. This makes
the design pleasing to the viewers.

4. Proportion – this is the correlation of all the elements with one another. The practice of
having proportion among the elements ensures balance and unity.

5. Rhythm – this describes the product of having the elements placed in harmony with one
another. Rhythm can be done by using patterns and by repeating various elements.

C. Guided Practice (Group Activity- “We Do”)

Direction: Evaluate the following Web sites application based on Layout, graphics, and visual
design.

39 | P a g e
 D. Independent Practice (“You Do”)

Inform the learners that before we flip over the pages and begin with the lesson.
Let’s have first the activity.
Directions: In this activity, you need to observe the given the picture below and identify which
principle of graphics and layout BEST applies in each design. Choose your answer inside the box
located on the bottom page then write your answer on a separate sheet.

E. Closure Activity or Reflection/Action

a. Checking for Understanding Short Quiz (Multiple Choice) Direction: Shade the circle of the
correct answer. No Erasure allowed!

1. Which of the following refers to an image that combines information, storytelling, and
perception that helps the same cause of an individual or an institution to communicate a
message?
О Web site О Hyperlink О Photo О Infographic
2. Which refer to the ideas that describe the natural or normal optical logic of humans?
О Infographic О Coherence О Design principles О Unity
3. Which is defined as the enclosure created by combining multiple lines?
О Line О Colors О Shapes О Images
4. Which term describes the placement of elements, shapes, or lines through an image?
О Contrast О Unity О Balance О Proportion
5. Which is an alternative source of information aside from written articles and published
materials
О Web site О Hyperlink О Photo О Infographic
6. Which of the following is the most basic of all the infographic elements?
40 | P a g e
 О Lines О Colors О Shapes О Images
7. Which of these infographic elements can be combined to produce combinations that can
catch the audience‘s attention?
О Colors О Lines О Images О Shapes
8. What describe the product of having the elements placed in harmony with the one
another?
О Balance О Rhythm О Unity О Contrast
9. Which term refers to the elements of display?
О Brightness О Pixel О Color О Hue
10. In design principles, what is the correlation of all the elements with one another?
О Unity О Rhythm О Balance О Proportion

41 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: DATE: JULY 08, 2024

MS. ROSMIE ALI JULHAN GRADE: 11
MS. SHIEYRALYN M. IDJIRANI
MR. ADZMER TARANG SUBJECT: EMPOWERMENT TECHNOLOGY
MS. ELMA INSAIL
VII. LESSON TITLE: GNU Image MATERIALS:
Manipulation Program and Online file bond/pad paper, pen, board and marker,
formats for images and text computers/tablets, printed sample interaction
log matrix

VIII. CONTENT STANDARDS: The learners demonstrate an understanding of:

The learners demonstrate an understanding of: how to manipulate text, graphics, and
images to create ICT content intended for an online environment
IX. PERFORMANCE STANDARDS: The learners shall be able to:
at the end of the lesson the learner independently apply the techniques of image
manipulation and graphic design to create original or derivative ICT content from existing
images, text and graphic elements for use in specific professional tracks.
X. LEARNING COMPETENCIES: The learners shall be able to:

graphic, and visual message design

Use image manipulation techniques on existing image to change or enhance their
current state to communicate a message for a specific purpose.
Create an original or derivative ICT content to effectively communicate a visual message
in an online environment related to specific professional tracks.
SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN Use image
manipulation techniques on existing image to change or enhance their current state to
communicate a message for a specific purpose and create an original or derivative ICT
content to effectively communicate a visual message in an online environment related to
specific professional tracks by:

a. Identifying different toolbox tools;

b. Differentiating non-manipulated to manipulated images; and
c. Applying image manipulation techniques to create an effective visual message
XI. TIME ALLOTMENT: 60 MINUTES
VIII. INSTRUCTIONAL STRATEGIES
G. Pre-Lection (Activating Prior Knowledge)

Direction: List down at least 10 applications that you familiar with manipulating image.

H. Interactive Lecture (Focus Instruction- “I Do”)

GNU Image Manipulation Program (GIMP) – image editor is a web extension for tasks as photo
and image retouching, image composition and image authoring. It is integration with the Linux
Desktop app GIMP, a freely distributed program that provides many capabilities. It can be used
42 | P a g e
as a simple paint program, image editor, an expert quality photo retouching program, an image
renderer, or an image format converter.
Its main features are:

Image editor
-pixel sampling for all paint tools for high quality anti-aliasing.

able text layers

Programming Algorithms
GIMP provides extensibility through integration with many programming languages including
Scheme, Python, Perl, C, C++ and more. The result is a high level of customization as
demonstrated by the large number of scripts and plug-ins created by the community.

GIMP provides top-notch color management features to ensure high-fidelity color reproduction
across digital and printed media. It is best used in workflows involving other free software such
as Scribus, Inkscape, and SwatchBooker.

These are the following tools used in GIMP Image Editor

43 | P a g e
 – used to select a part of the image in a rectangular shape
– used to select a part of the image in ellipse or circular shape
– used to select a customized shape by hand-drawing the bounding line
– used to select an area intelligently by the computer
lor Select Tool – used to select a certain color. All the areas in the workspace with the
same color will be selected
– used to select a shape determined by the edges defined in the image
– used to select and separate the subject in the image against the
background of the image
– used to create a customized path for editing
– used to select a specified color from the image
– used to adjust the scale and size of the image relative to the viewer
– used to measure the distance between two points. It can also
measure the angles of separation of two points
– used to select a part of the image and transfer it to another area
– used to align all the layers in the image
– used to remove or cut a certain part of the image
– used to rotate the image, either clockwise or counter clockwise
– used to scale large or scale small the image in the workspace
– used to make the image look slanted or inclined on one side
– used to make the image look as if viewed from a certain angle
– used to flip or invert the view of the image horizontally
– used to insert a textbox for insertion of characters or words
– used to automatically fill the entire selection with your chosen
color
– used to fill the selected area with a color gradient
– used to draw on a selected image similar to pencil stroke
– used to influence the selected image with brush type strokes with
the chosen color and thickness
– used to delete an unwanted area in the image
– used to apply airbrush strokes with varying pressure
– used to calligraphy-style paintings
– used to copy a certain pattern from an image to be used to the selected portion
– used to correct irregularities in a selected portion of the image
– used to apply a cloned pattern from a selected image after
applying a perspective transformation
– used to blur a election by using a paintbrush
– used to smudge a selection using a brush
odge/Burn Tool – used to lighten or darken a selection using a brush

Image File Format

File formats, specifically image file formats, are facilities or methods to store and organize digital
images. The manner of interpreting digital image file is due to the format of storing and coding
the image files
The elements of picture, which are referred to as Pixels or picture elements, are arranged and
stored in manner dictated by the format of the image.

There are a number of file formats for images, some of which are presented here:

JPG) – this is the compression method that

complies with the JPEG File Interchange Format (JFIF). This format applies a ―lossy‖
compression method to image files, which means that a huge number of pixels are lost
or discarded in storing the image.
44 | P a g e
 – this is a less common file format supported by
Web browsers. This file format can use either the lossless or the lossy compression
method.

– this is a popular file format for storing

graphical images with fewer colors. GIF compression method uses lossless
compression techniques.
– the intention for the creation of this file
format is to be free and open source substitute for GIF. This file format is expected to be
fully compatible with online applications. This is a lossless compression method; thus, it
is also used in editing applications.

I. Guided Practice (Group Activity- “We Do”)

Direction: Differentiate the fallowing images. Write the differences on the table below.

PICTURE – A (Non-Manipulated Image) PICTURE – B (Manipulated Image)

J. Processing Students’ Response

 Is GIMP good for photo manipulation?

45 | P a g e
  What are the advantages and disadvantages of using GIMP image editor?
 Can GIMP be used professionally?

K. Independent Practice (“You Do”)

Direction: Given the icon on the left side, identify the icon with its corresponding numbers.
Write your answers on the space provided.

L. Closure activity or Reflection/action

Direction: After knowing and familiarizing yourself with all these tools, evaluate and rate
you from 1-10 (with 1 being the lowest and 10 being the highest) based on your
proficiency and efficiency in using these tools. How can you use these tools better and
more efficiently?

46 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: DATE: JULY 08, 2024

MS. ROSMIE ALI JULHAN GRADE: 11
MS. SHIEYRALYN M. IDJIRANI
MR. ADZMER TARANG SUBJECT: EMPOWERMENT TECHNOLOGY
MS. ELMA INSAIL
XII. LESSON TITLE: Basic Web Design MATERIALS:
Principles and Elements bond/pad paper, pen, board and marker,
computers/tablets, printed sample interaction
log matrix

XIII. CONTENT STANDARDS: The learners demonstrate an understanding of:

the principles and techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks
XIV. PERFORMANCE STANDARDS: The learners shall be able to:
Independently apply the principles and techniques of design using online creation tools,
platforms, and applications to create original or derivative ICT content for
use in specific professional tracks.
XV. LEARNING COMPETENCIES: The learners shall be able to:
evaluate existing online creation tools, platforms, and applications in developing ICT
content for specific professional tracks
Apply web design principles and elements using online creation tools, platforms, and
applications to communicate a message for a specific purpose in specific professional
tracks.
Create an original or derivative ICT content using online creation tools, platforms, and
applications to effectively communicate messages related to specific professional track
SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN
evaluate existing online creation tools, platforms, and applications in developing ICT content for
specific professional tracks and apply web design principles and elements using online creation
tools, platforms, and applications to communicate a message for a specific purpose in specific
professional tracks by:
a. Identifying concepts and principles which can explain why Web page layout important
b. Relating principles of Web design applications in developing ICT content;
c. Applying Web design principles and elements to effectively communicate a message;
XVI. TIME ALLOTMENT: 60 MINUTES
VIII. INSTRUCTIONAL STRATEGIES
M. Pre-Lection (Activating Prior Knowledge)
Inform the learners that before we flip over the pages and begin with the lesson. Let’s
have first the activity.
Direction: ‘4 Pic 1 Word’ guess the picture below.

N. Interactive Lecture (Focus Instruction- “I Do”)

47 | P a g e
Web design is a similar process of creation with the intention of presenting the content on
electronic web pages, which the end-users can access through the internet with the help of
browser.

Here are the factors that greatly contribute to this goal:

1. Purpose – a Web site can be categorized primarily in terms of the goal it aims to fulfill. Web
sites can be categorized into different types and functions depending on the purpose they serve
the user or audience. Web site visitors may want to look for information, be entertained, play
games, socialize, or transact business. In creating a Web page, the designer should define first
the purpose of the Web page to determine the theme of the site. This will help the developer
create a more organized and relevant site.
2. Communication – essentially, when we visit a Web site, the primary objective is to absorb as
much as possible in the shortest amount of time. Thus, the information or text on a Web site
should be concise and direct to the point. The arrangement of the text should be organized in a
manner that would entice readers. To effectively apply this, use headings, subheadings, or bullets.
Outlining will also avoid long fuzzy sentences.
3. Typefaces – this is an essential factor in Web site design because this is considered the most
dominant and noticeable in terms of visuals. Typeface deals with text format, text style, and text.
The appearance of texts can greatly contribute to the perception of the visitors to the Web site.
Academic Web sites will use simple typefaces, whereas those that deal with entertainment will
use fancy and artistic typefaces
4. Colors – these enhance the experience of visitors of the Web site. The appropriate combination
of the foreground color and background color can produce a better viewing experience not only
in the images and pictures but also in the texts. Furthermore, colors can introduce a mood or
make the Web site lively and enticing for viewers. Colors can also introduce the perception of a
modern or classic look on the Web site. Border colors of images or button colors can define the
mood that the Web site reflects.
5. Images – images alone place on the Web site can deliver a complete message that the Web
site wishes to communicate to the audience. Choosing the correct images can connect the Web
site to viewers or the audience effectively. The most commonly used images are infographics.
Images with proper balance, color, and contrast accompanied by texts can deliver great impact
and information to the audience. The ratio of the size of the image with respect to the Web page
and text can also contribute to its impact on the site visitors.
6. Navigation – refers to the facility that the audience can use to go through the Web site and its
subpages. There are several ways on how to create an effective and good navigation system on
a Web site. One of these includes a hierarchical organization of information, so that users can
logically anticipate the location of information. Another is by placing buttons or links to direct the
audience to a specific page or location on the Web site. Last is the use of search bars to enable
the audience to type key words and phrases. Whatever method is chosen for navigation, the
three-click rule should be followed, wherein the user should find the prospect information within
three mouse clicks.
7. Layout – a layout refers to the physical arrangement of the content and elements on a Web
site. There are various ways on how to do an effective layout on a Web site, and typically, these
ways are determined by the creator or developer. However, there are categories that classify a
layout that will guide the users with the suitable layout for their target audience. Possible layouts
are presented here.
Grid – without direction or organization, placing the content of the Web site will most likely
appear chaotic. Grid layouts can be useful because they will enable the user to create
sections or groups of related information. Another is that the information can be arranged
in columns and group boxes that can be placed anywhere on the Web site. This will help
creating an eye-soothing arrangement of texts and photos.

48 | P a g e
 F-pattern – based on the studies, human vision flows like the letter F. this means that
humans tend to look heavily at the left side of a visual material more than the right side.
Furthermore, humans tend to look at the upper portion than the lower portion of the visual
material. Thus, the pattern is similar with letter F. As Web site developers, this can be
capitalized by placing more information at the top and left part of the screen.
Mobile – the popularity of using mobile devices in viewing Web content is increasing. This
is because of the portability and convenience brought about by mobile devices to their
users. The display devices vary depending on the system an individual uses. The
developer then should consider the layout for mobile and work stations. A desktop
computer‘s display is usually bigger than mobile displays, and because of this, the content
should be accessible for both devices.
8. Load Time – another basis for the success of a Web site is the time that the Website will load
or appear onto the viewers‘display device. Nowadays, people demand information at a very fast
pace. If the web site takes some time to load, most especially if there are too much content, the
users will most likely search for another source. It is best to minimize the elements in a Web page
and remove the elements that are not important in delivering the information. Another method is
to optimize the size and resolution of the images.

O. Guided Practice (Group Activity- “We Do”)

Instruction: rank the principles of Web design based on what you first noticed in viewing a Web
site. Explain why you have chosen that order. (From Highest to Lowest)

49 | P a g e
 P. Processing Students’ Response
 What are examples of elements and principles and design?
 What is the purpose of web design principles and elements?

Q. Independent Practice (“You Do”)

Instruction: Identify Basic Web Design Principles and Elements by circling True or
False for each claim. No Erasure Allowed!

a. Navigation is about how easy it is for people to take action and move around your
web site. True or False
b. Each page of your Web site needs to have a clear purpose, and to fulfil a specific
need for your Web site users in the most effective way possible. True or False
c. Web sites that are not well designed tend to perform poorly and have sub-optimal
Google Analytics metrics. True or False
d. A well thought out color palette can destroy the user experience. True or False
e. People on the Web tend to want information quickly, so it is important to
communicate clearly, and make your information easy to read and digest. True or
False
f. Everybody hates a Web site that takes ages to loads. True or False
g. Using contrasting colours for the text and background will make reading easier on
the eye. True or False
h. Choosing the right images for your Web site can help with brand positioning and
connecting with your target audience. True or False
i. Placing content randomly on your Web page can end up with a haphazard
appearance that is messy. True or False
j. Effective web design is judged by the users of the Web site and not the Web site
owners. True or False

R. Closure activity or Reflection/action

1. As a netizen, which factor in Web site design catches your attention the most?
Explain.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________

50 | P a g e
 ACTIVITY-BASED LEARNING PLAN

TEACHER: DATE: JULY 08, 2024

MS. ROSMIE ALI JULHAN GRADE: 11
MS. SHIEYRALYN M. IDJIRANI
MR. ADZMER TARANG SUBJECT: EMPOWERMENT TECHNOLOGY
MS. ELMA INSAIL
XVII. LESSON TITLE: Web page design MATERIALS:
using templates and online WYSIWYG bond/pad paper, pen, board and marker,
platforms computers/tablets, printed sample interaction
log matrix

XVIII. CONTENT STANDARDS: The learners demonstrate an understanding of:

the principles and techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks
XIX. PERFORMANCE STANDARDS: The learners shall be able to:
Independently apply the principles and techniques of design using online creation tools,
platforms, and applications to create original or derivative ICT content for
use in specific professional tracks.
XX. LEARNING COMPETENCIES: The learners shall be able to:
evaluate existing online creation tools, platforms, and applications in developing ICT
content for specific professional tracks
Apply web design principles and elements using online creation tools, platforms, and
applications to communicate a message for a specific purpose in specific professional
tracks.
Create an original or derivative ICT content using online creation tools, platforms, and
applications to effectively communicate messages related to specific professional track
SPECIFIC LEARNING OUTCOMES: At the end of the lesson the students CAN
create an original or derivative ICT content using online creation tools, platforms, and
applications to effectively communicate messages related to specific professional track by:

a. Identifying the benefits of online WYSIWYG platform applications to the users;

b. Evaluating online WYSIWYG platform applications in terms of advantages and
disadvantages.
XXI. TIME ALLOTMENT: 60 MINUTES
VIII. INSTRUCTIONAL STRATEGIES
S. Pre-Lection (Activating Prior Knowledge)
Inform the learners that before we flip over the pages and begin with the lesson.
Let’s have first the activity.
Read and answer the following question concisely. Write your answer on your notebook.

a. List down at least three websites you normally visit.

b. What makes you normally visit the site- graphic, layout, or content? Why?

51 | P a g e
 T. Interactive Lecture (Focus Instruction- “I Do”)
WYSIWYG in Web site design is an acronym for What You See Is What You Get. It is an
application that is used to create a Web site either online or offline. This type of application uses
the capability of directly handling the components of the Web site. The developer can directly
drag and drop elements to manipulate the layout of the Web site. The finished product is similar
to the designed placement of the components. The traditional method involves several developer
string commands in an editor program. A program will then convert the commands into visual
elements that will compose the layout of the Web site. Presented here are some of the WYSIWYG
applications for both online and offline development.

Adobe Dreamweaver – this is an offline proprietary Web development tool offered by Adobe
Systems. This tool presents a wide range of tools for drag-and-drop option. The layout will most
likely turn out the same as planned by the developer.
Furthermore, Adobe Dreamweaver can produce the equivalent program codes of the
layout created by the designer.

a. Application bar
b. Document toolbar
c. Document window
d. Workspace switcher
e. Panels
f. Code view
g. Status bar
h. Tag selector
i. Live view
j. Toolbar

Amaya – is an open source Web site development tool used to update documents directly on
a running Web site. (An open source software is a kind of software that can be freely used,

52 | P a g e
changed, and share by its users). Amaya enables continuous browsing and editing of a Web
site. It also enables the collaborative development of a Web site.

Microsoft Expression Web – this is propriety Web site development tool create by
Microsoft. Previously, Microsoft Expression Web is integrated to the now defunct Microsoft
Expression Studio. Developing a web site is easy using Microsoft Expression Web. Simply drag
and drop the elements to create the layout and function of the Web site.

IM Creator – this is Web site that caters to both experienced and inexperienced users, and to
creators of Web sites and Web pages. IM Creator offers predesigned templates that will aid
inexperience users in creating their own Web sites. IM Creator provides a ready-made Web site
with complete functioning buttons, links, and design. The only thing that the user should do is to
edit texts and insert videos and photos. A number of themed templates can be chosen by the
user. For the more dynamic users, IM Creator offers a blank Web site and tools that they can
use to create their Web site from scratch.

53 | P a g e
 Wix – is another Web site that offers its users to create their own Web site. The advantage of
using Wix is that knowledge of Web site programming is not a prerequisite. It also offers a wide
range of templates. These templates have been designed for every purpose intended by the
user. This is possible because different Web site developers contribute to the pool of themes
available. Wix offers a drag and drop facility. Users can simply grab an element such as
textboxes, photos, and shapes to arrange them in the layout they want.

U. Guided Practice (Group Activity- “We Do”)

a. On your own idea, evaluate online WYSIWYG and offline WYSIWYG applications in terms of
their advantages and disadvantages.

WYSIWYG Advantage/s Disadvantage/s

Applications
MindMeister
IM Creator
Microsoft Expression Web
Adobe Dreamweaver
Amaya

b. List down three more WYSWYG web hosting service and their URL?

V. Processing Students’ Response

 What is web template and why would you use one
 What are web page design using templates?

54 | P a g e
 W. Independent Practice (“You Do”)

Instruction: Write the word TRUE if the statement is correct, if it is False ENCIRCLE
THE WORD that make it false and write the CORRECT WORD on the space provided

________________1. Amaya is an open source Web site development tool use to

update documents directly on a running Web site.
________________2. IM Creator is a Web site that caters to both experienced and
inexperienced users.
________________3. WYSEWYG is an application that is used to create a Web site
either online or offline.
________________4. Adobe Dreamweaver is an online propriety Web development
tool offered by Adobe Systems.
________________5. Microsoft Expressive Web is a propriety Web site development
tool created by Microsoft.
________________6. Another Web site development where knowledge of Web site
programming is not a prerequisite is Photoshop.
________________7. Adobe Photoshop presents a wide range of tools for drag-anddrop
option.
________________8. Amaya disabled continuous browsing and editing of a Web site.
________________9. Wix is another Web site that offers its users to create their own
Web site.
________________10. IM Creator offers predesigned templates that will aid
Inexperienced users in creating their own Web sites.

X. Closure activity or Reflection/action

1. As a millennial, what WYSIWYG platform would you use for Web Development?
Explain.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________

55 | P a g e