Tag: mobile design

Code4Lib Day 2: Morning Notes

REST IS Your Mobile Strategy

REST

  • Representational State Transfer – a methodology developed alongside HTTP 1.1
  • clients request representations of resources from servers – typically a document
  • basically turns into an API

Examples

  • Twitter
  • New York Times –  Congress API
  • Chicago Transit

iOS Development

  • need to know: Xcode, Objective-C, Cocoa Touch, Provisioning
  • Xcode – Apple developer, like Visual Studio or Eclipse
  • Objective-C – strict superset of C
  • Cocoa Touch – frameworks to talk to iOS, similar to RubyRails
  • UIKit
  • Provisioning Portal – annoying paperwork

OCLC Classify API

  • give it an item, tell you how it’s classified including call number

Process

  • Use Rested -MAC tool,grabs API information, and provides you the raw output
  • Xcode – create a new basic project
  • go from XML to Objective-C
  • use RestKit – maps XML to Objective-C
  • use PaintCode – create GUI
  • hire an artist
  • Apple App Review Process

Librobot App

  • in the store by April 2nd

Why REST Matters – What are the Major Milestones

  • math formula – importance of technology can be determined by the amount of money involved in a court case
  • Personal Computers
  • The Internet
  • Mobility
  • Build an API – ask for ideas, and apps will come.

Take Away

  • you have interesting data
  • make an API
  • If we build it, they will come for it!

All Teh Metadatas Re-Revisited

  • Esme Cowles, UC San Diego Library
  • Matt Critchlow, UC San Diego Library
  • Bradley Westbrook, UC San Diego Library

Continues the story from last year.

Needs

  • more consistent data
  • maintain syntax of hierarchical subjects
  • improve support for complex objects
  • align more strongly with the digital libraries community – most important

User Stories

  • to understand requirements of administration and researchers

Sorry, I had to take a brain break and got a little lost. I’m also going to blame twitter and IRC for distracting me. Take a look at the slides:

Implementation

  • DAMS Repository – new version of lightweight repository, with APIs
  • Manager – separate and uses the API
  • Public Access System – new frontend in Hydra, great community

Timeline

  • release in summer
  • code now available on Github

Browser/Javascript Integration Testing with Ruby

  • Jessie Keck, Stanford University
  • Slides

The Problem

  • needed to test JavaScript
  • especially since using progressive enhancement
  • site works without JavaScript, then more features with JavaScript
  • mistakes happen e.g. killed navigation,

Some Solution(s)

  • Watir == Web Application Testing in Ruby
  • built on watir-webdriver
  • Capybara – RSpec/Cucumber driver
  • ability to test responsive design
  • webkit integration available
  • personally like Capybara syntax (vs. Watir)
  • automated test that there is JavaScript bug e.g. automatically test that facets working

Gotchas

  • might want to use Watir Rails
  • transactional fixtures

Linked Open Communism: Better discovery through data dis- and re- aggregation

  • Corey A Harper, New York University

How to shut up about linked data and actually build something.

Context

  • context, the narrative of the library/archive
  • user stories

Death of Browse

  • discovery systems don’t use authority control
  • browse broken as UI design
  • rich data in authorities disconnected

The Idea Implemented

  • take EAD records, blow them up, take headings to match MARC records
  • pull people, coporations, and topic – pull info from DBpedia
  • index in Solr
  • slower than would like
  • On Github but is buggy

Solr Update

  • Erik Hatcher, LucidWorks

Sorry, but we don’t use Solr, and anyone really interested I think can look up information the update. e.g. Apache Solr Release Notes

Check out the slides:

Break Time

white otter
Time to Get Some Hugs

Ask Anything

Who’s faculty? Half Faculty – small handful who care about being faculty

Planing and pilot phase of bringing together all resources of types. How to decide what to use and where to start?

Normalizing records from MARC to Solr. Want help with format.

How many have library degrees? 2/3 do, 1/3 don’t

Code4Lib – archiving our stuff? Talk to Mark/anarchivist. Mailing list is archived on the university server. Mirrored on post. Regular basis, dumped to media forward.

Goals of BIBFRAME? Replacing/superseding MARC.

First-timers to c4lcon? majority of room. All? < 20

Anyone collecting social media on behalf of user community or collection building purposes? Going to be a lightning talk tomorrow.

Anyone from a theology library? ~5 ppl

Want to know successful examples of gamification to support information literacy by @maccabeelevine e.g. Lemontree

Glossary of technology and stacks. On code4lib wiki? A guide for the perplexed. We can work on it.

Who is using graph databases? 2-3 ppl

Using DSpace? 25-30 FedoraCommons? 25-30 Hydra? 10-15

This conference working for you? Almost everyone.

What do people think of the wiki? One idea is to move it over to github code4lib account.

From the federal government? 3

Anyone interested in integrated TSM into Solr? anarchivist says he knows people

How many non-library degree people considering getting one? 2

How many have project managers as their title? ~12 Public? 5 Academic? rest

CodeRead – looking at PyMARC (sp?). Anyone else looking into this?

Didn’t get all the questions, but that’s most of them.

Lunch Time

squirrel begging for food

MozFest 2012: Notes from Responsive Design Session

Techniques & Tips

  • flexible grids
  • media queries that aren’t pixel dependent
  • media queries to selectively adapt the page
  • responsive images (max-width: 100%, can hide small (767px)/medium(1296px)/large (1440px))
  • can use modernizr to detect if touch device
  • Foundation has flex classes for embeds to resize YouTube videos, etc.
  • For iframes, can use padding: % of ratio of iframe/embed
  • Responsive iframes by NPR will do it for you as well
  • Source code order (for screen readers especially)

Download Foundation (basic responsive, reset files) – uses 12 columns

Thoughts

Coding on the fly is great if the space is setup to be a hack session type thing, but the way the room was set was very much just presentation style. I just feel like I’m not really learning much when someone is coding in front of me. Demo is totally fine, but just watching them enter text seems like a bit of a waste of time.

I know mozfest is open for everyone, but somehow I expected it to be more advanced. I don’t think this covered anything I didn’t already know, and I wasn’t a huge fan of the fact that it was based on an existing package.

Definitely a great session to have for those who don’t know anything about responsive design though.

Branding the Library Website: Making a Flexible WordPress Theme

In moving our website to WordPress, I wanted to create a theme that could be used by our staff when working on online projects which would sit outside our main website, but in which we would host. Obviously they have the option of using other themes, but then someone (likely from our team) would have to make sure it meets accessibility guidelines, and as there are very few of those, I thought it best to just make our theme flexible.

No CLF

This is just a disclaimer that the main reason we could even do this is because we do not have a Common Look & Feel policy from the university administration, which most universities do. On the flip side, that’s one reason I wanted to do it. I would like that the library “products” are recognized as such. Doing it through a theme would also provide a more consistent user experience across the sites that use the library’s theme.

The Header

Our existing site already used a consistent header. However, it also includes the “Ask Us” logo, which would take you to the “Ask Us” page with all the myriad ways to contact the library for help. For other sites, it’s more likely that they will want to list specific contact instead, so I added an option to remove it.

new site header
New Header with Custom Menu and Google Search Bar

In addition, of course, for any sites using the theme, they will want the name of their site in the header, so I added a text box input for that in the options page and used font-face to pick a different font to make it stand out a little more.

The Menu

The navigation was built into the original theme so that you can either use a custom menu or it will fallback to using pages. However, the way our sites are made, some of the subpages menus would have been so long as to go past the end of the page, so I added the option to take out submenus.

new header with subsite title
Header with Subsite Title, Fallback Menu, and WordPress Search

Finally, the original website search bar redirects the user to the university’s Google search of the library’s directory, so I made the option to change it to the standard WordPress search bar to search within the current site.

The Footer

Since each site may have different links in the footer, I also made an option to include custom links in the footer, such that the ‘Home’ link is the only hard-coded link (which is always the link of the home page of the site you’re on).

new full footer
Full Site Footer with Custom Links and Social Media Icons

While it’s possible to make the social media buttons customizable, until there is a demand or need, I decided to simply put in the option to take them all out.

new basic footer
Hardcoded Part of Footer

The rest of the footer (copyright) is always there. Again, unless there is a demand or need, I didn’t make the copyright holder changeable.

Templating

As many sections of our website (e.g. catalogue/OPAC, Research Guides) are not part of the CMS, I am currently working on taking the WordPress template (minus the options) and creating a plain HTML and then a ColdFusion template to use in those sections.

Code4lib Day 2: Mobile Breakout Notes

Just a few notes if anyone is interested:

  • digital collections tool: wolf walk, digital images
    • geolocation using JavaScript to make it availble in HTML5
    • find it easier in app store, means more people use app
  • HTML5 more clunky with jQuery mobile
  • native app smoother, especially Google Maps
  • mobile site: only force on homepage and opt out using query string
  • mobile app/site needs to be interoperable
  • designing: mobile framework better at bringing out ideas vs. developing web version of a website
  • how do you build up services? concentrate on what is needed on mobile devices
  • should have just what you need and do it well while taking advantage of mobile aspects e.g. bluetooth, GPS
  • how best to build?: REST layer on top of what’s available
  • time resource: if know objective C, then just adding functions
  • voice use: comfort level? accurate enough? difficulty with quiet/study areas/floors?
  • phone tap to reserve seats/room, other application?
  • staff use in stacks? Shelflister: barcode scanner inserts into web form for shelf reading or collection development, including circulation data
  • mobile hours: just give today’s hours or closed (give tomorrow’s hours)

Code4lib Day 1: Kill the Search Button II – The Handheld Devices are Coming

by Michael Poltorak Nielsen, Statsbiblioteket/State and University Library, Aarhus, Denmark

Current Mobile Interaction Paradigm

You do a lot with your hands, everyday. Our hands are a really good tool, but currently, the handheld interaction is based on glass. That is you do functions by sliding your fingers, which means there is no feedback on what it does, i.e. it’s not intuitive.

Take a look at Pictures Under Glass: Transitional Paradigm dictated by technology, not human capabilities by Bret Victor.

An Alternative

  • direct manipulation
  • gesture driven
  • palpable
  • tactile

Smartphone Gestures

The near future may mean combining something like the Wiimote and the iPhone.

Mobile Projects

The idea was to build an HTML5 app that searches library data, favourites, view own items, renew, and request. Currently in beta, but to be published soon.

The search app can be augmented with gestures, gestures combined with multi-touch interactions.

Possible interactions with focus on

  • keyboard – typing
  • microphone speech
  • screen – touch, visuals
  • camera – pattern, movement
  • accelerometer – acceleration
  • gyroscope – rotation
  • compass  – direction
  • GPS – movement, position

Gestures

Might include simple ones using accelerometer data, including

  • tilt
  • flip
  • turn
  • rotate
  • shake
  • throw

The problem is that gestures are only really supported by Firefox, and partially supported by Chrome. Thus, it was decided that development would move to the native iPhone app environment with gestures, and HTML5 web app without gestures (but possibly later when supported). Features that are implemented include:

  • Restart search – face down
  • Scroll – tilt up and down
  • Switch views – tilt
  • Request items – touch and tilt left
  • Favourites – touch and tilt right

Check out the demo:

Challenges

  • no standard mobile gestures
  • gesture maybe individual
  • gesture may not be appropriate at all
  • sophisticated gestures are hard to code
  • Objective-C