Empowerment Technologies

Page | 1
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Lesson 1: The Current State of ICT Technologies

Information and Communication Technologies

It refers to the use of communication technology such as laptop, smart phones, tablet, telephone,
internet and etc. to send, save, and edit information.

ICT in the Philippines

The use of communication technology spread in the entire country now a day even in rural
areas. According to Rappler blog site there are 119 million mobile phone subscriptions from a total
population of 101 million and 47 million active Facebook accounts. The Philippines is the fastest growing
app market in Southeast Asia and the highest digital population in the world. The top online activities
are social media, videos, online mobile games, location-based search and online shopping. Staying
connected with loved ones, friends, and relatives is a fundamental need for Filipinos

World Wide Web

It is also known as WWW or W3 introduce by Tim Berners-Lee. It consists of different pages that
are formatted in a markup language called HTML (Hypertext Markup Language) and linked to each other
that contain text, graphics, multimedia files, hyperlinks and etc.

Web 1.0: Static Web Pages

The first development of World Wide Web where web pages are static. It also known as flat or
stationary page and it cannot be manipulated by users.

Web 2.0: Dynamic Web Pages

It is a dynamic web page where user can interact with page like creating a user account, posting
comments, uploading files and images, and others.

Example: Blog sites, Facebook, Twitter, Instagram, Youtube.

Features of Web 2.0

1. FOLKSONOMY - allows users to categorize and classify/arrange information using freely

chosen keywords. (Example: tagging)
2. RICH USER EXPERIENCE - content is dynamic and is responsive to user’s input. (Example:
website that shows local content)
3. USER PARTICIPATION - the owner of the website is not the only one who is able to put
content. (Example: comments, reviews and evaluation)
4. LONG TAIL - services that are offered on demand rather than on a one-time purchase.
(Example: subscribing to a data plan)
5. SOFTWARE AS A SERVICE - users will subscribe to a software only when needed rather than
purchasing them. (Example: software rental)
6. MASS PARTICIPATION - diverse information sharing through universal web access.
(Example: social media)

Web 3.0 and the Semantic Web

A new paradigm in web interaction extension of led by World Wide Web Consortium (W3C)
where it provides framework that allows data to be shared and reuse.

Page | 2
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Trends in ICT
1. CONVERGENCE is a synergy of technological advancements to work on similar goal or task.
(Example: smart phones, cloud technologies and LTE technologies)

2. SOCIAL MEDIA is a website, application, or online channel that enables web users to create, co-
create, discuss, modify, and exchange user-generated content.

Photo
Credit: https://www.pexels.com/photo/apps-blur-button-close-up-267350

Types of Social Media

A. SOCIAL NETWORKS - these are sites that allow you to connect with other people with the
same interest or background. (Example: Facebook, Twitter, Instagram)

Image taken from https://www.facebook.com

B. BOOKMARKING SITES - A website that allows you to share and store internet bookmarks,
articles, posts, blogs, images and others. (Examples: Pinterest, StumbleUpon, Dribble)

Page | 3
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Image taken from https://www.pinterest.ph/autologin=true

C. SOCIAL NEWS - A website where user can post stories and are ranked based on the
popularity through voting. (Example: Digg, Reddit, )

Image taken from https://www.reddit.com

D. MEDIA SHARING - these are sites that allow you to upload and share media content like
images, music, and video. (Examples: YouTube and Instagram)

Page | 4
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Image taken from https://www.youtube.com

E. MICROBLOGGING - these are sites that focus on short updates from user. (Example: Twitter,
Tumblr, Meetme)

Image
taken from https://www.tumblr.com/login

F. BLOGS AND FORUMS these websites allow users to post their content by posting
comment/s. (Examples: Blogger and WordPress)

Image taken from https://www.wordpress.com

3. MOBILE TECHNOLOGIES the popularity of smartphones and tablets has taken a major rise over
the years because, of the devices’ capability to do task that were originally found in personal
computers.

4. ASSISTIVE MEDIA is a nonprofit service designed to help people who have visual and reading
impairments.

Operating Systems used by different Mobile Devices

A. iOS used in Apple devices such as the iPhone and iPad

B. ANDROID an open source OS developed by Google

C. BLACKBERRY OS used in Blackberry devices

Page | 5
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

D. WINDOWS PHONE OS a closed source OS developed by Microsoft

E. SYMBIAN the original smartphone OS used by Nokia devices

F. WEB OS originally used for smartphones and now used for smart TV’s

G. Harmony OS It is a latest OS moreover, Huawei is its developer. It is specifically designed for use
in IoT devices.

LESSON 2: RULES OF NETIQUETTE

We have learned in lesson 1 about the current state of Information
and Communication Technology in global setting. There are various online
platforms and sites that people used today as their medium of
communication and source of information. This communication technology
spread fast to the people and even controls their lives. Despite of the good
benefits given to us by the technology there are stills things that we must
be aware of. In this lesson we will discuss and give importance in online
safety, security, ethics and etiquette.

Online Safety and Security

Type of Information
 First name  Name of your parents
 Last Name  Name of your siblings
 Middle name  Address
 Current and previous  Home phone number
school(s)
 Birthday
 Cellphone number
Tips to Stay Safe Online
1. Be mindful of what you share 3. Check the privacy policy

2. Read the terms and conditions 4. Know the security features

Page | 6
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

5. Do not share your password 11. Install and update an anti-virus

software
6. Avoid logging in to public networks
12. Make your Wi-Fi network private
7. Do not talk to strangers
13. Avoid downloading anything from
8. Never post anything about a future
untrusted websites
vacation
14. Buy the software
9. Add friends you know in real life
15. Do not reply or click links from
suspicious email

10. Avoid visiting untrusted sites

Internet Risk
1. Cyberbullying - It happens when someone intentionally abused, harass, and mistreated
by other person using electronic communication.
2. Identity Theft - It is a crime of stealing personal information for the purpose of assuming
that person’s name or identity to make any form of transactions.
3. Cyber Stalking - A criminal practice where electronic communication is used to stalk or
harass individual or group.
4. Sexting - The act of sending sexually explicit text messages, images, and videos.

Internet Threats
Malware – also known as Malicious Software.
Types of Malware
1. Virus – a malicious program that replicate itself by copying itself to another program.
2. Trojan Horse – a malicious program that disguised as legitimate program that user will
accept and use but take control of your computer.
3. Worm – malicious program that copy’s itself and spreads to other computers.
4. Spyware – A malicious program that gathers information from victim’s computer and
send it back to the hacker.
5. Adware – An unwanted advertisement that will pop-up several times on victim’s
computer then behave abnormally and tedious to close them.

Page | 7
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

6. Keylogger – A program that runs in the background and steals user credentials and
confidential information and send back to hack by recording every keystroke that a user
makes on their computer or device.
7. Botnet – A collection of infected internet–connected devices such as PC and mobile
phone that are controlled by a common type of malware.
8. Rootkit – A software tools used by hackers to gain control over a computer on a
network without being exposed.
9. Ransomware – A ransom virus that block the user from accessing the programs or files
and demands to pay the ransom through online method for the removal of the virus.
Spam - Also known as junk email or unwanted email send by advertiser or bot. It can be used to
send malware.
Phishing - A cyberattack method using deceptive emails and websites to acquiring sensitive
personal information.
Cybercrime - A crime in which computer is used as object and tool in committing a crime such
hacking, phishing, spamming, child pornography, libel, hate crimes, identity thief and others.
Cybercrime Law – A law that deals with all forms of cybercrime

Lesson 3: Contextualized Online Search and Research Skills

In previous lesson, we discussed on online safety, security, ethics and etiquette that
we must take into consideration in using internet. Technology such mobile phone, laptop,
computer, and other electronic gadgets connect us to world through different online
platforms. Security and safety have been taught to us so that we can avoid risk and danger
online. As an individual who is part of online community must maintain good social
behavior. We need to adhere to the same standard behavior online that we follow in real
life. Now that you are ready to enter and explore the online world, this lesson will teach you
on online search and research skills.

Internet Research is a research method in collecting and gathering information via internet
by using search engine such as google.

Search Engine is a program that allows users to search for content on internet.

Examples of Search Engine

Google Aol Search Wow Baidu

Web Crawler Yahoo! Search MyWebSearch Wolframalpha
Bing Info Dogpile DuckDuckGo

Page | 8
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Ask Infospace Contenko Internet Archive

Searching the Web

Getting the correct and reliable information is our goal in internet research. We may
rely on the capability of search engine but sometimes it may not give us the correct
information because of the keywords we entered into a search engine. There are techniques
in searching information that can be applied in search engine in order to get a better result.
Some search engines allow combination of words and logic connectors of AND, OR, and
NOT.
Tips for Effective Internet Research by George Mathews

1. Know what kind of research you want to do.

2. Make a list of keywords you will use in your search.
3. Enclose keywords in quotation marks.
4. Use the minus sign (-).
5. Try specialized search engines.
6. Skim through search results web pages.
7. Bookmark
8. Review your bookmarks.

Online Research Skills by Hannah Trierweiler Hudson

1. Check Your Sources
2. Ask Good Questions
3. Go Beyond the Surface
4. Be Patient
5. Respect Ownership
6. Use Your Networks

Copyright Issues
There are millions of information that we can get from the internet. Some of this information are free
but others are not. They are protected by a copyright law.

What is Copyright?
Copyright is a protection given to the owner of the rights in an original work such as books, musical
works, films, paintings, and other works, and computer programs. This original work is called intellectual
property which is protected under Republic Act 8293 known as the “Intellectual Property Code of the
Philippines”.

Copyright Infringement
This happens when the copyrighted work is use by other person without permission of the author or
copyright holder. Any person who is infringing the right protected work would be liable under the law.

Page | 9
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Fair Use
Research is important to the students and other people. Most of them rely on the information that they
can get online. Although this information is protected by a copyright law but we can still use this
information without permission in a limited way under certain condition and purpose.

Fair use is the use of copyrighted material for comment, teaching, criticism, news reporting, research,
scholarship, and other similar purpose is not an infringement of copyright.

Example of this is when you post a quote from a person in your Facebook wall. Include the name of
person who owns the quote in your post. Another example is when you copy image from internet, give
credit to the creator of image. The copied image should be use for educational purpose not for
commercial use.

In fair use, 5% of the content of reference can only be copied. If 20% or less of reference copied, there
must be a secondary use agreement and fee. And if 20% or more of reference copied, it requires
purchasing of creative work.

Guidelines for Fair Use

1. Majority of the contents created must be yours.

2. Give credit to the owner.

3. Don’t make profit of the copyrighted work.

Page | 10
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Lesson 4: Advanced Word Processing Skills

WORD PROCESSOR - is an electronic device or computer software application that

performs the task of composing, editing, formatting, and printing of documents
EXAMPLES OF WORD PROCESSORS:

 OPENOFFICE WRITER
 LIBREOFFICE WRITER
 POLARIS OFFICE
 KINGSOFT WRITER
 WORDPERFECT
 WORDPAD
 MICROSOFT WORD

MICROSOFT WORD - is a word processor developed by Microsoft. It was first released

on October 25, 1983. It is also known as MS Word.
SOME FEATURES OF MS WORD:

1. AutoCorrect – corrects common spelling errors as well as capitalization mistakes

2. AutoFormat – applies formatting to text, e.g. number listing, bullet, hyperlinks
3. Grammar Checker – proofreads documents for grammar, writing style, sentence structure errors
and reading statistics
4. Template – a document that contains the formatting necessary for a specific document type
5. Thesaurus – provides synonyms for a word in a document
6. Tables – organize information into rows and columns
7. Mail Merge – a feature that allows you to create a document and merge them with another
document or data file
8. Text Wrap – adjusts how the image behaves around other objects or text

Keyboard Shortcuts in Word Processing Software

Ctrl + A – Select All Ctrl + I - Italicize Text

Ctrl + B – Bold Text Ctrl + J – Justify Text

Ctrl + C – Copy Text Ctrl + K – Create a hyperlink

Ctrl + V – Paste a copied text Ctrl + L – Align Text to Left

Ctrl + D – Show Font Dialog Box Ctrl + R – Align Text to Right

Ctrl + F – Display Find Dialog Box Ctrl + O – Open a document

Ctrl + G – Display Go To Dialog Box Ctrl + P – Display Print dialog box

Ctrl + H – Display Replace Dialog Box Ctrl + S – Save a document

Ctrl + U – Underline Text Ctrl + X – Cut a selected Text

Ctrl + M – Tab Ctrl + Y – Redo the last undone action

Ctrl + N – Create a new document Ctrl + Z – Undo the last action

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Different Parts of Microsoft Word

Quick Access Toolbar:

This bar is one of the most important parts of Microsoft Word Window 2019. It is also
located at the top of the screen, on the left corner just above the File Tab. It is the place for the
most frequently used commands. You can customize this Toolbar by clicking the little arrow
that displays some more commands such as “New” which refers to opening a new
document, “Open” which implies displaying a document that we have saved on our
computer, “Undo” reverse the previous action or “Redo” do the action again, and “Save” to
save the current document.

Title bar:
The title bar is one of the parts of a Word window. It is located at the center and top of the
document window and shows the name of the program or document. There, when we open
Microsoft Word document, we can read the title as Document1 – Word. It refers to a general
name displayed by the program software. When we save our document, we can replace that
name with a personalized one related to our file.
In this bar, on the right side, there are three more buttons known as window controls. It
allows to performs three commands i.e., minimize, maximize, and close the document or file.
The 1st is the “X” icon that used to close the window of the Microsoft Word document
we are working on. And the 02nd component is a double box icon which is located in the center
of the previous ones and used to maximize or enlarge the document. The 03rd icon is a
dash “_” used to minimize the document we are working on.

File Tab:
In Microsoft Word 2019, the File tab replaces the Microsoft Office button from Word 2007.
Microsoft Office button is the circular button that is located in some operating systems at the
bottom and in others at the top, on the left side. You can click it to see the backstage view. In
this tab, where you can see the previous opened or saved files, create a new document, print a
document, and do other operations.

Ribbon of Microsoft Word:

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

The Ribbon is one of the basic parts of Microsoft Word widow contains organized commands in
three layers.

 Tabs or Menu: These are the horizontal menu appear at the top of the Ribbon and
contain groups of related commands, i.e., File, Home, Insert, Design, Layout, References,
Mailings, Review, View, and Help are examples of ribbon tabs.
1. Home Tab - allows you to change document settings, such as the font properties, adding bullets
or a numbered list, adjusting styles, and other common features
2. Insert Tab - is used to insert different features such as tables, pictures, clip art, shapes, charts,
page numbers, word art, headers, and footers into a document.
3. Page Layout Tab - refers to the arrangement of text, images, and other objects on a page.
4. Design Tab - includes table formatting, cell and table borders, arranging the table on the page,
and the size of the table.
5. References Tab - allows you to now create a table of contents, footnotes, citations, cross-
references, select MLA or APA or ISO formats and so on.
6. Mailings tab - provides features related to mail merge, such as envelopes, labels, merge fields
and so on as icons.
7. Review tab - provides icons for document review-related commands, such as spelling check,
translation, track changes, apply changes, comments and so on.
8. View tab - enables you to switch between Normal or Master Page, and Single Page or
Two-Page Spread views. This tab also gives you control over showing boundaries,
guides, rulers, and other layout tools, zooming the size of your view of the publication,
and managing Publisher windows you have open.
 Groups: These are the organized related commands displaying below each tab or menu. The
name of each group appears below the group on the Ribbon. For example, group of commands
related to paragraph or group of commands related to the font, etc.
 Commands: Commands appear within each group as mentioned above. For example, when we
press the “File” tab, some commands or functions such as “New”, “Open” “Save”, “Save as” etc.
are displayed.

Rulers:
Microsoft Word has two rulers – one is the horizontal ruler and the second is a vertical ruler.
The horizontal ruler seems just under the Ribbon. It is used to set the size of the margins and
tab stops position of the document. The vertical ruler appears on the left side of the document
window and is used to measure the vertical position of elements on the page.

Scrollbar:
It is one of the parts of Microsoft Word widow, which is characterized by being a long bar that is
generally located on the right side of the document. It consists of an open bar containing an
arrow that allows the user to scroll up and down more quickly.

Help icon:
The Help Icon can be used to find online related queries. This provides helpful tutorials on
various functions and commands related to MS word.

Zoom Control Buttons:

The zoom slider allows you to resize the document to view it according to the user’s
requirements. It allows you to zoom in or zoom out from 0% to 500% wide range. The zoom
controls consist of a slider that you can slide left (zoom in) or right (zoom out); you can also
click the plus or minus sign buttons to increase or minus decrease the zoom factor.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

View Buttons:
It is a group of buttons located to the left of the Zoom control, and near the bottom of the
screen. It lets you switch the various Word document views.

 Print Layout view− This view displays pages exactly as they will show in print.
 Read Mode− This displays a full-screen view of the document.
 Web Layout − This displays a document view that appears on a Web browser, such as
Internet Explorer.
 Outline view− This lets you display your document in outline form. For this view, we will
first create using Word’s standard heading styles.
 Draft view− This displays only the text of your document as it appears on the printed
page. No headers and footers are shown in this view.

Document or Work Area:

If we open MS Word on the computer then we can see different parts of the MS Word window
on the screen. The document or work area is the area where we can type of document, letter,
memo, or simply a communication will be developed. The vertical flashing bar is called Cursor
and the insertion point and represents the location where text can write. It is generally white
and can see when we open the MS Word application. These allow giving width and flexibility to
the document.
Status Bar:
It is located at the bottom of the document and displays the information related to the word
document. From left to right, it shows the total number of pages, word count, language,
translator, error notifications, and sections among other information.
In this bar, we can visualize the document we are working on in five ways, e.g. print layout, full-
screen reading, web layout, outline view.
Dialog Box Launcher:
We can see a small arrow in the lower-right corner of many groups on the Ribbon that display
some commands. By clicking this arrow, the downward window will open that provides more
options about the group.
Kinds of Materials
1. Pictures- digital pictures you saved in any local storage device.

 .JPG(“jay-peg”)- stands for Joint Photographic Experts Group. It identifies the kind of
data compression process that it uses to make it more compatible and portable through
the internet.

 .GIF(“jif”)- stands for Graphics Interchange Format. This type of image file is capable of
displaying transparencies and simple animations.

 .PNG(“ping”)- stands for Portable Network Graphics. This type of image file is capable of
displaying transparencies.

2. Clip Art- this is generally a .GIF type; line art drawings or images used as generic representation for
ideas and objects that you might want to integrate with your document.

3. Shapes- printable objects or materials that you can integrate in your document.

4. Smart Art- these are predefined sets of different shapes grouped together to form ideas that are
organizational or structural in nature.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

5. Chart- another type of material that you can integrate in your document that allows you to represent
data characteristics and trends.

6. Screenshot- creating reports and manual for training or procedures will require the integration of a
more realistic image of what you are discussing on your report or manual.

Image Placement
In line with text- default setting for images that are inserted or integrated in your document. It
treats your image like text font.

Square- this setting allows the image you inserted to be placed anywhere within the paragraph
with the text going around the image in a square pattern like a frame.

Tight/Through— Text wraps around image, regardless of what shape the image is. This text
wrap works best with images that have no background.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Top and bottom- Text stops when it hits the top of the image and continues at the bottom of
the image; no text is to the left or right of the image

Behind text- Image is behind text. Text will cover image.

In front of text- Image is in front of text. Text behind the image is not visible.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Summary Questions related to the lessons

 What are the two essential components of mail merge?

Answer: Two components of mail merge are the form document and the list or data file that you
need to have in order to productively use this feature.
 What is a form document?
Answer: Form document is a standard document that contains generic information that is
mostly constant within the document.
 What is the purpose of text wrapping?
Answer: Text wrapping allows you to place your images where you want it to be in your
document.

LESSON 5-6: Advanced spreadsheet skills

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Spreadsheet Software - is a software application capable of organizing, storing and

analyzing data in tabular form. The application can provide digital simulation of paper
accounting worksheets. They can also have multiple interacting sheets with data represented in
text, numeric or in graphic form
Examples of Spreadsheet Software:

 LibreOffice Calc
 OpenOffice.org Calc
 Google Sheets
 Apple iWork Numbers
 Kingsoft Office Spreadsheets
 StarOffice Calc
 Microsoft Excel

Microsoft Excel - is a software program produced by Microsoft that allows users to

organize, format and calculate data with formulas using a spreadsheet system. This software is
part of the Microsoft Office suite and is compatible with other applications in the Office suite .

Key Term in MS Excel:

 Row - horizontal line of entries in a table
 Column – vertical line of entries in a table
 Cell - the place where info. is held in a spreadsheet
 Active Cell – the selected cell
 Column Heading – the box at the top of each column containing a letter
 Row Heading – the row number
 Cell Reference – the cell address of the cell usually combine letter and number (ex. A1, B4, C2)
 Merge – combining or joining two or more cells
 Formula – is an expression which calculates the value of a cell.
 Functions – are predefined formulas and are already available in Excel
 Formula Bar – the bar that displays the contents of a cell

Create a Formula With Cell References

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Try creating a simple formula using cell references.

1. First, you must populate the spreadsheet with data. Open a new Excel file and select cell C1 to
make it the active cell.

2. Type 3 in the cell, then press Enter on your keyboard.

3. Cell C2 should be selected. If it's not, select cell C2. Type 2 in the cell and press Enter on your
keyboard.

4. Now create the formula. Select cell D1 and type =C1+C2. Notice that when you type each cell
reference, that cell becomes highlighted.

5. Press Enter to complete the formula. The answer 5 appears in cell D1.

If you select cell D1 again, the complete formula =C1+C2 appears in the formula bar above the
worksheet.

Mathematical Operators and Order of Operations

Now we turn to operations besides addition, including subtraction, division, multiplication, and
exponentiation. The mathematical operators used in Excel formulas are similar to those you may
remember from math class:

 Subtraction – minus sign ( - )  Multiplication – asterisk ( * )

 Addition – plus sign ( + )  Exponentiation – caret ( ^ )

 Division – forward-slash ( / )

If more than one operator is used in a formula, Excel follows a specific order to perform the
mathematical operations. An easy way to remember the order of operations is to use the acronym
BEDMAS.

 Brackets  Multiplication

 Exponents  Addition

 Division  Subtraction

Excel actually considers division and multiplication to be of equal importance. It performs these
operations in the order in which they occur, from left to right. The same is true for addition
and subtraction.

Here's a simple example of the order of operations in use. In the formula =2*(3+2) the first
operation Excel completes is the one inside the brackets (3+2), with the result of 5. It then performs
the multiplication operation, 2*5, with the result of 10. (The values in the formula could be
represented by cell references rather than numbers, but Excel would perform the operations in the
same order.) Try entering the formula into Excel to see it work.

Enter a Complex Formula

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Now let's create a more complex formula.

1. Open a new spreadsheet and populate it with data as follows:

 7 in cell C1  6 in cell C4

 5 in cell C2  3 in cell C5

 9 in cell C3

2. Select cell D1 to make it the active cell and type the equal sign followed by a left bracket (=().

3. Select cell C2 to enter the cell reference in the formula, then type the minus sign (-).

4. Select cell C4 to enter this cell reference into the formula, then type a right bracket ()).

5. Type the multiplication sign (*), then select cell C1 to enter this cell reference into the formula.

6. Type the plus sign (+), then select C3 to enter this cell reference into the formula.

7. Type the division sign (/), then select C5 to enter this cell reference into the formula.

8. Press Enter to complete the formula. The answer -4 appears in cell D1.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

9. “Save As” your Microsoft Excel File, with the file name: Activity1_Your SurnameFirstName

How Excel Calculated the Result

In the above example, Excel arrived at the result of -4 using the BEDMAS rules as follows:

 Brackets. Excel first carried out the operation within the brackets, C2-C4 or 5-6 for a result of -1.

 Exponents. There are no exponents in this formula, so Excel skipped this step.

 Division and Multiplication. There are two of these operations in the formula and Excel
performed them from left to right. First, it multiplied -1 by 7 (the content of cell C1) to get a
result of -7. It then performed the division operation, C3/C5 or 9/3, for a result of 3.

 Addition and Subtraction. The last operation Excel performed was the addition of -7+3 for the
final result of -4.

Microsoft excel functions

 =SUM(cells involved)  =COUNT(cells involved)

 =AVERAGE(cells involved)  =COUNTIF(range, “criteria”)

 =AVERAGEIF(range, “criteria”,average  =MIN(cells involved)

range)
 =MAX(cells involved)

NOTE:

 Orientation – the angle at which a text is displayed

 Count – a function used to count the cells with content in a range.

 Sum – a function used to computer for the summation of the number of a range

 Average – a function used to compute for the average of the number of a ranger

 COUNTIF - a function used to count the cells with a specified content within a range.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

 SUMIF – a function used to compute for the summation of a range if a certain condition is met

 AVERAGEIF – a function used to compute for the average of a range if a certain condition is met

 Range – the range of cells where you want to look for the criteria.

 Criteria – a value or label that determines if a cell is part of the range to be averaged

 Average Range – the actual range of cells that will be averaged, if omitted, the range will be
used instead

Inserting Borders in Excel

Highlight Cells A1 to C7, and Under the Home Tab, Select Borders and Click “All Borders”

Output:

Merge and Center using Excel

Highlight cells B1 to B3 and select Merge and Center

Output:

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

LESSON 7: Advanced presentation skills

Presentation Software - is an application software that allows users to create visual aids for
presentations to communicate ideas, messages and other info.
Examples of Presentation Software:

 MagicPoint
 OpenOffice.org Impress
 LibreOffice Impress
 Powerdot
 Microsoft PowerPoint

Microsoft PowerPoint - is a powerful presentation software developed by Microsoft. It is a

standard component of the company's Microsoft Office suite software, and is bundled together
with Word, Excel and other Office productivity tools.

The program uses slides to convey information rich in multimedia and is used to create complex
business presentations, simple educational outlines and much more.

Different Parts of PowerPoint Widow:

Slide Sheet

Quick Access Toolbar:

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

This bar located at the top-left corner of the window. It is a group of commonly used
commands which makes easy to execute certain procedures. Mostly it contains Save, Undo,
Redo, Run Slide commands, etc. You can customize this toolbar to your need

Title Bar
Title Bar is the upper portion of the PowerPoint window. It shows Quick Access Toolbar, the
name of the opened file along with the name of the program, sign-in, ribbon display, maximize,
minimize, and close buttons.

Control buttons:
They are small buttons located in the upper right part of the window. It allows to minimize,
maximize the size of the window, and close the current document.
Ribbon
The Ribbon is the second section of the PowerPoint window. It consist of the following
components.
 Menus − They located at the top section below the title bar and contain groups of related
commands i.e. File, Home, Insert, Design, Transitions, Animation, Slide Show, Review,
View, Help menus.
 Groups − Groups are the combination of organized related commands. Each group name
appears below the group section.
 Commands – They are the predefined instructions of the executable program. It exists in
the form of Icons in the ribbon, e.g a group of Slide which contains new slide, layout,
reset, section, etc.

File Tab
In the File tab, you can open the Backstage view which allows you to access the basic
commands in PowerPoint i.e. create a new presentation, open existing ones, save presentation,
print option, share, export and many other options.

Slide Area
 Slide area – It is the area where the slide or document is going to work. It allows
updating, editing and adding, deleting content, inserting images, shapes to the selected
sheet. It has a series of panels such as notes and zoom, which simplify the work.
 Slide sheet – It is the sheet that shows you a scheme with a title and work area. Besides
that, it allows you to visualize a thumbnail of the created slide

Help
In previous versions, it appeared an icon above, next to the title bar that offered you general
information about functions and powerpoint aspects. In the most recent versions, it is included
in the menu bar with the name of Help. selecting the Help menu and click on “?”. It will open
the PowerPoint help window where you can browse from. The second help is a search bar with
a light bulb icon that tells me (tell me). You can also makes search for a particular command.

Zoom Panel
This panel allows you to manipulate the percentage (%) of vision of the page currently being
worked on. You can decrease or increase the zoom factor by the zoom-out symbol (represented
by minus -), zoom-in (sum symbol +) respectively.
The maximum zoom-in is 400% and minimus is 10% in PowerPoint.

Slide Views Buttons

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

They are the four buttons left to the Zoom control contains a series of icons. It allows you to
switch among the PowerPoint views.
 Normal view – This shows normal view of the presentation with the slide sheet on the
right and slide thumbnails to the left. This view allows you to select the working slide
and also rearrange them.
 Slide Sorter view − It displays all the slides in a tabular form. This view allows you to
arrange the slides only.
 Reading View – This window will allow you to read the slide carefully. However, you
cannot perform any editing.
 Slide Show – This displays/runs all the slides along with animations, sounds that you
have given to the presentation.

Status bar:
It is a bar located in the lower area of the powerpoint document window that shows
information related to the current page such as the slide number.

Notes Section:
This panel allows you to add an opinion on the slide that is activated for those who are in
charge of modifying this document. It is not displayed during the presentation. It can observe
and take into consideration your message.

Image Insertion: Inserting an Illustration:

Inserting Link Inserting Symbol Inserting Media (Audio/Video)

Creating an effective presentation

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

1. Minimize – keeping slide counts to a minimum

2. Clarity – making sure the font is readable

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

3. Simplicity – using bullets or short sentences

4. Visuals – using graphics that attract, not distract the audience

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

5. Consistency – making your designs uniform

6.

Contrast – using light font on dark background or vice versa

Using hyperlinks in Microsoft PowerPoint

They allow you to jump back and forth between specific slides in your presentation, to
movie files that don't work on PowerPoint slides, to other files, or to a webpage (if you are
connected to the Internet)

Highlight your chosen word or object then click insert, find Link.

Click place in this document then click your preferred slide.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Things to consider in creating presentation?

Answer: To create an effective presentation, minimize the contents to maintain a clear
message, avoid being fancy by using fonts that are not easy to read, keep things simple
through the use of bullets or short sentences, use visuals like charts and graphs but avoid
using ones that distract the audience, be consistent by having uniform font styles, and be
mindful of the contrast.

What is the purpose of embedding object?

Answer: Embedding objects allows you to insert files inside your presentation like MS Excel
file.

This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized reproduction is
strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

LESSON 8: IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

Before we can produce a high-quality design project whether designing a website,
designing a tarpaulin, creating banners or logos, we need to know and follow the basic
principles and elements of design. You may ask why? Well, because people care about the way
things look. Take a look at the picture below.

Photo Credit: https://www.carousell.ph/

The picture above shows a good web design website. It uses the different elements on
its design properly. Not only that, the website designer also follows the rules in organizing and
placing the different elements in making website design.

Basic Principles of Graphics and Layout

The elements and principles of design are the building blocks of a successful beautiful
design. The elements of design are the things or tools that make up a design while the
Principles of design are what we do to those elements.
 LINE – Lines are defined by points moving in space. It can
create a sense of movement or direction in your design. Line
is can be smooth, rough, straight, curve, broken, thick or thin

 SHAPE – A shape is an enclosed space, the boundaries of

which are defined by other elements of art like lines, colors,
values or textures. Shapes can be used to create patterns
and draw the viewer’s attention

 DIRECTION – Applying motion to create the visual illusion of movement. Use horizontal
direction for calmness, stability and tranquility while vertical direction for emotions of
balance, formality and alertness.

Page | 30
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

 SIZE (SCALE) – Size is basically the relationship of the area

occupied by one shape to that of another. Large elements
means more significant than the small one.

I
 TEXTURE – Texture refers to surface appearance of an object m
a
given by the dimensions, form, thickness, arrangement, and
g
amount of its basic parts e:
"

 COLOR – Color is light redirected off objects. It is used to

create curiosity and emotions to the viewer’s. It has three
main characteristics: hue (these are red, green, blue, etc.),
value (lightness/ darkness), and intensity (saturation, or
amount of pigment) and temperature (warm and cool).

The Principles of Design

These are the rules that help you organize and place the materials to make arts or designs.

1. BALANCE – Balance in design is the state of equal relationship. It means equal

distribution of visual weight in a design. It can be achieved by adjusting the visual weight
of each element, in terms of size, color, textures, shapes or contrast. Balance in graphic
design provides stability and structure to a design.

There are different kinds of balance:

 Symmetrical balance occurs when identical weights are on equal sides of a composition.

https://

www.pexels.com/photo/light-landmark-building- architecture-135018/

Page | 31
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

 Asymmetrical balance occurs when a design have unequal graphic weight on either side, but
those unequal graphics need to balance each other (un-evenly balanced).

https://pixabay.com/photos/black-and-white-trees-road-path- 692155/

 Radial balance occurs when the design elements swirl out from a central axis
(emanating from a central point).

https://www.pexels.com/ photo/brown-and-
black-round-concrete- surface-3602215/

2. PROXIMITY – Proximity maintains a relationship between items that go together. It

helps creates organization by grouping the same elements together or in close
proximity. The elements should be connected visually.

Page | 32
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

3. ALIGNMENT – Alignment refers to lining up the elements of a design along the top,
bottom, center or sides of the elements. It allows us to create order and organization in
our design. The whole point of the alignment is that nothing in your design should look
as if it were placed there randomly.

Page | 33
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

https://www.apple.com/mac/

4. REPETITION, PATTERN, AND RHYTHM – Repetition duplicates the characteristics of similar

elements to contribute to design consistency. It strengthens a design by tying together
individual elements; pattern is a regular arrangement of alternated or repeated elements like
shapes, lines or colors; rhythm--is a combination of elements repeated, but with variations.

5. CONTRAST – Contrast refers to the use of conflicting elements or colors while

still remaining harmonious and unified when the artwork is viewed as a whole.
It allows you to give emphasis to key elements in your design.

6. SPACE – It refers to the

area that an object
occupies. Both positive

https://www.apple.com
and negative space should be considered in graphic
design. White space gives your design breathing room.

INFOGRAPHICS
What is Infographic?
Page | 34
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

The term Information graphic or Infographic is a photographic presentations of data and

information that use the different elements of design to make data easily understandable at a
glance. Infographics make complex messages become more visually appealing to the viewers.

Visual Message Design can help with effectiveness of delivery of a message. It can lend assistance in
presenting your ideas clearly

Some Tools For Creating Infographics

1. Biteable https://biteable.com/infographic/

2. BeFunky https://www.befunky.com/features/infographic-maker/

3. Visme https://www.visme.co/make-infographics/

4. Cacoo https://cacoo.com/

5. Snappa https://snappa.com/create/infographics

6. Canva Infographic Maker https://www.canva.com/create/infographics/

7. Google Chart https://developers.google.com/chart/

8. Piktochart http://piktochart.com/

9. Infogram http://infogr.am/

10.Canva https://www.canva.com/

Principles of Visual Message Design using Infographics

1. Be unique
 Be creative is one of the most important aspect of designing an effective infographic.
2. Keep it simple
 Make a design easy to understand. Straight to the point and focus more on the
message.
3. Less is more
 Focus on what matters. Keep your text minimal will most likely produce more
impact than a page full of words.
4. Sharing
 Share it with your friends. It is the most important and effective thing to do in
making infographic.

Tutorials and trainings in Creating Infographics using Piktochart

1. Visit youtube website. Open your favorite browser and type in www.youtube.com in
the address bar.
2. Search Infographic Tutorials. Type in piktochart infographic tutorials in the search bar.

Page | 35
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

How to create an infographic using Canva

Canva is a free tool with a huge database of free-to-use images and illustrations. The
platform allows you to design and download infographics in any size and file format (PDF, PNG,
JPG). Canva even offers a library of pre-built infographics ranging in presentation styles and
data types.
To build your infographic, you will need to first sign up for Canva by creating a free
account. You can sign up using your email or with your Google or Facebook account. Once you
sign in, its time to learn how to create an infographic.

Page | 36
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

1. Choose an infographic template

2. Select your design style

After you’ve chosen the right size canvas for your project, Canva rolls out a list of layout
options that will serve as the base of your infographics. There are literally hundreds of designs
to choose from, but the first 50 are typically the most customizable.
Canva offers both free and premium design templates, but the vast majority in this
category are free to use. Each template has a variety of options based on the type of data being
displayed, the visuals used, and the specific niche intended for the design.

3. Customize the background and select fonts


To
change
the

Page | 37
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

background, click on the background icon in the left sidebar. The background options
are sorted by color and include everything from solid colors and macro-photography, to
quirky sketches and minimalist patterns. Choose one that aligns with your brand.
 Changing color palettes is simple. Just click on the canvas, then click on the multi-
colored box at the top of the design space. Use the search box that pops up to find a
variety of relevant color schemes.

 Add or change fonts in your graphic by selecting the text icon on the left side. Drag and
drop
the
type of
text
you
want
to the
canvas,
remove
the
demo

content, and start typing.

4. Add graphical elements

Canva has categorized its graphical elements into “images”, “grids”, “charts”, “frames”,
“shapes”, “illustrations”, and “icons”. Under the “elements” tab, you will find an icon for just
about every niche. To give you a feeling of the variety, we have created our infographics using
some of the elements available in Canva.

Page | 38
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

 To select an element, double click on the type you want. You will find several styling
options available for each type (“grids”, “icons”, etc.). Simply drag and drop the
elements you like and resize to fit your design by dragging the corners.

5. Download your file

When you’ve settled on the perfect design for your infographic, click the share button
then find download to bring up a list of file types.

Use Image Manipulation Techniques

Page | 39
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

 How do you manipulate text and images?

 What is the best image format to be use in your projects?
 What is the best resolution in creating your projects?

The questions above are some of the few questions that comes into mind when we talk
about Photo Editing Sofware.
Photo editing and designing software allow you to manipulate or edit images. In order
to perform image manipulation, you need to have basic knowledge of image editing operations
such as cutting, cropping, replacing and more.
For this, you need an image editing software for image manipulation practices.
The followings are some examples of image editing software:
 Adobe Photoshop
 Gimp
 Corel Draw
 Pixlr Editor
 PAINT.NET
 InPixio

Online File Formats for Images and Text

Image file format refer to how data associated to the image will be stored. It can be compressed
to decrease file size of the image. There are two different compression you can choose when enhancing
your images: lossy and lossless compression. Lossy compression reduces file size by removing
redundant information means that some data from the image file is lost. While Lossless compression
retains values and manages to lower file size.

File Supports Supports

Name Extensi Use Transpare Animatio
on ncy n

1. Joint .jpeg
Real-life
Photographi or .jpg
photograph NO NO
cs Experts
s
Group
2. Graphics .gif Computer
Interchange generated YES YES
Format graphics

3. Portable .png Screenshot YES NO

Network s, high
Graphics compatibili
Page | 40
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

ty
Common image file formats

Image resolution refers to the number of pixels in an image or the detail an image
holds. It is identified by the height and the width of the image. A pixel is just one unit of the
whole digital image it is the smallest unit of an image. The higher the resolution, means that
there more pixels per inch (PPI), resulting in more pixel information and creating a high-quality,
crisp image

Tutorials and trainings in Creating Image Manipulation using Photoshop

1. Visit youtube website. Open your favorite browser and type in www.youtube.com in
the address bar.
2. Search Photoshop Tutorials. Type in photoshop tutorials in the search bar.

LESSON 9-10: ICT Online Platforms in Creating Web Content

We are on the Information Age on which information seems so easy to reach. One of the
tools that we usually use if you need to answer a question from your subject is a website which
can we use if we are online. A website or web site is a set of related resources from the web.
These resources were considered as web pages and multimedia (e.g.: videos, music, images).
A platform-enabled website or online platform gives a feature on which allows to
manipulate the content of the website. Most of the online platforms requires you to register in
order to publish, manipulate, organize, or even delete a certain web content. As a Senior High
School student, you are expected to know the different online platform as this would help you
in different task like connect people, stream your daily activity, shop online, or even creating a
website of your own.
Page | 41
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

Before I introduce the different type of online platforms which you can use. Let's take a
close look on how technologies are use these days. Take a look at the picture below.

Photo

The picture on this page shows that each one of us has skill of being an information
literate since information can be reach just a click away. It is only up to us to how we create or
how we evaluate the information that we garnered from online resources.
Here are the three types of online platforms:

1. Social Media Platforms

This platform allows you to create your personal

account or profile. After you register on this website,
it will allow you to create pages or even groups
where you can share content and ideas. Social Media
platforms enables you to connect yourself to other
users and get updates on their news feed. Facebook,
Instagram and Twitter are examples of Social Media
platforms.

2. Blogging Platforms

A platform on where a writer or even a group of

writers can share views on an individual subject. It is
comparable to a newsletter where you can add
menus, designs or even multimedia of a subject.
Blogger is an example of blogging site. If you love to
write or you want to share ideas online, blogging
platforms is the perfect tool you can use.

3. Content Management System or CMS

One of the feature of this platform is that you can

publish your own website and manage its content
through intranet or in a single computer. This is a

Page | 42
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

software where you can easily create, update, organize, and publish the content of your
website. A popular example of CMS is WordPress.

Web page is designed for World Wide Web on which it is consider as the document inside it.
Mozilla FireFox, Google Chrome, Microsoft Edge or Apple's Safari are web browsers which you can
use in order to access a web page.

Nowadays, web pages serves as an important role in the business world. Web pages allows
businesses to showcase their company and advertise their products. Even social media sites allows
users to boost their popularity, this will help the users to promote their business or advocacy to
other users online.

If you're planning to create a web page of your own, you can use a website builder like
WordPress, Wix or Adobe Dreamweaver. These website builders are very powerful tool and user-
friendly on which you can create website by just dragging and dropping the elements of your
website. However, there are certain elements and principles in building your own website. Below
are the seven possible elements of a modern web design

1. Text - this is a mandatory element of a web page. However, visitors got distracted about the
font family of the text on website. So while you are designing your website, make sure that to
choose well the font family and type that you need to use on your design and make the text is
clear and in readable size

2. Graphics/ Illustrations - make sure your images or illustrations are not pixelated or must be on
good quality. There are time that text give description to an image, so you make that these two
elements are well arranged

3. White space - having a crowded website, it

is very hard to direct the attention of your vistor's eye. These white space gives your website a

Page | 43
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

4. Links - links or hyperlinks allows user to jump to another site or page that is related of to your
site

5. Color - the colors you use in your design is a very

important aspect. There are times that colors become visually distracting to your viewers. As
some web designers do, they use the company logo of their client as their color reference on
their website.

6. Video/Audio - there are sites use audio/video to help their visitors to better understand what
they are selling or teaching. These elements of web designing really helps your visitors especially
those websites that offers tutorial of certain subject.

7. Background - texture or background gives a more appealing sight to your website. This will
provide your website a feeling of a surface underneath.

Page | 44
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

With the use of elements of web design will make your website more appealing to your users
but you need to make sure that your website is functional, responsive and useful. To create a usable and
effective website, follow the basic principles of an effective web design.

A. Portable Design - website design must be C. Direction - identify the order of importance
portable and accessible. Your need to must of the various elements and place them in a
compatible with other operating system and sequence where the eye moves and perceives
web browsers. You should also design your the things it sees. There should be consistent
website on which it can be access to a different layout and structure.
computer platforms or devices especially for
D. Simplicity - the more option you place in
those visitors who uses mobile device to access
your site, the more difficult it is for a visitor to
a website.
make a decision and more time is required to
B. Design for Low Bandwidth - not all user who browse through them. as what they usually say
are online are connected to a high-speed "simplicity is beauty".
internet connection. In designing a website you
E. Regular testing – every device or project
need to avoid large graphics or animations as
needs maintenance, same as your website.
the users may leave the site if downloading is
Website should be regularly upgraded, updated
slow.
and tested so that problems will be quickly
resolved. Visitors who have encounter any
errors like problems in loading or viewing in
your website will not hold on.

Web Page Design Using Templates and Online WYSIWYG.

WYSIWYG is an acronym for "what you see is what you get". There many tools on
creating or designing a website. However, there are tools offers WYSIWYG process. These are
tools on which the content (text and graphics) can be edited in a form closely resembling its
appearance when printed or displayed as a finished product, such as a printed document, web
page, or slide presentation.
1. Wix -. Its interface is one of the most intuitive, slick, and powerful in the ever- growing
group of website-building servicesWix offers standout features, such as online storage for
your site assets, cool video backgrounds, animations for titles, and mobile.(Retrieved from
https://sea.pcmag.com/wix/8396/wix)

2. Weebly - This free website builder allows you to build beautiful websites in a very short
period of time – even if you do not have any programming background. (Retrieved from
https://www.we bsitebuilderexpert.com/
website- builders/weebly/free-
website-builder- for-all/)

Page | 45
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

3. WordPress - is the world’s most popular tool for creating websites. WordPress is capable of
creating any style of website, from a simple blog to a full-featured business website. You can
even use WordPress to create an online store. (Retrieved from
https://wpapprentice.com/blog/what-is-wordpress/)

4. Drupal - It is a well-known content management system intended to help advanced

designers create a powerful website capable of handling large volumes of visitors and
hundreds of pages of content. (Retrieved from https://www.business.com/reviews/drupal/)

Creating your Own Website using Wix.

Wix is a WYSIWYG web hosting service. It offers free, professional, and business web hosting
services. Wix also has an iOS and Android app which you can use to manage your website whenever
you do not have an access to a PC.

Wix is another Web site that offers its users to create their own Website. The advantage of
using Wix is that knowledge of Web site programming is not a prerequisite. It also offers a wide
range of templates. These templates have been designed for every purpose intended by the user.
This is possible because different Web site developers contribute to the pool of themes available.
Wix offers a drag-and–drop facility. Users can simply grab elements such as textboxes, photos, and
shapes to arrange them in the layout they want.

Creating a Wix Website:

Page | 46
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

1. Create an account on Wix by going to www.wix.com. You have to sign up to use the
website. You may choose to log in using your Facebook account or Gmail account. Once
logged in, you can use the existing templates of wix and just modify and enhance your
website

2. Click Create Site.

3. Choose what kind of website do you want to create.

4. You will be instructed to choose a template. Click Choose a Template.

5. Pick any template

that you want. Choose categories and click any templates

Page | 47
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

6. Your website will be generated and soon you will end up in the site’s Wix editor.
7. The editor is pretty easy to use.The center shows the preview of your website. The
design tools are located on the right. It is now time to edit the website to your liking.
8. Click Edit and create your own amazing website.

9. You can click Preview in order to see the design before saving the website

10. Once you are done editing and click Save and choose Save & Continue.

Page | 48
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.
 Empowerment Technologies

11. You can click Edit and type the filename. Click done to publish the website. To
understand more the Wix Website, you can access the video tutorials below:

How to Make a Website with WIX? WIX Complete Tutorial?

https://www.youtube.com/watch?v=aa6JS_8QtNI
Wix Tutorial For Beginners - Create A Wix Website In Minutes
https://www.youtube.com/watch?v=JTdK9q_iuE0

Page | 49
This document is a property of ARK TECHNOLOGICAL INSTITUTE EDUCATION SYSTEM INC. Unauthorized
reproduction is strictly prohibited unless otherwise permitted by ARK Management.