CS-504(A) Internet & Web Technology

Unit-1

HTTP Introduction

HTTP
o HTTP stands for HyperText Transfer Protocol.
o It is a protocol used to access the data on the World Wide Web (www).
o The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
o This protocol is known as HyperText Transfer Protocol because of its efficiency that
allows us to use in a hypertext environment where there are rapid jumps from one
document to another document.
o HTTP is similar to the FTP as it also transfers the files from one host to another host.
But, HTTP is simpler than FTP as HTTP uses only one connection, i.e., no control
connection to transfer the files.
o HTTP is used to carry the data in the form of MIME-like format.
o HTTP is similar to SMTP as the data is transferred between client and server. The HTTP
differs from the SMTP in the way the messages are sent from the client to the server
and from server to the client. SMTP messages are stored and forwarded while HTTP
messages are delivered immediately.

Features of HTTP:

o Connectionless protocol: HTTP is a connectionless protocol. HTTP client initiates a

request and waits for a response from the server. When the server receives the
request, the server processes the request and sends back the response to the HTTP
client after which the client disconnects the connection. The connection between client
and server exist only during the current request and response time only.
o Media independent: HTTP protocol is a media independent as data can be sent as long
as both the client and server know how to handle the data content. It is required for
both the client and server to specify the content type in MIME-type header.
 o Stateless: HTTP is a stateless protocol as both the client and server know each other
only during the current request. Due to this nature of the protocol, both the client and
server do not retain the information between various requests of the web pages.

HTTP Transactions

The above figure shows the HTTP transaction between client and server. The client initiates a
transaction by sending a request message to the server. The server replies to the request
message by sending a response message.

Messages

HTTP messages are of two types: request and response. Both the message types follow the
same message format.

Request Message: The request message is sent by the client that consists of a request line,
headers, and sometimes a body.

Response Message: The response message is sent by the server to the client that consists of a
status line, headers, and sometimes a body.

Uniform Resource Locator (URL)

o A client that wants to access the document in an internet needs an address and to
facilitate the access of documents, the HTTP uses the concept of Uniform Resource
Locator (URL).
o The Uniform Resource Locator (URL) is a standard way of specifying any kind of
information on the internet.
o The URL defines four parts: method, host computer, port, and path.
 o Method: The method is the protocol used to retrieve the document from a server. For
example, HTTP.
o Host: The host is the computer where the information is stored, and the computer is
given an alias name. Web pages are mainly stored in the computers and the computers
are given an alias name that begins with the characters "www". This field is not
mandatory.
o Port: The URL can also contain the port number of the server, but it's an optional field.
If the port number is included, then it must come between the host and path and it
should be separated from the host by a colon.
o Path: Path is the pathname of the file where the information is stored. The path itself
contain slashes that separate the directories from the subdirectories and files.

Web Server

Web server is a computer where the web content is stored. Basically web server is used to
host the web sites but there exists other web servers also such as gaming, storage, FTP,
email etc.
Web site is collection of web pages whileweb server is a software that respond to the request
for web resources.

Web Server Working

Web server respond to the client request in either of the following two ways:
 Sending the file to the client associated with the requested URL.
 Generating response by invoking a script and communicating with database
Key Points
 When client sends request for a web page, the web server search for the requested
page if requested page is found then it will send it to client with an HTTP response.
 If the requested web page is not found, web server will the send an HTTP
response:Error 404 Not found.
 If client has requested for some other resources then the web server will contact to
the application server and data store to construct the HTTP response.

Architecture

Web Server Architecture follows the following two approaches:

1. Concurrent Approach
2. Single-Process-Event-Driven Approach.

Concurrent Approach

Concurrent approach allows the web server to handle multiple client requests at the same
time. It can be achieved by following methods:
 Multi-process
 Multi-threaded
  Hybrid method.

Multi-processing

In this a single process (parent process) initiates several single-threaded child processes and
distribute incoming requests to these child processes. Each of the child processes are
responsible for handling single request.
It is the responsibility of parent process to monitor the load and decide if processes should
be killed or forked.

Multi-threaded

Unlike Multi-process, it creates multiple single-threaded process.

Hybrid

It is combination of above two approaches. In this approach multiple process are created
and each process initiates multiple threads. Each of the threads handles one connection.
Using multiple threads in single process results in less load on system resources.

Examples

Following table describes the most leading web servers available today:

S.N Web Server Descriptino

.

1 Apache HTTP Server

This is the most popular web server in the world developed by the Apache
Software Foundation. Apache web server is an open source software and can
be installed on almost all operating systems including Linux, UNIX, Windows,
FreeBSD, Mac OS X and more. About 60% of the web server machines run the
Apache Web Server.

2. Internet Information Services (IIS)

The Internet Information Server (IIS) is a high performance Web Server from
Microsoft. This web server runs on Windows NT/2000 and 2003 platforms (and
 may be on upcoming new Windows version also). IIS comes bundled with
Windows NT/2000 and 2003; Because IIS is tightly integrated with the
operating system so it is relatively easy to administer it.

3. Lighttpd
The lighttpd, pronounced lighty is also a free web server that is distributed
with the FreeBSD operating system. This open source web server is fast,
secure and consumes much less CPU power. Lighttpd can also run on
Windows, Mac OS X, Linux and Solaris operating systems.

4. Sun Java System Web Server

This web server from Sun Microsystems is suited for medium and large web
sites. Though the server is free it is not open source. It however, runs on
Windows, Linux and UNIX platforms. The Sun Java System web server supports
various languages, scripts and technologies required for Web 2.0 such as JSP,
Java Servlets, PHP, Perl, Python, and Ruby on Rails, ASP and Coldfusion etc.

5. Jigsaw Server
Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open
source and free and can run on various platforms like Linux, UNIX, Windows,
and Mac OS X Free BSD etc. Jigsaw has been written in Java and can run CGI
scripts and PHP programs.

Introduction To Web 2.0

What Is Web 2.0?

Web 2.0, or participative/participatory and social web, “refers to websites that emphasize
user-generated content, ease of use, participatory culture, and interoperability for end users.”
Web 2.0 is a relatively new term, having only come into popular use about twenty years ago,
in 1999. It was first coined by Darcy DiNucci and then became popularized by Tim O’Reilly and
Dale Doughtery at a conference in 2004. It’s important to note that Web 2.0 frameworks only
deal with the design and use of websites, without placing technical demands on designers.

Characteristics Of Web 2.0

One of the main characteristics of a Web 2.0 site is that users are encouraged and invited to
contribute content, instead of simply reading what’s already there. An example of a Web 2.0
site is Medium, a blogging platform where users contribute articles that they have written,
as well as interact with content that other users have shared. Social networking sites, such as
Facebook and Instagram, are also great examples of Web 2.0.
However, this open contribution forum can lead to internet trolls who leave spam comments
or leave nasty comments on the work contributed by others. When people say “don’t read the
comments,” it’s often best to heed that advice. The comment sections, particularly on news
forums like The New York Times or The Washington Post, can get especially nasty and the
trolls are often out in full force. These trolls prevent important discussion from happening
because people who have something to contribute to the conversation are often afraid to post
for fear of being trolled or spammed.

Other key features of Web 2.0 include:

Folksonomy: a way to classify information, such as through tagging photos, websites, or links;
tagging enables users to find information in an organized

Rich user experience: dynamic, interactive content (for example, a user can click on an image
of a plant to get more information about that plant — i.e. growth conditions, nutrient
requirements, and more)

User participation: helps with the flow of information between the user and the owner of a
certain website (for example, Wikipedia allows users to create new pages and edit existing
pages to keep information up to date)

Software as a Service (Saas): sites classified as Web 2.0 use APIs for automated usage

Mass participation: we have nearly universal web access that leads to differentiation of
concerns, from a traditional internet user to a wider variety of users
Concepts Of Web 2.0

Web 2.0 might sound complex and overwhelming, but it is easily broken down into three
technologies: Rich internet application, web-oriented architecture, and social web. We’ll
explain each of these in a little more depth later on in this section. Because of these
technologies, Web 2.0 combines client and server side software to “provide users with
information storage, creation, and dissemination capabilities. None of these things were
available in Web 1.0.

First, rich internet application is defined as the user experience from desktop (or laptop) to
browser, from both a graphics standpoint and an interactivity point of view.

Second, web-oriented architecture relates to the functionality of Web 2.0 applications to

leverage a much richer set of applications. An example of web-oriented architecture is RSS
feeds, which is a method of aggregating information, such as a blog or podcast feed.

Third, social web works to make the end user feel like they are a part of the community. This
sense of community can be accomplished via social networking sites like Facebook and
Instagram, where users interact with each other, or via the comment sections on news sites,
where users can respond to articles that have been posted, creating discussion among all users
of the site.

Web 2.0 has a few other features and techniques, known as SLATES, a term that was coined by
Andrew McAfee. SLATES stands for Search, Links to other websites, Authoring, Tags,
Extensions, and Signals. Search refers to finding content via keyword search, while Links to
other websites refers to connecting information sources together via the Web model.
Authoring refers to the collaborative nature of people bringing their work together, as well as
comment systems that allow people to share their viewpoints. Tags refers to the
categorization of information, via one or two word phrases, that aids in searching for specific
keywords to find information. Extensions are used to make the Web an application platform
and document server all in one. Examples of extensions include Adobe Reader, QuickTime,
and Windows Media. Finally, Signals refers to the use of extension technology, such as an RSS
feed.

Concept of Effective Web Designl

Web designing has direct link to visual aspect of a web site. Effective web design is necessary
to communicate ideas effectively.

Web desinging is subset of web development. However these terms are used
interchangeably.
Key Points
Design Plan should include the following:
 Details about information architecture.
 Planned structure of site.
  A site map of pages

Wireframe

Wireframe refers to a visual guide to appearance of web pages. It helps to define structre of

web site, linking between web pages and layout of visual elements.
Following things are included in a wireframe:
 Boxes of primary graphical elements
 Placement of headlines and sub headings
 Simple layout structure
 Calls to action
 Text blocks
Wireframe can be created using program like Visio but you can also use a pen and paper.

Web Designing Tools

Here is the list of tools that can be used to make effective web designs:
Coda 2
Coda 2 is a powerful web development & designing tool, comes with better user interface,
text editing, file management, clips, sites, design and better Mysql support.OmniGraffle
OmmniGraffle is mainly used for wireframing. The downside of this tool is that It doesnot
have interactive prototyping and It is available only for Mac.Pen and Paper
Pen and paper can be used to draw the appearance of the how the web site will look like.Vim
Vim is great web desiging tool.It supports full customizable auto-intending of code, multiple
buffers for storing cut/copied code, and recording of actions for automated repetition.
S.N Tool Description
.

1. Photoshop CC
This is a great web designing tool provided by Adobe. The latest Photoshop CC
2014 supports many new features such as smart objects, layer comps, smart
guides, Typekit integration, font search, and workflow enhancements.
2. Illustrator CC
Illustrator CC is also a web designing tool comes with powerful features like
AutoCad libraries, white overprint, fill and stroke proxy swap for text,
automatic corner generation, unembed images and touch type tools etc.

3.

4.

5. Sublime Text
Sublime Text is a source code editor with Python application programming
interface. It's functionality can be extended using plugins.

6.

7.

8. Imageoptim
It is basically used for optimizing images on a website in order to load them
faster by finding best compression parameters and by removing unnecessary
comments.

9. Sketch 3
Sketch 3 is a web desiging tool developed specifically for designing interfaces,
websites, icons etc.

10. Heroku
It is also a great web development tool which supports Ruby, Node.js, Python,
java and PHP.

11. Axure
 It supports prototyping, documentation, and wireframing tools for making
interactive website design.

12. Hype 2
The Hype 2 offers: Easiest way to Animate & add interactivity, Hardness the
power of HTML5, Mobile responsiveness, and WYSIWYG features.

13. Image Alpha

This tool helps to reduce file sizes of 24-bit PNG files. It does so by applying
lossy compression and convert it to PNG8+alpha format which more efficient.

14. Hammer
This tool is suitable for non programmers and good only for small projects.

15. JPEGmini Lite

It is an image optimizing tool and supports photos in any resolution up to 28
Megapixels.

16. BugHerd
This tool helps to see how the projects is going and what everyone is working
on. It also helps to identify issues in development.

Web Page Anatomy

A web site includes the following components:

Containing Block

Container can be in the form of page’s body tag, an all containing div tag. Without container
there would be no place to put the contents of a web page.

Logo
Logo refers to the identity of a website and is used across a company’s various forms of
marketing such as business cards, letterhead, brouchers and so on.

Naviagation

The site’s navigation system should be easy to find and use. Oftenly the anvigation is placed
rigth at the top of the page.

Content

The content on a web site should be relevant to the purpose of the web site.

Footer

Footer is located at the bottom of the page. It usually contains copyright, contract and legal
information as well as few links to the main sections of the site.

Whitespace

It is also called as negative space and refers to any area of page that is not covered by type
or illustrations.
Web design Mistakes

One should be aware of the following common mistakes should always keep in mind:
 Website not working in any other browser other internet explorer.
 Using cutting edge technology for no good reason
 Sound or video that starts automatically
 Hidden or disguised navigation
 100% flash content.
• The common issues that is portable on different browsers, attractive in terms of colors
and graphics, rich in contents, easy to read and navigate and downloads faster.

• Browser and operating systems

 The different browsers and their versions and HTML version greatly affect the
way a page is rendered.
  Different browsers sometimes interpret same HTML tag in different way.
 The supports for different tags also vary across the different browsers and their
versions.
 The web technology is moving from HTML to XHTML so older versions of a
browser may not support recent tags and features.
 The browser compatibility is a serious issue to make web pages portable on the
different browsers with different versions as old browser does not support CSS.
 To make web page portable, test it on different browsers on different operating
systems and use development tools to add special features supported by
majority web browsers.
 The best way to avoid these problems is to follow the standards and use the
validation rules of the W3C to validate the code.
• Bandwidth and cache
 Users have different connection speed, i.e. bandwidth.
 To access the web sites, connection speed plays an important role in designing
web pages.
 If user has low bandwidth connection and a web page contains too many images,
it takes more time to download.
 While designing a web page, a developer has to consider the low speed users.
 High‐speed with broadband technology has solved this problem. With high‐speed
connection, more
attractive graphics can be used to design visually attractive pages.
 Browser provides temporary memory called cache to store the graphics.
 When user gives the URL of the web page for the first time, HTML file together with all
the graphics files referred in a page is downloaded and displayed.
 At the same time, the images downloaded are also stored in cache area of
browser for a particular time as per user’s preference.
 When next time the same page is visited, the browser gets only HTML file and uses
the images from the cache which increases the download speed significantly.
• Display Resolution
 This is important factor affecting web page design, as we don’t have any control
on display resolution of the monitors on which user views web pages.
 Resolution is measured in terms of pixels and common resolutions are 800*600
and 1024*786.
 Make flexible design using HTML table to fit into different resolutions, Web pages
 are divided into three columns with middle column having variable width
depending on the resolution of monitor on which page is viewed.
 When a page is seen on print media and screen media, it differs in colors due to
different nature of both.
 So, color combination should be chosen accordingly.
• Look and Feel
 It decides the overall appearance of the web site.
 It includes all the design aspects such as theme, font, graphics, visual structure,
navigation etc.
 Theme
 Theme emphasizes on the combination of design such that all pages of
the web site hold together and give the feeling of a single unitTheme
gives the feeling to the user that they are on the same web site while
navigate through various pages.
 Theme should reflect the objective of the organization and express the
message of the organization.
 Fonts, Graphics and colors
 These are important from both scanning and reading point of view as
they express the structure and emotion.
 Consider the following points:
 Different fonts have different readability and it directly affects the user
psychology.
 Height and width of the same character is different in different font.
This affects line endings and paragraph boundaries.
 Maintain regularity in using the font type and size.
 Don’t use too many fonts with too many sizes.
 Select few fonts and use them with different sizes and modes (bold, italics
and underline) or headers, titles and text.
 Use of CSS helps in maintaining consistency.
 Consider availability of fonts on visitor’s machine. If the font used in
web page is not installed on visitor’s machine, browser uses default
font, Times New Roman.
 Graphics make the web site attractive and convey lots of information;
including images, charts and many others.
  Different file formats support different levels of comparison and other
features. JPG, GIF,
PNG are popular image formats
 Too many graphics or images with larger sizes reduce the download
speed.
 So, use limited graphics with smaller size or in compressed format.
 Colors are part of everybody’s life and web sites are not exceptions.
 Web site with good content but improper color scheme does not attract
viewers and hence it fails.
 So, color scheme that suits web site theme, content, and liking of the target
audiences plays critical role.
 For the graphic and color schemes, help of graphics and art designers is
required to give the
web site commercial and professional touch.
 Presentations and access
 Web sites are designed to provide contents online to the various groups
of visitors having different reading habits and expectations.
 A clear presentation helps in accessing the desired information quickly and
easily without any problem.
• Page layout and linking
 Page layout defines the visual structure of the page and divides the page area into
different parts to present the information of varying importance.
 So, the visitor can view content easily and find necessary details.
 HTML table element can be used to design the grid‐based page layouts.
Complex layouts can be designed with nested tables and CSS.

 Page layout is also called the page template. Readymade templates are also
available on the internet which can be directly used to design pages quickly.
 Once the page layouts are prepared, they need to link together to provide the
navigation paths
 consistently. So, those users can find desired information quickly and easily.
• Locating information
 Web page is divided into five major areas such as center, top, right, bottom and
left.
 According to user viewing patterns, first major area of importance is the center,
then top, right, bottom and left in this particular order.
 Put most important information in the center to get the immediate attention of
the user.
 Most of the well designed web sites use left side for providing links to different
items or sections in form of menu.
 Top is used for displaying logo and title as well as flashing news links or at
many times advertisement.
 Right side is used for links to other important information.
 Bottom is used for quick links to important sections or to provide copyright
information.
• Make Design User‐Centric
 It is very difficult for web developer to predict the exact behavior of the web
site users.
ƒ But idea of general behavior of common user helps in making design of the web
site user centric.
 Users either scan the information on the web page to find the section of their
interest or read the information to get the details.
 People scan TV screen I circular fashion in clockwise direction. This property can be
used to provide
 the links to different
 sections of web site on a home page
 For articles and tutorials divide into sections, providing the table of
contents greatly helps users in quickly accessing the desired part of
 tutorial.
 Web pages are linked together to provide non‐sequential but quick
reading. It is sometimes
 necessary to highlight the words in a paragraph as links to provide the links
to the pages giving detail meaning of the word.
 Some of the web sites also provide links to the related topics at the end
of the web page describing
 a topic. This provides user with facility to read the related information to
get more clearly.
 Sitemap
 Some web sites are too complex as there are a large number of sections
and each section contains many pages. It becomes difficult for a visitor to
quickly move from one part to another.
 To make this simple, keep hierarchy of information to few levels or
provide navigation bar on each
 page to jump directly to a particular section.
 Another solution is to provide the sitemap including links to each section
and their pages directly.
 Sitemap gives the organization of contents of a web site graphically.
 At any time user can use ‘sitemap’ link from the current page and using the
links on it, the user can quickly select the desired content.
Bowser compatibility issue and its possible solution.
 If your website or application is tied to specific browser and doesn’t
render or operate correctly on user’s browser, it negatively affects
your organization image and brand.
 So your application should be created such that it doesn’t face any
compatibility issue.
 The Browser compatibility issue
 HTML tags :
• The different browser and their different version
greatly affect the way a page is rendered, as different
browsers sometimes interpret same HTML tag in a
different way.
• Different version of HTML also supports different sets
of tags and support for different tags
• also varies across the different browsers and their
version.
 CSS :
• If your page is designed with Cascading Style Sheet
(CSS) and if the user browser doesn’t support CSS,
the page looks very different.
 Margins and Border Inconsistencies:
• Display of Margins and Border may look different on
different browser.
 Selection of Font:
• Some browser does not support all fonts.
 The Browser compatibility Solution:
 The best way to avoid these problems is to follow the
Standards.
 Use the validation rules of W3C to validate your code.
 To make Web page portable, test it on different browsers.
 Use development tool to add special features to your pages
supported by majority browsers.