lOMoARcPSD|62347869
Web technology unit 1
web technology (Dr. A.P.J. Abdul Kalam Technical University)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
WEB
TECHNOLOGY
(BCS-502)
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Introduction
• Web Technology refers to the various tools and
techniques that are utilized in the process of
communication between different types of
devices over the internet.
• A web browser is used to access web pages. Web
browsers can be defined as programs that display
text, data, pictures, animation, and video on the
Internet.
• Hyperlinked resources on the World Wide Web
can be accessed using software interfaces
provided by Web browsers.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Introduction
Web Technology can be classified into the following sections:
• World Wide Web (WWW): The World Wide Web is a system of interlinked
hypertext documents accessed via the Internet. Web is a huge collection
of pages of information linked to each other around the globe.
• Web Browser: The web browser is an application software to explore
www (World Wide Web). It provides an interface between the server and
the client. It requests to the server for web documents and services.
• Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web pages.
This exchange takes place using Hypertext Transfer Protocol (HTTP).
• Web Pages: A webpage is a digital document that is linked to the World
Wide Web and viewable by anyone connected to the internet has a web
browser.
• Web Development: Web development refers to the building, creating, and
maintaining of websites. It includes aspects such as web design, web
publishing, web programming, and database management. It is the
creation of an application that works over the internet i.e. websites.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
• Web Development can be classified into two
ways:
Frontend Development: The part of a website
that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of
the application.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Front End Technologies
• HTML: HTML stands for Hypertext Markup Language. It is used to design the front-
end portion of web pages using a markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web
pages. The markup language is used to define the text documentation within the
tag which defines the structure of web pages.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you
to apply styles to web pages. More importantly, CSS enables you to do this
independent of the HTML that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create magic on the
sites to make the site interactive for the user. It is used to enhancing the
functionality of a website to running cool games and web-based software.
• AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to
communicate with the server without refreshing the web page and thus increasing
the user experience and better performance.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Back End Frameworks and
Technology:
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Web Development Strategies
• Planning and Requirement Gathering
• Designing and Prototyping
• Development Phase
• Optimization
• Testing and Deployment
• Post-Launch Strategies
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
1. The Origins of the Internet (1960s–1980s)
A. Early Ideas of Networking (1960s)
•The concept of networking multiple computers originated in the 1960s
during the Cold War, driven by the need for secure communication systems.
•Paul Baran and Donald Davies independently proposed packet-switching, a
method of data transfer that breaks data into packets and sends them across
networks efficiently.
B. ARPANET (1969)
• The Advanced Research Projects Agency Network (ARPANET) was the
first operational packet-switching network, funded by the U.S.
Department of Defense.
C. TCP/IP Protocols (1970s)
D. Transition from ARPANET to Internet (1980s)
E. The Birth of the World Wide Web (1989–1990s)
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Writing Web Projects
• Introduction to the Project
• Project Overview:
• Provide a brief description of the web project.
• Mention the project's purpose, its target audience, and the
problem it solves.
• Highlight the type of website/application (e.g., e-
commerce, portfolio, blog, dashboard).
• Goals and Objectives:
• Define the key objectives of the project.
• Explain what you hoped to achieve in terms of
functionality, design, and user experience.
• Example: "The primary goal was to build an e-commerce
platform that allows seamless product browsing and a
user-friendly checkout process."
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Writing Web Projects
• Planning and Requirements Gathering
• Initial Research:
• Mention any research done to gather requirements. For
example, user interviews, market research, or competitive
analysis.
• Project Scope:
• Outline the features and functionality decided for the
project.
• Example: "The scope included a user registration system,
product catalog, shopping cart, payment integration, and
order tracking."
• Tools Used for Planning:
• Detail project management tools like Trello, Jira, or Asana,
and how they were used to track tasks and progress.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Writing Web Projects
• Design and Prototyping
• Wireframing and UI/UX Design:
• Explain the design tools used (e.g., Figma, Adobe XD,
Sketch) to create wireframes or mockups.
• Describe the design process, such as creating low-
fidelity wireframes and iterating on user feedback.
• User Experience Focus:
• Discuss how user-centered design principles were
applied.
• Mention considerations like navigation flow,
responsive design, and accessibility.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Writing Web Projects
• Design and Prototyping
• Wireframing and UI/UX Design:
• Explain the design tools used (e.g., Figma, Adobe XD,
Sketch) to create wireframes or mockups.
• Describe the design process, such as creating low-
fidelity wireframes and iterating on user feedback.
• User Experience Focus:
• Discuss how user-centered design principles were
applied.
• Mention considerations like navigation flow,
responsive design, and accessibility.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
• Development Process
• Technology Stack:
• List the technologies and frameworks used in the project:
• Front-End: HTML5, CSS3, JavaScript, React, Angular, etc.
• Back-End: [Link], Django, Ruby on Rails, Laravel, etc.
• Database: MySQL, MongoDB, PostgreSQL.
• APIs and Services: RESTful APIs, OAuth, Stripe for payment integration.
• Development Strategy:
• Discuss the approach taken, whether it was Agile, Waterfall, or a hybrid methodology.
• Mention version control tools like Git and platforms like GitHub for collaboration.
• Challenges Faced:
• Describe any major technical challenges during the development, such as:
• Handling large datasets or complex API integrations.
• Managing state in single-page applications.
• Ensuring cross-browser compatibility.
• Explain how these challenges were overcome.
• Key Features Developed:
• Break down the core features you developed, such as:
• User Authentication
• Dynamic forms
• Search functionality
• Real-time chat systems or notifications
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
• Optimization and Testing
• Performance Optimization:
• Explain how the website or application was
optimized for speed.
• Techniques like lazy loading, image compression,
minification of CSS/JS, and use of CDNs.
• Testing:
• List the types of testing conducted: Unit Testing,
Integration Testing, User Acceptance Testing
(UAT).
• Tools used for testing: Selenium, Jest, Mocha, etc.
• Describe any bug fixes and improvements post-
testing.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
• Deployment and Hosting
• Hosting Platforms:
• Detail where the project was deployed (e.g., AWS,
Heroku, Netlify, Vercel).
• CI/CD Pipelines:
• Mention if you implemented Continuous
Integration/Continuous Deployment (CI/CD) and
tools like Jenkins, GitLab CI/CD.
• Security Measures:
• Discuss security protocols used, such as SSL, data
encryption, securing APIs, user authentication
mechanisms, and using tools like OWASP.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
• Post-Launch and Monitoring
• Monitoring Tools:
• Discuss how you monitored the project after
launch (Google Analytics, New Relic, Sentry).
• Post-Launch Improvements:
• Mention any feedback collected from users and
how you iterated or added features post-launch.
• Maintenance:
• Ongoing updates, bug fixes, and performance
monitoring.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Connecting to Internet
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Introduction to Internet Services
Internet services allow us to access huge
amount of information such text, graphics,
sound and software over the internet. Four
types of internet services are :
1. Communication
2. Information retrieval service
3. Web services
4. www
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Communication Services: These services include
exchange of information with individual or groups
Some services are :
Email
telnet
Newsgroup
Instant Messaging
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Information retrieval Services: Offer easy access of
information available on the internet. Like FTP
Web services: Web services allow exchange of
Information Between application on the web.
www: It offers a way to access documents spread over the
Several server over the internet. These documents may
contain text, graphics, audio, video and hyperlinks. The
hyperlinks allow the user to navigate between the
Documents It is most widely used service over the
internet.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Introduction to Internet Tools
Some internet tools are:
Email
TELNET
FTP
Chat software
Gopher
Internet relay chat
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Introduction to client-server
computing.
Client-Server Definition
• Client-server denotes a relationship between
cooperating programs in an application,
composed of clients initiating requests for
services and servers providing that function or
service.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Characteristics of Client Server
Computing
The salient points for client server computing are as follows:
• The client server computing works with a system of request and
response. The client sends a request to the server and the server
responds with the desired information.
• The client and server should follow a common communication
protocol so they can easily interact with each other. All the
communication protocols are available at the application layer.
• A server can only accommodate a limited number of client requests
at a time. So it uses a system based to priority to respond to the
requests.
• Denial of Service attacks hinders servers ability to respond to
authentic client requests by inundating it with false requests.
• An example of a client server computing system is a web server. It
returns the web pages to the clients that requested them.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Advantages of Client Server Computing
• The different advantages of client server compu ng are −
• All the required data is concentrated in a single place i.e.
the server. So it is easy to protect the data and provide
authorization and authentication.
• The server need not be located physically close to the
clients. Yet the data can be accessed efficiently.
• It is easy to replace, upgrade or relocate the nodes in the
client server model because all the nodes are independent
and request data only from the server.
• All the nodes i.e clients and server may not be build on
similar platforms yet they can easily facilitate the transfer
of data.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])
lOMoARcPSD|62347869
Disadvantages of Client Server
Computing
• The different disadvantages of client server
compu ng are −
• If all the clients simultaneously request data from
the server, it may get overloaded. This may lead
to congestion in the network.
• If the server fails for any reason, then none of the
requests of the clients can be fulfilled. This leads
of failure of the client server network.
• The cost of setting and maintaining a client server
model are quite high.
Downloaded by Rahul Gupt (rahulgupt3051@[Link])