Category Archives: todoso

Embedding a presentation in a Web page

I have uploaded the first drafts of the embedded player in a Web page. I’m trying two different styles: one with the controls overlaying the content à la vimeo, one with the controls under the content à la blip.tv: todoso.org

The advantage of the former is that it takes less space and it is easier to integrate in any website no matter its design (unlike youtube, where you can change the colour but it would still not fit in a minimalist design). The advantage of the later is that the controls never hide the content. In a presentation this is important since the controls are used more often than in a video… I am undecided yet.

I’ve also updated my plugin for jQuery which now overlays the overlay with the possible title of the original image.

First mockups and todosOverlay

The first two iterations of the management interface have been uploaded to the project homepage: todoso.org

This is the page that users will be facing once they are logged in: their most recent presentations are displayed and a search-box allows to search for other documents just like in gmail. It will be possible to filter the documents by tag, date or title. For example the query

date last month

will display all documents that have been created during the previous month. I’m going to try to leverage Ubiquity‘s fantastic natural language parser in this project and I hope to make this omnipotent search-box a first class citizen of the interface of the whole application.

When selecting a presentation, different icons appear for different actions that are yet to be determined (I was thinking about play, share, tag and use as a starting point for a new document).

I’ve also started to use the css framework oocss from stubbornella. This is a really easy way to make a first step into the world of css frameworks and the focus on performance of this project doesn’t let you any reason not to try it.

Finally, facing the lack of an elegant and light-weight image overlay solution (commonly known as lightbox), I’ve started my own which is really simple but not yet really flexible: todosOverlay. It’s simplicity is a direct consequence of the exclusion of IE6. I’m pretty sure we could enter into a virtuous cycle with this browser:

The less support we provide, the more users are facing broken Web sites, the more likely they are to figure out that their is something wrong, and they’ll be in turn more eager to switch to a better browser, the less we’ll need to care about providing support!

So, what is great about this “yet another overlay plugin”?

  1. it requires only four files:
  2. which have altogether a really small file size
  3. it looks beautiful in the latest versions of Firefox, Safari and Chrome thanks to the border-radius and box-shadow CSS3 properties, it looks Ok in Opera, IE7 and IE8.
  4. just like the rest of this project, it is Free Software and all the SVG sources are included. Therefore you can really adapt it to suit your needs and desires (changing the color of the close image for example).

What might not please you in its current state:

  1. the overlay doesn’t scroll with the page,
  2. the overlay has a fixed size and the inner image is scaled,
  3. you cannot add text to the overlay,
  4. you cannot switch to the next/previous directly from the overlay like you can do with jQuery lightBox
  5. there can be only one overlay at a time on the page

How does that work?

[code lang="js"]
// The plugins has to be set on thumbnail container
$("#myThumbnailContainer").todosOverlay();
[/code]

It is currently possible to change the size of the overlay (its width, the height is calculated according to the thumbnail dimensions) and to change the regex used to find the full size image based on the thumbnail’s url. If the thumbnail is:

http://www.example.com/images_200px/myImage.png

and the full size image is:

http://www.example.com/images_500px/myImage.png

you can use the following options:

[code lang="js"]
$("#myThumbnailContainer").todosOverlay({
width: 500,
regex: /_200px/,
replace: "_500px"
});
[/code]

By default the plugin will search for any “_thumbnail”, “thumbnail_” or “_thumbnail_” string in the url and remove it.

By the way, I tried to use picasa as a CDN for the pictures on this site, and it turns out that it is not possible. For some reasons, the pictures sometime refuse to load: the address is correct, the thumbnail even appears in firebug but the load event never triggers… I just gave up. If you want to give it a try, the options for picasa are:

[code lang="js"]
{
regex: //sd+//,
replace: "/"
}
[/code]

Announcing ToDoSo

This project has officialy a new name and a Web page: ToDoSo.org (I know, it’s a shame not to use @font-face, SVG and other wonderful modern Web technologies).

You can expect to see the first mockups of the user interface on this page in the next few days. I’m going to post about it of course.

Next Wednesday (1st of July) I’m going back to France for one week of holiday, I hope to find a nicer weather over there. Otherwise I’ll go to Spain!