Chrome’s useful Developer Tools

General | Posted by Liz
Jan 22 2010

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?

  • Share/Bookmark

Finding colour harmony with Adobe kuler

General | Posted by Liz
Jan 15 2010

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 …

  • Share/Bookmark

Cheap hi-res imaging on the way

General | Posted by Liz
Jan 03 2010

After finding the term “gigavision” in this month’s Wired magazine’s Jargon Watch, I had to read more about this technology – using computer chips as sensors, which allows pixels to be packed 100 times more densely than with CCD or CMOS captures.

There doesn’t appear to be much online about this gigavision yet – even though an article in Wired’s Gadget Lab suggest devices with the chip will be available early this year.

Gigavision will be targeted for cellphones, and not the upper end of imaging (yet).

Cheap Naked Chips Snap a Perfect Picture in New Scientist predicts these chip will “pave the way for cellphones and other inexpensive gadgets that take richer, more pleasing pictures than today’s devices.”

These chips are not set to replace CCD and CMOS sensors in the immediate future, but it’s interesting to see the rise of more hi-res/3D/interactive multi-media pieces.

With the rise of ever cheaper and better quality digital imaging, can film survive? I donated my last film camera years ago, and don’t miss the darkroom chemicals at all!

Will people still want to view movies in 2D once 3D becomes cheaper and more available?

  • Share/Bookmark

Avatar – new age for 3-D movies?

General | Posted by Liz
Dec 18 2009


I have always enjoyed 3-D movies, so I read the latest Wired article, James Cameron’s New 3-D Epic Could Change Film Forever with great interest.

Cameron wanted to create the perfect 3D camera for Avatar.

Working with Sony, he developed a “lightweight, dual-lens, hi-def camera capable of shooting precisely calibrated 3-D images that won’t give viewers a headache,” according to the December issue of Wired.

Was it worth the 10 years and $250 million-$500 million (reports vary on the cost) it cost to make?”

I can’t say as I haven’t seen it yet.

But I can pass along this comment made recently by a co-worker, who flew from Yellowknife to Edmonton for the Imax 3-D opening: “Avatar: like one reviewer put it: ‘the 3D is so good it’s like your eyeballs are having sex.’”

And there is more good news on the horizon for 3-D movie lovers – the Globe and Mail ran a story today, 3-D’s next frontier: your living room that stated, “The televisions will be in Canadian stores within six months but will consumers put on their glasses and watch?”

Within six months, experts say, 3-D televisions will be in Canadian electronics stores, selling from $3,000 to $8,000. Sony expects that by 2012, 30 to 50 per cent of its TV sales will be 3-D. And in Britain, Sky Network is months away from launching the first 3-D channel.

Will you be lining up for the latest in video technology? As for myself, I look forward to the coming of interactive hologram stories, as depicted in Star Trek.

Engage!

  • Share/Bookmark

Flash Catalyst makes interactive media easy

General | Posted by Liz
Dec 09 2009


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.

  • Share/Bookmark

Frustrations with Adobe bridge web galleries

General | Posted by Liz
Nov 27 2009

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?

  • Share/Bookmark

Ice Pilots site engages viewer with interactive features

General | Posted by Liz
Nov 17 2009

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.

  • Share/Bookmark

Photoshop metadata – © your online photos!

General | Posted by Liz
Nov 06 2009

Use Metadata pulldown menu to choose what File Info to include in web photo

Use Metadata pulldown menu to choose what File Info to include in web photo

Photoshop CS4’s new controls for adding metadata are a handy tool to control copyright information included in your online photos.

Before you export your photo for the web, go under File>File Info to see the array of metadata options.

Most important: under the Description tab, change Copyright status to Copyrighted and put photogs name under Copyright Notice (Option, g on a Mac gives © symbol), then type the year.

Also fill out info tab IPTC Contact.

The International Press Telecommunications Council’s photo metadata was made to describe and administrate photographs and to provide the most relevant rights-related information.

Finally, under Save for Web and Devices (new in CS4) choose which metadata you want to export under the Metadata pulldown menu. Include copyright info, of course.

This feature is a useful way to control which metadata is exported in your web-optimized files. I found this tip while browsing some of the movies in Lynda.com’s Photoshop CS4 for the Web lessons. Some of the information there is a little basic, but I found the web workflow description most efficient, with emphasis on smart objects, grouping/naming layers, and keeping PSD copies of everything for ease of editing down the line when you inevitably want to tweak your design.

  • Share/Bookmark

Flash video tips

General, Yellowknife | Posted by Liz
Oct 14 2009

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!

  • Share/Bookmark

Emergency notification lacking in #yzf (Yellowknife) online

General | Posted by Liz
Sep 22 2009

A recent large fire at the Yellowknife landfill had the city all a twitter with advice (“keep the windows closed”) and Twitpics of the huge cloud of black smoke that could be seen across the city, such as this series posted by Val Pond.

There was plenty of information on Twitter, but the city was silent.
There has been talk in council of using Twitter (for a full list of councillor social media links, check out Kyle’s listing.) I think that’s a good start, and keeping its website up-to-date would be another avenue.

Nanaimo's website features emergency warning registration form

Nanaimo's website features emergency warning registration form

For instance, the city of Nanaimo website features a prominent Emergency Notification link on its homepage. You register with a form and can receive emergency notifications via telephone or email. The phone/email you receive will detail the nature of the situation and give instructions on what to do.

This is a great idea, I think Yellowknife should adopt it. How about you?

  • Share/Bookmark