Publicious Links: The Squirrel Bombing Edition

OK, let’s just get it over with.

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

After

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.

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.

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.

Now, it has 4.

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.

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.

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.