Liz Castro on HTML, XHTML, and CSS

For more information

2011-07-21T04:06:00.000-04:00

For information about the books I am publishing in English about Barcelona and Catalonia, see Catalonia Press.

For my general website, see ElizabethCastro.com

For my regular blog—which lately is quite EPUB heavy—see Pigs, Gourds, and Wikis.

I've consolidated my blogs

2010-07-23T10:25:00.000-04:00

From now on, I'm posting everthing to my main blog: Pigs, Gourds, and Wikis. Come join me over there!

You can find just the HTML related posts by clicking HTML in the Labels section.

The Importance of Character Encodings

2010-02-10T10:29:00.001-05:00

I'm amazed at how many non-supported characters I see out on the Web. I spent a long time researching and deciphering just how to use the proper character encoding so that this doesn't happen to you. You can read all about it in Chapter 21, Symbols and Non-English Characters, of my HTML, XHTML, and CSS: Visual QuickStart Book.

Doing some research on Barnes and Noble's new electronic book reader, the nook, I saw this:

Looking at the source code, you can see that B&N did not declare their character encoding. Firefox assumed it was UTF-8, but since it wasn't, the special symbols display incorrectly. If you're just a Web site visitor and want to see the page without those annoying question marks, go to View > Character Encoding, and choose a different encoding from the one Firefox tried originally. If that happens to match the character encoding that the Web site creator used, you're in luck. If not, try again until you find it.

If you're a Web site designer, be sure and declare your page's Character Set so that browsers don't have to guess. At the top of your page, put:

<meta http-equiv="content-type" content="text/html;charset=code" />

where code is the character set encoding you used to write your page. I explain how to tell which one you used (and how to choose an appropriate one if you're not already), in my book!

Copying a file with Command-C

2010-02-01T14:30:00.001-05:00

OK, before I tell you what I just discovered, I feel compelled to note that I have been using a Macintosh since 1985!

I was watching a video tutorial this morning and the guy copied a file on the desktop by pressing Command-C and then switched to another folder and pasted it in there by pressing Command-V. Did you all know you could do that? I sure didn't. Not sure if it's useful, but it definitely took me by surprise, even though it's completely logical and obvious.

Thought you should know too!

iPhoto Book Themes - Printed Guides

2010-01-28T14:22:00.004-05:00

Those of you who've followed my writings know that I'm an avid photographer and have amassed more than 50,000 photos in my iPhoto Library. I've created several iPhoto books and think it's a great way to share your photos, give incredibly special gifts, and also make an obsolescence-proof backup of your photographs.

You might also know that, frustrated with the scant information about the layouts in iPhoto, I created a rather obsessive Web site that documents all of the possible layouts in each iPhoto book theme, in order to make it easier to create iPhoto books. Originally, it was a tool for myself as well as an experiment in giving away information. The site has been live for about a year, and it has steadily grown in popularity. I get letters from people almost every day who've used my site to create their iPhoto books.

For a long time, I've been wanting to create a print version of the Web site (as a PDF, that you can download and print yourself). While the Web site is good for a quick question, I thought it would be handy to have a nicely laid-out concise guide to each iPhoto book theme. In the print version, I have given examples of every single possible layout for each theme, and made it easy to figure out how to recreate those layouts in your own book. (The Web site, is nowhere near as complete.)

So there are 16 beautiful little mini e-books, one for each iPhoto book theme. They're almost done, and now I'm just working out the details about selling them online.

Meanwhile, I'd love to give you a sample. It'll be a PDF of the guide to iPhoto's Modern Lines book theme. It's absolutely free, and the only thing I ask in return is that you tell me if you find it useful and if you'd ever see yourself buying such a guide for any of the other themes.

To get your copy, just drop me a line and ask for it!

Thanks for your interest.

McAfee Pushes Fear of HTML 5

2010-01-06T14:01:00.002-05:00

McAfee just published its “McAfee Labs Threat Predictions for 2010” in which it says “cybercriminals will ... take advantage of HTML 5 to create emerging threats”.

You might think that that McAfee had found a vulnerability in HTML 5 that might encourage those attacks. You’d be wrong though.

McAfee says that HTML 5’s popularity, its strength in creating online applications, and finally its success in solving some of the cross-compatibility issues that have plagued the web for a decade will in fact encourage hackers to attack HTML 5 driven sites, since they will presumably now have a bigger target.

In other words, since HTML 5 will be used more, it will attract more attacks. How is that news? Hmm, I wonder if we’ll get more attacks on mobile devices since there will be more of them next year, too.

Why is position:relative necessary when you're positioning absolutely?

2009-11-30T13:26:00.004-05:00

So I'm reading Dan Cederholm's new book, Handcrafted CSS: More Bulletproof Web Design. I'm really liking it.

There is a small example in the intro that deals with absolute positioning that I want to highlight. He's talking about formatting a list of coffee drinks that have a title and a price. The goal is to have the link be the entire line so that it makes it easy for readers to click on their desired cup of coffee.

The original code looks like this:

<ul class="lst">    

<li><a href="#"><em>2.79</em> Latte</a></li>

<li><a href="#"><em>2.99</em> Cappuccino</a></li>

<li><a href="#"><em>1.80</em> Cafe Americano</a></li>

<li><a href="#"><em>2.00</em> Espresso</a></li>

<li><a href="#"><em>10.49</em> Caramel Macchiato</a></li>

</ul>

Cederholm suggests using absolute positioning, with code much like the following (his is part of a larger web page and so I've adjusted it to appear on its own):

ul.lst li {

     list-style-type:none

     }



ul.lst li a   {

     position: relative;

     display:block;

     padding: 7px;

     border-bottom: 1px solid #f3f2e8;

     width:200px;

     text-decoration:none;

     font: .9em Verdana;

     }

     

ul.lst li a:hover {

     background-color:#e0e0e0;

     }

    

ul.lst li a em  {

     position: absolute;

     right: 7px;

     top: 7px;

     font-style:normal;

     }

The result can be seen here.

And though Cederholm says the position:relative line is necessary, he doesn't explain why. The reason is that when you position an element absolutely—in this case the coffee prices, which are em elements—their position is calculated with respect to the nearest positioned ancestor, or if there is none, to the body element. Since he wants the prices to go in the same line as the a element that contains them, he must position the a element. By adding position:relative to the definition for the a element, it becomes positioned, and any descendants that are absolutely positioned will be positioned relative to it. This happens even though he's not defining any offsets; that is, the a elements stay in their natural place in the flow.

You can find more information about relative and absolute positioning on pages 178-179 in my HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide.

Also note that Cederholm concludes this example by showing how absolute positioning is not very flexible for text elements. That is, when the text is enlarged, the name of the coffee and its price overlap each other. Instead, absolute positioning makes more sense if one of the pieces is a static image whose size can always be accounted for.

Publishing a Blog with Blogger: Visual QuickProject Guide, Second Edition

2009-11-02T14:44:00.001-05:00

Hot off the presses, I got mine today.

This brand new Second Edition of Publishing a Blog with Blogger: Visual QuickProject Guide is completely updated and covers all of Blogger's great new features for writing, designing, and earning money from your blog. Perhaps the most important of these is the ability to add new page elements (or widgets) to your blog, and then customize and reorder them to make your blog look and act just like you want it to. You can use these new widgets to add blog rolls, slideshows, search boxes, polls, tag clouds, custom HTML or JavaScript, and many other elements. This book will show you how.

You'll also learn how to use Google's visitor tracking tools to see how many people visited your blog, what they looked at, and where they came from—even what they typed to find you. You can use this information to better assess how effective your blog posts are and what your readers are interested in. And then you'll learn how to add Google ads to your blog with AdSense to earn money from your writing.

The great thing about Visual QuickProject Guides is that they show you—through copious illustrations—just what you have to do, without bogging you down in lengthy explanations. Here's what a sample spread looks like (click to download the PDF):

Formatting Blogger's Read More

2009-09-15T09:32:00.000-04:00

As part of Blogger's 10th anniversary celebration, they announced last week that they had added an easy Read More feature to their popular blogging software. The Read More feature (also called a jump break) lets you limit the amount of a long post that will appear on your main page, and offers a link to the rest of your post for those who want to, well, read more. The Read More feature lets your visitors see the beginnings of several different posts at once instead of having to scroll through very long posts to see what else there is.

Using the Read More feature is really easy. First, make sure you're using the new Compose tab, as I described in Blogger's new post editor last month. Then, place your cursor in your
post at the point where you want the break to occur. Then click the Insert jump break icon: . A gray line marks the break. (If you're using the Edit HTML tab, you can also type  where you want the break to occur.)

When you publish your post, only the part before the break will appear on summary pages (like your home page, or a particular month's page), but the entire post will appear on the post's individual page.

You could have figured that out on your own.

What I want to tell you about is how to format the Read more » text that Blogger displays by default so that your readers know there's something more to your post. I think it gets a little lost:

To change the text itself, or that little guillemet at the end, go to the Layout | Page Elements page, click the Edit link in the Blog Posts area, and at the top of the Configure Blog Posts box that appears, type the desired text in the Post page link text box. In this example, I used ... continued ...

This is a little better:

But I really want the text to stand out a bit more and I want it right where the reader's eye rests when they come to the end of the part of the post that is visible: on the right.

To change how the text is formatted requires a trip to the template and some fussing with HTML and CSS. Start by going to Layout | Edit HTML.

The 'Read More' text is styled by the jump-link class, so all you have to do is create new style rules for that class:

(You can find a full explanation of CSS rules and selectors in my HTML, XHTML, and CSS, 6th Edition, Visual QuickStart Guide.)

Notice that I specified the font with the $postfooterfont variable, so that in case I change the fonts for my template, the Read more text will automatically reflect that change.

Next, I used a larger font size, aligned the text to the right, and took away the italics.

I like it much better.

Monetizing my blog

2009-09-14T09:43:00.000-04:00

Or not. It's mostly an experiment. I'm working on the second edition of my Blogger book, and I'm trying to figure out how to help people make their blogs a money-making proposition. Of course, Google/Blogger have this AdSense program that places supposedly-relevant ads on a blog, but every time I see a page filled with those ads, I automatically think they're trying to scam me. So, I'm wondering a couple of things. Are there real blogs with useful content that include Google AdSense ads? And do the ads generate income for these folks? If you know the answer, I'd sure love to hear it.

Back in February, I wrote a Web site documenting every possible layout of an iPhoto Book. At one point, it got mentioned in TidBITS, and I was getting several hundred hits a day, quite a lot more than normal. It's leveled off quite a
bit, but it's still not bad. I mostly wrote the Web site as a tool for myself but I was not averse to generating a good reputation (and good karma!) by sharing it, or even to generating income by selling it. So, for a few days I put up a Google ad on the site. And there were thousands of impressions but not a single click. This didn't surprise me, as I rarely click Google ads myself. But I worried that not only was the ad not producing any income, but it might be adversely affecting my other goals.

Seems like people are automatically suspicious (me included) when you put ads up on your site. Whatever your content, if you offer it for free, you somehow are seen as having no ulterior motives, while if you serve up some ads, all of a sudden you're suspect. Of course, everyone has ulterior motives. I'll tell you mine, from most accepted to most ulterior: I love writing and want to share my thoughts. I want you to read them. In addition, if you remember that you learned some great tech tip from me and the next time you're in a bookstore, you buy my book, that'd be great. And well, if I could get paid for writing these tips, that'd be pretty nice, too.

I decided to remove the ad from the iPhoto Book Themes site, but I remain curious. So, I'm going to experiment with a few ads on this site. My own blog. It makes me nervous.

I'll let you know how it goes.

Random tip: Mousing Leftward (Updated)

2009-09-09T09:39:00.000-04:00

Some of my most useful tips (to me anyway) come from mistyping or being clumsy on the keyboard. The other day there was something leaning on my shift key while I was using the roller on my mouse and lo and behold, I scrolled sideways instead of up and down. Cool! I'm not sure if that's mouse-specific (mine's a wireless Logitech), but I thought I'd pass it on.

Updated!!
Hmm. It looks like the left-right mouse scrolling is at least application dependent. In Firefox, Shift makes the mouse scroll wheel go left and right (instead of the default up and down), but in InDesign CS4, the Shift key super-charges the scrolling wheel so you scroll faster, but still up and down. The Option key plus mouse scroll zooms in and out, and the Command key finally makes the mouse wheel scroll left and right. I can't find a place where you can change these mappings.

Logging into multiple accounts at the same time

2009-09-08T11:42:00.000-04:00

The other tip I've been wanting to share is about dealing with multiple accounts. For example, for this new version of my Blogger book, I've created an example blog written by the fictional Sarah Cookwood. She has her own Google/Blogger account. But if I'm blogging from her point of view and blogging my own blog at the same time, I end up doing a lot of logging in and out.

Another situation where this might be an issue is if you share a computer with a partner or sibling. You log into your Gmail account and check your mail. Fine. But then the other person comes along and wants to log in. Again, there's a lot of logging in and out.

My solution is to use two different browsers... for example, Sarah can log in with Firefox and I can log into Safari. We can both stay logged in and let the browsers keep our accounts separate. If you're on Windows, one of you could use Firefox and the other Opera, (OK, or Internet Explorer).

You could do the same thing with Facebook, Twitter, or any other site that you need to log into with more than one account.

Blogger's new post editor

2009-08-28T13:12:00.002-04:00

As I was working on a new chapter for my upcoming second edition of Publishing a blog with Blogger: Visual QuickStart Guide I happened to be wandering about the Settings area of my example blog (Go to your Dashboard, choose Settings | Basic and scroll down almost to the bottom.) And there was this option I'd never seen before: "Updated editor: Check out the latest features".

I checked the radio button, saved my settings, and went directly to write this post. The thing I like best is the little resize box in the bottom
right corner of the window.

Drag down and you can make the editing area a decent size. No more scrolling up and down over and over again to edit long posts!

The Link tool is pretty nice too. Select some text, and then click Link in the toolbar. A new Link dialog box appears. There's a box where you can copy in a regular URL from the Web. Or click the new Email address link to make a link to an email address. Most appreciated is the Test this link button which lets you test the link to make sure it works (without jumping into some other window and forgetting to save your post's changes).

Once the link has been created, if you click on it in in Compose mode, you'll see the link's URL so that you can visit the link destination again (in a new tab), a Change button that brings you back to the Link box so you can modify the link, and a Remove button that lets you get rid of the link (but not the clickable text).

Very nicely designed.

There are a number of other welcome changes which I'll be documenting in my new book. But I'd recommend checking out the new post editor right away!

Cross posting from Pigs, Gourds, and Wikis

2009-08-26T10:28:00.002-04:00

So, I've decided to cross post my technical articles from Pigs, Gourds, and Wikis here as well. You can use the labels cloud to find them (click on Tech or Tips). They have the same dates as when they were originally published on my other blog.

Labels in Blogger blogs viewed as a Cloud

2009-08-26T09:01:00.001-04:00

If you viewed my other blog last week, you would have seen a rather unwieldy, definitely endless list of labels like the one shown at left. Labels are Blogger's way of helping you categorize your blog posts so that readers can jump to an entire set of posts of interest. However, as the list gets longer, and disappears off the bottom of the screen, it also gets a lot less useful.

Of course, the first problem is that it's not easy to label your posts effectively in the heat of the moment. For example, I have a number of labels for the individual animals on our farm, where really it would probably be a lot more useful to have a single "animals" label. You can go back and edit your labels either at the Dashboard or by editing individual posts. I'll leave that up to you.

Blogger, for its 10th anniversary, has been rolling out some lovely new features, including the ability to display a cloud of labels. This means that your labels will be shown in various sizes, depending on how often you've used them. It gives your readers a clear, visual way to see which topics you visit most often on your blog--and which topics you visit only occasionally.

And since the label cloud is formatted not as a list but as a short
paragraph, it takes up a lot less space and is much more aesthetically pleasing. Let's get to it.

If you're logged into Blogger and viewing your blog, you can just click on the Edit icon at the bottom of your list.

Or, if you're at the Dashboard, click Layout, and then click Edit next to the Labels gadget. (If you haven't added the Labels gadget yet, then click Add a Gadget on the Layout | Page Elements page and choose Labels from the list that appears.) Either way, you'll see the Configure Labels box:

By default, all the labels you've used for your posts are displayed alphabetically in list format, one to a line, with the number of posts belonging to each label appended to the end of the line.

Thanks to Blogger's birthday, you now have more options.

Let's start at the top. Instead of editing my labels in the posts themselves—perhaps I want to maintain my fine-grained approach—I can decide not to display all of them in my new cloud (or in lists for that matter).

Click Selected Labels at the top of the Configure Labels box. A small edit button will appear:

Now click the edit button to see your list of labels and to choose which ones should appear in your cloud. Click Done when you're finished.

The next line in the Configure Labels box determines whether labels are listed alphabetically or by frequency. Since a cloud of labels already uses font size to show frequency, I think it makes more sense to leave this as Alphabetically. (If you use Frequency, you'll see a smaller to larger list of labels instead of a mixed one.)

Finally we get to the Display line. Be sure and choose Cloud!

And once again, since the frequency is displayed using the font size of the labels, you don't really need to show the number of posts for each label. Deselect that option.

Then click Save and view the lovely results. This is much more useful than that endless list we started with!

How to create a Flickr slideshow (on Blogger) of any set of photos you want

2009-08-20T00:19:00.000-04:00

Or, how to customize Blogger's Slideshow gadget...

Or, how to add an RSS Feed to a Blogger Slideshow...

Oh you say, you can do that really easily by going to Flickr, setting up a set of photos and then choosing Slideshow, and then clicking Share. Poof, there's your embed code, no problem.

Hmm. But that doesn't fit in a Blogger sidebar. Nor does it start automatically. It's not nearly as nice as Blogger's Slideshow gadget.

So how do you get Blogger's Slideshow gadget to show only the photos from a particular Flickr set? Maybe you have several different blogs and you want each one to feature photos from a different set on Flickr.

If you choose Flickr in Blogger's Slideshow gadget, you can then choose a Flickr username or a keyword, but not both.

The answer lies in Flickr RSS feeds.

An RSS feed is way of subscribing to an often-changing Web site, like a blog, or a frequently updated Flickr set. It's a text file, and generally you link to it by referencing its URL.

Flickr automatically creates RSS feeds for your entire photostream, for each of your photo sets and groups, for your contacts' photos, even for each tag. You can also customize an RSS feed to include only those photos from a particular person with a particular tag.

Once you find (or customize) the Flickr RSS feed that includes the photos you want, you'll add it to the Blogger Slideshow gadget. You'll also need a bit of extra code, which I'll explain shortly.

Let's begin by using the RSS feed from a particular photo set. Go to Flickr and display the desired set. It can be a set that you created, or a set that someone else created. The RSS feed will only include public photos.

When you display a set, you'll see the index photo for the set to the left, and thumbnails of each photo in the set in a group to the right.

Scroll down to the bottom of the page until you see the RSS feed icon:

Right-click (on Windows) or Control-click (on a Mac) the Feed link and choose Copy Link Location (or whatever your browser calls it). You've now got most of the RSS feed. It'll look something like this:

http://api.flickr.com/services/feeds/photoset.gne?set=72157594145848803&nsid=97352149@N00&lang=en-us

In a perfect world, you should be able to open Blogger's Slideshow gadget, choose Other for Source, and then paste in the RSS Feed code in the Feed box. Unfortunately, it doesn't work.

Fortunately, Rick Klau at Blogger sent me the solution (provided to him by Brett Wiltshire, a Blogger engineer): append &format=rss_200 to the end of the feed code.

The RSS feed URL will then look like this:

http://api.flickr.com/services/feeds/photoset.gne?set=72157594145848803&nsid=97352149@N00&lang=en-us&format=rss_200

Go to Blogger, click Layout under the desired blog, and then click "Add a Gadget".

Choose Slideshow from the list that appears.

In the Blogger Slideshow box, choose Other from the Source box. (You'd think you'd want to choose Flickr, but you'd be wrong.)

Next, paste the RSS feed into the Feed URL box. Make sure you append &format=rss_200 to the end of what you copied from Flickr.

Note: A couple of my photo set feeds didn't work. When I wrote Rick and Brett again, they told me that sometimes you have to append &format=rss2 instead. And indeed, that solved the problem.

You'll know if the feed is working because Blogger will show a preview of the slideshow right in the dialog box.

And you're done. Now you can create a Blogger Slideshow from any photo set from any Flickr user!

Next, I'll explain how to customize the Flickr RSS feeds to use tags, usernames, and sets.

(Thanks Rick and Brett!)

Using new fonts from Kernest on Blogger

2009-08-14T14:37:00.000-04:00

Are you sick of Times and Helvetica? Not to mention Trebuchet, Gadget, Arial, and Courier? It seems crazy in this day and age where you can output a gorgeous print document with beautiful fonts that the Web still be limited to a very short list of fonts. Especially since CSS has been capable of handling many more fonts for more than 10 years. But font foundries were wary of setting their fonts free and browser companies like Microsoft, Netscape, and Apple couldn't quite agree on what font format to support.

Thankfully, not everyone has been waiting around to see what shakes out, and have taken matters into their own hands. One of these guys is Garrick Van Buren, a developer in Minneapolis. He's gotten permission to make a big collection of fonts available on his server, for free, and figured out how to serve the appropriately formatted font to each browser as it requires. He told me there will be upwards of 400 new fonts by this weekend.

I've been itching to experiment with some new fonts... so I thought I'd give it a whirl. You can see the results right here in my blog. The title of my blog, Pigs, Gourds, and Wikis as well as the sidebar headers, date header, and post headers are all set in Taggeschrift, a sort of steampunk style font that matches the retro-newness of the topics I talk about here.

Here's how I did it. (Note, I haven't posted all the screenshots to this article, some are linked so they don't distract so much from the text. If they're particularly big but necessary, I insert a smaller version. Click on it to see the full version.)

First, go to Kernest.com and log in. Make sure you write down your password because there's not an easy way to recover one yet if you forget it (like I did :) though Garrick is working on it.

Maybe it's me, but once I logged in I wasn't quite sure what to do.

So I'll tell you... go looking for fonts. See if you like any. Click on the Find more fonts by... link to see all the fonts in Kernest's collection sorted by style, license, foundry, designer, or family.

Once you're within a category, you'll see samples of the fonts themselves. If you're curious about a font, click it's sample text.

You'll get to the font's page on Kernest (notice the URL is http://kernest.com/font-name). You can type new sample text in the box at the top, perhaps to see how a particular header might look. And you can also just view the font at various standard sizes.

To use a font on your site, you need to add it to a project. A project is just another name for the web site where you're going to use the font. You add a project to your profile by adding its URL to the New website? box. If you've already created the project, it will appear in the USE '[THIS FONT]' ON YOUR WEBSITE box, and all you have to do is check it's name or URL. Otherwise, type its name in the New Website? box. Either way, you'll then click the Add to Selected Websites button.

A message will momentarily flash at the top of your screen saying the font was added to your project, but I didn't find it particularly obvious how to use that information. The key is in the second sentence: Click project name's for embed code. (It means Click the project's name to get the embed code.)

So that's what we'll do. In that little beige box where you just clicked "Add to Selected Websites" you should now see the title of your project turned into a link. Click it.

This will bring you to your project page, found at http://kernest.com/projects/[your project name], where your project name may have the dots replaced by dashes. And it's where you'll find the needed code.

You basically need two chunks of code, as my 3rd edition HTML book explained more than 10 years ago. First, you need to import the font using the @font-face rule. Kernest makes it relatively easy by creating a CSS style sheet on its server that contains the rule that you'll need for your site. To use it all you have to do is click in the PROJECT EMBED CODE box, and copy everything that's there. If you want, click the Show Raw CSS link to see exactly what the style sheet looks like. It's pretty straightforward. The link will look something like this:

<link href="http://www.kernest.com/www-pigsgourdsandwikis-com.css" media="screen" rel="stylesheet" type="text/css" />

(You can get more information about linking stylesheets on page 129 of my HTML, XHTML, amd CSS, Visual Quickstart Guide, Sixth Edition.)

If you like, you can copy the @font-face rule out of the style sheet and paste it directly into your own CSS style sheet. It's up to you. The advantage to leaving it on Kernest is that if you add a font later, the style sheet and rule will be automatically updated.

Now, where do you put that "embed code" or link element, which is nothing more than a link to the CSS stylesheet on Kernest? Anywhere in the <head> area of your Web site, preferably up near the top.

In this example, we're going to use it for a blog, so we have to dive into Blogger's innards. Go to your Dashboard on Blogger, and click Layout under your desired Blog.

Then choose Edit HTML from the Layout tab.

Now you'll see the HTMLly underbelly of your blog. Right there at the top, you should see the <head> section where you can stick in the link to your new Kernest stylesheet. Paste it right in.

OK, now Blogger can import the font, but it doesn't know where you want to use it. In a simple Web site, you'd just need to set up some font-family CSS rules and apply them to different selectors, perhaps you want the h1 elements to use one font and the body to use another.

Blogger however, has another layer of information that goes on between its database and the output, namely a number of variables. Currently, Blogger has five text variables. In the Minima template that I'm using as a base, they're defined right up at the top of the stylesheet, just below the <head>. Scroll down a bit and you'll see them. The first chunk of them are variables that affect the color of objects, and the last five have to do with fonts. (It's set up this way so that you can change them by using the Fonts and Colors tab, but we're going to bypass that simpler but very limited system.)

The first of the five text variables is called "bodyfont". It affects every bit of text on the page, including, but not limited to the body text, the sidebars, the headers, everything. Think of it as the base style for your entire body.

The second variable is "headerfont" but it really only applies to the Sidebar headers and the Date Header (which appears above blog posts). This is a good place to use your new font. In Blogger's Minima style, there is a list of fonts that will be used, in order of preference. Replace the first font on the list with your new font from Kernest. You should probably use quotes if you've got a multi-word font name, otherwise, don't.

Variable number 3 is "pagetitlefont" and is only used in the Header area for the title of your blog. I used Tagesschrift here too.

The fourth text variable is called "descriptionfont" and is used exclusively for the description text that appears below the title of your font in the header. My steampunk font is a bit wobbly for that little text, so I left it in Trebuchet.

The last text variable is "postfooterfont" and as expected, affects the text that appears in the footers below a blog post that contain the name of the blogger, the time the blog was posted, whether or not there are comments, etc. Strangely enough, it also is used for some bits and pieces of the sidebars (though not the sidebar headers).

Of course, all this is all specific to Blogger's Minima template. You may need to dig in and experiment with your own template to see what each variable applies to.

Even when you've figured out the variables in a given Blogger template, you'll realize that some of the variables are way too broad (like bodyfont) and some are way too specific (like descriptionfont), or at the least, there aren't enough of them. That's when you dive into the CSS rules themselves. Scroll down a little further and you'll see the CSS rules that are applied to each and every element on your Blog.

Don't know what kind of element something on your blog is? View your blog and View source. Search for the text in the element and then sleuth out what kind of element it is. Then go back to Blogger's Edit HTML page and find the offending element. Then change the font-family, (or the size, style, or color) as you like.

For example, to change the font of the Blog post titles, I had to scroll down until I found the .post h3 selector which controls them. Then I added the font-family: 'Tagesschrift'; rule.

Use Blogger's Preview button copiously to view the changes to your blog before you publish them and make them live. Be sure and test it in as many browsers as you can. As far as I can tell, Kernest's font serving system works great at least in Firefox, Safari, and Internet Explorer, which covers the vast majority of my visitors. And it looks cool!

Here's what this site looked before Kernest:

And here's what it looks like now: (course you can see it right here as well):

Searching for Facebook Privacy

2009-05-29T15:19:00.000-04:00

I love Facebook. I think it's an amazingly effective way of being present with long-distance or rarely seen friends. Still, figuring out the right balance of privacy and openness is not at all simple. But I've done some research into the various possible options and thought I had adjusted my settings to a comfortable degree.

The other day, however, I happened to land on the Public Listing that Facebook creates for me by default, and I wasn't that pleased. It listed a number of my friends as well as the pages that I am a fan of.

(To see what your public Facebook listing looks like, type "<your facebook name> site:facebook.com" into Google and sift through the rest of the people who share your name until you find your listing.)

I'm not really keen on there being a public file of my friends. And what if my friends don't want to be seen on Facebook? And I'm not really that interested in showing the world every page that I choose to be a fan of on Facebook. I like Facebook because it allows some amount of privacy... so to have it displayed out on Google like that was a bit disconcerting. (And I am not unaware of the irony of posting that public listing that I don't like on my public blog. So I've blurred out my friends and really I don't care that much about the fan pages, it's just not right that they should be public.)

That said, I don't want there to be nothing. If an old friend wants to find me, I'd like them to see that I exist, even with my silly photo with the chickens. And I'm happy for them to be able to send me a message or friend me.

To control what appears in your public Facebook listing, log into Facebook and choose Privacy Settings from the Settings menu that appears near your name at the top of the window:

Now click Search on the page that appears:

You'll then see a series of options. The first section determines who can find you when they are logged into Facebook. If you want to hide yourself from people already on Facebook, you'll want to adjust this option.

But the second and third sections deal with your Public Listing.

In the second section, I leave "My profile picture" checked, because I want it to be included in my public listing so that people can tell if I'm the Liz Castro they want.

I uncheck "My friends list" because I don't think this needs to be public information, and I'm not at all sure that my friends want it to be public information.

I leave both "A link to add me as a friend" and "A link to send me a message" checked, to facilitate people getting in touch with me.

I uncheck "Pages that I am a fan of" because again, I don't think this needs to be public information.

Finally, I leave "Create a public search listing for me..." checked because I do want friends to be able to find me.

Now my public listing looks like this:

That's much better.

(Just an aside. I use Facebook strictly for people I already know. If you're interested in knowing what I'm up to but don't know me personally, I'd rather you follow my Twitter stream.)

Color matching on Epson printer

2009-05-22T12:59:00.000-04:00

I'm making some bookmarks and business cards for the Ashfield Farmers Market and noticed that the raspberry was coming out much more purple than red. I called Epson tech support with, honestly, little hope that they'd be able to help.

Boy was I wrong. I started asking the tech support person what sort of CMYK profile I should be using and if that could be the problem. She said that I shouldn't be using CMYK at all, but rather RGB. I admit I didn't believe her at first. Why would a printer with CMYK inks require that documents be in RGB to print correctly?

But it turns out that Epson's drivers do the RGB to CMYK conversion for you, and if you send it a CMYK file, it converts that to RGB and then back again, and in my case, makes it all purple. Send it a file in RGB, and it prints quite nicely.

Thank you, Epson!

TimeMachine doesn't back up iPhoto (if iPhoto is open)

2009-05-01T17:12:00.000-04:00

A few weeks ago, I wrote about my travails with backing up my obscenely huge iPhoto library. It turns out that although Apple promises to "[take] care of everything else. Automatically. In the background." the truth is that Time Machine won't always back up an iPhoto library if it's open. In fact, it won't back up my iPhoto library ever if it's open. Is it backing up yours? I don't know. You should check.

I promised to get back to you when Apple got back to me. They did finally call me last week, and said, well, to solve the problem, simply close iPhoto and then do a backup. Well, Time Machine is supposed to backup on its own. That's the whole point. What's the point of automating backups if I have to choose them manually? The guy from Apple offered to walk me through starting a new iPhoto library (oh yeah, that's really helpful, thanks).

Maybe I'm naive, but I was pretty amazed that the guy didn't say, "Oh yes, this is a serious problem. We have our technicians working on it and as soon as they have a solution we'll get back to you."

No, he made it sound like I was being a whiner. And that it was my fault that Time Machine wasn't working as advertised. That there was something wrong with my iPhoto library. Give me a break.

But I got a few notes from people saying they had relied on Time Machine for backing up iPhoto and then lost their photos because of it. So, help me get the word out: Time Machine is not reliable about backing up iPhoto. Be sure to check your backups, do them manually, and spread the word so that no-one loses precious files.

Hide all Firefox Toolbars with a single click

2009-04-24T14:09:00.000-04:00

I just clicked randomly in the top right corner of a bucket of windows and something funny happened: the address bar and navigation bars disappeared and the content part of the window took over. It was rather nice. Check it out:

Here's the before, with all Navigation Toolbar (where the Address box and Search boxes are), the Bookmarks Toolbar, and even the Web Developer's Toolbar.

Click that little button in the top right corner, and poof, they all disappear, giving you much more space for the Web site you're looking at (or taking screenshots of, or whatever):

The best way to label photos

2009-04-21T11:55:00.000-04:00

I'm not in the car often enough to listen to very many podcasts, but I have three favorites: This American Life, NPR's Sunday Puzzler, and Internauta.

This last is a program offered by Catalunya Radio and at least for me, serves the dual purpose of keeping me connected with Catalunya and keeping me up to date on technology there (and here).

The other day I was listening to an interview of David Iglesias, the head of the "Photographic Archive of Girona" about the best ways to organize and manage collections of photos. They have more than 3,000,000 photos!

There were a couple points I found very interesting. First, he recommended scanning positives, not negatives. Second, he suggested scanning at a size that would result in a photo measuring about 2000 x 3000 pixels. Thirdly, he said, make sure you label your photos.

If you don't label, the first two suggestions won't matter because you'll never find the photos anyway.

One lovely advantage of modern digital photos over photos of yesteryear on paper is that the digital ones are automatically dated. So, as soon as you take your camera out of the box, be sure and set the date, and set it correctly.

Next, use a photo organization program like iPhoto, Picasa, or whatever. Even if you do nothing more than put your photos in that program, you'll automatically have your photos organized at least by date (which is much better than having them scattered on your desktop).

The next step is to label them. I have way more photos than I can humanly label, so even if I promise myself a million times that I will label them all, I know I won't. I couldn't if I tried. But the worst part is that thinking I can do it will keep all my photos unlabeled. Instead, I figured out a great shortcut:

I exhaustively label each group of imported photos (in iPhoto these are now Events, but used to be called Rolls, in other programs sometimes they are Albums or Folders) with the names of every single person that appears in that group of photos, as well as the name of the event, location, and any other significant information.

Note that I don't do it before I import (though that is possible in iPhoto) because I don't know who's in the Event at that point. Instead, I make the window a good size so that I can see everyone and still have a place to type in names into the Event window.

Later, I can search for a person's name, and this set of photos will appear. I will have to find the photo of the particular person I want, but that's a piece of cake now that I know it's in this reduced group of photos.

It reminds me of this great quote I saw the other day: "Organizing your email is like alphabetizing your recycling"... which in my mind means, "Don't do more work than you have to".

Switch tools in InDesign

2009-04-15T12:04:00.000-04:00

This is a tiny tip but I love it. You already know that in InDesign you can choose the Selection tool by pressing the letter V and the Direct Selection tool by pressing the letter A. But what do you do if you're writing in a text box?

Hold down the Command key to temporarily switch to the Selection tool, click outside of the text box, and then press V or A, as you need.

Time Machine doesn't back up iPhoto

2009-04-10T11:08:00.000-04:00

I've confessed before to having a scary number of photographs in my iPhoto library. However, since Steve Jobs promised that iPhoto could handle "hundreds of thousands" and since I only have a measly 40,000 I get downright testy when folks from Apple say I have too many.

This happened the other day. First, Time Machine just stopped working. Up and failed. Said it couldn't find the external drive I had just hooked up even though it had started running because said drive had just been hooked up.

I called Apple's tech support. The guy was nice and knowledgeable. Told me I had formatted the disk incorrectly, that instead of "Apple Partition Map" I should have used "GUID Partition Table" (because I have a MacBook with Intel processor). The only solution was reformatting the drive (using Disk Utility, selecting the drive, clicking the Partition tab, then clicking Options and choosing GUID).

"Why," I asked, "has it worked just fine for the last six months and today it decides it doesn't like that partition system?"

He said it was pretty random. OK, whatever. I reformat the drive.

I do a full backup, Time Machine seems much happier, but I notice that the backup file only takes up 150gb. How can that be if my iPhoto library alone takes up 162gb?

I call Apple up again. The new guy says, oh well, that sounds about right, you know, because of the compression.

But on Apple's site, it specifically says that Time Machine "copies every file exactly (without compression), skipping caches and other files that aren’t required to restore your Mac to its original state".

I point out this discrepancy and he puts me on hold as he goes to check it again.

While he's gone, I go into the backup file to see if my iPhoto Library is even there. Of course, it is not. (How could it be?)

When the Apple guy gets back on the phone, I tell him that Time Machine has not backed up my iPhoto Library at all and he says, with jaw-dropping alacrity:

"Well, it's not perfect."

I'm shocked. A backup program that skips my most important files is "not perfect".

He says, "Well, why don't you just drag the iPhoto Library to your external drive to back it up?"

Apart from the fact that it takes several hours to copy the entire library, and that this seems like a pretty lame workaround for updating the few photos that I might back up each day, I am just flabbergasted that he doesn't admit that the program has a fatal flaw. It doesn't do what it promises.

He offers no apology, no recognition that this is a big deal. I get off quickly before he can harangue me with "Is there anything else I can help you with today?"

I immediately call back and speak to Apple support guy #3. He gets that skipping my iPhoto Library is serious and has me send him my log file. He promises to get it to the engineers and get a response back within 3-5 days. It's been 3 and so far, no news.

Meanwhile, I can't not backup my iPhoto Library so I find another external drive, and copy the whole thing over. When I'm done, I decide to do one last test. I close iPhoto and try Time Machine again. This time it works, iPhoto Library and all.

So, the moral of the story is, first, make sure Time Machine is backing up your large important files. How? Open the drive where Time Machine stores the backups, open the folder "backups.backupdb", open the folder with your user name, open the folder of one of the dated backups, and go through your file structure until you find the files you're most interested in. (They should be in the same places as on your computer.)

Second, if you have a large iPhoto Library (and perhaps even a small one), make sure it's closed at least some of the time when Time Machine is running.

It unnerves me to no end to know that Time Machine may randomly decide not to back up certain files. If this is really the case, then I need a new backup program. I'll let you know what Apple says.

Formatting Cross-References in InDesign

2009-03-30T14:38:00.000-04:00

For years I used FrameMaker to layout my books so that I could take advantage of its robust cross-referencing. I was so dependent on its power that I stuck with it as it crashed continously and made me jump through hoops to get images and color the way I wanted them. But when I got my Intel MacBook, I had to say goodbye... Frame wouldn't run on Classic and Adobe decided not to upgrade Frame for OSX. So, I went back to InDesign and marveled at how my fingers still remembered so many keyboard shortcuts from my PageMaker days.

But if you've seen any of my books since then, you'll know that I have really had to tone down my penchant for copious cross-referencing. No longer! Though I tend not to upgrade unless I have to, InDesign's new cross-references had me chomping at the bit. And I have not been disappointed.

InDesign not only lets you create cross-references but gives you a fair bit of control over how to format them. Today I completely automated the extra bits section of my upcoming 2nd edition of my Blogger book.

The title of each extra bits section comes from the corresponding header earlier in the chapter, along with a page number, which in turn has its own character style.

InDesign offers the "Character Style for Cross-Reference" option for applying a character style to the entire cross reference, but you have to check the help files to see how to add a character style to only a portion of the cross-reference. Basically, you add <cs name="style name"> before the part of the cross-reference that should be formatted with the style name style, and </cs> after it.

What I discovered though, and the reason I'm writing this instead of just pointing you to the documentation, is that you need the "Character Style for Cross Reference" option even when you're not applying a character style to the whole cross-reference.

In my example, I want to grab the header name, append "p." and then grab the page number. I want the header to be styled with the "extra bits header" paragraph style and the page number to also be styled with the "extra bits page number" character style.

So, I start out with <fullPara /> <cs name="extra bit page number"> p. <pageNum /></cs>, and don't check "Character Style for Cross Reference". But curiously, it applies the extra bit page number style to the whole cross-reference and not just the bit it surrounds.

The solution is to choose "Character Style for Cross References" and then choose [None] in the pop-up menu. Now the header uses just the paragraph style and the p. and the page number use the character style as well.

Hmm. Now I'm getting intermittent results. That is, sometimes I need to check the "Character Style for Cross-References" option and sometimes not. Well, if it helps to keep part of the cross-reference in the base style, you know you heard it here first :)