DIGITAL

TECHNOLOGY AND
SOCIAL CHANGE -
INTRODUCTION TO
THE DIGITAL AGE
1
2

Digital Age
▸ is a period when the computer and internet were
introduced.
▸ It is caused by rapid shift from traditional industry to
computerization all the way to artificial intelligence
which brought by Industrial Revolution.
▸ these technologies enabled people to communicate
information easily and rapidly.
▸ Digital Technology became prevalent and widely used
around the world.
3
ICT and its role in Social
Change
▸ has the power to transform society
▸ is defined as a group of interrelated technologies
(electronic devices) for accessing, processing, and
disseminating information
▸ It is a system of electronic network activated through a
complex hardware and software systems linked by a vast
array of technical protocols.
4
ICT and its role in Social
Change
▸ The term ICTs has been used to embrace technological
innovation and merging in information and
communication transforming our world into information
or knowledge societies.
▸ The development of a society mostly depends on the
access to information
5
ICT and its role in Social
Change
▸ Despite ICT’s massive potential, the current global
information outburst has surprisingly little impact on
development activities and access to practical
information for rural communities, local people, and
forefront development workers in developing countries.
6
ICT and its role in Social
Change
▸ The emergence of Internet, World Wide Web, mobile cell
phones, digital television, and several other new
electronic devices pertaining ICT are opening a fresh
passageways for transforming the way we live, work,
learn, communicate and also provides a strategic
opportunities of diverse and significant social and
economic benefits to people across the globe.
7

Theories in Technology
1. Technological Determinism
▹ It is the theory which strongly believe that technology shapes
the culture, values, social structures of a society
▹ The main reason why society progresses is because of the kind
technology the society has Technological innovation is the
cause of the social progress.
▹ The technology has the control over the society --- over human
actions, culture and values.
▹ In other words the society is changing because of technology.
8

Theories in Technology
2. Social Constructivism
▹ is the opposite of the Technological Determinism.
▹ believes that humans play a main role in shaping technology
rather than technology shaping society
▹ It believes that technology does not determine human action,
but rather, human action shapes the technology
▹ Our curiosity, the hunger to expand, and the need to do things
efficiently drive us to create these technologies.
9

Theories in Technology
3. Technological Change
▹ The various changes in technology leads to an increase in the
productivity of labor, capital and other production factors.
▹ The technology is the most powerful means of wresting power
from nature in all possible ways.
▹ Technological changes devise new goods and techniques of
production.
▹ The development of new technical knowledge can be defined
as the growth of the new technique that can produce goods
and services at lesser cost of production.
IT CULTURE AND THE
SOCIETY

1
2

Internet of Things
▸ The "Internet of things" (IoT) is becoming an increasingly
growing topic of conversation both in the workplace and
outside of it.
▸ It's a concept that not only has the potential to impact
how we live but also how we work.
▸ Just about anything with network connectivity belongs
to the internet of things, from security cameras and
speakers to smart watches and denim jackets
3

Internet of Things
▸ In the “smart home,” these internetenabled gadgets
liberate us from our chores, give us back some of our
time, and add a dash of novelty to ordinary experiences
▸ But the internet of things is about more than just using
your voice to preheat the oven or using your phone to
turn off the lights
4

Internet of Things
▸ The real promise of the internet of things is making our
physical surroundings accessible to our digital
computers, putting sensors on everything in the world
and translating it into a digital format.
▸ the growing internet of things either represents the
promise of technology—the thing that will reinvent
modern life as we know it—or that which will be our
technological undoing.
5

How IoT works

▸ An IoT ecosystem consists of web-enabled smart
devices that use embedded systems, such as processors,
sensors and communication hardware, to collect, send
and act on data they acquire from their environments.
▸ IoT devices share the sensor data they collect by
connecting to an IoT gateway or other edge device
where data is either sent to the cloud to be analyzed or
analyzed locally
6

Why IoT important

▸ The internet of things helps people live and work
smarter, as well as gain complete control over their lives.
▸ IoT provides businesses with a real-time look into how
their systems really work, delivering insights into
everything from the performance of machines to supply
chain and logistics operations.
▸ IoT enables companies to automate processes and
reduce labor costs
7

Why IoT important

▸ It also cuts down on waste and improves service
delivery, making it less expensive to manufacture and
deliver goods, as well as offering transparency into
customer transactions.
▸ IoT is one of the most important technologies of
everyday life, and it will continue to pick up steam as
more businesses realize the potential of connected
devices to keep them competitive.
8

IoT benefits to organizations

▸ monitor their overall business processes;
▸ improve the customer experience;
▸ save time and money;
▸ enhance employee productivity;
▸ integrate and adapt business models;
▸ make better business decisions; and
▸ generate more revenue
9

Pros of IoT
▸ ability to access information from anywhere at any time
on any device;
▸ improved communication between connected electronic
devices;
▸ transferring data packets over a connected network
saving time and money; and
▸ automating tasks helping to improve the quality of a
business's services and reducing the need for human
intervention.
10

Cons of IoT
▸ As the number of connected devices increases and more
information is shared between devices, the potential that a hacker
could steal confidential information also increases.
▸ Enterprises may eventually have to deal with massive numbers --
maybe even millions -- of IoT devices, and collecting and managing
the data from all those devices will be challenging.
▸ If there's a bug in the system, it's likely that every connected device
will become corrupted.
▸ Since there's no international standard of compatibility for IoT, it's
difficult for devices from different manufacturers to communicate
with each other.
11
IoT Security and Privacy
Issues
▸ The internet of things brings all the benefits of the internet to items
like lightbulbs and thermostats, but it brings all the problems of the
internet, too.
▸ The threat to internet-connected devices comes not just because
they’re connected to the internet, but because device
manufacturers have not always designed their products with
security as a priority
▸ Then there’s the question of privacy. If cameras and microphones
are studded around your home, they are definitely watching and
listening to you.
12

The Future of the Internet of Things

▸ One day, the internet of things will become the internet of
everything
▸ This vision extends far beyond your clothes, and even your home
▸ If we’re going to get there—whether we like “there” or not—we’re
going to need faster internet.
CURRENT TRENDS

13
14

Current Trends in IT
▸ The latest technology methods and best practices of 2019 will
primarily stem from current trends in information technology
▸ Advancements in IT systems relate to what the industry is leaning
toward or disregarding now.
▸ Information technology is advancing so rapidly that new
developments are quickly replacing current projections.
15

Current Trends in IT
▸ Cloud Computing
▹ is a network of resources a company can access, and this
method of using a digital drive increases the efficiency of
organizations.
▹ Instead of local storage on computer hard drives, companies
will be freeing their space and conserving funds.
▹ Cloud storage and sharing is a popular trend many companies
have adopted and even implemented for employee interaction.
▹ Organizations will transfer their stored files across multiple
sources using virtualization
16

Current Trends in IT
▸ Mobile Computing and Applications
▹ Mobile phones, tablets, and other devices have taken both the
business world and the personal realm by storm
▹ Mobile usage and the number of applications generated have
both skyrocketed in recent years
▹ The fastest-growing companies have already established their
mobile websites, marketing, and apps for maximized security
and user-friendliness.
17

Current Trends in IT
▸ Big Data Analytics
▹ is a trend that allows businesses to analyze extensive sets of
information to achieve variety in increasing volumes and
growth of velocity
▹ has a high return on investment that boosts the productivity of
marketing campaigns, due to its ability to enable high-
functioning processing
▹ is a way companies can predict growth opportunities and
achieve future success
18

Current Trends in IT
▸ Automation
▹ Another current trend in the IT industry is automated
processes.
▹ Automated processes can collect information from vendors,
customers, and other documentation
▹ Automated processes that check invoices and other accounts-
payable aspects expedite customer interactions. Machine
processes can automate repetitive manual tasks, rather than
assigning them to employees.
Imaging and Design
for Social Impact
Noel S. Rafanan
 Learning Competencies:

The learners will be able to:

• Evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design.
• Use image manipulation techniques on existing images to change or enhance their
current state to communicate a message for a specific purpose.
• Create an original or derivative ICT content to effectively communicate a visual
message in an online environment to specific professional tracks.
 Topic Outline
• 1. Basic principles of graphics and layout
• 2. Principles of visual message design using infographics.
• 3. Online file formats for images and text
• 4. Principles and basic techniques of image manipulation.
• 5. Basic image manipulation using offline or open source software.
• 6. Combining text, graphics, and images.
• 7. Uploading, sharing, and image hosting platforms Imaging and Design For
the Online Environment
 Visual Storytelling

• The Hybrid Graphic Novel

• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
• http://graphicnovel-hybrid4.peugeot.com/start.html
 Formative Assessment

• 1. What is the story in the graphic novel?

• 2. Who is the main character in the story? How did you know?
• 3. What do you know about the main character? How did you know it?
Image
 What is an Image?

An Image is a representation of the

external form of a person or thing in art
What is an Image?

• Images may be 2-dimensional, such as

a photograph or screen display, or 3-
dimensional, such as a statue or
hologram. They may be captured by
optical devices – such as cameras,
mirrors, lenses, telescopes,
microscopes, etc. and natural objects
and phenomena, such as the human
eye or water.
Graphics and Layout
 Graphics

• Are visual images or designs on

some surface, such as a wall,
canvas, screen, paper, or stone to
inform, illustrate, or entertain
• Are visual representations of
data made on a computer and is
displayed on a computer screen or
monitor.
Example of graphics

• Photograph
Example of graphics

• Photograph
Example of graphics

• Line Art
Example of graphics

• Graphs
Example of graphics

• Typography
 Graphics

• The process of planning and arranging graphic element in a page or

template. A good layout should have a balanced make up and alignment
of elements.
• Layout is part of graphic design that deals in the arrangement of visual
elements on a page.
 Balance

• Balance means the equal distribution of weight.

• In layout, visual weight is determined by the darkness or lightness,
thickness of lines, and size.
• Balance is crucial to the success of design.
• There are two kinds of balance:
• Symmetrical Balance
• Asymmetrical Balance
 Symmetrical Balance

• The order of elements are evenly

allocated on both sides of pages.
• The visual weight is distributed evenly,
either vertically or horizontally.
• You can draw a line straight through
the middle of the design, and the visual
balance would be evenly distributed.
 Asymmetrical Balance

• The order of different objects of the

same weight on each side of the
page.
• There is an artistic and different
intensity on one side of the page.
• Color, Shape, size, texture & value
can be used on balancing elements.
 Which is which?
Symmetrical or Asymmetrical
• https://paulinavera1992.files.wordpress.com/2014/12/moc-zuckerman-on-composition-symmetry-13-3.jpg
• http://whsdesignandphoto.weebly.com/uploads/2/4/5/2/24522864/0015dc44ba0733174c6d42a2034f5675_orig .jpg
• https://cdn.idevie.com/wp-content/uploads/2015/03/29568_webdesign_02-1minus1-
agency-homepage- website-symmetry.jpg
• https://www.webdesignerdepot.com/cdn-origin/uploads/2011/07/151.jpg
 Proximity

• Ensemble related objects together and moved

them physically close to each other to create less
clutter and more organized layout.
• Organized information is more likely to read and
most probably remembered.
• Things to remember:
*The organization is clearer.
*The white space is not trapped within elements.
*There appears to be more room on the page.
• Common materials that uses proximity: brochure,
flyers and newsletter.
 Proximity

• a. When there are several elements, add white space. White space can also
mean empty space. more visually appealing
 Proximity

• b. Related items should be placed near to each other. more pleasing

 White Space

• White Space is the art of nothing .

• Also known as the negative space.
• It is the portion of a page left unmarked:
margins, gutters, and space between
columns, lines of type, graphics, figures,
or objects drawn or depicted.
• Two kinds of white space:
• Undefined white space
• Active white space
• https://theultralinx.com/.image/t_share/MTI5MDIzMzUyNDA3OTI3NDI3/shiftlogo-copy.jpg
• http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg
 Alignment

• The Principle of Alignment:

“Nothing should be placed on
the page arbitrarily. Every item
should have a visual connection
with something else on the
page.”
• Create Order
• Look Clean ALIGN MENT
Alignment
Alignment
 Repetition
• The process of repeating elements
throughout a design to give a
unified look.
• Repetition goes with consistency of
your design on font, font size,
patterns, colors.
• Repetition aids to organize the
information.
• Guides readers and helps to make
parts of the design become more
united.
• https://cdn.tutsplus.com/photo/uploads/legacy/418_patterns/4.jpg
• https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2011/07/odosketch-homepage.jpg
• https://254-online.com/wp-content/uploads/repetition-principle-of-design-blog-post-pic.jpg
 Repetition

• Infographics is an example that

applied repetition to the design. It
repeatedly used callouts with
identical font size of inside texts.
 Infographics

• Information graphics or infographics are used to represent information,

statistical data, or knowledge in a graphical manner usually done in a creative
way to attract the viewer’s attention.
• Five Principles to create an effective infographics:
• Be Unique
• Make It Simple
• Be Creative and Bold
• Less is More
• The Importance of Getting it Across
• https://amyturnerdesign1990.files.wordpress.com/2011/09/280092_14725
3505354118_14535294 5544174_303699_2469737_o.jpg
• http://4.bp.blogspot.com/-
h2Yr24B_bbE/T9ee7LU_sQI/AAAAAAAAAas/BHGzvh1sFVM/s1600/horror.png
Infographic Example
Infographic Example
Infographic Example
 Infographic Example

• Infographic Video – is a visual

representation of data and
knowledge in the form of an online
video.
 Color

• Determined by its hue (name of color),

intensity (purity of the hue), and value
(lightness or darkness of hue).
• Used for emphasis, or may elicit emotions
from viewers.
• Color Theory
• the study of how colors make people feel
and their effects on a design.
• COLOR VS HUE
• Pure spectrum of colors
referred to by the color names
• Tint lightens the color but
it doesn’t make it brighter.
• Tone reduce the
intensity of any color.
• Shade darkens the color, it
remains the same hue only a
darker version.
PALETTE
 Contrast
• Contrast is the divergence of opposing
elements (opposite colours on the colour
wheel, or value light / dark, or direction –
horizontal / vertical).
• Contrast allows us to emphasize or highlight
key elements in your design.
• Contrast can be applied through the
following:
• Color
• Size
• Shape
Contrast

made use of two colors, can be

hurting to eyes

made use of two contrasting

colors, pleasing to eyes
Contrast
 Contrast

https://maddisondesigns.com/wp-content/uploads/2009/03/5-basic-
principles-of-design.jpg
 Contrast

https://254-online.com/wp-content/uploads/repetition-principle-of-design-
blog-post-pic.jpg
 Contrast

http://www.webpages.uidaho.edu/ART370S15-
gray4661/Art%20370%20Web/Project%202/Web%20Files/images/contrast.png
Principles of visual message:

Visual information & media

Visual information

EXAMPLES OF VISUAL
MEDIA
• Photography
• Video
• Screenshots
• Infographics
• Data Visualization (charts
and graphs)
• Comic Strips/Cartoons
• Memes
• Visual Note-Taking Visual
information
Purpose of visual information

• Gain Attention
• Create Meaning
• Facilitate Retention
• Source: http://www.comoxvalleyrd.ca/EN/meta/whats-new/news-
archives/2015/practice-how-to-drop-cover-and- hold-on-during-shakeout-bc-
day.html
• The Power Of Visual Content BY DemandGen Report (2014)
• Source: https://www.demandgenreport.com/industry-topics/rich-media/2906-the-power-
of-visual-content-infographic
• Source: https://postcron .com/en/blog/vi sual-content- strategies-for-
social-networks/
• THE POWER OF VISUAL CONTENT MARKETING
• Source: http://springboardpr.ie/the-power-of-visual-content-marketing/
Online file formats for Images and Text
 File Format

• A standard process that data is encoded for storage in a computer file.

• Defines how bits are used to encode information in a digital storage device.
• Most information comes from different format
File Type File Format

Text .docx, .pdf

Image & Graphics Jpeg, .gif, .png

Audio .wav, .mp3

Video ,mp4, .mpeg, .avi

 File Compression

• Lossy: This compression type removes some information from the image
and lowers the overall quality in order to reduce the file size.
• Lossless: This compression type does not remove any information from
the image, but it usually cannot reduce the file size as much as lossy
compression.
 JPEG

• JPEG stands for Joint Photographic

Expert Group
• Most common used format by Digital
Camera and other Capturing Device.
• Most Common Format when saving
pictures on the internet.
• SIZE over QUALITY
• Loss of data due to file compression
(Lossy Compression).
 gif

• GIF stands for Graphic Interchange

Format.
• Not recommended for large images
with many colors.
• File size are very small and load very
fast.
• Good choice for simple animation.
 png

• PNG stands for Portable Network

Graphics.
• Supports 24-bit images and generate
background transparency without
jagged edges.
• Best format for logos that involves
transparency and fading.
 pdf
• PDF stands for Portable Document File
• It is optimized in smaller file size
without losing the file quality.
• Can be viewed using its Reader or
through Web Browsers.
 doc
• DOC is short for Document File
• File format created by Microsoft and
commonly used by Microsoft Word.
• Can include charts, illustration,
formatted text, tables and etc.
Principles of basic techniques of
Image Manipulation
 Cropping

• 1. Cropping. Cutting parts away

to remove distracting or
irrelevant elements.
 Color Balance
• 2. Color Balance. The ambience and the tone of light of the picture (ex.
Warm or cool light)
 Brightness and Contrast

• 3. Brightness and Contrast. One

of the most basic techniques in
image editing, making the image
darker or lighter.
Filters

• 4. Filters. Making the image look

sketched, grainy, classic black and
white or even let it have neon colors.
This gives your image a twist from its
original look.
Cloning

• 5. Cloning. Copying or
duplicating a part of an image.
 Changing the background

• 6. Changing the Background.

Adding background to make your
image stand out.
 Removing color

• 7. Removing the Color.

Removing certain colors in your
image or desaturating the color of
the image.
 Combining text, graphics and color

• 8. Combining Text, Graphics and

Image. Adding multiple elements
in your layout.
Basic Image Manipulation
It started with
one picture
Hosting Platforms
 imgur

• Free image hosting sites and doesn’t need to create an account.

• Media sharing capabilities through a unique link.
• Doesn’t affect the quality when uploading an image.
• Popular for Memes
 Google Photos
• Developed by Google.
• One of the most used image hosting sites.
• Automatically backup and sync of photo
from your gallery through your google
account.
• Easy to organize and edit photos based on
tags and category
• Unlimited free storage for android
smartphone.
 Flickr

• One of the oldest image hosting sites.

• Also offers editing features.
• Album creation is available with a
maximum storage of 1TB.
 Photobucket

• an image and video hosting website, web

services suite, and online community
dedicated to preserving and sharing the
entire photo and video lifecycle.
 Imageshack

• Offers unlimited storage space as ling as it

is less than 25mb.
• Allows you to create albums, make tags
and set your own privacy setting
 Instagram

• An online mobile photo and video sharing,

and social networking service created by
Kevin Systrom and Mike Krieger, and
launched in October 2010 as a free mobile
app. It allows its users to take pictures and
videos, and share them on social
networking platforms such as Facebook,
Twitter, Tumblr and Flickr.