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 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 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 Internet addresses Each computer on the network has a unique 4 octet ( = 8 bits) address separated by a full stop. e.g This numbering system is hierarchical: The first two numbers, , represent a network. Within this there are subnetworks or class B addresses, and each of these can contain sub-subnetworks. Domain names We prefer names to numbers so instead of the four octet numbers we give ‘names’ so website 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..uk.de.com.org.info.tv

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 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.

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: :// /path i.e.

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. 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 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. HTML XHTML DHTML

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