-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathintegrationandarchitecture.html
executable file
·467 lines (400 loc) · 30.2 KB
/
integrationandarchitecture.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
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Library Simplified · Integration and Architecture</title>
<meta name="About" content="Library Simplified is an open source, open architecture application designed to simplify the user experience discovering, borrowing, and reading eBooks. The application is built on an array of opens source technologies, open standards so as to advance the state of the art for eBooks, accessibility and interoperability. "/>
<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">
</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>
</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>
</ul>
</li>
</ul>
</nav>
</div>
</header><!-- .navbar-fixed-top -->
<div class="page-top">
<div class="container">
<h1 class="page-top-header">Integration and Architecture</h1>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li class="active">Integration and Architecture</li>
</ol>
</div>
</div>
<div class="container" id="main">
<div class="row">
<div class="col-md-3">
<div id="sidebar" class="affix" role="complementary">
<ul class="nav">
<li><a href="#currentlandscape">Current Landscape</a></li>
<li><a href="#alternatelandscape">Alternate Landscape</a></li>
<li><a href="#possiblearchitecture">Possible Architecture</a></li>
<li><a href="#serverfootprint">Server Foot Print</a></li>
<li><a href="#resultingarchitecture">Resulting Architecture </a></li>
<li><a href="#applicationstacks">Application Stacks</a><li>
<!-- <li><a href="#implementationoptions">Implementation Options</a><li> -->
</ul>
</div><!-- .affix -->
</div>
<div class="col-md-9">
<div class="row">
<h2>Integration and Architecture</h2>
<p class="lead">
This effort is focused on identifying the systems and common interface frameworks, protocols and methods so as to inform development of the application. It will focus on identifying integration needs, touch points and solution paths so that the application can be readily adopted by partner libraries and other libraries.</br>
<!--Downloadeable Fact Sheet <a href="assets/pdf/librarysimplifiedsurvey.pdf" target="_blank">here.</a>-->
</p>
<h5 class="hr2"></h5>
<h4 id="currentlandscape">Current Application Landscape</h4>
<p class="lead">
As part of the information gathering, the team discovered that almost all of the libraries shared the same technology platforms. The Online Public Access Catalogue (OPAC) is used to provide a common catalogue interface for all the library’s physical and electronic collections through either BiblioCommons or the web interface provided by their respective Information Library Systems (ILS) vendor, Triple I or Polaris. The primary eBook distribution platforms we use are: OverDrive, 3M Cloud Reader and/or Baker and Taylor's Axis 360 platform and/or Adobe Digital Editions, which is the free eReader program provided by Adobe for Adobe encrypted content.
</p>
<div class="gallery">
<div class="md-sm-9">
<h6>Application Ecosystem </h6>
<p>
As one can see, the application ecosystem intermediates the libraries from their users. This may lead to disconnects between the libary's desired service interaction design vs that of the vendor's user experience design. Almost all of the user interfaces for finding, borrowing and reading an eBook from the library are handled by 3rd parties. Each platform is independent and minimally interoperable with one another or the library systems. This vendor competition for user access results in a different user experience for each system. While this offers the broadest access to content licensed or owned by the library, it limits practical access to the difficulty and frustration caused by lack of interoperability and confusion as to what platforms are compatible with the various content. While the OPAC attempts to minimize this, they are actually exasperating the problem with eBooks due to the additional layers of navigation and discovery steps to the eBook platform provider.
</P>
</div>
<div class="col-sm-9">
<a href="assets/images/CurrentEbookArchitecture.png" title="<h5>NYPL User Journey mobile</h5>"><img src="assets/images/CurrentEbookArchitecture.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div>
<div class="col-sm-9">
<p>
Note: The user journey was the same for almost all the libraries and their users (e.g. OPAC to OverDrive, 3M catalogue or Adobe DE) so the team mapped NYPLs users journey as the reference user journey. There were edge cases that required additional steps depending on whether the user was using a 3rd party platform such as Amazon’s Kindle, Barnes and Nobles' Nook or Adobe Reader. Web and software development staff at NYPL conducted this process.
</p>
</div>
</div>
<div class="row">
<h5 class="hr2"></h5>
<div>
<h4 id="alternatelandscape">Alternate Application Landscape</h4>
<p class="lead">
Out of the 3 eBook platforms, only OverDrive and Baker and Taylor actually transfer content outside of their platforms. Additionally these platforms utilize Adobe DRM and Adobe software for ePub presentation. This underlying technology, is not ePub 3 capable and induces further “lock-in” to the particular vendor's platform without expensive licensing and software acquisition. We additionally tested new technologies such as Sony DADC’s User Rights Management System (URMS) DRM and found it easy to use albeit, hardly used by reading platforms. This is due to restrictive licensing terms for users of Adobe technologies as well as the antiquated methods for rendering content that limit the interactive content and more advanced interface technologies of today.
</p>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-sm-9">
<a href="assets/images/desiredarchitecture.png" title="<h5>desired user and application intermediation</h5>"><img src="assets/images/desiredarchitecture.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div>
<div class="well">
<p>
As you can see on the diagram to the left, the desired end state for libraries seeking to own the user experience and remove the intermediation of the library by its vendors is to simply provide the interface to the eBook collection. This interface in short intermediates the vendors so that discover, borrowing and reading experiences are managed by the library interfaces.
</p>
</div>
</div> <!-- row -->
<div class="row">
<h5 class="hr2"></h5>
<div>
<h4 id="possiblearchitecture">Possible Application Architecture</h4>
<p class="lead">
A possible application architecture of Library Simplified that could intermediate the different platforms, systems and content repositories of the library and 3rd party vendors, would be a “plug-in” infrastructure. In some instances, Library Simplified systems would need to actually take on the functions of other systems when they cannot support the full scope of services needed to provide a unified view into the eBook collections. It will also need to normalize depiction of the collection and the transactional consistency of a seamless user experience.
</p>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-sm-9">
<a href="assets/images/pluginarchitecture.png" title="<h5>Application Infrastrucure for proposed system</h5>"><img src="assets/images/pluginarchitecture.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div>
</div>
</div>
<div class="row">
<h5 class="hr2"></h5>
<div>
<h4 id="serverfootprint">Server Footprint</h4>
<p class="lead">
The infrastructure foot print that could support such as an application could be fully hosted by the library on license free LAMP stacks (Linux, Apache, MySQL) as well as leased infrastructure such as Amazon Web Services (AWS.)
</p>
</div>
<div class="col-sm-9">
<a href="assets/images/ec2frontend.png" title="<h5>Server Infrastructure for proposed application</h5>"><img src="assets/images/ec2frontend.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div>
</div>
<div class="row">
<p>
One area that could be better optimized involves the data remediation services that “wrangle” the disparate meta-data providers and repositories on the Internet. This service is needed to classify and fill in the missing descriptive data of a book and its related cover-art that exists in trade eBooks and Public Domain eBooks. This data and content “wrangling” architecture enables the distribution of Public Domain works hosted by the library such as Project Guttenberg, which houses over 40,000 eBooks, and Audio Books. This area of the this application footprint is “heavy” in terms of data storage requirements because it aggregates a wide variety of data in that may be duplicated, but alternately indexed, redundant and/or unnecessary in the end. The processing services distill and remediate this data into what is needed for the application database. Once processed, it is the remediated and distilled data that the application needs. A potential solution for deployment and implementation would be to host this as a service for other libraries so as to eliminate the initial processing burden and infrastructure for adopters. The service would only process and remediate the difference in the partner library catalogues and new works introduced by the partner’s collection developers as needed. Where there is overlap in the respective collections, the service merely uses the remediated data and works on hand. This service would allow a minimal footprint for other libraries looking to adopt Library Simplified.
</p>
</div> <!-- row -->
<div class="row">
<h5 class="hr2"></h5>
<div>
<h4 id="resultingarchitecture">Resulting Architecture</h4>
<p class="lead">
Upon implementation, we arrived at a new architecture to facilitate two key technologies: 1) Adobe Vendor ID and 2) OPDS for Libraries. Additionally, this architecture decoupled the Public Domain and Open Access content store from the core circulation management functions so that it can exist as a stand-alone content store that is 3rd party hosted or locally hosted.
</p>
</div>
<div class="col-sm-9">
<a href="assets/images/architecture2.png" title="<h5>Resulting Architecture Diagram</h5>"><img src="assets/images/architecture2.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div>
</div>
<div class="row">
<p>
<strong>Adobe Vendor ID</strong> is a specification vs. a true technology. This specification provides licensors the ability to protect their users identities by taking on the authentication and authorization to licensed content. Vendor ID works seamlessly with Adobe's Adept DRM technologies, RMSDK based applications such as Adobe Reader and Adobe CMS. The other benefit is that is more naturally fits in within the library technology ecosystem. Traditionally, libraries have relied on their ILS to provide patron identity management, authentication and authorization services for their digital properties. This native ability allows libraries to preserve that traditional technology implementation until they migrate to more modern and practical SSO and CRM technologies to manage their patron identities, authentication and authorization to services.
</p>
<p>
<strong>Open Publication Distribution System (OPDS)</strong> is an open specification for a protocal that is widely used in European and North American (Canada) eBook markets where accessibility is more widely practiced and service providers have adopted a loosely coupled technology stack. The specification community consists of publishers, platform providers and eBooks vendors - <a href="http://discover-opds.org/index.html" target="new">OPDS.org</a> . The <a href="http://opds-spec.org" target="new"/>OPDS specification</a> is a syndication format for electronic publications based on Atom <a href="http://www.ietf.org/rfc/rfc4287.txt" target="new"> RFC4287</a> and HTTP <a href="http://www.ietf.org/rfc/rfc2616.txt" target="new">RFC2616</a>. <i>OPDS Catalogs enable the aggregation, distribution, and discovery of books, journals, and other digital content by any user, from any source, in any electronic format, on any device.</i> The OPDS Catalogs protocol prioritizes simplicity and speed. Because the transport protocol is essentially an xml document it is easily consumed by a variety of clients and services. It is easily adopted becasue it allows program layers to evolve independently of each other. The OPDS Catalog 1.1 specification is based on a lot of existing, in-production software and collaboration between eBook reading systems, publishers, and distributors; eBook readers like Aldiko, Bluefire Reader, QuickReader, FBReader, Ibis Reader, and others already support the evolving specification as well as eBook providers such as Feedbooks, Internet Archive, O'Reily Media, etc..
</p>
<p>
<strong>Library Simplified APIs</strong> will be RestFul APIs exposed via the OPDS protocol. We are working with the OPDS community to extend and define the OPDS specification to include content rights management, authentication, authorization, and lending work flows. These protocol extensions - Opend Distrobution Libraries (ODL) and Authentication for OPDS - will allow for greater interoperability between libraries, ILS systems and eBook vendors. OPDS will be used as the machine to machine interface between Library Simplified's <i> Circulation Manager</i> the <i>Metadata Wrangler</i> and <i> Open Access Content Server</i>. This opens up the potential for deep integration into the Library Simplified middleware application layers so that an array of compliant vendor systems can be easily implemented within a library application ecosystem through a loosely coupled protocol vs API. Furthermore, we believe that as OPACs and ILS vendors should adopt these protocols to allow great opportunity for libraries to curate and create custom user experiences that link their eBook collections with their special collections, physical collections and exhibitions and integrate service providers.
</p>
</div> <!--row -->
<div class="row">
<h5 class="hr2"></h5>
<div>
<h4 id="applicationstacks">Application Technologies</h4>
<p class="lead">
The application consist of a combination of open source and commercial proprietary software. The following diagrams depict software and resources that make up the application stack.
</p>
</div>
<h5 class="hr5">Mobile client stack</h5>
<P>
For the mobile client, the highest level of the stack is the open source eBook application for delivering the data model, control functionality and information views (e.g. MVC). However, in simplest terms, the mobile app is 1) an OPDS reader (think of an ATOM or RSS feed reader) that functions as the "Discovery" interface for the library's content and 2) an e-reader that functions as the rendering engine for EPUB packaged content files. The OPDs reader is based on the the OPDS 1.2 specification. The Readium SDK EPUB rendering engine software compiled into the app provides the e-reader function of the app. The Digital Rights Management (DRM) functions required for certain content is handled by the appropriate commercial technology (e.g. Adobe Adept Connector) to manage protected file acquisition and description. There is a portion of the app for registering for a library card. This is handled through a web-view within the app that is securely hosted in the middle-ware. The same card registration tool can be easily swapped out for other SSO methods, or updated for to work with a different ILS or repurposed to other clients interfaces such as the library's website.
</p>
<div class="col-sm-9">
<a href="assets/images/clientappstack.png" title="<h5>client application stack</h5>"><img src="assets/images/clientappstack.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div> <!-- .col-sm-9 -->
</div><!--row-->
<div class="row">
<h5 class="hr5">Middleware Application Technologies</h5>
<p>
The middleware consist of custom software application code and language specific resource libraries. The bulk of the application is a Flask application written in Python. The database technology is Postgres SQL and the server technology is Linux. The card registration application is a Rails application using a Postgres SQL database to handle temp data storage and a SOAP interface to transact that data into the Sierra ILS. The different application servers depicted in the diagram provide the core functionality and feature functions (e.g. card registration, open access content hosting and vendor ID.) The core function of the middleware is to consolidate the remotely hosted content services into a unified collection, normalize its representation, normalize the 3rd party host APIs into a standard transaction for the client, and manage access to content. All interfaces between the application servers are based on OPDS (accept for the Database.)
</p>
<div class="col-sm-9">
<a href="assets/images/middlewarestack.png" title="<h5>client application stack</h5>"><img src="assets/images/middlewarestack.png" alt="" /></a>
<!--<img src="assets/slides/Slide1.png"> -->
</div><!-- .col-sm-9 -->
</div> <!--row -->
</div><!-- row -->
</div>
</div>
</div><!-- .row -->
</div><!-- .container -->
<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> the New York Public Library, 5th Ave at 42nd St, New York City, United States<br />
<i class="icon-envelope"></i> [email protected]<br />
<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>