UPDATE: Check out the Simple HTML Slides project page for more information.
Powerpoint, and to a lesser extent Apple’s Keynote, have a vise-like grip on the psyche of a huge percentage of the computer users on the planet. In business, government and education it’s difficult to get through the day without encountering at least one Powerpoint presentation, and we’ve all faced the dreaded “Death by Powerpoint” decks of a hundred slides crammed with 8 point type.
Sites like EducationWorld.com are chock-full of articles written by educators showing teachers how to integrate Powerpoint into the curriculum. Alas, many teachers and curriculum directors think teaching students how to use Powerpoint is an important part of “teaching 21st century technology skills,” while teaching the fundamentals of open web technologies gets almost no attention.
With Firefox 4, and the other modern standards-based browsers, we have an opportunity to create not just compelling web sites, but apps, games and utilities. Figuring out how to obsolete Powerpoint with an open, connected presentation tool would show the world that browsers can do much more than just render Facebook pages.
Simple HTML Slides
I’ve just started an experiment aimed in that direction. It is far from being a “Powerpoint killer”. That would require the efforts of community members with far better code cutting skills than mine. Rather, this is an exercise in thinking through what it might take to get a toe-hold in the mindshare of current Powerpoint and Keynote users.
Here’s my guess at the minimum requirements:
- Simple: It must be very simple to use. Expecting a middle-school student, a high-school teacher, or a corporate marketing executive to master javascript library loading dependencies and CSS element float peculiarities while trying to create a presentation that’s due tomorrow is a clear non-starter. We need a tool for office workers, young students, and teachers, not one that assumes webmaster ninja skills.
- Tidy: It must provide reasonably nice looking presentations without requiring graphic design skills on the part of the user. Just as CSS separates the presentation from the content of HTML, we need a way to allow users to concentrate on the content while writing their presentations.
- Enticing: It needs a “hook” to entice existing Powerpoint and Keynote users to give it a try.
Inspired by Atul Varma’s Magic Ink blog post and his htmlpad slides, I’ve hacked-up a first cut. It uses Janne Aukia’s wonderful Zoomooz.js jQuery plugin. I encourage everyone to play with Simple HTML Slides and then remix the code and the ideas to make them better.
UPDATE: Version 1.2 of the Simple HTML Slides sync controller includes support for converted PDF slide decks. See Turn PDF Slide Decks into HTML5 Web Presentations in Under 5 Minutes
Here’s how the prototype addresses the requirements above:
- Simple: It moves the javascript and almost all of the CSS out of the HTML file that contains the presentation itself. A heavily commented HTML file containing a set of slide examples shows how easy it is to write a presentation. Users need only understand how to use the <div> tag and apply a few pre-defined CSS classes.
- Tidy: Javascript manipulation of the CSS deals with the issue of separating slide titles from slide body content. The prototype includes ten different slide design “themes”. Users can switch between them with a single keystroke. In addition, all of the theme definitions are contained in a single CSS file. Designers with better skills than mine can replace the theme designs by substituting their own slide-themes.css file without needing to change (or understand) any of the javascript or any of the other CSS.
- Enticing:The solution includes an anonymous slide synchronizing server. Users anywhere in the world can see a synchronized slide presentation simply by browsing to the presentation URL. No screen sharing software required. The presentation need not be hosted on the slide-sync server. The synchronization server sees only the control commands and an MD5 hash of the URL. Neither the presentation URL nor the contents of the presentation are ever sent to the slide-sync server. The slide-sync server is open source, so you can choose to run your own.As a bonus, this works on mobile devices like the iPhone, and iPod Touch that have modern browsers, so you can use your phone as a remote when presenting in front of a group.
This is just one approach to replacing Powerpoint with standards-based open web technologies. Please think of a better one, or remix this one, and share it with the community.
UPDATE: Tomer Cohen pointed out that HTML5 ninja Paul Roget has a nice HTML5/CSS3 slide implementation.
; ?>/wp-content/themes/header_images/CC-BY-SA88x31.png)
Copyright © 2008-2013 Richard A. Milewski
check this out!!!!!!!!!
http://www.digitalofficepro.com/powerpoint/powerpoint-to-html5-converter.html
Also, you may want to look into W3C Slidy. It is based on s5 I guess but seems to be well maintained. According to their plans written on the page, they are working on adding ajax-based remote control to the presentation engine. It doesn’t feature any effects between slides, but some people may prefer it that way.
http://www.w3.org/Talks/Tools/Slidy2/
It looks really promising, but we won’t be able to push this for use with lecture materials until there is a robust way to print the result out to paper (many students still rely on this).
I made a preliminary pass at creating a CSS stylesheet for print, but with pretty poor results. Until browsers start to support
page-break-inside: avoid;and other print-specific CSS, I don’t think there’s much hope.MDC lists page-break-inside as “unimplemented”, and my tests with Safari also fail to force the page breaks to happen between slides.
Chrome just says “Aw Snap!” and doesn’t even try to render for print.
Seconding the timesheet container method. Simplistic elegance
http://labs.kompozer.net/timesheets/slideshow.html
Perhaps it’s worth combining efforts for their “Timesheet Editor, i.e. a wysiwyg, Mozilla-based, multimedia page authoring tool” by building an extension for http://bluegriffon.org/
A BlueGriffon add-on would be cool, but I really think integrating a Skywriter (aka Bespin) editor would give more control over keeping the interface VERY simple. Remember, were trying to seduce non-coders into starting to write HTML.
There is another solution: export Powerpoint to HTML5. So users can enjoy comfort of Powerpoint while able to share with the (Apple) world. Visit http://www.slidego.com to try yourself.
But that sort of misses the point. The goal is to create a good enough tool so that people will start to use Open Web technologies instead of proprietary apps (where it’s appropriate).
Teaching students how to use Open Web technologies enables them to do many more things than presentations. Teaching them Powerpoint teaches them how to use Powerpoint.
…and there isn’t any synchronization in the output from Slidego.com, is there?
Missing the point? Yes and no. I’m talking about having an authoring tool to build web content easily and nicely (with all the bells and whistles of HTML5). It will take some time before good web tools catching up. Meanwhile many users already know how to use Powerpoint and own it.
As said it does not currently target presentation so no synchonization provided. But it is not difficult to do since the output is already HTML.
My primary goal for starting this project was to give people a reason to learn HTML rather than learn a proprietary interface. I suppose there’s a case to be made that people can learn from seeing the output of a Powerpoint-to-HTML conversion, but only if the output is cleaner and simpler than most machine-generated code. Note that I haven’t studied the output from Slidego.com, so it might well meet that criterion.
But… if we encourage people to reach for Powerpoint first, we’ll loose the long-term battle.
You’re right Richard. This is first step, simulate what Powetpoint can do with HTML5/CSS3. Next step is to make those HTML editable.
Update: SlideGo.com is now an online HTML5/CSS3 presentation editor,so previous statements on Powerpoint are obsolete.
In SeaMonkey 2.1b1 I saw the slide show the first time, but the second time I saw nothing until I reloaded.
How is this different from meyerweb.com’s S5?
I love the feel of walking down the slide deck, but some might prefer not to see the top of the next slide. Using Home/End for begin and end seems like an easy change to s5_control.js.
It would be nice for bookmarking and history if it updated the fragment identifier for the slide you’re on, i.e. https://s5.mozillalabs.com/slides/SlideExamples.html#4
I suspect the need for a reload is the result of the same javascript loading confusion that’s breaking it on Firefox 4b7 under Win7. I’m still a javascript neophyte.
It’s actually totally unrelated to the meyerweb.com s5, the name collision was pure coincidence. I do plan to study what he did, as well as the other links to similar projects mentioned in the other comments here.
I think there needs to be a version with other kinds of slide-to-slide transitions. That’s probably a ground up rewrite of the local control javascript, but it will likely work with the same slide sync server. This version was the result of wanting to do something real with the Zoomooz.js jQuery plug-in. With the current set-up not showing the next slide would make it impossible (or at least difficult to change slides with the mouse.
I like the fragment identifier suggestion! I’ll have to think about how to do that. The slide div ids get set by the javascript now, so adding anchors shouldn’t be too hard.
I did a similar experiment to learn about node. See http://da.no.de:3000/ for a demo site, and http://github.com/davidascher/persuasion for the code.
It does have bespin integration, some keyboard nav, etc. Rip & remix.
Thanks David! I’ll take a look at how you implemented Bespin. I think my problems stem from all the zooming, and rather naive keystroke handling on my part.
I think you might be interested by my Shower presentation template: see live demo and project on GitHub for details.
You do not know HTML Timing ??????
http://labs.kompozer.net/timesheets
Very nice! It looks like SMIL/Timesheets will also help with implementing the slide build feature. Thank you!
I would be very carefull with using the words “death by powerpoint”.
However I fully agree with creating something like this.
Remember you can also use CSS-transitions and backgrounds with rgba.
Many of the pre-defined slide themes use backgrounds with hsla gradients. Hsl colors are easier for most people to change than rgb. #2030DF and hsl(235,75%,50%) are the same color. I know that I can get a lighter version of that color by increasing the L value, e.g. hsl(235,75%,55%). But without some sort of external tool, it’s hard to figure out that I need to change the rgb value to #3645E2 to get the same effect.
[...] This post was mentioned on Twitter by Planet Mozilla and SolarisMine, Web Design Magazine. Web Design Magazine said: HTML5/CSS3 – On Beyond Powerpoint… « Shiny Pebbles… http://bit.ly/gYPCaZ #webdesign [...]
I like the enticing part!
Three questions still remain for me:
1. Does it work in IE6?
2. Is there a wysiwyg way of creating slides this way?
3. How does one upload it? (To get an url where everybody can watch synchronised)
Let me answer in reverse order:
3: You just save your slide file on any web server. The javascript linked in the examples will connect you to an anonymous slide-sync server. Read through the slides… all will be revealed!
2: There’s not yet a wysiwyg editor, and it will be a while before the project gets to that stage.
1: No, it won’t work with IE6, and it never will …and you shouldn’t be using IE6, it has some serious security issues. Try the Firefox 4 beta!
Sadly it doesn’t seem to work with any version of IE, including the pre-release versions of IE9 that I’ve tried. That’s a problem that needs work.
There’s also currently a problem with Opera, but I have more hope that will be easy to fix.
3 & 2: Along with a wysiwyg editor, how can we expect powerpoint to be replaced without an integrated uploader with dropbox-like ease?
[We don't expect the project to be at this stage yet, but it needs to be on the road-map to become better than powerpoint]
1: I might be using Minefield (the Firefox 4 Nightlies), but if I’d like to present at a corporate client, who happens to have only IE…
This was really intended to be a discussion starter rather than an actual prototype for a Powerpoint replacement.
As far as IE is concerned, supporting IE9 is one thing. Tolerating the continued use of IE6 is quite another. I know that there are corporate, government, and education IT shops that lock everything down and insist their users use IE6. But that’s a security risk for the organizations and it cripples the ability of their workforce to use modern web technologies.
Simple HTML slides runs fine on Firefox 3.6.12, and that version of Firefox works on all versions of Windows back to at least Windows 2000. …and it’s far more secure than IE6.
Hi,
it shows an empty page for me: Firefox 4.0b7 Windows 7
Thanks, I’ll dig into that! I’ve tested on FF 4.0b7 under MacOS, and that works.
Have a look at S5 ( http://meyerweb.com/eric/tools/s5/ )
This dates back a bit, but can be usefull.
Thanks! Looks interesting. What’s funny is that when I started this project I was calling it s5. In my case it stood for “Simple Silent Slide Syncronization Server”. s5.php is still the name of the sync server.
Is there supposed to be a live demo? I get nothing but a blank screen when visiting https://s5.mozillalabs.com/slides/
Which OS are you running? I’ve had another report of 4b7 showing a blank screen on Windows. 4b7 works for me on MacOS. I’ll dig into it later today.
I’m on windows 7 with latest nightly builds of Firefox.
I’m also seeing a blank white page in the latest Minefield nightly build, running on Windows 7 (x64). The web console shows the following error messages (truncated for readability):
jQuery is not defined Source File: http://s5.mozillalabs.com/slides/js/jquery-impromptu.3.1.min.js Line: 13
jQuery is not defined Source File: http://s5.mozillalabs.com/slides/js/jquery.zoomooz.js Line: 596
jQuery is not defined Source File: http://s5.mozillalabs.com/slides/js/jquery.doubletap.js Line: 45
jQuery is not defined Source File: http://s5.mozillalabs.com/slides/js/jquery.touchwipe.min.js Line: 8
jQuery is not defined Source File: http://s5.mozillalabs.com/slides/js/s5_control.js Line: 76
The console does show “http://s5.mozillalabs.com/slides/js/jquery-1.4.2.js” downloading with a non-zero size and there are no parse errors reported for that file, but I guess “var jQuery = …” gets skipped.
That’s as far as I got before I remembered that I was at work and have a ton of stuff to do…
I was getting exactly that message consistently in Safari before I added in the LAB.js loader to try to manage all of the javascript dependencies. Sounds like I may not have done that correctly. Any suggestions for a good solid tutorial on managing javascript dependencies?
This is probably a fallout from bug 591981. You can read more about the changes in this post by Henri Sivonen. It apparently causes pages using LABjs to not work.
Thanks Petter! I’ve switched to LABjs 1.0.4 which Henri’s post suggests should resolve the issue. Works for me with the FF4 nightly on MacOS. And Asa has reported the change fixed it for him on the FF4 nightly on Windows 7.