Aloha editor jQuery conf

Aloha Editor Leaving ExtJS for jQuery UIAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Haymo Merane Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Haymo Meran CTO, director of product e experience @ GenKcs guest lecturer @ Danube University of Krems invited expert @ W3C HTML working group opensource developer @Aloha Editor, @rdfQuery Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How many pages is the internet?Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran hUp://www.worldwidewebsize.com/ April 16, 2011

Where does the content of 14 billon pages  come from?Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Where does the content of 14 billon pages  come from? usersAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Where does the content of 14 billon pages  come from? users 99,9% user != hackerAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

“Why is online edi-ng so diﬃcult?!”Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

“Why does edi-ng not work like in Word?!” GenKcs customers asked over and over againAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

You design! 10 min Kme 1 paper DIN A4 present in 1 minAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

January 18th 2010Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

January 18th 2010 1778 – James Cook is the ﬁrst known European to discover the Hawaiian IslandsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

January 18th 2010 1778 – James Cook is the ﬁrst known European to discover the Hawaiian Islands AlohaAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Locked in for 14 days Clemens HaymoAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Make ediKng easierAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

like MS Word ‐ WYSIWYG WYSIWYG ( /ˈwɪziwɪɡ/ WIZ‐ee‐wig)[1] is an acronym  for what you see is what you get. The term is used in  compuKng to describe a system in which content  displayed during edi.ng appears very similar to the  ﬁnal output,[2] which might be a printed document,  web page, or slide presentaKon.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Is content inline editable?Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

cool,browserscan do that!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

contenteditable in browsers <div contentEditable=”true”>...</div>Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

HML5 is the answer to the UlKmate QuesKon of Life,  the Universe, and EverythingAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

No Markup!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

No reload!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

No iframe!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

No menu rubbish!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

No browser crap!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

just editAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Which Technologies to use?Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Which UI framework?Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

ser ious so meAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

15th July 2010 ‐ Aloha Editor is online.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

slick funcKonality ‐ there when you need itAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Design user Experien ce!Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Experienc e is.memoriesAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Experienc e is.big thingsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Experienc e is.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran hUp://ﬂickr.com/photos/presta/151544021/sizes/l/ small April 16, 2011

Experienc e is.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran bad April 16, 2011

Experienc e is.subjectiveAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

small detailsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

BIGDIFFAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Experience makes things specialAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

They will remember “the moment I stood on a  chair and had a sheet of  paper on my head”.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

But you cannot design user hUp://www.smashingmagazine.com/2011/03/15/why‐user‐experience‐cannot‐be‐designed/Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

expectation situationAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

TechnologyAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Features TechnologyAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

UX Features TechnologyAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

UX buying / using decision Features TechnologyAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor Experience  All interacKons should react in realKme and give immediate clear feedback to  the user.   The user should see the exact result of its acKon immediately.  No apply or conﬁrm acKon should be necessary. Its done when you do it.  Instead everthing can be reverted.  Every acKon should be completed with the minimum possible interacKons.  Everything that can be done automaKcally should be done automaKcally.Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Every acKon should be completed with the  minimum possible interacKons. Measured with the KeyStroke-Level-Model (KLM)Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng for the calculation we us the numbers from en.wikipedia.org in sept 2010 about 35,000 users edited more than 5 pages 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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” 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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) 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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 1) http://stats.wikimedia.org/EN/TablesWikipediaEN.htm 2) http://en.wikipedia.org/wiki/Wikipedia:Time_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

How much costs ediKng 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_managementAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

IniKallyAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

IniKally deps/jquery‐1.4.4.js deps/jquery.json‐2.2.min.js deps/jquery.getUrlParam.js deps/extjs/ext‐jquery‐adapter‐debug.js deps/extjs/ext‐foundaKon‐debug.js deps/extjs/cmp‐foundaKon‐debug.js deps/extjs/ext‐dd‐debug.js deps/extjs/pkg‐buUons‐debug.js deps/extjs/pkg‐tabs‐debug.js deps/extjs/pkg‐toolbars‐debug.js deps/extjs/pkg‐menu‐debug.js deps/extjs/pkg‐forms‐debug.jsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

IniKally deps/jquery‐1.4.4.js deps/jquery.json‐2.2.min.js deps/jquery.getUrlParam.js deps/extjs/ext‐jquery‐adapter‐debug.js deps/extjs/ext‐foundaKon‐debug.js deps/extjs/cmp‐foundaKon‐debug.js ~600k AE + deps deps/extjs/ext‐dd‐debug.js deps/extjs/pkg‐buUons‐debug.js ~120k AE only deps/extjs/pkg‐tabs‐debug.js deps/extjs/pkg‐toolbars‐debug.js deps/extjs/pkg‐menu‐debug.js deps/extjs/pkg‐forms‐debug.jsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

repositoriesAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

deps/jquery‐1.4.4.jsdeps/jquery.json‐2.2.min.jsdeps/jquery.getUrlParam.jsdeps/preUyPhoto/jquery.preUyPhoto.jsdeps/jquery.cookie.jsdeps/extjs/ext‐jquery‐adapter‐debug.jsdeps/extjs/ext‐foundaKon‐debug.js repositoriesdeps/extjs/cmp‐foundaKon‐debug.jsdeps/extjs/data‐foundaKon‐debug.jsdeps/extjs/data‐json‐debug.jsdeps/extjs/data‐list‐views‐debug.jsdeps/extjs/ext‐dd‐debug.jsdeps/extjs/window‐debug.jsdeps/extjs/resizable‐debug.jsdeps/extjs/pkg‐buUons‐debug.jsdeps/extjs/pkg‐tabs‐debug.jsdeps/extjs/pkg‐Kps‐debug.jsdeps/extjs/pkg‐tree‐debug.jsdeps/extjs/pkg‐grid‐foundaKon‐debug.jsdeps/extjs/pkg‐toolbars‐debug.jsdeps/extjs/pkg‐menu‐debug.jsdeps/extjs/pkg‐forms‐debug.js Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

deps/jquery‐1.4.4.jsdeps/jquery.json‐2.2.min.jsdeps/jquery.getUrlParam.jsdeps/preUyPhoto/jquery.preUyPhoto.jsdeps/jquery.cookie.jsdeps/extjs/ext‐jquery‐adapter‐debug.jsdeps/extjs/ext‐foundaKon‐debug.js repositoriesdeps/extjs/cmp‐foundaKon‐debug.jsdeps/extjs/data‐foundaKon‐debug.jsdeps/extjs/data‐json‐debug.jsdeps/extjs/data‐list‐views‐debug.jsdeps/extjs/ext‐dd‐debug.jsdeps/extjs/window‐debug.jsdeps/extjs/resizable‐debug.jsdeps/extjs/pkg‐buUons‐debug.jsdeps/extjs/pkg‐tabs‐debug.jsdeps/extjs/pkg‐Kps‐debug.jsdeps/extjs/pkg‐tree‐debug.jsdeps/extjs/pkg‐grid‐foundaKon‐debug.js ~1MB AE + depsdeps/extjs/pkg‐toolbars‐debug.jsdeps/extjs/pkg‐menu‐debug.js ~170k AE onlydeps/extjs/pkg‐forms‐debug.js Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

StylingAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Comparison Ext JS  ~600k  complex styling  more funcKonality  good communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Comparison Ext JS jQuery Ui  ~600k  ~120k (Richard says 85k)  complex styling  more funcKonality  good communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Comparison Ext JS jQuery Ui  ~600k  ~120k (Richard says 85k)  complex styling  easy styling  more funcKonality  good communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Comparison Ext JS jQuery Ui  ~600k  ~120k (Richard says 85k)  complex styling  easy styling  more funcKonality  less “core” funcKonality  good communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Comparison Ext JS jQuery Ui  ~600k  ~120k (Richard says 85k)  complex styling  easy styling  more funcKonality  less “core” funcKonality  good community  excellent communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

We deﬁne an Aloha Editor UI API  enables proprietary UI implementaKons  Aloha Editor supports and provides jQuery UI implementaKon  enables special UI for mobile devices  lets Aloha Editor scales down to comment ﬁelds or single line inputsAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

ImplementaKonAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran hUp://aloha‐editor.org/wiki/MigraKon_to_jQuery_UI April 16, 2011

Roadmap First Quarter 2011 ‐ 0.10.0 Second Quarter 2011 ‐ 0.11.0  Image Plugin (Crop&Resisze)  UNDO  Drag and Drop Files  UI API  JavaScript Compression and Bundling  Block Handling  CSS Compression  table columns and rows to be resizeable  jQuery 1.5.0  Major Plugin Architecture changes  ExtJS 3.2.2  BeUer Copy & Paste Support  Async plugin loader  TranslaKon CompilaKon/Bundling  Placeholder   Se{ngs CompilaKon/BundlingAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

hUp://blogs.gnome.org/bolsh/2011/02/07/drawing‐up‐a‐roadmap/ Roadmap and the problem with details Unit = 200 km length = 2400 km (approx.) Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

hUp://blogs.gnome.org/bolsh/2011/02/07/drawing‐up‐a‐roadmap/ Roadmap and the problem with details Unit = 200 km Unit = 50 km length = 2400 km (approx.) length = 3400 km Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor and RDF hUps://github.com/alohaeditor/Aloha‐Plugin‐VIEAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor and RDF enable ediKngAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor and RDF storingAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Hacker Dojo ‐ June 6‐8 ‐ Mountain ViewAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of successAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success  contenteditable useableAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success  contenteditable useable  open plugin infrastructureAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success  contenteditable useable  open plugin infrastructure  vivid communityAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success  contenteditable useable  open plugin infrastructure  vivid community  visible roadmap developmentAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success  contenteditable useable  open plugin infrastructure  vivid community  visible roadmap development  acKve communicaKonAloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success contenteditable useable r  tt e open plugin infrastructure i   vivid community tw t n af o r ct ftk  visible roadmap development  acKve communicaKon n e ra n d co @Aloha Editor  at  jQuery conf  2011 ‐ Haymo Meran April 16, 2011

Aloha Editor project factors of success contenteditable useable r  tt e open plugin infrastructure i   vivid community tw t n af o r ct ftk  visible roadmap development  acKve communicaKon n e ra n d o @ thank cAloha Editor  at  jQuery conf  2011 ‐ Haymo Merans April 16, 2011

Aloha editor jQuery conf

by Haymo Meran on Apr 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 344

Statistics

Aloha editor jQuery conf — Presentation Transcript

http://lanyrd.com	343
http://webcache.googleusercontent.com	1