CEDAR College

National Highway Cadiz City, Negros Occidental

SENIOR HIGH SCHOOL DEPARTMENT
EMPOWERMENT TECHNOLOGIES
LESSON PLAN
Teacher: John Dave A. Barilea
Date: January 3, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the basic principles of graphics and layout; and
2. Describe and elaborate every principle involved of graphics and layout design.
II. Subject Matter
A. Topic: Imaging and Design for Online Environment
B. References: Empowerment Technologies Innovative Training Works, Inc.
p. 103-105
III. Procedure
A. Drill/Review:
1. Students will take a pre-test in order to determine how much they know about
advanced processing tools using various software applications of Microsoft Office
which includes the following but not limited to: Microsoft Word, Microsoft Excel
and Microsoft PowerPoint.
B. Activity
1. Discuss the topics about the basic principles of graphics and layout.
C. Analysis
Ask the students what are the different principles involved in graphics and layout.
1. What are the basic principles of graphics and layout? Give six (6) of them.
D. Abstraction
Make a generalization about the basic principles of graphics and layout.
1. What is Balance?
2. What is Emphasis?
3. What is Movement?
4. What is Pattern/Repetition/Rhythm?
5. What is Proportion?
6. What is Variety?
E. Application
Ask the students with their opinions regarding with the concepts of visual graphics and
layout.
1. Why is it that the elements of the webpage should be properly balanced?
2. Why do some elements need to attract the viewer’s attention?
3. Why is there a need to guide the viewer’s eyes around the screen?
4. Why is there a need that the elements should be well-organized in the screen?
5. Why does one element need to have a relation with another element?
6. How does the webpage vary their design in order to draw attention?
F. Evaluation
Provide a group activity to differentiate the principles of graphics and layout.
Directions: Create a table with four (4) columns. Identify the properties of every
principle of graphics and layout. Answer the questions per column.
What is the difference of What is the difference of Define Define
Balance and Emphasis? Movement and Pattern? Proportion. Variety.
Date: January 4-5, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the concepts of infographics and its use in online imaging;
2. Understand the use and features of Piktochart; and
3. Create a simple infographic using Piktochart.
II. Subject Matter
A. Topic: Creating Infographics Using Piktochart
B. References: Empowerment Technologies Innovative Training Works, Inc.
p. 105-108
http://www.piktochart.com
C. Materials: LCD monitor, HDMI/VGA cable, PC, Internet device (i.e. broadband)
III. Procedure
A. Drill/Review:
1. Students will take a pre-test about the basic principles of graphics and layout.
B. Activity
1. Discuss the topics about the fundamental concepts of infographics.
2. Discuss and demonstrate the use and features of Piktochart
C. Analysis
Ask the students about the principles of using infographics and the use and features of the
infographic software.
1. __________ is a material used to represent information, statistical data, or knowledge
in a graphical manner.
2. Infographics is actually a shortcut term for __________.
3. It is a web-based software application used in creating infographics.
D. Abstraction
Make a generalization about the steps in creating infographics using Piktochart.
1. Let us define the steps in creating infographics using Piktochart.
a. Go to Piktochart by going to the link: __________.
b. Sign Up the page by filling up the information. Alternatively, you can
connect a Piktochart account using _____ and _____.
c. Select a template you want for your infographic. Hover under _____, and
then select _____.
d. The Piktochart editor will open. The template consists of various _____.
e. To save your work, click on ___. To get a copy of the picture, click on ____.
E. Application
Ask the students regarding with the uses of infographics in the business field.
1. Why is there a significance of using infographics? Can this be used in the business?
2. Can you cite examples of infographics that can be found around various places?
F. Evaluation
Provide a seatwork activity to enumerate the features of Piktochart.
Directions: Get a short-sized bond paper. Draw the interface of Piktochart editor.
There are six (6) various tools in Piktochart. Give the description of each
of the tools at the back of the paper.
G. Assignment
With the procedure already provided in creating a simple infographic using Piktochart,
the students will form a group and create a simple infographics with the design and
concept of their choice.
Directions: Form a group. Access the Internet and go to link www.piktochart.com.
Create a simple infographic using the Piktochart editor. Export the
infographic as an image and upload it via Facebook. Post the image and
provide the description of your infographic. List all the members of your
group. Append your post with the Hashtag #emptechinfo.
Date: January 10-11, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand and use several file formats used on the Web;
2. Learn the principles and techniques of image manipulation; and
3. Easily manipulate images using PhotoScape.
II. Subject Matter
A. Topic: Principles of Image Manipulation and Online Image File Formats
B. References: Empowerment Technologies Innovative Training Works, Inc.
p. 109-115
C. Materials: LCD monitor, HDMI/VGA cable, PC, PhotoScape (free software)
III. Procedure
A. Drill/Review:
1. Students will take a short review about the concepts and use of infographics, as well
as creating infographics using Piktochart.
B. Activity
1. Discuss the topics about the different image file formats used in the Internet.
2. Discuss the concepts of image manipulation using PhotoScape.
C. Analysis
Ask the students about the differences of online image file formats and the principles of
image manipulation.
1. What is the difference of JPG and GIF images in terms of image texture?
2. What are the image file formats that support transparency?
3. What are the image file formats that support animation?
4. What are the tips to help in editing images for a website? Give three (3) of them.
5. It is an easy photo editing software that enables you to fix and enhance photos. What
is the name of this software?
D. Abstraction
Make a generalization about the steps in editing images using PhotoScape.
1. Let us define the steps in editing images using PhotoScape.
a. Open PhotoScape, to edit photos, select on _______.
b. Choose the folder where the image you want to manipulate is located. The
file explorer can be found on the __________.
c. Select the image you want to use. This can be found on the __________.
d. Manipulate the images using the tools on the __________.
e. Once done, click on _______.
E. Application
Ask the students regarding with the importance of image manipulation in business.
1. Where do you usually see transactions that involve image editing?
2. Do you see any printed works (billboard, flyers, brochure, etc.) that uses image
editing?
3. What is the significance of other features for image manipulation in PhotoScape?
F. Evaluation
Provide a group activity where the students will have a chance in performing a hands-on
activity in image manipulation using PhotoScape.
Directions: Form a group. Pick one (1) volunteer to perform the task on the computer
using PhotoScape. Each group must perform one of the following tasks
using any picture of their choice:
a. Make the image appear black and white.
b. Apply the image some glitter and sparkle.
c. Censor some part of the image.
Date: January 12, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the basic concepts of describing image quality;
2. Learn about dome examples of images that exhibit good image quality; and
3. Learn the various tips and techniques of combining text with images.
II. Subject Matter
A. Topic: Combining Text and Images
B. References: https://www.sitepoint.com/3-ways-combine-text-images/
III. Procedure
A. Drill/Review:
1. Students will take a short review about the principles of image manipulation using
PhotoScape.
B. Activity
1. Discuss the topics about the principles and techniques of combining text and images.
C. Analysis
Ask the students about some basic principles of text and image integration.
1. What are some examples of images that incorporate good image quality? Give three
(3) of them.
2. What are the different ways of combining text and images? Give three (3) of them.
3. Can anyone provide the other tips in combining text and images?
D. Abstraction
Make a generalization about understanding the techniques of combining text and images.
1. Provide a solution to the following situations regarding
combining text and images.
a. The text is difficult to read and is placed on
the flower. The contrast between the white
color of the text and the lightest shades with
the flower prevents the eyes from effortlessly
distinguish the letterforms. How do you
resolve this?

b. The position (in addition to a bad choice of the

color, of course) detracts from the rendering of
the image. The color — probably too similar
to the ground tone — and the position of the
text at the bottom, constitutes two choices that
have a negative impact on users’ eye.

c. The text is placed on the focus section of the

image. However, it distracts the viewer
whether the priority is on the text or on the
image.

E. Application
Ask the students regarding with the importance of the techniques in combining text and
images.
1. Why is it important to know the principles of combining text and images?
2. Why is image quality a crucial factor for high quality images in photography?
F. Evaluation
Provide an activity for students to state their opinions about combining text and images.
 Directions: Answer the following question on a one half (1/2) sheet of yellow pad.
In your own opinion, what are your guidelines of having a very good image?
Date: January 16-17, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the principles of sharing photos over the Internet;
2. Learn the basic definition and features of image hosting; and
3. Upload and share images using Photobucket.
II. Subject Matter
A. Topic: Principles of Image Hosting
D. References: Empowerment Technologies Innovative Training Works, Inc.
p. 115-117
http://www.photobucket.com
B. Materials: LCD monitor, HDMI/VGA cable, PC, Internet device (i.e. broadband)
III. Procedure
A. Drill/Review:
1. Students will take a short review about the principles of combining images and text.
B. Activity
1. Discuss the topics about image hosting and sharing photos over the Internet.
2. Discuss the concepts of uploading pictures using Photobucket.
C. Analysis
Ask the students about the use and features of image hosting.
1. What is image hosting?
2. __________ is a free image hosting site that allows sharing photos over the Internet.
It is one of the oldest image hosting sites ever been used.
D. Abstraction
Make a generalization about uploading and sharing using Photobucket.
1. In a one half (1/2) sheet of yellow pad, enumerate the steps in uploading and sharing
images using Photobucket as the application software for image hosting.
E. Application
Ask the students regarding with the importance of the techniques in combining text and
images.
1. Why is it that sharing images has never been so easy using social media?
2. What are the advantages and benefits of using image hosts on the Internet?
F. Evaluation
Provide a group activity for the students to be familiarized with different application
software used in visual graphics and online imaging using social media.
Directions: Get a short-sized bond paper. Divide the paper in three columns. On each
column, enumerate all of the uses of the particular software application
on the following list:
i. Piktochart
ii. PhotoScape
iii. Photobucket
G. Assignment
The students will have to upload a sample picture using Photobucket as the image host
for the files. Once their photos are uploaded on the storage in the said application, they
will be sharing it on Facebook using the steps provided in the discussion.
Directions: Access the Facebook and Photobucket accounts. Follow the steps:
1.) Using Photobucket, upload at least two pictures. Complete
the steps provided in uploading and sharing pictures using
Photobucket in the discussion.
2.) Upon the last step, share the picture on Facebook with the
hashtag #emptechimghost appended on the description.
Date: January 18-19, 2017

Note: 3rd Quarter Examination

Students in Senior High School Department are taking examination tests on all subjects
for the 3rd Quarter Period.
Date: January 23-25, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the purpose of online platforms and know the basics of using them; and
2. Enhance the knowledge in the world of cloud computing.
II. Subject Matter
A. Topic: Online Platforms for ICT Content Development
B. References: Empowerment Technologies Innovative Training Works, Inc.
p. 127-134
http://www.wordpress.com
C. Materials: LCD monitor, HDMI/VGA cable, PC, Internet device (i.e. broadband)
III. Procedure
A. Drill/Review:
1. Students will take a short review about the concepts of image hosting and uploading
and sharing picture over the Internet using Photobucket.
B. Activity
1. Discuss the topics about content management system.
2. Discuss the concepts of creating a blog using WordPress.
3. Discuss the basic principles of cloud computing.
C. Analysis
Ask the students about the use and features of content management system and cloud
computing.
1. What is a content management system?
2. What is a blog? What is blogging? What is a blogger?
3. What is a blogosphere?
4. _______ is reportedly the easiest and most popular website management or blogging
system in use on the Web, supporting more than 60 million websites. It is a free and
open-source content management system.
5. What is cloud computing?
D. Abstraction
Make a generalization about creating a blog using WordPress.
1. How do you create a simple blog using WordPress? Enumerate the steps.
E. Application
Ask the students regarding with the importance of blogs in social media.
1. What are the major contributions of blog in an online community?
2. Is the content management system sufficient to build and construct an effective blog?
Provide an explanation.
3. How is cloud computing helpful in the online community?
F. Evaluation
Provide a group activity for the students to construct a blog system using their own
creativity. They will be choosing a concept of their choice in creating a simple blog.
Directions: Get a short-sized bond paper. Make an organizational chart for at least
three (3) blogs with each various concept of your choice. Provide what
posts are to be contained on each provided blog.

<blog name> <blog name> <blog name>

<post> <post> <post> <post> <post> <post> <post>

Date: January 26-27&31, 2017
I. Objectives
At the end of this lesson, the students should be able to:
1. Understand the basic principles of web page designing; and
2. Know the important elements that enhance the impact of basic web design.
II. Subject Matter
A. Topic: Basic Web Design Principles and Element
B. References: https://conversionxl.com/8-universal-web-design-principles-you-should-
to-know/
III. Procedure
A. Drill/Review:
1. Students will take a short review about the concepts of content management system
and cloud computing.
B. Activity
1. Discuss the topics about the basic web design principles and its elements.
C. Analysis
Ask the students about the topics regarding the basic web design principles.
1. What is visual hierarchy?
2. What is divine proportion?
3. What is Hick’s law?
4. What is Fitt’s law?
5. What is the Rule of Thirds?
6. What is the Gestalt law?
7. What is white space?
8. What is Occam’s razor?
D. Abstraction
Make a generalization about the topics regarding the basic web design principles.
1. It is a magical number 1.618 (φ) that makes all things proportioned to it aesthetically
pleasing.
2. It is the space between graphics, margins, space between columns or any visuals. It is
also the portion of a page left empty.
3. Who can give examples of websites that incorporate any of the basic web design
principles?
E. Application
Ask the students regarding with the importance of the basic web design principles.
1. How can the basic web design principles help enhance the impact of a web page?
F. Evaluation
Provide a group activity for the students to visualize the basic web design principles
using their own creativity and skills.
Directions: Get a short-sized bond paper. Make a rough sketch of a webpage of any
structure and content you want. The webpage drawing must constitute
one of the basic web design principles discussed earlier. On the back of
the paper, describe what web design principle is being used. Explain and
elaborate the details.