Web development: Difference between revisions

Content deleted Content added
Partial restore edit from mass rollback by User:Graham87 (the entire edit summary was correct, but the other links are of questionable value IMO)
m shortened some URL, spaces, colons
Line 10:
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="Techopedia.com" /> Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a [[graphic designer]] or [[information systems]] technician. Web development may be a collaborative effort between departments rather than the ___domain of a designated department. There are three kinds of Web developer specialization: [[Front-end Web development|front-end developer]], back-end developer, and full-stack developer.<ref>{{Cite book |last=Northwood |first=Chris |url=https://books.google.com/books?id=vvd6DwAAQBAJ&q=%22full+stack+Web+development%22+-wikipedia |title=The Full Stack Developer: Your Essential Guide to the Everyday Skills Expected of a Modern Full Stack Web Developer |date=2018-11-19 |publisher=Apress |isbn=978-1-4842-4152-3 |language=en}}</ref> Front-end developers are responsible for behavior and visuals that run in the user browser, while back-end developers deal with the servers.<ref>{{Cite web |title=Discover The Difference Between Front-End Vs. Back-End Developer – Forbes Advisor |url=https://www.forbes.com/advisor/education/front-end-vs-back-end-developer |date=May 30, 2023 |website=forbes.com |language=en}}</ref> Since the commercialization of the Web, the industry has boomed and has become one of the most used technologies ever.
 
== Evolution of the World Wide Web and web development ==
Line 34:
 
This version is sometimes also known as [[Semantic Web]].<ref>{{Citation |last1=Du |first1=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>
 
 
=== Evolution of web development technologies ===
Line 41 ⟶ 40:
* 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#:~: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= |url=http://www.alexhopmann.com/xmlhttp.htm |access-date=2023-12-10 |archive-url=https://web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm |archive-date=2007-06-23 }}</ref>
* Rise of [[Content management system]]s (CMS) (mid-2000s)
Line 52 ⟶ 51:
* [[WebAssembly]] (Wasm) (2010s - present)
* [[Serverless computing]] (2010s - present)
* [[Artificial intelligence|AI]] and [[Machinemachine learning|Machine Learning]] Integrationintegration (2010s - present)
 
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="Jazayeri-2007" />
 
== Web development life cycle ==
Line 61 ⟶ 60:
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.{{Citation needed|date=December 2023}}
 
A typical Web Development process can be divided into 7 steps-.
 
=== Analysis ===
Line 68 ⟶ 67:
Phase one involves crafting a web strategy and analyzing how a website can effectively achieve its goals. Keil et al's research<ref>{{Cite journal |last1=Keil |first1=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 |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 web strategy
* Defining objectives
Line 88 ⟶ 86:
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.
 
Key aspects in this step are-:
 
* [[Sitemaps|Sitemap]] creation
* [[Website wireframe|Wireframe]] creation
Line 99 ⟶ 96:
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="Howcroft-2000" />
 
Key aspects in this step are-:
 
* [[Page layout]]s
* Review
Line 130 ⟶ 126:
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
Line 159 ⟶ 154:
 
==== Technologies ====
The 3 core technologies for front- end development are-:
* '''HTML (Hypertext Markup Language)-:''' [[HTML]] provides the structure and organization of content on a webpage.
 
* '''CSS (Cascading Style Sheet)-:''' Responsible for styling and layout, [[CSS]] enhances the presentation of HTML elements, making the application visually appealing.
* '''HTML (Hypertext Markup Language)-''' [[HTML]] provides the structure and organization of content on a webpage.
* '''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.
* '''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 191 ⟶ 185:
 
==== State management ====
Managing the state of a web application to ensure data consistency and responsiveness. State management libraries like [[Redux (JavaScript library)|Redux]] (for [[React (software)|React]]) or [[Vuex]] (for [[Vue.js]]) play a crucial role in complex applications.
 
=== Back-end development ===
Line 207 ⟶ 201:
* '''Key-value stores:''' [[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-family stores:''' [[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 databases:''' [[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-memory databases:''' [[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-series databases:''' [[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 databases:''' [[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]].
Line 221 ⟶ 215:
 
===== 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.