11

Empowerment
Technologies
Quarter 1–Module 11
Imaging Design for Online Environment

Development Team of the Module

Writer: John Michael Dela Cruz

Editor: Rolylyn H. Dado
Reviewer: Ann Marjorie V. Pico
Illustrator: Jayson A. Gatbonton
Layout Artist: Froilan G. Isip

Management Team Zenia G. Mostoles EdD, CESO V, SDS

Leonardo C. Canlas EdD CESE, ASDS
Rowena T. Quiambao CESE, ASDS
Celia R. Lacanlale PhD, CID Chief
Arceli S. Lopez PhD, SGOD Chief
June D. Cunanan EPS- English
Ruby M. Jimenez PhD, EPS-LRMDS

Published by the Department of Education, Schools Division of Pampanga

Office Address: High School Boulevard, Brgy. Lourdes,
City of San Fernando, Pampanga
Telephone No: (045) 435-2728
E-mail Address: pampanga@[Link]
Introductory Message
For the Facilitator:

Welcome to the Empowerment Technologies for Grade 11 Alternative Delivery Mode (ADM)
Module on Imaging and Design for Online Environment.

This module was collaboratively designed, developed and reviewed by educators from public
institutions to assist you, the teacher or facilitator in helping the learners meet the standards set
by the K to 12 Curriculum while overcoming their personal, social, and economic constraints in
schooling.

This learning resource hopes to engage the learners into guided and independent learning
activities at their own pace and time. Furthermore, this also aims to help learners acquire the
needed 21st century skills while taking into consideration their needs and circumstances.

As a facilitator you are expected to orient the learners on how to use this module. You also need
to keep track of the learners' progress while allowing them to manage their own learning.
Furthermore, you are expected to encourage and assist the learners as they do the tasks
included in the module.

For the Learner:

Welcome to the Empowerment Technologies for Grade 11 Alternative Delivery Mode (ADM)
Module on Imaging and Design for Online Environment.

With the help of the empowerment technology, the students achieving the maximum viewing
efficiency of a photo is achievable. To realize this goal, the principles of design have been
established. These principles include the balance, contrast, unity, proportion and rhythm. Image
and graphics can change the presentation and appearance of a document and the students
easily attract the reader in making online platform. In this module, different elements that should
be taken into consideration are discussed. The students learned about the creating and editing
images and surely encounter the need to save the product in a storage device. Image files can
be saved using different file format otherwise the students created images can be shared online
with different users. The facilities that can accommodate uploaded images are called online
image hosting Web sites.

What I Need to Know

In this module, 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, along with how they are used and what purpose they serve. This module also shows
how these types of media or ICT are applied in delivering information in the most effective and
efficient way. Learners will realize that the importance of media relies not only on what is
presented but also on how it is relayed to the audience.

For the learner

Different methods, techniques, and tools for image manipulation were discussed in the previous
module. Creation and manipulation of 3D images was also tackled in the previous module.
These images are used in a variety of ways, from visual aids in word processing and
presentation files, to stand-alone infographics and printed images. Created or modified images
will always be used by certain program by either Web or local application. In this module, a
variety of common programs or platforms that used these images will be discussed.
Furthermore, use of different application platforms and culminate with activities that will help you
learn the details in using them.
At the end of this module, you are expected to:

1. Evaluate existing online creation tools, platforms, and applications in developing ICT
content for specific tracks.
2. Apply Web design principles and element using online creation tools, platforms, and
applications to communicate a message for a specific purpose in specific professional
tracks.
3. Create an original or derivative ICT content using online creation tools, platforms, and
application to effectively communicate message related to specific professional tracks.

What I Know

Read and answer the following questions. Choose the letter of the correct answer. Write your
answers on a separate sheet of paper.

1. What is the popular networking site that makes it easy to connect with your family and
friends? It allow you to share content, news, articles, thoughts, photos, videos, send
messages and so much more?
A. facebook B. Instagram C. tumblr D. twitter
2. Which of the following free video sharing websites that makes it easy to share and watch
videos over the internet?
A. facebook B. google drive C. vimeo D. youtube.
3. If you are going an activity that involves posting your thought, memorabilia, or works in kind
of web log or online library what will you use?
A. blogging B. messaging C. observing D. posting
4. Which of the following is the creation and modification of digital content? It typically supports
multiple users in a collaborative environment?
A. content management system C. online file management system
B. content online viewer D. website management system
5. Which of the following is the base of technologies designed to run within the online
environment and provides interactive online services?
A. facebook
B. network
C. online environment
D. social media

Lesson The principles and techniques of design using

online creation tools, platforms, and
10 applications to develop ICT content for
specific professional tracks.
Nowadays it is so much easier that a high school student with enough creativity could assemble
textual and visual parts that are already interactive and fun to the user. Moreover, websites
have evolved into tools and platforms for discovery, sharing, connection, and co-creation. An
Online Platform then, is a base of technologies designed to run within an online environment
and provides interactive online services. Online platforms nowadays offer varied services which
you can use to develop your own ICT content
 What’s In

Give the name and importance of the following pictures/icons below. Write your answers in your
notebook.

Importance: Importance:
1. 1.
2, 2,
3. 3.
4. 4.
5. 5.
Name: Name:

Importance: Importance:
1. 1.
2, 2,
3. 3.
4. 4.
5. 5.
Name: Name:
Importance: Importance:
1. 1.
2, 2,
3. 3.
4. 4.
5. 5.
Name:
Name:

What’s New

The principles and techniques of design using online creation tools, platforms, and applications
to develop ICT content for specific professional tracks

These principles and design were analysed and combined to produce a creative presentation
that is both reliable and easy to understand. Aside from creating an output, learners were also
guided to be able to critique and evaluate information from all sources, allowing them to
determine its validity.

These concepts are used regularly by online platform help the learner to construct and
manipulate the online website design. The good web design always caters to the needs of the
user. Are your web visitors looking for information, entertainment, some type of interaction, or to
transact with your business? Each page of your website need to have a clear purpose, and fulfil
a specific need for your website users in the most effective way possible. People on the web
tend to want information quickly, so it is important to communicate clearly, and make your
information easy to read and digest. And the picture speaks a thousand words, and choosing
the right images for your website to design it and make it clearly.
 What is It

Discussion of Activity 1
Different design elements and principles are applied strategically on various types of website.
All of these elements and principles work together to give the audience a clear and convincing
message.

Write the importance of every principle and elements of website [Link] your answer on a
separate sheet of paper.

Guide questions:
1. Line - ______________________
2. Color - ______________________
3. Space - ______________________
4. Texture - ______________________
5. Size - ______________________
6. Shape - ______________________
7. Value - ______________________

What’s More

Independent Activity 1
In this activity, you will study some Web pages (shown in screen captures) to evaluate how their
developers applied concepts of Web design. After studying each screen capture, write your
answers to the accompanying questions. The open-ended questions posed in this activity are
intended to promote thoughtful discussion.

A. Study the Animal Planet home page, shown in Figure A1-1.

Figure A1-1: Animal Planet home page

1. Does the design of this Web page convey an appropriate message to users? What
message do you think it conveys? What elements contribute to that message?
 2. This lesson defined the primary goal in Web design as giving users what they want,
instead of what the developer thinks they want. Do you think this page achieves that
goal? Why or why not?

B. Study the Barnes & Noble home page, shown in Figure A1-2. 5. In what ways does this
page present a personalized one-to-one medium instead of a passive, broadcast
medium?

1. In what ways does this page present a personalized one-to-one medium instead of a
passive, broadcast medium?
2. What components on this page, if any, indicate the presence of data-driven content?

C. Study the House of Blues home page, shown in Figure A1-3.

1. Does the design of this Web page convey an appropriate message to users? What
message do you think it conveys? What elements contribute to that message?
2. In what ways does this page present a personalized one-to-one medium instead of a
passive, broadcast medium?
3. This lesson defined the primary goal in Web design as giving users what they want,
instead of what the developer thinks they want. Do you think this page achieves that
goal? Why or why not?

___________________________________________________________________

Effective Web design requires a complex balance of well-planned design, quality content, and
proper use of available media. Giving users what they want can be a straightforward task or a
guessing game, depending on the purpose of the Web site. Remember to take a user's
perspective when you are developing Web sites.

Sample question

Which of the three campaign poster catch your attention? Answer the following questions
regarding your chosen poster. Answer in 1-2 sentences and write your answer in your notebook.

1. Why did you choose that poster?

2. How effective do you think is the message to its target audience?
Independent Assessment 1
In this activity, you will review what you learned in this lesson about HTML by matching words
from the left column to the appropriate definitions in the column. Write the letter of your answers
in your notebook.

A B
1. A language used specifically to define context as opposed to A. HTML
appearance
2. Separate text documents that are linked together in non-linear B. HTML Interpreter
fashion
3. The standards organization that controls the evolution of HTML C. Hyperlink
4. A language used to create documents in which the instructions D. Hyper-Text
and the data reside in the same file
5. A program such as Firefox and Internet Explorer that processes E. Mark-Up Language
and displays Web documents
6. Embedded instructions within a text file that link it to a separate F. Programming
file Language
7. A language used to provide data structures and internal logic G. SGML
8. Special pieces of code, enclosed in angle brackets, that tell the H. Tags
HTML interpreter how to process or display text
9. A language used for both contextual and display formatting of I. World Wide Web
Web documents Consortium (W3C)

Independent Activity 2
Give examples of Web sites and platforms that appeal to you the most. What are the aspects
that you look at to consider them appealing? Evaluate these Web sites based on layout,
graphics, and visual design.

Name:
Activity number:

Independent Assessment 2
In the Independent Activity 2, justify the element and techniques used in the survey you created.
Explain it in 1 to 2 sentences. Write your answer in your notebook.

1. What techniques that you used in this activity?

2. How will compare the Google drive to other online device?
3. Do you think this activity help you to improve your skills in online platform?
Independent Activity 3
Draw the particular area of online platform or social online media and write the every three
functions.

Follow the format below in designing your activity. Use a bond paper to do this.

A. Name: ______________________________________________________
Topic: ______________________________________________________
Audience: ______________________________________________________
Description of Audience: ___________________________________________
Message: ______________________________________________________

B. Script

C. Drawing board
Project Name: Page ___ of ____
By: Date:

Sample:
to search or browse an
information

Independent Assessment 3
From the Independent Activity 3, answer the questions. Explanation should be at least 1 to 2
sentences. Write your answer in your notebook.

Think of your target audience for your chosen topic online platform. Write your thoughts and
questions on a sheet of paper.

1. How would you present the topic to your audience using your own web site
2. What is your message?
3. What do you need to know about your message and your audience?
 What I Have Learned

WYSIWYG in Web site design is acronym for What You See Is What You Get. It is an
application that is used to create a Web Site either online or offline.
Guide questions:

1. What are the advantages of using WYSIWYG applications as compared to offline

development tools? Evaluate both types of Web development applications in terms of
advantages and disadvantages

Here is the format: (write your answer in your notebook)

Advantages Disadvantages

1. 1.
2. 2.
WYSIWYG 3. 3.
4. 4.
5. 5.
What You See Is
What You Get
1. 1.
2. 2.
Offline Development 3. 3.
Tools 4. 4.
5. 5.

2. Cite examples of WYSIWYG applications and possible instances where you can use
them. Explain how these applications can help you.

What I Can Do

Compare a Mapping online application, such as an Access API and Plug-in API, with Platform
categories. What are their differences and similarities?
Copy the table and write your answers in your notebook.

Platform Similarities Differences

1. 1.
Access API 2. 2.
3. 3.
1. 1.
Plug-in API 2. 2.
3. 3.
 Assessment

Read each item carefully and choose the correct answer. Write answers in your notebook.

1. Which of the following is the most basic of all Infographics elements?

A. Colors B. Images C. Lines D. Shapes
2. Which refers to the ideas that describe the natural or normal optical logic of humans?
A. Coherence C. Infographics
B. Design principles D. Unity
3. What types of Web is referred to as the “read and write” Web?
A. Web 1.0 B. Web 1.5 C. Web 2.0 D. Web 3.0
4. What is the solid state equivalent of vacuum tubes?
A. Computer B. Programs C. Telegraphs D. Transistor
5. These types of API run in a remote machine, server, or computer, and the application to
draw data and services.
A. Access API C. Plug-in API
B. Access GUI D. Runtime Environment

Additional Activities

Do the following task:

⮚ In your own opinion, how can these online platforms be used in raising awareness of
important societal and environmental issues for the people
⮚ Take the test and submit your results either through email or printout or screen shots.
⮚ Write a brief evaluation or assessment on the diagnostic exam taken, focusing on the
following:
o The practicality of an online diagnostic exam.
o Interactivity of an online exam
o Other features you would like incorporated, or how it could be improved.
What I Know What's In / What’s New / What Assessment
C is it / What’s More / What I A
B Have Learned / What I Can Do D
A / Additional Activities A
D A
ANSWERS MAY VARY.
A C
Independent assessment 2
A
C
B
E
I
D
F
G
H
Answer Key
References
1. Commission on Higher Education. K to 12 Transition Program Management Unit – Senior High School
Support Team. Empowerment Technology
2. [Link]
3. [Link]
volunteers