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

Download Report

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

Web design and implementation
Dr. Tim King
5th May 2009
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

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
PHP
<html><head><title>Test</title></head><body>
<h2>Example</h2>
<table><tr><th>Col1</th><th>Col2</th></tr>
http://url?mac=21
<?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'];
http://url?mac=21'; delete table lines;
$val = $row[‘value’];
print "<tr><td>$num</td><td>$val</td></tr>”;
?>
</table></body></html>
9/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
10/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
11/14
Multiple targets

Different devices
– Different browsers
– Different bandwidth, resolutions, screen sizes, colours, printers


XML helps, but doesn’t 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 -> Still Pictures-> Moving Pix-> 3D
12/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
13/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
14/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
15/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
16/14
Site performance
(Netcraft.com)
Time since reboot varies from around a fortnight to a year
Note
scale
17/14