Sound & Vision Labs CMS interface
Sound & Vision Labs showcases applications, datasets and APIs developed or co-produced by the Netherlands Institute for Sound & Vision’s Research & Development department. The following blogpost provides an overview of how the enrivonment was built by a small, in house team and which tools were used.
Keeping in mind future developments, the Sound & Vision R&D team implemented the site without a standard web framework or CMS such as WordPress or Drupal. This to assure that functionalities can always be conveniently added or removed without having to go through the process of looking for the right plugin or needing to build custom plugins in case the desired functionality is not directly available. The site editors use a custom built CMS to update information.
The web pages were created by R&D developer Jaap Blom using Bootstrap and some custom HTML and CSS to reflect the Sound & Vision style. The few dynamic elements in the site were made mostly using simple jQuery/JavaScript code.
For easy indexing of the site by search engines, server-side templating was used and each page includes a proper URL, which is handled by the server. This ‘classic’ approach - as opposed to e.g. using AngularJS to create a ‘single page app’ - also ensures that the site is web crawler friendly and therefore supports our aim to make Sound & Vision Labs an example we can share with our web archiving network.
Related to the styling of the site, the Sound & Vision style guide with its typical colors was taken into account. Based on a free Bootstrap template by BlackTie, the selection of fonts, layout of texts and line heights within texts were carefully considered to optimize the reading comfort. The icons on the site were all created by using Font Awesome.
After achieving general consensus on the layout and style, the simple CMS was developed, using Redis to store the data. The editing interface was built using TinyMCE to provide user-friendly text editors and DataTables and jQueryUI to conveniently show and edit tabular information.
To be flexible in extending/changing the various (metadata) fields that are displayed for each type of content item, we built a simple template functionality, which can be used for example to add an extra field, e.g. ‘API documentation’, for API descriptions.
With respect to serving it all to the web, the back-end is created using Flask with Jinja2 as its templating system. To host it properly on the default HTTP port, the Flask application is connected to a nginx webserver via uWSGI.
Finally we use Supervisor to keep an eye on the system processes and to properly handle system restarts.
Useful links:
Read more about Sound & Vision Labs here