Empowerment

Technologies
QUARTER 1
MODULE

8 Collaborative Development of ICT Content

1erv
 Empowerment Technologies
Quarter 1 – Module 8: Collaborative Development of ICT Content

Republic Act 8293, Section 176 states that no copyright shall subsist in any work of the Government of
the Philippines. However, prior approval of the government agency or office wherein the work is created shall
be necessary for the exploitation of such work for a profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been exerted to locate
and seek permission to use these materials from their respective copyright owners. The publisher and authors do
not represent nor claim ownership over them.

EXPECTATIONS
Learning Competency
✓ share and showcase existing or previously developed material in the form of a
collaboratively designed newsletter or blog site intended for a specific audience or viewer.
Learning Objectives
At the end of the learning period, the students shall have:
▪ identify the benefits of using WYSIWYG (What You See Is What You Get) editor;
▪ understand the steps in creating a website using Microsoft Word;
▪ create a website in Microsoft Word by applying the web design elements;
▪ identify the steps in creating a website using WIX, an online WYSIWYG (What You
See Is What You Get) editor;
▪ understand the advantages of using online collaborative tools;
▪ enumerate the different roles of the contributor; and
▪ collaborate in creating a website.

LESSON
Websites let you market your products online and sell them. When we talk of
products we are not just talking about food, clothes or services, but ideas can be marketed
as well. With the aid of the Internet, websites are a wonderful platform to market your
products.
There are several ways you can design or create your own website. There are schools
or online schools that offer courses on website development. They teach you how to program
using computer languages where you can create and design web pages using HTML and
CSS respectively. This may take time but the skill that you’ll acquire is something that is
pretty much useful especially if you are serious about becoming a website developer.
But what if you do not have the time to undergo formal training for a website
development course and at the same time are not interested in programming at all?
This is where the WYSIWYG editor comes in. Whatever you write, insert, draw, put,
rearrange, and everything you do on a page is what the audience will see. With the use of
the WYSIWYG editor, everyone can create their website even without prior programming
skills. The best thing is it’s quick and simple to use. The WYSIWYG editor makes creating
a website a fun thing to do.
For this particular lesson, you will be using MS Word, which does not require an
internet connection to create web pages. In addition, you will use an online platform in
creating a website. In this lesson, we will consider Wix.com. It is one of the most popular
web building tools featuring a WYSIWYG editor, and many businesses and individuals use
Wix to create websites. They also give users a range of templates, in addition to allowing
them to access their easy-to-use editor.
2erv
Steps to Web Page Creation Using MS Word

Step 1
There are two ways on how you can open or launch MS Word:
a. Click on the screen’s shortcut button, or
b. select it from the list of programs under the start tab.
Then click on Blank Document in the New Document task pane.
Step 2
Layout your web page as a word document. Arrange headings, paragraphs and graphics the
way you want them to appear on your page.
Step 3
Preview the document and correct any wrong formatting. Adjust the margins to fit text into
a single line, if necessary.
Step 4
Click on the home button at the top left of the document. Choose "save file as". Choose the
option Web Page (*.htm; *.html). Then type the file name that you want for your document.
And click save.
Note: Before saving the file, make sure that you have decided where you wish to save
your website file. You can either create a new web directory or select from your
existing directory.
Step 5
Build or create additional web pages that are connected to your main site. Adjust any
hyperlinks to reflect the correct page that they should open.
Note: Inserting hyperlinks and images were previously discussed in this subject.
Follow the principles and processes that were explained.
Step 6
Save all your files or pages in the same web directory.

Steps to create a website using www.wix.com.

1. Open your web

browser and type
in the address
www.wix.com
then press Enter
button. You will
be directed to the
site’s home page.
Click the Sign in
button to create
your account.

2. The Sign Up/Log In page will appear. Sign up is used for the creation of a new account
while Log in for an existing account. You are given three (3) choices for account creation:
✓ Continue with Facebook
✓ Continue with Google
✓ Continue with Apple

3erv
 Choose whatever is appropriate for you. Please bear in mind that you are creating a
free subscription account, but the premium is also available if you wish to utilize the full
service of this online WYSIWYG editor.

3. You will be given several questions to answer. You may answer it or skip it.

After finishing the questions, this page will emerge. Click Choose a Template.

4erv
 Note: ADI stands for Artificial Design Intelligence. It is the first-ever artificial
intelligence that designs a website. But for this lesson, you will have to Choose a
Template so that you can have the freedom to create your site.

4. Your next step is to choose from the available template the design that you wish to have
for your website. There are different designs to choose from. For every template, you
have the option to either View or Edit it. The View button allows you to have a quick
peek at the overall layout of the template while the Edit button redirects you to the
template’s edit page.

5. Once you are on the Edit page, you can now make the necessary changes to suit your
website’s content.

As you can see, there are plenty of toolbars that you need to get acquainted
with but don’t be alarmed they are easy to use and understand.
There are several menus on the upper part of the Editor. They are Site, Setting,
Tools, Dev Mode, Help Upgrade. In this module, we will discuss what is relevant for
a free account.
Switch Page – it allows you to see which page you are working on.

5erv
Desktop/Mobile – your website should be accessible on both desktop and mobile
environments. You can click Desktop to edit your website on desktop mode and click Mobile
to edit on the mobile environment. This is to ensure that whatever device the user of your
website is using to access your website, the web page is displayed accurately.

Saved – any changes made to your web page should be saved immediately for the
correction to take effect.
Preview – this enables you to view your site even without publishing.
Publish – saved and finished website can now be accessed over the Internet once you click
this button.
Reminder: Published websites can still be edited. Make the necessary changes on the page
that you wish to edit and then save it. To enforce the changes, you have to publish the
website again by clicking the Publish button.

Buttons on the left

side of the Editor
dictates what can be
incorporated in your
website’s design.

Menus & Pages – A site menu is an important part of a website. This allows your
visitor to navigate between your pages or sections. This button enables you to select
the page you would like to place the menu button on.
Background – You can apply color, image or video as background to other pages on
your site.
Add – The Wix Editor contains hundreds of customizable elements (i.e. images, text,
shapes, strips, and more) that you can use to create your site.
Add Apps – More than 300 popular web apps, powerful services and amazing features
fill the Wix App Market to enhance your website. Most of the applications are free to
use, designed for mobile use and can be linked to your website with just a few clicks.

6erv
Media - The Media Manager includes all the media files, such as images, videos,
audio, docs and vector art, on your website. This also contains media files that you
have uploaded, free Wix media and your purchased media.
Start Blogging – This button permits you to create a blog site within your website.

Editor
Toolbar is
the set of
icons on the
right side of
the Editor.

7erv
6. Saving and publishing the website will be your last action to make your website live or
accessible over the Internet

Invite Contributor
This is one of the Site Actions that can be utilized by the user of Wix. This feature
allows the owner (creator of the site) of the website to invite other people to help manage
their site. They are called ‘contributors’. Being the website owner, you have the right to
manage all aspects of your site including inviting contributors and handling their
permission. Each invited contributor must have their own Wix account.
Note: Currently, it is not feasible for more than one contributor to edit a site at a
time. Proper scheduling is desired to ensure every contributor will be able to fulfil
their role.

8erv
 How do you invite a contributor? You have to go to your account’s dashboard. There
are three ways to do this. If you are in the Edit environment of your website, go to Site and
at the bottom of the list, click Exit Editor. Still, in the Edit environment, go to Settings
then click My Dashboard. And lastly, you can Log in to your account and straight away
you’ll be directed to your dashboard.
Once you are in your dashboard, look for the specific website that you wish to be
shared with other people. Click the Site Action button then choose Invite Contributor.

The Invite People to This Site page will appear. Type in the email address of your
contributor, choose the assigned Role for them then click Send Invite. The contributor’s
invitation will be sent to their email address and the recipient must respond by confirming
the request.

9erv
 When you invite a contributor, you choose the role that you assign to them. As the
owner, you have to define the kind of access that a contributor can have over your website.
The key is to identify what type of access is relevant to a particular contributor. This role
assignment can also be changed by the owner from time to time .

Below are the general available Roles for Contributor in Wix.

1. Admin
Has complete access to the website but cannot change the payment information, remove
or duplicate the site.
2. Limited Admin
The contributor has full access to the site but cannot change the payment information,
remove or duplicate the file or publish the site.
3. Website Manager
This person can help you create or design your website but has limited access to your
site's dashboard to prevent viewing sensitive and business information.
4. Limited Website Manager
May edit the site, access the dashboard to monitor site settings and applications, but
the site cannot be published by this person.
5. Back Office Manager
Has the authority to access the dashboard to manage site settings and apps but cannot
change the site. Contributors with this role will be able to access and manage
confidential and business information.
6. Blog Editor
A Blog Editor has full access to every feature in the Blog Manager including publishing,
deleting, and editing blog posts and managing categories but not other areas of your
site.
7. Blog Writer
This contributor can write posts but cannot create or manage categories.

ACTIVITIES
Activity 1. Website Creation using Microsoft Word
Your task is to create a personal website using Microsoft Word. In this activity, you
will be using your output in the previous module (week 7) as the basis for the design of your
website. Enhancement of the original design is welcome. The Web Design Elements must
be seen in your layout and the Parts of the Website are prominently designed.
Your final output, meaning all web pages created, is to be uploaded in online storage
(i.e. Google Drive, Dropbox and OneDrive) that will be provided by your subject teacher.
The criteria are as follows:
Criteria Points
1. Text – font family and type must be chosen correctly, simply, and in
10
a readable format.
2. Graphics/Illustrations – must be of high quality and the text and
10
other elements must be well organized.
3. Shapes – must be used to denote an enclosed boundary in the overall
design. It was used and positioned appropriately which contributed 10
positively to the overall design.
4. Background – must be attractive and was used to bring out the
10
content offered on the website.
5. Color – must blend well and complement the elements on the page. 10
6. Links – must enable the users to connect to another site or page that
10
is related to the content of your page or site.

10erv
7. Parts of a website are prominently designed on the website.
a) The Header
b) The Menu System
50
c) The Content Area
d) Side Bar
e) The Footer

Activity 2. Website Creation: Collaborative Work Using Wix

1. This is a group activity with five (5) members.
2. Form a group with common interests or hobbies such as playing basketball or online
game, cooking, fashion or designing clothes, music, vlogging, etc.
3. Create a website using Wix and design the site based on your group’s interests.
4. The website should include two blog posts originally written by the group members.
5. Templates can be used provided that the majority of the images and videos embedded
are self-produced.
6. Link to other related websites should be included in your site’s layout.

Category 20 15 10 12
Navigation is Navigation is Navigation Navigation is
clear, properly clear and links contains links missing.
Web Skills labelled, and work. that do not
links are work.
correct
The content is The content is The content is The content
complete and clear and somewhat has incomplete
Content has links to complete. complete. information.
related
information.
The output is The output The output has The output
Correctness free from contains several errors. contains many
errors. minimal errors. errors.
Appearance Appearance is The layout is The layout is
Layout and
looks organized and inefficient for not organized.
Design
professional. consistent. readers.
Images have a Images are Some images No images or
strong relation related to the are related to images are not
Images to the website, website. the website. related.
and most are
self-produced.

WRAP-UP

1. What are the benefits of a WYSIWYG editor to a non-programmer?

__________________________________________________________________________________
__________________________________________________________________________________
______________________________________________________________________

2. What are the benefits of using an online collaborative tool such as www.wix.com?
__________________________________________________________________________________
__________________________________________________________________________________
______________________________________________________________________
3. Enumerate the Roles of Contributors in Wix.
a. _______________________________________
b. _______________________________________
c. _______________________________________

11erv
 d. _______________________________________
e. _______________________________________
f. _______________________________________
g. _______________________________________

VALUING

1. What makes a WYSIWYG editor such as Microsoft Word a valuable tool to use in
website designing??

Place your answer here.

_____________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
______________________________.

2. Between MS Word and Wix, which application do you prefer and why?

Place your answer here.

_____________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
________________________________________________________________________.

References
Villarroya, M. (2020). Quarter 1 – Module 17: Collaborative Development of ICT Content (Part 2) [PDF
Document]. Department of Education - Schools Division of Pasig City.
Villarroya, M. (2020). Quarter 1 – Module 18: Collaborative Development of ICT Content (Part 3) [PDF
Document]. Department of Education - Schools Division of Pasig City.

12erv
 WEEKLY School: GENERAL SANTOS CITY NATIONAL HIGH SCHOOL Quarter: Quarter 1
HOME
LEARNING Teacher: HUMSS-1D Week: Week 8
PLAN Subject: Empowerment Technologies Date: November 2-5, 2021

Day and Learning Learning

Learning Tasks Mode of Delivery
Time Area Competency
6:00–6:45 Wake up, eat breakfast and get ready for the scheduled lessons.
6:45-7:30 Doing other activities before the start of the lesson. (Exercising, taking a bath, changing clothes)
M-W-F Specific Activities For Printed Modular: Learners or
Empowerment share and showcase At the end of the learning period, the students shall have: Parents/guardians will hand in the
or Technologies existing or previously 1. identify the benefits of using WYSIWYG (What You See Is output, answer sheets or activity
(for the developed material in the sheets to the school based on the date
form of a collaboratively What You Get) editor;
T-TH Strand) 2. understand the steps in creating a website using Microsoft and time scheduled.
designed newsletter or
Word;
blog site intended for a
As 3. create a website in Microsoft Word by applying the web For Digital Modular: Learners may
specific audience or
reflected in viewer design elements; upload/submit the output, answer
the class CS_ICT11/12-ICTPT- 4. identify the steps in creating a website using WIX, an online sheets or activity sheets to the LMS
program. WYSIWYG (What You See Is What You Get) editor; (e.g., Google Classroom or other
Ii-j-13
5. understand the advantages of using online collaborative online platforms) based on the date
tools;
and time scheduled.
6. enumerate the different roles of the contributor; and
7. collaborate in creating a website
*As the learner/parent enter the school,
Instructional Delivery strict implementation of the minimum health
protocols will be followed as prescribed by
▪ Use the SLM on familiarizing oneself, doing self-awareness the DOH and IATF.
activities and exploring oneself through the concept notes of
the lessons. Note: The teacher can communicate to
his/her learners and do oral questioning and
Assessment/Activities
assessment to the learner for follow-up and
Answer/Do the following: verification.
o Activities
o Wrap-Up
o Valuing

Note: Summative tests may be given every Thursday or Friday

every other 2 weeks as the basis for written tasks.
IPT may be given for performance tasks.

1erv