IWT

Unit-1 Notes
WWW Concept:
The official description of the World-Wide Web (WWW, W3) is a "wide-area hypermedia
information retrieval initiative aiming to give universal access to a large universe of documents".
It is a way of viewing all the on-line information available on the Internet as a seamless,
browsable continuum. This section introduces the general concept of the World-Wide Web and
the basic elements in the model. The content of the section is as follows:
Basic World-Wide Web Model
Universal Resource Identifies
Hypertext Transfer Protocol
Hypertext Markup Language
Interactive World-Wide Web Model
Basic World-Wide Web Model
The basic idea behind the World-Wide Web is based on a client server application and hypertext
documents as illustrated in the figure below. The model is simplified in that it only contains
elements that exists within the World-Wide Web concept. Later the model will be expanded to a
generic resource accessing model.

The Client

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
The client is the user's interface to the Internet. Whatever type of service requested this interface
stays the same, so users do not need to understand the differences between the many different
access schemes in common use on the Internet. This principle is the same as is seen from other
popular applications such as Microsoft Windows, Machintosh etc. where the user is always
presented to the same GUI interface.
Uniform Resource Identifier URI
The user initiates a request by specifying a Uniform Resource Identifier or a "hyperlink". This
link can specify any accessible information or resource on the Internet as long as it can be
uniquely identified as an object. The word "Web" refers to the combination of accessible objects
and the links pointing to them throughout the Internet.
The Server
The server is responsible for handling the request sent from the client. This can either be a local
accessible resource or the server can request the resource from another server in which case the
first server temporarily turns into a client.
Hypertext Transport Protocol HTTP
The client sends of the user request to a WWW server using the Hypertext Transfer Protocol
(HTTP). This is a typical client-server application based on a stateless connection between the
client requesting the URI and the server handling the request.
Hypertext Markup Language HTML
On a successful request, a data object is returned from the server to the client. The object is
written in the Hypertext Markup Language (HTML) which is a hypertext language with the
possibility of containing hyperlinks that the user can follow.
The model basically reflects the first version of the World-Wide Web as it is described in the
HTTP Protocol version 0.9 and HTML version 1.0. However, the WWW specifications have
been rapidly changing during the last 3-4 years, even though the current model is still based on a
client-server approach. From being a HTML and HTTP based model, the World-Wide Web is
now capable of handling virtually any existing data format on the Internet using a large set of
access methods apart from HTTP such as FTP, Gopher, WAIS, Telnet etc. In other words, the
World-Wide Web represents a generic information exchange tool capable of accessing
information throughout the Internet. Though, before the more advanced model is presented, it is
necessary to get an overview of the basic elements in the WWW model mentioned above.

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
Universal Resource Identifies
In order to address a data object or more general, a resource, in the model above it is necessary to
define a name space that not only contains information about hosts but also about resources
available on each host. The World-Wide Web model defines Uniform Resource Identifiers or
URIs that specifies a syntax for encoding the names and addresses of data objects on the Internet
and how they can be accessed. The set of URIs covers

Universal Resource Identifier (URI)

A generic set of all addresses in the address space of all resources on the Internet. They describe
a hierarchical naming scheme that together with the HTTP protocol makes a significant
difference between the World-Wide Web model and other Internet access schemes such as FTP
that has a flat address space.
Uniform Resource Locator (URL)
The term "URI" has been introduced by the IETF and is a a general description of all URL that
are not persistent. In practice the URLs consist of the current set of Internet protocols supported
by the WWW, i.e, HTTP, FTP, Gopher, WAIS, etc., followed by a directory path, a file name,
and possibly a search directive.
Uniform Resource Name (URN)
However, the ultimate goal for URIs is to be a persistent naming scheme independent of the
mean of access, i.e., the protocol used and of the physical structure of resources on the specific
host. The only way to obtain this is to have a naming scheme like the Internet Domain Name
Service. URNs are currently under consideration in IETF but little is known about the status of
the research.
Uniform Resource Citation (URC)

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
This is meta information about a URI. They consist of pairs of attribute/value which can contain
information on the author, publisher etc. The URC are currently not used.
Hypertext Transfer Protocol
The Hypertext Transport Protocol (HTTP) is a generic stateless presentation layer protocol with
elements from other Internet presentation layer protocols. The HTTP protocol is built on a client-
server model where the client initiates a request and the server replies with a response.
The basic format of the HTTP protocol is based on the MIME Protocol with a set of HTTP
Headers possibly followed by a message body containing a data object in any 7-bit or 8-bit
accepted by the client. The client specifies what data format it can handle by having a list
of accept headers in the request.
The basic WWW-model indicates that the client initiates a request and the server responds by
sending a data object to the client. However, often the client wants to post a data object to the
server, e.g. to post a mail message to an email address, to a news group, or to create a new file on
the remote server. The HTTP protocol provides two methods for the client to transfer a data
object to the server. Though, the client is not guaranteed that the request can be fulfilled - even
on a successful return code. The action can at all times be cancelled by the responsible person of
the remote server.
One of the characteristics of the HTTP protocol is that it is a superset of the other Presentation
Layer supported by the WWW-model. This means that messages generated by other protocols
can be handled by the HTTP protocol by wrapping a set of HTTP/MIME headers around the
message. This is an essential feature for the concept of Proxy servers.
The current version 1.0 of the HTTP protocol is built on top of the TCP Protocol that is a
connection oriented protocol with a 3 way handshake connection establishment. This causes an
substantial overhead in a client-server oriented environment like the HTTP protocol. It would
therefore be an excessive optimization if the HTTP protocol was moved to a lighter Transport
Layer protocol such as the Transactional TCP Protocol which still provides a reliable stream
transport service.
Hypertext Markup Language
The Hypertext Markup language (HTML) is the users interface to create information on the
World-Wide Web. The description of the World-Wide Web has until now focused on the
technology that due to specifications and conventions provide the functionality necessary to

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
request and serve information across the Internet. HTML is defined to be the hypertext language
of communication which actually flows over the network. There is no requirement that files are
stored in HTML. Servers may store files in any other formats and then generate a HTML on the
fly upon a client request. This gives the possibility of having virtual documents instead of static
documents on rapidly changing information like weather reports etc. HTML can be used to
represent:
Hypertext news, mail, online documentation, and collaborative hypermedia
Menus and options
Database query results
Simple structured documents with inlined multi media elements like images, audio and movie
URI-Links to other resources on the Internet.
HTML is built on top of the International Standard ISO 8879 Standard Generalized Markup
Language (SGML). SGML is a system for defining structured document types and markup
languages to represent instances of the document types. That is, HTML is a Document Type
Definition (DTD) used on top of a SGML parser. Every SGML based document contains three
elements as illustrated in the figure:

HTML is now superseeded by HTML+ that is an enriched DTD with possibilities of handling
tables, math, images etc. Currently many browsers support a subset of the HTML+ specifications
in addition to the basic HTML features.

Overview

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
WWW stands for World Wide Web. A technical definition of the World Wide Web is : all the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
A broader definition comes from the organization that Web inventor Tim Berners-Lee helped
found, the World Wide Web Consortium (W3C).
The World Wide Web is the universe of network-accessible information, an embodiment of
human knowledge.
In simple terms, The World Wide Web is a way of exchanging information between computers
on the Internet, tying them together into a vast collection of interactive multimedia resources.
Internet and Web is not the same thing: Web uses internet to pass over the information.

WWW Operation
WWW works on client- server approach. Following steps explains how the web works:
User enters the URL of the web page in the address bar of web browser.
Then browser requests the Domain Name Server for the IP address corresponding to website.
After receiving IP address, browser sends the request for web page to the web server using
HTTP protocol which specifies the way the browser and web server communicates.
Then web server receives request using HTTP protocol and checks its search for the requested
web page. If found it returns it back to the web browser and close the HTTP connection.
Now the web browser receives the web page, It interprets it and display the contents of web page
in web browser’s window.

7 KEY FEATURES OF WEB 2.0

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
 Based on new ideas began to emerge around 2004 in Web -related technologies and Web site
services , a new term “web 2.0” is coined by Tim O’Reilly.
The following 7 are the key features of web 2.0
1. Folksonomy : Free Classification of Information
2. Rich User Experience
3. User as a Contributor
4. Long Tail
5. User Participation
6. Basic Trust
7. Dispersion

FOLKSONOMY
Traditional Web like Yahoo Directory and DMOZ uses a pre-defined classification of
Information like category & sub category. On the other hand Web 2.0 without sticking to the
existing framework of classification , allows user create free classification/ arrangement of
information. This is also known as Social tagging. T
For example , the photo sharing site Flickr and Social Bookmarking of del.icio.us

RICH USER EXPERIENCE

Traditional web are built with HTML and CSS、CGI and had been offered as a static page . On
the other hand Web 2.0 uses Ajax (Asynchronous JavaScript + XML), HTML5 (for interactive
video and audio) presenting dynamic , rich user experience to users. These technologies
substitute old fashioned SWF Flash media and provide webmasters with ability to insert dynamic
video right into HTML code. If everything is done right, videos will work in any web-browser
and on any device, for example with the help of this video converter with HTML5 support.
Since Web 2.0 doesn’t limit webmasters with tools, modern user experience becomes reacher
that ever.
For example, Google Provided Google Maps and Google Suggest.

USER AS CONTRIBUTOR

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
In tradition web, the information is often provided by the site owner and the user is always the
receiver. The information model was One Way . On the other hand Web 2.0 user also contributes
to the content by means of Evaluation, Review & Commenting.
The typical example is the Amazon.com – customer review section & Google’s Page Rank
mechanism

LONG TAIL
The traditional web was like a retail business the product is sold directly to user and the revenue
generated. But in web 2.0 the niche product is not sold directly but offered as a service on
demand basis and income is generated as monthly fee and pay per consumption.
The typical example is sales force CRM services and Google Apps

USER PARTICIPATION
In traditional web the contents are solely provider by the web site owner /company, but in web
2.0 the users participate in content sourcing. This is also known as Crowd sourcing.
The typical examples are Wikipedia & You Tube.

BASIC TRUST
In traditional web the contents are protected under Intellectual Property Rights but on the other
hand, in web 2.0 the contents are made available to share, reuse, redistribute and edit.
The typical examples Wikipedia & Creative Common

DISPERSION
In traditional web, the contents were delivered as direct site to home. But in web 2.0, the content
delivery uses multiple channel include file sharing & permalinks.
The typical examples are Bit Torrent and Mashup

Concepts of Effective Web Design:

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
1. Purpose: information, entertainment, some type of interaction, or to transact with your
business
2. Communication: communicate clearly, and make your information easy to read and digest.
3. Less is more/ Simple: Typography
(Font size, heading-subheading, faces etc) colors, use of whitespace, etc
4. Use of Images
5. Navigation: ‘three click rule’ which means users will be able to find the information they are
looking for within three clicks.
6. Grid based layouts: arrange content into sections, columns and boxes that line up and feel
balanced, which leads to a better looking website design.
7. “F” Pattern design
8. Load time
9. Device friendly: Mobile etc
10. Consistency: your fonts, sizes, headings, sub-headings, and button styles must be the same
throughout the website.

Challenges in Wed designing:-

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
User Interface and User Experience
Scalability: Service-oriented architecture (SOA) can help in improving scalability when more
and more servers are added.
Performance : Some of the performance issues are Poorly written code, Un-Optimized
Databases, Unmanaged Growth of data, Traffic spikes, Poor load distribution, Default
configuration, Troublesome third party services, etc.
Knowledge of Framework and Platforms
Security

Web Design issues:

Long download times: Research shows that after 7 ‐10 seconds, users lose interest.
• Dead links: 60% of users recently surveyed cited "linkrot" as one o f the biggest problems on
the web. • Awkward navigation: Incorporate the latest techniques for helping your users use your
site with ease.
• Orphan pages t hat don't indicate w hose site you're on
• Multimedia overkill: Just because you can doesn't always mean you should...How
should...How much is too much?
• Aggressive, non ‐stop animation.
• Long, scrolling pages: Did you know that the majority of users totally miss content not
immediately visible?

Problems in website Design:

There's no clear path.
Outdated design
Overused stock images and icons
Your site isn't optimized for mobile
Too many textures and colors

What is the “Look and Feel” of a Website?

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
In layman’s terms, the “look and feel” of a website is the initial design (not development) of a
website which give you, the client a visual of how the entire website will look before it is
developed.
The “look” is defined by the following components of your website:
Colour palette: A website color palette is the combination of colors your choose for your site’s
design. You’ll stick to using these colors throughout your whole site.
Imagery: Imagery is a key part of design whether print or digital. The image usage helps users
and viewers relate to the brand, and adds a human element to their experience
Layout: A website layout is a pattern (or framework) that defines a website's structure. It has the
role of structuring the information present on a site both for the website's owner and for users.
Font styles and choices: Typography seeks to create a greater meaning by thoughtful and
deliberate selection font, size, color, layout, alignment, and other factors that affect the design of
type on a page.
Overall styling & spacing

The “feel” is determined by these characteristics:

The movement and dynamic components like dropdown menus, buttons, forms, portfolios,
galleries, testimonials,
Video
Responsiveness (for media devices including Ipad + tablet)

Page layout and linking in web design

Page layout refers to the arrangement of text, images, and other objects on a page. The term was
initially used in desktop publishing (DTP), but is now commonly used to describe the layout of
webpages as well.
The page layout of a printed or electronic document encompasses all elements of the page. This
includes the page margins, text blocks, images, object padding, and any grids or templates used
to define positions of objects on the page.
Web development programs, such as Adobe Dreamweaver and Microsoft Expression Studio
allow Web developers to create similar page layouts designed specifically for the Web.

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
Sitemap is a XML file that holds complete list of page URLs for a site along with other
additional details (metadata of each URLs, when it was last updated etc.).
It ‘s primary purpose is to inform search engines about pages on your sites that are available for
crawling.
There are two types of Sitemaps:
XML Sitemaps
They are for the benefits of Google or search engine crawlers. It is an easy way to help robots to
crawl all listed web-pages and index them within search engine.
They have a unique structure that holds list of URL’s of pages plus some additional information
such as metadata of page URLs, how often content of pages updated, last updated on and general
detail of pages in relation to each other.
2. HTML Sitemaps
HTML sitemap is intended for front-end users of the website. It is a general overview of the
website pages. It allow users to easily navigate a website.
Benefits/Purposes Of Sitemap
Important aspect of SEO
Effect ranking on search engines: If Google spiders or bots are not able to crawl the site, it will
not get indexed, and the content will not get ranked in search engines results pages.
List all pages of your website. This could include website pages that aren't otherwise
discoverable by search engines.
Give priority information about pages to search engines. XML Sitemap has an optional tag for
the priority of the pages. This is an indication of how important a given page is relevant to all the
others on the site. This helps search engines to order the crawling of the listed web-pages based
on priority information.
Additional details to help web-crawling in optimal way. It has two optional tags ( lastmod and
changefreq) that pass more information about the pages. “Lastmod" tells when the page last
changed, and changefreq indicates how often the website page is likely to change.

Planning a Website
1. Set your purpose and goals.
2. Create a budget.

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
3. Assign roles.
4. Create a content strategy.
5. Structure your website.
6. Create a mock-up.
7. Start designing.
8. Test it out.
9. Maintain your site.

Web publishing is the process of publishing original content on the Internet.

The process includes building and uploading websites, updating the associated
webpages, and posting content to these webpages online. Web publishing comprises of
personal, business, and community websites in addition to e-books and blogs.
The content meant for web publishing can include text, videos, digital images, artwork,
and other forms of media.
Publishers must possess a web server, a web publishing software, and an Internet
connection to carry out web publishing.
Web publishing is also known as online publishing.

Website publishing is the process of uploading content on the internet. It includes:

 uploading files
 updating web pages
 posting blogs
Website is published by uploading files on the remote server which is provided by the
hosting company.
Prerequisites for Website Publishing
In order to publish your site, you need the following things:
 Web development software
 Internet Connection
 Web Server

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
Navigation menus are the key to finding what we are looking for on a website. Without
a navigation menu that meets our expectations, a website will most likely not be
effective.
1. Position
pattern of the letter F.
Meet your user’s expectations and place your navigation either at the top or on the left
hand side of your website and don’t ever place it below the fold.
On very top
Twitter developers use a very clean navigation that it positioned at the very top of the
site.
Between header & content
Ngen works use a classic navigation menu that is positioned on top of the site between
the header and the content area.
On the left
Divwrap placed their main navigation menu on the left hand side of their site.
2. Simplicity
The key to an effective navigation menu is to keep it simple. No matter how many
content categories you have and how many pages you might need to link together, don’t
ask too much from your users. Depending on the complexity of your website, this can
be the most tricky part of your whole design.
It is very important to group content items and define categories in a way that makes
sense to your users.
3. Minimal design

Apple is probably the most classic example for minimal design. Their navigation menu is
very clean and clear and nothing distracts the user from the different content categories.
4. Small number of categories

BBC has as one of the world’s leading news sites an enormous amount of information
targeted at users with different interests from all over the world. Still, they manage to

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
wrap all this information into meaningful categories, displaying only the most popular
seven categories in their navigation menu. Less popular information is also easy to find
under the menu item More.

5. Tabbed navigation
Filament group use a tabbed navigation, which is a great choice for the little number of
pages. The navigation menu is self explaining and the user immediately sees that they
can choose between four different pages to find the content they are looking for.
6. Wording
After the information architecture has been defined and all content has been structured
in a logical way, wording plays an important role for the effectiveness of your navigation
menu.
Try to use wording that your users are familiar with. Don’t invent creative categories just
for the sake of being creative. Choose wording that is simple and to the point.
Classic wording
Threadbird use common and very clear wording for their navigation bar. The different
categories, such as Service, Pricing, and Portfolio are self explaining and the user users
immediately knows what to expect behind them.
Wording with context
Epic adds context to the wording they use for the navigation bar. They embed the word
in a whole sentence, which even makes the rather abstract word Working” clear as it
becomes *What we are working on.
Personal wording
Games for her by you don’t use classic wording for their navigation menu, but through
putting themselves in the position of the users, their navigation is still very clear. They
use the kind of questions the user would have when looking for the different categories.
This makes the navigation not only clear, but also very personal.
7. Color
Colors can be used in different ways to make your navigation menu more effective and
easy to use. You can for example highlight active menu items or build a color scheme

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
for different content categories. This will help your users identify and recognize the
different areas of your website. Besides, colors are also very important to smoothly
integrate your navigation menu in the rest of your design.
8. Highlights
A modern eden use the design’s basic color to highlight both the currently selected page
and any other menu item on hover. These highlights give a very visual and clear
feedback of where on the page the user is and what other options there are.
Categories

CSS-Tricks use a very clear and inviting color scheme for their navigation menu. As the
user hovers over the different content categories, the menu item changes its color.
Every category has its own color which is also displayed when the user visits that page.
This color scheme is very clear and appealing.
9. Integration
Appstorm sticks with a simple black and white navigation menu to perfectly match the
rest of the site design. Through the big icons and the prominent position, the navigation
is still very easy to find. The colors of the hover over effect match the colors of the
different categories. As the category changes, the whole color scheme changes.
10. Icons
Last but not least there are icons that help to make a navigation bar more usable and
effective, but also more personal and fun to use. Compared with word links, icons are
visual, which makes it easier for us to remember them. Recognition of different content
categories lets us browse a website more efficiently, especially if we are not visiting for
the first time.
When you use icons for your own navigation menu, make sure to choose clear and
meaningful icons, make their style match the rest of your design, and add personality to
your site.
11. Clarity

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE
1st Web designer use icons to visualize and illustrate their different content categories.
The icons they chose are very specific and meaningful and add to the value of the
navigation menu as they represent the different categories and help users to find what
they are looking for.
12. Consistent style
Amazee Labs have a very characteristic style for their whole website. For their navigation
menu they use icons that perfectly match the style of the site. The icons help to draw
attention to the navigation bar and at the same time they perfectly integrate the same
into the site.
13. Personality
Tumblr uses very visual, colorful and meaningful icons in their menu. Tumblr is a social
service that enables members to share different digital content. Every kind of content
has its own icon. The icons are all wrapped in an abstract text bubble, which reminds
the user of an actual conversation and makes them very personal.

Dept. of CSE, PIEMR, Indore Prepared By: Er. Ankit Chopra, Asst. Prof., CSE