Archive for August, 2009

File Under: Programming, Software & Tools
Aug
28
2009

‘Tile Drawer’ Makes Hosting Your Own OpenStreetMap Server Dead Simple

By

We’ve been big fans of OpenStreetMap, the wiki-style world map that anyone can edit, for some time — it’s open source, more accurate than Google Maps in some rural or remote areas and it can be customized to your heart’s content.

Now there’s Tile Drawer, a project designed to allow anyone to quickly and easily set up their own OpenStreetMap server in the cloud with one-step configuration and zero administration.

The setup uses a small Amazon EC2 instance (the Tile Drawer site says the smallest instance, 1 CPU, 512MB RAM is sufficient for rendering a small state, region, or major metropolitan area). Once you have your EC2 instance set up you simply select the region you’re going to map, choose a style for your map and then use a bit of JSON to get your maps into EC2.

Once the EC2 instance is up and running you’ll have your very own OpenStreetMap-based map server complete with static tiles and the more familiar interactive “slippery” map.

If you’ve been contemplating making the leap to DIY mapping that we’ve been advocating for some time, Tile Drawer looks like a simple, inexpensive way to get up and running. Check out the site for more details and instructions on setting up your map server.

And just in case you were wondering, OpenStreetMap’s tiles are gorgeous:

See Also:

File Under: Visual Design
Aug
27
2009

Breaking Down the Worst User Experience Myths

By

The design gurus over at Think Vitamin have a great list of the Top Ten of User Experience Myths. Two in particular leaped out at us: the myth that more user preferences is always a good thing, and the myth that design solutions have to be original.

When it comes to preferences, Think Vitamin’s Keith Lang nails it: “every preference which is not really needed is a design choice that I’m offloading to all the users of my product or service.”

If there was one thing we could eradicate from the software world it would be this myth that more preferences equals power user happiness. In fact it’s offering the right preferences that makes all your users happy, regardless their skill level.

The second myth we’d like to see more designers breaking is the myth that everything has to be original. Hopefully this one is a bit more obvious, but if you haven’t figured it out by now, there is a reason that power buttons have similar icons, CMD+C/Ctrl+C always copies text and download buttons usually have an arrow pointing down.

There’s no need to re-invent the wheel to solve every interface problem. Don’t be afraid to borrow or even outright steal ideas that are so common they’ve become part of the universal language of design.

Be sure to read Lang’s whole post as there are quite a few other myths worth remembering.

Photo: Fensterbme/Flickr

See Also:

File Under: Humor, Software & Tools
Aug
27
2009

Awesome Bar Awkwardness Stymies Firefox Upgrades

By

Firefox enjoys one the of the fastest upgrade turnarounds in the software world. Typically, Mozilla can boast that about 90 percent of its users will upgrade within a year of major new release. But what about that 10 percent that holds on to its older, potentially insecure browsers?

The Mozilla Blog of Metrics exists largely to answer questions like that and, in the case of the migration from Firefox 2 to 3, it turns out that shame and embarrassment were at the top of the list of reasons for not upgrading.

Firefox 3 introduced the new smart address bar, aka the “Awesome bar”, which significantly changed to the way history and bookmark searches worked in the browser’s URL field. But it turns out that a number of you are heading to websites you don’t want showing up in later searches.

It can be awkward. Imagine you’re interning at Pitchfork and someone sits down at your workstation only to discover you’ve been visiting an ABBA cover band’s MySpace page. Or imagine if Wired.com’s tech team discovered that Webmonkey staffers had hacked all their admin sites to customize their default installations?

Then there’s the porn thing.

The initial version of the awesome bar lacked a good way to selectively control what shows up in your URL bar when you children sit down to do a bit of web browsing. And, clearly, a sizable slice of the Firefox user base was adversely affected by that oversight.

But what’s really interesting is that even though that issue has since been addressed — the URL bar in Firefox 3.5 allows you to choose between searching just history, just bookmarks, both or nothing at all — people still don’t want to upgrade.

Of course, concern about exposing your dirty web browsing secrets isn’t the only reason people won’t upgrade. Head over to the Mozilla Metrics Blog for some other reasons, ranging from the pretty good (web designers who need to test sites in older versions of Firefox) to the deeply confused (“If you say this is free… I have always heard there is really nothing free in this world”).

See Also:

File Under: Software & Tools, Visual Design, Web Basics
Aug
25
2009

New JavaScript Library Brings Vector Graphics to the Masses

By

The use of Scalable Vector Graphics, better known as SVG, has long been a great way to create dynamic graphics on the web — just feed your ever-changing values into an SVG XML file and you’ve got an always up-to-date image. It’s a great tool for displaying dynamic charts, graphics and other data visualizations on the web.

But of course, there are some issue with SVG, namely (what else?) inconsistent support across browsers. Eventually, SVG will likely enjoy native support in all the major browsers. In the mean time, there’s a possible solution on the horizon — the SVG Web JavaScript Library.

SVG Web is a JavaScript library which provides SVG support for most browsers, including Internet Explorer, Firefox, and Safari. Combining the library with the native SVG support in many browsers brings you to a solution that reaches about 95 percent of the web.

That’s pretty good by nearly anyone’s standards, and the demos on the project’s website show off some impressive tools — drag and drop photo editing, a Tetris knock off and more.

The only catch is that the SVG Web project is still in the early alpha stage and has quite a few bugs (several of the examples don’t work with Firefox’s native SVG support, though everything we tried did work with the Flash fallback option).

Still, despite the early alpha status, quite a few big names, including Wikipedia, are either currently using or working on projects that plan to use the SVG Web library. If you’ve been itching to get your SVG graphics on the web, but you’ve been hesitant due to browser compatibility issues, give SVG Web a try. And remember, if you find any bugs, be sure to add them to tracker.

To see what all SVG Web has to offer, check out the short demo video below.

[Hat tip to Simon Willison]

See Also:

File Under: CSS, HTML, Web Standards
Aug
25
2009

Use @font-face Today With Free, Legal Fonts

By

With the latest versions of Safari, Firefox, Opera and Google Chrome all supporting CSS’s new @font-face rule, you might think web designers everywhere would be rushing to add fancy fonts to their websites. But of course, most aren’t. So why, if designers have been bemoaning the state of typography in the browser since the dawn of the web, hasn’t the recent growth of @font-face support turned things around?

There’s actually another, much more complicated problem with @font-face that stops it from being the panacea for your font woes: licensing.

Unfortunately, the font foundries which create, sell and license fonts have thus far been reluctant to embrace licensing terms that would allow designers to serve fonts via @font-face legally. The foundries fear pirates would be able to steal fonts much more easily if the files were published in the wild on the web.

There are some possible solutions to this, such as third-party middlemen like Typekit. However, involving yet another layer of complexity (and potential failure) to your web stack isn’t anyone’s idea of fun. So what’s a designer to do?

It turns out there are actually some fonts that you use with @font-face today. Font Squirrel, one of our favorite places to find free fonts has an entire section devoted to @font-face compatible fonts.

Two things to keep in mind with Font Squirrel’s list: First, as the site says, “Font Squirrel makes no guarantee that our interpretation of each license is correct,” which means make sure you read it yourself and possibly contact the creator to clarify. And second, some of these fonts are downright ugly.

But not all of them. Designer Francesco Mugnai recently posted a nice roundup of some of the best @font-face candidates from the Font Squirrel collection, including two of our favorites, Museo Sans and Anivers.

Of course, even with legal fonts and decent browser support, @font-face isn’t for every project. However, if you’re sick of Flash solutions like sIFR tired of being limited to only the six fonts found on nearly every PC, Font Squirrel’s list of @font-face compatible free fonts could be the solution you’ve been searching for.

Photo: healthserviceglasses/Flickr

See Also:

Tags: , , ,
File Under: Visual Design, Web Basics
Aug
24
2009

Complex Web Layouts Made Easy With New CSS3 ‘Flexible Box Model’

By

While HTML5 has been getting most of the attention lately, CSS 3, the other half of the web developer’s toolkit for next-generation web pages has been progressing as well.

Although the CSS Working Group has taken a fair amount of flack from the development community over the years, despite the Working Group’s lack of transparency and refusal to engage the community, the actual implementers — Apple, Mozilla, Opera and Google — continue to push CSS 3 toward the mainstream.

One of the more interesting aspects of CSS 3 is the new Flexible Box model spec which essentially allows you to define how unused portions of block level elements are handled. Sound confusing? Well, initially it can be. Fortunately, Alex Russell of Dojo fame has put up a nice guide to using the new flexible box model.

Essentially, two new CSS 3 selectors, hbox and vbox, allow you to easily center an element within its parent element. Then, as the spec says, “unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.” In other words, you can make some child elements flexible and others fixed, which makes for considerably more complex layouts using only a fraction of the code you’d need to do that using pure CSS 2.

One thing to keep in mind: selectors like hbox and vbox are not universally supported yet, so if you need everything to work in IE, this method is off limits. However, hbox and vbox do work in Gecko and Webkit, which means these tricks will work just fine for Safari, Firefox and Chrome. Opera is only progressive browser missing from the list.

As Russell points out in his write-up, while universal support is still a ways away, these techniques could be used in mobile interfaces where Safari and Chrome are prevalent.

See Also:

File Under: Software & Tools
Aug
24
2009

Reach Out and Touch the Web With Firefox’s Coming Multitouch Support

By

Mozilla has revealed it is working on a new set of touchscreen tools for the Firefox browser.

The software maker’s multitouch Firefox project is still in its infancy, but the goal is to eventually offer web developers a way to tap into a new multitouch support structure to create online games and alternative touch-based user interfaces for web apps in Firefox.

At the moment, there are no hard and fast plans regarding exactly when multitouch support, which would be accessible through new APIs, might land in Firefox. The current goal calls for the new tools to arrive in Firefox 3.6, which is due later this year.

Touchscreen interfaces are gaining in popularity industry-wide — phones, netbooks, even some desktop PCs are starting to offer touch-sensitive screens. Windows 7, just a couple of months away, will offer even greater support for touchscreen hardware. Of course, the touchscreens only work if the software you’re using understands the input it’s receiving. In some cases, the OS itself provides those multitouch hooks (like on the iPhone), but even then software needs to adapt and use the new inputs.

The result is a computing environment where some of the applications are touch-sensitive and others are not, and Mozilla doesn’t want Firefox to be left in the cold in that regard.

A browser that can accept events from a touchscreen would give web developers a whole new set of of events to work with. Instead of just “onclick” and or other mouse events, multitouch software would be able to understand events like “ontouch,” “ontap” or something similar. Once those events are made available though, for developers, the sky’s the limit.

These enhancements might mean more work for developers, but they also open up some very cool possibilities for new web apps and games. Check of the video below from Mozilla intern Felipe Gomes that shows off a demo of some prototyped multitouch support for Firefox in Windows 7.

Multitouch on Firefox from Felipe on Vimeo.

Perhaps the most interesting part of the project is that web developers will be able to detect multitouch devices through CSS media queries and serve entirely different stylesheets geared at multitouch interfaces. Think @screen, @print and @touch stylesheets.

Mozilla also recently announced that it was adding support for orientation events to the development trunk for the Firefox browser. This would allow Firefox to accept input from accelerometers. Web apps would be able to manipulate the page layout based on which way the screen is turned by using a JavaScript API. Right now, the only non-phone hardware that has an accelerometer is the MacBook Pro, but more laptops should have them soon.

See Also:

File Under: Blog Publishing, Software & Tools
Aug
21
2009

WordPress.com Rolls its Own URL Shortening Service

By

In what we’re hoping is the beginning of a trend, WordPress.com has announced a new built-in URL-shortening service for all of its hosted blogs. Now, when you create a post on your WordPress.com blog, you’ll see an option to create a short URLs using the new wp.me domain.

Publishers using the self-hosted version of WordPress will be able to use wp.me short links if they are running the official stats plug-in.

The new wp.me short links are coupled directly to the canonical URL and can be found in the headtags of any blog hosted on WordPress.com. That means, unlike outside URL shortening services, as long as WordPress.com is around, your shortened wp.me links will work. And if WordPress.com goes under? Well, it doesn’t matter because the canonical link will go with it.

As for the actual URL shortener, it’s pretty basic with no real stats tracking or other services like those offered by bit.ly and tr.im. WordPress founder Matt Mullenweg does mention in his announcement that if your post’s slug is short enough, it’ll be used for the wp.me URL. Otherwise, a random, unique key is used.

If you’d like to start using wp.me links for your WordPress hosted blog just click the new “Get Shortlink” button. Also note that if you’re logged in to WordPress.com you can get the shortlink for any page, just click the “Blog Info” menu in your admin bar.

Short URLs seem a necessary evil at this particular moment in the web’s history. While we’re not going to lie and say they’re a good idea, if you have to use them we’d suggest looking to your publishing platform rather than an outside service. Hopefully more publishers and publishing tools will follow WordPress.com’s lead and start offering their own URL shortening tools.

See Also:

File Under: Multimedia, Software & Tools
Aug
20
2009

The FSF Offers Web Video Publishers a Helping Hand

By

Wondering what’s happening in the world of free, open-source video on the web following this summer’s browser codec support meltdown?

The folks at the Free Software Foundation have ascended the dias to give us a broad update on the status of open video in the browser and the likelihood of seeing the widespread proliferation of plugin-free video experiences any time soon.

The Foundation’s report cites recent browser share data showing that a full 24% of the web can view Ogg Theora videos embedded in HTML5 web pages right now. But the real revolution, according to the FSF, doesn’t just involve watching a video on Dailymotion, Archive.org or YouTube without the Flash plug-in. It involves actually publishing those videos yourself, on your own site, without the need for any intermediary content hosts.

There are some “tricky” things you’ll need to do before hosting your own videos, which the FSF outlines:

  1. Edit your .htaccess file so your mime types will be set correctly and your videos will display properly.
  2. Enable others to link directly to your hosted video file, as they would an image.
  3. Set fall-backs for browsers that don’t support Ogg Theora playback using the <video> tag. The FSF recommends a short-term workaround for IE and Safari of using Cortado, a video wrapper written in Java.

The group also provides a set of instructions for enabling your visitors to upload their videos, and how you can re-encode people’s videos using free tools built on the Theora codec.

Photo: Forcery/Flickr

See also:

File Under: Blog Publishing
Aug
20
2009

Let Google’s Matt Cutts Up Your SEO Mojo

By

People in the SEO business consider Google’s Matt Cutts to be the grand poobah numero uno of search. Like a Jedi master, he is both extremely powerful and filled with knowledge about the universe.

Lucky for us, he’s also very much into sharing that knowledge and power.

No matter how many books, articles and tutorials you’ve read about search engine optimization, you should watch this video. It’s a recording of a talk Cutts gave at this year’s WordCamp — an unconference for WordPress users. It’s funny, super-informative and just over 45 minutes long.

Thanks to Barry Schwartz, who posted this to Search Engine Land earlier today.

« OLDER POSTS