1 1 design methods for iis prof. dr. o. de troyer 5. gathering and preparing

11Design Methods for IISDesign Methods for IIS Prof. Dr. O. De TroyerProf. Dr. O. De Troyer

5. Gathering and Preparing


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, …


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


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


• 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


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


• 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

http://www.pint.com/design


5.4 Animation• Sources

– Animated GIFs• From the Web• From Clip Art collectionsAgain: pemission may be needed

– From scratch• Animated GIFs

– Adobe Photoshop – GifBuilder (Mac)– GIF Construction Set (Windows)

• Macromedia Fireworks• Macromedia Flash• 3-D rendering Programs• …


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

in – Inform about the need for a plug-in – Provide link to the plug-in Not all users want to install plug-ins!


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


• 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


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


• 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 speedmodem: 8 fpsDSL or cable: 12 fpsEthernet: 15 fpd

• Video Compression– A lot of different codecs– Mainstream video systems

• RealVideo -> .ram• QuickTime -> .mov• WindowsMedia -> .asf


5.6 Forms & Databases

• Form


• 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


6. Web Testing


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


• 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


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


• 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


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


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


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


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


Table 8.1


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


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)


Dealing with the results of testing • Possible actions

1. Fix bug directly or through workaround2. Redesign (part of) the site to avoid the problem3. Do nothing

• Problems must be prioritized based on– Severity– Occurrence rate

• Depending on available time and resources problems can be fixed


7. Promotion and Maintenance


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


• Promotion for Public Web SitesMajor 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


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


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)


• Perfective maintenance– Enhancements, new functionality, increasing

performance

• Content maintenance– Keeping information up to date

• Delivery maintenance– Maintenance of server and network


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


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 siteNever work on a live site


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


7.2.3 Adaptive Maintenance

• Is much greater than for traditional software

• Hard to determine in advance– Environment changes are hard to predict


7.2.4 Delivery Maintenance

• If site traffic increase– Increase bandwidth– Add servers– Outsourcing of the host– Site mirroring

• Hard- and software upgrades


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


• 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


– Terminology• A hit

Request for a particular object– Page with 5 images -> at least 6 hits

• A viewnumber of times a particular page is brought up in a user’s browser regardless of HTTP request

• A Visitactual visitation of a particular user to a site in a particular time-frame

– One visit may include several views and several hits

• Unique visitorparticular user

– IP address not appropriate for this


– Web Logs• Access log

contains detailed information about each request made to the web server

HostFieldIdent AuthUser TimeStamp HTTPRequest StatusCode BytesTransferredexample131.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

1 1 design methods for iis prof. dr. o. de troyer 5. gathering and preparing

Documents