Web design and implementation

1
Web design and implementation

• Dr. Tim King
• 5th May 2009

2
My CV

• Computer Lab 1973-1981
• Wrote a relational database for Ph.D.
• Lecturer, University of Bath 1981-1983
• RD 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 Sainsburys, Sony, Home Office etc
• Strategy for small companies and following MAs

3
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
• Its another type of publishing
• Web publishing is no different from other types
  of publishing
• Spelling, grammar, point size, broken links,
  incorrect captions
• Navigation is important
• Make the navigation clear
• Three clicks maximum to get anywhere
• Hard when Sainsburys have 25,000 line items

4
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
5
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
6
Good design example
Quick links to sub areas
Search clearly available
Services for subscribers
Pop-over sub-menus
Special event links
Recent news stories
Discussion forums
Clear link to technical support
Consistent navigation
7
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)

8
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

9
PHP
lthtmlgtltheadgtlttitlegtTestlt/titlegtlt/headgtltbodygt lth2gtE
xamplelt/h2gt lttablegtlttrgtltthgtCol1lt/thgtltthgtCol2lt/thgtlt
/trgt lt?php open database and verify OK
mac_REQUEST'mac' q "select from
lines where mac'mac' order by num" res
mysql_query(q, conn) while (row
mysql_fetch_array(res)) num
row'num' val rowvalue
print "lttrgtlttdgtnumlt/tdgtlttdgtvallt/tdgtlt/trgt ?gt lt/
tablegtlt/bodygtlt/htmlgt
http//url?mac21
http//url?mac21' delete table lines
10
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

11
Page transition diagram
Home page
Help
Company
Products
Services
Support
Free
Paid
Product search
Service 1
About Us
Contact
Search
Sitemap
Service 2
Downloads
Chat
Payment
Service 3
Static pages
Service 4
Protected pages
Dynamic pages
Applications
Shortcuts Search from every page Payment from
free support page
Encrypted pages
12
Multiple targets

• Different devices
• Different browsers
• Different bandwidth, resolutions, screen sizes,
  colours, printers
• XML helps, but doesnt solve everything
• Content Management Systems can help here
• BBC for example
• Phones and PDAs have different physical
  characteristics
• Small screens
• Java Midlets a step forward
• Streaming media has different needs to web pages
• Device limitations eg TV
• Audio important
• High colour depth, poor display quality
• Video packet loss acceptable
• QoS essential
• Evolution Text -gt Still Pictures-gt Moving Pix-gt
  3D

13
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

14
Community Systems

• Content Management on Steroids
• Wikis, FaceBook, MySpace, YouTube
• 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 US election
• Modern version of on the stump heckling
• Widely used as informal knowledge sharing tool

15
Outline Physical Design
Load balancer
Big IP
Web Server (static data)
Apache
Application Server (business logic)
J2EE
Database server (orders)
OPS
Legacy (stock control)
IBM
16
Sizing
Lastminute.com system design

• Scalability
• How many people?
• At the same time?
• Number of products
• Size of downloads
• Ring tones 10K
• Music 4M
• Software 200M
• Movie 2G
• Reliability

BigIP
BigIP
WebServer
WebServer
WebServer
WebServer
AppServer
AppServer
Database
Database
17
Site performance(Netcraft.com)
Time since reboot varies from around a fortnight
to a year
Note scale