Empowerment Technology 2nd Quarter Periodical Exam Reviewer

★ Imaging and Design for Online Environment

➔ The birth of computer graphics started in the field of medicine as a

tool for visualization.

● Superpaint
- the grandfather of all graphics software
- developed by Richard Shoup in the year 1972

★ Elements of Design

1. Line
- continuous points joined together
- used to create visible shapes, enclosed areas or
demarcations
- mostly used to convey moods in user interface design

2. Mark or Point
- the smallest and simplest of all design elements that can
form patterns and delineated space

3. Shapes
- objects within enclosures to create interest or attraction in
user interfaces

4. Color
- it has three distinct properties:

● Hue
- the color appearance parameter

● Value
- the relative lightness or darkness of any color
and intensity or the purity of each color

● Intensity

Z.E. BAJO 11-STEM HIPPARCHUS

 - degree of the purity of each color

5. Texture
- the surface roughness or smoothness of a design element

★ Principles of Graphics and Design

1. Balance
- the placement of elements of equal weight on the page

Types of Balance:
● Symmetrical
● Asymmetrical
● Radial

2. Movement
- the flow of elements on the page

3. Unity
- the sense of oneness of the elements that creates balance and
harmony

4. Repetition
- the consistent and balanced repetition of a design or element

5. Proximity
- the organization and relationship of elements included in the
design

6. Contrast
- the combination of opposing characteristics of an element like
color, size, thickness, among others
- it allows emphasis on key elements

7. Whitespace
- the negative space of large margins that allow your design to
breathe within the elements

Z.E. BAJO 11-STEM HIPPARCHUS

★ Infographics
- also known as data visualization
- a visual image such as a chart or diagram that is used to explain
information or data
- a collection of imagery

★ Image File Formats

➔ Graphic Design is one of the main contributors to the cultural

identity of a society since it involves disciplines related to
communications, products, and even architecture and
engineering.

● File Format
- the layout of a file in terms of how the data within the file is
organized

1. Joint Photographic Experts (JPEG)

- the most popular image format used on the web.
- it does not support transparency and animation hence called a
“lossy” file type where much of the information regarding the
image is lost.
- used mostly by photographers, artists, graphic designers, etc.

2. Graphics Interchange Format (GIF)

- supports transparency and animation unlike the typical JPEG
format
- best used for diagrams, cartoons, and logos

3. Bitmap (BMP)
- is the image file used in the Microsoft Windows operating system
- also called raster image
- an uncompressed file and is made up of millions of dots called
‘pixels’
- not usually used on the web since it takes up a big space in the
memory and does not scale well

Z.E. BAJO 11-STEM HIPPARCHUS

 ● Raster
- represented in the form of a rectangular grid of pixels;
made up of orderly arranged colored pixels to display any
image

● Vector
- defined and created on a plane by connecting lines and
curves
- composed of paths using a mathematical formula that is a
vector that directs the route and shape.

4. Tagged Image File Format (TIFF)

- is a file format created originally by Aldus Corporation for desktop
publishing.
- a good format for graphic storage, processing, and printing
- the superior raster image format
- considered as a high-quality image format
- produces a very large file size and takes huge disk consumption

5. Portable Network Graphics (PNG)

- supports transparency but not animation.
- supports full-color images and used for photographic images
- does best with line art, text, and logo

★ Principles and Basic Techniques of Image Manipulation

1. Cropping
- a process of removing unwanted parts of the image
focusing only on the subject
- when cropping one must always follow the Rule of Thirds to
organize the image composition

2. Color Balance
- this command will allow you to make changes in the
mixture of colors in an image

3. Adjusting the Brightness and Contrast

- this command allows you to adjust the image tone

Z.E. BAJO 11-STEM HIPPARCHUS

 4. Compression and Resizing
- this command allows the image to be compressed into that
standard resolution of 72 dots per inch

5. Color Blending
- allows you to use different special effects buttons available
in the different image editing software

6. Combining Multiple Images

- compositions must be planned and conceptualized first so
that you will be able to render the best image and message
possible

★ Online Graphics Software

➔ Adobe Photoshop
- the standard of photo editing since it started in the 1990s

1. Picasa
- google’s free desktop image editing program
- can be downloaded and help you manage your photos and
upload them to an online album

2. Fotor
- a multiplatform photo editing website
- offers a wide range of effects and tools for editing images

3. Pixlr
- it is also a multiplatform image editing program
- you can choose between the editor for editing images or
creating an original image right through the browser

★ Image Hosting Sites

1. Imgur
- you can upload and edit images from your computer

Z.E. BAJO 11-STEM HIPPARCHUS

 2. Flickr
- an image social networking site

3. Photobucket
- you can upload and share your images over the internet
through your account
- has similar features with Flickr

4. Slickpic
- an online image-hosting service
- allows you to upload and store an unlimited number of
photos online

5. Zenfolio
- an online image-hosting site that lets you create an online
image website for your images

STOPLIGHT

1. This is achieved when all parts of a composition appear to have equal

weight and is stable.
- BALANCE

2. It is obtained by repeating colors and shapes—all parts of a design.

- UNITY

3. It is the center of interest.

- FOCAL POINT

4. It is when lines, colors, or shapes are repeated over and over in a

planned way.
- PATTERN

5. For image composition to be effective, it must have elements in equal

weight across the frame.
- TRUE

6. You can use any color combination when composing your design.

Z.E. BAJO 11-STEM HIPPARCHUS

 - FALSE

7. Reliable sources must be included in your infographic.

- TRUE

8. JPEG is considered to produce a high-quality image and does not

remove any information from the image.
- TRUE

9. It is best to use GIF format for cartoonish images.

- TRUE

10. When cropping an image, one must follow the rule of thirds.
- TRUE

11. Accurate compression of an image will help you save memory space.
- TRUE

12. Picasa, Pixlr, and Photobucket are some examples of image hosting
sites.
- TRUE

13. One must follow the rules that govern a website when uploading an
image.
- FALSE

14. People who work on computer graphics and image manipulation are
called multimedia artists.
- TRUE

★ Nature and Purposes of Online Platforms

● Platform
- a group of technologies that is used as a base upon which
other applications or processes are developed.

➔ Tim Berners-Lee

Z.E. BAJO 11-STEM HIPPARCHUS

 - created the first website on the World Wide Web

● API
- application programming interfaces

1. Level 1 - Access API

- most common type of internet platform
- apps on this level run elsewhere and call into the platform via
web services API
- processing of building and running the application is solely done
by a developer who both possesses both technical expertise and
financial resources.

2. Level 2 - Plug-in API

- has been used in end-user applications to let developers build
new functions that can be injected or plugged into the core
system and its user interface.

3. Level 3 - Runtime Environment

- the third-party application code runs inside the platform–
developer code is uploaded and runs online, inside the core
system.
- most favorable

★ Web Design Principles

- the process of creatively designing and constructing a website
and updating it regularly to incorporate changes.

➔ According to Cleverism, “Web design is a concept of planning, creating,

and maintaining website.”

1. Visual Hierarchy
- the order in which human eye perceives what it sees
- can be shown through the use of varying sizes and amount of
content
- elements should be ranked according to its importance and your
objectives

Z.E. BAJO 11-STEM HIPPARCHUS

2. Proportion
- the golden ratio (1.618)
- to make a design aesthetically pleasing

3. Hick’s Law
- can be considered as a guideline for decision making in a
viewer’s perspective
- states that “with every additional choice, the time required to
make a decision increases”

4. Fitt’s Law
- “the time needed to move to a target is dependent upon the size
of the target as well as the distance to the target”

5. Accessibility
- when a visitor enters the website, he or she must be able to
access each but of information in the easiest manner
- naiintindihan agad yung nilalaman pag inopen yung website

6. Visible Language
- design communicates with the users clearly and in an engaging
manner

7. White Space and Simple Design

➔ White Space
- helps divide the web page into several distinct parts or
areas

● Grid-based layout
- content is divided into columns,
boxes, and different sections

● F-pattern design
- complements the natural reading
behavior of the visitors like the
“F-pattern”

Z.E. BAJO 11-STEM HIPPARCHUS

8. Regular Testing
- TETO (Test Early, Test Often)
- conducting usability tests every now and then

★ Web Design Elements

1. Links

● Normal
- default state of a link
- not being hovered over or clicked or pointed to a URL
that the user has already visited; yung pinipindot na link na
di mo pa nakikita or nabisitahan
- are one of the most designers prepare for

● Visited
- not being hovered over or clicked but whose target has
been visited by the user; nabisitahan mo na

● Active
- currently being clicked by the user
- most developers will replicate the hover state here if a style
is not provided to them

● Hover
- when the user moves the mouser over it
- are one of the most designers prepare for

2. Forms

● Form label
- collects personal data
- properly informs users of the exact purpose of the form

● Input fields and labels

- yung planning ng mga i-input mo na fields and labels na
gusto mo ilagay sa document para sagutin ng mga users

Z.E. BAJO 11-STEM HIPPARCHUS

 - how the input of fields of the form will be laid out and how
the labels will be styled and oriented

3. Form Validation
- the critical point where the website communicates the user
requirements and errors in a form

● Required fields
- done usually with an asterisk
- ex. pag gumagawa ng password (********)

● Real-time validation
- informs the user quickly as possible of any problems with
the data they inputted
- ex. sa google docs na sinesend ng teachers na kailangan
answer-an pag wala kang nasagot mags-send ng signal na
may error ka while you’re still in the website

● Post-back validation
- happens after the user has submitted the form
- group all errors into a single message
- ex. may finill-out ka sa docs and then nung na sumbit mo
na after how many minutes sa email mo magm-message
not during nasa web ka

4. Status Messages: Errors, Warnings, Confirmation (SMEWC)

- need some feedback after performing an action on your website

5. Animations: Pop-ups, Tooltips, Transitions

● Tooltips
- those little pop-ups when user’s mouse hovers over
elements

● Image rotators or sliders

- home page slide shows
- ex. sa web yung header and then may arrows sa sides niya
bcos may wide range of options ng pics or slide shows

Z.E. BAJO 11-STEM HIPPARCHUS

 ● Lightbox
- consider yung sa web kunwari may three boxes of article
don and pinindot mo the element, yung style and transition
nung pagkapindot mo is the light box

★ Online Technologies

1. Prezi
- features a zoomable canvas unlike the box-types slides

2. Emaze
- features a proprietary state-of-the-art HTML5
presentation maker that will enable you to create slide
shows

★ Collaborative Development in ICT

● Collaboration
- came from the Latin word “collaboratus”
- past participle of collaborare meaning “to labor together”

1. Team Structure
- a less hierarchical organizational structure
- individuals are divided into teams; groups of people who form
teams
2. Team Dynamics
- the unconscious, psychological forces
- yung personalities nila

★ Common Principles of Collaboration

● Dr. Joseph Carl Robnett Licklider

- wrote in an article, “The Computer as a Commuincation
Device”
- illustrated his vision of network applications and predicted
the use of computer-networks for communications

Z.E. BAJO 11-STEM HIPPARCHUS

1. Participation
- they belong as one

2. Collective
- each needs to help the group reach a consensus (idea) and then
take an action collectively on the decisions to make
- magc-collect ng ideas sa each member

3. Transparency
- feedback and trust are essential elements of collaboration
- being transparent with information is crucial
- yung honesty during pagsabi ng feedbacks important para mas
maayos yung project

4. Independence
- ensure that group-think does not emerge and that people are
thinking for themselves
- may kanya-kanyang roles each member; hindi naka depende sa
iisang tao

5. Persistence
- to ensure that all content is kept within the community and easily
accessible to all members
- tiyaga to apply the principles

6. Emergence
- focus on the end goal than worrying about how it is achieved

● Groups
- a social community
- two or more people who have something in common

● Team
- a special instance of a group
- commonality is a shared goal

● Group Dynamics
- the way in which people in a group interact with one another

Z.E. BAJO 11-STEM HIPPARCHUS

 - yung way of interaction nila

★ Strategies to strengthen the Team’s Dynamics

● Know your team

● Tackle problems quickly with good feedback
● Define roles and responsibilities
● Break down barriers
● Focus on communication
● Pay attention

★ 5 Essential Features of an Online Collaborative Tool

1. Easy and clean interface

- a good user interface is the key to a great online collaboration tool
- simple and intuitive
- easy to learn para di na mag waste ng time sa tutorials

2. Permissions control
- easily add people to workspaces and control what they are able
to do in each workspace or document
- ex. yung sa gdocs pag shinashare mo link may option dun kung
viewer, editor, or commenter sila

3. File storage with document versioning

- upload and save
- makes it easy to track the progress of a document

4. Whiteboard
- let team members communicate in a more informal way
- virtual brainstorming session

5. Document locking
- ensures that only one person is working on a document at a
time
- prevents confusion

★ Project Management in ICT

Z.E. BAJO 11-STEM HIPPARCHUS

 ● Project Management
- mostly applied in the business sector
- has also been implemented in ICT since it involves
technicalities, services, and management

➔ Projects vary greatly in terms of targets, duration, budget, staffing, and

difficulty.

★ Elements needed throughout the project life cycle:

● Goals, scope, and constraints

● Timetables and costs
● Tasks and deliverables
● Workloads and resources
● Quality and risks
● Changes
● Communication
● External services and sourcing

★ Key Objectives of Project Management

● Active projects and projects to be initiated are based on a

business rationale and are appropriately authorized.
● Projects are managed and steered to achieve the specified goals
on schedule, on budget, and at the required level of quality.
● Transition of project deliverables to production and deployment
are performed in a controlled manner.
● Project benefits are realized.

★ Key Roles in Project Management

1. Project Owner
- the head of the business unit and bears the responsibility
for successful project implementation
- usually the chairperson of the project steering group
- responsible for approval and endorsement of project
deliverables and for deployment

Z.E. BAJO 11-STEM HIPPARCHUS

 - carries the main responsibility for change management
and for the achievement and measuring of benefits

2. Project Steering Group

- representatives of the business, ICT, and the internal or
external vendor
- provides guidelines, takes responsibility for
decision-making, supports the project manager
- ensures that the targets of the project are met
- manages the related change requests

3. Process Owner
- the chairperson of the steering group
- naka toka sa processing

4. Project Manager
- responsible for daily project management
- ensures that the project produces the agreed deliverables
at the appropriate level of quality

5. Project Management Office (PMO)

- gather project resources together
- develop and update the company’s project practices and
management policy

Z.E. BAJO 11-STEM HIPPARCHUS