SENIOR HIGH

SCHOOL

EMPOWERMENT TECHNOLOGIES
First Semester
Quarter 1 – Week 6
Learning Activity Sheets (LAS)

TAGO 2 DISTRICT
Competency:

1. 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 (CS_ICT11/12-ICTPT-Ig-h-10).
2. Create an original or derivative ICT content using online creation tools,
platforms, and applications to effectively communicate messages related
to specific professional track. (CS_ICT11/12-ICTPT-Ig-h-11).

Objectives:
After going through this Learning Activity Sheets, you are expected to:
1. Identify the platforms available for developing web content;
2. Distinguish the principles of design and use a cloud computing (e.g.
google Drive) in saving and sharing images.
3. Develop appreciation of web contents using the principles and
techniques of design through online creation tools, platforms, and
applications to develop ICT content for specific professional tracks.
References

Printed:
• Rex publishing. (2016). Empowerment Technologies (1st ed., pp. 2-15).
Manila. 􀍼 DepEd. (2020). K-12 Most Essential Learning Competencies
with Corresponding Codes [Ebook] (1st ed., pp. 548-551). Manila.
• Retrieved from https://lrmds.
Websites:
• An Introduction to Online Platforms and Their Role in the Digital
Transformation | en | OECD. (2020). Retrieved 11 July 2020, from
https://www.oecd.org/publications/an introduction-to-online-platformsand-
their-role-in-the-digital-transformation-53e5f593- en.htm
I. Remember: To get the most of this Learning Activity Sheets, here are some
reminders for you:
1. Take your time in reading the lessons.
2. Write down points for clarification and discuss this with your teacher.
3. Read the instruction carefully before doing each task.
4. Perform all activities and answer all worksheets.
5. Answer all tests in this module and check your answers to the answer key
found on the self-check part.
6. Have fun while learning with this learning activity sheets. It will totally be of
great use which ever strand you may belong because ICT is for everybody.
Answer the formative test to measure how much you have gained from the
topics.

1
 II. Activity 1.
Directions: Identify the platforms for developing web content. Match
Column A to Column B.

COLUMN A COLUMN B
1. The process of planning and A. File Manager
arranging graphics or text in a page
or book
B. Pictochart
2. Allows you to convert and manage files
without downloading the software tool.
3. Web-based infographic application C. Online Platform
which allows users without intensive
experience as graphic designers to
easily create infographics and visuals D. Google Drive
using themed templates
4. An example of cloud computing through
E. Layout
Google where you can use this to back up
your files in the cloud and access them
anywhere.
5. A base of technologies designed to run
within an online environment and provides
interactive online services.

III. DISCUSSION
Online Platforms for ICT Content Development

Topic outline
• The nature and purposes of online platforms and applications
• Different types of Online Platforms
• Presentation/Visualization
• Cloud Computing
• Social Media
• File Management
• Mapping
• Web Page Creation
• Basic web design principles and elements
 The Nature and Purpose of
Online platforms and applications

What is online platforms

• 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
• File Management
• Mapping
• Web Page Creation

Presentation/visualization

• Allows you to present and share

presentations, info graphics and videos with
other people.

• Use to communicate information clearly and

efficiently.
 Cloud Computing

What is the cloud? You may have heard

people using terms like the cloud, cloud
computing, or cloud storage. But what exactly
is the cloud? Simply put, the cloud is the
Internet—more specifically, it's all of the
things you can access remotely over the
Internet. When something is in the cloud, it
means it's stored on Internet servers instead
of your computer's hard drive.

File management

• The storing, naming, sorting and handling of

computer files
• Allows you to convert and manage files
without downloading the software tool.

Mapping

• A transformation taking the points of one space into

the points of the same or another
space.
• Uses GPS to detect location and used for
navigation.

Web Page Creation

• Encompasses a number of important
elements including color, layout, and overall
graphical appearance.
• The platform does not require any web
programming skill they provide a drag and
drop interface and free hosting as well.
BASIC WEB DESIGN PRINCIPLES AND ELEMENTS

Layout is the process of planning and arranging graphics or text in a

page or book. A good layout should have a balanced make up and
alignment of elements.

Basic Principles of Graphics and Layout

1. Symmetrical: There should be equal weights or elements on both
sides of the page.

2. Asymmetrical: It may be asymmetrical when there is an artistic

and different intensity on one side of the page.

3. Text: It should be: • Legible • Has appropriate font face • Left

justified, right justified, or centered • The flow of text should be
easy to read.
4. Image: The image should be: • Proportionate • Sharp in color •
With high resolution • With appropriate captions.

5. Proximity and Harmony: The elements should be close together

and scattered and arranged apart from each other. Elements
should not be cluttered and not compete with each other.

6. Consistency: There should be uniformity of theme on each

page.

7. Color and Shape: Use color to create interest by providing variety in

the design (color contrast and shapes).
 8. Emphasis: There should be one point of interest in a page. The
elements to be emphasized should have a different size, color,
shape, or background.

IMAGES
• Images also aids in communicating your message to the viewers. Aside
from being used as fillers, images also help 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.

Creating Infographics Using Piktochart

Piktochart is a web-based infographic application which allows

users without intensive experience as graphic designers to easily create
infographics and visuals using themed templates. Let us create an
infographic using piktochart.com

Once you have created your account and logged in, click
infographics then select a template.
The Piktochart editor will open (may take a while to load depending on
your internet connection). You can now edit the template.

ONLINE CREATION TOOLS

• Slide share – you can use this to upload
and share your professional videos and slide
presentations.
• Google Drive – you can use this to back up
your files in the cloud and access them
anywhere. You can also use other
applications of Google along with Google
Drive.
• Tumblr – you can use this to share text,
photos, quotes, music, and videos from your
browser, phone, desktop, email or wherever
you happen to be. This is a micro
blogging service that has recently become a
popular social media site.
• Wix – you can use this to create your web
site or mobile site.
Google application
Bundle & useful apps
• My Account – gives you an access to your Google account settings and
tools.
• Search – is a web search engine of Google that allows you to find anything
you can think of.
• Maps – is a desktop web mapping service of Google that provides
information about geographical areas around the world.
• YouTube - is a video-sharing website of Google.
• Play - is the official app store of Google for Android smartphones and
tablets.
• News - is a computer-generated news site of Google whose news
aggregated from sources all over the world.
• Gmail - is a free, advertising supported email service provided by Google.
• Calendar - a time management web application 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.
Google file creation
Word, spread sheet & presentation
• Google Docs is a web word processing application of Google which allows
you to create web-based documents with its smart editing and styling
tools.

• Google Sheets is a web spread sheet application of Google.

• Google Slides is a web presentation application of Google.

IV. Activity 2
DIRECTIONS: Take photos using your cellphones that follow the 8 principles
of design and layout or you can search on the internet but you have to attach
the URL or cited sources. Save the images to your Google Drive of your email
account. Share it to the Gmail account of your teacher.

Note: If you don’t have an active Gmail Account, use social media such as
Facebook in sharing your images with indicated labels.
V. Activity 3
Directions: Choose only one desired output based on the SHS Track you
belong. These may be in the form of, but not limited to:
➢ Team/ athlete/ league recruitment posters (Sports)
➢ Logo or crest for a community, school organization or barkada
(Arts)
➢ Labeling for tools and equipment (Tech-Voc)
➢ Presentation of cafeteria patronage data (Business/ Academic)
Rubric

CATEGORY 4 3 2 1

The output All required All but 1 of the Several required

includes all elements are required elements were
required included on the elements are missing.
Required elements as output. included on the
well as
Elements output.
additional
information.
Graphics - All graphics All graphics are All graphics Graphics donot
Relevance are related to related to the relate to the relate tothe
the topic and topicand most topicand some topic.
make it easier make it easier make iteasier
to understand. to to
understand. understand.

Layout and The output s i The output s i The output s

i The output s i
design exceptionally attractive in acceptably distractingly
attractive in termsof attractive messy or very
terms of design, design, layout, thoughit may poorly
designed. It is
layout, and and neatness. be a bit messy.
not attractive.
neatness.

VI. Self-Check

Activity 1:
1. E
2. A
3. B
4. D
5. C
Activity 2: Answers may vary
Activity 3: Answers may vary
VII. Formative Test
Directions: Read each item carefully and choose the letter of the correct
answer. Write your answer on a separate sheet of paper.
1. The elements should not be cluttered and not compete with
each other.
A. Proximity and harmony
B. Emphasis
C. Asymmetrical
D. Consistency
2. It is a web-based infographic application which allows
users without intensive experience as graphic
designers to easily create infographics and visuals
using themed templates.
A. Adobe Photoshop
B. Photobucket
C. Piktochart
D. PhotoScape

3. Allows you to convert and manage files without downloading the software
tool.
A. Google Map
B. File Manager
C. Prezi
D. Cloud Computing
4. The following are the principles of layout and design EXCEPT:
A. Emphasis
B. Consistency
C. Symmetrical
D. Visualization
5. The following are the advantage of Cloud Computing EXCEPT:

A. File sharing
B. File hacking
C. File storage
D. Backing up of data