Amaya School of Home Industries

Sahud-Ulan, Tanza, Cavite

Self-Learning Material

Grade 11 – Empowerment Technology

Quarter 1 – Module 6: Online Platforms

For ICT Content Development

Source Image: unsplash.com

 What I need to know

This module covers about Online Platforms for ICT Content Development. It also includes the
following topics:

• Nature and Purposes of online Platforms

• Web applications for content development
The following are our targets for this session:
1. Differentiate the platforms available for developing web content;
2. Understand the purpose of these platforms and know the basic of using them; and
3. Enhance one's knowledge in the world of cloud computing.
Online platforms that you use for ICT content development are social media platforms like Facebook
and Multiply, and blogging platforms like WordPress, Tumblr, and Blogger. Blogging platforms are
not as popular but are highly customizable. Reflect on the question, which platforms superior? Social
Media Platforms or Blogging Platforms? Why?

What I Know

Direction: Read and answer the questions below. Write the letter of the correct answer.

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

1
 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 of to your site?
a. Link c. Audio
b. Color d. Background

Lesson 1: ICT Online Platforms in Creating Web Content

BRIEF INTRODUCTION
We have discussed some of the platforms already available on the web. This time, we will take
a more in -depth approach on these platforms and when to use them. Is there a superior platform? We
are here to find out!
In the earlier years, or sometime in the 1990s, creating a web page or a website was a skill that
requires a mind of a computer programmer, working on standard lines of computer code that need to be
memorized to produce a basically flat but colorful document

What is it

Online Platform and Applications

1. Social Media Platforms - This platform allows you

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

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

Blogs - which is shorthand for Web blogs are nothing more than online journals. But once the
journal owner opens a blog item to public comments and gives it the ability to be referenced
(Trackbacks) via another blogger’s online journal, effectively clothes blogging with a social
feature.

3. Content Management System (CMS) - is a computer application (sometimes online or

browser- based) that allows you to publish, edit and manipulate, organize and delete web
content. CMS is used in blogs, news websites, and shopping

What’s more

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 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/Application Function
1 Shopee Online Shopping
2
3
4
5
6
7
8
9
10

3
 What is it

Online Platform for ICT Content Development

1. Presentation/Visualization - You don't have to

download an office suite to build great-looking
presentations for work, a talk, or school. There are
plenty of online options that work well from any
computer with a web browser, whether it's your
desktop, a PC at work, or a laptop on the go.
Examples of Presentation/Visualization:

• Prezi
• Zoho
• Slideshare
• Mindmeister

2. Cloud Computing - the practice of using a network

of remote servers hosted on the Internet (or the “cloud”)
to store, manage, and process data, rather than a local
server or a personal computer.

Cloud Computing Examples:

• Google Drive
• Evernote
• DropBox
• iCloud
• OneDrive

3. Social Media Platforms - Websites like Facebook

allow you to create not only personal accounts but
also pages and groups where you can share content.
Six Types of Social Media

• Social Networks
• Bookmarking Sites
• Social News
• Media Sharing
• Microblogging
• Blogs and Forums

4
4. Website Creation - Website builders are tools that typically allow the construction of
websites without manual code editing.

Example of Web Creation:

• Wix
• Weebly
• Squarespace

5. File Management - Online file converters are now very accessible. Whenever you need to
perform some transformation for your files, they can easily be achieved, saves you time and
give you the same results as well compared to those software that you still need to install in
your computer.

Example of File Management:

• Zamzar
• Word2pdf
• Keepvid.com
• Online-convert.com

6. Mapping Tools - Web mapping is the process of using maps delivered by geographic
information systems. A web map on the World Wide Web is both served and consumed.
Examples are Google Maps and Wikimania.

5
 7. Blogging Platforms - It typically looks like a newsletter where you are given options to
change the design to your liking. Though you can manipulate the design, social media
platform’s popularity is still unrivaled.

Blogging Platform Examples:

• Blogger
• WordPress
• TypePad
• Tumblr

What’s more

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 there are te n situation, 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.

6
 What is it

WEB DESIGN PRINCIPLES AND ELEMENTS

Elements of a modern web design:

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

Good Bad

https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/ https://www.pinterest.ph/pin/401875966730577548/

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

https://www.notreality.org/how-web-pages-are-built-using-html-css-and-javascript/ https://blog.spoongraphics.co.uk/articles/the-5-worst-website-
designs-in-the-world

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.

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

Web Design Principles

1. Consider the audience and goals.

2. It is advisable to plan the site on paper first.

3. Strive for consistency

4. Provide a rich set of links within a site.

5. Don’t hide important information.

6. Provide opportunities for interaction.

7. Avoid text-only pages.

8. Don’t sacrifice elegance.

9. Provide a link for every URL used in the site.

10. Give a descriptive title of the site.

11. Include a brief introduction.

12. Make the site’s home page as useful a starting point as possible.

13. Make sure the text is legible.

14. Make sure the site is platform independent.

15. Consider the needs of the viewers.

16. Thoroughly test the site and carefully proofread.

8
 What’s more

Activity 3. Identify if the following website follows the principles of Web Designing. Write a smiley
face (☺) on the number if it followed or sad face () if it did not. If it is a ☺ write the reasons why you
think the website has an appropriate design and if it is  write the reasons why.
1.

Source Image: https://www.mockplus.com/blog/post/bad-web-design

2.

Source Image: https://www.mockplus.com/blog/post/bad-web-design

9
3.

Source Image: https://www.mockplus.com/blog/post/bad-web-design

4.

Source Image: https://www.mockplus.com/blog/post/bad-web-design

5.

Source Image: https://www.mockplus.com/blog/post/bad-web-design

10
 What is it

Website Template
- is a discussion or informational website published on the web consisting of discrete, often informal
diary-style text entries ("posts"). Posts are typically displayed in reverse chronological order, so that the
most recent post appears first, at the top of the web page.

WYSIWYG
- the acronym for “What You See Is What You Get” which means that whatever you type, insert, draw,
place, rearrange, and everything you do on a page is what the audience will see. It shows and prints
whatever you type on the screen.

Creating a Website using Microsoft Word

1. Open Microsoft Word.

2. Type anything on the page like “Welcome to my Website.”

11
3. Click on File > Save As > Browse.

4. On the Save As dialog box, locate your activities folder and create a new folder named “Sample
Webpage.”
5. Specify the filename “Sample Webpage.”
6. On the Save As type, select “Web Page (*.htm; *.html).”

12
7. Click the change title button

8. Input the title as seen below, then click OK then Save.

9. Check the files on your Sample WebPage folder. You will see a new folder generated including
your htm/html file.

10. Open the Sample WebPage.htm file and you will see that you just created a webpage using MS
Word.

13
Web Page Design Using Templates and Online WYSIWYG
1. Wix - is an Israeli software company, providing cloud-based web development services. It
allows users to create HTML5 websites and mobile sites through the use of online drag and
drop tools.

Source Image: https://www.wix.com/

2. WordPress - is a free and open-source content management system (CMS) written in PHP
and paired with a MySQL or MariaDB database.

Source Image: https://wordpress.com/

14
Creating your own blog using Wix. For the next activity, you will create your own website. Follow
the steps to create your own site.

1. Go to the site’s address https://www.wix.com/ and from there you will see the main dashboard
of the site. If you are new with Wix, make sure that you will Sign in on the top right of the page.
Click on the button and a new window will appear.

Source Image: https://www.wix.com/

2. The Sign Up window will appear and make sure to enter appropriate details for you to make
your account on Wix. After entering the details, proceed on the email that was registered for
your account to be verified.

15
 3. This will be the window which will appear if you successfully signed in on their website.

Source Image: https://www.wix.com/dashboard/d26c2b9d-3712-4c89-bdad-fe36b119e385/home

4. You can explore the site’s capacity as it is only a drag and drop platform.

Source Image: https://editor.wix.com/html/editor/web/renderer/edit/562b0429-97d5-4b4b-84d5-

25fbd617bb35?metaSiteId=d26c2b9d-3712-4c89-bdad-fe36b119e385&editorSessionId=7aac34c9-0b6f-4d9e-
a8e6-aca6f80a2a76&referralInfo=my-account

For full tutorial of using Wix, access the website https://www.youtube.com/watch?v=7R3ZywgdCZI

16
 What’s more

Activity 4. Below is an example of a web page created using Microsoft Word. On your own
understanding, list down the steps for you to come up with this output. Take note of the inserted
elements and it should be present on the steps as well.

Page Title

Image Text
Shapes and Text

Image

Shapes and Text

Steps:
1. ______________________________________________________________
2. ________________________________________________________________________
3. __________________________________________________________________
4. ___________________________________________________________________
5. ___________________________________________________________

17
Activity 5. For this activity, you will look for 3 different websites. Considering the rubrics below, what
will their score be according to your assessment? Write down the name of the website and its address.
Write down the things that you think is their strong points as well as the things that is needed to be
improved.

Category Exemplary (4) Accomplished (3) Developing (3) Beginning (1)

Target and Very strong Site has a clear Purpose may Site lacks a sense
Purpose understanding of purpose be somewhat of purpose.
who the site was Major elements unclear No indication
created for. All of the site are Target that the site
elements of the appropriate for audience is was created
site are engaging the target identified, and for a target
and appropriate audience some choices audience
for the target are other than
audience. appropriate for teacher-as grader
this audience
Content In-depth research Information Information is Information
calls on a wide offers a accurate but is inaccurate
variety of comprehensive not always or contains
resources and accurate complete significant
Content is fresh, picture of the Limited gaps
original, topic research Information
Insightful Adequate scope comes from
research scope few sources
Crediting Sources Sources of Sources of Sources of No reference
information are information are information of original
credited in credited in are sources
standard formats. standard formats. acknowledged Information
All permissions All permissions Most is copied
are secured and are secured permissions without
organized for have been permission
future reference secured
Development of Ideas and Ideas, themes or Some May contain
Ideas interpretations patterns are interpretation many facts,
are developed of facts but they are
insightful Makes Connections not
Connections with connections with with larger developed
larger contexts larger contexts contexts are as ideas,
are sophisticated not always themes or
creative and clear connections
comprehensive

18
Home Page Home page Home page is Home page is Home page
draws user into aesthetically functional is missing, or
the site in a pleasing and does not
compelling way gives a clear function to
Home page sense of purpose bring user
readily orients for the whole site into the site
users to the site
Layout Page layout is Page layout is Page layout Layout of
creative and interesting and may be ‘busy’ pages is
effective appropriate for or confusing, or
Layout effects content unimaginative cluttered or
and extends the Unreflective dull
ideas and content Layout is use of a Layout does
appropriate for template not reflect
the content. ideas and
content, but
seems
arbitrary
Functionality Functionality Functionality is Navigation User
intrigues target appropriate for structures may becomes
audience and target audience be awkward or lost in
enhances and difficult to use navigating
purpose accomplishes Some on or
Simple and the purpose elements of between
powerful Simple functionality pages
navigation navigation may not work Problems
structures make structures make as intended, with
navigation feel site quite easy or may not functionality
intuitive for user meet the frustrate the
Appropriate use needs of the user
All functionality, of interactivity target
works properly. for audience
Creative use of the purpose of
interactivity the site
enhances
purpose of the
site
Organization Headings create Headings and Headings do Headings or
hierarchy and first paragraphs not create a paragraph
intrigue reader. of longer text consistent breaks
First paragraphs create hierarchy are not used
of longer text appropriate and/or entice to create
intrigue reader s hierarchy reader to go hierarchies
and draw them First paragraphs further into the or orient
into the text. of longer text text reader to
interest reader to Paragraphs text
go further into may be long
the text or incomplete

19
Language and Site has been Few errors in Some editing Errors in
Conventions fully edited to be grammar, usage, for spelling grammar
free of errors in spelling or and and usage
grammar, usage punctuation give punctuation is interfere with
and mechanics clear required meaning
Writing style is evidence of Writing style is
deeply engaging careful editing appropriate for Many
Writing style is the purpose punctuation
interesting and and spelling
effective errors
Writing style
is not
effective for
the purpose
Site requires
extensive
editing
Errors in
grammar
and usage
are
noticeable,
but do not
interfere with
meaning
Graphic Elements Creative design Graphic Inconsistent Poor quality
causes elements are quality of of graphic
backgrounds and good graphic elements
other quality elements No sense of
formatting Graphic Graphics are purpose for
elements to work elements used as ‘add- the
exceptionally contribute to on’s’ inclusion of
well meaning rather graphic
together Graphic design than as an elements
Graphic elements principles are element of Little or no
are used in followed meaning evidence of
imaginative and Some design
effective ways awareness of principles
graphic design
principles is
evident

20
 Assessment

Quiz No. 4
Identification: Identify what is being asked. Write your answer on a separate sheet of paper.
1. A platform on where a writer or even a group of writers can share views on an individual subject
2. is the process of using maps delivered by geographic information systems
3. is a computer application (sometimes online or browser- based) that allows you to publish, edit
and manipulate, organize and delete web content
4. This platform allows you to create your personal account or profile
5. The practice of using a network of remote servers hosted on the Internet (or the “cloud”) to
store, manage, and process data, rather than a local server or a personal computer.
6. These are tools that typically allow the construction of websites without manual code editing.
7. It typically looks like a newsletter where you are given options to change the design to your
liking
8. These are platforms for managing your files and converting them into any other file types.
9. This element of web design gives your website a room to breathe.
10. Element of design that allows user to jump to another site or page that is related to your site.
TRUE OR FALSE
11. In designing a website, you should hide important information.
12. Being inconsistent is a key factor in web designing.
13. Zamzar is an example of Mapping Tool.
14. The website should have a descriptive title.
15. Text-only pages are very good to the eyes.
16. Google Maps and Wikimania are examples of Social Media Platforms.
17. CMS stands for Content Management System
18. It is good to use extravagant design on your website to catch viewer's attention.
19. Your website shall consider your audience.
20. Google Drive is an example of Cloud Computing.

What I have learned

1. Considering the social issues that we are all experiencing right now, what do you think will be
the advantage of knowing how to create your own website? Explain in not less than 3 sentences.
___________________________________________________________________________
___________________________________.

21