2-5-14 “DSpace User Interface Innovation” Presentation Slides

Hot Topics: The DuraSpace
Community Webinar Series
Series Seven:

“All About DSpace 4–
Improved Interfaces for
Man & Machine”
Curated by Bram Luyten, @mire

February 5, 2014

Hot Topics: DuraSpace Community Webinar Series

Sponsored by

Funding for this
webinar series
comes from our Sponsors
Join your fellow institutions by becoming a
sponsor and in support of

Visit http://duraspace.org/sponsors

Webinar 2: DSpace User Interface Innovation
Presented by:

Andrea Bollini, Product Manager, Cineca
http://www.linkedin.com/in/andreabollini

This work is licensed under a
Creative Commons AttributionShareAlike 3.0 Unported
License.
Slides available at:
http://bit.ly/dspace4-roundup

This presentation is about…
• User Experience improvements available with
DSpace 4
• The JSPUI interfaces get almost all of them. Today, I
will show the JSPUI interface as it is my favourite UI
• I will state which improvements are available also for
XMLUI

• A final, personal, comparison of JSPUI and XMLUI
February 5, 2014


The big one: JSPUI redesign
Clean and modern look & feel
Build with Bootstrap 3 + JQueryUI 1.10

February 5, 2014

Theme by


…how JSPUI looks before 4.0

February 5, 2014


February 5, 2014


How JSPUI looks now!

February 5, 2014


Home page
February 5, 2014


Public navigation
February 5, 2014


User menu
February 5, 2014


Community list
February 5, 2014


Community home page
February 5, 2014

Community logo
Introductory text
Side news
Recent submission
component

Community browse

Community facet


Collection home page
February 5, 2014

Logged-in

Admin tools
In the sidebar


Collection home page
February 5, 2014

Collection’s
content


Edit collection
February 5, 2014


Different headers for public and backend pages

February 5, 2014


Item splash page
February 5, 2014


Search query

Search

Filters with autocomplete

February 5, 2014

Facets, in the sidebar


Browse
February 5, 2014


MyDSpace
February 5, 2014


Submission: edit metadata
February 5, 2014


Administration
February 5, 2014


Media Query Browser support
• Chrome, Firefox, Safari, Opera
• All reasonably recent versions

• IE10 fully supported
• IE9: except for a few CSS enhancements
• IE8: requires respond.js and html5shiv.js (included
in DSpace 4)
• IE7: not officially supported, but
• “should look and behave well enough”

Source “Building Responsive Websites with the Bootstrap 3 Framework”, Webvanta
https://www.webvanta.com/webinar/1949234-building-responsive-websites-with-the-bootstrap

February 5, 2014


Change the look & feel
In

February 5, 2014

4

steps


Change the look & feel: step 1/4
Replace the DSpace logo with your institution logo

1

/jspui/image/dspace-logo-only.png (fixed to a height of
25px)

/jspui/image/logo.gif (width adapted to max 3/12 of the
viewport)

February 5, 2014



2

Replace the Bootstrap CSS theme file…
…with a generated one
/jspui/static/css/bootstrap/bootstrap-theme.min.css
http://getbootstrap.com/customize/ - the generator form
http://bootswatch.com/
- gallery of free themes
http://www.lavishbootstrap.com/
- generate the palette from an image
(maybe the Repository logo or banner)

February 5, 2014


Check the dspace-theme CSS file, maybe you want to make changes

3

/jspui/static/css/bootstrap/dspace-theme.css
.banner img {background-color:#FFFFFF;padding:15px;margin:20px;}
.brand h4 {color: #999999}
ol.breadcrumb li {color: white; font-style: italic;}
ol.breadcrumb li a {color: white; font-weight: bold; font-style: normal;}

February 5, 2014



4

Replace JQuery UI CSS & images…
…with a generated one
/jspui/static/css/jquery-ui-1.10.3.custom/redmond/jquery-ui-1.10.3.custom.css
/jspui/static/css/jquery-ui-1.10.3.custom/redmond/images/*

http://jqueryui.com/themeroller/
- the generator form & free gallery

February 5, 2014


Change the look & feel

…done!
You only need to re-package your JSPUI webapp and
deploy it!

mvn package
February 5, 2014


Some examples

February 5, 2014


Bootwatch

February 5, 2014


Lavish DuraSpace logo

February 5, 2014


How does it work? much like the old
versions
• You can think the whole page as a big table of 12 columns…
...but it is tableless!
• You have precise positioning (fix «column» size)
…but it is fluid (better, it is responsive,
mobile friendly)
• It uses the custom tags dspace:layout and dspace:sidebar
…but the layout tag now knows about
the sidebar tag early*.
* You can do the math about how many columns are in your central panel and you can also put the sidebar on the
left
February 5, 2014


layout/<skin>/header-<style>.jsp

Branding content – provided by the layout/<skin>/header-<style>.jsp file

LocationBar – injected by the content jsp using the locbar
attribute (layout/location-bar.jsp)

Main Content
Provided by the specific jsp
(home.jsp, display-item.jsp, etc.)

Sidebar content
Injected by the
specifc jsp

Footer content (layout/<skin>/footer-<style>.jsp)

February 5, 2014

layout/<skin>/footer-<style>.jsp

Layout structure

NavBar – injected by the content jsp
using the navbar attribute (layout/<skin>/navbar-<navbar>.jsp)


Four key elements
• Skin (undocumented feature  )

• Configured in the dspace.cfg allow to use layout files from the
subdirectory <skin> of

• Style

• dspace-jspui/src/main/webapp/layout or
• dspace/modules/jspui/src/main/webapp/layout

• Used in the dspace:layout tag to define which style apply to the current
content, current used styles are:
• Default
• Submission (not yet an appropriate name… backend could be a better name)

• NavBar

• Used in the dspace:layout tag to define which navigation menu include

• LocationBar

• Used in the dspace:layout tag to define or turn off the breadcrumbs

February 5, 2014


Twitter Bootstrap
• Grid system

• Breaking point: xs (<768px); sm (≥768px); md (≥992px);
lg (≥1200px)

• Responsive utilities

• hide / visible / pull / push / reset / clearfix for specific
device (xs, sm, md, lg)

• UI Components CSS + JS:

• NavBar, Menu, Carousel, List media item, panel, badge,
etc.

February 5, 2014


Bootstrap: the grid system
.col-md-4

.col-md-4

.col-md-4

.col-md-8

.col-md-3

.col-md-4

.col-md-4

.col-md-5

.col-md-3

on small and extra small devices

February 5, 2014

.col-md-5
.col-md-4


Bootstrap: responsive system
.col-md-8

.col-md-4

+ push / pull
.col-md-4 .col-md-pull-8

on small and extra small devices

.col-md-8 .col-md-push-4

.col-md-8 .col-md-push-4
.col-md-4 .col-md-pull-8

You can also play with offset, visible and hidden classes.
See http://getbootstrap.com/css

February 5, 2014


JQuery UI is actually used for...
autocomplete widget

• Search filter
• Submission, authority
controlled metadata

Submission lookup
• Tabs
• Accordion

File Upload

• progress bar

February 5, 2014


Guidelines & design decision
• The current implementation is not perfect but it is
much better than the previous one.

• We expect wide adoption and lot of improvements and
fix, specially for mobile device, in the next versions
• At Cineca we are going to install DSpace 4 with this UI
for over 50 universities and research centres in 2014

• Rely only on standard bootstrap CSS classes
• Focus on middle size desktop screen col-md-*
• Uniform use of metaphor and navigation
February 5, 2014


Common UI experience pattern
• In a wizard

• The next button goes on the right
• The previous button goes on the left

• When a link makes changes it is always rendered as a
button
• The state classes are used as follows:

• Primary (blue): the expected button(s) to be used in a form
• Success (green): add/update content, «save» buttons.
Success acknowledgment
• Danger (red): remove/delete content, «remove» buttons.
Information that you MUST read before going ahead
• Warning (yellow): change that can be reverted with some
work, information to understand before going ahead
• Info (blue): access to additional information

February 5, 2014


JSPUI Extensions
• The use of a CSS Framework with a solid grid
system can facilitate the implementation of an
extension mechanism “build by blocks”
• DSpace already has a basic support for that on the
controller side. The main “pages”: home,
community, collection and item all support
injection of logic via “processor”
• The view fragments actually need to be included
“manually” editing the main jsp but… nobody stops
us to dream about UI to configure the content
order and positioning
February 5, 2014


Home page processors

dspace.cfg: plugin.sequence.org.dspace.plugin.SiteHomeProcessor

RecentSiteSubmissions

SideBarFacetProcessor

TopCommunitiesSiteProcessor

February 5, 2014


Does Bootstrap matter for XMLUI?
Yes, recent news say that also XMLUI developers are
looking to bootstrap as CSS framework to support
new themes
MIRAGE2

“This theme for the DSpace "Manakin" XML User Interface was
built on modern web technologies including Bootstrap,
SASS/Compass and Grunt. Mirage 2 offers a fresh look and feel
together with an entire range of optimizations behind the scenes.
The public face of the theme is available for evaluation in a
dedicated preview repository. The associated source code will be
released after the release of DSpace 4.”
http://duraspace.org/mirage-2-fresh-look-and-feel-dspace-4

February 5, 2014


Different level of details on different device – keeping important information easy to read!

February 5, 2014


Search User experience
improvements
JSPUI & XMLUI

February 5, 2014


JSPUI & XMLUI
improvements
• ICU accent folder

• Solve transliteration problem for UTF-8 characters so
that you can for example search for Martìnez, entering
martìnez or martinez to get the same results
• It is enabled out-of-box, just be sure to re-index your
content after the upgrade

Martìnez
Martinez
February 5, 2014

Juan Martìnez

improvements

JSPUI & XMLUI

• Did you mean?

Help the user when the input query has match using a ngram index but no match with the “standard” index

It is almost (  see DS-1899 ) enabled out-of-box in a
fresh DSpace 4 installation.
February 5, 2014


<bean id="defaultConfiguration"
class="org.dspace.discovery.configuration.DiscoveryConfiguration“ scope="prototype">
….

<property name="spellCheckEnabled"
value="true"/>
</bean>

Pay attention: you have multiple configurations!
<bean id="org.dspace.discovery.configuration.DiscoveryConfigurationService“ …>
<property name="map">
<map>
<entry key="site" value-ref="homepageConfiguration" />
<entry key="default" value-ref="defaultConfiguration" />
<entry key=“123456789/1" value-ref=“customCommunityConfiguration" />
….

February 5, 2014


Search: user mishaps… tips
• Hei my publication doesn’t appear in the browse by
title list or in search results!
• Is your publication published in the repository?
Publications under workflow are not searchable
• Is your publication publically accessible? Discoverable
and without embargoes?
• Is your publication just approved for entry in archive?
Give the system the time to index it! By default new
content becomes available for search and browse within
10 seconds

February 5, 2014


Search User mishaps…

Still having issues?
Ok, you could be right, the indexing procedure in dspace is
separate from the main process that manages item editing
and workflow. There is a little chance that SOLR was in trouble
when you made the changes and was not able to index.

Check the dspace.log files, if this is the case, restart
the SOLR webapp and reindex your content

February 5, 2014


Enhanced Submission

February 5, 2014


Default mode: traditional
February 5, 2014


Lookup by identifier
February 5, 2014


Lookup results
February 5, 2014


Import by file
February 5, 2014


Import by file: preview
February 5, 2014


StartSubmissionLookup step
• Available only for JSPUI but doesn’t break the
XMLUI. Must be enabled in item-submission.xml
<step id="collection">

<processing-class>org.dspace.submit.step.StartSubmissionLookupStep</processing-class>
<jspui-binding>org.dspace.app.webui.submit.step.JSPStartSubmissionLookupStep</jspui-binding>
<xmlui-binding>org.dspace.app.xmlui.aspect.submission.submit.SelectCollectionStep</xmlui-binding>
<workflow-editable>false</workflow-editable>
</step>

• Built on top of BTE can be further configured and
extended via the config/spring/api/bte.xml
• New providers
• Tuning metadata mapping
• Enabling search functionalities

February 5, 2014


Enabling the free search
The system allows a further “submission mode”: free search
across Bibliographic Database. The target provider must supply
API to query its internal database with free text or optionally
title, authors and date indexes.
[dspace-dir]/config/spring/BTE.xml

<bean id="pubmedOnlineDataLoader“
class="org.dspace.submit.lookup.PubmedOnlineDataLoader">
<property name="searchProvider" value="true" />
<property name="fieldMap" ref="pubmedInputMap" />
</bean>
February 5, 2014

Free search
February 5, 2014

Free search “mode”


Free search
February 5, 2014


Free search mode
• It is disabled by default

• It is supported by all the providers supplied out-of-box

• Current implementations are sub-optimal

February 5, 2014


Embargo improvements

February 5, 2014


Embargo & private item
(also for XMLUI)
February 5, 2014


Embargoed Bitstream
(also for XMLUI)
February 5, 2014


Review embargo
(also for XMLUI)
February 5, 2014


Upload step improvements

February 5, 2014


Sherpa/RoMEO
February 5, 2014


Configure the Sherpa/RoMEO
integration
• It is enabled by default but can be disabled via
dspace.cfg, i.e.

webui.submission.sherparomeo-policy-enabled = false

• It is configurable

• [dspace-dir]/config/spring/sherpa.xml

• Decide which metadata use for the Sherpa/RoMEO lookup (default
dc.identifier.issn)
• Switch to a different “ISSN Extractor” Strategy. For example you
could look in the authority field of a metadata, useful in
conjunction with SHERPARoMEOJournalTitle

• [dspace-dir]/config/dspace.cfg

• Enable the use of a specific apikey, anonymous user are limited to
500 query/day sherpa.romeo.apikey = YOUR-API-KEY

February 5, 2014


AJAX Upload
February 5, 2014

DS-1897 JavaScript bug 
Fix available  4.1


Request a copy
JSPUI & XMLUI

February 5, 2014


 Submitter / Author

February 5, 2014


token=c3c604015798ff5de16ea626c3f93b71

February 5, 2014


 Requestor User
February 5, 2014


 Repository administrators

February 5, 2014


Request a copy configuration
• Who can made the request? dspace.cfg :
request.item.type
• Anonymous users - all
• Logged-in users - logged
• Nobody (disable the feature) – empty

• Who receive the request a copy emails?
[dspace.dir]/config/spring/api/requestitem.xml
• Submitter
• Corresponding author as noted in metadata

February 5, 2014


A personal comparison of JSPUI vs XMLUI
The following slides reflect the opinion of the presenter, but it is not an
official statement from DuraSpace nor the DSpace Committers Group.

February 5, 2014


JSP UI

XML UI

Lightweight easy-to-learn standard-based
technology

Clear separation between content and
visualization XML / XSLT

First DSpace UI, widely adopted

Come by default since DSpace 1.6+

Skinnable

Possibility to use themes also for single
community/collection (some themes freely
available)

Mobile friendly

Mobile theme

Layout hard to customize in depth
Content creation & view logic mixed-up

February 5, 2014

Complex technology
Strongly coupled with the Apache Cocoon
framework (almost stale)
Hardware consumer
Need to be cached for reasonable
performance


JSP UI vs XML UI: End user functionalities
• Enhanced submission

• Bibliographic database integration
• Sherpa/RoMEO
• AJAX progress bar

• DSpace-CRIS module*

• Researcher/OrgUnit/Project profiles
• Management of authority lists (journals,
etc.)
• Disambiguation
• Collaboration Network analysis
• Etc.

• Advanced workflow
• Customizable trough XML

• Discovery extra features
• Highlighting
• Related items

• Statistics extra features
• Workflow events
• Search usage

• un-official module supported by Cineca
http://cineca.github.io/dspace-cris

February 5, 2014


Choose a UI based on your local
preferences and expertise
“Both the JSPUI and XMLUI are supported and in use by
members of our Committers Team. Both UI platforms have
their advantages and disadvantages. So, we recommend
choosing a UI based on your local preferences and expertise.
At this point in time, there are no plans to deprecate either UI
as they are both in active use throughout our community. If UI
deprecation was ever being considered, we would consult
with the DSpace Community before making any decisions.”

-- The DSpace Committers Group

February 5, 2014


Thank you!
Andrea Bollini

Product Manager - Cineca
a.bollini@cineca.it

Don’t forget, slides and questions:
http://bit.ly/dspace4-ui

February 5, 2014


2-5-14 “DSpace User Interface Innovation” Presentation Slides

More Related Content

What's hot

Viewers also liked

Similar to 2-5-14 “DSpace User Interface Innovation” Presentation Slides

More from DuraSpace

Recently uploaded

2-5-14 “DSpace User Interface Innovation” Presentation Slides