Assuming that you have read the backstory to this project, you will know what we were trying to do (basically: Convert an inaccessible Powerpoint presentation to accessible web pages).
The original document was in PowerPoint (PP). PP documents only work if you have Powerpoint or the Powerpoint viewer installed. The viewer is not available for all operating systems, and many folks using Windows do not even know that it exists. PP is not very accessible, however, Powerpoint is the de facto standard and if you make presentations, very often folks will expect/require it.
The original size of the PowerPoint presentation was 94KB.
PP includes a so-called feature to turn presentations into web pages (HTML). However the web pages that it creates are horribly bloated, use code that can only be read in Internet Explorer, and requires the use of JavaScript and Frames.
The orignal output would not work on a number of browsers, including Mozilla (the most standards-compliant browser in the world) and Opera (a close second). It was incompatible with screen readers and text-based browsers. These limitations were due to the poor job of PowerPoint creating web pages.
The full size of the HTML and associated files made by PowerPoint’s Export to HTML feature was 449KB (over 4 times the size of the original PowerPoint document).
A true conversion was not complicated, but slightly time-consuming:
Note that the main XHTML document (step 2 above) is used for both the single page view and the OperaShow presentation. This is one example of the power of CSS. The ability to make a separate CSS document for Projection is a huge advantage, only available via Opera.
The finished document is also accessible to any web browser including Lynx (text only) and Netscape 4 (unstyled, however).
The full size of the XHTML 1.0 strict, plus associated CSS is 13.9KB — almost 1/7th the size of the original PowerPoint. It can be read on any computer that has a web browser.
In order to accomodate users who do not have Opera installed, a second version was created by parsing the single XHTML document into sub-documents (total size 64kb). This was not strictly necessary, but meant that we could have a “slideshow” version for any browser.
If you can use OperaShow for a presentation instead of PowerPoint, you can create a full accessible version of your presentation to be immediately placed on your website or distributed on a floppy disk to those in attendance. Those who receive the document will be guaranteed to be able to read the files, regardless of what kind of computer they have. It will even work on devices such as Palm or WindowsCE machines.
The resulting code is also easy to edit, fix, change, and update.
If you aren’t using Cascading Style Sheets, you are are really missing out on a lot. There is just a whole lot that you can do with it that is a) very cool and b) forward and backward-compatible.
For example, consider the side navigation bar. In old-school web design, that would have been a table, probably fixed width. It was also be “always there”. With CSS it can be placed at the literal end of the document, yet be visually placed at the top for GUI browsers. This is much better for screen readers and search engines. It also lets you write pages in a logical order. Nifty, eh?
The ability to define different styles for different displays is another huge advantage that we will be taking advantage of more in the future. Right now Opera is the only browser that gives us a way to take advantage of this functionality.
In most browsers, pressing F11 sends you into full screen mode. Big fat hairy deal. Who uses it? (Please, no emails telling me you use it, you’ll be the exception that proves the rule.)
Pressing F11 in Opera sends you into “OperaShow” mode. Using CSS allows you to either duplicate the styles used for regular screen display (Borrring!) or create entirely new styles more applicable for full screen mode.
They’re called “options” — you use them if you want to, and you ignore them if you don’t.
This is almost too easy... Part of me doesn’t want to share how easy it is so I can pretend to be some web-guru and continue to wow people with Opera’s abilities. Trying to explain can be boring if you aren’t a web-geek, so if you are trying to sell a customer on this idea, follow the sage advice offered by Zeldman, and Don’t sell. Show..
Here’s how we setup the show.
First, in the projection.css file, we put this line:
h1, h2 { page-break-before : always; }
This allows us to page up and down for each level 1 or level 2 heading. Great ideas don’t have to be complicated.
Second, we don’t want to see the left-hand navigation bar in Projection mode, so we added:
div#navigation { display: none; }
So when you go into OperaShow, the navigation bar disappears. Boom!
That radical little piece of code hides the navigation bar from showing up at all. Cool, eh?
Third, we wanted to get rid of the “Jump to Navigation” links, since they won’t serve any purpose in Projection mode. But rather than just make them disappear, we wanted to take advantage of some more CSS magic to add some footer information to Projection mode:
/* this makes the actual link itself disappear */
p.jump2nav a { display: none; }
/* This gives us text on the left side of the screen */
p.jump2nav:before {
font-style: italic;
font-weight: bold;
font-size: medium;
content: "Section 508 and Accessibility for Web Sites";
}
/* This gives us text on the right side of the screen */
p.jump2nav:after {
text-align: right;
display: block;
font-size: x-small;
content: "Copyright 2002: Molly E. Holzschlag,
for more information visit http://www.molly.com" ;
}
So rather than hard-code in the footer information to each panel (and then have to update it everywhere if you wanted to change anything) the information is kept in the CSS document, and can be modified once and instantly updated.
Note that we followed the design suggestion to present our main content first so users without CSS (including search engines, screen readers, and text-only browsers) would instantly be seeing the content (as opposed to a lengthly series of table of contents links).
Talking about this stuff is dry and boring. Showing it and understanding it is exciting. Realizing the savings of time and energy is profitable and beneficial in the long term. Go out and try it.