Aloha editor typo3 San Francisco

Preview:

DESCRIPTION

General overview about Aloha Editor and its relation to TYPO3 at TYPO3 conference in San Francisco.

Citation preview

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

                                       ConferenceSan  Francisco  2011

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

me

CTO,  DoPE@  Gen.cs

guest  lecturer@  Danube  University  of  Krems  and  FH  Eisenstadt

invited  expert@  W3C  HTML  working  group

director@  Aloha  Editor  Associa.on

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Gen.cs  Xmas  2010

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

change  th

e  interne

t

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

edit  the  i

nternet

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Edit  the  web  -­‐  like  MS  Word  the  paperWYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for  what  you  see  is  what  you  get.  The  term  is  used  in  compu.ng  to  describe  a  system  in  which  content  displayed  during  edi.ng  appears  very  similar  to  the  final  output,[2]  which  might  be  a  printed  document,  web  page,  or  slide  presenta.on.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Edit  the  web  -­‐  like  MS  Word  the  paperWYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for  what  you  see  is  what  you  get.  The  term  is  used  in  compu.ng  to  describe  a  system  in  which  content  displayed  during  edi.ng  appears  very  similar  to  the  final  output,[2]  which  might  be  a  printed  document,  web  page,  or  slide  presenta.on.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Edit  the  web  -­‐  like  MS  Word  the  paperWYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for  what  you  see  is  what  you  get.  The  term  is  used  in  compu.ng  to  describe  a  system  in  which  content  displayed  during  edi.ng  appears  very  similar  to  the  final  output,[2]  which  might  be  a  printed  document,  web  page,  or  slide  presenta.on.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

contenteditable  in  browsers

<div  contentEditable=”true”>...</div>

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

contenteditable  in  browsers

<div  contentEditable=”true”>...</div>

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

contenteditable  in  browsers

<div  contentEditable=”true”>...</div>

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

contenteditable  in  browsers

<div  contentEditable=”true”>...</div>

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Where  does  the  content  of  TYPO3  websites  

from?

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

22/49useless

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

99,9%  TYPO3  user  !=  hacker

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

What  is  Aloha  Editor  about?

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

What  is  Aloha  Editor  about?

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

No reload!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

No iframe!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

No browser crap!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

No menu rubbish!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

No Markup!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

just edit

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

just edit

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

January  18th  20101778  –  James  Cook  is  the  first  known  European  to  discover  the  Hawaiian  Islands

Aloha

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience is.

memories

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience is.

big things

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience is.

small thingshUp://flickr.com/photos/presta/151544021/sizes/l/

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience is.

bad

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experience is.

subjective

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

small details

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

BIG DIFFERENCE

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Experiencecan make something

special

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  Experiencel All  interac.ons  should  react  in  real.me  and  give  immediate  clear  feedback  to  the  user.  

l The  user  should  see  the  exact  result  of  its  ac.on  immediately.

l No  apply  or  confirm  ac.on  should  be  necessary.  It's  done  when  you  do  it.

lInstead  everthing  can  be  undone.

l Every  ac.on  should  be  completed  with  the  minimum  possible  interac*ons.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Improve  the  interacKon  process

Measured with the KeyStroke-Level-Model (KLM)

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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

4,000,000 edits 1)

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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)

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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)

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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)

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

$25 cost per hour per user

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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)

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

$25 cost per hour per user

$3,333,333 cost per month

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

$3,333,333 cost per month

How  much  costs  ediKng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

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

for the calculation we us the numbers from en.wikipedia.org in sept 2010about 35,000 users edited more than 5 pages

$3,333,333 cost per month

How  much  costs  ediKng

using the Aloha Editor you can

SAVE $10,000,000 per year

$833,333 per month

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

TYPO3  &  Aloha  Editor  si]ng  in  a  tree

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

TYPO3  &  Aloha  Editor  si]ng  in  a  tree

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

UXcamp  -­‐  Berlin  29th  May  2010

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

UXcamp  -­‐  Berlin  29th  May  2010

Jens  Hoffmann

Typo3  -­‐  UI

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

UXcamp  -­‐  Berlin  29th  May  2010

Jens  Hoffmann

Typo3  -­‐  UI

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

UXcamp  -­‐  Berlin  29th  May  2010

Jens  Hoffmann

Typo3  -­‐  UI

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

May  30th  2010

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

May  30th  2010

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

May  30th  2010

Aloha  from  @dramkram  looks  awesome!  Not-­‐yet-­‐released  open  src  lib  turbo-­‐charges  

ContentEditable  with  a  plugin  framework  hUp://twitpic.com/1sgbl7

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran hop://www.youtube.com/watch?v=fW8amMCVAJQ

the  first  follower

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran hop://www.youtube.com/watch?v=fW8amMCVAJQ

the  first  follower

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

l Mastertexsormat  bearbeiten

TYPO3  community  is  working  hard    Serious  hackers

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Who  uses  Aloha  Editor?

Kasper Skårhøj

Jens Hoffmann

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Nils lickit Jens Hoffmann

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Who  uses  Aloha  Editor?5

TYPO3 Phoenix will use the Aloha Editor to provide its users the most smoothest inline editing experience.

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

55%

6%

3%0%

36%

WordpressdrupalTYPO3ploneothers

cms  market  coverage  >  66%

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran hop://wordpress.org/extend/plugins/front-­‐end-­‐editor/

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

(: (:

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

We develop Aloha Editor!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

We develop Aloha Editor!

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

contributorsader  aedc  vie

l ç

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

New  guys  -­‐  new  ideas

February  13,  2011Aloha  Editor  DevCon  2011  keynote  -­‐  Haymo  Meran

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  Events

June  2011San  Francisco

February  2011Vienna

Oct  2011Sidney

April  2011  jQuery  conf  San  Francisco

April  2011  drupal  gov  days    Brussels

May  2011  drupal  alpine  days  Brixen

Aug  2011  wordpress  confSan  Fancisco

Oct  2011  Colombo  (Sri  Lanka)

Oct  2011  TYPO3  conf  Frankfurt

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Quality  improvements

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Quality  improvements

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Roadmap  developmentandbranching

hUp://nvie.com/posts/a-­‐successful-­‐git-­‐branching-­‐model/

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3l outstanding  inline  edi0ng

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3l outstanding  inline  edi0ng

l open  plugin  infrastructure

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3l outstanding  inline  edi0ng

l open  plugin  infrastructure

l vivid  community

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3l outstanding  inline  edi0ng

l open  plugin  infrastructure

l vivid  community

l visible  roadmap  development

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3

spread the word!l outstanding  inline  edi0ng

l open  plugin  infrastructure

l vivid  community

l visible  roadmap  development

June,  11th  2011TYPO3  conference  2011  San  Francisco  -­‐  Haymo  Meran

Aloha  Editor  for  TYPO3

thanksspread the word!l outstanding  inline  edi0ng

l open  plugin  infrastructure

l vivid  community

l visible  roadmap  development

Recommended