1

Lesson
Introduction to Information and
1 Communication Technology
Performance Standard:

1. Define the history behind Information and Communication Technology

2. Identify the concepts of Information and Communication Technology and how they relate
to the computer system
3. Differentiate development and contributors of Information Technology
4. Discuss different platforms, Sites and content
5. Differentiate Web 2.0 to Web 3.0
6. Discuss the World Wide Web

Content Standard:
1. Information and Communication Technology
2. ICT and Computer system
3. Development of Computer Technology

INTRODUCTION

In today’s world, Information and Communications Technology (ICT) relates the need of our
society to adapt the several communication channels – television, radio, mobile phone, and the
computer system (aside from the countless facilities and uses linked with them like video -conferencing
and distance learning) – to daily tasks.

The influx of ICT is regularly vocalized in a certain state, for example ICT in education, health, or
the industry. The countries in the west see that the status of ICT lies not in the technology itself but
rather in its capacity to produce better access to information and communication in the society.
Countless nations around the world have recognized groups for the elevation of ICT. There is a
perspective that developing countries are lagging behind progressive countries in terms of technology
and their economy.

Figure 1 The ICT Workbook for SHS

 2

A comprehensive approach to education has been the tool of the local government to prepare the
nation for ICT.

There are some studies that emphasize the present educational programs are not suited enough
to meet the needs of the career of an individual. Another concept about ICT is that it is a tool for
recording, keeping, processing, regaining, transferring, and getting information. Information Technology
also encompasses electronic communication devices that include disciplines and systems used in
treating and handling data. The effect of ICT has changed the way individuals live, labor, and acquire
knowledge.

Figure 2 The Vision of ICT Workbook for SHS

It is a belief that the practice of knowledge by training is one of the vital tasks of educational
institutions’ procedure the out dated approaches of teaching are no longer able to meet the needs of
today’s learners in society. The latest technologies offer a variety of tools fit for learning of any single
person.

It is recommended to create modules or workshops for students and teachers pertaining to

methods of IT and ICT education. Most experts say that teaching IT rests on the knowledge and
capability of an individual. For example, people who are in the field of medicine are advised to learn
technology related to medical concerns such as information about someone’s health condition based on
his/ her computerized hospital profile or internet resources about herbal medicinal plants; in
engineering it is about controls of robotic machines needed in industry; in entertainment animation
features of the movie industry; in public services, online transactions of the various governmental
departments; and in the business and trade sector marketing and sales of their products.

To achieve such objectives, there are things to consider such as the need for the software.

There are certain concepts of software that are needed in adapt ICT:

1. A consideration in the proper use of ICT involving software is consistency rather than technology
adaption. The ideal principle involved is to plan well before choosing the software. Although there is
access to computerized software tools; it is the ability of the individual, ingenuity of the users and good
supervision by the handlers that matter in order to maximize the potential of ICT.
 3

2. Adaptability to change is a necessity for the software to be able to cope with trends as time
progresses. Hardware in ICT are susceptible to deteriorate as they are exposed to environmental factors
such as dirt or humidity, shaking due to transit of equipment, and the like. At certain points, they are
prone to failure. Unlike hardware where the problem can be traced and/or replaced by determining the
affected components, software is not vulnerable to the environmental changes. It does not wear down;
it works exactly the same way even after years since it was first developed.

3. In ICT, software is custom-made. Most software are primarily designed before they are developed to
suit the clients’ needs. Planning customized ICT includes recognizing various modules for the
development before they are finalized. A lot of people can easily work on these modules by making the
development highly flexible. In customizing the software, manipulating a program into units is a tough
task since each component is greatly interlinked with other components. It also entails a lot of ability to
assimilate different units into one.

Let us travel the world of technology that was influenced by a technology breakthrough called
the “Computer.” Let us recall the development of computers and its areas of influence.

Computers have been around since the early 1930’s and notable contributors and inventors of
the predecessors of computer technology were: Charles Babbage, Herman Hollerith, Lady Ada Augusta
Byron, John Napier, William Oughtred, Alan Turing, John Von Neumann, John Atanasoff, Clifford Berry,
John W. Mauchly and J. Presper Eckert Howard Aiken, Engelbart and Blaise Pascal.
 4

Figure 3 The CORE VALUES OF ICT WORKBOOK FOR SHS

There were revolutionary improvements on its features such as the Pascaline, the Differential
Engine, Napier’s Bone, Slide Rule, MARK1, ENIAC (Electrical Numerical Integrator and Calculator), EDVAC
(Electronic Discrete Variable Automatic Computer), UNIVAC (UNIVersal Automatic Computer I) and IBM
(International Business Machines). The first phase of computers were considered to be large, heavy and
occupied a lot of space then while the latter phase is light and can be hand-carried with multitasking
features.

Truly computers have reached a new generation so that we can define the word computer as an
electronic device capable of processing, storing, producing information and of communication.
Another evolution of computers involved the influx of the network and Information
Technology bywords of today are: William Henry Gates III, Mark Elliot Zuckerberg, Steve Jobs, and other
computer inventors. Their innovations include: Microsoft, Apple, ARPANET, Yahoo, Google, YouTube,
Facebook, and Wikipedia – which are some of the greatest contributions in the history of computers.

As for the future of computers, one known technology that involves computer is Robotics where
a computer microcontroller serves as the brain of the electro-mechanical and programmable machines.
Notable robots at present are ASIMO, Big Dog, Curiosity, Android Der, Simrod, Jason Jr. and Da Vinci
which are just some of the most notable computer controlled robots.

The Data Processing Cycle

Computers need to process data or information to produce an output. Data can be defined as
any letters, numbers or symbols without context or more aptly called “unprocessed data.”

Information data that means data that are meaningful and useful. This can only be possible if the user
input data which means entering data into the computer which will in turn be processed. Such date is
then processed and later on processed data becomes displayed data, also called output. The data
processing cycle can be seen in the illustration below:

Figure 4. The Data Processing Cycle

 5

Terminologies in Information Processing Cycle

1. Editing is the process of changing or modifying a data.

2. Verifying is the process of double checking the validity of a data.
3. Coding is the process of making the data in concise form.
4. Calculating is the process of doing computation process to data.
5. Storing is the process of saving data for future use.
6. Retrieving is the process of getting data that was previously stored for used.
7. Searching is the process of finding data or information for information purposes.
8. Printing is the process of making a hardcopy of data.
9. Scanning is the process of checking for virus infection or integrity of computer to avoid
malfunctions.
10. Browsing is the process of using the Internet for viewing purposes.

Assignment:

1. Research about other inventors and their inventions that contributed to the development of
computers. Put your research in a portfolio.

Values Integration:

Group the students into five. In a piece of a paper, list down one particular person who they
think inspires them to achieve their goal. Each student should cite the reason why they chose that
person as a role model. After the grouping, they will discuss the person they chose and then explain the
values of cooperation, obedience, discipline and respect for others opinion.
 6

Different Websites Platform

WordPress
WordPress is among the elders in the community of web-designing platforms, since its advent in
2003. WordPress is among the most popular blogging platforms used across the globe due to the easy-
to-operate environment. The user is not required to possess coding expertise as WordPress offers tools
to manage your website without hassle. The pre-built functionalities embedded in these platforms helps
to easily set themes and plugins which offers customization to the user. The popularity of a website
depends upon its ranking on search engines and owing to the SEO tools offered by WordPress, it’s very
easy to make the website search engine friendly.

PHP

PHP is a server-side scripting language which offers amazing versatility while developing
dynamic websites. The beauty of PHP is that despite being an open-source development platform, it
offers a plethora of functionalities and benefits like a paid scripting language would. Web-designing has
done using PHP guarantees a robust and durable website structure which is capable of handling mass-
traffic. Although, the requirement for using PHP is that a user needs to have a grip on programming
languages, which makes it selectively accessible to developers only. Thus, if you are web-development
Company striving to develop platform independent, server & database friendly and secure website, PHP
is the best trick in your bag.

Joomla

Joomla is among the most favored Content Management Systems that is being used for a long
time. It is a preferred tool for developing websites with multiple functionalities and powerful web
applications. Joomla’s fast and easy to edit environment offers a strong web-design that ensures the
integrity of the data, which is not possible without a CMS. Since Joomla is created by using PHP and
MYSQL, which are both open source platforms, Joomla also is an open-source and versatile
infrastructure. Thus, if you are looking for a secure and scalable web designing platform, go for Joomla!
 7

Magento

Magento is one of the best, free and scalable platforms for developing state-of-the-art e-
commerce platforms. It’s a feature-packed development tool which offers thousands of extensions that
allows you to extensively customize your website. In addition to being flooded with features, Magento
offers a highly active user forum which is increasingly becoming a hub for talented web-developers.

ASP.NET

Though Active Server Pages (ASP) is not free, there is a huge library that consists of lots of basic
functions and database interactions. Another advantage of ASP.NET is that it is omnipresent and a lot of
engineers know how to build applications using this framework.

JSP

Java Server Pages (JSP) is a technology that assists software developers in creating dynamic web
pages that are based on XML, HTML, or other types of document. JSP is similar to ASP and PHP, except it
uses Java programming language. One of the greatest advantages of using this framework is that JSP
pages combine static templates, including HTML or XML fragments, with the code that generates
dynamic content.

Open Cart

Open Cart is a popular e-commerce platform that is easy to work with and is super-fast. Easily
installable on shared hosting, availability of a lot of themes and templates, and an admin panel that is
easy to use are some of the benefits of using Open Cart.

The above-mentioned platforms are the key ones we thought of sharing with you. Nevertheless, there
are few more like Drupal, Ruby on Rails, Prestashop, etc. to develop a website as per your needs.
Know your strengths as well as limitations, and choose a platform that makes your process streamlined
and helps you in creating websites more efficiently.
 8

World Wide Web

The World Wide Web (WWW), commonly known as the Web, is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs, such
as https://www.example.com/), which may be interlinked by hypertext, and are accessible over
the Internet.

WEB 2.0 VS WEB 3.0

Web 2.0 is a writable and more social oriented World Wide Web that uses Google as a catalyst
to perform. Whereas, Web 3.0 is a dynamic metadata web that is enriched in performing personal
assistance for an individual using Semantic web. The document type Web 2.0 is static and employs
Google keyword to retrieve information to the users. On the other hand, the highly mobile Web 3.0
uses databases with metadata to look for the information. Web 2.0 makes use of categorized content
tagged by people while Web 3.0 utilizes Artificial intelligence combined with content management to
assist the users. It is also to be noted that Web 3.0 is capable of generating raw data as it holds a greater
grip on the information to be retrieved and distributed to the users. Web 2.0 having been a user-friendly
interface with profusion of information, is not customized data provider as that of Web 3.0. Better
Collaboration and interaction with the websites can help in acquiring more suitable information to the
instance that the user is expecting for.
 9

Activity #1
Name :__________________ Score:_____________________

Section: _________________ Date: ______________________

Assessment Task 1

I. Instructions: Enumerate the items related to each category. Write your answer to the
corresponding column.

1930’s Inventors Hardware and Software in present Notable persons in the area of
time Network and Information
Technology
 10

II. Illustrate the Data Processing Cycle. Explain each component or phase.

_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
 11

Lesson Rules of Netiquette

2
Performance Standard:

1. Identify the terms in Internet technology

2. Define modern terms in the Internet application
3. Adapt proper computer ethics in using computers
4. Discuss online security and safety
5. Discuss Copyright and Intellectual property rights
6. Contextualized online search and research skills

Content Standard:

1. The Internet Technology

2. Terminologies in Internet
3. Computer Ethics
4. Online Security and Safety
 12

INTRODUCTION

During the early days, man was not aware how vast the earth was and there were limited
ways to communicate. Lack of
transportation and scarcity of
information were the reasons for
each man to be isolated and be
content with the environment he
had been used too.

But those days are gone and

new technology has arrived that
define today’s generation. This is
the age of the “Internet”. The
Internet had been given many
definitions, such as
interconnection of networks that
spans beyond thousands of miles,
thus the wide networks of
computers. This phenomenon that
has brought colloquial words, such
as “information burn-out” a term
that describe a person being Figure 63 A depiction of a global community.
bombarded by too much information
because of the large bulk of information that comes from the Internet.

Truly this wonder of technology has helped man in many cases in his life; therefore, it is just
fitting to recognize the evolution of this technology.

The world was recovering from the impact of World War 2 that occurred around the middle of
1940’s. The healing process is evident in putting peace as the priority. Man has learned the mystery of
technologies never seen before the war. The Industry sector was flourishing; new ways of transportation
were made; discoveries in the field of science has reach outside of mother earth and man has seen the
wonders of new gadgets that are useful to then house home choir and entertainment via media has
brought life to the society.

But at the back of it all, there is a growing anxiety between two protagonist nations that are
considered the heroes of World War 2: The United States of America, and Union of Soviet Socialist
Republic. The two countries were challenging each other in founding new technologies that man had
never seen and experience; before, the Russians started their rivalry by launching a technology of the
 13

first satellite that orbits the earth called “Sputnik”. That USSR launch satellite opened up the eyes of the
world to how vast the technology is that this communist state possessed. Not to be outdone, the United
States reacted by prioritizing their own space exploration. From then on, the United States gathered all
the talented professionals that could help in improving the security of the country. One of the main
ideas is to use computers to monitor the movement of its nemesis Russia, an agency called Advance
Research Project Agency ARPA later on called DARPA was tapped to head this security strategy in the
early 1970’s. The idea was to exchange information by communicating thru one internet. As the time
passed the security concerns of the so-called cold war was over since the Soviet Union collapsed too into
splinters of countries.

The technology left behind which is the Internet was used by several universities. That time, the
“backbone of internet” from then on was a means of remote communication. The early type of e-mail
(electronic mail) was the primary method of transmitting messages. This was done around early 1980’s,
by typing the message and sending the message to a recipient through an internet address. For
protection a network protocol is implemented called “Transmission Control Protocol (TCP)” where
which is used together with “Internet Protocol (IP)”. This technology created around mid-1980’s is
encrypted to packets that resent a message to the sender if the message was not delivered.

There are terms that are common in Internet Technology:

Bandwidth refers to frequency of data transmission measured in Hertz.

Chat a real time electronic communication where participants type their messages and reply back.

Cyberspace refers to all the totality of all the unit connected to the computer network and their
contents.

Downstream is the speed of downloading files in the Internet

Download is the process of getting files via the Internet

Electronic Mail (E-Mail) is used by typing text to send or receive messages all over the world.

Internet Protocol is a number associated with a device, network card or home address.

File Transfer Protocol is used to transfer file remotely to any destination where a client is connected in
the network.

Firewall a software or hardware that limits access to a computer network.

Group discussion refers to a group of users in the internet that are linked and have similar preferences
and interests.

Homepage is the starting point of a website.

HyperLink is a word or phrase that has a URL attachment

 14

Hyper Text MarkUp Language (HTML) is the programming language format that the web browser
understands.

Internet Service Provider (ISP) is the company that sells Internet access to users.

Mosaic is a graphical software browser designed around 1993 later on becomes Netscape navigator.

Search Engine refers to the ability of a website to search and display similar terms to the search item in
the internet.

Server is a computer that manages the network

Spam is a chain letter distributed to any user passed then to another users.

Thread a series of message with the same subject.

Transmission Control Protocol / Internet Protocol (TCP/IP) the communication protocol used in the
Internet

Web Browser a software needed in order to find, retrieve, view and send information over the internet.

Webpage a unit or page that can be seen on the screen usually a part of a website.

Website it consists of one or more webpage

World Wide Web (WWW) is a protocol that lets one link to the Internet

Universal Resource Locator (URL) simulates an address that is used to locate a server that usually hosts
a certain website.

Upload is the process of putting files in via the Internet.

Upstream is the speed of uploading files in the Internet.

Computer Ethics

Computer Ethics can be defined as an act that involves morality and values in computer usage.

Have you ever wondered if the files such as software, picture, music and video that is installed in
your computer is legal? Well if you are not sure: Here are some tips that you should consider before
installing files:

1. You got your file without any permission from the legal owner of that file that is considered
“piracy” to some extent.
2. Piracy of file is punishable by law.
3. A registered file that is for sale distribution should have some compensation from the
developer either based on direct transaction or payment.
4. People who used a file without permission to the rightful owner can be called a “hacker”.
 15

5. Don’t worry because there are files called open source, freeware or even shareware that are
legal to be downloaded based on the license agreement.
6. Your file should have been registered on line to the original manufacturer or sealed with the
company insignia.
7. Don’t just purchase files from any person without any legal connection with the original
manufacturer.
8. There are government agencies that can be reached to ask about queries regarding the
authenticity of the file you are using they can be reached via direct communication with the
department or through their websites.
9. Most files that are purchased legally usually are only for the consumption of that single
person or entity but cannot be shared with others.
10. Be responsible in using computers by preventing the spread of computer virus.

Computer Virus

It refers to programs that attack other files in computers and brought damage, such as
corruption of files.

Here are symptoms of computer virus infection:

1. The file is already corrupted or cannot be opened anymore.

2. Constant stalling of computers is observed disrupting the work.
3. A strange message appears on the screen.
4. Slowness of computer is occurring frequently.
5. Software programs are not executing properly.

Ways to prevent Computer Virus infection:

1. Avoid inserting portable storage devices in computers that are suspected to be infected by
computer viruses
2. Install Anti-virus software and update it frequently via the Internet.
3. Quarantine or delete files suspected of virus.
4. Set up automatic virus scanning software to the computer.
5. Be cautious in downloading files from the Internet.

Intellectual Property Rights

It refers to the legal rights of a software or even hardware developer in a product that he
originally made.
 16

Copyrights

is a legal term used to describe the rights that creators have over their literary and artistic
works. Works covered by copyright range from books, music, paintings, sculpture, and films, to
computer programs, databases, advertisements, maps, and technical drawings.

Piracy

It is an act of using software such as programs, systems, games, picture, music and video of
other developers or authors without their permission and its used for personal or income generating
purpose.

Hackers

They are individuals who maliciously attack or steal files from other computer users.

Online Research Skills

1. Check your Sources

 Evaluating Web Resources
 Accuracy and Objective
 Coverage
2. Ask Good Questions
 The answers you get in the literature depend on the questions you pose.
3. Go Beyond the Surface
 Persistency by Continuing to pursue information to gain a broad perspective
4. Be Patient
5. Respect Ownership
Strength
 Internet researching is faster than other medium. For example, when you searching with
the book in the library it takes long time in searching about the topic.
 Internet researching will save user’s physical distance. For example, you need to go to
library and during the information about the topic it will make you spend your physical
things.
 You can shear information with other people very quickly.
 Quality of information also better than other medium.
 Strength include speed, immediacy, and a complete disregard for physical distance.

Weaknesses
 For students
 it searches only the 35,000 Web sites that the staff of research expert and librarians and
teachers have evaluated and approved when creating the content on finding Dulcinea.
 It is a search engine for students, teachers, and administrators.
 17

 It draws from the trusted resource from universities, government, and established non-
commercial sites.

CONTEXTUALIZED ONLINE SEARCH AND RESEARCH SKILLS

 Internet research has strengths and weaknesses.

 6. USE YOUR NETWORKS

 Possibility of leak someone’s personal information. And it can make negative effect in your life
 There is so many incorrect information that we trying to find.
 You can get many harmful objects such as advertising.
 Weaknesses include unrecognized bias difficulties in verifying a writer’s credentials (and
therefore the accuracy or pertinence of the information obtained).

1. Online Safety and Security is the knowledge of maximizing the user’s personal safety and security.
2. Protecting your computer with strong security is the one of the ways to help us secure and protects
our computers.
3. Trojans are the example fake antivirus programs
4. Botnets is an infection that will enlist your computer as an agent in fraudster arsenal.
5. Internet research is the systematic investigation into and study of materials and sources in order to
establish facts and reach new conclusions.

 Respecting intellectual property rights of creators and produce

Strengths

 Display emotional resilience by persisting in information searching despite challenges.

 Using social networks and information tools to gather and share information.
 18

Assignment:

1. Cite some disadvantages of software piracy.

2. What is Internet Research
3. What’s going to happen if virus infects your computer?
4. Why do you have to secure website?
5. What are the strengths in online and research skills.

Values Integration:

“Honesty is the best policy!”, goes the saying. One thing that is noticeable in our society is the
rampant sale of pirated software’s. In this chapter, students, learned the lesson of honesty and
consequences of using pirated software.
 19

Activity # 2

Name :__________________ Score:_____________________

Section: _________________ Date: ______________________

I. Instruction: Identification: Write your answer on the space provided.

__________1.This is a number associated with a device, network card or home address.

__________2.This is used to transfer file remotely to any destination where a client is connected in the
network.

__________3.It is the communication protocol used in the Internet

__________4.It is a software needed in order to find, retrieve, view and send information over the
internet.

__________5.This is a software or hardware that limits access to a computer network.

__________6.It is a unit or page that can be seen on the screen usually a part of a website.

__________7.This consist of one or more webpage

__________8.It refers to a group of users in the internet that are linked and have similar preferences
and interests.

__________9.It refers to frequency of data transmission measured in Hertz.

__________10.It is a real time electronic communication where participants type their messages and
reply back.

__________11.This is a protocol that lets one link to the Internet

__________12.It simulates an address that is used to locate a server that usually hosts a certain website.

__________13.This is the process of putting files in via the Internet.

__________14.This is used by typing text to send or receive messages all over the world.

__________15.It is the speed of uploading files in the Internet.

II. Essay: Explain ways to prevent Computer Virus infection:

Write your answer on the space provided.
 20

Lesson
Advanced Word Processing
3 Skills

Performance Standard:

1. State the importance of word processors in modern day computing

2. Explain the environment of word processors
3. Apply the correct formats in the activities.

Content Standard:
1. Word processors
2. Microsoft Word
3. Formatting Toolbars
4.
INTRODUCTION

Word processors

The advent of technology involves the use of word processors that have multiple function from
creating templates, to web-based documents. Numerous word processor include the following features:
ability to modify font properties, adjust paragraphs, modify the size and orientation of documents ,
insert images, and employ the template-based document editor. One common word processor is
Microsoft Word.

Opening Microsoft Word

1. In Microsoft Windows desktop, click the Microsoft Word icon.

2. The Microsoft Word editing page appears. (see Figure 2)

Figure 27 The Microsoft Word Environment

 21

The Parts of Microsoft Word

4
1 2 3

5 6 7 8

Figure 28 Parts of Microsoft Word Interface

1. Title bar 5. Vertical Ruler
2. Menu Tab 6. Horizontal Ruler
3. Toolbar 7. Document Area
4. Minimize, Restore and Close buttons 8. Vertical Scrollbar

1. Title bar – it refers to the area where the filename of the current document can be displayed.

2. Menu Tab – it is recently called a ribbon this area is where all the commands can be found.

3. Toolbars – it is the area which contains a stack of icon commands that can be run

4. Minimize, Restore and Close –it is used to adjust the viewing of windows.

5. Vertical Ruler – this is used to measure pages, text and paragraphs in their vertical position.

6. Horizontal ruler- this is used to measure pages, text and paragraphs in their horizontal position.

7. Document area- this is the area where text and images are placed.

8. Vertical Scrollbar- this is used to navigate the document vertically by scrolling the button or by clicking
the up or down arrows.
 22

Most commonly used Icons in MSWord

Save – This icon command is used to save or store the current file.

Undo– This icon command is used to undo the current activity and return the previous
action

Redo – This icon command is used to redo the current activity that was done after the
current action.

The Home tab is a menu bar that compromises of ribbon link of Clipboard, Font, Paragraph, Styles and
Editing

Paste – This icon command is used to paste the text or object to the current location of the
cursor.

Cut - This icon command is used to cut or remove a text or object.

Copy – This icon command is used to paste the text or object to the target
destination.

Format Painter - This icon command is used to apply format to a text based on the formats
of selected text.

Font Face – This icon command is used to select and then apply a font
face.

Font Size – This icon command is used to change the size of the text.
 23

Bold - This icon command is used to format the text to boldfaced.

Italic – This icon command is used to format text to italicized.

Underline – This icon command is used to format the text to underlined.

Strikethrough - This icon command is used to strike a line through. the text.

Subscript – This icon command changes the text to subscript.

SuperScript - This icon command changes the text to superscript.

Grow Font - This icon command increases the size of the text.

Shrink Font– This icon command decreases the size of the text.

Text Effects - This icon command changes the text effects.

Change Case – This icon command is used to change the case from upper case to lower
case or vice versa.

Text and Highlight Color – This icon command highlights selected text for emphasis.
 24

Font Color – This icon command changes the colors of the text.

Clear Formatting - This icon command removes the previously applied text format.

Bullets - This icon command is used to add sequence of bullets to selected items.

Numbering – This icon command is used add number in chronological sequence to items.

Multi Level list – This icon command is used add multi-level list with different hierarchy.

Align Text Left - This icon command formats the selected text to the left.

Center –This icon command formats the line text selected to the center position.

Align Text Right - This icon command format the line text selected to the right alignment.

Justify- This icon command format justifies all the line text selected or paragraph.

Blank Page - This icon command inserts a new blank page .

Table – This icon command creates a series of row and column similar to a matrix of table.
 25

Picture - This icon command is used inserts a picture in the document.

Clip Art - This icon command is used to insert graphics from the clip art gallery.

Shapes – This icon command is used to insert shape.

Chart - This icon command is used to insert a chart.

Header – This icon command is used to add header to the document.

Page Number – This icon command is used to insert a page number.

Text Box - This icon command is used to insert a text box.

Word Art – This icon command is used insert text with preformatted styles.

Symbol - This icon command is used to insert symbols.

 26

Page Lay Out – This menu is composing of command for page layout specially for users viewing and
printing needs.

Margins – This icon command is used to insert margins from top, bottom, left and right
of the document.

Orientation –This icon command is used to set up the orientation either portrait or
landscape.

Size - This icon command is used to select the paper size of the current document.

Columns – This icon command is used set up the document by number of columns.

Watermark – This icon command is used put a watermark style to image in the background

Page Color – This icon command is used fill the page with colors.

Page Borders – This icon command is used insert style of borders to the document.

Wrap text – This icon command is used to wrap text to object or pictures.

Bring Forward – This icon command is used to place the image forward.

Send Backward -This icon command is used to place the image backwards.
 27

Review – This menu command give emphasis on text meaning, spelling and grammars.

Spelling and Grammar – This icon command is used to check the spelling and grammar.

Research – This icon command is used to search for the meaning of a word via online.

Thesaurus – This icon command is used to search for the meaning via the dictionary.

View – This menu command gives option for viewing he document.

Print Lay Out – This icon command is used to modify the display of the current document.

Zoom – This icon command is used to enlarge the focus of the current page.

100 % - This icon command is used to display the page 100%.

Format –This menu command is used to format or modify the figure or image selected.

Remove Background – This icon command is used to remove the background that was
selected.

Corrections – This icon command is used to adjust the image either brightness and contrast.
 28

Colors – This icon command is used to adjust the color tone and saturation of an image.

Crop – This icon command is used to crop the selected edges of an image.

Save As- This icon command is used to save a file base on the destination folder selected.

Print – This icon command is used to print the current document.

Open – This icon command is used to open the folder where a file is located for used.

Close - This icon command is used to exit the word processor.

 29

Editing Text in word processors:

I. Change the Font without using the mouse.

1. In the document are type the word God is good! .
2. Press SHIFT + Up arrow key button.
(The word God is good! should be highlighted.)
3. Press CTRL + } ( close curly braces) for at least 10 x
the word God is good! should be enlarge.
4. Press ALT+H then ALT + FN.

Figure 29 God is good!

Figure 30 Using ALT + H

.
5. Press Tab continuously until Font Color (Automatic) is selected;

Figure 31 The Font Dialog Box

 30

6. Press down arrow key the color palette appears; then using the direction keys select a color
then Enter; then press TAB until OK then Enter.

Figure 32 The Color Palette

II. Inserting a Picture, border and word art.

1. Select Insert, click picture, Select a picture from the Insert picture window.
2. Select the picture then click Insert.

Figure 33 The Insert Picture Dialog Box

 31

Inserting a Border

1. Select Page layout tab, select Page Borders tool, select a style then click Insert.

Figure 34 The Border and Shading dialog box

Inserting a Word Art

1. Click the Insert table.

2. Select the Word Art tool; Click word art style.
3. The container ‘Your text here’ appears.
4. Type your text.

Figure 35 Insert Word Art

Creating columns in word processors

1. Select Page Layout tab , Click Columns tool, Select More Columns,
2. The Columns dialog box appears; Select a Pre-sets then click OK.

Figure 36 The Columns dialog box

 32

Assignment:

1. Cite (10) advantages of word-processing

Values Integration:

Students learn the importance of making presentable documentation such that word processors
like Microsoft Word develop their creativity in presenting portfolio needed in their study.
.
Activity #3

Name :__________________ Score:_____________________

Laboratory Activity 1
Section: _________________ Date: ______________________
I. Label the parts of Microsoft Word Environment.
Write your answer on the space provided. 1

5
2

3 6 7 8 9 10

4
Figure # Label the parts of Microsoft Word

1. ____________________ 6. ____________________
2. ____________________ 7. ____________________
3. ____________________ 8. ____________________
4. ____________________ 9. ____________________
5. ____________________ 10. ____________________
 33

Machine Problem # 1 : Familiarizing with font face, font style, font color, borders and backgrounds.

Step #1 Compose your own poem according to any of the following categories.

(Personal Life, Family, Society or Environment)

Step #2: Design the following with different font style, font face, font size and font color.

Step #3 Add Background picture and borders

 34

Lesson Advanced Spreadsheet Skills

4
Performance Standard:

1. Define the functions of a Spreadsheet program

2. Appreciate the development computing using Microsoft Excel
3. Identify the parts of MS Excel and its basic functions

Content Standard:

1. The Spreadsheet program

2. Microsoft Excel
3. The Functions of MS Excel

INTRODUCTION

In today’s world the business sector has reach a milestone unmatched by the past transactions,
the accounting principle had reach new heights that had helped the progress in transaction.
The Electronic Spreadsheet refers to a program that is customized to perform computations similar to
accounting principles. It is also capable of producing formulas, creating charts and reports.

The Microsoft Excel Environment

1
2

5 6

8
Figure 38 Parts of the Microsoft Excel Environment
 35

1. Title Bar 6. Cell

2. Menu (Ribbon) 7. Worksheet
3. Tools 8. Cell Pointer
4. Cell Address 9. Column
5. Formula Bar 10. Row

Title bar – This refers to the area where the filename of the current document is displayed.

Menu Tab- This area is where all the commands can be displayed and run.

Tools- This area holds a stack of icon commands that can be run.

Cell Address - This displays the current position in row and column of the cell pointer.

Formula Bar – This displays the formula used for a particular cell.

Cell –This refers to an individual cell.

Worksheet – This refers to the whole adjacent cells in one sheet.

Cell pointer- this refers to the current position in the worksheet where data entries can be entered.

Column - This refers to the cluster of cells in vertical position indicated by letters.

Row – this refers to the cluster of cells in horizontal position indicated by numbers.

The Tools

Orientation – This command is used to adjust or modify the angle of a text.

Wrap Text - This command is used to wrap the text within the cell.

Merge and Center - this icon command is used to merge cells into one single unit.

Percent - This command is used to add a percentage symbol

Comma- This command is used to add commas to currency type entries.

Increase Decimal - This command is used to increase the decimal places.

 36

Decrease Decimal- This command is used to decrease the decimal places.

Auto sum – - this icon command is used to get the sum of all numeric data selected.

Columns- This command is used to compare values across categories.

Line - - This command is used to display a chart that shows trends overtime.

Pie - This command is used to display chart contribution of each value and a total.

Bar - This command is used to display a chart that compares values.

Insert function – This command is used to insert functions or formulas.

From Access - This command is used to insert Microsoft Access data.

Sort A to Z - This command is used to arrange the data alphabetically from a to z.

Sort Z to A - This command is used to arrange the data from z to a.

Sort- =This command is used to arrange data based on criteria.

Modifying the Entries

A. Adjusting Columns.
1. Point the mouse pointer at the edge of a cell to adjust cell length (a double headed arrow
appears) then drag.
2. Drag the double- headed arrow to your desired location.
 37

Figure 39 The Double Head Arrow

B. Sorting Data
1. Type the following names;

2. Create a range names. Then click Sort A to Z.

C. Using AutoFill
1. Enter two consecutive numbers;
2. Highlight their cells.
3. Drag the bottom right edge of the cell.

Creating Formulas in MS Excel

1. Type the following data. Select cell address B1. Type PRELIMINARY QUIZ. Select cell address B1,
highlight ell addresses B1 to F1; Click Mail Merge. ( 1. Refer to number in Figure for the Output)
2. Select cell address F4. Type the formula: =AVERAGE (C4:E4) , press Enter. ( 2. Refer to number in
Figure for the Output)
3. Select cell address F4. in the tools then click Decrease Decimal. Format it to two decimal places.
4. Select F4 then drag the Auto Fill handle up to F8. ( 2. Refer to number in Figure for the Output)

Figure 40 Creating Formulas in MSExcel

 38

Creating Charts

1. Range from the cells B3 up to F8 ; Click Insert from the Menu Tab.

Figure 41 Range from the cells B3 up to F8

2. Click Column. Then click any 3D Column style.

Figure 42 The Column

3. The Chart below appears.

Figure 43 The Column Chart

 39

Creating Formulas function in MS Excel:

1. Go to G4. Type the following formula: =(F4>85,”EXCELLENT”,”GOOD”) then press Enter key.
2. Used autofill to copy the formula for the rest of the rows.

Figure 44 Creating Formulas

 40

Assignment:

1. Using MS Excel, solve for the Quiz Average:

Create a Column Chart and put the appropriate label and legend.
Formula:
Quiz Average = Quiz1 + Quiz2 + Quiz3

Name Quiz 1 Quiz 2 Quiz 3 Quiz Average

1 Rizal, Jose 85 100 85
2 Bonifacio, 90 90 75
Andres
3 Mabini, 100 90 90
Apolinario

Values Integration:

Microsoft Excel is the most widely used software in the world, the knowledge learned from this
lesson not only improves their skills but also enhances their focus, discipline and ingenuity by learning
techniques in making formulas and designing charts.

.
 41

Activity # 4

Name: __________________ Score:_____________________

Exercise_________________
Section: :Label the part of Microsoft Excel. Write your______________________
Date: answer on the space provided.

I. Instructions: Identify the parts of Microsoft Excel according to the number .

Write your answer your answer on the space provided.

1 2 3 4 5 6 7 8 9 10
0

1. 6.
2. 7.
3. 8.
4. 9.
5. 10.

11
0
12
0

13
0
14
0
15
Figure 45 Label the parts in Microsoft Excel
0

11. _________________ 14._______________

12. _________________ 15. ______________
13. _________________
 42

Machine Problem #2

Name: __________________ Score:_____________________

Section: _________________ Date: ______________________

I. Instructions: Create a grading system that will display a remarks according to grade
intervals. Use IF Function for the remarks.

*Base your remarks on the Grades table below.

Range of Grades Remarks

Less than 75 Fail
75 to 80 Pass
Greater than 80 Good

Figure # Grades Table

 43

Lesson Advanced Presentation Skills

5
Performance Standard:

1. Define the functions of a presentation program

2. Appreciate the purpose of presentation programs
3. Identify the parts of MS PowerPoint

Content Standard:

1. The Presentation programs

2. The Microsoft PowerPoint
3. The Functions of MS Power Point

INTRODUCTION
Marketing strategy is a necessity in the progress of a business. In this lesson a Presentation
program refers to an application program that is useful for presenting documents, such as business
proposals, lessons in the field of education, and seminars.

Parts of the Microsoft PowerPoint Screen 1 2 3

6
7 8 9 10

Figure 47 Parts of Microsoft PowerPoint Screen

 44

1. Title bar – this refers to the area where the filename of the current document is displayed.
2. Menu tab – this area is where all the commands can be displayed and run.
3. Tools- this area holds a stack of icon commands that can be run.

4. File Menu Button- This holds the menu for opening, creating, saving and printing of files.

5. Sorter panel – It displays the slides in miniature form in its proper order.

6. Status Bar – This displays the current slide and number of slides in the presentation.

7. Guide bar – This can be used for remarks with regards to the slide but is not displayed during the
presentation.
8. Presentation Slides – It refers to the current slide in the presentation.

9. View Buttons – It is composed of buttons that are most commonly used for viewing.

10. Zoom in Zoom out – It can be used for magnifying the current slide.

Common command icon in slide show presentation

From Beginning Animation pane

From Current Slide Sound

Rehearse Timing Duration

Creating a Slide with Text, WordArt, Background color,

Inserting a picture and animation.

1. Open PowerPoint. From the presentation slide, select

the container “Click to add title”.
2. Type the text For example: Our Lady of Fatima
University.

Figure 48 Creating Slide and Format Background

 45

3. Right click the presentation slide, from the menu choose Format Background.
4. The Format background dialog box appears; Select the Gradient fill; Select Preset colors then
choose a color. Click Apply to All then click Close.

Figure 49 Format Background

5. Select a container with text; click Format the Word Art Style appears. ; from the choices select a
word art style.

Figure 50 Format Word Art

 46

6. The sample format appears.

Figure 51 The sample output

7. From the Slide panel next page Right Click below the current slide. Then from the menu select
New Slide. Afterwards From the menu select Insert Click Picture.

Figure 52 Inserting Picture

8. Select a picture; Click Open.

Figure 53 Select a Picture

9. From the menu select Animations, select Fly In; Select Slide Show then Select from the
beginning to run the slides.

Figure # Animation
 47

Assignment:
1. Create a presentation about your family:
Required minimum of 10 slides with pictures and sounds.

Values Integration:

Today’s business has reached a point that presenting business transactions is a necessity to
attract potential customers. The Microsoft PowerPoint is an essential tool in doing this with its user -
friendly controls, attractive text, pictures and animation. Creativity and appreciation for beauty of
presentations are values that are developed in the student’s personality.
 48

Activity # 5

Name: __________________ Score:_____________________

Section: _________________ Date: ______________________

I. Instruction: Identification: Write your answer on the space provided.

____________1. It displays the slides in miniature form in its proper order.

____________ 2. This refers to the current slide in the presentation.

____________3. This is composed of buttons that are most commonly used for viewing.

____________4. It can be used for magnifying the current slide.

____________5. This refers to the area where the filename of the current document is displayed.

____________6. This area holds a stack of icon commands that can be run.

____________7. This contains the menu for opening, creating, saving and printing of files.

____________ 8. This displays the current slide and number of slides in the presentation.

____________9. This can be used for remarks with regard to the slide but is not displayed during the
presentation.
____________ 10. This area is where all the commands can be displayed and run.

II. Enumeration: List down five common command icons in a slide show presentation.

1. ____________________________________

2. ____________________________________

3. ____________________________________

4. ____________________________________

5. ____________________________________
 49

Lesson
Imaging and Design for Online
6 Environment
Performance Standard:

1. Discuss Basic Principles of graphics lay-out

2. Creating Info graphics
3. Discuss different Online file formats or images
4. Principles and basic techniques of image manipulation
5. Uploading, sharing, and image hosting

Content Standard:

1. Basic Principles of Graphics lay-out

2. Basic Techniques and principles of image manipulation
3. Formats of images

Creating a web page is like creating a work of art. There are certain things that you need to consider in
order to get your message across.

1. Balance. The visual weight of objects, texture, colors, and space is evenly distributed on the screen.
An example page of balance and emphasis

2. Emphasis. An area in the design that may appear different in size, texture, shape or color to attract the
viewer's attention.
 50

3. Movement. Visual elements guide the viewer's eyes around the screen.

4. Pattern, Repetition, and Rhythm. These are the repeating visual element on an image or layout to
create unity in the layout or image. Rhythm is achieved when visual elements create a sense of organized
movement.

5. Proportion. Visual elements create a sense of unity where they relate well with one another.
 51

Principle of Variety Design

Creating an Info graphic

Step 1: Ideate

Start by considering the business side of your infographic creation. Your marketing, creative and
business teams need to work together to brainstorm and decide on an idea for your infographic.

Begin with a pool of 8–10 ideas. Research each to find other content and information on your
chosen topic, and look to see if there are other infographics out there that have already covered
your idea. If so, what additional information and value can your infographic offer?

Step 2: Research, Plan and Write

Once you’ve decided on your idea, you’ll need to compile the data that your infographic will illustrate.

To make sure you’re telling a compelling story from the beginning to the end of your infographic — one
that links facts, figures and visuals together — take the time to plan out the structure and writing of
your infographic’s content.

The visual structure of your information should be clear and logical, and the writing
should communicate with your audience in a way that best resonates with them.
 52

Step 3: Choose Your Colors

Did you know that colors account for 85% of the reason why people make a purchase? In fact, when
people watch just three seconds of an ad, 62% of them have already made their decisions about the
brand based on the colors displayed in the ad. That’s why choosing the right colors plays an extremely
crucial role in the success of your infographic.

Step 4: Select Your Font(s)

After choosing your color scheme, it’s time to pick the right font(s) for your content. Fonts make or
break your infographic’s readability.

The right font choices add ambience and personality to your infographic, while the wrong font choices
clutter the page and obscure the information.

If you have the resources, it’s worth getting your graphic designer to experiment with a few different
fonts to see which ones best support the creative direction of your infographic.

Step 5: Determine Your Infographic Orientation and Visual Hierarchy

Once you’ve selected your colors and font(s), you need to think about the wireframe and orientation
of your infographic.

Almost all websites use vertical orientation, so CopyPress recommends that you think hard before you
choose horizontal.

The next step involves creating your visual hierarchy. The infographic needs focal points that the rest of
the design complements.

Step 6: Develop Your Promotion Plan

You want your target audience to actually see and engage with your final work. That’s why you need to
find the perfect places to debut and distribute the infographic.

Think about all your owned and paid content destinations and social media channels you can leverage,
as well as influencers you know who could potentially work with you to help amplify your content.
 53

You’ll also need other elements, like promo snippets from the content, to market your new infographic.
Make a list of what you’ll need before the infographic is finished so that you’ll be ready to get a
jumpstart on your marketing as soon as the content is complete.

Step 7: Set Your ROI Goals

Make sure you set return on investment (ROI) goals for the infographic, if you haven’t already done so in
the planning phase. You want to be able to measure whether your infographic has met your objectives
or not at the end of your campaign, so you can demonstrate your ROI to the leadership team.

For example, if your goal is to increase leads, you want to make sure that you have included a call-to-
action within your infographic to contact your company or complete a lead gen form for access to
additional resources. This way, you can measure the number of leads your infographic is generating.

Types of Image Files

 JPEG (or JPG) - Joint Photographic Experts Group.
 PNG - Portable Network Graphics.
 GIF - Graphics Interchange Format.
 TIFF - Tagged Image File.
 PSD - Photoshop Document.
 PDF - Portable Document Format.
 EPS - Encapsulated Postscript.
 AI - Adobe Illustrator Document.

Image Manipulation Principles and Basic Techniques

Resources about various image manipulation techniques like image cropping, blending, combining and
merging Images, extracting part of an image and more.

 Background Image Processing — Resources about generating background images, adding and removing
a background of an image using image manipulation techniques.

 Blending, Combining and Merging Images — Resources about blending and merging multiple images
into a single image with the help of frameworks like .NET and more.

 Extracting Part of an Image — Resources about extracting part of an image or extracting image data
using frameworks such as JavaScript, GIMP and more.
 54

 Flip, Invert, and Mirror Images — Resources about how to automatically flip an image, invert image
colours, or create mirror images using frameworks such as HTML5, jQuery and more.

 Generating Image Thumbnails — Resources about generating reduced-size versions of images using
frameworks and programming languages like PHP, ASP.NET and more.

 Generating PDF from Image — Resources about generating PDF files from images using PHP, JavaScript
and more.

 Image Color Count and Palette Detection — Resources about extracting colors from images using
frameworks language like PHP, Java and more.

 Image Cropping and Automatic Cropping — Resource about image cropping, a usefull feature in web
application that allows the user to crop an image on a web page and save it for later use.

 Image fitting — Resources about fitting images into browsers and Div containers using frameworks
language like CSS, jQuery and more.

 Image Overlay Text — Resources about how to overlay text on an image using CSS, HTML and JavaScript,
including examples tutorials and more.

 Image Padding — Resources about image padding, a property that is used to generate space around an
image by clearing an area around the image.

 Image Rotation and Orientation — Resources about rotating images and changing their orientation using
image manipulation techniques and programming languages like CSS, JavaScript and jQuery.

 Uploading — is the transmission of a file from one computer system to another, usually larger
computer system

 Image sharing, or photo sharing— is the publishing or transfer of a user's digital photos online. Image
sharing websites offer services such as uploading, hosting, managing and sharing of photos (publicly or
privately)

 Image hosting— it is a hosting service allows individuals to upload images to an Internet website. The
image host will then store the image onto its server, and show the individual different types of code to
allow others to view that image

 55


Lesson
Online Platforms

for ICT

7 Content and Development
Performance Standard:

1. Discuss what is online platforms and purpose of it

2. Discuss different Web Applications for content Development
3. Discuss the content management system and cloud computing in platforms

Online platform is a specially developed platform using Internet technology. Online platforms
have revolutionized access to any information. In our daily life today we used Internet in doing such
things and in our learning purposes. Here are some examples of Online Platforms:

Facebook is the biggest and the most popular social platform in the Internet. It is commonly used by
students and is a gaining ground among professionals too.

 Marketplace – allows users to post, read and respond to classified ads.

 Groups – allows users who have common interests to discover each other and interact.
 Events – allows users to publicize an event, invite others users and track those who plans to attend.
 Pages – allows users to create and promote a public page built around a specific and chosen topic.
 Presence technology – allows users to see which contacts are online and possible to chat as soon as
possible.
 56

Instagram is an online mobile media-sharing site that allows users to share pictures and videos either
publicly or privately on the app. Journalist commonly uses this online platform.

Twitter is an online news and social networking service where users post and interact with messages,
“tweets,” restricted to 140 characters. Registered users can post tweets, but those who are unregistered
can only read them.
 57

CONTENT MANAGEMENT SYSTEM

Content Management System (CMS) allows one to publish, edit and manipulate, organize and delete
web content. It is commonly used in blogs, news websites, and online shopping.
Cloud Computing

Cloud Computing is the delivery of computing services—servers, storage, databases, networking,

software, analytics and more—over the Internet (“the cloud”). Companies offering these computing
services are called cloud providers and typically charge for cloud computing services based on usage,
similar to how you are billed for water or electricity at home. You are probably using cloud computing
right now, even if you don’t realize it. If you use an online service to send email, edit documents, watch
movies or TV, listen to music, play games or store pictures and other files, it is likely that cloud
computing is making it all possible behind the scenes. The first cloud computing services are barely a
decade old, but already a variety of organizations—from tiny startups to global corporations,
government agencies to non-profits—are embracing the technology for all sorts of reasons.

Uses of cloud computing:

 Create new apps and services

 Store, back up and recover data
 Host websites and blogs
 Stream audio and video
 Deliver software on demand
 Analyze data for patterns and make predictions

Advantages of Cloud Computing:

 No need to install
 Saves hard disk space
 Easy access to your files
 Saves money
 No need to update
 Minimum system requirements
 Back-up and data recovery are relatively easier

Disadvantages of Cloud Computing:

 Can be hampered down by slow internet speed

 May require compatible software
 You do not own the software
 Security risks
 More prone to hacking
 Limited control over the infrastructure
 58

Web Applications for Content Development

Static Web Application

If you choose to create a static web app, the first thing to know is that this kind of web app
displays very little content and is not very flexible.
They are usually developed in HTML and CSS. However, animated objects such as banners, GIFs, videos,
etc., may also be included and shown in them. They can also be developed with jQuery and Ajax.
In addition, modifying the contents of static web apps is not easy. To do this, you first have to download
the HTML code, then modify it and finally upload it again to the server. These changes can only be made
by the webmaster or by the development company that planned and designed the app in the first place.
Examples of static web app development include professional portfolios or digital curriculums. Similarly,
a webpage introducing a company could also make use of this kind of web application to display contact
information or the like.
Dynamic Web Applications
Dynamic web applications are much more complex at a technical level. They use databases for
loading data and their contents are updated each time the user accesses them. They generally have an
administration panel (called CMS) from where administrators can correct or modify the app’s content
including text and images.
Many different programming languages can be used for dynamic web app development. PHP and ASP
are the most common languages used for this purpose because they allow you to structure the content.
In this kind of app, upgrading content is very simple and the server doesn’t even have to be accessed
when modifying it. In addition, it allows the implementation of plenty of features such as forums or
databases. Design − besides content − can be modified to match the administrator’s preferences.
E-COMMERCE
If the web application is an online store or shop, its development is likely to resemble that of m-
commerce or an e-commerce site. This kind of app’s development process is more complicated because
it must enable electronic payments via credit cards, PayPal or other payment methods. The developer
must also create a management panel for the administrator. It will be used for listing new products,
updating or deleting them and managing orders and payments.
 59

Portal Web Applications

By portal, we are referring to a kind of application in which we access several of its sections or
categories through a home page. These apps can include plenty of things: forums, chats, email,
browsers, areas accessed through registration, the latest content, etc.
Animated Web Applications
An animation is inevitably associated with FLASH technology. This programming approach allows for
presenting content with animated effects. It also enables more innovative and modern designs and is
one of the most widely used technologies by designers and creative directors. The drawback inherent to
developing animated web applications is that this kind of technology is not suitable for web positioning
and SEO optimization purposes because search engines cannot correctly read the information they
contain.
Web Application with a content management system
Content must be continually updated when it comes to web app development, so installing
a content management system (CMS) is a serious option to consider. The administrator can make use of
this CMS to implement changes and updates.
These content managers are intuitive and very easy to handle. Some examples of content management
systems are:

 WordPress: it’s undoubtedly the most widespread content manager around. There is plenty of
information, tutorials and guides available on the internet that will help you customise it and
understand how it works. In addition to all this, it’s free.

 Joomla: this cm is the second most popular after WordPress. It doesn’t have as many users as the latter
but does have a strong community and is also very intuitive.
 Drupal: it’s a free software CSM. It’s very adaptable and is especially recommended for building up
communities.
 60

Lesson Basic Web Page Creation

8 Using Static Web site and Online Platforms

Performance Standard:

1. Identify the advantages of web pages

2. Define the different tags in Hyper Text Mark-Up Language
3. Apply basic HTML tags in creating a web page
4. Steps in web page design using online platform

Content Standard:

1. The Web Pages

2. The Hyper Text Mark Up Language
3. Using HTML tags

INTRODUCTION

The Internet has been a source of information and communication. This is evident through its
component called a website. The website refers to an Internet service that contains information
composed of a group of web pages. A web page is a single page that contains text with hyperlinks; and
a hyperlink is a text that is connected to another web page. A change in webpage occurs every time the
hyperlink is clicked.

A tag refers to an HTML command that is used to develop and design the webpage. It is a word
that is between a less than and greater than symbol. A close tag refers to an html command that
supresses the previous format used. Tag parameter is attribute supplementary command in a tag.

Basic Tag Command in HyperText Mark Up Language (HTML)

1. <HTML> refers to a tag that declares the CONTENT as an HTML document.

Syntax:
<HTML> statement and tags </HTML>
2. <HEAD> refers to a tag that is placed at the beginning of the other HTML tags.
Syntax:
<HEAD> Javascript or Cascading Style Sheet (CCS) code </HEAD>
3. <TITLE> refers to a tag that displays a text in the titlebar.
Syntax:
<TITLE>this is my Project in Computer </TITLE>
 61

4. <BODY> refers to a tag that modifies the content body of the web page.
Syntax:
<BODY BGCOLOR=”GREEN”> Statement </BODY>
Parameter:
BGCOLOR = changes the background color.
BACKGROUND = changes the image of the webpage.
Syntax: <BODY BACKGROUND=”PICTURE.JPG”>
5. <B> means bold and refers to a tag that changes the text to boldface.
Syntax:
<B> Fatima </B>
6. <I> means italic it refers to a tag that change the text to italic.
Syntax:
<I> Fatima </I>
7. <U> means underline it refers to a tag that underlines a text.
Syntax:
<U>Fatima </U>
8. <FONT> refers to a tag that modifies the text font.
Syntax:
<FONT COLOR=”BLUE” SIZE=5 FACE=”TIMES NEW ROMAN”>
Parameter:
COLOR= changes the font color of the text
SIZE = changes the font size of the text
FACE = changes the font face of the text
9. <BR> means break it refers to a tag that is used to place the text to the next line.
Syntax:
<BR>FATIMA
10. <IMG SRC> means image source and it refers to a tag that is used to insert picture to the webpage
Syntax:
<IMG SRC=”PICTURE1.jpg” HEIGHT=100 WIDTH=100>
Parameter:
HEIGHT = changes the height of the picture
WIDTH = changes the width of the picture
11. <A HREF> means anchor hyper reference it refers to a tag that is used to make a text or image a
hyper link.
Syntax:
<A HREF=”SAMPLE.HTML”>next page </A>
12. <TABLE> refers to a tag that is used to add a table in a webpage.
Syntax:
<TABLE BORDER=1>
Statement
</TABLE>

13. <TH> means table header and refers to a tag that is placed in the first column of the table row.
Syntax:
<TH> NAMES </TH>
14. <TR> means table row and refers to a tag that adds a row to a table.
Syntax:
<TR> </TR>
 62

15. <TD> means table distance and refers to a tag that adds a column in a table.

Syntax:
<TD> JOSE RIZAL </TD>
16. <MARQUEE> refers to a tag that is used to move text or image in the web page.
Syntax:
<MARQUEE> FATIMA </MARQUEE>
17. <CENTER> refers to a tag that is used to put text in the center.
Syntax:
<CENTER> FATIMA</CENTER>
18. <! -- --> refers to a tag that is used to indicate a remark about the web page.
Syntax:
<! -- This is my Project 
19. <ol> means ordered list and a tag that indicates the name of a list of ordered items.
Syntax:
<ol> List of Student names</ol>
20. <li> means list a tag that indicates the item of each list.
Syntax:
<li> Jose Rizal</li>
21. <H1> means header1 a tag that increases the size of the text.
Syntax:
<H1> Fatima </H1>
22. <FORM> refers to tag that is used for adding objects to the web page.
Syntax:
<FORM >
23. <INPUT TYPE= TEXT> refers to the tag that is used add a textbox in the web page.
Syntax:
<INPUT TYPE=”TEXT” SIZE=30 NAME=”SURNAME”>
Parameter:
Size = change the length of the character of text allowed in the textbox
Name = names the textbox
24. <INPUT TYPE=CHECKBOX> refers to the tag that is used to add a checkbox in the web page.
Syntax:
<INPUT TYPE= CHECKBOX >
25. <INPUT TYPE= BUTTON> refers to the tag that is used to add a button.
Syntax:
<INPUT TYPE=BUTTON>
 63

Steps in creating a webpage:

1. Open Notepad program. Type the following the text.

<HTML>
<TITLE> My Project in Computer </TITLE>
<BODY BGCOLOR=”green”>
<HEAD> <!---Javascript Code --> </HEAD>
<CENTER><FONT COLOR =”white” SIZE=7>
OUR LADY OF FATIMA UNIVERSITY</CENTER><BR>
<FONT COLOR =”yellow” SIZE=5 FACE=”Garamond”>
Jose Rizal</BODY></FONT></HTML>
2. Click File > Save As > type the filename. “PROJECT.HTML”. Click Save.
3. The file icon changes to the default web browser. Then double-click the file.

Output webpage:

Figure # the Webpage Output

Steps in creating page design using online platform (WORDPRESS)

Step 1 Choose and buy your domain

Selecting a business domain name is a vital part of the presence and marketing associated with
your business. Ideally, this should be a .com that includes your business name. While your web host
might provide a domain for free, most experts suggest keeping your domain name and hosting services
separate to ensure you have ownership and control over your domain.

Step 2 Sign up for web hosting

Although there are free options, your best bet is to go with a paid host, again to ensure quality
and control. There are many affordable web hosts to choose from. Since you want to install WordPress,
just check that the host offers the WordPress script in its library (most include it).

Step 3 Connect your domain and web host services

After you sign up for hosting, you’ll receive information about how to log in to your account and the
address of your host’s name servers (two series of numbers). Copy the name server information, and
then head to your domain registrar and add the name server info to your domain name. This tells the
domain registrar where (what host) the domain should point to.
 64

Step 4 Install word press

Gone are the days when you had to download the script from the WordPress site and then upload to
your host. Most hosts offer a quick install option through their script library. Log into your host account
(i.e., cPanel) and find the WordPress script (if you’re unsure where this is in your cPanel, ask your host).
Click on “Install” and indicate where you want the script to install.

If you want your whole site on WordPress, use your domain name, leaving the directory option blank
(i.e., www.yourdomain.com/). If you already have a website and want to install a blog in a different
folder, write in the folder name after your domain. For example, if you want WordPress for your blog,
you can install it in www.yourdomain.com/blog/. The install will create the “blog” folder and install
WordPress there. During the install, you’ll also provide your admin name, blog name, and email, which
will be included in WordPress, although you can change the blog name and email later.

When complete, you’ll be given a link to the newly made WordPress site and a password. You’ll want to
change the password.

Step 5 Browse the WordPress Dashboard

The nice thing about WordPress is that even when it’s updated, the basic functions stay the same.
Once you learn where everything is and how it works, you’re good to go. Log in to your WordPress site
using your admin name and password. Once logged in, you’ll be taken to your dashboard. On the left is a
menu of all the standard options:

 Dashboard: Homepage of your dashboard.

 Posts: Blog articles.
 Media: Pictures, videos, etc., are stored. You can add media directly to this folder or on the fly
when writing a post or page. If you add media to a page, it will get stored in your Media folder.
 Pages: Static content such as your “About Me” page. If your home business offers a service,
you’d put your service information on a page.
 Comments: Manage and moderate comments left on your site.
 Appearance: Manage and customize your site theme, organize your sidebar widgets, create
menus (as allowed by your theme), and access the theme’s editor.

 Plugins: Add, delete, and update plugins. Some plugins add menu features directly to the
Dashboard menu, while others get added as a submenu item under Tools or Settings.
 Users: Manage people who register as guests, as well as manage permissions of those to whom
you give access. For example, if you have a virtual assistant, you may want to allow her to
update and make changes to the site.
 Tools: Import and export WordPress data. Some plugin settings are accessed through the Tools
menu.
 Settings: Set up how your blog is read, how comments are posted, create your permalink
structure (how your blog content URLs look), and more. Many plugin settings are accessed
through the settings.
 65

Step 6 Choose a WordPress Theme

WordPress offers default themes, or you can browse and install themes from the WP theme
library. Click on “Appearance,” then “Theme.” If you like the default theme, you can leave it, but choose
the “Customize” option (under the "Appearance" option) to change aspects such as color and the
header. You can change the theme by clicking on a different theme, and then clicking on “Activate.” If
you don’t like the default options, you can add a new theme. One way is to click on “Add Theme” where
you can access a theme library.

Simply click “Install” and then “Activate” to choose the theme. Another option is to find themes
from other sources. To use these themes, you need to download them from the source, then in your
WordPress Dashboard, click “Add Themes” then “Upload Theme.” Use the browse button to find the
theme you downloaded, click on the file (it’s usually a zip file), and then upload. Then click on “Install”
and “Activate.” Note that some themes add menu items to your left navigation. Also, some have
customization options such as adding your social media links.

Step 7 Set- Up sidebar and widgets

Under “Appearance” and then “Widgets,” you’ll see a list of widget options such as “Recent Posts” and
“Archives.” Usually, the default widgets in your sidebar are “Recent Posts,” “Recent Comments,” and
“Meta.” The great thing about WordPress is that adding or removing widgets simply involves dragging
and dropping where you want them. While many widgets serve a specific function (for example, listing
your most recent posts), there is a Text widget that allows you to add whatever you want, including
code.

This is a good place for adding your email list sign-up script or affiliate product codes. The
standard sidebar is on the right-hand side of your blog/site, but sometimes your theme may allow you
to choose where the sidebar is located. Other times the theme might have more than one sidebar, for
example, two on the left, and three at the bottom.

Step 8 Set- Up your plugins

WordPress comes ready-made with two plugins. Askimet is the anti-spam plugin you’ll want to
activate by getting a free activation code. Just click on the link in the Askimet plugin to get one. There
are millions of plugins that add cool features and functions to your website. For example, some plugins
will create a storefront on your WordPress site. But many plugins run behind the scenes to keep the site
safe and running smoothly. Basic plugins you should add include security (to keep the hackers out),
cache (to help improve speed and performance), backup, and SEO.

Plugins can be added under the “Plugin” option of the menu. Like themes, you can search for
plugins within the WP library, or get them from other sources and upload them to your WP site.

Step 9 Add Content to your site

Start by adding your static pages such as “About Me,” “Contact,” and whatever other information you
want visitors to have (such as a media kit). If you’re running your WordPress site like a standard website
and want a specific home page (e.g., About Me) to appear when visitors arrive, go to “Settings” then
 66

“Reading” and toggle “Static Page,” and then select what page or post you want on your homepage. If
you’re running a blog, you can leave the default setting, “Your Latest Posts.”

Once you have your pages, add posts related to your blog or home business topic. Both pages and posts
work the same. Click on “New Page” or “New Post” under "Page" or "Post" in the dashboard menu. Add
your title to the title box and your content below. WordPress gives you two options to add your content:
“Visual,” which is what-you-see-is-what-you-get, and “Text.” If you have code you want to include in
your page/post (such as an affiliate link), click the “Text” tab to add it. On the right-hand side of the
page, you’ll see options to publish or schedule your post, categorize it (including adding new categories),
tag it (including adding new tags), and add a featured image

Assignment:
1. List down 10 educational web sites. Explain the importance of the researched website.
2. List down 5 additional web page design using online platform

Values Integration:

The students’ creativity in designing is developed in web page development. The html activity
also improves also their critical thinking. Values of responsibility is also achieved since the theme for the
webpage they are developing is educational.
 67

Activity # 8

Name: __________________ Score:_____________________

Section: _________________ Date: ______________________

I. Instruction: Identification: Write your answers on the space provided.

___________ 1.It refers to the tag that is used to add a textbox in the web page.

___________ 2. It pertains to the tag that is used to add a checkbox in the web page.

___________ 3. It refers to the tag that is used to add a button.

___________ 4. It means a tag that is used to move text or image in the web page.

___________ 5. It relates to a tag that is used to put text in the center.

___________ 6. It pertains to a tag that is used to indicate a remark about the web page.

___________7. It concerns a tag that declares the content as an HTML document.

___________ 8. It pertains to a tag that is placed at the beginning of the other HTML tags.

___________ 9. It means a tag that displays text in the title bar.

___________ 10. It applies to a tag that modifies the content body of the web page.
___________ 11. This means bold and it refers to a tag that change the text to boldface.
___________ 12. It means image source and it refers to a tag that is used to insert picture to the
Webpage.
___________ 13. This means anchor hyper-reference and it refers to a tag that is used to make a
Text or image a hyperlink.
___________ 14. It pertains to a tag that is used to add a table in a web page.

___________ 15. It pertains to table row refers and it to a tag that adds a row in a table.

___________ 16. It means ordered list and is a tag that indicates the name of a list of ordered items.

___________ 17. This is a tag that indicates the item of each list.

___________ 18. It means header1 and is a tag that increases the size of the text.

___________ 19. It refers to a tag that is used for adding objects to the web page.

___________ 20. This means table row and it refers to a tag that adds a row to a table.
 68

Lesson
Collaborative ICT Development
9
Performance Standard:

1. Discuss the team structure and dynamics for ICT Content

2. Enumerate some collaborative tools and processes

Content Standard:

1. Team Structure and Dynamics for ICT content

2. Different collaborative tools and processes

Team Structure

1. Proficiency in strategic thinking, analytical and technical mind-set.

2. Proficiency in project management, leadership and team building
3. Ability to work across team
4. Good Command of oral language skills and writing ability
5. Good interpersonal communication skills and ability to work with other under pressure
and solve problems

Information System Groups

Responsibilities:

1. Help the team to plan and prioritize workloads and projects

2. Manage the team performance
3. Manage day to day operational activities
4. Be a technical escalation point for the team
5. Have excellent communication skills with the ability to communicate effectively face-to-face

Requirements
1. A good example of dynamic source would be a website which is updated on a regular basis.
2. The word dynamic is characterized by continuous change.
 69

Skills of Network Team

1. Changes can be made quickly and mistakes may go unnoticed

2. There may be conflicting information on different websites.
3. The Information may be biased or completely wrong.
4. Information overload

Telecoms Team

1. Can be updated quickly as change happen

2. A large number of people can access the information at the same time.
3. It is easy to find related information or to cross reference information
4. You don’t need to know where to look for the information.
5. Can access a lot of content
6. Often fairly inexpensive to maintain when compared with producing static information sources.

Team Structure Responsibilities

1. Prepare strategic and operation plans for the information communications technology (ICT).
2. Manage and provide oversight for the information of an ICT system etc.
3. Ensure development, implementation and maintenance of all polices related to ICT.
4. Develop and manage the planning and budgeting for the ICT services.

Desktop and Media Services Team

1. Master degree in computer science

2. Software Engineering, Computer engineering, Information communication technology,
electronics and telecommunications.
3. Required a minimum of 3 years’ experience in ICT environment with a working knowledge in
Project Management, Strategic planning, finance, accounting and procurement is required

Responsibilities

1. Staffing of events
2. Video editing and post production
3. Product research for new audio video technology
4. Preparation of files
5. Audio and video editing.

Director ICT Responsibilities

1. Undertake analysis, development, implementation and integration to support core ICT
Applications.
2. Participate in the progressive rotation of analyst
 70

Online collaborative tools and processes

Managing a virtual team poses a challenge that’s unique from a traditional team. The most
obvious, of course, is the lack of actual contact or face-to-face interaction. The importance of face-to-
face meeting can never be stressed enough. They facilitate a better understanding of interacting
parties through non-verbal cues and body language. Conversations in these situations also tend to be
lighter, therefore, presenting new opportunities, along with the fact that different social interactions
take place during such meetings.
Access and advances in cloud technology make interacting with virtual teams more “face to
face” than ever. It’s the next best thing, and for some, virtual team management has become the
order of the day, especially when cost and talent sourcing come into play.
In this guide, we line up the some of the best online collaboration tools for virtual teams. These tools
share communication, project management and document management features among them,
designed to move tasks and projects from initiation to completion. We also highlight the unique
features of each of these collaboration tools software to help you match your priority needs with the
right product.

Wrike

Wrike is our top in the list because it’s one of the most scalable cloud project management solutions
with excellent collaboration tools that keep your team in sync and updated with each other’s tasks
and activities. Its 3-Pane Project View makes it easy to see the big picture in one glance while allowing
you to drill down to details of individual tasks. This means project leaders can cut to the clutter of
daily activities, yet maintain control on specific areas that require attention, such as bottlenecks or
issues. Likewise, the whole team can communicate via the activity stream using @mentions, giving all
users direct access to each other for urgent issues.

Wrike won our Best Project Management Software Award 2018

Wrike is just as easy to adopt for a single project as handling multiple ones simultaneously. It
uses folders and tags that allow you to organize tasks and subtasks in a hierarchy across one or more
projects. Once you log into the system, the left pane on the dashboard shows the folder structure,
while the middle pane shows the specific project’s tasks. The right pane, on the other hand, details
the individual tasks, while an activity stream lets you scroll up and down for the most recent activities.
This simple setup means you can focus on overall progress to aid you in strategic decisions, while still
keeping a hands-on control over each team member’s progress. You are also within earshot of each
 71

individual team members, so communication is fast and clear. For example, a user can send you a
direct request or idea and, with your approval, can be shared at once with the entire team for action.
Even non-Wrike users, like suppliers or a creative agency, can be invited to participate to give
everyone clear visibility and clarity. Likewise, Wrike forms enable simplify and prioritize work requests
including issue/change requests, creative briefs, and proposals. Overall, Wrike is perfect for virtual
teams for its task management, task prioritization, workload management, and interactive Gantt chart
timeline.

1. 3-Pane View. The software’s signature feature, it allows you to see the big picture on the left pane
(folders), the tasks for individual projects on the middle pane and the individual task details on the
right pane.
2. URL-based requests. Work requests such as change/issue, proposals, and creative briefs can be
shared at once via URL, allowing even non-Wrike users to view and collaborate on the task or issue.
3. Interactive timeline. A Gantt timeline chart is updated in real time, giving you the most recent
progress status for each completed task as it happens.
4. Activity stream. Let’s you see the most recent team and individual activities in real time; it also lets
you communicate directly to a user via @mention.
5. Document management. The software integrates with the most useful document management
systems like Google Docs, Dropbox and Box.

Monday.com

Monday.com, formerly Dapulse, is a popular cloud collaboration software. It helps you

streamline the process of contributions from team members, from ideas to solutions and insights. The
software is built on a social collaboration structure that makes it easy and quick for members to swap
insights. There’s hardly training required; the software is intuitive even for the least technical savvy.
The software also organizes progress data in an intuitive way that makes it simple to monitor projects
and daily activities. It uses rows, called pulses, to keep all communication in one board. You can
mention users or groups, comment or thumb up a team member’s work and get notified via mobile or
desktop in real time. Likewise, it lets you drag and drop files in one location and share this centralized
knowledge bank with your team. Also, advanced scheduling feature for tasks and projects ensures
against manual entry errors. The software notifies you of overlapping schedules or approaching
deadlines, which is helpful to manage shared resources or keep a close tab on deliverables. As with
the simplicity of an IM chat tool, a particular information can be searched quickly within the platform.
 72

1. Social collaboration. The platform has the simplicity and intuitiveness of a social media network.
Team members can quickly swap insights, discuss issues or share files in a place.
2. Pulses. The software gives all team members one location to be notified of tasks or issues, discuss or
share insights. Pulses are rows on a board that acts as a single place for team interaction specific to
a project.
3. Searchable platform. All project-related information from discussions and task assignments to file
attachments are quickly searched across the platform.
4. Single-glance timeline. Let’s you quickly see who is working on what, allowing you to gauge
deadlines against real-time progress or evaluate workload versus team’s running capability.
5. Client-friendly. Allows you to invite clients into the system via permissions, lending to you
transparency and credibility.

Smart sheet

Smart sheet is an enterprise collaboration tool that is accessible from any device and browser, making
it ideal for virtual teams. It combines the time-tested use of spreadsheets with the ease of a visual
timeline and basic collaboration tools like file sharing, Gantt charts and discussions.
The software also lets you automate workflows and can be customized to unique processes. For
extended capabilities, it integrates with important productivity tools and systems like Google Apps,
Salesforce and Box.
Other key features include email integration, version control, task management, project hierarchy and
web forms.

1. Familiar to spreadsheet users. The interface is built around spreadsheet functions, so nearly anyone
can quickly adapt to the software’s UI with little trouble. Creating sheets is straightforward.
2. Flexible access. Files and data can be accessed from any browser or device.
3. Configurable processes. While it can automate repetitive workflows, it can also be customized to fit
unique processes.
4. Highly organized. Worksheets can be arranged using folders and workspaces.
5. Built-in communication tools. Features live chat, social media integration, email integration and
alerts & reminders to keep everyone in the loop.
 73

Lesson Development of Computer Software

10 and Multimedia

Performance Standard:

1. Analyse the development of software technology

2. Appreciate the functionality of software
3. Use the techniques in improving the software’s efficiency.
4. Discuss Interactive Multimedia

Content Standard:

1. The Software
2. System Software
3. Application Software and Multimedia

INTRODUCTION

To interact with the computers a need for software or program is a necessity as it is a

component that is used as a means of controlling the process to be done by the personal computer.
There are different types of software, such as Operating System, programming language, database,
multimedia, web development, network software, and system software.

Operating System (OS) is primarily used to control the computer process such as computing,
printing and internet connection.

There are known companies involved in software such as Microsoft, Linux or Mac OS. Most
popular of all in the market which holds more than 80% of operating systems is Microsoft (MS) Windows
based.

The Microsoft Windows product has many releases. The most popular are : Windows 95,
Windows 98, Windows XP, Windows 7, Windows 8, and currently Windows 10 ; The Linux Operating
System releases are Red Hat, Fedora and SuSe ;

How an OS works:
1. Windows XP runs primarily on an Operating System
32bit technology while Windows 10 in 64bit so a
compatible hardware is recommended in installing
this type of OS.
2. Application software will run on OS platform
compatible with it the Microsoft Office package such
as Word, Excel, PowerPoint and other software

Figure 21 The OS FAT simulator

 74

bundles usually functions with MS Windows.

Organizing the data to be processed in OS has a principle called Allocation Table.

Design 1: Suppose the memory capacity of a system unit is 1,024kb. Here is a simple illustration on how
it works: (The 0 indicates the address while the Free Space indicates the capacity that can be process by
the memory)

Design 2: When the Operating System is loaded the allocation

table is re-designed.

Suppose the size of the OS is 312kb and it is loaded with the

re-designed memory allocation;
In this case from the top partition the address 0
Indicates it, processes the 0S (312kb). Then a new address is
created address in which it indicates the Free Space of 312 of
712kb:

Formula: 1,024 – 312 = 712 for the free space Figure 22 The OS FAT with Free Space
allocation; and 0 + 312 = 312 for the new address.

Design 3: Suppose two programs- a word processor and are to

be processed simultaneously. Let us presume that the word
processors size is 100kb and Anti-virus size is 50kb. The
allocation table is re-designed:

Formula:
312 + 100 = 412 for the 2nd new address
412 + 50 = 462 for the 3rd new address
1,024 – 462 = 562 for the free space

Figure 23 The OS FAT with Job Allocation

Design 4: Let us presume that each file or process is called a job; Let us
analyze the table below.
 75

Application Software are software with a Figure 24 the OS FAT with 4 Job Allocation specific
function to produce, such as word
processing, spreadsheet, presentation, graphics, and video editing .

Here are notable application software and their area of functionality:

Software Functionality
Wordprocessor This software specializes on word processing such as producing text,
documents, letters, calling cards, brochures, leaflets and memorandum.
Spreadsheet This software is similar to an accounting system and can use formulas, for
are grading, inventory, payroll, billing, registration and voting system. It is
also equipped with creating graphs such as line, bar and pie chart.
Presentation This software is useful in presentations such as business proposals,
corporate meetings, seminars and educational activities.
Graphics This software specializes in editing images. Common types of image file
formats are: .JPG (.JPEG Joint Photographic Experts Group), .BMP (Bitmap)
and .GIF (Graphics Interchange Format).
Sound Editor This software enhances sound, such music mixing, clearing sounds,
converting music and sound effects.
Video Editor This software is primarily use is to edit videos. One of its functionality is
rendering text, images, sound and animation.
Publisher This software is primarily design to published newspapers, journals,
magazines, and books.

System Software are software that help and supports the operating system in maintaining the
computers: Here are notable system software and their area of functionality:

Software Functionality
Scandisk This software are primarily designed to check the integrity of the system. It
checks if there are possible bad sectors in the cluster of the array of data
installed in the system unit.
Disk Defragmenter This software is used to re-arrange the cluster and sector to each category it
is related. Therefore, it helps in speeding up the activities in the system unit.
Anti-Virus This software is used to disinfect or remove computer virus thus helping the
system unit process data without virus corruption.

Programming Software these are software that is used to create customized systems that are the
requirements specified by an entity for its primary purpose. A programming language is a set of
instructions needed to direct and control a system.

Customized system Functionality

Payroll System This customized system is used for computing the salary of employees of a
certain business or profession.
Inventory System This customized system is used for organizing the stocks of an entities
equipment, merchandise and assets.
Registration System This customized system is used for controlling records such as personal
profiles, attendance monitoring, and scheduling activities of an entity.
 76

Billing System This system is used for computing the consumption of an entity such as
electricity, water, communication, and internet service.
Sales System This system is used for sales and retail where the real time computation of
transactions is done.

Voting System This customized system is used for computing voters turn out similar to a
survey system where the candidates votes are tallied. It usually includes a
chart for graphic analysis.
Crime System This customize system is used to record, analyse and interpret data that are
related with crimes. It usually is used by authorities like the police and
criminal investigation agencies.
Accounting System This system is for accounting processes such as trial balancing, sales/
expenses and assets monitoring. It is very helpful in speeding up and
producing accurate accounting methods.

Package Software refers to software that are bundled with the Operating or System software. Here are
some examples of package software:

Software Functions
Computer Games This software are usually bundled with any electronic gadgets such
operating system or customized built by programmers using sophisticated
programming languages. Games nowadays are either 2D or 3D in form.
There are embedded programs in microchip that are used for virtual reality
type of games.
Calculator This miniature program is bundled to any operating system in the market
and function just as a normal calculator with extra features as add-ons.
Calendar This miniature programs are bundled to any operating system that gives the
user the features of a common calendar and a schedule organizer at the
same time.
Media player This program is used to play music or videos normally attached to a folder
called accessories.

Database Software these refers to software for storing large volumes of information and controlling
purposes is one of its features. A common database software has a table that is used in partitioning the
data or files. Here is a simple graphical idea of how a database software works:

Text
Text
Images
Images
Sound
Sound
Database Videos
Videos

Data are save to the database. Data are retrieved from the database

Figure 25 the Database

 77

Interactive Multimedia

Inter active media, also called interactive multimedia, any computer-delivered electronic system
that allows the user to control, combine, and manipulate different types of media, such as text, sound,
video, computer graphics, and animation. Interactive media integrate computer, memory storage,
digital (binary) data, telephone, television, and other information technologies. Their most common
applications include training programs, video games, electronic encyclopedias, and travel guides.
Interactive media shift the user’s role from observer to participant and are considered the next
generation of electronic information systems.
A personal computer (PC) system with conventional magnetic-disk memory storage technically
qualifies as a type of interactive media. More advanced interactive systems have been in use since the
development of the computer in the mid-20th century—as flight simulators in the aerospace industry,
for example. The term was popularized in the early 1990s, however, to describe PCs that incorporate
high-capacity optical (laser) memory devices and digital sound systems.
The most common media machine consists of a PC with a digital speaker unit and a CD-ROM (compact
disc read-only memory) drive, which optically retrieves data and instructions from a CD-ROM. Many
systems also integrate a handheld tool (e.g., a control pad or joystick) that is used to communicate with
the computer. Such systems permit users to read and rearrange sequences of text, animated images,
and sound that are stored on high-capacity CD-ROMs. Systems with CD write-once read-many (WORM)
units allow users to create and store sounds and images as well. Some PC-based media devices integrate
television and radio as well.
Among the interactive media systems under commercial development by the mid-1990s
were cable television services with computer interfaces that enable viewers to interact with television
programs; high-speed interactive audiovisual communications systems that rely on digital data from
fiber-optic lines or digitized wireless transmissions; and virtual reality systems that create small-scale
artificial sensory environments.

Rich Content in Online Environment

Contrast

Contrast occurs when two or more related elements are displayed differently, and the greater the
difference, the greater the contrast.

- The significant point of effective contrast is taking similar elements on a web page and
transforming them into unique entities, sections, asides, or containers, for example.

Some of the most common ways of crafting elements of contrast include establishing differences in their
attributes, such as color, which seems to be the most popularly used technique today.

Other attributes include size, shape, texture, orientation, position, and movement. However, two similar
elements with a greater degree of contrast do not always equate into a visually appealing experience.

Perhaps the best examples of using contrast can be demonstrated with the use of color values assigned
to text and typography elements on a website. The foreground color to test is the text itself, and then
the background color is just that -- whatever background the text is layered on top of, an image,
gradient, or RGBa color for that matter.
 78

- Using effective color contrast in web design is

actually quite important not just for the aesthetic
value, but for web accessibility. Many people are
color blind or visually impaired, and ensuring that
your website color contrast is adjusted accordingly
provides added responsiveness and accessibility.

Proximity

Proximity for web design purposes means that similar or related elements should be grouped together,
while those that are unrelated or dissimilar should be separated.

The physical relationships and spaces between web design elements create a level of emphasis, and
include other factors such as
1. Isolation
2. Similarity
3. Eye movement and direction
4. Continuance
5. Persistence of vision.

As elements overlap or touch, the top layer typically gets the primary attention. Did
you notice the "Proximity" piece of the puzzle on the left? Did your eye gravitate to
the purple puzzle piece first, and then move up and to the left to scan the
remaining pieces? However the overlapping object suddenly becomes
overshadowed if the other objects close by are in stark contrast; as objects become
closer together the contrasting elements will stand out. Striking a balance between
closeness and contrast, and even manipulating the two principles can achieve
varied results.

White space

Whitespace, many times referred to as negative space

- It is the portion of a page left unmarked, the portion that is left blank, or (as Mark would quote)
the empty space in a page.
- In web design terms, it’s the space between graphics, columns, images, text, margins and other
elements.
- It is the space left untouched in order to smooth things out and transform a page into
something elegant.
- It is also the blank space that reminds us that simpler designs are beautiful and that we don’t
need to create a layout filled with text and graphical elements to deliver a clear and direct
message.
 79

Alignment

Alignment. Allows us to make conscious decisions about how and where elements are placed on the
page.
- Alignment develops order and order conveys harmony; thus, bringing together web page
elements into a properly balanced blueprint. The arrangement of elements in an ordered
fashion conveys sound development and composition.
- Taking advantage of strategic placement helps us to craft stronger and more compelling
compositions and utilizing a grid system provides a standard guide for element placement.
- Without an alignment strategy we would end up with arbitrarily placed elements, with little or
no connection to additional or similar features. Without alignment, the look and feel of your
website would be a haphazard assortment of open-ended disorder.
- It sits in the background, hidden as an initial design element.
- It is the integral part of your template or theme, the backbone of your web design.

The sample layout displayed in Figure A starts

with a logo at the top left, header and
navigation area aligned horizontally along the
right side, and the banner image section just
below the nav section. The left sidebar is
aligned below the logo and extends to the top
of the footer section. The main content area is
aligned left with the banner and header. A right
side bar fills in the remaining area and is aligned
vertically with the right edge of header/nav and
banner image sections. The footer extends the
full width of the defined page.

Figure A

Assignment:

1. List some movies that were assisted by software and can be used for animation.
2. Define Multimedia and Interactivity
3. What are the rich content in the online environment

Values Integration:

The students’ self- confidence and nationalism is boosted when they learn that there are
Filipinos that were known to be the animators of critically limited international movies, that has been.
This encourages them that their dreams can be achieved if they work hard and be honest in their work
 80

Activity # 10

Name: __________________ Score:_____________________

Section: _________________ Date: ______________________

Exercise #3 Instructions:

I. Identification. Write your answer on the space provided.

__________1. This miniature program is bundled with any operating system in the market and functions
Just as a normal calculator.

__________2. This miniature program are bundled with any operating system that gives the user the
features of a common calendar and a schedule organizer.

___________3. This software is primarily used to control the computer process such as computing,
Printing, internet connection.

___________4. These are software with a specific function to produce such as word processing, or
spreadsheet.

___________5. This software specializes on word processing such as producing text, documents, letters,
calling cards, brochure, leaflets and memoranda.

___________6. This software is similar to an accounting system and uses formulas for grading,
inventory, payroll, billing, registration and voting system.

___________7. These are software that help and support the operating system in maintaining the
computers.

___________8. It is also equipped with creating graphs such as line, bar, and pie chart.

___________9. This software is useful in presentation such as business proposals, corporate meetings,
seminars and educational activities.

___________10. This customized system is used for sales and retail where real- time computation of
transactions is done.

II. Complete the acronyms: Write your answer on the space provided.

1. JPG = _________________________________
2. GIF =__________________________________
3. BMP=_________________________________
4. OS = __________________________________
5. MS = _________________________________
 81

Lesson Algorithm, Flowcharts and

11 Number System
Performance Standard:

1. Identify the principles of Algorithm

2. Define the different purposes of flowcharting
3. Identify the steps in the Number System

Content Standard:

1. The Algorithm
2. Flowcharts
3. The Number System

INTRODUCTION

Algorithm refers to a procedure of sequences to follow in achieving an objective. This principle

is highly attained in the area of computer flowcharting. It be can related to things like what can be done
at a certain situation and gives a planned idea on how achieve it. This term is similar to the word logic
and critical thinking or planning – as well as computer techniques and strategies – that is generally
defined as a higher form of intelligence. Experience can also be a good factor in creating algorithms for
the person doing it will base solutions on first-hand experiences.

For example, a computer programmer wants to design a Payroll system. There are possible ways
that this can be achieved:

Step 1 First possibility is to learn all the information needed with regard to the system from the
entity that requested for that type of program. The reason is that we do not want to start something
that based mainly on theories because the consequences is that one’s idea is different from the one
requesting is the system. Therefore the programmer needs to modify his work. Hence, his time, effort
and money were wasted.

Step 2 Know his own capabilities if his computer skills are sufficient enough to achieve the
objective; it is but logical to set a timetable in finishing a certain phase to monitor if there is progress.

Step 3 Ask suggestions and assistance if possible from other resource persons who have
background on payroll systems.

Step 4 Request for logistics, such as computer hardware, software and – if possible – dataware.
One main wonder why projects, such as those in system development, become delayed. It could be
because of lack of sufficient logistics.
 82

Step 5 Show the progress of your work based on timetable given so that immediate concerns
can be address and solved.

Step 6 If the payroll system is finished do a pilot test and solve the possible glitches that were
discovered.

Step 7 Maintain the payroll system and study possible additional improvement to the system.

Flowchart is an organized flow of illustrations represented by different figures with altering

functions each figures are connected by direction arrows.

Types of Flowchart figures:

1. Terminal symbol is used to declare the start point or end point.

2. Initialization /Preparation symbol is used to symbolize the variables for

the algorithm or programs.

3. Process symbol is used to symbolize the process of computation in

the algorithm or programs.

4. Decision symbol is used to symbolize a condition that would be

answerable by either True or False.

5. Input /Output symbol is used to symbolize the process of

accepting or displaying data in the flowchart.

6. Direction Arrow symbol is used to symbolize the flow in the

flowchart.

7. Connector symbol is used to symbolize the connection in the

flowchart specially if there are loops or iteration.
 83

Sample Flowchart:

1. Create a flowchart that will get the average of 3 inputted numbers . If the average is greater
than 50, then display “ The average is greater than 50”. Otherwise, display “The average is less
t
h
a
n

5
0
.
”

Figure 55 The Flowchart

 84

The Number System

The Number System was a concept about how computers work. This principle was influenced by the
computer architecture design created by John Von Neumann who constructed the Von Neumann
architecture.

The number conversion system is a principle that involves changing the number system according to the
following:

1. Binary digits in the number system includes 0 and 1.

Example: 10001, 10101, 11111
2. Octal digits in the number system includes 0,1,2,3,4,5,6 and 7.
Example: 145, 208, 555
3. Decimal digits in the number system includes 0,1,2,3,4,5,6,7,8 and 9.
Example: 10000, 374, 992
4. Hexadecimal digits in the number system includes 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F.
Example: 45, AC, D8F

Conversion from Binary to Decimal.

N= Variable for the Number System.

The base 2 represent that the N value is under binary.

The base 8 represent that the N value is under octal.
The base 10 represent that the N value is under decimal.
The base 16 represent that the N value is under hexadecimal.

Steps in converting binary to decimal :Multiply each binary digit by the base 2. The base of 2 is raise to
the power of N. In which N depends on the position of the digit from right to leftmost digit, the N value
start in the following order 0,1,2,3,4..and the like up to the final digit . After getting the products for
each digit, add all the products then the sum output will represent the decimal equivalent.
 85

Conversion from Decimal to Binary

Steps in converting decimal to binary: Divide each decimal digit by 2 get the remainder, do the same
step until the final dividend is already 0 or 1. Then arrange the remainder for each line by putting each
digit in an array form starting from right to left.

Conversion from Binary to Octal:

 86

From the Octal conversion table group the binary by 3 starting from its right going to the left, do the
step up to the last digits. The number of octal digits in the group should be three; if not the leftmost
value is automatically equal to zero.

1.)

Conversion from Hexadecimal to Binary

From the Hexadecimal conversion table group the binary by 4 starting from its right going to the left; do
the step up to the last digits. The number of hexadecimal digits in the group should be four if not the
leftmost value is automatically equal to zero.

Assignment:

1. Create a flow chart that will display the word Fatima 50 times using iteration principle.

Values Integration:

Critical thinking, decision making and strategies are the values that students will develop in this
lesson that are very helpful in finding the correct solution in different situations that they encounter in
life.
 87

Activity # 11

Name :__________________ Score:_____________________

Section: _________________ Date: ______________________

Instruction:

I. Convert the following number system. Show your solution.

1.

2.

3.

4.

5.
 88

Lesson
Present and Future Technology
12
Performance Standard:

1. Identify the current areas and trends of technology affecting our society
2. Define the latest innovations and future of technology
3. Appreciate the advantages of future technology

Content Standard:

1. The current trends in technology

2. Future Technology
3. Advantages of Future Technology

INTRODUCTION

Areas where current technology is adapted:

1. Assistive Medical Technology

Medical technology has been one of the beneficiaries of this computer age. The Braille system is
a technology that uses a keyboard in helping the physically-impaired in manipulating a computer. Other
examples of assisted devices are: OCR or Optical Character Recognition, Screen Reader, Magnification
and Voice Recognition. One notable person, Stephen Hawking, who suffers from ALS – also known as
Lou Gehrig's Disease – uses a computer-based communication system for communication and
interaction.

2. Communication Devices

Computers are connected to any type of electro-mechanic devices and this is called Embedded
system. It can refer to mobile devices or communication gadgets.

Mobile gadgets such as cellphones, tablets and iPods are gadgets used for communication.
There are microchips with embedded programs installed in these devices. They have features that
function on portable gadgets which control the operation of computer functions.

Mobile phones offer a lot features, such as communication service, music and videos, games,
internet connection, calendars, schedulers, storing images, apps, camera and video recording. These are
just the most common features. They vary in size and as time goes by, such gadgets evolve to smaller
packages that are lightweight but maintain the same features.
 89

Security Cameras advance household gadgets such

Digital Televisions, Audio system, microwave , washing
machines, air condition unit and closed circuit television

(CCTV) for security are included on this list.

Figure 64 The Closed Circuit Television (CCTV)

When choosing a mobile phone, there are things to

consider such as:

1.) Think of what you need. Consider what is

essential, such as saving money.
2.) Check the integrity of the manufacturer of the
mobile gadgets you are buying. Sometimes, not
all features work. A credible manufacturer offers
technical maintenance for warranty.
3.) Check all the features of the mobile phone if
they function well. Let the person selling the
product test it before you leave the store.
4.) Beware of buying second-hand products. You are
not sure of its integrity since it has been used
already and there might already be alarming
defects. Buy a new one if possible.
5.) Avoid purchasing mobile phones that are not
updated with the latest technology. You might
buy phones that are already obsolete. This would
lessen technical service since the spare parts and
technology are no longer available.

3. Transportation System Figure 65 The Electronic Transport System.

In the area of transportation system, the bullet trains in Japan is an example of locomotives
powered by microchip that are embedded with programs that control sensor to perform automatic
control , avoid collisions, use velocity control and GPS system or Global Positioning System). Traffic
congestion is a familiar problem here in Manila roads are commonly clogged because of the sheer
volume of automobiles passing by EDSA and certain narrow roads . One solution is the automatic
stop light traffic scheme where it adjusts to the current situation of road condition. It automatically
adjusts and prioritizes roads that are too congested lessening the volume of cars passing by
intersections. Buses use a computerized ticketing system. It is a process in which a bus conductor
just presses on a touch screen portable device the destination of the passenger then the machine
automatically processes the fare and prints it. The toll gates in Luzon namely NLEX and SLEX use an
E-Pass technology that uses a sensor which reacts to cars entering and exiting the tollgate. It simply
 90

allows a car to pass by after

detecting an e-pass gadget
attached to the car and it re-
computes its current balance
stored.

Likewise, parking space now

a days uses a sensor technology
that locates a parking slot if it is
available for a vehicle to park it
is also equipped with an
embedded program that gathers
data regarding the volume of Figure 66 The North Luzon Expressway tollgate.
occupant vehicles occupant for the
day.

Modern Airplanes are equipped with microchip that are program to navigate as autopilot. This
innovation has help airline industry in preventing accidents cause by machine malfunction or sudden
health illness to the pilot.

4. Business Industry

The banking industry has interconnected its service

via an ATM or Automated Teller Machines the network
connection can perform deposit, withdrawals, balancing
accounts and can be used 24 hours a day. This
technology not just stretches out here in local banks but
also to bank branches abroad making it much more
convenient for clients of bank who travel internationally.

Figure 67 An Automated Teller Machine

 91

6. Robotics Technology

Robotics technology has been described as the future of

technology. There are numerous articles written about it but
let us have a general idea why this topic really matters . The
word robot is a czechs word meaning robota. To do work or
labor unlike what the movies foretold in cinema plays like
transformer, terminator and iron man movies. This future
technology was not designed for robots to engage in war in
war to man or conquer the world, but to help man with some
limitations he can not do.

Figure 68 A Microcontroller.
Robots today are powered by a chip or a microcontroller
( a microcontroller which serves as the brain of the robot) . This is embedded by programming languages
in computer. They are programmed to carry out the instructions to be perform. There are areas were
robots are essential. These are the following:

1. Medical technology is where robots as a necessity had been tested for the last 10 years and it has
proven that in crucial situations such as
performing surgery to save lives or as simple as
sorting and distributing medicine based on a
patient is prescription. Da Vinci is robotic a
tethered robot that uses its manipulators
(serves like human arms) and End effector that
are interchangeable (like human hands and
fingers) in performing such delicate operations
such as heart surgery. Since its innovation it
saved many lives already, this wonder robot is
actually controlled by a doctor using a console
operator because robots are more stable with
its particular functions unlike humans who are
Figure 69 A PBOT robot.
susceptible to human errors such as physical
health and emotion. The Da Vinci had
successful rate in the field of medicine’s history.

2. Space Technology - during the past-man has wandered what it’s like in outer space the landing of man
in the moon and space exploration conducted by NASA (National Aeronautics Space Agency). It has still
haven’t reach to the point of knowing the real secret of outer space until robotics steps- in. The robot
rover named “curiosity” was a breakthrough in space exploration in the planet Mars. In its exploration it
 92

has sent numerous images of the surface of Mars. It also sent pictures that water might had been exist
in Mars based on some water marking found in rock samples. The space exploration is a step to learn be
if it’s possible to live in outer space in the failure because of signs that earth might uninhabitable in the
near future because of pollution.

3. Underwater Exploration Technology emphasizes that the earth is surrounded by large bodies of
water. There are things that are still not explored by man in the vast seas. Scientific agencies of different
world governments had collaborated with different large companies to fund underwater explorations.
The interest in underwater exploration has many benefits; these are : a.) possible cure for diseases
such as cancer and HIV infections might be found on underwater organisms; b.) Retrieve wreckage of
sunken ships or planes and, c.) discovery of new biological organisms which is a need of science.

4. Industry, Entertainment and Household Technology

notes that had been using industrial robots for the last 10
years but unlike the first industrial robots , these robots in
factories have helped the growth in revenue of
businesses. The car industry specially in Japan is booming
Japan is considered as the number one country pioneering
in robots. One particular robot is ASIMO, a humanoid
robot created by Honda car manufacturer which is a robot
that would later on replace man in industrial work . In the
area of entertainment, there are robots named HRP4 or
Actroid Der which mimic human behaviour. They look like
humans with sense abilities to talk, show emotions, and
walk . Most work jobs at home such as security concerns,
controlling appliances , playing music and watching the TV,
doing the laundry and even cooking have a bright future as
inventors are developing technologies that cater to these
needs. There are robots like PaPero that are designed to
help man in household work. Figure 70 A humanoid robot.
 93

Assignment:

1. List down other technologies that affect our society.

Values Integration:

The last chapter gave us a glimpse of the present now and the future of technology. The
students learned to appreciate the values of creativity, hard work and discipline in achieving a goal. They
also develop social responsibility by using computers to help others.
 94

Activity # 12

Name :__________________ Score:_____________________

Section: _________________ Date: ______________________

I. Instruction: Identification: Write your answers on the space provided.

____________1. This is the meaning of the Czech word ‘robot’.

____________2. It serve as the brain of the robot.

____________3. This is a tethered robot that performs such delicate operations such as heart surgery.

____________4. This robot was sent for space exploration to planet Mars planet that returned images
of its extra-terrestrial terrain.
____________5.It is a humanoid robot created by Honda Car Manufacturing.

II. Enumeration: Write your answers on the space provided.

Give five (5) Tips in buying a mobile phone.

1._____________________________________________________

2. _____________________________________________________

3. _____________________________________________________

4. _____________________________________________________

5. _____________________________________________________

Give five (5) areas were robots are useful.

6._____________________________________________________

7. _____________________________________________________

8. _____________________________________________________

9. _____________________________________________________

10. _____________________________________________________
95
 96

Bibliography

Teukolsky (2015), AP Computer Science A Barrons 7th Edition, Barrons Educational Service

Laudon et..al(2013) Management Information System: Pearson Horizon Edition

Miller (2013) Computer Basics Absolute Beginners Guide 6th Edition: QUE Pearson Education

Kendall et..al (2014) System Analysis and Design 9th Edition : Pearson Edition

Matthews (2014) Windows 8.1 for Seniors Quick Step: McGraw Hill

Shelly et..al (2010) Discovering Computers Complete 2nd Edition :Cengage Learning

Brian et..al(2013) Using Information Technology : Mc Graw Hill