Nov 13
Applications, Vista 0

A better desktop with RocketDock and Vista Start Menu

Sitting in front of a computer about 80% of your working day it is important that your work environment - that is your desktop - is both visually pleasing and functional. Having switched to Windows Vista not too long ago and just bought a new laptop I spent some time customizing my desktops to increase functionality and decrease clutter. Along the way I found some useful applications and some nice tricks that I’d like to share with you.

Get a Dual-Monitor Wallpaper with DisplayFusion

One of the things that has bugged me from day one was that out of the box neither XP nor Vista allowed you to have different wallpapers on different screens if you have a dual screen setup. I’ve been working with two screens for years and a cohesive background graphic for my workspace has always been one of the items on my wishlist. When I came across the beautiful Mandolux multi-monitor wallpapers I decided that now was the time so I started digging around on the web for a small app that would let me split my desktop in half so to speak. After some trial and error I landed on DisplayFusion - a free multi-monitor desktop wallpaper application that runs on both XP and Vista alike. The application is light and easy to use and combined with a Mandolux wallpaper the result (as seen at the top of this article) is quite stunning.

Keep your tools handy with RocketDock

It’s no secret that I’m a Windows guy and I have less than kind things to say about it’s rival the Mac. But that doesn’t mean I’m not willing to say that Steve Jobs and his fruity company hasn’t come up with some briliant ideas. Ideas like the customizeable launch bar. Fortunately clever coders have created several clones of this application that run in Windows environments. One of these is the nice and spiffy RocketDock. It lets you drag and drop any application, folder or whatever else comes to mind into a dockable launch box and makes them available to you with one click. I’ve installed it on both my office computer and my laptop (as seen below) and moved the regular Windows Taskbar to the left hand side to get it out of the way. Now I have all my frequently used applications handy with one click at the bottom of my screen and if I want to dig deeper I can always go to the Taskbar. As Candide would say, it’s the best of all possible worlds.

Harness the launching power of the Vista Start Menu

An often overlooked application that I myself wasn’t fully aware of until recently is the Vista Start Menu search box. More than just a regular search box, this powerful feature lets you launch any application by simply writing (part of) it’s name and hitting Enter. This comes in handy when you want to launch a seldom used or hidden application like the equally genius Snipping Tool which for some bizarre reason is hidden within Vista. The search box catalogues all your applications and lets you launch them without digging through folder trees on the Program menu.

“But wait. That’s exactly what Launchy does” you might say (if you’re a real nerd or a Lifehacker reader). And you are right. But think about this for a second: Why would you use a third party application to do something that has been built into the operating system anyway? Sadly the prevalence of Launchy and applications like it on Vista systems shows how buggy the transition from XP to Vista has been. But fret not: If you’re already a Launchy user, try switching over to the Vista Start Menu for a while and you’ll see that you can safely get rid of that extra 3rd party bulk and still get pretty much the same results.

Tagged , , , ,
Buy Microsoft Office Ultimate 2007!
Nov 12
services, video 0

Motion Graphics for VJ I Am TV - The other part of our business

People are often surprised to learn that web design is only one part of a large portfolio of services provided by my company Pink & Yellow Media. We also provide extensive services for broadcast television. These include small scale production as well as still and motion graphics.

Over the years we have provided graphics and other post-production services for numerous TV shows and most recently a new US syndicated show called VJ I Am TV. Just to provide a sample of our services, here is the intro we created for this show based on their logo. It was made entirely in Adobe After Effects and Photoshop and utilizes still frames in a mock 3D environment to create a pop-up effect that is both engaging and modern.

The music was created by Skratch Bastid after the intro was created and it merges well with the visuals to create an overall feel of youth and vibrancy.

You can catch VJ I Am TV on numerous American networks (I don’t have the air schedules handy) and interact with them through their website. The show is part of the larger IAM network which is a video based local social networking service that includes VancouverIAM.

Tagged , ,
Nov 07
CSS, News 1

CSS Gallery Features

After three days in it’s new incarnation, Design is Philosophy is being featured in a myriad of CSS and web galleries. this in turn caused an insane spike in readership that makes my stats page look pretty weird. I haven’t had time to track back all the postings yet so I’ll keep adding on to this list in the coming days. Anyways, here is an incomplete list with big thanks to the galleries for featuring me and all the people who vote for my site (yes, you should vote too):

Feel free to submit this site to other CSS and web galleries if you like. And a big thanks to those of you who allready have.

Tagged ,
Nov 06
CSS, Tutorials, wordpress 7

Create a Twitter box in your sidebar

As part of the new design for this blog I added a Twitter box in the sidebar. There are hundreds of WordPress plugins that do this for you but they are all quite involved and they bog down the blog unnecessarily. Much easier to just hard code the box into your blog yourself. It’s actually surprisingly easy to do, but the code that Twitter provides is a bit wonky (and shockingly it doesn’t validate!).

In this tutorial you’ll learn how to easily create a fancy box that displays your latest Twitter rants in your sidebar without having to turn to clunky plug-ins that bog your blog down.

Get your Twitter Badge

To start off with you need your Twitter Badge. This is the official Twitter JavaScript that passes your latest tweets to wherever you want. You can get your badge at twitter.com/badges. Twitter has custom badges for MySpace, Blogger, Facebook and TypePad but surprisingly nothing for WordPress. That doesn’t really matter because it’s actually easier to just make one of your own.

Select Other and you are taken to page two which presents three options:

  1. Flash (Just Me) - hideous
  2. Flash with Friends - even more hideous
  3. HTML/JavaScript - great for people with eyes

Select the last option (HTML/JavaScript) and you are taken to page 3 where you can customize the code by defining how many tweets you want and what the Badge title should be. I chose 2 tweets and turned the title off. This provided me with the following code:

<div id="twitter_div">
	<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>

(This code will of course differ depending on your settings.)

Paste the code in wherever you want on your site or your blog.

Style your Badge

The Twitter Badge comes equipped with JavaScript that injects the tweets into your badge in the form of unordered list items as well as built in style elements. They are: #twitter_div (styles the badge wrap), .sidebar_title (styles the title) and #twitter_update_list (styles the unordered list).

Before you start styling, you have to fix the generated code to make it validate. Since it is the JavaScript that actually generates the list items, browsers and validators get all cranky about the code because there are no list items within the unordered list in the markup itself. Therefore you need to insert an empty list item just to please the W3C gods:

<div id="twitter_div">
	<ul id="twitter_update_list">
		<li></li>
	</ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>

Once that’s settled you can start styling your elements. Again because of the JavaScript you have to stick with the names Twitter provides, but that shouldn’t cause any problems. For my Twitter Badge I created a background PNG much larger than what I actually needed to accommodate a future situation where I would add more than 2 tweets at a time (which you can see by clicking here). The background graphic is cut off by a matching blue bottom border. The whole style package looks like this:

#twitter_div {
	background-image: url('img/twitterBG.png');
	background-repeat: no-repeat;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #5AA5BC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin-top:10px;
	padding-top: 30px;
	padding-right: 5px;
	padding-left: 5px;
}
 
#twitter_div ul li {
	color: #0C93BA;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #A1E8F7;
}
 
#twitter_div ul li a {
	text-decoration: none;
	color: #DDA84E;
}
 
#twitter_div ul li a:hover {
	text-decoration: none;
	color: #D78E42;
}
 
#twitter_div p {
	text-align: right;
	padding-right: 6px;
	padding-bottom: 10px;
}

Add a link for future followers

The observant reader will notice that there’s still one element missing: The Follow me on Twitter link in the bottom right corner. That’s the reason for the p style in the CSS code as well. So with the follow link, the final HTML markup looks like this:

<!-- TWITTER -->
<div id="twitter_div">
	<ul id="twitter_update_list">
		<li></li>
	</ul>
	<p><a href="http://twitter.com/mor10" title="Follow me on Twitter" target="Twitter">Follow me on Twitter</a></p>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>
<!-- END TWITTER -->

And with that you have a fancy Twitter box you can put in your sidebar without bogging your blog down with plug-ins.

Read the second half of this tutorial, in which you learn how to hide the time stamp at the tail end of the Tweets.

Tagged ,
Nov 05
CSS, Expression Web, News, WordPress as CMS 2

Introducing Design is Philosophy

After finishing a series of projects long overdue I finally had a couple of days to sit down and redesign my much neglected blog. Over the summer I’ve jotted down ideas and sketches for this blog but I’ve never really had time to get down to work. At the same time I’ve been telling everyone and their dog about how well Expression Web works as a blog design tool and how well WordPress works as a CMS. So I figured it was about time I put everything together to demonstrate that there is reality behind all the talk. And after 3 days of hard work, here is the result: A WordPress blog designed from scratch in Expression Design and Expression Web 2. Get the whole story »

Tagged ,