EMPOTECH Module
EMPOTECH Module
1
1
PREFACE
This AdZU- SHS RIGHT Learning Kit for ICT 112: Empowerment Technologies is aligned with
the competencies of the K-12 Basic Education Curriculum set by the Department of Education.
The Empowerment Technologies course introduces the learners to various tools for
collaborating, curating, contextualizing, and creating content and experiences through
Information and Communication Technologies (ICT) to help them cultivate their skills at the
right pace. This course, as stipulated in the curriculum guide, aims to lead our AdZU-SHS
learners to empower them in the decisions they make and tasks they strive to accomplish. This
will also serve as a foundation for them to be outstanding citizens in the future and an avenue for
them to be able to actively participate in the growth and improvement of the society they live in.
The RIGHT learning kit covers the learning competencies articulated in the Empowerment
Technologies curriculum designed by the Department of Education. Students will learn how they
can use the Internet to gather information, collaborate with peers, increase productivity, and even
to promote social change. Among other topics covered are cybersecurity, social media, online
etiquette, and content creation using up-to-date technologies so lessons will be relevant to our
learners. In essence, this kit is designed to provide ADZU-SHS learners an overview of the
different information and communications technology (ICT) tools that will improve their daily
lives and empower them for personal development and contribute for the betterment of their
community.
This RIGHT Learning Kit is collaboratively prepared by the ICT instructors headed by
Melophyl Baguio from the Ateneo de Zamboanga University – Senior High School Unit for the
Academic Year 2020-2021, revised by Clairizza V. Arcillas, Farhana Jealyn P. Kalbi, George
E. Lacerona Jr., and Faiza U. Nasalun and reviewed by Arlene A. Miguel for the school year
2022-2023.
i
TABLE OF CONTENT
Course Outline 1
UNIT I: CURRENT STATE OF ICT TECHNOLOGIES 2
LESSON 1
ONLINE SYSTEMS, FUNCTIONS, AND PLATFORMS 3
Experience 3
Prelection 3
Concept Notes 10
Guided/Independent Practice 11
Reflection-Action 11
Evaluation 11
LESSON 2
CYBERSECURITY AND NETIQUETTE 12
Experience 12
Prelection 12
Concept Notes 12
Guided/Independent Practice 16
Reflection-Action 16
Evaluation 16
LESSON 3
APPLIED PRODUCTIVITY TOOLS WITH ADVANCED
APPLICATION TECHNIQUES 17
Experience 17
Prelection 17
Concept Notes 17
Guided/Independent Practice 33
Reflection-Action 33
Evaluation 34
LESSON 4
IMAGING AND DESIGN FOR ONLINE ENVIRONMENT 36
Experience 36
Prelection 36
Concept Notes 36
Guided/Independent Practice 40
Reflection-Action 40
Evaluation 41
LESSON 5
DEVELOPING AN ICT PROJECT FOR SOCIAL CHANGE 43
Experience 43
Prelection 43
Concept Notes 44
Guided/Independent Practice 60
Reflection-Action 60
Evaluation 61
ICT for Social Change Concept Paper 61
RUBRIC FOR SCORING 62
GUIDELINES 62
Layout 63
UNIT II
ICT FOR SOCIAL CHANGE 64
LESSON 6
PUBLISHING AN ICT PROJECT 65
Experience 65
Prelection 65
Concept Notes 65
Guided Practice 75
Reflection-Action 75
Evaluation 75
LESSON 7
SUSTAINING AN ICT PROJECT 78
Experience 78
2
3
Prelection 78
Concept Note 79
Guided Practice 82
Reflection-Action 82
Evaluation 82
LESSON 8
ICT, THE SELF, AND THE SOCIETY 84
Experience 84
Prelection 84
Concept Notes 85
Guided Practice 85
Reflection-Action 85
Evaluation 86
Grand Performance Task 87
ICT for Social Change Presentation 87
GUIDELINES 88
RUBRIC FOR SCORING 88
COURSE OUTLINE
1
UNIT I
CURRENT STATE OF ICT TECHNOLOGIES
“Participating in the newest communication technologies becomes compulsory if you want to
remain part of the culture.” - David Porush
CONTEXT
LEARNING COMPETENCIES
1. Compare and contrast the nuances of varied online platforms, sites, and content to best
achieve specific class objectives or address situational challenges
2. Apply online safety, security, ethics, and etiquette standards and practice in the use of
ICTs as it would relate to their specific professional tracks
3. Use common productivity tools, effectively by maximizing advanced application
techniques.
4. Use image manipulation techniques on existing images to change or enhance their current
state to communicate a message for a specific purpose
5. Create an original or derivative ICT content to effectively communicate a visual message
in an online environment related to specific professional tracks
6. Evaluate the quality, value, and appropriateness of peer’s existing or previously
developed ICT content in relation to the theme or intended audience/ viewer of an ICT
project
7. Share and showcase existing or previously developed material in the form of a
collaboratively designed newsletter or blog site intended for a specific audience or viewer
VALUES INTEGRATION
Competence, Character, and Culture
2
LESSON 1
ONLINE SYSTEMS, FUNCTIONS, AND PLATFORMS
“If you can Program it, then it’s a platform. If you can’t then it’s not”.
-Marc Andreessen
Experience
Prelection
Open your web browser and search for the article entitled “How Was Life Before the Internet -
What Did People Do?” By University of The People. How would you describe life if the Internet
was never developed?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Concept Notes
Before the Internet came, you would normally have to wait for weeks or months before you
could receive messages from a loved one abroad. Searching for information would also require
you to spend hours browsing through books and other printed materials in the library (not to
mention the time you need to spend going to the facility). Posting announcements for a big
number of audiences may also cost hundreds of pesos for reproduction of print ads, streamers,
and manpower. And in times of emergency, just imagine how difficult it is to get help without a
telephone.
Problems related to slow and expensive transmission of information are mainly the reason
behind the development of the Internet. And although many online platforms and services were
already created to serve this purpose, there may still be many areas and situations in society that
call for its help.
While Information Technology (IT) is the use of technology to solve problems, Information and
Communication Technologies (ICT) is more focused on those that allow you to communicate
with others using telecommunications like the Internet and Cellular phones (Tech With Tech,
2022).
3
What is the Internet?
The Internet is a network of networks. It connects private, public, academic, business and
government networks all over the world through a wide range of networking and communication
technologies.The following defines the term internet according to the resolution passed by the
Federal Networking Council (FNC) on October 24, 1995:
1. as a logically link together by a globally unique address space based on the Internet Protocol
(IP) or its subsequent extensions/follow-ons;
2. able to support Transmission Control Protocol/ Internet Protocol (TCP/IP) suite or its
subsequent extensions/follow-ons, and /or the other IP-compatible protocols; and
3. provides, uses or makes accessible, either publicly or privately, high-level services layered on
the communications and related infrastructure described herein.
The Internet is composed of millions of small computer networks all brought together to
form the vast “Inter-Network”. The word never caught on, so it was shortened to the much
easier-to-say “Internet”. A large part of the internet is the World Wide Web (WWW). This is
made of websites that have one or more web pages. This is the part of the Internet that you
probably use most of the time. It also includes other services such as instant messaging,
chatrooms, e-mails, file transfers, news groups, peer-to-peer networks, and forums. No one owns
the Internet because each part of it is made up of individual networks that someone has put
together and then linked to the internet. However, each network has to obey Internet standards in
order to connect.
Uses of Internet
The Internet is a global networking system that can be accessed via a wide range of
devices and has become ingrained in our daily lives. In today's modern age, the majority of
businesses conduct their operations via the Internet. There are numerous ways in which
businesses and individuals can make their daily tasks more productive and comfortable through
the use of the Internet.
The Internet has made it significantly easier for people to book bus, train, and flight
tickets (domestic and international) directly from their devices. Additionally, individuals can
book a taxi by selecting their current location and being picked up or dropped off at a specified
location. Nobody has to wait in long queues to book tickets at the ticket counter anymore.
Furthermore, people can order a wide variety of products from the comfort of their homes via the
Internet and mobile devices. It can include everything from groceries to ready-to-eat meals,
fashionable clothing to pharmaceuticals. The majority of items can be ordered online and
delivered directly to your door (ex. Shopee, Lazada, FoodPanda, GrabFood, etc.).
4
Online Banking and Cashless Transactions
Nowadays, the majority of banking functions are accessible to the general public.
Individuals can use online banking to securely transfer funds between accounts, change their
ATM pins, apply for physical or virtual credit cards, update credit card limits, enable or disable
international transactions, and track their transactions, among other things.
Additionally, most of the banks promote cashless transactions and electronic payments.
This enables individuals to carry less cash. It can pay their bills using debit or credit cards at
point-of-sale (POS) devices. These devices are connected via the Internet to the payment
gateway. Furthermore, individuals can conduct transactions via their smartphone and the Internet
(e.g. GCash, PayMaya, Coins.ph, etc.). It even exempts them from carrying their cards. These
cashless payment methods are constantly evolving and are expected to soon cover the majority of
transactions.
The majority of devices are connected to the Internet. It provides a lot of educational
content on virtually any subject and in a variety of formats where users can conduct research on
a particular subject by spending a few minutes on the Internet. Internet search engines assist
people in quickly locating relevant study materials in a variety of formats (such as images,
videos, documents, etc.). This eliminates the need to visit the library and read through several
books in order to obtain the desired information. Additionally, the Internet enables students to
participate in their classes via video conferencing, which allows students to connect with
teachers or other professionals located anywhere in the world.
Email or electronic mail was one of the Internet's first significant uses. It enables people
to communicate more quickly over the Internet and can easily share information, data files via
email, including images, audio, video, and other types of files. In addition, Email has
significantly reduced reliance on paper which was the primary mode of communication in the
past. Anyone can obtain a free email address and communicate easily with others. This has also
alleviated some of the load on the physical mail system, which is still operational.
Social Networking
Social networking sites have brought people from all over the world together, which is
why it would not be complete without social networking. The Internet enables people to form
social groups in which they can share information, thoughts, and ideas about anything. Social
networking platforms are the primary source of content, with categories ranging from
educational to entertaining. The best part is that these services are completely free. This benefits
businesses by assisting them in developing their communities and promoting their products.
5
Popular Social Networking Applications
Entertainment
The Internet is the most effective form of entertainment currently available. On the
Internet, individuals can experiment with a variety of activities, including watching movies,
playing online games, and listening to music. Additionally, the Internet has simplified the
process of downloading entertainment items to local storage. Individuals can also share their
videos, songs, and photographs with others via the Internet. Additionally, people can now watch
live television or sports via the Internet.
Entertainment Apps
Evolution of the Internet
Web 1.0
The first stage of the World Wide Web's evolution is referred to as Web 1.0. It allows
information to be displayed on websites. It is suitable for usage as a personal website. It charges
the user based on the number of pages viewed. It features directories that allow users to search
for specific information.
A Web 1.0 site must include four design elements:
1. Pages that are static.
2. The server's file system is used to serve the content.
3. Pages created with Server Side Includes (SSI) or the Common Gateway Interface
(CGI) (CGI).
4. The items on a page are positioned and aligned using frames and tables.
6
Web 1.0 User Interface
Web 2.0
Web 2.0 is a term that refers to global websites that emphasize user-generated content,
usability, and interoperability. Web 2.0 is also referred to as a social network that is participatory.
It does not refer to a change in any technical specification, but to a change in the design and use
of Web pages. While the transition is beneficial, it does not appear to be the case when the
changes occur. Web 2.0 enables interaction and collaboration among users in a social media
dialogue as a creator of user-generated content in a virtual community. Web 1.0 is a version of
Web 2.0 that has been enhanced.
Web 2.0 development makes use of web browser technologies, including the AJAX and
JavaScript frameworks. AJAX and JavaScript frameworks have recently become extremely
popular for developing web 2.0 sites.
Five major features of Web 2.0 include the following:
1. Unrestricted information sorting, which enables users to retrieve and classify
information collectively
2. Content that is dynamic and responsive to user input
3. Through evaluation and online commenting, information is exchanged between
the site's owner and users
4. Created APIs to enable self-use, for example, by a software application
5. Web access results in a variety of concerns, ranging from the traditional Internet
user base to a broader range of users
7
Utilization of Web 2.0:
The social Web is a variety of online tools and platforms through which individuals can
exchange their perspectives, opinions, thoughts, and experiences. Web 2.0 applications typically
involve a greater degree of interaction with the end user. As such, the end user is not only a user
of the application but also a participant in the application through the use of the following eight
tools:
1. Podcasting
2. Blogging
3. Tagging
4. RSS Curation
5. Bookmarking on social media
6. Collaborative social networking
7. Social media platforms
8. Voting on web content
It is a term that refers to the evolution of web use and interaction, which includes the
transformation of the Web into a database. After years of focusing exclusively on the front-end,
this enables the web's back-end to be upgraded (Web 2.0 has mainly been about AJAX, tagging,
and another front-end user-experience innovation). Web 3.0 is a term that refers to a number of
distinct evolutions of web usage and interaction. In this model, data is not owned but rather
shared, with different services displaying unique views of the same web / data.
The Semantic Web (3.0) promises to organize "the world's information" in a more logical
manner than Google's existing engine schema can ever accomplish. This is especially true when
8
viewed through the lens of machine comprehension rather than human comprehension. The
Semantic Web requires the use of a declarative ontological language such as OWL to generate
domain-specific ontologies that machines can reason about and derive new conclusions from,
rather than simply matching keywords.
1. Semantic Web - The Semantic Web is the next evolution of the Web. The semantic web
advances web technologies by allowing for the creation, sharing, and connection of
content via search and analysis based on the ability to comprehend the meaning of words
rather than on keywords or numbers.
9
3. 3D Graphics - Web 3.0 websites and services make extensive use of three-dimensional
design. 3D graphics are used in a variety of contexts including museum guides, computer
games, ecommerce, and geospatial contexts.
5. Ubiquity - Multiple applications can access the same content, every device is connected
to the web, and the services are available from anywhere.
10
Guided/Independent Practice
Venn Diagram
Direction: Identify similarities and differences among the three given online platforms:
11
Reflection-Action
Which of the uses of the Internet was not so familiar to you? Where do you think it’s going to be useful
for you in the future? Why do you think so?
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
Evaluation
Written Works - Quiz
I. Multiple Choice (20 Points)
II. Enumeration (10 Points)
12
LESSON 2
CYBERSECURITY AND NETIQUETTE
“Hacks and attacks happen. Safety Netiquette helps. Periodic account reconciliation is
required. Check.”
— David Chiles
Experience
Prelection
Direction: Mark checked (✔) the items that you are currently experiencing with your personal
computer.
Pop-Up Ads Is there any ad that pops out on your computer even when
your internet browser is inactive?
Unknown Programs Do you see any unfamiliar icons in your desktop screen,
Launching start-up list, and in your flash drive?
Out of Control Web Is there any site that automatically opens in your search
Browser engine other than your start-up pages?
Concept Notes
Remember the most important files that you lost after plugging your flashdrive in a public
computer like in an Internet Cafe, or, that moment when your personal computer slowed down
and malfunctioned after visiting a certain website. It is everybody’s nightmare to lose important
files when our computers and file storage devices get corrupted by a malware invasion. But
nothing can be more horrible than losing amounts of hard-earned money through your online
banking app just for the same reason.
13
Common Cyber Threats
Despite the availability of security measures, cyber attackers are always looking for new ways on
how to invade devices. The following are examples of evolving threats:
1. Malware - malicious software that provides unauthorized access or causes damage to
computers
2. Ransomware - locks down files, data, systems, and threatens to destroy data unless
ransom is paid to the cyber attackers
3. Phishing - includes online scams, emails, or text messages that appear to come from
legitimate companies but are asking for sensitive information
4. Insider Threats - current or former members of an organization who still have access to
information and happen to abuse this access rights
5. Man-in-the-middle Attacks - an attack where a cybercriminal intercept data being
transmitted among devices that use an unsecure Wi-Fi network.
Indicator Description
Pop-Up Ads Is there any ad that pops out on your computer even when your
internet browser is inactive?
Out of Control Is there any site that automatically opens in your search engine
Web Browser other than your start-up pages?
Slow-down of Is your computer boot-up taking longer than usual (except for
PC important program updates)?
Online Safety
Aside from exposure to possible malware carriers like infected flash drives, your device may
also be vulnerable to cyber attacks through unsafe online practices. Try to assess your online
safety habit by answering this quick assessment (most contents were taken from NordVPN - a
14
Virtual Private Network provider). Mark the item checked
practice. Leave it blank otherwise.
✔️that is true about your online
Mark Risky Online Behavior
6. No Computer Password
7. No Antivirus or Antimalware
20. Not using incognito window (or forgetting to sign out your account)
when using someone else’s device, or computers in stations like internet
cafes and computer laboratories
Looking at the result, which online safety habits do you need to work on?
15
Online Etiquette
While everyone is trying to get rid of cyberthreats, our lack of respect for other netizens can also
be a cause of online security issues. “Netiquette is short for ‘Internet etiquette.’ Just as etiquette
is a code of polite behavior in society, netiquette is a code of good behavior on the Internet. This
includes several aspects of the Internet, such as email, social media, online chat, web forums,
website comments, multiplayer gaming, and other types of online communication.”
(TechTerms.com, 2017)
Try to check your personal netiquette by answering a quick assessment below. Mark check
item that you find true about your online behavior. Leave it blank otherwise.
✔️the
Mark Bad Netiquette
2. Not reading what you wrote before posting or sending, which can be
taken negatively or offensively when misinterpreted.
7. Using inappropriate language and using capital letters all the time
Looking at the result, what do you need to work on in your online behavior?
16
Guided/Independent Practice
Provide all online safety procedures that must be applied in performing the following tasks or
activities:
Reflection-Action
How do you feel about your personal netiquette and online safety practices? What do you think
are the challenges that you need to overcome in order to grow in these areas?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Evaluation
Written Works - Quiz
I. Identification (5 Points)
II. Enumeration (15 Points)
17
LESSON 3
APPLIED PRODUCTIVITY TOOLS WITH ADVANCED
APPLICATION TECHNIQUES
“Ordinary people think merely of spending time, great people think of using it.”
– Arthur Schopenhauer
Experience
Prelection
In a scale of 0 to 5, rate your knowledge on the following computer applications:
_
___________ 1. Google Calendar ____________ 4. Google Drive
___________ 2. Google Sheets ____________ 5. Google Slides
___________ 3. Google Docs
Concept Notes
Behind most innovation is the purpose to increase productivity. And generally, productivity is the
ability of an individual, team, or organization to work efficiently within a limited time while
being able to produce maximum output. Innovation never stops in ICT. As years pass by, new
applications or better versions of programs are introduced in the market promising greater
experience and higher level of efficiency. The only challenge that every ICT user needs to
embrace is the ability to adapt to these updates.
The key to easily becoming familiar with new applications is simply mastery of basic computer
navigations. Every platform shares common navigation setup that usually includes the following:
Windows / Tabs All features and content of a platform are contained in a window. A
window can be minimizThe key to easily becoming familiar with new
applications is simply mastery of basic computer navigations. Every
platform shares common navigation setup that usually includes the
following:ed, maximized, and repositioned. A window can contain more
than one tab.
Menu Bar Usually located in the header side of every platform, a menu bar
contains the main navigation buttons. Website menu bars normally
contain Home, Services, About, and Contact buttons. Computer
application menu bars normally contain File, Edit, Tools, and View
Function buttons.
18
Navigation Navigation buttons are commonly found in websites. They can be in the
Buttons form of icons or texts that are linked to a corresponding webpage.
Function Buttons These buttons are present both in websites and applications. They
normally run certain operations when clicked. Examples are Post, Send,
Upload, Edit, Update, etc.
Dropdown Menu Some buttons provide options when you click them. These buttons may
/ Options contain tiny arrow icons located in the lower right side. Others come in
the form of triple dot icons (...) or triple horizontal lines. They are used
when not enough space is available to contain all other options in a
menu or selection.
Hover options Aside from dropdown icons, some buttons provide options by simply
hovering on them. They are mostly common in more advanced
applications or websites.
Sidebar / Toolbar Websites and applications most often contain a sidebar that display
either navigation buttons or function buttons.
Clickable data When you encounter words or phrases that are in blue texts, they
normally contain links to other sites or pages within the website when
clicked. These texts are called hypertexts (texts with link).
Word Processing
Although people born in the 90s and earlier grew up with MS Office Word as their primary word
processing application, due to copyright concerns, more people are being drawn to the free
services of Google Docs. Perhaps, the only clear edge that MS Office Word has with Google
Docs is the full privacy of its documents in offline version since it has no feature for online
collaboration, making it somehow more secure from uninvited viewing or editing. It is also best
used for documents that need complex layouting like books and magazines.
19
Spreadsheet
Microsoft Excel is used by many companies for its high-end data analysis and complex
spreadsheet functions, however, a monthly subscription fee is needed in order to have legitimate
access to the app. Thus, Google Sheets is the best option for those who have no budget and for
groups that need to work on a spreadsheet simultaneously. Google sheets also normally work
hand in hand with Google Forms, which is a tool for gathering data like surveys, quizzes, and
other types of content. Google form makes the encoding of data uniform and automated upon
gathering of data from survey respondents. Another partner of Google Sheets for automated
20
sending of data reports through to a group of receivers through email is Autocrat. It is a mail
merge tool that takes data from a spreadsheet and merges it into a document.
Schedule Management
A skill needed to become productive is time management. And there is no other way to produce
more in a given limited time than to be able to stay on track with deadlines and other
commitments. Google Calendar is a free application that provides fast scheduling of events and
tasks with reminders, guests, attachments, and different views (annual, monthly, weekly, daily,
and by tasks). It allows members of a team to view each other’s schedules for faster setting of
meetings and other activities.
Google Calendar
Note: In case you can’t find Google Calendar in the list of widgets of your phone, you may need
to download and install it from your app’s application store.
21
2. Selecting different calendar views. Changing your calendar view will be helpful when
trying to consider what day certain dates will fall and in budgeting your time. To access the
calendar views, just tap anywhere on your calendar widget.
22
medical check-up, tune-up for a vehicle, etc. These are tasks or events that need regular
reminders.
Tap the save button after selecting the type of repetition mode, and then check the
calendar widget in your phone to see if the event is already visible.
23
4. Inviting people to an event. Assuming that you will be meeting someone every Friday at
1:00 pm. To make sure that both of you will get reminded of the meeting, you can create an
event in your Google Calendar and invite others as guests.

24

25
26
Best Practices in Using Word Processing Apps
When using a Word Processor, the following are important practices that must be
remembered.
2. Saving files in an organized drive. Doing this even before you start editing helps you
easily locate the document later on. In Google Docs, it is easier to do this by clicking on
the folder icon on the right side of the file name. Below is a sample Google Docs file
with illustration on how to move the file to a designated location.
3. Using headers for titles and subtitles. This allows the word processor to prepare a table
of contents for the document. See illustration on the next page.
27
4. Using proper indentation. In cases where you need to quote a line from a book or
personality and the line needs a space, use indentation instead of spacebar to move the
lines in the center.
28
6. Using Cloud Storage. This practice not only helps you access your document
everywhere but it also helps save space in your computer. Just make sure that you use
incognito or private windows when doing work in public or shared computers for data
security.
Assuming you have been tasked to facilitate a seminar as part of the registration committee.
You’re in charge of encoding the list of participants and sending each of them a certificate of
participation through email. The following are foundational steps in using spreadsheets that can
help you easily carry out the task.
29
1. Identifying cell reference. Every spreadsheet has a range of columns and rows on which
we input data. In the given example, cell D5 is selected. D is the letter of the column,
while 5 is the row number.
2. Entering, editing, and deleting data in a cell. When entering data in a spreadsheet,
always reserve the first row for header or titles. This allows the application to sort the
data without removing the header from their order or location. This arrangement will also
allow other functions like mail merge, etc.
30
a. Formatting data (Wrap). In cases where the cell
contains a paragraph, the data needs to be wrapped in
order to fit into the size of the cell. In the given example,
data entries under column F are in paragraph form. The
entry needs to be wrapped in order not to overlap with the
cells on the next columns.
b. Freezing Header and First Column. The first column which normally contains identifying
data (such as names) becomes invisible when moving the scroll bar to the far side of the sheet.
The same thing happens to the headers when scrolling down to the lower part of the document.
Using the Freeze tool is helpful in keeping them visible. To do this, just click on the header or
row 1 (see given illustration), and then click View in the menu bar. Select Freeze, and then
choose “Up to row 1”. Do the same with the first column by clicking on column A (click the
letter of the column), select View, Freeze, and then “Up to column A”.
31
3. Sorting data. Assuming you have a list of items and their prices in a spreadsheet and you
want to arrange them in descending order so that you can easily identify which one is the
most expensive.
32
33
After applying sort A to Z, the most expensive item has been placed in the bottom of the
list which is Apple Iphone I3 Pro Max.
4. Applying borderlines
34
5. Using sheet tabs. In spreadsheets, different kinds of data can be encoded and processed
using separate sheets. You can use Sheet 1 (for example) to contain personal data of
groupmates, Sheet 2 for their assigned tasks, Sheet 3 for performance ratings or
comments.
6. Using Collaborative Features. In case you’re working with a team in a Google Sheet
(assuming the file was already shared with the team members), you can easily inform
your teammates about any changes or additional inputs by using comments. Simply
right click on the cell where you want to tag (call) them, and then select “comment”.
Type the symbol “@” and their names will appear in a selection listl.
35
Guided/Independent Practice
Using Google Calendar
1. Create two calendar widgets on your smartphone - one for daily tasks, and the other for
monthly calendar.
2. Create a repeating event entitled: Review deadlines and assignments. Schedule the event
to 7:00 every night.
3. Show the result to your instructor.
1. Download DTI Suggested Retail Prices as of May 11, 2022 from this link:
https://bit.ly/spreadsheetactivity .
2. Create a blank Google Sheet file and then copy and paste all entries under Detergent and
Laundry Soap in Column A from the DTI SRP into the spreadsheet.
3. Create a header for the item, the weight, and then the price.
4. Sort the items from the most expensive to the cheapest.
5. Show the result to your instructor.
Reflection-Action
What are those regular activities or routines that you could be doing easier with the productivity
tools discussed in this lesson? What are some challenges that you need to overcome in order to
enjoy the benefits of using the said tools?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
36
Evaluation
Concept Paper Development Plan (Spreadsheet - 20 Points)
Direction: At the end of this quarter, you will be producing a concept paper where you can
demonstrate how ICT can affect social change. In preparation for this project, study the layout of
the concept paper (see page 64) and then create a development plan using Google Sheet.
Details of the Development Plan:
1. The spreadsheet must contain the following details (for a preview, visit the link
https://bit.ly/ict112conceptpaperdplan):
a. Sheet 1: Breakdown of Tasks
b. Sheet 2: Team Members’ Profile
c. Sheet 3: Evaluation
2. The evaluation (sheet 3) must be answered ONLY AFTER the SUBMISSION OF THE
FINAL CONCEPT PAPER.
3. All members must fill in their data in the Team Members’ Profile (leave profile photo
empty until lesson 4 evaluation).
4. Create a shareable calendar for the team’s project. The calendar must have the due dates
of the deliverables or tasks with assigned members.. The calendar’s link must be provided
in the Google Sheet file (see Breakdown of Tasks sheet 1- last row).
5. Submit the following to your instructor:
a. Google Sheet link
b. Printed copy from every member (Short bond paper, with the name of the member
in the cover page, all fonts in Times New Roman, and all files clipped in a white
folder)
6. Check the following rubrics for the grading of the Google sheet file and of the printed
copy.
Content All data needed are Lacking data can be Most data needed in the
present which creates a observed in some parts development plan are
clear picture on how the of the paper. missing.
development of the
concept paper will go.
Structure The ideas were The students deviated The students failed to
presented in an from the prescribed follow the prescribed
organized manner, format which resulted format resulting to poor
following the to missing details or presentation of ideas
prescribed format of the data
paper
Total /20
37
Rubric for Scoring Printed Copy
Presentation The output was Missing details were Most of the pages
presented neatly observed in a page of were not printed
following the the paper caused by properly, resulting in
prescribed format. All improper printing of an untidy
pages of the Google the file. presentation of
Sheet file were content.
printed completely.
Content The content of the Some content in the The content provided
printed copy is Google Sheet file in the hard copy is
consistent with those can’t be seen in the far from the version
in the Google Sheet hard copy. of the Google Sheet
file, from the file
breakdown of tasks to
the evaluation.
Delivery The output was The output was The output was
submitted in a timely submitted a little late, submitted more than
manner, with all and/or the papers three days after the
copies for every were not properly due date, and/or not
member clipped in a compiled upon all members were
prescribed folder submission. able to submit a
printed copy.
Total /30
38
LESSON 4
IMAGING AND DESIGN FOR ONLINE ENVIRONMENT
“Color grading is the unsung hero of content creation.”
– Mike Griggs
Experience
Prelection
Directions: Recall a time when you encountered this kind of setting. Share which of the given
image properties you are familiar with and their purpose.
Image Property 1
____________________________
Purpose
____________________________
____________________________
____________________________
Image Property 2
____________________________
Purpose
____________________________
____________________________
____________________________
39
Concept Notes
Staying focused and retaining knowledge in the 21st century may have become challenging
because of the overwhelming amount of information we encounter daily. This includes
information coming from the news feeds of several pages, personalities, groups, and other
sources that we follow online. Getting the spotlight to your content would require more than just
text information. And with the problem of short attention spans of most netizens, using codes
that can be easily interpreted such as images, colors, and other symbols can be an advantage.
Image Manipulation
In Media and Information Literacy, you have learned that an effective visual design depends on
the proper selection and arrangement of design elements. A successful design not only catches
your target audience’s attention, but also inspires or compels them to respond positively.
However, there are instances that creating such designs requires skills on image manipulation.
Among the popular tools used for this purpose is Adobe Photoshop- a commercial graphic design
software that requires a license to be used. To enjoy similar features for free, alternative
applications are also available.
Image Background Removal
There is a growing number of sites that
offer free image background removal. If
you search for “Free image background
remover online” in Google, you can see
a variety of these sites and one of them
is removebg. The website removebg
allows you to upload a profile or model
image and removes the background in
just a matter of seconds. This service is
absolutely free and the site only earns
from the paid ads.
40
● Color saturation
● Skin tones
Color grading includes adjusting the following color properties:
● Brightness
● Contrast
● Temperature
Almost all applications with image and video players have built-in color adjustment settings.
Whether you are working with your smartphone or personal computer, you can perform color
adjustments depending on its model or version.
Canva’s Color
Adjustment Panel
In Canva for example,
you can perform color
grading or color
correction by selecting the
image, and then tapping
on the “Edit Image”
button. This opens the
color adjustment tool
which gives you a long
list of color settings.
Adobe Photoshop as Tool for Complex Color Correction and Color Grading Procedures
However, if the goal is to turn an ordinary image into a stunning photo with the touch of
professional make-up artists, or adding effects to make models look like fictional characters, this
level needs the special features of Adobe Photoshop. TVL and college programs specialized in
graphic design and animation offer legal access and full training on how to use this tool.
Playing with Canva Design Elements
Assuming that the model for your image already looks outstanding after applying color
correction and color grading. The next step is to make it look animated by applying supporting
design elements. While the traditional approach involves creating and manipulating shapes, and
later on adding colors, the process has been made faster with Canva elements tool.
41
and 3D) , cartoons, and more. It also helps you generate ideas in case you don’t know exactly
what would fit your style. Just click on the theme or topic that you’re working on in the search
bar and then it will show you different design ideas that you may be looking for.
If you need designs for graduation, type “graduation” as your keyword. If your target audience is
kids, you can add in your keyword “3D”, or “for kids”. If you need to make your design look
futuristic, you can type “futuristic lines”, or “futuristic” alone.
You don’t also need to limit the size of objects that you apply to the canvas. By adjusting their
size even bigger than the available space, it can result in creative background designs. Just try to
explore with different sizes until you find the perfect fit. Take note that after selecting an object,
Canva elements will show you magic recommendations. These are similar designs that may be
closer to what you are looking for.
Working with Shapes
Shapes are very essential since they are the design elements used to form objects. A combination
of rectangles with different lengths and heights can form an image of a table, door, building, and
more. We also use shapes to box words and ideas so they can become more readable. In imaging
and design for online environments, shapes provide form to layout of websites and other
platforms. Being able to create shapes in different forms and styles is just as important.
Whatever the application, a shape can be easily made using the shape tool. Two components of a
shape that we must have already mastered are fill and outline. Fill is the color that fills up the
space inside the shape while the outline is the line that encloses it. Both are adjustable. The
outline can be adjusted according to its thickness, while the fill can be adjusted in terms of color.
42
Image Frames
There are also instances when photos
framed in certain shapes like in a collage,
are needed in a design. While it normally
takes time to adjust sizes of shapes to fit
into a gallery, a puzzle, and other forms,
Canva allows its users to enclose photos in
certain shapes instantly. This is possible
through its tool called frame. Frame can be
accessed under the elements tool. When
you type the keyword “frame” in its search
bar, the elements tool displays a wide range
of frames to choose from. You can select
frames that will make your photo appear
like a screen in a smartphone or personal
computer, a star, a bubble, a letter, number,
a brush stroke, and more. All you have to
do is click on a frame, and as it appears on
the canvas, drag the photo towards it and
the photo will automatically fill the frame.
Guided/Independent Practice
Background Removal and Color Adjustment
1. Put out your camera phone and then take a photo of yourself in a high angle, medium
shot frame. Make sure to look for a background with only a few details.
2. Upload the photo to remove.bg
3. Open Canva and then create a Facebook post-sized document
4. Upload your cropped image and insert it in the canvas. Scale it to a size that covers the
left portion of the poster.
5. Select the elements tool and then search for “blue background” (you are free to choose
another color). Explore the results and look for a style that best represents you.
43
6. Tap on your chosen image and then drag it to the white or blank space of the canvas until
it becomes the background.
7. Apply color adjustment to your photo so that it would look outstanding and balanced with
the background.
8. Type your name on the right side of the poster with a color contrasting with the
background.
9. Present the result to your instructor.
Reflection-Action
Assuming you have been tasked by your boss to create a peace advocacy poster. What kind of
tone should you apply to the image and background? Why do you think these elements fit the
theme?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Evaluation
Mini PT: Simple Image Manipulation
Instructions:
1. Create a personal profile picture with transparent background
2. Take your photo using a high-angle, medium shot (head to waist)
3. Before removing the background, enhance the image using appropriate color adjustments
4. You must be in complete uniform in the image
5. Upload the image in a Google Drive folder of your group dedicated for profile photos of
members
6. Submit the link to the drive to your instructor
Rubrics for Grading the Digital Output
44
Color The color Either too much color The final result is far
Adjustment adjustment applied adjustment was from the intended
suites well the applied or a little output
image more is needed
Total /20
Written Work
Color Adjustment Values (20 points)
In size 1 paper, provide the values applied for each of the color adjustments and their effects to
your profile image (include those properties whose value must remain at zero):
1. Brightness
2. Contrast
3. Saturation
4. X Process
5. Tint
6. Warmth
7. Vibrance
8. Highlights
9. Shadows
10. Fade
45
LESSON 5
DEVELOPING AN ICT PROJECT FOR SOCIAL CHANGE
“If your business is not on the internet, then your business will be out of business.”
– Bill Gates
Experience
Prelection
Let’s Watch!
Direction: Please visit the provided links and watch them. Take note of some key points you
might acquire from the video and answer the following questions below.
Link A: https://bit.ly/TheImportanceOfPlanning
Link B: https://bit.ly/EverythingAboutWebDesign
1. What are the 7 Phases of Web Design? How will these help in the process of creating a
website or web application?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. Do you think we should follow the Phases of Web Design to be able to create an effective
one? Why or Why not?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
46
Concept Notes
They say, having a concrete plan will never get you in trouble but the question is how far can a
plan save you in times of trouble? Have you ever wanted to provide a solution to some social
issues like traffic, waste management, poverty, lack of education, and many more?How are you
going to make these ideas turn into action? What can be done? “Everything starts with a plan”
according to the lyrics from Helpsters. However, does everything really start with a plan?
According to Jose Curiel (2017), “Both emotionally and professionally, planning is crucial. It
aids in the accomplishment of our objectives and permits the more effective use of time and
other resources.” On average, a person has over 6,000 thoughts every day ( Tseng & Poppenk ,
2020). Now imagine if half of those thoughts are good ideas, how can we convert these ideas
into reality?
Software Development Life Cycle (SDLC) refers to a technique for producing high-quality
software that includes well-defined procedures.Until the project's goals are met, collaboration is
essential to keep everyone on track and doing their assigned tasks in accordance with the SDLC
procedure. According to the level of development, other tools can be required, nevertheless.
In this section we will review more about the most popular possible collaboration platforms that
can be used in every stage of SDLC processes.
47
Wordpress Enables team members to https://wordpress.com
design a website with high
compatibility.
Maintenance Application for Enables the team members to See links under
design and keep their assigned works design and
development updated from time to time. development
According to Mbaabu (2021), software development benefits from the system development life
cycle in the following ways: 1) It offers a useful methodology and structure for creating software
applications, 2) It facilitates successful planning prior to beginning real development. SDLC
enables developers to assess the needs, 3) It assists in cutting wasteful development
expenditures. Developers can identify expensive errors and estimate expenditures during the
early stages, 4) It makes it possible for developers to create top-notch software applications. This
is due to the fact that they adhere to a well-organized approach that enables them to test the
software before it is released, 5) It offers a foundation for assessing the software's efficacy. This
improves the software product even more. Professionals nowadays employ a variety of SDLC
models to help them with their project-based work. Below are some examples of SDLC models.
1) Waterfall Model
48
2) Agile Model
3) Iterative Model
49
These SDLC models can be used depending on the objectives and serves as a conceptual
framework outlining every step of the software development process, from planning to
maintenance. This is very useful particularly if you want to achieve a higher success rate for the
project that you will develop.
Now that we have already gained understanding about the SDLC processes and model. In this
section, we will learn more about the development stage and how we can develop a project that
we have planned out. We already know that this stage is where we transform our designs into
reality. The source code is guided by the design document specification. Since, we already
discussed in the previous lesson about content development roles, we will now dive into a deeper
understanding and focus of what is the role of a developer and what are the types of developer; A
software developer may participate in project management, design, or computer programming.
As opposed to component-level or individual programming activities, they could contribute to
the project's overall picture at the application level. The following are the types of web
developer;
1) Front-end Developer - The component of websites and online apps that users actually
view and interact with is built by front-end developers. Using web languages like HTML,
CSS, and JavaScript, a front-end developer constructs websites and apps that people can
access and interact with.
2) Back-end Developer - The developers that create and manage the systems that handle
data processing and carry out operations on websites are known as back-end developers.
Back-end developers are involved in server-side tasks that you cannot see, such as data
storage and security, in contrast to front-end developers who are in charge of everything
you can see on a website.
3) Full Stack Developer - Complete websites and online apps may be created by full stack
web developers. They work on online applications' front ends, back ends, databases, and
debugging.
There are several programming languages available for front-end and back-end.
For Front-end development we will utilize HTML a mark-up language, CSS a styling sheet
language, and Javascript a scripting language. Take note that Javascript can be used as front-end
and back-end development. It can create scalable network applications that can handle several
concurrent user requests (Fowler, 2021).
So are you ready and thrilled to learn how to code? Let us learn together the basics of HTML,
CSS, and Javascript. But before jumping into the exciting part as they say, let us first define and
discuss the core concept of these topics .
What is HTML?
HTML stands for Hypertext Markup Language. It defines the structure of a web page and is the
industry standard markup language. It is made up of a number of components and instructs the
browser how to render the content (Introduction to HTML, n.d.).
50
You might feel overwhelmed at first but let us try to examine this one by one.
This is called HTML tag. <p> which is encircled in color yellow is the opening tag while the
“This is my first Web Page” is the content. Content may be in the form of plain text which is
present in the example above or in the form of image; and </p> which is also encircled in color
yellow is the closing tag. Every tag has its opening and closing tag. Take note the closing tags
have forward slash ‘/’. We will discuss each tag from the simple example HTML document
given above. For now take a look at this web page output.
51
<html> - this element is the HTML page's primary element.
<head> - this element stores metadata about HTML pages.
<title> - this element provides the HTML page's title (which appears in the browser's title bar or
the page's tab). As observed in the web page output, the title of the page is “Page Title ”.
<body> - this element is a container for all the information that can be seen, including headers,
paragraphs, pictures, hyperlinks, tables, lists, and so forth. It also defines the body of the page.
<h1> - Using the h1 element, a large heading is defined. “Hello World” is inside the <h1> tag
this only means that it is set to be in large size compared to other text that has been defined in the
line of codes for example the <p> tag or paragraph tag, as you may have noticed the text inside
the paragraph is smaller than the one inside the <h1> tag.
<p> - This element defines the paragraph.
These are called elements, as mentioned above it starts with an open tag and a closing tag.
This table below will make you understand more about html tags.
HTML TAGS
For example:
This example is from w3schools.com. To explain, the distinction between opening and closing
tag is only the forward slash ‘/’. Once it has its forward slash therefore it is a closing tag.
However, note that there are also some tags that do not need a closing tag and these are called
“Void Elements of Singleton Tags ”. The <br> or break elements, this element do not need to
have content and closing tag as this function is to produce a line break in text. Next, <img> tag
or image tag is used to insert an image in a document. This tag does not also need to have a
closing tag and many more.
Web Browsers
Chrome, Edge, Firefox, and Safari are all web browsers that have the ability to read and correctly
display HTML content. The HTML tags are not visible in a browser, but they are used to decide
how to display the document. Below is an example of displaying HTML content in a web
browser specifically Microsoft Edge;
52
Web Tools
The most common web tool or text editor for creating and editing text files is Notepad which is
present in almost any Windows computer or laptop that we have. For Windows, Press the
Window Key on your keyboard and search “Notepad”. However, For Mac users, you may Open
Finder then Applications and you will finally see the TextEdit. You have to change the
preferences to save HTML files correctly. In Preferences > Format > choose "Plain Text" and
check the box that says "Display HTML files as HTML code instead of formatted text" under
"Open and Save".
There are other text editors that most of the web developers use for example Notepad++,
Brackets, Visual Studio Code, Sublime, and many more. To have a unified tool, we will be going
to utilize sublime throughout the development phase.
Sublime
A cross-platform shareware source code editor is called Sublime Text. Numerous markup and
programming languages are supported natively. Users can increase its capabilities by adding
plugins, which are often created and maintained by the community under free software licenses.
You may download sublime through this link: https://www.sublimetext.com/
If everything is set-up, let us try to learn together. Go and head through the text-editor (Sublime).
53
Now, we have all the entire space to fill out with html tags or elements. The goal is that we can
play around with tags. There are actually many elements to consider in making a webpage. It is
okay to feel confused at the moment but we can organize these things by learning the what and
whatnot of an HTML. One method of explaining to the browser the what, where, when, and how
of delivering the webpage is through the use of hypertext markup language.
54
You might notice that we played with the header tags. These header tags are used for defining
HTML headings. <h1> tag is the largest tag while the <h6> tag is the smallest head tag. You
may use this in your future projects particularly if you are dealing with the heading part. As for
now, take a look at these other examples of HTML tags below.
55
OTHER EXAMPLES OF HTML TAGS
Tag Description
Did you enjoy the HTML fun? There are more tags that we use in developing a web page using
HTML but it is up to you now to explore more about HTML. Moving on, let us try to spice up
our web page with Cascading Style Sheets (CSS) .
We style an HTML document using CSS. CSS outlines how HTML components should appear.
With the help of CSS, you can apply consistent styling to components across all pages of your
website, ensuring that all headers, lists, and paragraphs appear and function uniformly.
56
There are 3 ways of adding CSS to HTML Documents. Below are the ways and examples;
1. Inline CSS - when styling a single HTML element, an inline CSS is utilized. An HTML
element's style property is used by inline CSS.
Inline CSS
The example that we use above is the one that we develop in HTML in the previous section.
As you can observe, a style tag is present. This is due to the reason that style tag is
commonly used in styling our document. A CSS consists of a selector and a declaration
block. Take a look at his example below.
57
CSS Syntax
The selector is the specific tag or element that we want to style. What should be styled for the
targeted HTML components is specified by the CSS properties just like for example the color,
font-style,font-family, font-size, and many more while the value is set against the property same
as the example above. On the other hand, CSS declarations are used to create rules that may be
applied to specific components or groups of elements, as well as to specify style attributes. Thus,
the example above from the style tag up to the closing angle bracket is what we call the CSS
declaration.
2. Internal CSS - A style for a single HTML page is established using an internal CSS. A <style>
element in the <head> section of an HTML page contains the definition of an internal CSS.
Internal CSS
58
Internal CSS Web Page Output
What did you notice? Well, it’s obvious that the example output from the inline CSS is
the same as the output of internal CSS. Guess why?
To explain, we actually utilized the same file and had some small modifications. The
<style> element is present after the opening tag of <head> element. If you want to use
internal CSS, the format should be the same as the given example above. We put the
selector that we want to style inside the <style> element as for the example our selector is
the <h1> and <p> element or tag. You must have also noticed the opening and closing
brackets after the selector. Basically, internal CSS has a little tweak when it comes to the
syntax . It must have opening and closing brackets as well as the semicolons ‘;’. Now, if
we have the selector that we want to style we can now add properties and a respective
values for each. Again, every after declaration of property and value you must end it
with a semicolon. You may use the figure above as your reference when you want to
explore more about internal CSS.
3. External CSS - Many HTML pages require an external style sheet to specify their look. Any text
editor may be used to create the external style sheet. The file must be saved with a .css extension
and cannot include any HTML code.
59
External CSS HTML File
60
As you observe, in the external CSS we created two (2) files , one is an HTML file which is
named MyFirstWebPage.html and the other one is a CSS file which is named style.css. We need
to take note that when we choose the external CSS method we should create a separate file for
CSS. As you can see, we also added a new tag which is the <link>. The relationship between the
current document and an outside resource is specified using the <link> element. The <link>
element serves as a communicator of HTML and CSS. It is advised to use external CSS,
especially in practical applications where a developer must deal with several HTML codes. This
has the benefit of being simple to work with and making things appear even more structured.
Take note that all of these methods produce the same outputs. Sometimes it depends on the web
developer which method they are comfortable to work with. You can also use all of these
methods in one project. Now, to be able to create an interactive webpage we also need to learn
about Javascript and how it works.
What is Javascript?
JavaScript is a programming language that allows you to do just about anything else, including
creating dynamically updated content, managing multimedia, and animating graphics.JavaScript
adds interactive aspects to web sites that keep users interested. Let’s look at this example and try
to practice by copying the code below.
Before copying the code, download these images from this link
(https://bit.ly/MyFirstJavascriptContent) and save it in the Documents folder. Name your file as
MyFirstjavascript.html and save it in the Documents folder. We can save it anywhere however
for the practice purposes, you may follow the same as the example below. Note that in every web
content or material that we will be going to use in developing an HTML document, we must save
it in the same location or folder in our computer. You might be wondering now why we did not
save our file as a javascript or .js extension. This is due to the fact that we are not using external
js. Remember the CSS methods? JS can also follow the same methods. As for this example, we
will create an internal JS.
After copying the code from the image, you may try to open the file on your preferred web
browsers and try to check and explore it out if we have the same output (see Javascript
Implementation in HTML Document).
61
Example of Javascript Implementation in HTML Document
62
Javascript Implementation Web Page Output
63
Done exploring? What did you notice? Did the door open? If yes, congratulations and way to go!
To explain how it happened, take a look at this picture below.
64
The first thing that you will notice when opening the file from your browser is the closed door
and probably the buttons. We set our default image to “close.jpg” that is why when we first run
the code the door is still closed.
We set the width and height of the image to 100 pixels. We also provide an ID name for it and
that will be used for changing the closed door to open. Basically, what we want to do here is just
to change the close door image to open door image. After the <img> tag, we have our two (2)
buttons; 1) Open the Door Button and 2) Close the Door Button.
We already know that the button type is still the button itself. Now, what is onclick? Onclick
event is used for executing the javascript. This will occur if the user clicks on the button. This is
what triggers the closed door to open or in other words the function to change the image
The function keyword is used to define a JavaScript function, which is then followed by the
function's name and parenthesis (). Function names may also include underscores, dollar signs,
and other characters . Names of parameters may be included in parenthesis and separated by
commas:(paramater1,parameter2…). Curly brackets {} enclose the code that the function will
execute.The function definition lists the function arguments between parentheses (). When a
65
function is called, values are sent to it as arguments. The arguments (the parameters) operate as
local variables within the function. To explain how it works, when the user clicks the button, it
will call the function and pass the parameter. In the example above, our parameters are set to
“true” when we click the “open the door button” and “false” when we click the close the door
button. Every time we click the buttons , it passes a value which is either “true” or “false”.
That’s a lot of fun-filled learning coding activity. To summarize, HTML, CSS, and Javascript are
the three main languages we use to build a website. The programming language is JavaScript,
HTML is used to organize the website, and CSS is used to style and layout the web page.
However, CSS is now much more than just a design language.
66
Guided/Independent Practice
Directions: Create a simple profile of yours using HTML and CSS code. The information should
contain the following: Name, Age, Grade and Section, and a 3-liner sentences about yourself.
The output should be similar to the reference below.
Reflection-Action
Think, Feel, Share!
Directions: Read and understand the questions. Write your answers on the space provided, at
least 3-5 sentences.
1. Recall a time when you thought of developing an ICT project, what kind of ICT project
did you want to create ? Do you think this can help the community?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
2. In your own opinion, how can technology help solve social issues in the Philippines?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
67
Evaluation
ICT for Social Change Concept Paper
Performance Standard
Collaboratively develop an online portal or website to showcase and share existing and
previously developed content. This may be in the form of, but not limited to: 1. Online
newsletter, 2. Blog, and 3. Issue online “magazine”.
GRASPS
Your goal is to identify a problem relevant to your field of work
G OAL that arises from a communication gap, and conceptualize an
online content or platform that can address this problem.
● Relevance
● Use of ICT Tools
S TAN DAR D ● Collaboration Plan
● Originality
● Clarity
68
RUBRIC FOR SCORING
Criteria Accomplished (20) Acceptable(15) Promising(10) Developing (5)
Relevance The project idea has The project idea The project idea The project idea
a huge potential of has a potential to has considerable doesn’t meet
addressing an address the level of positive the concept
existing problem in situation presented impact to the needed
the students’ future in the students’ problem
field of work future field of work
Feasibility The project is Minor revisions are Major revisions The entire
doable within the needed to to make are needed to execution plan
available time frame the project doable make the project needs to be
and resources as within the available doable within the changed
time frame and available time
resources and other
resources
Clarity All ideas were A few thoughts in The students Most of the
perfectly presented the concept paper could further ideas presented
needed clarification explain their in the paper
thoughts needed
clarification
GUIDELINES
1. Main task. With your group, create a concept paper for an online application (website)
that can help address a problem related to your future field of work. The final output
which will be developed in the Final Term shall be in the form of a website.
2. Format. The content of the Concept Paper should include the following (see the
succeeding pages for a sample layout):
a. Name of Online Service
b. Online Service Description
c. Requirements analysis
d. Product design
e. Testing plan
f. Maintenance
See the next page for a sample layout.
3. Product Ideas. The product that will be conceptualized must be aligned to your strand.
See the succeeding pages for a list of product ideas.
69
Layout
70
UNIT II
ICT FOR SOCIAL CHANGE
“Like all technology, social media is neutral but is best put to work in the service of building a
better world..” - Simon Mainwaring
CONTEXT
LEARNING COMPETENCIES
At the end of the lessons, the learners can:
1. Share anecdotes of how he/she has used ICTs to be part of a social movement, change, or
cause to illustrate aspects of digital citizenship
2. Identify a local or regional cause or issue for Social Change related to specific
professional tracks that can be addressed or tackled using an ICT Project for Social
Change
3. Analyze how target or intended users and audiences are expected to respond to the
proposed ICT Project for Social Change on the basis of content, value, and user
experience
4. Develop a working prototype of an ICT Project for Social Change
5. Demonstrate how online ICT Projects for Social Change are uploaded, managed, and
promoted for maximum audience impact
6. Generate a technical report interpreting data analytics, e.g., Google, Facebook, or similar
traffic data on the general aspects of search visibility, reach, and virality
7. Generate a report on the performance of their ICT Project for Social Change on the basis
of data gathered from available monitoring tools and evaluating techniques
8. Create a reflective piece or output using an ICT tool, platform, or application of choice
on the learning experience undergone during the semester
VALUES INTEGRATION
Competence and Compassion
71
LESSON 6
PUBLISHING AN ICT PROJECT
“Your website is the window of your business. Keep it fresh, keep it exciting.”
– Jay Conrad Levinson
Experience
Prelection
Direction: Watch the videos from the link below and answer the questions that follow.
Video A: https://www.youtube.com/watch?v=dRohObPFFSA
Video B: https://www.youtube.com/watch?v=av2CL4nusg4
1. According to Video A, what is the difference between CMS and Website Builders?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
2. What strikes you the most about Video B?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
Concept Notes
Now, the idea of yours is starting to become a reality. You are already done identifying , planning
, and developing. This stage is where we will step one even closer to that reality. In this lesson,
we will learn how to publish an ICT Project.
Have you ever wondered how websites are being uploaded and published so that users can easily
access? It may have crossed your mind once, twice or probably never but let us discuss them one
by one.
Publishing an ICT project is a bit confusing especially if you are a beginner. There are many
things you need to know and to consider before uploading them. 1) You have to select your
publishing option. After that, you have to consider your skills. If you are into web developing,
probably you can code a website on your own using (HTML, CSS, and JAVASCRIPT) or maybe
72
you can hire one. 2) Look into Website Builder – there are websites that are actually free and
most of them fast, easy, and cheap. You can create your own website by dragging and dropping
items to generate a simple interface. 3) Maybe the Content Management System (CMS) is for
you – CMS is somehow the same as a website builder but is more complex. CMS is a piece of
software that aids in the creation, administration, and editing of website content. 4) Good news
is you can do a combination of CMS and your own coding. Many websites are created
utilizing a CMS and code combo. In this manner, the website may be created and any substantial
design or functionality adjustments can be made by a professional web developer, but activities
like adding new blog entries or changing out photos will be simple for anybody to complete.
Knowing all of these will lead you to preparations. These are the things you need to prepare
before publishing an ICT project:
1) Website Content - Whatever platform you choose to develop your website with, the material
you post there will determine whether it is a success or a failure.
It's ideal to have a content strategy in place before you start designing the website. You don't
need to plan out every subject your blog will cover, but you should know what the main pages
will be about. With that being said you have consider these guided questions;
a) What is the focus of your project? Who is your target audience?
b) What is the name of your project?
c) What images or videos will you use in your project?
d) Have you mapped out all your content?
2) Layout and Design - Interface captures audience attention. It gives a clear picture of what the
website is all about. If the interface is very user-friendly, the audience will most likely visit it.
3) Find a Web Hosting - According to namecheap.com, web hosting is the act of leasing or
purchasing space on the World Wide Web to house a website. To be seen online, website material
including HTML, CSS, and pictures must be stored on a server . Use one of the well-known
hosting services, like GoDaddy or HostGator, as your initial option.
4) Publishing your website - this is where your creation will be visible to the world. There is
just one thing left to do if you have already designed and constructed your website, bought your
domain name, set up web hosting, and tested it with a preview group. Press "Publish" to go live.
With all of the information you have just read, maybe you are wondering now what platforms
can we use in uploading and publishing your ICT Project. To stop wondering, here are some
examples of the platforms you can use when uploading and publishing an ICT project.
73
1) WORDPRESS
You may create a website using WordPress.com that suits your specific requirements. Create a
blog, company website, online store, portfolio, or anything else you can think of.
There is no restriction on who you may reach with your new website thanks to built-in
optimization and responsive, mobile-ready designs. You may either build a straightforward
website for your family or sell goods globally.
74
High-end Enterprise Performance Management (EPM) software like Microsoft Office Project
Server enables businesses to oversee and manage resources across the whole organization. It
helps project teams collaborate and manage their deliverables and project documents.
3)WEBSITE MANAGEMENT - The group of procedures used to make sure your website is
expert, current, and operating as intended is known as website management. It includes
coordinating your content distribution and marketing plan, as well as general website upkeep,
security, and long-term development.
Examples of Web Management Platforms:
1) Wordpress
You may host and create websites using the content management system (CMS) known as
WordPress. WordPress has a template system and a plugin architecture that allow you to
personalize any website to meet your company, blog, portfolio, or online store.
75
2) Google Sites
You may easily construct and publish new websites using the simple website-building
tool known as Google Sites.
3) Drupal
Even those without technical knowledge may construct and administer a variety of
websites with the help of Drupal, which is a free and open source piece of software. A
content management platform and a development framework are included in the program.
76
4) Weebly
An easy-to-use website builder with a free option is Weebly. It allows you to construct and
publish websites, blogs, and online shops with appealing, responsive designs, but it lacks
additional themes and a superior picture library. Independently chosen and reviewed goods by
PCMag editors.
These are some of the many website management tools that we can use. If you were able to get
the definition and their functionality perhaps we can move forward with the steps on how to
publish an ict project using Weebly.
77
2. After signing up, this is
the next interface that you
will see. There are many
themes available, click on
the “Blog” Category. We
will be making a Blog.
3. After clicking the “Blog” category you will be able to see the different themes under Blog.
Choose the first one and click the “Start Editing”.
3. You will be prompted by this one after clicking the start editing button. Disregard this and
click the ‘x’ icon at the left top.
78
4. This is the main page where you will start editing. On the left panel, you will see the
‘Elements’ you want to add in your project. At the top, these are some advanced settings for your
website, you may try to explore it. The upgrade and publish at the right top will be discussed and
used later. For now, try to change the titles by clicking “The Ultimate” then change it to “Your
Name” and “Discovery Guide” to “Blog”.
5. After clicking the background image, you will be able to see the “Edit background” option,
click it. After clicking, you will be prompted with edit options again click the “Replace” button.
Search for a banner size photo and then upload it. You may try to search on unsplash.com or you
may try to select a photo from options given.
79
6. After uploading the
photo, you will be
prompted by this
interface. Click the
“Save Button”
If you have done it
perfectly, by now you
are able to see the
changes with the
background photo.
80
7. Since, we do not have a blog post yet. Let us create one by clicking the “ New Post” button.
9. Now that you already have a post title and the text and image element you can now post it.
Click the “Post” button at the right top.
81
10. If you are able
to do it correctly,
this should be the
output by now.
Assuming, we are
done editing. Let
us now publish it
so it will be
accessible online.
82
12. After clicking choose, you will be
prompted by this interface and you
will see the domain name. You will be
able to see your published blog site
after you click the “Publish ” button
again and you will be prompted that
the website is already published. Click
the link and there you will see your
published blog site.
83
13. CONGRATULATIONS! You did a great job. You were able to publish a blog site of yours.
84
Guided Practice
Direction: Continue and edit the Blog Site you created beforehand. Create a new post and talk
about your “Experiences as a Senior High School Student''. Include other elements such as;
Videos, Buttons, and Gallery. After that, publish it again to save changes.
Reflection-Action
Pair and Share!
Directions: Read and understand the questions. Write your answers on the space provided, at
least 3-5 sentences.
1. If you are given a chance to publish your own blog site in the future, what topics would
you like to cover? Who are your possible or target audience?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
Evaluation
1. ICT for Social Change PT: Using your chosen website management tool, create the
interface of the website in your concept paper. Create a webpage for each of the functions
or features with a link to the homepage.
2. Create a documentation paper on all steps taken by the group in carrying out this process.
85
Structure All webpages are Some of the All webpages are
properly labeled, webpages are not not properly
linked and properly labeled, labeled, linked, and
arranged. linked, or arranged. arranged.
Functionality All links to the A few broken links All links are not
webpages are were observed in working
functional the site
Total / 40
Delivery The output was The output was The output was
delivered delivered with a delivered
completely as little unnecessary unnecessarily far
instructed, and in a deviation from the from what was
timely manner. instructions. instructed.
Total / 30
86
LESSON 7
SUSTAINING AN ICT PROJECT
“By failing to prepare, you are preparing to fail.”
– Benjamin Franklin
Experience
Prelection
Direction: Carefully observe the similarities and differences between Youtube and Facebook’s
User Interface and the button functions. After that, answer the following questions below on the
space provided.
87
Concept Note
Sustaining an ICT Project is one of the most important things that a creator or developer should
always prepare for. There will always be a possibility for changes particularly with the demands
of the users. Now, if this will happen, your project must be able to cope up and embrace these
changes. If the creator or developer is not ready for this the project would likely fail.
Managing an ICT project is never easy. There are many things to consider before, during, and
after publishing the project. Hence, these are the management that needs to be strengthened:
Change Management and Request Management.
Change Management. By doing this, it will be possible to handle any changes in an effective
manner by using standardized processes and procedures. Any occurrence that alters the state of
one or more configuration elements is referred to as a change.
Request Management. This focuses on addressing service requests, which are frequently little
adjustments (such requests to alter a password) or inquiries.
2) Web design is essential - stay up to date with the latest design because it affects how
your audience views your brand, web design is crucial. The first impression you provide
them will determine whether they stay on your website to learn more about your
company or whether they click to a competitor's page instead. You can keep leads on
your website longer with the aid of effective web design.
3) Links should be updated regularly - navigations from one button to another should be
easily accessible. The more user-friendly it is, the more they will use it.
4) Customer Service - replying to inquiring customers and handling complaints quickly can
build a good relationship with a customer. Customers always want to be heard.
88
This illustration is from Weebly.com, this is a sample summary of a project. This is where you
can view, compare, and read your data in the past months or days. In Weebly, data is
comprehensible at first glance because it is already clean and organized. When you already have
your project published, you can now monitor this by viewing the summary. Now , if your data is
unorganized and you want to analyze them. These are the things you have to consider according
to Will Hillier (2022);
1) List down all of your objectives. What are you trying to accomplish? Do you want to
know the trends of your project? Do you want to know how many times they clicked the
link to your project?
2) Collect your data - Choosing the data you require is a crucial component of this. These
might be qualitative (descriptive) data, like customer reviews, or quantitative (numeric)
data, like sales numbers. First-party data, second-party data, and third-party data are the
three categories into which all data falls.
a) First Data - Data that you or your business directly obtained from clients are
known as first-party data. It might be information from your company's customer
relationship management (CRM) system or transactional monitoring data.
b) Second Data - You might wish to obtain a secondary data source to enhance your
analysis. The first-party data of other organizations is referred to as second-party
data. This could be accessible directly from the business or via a closed market.
c) Third Data - Data that has been gathered and combined from various sources by a
third-party entity is referred to as third-party data. Third-party data frequently (but
not always) includes a substantial quantity of unstructured data pieces (big data)
3) Clean the Data - The next step after gathering your data is to prepare it for analysis.
Making sure you are dealing with high-quality data requires cleaning, or "scrubbing," the
data. These includes;
a) Removing duplicated data and errors.
b) Removing unwanted data
89
c) Structure your data
d) Fill out all the missing gaps
4) Analyze your data - Your aim will have a significant impact on the sort of data analysis
you perform. But there are a lot of methods out there.
a) Descriptive Analysis - What has previously occurred is identified using
descriptive analysis. It is a typical first action that businesses do before moving
forward with deeper studies.
b) Diagnostic Analysis - The goal of diagnostic analytics is to determine why
something occurred. In the same way that a doctor utilizes a patient's symptoms to
diagnose a sickness, it is literally the diagnosis of an issue.
c) Predictive Analysis - Based on previous data, predictive analysis enables you to
pinpoint potential patterns for the future. Predictive analysis is frequently used in
business to, for instance, project future growth. But it goes farther than that. In
recent years, predictive analysis has advanced significantly. Organizations may
now provide unexpectedly accurate projections because of machine learning's
rapid development.
d) Prescriptive Analysis - With prescriptive analysis, you may suggest changes for
the future. The process's final step in the analytics section is this. It is also the
most difficult. This is due to the fact that it includes elements from every previous
analysis we've discussed.
Now, if you want to learn more about Data Analytics, watch this video
https://tinyurl.com/DataAnalysisProcess. If you want some data samples to analyze, search
kaggle.com. Kaggle offers numerous datasets to explore and analyze.
90
Guided Practice
Direction: Head on to your published blog site from the previous activity, go to the summary
and try to analyze the data. Create an interpretation out of the data you acquired.
Reflection-Action
If you are going to own a known and useful website in the future and you want this website to
maintain its relevance, engaging content, and attractive visual assets, what type of analysis will
you utilize on your website data to help maintain and sustain its current standing?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Evaluation
In your website, input the information needed in every webpage (conduct interviews with
prospective clients for verification of information). Once complete, publish it and then have it
tested by at least 10 users. Provide a written report that details the development process, the
contribution of every team member, and the analytics after the testing phase. The template below
can be used for the report (print one checklist per person).
Website Testing Sheet
91
Rubric 1 (Performance Task: Testing Plan Execution)
Site Content Expected contents are Some pages don’t contain Most pages are still
present in every the expected content. empty.
webpage.
Functionality All functions were Some functions were Most functions were not
tested and necessary missed in the testing included in the testing
updates were process. phase.
identified.
Analytics The number of views Little consistency was A big gap can be
generated by the site is observed in the analytics observed between the
consistent with the of the site compared to number of views and the
actual number of the actual number of actual number of persons
persons who tested the people who tested the who tested the site.
site. site.
Delivery The output was Some instructions were Most instructions were
delivered completely not followed in the not followed, resulting in
as instructed. execution process. poor output.
Functions All functions were Some functions of the There are several
detailed in the testing site were missed in the functions missing in the
sheet testing sheet testing sheet
Feedback The number of tests A few missing data were The team failed to obtain
required was met. All observed. several data from the
needed data was sample users.
provided.
Delivery The output was delivered Some instructions were Most instructions were
completely as instructed. not followed in the not followed, resulting in
execution process. poor output.
92
LESSON 8
ICT, THE SELF, AND THE SOCIETY
“The web, as I envisaged it, we have not seen yet. The future is still so much bigger than the
past.”
-Tim Berners-Lee
Experience
Prelection
2. What are some things that you discovered about yourself while going through this course?
How did you take it?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Concept Notes
In your subject Media and Information Literacy, you have learned how the evolution of media
gave way to the development of the current state of information and communication technologies
that we are now enjoying. Unlike in the past decades, people today already have the capacity to
communicate with almost everyone around the world in just a few clicks. Our greater access to
ICT tools enable us to produce more outputs at a lesser cost. Creating information has also
become more engaging to target audiences in the presence of digital manipulation platforms.
Most importantly, societal problems related to lack of communication channels have become
more possible to address.
On the other hand, the evolution of ICT also opened doors of opportunities for the bad elements
of society to advance their unlawful activities such as the use of the internet in stealing, in
spreading fake news, and in corrupting young minds with bad ideologies. In this subject, you
have learned the concept of netiquette, as well as the importance of practicing online safety
habits. You have also learned how to use the modern ICT tools in becoming more productive and
93
efficient in your daily life. This subject also presented ways on how you can be an agent of
change by applying your acquired knowledge and skills in the use of empowerment technologies.
Guided Practice
Group Activity: Illustration
Direction: On a piece of manila paper, illustrate the morals that you have learned in this
subject and its importance to the society.
94
Reflection-Action
Direction:
How will you compare yourself today from how you were at the start of this subject?
What are the positive and negative experiences that you had? How do you think this
will impact your future?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
_____________________________________________________________________________
Evaluation
Blog Post
In your blog, create a post that explains your illustration. Each member must share his or her
thoughts in not less than 5 sentences. Each member must also submit a printed copy of their
content in one short bond paper.
Rubric for Scoring
Content The content provides The idea is there but The student needs to
what exactly is being can still be give attention to
asked from the expounded. what really is asked
student. in the assessment.
95
Depth The content shows There were some The student needs to
deep analysis of the important aspects of learn how to see the
learning experience the learning topic in a deeper
of the subject. The experience that the perspective.
student was able to student missed to
share a meaningful consider.
realization about its
importance.
Collaboration The student was able The student was The student needs to
to demonstrate traits observed to be learn how to become
of a good team unresponsive at a good team player.
player towards the times, although
success of the he/she was able to
group’s project. make it up.
Total /30
96
Grand Performance Task
ICT for Social Change Presentation
Performance Standard
Independently and collaboratively co-manage an online ICT Project for Social Change through
available tools, resources, and platforms.
GRASPS
Your goal is to be able to present to a panel of judges a
G OAL functional online platform that you developed out of your
concept paper.
● Content
● Functionality of the platform
● Layout
S TAN DAR D
● User-friendly features
● Mastery
● Delivery
97
GUIDELINES
98
References
Brandner, R. (2020, April 9). Now You Can Mind Map in Microsoft Teams, Using MindMeister! Focus
Productivity and Creativity Blog.
https://www.mindmeister.com/blog/meister-news/2017/09/19/mind-map-microsoft-teams/
Color Correction vs Grading: What Makes Them Different? (n.d.). Real Art Daily Productions.
Retrieved September 22, 2022, from
https://radprod.com/blog/color-grading-vs-correction/
Dropbox Team. (2019, June 11). Product Tips Meet the New Dropbox. Work In Progress.
https://blog.dropbox.com/topics/product-tips/new-dropbox
Empowerment Technologies Module: Sustaining ICT Project for Social Change • DepEd
Tambayan. (n.d.). DepEd Tambayan. Retrieved September 24, 2022, from
https://depedtambayan.net/empowerment-technologies-module-sustaining-ict-project-for-soci
al-change/
Etchegaray, E. (n.d.). Scale & Proportion. Pinterest.
https://www.pinterest.ph/elsieann1398/scale-proportion/
Flashman, J. (2021, August 23). How To Set Up Market Segmentation And Make More Money.
ReferralCandy. https://www.referralcandy.com/blog/what-is-market-segmentation/
Google Support. (2021, August 06). Drive UI integration overview. Google Drive for Developers.
https://developers.google.com/drive/api/v3/about-apps
99
HILLIER, W. (2022, February 28). A Step-by-Step Guide to the Data Analysis Process [2022].
CareerFoundry. Retrieved September 24, 2022, from
https://careerfoundry.com/en/blog/data-analytics/the-data-analysis-process-step-by-step/
Hurst, A. (2018, June 21). Unity, Harmony, and Variety – Principles of Art. The Virtual Instructor.
https://thevirtualinstructor.com/blog/unity-harmony-and-variety-principles-of-art
Jessie. (2021, August 26). Harry Potter Streaming | Watch Harry Potter on PC/Smartphone/TV [YouTube
Download]. toptechSoft. https://toptechsoft.com/watch-harry-potter
John Giles (2018). “What is ICT? What is the Meaning or Definition of ICT?”. Retrieved at
https://www.michalsons.com/blog/what-is-ict/2525
Lee, D. (2015, July 15). Twitter desktop redesign adopts some of its mobile app’s best features.
THEVERGE.
https://www.theverge.com/2019/7/15/20695120/twitter-desktop-redesign-dark-mode-mobile-features
n.d (2018).Web 1.0, Web 2.0, and Web 3.0 with their difference.
https://www.geeksforgeeks.org/web-1-0-web-2-0-and-web-3-0-with-their-difference/
Nediger, M. (2020, June 25). What is an Infographic? Examples, Templates & Design Tips. Venngage.
https://venngage.com/blog/what-is-an-infographic/
Nel, F. W. (2013, May 21). FLICKR INTERFACE REDESIGNED WITH MODERN LOOK. ORMS
Connect. https://blog.ormsdirect.co.za/flickr-interface-redesigned-with-modern-look/
Pain Pix. (2015, June 23). Chiropractic Care During Pregnancy. Flicker.
https://www.flickr.com/photos/pain-pix/18900586300/
100
Prihananto, E. (n.d.). Video Editing App Icon Vector Pro Vector.
https://www.vecteezy.com/vector-art/120975-video-editing-app-icon-vector.
Rainey, K. (2015, October 29). 15 Ways the International Space Station is Benefiting Earth.
https://www.nasa.gov/mission_pages/station/research/news/15_ways_iss_benefits_earth/
Soegaard, M. (2020, September 01). Repetition, Pattern, and Rhythm. Interaction Design Foundation.
https://www.interaction-design.org/literature/article/repetition-pattern-and-rhythm
Spencer, L. (2019, May 20). 18+ Best PowerPoint SlideShare Presentation Examples (For 2019).
Envatotuts+.
https://business.tutsplus.com/articles/best-powerpoint-slideshare-presentation-examples--cms-29365
Tan, L. (2020, June 19). 15 Tips and Tricks to Master Prezi Presentation Software. Hongkiat.
https://www.hongkiat.com/blog/prezi-tips-tricks/
Tech With Tech. (2022, August 13). IT vs. ICT (Information and Communication
Technology).Tech With Tech. Retrieved September 23, 2022, from
https://techwithtech.com/it-vs-ict/
Toucan. (n.d.). What is the importance of repetition and rhythm in art? Quora.
https://www.quora.com/What-is-the-importance-of-repetition-and-rhythm-in-art
University of the People. (n.d.). Life Before The Internet: What Did People Do? | UoPeople.
University of the People. Retrieved September 23, 2022, from
https://www.uopeople.edu/blog/how-was-life-before-the-internet/
Visme & Velarde, O. (2017, October 01). The Meaning of Shapes and How to Use Them
Creatively in Your Designs. Visme. https://visme.co/blog/geometric-meanings/
What is SDLC? How the Software Development Life Cycle Works. (2019, May 15). Retrieved
from: https://phoenixnap.com/blog/software-development-life-cycle
What is SDLC? Understand the software development life cycle. (2020, April 8). Retrieved from
https://stackify.com/what-is-sdlc/
Wong, Cai, Valetto, Simeonov, and Sethi (n.d) Design Rule Hierarchies and Parallelism in
Software Development Tasks. Retrieved from
https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.156.2108&rep=rep1&type=pdf
101
Why Is Web Design Important? | 6 Reasons to Invest. (n.d.). WebFX. Retrieved September 24,
2022, from https://www.webfx.com/web-design/learn/why-is-web-design-important/
102
103
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) work together to create and style web pages. HTML provides the structure of a web page by using tags to organize content into headings, paragraphs, lists, links, images, and more. It defines what items are on the page and how they are grouped . CSS, on the other hand, is used to control the presentation, layout, and design of the web page, dictating the appearance of HTML elements, such as fonts, colors, spacing, and alignment. By separating structure from style, CSS allows for more flexibility and efficiency in web design, ensuring consistency across different pages by applying uniform styling through external stylesheets . Together, HTML and CSS are essential for creating visually appealing and accessible web pages .
The seven phases of web design improve the quality and effectiveness of website development projects by providing a structured approach that guides the entire process from conception to maintenance. These phases generally include planning, design, development, testing, publishing, maintenance, and evaluation, each contributing to a methodical workflow. 1. Planning: This phase involves defining the project's focus, target audience, and content mapping, which sets a clear direction and objectives . 2. Design: Creating an interface that captures audience attention and provides a clear picture of the website's purpose ensures user engagement and easy navigation . 3. Development: Implemented designs are transformed into functional websites using programming languages and frameworks, ensuring the site operates as intended . 4. Testing: Procedures to ensure the functionality of the website are critical to addressing any issues before launch, ensuring reliability and user satisfaction . 5. Publishing: Once tested, the site is published, making it accessible to the target audience . 6. Maintenance: Regular updates and monitoring are crucial to maintaining security, performance, and user engagement, adapting to feedback and changes effectively . 7. Evaluation: Analyzing website performance data aids in assessing if objectives are met and identifying areas for improvement, contributing to a cycle of continuous enhancement . This phased approach ensures that each stage of development is systematically addressed, maximizing the project's potential for success and sustainability in the competitive web environment.
The development of collaborative tools supports teamwork and project completion in ICT projects by providing platforms for communication, collaboration, and resource sharing which are crucial for the effective execution of tasks. Such tools enhance the ability of team members to work together regardless of their physical location, enabling the sharing of ideas, instant feedback, and joint problem-solving . Collaborative tools also include features such as file sharing, version control, and project management capabilities which streamline workflows and maintain project organization . These tools provide a structured environment that keeps the team aligned with project goals, ultimately improving efficiency and productivity . Moreover, they facilitate ongoing project maintenance and monitoring by allowing team members to update, manage changes, and trace project progress through analytics, ensuring that the project remains relevant and functional ."}
Users face several challenges when utilizing ICT tools for task management, including technical difficulties, the learning curve associated with mastering new software, and integration issues with existing systems . To overcome these challenges, users can invest in training sessions to improve technical proficiency and understanding of the software features. Additionally, seeking support from user communities and configuring tools to suit personal workflows can enhance tool compatibility and effectiveness . Regular updates and maintenance can also prevent technical difficulties, ensuring a seamless experience and maximizing the benefits of ICT tools.
The evolution of media and information technologies has both positive and negative impacts on society. Positively, they facilitate faster and more efficient communication, reducing reliance on traditional mail and allowing almost instant global interactions through various platforms like email and video conferencing . Technologies like the Internet expand access to information, enhancing educational opportunities and collaboration across diverse fields . Similarly, they enable online banking and cashless transactions, making financial activities more convenient . However, this evolution poses cybersecurity risks such as malware and phishing, threatening the safety of personal and financial data . Additionally, the rapid pace of information delivery can overwhelm users, potentially leading to information overload and reduced attention spans . These advancements also raise privacy concerns with the increased sharing of personal data online . Thus, while media and information technologies provide significant benefits, they also require careful management to mitigate their negative aspects.
When using ICT tools for social change initiatives, it is essential to consider ethical implications such as data privacy, user consent, and digital inclusion. Projects must ensure that personal data is handled responsibly, with consent from users, to prevent misuse and protect individual privacy . Ethical use also involves bridging the digital divide by ensuring access to ICT tools for marginalized communities, preventing the exacerbation of existing inequalities. Additionally, transparency in communication and the intent behind social change initiatives helps maintain trust and credibility, ensuring positive and equitable outcomes for all stakeholders involved.
Planning is significant in ICT project development as it ensures that all aspects of the project align with the intended objectives and target audience, and addresses management of resources, cost, and potential benefits . Effective planning involves thorough requirements analysis, design, testing, and maintenance strategies to not only meet initial project goals but also adapt to future changes and demands . Planning contributes to successful project outcomes by providing a clear roadmap, minimizing risks of project failure due to unforeseen issues, and sustaining the project's relevance and usability over time . Moreover, well-planned projects are more likely to use resources efficiently, remain user-friendly, and maintain engagement with their audience, which are critical for the project's ongoing success ."}
Google Calendar enhances task and deadline management by enabling fast scheduling, setting reminders for events, and allowing team members to view each other's schedules for efficient meeting coordination. It offers various views and repeated reminders for important events . Google Sheets supports task management through its collaborative features, allowing teams to work simultaneously on spreadsheets without budget concerns. It integrates with tools like Autocrat for automating data reports and supports data sorting and visualization, aiding in task tracking and decision-making . Together, these tools streamline coordination and improve productivity by maintaining order and promoting real-time collaboration .
JavaScript plays a critical role in web development by enabling interactive and dynamic user experiences on websites. For front-end development, JavaScript is used alongside HTML and CSS to create the parts of websites and applications that users can view and interact with, such as dynamically updated content and animated graphics . On the back-end, JavaScript can be utilized through environments like Node.js to build scalable network applications capable of handling multiple concurrent user requests, allowing developers to use one programming language for both client-side and server-side development . Furthermore, JavaScript's integration with AJAX contributes to creating rich Web 2.0 applications by allowing asynchronous data exchange without refreshing the whole page ."}
Practicing netiquette and online safety is crucial because poor behavior online can lead to security issues and harm to others, creating a hostile internet environment . Neglecting these practices exposes individuals to various cyber threats such as malware, phishing, and ransomware, which can damage computers, steal sensitive information, or result in financial loss . Using the same password for all accounts, ignoring software updates, and not using two-factor authentication are risky behaviors that increase vulnerability to cyber attacks . Furthermore, bad netiquette, like posting insensitive comments or spamming, can lead to social and ethical issues . Regularly updating antivirus software and using strong, unique passwords help mitigate these risks . Overall, individual precautions contribute not only to personal safety but also help maintain a respectful and secure online community.