COLLABORATIVE ICT Web portals
DEVELOPMENT  Web Portal - a website that contains
ONLINE COLLABORATIVE TOOLS -
tools that can help your group “go the
distance” and work as if you already have
your own office.
Examples:
Facebook Groups, WordPress, G Suite,
Google Docs, Sheets, and Slides, Microsoft
Office Online, Microsoft’s Yammer, Trello,
Web Portals
ONLINE COLLABORATIVE TOOLS
 Facebook Groups - allows you to
create a group page that will allow
people in your group to communicate
your ideas
 WordPress - allows you to multiple
contributors for a single blog
 G Suite - productivity and
collaboration tools, software and
products developed by Google. It
comprises Gmail, Hangouts, Calendar,
and Google+ for communication
 Google Docs, Sheets, and Slides - are a
word processor, a spreadsheet and a
presentation program respectively, all
part of a free, web-based software office
suite offered by Google within its
Google Drive service.
ONLINE COLLABORATIVE TOOLS
 Microsoft Office Online - allows
multiple people to work on different
office files
 Microsoft’s YAMMER - offers
companies to have their own social
network that allows sharing and
managing content
 TRELLO - offer an online to-do
checklist for your entire team
information from different sources and
places them in one location in a uniform
way.
 Examples: igoogleportal.com,
msn.com, yahoo.com, aol.com
Online Platforms for Content
Development
Online Platforms - websites or applications
used to increase the productivity of the users
and help them create or develop different
content with the use of the internet.
Examples of Online Platform:
 Presentation/Visualization
 Cloud Computing
 Social Media
 Web Page Creation
 File Management
 Mapping
Presentation/Visualization Tools - Graphic
programs used to create slide shows for
presenting information.
Examples:
 Prezi – helping to reinvent the art of
presentation
 Zoho – an online project management
app that helps you plan your work and
keep track of your progress
 SlideShare – users are able to share
presentations they have created
 MindMeister – an online mind-mapping
tool that lets you capture, develop and
share ideas visually
Cloud Computing - storing and accessing data
and programs over the Internet instead of your
computer's hard drive. The cloud is just a
metaphor for the Internet.
Examples:
 Google Drive – keeps all work in one
secure place with online file storage
 Dropbox – keeps your files safe,
synced, and easy to share.
Advantages of Cloud Computing
 No need to install.
 Easy access to your files.
 Saves money from buying
software license.
 Minimum system requirements.
 Data recovery is easier.
Disadvantages of Cloud Computing
 No internet = no access to
application
 More prone to hacking.
 May require compatible software.
 Limited control.
 Low customization, but is
strengthened by popularity.
 Highly customizable.
Social Media - computer-mediated tools that
allow people, companies and other organizations
to create, share, or exchange information, career
interests, ideas, and pictures/videos in virtual
communities and networks.
Examples:
 Facebook
 Twitter
 Instagram
Web Page Creation - encompasses a number of
important elements including color, layout, and
overall graphical appearance.
Examples
 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
 Weebly – a web-hosting service featuring
a drag- and-drop website builder.
File Management - the storing, naming,
sorting and handling computer files.
Examples of File Management:
 Zamzar – web application to convert files
 word2pdf – convert Word files to PDF
(Portable Document Format) with this
online tool
Mapping - creation of maps, a graphic symbolic
representation of the significant features of part of
the surface of the Earth.
Examples of Mapping:
 Google Maps – a desktop web
mapping service developed by
Google
 Wikimapia - is a privately owned open-
content collaborative mapping project,
that utilizes an interactive "clickable"
web map
Content Management System - computer
application (sometimes online or browser-based)
that allows you to publish, edit and manipulate,
organize and delete web content. CMS is used in
blogs, news websites, and shopping
Blogs - discussion or informational website
published on the web consisting of discrete, often
informal diary-style text entries ("posts"). Posts
are typically displayed in reverse chronological
order, so that the most recent post appears first, at
the top of the web page
Examples of Blogging Sites: WordPress
(wordpress.com), Blogger (blogger.com or
blogspot.com), Blog.com, Medium.com,
Squarespace.com
Basic Web Page Creation
Website Template - pre-designed webpage,
simply by adding your text and customization to
create your desired web page. It is usually built
with HTML and CSS code.
 HTML – stands for Hypertext Markup
Language
 CSS – stands for cascading style
sheets
WYSIWYG - Back in the day, you actually need
to learn HTML and CSS to be able to create a
decent website, but today, we use a WYSIWYG
editor. It allows you to create and design a web
page without any coding knowledge.
WYSIWYG - 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. It shows
and prints whatever you type on the screen.
The Dos and Don'ts in Website Creation
 Consider the audience and goals.
 It is advisable to plan the site on paper
first.
 Strive for consistency.
 Provide a rich set of links within a site.
 Don’t hide important information.
 Provide opportunities for interaction.
 Avoid text-only pages.
 Don’t sacrifice elegance.
 Provide a link for every URL used in the
site.
 Give a descriptive title of the site.
 Include a brief introduction.
 Make the site’s home page as useful a
starting point as possible.
 Make sure the text is legible.
 Make sure the site is platform
independent.
 Consider the needs of the viewers.
 Thoroughly test the site and carefully
proofread.
Creating Your Website with Weebly Explore
Weebly and start creating your group's
website.
Elements of Design
1. Line - continuous mark made on a
surface by a moving point.
▪ help to enhance, direct, and create
movement.
2. Shape - an enclosed space and are limited
to two dimensions (flat in
nature).
▪ There are two types of shapes:
- Geometric
- Organic
3. Space - the distance or area between,
around, or within objects.
▪ Space may refer to the ff.
a. White Space
b. Positive or Negative Space
4. Texture - to the feel of an object. ▪
Texture can be created by using
pattern designs or repeating shapes to give
an illusion of a texture.
5. Color - the amount of light reflected
off of an object.
▪ The color wheel is a valuable tool to help
you decide which color to use and which is
going to be most effective.
a. Analogous Colors
b. Complementary Colors
c. Monochromatic Colors
d. Triadic Colors
Principles of Design
1. Balance - the way the parts of a
composition are arranged.
▪ It can also be described as the visual weight.
▪ It is a sense that the output feels stable and ▪ Proportion helps communicate the
"feels right." Imbalance causes a feeling of relationship of your subjects and it can
discomfort in the viewer. also show the level of importance.
▪ Balance can be achieved in 3
different ways: 6. Rhythm - repetition of similar elements
a. Symmetry, in which both sides of a of design and/or subjects in a work of art.
composition have the same elements in the
same position, as in a mirror-image, or the
two sides of a face. Infographics
b. Asymmetry, in which the composition is ▪ Data-rich visualization of a story or
balanced due to the contrast of any of the thesis
elements of art. For example, a large circle ▪ Tool to educate and inform
on one side of a composition might be ▪ Way to build brand awareness and
balanced by a small square on the other inbound links at half the cost of standard
side online marketing campaigns
c. Radial symmetry, in which elements are
equally spaced around a central point, as in The Components of an Infographic
the spokes coming out of the hub of a bicycle 1. Visual Elements
tire. ▪ Color
▪ Graphics
2. Contrast - the difference between elements
▪ Reference icons
of designs or subjects in a
work of art. 2. Content Elements
▪ Contrast can be achieved by juxtapositions ▪ Time Frames
of any of the elements of art. ▪ Statistics
▪ References
3. Emphasis - using a focal point or a center 3. Knowledge Elements
of interest in the design that commands ▪ Facts
the viewer's attention.

4. Movement - shows action and

directs the viewer's eyes through a work
of art.
▪ A sense of movement can be created by
diagonal or curvy lines, either real or
implied, by edges, by the illusion of space,
by repetition, by energetic mark-making.

5. Proportion - the relationship of the size

of the objects within a work of art. In
other words, it's the scale of the objects
(large and small).