Customizing the Blackboard Learn UI & Tag Libraries. George Kroner, Developer Relations Engineer

Size: px

Start display at page:

Download "Customizing the Blackboard Learn UI & Tag Libraries. George Kroner, Developer Relations Engineer"

Abner Holt
5 years ago
Views:

1 Customizing the Blackboard Learn UI & Tag Libraries George Kroner, Developer Relations Engineer

2 Agenda Product capabilities Capabilities in more depth Building Blocks revisited (tag libraries) Tag libraries migration R8->R9

3 Release 9: the impact to you Engaging new user experience Flexible and open platform Best of Blackboard and WebCT

4 Tailored user experience Provide consistency in User Experience Brand your VLE to your institution Familiarity of other campus systems Familiarity of legacy products & institution-specific terminology Standard components and behaviors Improved usability & accessibility

5 Product / technology options Customized login / portal features SysAdmin Panel->Brands and Themes->Customize Login Page SysAdmin Panel->Gateway Options SysAdmin Panel->Communities Settings Campus branding, look & feel (includes icons) SysAdmin Panel->Brands and Themes UI customization via CSS SysAdmin Panel->Brands and Themes->Theme and Palette Catalog Language Packs (terminology & textual graphics) SysAdmin Panel->Language Packs Course Control Panel->Customization->Properties Course layout customization SysAdmin Panel->Brands and Themes->Default Course Design Course Control Panel->Customization->Style

6 Demos

7 Blackboard Building Blocks: Tag Libraries As Always Inherit the experience free! Reduce training costs Increase adoption B2 UI Today NG B2 UI % improvement 38% improvement Clicks Page Loads

8 For you and your users Simplified Developer Experience Tag library improvements Options for existing Blackboard Building Blocks Consistent User Experience Standard components and behaviors Improved usability Accessibility User Interface must be accessible to all Performance Browser-side performance

9 New JSP Tag Library Now: bbui New: bbng Why a new tag library? Ease conversion of JSP pages. Maintain compatibility with legacy Building Blocks. Fresh slate. What will be in the new tag library? Tags for generating all the standard NG page components. Tags for managing resources required by a page.

10 Existing Building Blocks What s going to happen to my existing Building Blocks? Will I have to update all of my JSP pages? If I don t update my Building Block, will it look out of place? Why should I update to use the new tag library?

11 Existing Building Blocks What s going to happen to my existing Building Blocks? Will I have to update all of my JSP pages? Existing Building Blocks will work with minimal Existing Building Blocks will work with minimal to no changes. The tags in the legacy bbui tag library will still be present.

12 Existing Building Blocks If I don t update my Building Block, will it look out of place? The legacy tag library will be updated to maintain the same look as the NG tag library. If your JSPs are implemented using the legacy tags your pages should work with no changes. If not, consider updating your pages to use the new NG tags.

13 Existing Building Blocks Why should I update to use the new tag library? Although the legacy tags will provide a similar look to the new tags, none of the new functionality will be present. Updated pages will be more consistent with the rest of the application. Conversion of standard page types from the legacy tags to the new tags is easy, and the new tags greatly simplify development of new pages. Security for the future.

14 Consistent User Experience New tag library promotes consistency. New and improved components and behaviors. Standard Page Components:» Page Shells» Action Bars» Data Collection Pages» Inventory Lists» Content Lists» And more Standard Behaviors:» Drag and Drop» Contextual Menus» And more

15 Page Shell Tags Each JSP has one. What will they do? Generate HTML for everything outside of the main page content.» <html>, <head>, etc. Include CSS/JavaScript files common to all JSP pages.» E.g. Prototype JavaScript library, NG CSS Manage resources added by the JSP.» E.g. Page-specific JavaScript files, CSS files Automatically generate some page components.» E.g. Breadcrumb bar, Title bar

16 Page Shell Tags Several Types: <bbng:learningsystempage>» For pages used in a Course or Organization.» Will automatically generate the Course/Organization menu. <bbng:genericpage>» For admin type pages. <bbng:includedpage>» For pages that are jsp-included in other pages. (e.g. using the <jsp:include> tag)

17 Action Bar

18 Action Bar <bbng:actioncontrolbar> Standard component for displaying page-level actions. Action buttons - <bbng:actionbutton>» Shows a single action» Can be primary or secondary Action menus - <bbng:actionmenu>, <bbng:actionmenuitem>» Shows multiple actions in a fly-out menu» Can be primary or secondary

19 Action Bar <bbng:actionbutton primary= true > <bbng:actionmenuitem> <bbng:actionmenu> <bbng:actioncontrolbar>

20 Data Collection Page

21 Data Collection Page <bbng:datacollection> Standard component for gathering information. Steps» <bbng:step> Data Elements» <bbng:dataelement> Submit Buttons» <bbng:stepsubmit>, <bbng:stepsubmitbutton>» Submit buttons automatically put at top and bottom of data collection.

22 Data Collection Page <bbng:datacollection> <bbng:step> <bbng:stepsubmit> <bbng:dataelement>

23 Inventory List

24 Inventory List <bbng:inventorylist> Standard component for displaying sortable, paged data in a table. List Action Bar ( <bbng:listactionbar> )» Allows actions to be performed on one or more list items.» Individual action items or groups of action items can be specified. List Contextual Menu ( <bbng:listcontextmenu> )» Set of actions specific to an associated list item.» Can automatically get actions from the list action bar. Paging Controls» Standard paging controls to select items per page, switch between pages, etc.

25 Inventory List <bbng:inventorylist> <bbng:listcontextmenu> <bbng:listactionbar>

26 Contextual Menus <bbng:contextmenu> Provide a set of actions to manipulate an associated item. Helps minimize the number of clicks it takes to perform an action. Menus can be defined explicitly in the JSP by using <bbng:contextmenuitem> tags, or loaded dynamically from the server using Ajax. Dynamic menus:» can show items based on conditions or data unknown to the JSP.» can improve performance.» are simple to implement.

27 Content List

28 Content List <bbng:contentlist> Standard component for showing an ordered collection of content. Drag and Drop reordering» For quickly changing the order of displayed content.» Can be enabled/disabled in the JSP. Contextual Menus

29 Content List Keyboard accessible repositioning controls <bbng:contentlist> Drag and Drop in progress <bbng:contentlistitem>

30 Drag and Drop Built-in support in various tags. E.g. Content List, Inventory List Allows users to quickly reorganize content without reloading the page they re currently on. Simple to implement. Accessible! Controls to reorder items using the keyboard are automatically available.

31 Accessibility

Accessibility Everyone should be able to use the application. E.g. Visually impaired users using a screen reader or users unable to use a mouse using the keyboard.

32 Accessibility Everyone should be able to use the application. E.g. Visually impaired users using a screen reader or users unable to use a mouse using the keyboard. The NG User Interface and tag library has a strong focus on accessibility. Working with accessibility user group Standards-based HTML and CSS used throughout. All flashy new behaviors either are keyboard/screen reader accessible, or have alternative methods of access.» E.g Drag and Drop keyboard-accessible repositioning.

33 Accessibility What can you do to help? Design with accessibility in mind. Use the NG tag library.» It has a lot of built-in support for accessibility (E.g. setting labels for form fields, etc.) Use standards-based HTML and CSS in your pages.» Don t use <table>s for layout purposes» Instead, use markup that makes sense (e.g. a <ul> for an unordered list of items) and use CSS to style it. Use header tags to define different levels of content.» Helps screen readers a flat content hierarchy is hard to navigate. Provide alternative options for dynamic behavior.» If the action requires vision or use of the mouse, an alternative must be provided.

34 Performance Browser Performance With more and more dynamic behavior being pushed to the client, browser performance becomes important. What has a greater effect on overall page load time: server processing, or loading html components? It turns out that roughly ~80% of a page s load time occurs after the page has been generated by the server!» (source: The NG tag library will provide some tags to help maintain good client-side performance, but a lot of the responsibility lies on the person writing the pages.

35 Performance What can you do to help? Make fewer HTTP requests. Avoid including duplicate JavaScript/CSS files on the page. Externalize JavaScript/CSS files. Write efficient JavaScript code.

36 Performance Make fewer HTTP requests. Each file loaded by the browser has an associated overhead. Loading one large file can be faster than loading several small files. Can combine several small JavaScript files into one script file, or several CSS files into a single stylesheet.

37 Performance Avoid including duplicate JavaScript/CSS files on the page. If they re not cached, browser must download the files twice. Can be hard to remember which files were added where. The NG tag library will provide a solution.» <bbng:jsfile> - adds a JavaScript file to the page, checking that the script hasn t already been added.» <bbng:cssfile> - adds a CSS file to the page, checking that the stylesheet hasn t already been added.

38 Performance Externalize JavaScript/CSS files. Inline scripts/stylesheets add to the overall page size for each request. External scripts/stylesheets can be cached by the browser. External files make maintenance easier.» Don t have to search through all the JSP files, modify them and recompile them. What about localization of strings in JavaScript?» NG tag library will provide a solution.» <bbng:jsbundlemessage> - exposes a localized message to any JavaScript on the page with a format similar to Java s message bundles.» page.bundle.getstring( message.key, arg1, arg2,...);

39 Performance Write efficient JavaScript code. More dynamic behavior means a lot more JavaScript running on the browser. Slow scripts can make the application feel sluggish.» Especially scripts that run onload Different browsers have different execution speeds.» (e.g. Firefox and Safari are much faster than Internet Explorer) Some solutions Use a JavaScript library e.g. Prototype. Profile scripts to find bottlenecks e.g. Firebug. Be lazy don t run code now if you can run it later.

40 Sample Building Block modifications

41 Your turn Ask questions Provide feedback Thank you! For more information, please contact: George Kroner, Developer Relations Engineer Visit:

WEB CREATOR PAGES MANAGER

WEB CREATOR PAGES MANAGER TABLE OF CONTENTS TABLE OF CONTENTS... 2 ADMINISTRATIVE PERMISSIONS... 3 ACCESSING WEBSITE SETTINGS... 3 PAGES MANAGER... 3 Accessing Pages Manager... 3 PAGE MANAGER NAVIGATION...