• Like

To Mobility and Beyond! BbMobile Learn for the People

  • 151 views
Uploaded on

 

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
151
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 PRETTYSOME SCREENS ARE NOT VERY USABLESOME 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 PeopleTestsAll Question TypesSurveysFeedbackPush NotificationsPull Notifications (module), RSSAnnouncementsCreate new announcement Use VTBE All optionsModify announcementProperly render announcement 41
  • 42. Bb Mobile Learn Bb Mobile For The PeopleContent itemsCreate new itemModify itemProperly render itemContent (multimedia)Display media inlineVTBEBasic text formattingAttach files, multimediaContent Collection 42
  • 43. Bb Mobile Learn Bb Mobile For The PeopleGradesDiscussion BoardsCreate forumCreate threadReply to threadAssignmentsOrganizations 43
  • 44. Bb Mobile Learn Bb Mobile For The PeopleBlogsCreate blogCreate blog postComment on blog postJournalsCreate journalCreate journal postComment on journal post 44
  • 45. Bb Mobile Learn Bb Mobile For The PeopleWikisCreate wikiCreate wiki pageEdit wiki pageGroup pagesGroup toolsFile exchangeLearning modules 45
  • 46. Bb Mobile Learn Bb Mobile For The PeopleCourse toolsRosterContacts Add contact Edit contactTasks Add task Edit taskSend EmailCalendar Add eventGlossary… 46
  • 47. Bb Mobile Learn Bb Mobile For The PeopleCustom tabsCustom modulesBrands and themesLanguage packsObserver roleMessages 47