Getting vCard info into a QR code using the Google Chart API

Posted: October 19, 2011 | Author: | Filed under: code/files, education, libraries, web services | 1 Comment

How to get vCard info into a QR code using the Google Chart API? This question has been coming up occasionally and it can be a little quirky. I thought I might document my process of making this work with the Google Chart API.

1. Create the unencoded vCard info. Sample Below:

BEGIN:VCARD VERSION:3.0
N:Clark;Jason
FN:Jason Clark
ORG:MSU Library
TITLE:Team Leader/Digital Initiatives Librarian [Associate Professor]
TEL;TYPE=WORK,VOICE:(406) 994-6801
EMAIL;TYPE=PREF,INTERNET:jaclark@montana.edu
URL:http://www.jasonclark.info
REV:20111013T195243Z
END:VCARD

2. Run the unencoded vCard info through a utility or programming function. In this example, we are using the online “URI Encoder / Decoder” tool http://andrewu.co.uk/tools/uriencoder/. Some common functions in programming languages that would do the same thing are: Server.URLEncode() in ASP, urlencode() in PHP, and encodeURI() in Javascript. After pushing the unencoded vCard string through the “URI Encoder / Decoder” tool, we get a resulting string like this:

BEGIN%3AVCARD%0D%0A%09%09
VERSION%3A3.0%0D%0A%09%09N%3AClark%3BJason%0D%0A%09%09
FN%3AJason+Clark%0D%0A%09%09ORG%3AMSU+Library%0D%0A%09%09
TITurLE%3ATeam+Leader%2FDigital+Initiatives+Librarian+%5BAssociate+Professor%5D%0D%0A%09%09
TEL%3BTYPE%3DWORK%2CVOICE%3A%28406%29+994-6801%0D%0A%09%09EMAIL%3BTYPE%3DPREF%2CINTERNET%3Ajaclark%40montana.edu%0D%0A%09%09
URL%3Ahttp%3A%2F%2Fwww.jasonclark.info%0D%0A%09%09
REV%3A20111013T195243Z%0D%0A%09%09
END%3AVCARD

A potential gotcha here is the URL value in the vCard. Make sure the URL value in the vCard is encoded and has changed from

URL:http://www.jasonclark.info

to something that looks like:

URL%3Ahttp%3A%2F%2Fwww.jasonclark.info%0D%0A%09%09

3. Next, we place the encoded string in the Google Chart API to generate the QR code. Put your encoded vCard string in the URL below after the “&chl=”. For more info, see the online wizard tool and documentation for the Google Chart API. Check the link below to see the generated QR code.

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=BEGIN%3AVCARD%0D%0A%09%09VERSION%3A3.0%0D%0A%09%09N%3AClark%3BJason%0D%0A%09%09FN%3AJason+Clark%0D%0A%09%09ORG%3AMSU+Library%0D%0A%09%09TITLE%3ATeam+Leader%2FDigital+Initiatives+Librarian+%5BAssociate+Professor%5D%0D%0A%09%09TEL%3BTYPE%3DWORK%2CVOICE%3A%28406%29+994-6801%0D%0A%09%09EMAIL%3BTYPE%3DPREF%2CINTERNET%3Ajaclark%40montana.edu%0D%0A%09%09URL%3Ahttp%3A%2F%2Fwww.jasonclark.info%0D%0A%09%09REV%3A20111013T195243Z%0D%0A%09%09END%3AVCARD

4. If everything works, the Google Chart API returns a link to a QR code image with the vCard info encoded. Place this URL in an HTML <img> tag and you’ll have a QR code on your site that will have vCard data. Note: You will need to add your specific contact vCard data in Step 1.

Mobile Web Design – Working Code, Tips, Best Practices

Posted: November 13, 2009 | Author: | Filed under: code/files, education | Tags: , , , | 1 Comment

Taking a web site to the small screen comes with a host of considerations: device width, available bandwidth, touch versus click interfaces, browsers with limited functionality, etc. At the same time, the simplicity of these mobile browsing environments lowers the barrier to entry for developers. Some basic HTML and CSS is all that is required to get started. In my research, I have learned a few things and decided to put the learning into action by creating a mobile web template available for anyone to download, remix, and reuse.

Demo: http://www.lib.montana.edu/~jason/files/m/
Download: http://www.lib.montana.edu/~jason/files/m.zip
Read Me: http://www.lib.montana.edu/~jason/files/m/_readme.txt

The above template is using HTML, CSS, Javascript, and PHP, but you could substitute any server side language for the programming logic. I also have it in my head that I can build an even simpler template with just HTML and CSS. I’ll keep people updated…

Here are some tips, best practices, and design conventions I learned along the way.

  • One column is a design convention worth following (See m.facebook.com, or m.youtube.com, or m.twitter.com).
  • Pick the essence or core pieces of your site to deliver to your mobile users. Think abridged version.
  • Follow the “m” URL conventions (m.delicious.com OR amazon.mobi OR lifeonterra.com/m/).
  • Minify and optimize your CSS (See Clean CSS ).
  • Minify and optimize your javascript (see JSLint).
  • Plan for low bandwidth – Keep images close to 1KB or under.
  • Test on multiple mobile browsers and emulators.
  • Don’t plan on javascript being available – the above template still works when it’s turned off.
  • Build your app so that it loads only necessary data when requested (Use Ajax or Server-Side includes).

I’m interested in any feedback or questions so please share in the comments. I’ve also created a more robust mobile application example for TERRA: The Nature of Our World available at lifeonterra.com/m/. If anyone is interested, I’m happy to share some of that code as well.

YouTube as a Medium for Conversation

Posted: May 30, 2008 | Author: | Filed under: education, media | Tags: | 1 Comment

Ever since I watched SNL’s digital short, “Lazy Sunday” on YouTube, I recognized the fun potential of this online video thing. In time, YouTube would deliver other priceless moments. Try a Google search for “boom goes the dynamite” or “chocolate rain” to see what I’m talking about. I say, “priceless”, with tongue firmly planted in cheek. YouTube moments are usually viewed within a certain frame of satire and in the spirit of lampooning the “everyone is a star” meme that this great Internet enables.

So, it was with a high level of interest that I decided to participate in an experiment to use YouTube to promote discourse and civic debate. The idea comes from some local independent filmmakers and several academics from Montana State University who ask a series of questions about the emerging video platform by creating a YouTube video. Among the questions asked: How are people thinking about the effects of YouTube on society? What is unique about this new age of video sharing? Is it just a game that kids play to create alter-egos to insult others? Are hate speech and acts of violence a necessary consequence of allowing free video sharing? Does YouTube have far wider implications for social justice, religion and disenfranchised groups?

But enough with my writing… It’s all very meta, so have a watch and leave a comment if you have something to say.

Full details and descriptions available at http://www.youtube.com/watch?v=nWa0l-YxvO8.

Ajax Workshop – Internet Librarian 2007

Posted: October 29, 2007 | Author: | Filed under: code/files, conferences/events, education, il2007, webdev | Leave a comment

My preconference,”AJAX for Libraries”, with Karen Coombs went really well. It’s always great working with Karen. She’s cool, composed, and “wicked” knowledgeable. For the second year in a row, we had a great group of participants. It’s nice to see a growing interest in emerging web programming frameworks and how they might be applied to libraries.

Here are the updated slides and links:

“AJAX for Libraries” Presentation
“AJAX for Libraries” Handout (Code Samples and Explanations)
“AJAX for Libraries” Code Downloads

And some additional examples of libraries using AJAX:

Gettin’ Edumacated… A Digital Library Curriculum

Posted: December 29, 2006 | Author: | Filed under: education | Leave a comment

This post on “Beyond the Job” calling for applications to a Digital librarian fellowships program at the University of Iowa SLIS came across my feedreader earlier in the month. I’m starting to see more of this which is pretty exciting from where I’m sitting. It means some schools are taking the step to train students for digital library work. (Most of the schools have used seed money from an IMLS grant for library education.) Here’s a sample curriculum from the IOWA SLIS website:

Students enrolled in this special Digital Libraries track will take the 9-semester-hour core specified for
the general MA in SLIS degree program.

021:120 Computing Foundations 3 s.h.
021:122 Conceptual Foundations 3 s.h.
021:101 Cultural Foundations 3 s.h.

Students in this track will also take the following 6 semester hours:

021:224 Electronic Publishing 3 s.h.
021:226 Digital Libraries 3 s.h.

Students will also enroll in the following course each semester.

021:239 Topics in Digital Libraries 1 s.h.

Additionally students will choose at least 6 semester hours from the following:

021:123 User Education: Multimedia 3 s.h.
021:242 Search and Discovery 3 s.h.
021:220 Programming for Text Manipulation 3 s.h.
021:124 Database Systems 3 s.h.
021:278 Information Policy 2 s.h.

22C:196 Human Computer Interaction 3 s.h.

The remaining 12 semester hours of course work may be taken from the other courses offered by the School as well as courses selected (with advisor approval) from other departments in the University.

Students are strongly encouraged to take a programming course such as Perl or Java.

I love the emphasis here on programming and relational databases. I use these skills daily in mapping out data structures and metadata crosswalks. It’s also nice to see “electronic publishing” get some face time. I’m seeing more of this “library as publisher” direction in my job and an epublishing course could really help out. The only piece I might add would be a digital library practical component – some internships in a local electronic publishing company, a semester practicum with the local digital content group. Give the students an opportunity to show their stuff in a real world setting. I’m sure this could be built into the course of study with those open 12 credits.

I’m also just a bit envious… I remember cobbling together bits and pieces of classes and work experiences that were going to help place me in a digital library shop after graduation. For the most part it worked… I worked for the UWDCC at the University of Wisconsin doing mostly grunt work – scanning, prepping for scanning, entering metadata, bit of interface design – and it was this experience that really gave me a fuller picture of digital library work. Perl and PHP programming was mostly learned on the job at my “fellowship” with the University of Wisconsin Division of Information Technology working in their corporate library and on the main web site for the communications team. Seems like this “cobbling” won’t be the reality anymore, not that there’s anything wrong with that. I’m liking the move to standardize a digital library curriculum. Here’s another program moving in the same direction and a recent article about a digital library curriculum from D-LIB Magazine:

University of North Carolina SILS – http://sils.unc.edu/news/releases/2006/01_digitalcurriculum.htm

The Core: Digital Library Education in Library and Information Science Programs
Jeffrey Pomerantz, Sanghee Oh, Seungwon Yang, Edward A. Fox and Barbara M. Wildemuth
D-Lib Magazine, November 2006 Volume 12,Number 11 ISSN 1082-9873
http://www.dlib.org/dlib/november06/pomerantz/11pomerantz.html

Just a little food for thought during the holiday season. Best wishes to all.