The document discusses the process of developing web applications, beginning with ideating an app idea, conducting market research, designing prototypes, choosing development technologies, and deploying the application. Key aspects of web applications are also defined, such as static vs. dynamic apps, content management systems, and progressive web apps. Examples of popular web applications like Gmail, Facebook, and Amazon are also provided.

1. WEB APPLICATION DEVELOPMENT (AITC09)
INFORMATION TECHNOLOGY
V SEMESTER – UG20
2022 – 23
Atmakuri Krishna Chaitanya
Assistant Professor, IT

2. MODULE-I
INTRODUCTION TO WEB APPLICATION
AND HYPERTEXT MODELLING

3. Web or w3c or www (World Wide Web) : Web is an
information space containing hyperlinked documents and other
resources. The Web, or World Wide Web (W3), is basically a system
of Internet servers that support specially formatted documents. The
documents are formatted in a markup language called HTML (HyperText
Markup Language) that supports links to other documents, as well as
graphics, audio, and video files.
Web Page or Website: A document which can be displayed
in a web browser. These documents are written in HTML (hypertext
markup language) and are translated by your Web browser. Web pages
can either be static or dynamic.
A Web page is an individual HTML document.
A Web site is a collection of pages.
Introduction to Web application

4. Web Browser:
A web browser (commonly referred to as a browser) is a software
application for accessing information on the World Wide Web. When a
user requests a web page from a particular website, the web
browser retrieves the necessary content from a web server and then
displays the page on the user's device.
HTTP:
HTTP (Hypertext Transfer Protocol) is the protocol used to transfer data
over the web. It is part of the Internet protocol suite and defines
commands and services used for transmitting webpage data. HTTP
uses a client-server model.

5. HTTPS:
HTTPS stands for Hypertext Transfer Protocol Secure. It is the protocol
where encrypted HTTP data is transferred over a secure connection.
So, HTTPS does encryption of data between a client and a server, which
protects against eavesdropping, forging of information and tampering of
data.
Web Server:
The basic objective of the web server is to store, process and deliver
web pages to the users. This intercommunication is done using
Hypertext Transfer Protocol (HTTP).
client:
A client is a piece of computer hardware or software that accesses a
service made available by a server. The server is often (but not always)
on another computer system, in which case the client accesses the
service by way of a network.

6. What Is A Web Application?
Every time you ‘do’ something online, you have used a web
application. Be it online shopping, online banking, or web-
mail. Web apps are essentially an application software that
is stored on a remote server provided by a third-party and
can be used directly from your browser, without having to
download anything.
'A Web application (Web app) is an application program that
is stored on a remote server and delivered over the Internet
through a browser interface’.

7. What is Web Application Development?
Web application development is the process of using client-
side and server-side programming to develop an application
accessible over a web browser. Developers begin with
ideating a web application based on finding a solution to a
specific problem, and move on to design the app, choose the
right framework to develop the web app, test it and finally
deploy it.

8. Web App vs Website – Is There a Difference?
A website can be a static page that only gives out information
and may or may not have an input dependability.
A web app on the other hand is a dynamic web application
that responds to user input and allows users to perform
certain tasks over the internet.
So in short, any website that has client-side component that
allows users to perform a task can be called a web app.
Web apps are designed to perform specific tasks that help
user solve a problem. Websites can exist merely to provide
information.

9. Types of Web Applications

10. Static Web Applications
static web apps are more like a collection of static web pages
that display the same information to every visitor. They are
built using HTML and CSS and offer no interactivity.
Dynamic web applications
Dynamic web apps as the name suggests are interactive in
nature, involving server-side as well as client-side
programming. If you can input some information into a web
app and retrieve different results, that is a dynamic website.

11. Ecommerce apps
If you wish to sell or buy anything online, you need at the very
least, a web app that can place orders and process payments.
Such an app would be called an ecommerce app.
Portal Web Apps
A portal web app is a type of web application that allows
users to log in to a secure area from a home page. Take credit
card payments for instance. You could be on a shopping
website or a bill payment website, and when it’s time to
choose a credit card and make a payment, you are asked to
log into the credit card company’s web app to complete the
payment. That is an example of a web portal.

12. Content Management System or CMS Web App
A content management system or CMS allows even non-technical users to easily
create and update content online. From a simple blog to a more comprehensive
website, a CMS allows users to keep these assets up to date with the latest
information.
Progressive Web Apps
Progressive web apps (PWAs) aren’t merely a classification of web applications. They
are in fact, a quantum leap in the field of web based application development.
These apps behave like a live, ready to access website that you can save on your
homescreen, without downloading, and can access anytime you want in just one click.
A PWA on the other hand is just like a website. Users can start using it as soon as they
discover it, eliminating steps like downloading and onboarding. Yet, once they choose
to add it to homescreen – which takes a second or two – they can be sent push
notifications and personalized communication to boost engagement.

13. Best Examples of Web Application Development
•Online forms, shopping carts, word processors, spread sheets, video and photo
editing, file conversion, file scanning.
•Gmail
•Facebook
•Twitter
•Instagram
•Amazon

14. The Web Application Development Process

15. Step 1 – Find a Genuine App Idea
First, you start with an idea for a web app that solves a problem. The
best apps come from seeking solutions to problems you are people you
know face on a regular basis.
Your idea doesn’t need to be path breaking or unprecedented. It can be
an improvement over something that already exists. What’s important is
that it must be a significant improvement.
You could come up with a way to perform a task better, faster, easier or
cheaper than anyone currently does.
Step 2 – Market Research
Once you have an idea, it’s time to understand you audience.
You need to think about the potential market for your idea. Who are the
people who could use your web app. Both the business perspective and
technical direction of your web app depend on the people you intend to
serve.

16. Step 3 – Define Functionality – What Does Your Web App Do
This is the step where you differentiate between aspiration and action. You need to isolate one
core functionality that your app does best and which is the reason people should use your app.
The job of setting aside multiple attractive feature additions and focusing on one core feature
must be accomplished at this stage. Restrain the urge to make your app an all-in-one solution.
With that focus feature in mind, think about the basic capabilities your app will need. For
instance, you need user profiles, passwords, contacts, checkout, payments, content
management system, and more.
Step 4 – Sketch Your Web App Design
A simple sketch is your first step to web application design.
All you need right now is a pencil and a paper. That’s it. Draw up a basic outline of your app,
page by page.
At this stage, it doesn’t have to be intricately detailed. As long as it gives you a basic idea of the
flow, you’re good. Just be sure to demarcate where the buttons, text and images go.
This is also the stage to map out your workflow. Basically, get your sketches in order. What
comes after what.
For instance, from the sign up screen, you go to a page where users enter their essential
information and create a user profile. From there, you could move on to a products page or
services page depending on the type of app. Once you have the basic layout and workflow
ready, you can move on to wireframing and prototyping.

17. Step 5 – Wireframes and Prototypes
This is where we get on our computers and start knocking out the first working models
of our web app.
A wireframe is much like a sketch but on a computer and a little more structured. It
tells you exactly how your app pages will look.
The next step would be creating a web app prototype. When you add some
interactivity to your wireframes so that they appear just the way they would on the
real app, but with limited functionality, that’s called a prototype.
At first, it is better to build as basic a prototype as you can. There are a number of
tools that you can use to create a prototype. Some of the best tools we like to use here
at Moveo are:
•Sketch
•InVision Studio
•Adobe XD
•Balsamiq

18. Step 6 – Time to Start Validating
Technically, you could start validating as soon as the idea strikes you. You could
ask your friends and colleagues about the potential of your idea. However,
now that you have a prototype, you can actually begin the first stages of alpha
and beta testing to see how users would use your app.
Round up a group of potential users – usually your colleagues and other
people you can contact personally. Get them to try out the web app prototype
and begin gathering feedback.
This feedback will help you immensely improve your app and make it more
usable. This way, when you get ready to begin the all-important development
phase, you have a strong foundation to build on.

19. Step 7 – Choose Your Technology
So far, we were dealing with the soft skills of web app development. Once you
enter the development phase though, there are larger technical decisions to
be made. This is where the fun begins.
You will need to choose the right framework, libraries and platforms to build
your web app on. What you choose will depend on factors like the
functionality of your app as well as your personal preference. Since there are a
number of good web application development tools to choose from, pick a
combination of what works and what you’re comfortable working with.

20. Step 8 – Host Your Application on the Web
You will need to choose a server to host your web based application.
Buy a domain and set up an SSL certificate. Then, choose a cloud
provider like Amazon (AWS) or MS Azure. You could also choose the
Google Cloud Platform.
Step 9 – Deploy Your App
Once you have the code and the host, you are ready to go
live. Just deploy your app on to your hosting solution and
your app is ready for your users. You have just created a web
app so good job!