1. Bb mobile learn for the people
or …
the project formerly known as
Bb mobile learn guerilla style

2. • What did we do?
• Why did we do it?
• Why did it take us so long?
• How did we do it?
• What do we still need (or want) to do?
• What can Blackboard do?
• What’s in it for you?

3. But first …
• Who am I?
• Who are we?
– Toledo-team
• Asociation KU Leuven
– 150.000+ users
– 13 institutions
– 13 themes, some heavily customized
• Expertise in branding / theming
– “Wouldn’t it be great if …”

4. What did we do?
• Mobile-accessible user interface
– Using standard Blackboard tools
– Using standard web technologies
• Mostly CSS
• Minor JavaScript customizations
– Not explicitly platform-dependent
• User will need a decent, modern browser

5. Before and after

6. Before and after

7. What did we do? (demo)
• Remove clutter
– Portal pages
– Content pages
• Context menus
• VTBE
• Color picker
– Discussion Board
– Blogs, Journals, Wikis
– Tests, Surveys, Assignments

8. What did we do? (demo)
• Remove buttons
– Keep 1 essential button / tool per page
• Add announcement
• Add item
• Add contact
• Add forum
• Add thread
• Reply
• …

9. What did we do? (demo)
• Make everything collapsible and expandable
– Announcements and items
– Menus
• Course menu
• Groups menu
• Crumbtrail / breadcrumbs bar
• Wiki / Journal / Blog
• Learning module navigation

10. What did we do? (demo)
• Make every test a mobile compatible test
– Optimized layout
– One question per screen
– All question types are supported

11. Why did we do it?
• To prove that it can be done
– App is not the only way to go (and maybe not the best)
• The app falls short
– Platform-dependent
– Too limited in functionality
– The app is no browser
• Html and (multi)media content can not be rendered
• User is still very dependent on browser
– Why not do everything in the browser?
– Main advantage of app (limited data transfer) is lost!
– Main issue:
• Information is wrong because it’s incomplete

15. The mobile trade-off!
• Small screen vs. Big environment
– Some features will inevitably be sacrificed
• Blackboard Mobile Learn
– Limited feature set
– Too limited for many people
• Usage has dropped rather than risen!
• Mobile web-application
– Many features that are missing in the app

16. Bb Mobile Learn Bb Mobile For The People
Tests
All Question Types
Surveys
Feedback
Push Notifications
Pull Notifications (module), RSS
Announcements
Create new announcement
Use VTBE
All options
Modify announcement
Properly render announcement

17. Bb Mobile Learn Bb Mobile For The People
Content items
Create new item
Modify item
Properly render item
Content (multimedia)
Display media inline
VTBE
Basic text formatting
Attach files, multimedia
Content Collection

18. Bb Mobile Learn Bb Mobile For The People
Grades
Discussion Boards
Create forum
Create thread
Reply to thread
Assignments
Organizations

19. Bb Mobile Learn Bb Mobile For The People
Blogs
Create blog
Create blog post
Comment on blog post
Journals
Create journal
Create journal post
Comment on journal post

20. Bb Mobile Learn Bb Mobile For The People
Wikis
Create wiki
Create wiki page
Edit wiki page
Group pages
Group tools
File exchange
Learning modules

21. Bb Mobile Learn Bb Mobile For The People
Course tools
Roster
Contacts
Add contact
Edit contact
Tasks
Add task
Edit task
Send Email
Calendar
Add event
Glossary
…

22. Bb Mobile Learn Bb Mobile For The People
Custom tabs
Custom modules
Brands and themes

23. Some side notes
• App development at Bb is separate track
– Old Blackboard mistakes are repeated
• Localisation (on-screen messages, numeric support, …)
• What the app should be?
– Notifications, notifications and… notifications
• Totally reliable mechanism, though
• Bb should fix long-standing issues in core product
– Notifications for:
» Adaptive release
» File updates in items
»…
– Any other functionality: in the browser

24. Why did it take us so long?
• Idea was born in 2010 (BbTLC, Swansea)
• Abandoned very quickly
– Seemingly insurmountable problems!
• Frames!
• Course Menu!
• Above all:
– 2 layouts for 1 user-id?

26. How did we do it?
• Dedicated tabs
• Custom theme
– CSS
• Javascript
– Dynamically adds elements to pages
• Dedicated url (aka: virtual host)
– “https://m.toledo.be”
• Server magic
– Redirect rule

27. Dedicated tabs
• 3 tabs, 3 modules (1 per tab)
– What’s recent?
• Custom notifications module
– My Courses
– My Communities (organisations)
• Custom modules
• Customizable
– You can use more tabs, other modules

29. Custom theme
• Basic CSS-rules
• Three main concepts
– Hide un-needed elements
– Collapse and expand elements
– Adjust element’s size to display size

31. I em what I em!
• Everything is relative
• EM = height of letter “M”
• Everything is sized in em’s
– Text
– Images
– Containers
• Margins, padding
….
• Base font size
– Changes with resolution
• Smaller resolution > smaller font
– Everything resizes with font

33. Javascript
• Add interactive elements
– Menu-buttons
– Collapse / expand buttons
• Add behaviour to elements
– Collapse / expand
• Change course behaviour

34. Dedicated url
• Regular url
– https://cygnus.cc.kuleuven.be
• Mobile url
– https://m.cygnus.cc.kuleuven.be
• Hardest part!
– DNS
– Shibboleth
– Load balancer
– Certificates

35. Server magic
• Trick Blackboard!
– User is always sent to default tab (group)
– Mobile user should be sent to first mobile tab
• Redirect rule on webserver
– If no tab group is specified
> redirect to url of the default mobile tab

36. What do we still need (or want) to do?
• Ditch Blackboard CSS
– Can it be done?
– Now: adjustments to Blackboard’s CSS
– Overhead
• 2 CSS files
• All Blackboard rules are applied, then overruled
• Streamline CSS
• Some issues
– Worst problem: VTBE on iOS
• Build Mobile Central-like tool-set
– Tab with module

37. What can Blackboard do?
• Rewrite html
– Some pages are really, really old
• Remove redundant, inefficient markup
– Use ID’s and classes
• Allow targeting of elements with CSS and JS
• Adopt this project!
– Port to all releases
– No more hacks and server magic
– Rewrite JSP’s
• Deliver optimized pages

38. What’s in it for you?
• Portable to other environments
– Package on Oscelot
• CSS for 9.1 SP 7
– Will need to be tested and adjusted for other SP’s
• JS
• Images
• Setup instructions
• Tabs and modules
– Custom modules
• Extend CSS to style Blackboard modules