ONLINE PLATFORMS AS

TOOLS FOR ICT CONTENT

DEVELOPMENT

(Week 7-8)
WHAT IS AN ONLINE PLATFORM?
 are technologies that are grouped to be used as a
base upon which other applications processes or
technologies are developed.
 Online platform is a specially
developed platform using Internet technology.
 Online platforms have revolutionized access to
any information.
 In our daily life today we used Internet in doing
such things and in our learning purposes.
 NATURE AND PURPOSES OF ONLINE
PLATFORM AND APPLICATION

 To be able create a good online presentation,

webpage and content, you should know the
principle and techniques of design using online
creation tool, platform and application to develop
ICT content.
EXAMPLES OF ONLINE
PLATFORMS
1. Social Media Platforms
2. Blogging Platforms
3. Presentation/Visualization
4. Cloud Computing
5. File Management
6. Web Page Creation
7. Mapping
Social Media Platforms

Websites like Facebook allow you to create

not only personal accounts but also pages and
groups where you can share content.
The only downside of this is that you are
restricted to Facebook’s “one-size-fits-all” design.
(note: It has low customization but backed up by
popularity.)
EXAMPLES OF SOCIAL MEDIA PLATFORMS
a. FACEBOOK
Facebook is the biggest and the most popular social
platform in the Internet. It is commonly used by students
and is a gaining ground among professionals too.
 Marketplace – allows users to post, read and respond to
classified ads.
 Groups – allows users who have common interests to
discover each other and interact.
 Events – allows users to publicize an event, invite others
users and track those who plans to attend.
 Pages – allows users to create and promote a public page
built around a specific and chosen topic.
 Presence technology – allows users to see which
contacts are online and possible to chat asap.
b. INSTAGRAM

Instagram is an online mobile media-sharing site

that allows users to share pictures and videos
either publicly or privately on the app. Journalist
commonly uses this online platform.
3. TWITTER

Twitter is an online news and social

networking service where users post and interact with
messages, “tweets,” restricted to 140 characters.
Registered users can post tweets, but those who
are unregistered can only read them.
2. BLOGGING PLATFORMS
Websites like WordPress, Tumblr, and
Blogger focus on content and design. 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.

The amount of customization in blogs is also

unrivaled depending on the content management
system implemented by the provider.(note: it has
high customization, popularity depends to the user
to maximize the use of blogs.)
EXAMPLES OF BLOGGING PLATFORMS
a. WordPress.com

WordPress.org is the world’s most popular blogging

software. Started in 2003, WordPress now powers
more than 30% of all websites on the internet
B. BLOGGER
 Blogger is a free blogging service by Google. It
offers a quick and easy way to create a blog for
non-tech-savvy users.
 Blogger is one of the earliest blogging platforms
in existence. It was first launched in 1999 by
Pyra Labs. Later in 2003, Google acquired
Blogger and redesigned it as the product we
know today
C. TUMBLR
Tumblr is a little different than other
blogging platforms. It is a microblogging platform
with social networking features including following
other blogs, reblogging, built-in sharing tools, and
more.
3. PRESENTATION/VISUALIZATION
Graphic program that allow you to create
slide show, presenting the topic, lecture,
demonstrate to enlighten, educate, communicate,
or persuade the audience.

Communicates information clearly and

efficiently via statistical graphics, plots and
information graphics.
EXAMPLES OF PRESENTATION /
VISUALIZATION
a. Prezi – helping to reinvent the art of presentation.
B. ZOHO
an online project management app that
helps you plan your work and keep track of your
progress.
C. SLIDESHARE
to build quickly from concise, well-presented
content from top experts.

D. MindMeister
an online mind-mapping tool that lets you
capture, develop and share ideas visually.
4. CLOUD COMPUTING
the practice of using a network of remote
servers hosted on the internet to store, manage,
and process data, rather than a local server or a
personal computer.
It means storing and accessing data and
program over the internet instead of your
computer’s hard drive.

a. Google Drive
b. Dropbox
 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
Analyse 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
a. Google Drive
keep all work in one secure place with online
file storage
b. Dropbox
keeps your files safe, synced, and easy to
share.
5. FILE MANAGEMENT
It is a computer program that provide a user
interface to manage file and folder.
Is the storing, naming, sorting and handling
computer files.

a. Zamzar
b. word2pdf
A. ZAMZAR
web application to convert files.
B. WORD2PDF

convert Word files to PDF (Portable

Document Format) with this online tool.
6. WEB PAGE CREATION
It is document that is suitable for the World
Wide Web and Web browser. It is also written in
HTML or comparable mark up language.
Encompasses a number of important
elements including color, layout, and overall
graphical appearance.

a. Wix
b. Weebly
A. WIX
a cloud-based web development platform
that allows users to create HTML5 websites and
mobile sites through the use of their online drag
and drop tools
B. WEEBLY
a web-hosting service featuring a drag-and-
drop website builder.
7. MAPPING
a transformation taking the points of one
space into the points of the same or another space.
Is the creation of maps, a graphic symbolic
representation of the significant features of part
of the surface of the Earth.

a. Wikimapia
b. Google Maps
A. WIKIMAPIA
is a privately owned internet company that
provides an open-content collaborative
mapping project. The project implements an
interactive "clickable" web map with a
geographically-referenced wiki system, with the
aim to mark and describe all geographical objects
in the world.
B. GOOGLE MAPS

A desktop web mapping service developed by

Google.
Google Maps is a web mapping service
developed by Google. It offers satellite
imagery, aerial photography, street maps, 360°
panoramic views of streets (Street View), real-time
traffic conditions, and route planning for traveling
by foot, car, bicycle and air (in beta), or public
transportation.
BASIC WEB DESIGN PRINCIPLES
AND ELEMENTS
WEB DESIGN
Web Design is a similar process of creation, with
the intention of presenting the content on
electronic web pages, which the end-users can
access through the internet with the help of web
browser.
8 WEB DESIGN PRINCIPLES AND
ELEMENTS
1. PURPOSE
Each page of your website needs to have a clear
purpose, and to fulfill a specific need for your
website users in the most effective way possible.
2. COMMUNICATION
People on the web tend to want information
quickly, so it is important to communicate clearly,
and make your information easy to read and digest.
Some effective to include in your web design;
-Organizing information using headlines and sub-
headlines
-Use bullet points and cutting the waffles
3. TYPEFACES
This is an essential factor in Web site design
because this is considered the most dominant and
noticeable in terms of visuals.
It deals with text format, text, style, and text.
4. COLORS
These enhance the experience of visitors of the Web
site. The appropriate combination of the foreground
color and background color can produce a better
viewing experience not only in the images and
pictures but also in the texts.

Furthermore, colors can introduce a mood or make

the Web site lively and enticing for viewers.
Complementary Color
-create balance and harmony, it will help
reading easier on the eye for the text and
backgrounds.
Vibrant Color
-emotion should be used sparingly
White Space/Negative Space
-very effective at giving your website a
modern and uncluttered look.
5. NAVIGATION
Navigation is about how easy is for people to take
action and move around your website
Tactics for effective navigation;
-Include a logical page hierarchy
-Designing clickable buttons
-Use of bread crumbs
-Follow the “Three Click Rules” meaning users will
be able to find the information they are looking for
within just three clicks
6. IMAGES
Images alone placed on the Web site can deliver a
complete message that the Web site wishes to
communicate to the audience.

Choosing the correct images can connect the Web

site to viewers or the audience effectively.
7. LAY-OUTS
A layout refers to the physical arrangement of the
content and elements on a Web site.
However, there are categories that classify a
layout that will guide the users with the suitable
layout for their target audience.
Possible layouts are presented here:
 Grid

Without direction or organization, placing

the content on the Web site will most likely appear
chaotic.
 F-Pattern
Based on studies, human vision flows like a letter
F. This means that human tend to look heavily at the
left side of a visual material more than the right side.
 Mobile Friendly

The popularity of using mobile devices in

viewing Web content is increasing.

This is because of the portability and

convenience brought about by mobile devices to
their users.
8. LOAD TIME
Another basis for the success of a Web site is
the time that the Web site will load or appear onto
the viewers’ display device.
Nowadays, people demand information at a
very fast pace.
If the Web site takes some time to load, most
especially if there are too much content, the user
will most likely search for another source.
WEB PAGE DESIGN USING
TEMPLATES AND ONLINE
“WYSIWYG” PLATFORMS
WYSIWYG
WYSIWYG in Web site design is an acronym
for “What You See Is What You Get”
It is an application that is used to create a
Web site either online or offline.
The developer can directly drag and drop
elements to manipulate the layout of the Web site.
 Website/web template is a pre-designed
webpage or set of HTML webpages that anyone can
use to “plug-in” their own text content and images
into to create a website.
Usually built with HTML (Hyperlink Text
Mark-up Language) ,website templates allow
anyone to setup a website without hiring a
professional web developer or designer.

HTML -plain text code language that is used to

allow web browsers to render webpages as
designed.
CREATING A WEBSITE USING MICROSOFT
WORD
1. Open Microsoft Word.
2. Type anything on the page like “Welcome to my
Website”.
3. Click on File>Save as>Browse.
 TYPES OF WEB TEMPLATES
 Self contained ZIP file downloads
 Part of a proprietary web builder interface

 Included with an HTML software editing

program
 They may be responsive, adaptive or static in
design or configured specifically for mobile
WHAT CAN WEB TEMPLATE INCLUDE:
 Text
 (.jpg)(.png) or (gif) images

 jQuery and CSS3 animation

 Shopping carts

 Contact forms

 Dynamic image galleries and slideshows

 PDF download links page

 Video players (including embedded YouTube

movies)
BEST WYSIWYG PLATFORMS
1. Cloud LGS
puts more effort into providing the best
mobile phone website builder program. Developed
and offered by Cloud LGS, displays beautiful across
all screen sizes, creates responsive designed
websites which are packed with online tools &
features to help entrepreneurs grow their business
from a cell phone.
2. Wordpress the choice of most web creation
professionals, it is an excellent tool for the creation
of your website, can be utilised for blog sites with
customized options to choose from.
3. Wix
has been touted to a strong contender in the
WYSIWYG web builder category. The template
designs are very impressive, and there so much
flexibility on how one can design their website due
to the nature of this web creation platform. It also
allows for an easy insertion of web animations.
4. Squarespace
templates available are rich in aesthetically
pleasing designs, and almost lean to the concept of
minimalism. This web creation platform’s site are
all mobile responsive.
5. Weebly
is commonly compared to Wix as they both
provide the same experience when it comes to
website creation. It allows for interchanging of a
template even after one has been chosen from the
beginning and somewhat limited website creation
customizations allow for the building of a website
that loads faster for users.
There are two most common used HTML editors:

1.Dreamweaver
incorporates many advanced features
(accessibility support, dynamic language support,
code editing, XML support, growing Javascript
Library)

2.FrontPage
WYSIWYG editor with similar toolbars/
interface to other Microsoft Programs