jQuery	
  conf	
  Europe	
  2012
                                                       @dra4kra4	
  	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
DoPE
                                                                  @	
  Gen8cs

                                                                  guest	
  lecturer
                                                                  @	
  Danube	
  University	
  of	
  Krems
                                                                  @	
  FH	
  Eisenstadt

                                                                  invited	
  expert
                                                                  @	
  W3C	
  HTML	
  working	
  group

                                                                  director
                                                                  @	
  Aloha	
  Editor	
  Associa8on




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
Director Of Product Experience
                                                                  DoPE
                                                                  @	
  Gen8cs

                                                                  guest	
  lecturer
                                                                  @	
  Danube	
  University	
  of	
  Krems
                                                                  @	
  FH	
  Eisenstadt

                                                                  invited	
  expert
                                                                  @	
  W3C	
  HTML	
  working	
  group

                                                                  director
                                                                  @	
  Aloha	
  Editor	
  Associa8on




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
$(“.editable”).aloha();
                                                                  $(“.editable”).mahalo();
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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
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
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
This is not Aloha Editor!!!




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
This is Aloha Editor




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
HTML5	
  is	
  the	
  answer	
  to	
  the	
  UlWmate	
  
   QuesWon	
  of	
  Life,	
  the	
  Universe,	
  and	
  Everything




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
contenteditable	
  in	
  browsers

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




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
contenteditable	
  in	
  browsers

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




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
contenteditable	
  in	
  browsers

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




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
contenteditable	
  in	
  browsers

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




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
What	
  is	
  Aloha	
  Editor	
  about?




webdeveloper	
  conference	
  Hamburg	
  2011	
  -­‐	
  Haymo	
  Meran
What	
  is	
  Aloha	
  Editor	
  about?




webdeveloper	
  conference	
  Hamburg	
  2011	
  -­‐	
  Haymo	
  Meran
No reload!




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
No iframe!




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
No browser crap!




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
No menu rubbish!



jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
No Markup!



jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
just edit




jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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.	
  It's	
  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
Improve	
  the	
  interacWon	
  process




                                                                         Measured with the KeyStroke-Level-Model (KLM)




webdeveloper	
  conference	
  Hamburg	
  2011	
  -­‐	
  Haymo	
  Meran
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_management


jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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_management


jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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_management


jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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_management


jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
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
h`p://wordpress.org/extend/plugins/front-­‐end-­‐editor/
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
Google	
  says:
	
  "..and	
  HTML	
  makes	
  OT	
  
(Opera8onal	
  Transforms)	
  difficult	
  
if	
  not	
  impossible..."
                                                   h]p://www.waveprotocol.org/faq



jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
Dear	
  Google,
YOU	
  ARE	
  WRONG!
                                                                  h]p://aloha-­‐wikidocs.com



jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
Resources
         	
  	
  	
  	
  	
  	
  	
  	
  	
  h]p://aloha-­‐editor.org
         	
  	
  	
  	
  	
  	
  	
  	
  	
  h]p://aloha-­‐wikidocs.com


jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran
Thank	
  you!

                                                           @dra`kra`
jQuery	
  conference	
  Europe	
  2012	
  -­‐	
  Haymo	
  Meran

Aloha Editor and Aloha Wikidocs

  • 1.
    jQuery  conf  Europe  2012 @dra4kra4    Haymo  Meran jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 2.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 3.
    DoPE @  Gen8cs guest  lecturer @  Danube  University  of  Krems @  FH  Eisenstadt invited  expert @  W3C  HTML  working  group director @  Aloha  Editor  Associa8on jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 4.
    Director Of ProductExperience DoPE @  Gen8cs guest  lecturer @  Danube  University  of  Krems @  FH  Eisenstadt invited  expert @  W3C  HTML  working  group director @  Aloha  Editor  Associa8on jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 5.
    $(“.editable”).aloha(); $(“.editable”).mahalo(); jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 6.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 7.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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.
    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.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 11.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 12.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 13.
    This is notAloha Editor!!! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 14.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 15.
    This is AlohaEditor jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 18.
    HTML5  is  the  answer  to  the  UlWmate   QuesWon  of  Life,  the  Universe,  and  Everything jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 19.
    contenteditable  in  browsers <div  contentEditable=”true”>...</div> jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 20.
    contenteditable  in  browsers <div  contentEditable=”true”>...</div> jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 21.
    contenteditable  in  browsers <div  contentEditable=”true”>...</div> jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 22.
    contenteditable  in  browsers <div  contentEditable=”true”>...</div> jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 23.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 24.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 25.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 26.
    What  is  Aloha  Editor  about? webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  • 27.
    What  is  Aloha  Editor  about? webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  • 28.
    No reload! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 29.
    No iframe! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 30.
    No browser crap! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 31.
    No menu rubbish! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 32.
    No Markup! jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 33.
    just edit jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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.  It's  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.
    Improve  the  interacWon  process Measured with the KeyStroke-Level-Model (KLM) webdeveloper  conference  Hamburg  2011  -­‐  Haymo  Meran
  • 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_management jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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_management jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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_management jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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_management jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 40.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 41.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 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.
  • 44.
    jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 45.
    Google  says:  "..and  HTML  makes  OT   (Opera8onal  Transforms)  difficult   if  not  impossible..." h]p://www.waveprotocol.org/faq jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 46.
    Dear  Google, YOU  ARE  WRONG! h]p://aloha-­‐wikidocs.com jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 47.
    Resources                  h]p://aloha-­‐editor.org                  h]p://aloha-­‐wikidocs.com jQuery  conference  Europe  2012  -­‐  Haymo  Meran
  • 48.
    Thank  you! @dra`kra` jQuery  conference  Europe  2012  -­‐  Haymo  Meran