V-Semester

Open Elective CS- 504 (A)

Internet and Web Technology

UNIT 01
Introduction: Concept of WWW, Internet and WWW, HTTP Protocol : Request
and Response, Web browser and Web servers, Features of Web 2.0 Web Design:
Concepts of effective web design, Web design issues including Browser,
Bandwidth and Cache, Display resolution, Look and Feel of the Web site, Page
Layout and linking, User centric design, Sitemap, Planning and publishing
website, Designing effective navigation.

August 2, 2019 1
 INTRODUCTION TO THE INTERNET

The Internet or “Net” (network of networks) is the largest

computer network in the world that connect s billions of
computer users. The word internet comes from combination
between “interconnection” and “Network”. Network is a
collection of computers and devices connected via
communication channels and transmission media allow to
share resources (hardware, software, data information).
Generally nobody own internet.

The vast collection of computer networks which form and act

as a single huge networks for transport of data and messages
across distances which can be anywhere from the same office
to anywhere in the world

August 2, 2019 2
ARPA – Advanced Research Project Agency.
1969 January 2 – started an experimental Computer Network.
Concept – No Server, but equal importance/participation to
every computer in the Network. Even if, one or two node
destroyed that will not affect the Network.

In 1982 the word internet started.

1986: First “freenet” created in Case Western Reserve
University
1991: US government allowed business agencies to connect to
internet.
Now all peoples can connect to internet and improve their life
and work quality.
The internet support various aspects in our life.

Vinton Cerf

Father of Internet
Co-designer of the TCP/IP networking protocol.

August 2, 2019 3
 HOW TO CONNECT TO INTERNET

Internet Services
 WWW Webpage / Homepage
 Web Publishing
 Web browser
 Search Engine
 Protocol
 Internet protocol
 DNS
 HTTP
 URL
 HTML
 ISP
 E-mail
 Newsgroup
 Video conferencing
 FTP
 Telnet
 Forum

August 2, 2019 4
 WWW
The World Wide Web, commonly known as the Web, is a system
of interlinked hypertext/hypermedia documents accessed via
the Internet. Hypertext is text displayed on a computer or
other electronic device with references to other text that the
reader can immediately access, usually by a mous e click or key
press sequence. Hypermedia is used as a logical extension of
the term hypertext in which graphics, audio, video, plain text
and hyperlinks intertwine to create a generally non - linear
medium of information. Creator: Timm Berners-Lee, 1989.

Tim Berners-Lee
Father of W W W
Invented WWW while working at CERN, the European Particle
Physics Laboratory

August 2, 2019 5
 Difference b/w the Web and Internet

Internet = collection of networks that connect millions of businesses,

government agencies, educational institutions, and individuals.

WWW = the means we use to access information over the internet –

Different communication protocols – Special link (hyperlink) that
enable users to jump from one place to another on the web.

Web Page
 A web page is a document or resource of information that
is suitable for the World Wide Web and can be accessed
through a web browser and displayed on a monitor or
mobile device.
 This information is usually in HTML or XHTML format, and
may provide navigation to other webpages via hypertext
links.
 It can contain text, graphics, audio, video and has built - in
connection or links to other web documents.
 A web page has a unique address called a Uniform
Resource Locator (URL).

August 2, 2019 6
 Web Browser
 A software application for retrieving, presenting, and
traversing information resources on the World Wide Web.
 It allows to locate, view, and navigate the web.
 It can have a Graphical User Interface, meaning they can
display pictures (graphics) in addition to text and other
forms of multimedia such as sound and video like Internet
Explorer, Mozilla Firefox, Chrome and Opera, or can be
text-based, like Lynx or Links.
 First web browser was develop in 1991: Mosaic develop
by Marc Andreessen .


Different Types of Web Browsers:

1. Google Chrome
2. Mozilla Firefox
3. Internet explorer
4. Safari
5. Opera Mini
6. Netscape Navigator

August 2, 2019 7
Protocol
 A set of guidelines or rules.
 Communications protocol is a formal description of message
formats and the rules for exchanging those messages.
 Format that agreed to transfer data between two devices.

 Hypertext Transfer Protocol (HTTP)

 Internet Protocol (IP)
 File transfer protocol (FTP)
 Simple Mail Transfer Protocol (SMTP)
 Networks News File Transfer Protocol (NNTP)
 Transmission Control Protocol (TCP); Normally use together
with IP

August 2, 2019 8
Electronic Mail
A written message that is sent and received over the Internet.
The message can be formatted and enhanced with graphics and may
also include other files as attachments.
Like ordinary mail, email have address,
E.g. [email protected]
An e-mail address identifies an e-mail box to which e-mail messages
may be delivered.
Most e-mail on the Internet uses the Simple Mail Transfer Protocol
(SMTP).

August 2, 2019 9
 Advantages of Internet
 Communication
 Research
 Education
 Financial transactions
 For Updates
Communication: Communication is a process transmitting and
receiving symbol, data, image, text, document, graphic etc by using
various computer devices. It including the process of collecting,
processing, distributing, sharing, retrieving, transferring and storing
the information. Internet now being a main communication tool.
Using video conferencing, internet phone, Messenger, email etc.
Research: In order to do research you need to go through hundreds of
books as well as the references and that was one of the most difficult
jobs to do earlier. Research is one such thing which has got lots of
benefit from this evolution of internet.
Education: Education is one of the best things that the internet can
provide. There are a number of books, reference books, online help
centres, expert’s views and other study oriented material on the
internet that can make the learning process very easier as well as a
fun learning experience.
Financial Transactions: Financial transaction is the term which is used
when there is exchange of money. With the use of internet in the
financial transaction, your work has become a lot easier. With the
ability to do the financial transaction easily over the internet you can
purchase or sell items so easily

August 2, 2019 10
 Disadvantages of Internet
 Theft of Personal Information
 Spamming
 Malware Threats
 Social Isolation Obesity and Depression
Theft of Personal Information: The use of Internet for banking, social
networking, or other services, often makes our personal information
vulnerable to theft. Unscrupulous hackers can access our sensitive
information through unsecured connections by planting phishing
software.
Spamming: Spamming refers to sending unwanted e-mails, which
serve no purpose and needlessly obstruct the computer system.
Spammers usually use bots that bombard the receiver with an endless
line of advertisements. This can prove to be increasingly perplexing,
as it keeps getting mixed with our more important emails
Malware Threats: One of the most annoying problems with the
Internet is the ease with which any malware can infect our computers.
Virus programs are inconspicuous and may get activated simply by
clicking a seemingly harmless link Computers connected to the
Internet are extremely prone to IP targeted virus attacks that may end
up crashing the system completely.
Social Isolation, Obesity and Depression: The biggest problem with
having the Internet is, its ability to create rifts between the real and
virtual world. There is an addiction for everything that pertains to the
web and that includes excessive surfing, online gambling, social
networking, and gaming addiction. Since all problems are so deeply
linked with one another and with the Internet, it isn't uncommon for
people to be afflicted with multiple issues.

August 2, 2019 11
WHAT IS WEB 2.0?
“Web 2.0 is the business revolution in the computer industry
caused by the move to the internet as a platform, and an
attempt to understand the rules for success on that new
platform.”– Tim O’ Reilly.

It’s a simply improved version of the first world wide web,

characterized specially by the change from static to dynamic or
user-generated content and also the growth of social
media. The concept behind Web 2.0 refers to rich web
applications, web- oriented architecture and social web. It
refer to changes in the ways web pages are designed and used
by the users, without any change in any technical speciation’s.
What are the examples of Web 2.0 applications? Web 2.0
examples include hosted services (Google Maps),Web
applications ( Google Docs, Flickr), Video sharing sites (You
Tube), wikis (MediaWiki), blogs (Word-Press), social
networking (Facebook), folksonomies (Delicious),
Microblogging (Twitter), podcasting (Podcast Alley) & content
hosting services and many more.

August 2, 2019 12
So the major difference between web 1.0 and web 2.0 is that
web 2.0 websites enable users to create, share, collaborate and
communicate their work with others, without any need of any
web design or publishing skills. These capabilities were not
present in Web 1.o environment.

Now-a-days, the way web users are getting information has

drastically changed. Today, users use content they are
especially interested in, often using Web 2.0 tools.

August 2, 2019 13
Advantages of Web 2.0:
 Available at any time, any place.
 Variety of media.
 Ease of usage.
 Learners can actively be involved in knowledge building.
 Can create dynamic learning communities.
 Everybody is the author and the editor, every edit that has
been made can be tracked.
 User friendly.
 Updates in wiki are immediate and it offers more sources
for researchers.
 Provides real-time discussion.
Web 2.0 tools and their features:
Major features of Web 2.0 allow users to collectively classify
and dynamic information that ows two ways between site
owner and site user by means of evaluation, comments and
reviews. Site users can add content for others to see. Web 2.0
sites provide APIs to allow automated usage by an app or mash
up like it provides location metadata that can be processed by
a simple browser tool.

August 2, 2019 14
What is the future – Web 2.0 or Web 3.0?
The business forecasters are all claiming that Web 2.0 is an
intermediate phase between the World Wide Web’s exi stence
and a more established phase they’re calling Web 3.0.
What is “Web 3.0”? Has anyone even been using “Web 3.0” to describe anything?
Web 3.o is referred as intelligent web or third generation of
internet based services. The term was coined by John M arkoff
in 2006. He explained “There is no easy consensus about how
to dene what is meant by Web 3.0, but it is generally seen as a
reference to the semantic Web. While it is not that much more
precise a phrase, the semantic Web refers to technology to
make using the Internet better by understanding the meaning
of what people are doing, not just the way pages link to each
other.”

August 2, 2019 15
 Web Servers

Web
Web
Server
Browse
r

Client Server

Definition: A web server is specialized software that responds

to client (I.e. web browser) requests. Every web site requires a
web server to process client requests and ‘serve up’ the pages

Web servers used to service Internet, intranets and extranets .

A web server is part of a multi-tier application (also called n-
tier application). Functionality is divided into separate tiers or
groupings Tiers can be on same computer or on separate
computers Web applications are often three tiered:
 Information tier (also called data tier)
 Middle tier
 Client tier (user interface tier)

August 2, 2019 16
Definition: WEB SERVERS
The software (the computer application) that helps to
deliver content that can be accessed through the Internet.
The most common use of web servers is to host websites .
There are other uses such as gaming, data storage or running
enterprise applications. A web server serves web pages to
clients across the Internet or an Intranet. The web server
hosts the pages, scripts, programs, and multimedia files and
serves them using HTTP, a protocol designed to send files to
web browsers and other protocols.

August 2, 2019 17
EXAMPLE OF WEB SERVERS….

 Apache HTTP Server

Developed by Apache software foundation.
Supports most of the OS like UNIX, Linux, Novell
Netware, Windows, Mac OS X, Solaris, and
FreeBSD.

 Microsoft Internet Information Services (IIS)

Supports only on Windows platform

 Sun Java System Web Server

Web Server is designed for medium to large business
applications. Sun Java System Web Server is available
for most operating systems.

August 2, 2019 18
HOW IT WORKS ….?

August 2, 2019 19
Effective web designing issue and Solutions
A wonderfully designed website however, is not just enough; a good
website should assist you in building your brand as well as business
strategy.

An efficient team would be delivering personalized design concepts for

literally every project. Your website should be suited to your business
model. Whether your company is looking for a communication platform or
sales focused website, competent designers today use suitable tools to
create a site that certainly enhances your online presence and definitely
takes your business forward.

1) Responsive Web Design Strategy

Thanks to the incredible rise in the number of mobile devices, responsive

web designing is not anymore a UX-only discipline. All marketers need to
understand and consider responsive web designing as a component of their
strategic planning. It may not be necessary for you as a content marketer
to know all the tricks of the designing and development of a responsive
web. However, you need to know what exactly RWD is. Also, you need to
know your exact content marketing responsibilities.

The web world is said to have undergone some technological changes and
responsive web design is at the forefront as far as content marketers are
concerned. Responsive web design implies you can write content and

August 2, 2019 20
publish it once. The layout actually changes according to the capabilities
and size of the device.

There has been an astronomical rise in web surfing through mobile devices.
You are confronted with a multitude of diverse screen sizes across tablets,
smartphones, phablets, desktops, TVs, consoles and even wearable devices
like smart watches. As the screen size is constantly changing, you need to
optimize your website for all these mobile devices. Your website should be
designed in such a manner that it should be able to adapt to whatever
screen size.

2) Maintaining Consistency

It is a good idea to keep elements such as color, layout or font fairly

consistent in your site. Your site should have a smooth flow from one page
to another. This means that your font, color and layout structure should be
basically the same throughout your site to maintain consistency. It is
important to keep the elements across all pages constant so that the
viewers do not feel lost.

3) No Stock Photography

People are no longer interested in the glamour shots. They are looking for
definitely more realistic view of exactly what a product is portraying or
representing. Dry stock photos with dull white background are definitely
not in vogue. People are looking for story and personality. Use only
meaningful images in your website. Your images generate subconscious
messages that are transmitted to your audience.

August 2, 2019 21
4) Using Responsive Images

Designers can now create responsive layouts which are known to serve
various image sizes of different resolutions. Designers are now able to
develop mobile-optimized images that are ideal for smaller screens and
they can then come up with higher-resolution versions for larger screens.
You may use JavaScript and htaccess files for different sized images
according to screen width. You could also, use tools such as TinySrc that
lets you only prefix all large pictures with a TinySrc URL and the rest is left
to the tool to do.

5) CSS Media Queries

You could follow a tutorial from CSS-Tricks, which discusses ways to bring
about subtle modifications with media queries and ways of using media
queries on a single style-sheet. For example, in case of a fluid-width design
with a sidebar that is 35 per cent of the actual width of the page, then
based on the actual width of the browser window, one could tell what to do
if the browser is very narrow, or what to do if it is wider, and also, what
exactly to do if it is really quite wide.

6) Using Responsive Data Tables

Data tables are often pretty wide. You may see the whole table by zooming
out, but in that case, you would need to scroll both horizontally and
vertically to be able to browse the table. One best solution seems to be

August 2, 2019 22
reformatting the table for much better readability. Yet another way out is
to display a pie-graph according to the data. You may even consider
adapting the table into an effective mini-graphic which is just right for
narrow screens, (instead of interfering with the content, while the full table
is on display.)

7) Design a Great Navigation System

The best way to engage visitors in your site is by developing a solid and
impressive navigation system that would effectively support all search
preferences. The most vital factor in web design is the ease with which one
can find information. If visitors are not able to find the information they are
looking for, they would lose interest and leave. The navigation system
should be intuitive and self-explanatory.

 Your primary navigation structure should be simple.

 Always integrate navigation controls into the footer of your site.
 Breadcrumbs should be kept on every page barring the homepage
so people are well aware of their exact navigation trail.
 Provide visitors with an option to search your site using keywords,
by adding a visible search box towards the top.
 Minimize the provision of unnecessary navigation options as far as
possible.
 It is a good idea to keep three levels of navigation, and not too
many.
 Should you include links in your webpage, clearly mention and
explain their destinations, and this is also very effective for SEO.
 Prepare your site keeping your target audience in mind.
 Ensure that the overall navigation of the site is simple, so that users
can find their way to what they want without running through a
complicated procedure. Ensure that deliberation on the part of the
user is minimized by integrating a simple interface.

8) Minimize Flash and Animation

Minimize the use of JavaScript and Flash as far as possible, as a number of

mobile devices and tablets do not support Flash, and this would sorely
inhibit the navigability of your website. Several web browsers run outdated
versions of Flash plugins, and some may not even have Flash installed, so
you must keep the masses in mind. Switch to HTML5 if applicable, in case
you require animations. HTML5 is a fantastic browser-compliant substitute
for Flash.

August 2, 2019 23
9) Make Your Site Accessible

If you are aspiring for an overwhelming traffic then you need to make your
site compatible and attuned to multiple devices and browsers. You must
ensure that your website can be accessed by everyone visiting it no matter
what application or browser they are using.

10) Usability

It is important to keep in mind that the success of a site depends on its

usability and not on its visual design. It is best to use a user-centric design
if you have a profit-oriented website in mind. The success of a website
depends on its usability because its existence is meaningless if users cannot
use it. There is absolutely nothing wrong in using eye-catching 1-2-3-done
steps or large buttons with attractive visual effects. It is necessary to let
the user view all the available functions clearly. Feature exposure
contributes to a good user interface design. The visitors should be able to
interact with the system comfortably.

11) Pay Attention to the Writing Style

Web content writing is much different from print. You need to write as per
users’ browsing habits and preferences. Use objective language. No one is
interested in reading promotional content. Everyone would avoid long text
blocks without keywords and images. You need to talk business and provide
crisp and concise content. You need to categorize your content, remember
to use subheadings, use bulleted lists and visual elements to break the
monotony of blocks of uniform text.

August 2, 2019 24
12) Minimize User Workload

First of all it is best to minimize cognitive load so that it becomes easier for
visitors to understand the idea behind your system. Also, ensure that less
action is needed from users to try a service. Only then would a random
visitor try it out. First time visitors are not interested in filling web forms
for some account which they may never use again. It is a wise idea to
design your website in such a way that visitors have the ease and freedom
to browse the site without being compelled to share private data. They
would keep coming back to your site once they discover your services.

13) Use Negative Space

Using negative space in your web design is an excellent idea. Nobody wants
fluff. Visitors should be able to figure out precisely what they have in front
of them without too much searching. Designers should not worry about
negative space while creating a site. You just need to create normally and
then go through it and remove stuff wherever required to get the desired
look.

14) Conventions Are Fruitful

Incorporating conventional site elements need not necessarily make your

website boring. In fact, conventions are good for reducing the learning
curve or the need to understand how a particular thing works. Don’t you
think it would be a usability crisis if different websites had completely

August 2, 2019 25
different RSS-feeds’ visual presentation? Conventions help you to achieve
users’ trust, confidence and reliability. It is a good idea to keep track of
users’ expectations and understand precisely what expectations they have
from search placement, site navigation, text structure etc.

15) Test Early, Test Often

TETO-principle is vital for all web design projects. Usability tests are great
for providing critical insights into the major issues and problems associated
to a given layout. You must test early and never too late. You should go for
comprehensive tests.

To be continued…

August 2, 2019 26