Content deleted Content added
rm confusing duplicate section numbers |
Rescuing 1 sources and tagging 0 as dead.) #IABot (v2.0.9.5 |
||
| (32 intermediate revisions by 25 users not shown) | |||
Line 1:
{{Short description|Development of web sites and apps}}
{{
{{multiple issues|{{more citations needed|date=December 2012}}
{{more citations needed|date=December 2012}}▼
{{Original research|date=May 2022}}
{{how-to|date=December 2023}}|collapsed=yes}}
'''Web development''' is the work involved in developing a [[Web site|website]] for the [[Internet]] ([[World Wide Web]]) or an [[intranet]] (a private network).<ref name="
Among Web professionals, "Web development" usually refers to the main non-design aspects of building Web sites: writing [[Markup language|markup]] and [[Computer programming|coding]].<ref>{{Cite book |last=Campbell |first=Jennifer |title=Web Design: Introductory |publisher=Cengage Learning |year=2017 |pages=27}}</ref> Web development may use [[content management system]]s (CMS) to make content changes easier and available with basic technical skills.
For larger organizations and businesses, Web development teams can consist of hundreds of people ([[Web developer]]s) and follow standard methods like [[Agile software development|Agile methodologies]] while developing Web sites.<ref name="
== Evolution of the World Wide Web and web development ==
[[Tim Berners-Lee]] created the [[World Wide Web]] in 1989 at CERN.<ref>{{Cite web |date=2023-12-04 |title=A short history of the Web |url=https://home.cern/science/computing/birth-web/short-history-web |access-date=2023-12-10 |website=CERN |language=en}}</ref>
The primary goal in the development of the Web was to fulfill the automated information-sharing needs of academics affiliated with institutions and various global organizations. Consequently, [[HTML]] was developed in 1993.<ref>{{Cite web |title=WebD2: A Brief History of HTML |url=https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.html#:~:text=The%20first%20version%20of%20HTML,official%20standard%20in%20December%201999. |access-date=2023-12-10 |website=www.washington.edu}}</ref>
Web 1.0 is described as the first paradigm wherein users could only view material and provide a small amount of information.<ref name="
[[Web 2.0]], a term popularised by [[Dale Dougherty]], then vice president of O'Reilly, during a 2004 conference with Media Live, marks a shift in internet usage, emphasizing interactivity.<ref>{{Cite web |title=Web 2.0 |url=http://www.paulgraham.com/web20.html |access-date=2023-12-10 |website=www.paulgraham.com}}</ref><ref>{{Cite web |date=2007-12-28 |title=How Web 2.0 Works |url=https://computer.howstuffworks.com/web-20.htm |access-date=2023-12-10 |website=HowStuffWorks |language=en-us}}</ref>
Web 2.0 introduced increased user engagement and communication. It evolved from the static, read-only nature of Web 1.0 and became an integrated network for engagement and communication. It is often referred to as a user-focused, read-write online network.<ref name="
In the realm of Web 2.0 environments, users now have access to a platform that encourages sharing activities such as creating music, files, images, and movies.<ref>{{Cite web |last=Hall |first=Heather |date=2022-05-01 |title=Web 2.0 Explained: Everything You Need To Know |url=https://history-computer.com/web-2-0/ |access-date=2023-12-10 |website=History-Computer |language=en-US |archive-date=2023-01-09 |archive-url=https://web.archive.org/web/20230109091721/https://history-computer.com/web-2-0/ |url-status=dead }}</ref> The architecture of Web 2.0 is often considered the "backbone of the internet," using standardized [[XML]] (Extensible Markup Language) tags to authorize information flow from independent platforms and [[online database]]s.<ref name="
Web 3.0 aims to turn the web into a sizable, organized database, providing more functionality than traditional search engines. Users can customize navigation based on their preferences, and the core ideas involve identifying data sources, connecting them for efficiency, and creating user profiles.<ref name="
This version is sometimes also known as [[Semantic Web]].<ref>{{Citation |
=== Evolution of web development technologies ===
Line 46 ⟶ 38:
* Static HTML Pages (1990s)
* Introduction of [[CSS]] (late 1990s)<ref>{{Cite web |date=2016-12-17 |title=20 Years of CSS |url=https://www.w3.org/Style/CSS20/ |access-date=2023-12-10 |website=W3C}}</ref>
* [[JavaScript]] and Dynamic HTML (1990s - early 2000s)<ref>{{Cite web |title=JavaScript History |url=https://www.w3schools.com/js/js_history.asp
* [[Ajax (programming)|AJAX]] (1998)<ref>{{Cite web |date=2007-06-23 |title=
* Rise of [[Content management system
* [[Mobile web
* [[Single-page application
* [[List of server-side JavaScript implementations|Server-
* [[Microservices]] and [[API|API-
* [[Progressive web app
* [[
* [[WebAssembly]] (Wasm) (2010s -
* [[Serverless computing
* [[Artificial intelligence|AI]] and [[
Web development in future will be driven by advances in
== Web development life cycle ==
{{How-to|section|date=December 2023}}
The Web Development Life Cycle is a method that outlines the stages involved in building websites and web applications. It provides a structured approach, ensuring optimal results throughout the development process.▼
▲The
A typical Web Development process can be divided into 7 steps
=== Analysis ===
Debra Howcraft and John Carroll proposed a methodology in which web development process can be divided into sequential steps. They mentioned different aspects of analysis.<ref name="
Phase
The analysis phase can be divided into 3 steps
▲* Development of a Web Strategy
▲* Defining Objectives
▲* Objective Analysis
During this phase, the previously outlined objectives and available resources undergo analysis to determine their feasibility. This analysis is divided into six tasks, as follows:
* '''Technology
* '''Information analysis:''' Identification of user-required information, whether static (web page) or dynamic (pulled "live" from a database server).
* '''
* '''User
* '''Cost
▲'''User Analysis:''' Identification of all intended users of the site, a more intricate process due to the varied range of users and technologies they may use.
▲'''Cost Analysis:''' Estimation of the development cost for the site or an evaluation of what is achievable within a predefined budget.
▲'''Risk Analysis:''' Examination of any major risks associated with site development.
Following this analysis, a more refined set of objectives is documented. Objectives that cannot be presently fulfilled are recorded in a Wish List, constituting part of the Objectives Document. This documentation becomes integral to the iterative process during the subsequent cycle of the methodology.<ref name=":2" />▼
▲Following this analysis, a more refined set of objectives is documented. Objectives that cannot be presently fulfilled are recorded in a Wish List, constituting part of the Objectives Document. This documentation becomes integral to the iterative process during the subsequent cycle of the methodology.<ref name="
=== Planning- sitemap and wireframe ===▼
It is crucial for [[web developer]]s to be engaged in formulating a plan and determining the optimal architecture and selecting the [[Software framework|frameworks]].{{cn}} Additionally, developers/consultants play a role in elucidating the total cost of ownership associated with supporting a website, which may surpass the initial development expenses.▼
Key aspects in this step are-▼
▲It is crucial for [[web developer]]s to be engaged in formulating a plan and determining the optimal architecture and selecting the [[Software framework|frameworks]].{{
* [[Sitemaps|Sitemap]] creation
* [[Website wireframe|Wireframe]] creation
Line 103 ⟶ 90:
=== Design and layout ===
Following the analysis phase, the development process moves on to the [[Web design|design]] phase, which is guided by the objectives document. Recognizing the incremental growth of websites and the potential lack of good design architecture, the methodology includes iteration to account for changes and additions over the life of the site. The design phase, which is divided into [[Information design|Information Design]] and [[Graphic design|Graphic Design]], results in a detailed Design Document that details the structure of the website, [[Data structure|database data structures]], and [[Common Gateway Interface|CGI]] scripts.*
The following step, design testing, focuses on early, low-cost testing to identify inconsistencies or flaws in the design. This entails comparing the website's design to the goals and objectives outlined in the first three steps. Phases One and Two involve an iterative loop in which objectives in the Objectives Document are revisited to ensure alignment with the design. Any objectives that are removed are added to the Wish List for future consideration.<ref name="
Key aspects in this step are
▲* [[Page layout|Page layouts]]
* Review
* Approval
=== Content creation ===
No matter how visually appealing
* Developing appealing calls to action
Line 138 ⟶ 124:
Additional testing is carried out, including integration, stress, [[scalability]], load, resolution, and [[cross-browser compatibility]]. When the approval is given, the website is pushed to the server via [[File Transfer Protocol|FTP]], completing the development process.
Key aspects in this step are
* Test Lost Links
* Use code validators
* Check [[Web browser|
=== Maintenance and updating ===
The web development process goes beyond deployment to include a variety of post-deployment tasks.
Websites, in example, are frequently under ongoing maintenance, with new items being uploaded on a daily basis. The maintenance costs increases immensely as the site grows in size. The accuracy of content on a website is critical, demanding continuous monitoring to verify that both information and links, particularly external links, are updated. Adjustments are made in response to user feedback, and regular support and maintenance actions are carried out to maintain the website's long-term effectiveness.<ref name="
== Traditional
Debra Howcraft and John Carroll discussed a few traditional web development methodologies in their research paper:<ref name="
* '''Waterfall:''' The [[Waterfall model|waterfall]] methodology comprises a sequence of cascading steps, addressing the development process with minimal iteration between each stage. However, a significant drawback when applying the waterfall methodology to the development of websites (as well as information systems) lies in its rigid structure, lacking iteration beyond adjacent stages. Any methodology used for the development of Web-sites must be flexible enough to cope with change.<ref name="
* '''Structured Systems Analysis and Design Method (SSADM):''' [[Structured systems analysis and design method|Structured Systems Analysis and Design Method]] (SSADM) is a widely used methodology for systems analysis and design in information systems and software engineering. Although it does not cover the entire lifecycle of a development project, it places a strong emphasis on the stages of analysis and design in the hopes of minimizing later-stage, expensive errors and omissions.<ref name="
* '''Prototyping:''' [[Software prototyping|Prototyping]] is a software development approach in which a preliminary version of a system or application is built to visualize and test its key functionalities. The prototype serves as a tangible representation of the final product, allowing stakeholders, including users and developers, to interact with it and provide feedback.
* '''Rapid Application Development:''' [[Rapid application development|Rapid Application Development]] (RAD) is a software development methodology that prioritizes speed and flexibility in the development process. It is designed to produce high-quality systems quickly, primarily through the use of iterative prototyping and the involvement of end-users. RAD aims to reduce the time it takes to develop a system and increase the adaptability to changing requirements.
* '''Incremental Prototyping:''' Incremental prototyping is a software development approach that combines the principles of prototyping and [[Iterative and incremental development|incremental development]]. In this methodology, the development process is divided into small increments, with each increment building upon the functionality of the previous one. At the same time, prototypes are created and refined in each increment to better meet user requirements and expectations.
== Key
Developing a fundamental knowledge of [[client-side]] and [[server-side]] dynamics is crucial.{{citation needed|date=December 2023}}
The goal of [[Front-end web development|front-end development]] is to create a website's [[user interface]] and visual components that users may interact with directly. On the other hand, [[Frontend and backend|back-end development]] works with databases, server-side logic, and application functionality. Building reliable and user-friendly online applications requires a comprehensive approach, which is ensured by collaboration between front-end and back-end engineers.
Line 167 ⟶ 152:
==== Technologies ====
The 3 core technologies for front-
* '''HTML (Hypertext Markup Language)
* '''CSS (Cascading Style Sheet)
▲* '''HTML (Hypertext Markup Language)-''' [[HTML]] provides the structure and organization of content on a webpage.
* '''JavaScript
▲* '''CSS (Cascading Style Sheet)-''' Responsible for styling and layout, [[CSS]] enhances the presentation of HTML elements, making the application visually appealing.
▲* '''JavaScript-''' It is used to add interactions to the web pages. Advancement in [[JavaScript]] has given rise to many popular front- end frameworks like React, Angular and Vue.js etc.
==== User interface design ====
Line 190 ⟶ 174:
==== Front-end frameworks ====
A [[Web framework|framework]] is a high-level solution for the reuse of software pieces, a step forward in simple library-based reuse that allows for sharing common functions and generic logic of a ___domain application.<ref
Frameworks and [[Library (computing)|libraries]] are essential tools that expedite the development process. These tools enhance developer productivity and contribute to the maintainability of large-scale applications. Some popular front-end frameworks are:
Line 199 ⟶ 183:
==== State management ====
Managing the
=== Back-end development ===
Line 210 ⟶ 194:
[[Database management]] is crucial for [[Data storage|storing]], [[Data retrieval|retrieving]], and managing data in web applications. Various database systems, such as [[MySQL]], [[PostgreSQL]], and [[MongoDB]], play distinct roles in organizing and structuring data. Effective database management ensures the responsiveness and efficiency of data-driven web applications. There are 3 types of databases:
* '''[[Relational database
* '''NoSQL
* '''Document
* '''Key-
* '''Column-
* '''Graph
* '''In-
* '''Time-
* '''NewSQL
* '''Object-
The choice of a database depends on various factors such as the nature of the data, scalability requirements, performance considerations, and the specific use case of the application being developed. Each type of database has its strengths and weaknesses, and selecting the right one involves considering the specific needs of the project.
Line 229 ⟶ 213:
===== Types of APIs =====
* '''[[Web API]]s:''' These are APIs that are accessible over the internet using standard web protocols such as HTTP. RESTful APIs are a common type of web API.
* '''Library APIs:''' These APIs provide pre-built functions and procedures that developers can use within their code.
Line 237 ⟶ 220:
[[Programming language]]s aimed at server execution, as opposed to client browser execution, are known as [[Server-side scripting|server-side languages]]. These programming languages are used in web development to perform operations including [[data processing]], database interaction, and the creation of [[Dynamic web page|dynamic content]] that is delivered to the client's browser. A key element of server-side programming is [[server-side scripting]], which allows the server to react to client requests in real time.
Some popular
# '''PHP
# '''Python:''' [[Python (programming language)|Python]] is a versatile, high-level programming language used for a variety of purposes, including server-side web development. Frameworks like [[Django (web framework)|Django]] and [[Flask (web framework)|Flask]] make it easy to build web applications in Python.
# '''Ruby:''' [[Ruby (programming language)|Ruby]] is an object-oriented programming language, and it is commonly used for web development. [[Ruby on Rails]] is a popular web framework that simplifies the process of building web applications.
Line 246 ⟶ 229:
# '''C# (C Sharp):''' [[C Sharp (programming language)|C#]] is a programming language developed by Microsoft and is commonly used in conjunction with the [[.NET Framework|.NET]] framework for building web applications on the Microsoft stack.
# '''ASP.NET:''' [[ASP.NET]] is a web framework developed by Microsoft, and it supports languages like C# and [[Visual Basic (.NET)|VB.NET]]. It simplifies the process of building dynamic web applications.
# '''Go (Golang):''' [[Go (programming language)|Go]] is a statically
# '''Perl:''' [[Perl]] is a versatile scripting language often used for web development. It is known for its powerful [[Text processing|text-processing]] capabilities.
# '''Swift:''' Developed by Apple, [[Swift (programming language)|Swift]] is used for server-side development in addition to iOS and macOS app development.
# '''Lua:''' [[Lua (programming language)|Lua]] is used for some embedded web servers, e.g. the configuration pages on a [[router (computing)|router]], including [[OpenWRT]].
==== Security
Implementing security measures to protect against common vulnerabilities, including [[SQL injection]], [[cross-site scripting]] (XSS), and [[cross-site request forgery]] (CSRF). [[Authentication]] and [[authorization]] mechanisms are crucial for securing data and user access.
Line 267 ⟶ 252:
Efficient web development relies on a set of tools and environments that streamline the coding and collaboration processes:
# '''
# '''
# '''
▲'''2. [[Version control|Version Control Systems]]:''' [[Git]] is a widely used version control system that allows developers to track changes, collaborate seamlessly, and roll back to previous versions if needed.
▲'''3. [[Collaboration tool|Collaboration Tools]]:''' Communication platforms like [[Slack (software)|Slack]], [[project management]] tools such as [[Jira (software)|Jira]], and [[Collaborative software|collaboration platforms]] like [[GitHub]] facilitate effective teamwork and project management.
▲== Security Practices in Web Development ==
[[Internet security|Security]] is paramount in web development to protect against [[Cyberattack|cyber threats]] and ensure the confidentiality and integrity of user data. Best practices include encryption, secure coding practices, regular [[Information security audit|security audits]], and staying informed about the latest [[Vulnerability (computing)|security vulnerabilities]] and patches.
* '''Common
* '''Secure
* '''Authentication and
==
=== Agile manifesto and principles ===
Line 292 ⟶ 275:
=== Agile concepts in web development ===
# '''Iterative and
# '''Scrum and
# '''Cross-
# '''Customer
# '''Adaptability to
# '''User
# '''Continuous
[[File:Webdevelopmenttimeline.png|thumb|right|300x300px]]
| |||