Step 3: Create the HTML foundation
[See the full booklist HTML in this gist - http://goo.gl/pTSwI
All buildings need a foundation, and in the case of web programs, that foundation is HTML markup. In this example, we start with the head information for the HTML file that provides a title, defines the character set for the file, and brings in the jQuery Javascript library that will create the behavior for the application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New Books We Recommend</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Whenever possible in Code Words, we will try to use frameworks and code libraries (like jQuery). Programming tasks can be automated, and many times these frameworks and libraries are tested and vetted across multiple browsers and operating systems.
Step 4: Finishing the HTML markup & giving the script a place to display the spreadsheet data.
...
</head>
<body>
<h1>New Books We Recommend</h1>
<div id="book-list"></div>
</body>
</html>
Our script needs a home in the HTML to place the values from our spreadsheet. In the above HTML markup, we introduce <h1> and <div id="book-list"> tags for this purpose. Our display now has a title explaining what type of data is being displayed and markup that will be used to place the dynamic content from the external spreadsheet.
Step 5: Building a Javascript function to get the data from our spreadsheet and display it
[See the full booklist Javascript in this gist - http://goo.gl/hmxlh]
Once we have opened the HTML document and included the jQuery library, we can create a script that will retrieve the JSON data feed from our spreadsheet. First, we tell the script to run once the page has loaded using a built-in jQuery function - $(document).ready(function(). Next, we create a custom function, "listBooks" that will do all of the work - request the data, parse the data, and create a display for the data.
<script type="text/javascript"> $(document).ready(function() {
//source file is https://docs.google.com/spreadsheet/ccc?key=0Ak0qDiMLT3XddHlNempadUs1djdkQ0tFLWF6ci1rUUE
$(function listBooks() {
$.getJSON( "https://spreadsheets.google.com/feeds/list/0Ak0qDiMLT3XddHlNempadUs1djdkQ0tFLWF6ci1rUUE/od6/public/values?alt=json-in-script&callback=?",
function (data) {
$('div#book-list').append('<ul class="items"></ul>');
$.each(data.feed.entry, function(i,entry) {
var item = '<span style="display:none">' + entry.id.$t + '</span>';
item += '<img src="http://covers.openlibrary.org/b/isbn/' + entry.gsx$isbn.$t + '-S.jpg"/>';
item += '<span class="meta"><a href="http://www.worldcat.org/isbn/' + entry.gsx$isbn.$t + '">' + entry.title.$t + '</a>';
item += '<br/>Author: ' + entry.gsx$author.$t;
if (entry.gsx$notes.$t) {
item += '<br/>Description: ' + entry.gsx$notes.$t;
}
$('.items').append('<li>' + item + '</span></li>');
});
});
});
});
</script>
Yeah, so there is a much going on here... We'll work through it from top to bottom. First, "$.getJSON" is a jQuery function telling the script to load our spreadsheet. With the spreadsheet data loaded into memory, we are now in our second phase of the script which is to parse the data that was returned. "function (data)" will play this role. We use a jQuery selector syntax to tell the script to find the <div id="book-list"> tag and place a <ul> (unordered list) inside so that our new books will display as a bulleted list. Next, we tell the script to work or "loop" through all the entries (or rows) in the spreadsheet using a the jQuery $.each syntax. We haven't seen the JSON that our spreadsheet returns. It looks something like this:
...
"gsx$title": {
"$t": "This house of sky : landscapes of a Western mind"
},
"gsx$author": {
"$t": "Ivan Doig"
},
"gsx$publisher": {
"$t": "New York: Harcourt Brace Jovanovich, 1992."
},
"gsx$oclc": {
"$t": "25629631"
},
"gsx$isbn": {
"$t": "0151900558"
},
"gsx$notes": {
"$t": ""
}
…
We want the script to walk through and store all the values it retrieves. Note that we create our thumbnails by passing the ISBN from the "gsx$isbn" value to a URL for an image from Open Library - http://covers.openlibrary.org/b/isbn/' + entry.gsx$isbn.$t + '-S.jpg. With these various pieces of data available, we create a "item" variable that we can use to store the data. The script works through all pieces of the JSON and prints the HTML inside of the "var item" variable. In the end, the script generates and returns an HTML snippet for each row that looks like this:
<li>
<span style="display:none;">...</span>
<img src="http://covers.openlibrary.org/b/isbn/0151900558-S.jpg">
<span class="meta">
<a href="http://www.worldcat.org/isbn/0151900558">This house of sky : landscapes of a Western mind</a><br>Author: Ivan Doig
</span>
</li>
Each of these <li> snippets are pushed into the <div id="book-list> on the HTML page when the browser loads the page.
Step 6: Apply the grid layout with CSS
[See the full booklist CSS in this gist - http://goo.gl/ctL9h]
<style type="text/css">
.items {display:table;list-style:none;margin:0;padding:0;border-spacing:5px;}
.items li {display:table-row;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #ccc;padding:5px;margin:0 0 10px 0;}
.items li img {display:table-cell;vertical-align:top;}
.items li span.meta {display:table-cell;vertical-align:top;margin:0;padding:0 0 0 5px;}
.items li {margin:0 0 5px 0;}
</style>
And finally, we create our display styles for the recommended reading list. The CSS declarations above create the grid view with a leading thumbnail. We are styling the unordered list <ul class="items"> as a table with rows. Once you combine all the above steps, you will have the complete file. Once satisfied with the output, place it in a web accessible directory and make it live.
Final thoughts
This sample script is just one example of how you might use a Google docs spreadsheet as your data store. Things start to get interesting when you consider other options:
- A list of subscription databases from your library
- A rudimentary news and events ticker
- Record common keywords from search queries on your catalog and link them in a popular/recent searches widget
The key is that you have a publicly available spreadsheet that numerous editors in your library can access and add data to. You might even create a form for your editors to simplify data entry (http://goo.gl/ddd4U). Opening your options for contributing to your data store is the first step in making this happen. (One last side note: a quick hat tip to Karen Coombs for inspiration and for pointing out to me that Google Spreadsheets had a feed API in the first place.)
I'll be back in a few weeks to take a closer look at bookmarklets, those little bits of Javascript that add functionality to your browser. In the meantime, play around with this sample and feel free to ask questions here or on twitter @jaclark.
Комментариев нет:
Отправить комментарий