LESSON 6 a.

GRAPHICS

IMAGING AND DESIGN FOR ONLINE ENVIRONMENT Allows you to insert lines, shapes, icons and even
photos

b. UPLOADS
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
Allows you to upload images for your infographics
1. BALANCE
c. BACKGROUND
The visual weight of objects, texture, colors, and space
is evenly distributed on the screen. Changes the background of the selected block

2. EMPHASIS d. TEXT

An area in the design that may appear different in size, Allows you to insert text to your inforgraphic with the
texture, shape and color to attract the viewer’s option to add text frames
attention.
e. TOOLS
3. MOVEMENT
Allows you to create charts, maps (for demographics)
Visual elements guide the viewer’s eyes around the
f. STYLES
screen.
Allows you to modify the color scheme of your
4. PATTERN, REPETITION AND RHYTHM
infographic
These are the repeating visual element on an image or
layout to create unity in the layout or image. Rhythm is
achieved when visual elements create a sense of ONLINE IMAGE FORMATS
organized movement.
Joint Photographics Experts Group (.jpeg or .jpg)
5. PROPORTION
Graphics Interchange Format (.gif)
Visual elements create a sense of unity where they
relate well with one another. Portable Network Group (.png)

6. VARIETY

This uses several design elements to draw a viewer’s COMMON IMAGE FILE FORMATS
attention. PRINCIPLES AND BASIC TECHNIQUES FOR IMAGE
INFOGRAPHICS MANIPULATIONS

- are used to represent information, statistical data,
or knowledge in a graphical manner usually done in
a creative way to attract the viewers attention.
- Infographics make complex data become more
visually appealing to an average user.
 Choose the right file format
 Choose the right image size.
 Caption it.

CREATING INFOGRAPHICS USING PIKTOCHART CREATING AND MANIPULATING IMAGES USING

PHOTOSCAPE
1. Create an account (SIGN UP)
2. Select a template PHOTOSCAPE
3. Editing tools in Piktochart (graphics, uploads, -  is a fun and easy photo editing software that
background, text, styles, tools) enables you to fix and enhance photos
4. Double click the object to EDIT
5. Click Save and Download
 EDITOR TOOLS

PHOTOSCAPE MAIN SCREEN FEATURES
1. VIEWER
A picture viewer with features the same with most
image viewers like changing image orientation
2. EDITOR
Alters the appearance of single image.
1. Home Tab – add frame, resize, sharpen, and add
filters and effects to your image
2. Objects Tab– a place where you can add variety of
objects like texts, shapes and symbols.
3. Crop – This is where various tools can be found in
order to properly crop an image to a desirable size.
4. Tools – includes other tools like red eye correction,
mole removal, mosaic effect and brush tools

3. BATCH EDITOR BATCH EDITOR

Alters the appearance of multiple images. 1. Select the folder where your PHOTOS are
located, then on the PREVIEW window drag the
4. PAGE photos you want to be part of the batch edit to
Arranges several photos to create a single one; similar the work area (center).
to mosaic; 2. Use the tools on the right to edit your photo.
5. COMBINE The Tools tab is replaced by FILTERS tab. It is
used to add a certain filter that will apply to all
Links several images together to form a bigger image. your photos.
6. ANIMATED GIF 3. Resize the pictures so that they do not exceed
800 pixels in width. Add filters.
Allows you to create an animated GIF from several
pictures 4. Click CONVERT ALL button found on the upper
right.
7. PRINT
5. SAVE your file.
Readies pictures for printing

8. SPLITTER
LESSON 7
Allows you to create an animated GIF from several
pictures ONLINE PLATFORM FOR ICT DEVELOPMENT
9. SCREEN CAPTURE

Captures the screen and save it Which platform is superior? Why?

10. COLOR PICKER
Grabs a pixel from your screen to be used in editing
11. RAW CONVERTER
Converts raw images (uncompressed images usually
from digital camera) to JPEG
12. RENAME
Allows you to rename a batch of photos
13. PAPER PRINT
Useful tool for printing your own calendars, sheets,
lined paper, graph paper, etc.
Social Media or Blogs
younger audiences consume more social media than
television. 
Platform
- is a group of technologies that are used as a
base upon which other applications, processes
or technologies are developed. In
personal computing, a platform is the basic
hardware (computer) and software (operating
system) on which software applications can be
run.
ONLINE PLATFORM FOR ICT CONTENT
1.  SOCIAL MEDIA PLAT FORMS
- Allows you to create not only accounts but also
pages and groups where you can share content
2. BLOGGING PLATFORMS
- Typically looks like a news letter where you are
given option to change the design your liking.
- WordPress, Tumblr, and Blogger
CLOUD COMPUTING
-  often referred to as simply “the cloud,” is the
delivery of on-demand computing resources—
everything from applications to data centers—
over the internet on a pay-for-use basis.
CONTENT MANAGEMENT SYSTEM (CMS)
-  is a computer application (online or browser
based) that allows you to publish, edit and
manipulate, organize and delete web content.
- CMS is used in blogs, news website and shopping
LESSON 8
BASIC WEB PAGE CREATION
HTML (Hypertext Markup Language)
CSS (Cascading Style Sheets)
WYSIWYG (What You See IS What You Get)
Other ways to create a Website
• HTLML, CSS, using other web development
programming language
• WordPress, Jimdo, Wix, etc.
• Microsoft Word
JIMDO
• A WYSIWYG web hosting service
• Offer's free professional, and business web
hosting services.
• It has an iOS and Android App which you can
use to manage you website.
• It includes an easy-to-use, robust website
editing tool, hosting, a domain name
registration, and an email account. 
Creating JIMDO Website
1. Access www.jimdo.com
2. Create a free account
3. Choose Template
• Add and rearrange content — text, photos, etc.
• Create website pages and a navigation menu
• Design your website with different settings -
change fonts, colors, etc.
• Connect your website domain
STRENGTHS
• Fast and easy to build and update
• Fast learning curve
• Affordable, includes hosting, domain, and email
address
• Great solution for simple ecommerce needs (1-
50 different store items)
• Flexible, modern templates that each can be
customized for nearly any kind of website 
• Basic blogging
• Capabilities can be expanded using third-party
widgets (embeddable html) 
• Every website is instantly optimized for mobile
• Free mobile app allows website to be updated
from any iOS or Android device
• Website software is always instantly updated to
latest version. No need to run updates and
much lower risk of being hacked or hit with a
virus
• Best tool for a “standard” website or simple
store
• SEO tools are built in to give you the
opportunity to maximize your search engine
results traffic
• Native email and chat support in 9 different
languages
WEAKNESS
• Not great for larger stores (above 100 items)
• No built-in digital goods in store (can’t sell
mp3s, videos, ebooks without using a third-
party widget)
• Blogging can be frustrating for very high-volume
publishers (no simple
archiving/pagination/search).
• No user accounts for visitors, although there are
password-protected areas, just need to use a
single shared password rather than individual
login credentials.
Editing Elements
• Move Element Up – used to move the element
up by one level
• Move Element Down – used to move element
down one level lower
• Delete Element – use to remove element
• Copy Element – used to copy the element
• Drag Tool – click and drag the element to a valid
part of the page
Adding Elements
a) Heading – to insert heading type of text
b) Text – to insert a paragraph type of text
c) Photo – to insert a single photo
d) Text with Photo – to insert a photo surrounded
with text
e) Photo Gallery – to insert multiple photos on
one area
f) Horizontal Line – to insert horizontal that acts
as a divider
e) Spacing – to add a space with a specified size
f) Columns – to insert columns that device an area
vertically
g) Video – to insert a video from a video hosting
site like YouTube
h) Form – creates a Send an Email form for
feedback
i) Store Item – adds space for selling an item
(online shopping)
j) Share Buttons – adds buttons for the site visitor
to share our websites
k) Additional Elements – includes options like
Google Maps, file download, widget, etc.
Site Settings
• Design
• Store – manages the orders made from your
website
• Blog – creates a blog for your website
• SEO – Search Engine Optimization; used for
others to easily find your site using search
engines like Google and Bing
• Domain and Email
• Settings – changes account and web settings
• Help – accesses Jimdo’s Help archive
• Sizing Tools – used to make image larger or
smaller or restore actual size page.
• Align Tools – use for left, right and center
alignment page
WORDPRESS
- Wordpress.org is an open source blogging and
content management system that you can
download for free and install on any server running
a mysql database and php. Most existing stand-
alone web hosting companies make it easy to
install wordpress on their hosting accounts for free.
- Wordpress.com hosted version of the open source
software allowing you to run either free or paid
websites on their servers.
STRENGTHS
• Best tool for high-powered blogging (magazines,
publishers, etc)
• Giant developer network and plugin catalog
help you achieve just about any technical need
• Flexible
• Robust file management
 • User accounts and management

WEAKNESS

• Relatively high learning curve

• No dedicated support team for open source

project

• Can be expensive to build out with

customization

• Many bad developers and bad plugins out there

• Requires custom-coding to reach full power

• Much more difficult to update content as the

place you enter the content does not look the
same as where it appears. Often need to use
custom code to get it looking right

• Domain, hosting, email must all be purchased

separately for varying costs

• Constantly need to update the wordpress

system software and every plugin by hand.
Incompatibilities with new versions are
common

• Not updating can result in website being hacked

or being compromised