Review

Graphics;
Common Online Images File Formats;
Basic Principles of Graphics and Layout;
Infographics;
Different Image Manipulation Techniques

1
 ONLINE
PLATFORMS FOR
ICT CONTENT
DEVELOPMENT
Empowerment Technologies

2
Competencies
 evaluate existing websites and online resources based on the
principles of layout, graphics and visual message design
(CS_ICT11/12-ICTpt-Ig-h-9)
 apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for a specific
purpose in specific professional tracks (CS_ICT11/12-ICTpt-Ig-h-10)
 create an original or derivative ICT content using online creation tools,
platforms, and applications to effectively communicate messages
related to specific professional track (CS_ICT11/12-ICTpt-Ig-h-11)

3
Objectives
 understand the nature and the purpose of online platforms and
applications;
 explore the different platforms available for developing web contents;
 evaluate existing online creation tools, platforms, and applications in
developing ICT content;
 apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for a specific
purpose, and;
 create an original or derivative ICT content using online creation tools,
platforms, and applications to effectively communicate messages.
4
What can you observe from the
image?

5
ONLINE PLATFORMS
• “online platform” has been used to
describe a range of services available on
the Internet.
• digital service that facilitates interactions
between two or more distinct but
interdependent sets of users (whether
firms or individuals) who interact through
the service via the Internet 6
ONLINE PLATFORMS

- is an online web
pages that allows the
user to create another
page for the others to
interact with.
7
ONLINE PLATFORMS

also called as Online Website

created to aid users in creating
web content and cater to
different kinds of information such
as text, images, and videos

8
Online Platform Categories

• Social Media
• Search Engines
• Communications Services
• Payment Systems
• Advertising Platforms
• Creative Content Outlets
ONLINE PLATFORMS

Social Media Platforms

• websites which allows you to create not
only personal accounts but also pages
and groups where you can communicate
informally with others, find people, and
share similar interests.
• It has a “One-size-fits-all” design.

10
ONLINE PLATFORMS
Presentation/ Visualization
• graphics program that allows you to
create slide shows
• it allows you to organize, summarize
and format materials comprising
different multimedia elements.
• It has also transitions and animation to
add motion in the presentation.
Example: Google Slides, Zoho Show, LinkedIn SlideShare, Slide Rocket,
Prezi, Microsoft Office 365, Canva and many more. 11
ONLINE PLATFORMS

File Management
• is a system that allows you to organize
and keep track of files.

Examples: Zamzar, word2pdf, Dropbox

12
ONLINE PLATFORMS

Mapping
• an online mapping services use for
finding locations, creating routes and
tagging places.

Example: Google Maps

13
Other Online Platforms
• Electronic Mails – (E-mails) – Yahoo, Google, Rocket
mail, Hot Mail, and other email hosting websites
• Documents and other hosting services- Google Docs,
Zoho Office, Microsoft Office 365
• Photographs or Media Sharing Websites – YouTube,
Instagram, Vimeo, Picasa, Flickr, Netflix and many more.
• Backup Services – DropBox, Google Drive, iCloud,
14
ONLINE PLATFORMS

Web Page Creation Platform

• platforms used to build a new page
online designed by the creator which
can be customize using coding
language or predefined template
known as WYSIWYG.
Examples are Wix, Weebly, Google Sites, WordPress
15
 ONLINE PLATFORMS
Blogging Platforms
• are broadcast-style communications
systems that enable authors to publish
articles, opinions or product reviews
(known as posts), which can be delivered
through stand-alone websites, email, feed
syndications systems and social networks.
• A webpages that typically looks like a
Example: Blogs, WordPress newsletter where you are given options to
change the design to your liking consisting
of discrete, often informal diary-style text.
16
Social Media VS Blogging Platforms

17
Content Management System
• is a computer application that allows
you to publish, edit and
manipulate, organize and delete
web content.
• CMS is used in blogs, news
websites, and shopping.

18
Cloud Computing
• an internet-based computing utility
where you can store, process and
access data and programs from the
internet or third-party data centers,
instead from local servers or hard
drives.
• the practice of using a network or
remote servers hosted on the internet
to store, manage, and process data
19
Cloud Computing

• Social Media and Blogging

Platforms used cloud in storing the
data we are manipulating online.

20
Advantages of Cloud Computing
1. No need to install
2. Saves hard disk space
3. Easy access to your software/files; can be ran anywhere as long
as there is internet connection
4. Saves you from buying software licenses and additional hard disk
space
5. No need to update because it updates automatically
6. Minimum system requirements
7. Back-up and data recovery and relatively easier that on a
physical device.
21
Disadvantages of Cloud Computing
1. Can be hampered by slow Internet speed; no connection,
no cloud computing
2. May still require compatible software like a browser
3. You do not own the software; you are simply renting it
4. Security risk of doing things over the Internet as opposed
to your personal computer alone
5. More prone to hacking
6. Limited control over the infrastructure itself.
22
 BASIC
WEB
PAGE
CREATION
Empowerment Technologies

23
WYSIWYG
• is the acronym for What You See Is
What You Get.
• this means that whatever you type,
insert, draw, place, rearrange, and
everything you do on a page is what
the audience will see.
24
BASIC WEB DESIGN PRINCIPLES

SIMPLICITY

 User-friendly design
 Clean and fresh design
 Seamlessly navigate from one page
to another
 Easy loading of elements
25
BASIC WEB DESIGN PRINCIPLES

CONSISTENCY

 fonts, sizes, headings, sub-headings,

and button styles must be the same
throughout the website

26
BASIC WEB DESIGN PRINCIPLES

TYPOGRAPHY AND READABILITY

 Use fonts that are easier to read.
 Make proper combination of typefaces
each and every design elements such as
headlines, body texts, buttons etc.

27
BASIC WEB DESIGN PRINCIPLES

MOBILE COMPATIBILITY

Web design must be effective for various

screens
Compatible in many devices

28
BASIC WEB DESIGN PRINCIPLES

COLOR PALETTE AND IMAGERY

 Pick a perfect color palette for your website
which can create a pleasing atmosphere
 Avoid using too many colors

29
BASIC WEB DESIGN PRINCIPLES

EASY LOADING
 Optimize image sizes
 Compress other elements
 Use video hosting for videos

30
BASIC WEB DESIGN PRINCIPLES

EASY NAVIGATION
 Create a logical page hierarchy
 Design simple clickable buttons

31
BASIC WEB DESIGN PRINCIPLES

COMMUNICATION
organize information by making good
use of headlines and sub-headlines
Use bullet points, rather than long gusty
sentences

32
 Creating a web page
using Microsoft Word

33
Creating a web page using MS Word

1. Open Microsoft
Word.
2. Type anything on
the page like
“Welcome to my
Website.”
3. Click on File > Save
As > Browse.

34
Creating a web page using MS Word
4. On the Save As dialog
box, locate your
activities folder and
create a new folder
named “Sample
Webpage.”
5. Specify the filename
“Sample Webpage.”
6. On the Save As type,
select “Web Page (*.htm;
*.html).” 35
Creating a web page using MS Word
7. Click the Change Title
button.

8. Input the title as seen

below, then click OK
then Save.

36
Creating a web page using MS Word
9. Check the files on your
Sample WebPage folder. You
will see a new folder
generated including your
htm/html file.

10. Open the Sample

WebPage.htm file and you
will see that you just created
a webpage using MS Word.
37