Download as pdf or txt
Download as pdf or txt
You are on page 1of 91

SHS

EMPOWERMENT
TECHNOLOGIES
QUARTER 1

1
EMPOWERMENT
TECHNOLOGIES
QUARTER 1
Development Team of the Module:
Authors: Rhessie M. Ambion
Editor: Leylanie V. Adao
Reviewer:
Management Team:
Gemma G. Cortez, Ed.D., CID - Chief
Leylanie V. Adao, EPS - LR
SDO Dasmariñas City
Schools Division Superintendent: Celedonio B. Balderas, Jr.
Asst. Schools Division Superintendent: Bernadette T. Luna

Guide in Using Learner’s Module

For the Parents/Guardian


This module is designed to assist you as the learning facilitator at home. It
provides you with activities and lessons’ information that the learners need
to accomplish in a distance learning modality.

For the Learner


This module is designed to guide you in your independent learning activities
at your own pace and time. This also aims to help you acquire the
competencies required by the Department of Education (DepEd) at the
comfort of your home.

You are expected to answer all activities on separate sheets of paper and
submit the outputs to your respective teachers on the time and date agreed
upon.

2
Lesson 1 – Introduction to Information and Communication Technologies

Introduction
Welcome to Empowerment Technologies online class! Lesson 1 covers topics about the
introduction to Information and communication Technologies. It includes the following topics:
 The state of ICT Technologies
 Online systems, functions, and platforms
At the end of this lesson, you should be able to:
1. improve your knowledge on how ICT affects your everyday life and the state of our nation;
2. compare and contrast the differences between online platforms, sites and content;
3. understand the features of Web 2.0;
4. understand the future of the World Wide Web through Web 3.0; and
5. learn the different trends in ICT and use them to their advantage.

Answer the following questions below honestly.


1. How many times have you checked your phone this morning?
2. How many status updates have you posted in Facebook or Twitter today?
3. Did you use the internet for an hour after you woke up this morning?
4. Do you follow a celebrity via his/her social media account?
If you happened to be “guilty as charged” in most of these questions, chances are, you are a
digital native. And chances are, from the moment you were born, you were surrounded by technology.
You are surrounded by ICT.

Development
As the popular saying goes, “Love makes the world go round.” But before you start
looking for someone to fall in love with, you could argue how the internet has made the world
go round for decades. Likewise, the internet has probably made your world go round. In this
lesson, we will understand how information and Communication Technologies have improved
our lives in such a short period of time.

Information and Communication Technologies


Information and Communication Technology (ICT) deals with the use of different
communication technologies such as mobile phones, telephone, Internet, etc. to locate, save,
send, and edit information.
When we make video call, we use the Internet. When we send a text or make a call,
we use cellular networks. When we run out of load or battery, we use payphones which use a
telephone network. Having unified way to communicate is one of the goals of ICT. In terms of
economics, ICT has saved companies a lot of resources (time and money) with the kind of
communication technology they use, nowadays. In a similar way, we spend less because of
ICT. As it normally costs us a peso to send a text message or SMS, with the internet, we can
send multiple messages and only be charged by a fraction.

ICT in the Philippines


Several International Companies dub the Philippines as the “ICT Hub of Asia.” It is no
secret that there is a huge growth of ICT-related jobs around the country, one of which is the
call center of BPO (Business Process Outsourcing) center.
According to the 2013 Edition of Measuring the Information Society by the
International Telecommunication Union, there are 106.8 cellphones per 100 Filipinos in the
year 2012. That would mean that for every 100 Filipinos you meet, there is a high chance
that they have a cellphone and approximately for the seven of them, they have two.

3
In a data gathered by the Annual Survey of the Philippine Business and Industries,
NSO, in 2010, the ICT industry shares 19.3 of the total employment population here in the
Philippines.
To Add to this statistics, Time Magazine’s “ The Selfiest Cities around the World” of
2013 places two cities from the Philippines in the top 1 and top 10 spots. The study was
conducted using Instagram, a popular photo sharing application.
With these numbers, there is no doubt that the Philippines is one of the countries
that benefits most out of ICT.

Web 2.0: Dynamic Web Pages


The internet has been a vital tool to our modern lives that is why it is also important
to make the best of the Internet.
When the World Wide Web was invented, most web pages were static. Static (also
known as flat page or stationary page) in the sense that the page is “as is” and cannot be
manipulated by the user. The content is also the same for all users. This is referred to as
Web 1.0.
However , the World Wide Web is more than just static pages. Pretty soon, Web 2.0
came to the picture.
Web 2.0 is aterm coined by Darcy DiNucci on January 1999. In her article titled,
“Fragemented Future,” she wrote:
The web we know now, which loads into a browser window in essentially atatic
screenfuls, is only an empty embryo of the web to come. The first glimmerings of
Web 2.0 are beginning to appear, and we are just starting to see how that embryo
might develop.
Web 2.0 is the evolution of Web 1.0 by adding dynamic web pages – the user is able
to see a website differently than others. Examples of Web 2.0 include social networking
sites, blogs, wikis, video sharing sites, hosted services, and web applications. Web 2.0 allows
users to interact with the page: instead of just reading a page, the user may be able to
comment or create a user account. Web 2.0 also allows users to use web browsers instead
of just using their operating system. Browsers can now be used for their user interface,
application software (or web applications), and even for file storage. Most websites that we
visit today are Web 2.0.

Activity 1. Static vs. Dynamic


Look for 10 websites and classify them as static or dynamic. What makes each
website static or dynamic? Use the table below.
Website URL Static Dynamic Reason

4
Features of Web 2.0
The key features of Web 2.0 include:
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 the pound sign (#). This is also referred to
as hashtag.
2. Rich User Experience – 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 – the owner of the website is not the only one who is able to put
cont. Others are able to place a content of their own by means of comments, reviews, and
evaluation. Some websites allow readers to comment on an article, participate in a poll, or
review a specific product (e.g., Amazon.com, online stores).
4. Long Tail – services that are offered on demand rather than on a one-time purchase.
In certain cases, time-based pricing is better than file size-based pricing or vice versa. This is
synonymous to subscribing to a data plan that charges you for the amount of time you spent
in the Internet or a data plan that charges you for the amount of bandwidth you used.
5. Software as a Service – users will subscribe to a software only when needed rather
than purchasing them. This is cheaper option if you do not always need to use a software. For
instance, Google Docs is a free web-based application that allows the user to create and edit
word processing and spreadsheet documents online. When you need a software, like a Word
Processor, you can purchase it for a one-time huge amount and install it in your computer and
it is yours forever. Software as a service allows you to “rent” a software for a minimal fee.
6. Mass Participation – diverse information sharing through universal web access.
Since most users can use the Internet, Web 2.0’s content is based on people from various
cultures.

Web 3.0 and the Semantic Web


The Semantic Web is a movement led by the World Wide Web Consortium (W3C). The
W3C standard encourages web developers to include semantic content in their webpages.
The term was coined by the inventor of the World Wide Web, Tim Berners-Lee. Lee also noted
that the Semantic Web is a component for Web 3.0.
According to the W3C,” The Semantic Web provides a common framework that allows
data to be shared and reused across application, enterprise, and community boundaries.” The
aim of Web 3.0 is to have machines (or servers) understand the user’s preferences to be able
to deliver web content specifically targeting the user. For example, when doing a web search
in Web 2.0, the topmost result is based on the preference of several users who already
searched for the item. The search engine then labels it the most common answer to the search
query. Though there are instances wherein several preferences are considered like geographic
location, Web 3.0 aims to do better. This is through studying personal preferences of an
individual user and showing results based on those preferences. The internet is able to predict
the best possible answers to your question “learning” from your previous choices.
For example, if you search the Internet for “where is the best place to go shopping?”
Web 3.0 will aim to give you results depending on how you have made choices in the past. If
you have purchased several shoes online, the Internet will give you result on the best place
with the highest rated shoes around your vicinity.
Another example is when you search for the best restaurant to visit in a specific area.
First, it may look for your previous visits from other restaurants and if you have rated them
whether good or bad. In return, Web 3.0 will search for restaurants that have similar menu,
good rating, and budget that fit your preference in the past.
Web 3.0 is yet to be fully realized because of several problems:

5
1. Compatibility. HTML files and current web browsers could not support Web 3.0.
2. Security. The user’s security is also in question since the machine is saving his or her
preferences.
3. Vastness. The World Wide Web already contains billions of web pages.
4. Vagueness. Certain words are imprecise. The words “old” and “small” would depend on
the user.
5. Logic. Since machines use logic, there are certain limitations for a computer to be able to
predict what the user is referring to at a given time.

Trends in ICT
As the world of ICT continues to grow, the industry has focused on several
innovations. These innovations cater to the needs of the people that benefit most out of ICT.
Whether it is for business or personal use, these trends are current front runners in the
innovation of ICT.
1. Convergence
Technological Convergence is the synergy of technological advancements to work on
a similar goal or task. For example, besides using your personal computer to create word
documents, you can now use your smartphone. It can also use cloud technologies to sync files
from one device to another while also using LTE technology which means you can access your
files anytime, anywhere. Convergence is using several technologies to accomplish a task
conveniently.

2. Social Media
Social Media is a website, application, or online channel that enables web users to
create, co-create, discuss, modify, and exchange user-generated content. According to
Nielsen, a global information and measurement company, Internet users spend more time in
social media sites than in any other type of sites. With this, more and more advertisers use
social media to promote their product.
There are 6 types of social media:
a. Social Networks – These are the sites that allow you to connect with other people
with the same interest or background. Once a user creates his or her account, he or she can
set up a profile, add people, create groups, and share content. Examples: Facebook and
Google +
b. Bookmarking Sites. These are sites that allow you to store and manage links to
various websites and resources. Most of these sites allow you to create a tag that allows you
and others to easily search or share them. Examples: StumbleUpon and Pinteres.
C. Social News. These are sites that allow users to post their own news items or links
to other news sources. The users can also comment on the post and comments may also be
ranked. They are also capable of voting on these news articles of the website. Those who get
the most amount of votes are shown most prominently. Examples: reddit and Digg
d. Media Sharing. These are sites that allow you to upload and share media content
like images, music, and video. Most of these sites have additional social features like liking,
commenting, and having user profiles. Examples: Flicker, Youtube, and Instagram
e. Microblogging. These are sites that focus on short updates from the user. Those
subscribed to the user will be able to receive those updated. Examples: Twitter and Plurk
f. Blogs and Forums. These websites allow users to post their content. Other users are
able to comment on the said topic. There are several free blogging platforms like Blogger,
WordPress, and Tumblr. On the other hand, forums are typically part of a certain website or
web service.

6
3. Mobile Technologies
The popularity of Smartphones and tablets has taken a major rise over the years. This
is largely because of the devices’ capability to do tasks that were originally found in personal
computers. Several of these devices are capable of using high-speed internet. Today, the latest
mobile devices use 4G Networking (LTE), which is currently the fastest mobile network. Also,
mobile devices use different operating systems:
a. iOS – used in Apple devices such as iPhone and iPad
b. Android – an open source operating system developed by Google. Being open
source
means several mobile companies use this OS for free.
c. Blackberry OS – used in Blackberry devices
d. Windows Phone OS – a closed source and proprietary operating system developed
by Microsoft.
e. Symbian – the original smartphone OS; used by Nokia devices
f. WebOS – originally used for smartphones; now used for smart TVs.
g. Windows Mobile – developed by Microsoft for smartphones and pocket PCs.
4. Assistive Media
Assistive Media is a nonprofit service designed to help people who have visual and
reading impairments. A database of audio recordings is used to read to the user. You may visit
http://www.assistivemedia.org/ for several of their audio recordings.

Engagement
Activity 2. Identifying the correct Web platform for Social Change
1. Identify a problem in your community (e.g., littering, garbage disposal, blocked drainages,
etc.).
2. Imagine that you are going to create a website to persuade both community leaders and
members to solve this problem.
3. Fill out the form below and submit your output in Activity 2 Submission Bin using this
filename format: Section_lastname_firstname_activity2

Community Problem: ________________________________________________________


Vicinity: ___________________________________________________________________
Campaign Name: ___________________________________________________________
Type of Social Media Used: ___________________________________________________
Website Used: _____________________________________________________________

What will be the content of your social media site?


__________________________________________________________________________
__________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

Why do you choose that type of social media?


___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

Why did you choose that website?


___________________________________________________________________________
___________________________________________________________________________

7
Assimilation

Activity 3. Reflection Paper


Compose a 300-word insightful reflection paper on the nature of ICT in the context
of your life, society, and enrolled senior high school track/strand.

Quiz
True or False: Choose True if the Statement is Correct; Otherwise Choose False.
1. Tim Berners-Lee created the World Wide Web
2. People Magazine conducted the research on “The Selfiest cities in the World.”
3. Web 2.0 introduced static webpages that allow users to interact with the webpage.
4. Folksonomy allows users to categorize and locate information
5. Technological convergence is the synergy of technological advancements to work on a
similar goal or task.
6. According to Nielsen, users who use the Internet spend more time in social media sites
than in any other type of site.
7. Blogging sites are sites that focus on short updates from the user.
8. Android is a mobile operating system for Apple devices
9. Assistive Media is a nonprofit service designed to help people who have visual and
reading impairments.
10. Information and Communication Technology (ICT) deals with the use of different
communications Technology to locate, save, send, and edit information.

References:
(2016). Empowerment Technologies, Innovative Training Works, Inc. First Edition. Rex Bookstore

Lesson 2: Online Safety, Security, Ethics, and Etiquette

Introduction
In the previous lesson, you learn how Information and Communication Technologies have
improved our lives in such a period of time. In this lesson you’ll learn to consider one’s and other’s
safety when sharing information using the Internet and be responsible in the use of social networking
sites.
Most of us use the internet every day. Sometimes, we do not pay attention on how much
information we share online. Below is a questionnaire about how much information you have shared
so far. Put a check (/) under Shared or Not Shared

How Safe Are You?


Type of Information Shared Not Shared
1. First Name
2. Last Name
3. Middle Name
4. Current and Previous School (s)
5. Your Cellphone Numbers
6. The name of your father and mother
7. Name of your siblings
8. Your address
9. Your home phone number
10. Your birthday

8
How many checks did you have for Shared? You probably answered Shared in the first two
items. If that is the case, try using a search engine like Google then type your first and last name. Did
you get links to your profile page? Try switching to image search. Did your picture appear? If you have
a unique name, chances are, it did. Do not feel bad if it did not appear though. In fact, it id probably
for your best interest not to have pictures of yourself in a search engine.
So how did this happen? How can search engines locate you? Is there any danger of being
found by search engines?

Development
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?
We are all exposed to many things powered by the Internet. Without proper knowledge in
responsible use of the Internet, we could be a victim or hurt other people.
The Internet is defined as the “Information Superhighway.”
This means that anyone has access to this highway, can place information, and can grab
information. Any information, even things that you have set privately, can be access one way or
another. The threat of cybercrime is very real. While you may not experience the threat now, whatever
information we share today could affect our future.

NETIQUETTE
The term “netiquette” is a coined or portmanteau term of network and etiquette. A
netiquette is a set of ideal rules and conduct that a netizen should observe in communicating and/or
publishing information and materials over the World Wide Web and in ICT in general.

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 an 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.
• Buy the software; do not use pirated ones.
• Do not reply or click links from suspicious emails.

You can also watch these videos:

Core Rules of Netiquette by: Angel Rivera (2016). Core Rules of Netiquette
https://youtu.be/FWMk_Zv7nB8. Youtube.com.

9
Responsible Use of Social Media THINK by Projonmo Agami
https://www.youtube.com/watch?v=qKxJA7bE-xw

Dos and Don'ts when using social networks By leadinginnovation


https://www.youtube.com/watch?v=hqezbib5qpQ

Online Ethics By: Dua Nadeem


https://www.youtube.com/watch?v=hUxMpDcXhw0

Safe Web Surfing: Top Tips for Kids and Teens Online By: watchwellcast
https://www.youtube.com/watch?v=yrln8nyVBLU

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.
3. PHISHING – 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
Service) System.
Watch the following video about internet threats:
(2018). Internet Threats by Lorenzo Dinglasan. https://youtu.be/YYeSrPjSob4

PHISHING
- the illegal act of sending emails or messages that appear to come from authentic sources,
but really come from spammers. Phishers often try to get people to send them their personal
information, everything from account numbers to passwords.

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.

10
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 scanthat 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.

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.
Tips that could help avoid copyright infringement:
1. UNDERSTAND – express something using your own words. You should give credit to the
source.
2. BE RESPONSIBLE – know if something has copyright.
3. BE CREATIVE – add your own creative genius.
4. KNOW THE LAW – know about copyright laws, fair use

ONLINE RESEARCH
The information that we need is more likely already in the Internet. It is just a matter of how to
look for it and how to use information from the most credible source. Here are some tips in conducting
online research.
• Have a question in mind. Focus on a question you want to answer. If it is a series of questions,
start with one. Never search anything on the go.
• Narrow it down. Search engine like Google, Bing, or Yahoo use several filters to determine the
most appropriate result for you. These search engines use your previous search history and
your geographical location, and send you the result which is the most related to you.
• Advanced search. The best way to filter information you get from search engines is by using
advanced search. This will allow you to filter out information you do not need. In Google,
simply search a word like you would normally do, then click the advanced search option on
the options button located at the upper right corner of the page.
• Look for a credible source. Some wikis, though filled with updated information, are not a
credible source. This is due to the fact that anyone can edit its content. When using wikis,
check out the link of the cited text to be navigated to the footnote where the list of sources is
located. (The more credible sources are scientific journals, established news and magazines
websites, online encyclopedias, and scholarly databases. Check the URL of a website if it ends
with a .org, .gov, and ,edu. .Edu websites are best for research.)
• Give credit. If you are going to use the information from a source for educational purposes,
give credit to the original author of the page or information.
To properly cite a reference, you may use the format below:

Name of the person or organization (the author of the information). Title of the home
page in italics (title is shown in title bar but is sometimes missing or unrelated). URL.
Date last seen.

Example:
Lapiz, Adrian Harold L. “Oleander’s Fun Facts about Bananas.”
http://oleader.penz.com/random/bananalove.htm. Viewed on September 7, 2015.

“Accounting: What you should know.” Jargon Online Network.


http://www.jargononline.com/accounting101.html. Viewed on April 12, 2015.
11
GOOGLE TECHNIQUES
A. Find the Hidden Calculator
If number crunching just isn't your thing -- and you need a fast answer -- Google's
hidden calculator is a lifesaver. Head straight to the search bar and type in the problem or
equation you're looking to solve. You'll know you've gotten to the right place when a gray,
calculator-like tool pops up as the search result.

Bonus tip: How many teaspoons equal a tablespoon? When the homework is put away and
you need an extra hand at the Chemistry lab, this tool converts measurements, too.

B. Definitions and More


Browsing the Merriam-Webster dictionary for hours might be a lost art, but
broadening kids' vocabulary doesn't have to be. Simply add the word "define" before a
search term (for example, “define onomatopoeia”) to bring up the proper spelling,
definition, origin, and even 17 of 63 fun tools like voice and translation options.

Bonus tip: If you struggle with spelling, don't worry. Google will suggest and search based on
the appropriate spelling of most words, just as it does for regular searches.

C. Age-Appropriate Results

● Tools like Google SafeSearch9 and YouTube's Safety Mode10 can help filter out mature
content that's beyond what those below 18 are ready to see or read. This can also be taken a
step further with search results filter by reading level so you or your younger siblings or
friends feel comfortable with what's in front of them. Let Google annotate the results with
reading levels labeled, or choose to only show basic, intermediate, or advanced level
content.

● If you are looking for credible information -- or your first taste of scholarly research --can
check out Google's academic offshoot, Google Scholar .11

● Bonus tip: Explore with confidence12 by viewing content critically. Just because you see it
online doesn't mean it's true.

D. Time-Zone Challenged

If you have far-flung family and don’t want to wake them up in the middle of the
night, you can find the local time anywhere in the world by typing "time" and a city's name
into the search bar.

E. The Perfect Search


● Let’s say the homework assignment requires you to use only one source of information.

Enter your query, followed by the url for the website (i.e., weaving site:ncca.gov.ph/ ) and
hit enter. You'll see only results from that website.

● Need help with weaving homework but getting search results for weaving for sale? Add a
minus sign before "sale" to eliminate sale-related results.

F. Photo Magic

12
Learning how to attribute photos is a critical research skill. With Google Reverse
Image Search, you can upload any photo to Google Images and hit "search" to find the name
of it, and a whole lot more.

Bonus tip: In Google's Chrome browser, you can just right-click on any image and select
"search Google for this image." There's a Firefox add-on, too.

G. Just for Fun


If all you really need is a little distraction, go to Google and type in "tilt," browse the
Google Doodle archives, or just tell Google to do a barrel roll. You won't be disappointed.”
And if you want some more keyword tricks, check out the search techniques below.

TRIVIA/SEARCH QUERY TIPS

1. Define. When your query includes the define: operator, Google displays all the
definitions it finds on the web.
2. Site. “ If you really like a web site (e.g. http://ncca.gov.ph ) but its search tool isn’t very
good, fret not—Google almost always does a better job ”.
Example: [site:ncca.gov.ph culture]
3. Reverse Image search.Instead of typing the keywords, you upload an image of an
unknown product or point to its URL in the search box or bar. Useful to find product names,
recipes, and more
4. Autocomplete. Google's autocomplete is a handy tool for both saving time and
getting a feel for what people are searching. See the image below.
5. More advanced search operators: https://goo.gl/aLuTFZ

Engagement
Activity 1. Privacy Policies
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 sometime labeled only as “Policy.’ Write a short
summary on how the website handles both private and public information.
Submit your output in Activity 1 Submission Bin.

Activity 2. Cyber News Report (Optional)


Research for several news and events related to cybercrime. Using your cellphone or
any video-recording device, report it as if you were a newscaster. Submit your video in
Activity 2 Submission Bin.

Assimilation
Activity 3. Poster
Using drawing materials, create a poster that shows issues or problems that may be
encountered which is related to online safety and security. Write a brief reflection about the
importance of being safe and secured online.

RUBRICS
Criteria Excellent (10) Good (8) Fair (5) NI (2)

Content (issues or
problems that may be Message is clear
Message is clear, Message is clear and Message is unclear
encountered which is but question-
accurate, and strong. accurate. and/ or inaccurate.
related to online able.
safety and security)

13
All graphics are related
All graphics are All graphics Graphics do not
to the topic and most
related to the topic relate to the relate to the topic
make it easier to
Graphic (Relevance and make it easier to topic. Two and/or three or more
understand. One
and Citation) understand. All borrowed borrowed graphics
borrowed graphics
borrowed graphics graphics have no do not have a
have no source
have a source citation. source citation. source citation.
citation.

The poster is
The poster is excep-
The poster is attractive acceptably The poster is poorly
tionally attractive in
Design and Layout in terms of design, attractive though designed and the
terms of design,
layout, and neatness. layout is layout is cluttered.
layout, and neatness.
cluttered.

Every individual in the


Group work is done Group work is Group members are
Work Ethics group contributed to
mostly by two done mostly by not working during
(Cooperation) the creation of the
individuals. one individual. the designated time.
digital poster.

Quiz. Matching Type: Match column A with Column B. Write the letter of the correct answer on the
space before each number.
1. Virus a. designed to send you advertisements
2. rogue b. sends an official-looking email and is designed to steal sensitive
3. keylogger personal information.
4. adware c. a provision that allows you to use copyrighted work without consent
5. spam with certain limitations
6. phishing d. a browser feature that is synonymous to “private” browsing
7. fair use e. replicates and can transfer from one computer to another.
8. spyware f. exploits the DNS system.
9. private g. states that anyone who uses your work without your consent is
10. malware punishable by law.
11. incognito h. runs in the background and monitors what you are doing
12. internet i. unwanted email mostly from bots
13. Trojan j. disguised as a useful program but is not
14. copyright k. the information superhighway
15. pharming l. tricks the user into posing that it is a security software
m. a malicious software
n. an option to hide a post so that search engines could not scan it.
o. used to record the keystrokes done by the user.

References:
Web Surfing: Top Tips for Kids and Teens https://www.youtube.com/watch?v=yrln8nyVBLU By:
Watchwellcast
Malware: Differences Between Computer Viruses
https://www.youtube.com/watch?v=n8mbzU0X2nQ By: Kaspersky Lab
Online Research: Tips for Effective Search Strategies -
https://www.youtube.com/watch?v=LTJygQwYV84 By: Sarah Clark
(2016). Empowerment Technologies, Innovative Training Works, Inc. RexBookstore, pp. 19-25
http://www.google.com/doodles#archives
http://www.google.com/#q=do+a+barrel+roll

Angel Rivera (2016). Core Rules of Netiquette https://youtu.be/FWMk_Zv7nB8. Youtube.com.

14
Core Rules of Netiquette by: Angel Rivera (2016). Core Rules of Netiquette
https://youtu.be/FWMk_Zv7nB8. Youtube.com.

Responsible Use of Social Media THINK by Projonmo Agami


https://www.youtube.com/watch?v=qKxJA7bE-xw

Dos and Don'ts when using social networks By leadinginnovation


https://www.youtube.com/watch?v=hqezbib5qpQ

Online Ethics By: Dua Nadeem


https://www.youtube.com/watch?v=hUxMpDcXhw0

Safe Web Surfing: Top Tips for Kids and Teens Online By: watchwellcast
https://www.youtube.com/watch?v=yrln8nyVBLU

(2018). Internet Threats by Lorenzo Dinglasan. https://youtu.be/YYeSrPjSob4

15
Lesson 3: Applied productivity tools with advanced application techniques
 Mail merge and Label Generation
 Integrating Images and External Materials

Introduction
Good day learners! Today you are going to learn about mail merge. In this lesson you should
be able to do the following objectives:
 use some advanced capabilities of Microsoft Word commonly used to increase productivity
and efficiency;
 effectively use these features to help improve the productivity of an organization through
maximizing the potential of MS Word;
 create form letters or documents for distribution to various recipients;
 create labels and envelops for distribution; and
 create media-rich documents for printing or publishing

In the professional word, sending out information to convey important information is vital.
Because of ICT, things are now sent much faster than the traditional newsletter or postal mail. You
can now use the internet to send out information you need to share. What if we could still do things
much faster-an automated way of creating and sending uniform letters with different recipients?
Would that not be convenient?
In this part of the lesson we will learn one of the most powerful and commonly featured of
MS Word called “Mail Merge”. This features allow you to create documents and combine or merge
them with another document or data file
Scenario 1: You were tasked to create and sent out formal invitations for a promo campaign that a
company is running. You were also initially given a list of ten names of loyal customers to send out
to.
1. From the scenario above, describe briefly how would you most likely complete the task of sending
ten invitation will individual names of recipients using MS WORD
2. Give examples of documents that you can personalize and send or distribute

Development
Mail Merge is a useful tool that allows you to produce multiple letters, labels,
envelopes, name tags, and more using information stored in a list, database, or
spreadsheet. (www.google.com)
Use mail merge to create and send bulk mail, labels, and envelopes
Organizations communicate with customers throughout their day-to-day
operations. Communication can take different forms: welcome letters, special
announcements, thank-you emails, and invoices to name just a few. The mail merge
feature in Word can help organizations produce various forms of written
communication more efficiently.
With the mail merge process, your organization can create a batch of
personalized letters or emails to send to your professional contacts. Each letter or
email can include both standard and custom content. You can choose, for example,
to greet each recipient by their first name, use their mailing address, or add unique
information like a membership number. All the information you use to customize the
letter or email is taken from entries in your data source, which can be a mailing list.
With the combination of your letter or email and a mailing list, you can create
a mail merge document that sends out bulk mail to specific people or to all people on
your mailing list. You also can create and print mailing labels and envelopes by using
mail merge.

16
Mail merge process
The mail merge process has three documents involved in creating and
printing letters and emails, or labels and envelopes.
 Your main document
This document contains text and graphics (a logo or an image, for example)
that are identical for each version of the merged document. An example of
identical content is the return address on the envelope or in the body of a
letter or an email message.
 Your mailing list
This document contains the data that is used to fill in information in your main
document. For example, your mailing list contains the addresses to be printed
on the labels or envelopes.
 Your merged document
This document is a combination of the main document and the mailing list.
Information is pulled from your mailing list and inserted in your main
document, resulting in the merged document—the letter, email, labels, or
envelopes—personalized for different people on the mailing list.

What bulk mailing document do you want to create?


Letters
Create and print a batch of personalized letters for everyone on your mailing
list. Each letter prints on a separate sheet of paper.
Email
Create and send email messages for each person on your mailing list with
custom information inserted from the mailing list.
Envelopes
Create and print a batch of envelopes for mailing.
Labels
Create and print sheets of mailing labels; each label is a unique mailing
address.

Mail merge using an Excel spreadsheet

Mail merge is used to create multiple documents at once. These documents


have identical layout, formatting, text, and graphics. Only specific sections of each
document varies and is personalized. The documents Word can create with mail
merge include bulk labels, letters, envelopes, and emails. There are three documents
involved in the mail merge process:

 Your main document


 Your data source
 Your merged document

You can learn more about how to use excel data for mail merge in the following video
that is a part of a training course - Take mail merge to next level

Step 1: Prepare data in Excel for mail merge

The most important step in the mail merge process is to set up and prepare your
data. You'll use your Excel spreadsheet as the data source for the recipient list.

Here are some tips to prepare your data for a mail merge. Make sure:

17
 Column names in your spreadsheet match the field names you want to insert in your
mail merge. For example, to address readers by their first name in your document,
you'll need separate columns for first and last names.
 All data to be merged is present in the first sheet of your spreadsheet.
 Data entries with percentages, currencies, and postal codes are correctly formatted
in the spreadsheet so that Word can properly read their values.
 The Excel spreadsheet to be used in the mail merge is stored on your local machine.
 Changes or additions to your spreadsheet are completed before it's connected to
your mail merge document in Word.

NOTES:

 You can import information from your Excel spreadsheet by importing information
from a comma-separated value (.csv) or a text (.txt) file and use the Text Import
Wizard to build a new spreadsheet.
 For more information, see Prepare your Excel data source for mail merge in Word.

Step 2: Start the mail merge

1. In Word, choose File > New > Blank document.


2. On the Mailings tab, in the Start Mail merge group, choose Start Mail Merge, and
then choose the kind of merge you want to run.

3. Choose Select Recipients > Use an Existing List.

18
4. Browse to your Excel spreadsheet, and then choose Open.
5. If Word prompts you, choose Sheet1$ > OK.

NOTE: Now the Excel spreadsheet is connected to the mail merge document you’re
creating in Word.

Edit your mailing list

You can limit who receives your mail.

1. Choose Edit Recipient List.

2. In the Mail Merge Recipients dialog box, clear the check box next to the name of
any person who you don't want to receive your mailing.

NOTE: You also can sort or filter the list to make it easier to find names and
addresses. For more information about sorting and filtering items, see Sort and filter
the data for a mail merge.

19
Step 3: Insert a merge field

You can insert one or more mail merge fields that pull the information from your
spreadsheet into your document.

To insert an address block for an envelope, a label, an email message, or a


letter

1. On the Mailings tab, in the Write & Insert Fields group, choose Address Block.

2. In the Insert Address Block dialog box, choose a format for the recipient's name as
it will appear on the envelope.

3. Choose OK.
4. Choose File > Save.

To insert a greeting line in an email message or a letter

1. On the Mailings tab, in the Write & Insert Fields group, choose Greeting Line.

20
2. In the Insert Greeting Line dialog box, do the following:
o Under Greeting line format, change the salutation if necessary by choosing the
greeting (Dear is the default), the format for the recipient name, and the ending
punctuation (a comma is the default).

and

o Under Greeting line for invalid recipient names, choose an option in the salutation
list.
3. Choose OK.
4. Choose File > Save.

To insert data from your spreadsheet in an email message or a letter

1. On the Mailings tab, in the Write & Insert Fields group, choose Insert Merge Field.
2. In the Insert Merge Field dialog box, under Fields, choose a field name (column
name in your spreadsheet), and then choose Insert.
3. Repeat step 2 as needed, and choose Close when done.
4. Choose File > Save.

For more information about adding fields from your spreadsheet to the merge
document, see Insert mail merge fields. And if you're interested in learning more
about options for setting up email message, see Email merge in Word.

Step 4: Preview and finish the mail merge

After you insert the merge fields you want, preview the results to confirm that the
content is okay. and then you're ready to complete the merge process.

1. On the Mailings tab, choose Preview Results.

2. Choose the Next or Previous record button to move through records in your
data source and view how the records will appear in the document.
3. In the Finish group, choose Finish & Merge, and choose Print Documents or Send
E-mail Messages.

21
Step 5: Save your mail merge

When you save the mail merge document, it stays connected to your data source.
You can reuse the mail merge document for your next bulk mailing.

You can also watch this video about mail merge.


GCFLearnFree.org (2016). Word Mail Merge. https://youtu.be/do9ujnZLIC4 from
youtube.com

Integrating Images and External Materials


You are making a report on the positive effects of using solar energy to the environment. To
make you report more appealing, you thought of putting a picture of a solar panel into your report.
You also considered presenting graphical data on the trends of worldwide initiatives on the use of
solar energy.
1. Describe briefly how you can insert pictures or images in a Word document.
2. What other kinds of images or materials can be inserted in a Word document.
Pictures-Electronic or digital pictures or photographs you have saved in any local storage device.
Types of Pictures:
a. JPG-file extension for the Joint Photographic Experts Group Picture file
b. PNG- file extension for the Portable Network Graphics image file
c. GIF- file extension for the Graphics Interchange Formal Image File

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.
Shapes- These are printable objects or materials that you can integrate in your document to
enhance its appearance or to allow you to have some tools to use for composing and representing
ideas or messages.
Smart Art -Generally, these are predefined sets of different shapes grouped together to form ideas
that are organizational or structural in nature.
Chart- Another type of material that you can integrate in your Word document that allows you to
represent data characteristics and trends.
Screenshot-Sometimes, creating reports or manuals for training or procedure will require the
integration of a more realistic image of what you are discussing on your report or manual.
Insert a picture
1. Select Insert > Pictures.
2. Locate the picture you want, and then select Insert.
Insert a table
1. Select Insert > Table.

22
2. Under Insert Table, drag to select the number of rows and columns that you
want.
Wrap text in Word
After you have inserted a picture or drawing object into a Word document
(see Insert pictures in Office for information), you can use a variety of tools to
position the item relative to the page and text. This article explains all the ways you
can access the text wrapping options and some common examples.

23
Finding the text wrapping options

Wrap Text menu

1. Click a picture or object to select it.


2. Click the Picture Tools or Drawing Tools Format tab, and in
the Arrange group, click Wrap Text.
3. Choose the style of wrapping you'd like to use.
Position menu

24
These options position a picture or object in a fixed place relative to the page and
automatically wrap text around it.
1. Click a picture or object to select it.
2. Click the Picture Tools or Drawing Tools Format tab, and in
the Arrange group, click Position.
3. Choose the position and wrapping style you'd like to use.

Layout box

1. Click a picture or object to select it.


2. Click the Picture Tools or Drawing Tools Format tab and in
the Arrange group, click Wrap Text, and then click More Layout Options.

25
3. In the Layout box, on the Text Wrapping tab, choose the wrapping style
you'd like to use.

Layout Options icon (Word 2016 and Word 2013 only)

1. Click a picture or object to select it.


2. Click the Layout Options icon.
3. Choose the layout options you want.
Examples of common text wrapping scenarios for pictures

26
Position a picture in the upper-left corner of a document

You can add a picture in the top left corner of a document and have the text flow
around it.

1. Click a picture to select it.


2. On the Format tab, click Position, and under Format with Text Wrapping,
click Top Left.

TIP: You can drag the image around the document and align it any way you like.
Make custom changes to word wrapping by clicking Format > Wrap Text > More
Layout Options.

Position a picture in the center of a document

You can add a picture in the center of a document and have the text flow around it.

27
1. Click a picture to select it.
2. On the Format tab, click Wrap Text > Square.

3. Click Position > More Layout Options.


4. On the Position tab, under Horizontal, select Alignment, and change the
drop-down field to Centered.
5. Next to relative to, select Page, and click OK.
NOTE: You can drag the image around the document and align it any way you like.
Make custom changes to word wrapping by clicking Format > Wrap Text > More
Layout Options.

Use wrap points to adjust text flow around a shape


You can add an image in your document and make the text flow around it in a way
that follows the shape of the image.
TIP: Choose a picture with a transparent, white, or solid colored background for best
results.

28
1. Select a picture and drag it to the middle of the page, or wherever you want it.
2. On the Format tab, click Wrap Text > Tight.

3. On the Format tab, click Remove Background.

NOTE: You cannot remove the background from vector images.


4. Click anywhere outside the image to see how the text has wrapped around
the image.
5. Next to relative to, change the drop-down to Page, and click OK.
Fine-tune text wrapping
If there's too much space between the text and your image, you can set the wrap
points manually.
1. Click the picture, and on the Format tab, click Wrap Text > Edit Wrap
Points.

29
2. Drag the black wrap points closer or farther away from your picture until
you're happy with its appearance.
TIP: Drag the red line to create additional wrap points.

Position a picture in line with text

Pictures inserted in line are tied to the place within the text where they were inserted
and are treated like any text character—"in line with text." They automatically move
with the surrounding text.
1. Click a picture to select it.
2. On the Format tab, click Wrap Text > In Line with Text.

Ensure that a picture stays put

You can make sure that your picture stays in place as text is added or deleted.
In Word 2016 and Word 2013:
1. Click a picture to select it.
2. On the Format tab, click Wrap Text > Fix Position on Page.
NOTE: In Word 2010, you can lock a picture in place on a page by locking its anchor:
Click the picture, click Position on the Format tab, click More Layout Options, and
then select Lock anchor at the bottom. Note that anchors are not used with inline
pictures.

Engagement
Activity 1. Mail Merge and Label Generation
Now that you have learned the components needed to accomplish a successful mail
merge, let us put theory into practice. Follow the following instructions:

1. Create a List or Data File. Using Microsoft Excel, build a list of at least 10 names of people with
their corresponding title, company name, and address. You may use the following fields: title, name,
company, address line 1, address line 2, and address line 3.

30
Example:
Title Name Company Address Line Address Line Address Line 3
1 2
Mr. Arnold Reyes ABC Inc. 23 Sierra St. Alabang Muntinlupa
City
Ms. Maria Santos XYZ Corp. 45 De Oro San Juan Metro Manila
Drive

2. Type your Form Document in Microsoft Word. Type the letter below. You will be typing
in only the common part of the letter. The text that does not change for each copy you print. Do not
forget to save your Form Document.

August 5, 2020

Dear

We would like to announce and invite you to avail of our 3 rd quarter promo for which you are
qualified! Being one of our loyal customers, we would like to thank you for trusting and carrying our
product line in your store.
Included in this promo kit are the mechanics or our promo and the catalog from where you can see
and choose from our exciting new products.
Please do not hesitate to contact us should you have further inquiries regarding the details of the
promo or about any of the new products in our catalog. We look forward to doing more business
with you.
Again, thank you very much and more power.

Your partner in merchandising,


Red Dragon, Inc.

3. Merged Document. Follow the Steps in Mail Merge. Save the merged document using
this filename: Section_Lastname_firstname_Mailmerge. Submit the merged document in the
Submission bin.

Activity 2. Integrating Images and External Materials


In a Microsoft Word document, do the following:
1. Create a flow chart on how mail merge works using Microsoft Word by Inserting a series
of shapes on your document.
2. Find out what a Text Box is and how it is used.
3. Create a screenshot of the Microsoft Word Home screen and put a label on each part of
the screen.
4. Take some pictures of yourself (selfie) using a digital camera or a cellphone. Transfer the
pictures to your computer and create a collage of your pictures using Microsoft Word.
5. Refer to the Rubrics to see how you will be graded in this activity. Submit your document
in the Activity 2 Submission Bin using this filename: Section_Lastna_firstname_integratingimages

31
Rubrics for Mail Merge and Integrating Images
Category Exemplary (4) Accomplished Developing Beginning (1) Score
(3) (2)
Skills All skills in Most skills in Some skills in Few or No
Advanced Advanced Advanced skills from
Word Word Word Word
processing are Processing are processing Processing
applied applied. are applied are applied
Content The output The output is The output is The output is
exceeds the complete sometime incomplete
expectation complete
Correctness The output is The output The output The output
free from contains has several contains
errors minimal errors errors many errors
Efficiency The task was The task was The task was The task was
finished in the finished in the completed finished using
most effective projected but used the least
way without amount of methods that efficient
wasting time time consumed method.
and effort. more time
and resource

Assimilation
Activity 3. Forum/ Creating Letter Head.
Using different external materials and integrating images in insert tab create a letter head
based on your specific professional tracks that contains (company name, logo, address, contact
name, phone numbers, fax numbers, email address)
Submit your letterhead in Activity 3 Submission Bin. Look at some of your classmates’
submitted Letter head and comment on their output.

Quiz
Multiple Choice: Choose the letter of that corresponds to the correct answer.
1. What feature of Microsoft Word 3. What are the steps in creating a
allows you to efficiently create documents simple mail merge?
that have the same general content but may a. Create form document; preview;
have different recipient or purpose? insert place holders; print
a. mail merge b. Preview; insert place holders;
b. print merge create form document; print
c. send merge c. Create main document; create data
d. view merge source; insert place holders; preview
d. Create data source; insert place
2. Which of the following is not a holders; preview; print
component of the mail merge?
a. merged document 4. Where can you find the Start Mail
b. file name Merge button?
c. form document a. file tab
d. data file b. mailing tab
c. reference tab
d. home tab

32
5. What tells Microsoft Word exactly 8. Under what ribbon group does
where to place the information coming from “Insert – Smart Art” fall?
the data file to the main document? a. apps
a. data source b. illustrations
b. insertion line c. media
c. place holder d. pages
d. insertion tag.
9. When inserting charts on your
6. What image compression/ file type document, what Microsoft office application
is capable of displaying a simple animation? pops up to allow you to enter and manage the
a. .bmp parameters of your chart?
b. .gif a. Access
c. .jpg b. Excel
d. .png c. Note
d. Word
7. Among the text wrap options,
which one allows you to place an image or 10. What external material allows you
external material in line with the text, treating to insert organizational or structural
the image just like how a text is treated? templates like organizational charts and flow
a. in line with text charts on your document?
b. square a. chart
c. through b. pictures
d. tight c. screenshot
d. smart art

References
(2016). Empowerment Technologies, Innovative Training Works, Inc. First Edition. Rex Bookstore
Empowerment Technologies Student Reader for Senior High School, Page 22-25
Websites:
Use mail merge for bulk email, letters, labels, and envelopes. Retrieved from
https://support.office.com/en-us/article/Use-mail-merge-to-create-and-send-bulk-mail-labels-and-
envelopes-f488ed5b-b849-4c11-9cff-932c49474705
https://support.office.com/en-US/article/Wrap-Text-in-Word-BDBBE1FE-C089-4B5C-B85C-
43997DA64A12

33
Lesson 4: Advanced Spreadsheet Skills

Introduction

In this lesson you will learn to use several conditional functions in Microsoft Excel, familiarize
the most commonly used functions in MS Excel, and MS Excel as a viable tool in market research and
product development. Let us start!

Try to come up with a product or service that you can sell or offer around the campus. It can
be sweets like polvoron or yema, small souvenirs like keychains or bag tags, or services like foot spa
or harana (serenade) for hire.

Add a personal twist to your product. If it is a food product, add something that you think
could be marketable. You may add malunggay to polvoron. The keychain may contain a caricature of
the buyer. You can also create artworks and sell them as a product or service. On a sheet of paper,
fill out the information of your product. A sample is shown below.

Product Information

Product or Service Name: _____________________________________________________________

Name: ____________________________________________________________________________

Product Description:
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

Ingredients/Materials:

__________________________________________________________________________________
__________________________________________________________________________________

Estimated Sale Price: __________________________ per ___________________________________

Development

Whatever you work in the field or not, the truth is whatever you do should be accounted for.
This is because the resources you use cost you expenses. Whether you become a scientist, an
engineer, a yoga instructor, a bartender, or an airline pilot, it is important to understand how a

34
company spends to be able to deliver a product or service. These factors could easily be computed
using spreadsheet programs like Microsoft Excel or Google Sheets.

Estimating the Product Cost using MS Excel

Let us assume that we are going to sell milk tea with the following information:

Product Information

Product Name/Brand: Starbuko Organic Milk Tea

Company/Group Name: Starbuko Foods Corporation

Product Description: Starbuko Milk Tea is a special milk tea using organic ingredients especially
made for Filipinos.

Ingredients/Materials: Tea, water, condensed milk, ice, special sweetener

Estimated Sale Price: 25 PHP per cup

We will use Microsoft Excel to find out if our estimated sale price is reasonable considering
the actual price of the ingredients

1. Copy the information below:

35
2. Use the SUM formula to get the summation of the values from C5 to C8. The SUM formula is
=SUM(C5:C8). Type on cell C9.

3. Check if the estimated price will earn profit. Type the additional information shown below then
apply the arithmetic formula for subtraction

4. The result is PHP 2.20. Our estimated price is not profitable. Let us make an adjustment. Include
the information below and deduct the Total from the New Sale Price

36
5. The result is 7.80. This is definitely profitable at this price. However, this does not guarantee our
product’s success.

6. Save your file as Cost of Ingredients.xlsx

Analyzing Data using MS Excel

It is now time for you to collect data from your target market. For your group’s product,
come up with several questions that will help you determine how your sample from your target
market would perceive your product. Your target market for this activity is the people in your school
(teachers, students, personnel).

Sample Survey (for food products)

Name:____________________________________________ Age:____________________________
Income/day: ______________________________________ (optional)

Instructions: Circle the letter of your answer.


1. On a scale of 1-5, how would you rate the product’s quality?
a.1 b. 2 c. 3 d. 4 e. 5
2. On a scale of 1-5, how would you rate the product’s taste?
a.1 b. 2 c. 3 d. 4 e. 5
3. On a scale of 1-5, how would you rate the product’s presentation?
a.1 b. 2 c. 3 d. 4 e. 5
4. Are you satisfied with the product?
a. Yes b. No
5. Would you recommend the product to a friend?
a. Yes b. No
6. How much are you willing to pay for this product?
a. PHP 15 and below
b. PHP 16-25
c. PHP 26-35
d. PHP 46-55
Suggestions or comments:
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

Before you do the actual product testing, you have to produce a sample product. Produce
sample for 15-20 people.

37
Start your product testing by letting people taste/test your product. Afterwards, gather the
data and place them in Microsoft Excel. A sample of this spreadsheet is given.

Figure 1. Raw Survey Results of Starbuko Milk Tea Survey

To change the orientation of a text, press CTRL+1. To open the Format Cells dialog box> Alignment
Tab> under Orientation, specify the degrees you want.

Simple Average Formula

The syntax:

=AVERAGE (cells involved)

Example:

=AVERAGE(F5:19)

COUNTIF Function

=COUNTIF function will allow to count the number of cells that contains something.

COUNTIF Function Syntax:

=COUNTIF(range,criteria)

38
Range – the cells where the counting will take place.

Criteria – the label or value that determines if it is to be counted.

Example:

=COUNTIF(J5:J19,”Yes”)

AVERAGEIF Function

AVERAGEIF Syntax:

=AVERAGEIF(range, criteria, average range)

Range – the range of cells where you want to look for the criteria

Criteria – a value or label that determines if a cell is part of the range to be averaged.

Average Range (optional) – the actual range cells that will be averaged, if omitted, the range
will be used instead.

With this we can say that the teachers rated the “Quality” product higher than the students.

Engagement

Activity 1. Analyzing Data

Using the same data, excel file that you created and formulas you have learned, accomplish
the following by analyzing your data. Use the data that you have gathered.

1. Determine the number of people who were willing to pay a certain amount.

2. How many of the certain group (e.g., teacher/student) are willing to pay more?

3. How many of the certain group (e.g., teacher/student) like the presentation of the
product/service?

Save As your excel file using this filename: Section_Lastname_Firstname_Analysingdata and


submit your output in Activity 1 Submission Bin.

39
Assimilation

Activity 2. Forum

Join this forum and post your insights about the following questions.

1. Determine other instances where you can use the COUNTIF, SUMIF and AVERAGEIF
functions.

2. How does Excel help analyze statistical data.

Read and comment on your classmate’s post.

Quiz
Multiple Choice: Choose the letter of the correct answer.

1. A program designed to create spreadsheets which can later be used to analyze statistical
data.
a. Microsoft excel
b. Microsoft Word
c. Microsoft Publisher
d. Microsoft OneNote

2. A function that adds a range of cells


a. ADD
b. PLUS
c. SUM
d. TOTAL

3. A function that gets the average of a range of cells


a. AVERAGE
b. SUM
c. MEAN
d. MEDIAN

4. A function used to count the number of cells that contains something in them if the criteria
are met
a. COUNT
b. COUNTNOW
c. COUNTING
d. COUNTIF

40
5.The shortcut key for the Format Cells dialog box
a. Ctrl + F
b. Shift + F
c. Cltrl + 1
d. Alt + 1

References:
Empowerment Technologies Student Reader for Senior High School Page 22-25

Paul McFedries (2013)- Excel 2013 Formulas and Functions pp. 56-59

Empowerment Technologies, Rex Bookstore pages 67-95

41
Lesson 5: Advanced Presentation Skills

Introduction
Designing presentation is the fun part of creating a report for it gives you a chance to
be creative. Placing animations, transitions, and art could be on your mind right now. But
whether or not these feature would help is generally up to you. Sometimes, these things
could actually distract your audience rather than help you.

Activity 1. Presentation Tools advantages and disadvantages


Below is a list of presentation tools. Research about them and write their advantages and
disadvantages.
Presentation Tool Advantages Disadvantages
1. Microsoft PowerPoint
2. Prezi
3. Apple Keynote
4. Google Slides
5. Haiku Deck

Put your answer in in a presentation tool like Microsoft PowerPoint and submit your
output in Activity 1 submission bin using this filename format:
Section_Lastname_Firstname_Presentation_tools

Development

Creating an Effective Presentation


 Minimize
- Keep slide counts to minimum to maintain a clear message and to keep the
audience attentive.
- Remember that the presentation is just a visual aid.
- Most information should still come from the reporter.
 Clarity
- Use a font style that is easy to read.
- Make sure that it is also big enough to be read by the audience.
- Consider how big the screen is during your report.
Tip: A font size of 72 is about an inch (depends on the screen size). A one-inch
letter is readable 10 feet away, a two-inch letter is readable 20 feet away.
 Simplicity
- Use bullets or short sentences.
- Summarize the information on the screen to have your audience focus on what the
speaker is saying than on reading the slide.
- Limit the context to six lines and seven words per line. This is known as the 6x7
rule.
 Visuals
- Use graphics to help your presentation but too many to distract the audience.
- Instead of using a table of data, use charts and graphs.
 Consistency
- Make your design uniform.
- Avoid having different font style and background.
 Contrast
- Use light font on dark background or vice versa.
- It is easier to read on screen if the background is dark. This is due to the brightness
on the screen.

42
Animation

Animate text or objects

You can animate the text, pictures, shapes, tables, SmartArt graphics, and other
objects in your PowerPoint presentation to give them visual effects, including
entrances, exits, changes in size or color, and even movement. Build a slide
presentation that animates bullet points or even production credits.

Animation is a great way to emphasize a point, control information flow, and increase
viewer interest. You can apply animation effects on individual slides, the slide master,
or custom slide layouts.

(In PowerPoint, animations are not the same as transitions. A transition animates the
way one slide changes to the next. To add a transition, see Add, change, or remove
transitions between slides.)

Add animation to an object

1. Select the object that you want to animate.

An "object" in this context is any thing on a slide, such as a picture, a chart, or a text
box. Sizing handles appear around an object when you select it on the slide. (For
animation purposes, a paragraph within a text box is also an object, but it won't have
sizing handles when you select it; instead the entire text box has sizing handles.)

2. On the Animations tab of the ribbon, in the Animation group, click


the More button, and then select the animation effect that you want.

o If you do not see the entrance, exit, emphasis, or motion path animation affect that
you want, click More Entrance Effects, More Emphasis Effects, More Exit
Effects, or More Motion Paths.
o Some entrance and exit effects (such as Flip, Drop, and Whip) and some emphasis
effects (such as Brush Color and Wave) are available only for objects that contain
text. If you want to apply an animation effect that isn't available for this reason, try
adding a space inside your object.
o After you have applied an animation to an object or text, the animated items are
labeled on the slide with a non-printing numbered tag, displayed near the text or
object. The tag appears only in Normal view when the Animations tab is selected or
the Animation task pane is visible.

43
Change the speed of the animation effect

The speed of the effect is determined by the Duration setting.

1. On the slide, select the animation effect that you want to change.
2. On the Animations tab, under Timing options, in the Duration box, enter the
number seconds that you want the animation effect to last.

(Maximum: 59 seconds. Minimum: .01 seconds. You can type a duration or use the
up or down arrows to select a standard incremental value.)

Change how the animation effect starts

1. On the slide, select the animation effect that you want to change.
2. On the Animations tab, under Timing options, open the Start list, and choose one
of the three options described below:
To start the animation effect Select
When you click the slide On Click
At the same time as the previous animation effect in the list. (One click starts With
two or more animation effects at the same time.) Previous
Immediately after the previous animation effect in the list finishes playing. (No After
additional click is required to make this animation effect start.) Previous

3.

Set the time between animation effects

The Delay option determines how much time elapses before a specific animation
effect begins—either after you click or after a prior animation effect concludes.

Change the order of the animation effects on a slide

To reorder a set of animations on a slide:

1. Open the Animation pane: On the Animations tab, in the Advanced


Animation group, select Animation Pane.
2. In the Animation pane, select the animation effect that you want to reorder.
3. On the Animations tab of the ribbon, in the Timing group, under Reorder
Animation select one of these options:

44
o Select Move Earlier to move the effect up one place in the animation order.
o Select Move Later to move the effect down one place in the animation order.

You can select an option multiple times, if necessary, to move your selected effect to
the appropriate place in the animation order.

Remove an animation effect

When you animate an object (such as a bullet point or a picture), a small numeral
appears just to the left of that object. This numeral indicates the presence of an
animation effect and its place in the sequence of animations on the current slide.
To remove an animation

1. Select the numeral of the animation that you want to remove.


2. Press the Delete key on your keyboard.

Apply multiple animation effects to a single object

1. Select the text or object that you want to add multiple animations.
2. On the Animations tab, in the Advanced Animation group, click Add Animation.

View a list of animations currently on the slide

You can view the list of all the animations on the slide in the Animation Pane.
The Animation Pane shows important information about an animation effect, such
as the type of effect, the order of multiple effects in relation to one another, the name
of the object affected, and the duration of the effect.

To open the Animation task pane, on the Animations tab, in the Advanced
Animation group, click Animation Pane.

45
1. In the task pane, numbers indicate the order in which the animation effects play.
The numbers in the task pane correspond to the non-printing numbered tags that are
displayed on the slide.

2. Timelines represent the duration of the effects.

3. Icons represent the type of animation effect. In this example, it is an Exit effect.

4. Select an item in the list to see the menu icon (down arrow), and then click the
icon to reveal the menu.

NOTES:

 Effects appear in the Animation task pane in the order that you add them.
 You can also view the icons that indicate the start timing of the animation effects in
relation to the other events on the slide. To view the start timing icons for all
animations, click the menu icon next to an animation effect and select Hide
Advanced Timeline.
 There are several types of icons that indicate the start timing of animation effects.
Choices include the following:
o Start On Click (mouse icon, shown here): The animation begins when you click the
mouse.
o Start With Previous (no icon): The animation effect starts playing at the same time
as the previous effect in the list. This setting combines multiple effects at the same
time.
o Start After Previous (clock icon): The animation effect begins immediately after the
previous effect in the list finishes playing.

46
Set the effect options, timing, or order for an animation

 To set the effect options for an animation, on the Animations tab, in


the Animation group, click the arrow to the right of Effect Options and click the
option that you want.
 You can specify the start, duration, or delay timing for an animation on
the Animations tab.
o To set the start timing for an animation, in the Timing group, click the arrow to the
right of the Start menu and select the timing that you want.
o To set the duration of how long the animation will run, in the Timing group, enter the
number of seconds that you want in the Duration box.
o To set a delay before the animation begins, in the Timing group, enter the number of
seconds that you want in the Delay box.
 To reorder an animation in the list, in theAnimation task pane, select the animation
that you want to reorder, and on the Animations tab, in the Timing group,
under Reorder Animation, either select Move Earlier to make the animation occur
before another animation in the list or select Move Later to make the animation
occur after another animation in the list.

Test your animation effect

After you add one or more animation effects, to validate that they work, do the
following:

 On the Animations tab, in the Preview group, click Preview.

More about animating text and objects

There are four different types of animation effects:

 Entrance effects make an object fade gradually into focus, fly onto the slide from an
edge, or bounce into view.
 Exit effects include making an object fly off of the slide, disappear from view, or spiral
off of the slide.
 Emphasis effects include making an object shrink or grow in size, change color, or
spin on its center.
 You can use Motion Paths to make an object move up or down, left or right, or in a
star or circular pattern (among other effects). You also can draw your own motion
path.

You can use any animation by itself, or combine multiple effects. For instance, to
make a line of text fly in while it grows, apply a Fly In entrance effect and
a Grow/Shrink emphasis effect to it. Click Add Animation to add effects, and use
the Animation Pane to set the emphasis effect to occur With Previous.

47
The gallery of animation effects on the Animations tab shows only the most popular
effects. Get even more possibilities by clicking Add Animation, scrolling down, and
clicking More Entrance Effects, More Emphasis Effects, More Exit Effects,
or More Motion Paths.

Hyperlinking in presentations

Add a hyperlink to text


When you want your slides to include information, music, and videos stored on a web
site, or a chart or document stored on OneDrive (or a similar cloud hosting service),
add a hyperlink to it from your PowerPoint Online presentation.
1. Highlight the text that you want to act as the hyperlink.

2. On the Insert tab, click Hyperlink.

3. In the Hyperlink box, enter the web address in the Address box.
4. Under Display text, verify the text to use for the hyperlink on the slide, and
then click OK.

1. To test the hyperlink, click Slide Show View, at the bottom right corner of the
orange task bar, and then click to follow the link.

48
NOTES:
 You can also create hyperlinks to email addresses. Instead of entering the
web address in the Address box (step 3 above),
type: mailto://<EmailAddress>
 Unlike the PowerPoint desktop application, you can’t link to slides in the same
presentation or to a different presentation from slides in PowerPoint Online.
Additionally; you can’t currently add a link to a picture or shape.

Add a hyperlink to a slide


Applies To: PowerPoint 2016 PowerPoint 2013

You can add hyperlinks to your presentation in order to do a wide variety of things.
You can use links to quickly get to a different place in your presentation, open a
different presentation, go to the web, open a new file, or begin a message to an email
address.

Link to a slide in 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, in the Links group, click Hyperlink.

3. In the Insert Hyperlink dialog box, under Link to, click Place in This Document.

49
4. Do one of the following:
o To link to a slide in the current presentation, under Select a place in this document,
click the slide that represents the hyperlink destination.
o To link to a custom show (a select group of slides) in the current presentation,
under Select a place in this document, under Custom Shows, click the custom
show that represents the hyperlink destination. Then, select the Show and
return check box.

Link to a slide in a different presentation

NOTE: If you add a link from your presentation to a different presentation, and then
copy your presentation to another PC, be sure to also copy the other presentation to
the same folder. If you don't copy the presentation you linked to — or if you rename,
move, or delete it — the link won't work.

1. In Normal view, select the text, shape, or picture that you want to use as a hyperlink.
2. On the Insert tab, in the Links group, click Hyperlink.
3. Under Link to, click Existing File or Web Page.
4. Locate and select the presentation file that contains the slide that you want to link to.
5. Click Bookmark, and then click the title of the slide that you want to link to.

Link to an e-mail address

1. In Normal view, select the text, shape, or picture that you want to use as a hyperlink.
2. On the Insert tab, in the Links group, click Hyperlink.
3. Under Link to, click E-mail Address.
4. In the E-mail address box, type the e-mail address that you want to link to, or in
the Recently used e-mail addresses box, click an e-mail address.
5. In the Subject box, type the subject of the e-mail message.

50
Link to a website or a file from the web

1. In Normal view, select the text, shape, or picture that you want to use as a hyperlink.
2. On the Insert tab, in the Links group, click Hyperlink.
3. Under Link to, click Existing File or Web Page, and then click Browse the
Web .

4. Locate and select the page, site, or file that you want to link to, and then click OK.

Link to a new file

1. In Normal view, select the text, shape, or picture that you want to use as a hyperlink.

51
2. On the Insert tab, in the Links group, click Hyperlink.
3. Under Link to, click Create New Document.
4. In the Name of new document box, type the name of the file that you want to create
and link to.

If you want to create a document in a different location, under Full path,


click Change, browse to the location where you want to create the file, and then
click OK.

5. Under When to edit, click whether you want to Edit the new document later or Edit
the new document now.

52
Activity 2. Biography
Create a biography about yourself. You can add pictures and animation in your
presentation.
Slide 1 – Create a Title slide. This should introduce the person you're making the biography
about.
Slide 2 - Create an introduction slide. This should be a general overview of the person's life.
Slide 3 - Create a timeline slide.
Slide 4 - Create slides that highlight specific accomplishments.
Slide 5 - Create a conclusion slide. This slide will sum up the person's impact on the world or
leave the audience with a quote from the person that symbolizes their overall persona.

Engagement

Activity 3. Adding Hyperlinks to Presentation


Improve your biography presentation using hyperlinks.
1. Insert action button on your presentation (action buttons are found on Insert-Shapes)
2. Create action buttons that will allow you to navigate to the next slide, previous slide, and
first slide.
Submit the improved presentation with hyperlinks to Activity 3 submission bin following this
filename format: Section_Lastname_Firstname_Hyperlink

Assimilation

Activity 4. Forum
Join this forum and share your insights by answering the following question:
1. What is the significance of using hyperlinks that navigate around your presentation
instead of just using keyboard shortcuts?
2. Cite at least 3 instances where objects can help you improve your presentation.
Read on your classmates answers and comment on their answers.

Quiz
True or False: Choose True if the sentence is correct; otherwise, choose False.
T 1. PowerPoint presentation is a form of visual aid.
F 2. Most of the contents of your report must be presented through your PowerPoint
Presentation and not from the speaker himself/herself.
F 3. To insert a hyperlink, go to the Home tab then click the Hyperlink option
F 4. Action buttons are found in the Insert-Smart Art.
F. 5. Use dark fonts on dark backgrounds to gain proper contrast.

References

Empowerment Technologies Student Reader for Senior High School Page 22-25

https://support.office.com/en-US/article/Add-a-hyperlink-to-text-7C0C6A9E-118A-43CE-
8D75-73E6DB768854

(2016). Empowerment Technologies, Innovative Training Works, Inc. First Edition. Rex Bookstore

53
Lesson 6: Imaging and Design for Online Environment

Introduction
What is the most visited website in the world? Think about it for a second. No, it is
not Facebook nor Twitter. Here is a clue, the site’s mission statement is “to organize the
world’s information and make it universally accessible and useful.” You have probably
guessed it by now, yes – it is Google.
On December 2014, Alexa.com, renowned website for ranking webpage popularity,
ranks this website number one in the entire world. Why do you think google ranks number
one despite the countless search engines and websites in the internet?

Development

Discussion
Basic Principles of Graphics and Layout
The Non-Designer’s Design Book by Robin Williams
http://www.makeuseof.com/tag/learn-principles-design-preinstalled-templates/

In a digital age, desktop publishing has made it possible for nearly anyone to
produce well-designed online and paper documents, such as newsletters, business
cards, websites, posters, letterheads, PowerPoint and Keynote presentations, etc.
While professional graphic designers are the best resource for producing high quality
designs, nearly all of us could benefit from having knowledge of basic design
principles.

1. Font Styles

When you examine professional design templates one of the first things you
might notice is that there are usually no more than three different fonts used in a
document or design piece. Many newsletters, for example, make use of the classic
and readable Helvetica or Helvetica Neue font. A designer will use the same one or
two fonts, but will will change the size and style of the font for different parts the
document. Regular Helvetica Neue font style may be used for the body text, while a
slightly larger size of the same font, in bold style, will be used for sub-titles and pull-
out quotes. Highlight the texts in templates and make note of the names of fonts that
are used. Typically they include Helvetica, Courier, or Baskerville, with a variation in
size and style of the font (e.g. bold, all caps, italics.)

54
2. Proximity

The next element you will want to notice in design templates is how items and
information are grouped together. As Williams points out, “When several items are in
close proximity to each other, they become one visual unit rather than several separate
units.” For example, in this business card, information is separated into groups, instead
of scattered all over the card. This makes the information easier to read.

3. Repetition
Well-designed documents also use a repetition of elements, as we can see in
this newsletter where three images are cropped and aligned together for effective
repetition. Again, as Williams points out, “You can repeat colors, shapes, textures,
spatial relationships, line thickness, fonts, sizes, graphic concepts, etc.” The effective

55
use of repetition is pleasing to eye and it can communicate important content in a
design.

4. Contrast
Notice also how the designers use contrast to make layouts graphically
appealing. The large PortagoITC TT font used for the nameplate of the newsletter
below is in near stark contrast with the Helvetica Neue used for the body font. We also
see how the designer used a strong red graphic fill to make the nameplate stand out.
The idea behind contrast as Williams explains, “is to avoid elements on the page that
are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.)
are not the same, then make them very different.”

56
5. Alignment
Probably the easiest basic principle of design to recognize in templates is
alignment. Body text of course is usually always aligned to the left. But notice how
other elements (images, boxes, titles, and information) are aligned with one another.
“Nothing should be placed on the page arbitrarily,”• writes Williams. In the postcard
below, the alignment of elements is very evident. The image of the house is aligned
with the green box. The street name and price of the house are both centered, and the
contact information is grouped together under the photo of the real estate agent. The
arrangement of these elements helps the reader move his/her eyes from one element
to the next.

57
There’s nothing wrong with using templates to produce documents, but when
you understand the basic elements of design, you can customize templates and make
them unique for your individual purposes.

Basic Principles of Graphics and Layout (Imaging & Design for Online Environment)

Lulu Ilas
http://luluilas4j.blogspot.com/2016/07/imaging-and-design-for-online.html
Creating a web page is like creating a work of art. There are certain things that
you need to consider in order to get your message across.

1. Balance. The visual weight of objects, texture, colors, and space is evenly
distributed on the screen.

2. Emphasis. An area in the design that may appear different in size, texture, shape
or color to attract the viewer's attention.

58
3. Movement. Visual elements guide the viewer's eyes around the screen.

4. Pattern, Repetition, and Rhythm. These are the repeating visual element on an
image or layout to create unity in the layout or image. Rhythm is achieved when
visual elements create a sense of organized movement.

5. Proportion. Visual elements create a sense of unity where they relate well with
one another.

59
6. Variety. This uses several design elements to draw viewer's attention.

Basic Elements of Layout and Design


https://www.slideshare.net/joypamor/basic-principles-of-graphics-and-layout

Line
 A mark on a surface that describes a shape of outline
 Can create texture and can be thick or thin
 Types of line include actual, implied, vertical, horizontal, diagonal and contour
lines.

Color
 Powerful and influential element. Using the right combination of colors can
catch the attention of a passerby or even glancing viewers. It can stand alone,
as a background, or be applied to other elements, like lines, shapes, textures
or typography.
 Refers to specific hues
 Has 3 properties: chroma, intensity, value

60
Texture
 Surface quality, either tactile of visual
 Degree of roughness or smoothness in objects
 Can be real or implied by different uses of media

Shape
 Defined by the enclosure created by a combination of multiple lines.
Shapes, geometric or organic, add interest. Shapes are defined by
boundaries, such as lines or color, and they are often used to emphasize a
portion of the page.
 2-dimensional, no thickness

Form
 3-dimensional; has volume and thickness
 Illusion of 3D effect can be implied using light and shading techniques
 Can be viewed from many angles

61
Value
 Degree of light and dark in a design
 Can be used with color as well as black and white
 Contrast is the extreme changes between values

Size
 Variations in the proportions of objects, lines, or shapes
 Variations can either be real or imagined

62
Activity 1. Applying Basic Principles of Graphics and Layout
Utilize the Basic Principles of Graphics and Layout by creating basic digital
artwork, preferably a poster using any of the following suggested
softwares/applications: Adobe photoshop, MS Publisher, GIMP, PhotoScape, and the
like.
Submit your digital artwork in Activity 1 submission bin using this filename
format: Section_lastname_firstname_digitalartwork

Rubrics for Digital Artwork.


CRITERIA 7 5 3 1
Text and All text and Most text Few of the Text and
graphics graphics are and text and graphics are
clear and graphics are graphics are not clear or
relevant clear and clear and relevant
relevant relevant
Required All the Most of the Few of the Missing most
elements required required required or all of the
elements are elements elements are required
clearly are clearly clearly elements.
visible, visible, visible,
organized, organized, organized,
and well- and well and well
placed. placed. placed.
There might
be missing
elements.
Visual Clarity The poster The poster The poster The poster
and Appeal has an has a nice needs needs
excellent design and improvement significant
design and layout. It is in design, improvement
layout. It is neat and layout or in design,
neat and readable. neatness. layout, and
content can neatness.
be easily
understood.

63
Principles of Visual Message Design Using Infographics

Present “Infographics: The Good and The Bad”


https://www.slideshare.net/DiditMarketing/infographics1-47291158/17-
13 qualities that will lead to designing better infographics:
https://venngage.com/blog/infographic-design/

People have been going nuts about infographics since the infographic design
boom of 2012. No, really, that was a thing--between 2010 and 2012, searches for
infographics increased by a whopping 80%. Since then, infographics and
infographic design have become a standard form visual used in content across niches.
That's because infographics can communicate information in a condensed and
highly visual way--when designed well. The problem is that for every well made
infographic published, there are a handful of poorly produced infographic designs
circling the web. Poorly designed infographics can skew and obscure information,
rather than make it easier to understand.
Creating a beautiful and effective infographic design isn't hard, it just takes a
basic understanding of infographic design best practices, and some practice.

 Planning your infographic design


 Titles
 Grid/wireframes
 Layouts
 Visualizing Data
 Infographic Design Elements
 Photography
 Contrast
 Balance
 Color
 Consistency
 Negative Space
 Practice

64
1. Planning Your Infographic Design
a) Find a story
In every set of data there's a story. Before you begin designing
your infographic, think of the story you are trying to tell. The angle
you choose will help you determine which information to
include. Because infographics allow for limited space for content, the
purpose of your infographic should be focused. That's why the layout
of your infographic should not only reflect the theme of your
information, but also enhance the communication of it.
For example, if the data you are collecting is about how coffee
changed America, you could use a timeline infographic template.

Or for a informational infographic about the earth, you could use


a sectional infographic template to both list and demonstrate the
different layers of the earth.

65
2. Title
Start off strong with a bold header for your infographic, using bolder
typefaces and colors. If you have a wordy title such as “Dynamically Generate
URLS in Excel or Google Sheets”, extract the main idea from the title to
“Generate URLS” and create a typographic composition highlighting the main
idea.

66
3. Grid/Wireframe
Grids and wireframes are the structural base to any design. Designing
on a grid allows you to easily organize elements and information. Grids also
play an essential role in keeping objects and elements aligned. For example,
when aligning icons in a list, you can reference the same vertical grid line
and then space the subtext of each list item a ccordingly.

For your infographic design, use a grid system to create margins. It's
good practice to keep enough space in between your elements and the edge
of your canvas to avoid visual tension. A design can potentially have any size
of margin you desire but it's imp ortant to keep the margin consistent all the
way along the edge of your canvas. A good rule of thumb is to keep all objects

67
and elements at least 20px (one square on the grid) away from the edge of
the canvas.

4. Layout
Select a layout for your infographic design that best suits your
information. There are hundreds of possible infographic templates out
there to choose from. For example, you could use a one column layout for a
minimal infographic, or create a list infographic by spitting the layout into two
columns.

5. Visualize Data
Pro tip: always start your infographic planning with pen and paper.
This way, you can work through concepts and designs roughly before
finalizing a digital copy.
a) Choose the right chart types
The type of data you are trying to convey will determine which chart
type you choose. To decide which type of chart would best convey your data,
you first have to determine what kind of data you want to present: a single
important number? A comparison between data points? A trend over time?
An outlier?
The types of charts most commonly used in infographics are pie chart,
bar graphs, column graphs, and line charts. For example, a column graph is
one of the easiest ways to compare data.

68
And to convey a trend over time, the most common type of chart to use is
a line chart.

But if you think of a more unusual chart that would convey the data
effectively, don't be afraid to get more creative. For example, you can identify
and show the trends such as sales over time, correlations such as sales
compared temperature or outliers such as sales in an unusual area.

69
A good rule of thumb is that your charts should be easy enough to read
that it only takes readers ten second or less to understand.

6. Infographic Design Elements

a) Typography
Typography is a very important element for infographic design and
your one way to explain your ideas and information when images, graphs or
icons can’t. That being said, try to limit the amount of text you include on your
infographic. The best infographics have visual impact, with the text acting as
a secondary explanation for the visual content.

70
First and foremost, make sure your type is legible. In most cases, avoid
decorative or script type as it tends to be hard to read. If you have to use
small text, use it sparingly, and it always helps to increase the line height of
bodies of small text if it starts to become hard to read.
To keep infographic designs cohesive, limit your use of fonts to a
maximum of three types, but also don’t stick with just one. A tasteful use of
two fonts can create a nice dynamic and hierarchy of information. For
example, a number or statistic in one font type next subtext in another creates
a hierarchy of information.

7. Photography
The use of photography can be tricky if there is not a photographer
available to take the shots of exactly what you need. There are w ays to work
around not having a photographer at hire by using royalty free images from
places like Pixabay or Unsplash. The only risk is that using stock images can
look uncreative and, frankly, cheesy. That's why you need to take care when
deciding which images to use.

Be sure that the photos you use have a consistent style and lighting.
Try to pick photos with the same lighting effects, same backdrops, same
amount of dark areas, etc. It is important to stick to a certain style as images
that clearly don’t fit the set will distract from the information being
communicated. If you're going for a simple modern use of photography, use
only images with flat colour (or white) backdrops. If you're going for a neutral
newspaper approach, use only black and white images.

71
72
73
8. Contrast In Your Infographic Design
Contrast creates visual impact by placing two strikingly different
elements beside each other. If an infographic has a light background with
bold colored shapes, our eyes are immediately attracted to the bold colors.
This allows you to organize information by having a certain element more
prominent than another.

a) Contrast Using Color


Try pairing complementary colors to make your headline pop. One of
my favourite combinations is a darker blue with a brighter color like orange
which makes your headline stand out.

b) Contrast Using Typography Sizes


A header is usually the largest text on an infographic, followed by the
subheader and then the body copy. The header should pretty much always
be the largest point size so that the viewer knows the subject of your
infographic right off the bat.

9. Balance (Symmetrical and Asymmetrical)


An infographic with visual balance is pleasing to the eyes because
everything fits together seamlessly. A balanced infographic keeps the entire
composition cohesive, especially in a long form infographic. If there are

74
heavy visuals on the top of an infographic, you should keep the flow going
right to the bottom. There are two types of balance: symmetrical and
asymmetrical.
Symmetrical balance is when each side of the composition has equal weight.
This layout is effective in a comparison infographic.

Asymmetrical balance is more natural and less uniform than a


symmetrical composition. It creates a more complex relationship between
objects. It can make an infographic more dynamic since the composition is
not repeated excessively. For example, if you are creating a timeline,
alternate text between both sides of the timeline for a balanced composition.

75
10. Color
Decide on a color scheme before creating your infographic. A good
rule of thumb is to design your infographic with two or three main colors, and
to use minor color accents.

When choosing your color scheme, decide on the tone of your


infographic. Is it a business infographic? If so, try using neutral colors like
blue or green, or, of course, your brand colors. For fun, eye popping
infographics, use brighter hues, but be careful not to use large amounts dark
or neon colors as they can be straining to the eyes when viewed on the web.

Color can also be used as a sectional tool. Add blocks of color to


section your infographic, giving the eye some breathing room as viewers
scroll down.

76
Source.
Here are a couple of helpful tools on the web to help you choose a color
palette:
Adobe Color CC
LOLColors
COLOURlovers

11. Consistency
In order for your infographic design to flow from start to finish, the
design elements need to be consistent. If you are using icons that are filled
in, rather than line art icons, then keep using the same style throughout the
entire infographic.

77
The same goes for the style of images you use, the font style, and
the color palette. This will prevent your infographic from looking cluttered,
and will actually make it easier to read.
In the example below, the same handwritten style font and realistic
style of images are used throug hout the infographic.

78
79
12. Negative Space
Negative space is the blank space surrounding objects in a design.

Negative space has a big impact on your design. If your infographic is


too crowded, it can overwhelm readers and make it difficult to read the
information. Creating space around the elements in your design allows
readers the breathing room to process the information. Pro tip: if you are
using a 16pt size, the line height should be no less than 1.2.

Leaving negative space can be as simple as mak ing sure there is


enough space between lines of text. Just look at the difference that a little
space makes in the example below:

13. Practice, practice, practice.


This is going to sound cliché, but when it comes designing
infographics, it will probably take your a couple of goes at it to get the hang
of it. You will need to figure out what works in a design and what doesn't.
Luckily, this learning process is made a lot easier by infographic templates
and guide. And there are certainly a lot of example s out there for you to draw
inspiration from. When in doubt, ask someone else to look over your design
before you publish it--they will be able to tell you if there is any information
that is unclear, or if there is any way that you could make your design even
better.

Online File Formats for Images and Text with the aid of a youtube video presentation:
Image File Types Explained [1080p]
https://www.youtube.com/watch?v=1tW055YjvoE

80
Principles and Basic Techniques of Image Manipulation
There’s a reason it’s said that a picture is worth a thousand words.
It might be an old, familiar catchphrase, but it’s as relevant as ever when it comes to
designing for an audience. And it sums up a concept we know is true both from
experience and research: images capture people’s attention.
HubSpot has collected some statistics that show how visual content is a
powerful communication tool:

 Content with relevant imagery gets 94% more views than content without
images.
 People remember information better when it’s paired with images (10%
retention of audio information vs. 65% retention of audio + visual information
after three days).
 Visual content is 40 times more likely to be shared on social media.

Imagery is a vital part of the equation for most designs and can help make your
projects more memorable and effective. But if you want your design to stand out among
the flood of images your audience sees every day, then it had better look good.
Whether you’re working with your own photography or pictures you sourced
elsewhere, you can make sure your imagery is looking its best by paying attention to
a handful of simple settings and techniques. Even better, all of these adjustments can
be made right in Canva.

1. Cropping: Enhance Focus & Composition

There’s no easier way to completely transform a photo than by cropping it.


Cropping can remove unwanted or distracting areas, improve the composition, or help
emphasize a focal point.
A word a warning: if you plan on doing significant cropping, try to start out with
as large an image as possible. Because the more you crop, the more you reduce your
image quality and resolution. Pixelation can occur, especially if you then try to enlarge
the cropped portion.
A good rule of thumb when cropping is to follow what’s known as the rule of
thirds. This technique imagines that your photo is divided into thirds, both vertically and
horizontally, with four lines (two vertical, two horizontal).
The four points where those lines would intersect form guidelines to place your
focal point, or the most important area of your image.

81
2. Blurring: Enhance Background Images

There will be times you’ll want to highlight images as featured elements in your
designs, but they don’t always have to be the center of attention. They can also work
well in a more behind-the-scenes role — literally. That’s right, we’re talking about
backgrounds.
Photos can make for visually interesting backgrounds in a wide variety of
designs. But, since most designs have text on top of at least part of the background,
you’ll often run into a problem: the details in the photo make the text hard to read.
The solution? Apply some blurring to create a smooth, uncluttered background. With
some light to moderate blurring, you can retain recognizable shapes or scenes in your
background photos.
With a dramatic blurring effect, you can create a soft, abstract wash of colors
and/or vague shapes. This could be a good option if you want some something more
dynamic than a solid-color background — a little shape and color, but no distracting
details.
3. Saturation: Enhance (or Reduce) Color Intensity

Photographers and designers will most commonly adjust an image’s saturation


settings to kick up its colors a notch.

82
Saturation has to do with color intensity, so more saturated colors are bolder
and brighter (closer to their purest form) while less saturated colors are more faded
(closer to gray). Complete desaturation (in Canva, this would be a saturation setting of
-100), leaves you with a black-and-white photo.
While any photo editing technique can be overdone, too much saturation can
look particularly strange and unnatural. So, unless you’re after a particular effect, be
careful to go easy on the saturation, or else you’ll end up with an image that has an
almost glowing, neon look.

4. Contrast: Enhance Highlights and Shadows

Increasing contrast is a good way to make your image pop and add a little
drama.
Upping the contrast produces lighter lights, darker darks, and a wider range of
tones in between — making your image look just a little better than what you’d see in
real life.
On the other hand, reducing contrast can give an image a more flat, even tone.
As with saturation, too much contrast is usually not a good thing. Highlights can get
blown out (too bright) and shadows can get too dark, which means you lose detail and
dimension in those areas.

5. Brightness: Enhance Overall Lighting

Lighting can be one of the hardest things to get right, even for professional
photographers.
While it’s best to start out with an image that has been correctly exposed,
sometimes you’ll end up with a photo that’s just a little too dark, and you may be able
to improve it by manipulating the brightness setting.
Keep in mind that editing the brightness will making everything brighter (or
darker). This should be done incrementally and with attention to not creating areas that
are overly bright, and you can often improve and balance your results by adjusting the
contrast at the same time.

83
6. Filters: Enhance and Correct Photos

Thanks to Instagram and other apps, filters have become a popular photo
editing option. They can be used to add special or artistic effects to your images, but
they can also serve as a shortcut to correct issues in your image.
For example, in the image above, the photo I started with (left) had a yellowish
tone to it. I wanted the colors to look more balanced, so I applied Canva’s “Nordic” filter
to tone done the yellow, then fine-tuned the results by adjusting the brightness,
contrast, and saturation (right).

7. Arrangement: Enhance Your Layout with Grids

A clean and organized layout is an asset to any design project. If you’re not
sure where to start, aligning all your design elements to a grid is always a safe bet.
Grids are also a nice way to showcase multiple images.
8. Frames: Enhance Image Shape & Style

Like actual picture frames you hang on a wall, framing images in design is
traditionally used to draw attention to the image. Frames can be simple or decorative,
a single line or an illustrated design, colored or not, depending on the style and mood
of your project.

84
9. Layering: Enhance Images with Screens or Overlays

Sometimes you’ll want an image to be a little less noticeable — often so text or


other elements on top can show up better. While blurring is one way to do this (as we
discussed at the top of the top of the article), there are other ways that preserve the
clarity of your photo.
Screens (also called overlays) are a common approach. They are transparent blocks
of color that sit on top of your image. Adjusting the opacity of the screen determines
how well your image will show through.
A more opaque screen provides a smoother, more even surface for your text
but also conceals your image, so you’ll want to find a happy medium level of
transparency that suits the purposes of your design.

10. Text: Enhance Images with Typography on Top

Images and text are two foundations of graphic design. Combine them, and
they’re a powerhouse of visual communication. So try adding relevant information to
an image by placing text on top (or picking an image that complements the subject of
your text).
In photography, naturally open areas like sky or water provide nice, clear
spaces to add typography.

Show a video presentation from Youtube: Best Free Photo Editing Software 2017
https://www.youtube.com/watch?v=7TpDgUCxAI4

Activity 2. BEFORE & AFTER


Submit some pictures before and after manipulating them.
Example: profile pictures before and after applying filters.
Submit your output in Activity 2 Submission bin using this filename format:
Section_lastname_firstname_beforeandafter

85
Engagement
Activity 3. Infographic
Let the students utilize the Principles of Visual Message Design by creating a
digital Infographic using any of the following suggested softwares/applications:
Adobe photoshop, MS Publisher, GIMP, PhotoScape, and the like.

86
Assimilation
Activity 4. Forum
Upload your infographic and answer the question: what are the different
techniques and principles that you applied in your infographic. Look at the infographics
submitted by your classmates and comment on their outputs.

References
Basic principles of graphics and layout Types of Image File Format by
http://www.makeuseof.com/tag/lea Mathankumar.S
rn-principles-design-preinstalled- https://www.slideshare.net/mathupuji/type
templates/ s-of-image-file-format-mathankumars-
vmkvec?qid=77d95575-ff95-4aa4-82a9-
Basic Principles of Graphics and Layout (Imaging & d4ebc2ea579c&v=&b=&from_search=10
Design for Online Environment) by Lulu Ilas File formats and its types by Anu Garg
https://www.google.com.ph/webhp https://www.slideshare.net/anugarg39501/
?sourceid=chrome- file-formats-and-its-types
instant&ion=1&espv=2&ie=UTF-
8#q=Imaging+and+Design+For+th http://www.online-convert.com/file-
e+Online+Environment+lecture type#website
Image File Types Explained [1080p]
Basic Principles of Graphics and Layout by Joy https://www.youtube.com/watch?v=1tW05
Pamor 5YjvoE
https://www.slideshare.net/joypam
or/basic-principles-of-graphics-and-layout Online file formats for images and text
http://www.makeuseof.com/tag/know-
Empowerment Technologies Student when-to-use-which-file-format-png-vs-jpg-
Reader for Senior High School pages 26 doc-vs- pdf-mp3-vs-flac/
to 30.
Principles and basic techniques of image
It’s all about infographics by Aditya manipulation
Krishna https://designschool.canva.com/blog/imag
https://www.slideshare.net/adidhotre/slide- e-enhancement/
shareitsallaboutinfographics/20Best_Pract
ices Photo editing tutorial - Top 5 tips before
you start editing photos
INFOGRAPHICS: The Good and The Bad https://www.youtube.com/watch?v=Ix4xxN
https://www.slideshare.net/DiditMarketing/i I_UTI
nfographics1-47291158/17-
Best Free Photo Editing Software 2017
The Ultimate Infographic Design Guide: https://www.youtube.com/watch?v=7TpDg
13 Tricks for Better Designs UCxAI4

https://venngage.com/blog/infographic- How to Use GIMP (Beginners Guide)


design/ https://www.youtube.com/watch?v=Q8C0L
JPpr64
File types pro forma by Jess Stanton
https://www.slideshare.net/JessStanton_/fi GIMP How-To Video | Photo Editing
le-types-pro-forma- Basics in 5 Minutes
41619497?qid=0492d12b- 67c4-491b- https://www.youtube.com/watch?v=nENuL
99e9- wtkTVU
3a0ffd30fbae&v=&b=&from_search=7

87
Lesson 7: Online Platforms for ICT Content Development

Introduction
Online platforms that you use for ICT content development are social media
platforms like Facebook and Multiply, and blogging platforms like WordPress, Tumblr, and
Blogger. Blogging platforms are not as popular but are highly customizable.
Try to answer this question by listing its advantages.
Which platform is superior? Social Media Platforms or Blogging Platforms? Why?

Development

Discussion
Online Platforms for ICT Content Development
 SOCIAL MEDIA PLATFORMS
Websites like Facebook allow you to create not only personal accounts but also
pages and groups where you can share content. The only downside of this is that you
are restricted to Facebook’s “one-size-fits-all” design.
On the other hand, Facebook has billions of users. Linkedln is another example of
a social networking site where its focus in on business and professional networking.
 BLOGGING PLATFORMS
Websites like WordPress, Tumblr, and Blogger focus on content and design. It
typically looks like a newsletter where you are given options to change the design to
your liking. Though you can manipulate the design, social media platform’s popularity is
still unrivaled. The amount of customization in blogs is also unrivaled depending on the
content management system implemented by the provider.

Content Management System


A Content Management System (CMS) is a computer application (sometimes online
or browser-based) that allows you to publish, edit and manipulate, organize and delete
web content. CMS is used un blogs, news websites, and shopping.
Cloud Computing
When we created Infographics, we used Piktochart and its inforgraphic editor uses
cloud computing. The same goes for making our own blog and creating our first post: we
used the editor from WordPress. These are referred to as cloud computing because we did
not need to install any software in the computer. The software is in the “cloud” or over the
Internet.
Here are some advantages and disadvantages of cloud computing:
Advantages:
1. No need to install.
2. Saves hard disk space.
3. Easy access to your software/files; can be ran anywhere as long as there is Internet
connection.
4. Saves you money from buying software licenses and additional hard disk space.
5. No need to update because it updates automatically.
6. Minimum system requirements.
7. Back up and data recovery are relatively easier than on a physical device.

Disadvantage:
1. Can be hampered down by slow Internet speed; no connection, no cloud computing.
2. May still require compatible software like a browser.
3. You do not own the software; you are simply renting it.
4. Security risk of doing things over the Internet as opposed to your personal computer
alone.
5. More prone to hacking.
6. Limited control over the infrastructure itself.

88
Engagement
Activity 1: Strand 101
1. Research ten (10) commonly used words related to your chosen track and strand, their
definition, and examples for each when used in a sentence.
2. Create a blog post about these words, using any blogging platform that you prefer.
3. Choose 3 of these words and video someone (or yourself) to pronounce these three
words using all of them in individual sentences. Upload these videos on Youtube.
4. Embed the video as part of your blogpost.

Assimilation

Activity 2. Blogpost Forum


Submit the link of your blog post in this forum. Visit the blog post of your classmates
and comment on their output.

References
(2016). Empowerment Technologies, Innovative Training Works, Inc. First Edition. Rex Bookstore

89
Key to Correction

Lesson 1 Lesson 3
1. T 1. a. mail merge
2. F 2. b. file name
3. F 3. c. Create main document; create data source; insert
4. T place holders; preview
5. T 4.b. mailing tab
6. T 5. c. place holder
7. F 6. b. .gif
8. F 7. a. in line with text
9. T 8. b. illustrations
10. T 9. b. Excel
10. d. smart art

Lesson 2.
1. e Lesson 4
2. l
3. o 1. a. Microsoft excel
4. a 2.c. SUM
5. i
3. a. AVERAGE
6. B
7. c 4. d. COUNTIF
8. h 5.c. Cltrl + 1
9. n
10. m
11. d
12. k
13. j
Lesson 5. True or False:
14. g
1. T
15. f
2. F
3. F
4. F
5. F.

90
Lesson 3
1. a. mail merge
2. b. file name
3. c. Create main document; create data source; insert place holders; preview
4.b. mailing tab
5. c. place holder
6. b. .gif
7. a. in line with text
8. b. illustrations
9. b. Excel
10. d. smart art

91

You might also like