web design and implementation dr. tim king 5 th may 2009
Post on 21-Dec-2015
215 views
TRANSCRIPT
Web design and Web design and implementationimplementation
Dr. Tim King5th May 2009
2/14
My CVMy 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
3/14
Web designWeb 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
4/14
Common mistakesCommon 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 overZero 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/14
Poor design examplePoor design example
Needs more than 1024x768
Navigation a mess
Far too much material
Title seems to be confused
with keywords
Mixture of fonts
Lingscars.com
6/14
Good design exampleGood design example
Pop-over sub-menus
Recent news stories
Search clearly available
Discussion forumsClear link to
technical support
Consistent navigation
Special event links
Quick links to sub areas
Services for subscribers
7/14
Protected and encrypted Protected and encrypted pagespages
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/14
Static and Dynamic pagesStatic 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/14
PHPPHP<html><head><title>Test</title></head><body>
<h2>Example</h2>
<table><tr><th>Col1</th><th>Col2</th></tr>
<?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 = $row[‘value’];
print "<tr><td>$num</td><td>$val</td></tr>”;
?>
</table></body></html>
http://url?mac=21'; delete table lines;
http://url?mac=21
10/14
AJAXAJAX
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/14
Page transition diagramPage transition diagram
Help Company Products Services Support
Home page
About Us ContactSearch Sitemap Free Paid
Downloads Chat
Product
search
Service 1
Service 2
Service 3
Service 4
Dynamic pages
Applications
Static pages
Protected pages
Payment
Encrypted pages
Shortcuts
Search from every pagePayment from free support page
12/14
Multiple targetsMultiple 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
13/14
Merchant SystemsMerchant 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/14
Community SystemsCommunity 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/14
Outline Physical DesignOutline Physical Design
Load balancer
Web Server
(static data)
Application Server
(business logic)
Database server
(orders)
Legacy
(stock control)
Big IP
Apache
J2EE
OPS
IBM
16/14
SizingSizing
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
DatabaseDatabase
Lastminute.com system design
17/14
Site performanceSite performance(Netcraft.com)(Netcraft.com)
Note scale
Time since reboot varies from around a fortnight to a year