Our Lady of Lourdes College Foundation

Daet, Camarines Norte

Senior High School Department
SY 2021 - 2022

Empowerment Technologies

Quarter 4 - Module 4, Week 1 Lesson 1: Online ICT Platforms as Tools for ICT Content Development

Time Frame: 2 weeks

Content Standards: the principles and techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks
Performance Standards: at the end of the 2-week period independently apply the principles and
techniques of design using online creation tools, platforms, and applications to create original or
derivative ICT content for use in specific professional tracks These may be in the form of, but not limited
to:
1. Survey instruments using Google forms (Business/ Academic)
2. Athletic match-ups and league standings using Mindmeister (Sports)
3. Catalogues/Swatches/ options for products and services using Prezi (Tech-Voc)
4. Online photo album of artistic works or photographs using Picasa (Arts)
5. Online music production
MELCS:
1. Evaluate existing online creation tools, platforms and applications in developing ICT content for
specific professional tracks (CS_ICT11/12-ICTPT-Ig-h-9);
2. Apply web design principles and elements using online creation tools, platforms, and applications
to communicate a message for a specific purpose in specific professional tracks (CS_ICT11/12-
ICTPT-Ig-h-10);
3. 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-11).

This module is about the online creation tools and platforms exist for users to utilize in order to
create content that corresponds to professional tracks such as academics, sports, arts, and design,
technical vocational courses

Lesson 1: ICT Online Platforms in Creating Web Content

An online marketplace that places one party in touch with another, such as buyers and sellers.
Examples are eBay, Craigslist, Amazon Marketplace, Airbnb and Uber. The online system may be
entirely self-contained, or it may allow third-party apps to connect via the platform's programming
interface. In personal computing, a platform is the basic hardware (computer) and software (operating
system) on which software applications can be run.
Online platforms or online website created to aid users in creating their web content and cater to
different kinds of information such as texts, images, and videos. Online platforms are strong drivers of
innovation and play an important role in digital society and economy. They increase consumer choice,
improve efficiency and competitiveness of industry and can enhance civil participation in society.
The different online platform and web design elements & principle and application use to create a
good online presentation, webpage and content. Learners should know the principle and techniques of
design using online creation tool, platform and application to develop ICT content.

This module contains varied activities that can help you as a Senior High School student to not
just be a computer literate individual, but a creative and critical thinker as well as responsible user and
competent producer of information and communication technology.

1 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
The lesson contained in this module:
1. The Principles and Techniques of Design using Online Creation Tools, Platforms, and
Applications to Develop ICT Content for Specific Professional Tracks.

Pre-test!

Multiple Choice:
Directions: Read and answer the questions below. Write the letter of the correct answer on your
respective answer sheet.

1. What does CMS stands for?

A. Content Management System C. Content Management Serial
B. Critic Management System D. Critic Manpower System
2. What is a document which is designed for the World Wide Web?
A. Book C. Web Page
B. Newsletter D. Magazine
3. What is the term use for ready-made website
A. New Web Page C. Template
B. Design D. Builder
4. Which does not belong to group?
A. WordPress C. Facebook
B. Instagram D. Twitter
5. Which does not belong to the group?
A. MS-Word C. Google Chrome
B. FireFox D. Safari
6. What is an online platform that allows you to create your personal account or profile.
A. Social Media Platform C. Blogging Platform
B. Video Sharing Platform D. Content Management System
7. What type of software Microsoft Edge belongs?
A. Spreadsheet C. Database
B. Word Processing D. Browser
8. What element of web designing provides a feeling of a surface underneath?
A. Text C. Video
B. Background D. Color
9. Which principle of web designing when you avoid large graphics or animations?
A. Portable Design C. Design for Low Bandwidth
B. Simplicity D. Regular Testing
10. What is an element of web designing allows users to jump to another site or page that is related off to
your site?
A. Link C. Audio
B. Color D. Background

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).

Learning Activities

Activity 1 – Website or application(apps) you are using.

Websites or applications are now accessible through smartphones. It is up us users on how we use
it. In your smartphone or computer list ten (10) websites or applications you usually use or visit and

2 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
identify the best feature that you like on it. The first item listed on the table is an example to guide you on
this activity.
Website or Application
Website Function
Example Shopee Shopping Online
:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

On the listed items you presented in our previous activity, it shows that website is a tool for
information and entertainment. However, there are websites that offers you more than just reading articles
or listening to your music, these are what we call online platform-enabled website.
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.
Photo Credits: https://pixabay.com/photos/technology-developer-continents-3435575/

Here are the three types of online platforms:

1. Social Media Platform 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. Photo Credits: https://unsplash.com/photos/yyMJNPgQ-X8

2. Blogging Platform, 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 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
 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 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.
Photo Credits: https://unsplash.com/photos/sSPzmL7fpWc

Activity 2: 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 other
provinces.
4. A teacher wants her student to send their output online.
5. An ICT student plans to create a website about their school.
6. A group of Senior High student wants to share their ideas about
how 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.

Learning Content

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 serve 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.

4 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
 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 times 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 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 is related 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.

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.

1. 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 especially for those visitors who uses
mobile device to access a website.
2. 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 users
may leave the site if downloading is slow.
3. Direction - identify the order of importance of the various elements and place them in a sequence
where the eye moves and perceives the things it sees. There should be consistent layout and
structure.
4. 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".
5. 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.
Figure 1: Principles of web design

Portable Design Simplicity

Design for Low Web Design

Bandwidth

Direction Regular Testing

5 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
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 services. Wix offers standout features, such as online storage for your site
assets, cool video backgrounds, animations for titles, and mobile.
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
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.
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.

Activity 3: Investigating a website

Directions: In our lesson we have learned the elements and principles needed to create a website. On this
activity, you will investigate three websites and identify if these websites are 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. For every website there is a space provided so
that you can write your recommendation or suggestion on the web designing of the website.

a. Yale School of Art link: https://www.art.yale.edu/

b. Shopee link: https://shopee.ph/
c. Suzanne Collins link: http://www.suzannecollinsbooks.com/
Yale School of Art Shopee Suzanne Collins
Text
Graphics
White Space
Links
Color
Video/Audio
Background

Recommendations/Suggestions:
1. Yale of School of Art:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. Shopee
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
3. Suzanne Collins
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

Creating your Own Website using Wix.

6 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
 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.

Activity 4: Creating a Wix Website

Directions: For this activity you will create your personal website that focuses on your passion or
hobby.
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. Create for a client.
3. Choose Other.
4. You will be instructed to choose a category.
5. Create your website name.
6. You will be instructed to choose a template. Click Choose a Template.
7. Pick any template that you want. Choose categories and click any templates.
8. Your website will be generated and soon you will end up in the site’s Wix editor.
9. The editor is pretty easy to use. The center shows the preview of your website. The design tools
are located on the left. It is now time to edit the website to your liking.
10. Click Edit and create your own amazing website.
11. You can click Preview in order to see the design before saving the website.
12. Once you are done editing click Save and choose Save & Continue.
13. Create your own domain. eg. EmTechHUMSSByourlastnamehereyourfirstnamehere
14. 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
Let us now test your understanding by doing the activity below.

Activity 5: Website Making (Group Activity)

For this activity you will create your profile website.
1. Go to the website using an online WYSIWYG platform (Wix.com) and free host, then click sign
up.
Problem:
You are the marketing manager of a multinational manufacturing company that will establish its first
retail store in the country. The company will also develop a Website for the promotion of the said store.
You are asked to create an online collaborative word processing file that will be shared with different
officials of the company. This will be used to solicit their ideas.
Based on the inputs in this word processing file, you are expected to compile the ideas posted, then,
create and present a presentation file to the company’s executives. The presentation will also be attended
by the executives whom you have solicited the ideas from. You should include all of their ideas for
evaluation in the presentation.
2. Create a profile website. Therefore, you can add more pictures of you on the website.
3. Be creative.
4. Once done, submit your website address to your teacher.

7 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content
 (Note: Please be guided by the rubric for Website Design posted on your subject Facebook Group.)

Assessment / Evaluation
Activity 6: Distinguishing Your Learning.

I. Directions: Identify every item below if it belongs to the element or the principle of a 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 _____

II. 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 use in their
design.

References:

Wix.com, “Wix Website”, Accessed January 20, 2019,

https://www.wix.com/account/sites
Wix.com, Accessed January 20, 2019, Choose how you want to create your website,
https://www.wix.com/new/site?vertical=other
Wix.com, “Pick the Website Template you Love”, Accessed January 20, 2019,
https://www.wix.com/new/vertical?ref=myaccount&additional_referralinfo=site-less-mainbutton
Wix.com, “Pick the Community Education Website Template you Love”,Accessed January 20, 2019
https://www.wix.com/website/templates/html/community-education
Wix.com, “Different Templates”, Accessed January 20, 2019,
https://www.wix.com/website/templates

8 | Empowerment Technologies – Module 4 - Lesson 1: ICT Online Platforms in Creating Web Content