Empowerment Technologies 1
1st Semester
Lesson 1
ONLINE PLATFORMS AND SITES
Information and Communications
Technology (ICT)
 Deals with the use of different technologies.
ICT in the Philippines
 “ICT Hub of Asia”
 Internet – global system of interconnected
computer networks
The World Wide Web
 an information system on the Internet that
allows documents to be connected to other
documents by hypertext links
Types of Web Pages
1. Web 1.0 or The Web.
 first stage of the World Wide Web evolution.
 flat or stationary page; cannot be manipulated
by the user.
2. Web 2.0 or The Social Web
 allows users to interact with the page
 Most website that we visit today
3. Web 3.0 or Semantic Web
 Provides a framework that allows data from
the user to be shared and reused.
Figure 1. Comparison of Web 1.0, 2.0, 3.0
Features of Web 2.0
1. Folksonomy – allows users to categorize and
classify/arrange information.
2. Rich User Interface – content is dynamic and
is responsive to user’s input.
3. User Participation – the owner of website is
not the only one who is able to put content.
4. Long Tail – services are offered on demand
rather than on a one-time purchase.
1
Jewel Mave F. Quezon STEM 1-C
 Specially developed platforms with the use of
Internet technology.
1. Presentation or Visualization Platform –
allows you to present and share presentations,
infographics, and videos with other people.
2. Cloud Computing Platform “The Cloud” –
using a network of remote servers on the
internet to store and access your data.
3. File Management Platform – used for
handling computer files without downloading
in the software tool.
4. Mapping Platform – Uses GPS to detect
location and used for navigation.
5. Social Media Platform – computer-mediated
tools that allow large group of people to create
and share anything they want to virtual
communities.
a. Social Networks – sites that allow you to
connect with other people with the same
interests or background.
b. Bookmarking Sites – sites that allow you to
store and manage links to various websites
and resources.
c. Social News – sites that allow users to post
their own news items or links to other news
sources.
d. Media Sharing – sites that allow you to
upload and share media content
e. Microblogging – sites that focus on short
updates from the user. Posts are brief that
range typically from 140 – 200 characters.
f. Blogs and Forums – websites that allow
users to post their content.

Lesson 2
Online Safety, Security and Netiquette
1. Online safety – practices and precautions to
ensure that the users as well as their
computers and personal information are safe
from crimes associated with using the
internet.
2. Netiquette – set of rules for behaving
properly online.
 Flame war – series of flame posts or
messages in a thread that are
considered derogatory in nature or
are completely off-topic.
ONLINE THREATS
 any malicious act that attempts to gain
access to a computer network without
authorization or permission from the
owners.
TYPES OF ONLINE THREATS
1. Phishing – when an email is sent from an
internet criminal disguised as an email from a
legitimate source.
2. Pharming – when a hacker or “pharmer”
directs an internet user to a fake website.
3. Internet Scam – using internet services or
software to defraud or take advantage of
victims for financial gain.
4. Internet robots – automated bots that is
programmed to do certain tasks.
5. Malware or malicious software – any program
or file that is harmful to a computer user.
 ADWARE (advertising supported
software) – unwanted software designed to
throw advertisements up on your screen
 SPYWARE – secretly observes the
computer user’s activities without
permission
2
Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
 Virus and Worms – attach to another
program and replicates itself by modifying
other computer programs and infecting
them with its own bits of code.
 TROJAN, or Trojan horse – one of the
most dangerous malware types. It usually
represents itself as something useful in
order to trick you.
 Ransomware – locks you out of your
device and/or encrypts your files, then
forces you to pay a ransom to get them
back.
6. Spams – unsolicited emails, instant messages
coming from recipients that are not granted
verifiable permission for the message to be
sent.
7. Cyberstalking – use of the internet or other
electronic device to harass or stalk individuals
or organizations.
8. Cyberbullying – act of tormenting, harassing,
or embarrassing another person using the
internet.
9. Spoofing – when someone or something
pretends to be something else to gain our
confidence, get access to our systems, steal
data, steal money, or spread malware.

Lesson 3
Effective Internet Research
Surfing the Net
1. Search Engines – websites used for retrieval
of data, files, or documents from data bases.
Eg: google, bing, etc.
2. Anatomy of a URL – one type of Uniform
Resource Identifier (URI). It is a generic
term for all types of names and addresses on
the world wide web.
Figure 3.1. Anatomy of a URL
Popular Domains
Figure 3.2. Popular Domains
Search Skills and Tools
1. Boolean Logic – narrows, broadens, or
eliminates search term.
a. “or” – include either of the search terms.
b. “and” – retrieve only pages with both terms
c. “not” – pages that do not include search term.
2. Phase Searching – is used to search for famous
quotes, proper names, recommendations, etc. It
encloses the phrase in quotation marks.
Ex: “Jane Doe” “To be or not to be”
3
Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
3. Plus (+) – indicates that the word after the sign
is a required word must be found in search.
Ex: +fire
4. Minus (–) sign – indicates to exclude a word
from your search that is not required on the
result.
Ex: Jaguar speed –car
5. Ampersand (@) – Is used to find social tags.
Example: @SteveJobs
6. Hashtag (#) – is used to find popular hashtags.
Ex: #LawOfClassroom
7. Finding Documents – using the filetype refines
the search for documents on the web.
Ex: ICT in the Philippines pdf
8. Searching Site – the sites find webpage from
a website.
Ex: Australia site: NationalGeographic.com
Evaluating Sites
1. Authority – reveals that the person, institution or
agency responsible for a site has the
qualifications and knowledge to do so.
2. Purpose – some sites are meant to inform,
persuade, state an opinion, entertain, or parody
something or someone.
3. Coverage – refers to how comprehensive the
website is in their discussion of certain
topics.
4. Currency – It refers to:
 how current the information presented is
 how often the site is updated or maintained.
5. Objectivity – present information with a
minimum of bias.
6. Accuracy – It refers to the credibility of the
website.

Lesson 4
Formatting Illustrations:
Productivity Tools
 Also known as productivity software; used to
create and produce professional quality
documents, presentations, databases, and more.
Three basic functions:
 Microsoft Word – writing skills
 Microsoft Excel – numeracy skills
 Microsoft PowerPoint – presentation skills
Advance Techniques in Word Processor
1. Integrating Illustrations in Word Processor –
visualization or drawing. Insert illustrations
easily by using the illustrations group of the
Insert Tab.
Inserting Illustrations:
 Picture from a File
a. Click the area where to insert the picture in
your document.
b. Insert Tab > Illustrations group > Pictures.
Insert picture dialog box will appear.
c. Choose the picture > Insert.
 Shape
a. Insert Tab > Illustrations group > Shapes.
b. Click the shape and click the area in the
document were the shape will be placed.
 SmartArt
a. Insert Tab > Illustrations group > SmartArt.
A dialog box will appear. Select from the
list of SmartArt and click OK.
 Chart
a. Click in the document where the Chart is to
be placed.
b. Insert Tab > Illustrations group > Chart. A
dialog box will appear. Select the type of
chart and click OK. MS Excel window will
appear with the chart.
c. Edit the data in MS Excel window. You
can close Excel after editing the chart.
4
Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
 Resizing Illustrations
a. Click the image and sizing handles will
appear. Click and drag any of the sizing
handles.
 Format Pictures and Clip art
a. Select the picture to format. A Format tab of
the Picture Tools will appear.
1. Corrections
2. Color
3. Artistic Effects
4. Picture Styles, Border, and Effects
 Format Shapes
a. Click the shape. Format Tab of the Drawing
Tool will appear.
1. Shape Styles
2. Shape Fill, Outline, and Effects
 Format Chart
a. Select the chart to format. Design, Layout,
and Format tabs of the Chart Tools will
appear
b. To edit the data, click Edit Data of the Data
group under the Design tab. An MS Excel
window will appear. Edit the data. Close this
window as soon as done.
c. To add labels, go to the Layout tab and click
the appropriate button in the Labels group.
Advance Techniques in PowerPoint
 Animations
a. Animations Tab > Add Animations. There
are choices of various animation types for
entrance, emphasis, exit and motion paths.
 Hyperlink – text or image on the screen used
to jump to another file or within the existing
file.
a. Click the word or the image > Insert tab
> Hyperlink or Link.
b. Click on the choices on where to link the
image or the word. Click OK.

Advance Techniques in Excel
 Complex formula is the combination of more
than two simple formulas.
 Excel has the ability to calculate complex
formulas. There are four basic computation uses
in excel. Namely addition, subtraction,
multiplication, and division.
 Relative Reference
 All cell references
 When copied across multiple cells, they
change based on the relative position of
rows and columns.
 Absolute Reference
 Cell references that do not change when
copied or filled.
 Used to keep a row and/or column constant.
 Made constant by inserting $ sign in
between or before the row and column.
 Functions
 Predefined formula that performs
calculations using specific values in a
particular order.
Parts of a Function
5
Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
Lesson 5
IMAGING AND DESIGN FOR
ONLINE ENVIRONMENT
Images
 Representation of the external form of a
person or thing in art.
 2-dimensional – photograph or screen display.
 3-dimensional – statue or hologram.
Graphic
 Visual images or designs on some surface,
such as a wall, canvas, screen, paper, or stone
to inform, illustrate, or entertain.
Graphic Design
 Uses visual compositions to solve problems
and communicate ideas through typography,
imagery, color and form. (Cann, 2018)
Basic Principles of Graphic Design
1. Color – used for emphasis or may elicit
emotions from viewers. Determined by:
a. Hue – name of color
b. Intensity – purity of the hue
c. Value – lightness or darkness of hue
2. Balance – equal distribution of weight;
determined by the darkness or lightness,
thickness of lines, and size.
 Symmetrical Balance – the visual weight
is distributed evenly
 Asymmetrical Balance – artistic and
different intensity on one side of the page.
3. Proximity – process of ensuring related design
elements are placed together.
 Close proximity – items are connected or
have a relationship to each other
 White Space – the art of nothing; negative
space.
 Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
4. Alignment – the way visual elements are Lesson 6
arranged. Principles and Techniques of
a. Edge Alignment
b. Center Alignment
Design Using Online Creation
5. Repetition – process of repeating elements Tools, Platforms, and Applications
throughout a design to give a unified look.
6. Contrast – divergence of opposing elements. Web Page Creation
An effective website design should fulfill its
Image Manipulation intended function by conveying its message while
 Refers to a process of bringing changes to a simultaneously engaging the visitor.
digitized image for transforming it to a desired Factors that contribute to good website design:
image. 1. Consistency
2. Colors
Principles and Basic Techniques of Image 3. Typography
Manipulation 4. Imagery
1. Cropping – cutting parts away
5. Simplicity and functionality
2. Color Balance – ambience and tone of light
3. Brightness and Contrast – making the image
Web Templates
darker or lighter.
 Unique full-page layout that contains generic
4. Filter – gives your image a twist from its
information which can be replaced by the users
original look.
with their own personal information.
5. Changing the Background
6. Removing the Color
7. Combining text, graphics, and image WHAT YOU SEE IS WHAT YOU GET
“WYSIWYG”
 No coding skills are required.
 Design components are manipulated using an
editor window and get the chance to choose
what elements are on your page.

BASIC WEB DESIGN PRINCIPLES

1. Website Purpose – website needs to
accommodate the needs of the user.
 Describing Expertise
 Building Your Reputation
 Generating Leads
 Sales and After Care

6
 Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
2. Simplicity – the best way to go when Online Creation Tools
considering the user experience and the usability TYPES OF VISUAL CONTENT
of your website. 1. Infographics – graphic visual representations
 Color – has the power to communicate intended to present information quickly and
messages and evoke emotional responses. clearly.
Limit color scheme to less than 5 colors.
 Piktochart – infographic creation tool
Pleasing color combinations.
that lets you design stunning pieces
 Typography – should be legible. Use worth sharing in minutes.
maximum of 3 different fonts. 2. Videos – recording of moving pictures and
 Imagery – capture the spirit of the company sound, especially as a digital file.
and their brand personality.  PowToon – online animation software
3. Navigation – finding system used on websites perfect for storytelling and creating
where visitors interact and find what they are Flash-style movies.
looking for. 3. Presentations – use catchy images, videos,
and graphics in your presentation to get into
4. F-Shaped Pattern Reading – most common way the minds of your target audience.
visitors scan text on a website.  Prezi – cloud-based presentation
software that displays information not as
series of slides but as a large board that
zooms in on specific information, text,
or an image.
 SlideShare – upload and share
5. Visual Hierarchy – arrangement of elements, professional videos and slide
order of importance. Establish a focal point. presentations.
6. Content – using compelling language, great
content can attract and influence visitors by
converting them into customers.
 Grid-based layout – arranges content into a
clean rigid grid structure that line up and
impose order for an aesthetically pleasing
website.
 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. Optimize image sizes.
 Mobile Friendly – more people are using
other devices to browse the web. Consider
building your website with a responsive
layout that could adjust to different
screens.
7

Lesson 7
MULTIMEDIA AND ICT
 Web 1.0 – “readable” phrase of the World Wide
Web with flat data and limited interaction
between sites and web users.
 Web 2.0 – “writable” phrase of the World Wide
Web with interactive data.
 Web 3.0 – It is the “executable” phrase of Word
Wide Web with dynamic applications,
interactive services, and “machine-to-machine”
interaction.
Rich Content in Online Environment and the
User Experience
Rich User Experience
 Ability of the web to deliver full scale GUI
style application to the client, making it easier
to interact, share and access the web content.
 Focuses to enhance how the data is presented,
manipulated, and used by the user.
GUI (Graphic User Interface)
 Program that allows a person to work easily
with a computer by using a mouse to point a
small picture and other element on the screen.
Interactive Multimedia
 Interactive – the user or audience has control
over the program or presentation.
 Multimedia – the integration of text, sound,
graphics, animation and video into a single unit.
8
Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
Online Tools to Produce Video Content
1. Facebook Live – Facebook’s live-streaming tool
that engages viewers in real-time.
2. YouTube Editor – creates new videos and edit
clips and publish them to YouTube.
3. YouTube Live Streaming – with three options to
start a live stream: Stream Now is a quick and
easy way to start and stop stream content at the
right time.
4. Adobe Spark – Adobe’s app to transform ideas
into visual stories.
5. Magisto – app to create professional videos with
easy-to-use editing tools, captions, custom
branding, and commercially licensed music.
6. Facebook Slideshow – video-like ads that use
motion, sound, and text to tell your story across
devices.
7. Loopster – full-featured online video editor with
an easy-to-use interface.
8. Wideo – tool to create animated videos for a
marketing campaign.
9. Periscope – Twitter’s app for live streaming.
10. WeVideo – full-featured online platform for
editing video.
11. StoriesAds.com – tool for creating compelling
video content tailored for Instagram’s vertical
format.
12. Animoto – platform for creating videos and
slideshows with three storytelling products.
 Marketing Video Builder – drag-and-drop
tool designed to perform well on social
media.
 Slideshow Builder – provides roughly 100
templates to turn photos and video clips into
a professional slideshow video.
 Empowerment Technologies 1
1st Semester
Jewel Mave F. Quezon STEM 1-C
Online Platforms and Sites
1. Webcast – media file distributed over the
Internet using streaming media technology to
take a single content source and distribute it to
many simultaneous viewers.
According to PSMAG Webcast means:
 To send live audio or video programming
over the Web.
 To send selected Web-based information to
Internet users based on individual
requirements.

2. Gamecast – a hook for some functionality that

will be available in the future. You will be able
to send the play by play data to the server in the
real time, and other people interested in your
game will be able to access your data.
Ways we intend to make this data available:
 A web view of the game where as the game
progresses, people can “watch it” on the
Internet.
 Another user with iScore can be kept in sync
while you are scoring a game.

3. Podcast – episodic series of digital audio or

video files which a user can download and listen
to. It is often available for subscription, so that
new episodes are automatically downloaded via
web sindication.

4. Vodcast – something like a TV program or

element of a program. It is stored on servers and
you can download them whenever you want.
“Video On Demand”
Benefits of Vodcasting
 Video content on demand
 Easier and cheaper than TV production
 Allows for skills and delivery convergence
 Easier, flexible mass distribution
 Little to no for maker or consumer