Empowerment Technologies

Module in Empowerment Technologies

Author: gRascia
School:
School Address:

For the learner:

Welcome to the Empowerment Technologies Alternative Delivery Mode (ADM) Module on

Introduction to ICT, Online Safety. This module was designed to provide you with fun and meaningful
opportunities for guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning resource while being an active learner.
This module has the following parts and corresponding icons:

What I Need to Know This will give you an idea of the skills or competencies
you are expected to learn in the module.

What I Know This part includes an activity that aims to check what
you already know about the lesson to take. If you get
all the answers correct (100%), you may decide to skip
this module.

What’s In This is a brief drill or review to help you link the current
lesson with the previous one.

What’s New In this portion, the new lesson will be introduced to you
in various ways such as a story, a song, a poem, a
problem opener, an activity or a situation.

What is It This section provides a brief discussion of the lesson.

This aims to help you discover and understand new
concepts and skills.

What’s More This comprises activities for independent practice to

solidify your understanding and skills of the topic.

What I Have Learned This includes questions or blank sentence/paragraph to

be filled in to process what you learned from the lesson.

What I Can Do This section provides an activity which will help you
transfer your new knowledge or skill into real life
situations or concerns.

Assessment This is a task which aims to evaluate your level of

mastery in achieving the learning competency.

Additional Activities In this portion, another activity will be given to you to

enrich your knowledge or skill of the lesson learned.
This also tends retention of learned concepts.
 Answer Key This contains answers to all activities in the module.

NOTE: please do not write ANYTHING on this MODULE, write your answers on your notebook.

Quarter 1 – Module 3:
Imaging and Design for the Online
Environment

What I Need to Know

This module was designed and written with you in mind. It is here to help you master the
Empowerment Technologies. The scope of this module permits it to be used in many different learning
situations. The language used recognizes the diverse vocabulary level of students. The
lessons are arranged to follow the standard sequence of the course. But the order in
which you read them can be changed to correspond with the textbook you are now
using.

The module covers:

 Imaging and Design for the Online Environment

After going through this module, you are expected to:

  creates an original or derivative ICT content to effectively communicate or
present data or information related to specific professional tracks
 evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design.
 use image manipulation techniques on existing images to change or enhance their
current state to communicate a message for a specific purpose
 create an original or derivative ICT content to effectively communicate a visual
message in an online environment related to specific professional tracks

What I Know

Activity 1 YOUR ENTRY PASS

➢ Direction: Write your THOUGHTS, EXPECTATION and
PREVIOUS learning when we say Imaging and Design for the Online
Environment. Write your answer in the box.

THOUGHTS PREVIOUS EXPECTATION

( Mga kaisipan ) ( Mga Dating kaalaman ) (Mga Inaasahan )
1 1 1
2 2 2
3 3 3
4 4 4
5 5 5

IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT

WHAT IS AN IMAGE?
An Image is a representation of the external form of a person or thing in art.i

What’s In

Activity 2 - Your Turn to Shine

• What can you say about the image below? How can you describe the meaning of the without the
caption?
 ii

What’s New

Activity 3: Place it!

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, a renowned website for ranking web page 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?

What is It

WHAT IS AN IMAGE?

Images may be 2-dimensional, such as a photograph or screen display, or 3-dimensional, such

as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses,
telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water.

GRAPHICS:

Graphics - are visual images or designs on some surface, such as a wall, canvas, screen, paper, or tone
to inform, illustrate, or entertain.
EXAMPLES OF GRAPHICS:
 IMAGE FORMAT

IMAGE FORMAT
Different types of image format on the computer.
ONLINE IMAGE FILE FORMAT

1. Joint Photographic Experts Group (JPEG) –

does not support transparency and animation (.jpeg
or jpg)

2. Graphics Interchange Format (GIF) – supports transparency

and animation (.gif)

3. Portable Networks Graphics (PNG) – supports

transparency but not in animation (.png)

LAYOUT

Layout – is part of graphic design that deals in the arrangement of visual elements on a page.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

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.
3. Movement. Visual elements guide the viewer’s eyes around the screen.
4. Pattern. Builds course. It builds familiarity and organizes design for trouble-free
viewing.
5. Repetition. makes design aware. It brings consistency and flow to the design.
6. Proportion. Conveys stability. It involves scaling of various elements to create a
coherent design.
7. Harmony. Brings elements closer. It utilizes familiar traits of design elements and puts
them into focus.
8. Contrast. Addresses conflict. It highlights the difference and puts an emphasis to what is
important
9. Variety. Reaps attention. It adds flavor to the design, making it more interesting and
engaging.

INFOGRAPHICS
Infographics – Information graphics or infographics 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.
5 PRINCIPLES IN MAKING AN EFFECTIVE INFOGRAPHIC DESIGN:

1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting it Across
INFOGRAPHIC EXAMPLE

INFOGRAPHIC VIDEO
Infographic Video – is a visual representation of data and
knowledge in the form of an online video.

IMAGE PRINCIPLES, TECHNIQUES AND HOSTING

Image manipulation techniques, principles and hosting sites.

1. Choose the right file format. Try to make a real-life photograph into GIF to see the
difference between PNG, GIF, and JPEG. Knowing the purpose is the key to finding out
the best file format.
2. Choose the right image size. A camera with 12 megapixels constitutes to a bigger
image size. Monitors have a resolution limit, so even if you have a million
megapixels, it will not display everything.
3. Caption it. Remember to put a caption on images whenever possible. If it is not related to
the web page, then remove it.
9 IMAGE MANIPULATION TECHNIQUES
1. Cropping. Cutting parts away to remove distracting or irrelevant elements.
2. Color Balance. The ambience and the tone of light of the picture (ex. Warm or cool
light)
3. Brightness and Contrast. One of the most basic techniques in image editing, making
the image darker or lighter.
4. Compression and Resizing. The higher the quality and the larger the photo is, the bigger
the file size of the picture is.
5. Filters. Making the image look sketched, grainy, classic black and white or even let it
have neon colors. This gives your image a twist from its original look.
6. Cloning. Copying or duplicating a part of an image.
7. Changing the Background. Adding background to make your image stand out.
8. Removing the Color. Removing certain colors in your image or desaturating the color
of the image
9. Combining Text, Graphics and Image. Adding multiple elements in your layout.

What’s More

Activity 4:
Activity - Your Turn to Shine: Good Vs Bad Design

1. 2.

3. 4.

5. 6.

7. 8.
Guide Questions
1. Which examples would you consider as having a good layout? Explain your answer.
2. Which examples do not have a good layout? Why do you say so?
What improvements can be made to the layout?
3. Who do you think should be the target audience of such materials? Justify how the objects,
images, or text used in the layout cater or do not cater to the target audience.
 What I Have Learned

Activity 5: YOUR EXIT TICKET

Directions: Complete the table 321 Exit Ticket by writing what is being asked.
321 EXIT TICKET
Things I learned
3

Things I Found Interesting

2

Questions I still have

1

What I Can Do

Activity 6: Name It!

Directions: List some advertisements seen on television which used image manipulation techniques,
their corresponding endorser/s (if any) and how the image manipulation improved the
advertisement.
Product Endorser What makes it good?
1.
2.
3.
4.
5.

Assessment

Directions: Based on the “Principles in making an Effective Infographic Design” create an

INFOGRAPHIC that will incorporate in your track.
Example:
Rubrics:
Criteria
25% • Content
25% • Skill -
25% • Aesthetics -
25 % • Overall impact -

Reflection

Activity 7
Directions: In your notebook, journal or portfolio, write your personal insights
about the lesson by completing the following statements.

Reflection
Directions: In your notebook, journal or portfolio, write your personal insights about
the lesson by completing the following statements.

✓ I understand that ___________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I need to improve on ________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I realize that ______________________________________________________

_________________________________________________________________
_________________________________________________________________

Answer Keys
 1. -

References
For educational purposes only; All rights reserved for rightful owners:
Empowerment Technologies by Innovative Training Works, Inc. and Rex Bookstore ISBN 978-971-23-7830-0, page 101
IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT by Mr. Teodoro R. Llanes II
https://www.google.com/search?q=covid+philippines&client=opera&hl=en&sxsrf=ALeKk016Imhhq_SnUZtHeBWDI_TJ4
BJYVg:1592524351137&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjOmvvBx4zqAhWYQN4KHc2wCMw
Q_AUoAnoECCEQBA&biw=1326&bih=627#imgrc=dSiYUwEbrohD6M
EmTech TG, page 27
 Quarter 1 – Module 4:
Online Platforms as Tools for ICT
Content Development

This module was designed and written with you in mind. It is here to help you master the
Empowerment Technologies. The scope of this module permits it to be used in many different learning
situations. The language used recognizes the diverse vocabulary level of students. The lessons are
arranged to follow the standard sequence of the course. But the order in which you read
them can be changed to correspond with the textbook you are now using.

The module covers:

 Online Platforms as Tools for ICT Content Development

After going through this module, you are expected to:

 evaluate existing online creation tools, platforms and applications in developing

ICT content for specific professional tracks
 apply web design principles and elements using online creation tools, platforms,
and applications to communicate a message for a specific purpose in specific
professional tracks
 create an original or derivative ICT content using online creation tools, platforms,
and applications to effectively communicate messages related to specific
professional track


What I Know

Multiple choice: Write the letter of the correct answer on the provided Learning Activity Sheet
(LAS)
1. It is a base of technologies designed to run within an online environment and provides interactive
online services.
 a) File Management
b) online platform
c) Mapping
d) Web Page Creation
2. This is an online platform that allows you to present and share presentations, infographics
and videos with other people.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
3. This is an online platform that lets you build a web page that includes colors, text, images, and
often contain links to media such as video and audio. The platform does not require any web
programming skill as they provide a drag and drop interface and free hosting as well.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
4. The information shared can be in the form of ideas, pictures, videos or anything that you want to
create and share to the virtual communities. The information you share will be the basis of the
people to interact, share content and collaborate with you and the large group of people.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
5. Is a platform often referred to simply as “the cloud”. In other words, instead of using
your computer’s hard drive, you store and access your data and programs over the
Internet.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
6. This is an online platform that allows you to convert and manage files like images, video,
documents, audio and more to other formats without downloading software tool.
a) Presentation or Visualization
b) File Management
c) Social Media
d) Cloud Computing
7. In this kind of platform, no coding skills are required. Instead, you manipulate with
design components using an editor window and get the chance to choose what elements
are placed on your page.
a) Web Templates
b) WYSIWYG
c) Social Media
d) Mapping
8. Are unique full page layout that contains generic information which can be replaced by the users
with their own personal information.
a) Web Templates
b) WYSIWYG
c) Social Media
d) Mapping
9. You can use this to backup your files in the cloud and access them anywhere.
a) Slideshare
b) Wix
c) Google Drive
d) Tumblr
10. You can use this to share text, photos, quotes, links, music, and videos from your browser, phone,
desktop, email or wherever you happen to be. This is a microblogging service that has recently
become a popular social media site.
a) Slideshare
b) Wix
c) Google Drive
d) Tumblr

What’s In

Activity 1: My Thought
Directions. Look at the 2 Signs. Share your thoughts.

Fig 1.iii Fig. 2iv

Guide Questions
1. Which examples would you consider as having a good layout? Explain your answer.
2. Which examples do not have a good layout? Why do you say so? What improvements
can be done to the layout?
3. Who do you think should be the target audience of such materials? Justify how the objects,
images, or text used in the layout cater or do not cater to the target audience.

What’s New

Activity 1: Work with it!!!

Directions. Do what is asked
Guide Questions:
1. Can you recall how do you create your Gmail? Is it simple?
2. What facts do you have about the common requirements in signing-up in
any online platforms?
3. What are the pros of having a Gmail account?
 What is It

Nature and Purposes of Online

Platforms and Applications
What is an Online Platform?v
• An online platform is a base of technologies designed to run within an online
environment and provides interactive online services.
• Online platforms currently include, but are not limited to: Presentation or Visualization, Cloud
Computing, Social Media, Web Page Creation, File Management, and Mapping.
NATURE OF ONLINE PLATFORMS

Presentation or Visualization – this is an online platform that

allows you to present and share presentations, infographics
and videos with other people

• Cloud Computing – dictionary.com defines Cloud

Computing as “Internet-based computing in which large
groups of remote servers are networked so as to allow
sharing of data-processing tasks, centralized data storage,
and online access to computer services or resources”.
• Cloud Computing is a platform often referred to simply as
“the cloud”. In other words, instead of using your
computer’s hard drive, you store and access your data and
programs over the Internet.
• Social Media – dictionary.com also defines Social Media
as “websites and other online means of communication
that are used by large groups of people to share
information and to develop social and professional
contacts”.
• The information shared can be in the form of ideas,
pictures, videos or anything that you want to create and
share to the virtual communities. The information you share
will be the basis of the people to interact, share content and vi
collaborate with you and the large group of people.
• Web Page Creation – this is an online platform that lets
you build a web page that includes colors, text, images,
and often contain links to media such as video and audio.
The platform does not require any web programming skill
as they provide a drag and drop interface and free hosting vii
as well.
 • File Management – this is an online platform that allows
you to convert and manage files like images, video,
documents, audio and more to other formats without
downloading software tool. viii

Basic Web Design Principles and Elements

Platforms and Applications

Basic Web Design Principles

The most important factor in web design is the end user. So, in designing your own web pages,
remember the following principles:
Principle #1: Visual Language
• Use a consistent template on each page with a uniform color scheme.
• Use contrasting colors between text and background (dark over light or vice versa). Create the
most contrast in the area where you want more attention to.
• Avoid too large or too small font size. Avoid too many typefaces too.
• Use common font style to similar items across the web pages.
• Make important links or menus more prominent in terms of color.
• Use high-quality pictures
• Images used should follow the rule of thirds as a rough guideline. “The rule of thirds states
than an image is most pleasing when its subjects or regions are composed along imaginary
lines which divide the image into thirds — both vertically and horizontally.”

http://www.cambridgeincolour.com/tutorials/rule-of-thirds.htm
Principle #2: Balance
• There should be a balance distribution of heavy and light elements on the page.
• Proper alignment of text and images in a web page helps maintain consistency in design.
• Important information is placed near the top.
• The size of a button should be proportional to its expected frequency of use.
• Group similar things together in terms of shape, color or shading.
• Create a pattern which will make your page easier to use, remember and understand
Principle #3: Paradox of Choice
• “Paradox of choice means the more choices you provide, the easier for others to choose
nothing.” Hence, you should eliminate unimportant or distracting menus or options.
• Focus on user needs
• Design around context of the multiuser in a multi-screen and in a multi-device.
Principle #4: Focus on Content
• Know the purpose of your web page so you could match the content with the purpose.
• Content should be spellchecked.
• Content should be organized.
• There should be a clear delivery of content.
• Include images on your content not just pure text.
• Content should be updated. Always add something new to your content. If you have nothing to
add, you can pick some free articles or free e-books at:
http://www.web-source.net/free_articles.htm or
http://www.web-source.net/free_ebooks.htm
• Just make sure to acknowledge the author or include the author’s resource box.
Principle #5: Simplify
• Minimal design does not always mean an effective design. However, when choosing between
simple and the opposite, the former is always a better choice than the latter. Hence, strive to have
a simple design.
• Keep content simple.
• Use minimal animated graphics.
• Maintain a look and feel across all the web pages.
Basic Web Design Elements

Web design elements are building blocks of a webpage. Here are the basic elements that
were handpicked and organized for you to consider in your web design:
Element #1: Illustrations and Styles
• Illustrations include lines, shapes, texture and color which are fundamental elements that should
not be overlooked.
• Lines are used to organize, connect, and separate information and design elements. Combined
with shapes, color, and texture they give us a visual grammar which you can use to communicate.
Element #2: Links
• Links are the most basic interface on web pages. Links should be distinctive in color from other
types of text in a webpage. Keep links and regular text styled consistently to avoid users from
thinking whether or not the text is a link.
• Make sure your links are working.
Element #3: Buttons and Menus
• Just like links, buttons and menus are also essential to web pages and they too need consistent
styles.
• Buttons and menus should be well-organized.
• Button labels and menus should be clear and easy to understand.
Element #4: Images
• Images also aids in communicating your message to the viewers. Aside from being used as fillers,
images also helps in leaving a lasting first impression.
• Use specific images that are related to your content so that it will draw attention not only to the
content but to your web page as a whole.

Web Templates and WYSIWYG Platforms

• WYSIWYG = “what you see is what you get”

• In this kind of platform, no coding skills are required. Instead, you manipulate with design
components using an editor window and get the chance to choose what elements are placed on
your page.
• Web templates are unique full page layout that contains generic information which can be
replaced by the users with their own personal information.
 • Slideshare – you can use this to upload and
share your professional videos and slide
presentations.
• Google Drive – you can use this to backup
your files in the cloud and access them
anywhere. You can also use other
applications of Google along with Google ix
Drive.
• Tumblr – you can use this to share text,
photos, quotes, links, music, and videos
from your browser, phone, desktop, email or
wherever you happen to be. This is a
microblogging service that has recently
become a popular social media site.
• Wix – you can use this to create your web
x
site or mobile site.
GETTING STARTED WITH SLIDESHARE

a. Go to Slideshare by typing
www.slideshare.net in the address bar of
your browser. Slideshare homepage will
appear as shown below.
b. Create your account by clicking Signup.
c. Enter the required data in the page.
d. Click Signup.
e. When the signup is successful, the page
below will be displayed and you’re on your
way to become one of the Sliders.
f. For the meantime, log out to your
SlideShare account by hovering to the face
and then click Logout.
Getting Started with GoogleDrive

If you already have a Gmail account, then you don’t need to create another account since
Google implements a “one Google Account for everything Google”. But if you still don’t have an
account, then follow these steps before you can finally use Google Drive.
a. Go to Google and type www.google.com in the address bar of your browser. The homepage
of Google will appear as shown:
b. Click Sign in.
c. Click Sign in. Login Page will appear as shown below.
d. Click Create account.
e. Fill out your profile information. At the end of the form, do not
forget to click the “I Agree…” check box.
f. Click Next Step.
Welcome Page will appear. This means that you are now ready to use
Google Drive.
In Google Drive, you can create a folder, upload a file, create Google Docs,
Sheets and Slides, and even Google Forms, Drawings and Maps. Before you
can do that, click Google Apps and select Drive
Click New and everything follows.
Google offers other useful applications which can be accessed by clicking Google Apps .
• Play - is the official app store of Google for Android smartphones and tablets.
 • News - is a computer-generated news site of Google whose news is aggregated from sources
all over the world.
• Gmail - is a free, advertising-supported email service provided by Google.
• Calendar - is a time-management web application and mobile app by Google.
• Google+ - is an interest-based social network by Google.
• Translate - is a multilingual service provided by Google to translate text, speech, images, or
real-time video from one language into another.
• Photos - is the newest app of Google which provides a photograph and video sharing and
storage service for Google users.
GETTING STARTED WITH TUMBLR
a. Go to Tumblr by typing www.tumblr.com in the address bar of your browser. The Tumblr
homepage will appear as shown:
b. Click Next.
c. Click I’m not a robot box and then answer what is asked.
d. Welcome page will be displayed. You will be asked to select and follow five blogs to get
started. However, to speed up the process of completing your account, click Skip.
e. You will be asked to verify your email address as shown below. So create a new tab and go to
your gmail account by typing gmail.com in the address bar.
f. Click Sign In.
g. Enter your email and then click Next.
h. Enter your password and then click Sign In.
i. Click Done. Your gmail account will be loaded and a welcome message will appear. Close
the welcome message.
j. In your Inbox, click the message of Tumblr asking for your confirmation.
k. Within the message, click Verify email address.
l. The page below will appear when the verification is successful. Click skip to your web
dashboard.
m. Close the tab and go back to your gmail account. Sign out to your gmail account, close the tab
and then go back to Tumblr.
n. To log out your Tumblr account, click the face account and then click Log out.
GETTING STARTED WITH WIX
a. Go to Wix by typing www.wix.com in the address bar of your browser. Wix homepage will
appear.
b. Click Start Now. Sign In Page will appear
c. If you want to sign in using your social media account on Facebook or Google, click the
corresponding button. However, you can also sign in using your available email. Enter your
email and password and then click Go.
d. Enter your email and password again for verification.
e. Click Go. When successful, a welcome page will appear.
f. Select a category. Customizable templates will be displayed for you to choose from according
to the selected category. If you are not decided on what category to use, choose anything and
the selection can be changed later.
g. Click Go and you’re ready to create your own website.
h. To log out to your Wix account, hover to the arrow beside your username and then click
Logout.

What’s More

Activity 4:
 ACROSS
1.
3.
5. MEDIA
7.
8.
10.

DOWN
2. DRIVE
4.
6.
9.

What I Have Learned

Activity 5: YOUR EXIT TICKET

Directions: Complete the table 321 Exit Ticket by writing what is being asked.
321 EXIT TICKET
Things I learned
3

Things I Found Interesting

2

Questions I still have

1

What I Can Do

Activity 6: Look for the hidden words

 Assessment

Multiple choice: Match column A with the correct answer on column B

COLUMN A COLUMN B
____ 1. This is an online platform that allows you to convert and
manage files like images, video, documents, audio and more a) Tumblr File
to other formats without downloading software tool. Management
____ 2. This is an online platform that allows you to present and share
presentations, infographics and videos with other people.
b) Slideshare
____ 3. The information shared can be in the form of ideas, pictures,
videos or anything that you want to create and share to the
virtual communities. The information you share will be the c) online platform
basis of the people to interact, share content and collaborate
with you and the large group of people.
____ 4. Is a platform often referred to simply as “the cloud”. In other d) Wix
words, instead of using your computer’s hard drive, you
store and access your data and programs over the Internet.
e) Google Drive
____ 5. In this kind of platform, no coding skills are required.
Instead, you manipulate with design components using an
editor window and get the chance to choose what elements f) Web Templates
are placed on your page.
____ 6. Are unique full page layout that contains generic information
g) Social Media
which can be replaced by the users with their own personal
information.
____ 7. You can use this to backup your files in the cloud and access h) Mapping
them anywhere.
____ 8. It is a base of technologies designed to run within an online i) Cloud Computing
environment and provides interactive online services.
____ 9. You can use this to share text, photos, quotes, links, music,
and videos from your browser, phone, desktop, email or
wherever you happen to be. This is a microblogging service
that has recently become a popular social media site.
____ 10. This is an online platform that lets you build a web page that
includes colors, text, images, and often contain links to media
such as video and audio. The platform does not require any
web programming skill as they provide a drag and drop
interface and free hosting as well.
 Reflection

Activity
Directions: In your notebook, journal or portfolio, write your personal
insights about the lesson by completing the following statements.

Reflection
Directions: In your notebook, journal or portfolio, write your personal insights about
the lesson by completing the following statements.

✓ I understand that ___________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I need to improve on ________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I realize that ______________________________________________________

_________________________________________________________________
_________________________________________________________________

Answer Keys

WHAT I KNOW ASSESSMENT

2. File Management A. Web Templates

3. online platform B. online platform
4. Mapping C. Cloud Computing
5. Cloud Computing D. Social Media
6. Social Media E. Slideshare
7. Web Templates F. Wix
8. Slideshare G. Google Drive
9. Wix H. File Management
10. Google Drive I. Tumblr
11. Tumblr J. Mapping

References
For educational purposes only; All rights reserved for rightful owners
Empowerment Technologies by Innovative Training Works, Inc. and Rex Bookstore ISBN 978-971-
23-7830-0
EmTech by Ivy Tarun, ppt presentation
Fig. 1-Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0
Fig. 2-Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0
Image Source: www.openlearning.com
Image Source: www.lgam.info, moziru.com, www.freepik.com, www.barbarahaworthattard.com,
clipartix.com
Image Source: en.newcom-maroc.com
Image Source www.udemy.com
Image Source: www.sitepoint.com
Image Source: twitter.com
Image Source: www.designshock.com
Image Source: webneel.com
Image Source: www.sourcecon.com, itc.ua
Image Source: fontsinuse.com, twitter.com

Google images:
https://www.google.com/search?q=Focus+on+Content%2C+elements+of+design&tbm=isch&ved=2ahUKEwios93s3IzqAhVG1ZQKHe4D
CbEQ2-
cCegQIABAA&oq=Focus+on+Content%2C+elements+of+design&gs_lcp=CgNpbWcQAzIECCMQJ1DRzQNY0c0DYNvYA2gAcAB4AI
ABkQGIAZEBkgEDMC4xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=nRTsXujwOsaq0wTuh6SICw&bih=627&biw=1326&
client=opera&hs=ghT#imgrc=ZilIu0SEXT02KM

https://www.google.com/search?q=Balance%2C+elements+of+design&tbm=isch&ved=2ahUKEwi84KLL24zqAhVvGKYKHcq0BPcQ2-
cCegQIABAA&oq=Balance%2C+elements+of+design&gs_lcp=CgNpbWcQAzICCAAyBggAEAcQHjIGCAAQCBAeMgYIABAIEB4yB
ggAEAgQHlCDXFiDXGDvbGgAcAB4AIAB7wGIAe8BkgEDMi0xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=SxPsXvyOF
u-wmAXK6ZK4Dw&bih=627&biw=1326&client=opera#imgrc=y7jusl4Zd0ANUM

https://www.google.com/search?q=Visual+Language&client=opera&hs=ghT&sxsrf=ALeKk03_jt6kHnfTWSHNT8EdFKSAJsaNSA:15925
29353247&tbm=isch&source=iu&ictx=1&fir=HI3qc3iXa6bkzM%253A%252C87bK2m2fW3IOgM%252C_&vet=1&usg=AI4_-
kTRJ8RXqhEIGFmxXDrOCrM71yfnTw&sa=X&ved=2ahUKEwjV5ZOT2ozqAhVI_GEKHdUDAUkQ_h0wAnoECAUQCA&biw=1326
&bih=627#imgrc=HI3qc3iXa6bkzM:

https://www.google.com/search?q=Simplify%2C+elements+of+design&tbm=isch&ved=2ahUKEwixucjj24zqAhWHzIsBHaaFAuoQ2-
cCegQIABAA&oq=Simplify%2C+elements+of+design&gs_lcp=CgNpbWcQA1CZ8wVYmfMFYMP8BWgAcAB4AIABoAGIAaABkgE
DMC4xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=fhPsXrGCE4eZr7wPpouK0A4&bih=627&biw=1326&client=opera#imgrc
=DvTkfcwYWW1-_M

i
IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT by Mr. Teodoro R. Llanes II
ii
https://www.google.com/search?q=covid+philippines&client=opera&hl=en&sxsrf=ALeKk016Imhhq_SnUZtHeBWDI_TJ4BJYVg:159252435
1137&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjOmvvBx4zqAhWYQN4KHc2wCMwQ_AUoAnoECCEQBA&biw=1326&bih=627#imgrc=d
SiYUwEbrohD6M
iii
Fig. 1-Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0
iv
Fig. 2-Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0
v
EmTech by Ivy Tarun, ppt presentation
vi
Image Source: www.openlearning.com
vii
Image Source: en.newcom-maroc.com
viii
Image Source www.udemy.com
ix
Image Source: www.sourcecon.com, itc.ua
x
Image Source: fontsinuse.com, twitter.com