Ubuntu Online Tour

Anthony Dillon

Anthony Dillon

on 9 August 2012

We realise that changing Operating System (OS) is a big thing for anyone thinking of testing something out. That becomes a huge barrier for people trying out Ubuntu for the first time and seeing if they like it. As a member of the web team I decided to take on the challenge as a cool way to testing out some HTML5 and jQuery. The purpose of this blog is to talk about some of the challenges and thought processes I went through during the build.

Getting started

I started by breaking down the Ubuntu interface into DOM elements, similar to developing a web page from a design. So I took on the background first, each part of the build brought different challenges. In the case of the background, I needed it to stretch full width and height of the viewport.

The launcher

Once I had that nailed, I moved onto the launcher on the left of the screen. At the time of building (11.10) the menu would slide out of view when a window was fullscreen. By creating a DIV with a list of icons and styled with CSS to replicate the menu in the OS. Now I needed to add the interactive slide to the menu, which I decided to apply with jQuery because I wanted the animation to work on older browsers and not just browsers with CSS3. When a window is fullscreened I would trigger the menu system to slide the menu out of the viewport. Then binds a mouseover event to slide the menu back into view when the user needs it again.

Precise launcher

The global menu bar

Precise global menu bar
All that was left to make the web page look like the static Ubuntu interface was to add the global menu bar at the top for settings and window controls. This was again a simple DIV with a window control DIV floated to the left and a list of settings icons floated to the right.

Building applications

Now the interface looked like the initial Ubuntu screen. I turned to focus on applying the functionality to the menu icons, beginning with the folder icon. Created a Folder class and a File class, Folder class below:


function Folder($name, $location){
  if ($name==undefined) { $name='Untitled Folder';}
  if ($location==undefined) { $location='/Home';}
  var _name = $name;
  var _size = '6.2 GB';
  var _location = $location;
  var _in_bin = false;this.name = function (){ return _name; };
  this.size = function (){ return _size; };
  this.location = function (){ return _location; };
  this.in_bin = function (){ return _in_bin; };
  this.rename = function($name){
    _name = $name;
  }

  this.bin = function($in_bin){
    _in_bin = $in_bin;
  }

  this.move = function($location){
    _location = $location;
  }

  this.drawIcon = function($id, $type){
    return  "<div class='file-folder "+$type+"' data-type='folder' data-id='"+$id+"'><p></p><span>"+_name+"</span></div>";
  }

  this.type = function(){
    return 'folder';
  }
}

Both of these classes are used by the file system class that created them and stored them in an array to access and modify them later.
Now that we have a file system, the fun part comes when you connect it all up and see if it comes to life. This is how the connections happened:

Menu window workflow

When the folder icon on the menu is clicked it tells Base which triggers the open function in the folder system. I built the Folder and File classes with the aim to give the folder system full functionality, like rename, drag and drop to move, etc. But that was descoped to finish the tour in time for the release of 11.10.

Seeing this work I felt the buzz to jump to the next application, then the next, until all the applications I set out to develop were finished and working.

Have a go for yourself: Ubuntu Online Tour

Conclusion

One of the questions I was asked is `how long did it take you?’ In total it took about 4 months, from what started as a quick test to being given the time to bring the development to fruition. It was crucial that all elements of the demo looked and felt exactly like the OS as this will be most people first try of Ubuntu so we didn’t want it to be different if they install Ubuntu.

I plan to keep the tour up-to-date with the latest version of Ubuntu every six months. With every update I try to add features and application which I haven’t managed yet. A few features that come to mind would be to progressive enhance the movie player to use HTML5 video if available rather than Flash. I would also like to see the music player (Rhythmbox) be developed.

If you have HTML, CSS and jQuery skills and time to spare. Please feel free to contribute. The code can be forked from: Ubuntu Online Tour Launchpad Page.

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

Our Kubernetes deployment pipeline

A few weeks ago I joined the web and design team here at Canonical, in the Base Squad, which is our backend team. One of the things that we are responsible for is deploying the code to our different staging and production environments.…

Ubuntu Core Smart Speaker

With the holidays coming up, many of us can expect to spend time with our friends and families, often listening to seasonal music, or indeed escaping the seasonal music! Whether you’re joining in or getting away from the crowd, this…

Design and Web team summary – 19 December 2018

Welcome to the latest work and updates from the design and web team. Base squad This week, the bulk of our work was on improving our internal system for employee reviews, but we found time to squeeze in a few other things: We also…