Web Engineering (frequency * bit-depth * time * channels) long - - PowerPoint PPT Presentation

▶
web engineering
SMART_READER_LITE
LIVE PREVIEW

Web Engineering (frequency * bit-depth * time * channels) long - - PowerPoint PPT Presentation

Mar 27, 2024 363 likes •496 views

Audio Reception, Play-back large amount of data 1 Minute ~ 10MB raw (44,1kHz * 2 Byte * 60 s * 2) Web Engineering (frequency * bit-depth * time * channels) long download times Prof. Dr. Dr. h.c. mult. Gerhard Krger, Albrecht

slide-1
SLIDE 1
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 1

Web Engineering

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt

Universität Karlsruhe Fakultät für Informatik Institut für Telematik Wintersemester 1999/2000

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 2

Web Engineering

Chapter 3: The Web – An Information System

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 3

Audio – Reception, Play-back

large amount of data

1 Minute ~ 10MB raw (44,1kHz * 2 Byte * 60 s * 2) (frequency * bit-depth * time * channels) long download times

  • ptimizing the file size

length of the audio clip number of channels bit-depth sampling rate

Play-back during reception, buffering Streaming Formats

Alternative formats, e.g. RealAudio, Quicktime Audio

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 4

Streaming, e.g. RealAudio

link:

<A HREF="musik.ram"> here you get live music!</a>

SMIL – selection of bandwidth

Synchronized Multimedia Integration Language

meta file: musik.ram

pnm://129.13.170.22/live/musik.ra

data transmission

UDP back-channel, scalability

<smil> <body> <switch> <ref src=“myclipcm.rm” system-bitrate=”220000”/> <ref src=“myclip56.rm” system-bitrate=”32000”/> <ref src=“myclip28.rm” system-bitrate=”20000”/> </switch> </body> </smil>

slide-2
SLIDE 2
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 5

Table of Contents

  • 1. Introduction and History
  • 2. Media and Information
  • 3. Organizing Information

Systems and Classifications Structuring Information Hypertext Organizing Information in the WWW

  • 4. Access to Information and Navigation
  • 5. Describing and coding Information
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 6

Systematic Approaches

Collect and Summarize

Collection

Indexing

Catalog Library

Connections based on Content

Hypertext

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 7

Collections

set (without order) classification based on criteria defined implicitly by

the collector

motivation

Complete or representative acquisition within a limited domain

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 8

Index, Catalog

Indexed information explicit classification based on categories or according to

to keywords

motivation

classification of information across different domains

examples

Encyclopedia The Library of Congress Classification System http://lcweb.loc.gov/catdir/cpso/lcco/lcco.html The ACM Computing Classification System http://www.acm.org/class/1998/

slide-3
SLIDE 3
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 9

LIBRARY OF CONGRESS CLASSIFICATION OUTLINE

A -- GENERAL WORKS B -- PHILOSOPHY.

  • PSYCHOLOGY. RELIGION

C -- AUXILIARY SCIENCES OF HISTORY D -- HISTORY: GENERAL AND OLD WORLD E -- HISTORY: AMERICA F -- HISTORY: AMERICA G -- GEOGRAPHY. ANTHROPOLOGY. RECREATION H -- SOCIAL SCIENCES J -- POLITICAL SCIENCE K -- LAW L -- EDUCATION M -- MUSIC AND BOOKS ON MUSIC N -- FINE ARTS P -- LANGUAGE AND LITERATURE Q -- SCIENCE R -- MEDICINE S -- AGRICULTURE T -- TECHNOLOGY U -- MILITARY SCIENCE V -- NAVAL SCIENCE Z -- LIBRARY SCIENCE

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 10

Connections based on Content

using links/relations between the content of

information chunks

direct association instead of indirect association

according to a classification

„like humans organize there knowledge“

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 11

Structuring Information

linear hierarchical grid graph / web

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 12

Linear Structures I

pure linear strict guidance little choices for the user pre-caching possible

slide-4
SLIDE 4
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 13

Linear Structures II

linear with options guidance some choices for the user

active interaction

different levels of detail scenarios: different level of expertise, profiles

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 14

Linear Structures III

linear with alternatives guidance some choices for the user

active interaction

scenarios: questionnaires

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 15

Linear Structures IV

linear with side branches additional information on side path guidance on main path

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 16

Circular Structure

closed guided path Variants / side paths entry E.g. Web Rings

http://dir.webring.yahoo.com

slide-5
SLIDE 5
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 17

Information Grid

  • rdered on two
  • rthogonal criteria

user get a

„feeling of space“

e.g. product catalog

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 18

Example Grid Information Structure

catalog

screws nut discs M4 M6 M4 M6 M8 M8 8mm 6mm 4mm

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 19

Hierarchical Information Structure

deep hierarchy flat hierarchy

Lookup table (A-Z) more the 6-10 is questionable

(cognitive psychology)

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 20

Linked Information Structures

pure webs difficult for orientation extremely expressive

slide-6
SLIDE 6
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 21

Information Mapping

information mapping

mapping of information onto an abstract structure mapping the structure to web pages

Trade Offs

expressive vs. pre-defined structure guidance vs. confusion

expressiveness no guidance guidance fixed structure

linear grid hierarchy pure web

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 22

Organizing Information in the WWW

based on a open hypertext system information can be organized in any way

partly „real“ hypertext with links based on content partly indexed documents and catalogs Partly simple collections of resources

information is structured very differently

  • ften mixture of linear and hierarchy

hypertext links are often not associative, but just to build a linear hierarchical navigation structure

previous/next up/down/home

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 23

Hypertext

components classification reference model practical design

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 24

Hypertext

concept to organize information motivation

“knowledge” is not linear, it is associative authoring a document = making knowledge linear reading a document = reproduce the non-linear structure of the knowledge navigation

hypertext-documents:

keep the inherent association of information in a document

Authoring Reading

slide-7
SLIDE 7
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 25

Roots of Hypertext

“Memex”

Vannevar Bush: “As we may think”, 1945 “Memory Expander”-Machine associative storage/access personal annotation linked to documents

Xanadu

Ted Nelson, 1965/1981 term Hypertext Docuverse: global hypertext system, Pay per View

Augment/NLS (oNLine System)

Douglas Englebart, 1968 Shared Hypertext Document Spaces

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 26

Hypertext – Example I

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 28

Hypertext Components

structure

hypertext document: directed graph

components

node: information unit anchor: Information chunk within a node, target for a link link: connections between nodes

anchor link

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 29

Node

single media nodes

  • nly one media type per node

mixed media nodes

different media types possible per node alternatives, combination

systems with limited content size

no internal navigation e.g. HyperCard

systems with unlimited content size

internal navigation necessary e.g. Scrolling

slide-8
SLIDE 8
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 30

Anchor

types of anchors

source anchor target anchor

represented as

button icon text (e.g. Underlined) hidden animation (e.g. mouse over) ...

representation of source anchors as link representation of target anchors is often hidden source anchor target anchor link

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 31

Links

information content of a link

simple (un-typed) links typed links

e.g. Categoryised according to

semantic or type of target

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 32

Semantics of Links

relation between source and target

is part of ... represents ... effects ... needs ... is needed by ...

  • wns ...

includes ... is similar to ... ...

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 33

Target and Direction of Links

target of a link

referencing an external document

e.g. quotation

inline link

e.g.

embedded image

transclusion

link as annotation

link

additional information

calculated link

target dependent on state (e.g. time, profile)

direction of links

uni-directional links bi-directional links

slide-9
SLIDE 9
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 34

abstract note and link structures representation and manipulation of note and link semantics

Hypertext System 3rd order

user defined note and link types user defined attributes

Hypertext System 2nd order

Classification of Hypertext Systems

Hypertext System 1st order

nodes anchor inside nodes links between anchors standard attributes for nodes, anchors and links

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 35

Architecture of Hypertext Systems

Dexter Hypertext Reference Model [Halasz und Schwartz 1994]

runtime and presentation layer storage layer within-component layer

Run-time Layer

presentation

  • f

hypertext; user interaction; dynamics

Presentation Specifications Storage Layer

data with network nodes and links

Anchoring Within-Component Layer

content and structure within nodes

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 36

Example: Organizing Information

  • n the Web

link lists

collection of links to similar / related information arbitrary structure

sitemap

visualizing the structure of a (large) web site

  • ften grid, tree, or hierarchical structure

webring

circular linked pages of similar content easy access to related information „distributed catalog“

  • rdered top-level

navigation

see www.webring.org

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 37

PostIt-Method for the Structural Design

design of the navigational structure of large web site with not-technical staff and decision makers

PostIt Notes with

important keywords

Making a "Concept

Map"

  • no an diagram

representing the

  • rganization!

Designing the

structure of the web on a blackboard

slide-10
SLIDE 10
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 38

Evolutionary Method

„all on one table “ (authors, editors, programmer, designer, manager,

decision maker, ...)

each participant (or teams of 2) make suggestions on paper for t he

following topics:

  • structure and scale of the web
  • navigation
  • basic design issues and interaction elements
  • technical

realization

short

presentation

  • f

the ideas

  • up to 5min per participant (everyone the same time)
  • display the ideas on the wall or on a board
  • discussion and evaluation of aspects of the suggestions based on a checklist

iteration

  • revision of the suggestions
  • Border condition; 30% of the concept must be changes and taken from one of

the other suggestions

Is the result acceptable and feasible? No Yes detailed concept

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 39

Table of Contents

  • 1. Introduction and History
  • 2. Media and Information
  • 3. Organizing Information
  • 4. Access to Information and Navigation

Methods for Information Access Hypertext Navigation Access Strategies for the Web

  • 5. Describing and coding Information
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 40

Methods for Information Access

addressing pages directly search/browse in catalogs search for keywords associative navigation

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 41

Addressing Pages Directly

requires unique addresses

URL: Uniform Resource Locator

how to get the address?

external channel, e.g. TV, radio, press, print, email, etc. guessing the DNS-name, e.g. www.uni-karlsruhe.de, www.oracle.com, www.linux.org

conventions

E.g. index.html, default.htm, robots.txt

slide-11
SLIDE 11
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 42

Search / Browse in Catalogs

browse predefined classes search if classes/subclasses are unknown less directed, open search strategy if you can not specify what you are looking for ... How to get listed in a catalog?

automatically (submit in a certain category) pages are manually selected, reviews, and added

address of the catalog must be known examples

yahoo.com web.de lycos.de netcenter.com

  • and many others ...
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 43

Search for Keywords I

specific WWW server

parts of a search engine

robot/crawler indexer analyzer module database retrieval

component recommendation system

  • ther user rank content

number of links to a page how often is the page

  • pened when displayed

etc ...

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 44

Search for Keywords II

mechanisms to search for keywords

keyword matching query language

Boolean

  • perators

“fuzzy operators” e.g. NEAR search for values of certain attributes examples: www.altavista.com

+domain:com +Netscape +host:www.ibm.com +confidential +image:sharon* +title:stone +url:Java +applet:* link:www.teco.uni-karlsruhe.de (image:bill NEAR clinton ) OR (image:clinton NEAR bill) OR title:"Bill Clinton"

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 45

Search for Keywords III

incremental search

refine search results search within results concept map categorizing results

slide-12
SLIDE 12
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 46

Associative

semantic links in hypertext

links in text (related content) icons and images maps

different types of links different semantics

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 47

Hypertext - Navigation

links beyond content and semantic navigational structure within the content

up, down, next, ...

  • ften based on icon

author builds/defines this structure

tools for navigation

history, back/forward, home bookmarks in the user interface of the web client

navigational patterns

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 48

Hypertext – Navigational Patterns

Navigational Design Patterns [Rossi et al. 98]

text based

e.g. www.useit.com

landmark „Provide direct access to critical sub-systems in the Web Iinformation System“ set-based navigation „Organize the information in Sets of related information items. Provide intra-set navigation capabilities.“

  • ften

combinded landmark & set-based navigation

e.g.: www.sun.com e.g.: www.amazon.de

metaphorical navigation

z.B.: www.iflyswa .com, www.hagebau.de

http://www8.org/w8-papers/5b-hypertext-media /improving/improving.html

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 49

Text Based Navigation

Quelle: http://www.useit.com

slide-13
SLIDE 13
  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 50

Landmark & Set-based Navigation I

Source: http://www.amazon.de

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 51

Landmark & Set-based Navigation II

Source: http://www.wapforum.org

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 52

Metaphorical Navigation I

Quelle, 1998: http://www.iflyswa.com

  • Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01

page 53

Metaphorical Navigation II

Quelle, 1998: http://www.iflyswa.com