server HTTP/ protocol Special server Special

Transcription

1 HTML form facilities WH1-1 HTML and HTTP as a general-purpose client WH1-2 Special server Special protocol Special client Application HTTP server HTTP/ HTML Web browser Advantages: Multi-platform, no installation, low development cost Disadvantage: Longer response times, less good user interfaces

2 HTTP server Java and Javascript HTML document with embedded Java or Javscript Web browser WH1-3 HTTP/HTML only Javascript Java Platform Multi-platform Mostly multi-platform Development cost Low Low Rather low Response times Less good Fast for downloaded code Slow download, then fast Example: Pushing a button may not require any download, just execution of code already available in the client. Web pages printable and visible on small screens WH1-4 Web pages less wide than 514 pixels can be printed on both A4 and US Letter sized paper without loss of information. Web pages less wide than 600 pixels can be shown on portable computers with 640x480 screen sizes without any need for horizontal scrolling. At you can find a ruler, which you can use to test the width of your web pages, as shown by the example below. For more information see

3 The original HTML text (abridged) <H2><A NAME="why-problems"></A> Why is Multi-Country Software Development Problematic</H2> <P><IMG SRC="together.gif" WIDTH=195 HEIGHT=193 ALIGN=left hspace=6 vspace=2> When software is designed by a small team of people sitting together, these can easily overcome such problems by immediate face-to-face communication. This is not possible in international co-operation, with developers sitting in offices at large geographical distances. Communication will primarily be through <A HREF=" </a> and telephone, combined with audio and video meetings and/or face-to-face meetings. The travel cost for face-to-face meetings and the disruption they cause to normal work means that they cannot be held frequently enough. And problems encountered often need immediate solution, cannot wait for the next scheduled face-to-face meeting. <P><BR clear=left><img SRC="dispersed.gif" WIDTH=255 HEIGHT=198 ALIGN=right hspace=6 vspace=2> <A HREF=" It is a well-known fact</a>, documented by much research in the area of <A HREF=" (Computer Mediated Communication)</A>, that while and similar communication tools are very useful, they also have known problems. People discussing issues by easily get stuck in contrary positions and discussion continues endlessly on issues which would WH1-5 WH1-6 Rendering with Netscape 3.0, 16 bit colour, 588 pixels wide

4 WH1-7 Rendering with Netscape 3.0, 16 bit color, 676 pixels wide Rendering of second paragraph 8 bit color WH1-8 Three times enlarged:

5 Using Web-safe palettes Before: WH1-9 What "Before:" looks like with a 256 color systems: Using Web-safe palette: WH1-10

6 Window size WH1-11 Default font = Geneva Default font = Times WH1-12

7 WH1-13 Another example WH1-14

8 Techical methods to get narrower text WH1-15 Old method: HTML tables New method: Style sheets Views on page control Fundamentalist/structuralist view: HTML gives logical organisation of document into headers, paragraphs, bullet lists, etc. User controls how these are rendered. Example: <STRONG> and <EM> versus <B> and <I> Practical/designer view: Try to get what you want. Example: WH1-16 This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multiline paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multiline paragraph. This is a multi-line paragraph. This is a multi-line paragraph. THIS IS a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multiline paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multi-line paragraph. This is a multiline paragraph. This is a multi-line paragraph. This is a multi-line paragraph.

9 Frames WH1-17 WH1-18 Two frames on top of each other

10 WH1-19 Opening a subwindow WH1-20 Back and Forward Back Forward Reload

11 Navigation WH1-21 WH1-22 Avoid dead end documents One large document, or a set of linked documents? People seldom scroll down very much.

12 Bottom main navigation bar WH1-23 From Apple Software Archives: From Netscape home page: The rule of max 7 things at the same time as applied to web pages! WH1-24

13 Habits, recognizable symbols, fashion WH1-25 Yahoo home page ( ) Infoseek home page ( ) One of Palme's pages ( ) WH1-26

14 Personalization Registration of user interest areas Recognition of users through cookies or login procedure My Yahoo Amazon books: Looking at your bying habits, we believe the following books would interest you... WH1-27 Context-sensitive Help on web pages? WH1-28 <a href="#" onclick="var csh = window.open('csh-login.html', 'csh','menubar,scrollbars,resizable=yes,status,width=400,heigh t=300'); "><img src="helpq.gif" suppress=true alt="help" border=0 height="11" width="6"></a>

15 The small question mark in the previous page WH1-29 Anti aliasing WH1-30 Utan Anti aliasing:

16 Varning för halos vid anti-aliasing WH1-31 Italics in small screen sizes (with anti-aliasing) High resolution text, italics: The book Creating Killer Web Sites by David Siegel, is a good overview of a designer s view of web design WH1-32 Low resolution, italics Low resolution, red

17 Italics in small screen sizes (without anti-aliasing) High resolution text, italics: The book Creating Killer Web Sites by David Siegel, is a good overview of a designer s view of web design WH1-33 Low resolution, italics Low resolution, red WH1-34 Creating logos:

18 Hur jag skapade en logo med skuggning: WH1-35 Hela logon: Lager 1, 2, 3 och 4 ovanpå varandra Lager 1 Framsidan Lager 2 Lager 3 Lager 4 Svart bakgrund något lite förskjutet åt vänster för att ge intryck av upplyst sida vänd mot ljuset något lite förskjutet åt höger för att ge intryck av skuggad sida vänd från ljuset Metaforer (liknelser) WH1-36

19 How this web page was done: WH1-37 World Wide Web HMI Design WH1-38 The same HTML may be formatted different for different viewers Test with different browsers and page widths Some users are using portable computers with small screens Avoid dithering of same-coloured areas Use only 216 colour Web-safe palette Download time can take a lot of time, especially over modem connections Use small graphics, especially for animated gifs Compress graphics Repeat the same graphic several times Response times is slow when pages are fetched through the network Put more data on fewer pages Use Java or Javascript to move interaction from the server to the user personal computer

20 Claris software home page Download time with 28.6 bps modem: 80 seconds WH1-39 Euroseek home page Download time with 28.6 bps modem: 40 seconds WH1-40

21 NK-hallen search page Download time with 28.6 bps modem: 80 seconds WH1-41 NK-hallen sök och lägg I kundvagnen: WH1-42

22 WH1-43 WH1-44

23 WH1-45 WH1-46

24 WH1-47 WH1-48

25 WH1-49 WH1-50

26 WH1-51 WH1-52

27 WH1-53 WH1-54

28 WH1-55 WH1-56

29 WH1-57 WH1-58

30 WH1-59 WH1-60

31 WH1-61 WH1-62

32 WH1-63 WH1-64

33 WH1-65 WH1-66

34 WH1-67 WH1-68

35 WH1-69 WH1-70 Nu var sidan återigen för smal. Jag försökte formattera om den till bredare web-sida, och fick då följande. Därefter hade min dialog totalt spårat ur, jag fick pröva mig fram ett flertal gånger för att få det att fungera och slippa ytterliggare felutskrifter.

36 WH1-71 WH1-72

37 Slöseri med toner WH1-73 Web design references David Siegel: Creating Killer Web Sites Yale Web Style Guide Sun Microsystems Guide to Web Style The Webmaster s Reference John December s Web Development pages WH1-74

38 Internet World Online (US) Designing your E-Commerce Site index.html Tales of a Web customer _serv_content.html Recipes for Alchemy _main_content.html WH1-75