E-Tech Reviewer Finals 4.

Web Page Creation - Encompasses a

Lesson 01: Advanced Presentation Skills number of important elements including
color, layout, and overall graphical
Microsoft Powerpoint appearance.
 Microsoft Office product that provides users a) Wix - cloud based web development
with an interface to design multimedia slides to platform that allows users to create
be displayed on a projection system or personal HTML5 websites and mobile sites
computer. through the use of their online drag
 The software incorporates images, sounds, and drop tools
videos, text, and charts to create an interactive b) Weebly - a web hosting service
presentation. featuring a drag and drop website
builder.
Creating an Effective Presentation 5. File Management - The file management is
1. Minimize – Keep slides counts to a minimum to the storing, naming, sorting and handling
maintain a clear message and to keep the computer files
audience attentive a) Zamzar – web application to convert
2. Clarity - Avoid being too fancy by using font style files
that is easy to read. Make sure that it is also big b) Word2pdf - convert word files to PDF
enough to be read by the audience. Once you (Portable Document Format) with this
start making your presentation, consider how big online tool.
the screen is during your report. 6. Mapping - A transformation taking the
 Tahoma – is one of the Microsoft most points of one space into the points of the
popular Sans Serif Typefaces. same or another space.
3. Simplicity – 7 words per line, 6 lines per stanza
4. Visual – Use graphics to help in your Content Management System
presentation but not too many to distract the  A computer application (sometimes
audience. In addition, instead of using table of online or browser based) that allows you
data, use charts and graphs. to publish, edit and manipulate,
5. Consistency - Make your design uniform. Avoid organize and delete web content.
having different font styles and backgrounds. 1. Blogs - is a discussion or informational
- Use the same one or two fonts throughout. website published on the web consisting of
6. Contrast - Use a light font on dark background or discrete, often informal diary – style text
vice versa. This is done so that it is easier to read. entries (posts). Posts are typically displayed
In most instances, it is easier to read on screen if in reverse chronological order, so that the
the background is dark most recent post appears first, at the top of
the web page.
Lesson 02: Online Platforms for ICT developments
Online Platform Web Design Principles and Elements
 An online platform is a base of 1. Website Purpose
technologies designed to run within an 2. Simplicity – is the best way to go when
online environment and provides considering the user experience and the usability
interactive online services. of your website.
1. Presentation/Visualization 3. Navigation – is the way finding system used on
 Communicate information clearly and websites where visitors interact and find what
efficiently via statistical graphics, plots they are looking for.
and information graphics. 4. F-shaped Pattern Reading - The F - based
a) Prezi - helping to reinvent the art of pattern is the most common way visitors scan
presentation. text on a website.
b) Zoho - an online management app that  Eye tracking studies have found that
helps you plan your work and keep most of what people see is in the top
track of your progress. and left area of the screen.
c) Slideshare - to build quickly from 5. Visual Hierarchy - Visual hierarchy is the
concise, well presented content from arrangement of elements is order of importance.
too experts.  This is done either by size, colour,
d) MindMeister - an online mind – imagery, contrast, typographically,
mapping tool that lets you capture, whitespace, texture and style.
develop and share ideas visually. 6. Grid Based Layout - Grids help to structure your
2. Cloud Computing - The practice of using a design and keep your content organized.
network of remote servers hosted on the  The grid helps to align elements on the
internet to store, manage, and process page and keep it clean.
data, rather than a local server or a 7. Content - An effective web design has both great
personal computer. design and great content.
a) Google Drive - keep all work in one  Using compelling language great
secure place with online file storage. content can attract and influence
b) Dropbox - keeps your file safe, synced visitors by converting them into
and easy to share. customers.
3. Social Media - are computer – mediated 8. Load Time - Waiting for a website to load will
tools that allow people, companies and lose visitors.
other organizations to create, share, or  Nearly half of web visitors expect a site
exchange information, career interests, to load in 2 seconds or less and they will
ideas, and pictures/videos in virtual potentially leave a site that isn’t loaded
communities and networks. within 3 seconds.
 9. Mobile Friendly Website - More people are 2. Graphics – Are visual images or designs on some
using their phones or other devices to browse surface, such as wall, canvas, screen, paper or
the web. stone to inform, illustrate or entertain.
 It is important to consider building your I. Basic of Photo Editing
website with a responsive layout where 1. Cropping – A technique where you cut out
your website can adjust to different distracting background or a clutter of
screens. irrelevant objects around an image.
 Website Template - The website 2. Color Balance - is the global adjustment of
template or web template, is a pre- the intensities of the colors (typically red,
designed web page, simply by adding green, and blue primary colors).
your text and customization to create 3. Adjusting the Brightness/Contrast
your desired web page.  Brightness – the amount of light of an
o It is usually built with HTML image.
and CSS code.  Contrast – defines the separation
 WYSIWYG (What You See Is What You between darkest area and brightest
Get) - This means that whatever you areas of the image.
type, insert, draw, place, rearrange, 4. Resizing / Resampling - changing the size of
and everything you do on a page is the image defending on the usage.
what the audience will see. 5. Filters - are used to increase brightness and
o It shows and prints whatever contrast as well as to add a wide variety of
you type on the screen. textures, tones and special effects to a
Creating a Website using Microsoft Word picture.
1. Open Microsoft Word 6. Cloning - allows you to duplicate part of an
2. Type anything on the page like “Hello World!” image.
3. Click on File > Save as > Type any file name. 7. Changing the Background
4. In The save as Type, Select “Webpage” (*.htm, 8. Removing the Color - Reduction of
*.html)” colorfulness in image processing.
9. Combining Text, Graphics and Image
Lesson 03: Imaging and Design for Online Environment II. Image file Format
Basic Principles of Graphics and Layout 1. JPEG (Joint Photographic Experts Group) - Is
1. Emphasis – An area in the design that may a commonly used method of lossy
appear different in size, texture, shape or color compression for digital images, particularly
to attract the viewer’s attention. for those images produced by digital
2. Movement – Visual element guide the viewers photography.
eyes around the screen. 2. PNG (Portable Network Graphics) - Is a
3. Pattern, Repetition, and Rhythm – These are the lossless compression format and is best
repeating visual element on an image or layout used for photo editing applications.
to create unity in the layout or image. - PNG format is now supported by many
 Rhythm is achieved when visual software applications including adobe
elements create a sense of organized programs.
movement. 3. GIF (Graphic Interchange Format) – Is an
4. Proportion – Visual element create a sense of image file that is very popular on the world
unity where they relate well with one another. wide because of its small file size and
5. Variety – This uses several design elements to animation support
draw a viewer’s attention. 4. BMP (bitmap) - Is a raster graphics image
6. Contrast – This refers to the striking difference file format used to store bitmap digital
between two elements. images, independently of the display device
(such as a graphics adapter), especially on
Infographics – used to represent information, statistical Microsoft Windows.
data, or knowledge in a graphical manner usually done in
a creative way to attract the viewer’s attention. Lesson 04: Collaborative ICT Developments
Principles in Making an effective Infographic
Design Online Collaborative Tools - are tools that can help your
1. Be unique group “go the distance” and work as if you already have
2. Make it simple your own office. Working together does not necessarily
3. Be creative and old mean you have to be physically together.
4. Less is more
5. The importance of getting it across Examples of Online Collaborative Tools:
1. Facebook Groups - allows you to create a group
Image Manipulation Principles page that will allow people in your group to
1. Choose the right file format – Try to make a real- communicate your ideas
life photograph into GIF to see the difference 2. WordPress – allows you to multiple contributors
between PNG, GIF and JPEG. for a single blog.
2. Choose the right image size – A camera with 12 3. G Suite - a brand of cloud computing,
megapixels constitutes to a bigger image size. productivity and collaboration tools, software
3. Caption it – Remember to put a caption on and products developed by Google.
images whenever possible.  It comprises Gmail, Hangouts, Calendar,
and Google+ for communication
Image Manipulation Techniques 4. Google Docs, Sheets and Slides - are a word
1. Image – A representation of external form of a processor, a spreadsheet and a presentation
person or thing in art. program respectively, all part of a free, web-
based software office suite offered by Google
within its Google Drive service.
 5. Microsoft Office Online - allows multiple people Lesson 06: ICT as Platform for Change
to work on different office files.
6. Microsoft Yammer - offers companies to have The Role of ICT in Recent History
their own social network that allows sharing and 1. EDSA (People Power Revolution)
managing content  Lasted from 1983-1986
7. Trello – offer an online to-do checklist for your  During a radio broadcast of Radyo
entire team. Veritas, Cardinal Sin encouraged the
8. Web Portal – a website that contains information filipinos to help end the regime of then
from different sources and places them in one President Ferdinand Marcos.
location in a uniform way.  A major protest took place along EDSA
9. Yahoo.com - offers a web portal a web portal from February 22-25, 1986 involving
where news, email, weather, etc. are found in TWO MILLION FILIPINOS from different
one page. sectors. These includes civillians,
political parties, the military and
Lesson 05: Interactive Multimedia religious groups.
 The radio broadcast helped change the
Interactive Multimedia – is any computer-delivered course of history. Without it, Filipinos
electronic system that allows the user to control, would not have been moved into
combine, and manipulate different types of media, such action.
as text, sound, video, computer graphics, and animation  Medium: Radio Broadcast
(Britannica.com) 2. EDSA Dos (2001 EDSA Revolution)
Multimedia - Is a content that uses a combination of  Happened during January 17-21, 2001.
different content forms such as text, audio, images,  It is fueled after 11 prosecutors of then
animations, video and interactive content. President Joseph Estrada walked out of
˗ Key feature - Interacting the impeachment trial.
Uses of Multimedia  As a result, the crowd in EDSA grew over
 Education the course of a few days through TEXT
 Entertainment BRIGADES.
 Business  Like the first People power Revolution,
 Medicine EDSA Dos would not have been
 Government successful without the TEXT BRIGADES.
 Medium: Text Brigades
Multimedia Content 3. Million People March
1. Video – is a film or television program recorded  August 22-26, 2013
digitally (or in the past on tape) for people to  This is a series of protest that mainly
watch on a television set. took place in Luneta Park.
2. Courseware – Refers to a software program  There were also several demonstrations
especially designed for educational purposes. that happened around key cities in the
 Initially available on CDs as course help Philippines and some locations overseas.
for instructors and helping them It was to condemn the misuse of the
manage lectures, courseware has been Priority Development Assistance.
revolutionized (PDAF)
3. Online Games - is a video game that is either  400,000 is the number of total
partially or primarily played through the attendees.
Internet or any other computer network  Medium: Facebook and
available. Change.org
4. Online Test - is a timed, supervised, summative 4. Yolanda People Finder
assessment conducted using each candidate's  Recent storms in Philippine history gave
own computer running a standardized operating birth to the People finder database
system. powered by Google.
5. Music - is an art form and cultural activity whose  During typhoon Yolanda, the People
medium is sound organized in time. Finder was a vital tool for people across
6. Sound Clips/Effects - is an artificially created or the globe to track the situation of their
enhanced sound, or sound process used to relatives.
emphasize artistic or other content of films,  This proved successful and is now
television shows, live performance, animation, adopted by more organizations to help
video games, music, or other media. people track relatives during calamities.
a) Diegetic Sound – sounds that  Medium: Google
belongs to the world of film  Tool: People Finder
o It is the sound that the camera Change.org (World’s Platform for Change)
picks up while filming that is  Anyone from online community can create a
just natural sounds. (Ambient petition and ask others to sign it.
Sounds)  It gives access to more people by allowing the
b) Non-diegetic Sound – sounds that online community to affix their digital
does not hear on a screen source. signatures on a petition.
7. Sound Recording - Recording of an interview,  Change.org mission is to help people from
meeting or any sound from the environment. around the world create the change they want
8. Podcast - A digital audio or video file or recording to see.
usually part of a themed series/episode that can
be downloaded from a website to a media Advocacy - The act or process of supporting
player or computer. a cause through an activity carried out by an
individual or group that aims to influence
 decisions within political, economic, and Ex. Family, Education, Religion, Government
social institutions. 3. Population - composition is changing. Births
increase in one nation and decrease in another.
Digital Citizenship - refers to the utilization of Ex. Health Care, Education, Jobs
information technology (IT) in order to engage in society, 4. Modernization - processes increase the amount
politics, and government. of specialization and differentiation of structure
Nine Elements of Digital Citizenship in societies.
1. Digital Access - means the ability to fully
participate in a digital society. It is about the
equitable distribution of technology and Step-by-step Process of Creating a Website
online resources. 1. Sign Up or Log In to Wix
2. Digital Commerce - refers to buying and Create an account or log into your existing Wix
selling things online account to start building your website.
 Digital commerce can occur anywhere 2. Choose a Template
you’ve got a WiFi connection, from your Browse through the available templates and
smartphone, TV, iPad, to all the different select one that suits the purpose of your website.
connections online like social media, You can filter templates based on category
Livestream shopping, and more. (business, portfolio, blog, etc.).
3. Digital Communication - this element deals 3. Choose a Wix Editor
with understanding the variety of online You will be given the option to use Wix ADI
communication mediums such as email, (Artificial Design Intelligence) or the Wix Editor.
instant messaging, FB messenger, the variety Choose the Wix Editor for full control over
of apps, and so forth. customization.
4. Digital Literacy - This element deals with the 4. Customize Your Template
understanding of how to use various digital Edit the text, images, and layout. Use the drag-
devices. and-drop features of Wix to move elements
5. Digital Etiquette - this is the expectation around and add new sections as needed.
that various mediums require a variety of 5. Add Pages
etiquette. Create additional pages such as About, Services,
 Etiquette – set of rules for social Blog, or Contact by using the Pages menu. This
situations helps organize the content of your website.
 Netiquette – set of rules for online 6. Customize Your Site's Design
communication Modify the colors, fonts, backgrounds, and other
6. Digital Law - this is where enforcement design elements to match your branding or
occurs for illegal downloads, plagiarizing, personal style.
hacking, creating viruses, sending spams, 7. Add Features and Apps (Optional)
identity theft, cyberbullying, and so forth. Use the Wix App Market to add features like a
a) Ethical - use encompasses all activities contact form, online store, blog, social media
on the Internet that abide by the laws buttons, or booking systems, depending on the
of society. website's purpose.
b) Unethical - use encompasses all 8. Preview Your Website
activities on the Internet that do not Before publishing, preview your site to check
abide by the laws of society. how it looks on both desktop and mobile
7. Digital Rights & Responsibilities – This is the versions.
set of rights that digital citizens have such 9. Publish Your Website
as privacy, speech, and so forth. Once you're satisfied with the design and
8. Digital Health - Digital citizens must be content, click the "Publish" button to make your
aware of the physical stress placed on their website live. You can then connect a custom
bodies by internet usage. domain if you have one, or use a free Wix
Examples: Electronic Health Record, domain.
Telemedicine, Wearable Technology, etc. 10. Regular Updates on Wix
9. Digital Security - This is simply means that You can update the data on Wix from time to
citizens must take measures to be safe by time to keep everything up-to-date.
practicing using difficult passwords, virus
protection, backing up data, and so forth.

Lesson 07: ICT Project for Social Change

Social Change - changes in human interactions and

relationships that transform cultural and social
institutions.
Examples: People Power Revolution, Reproductive Health
Law, LGBTQ+ Rights Movement, K-12 Education Program,
Anti-Cybercrime Law in the Philippines, Bangsamoro Law

Causes of Social Change

1. Technology - is driving the force behind
globalization, while the other forces of social
change play comparatively minor roles.
Ex. Innovation, Accessibility, Influence Social
Change, Education, Health, Economic
2. Social Institutions - leads to changes in all social
institutions.