1. 1 1 Design Methods for IIS Prof. Dr. O. De Troyer 5. Gathering and Preparing

2. 2 2 Design Methods for IIS Prof. Dr. O. De Troyer 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, …

3. 3 3 Design Methods for IIS Prof. Dr. O. De Troyer 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

4. 4 4 Design Methods for IIS Prof. Dr. O. De Troyer 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

5. 5 5 Design Methods for IIS Prof. Dr. O. De Troyer 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

6. 6 6 Design Methods for IIS Prof. Dr. O. De Troyer 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)

7. 7 7 Design Methods for IIS Prof. Dr. O. De Troyer 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 compressionhttp://www.pint.com/design

8. 8 8 Design Methods for IIS Prof. Dr. O. De Troyer 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 …

9. 9 9 Design Methods for IIS Prof. Dr. O. De Troyer 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!

10. 10 Design Methods for IIS Prof. Dr. O. De Troyer 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

11. 11 Design Methods for IIS Prof. Dr. O. De Troyer 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

12. 12 Design Methods for IIS Prof. Dr. O. De Troyer 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

13. 13 Design Methods for IIS Prof. Dr. O. De Troyer 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

14. 14 Design Methods for IIS Prof. Dr. O. De Troyer 5.6 Forms & Databases Form

15. 15 Design Methods for IIS Prof. Dr. O. De Troyer 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

16. 16 Design Methods for IIS Prof. Dr. O. De Troyer 6. Web Testing

17. 17 Design Methods for IIS Prof. Dr. O. De Troyer 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!

18. 18 Design Methods for IIS Prof. Dr. O. De Troyer 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

19. 19 Design Methods for IIS Prof. Dr. O. De Troyer 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

20. 20 Design Methods for IIS Prof. Dr. O. De Troyer 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

21. 21 Design Methods for IIS Prof. Dr. O. De Troyer 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

22. 22 Design Methods for IIS Prof. Dr. O. De Troyer 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

23. 23 Design Methods for IIS Prof. Dr. O. De Troyer 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

25. 25 Design Methods for IIS Prof. Dr. O. De Troyer 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

26. 26 Design Methods for IIS Prof. Dr. O. De Troyer Table 8.1

27. 27 Design Methods for IIS Prof. Dr. O. De Troyer 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

28. 28 Design Methods for IIS Prof. Dr. O. De Troyer 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)

29. 29 Design Methods for IIS Prof. Dr. O. De Troyer 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

30. 30 Design Methods for IIS Prof. Dr. O. De Troyer 7. Promotion and Maintenance

31. 31 Design Methods for IIS Prof. Dr. O. De Troyer 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

32. 32 Design Methods for IIS Prof. Dr. O. De Troyer 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

33. 33 Design Methods for IIS Prof. Dr. O. De Troyer 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 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

34. 34 Design Methods for IIS Prof. Dr. O. De Troyer 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)

35. 35 Design Methods for IIS Prof. Dr. O. De Troyer Perfective maintenance –Enhancements, new functionality, increasing performance Content maintenance –Keeping information up to date Delivery maintenance –Maintenance of server and network

36. 36 Design Methods for IIS Prof. Dr. O. De Troyer 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

37. 37 Design Methods for IIS Prof. Dr. O. De Troyer 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

38. 38 Design Methods for IIS Prof. Dr. O. De Troyer 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

39. 39 Design Methods for IIS Prof. Dr. O. De Troyer 7.2.3 Adaptive Maintenance Is much greater than for traditional software Hard to determine in advance –Environment changes are hard to predict

40. 40 Design Methods for IIS Prof. Dr. O. De Troyer 7.2.4 Delivery Maintenance If site traffic increase –Increase bandwidth –Add servers –Outsourcing of the host –Site mirroring Hard- and software upgrades

41. 41 Design Methods for IIS Prof. Dr. O. De Troyer 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

42. 42 Design Methods for IIS Prof. Dr. O. De Troyer 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

43. 43 Design Methods for IIS Prof. Dr. O. De Troyer –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

44. 44 Design Methods for IIS Prof. Dr. O. De Troyer –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