Mar 23

Take your Mac web server with you using Dropbox

Mac OS, design, software No Comments »

I’ve been doing this for a few months now, and it’s proved so useful that I thought I’d outline the steps here. This is another implementation of a general routine that’s been covered elsewhere:

  • Install Dropbox on as many computers as you need
  • Store your application data and preferences in the Dropbox rather than their original locations
  • Make symbolic links to the Dropbox so that the system finds the files as usual
  • Watch in wonder as your work, settings and preferences update themselves across all your computers.

I’ve found it especially useful to do this with the /Library/WebServer/Documents folder in Mac OS X. I tend to work on web projects in there, so that I can preview them as I go simply by pointing my browser to http://localhost/ . (By putting them in the webserver folder, you gain the benefit of a PHP processor without having to upload the files anywhere.)

In more detail, then:

  1. Firstly, get a Dropbox account. It’s free for up to 2GB, plus you’ll get a bit of extra free space (as will I) if you use this referral link. Download the software and install it on all your Macs.
  2. Download and install SymbolicLinker. This step isn’t strictly necessary, as it’s easy enough to make symbolic links from within Terminal, but I find it invaluable to have this as a service from within the Finder contextual menu.
  3. Now the fun begins. Make a folder called Documents, somewhere within your Dropbox. (To avoid confusion you might want to put it inside some other folder first; doesn’t matter.) Move your entire set of web files into there, complete with folders.
  4. In a Finder window, right-click / control-click on the new Documents folder, and choose Make Symbolic Link. (If you haven’t downloaded SymbolicLinker, this option won’t be there, and you’ll need to do this in the Terminal instead).
  5. Open a new Finder window, navigate to /Library/Webserver . Make sure there’s nothing in there that you want to keep (your web files should be safely in the Dropbox by now, after all) and delete the /Library/Webserver/Documents folder.
  6. Go back to your Dropbox. Drag the file named Documents symlink over into /Library/Webserver, and rename it to just Documents. You should now find that going to http://localhost/ will point you to the files stored in your Dropbox.
  7. Go to your other Mac(s) and repeat steps 1, 2, 4, 5 and 6 . Done!

You now are in the extremely useful position whereby any web work you do at home on the iMac, say, will be synced over to the Macbook in the blink of an eye, ready to demonstrate to anybody. Just remember to connect the Macbook to the internet for a moment before you take it out of range, to give Dropbox the chance to update itself.

Tagged with: • • •
Feb 22

On plagiarism

design, musing No Comments »

As I’ve said before, a lot of my work tends to involve producing things based on pre-existing things. Typically, somebody needs a leaflet in the style of a pre-existing poster, or a range of publicity based on a logo that’s already been designed. Or something along those lines.

A while ago, I was doing some work for an organisation who were in the middle of choosing a new logo. They’d narrowed it down to two different options that had been mocked up by an unnamed designer (thankfully, I don’t know who it was). Knowing that I’d be producing some publicity for them, I put together quite a few designs based on the colours and elements within both logos. In the end, one was chosen and the other discarded.

Only, the following week, I saw the discarded option on the packaging for some Nintendo Wii accessories. A couple of weeks after that, in a stationery shop (as opposed to the moving kind) I saw a clipboard whose entire design consisted of just this image. And it keeps coming back to haunt me; recently I saw the same image in the background of a website for a printing company.

Please don’t take this as a criticism of any of these services/products; I presume the image involved is from a stock library, and that they’re using it entirely legitimately. What I object to, though, is a designer claiming to have produced this as a bespoke logo, for an organisation who would have no way to tell that this wasn’t the case.

I was prompted to write about this because I recently experienced almost exactly the same thing, again. Once more I was working on some material for an organisation who’d already had a logo designed by somebody else. I tracked down the font that they’d used – and, lo and behold, it turns out that the graphical element of this logo was nothing more than an abstract character from the font itself. Furthermore, an entire poster had been designed using a graphical pattern that just consisted of these characters.

Again, perhaps this was entirely legitimate; the font, after all, is available on a Creative Commons license. But again, my problem is with a “designer” (and yes, those were quotation marks, darn it) who implicitly claims to have produced these things, as a bespoke idea, for a client who has no way of knowing otherwise. More than anything, it’s an honour thing.

I’m experiencing something similar to that other great realisation we all go through: the fact that other people tell lies on their job applications, and there’s nothing you can do about it. I’ve never lied, or even particularly exaggerated, anything on a job application or a CV, and I’ve gradually found peace with the grudging acceptance that this puts me at a disadvantage compared with those who do. I guess this is similar.

But I don’t have to like it.

Tagged with: • •
Feb 02

First thing to try when sorting out cross-browser CSS issues

tips No Comments »

This is really straightforward. Almost embarrassingly so. Web designers with even a modest amount of experience know this, and I’ll even go so far as to say that most of them do it regularly. But then, there are the ones like me who, despite its obviosity, tend not to remember, and suffer the consequences.

I do most of my web styling in CSSEdit, and most of my browsing in Safari. These are both about as standards-compliant as you’ll find, as they both use WebKit to display their loveliness, so I don’t normally think much about cross-browser compatibility until I’ve finished most of the work and come back to do the tweaking, testing and fixing. So, I’d recently finished working on a site and went over to test it in IE7, and a lot of it looked inexplicably stupid. Titles overlapped each other, indents looked frankly random, and so on.

The solution? Put this at the beginning of the CSS file:

* {
margin: 0;
padding: 0;
}

Simple huh? Like I said, very well-known, but easily forgotten.

Explanation: Each browser makes default assumptions about how to display various elements. So, in the absence of any other instructions, an h1 will be bold, a certain size, have a certain margin and padding, and so on.  When making a stylesheet you override these assumptions with your own instructions. But here’s the thing: different browsers can make different assumptions from each other. So unless you’ve explicitly stated the value of, for example, the margin underneath a heading, each browser will display it according to its own rules and you can’t assume it will look the same.

By putting that little snippet at the beginning of your stylesheet, you’re defining a rule that applies to everything. In other words, you’re overriding every assumption about (in this example) margins and padding, for every element. It will immediately change the look of your page, of course – because margins that were there by default suddenly won’t be any more. But from there it’s an easy matter to go through and add them back again. And hey presto: in my case, the layout was fixed for IE in about three minutes.

Tagged with: • • • •
Nov 10

Saving graphics from a PDF to use on the web

tips No Comments »

Now and then I get sent stuff and asked to turn it into other stuff. I’m sure there are better ways of phrasing that, but this will do for my purposes. Let’s agree to overlook the wording and move on to the content, shall we?

In the spirit of “please turn this stuff into some other stuff,” I was sent a very large PDF document so that I could use some of the images in it in a web design I was working on. It’s not too tricky to extract the graphics from a PDF — I found a tip here, for example — but then I ran into a problem. Each picture I extracted had its colour and contrast almost irrevocably strangified. I tried a bit of fiddling around in Aperture but it was clearly going to be a long and laborious process.

It seemed clear enough that the problem related to colour profiles, which are something I try to avoid learning about whenever possible. (To be honest, my calibrated iMac screen, InDesign’s PDF export, and every litho printing shop I’ve used work so well together that colour accuracy has never been a problem.) All these pictures had been converted for CMYK printing, rather than the RGB I needed.

But the solution turned out to be pretty straightforward if you have Acrobat Professional and Photoshop:

  • First of all, open the PDF in Acrobat Pro.
  • Choose Advanced – Print Production – Convert Colors.
  • In the Document Colors window that appears, look for anything that mentions CMYK; if it’s there, that’s your problem.
  • Select it, choose Convert from the Action drop-down, and choose an RGB profile in the Destination Space box. (I used Adobe RGB 1998).
  • Click OK and let it do its thing, then save the PDF. It won’t look any different at this stage, because Acrobat Professional had been converting the colours to display them on your screen anyway.
  • Now open the PDF in Photoshop.
  • When the Import PDF box appears, choose images (rather than pages).
  • Select any or all of the pictures you want, and the pictures are imported, correctly displayed, and ready for you to enact your nefarious schemes upon them.
Tagged with: • • • •
preload preload preload