Presentation tools in the browser

With the arrival of HTML5+C33 the browsers are getting more attention because the new possibilities.

One example of the possibilities are the proliferation of frameworks, tools and libraries to create HTML presentations to run in the browser. No need to transform your presentation from PowerPoint or Keynote to any portable format, the content is plain HTML.

First contact

The first tool of this kind I listened was the html5slides project. You can see it in action here.

Some time later, I read a new about a new tool called deck.js. I think it is awesome, extensible and… see for yourself at the Getting Started section.

Some weeks ago I read a tweet talking about impress.js. For the moment it is only compatible with Chrome and Safari (both uses the WebKit engine) but is looks really impressive.

Many more

Knowing the previous projects I start looking for other alternatives I found a great range of projects: Landslide, html5-slideshow (see a demo here), pow (see in action here) or DZSlides, a one-page-template to build your presentation in HTML5 and CSS3.

Within this maremagnum of possibilities the confusion is assured: which tool is better? which is easy to use? which has more effects? which one is more flexible and/or extensible? which want has more followers and/or supporters? which one will survive in the future?

 The future

Currently, all these tools are great but they all are oriented to a web developer user with strong knowledge on HTML and CSS.

The next step is clear, adapt to plain users (a user without web technologies knowledge). The tools needs an editor to help in the creation of the slides, like PowerPoint or Keynote.

There are projects working on this direction, like the 280Slides. It is implemented in Cappuccino framework and brings the user a Keynote like editor to visually create the slides.

More history

If you want to know a bit more about the evolution of the presentation tools, I encourage you to read this great article from Luigi Montanez.

Customizing jQuery UI Dialog: hiding close button and changing opacity

Sometimes when you are programming small things are the hard things, little details becomes difficult to solve and you need to spend lot of time to solve them. This is logically :) because you spent the major part of your time thinking and designing the big or complex things, leaving in a second plane the small things and because this they became the new “big” things. Ok, stop talking with buggy sentences and talk about this post. Recently I was working in a web page using jQuery UI dialogs that have a couple of special requirements that takes me some time and because this I want to share here with you:

  • Some dialogs must not have a close button. There are dialogs that must be always visible floating at some part with some controls.
  • Some dialogs must have a degree of opacity allowing view the underlaying content and becomes more opaque when the cursor enters in the dialog.

Next are samples about how customize minimally the dialog to achieve the previous requirements. You can see them in action in the next sample page.

Creating a default dialog

Create a default jQuery UI dialog is easy, given a ‘div‘ element identified by d1:

Creating a dialog without close button

To creating a dialog without a close button, the key is the ‘open‘ method. We need to reference the ‘.ui-dialog-titlebar-close’ element and hide it:

Creating a dialog that changes opacity

Finally to create a fashion dialog that changes its opacity with the mouse hover event:

Do yo know how to create more stunning dialogs?
Comments are welcome.