What color is your paper?

Because my friends don’t really understand what I do, I often get asked by them to do things that are outside my area of knowledge

Can you design my letterhead/business card/logo?

I’m not a designer. I know more about design than I used to, and I have a decent sense of the basics, but I’m not going to help anyone create the best representation of their business. But a friend, who is a graphic designer, emailed me recently and said he’d designed some amazing business cards, bought the card stock, gone to Kinko’s, and was very disappointed with what they gave him and wondered what they did wrong.

Continue reading

XML Rock Band

OK, it’s Friday, time for a little goofiness. Well, a little more goofiness than the other 6 days of the week.

XML.

XML XML XML XML XML XML XML XML XML.

I am so bloody sick of XML. Why, you ask? Isn’t XML going to save the publishing industry? Isn’t it going to make possible the workflow of our dreams: author once, output everywhere? Isn’t it going to fix the economy and halt global warming and bring the Red Sox another World Series? Yes, it will do all those things, at least according to the true believers. And they may be right. But I still have something stuck in my craw about working with XML.

Continue reading

Cookbook 2.0 Is Served

Time again to peek in on our cookbook project and see if it’s baked yet. You know they say you lose 10° every time you open the oven door. So does that mean if I opened it enough times, I could turn the oven into a freezer? Just wondering.

We left off last time with

  • decent-looking code, thanks to a bunch of Find/Replaces
  • inspiration from the design of Epicurious.com
  • the ability to harvest CSS code with the help of the Web Developer Add-on for Firefox

So what’s left is to put together a CSS file, point the HTML at it, and see what we get.

Continue reading

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.

Adobe: Not Evil

Very nice to read over my morning coffee that Adobe has made good on their intentions to revise the Photoshop Express Terms of Service to make them a lot less evil. In my first look at Photoshop Express, I was pretty down on Adobe for writing themselves ownership of your content throught the Universe. I don’t really think they intended to be evil, but what’s written is what counts.

John Nack, the Senior Product Manager of Photoshop, explains the changes on his blog.

The main thing that I like about the changes is that when you terminate the service, all Adobe’s claims over your content are likewise terminated. We’ve moved from the pig to chicken in this bacon n’ eggs dish of committment. They do keep archived copies of your stuff, I would guess as protection against future claims of wrongdoing.

Adobe is also promising not to sell or license your content. Good good.

If you do sign up, be aware that you are granting the vast unknown Other Users a “license to view, download, print, distribute, publicly perform and publicly display Your Shared Content…” They, in turn, are supposed to give you credit, and they’re not supposed to make money off it or alter it. So I think what we have here is akin to the Flickr Creative Commons category of Attribution-NonCommercial-NoDerivs license. I think I can live with that, so I’ll set up a Px account and see how it goes.

Somewhere in his underground lair, Dr. Evil is very disappointed.

A Look Under the Hood of the Hybrid

Got such a good response with the hybrid InCopy-XML workflow, I felt like it was worth revisiting to go into some details. Let’s look at the task of creating a new Schema file with XMLSpy.

In The Grand Schema of Things

The whole reason I start with a Schema and not a DTD is that XMLSpy lets you graphically create Schema. It is a heck of a lot easier for a non-programer to do than writing the code from scratch. But I won’t lie to you. You still need to learn something about XML in general and Schema (with a captial “S”) in particular. It’s not quite as easy as just drawing a diagram of your content model.

Well, you can draw pretty much whatever you want, but if you don’t know the pitfalls, you’ll get validation errors. And without a valid Schema, you can’t create a that user-friendly authoring template that you need to sell your editors on this whole XML workflow thing.

Help!

Learning XMLSpy can be frustrating for someone who’s used to working with programs like Word and the Creative Suite. The rules for making valid code are strict, the error messages and other jargon might as well be written in another language. Which, actually it is. And the Help won’t teach you anything about XML you didn’t already know. It barely teaches you about XMLSpy. It assumes you know all the rules for coding, and just tells you which buttons perform which functions.

You could buy a printed copy of the manual on E-Bay for $108 (Altova doesn’t sell ’em). But instead I would recommend you do the tutorial and then keep something like the O’Reilly book XML in a Nutshell within reach at all times, to serve as a de facto manual. That way you can use that $70 for beer and stand just about the same odds of making a useable Schema.

Namespaces

You need to learn about namespaces right off the bat and make them part of your Schema design so you can use InDesign’s feature of mapping XML attributes to paragraph and character styles. This is necessary since not every paragraph is going to look the same in your layout, but they are still all just paragraphs. I’m not going to get deep into namespaces here since I could devote a few posts to nothing but namespace issues I’ve had.

OK, now that I made it sound hard, let’s make it look easy.

Diagramming a Content Model

We’ll create a basic Schema for a Major League Baseball team, in honor of the World Series Champeen Red Sox. In XMLSpy, choose File > New and pick W3C XSD from the list of file formats.

Enter the name of your root element in our case, baseball_team, and an optional description of it.

plish010-bluetree.jpg

At any time you can choose Text view to see or edit the code. That’s when you’re really glad you don’t need to ever see or edit the code. It’s like opening up the washing machine while it’s running. You just take a peek, maybe throw a pair of socks in there, and close the lid.

plish010-code.jpg

Then click the little blue tree icon to show the Schema diagram. This is where the fun begins.

You now have a wide open field in which to draw out all the children of the root element.

Everything is connected automatically, so you won’t have any loose floating pieces. Now you apply all that stuff you learned in your planning meetings, the elements, the attributes, restrictions and relationships they have. You drag out a connector from the baseball_team element, and choose what kind of child it has.

plish010-addchild.jpg

In this case, it’s a sequence (indicated by the line of dots) of two elements, players and coaching_staff.

plish010-playercoach.jpg

players is a sequence of position_players and pitchers. position_players is a sequence of infielders, outfielders, and bench, all with an attribute describing the postion they play. You keep going in this manner till you’ve finished diagramming your content model.

plish010-wholeschema.jpg

Regarding attributes, if you want to give your editors a pop-up list of values to choose from, enter the legal attribute names in the facets > enumerations tab.

plish010-enumeration.jpg

You can also assign minimum and maximum occurrence values to restrict how many of a certain element you’ll allow. In our example, you have to have at least 3 outfielders on your roster to field a team (and pass a validation test). If no number is shown under an element the schema calls for exactly one of that element. Or you can make an element optional by setting the minimum occurrence to zero, like I did with the assistant_manager and the box outline becomes dashed.

Once you are done, you can convert the Schema to a DTD for importing into InDesign, or showing your friends in the bleacher seats.

plish010-dtd.jpg

On second thought, don’t show your DTD in the bleacher seats. That conversation probably won’t end well.

Of course the devil’s in the details, and there are plenty more details, but let’s leave it there for now. That wasn’t too painful, was it? We made the engine of the hybrid InCopy-XML workflow, a real live W3C XML Schema, without hand coding it.