Enel Cinquanta

WordLift powers Enel.TV (Semantic TV Example)

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).

Challenges

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”).

https://dl.dropbox.com/u/8801031/Enel-TV/WebTV-Archivio-ENEL/index.html

Semantic Everywhere

IOIO.JS Framework

IOIO.JS Framework: responsive menu combined with ActiveElement on Android 4.0

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:

Preview of Enel.tv

Preview of the Sliding Menu and the Player Toolbar on Enel.tv

  • 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.

IOIO.js

The ioio.js framework

WordLift’s companion for client-side development 

ioio.js is the semantic UI framework developed in connection with WordLift our plugin for WordPress that uses Apache Stanbol for content enrichment.

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:

Mapify in action - quickly add OSM to your website

Mapify in action – quickly add Open Street Maps to your website

  • 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.
Requirements
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:

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

For those of you interested on WordLift here is a video from the talk we gave at the IKS Salzburg Workshop that introduces the overall idea of WordPress going Semantic and our Beta Program.

http://vimeo.com/45243929

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!

Comments are closed.