2

Information
Resources
Website:
http://staffwww.dcs.shef.ac.uk/people/S.Maddock/campus_only/com1004/ MOLE 2: Mainly for assignment distribution and hand in

COM1004: Web and Internet Technology Lecture 1: The Interweb

Dr. Steve Maddock and Dr. Mike Stannett s.maddock@dcs.shef.ac.uk m.stannett@dcs.shef.ac.uk

Recommended reading
see Website

http://www.w3.org/community/webed/wiki/Main_Page

Assessment
Assignments (60%): Semester 1 (30%); Semester 2 (30%) Examination (40%): 2 hours at end of Semester 2

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

Semester 1 Schedule
Tuesday 11.00-11.50 EAB-IT

Assignment handout: Week 4 Friday 09.00-09.50 HI-LTA Friday 10.00-10.50 HI-LTA

1. The Internet and the World Wide Web

They are not the same thing The Net
Global interconnected collection of computer networks Uses standard communications protocols
Partial map of the Internet @ Jan 15, 2005 based on data at opte.org [showing 30% of Class C networks] http://en.wikipedia.org/wiki/File:Internet_map_1024.jpg

1
2

No lab class
Exercise sheets and review sessions

The Interweb
HTML5, CSS

Anatomy of a Web page

3
4 5 6 7 8 9 10

Design, HTML5, CSS

Design, HTML5, CSS, JavaScript JavaScript

The Web
An information sharing model built on top of the Internet One of the services communicated via the Internet

Reading week Exercise sheets and review sessions JavaScript, DOM, Events Web graphics Invited Lecture Web graphics Advanced HTML5 and CSS3 No lecture Assignment handin: Week 12

(Other services: e-mail, ftp, VOIP, instant messaging, )

Departments website, Sep 2012

11 Open lab for assignment help 12 No lab class

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

2. A brief history of the Internet

Early networks comprised a collection of machines connected to a single mainframe computer A number of organisations were working on ideas in the 1960s, leading to early networks:

2.1 Packet Switching

Transmitted data is grouped into suitably sized blocks called packets Packets are sent (and queued) across a network, resulting in variable delay A packet-switching protocol governs the message transmission
Transmission Control Protocol and Internet Protocol (TCP/IP) formalised in 1982
28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

ARPANET, Mark 1 (NPL), CYCLADES

Ideas that emerged in the 1960s/1970s:
Decentralised network architecture
The Internet in February 1982 http://en.wikipedia.org/wiki/File:Internet_map_in_Febru ary_82.jpg144kB.png

Partial map of the Internet @ Jan 15, 2005 based on data at opte.org [showing 30% of Class C networks] http://en.wikipedia.org/wiki/File:Internet_map_1024.jpg

Packet switching

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

2.1 Packet Switching

How does the network know here to deliver information?
IP address (IPv4, 32 bit; IPv6, 128bit)
(Europe hits old internet address limits, BBC website, 14 Sep 2012, http://www.bbc.co.uk/news/technology-19600718)
Partial map of the Internet @ Jan 15, 2005 based on data at opte.org [showing 30% of Class C networks] http://en.wikipedia.org/wiki/File:Internet_map_1024.jpg

2.2 Still expanding in 2012

What route should the information follow? There and Back Again: A Packet's Tale - How does the Internet work?
http://www.youtube.com/watch?feature=pla yer_embedded&v=WwyJGzZmBe8

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

http://www.ace-submarinecable.com/ace/default/EN/all/ace_en/the_project.htm Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

10

2.3 Transmission: Encoding data

We need to encode the data as binary Example: Text ASCII
American Standard Code for Information Interchange
The ASCII encoding of characters as 7-bit values [www.asciitable.com]

2.4 Transmission: Reliability

ASCII only uses 7 bits to encode characters, even though a byte contains 8 bits The 8th bit can be used for basic error checking Channels used to be fairly unreliable, and messages likely to be corrupted during transmission We have better ways of doing it now!
7-bit value 0000011 How many 1s? (parity) 2 = even 8-bit encoding 00000011

0000100
0000101 0000110 0000111 0001000

1 = odd
2 = even 2 = even 3 = odd 1 = odd

10000100
00000101 00000110 10000111 10001000

Unicode
Version 6.0 provides codes for 109,449 characters from the world's alphabets, ideograph sets, and symbol collections. [www.unicode.org]

28/09/2012

http://en.wikipedia.org/wiki/List_of_Unicode_characters#Mathematica l_Operators Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

11

12

2.5 Transmission: Sending signals

Choose 2 voltages (high=1 and low=0)

2.5 Transmission: Sending signals

All signals can be broken into sine wave components

In practice the edges of these pulses wont be exactly vertical, and the horizontals wont be exactly straight. This problem gets worse the further the signal travels...

Square wave:
http://www.files.chem.vt.edu/chem-ed/data/fourier.html

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

13

14

A complex signal is a mix of frequencies

2.5 Transmission: Sending signals

All signals can be broken into sine wave components

High frequency components are lost during transmission faster than low frequency components

J.D. Foley, A. Van Dam, S.K. Feiner, J.F. Hughes, Computer Graphics: Principles and Practice second edition, Addison -Wesley, 1990

Square wave:
http://www.files.chem.vt.edu/chem-ed/data/fourier.html

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

15

16

2.5 Transmission: Sending signals

Digital signals can cope with this

2.6 Transmission: Security

How do we stop people listening to our messages? How do we stop people sending messages that claim to be from ourselves? Can we intercept and decrypt messages sent by competitors? Can we trace people who download specific files? Is it morally acceptable to do so? (Next Semester: Dr Mike Stannett)

Even if all the higher frequency components are lost (so the square wave looks more like a sine wave), we can still work out whether the signal was high or low

Bundesarchiv, Bild 183-2007-0705-502 / CC-BY-SA http://en.wikipedia.org/wiki/File:Bundesarchiv_Bild_183-20070705-502,_Chiffriermaschine_%22Enigma%22.jpg

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

17

18

2.7 Summary
The Internet is a physical collection of networks, connected by physical communication channels (wires, radio waves, optical cables, ...) It relies on standard protocols for information exchange Connections can be slow or fast, unreliable and insecure

3. The Web / World Wide Web / WWW

Collection of interlinked documents or resources
www.ebay.com www.google.co.uk

But what can we use the Internet for?

http://www.20thingsilearned.com

www.youtube.com

www.twitter.com

1974 ABC interview with Arthur C. Clarke

ARTHUR C CLARKE PREDICTS THE INTERNET provided by the Australian Broadcasting Corporation (ABC) http://www.abc.net.au/archives/80days/stories/2012/01/19/3411679.htm http://en.wikipedia.org/wiki/File:ABC_Clarke_predicts_internet_and_PC.ogv http://www.w3.org/Illustrations/BasicHyperText.ai.gif
28/09/2012

www.bbc.co.uk

maps.google.co.uk

www.wikipedia.org

jackinthe.cloudapp .net

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

19

20

3.1 How does it work?

Web server

3.2 Who invented it?

1945: Vannevar Bush, As We May Think: Memex - make and follow links between documents 1960s: Doug Engelbart, Ted Nelson, Andy van Dam et al
Hypertext: coined by Ted Nelson in 1965 Hypermedia: include graphics, audio, video, etc.
http://www.w3.org/Illustrations/BasicHyperText.ai.gif

User runs a browser on a PC / Mac / mobile phone / games console / TV Browser (client) makes a request for a document, using a Uniform Resource Locator (URL):
http://www.shef.ac.uk/dcs prefix: http:// host name: www.shef.ac.uk path: dcs (default file in folder is displayed) Example: http://staffwww.dcs.shef.ac.uk/people/S.Ma ddock/index.html
request response Multiple documents

Server responds with relevant (possibly dynamically-created) document(s)

client program
Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

1989/1990: Sir Tim Berners-Lee, with Robert Cailliau, produced WorldWideWeb, the first web browser (and editor)
Documents, links, searching
Copyright 2009 Enrique Dans, http://en.wikipedia.org/wi ki/File:Tim_BernersLee_April_2009.jpg http://en.wikipedia.org/wiki/File:Pre mier_serveur_Web.jpeg

28/09/2012

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

21

22

3.3 How do we find things?

Programs traverse hyperlinks to build indexes
Robots / spiders / Web crawlers / bots / agents / ants / scutters

4. Who uses the InterWeb?

December 2011: ~2 billion Internet users

http://www.internetworldstats.com/stats.htm
www.worldwidewebsize.com

Given a query, index database is used to return pages

Google ranking includes a weighting based on number of other pages with links to that page (see PageRank: Wikipedia)

The Indexed Web contains at least 8.54 billion pages (Wed 26 Sep, 2012)

Directories are classified listings of Web sites

Hierarchical categories

Social networks lead us to things Q: How can we judge the quality of the information?
www.google.co.uk
May 21, 2010: PAC-MAN's 30th Anniversary Doodle - PAC-MAN & 1980 NAMCO BANDAI Games Inc. Global

http://www.internetworldstats.com/stats.htm
28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

23

24

5. Diversity
There is no such thing as an average user Personal diversity Technical diversity

5.1 Personal diversity

Every person is unique. We need to consider: Physical and mental ability
Blind, partially sighted, unable to use a mouse due to injury or illness, cognitive difficulties, etc

Geographical diversity

Educational level
Illiteracy rates in different countries

Technological sophistication
Elderly (silver surfers), children, etc

Experience
Convention in interfaces

http://www.bbc.co.uk/accessibility/

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

25

26

5.2 Technical diversity

Different equipment

5.3 Geographical diversity

Different languages, cultural differences, physical limits (delivery) Internationalisation (I18n)
design product to enable easy localisation, use program support should be a fundamental step in the design and development process different versions of a web site for different regions accurate and culturally correct translations
www.w3.org/International/
28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

PC, Mac, smartphone, TV, ...

Data rate (and cost)

mobile, broadband, ... Desktop:
http://www.panasonic.co.uk/html/en_GB/Products/VIERA+Flat+Screen+T V/VIERA+Overview/Smart+VIERA+|+Smart+TV+from+Panasonic/Easy +operation/8935800/index.html

Different browsers.

www.baidu.com

Gecko-based: Mozilla Firefox Presto-based: Opera Trident-based: Internet Explorer WebKit-based: Apple Safari, Google Chrome Text-based: Lynx

Localisation (L10n)

http://www.ie6countdown.com/
28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

27

28

6. How do you create a web site?

It is a form of software engineering Requirements Analysis
Who are the users? What is required? Specification: What will be included? What is out of scope? Legal document?

7. Web design principles Requirements

Design
Implementation Testing Maintenance
The waterfall model

Get it right Make it nice

(Chapman and Chapman, 2006) Standards Usability Visual design

Design
Grids. Mock-ups?

Implementation
Templates, content management

Testing
Verification, user testing

Maintenance
Designed to be easily maintained?

Chapman, N and J. Chapman, Web Design: A complete introduction, John Wiley & Sons, 2006.

More likely there will be iteration of stages

28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

29

30

7.1 Standards
Agreements between interested parties Syntax and semantics of Web languages and protocols used to retrieve pages
World Wide Web Consortium (W3C): XML, CSS, XHTML, DOM European Computer Manufacturers Association (ECMA): JavaScript Internet Engineering Task Force (IETF): Internet standards International Organization for Standards (ISO): some image standards and other media formats
w3.org
http://www.w3.org/community/webed/wiki/Main_Page

7.2 Usability
The following need to be clear to a user:
What it offers, How its organised, What actions (if any) to take You never really understand a person until you consider things from his point of view until you climb into his skin and walk around in it (Harper Lee,
To Kill a Mockingbird, 1960)

Design must focus on potential users Can you empathize? Usability testing
Function, structure, accessibility, presentation

Before you judge a man, walk a mile in his shoes. After that who cares? Hes a mile away and youve got his shoes. (Billy
Connolly)

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

31

32

7.3 Visual design

First impressions are important Structure and function need to be made clear
Promotes confidence

8. Implementation
Hand coding
HTML, CSS, JavaScript, PHP, MySQL Template-based and imaging tools Examples: Dreamweaver, Google sites Manage content, support collaboration and give access control Database-driven process University uses Polopoly WYSIWYG page editor and folder-based structure editor Development of dynamic websites, applications and Web services Ruby on Rails (RoR), Drupal, Joomla!
Google sites

Website creation software

Not everyone is a graphic designer, but some simple ideas can be used:
Use of grids for layout design Use wireframes Informed approach to typography, contrast and colour Consistent page design
A wireframe document for a person profile view created using Balsamiq Source =http://www.flickr.com/photos/doos/3931846833/ Author =http://www.flickr.com/people/doos/ |Date =2000908-18

Content management system

Web application framework

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

33

34

9. Summary
There is no such thing as the average user

9. Summary
Example follow on in later years of your degree:

Need to be aware of diversity issues and Web design principles

Web sites have a consistent design A web page can be static or can be produced dynamically Next week: Markup (HTML5) and stylesheets (CSS)

Year 2: Software Hut

Year 3: The Intelligent Web
searching and mining Standards for knowledge representation (RDF, OWL), Web 2.0, Web 3.0, the Semantic Web,

3: Individual project

3/4: Computer Security and Forensics

encryption and decryption techniques, threats and security,

4: Java E-Commerce
development of systems to support electronic commerce

4: Genesys

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield

28/09/2012

Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield