wasebastian

[wasebastian]

Express.js

Node JS is a quick JavaScript runtime environment that we utilize to create server-side apps, but express JS is needed to handle file serving, request handling, and HTTP method handling. Express JS is a Node.js framework made to make Node.js simple to use while building APIs for web applications, cross-platform mobile apps, and more.

Express.js, sometimes known as Express, is a Node.js back-end web application framework that is made available as free and open-source software under the MIT License. It is used to create RESTful APIs. It is made for creating APIs and online applications.

A node js web application framework called Express offers a variety of features for creating both web and mobile applications. A single page, multipage, or hybrid web application can be created with it. It is a layer added to Node js that aids in managing servers and routes.

Why Express JS

• Express was developed to make building web apps and APIs simple.

• It reduces coding time by roughly half while maintaining web compatibility.

• mobile applications are efficient.

• Another benefit of adopting express is that it was created in the simple language of JavaScript, which everyone can learn.

• any language proficiency. Express makes the world of web development accessible to so many new developers.

The following justifies the development of an express framework for node js:

• Time-efficient

• Quickly economical

• simple to learn

• Asynchronous

Express JS Fast Server-Side Development Features

• Fast Server-Side Development

Node js's features aid express in speeding up development.

• Middleware

A request handler with access to the application's request-response cycle is known as middleware.

• Routing

It deals with how the URLs of an application's endpoints react to client requests.

• Templating

By building HTML templates on the server, it offers templating engines to produce dynamic content on the web pages.

• Debugging

It is made simpler by using Debugging Express, which pinpoints the precise location of issues.

Benefits of Express JS

• Express is non-judgmental and flexible.

• Middleware can be used for request handling.

• Backend and frontend development are done in the same language.

• With databases like MySQL, MongoDB, etc., Express may be quickly connected.

• By supplying arguments to templates, Express enables dynamic HTML page rendering.

Issues with Express JS

• Sometimes, there is no logical structure for organizing the information, and the code becomes unreadable.

• Call-backs are fraught with so many problems.

• It is difficult to comprehend the error messages that may appear.

[wasebastian]

Angular

One of the most recent web technologies, Angular, is made exclusively for creating dynamic online apps. Without the usage of other frameworks or plugins, you may quickly construct front-end-based applications with this framework.

With the use of HTML and TypeScript, single-page client applications may be created utilizing the Angular platform and framework. TypeScript is used to create Angular. As a collection of TypeScript libraries that you load into your apps, it implements both core and optional functionality. An Angular application is defined by a set of NgModules, which group related code into functional groups. An Angular application's architecture is based on a few key ideas. The fundamental building elements of the Angular framework are NgModule-organized Angular components.

A root module, which facilitates bootstrapping, is always present in an application, and there are often many more feature modules as well.

• Views are collections of screen elements that Angular can select from and alter in accordance with your program logic and data, and they are defined by components.

• Services, which offer specialized functionality unrelated to views, are used by components. Service providers can be added as dependencies to components, which will make your code efficient, reusable, and modular.

Classes that make use of decorators include modules, components, and services. As well as indicating their type and providing metadata, these decorators instruct Angular how to use them.

• A component class's metadata links it to a template that describes a view. Ordinary HTML is combined with binding markup and Angular directives in a template so that Angular can alter the HTML before rendering it for display.

• The details Angular requires to make a service class available to components through dependency injection are contained in the service class's metadata (DI).

The parts of an application often define many hierarchically organized views. In order to assist you in creating navigational paths between views, Angular offers the Router service. The router has highly developed browser navigational features.

JavaScript (ES2015) modules are different from and complemented by Angular NgModules. For a group of components that are dedicated to a workflow, an application domain, or a set of closely linked capabilities, a NgModule declares a compilation context. An NgModule can create functional units by connecting its parts to relevant code, like services.

A root module, commonly referred to as AppModule, is present in every Angular application and provides the bootstrap process that begins the application. Typically, an application has many different functional modules.

Similar to JavaScript modules, NgModules can export and use their own functionality as well as functionality from other NgModules. For instance, you import the Router NgModule to use the router service in your app.

Coding for reusability and controlling the development of complicated applications are made easier by structuring your code into different functional modules. Additionally, you may use lazy loading with this method to reduce the amount of code that needs to be loaded at start up by loading modules only when they are needed.

Well-designed templates, MVC architecture, code generation, code splitting, etc. are some of the characteristics. There are no loops or conditional statements used in any of the expressions; rather, they are all just short pieces of code encased in curly braces.

[wasebastian]

API - Application Programming Interface

Using a set of definitions and protocols, APIs are techniques that let two software components communicate with one another. For instance, the software system of the weather bureau contains daily weather information. Your phone's weather app "talks" to this system via APIs to provide you with daily weather updates.

Application Programming Interface is referred to as API. Any software with a specific function is referred to as an application when discussing APIs. Interface can be compared to a service agreement between two programs. This agreement specifies the requests and responses that the two parties will use to communicate. Developers can find instructions in their API documentation on how to format those requests and responses.

Client and server architecture is typically defined in terms of APIs. Applications that transmit requests and responses are referred to as clients and servers, respectively. In the weather example, the mobile app is the client and the bureau's weather database is the server.

Depending on when and why they were built, APIs can operate in one of four different ways.

1. SOAP APIs

Simple Object Access Protocol is used by these APIs. XML is used by client and server to exchange messages. In the past, this more rigid API was more widely used.

2. RPC APIs

Remote Procedure Calls are the name given to these APIs. A function (or operation) on the server is finished by the client, and the server then transmits the output back to the client.

3. WebSocket APIs

Another contemporary web API that uses JSON objects to convey data is the WebSocket API. Client apps and the server can communicate in both directions using a WebSocket API. The server can communicate with connected clients via call-back messages, making it more effective than REST API.

4. REST APIs

These are the most widely used and adaptable APIs available right now online. Requests are sent to the server as data by the client. The server launches internal processes using this client input and sends the results back to the client.

Representational State Transfer is referred to as REST. For clients to access server data, REST defines a set of functions including GET, PUT, DELETE, etc. Using HTTP, clients and servers exchange data. The statelessness of REST APIs is a key characteristic. Servers that are stateless do not save client information between requests. Similar to the URLs you type into your browser to view a website, client requests to the server. The server's response is just basic data without the customary graphical web page display.

Web API

An application processing interface (Web API or Web Service API) connects a web server and a web browser. While all APIs are web services, not all web services are APIs. A specific kind of Web API that adheres to the accepted architectural design is the REST API.

Because APIs were traditionally developed before to the development of the World Wide Web, many terminologies relating to APIs, such as Java API or service APIs, exist. REST APIs are the current generation of web APIs, and the two words are interchangeable.

API integrations

Software elements known as API integrations are used to automatically update data between clients and servers. Examples of API connections include automatic data syncing from your phone's photo gallery to the cloud or automatic time and date syncing on your laptop when you go to a different time zone. They can be effectively used by businesses to automate a variety of system operations.

Benefits of REST APIs

1. Integration

New apps are integrated with current software systems through APIs. Because each functionality doesn't need to be created from scratch, development time is sped up. APIs can be used to benefit from pre-existing code.

2. Innovation

With the introduction of a new app, entire industries can shift. Businesses must act swiftly and facilitate the quick rollout of innovative services. Without having to completely rewrite the code, they can accomplish this by adjusting at the API level.

3. Expansion

Businesses have a special opportunity thanks to APIs to satisfy the needs of their customers on several platforms. For instance, the maps API enables the integration of map data into websites, Android, iOS, etc. By employing either free or paid APIs, any company can grant similar access to its internal databases.

4. Ease of maintenance

A gateway between two systems is created via the API. Each system is required to implement internal adjustments to ensure that the API is not harmed. In this manner, any upcoming code modifications by one party won't affect the other side.

[wasebastian]

JavaScript

Every time a web page displays dynamic content updates, interactive maps, animated 2D/3D visuals, scrolling video jukeboxes, etc., you can bet that JavaScript is undoubtedly involved. JavaScript is a scripting or programming language that enables you to create complicated features on web pages.

Along with HTML and CSS, the computer language known as JavaScript, or JS, is one of the foundational elements of the World Wide Web. 98% of websites will utilize JavaScript on the client side by the year 2022 to control webpage functionality, frequently integrating third-party libraries. A dedicated JavaScript engine is available in every major web browser and is used to run the code on users' devices.

A high-level, frequently just-in-time compiled language that adheres to the ECMAScript standard is called JavaScript. It features first-class functions, prototype-based object orientation, and dynamic typing. It supports event-driven, functional, and imperative programming paradigms and is multi-paradigm. It offers application programming interfaces (APIs) for using the Document Object Model, regular expressions, dates, and standard data structures (DOM). There are no input/output (I/O) features like networking, storage, or graphics capabilities in the ECMAScript standard. In reality, JavaScript I/O APIs are offered by the web browser or another runtime system.

Originally only used in web browsers, JavaScript engines are now essential parts of some servers and a wide range of applications. Node.js is the most widely used runtime system for this application. Even while Java and JavaScript share the same name, syntax, and standard libraries, the two programming languages are separate and have very different designs.

[wasebastian]

P5.js

A JavaScript library for innovative coding is called p5.js. It is a collection of pre-written code that gives us access to tools that make it easier to use code to create interactive visuals in web browsers. A p5.js project uses HTML, CSS, and JavaScript just like any other web project would. The p5.js library, index.html, style.css, and sketch.js make up a typical p5.js project. A <script> element must be used to include the p5.js library in an HTML document's <head> section. Only after that may a JavaScript file use the p5.js library.

The HTML element known as <canvas> is used to display graphics produced using the Canvas API of JavaScript. The p5.js library has numerous built-in drawing functions that make it simple to draw to the HTML <canvas> on the fly using JavaScript by using the Canvas API invisibly.

The required canvas width and height are passed as arguments to the createCanvas() function, which then produces an HTML canvas on the webpage. It is typically one of the setup () function's first functions to be called. Within a p5.js sketch, the createCanvas() function can only be used once. When no options are supplied to the createCanvas() function, the p5.js library will create a default canvas with a width and height of 100 pixels.

If your p5.js sketch does not need a canvas for some reason, you can prevent the p5.js library from producing one at program start up by explicitly calling the noCanvas() function. The p5.js canvas's background colour is set using the background () function. A p5.js canvas's background is transparent by default. The setup () function is launched by the p5.js package automatically at the start of an application. In the drawing, the setup () function shouldn't be explicitly invoked. Code defining the sketch's initial state, such as the canvas size, background colour, and initial values of global variables, is often found in the setup () function.

A coordinate system is used by the p5.js canvas to represent space. The top-left corner of the canvas is where the origin (0, 0) of the canvas is located. Using ordered pairs, (x, y), the canvas coordinate system is given, with x representing the distance from the left edge and y representing the distance from the top edge of the canvas.

With p5.js, a colour value can be expressed in a variety of ways. It may be expressed as:

• As one number between 0 and 255, a gray value.

• Three numerical values between 0 and 255 make up the RGB (Red, Green, and Blue) value.

• RGBA value is represented by four numeric values between 0 and 255.

• Hex value represented as a string.

• Three numeric values, ranging from 0 to 360 for hue and 0 to 100 for saturation and brightness, make up the HSB (Hue, Saturation, Brightness) value.

Also P5.js include lots of drawing functions like point(), line(), rect(), square(), ellipse(), circle(), triangle(), quad(), fill(), noFill(), stroke(), strokeWeight() and noStroke().

[wasebastian]

HTML

The preferred markup language for documents intended to be viewed in a web browser is HTML, or HyperText Markup Language. Technologies like Cascading Style Sheets (CSS) and scripting languages like JavaScript can help.

HTML documents are downloaded from a web server or local storage by web browsers, who then turn them into multimedia web pages. HTML originally featured cues for the document's design and semantically explains the structure of a web page

The foundation of HTML pages are HTML components. Images and other objects, like interactive forms, may be embedded within the produced page using HTML techniques. By indicating structural semantics for text elements like headings, paragraphs, lists, links, quotations, and other objects, HTML offers a way to generate structured texts. Tags, which are written in angle brackets, are used to distinguish HTML elements. Content is added directly to the page through tags like <img>and <input>. In addition to providing context for the text of the document, other tags, like <p>, may also contain additional tags as sub-elements. The HTML tags are used by browsers to decipher the page's content but are not displayed.

HTML allows for the insertion of scripts written in scripting languages like JavaScript that modify the appearance and content of web pages. The look and layout of content are determined using CSS. Since 1997, CSS has been recommended over explicit presentational HTML by the World Wide Web Consortium (W3C), which also maintains the HTML and CSS standards. The <canvas> element, in conjunction with JavaScript, and a version of HTML known as HTML5 are used to show video and audio.

[wasebastian]

Flat Design 2.0

The waning popularity of flat designs has caused concern. Today It has undergone renovations, and the updated form, known as Flat 2.0 or semi-flat, depends on toning and giving depth to its identity. Implementing gradients and shadows makes this possible. If you've been paying attention, you might have noticed that well-known redesigns have featured prominent brands like Stripe, Instagram, and even Apple's iOS symbols. This holds true for organizations like Mastercard and Dropbox. With the improvisation across web browser functions, a new phase has begun in the shadows.

Best web design used to mean overwhelming users with a beautiful interface that was loaded with animations and bright components. With drop shadows and fake-realistic textures, the web designer tried to animate reality onto the screen. The era of "Flat Design" is currently in full swing. The terms "minimalism" and "responsive attitude" are both components of flat design. Users may focus solely on the content with the help of this design. Usability is flat design's primary goal. However, flat design does not simply entail boring, "content-only" design.

Features of Flat Design

• The design is straightforward and uncomplicated.

• There are no decorative components to divert readers. The key to this element is getting rid of extraneous parts or features that don't contribute to the goal being achieved.

• The selection of colours is important in flat design. To create a pleasing and elegant appearance, vibrant, lively colours are used.

• The foundation of the design is a grid pattern with block pieces.

• They emphasize 2D visuals. The basic idea is the clever use of 2D items to produce a 3D effect.

• The site is interactive, appealing, and intriguing thanks to the liberal use of icons. When content is represented using icons, users may quickly recognize it. Additionally, they can quickly comprehend the message's main points without ever reading the material. Little colourful icons quickly catch the eye. Additionally, icon fonts make it simple to include them on the website without any hassle.

• In flat design, well-planned typography is the star. Words and lines are shown to them with distinct spacing between them. The font faces utilized are of a sufficient size, neatness, and legibility. A flat-designed website's entire font makes for easy reading for the readers.

Guiding principles of Flat Design

Simplicity should be the main consideration while building a flat website. Designers must adhere to this fundamental idea. Regardless of the feature they are implementing, they must follow this guideline.

When designing the site, use rich and vibrant colours. Designers can use the online tool "Flat UI Colours" as a reference while choosing the appropriate colour schemes. Bright colours are appealing, but they are not a need for flat design. You can also create a good flat-styled website using only black and white or neutral colours. The elegance and appealing appearance are the main concepts.

"Sans serif" font choice ensures a clear and crisp appearance in good typography. The information supplied must be concise and accurate. Links and buttons, among other User Interface components, must all be visibly distinct.

[wasebastian]

Parallax scrolling

A web design technique called parallax scrolling involves the background content (such as an image) moving more slowly than the foreground material as the page scrolls. It uses background images that move past the camera more slowly than foreground images to provide the appearance of depth in a 2D scene at a distance. As users scroll down the website, a 3D effect appears, adding depth and making the browsing experience more engaging.

The method evolved from the multiplane camera method that has been utilized in conventional animation since the 1930s. Based on an optical illusion, parallax works. We view distant objects as moving more slowly because the human eye interprets objects close to us as larger than things farther away. The illusion has been incorporated into parallax for a very long time in a variety of media, creating a realistic appearance. As early as Disney's Snow White and the Seven Dwarfs, traditional animation and computer games like Super Mario were the first to utilise it. Parallax effects later became a staple of modern web design thanks to developments in CSS and HTML.

Example:

https://www.nolanomura.com/

Underwater photography is Nolan Omura's area of expertise as a photographer and videographer based in Hawaii. His creative use of the parallax scrolling effect gives his already engaging homepage design more depth and motion.

Each time a user scrolls down the website, thrilling images of aquatic life are presented to them thanks to the full-width striping technique. Utilizing a combination of reveal scrolling and parallax effects, the strips gradually float above one another.

Tiny animations give the photos even more motion. The website animations, along with the usage of parallax and video, make this page entirely come to life even though these are hardly noticeable.

[wasebastian]

Bootstrap

Bootstrap is related to all three of the crucial subjects—HTML, CSS, and JavaScript—mentioned above. It can be summed up simply as useful code written in the programming languages HTML, CSS, and JavaScript It transforms a website into one that is responsive. A free and open-source CSS framework called Bootstrap is designed for front-end web development that prioritizes mobile responsiveness. It includes design templates for typography, forms, buttons, navigation, and other interface elements in HTML, CSS, and (optionally) JavaScript. The most recent version of Bootstrap is version 5, which includes new components, a quicker stylesheet, and improved responsiveness. The most recent, stable versions of all the major browsers and systems are supported by Bootstrap 5. But Internet Explorer 11 and earlier versions are not supported. The primary distinction between Bootstrap 5 and Bootstrap 3 & 4 is that JavaScript has replaced jQuery in Bootstrap 5.

The Advantages of Bootstrap

• Simple to use: Anyone who understands the fundamentals of HTML and CSS may begin using Bootstrap.

• Bootstrap has responsive CSS that adapts to phones, tablets, and desktops.

• Mobile-first strategy: Mobile-first styles are a fundamental component of the Bootstrap framework.

• Bootstrap 5 is appropriate for use with all current browsers (Chrome, Firefox, Edge, Safari, and Opera). Be aware that you must use either BS4 or BS3 if you require support for IE11 and earlier.

• Fewer Cross browser bugs

• Lightweight and customizable

• a stable framework that works with most browsers and fixes for CSS compatibility

• many JavaScript plugins that make use of jQuery

• Good documentation and community support

• There are tons of premium and free WordPress themes and plugins available.

• Great grid system

The Disadvantages of Bootstrap

• If the design tends to diverge from the typical design used in Bootstrap, several style overrides or rewriting files will be required, which might result in a lot of effort spent on designing and coding the website.

• You would need to go above and beyond when establishing a design since if you don't undertake extensive customisation, all websites would appear the same.

• Styles can produce excessive amounts of unnecessary HTML output due to their verbosity.

• Most of the plugins go unused because JavaScript is connected to jQuery and is one of the most widely utilized libraries.

• HTML not in compliance.

[wasebastian]

CSS Media Queries

CSS3's media queries expanded on the concept of media types introduced in CSS2 by looking at a device's capabilities rather than its type. Different style rules could be specified for various media types due to the @media rule, which was added to CSS2. One set of style guidelines may be used for computer screens, one for printers, one for mobile phones, one for television-like devices, and so on. Except for print media, these media formats sadly never received much support from gadgets.

CSS3 Introduced Media Queries

CSS3's media queries expanded on the concept of media types introduced in CSS2 by looking at a device's capabilities rather than its type.

Many items can be checked with media queries, including:

• width and height of the viewport

• width and height of the device

• orientation (is the tablet/phone in landscape or portrait mode?)

• resolution

One well-liked method for distributing a customized style sheet to PCs, laptops, tablets, and mobile phones is to use media queries (such as iPhone and Android phones).

Media Query Syntax

A media type and one or more expressions that can resolve to true or false make up a media query.

@media not|only mediatype and (expressions) {

CSS-Code;

}

If the media type supplied matches the type of device the document is being displayed on and all of the media query's expressions are true, the result of the query is true. A media query that returns true applies the associated style sheet or style rules in accordance with the standard cascade rules.The media type is optional, and the all type will be implied unless the not or only operators are used.

You can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

Value: Description

1) all: Used for all media type devices

2) print: Used for printers

3) screen: Used for computer screens, tablets, smart-phones etc.

4) speech: Used for screenreaders that "reads" the page out loud

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

@media screen and (min-width: 480px) { body { background-color: lightgreen; } }

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

[wasebastian]

The 3 Major Principles of Responsive Design

Responsive design is guided by three main ideas. Other rules might apply to certain designs, but these three apply to all responsive sites:

1)Fluid Grid System

Publishers choose the exact size (and location) of what is displayed in print. This pattern persisted when the internet appeared, and designers defined webpages in pixel sizes.

The "p" in “720p” and “1080p” stands for “progressive scan,” and the number refers to the height dimensions of the image in pixels.

Because devices come in different sizes, the absolute size strategy is useless for responsive design. Relative sizes are used in responsive design as a result.

You can see in this image that the content in the fixed version is always the same width, regardless of the device, whereas the content in the fluid version fills the device's available screen area.

2) Fluid Images

Nothing on a layout will be the same size across all devices when fluid grids are used to define a layout using relative values (like percentages). This implies that you will need to adjust the size of your layout's pictures to fit each screen. That's where moving pictures come into play! Fluid images enlarge to the size of their container, just like water does. Therefore, you may generate a single image and tell the browser to resize it to fit the container. Use SVG files for non-photographic images like icons. These file formats are small and don't lose quality when scaled to different resolutions.

3) Media Queries

Media queries are directives to change the site's design based on specific circumstances. For instance, given the limited screen space of a smartphone, a two-column method might not be appropriate. If the screen size is smaller than a specific size, you can use a media query to tell the browser how to arrange the available space. A "breakpoint" is the precise size at which the arrangement splits.

With a "mobile first" strategy, where you establish what you want on mobile and scale up from there, media queries perform well. To identify and plan breakpoints, you must test the content. Eventually, you might discover that you can anticipate breakpoints based on the screen resolution of a device.

Recommended Techniques and Factors for Responsive Design

When using responsive design, you plan for flexibility in all areas, including layouts, text, and images. So, you ought to:

• Use the mobile-first strategy and begin product design for mobile devices rather than desktop ones.

• Create fluid grids and images.

• Make the use of Scalable Vector Graphics a top priority (SVGs). These are a 2D visual file type based on XML that supports animations and interactivity.

• Include three or more breakpoints (layouts for three or more devices).

• To accommodate user circumstances, prioritize and hide material. To give consumers the information they need first, examine your visual hierarchy and make use of progressive disclosure and navigation drawers. Keep nice-to-have objects (non-essentials) in the background.

• Aim for minimalism.

• Apply design patterns to make things as simple and familiar to consumers as possible in their circumstances. For instance, the column drop pattern adapts content to a variety of screen types.

• Aim for accessibility.

[wasebastian]

Responsive Design

According on the screen size and orientation of the device being used to view it, responsive web design (RWD) creates dynamic adjustments to the layout of a website. The most frequently discussed and practiced aspect of web design is "responsive design." The ability of a website to adjust in a decent manner to any device, may it be a 15-inch desktop or a 21-inch laptop or an iPod or a tablet or 4-inch-wide mobile screen, along with all its components and features are known as ‘responsive design’. Since individuals have started utilizing laptops and desktops at their offices and homes, as well as smartphones and tablets while on the go, this is the hottest topic for website construction. Wi-Fi has grown in popularity and is now a standard feature. The responsive web design guide will provide you with all the necessary information to create a responsive design.

The media query, the web browser, and the responsive web interface itself are the three primary parts of responsive web design.

1)Media Queries

The most recent web browsers enable media queries, which function by producing media queries. They are known as "media queries" and can be applied in a variety of contexts, including the layout of a page or the content of an application. By explicitly supplying templates based on client particular features like the browser's window size, they also enable designers to create diverse forms using similar HTML archives.

2)Web Browser

Websites often feature a lot of photos, thus it's important to maintain the fluidity of those images as well. The idea behind liquid graphics is to communicate ideas at the largest size possible. Instead of declaring the height and width in the code for responsive web pages, designers let the browsers resize the images as needed while using CSS to control their relative sizes. The process of accurately resizing photos is remarkable and simple.

3)Website Interface (JS, HTML, and CSS)

Nowadays, a lot of mobile devices have touchscreens, thus it's important to pay attention to the size of the interactive elements within interfaces. In addition to picture flexibility, native interfaces like keyboards and drop-out menus should be used as efficiently as possible to give customers a pleasant experience, whether they are using a mobile device or a desktop.

[wasebastian]

World Wide Web

The World Wide Web, often known as WWW, W3, or the Web, is a network of open websites that is accessible over the Internet. The Web is not the same as the Internet: the Web is one of many applications built on top of the Internet.

History of World Wide Web

The architecture of the World Wide Web was developed by Tim Berners-Lee. At the CERN physics research facility in 1990, he developed the first web server, web browser, and webpage on his computer. The first public announcement of the Web was made by him in 1991 on the alt.hypertext newsgroup.

The system that we refer to as "the Web" today is made up of various parts:

• Between a server and a client, data transport is governed by the HTTP protocol.

• A client must supply a special universal identification, also known as a URL (uniform resource locator) or URI (uniform resource identifier) (formerly known as a Universal Document Identifier (UDI)), in order to access a Web component.

• For publishing web content, HTML (hypertext markup language) is the most popular format.

A key component of the Web's identity as a network of linked documents is linking, or connecting resources through hyperlinks. Tim Berners-Lee established the World Wide Web Consortium (W3C) to standardize and advance the Web shortly after it was created. This consortium is made up of key Web interest groups such web browser developers, governmental organizations, academic institutions, and researchers. Both outreach and education are part of its goal.

A hypertext document is a web page. Typically, these are text documents with Hypertext Markup Language formatting (HTML).A website is typically defined as a collection of related online pages that share a common theme, name, or URL. Web browsers are used to access web pages that are kept on web servers. A web server is a piece of software that runs on a device and saves, processes, and sends clients web pages. A web browser is a piece of software used for finding, viewing, and accessing documents on the Internet. Firefox, Chrome, Safari, Edge, and Opera are a few examples of web browser. The communication between client and server uses Hyper Text Transfer Protocol (HTTP).

[wasebastian]

Web Authoring

Using current web writing tools and technologies, web authoring is the practice of producing online-based publications. Web authoring software is a form of desktop publishing tool that provides a distinct kind of graphical user interface to help users understand the challenging world of HTML and web coding. Web authoring tools automatically generate difficult website building components like HTML and Javascript. WordPress, Wix, Adobe Dreamweaver, Weebly, and Scribus are a few well-known web authoring tools. By entering text and structuring it with buttons, menus, and dialog boxes much as you would in word processing software like Microsoft Word, these tools enable users to construct websites using a familiar visual interface. Web designers and developers utilize web authoring software to create websites and applications for a variety of platforms, including tablets and browsers.

Advantages

Web authoring tools provide you several benefits. The tools generally strive to be simple to use. One example is drag and drop functionality, but they also offer pre-made themes. The greatest online authoring tools will usually also help you save time. You may avoid using outsourcing. This saves you time because finding and choosing a web design company might take weeks or months. You also avoid the need for a review process. Once the site looks the way you want, you can simply launch it.

Disadvantages

There are some restrictions with web authoring tools as well. Most web publishing software have the significant drawback of locking you into the software for all future updates. The website's code cannot be changed after the fact by hiring a web programmer. The number of templates that web authoring software often provides you for things like the site's layout is typically quite limited. Additionally, integrating external resources like eCommerce choices may be challenging. Some web authoring providers require you to host the website through their platform as well, making it challenging to switch later to your own website.