LESSON 6: Imaging and Design for Online

Environment

PHOTO EDITING
 Photo editing encompasses the processes of altering images, whether they are digital
photographs, traditional photo chemical photographs, or illustrations. Traditional
analog image editing is known as photo retouching, using tools such as an airbrush to
modify photographs, or editing illustrations with any traditional art medium.

Graphic software programs

 Which can be broadly grouped into vector graphics editors, raster graphics editors,
and 3D modelers are the primary tools with which a user may manipulate, enhance,
and transform images. Many image editing programs are also used to render or create
computer art from scratch.
BASIC OF IMAGE EDITING
 1. RASTER IMAGES are stored in a computer in the form of a grid of picture
elements or pixels.
2. VECTOR IMAGES such as Adobe Illustrator, Inkscape and etc. are used to create
and modify vector images, which are stored as descriptions of lines, Bezier curves
and text instead of pixels.

DIFFERENCE BETWEEN RASTER AND VECTOR IMAGES

RASTER IMAGESuse many colored pixels or individual building blocks to

form a complete image JPEGs, GIFs and PNGs are common raster
image types. Almost all of the photos found on the web and in print
catalogs are raster images.
 VECTOR IMAGES alternatively, allow for more flexibility. Constructed using
mathematical formulas rather than individual colored blocks, vector file types such as
EPS, AI and PDF are excellent for creating graphics that frequently require resizing.
3. 3D MODELING (OR MODELLING) is the process of developing a
mathematical representation of any three dimensional surface of an object via
specialized software. The product is called a 3D model. It can be displayed as a two-
dimensional image through a process called 3D rendering or used in a computer
simulation or physical phenomena. The model can also be physically created using
3D printing devices.
IMAGE FORMATS
Ø JPEG is a commonly used method of lossy compression for digital
images, particularly for those images produced by a digital
photography.
Ø PNG (PORTABLE NETWORK GRAPHICS) is a raster graphics file
format that supports lossless data compression.
Ø GIF a lossless format for image files that supports both animated
and static images.
Ø BMP is a raster graphics image used to store bitmap digital
images
Ø EPS used in vector-based images in Adobe Illustrator.
Ø SVG is an XML-based vector image format for two-dimensional
graphics w/ support for interactivity and animation
Ø .3ds is one of the file formats used by the Autodesk 3Ds Max 3D
Modelling, animation and rendering software.
Ø .fbx is an exchange format, in particular for interoperability
between Autodesk products and other digital content creation
software

FEATURES OF IMAGE EDITORS

SELECTION One of the prerequisites for many of the app mentioned

below is a method of selecting part(s) of an image, thus applying a
change selectively without affecting the entire picture
Ø MARQUEE TOOL for selecting rectangular or other regular
polygon-shaped regions
Ø LASSO TOOL for freehand selection of a region
Ø MAGIC WAND TOOL selects objects or regions in the image
defined by proximity of color or luminance

LAYERS which are analogous to sheets of transparent acetate, stacked

on top of each other, each capable of being individually positioned,
altered and blended with the layers below, w/o affecting any of the
elements on the other layers.
IMAGE SIZE resize images in a process often called image scaling,
making them larger, or smaller. High image resolution cameras can
produce large images which are often reduced in size for Internet use.

CROPPING creates a new image by selecting a desired rectangular

portion from the image being cropped. The unwanted part of the image
is discarded. Image cropping does not reduce the resolution of the
area cropped.

CLONING uses the current brush to copy from an image or pattern. It

has many uses: one of the most important is to repair problem areas in
digital photos.

IMAGE ORIENTATION – Image editors are capable of altering an image

to be rotated in any direction and to any degree. Mirror images can be
created and images can be horizontally flipped or vertically flopped.
Rotated image usually require cropping afterwards, in order to remove
the resulting gaps at the image edges.

PERSPECTIVE – is the art of drawing solid objects on a two- dimensional

surface so as to give the right impression of their height, width, depth
and position in relation to each other when viewed from a particular
point.
SHARPENING AND SOFTENING– Sharpening makes images clearer. Too
much sharpening causes grains on the surface of the image. Softening
makes images softer that removes some of the highly visible flaws.
Too much causes the image to blur.

SATURATION- is an expression for the relative bandwidth of the visible

output from a light source. As saturation increase, colors appear more
“pure.’’ As saturation decreases, colors appear more ‘’ washed-out.’’
CONTRAST AND BRIGHTENING
Contrast of images and brighten or darken the image. Underexposed
images can be often be improved by using this feature.

Brightening lightens the image so the photo brightens up. Brightness is

a relative expression of the intensity of the energy output of a visible
light source.

Adjusting contrast means adjusting brightness because they work

together to make a better image.

PHOTO MANIPULATION
Photo manipulation involves transforming or altering a photograph
using various methods and techniques to achieve desired results.
Some photo manipulations are considered skillful artwork while others
are frowned upon as unethical practices, especially when used to
deceive the public, such as hat used for political propaganda, or to
make a product or person look better.

DIFFERENCES
PHOTO EDITING – signifies the regular process used to enhance photos
and to create them ‘’Actual editing simple process’’. Also includes
some of the regular programs used for editing and expose how to use
them.
PHOTO MANIPULATION – includes all simple editing techniques and have
some manipulation techniques like erasing, adding objects , adding
some graphical effects, background correction, creating incredible
effect, change elements in an image, adding styles , eliminating
blemishes from a person’s face and changing the features of a
person’s body.

b.) Infographics
also known as data visualization, information design,
and communication design
 It is any graphic that display and explains
information, whether that be data or words. When we
use the term ‘’infographics’’, we’re using it as a
general term used to describe data presented in a
visual way.
 Infographics are important because they change the
way people find and experience stories. Infographics
are being used to augment editorial content on the
web, it creates a new way of seeing the world of
data, and they help communicate complex ideas in a
clear and beautiful way.

TYPES OF INFOGRAPHICS
1. Statistical
 2. Process Flow
3. Geographic

PROCESS OF MAKING INFOGRAPHICS

Research
a) Know what is needed
b) Take a reference
c) Know the audience
d) Decide the type of infographics
Brainstorm
a) Gather ideas
b) Build thought process
Design
a) Choose your tool and start designing
Review
a) Cross check the data to deliver flawless output
Launch
a) Make it viral
b) Share on social network
BEST PRACTICES WHEN CREATING INFOGRAPHICS
a) Maintain a structure
b) Don’t use more than 3 color palletes
c) Typography matters a lot
d) Include source and references

LESSON 7: Online Platforms for ICT Content

Development
1.Facebook
Posted on February 13, 2017
1. Marketplace – allows members to post, read and respond to classified ads.
2. Groups – allows members who have common interests to find each other and interact.
3. Events – allows members to publicize an event, invite guests and track who plans to
attend.
4. Pages – allows members to create and promote a public page built around a specific
topic.
5. Presence technology – allows members to see which contacts are online and chat.
Within each member’s personal profile, there are several key networking components. The most
popular is arguably the Wall, which is essentially a virtual bulletin board. Messages left on a
member’s Wall can be text, video or photos. Another popular component is the virtual Photo
Album. Photos can be uploaded from the desktop or directly from a smartphone camera. There is
no limitation on quantity, but Facebook staff will remove inappropriate or copyrighted images.
An interactive album feature allows the member’s contacts (who are called generically called
“friends”) to comment on each other’s photos and identify (tag) people in the photos. Another
popular profile component is status updates, a microbloggingfeature that allows members to
broadcast short Twitter-like announcements to their friends. All interactions are published in a
news feed, which is distributed in real-time to the member’s friends.
Facebook offers a range of privacy options to its members. A member can make all his
communications visible to everyone, he can block specific connections or he can keep all his
communications private. Members can choose whether or not to be searchable, decide which
parts of their profile are public, decide what not to put in their news feed and determine exactly
who can see their posts. For those members who wish to use Facebook to communicate
privately, there is a message feature, which closely resembles email.
2. Instagram

Instagram is an online mobile photo-sharing site that allows its users to share pictures and
videos either publicly or privately on the app, as well as through a variety of other social
networking platforms, such as Facebook, Twitter, Tumblr, and Flickr. Originally, a distinctive
feature was that it confined photos to a square shape, similar to Kodak Instamatic and Polaroid
SX-70 images, in contrast to the 4:3 aspect ratio typically used by mobile device cameras. In
August 2015, version 7.5 was released, allowing users to upload media captured in any aspect
ratio. Users can also apply digital filters to their images. Videos on Instagram debuted in June
2013, allowing prerecorded square standard definition resolution clips of up to 15 seconds to be
shared; later improvements added support for widescreenresolutions of up to 1080p and longer
recording times for either prerecorded (up to one minute) or disappearing live (up to one hour)
videos.
Instagram was created by Kevin Systrom and Mike Krieger, and launched in October 2010 as a
free mobile app. The service rapidly gained popularity, with over 100 million active users as of
April 2012[10][11] and over 300 million as of December 2014.[12] Instagram is distributed through
the Apple App Store and Google Play.[13]Support for the app is available for iPhone, iPad, iPod
Touch, Windows 10 devices and Android handsets, while third-party Instagram apps are
available for BlackBerry 10 and Nokia-Symbian Devices.
3. Twitter

Twitter is an online news and social networking service where users post and interact with
messages, “tweets,” restricted to 140 characters. Registered users can post tweets, but those who
are unregistered can only read them. Users access Twitter through its website interface, SMS or a
mobile device app.[10] Twitter Inc. is based in San Francisco, California, United States, and has
more than 25 offices around the world.
Twitter is about learning and adding value
It is also about adding value to others by giving or sharing something valuable to them so that
they are able to learn something. That is why I usually tweet about stuff that I read, learned or
have good value. I have learned so much from the others that is why I love twitter. It is also
about helping others, I disagree with many‘experts’ that say you should only
follow ‘influential’ users because I don’t judge someone that way, and because I believe the
people at Twitter don’t believe in them either. I also disagree that you should only share your
own stuff otherwise you will dilute your brand. Sure it makes sense but 24/7 sharing your own
blog post and following influential people?
BLOGGING SITES
1. Weebly

Weebly is one of the easiest website builders in the market. They allow you to drag and drop
content into a website, so it’s very intuitive to use (click here to see our opinion on Weebly).
By using Weebly’s website building elements, you can literally drag them into your website and
have a website built relatively quickly, and painlessly. The beauty of this system is that you can
pretty much drag the elements to wherever you want – so it’s not very restrictive on where and
how you place your website content.

Weebly’s elements include pictures, paragraphs, videos, buttons, maps, contact forms – basically
all the basics for website building.

2. Tumblr
Tumblr is a popular microblogging platform designed for creative self-expression. It is
considered a mindful alternative to Facebook and other social media websites where users blog
on a myriad of topics.
You can link your Tumblr account to other social networks you use and you can feed your
traditional blog or other RSS feed to your Tumblelog. You can also create static pages such as
your own Questions page that people are automatically taken to when they ask you a question. If
you want to make your Tumblelog look more lie a traditional website, you can do it by adding
pages. You can make your Tumblelog private or just make specific posts private as needed, and
you can schedule posts to publish in the future.
Tumblr is perfect for people who don’t need a full blog to publish lengthy posts. It’s also great
for people who prefer to publish quick multimedia posts, particularly from their mobile devices.
Tumblr is also a great choice for people who want to join a larger community. If a blog is too
much or too big for you, but Twitter is too small or too little for you and Instagram isn’t versatile
enough for you, then Tumblr might be just right for you.
It’s also easy to invite other people to contribute to your Tumblelog.

If you want to track your stats, you can add any analytics tracking code to your Tumblelog.
Some users will even burn a feed with Feedburner, create custom themes, and use their own
domain names
3. Pinterest

Pinterest is a free website that requires registration to use.Users can upload, save, sort, and
manage images—known as pins—and other media content (e.g., videos) through collections
known as pinboards. Pinterest acts as a personalized media platform. Users can browse the
content of others in their feed. Users can then save individual pins to one of their own boards
using the “Pin It” button, with pinboards typically organized by a central topic or theme. Users
can personalize their experience by pinning items, creating boards, and interacting with other
members. The end result is that the “pin feed” of each user displays unique, personalized results.
Content can also be found outside of Pinterest and similarly uploaded to a board via the “Pin It”
button, which can be downloaded to the bookmark bar on a web browser, or be implemented by
a webmaster directly on the website. They also have the option of sending a pin to other Pinterest
users and email accounts through the “Send” button. Some websites include red and white “pin
it” buttons on items, which allow Pinterest users to pin them directly.
Initially, there were several ways to register a new Pinterest account. Potential users could either
receive an invitation from an already registered friend, or they could request an invitation
directly from the Pinterest website that could take some time to receive. An account can also be
created and accessed by linking Pinterest to a Facebook or Twitter profile. When a user re-posts
or re-pins an image to their own board, they have the option of notifying their Facebook and
Twitter followers. This feature can be managed on the settings page.
On the main Pinterest page, a “pin feed” appears, displaying the chronological activity from the
Pinterest boards that a user follows.
A “board” is where the user’s pins are located. Users can have several boards for various items
such as quotes, travel or, most popularly, weddings. A “pin” is an image that has either been
uploaded or linked from a website. Once users create boards and add pins, other users can
now repin, meaning they can pin one user’s image to their board as well. Once the user has set
up their account and boards, they can browse, comment, and like other pins. Users might be
discouraged by repeated images and difficult-to-follow direct linking features. Pinterest has also
added the option of making boards “secret” so that the user can pin to and view boards that only
the user can see when logged into their own account.
Pinterest does not generate its own content; rather, it draws from many resources around the web
and compiles them in one convenient location for users.

LESSON 8: Basic Web Page Creation

1.) What are the advantages and disadvantages of a WYSIWYG editor?
ADVANTAGE :

-You don’t need any scripting/coding experience.

– It’s simple and easy for beginners.

– Everything moves fluently, and you can easily preview what you want.

DISADVANTAGE :

-A lot of HTML code churned out by the editors is superfluous which makes the web pages
bulky in file size

-WYSIWYG editors let you ignore certain aspects that are important.

-WYSIWYG editors simply do not provide enough support and help in optimizing your web site
for search engines.

2.) List Down (3) more WYSIWYG web hosting services and their URL.
– Weebly Web Builder ( https://www.weebly.com/ )
– Wix Web Builder ( https://www.wix.com/ )
– Siteground Builder ( https://www.siteground.com/)

LESSON 9: Collaborative ICT Development

Web portal
a website that contains information from different sources and places them in one location in a
uniform way
Yahoo!
example of a web portal
yahoo.com
offers a web portal where news, email, weather, etc. are found in one place
Facebook groups ; WordPress ; Google Drive ; Microsoft Office Online ; Microsoft’s
Yammer ; Trello
examples of online collaborative tools
Facebook groups
used 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
Google Drive and Microsoft Office Online
allow multiple people to work on different office files and even have their own group’s cloud
storage
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

Interactive Multimedia
World Wide Web
world-wide-wait
WWW
CNN
now hosts videos placed on their home page, which was unthinkable in the past because of slow internet
speed
on-demand
Videos way back then were never on the home page and can be viewed “____________” or only when a
user clicks on it.

videos (youtube)
sound, music, or audio (soundcloud)

online games (farmville)

online tests (iq and personality test)

courseware (e-learning courses)

podcasts (ted talks, ear biscuits, the starters, stuff you should know)

vodcasts (video game high school and gmm)

multimedia contents (7)
online tests
online survey forms and tests that automatically display the results when finished
courseware
online courses that stimulate the classroom online
podcasts
an episodic series of audio or text files streamed online
embed
to place an object from one site to another
 LESSON 10: ICT as Platform for Change
The Role of ICT in Recent History
Throughout recent history, the Philippines have been one of a few nations that demonstrate
unity for a call to action or social change. These campaigns for social change would have not
been successful if it were not for ICT.
1. EDSA (PEOPLE POWER REVOLUTION). The people power revolution lasted from
1083 to 1986. During a radio broadcast of Radio Veritas, Cardinal Sin encouraged the
Filipinos to help end the regime of then President Ferdinand Marcos. A major protest took
place along the EDSA from February 22 to 25, 1986 involving two million Filipinos from
different sectors. These included civilians, political parties, the military and religious groups.
2. EDSA DOS.This is also known as the 2001 EDSA Revolution, happened during January 17
to 21, 2001. It was fueled after 11 prosecutors of the President Joseph Estrada walked out of
the impeachment trial. As a result, the crowd in EDSA grew over the course of a few days
through text brigades.
3. Million People March.This is a series pf protest that mainly took place in Luneta Park from
august 22 to 26, 2013. There were also several demonstrations that happened around key
cities in the Philippines and some location overseas. The organizers and promoters of the
Million People March used Facebook and Change.org as their, mediums.
4. Yolanda People Finder.Recent storms in Philippines history gave birth to the People finder
database powered by Google. During typhoon Yolanda, the people finder was a vital tool for
people across the globe to track the situation of their relatives. This proved to be successful
and is now adapted by more organizations to help people track relatives during calamities.
Change.org
Change.org is dubbed as the “world’s platform for change” where anyone from the online
community can create a petition and ask others to sign in it. During the past times petitions are
only done through signing a paper, usually done by a group asking for signatures via
travel. Change.org gives access to more people by allowing the online community to affix their
digital signatures on petition.
Signing an Online Petition
1. VisitChange.org
2. Change.org works this way. If this is your first time to use Change.org, click Sign up or log
in with Facebook. Otherwise, just input your log in details.
3. You can then start your own petition, but for now click on any petition you want under
tending petitions.
4. Read the petitions description to see if this petition matters to you. If it is, sign the petition by
filling up the information on the right side of the screen.
5. Share the petition on Facebook to promote it.
Alternatively, you can check out petitions of your friends on Facebook, and then click on
those petitions to read about it and sign it.

Disadvantages of ICT
Cybercrimes are illegal acts done through the use of the internet. People all over the world use
the Internet to commit a host of crimes, some of which the public doesn’t even know are capable
of being done electronically.

1. Phishing and Spoofing

Spoofing attack is when a malicious party impersonates another device or user on a network in
order to launch attacks against network hosts, steal data, spread malware or bypass access
controls. There are several different types of spoofing attacks that malicious parties can use to
accomplish this.
Phishing is the attempt to acquire sensitive information such as usernames, passwords, and
credit card details (and sometimes, indirectly, money), often for malicious reasons, by
masquerading as a trustworthy entity in an electronic communication.
2. Blackmail/Extortion
Extortion (also called blackmail, shakedown, out wresting, and exaction) is a criminal offence
of unlawfully obtaining money, property, or services from a person, entity, or institution, through
coercion. Refraining from doing harm is sometimes euphemistically called protection. Using the
Internet to threaten to cause damage with the intent to extort from any person any money or other
thing of value.
3. Accessing Stored Communications
Accessing Stored Communications or hacking; Intentionally accessing, without authorization,
a facility through which an electronic communication service is provided. The act of obtaining
unauthorized access to data from computer network. This is typically done to commercial and
government sites to threaten its owner. In late 2015, a group of Anonymous Philippines hacked
the Twitter account of actress Maine Mendoza, who plays the famous character Yaya Dub of the
popular AlDub tandem and posted links and messages on the account
4. Sports Betting
Sports Beating is engaging in the business of betting or wagering on any sporting event or
contest over the Internet. In some countries, gambling (including sports betting) is illegal even if
you are doing it over the Internet.
5. Non-Delivery of Merchandise
Devising any scheme to defraud, or for obtaining money or property by means of false or
fraudulent pretenses, or promises, and using the Internet for the purpose of executing the
scheme. The non-delivery scam occurs when the scammer places an item up for sale when there
is actually no item at all. The item is subsequently never delivered to the buyer after they
purchase the item.
6. Electronic/ Cyber Harassment
Cyber harassment refers to online harassment. Cyber harassment or bullying is the use of
email, instant messaging, and derogatory websites to bully or otherwise harass an individual or
group through personal attacks. Cyber harassment can be in the form of flames, comments made
in chat rooms, sending of offensive or cruel e-mail, or even harassing others by posting on blogs
or social networking sites. Cyber harassment is often difficult to track as the person responsible
for the acts of cyber harassment remains anonymous while threatening others online. This
usually applies to school-age children.
7. Child Pornography
Using the Internet to transmit child pornography. Child pornography is distributed nowadays
mainly through the Internet. Child pornography are produced not only on a professional scale by
commercial providers, but also privately using victims from the producer’s own environment,
from the exploitation of children by clients of child prostitutes. Child pornography is sold over
commercial websites and also exchanged in closed groups or via peer-to-peer networks. Criminal
groups also use the Internet to make big money selling child pornography.
8. Prostitution
Persuading, inducing, enticing, or coercing any individual to travel in interstate commerce to
engage in prostitution.The internet has become one of the preferred methods of communication
for prostitution, as clients and prostitutes are less vulnerable to arrest or assault and for its
convenience
9. Drug Trafficking
Delivering, distributing, or dispensing a controlled substance by means of the Internet. Darknet
markets are used to buy and sell recreational drugs online. Some drug traffickers use
encrypted messaging tools to communicate with drug mules. The dark web site Silk Road was a
major online marketplace for drugs before it was shut down by law enforcement (then reopened
under new management, and then shut down by law enforcement again)
10. Criminal Copyright Infringement
Criminal Copyright Infringement, the act of piracy mainly for financial gain. In late 2014, the
number one pirate website, The PirateBay, was raided for the second time due to years of
pirating movies, music, games, books, and other software. These kinds of websites earn money
through advertsing.

LESSON 11: ICT Project Publication and

Statistics
Monitoring Site Statistics on Different Platforms

1. WordPress
Once you log in to your WordPress account, you are on the Reader tab by default. Simply
click on My Sites and from there you will see the statistics for your blog.
2. Facebook
In your Facebook page, a summary of the statistics will appear on the right side of your cover
photo: Hovering your mouse pointer over “Post Reach” will give you more insights on which
recent post reached the most people: Clicking on the Insights tab will give more in-depth
statistics:
1. Overview– contains the summary of statistics about your page
Definition of terms on your Facebook statistics:

Reach: Organic – your posts seen through the page’s wall, shares by users, and the news
feed
Reach: Paid – your posts seen through paid ads
Post Clicks – number of clicks done to your posts
Likes, Comments, and Shares – actual interaction done by your audience either through
liking the post, commenting on it, or sharing it on their walls.
1. Likes– contains the statistics about the trend of page likes
2. Reach– contains information about the number of people who was reached by your
post
3. Visits– contains data of the number of times your page tabs (like the Timeline) are
visited
4. Post– contains data showing when (day and time) you site visitors visit your site
5. People– contains statistics about your audience’s demographics (age, location,
gender, language, and country). It is also includes demographics about the people you
have reached and engaged with.
Demographics refers to the statistics characterizing human population usually divided by
age, gender, income, location, and language.