Lesson

ICT Online Platforms in

1 Creating Web Content

What I Need to Know

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

What’s New
Table 1: Websites and apps in your computer
Activity 1: Website or Website or Application
application(apps) you are using.
Website Function
Websites or applications are
now accessible through Example: Shopee Shopping Online
smartphones. It is up us users on
how we use it. In your smartphone 1
or computer list ten (10) websites or 2
applications you usually use or visit
and identify the best feature that you 3
like on it. The first item listed on the
4
table is an example to guide you on
this activity. 5
6
7
8
9
10
What Is It

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

1
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.
Before I introduce the different type of online platforms which you can use. Let's
take a close look on how technologies are use these days. Take a look at the picture
below.

Photo Credits: https://pixabay.com/photos/technology-developer-continents-3435575/

The picture on this page shows that each one of us has skill of being an
information literate since information can be reach just a click away. It is only up to
us to how we create or how we evaluate the information that we garnered from
online resources.
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
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
Photo Credits:
examples of Social Media platforms. https://unsplash.com/photos/yyMJNPgQ-X8

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. Photo Credits:
https://www.freepik.com/freevector/doodlebloggingconcept_3524976.htm#page=1&query=blogging&po

3. Content Management System or CMS

One of the feature 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,

2
organize, and publish the content of your website. A popular example of CMS is
WordPress.
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 ten 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.

What Is It

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 allows 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
3
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

Photo Credits: https://www.freepik.com/free-vector/collection-motivationallettering-

stickers_4947782.htm#page=1&query=text%20website&position=23

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.

Photo Credits: https://www.freepik.com/premium-psd/landing-page-restaurant-withchristmas-

special-food-menu_6365743.htm#query=image%20website&position=4

3. White space - having a crowded website, it is very hard to direct the attention
of your vistor's eye. These white space gives your website a room to breathe.

Photo Credits: https://unsplash.com/photos/Ylk5n_nd9dA

4. Links - links or hyperlinks allows user to jump to another site or page that is
related of to your site.

Photo Credits:
https://www.freepik.com/free-vector/monitorsize_2945488.htm#page=1&query=click
&position=2
4
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.

Photo Credits: https://www.freepik.com/free-psd/colourfulbanner-sale-

template_5263427.htm#pag
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.

Photo Credits: https://www.freepik.com/free-vector/illustration-human-avatarusing-

technology_2801710.htm#page=1&query=video&position=15

7. Background - texture or background gives a more appealing sight to your

website. This will provide your website a feeling of a surface underneath.

Photo Credits: https://www.freepik.com/premium-vector/modern-sale-banner-web-social

media_5210275.htm#page=1&query=website%20background&position=4

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

5
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 especially for those visitors who uses mobile device to 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 users may leave the site if downloading is slow.

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

Figure 1: Principles of web

Portable Simplicit

Design for Web

Bandwidt
Directio Regular

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
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.(Retrieved from

https://sea.pcmag.com/wix/8396/wix)

Photo Credits: Screenshot from https://www.wix.com/

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
https://www.websitebuilderexpert.com/website-builders/weebly/free -
website-builder-for-all/)

Photo Credits: Screenshot from https://www.weebly.com/?lang=en

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. (Retrieved from https://wpapprentice.com/blog/what-is-
wordpress/)

4.
Photo Credits: https://pixabay.com/photos/wordpress-blogging-blogger-editor-265132/
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/)
 Photo Credits: Screenshot from https://www.drupal.org/

What I Have Learned

Activity 3: Investigating a website

Instructions:
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
____________________________________________________________

What’s More
Creating your Own Website using Wix.
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

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.

Photo credits: https://www.wix.com/account/sites

2. Click Create Site.

Photo credits: https://www.wix.com/account/sites

3. Choose Other.

Photo credits: https://www.wix.com/new/vertical?

ref=myaccount&additionalreferralinfo=siteless-main-button.

4. You will be instructed to choose a template. Click Choose a Template.

Photo credits: https://www.wix.com/new/site?vertical=other

5. Pick any template that you want. Choose categories and click any
templates.

Photo credits: https://www.wix.com/website/templates

Photo credits: https://www.wix.com/website/templates/html/community-

education
 6. Your website will be generated and soon you will end up in the site’s Wix
editor.

7. The editor is pretty 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.

Photo credits: https://editor.wix.com/html/editor/web/renderer/new?siteId=f9729d47-

3200-4fc9-85d7-4962458fe33c&metaSiteId=12f2ed08-f07c-8d31-
b14b733cf7fe35b1&editorSessionId=42383395-932d-4a22-b619-
0e046d5ed470
9. You can click Preview in order to see the design before saving the
website.

Photo credits: https://editor.wix.com/html/editor/web/renderer/new?

siteId=f9729d47-32004fc9-85d7-
4962458fe33c&metaSiteId=12f2ed08-f07c-8d31-b14b-
733cf7fe35b1&editorSessionId=0858a7ce-448b-4e23-8473-
00c610e3f5bd 10. Once you are done editing and click Save and choose
Save & Continue.

Photo credits https://editor.wix.com/html/editor/web/renderer/edit/8f21420c-

bc8e-
48f3-a613-9cacc9bfc489?editorSessionId=0858a7ce-448b-4e23-8473-
00c610e3f5bd&metaSiteId=6ad45859-d245-4f35-9ec7-fd685f139b26
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
Let us now test your understanding by doing the activity below.

What I Can Do
Activity 5: Website Making
For this activity you will create your profile website.
1. Go to the website using an online WYSIWYG platform 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 Web site 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, and 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.

What I Can Do
Web Mapping Applications
 Web mapping applications are Web sites developed from

geographical information system (GIS)

data. Mapping applications use GIS to
create a visualize maps. Today, a
Web map is used not only for
directions and locations but also to
track consumer activity and to locate
stores and establishments.

The examples of mapping application are:

 Google Maps – This is a Web mapping application developed by
Google. It shows both graphic and satellite maps. The maps include
street names, building names, establishment names, and bus and
train stations, to name a few. Some extension applications include
three-dimensional views of the satellite images and traffic conditions.
To access Google Maps, http://www.google.com.ph/maps/

Photo credits:
https://www.googlemaps.com&si=EAIaIQobChMI
 Google Maps
Photo credits:
https://www.google.com.ph/maps/@8.1426185,123.8355356,15z

 Wikimapia - This is a collaborative open content mapping application.

Wikimapia offers satellite view of streets, buildings, and
establishments. This Web site uses Google Maps APIs for mapping.
To access Wikimapia, http://wikimapia.org/

Wikimapia Application
Photo credits:
http://wikimapia.org/#lang=en&lat=14.709800&lon=120.936200&z=12&m=w

What I Have Learned

Activity 7: Distinguishing Your Learning.

Answer the following questions based on your learning.
The different types of online platforms for ICT content web development
are Social Media Platforms, Blogging Platforms and Content Management
System or CMS. Give five (5) examples of each type of online platforms.
Social Media Platforms
1. 4.
2. 5.
3.

Content Management System or CMS

1. 4.
2. 5.
3.
Blogging Platforms .
1. 4.
2. 5.
3.

Summary
Social Media Platforms are website like Facebook, Instagram and Twitter
which allows to you create your personal account. It also comes with a
feature which you can create pages and groups where you can share
content and ideas.
Blogging Platforms is similar to a newsletter where you can add designs
on your liking. It is an online journal or informational website displaying
information in the reverse chronological order, with latest posts appearing
first. It is a platform where a writer or even a group of writers share their
views on an individual subject. Wix and WordPress.org are examples of
blogging site.
Content Management System or CMS is a software which you can use on
your personal or computer or web browser which you can facilitates in
creating, editing, organizing, publishing content. WordPress is a Content
Management System, that allows you to create and publish your content on
the web. Although it is mostly used for web publishing, it can be used to
manage content on an intranet, or in a single computer.
Web page is document which is designed for the World Wide Web and is
accessible using a web browser such as FireFox, Google Chrome, Microsoft
Edge, or Apple's Safari. It may contain many kinds of data or resources
which you can see, hear, and interact with. A web page may contain text,
graphics, sound, video, and animation WYSIWYG is an editor that allows
you to create and design web pages without any coding knowledge.
HTML is stands for Hypertext Markup Language.

Wix allows users to create HTML5 websites and mobile sites through the
use of online drag and drop tools.
Template is a ready-made design for a website.
Web mapping applications are Web sites developed from geographical
information system (GIS) data. Mapping applications use GIS to create a
visualize maps. Today, a Web map is used not only for directions and
locations but also to track consumer activity and to locate stores and
establishments.
 Tools like Google Maps and Wix are powerful tools which you can use in
order to create your own profile online. Wix allows user to create their own
website hassle free. While Google Maps allows user to explore places while
using the computer.

Assessment: (Post-Test)

(Google quiz link will be provided by the teacher for the Module 4 Post Test)