web

Chrome’s useful Developer Tools

22.01.2010 0

As a Mac user, I only recently downloaded Google’s Chrome browser.

The Mac version of Chrome doesn’t run extensions sadly. You need Windows Vista/XP SP2+ to access these goodies, at least for the moment.

Despite its lack of extensions, Chrome quickly became my default browser.

Although there are certain sites it had trouble with, I agree with Google’s promo blurb about Chrome. It does start-up and load lightening fast. And the search from the address bar feature is way better than typing into Firefox’s tiny search portal.

Developer Tools for Chrome

Developer Tools for Chrome

The best feature for developers is the Developer Tools found under the page icon to the right of the address bar.

Use this by pulling it up on the site you want metrics for. Check in Resources to see how long each element takes to load what the file size is.

Easily view CSS, HTML code and test JavaScript with an integrated debugger.

An article in Mashable says that Dev Tools is virtually identical to Safari’s Web Inspector. That may be true, but I can’t get Safari to play nice with Flash, so I have abandoned it.

And Firefox has some great extensions, such as Firebug and Web Developer, but that I find Firefox loads so slowly in comparison to other browsers.

What is your default browser? What do you think about the recent news – stemming from the Chinese hacks on a vulnerability in Internet Explorer 6 and Windows XP – that France and Germany have advised citizens to abandon Internet Explorer?

Finding colour harmony with Adobe kuler

15.01.2010 1
My first Kuler colour palette - Dettah iceroad. Made from my photo on Flickr.

My first Kuler colour palette - Dettah iceroad. Made from a photo on Flickr.

Harmonious colour schemes can make or sink a project, so it’s best not to just wing it.

I have seen websites transformed from blah to beautiful with a simply tweak of css colours.

So when I spotted kuler, Adobe’s web-hosted application for generating color themes, I figured it might be worth checking out. It was.

Its Air app, kuler desktop, is great for instant colour browsing – you can search by key words and it will find thousands of suitable swatches for whatever mood you want (how many swatches it finds depends on how many users have tagged using that word). You can also flip through highest rated, newest, most popular and random.

Grabbing colours is a cinch, through copying html colour code or downloading an Adobe Exchange file.

Check out this Layers Magazine tutorial on how to integrate files into Creative Suite.

But if you have time, have some fun with the colour create and your own palettes. To do this, you’ll have to go to the kuler site.

Click on ‘create’ and choose from one of the six rules for colour harmony and begin to play with the sliders on the colour wheel.

The most fun feature for me was ability to upload or use Flickr photos to create palettes – my first palette is in screenshot above, it’s the colours extracted from a Dettah iceroad photo on Flickr. The warm and cool colours work well together, should I use this scheme on my new website …

Flash Catalyst makes interactive media easy

09.12.2009 0

Flash Catalyst, now in Beta at Adobe Labs, is described as:

A new professional interaction design tool for rapidly creating expressive interfaces and interactive content without writing code. Create interactive portfolios, product guides, microsites, site navigation, interfaces for RIAs and more.

You can download Flash Catalyst beta 2 at the Lab’s microsite. The beta 2 release adds support for video, sound effects, motion easing, AIR and more.

Adobe Flash is a fantastic product for video and interactive design, but coding in Action Script can be daunting to the novice user. Catalyst aims to give non-coders the chance to work on some interactive design and prototyping.

This product will be used to create projects for the student design competition at the Reynolds Journalism Institute.

One of the things we’re trying to help them figure out is how to more cost-effectively make more immersive, more interactive content that people will want to pay for or sponsor.

It will be interesting to see what the final projects when they’re presented at Adobe in May.

Frustrations with Adobe bridge web galleries

27.11.2009 7

I recently re-discovered the Save for Web and Devices feature for Adobe. This used to be part of Photoshop but has migrated to Bridge for the CS4 edition.

The interface was a breeze, just go to Output tab, pick Web Gallery tab and add Site Info (explanation text, copyright and contact info), pick your Color Palette, Appearance, and even upload the finished product through a native FTP interface. What could be easier?

Upload interface for bridge - too bad files wouldn't work on server

The Flash templates are sharp, and as easy to make as browsing to a photo folder.

But there are issues with using this for an instant gallery. Where are the options for captions? That’s a basic feature.

Worse, the site wouldn’t work on the server, only the desktop. I tried troubleshooting – changing the permissions on the directory – to no avail.

Has anyone else had these problem?

The CS3 photo gallery features doesn’t appear to have this problem, works fine online. But its gallery templates are ugly.

So I will be sticking with jquery options for photo display – until CS5?

Ice Pilots site engages viewer with interactive features

17.11.2009 0

Yellowknifers have been abuzz about a new so-cool-it’s-cold reality series filmed in the city (and across the North!), Ice Pilots NWT. It debuts Wednesday night on the History channel, but since we no longer have cable TV am I checking it out online (until DVDs are released).


The show has fun video clips on its YouTube channel, and show is also on Twitter, Flickr, and Facebook, too.

But the showpiece is its website, icepilots.com.

Here, a fancy jquery/Flash home page leads to some fantastic interactive goodies such as:

  • Fleet: 3-D models of the planes that you can rotate and zoom in on.
  • Episodes: all have trailers – but you can’t watch numbers 2-13 yet, so be patient!
  • Extras: loud plane-engine ringtones. Awesomeness.
  • Storymap: text, photos, video and GPS tracking the planes in transit.

Flash video tips

14.10.2009 0

This Yellowknife municipal election website I have been working on for the past couple of weeks required shooting/processing and uploading 19, 5-minute videos. Since Flash video is installed in all modern browsers and accessible to the largest audience (99 per cent), it is the way to go for online video.

Making the videos is easy in the Flash interface because you are guided through the process. Go to the menu: File>Import>Import Video. The first question is: where is your flv file located. If you want to test video locally, you can browse to the video on your desktop. But if you do this, you will need to go into the Component Inspector later before you publish your Flash movie, and change the file path to where the flv is on the server once you have uploaded your flv video.

Component inspector - change the file path to server here if you used local file.

Component inspector - change the file path to server here if you used local file.

So the best way is to avoid using local files and instead have your flv file already uploaded so you can point to the path.

Best to have FLV file online and select its path on import so you don't have to readjust later in Component Inspector.

Best to have FLV file online and select its path on import so you don't have to readjust later in Component Inspector.

You can still test locally by pressing Cmd, Return (Control>Test Movie), but once you publish you won’t be able to test the swf/html files created until they are uploaded.

This is the only tricky step. The rest is just picking options for your Flash skin: colour, under or over video, which controls do you want. Then test and publish (checking Publish Settings to make sure the file size will be OK for your audience.

Once you hit “Publish,” three files will be created: swf, skin swf, and the html code you will need to add to your page to run the Flash. Integrate the html into your page, and upload all three file (because the flv should already be up!)

That’s all there is to it!

YouTube videos used as website

01.09.2009 1

I love how BooneOakley.com used YouTube videos – linked together through annotations – as its website.

It is fun, simple and perfectly gets the message across. The site uses a URL redirect into YouTube and all navigation is done within YouTube. Even the ‘contact’ option uses YouTube mail.

YouTube gives several interactive options for publishing your videos, found under: My Account/>Annotations.” title=”YouTube gives interactive options ” width=”400″ height=”340″ class=”size-full wp-image-754″ /><p class=YouTube gives several interactive options.

(Thanks Adobe Edge and its Edge of Flash article for tipping me off to this site.)

The danger of online news

02.08.2009 0

At the beginning of this video, Martin Moore of News Standards Trust tells the story about how United Airlines’ stock lost a billion dollars after a series of improbable coincidences pushed a years-old story about United going bankrupt to the front of Google News. This perfectly illustrates a danger from reading unsorted news stories online.

To aid search engines and end users differentiate relevant news more precisely, the Media Standards Trust has partnered with the Associated Press to launch a new ‘microformat’ for metadata in news stories.

A recent press release from the Media Standards Trust states that the metadata will give information on:

  • what the story is about
  • where it was written
  • who wrote it
  • where it was published
  • the news principles it adheres to (if any)
  • any usage rights associated with it

I applaud this experiment, not only could it help determine the quality and relevance of your research but would allow for filtered search options.

For more information on this new microformat, visit Value Added News.

Another technology to aid searches also caught my interest this week, WolframAlpha, a ‘computational knowledge engine’ (via Wired magazine).

Now in Beta, WolframAlpha is described as the “first step in an ambitious, long-term project to make all systematic knowledge immediately computable by anyone.”

WolframAlpha doesn’t just link to pages about a topic, it pulls data from various sources and recombines it on the fly. This technology will be huge for all kinds of research.

Having a Hoot

18.07.2009 1

With HootSuite, you can manage multiple Twitter profiles, pre-schedule tweets, and measure your success.

With HootSuite, you can manage multiple Twitter profiles, pre-schedule tweets, and measure your success.


I recently began to use Twitter at work and decided it was time I got around to signing up for an account with HootSuite to make it easier to tweet from both work and home. I already knew this tool allows for scheduled tweets but I didn’t know that you can:

  • manage user profiles to let multiple people tweet from same account
  • “Enable auto track” to add initials to tweet
  • embed Google AdSense to generate money from your tweets
  • tweet your RSS feed (advised to select frequency of tweets so as not to appear spammy)
  • collect stats on click-throughs of your links

For more information on this great Twitter power tool, I recommend this blog post by Chris Spagnuolo.

Netvibes great for feed aggregation

19.06.2009 1

I had to check out Netvibes after reading a story about Kris Krug on Techvibes. Netvibes is a “multi-lingual Ajax-based personalized start page or personal web portal.”

Once I discovered the fun feeds on Kris’s page I figured I needed a page of my own. Since I use several social media channels, why not pull them all together. So I added my blog RSS, Flickr photo stream, YouTube videos and Twitter stream. As well, I created another page to capture similar feeds but using keyword “Yellowknife.”

http://www.netvibes.com/liz-hargreaves

http://www.netvibes.com/liz-hargreaves

This tool is a great asset to aggregate social media and other feeds. The Twitter widget was (and still is!) hanging, so I clicked “Add a feed” instead and pasted in the feed URLs, that works fine.

I also created a tab to stream some of Yellowknife’s social media scene, which is interesting. I like the hourly weather tweets, you get to see the trends better than just static temperature check.

I love Netvibes because it makes it so easy to pull in multiple feeds and present them in attractive ways. Which feeds should I add next?