ONLINE TOOLS FOR CONTENT

DEVELOPMENT
BASIC WEB DESIGN PRINCIPLES & ELEMENTS
EMPOWERMENT TECHNOLOGIES
..\Desktop\ULS SENIOR HIGH 2018-2019\20 Examples Of Bad Web
Design _ Top Design Magazine - Web Design and Digital Content.
html

..\Desktop\ULS SENIOR HIGH 2018-2019

Objectives:
At the end of this module the students can:
1. evaluate existing online creation tools, platforms, and applications in developing
ICT content for specific professional tracks.

2. apply Web design principles and elements using online creation tools, platforms,
and applications to communicate a message for a specific purpose in specific
professional tracks.

3. create an original or derivative ICT content using online creation tools, platforms,
and Applications to effectively communicate messages related to specific profession
al tracks.
Online Platforms and Application

The term “Platform” refers to the program created by developers that can be
modified or reprogrammed by outside users. It is a facility for programming or d
eveloping an application tailored to the user’s specifications.

Online platforms are online web sites created to aid users in creating their We
b content and cater to different kinds of information such as texts, images, and
videos. Another unique future of online platforms is the ability to program, modif
y, and access the application remotely using internet.
The Formula Translating System (FORTRAN)
or commonly known as Formula Translation

The demand in occupational function and administrative facilities in computing

machines intended to perform different applications gave birth to the field of pla
tform development and creation. The first effort of humans to create
development platforms and online platforms can be traced back to the start of p
rogrammable computers.

The first successful commercial programming language compiler, helped

humans give instructions and interact with computers without altering the hard
ware component of the computer.
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.
Type of API
Access API - This type of API runs in a remote machine, server, or computer, and the ap
plication is accessed remotely by guest user application to draw data services.

Plug-in API – Most of the time, this API is used in the user end. Generally, different devel
opers create different applications that can be integrated or “plugged in” to a core applica
tion and/or the GUI of these applications. Typical examples are the plug-in programs for
Web browsers that enables 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 applications codes are evaluated and compiled in the said APIs. Th
e application code 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 requires the servic
es of the internet.
Common Web sites that use plug-in APIs are presented here:

Youtube – Youtube is dedicated to hosting video clips. Users can create an account on Youtube and
upload videos for public and private viewing.

Flickr – Flickr is a Web site that caters to the hosting of images. Users of the site create a private ac
count wherein they can upload images and categorize the image as to whether they are viewed priva
tely by the uploader or by the public.

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.
Common Web sites that use plug-in APIs are presented here:

Facebook – Facebook is a social networking Web site that requires the user to register an account a
nd 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 a
dding them as “Friends.” On this Web site, users are capable of posting information on their “Wall” or
the links in their Wall.

Google Maps – Google Maps APIs are one of the most used APIs by Web site developers. Commonl
y, Google Maps APIS are used to indicate a location of an establishment described on a Web site. Th
ese APIs enable the developers to display an accurate map depicting the satellite views or the actual
appearance and layout of roads and building 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 install 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 fulfil. Web site can also 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 site, the designer should define first the purpose of the Web
page to determine the theme of the Web site. This will help the Developer
create a more organized and relevant site.
Here are the factors that greatly contribute to this goal

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 a headings, subheadings, or bullets.
Outlining will also avoid long fuzz sentences.
Here are the factors that greatly contribute to this goal

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.

Colors – Theme enhance the experience of the 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.
Here are the factors that greatly contribute to this goal

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. These 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.
Here are the factors that greatly contribute to this goal

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

Possible layouts are presented here:

Grid
F-Pattern
Mobile
GRID LAYOUT
F-PATTERN
MOBILE LAYOUT
Here are the factors that greatly contribute to this goal

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 very fast pace. If the Web site takes some time
load, most especially if there are too much content, the users will most likely
search for another source.
Web Design Using Template and WYSIWYG

WYSIWYG in the Web site design in an acronym for the W

hat You See Is What You Get. It is an application that is us
ed to create a Web site either online or offline. This type of
application uses the capability of directly handling the comp
onents of the Web site. The developer can directly drag an
d drop elements to manipulate the layouts of the Web site.
Presented here are some of the WYSIWYG applications
for both online and offline development.

ADOBE
DREAMWEAVER
Presented here are some of the WYSIWYG applications
for both online and offline development.

AMAYA
Presented here are some of the WYSIWYG applications
for both online and offline development.

IM CREATOR
Presented here are some of the WYSIWYG applications
for both online and offline development.

WiX
Wix.com Ltd. is an
Israeli cloud-based
web development platform
that was first developed and
popularized by the Israeli
company also called
Wix.
Founded: 2006
Presented here are some of the WYSIWYG applications
for both online and offline development.

WORDPRESS
WordPress is a free and
open-source content
management system
based on PHP and
MySQLFeatures include a
plugin architecture and a
template system.
Initial release date: 27 May 2003
Collaboration and Team Content Development
Collaborative Development

Building a Web site requires addressing different a

spects 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 these aspects in
one project.
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.

Web strategist – upon start of development, the Web strategies 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

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 sites.
Presented here are the roles that a Web development
team essentially requires.

Web designer – the Web designer is the one in charge of the visual
presentation of the Web site.

Developer – the developer takes into account all the outputs of the content
specialist and Web designer.

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 diffe
rent strategies such as blogs, social media, and advertisement to promote
Web site.
Cloud Storage
Cloud storage is a service wherein files from users are stored online.
The files are uploaded by users and received by a storage server that
hosts the service. Physical multiple storage devices save files that are
uploaded and are waiting to 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 listed here:
Google Drive – this is a storage application developed by Google. This application does not only st
ore a file but also accommodates online editing and collaboration. Google drive provides tools such a
s word processing, spreadsheets, presentation slides, and other common file types for collaboration
and storing.

Dropbox – this is afile hosting and storage service developed by Dropbox, Inc. it offers a facility to
synchronize and create for file organization. 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.