-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcatalog.html
executable file
·447 lines (403 loc) · 21.3 KB
/
catalog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html>
<html language="english">
<head>
<meta charset="utf-8">
<title>Library Simplified · OPDS Web Catalog</title>
<meta name="About" content="Library Simplified is an eBook application development intiative to improve the user experience in discovering, borrowing and reading an eBook from the library as simple as three clicks through the application of new technologies and innovative library policies. Library Simplified is funded in part by a grant from the Institute of Museum and Library Services (IMLS) and lead by The New York Public Library and nine partner libraries from across the nation. This open source project seeks to advance the accessibility and interoperability in collaboration with the Readium Foundation, the International Digital Publishing Forum (IDPF), eBook platform developers and books distributors across the open source community. " />
<link rel="icon" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts (more: http://www.google.com/fonts) -->
<!-- Main Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Headings -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- Handwritten -->
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<!-- Countdown, Pricing Table Price Tag -->
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
<!-- Logo -->
<link href="https://fonts.googleapis.com/css?family=Cantora+One" rel="stylesheet" type="text/css">
<!-- CDN Bootstrap & FontAwesome -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- CSS Libraries -->
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/css/bxslider.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<!-- Theme Specific CSS -->
<link href="assets/css/styles.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Predefined Color Scheme -->
<link href="assets/css/colors/blue.css" rel="stylesheet" id="colors">
<!-- LESS - Development Only
<link href="assets/less/styles.less" rel="stylesheet/less" />
<script>less = { env: 'development' };</script>
<script src="assets/js/less.js"></script>
-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<link href="assets/css/ie8.css" rel="stylesheet"></link>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-RKWC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-RKWC');</script>
<!-- End Google Tag Manager -->
<header id="header" class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Skip navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="index.html">Library Simplified</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="about.html">About</a>
<ul class="dropdown-menu">
<li><a href="OPDS.html">OPDS</a></li>
<li><a href="EPUB.html">EPUB</a></li>
<li><a href="Readium.html">Readium</a></li>
<li><a href="accessibility.html">Accessibility</a></li>
<li><a href="news-and-events.html">News and Events</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/">Community</a>
<ul class="dropdown-menu">
<li><a href="community.html">Our Community</a></li>
<li><a href="get-involved.html">Getting Involved</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/">Implementors</a>
<ul class="dropdown-menu">
<li><a href="implementorsamigos.html">Amigos</a></li>
<li><a href="implementorscalifa.html">Califa</a></li>
<li><a href="implementorsdatalogics.html">Datalogics</a></li>
<li><a href="lyrasis.html">Lyrasis</a></li>
</ul>
</li>
<li class="dropdown">
<a href="IMLS.html">Grant Funded Projects</a>
<ul class="dropdown-menu">
<li><a href="project-design.html">IMLS: Library Simpliifed</a></li>
<li><a href="LEAP-project-design.html">IMLS: LEAP Project Design</a></li>
<li><a href="consortia-project-design.html">IMLS: SimplyE for Consortia</a><li>
</ul>
</li>
<li class="dropdown">
<a href="/">SimplyE</a>
<ul class="dropdown-menu">
<!--<li><a href="productbacklog.html">Product Backlog</a></li>
<li><a href="iOSUItour.html">Mobile: iOS ver 1.0</a></li>
<li><a href="androidtour.html">Mobile: Android ver 1.0</a></li>-->
<li><a href="deployinstruction.html">Deploying the application</a></li>
<li><a href="clientappfaq.html">Mobile Client application how to</a></li>
<li><a href="accessibility.html">Accessibility</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header><!-- .navbar-fixed-top -->
<div class="page-top">
<div class="container">
<h1 class="page-top-header"> Web Catalog</h1>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li class="active">Web Catalog</li>
</ol>
</div>
</div>
<div class="container" id="main">
<div class="row">
<div class="col-sm-9">
<h1> SimplyE Web Catalog</h1>
<p class="lead">
The SimplyE Platforms Web Catalog is an <a href="OPDS.html"/>Open Publications Distribution System (OPDS)</a> client web application which allows you to deploy a simple unified ebook catalog on your library's website. It is the same union catalog on the SimplyE mobile app. This allows you to create a dedicated, browse and searchable catalog of all you ebooks.
</p>
<h6>Live Example: The SimplyE Collection</h6>
<p>
The catalog below is a live example of the SimplyE Collection added to a web page.
</p>
<div align="center" height="600">
<iframe src="http://opds-browser-demo.herokuapp.com/collection/https%3A%2F%2Finstantclassics.librarysimplified.org%2Fall-books.xml/" width="100%" height="600" frameborder="0"></iframe>
</div>
</div> <!-- col-sm-9-->
<div class="col-sm-3">
<h5 class="widget-title hr2"> Application</h5>
<ul>
<li> Catalog Integration</li>
<li> Online EBook Discovery</li>
</ul>
<h5 class="widget-title hr2"> Bennefits</h5>
<p>
As opposed to linking out to separate vendor hosted web sites, catalogs and interfaces which only contain those book held by that vendor, ebook users see your entire ebook collection. You can also apply your own style sheet to the app so that it reflects your library's online look and feel.
</p>
<h5 class="widget-title hr2">Features</h5>
<ul>
<li>Borrow, reserve or download books with your library card.</li>
<li>Open non-DRM EPUBS and read in the browser</li>
<li>Use MARC 856 "Electronic Digital Resource Record" to link OPDS Web Catalog Book bibpage to your ILS catalog</li>
<li>Use the OPDS Book Entry url as a share link that can be forwarded to OPDS Ebook Readers (like SimplyE) to open the app to that particular book</li>
</ul>
</div><!-- col-sm-3 -->
</div> <!-- row -->
<div class="row">
<div class="team section-base">
<h3 class="hr2 text-center">How to implement into the MARC record</h3>
<h5> Example 1: Linking ILS catalog record to local eBook resource catalog</h5>
<p>
You can integrate SimplyE into your libaries catalog and web site by deploying an instance of the SimplyE Web Catalog on your web server. You can then link to it as a dedicated eBook catalog in your site navigation structure or simply insert it within your web site as an <code> iframe</code>. To continue the integration into your ILS catalog would simply take the website URLS as use them as 856 Electronic resource files to link out to from your catalog to your normailized ebook web bib page as you already do with Overdrive, B&T, Bibliotheca or other ebook content provider.
</p>
<h6>Example: "As Kingfishers Catch Fire" Web link to place in MARC feild</h6>
<div class="col-md-6">
<p>
<strong>From this:</strong></p>
<div class="well">
<p>
The following is how an Overdrive ebook appears in NYPL's MARC Record 856 feild.
</p>
<img src="assets/images/sample856.png" alt="image snippet of the url">
</div><!--well-->
<p>
The above url links out to Overdrive's website and book detail page for "As Kingfishers Catch Fire" taking the users away from your website to theirs.
</p>
</div><!-- col-md-6-->
<div class="col-md-6">
<p>
<strong>To this:</strong>
</p>
<div class="well">
<p>
<strong>856</strong> 40$u <a href="http://opds-browser-demo.herokuapp.com/collection/https%3A%2F%2Fcirculation.librarysimplified.org%2Fsearch%2F%3Fq%3DAs%2520Kingfishers%2520catch%2520fire/book/https%3A%2F%2Fcirculation.librarysimplified.org%2FNYNYPL%2Fworks%2FOverdrive%2520ID%2F23e94ca8-acac-473b-a5ab-215d2264b98d/" target="new"/>http://opds-browser-demo.herokuapp.com/collection/https%3A%2F%2Fcirculation.librarysimplified.org%2Fsearch%2F%3Fq%3DAs%2520Kingfishers%2520catch%2520fire/book/https%3A%2F%2Fcirculation.librarysimplified.org%2FNYNYPL%2Fworks%2FOverdrive%2520ID%2F23e94ca8-acac-473b-a5ab-215d2264b98d/</a>
</p>
</div><!--well-->
<p>
The above catalog entrylinks to a local OPDS Web Catalog book detail page for "As Kingfishers Catch Fire" while keeping the user on a library controlled domain experience.
</p>
</div><!--col-md-6-->
<h5> Example 2: Linking ILS catalog record to SimplyE OPDS Catalog resource locator</h5>
<p>
To make the link shareable so that users can open the SimplyE Mobile app to a partiucalar catalog page you can use the OPDS link as well in the electronic resource feild. You can also use this for other promotional purposes of a particular book. The users can follow the link and envoke the SimplyE App to open to a paricualr book in its catalog.
</p>
<div class="well">
<h6>Example: NYPL book "As King Fishers Catch Fire" OPDS link to place in MARC feild</h6>
<p>
<strong>856</strong> 42$u<a href="SimplyE://circulation.librarysimplified.org/NYNYPL/works/Overdrive%20ID/23e94ca8-acac-473b-a5ab-215d2264b98d" target="new"/>SimplyE://circulation.librarysimplified.org/NYNYPL/works/Overdrive%20ID/23e94ca8-acac-473b-a5ab-215d2264b98d</a>
</p>
</div><!--well-->
</div><!--section-base-->
<div class="section-base">
<div class="row">
<h2 class="hr2 text-center">Using your web catalog in conjunction with book promotions</h2>
<div class="col-md-6">
<h5> Example: QR codes for New Arrivals</h5>
<p>
The same MARC Resource Locator record URLs can be used in conjunction with QR codes. QR codes can be generated to represent a URL. These QR Codes can then be used in print materials such as posters or brochures highlting Staff Picks for books you want to promote. Users can then scan the associated QR code with a title to open their web browser or app to the Books catalog page.
</p>
</div><!--col-md-6-->
<div class="well">
<h6> QR Code for The NYPL's copy of <i>As Kingfishers Catch Fire</i></h6>
<div class="col-md-4">
<img src="assets/images/qrcode.jpg" class="thumbnail">
</div> <!-- col-md-4-->
<div clas="col-md-4">
<p>
The QR Code to the left represents the following URL: </br>
<a href="http://opds-browser-demo.herokuapp.com/collection/https%3A%2F%2Fcirculation.librarysimplified.org%2Fsearch%2F%3Fq%3DAs%2520Kingfishers%2520catch%2520fire/book/https%3A%2F%2Fcirculation.librarysimplified.org%2FNYNYPL%2Fworks%2FOverdrive%2520ID%2F23e94ca8-acac-473b-a5ab-215d2264b98d/" target="new"/>OPDS Web Catlog url for As Kingfishers Catch Fire</a></br>
You can place this jpg or png file on website, printed materials and distribute through your libraires for community reading program, new arrivals, demand shapping for hidden gems in your collection.
</p>
</div><!-- col-md-4-->
</div><!-- well -->
</div><!--row-->
<div class="row">
<div class="col-md-4">
<h4>Try it out!</h4>
<ol>
<li>Simply click the URL link above and a web catalog will open to the bib page in the OPDS Web Catalog for <i> As King Fishers Catch Fire</i>.</li>
<li>Use a <i>QR Code Reader App</i> on your smartphone or tablet such as <a href="https://itunes.apple.com/us/app/qr-reader-for-iphone/id368494609?mt=8"/>QR Reader for iPhone</a> and then scan the QR Code on the left.</li>
</ol>
<p>
Your devices web browser should open to the same catalog page for <i> As King Fishers Catch Fire</i> as your computer browser.
</p>
<p>
A simple poster or digital ad like the following example can be could be made that link to your ebook copy.
</p>
<p>
<strong>Right:</strong> Hypothetical poster with the relevant QR code linking to your OPDS Web Catalog page for the book being show-cased. The QR code included in the advertising allows user borrow or reserve the ebook title on the spot if they are a member of your library using their smartphone or tablet device with a QR Reader.
</p>
</div><!--col-md-6 -->
<div class="well">
<h5> Example of a poster advertising <i> As a King Fisher Catches Fire</i>.</h5>
<img src="assets/images/pocQRcodepostersimplyeweb.png" class="thumbnail"/>
</div><!--well-->
</div><!--row-->
<div class="row">
<div class="col-md-4">
<h4>OPDS custom url support in SimplyE</h4>
<p>
SimplyE for iOS will register your catalogs custom OPDS://URL or SimplyE://url scheme. Now you can use your SimplyE Circulation Manager OPDS catalog book entry urls to open SimplyE to the ebook you are promoting.
</p>
</div>
<div class="col-md-4">
<h5> This QR code</h5>
<img src="assets/images/askingfisherscatchfire.jpg" class="thumbnail"/>
<p>The above is SimplyE://circulation.librarysimplified.org/NYNYPL/works/Overdrive%20ID/23e94ca8-acac-473b-a5ab-215d2264b98d>/p>
</div>
<div class="col-md-4">
<h5> Will open SimplyE to this book.</h5>
<img src="assets/images/ioswhite.png"/>
<p> Download SimplyE and Try it yourself.</p>
</div>
</div><!--row-->
</div><!--section base-->
</div><!-- .container -->
</div>
<footer id="footer">
<div class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-8">
<a href="http://eepurl.com/bo9K3T"><h3 class="title"><i class="icon-envelope-alt"></i> Subscribe to updates</h3></a>
<span class="lead">We will only send you good stuff. Promise!</span>
</div>
<!--<div class="col-md-4">
<form class="input-group small" method="post" action="">
<input type="text" class="form-control" placeholder="Your Email Address" />
<div class="input-group-btn">
<button class="btn btn-default" type="button">Sign Up <i class="icon-angle-right"></i></button>
</div>
</form>
</div>-->
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="social-networks">
<a href="https://www.facebook.com/nypl"><i class="icon-facebook"></i></a>
<a href="https://twitter.com/nypl"><i class="icon-twitter"></i></a>
<a href="https://plus.google.com/u/0/+newyorkpubliclibrary/posts"><i class="icon-google-plus"></i></a>
<a href="http://nypl.tumblr.com/"><i class="icon-tumblr"></i></a>
<a href="https://www.pinterest.com/nypl/"><i class="icon-pinterest"></i></a>
<!-- <a href=""><i class="icon-linkedin"></i></a>
<a href=""><i class="icon-dribbble"></i></a>
<a href=""><i class="icon-instagram"></i></a>
<a href=""><i class="icon-pinterest"></i></a>
<a href=""><i class="icon-youtube-play"></i></a>
<a href=""><i class="icon-rss"></i></a> -->
</div>
</div>
<div class="col-md-4">
<h6 class="title">About</h6>
<p>
We are a team of remarkable institutions doing great things. Get to know a little bit more <a href="about">about us</a>.
</p>
</div>
<div class="col-md-4">
<h6 class="title">Get in Touch</h6>
<address>
<i class="icon-map-marker"></i> <a class="lightbox-iframe" href="https://maps.google.com/maps?q=NYPL+5th+Ave+at+42nd+St,+New+York+City,+New+York&hl=en&t=v&hnear=5th+Ave+at+42nd+St,+New+York+City,+New+York" data-toggle="tooltip" title="Show on Google Maps">42nd Street 5th Avenue, New York City, United States</a><br />
<i class="icon-envelope"></i> <a href="mailto:[email protected]" data-toggle="tooltip" title="Email Us">[email protected]</a><br />
<i class="icon-phone"></i> +1 212 621 40520<br />
</address>
</div>
</div>
</div>
</div>
<div class="container footer-bottom">
<div class="footer-copyright">
<p>© 2013 by Olin. All Rights Reserved.</p>
</div>
</div>
</footer>
<a href="#" id="scrollToTop">
<i class="icon-angle-up icon-2x"></i>
</a>
<!-- Contact Popup (Modal) -->
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">We would love to hear from you</h4>
</div>
<div class="modal-body">
<p class="lead">
Ask us anything you want. We will get back to you during the work week.</strong>
</p>
<form name="contactform" id="contactform" class="margin-bottom-large" method="post" action="contactform.php">
<div class="row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="" class="form-control" />
</div>
<div class="form-group col-md-6">
<label for="email">Email <span class="text-warning">*</span></label>
<input type="text" name="email" id="email" placeholder="" class="form-control" />
<div id="email_error_empty" class="error">Please enter your email address.</div>
<div id="email_error_invalid" class="error">Please enter a valid email address.</div>
</div>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label for="message">Message <span class="text-warning">*</span></label>
<textarea name="message" id="message" cols="30" rows="10" class="form-control" placeholder=""></textarea>
<div id="message_error_empty" class="error">Please enter a message.</div>
<div id="message_error_invalid" class="error">Please check your message for any errors.</div>
</div>
<div id="mailsuccess" class="success">Your message has been sent successfully.</div>
<div id="mailfail" class="error">Sorry, error occured this time sending your message.</div>
<div class="margin-top-base">
<input type="submit" id="submit_contact_form" class="btn btn-primary" value="Send">
<small class="pull-right text-muted">* required</small>
</div>
<script src="assets/js/validation.js"></script>
</form>
<div class="row">
<div class="col-sm-6">
<h4 class="invert">Library Simplified</h4>
<address>
<i class="icon-map-marker"></i> 42nd Street and 5th Avenue, New York City, United States<br />
<i class="icon-envelope"></i> [email protected]<br />
<i class="icon-phone"></i> +1 212 621 0520<br />
</address>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Libraries & jQuery Plugins -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.bxslider.min.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/jquery.fittext.js"></script>
<script src="assets/js/jquery.fitvids.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.hoverdir.js"></script>
<script src="assets/js/validation.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>