Escolar Documentos
Profissional Documentos
Cultura Documentos
Information
Resources
Website:
http://staffwww.dcs.shef.ac.uk/people/S.Maddock/campus_only/com1004/ MOLE 2: Mainly for assignment distribution and hand in
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
Semester 1 Schedule
Tuesday 11.00-11.50 EAB-IT
1
2
No lab class
Exercise sheets and review sessions
The Interweb
HTML5, CSS
3
4 5 6 7 8 9 10
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
28/09/2012
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
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
28/09/2012
10
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
11
12
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
28/09/2012
13
14
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
28/09/2012
15
16
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
28/09/2012
28/09/2012
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
http://www.20thingsilearned.com
www.youtube.com
www.twitter.com
www.bbc.co.uk
maps.google.co.uk
www.wikipedia.org
jackinthe.cloudapp .net
28/09/2012
19
20
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
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
21
22
http://www.internetworldstats.com/stats.htm
www.worldwidewebsize.com
The Indexed Web contains at least 8.54 billion pages (Wed 26 Sep, 2012)
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
23
24
5. Diversity
There is no such thing as an average user Personal diversity Technical diversity
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
28/09/2012
25
26
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
Design
Implementation Testing Maintenance
The waterfall model
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.
28/09/2012
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
28/09/2012
31
32
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
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
28/09/2012
28/09/2012
33
34
9. Summary
There is no such thing as the average user
9. Summary
Example follow on in later years of your degree:
3: Individual project
4: Java E-Commerce
development of systems to support electronic commerce
4: Genesys
28/09/2012
28/09/2012