Empowering Technologies

Introduction telephone, internet and etc. to send, save, and edit

information.
Key Points:
The use of communication technology
spread in the entire country now a day even in rural
 Empowerment – authority or power given areas. According to Rappler blog site, there are 119
to someone to do something. million mobile phone subscriptions from a total
population of 101 million and 47 million active
 Technologies – tools, machines, Facebook accounts.
equipment or inventions created to help in
making human lives more comfortable. The Philippines is the fastest growing app
market in Southeast Asia and the highest digital
 Empowerment Technologies deals with population in the world. The top online activities are
the maximum use of available social media, videos, online mobile games,
technologies to create necessary outputs location-based search and online shopping. Staying
needed for everyday experiences. connected with loved ones, friends, and relatives is
a fundamental need for Filipinos.
 The internet is a vast network that
connects computers all over the world.
Through the Internet, people can share The current state of Information
information and communicate from Communication and Technologies
anywhere with an Internet connection.

 Social Media is a computer-based What is World Wide Web?

technology that facilitates the sharing of
ideas, thoughts, and information through the
building of virtual networks and World Wide Web is also known as WWW or W3
communities. introduce by Tim Berners-Lee. It consists of
different pages that are formatted in a markup
 Social change focuses on transformation language called HTML (Hypertext Markup
in cultural symbols, social organizations, Language) and linked to each other that contain
rules of behaviour, and value systems. text, graphics, multimedia files, hyperlinks and etc.

 Empowerment technologies – Social Types of Web

change
 Web 1.0 - The first development of World
 Digital Native – a person born surrounded
Wide Web where web pages are static. It
by ICT.
also known as flat or stationary page and it
cannot be manipulated by users.
 ICT Hub of Asia – Philippines
 Web 2.0 - It is a dynamic web page where
 Selfiest City around the world – Makati
user can interact with page like creating a
City user account, posting comments, uploading
files and images, and others. Example: Blog
sites, Facebook, Twitter, Instagram,
WEEK 1 & 2 YouTube.

What is ICT?
o Features of Web 2.0
ICT or Information and Communication
Technology refers to the use of communication o Folksonomy – users can
technology such as laptop, smart phones, tablet, classify and arrange information
Empowering Technologies

by adding tag or label. Pound camera in taking pictures instead of DSLR

sign (#) is used in Facebook, camera.
Twitter, Instagram and other
social networking sites. Example 2. Social Media – an application and website
in tagging on Facebook: where user can communicate, create and
#TeamKawayan, #Single share content, and participate in online
communities.
o Rich User Experience – user
can have high interaction with
the content of the page and can  Type of Social Media
achieve level of expertise.
o Social Network – A website where
o User Participation – user can people with the same interest come
put content on their own in web together to share information.
page like comment, evaluation, Examples: Twitter, Instagram,
and etc. Facebook

o Long Tail – A site that offers o Social News – A website where

services and brings individual user can post stories and are ranked
and businesses into selling based on the popularity through
different goods and commodities voting. Examples: Digg, Reddit,
such as shopping site like OLX, Propeller, Slashdot, Fark
Lazada, Shopee, Zalora and
others. o Bookmarking Sites – A website
that allows you to share and store
o Software as a service – users internet bookmarks, articles, posts,
can subscribe to a software blogs, images and others.
when they need it instead of Examples: Pinterest, StumbleUpon,
purchasing them. Dribble

o Mass Participation – sharing of o Media Sharing – A website that

diverse information through allows you to share and store
universal web access. multimedia files such as video,
photos and music. Examples:
 Web 3.0 (The Semantic Web) - A new Instagram, YouTube, Flickr
paradigm in web interaction extension of led
by World Wide Web Consortium (W3C) o Microblogging – a website that
where it provides framework that allows allows you to broadcast short
data to be shared and reuse. message. Examples: Twitter,
Tumblr, Meetme

Trends in ICT o Blogs and Forums – a discussion

website that allows user to ask
questions and comments on a
Technology keeps rising and improving every time. journal posted by an individual or
The use of technology connects us to the people group. Examples: Wordpress,
around the globe and gives us current information Blogger
on the trends in information and communication.

3. Mobile Technologies – a technology used

1. Convergence – it refers to fusing of in cellular and other devices such netbook,
technological advancement to work on a laptop, tablet, smartphones and etc.
similar task. Example. Using smartphone as
Empowering Technologies

4. Assistive Media - A platform that assist 3. Cyber Stalking - A criminal practice where
people with disability. It will guide the electronic communication is used to stalk or
individual like a blind person by using an harass individual or group.
audio recording.
4. Sexting - The act of sending sexually
explicit text messages, images, and videos.
Online Safety, Security, Ethics and
Etiquette Common Internet Threats

What is online safety? 1. Malware – also known as Malicious

Software.
The importance of internet plays a crucial
part in human development. Life becomes easy  Types of Malware
and comfortable because of this technology. Most
of us are connected to the internet via laptop, o Virus – a malicious program that
mobile phone, tablet, personal computer and other replicate itself by copying itself to
electronic gadgets. However, behind this another program.
technology there is a risk that everyone should be
aware of. You could be at risk on scam, bullying, o Trojan Horse – a malicious program
and illegal activities if you will not take precautions that disguised as legitimate program
in using internet. We need to keep ourselves safe that user will accept and use but
and secure whenever we use the internet. That is take control of your computer.
why it is very important to know and learn the ways
on how to be safe and secured online. o Worm – malicious program that
copy’s itself and spreads to other
Tips on how to be safe online computers.

Do not share your password with anyone. o Spyware – A malicious program that
Add friends you know in real life. gathers information from victim’s
Do not visit untrusted websites. computer and send it back to the
Add password to your WIFI at home to make it hacker.
private.
Install and update antivirus in your computer. o Adware - An unwanted
Do not give your personal information to anyone advertisement that will pop-up
Think before you click. several times on victim’s computer
then behave abnormally and tedious
Never post about your future vacation.
to close them.
Common Internet Risk
o Keylogger – A program that runs in
the background and steals user
1. Cyberbullying - It happens when someone credentials and confidential
intentionally abused, harass, and mistreated information and send back to hack
by other person using electronic by recording every keystroke that a
communication. user makes on their computer or
device.
2. Identity Theft - It is a crime of stealing
personal information for the purpose of o Botnet – A collection of infected
assuming that person’s name or identity to internet–connected devices such as
make any form of transactions. PC and mobile phone that are
controlled by a common type of
malware.
Empowering Technologies

o Rootkit – A software tools used by Contextualized Online Search and Research

hackers to gain control over a Skills
computer on a network without being
exposed. What is Internet research?
o Ransomware – A ransom virus that
block the user from accessing the Internet Research is a research method in
programs or files and demands to collecting and gathering information via internet by
pay the ransom through online using search engine such as google. Search
method for the removal of the virus. Engine is a program that allows users to search for
content on internet. Examples of Search Engine are
2. Spam - Also known as junk email or as follows: Google, Yahoo! Search, MyWebSearch
unwanted email send by advertiser or bot. It & Bing.
can be used to send malware.
What is Copyright?
3. Phishing - A cyber-attack method using
deceptive emails and websites to acquire Copyright is a protection given to the
sensitive personal information. owner of the rights in an original work such as
books, musical works, films, paintings, and other
4. Cybercrime - A crime in which computer is works, and computer programs. This original work
used as object and tool in committing a is called intellectual property which is protected
crime such hacking, phishing, spamming, under Republic Act 8293 known as the ―Intellectual
child pornography, libel, hate crimes, Property Code of the Philippines‖.
identity thief and others. Cybercrime Law is
a law that deals with all forms of cybercrime. Copyright Infringement happens when the
copyrighted work is use by other person without
permission of the author or copyright holder. Any
Netiquette person who is infringing the right protected work
would be liable under the law.
There are times that netizens will give
compliments and positive reactions on your post What is Fair Use?
but there are also times that netizens will criticize or
give negative reactions on your post. Conflicts and Research is important to the students and
misunderstanding occur in social media because other people. Most of them rely on the information
netizens are not behaving well. Ethics and etiquette that they can get online. Although this information is
should be practice by people whenever they are in protected by a copyright law but we can still use
social media this information without permission in a limited way
under certain condition and purpose.
Netiquette is a word that came from the two
words ―net‖ and ―etiquette‖. It is an etiquette applied Fair use is the use of copyrighted material
online that shows proper manner and behavior. If for comment, teaching, criticism, news reporting,
you are a member of an online society through research, scholarship, and other similar purpose is
social media you are called netizen. And in not an infringement of copyright.
interacting with other netizen online, we need to
maintain good behavior which is acceptable to Example of this is when you post a quote
others in online community. 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.
Empowering Technologies

In fair use, 5% of the content of reference  Spend time selecting appropriate, legal
can only be copied. If 20% or less of reference images that project your message.
copied, there must be a secondary use agreement Every slide or page should contain an
and fee. And if 20% or more of reference copied, it image. It is better to have an image
requires purchasing of creative work. without text that text without an image.

Guidelines for Fair Use  6x6 rule: Six bullets, 6 lines, 6 words per
1. Majority of the contents created must be yours. line.
2. Give credit to the owner.
3. Don’t make profit of the copyrighted work.  Avoid fancy animations and transitions
unless they communicate a message.
WEEK 3 & 4
 Minimize – keep slide counts to
Productivity Tools minimum to maintain clear images and
keep the audience attentive.
Productivity Tools refers to the software that people
use to create and produce documents,  Clarity – avoid using fancy or too small
presentations, databases, charts, and graphs. font. Consider how big your screen.

Productivity tools helps you create professional  Simplicity – use bullets or short
quality documents, presentation, graphics, and sentences.
more.
 Consistency – make your design
Common productivity tools include Microsoft word, uniform.
excel, PowerPoint and LibreOffice.
Mail Merge (Microsoft Word)
Presentation Software

Presentation Software is used to create sequences What is Mail Merge?

of words and pictures that tell a story or help
Mail Merge is a Word’s way of generating mass
support a speech or public presentation of
mailings. It involves combining a list of names and
information.
addresses to individually address to each
Business presentation software emphasizes ease- person/receiver on the list. You can use Mail Merge
and quickness-of-learning and use while to create envelops of address labels. As well as
multimedia authoring software enables creation a form letters.
more sophisticated presentation that includes audio
and video sequences.

Animation on computers is one of the chief What are the common documents that involve
ingredients of multimedia presentations. Animation Mail Merging?
is simulation of movement created by displaying a
series of pictures, or frames.
 Main Document – this document text and
Tips for effective Presentation graphics. Example body of the letter.

 Mailing list – this is your data source that is

 Remember that presentation software is used to populate information in the letter. It
a VISUAL medium. Focus on contains names and address of the
communicating visually with text playing recipients.
a subordinate role.  Merged document – this document the
combination of the main document.
Empowering Technologies

Integrating Images and External Materials 2. Clip Art – These are generally .GIF files
used as a generic representation for ideas
and objects that you might want to integrate
Integrating or inserting pictures in your document in your document.
often improves the impression. A common use of
inserting on a document is when you are creating a 3. Shapes – Printable objects or materials to
resume. Though seemingly simple to do, your enhance documents’ appearance or for
knowledge on the different kinds of materials that composing and representing ideas or
you can insert or integrate in a word document can images.
help you create a more efficient, richer document
not only the content but also in physical form. 4. Smart Art – These are predefined sets of
different shapes grouped together to form
ideas that are organizational or structural in
nature. These are often use for crating
Common kinds of material that could be organizations, process, relationships or flow
integrated in the document for infographic documents.

5. Chart – A material use to represent date

1. Pictures – there are electronic or digital
characteristics and trends which is quiet
pictures or photograph you have saved in
useful when preparing reports that correlate
your local storage device. The following are
and present data in graphical manner.
the three most commonly types of picture
files:
6. Screenshot – Images captured on your
computer screen to create a more realistic
a. .JPG – Short term for Joint
image of what you are discussing.
Photographic Experts Group. This type
of file can support 16.7 million colors
that makes it suitable for use when
working with full color photographic Custom Animation (Microsoft Powerpoint)
images. Relatively small in file size.
Does not support transparency and
does not work well on lettering, line What is Animation?
drawing, or simple graphics.
Animation is a simulation of movement created by
b. .GIF – Short term for Graphics displaying a series of pictures, or frames. Animation
Interchange Format. This type of image on computers is one of the chief ingredients of
can display transparencies therefore multimedia presentations. There are many
good for blending with other materials or software applications that enable you to create
elements in a document. It is also animations that you can display on a computer
capable of displaying simple animation monitor. One of this application software are
but is not particularly useful in a printed presentation software that you can use to create a
document. Can only support 256 colors slide show for your presentation. Some of the
so it’s good mostly on logos and art popular software that are available online for free or
decors that has low resolution files. for purchase are WPS Office, LibreOffice, and MS-
PowerPoint.
c. .PNG – Short term for Portable Graphics
Network. Built around the capabilities of Hyperlink (Microsoft Powerpoint)
.GF for the purpose of transporting
images in the internet at faster rates.
Good for transparencies but does not What is Hyperlink?
support animation though can display to
A hyperlink or simply a link, is a reference
about 16 million colors.
data that the reader can directly follow either by
clicking or tapping. Hyperlinks are found in nearly
Empowering Technologies

all Web pages, allowing users to click their way

from one page to another. In text hyperlinks are
often color blue and underlined. When you move What are the common error values that you can
the cursor over a hyperlink, whether it is text, button encounter from faulty formulas?
or an image, the arrow cursor should be change to
a small hand pointing to the link.
1. #DIV/0! appears when entering a formula that
performs explicit division by zero (0), using a
Electronic Spreadsheet (Microsoft Excel) reference to a blank cell or to a cell that contains
zero as
the divisor in a formula or function that performs
What is Electronic Spreadsheet? division or running a macro that uses a function or
a formula that returns the #DIV/0! error.
According to emerald.com electronic
spreadsheet is probably the most useful general- The solution is to make sure that the divisor in the
purpose software for the microcomputer user. function or formula is not zero (0) or blank or
Almost all spreadsheets are now packaged in change the cell reference in the formula to another
combination with other applications, such as cell that does not contain a zero or a blank value.
database system and graphic capabilities.
2. ##### - appears when the column is not wide
Electronic spreadsheet refers to a collection enough to display the content and/or dates and
of text and numbers laid out in a rectangular grid. It times are negative numbers. The solution is to
is an application program commonly used for increase the column width.
budgeting, inventory management, decision
making, forecasting and other finance-related 3. #NAME? Appears when the formula refers to a
tasks. It replaces the traditional financial modeling range name that doesn't exist in the worksheet.
tools, the accountant’s columnar pad, pencil and This error value appears when you type the wrong
calculator. It a spreadsheet program, data and range name or fail to enclose in quotation marks
formulas used to calculate those data are entered some text used in the formula, causing Excel to
into ledge-like forms (Spreadsheets or Worksheets) think that the text refers to a range name.
for analysis, tracking, planning, or ―what-if‖
evaluations of the impact of real or proposed 4. #N/A – appears when
changes on an economic strategy.
A) an inappropriate value was given for the
A great free alternative spreadsheet lookup_value argument in the HLOOKUP,
program is LibreOffice Calc, and OpenOffice LOOKUP, MATCH, or VLOOKUP worksheet
spreadsheet program. function,

B) the VLOOKUP, HLOOKUP, or MATCH

What are the common arithmetic operations worksheet function was used to locate a value in an
used in Excel? unsorted table,

C) an array formula (array formula: A formula that

Arithmetic Operation Example performs multiple calculations on one or more sets
Operators /Symbols of values, and then returns either a single result or
+ (Plus Sign) Addition =A1+A2 multiple results. Array formulas are enclosed
- (Minus Sign) Subtraction =A1-A2 between braces { } and are entered by pressing
* (Asterisk) Multiplication =A1*A2 CTRL+SHIFT+ENTER.) is using an argument that
/ (Forward Slash) Division =A1/A2 is not the same number of rows or columns as the
^ (Exponentiation) Raises a no. to =3^2 range that contains the array formula,
a power
- (Negation) Negative -11 D) one or more required arguments were omitted
% (Percent Sign) Percentage =90% from a built-in or custom worksheet function,
Empowering Technologies

E) a custom worksheet function that you use is not What are the elements of Design?
available and

F) a macro that you run enters a function that 1. Line – Lines are defines by points moving in
returns #N/A. Solution is optionally, if error space. It can create a sense of movement
checking is turned on in Excel, click the button that or direction in your design. Lines can be
appears next to the cell that displays the error, click smooth, rough, straight, curve, broken, thick
Show Calculation Steps if it appears, and then click or thin.
the resolution
that is appropriate for your data. 2. Shape – A shape is an enclosed space, the
boundaries of which are defines by other
5. #NULL! Appears most often when you insert a elements of art like lines, colors, values, or
space (where you should have used a comma) to textures. Shapes can be used to create
separate cell references used as arguments for patterns and draw the viewer’s attention.
functions.
3. Direction – Applying motion to create the
6. #NUM! Appears when Excel encounters a visual illusion of movement. Use horizontal
problem with a number in the formula, such as the direction for calmness, stability and
wrong type of argument in an Excel function or a tranquility while vertical direction for
calculation that produces a number too large or too emotions of balance, formality and
small to be represented in the worksheet. alertness.

7. #REF! Appears when Excel encounters an 4. Size (Scale) – Basically the relationship of
invalid cell reference, such as when you delete a the area occupied by one shape to that of
cell referred to in a formula or paste cells over the another. Large elements means more
cells referred to in a formula. significant than the small one.

8. #VALUE! Appears when you use the wrong type 5. Texture – Refers to surface appearance of
of argument or operator in a function, or when you an object given by the dimensions, form,
call for a mathematical operation that refers to cells thickness, arrangement, and amount of its
that contain text entries. For example, the formula basic parts.
=A1+B1, where A1 contains the string "Hello" and
B1 contains the number 3, returns the #VALUE! 6. Color – Color is light redirected off objects.
error. It is used to create curiosity and emotions to
the viewer’s. It has three main
characteristics: hue (these are red, green,
Week 5&6 blue, etc.), value (lightness/darkness), and
intensity (saturation, or amount of pigment)
Basic Principles of Graphics and Layout and temperature (warm and cool).

The elements and principles of design are the What are the principles of Design?
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 1. Balance - Balance in design is the state of
what we do to those elements. 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.
Empowering Technologies

a. Symmetrical balance – Occurs What is Inforgraphic?

when identical weights are on equal
sides of a composition.
The term Information graphic or
b. Asymmetrical balance – Occurs Infographic is a photographic presentation of
when a design have unequal graphic data and information that use the different
weight on either side, but those elements of design to make data easily
unequal graphics need to balance
understandable briefly. Infographics make
each other (un-evenly balanced).
complex messages become more visually
c. Radial balance – Occurs when the appealing to the viewers. Visual Message
design elements swirl out from a Design can help with effectiveness of delivery
central axis (emanating from a of a message. It can lend assistance in
central point). presenting your ideas clearly.

2. Proximity – Maintains a relationship

between items that go together or inclose What are the Principles of Visual Message
proximity. The elements should be Design using Infographics?
connected visually.

3. Alignment – Alignment refers to lining up 1. Be unique - Be creative is one of the most

the elements of a design along the top, important aspect of designing an effective
bottom, center or sides of the elements. It infographic.
allows us to create order and organization in
our design. The whole point of the
2. Keep it simple - Make a design easy to
alignment is that nothing your design should understand. Straight to the point and
look as if it were places there randomly. focus more on the message.

4. Repetition, Pattern, and Rhythm – 3. Less is more - Focus on what matters.

Repetition duplicates the characteristics of Keep your text minimal will most likely
similar elements to contribute to design produce more impact than a page full of
consistency. It strengthens a design by tying words.
together individual elements; pattern is a
regular arrangement of alternated or 4. Sharing - Share it with your friends. It is
repeated elements like shapes, lines or the most important and effective thing to
colors; rhythm—is a combination of do in making infographic.
elements repeated, but with variations.
Using Image Manipulation Techniques
5. Contrast – Contrast refers to the use of
conflicting elements or colors while Image manipulation is an art that
remaining harmonious and unified when the
involves enhancing or modifying an image
artwork is viewed as a whole. It allows you
to give emphasis to key elements in your using different methods and techniques to
design. achieve desired result. By using image
manipulation on your photos, you can remove
6. Space – It refers to the area that an object blemishes on your face, change backgrounds,
occupies. Both positive and negative space smooth out rugged areas, and so on and so
should be considered in graphic design. forth.
White space gives your design breathing
room. 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
Empowering Technologies

operations such as cutting, cropping, replacing image. The higher the resolution, means that
and more. For this, you need an image editing there more pixels per inch (PPI), resulting in
software for image manipulation practices. The more pixel information and creating a high-
followings are some examples of image editing quality, crisp image.
software: Adobe Photoshop, Gimp, Corel
Draw, Pixlr Editor, PAINT.NET AND InPixio.
How to combine Text, Graphics, and
Images?
What are the online file formats for images
and text? Combining text, graphics, and images in your
design will make your message clearer.
Image file format refer to how data
associated to the image will be stored. It can
be compressed to decrease file size of the  Transparent shapes. Add simple opacity
image. There are two different compression to your shape to clearly see the text you
you can choose when enhancing your images: want to emphasize. It adds an elegant and
lossy and lossless compression. focal point to your design
Lossy compression reduces file size
by removing redundant information means that  Fonts and Shapes. Used the right font size
some data from the image file is lost. While (not to small and not to big) and font type in
Lossless compression retains values and your design and combined it with a nice
manages to lower file size. shapes.

What are the common image file formats?

 Text and background. Organized your
design. Make used of the different text
alignment on an image(s).

 Clean and clear background. Less is

more. Focus on what matters. Use a clean
and clear background for the message to
be readable.

Imaging and Design: Mobile Photography

Tips in doing mobile photography

What is Image resolution?  Clean the lens

 Use the highest megapixel available
 Use raw images, if supported
Image resolution refers to the number  Set the focus of the camera to the subject
of pixels in an image or the detail an image  Use the available light source to create your
holds. It is identified by the height and the width image
of the image. A pixel is just one unit of the  Use correct exposure
whole digital image it is the smallest unit of an
Empowering Technologies

 Use manual camera mode WEEK 7&8

 Use HDR, if available
 Don’t use digital zoom. It destroys the Online Platform-enabled Website
image quality
 Use ALL the available camera mode in
taking photos: wide angle for wider A platform-enabled website or online
perspective of backgrounds and telephoto platform gives a feature on which allows to
for closer perspective of objects manipulate the content of the website. Most of
 Use the rule of thirds, leading lines and the online platforms requires you to register to
various camera angles publish, manipulate, organize, or even delete a
 Take multiple shots certain web content. As a Senior High School
student, you are expected to know the different
online platform as this would help you in
Tips when editing your selfie photos different task like connect people, stream your
daily activity, shop online, or even creating a
website of your own.
1. Crop for better composition – By cropping
an image, you can remove unwanted
elements from the edges of the picture or Three Types of Online Platforms
re-position the objects to improve the
composition.
1. Social Media Platforms - This platform
2. Adjust Brightness and Contrast – allows you to create your personal account or
Changing the level of light and shadow, profile. After you register on this website, it will
reducing or increasing the contrast will dull allow you to create pages or even groups
and inexpressive photos turn into where you can share content and ideas. Social
breathtaking images.
Media platforms enables you to connect
3. Recover Details from shadows and yourself to other users and get updates on their
Highlights – Lightest areas are called news feed. Facebook, Instagram, and Twitter
highlights, while the darkest are shadows. In are examples of Social Media platforms.
some photographs, certain areas might
seem too light or dark, which means they 2. Blogging Platforms - A platform on where a
are overexposed. writer or even a group of writers can share
views on an individual subject. It is comparable
4. Adjust White Balance – You can use basic to a newsletter where you can add menus,
photo editing tips for temperature correction. designs or even multimedia of a subject.
Blogger is an example of blogging site. If you
5. Retouch Skin – Adjust shadows, midtones
love to write or want to share ideas online,
and highlights. Using retouch/erase tool if
available. blogging platforms is the perfect tool you can
use.
6. Remove distractions – Sometimes it’s
important to delete unnecessary elements 3. Content Management System or CMS -
from a picture. One of the features 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 software where you can
easily create, update, organize, and publish the
content of your website. A popular example of
CMS is WordPress.
Empowering Technologies

Web Page  Links – links or hyperlinks allows user to

jump to another site or page that is related
to the site.
Web page is designed for World Wide
Web on which it is consider as the document
 Color- the colors use in design is a very
inside it. Mozilla FireFox, Google Chrome,
important aspect. There are times that
Microsoft Edge or Apple's Safari are web
colors become visually distracting to
browsers which you can use in order to access
a web page. Nowadays, web pages serve as viewers. As some web designers do, they
an important role in the business world. Web use the company logo of their client as their
pages allows businesses to showcase their color reference.
company and advertise their products. Even
social media sites allow users to boost their  Video/Audio – there are sites use
popularity, this will help the users to promote audio/video to help visitors to better
their business or advocacy to other users understand what they are selling or
online. If you're planning to create a web page teaching. These elements of web designing
of your own, you can use a website builder like really visitors especially those websites that
WordPress, Wix or Adobe Dreamweaver. offers tutorials.
These website builders are very powerful tool
and user-friendly on which you can create  Background – texture or background gives
website by just dragging and dropping the more appealing sight to the website. This
elements of your website. However, there are
will provide the website a feeling of a
certain elements and principles in building your
surface underneath.
own website.

Elements of a Modern Web Design Principles of Effective Web Design

 Text – this is a mandatory element of a web To create a usable and effective website, follow
the basic principles of an effective web design
page. However, visitors got distracted about
to make sure that your website is functional,
the font family of the text on website. So,
responsive, and useful.
while designing website, make sure to
choose well the font family and type that
A. Portable Design - website design must
you need to use n your design and make be portable and accessible. Your need
sure the text is clear and readable size. to must compatible with other operating
system and web browsers. You should
 Graphics/Illustrations - make sure images also design your website on which it can
or illustrations are not pixelated or must be be access to a different computer
on good quality. There are times that text platforms or devices especially for those
give description to an image, so make that visitors who uses mobile device to
these two elements well arranged. access a website.

 White Space - having a crowded website B. Design for Low Bandwidth - not all
makes it hard to direct the attention of user who are online are connected to a
visitor’s eye. These white space gives high-speed internet connection. In
website a room to breathe. designing a website, you need to avoid
large graphics or animations as the
Empowering Technologies

users may leave the site if downloading  Weebly - This free website builder allows
is slow. you to build beautiful websites in a very
short period – even if you do not have any
C. Direction - identify the order of programming background.
importance of the various elements and
 WordPress - is the world’s most popular
place them in a sequence where the eye
tool for creating websites. WordPress is
moves and perceives the things it sees. capable of creating any style of website,
There should be consistent layout and from a simple blog to a full-featured
structure. business website. You can even use
WordPress to create an online store.
D. Simplicity - the more option you place
in your site, the more difficult it is for a  Drupal - It is a well-known content
visitor to decide and more time is management system intended to help
required to browse through them. as advanced designers create a powerful
what they usually say, "simplicity is website capable of handling large volumes
beauty". of visitors and hundreds of pages of
content.
E. Regular testing – every device or
project needs maintenance, same as
your website. Website should be
regularly upgraded, updated, 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.

 Wix – Its interface is one of the most

intuitive, slick, and powerful in the
evergrowing group of website-building
servicesWix offers standout features, such
as online storage for your site assets, cool
video backgrounds, animations for titles,
and mobile.