Download Good Design

ITM-711 Web Applications
Introduction
Outline
 Overview of The Web
 Good Design
2
The web in perspective
• World Wide Web (WWW)
• At CERN (the scientific research laboratory near
Geneva, Switzerland)
• In 1990, Tim Berners-Lee presented a proposal
for an information management system that
would enable the sharing of knowledge and
resources over a computer network.
• On 30 April 1993, CERN announced that the
World Wide Web would be free to use for
anyone.
The web in perspective
• In 1994 Tim Berners-Lee decided to constitute
the World Wide Web Consortium (W3C)
– Regulate the further development of the many
technologies in a standardization process:
• HTTP
• HTML
• etc.
• The following years saw an exponential growth
of the number of web sites and servers
WWW
 is an information space in which the
items of interest (resources) are
identified by Uniform Resource
Identifiers (URI)
5
WWW
 http://www.wu.ac.th
6
Architecture
 The web architecture has three bases:
 Identification
- URI
 Interaction
- messages + data + protocols
 Representation
- data format specification
7
Two-Tier Client/Server Architecture
• Two-tier client/server architecture has one client
and one server
8
Web Server Software
 The most popular Web Server programs
are:
 Apache
 Internet Information Server (IIS)
9
Application Script
 Server-Side Script
 install on web server/application
 CGI, ASP, ASP.NET, PHP
 Client-Side Script
 install on client terminals
 JavaScript, VBScript
10
Web Authoring Tools
 Text Editor
 Notepad
 Editplus
 WordPad
 HomeSite
11
Web Authoring Tools
 WYSIWYG
 Macromedia Dreamweaver
 Microsoft FrontPage
 NetObject Fusion
12
Good Design
 Structure
 the web site is structured sensibly
 if the structure is not clear, users will
not be able to navigate to the
information in which they are
interested
13
Good Design
 Common used techniques for aiding
navigation
 given an index at the top of the page
 provide a set of buttons at the top
and buttom
 design a way in which the user can
get back when you provide a hyperlink
 the use of frames or tables
14
Good Design
 Table VS Frames VS ...
 Frame:
- simple
- provide excellent navigation
- take up space on the visitor’s
screen for borders and scrollbars
15
Good Design
 Table VS Frames VS ...
 Table:
- makes the design of the page much
more complex
16
Good Design
 Table and Frames Comparison
 Frames:
- need multiple source files
- code is easy to read and it is clear
where any piece should go
- writing the code is time
consuming(but not too difficult)
- easy to add new pages or new
sections to your site
17
Good Design
 Table and Frames Comparison
 Frames:
- each frame can be scrolled
independently
- border can look messy
- screen can look cluttered
18
Good Design
 Table and Frames Comparison
 Tables:
- a single source file
- code can be confusing
- coding for tables can be very difficult
and is not easily maintained
- changing the structure of the site
involve a major re-write of the code
19
Good Design
 Table and Frames Comparison
 Tables:
- no borders are used
- a very clean look
20
Good Design
 Five components which must be
considered when creating a Web site:
 Learnability
 Efficiency
 Memorable
 Errors
 Satisfaction
21