1 / 14

Web design and implementation

Web design and implementation. Dr. Tim King 4 th 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

vanwagenen
Download Presentation

Web design and implementation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web design and implementation Dr. Tim King 4th May 2010

  2. 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

  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 • 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

  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. 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. Page transition diagram Home page Help Company Products Services Support Product search Service 1 Free Paid Search Sitemap About Us Contact 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

  11. 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

  12. 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

  13. 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

  14. Sizing • Scalability • How many people? • At the same time? • Number of products • Size of downloads • Ring tones 10K • Music 4M • Software 200M • Movie 2G • Reliability Lastminute.com system design BigIP BigIP WebServer WebServer WebServer WebServer AppServer AppServer Database Database

More Related