Competencies
• Evaluate existing online creation tools, platforms,
and applications in Developing ICT content for specific
professional tracks.
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.
`
Create an original or derivative ICT content using online
creation tools, platforms, and applications to effectively
communicate messages related to
Online Platforms for
ICT Content
Development
Nature and Purposes of Online
Platforms
1. SOCIAL MEDIA PLATFORMS
websites like Facebook allow you to create not
only personal accounts but also pages and groups
where you can share content.
2. BLOGGING PLATFORMS
websites like wordpress, tumblr, and blogger
focus on content design. It typically looks like a
newsletter where you are given options to change
the design to your liking
Audio and Visual Content Creation
Tools and Applications
[Link]: These tools and applications allow
users to create, edit, trim, remix, and
publish kinds of music and sounds.
Examples:
1. Hobnox Audiotool
2. Twisted Wave Audio Editor
3. Audi Trimmer
Audio and Visual Content Creation
Tools and Applications
B. Infographics: These tools and applications give
users the chance to create a creative and stunning
infographic.
Examples:
1. Creately
2. Piktochart
3. Canva
Audio and Visual Content Creation
Tools and Applications
C. Video: These tools and applications allow users to
edit and create videos online.
Examples:
1. Powtoon
2. WeVideo
3. YouTube Video Editor
4. Canva
Audio and Visual Content Creation
Tools and Applications
D. Presentations: These tools and applications let the
users utilize images, videos, and graphics on their
presentations to get into the minds of their target
audience.
Examples:
1. Prezi
2. Haiku Deck
3. Emaze
Audio and Visual Content Creation
Tools and Applications
E. Memes: The Internet is full of colorful images and videos
because audiences love them and sharing them. Memes get
copied and spread rapidly. These applications and tools
make meme creation easier.
Examples:
1. Imgur
2. Rage Comic Generator
3. QuickMeme
Online Offices
These applications and tools are word processors,
spreadsheets, slides, and survey forms that work in
cyberspace.
Examples:
1. Google doc, sheets, slides
2. Google Forms
3. Microsoft Office 365
4. Microsoft Forms
Content Management System
A Content Management System
(CMS) is a computer application
(sometimes online or browser-based)
that allow you to publish, edit, and
manipulate, organize and delete web
content. CMS is used in blogs, news
website, and shopping.
ONLINE PLATFORMS
Online platforms combine all tools into one
place and system for efficient processes
and faster accomplishment of different
tasks. Online applications and tools are
different from online platforms in the sense
that they only get one part of the job.
ONLINE PLATFORMS
Online platforms can also be defined as
digital services that enable
collaboration between two or more
different but interdependent groups of
users who interact through the internet
EXISTING ONLINE PLATFORMS
A. Presentation/ Visualization:
These are online platforms that let you showcase and
share presentations, infographics, and videos with other
people.
Examples:
1. Prezi
2. Zoho
3. Slide Shares
EXISTING ONLINE PLATFORMS
B. Cloud Computing
This type of platform allows you to upload, download,
organize, and store files on the online storage, which is
called cloud instead of using offline storage like a
computer desktop. Here, users can share and even
collaborate files with other users.
Examples:
1. Google Drive
2. Dropbox
3. OneDrive
EXISTING ONLINE PLATFORMS
C. Social Media
These are interactive online technologies that enable the
creation or sharing of information, ideas, career interests,
and other forms of expression through virtual communities
and networks.
Examples:
1. Facebook
2. Twitter
3. Instagram
EXISTING ONLINE PLATFORMS
D. Mapping
This online platform provides detailed information about
geographical regions and sites around the world. It allows
the embedding of maps into proprietary sites.
Examples:
1. Google Maps
2. Bing Maps
3. Wikimapia
EXISTING ONLINE PLATFORMS
E. File Management
This online platform allows you to convert and manage
files like images, videos, documents, audio, and more to
other formats without downloading a software tool.
Examples:
1. Zamzar
2. Word2pdf
3. CloudConvert
EXISTING ONLINE PLATFORMS
F. Web Page Creation
It is an online platform that lets you build a web page that
includes colors, texts, images, and often contains links to
media such as video and audio.
Examples:
1. WordPress
2. Wix
3. Weebly
4. GoDaddy
WHICH ONLINE PLATFORMS AND
APPLICATIONS WILL YOU CHOOSE?
Always remember that there is no existing superior online
platforms and applications. Its productivity and efficiency
are dependent on the purpose as well as the knowledge
and skills of the users. To help you decide which online
platforms and applications are suited for you, you should
consider the following:
WHICH ONLINE PLATFORMS AND
APPLICATIONS WILL YOU CHOOSE?
a. Address Specific Purpose: In choosing online
platforms and applications, make sure that they
have features that are fitted to your needs. They
should help you create content that you wanted to
develop.
b. Easy to Use: Good platforms and applications
must have a friendly interface. It means that you
can easily understand, manipulate and use its
different features.
WHICH ONLINE PLATFORMS AND
APPLICATIONS WILL YOU CHOOSE?
c. Collaborative Features: As much as possible, choose
platforms and applications that promote collaboration. Aside from
the fact that collaboration makes tasks easier and faster to
accomplish, better content will be developed if it is thought and
worked on by more than one brain.
d. Browser Support: You need to ensure that a variety of
browsers supports your chosen online platforms and applications.
WHICH ONLINE PLATFORMS AND
APPLICATIONS WILL YOU CHOOSE?
e. Content Security: Any
platforms or applications
must guarantee the security
of users’ data—for instance,
features of content privacy or
the ability to delete content.
Web page
A Web page is a document for the World Wide Web
that can be accessed and displayed on a monitor or
smartphone using any web browser.
WYSIWYG
The acronym for What You See Is What
You Get. This mean that whatever you
type, insert, draw, place, rearrange,
and everything you do on a page is
what the audience will see.
Online WYSIWYG Platforms
WYSIWYG stands for what you see is
what you get. In other words, you are
creating a website using drag-and-drop
interface or changing the way fonts look in
an editor, that is how your finished product
will look.
HTML
HTML is easy to learn and understand.
For someone who wants to learn web
development, HTML is the first and
foremost computer language that you
need to take note but do not worry, it is
not a sensitive case and as simple as it is.
HTML
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
• HTML elements are represented by TAGS
• HTML TAGS label pieces of content such as “heading”,
“paragraph”, “table” and so on...
• Browsers do not display the HTML tags, but use them to
render the content
of the page
Requirements in creating a web
page using the html
1. Editor – using the Notepad (source code)
in text and extension name - .html or .htm.
2. Browser – responsible for reading HTML
instruction and displaying the web page
output. (ex. Internet, Explorer, Mozilla
Firefox, Google Chrome)
Competency
Create an original or derivative ICT
content using online creation tools,
platforms, and applications to effectively
communicate messages related to
specific professional track.
Webpage Design
A website is a collection of publicly
accessible, interlinked web pages that
share a single domain name. Websites
can be created and maintained by an
individual, group, business or organization
to serve a variety of purposes.
Basic elements of web design
Layout - It means that your design should align
with a handful of soothing adjectives; it should be
simple, familiar, intuitive, clean, and accessible.
Use plenty of whitespace (or padding and margins)
to give the elements of your site room to breathe,
and use grid-based designs to keep design items
organized and orderly.
Strong photography, icons, or graphics
provide supplementary information to your text
but make sure the images complement each other
and the brand you’re looking to represent.
Basic elements of web design
Colour - As for choosing a color scheme,
paying attention to your topic, brand or
industry perspectives, along with your target
audience demographics will make this a
somewhat a painless process. Always look for
ways to narrow your scope from the roughly 7
million discernable hues the eye can detect.
Basic elements of web design
Navigation - Your site’s navigation is not a
space in which to be creative. First off, don’t
fall into the trap of overly animated hover
effects and complex.
Navigational elements which can exist in a
site’s header, body, and footer simply serve to
direct your visitors to the information they
desire as quickly as possible.
Basic elements of web design
Fonts - Your text should be easily readable, which
generally means body copy should be at least 16
pixels. Using a complementary font is ideal for
headings or accents, but don’t go beyond three
typefaces or unnecessary sizing adjustments. Of
course, you’ll want to make sure there’s plenty of
contrast between your text and the site’s
background colors, which generally means a light
color paired with a dark tone. Also, avoid that
piercing red-font-on-green-background eyesore.
Basic elements of web design
Content - Your site visitors and potential
customers want information quickly such as,
is your brand trustworthy? Experienced? Is it
capable of delivering topnotch products and
services? Given people’s short attention
spans and lightning-fast first impressions,
communicating clearly is critical, thus,
information should be easy to read and
digest.