I’ve given a few public presentations this year, and still have a few more to go. I could have used PowerPoint, or the more logical Mac alternative, Keynote, to assemble the visuals for each presentation. But I’ve never liked that route. Given the material I usually cover, I like to present in the same format I’m talking about.
Those who’ve seen my presentations know that I use a browser to navigate through slides constructed with traditional HTML and CSS. I link out to external web pages, view source, and toggle off style sheets often enough, that using HTML and CSS just makes sense given my style and material. Accesskeys baked into my presentations allow me to navigate forward or backward through my deck with rapid keyboard shortcuts, without needing to reposition the cursor over little next/previous links. More on the presentation scripts I use later.
The system I use works pretty well. However, I’m still missing a few critical components that could make HTML-based presentations even better:
- Wireless remote that controls Firefox/Safari
- Either bluetooth or RF would work. I’m not just looking for something that allows basic browser navigation functions: forward, back, home, bookmark selection, view source, and scroll. I’m also looking for something that allows me to map certain buttons or button combos to specific keyboard shortcuts to allow use of my accesskeys and other menu commands available to the browser. Something that allows me to step away from my laptop once in a while, so I don’t need be at the keyboard every time I change slides. Could even be an add-on script to something like Salling Clicker. Obviously this device would/should be capable of controlling a lot more apps than the basic browser.
- Better HTML/CSS manipulation in Safari
- I’ve used Firefox for all my presentations so far. But being a Mac user, Safari slowly became my browser of choice, simply because it feels faster than Firefox; it also seems the Mozilla Foundation is making the Mac version of Firefox less and less Mac-like. Recently discovered Safari plugins like Saft and Stand (both discovered via mentions by Jon Hicks) push Safari toward a more suited browser for full-screen presentations. Except for two missing features:
- A working toggle-CSS bookmarklet/favelet
- All the bookmarklets I’ve tried in Safari only toggle off linked style sheets, but not imported style sheets. Grant Hutchinson documented this as a Safari bug in the way it implements the
document.stylesheetscollection. It seems there should still be a way to temporarily disable ALL style sheets in Safari. I rely on the ability to toggle CSS on and off throughout my presentations, and many sites import their style sheets directly via the HTML file. This, alone, is the reason I haven’t been able to use Safari for presentations yet. - A Web Developer Toolbar equivalent
- This overlaps a little with the previous toggle-CSS wish. If you design or develop web pages, and haven’t discovered the Web Developer extension for Mozilla and Firefox, you’re missing out. Instantly disable images, style sheets, cookies, manipulate forms, outline various elements, resize the window, validate everything, and lots more. I’d love to see this functionality (or even a portion of it) in Safari somehow. The toolbar isn’t much more than a collection of individual snippets of JavaScript. The functionality of this toolbar is a big aid in quickly demonstrating how existing web pages are constructed. (Sidenote: Chris Casciano had a similar extension called the PNH Toolbar, but development on it stinted a little over a year ago.)
Am I just dreaming? Know of anything that fits the needs above? Have other presentation-related wish list items or recommendations that I haven’t thought of? Something you’ve seen someone use somewhere else?
Posted in Technology
40 comments (Comments closed)
Not sure if Romeo does everything you need, but it’s similar to Salling Clicker. I unfortunately had to give up bluetooth when I got a Treo, but I played around with it on a T610 and it’s kinda nice. Looks like you can write your own controls easily too so that might makes for easy keyboard mapping.
As the author of the Web Developer extension I’d like to point out that the extension is released under the GPL so if anyone wants to take a stab at writing a Safari equivalent they can use the code as a starting point.
Jon Hicks was talking about doing it a while ago, but I don’t know if he got anywhere.
The difficulty in recreating what I find to be the most useful feature of the Web Developer extension (View Style Information) is that as of 1.2 Safari has no equivalent of getComputedStyle(). I’ve actually tried to do it a number of times with little success.
Maybe once Apple releases 1.3 I’ll have another go at it.
I’ve not bought one for myself yet, but the Keyspan Digital Media Remote looks like it might do the trick for you if you’d prefer a real remote to using a mobile.
It’s one of the few (only?) such remotes with mac-based software available, and seems to provide a nice level of configurability.
Mike: Just now remembering that you mentioned Romeo to me when I was in Seattle. I’ve downloaded it, along with Veta for my Palm. Looks like Romeo already has a Safari plugin. Just need to see how customizable it is for my own keyboard shortcuts.
Daniel: The Keyspan remote actually looks almost just like what I need, and it’s fairly cheap too. Just started poking around the Mac OS X documentation, and it looks highly configurable, like you said. I’m just bummed that it uses IR, which means I’d have to point the remote back toward the receiver each time I want to use it, which limits where I can stand, and which direction I face. Could be a possibility though. Thanks.
Inspired by your method, I’ve begun using HTML/CSS for presentations as well. In fact, I found that it’s the ideal way to distribute presentations on CD to a wide audience; it’s cross-platform, it’s easy to add localization or lo-res options, and all the client needs on his/her platform is one of the web browsers used by 99.9% of web users.
Of course, this limits your presentations from using certain media (without adding Flash or other plugin-based media) within the presentation, such as musical cues. Fortunately, most presentations don’t need the extra things, and often times it can be added with minimal stress.
Overall, it’s a very useful method.
Having a presentation in XHTML/CSS sound like a typical job for Opera for me.
There is a nice tutorial on how to do it at http://www.opera.com/support/tutorials/operashow/. It uses the css-mediatype “projection”, which means that you can really write the XHTML once and publish everywhere (or, use another output method…)
Opera is available for many systems, including Mac.
Opera has indeed very nice funtionality for presentations. It has support for the most optimal CSS media type for that, “presentation”, like mentioned above.
You should try it when you find time.
I’m playing with Opera now. Though I can’t figure out how to use accesskeys in Opera, and can’t find much documentation on their site about them, even in their Accessibility section.
It appears I need to “toggle on” accesskeys with Shift-Esc each time I want to use them, (they reset back to OFF when each new page loads) which would be very inconvenient, and a deal-killer for me.
As Chris said, I’ve been trying to implement a web developer plugin for the new Saft sidebar, but apart from window resizing, most don’t work. There doesn’t seem to be a way of targeting the main window. Hao is looking it it.
Even window-resizing bookmarklets seem to behave strangely in Safari. Sometimes it seems the entire window (browser chrome and all — or is it aluminium for Safari?) and the page’s content needs to redraw just to alter the window size. That doesn’t seem right.
But I’m getting off-topic here.
Back to Safari and other browsers as presentation tools…
The one thing for Safari I’d like to see, and this may be viewed as risque, is a version that will run in something other than OS X. Specificaly a Windows or Linux version.
Since I have to use WIndows at work and have only recently even thought about getting a Mac, for which my budget doesn’t really stretch. I have to just hope the sites I’m working on will work in Safari. I’m trying to get my work to spring for a development Mac I can use for testing but holding my breath on this isn’t very likely.
Currently I have 3 versions of IE, 2 versions of Mozilla, 2 versions of Opera, e-links and lynx to hand. I’m pretty sure I can’t be the only person in the situation.
I love Girder with my remote controls. I’ve three hooked up to my computer, none of the remotes are programmable, but Girder can accept and program their signals anyway. Only problem is that it’s for Windows :/ There might be something similar out there for Mac or Linux though, I haven’t looked.
If you haven’t got a Mac and want to see how its HTML rendering works, Konqueror running under Linux is closest. Apple used its open-source KHTML rendering engine for Safari and have put many Safari enhancements back into the KHTML project. The result is that Konqueror under Linux is a lot slicker and more polished than it was.
However, Konquerer is not identical to Safari and you cannot assume that pages will behave identically in the two browsers.
For those interested in running Safari on non OS X desktops, you might want to look into the KDE desktop on Linux and Windows. Safari uses KHTML, the page rendering engine from the Konqueror browser that ships with KDE.
A little googling can help with finding how to run Konqueror on Windows. On Linux it’s flat out simple. Just install KDE. Hope this helps a little.
Like Louis (#13), I use Girder too. In combination with an Ati Remote Wonder R/F remote to be exact. Works like a charm.
The problem with Konqueror, which I do use a bit, is that to upgrade it I have to upgrade KDE which is a pain in the back side quite frankly. I tend to be quite busy so such things get prioritied quite low.
Plus… it has a tendency to crash for vaguely unspecified reasons and have really annoying javascript bugs. But as people have said ‘Konquerer is not identical to Safari’ so I generally hope Safari does a better job.
And I don’t have access to a GUI Linux environment at work being stuck in Windows so it means testing pages at home, joy.
But I might look at trying to get Konqueror installed on this box, IT will just love that.
Doug,
In Opera, if you use presentation mode, you put your entire presentation in one HTML file, with CSS to page-break-after an H2, or whatever element (or class) you like. Thus, there is no page-reloading, because you’re just skipping to a new section in the same document.
Tim: My presentation is in one HTML file. That’s the beauty of it. Except that since I wrote some PHP to parse it into individual slides, I can do all kinds of other things too, like auto-generate an index of all the slides in the presentation, so I can easily navigate to any slide by its title with just two clicks.
I’ll admit, Opera’s ability to obey page-breaks is slick. But the way I’m doing things now, I also have control of how my presentations display in other browsers too, and am not requiring anyone from the audience to use Opera to view my presentations after the fact.
I’m also still slightly disappointed with Opera’s handling of CSS. Small, strange bugs appear every now and then. Like the way it only allows a certain amount of
text-indent, then it just stops and says, no more.All this presentation talk is getting me fired up for User Experience Week. See you there.
looking forward to the presentation scripts! coming soon, I hope :) thanks, Doug!
It’s true that only Opera supporting the projection media type may be a reason not to it (type projection, not Opera). But you still have control over how other browsers view your content, you just need seperate style sheets. That is to say, there’s nothing stopping people from viewing your presentation afterwards without Opera, they just won’t be able to view it as a presentation, and of course, I can see where that could be a problem. And of course doing lots of fancy stuff with PHP is fun too.
As for CSS, I don’t understand your problem with text-indent, but every browser has plenty of little quirks. Opera’s probably seem to stand out more if you aren’t used to them, but it really has no more CSS problems than the other browsers.
And I agree the esc-shift thing is indeed unfortunate if you use accesskeys, but you can set your own keyboard shortcut to turn on accesskeys, which helps a little. Also there are enough other accessibity features in Opera for keyboard users (e.g. spatial navigation[shift+arrow keys], for one) that I’d let it slide a bit in this department.
Anyway that is enough Opera raving from me.
While I have nothing to add as far as presentations go I can speak highly of the Keyspan Digital Media Remote. I’ve had mine for 3 years when it was originally purchased to allow me to control the DVD player and iTunes of my Graphite Clamshell iBook hooked up to my TV. Worked great. I’ve had little use of it recently but I have used it under OS 9.x and OS 10.x and it works great. Yes, it does use IR but it comes with a USB IR receiver that you plug it. It’s indented in the middle so that it can be placed on the top of the monitor of a laptop computer. Every key on it can be programmed for any application. And as noted it’s price can’t be beat. Good luck.
Opera can also toggle styles on and off via a toolbar button. I guess you could add a key to do this when in full-screen mode, though of course it would then drop out of said mode! (I think?)
The beauty of Opera’s approach is that you can have the projection stylesheet in the same file as a normal stylesheet. So infact it acts like a ‘secret’ stylesheet that’s only visible when you press F11. In theory you can then have two completely different stylings of the same page. If you add generated content to the mix, then the full-screen version can even have different text.
For the ones that only has access to Windows in their offices, i think you could try the Knoppix live-cd or one of the others Linux LiveCD distros out there to view a site in KDE/Konqueror as stated above.
This live-cds boot in almost any PC hardware and detects network and everything. This means you won’t need to install a single byte of software and could view your site almost like in Safari.
Chris Hester:
Opera can also toggle styles on and off via a toolbar button. I guess you could add a key to do this when in full-screen mode, though of course it would then drop out of said mode! (I think?)
“STRG+G” toggles Stylesheets. And No, Opera will not drop out of fullscreen mode
I use Keyspan’s remote, and I’ve thoroughly enjoyed it. Can’t say I’ve used it much in a browser, though, mostly presentationware.
Douglas, if you don’t do anything else, pla-leeese put the ‘next’ button at the top of the pages instead of the bottom. That way, when you post it online for the *rest* of us to view, I can keep my mouse pointer in one spot while clicking through the presentation, rather than jumping up and down the page and the page content height changes.
I know, picky. Shoot me.
Am I missing something here? I have a 12” PowerBook with Apple wireless keyboard and mouse. On the rare occasions that I do presentations with my talks, I just take all three pieces… I don’t understand why no one’s suggesting that. Keyboard and mouse *are* more expensive than the other things, but give complete range of control and are useful in many more situations.
Conrad: you’re certainly missing something. Remember, I said I wanted to “step away from my laptop once in a while”. I’m certainly not going to strap a keyboard around my neck like an eighties glam band. Or maybe you expect me to use one of those trays like the popcorn guys at the ball park so I can fit both keyboard and mouse on it. Either one would be kinda funny.
So who wants to create some attachments so I can use a Fender strap with an Apple keyboard? ;-)
I can understand a mouse. But why bring along a keyboard when you’re travelling anyway? Doesn’t that kind of defeat the purpose of having a small, compact laptop?
Doug,
You might be able to achieve what you desire with the mobile phone and bluetooth.
check out:
http://homepage.mac.com/jonassalling/Shareware/Clicker/index.html
I’ve seen a presentation where a guy was clicking through keynote with his mobile. Seemed to work well for him. I assume it would integrate in to Safari.
Hi Doug!
I just installed Salling Clicker and kinda got inspired by your problem, so I created a script that lets you control accesskeys 1-9 in Safari from your phone keypad (I use a Nokia 7650) plus back and forward buttons from your joystick.
Feel free to try it out: http://popkick.net/archives/2004/August/11/safari_accesskeys_in.html
The script is certainly extendable, anything that has a kayboard shortcut can be controlled. Let me know how it works for you!
Hi Doug.
If you can wait a short while, Opera should be coming out with stuff that’ll take voice commands. I honestly don’t know what you could tell it to do, but it should be interesting to tell your laptop across the room, “Change slides already!”. ;^)
For all looking to be able to run Konquerer in Windows:
Try Cygwin…
I’m currently trying to get Konquerer running under windows using this. Its looking good because I believe it is possible to run the app so that it looks stand alone rather than window in window, possibly from a single shortcut.
I expect it to be dog slow and useless for day to day use but it will be interesting none the less.
For all of you needing to html code cross platform and don’t have the money to buy all the needed hardware, there’s always these realy nifty browser photo online services.
You submit a url and they do screenshots for you in various different browsers.
For me most of the time this is sufficient to spot odd display bugs in some browsers.
I use since i hate having to multi-boot different versions of Windows just to check all the IE Win Versions. Besides that i am working 100% on a may anyway - so browserphoto helps me to keep an oly windows laptop as far a way from me as possible…
oops, this system just swallowed the url i had in my comment.
Should have been i use: browserphoto.com
Ok. Thanks for the feedback about running Konqueror in Windows. Great. Except if I want to use Konqueror I can do it on my home machine in Linux. But as has been pointed out Konqueror and Safari are not the same thing and Konqeror lags behind.
Oh and upgrading KDE is not the most fun of expriences.
Browser photo looks nice but it’s not particularly cheap, $150 per domain per year? So that’d be me having to shell out $1.5K per year for testing. Maybe I could use it as an excuse to get my boss to buy me a Mac…
But thanks for the thoughts folks. As I’m currently working hard just trying to convince people we sohuld move away from table based layout holding my breath for any major changes here is not something I’m going to be doing.
Hi again, Douglas; I keep the keyboard on the podium but the mouse in my hand, because I do walk around…. But I can see how the mouse control would be hard if you’re not just using Keynote… Oh well…
Try PC Control 4.
In conjuction with a SonyEricsson K700, you can create customized HID files that lets you build the desired keymap and display picture on you K700 for specific remote control commands.
Out of the box the K700 has HID files for Desktop (eg Windows), Mediaplayer & Presenter (eg Powerpoint) if I remember correctly.
There is a “Developers’ Guidelines: Bluetooth HID Remote Control” that tells you how it works in greater detail and how to build your own HID files.
//Lucke
@Simon Proctor - why not try a copy of VMware (or virtual PC if you are a Mac user)? You can then boot into different OS’s without rebooting if you have lots of RAM.
Another thing to try is http://www.insert-title.com/web_design/?page=articles/dev/multi_IE_B
As for the remote control, you could use a bluetooth keyboard if you didn’t want to use your phone. The only thing is that it’s a just a *tad* more bulky. If you’re on a Mac this would work out of the box (Unlike Windows as it needs loads of bloated drivers to make Bluetooth work)
— Jason
I am using a bluetooth telephone with salling clicker as a remote for Keynote presentations and being able to move freely is a huge asset in a presentation.
Salling clicker is fully customisable so with Johan script as a basis you should get along fine.
One thing to keep in mind : Keep it simple !
Cellphones have a bunch of keys and we are tempted to get the most out of it, but nothing is more annoying that not hitting the right key or having to look for it.
Comments no longer open for this entry.