GRACE MISSION COLLEGE

Catiningan, Socorro, Oriental Mindoro

Name: ____________________________________ Date: ______________

Grade and Section: __________________________ Score: _____________

EMPOWERMENT TECHNOLOGY 12
Quarter 1 – Week 5-6

LESSON/TOPIC:
INTRODUCTION
In this module, a variety of common programs or platforms that use these images will be
discussed. Furthermore, stand-alone and specialized platforms will be presented. This module will
highlight a detailed use of different application platforms and culminate with activities that will help
you learn the details in using them.

OBJECTIVES
At the end of the lesson, the learners are expected to:

PRE-ASSESSMENT
Directions: Matching type. Match Column A with the Column B. Write your answer on your
clean sheet of paper.

Column A Column B

_____1. This is a Web site dedicated to hosting video clips.

_____2. These APIs are platforms for developing different applications, a. Navigation
wherein programs or application codes are evaluated and compiled in the b. YouTube
said APIs.
_____3. These APIs are used to indicate a location of an establishment c. SlideShare
described on a Web site.
d. GoogleDrive
_____4. This principle and element of Web Design refers to the facility
that the audience can use to go through the Web site and its subpages. e. Runtime
_____5. This application started in Web 2.0. The primary function of this Environment
Web site is to provide a facility for uploading and sharing presentation
f. Google Maps
files.

DISCUSSION
Online Platforms and Applications
The term "platform" refers to a program created by developers that can be modified
reprogrammed by outside users. It is a facility for programming or developing an application tailored
to the user's specifications. Online platforms are online Web sites created to aid users in creating
1
their Web content and cater to different kinds of information such as texts, images, and videos.
Another unique feature of online platforms is the ability to program, modify, and access the
application remotely using the Internet.
Platform Categories
The Application Programming Interface (API) is a set of governing protocol or rules on how
software elements should communicate and interact with one another. Commonly, API is used in
developing the GUI. This tool is incorporated into the developed application to enable
certain functions. API types and their functions are presented here.
 Access API - This type of API runs in a remote machine, server, or computer, and the
application is accessed remotely by a guest user application to draw data and services.
Creation of application is left to the host of the said API, as well as the maintenance, the
continuous running, and the standby of the API waiting for users to access it. The development
of this type of API requires financial capabilities and technical capabilities.

 Plug-in API - Most of the time, this API is used in the user end. Generally, different developers
create different applications that can be integrated or "plugged in" to a core application and/or
the GUI of these applications. Typical examples are the plug-in programs for Web browsers
that enable different functions such as applications for playing video clips and video games.

 Runtime Environment - These APIs are platforms for developing different applications, wherein
programs or application codes are evaluated and compiled in the said APIs. The on application
codes are uploaded or injected into the API and the API will test and run theme application
code. Most of the time, this API is hosted in a remote area and requires the services of the
Internet.

For Web site developers and bloggers, plug-in APIs are the most popular because they are simple
and easy to integrate. The convenience of having different APIs running on a Web site offers viewers
or users of these Web sites the ability to easily access different online services integrated in one
facility. Common Web sites that use plug-in APIs are presented here.
 YouTube - YouTube is a Web site dedicated to hosting video clips. Users can create an
account on YouTube and upload videos for public and private viewing. Most of the Web sites
integrate videos into other developing Web sites. To capitalize this Web site, an API tool is
created to enable developers to embed the YouTube video player and play any YouTube
content on their Web sites.

 Flickr - Flickr is a Web site that caters to the hosting of images. Users of the site create a
private account wherein they can upload images and categorize the images as to whether they
are viewed privately by the uploader or by the public. An API is created to enable a Web site
developer to embed or use images on Flickr. Also, the image slide player API of Flickr can
further organize the presentation of images in a slide show fashion.

 Twitter - Twitter is a social networking service that enables users to send and read short
messages with 140 characters. These short messages are called tweets. Twitter APIs are
used by developers to embed Twitter functions in developing Web sites. Commonly, in using
Twitter API, users can find a facility to create messages and tweet those messages.
Furthermore, there are Web sites using Twitter API to display information or messages from a
certain user commonly governing those Twitter accounts.

 Facebook - Facebook is a social networking Web site that requires the user to register an
account and create a user profile. A profile contains the information about the owner of the
account such as his or her birthday, location, work, and education. Different users can then
connect with one another by adding them as "friends." On this Web site, users are also
capable of posting information on their "wall" or the page that contains the users' information.

2
 Also, users can post images, videos, and Web site links on their wall. Facebook APIs are used
to connect an individual's wall or an organization's Facebook account so that the audience and
users can easily access Facebook services connected to a Facebook account.

 Google Maps APIs are one of the most used APIs by Web site developers. Commonly,
Google Maps APIs are used to indicate a location of an establishment described on a Web
site. These APIs enable the developers to display an accurate map depicting the satellite
views or the actual appearance and layout of roads and buildings in a particular area.

Activity 1: Reflect Upon

Directions: Answer each question briefly.

1. In your own opinion, how can these online platforms be of use in raising awareness of
important societal and environmental issues for the people?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. Create a list of online platforms you use or visit frequently. What are the kinds of content that
you create using these online platforms?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

Web Design Principles and Elements

To create an effective Web site or Web page, the designer of the Web site must instill a
number of pointers. The designer should also make the Web site eye-catching. The Web site should
make site visitors curious so that the information presented on the Web site is widely disseminated.
Here are the factors that greatly contribute to this goal.
1. Purpose - A Web site can be categorized primarily in terms of the goal it aims to fulfill. Web
sites can be categorized into different types and functions depending on the purpose they
serve the user or audience. Web site visitors may want to look for information, be entertained,
play games, socialize, or transact business. In creating a Web page, the designer should
define first the purpose of the Web page to determine the theme of the site. This will help the
developer create a more organized and relevant site.

2. Communication - Essentially, when we visit a Web site, the primary objective is to absorb as
much valuable information as possible in the shortest amount of time. Thus, the information or
text on a Web site should be concise and direct to the point. The arrangement of the text
should be organized in a manner that would entice readers. To effectively apply this, use
headings, subheadings, or bullets. Outlining will also avoid long fuzzy sentences.

3. Typefaces - This is an essential factor in Web site design because this is considered the most
dominant and noticeable in terms of visuals. Typeface deals with text format, text style, and
text. The appearance of texts can greatly contribute to the perception of the visitors to the Web
site. Academic Web sites will use simple typefaces, whereas those that deal with
entertainment will use fancy and artistic typefaces.

4. Colors - These enhance the experience of visitors of the Web site. The appropriate
combination of the foreground color and background color can produce a better viewing
experience not only in the images and pictures but also in the texts. Furthermore, colors can
introduce a mood or make the Web site lively and enticing for viewers. Colors can also

3
 introduce the perception of a modern or classic look on the Web site. Border colors of images
or button colors can define the mood that the Web site reflects.

5. Images - Images alone placed on the Web site can deliver a complete message that the Web
site wishes to communicate to the audience. Choosing the correct images can connect the
Web site to viewers or the audience effectively. The most commonly used images are
infographics. Images with proper balance, color, and contrast accompanied by texts can
deliver great impact and information to the audience. The ratio of the size of the image with
respect to the Web page and text can also contribute to its impact on the site visitors.

6. Navigation - Navigation refers to the facility that the audience can use to go through the Web
site and its subpages. There are several ways on how to create an effective and good
navigation system on a Web site. One of these includes a hierarchical organization of
information, so that users can logically anticipate the location of information. Another is by
placing buttons or links to direct the audience to a specific page or location on the Website.
Last is the use of search bars to enable the audience to type key words and phrases.
Whatever method is chosen for navigation, the three-click rule should be followed, wherein the
user should find the prospect information within three mouse clicks.

7. Layouts - A layout refers to the physical arrangement of the content and elements on a Web
site. There are various ways on how to do an effective layout on a Web site, and typically,
these ways are determined by the creator or developer. However, there are categories that
classify a layout that will guide the users with the suitable layout for their target audience.

Possible layouts are presented here.

 Grid. Without direction or organization, placing the content of the Web site will most
likely appear chaotic. Grid layouts can be useful because they will enable the user to
create sections or groups of related information. Another is that the information can be
arranged in columns and group boxes that can be placed anywhere on the Web site.
This will help in creating an eye-soothing arrangement of texts and photos.

 F-Pattern - Based on studies, human vision flows like the letter F. This means that
humans tend to look heavily at the left side of a visual material more than the right side.
Furthermore, humans tend to look at the upper portion than the lower portion of the
visual material. Thus, the pattern is similar to the letter F. As Web site developers, this
can be capitalized by placing more information at the top and left part of the screen.

 Mobile. The popularity of using mobile devices in viewing Web content is increasing.
This is because of the portability and convenience brought about by mobile devices to
their users. The display devices vary depending on the system an individual uses. The
developer then should consider the layout for mobile and work stations. A desktop
computer's display is usually bigger than mobile displays, and because of this, the
content should be accessible for both devices. There are ways to achieve this objective,
and one of which is to limit the elements as much as possible. It is also reasonable to
place the majority of the Web site elements, especially the important ones, at the middle
of the Web page.

8. Load Time - Another basis for the success of a Web site is the time that the Web site will load
or appear onto the viewers' display device. Nowadays, people demand information at a very
fast pace. If the Web site takes some time to load, most especially if there are too much
content, the user will most likely search for another source. It is best to minimize the elements
in a Web page and remove the elements that are not important in delivering the information.
Another method is to optimize the size and resolution of the images.

Web Design Using Templates and WYSIWYG

4
 WYSIWYG in Web site design is an acronym for What You See Is What You Get. It is an
application that is used to create a Web site either online or offline. This type of application uses the
capability of directly handling the components of the Web site. The developer can directly drag and
drop elements to manipulate the layout of the Web site. The finished product is similar to the
designed placement of the components. The traditional method involves several developer string
commands in an editor program. A program will then convert the commands into visual elements that
will compose the layout of the Web site. Presented here are some of the WYSIWYG applications for
both online and offline development.
 Adobe Dreamweaver - This is an offline proprietary Web development tool offered by Adobe
Systems. This tool presents a wide range of tools for the drag-and-drop option. The layout will
most likely turn out the same as planned by the developer. Furthermore, Adobe Dreamweaver
can produce the equivalent program codes of the layout created by the designer.

 Amaya - Amaya is an open source Web site development tool used to update documents
directly on a running Web site. (An open source software is a kind of software that can be
freely used, changed, and shared by its users). Amaya enables continues browsing and editing

of a Web site. It also enables the collaborative development of a Web site.

5
 Microsoft Expression Web - This is a propriety Web site development tool created by
Microsoft. Previously, Microsoft Expression Web is integrated to the now defunct Microsoft
Expression Studio. Developing a Web site is easy using the Microsoft Expression Web. Simply
drag and drop the elements to create the layout and function of the Web site.

 IM Creator - This is a Web site that caters to both experienced and inexperienced users, and
to creators of Web sites and Web pages. IM Creator offers predesigned templates that will aid
inexperienced users in creating their own Web sites. IM Creator provides a ready-made Web
site with complete functioning buttons, links, and design. The only thing that the user should do
is to edit texts and insert videos or photos. A number of themed templates can be chosen by
the user. For the more dynamic users, IM Creator offers a blank Web site and tools that they
can use to create their Web site from scratch.

 Wix - Wix is another Web site that offers its users to create their own Web site. The advantage
of using Wix is that knowledge of Web site programming is not a prerequisite. It also offers a
wide range of templates. These templates have been designed for every purpose intended by
the user. This is possible because different Web site developers contribute to the pool of
themes available. Wix offers a drag-and-drop facility. Users can simply grab elements such as
textboxes, photos, and shapes to arrange them in the layout they want.

6
Online Presentation Tools
Some applications that are gaining popularity today are online presentation tools. These
applications offer the function of an image and presentation software without the trouble of
purchasing and installing the presentation software on your device. These applications also offer
online storage for saving created files. The development of these presentations is done in the Web
browser, providing the convenience of not installing extra applications on your computer or your
mobile phone. Some of these applications are presented here.
 Prezi - Prezi is a cloud-based application dedicated to help you create a presentation. Prezi
also offers its offline version that can be installed on a desktop computer. The software adapts
the storytelling type of presentation. The primary flow of the presentation is zooming in or out
in a display. The presentation is laid out in an image that serves as the presentation media.
The slides are eventually scaled down and sequenced to determine the order of presentation
and discussion.

 SlideShare - This is considered as one of the earliest forms of online presentation media. This
application started in Web 2.0. The primary function of this Web site is to provide a facility for
uploading and sharing presentation files. The uploaded files can be viewed either publicly or
privately. In the beginning, the purpose of this Web site was to cater to companies by sharing
their business presentations with their employees. However, this application made its way in
the academe, where academicians can share lectures and presentations to a global audience.

7
  MindMeister - This is an online collaborative idea on a common scratchpad-like workspace.
users to form a concept. Also, texts can be placed with the images placed in the workspace.
tool in which different individuals can share The ideas are placed visually by different and can
point to some ideas in conjunction

Cloud Storage
Cloud storage is a service wherein files from users are stored online. The files are uploaded by
users and are received by a storage server that hosts the service. Physical multiple storage devices
save the files that are uploaded and are waiting to be retrieved on the Web site. The server side
ensures that information can be received and accessed properly by using a Web site that manages
the transaction between the user and the servers. Common storage Web sites and services are
presented here.
 Google Drive - This is a storage application developed by Google. This application does not
only store files but also accommodates online editing and collaboration. Google Drive provides
tools such as word processing, spreadsheets, presentation slides, and other common file types
for collaboration and storing.

8
 Dropbox - This is a file hosting and storage service developed by Dropbox, Inc. It offers a
facility to synchronize and create folders for file organization. The service is offered and
available for enterprise use as well as for personal consumption. It is an online application and
offers a local application that can be installed on desktop computers.

 Evernote - This is an online note-taking and archiving application service. The facility offers a
Web application similar to that of a word processor. The notes created by the user can be
archived or saved in the application's storage. The files can be organized by creating folders
that can separate files. Evernote also enables synching of saved notes on different devices
once connected to the Internet.

9
Activity 2: What Have I Learned So Far?
1. Compare a storage device, such as external hard drive and USB flash drive, with an online
storage platform. What are their differences and similarities?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. Which platform is the most similar to a storage device? Which platform has the most number of
features?
3. ___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

Mapping Applications
Web mapping applications are Web sites developed from geographical information systems'
(GIS) data. Mapping applications use GIS to create a graphical and illustrative representation to
easily visualize maps. Today, a Web map is used not only for directions and locations but also to
track consumer activity and to locate stores and establishments. Some of the typical mapping
applications are presented here.
 Google Maps - This is a Web mapping application developed by Google. It shows both graphic
and satellite maps. The maps include street names, building names, establishment names,
and bus and train stations, to name a few. Some extension applications include three-
dimensional views of the satellite images and traffic conditions.

 Wikimapia - This is a collaborative open content mapping application. Wikimapia offers satellite
view of streets, buildings, and establishments. This Web site uses Google Maps APIs for
mapping.

Collaborative Development
Building a Web site requires addressing different aspects covering the product. Some of these
aspects include the coming up with the layout, realizing the design, marketing the Web site, and
managing the integration of all of these aspects in one project. The amount of work and tasks to be
done in developing a Web site is maybe much for one individual. Thus, many enterprise organizations
employ team-based approach to Web site development. Businesses focused on online development
and software development are using different teams in developing different kinds of software and
applications.
Another advantage is that this system introduces parallelism, or developing all of the aspects
of the Web site at the same time, which will be integrated later. However, doing this stem also has
10
certain disadvantages. Because individuals are doing tasks independently with other individuals, the
output of an individual tends to overlap with the output of other individuals. Another disadvantage is
that the direction of development tends to go different ways because of the nature of independence of
the team members and workers. The output of each individual may fail to integrate in the end. The
problem is solved by including another member focused on management alone. Presented here are
the roles that a Web development team essentially requires.
 Project manager. The project manager is the leader of the group. The project is synchronized
and supervised by the project manager. Upon the commencement of the project, the project
manager sets the goals and expectations for each individual involved in the project.
Furthermore, project managers are the ones who set realistic deadlines for each individual,
keeping in mind the actual deadline of the project. It is also the responsibility of the project
manager to ensure constant communication with every individual of the team, checking the
hurdles and issues that they might encounter.

 Web strategist - Upon the start of development, the Web strategist plans the approach or
method to be done. He or she plans every step that the team should do in phases or stages of
development. The goals that the project manager sets are determined by the Web strategist.
The structure and arrangement of the Web site is defined and planned carefully by the Web
strategist. Upon completion of the plan, the execution is left to the remaining members of the
team.

 Content specialist - Most of the time, the developers are not inclined in the field of the Web
site's topic. The team therefore needs an individual with expertise to write the content of the
Web site. Sometimes, the content specialist is an experienced writer and has knowledge on
how to catch the attention of readers.

 Web designer - The Web designer is the one in charge of the visual presentation of the Web
site. The goal of the Web designer is to catch the attention of the target audience using
attractive visual design and layout. The Web designer is a specialist in stringing colors and
shapes that can bring the imagination of the viewers to life.

 Developer - The developer takes into account all of the outputs of the content specialist and
Web designer. Essentially, the developer will make the Web site come to life with the pointers
given by the Web designer and content specialist. The developer is a programmer who creates
a program that, if allowed to run, will execute the Web site as planned. Furthermore, the
developer assures the program will run and perform the expected functions of each
component.

 Inbound marketer - The success of the Web site or the popularity will be the responsibility of
the inbound marketer. Most of the time, the marketer uses different strategies such as blogs,
social media, and advertisements to promote the Web site. The collaboration between the
content specialist and the inbound marketer is important to promote the Web site.

Project Management
The project manager is the individual who carries out the methods of project management. By
definition, project management for ICT is the set of skills or abilities to complete an ICT project and
produce an output. The basic skills to learn in project management include project planning, team
organization, team motivating, resources control, and administration. Project management primarily
controls all the factors involved in the project and focuses them to produce favorable goals.
Web Analytics
Upon creation of a Web site, there are factors that the designer would want to study to fully
evaluate its effectiveness. Web analytics is the process of collecting data or measuring the activity of
the Web site. Web site data includes Web traffic, or the number of persons accessing and viewing the
Website. Other Web sites can offer download of files, monetary and business transactions, and chat
11
and messaging systems. Accessing these systems can contribute to the data traffic or can also be
considered as part of analytics. The measure of the number of downloads, the number of uploads,
and the number of transactions can be measured, and may thus help to further improve the Web site.
Platforms for Collaboration
 Google Apps for Work

This is a compilation of productivity tools developed by Google. This platform is online

and also contains a word processor, a spreadsheet, and a presentation program. platform.
 Google Docs is the word processing platform. Google Sheets is the spreadsheet Google
Slides is the presentation platform.

1. To access Google Apps, you need to create an account in Google.

2. Open your Google account. On the upper right corner, there is a grid icon. After clicking the
said icon, options will appear. Click Docs if you are going to process a word file. If you are
going to process a spreadsheet, click Sheets. Finally, if you are going to create a presentation
file, click Slides.

3. Found in the bottom right of every application is a cross enclosed in a red circle. Clicking it will
open a new file for the respective applications.

4. In sharing files, simply click the Share button found at the upper right portion of the window. A
window will open asking for the name or e-mail address of that you want to share the file with.
This step is the same for Google Docs, Slides,

Prezi
You have already learned about Prezi in the last module. Now, you will be shown how to use
the application.
1. Create a Prezi account by the facility provided at www.prezi.com.

2. After creating an account, login to your account to be directed to the Prezi home page.

3. To create a new presentation file, click the New Prezi link.

4. You will be directed to choose a template or a blank Prezi. Also, there are suggested
templates that are based on popularity and are commonly used by other users.

5. After choosing your template, the process and options are typically similar with other
presentation platforms. You can insert texts, images, and videos. Text styles can be changed
as well as the color and size.

6. To run the presentation, you can press Play button at the upper portion of the window.

POST-ASSESSMENT
Directions: Fill in the blanks. Read each statement carefully and supply the appropriate word
needed.
1. Online platforms are __________ Web sites created to aid users in creating their Web content
and cater to different kinds of information such as texts, images, and videos.
2. Facebook is a social networking Web site that requires the user to register an account and
create a user _______. A _______ contains the information about the owner of the account such
as his or her birthday, location, work, and education.
3. Choosing the correct images can connect the Web site to viewers or the audience effectively.
The most commonly used images are _____________.
12
 4. Prezi is a cloud-based application dedicated to help you create a ____________.
5. Google Docs is the _________ processing platform.

Activity 3: Performance Task

As one of the leading researchers and scientists in the field of robotics, you are tasked to
create a presentation to be shown in an international conference. You need to create and
share a powerpoint presentation file describing the development of robotics in the world. The
lecture will cater to graduate and undergraduate students all over the world. The conference
organizers will format your presentation file in accordance with the template of the conference. The
presentation file should contain a title page, images, and videos. All of these files should be shared
with the conference organizers.
15 13 10 4
Background Background Background does Background does Background makes
10% does not not detract from not detract from itdifficult to see text or
detract from text or other text or other competes with other
text or other graphics. Choice graphics. Choice of graphics on the page.
graphics.Choic of background background foes
e of could have been not fit project.
background is better suited for
appropriate for the project.
this project.
Text - Font Font formats Font formats Font formatting has Font formatting makes it
Choice & (e.g., have been been carefully
very difficult to read the
Formatting planned to
color, bold, carefully planned
10% complement the material.
italic) have to enhance
content. It may be
been carefully readability.
a little hard to read
planned to
enhance
readability and
content.

Content - All content Most of the content The content is Content is typically
throughout the is accurate but generally accurate, confusing or contains more
Accuracy 20%
presentation is there is one piece but one piece of than one factual
of information isclearly
accurate. There error. It is difficult to
are no information that flawed or inaccurate.
understand the time period
might be
factual errors. that was chosen.
inaccurate.

Use of All graphics are A few graphics All graphics are Several graphics are
are not
Graphics 10% attractive (size attractive but a few unattractive and detract
and colors) and attractive but all do not seem to
from the content of the
support the support the
support the
theme/content theme/content of presentation.
of the theme/content of the presentation.
presentation. the presentation.

13
JOMARS. MENDROS 09108818813 JOMAR S. MENDROS
Subject Teacher Mobile No. FB Account

14