Transcript Design methods for Internet based Information systems

5. Gathering and Preparing
Design Methods for IIS
Prof. Dr. O. De Troyer
1
5.1 Text
• Writing for the Web
– Keep it short
– Use the pyramid structure
• First a summary paragraph
– who, what, when, where, why, and how of the topic
• Later paragraphs gives more detail
– Use subheads
• Short and indicative
– Use bullets
• For separate but parallel ideas
– Use links for interesting asides
• Examples, illustrations, background material, sources, …
Design Methods for IIS
Prof. Dr. O. De Troyer
2
5.2 Numbers
• Numbers inside text need no special treatment
• Numbers in tables
– For large table use a Spreadsheet tool (Excel) to prepare the
table
– Make sure the table fits on a screen
• Numbers as a graph
– Use a Spreadsheet tool (Excel) to prepare the table
– Save as an image (GIF) in some image-editing program
Design Methods for IIS
Prof. Dr. O. De Troyer
3
5.3 Images
• Sources
– Scanning
• You may need permission (implicit copyright)!
– A digital Still Camera
– From the Web
• You may need permission (implicit copyright)!
– Clip Art
• Use GIF or JPEG format at 72 dpi
– From Video
• Using video-editing software
• Save as JPEG or GIF format
– From scratch
• Use 72 dpi
Design Methods for IIS
Prof. Dr. O. De Troyer
4
• Editing Images
– Use an image-editing program (e.g. Adobe
Photoshop)
– Check or adjust
• Size
• Resolution (higher than 72 dpi only increase the file size!)
• Colors
– use RGB for photographs
– For drawings and logos use Index Color Mode
• Brightness
Design Methods for IIS
Prof. Dr. O. De Troyer
5
• Compression and File formats
– GIF
•
•
•
•
Non photographic images: logos, diagrams, maps, …
8-bit colors only - 256 colours
Supports one bit of transparency
Support interlacing
– May give an idea of the image before it is completely loaded
– JPEG
• Photographs and images with complex colors that blend into one
another
• 24-bit colors
• lossy compression, but for photographs hardly perceptible
• Do not support transparency or animation
• Progressive JPEG supports form of interlacing
– From low resolution (fuzzy) to high resolution (clear)
Design Methods for IIS
Prof. Dr. O. De Troyer
6
• Compression and File formats (cont.)
– PNG (Portable Network Graphics)
• Features of GIF89a
• More than 256 colours possible
• Multiple degrees of transparency
• Not common to all browser
• Possible successor of GIF ?
– Other formats
• Need plug-ins or add-ons
• Should be avoid expect for special purpose (e.g. AutoCAD )
All use compression
• JPEG allows a choice of compression
See also http://www.pint.com/design for demos of compression
Design Methods for IIS
Prof. Dr. O. De Troyer
7
5.4 Animation
• Sources
– Animated GIFs
• From the Web
• From Clip Art collections
Again: pemission may be needed
– From scratch
• Animated GIFs
– Adobe Photoshop
– GifBuilder (Mac)
– GIF Construction Set (Windows)
•
•
•
•
Macromedia Fireworks
Macromedia Flash
3-D rendering Programs
…
Design Methods for IIS
Prof. Dr. O. De Troyer
8
• Displaying Animations
– Embedded in the page or in a separate window
– Usually plug-in needed
• Quicktime (.mov) -> QuickTime plug-in
• Flash (.swf) and Director (.dcr) -> Shockwave-Fash plugin
– Inform about the need for a plug-in
– Provide link to the plug-in
Not all users want to install plug-ins!
Design Methods for IIS
Prof. Dr. O. De Troyer
9
5.4 Sound
• Sources
– From a CD
– From the Web
• MP3 files
• MIDI files
Again: pemission may be needed
– From scratch
•
•
•
•
•
Macromedia SoundEdit
SimpleSound (Mac)
RecordSound (Windows)
SoundForge
CoolEdit
Design Methods for IIS
Prof. Dr. O. De Troyer
10
• Compression and file formats
– 1 CD track takes about 25MB !!
– Many compression algorithms (Codec)
• Qdesign Music codec -> .mov
• Qualcomm Purevoice codec -> .aif
• …
• Audio streaming
– File is not downloaded but plays immediately as its arrives
– Requires a special sender (on the server) and a plug-in (on the
client)
– Popular methods
• RealAudio
• QuickTime Streaming
• Windows Media
Design Methods for IIS
Prof. Dr. O. De Troyer
11
5.5 Video
• Sources
– From a Digital Video Camera
– Existing videotapes
– Video clips on
– From the Web
Again: permission may be needed
• May need editing
–
–
–
–
Final Cut Pro (Apple)
Premiere (Adobe)
iMovie (Apple)
EditDV
Design Methods for IIS
Prof. Dr. O. De Troyer
12
• Compression and file formats
– Video on television: 30 fps ( frames per second)
– Video on the Web: 12 or 15 fps
• Limited due to bandwidth and video system speed
modem: 8 fps
DSL or cable: 12 fps
Ethernet: 15 fpd
• Video Compression
– A lot of different codecs
– Mainstream video systems
• RealVideo -> .ram
• QuickTime -> .mov
• WindowsMedia -> .asf
Design Methods for IIS
Prof. Dr. O. De Troyer
13
5.6 Forms & Databases
• Form
Design Methods for IIS
Prof. Dr. O. De Troyer
14
• Form can be connected with a database
– Using scripting language
– Special software
• ColdFusion
• FileMaker Web Companion
• Interdev
• Nearly every DBMS can be used
–
–
–
–
–
FileMaker
Access
MySQL
Oracle
…
• Database runs on the server
Design Methods for IIS
Prof. Dr. O. De Troyer
15
6. Web Testing
Design Methods for IIS
Prof. Dr. O. De Troyer
16
• Difficult because of the unpredictability of the
Web medium
• Often regarded as low priority
• “Test on as many browsers as you can”
attitude
• “If it looks and load right, it must be right”
attitude
• If sites “do” something, functionality must be
tested too!
Design Methods for IIS
Prof. Dr. O. De Troyer
17
• Costs and requirements for testing can be
significant.
– Cost of different hardware, with various versions of common
browsers
– Cost of staff, time and resources needed to do the testing
• Web testing is a compromise between what can
be done and what should be done
• Test plans and procedures like in traditional SE
are necessary
Design Methods for IIS
Prof. Dr. O. De Troyer
18
Testing Issues
• Compatibility issues
– The more fancy issues the more difficult
• Realistic testing
– Testing all possible user entries is impossible
– Test plans for likely problem areas are needed
Design Methods for IIS
Prof. Dr. O. De Troyer
19
• Different types of tests
– Content testing
• Tests if content is correct
• Accuracy, spelling, grammar, copyrights, ownership…
– Functionality testing
• Unit testing
• Integration testing
– Usability testing
• Tests if site satisfy usability requirements
• Test with real users!
– Security testing
• Passwords, database access, intranet access, ...
– Technical testing
• Browser testing
• Platform testing
• Delivery testing
Design Methods for IIS
Prof. Dr. O. De Troyer
20
Functionality Testing
• Unit testing
– Small section or even a page
– For a static page
• Visual test
• Print test !
• HTML validation
– For an interactive page
• As for a classical program unit
Design Methods for IIS
Prof. Dr. O. De Troyer
21
Functionality Testing (cont.)
• Integration testing
– Test for consistency
• Font sizes, errors alerts, layout, …
– Link checking
• Checks if all links work properly
• Check if navigation make sense
Design Methods for IIS
Prof. Dr. O. De Troyer
22
Functionality Testing
• Browser testing
– Test if site works properly under a particular set of
browsers
• Primary focus must be on browsers that are likely for the
site
– Browsers are not perfect:
• correct code may operate improperly under certain
browsers
– Test if user can change default browser setting
– Test with basic browser facilities:
• bookmarking, printing, resizing, back button, …
– Test all plug-ins or other add-on needed
Design Methods for IIS
Prof. Dr. O. De Troyer
23
Functionality Testing (cont.)
• Platform testing
– Hardware + software + OS
– Test on typical platforms of target audience
–
–
–
–
–
–
Colors and fonts may be different
Plug-in may work differently
Filename extension may be different
Test of system performance (also download times)
Test with minimal system requirements
Testing on less powerful machines is also useful to see how
site degrades
– Sometime too powerful equipment may also be a problem
• E.g. some things (games, animation) may run to fast
– Consider different monitors
Design Methods for IIS
Prof. Dr. O. De Troyer
25
Table 8.1
Design Methods for IIS
Prof. Dr. O. De Troyer
26
Functionality Testing (cont.)
• Display testing
– Hardware + software + OS
– Test on typical platforms of target audience
– Colors and fonts may be different
– Plug-in may work differently
– Filename extension may be different
–
–
–
–
Test of system performance
Test with minimal system requirements
Testing on less powerful machines is also useful to see how site degrades
Sometime too powerful equipment may also be a problem
• E.g. some things (games, animation) may run to fast
Design Methods for IIS
Prof. Dr. O. De Troyer
27
Functionality Testing (cont.)
• Delivery testing
– Testing of network and server
– Often sites are developed on internal servers
– Test of performance issues:
• Load can be simulated (tools are available)
Design Methods for IIS
Prof. Dr. O. De Troyer
28
Dealing with the results of testing
• Possible actions
1. Fix bug directly or through workaround
2. Redesign (part of) the site to avoid the problem
3. Do nothing
• Problems must be prioritized based on
– Severity
– Occurrence rate
• Depending on available time and resources
problems can be fixed
Design Methods for IIS
Prof. Dr. O. De Troyer
29
7. Promotion and Maintenance
Design Methods for IIS
Prof. Dr. O. De Troyer
30
7.1 Promotion
• Promotion for Intranets & Extranets
Intended audience must be made aware of its availability and
functionality
–
–
–
–
–
–
Sending e-mails
Holding training classes
Cross linking of the site in already existing site
Default page as browser starts
Other non-web forms of communications
Care must be taken to announce the site on public web sites
Note: informing ≠ encouraging to use it
Design Methods for IIS
Prof. Dr. O. De Troyer
31
• Promotion for Public Web Sites
Major web sites towards general public:
•
•
•
•
•
Word-of-mouth
Print
Television
Radio advertisements
Announce to search engines
Corporate web site
• URL on all printed material
• Placing links on related sites
– May not be for free
– Comparable with advertisement in magazine
Design Methods for IIS
Prof. Dr. O. De Troyer
32
• Searching
People searching for the site must be able to find it.
– Search tools
• Use different heuristics to determine what a page is about
– E.g. frequency of words, proximity of words
– Meta Information
• May provide search tools with more detailed indexing
information
• HTML <META> allow to add arbitrary forms of meta
data
– Keywords and description have meaning for most search tools
– Some search tools return META description as short summary
(otherwise first few lines of the site)
– Also a lot of misuse
Design Methods for IIS
Prof. Dr. O. De Troyer
33
7.2 Maintenance
• Corrective maintenance
– Fix bugs and bad design
• Preventive maintenance
– To avoid future problems
• Adaptive maintenance
– When environment changes (e.g. new browser
version, changed functionality)
Design Methods for IIS
Prof. Dr. O. De Troyer
34
• Perfective maintenance
– Enhancements, new functionality, increasing
performance
• Content maintenance
– Keeping information up to date
• Delivery maintenance
– Maintenance of server and network
Design Methods for IIS
Prof. Dr. O. De Troyer
35
Maintenance Cost
• In general
– Maintenance takes 50% to 70% of total software
cost
• No reason why this would be less for web sites
Same techniques as in SE to reduce the
maintenance costs
Design Methods for IIS
Prof. Dr. O. De Troyer
36
7.2.1 Content Maintenance
• Responsibility for updates must be assigned
– What
– Who
– When (frequency)
• Manual or automatic (part of the workflow)
• If many people update the content
– Procedures and conventions needed
– Software tools to support this
• Never work on a live site
Design Methods for IIS
Prof. Dr. O. De Troyer
37
7.2.2 Corrective Maintenance
• Bugs have to be fixed also if bug is due to
browser bug
• In serious cases
– Replace site or page by a placeholder
Design Methods for IIS
Prof. Dr. O. De Troyer
38
7.2.3 Adaptive Maintenance
• Is much greater than for traditional software
• Hard to determine in advance
– Environment changes are hard to predict
Design Methods for IIS
Prof. Dr. O. De Troyer
39
7.2.4 Delivery Maintenance
• If site traffic increase
–
–
–
–
Increase bandwidth
Add servers
Outsourcing of the host
Site mirroring
• Hard- and software upgrades
Design Methods for IIS
Prof. Dr. O. De Troyer
40
7.2.5 User Feedback
• Direct feedback
– Through
• E-mail (reacting may be necessary!)
• Comment forms, questionnaires and discussion boards
(forum) in the web site
• Studies
• Verbal comments
– Not all request are realistic
Design Methods for IIS
Prof. Dr. O. De Troyer
41
• Indirect feedback
– Analysing statistical information captured by the
web server
– Tools are available
– Information must be interpreted correctly
• A lot of traffic is not necessary means success
Design Methods for IIS
Prof. Dr. O. De Troyer
42
– Terminology
• A hit
Request for a particular object
– Page with 5 images -> at least 6 hits
• A view
number of times a particular page is brought up in a
user’s browser regardless of HTTP request
• A Visit
actual visitation of a particular user to a site in a
particular time-frame
– One visit may include several views and several hits
• Unique visitor
particular user
– IP address not appropriate for this
Design Methods for IIS
Prof. Dr. O. De Troyer
43
– Web Logs
• Access log
contains detailed information about each request made to
the web server
HostFieldIdent AuthUser TimeStamp HTTPRequest StatusCode
BytesTransferred
example
131.116.213.114 - - [11/Mar/1999:01:15:36 -0800] “GET
/workshop/intervu.html HTTP/1.0” 200 1683
Also possible
– Type of browser being used (agent log)
– Link followed to reach page (referrer log)
• Error log: errors encountered by the server
– Time stamp + error message
– Example of type of errors
» Unable to find file
» Unauthorized access request
Design Methods for IIS
Prof. Dr. O. De Troyer
44