Web Address: www.versashore.com
Company: Versa Shore
Summary: This site was designed for a consulting firm called Versa Shore.
I used Photoshop to create the design concept and XHTML/CSS to do the layout. This site has a Flash tabbed app on the home page that cycles through the tabs or lets you select a tab. It also has a rotating client logo Flash. All the data for these Flash movies is pulled from XML so the client can update them easily.
Recently while doing an image search for pictures of french toast I noticed a link in the top corner that said New! Google Image Labeler. I thought this sounded interesting so I gave it a click.
I was surprised for two reasons:
The game goes like this:
First you are paired up with an online partner who also wants to play. Next you are shown an image and asked to label it. There is a list of off-limits labels that you are not allowed to use. The goal here is to type the same label as your partner so that you can move on to the next image. In the process you end up typing many different labels per image in hopes of typing a match. You are also able to pass on hard to label images.
You have a 2 minute time limit and score points each time you and your partner match labels. The points earn you nothing but bragging rights, and perhaps a spot in the top scorers area.
At the end of the game you are able to see a list of the words your partner used to describe each of the images. It’s very interesting to see how differently someone can see the same image.
Every once in a while you’ll get paired with someone who amazingly seems to think the exact same way you do, and that’s when it really gets fun.
The brilliant thing about the Google Image Labeler is that Google has created a quite fun game, that is actually getting work done on the back end. You see, Google uses the matched labels as possible labels for those particular images in their image search. Thus they are actually creating a more accurate human labeled image search under the guise of a “game”.
To me this falls along the same line of genius as the self checkout lines at grocery stores. People complaining about checkers being too slow? Let’s let them do it themselves and at the same time, be able to hire less checkers. Win Win! (Lose for people wanting checker jobs)
I expect we’ll see more innovations like this in the coming years. Perhaps a “flip the burger” game at McDonalds or a “help Mr. Drain chug the old oil” game at Jiffy Lube. If these games are fun like the Google Image Labeler, you’ll soon be dry cleaning your own clothes without even realizing it!
Last Thursday I got up a little early and headed up to Colorow Drive near Red Butte Gardens to meet local photographer Mike Calanan. Mike and I were hiking up to the Living Room so that he could take some pictures of me for his “This is Their Place” blog project. It’s a very cool project he’s working on where he interviews locals about their favorite place in Salt Lake City, Utah and photographs them in “their place”.
We had a great time getting to know each other although chatting became harder as we started gaining elevation and getting out of breath. Despite starting rather early, I was still a sweaty mess when we got to the top (as documented by the sweaty back in this photo).
This was my first time being professionally photographed, and it was a little weird. I need to get more comfortable in front of the camera if my male modeling career is ever going to take off.
The Living Room was awesome as always. Great views even with the slight haze over the valley. After being up there for a few minutes a cool little family came trekking up and we talked to them for a while. Turns out the woman was the Editor in Chief for a local magazine called Wasatch Woman. Her name is Pamela Baumeister. Mike and Pam chatted for a bit and exchanged info. I’m hoping he gets some photo work from it because then I would get the assist points. 
Once the photos were done, it was time to head back down and back to reality (work). Normally I like to jog down the trail because it makes for a great trail run. This time I had my laptop with me for a few photos that bordered on cheesy, but I think turned out good.
It was very cool to participate in this project and I was glad I got to meet Mike. I’ve gotten lots of good feedback so far on the photos and had a bunch of people ask me to take them up to the Living Room which I am always glad to do.
Be sure to check out the whole blog post here:
http://thisistheirplace.calanan.com/2008/07/jesse-harding.html
Ok - so it’s not Monday, but I just got this collab music piece back from a friend who was doing the final mixing. The tune is called “Mary’s Bringing it On” (no idea how we came up with that name) and it features me on keys and Luke Stoddard on everything else.
Check it out:
Some people had been telling me to check out the new Weezer “Pork and Beans” video and I finally got around to doing it.
I’m speechless. I laughed out loud the whole time. It’s brilliant and reminds me why I’ve loved Weezer ever since the Blue album.
I just… don’t even have words to describe how happy that video made me.
That’s right. Adobe announced today that it is working with Search Engine companies (namely Google and soon Yahoo) to increase the indexability of swf files.
As a Flash designer I am very happy about this. In the past the best option you had in optimizing a swf was to put your text content in a hidden div. That was always somewhat sketchy on the S.E. rules.
Thus this is great news. If I understand right Adobe is working with Google to develop a Flash plugin for the spiders that would reside on Google’s side. The idea being that when the spider hit a swf file it would now understand what to do with it rather than just skipping over it.
With Adobe’s push towards Flash dominance, Flash Video and RIAs, I think this is a very smart move and will end up benefiting designer and end-user alike… oh and Adobe too
I guess this is *kind of* a web app so I’ll put it in the Web App Review section.
I just discovered a site that lets you Rickroll someone by phone. Joy!
I was soo tempted to Rickroll that link but you my faithful readers mean more to me than a simple joke.
Basically you enter in your friend or enemy’s phone number and go. The calls I have done usually take around 15 minutes to go through. If you want priority processing you can buy a token (45 cents on paypal) that will push your call in front of the free calls. There is also a monthly membership that makes the call look like it is coming from your number (rather than unlisted)
For the free calls you are limited to one call per half hour. Still that is a lot of freakin’ Rickrolls man!!!!
They also have Chocolate Rain and Numa Numa so you can officially make the friends you still have hate you like everyone else does.
The artists of old often tried to capture moments in religious history in their works. More recently a group of artists called The Glue Society created a series of 4 Google Earth-ish images depicting moments from the Bible. Kind of a cool concept. It’s like geeky religious art I guess…
Here are links to the 4 images in chronological order:
The Glue Society is working on another series with stories from Greek mythology and also one of major historical events. Can’t wait to see the big trojan horse on the beach.
Here is a link straight to the Glue Society page about the project.
If you haven’t seen the video “Twitter in Plain English” yet check it out:
http://www.commoncraft.com/Twitter
What I really want to post here though is how cool I think Common Craft is. This is one of those “why didn’t I think of that?” sites for me. First of all it’s a two person husband and wife team which is super neat. Second of all it’s a totally unique and straight-forward substitute to boring manuals or documentation. You can scream “RTFM” at the top of your lungs but the fact is no one reads. No one even reads good books these days so how can you expect them to read about your boring site or app documentation? However watching a 2 minute video on how to use your site or app is much easier, more fun and gets the job done better imo.
Obviously these videos are simple explanations and wouldn’t work as well for something like say… Photoshop or another complicated program. However I’m pretty impressed with Common Craft’s work. My favorite is when they use fishing line to animate things like emails being sent. Classic low tech goodness!
Oh and this is just genius:
I mashed up some existing frameworks out there to create an alert that displays on your web site if your visitors don’t have the latest version of the Flash player (9.0.124.0). It is highly recommended that all web users install the latest version of the player due to exploits possible in the previous version.
You can see an example of my alert here.
(for testing purposes I am requiring Flash 11 here so everyone should get the alert for the time being)
Download the files for my script here.
The zip file download has a readme.txt file that explains how to use the script in detail. I’ll give a brief summary here:
My hack uses swfobject and a jQuery Thickbox together to display a very noticeable alert.
Normally swfobject is great for verifying the most recent version, but considering the urgent nature of this update, I combined it with a Thickbox as the alert to make sure it is very visible.
The way I did this was somewhat sneaky. Rather than point to the expressInstall.swf file that swfobject usually defaults to when flash is out of date, I pointed to my own thickBoxWarning.swf which uses ExternalInterface to launch the Thickbox.
If for whatever reason you want to go without the Thickbox simply remove the reference to thickBoxWarning.swf in the swfobject code and you’ll get a standard swfobject warning banner at the top of your site.
Here is an example of what that looks like.
Basically all you need to do to use this is place the flashSecurity folder on your server. The paths in these examples assume your flashSecurity folder is in the same folder as your web pages. If this is not the case, you’ll need to update the paths in the code appropriately. You may also need to change the path to the Thickbox window which is set in the included thickBoxWarning.fla file. Add a couple divs to the top of your page (there are examples in the zip) and you are good to go.
This is a very simple but effective way to protect your users and ensure they are aware of the update.
If you have any questions on this email me at jesse AT frogblade.com
Today is the day folks. That’s right. Firefox 3 is coming out. The release that promises dramatic improvements to performance, memory usage and speed, and free candy*!
So yeah - you are going to download Firefox 3 right? Why not help set a WORLD RECORD???
Go here and pledge to download the new version of Firefox today at 11:00 am PDT. And then hey, actually download it. Firefox is already the best browser out there. Version 3 is supposed to fix the occasional memory hogging issue which is really its only flaw.
Greenland, Africa and Mongolia are looking pretty sad on the pledge map so pick it up my friends!
*there’s not really any free candy
Just read a great article on DesignFission Blog about how to launch ThickBox from Flash AS2 using the ExternalInterface class. ExternalInterface allows you to interact with external scripts in the browser.
Here’s an example of the code AS3 stylee:
//Import the class
import flash.external.ExternalInterface;
someButton.addEventListener(MouseEvent.MOUSE_UP,function():void {
ExternalInterface.call(”tb_show” , null ,”somePage.html?keepThis=true&TB_iframe=true&height=120&width=250” , false);
}
);
Just change the green text to the code you would put in your href to launch ThickBox and you are good to go. Make sure you are bringing all the necessary ThickBox styles and classes into your page as well.
This is my review of Senduit.com. Robert Hoekman Jr. talked about it in his TODCon keynote and I thought I’d check it out. It’s such a simple app that this review will be short.
Senduit is tinyurl for file attachments. It lets you upload a large file (100 mb or less) set an expiration when the online file will be deleted (30 minutes to 1 week) and then gives you a url that you can email to people that gives them access to download the file.
In the past when I had a large file to email someone, I would ftp it up to my server and then send the link via email. I figure I can use Senduit in at least half the time it would take me to do it my old way.
Plus it’s simple enough that anyone can understand it. I just had a client who needed to get a 25MB video file to me for a project. I just had him use senduit and email me the url. Worked like a champ!
Senduit gets 2 thumbs up from me. Great service with about the simplest interface you have ever seen.
You may have read my “I heart Evernote” post a week or so ago. I’ve had a few people ask about how to do text formatting (i.e. bullets, bold, italic etc.) using the Evernote desktop app. It is possible, just very hidden.
If you double click on the title bar for your note (light blue bar at the top of a note with the title in it), the note pops up in its own Wordpad-esque window that has… you guessed it, a text formatting toolbar.
Now, I’m not quite sure why they didn’t add that in to the main interface. Seems like a logical thing to do. Until that change is made, the feature just a double click away.
Now I still heart Evernote. I mean seriously Evernote and I have taken our relationship to the next level and I can overlook its little flaws like this or the way Evernote makes a choking sound when spitting out its toothpaste or leaves its shoes all over the house. I love it too much to let the little stuff get in the way.
I was looking through old blog posts and realized something horrible. Something completely sickening. Something all but irreparable.
I had never blogged Evernote.
I thought for sure I was mistaken, but no it is true. I have never blogged Evernote. My favorite new app in the whole world.
Now in my defense, it is in beta and you have to request an account and wait for them to respond. That said, they responded within a day or two for me. Also I still have spare invites so email me at jesse AT frogblade.com if you want an invite.
There, I have rambled on for 3+ paragraphs without telling you what Evernote even is.
Basically it’s a web, mobile and desktop RIA that lets you keep notes that are then stored online and accessible anywhere. Sounds simple right? It is. Yet so powerful. For example. Your working on some code at home. Didn’t you just figure this out at work? Yes - but dang - it’s at work. Ahhhh you saved it as a note in Evernote. Problem solved!
You’re working on a report, project, novel, conference session, love letter, resignation notice etc. and you have an idea about it while at the library. Evernote it and you can access it later at home when you are finalizing the content.
You get the idea.
Evernote is searchable and can even accept html so you can paste content right from a web site without losing the formatting.
One of the wow factors Evernote boasts is the ability to read text off of image files. In other words, you could take photos of business cards on your phone, chuck the card and upload the photo to Evernote. Then you can run a search for “Lyle” and Evernote actually includes the image text in its search! There’s Lyle’s business card! The accuracy is pretty impressive as long as the text is clear and somewhat legible.
There. I blogged Evernote.
Want to watch a cool video?
http://www.evernote.com/about/what_is_en/tour/
Until yesterday most of my Adobe AIR experimentation had been with Flash and a tiny bit with Flex.
Yesterday I started working with the AIR SDK and playing around with some html AIR apps.
I was happy to find that both iframes and cookies work in AIR. Apparently since AIR uses the Safari WebKit for its browsing engine, anything that would work in WebKit will work in AIR. I even found a couple Adobe posts referencing the use of iframes and cookies so I’ve decided it’s not poor practice.
It seemed almost too easy though. I mean with an iframe you could pull almost anything (cf, php, asp) into your AIR app. Add cookies to the mix (NPI) and you could store data from your app online for later use. It can’t be that simple can it?
Adobe has always touted the benefit of AIR as being able to “use your existing web development skills to create desktop apps”. But for some reason I just thought there would be a catch. I figured you’d have to know some Flex or have some mad JS skills to make anything really cool. But with this new discovery, my mind is racing as to all the cool things that could be done. I don’t even need to learn MXML or figure out how to work with the MySQL lite db that can run inside an AIR app. Sure picking up those skills won’t hurt, but I can actually use my EXISTING skills to build an app!
And that, my friends, is why AIR rocks like nothing else out there. Stay tuned for some Harding AIR apps.
I just got an email with the subject of “ParaLegal Training”. Here is the email message:
Do you like watching “Law and Order” and have a knack for for understanding plots and legal terms?
If so, you could be earning well over $85,000 a year as a paralegal.
Start earning what your worth - Never be out of work again
Click to see what Paralegals can make!
I’m not going to go into the typos, etc. That’s too easy. I’ve never been to interested in “Law and Order” but I took their advice and applied to be a doctor based on my love of “Scrubs.”
The Software & Information Industry Association has announced the 2008 Codie Awards. Cold Fusion 8 was the winner of the “Best Web Services Solution” category.
It’s great to see ColdFusion get the recognition it deserves as a powerful programming language and web services creator/integrator. As a designer, I’ve always been impressed with how robust cf can be while still remaining simple enough for a “non-programmer” to pick up and run with rather quickly.
Ever since I got hooked on iStockPhoto a few years back, I’ve been wondering when someone would create a similar site for audio (particularly music clips). Sure Flashkit has a kind of similar thing. And there are some great audio clip sites like Beatsuite, but the great thing about iStock has always been great quality community generated content at a reasonable price. I was often heard saying, “Couldn’t someone do the same with audio?” Seriously - like very often. Perhaps daily.
Well folks. It’s been done. And who better to do it than iStock themselves:
http://www.istockphoto.com/audio
Right now they are just requesting audio clips from musicians so the option to search through audio is not yet in the search bar. However, once they get enough clips to be able to produce some accurate results, etc. I am sure this will be a great way to find audio for Flash movies, sites and also video production etc.
Needless to say - I am excited. Soon this whole blog will be laden with techno beats everytime you click or hover over anything. It’s going to be so rad!
Web Address: www.caregiversupport.org
Company: Caregiver Support
Summary: This site was designed for a non-profit organization called Caregiver Support that helps people who care for older family members or friends.
I used Photoshop to create the design concept and XHTML/CSS to do the layout. This site has a Flash tabbed app on the home page that cycles through the tabs or lets you select a tab. All the data for this Flash is pulled from XML so the client can update easily. It also pulls in and parses an rss feed. The backend coding was done by Chris Tarabochia
One of the major issues in designing web pages using standards compliant code is browser to browser testing. On a recent project, I was testing in Internet Explorer 7, Firefox, Netscape, Opera and Safari. I thought I had covered my bases.
It turns out Internet Explorer 6 was even worse with styles than IE7, thus much of my site was all freaked out in IE6. So how do you test in both IE6 and IE7?
I searched around and found a lot of cautionary messages saying most of the hacks to do this didn’t work. However, one of my work buddies found a great program. It’s called “Multiple IEs” and as the name implies, it lets you install multiple versions of IE all the way back to IE3!
I think for testing purposes 6 is probably as far back as you need to go unless you have special user scenarios where you know visitors to your site are on ancient machines or traveling through some time warp portal.
There are some features (like bookmarking) that are disabled, but for simple layout and css testing this is the perfect solution:
Install multiple versions of Internet Explorer with Multiple IEs.
Sometimes you want to highlight or delete the value of an HTML form field when a user clicks on it. This is very simple to do using javascript. Just add the following to your input tag:
To Highlight:
onFocus=”this.select()”
To Delete:
onFocus=”this.value=””
Here are examples of how each of these works:
Have fun and be careful!
I’m still trying to decide if this is completely genius or completely insane. Yesterday Gnarls Barkley released their new album “The Odd Couple” for free as one backwards (yes, reversed from finish to start) mp3 file. I’m leaning more towards genius. At least genius in that it’s a new clever promo idea that has never been done.
It’s titled ‘elpuoC ddO ehT’ which obviously is “The Odd Couple” backwards.
I haven’t read any explanation by Danger Mouse or Cee-lo yet. Maybe none is needed.
Rock Band has been one of the best investments ever. I bought it earlier this year, and haven’t been disappointed in any way except one: There are no Rock Band guitars for individual purchase. In other words, to use Rock Band to its full 4-man-band rocking potential, you have to buy a Guitar Hero guitar and hope it is compatible. Sure there are loads of Guitar Hero - Rock Band compatibility charts out there. but who wants to spend $50+ based on the review of some dude they don’t even know?
Well all that changed last week!
EA now offers WIRELESS Rock Band guitars for individual purchase! This is a monumental break-through in the progress of my band. We can now give the bass spot to that Lyle kid down the street who’s been jonesin’ to get in. As long as he brings pizza I think we’re cool.
Amazon has some pretty decent prices on the guitars. You can get the Rock Band Guitar for Xbox 360
Rock on brethren!
I just found a very cool web app that I wanted to share. In fact, it’s so cool that it is not only going in the “Web App Review” section of my site, but ALSO the “Design Tips” section. It’s just that cool.
One major issue I’ve run into when building a website for a smaller local company is what I like to call “logo blues”. Logo blues come in many varieties. Here are a few you may have heard in no particular order:
These items quickly jump from logo blues to logo nightmares when the client mentions that this is the only format they have their logo in. What usually follows is a long messy journey through Photoshop using lots of sharpen filter, contrast and other such nonsense. It’s even worse if you need a vector image because in that case you often need to retrace the whole image using the pen tool.
Enter Vector Magic…
Vector Magic is an Adobe Flex app that lets you upload an image (jpg, bmp, tiff, png, gif, even psd) and convert it to a clean vector image. The service is free if you are ok outputting a png with a Vector Magic trademark on it. EPS files cost 1 credit which translates out to $2.95 (or $2.20 if you order before 4/12/08). The quality is pretty amazing especially for solid color logos. The time this tool could save you, especially if you need a vector version of the logo or image, is awesome.
I tested out Vector Magic, first using their own logo. Here is a sample of the quality. The image on the left is the original and the right is the clean vector version:
Next I tried Google’s logo. The gradients gave VM a little bit of trouble, but still pretty good job for how easy and quick the tool is to use:
Lastly, I tried a photo. Again for how simple this app is to use, I think this is pretty impressive:
I should add that there are some editing features that appear to give you quite a lot of power to clean up the image. I didn’t use editing for any of my samples so these are just raw right through the VM engine.
All-in-all Vector Magic looks like a very cool tool and I am excited to use it on a real project in the future.
Use this code to set the focus on a text field instance in your Flash:
myTextField.stage.focus = myTextField;
Note: This only works once the user has already clicked on the swf. For example, if you had a button in your Flash that said “click here to fill out a form”, and then when they clicked that button you wanted to focus on a field, this solution would work well.
