Archdiocese of Lingayen-Dagupan

St. Vincent’s Catholic School of Bayambang, Inc.

Quezon Boulevard, Bayambang, Pangasinan
S.Y.:2023-2024

Learning Module in Empowerment Technologies

Chapter 1
Information and Communication Technology
Introduction
Since the invention of the electronic digital computers in the 1940s, technologies used in the field of generating
and producing information have also evolved. Technologies only served the most basic tasks for the general
public while the business sector, government agencies, and other companies also struggle for their
improvements.

The breakthroughs of the internet made the generation and production of information evolve into sharing,
sometimes even for free using different platforms. This chapter discusses the present and future technologies
that can help you be an active element of the information and communication loop.

ICT
Information and communications technology (ICT) refers to all technology that is used to handle
telecommunication and access information. It also includes broadcast media, management systems, and
network-based control.

Modern, definitions describe ICT as the convergence of several technologies including internet and wireless
medium, but the primary focus is on the access and sharing of information and communications.

It includes the use of computers, radio, television, cellular or mobile phones, network hardware and software,
internet connections, satellite systems, and applications needed for video conferencing and distance learning in
the field of education.

Pre-Learning Check

Instruction: Give the meaning of the following acronym and abbreviation.

a. ICT - __________________________
b. WAN - ________________________
c. .com - ________________________
d. .edu - _________________________
ICT nowadays has also widened its horizons in developing new tools or emerging technologies. However, the
present information superhighway mainly utilizes the advantages of the tools' mobility. Mobile devices can
communicate through the following communication technologies:

 wireless fidelity (Wi-Fi) - a type of wireless local area network technology

 Bluetooth - uses packet-based transmission over short range radio signals
 third generation (3G), fourth generation (4G), global system for mobile communications (GSM), and
general packet radio service (GPRS)
 data services - data networking services for mobile phones
 dial-up services - data networking services using modems and telephone lines
 virtual private networks (VPN) secure access to a private network
Quick Quiz

1. Which of the following devices uses Bluetooth of Wi-Fi to communicate?

a. Landline Phone
b. Tablet
c. Fax Machine
d. Radio
2. Using a word processing software create an essay describing the roles of ICT in your daily living.

Emerging Technologies
1. Artificial intelligence (AI)
The branch of computer science focused with making computers work and act like humans.
2. Robotics
The field of computer science and engineering concerned with creating devices that can move and react
to sensory input. It is a form of artificial intelligence.
3. Biometrics
In ICT, biometrics is the technology used to measure and analyze human body characteristics such as
DNA, fingerprints, eye retinas and irises, voice patterns, facial patterns, and hand measurements, mainly
for authentication purposes.
4. Quantum cryptography
The science of encoding and decoding information or messages which depends on physics, not
mathematics. It is used for information privacy and security.
5. Computer-assisted translation (CAT)
The use of computers to assist in the translation of one or more natural languages into another or others,
and vice versa.
6. 3D imaging and holography
Holography is a photographic technique that uses light to project objects in a way that appears three-
dimensional.
7. Virtual reality
The term used to describe a three-dimensional, computer-generated environment that can be explored
and interacted with by a person.

ONLINE SYSTEMS: FUNCTIONS AND PLATFORMS

The concept "online" is described as a state of being connected to the cyberspace through a medium of internet
or simply to a computer network even without internet.

However, the use of internet resources is not only limited to surfing the web and communication; it also became
the most accessible medium for entertainment, news, and even education.

Online systems can vary in nature since there are many services that are now offered using the internet. These
may include computerized reservation systems, internet and intranet support tools, and learning management
systems.

Platforms
A platform is defined as a group of technologies that are used as a base upon which other applications,
processes, or technologies are developed.

According to an article, which features a blog of Marc Andreessen, a platform is a system that can be
programmed and therefore customized by outside developers who are the users. The development of the
applications varies as the users evaluate and recreate the programs based on their needs.

Quick Laboratories

Search for at least three examples of online platforms and describe each. Make a report about your research
using a slideshow presentation.
Common Online Platforms
1. Social media platform
It is a web- based technology that allows the R development, deployment, and management of social
media solutions and services. It provides solutions to creating social media websites.
2. E-commerce platform
It is a collection of software technologies that allows merchants to create a storefront on the internet.
3. Online learning platform
It is an incorporated set of interactive online services that provides the teachers, learners, parents, and
others involved in the education sector with a wide range of tools and resources to support and enhance
the delivery and management of education through the internet.
4. Online video platforms
It is a service providing end-to-end tools used to create, customize, publish, and manage videos online.

ONLINE SAFETY AND SECURITY, ETHICS AND NETIQUETTE

The introduction of the World Wide Web (WWW) and internet has made great breakthroughs in the field of
information sharing and communication. It helped connect people miles away from each other. However, these
advances carried drawbacks wherein the issue of safety security, and ethics of the consumers are compromised.

Common issues and crimes on the internet are the following:

1. cyberbullying
2. hacking
3. identity theft
4. plagiarism
5. intellectual property rights and copyright issues
These issues caused the formulation of the rules and regulations to be followed when using the internet. Since
the internet, especially the social media, allows you to post everything every day some personal information
might be given to or seen by unknown people. Online safety and security defines how you are going to keep
yourself safe while surfing the web.

Online Ethics and Netiquette

Online ethics focuses on the acceptable use of online resources in an online environment. Netiquette, on the
other hand, focuses on the acceptable behavior of the person while using the internet resource. Netiquette is a
combination of the words "net" (from internet) and "etiquette (netiquette).

Many websites and organizations have created their own list of netiquettes for kids, teens, and even parents for
them to be able to protect their children. The ones given on the left are general rules or netiquettes when using
the internet.

Quick Quiz

List five different search engines that you know. Which one works the best for you and why?

ONLINE SEARCH AND RESEARCH SKILLS

Since the web is a maze of connected data and information, you may not be able to really get the best out of it
when searching. Search engines, on the other hand, have their own systems of giving you their best results. But
this can be solved by helping the computer in searching by using advanced techniques in information gathering.

Just take note, most techniques will best suit with Google search engine.

1. Choose your web browser based on the best search engine for you.
 2. Use punctuation and Boolean Operators (AND, OR, NOT).
3. Filter results by setting the range of time it was searched.
4. Use truncations (*, !, ?, and $).
5. Limit your search to specifics.
6. Use quotation marks for specific phrases.
7. Use the Advanced Search button to refine the search.
8. Use Browser history.
9. Read and spell-check.

Improving Your Research Skills Online

1. Know your sources.
Make sure to find the most reliable information which can be found in multiple sources or, better, to
have the original source.
2. Use your web browser properly.
Know the capabilities of your preferred browser to help make your search faster and easier.
3. Organize your bookmarks.
Use your browser's bookmark manager to organize the links you have marked. If possible, create folders
and subfolders.
4. Learn to use advanced search techniques.
Practice using advanced search techniques which are readily available in Google for instance.
5. Follow the web.
Follow the wave of information in the web. Just make sure to read and be critical in every link or page
you click.

Wearable Technologies
Technologies today are getting smaller and mobile. Some companies even planned and created their prototypes
of the future use of technology whether in communication, health and wellness, science, forensics, and military.
Expand your knowledge about these technologies specifically wearable technologies.

a. Glass app*
b. Smartskin*
c. Bendable or flexible

Looking Forward...E-Commerce
The Philippines is now considered as one of the countries in Asia Pacific that consumes more than 3 hours on
the web. Users are mostly the younger generation, and social media is the most popular platform being visited.

An article features the positive responses of the young Filipinos toward e-commerce. It was mentioned in the
article that netizens (79 percent) mostly discuss products and services while staying online. Even though most
netizens are knowledgeable of the different online stores, many are still afraid to make purchases due to
credibility issues.

Another article also featured the opportunities and challenges facing e-commerce in the country. It was
mentioned that social networking still dominates the activities done by most netizens. Despite the situation, the
rise of e-commerce websites is still growing and promising.

E-commerce has the following advantages to organizations, to consumers, and to society:

1. It allows expansion of market and competition.

2. It provides more choices for customers.
3. It enables easy access to products to rural areas.
Chapter 2
Applied Productivity Tools
Productivity Tools

Productivity tools can be a freeware or shareware. A freeware is copyrighted, which can be used for free
and for an unlimited time while shareware is commercial software that is copyrighted, which can be copied for
trial but needs to be purchased for continued use.

One of the most popular productivity suites is the Microsoft Office developed by Microsoft. This
includes word processing software, electronic spread- sheet, and presentation software. Not all Microsoft Office
applications include Access and Publisher. You can tell that some versions of Office contain a desk- top
publishing program. These tools will help you create, organize, and present information to an audience for a
more effective communication.

Reports, nowadays, demand to be well-presented and dynamic, away from the usual ways of presenting
information. A lot of presentation software are available whether online or offline. Similarly, financial reports
are calculated and tabulated using electronic spreadsheets because of the automatic formulas and functions
available. These programs are also made available to mobile devices which are also downloadable from the
web.

Pre-Learning Check

A. Identify the shortcut keys of the following command:

1. Copy - ________________________________
2. Close application window - _______________
3. Select all - _____________________________
4. Refresh Desktop or Window - _____________
5. Access Help Command - _________________
B. Rate your knowledge and skills of the command (1-3) 1 is the lowest while 3 is the highest.
1. Launch an Application - ________________
2. Save a document - _____________________
3. Enter data in a spreadsheet - _____________
4. Create a simple slide show - ______________

Microsoft Office

Word is one of the software of the Microsoft Office 2013 suite. It offers a set of tools that is advanced
compared to its previous versions. Along with its new features are the advanced techniques including
hyperlinks, macros, and mail merge.

PowerPoint, on the other hand, allows you to create slide show presentations wherein you can format the
texts and images, adding also animations and other multimedia components interactively.

Excel is one of the applications created by Microsoft, used to simulate a paper worksheet. It is composed
of cells that are represented in rows and columns designed to perform basic arithmetic operations. It is widely
used in accounting and financial applications, as well as statistics and engineering calculations.

Keyboard Shortcut in Microsoft Word

Ctrl + A = Select All

Ctrl + C = Copy selected text
Ctrl + V = Paste
Ctrl + X = Cut selected text
Ctrl + F = Open find box
Ctrl + I = Italicize selected text
Ctrl + U = Underline selection
Ctrl + B = Bold selected text
Ctrl + K = Insert Link
Ctrl + Y = Redo last action
Ctrl + Z = Undo last action
Ctrl + G = Find and replace
Ctrl + L = Align selected text left
Ctrl + E = Align selected text center
Ctrl + R = Align selected text right
Ctrl + shift + F = Change Font

Note: You may visit different search engines to know more about the keyboard shortcut.

Spreadsheet Guide

What is Spreadsheet?
A spreadsheet or worksheet is a file made of rows and columns that help sort, organize, and arrange data
efficiently, and calculate numerical data.

Guide on How to Use Spreadsheet

1. Opening an excel spreadsheet

When you first open Excel (by double-clicking the icon or selecting it from the Start menu), the
application will ask what you want to do.

2. Working with the Ribbon

The Ribbon is the central control panel of Excel. You can do just about everything you need to directly
from the Ribbon.

3. Managing your Sheets

As we saw, workbooks can contain multiple sheets. You can manage those sheets with the sheet tabs
near the bottom of the screen. Click a tab to open that particular worksheet.

4. Entering Data
And while entering data is one of the most central and important things you can do in Excel.

5. Basic Calculations
Now that we’ve seen how to get some basic data into our spreadsheet, we’re going to do some things
with it. Running basic calculations in Excel is easy. First, we’ll look at how to add two numbers.

6. Unlocking the power of Function

Excel’s greatest power lies in functions. These let you run complex calculations with a few keypresses.

7. Saving and Sharing your Work

Hit Ctrl + S to save. If you haven’t yet saved your spreadsheet, you’ll be asked where you want to save
it and what you want to call it.

Reference: How To Use Excel: A Beginner’s Guide To Getting Started ([Link])

Guide in Creating PowerPoint Presentation

What is PowerPoint Presentation?

A PowerPoint presentation is a digital slideshow created using Microsoft PowerPoint software. It consists of a
series of slides that can include text, images, graphs, videos, and other multimedia elements.

Guide on Hoe to Use PowerPoint Presentation

1. Create a Presentation
1. Open PowerPoint.
2. In the left pane, select New.
3. Select an option:
o To create a presentation from scratch, select Blank Presentation.
 o To use a prepared design, select one of the templates.
o To see tips for using PowerPoint, select Take a Tour, and then select Create.
2. Add and Format Text
1. Place the cursor inside a text box, and then type something.
2. Select the text, and then select one or more options from the Font section of the Home tab, such
as Font, Increase Font Size, Decrease Font Size, Bold, Italic, Underline, etc.
3. To create bulleted or numbered lists, select the text, and then select Bullets or Numbering.
3. Add a Picture, Shape and More
1. Go to the Insert tab.
2. To add a picture:
o In the Images section, select Pictures.
o In the Insert Picture From menu, select the source you want.
o Browse for the picture you want, select it, and then select Insert.

Key features of PowerPoint presentations include:

 Slides: Individual pages within the presentation that contain content.
 Templates: Pre-designed layouts that help maintain a consistent look and feel.
 Transitions and Animations: Effects that add movement to slides and elements, making the presentation
more engaging.
 Speaker Notes: Notes for the presenter that can guide them during the presentation without appearing on
the slides.
 Collaboration Tools: Features that allow multiple users to work on a presentation simultaneously.

What is the difference between Animation and Transition?

Animations
Animations are effects applied to individual elements within a slide, such as text, images, shapes, or charts.
They control how these elements appear, move, or change on the slide.

Transitions
Transitions are effects that occur when moving from one slide to another in a presentation. They control how
the entire slide changes when you advance to the next slide.

Chapter 3
Imaging and Design for the Online Environment
PRINCIPLES OF GRAPHICS AND DESIGN

Across disciplines, the following principles are followed to standardize image creation and manipulation using
any graphic software. It will help you create layouts and design web pages compliant with the protocols.

1. Balance. It describes the placement of elements of equal weight on the page. The three types of balance are
symmetrical, asymmetrical, and radial.

2. Movement. It describes the flow of elements on the page.

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

4. Repetition. It describes consistent and balanced repetition of a design or element.

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

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

7. Whitespace. It is the negative space or large margins that allow your design to breathe within the elements.
Pre-Learning Check
Elements of Design
Write the letter of your answer on the line.

a. Pattern c. Unity
b. Balance d. Focal Point

1. This is achieved when all parts of a composition appear to have equal weight and is stable.
2. It is obtained by repeating colors and shapes-all parts of the design.
3. It is the center of interest.
4. It is when lines, colors, or shapes are repeated over and over in a planned way.

INFOGRAPHIC

Infographic, also known as data visualization, is defined by Oxford Dictionary as a visual image such as a chart
or diagram that is used to explain information or data.

Infographic makes the data easily understood at a glance and quickly communicates a message especially to
simplify the presentation of large amounts of data. It is also used to easily compare data patterns and
relationships.

Like designing for a desktop publishing whether for the web or not, there are also important elements that
should be considered in designing an infographic.

When searching the net, you can find a lot of principles and guidelines on how to create an infographic.

1. Thesis/Story. The subject and the main idea of your infographic must be clear.

2. Data. Data must be well-organized and supports the main idea.

3. Simplicity (color, style, and illustrations). You must be able to create your own color palette; your style must
be able to attract readers so as not to make your infographic full of text. Do not use stock photos.

4. Sources. You must cite your sources so as to give credibility to your data.

5. Branding/Shareability. Your infographic must be creative and innovative.

IMAGE FILE FORMATS

Since the introduction of graphics on the web, file formats also became an important aspect in the design stage.
The most common file formats are JPEG, GIF, BMP, TIFF, and PNG.

JPEG

JPEG or Joint Photographic Experts Group is the most popular format used on the web. JPEG files are very
'lossy' files where much of the information about the image is lost from the original state to keep the image file
size small.

JPEG files are used mostly by photographers, artists, graphic designers, medical imaging specialists, art
historians, and other groups because image quality and color fidelity is important in the field.

GIF

GIF or Graphics Interchange Format is limited to the 8-bit palette with only 256 colors. This format was
popularized in the 1980s as an efficient means to transmit images across data networks and on the web since it
uses the basic form of file compression.

GIF is best used for diagrams, cartoons, and logos which use few colors and is the chosen format for animation
effects.
BMP

BMP or bitmap image file or device independent bitmap (DIB) file format is the image file used in the
Microsoft Windows operating system. It is an uncompressed file and is made up of millions of dots called
'pixels,' with different colors and arrangements. It is also called raster image.

BMP file format is not usually used on the web since it takes up a big space in the memory and does not scale
well.

TIFF

TIFF or Tagged Image File Format is a file format created originally by Aldus Corporation for desktop
publishing.

PNG

PNG or Portable Network Graphic is an image format developed by a group of graphic software developers as a
nonproprietary alternative to the GIF format. This format supports full-color images and used for photographic
images. However, the resulting file is much larger than with lossy JPEG compression. PNG does best with line
art, text, and logo.

PRINCIPLES AND BASIC TECHNIQUES OF IMAGE MANIPULATION

There are many available programs on the web for instant image manipulation and other editing techniques.
However, whether you are using free software or purchased one, there are basic techniques common to all
image editing programs.

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

2. Color Balance
In any image manipulating program, this command will allow you to make changes in the mixture of colors in
an image.

3. Adjusting the Brightness and Contrast

This command is the most basic technique when adjusting the image tone (highlights, shadows, and midtones).

4. Compression and Resizing

Compressing and resizing an image is an important aspect in image manipulation. Images to be uploaded on the
web must be of the standard resolution of 72 dpi (dots per inch) to maintain its image file size of 30-50 KB. If
the image is for printing, set the maximum resolution to 300 dpi and set its physical printing size in inches.

5. Color Blending
Use the different special effects buttons available in the different image editing software. You can combine
colors commands that will give you a more dynamic image result. and

6. Combining Multiple Images.

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

ONLINE GRAPHICS SOFTWARE

There is no doubt that Adobe Photoshop came to be the standard of photo editing since it started in the
1990s. However, there are a lot of image editing sites on the net that also offer that basic and advanced
techniques that we can do with other professional software.
 Based on TechRadar, the following are the list of websites that you can try as beginners in the field or
for professionals who would like to try other software.

1. Picasa.
It is Google's free desktop image editing program. It can be downloaded and help you manage your photos and
upload them to an online album.

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

3. Pixlr.
It is also a multiplatform image editing program. You can choose between the editor for editing images or
creating an original image right through the browser. The tools are almost similar to Photoshop that makes it
easier for you to manipulate.

Other image editing suite that can be downloaded for free:

o Photoscape
o Serif PhotoPlus Starter Edition
o GIMP
o [Link]

IMAGE HOSTING SITES

Images also can be shared online through the different web hosting sites that are free. You just need to
create free account, and you will be able to post, organize, and share your photos. The following is a list of
different hosting sites that you can try.

1. Imgur

It is a free image hosting site wherein you can upload images from your computer. You can also edit your
images before posting it online.

2. Flickr

It is an image social networking site. You can save and manage your photos for it offers a 1 TB storage capacity
in your account.

3. Photobucket

It has almost similar features with Flickr as you can upload and share your images over the internet through
your account.

4. SlickPic

It is an online image- hosting service that also allows you to upload and store an unlimited number of photos
online. You can create as many albums, and it also offers professional editing of images.

5. Zenfolio

It is an online image- hosting site that does not only allow you to upload image but also lets you create an online
image website for your images.

3D Graphics and Printing

Images that appear on a no screen like a computer is said to be two-dimensional since it has length and
width. But if you watch the movie Toy Story and play a computer game, there is another perspective that you
can see. Game developers and animators have developed the perspective of depth as 3D or three-dimensional.
Digital Arts

Since its breakthrough in the 1970s, computer graphics and imaging have paved the way for the most
popular programs that we have today. Whether it is applied in astronomy, medicine, education, entertainment,
and military, computer graphics have been very beneficial in the history of computing.

However, there are also disadvantages that it goes along with. According to Joseph Arrington in his
article "The Advantages and Disadvantages of Digital Art," there are several notes that can be seen in this field.

 It never changes

Digital arts is not threatened by the physical environment; however, it can also be destroyed in one key press.

 It can be replicated with precision

For digital art, what you see is what you get. Its replication is not a copy; it is a clone of the original.

 Almost limitless possibilities

There is a wide range of colors that can be chosen from by a digital artist; however, a photographic precision is
required.

 Tools of dreams are used

There are a lot of tools that represent real world instruments in every software that allow the artist to make the
most of his/her imagination.

Chapter 4
Online Platforms
NATURE AND PURPOSES OF ONLINE PLATFORMS

Techopedia defines "platform" in computing as the operating system and computer hardware. It follows
a set of standards that enables software developers to develop software applications for the platform. These
standards allow owners and managers to purchase appropriate applications and hardware.

According to Marc Andreessen on his blog, a platform is "a system that can be programmed and therefore
customized by outside developers-users-and in that way, adapted to countless needs and niches that the
platform's original developers could not have possibly contemplated, much less had time to accommodate." A
platform has three levels: Level 1 - Access API; Level 2-Plug-in API; and Level 3 - Runtime Environment.
Each level has its own features and advantages.

Pre-Learning Check
Website
What are the different kinds of website that we can find on internet? How does each site differ from each other?
What are the unique characteristics of each site? List them down and give examples of each.

Level 1 - Access API

API means application programming interfaces. It is the most common type of internet platform. The apps on
this level via web services API to draw on data and run elsewhere and call into the platform services. On this
level, the processes of building and running the application itself is solely done by a developer who possesses
both technical expertise and financial resources.

Level 2 - Plug-in API

This is the kind of platform approach that, historically, has been used in end- user applications to let developers
build new functions that can be injected or plugged into the core system and its user interface. Non-internet
examples include Photoshop and Firefox. The best online example of this is hottest platform thus far the
Facebook.

Level 3-Runtime Environment

In a Level 3 platform, the huge difference is that the third-party application code actually runs inside the
platform developer code is uploaded and runs online, inside the core system. For this reason, Level 3 platform,
referred to as "online platforms" in casual conversation, is most favorable. Examples include Andreessen's own
Ning and Salesforce. com.

WEB DESIGN PRINCIPLES

According to Cleverism, "Web design is a concept of planning, creating, and maintaining websites." It is
the process of creatively designing and constructing a website and updating it regularly to incorporate changes.

Designing for web publication equates to communication. Visuals on a web page are of utmost
importance since it is one of the ways how you communicate with the viewer.

Here are some principles to follow in effectively designing your web page or site.

 Visual Hierarchy
This explains the order in which human eye perceives what it sees. This is a technique wherein, as the
developer, you have to distinguish the importance of every part of your web page. Elements should be ranked
according to its importance and your objectives. It can be shown through the use of varying sizes and amount of
content. colors help and of each element.

 Proportion
You can make use of the golden ratio, a magical number approximately equal to 1.618 that makes all things
proportioned so as to make a design aesthetically pleasing. Then there is also the Fibonacci sequence where
each term is defined as the sum of the two previous terms: 0, 1, 1, 2, 3, 5, 8, 13, 21, and so on.
As the designer, you should keep in mind the proper division of the contents of your web page to avoid
crowding the view. If your layout width is 960px, divide it by 1.618 (=593px). If the website height is 760px
tall, you can split it into 470px and 290px chunks (760/1.618=~470).

 Hick's Law
This law can be considered as a guideline for decision making in a viewer's perspective. Hick's law states
that "with every additional choice, the time required to make a decision increases." This law does not only hold
true for web design but also in a number of other situations and settings. This means that we need to reduce the
number of choices in order to provide a better user experience.

 Fitts' Law
According to this law, the time needed to move to a target is dependent upon the size of the target as well as the
distance to the target. This means that the larger the object or target and the shorter the distance, the easier
would it be to move it or reach it. However, this does not mean that the bigger, the better but that usability
factor of a target runs as a curve and not as a straight line.

 Accessibility
When a visitor enters the website, he or she must be able to access each bit of information in the easiest manner.
Typefaces must be readable to all and is not too fancy for some to access or understand. Make your own color
palette and choose contrasting colors for the background and written content so that it can be easily read. Make
sure your images are of high-quality and are suitable for your purpose and have alternative text for images for
those who are visually impaired.

 Visible Language
A web page design should communicate with the users clearly and in an engaging manner. The following are
principles for a successful visual language: organize, economize, and communicate.

 White Space and Simple Design

White space helps divide the web page into several distinct parts or areas that make it simpler for the users to
process information. The following are some of the other things that can be considered as a part of a simple
design:
o Grid-based layout
The content of this layout is divided into columns, boxes, and different sections.
o F-pattern design
Design a web page or website in a way that complements the natural reading behavior of the visitors like the "F-
pattern"
o Conventional designs
Conventional or conservative designs still work well as far a visitor response or likeability is concerned. They
add a hint of trust, reliability as well as brand credibility.

 Regular Testing
Test Early and Test Often, or TETO, is another web design principle that all designers and website owners must
consider tests Conducting usability every now and then provides important results and insights into many kinds
of problems and complications related to a website layout or aspects of design. Websites constantly need
upgrades and updates to maintain the visitor customer's interests and trends.

WEB DESIGN ELEMENTS

To come up with a good web design and an effective visual and technical appeal of a website, there are some
elements that must be considered. Here are the following elements:

1. Links
Include the following states for all links on the page:
o Normal
This is the default state of a link (i.e., one that is not being hovered over or being clicked or pointed to a URL
that the user has already visited).
o Visited
This is a link that is not being hovered over or clicked but whose target has been visited by the user.
o Active
An active link is one that is currently being clicked by the user. Most developers will replicate the hover state
here if a style is not provided to them.
o Hover
The hover state is what the link looks like when the user moves the mouse over it. This and the normal states
are the ones most designers prepare for.

2. Forms
Two of the most important considerations when laying out a form are:
o Form label
Forms typically collect personal data that users are reluctant to give out. As such, properly informing users of
the exact purpose of the form is wise.
o Input fields and labels
Plan on how the input fields of the form will be laid out on the page and how the labels for those fields will be
styled and oriented relative to the fields.

3. Form Validation
An important related detail is form validation. This is the critical point where the website communicates the
user requirements and errors in a form.

There are three core things to consider:

o Required fields
All required fields should be indicated. This is done usually with an asterisk.
o Real-time validation
Some validation can be done in real time as the user completes the form. This kind of validation informs the
user as quickly as possible of any problems with the data they have inputted.
o Post-back validation
This kind of validation happens after the user has submitted the form. The style used for real-time validation is
often repeated here, but another option is to group all errors into a single message.

4. Status Messages: Errors, Warnings, Confirmation

Users will usually need some sort of feedback after performing an action on your website. The most likely
scenario is after submitting a form, but many other events could occur as well. Carefully consider your website
and the actions that users might take, and plan for the messages that the website will need to communicate.
 5. Animations: Pop-ups, Tooltips, Transitions
On a standard HTML and CSS, animations and transitions are so easy to overlook. If animations are critical, it
is best to provide developers with a sample of how they should work so that the product functions as it should.

Some of the most common places animations are used include:

o Tooltips
Those little pop-ups when user's mouse hovers over elements.
o Image rotators or sliders
Home page slide shows are all the rage, and a wide range of options is available for transitions and styles.
o Lightbox
You can style not only the lightbox itself, but also the transition to it.

WEB PAGE DESIGN: USING TEMPLATES AND ONLINE WYSIWYG PLATFORMS

A web template is a ready-made design for your website, including images, some navigation, preferably
several sample pages and in some cases flash animation. Contents come from you as the author. A web template
must be customized or modified to turn it into your very own website. The website template you have chosen is
a look-and-feel for your site. Some high-end templates have database back-ends and so on built-in. You can
also add your own text, set your meta tags (keywords and description), and insert some images into your
product listing pages (if applicable). Wix and Weebly are just examples of a website builder you can choose to
sign up for free or with payment.

Advantages of Using Templates

1. You know how your finished site looks. You can choose the template that appeals to you.
2. Faster turnaround. You need not spend a lot of time on getting the colors and layout right.
3. Templates are much cheaper than hiring a web developer. There are several sites that offer free
templates as well.
4. Templates look much better than sites developed in traditional HTML programming. Templates are
designed by professionals as well.
5. Templates can be customized by anyone with basic HTML knowledge. You can customize the template
yourself using a text editor.

A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what the end
result will look like while the interface or document is being created. WYSIWYG is an acronym for "what you
see is what you get." Most WYSIWYG editors are installed in the computer then it allows the developer to
build and preview the site. Adobe Dreamweaver, Rapid weaver, Microsoft SharePoint Designer, and
WYSIWYG Web Builder are some examples of WYSIWYG editors.

Advantages of Using a WYSIWYG Editor

1. It is great fun to create web pages this way. You can do it yourself, experimenting with colors and
layouts. The web page is likely to be unique, unless you are trying to clone another web page. You can
stretch your imagination.
2. It is faster and easier to create web pages. You can make changes to a page layout by simply dragging
the objects to their new positions.
3. You can make changes to content (text or images) in WYSIWYG editor, instead of searching for and
inserting between HTML tags, or using a complex content management system.
4. WYSIWYG software runs on any windows computer.
5. You can also create background images on the fly.

ONLINE TECHNOLOGIES

Online technologies also include presentation programs, forms, and file management that are available over the
internet. You can create and edit products without installing the programs into your computer.

The following are examples of online technologies that offer a wide range of use. According to TechTarget,
cloud computing is a term for the delivery of hosted services over the internet. It promises several benefits for
businesses and end users. Three of the main benefits of cloud computing include:
o Self-service provisioning
End users can spin up computing resources for almost any type of workload on-demand.
o Elasticity
Companies can scale up as computing needs increase and then scale down again as demands decrease.
o Pay-per-use
Computing resources are measured at a granular level, allowing users to pay only for the resources and
workloads they use.

The goal of cloud computing is to apply traditional supercomputing, or high-performance computing power,
normally used by military and research facilities, to perform tens of trillions of computations per second, in
consumer-oriented applications such as financial portfolios, to deliver personalized information, to provide data
storage, or to power large, immersive online computer games.

Prezi and Amaze

Prezi was founded in 2009 by Peter Arvai, Péter Halácsy, and Adam Somlai- Fischer. It is a presentation
resource that features a zoomable canvas unlike the box-type slides. You need to sign up for an account or
download it on your computer. Your finished presentation will then be published online.

Emaze works similarly with Prezi. You can choose from their free presentation templates to easily create. It
features a proprietary state-of-the- art HTML5 presentation maker that will enable you to create slide shows,
video presentations, and 3D presentations.

CLOUD COMPUTING AND MAPPING

A mind map is a concept of using diagrams for representing tasks, words, concepts, or items linked to
and arranged around a central concept or subject. It uses a nonlinear graphical layout that allows the user to
build an intuitive framework around a central concept. A mind map can turn a long list of monotonous
information into a colorful and highly organized diagram.
Along with mind mapping is file and project management which is also available online through online
technology. A file management system is a type of software that manages data files in a computer system.
However, an online file management system is designed to manage individual or group files, such as special
office documents and records which is cloud based.

MindMeister
MindMeister is an online mind mapping tool that allows users to create, develop, and share ideas visually. It is a
mind map editor for brain- storming, note taking, project planning, and other creative tasks. It is a web- based
software that does not need to download and update.

Sibelius
Sibelius is an online platform used for writing music. It is a notation software that features a magnetic layout
and other tools good for music compositions. You can make a video of your score, share directly to social
media, or export for iPad.

Google Forms
Google Forms is a part of Google Drive, a tool used for creating surveys, tests, or web input forms. It allows
anyone to create an easy-to-use web form, connected to a spreadsheet where you can track results and post it on
the web.

Chapter 5
Collaborative Development in ICT
TEAM STRUCTURE AND DYNAMICS

The team structure is described as a less hierarchical organizational structure in which individuals are
divided into teams. In a business setup, team structure involves groups of people who form teams that work
toward a common goal of the overall structure. Each team has members who complement each other's abilities.
Members of teams can change over time; however, the overall goal is the same for all of the teams.

Team Technology dynamics as "the psychological forces defines team unconscious, that influence the
direction of a team's behavior and performance." It is created by the nature of the team's work, personalities
within the team, working relationships with other people, and environment in which the team works.
Pre-Learning Check
Social Networking Sites

What are the different social networking sites that you know? What are the similarities of each? Make a
comparison of this websites using presentation software.

Once you are in the world of work, there will be a lot of adjustments and experiences that will change
your perspective in teamwork and collaboration. Within the concept of ICT, teamwork and collaboration with
the use of its tools became an emerging aspect in the workplace. The proper utilization of ICT tools will help
organizations prepare and achieve its goals.

The following are common principles of collaboration applied to most organizations and other institutions.

Participation
Encourage participation from across your organization wherein they belong as one.

Collective
Each needs to help the group reach a consensus and then take action collectively on the decisions to make.

Transparency
Feedback and trust are essential elements of collaboration. Being transparent with information is crucial.

Independence
Ensure that group think does not emerge and that people are thinking for themselves.

Persistence
You need to be persistent in your application of these principles, to ensure that all content is kept within the
community and easily accessible to all members.

Emergence
You need to ensure that you focus on the end goal rather than worrying about how it is achieved. The
collaborative community should set their own goals and objectives.

Strategy before technology

Before rushing to pick that shiny new collaboration platform, focus on developing a strategy that will help you
understand the "why" before the "how."

Lead by example
If leaders at your organization do not use and support collaborative tools and strategies then why should the
employees? Leaders are very powerful instruments to facilitate change and encourage desired behaviors. They
must be visibly onboard.

Create a supportive environment

It is also crucial to reward teamwork as rewarding individual performances. Incentives can be given as to how
well they collaborate with their co-workers. A supportive environment also means having training and
education resources available for employees as well as evangelists within the organization.

According to Dr. Graham Bill on his guest post on ZD Net, "Companies should start to develop their
collaboration capabilities before purchasing collaboration technology." This will help to make sure that the
technology really fits the style of collaboration in an organization.

Based on the article of Team Technology, there is a little difference between team and group dynamics.
It explains that groups are a social community, consisting of two or more people who have something in
common while a team is a special instance of a group in which the commonality is a shared goal. Team
members are dependent on each other for success.

The term "group dynamics" describes the way in which people in a group interact with one another. The
group works well together when there is positive group dynamics. However, the group's effectiveness is
reduced if it is the opposite. To strengthen your team's dynamics, use the following strategies:
 Know your team.
 Tackle problems quickly with good feedback.
  Define roles and responsibilities.
 Break down barriers.
 Focus on communication.
 Pay attention.

ONLINE COLLABORATIVE TOOLS AND PROCESSES

Online collaboration lets a group of people work together in real time using the internet. People in an
online collaboration can work together on word processor documents, presentations, and even for
brainstorming, all without needing to be in the same room at the same time. Collaborating online is the way to
bridge the distance between employees, as they can work together on the same documents at the same time as if
they were all in the same room. This means that projects can be done much faster, for there is no need to send
documents back and forth between offices, and it also means that communication between employees is
improved.

5 Essential Features of an Online Collaborative Tool

1. Easy and clean interface

A good user interface is key to a great online collaboration tool. Applications that are simple and intuitive are
much easier to learn to use, so you and your team would not have to waste time in long tutorials.

2. Permissions control
Users need to be able to easily add people to workspaces and control what they are able to do in each workspace
or document. This way, workspace managers can make sure that only those who are authorized to change
documents do so.

3. File storage with document versioning

Not only do you want to be able to upload all documents related to a project onto your online collaboration tool,
but you also need to be sure that all document versions are saved on the tool. This will make it easy to track the
progress of a document, and if any past versions need to be referenced, it is easy to do so.

4. Whiteboard
Whiteboards are very useful in a collaboration tool, as they let team members communicate in a more informal
way. It is also possible to host a virtual brainstorming session using a whiteboard, so the flow of ideas never
stops. Best of all, a good online collaboration tool will let you save your whiteboard, so you can always refer
back to the ideas that were added by your colleagues.

5. Document locking
This feature ensures that only one person is working on a document at a time. This way, no two people can
change the same document at the same time, keeping documents completely organized, and preventing
confusion. This is especially important if you work in a large team with several document editors.

Common Online Collaborative Tools

Trello
This project management tool is like a magical customizable to do list on a single interface, which you
can share with others in real time. Based on a system of cards, which are essentially Post-it® notes, you can
categorize and order text, photos, drawings, and mock-ups whichever way you want.

Podio
Podio is an enterprise social network that aims to add the functionality of a project management system.
Each user has his/her own profile, which is associated with other people such as a manager, project manager,
and lead developer. A chat app, internal email, contacts, calendar, and tasks are also included.

Asana
Asana, created by Dustin Moskovitz, cofounder of Facebook, and former Facebook tech-lead Justin
Rosenstein, is a project or workflow management tool that lets users customize their interface to whatever
configuration makes them most productive. It works on most platforms, offering the flexibility to assign tasks
and to-dos, set milestones and deadlines, and keep track of it all on work on tablets, smartphones, or desktops.
Google Apps
Google provides, via Gmail, Hangouts, Calendars, Docs, Sheets, Slides, and more, many of the features
project management and collaboration software offer. Like some other apps, it requires a connection to the
internet, but it is accessible on most devices. Users can work on the same document at the same time and see
changes in real time. They can also create hangouts for group chats or video conferencing.

Yammer
Yammer is a great tool for communication and collaboration among employees and offers many features
for free. Its ease of use is often compared to Facebook, making it a great way to enter the collaboration software
arena. Users can create a personal profile page, create and join groups, share and like comments, upload images,
and attach files. However, its strongest attribute is communication as there is not much there in the way of
project management.

PROJECT MANAGEMENT IN ICT

Project management is mostly applied in the business sector; however, it has also been implemented in
ICT since it involves technicalities, services, and management.
According to ICT Standard Form, there is a significance of applying the concept of project management
in ICT, and objectives are also aligned according to business strategies. Projects vary greatly in terms of targets,
duration, budget, staffing, and difficulty. However, in all projects, the following elements need to be managed
throughout the project life cycle:
 Goals, scope, and constraints
 Timetables and costs
 Tasks and deliverables
 Workloads and resources
 Quality and risks
 Changes
 Communication
 External services and sourcing

Schedule Key Objectives of Project Management

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

Like any other projects or programs, people working in the group have several roles and competencies that
should be met for the objectives to be attained.

Key Roles in Project Management

1. Project Owner
He/She is the head of the business unit and bears the responsibility for successful project implementation and is
usually the chairperson of the project steering group. He/She is also responsible for approval and endorsement
of project deliverables and for deployment. He/She carries the main responsibility for change management as
well as for the achievement and measuring of benefits.

2. Project Steering Group

This group consists of the representatives of the business, ICT, and the (internal or external) vendor. The group
provides the guidelines, takes responsibility for decision-making, supports the project manager, and ensures that
the targets of the project are met. The project steering group manages the related change requests, for example,
in terms of project schedule, budget, or scope. The project steering group members must have adequate
decision-making and resourcing authority.

3. Process Owner
The owner is the chairperson of the steering group.

4. Project Manager
He/She is responsible for daily project management and ensures that the project produces the agreed
deliverables at the appropriate level of quality. He/She has the responsibility of ensuring that the project is
implemented on schedule and within budget.

5. Project Management Office (PMO)

In large organizations, PMO is often established to gather project resources together and to develop and update
the company's project practices and management policy. The office maintains a project list and manages project
dependences. They can also estimate the preconditions of project startup before project acceptance, audit a
project during the project implementation, and provide assistance in daily project management.

Functions

In the ICT Standard, the functions of project management are largely based on PMBOK (Project
Management Body of Knowledge). PRINCE2 (PRojects IN Controlled Environments, version 2), and the Agile
Manifesto.

PMBOK contains widely used guidelines for project management, which PRINCE2 complements with
more practical application processes. Various agile methods support iterative, continuous development and
learning, and quick reaction to changes.

Recurring management tasks throughout the various phases of a project include communication, quality
assurance, risk and change management, and reviewing and updating the project plan.
 Process Development (part of Business Alignment)
 Project Portfolio Management (part of Business Alignment)
 Pre-study and Business Case
 Planning, Ramp-up, and Kickoff
 Implementation, Testing, and Governance
 Training and Deployment
 Completion and Value Realization

ICT PLATFORM IN HOSTING DATA

A web hosting service is an internet service that allows individual users and organizations to make their
website accessible over the World Wide Web. These are companies that provide space on a server owned or
leased for use by clients, as well as providing internet connectivity, typically in a data center. They can also
provide data center space and connectivity to the internet for other servers located in their data center, called
collocation.
The most basic scope of web hosting service is web page and small-scale file hosting, where files can be
uploaded via File Transfer Protocol (FTP) or a web interface. Personal website hosting is usually free,
advertisement-sponsored, or inexpensive. Business website hosting often has a higher expense depending upon
the size and type of the site.

According to W3 Schools, here are some of the most common hosting technologies that are readily available
over the internet.

1. Windows Hosting
Windows hosting means hosting of web services that run on the Windows operating system. You should
choose Windows hosting if you plan to use ASP (Active Server Pages) as server scripting or if you plan to use a
database like Microsoft Access or Microsoft SQL Server. Windows hosting is also the best choice if you plan to
develop your website using Microsoft Expression Web.

2. Unix Hosting
Hosting of web services that run on the Unix operating system. Unix was the first (original) web server
operating system, and it is known for being reliable and stable. It is often less expensive than Windows.

3. Linux Hosting
Linux hosting means hosting of web services that run on the Linux operating system.

4. ASP
 Active Server Pages or ASP is a server-side scripting technology developed by Microsoft. With ASP,
you can create dynamic web pages by putting script code inside your HTML pages. The code is executed by the
web server before the page is returned to the browser. Both VBScript and JavaScript can be used.

5. PHP
PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP is
perfectly suited for web development, and can be embedded directly into the HTML code. The PHP syntax is
very similar to Perl and C. PHP is often used together with Apache (web server) on various operating systems.
It also supports ISAPI and can be used with Microsoft's IIS on Windows.

6. JSP
JSP is a server-side technology much like ASP, developed by Sun. With JSP you can create dynamic
web pages by putting Java code inside your HTML pages. The code is executed by the web server before the
page is returned to the browser. Since JSP uses Java, the technology is not restricted to any server-specific
platform.

7. ColdFusion
ColdFusion is another server- side scripting language used to develop dynamic web pages. ColdFusion
is developed by Adobe.

8. Adobe Dreamweaver
Dreamweaver is a website design tool owned by Adobe Systems. Dreamweaver allows users to develop
a website without any deep knowledge of web development. Dreamweaver has support for web technologies
such as CSS, JavaScript, ASP, NET, ColdFusion, Java Server is available for both Mac and Pages, and PHP.
Dreamweaver Windows operating systems.

9. Secure Server
A secure server can transmit data encrypted. If you plan to do online credit card transactions, or other
types of web communication that need to be protected against unauthorized access, your ISP must provide a
secure server.

Prepared by:

MR. JANN YRON R. CABOTAJE

Teacher

Approved by:

MRS. MA. IMELDA A. GABRIEL

Subject Area Coordinator

Noted by:

MR. EDGARDO B. SALINAS

Principal