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 l Design factors for presenting information effectively on the Web 2
Ch 4. 1 Web Construction Factors l 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. Hypertext and Hypermedia 2. Hardware and Software Constraints 3. Basic Web Interface Design 4. Dealing with Multimedia 5
Ch 4. 1 Web Construction Factors 6
Ch 4. 1 Web Construction Factors 1. Hypertext and Hypermedia Hypertext Concept l Definition l 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 back link external link this is text or is it Hypertext? only links can tell 7
Ch 4. 1 Web Construction Factors 1. Hypertext and Hypermedia Hypertext Concept l l Hyper implies that the text flow is non-linear. Hypertext is therefore usually non-linear: l Blocks of text (pages) l Links between pages create a network l 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. 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 l l Hypertext applications have been around for a long time: l 1968: First public hypertext demonstration. l 1985: Symbolics Document Examiner (Janet Walker) released; was first hypertext-based system to gain widespread acceptance and usage. l 1985: Note. Cards was released by Xerox. l 1987: Apple Computer releases Hyper. Card, one of the most successful hypertext applications (was in use till 2004!). l 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. l l These documents may be located on different machines, or even in different countries! A new protocol, Hyper. Text Transfer Protocol (HTTP) was developed to handle global hypertext. A new format, Hyper. Text Markup Language (HTML), was developed. l l l Modeled upon SGML (Standardized General Markup Language) 11
Ch 4. 1 Web Construction Factors 1. Hypertext and Hypermedia l 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. l l l 12
Ch 4. 1 Web Construction Factors 1. Hypertext and Hypermedia l Hypertext systems + additional media l Illustrations, photographs, video and sound l Links/hotspots may be in media l Areas of pictures l 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 l Browser l People use many different browsers l 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 l Browser l People use many different browsers l Web browser usage statistics 16
Ch 4. 1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins l Browser Incompatibility l Each browser may have its own set of supported standards l l Many browsers may add some of their own tags l l l 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 Java. Script make the incompatibility problem even worse 17
Ch 4. 1 Web Construction Factors 2. Hardware and Software Constraints Browser and plug-ins l Plug-ins l l 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: l l Quick. Time 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 l Plug-ins l Example: Flash Player in Disney official website 19
Ch 4. 1 Web Construction Factors 2. Hardware and Software Constraints Platform compatibility l Software platforms l l l 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 l l 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 l l l Definition: a collection of characters Examples: l 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. ). l Big 5 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 l Character Encoding l Definition: the scheme of transforming character codes l in sequences of octets for computer processing. Big 5 and GB are the names of the character sets as well as the encoding method; UTF-8 is an encoding method for Unicode. Big 5 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 l l Examples: l GB 2312 (Guo Biao) encompasses about 7, 000 simplified characters used in China. It is also adopted in Singapore. l 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. l 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 l Resolution l Definition l l Standard resolution l l l Number of pixels per inch 300 dots per inch (dpi) for print 72 dpi for web Consider other end uses l l 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 l File formats l Name files properly l l 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 l Web graphics highlights l l l 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 l 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 l Speed was No. 1 priority for the majority of web users l l With broadband, less critical But not everyone has broadband Design for speed consideration l l Don’t make assumptions on the user bandwidth connection! l Users may have different accesses through mobile devices, dial-up modems, etc. 27
Ch 4. 1 Web Construction Factors 2. Hardware and Software Constraints l Bandwidth comparisons Connection Type Top Speed 14. 4 Kbps modem 14. 4 Kbps 28. 8 Kbps modem 28. 8 Kbs Digital (ISDN) phone 128 Kbps line T 1 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 (T 3) 28
Ch 4. 1 Web Construction Factors 2. Hardware and Software Constraints Other hardware constraints l Computational power CPU and GPU processing power would affect the smooth deliveries of multimedia presentations l l Storage capacity Data retrieval speed of a storage media Volume of the storage media Hierarchy of storage media l l l § 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 l Knowing where you are l Knowing what you can do l Knowing where you are going l l Or what will happen Knowing where you have been l Or what you have done 31
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Designing for the Web l Who is in Control? l You often do not have control of the final appearance l l Letter spacing, fonts (for some browsers) Colour depth, browser type 32
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Designing for the Web l Your Viewers, may not be your clients l Know their patience, age, gender, purpose l l Establish the tone and personality In fact, web pages are not for all people l l Always have a specific audience E. g. Grants. Net. 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 l Five content types l l l 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 l Five content types l l 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 l Text for the web l l l 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 l Style and Fonts l l l Generic styles universal: serif, sans, fixed, bold, italic Specific fonts too, but vary between platforms Colour --- often abused! l Do not to be too colourful! 38
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Content Design l Style and Fonts l 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 l Body Type on the Web l Use relative font sizes (e. g. large, 120%, 1. 5 em) so users can enlarge the font from the browser if necessary (especially IE users) l Avoid CAPITALIZED LETTERS and exclamation marks! l Never use underlining for emphasis l 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 l Graphics and Color for the Web l Use only a few main colors on your website l Text and background must have enough contrast but the colors should not strain the eyes l Use meaningful graphics to show real content l Optimize images with appropriate size and compression 41
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Content Design l Graphics and Color for the Web l Keep illustrations simple and have short and simple text descriptions if not self-explanatory l Use relative page layouts and stylesheets instead of hard coded tables, images and frames l 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 l Graphics and Color for the Web l l 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 l Flash Animation l l Flash is not a standard but very popular Flash plug-in l l 200 million downloaded from Macromedia Why not GIFs and DHTML? l l 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 l When not to use Flash? l Informational vs. entertaining l l Multimedia Flash l l l 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 l Screen Size l Is 640 x 480 a standard? l l l Mac: 580 x 315 PC: 635 x 314 No scroll at homepage at all l l 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 l Easy Printing l l l 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 l Easy Printing: Bad Example 48
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Content Design l Easy Printing: Good Example (with a one-column format) 49
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Navigation Design l Techniques l Sectional navigation l l l 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 l Techniques l Audience-splitting l Web pages for specified user populations are grouped together l 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 l Techniques l Path navigation l 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 l Layout Design l l 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 l Layout Design l Using of tables l Logically together vs. physically together ABCDEFGHIJKLM NOPQRSTUVWXYZ 54
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Navigation Design l Layout Design l Using of tables - examples Hong Kong Government Website Gov. HK 55
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Navigation Design l Site maps l 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 l Web Structure l Four types of organization of information on the web site: l Linear § l Hierarchical § l E. g. computer directories, taxonomy classification Network § l 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 l Web Structure l Rare to use only one l l 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 l Web Structure l A pure hierarchy is rare l 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 l Global navigation l 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 l 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 l Frames l A frame is an area of the browser window that stays visible as the user moves from page to page l A simple way to provide global navigation 62
Ch 4. 1 Web Construction Factors 3. Basic Web Interface Design Navigation Design l Contextual Links l Recommended rather than to insert URLs directly to web pages l 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 l Navigational Control l The web site should provide the following navigational control, whenever possible: l l l l 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 l 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 l 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 l l l 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 low-end systems. Don’t design specifically for one browser or platform 68
Ch 4. 1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns l Speed Issues l User starts to wonder after 10 seconds l l Jacob Nielsen, www. useit. com Progress loading l l 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 l Progressive JPEG 70
Ch 4. 1 Web Construction Factors 4. Dealing with Multimedia Delivery Concerns l Progress indicator l Appear at the bottom of the video display 71
Ch 4. 1 Web Construction Factors 4. Dealing with Multimedia Visual Communication Concerns l l Use graphics only for value-added purposes Graphics need to be designed so that they will not degrade performance, and viewability on low-end 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 l Use anti-aliasing for most text in graphics as it makes graphics look more polished and professional. l 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 anti-aliased texts 73
Ch 4. 1 Web Construction Factors 4. Dealing with Multimedia Visual Communication Concerns l l 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 l l l 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/Browser. News/stat. htm l Anderson, R. A. , Exploring the Art and Technology of Web Design http: //www. delmarlearning. com/Browse_Product_Detail. aspx? Cat. I D=18669&ISBN=1401871070 l Design guidelines for the Web http: //www. usabilitynet. org/tools/webdesign. htm 76
Скачать презентацию Information and Communication Technology Multimedia Production and Web
220025123f6c290951e1c351a36b980d.ppt