Web Browser
A browser is a software program that is used to explore, retrieve, and display the information available on the World Wide Web. This information may be in the form of pictures, web pages, videos, and other files that are all connected via hyperlinks and categorized with the help of URLs (Uniform Resource Identifiers). For example, you are viewing this page by using a browser.
A browser is a client program as it runs on a user computer or mobile device and contacts the webserver for the information requested by the user. The web server sends the data back to the browser that displays the results on internet supported devices. On behalf of the users, the browser sends requests to web servers all over the internet by using HTTP (Hypertext Transfer Protocol). A browser requires a smartphone, computer, or tablet and internet to work.
History of Web Browser
# The WorldWideWeb was the first web browser. It was created by W3C Director Tim Berners-Lee in 1990. Later, it was renamed Nexus to avoid confusion caused by the actual World Wide Web.
#The Lynx browser was a text-based browser,
which was invented in 1992. It was not able to display the graphical content.
# Although, the first graphical user interface browser was NCSA Mosaic. It was the first most popular browser in the world, which was introduced in 1993.
#
In 1994, there were some improvements occurred in Mosaic and came to Netscape Navigator.
# In 1995, Microsoft introduced the Internet Explorer It was the first web browser developed by Microsoft.
# A research project started on Opera
in 1994. Later, it was publicly introduced in 1996.
# Apple's Safari browser was introduced in 2003. It was specifically released for Macintosh computers.
# In 2004, Mozilla introduced Firefox as Netscape Navigator.
# In 2007,
a browser Mobile Safari was released as Apple mobile web browser.
# The popular browser Google Chrome was launched in 2008
# The fast-growing mobile-based browser Opera Mini was released in 2011.
# The Microsoft Edge browser was launched in 2015.
Features of Web Browser
- Refresh button: Refresh button allows the website to reload the contents of the web pages. Most of the web browsers store local copies of visited pages to enhance the performance by using a caching mechanism.
- Stop button: It is used to cancel the communication of the web browser with the server and stops loading the page content. For example, if any malicious site enters the browser accidentally, it helps to save from it by clicking on the stop button.
- Home button: It provides users the option to bring up the predefined home page of the website.
- Web address bar: It allows the users to enter a web address in the address bar and visit the website.
- Tabbed browsing: It provides users the option to open multiple websites on a single window. It helps users to read different websites at the same time.
- Bookmarks: It allows the users to select a particular website to save it for the later retrieval of information, which is predefined by the users.
Components of a Web browser
- User Interface: The user interface is an area where the user can use several options like the address bar, back and forward button, menu, bookmarking, and many other options to interact with the browser.
- Browser Engine: It connects the UI (User Interface) and the rendering engine as a bridge. It queries and manipulates the rendering engine based on inputs from several user interfaces.
- Rendering Engine: It is responsible for displaying the requested content on the browser screen. It translates the HTML, XML files, and images, which are formatted using CSS. It generates the layout of the content and displays it on the browser screen. Although it can also display other types of content by using different types of plugins or extensions, such as:
- Internet Explorer uses Trident
- Chrome & Opera 15+ use Blink
- Chrome (iPhone) & Safari use Webkit
- Firefox & other Mozilla browsers use Gecko
- Networking: It retrieves the URLs by using internet protocols like HTTP or FTP. It is responsible for maintaining all aspects of Internet communication and security. Furthermore, it may be used to cache a retrieved document to reduce network traffic
- JavaScript Interpreter: As the name suggests, the JavaScript Interpreter translates and executes the JavaScript code, which is included on a website. The translated results are sent to the rendering engine to display results on the device screen.
- UI Backend: It is used to draw basic combo boxes and Windows (widgets). It specifies a generic interface, which is not platform-specific.
- Data Storage: The data storage is a persistence layer that is used by the browser to store all sorts of information locally, like cookies. A browser also supports different storage mechanisms such as IndexedDB, WebSQL, localStorage, and FileSystem. It is a database stored on the local drive of your computer where the browser is installed. It handles user data like cache, bookmarks, cookies, and preferences.
![](https://github.com/Kamleshlodhi1119/myvidhyapith/blob/126edec75c817536e8319a3478cd69ae97a56d0f/Screenshot%20(27).png?raw=true)
Web Architecture:
There are a lot of web browsers available in the market. All of them interpret and display information on the screen; however, their capabilities and structure vary depending upon implementation. But the most basic components that all web browsers must exhibit are listed below:
- Controller/Dispatcher
- Interpreter
- Client Programs
![](https://github.com/Kamleshlodhi1119/myvidhyapith/blob/126edec75c817536e8319a3478cd69ae97a56d0f/Screenshot%20(28).png?raw=true)
Controller works as a control unit in the CPU. It takes input from the keyboard or mouse, interprets it, and makes other services work based on the input it receives.
Interpreter receives the information from the controller and executes the instruction line by line. Some interpreters are mandatory while some are optional. For example, HTML interpreter program is mandatory and Java interpreter is optional
Client Program describes the specific protocol that will be used to access a particular service. Following are the client programs that are commonly used:
- HTTP
- SMTP
- FTP
- NNTP
- POP
Web server
- Web Server is a piece of software running on a computer whose primary job is to distribute web pages to users whenever they demand it and provide an area in which to store and organize the pages of the website.
- The machine that executes the web server software can be a remote machine placed on the other side of your network or even on the other end of the globe, or it can be your very own personal computer at home.
- We also introduced the idea that the user's browser was the client in this relationship.
![](https://raw.githubusercontent.com/Kamleshlodhi1119/myvidhyapith/f48d706fe4c90cfa2cb0996106528b68cd1e17c9/Web-browser-Vs-Web-server1-2-1.jpg)
Web 2.0
- When it comes to defining web 2.0 the term means such internet applications that allow sharing and collaboration opportunities to people and help them to express themselves online
- "Web 2.0 is the business revolution in the computer industry caused by the move to the internet as a platform"
- It's a simply improved version of the first worldwide web, characterized specifically by the change from static to dynamic or user-generated content and also the growth of social media.
![](https://raw.githubusercontent.com/Kamleshlodhi1119/myvidhyapith/3defaeacb9499b07e4b867a27cc343b7f9a70018/web-2-0.jpg)
Features of Web 2.0
- Web 2.0 uses the approach of "guide on the Side" rather than implementing a "top-down" approach, i.e. dynamically change or edit the content rather than simply reading.
- It changed the concept of "mostly read-only web" to "widely read and write" over the web.
- Web 2.0 provides a perfect platform base for effective user interaction that was not available before.
- It changed the idea from passive consumption and delivery of content to actively participating in creation, sharing, and collaboration.
- It is subjected to be a powerful lure for an Enterprise; that fetches more employees into accounts at a lower cost for greater participation in projects and idea sharing.
Concept of effective web designing
- WEBSITE PURPOSE
- Your website needs to accommodate the needs of the user. Having a simple clear intention on all pages will help the user interact with what you have to offer. What is the purpose of your website? Are you imparting practical information like a `How-to guide`? Is it an entertainment website like sports coverage or are you selling a product to the user? There are many different purposes that websites may have, but there are core purposes common to all websites.
- SIMPLICITY
- Simplicity is the best way to go when considering the user experience and the usability of your website. Below are ways to achieve simplicity through design.
1. Colour- Colour has the power to communicate messages and evoke emotional responses. Finding a colour palette that fits your brand will allow you to influence your customer's behavior towards your brand. Keep the colour selection limited to less than 5 colours.
2. Type- Typography has an important role to play on your website. It commands attention and works as the visual interpretation of the brand's voice.
3. Imagery- Imagery is every visual aspect used within communications. This includes still photography, illustration, video, and all forms of graphics. All imagery should be expressive and capture the spirit of the company and act as the embodiment of their brand personality. - NAVIGATION
- • Navigation is the wayfinding system used on websites where visitors interact and find what they are looking for. Website navigation is key to retaining visitors.
• If the website's navigation is confusing, visitors will give up and find what they need elsewhere. Keeping navigation simple, intuitive, and consistent on every page is key. - F-SHAPED PATTERN READING
- The F-based pattern is the most common way visitors scan text on a website. Eye-tracking studies have found that most of what people see is in the top and left area of the screen.
• The F-shaped layout mimics our natural pattern of reading in the West (left to right and top to bottom). An effectively designed website will work with a reader's natural pattern of scanning the page. - VISUAL HIERARCHY
- Visual hierarchy is the arrangement of elements in order of importance. This is done either by size, color, imagery, contrast, typographically, whitespace, texture, and style.
- CONTENT
- An effective web design has both great design and great content. Using compelling language great content can attract and influence visitors by converting them into customers
- GRID-BASED LAYOUT
- Grids help to structure your design and keep your content organized. The grid helps to align elements on the page and keep it clean. The grid-based layout arranges content into a clean rigid grid structure with columns, sections that line up and feel balanced and impose order and results in an aesthetically pleasing website
- LOAD TIME
- Website page loading speed optimization is an important factor in its design process.
• If your website takes too long to load, potential users will quickly move on to your other competitive websites.
• Fast loading time means higher visitor engagement, visitor retention, and ultimately a higher conversion rate. - MOBILE-FRIENDLY
- More people are using their phones or other devices to browse the web. It is important to consider building your website with a responsive layout where your website can adjust to different screens.
WEBSITE DESIGN ISSUES
- BROWSER COMPATIBILITY
- Web pages should be able to display across different browsers, including Internet Explorer, Firefox, Safari, and Chrome.
• When building your site, test your web pages for browser compatibility issues in as many browsers and operating systems as you can. Remember to test on the most recent browser versions, as well as the older ones - not all of your visitors may be using up-to-date software - DISPLAY RESOLUTION
- The most common screen resolution size in recent years has been:
1. 1366x768 pixels for desktops
2. 360x640 pixels for mobile screens
3. 768x1024 pixels for tablets - TECHNOLOGY -
- Common server/client-side scripting programs and languages include HTML, CSS, XHTML, AJAX, JavaScript, Flash, JSON, PHP, CGI, XML/XSL, PERL, MySQL, etc.
- COLOUR COMBINATION
- Colour is an equally important factor in webpage design considerations. Choosing an inappropriate color combination in website design can have devastating effects
- PAGE LOADING SPEED
- Website page loading speed optimization is an important factor in its design process.
• If your website takes too long to load, potential users will quickly move on to your other competitive websites.
• Fast loading time means higher visitor engagement, visitor retention, and ultimately a higher conversion rate.
• It also helps the visitor to locate their current position on the website and multiple paths through which the website can be navigated.
• The arrangement of hyperlinks in a certain fashion determines the performance of a website
• Information systems security is a very important consideration during the software application development process.
• The security of a website is the most important aspect that preserves users' privacy
Caching means keeping a copy of data that you've already received to avoid having to ask for it again.