WebDev3000 » Software and Tools

Browsershots

Codrut Nistor — Fri, 04 Sep 2009 14:03:45 +0000

Creating a site isn’t that hard, but making it work properly on a few dozen different browsers, and most of them, with different behaviors depending on the operating system… now, that’s art! Since installing a few operating systems and running all those browsers to test your pages would really be a productivity killer, please let me show you something that’s going to make your life a lot easier…

… and that “something” has a very suggestive name: Browsershots. The idea behind it? Just go to the site using any browser you want, enter the address of a site you want to test, select the browsers and platforms you want to see screenshots for, and then wait. Be sure that it’s going to take a lot of time to see your screenshots if you select all available options, so choose only what you really need!

In the end, you should get to see how your site looks in Opera 10, IE 5-6-7-8, Firefox 3.5, but also in less popular browsers, like Minefield, K-Meleon or Shiretoko. Even more, I think this site could prove to be useful to those looking to get some inspiration… so step forward and get some browser shots, will ya?

Compatibility: any major browser, of course (you’ll encounter the minor ones inside Browsershots, anyway…)

Baseline

Codrut Nistor — Thu, 03 Sep 2009 07:12:59 +0000

To be honest, I don’t think design can be done without using some guides, at least from time to time. Sure, most designers have a different way of seeing things than “normal” people, but I don’t think any of them has any guidelines inside the head… because this is today’s subject, and the tool to come with it is simply called Baseline.

Keeping typographic standards in mind, the guys from ProjetUrbain.com built Baseline with the goal of making website development easier. Sure, there are plenty of methods to ease your development work, but Baseline does it by offering a nice grid and a typographic layout to play with, bringing order into a world full of chaos.

Fully compatible with the latest versions of all major browsers, including Safari, Firefox, and even Opera, Baseline takes advantage of the font metrics instead of regular line height to line up major page elements, such as paragraphs, buttons, form labels and so on.

Licensed under the terms of the Creative Commons license, Baseline comes as a fully featured package, including CSS files for deployment and development, a complete set of HTML examples and templates, and even a Photoshop base document!

Compatibility: all major browsers, including Google Chrome and Safari

myFontbook

Codrut Nistor — Mon, 31 Aug 2009 11:10:12 +0000

When talking about font collections, I have plenty of them. The only problem is that I have to check my CDs and DVDs catalogue to find the locations of those archived font collections. To make things even more interesting, I have at least a dozen archives on different disks, so… Web-based services like myFontbook are clearly better than my old-fashioned approach!

To go straight to the demo mode, just click here. Pretty cool, don’t you think? Even more, you can register for a free account, and you will also get some extra features, especially the ability to tag & categorize your fonts and find them easier in the future!

Additional features allow you to display a custom text in the preview area, and you also get a gylphs view pane for quickly scanning characters and symbols. At last, there’s also the font metrics view, which shows guides for the text baseline, default kerning, and median height. Sure, you can even print your fonts with a single click, but let’s not reveal it all, shall we?

Compatibility: any major browser, but beware – script blockers may cause various problems!

Big Browser

Codrut Nistor — Fri, 28 Aug 2009 14:30:59 +0000

One of the things I really love about Maxthon is the ability to load two sides side by side. You don’t have to be a developer to use this, since content editors and even “normal” Internet users can find themselves pretty often in situations requiring side by side browsing. While having two sites loaded next to each other may be good, what about four of them?

Big Browser is exactly the tool to use to achieve the goal described above, and while the official page claims this is still in a “very very early development state,” I think everything works just great considering this… After all, I had no crashes or any strange errors while playing with Big Browser, and the amount of memory used is pretty low (about 26MB with four sites loaded seems cool to me).

The cherry on top of the cake? This tool works on both Macs and Windows PCs, and it’s a completely free application. What else can you ask?

Compatiblity: a computer with Adobe AIR in a working state

colrful

Codrut Nistor — Fri, 28 Aug 2009 12:10:42 +0000

I usually enjoy writing about apps/resources that I can try by myself, but this time, something’s wrong here – I just found a very interesting tool, but it doesn’t seem to work. Since I think something may be wrong with my ISP, I hope you’ll be able to play with colrful, because this is something some people will really enjoy, and I don’t want to keep it aside simply because I bump into some kind of error…

If you want, you can call this Adobe AIR toy “colrful desktop” and you won’t go wrong, but if we leave name aside, this little piece of code can be used to easily retrieve Flickr photos that contain the color palette you choose. Useful, pointless… that depends on the one using it, so I won’t say anything about this part.

How does it work? Everything is very simple – you select the colors from the palette, then choose to search, and then view/download your favorites! Even more, you can paste a URL of some image, and colrful will look for similar ones on the Web!

To end this with a few words about my own experience, I should add that everything works great, only that I get a Flickr connection error when I try to preview a image. Funny that the program can connect to the site to look perform the color-based search, so… this seems to be out of my hand. Any clues?

Compatibility: as long as you have Adobe AIR (and you’re luckier than I am), everything should be fine…

Divine

Codrut Nistor — Mon, 03 Aug 2009 10:08:18 +0000

Turning a PSD file into a WordPress template can be a really tricky job, and I say this after doing a few PSD slicing jobs, and also knowing people seriously involved into the graphics/Web design field who would do anything but that. Anyway, let’s stop complaining about tough Photoshop tasks, because for almost any such thing out there, a plugin/action should be available, and when it’s not, you can try to do it yourself. Fortunately, this time I just found a piece of gold…

Bikini chicks are surely divine, as long as they aren’t exceeding legal weight and age to wear them, and so everything in the image above fits perfectly the topic – we have Adobe Photoshop, we have a WordPress theme with bikini chicks, and we also have the awesome freebie called Divine. Pretty sweet, don’t you think?

While working with Divine isn’t as easy as 1-2-3, I am sure that professionals will find that turning PSD templates into WordPress themes becomes like a walk in the park with the help of this plugin.

Once you open your PSD template, you need to assign every WordPress element to a certain part of the image, and then set all needed FTP parameters to upload the theme to your WordPress-based site. Since the official project page has details about everything you need to know, including video tutorials, I will close this story right here, right now.

Compatibility: basically, this one should work with at least Photoshop 7.0, and the resulting themes, with any WordPress version… sometimes after some manual tweaking, of course!

SilverX

Codrut Nistor — Mon, 27 Jul 2009 12:11:23 +0000

Microsoft’s Silverlight is trying to steal a serious slice of the market share the ubiquitous Adobe Flash managed to grab so far, and maybe even outrun it. If any of these will happen, that remains to be seen, but since some people are already thinking about converting their Flash content to Silverlight format, I am sure the topic of today’s last article is a very interesting one.

SilverX is a Windows free software for doing exactly what I just said – it takes a SWF file, and it turns it into Silverlight format, allowing you to open the resulting Silverlight 3 solutions with a single click, once the conversion is complete (you should also have Visual Studio 2008 or Expression Blend 3 installed for that).

Currently, vector primitives, images, text and animations are supported, but support for more advanced Flash features, like clipping layers, sounds, buttons, filters and effects is expected to arrive in the near future. That’s it, folks, but I think waiting for a few more months before dropping Flash is the best thing to do now, especially since SilverX is only free for personal use…

Compatibility: Windows XP and Vista, probably also other versions, maybe even Windows 7 (couldn’t test on all of them, obviously)

TypeTester

Codrut Nistor — Wed, 15 Jul 2009 08:50:30 +0000

Choosing the right font and general text styling can be a real pain sometimes, and that’s why I decided to tell you about TypeTester, a free online resource that’s more than just a dummy text generator, allowing you to easily pick the best settings for your ongoing projects involving a lot of text areas.

With TypeTester, there’s no need to create any kind of account or to download some piece of code – all you have to do is open the site, enter your sample text (or just use the default dummy paragraph already available), and then mess with the settings.

Apart from being able to choose base font size and font, you can also pick various column settings, like size, leading, tracking, alignment, or color, and the best part of it all is that you can have three different settings side by side to make choosing the right one easier.

At last, you should also take a look at the most wanted settings. Great feature, this one, I tell you, great feature!

Compatibility: I tried TypeTester with Opera, Firefox, IE, Google Chrome, and found no problem

Blind Text Generator

Codrut Nistor — Wed, 17 Jun 2009 11:03:58 +0000

Tired of that boring that notorious Lorem Ipsum quote? If you had to use it more than just once or twice, I am sure you’re sick of it! Since simply pasting content from other websites to see how it will look the one you’re working on when full of images and text could get you into some copyright-related trouble, why not get some other similar quotes to use?

For example, look at Blind Text Generator, the best “almost random” text generator I have seen so far! This nice online tool comes with no less than 10 dummy text styles, including the ubiquitous Lorem Ipsum I mentioned earlier, as well as quotes by Cicero, Kafka, or a random text generator that uses letters and numbers to generate the dummy text you need.

Various options allow you to set the number of words/characters to generate, as well as the number of paragraphs, and settings like font family, letter spacing, or text alignment. So far, so good…

… but if you want to know more, I strongly advise you to give Blind Text Generator a try, because there’s not that much to say about it. This one is a well done tool that gets the job done, and that’s all!

Compatibility: since generating dummy text isn’t exactly something requiring Flash or other advanced technologies, I wasn’t able to find a browser that won’t handle Blind Text Generator (or Dummy Text Generator, as my browser’s title bar says), so probably every browser you can think of is supported, except those ancient text-based ones…