semtechbiz uk 2011: aloha web editable

45
Aloha! Web Editable The Semantic Interaction Framework or How Editing Can Save 25% of Your Costs September 2011 | London / UK Rene Kapusta | evo42 communications Ltd. | http://evo42.net

Upload: rene-kapusta

Post on 29-Nov-2014

2.644 views

Category:

Technology


0 download

DESCRIPTION

Aloha Web Editable. The Semantic Interaction Framework or How Editing Can Save 25% of Your Costs.Using Aloha Editor, Apache Stanbol and the VIE RDFa JavaScript bridge

TRANSCRIPT

Page 1: SemTechBiz UK 2011: Aloha Web Editable

Aloha! Web Editable

The Semantic Interaction Frameworkor How Editing Can Save 25% of Your Costs

September 2011 | London / UK

Rene Kapusta | evo42 communications Ltd. | http://evo42.net

Page 2: SemTechBiz UK 2011: Aloha Web Editable

Edit the web using semantic annotations.

No forms required!

http://twitter.com/rene_kapustamailto:[email protected]

http://slideshare.net/evo42

http://semantic-cms.info

Page 3: SemTechBiz UK 2011: Aloha Web Editable

What‘s the problem with

semanticweb editing?

Page 4: SemTechBiz UK 2011: Aloha Web Editable

You often edit data that is not visible. Metadata.

99.9% of the users are no hackers. Keep it simple!

Page 5: SemTechBiz UK 2011: Aloha Web Editable

it‘s about experience

Page 6: SemTechBiz UK 2011: Aloha Web Editable

experience is big things

Page 7: SemTechBiz UK 2011: Aloha Web Editable

experience is small things

Page 8: SemTechBiz UK 2011: Aloha Web Editable

experience is BAD

Page 9: SemTechBiz UK 2011: Aloha Web Editable

small details

Page 10: SemTechBiz UK 2011: Aloha Web Editable

BIGDIFFERENCE

Page 11: SemTechBiz UK 2011: Aloha Web Editable

experience can makesomething special

Page 12: SemTechBiz UK 2011: Aloha Web Editable
Page 13: SemTechBiz UK 2011: Aloha Web Editable

loading ...

Page 14: SemTechBiz UK 2011: Aloha Web Editable

good experience? not even for geeks

Page 15: SemTechBiz UK 2011: Aloha Web Editable

loading ...

Page 16: SemTechBiz UK 2011: Aloha Web Editable

WYSIWYG - like MS Word

WYSIWYG ( /ˈwɪziwɪɡ/ WIZ-ee-wig) is an acronym for what you see is what you get. The term is used in computing to describe a system in which content displayed during editing appears exactly very similar to the final output, which might be a printed document, web page, or slide presentation.

Page 17: SemTechBiz UK 2011: Aloha Web Editable

WYSIWYG? a bit at least

Page 18: SemTechBiz UK 2011: Aloha Web Editable

confusing? for people working with content

Page 19: SemTechBiz UK 2011: Aloha Web Editable

where do they come from?45 billion pages on google

Page 20: SemTechBiz UK 2011: Aloha Web Editable

internet users

where does the content of45 billion pages come from?

Page 21: SemTechBiz UK 2011: Aloha Web Editable

internet users

where does the content of45 billion pages come from?

99,9 % user != hacker

Page 22: SemTechBiz UK 2011: Aloha Web Editable

content authored withopen source cms or other systems

Page 23: SemTechBiz UK 2011: Aloha Web Editable

How to save 25% of your editing costs?

Page 24: SemTechBiz UK 2011: Aloha Web Editable

How to save 25% of your editing costs?Work more efficient!

Page 25: SemTechBiz UK 2011: Aloha Web Editable

no markup! html, wiki markup, bbcode, ...

Page 26: SemTechBiz UK 2011: Aloha Web Editable

no reload! click edit, click preview and save

Page 27: SemTechBiz UK 2011: Aloha Web Editable

no menu rubbish! no need for all icons all the time

Page 28: SemTechBiz UK 2011: Aloha Web Editable

just edit

Page 29: SemTechBiz UK 2011: Aloha Web Editable

it‘s abouttechnology

Page 30: SemTechBiz UK 2011: Aloha Web Editable

it‘s aboutopen source

Page 31: SemTechBiz UK 2011: Aloha Web Editable

open source matters

Page 32: SemTechBiz UK 2011: Aloha Web Editable

• Interactions should react in realtime and give immediate feedback to the user.

• The user should see the exact result of its action immediately.

• No apply or confirm action should be necessary. It's done when you do it.

• Instead everthing can be reverted.

• Every action should be completed with the minimum possible interactions.

• Everything that can be done automatically should be done automatically.

Inline HTML5 WYSIWYG editor

Page 33: SemTechBiz UK 2011: Aloha Web Editable

no browser crap! contenteditable in browsers

Page 34: SemTechBiz UK 2011: Aloha Web Editable

reduce clicks! CTRL+V that‘s it. no extra clicks!

Page 35: SemTechBiz UK 2011: Aloha Web Editable

no iframes uses html contenteditable

Page 36: SemTechBiz UK 2011: Aloha Web Editable

slick functionality - there when you need it

multiple repositories are supported

Page 37: SemTechBiz UK 2011: Aloha Web Editable

HTML5 is the answerto the Ultimate Question of Life,the Universeand Everything

Page 38: SemTechBiz UK 2011: Aloha Web Editable

web page view just click to edit!

Page 39: SemTechBiz UK 2011: Aloha Web Editable

page edit view intuitive menu

Page 40: SemTechBiz UK 2011: Aloha Web Editable

edit the cube all visible content is editable

http://aloha-editor.org/demos/css3/

Page 41: SemTechBiz UK 2011: Aloha Web Editable

Improve the interaction process and save costs!

Measured with the KeyStroke-Level-Model (KLM)

for the calculation we us the numbers from wikipedia.org

1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_management

4,000,000 edits 1)

2 min per edit “two minutes to execute. In reality it probably takes longer”2)

8,000,000 min editing per month (≈4h/user per month)$25 cost per hour per user

$3,333,333 cost per month

SAVE $10,000,000 per year

$833,333 per month

Every action should be completed with the minimum possible interactions.

Page 42: SemTechBiz UK 2011: Aloha Web Editable

Apache Stanbol

• Persistence: services that store (or cache) semantic information and make it searchable

• Lifting/Enhancement: services that add semantic information to “non-semantic” pieces of content

• Knowledge models and reasoning: services that enhance the semantic information

• Interaction: intelligent user interface management and generation

RESTful Semantic Engine

Page 43: SemTechBiz UK 2011: Aloha Web Editable

VIE

• Make the content of your web pages editable through annotations

• Load RDFa entities as JavaScript objects

• Sync changes to server, and to DOM

• Works client and server-side (node.js)

RDFa JavaScript Bridge

Page 44: SemTechBiz UK 2011: Aloha Web Editable

Resources

Aloha Editor -- http://aloha-editor.org Apache Stanbol -- http://incubator.apache.org/stanbolIKS Project -- http://iks-project.eu VIE -- https://github.com/bergie/VIE

Drupal Demo -- http://semantic-cms.infoVIE^2 Demo -- http://iks.dfki.de/showcase2/demos/VIE Palsu Demo -- http://palsu.me

Page 45: SemTechBiz UK 2011: Aloha Web Editable

• Haymo Meran, Gentics @draftkraftAloha Editor Mastermind

• Henri Bergius, Nemein @bergieVIE Mastermind

• IKS Project Team@iks_project

credits

Imageshttp://www.flickr.com/photos/bluecanoe/41268275http://www.flickr.com/photos/huffduff/5107515869http://www.flickr.com/photos/philipwilliamson/2500558623http://www.worldwidewebsize.com/Graph_v1.php?Searchengine=Google&corpus=0&Last=730http://trends.builtwith.com/cmshttp://www.flickr.com/photos/dullhunk/3947536364/