Empowerment Technologies (FINALS)
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
Graphics – These are visual images, pictorial representations, and images
generates by hand or computer.
Graphic Design – The art of profession of visual communication that combines
images, words, and ideas to convey information to an audience, especially to
produce a special effect.
Layout – The art or process of arranging printed of graphic matter on a page.
Line – A continuous mark on a surface which may be illustrated horizontally,
diagonally, vertically or to contour an irregular shape.
Form – A three-dimensional element with volume in space. It has length, width,
and depth, and all forms have shape.
Size – Refers to the relationship of the area occupied by one shape to that of
another.
Color – Visible spectrum of radiation reflected from an object. Also, it refers to
specific hues used in a design.
Texture – Refers to the surface quality of a shape or how it feels to appear: rough,
smooth, soft, hard or glossy.
Shape – A two-dimensional element with an area on a plane. It has length and
width and can be geometric (man-made), and organic (free flowing) in form.
Space – The distance or area around or between the elements in a design.
Value – Refers to the difference between light and darkness of a color, it is also
referred to as tone.
• The principles of design govern the relationship between the elements of
design and the organization of composition. They provide a framework for
creating visually appealing and effective designs that communicate
effectively with the intended audience
PRINCIPLES IN DESIGN
Alignment – States that "nothing should be placed arbitrarily. Every item should
have a visual connection with something else on the page." The main purpose of
this principle is to unify and organize the contents of the page.
Proximity – The basic purpose of proximity is to organize or group related items
together, move them physically close to each other so that they can be perceived
as one.
Repetition – The repetitive use of an element in a design. These elements may be
bold fonts, thick lines, colors, formats, etc. that make the reader visually recognize
the theme of a certain design. It promotes consistency which shows an effort of
unifying all parts the design.
Contrast – The most effective way to add visual interest to your design. It is crucial
in the organization of information. At the first glance of the audience, the message
should be clearly understood.
White Space – The art of nothing, it is the absence of text and graphics. It makes
the design less overcrowded, confusing, and overwhelming.
Alignment in Design
➢ Alignment is a design principle that emphasizes the intentional placement
of elements on a page. It ensures that all elements have a visual
connection, creating a sense of order and unity. Proper alignment guides
the viewer's eye, through the composition, making it easier to follow and
understand the information presented.
▪ Grid System – A grid system provides a framework for aligning elements,
ensuring consistency and visual harmony.
▪ Margins and Indents – Margins and indents create visual hierarchy and guide
the reader's eye through the text.
▪ Alignment Types – Common alignment types include left, right, center, and
justified alignment.
Digital Citizenship and the Filipino People
EDSA - (FIRST PEOPLE POWER REVOLUTION)
– February 22-25, 1986
– Epifanio De Los Santos Avenue
- Former President Ferdinand Marcos Sr.
RADIO VERITAS
▪ Played a significant role during EDSA 1.
▪ Covers the assassination of Senator Benigno “Ninoy” Aquino on August
21, (CMFR Philippines 2011)
▪ Cardinal Jaime Sin called the Filipino people for support in the protest
Cardinal Tagle – Pointed out that Radio Veritas’ essential function is to spread:
the right information
Cardinal Rufino Santos
April 11, 1969
▪ Radio veritas facility was inaugurated
EDSA 2 - (SECOND PEOPLE POWER REVOLUTION)
– January 17-20, 2001
– EDSA Shrine
- Former President Joseph “Erap” Estrada
• In early October 2000, reports emerged that Joseph Estrada had been
gambling and improperly using finances directly derived from
taxpayers’ money
• Led a National Day of Protest which included a march in the city of
Manila asking President Estrada to resign rather than force the
country to endure a lengthy impeachment trial
MILLION PEOPLE MARCH
– August 22-23, 2013
– Luneta Park, Philippines
- Priority Development Assistance Fund (PDAF)
– Facebook, Twitter, [Link]
MILLION PEOPLE MARCH
Priority Development Assistance Fund (PDAF)
• Intended to allow lawmakers to finance small-scale development or
community programs, such as scholarship programs
• 400,000 people attended the Million People March
[Link]
• The world’s largest petition platform for change.
• It aims to help people around the world create the change they want
to see.
YOLANDA
• With international code name Haiyan, was recorded as one of the most
powerful typhoons in the Philippine history
• On November 8, 2013, Leyte and Samar were lost in the map due to power
and communication lines were cut off.
YOLANDA PEOPLE FINDER | Here’s how it functioned:
1. Crowdsourced Information
2. Search and Match Feature
3. Integration with Social Media
4. Collaborations and Updates
DEVELOPMENT OF AN ICT PROJECT
ICT PROJECT CREATION PROCESS
❖ In order to create an ICT project, one must have the knowledge about the
processes involved in generating the so-called project. The processes that an
ICT project goes through include the following:
1. Planning Phase – From the word itself, this phase involves conceptualizing
the project, determining the goals, and analyzing the information available.
2. Analysis and Requirement Definition Phase – This phase focuses on
analyzing the function, project requirements, target users, and impact of
the proposed project.
3. Design Phase – Describes the architectural phase of an ICT project. The
desired features and operation in detail, process diagrams, and
documentation are contained within this stage.
4. Development Phase – involves the actual creation of the written plan in the
design phase.
5. Testing Phase – This phase involves testing the results or the performance
of every phase before it.
6. Release and Promotion Phase – encompasses the actual roll out and
release of the project to be used by the users.
7. Maintenance Phase – This phase comprises the correction, modification,
and updating for improvement of the project. Responding to the user
feedback is also a part of this maintenance.
ONLINE PLATFORMS AND APPLICATIONS
PLATFORMS
• It is a combination of technologies used as a base upon which other
applications, processes, or technologies are developed
• It is the infrastructure by which multiple applications are developed upon.
TYPES OF PLATFORMS
OPERATING SYSTEM PLATFORMS – Allows apps to run on a device. It is the core
system software that manages the computer or mobile device’s hardware and
software resources.
ONLINE PLATFORMS – A website or online service that hosts content or
applications.
SOCIAL MEDIA PLATFORMS – Enables users to connect, share, and interact.
INTERNET PLATFORMS – It is a big network linked together by multiple small
networks..
INTERNET AS A COLLABORATION PLATFORM
- It enables people to have a better communication in priceless, effective, and
efficient manner.
Examples: Facebook, Instagram, Twitter (X), Gmail, and the like.
INTERNET AS AN ONLINE ENTREPRENEURSHIP PLATFORM
- Allows user build his or her online business and can perform an online marketing
scheme for his or her products.
Examples: Shopee, Lazada, Tiktok Shop, Amazon Renewed
INTERNET AS AN EDUCATION PLATFORM
- Supports a wide range of online money transaction services wherein user can
send and receive money at the click of a button.
Examples: Gcash, PayPal, Maya
APPLICATIONS
➢ It is a software program designed to perform specific tasks or functions for
the user.
Examples Of Applications:
➢ MOBILE APPLICATIONS
➢ DESKTOP APPLICATIONS
➢ WEB APPLICATIONS
UPLOADING AND SHAPING IMAGES ONLINE
Photo Sharing – Is a means to let other people view but not necessarily download
images uploaded by you.
THINGS TO CONSIDER IN CHOOSING A PHOTO SHARING SITE
o Storage Space – High resolution photos, RAW files, video etc. Take a lot of
size. If you intend to keep originals or print later, you need minimal
compression, good limits
o Image Quality Retention/Printability – If images are heavily recompressed,
you lose detail, especially for prints.
o Visibility/Discovery – A major reason to share is to be seen/discovered, get
feedback, clients etc.
o Monetization/Licensing – If you want to sell photos, license them, get
exposure for paid gigs.
o Privacy/Rights Control – You may not want everything public. Might want
to control who sees originals, download etc.
o Cost – Free plans often have many restrictions. Paid plans vary widely.
o Ease of Use – Good user interface, mobile-friendly, speed, support. Also,
whatever bandwidth/data costs are manageable, whether access from
Philippine is reliable.
LIST OF PHOTO SHARING SITES
500PX
▪ It is a popular social network for photographers looking to share their best
photos.
▪ Users can upload 20 photos privately per week for free membership.
Flicker (Flickr)
▪ According to Cambridge Dictionary (2016), It is a website that allows users to
upload photos and videos.
▪ Users can upload 1080p high-definition video clips, with playback up to three
mins long.
▪ It is a free hosting site which has editing tools, to make your picture as perfect
looking as you want.
PhotoBucket
▪ This is the best site for uploading and storing photos in their original sizes,
editing them, organizing them, hosting animated GIFs and printed photos on
products.
OTHER PHOTO SHARING SITES
➢ BEHANCE
➢ FACEBOOK
➢ INSTAGRAM
BASIC WEB DESIGN PRINCIPLES AND ELEMENTS
DEVELOPING SITE CONTENTS – In this phase, information must be accurate,
complete, and carefully selected. These information includes facts and figures,
logos, pictures, charts, and many other types of informtion relevant to the goal of
the website
DESIGNING THE SITE AND NAVIGATION – The purpose, content, and target
audience is the primary basis and consideration for determining the theme and
design of your site
Principles of design must be implemented in this step.
Tips in Designing your Site
▪ Rank the site content according to its level of importance to your target
audience;
▪ Determine if you will need additional media to support your content;
▪ Avoid the use of large graphics and unnecessary contents like animation and
video;
▪ Choose a simple theme and repeat it on all pages of your site;
▪ Use colors that are light and pleasing to eye. Avoid dark colors for the
background as much as possible; and
▪ Two to three font styles for the entire site would be enough.
DEVELOPING THE WEB-MEDIA ELEMENTS – A website’s contents largely depend
on its intended purpose or target market.
CONSTRUCTING A WEBSITE AND WEB PAGES – A website is a collection of web
pages while a web page consists the web media elements that you put on it.
Web pages should be hyperlinked with each other to form a complete website.
Types of File Formats
1. Graphic Files
• Raster – Based Files → Collection of pixels
• Vector – Based Files → Mathematical Formula → DXF (Drawing Interchange Format)
2. Text Files
• Proprietary Formats
• PDF
GF (Generic Format)
A.) Raster – Based Files → Collection of pixels
1) Joint Photographic Experts Group (.jpeg) / .jpg
2) Portable Network Graphics (.png)
3) Graphic Interchange Format (.gif) → low resolution
4) Tagged Image File Format (.tiff) → printed books, magazines, brochures
5) Bitmap (bmp)
6) Microsoft Word (.docx) / (.doc) → Proprietary Format
7) Adobe (.psd)
8) Adobe Acrobat → wideful use PDF reader