Understanding and Educating the Minds of Boys April 2011 Kelley King Tim Coble NESA
Web design and implementation Dr. Tim King 4 th May 2010.
-
Upload
marvin-neal -
Category
Documents
-
view
222 -
download
0
Transcript of Web design and implementation Dr. Tim King 4 th May 2010.
![Page 1: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/1.jpg)
Web design and Web design and implementationimplementation
Dr. Tim King4th May 2010
![Page 2: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/2.jpg)
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
![Page 3: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/3.jpg)
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– 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
![Page 4: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/4.jpg)
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
![Page 5: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/5.jpg)
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
![Page 6: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/6.jpg)
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
![Page 7: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/7.jpg)
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)
![Page 8: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/8.jpg)
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
![Page 9: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/9.jpg)
9/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
![Page 10: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/10.jpg)
10/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
![Page 11: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/11.jpg)
11/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
![Page 12: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/12.jpg)
12/14
Community SystemsCommunity 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
![Page 13: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/13.jpg)
13/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
![Page 14: Web design and implementation Dr. Tim King 4 th May 2010.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfbd1a28abf838ca20b9/html5/thumbnails/14.jpg)
14/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