This presentation was given at the 2014 Harvard University Opencast Unconference. The topic was the open source Matterhorn educational video platform user interface redesign funded by the ETH University and Entwine. This talk describes the technologies and techniques utilized in the design. It's all the first demonstration of a fully internationalized (i18n) user interface.

1. matterhorn admin ui

2. entwine knowledge in motion
requirements
> technology suitable for the community
> modern and proven development stack
as close as possible to 100% test coverage <
> support for i18n and i10n
> code and style documentation
flexibility to integrate local requirements without
the need to fork the codebase <

3. entwine knowledge in motion

4. what did we aim for

5. entwine knowledge in motion
choice of technology
> the community uses java, therefore vaadin
was a natural choice
> can use existing java service implementation
> write once, run anywhere
> requires a java engineer to customize
> uncertainty about the framework’s future

6. entwine knowledge in motion
choice of technology
choice fell on angularjs <
> modular development, little to no dom
manipulation, emphasis on testing, growing
ecosystem
> applies high level concepts to web
application development
supported and used by google
and others for a couple of years <

7. entwine knowledge in motion
development stack
> grunt based javascript setup
> translation through crowd sourcing with
varying degree of “crowd” aspect
easy way to mock endpoints <

8. entwine knowledge in motion
test coverage
> everything is tested by jasmine, selenium
jshint, and the karma runner
as part of the build
> very difficult and not feasible to
build full end-to-end tests

9. entwine knowledge in motion
test coverage
> 2’484 lines of code (as of today)
> 2’259 lines of code
83 end-to-end tests,
58 unit tests,
168 assertions
<

10. entwine knowledge in motion
globalization
> internationalization
and localization
> support on the application
layer including content analysis
and system messages
localization in the ui <
internationalization provided by the backend
keys only in the frontend <

11. entwine knowledge in motion
i18n

12. entwine knowledge in motion
local modifications
> obvious ones like workflow options
configuration or hold states
> less obvious ones like support for
additional metadata fields
> completely unknown ones
like functional additions

13. a first walkthrough

14. entwine knowledge in motion
what’s new
> modern and consistent look and feel
> focus on events rather than workflows
> dedicated backend restful services for the ui
!
supports for roles by means of filtering and
saved filters in all lists <
workflows by means of permanent urls <

15. entwine knowledge in motion
disclaimer
> we may not have managed to please
everyone nor get everything right
the first time
> no user testing has been conducted so far
talk to espresslabs about design aspects <

16. entwine knowledge in motion
list views

17. entwine knowledge in motion
main navigation

18. entwine knowledge in motion
list views
> actions
!
!
> filtering
> feedback
!

19. conclusion

20. entwine knowledge in motion
timeline
> entwine and its partners are in the state of
refining the initial design work, wrapping up
work on the front end and backend
we are expecting to finalize the work
by the end of june 2014 <
> finalized means 80% of the originally intended
design and close to 95%+ coverage of the
current ui’s functionality

21. entwine knowledge in motion
get involved
> ui will be released as soon as it’s finished on a
separate branch awaiting testing and feedback
feedback is welcome as are resources that help
fund implementation of that feedback <

22. entwine knowledge in motion
closing remarks
> matterhorn will get a nice look and feel which
will help convince potential adopters on the
non-technical level
getting started on customizing without
coordination will ultimately lead to a fork <
> coordination will be the way to make sure the
admin ui will serve the community