0% found this document useful (0 votes)
5 views

Thory Notes of Web

Uploaded by

Sadia Jahangir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views

Thory Notes of Web

Uploaded by

Sadia Jahangir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

World Wide Web

The World Wide Web or Web is basically a collection of information that is linked
together from points all over the world. It is also abbreviated as WWW.

• World wide web provides flexibility, portability, and user-friendly features.


• It mainly consists of a worldwide collection of electronic documents (i.e, Web
Pages).
• It is basically a way of exchanging information between computers on the Internet.
• The WWW is mainly the network of pages consists of images, text, and sounds on
the Internet which can be simply viewed on the browser by using the browser
software.
• It was invented by Tim Berners-Lee.

Components of WWW

The Components of WWW mainly falls into two categories:

1. Structural Components
2. Semantic Components
Architecture of WWW

The WWW is mainly a distributed client/server service where a client using the browser
can access the service using a server. The Service that is provided is distributed over many
different locations commonly known as sites/websites.

• Each website holds one or more documents that are generally referred to as web
pages.
• Where each web page contains a link to other pages on the same site or at other
sites.
• These pages can be retrieved and viewed by using browsers.
In the above case, the client sends some information that belongs to site A. It generally
sends a request through its browser (It is a program that is used to fetch the documents
on the web).

and also the request generally contains other information like the address of the site, web
page(URL).

The server at site A finds the document then sends it to the client. after that when the
user or say the client finds the reference to another document that includes the web page
at site B.

The reference generally contains the URL of site B. And the client is interested to take a
look at this document too. Then after the client sends the request to the new site and
then the new page is retrieved.

Now we will cover the components of WWW in detail.

1.Client/Browser
The Client/Web browser is basically a program that is used to communicate with the
webserver on the Internet.

• Each browser mainly comprises of three components and these are:


o Controller
o Interpreter
o Client Protocols
• The Controller mainly receives the input from the input device, after that it uses
the client programs in order to access the documents.
• After accessing the document, the controller makes use of an interpreter in order
to display the document on the screen.
• An interpreter can be Java, HTML, javascript mainly depending upon the type of
the document.
• The Client protocol can be FTP, HTTP, TELNET.

2.Server
The Computer that is mainly available for the network resources and in order to provide
services to the other computer upon request is generally known as the server.

• The Web pages are mainly stored on the server.


• Whenever the request of the client arrives then the corresponding document is
sent to the client.
• The connection between the client and the server is TCP.
• It can become more efficient through multithreading or multiprocessing. Because
in this case, the server can answer more than one request at a time.
3.URL
URL is an abbreviation of the Uniform resource locator.

• It is basically a standard used for specifying any kind of information on the Internet.
• In order to access any page the client generally needs an address.
• To facilitate the access of the documents throughout the world HTTP generally
makes use of Locators.

URL mainly defines the four things:

• Protocol It is a client/server program that is mainly used to retrieve the document.


A commonly used protocol is HTTP.
• Host Computer It is the computer on which the information is located. It is not
mandatory because it is the name given to any computer that hosts the web page.
• Port The URL can optionally contain the port number of the server. If the port
number is included then it is generally inserted in between the host and path and
is generally separated from the host by the colon.
• Path It indicates the pathname of the file where the information is located.

4.HTML
HTML is an abbreviation of Hypertext Markup Language.

• It is generally used for creating web pages.


• It is mainly used to define the contents, structure, and organization of the web
page.

5.XML

XML is an abbreviation of Extensible Markup Language. It mainly helps in order to define


the common syntax in the semantic web.

Features of WWW
Given below are some of the features provided by the World Wide Web:

• Provides a system for Hypertext information


• Open standards and Open source
• Distributed.
• Mainly makes the use of Web Browser in order to provide a single interface for
many services.
• Dynamic
• Interactive
• Cross-Platform

Advantages of WWW
Given below are the benefits offered by WWW:

• It mainly provides all the information for Free.


• Provides rapid Interactive way of Communication.
• It is accessible from anywhere.
• It has become the Global source of media.
• It mainly facilitates the exchange of a huge volume of data.

Disadvantages of WWW
There are some drawbacks of the WWW and these are as follows;

• It is difficult to prioritize and filter some information.


• There is no guarantee of finding what one person is looking for.
• There occurs some danger in case of overload of Information.
• There is no quality control over the available data.
• There is no regulation.

Protocol and Standard in Computer


Networks
Protocol
In Order to make communication successful between devices , some rules and
procedures should be agreed upon at the sending and receiving ends of the system.
Such rules and procedures are called as Protocols . Different types of protocols are
used for different types of communication.

In above diagrams Protocols are shown as set of rules . Such that Communication
between Sender and Receiver is not possible without Protocol.

Key elements of a Protocol

The key elements of a protocol are as given below:

• Syntax This term mainly refers to the structure or format of the data which simply
means the order in which data is presented. For example, A simple protocol might
expect the first 8 bits of data to be the address of the sender, then the second 8
bits to be the address of the receiver, and then the rest of the stream to be the
message itself.
• Semantics This term mainly refers to the meaning of each section of bits. How
does a particular pattern to be interpreted, and On the basis of interpretation what
action is to be taken? For example, does an address identify the route to be taken
or the final destination of the message?
• Timing This term mainly refers to two characteristics: At what time the data should
be sent and how fast data can be sent. For example, if a sender produces data at
100 Mbps but the receiver can process data at only 1 Mbps, the transmission will
overload the receiver and there will be some data loss.
Standards :
Standards are the set of rules for data communication that are needed for exchange
of information among devices. It is important to follow Standards which are created
by various Standard Organization like IEEE , ISO , ANSI etc.
Standards are mainly used to provide guidelines to manufacturers, vendors, government agencies,
and also to other service providers in order to ensure the kind of interconnectivity that is necessary
for today's marketplace and also in international communications.

Types of Standards :
Standards are of two types :
• De Facto Standard.
• De Jure Standard.
De Facto Standard : The meaning of the work ” De Facto ” is ” By Fact ” or “By
Convention”.
These are the standards that have not been approved by any Organization , but have been
adopted as Standards because of it’s widespread use. Also , sometimes these standards are
often established by Manufacturers.
For example : Apple and Google are two companies which established their own rules on
their products which are different . Also they use some same standard rules for
manufacturing for their products.
De Jure Standard : The meaning of the word “De Jure” is “By Law” or “By Regulations”
.
Thus , these are the standards that have been approved by officially recognized body like
ANSI , ISO , IEEE etc. These are the standard which are important to follow if it is required or
needed.
For example : All the data communication standard protocols like SMTP , TCP , IP , UDP etc.
are important to follow the same when we needed them.

Web server vs. Application


server
A web server accepts and fulfills requests from clients for static content (i.e.,
HTML pages, files, images, and videos) from a website. Web servers handle
HTTP requests and responses only.
An application server exposes business logic to the clients, which generates
dynamic content. It is a software framework that transforms data to provide
the specialized functionality offered by a business, service, or application.
Application servers enhance the interactive parts of a website that can appear
differently depending on the context of the request.

The illustration below highlights the difference in their architecture:

The columns below summarize the key differences between the two types of
servers:

Web Server

• Deliver static content.


• Content is delivered using the HTTP protocol only.

• Serves only web-based applications.


• No support for multi-threading.

• Facilitates web traffic that is not very resource intensive.


Application Server

• Delivers dynamic content.


• Provides business logic to application programs using several protocols
(including HTTP).
• Can serve web and enterprise-based applications.
• Uses multi-threading to support multiple requests in parallel.
• Facilitates longer running processes that are very resource-intensive.

What is Web Application


Architecture?
Web application architecture is a blueprint of simultaneous
interactions between components, databases, middleware
systems, user interfaces, and servers in an application. It can
also be described as the layout that logically defines the
connection between the server and client-side for a better web
experience.

How does the Web App


Architecture Work?
All applications are made up of two primary components:

• Client-side, popularly called: the frontend, where the code is written in HTML,

CSS, JavaScript and stored within the browser. It’s where user interaction

takes place.

• Server-side, also known as the backend, controls the business logic and

responds to HTTP requests. The server-side code is written in Java, PHP, Ruby,

Python, etc.

web application development


Web application development is the creation of application programs that


reside on remote servers and are delivered to the user’s device over the
Internet. A web application (web app) does not need to be downloaded and is
instead accessed through a network. An end user can access a web
application through a web browser such as Google Chrome, Safari, or Mozilla
Firefox. A majority of web applications can be written in JavaScript, Cascading
Style Sheets (CSS), and HTML5.
What is Web based
Application Deployment?
Deployment in software and web development means pushing changes or updates
from one deployment environment to another. When setting up a website you will
always have your live website, which is called the live environment or production
environment.

What is XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

Why XHTML?
XML is a markup language where all documents must be marked up correctly
(be "well-formed").

XHTML was developed to make HTML more extensible and flexible to work with
other data formats (such as XML). In addition, browsers ignore errors in HTML
pages, and try to display the website even if it has some errors in the markup.
So XHTML comes with a much stricter error handling.

Common Gateway Interface (CGI)


The Common Gateway Interface (CGI) provides the middleware between WWW
servers and external databases and information sources. The World Wide Web
Consortium (W3C) defined the Common Gateway Interface (CGI) and also defined
how a program interacts with a Hyper Text Transfer Protocol (HTTP) server. The
Web server typically passes the form information to a small application program
that processes the data and may send back a confirmation message. This process or
convention for passing data back and forth between the server and the application
is called the common gateway interface (CGI).

Features of CGI:
• It is a very well defined and supported standard.
• CGI scripts are generally written in either Perl, C, or maybe just a simple shell
script.
• CGI is a technology that interfaces with HTML.
• CGI is the best method to create a counter because it is currently the quickest
• CGI standard is generally the most compatible with today’s browsers
Advantages of CGI:
• The advanced tasks are currently a lot easier to perform in CGI than in Java.
• It is always easier to use the code already written than to write your own.
• CGI specifies that the programs can be written in any language, and on any
platform, as long as they conform to the specification.
• CGI-based counters and CGI code to perform simple tasks are available in plenty.
Disadvantages of CGI:
There are some disadvantages of CGI which are given below:
• In Common Gateway Interface each page load incurs overhead by having to load
the programs into memory.
• Generally, data cannot be easily cached in memory between page loads.
• There is a huge existing code base, much of it in Perl.
• CGI uses up a lot of processing time.
cHTML
Short for compact HTML, a subset of HTML for small information devices, such
as smart phones and PDAs.

XML
XML (Extensible Markup Language) is a markup language similar to HTML, but
without predefined tags to use. Instead, you define your own tags designed specifically for
your needs. This is a powerful way to store data in a format that can be stored, searched, and
shared.

WML
wireless markup language: an XML-based set of standards used to tag and format text
displayed on handheld wireless devices.

WML | Introduction

WML stands for Wireless Markup Language (WML) which is based on HTML and
HDML. It is specified as an XML document type. It is a markup language used to
develop websites for mobile phones. While designing with WML, constraints of
wireless devices such as small display screens, limited memory, low bandwidth of
transmission and small resources have to be considered. WAP (Wireless Application
Protocol) sites are different from normal HTML sites in the fact that they are
monochromatic (only black and white), concise and has very small screen space, due
to which content in the WAP sites will be only the significant matter, much like how
telegraph used to work in the olden days. The concept WML follows is that of a deck
and card metaphor.
Web 2.0
Internet

Web 2.0, term devised to differentiate the post-dotcom bubble World Wide Web with
its emphasis on social networking, content generated by users, and cloud
computing from that which came before. The 2.0 appellation is used in analogy with
common computer software naming conventions to indicate a new, improved version.

Web 2.0
What Is Web 2.0?
Web 2.0 describes the current state of the internet, which has more user-
generated content and usability for end-users compared to its earlier
incarnation, Web 1.0. In general, Web 2.0 refers to the 21st-century Internet
applications that have transformed the digital era in the aftermath of
the dotcom bubble.

KEY TAKEAWAYS

• Web 2.0 describes the current state of the internet, which has more
user-generated content and usability for end-users compared to its
earlier incarnation, Web 1.0.
• Web 2.0 does not refer to any specific technical upgrades to the
internet; it refers to a shift in how the Internet is used.
• In the new age of the Internet, there is a higher level of information
sharing and interconnectedness among participants.

Semantic Web
Description
The Semantic Web, sometimes known as Web 3.0, is an extension of the World Wide Web through
standards set by the World Wide Web Consortium. The goal of the Semantic Web is to make Internet
data machine-readable.

Web service
A web service (WS) is either:
• a service offered by an electronic device to another electronic device, communicating with
each other via the Internet, or
• a server running on a computer device, listening for requests at a particular port over a
network, serving web documents (HTML, JSON, XML, images).
The use of the term "Web" in Web Service is a misnomer. Web Services do not use
the World Wide Web (WWW), a human user interface running on the Internet, but rather
a machine-to-machine service running on the Internet using the WWW protocols.
In a web service, a web technology such as HTTP is used for transferring machine-
readable file formats such as XML and JSON.
In practice, a web service commonly provides an object-oriented web-based interface to
a database server, utilized for example by another web server, or by a mobile app, that
provides a user interface to the end-user. Many organizations that provide data in
formatted HTML pages will also provide that data on their server as XML or JSON, often
through a Web service to allow syndication. Another application offered to the end-user
may be a mashup, where a Web server consumes several Web services at different
machines and compiles the content into one user interface.

Search Engines

Introduction
Search Engine refers to a huge database of internet resources such as web pages,
newsgroups, programs, images etc. It helps to locate information on World Wide Web.
User can search for any information by passing query in form of keywords or phrase. It
then searches for relevant information in its database and return to the user.
Search Engine Components
Generally there are three basic components of a search engine as listed below:
1. Web Crawler
2. Database
3. Search Interfaces

Web crawler
It is also known as spider or bots. It is a software component that traverses the web to
gather information.

Database
All the information on the web is stored in database. It consists of huge web resources.

Search Interfaces
This component is an interface between user and the database. It helps the user to search
through the database.

Search Engine Working


Web crawler, database and the search interface are the major component of a search
engine that actually makes search engine to work. Search engines make use of Boolean
expression AND, OR, NOT to restrict and widen the results of a search. Following are the
steps that are performed by the search engine:
• The search engine looks for the keyword in the index for predefined database
instead of going directly to the web to search for the keyword.
• It then uses software to search for the information in the database. This software
component is known as web crawler.
• Once web crawler finds the pages, the search engine then shows the relevant web
pages as a result. These retrieved web pages generally include title of page, size
of text portion, first several sentences etc.
These search criteria may vary from one search engine to the other. The retrieved information
is ranked according to various factors such as frequency of keywords, relevancy of
information, links etc.

• User can click on any of the search results to open it.

Architecture
The search engine architecture comprises of the three basic layers listed below:
• Content collection and refinement.
• Search core
• User and application interfaces

Search Engine Processing


Indexing Process
Indexing process comprises of the following three tasks:
• Text acquisition
• Text transformation
• Index creation
Text acquisition
It identifies and stores documents for indexing.
Text Transformation
It transforms document into index terms or features.
Index Creation
It takes index terms created by text transformations and create data structures to suport
fast searching.

Query Process
Query process comprises of the following three tasks:
• User interaction
• Ranking
• Evaluation
User interaction
It supporst creation and refinement of user query and displays the results.
Ranking
It uses query and indexes to create ranked list of documents.
Evaluation
It monitors and measures the effectiveness and efficiency. It is done offline.

Examples
Following are the several search engines available today:

Search Description
Engine

Google It was originally called BackRub. It is the most popular search engine globally.

Bing It was launched in 2009 by Microsoft. It is the latest web-based search engine that
delivers Yahoo’s results.
Ask It was launched in 1996 and was originally known as Ask Jeeves. It includes suppor
match, dictionary, and conversation question.

AltaVista It was launched by Digital Equipment Corporation in 1995. Since 2003, it is powered
Yahoo technology.

AOL.Search It is powered by Google.

LYCOS It is top 5 internet portal and 13th largest online property according to Media Matrix.

Alexa It is subsidiary of Amazon and used for providing website traffic information.

web content management system


(WCMS)

A web content management system (WCMS) is a type of content management system


(CMS) that provides an organization with a way to manage digital information on a website
through creating and maintaining content without prior knowledge of web programming
or markup languages.

Managing web content effectively can have useful business applications in the enterprise,
producing insights for decision-making and delivering results, as well as value.

How does a WCMS work?


A WCMS helps users maintain, control, change and reassemble content on a webpage.
Users store content within a database and can assemble the content using a flexible
language such as XML or .NET. Users can access the WCMS through a web browser,
then edit the content and maintain control of the layout from that browser-based interface.

There are two parts of a WCMS:

• The content management application (CMA) is a user interface that enables


users -- such as marketers and content creators -- to design, create, modify and
remove content from the website without needing help from the IT department.

• The content delivery application (CDA) provides back-end services that take the
content that users create in the CMA and turn it into the website that visitors can
access.

An organization can run a WCMS in its own data center or in the cloud.

Why use a WCMS?


A WCMS helps businesses create, manage and publish content on websites -- which are
essential marketing channels. Typically, digital marketing tactics such as email, social
media, print and other advertisements direct the customer to the company website, so it
is important for the business to have and maintain a web presence. A WCMS is the
technology that powers websites that focus on content creation and sharing -- such as
blogs and portfolios. However, organizations can also use a WCMS for other purposes,
such as online stores or online forums.

Web-based Information system:


Web-based information system is an information system which uses Internet web
technologies for delivering information and services to users. This technology is a
software system and is used to publish and maintain data by hypertext principle. Web-
based information system is the combination of one or more web applications, specific
functionality-oriented components. Basically in this type of information system web
browser is used as a front end and all the databases are used as a back end.

Key features of web-based Information System:

Web-based information systems have evolved significantly over recent years with its
improvement. Web-based applications have several advantages over traditional software
based applications. Some of the core features of web-based applications are given below:

Cross platform compatibility:

Most web-based applications are compatible in different platforms than traditional


installed software. The minimum requirement would be a web browser (Internet Explorer,
Firefox, Netscape etc.). You can use different OS such as Windows, Linux or Mac to run
the web applications.

More Manageable:

WBIS only need to be installed on the server placing minimal requirements on the end
user workstation, which makes the system easier to maintain and update as usually it can
all be done on the server.

Multiple concurrent users:

Web-based applications can indeed be used by multiple users at the same time. It’s not
necessary to share screen or send a screenshot when multiple users see and even edit the
same document at the same time. Web conferencing and online collaboration companies
regulate some key transformations and users only explore what they really need to work
effectively and co-edit documents together.

Reduced cost:
Web-based applications can reduce cost due to support and maintenance, lower
requirements on the end user system and simplified architecture. It doesn’t require any
distribution or marketing infrastructure.

Secure live data:

These applications can decrease the risk of losing data due to an unexpected disk crash
or computer virus. Companies of web-based applications provide extensive data backup
service either as an integral part or basic service or sometimes as a paid service.
Social aspects of web-based information system:

In the view of Karl Marx, human beings are intrinsically, necessarily and by definition social
beings who – beyond being “gregarious creatures” – cannot survive and meet their needs
other than through social co-operation and association. Their social characteristics are
therefore to a large extent an objectively given fact, stamped on them from birth and
affirmed by socialization processes; and, according to Marx, in producing and reproducing
their material life, people must necessarily enter into relations of production which are
“independent of their will”.

Social life is affected by web-based information system in different ways. Some of them
are given below:

Online community:

An online community is a virtual community which exist online and can take the form of
information system where any one can post content by using bulletin board system or
weblogs. Online community is used by various social and professional groups interacting
via web-based technology. It’s not necessary to have a strong bond among the members.
The social network based online community arrived in early 2000s which is called social
networking services contains different category divisions to connect with people. Social
networking services allow people to create their own profile. Now Facebook and twitter
has been using widely worldwide. More than 30 million and 18 million people are using
Facebook and twitter respectively at the end of 2009. Myspace and LinkedIn being most
widely used in North America. There are many others social networking website such as
hi5, LinkedIn, orkut, tagged etc which is using all over the world. Some social networking
sites are created for the benefit of others, such as parents social network service “Gurgle
which talks about pregnancy, birth and bringing up children. So social networking services
are being popular in society day by day.

Educational Institutions:

Now-a-days WBIS is used by most of the educational institutions for communicating with
students. Students can find their course material, class schedules or any updated
information through the WBIS. This technology has enabled researchers to access a wider
source of information though internet. Moreover it is helpful for distance learning.

News & media organizations:

As WBIS is used to store, manipulate, distribute or to create information, news and media
organizations are intimately familiar with each of the elements of information technology.
This technology helps us to get the updated news from all over the world. We can also
get early information about weather and natural disaster, stock exchange, fashion etc. So
this technology is playing an important role in our social and day to day life.

Governments:

The development of WBIS has helped the government to improve their service to their
citizens. Citizens can get current and accurate government information from e-
government websites. Government can publish different types of information through
websites such as budget of the country, tourist spots of the country, results of
examinations, vigilance information etc. Income tax department is doing online tax
accounting for collecting income tax now. So government can get various advantages
from WBIS.

PRINCIPLES OF GOOD WEBSITE DESIGN

An effective website design should fulfil its intended function by


conveying its particular message whilst simultaneously engaging the
visitor. Several factors such as consistency, colours, typography, imagery,
simplicity, and functionality contribute to good website design.
When designing a website there are many key factors that will contribute
to how it is perceived. A well-designed website can help build trust and
guide visitors to take action. Creating a great user experience involves
making sure your website design is optimised for usability (form and
aesthetics) and how easy is it to use (functionality).
Below are some guidelines that will help you when considering your next
web project.

1. 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;
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care
2. 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.
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 behaviour towards your brand. Keep the colour
selection limited to less than 5 colours. Complementary colours work very
well. Pleasing colour combinations increase customer engagement and
make the user feel good.
Type
Typography has an important role to play on your website. It commands
attention and works as the visual interpretation of the brand voice.
Typefaces should be legible and only use a maximum of 3 different fonts
on the website.
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. Most of the initial information we
consume on websites is visual and as a first impression, it is important
that high-quality images are used to form an impression of
professionalism and credibility in the visitors’ minds.
3. 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 navigation is confusing visitors will give
up and find what they need elsewhere. Keeping navigation simple,
intuitive and consistent on every page is key.

4. 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 areas 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.
5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements in order of importance.
This is done either by size, colour, imagery, contrast, typography,
whitespace, texture and style. One of the most important functions of
visual hierarchy is to establish a focal point; this shows visitors where the
most important information is.

6. CONTENT
An effective website has both great design and great content. Using
compelling language great content can attract and influence visitors by
converting them into customers.
7. GRID BASED LAYOUT
Grids help to structure your design and keep your content organised. 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.

8. LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less and they will potentially leave a
site that isn’t loaded within 3 seconds. Optimising image sizes will help
load your site faster.
9. 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.

9 Web Technologies Every Web Developer

Web development comes with a huge set of rules and techniques every website developer
should know about. If you want a website to look and function as you wish them to, you
need to get familiar with web technologies that will help you achieve your goal.

Developing an app or a website typically comes down to knowing 3 main


languages: JavaScript, CSS, and HTML. And while it sounds quite complicated, once you
know what you are doing, understanding web technology and the way it works becomes
significantly easier.

Fret not if it is not coming easily to you immediately. You may need more time, training,
and patience to dive deeper into the subject, but you’ll end up with a good understanding
eventually.

We present you with an introduction to web technologies and the latest web technologies
list hoping it will make things at least a bit easier for you. Now, let’s take a look.

What is Web Technology?


You have probably heard the term “web development technologies” before, but did you
ever think about what it actually means?

Since computers can’t communicate with each other the way people do, they require codes
instead. Web technologies are the markup languages and multimedia packages computers
use to communicate.

1. Browsers
Browsers request information and then they show us in the way we can understand. Think
of them as the interpreters of the web. Here are the most popular ones:

Google Chrome – Currently, the most popular browser brought to you by Google

Safari – Apple’s web browser

Firefox – Open-source browser supported by the Mozilla Foundation

Internet Explorer – Microsoft’s browser

2. HTML & CSS


HTML is one of the first you should learn. Thanks to HTML, the web browsers know what
to show once they receive the request. If you want to better understand how HTML works,
you also need to know what CSS is.

CSS stands for Cascading Style Sheets and it describes how HTML elements are to be
displayed on the screen. If you browse enough tutorials, you’ll soon create CSS text
effects, page transitions, image hover effects, and more.

If you’re a complete beginner, this Essential HTML & CSS training by James Williamson will
help you to quickly get started with these technologies.

3. Web Development Frameworks


Web development frameworks are a starting point of items that a developer can use to
avoid doing the simple or mundane tasks, and instead get right to work.
Angular

Angular is one of the latest web technologies designed specifically for developing d ynamic
web applications. With this framework, you can easily create front-end based
applications without needing to use other frameworks or plugins.

The features include well-made templates, MVC architecture, code generation, code
splitting etc. All the expressions are like code snippets that enclosed within curly braces
and do not use any loops or conditional statements.

If you would like to start using Angular or to just quickly evaluate if this framework would
be the right solution for your projects, you can check out this 3-hour training, published in
June 2019 by Justin Schwartzenberger, a Google Developer Expert. This course covers
everything that’s necessary to start using Angular, from basic architecture, work with DOM,
data binding, routing, and components, to more advanced topics such as directives and
pipes.
Ruby on Rails

Ruby on Rails is a server-side website technology that makes app development much easier
and faster. The thing that really sets this framework apart is the reusability of the code as
well as some other cool features that will help you get the job done in no time.

Popular websites written with Ruby include Basecamp, Ask.fm, GitHub, 500px, and many
others.

Here is everything you need to know about Ruby on Rails.

If you would are interested in a more in-depth training on Ruby on Rails framework, this
10-hour course by Kevin Skoglund, a senior Ruby developer, might be just the right
resource to get started. It covers the complete learning cycle from the very fundame ntals to
more advanced topics such as Layouts, Partials, and View Helpers, giving quite a few
practical tasks in parallel.
YII

Yii is an open-source web application development framework built in PHP5. It is


performance-optimized and comes with a number of great tools for debugging and app
testing. Another plus is that it is pretty simple and easy to use.

Meteor JS

Meteor JS is written in Node.js and it makes it possible for you to create real-time web
applications for different platforms. The framework for creating simple websites for
personal use really stands out with Meteor JS.
This is an open-source isomorphic JavaScript web framework which also means that the
webpage loading time is significantly shorter. JavaScript stack also makes it possible to get
the same results with fewer lines of code than usual.

This online video course gives an interesting practical example of combining MeteorJS and
React to build a web app.

Express.js

Developed in Node.js, Express.js is a web app development network that is great for those
who need to develop apps and APIs as fast as possible. A lot of great features are provided
with the help of plugins.

This course provides a good insight into the advanced usage of Express.js in combination
with MongoDB and Mongoose and shows different ways of deploying an Express app and
running it in production.
Zend

Zend is an open-source framework based on PHP, focused on building more secure and
reliable web apps and services. It is one of the first enterprise-level MVC frameworks,
which came before the current superhits such as Laravel or Symfony, and many popular
PHP engines such as Magento were built in Zend.

Today Zend is still under active development, and even though it may be less popular than
its opensource siblings, it is a great solution for a large-scale PHP app.

Watch this short video course where different PHP MVC frameworks are compared so that
you could make a choice on your own.

Django
Django is one of the most popular frameworks written in Python and follows MVC
architecture. It makes the app development process much easier thanks to its simplicity.

Django simplifies using Python a lot and provides multiple tools that make a web app
developer’s life easier – e.g. an ORM, Models, Django admin, templates, etc. This 1.5-hour
video course can help any developer, even a beginner, to start developing Python/Django
apps in a couple of days.

Check out more popular Python frameworks.

Laravel

Laravel is a PHP development framework ideal for small websites. It comes with a number
of useful features including the MVC support, object-oriented libraries, Artisan,
authorization technique, database migration, etc. Currently, it is one of the most
community-supported and community-developed frameworks, and given that PHP has one
of the largest communities out there, Laravel is a great tool powering both small websites
and large-scale B2B web apps managing millions of transactions daily.

To get started with Laravel in less than 3 hours, watch this video course by Bernando
Pineda, a senior DevOps, and Engineer with 15+ years of software development experience.

It is one of our favorite PHP frameworks.

4. Programming Languages
As we explained before, since computers don’t use languages that are anything like human
languages, they need a different way to communicate. Here are some of the most popular
programming languages:
Javascript – used by all web browsers, Meteor, and lots of other frameworks

CoffeeScript – a “dialect” of JavaScript. It is viewed as simpler but it converts back into


JavaScript

Python – used by the Django framework as well as in the majority of mathematical


calculations

Ruby – used by the Ruby on Rails framework

PHP – used by WordPress to create those WYSIWYG editors that everyone is using now. It’s
also used by Facebook, Wikipedia, and other major sites

Go – newer language, built for speed

Swift – Apple’s newest programming language

Java – used by Android and a lot of desktop applications.

So let’s talk about the most popular ones in a bit more detail.

JavaScript

According to StackOverflow’s annual survey, JavaScript is the most popular programming


language with 62.5% of respondents claiming to use it.
It is one of the core web technologies and if you want to learn more about it, you can start
with this essential training that covers all the basics, working with functions and objects,
interacting with DOM, etc. This course is recent – from April 2019 – Javascript evolves
quickly, so it makes sure you leverage the newest language “perks” as you learn.

Ruby

The developers love Ruby – and for all the right reasons. Designed to be user-friendly and
really easy to use, it’s no wonder that this programming language is often called “ a
programmer’s best friend.”

What you can expect from Ruby is a shorter, readable code. Unfortunately, that sometimes
means lower efficiency compared to other programming languages – but it also means
higher productivity.

If you are a beginner in the web development world, Ruby would be a great choice for the
first programming language to learn. A well-written Ruby code can be almost as readable
as the sentence in plain English language.

But the real reason most people use Ruby is its popular framework — Ruby on Rails which
we mentioned earlier in the text. The great productivity achieved with Rails makes it
a common choice for startups who aim for a running start.
Elixir

Elixir appeared back in 2011 and gained popularity almost immediately. It was inspired
by Erlang, a language developed back in the ‘80s by Ericsson. Elixir’s author José Valim
himself said that he loved Erlang, but also noticed some things that could use a bit of
improvement.

Scala

Scala stands for Scalable Language, and is one of the many attempts to “rewrite Java” and it
is compiled to run on the Java Virtual Machine (JVM). It is safe to say this programming
language turned out to be quite a success taking into consideration that companies like
LinkedIn, Twitter, and The Guardian use it in their codebases. Scala is known to be a
complex language but also a language worth learning.
This essential 3-hour training may be a good way to start your journey with Scala.

5. Protocols
The instructions for how to pass information back and forth between computers and
devices are commonly known as protocols.

HTTP

Thanks to this protocol, each website can get to the browser. The protocol requests the
website from Google’s server and then receives a response with the HTML, CSS, and
JavaScript of the website.

DDP

Uses WebSockets to create a consistent connection between the client and the server. As a
result of that, you get website updates in real-time without having to refresh the browser.

REST

Used mostly for API’s, this protocol has standard methods like GET, POST, and PUT that let
information be exchanged between applications.

6. API

An API (application programming interface) allows other developers to use some of the
app’s functionality without sharing the code.
The endpoints are exposed by the developers while the API can control access with an API
key. Examples of well-made APIs are those created by Facebook, Twitter, and Google for
their web services.

7. Data formats

Data is stored in a structure called a data format.

JSON – JavaScript Object Notation is a syntax for storing and exchanging data (just like
XML). It is currently becoming the most popular data format out there.

XML – Predominantly used by Microsoft systems, it used to be the most popular data
format

CSV – is data formatted by commas; for example Excel data

8. Client (or Client-side)

Each user of an application is called a client. Clients can be computers, mobile devices,
tablets etc. Usually, multiple clients are interacting with the same app stored on a server.

9. Server (or Server-side)

The application code is usually stored on the server. The clients make requests to the
servers. The servers then respond to those requests after gathering the requested
information.

You might also like