Information in Context <ul><li>Embedding useful Web 2.0 content into library websites </li></ul>
Information in Context <ul><li>Libraries have been encouraged to participate in Web 2.0 by uploading their content to flic...
Information in Context <ul><li>Libraries can provide “Information in Context” by embedding uploaded content back into the ...
The static “library” website we’ll be embedding code into
The html code behind our basic website.  Although I use EditPlus, these techniques work with any web page editor (Dreamwea...
<ul><li>Creating Dynamic Subject Guide with delicious.com </li></ul><ul><li>Log into your delicious account, then click th...
<ul><li>Scroll to the bottom and click “Link Rolls” </li></ul>
<ul><li>On the bottom of this page is where we customize our feed (the bookmarks that will be “fed” into the library’s web...
<ul><li>Paste the code into your website where ever you’d like it to appear and save the page </li></ul>
<ul><li>When our webpage is reloaded, our feed appears </li></ul><ul><li>As new websites are bookmarked into our feed, the...
<ul><li>Example of bookmarking  new website </li></ul><ul><li>Visit the page to be bookmarked and click the delicious brow...
<ul><li>The “Save Bookmark” delicious window will appear </li></ul><ul><li>Enter Notes and Tags to describe this website <...
<ul><li>As long as the website was tagged with words matching the criteria of our feed, it will automatically show up on o...
<ul><li>Embedding a photo from flickr.com </li></ul><ul><li>Log into your flickr account and choose a photo to embed </li>...
<ul><li>Choose the size that fits your website the best </li></ul><ul><li>Copy the code from the box below the photo </li>...
<ul><li>Paste this code into your website where ever you’d like it to appear and save the page </li></ul>
<ul><li>Reload your website and the photo will be embedded </li></ul><ul><li>You can style this photo’s layout to fit your...
<ul><li>Embedding a flickr “badge” </li></ul><ul><li>From any flickr page, scroll to the bottom and click the “Tools” link...
<ul><li>On the Tool page, click the “build a badge” link along the right margin </li></ul>
<ul><li>Follow the badge wizard to create your badge - don’t be afraid to play </li></ul><ul><li>HTML badge: basic, but le...
<ul><li>Choose what to include in your badge - limit to your photos or everyone’s, just one set of photos, or photos based...
<ul><li>Choose you layout format </li></ul><ul><li>Select the number of photos to display, the orientation, and whether th...
<ul><li>Chose the colors of your badge so that it matches your website </li></ul><ul><li>An example of your badge is shown...
<ul><li>On the final page of the wizard, your badge is displayed </li></ul><ul><li>Copy the code shown in the box at the b...
<ul><li>Paste this code into your website where ever you’d like it to appear and save the page </li></ul>
<ul><li>Reload your website and the badge will be embedded </li></ul><ul><li>The photos and badge are linked back to the p...
Ideas for Embedding Content Videos Photographs Feeds Some Links for Other Ideas    Book Reviews    Library Tour, or a to...
What to Keep in Mind <ul><li>Hosting content on other web servers means if that website goes away, so too might your conte...
Information in Content <ul><li>Experiment! </li></ul><ul><li>Brian Herzog </li></ul><ul><li>[email_address] </li></ul><ul>...
Upcoming SlideShare
Loading in …5
×

Information in Context

2,322 views

Published on

Presentation from NELA 2008 about embedding Web 2.0 content into library websites

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,322
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Information in Context

  1. 1. Information in Context <ul><li>Embedding useful Web 2.0 content into library websites </li></ul>
  2. 2. Information in Context <ul><li>Libraries have been encouraged to participate in Web 2.0 by uploading their content to flickr, YouTube, and other websites </li></ul><ul><li>In addition to hosting content, another function Web 2.0 websites offer is easily embedding this content on your own website </li></ul>
  3. 3. Information in Context <ul><li>Libraries can provide “Information in Context” by embedding uploaded content back into the library’s website, thus giving patrons content for the information we are uploading </li></ul><ul><li>This presentation is a demonstration for creating dynamic subject guides using the delicious.com, and to embed individual photos and a photo “badge” from flickr.com </li></ul>
  4. 4. The static “library” website we’ll be embedding code into
  5. 5. The html code behind our basic website. Although I use EditPlus, these techniques work with any web page editor (Dreamweaver, Contribute, Wordpress, etc.)
  6. 6. <ul><li>Creating Dynamic Subject Guide with delicious.com </li></ul><ul><li>Log into your delicious account, then click the “Settings” link </li></ul>
  7. 7. <ul><li>Scroll to the bottom and click “Link Rolls” </li></ul>
  8. 8. <ul><li>On the bottom of this page is where we customize our feed (the bookmarks that will be “fed” into the library’s website) </li></ul><ul><li>The code to copy/paste into the library’s website is generated in the box in the middle of the page (including limiting to specific tags) </li></ul>
  9. 9. <ul><li>Paste the code into your website where ever you’d like it to appear and save the page </li></ul>
  10. 10. <ul><li>When our webpage is reloaded, our feed appears </li></ul><ul><li>As new websites are bookmarked into our feed, they will automatically appear here </li></ul>
  11. 11. <ul><li>Example of bookmarking new website </li></ul><ul><li>Visit the page to be bookmarked and click the delicious browser button </li></ul><ul><li>Browser button (or bookmarklet) can be installed from your account </li></ul><ul><li>Any browser with the delicious buttons can bookmark websites </li></ul>
  12. 12. <ul><li>The “Save Bookmark” delicious window will appear </li></ul><ul><li>Enter Notes and Tags to describe this website </li></ul><ul><li>You can also choose from the suggested Tags on the right </li></ul><ul><li>When finished, click the “Save” button </li></ul>
  13. 13. <ul><li>As long as the website was tagged with words matching the criteria of our feed, it will automatically show up on our website </li></ul><ul><li>This might take 30-60 minutes </li></ul>
  14. 14. <ul><li>Embedding a photo from flickr.com </li></ul><ul><li>Log into your flickr account and choose a photo to embed </li></ul><ul><li>Click the “All Sizes” icon right above the photo </li></ul>
  15. 15. <ul><li>Choose the size that fits your website the best </li></ul><ul><li>Copy the code from the box below the photo </li></ul>
  16. 16. <ul><li>Paste this code into your website where ever you’d like it to appear and save the page </li></ul>
  17. 17. <ul><li>Reload your website and the photo will be embedded </li></ul><ul><li>You can style this photo’s layout to fit your website (remove the border, align left, right or center, etc.) </li></ul><ul><li>The photo will automatically be linked back to the photo on flickr </li></ul>
  18. 18. <ul><li>Embedding a flickr “badge” </li></ul><ul><li>From any flickr page, scroll to the bottom and click the “Tools” link </li></ul>
  19. 19. <ul><li>On the Tool page, click the “build a badge” link along the right margin </li></ul>
  20. 20. <ul><li>Follow the badge wizard to create your badge - don’t be afraid to play </li></ul><ul><li>HTML badge: basic, but less problematic </li></ul><ul><li>Flash badge: flashier, but requires patrons to have browser plug-in </li></ul>
  21. 21. <ul><li>Choose what to include in your badge - limit to your photos or everyone’s, just one set of photos, or photos based on their tags </li></ul>
  22. 22. <ul><li>Choose you layout format </li></ul><ul><li>Select the number of photos to display, the orientation, and whether they should be displayed chronologically or randomly </li></ul>
  23. 23. <ul><li>Chose the colors of your badge so that it matches your website </li></ul><ul><li>An example of your badge is shown at the bottom to help with colors </li></ul>
  24. 24. <ul><li>On the final page of the wizard, your badge is displayed </li></ul><ul><li>Copy the code shown in the box at the bottom of the page </li></ul>
  25. 25. <ul><li>Paste this code into your website where ever you’d like it to appear and save the page </li></ul>
  26. 26. <ul><li>Reload your website and the badge will be embedded </li></ul><ul><li>The photos and badge are linked back to the photos on flickr </li></ul><ul><li>As new photos are uploaded to flickr that match the badge’s criteria, they will automatically be displayed here </li></ul>
  27. 27. Ideas for Embedding Content Videos Photographs Feeds Some Links for Other Ideas  Book Reviews  Library Tour, or a tour of historical sites around your community  Overview of library resources & facilities  Teen Movie Making club  Staff introductions (I know, it'll never happen...)  Training on using library resources  Library Tour  Photos of patrons  Photos of a library or town events  Staff introductions  Highlight a collection, such as historical photographs  Display other peoples’ photos of your library or community via a flickr pool or a badge and tags  Promote your library blog on other library web pages  Display blog posts with certain tags on related web pages  Community news display (especially headlines from your local paper)  Promote local connections by displaying feeds from patrons’ blogs, photo streams, or other local sources  Local weather forecasts - ie: weather.com  Polls and Quizzes, to see how patrons feel about an issue or just solicit input - ie: flexipoll.com  Online chat, to ask a librarian a question or have a discussion - ie: meebome.com  Games, for a club, to illustrate an article, or just for fun - ie: everyflashgame.com  Book information, to show new additions or a special collection - ie: librarything.com
  28. 28. What to Keep in Mind <ul><li>Hosting content on other web servers means if that website goes away, so too might your content </li></ul><ul><li>Connecting to other web servers might also cause your website to load slower, depending on the connection between your website and those remote servers </li></ul><ul><li>If you use other peoples’ content, remember that you don’t control the content of it, nor its availability (if they delete it, you lose it) </li></ul><ul><li>Always read the Terms of Service of the websites you use, and abide by them </li></ul>
  29. 29. Information in Content <ul><li>Experiment! </li></ul><ul><li>Brian Herzog </li></ul><ul><li>[email_address] </li></ul><ul><li>http://www.swissarmylibrarian.net </li></ul>

×