World Wide Web and Hypermedia - PowerPoint PPT Presentation

1 / 74
About This Presentation
Title:

World Wide Web and Hypermedia

Description:

can tell. 3. Hypertext - Not Just Linear. Non-linear structure. blocks of text (pages) ... download time needs care tell users how big! Very linear ... – PowerPoint PPT presentation

Number of Views:392
Avg rating:3.0/5.0
Slides: 75
Provided by: BruceR4
Category:
Tags: hypermedia | tell | web | wide | world

less

Transcript and Presenter's Notes

Title: World Wide Web and Hypermedia


1
World Wide Web and Hypermedia
  • CIS 577
  • Bruce R. Maxim
  • UM-Dearborn

2
Based in part on Dix
3
Text
  • imposes strict linear progression on the reader
  • the authors ideas of what is best
  • often good, but not always best!

4
Hypertext - Not Just Linear
  • Non-linear structure
  • blocks of text (pages)
  • links between pages create a mesh or network
  • users follow their own path through information

5
Hypermedia Not Just Text
  • Hypertext systems additional media
  • illustrations, photographs, video and sound
  • Links/hotspots may be in media
  • areas of pictures
  • times and locations in video
  • Also called multimedia
  • but MM is also used for simple audio/video

6
Animation - 1
  • For things that change in time
  • digital faces seconds tick past
  • analogue face hands sweep around clock face
  • live displays e.g. current system load
  • Showing status and progress
  • flashing carat at text entry location
  • busy cursors (hour-glass, clock, spinning disc)
  • progress bars

7
Animation - 2
  • Education and training
  • let students see things happen
  • show interesting and entertaining images
  • Data visualisation
  • abrupt and smooth changes in multi-dimensional
    data visualised using animated, coloured surfaces
  • complex molecules and their interactions more
    easily understood
  • for animated characters and help wizards

8
Video and Audio
  • Easy to author
  • tools to edit sound video and burn CDs DVDs
  • Easy to embed in web pages
  • standard formats (QuickTime, MP3)
  • Still big but getting manageable
  • download time needs care tell users how big!
  • Very linear
  • hard to add links often best as small clips or
    background

9
Audio Issues
  • Formats
  • Raw sound samples (used for mixing and editing)
  • MIDI (just which notes played and when)
  • MP3 (uses psychoacoustics - how the ear hears)
  • Issues
  • Annoying if audio is not unwanted
  • Annoying to nearby users

10
Using Animation and Video
  • Potentially powerful tools
  • television and arcade games
  • Need to figure out
  • how to harness the full possibilities of such
    media
  • How its different from standard interfaces
  • Need to learn from film makers, dramatic theory,
    cartoonists, artists, writers

11
Delivery Technology
  • On the computer
  • help systems installed on hard disk with
    applications
  • CD-ROM or DVD based hypermedia
  • On the web
  • really ubiquitous (many countries)
  • not just web pages (web-based app docs)

12
Mobile Delivery Technology
  • Platforms
  • mobile phones, PDAs, laptop computers
  • Delivery
  • CD-ROM or DVD (like desktop)
  • cached content (e.g. AvantGo)
  • WiFi access points or mobile phone networks
  • WAP for mobile phone, tiny web-like pages

13
Application Areas
  • Rapid prototyping
  • create live storyboards
  • mock-up interaction using links
  • Help and Documentation
  • allows hierarchical contents, keyword search or
    browsing
  • just in time learning
  • what you want when you want it
  • technical words linked to their definition in a
    glossary
  • links between similar objects

14
Recognizing Potential Hypertext Projects
  • A large body of information exists and is
    organized into several fragments
  • Fragments are interrelated
  • User only needs to access to small number of
    fragments at a time

15
Hypertext Design Problems
  • Project content inappropriate for hypertext
  • Poor hypertext design (e.g. too many links, long
    chains, dull articles, inadequate overviews)

16
Lost in Hyperspace
  • Non-linear structure
  • very powerful
  • but potentially confusing
  • Two aspects of being lost
  • cognition and content
  • fragmentary information no integration
    confusion
  • navigation and structure
  • hyperlinks move across structure where am I?
  • No easy solutions
  • but good design helps!

17
Designing Structure
  • Ideas for structure
  • task analysis to for activities and processes
  • existing paper or organisational structures
  • Going non-linear
  • paper and organization single structure
  • hypertext multiple structures
  • problems with common material, inconsistencies
    etc.
  • clarity of cross structure links versus
    importantance
  • Scent
  • do link markers make it clear where they go to??

18
Making Navigation Easier
  • Maps
  • overview of structure and mark current location
  • Recommended routes
  • guided tour or bus tour metaphor
  • linear path through non-linear structure
  • Levels of access
  • summary then progressive depth
  • Suppor printing!
  • needs linearized content

19
History and Bookmarks - 1
  • Revisiting
  • hub and spoke access click-back-click-back
  • lots of revisiting of pages
  • back is 30 of all browser navigation
  • but multi-step back and history used less
  • bookmarks and favorites for longer term revisiting

20
History and Bookmarks - 2
  • Deep links
  • bookmarks and external links into heart of site
  • are pages self explanatory?
  • what site?
  • where in it?
  • breadcrumbs for context
  • Frames
  • difficult to bookmark and search

21
Indices, Directories and Search
  • Index
  • often found in help, documentation, books
  • selective not an exhaustive list of words used
  • Directories
  • On-line web index would be huge!
  • Web search engines
  • crawl the web following links from page to page
  • build full word index (but ignore common stop
    words)
  • looks up in index when you enter keywords to find
    pages

22
Complex Search - 1
  • Too many pages for single word search
  • Boolean search
  • combine words with logic e.g. engine AND NOT
    car
  • Link structure
  • Google uses in and out links to rank pages
  • Recommender systems
  • use other peoples choices to guide other people

23
Complex Search - 2
  • Being search engine friendly
  • use Meta tags
  • relevant title
  • Keywords
  • description
  • hard to index dynamically generated pages (the
    hidden web)

24
Hypertext Authoring Tool Functionality
  • Import
  • Edit
  • Export
  • Print
  • Search

25
Web Authoring Tools - 1
  • Full set of direct manipulation editing functions
  • Link list management tools
  • Link verification
  • Range of display formatting
  • Availability of search and replace
  • Control of color
  • Able to switch between authoring and editing

26
Web Authoring Tools - 2
  • Availability of graphics and video embedding or
    editing tools
  • Collaboration possible
  • Data compression
  • Security control
  • Encryption
  • Import and export of standard interchange formats

27
Hypertext Design - part 1
  • Know users and their tasks
  • Ensure meaningful structure comes first
  • Multidisciplinary design team
  • Respect chunking
  • Show interrelationships within and between
    documents explicitly

28
Hypertext Design - part 2
  • Be consistent in creating document names
  • Work form master reference lists
  • Ensure simplicity in traversal
  • Design each screen carefully
  • Require low user cognitive load

29
Introductory Article Styles
  • Advanced Organizers
  • Executive overview
  • Top down (Table of Contents)
  • Menu
  • Search engine

30
Web Site Organizational Styles
  • Based originator's identity
  • Based on originator's goals
  • sales
  • advertising
  • information
  • access
  • services
  • discussion or nurture community

31
Web Site Knowledge Structures
  • Unstructured lists
  • Linear structures
  • Arrays or tables
  • Hierarchies or trees
  • Multi-trees or faceted retrieval
  • Networks

32
Web Action Types
  • Formulation
  • Action
  • Results
  • Refinement

33
Web Interface Metaphors
  • File cabinet
  • Books with chapters
  • Encyclopedia with articles
  • Television with channels
  • Shopping mall with stores
  • Museum with exhibits

34
Web Page Handles and Widgets
  • Labels
  • Icons
  • Buttons
  • Image maps
  • Navigation handles on page borders

35
Web Design Challenges - Content
  • Understandable
  • Interesting and valuable
  • Capable of converting web surfers into site users
  • Consistent and engaging
  • Skilled integration of text, graphics, audio,
    video, and information
  • Easily navigated
  • Unified in look and feel

36
The Message and the Medium
  • content is king
  • the dot.com catch phrase (but widely ignored)
  • the message content should be
  • appropriate to the audience, timely, reliable ,
    .
  • generally worth reading !
  • the medium page and site design
  • good design essential to attract readers
  • bad design may mean good material never seen
  • printable!

37
Text
  • Text style
  • generic styles universal serif, sans serif,
    fixed, bold, italic
  • specific fonts too, but vary between platforms
  • cascading style sheets (CSS) for fine
    control(beware older browsers and fixed font
    sizes)
  • color often abused!
  • Mathematics needs special fonts and layout

38
Graphics
  • formats
  • JPEG for photos
  • higher compression but lossy
  • get artefacts
  • GIF for sharp edges
  • lossless compression
  • PNG supported by current web browsers
  • and action
  • animated gifs for simple animations
  • image maps for images you can click on

JPEG quality20
39
Movies and Sound
  • problems
  • size and download like graphics but worse!
  • may need special plug-ins
  • audio not so bad, some compact formats (MIDI)
  • streaming video
  • play while downloading
  • can be used for broadcast radio or TV

40
Essential Web Design Criteria
  • Effectiveness
  • complete
  • organized presentation
  • Affectiveness
  • captures user attention
  • Navigational efficiency

41
First Generation Web Sites
  • Content focused
  • Ignored flash
  • Very few links

42
Second Generation Web Sites
  • Flashy features added for their own sake
  • Lots of hyperlinks

43
Third Generation Web Sites
  • Balances the 3 design components
  • Demonstrated a deeper understanding of
  • intended audience
  • purpose of web presentation
  • design challenges
  • media opportunities
  • information presented

44
Fourth Generation Web Sites
  • Increased interactivity
  • Providing live access to current content
  • Multimedia
  • Make use of smart links and knowledge engineering

45
Active Web
  • Early days of the web
  • static pages mostly text
  • some gateways (ftp, gopher)
  • usability one simple model
  • dynamic content
  • what is the model/metaphor ???
  • passive pages or active interface
  • each leads to different user understanding
  • no easy answers!

46
What happens where?
  • Architectural design is about what happens where,
    this affects
  • feedback
  • seeing results of ones own actions
  • feedthrough
  • seeing effects of other peoples actions
  • also affects complexity of implementation and
    hence maintenance

47
User View
  • What changes?
  • media stream, presentation, content
  • By whom?
  • automatic, site author, user
  • other users - feedthrough
  • How often?
  • pace of change days, months, seconds

48
Technology
  • client
  • applets , Flash, JavaScript DHTML
  • server
  • CGI scripts, Java servlets , JSP, ASP, PHP, etc,
  • another machine
  • authors machine, database server, proxy
  • people
  • socio-technical solutions

49
Security
  • For computation
  • code and data at same place!
  • Problems
  • data - needs to be secure
  • web-server - least secure machine
  • client machine even wors
  • Networks worst of all

50
Automatic Generation
  • Dilemma
  • hand crafting (leads to web stasis)
  • so need database driven sites
  • Options
  • client-end applet or Flash access remote DB
  • server-end CGI driven by web forms (limited UI)
  • hybrid solutions
  • CGI generated pages can contain JavaScript etc.
  • JavaScript can write web pages on the fly!

51
Batch Generation
  • For slow varying data
  • update local database
  • periodically generate pages and upload
  • Technologies
  • C, Java, Python, Visual Basic

Set db openDatabase("C\test.mdb") sql
"select Name, Address from Personnel" Set query
db.OpenRecordset(sql) Open "out.html" For
Output As 1 Print 1, "lth1gtAddress
Listlt/h1gt" query.MoveFirst While Not query.EOF
Print 1, "ltpgt" query("Name") "
query("Address") query.MoveNext Wend Close
1 query.Close
52
Batch Generation of Web Pages
  • pros indexable, secure
  • cons slower turnaround

53
Dynamic Content
  • Really active web pages
  • data updated as well as presented on the web
  • Presentation
  • any of the previous means CGI, applet-JDBC
  • Update
  • web form/interface -gt server script -gt update
    data
  • Issues
  • authentication and security
  • multiple transactions due to back button
  • right pace/control want human in loop or not?

54
Mutual Understandings Between Designers and Users
  • Designer must execute a design that reflects user
  • knowledge,
  • capabilities
  • information needs
  • User must have an accurate perception of the
  • web site purpose
  • information being presented

55
(No Transcript)
56
Attracting Users
  • Users form then initial impression of a web site
    within the first 7 seconds of access.
  • While at a web site, users continuously evaluate
    their progress toward accomplishing their goals.

57
Web Site Purposes
  • Entertainment
  • Enable information exchange
  • Information
  • what
  • where
  • when
  • who
  • how
  • cost

58
Web Creator Roles
  • Presenter (client)
  • Information steward
  • Designer

59
Web Designer Skill Set
  • Understand information (semantics)
  • Translate information to structure
  • Translate structure to web pages
  • Have artistic sense
  • Have capacity for language selection and use
  • Be able to work with multimedia technology
  • Be able to work with client/server technology
    (database, web access, security)

60
Research and Idea Generation
  • Define information for each group of expected
    users
  • Statement of what web presentation is to do
  • List of information resources

61
Idea Generation Techniques
  • Brainstorming
  • Interviews
  • Virtual value chain analysis
  • business process analysis
  • value added benefits to customers
  • Web research

62
Defining Information Domain
  • User-centered approach
  • identify each user group and determine their
    information needs
  • Information-centered approach
  • each type of information is classified and then
    clustered according to potential user group needs

63
Important Analysis Questions
  • What do potential users want to know about the
    company?
  • What do users want to know about the people?
  • What do users want to know about company
    business?
  • How might users want to interact with our company?

64
Information Decomposition and Information
Structuring
  • Decomposition - process of separating information
    into component objects or chunks
  • Structuring - process of organizing the chunks
    into a knowledge architecture

65
Chunk Tracking
  • Every chunk needs to be tracked somehow
  • List or outline
  • Group of index cards
  • Database
  • CASE tools

66
Information Structuring Guidelines
  • Chunks organized into a directed graph
  • Add cardinality information to each graph node
  • Add volatility information to each graph node
  • Consider redrawing the diagram as a summary
    diagram
  • Create object relationship matrix
  • Examine matrix for critical objects
  • Revise summary diagram as needed

67
Object Relationship Types
  • General to specific
  • Isa
  • Associative

68
Web Design Process
  • Establish content and location of each
    information object using text analysis and
    composition
  • Identify and implement hyperlink targets
  • Identify and implement multimedia options
  • Test and revise

69
  • Text analysis
  • develop best prose statements to convey intended
    message for each information object
  • Text composition
  • all objects are organized, rearranged, and
    regrouped until best web site placement is found
    (relies on storyboarding techniques)

70
Storyboarding
  • Once a complete set of web pages is storyboarded
    the storyboard are arranged in predicted thread
    order.
  • Each thread needs to be analyzed for gaps and
    sequencing problems.
  • Testing of final threads is done by walking
    through each thread using the appropriate user
    viewpoint.

71
Web Page Composition
  • Layout
  • Typography
  • Color
  • Hyperlinks

72
Hyperlink Types - part 1
  • Intra-page
  • used assist access to long complex pages
  • Intranet
  • used to create threads for users
  • show business relationships
  • breakup long web pages

73
Hyperlink Types - part 2
  • Intersite
  • value added stuff when another site is
  • complete
  • accurate
  • compatible with your site
  • appeals to audience
  • supports page goals

74
Linkage Evaluation
  • Done by building a linkage diagram and examining
    ratios of actual links to total possible for each
    page.
  • Ratio of actual links to total possible links
    should be 40-60.
  • 7 plus or minus 2 is another good rule of thumb
    for links from given page.
Write a Comment
User Comments (0)
About PowerShow.com