(For G4 to G12)

TECHNICAL VOCATIONAL LIVELIHOOD

ACTIVITY SHEET 1

BRIEF INTRODUCTION

Hello guys! We are half-way done with our subject Empowerment Technologies. Last

quarter we have tackled about the different softwares like MS Word, MS Excel and different

imaging software that allows you to perform your task easily. For the second quarter, we will

cover the different online platforms that you can use to easily develop and create materials

electronically, web design principles and HTML tags. At the end of the quarter you are

expected to create a storyboard of your project with HTML tags. Are you ready? For our first

lesson, we will discuss the different online platforms for ICT content development. I hope

you are all excited as we start working on this module. Your task is to identify what

appropriate online platform is needed for a certain content.

Objectives

At the end of this module, you are expected to:

1. Differentiate the platforms available for developing web content.

2. Identify the purpose of these platforms and know the basics of using those.

Learning Competencies (Essential Competencies)

Evaluate existing online creation tools, platforms and applications in developing ICT

content for specific professional tracks.

Let’s Recall (Review)

Can you find the following terminologies in the given word search puzzle below?

Cloud
Facebook
Twitter
Instagram
Webpage
Prezi
Weebly
Wix
Dropbox
Evernote

Let’s Understand (Study the Concept)

To start with this module, let us first understand what online platform is. Online platform is

a base of technologies designed to run within an online environment and provides an

interactive online services. Online platforms have revolutionized access to any information.

In our daily life today we used Internet in doing such things and in our learning purposes.

Examples of online platform and application

• Presentation Software: Allows you to present and share presentations, infographics

and videos with other people. Use to communicate information clearly and efficiently.
• Cloud computing: Simply refers as “The cloud”, which can be access anytime,

anywhere. The practice of using a network of remote servers hosted on the internet.

Instead of using your computer’s hard drive, you store and access your data and

programs over the Internet.

• Social Media: Computer-mediated tools that allow group of people to create, share

or exchange information. The information shared can in the form of ideas, pictures,

videos or anything that you want to create and share to virtual communities.

• File management: It is a computer program that provide a user interface to manage

and convert file and folder without downloading the software tool.

• Mapping: A transformation taking the points of one space into the

points of the same or another space. Uses Global Positioning

System (GPS) to detect location and used for navigation.

 • Web page creation: Platform does not require any web programming skill they

provide a drag and drop interface and free hosting as well. It is document that is

suitable for the World Wide Web and Web browser. It is also written in HTML or

comparable mark-up language.

Web Design Elements

• 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 use a visual grammar which you can use to communicate.

• 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.

• Buttons and menus: 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.

• Images: Images also aid 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 Design Principles
• Website Purpose: Website needs to accommodate the needs of the user. Having a
simple clear intention on all pages will help the user interact with what you have to
offer.
• Simplicity: It is the best way to go when considering the user experience and the
usability of your website. Below are ways to achieve simplicity through design:
Color Type Imagery
Color has the power to Typography has an Imagery is every visual
communicate messages important role to play on aspect used within
and evoke emotional your website. It communications. This
responses. Keep the color commands attention and includes still photography,
selection limited to less works as the visual illustration, video and all
than 5 colors. interpretation of the forms of graphics.
Complementary colors brands voice. Typefaces
work very well. Pleasing should be legible and only
color combinations use a maximum of 3
increase customer different fonts on the
engagement and make the website.
user feel good.

• Navigation: Navigation is the way finding system used on websites where visitors
interact and find what they are looking for. Website navigation is key to retaining
visitors. If the websites navigation is confusing visitors will give up and find what they
need elsewhere. Keeping navigation simple, intuitive and consistent on every page is
key.
• F-shaped Pattern Reading: The F- based pattern is the most common way visitors
scan text on a website. Eye tracking studies have found that most of what people
see is on the top and left area of the screen. The F’ shaped layout mimics our natural
pattern of reading in the West. An effective designed website will work with a
readers’ natural pattern of scanning the page.
• Visual Hierarchy: Visual hierarchy is the arrangement of elements is in order of
importance. This is done either by size, color, imagery, contrast, typographically,
whitespace, texture and style. One of the most important functions of visual hierarchy
is to establish a focal point; this shows visitors where the most important information
is.
• Content: An effective web design has both great design and great content. Using
compelling language great content can attract and influence visitors.
• Grid Based Layout: Grids help to structure your design and keep your content
organized. The grid helps to align elements on the page and keep it clean.
• Load Time: Waiting for a website to load will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less and they will potentially leave a site.
Optimizing image sizes will help load your site faster.
• Mobile Friendly: More people are using their phones or other devices to browse the
web. It is important to consider building your website with a responsive layout where
your website can adjust to different screens.
Let’s Apply
DIRECTION: Enumerate the following:
1. 5 Examples of online platform and application
2. 3 Ways to achieve simplicity through design
3. 4 Web design elements

Let’s Analyze

DIRECTION: Match column A with column B. Write your answer before the number.

A B

a. These are the most basic interface on web pages

1. Type b. It is a computer program that provide a user
interface to manage and convert file and folder
2. Mobile friendly without downloading the software tool.
c. Simply refers as “The cloud”.
3. Simplicity
d. It aids in communicating your message to the
4. Visual Hierarchy viewers.
e. It helps to structure your design and keep your
5. Presentation software content organized.
f. Allows you to present and share presentations,
6. Grid based layout infographics and videos with other people.
g. It is the arrangement of elements is order of
7. images
importance.
8. Cloud computing h. It is the best way to go when considering the user
experience and the usability of your website.
9. File management i. It is important to consider building your website
with a responsive layout where your website can
10. Links
adjust to different screens.
j. It commands attention and works as the visual
interpretation of the brands voice.
Let’s Try (Evaluation)

DIRECTION: Write the word True if the given statement is correct, otherwise write the word
False and underline the word/s that makes the statement incorrect.

1. Imagery is every visual aspect used within communications.

2. Waiting for a website to load will lose visitors.
3. Navigation is the way finding system used on websites where visitors interact and find
what they are looking for
4. One of the most important functions of grid based layout is to establish a focal point;
this shows visitors where the most important information.
5. Imagery has the power to communicate messages and evoke emotional responses.

6. The F’ shaped layout mimics our natural pattern of reading in the North.

7. Typefaces should be legible and only use a maximum of 5 different fonts on the
website.
8. Color includes still photography, illustration, video and all forms of graphics.

9. Keep links and regular text styled consistently to avoid users from thinking whether or
not the text is a link
10. Optimizing image sizes will help load the website faster

Let’s Create

DIRECTION: Create a sample layout of a webpage about yourself. Use bond paper and
coloring materials to do the task. The layout should manifest the principles discussed in this
module. The rubric below will be used to evaluate your output. You may use bond paper and
other coloring materials to do the task.

Criteria Points

Creativity

The elements used to execute the idea are attractive and appealing. 4 points

The elements used to execute the idea are somehow attractive and 3 points
appealing.

The elements used to execute the idea are not appropriate to the concept. 1 point
Knowledge on the concept

The output showcased more than 5 principles of web designing. 4 points

The output showcased 3 or more principles of web designing. 3 points

The output showcased less than 3 principles of web designing. 1 point

Content

The page has a well stated clear purpose and theme that is carried out 2 points
throughout the site.

The site lacks a purpose and theme. 1 point

TOTAL 10 points