IMAGING AND DESIGN may appear different in size, texture,

shape, or color to attract the viewer’s

FOR ONLINE ENVIRONMENT
attention.
Layout - organization of preset items on
Movement - visual elements guide the
a page. Such as an image, text, and
viewer’s eyes around the screen.
style.
- It determines the overall
Pattern - these are the repeating visual
appearance and interactions of
elements on an image or layout to
the graphics elements.
create unity in the layout or image.
Graphic Design - plan of creating an
idea
Proportion - visual elements create a
Layout - process of organizing and
sense of unity where they relate well
arranging these elements
with one another.
- In graphic design, page layout is
Variety - this uses several design
the arrangement of visual
elements to draw a viewer’s attention.
elements on a page. It generally
involves organizational principles
Infographics - used to represent
of composition to achieve specific
information, statistical data, or
communication objectives
knowledge in a graphical manner
usually done in a creative way to attract
GRAPHICS - is a picture or visual
the viewer’s attention.
representation of a thing.
- Computer graphics are
essentially images shown on a
PRINCIPLES OF VISUAL
computer screen. DESIGN USING INFOGRAPHICS
- In general terms, the word
“graphic” refers to any visual Line - refers to an outline that
representation of data and sometimes creates a shape. Its texture
includes a variety of forms can be thick or thin, may be vertical
including drawings, photographs, horizontal, diagonal, implied, actual or
line art, graphs, diagrams, contour lines.
numbers.
Shapes - refers to an object that stands
BASIC PRINCIPLES OF GRAPHICS & out. Shape may also be geometrical or
LAYOUT organic.

Balance - the visual weights of objects, Value - refers to the lightness or

texture, colors, and space is evenly darkness in a design. It refers to the
distributed on the screen. changes between black and white and
all the tones in between.
Emphasis - an area in the design that
Form - refers to the volume or thickness PNG - Portable Network Graphic. Is an
of an object. The illusion of a 3D - object image type that's commonly used in web
created through the manipulation of design to provide a transparent
lightning and shading. background and/ or a semi transparent
image.
Texture - the way a platform or a - Are often used to design logos as
surface is supposed to feel. Visual the image can be easily placed
texture is the illusion of the surface's over a background of a picture,
peaks and valleys resulting in a feeling block of color or pattern.
of smoothness or roughness in an
object. GIF - Graphics Interchange Format. Is a
bitmap image format that was
Color - is the element of art that developed by a team at the online
involves light. It is produced when light services provider Compuserve led by
waves strike an object and are reflected American computer scientist Steve
into our eyes. It consists of three Wilhite on June 15, 1987.
properties: hue, intensity, and value. ‘
TEXT FORMAT
Contrast - is a principle of art that refers
to the arrangement of opposite elements DOC - is a filename extension for word
(light vs. dark colors, rough vs. smooth processing documents, most commonly in
textures, large vs. small shapes, etc.) the proprietary Microsoft Word Binary File
Format.
ONLINE FORMAT FOR TEXT
PDF - portable document format. Is used
AND IMAGES when you need to save files that cannot be
modified but still need to be easily shared or
File format - The structure of a file that printed.
instructs a software how to display its
contents is referred to as its file format. TXT - is a file extension for text files, used
Programs that support a file format can by a variety of text editors. Text is a human
readable sequence of characters and the
provide an overview of the file but may
words they form that can be encoded into
not be able to display all of its
computer readable formats.
characteristics.
IMAGE MANIPULATION - is the process of
IMAGE FORMAT making modifications to a digital image in
order to turn it into the desired image.
JPEG - Joint Photographic Experts Image processing is used to make the
Group. It's a standard image format for modifications feasible. Image manipulation
containing lossy and compressed image is used to make fashion magazines and
data. Despite the huge reduction in file album covers out of pictures.
size.
BASIC TECHNIQUES OF IMAGE more information.
MANIPULATION Website - a set of related web pages
located under a single domain name,
1. Cropping - enhance focus and typically produced by a single person or
composition organization.
2. Blurring - enhance background
images Webpage - a web page or webpage is a
3. Saturation - enhance or reduce color document, commonly written in HTML,
intensity that is viewed in an internet browser.
4. Contrast - enhance highlights and
shadows Web Server - a web server is a
5. Brightness - enhance overall lighting computer that runs websites. It's a
6. Filters - enhance and correct photos computer program that distributes web
7. Arrangement - enhance your layout pages as they are requisitioned.
with grids
8. Frames - enhance image shape and Domain name system - serve as
style memorizable names for websites and
9. Layering - enhance images with other services on the internet.
overlays
10. Text - enhance images with DNS Extension Example:
typography on top .com - commercial
.gov - government
Online Platform for ICT .org - organization
.edu - education
Content Development
.mil - military
.net - network
-In the earlier years, or sometime in the
1990s, creating a web page or a website THE NATURE AND PURPOSES OF
was a skill that required a mind of ONLINE PLATFORMS AND
computer programmer, working on APPLICATION
standard lines of computer code that
need to be memorized to produce a -Online platform is a
basically flat but colorful document. specially developed
platform using Internet technology.
What is the use of a website? Online platforms have
- provide an easier way to handle revolutionized access to any
customer service. Offering information.
answers to regularly asked
questions in a FAQ (Frequently SOCIAL MEDIA TYPES
Asked Questions) section, you
can reduce customer service INSTAGRAM - Is an online mobile
costs and save yourself time and media- sharing site that allows users to
money, as well as providing much share pictures and videos either
publicly or privately on the app. DROPBOX - Is a cloud storage service
provided by an American firm that offers
TWITTER - Is an online news and social a variety of advantages, including the
networking service where users post ability to save files online and sync them
and interact with messages,“tweets,” to your devices as well as the ability to
restricted to 280 characters. share files and folders with others,
whether they be videos, photographs, or
FACEBOOK - Is the biggest and the anything else.
most popular social platform on the
Internet. GOOGLE DRIVE- Is a cloud-based file
syncing and storage service created and
5 things that you should know about released by google in 2012.
Facebook when you do content
development BASIC WEB DESIGN - Web design
1. Commercial Center refers to the design of websites that are
2. Bunches displayed on the internet. It usually
3. Occasions refers to the user experience aspects of
4. Pages website development rather than
5. Nearness Innovation software development.

PREZI - Is a manufacturer of software BASIC WEB DESIGN TIPS

for video and visual communication in
Hungary. 2009 saw its founding. Purpose - each page of your website
needs to have a clear purpose, and to
CANVA - Is an Australian platform for fulfill a specific need for your website
graphic design that may be used to users in the most effective way possible.
produce social media graphics,
documents, posters, and other visual Communication - people on the web
content. tend to want information quickly, so it is
important to communicate clearly, and
SLIDESHARE- Is a hosting company in make your information easy to read and
the United States that Scribd now owns. digest.
It was established in 2006, and as
of this writing, it has more than 18 Typeface - the ideal font for reading
million uploads in 40 different easily inline is 16px and stick to a
categories. maximum 3 typefaces in a maximum of
3 points sizes to keep your design
ONE DRIVE - OneDrive for home is streamlined.
online personal storage that you get
when you set up a Microsoft account to Colors - a well though out color palette
use services such as Outlook.com or can go a long way to enhance the user's
Xbox. experience.
Visuals - pictures/videos can speak a - Magento
thousand words, choosing the right - Prestashop
image can help you with brand
positioning and connecting with your WHAT IS INTERACTIVE MULTIMEDIA?
- A number of media types, including
target audience.
text, computer graphics, audio and
video files, as well as animation, can
Grid layout - grid based layouts be controlled, combined, and
contents arranges, section, boxes which otherwise modified by the user in
leads to a better looking website design. interactive multimedia.
MULTIMEDIA CONTENTS
Loading time - everybody hates a web Videos - Through video hosting sites, you
page that takes ages to load so here are can take a video and show it to the entire
some tips to effective page load. world (e.g., YouTube, Netflix, HBO, Disney
- Optimized images sizes Plus).
- Combine codes into CSS or
Sound, Music, or Audio - If videos are too
JavaScriptfile
much for you, you can always record
sounds. You can now share your sound
Mobile friendly - is essentially when bites to the entire world (e.g., Soundcloud,
your regular website shrinks down to be Apple Music, Spotify).
small enough to display on a mobile
device. Online Games - Game developers now
create what is called “browser-based
CONTENT MANAGEMENT SYSTEM games.”
(CMS)
- Is a computer application Online Tests - Online survey forms and
(sometimes online or browser tests that automatically display the results
when finished (Online IQ and Personality
based) that allows you to publish,
Tests).
edit and manipulate, organize
and delete web content. Courseware - Online courses that simulate
WYSIWYG - what you see is what you get the classroom online (e.g., E-learning
is a system where editing software allows Courses using a Learning Management
content to be edited in a form that System)
resembles its appearance when printed or
displayed as a finished product such as Podcasts - An episodic series of audio or
printed document, web page, or slide text files streamed online (e.g., Stuff You
presentation. Should Know, TED Talks, The Starters, Ear
Biscuits, Typical Pinoy Crap, Yellow Space,
WYSIWYG PLATFORMS Barangay LS 97.1 Forever! ).
- adobe dreamweaver
- Word press Build your Website Using HTML and CSS
- WIX
- Shopify What is HTML?
- Joomla - The standard markup for documents
- Drupal intended to be seen in a web browser is
called HTML, or HyperText Markup WHAT IS WEB PORTAL?
Language. Cascading Style Sheets and - A web portal is a website that
scripting languages like JavaScript are two contains information from different
examples of technology that can help to sources and places them in one
build your webpage. location in a uniform way.

HTML stands for Hyper Text Markup THERE ARE PLENTY OF ONLINE
Language COLLABORATIVE TOOLS:
HTML is the standard markup language for
creating Web pages 1. You can use Facebook groups to create a
HTML describes the structure of a Web group page that will allow people in your
page group to communicate your ideas.
HTML consists of a series of elements
HTML elements tell the browser how to 2. WordPress also allows you to have
display the content multiple contributors for a single blog.
HTML elements label pieces of content
such as "this is a heading", "this is a 3. Google Drive and Microsoft Office Online
paragraph", "this is a link", etc. allow multiple people to work on different
office files and even have their own group’s
What is CSS? cloud storage.
- CSS is used to define styles for your web
pages, including the design, layout, and 4. Microsoft’s Yammer offers companies to
variations in display for different devices have their own social network that allows
and screen sizes. sharing and managing content.

CSS stands for Cascading Style Sheets 5. Sites like Trello offer an online to-do
CSS describes how HTML elements are to checklist for your entire team
be displayed on the screen, paper, or in
other media THE ROLE OF ICT IN RECENT HISTORY
CSS saves a lot of work. It can control the - Throughout recent history, the
layout of multiple web pages all at once Philippines have been one of a few
External stylesheets are stored in CSS files nations that demonstrate unity for a
call to action or social change.
What is Google Sites?
- A structured wiki and web page creation
tool, Google Sites is a component of
Google's free, online-based Google Docs EDSA 1 (People Power Revolution)
Editors suite. - there was a revolution of the people’s
power. Cardinal Sin urged the Filipino
WHAT IS ONLINE COLLABORATIVE people to aid in overthrowing the
TOOL? government of the time’s president. From
- A collaboration tool makes it easier February 22 - 25, 1986, a significant protest
for individuals to work together. A involving two million Filipinos from various
collaboration tool's purpose is to backgrounds was held along the EDSA.
assist a group of two or more people
in achieving a common goal or
objective.
EDSA 2 (People Power Revolution) SPORTSBETTING - the act or wagering
- the EDSA Revolution o f 2001 took place on any sports event over the internet.
between January 17 - 21,2001. After
President Joseph ESstrada’s 11 prosecutors
left the impeachment trial, it gained NON-DELIVERY OF MERCH - the act
momentum. of devising a scheme wherein a culprit
posts an item or service for sale over
MILLION PEOPLE MARCH the internet and once the transactions
- this protest series primarily occurred in have been done, does not really give
Luneta Park from August 22 - 26, 2013. the item or service.
Additionally, there were a number of
protests that took place in and around
important Philippine cities and other ELECTRONIC HARASSMENT - the act
locations. of anonymously using the internet to
harass, abuse, threaten, or annoy other
YOLANDA PEOPLE FINDER (NOV 3 - people.
11,2013)
- the people finder database powered by
Google, was created in response to recent CHILD PORNO - the act of using the
storms in philippine history. internet to show child pornography. This
act is highly punished by law.
DISADVANTAGE OF ICT IN SELF AND
SOCIETY
PROSTITUTION - persuading, inducing,
CYBERCRIMES - any criminal behavior inviting, or forcing any individual to
involving a computer, a networked travel in interstate trade to engage in
device, or a network is considered a prostitution.
cybercrime.
DRUG TRAFFICKING - the act of
PHISHING/ SPOOFING - is the act of selling illegal substances using the
sending multiple emails to multiple users internet.
in hopes of having a number of them
clicking on the links or malwares PIRACY - the act of piracy mainly for
attached to the email. financial gain. In late 2014, the number
BLACKMAIL EXTORTION - is a one pirate website, The Pirate Bay, was
criminal offense of unlawfully obtaining raided for the second time due to years
money, property or services from a of pirating movies, music, games,
person, entity, or institution. books, and other software.

HACKING - the act of obtaining

unauthorized access to data from a
computer network.