pixels and digital bits

Thursday, March 1st, 2007

Firefly Multimedia v2.0

The Firefly website has had some major renovations.
Now with far more character than ever before!! the old site (which will soon be retired) took more of a business approach, with that Web Shop feeling. I wanted to make it more personable, more inviting, more animated, more creative…

There’s still much to be done (as always) but I’d like to be the first to welcome you to the new & improved Firefly Multimedia, Inc.

Friday, January 26th, 2007

keep it organized…

I always keep to-do list(s) - plural, exactly my point - I would start a list, then when it got too long, I would start another list, kinda reorganizing all the stuff leftover, etc, etc, etc. I have an old dog-eared book that keeps all these lists, and sporadic phone numbers and whole bunch’a other notes. Not such a time efficient way of managing my time.

I just discovered BackPackit and I love it. It took a few hours to “move in” but now I have all of my projects, notes, files, etc in one place, with cute little checkboxes and images. It even allows you to share pages (I added Cory, my new helper!)

I feel so organized!
No wonder all the freelance graphic artists recommend it!!

Saturday, January 13th, 2007

take time to pick flowers

Pushin’ up Daisey: Heavenly Noise gives YouTube a girl whirl.

Folio Weekly
John E. Citrone
January 9, 2007

Daisey and Batsauce, better known on the Jacksonville club scene as Heavenly Noise, have posted a fun-as-all-get-out video for their song “Take Time To Pick Flowers.” Basically a protracted close-up on cutesy singer Daisey broken up by cutesy stick-figure drawings, the lyrics call for universal love and kindness. The tune itself, reminiscent of a Diggable Planets groove - part samples, part performance - is damn catchy. It’s a whimsical short, running a little longer than three minutes. A comment posted by titidi2 says it all: “I can’t stop watching this. It just makes me feel so good.”

Saturday, January 6th, 2007

writing a web development proposal

Sure, you could just tally up the estimated hours, multiply it by your hourly rate and post it in an email… But the proposal is the first thing you produce for your potential client so it should be done thoroughly, informatively and with a touch of class. ;)

The basic outline I use is as follows:

• Company Info - tell your potential client a little about your company, about your skills, your qualifications. In a nutshell, give them an introduction that invites them to want to work with you.
• Project Overview - In a paragraph or two, explain your understanding of the project, their product or services, the target audience, their marketing goals… and most importantly, how you plan to meet these requirements.
• Design Notes - describe how you envision the site’s look and feel, keeping demographics and target audience in mind. Give them a few visions to run with while they read the rest of your proposal.
• Target Market Notes - who? where? show that you’ve done your research on their target audience. Emphasize how you plan to create a site suited for their demographics.
• Flow Chart - show how the site will flow from page to page. There are many flowchart diagraming apps out there, or you can even use Photoshop/Illustrator if you really want to get crafty with it.
• Development Timeline - break the project into task-oriented bite size chunks, along with estimated dates of completion, project checkpoints, client deadlines, etc. This is where you can tally up the estimated hours, show your in-depth understanding of the required features and suggest additional features that may work well within the project.
• Project Cost - this is the price breakdown, hourly rate x estimated hours, domain name registration, hosting fees, 3rd party applications and any additional fees. Also be sure to include a little time for revisions, consultations, the final walkthrough of the site, demonstrating the admin panel features, etc.
• Terms & Conditions - your potential client knows what they want from you, but you also have to define what you expect from them, ie: content, graphic assets, data, prompt feedback, etc. This is also where you can define your payment terms, deposits, non-disclosure and privacy notes, intellectual property notes.
• Example designs - it’s always a good idea to send a few applicable samples of work you’ve done in the past. You can also summarize how these projects relate to theirs: features, UI styles, similar industries. Give them only a few selections but offer more upon request.
• Ongoing Maintenance - just because the site is done, doesn’t mean the project is over! Offer a retainer fee or hourly rate for general website maintenance.

It’s a good idea to let the client know your first proposal is merely a draft. This allows room for fine tuning the requirements, and possibly finding a few new features they can’t live without.

It’s important to be informative and show you’ve done your research, but don’t be TOO detailed… sometimes clients use the proposal process as a way to have their requirements logically mapped out. That’s a huge part of any project, so you want to save the technical details for later in the courting phase… once the client has shown particular interest in working with you and your company.

Use your company letterhead, or a customized Word template. Include a cover letter. And be creative! Even business documents can have a splash of color and creativity!

Best of luck — now go get ‘em!!

Friday, December 29th, 2006

Tutorial - CSS Pre-Load Hover Buttons

Yes, I’m still working on the music sharing site. I’m finally in Code Land vs. Photoshop, which always comes as a perfectly-timed change of pace.

This tutorial will come in a series of steps, since the player control panel is a combination of a few different controls.

First, let’s focus on the big juicy play buttons.

Download the demo.

Create your HTML code like so: (each “BTN” will eventually be replaced by the play, back, next and pause icons)

<div id="playerControls">
   <a href="">BTN</a>
   <a href="">BTN</a>
   <a href="">BTN</a>
   <a href="">BTN</a>
</div>

Next, create your horizontal button strip. This image will contain all 3 states of the button: normal, hover and select. An individual button, in this case, is 31 x 31, so the 3-state button strip will be 31 x 93.

I chose to make the button background transparent to avoid any weirdness once overlayed on the brushed metal background.
Name this image “btnBackground.gif”

Now you’re ready to apply the CSS styles to the anchor tags.

<style type="text/css">
<!--

#playerControls a {
	display:block;
	float: left;
	width:31px;
	height: 31px;
	margin: 3px 9px 3px 0px;
	padding: 0px 0px 0px 0px;
	background: url("btnBackground.gif");
	}
-->
</style>

Basically, what we’re doing is making each a href link a 31 x 31 container, using the button strip as the background and clipping the image to ONLY show 1 button at a time, depending on the button’s state.

Now your anchor tag should look like a button.
Let’s add the hover property:

<style type="text/css">
<!--

#playerControls a {
	display:block;
	float: left;
	width:31px;
	height: 31px;
	margin: 3px 9px 3px 0px;
	padding: 0px 0px 0px 0px;
	background: url("btnBackground.gif");
	}

#playerControls a:hover {
	background-position: -31px 0;
	}
–>
</style>

This will scoot the background image over by 31px to reveal the middle button image when you hover over it.

Nice! Except the buttons are naked! We need to create the icons to drop on top of these button backgrounds.

Again, we want to stick with transparent images so it doesn’t override the button action happening below it. I made the icon overlays the same dimensions as the buttons, to avoid having to fiddle with inner padding and margins.

Once you make your transparent icon overlays, you’re ready to plug them into the href tags, as follows:

<div id="playerControls">
   <a href=""><img src="btnBack.gif"></a>
   <a href=""><img src="btnPause.gif"></a>
   <a href=""><img src="btnPlay.gif"></a>
   <a href=""><img src="btnNext.gif"></a>
</div>

Refresh and voila! Fancy hovering CSS buttons - using minimal images, which is always a good thing.

One finishing touch is to add the selected state.

<style type="text/css">
<!--
#playerControls .select {
	background-position: -62px 0;
	}
–>
</style>

Next… the CSS/javascript slider.

Wednesday, December 20th, 2006

cool portfolio site

Looking for an easy to manage portfolio site?

check out cabonmade

a nice high-res portfolio management site for photos, graphics, videos and flash. they have a free plan with 35 images, 3 projects. the actual portfolio page is nice and clean with little branding, and you can also create an XML feed of your images.
check it out…
lots of great portfolios to explore!

Friday, November 3rd, 2006

where to draw the digital line

shop online - great.
online dating services - fine, whatever.
digital tire alignment - accuracy, baby.

but…
electronic VOTING - obviously not working.

“12 Smartcards go missing in Tennessee” — and earlier this week I read some mess about “glitches” in Florida’s early absentee votes. How is it that they have to test COLD MEDICINE for 10 years and get FDA approved and all that hoopla before something hits the market… yet electronic voting, which has proven to be full of bugs and glitches, is still in use? I think the electronic voting machines need to go back to the lab and not see the light of day until it’s a little less buggy.

Stuffed animals have been recalled for ‘potential’ choking hazzard, yet the whole country is having a hard time swallowing electronic voting systems and it goes without affirmative action being taken.

Damn, we do more indepth and adequate testing on embedded modem software than we do on our voting system. Amazing.

And now… back to work for me: cross-platform compatibility QA testing for an application that will probably only be used by a 100 or so people.

Yes, I take pride in my accuracy.
I wish Diebold could say the same.