Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive hackfest: Code4Lib2014 Pre-conference

336 views

Published on

Pre-conference delivered at Code4Lib 2014. This structured hackfest will give attendees an opportunity to explore methods to create responsive mobile apps using the Bootstrap framework and a set of APIs for accessing library data. We will start with an API template for creating space-based mobile tools that draw from work coming out of the IMLS funded Student/Library Collaborative grant. Available APIs will include a room reservation template and codebase for implementing at any campus and the set of Minrva catalog APIs generating JSON.

Hosts will give a brief report of a study on student hacking projects and interests in mobile library apps that are the basis for the templates utilized in this Hackfest. By the end of the pre-conference attendees will have a sample responsive mobile web app in Bootstrap 3 to bring back to their campus which can plug into their site-based content.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive hackfest: Code4Lib2014 Pre-conference

  1. 1. Code4Lib 2014 Responsive Design Hackfest Monday, March 24th, 2014 Jim “Lazer” Hahn David Ward
  2. 2. Schedule 1. Overview 2. Hands-on with responsive templates 3. Small Group App Design 4. Presentations 5. Debrief
  3. 3. Overview Goals • Investigate responsive web/mobile app design strategies • Develop experience retrieving and displaying library API data • Discuss methodologies for student/patron-led library application design methodologies
  4. 4. Overview Background • Funded by 2 year IMLS National Leadership Grant • Experimented with multiple strategies for student- driven library application design • Focused on identifying library data patrons consider important • Created design architectures that valued portability and reusability of application components
  5. 5. Minrva
  6. 6. Hands-on • Templates uploaded to Box • https://app.box.com/s/fxsfrsezvc29n1f7gdzu • Technologies used: – Bootstrap 3 – jQuery 1.11.0 – JSONP API data powered by Java backend
  7. 7. Hands-on Responsive grid column layout scheme • Write once, deploy everywhere • Think mobile first • Design to add, not cut • Before you code: – What are the primary functions of app? – What is the app workflow for each function? – What is the product or outcome of each function?
  8. 8. Hands-on Suggest Activities: • Experiment with dynamically retrieving library data • Update visual display based on user input • Show/hide items based on screen width – Extra small devices Phones (<768px) – Small devices Tablets (≥768px) – Medium devices Desktops (≥992px) – Large devices Desktops (≥1200px)
  9. 9. University of Toronto Catalogue – Desktop http://search.library.utoronto.ca/ 03/10/2014
  10. 10. University of Toronto Catalogue – Mobile http://search.library.utoronto.ca/ 03/10/2014
  11. 11. Grand Valley State University Libraries – Desktop http://www.gvsu.edu/library/ 03/11/2014
  12. 12. Grand Valley State University Libraries – Mobile http://www.gvsu.edu/library/ 03/11/2014
  13. 13. Duke University Libraries – Desktop http://library.duke.edu/ 03/11/2014
  14. 14. Duke University Libraries – Mobile http://library.duke.edu/ 03/11/2014
  15. 15. Minrva Web Services
  16. 16. API Documentation • http://minrvaproject.org/services.php • All feeds output from this path: Minrva-dev.library.illinois.edu/api/
  17. 17. Sample Response from api/tech/list
  18. 18. Small Group App Design • Code Camp Methodology • Discuss app ideas with attendees • Form small groups based on interest • Code!
  19. 19. Small Group App Design
  20. 20. Small Group App Design
  21. 21. • Events • Community – class member chat
  22. 22. • Scanner enhancements • Connect to non- library items (e.g. bookstores)
  23. 23. • Four Squarization of library experience • Operational unit is course, not library • Connect students within same courses
  24. 24. • Rate and review loanable technology • Ask for feedback at critical junctures like discharging, renewing • “Noise-o-Meter”
  25. 25. • Personalization – user search history, favorite library, etc. • Availability of physical resources (e.g. computers)
  26. 26. • Push availability updates • Ratings • User Interface
  27. 27. API Info – Part 1 Minrva Services • Docs: http://minrvaproject.org/services_catalog.php API base URI: • minrva-dev.library.illinois.edu/api/ Rooms Availability • Docs: http://dunatis.grainger.uiuc.edu/rooms • API base URI: http://minrva- dev.library.illinois.edu:8080/roomreserve/roomreserve
  28. 28. API Info – Part 2 Study Buddy • Docs: http://dunatis.grainger.uiuc.edu:8080/sb/ • API base URI: http://dunatis.grainger.uiuc.edu:8080/sb/api/
  29. 29. Box documents https://app.box.com/s/fxsfrsezvc29n1f7gdzu
  30. 30. Presentations
  31. 31. Discussion and Questions • Jim Hahn jimhahn@illinois.edu • David Ward dh-ward@illinois.edu

×