Empowerment

Technologies

2nd sem. - Week 3

Subject Teacher: Miss Kimberly Zoilon

Contact No.: 0926-836-2785

1|EMPOWERMENT TECHNOLOGIES
 Chapter 4: Online Platforms

Lesson Objectives

At the end of this lesson, the students should be able to:

1. Evaluate existing online creation tools, platforms and applications in developing ICT content for
specific professional track.

References:

SCIENCE in Today’s World for Senior High School (K to 12 Curriculum Compliant)

Empowerment Technologies (Erwin Reyes Callo, Rosario Laurel –Sotto, Coordinator), pages 53 – 70

Values: Wisdom, Peace, and Fairness

2|EMPOWERMENT TECHNOLOGIES
 CHAPTER
ONLINE PLATFORMS
4
In Chapter 1, “platform” is defined as a group of technologies that is used as base upon which other applications or processes
are developed.

These technologies help us produce and

share more meaningful information through online
platforms and applications. Some of which are free
using templates.

This chapter will present you to the nature and

purpose of online platforms, the principles that they
follow, and will examine sample websites as basis of
your project in creating your own web page or site.

Key understanding

Online platforms are useful ICT tools of today

that can help in developing meaningful and
relevant contents.

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.

Level 1- Access API

APl means application programming interfaces. It is the most common type of internet platform. The apps
on this level run elsewhere and call into the platform via web services API to draw on data and 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
Tim Berners-Lee, creator of the web that made examples include
tremendous impacts on our lifestyle today Photoshop and
Firefox. The best
online example of this is hottest platform
thus far the Facebook.

Level 3- Runtime Environment

3|EMPOWERMENT TECHNOLOGIES
 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.

Glimpse of History
The First Website

The first website on the World Wide Web was created by Tim Berners-Lee, who was then a computer scientist at
European Organization for Nuclear Research (CERN) in Geneva.
It first went live in August 1991. The site explained the concept and history of the web. provided links to all the world's
online information," and outlined the process by which people could improve and expand the web.
The first website: info.cern.ch

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.

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

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

*An Example of how the golden ratio was used on a website.

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

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

4|EMPOWERMENT TECHNOLOGIES
 Emphasizes the more important target (button) by selecting the appropriate color and size.

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

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

7. 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:
 Grid-based layout. the content of this layout is divided into columns, boxes, and different sections.
 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."
 Conventional designs.
Conventional or conservative designs still work well as far as visitor response or likeability
is concerned. They add a hint of trust, reliability as well as brand credibility.

8. Regular Testing
Test Early and Test Often, or TETO, is another web design principle that all designers and
website owners must consider.
Conducting usability tests 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:
 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).
 Visited. This is a link that is not being hovered over or clicked but whose target has been visited by the
user.
 Active. An activelink 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.
 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:
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.
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:
 Required fields
All required fields should be indicated. This is done usually with an asterisk.
 Real-time validation

5|EMPOWERMENT TECHNOLOGIES
 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.
 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:

Tooltips
Those little pop-ups when user's mouse hovers over elements.
Image rotators or sliders
Home page slide shows are all the rage, and a wide range of options is available for
transitions and styles.

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 wherein 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, Rapidweaver, Microsoft SharePoint Designer, and WYSIWYG Web Builder are some
examples of WYSIWYG editors.

Advantages of Using a WYSIWYG Editor

6|EMPOWERMENT TECHNOLOGIES
 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
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 and 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 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:

 Self-service provisioning
End users can spin up computing resources for almost any type of workload on-demand.
 Elasticity
Companies can scale up as computing needs increase and then scale down again as demands decrease.
 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 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 Tile management system is designed to manage individual or group Tiles, 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.
7|EMPOWERMENT TECHNOLOGIES
Cloud Architect
A cloud architect is a computer professional who is responsible for
managing a company's cloud computing strategy. It includes cloud adoption
plans, cloud application design, and cloud management and monitoring. Cloud
architects supervise application architecture and deployment in cloud
environments-including public cloud, private cloud, and hybrid cloud. Also,
cloud architects act as consultants to their organization and need to stay up-to-
date on the latest trends and issues.
Technology in Focus

Everything Is Online
According to an article on Top Ten Reviews, online file sharing services
are becoming the next "big" service businesses everywhere. Its benefits include
the following:
1. no email bounce backs
2. user-friendly
3. send files larger than 2 gigabytes
4. secured files
5. cost-effective

Techtarget, in their article on online file sharing, Dropbox is an example of online file sharing site. Companies
using the service do not have to support and maintain the data. The information stored in an online file sharing service can
be accessed from any device that has an internet connection, including smartphones and tablet PCs, and by anyone who is
given data access rights.

Career in ICT
Website Developer

A web designer develops and creates websites and associated applications.

He/She can work in a variety of industries and often as an independent contractor. Education requirements can
vary, but a web designer can get entry-level work with an associate's degree.
A web designer creates the look, layout, and features of a website. The job involves understanding both graphic
design and computer programming. Once a website is created, a designer helps with maintenance and additions to the
website. He/She works with development teams or managers for keeping the site up-to-date and prioritizing needs, among
other tasks.
The US Bureau of Labor Statistics (BLS) reported in 2013 that the median hourly wage for web developers, who
perform the same duties as web designers, was $30.37 or $63,160 annually (www.bls.gov).

8|EMPOWERMENT TECHNOLOGIES
 ACTIVITY SHEET
Empowerment Technologies
MISS. KIMBERLY ZOILON
(09268362785)

Name: ________________________________________________ Date: _____________________________

Grade and Strand: ________________________________ Score: _____________________________

2nd Sem. - Week 3

Activity 1: Identification
Direction: Identify each question and write your answer on the space provided before the number.

_________________________________________________ 1. It is a system that can be program and therefore customized by

outside developer.
_________________________________________________ 2. They develop and create websites and associated applications.
_________________________________________________ 3. This should be ranked according to its importance and your
objectives.
_________________________________________________ 4. It is a law that considered as a guideline for decision –making in a
viewer’s perspective.
_________________________________________________ 5. The content of this layout is divided into columns, boxes, and
different sections.
_________________________________________________ 6. They defined “platform” in computing as the operating system and
computer –hardware.
_________________________________________________ 7. An editor or program that allows a developer to see what the end
result will look like while the interface or document is being created.
_________________________________________________ 8. It includes presentation programs, forms, and file management that
are available over the internet.
_________________________________________________ 9. An example of online file sharing site.
_________________________________________________ 10. A concept of planning, creating, and maintaining websites.
_________________________________________________ 11. A term for the delivery of hosted services over the internet.
_________________________________________________ 12. It looks much better than sites developed in traditional HTML
programming.
_________________________________________________ 13. It is a style not only the lightbox itself, but also the transition to it.
_________________________________________________ 14. It is a kind of validations that happens after the user has submitted
the form
_________________________________________________ 15. A ready –made design for your website, including images, some
navigation, preferably several sample pages and in some cases flash animations.

ACTIVITY NO. 2: ENUMERATION

Principles for a successful visual language

1.
2.
3.
9|EMPOWERMENT TECHNOLOGIES
Examples of WYSIWYG editors
4.
5.
6.
7.

Elements of a Web Design

8.
9.
10.
11.
12.
Principles to follow in effectively designing your web page or site
13. 17.
14. 18.
15. 19.
16. 20.

ACTIVITY NO. 3: ESSAY

Direction: Write your own idea or thought about the question. (5 points)

1. Since the online technologies allow online selling, what do you think are the advantages and disadvantages of
converting a business from offline to online?

10 | E M P O W E R M E N T T E C H N O L O G I E S