Useful Stuff

Useful Stuff is kinda like a second brain for me... a place to remember stuff I've discovered about all the things I do, so that I don't forget and have to discover it all over again!

Zenfolio & Pinterest!!! At last!!!

Not sure what they changed, but I finally figured out how to pin Zenfolio images on Pinterest! This is really big, because until now, we haven't been able to do it, and so all the photographers on Zenfolio have been forgotten in the Pinterest rush. But now, we can! Do this:

1. With Safari on the Mac (haven't tested it with anything else yet) open your Zenfolio portfolio and click on the image you want to pin. This will bring the image up at a larger size with smaller thumbnails of the rest of the portfolio to the side. Click into the URL window. Select All. Copy.

2. Open another browser window and navigate to pinterest.com. Make sure you're signed in, then click the Add + button in the top bar, then click Add a Pin (the leftmost option) then enter the URL you just copied. Click Find Images. It should find the image you want. Enter a description, and then pin it (ideally with a post to Twitter as well.)

3. Now comes the tricky part. For now, you have to quit Safari. Then reopen. Then go back to Step 1. Lather, rinse, repeat.

It works!!! Can't tell you how excited I am about this. I'll be pinning tons of photos as a result of this. Thanks so much to whoever made this work!

The gogo mistake

Hoping to get a blog post up a couple hours earlier in the day, I bought a $9.95 flight pass from gogo this morning. BIG mistake! They apparently compress images radically, and now every image in my blog post looks really crappy! So now I'm wasting time trying to figure out how to make Sandvox load the images again. I'd have been much better off just waiting until I got to the airport to post.

Updated Video Workflow

Here's my basic video workflow. I've added a few items since that post:

A. Click the little gear in the lower left corner of the beginning of each clip and select Clip Adjustments. Under Video Effects, select Cartoon for OGTV videos and Hard Light for TA-TV videos. Cartoon has a dreamy look and saves video size because the soft focus means adjacent pixels are more similar. Hard Light is bigger, but necessary for the details in TA-TV.

B. I've changed my opening title method so that the opening title is now overlaid on the first 3.5 seconds of the clip. The closing title is still on a gradient background.

C. To finish, I export the movie using QuickTime. A few people don't have QuickTime, but it's a free download, and offers much more flexibility than the other options. In the export dialog box, click Options in the lower right. Under Settings in the Movie Settings dialog box that comes up, select Compression Type: H.264, Frame Rate: Current, Data Rate: Automatic, Compressor: Medium, and Encoding: Best Quality. Under Size, I use 512x288. This doesn't work with older iPhones, but does work on 4's and on all browsers with QuickTime. The reason for selecting this size is because it's my title image size used elsewhere on the website. Under sound settings, I leave all defaults. Under Prepare for Internet Streaming, I select Fast Start.

Mac HTML Email Signatures Simplified

Scroll down for my new email signature. I blogged nearly two years ago about how I created this signature. Recently, my image hosting service has been screwing up a lot, so I moved the images, necessitating rebuilding parts of the signature. Fortunately, I've discovered easier ways to do several parts of it:

HTML Editor
Previously, I used industrial-strength Dreamweaver because it was part of my Adobe Creative Suite. But the learning curve was very steep. Now, I'm using Komodo, which is free and much easier to use.

Image Host
Previously, I used ImageShack to host the chiclets and book image in my signature because I could never get images to work when hosted on Zenfolio or MobileMe. Recently, I've switched to A2 Hosting as part of my move from iWeb to Sandvox. After my recent troubles with ImageShack images disappearing, I decided to experiment with putting them on A2. I created a folder for the images in my public_html folder, tested it, and Bingo! It worked! Here's my twitter chiclet, for example, so you can see the URL.

What to Edit?
I tried for almost half the day to figure out how to edit the .webarchive files directly, because that's where the signatures are stored. I eventually gave up on that, because I could never find a tool to do it directly. Back when I originally created the signatures, I noted that the first thing to do was to build html files for each signature, then use Safari to save as .webarchive files. So I still had the original html files, and that's what I ended up editing.

Editing HTML
I didn't need to totally create the signatures from scratch, as I was just modifying what I already had. What made it much easier was that once I fixed the image sources by changing them from ImageShack to my Original Green site, I was easily able to copy the HTML of the chiclets from the first signature and paste it to each of the other signatures quickly. You can only edit the html in Komodo, so it's not a true WYSIWYG editor, but if you click the Preview button in the toolbar, it splits the window, showing the html in the top half and the design in the bottom half.

Saving Signatures
I don't know why I hadn't seen this earlier, but there's a much faster way to save signatures than what I'd previously used. To begin, simply open all of the html files in Safari and Save As .webarchive files. These files should be named obviously. The New Urban Guild signatures for Wanda and I are named NUG_Steve.html and NUG_Wanda.html, for example. So the corresponding .webarchive files are NUG_Steve.webarchive and NUG_Wanda.webarchive.

Next, open a second Finder window next to the window holding the html files and navigate this second window to Home>Library>Mail>V2>MailData>Signatures. Start at the top of the Signatures window and work down. The .webarchive file names are complete gobbledygook that you can't possibly remember or distinguish (like 2FE15CC0-C16E-458D-BCE0-A6A894EFCE8B.webarchive,) but all you need to do is to click each file and tap the space bar to bring up the preview window so you can see which signature it is (New Urban Guild, Guild Foundation, etc., in my case.) Click into the gobbledygook file name, and copy it. Go to the master html window and find the matching .webarchive file. Click into its filename, and paste the plain-English name with the gobbledygook name from the Signatures folder. Finally, move this file into the Signatures folder, overwriting the old .webarchive file. Do this for each signature and you're done.

As promised, here's what the signature looks like:

Original Green book

Steve Mouzon
AIA ~ CNU ~ LEED AP

New Urban Guild
1253 Washington Avenue
Suite 222
Miami Beach, FL 33139
USA

786-276-6000
steve@newurbanguild.com
the Original Green the Original Green Blog Original Green twitter stream We Do This Because... blog LinkedIn Original Green page on Facebook
Mouzon Design Project SmartDwelling New Urban Guild Mouzon books Mouzon images Mouzon plans

Figured Out plist Editing!

Ever since moving my websites to Sandvox, I've been bedeviled with one little aspect of creating new themes: modifying the plist. Let's start at the beginning:

A. Determine which Sandvox design is closest to the look of the site you want to build. My choice is Clean Sheets, FWIW.

B. Do you have any custom Designs that are closer to the look of the site you want to build than a stock Sandvox Design? If no, the navigate to Applications>Sandvox. If yes, skip to C.

1. Right-click or Control-click on the Sandvox icon, which will bring up a list of choices. Select Show Package Contents.

2. Navigate to Contents>Designs

3. Select the .svxDesign file for the design you've chosen (file names are fairly self-explanatory) and duplicate it.

4. Move the duplicated file to username>Library>Application Support>Sandvox.

C. Select either the Sandvox design you've just moved (if the answer to B was "no") or a custom design already in this folder (if the answer to B was "yes") and rename it for the new Design you're creating. For my New Media for Designers + Builders site I'm working on, I renamed the file NewMedia.svxDesign. Now, you're ready to modify the Design.

1. Right-click or Control-click on the .svxDesign file, which will bring up a list of choices. Select Show Package Contents.

2. The file you're looking for is Info.plist, but don't just double-click it. If you do, it'll open it up in Property List Editor, where (for reasons I can't fathom) it's almost impossible to save correctly. I've worked with this for many hours on my first two sites, finally stumbling on the right combination of keystrokes and mouse clicks completely by accident, and unable to remember precisely what I did. So don't do that. Instead, do this:

3. Open Info.plist with TextEdit.

4. Change the Bundle identifier to "Sandvox.<newthemename>" (don't include < or >... I'm just using those to make clear that "newthemename" is a variable... the name of your new theme (remove all spaces and other extraneous characters.)

5. Change the title to <newthemename>.

6. Save and close.

7. Modify your Design by changing main.css. I've had great luck with CSSedit, but that app has been bundled into Espresso, which I haven't worked with yet. In any case, it's the main.css file that determines the look and feel of your custom Design.

Creating Modified Email Signatures

I blogged some time ago about the process of creating my email signature from scratch. But what about when you just need to duplicate and modify a signature in Apple Mail? It's a lot simpler:

A. Go to Mail>Preferences and click the Signatures tab.

B. At the bottom of the second column, click "+" to create a new signature. Don't do anything to it right now.

C. Quit Mail.

D. In the Finder, navigate to (your username)>Library>Mail>V2>MailData>Signatures. The signature names (the ones with a .webarchive extension) are complete gobbledygook, but don't worry. You'll see one with a Date Modified of just a moment ago. Click on that one to select the file name.

E. Copy the file name.

F. Delete the file.

G. Now, click one of the other .webarchive signature files. Hit the space bar. This will bring up the Preview window. Scroll until you find the one you want to modify.

H. Duplicate that .webarchive signature file.

I. Reopen Mail and go back to Mail>Preferences>Signatures. You'll find the duplicated signature in the list.

J. Change its name to whatever you want.

K. Make the changes in the text of the signature.

L. Copy it into all of your email accounts where you'll be using it by simply dragging it onto those accounts in the left column.

M. Close Preferences... you're done!

Why Move from iWeb to Sandvox?

I went through months of agonizing over what to do about the demise of iWeb, and ended up with something that's an improvement on several counts: Sandvox, by Karelia Software, comes closest to iWeb's ease of use, but with several advantages:

A. It does Search Engine Optimization stuff as second nature, whereas iWeb wasn't SEO-friendly at all. It had been conceived by Apple as a sort of personal website maker before Facebook came out, and so SEO stuff was never built in. I've had MUCH better Google results since moving to Sandvox. The Meta Description is right there at the bottom of each page, waiting to be filled in. Tagging a page with keywords is simple, as is tagging photos with alternate text. Sandvox is set up with a dialog box to easily configure Google Tools and publishing a Google sitemap (the sitemap.xml.gz) is as easy as clicking a checkbox... only once, not every time you publish. These are all things that iWeb could only do with difficulty, using third-party software.

B. At first, the layout seems to be a bit of a downer... iWeb let you move text and graphics all over the page, like a page layout program, whereas Sandvox is more restrictive about how and where you place stuff. But iWeb sites often did very unpredictable things on different machines and browsers, whereas Sandvox sites are far more predictable... so the restrictions are a blessing in disguise.

C. Karelia has an active user community like iWeb did, but the difference is that whereas Apple never talks about future products, Karelia's engineers and even their owners are heavily involved in discussions of where to take Sandvox. And they listen. Already (I've only been using Sandvox for 6 months) they've implemented several changes I asked for.

D. These changes come quickly in the form of new versions, especially if you choose to take part in the beta program. No waiting a year or two for upgrades, like we did with iWeb.

E. The mechanism Sandvox uses for blogging (a "Collection") is extremely versatile. Basically, you can use the blog mechanism not only with a collection of blog posts, but with a collection of project pages, tool pages, book pages, services pages, product pages, plan pages... whatever. If you need a cover page and several detail pages within it, either organized chronologically or alphabetically, this is a really nifty feature.

F. Sandvox is much more nimble with template pages of any sort. Just set the page up the way you want and click Draft (do not publish.) You can now duplicate your new template anytime you want a new post, detail page, or whatever. Also, unlike iWeb, you can duplicate an entire collection if needed. Better yet, you can even drag and drop pages or entire collections from one domain file to the next. For example, I could copy my entire Original Green blog to the Mouzon Design site if desired just by a quick drag-and-drop.

G. Publishing is easy and clever. And if for any reason the site doesn't publish entirely (internet hiccup or whatever) you just click Publish again and Sandvox picks up where it left off rather than starting over.

H. Sandvox's sidebars are a huge time-saver. In iWeb, because it acted like a page layout program, sidebars on two pages were two distinct elements. This means that if I wanted to post lecture dates in my sidebar, I needed to change it on every single page the dates are found. With a large blog, this quickly becomes too labor-intensive. Sandvox, on the other hand, is extremely clever. For every object created on your page except for the basic text block, you can choose whether it's Inline (moves with basic text block) Callout, or Sidebar. If Sidebar, the then it gets listed as one of the available sidebar elements and you can place it on any page that has a sidebar. So if I want to change my lectures, I simply click into any Presentations element on any page of the Original Green site where it appears, make my changes, and it automatically revises it on every page where it occurs. A HUGE time-saver!

I. Sandvox has a lot of built-in Objects, from raw HTML objects to Amazon lists, Facebook buttons, contact forms, Flickr thumbnails, lists of external links, page counters, Google maps, Twitter buttons, YouTube content, etc.

J. It's easy to create a favicon for your site... you probably know already, but a favicon is the little icon that occurs in the URL line of your browser for each page of a more sophisticated site.

K. iWeb used its own blog comment system, but it was quirky and when something went wrong, it was usually impossible to fix... the comment was gone forever. Sandvox, on the other hand, has built-in support for several comment systems. I use Facebook comments, and to great effect because it drives many people to my sites that would never have known about them otherwise. When one of my Facebook friends comments, it goes on their timeline and all of their friends have an opportunity to see the comment and join the discussion. If each has 500 friends, then each comment on my site reaches close to 500 people I don't know, assuming we don't have heavy friend overlap. And you can put Facebook comments anywhere you want, not just on a blog post. Matter of fact, I have a comments module at the bottom of almost every page, because I want visitors to have the opportunity for a conversation about my entire site, not just my blog.

There's much more, but you get the idea... leaving iWeb seemed really painful at first, but it's been one of the best changes I've made in years to my internet presence.

We Do This Because...

I started Useful Stuff nearly three years ago as a sort of external memory device, to help me remember things I've figured out so I don't have to figure them out again a few months from now. Others have apparently found these things useful as well.

Recently, however, that original mission has expanded to include all sorts of musings, and I worry that people looking for how-to stuff won't be so interested in the theoretical rants, and vice versa. So Useful Stuff will go back to being a "know-how" blog, and I'll put all the "know-why" stuff on my new blog instead. It's entitled We Do This Because... because it looks more at the reasons behind things, rather than just the practicalities of getting stuff done.

I've just gone back and copied nearly three years of Useful Stuff's theoretical posts there... if you like posts like these, please consider following this We Do This Because...

How to Do a Visual Preference Survey

A Visual Preference Survey takes the pulse of a group of citizens concerning their preferences between various pairs of objects. We use them to test public preference for various languages (styles) of architecture, but they could also be used to test for many other object types as well.

To begin, select two sets of images... some use 50 pairs, others use 100, although the number isn't critical. Rather, there should be enough pairs to show trends, but not so many that they cause participant fatigue. You'll project each pair of images side-by-side, and participants will choose which one they prefer.

Each pair of images should show the same building type, but in two different languages of architecture. In other words, comparing a house to a gas station will almost always favor the house, so that result isn't useful. Also, a cottage often gets better ratings than a large house, so the size of the buildings should be similar. Also, you should control for image externalities. In other words, if one image has a blue sky, the other should as well, as a blue-sky image almost always rates higher than one taken on a grey and cloudy day. The bottom line is that you want to make the architecture the primary difference between the images, so that the results are meaningful.

Participants are given a simple scorecard, and are instructed to check the right box if they prefer the right image, or the left box if they prefer the left image. Each image pair is numbered, as are the checkboxes on the scorecards. When the survey is complete, the results are tallied in a database where they can be analyzed.

The results are often striking. Whereas we as architects can debate endlessly over architecture, the non-architects are usually quite decisive. It's really a technique we should use more often, IMO.