2. 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.
3. 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.
5. 1. Social Media Platforms
2. Blogging Platforms
3. Presentation/Visualization
4. Cloud Computing
5. File Management
6. Web Page Creation
7. Mapping
6. 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.)
7. 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.
8. 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.
9. 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.
10. 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.)
11. 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
12. 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
13. 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.
14. 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.
15. EXAMPLES OF PRESENTATION /
VISUALIZATION
a. Prezi – helping to reinvent the art of presentation.
16. B. ZOHO
an online project management app that helps
you plan your work and keep track of your progress.
17. 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.
18. 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
19. 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
20. 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
21. 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
24. 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
27. 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
28. 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
30. 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
31. 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.
32. 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.
35. 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.
37. 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.
38. 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
39. 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.
40. 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.
41. 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.
42. 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
43. 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.
44. 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.
45. 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.
46. 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.
47. 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.
48. WEB PAGE DESIGN USING
TEMPLATES AND ONLINE
“WYSIWYG” PLATFORMS
49. 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.
50. 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.
51. 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.
52. 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
53. 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)
54. 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.
55. 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.
56. 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.
57. 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
