Transcript Introduction to the Internet

Gdes2000 Graphic Design and the Internet
What is the Internet?
• An overview of how the Internet works and the technologies
underlying it.
• Explaining key terms and expanding on the jargon.
• Looking at the relationship between the World Wide Web and
the Internet.
Gdes2000 Graphic Design and the Internet
What is the Internet? Is it the same as the World
Wide Web? 1/2
• The Internet is a ‘network of networks’. It consists of
computers and cables joining each other together and
spans the world.
• Computers can be linked to the Internet by a telephone modem or a
wireless modem/router.
• It can be likened to a system of railways and stations - the railways are
the phone lines, which join together the stations which are the
computers.
• The bits of information running up and down are like the trains
shuttling back and forth.
• It started with American defence strategists in the 1960s who realised
that if a nuclear war broke out, large sections of the traditional
telecommunications network would be destroyed and communication
across the continent would be impossible.
Gdes2000 Graphic Design and the Internet
What is the Internet? Is it the same as the World
Wide Web? 2/2
• The Advanced Research Project Agency (ARPA Net)
Created a network of computers and linking cables which
would offer a separate communication system if needed.
• The point about a network is that if part of it fails there ought to be a
way of re-routing to get round the damaged area and messages could still
get through.
• Files and other bits of data can be sent around the network allowing
communication.
• It started at UCLA as a research project with four computers and has
gone on expanding ever since. Each time further computer networks join
the Internet they do so through ‘gateway’s.
Gdes2000 Graphic Design and the Internet
Gateways: All computer networks are connected at
‘gateways’.
These allow any computer network to connect to any other. In this way
new separate networks can be added to the already existing ones.
Protocols: A range of protocols exist for different types
of Internet traffic.
These protocols sort out what kind of transmission is going on and where
the data needs to be sent.
For instance it might be e-mail or it
might be a file being moved from one PC
to another.
TCP/IP Transmission Control Protocol/Internet Protocol
This is the most common Internet protocol.
It does things like breaking e-mail into smaller ‘packets’ called
datagrams and checks out details of file headers for what sort they are
etc. In essence it allows data to travel across the Internet irrespective of
any localised protocols.
Gdes2000 Graphic Design and the Internet
.uk
.de
.com
.org
.info
.tv
Internet addresses Each computer on the network has a
unique 4 octet ( = 8 bits) address separated by a full
stop. e.g. 208.231.6.7
This numbering system is hierarchical: The first two numbers, 208.231,
represent a network. Within this there are 1 - 254 subnetworks or class B
addresses, and each of these can contain 1 - 254 sub-subnetworks.
Domain names We prefer names to numbers so instead
of the four octet numbers we give ‘names’ so website
208.231.6.7 becomes cinemac.co.uk and is called a
Name Server.
The .uk refers to United Kingdom .de is for Germany .it for Italy etc. .ac
refers to academic institutions .org to non-profit making organisations
etc. .com is commonly used and does not refer to a specific country.
Socket - is a port reserved for a certain protocol. A port
number is held in the TCP header to distinguish the type
and identity of the connection.
Gdes2000 Graphic Design and the Internet
ISP - Internet Service Provider This is a company who
provides you, the user, with a link to the internet via a
bank of modems or other line link.
As a domestic user you would need your own PC/Mac modem/wireless to
connect to the ‘Net via an ISP.
What is a Modem? This converts the digital data which
your computer understands into a telephone signal and
vice versa. After making a connection, the user's
computer is assigned an IP address (one of those 4 octet
numbers).
This may be a fixed set of numbers or change each time you make a
connection. The domestic user or small business often has this kind of
dial-up connection.
• ISDN, Broadband etc, dedicated lines which are open
permanently day and night, shuffling packets of data
back and forth continually.
• Wireless Routers. Today’s ‘modems’ are often
‘wireless’ and can cover a whole house or more.
There’s 3 or 4 wireless networks available on the campus.
Gdes2000 Graphic Design and the Internet
What can we do with the Internet?
• Send and receive e-mail
SMTP Simple Mail Transfer Protocol
• Send and receive files.
FTP File Transfer Protocol e.g. Used by
applications such as ‘WS FTP’ or ‘Fetch’
• View the World Wide Web
The ‘WWW’ runs on the Internet in the
same way that a train runs on tracks.
• The WWW is a client/server system. The ‘client’ in this case is you on
your computer.
Gdes2000 Graphic Design and the Internet
What is a server?
A server is another computer, possibly without a screen,
housed with many other banks of computers in a room
somewhere. These computers store all the information
that is available on the WWW.
What is a Web host?
A web host is a company who can store your web site on
their server. The server will probably be on the
'backbone’ so that users who want to visit the site can
get to it quickly.
http://www.worc.ac.uk/departs/artdes/dm/artd2020/index.htm
Gdes2000 Graphic Design and the Internet
What is a URL?
The Uniform Resource Locator is an address. We have
house numbers and street names to denote where we
live, telephone numbers etc. The URL is similar to these.
Computer addresses are sometimes called file paths or simply ‘paths’.
Every file stored on your computer has an address or path. The route
down through folders to the file is called the path.
So, in general, on the Internet, web addresses have this
kind of format:
<protocol>://<host>/path
i.e. http://www.companyname.co.uk/file.htm
Gdes2000 Graphic Design and the Internet
What is HTTP?
• The native protocol for the WWW is ‘HTTP’. The host
is the name server and the path in this case would be the
sub folders and finally the name of the file itself. e.g.
http://www.cinemac.co.uk/parenthesis/talk.htm
• Hyper Text Transfer Protocol first developed in 1989 at
CERN in Switzerland by Tim Berners-Lee (a Brit).
Hypertext is a term coined by Ted Nelson in 1965 to
denote a system of non-linear linked text documents.
• Sections of Ted’s documents could be accessed in a
random sequence, according to the reader's
needs.
• To function, they need ‘Hyperlinks’ from one section
to another or one document to another. This premise is
the basis of the World Wide Web.
Gdes2000 Graphic Design and the Internet
HTML
XHTML
DHTML
What is HTML?
Hyper Text Markup Language is a language designed,
originally, to display text and allow Hyperlinks to be
embedded within it.
HTML has grown over the years to control text, images,
animation, sound, video etc. - the whole range of
multimedia elements.
HTML is a set of codes or instructions which tell a web
browser how a page should look. The latest version os
HTML 5.
Today HTML is slowly being developed further by creating
hybrids with other codes.
i.e. ‘XHTML’ or ‘eXtensible’ HTML which is HTML + XML
(Extensible Markup Language). Also DHTML which is
‘Dynamic’ HTML. These all add different capabilities to the original
code like movement on the page and easier user triggered interactions.
Gdes2000 Graphic Design and the Internet
What is a web browser?
• A browser is a piece of software which you use to
access content on the WWW. Web sites are displayed in
your browser the way the page’s HTML code tells it too.
• There are a couple of main browsers, Internet Explorer,
Firefox, Netscape, Opera, Safari (Mac). Navigator grew
out of the first browser, NCSA Mosaic, which was a
student project by Marc Andreessen at University of
Illinois.
• HTML is also very ‘light’ in data terms - small files.
This allows fast usage over narrow bandwidth lines like
the telephone lines.
• Browsers have also changed over the years and can
now be found on phones and tablets (ipads etc).
Gdes2000 Graphic Design and the Internet
What is bandwidth?
This refers to the capacity of a line to carry data. If you
think of it in terms of pipes and water - compare a
drinking straw, a garden hose and fireman's hose and
think about how much water can come through each in
say a minute.
The bigger the tube, the more water can get through.
The same applies to data.
Telephone lines are often the limiting factors. The data
can only move as fast as the slowest section on the
journey, like a bottleneck in a road system.
Gdes2000 Graphic Design and the Internet
How do you create HTML?
• HTML is a list of instructions in text, so it can be
created using any text editing software (and
Dreamweaver). These files are then displayed in web
browsers.
• HTML ‘tags’ contain details on how big the text should
be, what font it is in, where it should be on the screen,
if it is bold or italic, where the Hyperlinks are etc.
There is a huge difference between HTML and using
Quark or InDesign, where you see what you are designing
as you go by dragging text and picture boxes into a
window on the screen.
InDesign is an example of a WYSIWYG programme,‘What You See Is What
You Get’. This is fine for print work which will print as you’ve
designed it.
Your web page though may well be displayed on a computer on the other
side of the world. This could also be set up differently to yours - so many
more variables.
Gdes2000 Graphic Design and the Internet
HTML terminology: 1/2
iFrames Can split the web page into ‘regions’ which can
then act independently.
Tables Can help to show tables of information – they
used to be used for construction of sites too.
DIVs These allow you to build up a number of layers in a
page design and use navigation buttons on the screen to
switch layers on and off.
Forms Forms let the user input information into online
forms which can then be submitted to a server for
processing transactions. CGI scripting Common Gateway
Interface scripts deal with data which is sent back to the
server from forms.
Gdes2000 Graphic Design and the Internet
HTML terminology: 2/2
Java and Javascript Java is a complete programming
language based on the language C, so it is very complex.
Javascript is a cut down version which allows a further
range of things to be done in a Web site. Javascriptcan
be embedded within a page’s HTML or (more often) can
be linked to in a separate (.js) document.
CSS3 Cascading Style Sheets This is system which
permits the setting up of styles (very similar to Quark or
Pagemaker) so that if changes are to be made across a
site. CSS can live in an external file (.css) so you only
need to change the details in the style sheet once to
affect all the instances of it across the site.
AJAX or “Asynchronous JavaScript and XML” is a
relatively new web development method. It can swap
bits of data from the web page with a server behind the
scenes – creating extra features/interactivity..
Gdes2000 Graphic Design and the Internet
Web Search Engines
• The Web has a range of 'search engines' which allow
you to trawl through Web site addresses in response to
queries put in by you the user.
• These search engine companies are often high profile
organisations such as ‘Yahoo’. Up to 90% of web users go
through the search engines to find what they need.
• The search engines gather information on Web sites
and keep it in databases ready for access.
• The HTML code for each page of a site can include
META tags. There are two main ones, the META NAME and
META CONTENT.
• Search engine spiders or robots will visit your site and
pick up META details from the page’s HTML code and use
them to collate the search details which the search
engines then hold in their files.
Gdes2000 Graphic Design and the Internet
WYSIWYG web page editors
There is a range of programmes for designing Web Sites
which do work more like inDesign etc, that is they allow
you to drag and drop blocks of text and images into a
space and design from a primarily visual point of
view.
Whilst you do this, in the background, HTML is created
by the programme for you.
Adobe Dreamweaver is an example of these
programmes - there are quite a few others.
There is also a range of software which allows content
creation for the web without HTML. Programmes such as
Adobe Flash can achieve this and create interactive
multimedia elements that can then be inserted into
web pages.
Gdes2000 Graphic Design and the Internet
Web page plug-ins
Some website content can be created with software and
displayed in a browser under its own format.
A piece of video which you have shot and edited
in Premiere can be played as a QuickTime (.mov) file
(QuickTime is the Apple digital video standard) inside a
browser window.
Similarly Shockwave files can be created from Adobe
Flash to display in a browser (.swf) file. These files don't
need to conform to HTML conventions
There’s more freedom and with it more graphic and
audio visual richness. The drawback is that the user has
to have the particular plug-in which plays these
files, installed on their browser.
Plug-ins are downloadable from the Net but can
sometimes be difficult and time consuming to install.
Gdes2000 Graphic Design and the Internet
Conclusions
• The Internet is many computer networks joined together
and spanning the globe. The Web is used by millions,
continues to grow exponentially and is destined
to have an impact on everything we do commercially,
culturally and for pleasure.
• Cyberspace is a place where global communication can
go on, where we can discover what other people are doing
on the other side of the world or even down the road .
Where we can generate a new image, start to do things in
a different way.
• It is an unwieldy beast with a complex underlying
technical structure, but at heart it is a new and
revolutionary system on which human beings can conduct
their myriad affairs.
Adapted and updated by Paul Hazell and Andy Stevenson, based
on a lecture originally given by John Jostins, Coventry University