Presented at the Amigos Library Services’ HTML5 & CSS3 Online Conference a couple of weeks ago. It was recorded, but the recordings are not public, so instead, I’ve included my deck and a slightly edited version of the script that I used.
Mark Matienzo – Wielding the Whip: Affect, Archives, & Ontological Fusion
- need to talk about emotion – a lot of things going on in my life
- inspired by Archives by Emotion
- why do we not acknowledge that archives are based on emotion, stories
- facebook ‘like’ is not an emotion
- losing connections to materials and history when not thinking about the platform and how that effects our stories
- can we write stories about our collections?
- should be using existing linked data to make those narratives
- let’s build this
- Full Write-up
Jason Casden and Cory Lown – My #HuntLibrary
- student engagement platform
- how do students use the space?
- what do they choose to document? – using instagram
- student-drive archival selection
- making use, harvesting social media
- moderated, responsive
- use for public display, can interactive, including larger public display
- inspired by kitten war: built image battle
- calculate popularity score
- also about preservation, collect images
- and then when files are uploaded
- Demo: hydratest.bpl.org:3000
- On GitHub
Will Hicks – Metadata Entry Beyond Usability
- think back to volunteering to donate blood, etc. what value did it give you?
- ~300 individuals creating metadata
- stats have bumped up with a new interface
- but 10% of the stuff is hidden
- “usable” forms are great, but little “ownership” and lack of domain expertise
- what if we applied the ideas used in social media?
- invite with openID, personalize projects, badges, stats, visualization, etc.
Kelly Lucas – Drupal OPAC Recipe
- the poor man’s Blacklight or Vufind with Solr backend
- MARC record dump into Solr using SolrMARC
- install search API, Search API Solr, Facet API, Sarnia and Views from Drupal.org
- configure Sarnia + FacetAPI (boosts, enable facets)
- create a view, add some fields, create an exposed filter (full text search box)
- slap some facets to the side of the page
- issues: new/updated records requires direct connection to ILS
Karen Coyle – Nerd Poetry
- cowboy poetry – told around the camp fire
Mark Redar – Django Dublin Core App
- plugin app
- on Github
- RecordExpress – lightweight, easy to use esp. for those not familiar with XML
James Stuart – Taming Email
- a really big problem
- part of your job
- here’s how to tame email
- don’t organize: organizing your email is like alphabetizing your recycling
- turn keyboard shortcuts on
- don’t be distracting
- Also take a look at Making Thunderbird More Gmail-y
No Break! Have a Cute Animal Anyway
De-sucking the Library User Experience
- Jeremy Prevost, Northwestern University
Libraries hate library users. If we didn’t, our websites wouldn’t suck.
- if a user can’t find it, why do you own it?
- spend a lot of money on acquiring resources or access to them
- want to allow them to find them
- Good: works like Google from the user’s perspective
- Bad: needs to know how it works to make it work e.g. need to know MARC; can only find known items
- live examples: Ex Libris Voyager vs. Primo
- Voyager: no relevant results even using boolean ‘AND’
- Primo: can use boolean or not, relevant results – de-sucked!
- Request information/user experience also sucks
- Prepopulated info, request item if not available – de-sucked!
- made interfaces consistent – de-sucked!
- not going away
- no mobile until mid-2007 for iPhone
- jQuery mobile – Apr 2010 – but updating two sites sucks, no support for tablets
- Mar 2013: responsive design, bootstrap
Libraries don’t hate library users!
- start with something that you would enjoy using
Google Analytics, Event Tracking and Discovery Tools
- Emily Lynema, North Carolina State University Libraries
- Adam Constabaris, North Carolina State University Libraries
How to track in-page events. Decide which events to track, push to Google.
Event Tracking Use Cases
- hidden or externally AJAX events e.g. facets, tabs
- internal links that occur in multiple places e.g. request item
- external links
- Catalog: click on tabs twice as much as everything else; full text used a lot; browse graphical < text because of placement; about half request item even though in 2 different places
- Summon: trying to track what they could track. Paging more popular than facets
- GA API script
- jQuery API
- HTML5 Data Attributes: data-* for use by scripts
- decide what to track
- basic technique
- Summon gets harder. Have to get it in the code. more selectors
Debugging & Testing
- set up safety net first
- know the debugger
- use the GA debug
- test a lot
Actions speak louder than words: Analyzing large-scale query logs to improve the research experience
- Raman Chandrasekar, Serials Solutions
- Susan Price, Serials Solutions
Single unified index for all the items from all libraries’ collections.
- observe and log user actions e.g. queries, filters, click patterns
- compute quality of search results e.g. user behaviour
- analyze data to improve search results and enhance research experience
Data-Driven Documents: Visualizing library data with D3.js
- Bret Davidson, North Carolina State University Libraries
- uses technologies that you already know
- capable library – pre-built path generations, well maintained etc.
- community – documentation, training available
- might not because of learning curve, and don’t need something this complex
- suma – space assessment toolkit
- show visualization real time, tables, and CSV file
HTML5 Video Now!
- Jason Ronallo, North Carolina State University Libraries
Yes! Also, slides/presentation.
- Flash video cannot be run on most mobile/tablets
How it Works
- uses video HTML tag
- use simple fallback – download if can’t view
- problem: browsers cannot decide on single codec to use; codec war
- solution: multiple sources: mp4, webm
- use poster attribute as “screenshot” and don’t have to download video right away
- add type attribute to say which format to use; can be very explicit
- only one video per page please!
- can add custom controls, more info for users
- events that you can listen for e.g. timeupdate to update time in a video; update wording e.g. which floor
- analytics: play, pause, seek, ended
- can do visualization of engagement
- can style with CSS
- track for subtitles
Polyfills and Advantages
- provide video controls
- flash fallback
- progressive download and range requests
Future of Media on the Web
- DRM looks to be coming
- Popcornjs – can do annotation
- Web Audio API – mix audio, filters, etc.
As a web developer, I cringe at deprecated code and try my best to keep up to date, which right now means familiarizing myself with HTML5 and CSS3. In reflecting on how best to update our website, I realized that with a CMS, naturally some things are out of my control.
Giving Up Control & Relying on Developers
Whether it’s the core or plugins, users of a CMS are reliant on its developers to keep things up to date. Is that lost of control worth the benefits? Generally, I would say yes, but that doesn’t stop me from wishing that the technology that we use to adopt new specifications.
WordPress & HTML5
Image Tags & Properties
I think it’s interesting that in HTML5 there is now the figure and figcaption elements. If they are taken advantage of, I think it definitely helps to parse information in a webpage and to identify text that is directly related to images.
One thing that does bother me about WordPress (which actually has noting to do with HTML5) is that it forces users to have a title, and leaves alt text blank by default. I don’t know what the best solution may be, but I would propose to insert the title text into the alt text by default and then allowing the user to change it. If they want to leave it blank, then there should be a checkbox to mark it “intentionally left blank” or something. Perhaps this could be an admin option, but I would definitely want something like that since I would really like to force our users to have alt text, but I don’t want to touch the WP core obviously.
Text Formatting Tags
It’s a bit of a minor thing and while some may argue the usefulness of the different semantic tags, users of the rich text editor would have no notion that they’re using <strong> instead of <b> or <em> instead of <i>. While I admit that even I struggle on the appropriate use of each (I have to look it up every time I think about it), if we want to see widespread adoption, then we need to get users to think about their writing and what they intend to do when using any of strong, em, b, i.
While we avoid tables and it should never be used for layouts, users will still want to insert tables to display data without resorting to an image. I’ve always wondered that WordPress doesn’t have a table insertion button even under the kitchen sink. What worries me is that then users who have a basic knowledge of HTML will insert it themselves using the HTML view with improperly formed code.
Layout & Forms
You might wonder why I’d lump the two, and that’s because, other than (using the default) comment form, both of these are dependent on a WordPress setup.
Forms will generally depend on the plugin. Similarly, whether the layout is in HTML5 is very dependent on the theme, along with many elements of accessibility.
Unfortunately, while HTML5 themes are relatively easy to find, most form plugins do not tell you whether they are using HTML5 or how much of it.
Why Not Adopt HTML5
I do realize that while there are a number of advantages to HTML5, especially in terms of structure, it’s still in development. Working in an educational institution, it’s also more work and sometimes difficult in some cases to ensure backwards compatibility.
In particular, screen readers do not necessarily support all the new HTML5 elements and will frequently ignore whole chunks of text or have difficulty with reading links, etc. Even the newest versions of screen readers do not necessarily recognize elements and properties designed to make webpages easier for screen readers to interpret.
I would like to think that since WordPress talks about trying to be accessible that anything in the WordPress core will be updated once there is widespread adoption not only among browsers, but also screen readers. Obviously, adoption will take time though. For example, many form input types have been adopted by most browsers, but has not been adopted by IE at all (will be in IE10).
One can only hope that adoption will pick up once various part of the HTML5 specifications are ‘cemented.’
I don’t normally do book reviews, but Jon Duckett’s HTML & CSS book was brought to my attention via twitter and it looked interesting, so I thought I’d give it a read.
If you’re the type that was discouraged from learning basic web programming because of the manual-like books, then I would definitely recommend this book. The information is presented in very visual ways and while there are a few pages here and there that have nothing but code on them (for full examples), almost every page has an image of some sort, whether as explanation or for decorative purposes.
While there are a couple of concepts I wish were explained in a little more detail with visuals (such as CSS selectors), I appreciate that Duckett will discuss deprecated tags and elements, which are still commonly seen, and point out which browsers do not support certain properties.
He also provides lists of practical websites or tools to use including commercial and open source alternatives. Code and extras can be found on the website, which can be useful even for those who never crack open the physical book.
It’s what it purports to be. So, I highly recommend it for beginners and maybe even those that want an easy to digest review (it’s very easy to skip sections you feel you already know).
I did not take notes on everything in part because some of it was very technical and it can be hard to do notes, but here are some takeaways from the morning:
- Versioning Control: Use it, Git or Mercurial. Doesn’t need to be code, can be data too. – Description and Slides
- Take library data and make it available to users, can’t expect them to search for it.
- Linked Data doesn’t need to be a huge project. Start small.
- Why RDF? It’s flexible with easy addition of new attributes or classes, and works cleanly with an iterative approach.
HTML5 Microdata and Schema.org
Other than getting good ranking, we need to provide rich results, i.e. rich snippets. Some digital collection have been providing rich snippets already, such as NCSU Libraries.
How do we get this?
- embedded semantic markup
- HTML5 Semantics include nav, header, article, section, footer
- HTML5 Microdata is a syntax for annotating content to communicate meaning of data to machines
- similar to RDFA, other microdata
- Microdata comes back as tree based JSON and allows for DOM API
<div itemscope itemtype=”http://schema.org/Organization” itemref=”logo”>
<a itemprop=”url” href=”http://code4lib.org/”>
where: scope = about something
type = type of item
prop = properties
For the user, there is no difference as display is the same. This provides a complete data model.
Schema.org is a one-stop shop for vocabulary in describing items on the web.
Apologies, I did not take extensive notes on it, but to read more, check out the slides below or the Code4lib article he wrote.