First Quarter

Module 1- Information and Communications Technology Today

Information and Communications Technology (ICT) - collectively refers to the technologies, both
hardware and software, that enable humans to communicate with one another.

The fusion of hardware equipment, software, GU1, and effective digital telecommunications
network is the present composition of the ICT network. Perhaps one of the widely used information
systems today, the World Wide Web, is the product of this fusion. Almost every day, people go to the
World Wide Web for directions, instructions, information, and even entertainment. Furthermore,
Internet applications such as Internet browsers work as tools for communication and transmission of
information from one point to another.

World Wide Web (www) - is the system that enables you to access hypertext documents and other files
over the Internet.

The Social Media

ICT produced another high impact user application-the social media. These applications started
together with the Web 2.0 and are used in communicating and socializing with other application users in
virtual communities and networks. These applications allow users to create and exchange user-generated
information. A handful of social media applications have been developed over the years and some have
been discontinued depending on their effect on the users.

The social media platform contains different formats. Some of these forms of social media are
blogs, enterprise social networks, forums, photo-sharing sites, product selling and review sites, research
sharing sites, special interests groups, social games, social networks, and video sharing.

The effectiveness of a social media application can be measured by its virality, which is defined
as the rate of reposting or sharing of photos, pieces of information, or ideas published in one's social
media profile or page. The main benefactors of virality are businesses, nonprofit organizations, and
special interests groups that use online marketing and campaigns through these social media sites. The
more viral their ads become, the better or more effective their publication campaign will be.

Research and Information Seeking

One of the ideal applications laid down for ICT and the World Wide Web is for research and
education. Since Web 1.0, the main objectives of Internet sites are to share and disseminate information.
Today, there are a number of information sources over the Internet, some of which are presented below.
 Web search engines - These are programs designed to search or mine the World Wide Web
based on keywords provided by the user. They return search results such as Web sites, files,
photos, or other media files. Examples of these are Bing, Duckduckgo, Google, and Yahoo.
  Research indexing sites - These are Web sites dedicated to compile and index: researches done
by academic researchers, engineers, social scientists, and so on. Examples are IEEE Xplore and
Google Scholar.
 Massive Online Open Course (MOOC) sites or tutorial sites - These are Web sites dedicated to
teach and inform users focused on different areas. The delivery of information is similar to a
classroom lecture setup, wherein lectures and assignments are delivered and submitted,
respectively, online. Various universities around the world offer this service. Examples are
Coursera, edX, and Udemy.
 Employment Web sites - These are Web sites that enable companies to post job vacancies and
also accommodate job seekers by providing a resume-submission facility. One important feature
of these Web sites is the ability to match the qualification of the applicant and the required
qualification in a certain job vacancy. Examples are JobStreet and Bestjobs.
 Electronic commerce (e-commerce) - This is a technology that uses electronic means to trade
products and currencies. It also includes any technology that introduces ease in business
management and customer convenience.

Authenticity Verification of Information from the Web

The inherited property of Web 2.0 and its later versions give viewers the privilege to influence
content or give anyone the freedom to publish his or her own Web sites regardless of content. There are
no standards governing content publishing on the World Wide Web to ensure the correctness of
information, but there are ways on how to verity if the information is trustworthy or legitimate.
 Published author's name - Publishing the name of the one who wrote the article on information
is one sign that the information is valid, credible, and legitimate. Most of the authors who are
intentionally writing hoaxes or false articles will likely omit writing their names to avoid
responsibility. This will also enable the users to further research and verify the author.
 Credible Web sites - Error-free articles are more likely published by credible Web sites. These
are Web sites of big international or local companies involved in the field you are searching for.
Another example of credible Web sites are government connected and government-maintained
Web sites. News agencies are another good source of credible information.
 Rating, number of viewers, and number of shares - A credible article is more likely to receive
a high rating or a normally high number of stars from reviewers. This is the collective rating of
past viewers of the site. It has been observed that if the article is not credible or contains false
information, it has a high probability of getting a low rating. If the information in an article is
false, a fewer number of persons would share the article. Another way is to visit the comment
section of the article. If the information presented is not true, most of the comments are negative.
 Reference and related articles - Most of the credible articles include a list of references or
articles related to the published one. To verify the authenticity of an article, visit the articles
listed as references and confirm if the information written on the Web site conforms to the
information in the references.

Online Ethics and Etiquette

The term "netiquette" is a coined or portmanteau term of network and etiquette. The term
"netizen" refers to the person who is a member or a part of the online community. Hence, a netiquette
is a set of ideal rules and conduct that a netizen should observe in communicating and/or publishing
information and materials over the World Wide Web and in ICT in general. The rules of conduct in the
Web vary from one community to another. However, there are some key points to keep in mind to
maintain good conduct over the Internet.
  Recognize that your avatar, or your online representation, is not another world but an
extension of your personality and an extension of the existing society that you are part of.
Anything that you publish, post, or share affects you and another individual who exists
somewhere in the globe, and this individual may be someone whom you might bump into.

 You should apply the values and conduct learned since childhood in the online extension of
our society. The values and conduct imparted to us, such as respect kindness, and courtesy to
others, should be observed as we expect to receive them from others. Theft, hate speech, gossip,
pornography, and bullying are unacceptable in the online community as they are in our
interaction with other people.

 Keep in mind that there are laws existing in our society and on the Web. Remember that
there are punishments laid by the government, not for the sake of punishing, but for peace and
order among the citizens.

 The World Wide Web enables participation of people from different countries with different
cultures and religions. Keep in mind that there are differences among the individuals you
will interact with and the individuals who will read your published contents. Be sensitive
with their beliefs, cultures, and religions. Furthermore, the differences will result in different
behaviors and social norms.

 Everything published on the World Wide Web should be considered as copyrighted or

owned by another individual. However, this does not mean that you cannot use these materials
for your personal use. If the materials are going to be used for educational purposes, certain rules
should be followed in academic writing, referencing, and making citation acknowledgement. If
these materials are going to be used on another Web site and will be published, you should seek
permission from the author. It is also unethical to disseminate the personal information of others
without their permission. Using the Web to distribute photos, videos, and other pieces of
information (e.g., names, addresses, and bank accounts) is also not acceptable.

 In sending correspondence in either email or chat, be careful in selecting words to communicate.

As much as possible, use the appropriate manner of communication and avoid threatening
and disrespectful words.

Online Safety and Security

Each individual when accessing the World Wide Web is concerned with the safety of his or her
terminal or computer and the information that will be transmitted or received. Here are a number of
threats that can be acquired from connecting to the World Wide Web.
 Spam - This refers to the transmission of unsolicited messages from various origins using
electronic messaging systems such as email and chat messengers. Typically, attackers use spam
as a tool for advertisement. Email spam is the most common form, which is also known as
unsolicited bulk email (UBE).
 Phishing - This is defined as a software or a program used by an attacker to obtain personal
information. Attackers commonly target user passwords to hack and take control of a user
account. Furthermore, credit card numbers are also targeted by phishing.
 Malware - This is the short term for malicious software, which is a computer software sent by
attackers to inflict chaos on a computer's operation and processes. Most of the time, this program
is disguised as enticing Web sites. Malwares are used to spy upon the activity of the computer
and steal information.
 Other threats worth a mention are viruses, trojan horses, worms, denial-of-service attacks,
hacking, ransomware, spyware and adware, and rootkits.
There are a number of threats lingering on the World Wide Web, and users are very prone to
being infected by these threats. A very effective way of avoiding these threats is verifying the
authenticity and credibility of the Web source. The methods are similar to the methods of
verifying the authenticity of information from the World Wide Web.

Government Provisions for Online Courtesy and Etiquette

The Philippine government ensures the welfare of its people in their ICT experience by enacting
various laws and regulations. When ICT grew in the country, several security issues arose and became a
concern for lawmakers. There are incidents of theft, scam, phishing, and other activities that victimize
Filipino people. Laws that aim to protect the people from these illegal activities were presented.
 Republic Act 10627 or Anti-Bullying Act of 2013 — bullying is defined as "severe or
repeated use by one or more students of a written, verbal or electronic expression, or a
physical gesture, or any combination thereof, directed to another student that has the effect of
actually causing or placing the latter in reasonable fear of physical or emotional harm or
damage to his property." This law also includes protection of individuals from bullying
through electronic means. Bullying invades an individual's privacy by using photos and other
information meant to disgrace that individual.
 Republic Act 10175 or Cybercrime Prevention Act of 2012 — this law protects an
individual from various unwanted online and cyber acts that may harm or evade one's privacy
and integrity. Cybercrime offenses include, but are not limited to, integrity and availability of
data, illegal access of computers through remote means without permission, interception of
one's information from a private conversation or correspondence, acquisition of passwords
and other vital information from an individual, computer forgery, and libel.

Another law to note is the Data Privacy Act of 2012, which protects personal information and
data from being divulged without consent.

Activities

1. Based on your observation, how do different forms of social media affect the lives of
people today? What do you think is the effect of the excessive use of social media?

2. Do you know someone that has had a bad experience in using online sites? If yes, what do
you think is the reason that had lead them toward that situation? Since you have read the
netiquettes, what would be your advice to him/her to prevent such experience?

3. Complete the table by listing the things to do to prevent the following online threats:

Online Threat Things to do

 Spam

Phishing

Malware

Module 2 - Visual Design: Imaging and Layout Design

Basie Principles of Graphics and Layout

The term "infographic" is a short term for information graphic, which refers to an image that
combines information, storytelling, and perceptions that help the cause of an individual or an institution
to communicate a message to viewers. Images are very effective in communicating messages because
they are easily understood.

Here are the basic elements of layout and design to guide you in creating an effective
infographic.
 Lines - lines are the most basic of all the elements. Lines can define the characteristics of an
infographic. Lines can form shapes that can catch the attention of a viewer. They can be sharp,
be made up of broken lines and fine or thick lines, and can create different impressions to
viewers. A group of lines can also create patterns or shapes.
 Color - Color is one of the powerful and influential elements in an infographic. Using the right
combination of colors can catch the attention of a passerby or even glancing viewers. For
example, red, orange, and yellow are strong or warm colors that can easily attract attention. On
the other end, blue, green, violet, and indigo are cool or soft colors. Combining colors and
having a good command on color mixtures and combinations can catch the attention of the
viewers.
 Shapes - These are defined by the enclosure created by a combination of multiple lines. Shapes
expres different psychological influences on the audience especially when combined with
different colors. Shapes are universal symbols that do not require language, but they can give a
specific meaning regardless of the background and ethnicity of the viewer.

Principles of Design
The use of different design elements defines the message and ideas that the image depicts.
Presented are five principles of design that will ensure a harmonious relationship between the viewer
and the image itself.
  Balance - This describes the placement of elements, shapes, or lines throughout the image.
Unconsciously, humans are always looking for balance. Ensuring a proper balance in your
creations will produce an effective relationship with your work and the viewer. There are two
types of balance.
 Formal balance - when objects are placed symmetrically and are properly distributed
 Informal balance - includes a nonsymmetrical distribution of elements but is compensated
in different aspects such as colors and lines.
 Contrast — the arrangement of elements in an image may be done by combining elements with
different properties and characteristics. See Figure 3.2 to have an idea on the relationship of the
foreground and background to represent contrast.
 Unity — it is when all of the elements seem to be a singular element in unison. This makes the
design pleasing to the viewers.
 Proportion — this is the correlation of all the elements with one another. The practice of having
proportion among the elements ensures balance and unity.
 Rhythm — this describes the product of having the elements placed in harmony with one
another. Rhythm can be done by using patterns and by repeating various elements.

Image File Formats

File formats, specifically image file formats, are facilities or methods to store and organize
digital images. They are standardized layouts of files (i.e. how they are arranged logically within a file).
The manner of interpreting digital image files is due to the format of storing and coding the image files.
The elements of the picture, which are referred to as pixels or picture elements, are arranged and stored
in a manner dictated by the format of the image. Furthermore, the size that an image occupies in the
storage device is directly related to the formatting used. There are a number of file formats for images,
some of which are presented here.
 Joint Photographic Experts Group (JPEG or JPG) - This is a compression method that
complies with the JPEG File Interchange Format (JFIF). This format applies a lossy"
compression method to image files, which means that a huge number of pixels are lost or
discarded in storing the image. The information is not lost, however, but a great space for storage
is saved.
 Tagged Image File Format (TIFF) - This is a less common file format supported by Web
browsers. This file format can use either the lossless or the lossy compression method.
 Graphics Interchange Format (GIF) - This is a popular file format for storing graphical
images with fewer colors. This file format supports 256 colors only. GIF compression method
uses lossless compression techniques.
 Portable Network Graphics (PNG) -The intention for the creation of this file format is to be a
free and open source substitute for GIF. This file format is expected to be fully compatible with
online applications. This is a lossless compression method; thus, it is also used in editing
applications.

Image Manipulation
An image editor is an application that contains tools that can alter digital photos and images.
This type of application is used to enhance photos and is typically used by graphic editors and artists.
There are many image editing applications, with the Adobe Creative Suite series being one of the
most famous image editors in the market today. For this module, however, you will know how to use the
GNU Image Manipulation Program (GIMP), a free image editing software, and Blender.
The Components of the GIMP
The work area (1) of the editor is the spacious area in the middle. When an image is opened, the whole
of the work area is occupied.
The tool box (2) is located at the left side of the window and is tiled vertically. This small window
contains various tools for editing, cropping, and making image enhancements.
The layers (3) window is located at the right side of the application. It contains layers of the images in
the work area. Layers are defined as another image that is mixed or combined with another layer. The
combination will produce a composite of layers and is the final graphic photo or image.
Other components of the GIMP are the tool options (4) and the brushes/patterns/ gradients (5).

GIMP Manipulation
1. Opening Image Files - At the upper portion of the GIMP editor, press the File option (shown on
Figure 3.4). Then choose the directory where you are going to save the image you are about to edit.
2. Select Tool - Select the crop tool from the tool b0x. Select the area that you want to enclose while
dragging left-click across the image. There are three types in the select tool: the square tool, ellipse tool,
and free select tool. The square tool enables you to select a portion of the image by enclosing it with a
square. The ellipse tool enables you to select a portion of the image by enclosing it with an ellipse or a
circle. Last, the free select tool enables you to select a portion of the image by an arbitrary enclosed
shape that you define by tracing the image in freehand.

3. Erase Tool - Select the erase tool from the tool box. Then hold the left mouse button and drag it
across the image. The erase tool is a tool used to replace any selected part with white strokes. It is
referred to as an erase tool because any color stroked with this tool is replaced by white as if you were
erasing on a paper.
4. Paintbrush Tool - Select the paintbrush tool from the tool box. Then hold the left mouse button and
drag it across the image. The paint tool is similar to the erase tool. The only difference is that you can
select and change the color of the brush.
5. Saving Your Work - From the File option, select the Save As option and save your work in the
desired directory.
Combining Text and Image by Using the Text Tool
1. Select the Text tool in the tool box window.
2. Set the properties of the text to be inserted in the lower part of the tool box.
3. Click the area where you want your text to appear.
4. Type the text you want to appear with the image.
Blender
Blender is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline
—modeling, rigging, animation, simulation, rendering, compositing and motion tracking, video editing
and 2D animation pipeline.

Blender's default starting mesh is a cube, we will be demonstrating basic functions on this.
 To rotate around in the 3D view, hold down the middle mouse button and move the mouse.
 To move up and down or to and fro, hold shift+middle mouse, and move the mouse.
 Use the scroll wheel to zoom in and out.
 To select an object right click, to de-select right click away from the object.
 To select multiple objects, hold "SHIFT" and select the objects.
 To select everything press "A" or to de-select everything press "A"
Notice that when you select something, it will be highlighted orange.

The two modes we will be using in this tutorial are:

 Object Mode
This lets you select objects and move them around as you please.

 Edit Mode
This allows you to select individual vertexes, lines, and planes. you can modify the mesh in this
mode.

To switch between these two modes you can either go down to the menu below, or just press TAB.

Rotation Scaling and Translating

First I want to make note of the arrows that appear when you select an object.
Those are the Axes. The red arrow is the X axis, green is the Y axis, and blue is the Z axis.

These arrows allow you to move things more accurately.

 Translating

There are three ways to do this, one is to simple right click and drag. Another is to just select the
object and press "G" Or, you can left click on the axis you want to move the object on, and drag.

 Rotating

Rotating is very simple, all you have to do is select the object to be rotated, and press "R" If you
want to rotate around a specific axis, first press "R" then "X", "Y", or "Z". Each letter
corresponds to its respective axis.

 Scaling

To scale an object, simply press "S". If you want to stretch an object along a certain axis press
"X", "Y", or "Z", after pressing "S"

The 3D cursor is exactly what it sounds like, it's a cursor in the 3D view. By default it starts in
the origin, but you can move it by left clicking.

If you add an object, such as a cube or sphere, it will appear where the 3D cursor is.
 To add a mesh, go to the "Add" menu or press SHIFT + A, from there you will find many sub
menus, the top one being "Mesh".

In edit mode there are three ways to select things, you can either select individual vertexes, lines
or planes. To switch, click the three buttons at the top.

In edit mode you can select two or more vertexes, and merge them together.
To do this, go into edit mode, select the vertexes you want to merge, press "W", then, merge.
 In edit mode, you can select a line, vertex, or plane, and extrude, or, extend it. To do this,
select the thing you want to extrude, then press "E".

Edge loop allows you to make a "cut" in a mesh, letting you modify it further. To do this, press
"CTR+R" and select the spot you want to cut, then it will allow you to slide that cut, then place it. This
is handy when you want to extrude only a certain part of a plane.

Switch back to object mode. Modifiers modify your mesh (go figure). One that you will use
often will be the "subdivision surface" modifier. This modifier makes your model all smooth. The
modifier properties are in the right tool bar.
Online Image Hosting Web sites
Online image hosting Web sites are Web sites that store uploaded images by users. There are
various Web sites that can host your images, some of which are free. There are Web sites that also offer
value added services such as online editing and enhancement tools. Here are some examples:
 Google+ Photos  500px
 Flickr  Unplash
 Smugmug  Freepik
 Imgur

Activities

1. Among the different image file formats, which do you think is the best? Why?

2. Why there is a need for compression of images?

3. You are a member of a world peace advocate group. The president of the group has tasked
you to create a poster (using GIMP or Blender) that will raise awareness about pursuing
peace in the Philippines. The size of the poster should be A4. The president will evaluate
your output in terms of creativity, originality, and message.

Module 3 - Online Tools for Content Development

Different methods, techniques, and tools for image manipulation were discussed in the previous
module. Creation and manipulation of 3D images was also tackled in the previous module. These
images are used in a variety of ways, from visual aids in word processing and presentation files, to
stand-alone infographics and printed images. Created or modified images will always be used by certain
programs by either Web or local application. 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.

Online Platforms and Applications

The term "platform” refers to a program created by developers that can be modified or
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 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.

APIs

The Application Programming Interface (API) is a set of governing protocol or rules on how
software elements should communicate and interact with one another for building software applications.
APIs are also subroutine definitions and the actual tools and programs as well. 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
application codes are uploaded or injected into the API and the API will test and run the
application code. Most of the time, this API is hosted in a remote area and requires the services
of the Internet.

Social Media Platforms

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 APls 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. 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 Faceb0ok account.

 Google Maps - 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.

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.

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.

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.

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.
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 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.

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.
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 Web site. 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.

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 layout considerations 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.

 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, HTMIL Editors, and WYSIWYG

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 string commands in an editor
program. A program will then convert the several developed 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 continuous browsing and editing of a Web site.
It also enables the collaborative development of a Web site.

 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.

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. Cloud-
based means that an application, service, or resource is made available to users on demand via
the Internet. 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.

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

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.

 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.

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.

Activities
2. List examples of WYSIWYG applications, their advantages, and their
disadvantages in this table.

WYSIWYG Application Advantages Disadvantages

2. Complete this table with the sites that you visit frequently, their URLs, and types
of API that they use.

Website URL Types of API

 3. Here are the factors that are considered in authoring a Web site. Based on your
idea which is more important? Rank them from 1 to 8, 8 being the most important.

______ Load time ______ Navigation

______ Colors ______ Communication
______ Layout ______ Images
______ Typefaces ______ Purpose

Justify your ranking:

EMPOWERMENT
TECHNOLOGY
 Grade 11 module

Teacher: Richard Clark Cuneta