DEPARTMENT OF EDUCATION

REGION III
Division of City of San Fernando
PAMPANGA HIGH SCHOOL
PHS Blvd., Brgy., Lourdes, City of San Fernando, Pampanga
Tel. No. (045) 961-4261 website:www.pampangahigh.school

INDUSTRIAL ARTS DEPARTMENT

SELF-INSTRUCTIONAL PACKETS (SIPacks)

in EMPOWERMENT TECHNOLOGY 11

Source: https://www.deped.gov.ph

To the learner:
As you start reading, keep in mind that this teaching module will provide every learner of
Pampanga High School like you with the education needed to compete in a global context. This
module which is conceptualized as self-contained "units" of content will enhance your skills based
on the Most Essential Learning Competencies (MELCs). Also, it highlights corresponding
activities which you need to answer as you move from page to page for each week lesson.

GENERAL INSTRUCTIONS
To get the most out of this module, here are some reminders that you need to consider:
1. Take your time in reading all parts of the lesson.
2. Always answer all given activities intended for each week lesson.
3. Answers must be written in ONE WHOLE SHEET of PAD PAPER.
4. Do not forget to write the following data on your paper before answering all the activities. Also, please
be reminded that you have to use one (1) piece of paper per lesson. Meaning, you have to use
another sheet if you need to answer the activities in another lesson.
a. Your Complete Name (student) e. Quarter No.
b. Your Grade and Section f. Date of Activity, Activity No. and Activity Title
c. Learning Area/Subject g. Item Numbers
d. Name of Your Subject Teacher

Here is the illustration based on the instructions above:

Complete Name____________________________ Learning Area/Subject: IA / ETECH 11 Quarter: 1

Grade and Section: ______________________ Name of Subject Teacher: ___________________________

Date of Activity: __________________ Activity No.: ___ Activity Title:___________________________________

1.
2.
3.

5. Remember that all the activities that you need to answer will serve as your outputs and will be
forwarded to your subject teacher for checking and recording.
6. Above all, put GOD first in everything you do! 

1
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 2 September 01 – 02, 2020

The learners demonstrate an understanding of ICT in the

Content Standard:
context of global communication for specific professional track.

The learners shall be able to independently compose an

insightful reflection paper on the nature of ICT in the context of
Performance Standard:
their lives, society, and professional tracks (Arts, Tech-Voc,
Sports, Academic)

The learners compare and contrast the nuances of varied online

Learning Competency: platforms, sites, and content to best achieve specific class
objectives or address situational challenges.

Objectives: At the end of the lesson the student should be able to:
1. define and give examples of Information and Communication Technology (ICT).
2. improves their knowledge on how ICT affects their everyday lives and the state of our
nation.
3. learn the different trends in ICT and use them to one’s own advantage.
4. understand the world wide web and other technologies.
5. compare and contrast the differences and implications of varied online platforms, sites
and content.

Content: ICT tools and technologies, emerging trends, online systems,

(Subject Matter) and platforms

Learning Resources:
a. References:
https://www.yondu.com/article/ph-ict-industry-trends-2019-
infographic/
https://mec.ph/infographics/ict-trends-philippines/
https://www.geeksforgeeks.org/web-1-0-web-2-0-and-web-3-0-with-
their-difference/
http://www.wikipedia.com

b. Instructional
Materials SIPacks copy

2
Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 1 )

Activity 1.1.1. GADGET IDENTIFICATION (5 minutes)

Can you pick two of the given images, state their names and functions?

Write your answers here.

1.

2.
B. Establishing a purpose for the lesson

Activity 1.1.2. TRENDING UPDATES (5 minutes)

Answer honestly the following questions.

1. How many times have you checked your phone this morning? ________________

2. What are the various means where you able to communicate a message to somebody and
even check the news update today? _________________________________________

____________________________________________________________________

3. Did you use the internet today? Why? _______________________________________

4. How and/or where did you usually get the information that you’re looking for?

_______________________________________________________________

C. Presenting examples/instances of the lesson

What is Information Communication Technology (ICT)?

ICT deals with the use of different communication technologies such as mobile phones,
telephone, Internet, etc. to locate, save, send, and edit information.
Example: when we make a video call, we use internet.

ICT is an umbrella term that includes any communication device or application,

encompassing: radio, television, cellular phones, computer and network hardware and
software, satellite systems and so on, as well as the various services and applications
associated with them, such as videoconferencing and distance learning.

Aspects/areas and applications where ICT is being utilized:

- Communication, Business. Education, Home and Office, Entertainment and leisure
- Gaming and sports, Information storage & retrieval, Process control and simulation

3
D. Discussing new concepts

ICT Trends in the Philippines

 Philippines as the “ICT Hub of Asia”. Huge growth of ICT related jobs around the
country, one of which is call center or BPO (Business Process Outsourcing)
centers.
 Time magazines declared Makati City, Philippines-Rank 1 as the “Selfiest Cities
around the world, and Rank 9 is Cebu City.
 More than a decade of celebrating the National ICT Month, the government recognizes
the need for strengthening efforts to widen the reach of ICT in the Philippines. In
partnership with various sectors of society, they are extending the benefits of
digitalization to a wider scope of beneficiaries.

The Future of Payments

The rise of online shopping positively contributes to the adoption of e-wallet in the country.
Although cash is still the primary mode of payment, Filipinos are slowly immersing
themselves to online payments. According to BSP, online transactions are to reach 20% of
total payments in 2020– foreshadowing changes in ICT in the PH.

How Often Filipinos Access The Internet For Personal Reasons?

WWW(World Wide Web)

It is one of the services available on the Internet that allows you to get information about
anything and everything ( text, image and more) from any web site anywhere in the world
to your computer.
It is a very huge informal network--- The first billion was reached in 2005. The second
billion in 2010. The third billion in 2014. And as of 2016 3 billion where using the net.
Asia is the large user of the world internet with 1.8 billion as of 2016.

Web 1.0 - refers to the first stage of the World Wide Web evolution.
Design essentials of a Web 1.0:

- Static pages.
- Content is served from the server’s file-system.
- Pages built using Server Side Includes or Common Gateway Interface (CGI).
- Frames and Tables used to position and align the elements on a page.

Web 2.0 - refers to world wide website which highlight user-generated content, usability
and interoperability for end users. Web 2.0 is also called dynamic participative social web.

Key features of Web 2.0:

1. Folksonomy – allows users to categorize and classify/arrange information using

freely chosen keywords (e.g. tagging). Popular social networking sites such as
Twitter, Instagram, Facebook, etc. use tags that start with a pound sign (#) or
hashtag.
2. Rich User Interface – means that content is dynamic and is responsive to user’s
input. An example would be a website that shows local content. In the case of social
networking sites, when logged on, your account is used to modify what you see in
their website.
3. User Participation – means the owner of website is not the only one who is able to
put content. Others are able to place a content on their own by means of comments,
reviews, and evaluation.

4
 4. Long Tail – means that services are offered on demand rather than on a one-time
purchase. This is synonymous to subscribing to a data plan that charges you for the
amount of time you spent on Internet or a data plan that charges you for the amount
of bandwidth you used.

Web 3.0 – refers the evolution of web utilization and interaction which includes altering the
Web into a database.

5 main features of Web 3.0:

1. Semantic Web - improves web technologies in demand to create, share and
connect content through search and analysis based on the capability to comprehend
the meaning of words, rather than on keywords or numbers.
2. Artificial Intelligence – is combining with natural language processing and can
distinguish information like humans in order to provide faster and more relevant
results. They become more intelligent to fulfil the requirements of users.
3. 3D Graphics – refers to three-dimensional design being used widely in websites and
services such as museum guides, computer games, ecommerce, geospatial
contexts.
4. Connectivity – means information is more connected using semantic metadata. As
a result, the user experience evolves to another level of connectivity that leverages
all the available information.
5. Ubiquity – means that content is accessible by multiple applications, every device is
connected to the web, the services can be used everywhere.

E. Continuation of the discussion of new concepts ( DAY 2 )

Online platforms
Online platforms are a specially developed platforms using Internet technology for the design and
development of teaching and learning purposes.

Assistive media platform is a unique avenue of

accessibility for many individuals with cognitive,
physical, and communication disabilities.
Ex: Text to speak, hearing aid

Collaboration platform which is software online

system that adds broad social networking
capabilities to work processes.
Ex: Google Docs

Convergence platform which is the different

technological system sometimes evolves toward
performing similar tasks.
Ex: Smart TV

Mobile media platform which is the

corresponding media technologies, particularly
cloud-based technologies; increasingly important
role in the everyday lives of millions of people.
Ex: Netflix, Spotify

Social media platform are computer-mediated

technologies that facilitate the creation and sharing
of information via virtual communities and networks.
Types:
Social networks – Ex: Facebook, Google+
Bookmarking Sites – Ex: StumbleUpon, Pinterest
Social news – Ex: reddit, digg
Media sharing – Ex: Youtube, Instagram, Flickr
Microblogging – Ex: Twitter, Plurk
Blogs& Forums – Ex: Wordpress, Blogger, Tumblr

5
F. Developing Mastery

Activity 1.1.3. TECHNOLOGICAL TIMELINE (10 minutes)

List down at least 5 technological advances you think should be included on a

timeline(past to present) of the most important technological advances in human history.

Ex: Typewriter – calculator – telegraph . . . etc.

G. Finding practical applications of concepts and skills in daily living

Activity 1.1.4. ICT DEVICES AND APPLICATIONS (10 minutes)

1. Enumerate at least 5 information technology gadgets/devices

2. Give top 5 Applications you commonly use for communication

H. Making generalizations and abstractions about the lesson

Being aware of the power of ICT, can you cite instances on how ICT became very useful
in your daily life?

On the nature of ICT in the context of the Philippine society, kindly recall instances when/
where ICT was used for common advantage or disadvantage?

I. Evaluating learning

TEST 1 SOCIAL MEDIA PLATFORM ( 20 minutes )

Answer the given Crossword puzzle by writing the correct example on Social
Media Platform

Down:

1 Blogs and forums

2 Bookmarking site
4 Media sharing
6 Media sharing
7 Media sharing

Across:

3 Blogs and forums

5 Social news
7 Social networking site
8 Microblogging
9 Blogs and forums

J. Additional activities for application or remediation

Activity 1.1.5. ICT TRENDS (10 minutes)

Instruction:
In no less than 100 words, share and express your own honest experiences and ideas by
composing a short (3 paragraphs) insightful reflection paper on the implications of varied
online platforms in your life as a student.

Guide questions:
1. Cite your personal experience/s or opinion with the various ICT tools and platforms.
2. How does it affect your way of life?
3. How do you want to promote it or even prompt others to refrain from using it? Why?

6
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 2 September 03 – 04, 2020

Content Standard:
The learners demonstrate an understanding of ICT in the
context of global communication for specific professional track.

Performance Standard:
The learners shall be able to 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).

Learning Competency:
The learners apply online safety, security, ethics, and etiquette
standards and practice in the use of ICTs as it would relate to
their specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. define online safety, computer security, threats, computer ethics, and netiquettes.
2. apply how to safeguard oneself and others online.
3. evaluate the implications of ICT in your life, profession, and society.
Content:(Subject
Matter) Online safety, security, ethics, and etiquettes in using ICT

Learning Resources:
a. References:
https://www.huffpost.com/entry/online-safety-what-does-
i_b_6179918
https://www.britannica.com/technology/computer-security
https://teachcomputerscience.com/computer-ethics/
https://www.tamiu.edu/distance/students/netiquette.shtml
https://www.greenriver.edu/students/academics/e-learning/e-
learning-online-netiquette/
Empowerment Technologies for Senior High School (page 8 – 9)

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 3 )

Activity 1.2.1. MY E-LIFE (5 minutes)

Describe how is your digital media life like? Why?

On your note, write three to five sentences about the status of your daily digital life. (i.e. what
gadget/s do you use for what purpose(communication/entertainment), how often/long do you
use it daily, what features/functionalities do you usually use?, etc.)
Start with “My digital media life is like a ...”

B. Establishing a purpose for the lesson

In this lesson, you will learn about the different online and computer security threats,
netiquettes and how to safeguard yourself and others online. Furthermore, you will learn
what are the implications of ICT in your life, profession, and society.

7
C. Presenting examples/instances of the lesson

Activity 1.2.2. SAFE OR UNSAFE? (5 minutes)

Determine the following by writing S for SAFE and U for UNSAFE.

____1. Password consist of varied letters, numbers and symbols

____2. Believe immediately to posted content online
____3. Accepting all friend request
____4. Regularly tweeting ATM (at the moment) updates
____5. Think before you click

D. Discussing new concepts

What is online safety?

According to Wikipedia, the definition of Internet safety is as

follows:
Internet safety, or online safety, is the knowledge of maximizing the user's personal
safety against security risks to private information and property associated with using the
Internet, and the self-protection from computer crime in general.

Computer security refers to the protection of computer systems and information from
harm, theft, and unauthorized use. Computer hardware is typically protected by the same
means used to protect other valuable or sensitive equipment, namely, serial numbers,
doors and locks, and alarms.

Internet Threats:

1. MALWARE - stand for malicious software.

a. Virus – a malicious program designed to replicate itself and transfer one computer
to another either through the Internet and local networks or data storage like flash
drives and CDs.

b. Worm – a malicious program that transfers from one computer to another by any
type of means. Often, it uses a computer network to spread itself. For example, the
ILOVEYOU worm (Love Bug Worm) created by a Filipino.

c. Trojan – a malicious program that is disguised as a useful program but once

downloaded or installed, leaves your PC unprotected and allows hackers to get
your information.

*Rogue Security Software – tricks the user into posing that it is a security
software. It asks the user to pay to improve his/her security but in reality, they
are not protected at all.

d. Spyware – a program that runs in the background without you knowing it (thus
called “spy”). It has the ability to monitor what you are currently doing and typing
through keylogging.

*Keyloggers – used to record the keystroke done by the user. This is done to
steal their password or any other sensitive information. It can record email,
messages, or any information you type using your keyboard.

e. Adware – a program designed to send you advertisements, mostly as pop-ups.

2. SPAM – unwanted email mostly from bots or advertisements. It can be used to send
malware.

8
 3. PHISHING – involves getting a user to enter personal information via a fake website.
Its goal is to acquire sensitive personal information like passwords and credit card
details. This is done by sending you an email that will direct the user to visit a website
and be asked to update his/her username, password, credit card, or personal
information.

*Pharming – a more complicated way of phishing where it exploits the DNS

(Domain Name System, phonebook of the Internet) . It involves
modifying DNS entries, which cause users to be directed to the
wrong website when they visit a certain web address.

Tips to Stay Safe Online:

 Be mindful of what you share online and what site you share it to.
 Do not just accept terms and conditions; read it.
 Check out the privacy policy page of a website to learn how the website handles
the information you share.
 Know the security features of the social networking site you use. By keeping your
profile private, search engines will not be able to scan your profile
 Do not share your password with anyone.
 Avoid logging in to public networks/Wi-Fi. Browsing in “incognito (or private) mode,”
a feature of the browser, will not protect you from hackers.
 Do not talk to strangers whether online or face-to-face.
 Never post anything about a future vacation. It is similar to posting, “Rob my house
at this date.”
 Add friends you know in real life.
 Avoid using untrusted websites.
 Install and update antivirus software on your computer. Use only one anti-virus
software to avoid conflicts.
 If you have a Wi-Fi at home, make it private network by adding a password.
 Avoid downloading anything from untrusted websites. You are most vulnerable in
peer-to-peer downloads (torrents) as the download is most likely not monitored by
the site owner.

E. Continuation of the discussion of new concepts

Computer ethics are a set of moral standards that govern the use of computers. It is
society’s views about the use of computers, both hardware and software. Privacy
concerns(hacking, malware, data protection), intellectual property rights(copyright,
plagiarism, software license) and effects on the society(jobs, environmental impact,
social impact) are some of the common issues of computer ethics.

What Is Netiquette?
A netiquette is a set of rules for behaving properly online that a netizen should observe in
communicating and/or publishing information and materials over the World Wide Web and
in ICT in general. Classes with an online component require the use of good netiquette.

Many e-Learning courses use discussion forums. Here are four tips for good netiquette in
an online discussion.

Netiquette Tips
Regardless of the type of communication used, you should always keep in mind the
following:
o be respectful
o be considerate of others
o think through before responding
o write clearly and concisely
o respond in a timely manner
o use short paragraphs
o spell-check your responses

9
 Avoid:
o CAPITAL LETTERS may be used to EMPHASIZE, but avoid typing in only capital
letters as it may "sound" AS THOUGH YOU'RE SHOUTING!
o rambling writing style; get to the point quickly
o screens full of text

F. Developing Mastery

Protecting Reputations Online

1. Before you post something on the web, ask these questions to yourself: Would you
want your parents or grandparents to see it? Would you want your future boss to see
it? Once you post something on the web, you have no control of who sees your posts.

2. Your friends depend on you to protect their reputation online. Talk to your friends
about this serious responsibility.

3. Set your post to “private.” In this way, search engines will not be able to scan that post.

4. Avoid using names. Names are easy for search engines to scan.

5. If you feel that a post can affect you or other’s reputation, ask the one who posted it to
pull it down or report as inappropriate.

G. Finding practical applications of concepts and skills in daily living

Activity 1.2.3. PRIVACY POLICIES (10minutes)

Visit a social networking site and look for the site’s privacy policy. The link is typically
found at the bottom of the page and sometimes labeled only as “Privacy.” Write a
summary on how the website handles both your private and public information.

H. Making generalizations and abstractions about the lesson

Being fully aware of the possible risks posed by the frequent use of ICT, one has to decide
to apply necessary measures on the use of ICT for our own advantage and be a
responsible and proactive user of ICT.

I. Evaluating learning ( DAY 4 )

TEST 2 ONLINE SAFETY ( 20 minutes )

Instruction: Encircle the words found inside the box. WRITE a brief description for each
word.

Ex. SPAM - a junk mail

VIRUS ETIQUETTE MALWARE

TROJAN CYBERCRIME HACKER
WORM SAFETY ONLINE

10
J. Additional activities for application or remediation

Activity 2.2.4. SHARED OR NOT SHARED? (20minutes)

Below is a questionnaire about how much information you have shared so far. Put a
check ( ✔ ) under Shared or Not Shared.

Types of Information Shared Not Shared

1. First name
2. Last name
3. Middle name
4. Current and previous school (s)
5. Your cellphone number
6. The name of your parents
7. The name of your siblings
8. Your address
9. Your birthday

Most of us use the Internet everyday. Sometimes, we do not pay attention on how much
information we share online.

Analysis: (Write your answers on your notes)

How many checks did you have for shared?

In case, why did you share your full name?
In case, why did you share your birthday?
How many hours do you spend on the Internet per day?
Can you live without the Internet for a week?
How many aspects of your life depend on the Internet?

11
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 3 September 07 – 08, 2020

The learners demonstrate an understanding of the principles and

techniques of design using online/available creation tools,
Content Standard:
platforms, and applications to develop ICT content for specific
professional tracks.

The learners shall be able to independently apply the principles and

Performance
techniques of design using online/available creation tools,
Standard:
platforms, and applications to create original or derivative ICT
content for use in specific professional tracks.

The learners use the Internet as a tool for credible research and
Learning
information gathering to best achieve specific class objectives or
Competency:
address situational challenges.

Objectives: At the end of the lesson the student should be able to:
1. identify the different online research tools
2. understand the importance of online research
3. appreciate the uses of web browser, search engine, and online search tips
4. familiarize the issues and laws associated with online research(copyright and plagiarism)
5. learn and apply online research skills

Contextualized online search and research skills

a. What is online research?
Content:
b. Web browsers and search engines
(Subject Matter)
c. Searching tips and techniques
d. Issues with online research

Learning Resources:
c. References:
https://elearningindustry.com/10-online-research-tools-every-online-
learner-know
https://www.geeksforgeeks.org/difference-between-search-engine-and-
web-browser/
https://holyfamily.libguides.com
https://copyrightalliance.org/ca_faq_post/what-is-copyright/
http://www.mateoaboy.com/f6/blog_files/128ce98299902760f1c540b8dc
f9eec5-4.html
https://writingcenter.ashford.edu/steps-avoiding-plagiarism

d. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 5 )

Activity 2.3.1. COMPUTER VIRUSES (5 minutes)

As a recap with our previous lesson I want you to list down 5 different computer viruses.
.
B. Establishing a purpose for the lesson

In this lesson, you will learn the importance of online research tools, online research skills,
issues with online research, and the different searching tips as part of your daily life.

12
C. Presenting examples/instances of the lesson

Activity 2.3.2. RESEARCH TOOLS THAT I USE (5 minutes)

List down 3 examples of research tools that you are using in finding information online

D. Discussing new concepts

What is an online research?

Online research methods are ways in which researchers can collect data via the internet.
They are also referred to as Internet research, Internet science or iScience, or Web-based
methods.

Online search is the process of interactively searching for and retrieving requested
information via a computer from databases that are online. Interactive searches became
possible in the 1980s with the advent of faster databases and smart terminals.

ContentMine is an online resource which aims to bring over 100,000,000 scientific facts
close to the people, by converting the collective knowledge of the world that is present in
scientific literature into.

Google Scholar provides a simple way to broadly search for scholarly literature. From
one place, you can search across many disciplines and sources: articles, theses, books,
abstracts and court opinions, from academic publishers, professional societies, online
repositories, universities and other web sites.

Sample online searching tools:

1. Google.com
2. ContentMine
3. Google Scholar

Tips on conducting online research:

 Have a question in mind – what do you want to search?
 Narrow it down – simplify and be specific
 Advanced search – use wildcards ?, *, symbols “ “, operators +, -
 Look for credible source – date, author
 Give credit – proper citation and acknowledgement

Web Browser is an example of application software containing address bar that is

developed to retrieve and view the information from web pages or HTML files present on
the web servers.
Example: Microsoft’s internet explorer, Google Chrome, Mozilla Firefox, Opera and Apple
safari.

13
 Search Engine is a kind of website through which users can search (through a search
bar) the content available on the Internet. For this purpose, users enter the desired
keywords into the search field.
Some of the popular ones are: Google, Bing, Yahoo, Duck duck go, Baidu, etc.

E. Continuation of the discussion of new concepts ( DAY 6 )

Research Skills:

“Research” sometimes just means finding out information about a topic. You can
certainly develop advanced information retrieval skills in working with sources. However, in
specific understandings of “research” carry a lot of weight. The classic definition is that
“research” leads to an original contribution to knowledge in a particular field of inquiry by
defining an important question or problem and then answering or solving it in a systematic
way.
So you will need to read on to develop a relevant understanding of what research
means in a subject.

6 Online Research Skills

1. Check Your Sources - evaluate Web Resources as regards to:

- Currency -Accuracy -Authority -Objectively -Coverage
2. Ask Good Questions
"The answers you get in the literature depend on the questions you pose."
— Margaret Atwood
3. Go Beyond The Surface
Persistence by continuing to pursue information to gain a broad perspective.
4. Be Patient
“Patience is a virtue”
5. Respect Ownership
Respecting intellectual property rights of creators and producers
6. Use Your Networks
Using social networks and information tools to gather and share information.

Issues with Online Research:

A copyright is a collection of rights automatically vested

to you once you have created an original work, such as a
film, song, or literary work.

The purpose of copyright law is to promote the progress of useful arts and science by
protecting the exclusive right of authors and inventors to benefit from their works of
authorship.

Copyright Infringement
If you create something – an idea, an invention, a form of literary work, or a research,
you have the right as to how it should be used by others. This is called Intellectual
Property.
In other words, the copyright law includes your rights over your work, and anyone who
uses it without your consent is punishable by the law.

14
Tips that could help avoid copyright infringement:
 Understand – express something using your own words. You should give credit to
the source.
 Be Responsible – know if something has copyright.
 Be Creative – add your own creative genius.
 Know The Law - some limitations to copyright laws only last a lifetime (of the
author) plus 50 years

Plagiarism is defined as taking someone else’s work as your own by:

 Cutting and pasting from other sources
 Quoting without “…” or a citation
 Paraphrasing or summarising without a citation
 Using images, tables or graphs without a citation
 Re-using own work which was previously marked
 Collaborating on what should be individual work

Steps to Avoiding Plagiarism

Step 1: Understand Plagiarism. Plagiarism is when you use another person's words
or ideas and try to pass them off as your own
Step 2: Properly Quote and Paraphrase
Step 3: Properly Cite Sources
Step 4: Check Your Work for Possible Plagiarism using anti-plagiarism tools
Step 5: Practice

Easier and Faster Online Searching Tips:

1. Use unique, specific terms

A Google search of those terms returned 2,440,000 results! To reduce the number of
pages returned, use unique terms that are specific to the subject you are researching.

2. Use the minus operator (-) to narrow the search

The rarely used but powerful minus operator, equivalent to a Boolean NOT, can remove
many unwanted results. For example, when searching for the insect caterpillar,
references to the company Caterpillar, Inc. will also be returned. Use Caterpillar -Inc to
exclude references to the company or Caterpillar -Inc -Cat

3. Use quotation marks for exact phrases

I often remember parts of phrases I have seen on a Web page or part of a quotation I want
to track down. Using quotation marks around a phrase will return only those exact words in
that order. It's one of the best ways to limit the pages returned. Example: "Be nice to
nerds." Of course, you must have the phrase exactly right -- and if your memory is as good
as mine, that can be problematic.

4. Don't use common words and punctuation

Common terms like a and the are called stop words and are usually ignored. Punctuation
is also typically ignored. But there are exceptions. Common words and punctuation
marks should be used when searching for a specific phrase inside quotes. There are
cases when common words like the are significant. For instance, Raven and The
Raven return entirely different results.

5. Capitalization
Most search engines do not distinguish between uppercase and lowercase, even within
quotation marks. The following are all equivalent:

technology
Technology
TECHNOLOGY
"technology"
"Technology"

15
 6. Drop the suffixes
It's usually best to enter the base word so that you don't exclude relevant pages. For
example, bird and not birds, walk and not walked. One exception is if you are looking for
sites that focus on the act of walking, enter the whole term walking.

7. Maximize AutoComplete
Ordering search terms from general to specific in the search box will display helpful results
in a drop-down list and is the most efficient way to use AutoComplete. Selecting the
appropriate item as it appears will save time typing. You have several choices for how the
AutoComplete feature works:

Developing Mastery

Activity 2.3.3. ONLINE RESEARCH, TOOLS AND SKILLS (5 minutes)

7. In your own words, what is online research?

8. What is the importance of online research tools?
9. Give one research skill and explain it briefly.

F. Finding practical applications of concepts and skills in daily living

Activity 2.3.4. ONLINE SEARCHING TIPS (10 minutes)

On a separate sheet of paper list down 7 different tips in online searching.

G. Making generalizations and abstractions about the lesson

Online learning has opened up the opportunity for many people to educate themselves,
learn new skills, and earn college degrees even if they are not able to attend classes in a
traditional sense of the word. But being online also makes you more prone to
procrastination, distractions and other associated issues that needs to be addressed
properly.

H. Evaluating learning

TEST 3 ONLINE RESEARCH SKILLS( 20 minutes )

Answer the following questions:

1. What do you usually search in the internet?

2. After knowing the different search tips in searching the net, have you already
encountered or used one or more of the search tips? What made you realized after
knowing such? Explain in 3 to 5 sentences.

I. Additional activities for application or remediation

Activity 2.3.5. SEARCH ENGINE / BROWSER (10 minutes)

Answer the following:

A. Other than the given examples in the lesson,

1. List 3 other search engines

2. List 3 other web browsers

B. In your own short words, differentiate copyright from plagiarism

C. Find out what specific laws(Republic Act) does copyright and plagiarism apply?
(Cite reference/s)

16
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 3 September 09 – 11,14 – 15, 2020

The learners demonstrate an understanding of the use of advanced

tools and techniques found in common productivity and software
Content Standard:
applications in developing ICT content for specific professional
tracks.

The learners shall be able to independently apply advanced

Performance
productivity tools to create or develop ICT content for use in specific
Standard:
professional tracks.

Learning The learner uses common productivity tools effectively by

Competency: maximizing advanced application techniques.

Objectives: At the end of the lesson the student should be able to:
1. define and identify different productivity tools.
2. enumerate steps in doing mail merge, custom animations and hyperlink.
3. maximize advance application techniques using formula and function.

1. Productivity tools
2. Mail merge
Content:
3. Custom animations and timing
(Subject Matter)
4. Hyperlinking in presentations
5. Advanced and complex formulas and computations

Learning Resources:
e. References:
http://www.combinebasic.com/2015/parts-and-functions-of-powerpoint-
2010.html?=0
http://www.slideshare.net/mobile/kuriachankalathy/ms-excel-27523839
http://officetutorial.net/word/microsoft-word-2007-and-2010-parts-and-
controls/387/amp/
https://www.javatpoint.com/how-to-apply-a-custom-animation-effect-
powerpoint
https://support.office.com/en-us/article/link-to-another-slide-in-the-
same-presentation-7eb3f922-d3d5-4090-9892-76d8132b5cac

f. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 7 )

Activity 2.3.1. FAMILIARIZING WITH TOOLS/APPS (5 minutes)

What tools, application or apps will you be using for:

a. writing an application letter, why?
b. computing your weekly expenses, why?

17
B. Establishing a purpose for the lesson

Activity 2.3.2. WHO AM I? (5 minutes)

Little Johny is tasked by his computer teacher to match the function of each icon to
the logo itself by putting letters on the blank provided. Go and help little Johny do his
task!

_____ 1. I am a program for free-form information gathering and multi-user collaboration,

who am I?
_____ 2. I can switch between Microsoft office on my PC to my office in my Android
phone, who am I?
_____3. I am considered one of the best note-taking apps available. I have tons
of features and is compatible with almost every smartphone and computer,
who am I?
_____4. I am a free cloud-based storage service that enables users to store and access
files online, who am I?
_____5. I am a type of time tracking software includes a timer, and it allows you to
record timesheets and then creates reports, who am I?

C. Presenting examples/instances of the lesson

What is Productivity tool?

Productivity tools (also known as productivity software) have a purpose in our everyday
lives, both at home and at work. ... “Productivity tools” refers to the software that people
use to create and produce documents, presentations, databases, charts, and graphs.

18
Microsoft Word is a Graphical word processing program that users can type with. It is
made by the computer company Microsoft. Its purpose is to allow users to type and save
documents.

Microsoft PowerPoint is powerful presentation software developed by Microsoft. It is a

standard component of the company's Microsoft Office suite software, and is bundled
together with Word, Excel and other Office productivity tools. The program uses slides to
convey information rich in multimedia. The term "slide" refers to the slide projector, which
this software effectively replaces.

19
Microsoft Excel is electronic spreadsheets used to manipulate numerical data with
formulas &built-in functions.

Mobile application also referred to as a mobile app or simply an app, is a computer

program or software application designed to run on a mobile device such as
a phone, tablet, or watch. Apps were originally intended for productivity assistance such as
email, calendar, and contact databases.

20
D. Discussing new concepts ( DAY 8 )

Word’s Mail Merge consists in combining mail and letters and pre-
addressed envelopes or mailing labels for mass mailings from a form letter.
This feature is usually employed in a word processing document which contains
fixed text (which is the same in each output document) and variables (which act as
placeholders that are replaced by text from the data source). Some word processors can
insert content from a database, spreadsheet, or table into text documents.
Steps in doing Mail Merge:
1. Create a form letter which you intend to print or e-mail multiple times, sending each
copy to different recipient.
2. Create your database by inserting fields, such as Name or Address, which Word will
replace automatically with information from a database.
3. Go to Mailings, click Select Recipient,
4. Choose Type New List, this is where you create your database.
5. Once done encoding needed data, click Ok. It will ask you to save your database as
<filename>.mdb.

6. Select the field you wish to change like Name or Address by going to Mailings menu,
then choose Insert Merge Field.

7. To print go to Mailings, click Finish & Merge, then choose Edit Individual…

E. Continuation of the discussion of new concepts

PowerPoint Custom Animation is a set of effects which can be applied to objects

in PowerPoint so that they will animate in the Slide Show. They can be added under
the Custom Animation function or through the use of Visual Basic for Applications (VBA).

Steps in Doing Custom Animation

Effect:

1. Select the text or object.

2. Select the Animation tab.
3. In Animation group click
the Custom Animation.
4. Custom Animation task pane
appears on the right.
5. Click the Add Effect, it will display
four options that are further
divided into different options.
6. Select the desired effect.

21
Hyperlinks in PowerPoint are similar to links you might have seen on a web site. They
allow you to jump back and forth between specific slides in your presentation, to movie
files that don't work on PowerPoint slides, to other files, or to a webpage (if you are
connected to the Internet)
Steps in doing hyperlink to other slides on the same presentation:
1. In Normal view, select the text, shape, or picture that you want to use as a hyperlink.
2. On the Insert tab, click Hyperlink.
3. In the Insert Hyperlink dialog box, under Link to, click Place in This Document.
4. Under Select a place in this document, click the slide that represents
the hyperlink destination.

Formula and computations in MS Excel Spreadsheet:

Cell is the intersection of rows and columns; a rectangular box where you store or type
your data. Each cell has a unique name represented by the column header and row
header.
Column Header are represented by letters ( A B C …. )
Row Header are represented by numbers. ( 1 2 3 …. )

3 types of data entry in Excel’s cell:

1. Text
2. Value
3. Formula
Note: All formula and function start with an equal = symbol at the beginning.
Formula is an expression which calculates the value of a cell. In order to perform
calculation, it uses individual cell address and arithmetic operators such as +, -, *, /.

Sample actual formula:

=A1 + A2 + C1 + C2 where the values of A1 A2 C1 C2 will be added up together
=A1 - C2 where the value of C2 is subtracted from the value A1
=A1 / B2 where the value of A1 is divided with the value B2
=A1 * C1 where the value of A1 is multiplied by the value of C1
Function is a predefined formula that performs calculations using specific values in a
particular order. Excel includes many common functions that can be used to quickly find
the sum, average, count, maximum value, and minimum value for a range of cells.
Syntax: =FUNCTIONNAME(RANGE)
Example: =SUM(A1:A4)
where: SUM is the function(to add); (A1:A4) is the address range containing values to
add
Sample functions at work:

1. =AVERAGE(A1:C1) this will give an average value of the specified range.

2. =SUM(A1:D1) this will total all numbers inside the range.
3. =MIN(A1:D1) this will return the least value inside the range.
4. =MAX(A1:D1) this will return the maximum value inside the range.

22
F. Developing Mastery ( DAY 9 )

Activity 2.4.3. PRODUCTIVITY TOOLS (25 minutes)

10. What is productivity tool?

11. What is the importance of productivity tool?
12. Give 4 examples of productivity tools and their functions?
1. 3.
2. 4.

G. Finding practical applications of concepts and skills in daily living ( DAY 10 )

Activity 2.4.4. MS WORD ENVIRONMENT (10 minutes)

On a one whole sheet of paper write the different parts of MS Word Environment.

1. 4. 7.
2. 5. 8.
3. 6. 9.

Activity 2.4.5. USING MS WORD (25 minutes)

Recall your prior knowledge and skills in using MS Word, enumerate the steps from:

a. Starting the application

b. Creating a new file
c. Typing and doing some editing/formatting on the content/body of the document
d. Saving the file
e. Closing the file/application

H. Making generalizations and abstractions about the lesson

Because of the available productivity software and apps, common business, office, and
school tasks became a lot easier nowadays. By applying proper techniques and
procedures, one could easily perform writing/editing skills, numeracy skills, and
presentation skills which are necessary today. Thus, increasing one’s productivity by using
it to one’s own competitive advantage.

1. Evaluating learning ( DAY 11 )

TEST 4 EXCELSIMULATION ( 30 minutes )

WRITE the FORMULA or FUNCTION of the following cells marked with YELLOW.

1. To get the DAILY ALLOWANCE of 200 in CELL B2 the formula is weekly

allowance divided by 5, so you are to WRITE B2= B1/5.
2. To get the SAVINGS the formula is daily allowance less the expense.
3. To get the TOTAL, simply add all expenses and then all savings.
4. To get the MINIMUM, simply find the lowest number in the expenses column and
savings column.
5. To get the MAXIMUM, simply find the highest number in the expenses column
and savings column.

23
 My Workbook for Weekly Budget

YOUR ANSWERS:

B2 __= B1/5___
B10 ___________
B12 ___________
B13 ___________
C5 ___________
C6 ___________
C7 ___________
C8 ___________
C9 ___________
C10 ___________
C12 ___________
C13 ___________

J. Additional activities for application or remediation

Activity 2.4.6. WHAT I LEARN IN PRODUCTIVITY TOOLS? (10 minutes)

Write 3 parts/subtopic of the lesson that you like most and explain briefly why?

24
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 4 September 16 – 18, 2020

The learners demonstrate an understanding of the use of advanced

tools and techniques found in common productivity and software
Content Standard:
applications in developing ICT content for specific professional
tracks.

The learners shall be able to independently apply advanced

Performance
productivity tools to create or develop ICT content for use in specific
Standard:
professional tracks.

The learners creates an original or derivative ICT content to

Learning
effectively communicate or present data or information related to
Competency:
specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. understand how images and objects are integrated in a word processor.
2. identify the various objects used in productivity tools.
3. learn how to embed files and data in productivity tools.
4. simulate steps/procedures in integrating and embedding files and objects.

1. Integrating images and external objects

Content:
2. Embedding files and data
(Subject Matter)
3. Some common keystroke combinations / shortcut keys

Learning Resources:
a. References:
https://www.coursehero.com/file/24289751/Integrating-Images-and-
External-Material-in-Word-Processorsdocx/
https://www.bettercloud.com/monitor/the-academy/7-useful-keyboard-
shortcuts-microsoft-word/
https://www.howtogeek.com/357623/microsoft-word-keyboard-shortcuts-
that-make-your-life-easier/
https://edu.gcfglobal.org/en/powerpoint2013/embedding-an-excel-
chart/1/

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 12 )

Have you ever experienced inserting images or pictures in a Word document?

What about embedding files and data onto another file or object?
If your answer is YES, then, we’ll enhance your skills but if your answer is NO, then this is
your opportunity to learn and apply these productivity skills.

What if you were tasked to perform something like this in one of your subjects?

B. Establishing a purpose for the lesson

In this lesson, you will learn the how images and external materials are integrated in MS
Word document, embed files and data in a presentation and familiarize the benefit of time-
saving keystroke commands.

25
C. Presenting examples/instances of the lesson

Integrating Images and External Materials

Integrating or inserting pictures in your document is fun and it improves the

impression of your document. A common use of inserting a picture on a document is when
you are creating a resumé or when writing a document with images, objects, cliparts
or shapes.

Kinds of Materials/objects

There are various kinds of materials Microsoft® Word is capable of integrating to make
your document richer, more impressive, and more informative.

1. Pictures – generally, these are electronic or digital pictures or photographs you

have saved in any local storage device. There are three commonly used types of picture
files. You can identify them by the extension on their file names.

a. JPG – this is pronounced as “jay-peg,” and is the short form for .jpeg or file
extension for the Joint Photographic Experts Group picture file. Like all the rest of
the image file extensions, it identifies the kind of data compression process that is uses
to make it more compatible and portable through the Internet. This type of image file can
support 16.7 million colors that’s why it is suitable for use when working with full color
photographic images. Unfortunately, it does not support transparency. But if you are
looking for the best quality image to integrate with your document, then this is the
image file type for you.

b. GIF – file extension for the Graphics Interchange Format image file. This type of
image file is capable of displaying transparencies. Therefore, it is good for blending
with other materials or elements in your document. It is also capable of displaying
simple animation. It can only support up to 256 colors that is why .GIF is much
better for logos, drawings, small text, black and white images, or low-resolution
files.

c. PNG – this is pronounced as “ping.” It stands for Portable Network Graphics that
was built around the capabilities of .GIF. Its development was basically for the
purpose of transporting images on the internet at faster rates. It is also good with
transparencies but unlike .GIFs, it does not support animation but it can display up
to about 16 million colors. .PNG allows the control of the transparency level or
opacity of images.

2. Clip Art – this is generally a .GIF type; line art drawings or images used as generic
representation for ideas and objects that you might want to integrate in your document.
Microsoft® Word has a library of clip arts that is built in or can be downloaded and used
freely. There are still other clip arts that you can either purchase or freely download and
use that come from third-part providers.

3. Shapes – these are printable objects or materials that you can integrate in your
document to enhance its appearance to allow you to have some tools to use for

26
 composing and representing ideas or messages. If you are designing the layout for a
poster or other graphic material for advertising, you might find this useful.

4. Smart Art – generally, these are predefined sets of different shapes grouped
together to form ideas that are organizational or structural in nature. If you want to
graphically represent an organization, process, relationships, or flow for infographic
documents, then you will find this easy and handy to use.

5. Chart – another type of material that you can integrate with your Word document that
allows you to represent data characteristics and trends. This is quite useful when you
are preparing reports that correlate and present data in a graphical manner. You can
create charts that can be in your document either directly in Microsoft® Word or imported
from external files like Microsoft® Excel.

6. Screenshot – sometimes, creating reports or manuals for training or procedures will

require the integration of a more realistic image of what you are discussing on your
report or manual. Nothing can get you more realistic image than a screenshot. Microsoft®
Word even provides a snipping tool for your screen shots so you can select and display
only the part that you exactly like to capture on your screen.

D. Discussing new concepts

Image/Text Wrapping / Placement / Positioning

1. In Line with Text – this setting is usually used

when you need to place your image at the
beginning of the paragraph.

2. Square – this setting allows the image you

inserted to be placed anywhere within the
paragraph with the text going around the image
in a square pattern like a frame.

3. Tight – this setting can mostly achieved if you

are using an image that supports transparency
like a .GIF or .PNG file.

4. Through – this setting allows the text on your

document to flow even tighter, taking the
contours and shape of the image. Again, this can
be best used with a .GIF or .PNG type of image.

5. Top and Bottom – this setting pushes the

texts away vertically to the top and/or the bottom
of the image so that the image occupies a whole
text line on its own as in the example.

6. Behind Text – this allows your image to be dragged and placed anywhere on your
document but with the all texts floating in front of it. It effectively makes your image look
like a background.

7. In Front of Text – as it suggests, this setting allows your image to be placed right on
top of the text as if your image was dropped right on it.

The following are the steps on inserting images to a Word document:

1. Start a blank Word document and write a resume or open a Sample Letter (or any
other letter) from your Desktop or Documents folder.
2. Place your insertion point or cursor to where you want the image or picture to
appear. Just right at the very beginning of the first paragraph will do.
3. Go to the Illustrations group under the Insert tab on the ribbon or menu.
4. Click on Picture ―→ Insert Picture from File.

27
 5. The Insert Picture dialog box will pop up almost similar to your file explorer
window. Navigate to your Desktop and click on the Solar.jpg file.
6. Click the Insert button to insert a copy of the Solar.jpg picture on your document.
7. Right-click on the image then click on the Wrap Text sub-menu. On the fly out,
click on the Square option. Remember that this setting will flow around your image
like a rectangular frame.
8. Drag your image to the desired location on the document so that your document.
9. Repeat steps 2 through 6. Only this time, place the insertion point at the very end
of the document and insert the Joe.png image. This is actually the digital signature
of our fictional character, Joe Green.
10. Again, right-click on the image then click on the Wrap Text sub-menu. This time,
on the fly out, click on the Behind Text option. This should allow you to place the
signature image arbitrarily along the printed name on the document, so it would
look exactly like a real signature. We chose this option because our signature
image, in this example, does not have transparent background. If it were, setting it
In front of Text would be a better option.
11. Now we need to work on the chart. This will require us to work with the wizard to
set up the parameters of our chart. On your document, place your insertion point or
cursor on the position where you want the chart to appear.
12. In the Illustrations group under the Insert tab, click on Chart. This will bring up
the Insert Chart dialog box.
13. On the right pane, inside the Insert Chart dialog box, scroll down to the Pie row,
and select Exploded Pie in 3D.
14. An excel worksheet will pop up showing the default data that Microsoft® Word
uses for the chart. For the sake of our example, modify the data on the worksheet
so that the heading “Sales” will read “Volume” and the labels 1 st to 4th QTR will
read “Europe,” “America,” “Middle East,” and “Asia,” respectively.
15. Drag the chart’s corner handle to suitable size.
16. Click on the chart’s Text Wrap option and select Top and Bottom.
17. Drag the chart to the center of the page in between the second and third paragraph
of your document.
18. Save your document.

E. Continuation of the discussion of new concepts ( DAY 13 )

Keystrokes or shortcut keys - are very useful keyboard combination that automates
certain actions of tasks in order to make your writing and editing process super-efficient.

General MS Word Shortcuts

Ctrl+N: Create a new document. Ctrl+W: Close a document.

Ctrl+O: Open an existing document. Ctrl+Z: Undo an action.
Ctrl+S: Save a document. Ctrl+Y: Redo an action.
Ctrl+P: Print a file F12: Open the Save As dialog box
Alt+Ctrl+S: Split a window or remove the split view.

7 Useful Time-Saving Keyboard Shortcuts:

Ctrl + Enter: Insert page break F5: Go to a page, section, line, & more
F4: Repeat your last command F12: Save as
Ctrl + E: Center text Ctrl + F6: Cycle through your open Word docs
Alt + Shift + Left/right arrow key: Create headings

Some Editing Keystrokes:

Ctrl A – Select all Ctrl H – Find and Replace Ctrl R – Right align
Ctrl B – Bold Ctrl I – Italicize Ctrl T – Hanging indent
Ctrl C – Copy Ctrl J – Justify Ctrl U – Underline
Ctrl D – Format font Ctrl K – Insert hyperlink Ctrl V – Paste
Ctrl E – Center align Ctrl L – Left align Ctrl X – Cut

28
 Ctrl F – Find/search Ctrl M – move Tab Ctrl R – Right align
Ctrl G – Go to page# Ctrl Q – Left align

F. Developing Mastery

Activity 3.5.1. SIMULATION: EMBEDDING AN EXCEL CHART IN POWERPOINT

(20 minutes)

TASK: WRITE a summary of the procedures in your own words. You may provide a
different procedure since there are other ways to perform this activity. USE Bullet form.

When you embed an Excel chart in PowerPoint, any updates you make to the
original Excel chart will automatically update in your presentation, as long as the files
remain in the same location. This helps the data stay in sync, so you won't have incorrect
or out-of-date information in your chart.

To embed a chart from Excel:

In PowerPoint, select the Insert tab.

Click the Object command in the Text group.

A dialog box will appear. Select Create from file, then click Browse.

29
Locate and select the desired Excel file, then click Insert.

Check the box next to Link to file if you want to link the data to the Excel chart. This will
enable your chart to update itself when changes are made to the Excel chart.

Click OK. The chart will now appear in your presentation.

To edit an embedded chart, double-click the chart. An Excel spreadsheet

containing the chart's source data will appear. After you have finished editing, be sure
to save the chart in Excel.
Once you have embedded a chart, be careful not to delete or move the original Excel file.
If the location of either the PowerPoint presentation or the Excel files changes, you may
have to embed the chart again in order for it to display correctly.

30
G. Finding practical applications of concepts and skills in daily living

Activity 3.5.2. CREATING / INTEGRATING MATERIALS (20 minutes)

TASK: Discuss the procedures and rationale for accomplishing the given requirements
and specifications:

1. As a graphic artist and illustrator for ABC Corporation, you are tasked to create and
enhance certain ICT contents for your new product line, the Covid soap. You will
need to design the product catalogue highlighting the various colors and health
benefits of the product. The product will be then posted in your company’s website
so it must also be transparent. Coordinate with your immediate supervisor about the
complete details of the company’s requirement to your assigned task. What type of
picture file format are you going to save your final design and why?

2. There will be an upcoming Division-wide Go Negosyo Fair this coming December

2020. The annual event will showcase the best practices and product output of the
participating schools and students in the City of San Fernando, Pampanga. As a
student who is skillful in using the productivity tools particularly in MS Word and
other available tools, you were assigned the tasks of:

a. composing and representing ideas or messages, designing the layout for a

poster or other graphic material for advertising your school’s product outputs,

b. to graphically represent processes, relationships, or flow for infographic

documents,

c. preparing reports that correlate and present data in a graphical manner.

3. What features of the tools and kinds of materials or objects (particularly in MS Word)
are you going to use in accomplishing the given tasks?

H. Making generalizations and abstractions about the lesson ( DAY 14 )

Objects such as images are also designed to be integrated in word processors to

make the document easier and more readable to handle. Integrating objects can be done
in the form of inserting or copying/pasting the object into the word document.

Linking objects or slides to another slide presentation will point the object or file or site
such that when the link is activated, it will lead or result to the intended connection. On the
other hand, embedding data or file changes the final output when the source object, data
or file is modified such as the raw data used in graphs or charts will change the
appearance of the graph or chart.

The use of integrating, linking, or embedding object, data, or file depends on the
purpose and necessity where the individual or organization needs it the most.

31
I. Evaluating learning

TEST 5 INTEGRATING / EMBEDDING FILES ( 20 minutes )

Multiple Choice

32
 True or False:
1. When you embed an Excel chart in PowerPoint, any updates you make to the original Excel
chart will automatically update in your presentation, as long as the files remain in the same
location.
2. Text wrapping is an option to position the text or image in the document.
3. Ctrl + Backspace is use to insert page break in Word document.
4. The use of integrating, linking, or embedding object, data, or file depends on the purpose and
necessity where the individual or organization needs it the most.
5. Microsoft® Word is capable of integrating to make your document richer, more impressive, and
more informative.

Short reflection:
Discuss in three (3) for five(5) sentences about what part of the lesson you liked most and why?

J. Additional activities for application or remediation

Activity 3.5.3. LINKING, EMBEDDING, KEYSTROKES (15 minutes)

1. What is the main difference between linking and embedding?

2. Which one is best fitted for performing productivity tasks and why?
3. Give 5 keystrokes that you like to use most. Why?

33
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 5 September 21 – 22, 2020

The learners demonstrate an understanding of how to manipulate

Content Standard: text, graphics, and images to create ICT content intended for an
online environment.

The learners shall be able to independently apply the techniques of

Performance image manipulation and graphic design to create original or
Standard: derivative ICT content from existing images, text and graphic
elements for use in specific professional tracks.

Learning The learners evaluate existing websites and online resources based
Competency: on the principles of layout, graphic and visual message design.

Objectives: At the end of the lesson the student should be able to:
1. discuss the basic concept of website, design, principles of graphics and layout.
2. distinguish text, graphics, images and file formats as elements of ICT contents.
3. dvaluate selected websites and online resources using evaluation instrument.

Content:
Imaging and Design for the Online Environment
(Subject Matter)
Learning Resources:
a. References:
https://en.wikipedia.org/wiki/Website
https://www.interaction-design.org/literature/topics/web-design
https://www.wearetrident.co.uk/six-main-principles-graphic-design/
https://99designs.com/blog/tips/image-file-types/
https://infograph.venngage.com/p/221558/basic-principles-of-graphics-
and-layout
https://www.resourcetechniques.co.uk/news/web-design/5-basic-
elements-of-web-design-100152
https://slideplayer.com/slide/7431196/

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 15 )

Activity 4.6.1. IMAGE FORMAT AND EMBEDDED FILE (5 minutes)

1. Give 2 sample objects/materials that can be integrated or embed in a file.
2. Give 2 sample file image format you’ve learned in the previous lesson.

B. Establishing a purpose for the lesson

Activity 4.6.2. WEBSITES I VISIT REGULARLY (10 minutes)

1. Have you ever visited any website? Were you attracted to these websites? Why?
2. Will you keep visiting these websites? Please explain briefly your answer on your
sheet of paper.
3. List 5 different websites that you have or kept on visiting.

34
C. Presenting examples/instances of the lesson

A website is a collection of web pages and related content that is identified by a

common domain name and published on at least one web server. Examples
are wikipedia.org, google.com, and amazon.com.

Websites are typically dedicated to a particular topic or purpose, such as news,

education, commerce, entertainment, social networking, etc.

Users can access websites on a range of devices, including desktops, laptops, tablets,
and smartphones. The software application used on these devices is called a web
browser.

Web design refers to the design of websites that are displayed on the internet. It
usually refers to the user experience aspects and it used to be focused on designing
websites for desktop browsers; however, since the mid-2010s, design for mobile and
tablet browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a
website. Appearance, for instance, relates to the colors, font, and images used. Layout
refers to how information is structured and categorized. A good web design is easy to use,
aesthetically pleasing, and suits the user group and brand of the website.

D. Discussing new concepts

The main design principles that apply to any piece of graphic design

The principles of design suggest how a designer can best arrange the various elements of
a page layout in connection to the overall graphic design and to each other. How these
principles are applied determines how effective the design is in conveying the desired
message and how attractive it appears.

The elements or principles of visual design include balance, alignment, contrast,

proximity/unity, repetition/consistency, and white space. These principles of design work
together to create something that is aesthetically pleasing and optimizes the user
experience of an ICT content whether for soft copy, print, or for online environment.

Balance
Visual balance comes from arranging the elements so that no section is heavier than
another. Sometimes elements are thrown out of balance to give emphasis or create a
certain mood. Typography, colors, images, shapes, patterns, etc.—carries a visual weight.
Some elements are heavy and draw the eye, while other elements are lighter. The way
that these elements are laid out on a page should create a feeling of balance

35
Contrast refers to how different elements are in a design, making them more easily
discernible from one another. Contrast is very important in creating accessible designs.
Insufficient contrast can make text content in particular very difficult to read, especially for
people with visual impairments

Proximity/Unity
The relationship between people or elements in a design is affected by proximity. How
close or far apart elements are suggests a relationship or lack of. Unity can be created by
using a third element to connect distant parts. Are all the title elements together? Is
contact information all together? Are all related elements together? In design proximity or
closeness creates a bond or a link.

Alignment
Alignment brings order to the design. How type and graphics are aligned on a page and in
relation to each other makes the layout easier or more difficult to read. Has a grid been
used? Is there a common alignment?

Repetition/Consistency
Repeating design elements and consistency of style shows a reader where to go and
helps them navigate the design. Do the page numbers appear in the same place from
page to page? Are headlines consistent in size style, placement? Is the style consistent
throughout?

White space
Designs that cram too much into a small space are uncomfortable and maybe confusing
and difficult to read. White space gives the design breathing space. Is there enough space
between columns of text? Does text sit clear of the graphics? But beware too much white
space and the elements will seem to float on the page.

What is visual message design?

Visual message design involves the appropriate considerations of visual perceptions

when designing an instructional program. The interpretation of pictures is based on prior
experiences, culture, etc. ... The purpose of visual message design is to gain attention,
create meaning, and facilitate retention.

Infographics - also known as data visualization, information design, and communication

design are graphic visual representations of information, data, or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing graphics to
enhance the human visual system's ability to see patterns and trends.

The Elements of Infographics:

 Text
 Graphs
 Pictures
 Diagrams
 Narrative
 Timelines
 Check list

Infographics allow us to TELL a more complete STORY of the data and are more
ENGAGING than most traditional ways of communicating data and information. The focus
of good infographics is always on communicating INSIGHTS.

36
 Types of Infographics
1. Statistical
2. Process Flow
3. Geographic

Process of Making Infographics

Research - know what is needed, take a
reference, know the audience, decide the type
of infographics
Brainstorm - gather ideas, build thought
process
Design - choose your tool and start designing
Review - cross check the data to deliver
flawless output
Launch - make it viral, share on social network

Best Practices When Creating Infographics

a) Maintain a structure
b) Don’t use more than 3 color palletes
c) Typography matters a lot
d) Include source and references

E. Continuation of the discussion of new concepts ( DAY 16 )

A file format is a standard way that information is encoded for storage in a computer file.
It specifies how bits are used to encode information in a digital storage medium. File
formats may be either proprietary or free and may be either unpublished or open.

Types of Image File Format

JPEG (or JPG) - Joint Photographic Experts Group

JPEGs might be the most common file type you run across on the web, and more than
likely the kind of image that is in your company's MS Word version of its letterhead.
JPEGs are known for their "lossy" compression, meaning that the quality of the image
decreases as the file size decreases.

PNG - Portable Network Graphics

PNGs are amazing for interactive documents such as web pages, but are not suitable for
print. While PNGs are "lossless," meaning you can edit them and not lose quality, they are
still low resolution.

37
 GIF - Graphics Interchange Format
GIFs are most common in their animated form, which are all the rage on Tumblr pages
and in banner ads. It seems like every other day we have a new Grumpy Cat or Honey
Boo Boo animated GIF. In their more basic form, GIFs are formed from up to 256 colors
in the RGB colorspace. Due to the limited number of colors, the file size is drastically
reduced.

TIFF - Tagged Image File

A TIF is a large raster file that doesn't lose quality. This file type is known for using
"lossless compression," meaning the original image data is maintained regardless of how
often you might copy, re-save, or compress the original file.

PSD - Photoshop Document

PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics
editing software ever. This type of file contains "layers" that make modifying the image
much easier to handle. This is also the program that generates the raster file types
mentioned above.

PDF - Portable Document Format

PDFs were invented by Adobe with the goal of capturing and reviewing rich information
from any application, on any computer, with anyone, anywhere. I'd say they've been pretty
successful so far.

EPS - Encapsulated Postscript

EPS is a file in vector format that has been designed to produce high-resolution graphics
for print. Almost any kind of design software can create an EPS.

AI - Adobe Illustrator Document

AI is, by far, the image format most preferred by designers and the most reliable type of
file format for using images in all types of projects from web to print, etc.

INDD - Adobe Indesign Document

INDDs (Indesign Document) are files that are created and saved in Adobe Indesign.
Indesign is commonly used to create larger publications, such as newspapers, magazines
and eBooks.

RAW - Raw Image Formats

A RAW image is the least-processed image type on this list -- it's often the first format a
picture inherits when it's created. When you snap a photo with your camera, it's saved
immediately in a raw file format. Only when you upload your media to a new device and
edit it using image software is it saved using one of the image extensions explained
above.

F. Developing Mastery

Activity 4.6.3. INFOGRAPHIC: ELEMENTS AND PROCEDURE (10 minutes)

1. Enumerate 5 file format that you think are most appropriate in designing an ICT
content.
2. Give the 5 elements of infographics. In your own words, explain briefly each
element.
3. Create your own step by step procedures in accomplishing an infographic.

38
G. Finding practical applications of concepts and skills in daily living

Activity 4.6.4. FILE FORMAT (15 minutes)

1. Based on your own honest opinion and experience, what is the difference between
PDS and PDF file format? Which one has advantages over the other? Why? Write
your composition on your activity sheet.

2. Compose in a 3 to 5 sentences why web design principles are necessary to consider

in a website?

H. Making generalizations and abstractions about the lesson

Cite instances where:

a. A website is necessary for an individual or organization particularly in our fast-
changing technology nowadays.
b. An image file format is most appropriate for a specific layout design

Knowing the basic design principles in web development is a key to producing, publishing,
and evaluating web resources.

I. Evaluating learning

Activity 4.6.5. WEBSITE EVALUATION (10 minutes)

Direction: Evaluate the given websites/online resources based on the following principles
and criteria:

Contents - relevant news/information, videos, and high-resolution imagery to make your

website ‘stickier’

Usability - must be easily navigable, intuitive, accessible and mobile-friendly.

Aesthetics - brand awareness, increase your credibility, and visually connect with the
audience.

Visibility - how to be found(map, contact info, email), what platforms to target and how to
utilize the content.

Interaction - must engage with your audience, hold their attention, direct them through the
stages of your website by putting a check on the box corresponding to your rating.

Rubric for web evaluation:

CRITERIA 1 2 3 4 5 SCORE
Contents

Usability

Aesthetics

Visibility

Interaction

39
 List of websites to evaluate:

a) facebook.com

b) pampangahigh.school

Note: If necessary, you can use the available connection to validate the given websites
under evaluation or simply recall your previous access of it.

J. Additional activities for application or remediation

Activity 4.6.6. INFOGRAPHICS MAKING (20 minutes)

Direction: Create your own infographics using your available materials in 1 Letter size (8.5”
X 11”) bondpaper. You may use cut-out, drawing, coloring pen, or any combination will do.

Topic: Information Drive / Awareness campaign about COVID19

Please see rubric provided below.

40
Rubric for Infographic Project

Weight
Criteria
Exceptional Admirable Marginal Unacceptable

 Appropriat  Most details  Few details  No details

e details support main support to support
support idea main idea main idea
Content 50% main idea  Accurate  Lacking  Informati
 Accurate and information for accurate on is not
detailed almost all informati accurate
information subject matter on  Information
 Information  Information is  Inadequate does not
adequately mostly adequate information is support the
supports and supportive of not clearly visual’s
purpose of visual’s purpose supportive of purpose
visual visual’s purpose
 Topic and title  Topic and title are  Topic and title  Topic and
clear and mostly clear and difficult to title are not
easily identified easily identified identify clearly
Focus 20%  Main idea  Main idea is  Main idea identified
is clearly appropriate to not clearly  No main idea
appropriat topic stated  Illustrations do
e to topic  Most  Few not
 All illustrations illustrations illustrations complement
complement complement complement purpose of
purpose of purpose of purpose of visual
visual visual visual
 Outstanding  Adequate use  Inappropriate  Little attempt
use of color, of color, use of color, to use color,
Visual design, and design, and design, and design and
Appeal 20% space space space space
 Original and  Design is  Design lacks appropriately
creative adequate creativity  Design is dull
design  Overall design is  Lack of  Project has
 Overall design mostly pleasing harmonious sloppy
is pleasing and and harmonious design in appearance
harmonious presentation
 Free of  Mostly free  Frequent  Too
grammatica of grammatical frequent
Mechanics 10% l errors grammatic errors grammati
 Words are al errors  Presentation is cal errors
legible and  Most words are illegible and  Distractive
pertinent to legible and confusing elements
topic pertinent to topic make
illustration
ineffective

41
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 5 September 23 – 25, 2020

The learners demonstrate an understanding of ICT in the context of

Content Standard:
global communication for specific professional track.

The learners shall be able to independently compose an insightful

Performance
reflection paper on the nature of ICT in the context of their lives,
Standard:
society, and professional tracks (Arts, Tech-Voc, Sports, Academic).

The learners use image manipulation techniques on existing images

Learning
to change or enhance their current state to communicate a message
Competency:
for a specific purpose.

Objectives: At the end of the lesson the student should be able to:
1. define and give examples of common Image Manipulation software.
2. define and discuss some common basic tools and features in image manipulation
software.
3. discuss and simulate various manipulating images techniques using Photoshop.
4. perform and/or simulate how to create, enhance layouts/graphics images to
communicate a message.
5.

Content: Principles and basic techniques of image manipulation

(Subject Matter) Combining text, graphics, and images

Learning Resources:
a. References:
https://www.google.com.ph/search?q=starving+people+picture&tbm=isc
h&ved=2ahUKEwijqt3UwYPqAhUjxosBHRedA9YQ2-cCegQIABAA&oq
https://roawieeblogs.wordpress.com/2017/10/05/principles-and-basic-
techniques-of-image-manipulation/
https://ictcom444251764.wordpress.com/2018/03/31/empowerment-
technologies-lessons-1-15/
wikimedia.org
https://helpx.adobe.com/photoshop/using/workspace-basics.html

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 17 )

Activity 4.7.1. LOOK AT ME! AM I COMBINED OR NOT (5 minutes)

Direction: Identify if the picture shown is a combination of different images or not. Write
“PURE” if the picture is pure (taken without adjusting or adding extra graphics) or
“COMBINED” if the picture shows enhancements or combination of different images on
the space provided before each number.

42
 1. __________________ 2. __________________

3. __________________ 4. __________________

5. __________________

B. Establishing a purpose for the lesson

Activity 4.7.2. ANALYZING IMAGES (10 minutes)

Based from your answers on the activity “Look at me! Am I combined or not?” answer
the following questions in a 1 whole sheet of paper.

1. Which among the pictures shows that it is a combination of different images?

(*use numbers in identifying)

2. What are the possible tools used in combining different images forming one(1)
picture? Give at least 3 tools that you thought were used. In your own words, how were
these images combined using the tools you’ve mentioned in question number 2?

C. Presenting examples/instances of the lesson

Image manipulation or image retouching - involves changing or altering an image in the

way you want it to be. Different software/apps are used in manipulating images to make
the image more appealing and enticing to the eye of the viewer.

Photo manipulation techniques help you be a magician as you can change your
photograph in your way that apparently seems real and fantastic though it’s manipulated.
This method also allows you to make your beautiful images more professional and
enticing.

43
 Examples of image manipulation software are Adobe Photoshop, Mobile Image Editor,
remove.bg, GIMP.

D. Discussing new concepts

Most of the time, we just capture an image and upload it on our Facebook account. From
there, Facebook does the rest by formatting our image to best fit the standards set by
Facebook. But once you run your own website, you will have to edit your images. It seems
a simple task but you have to strike the balance between the right image quality and the
time for the page to load these images.

Personal websites do not necessarily have to downsize the file size of the images. But if
you have a wider target audience, you need to make the necessary changes. Here are
some tips to help you edit images from your website:

Choose the right file format. Try to make a real-life photograph into GIF to see the
difference between PNG, GIF and JPEG. Knowing the purpose is the key to finding out the
best file formats.

You might review the previous lesson to check on other file formats

Choose the right image size. A camera with 12 megapixels constitutes to a bigger image
size. Monitors have a resolution limit, so even if you have a million megapixels, it will not
display everything. Thus, it is not always wise to make our image big, most especially in a
website. Know how much space you want the image to consume. Or have a “preview”
image where the audience has the option to “see full size”.

Caption it. Remember to put a caption on images whenever possible. If it’s not
related to the web page, then remove it.

44
Photo Editing

Photo editing encompasses the processes of altering images, whether they are digital
photographs, traditional photo chemical photographs, or illustrations. Traditional
analog image editing is known as photo retouching, using tools such as an airbrush to
modify photographs, or editing illustrations with any traditional art medium.

Basic of Image Editing

Raster Images are stored in a computer in the form of a grid of picture elements or
pixels.
Vector Images such as Adobe Illustrator, Inkscape and etc. are used to create and
modify vector images, which are stored as descriptions of lines, Bezier curves and text
instead of pixels.
Difference Between Raster And Vector Images

Graphic software programs

Graphics software/apps can be broadly grouped into vector graphics editors, raster
graphics editors, and 3D modelers are the primary tools with which a user may
manipulate, enhance, and transform images. Many image editing programs are also
used to render or create computer art from scratch.

Basic Image Manipulation using Offline or Open-source(free) Application

1. Picasa is a free online photo-sharing tool provided by Google. Once a user
downloads Picasa, it automatically locates photos on the user's PC and moves
them to Picasa. The program then allows users to edit photos, compile and
organize albums and share photos online.
2. Paint.net (stylized as Paint.NET or paint.net) is a freeware raster graphics editor
program for Microsoft Windows, developed on the .NET Framework.
3. Sketch Up - A 3D modelling program from Google that is known for its ease of
use. Used for architectural purposes as well as films and games designs.
4. Pixlr. Photographers may already be familiar with Pixlr, Autodesk’s browser-based
photo editor, and its mobile companion Pixlr Express for iOS and Android. Today,
Autodesk announced Pixlr in a new format: a desktop version for Mac and
Windows.
5. Photoshop an image editing software developed and manufactured by Adobe
Systems Inc. Photoshop is considered one of the leaders in photo editing

45
 software. The software allows users to manipulate, crop, resize, and correct color
on digital photos. (not free)
6. GIMP ( /ɡɪmp/ GHIMP) (GNU Image Manipulation Program) is a free and open-
source raster graphics editor used for image retouching and editing, free- form
drawing, converting between different image formats, and more specialized tasks.
7. Paint 3D – of Microsoft’s Windows 10
8. PicsArt – is the go-to, all-in-one photo and video editor on mobile

Picasa
Paint.net

Google Sketch Up Pixlr

Photoshop (not open source) GIMP

Windows 10 Paint 3D Picsart

E. Continuation of the discussion of new concepts ( DAY 18 )

In this part of the subject, you will be expected to simulate or demonstrate your ability to
use digital tools to produce materials for printing, posting, and at some later point in the
course, uploading images to online.

46
 As a matter of practice and simulation, you will be using the Photoshop.
Some Common Features of Adobe Photoshop

Image Size resize images in a process Layers which are analogous to sheets of
often called image scaling, making them transparent acetate, stacked on top of
larger, or smaller. High image resolution each other, each capable of being
cameras can produce large images which individually positioned, altered and
are often reduced in size for Internet use. blended with the layers below, w/o
affecting any of the elements on the other
layers.

Cloning uses the current brush to copy Cropping creates a new image by
from an image or pattern. It has many selecting a desired rectangular portion
uses: one of the most important is to from the image being cropped. The
repair problem areas in digital photos. unwanted part of the image is discarded.
Image cropping does not reduce the
resolution of the area cropped.

Sharpening And Softening –

Perspective – is the art of drawing solid
Sharpening makes images clearer. Too
objects on a two- dimensional surface so
much sharpening causes grains on the
as to give the right impression of their
surface of the image. Softening makes
height, width, depth and position in
images softer that removes some of the
relation to each other when viewed from
highly visible flaws. Too much causes the
a particular point.
image to blur.

47
Saturation - is an expression for the Contrast And Brightening
relative bandwidth of the visible output Contrast of images and brighten or
from a light source. As saturation darken the image. Adjusting contrast
increase, colors appear more “pure.’’ As means adjusting brightness because they
saturation decreases, colors appear more work together to make a better image.
‘’ washed-out.’’

Photo Manipulation
Photo manipulation involves transforming or altering a photograph using various methods
and techniques to achieve desired results. Some photo manipulations are considered
skillful artwork while others are frowned upon as unethical practices, especially when used
to deceive the public, such as hat used for political propaganda , or to make a product or
person look better.

Differences between Photo Editing and Photo Animation

Photo Editing – signifies the regular process used to enhance photos and to create
them ‘’Actual editing simple process’’. Also includes some of the regular programs used
for editing and expose how to use them.

Photo Manipulation – includes all simple editing techniques and have some
manipulation techniques like erasing, adding objects , adding some graphical effects,
background correction, creating incredible effect, change elements in an image, adding

48
styles , eliminating blemishes from a person’s face and changing the features of a
person’s body.

Some Common Tools of Adobe Photoshop

Move Tool * ( V )is used to Spot Healing Brush Tool *( J

move layers, selections )removes blemishes and other
and guides within a minor problem areas in an
Photoshop document. Enable image. Use a brush size slightly
"Auto-Select" to automatically larger than the blemish for best
select the layer or group you results.
click on.
Lasso Tool * ( L ) can Content-Aware Move Tool
draw a freeform selection (J) select and move part of an
outline around an object. image to a different area.
Photoshop automatically fills in the
hole in the original spot using
elements from the surrounding
areas.
Quick Selection Tool ( W Red Eye Tool ( J ) removes
) lets you easily select an common red eye problems in
object simply by painting a photo resulting from camera
over it with a brush. Enable flash.
"Auto-Enhance" in the Options
Bar for better quality selections.
Magic Wand Tool ( W ) Eraser Tool * ( E )
selects areas of similar permanently erases pixels on
color with a single click. a layer. It can also be used to
The "Tolerance" value in the paint in a previous history state.
Options Bar sets the range of
colors that will be selected.
Crop Tool * ( C ) crop an Magic Eraser Tool ( E )
image and remove selects areas of similar color
unwanted areas. Uncheck with a single click but
"Delete Cropped Pixels" in the permanently deletes those areas.
Options Bar to crop an image
non-destructively.
Perspective Crop Tool ( C Gradient Tool * ( G ) draws
) both crop an image and gradual blends between
fix common distortion or multiple colors and lets you
perspective problems. create and customize your own
gradients.
Freeform Pen Tool ( P ) Horizontal Type Tool * ( T )
allows you to draw use the Horizontal Type Tool
freehand paths or shapes. to add standard type to your
Anchor points are automatically document.
added to the path as you draw.
Hand Tool * ( H ) click and Path Selection Tool * ( A )
drag an image around on (the black arrow) in
the screen to view different Photoshop to select and move
areas when zoomed in. an entire path at once.

Sample simulation on some features/tools of Adobe Photoshop that may seem magical in
their functions.

Note: In this portion, it is assumed that the files necessary for editing/enhancements are
opened in Photoshop and are ready for manipulation by using the appropriate
tools/features

Spot healing brush tool (J)

This tool allows users to remove blemishes on the part of the image where the tool is
applied.

49
Task: Remove/retouch skin blemishes on the face of the given subject (old woman).

Procedures:
1. When the file is opened, click on the Spot Healing Brush Tool or press J from
keyboard
2. Begin applying the tool on the wrinkles part on the face of the subject.
3. You can use other tools such as Ctrl + or Ctrl – in order to zoom in or zoom out the
image.
4. You can use the symbol [ to reduce or the ] to enlarge the brush tip size
5. You can also use the Hand tool (H)
6. Save file when retouch is done.

BEFORE AFTER
2. Content Aware Move Tool
This tool allows user to remove unwanted portion of the image by selecting such portion.
Task: Remove the photobombers(unwanted) body/people of the given subject (young
woman).

Procedures:

1. When the file is opened, select the Lasso Tool or press L from keyboard
2. Begin selecting the portion(in a circular motion) of subject to be removed one at a
time.
3. Drag the selected portion of the image outside the image or click on Edit + Fill +
Content-Aware + Ok
4. Repeat steps #2 and #3 if there are another portion to remove.
5. Save file when retouch is done.

50
 BEFORE AFTER

Note: What happened with the content aware tool is that it copies the surrounding pixels in
replacement to the removed portion. This is particularly effective for portions with uniform
or dominant pixel resolution

3. Quick Selection Tool (W)

This tool allows user to easily and quickly select a portion especially to change its
background.
Task: Quickly select the image of the subject and drag or move it to another opened
background image.

Procedures:

1. When the file is opened, select the Quick Selection Tool or press W from
keyboard
2. Begin selecting the image portion by dragging the mouse inside the portion being
selected. You can press Alt key when you want to deduct unwanted part of the
select.
3. You can use other tools such as Ctrl + or Ctrl – in order to zoom in or zoom out the
image.
4. You can use the symbol [ to reduce or the ] to enlarge the brush tip size
5. Drag the selected portion of the image onto another opened background image by

clicking the Move Tool or by pressing letter M from the keyboard and
releasing it to the background image.
6. Press Ctrl T for Free Transform to resize the moved, quickly-selected image. Press
Shift to maintain aspect ratio of the image while resizing. Deselect when done with
resizing.
7. Save file when retouch is done.

BEFORE AFTER

51
F. Developing Mastery

Activity 4.7.3. IMAGE MANIPULATION TECHNIQUE 1 (15 minutes)

1. Enumerate 5 Image Manipulating Software/Apps

2. Give 5 Tools in Photoshop
3. Simulate the image manipulation technique of spot healing brush tool
TASK: WRITE your own detailed step-by-step procedure for manipulating the given
image (left image – original; right image – enhanced). Use all necessary tools.

G. Finding practical applications of concepts and skills in daily living

Activity 4.7.4. IMAGE MANIPULATION TECHNIQUE 2 (15 minutes)

1. Simulate the image manipulation technique of content aware move tool by writing
your own step-by-step procedures for the given image so that the final output will be
the removal/elimination of the hot air balloon on the image. Use all necessary tools.

2. Enumerate at least 5 events/activities which you can use image Manipulation

Techniques.

H. Making generalizations and abstractions about the lesson

Cite an instance in which Image manipulation techniques can help you in daily situation.
How was it became useful to that particular situation?

I. Evaluating learning ( DAY 19 )

Activity 4.7.5. IMAGE MANIPULATION TECHNIQUE 3 (20 minutes)

1. Putting all the manipulation techniques together. Kindly refer to the given images.
Direction:

a. Using spot healing brush tool and all other appropriate tools, remove the
wrinkle blemishes of the subject(old couple) and do necessary retouches.
b. Using content aware move tool and all other appropriate tools, remove the 3
ducks swimming in the fish pond of the white house palace.

52
 c. Using quick selection tool and all other appropriate tools, select and move
the couple picture onto the white house palace as the background.

2. Write your own complete step-by-step procedure for performing or simulating the
entire process of image manipulation applying essential techniques for a derivative ICT
content.

J. Additional activities for application or remediation

Activity 5.7.6. IMAGE MANIPULATION TECHNIQUE 4 (30 minutes)

A. Create by simulation an Election Campaign Poster using Adobe Photoshop. You can
likewise use any other available tools. (please see attached rubric)
B. In your own words, discuss in writing the main difference between photo editing and
photo manipulation within 3 to 5 sentences.
C. Explain in 3 to 5 sentences by highlighting which of the tool/s or feature/s is/are most
essential to you? Why?

53
RUBRIC FOR CAMPAIGN POSTER

4 3 2 1
Best Effort Great Effort Good Effort Little Effort
The campaign The campaign The campaign poster The campaign poster
poster includes poster includes at includes at least 1 does not include any
at least 3 least 2 propaganda propaganda propaganda
propaganda techniques: technique: techniques and is
techniques: bandwagon, bandwagon, unclear.
bandwagon, testimonial, testimonial,
Content testimonial, repetition, repetition, emotional
repetition, emotional words. words. The
emotional words. The techniques technique used is
The techniques used are somewhat ineffective.
used are effective.
effective.
25 20 15 10
Compelling Slogan present. No slogan. Poster No slogan. Poster is
slogan, poster Poster has has information but it disorganized and
has adequate appropriate amount is not easy to read. difficult to read.
information with information with a Has too much text or
a balance balance between too many pictures.
Organization between pictures and text. Unbalanced.
pictures and Information is easy
text. to read and flows.
Information is
easy to read
and flows.
10 8 6 4
The word choice The word choice is The word choice Word choices are
is unique and appropriate. does not enhance the incorrectly used
clever. propaganda and/or do not make
Word Choice techniques used. sense.
Word usage is bland.

5 4 3 2
Poster has been Poster has been Poster has been Poster has not
Punctuation
edited carefully edited with fewer edited with fewer than been edited and
and and has no than 3 errors. 5 errors. has multiple errors.
Grammar errors.
10 8 6 4
The ideas are The ideas are The ideas are not The ideas are not
fully developed, fully developed, developed, lack focus
developed, somewhat focused or original. and are not original.
Creativity focused and focused and are
original. good but not
original.
5 4 3 2
Appearance Appearance is Appearance is not Appearance is
shows time and neat and colorful. neat and lacks color. unfinished and
effort. Some handwritten The lack of effort is reflects that little
Appearance Poster is neat, text takes away noticeable. time and effort were
colorful and from overall put forth.
attention- polished look.
grabbing.
Overall
polished look.
5 4 3 2

pts pts pts pts

54
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 6 September 28 – 29, 2020

The learners demonstrate an understanding of how to manipulate

Content Standard: text, graphics, and images to create ICT content intended for an
online environment.

The learners shall be able to independently apply the techniques of

Performance image manipulation and graphic design to create original or
Standard: derivative ICT content from existing images, text and graphic
elements for use in specific professional tracks.

The learners create an original or derivative ICT content to

Learning
effectively communicate a visual message in an online environment
Competency:
related to specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. familiarize themselves on the steps in combining text, images and graphics.
2. identify common uploading, sharing and image hosting platforms.
3. create a quotation that will give a visual message to different graphics/images.

Content: Combining text, graphics, and images

(Subject Matter) Uploading, sharing, and image hosting platforms

Learning Resources:
a. References:
https://prezi.com/p/0ijb6rcrx6ue/combining-text-graphics-and-images-
epm-tech/
https://prezi.com/cmpvv6v-itgz/sharing-uploading-and-image-hosting-
platforms/
https://google.com/images/

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 20 )

Activity 6.8.1. MARK MY SITUATION (5 minutes)

Direction: Create a quotation that will suit the situation in the picture.

Picture/Image Quotation
Example:

If you are tired

Learn to rest, not quit!

55
 1.

2.

3.

B. Establishing a purpose for the lesson

Activity 6.8.2. IMPACT IN MY LIFE (5 minutes)

Based on the quotations you’ve created on the activity “Mark my situation”, answer the
following question/s:

1. How did you come up with the quotation?

2. What is the impact of the pictures and quotations to your life?

C. Presenting examples/instances of the lesson

In visual art and graphic design, a composition is the arrangement of visual elements
into one cohesive whole. In eLearning and presentation design, every slide can be seen
as a composition. The way that you combine text and image (including shapes) in a slide
affects the message you convey and the visual appeal of the material.

For a cohesive design, text and image need to work in relationship with each other.
Through placement, alignment, and balance you can ensure that they interact and work
well together.
D. Discussing new concepts

Steps in combining text, graphics and images

1. Transparent shapes
Add simple shapes with a slight transparency behind your text to clearly see the text
you want to emphasize.
2. Fonts and shapes
Should complement each other. You can use rounded shapes with rounded fonts
and sharp shapes with sharp fonts.
3. Text and background
Should be aligned to have an organized look. You can align text with shapes or
geometric figures in the image.
4. Clean and clear background
Use a clean and clear background for the message to be readable. Background
should not washout your message.

56
Integrating text and image
There are a lot of options for integrating text and image. What follows are guidelines
for several approaches.

1. Text Overlaid on Image

Let’s start with a guideline that seems obvious, yet is not always followed. When text
overlays an image or a solid color background, there must be sufficient contrast between
text and image to make the text readable with little effort. Photo courtesy of Unsplash.

Images that work as a background for text include:

 Photos with large flat solid areas of color, like the sky, a wall, the ocean or a
shadow
 Light patterns or textures, like canvas, linen or faint geometric designs
 Out of focus or blurry backgrounds with a minimal range of colors (see Resources
below for freebies)
 Uncluttered photographs, perhaps of one object

If the image doesn’t have sufficient space, consider a partially transparent box of a
contrasting neutral color behind the text. Always consider the purpose of using a
background graphic. Will it work to convey your message? Is it aesthetically pleasing?

2. Text Wrapped Around Image

In the wrap-around, the text follows the shape of an

image. The relationship between text and image is
evident because the outline repeats the contours of
the person or object, as shown above (cut-out server
courtesy of the eLearning Brothers). To make this
work, use an image that is relevant to the content.
Perhaps a silhouette of a person performing an action,
a hand gesture or a large object.

To achieve this in authoring tools or PowerPoint, you must place the text in separate text
boxes and place them around the image.

3. Text and Image Intersect

The intersection of text and image can create a dynamic composition. The visual elements
can intersect in several ways:

 Placing text within an image, particularly a hollow vector graphic as shown in the light
bulb above
 Placing text behind an image so that it is partially obscured
 Placing text so that it rests on the image, using the image as the baseline for the text

If intersecting text and image makes

reading difficult, then only use this
approach for title and topic slides. Never
sacrifice learning for a visual design idea.
Notice that many magazine covers place
the title of the magazine partially behind
a person’s image, as shown above (cut-
out person courtesy of eLearning Art).

57
 4. Text and Image Aligned

You can achieve an orderly look by

aligning visual elements with each other
and placing them in close proximity. For
example, when the left and right margins
of a photograph are aligned with the left
and right margins of a text box, as shown
above, you can sense the
connection between the elements.

Even though image and text do not intersect or overlap, alignment demonstrates a
relationship. It also provides a clean sense of balance.

In this approach, spacing is critical. If the

text and image are not in proximity, the
relationship will not be as obvious.
Unless you are purposefully seeking a
very casual look or a bit of chaos,
alignment works well for combining text
and image.

5. Text and Image in Repeating

Shapes

In visual design, repetition creates unity.

You can create a cohesive design by selecting a shape and repeating it in different sizes
and colors. By adding images and text to the shapes, you create a unified whole.

Shapes are part of our rich visual language. Think

about what a shape represents before you decide
to use it. Rectangles project stability and order.
Circles give us a sense of unity and also
continuous movement. Triangles are dynamic and
seem to move the eye toward the point. When
inverted, the triangle represents instability and
imbalance as though it might fall over. Organic
shapes are irregular and often represent nature.
Many organic shapes are calming.

E. Continuation of the discussion of new concepts ( DAY 21 )

Uploading, sharing and image hosting platforms

Uploading platforms
- uploading is the transmission of a file from one computer to another (*add picture)
- from a network user’s point of view, to upload a file is to send it to another computer
that is set up to receive it.
- there are also online platforms that are set to upload file, to transfer a file from one
account to another account, making it possible in transfering a file from a computer
to another thru the use of internet connection (Wifi, Data connection)

Here is a list of some online uploading platforms that were used in transferring files:

A. Yahoo mail
- it includes sending and receiving messages.
- it also include formatting e-mail messages, handling
attachments, and saving, storing and deleting e-mail
messages.

58
 B. G-Mail
- is a free email service provided by Google.
- In many ways, Gmail is like any other email service:
- You can send and receive emails,
- block spam,
- create an address book, and
- perform other basic email tasks.
- But it also has some more unique features that help make it one of the most
popular online email services.

C. Facebook Messenger
- a different app/application to Facebook but with some functions that are the same.
- its main functions are the following:
 Sending Files
 Instant messaging
 Photo/video sharing
 Group chats – users can chat with their
Facebook friends and phone book contacts
 Ability to record voice messages
 Live video chat // video calling

Sharing platforms

1. Photo sharing
- Photo sharing websites allow users to upload your images to share with your
online friends, or indeed the entire web.
- young people in particular are keen users of digital photography. Many teenagers
like taking pictures of socializing with friends and share images online through
social networking sites like Twitter, Facebook and Instagram.
- most photo sharing sites are free to use and offer plenty of handy tools.

Here is a list of some o the most popular and widely-used photo sharing websites:

A. Flickr
- Flickr is perhaps the most popular photo sharing website
around.
- It’s one of the oldest photo sharing website, having been on the
go since photo sharing become popular.
- It also allows users to join groups similar to your interests in
order to share images and the big focus is tagging.

B. Picasa
- it’s easy to use for Google Mail subscribers and offers
many of the same things as the other sites.

- It also offers users the chance to upgrade their package to

have more space and editing tools in return for a fee.

C. PhotoBucket
- the most popular photo sharing site in US. PhotoBucket is fast
becoming popular in Europe.

- the site has many of the same features but also includes
instant chat options and operates closer to the way traditional
social networking websites do.

59
D. Instagram
- the fastest growing photo sharing website.
- it is popular with Twitter and Facebook users in particular as it
allows people to upload profiles.
- It works well on mobile platforms. Instagram also has good
and easy to use editing tools which makes it popular.

2. Video Sharing
- It is almost the same with the photo sharing though for video sharing, videos are
what are being shared not photos

Top FIVE (5) Video Sharing Websites

A. YOUTUBE

- the most popular video sharing website on the internet

- It was created by three former Paypal employees and now
becomes a subsidiary of Google.
- It makes use of Adobe Flash Video and HTML 5 technology
to display a wide varieety of user-generated and corporate media video such as
video clips, TV clips, music videos, and other content such as video blogging,
short original videos and educational videos.
- Youtube accepts videos uploaded in most container formats including .avi, .mov,
.mp4, .flv, .DivX, .ogg, .ogv.
- these include video formats such as MPEG-4, MPEG, VOB, .WMV and even
3GP.

B. VIMEO

- the next open video website to upload videos for free

introduced here is www.vimeo.com.
- Vimeo is a U.S. -based video-sharing website on which
users can upload, share and view videos.
- by December 2013, Vimeo has attracted over one million
unique visitors per month and more than 22 million registered users, following
fellow video upload sites free Youtube and Facebook.

C. METACAFE
- metacafe is another video-sharing website for you to post
your videos for free.
- In its early years, Metacafe was similar to video viewing
websites such as Youtube or Daily Motion.
- but now it has transformed to specialize in short-dorm
video entertainment in the categories of movies, video
games, sports, music and TV.

D. HULU
- Hulu was created in 2007, which became the fifth best video sharing site that
time.
- it is an entertaining website and it offers a variety of
TV shows, movies and originals
- but the point may disappoint us is that Hulu Videos
are currently offered only to users in the United States
its overseas territories and Japan.
- It provides video In Flash Video Format, including
many films and shows that are available in 288p,
360p, 480p, and in some cases 720p or 1080p HD.
-

60
 E. VEVO
- Vevo is one of the top 10 popular free video streaming website in the world.
- It is a right place for music artist and music lovers
- For music artist, they can use this platform to promote their
works and as for music lovers they can find more wonderful
songs here.
- Unfortunately this website is only available in Australia,
Brazil, Canada, France, Germany, Ireland, Italy, Mexico, the
Netherlands, New Zealand, Poland, Spain, the United
Kingdom, and the United States by now. Besides, compared with other sites,
videos of this site are attached to more ads.

3. Image Hosting Platforms

- An image Hosting service allows individuals to upload images to an internet
website.
- the image host will then store the image onto the server and show the individual
different types of code to allow others to view that image.
- the uploader may also be allowed to specify inline links to the hosted image, in
order to embed it on other websites.

Examples:
 linking with HTML code
 Linking with BB code
- BBCode (bulletin board code) is a collection of formatting tags that are
used to format users' posts in the Scratch Forums and the Text Based
Games Forums. BBCode is based on the same principle as, and is similar
to, HTML.
 a clickable thumbnail that is linked to the full image
F. Developing Mastery

Activity 5.8.4. ADVANTAGES OF THIS PLATFORM (5 minutes)

Direction: List four (4) advantages of Facebook Messenger.

Example: Sending files

G. Finding practical applications of concepts and skills in daily living

Activity 5.8.5. SHARE AND USE! HOW DO I USE THIS WEBSITE (10 minutes)

A. Enumerate at least two(2) uses of the following Video Sharing Websites:

Video Sharing Websites Use/s

1.
A. YOUTUBE
2.
1.
B. METACAFE
2.
1.
C. HULU
2.
1.
D. VIMEO
2.

B. Essay (in not less than 5 sentences)

What is the most popular Video Sharing Website? Explain your answer.

61
H. Making generalizations and abstractions about the lesson

Arranging and organizing visual elements, always keep an eye on the spacing between
them. When the spacing between elements is uniform, you will create an underlying
sense of order that makes it easy to scan and process the information. When the spacing
between elements is varied, the design becomes dynamic.

I. Evaluating learning

TEST 8 IMAGE MANIPULATION AND SHARING ( 15 minutes )

I. Identification. Write the correct answer on the space provided before the
number.
_____________1. An image Hosting service allows individuals to upload images to
an internet website.
_____________2. It is an entertaining website and it offers a variety of TV shows,
movies and originals.
_____________3. For music artist, they can use this platform to promote their
works and as for music lovers they can find more wonderful
songs here.
_____________4.The image host will then store the image onto the server and
show the individual different types of code to allow others to
view that image
_____________5. It is the most popular video sharing website on the internet.

II. Give the name and purpose of the different platform below (maximum of 2
purposes per platform).

J. Additional activities for application or remediation

Activity 5.8.6. ADVANTAGE AND DISADVANTAGE (10 minutes)

In your own words (no less than 100 words), explain what are the advantages and
disadvantages of YAHOO MAIL, and GMAIL?

62
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 6 September 30, 2020

The learners demonstrate an understanding of the principles and

techniques of design using online creation tools, platforms, and
Content Standard:
applications to develop ICT content for specific professional
tracks.

The learners shall be able to independently apply the principles

Performance and techniques of design using online creation tools, platforms,
Standard: and applications to create original or derivative ICT content for use
in specific professional track.

Learning Evaluate existing online creation tools, platforms and applications

Competency: in developing ICT content for specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. define and identify different types of online platforms.
2. evaluate using rating tools the nature and purpose of these platforms.

Content:
The nature and purposes of online platforms and applications
(Subject Matter)
Learning Resources:
a. References:
https://medium.com/platform-hunt/the-8-types-of-software-platforms-
473c74f4536a
http://images.app.goo.gl/H85d9gxcUWR7kaBW6
http://images.app.goo.gl/YfxjFQRrhaCPyMv8
http://images.app.goo.gl/4ZyWMFJhtvAxxZVb6
http://images.app.goo.gl/Kb3f8hjwvTVv1KoFA
http://images.app.goo.gl/XjjngrQEHe83HSEK9
Empowerment Technologies for Senior High School (page 31 – 33)

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 22 )

What is the use of a website? Did you know that you can use a website for a number of
purposes? And did you know that websites can be considered as platforms for
productivity?

B. Establishing a purpose for the lesson

In this lesson, you will learn about the main purpose of the creation tools in the form of
online platforms. Likewise, you will be able to evaluate selected online learning platforms
given a rubric.

63
C. Presenting examples/instances of the lesson

The cloud (internet) has tremendously changed the way people live, communicate, learn,
play, recreate, and do business. It made various fields easily accessible and available to
people from all walks of life without limits of time, distance, physical space or borders.

Almost everything can now be done through the use of the internet which is dubbed as
information superhighway. When you want to learn more about the latest and current
events, you can access it via any device available such as your mobile phone using
available internet mobile data or much more reliable no data capping(limit) connection.
When you want to have some forms of entertainment like watching your favorite NBA in
real-time, watch your favorite movies and make various online transactions like order, buy
or sell online, pay or transfer funds, do banking, and a lot more.

Studying nowadays is not only available using the traditional method of attending face to
face classes at the four corners of the classroom. Online learning and learning
management systems are also common as alternative ways of learning or even
considered as the future of education.

Thus, there is a need for online platforms that would facilitate easier and faster way of
doing or conducting things through the limitless powers and possibilities of the internet.

D. Discussing new concepts

Online Platforms (also referred to as online application) or online website is created to

aid users in creating their web content and cater to different kinds of information such as
text, images, and videos.

The term “online platform” has been used to describe a range of services available on the
Internet including marketplaces, search engines, social media, creative content outlets,
app stores, communication services, payment system and much more.

E. Continuation of the discussion of new concepts

Types of Online Platforms

1. Technology Platforms
- provide building blocks or services that are reused in a large number of
products.
- not designed to connect platform participants (for example, producers and
consumers, or people in a social network). Instead, Technology Platforms
monetize by selling their services to developers and are typically invisible to the
end users.
- grow linearly with adoption by developers and do not rely on the interaction
between a demand side and a supply side.
- are much easier to launch because there is no need to solve the chicken and
egg problem seen in multi-sided or peer-to-peer platforms.
Example: Amazon Web Services, Microsoft Azure, and Twilio

ii. Computing Platforms

- enable interactions between platform users and 3rd party developers.
- allow developers extend the platform with new use cases, making the platform
more valuable to users.
- the connection between users and developers is through an app
store/marketplace, which streamlines discovery, recommendations, activation
and monetisation of apps/bots/extensions.
Example: Apple iOS, Google Android or Microsoft Windows

3. Utility Platforms
- attract users by providing a useful, typically free service.
- there is no network effect in the useful service itself. Users attract businesses,
but businesses on the platform do not necessarily attract users.
Example: Google Search, Kayak and Zenefits

64
4. Interaction Networks
- this type of platform facilitates interactions between specific participants
(people and/or businesses). The digital interactions can take form of a
message, voice call, image, or money transfer.
- identity is the foundational characteristic of Interaction Networks. All
interactions on the platform are anchored on specific accounts.
- the primary network effect is between the users of the platform. Users attract
users, who attract more users. In that sense, the platform is a one-sided
platform connecting participants of the same type.
Example: Facebook, WeChat and Bitcoin

5. Marketplaces
- enable transactions between demand-side participants (buyers) and supply-
side participants (sellers).
- identity plays a secondary role in the platform. Buyers look for a specific
product or service, not a specific seller. The product/service can be offered by
multiple sellers who compete on price, reputation and experience.
Example: eBay, Amazon Marketplace, AirBnB, Kickstarter

6. On-demand Service Platforms

- is designed to deliver end-to-end services fulfilled by a network of independent
service providers/contractors. Its tradeoffs are very different from those of
Marketplaces.
- integrate discovery, order, payment, fulfillment, certification and confirmation of
the service under one roof. Price, quality standards and the fulfillment
processes are all set by the platform. The user/buyer typically has very little
freedom, if at all, in selecting how the service will be delivered and by whom.
- the network effect of On-demand Service Platforms manifests itself in service
availability.
Example: Uber, Munchery and Heal

7. Content Crowdsourcing Platforms

- is about collecting content from a subset of users (video, blog posts, reviews,
ratings, etc.) and sharing this content with a wide user base of the platform.
- users interact with the platform and the interaction is anchored on the content.
- the network effect is between content contributors and content consumers of
the platform.
Example: YouTube, Yelp and TripAdvisor

8. Data Harvesting Platforms

- offer a useful service to the users and generate data through usage of the
platform service. In fact, the agreement to contribute data is a requirement to
join the platform. The data collected from all users of the platform is fed back to
the service making it more useful for users.
- the network effect in this kind of platforms is based on data rather than users.
Usage generates data, which in turn makes the platform more valuable for
users, which attract more users, whose usage generates more data, and so on.
Example: Waze, OpenSignal and InsideSales.com

9. Content Distribution Platforms

- connect owners of user touch-points (web sites, mobile apps, devices) with
content owners wishing to deliver the content (or ads) to the users.
- the network effect in Content Distribution Platforms is between owners of the
user touch-points and the content owners.
Example: Google AdSense, Outbrain, Smaato and Millennial Media

65
F. Developing Mastery

Activity 5.9.1 PLATFORM IDENTIFYING (10 minutes)

Identify the platform being describe in the following statement.

____________1. It is an interaction between buyers and sellers.

____________2. It is a connection between developers and users thru an app.
____________3. It attracts users by providing a useful, typically free service.
____________4. It connects participant of the same type.
____________5. It effects is between content contributors and content consumers
of the platform.

G. Finding practical applications of concepts and skills in daily living

Activity 5.9.2 ONLINE LEARNING PLATFORM EVALUATION (15 minutes)

Direction: Evaluate Google Classroom as an online platform using the rubric at the end
page.

Google Classroom sample screenshots

66
67
H. Making generalizations and abstractions about the lesson

Online platforms are key drivers of innovation in the digital world and their success is
closely tied to the success of a range of businesses that use these platforms to reach
customers. Embracing online platforms makes people more productive in creating and
managing useful information if one knows how to it is used to his/her own advantage.

I. Evaluating learning

TEST 9 PLATFORMS NATURE AND PURPOSE ( 15 minutes )

Briefly identify which type of online platforms does the following belongs and what made
you say that? Explain.

1. 2. 3.

4. 5.

J. Additional activities for application or remediation

Activity 5.9.3 ONLINE STORAGE COMPARISON (15 minutes)

Direction: Find about the following cloud storage and discuss briefly their similarities and
differences: Provide references.

1 2 3

68
Rubric for online eLearning platform evaluation instrument:

This rubric is an evaluation instrument for measuring the holistic over-all impact of
online learning tools and / or platforms.

In a scale of 5, 3, and 1, put a () check on the corresponding rating based on

your honest evaluation of the given learning tool / platform.

Minor Serious
Criteria Works Well Rating
Concerns Concerns
5 pts
3 pts 1 pt
Functionality
 Scale
 Ease of Use
 Good interface
(layout, color,
graphics)
Accessibility /
Technical
 User-focused
participation
 Works properly
on various
devices(desktop,
laptop, mobile,
browser)
 Upload,
download
 Tech Support /
Help Availability /
FAQ
Manageability
 For
teacher/admin
 For learners
 Creation, editing,
update
 Customization
Privacy, Data
Protection, and Rights
 Sign Up/ Sign In
 Data Privacy and
Ownership
 Archiving,
Saving, and
Exporting Data
Interoperability
 Integration with
other
apps/platforms
 Optimized
environment

69
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 6 October 01 – 02, 2020

The learners demonstrate an understanding of the principles and

Content Standard: techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks.

The learners shall be able to independently apply the principles and

Performance techniques of design using online creation tools, platforms, and
Standard: applications to create original or derivative ICT content for use in
specific professional tracks.

The learners apply web design principles and elements using online
Learning
creation tools, platforms, and applications to communicate a message
Competency:
for a specific purpose in specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. define the what is WWW, what it is purpose and how it is started.
2. identify the basic web design principles and elements.
3. learn the importance of basic tags, elements, and attributes used in HTML.
4.
5.
Content:
Basic web design principles and elements using HTML
(Subject Matter)
Learning Resources:
a. References:
https://www.w3schools.com/html/html_intro.asp
https://home.cern/science/computing/birth-web/short-history-web
https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-
web--webdesign-8710
https://www.techopedia.com/definition/5411/website
https://techterms.com/definition/www

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 23 )

Activity 5.10.1. ONLINE PLATFORMS RECAP (5 minutes)

Give 3 examples of online platforms and identify each type.
1.
2.
3.

B. Establishing a purpose for the lesson

Activity 5.10.2. WEBSITE PURPOSE ( 5 minutes)

Direction: Choose one among the given logos you most frequently use for each purpose.
Give at least (3) reasons in choosing your answer in what logos you most frequently use
for each purpose. Explain your answer.

70
 Socialization Entertainment Online Shopping

C. Presenting examples/instances of the lesson

There are different sites that serve our people’s various needs and interest. The use of the
Internet in our daily life is dependent on desires and goals, but it always depends on the
user what websites they want to use. That is why it is really important and challenging to
use the Internet in as many of our daily life activities as possible. There are different
factors that the user needs to consider in choosing the websites they want to use based
on basic web design principles and elements that are used in different websites.

Activity 5.10.3. POPULAR WEBSITES ( 5 minutes)

Direction: List down 3 examples of the most popular website today and explain in 1
sentence why is it popular.
1.
2.
3.

D. Discussing new concepts

Before discussing the basic web design principles and elements, let us have a brief
discussion about the history of the web.

Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while
working at CERN. The Web was originally conceived and developed to meet the demand
for automated information-sharing between scientists in universities and institutes around
the world.

The basic idea of the WWW was to merge the evolving technologies of computers, data
networks and hypertext into a powerful and easy to use global information system.

The World Wide Web uses three protocols:

● HTML (Hypertext markup language) - The language that we write our web pages
in.
● HTTP (Hypertext Transfer Protocol ) - Although other protocols can be used such
as File Transfer Protocol (FTP), this is the most common protocol. It was developed
specifically for the World Wide Web and favored for its simplicity and speed. This
protocol requests the 'HTML' document from the server and serves it to the browser.
● URLS (Uniform resource locator) - The last part of the puzzle required to allow the
web to work is a URL. This is the address which indicates where any given
document lives on the web. It can be defined as <protocol>://<node>/<location>

The internet has been source of information and communication. This is the evident
through it component called website.

The website(also knowns as web presence) refers to an internet services that contain
information composed of a group of pages.

A website is a collection of publicly accessible, interlinked Web pages that share a single
domain name. Websites can be created and maintained by an individual, group, business
or organization to serve a variety of purposes. Together, all publicly accessible websites
constitute the World Wide Web.

71
It can be recalled that from the previous lessons (Lesson 3), mentioning about web
browsers. Web browsers are programs that allow users to browse web pages.

A screenshot of the world's first web browser.

The purpose of a web browser is to read HTML documents and display them correctly. A
browser does not display the HTML tags, but uses them to determine how to display the
document:

Some popular web browsers include Google Chrome, Firefox Mozilla, Internet Explorer,
Microsoft Edge, Apple’s Safari.

Designing web pages follows some basic principles and elements which are essential in
producing a holistic site that will drive traffic to that website.

Below are the top 10 most important elements and principles of a website design:

1. Navigation- the website design should be easy to navigate and the menu items
should be easily accessible from any page.

2. Visual Design- the visual design is important not to go overboard too much. Scrolling
Text, animation, and flash intros should be used sparingly in your web design and only
to emphasize a point for maximum effect.

3. Content- your website text should be informative, easy to read, and concise.

4. Web Friendly- It is important that your web designers know the keys to making your
website work on all the major browser, and that the utilize meta tags, alt tags, are fully
verse in SEO(Search Engine Optimization).

5. Interaction-A truly website engages your visitors immediately and continues to hold
their attention through every page as well as influences them to contact you.

6. Information Accessibility-visitors may news to access only a phone number or

address, or just a certain bit of info on your site. for this reason it’s important to place
key information in a plain site that is easily accessible.

7. Intuitiveness- It is important that your website have a landing page that is directly
relevant to what they searched for rather than focusing them to filter through all of your
information.

8. Branding-your Website should be a direct reflection of your business and your brand.
your visitor should immediately make a visual connection between your logo, print
material, and brick-and-mortar location.

9. Turnaround time- the number one complaint of website customers is the time it takes
to get the site up and running. Unfortunately, a firm that takes unusually long to
complete your website is par for the course.

72
 10. Conversation- your website can be the most important client generator your business
can have, and must place the primary emphasis on bringing in new clients and making
additional services available to existing clients through increased awareness of all
services you offer.

E. Continuation of the discussion of new concepts ( DAY 24 )

• A Web Page is a single page contains text with hyperlinks; and hyperlink is text
connected to another web page.

• A Tag refers to an HTML command that is used to develop a design the webpage.

What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Basic TAG Command in HyperText Mark Up Language <HTML>

• <HTML> refers to a tag that declares the CONTENT as an HTML documents.

• <HEAD> refers to a tag that is placed at the beginning of the other HTML tags.
• <TITLE> refers to a tag that is display a text in the title bar.
• <BODY> refers to a tag that is modifies the content body of a web page.
• <B> means bold and refer to a tag that changes the text to boldface.
• <I> means Italic it refers to a tag that changes the text italic.
• <U> means underline it refers to a tag that underlines a text.
• <FONT> refers to a tag that modifies text font.
• <BR> means break if refers to a tag that is used to place the text to the next line.
• <MARQUEE> refers to a tag that is used to move text or image in the web page.
• <CENTER> refers to a tag that is used to put text in the center.

Sample Script in HTML (using Notepad or Notepad ++)

Input (HTML script / code) Output (web page)

<html>
<head>
<title>Page Title</title>
</head>
This is a
<body>
Heading
<h1>This is a Heading</h1>
<p>This is a paragraph.</p> This is a paragraph.

</body>
</html>

Example Explained:

 The <html> element is the root element of an HTML page

 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)

73
  The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

HTML Text Formatting Elements

Formatting elements were designed to display special types of text:

● <b> - Bold text

Example : <b>This text is bold</b>
● <strong> - Important text
Example: <strong>This text is important!</strong>
● <i> - Italic text
Example: <i>This text is italic</i>
● <em> - Emphasized text
Example: <em>This text is emphasized</em>
● <mark> - Marked text
Example: <p>Do not forget to buy <mark>milk</mark> today.</p>
● <small> - Smaller text
Example: <small>This is some smaller text.</small>
● <del> - Deleted text
Example: <p>My favorite color is <del>blue</del> red.</p>
● <ins> - Inserted text
Example: <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
● <sub> - Subscript text
Example: <p>This is _subscripted text.</p>
● <sup> - Superscript text
Example: <p>This is ^{superscripted} text.</p>

74
Here is the step by step procedure on how use HTML in Notepad.

Step 1. Press your Windows key , then R, on your keyboard and type
NOTEPAD, hit OK

Step 2: Write Some HTML write or copy the following HTML code into Notepad:

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "myfirstwebpage.htm"

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click
- and choose "Open with").

75
The result will look much like this:

HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example:

<a href="https://www.google.com/">Visit google.com</a>

<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified
in the href attribute:</p>

<a href="https://www.google.com">Visit google.com</a>

</body>
</html>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:

Example code:

<html>
<body>

76
 <h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is
specified in the src attribute:</p>
<img src="flowers.jpg" width="500" height="600">

</body>
</html>

Example Output:

Explanation on this.

<img src="flowers.jpg" width="500" height="600">

Name of your picture Size of the Picture

Note:

You can use any name of your object. In html the format of the picture is a JPG. Save
your picture and HTML Script in one Folder to avoid error.

F. Developing Mastery

Web pages can be created and modified by using professional HTML editors. However,
for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).

Follow the steps below to simulate / create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

 Windows 8 or later:
 Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.
 Windows 7 or earlier:
 Open Start > Programs > Accessories > Notepad
Step 2: Open TextEdit (Mac)
 Open Finder > Applications > TextEdit
 Also change some preferences to get the application to save files correctly. In
Preferences > Format > choose "Plain Text"
 Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".
 Then open a new document to place the code.

77
 Step 3: Write some HTML codes
Write or copy the following HTML code into Notepad:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 4: Save the HTML Page
 Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).

G. Finding practical applications of concepts and skills in daily living

Activity 5.10.3. WEBSITE FOR WHAT ( 10 minutes)

Considering the situation nowadays due to pandemic, what particular websites you are
currently using and how these websites help you and your situation on the following
purpose:

 Communication?
 Education?
 Information Dissemination?

H. Making generalizations and abstractions about the lesson

Having a website makes it very easy for people to find you, read up about your company,
what you do and answer a bunch of questions they have on your company. By having a
website people will be able to find your company when they search for your company on a
search engine like Google, Yahoo or Bing.

I. Evaluating learning

Activity 5.10.4. WEBSITE CODING WITH HTML (15 minutes)

A. WEB DESIGN
Direction: Open your Notepad and write the correct script for this output:

B. Applying principles and elements

Direction: Identify the two (2) best principles and elements of web design that are
evidently applicable in the above webpage: “My First WEBPAGE”

J. Additional activities for application or remediation

Activity 5.10.5. HTML EXCLUSIVE (10 minutes)

A. List down 5 common basic tag commands in HyperText Mark Up Language <HTML>
and explain its use.
B. Explain the following and give one(1) example each:
1. Href
2. Img src
3. HTML attributes

78
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 7 October 05 – 06, 2020

The learners demonstrate an understanding of the principles and

Content Standard: techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks .

The learners shall be able to independently apply the principles and

Performance techniques of design using online creation tools, platforms, and
Standard: applications to create original or derivative ICT content for use in
specific professional tracks.

The learners a Apply web design principles and elements using

Learning
online creation tools, platforms, and applications to communicate a
Competency:
message for a specific purpose in specific professional tracks.

Objectives: At the end of the lesson the student should be able to:
1. define WYSIWYG (What You See is What You Get).
2. learn different WYSIWYG platforms and HTML editors.
3. define the two ways on how to design website using Wix.
4. use Wix as an online web creation tool.
5.
Content:
Web page design using templates and online WYSIWYG platforms
(Subject Matter)
Learning Resources:
a. References:
https://www.websitebuilderexpert.com/website-builders/wix/how-to-use-
wix/
https://www.slideshare.net/shelanieoliquino1/webpage-design-using-
templates-and-online-wysiwyg-platforms?from_action=save

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 26 )

Activity 6.11.1. HTML FUNCTION RECAP (5 minutes)

Give 5 html tags and their function.

B. Establishing a purpose for the lesson

Have you experience sending mails already? And how long for the receiver to receive it?
Have you also sent a message through text and how long does it take for a text message
to be received?

Which is more reliable? Isn’t it the text messages?

Because texting comes pre-built on mobile phones and available anytime. It is also much
quicker to send and receive a message and more convenient in our part. Like sending
messages there is also a quick way to build a website, in this lesson you will learn the
different WYSIWYG or HTML editors that can help you to build a website easily.

79
C. Presenting examples/instances of the lesson

WYSIWYG this is where design and content appear on the editing platform is exactly what
it will look like in the final version. Editor makes it easier for marketers to deliver a more
enjoyable customer experience independently.

D. Discussing new concepts

WYSIWYG (pronounced "wiz-ee-wig")

editor or program is one that allows a developer to see what the end result will look like
while the interface or document is being created. It is an acronym for "what you see is
what you get". A WYSIWYG editor can be contrasted with more traditional editors that
require the developer to enter descriptive codes (or markup ) and do not permit any results
of the markup. The first true WYSIWYG editor was a word processing program called
Bravo by Charles Simonyi.

BEST WYSIWYG PLATFORMS

1. Cloud LGS puts more effort into providing the best mobile phone website builder
program. Developed and offered by Cloud LGS, displays beautiful across all screen
sizes, creates responsive designed websites which are packed with online tools &
features to help entrepreneurs grow their business from a cell phone.

2. Wordpress the choice of most web creation professionals, it is an excellent tool for
the creation of your website, and can be utilised for blog sites with customized
options to choose from.

3. Wix has been touted to a strong contender in the WYSIWYG web builder category.
The template designs are very impressive, and there is so much flexibility on how
one can design their website due to the nature of this web creation platform. It also
allows for an easy insertion of web animations.

4. Squarespace templates available are rich in aesthetically pleasingdesigns, and

almost lean to the concept of minimalism.This web creation platform’s site are all
mobile responsive.

5. Weebly is commonly compared to Wix as they both provide the same experience
when it comes to website creation. It allows for interchanging of a template even
after one has been chosen from the beginning and somewhat limited website
creation customizations allow for the building of a website that loads faster for users.

There are two most common used HTML editors:

Dreamweaver- incorporates many advanced features

(accessibility support, dynamic language support, code editing,XML support, growing
Javascript Library)

FrontPage- WYSIWYG editor with similar toolbars/interface to other Microsoft Programs

ADVANTAGES:

● Quick time development

● Little knowledge of HTML needed for basic pages
● Works much like any popular word processor
● Controls file structure within the program

DISADVANTAGES:
● Many have browser bias
● Many still not well accomplished at writing dynamic pages (ASP, PHP, JSP,
ColdFusion)
● Complex pages can easily be composed that do not follow standards and therefore
are not cross platform/ cross browser compatible

80
E. Continuation of the discussion of new concepts ( DAY 27 )

Two ways on how to design website using Wix

Wix Editor- is the standard website builder we know and love. It allows you to create a
beautiful website in just a couple of hours or so.

This makes it ideal for users such as:

o Small businesses
o Restaurants
o Online stores
o Bloggers
o Photographers

Wix ADI (Artificial Design Intelligence)-Using advanced technology, it creates stunning

websites automatically. This is how to build a Wix website with no work involved on your
part. Just provide some basic information, such as your business type, contact
information, and online presence, and it does the rest. You can even make small design
changes to suit your taste once the site is generated.

81
 Given its ease of use and impressive design speeds, Wix ADI is best for:

o Less tech-savvy users

o Busy business owners
o Time-constrained bloggers

F. Developing Mastery

How to Use Wix Editor

To make things simpler, we’ve broken down the Wix Editor process into 12 steps:
1. Sign up
2. Choose a template
3. Update text and images
4. Personalize the background
5. Add pages/site navigation
6. Add apps
7. Set up a blog
8. Add an online store
9. Optimize for search engines
10. Make it look good on mobile
11. Choose a domain name
12. Publish

Wix Editor Roundup

Ready to get going? First, let’s recap the steps for using Wix Editor:

1. Choose a price plan

2. Decide what kind of website you need
3. Select a template
4. Edit text boxes and navigation menus
5. Customize background

82
6. Drag and drop elements
7. Add Apps
8. Check that mobile and SEO functions are in place
9. Preview
10. Publish

How to Use Wix ADI

1. Get started
2. Add features
3. Input your contact details
4. Design your site
5. Select a style
6. Make sure it’s SEO and mobile-friendly
7. Choose a domain name
8. Publish

These are screenshot examples of website created using Wix

83
G. Finding practical applications of concepts and skills in daily living

Activity 6.11.2. USEFULNESS OF A WEBSITE (10 minutes)

Considering the situation nowadays due to pandemic, how useful is a website in the
following fields: Explain your answer.
1. E-Commerce
2. News
3. Education

H. Making generalizations and abstractions about the lesson

Wysiwyg is an acronym for What You See Is What You Get. Is also a way of designing
electronic documents so that content such as text and graphics is displayed on screen
during editing in a way that corresponds exactly to its appearance when printed or
displayed as a finished product. It is much easier compare to hard coding.

I. Evaluating learning

TEST 11 ADVANTAGES AND DISADVANTAGES OF WYSIWYG ( 15 minutes )

1. WYSIWYG stands for?

2. What are the Advantages and Disadvantages of WYSIWYG?

J. Additional activities for application or remediation

Activity 6.11.2. WIX EDITOR (10 minutes)

Enumerate the steps on how to use Wix Editor

84
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 7 October 07 – 08, 2020

The learners demonstrate an understanding of the key learnings

from the previous weeks, which they will synthesize into an
Content Standard:
integrated ICT content through collaboration with classmate and
teacher as both peer and partner.

The learners shall be able to collaboratively develop an online portal

Performance
or website to showcase and share existing and previously
Standard:
developed content.

The learners evaluate the quality, value, and appropriateness of

Learning
peer’s existing or previously developed ICT content in relation to the
Competency:
theme or intended audience/ viewer of an ICT project.

Objectives: At the end of the lesson the student should be able to:
1. define what is Online Collaboration Tools and Processes.
2. learn different collaboration tools based on purpose.
3. identify the Best Google Teamwork Tools for Online Collaboration.
Content:
Online Collaboration tools and processes
(Subject Matter)
Learning Resources:
a. References:
https://www.makeuseof.com/tag/google-teamwork-tools/
https://prezi.com/p/ccuuw7thjevm/online-collaborative-tools-and-
processes/?fbclid=IwAR2yzv4bV4vp5azBlbw5mIw9FU-
moTm_1A_Bd2urFXcgTjP3yGRwo7zBZN4

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 28 )

Activity 6.12.1. WYSIWYG PLATFORMS RECAP (5 minutes)

Enumerate at least 5 BEST WYSIWYG PLATFORMS

B. Establishing a purpose for the lesson

Can you discuss the idea of the quote

above?
Have you experienced this already?
If you already experienced it. How was it?

Do you know that this quotation can also be done in the digital world? In today’s lesson
you will learn how it can be done using Online Collaboration Tools.

85
C. Presenting examples/instances of the lesson

People use to work together within a digital environment. In most cases, it refers to how
people work together over the internet. PowerPoint presentations, video chats, or detailed
brainstorming projects are Online Collaborators that can work together and involve a
team working together. Collaborative means working together in real-time over the
internet.

D. Discussing new concepts

Online Collaborative tools and Processes-People involved in online collaboration can

work together on documents, presentations, brainstorming, and a lot more. No need to be
in the same place at the same time these are tools powered by technology. Collaboration
means working with another individual or a group in order to achieve something and be
able to communicate and work together over the internet.

There are Three Collaboration Software

1. Communication- are more focused communication examples are messaging or

chat.
2. Conferencing- Consist of real-time collaboration of project members who are
presented with a unified view screen. In most cases, one presentee controls the
view screen, while others provide their inputs by talking or chatting.
3. Coordination- Coordination software solutions helps you manage complex or big
interdependent task with a common goal.

FILE SHARING TOOLS

It is the practice of giving access to digital information or resources. It is the private or

public distribution of data or resources in a network.

1. DROPBOX
Offers online file sharing with local storage and
syncing. It can be used exclusively as a web-based
file sharing tool to easily share files with other people
by uploading files.

2. GOOGLE DRIVE
It functions as a file storage and sharing service as
well as a site for you to work on documents,
spreadsheets, presentations and drawing online.

3. WE TRANSFER
A quick file sharing tool that allows up to 2GB of data
per transfer is a simple and secure background. To
send files, you just have to type.

4. 4SHARED
A commonly used cloud service system which gives
users the freedom to store their file.

To share files online Plus Transfer only needs a web

5. PLUS TRANSFER
browser. This gives you freedom to share your files
with your friends or workmates.

86
PRESENTATION/VISUALIZATION

These are software used to create a sequence of test and graphics, audio and video to
accompany a speech or public presentation. There are numerous platforms in creating
presentations such as;

1. PREZI
A tool alternative to PowerPoint that is usually used
or business presentations slides zoom in and
transition to the next during a presentation. This
results in a more cinematic visual effect on the
presentation.

2. SLIDESHARE

A web based slide hosting service which allows its

users to connect and share presentations.

3. MINDMEISTER
An online mind mapping tool that captures, develops,
and shares ideas visually. It can also be used also
as mind map editor for brainstorming, note taking or
other creative talks.

BLOGGING TOOLS- Is one of the avenues for people to express themselves over the
internet. Publishing tools became available.

1. WORDPRESS A free, open source publishing software that can be

installed locally on web server and can be viewed on
proprietary websites or hosted in the cloud and
viewed on WordPress website.

2. BLOGGER A free blogging site from google that allows

members to share photos or videos. It offers private
and multi-user blogs with customized templates, time
stamps entries, archive pages, commenting
capabilities and the ability to generate revenue from
google’s AdSense.

3. TUMBLR
A popular microblogging platform designed for
creative self-expressions. It is considered a mindful
alternative to facebook and other social media
websites where users blog a myriad of topics.

4. LIVE JOURNAL

A social media platform that allows members to keep

a blog, journal or diary and share their interests.

87
E. Continuation of the discussion of new concepts ( DAY 29 )

ONLINE COLLABORATION

1. GMAIL A user-friendly email provider that offers 15 GB

of storage space per account. What you might
not know is it also allows for collaboration
through a delegation option. Delegates can read
and send email on your behalf while accessing
the account.
2. GOOGLE CALENDAR
A great way to visually organize your busy life.
The tool also supports sharing. Make some or
all of your calendars public, so people can see
when you’re free.

3. GOOGLE SHEETS
A spreadsheet app you can use with others
simultaneously. Advantages like conditional
formatting and built-in spreadsheet formulas
save time for you and collaborators. You can
even see other people make edits in real time.
4. GOOGLE DOCS
Works perfectly for putting your head together
with teammates. Use it while writing to-do lists,
brainstorming for projects, or anything else
that’s better with input from others.

5. GOOGLE SLIDES
Avoid endless phone calls and emails about
how to proceed, and collaborate with Google
Slides instead. Select an appealing template to
save design time and make your words pop with
hundreds of font possibilities.

6. GOOGLE KEEP
Think of Google Keep as a beautifully basic
project management tool. You can depend on it
as a place for notes, drawings, lists, pictures,
and audio clips.

7. GOOGLE HANGOUTS
(CHAT)
Google Hangouts, to be renamed Google Chat,
is a messaging app. Use it to talk to one person
at a time through text or up to 150 individuals.

8. GOOGLE MEET
Google Meet is very similar to Google Hangouts
as both offer a video call service. However,
Google Meet is intended for professionals and is
a paid service, although currently free due to the
COVID-19 pandemic. Google Hangouts, on the
other hand, is more for consumers.

88
F. Developing Mastery

These are the steps on how to share files with the use of Google Collaboration tools.

1. Gmail
To set this up, follow these simple steps:
 Click the Settings button (gear icon) and choose
 Select the Accounts and Import tab at the top.
 Scroll down to Grant access to your account.
 Make your selections for the Mark as read and Sender information
 Click Add another account, enter the Gmail address for the person you are
delegating to, and click Next Step.
 Confirm the email address and click Send email to grant access. You’ll be
directed back to your Gmail settings where you’ll see the person’s email address
in that section. It will display as Pending until they accept the invitation and will
then change to reflect that. Your delegate has seven days to accept your
invitation. Once they do, they will see your account listed beneath theirs with the
word Delegated. They simply click that to manage your inbox.

2. Google Calendar
Steps on how to Share calendar with just one person
 Click the options button (three dots) to the right of the relevant calendar in the
main list and select Settings and Sharing.
 On the next page, scroll down to the Share with specific people
 Click Add people and then enter the person’s email address.
 Choose the Permissions dropdown box and pick the privilege you want to allow.
You can also change this afterward in the same section of the settings.
 Click Send.

3. Google Sheets, Google docs, Google Slides

To share your spreadsheet, docs, slide, follow these steps:
 Click the Share button on the upper right.
 Add the email addresses of the people you want to access the
spreadsheet/docs/slide.
 Click the pencil icon and specify whether people can view the sheet, edit it, or
comment on it.
 Alternatively, you can use the Get a shareable link option and send the link
manually. Choose the viewing and editing permissions when doing so and you
can group messages or email the link to your team.
 Click Done when you finish.

4. Google Keep
Start sharing by
 Clicking the Collaborator icon at the bottom of the note.
 Enter the person’s name or type in their email address.
 Click Save.

G. Finding practical applications of concepts and skills in daily living

Activity 6.12.2. ONLINE COLLABORATION TOOLS (10 minutes)

1. Considering your current situation as a student in this time of pandemic, what do you
think is the use of Collaboration tools in your studies?

2. Give an example of online tools used to develop or collaborate ICT content. Evaluate
or provide your honest feedback based on the quality, value and appropriateness of
the tool to the theme of the content. Justify your answer.

89
H. Making generalizations and abstractions about the lesson

There are a lot of types of collaboration technology that can help you to achieve your goal.
It also allows you to work together and share knowledge online. That's where online
collaboration comes in. With a good online collaboration tool, there is no longer a need for
arranging a meeting or phone call in order to review documents. This makes it much
easier to keep a steady and organized workflow on a project, with team members promptly
contributing when necessary.

I. Evaluating learning

TEST 12 ONLINE COLLABORATION TOOLS AND PROCESS ( 20 minutes )

Direction: This is a 10-item test. Identify the following questions.
__________1-3. Give the three Collaboration Software

__________4. It is a free blogging site from google that allows members to share photos
or videos. It offers private and multi-user blogs with customized templates,
time stamps entries, archive pages, commenting capabilities and the ability
to generate revenue from google’s AdSense.

_________5. It functions as a file storage and sharing service as well as a site for you to
work on documents, spreadsheets, presentations and drawing online.

_________6. A tool alternative to PowerPoint that is usually used or business

presentations slides zoom in and transition to the next during a
presentation.

_________7. It is a popular microblogging platform designed for creative self-expressions.

_________8. It is a social media platform that allows members to keep a blog, journal or
diary and share their interests.

_________9. It is a user-friendly email provider that offers 15 GB of storage space per

account. What you might not know is it also allows for collaboration through
a delegation option.

_________10. It is an online mind mapping tool that captures, develops, and shares ideas
visually.

J. Additional activities for application or remediation

Activity 6.12.2. ONLINE COLLABORATION TOOLS (10 minutes)

List down the steps on how to share your spreadsheet, docs, slide for collaboration.

90
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 7 October 09, 12 – 13, 2020

The learners demonstrate an understanding of the key learnings

which they will synthesize into an integrated ICT content through
Content Standard:
collaboration with classmate and teacher as both peer and
partner.

The learners shall be able to collaboratively develop an online

Performance Standard: portal or website to showcase and share existing and previously
developed content.

The learners share and showcase existing or previously

Learning Competency: developed material in the form of a collaboratively designed
newsletter or blog site intended for a specific audience or viewer.

Objectives: At the end of the lesson the student should be able to:
1. define and understand the concept of project management for ICT.
2. understand how to collaborate with the teacher to develop an online content.
3.
curate previously created content and create a collaboratively designed
newsletter or blog site for a specific audience.
4. share and showcase existing or previously developed material.
5.

Content: 1. Project management for ICT content

(Subject Matter) 2. Curating existing content for use on the web

Learning Resources:
a. References:
https://www.techwalla.com/articles/how-to-create-a-one-page-
newsletter
https://blog.learningtree.com/easily-create-newsletter-template-
microsoft-word/
https://www.template.net/business/word-templates/one-page-
newsletter-templates/
https://templates.office.com/en-us/newsletters
https://www.justicegroup.org/courses/project-development-
management-from-a-gender-perspective/
https://meetedgar.com/blog/benefits-content-curation/

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson ( DAY 30 )

Activity 6.13.1. COLLABORATION SOFTWARE RECAP (5 minutes)

Identify the 3 types of collaboration software and give one (1) example each.

B. Establishing a purpose for the lesson

Projects are common in the construction industry, the telecommunications industry and the
IT industry. The management of a project requires special skills.

91
 This lesson deals with the key principles in managing ICT projects. Likewise, by gathering
information in a content relevant to a particular topic or area of interest, usually with the
intention of adding value select, organize, and look after the items in a collection or
exhibition.

C. Presenting examples/instances of the lesson

Activity 6.13.2. Word Cloud (10 minutes)

On the given word cloud, identify 2 words that has the most impact to you about your idea
with project management. Discuss briefly why you have chosen such words and what the
words imply.

D. Discussing new concepts

ICT project management plays a key role in administration of projects in organization

today. Various studies have been conducted on the ICT project management to ensure
that projects are being conducted accordingly and services are delivered respectively in
line with the progress of information technology.

ICT project management requires new management method which is more coordination
of:
 Persons
 Capital
 Objects
 Rapid Information transfer
 Real time information
 Strong flexibility
 Make decision rapidly
 Process of project implementation quickly.

Project Managers work with project sponsors, the project team, and other people
involved in a project to meet project goals
Program is a group of related projects managed in a coordinated way to obtain benefits
and control not available from managing individually (PMBk Guuide, Fourth Edition, 2008,
p. 9 ) wherein the program managers oversee programs; often acts as bosses for
programs

Examples of ICT Projects

 A technician replaces ten laptops for a small department
 A small software development team adds a new feature to an internal software
application for the finance department

92
  A college campus upgrades its technology infrastructure to provide wireless
internet access across the whole campus

What is Project Management?

• Project management is the application of knowledge, skills, tools and techniques to
project activities to meet project requirements
• It is the discipline of planning, organizing, securing, managing, leading ad
controlling resources to achieve specific goals

Project Management Knowledge Areas

• Knowledge areas describe the key competencies that project managers must
develop
• Four Core Knowledge areas lead to specific project objectives (scope, time, cost
and quality)
• Four Facilitating Knowledge Areas are the means through which the project
objectives are achieved (human resources, communication, risk and procurement
management)
• One knowledge Area (project integration management) affects and is affected by
all of the other knowledge areas

Project Success
There are several ways to define project success:
• The project met scope, time and cost goals
• The project satisfied the customer/sponsor
• The result of the project met its main objective such as making or saving a certain
amount of money providing good return on investment or simply making the
sponsor happy.

Project Stakeholders
Stakeholders are the people involved in/or affected by project activities.
Stakeholders include:
• Project Sponsor
• Project Manager
• Project Team
• Support Staff
• Customers
• Users
• Suppliers
• Opponents to the project

The Triple Constraint of Project Management

Successful project management means meeting all three goals:
 Scope
 Time
 Cost
- satisfying the projects sponsors

93
E. Continuation of the discussion of new concepts ( DAY 31 )

What is Content Curation and Why Do You Need It?

Curating content for blogs, websites, social media accounts, and newsletters can add
value to your sites and your marketing efforts, and functions in a variety of ways. In
addition to adding to your existing unique media, curated content allows you to
demonstrate more versatility, an ability to work with others, and industry awareness that
simply creating unique information does not.

Content curation is the process of gathering, creating, and compiling information on a

specific subject and presenting it to readers.

Services or people that implement content curation are called curators. Curation services
can be used by businesses as well as end users(Wikipedia).

There are 3 types of online content

 Creation is like planting seeds from scratch.
 Aggregation is like simply gathering seeds together, which machine (or
birds) can do.
 Curation is like sorting seeds out, putting them into context, framing them, so
that they make sense.

By: Beth Kanter which is an Author, Beth’s Blog, The Networked Non-profit Expert on
using technology at nonprofits

5 Surprising Benefits of Content Curation

1. Portrays you as a thought leader
2. Positions you to connect with other thought leaders
3. Provides you with a deeper understanding of the ins and outs of your industry
4. Increases brand awareness
5. Provides you with insights into your audience that can fuel your own content creation

How to Curate Content?

Select - Choose the right content for your audience.
Personalize - Add a short intro to create your own context.
Share - Present the content on the most appropriate channel.
Analyze - Check out the traffic stats. How did the content perform?

What is a newsletter?
A newsletter is a printed or electronic report containing news concerning of the activities
of a business or an organization that is sent to its members, customers, employees or
other subscribers. Newsletters generally contain one main topic of interest to its recipients.

94
Sample 1-Page Newsletter

How to Create a One Page Newsletter?

Step 1: Go to Microsoft Word's template website—a link is in the Resources section of

this page. Click the "Newsletters" link under "Browse Templates." You may also be
able to access the template library directly from Microsoft Word.
Step 2: Download the template design of your choice. Templates come in different
sizes, designs and page sizes. For this example, try to find a single page formatted
with three columns.
Step 3: Choose about three stories to write about on your newsletter. If each story is
about 125 words, this is all you will have room for on one page.
Step 4: Type in the title of your newsletter. For example, "ABC Dance Class Newsletter
Brief." Type in the issue number and date of the newsletter in the designated box.
Step 5: Summarize what can be found in the newsletter in the side column, which is
usually part of a newsletter template. For example, "In this issue: New Dance Class
Offered, Student Teacher Needed, New Lesson Times."
Step 6: Place a descriptive photo underneath the side column or at the top of the main
content section.
Step 7: Write your featured story at the top of the content section. It should be about 150
words. Type in a short, catchy headline for the story.
Step 8: List your next two stories in vertical columns underneath the featured story.
These sections should be about 100 to 120 words each. Add headlines also.
Step 9: Type a teaser line for the next issue at the very bottom of the newsletter. "In the
next issue: An interview with our best student."
Step 10: Save, print and distribute the one-page newsletter to your group.

95
F. Developing Mastery

Activity 6.13.3. CREATING A SAMPLE NEWSLETTER (10 minutes)

Simulate/write the detailed procedures on the creation of the sample newsletter.

G. Finding practical applications of concepts and skills in daily living

Activity 6.13.4. INFORMATION WISE: SHARED POST (10 minutes)

Social media encounters are now booming, especially in sharing post. As a social media
user (Examples are: Facebook, Instagram, Twitter) remember the posts you’ve shared in
your social media account and answer the following:

A. Which social media account do you usually use?

B. What type of post do you usually share in your social media account? (examples
are: vlogs, music, news etc.)
C. What are your reasons in sharing those post? Give at least 3
D. Do you consider the content of the post you are sharing? Explain in 3-5 sentences

H. Making generalizations and abstractions about the lesson

Project based management gives us the idea of having the discipline in using established
processes, methods, knowledge, skills and experiences that can already be available or
done by the project management to achieve the project objectives. Content curation is
also used in establishing a project. The content of a certain project in a certain place
doesn’t always fit the others content, which means contents also have a special role in
making the project sensible.

96
I. Evaluating learning

TEST 13 PROJECT MANAGEMENT ( 15 minutes )

Test I

Direction/s: Given situations below, identify if the given statement is under project
management, project success, or project stakeholder. Write PM if the statement is under
project management, PS if project Success, and PSt if project Stakeholder.

___________1. The project met its main objective.

___________2. It is the discipline of planning, organizing, securing, managing, leading
and controlling resources.
___________3. The project met scope, time and cost goals.
___________4. People involved in/or affected by project activities
___________5. It is the application of knowledge, skills, tools and techniques.
___________6. It includes the opponents to the project.
___________7. The project satisfied the customer/sponsor.
___________8. Leads to specific project objectives.
___________9. Provides good return on investment or simply making the sponsor happy.
___________10. Includes the Project Manager.

Test II:
Explain in not less than 5 sentences, “How does curation differs from creation? Provide
examples.”

J. Additional activities for application or remediation ( DAY 32 )

Activity 6.13.5. ONLINE ACTIVITY: WHO IS BEHIND (15 minutes)

1. ICT project management plays a role in administration of projects in an organization

today. Organizations in a certain Barangay also have an important role to proposed or
even implement projects, either online or offline, which could help the people in the
Barangay. But because of the pandemic (COVID 19) that we are encountering, most of
these projects are made online to ensure the safety of each individual and projects
are still conducted accordingly and services are delivered respectively in line with the
progress of of the Barangay’s activities.

As an individual in your barangay, list 1 online activity and identify the people behind
the success of this activity offered by filling out the table below.

Barangay
Activity
Name
Project Sponsor
Project Manager
People Project Team
behind Support Staff
Customers
Users
Suppliers
Opponents to the
project (if any)

97
 2. Using your previous learnings about web design, simulate the procedures on the
creation of a basic webpage(about your Curriculum Vitae/Resume) using the available
online or offline creation tools. Keep in touch with your teacher for guidance. Use the
sample image as guide and include your necessary data. You may try the actual site
creation. Elaborate your detailed procedures.

Prepared and Submitted by:

ETECH TEACHERS MESSENGER ACCOUNT CONTACT NUMBER

RAYMOND A. CABRERA Raymond Cabrera 0925 – 482 – 4066

REYMON S. QUIZON Reymon Quizon 0943 – 592 - 0584

AMIHAN FLORISSA B. RAMIREZ Amihan Florissa Ramirez 0926 – 662 – 8823

AGASSI M. ROJO Ma’am Vhei Buot 0935 – 078 – 2565

ANGELICA G. RONQUILLO Ro An 0905 – 588 – 1540

ANNE VHALERIE V. BUOT Gus Rojo 0965 – 799 – 6904

98