Name:___________________________________ Grade & Section:___________________

Subject: Empowerment Technologies Quarter: 1 Week: 5

Competency:
• Evaluate existing online creation tools, platforms and applications in developingICT content for specific professional
tracks (CS_ICT11/12-ICTPT-Ig-h-6);
• Apply web design principles and elements using online creation tools, platforms, and applications to communicate a
message for a specific purpose inspecific professional tracks (CS_ICT11/12-ICTPT-Ig-h-7);
• Create an original or derivative ICT content using creation tools, platforms, and applications to effectively
communicate messages related to specific professional tracks (CS_ICT11/12-ICTPT-Ig-h-8).
Reference Materials (Tx/LMs):
• DIWA Empowerment Technologies (Second Edition)

ICT ONLINE PLATFORMS IN CREATING WEB CONTENT

We are on the Information Age on which information seems so easy to reach. Oneof 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
relatedresources from the web. These resources were considered as web pages and multimedia (e.g.: videos, music, images).
There are websites that offers you more than just reading articles or listening to your music, these are what we
call onlineplatform-enabled website.

A platform-enabled website or online platform gives a feature on which allows tomanipulate 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 dailyactivity, shop online, or even creating a website of your own.
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 allowyou 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 agroup 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 ideasonline, blogging platforms is the perfecttool you can use.

3. Content Management System or CMS

One of the features of this platform is that you can publish your own website and manage its content through intranet or
in asingle 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.

Activity 1: Identify which online platform to use

Now you have learned the three types of online platform. These online platforms are tools that you can use to create
information, share ideas and connect to other people.Below are ten situations, read every item carefully and identify
which online platform is the best to use.

Table 1: Identify which online platform to use.

Situation Online Platform
1. John would like to chat with his uncle abroad. Social Media Platform
2. A Senior High School student would like to create a shopping
site for his small business.
3. Mike wants to write his plans about travelling from otherprovinces.
4. A teacher wants her student to send their output online.
5. An ICT student plans to create a website about their school.

22
 6. A group of Senior High student wants to share their ideas abouthow to reduce the
use of plastic materials.
7. Linda would like to upload her pictures last Christmas vacation.
8. Christian would like to check the profile of his friends online.
9. Mark wants to follow his favorite basketball player online.
10. The members of Supreme Student Government would like to
share their advocacy on having Math tutorial in their school.
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 allow 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 yourwebsite, 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 times that text give description to an image, soyou make that these two elements are well arranged.
3. White space - having a crowded website, it is very hard to direct the attention ofyour visitor’s eye. These white space
gives your website a room to breathe.

4. Links - links or hyperlinks allows user to jump to another site or page that isrelated 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 designingreally helps your visitors especially those websites that offers tutorial of certain
subject.
7. Background - texture or background gives a more appealing sight to yourwebsite. This will provide your website a
feeling of a surface underneath.
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
aneffective web design.
Principles of Effective Web Design

A. Portable Design - website design must be portable and accessible. Your need to must compatible with other
operating system and web browsers. You should also design your website on which it can be access to a different
computer platforms or devices especiallyfor those visitors who uses mobile deviceto access a website.

B. Design for Low Bandwidth - not all user who are online are connected to a high-speed internet connection. In
designing a website, you need to avoid large graphics or animations as the usersmay leave the site if downloading is slow.
C. Direction - identify the order ofimportance of the various elements andplace them in a sequence where the eye
moves and perceives the things itsees. There should be consistent layoutand structure.

D. Simplicity - the more option you place in your site, the more difficult it is for a visitor to make a decision and more
time is required to browse through them.as what they usually say "simplicity is beauty".

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.

2
22
 Figure 1: Principles of web design

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 aprinted 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,
andmobile. (Retrieved from https://sea.pcmag.com/wix/8396/wix)
2. Weebly - This free website builder allows you to build beautiful websites in a veryshort period of time – even if you do
not have any programming background. (Retrieved from https://www.websitebuilderexpert.com/website-
builders/weebly/free
-website-builder-for-all/)
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 businesswebsite. 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/)

Activity 2: Investigating a website

In our lesson we have learned the elements and principles needed to create a website. On this activity, you will
investigate a website and identify if this website is using the elements appropriately. Using the table provided, add a 🗸mark
if the website is using the elements correctly and X mark if the website is not using the element correctly.
There is a space provided so that you can write your recommendation or suggestion on the web designing of the website.

SHOPEE
Text √
Graphics
White Space
Links
Color
Video/Audio
Background

Recommendations/Suggestions:

Shopee

__ _
____________ _
_

22
Creating your Own Website using Wix.

Wix is a WYSIWYG web hosting service. It offers free, professional, and businessweb hosting services. Wix also has an iOS
and Android app which you can use to manage your website whenever you do not have 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 shapesto
arrange them in the layout they want.

Creating a Wix Website

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 ‘Other’
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
6. Your website will be generated and soon you will end up in the site’s Wix editor
7. The editor is 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
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:
1. How to Make a Website with WIX? WIX 2019 Complete Tutorial?
https://www.youtube.com/watch?v=aa6JS_8QtNI

2. Wix Tutorial For Beginners 2019 - Create A Wix Website In Minutes

https://www.youtube.com/watch?v=JTdK9q_iuE0

ASSESSMENT

Directions: Identify every item below if it belongs to the element or the principle ofa web design. Write E if it belongs to the
Element of Web Design and write P if it belongs to the Principles of Web Design.

1. Portable Design 6. Graphics/Illustrations

2. Background 7. Color
3. Text 8. Regular Testing
4. Design for Low Bandwidth 9. Links
5. Simplicity 10. White Space

Directions: Read the statements below an answer. Write “T” if the statement is true and write “F” if the
statement is false.

1. Weebly is considered as a Pure WYSIWYG platform HTML editor.

2. In designing a website it is better to use large graphics and animations.
3. Website should be regularly upgraded, updated and tested so that problems will be quickly resolved.
4. Drupal is a free and open-source content management system (CMS) based on PHP and MySQL
5. Some web designers use the company logo as reference to the color they will usein their design.

22