ONLINE PLATFORMS

AS TOOLS FOR ICT

CONTENT
DEVELOPMENT
Learning Competencies:
After studying this module, you should be able to:
Identify different
web design
01 principles and
elements.

Apply the different web design principles and elements using

02 online creation tools, platforms, and applications to
communicate a message in the professional
track.
Learning Competencies:
After studying this module, you should be able to:
Create an original or derivative ICT content
using online creation tools, platforms, and
03 applications to effectively communicate
messages related to specific professional
tracks.
 Web Design,
01 Principles, and
Elements
 Web Design, Principles, and Elements
• Web Design- It encompasses many
skills and disciplines, such as web
graphic design, user interface
design, authoring, user experience
design, and search engine
optimization.

<a href="https://www.freepik.com/free-photo/web-design-technology-browsing-programming-concept_25312343.htm#query=web%20design&position=11&from_view=search&track=ais">Image by rawpixel.com</a> on Freepik

 Principles and Elements to Web Designing:
PURPOSE: The website's goal
is to serve a purpose to the
user. 

Example: For information, to be

entertained, play games, or
socialize.

<a href="https://www.freepik.com/free-photo/entrepreneur-expansion-goals-target_17076396.htm#query=web%20goal&position=3&from_view=search&track=ais">Image by rawpixel.com</a> on Freepik

 Principles and Elements to Web Designing:

COMMUNICATION:
Information should be concise
and direct to the point. Texts
should be organized using
headings, subheadings, and
bullets.

<a href="https://www.freepik.com/free-photo/communication-discussion-team-work-ideas-concept_18092093.htm#query=web
%20COMMUNICATION&position=2&from_view=search&track=ais">Image by rawpixel.com</a> on Freepik
Principles and Elements to Web Designing:

TYPEFACES:
Text format, text style, and
text appearance contribute to
the perception of viewers or
users.

<a href="https://www.freepik.com/free-vector/illustration-creative-graphic-design_2825824.htm#query=WEB%20TYPEFACES&position=20&from
by rawpixel.com</a> on Freepik
Principles and Elements to Web Designing:

COLORS:
An appropriate combination of
foreground and background
color can introduce the mood
or make the website lively or
enticing.

Image by <a href="https://www.freepik.com/free-vector/colorful-wavy-landing-page_4384962.htm#query=web

%20colors&position=26&from_view=search&track=ais">Freepik</a>
Principles and Elements to Web Designing:
IMAGES: Can deliver the
complete message that the
website would like to
communicate. That’s why
choose the correct image(s).
Principles and Elements to Web Designing:
NAVIGATION: Facility that the
audience can use to go through the
website and its subpages.
The three-click rule should be
followed (the user should find the
information within three mouse
clicks).
 
Principles and Elements to Web Designing:
LAYOUTS: The physical content—an
arrangement of content and
elements.
3 Layouts:  
Grid - is a system for organizing the content
on the page and creating alignment and
order.
F-Pattern - is the way our eyes move when
reading online, scanning the page in a matter
of seconds. It starts at the top of the page to
read important headlines.
Mobile – for mobile displays.
Principles and Elements to Web Designing:
LOAD TIME:
The time the website will load or
appear on the viewers’ display device.

Ways to speed up loading time:

1. Minimize elements on a Web page.
2. Optimize the resolution and size of
images.
 Web Design by
02 WYSIWYG
 Web Design by WYSIWYG
• WYSIWYG (pronounced wiz-ee-wig) is
an acronym for “What You See Is What
You Get.“

Is a type of editing software that allows

users to see and edit content in a form
that appears as it would when displayed
on an interface, webpage, slide
presentation or printed document.

Image by <a href="https://www.freepik.com/free-vector/web-design-concept-with-flat-style_2488324.htm#query=web%20design&position=5&from_view=search&track=ais">Freepik</a>

https://www.techtarget.com/whatis/definition/WYSIWYG-what-you-see-is-what-you-get
 • Web Design by WYSIWYG
WYSIWYG editors were invented by Charles
Simonyi in the 1970s and evolved into Word
and Excel, which are now part of Microsoft
Office.

They are used in modern applications such as

CMSes, CRM systems, email systems, web
builders, document management tools and
other systems with written content, and are
popular in web publishing applications such
as blogging.
By NASA - http://spaceflight.nasa.gov/gallery/images/station/crew-15/html/jsc2006e53965.html, Public Domain, https://commons.wikimedia.org/w/index.php?curid=1475038
What is a WYSIWYG HTML
editor?
 What is a WYSIWYG HTML editor?

A HyperText Markup Language

(HTML) WYSIWYG editor, such as
Adobe Dreamweaver CC or Froala
Editor, conceals the markup and
allows the developer to think in terms
of how the content should appear.

However, it also requires the developer

to know enough about the markup
language to clean it up.

Image by <a href="https://www.freepik.com/free-vector/hand-drawn-web-developers_12063795.htm#query=HTML&position=4&from_view=search&track=sph">Freepik</a>

What is a WYSIWYG HTML editor?
 WYSIWYG
02 APPLICATION
S
 Different kinds of WYSIWYG
Applications
Web-Design Software:
1.) Adobe Dreamweaver is a proprietary web
development tool from Adobe Inc. It was created by
Macromedia in 1997 and developed by them until
Macromedia was acquired by Adobe Systems in 2005.
It is a web design and an Integrated Development
Environment (IDE) application that is used to develop
and design websites. It includes a code editor with
syntax highlighting, code completion, real-time syntax
checking, and code introspection for generating code
hints.

https://www.youtube.com/watch?v=T-oovphW0vw
By ™/®Adobe Inc. - https://blogs.adobe.com/creative/2020_05_brand-identity-update/, Public Domain,
https://commons.wikimedia.org/w/index.php?curid=65690166
Adobe Dreamweaver:
Different kinds of WYSIWYG
Applications
1.) Adobe Dreamweaver
is a proprietary web development tool from Adobe Inc.
It was created by Macromedia in 1997 and developed by
them until Macromedia was acquired by Adobe Systems
in 2005. It is a web design and an Integrated Development
Environment (IDE) application that is used to develop and
design websites. It includes a code editor with syntax
highlighting, code completion, real-time syntax checking,
and code introspection for generating code hints.

https://www.youtube.com/watch?v=T-oovphW0vw
By ™/®Adobe Inc. - https://blogs.adobe.com/creative/2020_05_brand-identity-update/, Public Domain,
https://commons.wikimedia.org/w/index.php?curid=65690166
 Different kinds of WYSIWYG
Web-Design Software:Applications
2.) Amaya (formerly Amaya World) is a discontinued
free and open source WYSIWYG web authoring tool
with browsing abilities, developed by INRIA and adopted
by the W3C as a testbed for web standards.
Its features include:
 Access keys
 Caret navigation
 Page zooming
 Password management
 Spell checking
 Transport protocols
 Support for CSS, MathML, SVG, RDF and Xpointer
 Displays free and open image formats such as PNG and SVG, as well as
a subset of SVG animation
https://www.online-sciences.com/computer/amaya-html-editor-web-editor-review-features-advantages-and-disadvantages/
 Different kinds of WYSIWYG
Applications
Web-Design Software:
2.) Amaya (formerly Amaya World) is a discontinued
free and open source WYSIWYG web authoring tool with
browsing abilities, developed by INRIA and adopted by the
W3C as a testbed for web standards.
Its features include:
 Access keys
 Caret navigation
 Page zooming
 Password management
 Spell checking

By Ten - Own work, CC BY-SA 3.0, Transport protocols
 Support for CSS, MathML, SVG, RDF and Xpointer
https://commons.wikimedia.org/w/index.php?curid=9700585
 Displays free and open image formats such as PNG and SVG, as well as
a subset of SVG animation

https://www.online-sciences.com/computer/amaya-html-editor-web-editor-review-features-advantages-a
 Different kinds of WYSIWYG
Applications
Web-Design Software:
3.) Expression Web 4 is a professional
development and design tool for creating
modern, standards-based Web sites using
PHP, HTML/XHTML, CSS, JavaScript,
ASP.NET, or ASP.NET AJAX. It allows users
to drag and drop elements to create the
layout and function of the website.

By Microsoft Expression Web 4, Fair use, https://en.wikipedia.org/w/index.php?curid=24228501

By Screenshot by uploader, Fair use, https://en.wikipedia.org/w/index.php?curid=24228454
 Different kinds of WYSIWYG
Applications
Web-Design Software:
2.) Amaya (formerly Amaya World) is a discontinued
free and open source WYSIWYG web authoring tool with
browsing abilities, developed by INRIA and adopted by the
W3C as a testbed for web standards.
Its features include:
 Access keys
 Caret navigation
 Page zooming
 Password management
 Spell checking

By Ten - Own work, CC BY-SA 3.0, Transport protocols
 Support for CSS, MathML, SVG, RDF and Xpointer
https://commons.wikimedia.org/w/index.php?curid=9700585
 Displays free and open image formats such as PNG and SVG, as well as
a subset of SVG animation

https://www.online-sciences.com/computer/amaya-html-editor-web-editor-review-features-advantages-a
 Different kinds of WYSIWYG
Web-Design Software:Applications
4.) IM Creator is a software and hosting
company that allows individuals and
businesses to create and maintain HTML5
websites without writing code. It caters to
both experienced and inexperienced users
and creators, offering predesigned
templates and ready-made websites with
complete buttons, links, and design.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.discovercloud.com%2Fproducts%2Fim-creator&psig=AOvVaw22zr9zpwWBC5gF5mGDaJpB&ust=1679744646600000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJDGvMu-9P0CFQAAAAAdAAAAABAE
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.cmscritic.com%2Fim-creator-review%2F&psig=AOvVaw22zr9zpwWBC5gF5mGDaJpB&ust=1679744646600000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJDGvMu-9P0CFQAAAAAdAAAAABAb
Contents of this template
You can delete this slide when you’re done editing the presentation

Fonts To view this template correctly in PowerPoint, download and install the fonts we used

Used and alternative resources An assortment of graphic resources that are suitable for use in this presentation

Thanks slide You must keep it so that proper credits for our design are given

Colors All the colors used in this presentation

Icons and infographic resources These can be used in the template, and their size and color can be edited

Editable presentation theme You can edit the master slides easily. For more info, click here

For more info: You can visit our sister projects:

SLIDESGO | SLIDESGO SCHOOL | FAQs FREEPIK | FLATICON | STORYSET | WEPIK | VIDEVO
 Different kinds of WYSIWYG
Web-Design Software:Applications
5.) Wix.com Ltd. is an Israeli software
company that provides cloud-based
web development services. It allows
users to create HTML5 websites and
mobile sites through online drag and
drop tools. It offers a wide range of
templates and a drag and drop facility
to arrange contents in the layout they
want.
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pcmag.com%2Freviews%2Fwix&psig=AOvVaw179m-iq6wSkIDMUofSNfbs&ust=1679744879534000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCMif0bq_9P0CFQAAAAAdAAAAABAE
 About us
This can be the part of the presentation where you
can introduce your company or agency. Keep it short
and go straight to the point. Your audience will
appreciate it
 ONLINE PRESENTATION

03
TOOLS, CLOUD
STORAGE, AND MAPPING
APPLICATIONS
ONLINE PRESENTATION TOOLS, CLOUD
STORAGE,
AND MAPPING APPLICATIONS
● Presentation Applications offer the function of an image and
presentation software.
● Cloud Storage is a service wherein files from users are stored
online.
● Web Mapping applications are websites developed from
geographical information systems’ (GIS) data. Mapping
applications use GIS to create a graphical and illustrative
representation to easily visualize maps.
ONLINE PRESENTATION TOOLS:
1.) Prezi – a cloud-base application
to help create a presentation; also
has offline for desktop installation;
adapts a storytelling type of
presentation with zooming in or out
of the display.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fsupport.prezi.com%2Fhc%2Fen-us%2Farticles%2F360003478194-Getting-started-with-Live-
Prezi&psig=AOvVaw1kBAzbQuOBSJmpxqQUad0e&ust=1679746305684000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJjJyuLE9P0CFQAAAAAdAAAAABAj
https://www.google.com/url?sa=i&url=https%3A%2F%2Ftwitter.com%2Fprezi&psig=AOvVaw1kBAzbQuOBSJmpxqQUad0e&ust=1679746305684000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJjJyuLE9P0CFQAAAAAdAAAAABAs
Our evolution
Venus Jupiter
Venus is the Jupiter is the
second planet biggest planet
from the Sun of them all

Mars Mercury Saturn

Despite being Mercury is the Saturn is a
red, Mars is a closest planet ringed planet
cold place to the Sun and a gas giant
ONLINE PRESENTATION TOOLS:
2.) Slideshare – a facility for uploading and sharing
presentation files; uploaded files can be viewed either
publicly or privately; academicians can share lectures
and presentations to a global audience.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fdowndetector.com%2Fstatus%2Fslideshare
%2F&psig=AOvVaw0v7EGFIOa2mH4nUcHgWzce&ust=1679746649724000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCNiN0YbG9P0CFQAAAAAdAAA
What sets us apart?

Mars Saturn Jupiter

Despite being red, Mars Saturn is the ringed Jupiter is the biggest
is a cold place, not hot. planet and a gas giant. planet in the Solar
It’s full of iron oxide It is composed mostly System. It’s the fourth-
dust, giving the planet of the elements brightest object in the
its reddish cast hydrogen and helium night sky
ONLINE PRESENTATION TOOLS:
3.) MindMeister – is an online mind mapping
application that allows its users to visualize, share and
present their thoughts via the cloud.

https://www.google.com/url?sa=i&url=https%3A%2F%2Falldigitalschool.com%2Fresource-listing%2Fmind-meister%2F&psig=AOvVaw3j-GG4mGzB_1Pv2JDBFfO
woTCOjD_KHH9P0CFQAAAAAdAAAAABAE
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.mindmeister.com%2Fblog%2Fhow-meister-uses-mindmeister%2F&psig=AOvVaw0aMocB-xmyVezy
BAQjRxqFwoTCICFzMXH9P0CFQAAAAAdAAAAABAE
What do we do?
Engaging Modern
Saturn is a Mercury is the
ringed planet closest planet
and a gas giant to the Sun

Visual Dynamic
Despite being Jupiter is the
red, Mars is a biggest planet
cold place of them all
CLOUD STORAGE:
1.) Google Drive is a cloud
storage and synchronization
service launched in 2012,
enabling users to store, analyze,
and share files across devices.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3AGoogle_Drive_logo.png&psig=AOvVaw09vWPxdJHwmVZF_V4VXFUm&ust=1679747321731000&source=images&cd=vfe&ved=0C
AQjRxqFwoTCMDNkMfI9P0CFQAAAAAdAAAAABAi
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.businessinsider.com%2Fguides%2Ftech%2Fwhat-is-google-drive-
guide&psig=AOvVaw09vWPxdJHwmVZF_V4VXFUm&ust=1679747321731000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCMDNkMfI9P0CFQAAAAAdAAAAABAq
Awesome
words
CLOUD STORAGE:
2.) Dropbox - a file hosting
and storage service developed
by Dropbox, Inc.; Offers a facility
to synchronize and create
folders for file organization.

https://www.google.com/url?sa=i&url=http%3A%2F%2Ft0.gstatic.com%2Fimages%3Fq%3Dtbn
%3AANd9GcT024pQsmWAJnYB8XVu_fJE12h2uNG__cTUIDMsp36oJdCw2Pwo&psig=AOvVaw1vgvkKdmkZtYaKsJrR3Kb5&ust=1679747603316000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCPD3tc3J9P0CFQAAAAAdAAA
ABAE
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.wrike.com%2Fapps%2Ffile-storage%2Fdropbox
How do we do it?

Mars Jupiter
Despite being red, Mars is Jupiter is the biggest planet
actually a cold place in the Solar System

Neptune Saturn
Neptune is the farthest Saturn is a gas giant and has
planet from the Sun in fact several rings
CLOUD STORAGE:
3.) Evernote – an online notetaking
and archiving application service;
offers a web application similar to
that of a Word processor; the notes
can be archived or saved in
the application’s storage

https://play.google.com/store/apps/details?id=com.evernote&hl=en_US
What do we offer?
54 Innovation
% You can describe the topic
of the section here

46 Direction
%
You can describe the topic
of the section here

Follow the link in the graph to modify its data and then paste the new one here. For more info, click here
MAPPING APPLICATIONS:
1.) Google Maps is a web mapping
platform and consumer application
offered by Google. It offers satellite
imagery, aerial photography, street
maps, 360° interactive panoramic
views, real-time traffic conditions,
and route planning.
https://play.google.com/store/apps/details?cat=-1&id=com.google.android.apps.maps&hl=en
Our clients

Venus Mars Saturn

Venus is the second Mars is actually not hot, Saturn is composed of
planet from the Sun but a very cold place hydrogen and helium

Mercury Jupiter Neptune

Mercury is the closest Jupiter is the biggest Neptune is the farthest
planet to the Sun planet of them all planet from the Sun
MAPPING APPLICATIONS:
2.) Wikimapia is a geographic online encyclopedia
project that uses Google Maps and a geographically-
referenced wiki system to mark and describe
geographical objects.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2F61817230%40N03%2F6230110064&psig=AOvVaw0fjr3MFIEaeT0nkIF-
PZif&ust=1679748425376000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIiv6vnO9P0CFQAAAAAdAAAAABAE
What do they say about us?

“Neptune is the farthest “Despite being red, Mars is a

planet from the Sun and the cold place. It’s full of iron
fourth-largest one in the oxide dust, which gives the
Solar System.” planet its reddish cast.”

—Gwen Green —Arthur Morgan

“Technology is best when
it brings people together.”
—Matt Mullenweg, Social Media
Entrepreneur
Thanks for listening!
Does anyone have any questions?

CREDITS: This presentation template was created by

Slidesgo, including icons by Flaticon, and infographics &
images by Freepik