Presentation is loading. Please wait.

Presentation is loading. Please wait.

BUILDING NEW INTERFACES FOR SHOCKER OPEN ACCESS REPOSITORY Sai Deng, Wichita State University Libraries KLA-CULS Fall Conference 2010.

Similar presentations

Presentation on theme: "BUILDING NEW INTERFACES FOR SHOCKER OPEN ACCESS REPOSITORY Sai Deng, Wichita State University Libraries KLA-CULS Fall Conference 2010."— Presentation transcript:

1 BUILDING NEW INTERFACES FOR SHOCKER OPEN ACCESS REPOSITORY Sai Deng, Wichita State University Libraries KLA-CULS Fall Conference 2010

2 SOAR Manakin interface @ WSU Libraries

3 CUSTOMIZATIONS MADE Header : Institution logo and banner Footer : Text, links Pages : Color scheme Messages : Changed headings, news/messages Navigation bar : Added “Share” section and “Information” Section Static pages : Added “Help” files Record view and bitstream display : Changed records summary view label and bitstream link styles; changed “View” to “View/Download” for bitstreams; switched bitstream label and field data display order. Structural changes : Disabled top left “login” button and “Search” section on top of “Communities” in homepage Font : Disabled font-sizing mechanism originally included Additional aspects : Audio-visual streaming module, document viewer, image zoomer (from @mire)… Also experimented with community collapsing and expanding list, themes for different communities and image collections. Disabled these for the final interface due to various reasons.

4 TAKE A SECOND LOOK AT THE INTERFACE ds-header sidebar content ds-footer ds-trail ds-option-set-head aspect_artifactbrowser_CommunityBrowser_div_comunity-browser ds-option-set ds-div-head ds-paragrah file_news_div_news ds-div-head aspect_artifactbrowser_Navigation_list_browse aspect_artifactbrowser_Navigation _list_account_browse ds-information-option ds-share-option ds-search-option Understand page structures by looking at element ids and CSS classes.

5 CREATE THE MANAKIN INTERFACE Step 1: Find some documentations and presentations and understand what Manakin is Some resources to look at: DSpace System Documentation: Manakin [XMLUI] Configuration and Customization DSpace XMLUI-Manakin: NIS Camp: Developing Interfaces and Interactivity for DSpace with Manakin TDL training document: manakin-training.pdf manakin-training.pdf Donohue, Tim. Making DSpace XMLUI Your Own Gibson, Hilton. Asset Presentation Phillips, Scott. Manakin Developer's Guide. Some Manakin instances: Texas A&M Repository The Geologic Atlas of the United States IDEALS @ UIUC ResearchSpace@Auckland Search “Who’s Using DSpace” and select “Manakin Themes” Place to look for help: DSpace community: DSpace Tech-list

6 WHAT IS MANAKIN? XML-based DSpace user interface Modular interface layer Customizable on community, collection and item level Built by Apache cocoon framework Cocoon Pipeline model (Figure from Manakin: A New Face for DSpace at:

7 SOME MANAKIN CONCEPTS Cocoon: a web development framework built around the concept of pipeline, separation of concerns and a component-based architecture. Sitemap: a set of XML files that configures the cocoon components. Components: generators, transformers, serializers, matchers, selectors, actions, readers Pipeline defines components arrangement Aspect: provides a set of coupled features for the system. Theme : stylizes the content generated by Manakin. DRI (Digital Repository Interface): schema governing the structure of Manakin pages encoded in xml; has three top level elements:,, contained inside. Aspect chain generates DRI document, theme stylizes the DRI document and produces XHTML for display. Concept definitions from “Manakin: Developer’s Guide”.

8 M ANAKIN COMPONENT ARCHITECTURE /T IERS Java/Cocoon development Tier Add or modify aspects (features) XML/XSL Theme Tier Add or modify themes (structural changes) HTML/CSS style Tier Add or Modify themes (CSS changes) Read “Manakin: Developer’s Guide” for details.

9 CREATE THE MANAKIN INTERFACE Step 2: Navigate the file directories, locate the theme templates and get to know how to make changes Where are the theme templates? (In Source version): [dspace-source]/dspace-xmlui/dspace-xmlui- webapp/src/main/webapp/themes (In Release version, after run a maven build): [dspace- source]/dspace/target/dspace-1.6.2-build.dir/webapps/xmlui/themes/ At WSU Libraries: DSpace system upgrade from 1.4.2 to 1.6.2 (1.5 only installed in a test server); Installed release version; Source directory: [dspace-source]=/usr/local/src/dspace-1.6.2- release Running directory: [dspace]=/data/dspace Where did we find the theme templates the first time: data/dspace/webapps/xmlui/themes (in running DSpace) Where did we copy the templates to: [dspace- source]/dspace/modules/xmlui/src/main/webapp/themes/ Theme customization needs to be done in the source directory.

10 XMLUI THEME OVERLAY (From Donohue, Tim. Making DSpace XMLUI Your Own. Available at

11 T HEMES F ILE S TRUCTURE (@WSU L IBRARIES ) Themes themes.xmap dri2xhtml dri2xhtml.xsl Reference Kubrick wsu/ localtheme … QDC-Handler.xsl DIM-Handler.xsl MODS-Handler.xsl General-Handler.xsl structural.xsl lib images sitemap.xmap wsu.xsl images lib soarlogo.jpg soarfooter.jpg static quickguide.htm … help.htm … sitemap.xmap wsu/ localtheme … css … * wsu theme is based on Kubrick theme

12 H OW DOES THE THEME FIT INTO A BIGGER PICTURE ? DRI to XHTML Five steps in processing aspect content: Generate the DRI page (by aspects) Add page metadata Transform to XHTML Localize the page Serialize to the browser (Figure from TDL Manakin Training)

13 T HEME SITEMAP Configures cocoon components. /themes/Reference/sitemap.xmap (Reference theme sitemap) /themes/Kubrick/sitemap.xmap (Kubrick theme sitemap) /themes/wsu/sitemap.xmap (Local theme sitemap) /themes/themes.xmap General sitemap ThemeMatcher If matcher fails, default theme will be applied.

14 XSLT FILES Convert DRI to XHTML. /themes/dri2xhtml.xsl Import other xsl files /themes/dri2xhtml/structural.xsl Structural components of a theme /themes/dri2xhtml/DIM-Handler.xsl Items, collections, communities display /themes/dri2xhtml/General-Handler.xsl Bitstream display, file information /themes/dri2xhtml/MODS-Handler.xsl MODS file /themes/dri2xhtml/QDC-Handler.xsl Qualified DC

15 A SPECTS Aspects: search, browse, admin, e-person, submission… Check DSpace wiki Manakin How To Guides for “how to create a new aspect”; For an example of overwriting the trail links, see the figure below: (Figure from Donohue, Tim. Making DSpace XMLUI Your Own

16 CREATE THE MANAKIN INTERFACE Step 3: Decide on the template for testing and/or modifying, identify some areas for customization Templates: Reference, Kubrick, Classic… Decide on the parts which need customization: Header, footer Navigation bar Homepage news/messages Headings Page structure, sections Record display …

17 T OOLS Tools helping in making CSS changes and identifying page structure and elements Firefox Firebug IE 8 Developer Tools

18 REBUILD DSPACE MANAKIN Apache Maven and Ant Commands to rebuild Manakin @WSU Libraries: cd /usr/local/src/dspace/dspace-1.6.2-release/dspace mvn package cd /usr/local/src/dspace/dspace-1.6.2- release/dspace/target/dspace-1.6.2-build.dir (ant -Dconfig=/data/dspace/config/dspace.cfg init_configs) ant -Dconfig=/data/dspace/config/dspace.cfg update sudo /sbin/service tomcat5 restart (Commands provided by Andy Speagle, Unix Administrator.)

19 CREATE THE MANAKIN INTERFACE Step 4: Start create your local theme Themes (*These theme print screens were taken after themes were applied to different communities at a later testing stage at WSU.) Reference Theme Classic Theme

20 CREATE THE LOCAL THEME WSU theme is initially based on Reference theme, then is changed to Kubrick theme (after some internal feedback). Create WSU theme based on Reference theme: Copy themes folder to custom themes folder; cd /data/dspace/webapps/xmlui/themes cp –r themes /usr/local/src/dspace/dspace-1.6.2- release/dspace/modules/xmlui/src/main/webapp/themes/ Create “wsu” theme folder (mkdir) under “themes” based on Reference theme.

21 CREATE THE LOCAL THEME: MODIFY XMLUI CONFIGURATION FILE Modifiy XMLUI (Manakin) configuration file Modify which theme should be applied to a particular URL cd /usr/local/src/dspace/dspace-1.6.2-release/dspace/config vi xmlui.xconf attributes: name, id, regex, handle, path Cascading: down to derivative directories An example ( section in xmlui.xconf):

22 CREATE THE LOCAL THEME: MODIFY SITEMAP.XMAP Modify local sitemap.xmap by changing “theme-path” and “theme-name” to local ones. For example: wsu Wichita State University Libraries theme …

23 CREATE THE LOCAL THEME: CUSTOMIZE HEADER Header: logo change For reference theme test: change logo under images folder and adjust css under lib folder; cd \DSpace\dspace-1.6.2- release\dspace\modules\xmlui\src\main\webapp\themes \wsu\lib vi style.css div#ds-header a span#ds-header-logo { … background-image: url("../images/soarlogo.jpg"); } For Kubrick theme, change kubrickheader and kubrickfooter under lib/css folder and revise css as well.

24 CREATE THE LOCAL THEME: CUSTOMIZE HEADINGS AND MESSAGES Heading text cd /usr/local/src/dspace/dspace-1.6.2- release/dspace/modules/xmlui/src/main/webapp/i18n/ vi messages.xml Adjust heading styles in CSS. Change messages text in messages.xml Headings Trail message Menu header Error message …

25 CREATE THE LOCAL THEME: CUSTOMIZE FOOTER Customize footer text and links In Reference theme test, copy footer section from structural.xsl to local.xsl and modify local.xsl. For Kubrick theme, create local.xsl by modifying Kubrick.xsl. Change footer text and add additional links to local.xsl directly. For example: … University Libraries | Univeristy Home …

26 C REATE T HE LOCAL THEME : D ISABLE F ONT - SIZING MECHANISM Disable font-sizing mechanism. “The font-sizing variable is the result of a linear function applied to the character count of the heading text.” It causes huge font display in some browsers and size percentage for display needs to be adjusted in different browsers. Comment out font-sizing mechanism in structural.xsl --> … -->

27 C REATE T HE LOCAL THEME : D ISABLE F ONT - SIZING MECHANISM Add the following section to local.xsl. ds-div-head * Provided by DSpace Tech-list community. Change body and heading text sizes to be fixed in CSS files (when needed).

28 C REATE T HE LOCAL THEME : ADD A I NFORMATION MENU FOR HELP FILES Add custom code (adapted from UIUC’s code) to local.xsl to provide an information block in the navigation menu. If the search section is overwritten, copy “search” from structural.xsl to local.xsl. … Information quickguide.htm Help …

29 C REATE T HE LOCAL THEME : M ORE S TRUCTURAL CHANGES Disable top left “login” by modifying structual.xsl and commenting out this section: …. --> Remove front page search section (on top of the communities, NOT the search box in the navigation menu) Create a custom module folder: /dspace/modules/xmlui/src/main/resources/aspects; Copy ArtifactBrowser folder and its sitemap.xmap file from the sources folder to the custom folder; Comment out the following transformer in sitemap.xmap: For details, refer to

30 C REATE T HE LOCAL THEME : C USTOMIZE F RONT PAGE NEWS Edit homepage main text at [DSpace- source]/dspace/config/news-xmlui.xml XML DRI document An Example: … Authors retain copyright to their own works published/archived in SOAR (see Unive rsity intellectual Property policy.) … For DRI information, go to “DRI Schema Reference” at: 1.5.2/dspace/docs/html.legacy/DRISchemaReference.html#DRI_in_Ma nakin 1.5.2/dspace/docs/html.legacy/DRISchemaReference.html#DRI_in_Ma nakin

31 CREATE THE LOCAL THEME: ADD STATIC PAGES Add static pages (help and about pages) Create static webpages (check the structure and markup of DSpace pages before starting the work); Create “static” folder under local theme and Upload the files to the “static” folder; Modify static content section in local sitemap.xmap:

32 C REATE T HE LOCAL THEME : COLLAPSING AND EXPANDING FEATURE FOR COMMUNITY LIST Test on collapsing and expanding feature for community list Documentation is at Some code can be found in Texas A&M’s IR site, check Implement with caution, extra customization may be needed At WSU, add to local.xsl: [+] [-] … Add jquery-1.3.2.min.js and menus.js to lib/; Add the following lines to local sitemap.xmap for all browsers: Add css (from Texas A&M) to local.css: p#expand_all_clicker, p#collapse_all_clicker …

33 C REATE T HE LOCAL THEME : COLLAPSING AND EXPANDING FEATURE FOR COMMUNITY LIST However we disabled this function because it stopped statistics showing on the top level of the communities. Experiment at WSU


35 A TESTING RESULT: IMAGE GALLERY THEME Image Gallery theme ( “Includes a grid-view, popup metadata from grid view, and a zoom-and-pan viewer on image view interface.” See below for record view (CSS not fine adjusted) and zoom effect Not implemented to the final interface because we purchased image zoom module from @mire.

36 A TESTING RESULT: GRADUATE SCHOOL THEME The Graduate School theme (based on Kubrick theme, use Graduate School logo. Disabled in our final interface due to confusion in branding.)

37 A TESTING RESULT: USE A DIFFERENT BACKGROUND Local theme with a darker background (based on Kubrick theme)

38 C REATE T HE LOCAL THEME : B ROWSER TEST Step 5: Initial Testing in different browsers CSS customization and Browser test Browser selector mechanism Many browsers handle CSS in a more standard way (e.g. Mozilla Firefox, Opera, Google Chrome…) IE nightmare: IE8, IE7, IE6… Many positioning problems (no big issues in other browsers); Define different stylesheets; If encountering browser selector problems, use CSS hacks (mainly IE hacks). For example: color:brown\9; /* for all IE */ color:brown\0; /* IE8 only */ +color:red; /* IE7 only */ _ color:black; /* IE6 only */

39 F OCUS GROUP FEEDBACK Step 6: Get feedback from the focus group and admin office Some feedback: Make “title” and other labels in records summary view more prominent; Change “View” to “View/Download” in bitstream table and make the link more obvious; Change the order of bitstream table headers; Change “DSpace” labels to “SOAR”; “Send records to my Facebook”; Add statistics number on the top level of the communities; Delete “[+]” in front of the communities when there is only one level of community in homepage…

40 R ECORD SUMMARY VIEW L ABELS Make record summary view labels more prominent. Identified the element in MODS-Handler.xsl: xmlui.dri2xhtml.METS- 1.0.item-preview : … … Add link style in CSS for “.ds-table a” and “span.bold”.

41 M ESSAGES CHANGE Changes made in messages.xml: Adjust “show full item records” to “show Complete item records” in record summary view; Modify “All of DSpace” to “All of SOAR”; Chang bitstream table lable “View” to “View/Download” View/Download Discuss adding various file type logos under “Format” label in bitstream table (not investigated due to time constrain).

42 BITSTREAM TABLE LABEL ORDER Move “description” before “view” in bitstream table Copy sections of code from General-Handler.xsl to wsu.xsl and modify label and table cell content order accordingly …. xmlui.dri2xhtml.METS-1.0.item-files-head xmlui.dri2xhtml.METS-1.0.item-files- file … xmlui.dri2xhtml.METS-1.0.item-files- view … …

43 S TATISTICS NUMBER DISPLAY AND EXPANDING MENU FOR COMMUNITY LIST Add statistics numbers by changing configuration file (dspace.cfg); With the community collapsing and expanding feature on, the statistics numbers do not show up in the top community level and a “[+]” displays in front of each community even when there is only one level; We disabled the collapsing and expanding menu. If keeping it, more customization will need to be done.

44 “SENT TO MY FACEBOOK” Code provided by Stuart Lewis @Auckland Code added to structural.xsl (in our case, local.xsl since we modified the sidebar menu) For code and potential implementation issues, see this thread at http://www.mail- tech@lists.sourceforge.n et/msg12281.html http://www.mail- tech@lists.sourceforge.n et/msg12281.html

45 “SENT TO MY FACEBOOK” Cocoon caching and browser selector problems experienced at WSU Force IE browsers to display the content correctly by adding CSS hacks to the main CSS. See the previous thread. Send a link to Facebook

46 S OME THOUGHTS ABOUT M ANAKIN Good things about Manakin: Community and collection branding Make it possible for department pages in DSpace to be consistent to the department website (if preferred) Make it possible for faculty collection pages in DSpace to be consistent to the faculty website (if requested) Special visual effect and structural layout for some collections (e.g. images, maps) Allow sharing of modular extensions and new features… Some discussion on Manakin in DSpace Tech-list from the design perspective: Track the “Manakin questions” thread (e.g. http://www.mail- Templates are not associated with individual pages; Templating approach is more confusing than it is in other systems; Structural.xsl is huge and hard to modify; Program processing flow is not easy to follow; Is DRI layer necessary? Evaluation of Manakin needed…

47 S OME REFLECTIONS ON THE PROJECT The upgrade of DSpace at WSU Libraries is a team work of the IR Librarian, the Unix Administrator, the DSpace Tech Support and the Metadata Librarian. How can Manakin truly enhance an IR’s interfaces without great effort and time spent? How to best utilize the human resources when a developer team is not available in a small or medium sized institution? The Metadata Librarian’s Manakin experience: sharp learning curve, not too easy but rewarding Always find inspirations and good practices from other institutions; Look for help from Systems people and DSpace community.

48 PROJECT TEAM INFORMATION AND ACKNOWLEDGEMENTS Coordinator: Susan Matveyeva, WSU LibrariesSusan Matveyeva Administrative Support: Kathy Downes, WSU LibrariesKathy Downes Metadata Catalog Librarian: Sai Deng, WSU LibrariesSai Deng DSpace Tech Support: Baseer Khan, WSU LibrariesBaseer Khan Unix Administrator: Andy Speagle, WSU Computing CenterAndy Speagle Thanks DSpace community developers who either wrote the code or answered our Manakin questions: Hardy Pottinger from UM, Tim Donohue & Bill Ingram from UIUC, Stuart Lewis from Auckland and Hilton Gibson from Stellenbosch…

Download ppt "BUILDING NEW INTERFACES FOR SHOCKER OPEN ACCESS REPOSITORY Sai Deng, Wichita State University Libraries KLA-CULS Fall Conference 2010."

Similar presentations

Ads by Google