The overall idea of Enel.tv (a website that will go online next month) was to celebrate Enel’s 50th Anniversary with the development of an interactive video channel dedicated to their archive. Founded in 1962, after an historic political debate that led to the nationalisation of 1,300 local electricity companies, Enel is now Italy’s largest electricity company and one of the main players World-Wide. In this post we will present ioio.js a framework we developed for WordLift users to personalize the user-experience on semantic-aware WordPress blogs (WordLift brings the power of Apache Stanbol to WordPress).
Our project began in 2010 with the census of Enel’s video archive that was spread across various locations in Italy and included over 1.200 tapes (Betacam SP and Betacam Digital), 353 open reel video (1 and 1/2 inch) and 146 films (35 and 16 mm). For the first time we had the opportunity to view this unique account of Italian history (over 850 videos), classify all materials, digitalize it and create a comprehensive database for web access (this tremendous effort has been possible thanks to the collaboration with Interact SpA, a company we started in the mid-nineties). When we began working on the information architecture we wanted:
- To be as flexible as possible,
- To re-design the taxonomy of the web site based on the contents we had (roughly 600 selected videos for online access) mixing a typical bottom-up approach with some top-to-bottom re-organization that could make the overall architecture accessible and aligned with the company’s core objectives,
- To ensure a seamless experience from web to smart devices and…
- To use our CMS of choice (WordPress) making the site easy to manage for the internal editorial team (that would keep managing the site with newer contents once the anniversary is over) and compatible with Enel’s IT infrastructure.
Moreover following the early discussions we had with the Digital Media team in Enel we all recognized the web is a medium on its own (and has little to do with video archives) and most of the ideas around corporate online TV are quite distant from today’s web usage patterns.
The result was the mind-map you’ll see below where contents are accessible and clustered using various keys such as timeline (“Periodi storici”), geographical coordinates (“Territorio”) and topics (“Tematica”).
When getting back to WordPress we only had post and pages to deal with and we needed a much richer set of options to present our contents using the IA we had in mind.
We though of using WordLift 2 and Schema.org to boost WordPress adding a richer semantic organization of the assets and we developed a new plugin (code-named WeeoTV) to publish all the videos from the Digital Asset Manager (DAM) to WordPress using a RESTfull interface. Having to deal with over 600 videos we created on WordPress a Custom Post Type using WL2 PHP framework with the properties of the VideoObject (as defined by Schema.org); we eventually added the Place for the GeoCoordinates and we ensured WeeoTV could handle properly the communication between the DAM and WP. In terms of UX after a lot of sketches, brainstorming sessions and a broad overview of the design trends we choose to feature:
- Vertical Parallax Scrolling,
- Responsive design (smartphone, tablet, laptop and wide-screen TV),
- Dynamic tiles (already shown on WL2 early prototypes),
- Figure-Ground design where we could combine background images with multiple thumbs (each one presenting a single clip),
- Open Street Map to browse all clips that we could relate to places,
- Support for major browsers on Windows and Mac as well as touch devices running Android or iOS.
The ioio.js framework
WordLift’s companion for client-side development
ioio.js toolbox of front-end components to help you design a semantic user experience that has been developed for the Enel.tv website and it is the result of our effort as IKS Early Adopters.
The framework consists of several components:
- ActiveElement: informs other components when the current active element has changed, useful to determine the active section.
- ArrowScroller: takes an scrollable element and draws two arrows on the sides to allow horizontal scrolling similar to the YouTube videos bar.
- Fillify: creates a layout composed of stretchable background image, an overlayed container divided into a fixed height header and a variable height content, all controlled via stylesheets.
- Mapify: eases the implementation of 3rd geomap libraries (OpenLayers) by providing a simplified facade, and allows easy integration of GeoRSS feeds with custom icons.
- Menufy: creates a dynamic menu from a simple list and automatically moves the current selected menu item on the top of the list. Can be combined with ActiveElement to automatically update itself when the user scrolls the browser.
- PlayerToolbar: creates a 100% reusable HTML toolbar to manage a video player actions and events created via 3rd party libraries (LongTailVideo).
- Scrollbars: creates non-obstrusive scrollbars that work just anywhere (Firefox included) and don’t break your existing CSS.
- SlidingMenu: updates the 2nd level navigation menu according to the current section, in combination with ActiveElement, optionally using animations to show the menu.
Requires jQuery 1.7.x and jQuery UI. Tested with jQuery 1.7.2 and jQuery UI 1.8.21.
How to use it
Current version is 0.9.1: to use it, get a copy of the library from here:
- minified version: https://raw.github.com/insideout10/ioiojs/master/lib/ioio-0.9.1.min.js,
- non-minified version: https://raw.github.com/insideout10/ioiojs/master/lib/ioio-0.9.1.js,
- non-minified debug version: https://raw.github.com/insideout10/ioiojs/master/lib/ioio-0.9.1.debug.js.
For the debug version in order to see the debug messages, the following library is required:
How to report issues
Please use GitHub to report issues: https://github.com/insideout10/ioiojs/issues.
Video: WordLift 2 Beta Program
Once again thanks to the all IKS team for supporting this adventure and thanks to the team in Enel investing on open source and web innovation!