Flutter audio player won’t show up

Try as I might, I can’t seem to get the audio player to show up. The
field type is set to audio, and I’ve uploaded a .mp3 successfully.
I’ve tried various alterations on get_audio($fieldName, $groupIndex=1,
$fieldIndex=1), as well as just get_audio(‘fieldname’) and the code
for the player shows up in the HTML, but not in the browser.

It shows up like this in the browser:

 <div style='padding-top:3px;'><object classid='clsid:D27CDB6E-
 AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/

 pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='95%'
 height='20' wmode='transparent' ><param name='movie' value='http://
 domainname.com/subdirectory/wp-content/plugins/fresh-page/js/
 singlemp3player.swf?file=http%3A%2F%2Fdomainname.com%2Fsubdirectory
 %2Fwp-content%2Ffiles_flutter%2F126210487606WeddingDress.mp3'
 wmode='transparent' /><param name='quality' value='high'
 wmode='transparent' /><embed src='http://domainname.com/subdirectory/

 wp-content/plugins/fresh-page/js/singlemp3player.swf?file=http%3A%2F
 %2Fdomainname.com%2Fsubdirectory%2Fwp-content%2Ffiles_flutter
 %2F126210487606WeddingDress.mp3' width='50%' height='20'
 quality='high' pluginspage='http://www.macromedia.com/go/

 getflashplayer' type='application/x-shockwave-flash'
 wmode='transparent' ></embed></object></div>

I did a little work on that, and added something to decode the URL to get the “/” slashes back, but that didn’t work either. I checked – the file exists, and I can get to it by copying the URL from the HTML code generated. And, going to the copy of the .swf player file loads in my browser as well. The file permission checks out. So, why won’t it show up? Wah.

I got me some web estate.

Nothing really there yet, just a little “coming soon.”

But, yay. http://www.taradeewebs.com.

I decided to go with HostGator. It just felt better to go with what I know, and who I already trust and have experience with.

Fighting with IE6 today.

I love this.

I have been pretty discouraged lately about my web design process. How I need to grow up, how I don’t know what I’m doing, how I’ll never be a good designer – you know, the normal. I’ve been trying to outline how I think I should go about it, and have been wanting to gather other designer’s input and how they go about their client relationships. And, lo and behold, I got on the Twitter tonight and @aaroni269 retweeted a link to this post. Lee Munroe posts about his entire process, from start to finish. I’m abundantly thankful for this bit of encouragement. I’ll post later about what I’m thinking about the process I want to go through.

CSS Tabs / Dynamic Drive

Dynamic Drive, anyone?

I haven’t looked at Dynamic Drive in ages. It was the only tutorial place I used back in the day, though, and I thought it was kick awesome. It’s not the prettiest site ever, and it might be a little out of date, but it came in handy today.

During my internship work this week, I needed to change a line of links to a line of tabs. I already had the Javascript that made the links work, toggling div appearances on and off, so all I really needed was the CSS. I fooled around with the <ul> and <li> styles for a while, and had it working pretty well in Internet Explorer and FireFox, but fell into problems when I wanted to add a border along the bottom of the tabs, more like a separator. You know, like the top of a file folder.

I was searching online, and all I found was complicated code, and Javascript that I didn’t need. I finally found this snippet on Dynamic Drive’s CSS Library, and it helped a lot to make it happen. It might be old, there might be easier ways to do it, but this helped.

I switched from styling the <li>s, to doing most of the styling on the anchors <a>. That, and displaying the <li>s inline, is how they were able to add the border along the bottom of the <ul>.

Just a side note, I’m sure there’s some way to do this – but I tried to add a width to each of the elements (ie. 9em) so that they would be the same width, but it created a weird space between the bottom of the <ul> and the tab in IE. When I finally took it off, everything was fine and beautiful. I’m sure there’s a name for that issue

I think the “active” tab is positioned over the bottom of the <ul> which is how you don’t see the bottom border of the <ul> there. The position: relative; top: 1px; moves it down a pixel and covers up the bottom border of the <ul>. Then the padding-top: 4px; adds an extra pixel of padding to the top (the inherited padding is 3px) to make it the same height as the other tabs. Neat!

Here’s the CSS I ended up with, if you’re interested. It’s messy.

ul.viewchoices {margin-left: 0; padding: 3px 0; border: 1px solid #333333; border-width: 0 0 1px 0;
   list-style-type: none;}
ul.viewchoices li {display: inline; margin: 0;}
ul.viewchoices li a {border: 1px solid #999999; border-width: 1px 1px 0 1px; padding: 3px 7px;
   margin-right: 3px;
background-color: #EEEEEE; font-weight: normal; color: #999999;}
       ul.viewchoices li a:hover {color: #666666; background-color: #DDDDDD;}
       ul.viewchoices li a:visited {color: #999999;}
 ul.viewchoices li.tab_active a {border: 1px solid #333333; border-width: 1px 1px 0 1px;
   position: relative; top: 1px; padding-top: 4px; background-color: #FFFFFF; font-weight: bold;
   color: #333333;}
       ul.viewchoices li.tab_active a:visited {color: #333333;}
       ul.viewchoices li.tab_active a:hover {background-color: #FFFFFF;}

Anyway, good job, faithful Dynamic Drive! You had just what I was looking for, plus nothing extra!

taradeewebs = bad choice?

I’ve faced a dilemma as I’ve been trying to set up my web presence. I finally settled on a nickname of mine, “Tara Dee” for my online presence, as any other name I came up with just didn’t seem to fit the bill. I felt like I just needed to be myself, Tara D, the name that many people I love know me as. That’s all well and good, but the problem is, every account ever that I sign up for already has taradee taken. Gmail, Twitter, WordPress.com, not to mention the domain name. Problem, right?

So, I knew I would probably have to add a little something when I went to actually set up any accounts. I figured it would be okay to have a domain name or account name a bit longer, and still just be known as Tara Dee within the community. I get a kick out of shortening things, so taradeewebs seemed to fit the bill. taradeestudios, nah. taradeedesign, nah. taradeewebs is quirky and perfect.

Well, the story goes like this. I was showing my mom my Twitter account, and telling her about all the cool people I was following, where they’re from, what beautiful work they do, those kinds of things. Perusing, she said, “Tara Dweebs?” WRONG. Oh bad. Oh utter, horrid marketing mistake. That’s got to be big no-no #1 in picking a company name. Don’t pick anything that can be misread as an insult.

*Sigh* Well. Oh well. I think I’m going with it. I mean, whatever. I probably am a dweeb. And dweebs are sometimes computer nerdy, right? That’s me. Not to be self-defacing or anything. And its just going to be for my domain name and any online account names.

taradeewebs = Tara Dee Webs && taradeewebs != Tara Dweebs

Spankin’ new twitter.

No promises. But. @taradeewebs.

I do promise not to post about what I ate for breakfast.

Slowing Down for Details

I think that I’m learning that images are okay in web design. That probably sounds elementary, but it was a huge roadblock to me. Especially in blog theme design, things that can be created dynamically are important, but images can really go a long way. I’m definitely guilty of creating only the header image and carrying the rest of the design with color and typography. Hey, I’ve been doing web design since 2001 and I wasn’t that great at Photoshop (Elements, by the way) so I guess colors and text was all I had working for me.

Along with learning that images are okay, I’m learning to pay attention to details. I cranked out one client’s site and realized it was just blocks of color, no depth. This can be effective, sure, but I can do more than that. That should be a starting point, sure. But then I can build on top of that to take the design a little farther.

Even if I’m bursting with ideas about details, I note those in my sketchbook, and the first mockup I make is straight up color and typography, no textures, patterns etc. I try to think about how I want headlines and dates and copy to appear now instead of thinking about them as a detail I’ll iron out when I get to the CSS part. This way, I’m also more likely to play with little detail images (ie. a talk bubble to display comment counts rather than just a simple box), rather than just style everything with text or background colors. With the first clean mock up, I’ll have a file that’s easy to change when revisions from the client come along. (*Note, I could also probably do this part in a vector graphics editor like Inkscape, to make the change of colors and shapes easier.) And just when I think I’m done and I can rush on to the pretty part, I sit back and see if there’s any other little details I could add, like some rounded corners or something like that. The next mockup is the spruced up version, with any effects (shadows, textures, etc), much more like what the “real” site will look like.

Another thing that might help is spending more time in the sketchbook, before or during a mockup design. I’ve been one to rush this part, but it’s really important. Make yourself sit there and think about little details you could add, including styling of text. Carry a theme throughout the design, don’t just rely on the header image to carry a look. Of course, there will always be things that come along as you design, but starting out thinking about details will help you not rush that part.

Little things like this can take a design from “this will do” to really making it kick awesome.

You know, little things like this: Five Minute Upgrade: Making Your Design Pop from Build Internet.

Or, 3 Ways to Add Depth to Any Website with CSS from Zurb.

Script and Style

I spent an outrageous amount of time on Script and Style recently, browsing over 55 pages (heh). It’s a great resource. It has a lot of tutorials and things like that, not just the typical "100 SHOCKINGLY BEAUTIFUL PHONE DESIGNS TO GET INSPIRED BY" like a lot of web design blogs and link sites are.

I linked a couple especially helpful resources in Google Reader, the RSS feed of which can be found under "Web Design Links" to the right. I might do this differently later, like post them to here or something, don’t know.

Not that anyone reads this. But enjoy. Self.

Shiny New Gmail

taradeewebs [at] gmail [dot] com.

Eat that, spammerz!

Web Estate

I’m looking for some web estate. I mean, web real estate. I mean, hosting. And a domain name. This isn’t a new process for me, I’ve done it before, but I’m just facing a conundrum this time. I’m attracted to FatCow’s cute branding and nice yearly prices ($66, with domain name at the moment) but, whether it’s me (too many queries!) or my IP neighbors, there are so many times it’s been awful slow for one of my clients who uses it.

My last bout of web estate holdings was with HostGator. They were super nice, super helpful, and super reliable. And not slow, that I could tell. I let that account run out, knowing that I was embarking on a new web presence – new web design name, domain, everything. They’ve treated me well; the only thing is I feel like I can get a lower yearly price elsewhere. Plus, I would have to upgrade my plan in order to allow more than one domain on the same piece of hosting, which is something I’d like to be able to do. Just one less thing for a client to think about.

But, shall I sacrifice what I know works and works well for a couple dollars off a year? Who can I trust? Woe is me!