Hands on: Office on the web

More basic Javascript, plus some Office tips for web developers and designers

One of our correspondents, Paul Cooper, asked about the pros and cons of writing websites using Microsoft Office tools, such as Word and Excel, after a friend of his said that Office introduces lots of unnecessary elements into your code.

Office bloat
To an extent, that’s true. You can simply save a file as a web page from Word’s file menu. The file opens and displays in the browser, and looks pretty much identical to the Word document. So far, so good. But count the characters and check the properties of the HTML file, and you may well see the text accounts for only a small amount of the size of the file.

Of course there’s always some bloat with HTML, since the tags themselves can be verbose, and you could dispense with style sheets completely and just use a couple of heading styles, and one paragraph style. Even so, it’s clear that what Word produces is not the most compact way of doing things.

To find out why, it’s worth taking a look at the source of the web page that Word produces. First, you’ll see references to the Microsoft Office XML schema, followed by tags telling you which version of Word was used. Then there’s a chunk of XML that contains the document properties, as set via Word’s File menu.

Additionally the author, as set up in your Word installation, will be added – so if you’re writing a critical web page that you intend to post anonymously, don’t use Word without checking the code later to make sure your identity isn’t revealed to all and sundry.

Following the description of the document, there are details about the template used to create it, and then a CSS-style sheet that includes all the font and style definitions used in the document before, finally, the actual text of the web page.

As I’ve mentioned before, there are sound reasons for using CSS in your web pages – it makes them easy to manage. But they can also be verbose and the inclusion of all the styles, even if only a couple are in use, makes the Word-created web page much longer than it needed to be.

For a simple site, you probably don’t need to worry too much about this, but if you start adding multiple pages, you’ll end up with a lot of information duplicated, because Word keeps the style information embedded. With other web-editing tools, such as Dreamweaver, you can easily link to an external stylesheet, where all the information is in a separate file.

That has two advantages; first, it’s only loaded once by the browser, and all the individual pages can be smaller, so your site has to send less data. And second, if you want to give your site a makeover – new corporate colours, perhaps, or a seasonal theme – you just need to change the single stylesheet file, and all the pages that refer to it will update.

Other Office HTML quirks
Compactness isn’t the only reason to use tools other than Microsoft Office for more complex websites. If you turn pages that have pictures in them into web documents, Word will deal with all the pictures for you, creating a folder for each page's images. You can upload them all easily enough but it might not be the way you want to organise your website.

For instance, when I’m doing a site, I tend to group all the images – say product images – into one folder. Then, if I had a set of new pictures, perhaps for Christmas, with products covered in snow, I could just upload them all into the same folder. If Word has created a folder of images for each individual product, it’s potentially going to be a lot fiddlier to sort out, instead of one batch upload.

Word is not the only part of Office that can save as HTML. Excel can do it too, and you’ll often encounter tables on the web that have been created by choosing the ‘Save as a web page' option.

And sometimes they can be utterly confusing; not only is there the same privacy issue as with Word, and the extra information, but one site I regularly look at used to show up another Office flaw well – an Excel spreadsheet listing features of competing products is saved as a web page, and ticks or crosses appear in columns to indicate whether a particular product has a feature.

It all looks great in Excel, and great if you’re a PC user with Internet Explorer; but look at it from a Mac, or some other browsers, and instead of easy-to-understand symbols, you end up with characters of the alphabet that shed absolutely no light on what the table was supposed to tell people in the first place.

So, especially if you’re using odd symbols, it’s always worth checking out what an Office-generated web page will look like on a Mac as well as a PC – and if it’s something you can’t change easily, such as a complicated spreadsheet, then you might want to consider turning it into a PDF that can be downloaded rather than a standalone web page.

None of this, of course, suggests you should never use Office to make web pages. But it’s better suited to quick, simple tasks, rather than bigger, more complicated sites.

How to create your own Javascript pop-ups
A lot of people find pop-ups annoying, and their indiscriminate use is certainly irritating, but they can also have their place – highlighting new features on a site perhaps, or important news. On one of my sites, I used a pop-up to promote a new site-wide search feature, with an image that, when clicked, opened the search page in a new window and closed the pop-up at the same time.

The pop-up box itself is just a simple HTML file, with the image centred and a link to the target page, with an extra bit of Javascript to close the pop-up too – ‘self.close’ does pretty much what you’d expect the command to do:

<a href=”http://mysite.
somewhere.else/
search.php” target=”_blank”
onClick=”self.close()”>
<img src=”images/
searchreminder.png”
alt=”Search this site” width=”200”
height=”150” border=”0”>
</a>

So, how about making the message pop up in the first place? We need two things – a Javascript function that will open a new window and a call to it. And since we want the pop-up to appear when the body of our web page loads, we specify it in the BODY tag, like this:

<body onLoad=
”noticeWindow()”>

where noticeWindow is the name we’ll give to the function we write to pop up the window. That can either be in the main web file, as inline Javascript, or if you want to refer to it from other pages, you might include it, for example via PHP like this:

<?php include
(‘sitefunctions.js’); ?>
The actual Javascript looks like this:
<script language=
”JavaScript” type=
”text/javascript”>

function noticeWindow() {

noticeWindow = window.open(‘http://
mysite.somewhere.else/
reminder.html’,
’reminder
Window’,’toolbar=no,location=no,
directories=no,status=no,
menubar=no,
scollbars=no,
resizable=no,copyhistory=no,
width=250,
height=200’);

}

</script>

Not all the options to the window.open command are necessary – we’ve chosen to cut down on clutter such as scroll bars, and specified a size that fits well with the image we’re using.

The second parameter, ‘reminderWindow’ is the name that can be used as an HTML target, for example in links, to open a new document in this pop-up, while the variable ‘noticeWindow’ is the reference that Javascript can use if, for example, it wants to close the window, or add information.

Although we’ve listed a lot of parameters, they’re more for information so you can see what’s possible – by default, a new window will have all the same settings you’d get if you chose ‘New window’ from the browser’s menus, but if you set any option, such as size, then all the others are automatically turned off, unless you choose to turn them on.

Finally, if you have a pop-up with a lot of information in it, the user might have had to scroll, so how about adding a link at the bottom to close the window, so they don’t have to move the mouse back up to the top? That’s straightforward too. You can use a bit of code like this – the duplication ensures it should work in all browsers, since not all understand the ‘javascript:’ way of invoking a function:

<a href=”javascript:self.close()”
onClick=”javascript:self.close()”>
Click here to close window
</a>

If you wanted to be more clever, you could call a different function instead, perhaps setting a cookie, with link text along the lines of ‘Don’t display for 7 days’ and then in your original page, check the cookie to decide whether or not to display the pop-up. We’ll look at that next time.