Welcome!

Web
Development Life
Cycle
CSC 304
Web Programming

SYLVESTER O. AGUILAR
Instructor
 Despite being a generally accepted belief, the core
part of web programming is not necessarily just about
coding. To produce a well-organized and successful
website, there are a lot of processes and activities that
needed to be done to achieve the purpose and goals
which the website is intended for, and set an assurance
with its adaptability to new trends and updates.
Web
Development Life
Cycle
Web development life cycle (WDLC) is a methodological way
of developing quality web sites.
The web development life cycle includes the following
phases: •
• Research Coding
• Planning • Testing, Reviewing and
• Designing Launching
• Content Writing • Maintenance
Phase 1: Researching
The first step in web development is understanding of the
goals, type, purpose and functionality of the website.
The following are points to consider in doing the
research:

• What is the purpose of the website?

• What are the goals to achieve?
• Who are the target audiences?
Phase 2: Planning
The second step in web development is to plan how the web
site is going to look and work as a whole. This includes arranging the
navigation, and organizing the structure of the website.
There are two different tools for planning the structure of a
website:

• Sitemap
• Wireframe
Phase 2: Planning

A sitemap is an organized URLs or hyperlinks of a website that

are arranged relative to the website navigation. Sitemaps are used
for web developers in order to have an overview on how the
website is going to navigate from one content or link to another.
Sylvester
Aguilar
Site

A
sitemap
Phase 2: Planning

A wireframe, also called, a mock-up, is a visual representation

of the websites’ user interface or the website’s appearance as the
point of user-computer interaction. This will allow the web
developers and clients visualize the layout of the website.
A
wireframe
Phase 2: Planning
There are many applications available that can
help in preparing sitemaps and wireframes easier. You
can
an tryonline sitemap creator called GlooMap
s
(https://www.gloomaps.com), and an
online wireframe
creator called MockFlow (https://www.mockflow.com).
Both of the sitemap and wireframe examples shown are
created using these web applications.
Phase 3: Designing
In this stage, the website’s visual elements will be
created. This includes the logos, images, banners, videos,
colors, the overall website layout, and other visual
elements. The main goal in this stage is to visualize the
content by representing the information structure of the
website.
Here are some of the
elements that build up
a well-organized and
effective website:
 Header
Menu/Navigation Bar Search bar
Brand Name/Logo

Banner

Posts/Feed content

Headline/Sub headline

Footer
Highlighted Call-to-action
content

Forms
Social media
links
Copyright
information
Featured content

These are some of the

elements that build up a well-
organized and effective
website.
Phase 3: Designing
Another thing to be taken care of in the designing
phase is observing website responsiveness. It is important
to plan how the website is going to adapt to different
screen resolutions and orientations. Let us compare
Facebook’s appearance in different screen sizes and
orientations.
A responsive
website.
Phase 4: Content
Writing
Putting the very essence of audience
communications to writing is arguably the most important
tool in helping achieve the goals of a website. Content is
the reason why people visit your website.
Phase 5: Coding
In this stage, all the previous stages of information
gathering, planning, and designing will be translated into
actual working pages.
The most common way of coding the website is
through the use of markup languages and client-side
scripts. There are three major concepts in coding:
structuring, formatting, and adding interactivity.
Phase 5: Coding
Structuring is writing the basic elements that make
up the website. This is using Hypertext Markup Language
or HTML. HTML is the standard markup language for
web pages.
Phase 5: Coding
The concept of structuring a website can be
compared to building the foundation and the structure of a
house. It doesn’t have any design elements to it yet, but it
makes up for the strength and the form of the entire
building.
Phase 5: Coding
Formattin is a coding process that
g
control of how allows the the
rendered by the web
HTMLbrowser. Cascading
tags will Style once
look like Sheets or
CSS is the most notably it’s
used language for formatting.
Phase 5:
Coding
The concept of formatting a website can be
compared to adding the walls, roofs, and other support
parts of a house after its foundation is built.
Phase 5: Coding
Adding Interactivity. To make the website more
interactive, JavaScripts are used to dynamically modify
HTML and CSS behavior. This includes adding animations
or generate data without page reloading, etc. The main
goal of using JavaScript is to enhance the user
experience for the website.
Phase 5: Coding
The concept of adding interactivity in a website can
be compared to adding appliances, and amenities
that makes the house a home.
Phase 6: Testing,
Reviewing, and
Launching
• Once the website design and coding is complete, it is
important to carefully test the functionalities,
security, interface, compatibility, and navigation, as
well as the accuracy and authenticity of the
contents. Once everything is sure to work according to
plan, it’s time to upload it to a server through hosting
services. It is important to choose the right hosting
company that offers the exact services your website
Phase 7: Maintenance
A well-reviewed and tested website does not always
mean the website development is already done. Consistent
evaluation is important to make sure that the website will
serve its purpose in the long run.
Phase 7: Maintenance
Here are some of the tips in maintaining a website:

• Content update – consider archiving outdated

contents and make room for newer ones. This will keep
the viewers interested.
• Redesign – Design is constant. Every now and then, a new
design trend will be introduced. It’s important to
always check out the latest design trends.
Phase 7: Maintenance

• Optimize the website – optimizing the website optimizes

the website’s SEO (search engine optimization). This will
boost the website’s rank in search engines, letting
more people visit your website.
That’s all
for
today!
Thank you.
Keep safe.
God bless.