Empowerment Technologies

1
1st

1

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.
2
Empowerment Technologies
1
1st
 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
3
Empowerment Technologies
1
1st
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
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

4
 Empowerment Technologies
1
1st
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.
5

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.
6
Empowerment Technologies
1
1st
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
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