Creation of the library navigation pages on this website had to keep in mind the following restrictions:
it needed to be easy to update with a potential for expansion
PhP and MySql were not available for use
The use of plugins (pdf readers, quicktime movie players, and flash players) has created browser imcompatabilities for students in the past. Thus, we attempted to use more browser native capabilities and rely less on such plugins.
With these restrictions in mind, we set out to build a comprehensive filtering system that utilized the in-broswer capabilities provided with HTML5 structure. The sections below highlight some of the features we used with links to resources for you to follow if interested.
HTML 5 Technologies
WebGL rendering makes viewing of 3D models browser native
Video is also done in-broswer without the use of plugins
WebGL limits us to a subset of broswers (firefox, chrome, safari), we can tell students to use those browsers instead of explaining how to check that they are using the right plugin. This is much easier for us and creates less of a barrier for students. Additionally, new broswer versions are expecting to integrate video and webGl with nearby updates.
We have also built in a fall back mechanism which allows users to download 3D PDF files to view on their machine. In the event that WebGL is not compatible with thier machines, they can still view the objects in Adobe Reader (7.0+) so long as they have the reader installed.
Additionally, there are several pre-built plugins that we have integrated into our page. Each plugin is described below with an example and a link to the original code.
The jQuery iviewer plugin is used for ineractive image display. It allows for zoomin in and out, panning the image, and rotation. Additionally, it has functions for setting the image to fill the screen and setting the image to it's native resolution (1:1).
Among our materials we have several videos of lithic reduction sequences. While the videos themselvs are informative, it can also be useful to view the removed flakes at their point of removal. Using the popocorn.js plugin, we were able to have each flake populate next to the video at the appropriate time. The plugin allows for several types of time-based interactions with HTML5 video.
The Three JS library is used as a 3D engine for our models. The plugin leverages HTML5's WebGL capabilities to render 3D objects in the user's browser. The plugin has a variety of functionalities which are not included here. We used the BoilerPlate Builder as a base code and made a few modifications to add the download files and the model information.