Motivation: I hate standard text-based CVs. They are so boring and I want something that gives you a quick look into the main things somebody has done. And I also want it to be strongly ‘time-based’. Plus: I want a very very simple design and I need to have a functional version very very soon.
Motivation(II): I want to play a little bit with HTML5, the Canvas and making a WP plugin.
Disclaimer: As I need it to be done immediately because I want to apply for a specific candidature I will be doing stuff without thinking very much on code prettiness. Anyway, I’ll promise it will be an iterative process to I’ll be improving it.
Solution:

1. Starting point: googling about I found this post. So I must say thanks to Simon Harris, I’ll start based my work on his example.
2. Changed mouse cursor in mouse EventListeners. I want to have the ‘dragging’, ‘mouseover’ etc. pointers. Example:
   1 2 3 4 5

   if (activities[i].contains(mx, my)) {     e.target.style.cursor = 'pointer'; // My mouse cursor is in the area of an activity, so I change cursor to 'pointer' style.     return; } else e.target.style.cursor = 'auto';

   if (activities[i].contains(mx, my)) {
       e.target.style.cursor = 'pointer'; // My mouse cursor is in the area of an activity, so I change cursor to 'pointer' style.
       return;
   }
   else e.target.style.cursor = 'auto';

3. For the ‘more information’ area, I want to be able to offer rich text edition. I found this one, Aloha Editor, which I’m going to try.
   Cancelled this step right now. I’ve tried the editor but format was not appearing as I desired and right now I’m not going to spend time on it. Let’s assume we’ll edit information manually adding html format
4. Once I click on an activity I want to update the ‘More information’ section. I do this using Prototype. Very easy to install (by only including the .js file: <script type="text/javascript" src="js/prototype.js"></script>

   ) and very easy to use (in the activities.js file do something like this

   document.getElementById("information").update("<i>"+MORE_INFO_MSG+"</i>");

   NOTE: I finally chose jQuery because I want to use jQuery sliders as some browsers don’t support “range” input sliders in HTML5 yet. Using Prototype and jQuery leads to some conflicts (which can be solved) but I prefer not to mix them. Usage now would be:

   $("#information").html("<i>"+MORE_INFO_MSG+"</i>");
5. I want my Activity elements to move across the screen so I will display a slider and I’ll apply a SCREEN_OFFSSET to the X position of my activities. This will do the trick.

Right now I publish it as it is, very ad-hoc. But I had a deadline where I wanted to show it. In fact there is much more ‘automatized’ than what you can see (for example, scrolling in horizontal direction). But I promise I’ll keep working on it and finally integrate it as a WordPress plugin.

Some stuff written in catalan, just a TODO list to myself…
a fer:
– en un futur desplaçar només en horitzontal seleccionant qualsevol punt de sa pantalla (mostrar maneta de drag)
– fer zoom de tots a l’hora
– posar els més antics baix i construir cap amunt (activitats posteriors tenen bases o fonaments amb coses d’abans)
– en un futur posar totes les activitats en transparent menys la seleccionada (hi ha un ctx.globalAlpha, però no mola perquè ho posa tot)
– afegir scrolling de nou