The Importance of Character Encodings

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

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!

Formatting Blogger's Read More

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 

Random tip: Mousing Leftward (Updated)

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.

Blogger's new post editor

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

Labels in Blogger blogs viewed as a Cloud

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

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

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

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

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

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)

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

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

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

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.

Formatting Cross-References in InDesign

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 :)

Birth of a Wiki

(Can't remember what a wiki is? Try here.)

So, I had this inspiration the other day (as I'm wont to do... it always seems so much easier to have inspirations than to make them into reality). The inspiration was to create a wiki about an as yet unnamed topic. Then I had another inspiration... to explain how I create the wiki as I go along.

The first step was to buy the domain name for the wiki. I want it to have a simple and memorable name, both so that people can remember it, and also so that people searching for my topic may happen upon it through Google or other search engines. My web host, Lunarpages, offers a domain registration service. I can simply go to my Control Panel and buy a new domain.

You can also register a domain at a big domain registrar like GoDaddy or Network Solutions. In that case, when you're buying the domain, make sure to specify the DNS servers of your web host. They tend to be a little sneaky about where to do such a thing since they'd really rather you host your site with them. Check out the tiny line below the main box with your info in it:



Once you click the "click here to set nameservers" button, you'll see a set of fields for setting up to four nameservers. You get the numbers needed here from your web host. It's much easier and faster to set them right now than go back and edit them later.



I've been pretty happy with Lunarpages. I've been using them for a few years now and they not only have given very good service, but every few months they send me an email offering me additional services to my account, at no extra cost.

The most important of these has been free add-on domains. That means that I can host an unlimited number of domains at my one site at no extra cost. So, once I've bought a new domain, I go to my Control Panel at Lunarpages and create an add-on domain. That means Lunarpages creates a folder for me for the new domain. That folder will be the root directory for my new web site.

The trick of course isn't in the buying, but in the name choosing. You want a name that is concise and illustrative of the site's content. If the name has more than one word, it helps to choose words that don't mix together visually. Something like "talllemons" makes your visitors have to think about all those 'l's more than whatever "tall lemons" might be. Better to use something like "tallyellowfruit" so your visitors can quickly read the three words even though there are no spaces between them.

Once you've got a place for your wiki to live, you can start creating it. I'm really happy with PmWiki for small wikis. It's robust and popular, and doesn't use a database. That means setting it up is as easy as uploading files to the server. I can get a new wiki up in less than half an hour. Here's how.

Go to PmWiki and download the latest version of the software. I recommend choosing the latest stable release instead of the latest beta version.

Unzip the file on your computer. It'll look like this:



Now comes the hard part... upload (say, with Fetch or CuteFTP) all of those files to your Web Host server. I put them in the root directory of my new domain since I want the wiki to be the main page at that domain. To check if everything's working correctly, go to your browser and point it to the pmwiki.php script in your new domain (say, http://www.tallyellowfruit.com/pmwiki.php).

But don't stop there. You still have to initialize the wiki. On your computer, open the "sample_config.php" file. Check the PmWiki Initial Setup Tasks page to see the basic changes you should make to the configuration file. Especially important is that you immediately change the administrator password. I also set the name of my new wiki, and the time format.

Finally, if you want to set the wiki as the default page for your domain, create a text file with the following line:

<?php include('pmwiki.php');

Then save it with the name "index.php" and put it in the root directory of your domain.

Now test to see if it works by using your new domain name and nothing else (http://www.tallyellowfruit.com)

Next, we'll start to create the structure for the new wiki...

Blogging Flickr photos (part 4)

The other day I got a comment on the third installment of this series asking how to wrap text around photos inserted in the manner I describe there.

It's a very good question. If you use either Flickr or Blogger's automatic tools, they do the wrapping for you. But if you insert images the way I recommend, in order to link to your Flickr site from your blog, then you'll have to wrap text around them (or center them) on your own.

Fortunately, it's not difficult. Start with part 3 of my tutorial on Blogging Flickr images manually.

In this example, we'll use a photo that is narrower than it is tall. We choose the Medium size on Flickr (289 x 500 pixels) and copy the automatically generated code for the image from box number 1.



Next, paste the code into your blog post:



Adjust the width (and remove the height) if necessary, as described in part 3. In this example, so we can really see the text wrap, I've reduced the width to 200 pixels and removed the height.

Next, after the width, add the following:

style="float:left; margin:0 10px 10px 0"

Don't forget the quotation marks at the beginning and at the end!

It should look like this:



Now when you view the photo, the text that follows the image, and indeed anything else that follows the image, will wrap around to the right. Don't put anything but a space between the chunk of code and the following paragraph so that your text is aligned to the top of the image.

You can have the text wrap to the left of the image by using float:right. Remember the image floats to the side you tell it and the text goes around the other side.

You can adjust the space around the image by adjusting the values next to margin. The numbers refer to the number of pixels of space to the top, right, bottom, and left, in that order. (Start at the top and go clockwise.) So, if you float your image to the right (and the text goes to the left, you should use something like: margin: 0 0 10px 10px. Be sure to always specify px unless the number is 0.

These bits of code are CSS and are explained in detail in my book, HTML, XHTML, and CSS, Visual QuickStart Guide, Sixth Edition, published by Peachpit Press.

P.S. That's my llama! Her name is Rosie.

P.P.S. You can find the first three parts of this series on Blogging Flickr photos here, here, and here.

How to add comments to a blog post

My mom asked me the other day how to add comments to this blog. I realized it wasn't as straightforward as it should be to add comments to Blogger posts. So, I thought I'd give a quick tutorial here.

The most confusing thing is that on the main page of a blog, where several blog posts are listed at once, it's not at all obvious where to go to post a comment. In fact, it's downright hidden. But it's there if you know where to find it: It's the place that says the number of comments. Here's what it looks like on my blog:



And here's what it looks like on fivethirtyeight, another Blogger-based blog:



So, to add a comment, you click on the place where it says "0 comments" or "248 comments" or however many. And then you'll see something like this:



If you just see a long list of comments, but no place to add yours, like on fivethirtyeight's site, then scroll on way down to the bottom until you see where it says "Post a comment":



When you click "Post a comment" you get the box (like the one shown above on mine) where you can actually add the comment--though it's down at the bottom of the page.



Once you get here, you can add your comments in the box at the top (under Leave a comment). You can even add a bit of formatting... add <b> before and </b> after text you want bold, the same thing with the letter "i" if you want italics, and if you want to add a link, add <a href="the page's url here">the clickable text here</a> Be careful with all that punctuation, it's all required. (To get the URL of the page, just go there and copy the address from the bar at the top of your browser window.)

Some blogs require that you sign in, some don't. Some require you to have a Blogger account, some don't. It's all up to the person who creates the blog. (On this blog, you can post comments anonymously, though I moderate them all before making them public.)

One more thing, if you're viewing a blog post's individual page... perhaps you clicked there from the navigation bar on the right, or you followed a link from another site, you'll see the Post a comment link at the bottom of the post automatically.

Further, like fivethirtyeight, some people have set up their blogs so that when you click the "n comments" link, you go to the post's individual page, not the Leave a comment page. In that case, just scroll down to the bottom of the list of comments and find the Post a comment link. That'll always bring you to the "Leave a comment" box.

iPhoto Book Themes

If you're a Mac user and an iPhoto fan, you've probably thought about printing out some of your photos in a book. I highly recommend it. Ever since my friend, Nancy Bea, lost 19,000 pictures when her computer got accidently bumped to the floor, I've been more and more convinced that the only good backup is a printout.

I always find it hard to choose an iPhoto theme... partly because Apple only shows you a very small portion of what the interior pages of any given theme might look like. Some themes let you have a lot of text, some don't let you have any, some let you have one or two photos per page, some let you have many more, even up to 32.

But how to tell which iPhoto theme is the one you want?

Use my handy iPhoto theme wiki! I give a detailed description of each theme, including use of text, and number of photos. Then I actually show you what each page of each theme can look like, depending on the orientation of the photos you choose.



Hopefully, you'll find that it's a helpful tool for making your iPhoto books. Hey, the holidays are coming.

You'll also note that this site was created with PmWiki... although it's not currently open to the public for editing, it certainly could be. I used the wiki software to make it easy to create a lot of connected pages without having to write all the code by hand.

Surveying my Fencing Needs with Google Earth

Fencing is no fun. The sheep are incredibly voracious. They almost rival the pigs. In less than a week, they've blown through about 2000 square feet of pasture, leaving it absolutely down to the ground. Luckily, they're enclosed in temporary electric mesh fencing ("electronet") which can be moved around.

And the cow and the goats have eaten all they have too. So we decided to try to put them together. That was not a good idea. The cow, mild mannered as she usually is, flipped out and chased the hysterical sheep around the paddock. The sheep were so scared they hurled themselves against the gates trying to get out.

So, we decided maybe they needed to be near each other without being totally together. We enclosed two areas side by side so they could graze near each other without being able to scare or be scared.

Sunday morning I found one of the goats in with the sheep (little whippersnapper) and two of the sheep out of the fence in the middle of the field. Not good. Even worse when our dog started to chase them around.

First job was to get the dog in the barn. Then, I moved the fences all around once more so that everyone had lots of new grass (which will probably pacify the sheep) and they are still next to each other so they can get used to each other before winter's closer quarters.

But the cow and goats don't really have enough room, so I want to think about getting more permanent fencing. But if you look at fencing web sites, they are impossible to understand. There are as many kinds of fencing as there are tools for making gourds :)

I called a local fencing dealer and they offered to give me recommendations and an estimate if I could provide a map of the area that I want to enclose. I had recently visited Kevin's Classroom and seen his YouTube video explaining how to use Google Earth's measuring tools.

GoogleEarth seemed like a perfect tool for measuring my fencing needs. Sure, I've used it to zoom around the earth, look at my house and those of my friends, but it can be used for so much more than that.

So first, I went on to Google Earth and typed in my address. Then I zoomed in on my field. One thing I can never remember is to how to stop it from zooming in and out. Just click in the middle of the map once the field is at the right magnification (e.g., as big as it can be while still fitting in your screen).

To use the measuring tools, click the Ruler in the toolbar. These screenshots are from the Mac version, but I can't imagine the Windows version is much different (comments welcome).



The Ruler box lets you choose between measuring a single straight line ("Line") or a path of connected straight lines ("Path"). You can see the results in a number of units, both metric and English, and even including smoots.



To measure my prospective fencing, I use Path and Feet.

While the Ruler dialog box is active, there is also a cross-hairs icon in your map. Place it where you want to start measuring and click:



Click on the next point in the map to create the first leg of your path. In the Ruler box, you will begin to see the length of your path (201.55 feet in this example).



Keep clicking around the field until you finish your path. If you need to move a point, hover over it with the mouse until it changes into a hand. Then drag it to the new desired position. You can Control-click a point to remove it (I suspect it's right-click on Windows).



Once you have the whole field encircled, check the path to see how much fencing you need (about 2024 feet in this example).



Cool, huh?