Empowerment Technologies

ICT ONLINE
PLATFORMS
in Creating Web
Content
Website

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).
Activity
Websites or applications are now accessible through
smartphones. It is up to us, users, on how we use it.
Using your smartphone or computer look for ten
(10) websites or applications you usually use or visit
and identify the best feature that you like on it.
Write it on a manila paper. The first item listed on
the table is an example to guide you on this activity.
Activity
Website or Application
Website Function
Example Shopee Online Shopping
1
2
3
⋮
10
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.

It offers you more than just reading

articles or listening to your music.
Platform-enabled
Website
It is a website in which additional functionality can
be seamlessly integrated by means of an
external application programming interface (API).
The platform should provide integration points.
These integration points are places in the
application where new functionality can be plugged
in.
Platform-enabled
Website
An application programming interface (API) is a
computing interface which defines interactions
between multiple software intermediaries. It
defines the kinds of calls or requests that can be
made, how to make them, the data formats that
should be used, the conventions to follow, etc.
 01 Social Media
Platforms
Types of 02 Blogging
Online Platforms
Platforms 03 Content Management
System (CMS)
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

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.
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.
Blogging
Platforms
Blogger is an example of blogging
site. If you love to write or if you
want to share ideas online,
blogging platforms is the perfect
tool you can use.
Content Mgt. System
Platforms
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.
Content Mgt. System
Platforms
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: Identify which online platform to use
Situation Online Platform
1. John would like to chat with his Social Media
uncle abroad Platform
2. A Senior High School student would Content
like to create a shopping site for his Management System
small business. (CMS)
3. Mike wants to write his plans about
Blogging Platform
travelling from other provinces.
Activity: Identify which online platform to use
Situation Online Platform
4. A teacher wants her student to send Social Media
their output online. Platform
5. An ICT student plans to create a Content
website about their school. Management System
6. A group of Senior High student
wants to share their ideas about how Blogging Platform
to reduce the use of plastic materials.
Activity: Identify which online platform to use
Situation Online Platform
7. Linda would like to upload her Social Media
pictures last Christmas vacation. Platform
8. Christian would like to check the Social Media
profile of his friends online. Platform
9. Mark wants to follow his favorite Social Media
basketball player online. Platform
Activity: Identify which online platform to use
Situation Online Platform
10. The members of Supreme Student
Government would like to share their
Blogging Platform
advocacy on having Math tutorial in
their school.
CANVA
CLOUD Computing
Cloud Computing is the delivery of
computing services—servers, storage,
databases, networking, software,
analytics and more.
We did not need to install any software in our
computer. The software is in the ‘cloud’ or over the
internet.
CLOUD Computing
You are probably using cloud
computing right now, even if you don’t
realize it. If you use an online service to send email, edit
documents, watch movies or TV, listen to music, play
games or store pictures and other files, it is likely that
cloud computing making it all possible behind the
scenes.
USES of Cloud
Computing
• Create new apps and services
• Store, back up and recover data
• Host websites and blogs
• Stream audio and video
• Deliver software on demand
• Analyze data for patterns and make predictions
 Advantages of
Cloud Computing
• No need to install
• Saves hard disk space
• Easy access to your files
• Saves money
• No need to update
• Minimum system requirements
• Back-up and data recovery are relatively easier
Disadvantages of
Cloud Computing
• Can be hampered down by slow internet speed
• May require compatible software
• You do not own the software
• Security risks
• More prone to hacking
• Limited control over the infrastructure
 Examples 01 Dropbox

of Cloud
02 Google Drive
Computing
Dropbox

Dropbox is an American company, and it is a cloud

storage service that gives you so many benefits,
such as let you save files online and sync them to
your devices, share files and folders with other
people whether its a video or images or anything.
Dropbox

Advantages of Dropbox
• Automatic file backup
• Lack of elite-level security
• Advanced software integration
• Limited search function
• Offline working capabilities
Google Drive

Google Drive is a cloud-based file storage and

synchronization service developed and launched by
google in 2012. You can access these files
anywhere in the world from any smartphone,
tablet, or computer.
Google Drive

Advantages of Google Drive

• User friendly interface
• Microsoft office compatible
• Share files using custom links
• SSL encryption
• High level Security
Webpage
Creation
Web browsers
Web page is designed for World Wide
Web on which it is consider as the
document inside it.
Mozilla Firefox, Google Chrome,
Microsoft Edge, Opera, or Apple's
Safari are web browsers which you can
use in order to access a web page.
Activity
APPLE INC.

SAFARI
 APPLE INC.
SAFARI
Safari is the best way to experience the internet
on all your Apple devices. It brings robust
customization options, powerful privacy
protections, and industry-leading battery life —
so you can browse how you like, when you like.
APPLE INC.
SAFARI
And when it comes to speed, it’s the
world’s fastest browser.
APPLE INC.
SAFARI
More with the battery.
Less with the loading.
 APPLE INC.
SAFARI
With a blazing-fast JavaScript engine, Safari is
the world’s fastest browser. It’s developed to
run specifically on Apple devices, so it’s geared
to make the most out of your battery life and
deliver long-lasting power.
APPLE INC.
SAFARI
And with
Apple silicon, it’s
even faster than
ever before.
 APPLE INC.
SAFARI
Improved power efficiency
 APPLE INC.
SAFARI
Safari lets you do more online on a single charge.
Up to 2 hours more
streaming videos compared
with Chrome, Edge,
and Firefox .
APPLE INC.
SAFARI
Up to 17 hours of
wireless browsing
APPLE INC.
SAFARI
APPLE INC.
SAFARI
See your favorite shows and films
in their best light. Safari now
supports in-browser 4K HDR video
playback for YouTube, Netflix, and
Apple TV+. And it runs efficiently
for longer-lasting battery life.
 APPLE INC.
SAFARI
Safari makes it simple to see how
your privacy is protected on all
the websites you visit. Click the
Privacy Report button in your
toolbar for a snapshot of cross-
site trackers currently prevented
from profiling you on the website
you’re visiting.
APPLE INC.
SAFARI
Translate entire web pages
between 18 languages with a
single click. You can also
translate text in images and
paused video without leaving
Safari.
APPLE INC.
SAFARI
Same Safari,
Different Device!
APPLE INC.
SAFARI
Safari works seamlessly and
syncs your passwords,
bookmarks, history, tabs, and
more across Mac, iPad, iPhone,
and Apple Watch.
APPLE INC.
SAFARI
And when your Mac, iOS, or
iPadOS devices are near each
other, they can automatically
pass what you’re doing in Safari
from one device to another
using Handoff.
 APPLE INC.
SAFARI
You can even copy images,
video, or text from Safari on
your iPhone or iPad, then paste
into another app on your
nearby Mac — or vice versa.

Reference: https://www.apple.com/ph/safari/
Webpage
Creation
 01 Text
02 Graphics/ Illustrations
Elements of 03 White Space

a Modern 04 Links
05 Color
Web Design
06 Video/ Audio
07 Background
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 and make
sure that the text is clear and in readable size
2. Graphics/
Illustrations
Make sure that your images or illustrations are
not pixelated or must be in good quality. There
are times that text give description to an image,
so, you see to it 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 spaces give your website a room to
breathe.
4. Links
Links or hyperlinks allows user to jump to
another site or page that is related of to your
site.
5. Color
The color 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 help your visitors, especially
those websites that offer 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.
Portable
Design

Principles of
a Web
Design
Portable Designed
Design for Low
Bandwidth
Principles of
a Web
Design
Portable Designed
Design for Low
Bandwidth
Principles of
a Web
Design Direction
 Portable Designed
Design for Low
Bandwidth
Principles of
Regular a Web
Design Direction
Testing

Simplicity
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 that offer
WYSIWYG process.
 Tools that offer
WYSIWYG process:

Website builders:
• Wix (https://www.wix.com)
• Weebly (https://www.weebly.com)
• WordPress (https://wordpress.com)
• Drupal (https://www.drupal.org)
Activity

Visit your website,

apply the different
elements and principles
of web design.
Recreate, if necessary.
 Web
Mapping
Applications
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.
Web Mapping
Applications
Today, a web map is used not only for
directions and locations but also to track
consumer activity and to locate stores and
establishments.
Examples of Mapping
Applications

1. 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. https://www.google.com/maps
Google Maps
Examples of Mapping
Applications

2. Wikimapia - This is a collaborative open

content mapping application. It offers satellite
view of streets, buildings, and establishments.
This Web site uses Google Maps APIs for
mapping.
https://wikimapia.org/
Wikimapia
 Activity
Invitation Making with Online Mapping Applications
Problem: You established a business focused on organizing
events such as parties and weddings. You have a customer
who wants you to organize a birthday party at a hotel. You
are expected to present the invitation you designed to
your client. The invitation should include a map from an
online mapping application that shows the directions going
to the venue.
OUTPUT: a printed invitation.
Thank you!