Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Information and Communication Technology “Multimedia Production and Web Site Development” Part B Web Site Development Chapter 4 Presenting Information on the Internet - 4.1 Web Construction Factors 1 Ch 4.1 Web Construction Factors Design factors for presenting information effectively on the Web 2 Ch 4.1 Web Construction Factors Outline and discuss the various factors to be considered in the construction of web pages 3 Ch 4.1 Web Construction Factors 4 Ch 4.1 Web Construction Factors Table of Contents 1. 2. 3. 4. Hypertext and Hypermedia Hardware and Software Constraints Basic Web Interface Design Dealing with Multimedia 5 Ch 4.1 Web Construction Factors 6 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Hypertext Concept Definition Hypertext is text which contains links to other texts. The term was invented by Ted Nelson around 1965. bookmark home this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell back link external link this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell this is text or is it Hypertext? only links can tell 7 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Hypertext Concept Hyper implies that the text flow is non-linear. Hypertext is therefore usually non-linear: Blocks of text (pages) Links between pages create a network Users can follow their own path through information 8 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Example: Interactions in hypertext •Professor Alan’s puzzle square @ http://www.hiraeth.com/alan/misc/game/game.html user clicks arrows to move squares hot links to other puzzles 9 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Early Hypertext Technology & Implementation Hypertext applications have been around for a long time: 1968: First public hypertext demonstration. 1985: Symbolics Document Examiner (Janet Walker) released; was first hypertext-based system to gain widespread acceptance and usage. 1985: NoteCards was released by Xerox. 1987: Apple Computer releases HyperCard, one of the most successful hypertext applications (was in use till 2004!). 1987: First ACM conference on hypertext. The concept of non-linear documents has been ready, but so far, in systems, most documents reside on the same computer. 10 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Early Hypertext Technology & Implementation 1989: Tim Berners-Lee comes up with the idea of formatting research documents as hypertext, and hyperlinking them together. These documents may be located on different machines, or even in different countries! A new protocol, HyperText Transfer Protocol (HTTP) was developed to handle global hypertext. A new format, HyperText Markup Language (HTML), was developed. Modeled upon SGML (Standardized General Markup Language) 11 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Hypermedia Definition Hypermedia is a logical extension of the term hypertext, in which graphics, audio, video, plain text and hyperlinks intertwine to create a generally nonlinear medium of information. Ted Nelson was also the first to use this term in 1965. The World Wide Web (WWW) is the best example of hypermedia applications. 12 Ch 4.1 Web Construction Factors 1. Hypertext and Hypermedia Hypermedia Hypertext systems + additional media Illustrations, photographs, video and sound Links/hotspots may be in media Areas of pictures Times and locations in video 13 Ch 4.1 Web Construction Factors 14 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins Browser People use many different browsers Netscape Navigator / Communicator, Internet Explorer, Safari, Firefox, Lynx, Opera, Neoplanet etc. Firefox Internet Explorer Netscape Lynx 15 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins Browser People use many different browsers Web browser usage statistics 16 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins Browser Incompatibility Each browser may have its own set of supported standards Many browsers may add some of their own tags Lynx does not display graphics at all E.g., the <marquee> tag is supported by Internet Explorer Browser, but not a part of HTML standard The <colgroup> is a part of HTML standard, but not supported by Netscape Navigator The standards of cascading style sheets (CSS) and JavaScript make the incompatibility problem even worse 17 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins Plug-ins Definition: It is a computer program that interacts with a main (or host) application to provide a certain, usually very specific, function on demand. Examples include: QuickTime Windows Media Player Flash player Java Applet Based on JVM (Java Virtual Machine) to support multiple platforms without re-development 18 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins Plug-ins Example: Flash Player in Disney official website 19 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Platform compatibility Software platforms Most PCs run on Windows operating system But still a significant portion view the web from Macintosh computers and Unix/Linux systems Each operation system has its own characteristics E.g., Windows machines and Macs have different ways of displaying type, leading to same size type appearing much larger on Windows than on Mac Browser and plug-in releases for Macintosh lag behind the Windows versions 20 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Languages and text encoding methods Character set Definition: a collection of characters Examples: ASCII (American Standard Code for Information Interchange) is composed of 128 characters, containing 52 Latin letters (a-z, A-Z), numerals (0-9), symbols (! #..) and some control characters (tab, line break, etc.). Big5 is the Chinese character set and encoding used extensively in Hong Kong and Taiwan. It contains over 13,000 characters. 21 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Languages and text encoding methods Character Encoding Definition: the scheme of transforming character codes in sequences of octets for computer processing. Big5 and GB are the names of the character sets as well as the encoding method; UTF-8 is an encoding method for Unicode. Big5 and GB are two different sets of character encoding. They are not compatible with each other, and conversion from one to another is problematic because there is not always a one-to-one correspondence between two characters in the two sets. 22 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Languages and text encoding methods Character set Examples: GB 2312 (Guo Biao) encompasses about 7,000 simplified characters used in China. It is also adopted in Singapore. GBK is an extension to GB, it supports over 21,000 characters. The latest standard is GB 18030-2000, which covers all the code points in Unicode 3.0. Unicode is the international character set that encompasses characters from different languages in the world. It codes more than 20,000 Chinese characters. 23 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Resolution and file formats Resolution Definition Standard resolution Number of pixels per inch 300 dots per inch (dpi) for print 72 dpi for web Consider other end uses 72 dpi of a web graphic will make for a blocky and blotchy printed image Suggest using vector graphics (with no loss of quality) or create a high-resolution image for printing use. 24 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Resolution and file formats File formats Name files properly GIF files named with suffix .gif, JPEG files have either .jpeg or .jpg as suffix and PNG files end in .png Even if files are saved in the correct format, the browser will not recognize them without the proper suffix 25 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Resolution and file formats Web graphics highlights Save images with flat areas of color and hard edges in GIF format Save photographic images in JPEG format Web graphics should be created in RGB color mode instead of CMYK The only meaningful measurement for web graphics is pixels Consideration of accesses with different devices Desktop monitors, PDAs, mobile phones, kiosks of different colour compatibility and resolution support 26 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Bandwidth limitation Speed was No. 1 priority for the majority of web users With broadband, less critical But not everyone has broadband Design for speed consideration Don’t make assumptions on the user bandwidth connection! Users may have different accesses through mobile devices, dial-up modems, etc. 27 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Bandwidth comparisons Connection Type Top Speed 14.4 Kbps modem 14.4 Kbps 28.8 Kbps modem 28.8 Kbs Digital (ISDN) phone line 128 Kbps T1 dedicated connection 1,500 Kbps Asymmetric Digital Subscriber Line (ADSL) 64 Kbps (send) 1,500 Kbps (receive) Cable modem 10,000 Kbps Fiber-optic backbone 45,000 Kbps (T3) 28 Ch 4.1 Web Construction Factors 2. Hardware and Software Constraints Other hardware constraints Computational power CPU and GPU processing power would affect the smooth deliveries of multimedia presentations Storage capacity Data retrieval speed of a storage media Volume of the storage media Hierarchy of storage media Cache memory, main memory, graphics buffer, hard disks, DVDs, CDs, and tape 29 Ch 4.1 Web Construction Factors 30 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Four Golden Rules Knowing where you are Knowing what you can do Knowing where you are going Or what will happen Knowing where you have been Or what you have done 31 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Designing for the Web Who is in Control? You often do not have control of the final appearance Letter spacing, fonts (for some browsers) Colour depth, browser type 32 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Designing for the Web Your Viewers, may not be your clients Know their patience, age, gender, purpose Establish the tone and personality In fact, web pages are not for all people Always have a specific audience E.g. GrantsNet.org vs. Disney.go.com 33 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Web Page Design 1. Content Design 2. Navigation Design 34 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Five content types Facts: specific information in the form of a statement or data. They are unique, requiring no explanation. Concepts: understanding what something is and what it is not. Procedures: represents a sequential number of steps that tell you how to do something specific. 35 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Five content types Processes: explains how something works. They involve a flow of multiple events that describe how a system works. Principles: are general advice given by experts who have developed a knack for doing something well. 36 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Text for the web People do not read web pages in the same way as they do a book Put your key message first. Use an inverted pyramid approach, starting with the conclusion Include one idea per paragraph. Highlight the keywords. Use summary descriptions, subheads, bulleted lists and short paragraphs. Use half the word count (or less) than conventional writing. 37 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Style and Fonts Generic styles universal: serif, sans, fixed, bold, italic Specific fonts too, but vary between platforms Colour --- often abused! Do not to be too colourful! 38 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Style and Fonts Comparison of some sans serif fonts Arial bold and Arial Black Arial and Impact Arial and Comic Sans Arial and Trebuchet 39 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Body Type on the Web Use relative font sizes (e.g. large, 120%, 1.5em) so users can enlarge the font from the browser if necessary (especially IE users) Avoid CAPITALIZED LETTERS and exclamation marks! Never use underlining for emphasis Do not use images to display text unless it is absolutely necessary for branding 40 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Graphics and Color for the Web Use only a few main colors on your website Text and background must have enough contrast but the colors should not strain the eyes Use meaningful graphics to show real content Optimize images with appropriate size and compression 41 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Graphics and Color for the Web Keep illustrations simple and have short and simple text descriptions if not self-explanatory Use relative page layouts and stylesheets instead of hard coded tables, images and frames Provide a sentence between tables and text and avoid scrolling when viewing a table. 42 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Graphics and Color for the Web Have a significant lightness difference between the information (text) and the background. Choose a neutral background color, like white, black, or gray if a lot of different-colored text is used. 43 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Flash Animation Flash is not a standard but very popular Flash plug-in 200 million downloaded from Macromedia Why not GIFs and DHTML? Vector based easier to scale and render Smaller file size download faster 44 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design When not to use Flash? Informational vs. entertaining Multimedia Flash Difficult to update Bandwidth requirement Alternative when no Flash plug-in Plug-in compatibility and browser support 45 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Screen Size Is 640 x 480 a standard? Mac: 580 x 315 PC: 635 x 314 No scroll at homepage at all www.useit.com/alertbox/9605.html Most people select options above the scroll line 46 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Easy Printing An extra printer-friendly version of the web page which opens in a separate browser window Printable version contains no frames and navigation bars Use a standard one-column format Background color is usually white Scripts or style sheets can be used to create a printer-friendly page automatically 47 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Easy Printing: Bad Example 48 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Content Design Easy Printing: Good Example (with a one-column format) 49 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Techniques Sectional navigation Web pages are grouped into different sections Indexes provide for different content sections E.g., press sites group news into local news, international, financial, education, etc 50 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Techniques Audience-splitting Web pages for specified user populations are grouped together E.g., The Hong Kong Polytechnic University Web Site organizes web pages according to user roles (prospective students, current students, staff, alumni etc.) 51 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Techniques Path navigation Path navigated previously is shown on current page so that users can know where they are. 52 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Layout Design Use a consistent layout. Define global and individual page templates Use a clean visual design Use headings, lists and consistent structure to increase legibility Use consistent CSS for layout and style where possible 53 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Layout Design Using of tables Logically together vs. physically together ABCDEFGHIJKLM NOPQRSTUVWXYZ 54 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Layout Design Using of tables - examples Hong Kong Government Website GovHK 55 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Site maps Definition: A list of the contents of the site, organized to reflect the structure of the site by section and subsection 56 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Web Structure Four types of organization of information on the web site: Linear Hierarchical E.g. computer directories, taxonomy classification Network E.g. process flows, prioritized lists Requires lots of user memory on the path navigated Grid E.g. databases, multi-parent hierarchical models 57 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Web Structure Rare to use only one Most websites build on a judicious combination of these four, with one dominant theme Hierarchical plus networks very common 58 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Web Structure A pure hierarchy is rare We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level 59 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Global navigation Global navigation While, for a small site, it may be possible to show the major links on every page 60 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Vertical global navigation bar Global navigation http://www.gov.hk/en/ 61 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Frames A frame is an area of the browser window that stays visible as the user moves from page to page A simple way to provide global navigation 62 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Contextual Links Recommended rather than to insert URLs directly to web pages Reveals to surfers something about the content of the linked web pages 63 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Navigational Control The web site should provide the following navigational control, whenever possible: Table of contents Taxonomy Vocabulary-limited indexes Search Site map Location identification (or path navigation) Navigational control panel for all HTML pages 64 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Principles of Successful Navigation 1. Be easily learned 2. Remain consistent 3. Provide feedback 4. Appear in context 5. Offer alternatives 65 Ch 4.1 Web Construction Factors 3. Basic Web Interface Design Navigation Design Principles of Successful Navigation 6. Require an economy of action and time 7. Provide clear visual messages 8. Use clear and understandable labels 9. Be appropriate to the site’s purpose 10. Support user’s goals and behavior 66 Ch 4.1 Web Construction Factors 67 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns Don’t over-use graphics and animations. Graphics and animations tend to occupy large portion of areas in most pages. Proportionally, there is less space to convey a message in text Graphics need to be designed so that they will not degrade performance and viewability on lowend systems. Don’t design specifically for one browser or platform 68 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns Speed Issues User starts to wonder after 10 seconds Jacob Nielsen, www.useit.com Progress loading Use of progressive JPEG files, progress indicators E.g. www.islandpress.com 69 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns Progressive JPEG 70 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns Progress indicator Appear at the bottom of the video display 71 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Visual Communication Concerns Use graphics only for value-added purposes Graphics need to be designed so that they will not degrade performance, and viewability on lowend systems. Don’t make graphics look like buttons but don’t link to anything Provide alternate text for every graphic. Alternate text displays in the event that the graphic doesn’t 72 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Visual Communication Concerns Use anti-aliasing for most text in graphics as it makes graphics look more polished and professional. However, for type under 10 points, it’s better to turn off anti-aliasing for small text as it may blur the whole letter shape and make the text less readable Aliased and anti-aliased texts 73 Ch 4.1 Web Construction Factors 4. Dealing with Multimedia Visual Communication Concerns Do not use too many colours as it is visually chaotic and makes it difficult to prioritize the information Do not use wild background tile patterns as it makes it difficult to read the text on the page. 74 Ch 4.1 Web Construction Factors 75 Ch 4.1 Web Construction Factors References Niederst, J., and Koman, R. (2003). Learning web design: A beginner's guide to HTML, graphics and beyond (Second edition). USA: O’Reilly and Associates, Inc. P. 251-264, Niederst, J. Designing for the Web. O’Reilly and Associates Browser Usage Statistics from Browser News http://www.upsdell.com/BrowserNews/stat.htm Anderson, R. A., Exploring the Art and Technology of Web Design http://www.delmarlearning.com/Browse_Product_Detail.aspx?CatI D=18669&ISBN=1401871070 Design guidelines for the Web http://www.usabilitynet.org/tools/webdesign.htm 76