26
Th Vi l Wiki The Visual Wiki Christian Hirsch Christian Hirsch COMPSCI 732 – Mar 23, 2010 Overview Background / Research Area Background / Research Area • The Visual Wiki Concept 4 E l Vi l Wiki 4 Example Visual Wikis • VikiBuilder: a Visual Wiki meta-tool KaitoroBase

Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Th Vi l WikiThe Visual Wiki

Christian HirschChristian Hirsch

COMPSCI 732 – Mar 23, 2010

Overview

• Background / Research Area• Background / Research Area• The Visual Wiki Concept

4 E l Vi l Wiki• 4 Example Visual Wikis• VikiBuilder: a Visual Wiki meta-tool

KaitoroBase

Page 2: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Background

Visual Wiki

Information visualizationKnowledge visualization

Web 2.0Enterprise 2 0Knowledge visualization

DSVLHCI

Cognition

Enterprise 2.0Knowledge ManagementTools / Technologies / ConceptsSemantic Web

... ...

Visually enhance Wikis in order to improve their ability as knowledge management tools. (Wikis = “textual collaboration repositories”)

Exploring synergic effects between Collaboration tools, and Visual representations.

Background

web 2 0 and enterprise 2 0 (lack of clear definitions)web 2.0 and enterprise 2.0 (lack of clear definitions)– Technologies: RSS, Ajax, …– Tools: wikis, blogs, social software, …g– Concepts: user participation, mass collaboration, rich

user experience, remixability, …

Semantic Web: – Semantics (meaning) of information is defined in order

to make content machine processableto make content machine-processable– RDF, OWL, …

changing the way information is processed

Page 3: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Information Processing Lifecycle

create

Information Processing Lifecycle

using and re-using machine readable,

semantic webinstant feedback

web 2.0personal use

web 1.0

searching and finding

and re using machine readable,transformability

semantic search

instant feedback

PageRank,folksonomy

p

directories,taxonomy

organizing

distributing linked data (RDF),reusability

structured meta-data

pull(e.g. RSS)

social software

push(e.g. email)

directories

creating

organizing structured meta-datacommon semantics

automation,data plus meta-data

social software,web standards

peer production,mass collaboration

directories,hyperlinks

proprietary,CMS

Underlying to these changes are: technologies, tools, and conceptsAll 3 areas are inter-dependentThe evolution of the lifecycle is driven by the need to make sense out of more and more informationmake sense out of more and more information

Page 4: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Background

Visual Wiki

Information visualizationKnowledge visualization

Web 2.0Enterprise 2 0Knowledge visualization

DSVLHCI

Cognition

Enterprise 2.0Knowledge ManagementTools / Technologies / ConceptsSemantic Web

... ...

Information Visualization

• is an effective method for representing and organizing knowledge- and information-rich scenarios

• make use of the human cognitive processing• make use of the human cognitive processing system in order to create and convey content more efficientlyy

technique:• resource object (underlying semantics)• visual object (DSVL)• purpose (create organize transfer search apply)• purpose (create, organize, transfer, search, apply)

Page 5: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Information Visualization

http://www.visual-literacy.org/periodic_table/periodic_table.html

Information Visualization

• visualizations become more and more web-basedsua at o s beco e o e a d o e eb based• technologies (applets, DHTML, Flash, Silverlight, …)• bandwidth...

Many EyesMany Eyes

manyeyes.alphaworks.ibm.com

Page 6: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Information Visualization

• visualizations become more and more web-basedsua at o s beco e o e a d o e eb based• technologies (applets, DHTML, Flash, Silverlight, …)• bandwidth...

GapminderGapminder

http://www.gapminder.org/

Information Visualization

• visualizations become more socialvisualizations become more social• collaboratively create visualization• share them

MindmeisterMindmeister

www.mindmeister.com

Page 7: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Background

Visual Wiki

Information visualizationKnowledge visualization

Web 2.0Enterprise 2 0Knowledge visualization

DSVLHCI

Cognition

Enterprise 2.0Knowledge ManagementTools / Technologies / ConceptsSemantic Web

... ...

Background

Both (visual and wiki part) have potential to improve knowledgeBoth (visual and wiki part) have potential to improve knowledge management:

Wiki:Wiki:• represent dynamic content• ad hoc creation

thi i l t h h k l d• this is closer to how humans process knowledge

Visual:• efficient way to represent and organize knowledge- and information-rich scenarios• makes use of human cognitiong

Page 8: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

The Visual Wiki Concept

Visual Wiki Concept

Different existing approaches

TouchGraph WikiBrowserGliffy & Confluence TouchGraph WikiBrowser

A general Visual Wiki model is neededg

Page 9: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Visual Wiki Concept

The 4 Components of the Visual Wikip

MappingVisualization Text

Concept

Visual Wiki Examples

Page 10: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

11

A visual exploration and navigation tool for Freebase

http://thinkbase cs auckland ac nz/http://thinkbase.cs.auckland.ac.nz/

Page 11: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

...

Thinkbase

Client

Applet FreebaseApplet Freebase

JS

Thinkmap Server Freebase ServerThinkmap SDK

API

JSONCustom Data Source

Metaweb

Page 12: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

22

Extracting and visualizing structured content from Wikipedia

http://thinkpedia cs auckland ac nz/

Wikipedia

http://thinkpedia.cs.auckland.ac.nz/

Page 13: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Thinkpedia

Client

Applet Wikipediapp p

JS

Thinkmap Server Wikipedia Server

APIAPI

RDF

API

Semantic Proxy

Page 14: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

33

A visual exploration tool for the IT infrastructure of The UoA

Page 15: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

ThinkFree

URLs,i

Wikipedia

queries

CustomInterface

Thinkmap

UoA

Confluence

Interface

readAPI

FreebaseData

Page 16: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for
Page 17: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

44

K i BKaitoroBase

Collaborative work with Moon Ting Su.

A software architecture documentation tool built using Thinkbase.

To provide support for non-linear navigation and visualization of Software Architecture Documents (SAD)(SAD).

Produced using the Attribute-Driven Design (ADD) method(ADD) method.

Page 18: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

KaitoroBase - Model

extracted from Attribute-Driven Design (ADD)extracted from Attribute Driven Design (ADD)[L. Bass, P. Clements, and R. Kazman, Software architecture in practice, Addison Wesley Professional, 2003]

KaitoroBase - Model

SAD meta-model in FreebaseSAD t d l i Thi kbSAD meta-model in Thinkbase

Page 19: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

K i BKaitoroBase

…more Projects

ProcessMapper

Visualizing Business Processes (BPMN), connecting to a process documentation wiki as well as other web applications.

MoRST Scan Visualizer

CSI Academy Project in 2008.Semantic annotation and visualization system for MoRST technology scans.

Page 20: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

VikiBuilder – a Visual Wiki meta-tool

VikiBuilder

Objective: to create a Visual Wiki meta-tool – a tool which allows end-users to specify (model) a Visual Wiki and automatically create itusers to specify (model) a Visual Wiki and automatically create it.

Divided into 3 steps:Divided into 3 steps:

(1) Development of a DSVL which describes the architechture of a Vi l WikiVisual Wiki

(2) Implementation of a tool which allows to visually model a Visual Wiki using that DSVL

(3) Automatic generation of Visual Wiki instances based on the model( ) g

Page 21: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

(1) VikiBuilder - DSVL

Aggregation of common design features, e.g.:

“data source”“adapter”“data representation”data representation“transformation agent”“view”

(1) VikiBuilder - DSVL

Left: description of Thinkbase and Thinkpedia using our DSVL (using a data pipeline metaphore)

Bottom: the model of our DSVL

Page 22: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

(2) VikiBuilder

Project ManagementProject Management

DSVLEditing view

(3) VikiBuilder – autom. Visual Wiki generation

VikiBuilder itself is a Visual WikiVikiBuilder itself is a Visual Wiki

Uses Freebase as its data source and Thinkmap for the visualizationThinkmap for the visualization

Page 23: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

(3) VikiBuilder – autom. Visual Wiki generation

(3) VikiBuilder – autom. Visual Wiki generation

Data Source ViData Source

Adapter

Transf. Agent

Data Repres.

View

Coord. Obj.

Page 24: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

VikiBuilder

Model

Preview

New Instance

VikiBuilder

Thinkpedia Thinkpedia II

Thinkbase IIThinkbase

Page 25: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

Recommended Readings

Web 2.0 / Enterprise 2.0Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software. (O’Reilly, T.)Enterprise 2.0: the dawn of emergent collaboration. (McAfee, A.P.)Corporate wiki users: results of a survey. (Majchrzak, A., et al.)Co po a e use s esu s o a su ey ( ajc a , , e a )

Information VisualizationVisualizing Knowledge and Information: An Introduction. (Keller, T. and Tergan, S.O.)M E A Sit f Vi li ti t I t t S l (Vié F B t l )Many Eyes: A Site for Visualization at Internet Scale. (Viégas, F.B., et al.)

Pipeline modelA Taxonomy of Visualization Techniques using the Data State Reference Model. (Chi, E.H.)y q g ( , )

Visual WikiThe Visual Wiki: A New Metaphor for Knowledge Access and Management. (Hirsch, et al.)

Acknowledgements

Prof John HoskingProf John GrundySu Moon TingTim ChaffeDavid MacDonald

l kYuriy Halytskyy

P bli tiPublicationsHirsch, C., Hosking, J.G., Grundy, J.C. Interactive Visualization Tools for Exploring the Semantic Graph of Large Knowledge Spaces, 1st Int'l Workshop on Visual Interfaces to the Social and the Semantic Web (VISSW 2009) S ib l I l d Fl id 8th F b 2009 PDF(VISSW 2009), Sanibel Island, Florida, 8th February 2009. PDF

Hirsch, C., Hosking, J.G., Grundy, J.C., Chaffe, T., MacDonald, D., and Halytskyy, Y. The Visual Wiki: A New Metaphor for Knowledge Access and Management, In Proceedings of the 42nd Hawaii International Conference on System Sciences, Big Island, Hawaii, Jan 5-8 2009, IEEE CS Press. PDFy , g , , ,

Hirsch, C., Hosking, J.G., Grundy, J.C. Thinkbase: A Visual Semantic Wiki, Poster and Demo Session of the 7th International Semantic Web conference (ISWC2008), Karlsruhe, Germany, Oct 26-30, 2008. PDF

John Hosking The Visual Wiki: a new approach for knowledge representation and management Google John Hosking, The Visual Wiki: a new approach for knowledge representation and management, Google Tech Talks, June 4th 2008. YouTube Video

Page 26: Th Vi l WikiThe Visual Wiki - Computer Science...Web 2.0 / Enterprise 2.0 Wh t I W b 2 0 D i P tt d B i M d l f th N t G ti fWhat Is Web 2.0: Design Patterns and Business Models for

More Info

Thinkbase: http://thinkbase.cs.auckland.ac.nz/Thinkbase: http://thinkbase.cs.auckland.ac.nz/Thinkpedia: http://thinkpedia.cs.auckland.ac.nz/

Thinkmap: http://www.thinkmap.com/Freebase: http://www.freebase.com/SemanticProxy: http://semanticproxy opencalais com/SemanticProxy: http://semanticproxy.opencalais.com/

Ch h h 008@ kl dChristian Hirsch: [email protected]