Transcript Web design and implementation Dr. Tim King 4th May 2010 My CV  Computer Lab 1973-1981 – Wrote a relational database for Ph.D.   Lecturer, University of.

Web design and implementation
Dr. Tim King
4th May 2010
My CV

Computer Lab 1973-1981
– Wrote a relational database for Ph.D.


Lecturer, University of Bath 1981-1983
R&D Director 1984-1986
– Wrote AmigaDOS

Founded Perihelion with Jack Lang 1986
– Distributed OS, embedded systems, database systems

Founded UK Online 1994
– First UK ISP with content
– Sold to EasyNet 1996

Independent consultant
– Technical Due Diligence for VCs
– Advice for Sainsbury’s, Sony, Home Office etc
– Strategy for small companies and following M&As
2/14
Web design

Get the domain name right
– Inventive: business.com vs PlentyOfFish (dating site)

Design is important
– But functionality more so
– Integrate good design with backend databases

It’s another type of publishing
– Web publishing is no different from other types of publishing
– Spelling, grammar, point size, broken links, incorrect captions
– Social networking sites make this available to all

Navigation is important
– Make the navigation clear
– Three clicks maximum to get anywhere
– Hard when Sainsbury’s have 25,000 line items
3/14
Common mistakes









Too much text
Frames
Huge images
Distracting colour schemes
Flashing gifs, scrolling text
Music
Unclear navigation
Unreadable
Cluttered


Useless Title
Mystery Meat
Navigation you have to roll over
Zero intelligible content






Refuses to work with IE
Only works with IE
Requires Flash
Assumes screen size
Assumes font size
Contains errors
www.webpagesthatsuck.com
4/14
Poor design example
Mixture of
fonts
Title seems to
be confused
with keywords
Navigation a
mess
Far too much
material
Lingscars.com
Needs more
than 1024x768
5/14
Good design example
Quick links
to sub areas
Pop-over
sub-menus
Recent news
stories
Clear link to
technical
support
Search clearly
available
Services for
subscribers
Special event
links
Discussion
forums
Consistent
navigation
6/14
Protected and encrypted pages


Most web sites are open to all
Protected pages for
– Subscribers, Suppliers, Customers, Staff
– Protected by
• Username / pw; IP address; Domain name of browser
• Combinations of these

Most traffic to and from web sites is in clear
– Potential eavesdropping possible
– Secure Socket Layer (SSL) encrypts data

Widely used technology
– Used whenever privacy is important
• Payment
• Secure communication (spooks, terrorists, medical)
7/14
Static and Dynamic pages

HTML forms
–
–
–
–

Fill in fields
Press button to submit data
Validate locally using Javascript
Remember user input when redrawing form
HTML with extra tags pre-processed
– Java Server Pages (JSP)
– Active Server Pages (ASP)
– PHP

Complete content management systems
– Signiant, Vignette, Joomla, Drupal etc
– Content and style kept distinct – can adapt for target
– Dynamic pages added as extensions, many already in libraries
8/14
AJAX

Asynchronous Javascript and XML
– Define page with named sections
– Make XMLRequest call with data entered
– When result returns update named DOM element
• No need to refresh entire web page
• Immediate field verification
• Google suggestions
• Desire to produce web apps that compete with local ones
– Google Web Toolkit
• Java compiler produces Javascript
– That works with all browsers
– That can be tested using standard Java IDE
• http://code.google.com/webtoolkit
9/14
Page transition diagram
Home page
Help
Search
Company
Sitemap About Us Contact
Products
Product
Services
Service 1
Support
Free
Paid
search
Service 2
Payment
Downloads
Chat
Service 3
Static pages
Service 4
Protected pages
Dynamic pages
Applications
Encrypted pages
Shortcuts
Search from every page
Payment from free support page
10/14
Merchant Systems

Requirements: pluses and minuses
–
–
–
–
–
–
–
–
–

User logon required?
Remember credit card details?
Same price for everyone?
Special offers (free delivery if over $100 spent)
Backend integration?
Help desk support?
Online credit checking?
Order picking?
Online stock shown?
Examples
– Microsoft .NET, FatWire, InterShop
11/14
Community Systems

Content Management on Steroids
– Wikis, FaceBook, MySpace, YouTube, Twitter
• Usual suspects
– Layout generated by owners
– Content generated by users, not owners
– Sometimes owners (attempt to) regulate content
– Instant feedback to ideas
• Seen as important tool in UK election
• Modern version of “on the stump” heckling
– Widely used as informal knowledge sharing tool
– Companies see need to participate
• But it can bite them back
12/14
Outline Physical Design
Load balancer
Web Server
(static data)
Application Server
(business logic)
Database server
(orders)
Legacy
(stock control)
Big IP
Apache
J2EE
OPS
IBM
13/14
Sizing

Scalability
Lastminute.com system design
– How many people?
– At the same time?


Number of
products
Size of downloads
–
–
–
–

Ring tones 10K
Music 4M
Software 200M
Movie 2G
Reliability
BigIP
WebServer
WebServer
BigIP
WebServer
AppServer
AppServer
Database
Database
WebServer
14/14