Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web design and implementation Dr. Tim King 13th May 2008 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 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 Dynamic pages HTML with extra tags pre-processed – Java Server Pages (JSP) – Active Server Pages (ASP) AJAX (Asynchronous Javascript and XML) – – – – – Define page with named sections Make XMLRequest call with data entered When result returns update DOM No need to refresh entire web page Google Web Toolkit • Java and AJAX • http://code.google.com/webtoolkit • Desire to produce web apps that compete with local ones 8/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 9/14 Multiple targets Different devices – – – – Different browsers Different bandwidth, resolutions, screen sizes, colours, printers Phones & PDAs TV: Open TV, DVB-TAM-HTML, WebTV XML helps, but doesn’t solve everything Phones and PDAs have different physical characteristics – – – – WAP issues Small screens Battery life essential issue Java Midlets a step forward TV and other streaming media have different metaphors to the Web – – – – Device limitations Audio important High colour depth, poor display quality Evolution: Text -> Still Pictures-> Moving Pix-> 3D 10/14 Merchant Systems Requirements – – – – – – – – – 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 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 12/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 13/14 Site performance (Netcraft.com) Time since reboot varies from around a fortnight to a year Note scale 14/14