My authoring practice for stories with pictures authored in word.

Jon Schull's Weblog

JS Weblog Home

recent bio

JS on one page

email

My authoring practice for stories with pictures authored in word.

I've become quite facile and dependent on MSWord, Excel, and Outlook whose wysiwig editing, and outlining, drawing and image handling tools are quite powerful.

The problem is that the HTML these things produce is very complicated, unclean and brittle.

So I use Word as a convenient prototyping tool, and a good project organizer This document was produced using the work process described.

Here are a few conceptual prophylactics.

You can paste images right into Word, add drawn annotatons etc.

When you save a document as HTML word creates nice, cropped jpgs from these images (good) along with brittle code for reassembling them (bad)

You are authoring locally (on your own hard drive)

But the stories you create must link to images on the Radio Web Server (online, "in the cloud")

So what we do is...

create a master file in word,

use it to create HTML and jpgs,

pluck clean text out of word,

grab clean jpgs from the directory Word puts them in

use the master file as a visual "guide" as we use the clean ingredients to create a Radio Story the way radio wants it

using the wysiwig editor

and the "upstream, then link", procedure for handling graphics recommended by Russ Lipton

And of course, check and recheck the result

My illustrated guide follows. (This is how I learn. Perhaps it will be useful to you too.)

Dummy up your document as an HTML file in word:

Create document with approximate desired layout in word.
(Don’t go beyond approximate because you’ll be re-doing the layout.)
SaveAs HTM so images will be saved in a folder containing the relevant images in a uniform and compressed form.
Pasting images (even bmps) right into word and cropping them in word seems to be safe and Word does a good job of compressing and converting.

Here’s a cropped version of the same screen shot.

What word does with images

Word creates a folder called filename_files for the images and saves several versions of the images.

Here is a screen shot of thumbnails.
(Files.xml and Thumbs.db are hidden files created by explorer)

Here is a screen shot of file sizes.

What this shows

Although the image was pasted into word as a jpg (I believe), Word stores it internally as a png (png is a lossless format). It also stores jpgs derived from that png as they are to be rendered. The jpgs are actually going to be spliced into the HTML. The pngs will end up being vestigial but I wouldn’t get rid of them until the very liast minute (if then). Everytime you save, Word regenerates these images.

(See: I resaved and now the two images above have been included)

Create a CLEAN HTML document...

... using radio from the pictures in the _files directory and from PLAINTEXT DERIVED from the word document.

Background explanation of something confusing

Words HTML files are very over-produced in order to mimic the look of the word document. Don’t be seduced!

(Here’s what’s seductive.)

Word does a damn good job of producing HTML that IE can render wordishly and even creates jpgs the balloons I created working within Word. (We’re looking at Internet Explorer here.). This involves all sorts of brittle magic. For example, it turns out the balloons are stored as separate jpgs which are then positioned at rendering time by IE as guided by very elaborate HTML code generated by Word.

If you understand this, you can make screen shots of the composites for use in your ultimate HTML, but this gets very confusing.

(In my copy of word this is a single image, whereas the previous facsimile is a composite).

An easy and safe way to create clean HTML ...

...is to paste the wysiwig text from word or IE into a text editor, such as notepad. (Do NOT paste the text from word or IE directly into radio’s wysiwig editor. You will have failed to purge the evil rococo HTML)
This is plain text, purged of all formatting and images.

Paste this into Radio’s nice little wysiwig editor

(which generates simple radio-friendly HTML) and re-do the layouting. (Don’t say I didn’t warn you.)
You’ll reinsert the pictures after you’ve upstreamed them to the Radio Web Server in the sky).

Here’s how I’m doing this
Create a new story in Radio.
Paste the raw text (from notepad) into the wysiwig editor.
Create a folder in your local www directory to contain the images you want (e.g., “pix”, in the same directory as your story.)
First pass

Do a rough reformatting of your story. In each location that a figure is going to go, use this as an opportunity to
1) look back at your Word document to see what you intended.
look into the _files directory and find the smallest jpg that embodies your intention.
Copy the file into your “pix” directory. It will upstream in due course
2) Into your Wysiwig editor write something like <insert filename.jpg here>

Second pass
Go back through your document in the wysiwig editor using Russ’s procedure to paste and format images from the upstreamed images on the radio server.

Post and publish.

Your story will be upstreamed.
Check your story online.