Your SlideShare is downloading. ×
Aloha Editor Conference 2011<br />Open Discussion on<br />UI Changes<br />Romain Carlier<br />Introduction to UI changes<b...
Introduction to UI changes<br />Romain Carlier<br />Who  >  Current status  >  What’s next  >  Q&A <br />Who am I ?<br /><...
Co-founder of Reaklab (Web agency in Belgium) with Thomas Lété
Editor of Wikeo(.net), a free website creation tool using Aloha Editor
Working as a webdesigner/integrator</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
Status<br />Introduction to UI changes<br />Romain Carlier<br />
Introduction to UI changes<br />Romain Carlier<br />Who  >  Current status  >  What’s next  >  Q&A <br />State of the Aloh...
~ 800Ko compressed size
Licensed under commercial licenses</li></ul>329$ - http://www.sencha.com/store/extjs/<br /><ul><li>Static template powered...
Introduction to UI changes<br />Romain Carlier<br />Who  >  Current status  >  What’s next  >  Q&A <br />Environment switc...
Easier to use, extend, manipulate.
No licensing.
Based on jQuery, alreadyloaded by Aloha Editor.</li></ul>No need to load all the components. <br />This switch applies to ...
Markup<br />And simplicity<br />Introduction to UI changes<br />Romain Carlier<br />
Introduction to UI changes<br />Romain Carlier<br />Who  >  Markup  >  What’s next  >  Q&A <br />Why we need good markup<b...
Elevates the level of comprehensibility for new plugin developers / UI Hackers
Maintainability and coherence
List of toolbars, Definitions of components</li></ul>Let’s keep it that clear. Give meaning back to elements.<br /><ul><li...
Upcoming SlideShare
Loading in...5
×

AEDC 2011 - Discussion about UI changes

699

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "AEDC 2011 - Discussion about UI changes"

  1. 1. Aloha Editor Conference 2011<br />Open Discussion on<br />UI Changes<br />Romain Carlier<br />Introduction to UI changes<br />Romain Carlier<br />
  2. 2. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Who am I ?<br /><ul><li>Romain Carlier
  3. 3. Co-founder of Reaklab (Web agency in Belgium) with Thomas Lété
  4. 4. Editor of Wikeo(.net), a free website creation tool using Aloha Editor
  5. 5. Working as a webdesigner/integrator</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  6. 6. Status<br />Introduction to UI changes<br />Romain Carlier<br />
  7. 7. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />State of the Aloha Editor UI – 02/2011<br /><ul><li>Uses ExtJS representation engine
  8. 8. ~ 800Ko compressed size
  9. 9. Licensed under commercial licenses</li></ul>329$ - http://www.sencha.com/store/extjs/<br /><ul><li>Static template powered by standard ExtJS layouts</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  10. 10. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Environment switch<br />To<br />jQuery UI<br />From<br />ExtJS<br /><ul><li>Compressed size isbetter by almost 80%.
  11. 11. Easier to use, extend, manipulate.
  12. 12. No licensing.
  13. 13. Based on jQuery, alreadyloaded by Aloha Editor.</li></ul>No need to load all the components. <br />This switch applies to the standard Aloha EditorInterface.<br />2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  14. 14. Markup<br />And simplicity<br />Introduction to UI changes<br />Romain Carlier<br />
  15. 15. Introduction to UI changes<br />Romain Carlier<br />Who > Markup > What’s next > Q&A <br />Why we need good markup<br /><ul><li>Semantics
  16. 16. Elevates the level of comprehensibility for new plugin developers / UI Hackers
  17. 17. Maintainability and coherence
  18. 18. List of toolbars, Definitions of components</li></ul>Let’s keep it that clear. Give meaning back to elements.<br /><ul><li>HTML5 support
  19. 19. Progress, Datagroup, Section
  20. 20. Range inputs</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  21. 21. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Why we need good markup<br />Simply<br />Simplicity<br />html.ext-strict body#ext-gen3.ext-gecko div#ext-comp-1016.x-tab-panel div#ext-gen24.x-tab-panel-bwrap div#ext-gen25.x-tab-panel-body div#ext-comp-1017.x-panel div#ext-gen41.x-panel-bwrap div#ext-gen42.x-panel-tbar div#ext-comp-1018.x-toolbar table.x-toolbar-cttbodytrtd.x-toolbar-left table tbodytr.x-toolbar-left-row td#ext-gen46.x-toolbar-cell div#ext-comp-1019.x-btn-group div#ext-gen47.x-btn-group-bwrap div.x-btn-group-ml div.x-btn-group-mr div#ext-gen50.x-btn-group-mc div#ext-gen48.x-btn-group-body table#ext-gen77.x-table-layout tbodytr td#ext-gen58.x-table-layout-cell table#GENTICS_Aloha_ui_Button_2.x-btn tbody.x-btn-small trtd.x-btn-mc em button#ext-gen59.x-btn-text<br />html body ul.ui-controlset-container li.ui-controlset#{toolbar name} a.ui-button span.ui-button-label<br />Better markup reduces everything :<br /><ul><li>Headaches
  22. 22. Aloha Editor Generated Code</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  23. 23. What’s next ?<br />Introduction to UI changes<br />Romain Carlier<br />
  24. 24. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Two ways of displaying the new UI<br />+ Additional, contextual views<br /><ul><li>Collapsed view
  25. 25. Floating view</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  26. 26. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Elements Hierarchy<br /><ul><li>Tab
  27. 27. Defined by context (contextual functions/tabs )
  28. 28. Holds controls or controlsets (no sub-tabs)
  29. 29. Controlset
  30. 30. Defined by float / maximum elements
  31. 31. Holds controls
  32. 32. Control
  33. 33. Still allows for custom code
  34. 34. Based on a jQuery UI representation
  35. 35. Depends on the list of available components</li></ul>Representation for Aloha Editor components follows the representation guideline proposed by jQuery UI : Text, icon, two icons or combinations.<br />2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  36. 36. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />State of components availability<br />Available<br /><ul><li>Buttons
  37. 37. Buttons with icons
  38. 38. Controllersets
  39. 39. Tabs
  40. 40. Split Buttons
  41. 41. Progressbars
  42. 42. Modal Dialogs
  43. 43. Autocompletion / Draggable / …</li></ul>Unavailable<br /><ul><li>Panels
  44. 44. http://code.google.com/p/jquery-ui/source/browse/#svn/branches/labs/panel
  45. 45. Dividers
  46. 46. Selectables
  47. 47. http://jquery-ui.googlecode.com/svn/branches/labs/selectable/
  48. 48. Tree
  49. 49. Data repositories</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  50. 50. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Thoughts on the new UI<br /><ul><li>Events
  51. 51. No grouping, no drag and drop
  52. 52. Customization of behavior is up to the implementer
  53. 53. Brainstorming
  54. 54. This approach is not definitive
  55. 55. Aloha Conference 2011 aims at determining what the next standard UI for Aloha Editor will be.</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  56. 56. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Thoughts on the new UI<br /><ul><li>Necessity of abstraction
  57. 57. Including jQuery UI is not closing the door to other
  58. 58. Separate the UI from the Core (UI is now a plugin)
  59. 59. Abstraction and creation of a LayoutManager
  60. 60. Dispatching of layout information through generic actions
  61. 61. Map to representation framework (addButton -> append)</li></ul>Don’t re-invent the wheel.<br />Core<br />Aloha Editor<br />UIAPI<br />jQuery UI<br />Theme<br />Third party representation tool, theme, extensions…<br />jQuery UI, ExtJS, Lightweight, Mobile, Browser toolbars implementations<br />2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  62. 62. WIP<br />Introduction to UI changes<br />Romain Carlier<br />
  63. 63. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Wireframing<br /><ul><li>Docked / Collapsed view
  64. 64. Floating view
  65. 65. Context panels</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  66. 66. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Wireframing<br /><ul><li>Buttons arrangement
  67. 67. States
  68. 68. Panel collapse
  69. 69. Contextual elements</li></ul>2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  70. 70. Introduction to UI changes<br />Romain Carlier<br />Who > Current status > What’s next > Q&A <br />Default Aloha Editor jQuery UI edition design proposal<br />2011 - Romain Carlier for Aloha Editor Developer Conference<br />
  71. 71. Q&A<br />Introduction to UI changes<br />Romain Carlier<br />
  72. 72. Thank you!<br />romain@reaklab.com<br />@reak<br />Introduction to UI changes<br />Romain Carlier<br />

×