Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Aloha Editor and Aloha Wikidocs

2,287 views

Published on

Presentation of Aloha Editor and launch of Aloha Wikidocs at jQuery Conf Europe 2012

Published in: Technology, Design

Aloha Editor and Aloha Wikidocs

  1. 1. jQuery  conf  Europe  2012 @dra4kra4    Haymo  MeranjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  2. 2. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  3. 3. DoPE @  Gen8cs guest  lecturer @  Danube  University  of  Krems @  FH  Eisenstadt invited  expert @  W3C  HTML  working  group director @  Aloha  Editor  Associa8onjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  4. 4. Director Of Product Experience DoPE @  Gen8cs guest  lecturer @  Danube  University  of  Krems @  FH  Eisenstadt invited  expert @  W3C  HTML  working  group director @  Aloha  Editor  Associa8onjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  5. 5. $(“.editable”).aloha(); $(“.editable”).mahalo();jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  6. 6. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  7. 7. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  8. 8. Edit  the  web  -­‐  like  MS  Word  the  paper WYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for   what  you  see  is  what  you  get.  The  term  is  used  in   compuWng  to  describe  a  system  in  which  content   displayed  during  edi8ng  appears  very  similar  to  the   final  output,[2]  which  might  be  a  printed  document,   web  page,  or  slide  presentaWon.jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  9. 9. Edit  the  web  -­‐  like  MS  Word  the  paper WYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for   what  you  see  is  what  you  get.  The  term  is  used  in   compuWng  to  describe  a  system  in  which  content   displayed  during  edi8ng  appears  very  similar  to  the   final  output,[2]  which  might  be  a  printed  document,   web  page,  or  slide  presentaWon.jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  10. 10. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  11. 11. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  12. 12. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  13. 13. This is not Aloha Editor!!!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  14. 14. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  15. 15. This is Aloha EditorjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  16. 16. Edit  the  web  -­‐  like  MS  Word  the  paper WYSIWYG  (  /ˈwɪziwɪɡ/  WIZ-­‐ee-­‐wig)[1]  is  an  acronym  for   what  you  see  is  what  you  get.  The  term  is  used  in   compuWng  to  describe  a  system  in  which  content   displayed  during  edi8ng  appears  very  similar  to  the   final  output,[2]  which  might  be  a  printed  document,   web  page,  or  slide  presentaWon.jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  17. 17. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  18. 18. HTML5  is  the  answer  to  the  UlWmate   QuesWon  of  Life,  the  Universe,  and  EverythingjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  19. 19. contenteditable  in  browsers <div  contentEditable=”true”>...</div>jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  20. 20. contenteditable  in  browsers <div  contentEditable=”true”>...</div>jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  21. 21. contenteditable  in  browsers <div  contentEditable=”true”>...</div>jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  22. 22. contenteditable  in  browsers <div  contentEditable=”true”>...</div>jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  23. 23. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  24. 24. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  25. 25. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  26. 26. What  is  Aloha  Editor  about?webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  27. 27. What  is  Aloha  Editor  about?webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  28. 28. No reload!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  29. 29. No iframe!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  30. 30. No browser crap!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  31. 31. No menu rubbish!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  32. 32. No Markup!jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  33. 33. just editjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  34. 34. Aloha  Editor  Experience l All  interacWons  should  react  in   real8me  and  give  immediate  clear  feedback  to  the  user.   l The  user  should   see  the  exact  result  of  its  acWon  immediately. l No  apply  or  confirm  acWon  should  be  necessary.  Its  done  when  you  do  it. l Instead  everthing  can  be   undo ne. l Every  acWon  should  be  completed  with  the  minimum  possible  interac*ons.webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  35. 35. Improve  the  interacWon  process Measured with the KeyStroke-Level-Model (KLM)webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  36. 36. How  much  costs  ediWng for the calculation we us the numbers from en.wikipedia.org in sept 2010 about 35,000 users edited more than 5 pages 4,000,000 1) edits 2 2) min per edit “two minutes to execute. In reality it probably takes longer” 8,000,000 min editing per month (≈4h/user per month) $25 cost per hour per user $3,333,333 cost per month 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  37. 37. How  much  costs  ediWng for the calculation we us the numbers from en.wikipedia.org in sept 2010 about 35,000 users edited more than 5 pages $3,333,333 cost per month 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  38. 38. How  much  costs  ediWng for the calculation we us the numbers from en.wikipedia.org in sept 2010 about 35,000 users edited more than 5 pages $3,333,333 cost per month using the Aloha Editor you can SAVE $10,000,000 per year $833,333 per month 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  39. 39. How  much  costs  ediWng for the calculation we us the numbers from en.wikipedia.org in sept 2010 about 35,000 users edited more than 5 pages $3,333,333 cost per month using the Aloha Editor you can SAVE $10,000,000 per year $833,333 per month 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  40. 40. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  41. 41. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  42. 42. Who  uses  Aloha  Editor? 5 TYPO3 Phoenix will use the Aloha Editor to provide its users the most smoothest inline editing experience.jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  43. 43. h`p://wordpress.org/extend/plugins/front-­‐end-­‐editor/jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  44. 44. jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  45. 45. Google  says:  "..and  HTML  makes  OT  (Opera8onal  Transforms)  difficult  if  not  impossible..." h]p://www.waveprotocol.org/faqjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  46. 46. Dear  Google,YOU  ARE  WRONG! h]p://aloha-­‐wikidocs.comjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  47. 47. Resources                  h]p://aloha-­‐editor.org                  h]p://aloha-­‐wikidocs.comjQuery  conference  Europe  2012  -­‐  Haymo  Meran
  48. 48. Thank  you! @dra`kra`jQuery  conference  Europe  2012  -­‐  Haymo  Meran

×