Web development: Difference between revisions

Revision as of 19:20, 12 December 2023

Revision as of 05:03, 13 December 2023

Line 4:

{{more citations needed|date=December 2012}}

{{Original research|date=May 2022}}

{{Manual|date=December 2023}}

}}

'''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=":0">{{Cite web |title=What is Web Development? - Definition from Techopedia |url=https://www.techopedia.com/definition/23889/web-development |access-date=2018-12-07 |website=Techopedia.com |language=en}}</ref> Web development can range from developing a simple single [[Static Web page|static page]] of [[plain text]] to complex [[web application]]s, [[electronic business]]es, and [[social network service]]s. A more comprehensive list of tasks to which Web development commonly refers, may include [[Web engineering]], [[Web design]], [[Web content development]], client liaison, [[Client-side scripting|client-side]]/[[server-side scripting]], [[Web server]] and [[network security]] configuration, and [[e-commerce]] development.

Line 28 ⟶ 29:

==== Web 3.0 ====

[[Web3|Web 3.0]], considered the third and current version of the web, was introduced in 2014. The concept envisions a complete redesign of the web. Key features include the integration of [[metadata]], precise information delivery, and improved [[user experience]]s based on preferences, history, and interests.{{Citation needed|date=December 2023}}

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=":02" />

Line 34 ⟶ 35:

This version is sometimes also known as [[Semantic Web]].<ref>{{Citation |last=Du |first=Xiaofeng |title=Semantic Service Description Framework for Address |date=2009 |url=http://link.springer.com/10.1007/978-0-387-78578-3_35 |work=Information Systems Development |pages=1033–1045 |editor-last=Barry |editor-first=Chris |access-date=2023-11-30 |place=Boston, MA |publisher=Springer US |language=en |doi=10.1007/978-0-387-78578-3_35 |isbn=978-0-387-78577-6 |last2=Song |first2=William |last3=Munro |first3=Malcolm |editor2-last=Lang |editor2-first=Michael |editor3-last=Wojtkowski |editor3-first=Wita |editor4-last=Conboy |editor4-first=Kieran}}</ref>

However, Web 3.0 poses challenges, such as the need for advanced web design expertise, difficulty in identifying a user's ID, and increased client requests to servers, making it more complex to build an intelligent web.

==== Web 4.0 ====

Web 4.0 is presented as the most advanced web technology with intelligent and highly interactive features. Web 4.0 is also known as symbiotic web. Web 4.0 is still in its early stages, yet it has already had a significant impact on how people use the World Wide Web. Web 4.0 aims to be an all-encompassing technology, merging the best features of Web 2.0 and Web 3.0.

The primary goals of the fourth generation of the web include enhancing usability and engagement by refining web pages, making them easier to navigate, and incorporating features for user interaction. Web 4.0 aims to increase everyone's access to the Internet, including those with disabilities who can use assistive technologies for easier access to web content.<ref name=":1" />

=== Evolution of web development technologies ===

Line 48 ⟶ 43:

* [[JavaScript]] and Dynamic HTML (1990s - early 2000s)<ref>{{Cite web |title=JavaScript History |url=https://www.w3schools.com/js/js_history.asp#:~:text=JavaScript%20was%20invented%20by%20Brendan,JavaScript%20for%20the%20Firefox%20browser. |access-date=2023-12-10 |website=www.w3schools.com |language=en-US}}</ref><ref>{{Cite web |title=A brief history of PHP |url=https://ifj.edu.pl/private/krawczyk/php/intro-history.html#:~:text=PHP%20was%20conceived%20sometime%20in,the%20Personal%20Home%20Page%20Tools. |access-date=2023-12-10 |website=ifj.edu.pl}}</ref>

* [[Ajax (programming)|AJAX]] (1998)<ref>{{Cite web |date=2007-06-23 |title=Wayback Machine |url=https://web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm |access-date=2023-12-10 |website=web.archive.org}}</ref>

* Rise of [[Content management system|Content Management Systems]]s (CMS) (mid-2000s)

* [[Mobile web|Mobile Web]] (late 2000s - 2010s)

* [[Single-page application|Single Page Applications]]s (SPAs) and Frontfront-Endend Frameworksframeworks (2010s)

* [[List of server-side JavaScript implementations|Server-Sideside JavaScriptjavaScript]] (2010s)

* [[Microservices]] and [[API|API-Drivendriven Developmentdevelopment]] (2010s - Presentpresent)

* [[Progressive web app|Progressive Web Apps]]s (PWAs) (2010s - Presentpresent)

* [[Jamstack|JAMstack Architecture]] (2010s - Presentpresent)

* [[WebAssembly]] (Wasm) (2010s - Presentpresent)

* [[Serverless computing|Serverless Architecture]] (2010s - Presentpresent)

* [[Artificial intelligence|AI]] and [[Machine learning|Machine Learning]] Integration (2010s - Present[resent)

Web development in future will be driven by advances in  browser technology, Web internet infrastructure, protocol standards, software engineering methods, and application trends.<ref name=":1" />

== 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.

{{More citations needed section|date=December 2023}}

The Webweb Developmentdevelopment Lifelife Cyclecycle 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.{{Citation needed|date=December 2023}}

A typical Web Development process can be divided into 7 steps-

Line 69 ⟶ 66:

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=":2">{{Cite web |last=Howcroft |first=Debra |last2=Carroll |first2=John |date=2000 |title=A proposed methodology for web development. |url=https://aisel.aisnet.org/ecis2000/73/}}</ref>

Phase Oneone involves crafting a web strategy and analyzing how a website can effectively achieve its goals. Keil et al's research<ref>{{Cite journal |last=Keil |first=Mark |last2=Cule |first2=Paul E. |last3=Lyytinen |first3=Kalle |last4=Schmidt |first4=Roy C. |date=November 1998 |title=A framework for identifying software project risks |url=http://dx.doi.org/10.1145/287831.287843 |journal=Communications of the ACM |volume=41 |issue=11 |pages=76–83 |doi=10.1145/287831.287843 |issn=0001-0782|doi-access=free }}</ref> identifies the primary reasons for software project failures as a lack of top management commitment and misunderstandings of system requirements. To mitigate these risks, Phase One establishes strategic goals and objectives, designing a system to fulfill them. The decision to establish a web presence should ideally align with the organization's corporate information strategy.

The analysis phase can be divided into 3 steps-

* Development of a Webweb Strategystrategy

* Defining Objectivesobjectives

* Objective Analysisanalysis

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 Analysisanalysis:''' Identification of all necessary technological components and tools for constructing, [[Hosting Controller|hosting]], and supporting the site.

* '''Information analysis:''' Identification of user-required information, whether static (web page) or dynamic (pulled "live" from a database server).

* '''InformationSkills Analysisanalysis:''' Identification of user-required information, whether static (web page)the ordiverse dynamicskill (pulledsets "live"necessary fromto acomplete databasethe server)project.

* '''User Analysisanalysis:''' 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 Analysisanalysis:''' Estimation of the development cost for the site or an evaluation of what is achievable within a predefined budget.

'''Skills Analysis:''' Identification of the diverse skill sets necessary to complete the project.

* '''Risk Analysisanalysis:''' Examination of any major risks associated with site development.

'''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" />

=== 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|date=December 2023}} 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.

Line 103 ⟶ 95:

=== 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=":2" />

Line 109 ⟶ 101:

Key aspects in this step are-

* [[Page layout|Page layouts]]s

* Review

* Approval

=== Content creation ===

No matter how visually appealing youra website is, good communication with your clients is critical. The primary purpose of content production is to create a communication channel through the [[user interface]] by delivering relevant information about your firm in an engaging and easily understandable manner. This includes:{{Citation needed|date=December 2023}}

* Developing appealing calls to action

Line 142 ⟶ 134:

* Test Lost Links

* Use code validators

* Check [[Web browser|Browserbrowser]]

=== Maintenance and updating ===

Line 210 ⟶ 202:

[[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|Relational Databases]]s:''' Structured databases that use tables to organize and relate data. Common Examples include - [[MySQL]], [[PostgreSQL]] and many more.

* '''NoSQL Databasesdatabases:''' [[NoSQL|NoSQL databases]] are designed to handle [[Unstructured data|unstructured]] or [[Semi-structured data|semi-structured]] data and can be more flexible than [[relational database]]s. They come in various types, such as [[Document-oriented database|document-oriented]], [[Key–value database|key-value stores]], column-family stores, and [[graph database]]s. Examples: [[MongoDB]], [[Apache Cassandra|Cassandra]], [[Apache CouchDB|CouchDB]], [[Redis]].

* '''Document Storesstores:''' [[Document-oriented database|Document stores]] store data in a [[Semi-structured data|semi-structured]] format, typically using [[JSON]] or [[XML]] documents. Each document can have a different structure, providing flexibility. Examples''':''' [[MongoDB]], [[CouchDB]].

* '''Key-Valuevalue Storesstores:''' [[Key–value database|Key-value stores]] store data as pairs of keys and values. They are simple and efficient for certain types of operations, like [[Cache (computing)|caching]]. Examples: [[Redis]], [[Amazon DynamoDB|DynamoDB]].

* '''Column-Familyfamily Storesstores:''' [[Column-oriented DBMS|Column-family stores]] organize data into columns instead of rows, making them suitable for large-scale [[distributed systems]] and analytical workloads. Examples''':''' [[Apache Cassandra]], [[Apache HBase|HBase]].

* '''Graph Databasesdatabases:''' [[Graph database]]s are designed to represent and query data in the form of graphs. They are effective for handling relationships and network-type data. Examples''':''' [[Neo4j]], [[Amazon Neptune]].

* '''In-Memorymemory Databasesdatabases:''' [[In-memory database]]s store data in the system's main memory ([[Random-access memory|RAM]]) rather than on disk. This allows for faster data access and retrieval. Examples: [[Redis]], [[Memcached]].

* '''Time-Seriesseries Databasesdatabases:''' [[Time series database|Time-series databases]] are optimized for handling time-stamped data, making them suitable for applications that involve tracking changes over time. Examples: [[InfluxDB]], OpenTSDB.

* '''NewSQL Databasesdatabases:''' [[NewSQL]] databases aim to provide the scalability of NoSQL databases while maintaining the ACID properties (Atomicity, Consistency, Isolation, Durability) of traditional relational databases. Examples: [[Spanner (database)|Google Spanner]], [[CockroachDB]].

* '''Object-Orientedoriented Databasesdatabases:''' [[Object-oriented databases]] store data in the form of objects, which can include both [[data]] and methods. They are designed to work seamlessly with object-oriented programming languages. Examples: [[db4o]], [[ObjectDB]].

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 239 ⟶ 231:

Some popular sever-side languages are:

# '''PHP (Hypertext Preprocessor):''' [[PHP]] is a widely-used, [[Open-source software|open-source]] server-side scripting language. It is embedded in HTML code and is particularly well-suited for web development.

# '''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 249 ⟶ 241:

# '''Perl:''' [[Perl]] is a versatile scripting language often used for web development. It is known for its powerful [[Text processing|text-processing]] capabilities.

==== Security measuremeasures ====

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 ⟶ 259:

Efficient web development relies on a set of tools and environments that streamline the coding and collaboration processes:

# '''1. [[Integrated development environment|Integrated Development Environments]]s (IDEs):''' Tools like [[Visual Studio Code]], [[Atom (text editor)|Atom]], and [[Sublime Text]] provide features such as [[Syntax highlighting|code highlighting]], [[Autocomplete|autocompletion]], and [[version control]] integration, enhancing the development experience.

# '''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]]s:''' 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.

'''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 wevelopment ==

[[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 Threatsthreats:''' Developers must be aware of common security threats, including [[SQL injection]], [[cross-site scripting]] (XSS), and [[cross-site request forgery]] (CSRF).

* '''Secure Codingcoding Practicespractices:''' Adhering to secure coding practices involves input validation, proper data sanitization, and ensuring that sensitive information is stored and transmitted securely.

* '''Authentication and Authorizationauthorization:''' Implementing robust authentication mechanisms, such as [[OAuth]] or [[JSON Web Token]]s (JWT), ensures that only authorized users can access specific resources within the application.

== AGILEAgile methodology in web development ==

=== Agile manifesto and principles ===

Line 292 ⟶ 282:

=== Agile concepts in web development ===

# '''Iterative and Incrementalincremental Developmentdevelopment:''' Building and refining a web application through small, repeatable cycles, enhancing features incrementally with each iteration.

# '''Scrum and Kanbankanban:''' Employing agile frameworks like [[Scrum (software development)|Scrum]] for structured sprints or [[Kanban (development)|Kanban]] for continuous flow to manage tasks and enhance team efficiency.

# '''Cross-Functionalfunctional Teamsteams:''' Forming collaborative teams with diverse skill sets, ensuring all necessary expertise is present for comprehensive web development.

# '''Customer Collaborationcollaboration:''' Engaging customers throughout the development process to gather feedback, validate requirements, and ensure the delivered product aligns with expectations.

# '''Adaptability to Changechange:''' Embracing changes in requirements or priorities even late in the development process to enhance the product's responsiveness to evolving needs.

# '''User Storiesstories and Backlogbacklog:''' Capturing functional requirements through user stories and maintaining a backlog of prioritized tasks to guide development efforts.

# '''Continuous Integrationintegration and Continuouscontinuous Deliverydelivery (CI/CD):''' Implementing automated processes to continuously integrate code changes and deliver updated versions, ensuring a streamlined and efficient development pipeline.

== Trends and future directions ==

The future of web development holds exciting possibilities as the digital landscape continues to evolve at a rapid pace. As we navigate through the technological advancements of the coming years, several trends are poised to shape the way we build and interact with websites. Some potential future trends in web development are:{{cn|date=December 2023}}

* [[WebAssembly]] (Wasm)

* [[Progressive web app|Progressive Web Apps]] (PWAs)

* [[Serverless computing|Serverless Architecture]]

* [[Jamstack|JAMstack Architecture]]

* Responsive and Adaptive Web Design

* [[Artificial intelligence|Artificial Intelligence]] Integration

* [[Voice user interface|Voice-Activated Interfaces]] and Voice Search Optimization

* [[Blockchain]] Integration

* Immersive User Experiences

* AI-Driven Personalization

* Motion UI and Microinteractions

[[File:Webdevelopmenttimeline.png|thumb|right|300x300px]]