LESSON 1: INTRODUCTION TO INFORMATION AND COMMUNICATION

TECHNOLOGIES

Information and Communication Technologies (ICT) deals with the use of

different communication technologies such as mobile phones, telephone, and
internet to locate, save, send, and edit information.

ICT in the Philippines. Several international companies dub the Philippines as

the “ICT Hub of Asia” because of huge growth of ICT-related jobs, one of which is
the rise of Business Process Outsourcing (BPO) centers. 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. In a data gathered by the Annual Survey of Philippine Business
and Industries, NSO in 2010, the ICT industry shares 19.3% of the total employment
population here in the Philippines. 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.
This study was conducted using Instagram, a popular photo sharing application.

Types of Websites
Web 1.0. A static or stationary page wherein users cannot interact with the
page. Examples: [Link], Ofoto, Aliweb, shopping carts, personal websites,
[Link], brunch, [Link], Wikipedia, etc…
Web 2.0. A dynamic page wherein users can interact with the page.

Examples: social networking sites (Facebook, Instagram, Twitter, etc.), video

sharing sites (YouTube, Vimeo, TikTok, Twitch, DailyMotion, Facebook Watch, etc.),
wikis (Wikitravel, WikiBooks, WikiHow, Wiktionary, etc.), web applications (Google
Apps, Microsoft 0365, etc.), hosted services (Bluehost, HostGator Cloud, Hostinger,
GreenGeeks, DreamHost), and blogs.

Features of Web 2.0

1. Folksonomy -allows users to categorize and classify or arrange
information using freely chosen keywords (e.g., tagging). Popular social
networking sites such as Twitter, Instagram, Facebook, etc. use tags 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.
3. User Participation -the owner of the website is not the only one who is
able to put content.
4. Long Tail -services that are offered on demand rather than on a
onetime purchase.
5. Software as a Service -users will subscribe to a software only when
needed rather than purchasing them.
6. Mass Participation -diverse information sharing through universal web
access.
Web 3.0 and the Semantic Web
Semantic Web -is a movement led by the World Wide Web Consortium

(W3C). The term was coined by the inventor of the World Wide Web, Tim Berners-
Lee. It provides a common framework that allows data to be shared and reused
across application, enterprise, and community boundaries.

Several Problems in using Web 3.0

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.
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 which cater to the needs of the people who benefit most out of it. The
following trends are the 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. It is the use of 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
usergenerated content.

Six Types of Social Media

Names Definition Examples

a. Social Networks - sites that allow you to • Facebook and

connect with other Google+
people with the same
interests or background.
b. Bookmarking -sites that allow you to • StumbleUpon
Sites store and manage links and Pinterest
to various websites and
resources and create a
tag to easily search or
share them.
c. Social News -sites that allow users to • reddit and Digg
post their own news
items or links to other
new sources.
d. Media sharing -sites that allow you to • Flicker,
upload and share media YouTube, and
content like images, Instagram
music, and video.
e. Microblogging -sites that focus on short • Twitter and Plurk
updates from the user.
f. Blogs and -websites that allow • Blogger,
Forums users to post their WordPress, and
content. Tumblr

3. Mobile Technologies. The popularity of smartphones and tablets has taken a

major rise over the years because of the devices’ capability to do tasks that were
originally found in personal computers. Today, the latest mobile devices use 5G
Networking (LTE), which is currently the fastest mobile network.

Different Operating Systems use by Mobile Devices

a. iOS -used in Apple devices such as the iPhone and iPad
b. Android -an open-source operating system developed by Google
c. Blackberry -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 -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.

LESSON 2: RULES OF NETIQUETTE

Teenagers like you are exposed to many things powered by the internet
because they are mostly into socializing, playing games, reading sports news,
shopping, etc. The internet has given you the most powerful tools that your parents
did not enjoy during their early days. For this reason, you must observe proper
internet usage.

Online Safety and Security

Internet is a powerful tool used to promote business, gain new friends, and stay
in touch with the old ones. It is also a source of entertainment through games,
online communities, and everything in between. But there is always the “other side
of the coin”. Internet is one of the most dangerous places especially if you are
unaware of what you are doing with it.
How safe are you? See how risky it is to share the following information online.

Type of Risks
Information

1. First Name A big possibility that a hacker may already know

plenty of stuff about you even if you only give out
your first name.
2. Last Name If sharing your first name is a small risk, having both
your first and last is riskier. You will be vulnerable to
being searched for using search engines, which
include image search. Matching a name with a face
is modus to several cybercrimes like identity theft.
3. Middle Name Sharing your middle name alone is probably not the
riskiest of this shared information but sharing your
full name would be.
4. Current and Most people who steal identities study their subject.
previous school(s) They can use this information for verification
purposes.
5. Your cell phone This should never be posted because internet is a
number public place. It is the same as posting your number
on a billboard. You would not want random strangers
to text or call you, or worse, pretend that they are
someone else.
6. The name of Risky, yet not as risky as posting their full names,
your mother and esp. your mother’s maiden name. In fact, you may
father have already encountered many websites that
require your mother’s maiden name as an answer to
a secret question whenever you lose your password.
7. The name of This is a huge risk. Strangers may pretend or use
your siblings their identity to fool you.
8. Your address Hopefully, you answered “no” to this one. Giving the
internet your number is one thing; giving them your
address is a whole other level. It would be much
easier for criminals to find you.
9. Your home This shared information is riskier than sharing your
phone number personal phone number. Scams usually use this
information to deceive you, one of which is when a
stranger pretends to know your parents or pretends
to be you.
10. Your birthday Letting people know your birthday is probably a
must if you want to get as many gifts as possible.
But having it in your profile makes you vulnerable to
identity theft.

Internet is defined as the information superhighway means that anyone has

access to this highway, can place information, and can grab that information.
Therefore, everyone is a prospect to cybercrime threats. We may not experience it
now but whatever information we share today could affect our future. With this
reason, social networking sites like Facebook continue to improve their security
features.

Tips to Stay Safe Online

1. Be mindful of what you share online and what site you share it to.
2. Do not just accept terms and conditions; read it.
3. Check out the privacy policy page of a website to learn how the website
handles the information you share.
4. Know the security features of the social networking site you use.
5. Do not share your password with anyone.
6. Avoid logging in to public networks/Wi-Fi.
7. Do not talk to strangers whether online or face-to-face.
8. Never post anything about a future vacation.
9. Add friends you know in real life.
10. Avoid visiting untrusted websites.
11. Install and update an antivirus software on your computer.
12. If you have a Wi-Fi at home, make it a private network by adding a password.
13. Avoid downloading anything from untrusted websites.
14. Buy the software; do not use pirated ones.
15. Do not reply or click links from suspicious emails.

Internet Threats
Here are some of the threats you should be aware of when using the internet.
[Link] – stands for malicious software.

a. Virus – a malicious program designed to replicate itself and transfer from

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. o 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, they are not protected at all.
d. Spyware – a program that runs in the background without you knowing it
(thus called “spy”). It can monitor what you are currently doing and typing
through keylogging. o Keyloggers - used to record the keystroke done by
the users. 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 advertisers. It can be used to send
malware.
3. Phishing – its goal is to acquire sensitive personal information like passwords
and credit card details.
Pharming – a more complicated way of phishing where it exploits the DNS
(Domain Name Service) system.

Protecting Reputations Online

Embarrassing moments nowadays can be captured using any device you could
imagine. Unlike the old days, doing something embarrassing was not much a big
deal. Worst is that anyone can easily upload it over the internet and cannot be
undone. This puts you in a traumatic situation and risk the lives of your family. So,
before posting something over the internet, think first before you click.

Think Before You Click

Things you might want to consider before internet posting.

1. Once you post something on the web, you have no control of who sees your
posts.
2. Your friends depend on you to protect their reputation online.
3. Set your post to “private”.
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 it as inappropriate.

Copyright Infringement
If you create something like 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. The copyright law includes your rights over your work, and
anyone who uses it without your consent is punishable by law.

Tips to avoid copyright infringement

1. Understand. Copyright protects literary works, photographs, paintings,
drawings, films, music (and lyrics), choreography, and sculptures, but it does
not protect underlying ideas and facts.
2. Be responsible enough to know if something has a copyright.
3. Be creative. Ask yourself whether what you are making is something that
came from you, or something made from somebody else’s creativity. It is
important to add your own creative genius in everything that will be credited
to you.
4. Know the law. There are limitations to copyright laws. For instance, in the
Philippines, copyrights only last a lifetime (of the author) plus 50 years. There
are also provisions for “fair use” which mean that an intellectual property
may be used without a consent as long as it is used in commentaries,
criticisms, search engines, parodies, news reports, research, library archiving,
teaching, and education.
LESSON 3: CONTEXTUALIZED ONLINE SEARCH AND RESEARCH SKILLS

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.

Tips in Conducting Online Research

1. Have a question in mind. Focus on a question you want answered.

2. Narrow it down. Search engines 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 geographical location
then, send you the result which is the most related to you. For
example, if you were to look for Tom Sawyer, the animation series, you
would better use the keywords “Tom Sawyer animation” rather than
just “Tom Sawyer”.
3. Advanced Search. This is the best way to filter information you get
from search engines allowing 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 thesetting
options button located at the upper right corner of the page. Once
you are done you can now filter your search results.

4. Look for a credible source. Credible sources maybe scientific journals,

established news and magazine websites, online encyclopedias, and
scholarly databases.
5. 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.
Example:
 Lapiz, Adrian Harold L. “Oleander’s Fun Facts about Bananas”.
[Link]
Viewed on September 7, 2015.

LESSON 4: ADVANCED WORD PROCESSING SKILLS

In the professional world, sending out information to convey important

information is vital. Because of ICT, things are now sent much faster than the
traditional newsletters or postal mail. You can now use the internet to send
out information you need to share much faster.

Mail Merge and Label Generation

Mail Merge is one of the most powerful and commonly used features of
Microsoft Word. It allows you to create documents and merge them with
another document. It is commonly used when sending out advertising
materials to various recipients.

Two components of Mail Merge

1. Form Document is the first component of our mail merged document
that contains the main body of the message we want to convey or
send.
• Place holders are data fields or merge fields which marks the
position on your form document where individual data or
information will be inserted and are denoted by the text with
double-headed arrows (<< >>) on each side.

2. List or Data File. This is where the individual information or data that
needs to be plugged in (merged) to the form document is placed and
maintained.
Label Generation
Label Generator is a mail merge feature included on Microsoft Word.
Microsoft Word will print individual addresses to a standard form that it has
already pre-formatted. It creates a blank form document that simulates
either a blank label or envelope of pre-defined size and will use the data file
that you selected to print the individual addresses.

Steps in Creating a Simple Mail Merge:

1. Open Microsoft Word and start a new
blank document. You can use the
keyboard shortcut Ctrl+ N after
Microsoft Word has been loaded or
opened.
2. On the Mailings tab, from the Start Mail
Merge group, choose Start Mail Merge →
Letters. Type the letter below. You’ll be
typing in only the common parts of the
letter. The text does not change for each
copy you pr int.

3. Save your letter and name it “Sample Letter”.

4. Insert the fields you need in the letter (Name, Company, Address Line
1, Address Line 2, Address Line 3, and the Title.)
5. Save the main document once more.
6. On the Mailings tab in the Start Mail
Merge group, choose
Select
Recipients then, Type a New List.

7. Click the customize Columns button

on the dialog box for the New
Address List.

8. Select a field that you do not need then

click the Delete button. A
confirmation dialog box appears.
9. Click Yes in the confirmation dialog box.
The dialog box closes, and
the unnecessary field
disappears.
10. Repeat Steps 8 and 9 for each field you do not need. After removing
the excess fields, the next step is to add the fields you need.
11. To add a field that you need in your document, click the Add button.
12. Type the field name on the prompt inside a small Add Field dialog box
and click the Ok button.
13. Repeat Steps 11 and 12 for each new field you need in your main
document.
14. Click the OK button on the Customize Address List dialog box to
confirm your changes.
15. The New Address List dialog box will appear again ready for you to
type in your data.
16. Type the individual data from your list corresponding to Name,
Company, Address Line 1, Address Line 2, Address Line 3 and Title.
17. Press the Tab key each time to enter the next field.
18. To add a new record, press the Tab key on the last field in a record, a
new record is automatically created and added on the next line.
19. Repeat Steps 16 through 18 until you enter all the records you want.
Once you are done typing your data, click the OK button on the Add
New List dialog
box to save your
data. A special
Save Address
List dialog box
pops up,
allowing you to
save the
recipient list.

20. Type a name for the address list. Name it “Client List”.
21. Click the Save button. You should be back on your main document
soon after.
22. Select a field placeholder (ALL CAPS) in the main document.
23. Click the Insert Merge Field
command button.
 24. Choose the proper field to insert into your text. For example, if you are
replacing the text name in your
document with a name field, choose the Name Field from the Insert
Merge Field menu. The field is inserted into your document and
replaces the ALL CAPS text.
25. Continue adding fields until the document is complete. Repeat steps
22 through 24 as necessary to stick all fields into your document.
26. Save the main document.
27. Choose Finish & Merge to edit, print, or send your merged documents
through email.
28. Or you may want to choose Preview Results to check your work before
you send it.
29. Save and close your document.

Integrating Images and External Materials

Inserting pictures in your document like creating a resume improves the
impression of it. Though seemingly simple to do, your knowledge on the
different kinds of materials that you can insert in a Word document and its
characteristics can help you create a more efficient, richer document not
only in content but also in physical form.

A. Kinds of Materials
There are various kinds of materials Microsoft Word can integrate to
make the documents richer, more impressive, and more informative.

Figure 1. The illustrations group menu under the insert tab showing the kinds of materials you can integrate with
Microsoft Word. (Note: The interface will vary depending on the version of Microsoft Word use. The version used
above is Microsoft Word 2016).

1. Pictures. These are electronic or digital pictures or photographs you

have saved in any local storage device.
a. .JPG/JPEG. This is the short form of Joint Photographic Experts
Group. It identifies the kind of data compression process that it uses to make
it more compatible and portable through the Internet.
 b. .GIF. This stands for Graphics Interchange Format which can
display transparencies good for blending with other materials in your
document and can display simple animation
c. .PNG. It stands for Portable Network Graphics built around the
capabilities of .GIF for the purpose of transporting images on the Internet at
faster rates but does not support animation.
2. Clip Art. This is generally a .GIF type; line art drawings or images used
as generic representation for ideas and objects that you might want to
integrate in your document.
[Link]. These are printable objects or materials that you can integrate in
your document to allow you to have some tools to use for composing and
representing ideas.

4. Smart Art. These are predefined sets of different shapes grouped

together to form ideas that are organizational in nature.

[Link]. It allows you to represent data characteristics and trends in a

graphical manner.

[Link]. A more realistic image to integrate in creating reports or

manuals.

Image Placement
Inserting images into your document seems quite easy but the challenge is
where to place or move it. You will now study the different characteristics of
text wrapping options that you can use with the image you integrated in
your document.
1. In Line with Text. It treats your image like a text font with the bottom
side totally aligned with the text line and is used when you need to
place your image at the beginning of a paragraph. Example:

The rose is a type of flowering shrub. Its name comes from the Latin
word Rosa. The flowers of the rose grow in many different colors, from the well-
known red rose or yellow roses and sometimes white or purple roses.

2. Square. This allows the inserted image to be placed anywhere within

the paragraph with the text going around the image in a square
pattern like frame.
Example:
The rose is a type of flowering shrub. Its name comes from the Latin word
Rosa. The flowers of the rose grow in many different colors, from
the well-known red rose or yellow roses and sometimes white or
purple roses.
3. Tight. This is almost like the Square setting where the text “hug” or
conforms to the general shape of the image.
Example:
The rose is a type of flowering shrub. Its name comes from the Latin word
Rosa. The flowers of the rose grow in many different colors, from the well-known
red rose or yellow roses and sometimes white or purple roses.

4. Through. This allows the text on your document to flow

even tighter taking the contours and shape of the image.
Example:
The rose is a type of flowering shrub. Its name comes from
the Latin word Rosa. The flowers of the rose grow in many different
colors, from the well-known red rose or yellow roses and
sometimes white or purple roses.

5. Top and Bottom. This pushes the texts away vertically to the top
and/or the bottom of the image so that the image occupies a whole
text line on its own.
Example:
The rose is a type of flowering shrub. Its name comes from the Latin word
Rosa. The flowers of the rose grow in many different colors,

from the well-known red rose or yellow roses and sometimes white or purple
roses.

6. Behind Text. It allows the image to be dragged and placed anywhere

on your document but with all the texts floating in front of it.
Example:

The rose is a type of flowering. Its name comes from the Latin
word Rosa. The flowers of the rose grow in many different colors, from
the well-known red rose or yellow roses and sometimes white or purple
roses.

7. In Front of Text. This allows your image to be placed right on top of

the text as if your image was dropped right on it.
Example:

The rose is a type of flowering. Its name comes from the Latin
word Rosa. The flowers of the rose grow in many different colors, from
the well-known red rose or yellow roses and sometimes white or purple
roses.
LESSON 5: ADVANCED SPREADSHEET SKILLS

Whether you work in the field of accounting or not, the truth is

whatever you do should be accounted for because the resources you use
cost you expenses. Whether what work you will have in the future, it is
important to understand how a company spends to be able to deliver a
product or service. These factors could easily be computed using
spreadsheet programs. Spreadsheet Software allows users to organize data
in rows and columns and perform calculations on the data. These rows and
columns collectively are called worksheet. Examples of Spreadsheet
Software: LibreOffice Calc, [Link] Calc, Google Sheets, Apple iWork
Numbers, Kingsoft Office Spreadsheets, StarOffice Calc, Microsoft Excel.

To open Microsoft Excel, Press “Windows Logo” + R then type “excel”

then enter.

Key Terms in MS Excel:

1. Row is the horizontal line of entries in a table.

2. Column is the vertical line of entries in a table.
3. Cell is the place where information is held in a spreadsheet.
4. Spreadsheets consist of several individual sheets; each sheet
containing cells is arranged in rows and columns.
5. Active Cell is the selected cell.
6. Column Heading is the box at the top of each column containing a
letter.
7. Row Heading is the row number.
8. Cell Reference is the cell address of the cell usually combine letter
and number (ex. A1, B4, C2).
9. Merge is combining or joining two or more cells.
10. Formula is an expression which calculates the value of a cell.
11. Functions – are predefined formulas and are already available in
Excel.
12. Formula Bar is the bar that displays the contents of a cell.

Other terms:

1. Accounting Number Format – a number format that is used for

accounting.
2. Orientation – the angle at which a text is displayed.
3. Count – a function used to count the cells with content in a range.
4. Sum – a function used to compute for the summation of the number of
a range.
 5. Average – a function used to compute for the average of the number
of a range.
6. COUNTIF – a function used to count the cells with a specified content
within a range.
7. SUMIF – a function used to compute for the summation of a range if a
certain condition is met.
8. AVERAGEIF – a function used to compute for the average of a range if
a certain condition is met.
9. Range – the range of cells where you want to look for the criteria.
10. Criteria – a value or label that determines if a cell is part of the range
to be averaged.
11. Average Range – the actual range of cells that will be averaged, if
omitted, the range will be used instead.
12. =MIN(range) – returns the smallest number within the range.
13. =MAX(range) – returns the largest number within the range.

LESSON 6: ADVANCED PRESENTATION SKILLS

Microsoft PowerPoint is a tool that helps you to present data whether

it is scientific, statistical, or a book report.

Creating an Effective Presentation

A pleasurable part of presenting a report is in designing your presentation

for it enables you to be creative. What maybe is in your mind now is to
place animations, transitions, and art. Whether these features would help is
generally up to you. Using these features could sometimes distract your
audience rather than help. Here are some quick tips in creating an effective
presentation.

1. Minimize. Keep slide counts to a minimum to maintain clear message

and keep the audience attentive.
2. Clarity. Use font style that is easy to read.
Tip: a font size of 72 is about an inch (depends on the screen
size). A one-inch letter is readable 10 ft away; two-inch letter is
readable 20 ft away.
3. Simplicity. Use bullets or short sentences by summarizing the
information on the screen. Limit the content to six lines and seven
words per line. (6 x 7 rule)
 4. Visuals. Use graphics to help in your presentation. Instead of using a
table of data, use charts and graphs.
5. Consistency. Make your design uniform and avoid different font styles
and backgrounds. 6. Contrast. Use light font on dark background or
vice versa.

Using Hyperlinks in Microsoft PowerPoint

Using hyperlinks in your presentation is an easy way to navigate slides
during your presentation.

Ways to insert hyperlinks:

1. Select an object or highlight a text.
2. Go to Insert>Hyperlinks (under links category) or use the shortcut
key Ctrl+K.

Link to options:
a. Existing File or Web Page – creates a hyperlink to website or a local
file saved in your hard drive. Just browse your file in the dialog box
or type the web address.
b. Place in This Document – creates hyperlink that allows you to jump
to a specific slide in your presentation.
c. Create a New Document – creates a hyperlink that once clicked,
creates a new document on your specified location
d. E-mail Address – creates a hyperlink that opens Microsoft Outlook
that automatically adds your specified recipient on a new email
3. When done, click OK to apply your hyperlink.
Embedding Objects in Microsoft PowerPoint
Embedding objects is easy using Microsoft PowerPoint. With this
option, you can insert an Excel file that would look like a table to a
presentation.

Embedding an Excel File to your Slide presentation

1. Go to the Insert tab.

2. On theText group, click onObject.

3. The Insert Object dialog box would appear:

Options:

a. Create New – creates a new file from scratch. You can select on a
wide variety of files listed.
b. Create from File – creates a file from an existing file saved on your
hard drive; simply browse the file to use it. Putting a check on the
“link” option will allow you to modify the Excel file inside your
presentation.

4. Once you are done, click OK.

LESSON 7: MANIPULATING TEXT, GRAPHICS, AND IMAGES TO CREATE ICT
CONTENT FOR AN ONLINE ENVIRONMENT

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.

Basic Principles of Graphics and Layout

1. Balance. The visual weights of objects, texture, colors, and space are
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.
3. Movement. Visual elements guide the viewer’s eyes around the
screen.
4. Pattern, Repetition, and Rhythm. These are repeating visual element
on an image or layout to create unity in it.
5. Proportion. Visual elements create a sense of unity where they relate
well with one another.
6. Variety. This uses several design elements to draw a viewer’s
attention.

Infographics
Infographics or information graphics are used to represent
information, statistical data, or knowledge in a graphical manner usually
 done in a creative way to attract the viewer’s attention. Infographics make
complex data become more visually appealing to an average user.

Creating Infographics using Piktochart

You will create an infographic about COVID19 prevention using
[Link], a free online app that allows you to create your own
infographic.
1. Create a Piktochart account by going to [Link] and click
sign up on the upper right corner of the page.

Figure 1. The Sign-Up button of Piktochart is located on the upper right of the screen.

2. Fill up the information on the Sign Up page; alternatively, you can

connect with Google+ or Facebook.
3. Once you have created an account and logged in, select a template
for your infographic. Hover over the Presenta Board theme under Free
Themes then select Create.
 4. The Piktochart editor will open. The Presenta Board theme consist of
three blocks. Select the blocks and input the information as you see
fit.
5. While editing a block, you can use various tools on the left side of the
page:
a. Graphics – allows you to insert lines, shapes, icons, and even
photos.
b. Uploads – allows you to upload images for your infographic.
c. Background – changes the background of a selected block.
d. Text – allows you to insert text to your infographic with the option
to add text frames.
e. Styles – allows you to modify the color scheme of your infographic.
f. Tools – allows you to create charts, maps, and videos.

Editing Tips:
• Double-click a text to edit the content.
• When working with objects, the toolbox on top of the topmost
block will allow you to manipulate it.
• When working with charts, double-click the chart to open the
datasheet editor.
• You may rename the title of your infographic on the top toolbar.
6. To save your work, click on Save on the top right of the page. To save
it in your computer, click on Download. In the Download options,
select the medium-sized and the PNG file type.

Online Image File Formats

Unlike images that are found in our computer, you must consider that
website images should be more compressed because data travels over the
internet and not everyone has a fast internet connection. Consequently, we
must use compressed images on our websites. Likewise, even though a
wide variety of websites already support high-definition (HD) photos, you do
not have to use HD all the time. In fact, most of the time, you do not even
have to.

Here are common image file formats used on the web. All of them are
already discussed in the previous lesson. Here, we will look at their use in
the web.

Name File Use Supports Supports

Extension Transparency Animation
1. Joint .jpeg /.jpg Real-life No No
Photographi photographs,
c s Experts high compression
Group

2. Graphics .gif Computergenerat Yes Yes

Interchange ed graphics
Format

3. Portable .png Screenshots, high Yes No

Network compatibility
Graphics

There are plenty of other image file formats used in the web but most
of the time you will be using these three because of their compatibility with
all major web browsers.

When inserting text to a web page, you can simply copy a text to your
HTML editor, or you can upload it on a website as a PDF file. Most browsers
support “add-ons” so that you can open PDF files without leaving the
browser.