Family Cookbook: Can I Borrow A Cup of CSS?

Still a few things left to do before our cookbook project is cooked.

First thing is to get some Cascading Style Sheets (CSS) to give the cookbook some personality on the Web. As you probably guessed from the fact I’m using a canned WordPress theme, I’m not a web designer. But I want to be one when I grow up. I’ve read my share about CSS and played around with it, but never actually used it to build myself a real live website. The last public website that I built was with Adobe PageMill, and I think about 5 people saw it. I did make another with GoLive, but didn’t use CSS.

So I need some inspiration. Something to sweeten up the content. I’ll check some recipe websites and see if I can borrow any good presentation ideas from them. It’s like going to your neighbor and borrowing a cup of sugar. No need to be obscure, so I’ll check some sites like allrecipes.com, epicurious.com and foodtv.com.

Here’s an example from epicurious, which I’m sure is packed with wholesome nutrients, the Devil Dog Cake.

So, if I wanted to ape this style, how do I go about figuring it out?

I know of one indispensable tool for this job, and that is The Web Developer Add-on for Firefox by Chris Pederick. It is an absolute-must-have-go-get-it-now-you-won’t-regret-it kind of thing. If you are trying to learn web design this add-on is priceless, and incredibly it is free. By itself it is reason enough to use Firefox. The Web Developer Add-on allows you to reverse engineer a web page, by isolating every piece of the page, showing the code that styles it, letting you play with it, and save it. To quote Peter Griffin, it’s “friggin’ sweet.”

Saying all that, now I feel shamed into donating something to Chris. Maybe I’ll buy him something off his Amazon wishlist. I’ve got my eye on a Radiohead CD.

Loading the Web Developer Add-on in Firefox gives you twelve menus’ worth of choices to dissect and analyze every aspect of a page. Not surprisingly, we’re most interested in the CSS menu for now.

Choosing View CSS gives you a window with expandable listings of all the CSS a page uses.

With Show Style Information you hover over elements and they become outlined and you get a bread crumb trail showing you exactly where you are in the page model, including class and id info.

If you click, you get a new window pane with all the all the declarations that are making the selected object look the way it does.

And if you really want to play, or if you just like asking “what if” questions, you’ll get a kick out of Edit CSS. It opens a pane where you can change the CSS and instantly see the results. So if I wanted to see what it would look like with my recipe titles in bold red, I just go to the declaration, type in the change and voila.

What if you want to lift the color scheme from a page? No prob, go to the Information menu and pick View Color Information. You get a swatch list of every color used on the page.

You can validate the CSS code with the W3C’s Validation Service to find if there’s anything broken in there that needs fixing. On the Devil Dog Cake page, there’s a div that’s supposed to be gray, but it’s misspelled in the style sheet, “grey.”

One more toy to play with and that is the Edit HTML command in the Miscellaneous menu. This is the flip side of Edit CSS. Now you can change the content and see how the styles look applied to other stuff. I suggest these modest changes.

Now that we can shine an X-ray on any web page, we can find looks that we like and tweak them, preview our changes, and copy and paste the code into our own style sheets. Of course, we’ll also have to change the selectors to fit the structure we got out of InDesign and Dreamweaver. But now we’re really cooking. Mmmm, smell that code.

Family Cookbook 2.0, part 3

Has it been more than a week since we left off with the cookbook project? My how blog time flies. Let’s continue.

During the first two posts on this topic, we converted the old XPress file, and tagged the content in InDesign and exported it. Right now we have XML masquerading as HTML. Let’s open it in Dreamweaver.

First off, we’ll format the source code, so we can actually read it. We’re OK doing this because we aren’t taking this content back into InDesign. If we were, right now the robot from Lost in Space would be yelling, “Danger Will Robinson!” The problem is that Dreamweaver doesn’t give a hoot where it places the whitespace characters to format the code. They end up everywhere, including inside every element tag. So if we re-import this into InDesign we get…a huge mess.

Orginally, the title element of Richard’s Pancakes was very tidy with just one return in the right place.

clean XML in InDesign

Now, it has 4.

Nasty extra whitspace

Who left the bumbling Dr. Smith in charge of our content? Oh, the pain.

Happily, we’re on a one way street to the Web, where those whitespace characters won’t be as troublesome.

Start off by adding the some infrastructure at the top:

<!DOCTYPE HTML>
<html>

<head><link href=”cookbook.css” rel=”stylesheet” type=”text/css”>
</link> <title>Ethan’s Family Cookbook</title>
</head>

And wrap everything else in <body>

Then let’s get rid of the Story (capital S) elements, wrapped around the recipe cards, an artifact of those pesky inline frames. We’ll just Find/Replace with nothing, making sure to check “Case sensitive”, since we do have story, (lower case s) elements we want to keep: the chefs’ stories about their recipes.

Now we’ll replace all the names of the tags that came from InDesign style names with valid HTML tags, plus class declarations for hooking into CSS.

To give credit where credit is due, this idea is straight out of chapter 9 of A Designer’s Guide to Adobe InDesign and XML by James Maivald.

So the opening tag <group> gets replaced with <p class=”group”> and the closing </group> becomes plain old </p> Lather, rinse and repeat for <story>, <title>, <chef>, <ingredients>, and <step> elements. I’m also going to lively up the <div> around the recipe card, by adding class=”card” to distinguish it from the other <div>s.

clean code

Validate to check our work. And we get Dreamweaver’s idea of praise for our hard work: “Complete.” Nice. This is a program tossing compliments like manhole covers. How about, “Adequate.” or “Nice job, for a human.”

We preview in the browser, and things look cool with the exception of the degree symbols. So we’ll go back and replace all those with an entity.

Next time, some CSS to finish this sucker off.

Family Cookbook 2.0 continued

When we left off with our project, we had transmogrified the cookbook Quark file into InDesign, and a made few observations about the potential work needed to make it the apple of our cross-media eyes.

plish004-fritter.gif

Remember, what we (I) have to work with is Quark Xpress 4.11, InDesign CS3, Acrobat, and no scripting knowledge, Xtensions, Xcetera. At the finish we want to serve up our cookbook content in an nice HTML/CSS website, plus a new InDesign doc for print.

Before we start working in InDesign, just so you’ll never think I’m lazy (crazy, sure; lazy, no) here’s a list of alternate methods I explored for getting the content out of that old XPress file, and why I didn’t choose them.

The Roads Not Taken

1. Quark to ASCII: yields nice clean text, but no hooks to attach the XML tags to, and the text from the recipe cards gets left out since it’s not part of the main story.

2. Quark to XPress Tags: a little more interesting. Any time we hear the word “tags” our ears should prick up. It also gave me a reason to dust off David Blatner’s venerable Quark XPress 4 Book, and read the section on XPress Tags. His enthusiasm about them makes me feel like I missed out on something cool, well geek cool, since I never really used them before. Guess I’ll never know.

Quark’s tagging syntax is quite different from XML. It’s based on presentation and uses only opening tags. So we’d need to be clever about crafting a Find-and-Replace scheme. Before I read A Designer’s Guide to InDesign and XML, I would have just given up and moved on, but that book gave me the confidence to try just about anything with Find and Replace. I’ll spare you the gory details, but in 3 steps, I went from the XPress Tags and whitespace surrounding the ingredients to real live opening and closing XML tags.

plish004-xtagstoxml.jpg

So this method does work. But it kind of hurts my brain. And anyway, there’s that same deal killer of the recipe card content getting left out. Ahh, if only I could go back in time and warn myself not to put that stuff in inline text boxes…

3. Quark to Word: I can save to either Word 6 or Word 8. Both versions crash InDesign when I try to place them. No thanks.

4. Quark to PDF to Word: practically every paragraph is in it’s own text frame and somehow my 6 paragraph styles have ballooned into 44 styles named CM1-CM44. Pass.

5. Quark to PDF to RTF: I had high hopes for this one, since I thought it would reuinte those inline boxes with the rest of the text and have a style attached to everything. But I’ve tried several times to import it into ID and it crashes it every time. Sucks to be me.

6. Quark to PDF to HTML: no cards, plus everything’s chopped to bits in tiny <p> and <span> elements that don’t really correspond to meaningful elements. I think I need a beer.

7. Quark to PDF to XML: This is also kind of interesting, but not in a good way. More like Marshmallow-Peeps-in-a-microwave interesting. Almost everything is wrapped in <P> tags, which alone would be a deal breaker. But I really screwed things up by carelessly making the PDF from Quark with missing fonts, and as a result some of the recipe cards have overset text. Of course, the PDF doesn’t include any of that overset text, so it’s just gone. I also think the missing fonts resulted in some of the ingredients ending up in table tags. Very loose lines of justified text also got put into tables. “Clean-up in aisle 7!”

plish004-justifed.jpg

plish004-tablexml.jpg

8. Quark to PDF to Mars to SVG to XML: OK, I need to stop. You get the point. Besides if I do the work in InDesign, I can make use of what’s already there for the print side of things.

If you just can’t get enough of this text-out-of-Quark topic, by all means check out the InDesign Secrets thread on it. It just makes me jealous that I don’t have access to things like TeXTractor (or a comp vendor in India).

Here’s how you know you’ve drunk the Adobe kool aid: I can’t type the word “India” without capitalizing the “d,” so it’s always InDia the first time. I am no longer capable of InDependent thought. InDeed, it’s InDefensible.

InDesign clean-up

Ahhh, it feels so good to be back in InDesign after all that Quark-Word silliness (told ya I drank the Kool-Aid). Let’s do this quick. I want that text creamed and buffed with a fine chamois, and I want it now. Chop chop. The first thing is to clean up the paragraph styles so they match the element names I want to use in my XML. I have the luxury of not having to conform to a DTD or Schema, so I can call ’em anything I want. For now I’ll stay with simple semantic names. Then I’ll create tags with matching names that match the styles, and I change the default Root to cookbook. I’ll tag the story frame as recipies.

plish004-tagsnstyles.jpg
Now to clean up those two-column ingredients. A quick trip to the Find/Change dialog will suffice. First we replace all tabs in the ingredient style with paragraph returns. I also had some soft returns in there to put comments under ingredients, so let’s replace those with regular spaces. And last let’s use 3 of InDesign’s built-in GREP searches to tidy up any extra returns, spaces, or tabs.

plish004-grep.jpg

Now comes the moment of truth. Mapping Styles to Tags. If I’ve done things right to this point, everything will fall into place. And…I think it worked. The XML is pretty flat but I like what we’ve got here. In a project with more than one destination for this code, I’d want some nesting so that each recipe was a enclosed in a set of tags, and maybe even the ingredients and groups as well. But this is a one-off kind of thing.

plish004-cleantagstruct.jpg

The next step is straight out of A Designer’s Guide… Chapter 9 to be precise. Since there’s no other re-use of this content besides a page on a Web server, then there is no need to get all huffy about keeping the semantic nature of our tags. I already have things grouped consistently, so I can change XML tags to HTML tags, add a few things and I’m good to go. First I’ll change cookbook to HTML, then add a tag called head, and drag it waaaaaaaaaay up in the structure pane, just under HTML. I’ll change the recipes tag to div, and map the card tag to it. The code is starting to look Webbish.

plish004-finalxml.jpg

Let’s export it.

InDesign gives me a little agita on the way out:

plish004-cannotbeencoded.jpg

I tried in vain to find these shady characters. How dare they refused to be encoded! I want to speak to their parent elements!

I thought the warning might have something to do with the Structure Pane Gremlin I’ve seen from time to time. Here he is.

plish004-gremlin.jpg

Has anyone else seen this thing and know what it is? Looks like an Asian character of some sort. He is darn difficult to get rid of. I’ve had to untag and delete all the surrounding content to get rid of him. I thought maybe the Department of Homeland Security had bugged my InDesign file to see if I was a terrorist. Or maybe it’s just a glitch in the Matrix. Nothing to worry about. The Gremlin appeared 3 times in the cookbook code. Unfortuantely, even after removing all 3, I still get the warning message, so I have two unsolved mysteries. But the good news is the code looks fine when I eyeball it in Firefox.

That’s all for now. When we pick this up again, we’ll try to achieve Find and Replace nirvana in oXygen and test my ability to use CSS without making a MESS.

Family Cookbook 2.0

Now that all our Easter eggs have been consumed, let’s continue on with that XML theme with a little project to illustrate the joy and pain of bringing old content into the brave new world of cross-media publishing. The goal is to take the files from old print project, languishing on some dusty CD in the basement, and give them new life as spiffy Web content.

The content we’re going to work with is a cookbook. And yes, I did hear that collective groan from across cyberspace. If you’ve read anything about XML and publishing, you know that all XML demos are based on cookbooks. I think it’s a law or something. Actually, I really did want to update the cookbook and put it online, so I grabbed it for this demo.

I’ll break the demo up over a few posts since it’s too much to digest in one sitting. It hurt to write that one, but I couldn’t help myself.

The cookbook was a personal project. I made it when my son Ethan was a baby, to say thanks for all the help everyone gave my wife and I at the time. I was also inspired by the memory of a great-grandmother, Nana Mac, a legendary cook who never wrote down any of her recipes.

plish-nanamac.jpg

Now they’re all gone with her. I wished that my kids could be connected in a some way, to the great people who came before them. So I sent out a request to all family members to submit their favorite recipes and any interesting stories that went along with them. I got a nice response, 54 recipes from 28 people.

I transferred all the recipes from hand-written index cards, or copied and pasted from e-mails into a Quark layout. Like my fellow Southeastern MA native, Emeril Lagasse, I kicked it up several notches. I probably went overboard, with not one but two indices, a forward and a dedication, and of course drop shadows on every page “burned” with ShadowCaster. I figured out the imposition and printed 30 copies of the pages on my Epson Stylus Color 740i, which matched my Bondi Blue iMac. The Epson still cranks out pages today. Never fed it an OEM ink cart either. The inkjet gods must be smiling on me. I bound the books, using a cordless drill and hand-bent staples. Ouch! Talk about old world craftsmanship! Could have used one of these sweet book staplers. Then again, maybe I should’ve just gone to Kinko’s. But the whole point was to do it all myself on the cheap. The book came out quite nicely, if you forgive the slight shingle of the pages, and the fact that I didn’t laminate the covers, so they get a bit smudgy in the kitchen.

plish-cookbookcover.jpg

I undertook this project in the spring of 2000. Those were the days when the wooly mammoth known as Quark XPress 4, roamed the Earth and dominated the publishing world with a 90% market share. Yes, there was a new thing called InDesign, but I laughed at it. Version 1.0 would launch, sort of. Everything else I tried to do with it caused it to crash. I mocked it as Illustrator with multiple pages. When InDesign 2.0 came out I quickly changed my tune. But that’s a story for different day.

Thus for our current project we have the dusty old Quark 4.04 file and a couple of pieces of art. Nowadays, I pretty much bleed Adobe Red (Pantone 485). I don’t own or know the versions of Quark XPress after 4.11. This is a problem for a few reasons, not the least of which is, if I upgrade all my machines to Leopard, I’ll be without Classic support, and thus without Quark. There is a workaround: have a partition running Tiger/Classic, but that’s like having to keep a second stereo in the living room to play your 8-track tape collection. Perhaps it’s time to upgrade. I must at least check out, if not actually buy XPress 7. I’m looking forward to it, but with the same feeling when you meet up with an old friend you haven’t seen in years: a mix of curiosity and unease. What’s changed? Will we still get along? Does he still remember the secret handshake (keyboard shortcut)? For now, we’ll attempt the Extreme Cookbook Makeover with InDesign CS3, Syncro Soft’s Oxygen, and Dreamweaver.

One last a stupid question: Why is it when I type “Dreamweaver”, I hear the song from ’70s? “Ooohh, dreeeeem weavahhh, I believe we can reach the morning liiight.” Maybe it was Wayne’s World that resurrected those dying neurons. But I am suspicious there’s also a K-Tel Records commercial playing endlessly in some dark corner of my mind. That would explain a lot. Hopefully my curse will not now become yours. OK, this blog is over 3000 words old, let’s finally do stuff.

CookBook Makeover

Step 1: The Conversion Drop Ye Olde XPresse File onto InDesign CS3. On my vintage G4, 40 seconds goes by before the Open progress bar appears. Tempting to go play on the Web, but in the interest of science I will ignore my ADD instincts and wait it out. For about a minute we get the “Converting Regular Spreads” message. Hmmm. What exactly is a “Regular” spread? Does this mean there are “Irregular” spreads? “Atypical” spreads? “Highly Unusual” spreads? I’d hate to have InDesign tell me it was converting “Unprecedented” spreads. Then again, that seems a little exciting. I have seen this dialog box a hundred times, without ever really comprehending it. Do I care enough to Google? Apparently so, and here’s the answer: “Regular” spreads are document pages, the ones that actually get printed in the book, as opposed to “Master” spreads which hold master pages. Hoping for something more interesting weren’t you? So was I, but we move on.

Next up, Warnings. “Shadow attribute not supported for characters.” OK, I don’t remember ever shadowing characters, but I’ll take your word for it, InDesign. Go on. “Missing Fonts.” No surprise here. Almost all the files I ever open were created at another time in another place, so this is my default state of existence. I was born missing fonts, man. I could load the entire Adobe Font Folio, add everything from Linotype, ITC, and ImageClub and somehow I’d still be missing FranklinGothicDemiCaramelMacciato.

What I really need is a preference like this:
plish-pinkenough.png

Alas there’s not, so we dismiss, and we’re in. Let’s take a look around.

plish-cookbookconvert.gif

All the recipes have the title and chef in inline text frames, like they did in the XPress file. To InDesign, that content is out of the flow of the story. So merging content is one hurdle to clear before we export the XML. Everything seems styled; that’s good. Thanks, Y2K self. Hmmm, the ingredients are in 2 columns. That might need to be cleaned up before I apply tags. There are a few scraps of whitespace trash lurking here and there, but I think we can make a go of it.

Since we’re starting with a converted XPress file, I am reminded of a neat InDesign feature which may be of some use to people. Normally if you choose InDesign > About InDesign… you get the lovely InDesign Purple (DIC 2618 or 40c100m) Credits window, with the version number. But if you add the Command key, you get an info-packed window called Adobe InDesign Component Information.

plish-idcomponent.gif

All the supertechy details of your document’s existence are laid bare, including whether or not it was converted from Quark XPress or PageMaker, all the versions of InDesign (including the build number) that touched the file, whether it is crash-recovered, opened with missing plug-ins, etc. It’s like doing a DNA test on your InDesign file. This info has helped me in the past with troubleshooting, in terms of hunting down what was causing a file to crash, and where in fact a file came from.

Note that like in the screen grab, Write Log File is grayed out until you save the document. If open this window with no document open, it still works, you just get the top of the dialog filled out with info about InDesign’s state for troubleshooting application problems instead of document problems.

OK, that’s all for now. Next time we’ll do text clean-up and tagging.