1. To mobility!
And beyond…
Bb mobile learn for the people

2. First things first …
• Who am I?
– Bert Coenen
 Functional Blackboard administration
 Training, support, Blackboard consulting and counseling
 Development for UI and bug fixing
• Who are we?
– Toledo-team
 Association KU Leuven
– 150.000+ users
– 14 institutions
– 13 themes, some heavily customized
» It’s our experience with themes that got this project started
 Mobile Learn since september 2012
– User numbers steadily in decline
2

3. WHAT DID WE DO?

4. Mobile-accessible user interface
• Not platform-dependent
– At least not explicitly so
 User needs a decent, modern browser
• Using standard Blackboard tools
– Brands and themes
– Tabs and modules
• Using standard web technologies
– CSS
– JavaScript
• Without any changes to Blackboard code
4

5. WHAT DOES IT LOOK LIKE?

6. What does it look like? (demo)
• Clean interface, no clutter
• Basic toolset
– 1 essential button / tool per page
• Everything is collapsible and expandable
– Announcements
– Items
– Menus
• Extra navigational aids for mobile devices
6

7. WHY DID WE DO IT?

8. The secret to great abs
8

9. The secret to great apps
• Minimize data transfer
– Presentation is stored locally
– Only data requested by the user are downloaded
• Add device specific behaviour
– Extra features
• Use device’s features
– Push notifications
• (Ability to work offline)
9

10. Is Blackboard Mobile Learn a great app?
• Data transfer?
– The app is no browser
 Html and (multi)media can not be rendered
– App is very dependent on browser
 Actual data transfer is not that much smaller!
• Added value? Extra features?
– Above all: crippled tool set
 No wikis, no VTBE, no tests, no assignments, no CMS, no
observer support, no modules, no tabs, no …
– What you do get:
 Camera integration, mobile compatible tests, swipeable rubber
band, …
• Use of device’s features
– Push notifications
 Do they work? Are they 100% reliable?
10

11. data transfer
Mobile Learn Mobile Learn for the people
Download app 4.8 MB 0
Launch app and log in 400 KB 800 KB
Open organisation + 3 items 100 KB 400 KB
Open 3 items in browser 400 KB 0
Open file (4MB) 4 MB 4 MB
Total 9.7 MB 5.2 MB
Without app download 4.9 MB 5.2 MB
11

12. SOME INFORMATION IS WRONG!

13. 13

14. 14

15. SOME SCREENS ARE NOT VERY PRETTY
SOME SCREENS ARE NOT VERY USABLE
SOME SCREENS ARE UGLY AND UNUSABLE

16. 16

17. Does Blackboard need an app?
• Why, yes!
– An elegant and reliable notifications system
– Portal to a mobile accessible web application (aka website)!
• But not like this!
– Big environment crammed into small box
– Separate development track
 Duplication of development
– Blackboard exists, why build another one?
– For every mobile platform
» New kids on the block (Firefox OS, ubuntu mobile, …)
» No standard feature set
 Replication of old Blackboard issues
– Support for other locales / language packs
» Non-American numeric notations
» On-screen messages
17

18. HOW DID WE DO IT?

19. Custom theme
• Important! Think of it as a theme!
– It’s not rocket science, no massive app development
– Needs updating every time Blackboard is upgraded
– BUT: it is fully customizable!
• Basic CSS-rules
– Optimized use of screen real estate
 Un-needed elements are removed from the UI
 All elements can be collapsed and expanded
 Layout in function of resolution
19

20. 20

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

22. 22

23. Dedicated tabs
• In our setup: 3 tabs, 3 modules (1 per tab)
– What’s recent?
 Custom notifications module
– My Courses
– My Communities (organisations)
 Custom modules
• Customizable
– You can use other tabs, other modules
23

24. 24

25. Javascript
• Add interactive elements
– Menu-buttons
• Add behaviour to elements
– Collapse / expand
– Answer options in tests
25

26. Dedicated url
• Regular url
– https://cygnus.cc.kuleuven.be
• Mobile url
– https://m.cygnus.cc.kuleuven.be
– virtual host, linked to brand and theme
• This was the hardest part!
– DNS
– Certificates
 Shibboleth (14 different schools, 14 IDP’s)
 Load balancer
26

27. Server magic
• Trick Blackboard!
– User is always sent to default tab (or 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
27

28. SOME SIDE NOTES?

29. Talking overheads
• Built upon Blackboard
– Entire pages get downloaded
 HTML
 CSS
 JavaScript
– All modifications are made after page is downloaded
– Users load more data than needed
• Inevitable
– But, actual data transfer is not so different from app!
29

30. Some known issues
• Not platform, but browser dependent
– Not all browsers perform equally well
• Worst problems
– VTBE in Safari on iOS
 Support for iFrame is bad, VTBE is unusable
– JS issues in Safari on iOS
 Standard Blackboard features do not always work
30

31. WHAT CAN BLACKBOARD DO?

32. Adopt this project!
• Or develop something similar
– Ported to all releases
 Out-of-the-box
 No more hacks and server magic
– Rewrite JSP’s
 Deliver optimized pages
– In terms of weight
– In terms of markup (clean, up-to-date html!)
 Only content needed in a mobile context
 Optimal data usage
32

33. WHAT’S IN IT FOR YOU?

34. What’s in it for you?
• Portable to other environments
– Package on Oscelot
 CSS, JS, Images
 Setup instructions
• Not out-of-the-box
– We’re on 9.1 SP 7
 CSS must be tested and tweaked for other releases
– We use custom tabs and modules
 Use your own tabs and modules
 Extend CSS to style your own tabs and modules
– Adapt CSS to tie in with your institutional branding
• Remember: you are in full control!
34

35. WAS IT HARD TO DO?

36. Major problems and obstacles
• Blackboard screens are made for large
displays
– Frames
– Course Menu
• Blackboard’s code
– Markup is not very malleable
• 2 layouts for 1 user-id?
– Our environment: 14 schools
 14 brands and themes
 Determined by user’s roles
36

37. 37

38. 38

39. EXTRAS

40. Addendum: 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
– Customizable feature set
40

41. 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
41

42. 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
42

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

44. 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
44

45. 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
45

46. 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
…
46

47. Bb Mobile Learn Bb Mobile For The People
Custom tabs
Custom modules
Brands and themes
Language packs
Observer role
Messages
47