Publicious Links: The Squirrel Bombing Edition

OK, let’s just get it over with.

squirrel-falls

squirrel-fenway

squirrel-soldiers

squirrel-bull

squirrel-nana

squirrel-beachroad

Ever since he was first spotted, that damn rodent’s been following us around all summer. Now on to the links.

First up, my latest post at InDesign Secrets, Document Differencing.

Layers Magazine has an article on using Conditional Text in InDesign. Aside: ten years later, I still hate the phrase, “in InDesign.” AwKward.

What do you get when you cross Mad Men with Illustrator? Sketchpad, a 1963 computer illustration program created by Ivan Sutherland at MIT.

Thanks to mehallo.com for the heads up.

Let it snow, let it snow, let it snow (leopard, that is). Here’s a PDF on Adobe’s Creative Suite compatibility with Apple’s new version of OS X.

Elpical has a product called Claro Layout (which I haven’t tried yet) which gives you the ability to optimize and enhance your photos from within InDesign.

Vectorsonfire.com has a vintage Ford Thunderbird drawn in Illustrator that is so awesome it’s either going to inspire me to refresh my vector skills or make me never touch the Pen tool again. Too soon to tell which.

Examiner.com has a story about some members of the UK Parliament considering a ban on Photoshopped images for ads targeting kids. They’re upset about the widespread Photoshopping of already attractive people into poreless, wrinkleless monuments to Barbie-doll perfection. Here’s an interactive example of the typical process. Of course, this has been going on for a long time, witness the these pics of 18th century First Lady Dolly Madison:

Before

Dolly-1.0

After

Dolly-2.0

Prompting Ben Franklin to say, “M’lady, thou art a hottie.”

Designussion (i.e. Design Discussion) has 13 Amazing Vector Cartoon Tutorials.

If that wasn’t enough for you, Designreviver has 50 Illustrator Cartoon Tutorials.

Ever heard of Flash cookies? AKA cloud cookies? Apparently some sites now keep cookies on your surfing habits on their machines. Thus removing the last shred of a hint of the illusion of privacy. Might as well just post your browser history on your Facebook wall.

Wish you knew more about CSS? Existingvisual.com has 250+ Resources to Help You Become a CSS Expert. Hmmm, wonder if those resources include six months off from real life and a fresh brain.

Stumbleupon has the definitive list of Adobeans on Twitter.

Finally, if you just didn’t get enough rodent, here’s more squirrel bombing and an automatic squirrelizer app.

Advertisements

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.

Book Report: The Art & Science of CSS

I was at the library today and snagged another book that I’m excited about: The Art & Science of CSS by an Australian publisher called Sitepoint. It’s written by a team of 5 “visionary” Web designers, one of whom lists mass.gov in her portfolio. It’s definitely not for anyone new to CSS. It assumes you already know all about selectors and properties. By page 12, we’re already into JavaScript for sIFR.

plish010-cssbook.jpg

I already have and love Eric Meyer’s Cascading Style Sheets. But this one has the advantages of being somewhat easier to read, newer, bigger (8 x 10) and with color examples. It’s definitely not as thorough as Meyer’s book, which can’t be beat for covering every last detail, as O’Reilly books always do.

But The Art & Science of CSS feels fresh, as does the Sitepoint website. If nothing else, it gives me a break from the look and feel of the O’Reilly and Peachpit (Real World and Visual QuickStart Guides) books, which I’ve been reading for the last 10 years. And thanks to one of the author’s links, I learned my Blogger code:

B1 D+ T- K S+ F+ I O++ X- E L- C– Y1 R- W- P+ M2 N- H

I’ll assign myself the book report on this one and come back here with anything truly shareworthy.

Test Drive A Hybrid Workflow

You never know where inspiration will come from. Yesterday it came to me in the form of a traffic jam slowing my ride to work. Sitting on the commuter bus, mired in “bumpa-ta-bumpa”, I stared out the window. Life on pause. I imagined the lake of gasoline that was fueling all these cars, puffing out their tailpipes, melting Greenland. Then a shiny red Toyta Prius rolled by. It had a good vibe, like a forward-thinking, best alternative in an otherwise unworkable situation. A hybrid.

This was definitely a sign from the cosmos that it was time to talk about the hybrid XML-InCopy workflow I’d been playing with since last year. I had planned to finish off the cookbook project tonight, but this idea overtook it in my brain. I offer it up now in case any of you out there is stuck in a traffic jam of a publishing workflow, with a line of products and file formats in each other’s way, slowly crawling ahead while the clock ticks ticks ticks.

The point of a hybrid workflow is to combine the virtues of XML and InCopy to give you speed and efficiency that is otherwise impossible. Single-source authoring means multiple print and/or Web products derive and arrive simultaneously from the same set of keystrokes. You author and edit in XML, transform when necessary, and use InCopy to preview your print layouts, where space is finite and styling matters, as you go.

I know there are people out there who have written amazing scripts, or developed plug-ins or workflow systems that can accomplish what I’m going to show you better, faster, with more goodies. But as always, I write about what can you do with the off-the-shelf tools and garden variety skills. Or if you don’t currently possess those skills, you can come by them without completely re-wiring your brain. Perhaps someday Adobe will release the equivalent of an electric car, XML authoring as part of the Creative Suite, and we’ll all be merrily speeding down the Cross-Media Expressway. What follows is my idea of how to do today. And it works. So hop in the hybrid and take it for a spin.

The Pitch

With a W3C XML Schema as the foundation of your workflow, you can develop multiple print and online products simultaneously, and achieve efficiency and savings through content re-use with off-the-shelf tools.

The Tools

To do this you’re going to need InDesign CS3, InCopy CS3, and the Altova MissionKit For XML Developers. The MissionKit is an XML Developer’s equivalent of the Adobe Creative Suite. It’s three applications that work in concert to for the creation and transformation of XML files: XMLSpy, StyleVision, and MapForce. This is a Windows-only package. There is no Mac version, so if you kneel at the altar of Jobs like I do, you need emulation software like Parallels. Syncrosoft’s oXygen is an alternative that runs on the Mac, but only if you don’t need a lot of help writing XSLT. I do. MapForce gives you graphical creation of XSLT, or as I call it, XSLTW (XSL with Training Wheels). I’m not trying to do a commercial for Altova, but their stuff is the only stuff that I know works for everything we’re trying to do.

Step 1: Planning

This is the big one. Map out all your content. Depending on the complexity of your content, this can be a tough job, so you only want to do it once. Spend enough time to get it right, since everything flows downhill from here. Every screw-up or oversight at this stage will echo throughout the workflow in some combination of time, aggravation, or cost. And everyone needs to know that once this is done, there’s no changing the structure, at least not for anyone who wishes to remain with the company.

Your map should show every piece and where it fits into the overall scheme of your project. Map every recombination, and every dependency. Leave no stone unturned. This part can be a real eye opener. If you survive with your sanity intact, you will understand your content better than ever before and maybe discover new ways of using it.

Reverse engineer your own content. Cut up books and move the pieces around as they would move in the digital realm. Follow the life of a lowly paragraph as it appears throughout your product line. Once you grasp the details, you can answer the first key question. What kind of schema best suits your needs: a custom built-from-scratch schema or a generic format? Do you have the time and money to make the former? Do you have the flexibility for the latter? A bad fit might cost you more in the long run. Investigate DocBook and DITA. If you go generic, skip to step 3.

Step 2: Build the Schema File

With the understanding that you gained by mapping your content, you can now build an XML Schema that will guide your authoring, transformation, and output. Why a Schema? Why not a DTD? I have nothing against DTDs. In fact, they are more appropriate for describing book-like things. Schema excel at describing data more than documents. In fact, I love DTDs so much, the other day on the highway I was passed by someone with the license plate 736 DTD, and I thought “hey, that’s cool.” Then I felt the urge to slap myself for being such a geek.

I say use Schema purely because the Altova tools support Schema in ways that they don’t support DTDs. Namely, you can graphically create a Schema in XMLSpy. I feel a little hypocritical because this is the same tool-based thinking I dissed in a previous post. But facts is facts, and until I find another tool that can do this workflow end-to-end with a DTD, I’m sticking to my story. Actually, if you must have a DTD, there is a workaround: build a Schema, then use XMLSpy to convert the Schema to a DTD.

Step 3: Create Authoring Templates

Using StyleVision you take your Schema and apply styling to it to make a user-friendly authoring template. This is something the oXygen can do too. You choose from CSS properties to apply fonts, spacing, and position to your elements. You can make pop-up menus for standardizing choices, and clickable links to insert required elements.

Step 4: Develop Layout Templates

Import sample XML files into InDesign, structure and style it. Set up styles to tags mapping. Make use of the Story Editor to be sure your tagging remains intact and whitespace characters are where they belong.

Step 5: Distribute Authoring Template

Let the writers have at it.

Step 6: Import XML Files into InDesign

And when you do, be sure to maintain the live link, so the XML file appears in the Links panel.

Step 7: Export to InCopy

BUT tell everyone that the InCopy files are untouchable! Hide them. Instead, InCopy users drop the InDesign file onto InCopy to open it directly.

Step 8: Editors Do the InCopy Two Step

Check out the appropriate stories from the InDesign layout. Show the Links panel to see the XML file. Edit in the XML file, save it. Go back to the Links panel and update the link to the XML file. Magic! You have your cake (XML) and eat (publish) it too.

The fact that this works at all is a complete accident–the unintended consequence of 3 InCopy capabilities: access to the links palette (intended for the management of placed images), the ability to use an InDesign layout for preview (so one story can be simultaneously linked to both an XML file and a .incx file), and the ability to maintain a live link to to text files (meant for Word and spreadsheets). Sometimes things just fall into place.

Editors can do some work, like styling, and working with boilerplate (untagged) content in the layout file. But they must understand the fundamental truth that anything they do between the tags in the layout will be wiped out the next time the XML file is saved. Stuff outside the tags, in whitespace elements, remains.

At the end of the day, when all is said and done, you still have intact XML files, with the most up-to-date content, ready to be flowed into whatever template or media you need.

Bonus Points

At any point in this workflow you can use MapForce to create XSLT to transform your content, making it fit another purpose. You don’t need automated workflow systems or scripts to make that transformation happen now that InDesign supports XSLT. Examples of what you can do with XSLT: Making HTML for Web presentation, making PDF, making alternative print products by gathering or sorting content according to attributes, making NIMAS files.

Math Doesn’t Add Up

All this is great, but it will not work for you if you need MathML. The only ways to get MathML in and out of InDesign involve scripted solutions, or customized versions of 3rd party plug-ins like MathMagic. I hope that some day InMath, which has always been my favorite equation editor for InDesign, will add MathML support. Design Science’s MathType speaks fluent MathML, and you can place those equations (in EPS format) into an InDesign layout. PowerMath also exists for InDesign but I haven’t tried it out. Note to self: I should do a future post comparing all the different ways to do math in InDesign.

Next Steps

My next project (if ever stop spending all my free time blogging) is to experiment with Office Open XML. Since the new version of Office has XML underlying every file format, why not exploit that, and author in Word, transform OOML to your Schema, then import in InDesign, Web, etc. It should work like a charm, and it’ll probably have authors and editors breathing a sigh of joyful relief that the XML authoring tool they have to use is Word. It may not be the electric car, but it’s pretty close to one of those that runs on old french fry oil. Mmmm, I could go for some fries right now.

The Themes Are A-Changin’

Just a quick note to say, I changed the theme tonight. The old one was bugging me for a few reasons so it had to go. It wouldn’t let me add an RSS link to the sidebar, the calendar entries were too subtle, and let’s face it, it was kind of boring. Not nearly ‘licious enough. Hopefully this is a step in the right direction. I’ll add a nice picture to the header soon, and maybe tweak the CSS if time permits (and I decide it’s worth the paid upgrade). I’m not crazy about the padding and borders around the images. If anyone has a strong opinion either way on the new theme, speak up.