More Related Content
Similar to eMuseum Customization at the Danish Arts Agency
Similar to eMuseum Customization at the Danish Arts Agency (20)
More from CollectiveImagination
Recently uploaded
Recently uploaded (20)
eMuseum Customization at the Danish Arts Agency
- 1. eMuseum Customization Danish Arts Pushing the limits of eMuseum and how to do it. Alex Hoffman Gallery Systems
- 2. Key Features • Filtering and Sorting • Slideshow • Masonry Layout • Infinite scrolling • Maps and Geo Location • Advanced Search • Social Media • Relations • Web Services
- 3. The New Age of WEB SERVICES
- 4. what’s a web service…?
- 5. “A web service is a method of communication between two electronic devices over the World Wide Web. A web service is a software function provided at a network address over the web or the cloud, it is a service that is "always on" as in the concept of utility computing.”
- 6. Web Services Requesting data Molding it to be useful for YOU Retrieving it and displaying it on the page
- 13. Alex Hoffman Web Developer, Project Manager Gallery Systems alex@gallerysystems.com
Editor's Notes
- Good afternoon everyone, my name is Alex Hoffman and I’m going to show you an overview of one of the eMuseum customizations we did this past year for the Danish Arts Agency, which really shows off some of the potential of eMuseum and where the web and online collections in general are heading.The main goal of Danish arts agency was to make this site as user friendly and interactive as possible, and to do that they hired a 3rd party web design company to create wireframes and designs for both a desktop browser and mobile version of their site, expecting to use the latest technologies of the web. The designs and wireframes are a lot like the type that our own Web Atelier has been creating for web projects, and I’ll go over them later in the presentation to show just how much preparation went into the site.Before we actually take a look at the site, some of the key features are
- Sorting and filtering – of course sorting is pretty standard by now, and filtering is becoming more and more popular, allowing users to do a search and then fine tune it with pre-defined categories, most of the time without even having to reload the page.A slideshow for objects – which can be controlled through a number of ways, either by using an object package in TMS that’s specific for the eMuseum homepage, or by using events or exhibitions. You could even use an array of objects by object number or ID. I would say the easiest way is to use an object package just to get everything in one place, name it something like “eMuseum Slideshow” or “eMuseum Homepage” so that you know what it is and where it’s going, and then switch objects in and out of it to keep the content dynamic and fresh on the homepage. In TMS 2012, you can even have media packages, and order the objects and media in the package.A masonry layout, and what I mean by masonry is that, when in the “light box” or “grid” view, not all of the tiles are the same height, the height of the tile is mostly based on the size of the objects image and the size of the object fields displayed in the tile. This style has become more popular, mostly by Pintrest, and I’ll try to illustrate it a bit more.Infinite scrolling, which allows a user to do a search, load as many objects as will fit on their screen, and then keep loading more objects as the user scrolls further down the page rather than having a pager and always having to reload the page. This is another usability feature that was added.The use of location information in TMS to plot objects on a map so that users can see where the objects currently are in the world. We can even use the users IP address to determine where they are in the world and show them the objects closest to them. Unfortunately in the case of this site, I don’t think any objects are around us, they’re mostly in and around Denmark.In conjunction with that we also have an advanced search which allows the user to hone their search even further, even using geo information or a date range filter.Of course no site seems complete these days without some social media aspect to it so that users can share their searches, my collections or specific objects with people on facebook, twitter, or just email.I’d also like to highlight the way we do object relations on this site, since it allows you to see just how each object is related to another and assists in easy navigation throughout.And finally, not so much a single feature but more a core part of this site and something that makes all the other features possible are the web services on this site. Web services are something that really makes it easier to get at data anywhere at any time and make things “AJAXy” and dynamic, and I’ll try to explain what they are, what I mean and how they work.Also to accomplish a lot of the goals for this site we utilized a bunch of JavaScript plugins, which I will try to mention as we come to the features that they were used for.So let’s jump into the site-
- Now in my review of the site I skipped over one of the things I said was huge in the creation of this site, and those are the web services, which Kevin Arista wrote, along with a bunch of the functionality.
- So what is a web service? Well Wikipedia will tell you that:
- Now if that doesn’t make sense to you, it’s ok, it doesn’t make much sense to me either. Basically all you need to know is that web services are about requesting data, molding it, and then getting it back and doing something with it.
- So how do we request data in eMuseum, or for that matter a web page in general? We do a search. It’s such an integral, obvious part of a site we may forget that’s how it’s done. Now when we do a search we’re using a form, and forms need to submit their information somewhere. In this case, we’re calling a web service at this location.
- Here you can see the URL this particular search went to, to get its data. It’s saying to go to this server, which is the server the site is hosted on, then go to this file on the server, use this “method” or “service” contained in the file, and since we know the “search” service takes 2 parameters, we give it 2. What type of search we’re doing, which is a keyword search, and what keyword to use, which is “nord”. The quick search always goes to that service using the keyword parameter, so all we had to provide was the keyword to use.
- In many ways the service URL looks a lot like a file path, right? (c:\\fileFolder\\filename)(\\\\alexh-p\\c$\\...)
- So we give all this to the server, and by giving it all this information it knows which fields to give us back, because we told it that when we do a quick “keyword” search, we don’t want all the data, we just want some of it. There’s a different service for when we want the detail page information, but we’re not going there right now, we’re going to the grid view. So what do we get back from the server? Well some people may be used to XML. Here we can see how an object for the grid view would be broken down into XML by field. And each one can be identified by its object ID, which is unique. We would likely have more than one object returned, so it would look more like this, each object clearly defined in the XML tree.In this site we’re not using XML, but JSON, a different way of defining data, with the same idea. JSON stands for JavaScript Object Notation, so it’s JavaScript’s way of working with data. If you’re going to use JavaScript to manipulate the data, like we are with all the JavaScript plugins on the site, such as Isotope, Nivo Slider and Infinite Scroll, then it makes sense to use a format that’s easier for JavaScript to read.
- So here is how that same XML would be represented in JSON format. Now it takes a little getting used to, but once you do, it’s also very structured and makes sense. It’s still like a hierarchy or tree, except without all the brackets. You can see the parent where all the objects sit at the very top, and then the start of the object here, with its fields clearly labeled with values, just like the XML. And this is how 2 or more objects would look in JSON format. Broken down by field, and by object.
- So here you can see how this field would relate on the page, one to one. The information is looped through with JavaScript, and extracted into HTML onto the page. If I go to the site and actually do the search, you can see how it would turn out on the real site, and I can even do exactly what the website is doing on the backend, look at the URL it is going to, the web service, to see the code it is getting back before it becomes the pretty page you just saw. In here you can see all the objects clearly defined with their fields. And if I change the keyword, you will see I get different results.There are many services on this site, the quick search is just one of them. There are ones for handling the advanced search, what happens when you click on a filter, the collections page, the artist page, the object detail page, and the map page, and more. Some of these same services are used for the mobile version as well.
- These different services really allow us to query for specific data to help the performance of the website, call it whenever we want even without having to reload the page. They also allow us to expose an API to easily retrieve data that’s published on this site. The heart of this site is eMuseum, but we have also had clients who have asked us to build web services in eMuseum for them hit from their main websites search, so that they can retrieve collection data from eMuseum, aggregate it with search results from their main website, and display them all in one place. So these are just some of the great things that can be done with eMuseum and web services in particular.Does anyone have any questions?